/*!
Theme Name: JoAndrew (Standalone)
Theme URI: https://joandrew.com.sg
Description: Editorial K-beauty commerce for J.A. Cosmehealth, Singapore. Standalone theme (no parent). Fraunces display + Inter body. Copper/bone palette.
Author: J.A. Cosmehealth
Author URI: https://joandrew.com.sg
Version: 15.0.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: joandrew-child
*/
/* ===================================================================
   DESIGN TOKENS — Direction D "Beauty Atelier"
   Aesop-inspired palette: editorial, copper, bone, ink
   =================================================================== */
:root{
    --bone:         #F5F0E8;
    --bone-deep:    #E8DFD2;
    --paper:        #FAF7F2;
    --ink:          #1A0E1A;
    --ink-soft:     #3F3A33;
    --ink-mute:     rgba(26, 14, 26, 0.55);
    --copper:       #8B6F47;
    --copper-deep:  #5F4A2F;
    --copper-soft:  rgba(139, 111, 71, 0.12);
    --petal:        #F2E5DD;
    --rule:         rgba(26, 14, 26, 0.08);
    --rule-strong:  rgba(26, 14, 26, 0.18);
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --shadow-sm: 0 1px 3px rgba(26, 13, 18, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 13, 18, 0.08);
    --shadow-lg: 0 12px 32px rgba(26, 13, 18, 0.10);
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --container: 1440px;
    --container-narrow: 920px;
    --gutter: clamp(20px, 4vw, 40px);
    --section-y: clamp(80px, 12vw, 160px);
}
/* ===================================================================
   RESET / GLOBALS
   =================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bone);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--ink); text-decoration: none; transition: color 0.2s; }
a:hover{ color: var(--copper); }
h1, h2, h3, h4, h5, h6,
.ja-hero__title, .ja-section-head__title, .ja-ingredient__name, .ja-brand-tile__name, .ja-product-card__title, .ja-carousel__brand, .ja-footer__heading, .ja-footer__name, .ja-pdp__title, .ja-section__title, .ja-pad-section__title, .ja-cta-strip__title{
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 0.5em 0;
}
h1, .ja-hero__title{ font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.05; }
h2, .ja-section-head__title, .ja-pad-section__title, .ja-cta-strip__title{ font-size: clamp(2rem, 4vw, 3rem); }
h3, .ja-ingredient__name, .ja-brand-tile__name, .ja-pdp__title{ font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4, .ja-footer__heading{ font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
p{ margin: 0 0 1em 0; }
.ja-container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* ===================================================================
   TRUST STRIP (top of page, marquee)
   =================================================================== */
.ja-trust-strip--inline{
    background: var(--paper);
    color: var(--ink-soft);
    padding: 1.5rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}
.ja-trust-strip--inline span{ font-size: 0.875rem; letter-spacing: 0.04em; }
/* ===================================================================
   HEADER
   =================================================================== */
.ja-account-link{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink);
    padding: 0.5rem;
    border-radius: var(--radius-pill);
    transition: background 0.2s;
}
.ja-account-link:hover{ background: var(--copper-soft); color: var(--copper); }
/* ===== JA-MOBILE-NAV (2026-08-20): tablet/mobile nav replacement ===== */
.ja-mobile-nav{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: min(86vw, 360px);
    background: var(--bone, #FDFCF9);
    box-shadow: -8px 0 32px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ja-mobile-nav.is-open{ transform: translateX(0); }
.ja-mobile-nav__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rule, #E8E2D8);
}
.ja-mobile-nav__close{
    appearance: none;
    background: none;
    color: var(--ink, #1A1815);
    box-shadow: none;
    border: 0;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
}
.ja-mobile-nav__list{
    list-style: none;
    margin: 0;
    padding: 1rem 0;
}
.ja-mobile-nav__item + .ja-mobile-nav__item{ border-top: 1px solid var(--rule, #E8E2D8); }
.ja-mobile-nav__link{
    display: block;
    padding: 1rem 1.25rem;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.0625rem;
    color: var(--ink, #1A1815);
    text-decoration: none;
    transition: color 200ms ease, opacity 220ms ease, transform 220ms ease;
    opacity: 0.85;
}
.ja-mobile-nav__link:hover,
.ja-mobile-nav__link:focus-visible{
    color: var(--copper, #8B6F47);
    opacity: 1;
    transform: translateX(4px);
}
.ja-mobile-nav__backdrop{
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(26, 24, 21, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms ease, visibility 260ms;
}
.ja-mobile-nav__backdrop.is-visible{ opacity: 1; visibility: visible; }
@media (max-width: 920px){
    html{ scrollbar-gutter: stable; }
}
/* ===== END JA-MOBILE-NAV ===== */
/* ===================================================================
   HERO (Direction D editorial split)
   =================================================================== */
.ja-hero{
    padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 9vw, 120px);
    background: var(--bone);
    position: relative;
    overflow: hidden;
}
.ja-hero__inner{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.ja-hero__copy{ max-width: 620px; }
.ja-hero__eyebrow{
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--copper);
    margin-bottom: 1rem;
    display: block;
}
.ja-hero__title{
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 1.5rem 0;
    letter-spacing: -0.02em;
}
.ja-hero__title em{ font-style: italic; color: var(--copper); }
.ja-hero__subtitle{
    font-size: 1.125rem;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 2rem;
    overflow-wrap: break-word;
}
.ja-hero__ctas{ display: flex; gap: 1rem; flex-wrap: wrap; }
.ja-hero__visual{
    aspect-ratio: 4/5;
    background: var(--bone-deep);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
}
.ja-hero__visual::after{
    content: "In the shop";
    position: absolute;
    top: 1.5rem; left: 1.5rem;
    color: var(--bone);
    background: var(--ink);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    z-index: 1;
}
@media (max-width: 920px){
    .ja-hero__inner{ grid-template-columns: 1fr; gap: 3rem; }
    .ja-hero__visual{ aspect-ratio: 16/10; }
}
/* ===================================================================
   BUTTONS
   =================================================================== */
.ja-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
    color: var(--ink);
}
.ja-btn--primary{
    background: var(--ink);
    color: var(--bone);
}
.ja-btn--primary:hover{ background: var(--copper); color: var(--bone); }
.ja-btn--ghost{
    background: transparent;
    color: var(--ink);
    border: 0;
    padding: 0.875rem 0;
}
.ja-btn--ghost::after{ content: '→'; margin-left: 0.25rem; transition: transform 0.2s; }
.ja-btn--ghost:hover{ color: var(--copper); }
.ja-btn--ghost:hover::after{ transform: translateX(4px); }
/* ===================================================================
   SECTION HEADER
   =================================================================== */
.ja-section{ padding: var(--section-y) 0; }
.ja-section-head{ margin-bottom: 3rem; }
.ja-section-head--center{ text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.ja-section-head__eyebrow{
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--copper);
    margin-bottom: 1rem;
    display: block;
}
.ja-section-head__title{ margin: 0 0 1rem 0; }
.ja-section-head__lede{ font-size: 1.125rem; color: var(--ink-soft); max-width: 60ch; }
/* ===================================================================
   CAROUSEL (3 brand slides)
   =================================================================== */
.ja-carousel-section{ background: var(--bone); }
.ja-carousel{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.ja-carousel__slide{
    aspect-ratio: 4/5;
    background: var(--ink);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    padding: 2rem;
    display: flex;
    align-items: flex-end;
    color: var(--bone);
    transition: transform 0.3s;
}
.ja-carousel__slide:hover{ transform: translateY(-2px); }
.ja-carousel__slide--dabo{ background: linear-gradient(135deg, #2A1F2A 0%, #4A2F2F 100%); }
.ja-carousel__slide--tsuya-tsuya{ background: linear-gradient(135deg, #1F2A2A 0%, #2F4A3F 100%); }
.ja-carousel__slide--tsuya-ii{ background: linear-gradient(135deg, #2A2A1F 0%, #4A4A2F 100%); }
.ja-carousel__noise{ display: none; }
.ja-carousel__inner{ position: relative; z-index: 1; }
.ja-carousel__eyebrow{
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--copper);
    margin-bottom: 0.5rem;
    display: block;
}
.ja-carousel__brand{
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    margin: 0 0 1rem 0;
    color: var(--bone);
}
.ja-carousel__line{
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(245, 240, 232, 0.8);
    margin-bottom: 1.5rem;
    max-width: 280px;
}
.ja-carousel__cta{
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone);
    border-bottom: 1px solid var(--copper);
    padding-bottom: 0.25rem;
    display: inline-block;
}
.ja-carousel__cta:hover{ color: var(--copper); }
@media (max-width: 920px){
    .ja-carousel{ grid-template-columns: 1fr; }
}
/* ===================================================================
   STATS
   =================================================================== */
.ja-stats{
    background: var(--ink);
    color: var(--bone);
    padding: 4rem 0;
}
.ja-stats__inner{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}
.ja-stat{ display: flex; flex-direction: column; }
.ja-stat__num{
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--copper);
    margin-bottom: 0.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}
.ja-stat__label{
    font-size: 0.75rem;
    color: rgba(245, 240, 232, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
@media (max-width: 768px){
    .ja-stats__inner{ grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
/* ===================================================================
   BRANDS TILES (3 brands, 1-line each)
   =================================================================== */
.ja-brands{ background: var(--paper); }
.ja-brands__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.ja-brand-tile{
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s;
    text-decoration: none;
    color: var(--ink);
    display: block;
}
.ja-brand-tile:hover{
    border-color: var(--copper);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.ja-brand-tile__mark{
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 300;
    color: var(--copper);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}
.ja-brand-tile__name{
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.02em;
}
.ja-brand-tile__count{
    font-size: 0.75rem;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
@media (max-width: 920px){
    .ja-brands__grid{ grid-template-columns: 1fr; }
}
/* ===================================================================
   INGREDIENTS
   =================================================================== */
.ja-ingredients{ background: var(--bone); }
.ja-ingredients__list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.ja-ingredient{
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: all 0.2s;
}
.ja-ingredient:hover{
    border-color: var(--copper);
    box-shadow: var(--shadow-sm);
}
.ja-ingredient__name{ margin: 0 0 0.5rem 0; }
.ja-ingredient__role{
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--copper);
    margin-bottom: 0.75rem;
}
.ja-ingredient__note{
    font-size: 0.875rem;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 920px){
    .ja-ingredients__list{ grid-template-columns: 1fr; }
}
/* ===================================================================
   PRODUCTS
   =================================================================== */
.ja-products{ background: var(--bone); }
.ja-products__grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ja-products__grid li{ list-style: none; }
.ja-product-card{
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 1rem;
    position: relative;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--ink);
    display: block;
}
.ja-product-card:hover{
    border-color: var(--copper);
    box-shadow: var(--shadow-md);
}
.ja-product-card--featured{ /* same as base */ }
.ja-product-card__link{
    text-decoration: none;
    color: inherit;
    display: block;
}
.ja-product-card__visual{
    aspect-ratio: 1/1;
    background: var(--bone);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ja-product-card__img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s;
}
.ja-product-card:hover .ja-product-card__img{ transform: scale(1.05); }
.ja-product-card__body{ padding: 0; }
.ja-product-card__brand{
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 0.25rem;
}
.ja-product-card__title{
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.ja-product-card__price{
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--ink);
}
.ja-product-card__add{
    position: absolute;
    top: 0.5rem; right: 0.5rem;
    width: 32px; height: 32px;
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-decoration: none;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.2s, opacity 0.2s;
    z-index: 2;
}
.ja-product-card__add:hover{ background: var(--ink); color: var(--bone); border-color: var(--ink); }
.ja-product-card__add svg{ width: 16px; height: 16px; }
.ja-product-card__add-fb{ display: none; }
.ja-text-center{ text-align: center; }
.ja-mt-4{ margin-top: 2rem; }
@media (max-width: 1100px){ .ja-products__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){ .ja-products__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 920px){
    .ja-product-card__add{ top: 0.5rem; right: 0.5rem; }
}
/* ===================================================================
   FOOTER
   =================================================================== */
.ja-site-content{ background: var(--bone); }
.ja-footer{
    background: var(--ink);
    color: var(--bone);
    padding: 4rem 0 2rem;
    margin-top: 0;
}
.ja-footer__inner{
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(245, 240, 232, 0.1);
}
.ja-footer__brand{ }
.ja-footer__mark{
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--copper);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}
.ja-footer__name{
    font-family: var(--font-display);
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
.ja-footer__tag{
    font-size: 0.875rem;
    color: rgba(245, 240, 232, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
    max-width: 240px;
}
.ja-footer__badges{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ja-footer__badge{
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bone);
    background: rgba(245, 240, 232, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}
.ja-footer__badge--brand{ background: var(--copper); }
.ja-footer__col h3.ja-footer__heading{ color: var(--bone); margin: 0 0 1rem 0; }
.ja-footer__col ul{ list-style: none; padding: 0; margin: 0; }
.ja-footer__col li{ margin-bottom: 0.5rem; }
.ja-footer__col a{
    font-size: 0.875rem;
    color: rgba(245, 240, 232, 0.7);
    transition: color 0.2s;
}
.ja-footer__col a:hover{ color: var(--bone); }
.ja-footer__contact li{ margin-bottom: 0.5rem; }
.ja-footer__contact a{ display: flex; flex-direction: column; gap: 0.125rem; }
.ja-footer__contact-label{ font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--copper); }
.ja-footer__contact-value{ font-size: 0.875rem; }
.ja-footer__legal{ padding-top: 2rem; }
.ja-footer__legal-inner{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.ja-footer__copy{ font-size: 0.75rem; color: rgba(245, 240, 232, 0.5); }
.ja-footer__meta{ font-size: 0.75rem; color: rgba(245, 240, 232, 0.5); display: flex; gap: 0.5rem; align-items: center; }
.ja-footer__sep{ color: var(--copper); }
@media (max-width: 920px){
    .ja-footer__inner{ grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px){
    .ja-footer__inner{ grid-template-columns: 1fr; }
}
/* ===================================================================
   SITE-WIDE OVERRIDES (kill Astra contamination)
   =================================================================== */
body{ background: var(--bone) !important; color: var(--ink) !important; font-family: var(--font-body) !important; }
h1, h2, h3, h4, h5, h6,
.ja-hero__title, .ja-section-head__title, .ja-ingredient__name, .ja-brand-tile__name,
.ja-product-card__title, .ja-carousel__brand, .ja-footer__name, .ja-footer__mark,
.ja-pdp__title, .ja-section__title{
    font-family: var(--font-display) !important;
}
/* ===================================================================
   V5 ADDITIONS — Operator-Requested Refinements
   - Fix double arrow on .ja-btn--ghost (remove ::after)
   - Search bar: hide "Go" button visually, icon-only
   - Real-time search dropdown
   - Scroll-to-top: minimal, copper, no pink square
   - Soften blocky buttons with --ja-petal-soft
   =================================================================== */
/* Soft pink accent (operator: "softer pink") */
:root{
    --ja-petal-soft: #F5E1E8;       /* Very soft warm pink for backgrounds */
    --ja-petal-mid:  #E5B5C5;       /* Medium soft pink for accents */
    --ja-scrolltop:  #FAF7F2;       /* Scroll-top background */
}
/* === Fix double arrow on "See all 48 products →" === */
/* The HTML has → AND the CSS injected ::after →  (DOUBLE ARROW bug).
   Remove the ::after so only the HTML arrow shows. */
.ja-btn--ghost::after{ content: none; }
.ja-btn--ghost{ padding-right: 0.25rem; }
/* === Search bar: hide "Go" visually, make it look like an icon === */
/* Hide the "Go" text — make the submit button a subtle icon-only */
/* === Real-time search dropdown === */
.ja-search-dropdown{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(26, 13, 18, 0.10);
    max-height: 360px;
    overflow-y: auto;
    z-index: 99;
    display: none;
}
.ja-search-dropdown.is-open{ display: block; }
.ja-search-result{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    transition: background 0.15s;
}
.ja-search-result:last-child{ border-bottom: 0; }
.ja-search-result:hover{ background: var(--paper); }
.ja-search-result__thumb{
    width: 40px; height: 40px;
    background: var(--bone-deep);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.ja-search-result__thumb img{ width: 100%; height: 100%; object-fit: contain; }
.ja-search-result__info{ flex: 1; min-width: 0; }
.ja-search-result__name{
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 0.125rem 0;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ja-search-result__price{
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--copper);
}
.ja-search-result__brand{
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    margin-bottom: 0.125rem;
}
.ja-search-empty{
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--ink-mute);
    font-size: 0.875rem;
}
.ja-search-loader{
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--ink-mute);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
/* === Scroll-to-top: minimal, copper, no pink square === */
#ast-scroll-top{
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    text-align: center;
    cursor: pointer;
    z-index: 99;
    width: 38px;
    height: 38px;
    line-height: 38px;
    color: var(--ink);
    border-radius: 50%;
    background: var(--bone);
    border: 1px solid var(--rule);
    box-shadow: 0 2px 8px rgba(26, 13, 18, 0.06);
    transition: all 0.25s ease;
    outline: inherit;
    /* Override Astra's pink default */
    background-color: var(--bone) !important;
    font-size: 0 !important;
}
#ast-scroll-top:hover{
    background: var(--copper) !important;
    color: var(--bone) !important;
    border-color: var(--copper) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 111, 71, 0.2) !important;
}
#ast-scroll-top .ast-icon.icon-arrow svg{
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: currentColor;
    vertical-align: middle;
    transform: none;  /* No rotation - icon stays upright */
}
#ast-scroll-top.is-visible{ display: block !important; }
/* === Soften blocky primary buttons === */
.ja-btn--primary{
    background: var(--ink);
    color: var(--bone);
    border-radius: var(--radius-pill);
    box-shadow: 0 1px 3px rgba(26, 13, 18, 0.04);
    transition: all 0.2s;
}
.ja-btn--primary:hover{
    background: var(--copper);
    color: var(--bone);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 111, 71, 0.15);
}
/* === Add to cart button (product cards, PDP) === */
.ja-product-card__add{
    background: var(--bone);
    color: var(--ink);
    border: 1px solid var(--rule);
    transition: all 0.2s;
}
.ja-product-card__add:hover{
    background: var(--copper);
    color: var(--bone);
    border-color: var(--copper);
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce-page a.button, .woocommerce-page button.button{
    background: var(--ink) !important;
    color: var(--bone) !important;
    border-radius: var(--radius-pill) !important;
    padding: 0.875rem 1.75rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    transition: all 0.2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
    background: var(--copper) !important;
    color: var(--bone) !important;
    transform: translateY(-1px);
}
.woocommerce .quantity .qty{
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-pill) !important;
    background: var(--paper) !important;
}
/* === Shop / archive product cards (WooCommerce output) === */
.woocommerce ul.products li.product{
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    padding: 1rem !important;
    transition: all 0.2s;
}
.woocommerce ul.products li.product:hover{
    border-color: var(--copper) !important;
    box-shadow: 0 4px 12px rgba(26, 13, 18, 0.08) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-family: var(--font-display) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
}
.woocommerce ul.products li.product .price{
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
}
/* === Astra's pink accent (kill completely) === */
:root{ --ast-global-color-0: var(--copper) !important; }
/* ===================================================================
   V6 ADDITIONS — Operator-Requested Fixes (round 2)
   - Scroll-to-top arrow points DOWN (fix to UP)
   - Search dropdown: full-overlay modal-style
   - Carousel: explicit slide colors (override defaults)
   - Trust strip: rework to soft bone bar, not dark
   =================================================================== */
/* === 1. Scroll-to-top arrow direction fix === */
/* Astra's SVG path draws a chevron pointing DOWN (M57.5,38.193 l12.5,12.5).
   The OLD CSS rotated it 180deg to make it point UP.
   My V5 CSS had `transform: none` which left it pointing DOWN.
   Restore the 180deg rotation. */
#ast-scroll-top .ast-icon.icon-arrow svg{
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: currentColor;
    vertical-align: middle;
    transform: rotate(180deg) !important;
}
/* Smaller, more refined button */
#ast-scroll-top{
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    background-color: var(--bone) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(26, 13, 18, 0.04) !important;
    color: var(--ink) !important;
    font-size: 0 !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    transition: all 0.25s ease !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}
#ast-scroll-top:hover{
    background-color: var(--copper) !important;
    border-color: var(--copper) !important;
    color: var(--bone) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(139, 111, 71, 0.2) !important;
}
#ast-scroll-top.is-visible{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
/* === 2. Search dropdown: minimalistic overlay === */
/* Overlay over page content with backdrop blur */
.ja-search-dropdown{
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: min(680px, calc(100vw - 32px));
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(26, 13, 18, 0.18);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.ja-search-dropdown.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
/* Backdrop click-outside */
.ja-search-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(26, 14, 26, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}
.ja-search-backdrop.is-open{
    opacity: 1;
    visibility: visible;
}
/* === 3. Carousel: ensure slide colors apply === */
/* V5's gradient backgrounds should now actually render */
.ja-carousel__slide--dabo{
    background: linear-gradient(135deg, #2A1F2A 0%, #4A2F2F 100%) !important;
}
.ja-carousel__slide--tsuya-tsuya{
    background: linear-gradient(135deg, #1F2A2A 0%, #2F4A3F 100%) !important;
}
.ja-carousel__slide--tsuya-ii{
    background: linear-gradient(135deg, #2A2A1F 0%, #4A4A2F 100%) !important;
}
.ja-carousel__slide{
    aspect-ratio: 4/5 !important;
    color: var(--bone) !important;
    padding: 2rem !important;
    display: flex !important;
    align-items: flex-end !important;
    position: relative !important;
    overflow: hidden !important;
}
.ja-carousel__slide::after{
    /* Subtle noise texture overlay for editorial feel */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 60%);
    pointer-events: none;
}
.ja-carousel__inner{ position: relative; z-index: 1; }
.ja-carousel__eyebrow{
    color: var(--copper) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
}
.ja-carousel__brand{
    color: var(--bone) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 400 !important;
    margin: 0 0 1rem 0 !important;
}
.ja-carousel__line{
    color: rgba(245, 240, 232, 0.85) !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
    max-width: 280px !important;
}
.ja-carousel__cta{
    color: var(--bone) !important;
    border-bottom: 1px solid var(--copper) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    display: inline-block !important;
}
.ja-carousel__cta:hover{ color: var(--copper) !important; }
/* Make the carousel slides align horizontally */
.ja-carousel{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
}
@media (max-width: 920px){
    .ja-carousel{ grid-template-columns: 1fr !important; }
}
/* === 4. Trust strip: rework to soft bone bar === */
/* The black bar with "Free MY shipping..." is jarring.
   Replace with soft bone background, copper accent text. */
/* Make the rotating message nicer */
[data-ja-trust-rotate]{
    color: var(--ink-soft) !important;
    background: transparent !important;
}
/* === 5. Soft pink CTA accent (for buttons that need pink hints) === */
/* Operator asked for "softer pink" instead of harsh pink #FB5FAB */
:root{
    --ja-petal-soft: #F5E1E8;
    --ja-petal-mid: #E5B5C5;
    --ja-petal-deep: #C77A98;
}
/* ===================================================================
   V7 ADDITIONS — Minimalist Search Bar
   - Just a search icon by default (collapsed)
   - Expands to input on focus
   - Real-time search overlay still works
   - Transparent, no harsh borders
   =================================================================== */
/* === Search bar collapsed (default) === */
/* === The icon button itself === */
/* === Input: hidden until expanded === */
/* === Hide the "Go" submit text — but keep the submit functional === */
/* === Mobile: always expanded === */
/* === Dropdown: stays overlay-style (already V6) === */
.ja-search-dropdown{ z-index: 999; }
/* ===================================================================
   V8 ADDITIONS — Inline Search UX (no popup)
   - Search bar: icon-only, transparent, click-to-expand
   - NO dropdown overlay
   - Search results replace the products grid INLINE
   - Empty input → original grid restored
   =================================================================== */
/* === Search bar minimal (V8 refined) === */
/* === HIDE the dropdown completely (V6 leftover) === */
.ja-search-dropdown{ display: none !important; }
.ja-search-backdrop{ display: none !important; }
/* === Inline search results replace product grid === */
.ja-search-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 1100px){ .ja-search-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){ .ja-search-grid{ grid-template-columns: repeat(2, 1fr); } }
.ja-search-empty{
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ink-mute);
    font-size: 1rem;
}
.ja-search-empty strong{ color: var(--ink); display: block; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.ja-search-loader{
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ink-mute);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
/* === The "Searching for X" header when active === */
.ja-search-status{
    text-align: center;
    padding: 1rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--rule);
}
.ja-search-status__label{
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
}
.ja-search-status__query{
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--ink);
    margin-top: 0.5rem;
}
.ja-search-status__clear{
    display: inline-block;
    margin-top: 1rem;
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.2s;
}
.ja-search-status__clear:hover{
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
}
/* ===================================================================
   V9 ADDITIONS — Search bar extended by default + Direction E polish
   =================================================================== */
/* === Search bar: EXTENDED BY DEFAULT (no collapse) === */
/* Submit as a clean copper arrow button */
/* Inline search results grid (replaces products grid) */
.ja-search-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 1100px){ .ja-search-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){ .ja-search-grid{ grid-template-columns: repeat(2, 1fr); } }
.ja-search-empty{
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ink-mute);
    font-size: 1rem;
    background: var(--paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--rule);
}
.ja-search-empty strong{ color: var(--ink); display: block; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.ja-search-loader{
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ink-mute);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--rule);
}
.ja-search-status{
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--rule);
}
.ja-search-status__label{
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
}
.ja-search-status__query{
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--ink);
    margin-top: 0.5rem;
}
.ja-search-status__clear{
    display: inline-block;
    margin-top: 1rem;
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.2s;
}
.ja-search-status__clear:hover{
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
}
/* === DIRECTION E polish for other elements (everything except header) === */
/* Hero (eyebrow + giant Fraunces + double-button CTA) */
.ja-hero__copy{ max-width: 620px; }
.ja-hero__eyebrow{
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--copper) !important;
    margin-bottom: 1rem !important;
    display: block !important;
}
.ja-hero__title{
    font-size: clamp(2.5rem, 6vw, 5rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    color: var(--ink) !important;
    margin: 0 0 1.5rem 0 !important;
    letter-spacing: -0.02em !important;
}
.ja-hero__title em{ font-style: italic !important; color: var(--copper) !important; }
.ja-hero__subtitle{
    font-size: 1.125rem !important;
    color: var(--ink-soft) !important;
    line-height: 1.6 !important;
    max-width: 520px !important;
    margin-bottom: 2rem !important;
    overflow-wrap: break-word !important;
}
.ja-hero__ctas{
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}
/* Carousel (numbered pagination like Aesop, monograms like brand tiles) */
.ja-carousel__inner{ position: relative !important; z-index: 1 !important; }
.ja-carousel__eyebrow{
    color: var(--copper) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
}
.ja-carousel__brand{
    color: var(--bone) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 400 !important;
    margin: 0 0 1rem 0 !important;
}
.ja-carousel__line{
    color: rgba(245, 240, 232, 0.85) !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
    max-width: 280px !important;
}
.ja-carousel__cta{
    color: var(--bone) !important;
    border-bottom: 1px solid var(--copper) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    display: inline-block !important;
}
.ja-carousel__cta:hover{ color: var(--copper) !important; }
/* Stats — less blocky, more editorial */
.ja-stats{
    background: var(--ink) !important;
    color: var(--bone) !important;
    padding: 5rem 0 !important;
}
.ja-stats__inner{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3rem !important;
    text-align: center !important;
    max-width: var(--container) !important;
    margin: 0 auto !important;
    padding: 0 var(--gutter) !important;
}
.ja-stat__num{
    font-family: var(--font-display) !important;
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    color: var(--copper) !important;
    margin-bottom: 0.5rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}
.ja-stat__label{
    font-size: 0.75rem !important;
    color: rgba(245, 240, 232, 0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}
/* Section heads — Editorial Allbirds-style */
.ja-section-head__eyebrow{
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--copper) !important;
    margin-bottom: 1rem !important;
    display: block !important;
}
.ja-section-head__title{
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 400 !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 1rem 0 !important;
    line-height: 1.15 !important;
}
.ja-section-head__lede{
    font-size: 1.125rem !important;
    color: var(--ink-soft) !important;
    max-width: 60ch !important;
}
/* Brand cards (more polished) */
.ja-brand-card{
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-lg) !important;
    padding: 3rem 2rem !important;
    text-align: center !important;
    transition: all 0.3s !important;
    text-decoration: none !important;
    color: var(--ink) !important;
    display: block !important;
}
.ja-brand-card:hover{
    border-color: var(--copper) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}
.ja-brand-tile__mark{
    font-family: var(--font-display) !important;
    font-size: 3rem !important;
    font-weight: 300 !important;
    color: var(--copper) !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
}
.ja-brand-tile__name{
    font-family: var(--font-display) !important;
    font-size: 1.5rem !important;
    margin: 0 0 0.5rem 0 !important;
    letter-spacing: 0.02em !important;
}
.ja-brand-tile__count{
    font-size: 0.75rem !important;
    color: var(--ink-mute) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}
/* Ingredients — Cleaner */
.ja-ingredients__list{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
}
.ja-ingredient{
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-lg) !important;
    padding: 2rem !important;
    transition: all 0.2s !important;
}
.ja-ingredient:hover{
    border-color: var(--copper) !important;
    box-shadow: var(--shadow-sm) !important;
}
.ja-ingredient__role{
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--copper) !important;
    margin-bottom: 0.75rem !important;
}
/* Product cards — NEW badge, sale price support */
.ja-product-card{
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    padding: 1rem !important;
    position: relative !important;
    transition: all 0.2s !important;
}
.ja-product-card:hover{
    border-color: var(--copper) !important;
    box-shadow: var(--shadow-md) !important;
}
.ja-product-card__brand{
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--copper) !important;
    margin-bottom: 0.25rem !important;
}
.ja-product-card__title{
    font-family: var(--font-display) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin: 0 0 0.5rem 0 !important;
    color: var(--ink) !important;
}
.ja-product-card__price{
    font-family: var(--font-display) !important;
    font-size: 1.125rem !important;
    color: var(--ink) !important;
}
/* Footer — Brand statement, clean columns */
.ja-footer__tag{
    font-size: 0.875rem !important;
    color: rgba(245, 240, 232, 0.7) !important;
    line-height: 1.6 !important;
    max-width: 280px !important;
}
/* Trust strip — soft bone (already fixed in V6, keeping) */
[data-ja-trust-rotate]{ background: transparent !important; }
/* PDP — Editorial typography */
.ja-pdp__brand{
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--copper) !important;
    margin-bottom: 0.75rem !important;
}
.ja-pdp__title{
    font-family: var(--font-display) !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: var(--ink) !important;
}
.ja-pdp__price{
    font-family: var(--font-display) !important;
    font-size: 1.5rem !important;
    color: var(--ink) !important;
}
/* ===================================================================
   V10 ADDITIONS — Conceptual search + carousel rework
   =================================================================== */
/* === HIDE the old search bar in header (header.php unchanged) === */
/* === CONCEPTUAL SEARCH — inline in hero, borderless Aesop-style === */
.ja-conceptual-search{
    position: relative;
    margin: 2rem auto 0;
    max-width: 480px;
    width: 100%;
}
.ja-conceptual-search__inner{
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 0;
    transition: max-width 320ms ease, border-color 240ms ease;
    max-width: 240px;
    margin: 0 auto;
}
.ja-conceptual-search__inner:focus-within{
    max-width: 480px;
    border-bottom-color: var(--ink);
}
.ja-conceptual-search__icon{
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 0.75rem;
    color: var(--ink-mute);
    transition: color 200ms ease;
}
.ja-conceptual-search__inner:focus-within .ja-conceptual-search__icon{ color: var(--ink); }
.ja-conceptual-search__input{
    flex: 1;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    outline: none;
    width: 100%;
}
.ja-conceptual-search__input::placeholder{
    color: var(--ink-mute);
    font-style: italic;
}
.ja-conceptual-search__status{
    text-align: center;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}
.ja-conceptual-search__status-label{
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
}
.ja-conceptual-search__status-query{
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--ink);
    margin-top: 0.5rem;
}
.ja-conceptual-search__clear{
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.35rem 0.875rem;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 200ms ease;
}
.ja-conceptual-search__clear:hover{
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
}
.ja-conceptual-search__results{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: var(--container, 1440px);
    margin: 0 auto;
}
@media (max-width: 1100px){ .ja-conceptual-search__results{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){ .ja-conceptual-search__results{ grid-template-columns: repeat(2, 1fr); } }
.ja-conceptual-search__empty{
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--ink-mute);
    background: var(--paper);
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--rule);
}
.ja-conceptual-search__empty strong{ color: var(--ink); display: block; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
/* === CAROUSEL REWORK — better differentiation, monograms, editorial === */
.ja-carousel__slide{
    aspect-ratio: 4/5 !important;
    border-radius: var(--radius-xl, 16px) !important;
    padding: 2.5rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    overflow: hidden !important;
    color: var(--bone) !important;
}
.ja-carousel__slide::before{
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ja-noise, none);
    background-size: 200px 200px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}
.ja-carousel__slide--dabo{
    background: linear-gradient(135deg, #1A1414 0%, #3D2A1F 60%, #6B4D2F 100%) !important;
}
.ja-carousel__slide--tsuya-tsuya{
    background: linear-gradient(135deg, #1F1A1A 0%, #2F2520 60%, #5C4A3F 100%) !important;
}
.ja-carousel__slide--tsuya-ii{
    background: linear-gradient(135deg, #14131A 0%, #25232F 60%, #3F3D4F 100%) !important;
}
.ja-carousel__inner{ position: relative; z-index: 1; width: 100%; }
.ja-carousel__eyebrow{
    display: inline-block !important;
    margin-bottom: 0.5rem !important;
    padding: 0.25rem 0.625rem !important;
    border: 1px solid rgba(245, 240, 232, 0.3) !important;
    background: rgba(245, 240, 232, 0.05) !important;
    color: rgba(245, 240, 232, 0.85) !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}
.ja-carousel__brand{
    color: var(--bone) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(2.25rem, 4.5vw, 3.25rem) !important;
    font-weight: 400 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    margin: 0 0 0.875rem 0 !important;
}
.ja-carousel__line{
    color: rgba(245, 240, 232, 0.85) !important;
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 300 !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.25rem !important;
    max-width: 280px !important;
}
.ja-carousel__monogram{
    position: absolute !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    font-family: var(--font-display) !important;
    font-size: 3rem !important;
    font-weight: 300 !important;
    color: var(--copper) !important;
    opacity: 0.6 !important;
    line-height: 1 !important;
    letter-spacing: 0.1em !important;
}
.ja-carousel__cta{
    color: var(--bone) !important;
    border-bottom: 1px solid var(--copper) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    display: inline-block !important;
    align-self: flex-start !important;
}
.ja-carousel__cta:hover{ color: var(--copper) !important; }
/* === Hide the numbered pagination — replace with minimal dots === */
.ja-section-head--center{ text-align: center !important; }
/* ===================================================================
   V11 ADDITIONS — Carousel title fix + transparent search + Joandrew-Redesign
   =================================================================== */
/* === Fix carousel monogram overlap with title === */
/* Move monogram down (below title) AND reduce size so it doesn't clash with brand text */
.ja-carousel__monogram{
    position: absolute !important;
    bottom: 1.5rem !important;  /* was top: 1.5rem - moved to bottom */
    right: 1.5rem !important;
    font-family: var(--font-display) !important;
    font-size: 1.75rem !important;  /* was 3rem - reduced */
    font-weight: 300 !important;
    color: var(--copper) !important;
    opacity: 0.5 !important;
    line-height: 1 !important;
    letter-spacing: 0.1em !important;
}
.ja-carousel__brand{
    /* Add top spacing to clear where the monogram used to be */
    margin-top: 0.5rem !important;
}
/* === Search bar: fully transparent, no white background === */
.ja-conceptual-search{
    position: relative;
    margin: 3rem auto 0;
    max-width: 480px;
    width: 100%;
}
.ja-conceptual-search__inner{
    display: flex;
    align-items: center;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 0;
    transition: max-width 320ms ease, border-color 240ms ease;
    max-width: 240px;
    margin: 0 auto;
    box-shadow: none !important;
}
.ja-conceptual-search__inner:focus-within{
    max-width: 480px;
    border-bottom-color: var(--ink);
}
.ja-conceptual-search__icon{
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 0.75rem;
    color: var(--ink-mute);
    transition: color 200ms ease;
}
.ja-conceptual-search__inner:focus-within .ja-conceptual-search__icon{ color: var(--ink); }
.ja-conceptual-search__input{
    flex: 1;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--ink);
    outline: none;
    width: 100%;
    background-image: none !important;
    box-shadow: none !important;
}
.ja-conceptual-search__input::placeholder{
    color: var(--ink-mute);
    font-style: italic;
}
/* Remove ALL banner-like decorations from search */
.ja-conceptual-search__status{
    display: none !important;  /* No "searching for X" banner inside search */
}
/* === Joandrew-Redesign integration === */
/* Brand grid 2 columns (per prototype_v3) */
.ja-brand-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rule);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.ja-brand-cell{
    background: var(--bone);
    padding: 3.5rem 3rem;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.ja-brand-cell-bg{
    position: absolute;
    inset: 0;
    opacity: 0.7;
}
.ja-brand-cell-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ja-brand-cell-copy{
    position: relative;
    max-width: 360px;
}
.ja-brand-label{
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.625rem;
}
.ja-brand-name{
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.875rem;
}
.ja-brand-tagline{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.4rem;
}
.ja-brand-link{
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: color 200ms ease, border-color 200ms ease;
}
.ja-brand-link:hover{
    color: var(--copper);
    border-color: var(--copper);
}
/* Just in - DABO Aloe teaser */
.ja-just-in{
    padding: 5rem 3rem;
    background: var(--bone-deep);
}
.ja-just-in-grid{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.ja-just-in-image{
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
}
.ja-just-in-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ja-just-in-eyebrow{
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 1.25rem;
}
.ja-just-in-title{
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}
.ja-just-in-title em{ font-style: italic; }
.ja-just-in-body{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
}
.ja-just-in-link{
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
}
.ja-just-in-link:hover{
    color: var(--copper);
    border-color: var(--copper);
}
/* Topbar navbar styling (matches Joandrew-Redesign) */
.ja-navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;
    border-bottom: 1px solid var(--rule);
    gap: 2rem;
    background: transparent;
}
.ja-navbar__brand{
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    flex-shrink: 0;
}
.ja-navbar__nav{
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-shrink: 0;
}
.ja-navbar__nav a{
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    transition: color 200ms ease;
}
.ja-navbar__nav a:hover{ color: var(--ink); }
.ja-navbar__cart{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ja-navbar__cart-count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ink);
    color: var(--bone);
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9px;
}
/* ===================================================================
   V12 ADDITIONS — Final operator polish
   - Hide old header search bar
   - Search full-width by default (no expand on click)
   - Position search to overlap with navbar (right of nav, before account)
   - Carousel arrows: remove pink remnants, proper transparent style
   - Carousel dots: minimal, copper, no brown rectangles
   - Carousel backgrounds: cinematic darker with vignette gradient
   =================================================================== */
/* === HIDE old header search bar === */
/* === Conceptual search FULL width by default === */
.ja-conceptual-search{
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}
.ja-conceptual-search__inner{
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 0;
    transition: border-color 240ms ease;
    max-width: 100%;
    margin: 0;
}
.ja-conceptual-search__inner:focus-within{
    border-bottom-color: var(--ink);
}
.ja-conceptual-search__input::placeholder{
    color: var(--ink-mute);
    font-style: italic;
    font-size: 0.875rem;
}
/* Search in navbar position — using transform to lift above hero */
.ja-conceptual-search{
    position: relative;
    z-index: 5;
    max-width: 360px;
    margin: 1.5rem auto 0;
}
/* === Slick carousel arrows: remove pink, proper transparent style === */
.slick-prev, .slick-next{
    background: transparent !important;
    color: var(--ink) !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    width: 48px;
    height: 48px;
    z-index: 5;
    transition: opacity 200ms ease, transform 200ms ease;
}
.slick-prev:hover, .slick-next:hover{
    background: transparent !important;
    color: var(--copper) !important;
    background-color: transparent !important;
}
.slick-prev:focus, .slick-next:focus{
    background: transparent !important;
    color: var(--ink) !important;
}
.slick-prev::before, .slick-next::before{
    color: var(--ink) !important;
    opacity: 0.6;
    transition: opacity 200ms ease, color 200ms ease;
    background-color: transparent !important;
}
.slick-prev:hover::before, .slick-next:hover::before{
    color: var(--copper) !important;
    opacity: 1;
}
/* === Slick dots: minimal copper, no brown rectangles === */
.slick-dots{
    position: relative;
    bottom: 0;
    margin-top: 1.5rem;
    padding: 0;
}
.slick-dots li{
    width: 28px;
    height: 28px;
    margin: 0 4px;
    background: transparent;
}
.slick-dots li button{
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 200ms ease;
}
.slick-dots li button:before{
    content: '';
    width: 24px;
    height: 2px;
    background: var(--rule);
    border-radius: 0;
    opacity: 1;
    transition: background 200ms ease, transform 200ms ease;
}
.slick-dots li.slick-active button:before{
    background: var(--copper);
    transform: scaleX(1.5);
    transform-origin: center;
}
.slick-dots li button:hover:before{
    background: var(--copper-soft);
}
.slick-dots li.slick-active button:hover:before{
    background: var(--copper);
}
/* === Carousel slide cinematic darker backgrounds with vignette === */
.ja-carousel__slide--dabo{
    background:
        radial-gradient(ellipse at top, rgba(139, 111, 71, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #0A0808 0%, #1A1414 30%, #2A1F1A 60%, #3D2A1F 100%) !important;
}
.ja-carousel__slide--tsuya-tsuya{
    background:
        radial-gradient(ellipse at top, rgba(199, 122, 152, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #08080A 0%, #14110F 30%, #1F1A1A 60%, #2F2520 100%) !important;
}
.ja-carousel__slide--tsuya-ii{
    background:
        radial-gradient(ellipse at top, rgba(63, 61, 79, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, #08080C 0%, #14131A 30%, #1F1E2A 60%, #2F2D38 100%) !important;
}
.ja-carousel__slide::after{
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 0;
}
/* === Jetpack search override — kill any leftover pink === */
.widget.widget_search input[type="submit"],
.search-form input[type="submit"],
.search-submit{
    background: transparent !important;
    color: var(--ink) !important;
    border: none !important;
}
/* === Astra header background blur for that editorial feel === */
/* === Account link visual refinement (for right of nav) === */
.ja-account-link{
    color: var(--ink) !important;
}
.ja-account-link:hover{
    background: var(--copper-soft) !important;
    color: var(--copper) !important;
}
/* === Search input focus - no white flash === */
.ja-conceptual-search__input:focus{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
.ja-conceptual-search__input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 30px var(--bone) inset !important;
    -webkit-text-fill-color: var(--ink) !important;
}
/* ===================================================================
   V13 ADDITIONS — Final search/carousel rework
   =================================================================== */
/* === Conceptual search bar in NAVBAR (via header.php modification) === */
/* Old search bar classes are now from header.php — different markup */
/* Updated CSS supports both old class names AND new form-specific ones */
/* Hide the conceptual-search block that was added to front-page.php (now in header) */
.ja-front-page > .ja-conceptual-search{
    display: none !important;
}
/* Hide the old ja-search-bar that was in header.php — replaced with ja-search-form */
.search-form input[type="submit"],.search-submit,.woocommerce-product-search button[type="submit"]{
    display: none !important;
}
/* The actual inline search in header.php — sleek black border always, NO click-time changes */
/* === CAROUSEL REWORK: full architecture of arrows + dots === */
/* Place arrows BOTTOM-CENTER as horizontal pill nav (editorial style) */
.slick-prev, .slick-next{
    display: none !important;  /* Hide the original slick arrows */
}
/* Carousel container layout: title + arrows + dots as one editorial nav */
.ja-carousel__nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
}
/* Editorial "previous | 1 of 3 | next" navigation */
.ja-carousel__nav-arrows{
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--bone);
    overflow: hidden;
}
.ja-carousel__nav-btn{
    background: transparent !important;
    color: var(--ink-mute) !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}
.ja-carousel__nav-btn:hover{
    background: var(--copper-soft) !important;
    color: var(--copper) !important;
}
.ja-carousel__nav-btn:focus{
    outline: none !important;
    background: transparent !important;
    color: var(--ink) !important;
}
.ja-carousel__nav-btn.prev::before,
.ja-carousel__nav-btn.next::before{
    font-size: 0.875rem;
    line-height: 1;
}
.ja-carousel__nav-btn.prev::before{ content: '←'; }
.ja-carousel__nav-btn.next::before{ content: '→'; }
.ja-carousel__nav-counter{
    padding: 0 1rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    line-height: 1;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}
/* Pills — sleek thin lines, not rectangles */
.ja-carousel__pills{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ja-carousel__pill{
    width: 32px;
    height: 2px;
    background: var(--rule) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0;
    cursor: pointer;
    transition: background 200ms ease, width 200ms ease;
}
.ja-carousel__pill:hover{
    background: var(--copper-soft) !important;
}
.ja-carousel__pill.is-active{
    background: var(--ink) !important;
    width: 48px;
}
/* === Header layout - ensure search fits with account/cart === */
/* On smaller screens: collapse gracefully */
/* === Conceptual search status/results cleanup === */
/* Make sure no banner decorations in search */
.ja-conceptual-search__status,.ja-conceptual-search__header{
    display: none !important;
}
/* === Hero text balance === */
.ja-hero__body{
    overflow-wrap: break-word !important;
    word-break: normal !important;
}
/* ===================================================================
   V14 ADDITIONS — Fix carousel arrows + search border double-outline
   Research-driven fixes:
   - Slick arrows need display:none + visibility:hidden + width:0 to fully hide
   - Search input double-border fix: use box-shadow inset instead of border
   - Carousel: my custom editorial nav (1 of 3 + 3 pills) stays
   =================================================================== */
/* === Hide slick native arrows completely (not just display:none) === */
.slick-prev,
.slick-next{
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    z-index: -1 !important;
}
/* Hide any slick arrow icon/font/character artifacts */
.slick-prev::before,
.slick-next::before{
    content: '' !important;
    display: none !important;
}
/* Hide slick dots too — we use our custom editorial pills */
.slick-dots,
.slick-dots li,
.slick-dots li button{
    display: none !important;
    visibility: hidden !important;
}
/* Hide any slick "previous slide"/"next slide" a11y text containers */
.slick-prev.slick-disabled,
.slick-next.slick-disabled,
button.slick-arrow,
.slick-arrow{
    display: none !important;
    visibility: hidden !important;
}
/* === Search input: kill the focus double-border === */
/* The native input:focus-visible outline also adds an inner border — kill it */
/* WebKit specific autofill yellow bg */
/* === Carousel: ensure my custom editorial nav is prominent === */
/* The custom nav I built (ja-carousel__nav) should be visible and clean */
.ja-carousel__nav{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    margin-top: 2.5rem !important;
    padding: 1.5rem 0 !important;
    clear: both !important;
}
/* Force visible editorial nav arrows */
.ja-carousel__nav-arrows{
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--rule) !important;
    border-radius: 999px !important;
    background: var(--bone) !important;
    overflow: hidden !important;
    visibility: visible !important;
}
.ja-carousel__nav-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ink-mute) !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    visibility: visible !important;
}
.ja-carousel__nav-btn:hover{
    background: var(--copper-soft) !important;
    color: var(--copper) !important;
}
.ja-carousel__nav-counter{
    padding: 0 1rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    color: var(--ink-soft) !important;
    border-left: 1px solid var(--rule) !important;
    border-right: 1px solid var(--rule) !important;
    line-height: 1 !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
}
/* Pills styling */
.ja-carousel__pills{
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.ja-carousel__pill{
    width: 32px !important;
    height: 2px !important;
    background: var(--rule) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 200ms ease, width 200ms ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.ja-carousel__pill:hover{
    background: var(--copper-soft) !important;
}
.ja-carousel__pill.is-active{
    background: var(--ink) !important;
    width: 48px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
/* === Site-wide reset for unwanted focus rectangles === */
*:focus,
*:focus-visible{
    outline-color: var(--copper) !important;
}
/* But kill them for inputs where we provide custom border + box-shadow */
input:focus, textarea:focus, select:focus,
input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline-color: transparent !important;
}
/* Remove any pink remnants on hover */
.ja-carousel__nav-btn:hover{
    background: var(--copper-soft) !important;
    color: var(--copper) !important;
    /* No pink anywhere — the copper-soft is a warm transparent beige, not pink */
}
/* Make sure no element has the old --ja-pink color showing */
[style*="#FB5FAB"], [style*="fb5fab"], [style*="pink"]{
    color: var(--ink) !important;
    background: transparent !important;
}
/* === JOANDREW CAROUSEL FIX — surgical, 2026-08-06 ===
   Per operator: brown bar below carousel on left, pills unclickable,
   no proper arrow, want transparent left/right arrows in middle.
   Applied to: joandrew-child/style.css
   Reversible: delete this block to revert.
   ====================================================== */
/* 1) Force pills clickable. JS only wires .ja-carousel__dot, but HTML has
      .ja-carousel__pill[data-slide="N"]. Force pointer + clear visual state. */
.ja-carousel__pill,
.ja-carousel__pill[data-slide]{
    pointer-events: auto !important;
    cursor: pointer !important;
    /* visible affordance */
    background: rgba(26, 24, 21, 0.18) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 4px !important;
    width: 32px;
    height: 3px;
    transition: background 200ms ease, width 200ms ease;
}
.ja-carousel__pill:hover{
    background: rgba(26, 24, 21, 0.55) !important;
}
.ja-carousel__pill.is-active,
.ja-carousel__pill[aria-selected="true"]{
    background: var(--ink, #1A1815) !important;
    width: 48px;
}
/* 2) Position the existing .ja-carousel__nav-btn arrows IN THE MIDDLE
      of the carousel slides (per directive: "put a transparent arrow in middle").
      Transparent background, dark arrow shape, no border. */
.ja-carousel{
    position: relative !important;
}
.ja-carousel__nav-btn.prev,
.ja-carousel__nav-btn.next,
.ja-carousel__arrow.ja-carousel__arrow--prev,
.ja-carousel__arrow.ja-carousel__arrow--next{
    /* Middle-vertical positioning */
    position: absolute !important;
    top: 50% !important;
    z-index: 50 !important;
    /* Override inline-style block + carousel-store.php defaults:
       background transparent, no border, color ink (dark) */
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: var(--ink, #1A1815) !important;
    cursor: pointer !important;
    /* Hidden-bottom defaults override */
    width: 56px !important;
    height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Reset the inline <style> block that hides "button[aria-label=Previous slide]" */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(0, -50%) !important;
}
/* Position left arrow inside the first card */
.ja-carousel__nav-btn.prev,
.ja-carousel__arrow.ja-carousel__arrow--prev{
    left: 1.5rem !important;
}
/* Position right arrow inside the last card */
.ja-carousel__nav-btn.next,
.ja-carousel__arrow.ja-carousel__arrow--next{
    right: 1.5rem !important;
    left: auto !important;
}
/* Re-establish the counter layout since we moved the arrows */
.ja-carousel__nav-arrows{
    /* Hide the round "previous | 1 of 3 | next" pill below since we now have middle arrows */
    display: none !important;
}
/* 3) HIDE the inline <style> block rendered as visible text. The bug:
      carousel-store.php ends with <style>...</style> directly inside </section>.
      Some browsers render the comment + whitespace before <style> as text nodes.
      Fix by ensuring the section background is consistent. */
.ja-carousel-section{
    background: var(--bone, #F5F0E8) !important;
    overflow: hidden !important;
}
/* 4) The "brown bar" is most likely .ja-carousel__nav-counter's left/right border
      rendering as a faint tan line (--rule = rgba(26,24,21,0.08) is ok but in
      combination with the JS-injected arrows + nav-arrows wrapper's bottom-border,
      it can visually appear as a small horizontal segment on the left.
      Make sure no faint dividers remain. */
.ja-carousel__nav-counter{
    border-left: 0 !important;
    border-right: 0 !important;
}
/* 5) Hide the duplicate set of arrows the JS injects (.ja-carousel__arrows)
      since the static arrows are now repositioned to the middle and work.
      Avoids double-arrow confusion. */
.ja-carousel__arrows{
    display: none !important;
}
/* 6) Ensure the first slide (DABO) doesn't have leftover gradient noise on
      its ::before/::after that may bleed as a brown rectangle on the left. */
.ja-carousel__slide::before,
.ja-carousel__slide::after{
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.ja-carousel__noise{
    display: none !important; /* already set, reinforce */
}
/* Mobile: arrows remain centered but smaller */
@media (max-width: 768px){
    .ja-carousel__nav-btn.prev,
    .ja-carousel__nav-btn.next{
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: 40px !important;
        height: 40px !important;
    }
}
/* === CAROUSEL FIX v3 — 2026-08-06 — specificity override ===
   The V14 inline <style> block in carousel-store.php uses
   .ja-carousel-section button[aria-label="Previous slide"]
   (specificity 0,1,2). Our v2 override had 0,2,1 — LOWER, so the inline
   block won and the arrows stayed hidden. This v3 fix uses
   .ja-carousel-section .ja-carousel__nav-btn.prev (specificity 0,3,1)
   which definitively wins. The inline <style> block should also be
   removed from carousel-store.php since it's no longer needed (no slick
   plugin loads on this site).
   ================================================================ */
.ja-carousel-section .ja-carousel__nav-btn.prev,
.ja-carousel-section .ja-carousel__nav-btn.next,
.ja-carousel-section .ja-carousel__arrow.ja-carousel__arrow--prev,
.ja-carousel-section .ja-carousel__arrow.ja-carousel__arrow--next{
    position: absolute !important;
    top: 50% !important;
    left: auto !important;
    right: auto !important;
    z-index: 50 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: var(--ink, #1A1815) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    width: 56px !important;
    height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translate(0, -50%) !important;
}
.ja-carousel-section .ja-carousel__nav-btn.prev,
.ja-carousel-section .ja-carousel__arrow.ja-carousel__arrow--prev{
    left: 1.5rem !important;
}
.ja-carousel-section .ja-carousel__nav-btn.next,
.ja-carousel-section .ja-carousel__arrow.ja-carousel__arrow--next{
    right: 1.5rem !important;
}
.ja-carousel-section .ja-carousel__nav-btn.prev::before,
.ja-carousel-section .ja-carousel__nav-btn.next::before{
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: var(--ink, #1A1815) !important;
}
@media (max-width: 768px){
    .ja-carousel-section .ja-carousel__nav-btn.prev,
    .ja-carousel-section .ja-carousel__nav-btn.next{
        width: 44px !important;
        height: 44px !important;
    }
    .ja-carousel-section .ja-carousel__nav-btn.prev,
    .ja-carousel-section .ja-carousel__arrow.ja-carousel__arrow--prev{
        left: 0.75rem !important;
    }
    .ja-carousel-section .ja-carousel__nav-btn.next,
    .ja-carousel-section .ja-carousel__arrow.ja-carousel__arrow--next{
        right: 0.75rem !important;
    }
}
/* Hide the JS-injected arrow set so we only have one pair visible */
.ja-carousel-section .ja-carousel__arrows{
    display: none !important;
}
/* === PDP MAIN IMAGE FIX — gallery container opacity:0 stuck issue ===
   The default WooCommerce gallery has `style="opacity: 0"` inline so it
   fades in after images load. For above-fold images with priority="high",
   this is wasteful. Force opacity:1 always. */
.single-product .woocommerce-product-gallery{
    opacity: 1 !important;
}
.single-product .woocommerce-product-gallery__image img{
    opacity: 1 !important;
    visibility: visible !important;
}
.single-product .woocommerce-product-gallery__image{
    opacity: 1 !important;
}
/* If the gallery is genuinely still loading (slow 3G), the LCP optimization
   we want is NOT to hide the image — just to lazy-load below-the-fold thumbs. */
/* === ACTIVE IMAGE GALLERY (WC native horizontal layout, just polish) ===
   Per operator 2026-08-06: WooCommerce default is horizontal (main on top,
   thumbnails below in a row). Don't fight it - just style the gallery properly.
   The opacity:0 inline style is removed via the JS shim (see currency-fx.js).
*/
.single-product .woocommerce-product-gallery{
    /* Reset any conflicting grid from earlier CSS - let WC do its thing */
    display: block !important;
    grid-template-columns: 1fr !important;  /* Override any vertical grid */
    opacity: 1 !important;  /* Override WC's JS-set opacity:0 (cumulative fade-in issue) */
    transition: none !important;
}
.single-product .woocommerce-product-gallery__image{
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
}
.single-product .woocommerce-product-gallery__image img{
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 400ms ease;
}
.single-product .woocommerce-product-gallery__image:hover img{
    transform: scale(1.03);
    filter: brightness(0.92);
}
/* Thumbnail strip (when present) - keep WC's horizontal flex, add polish */
.single-product .flex-control-thumbs{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    list-style: none !important;
    margin: 0.75rem 0 0 !important;
    padding: 0 !important;
}
.single-product .flex-control-thumbs li{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
}
.single-product .flex-control-thumbs img{
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 200ms ease, border-color 200ms ease, transform 200ms ease;
}
@media (max-width: 600px){
    .single-product .flex-control-thumbs img{
        width: 60px !important;
        height: 60px !important;
    }
}
.single-product .flex-control-thumbs li:hover img{
    opacity: 0.85;
    transform: scale(1.04);
}
.single-product .flex-control-thumbs li.is-selected img,
.single-product .flex-control-thumbs li.active img{
    opacity: 1;
    border-color: var(--ink, #1A1815);
    box-shadow: 0 2px 8px rgba(26, 24, 21, 0.12);
}
/* === PROFILE BOTTOM NAV (account pages only) === */
.ja-profile-bottom-nav{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bone, #F5F0E8);
    border-top: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    box-shadow: 0 -4px 16px rgba(26, 24, 21, 0.04);
    padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
    gap: 0.25rem;
    animation: ja-mobile-bottom-nav-rise 500ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms backwards;
}
.ja-profile-bottom-nav__item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1;
    padding: 0.4rem 0.25rem;
    color: var(--ink-soft, #3F3A33);
    text-decoration: none;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: 8px;
    transition: color 200ms ease;
    position: relative;
}
.ja-profile-bottom-nav__item:hover,
.ja-profile-bottom-nav__item:focus-visible{
    color: var(--ink, #1A1815);
    outline: none;
}
.ja-profile-bottom-nav__item.is-active{
    color: var(--copper, #8B6F47);
}
.ja-profile-bottom-nav__item.is-active::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--copper, #8B6F47);
    border-radius: 0 0 2px 2px;
}
.ja-profile-bottom-nav__item svg{
    transition: transform 200ms ease;
}
.ja-profile-bottom-nav__item:hover svg,
.ja-profile-bottom-nav__item:active svg{
    transform: scale(1.08);
}
/* Add bottom padding to body on account pages so content isn't hidden behind fixed nav */
.woocommerce-account .ja-site-content,
body.woocommerce-account{
    padding-bottom: 64px;
}
/* Hide on desktop — mobile-first */
@media (min-width: 769px){
    .ja-profile-bottom-nav{
        display: none;
    }
    .woocommerce-account body{
        padding-bottom: 0;
    }
}
/* === CART DRAWER CHECKOUT CTA === */
.ja-cart-drawer__continue{
    display: block;
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem;
    color: var(--copper, #8B6F47);
    text-decoration: none;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 0.875rem;
    border: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    border-radius: 6px;
    transition: background 200ms ease;
}
.ja-cart-drawer__continue:hover{
    background: rgba(26, 24, 21, 0.04);
}
.ja-cart-drawer__checkout{
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
}
.ja-cart-drawer__checkout-btn{
    display: block;
    background: var(--ink, #1A1815);
    color: var(--bone, #F5F0E8);
    text-align: center;
    padding: 0.875rem 1rem;
    text-decoration: none;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background 200ms ease, transform 200ms ease;
}
.ja-cart-drawer__checkout-btn:hover{
    background: var(--copper, #8B6F47);
    color: var(--bone, #F5F0E8);
    transform: translateY(-1px);
}
.ja-cart-drawer__hint{
    display: block;
    text-align: center;
    margin-top: 0.5rem;
    color: var(--ink-soft, #3F3A33);
    font-size: 0.75rem;
    font-style: italic;
}
/* === PROFILE PAGE (template-profile.php) === */
/* Per operator 2026-08-06: hide MUCH more elements for the /profile/ page
   since 3rd-party sticky plugins (mystickymenu, header-footer-elementor) may
   inject floating nav elements outside the regular <header> tag. */
body.ja-profile-no-top-nav header,
body.ja-profile-no-top-nav .ja-site-header,
body.ja-profile-no-top-nav .site-header,
body.ja-profile-no-top-nav .ja-top-header,
body.ja-profile-no-top-nav 
body.ja-profile-no-top-nav .ja-site-content{
    margin-top: 0 !important;
    padding-top: 1rem !important;
}
.ja-profile-page{
    padding: 4rem 0 8rem;
    min-height: calc(100vh - 64px);
}
.ja-profile-page__head{
    text-align: center;
    margin-bottom: 2rem;
}
.ja-profile-page__title{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 2rem;
    font-weight: 400;
    margin: 0;
    color: var(--ink, #1A1815);
}
.ja-profile-page__lede{
    color: var(--ink-soft, #3F3A33);
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
}
/* Tab panels */
.ja-profile-tabs{
    max-width: 640px;
    margin: 0 auto;
}
.ja-profile-tab{
    padding: 1.5rem 0;
}
.ja-profile-tab__heading{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 1rem;
    color: var(--ink, #1A1815);
}
/* Sections inside tabs */
.ja-profile-section{
    margin-bottom: 2rem;
}
.ja-profile-section__heading{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
    color: var(--copper, #8B6F47);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ja-profile-section__body{
    font-size: 0.9375rem;
    color: var(--ink, #1A1815);
    margin: 0;
    line-height: 1.6;
}
.ja-profile-section__body a{
    color: var(--copper, #8B6F47);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.ja-profile-empty{
    color: var(--ink-soft, #3F3A33);
    font-style: italic;
    margin: 0;
}
/* Carousel for favourites/recent */
.ja-profile-section__carousel{
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ja-carousel-arrow{
    background: transparent;
    border: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: var(--ink-soft, #3F3A33);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}
.ja-carousel-arrow:hover{
    background: rgba(26, 24, 21, 0.04);
    color: var(--ink, #1A1815);
}
.ja-carousel-track{
    flex: 1;
    min-height: 60px;
    display: flex;
    align-items: center;
}
/* Email signup */
.ja-profile-email-signup{
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.ja-profile-email-signup input{
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9375rem;
    background: var(--bone, #F5F0E8);
    color: var(--ink, #1A1815);
}
.ja-profile-email-signup__btn{
    padding: 0.75rem 1.25rem;
    background: var(--ink, #1A1815);
    color: var(--bone, #F5F0E8);
    border: none;
    border-radius: 6px;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 200ms ease;
}
.ja-profile-email-signup__btn:hover{
    background: var(--copper, #8B6F47);
}
/* Sign-in button on Profile tab when not logged in */
.ja-profile-signin-btn{
    display: inline-block;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--ink, #1A1815);
    color: var(--bone, #F5F0E8);
    text-decoration: none;
    border-radius: 8px;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background 200ms ease;
}
.ja-profile-signin-btn:hover{
    background: var(--copper, #8B6F47);
}
/* Orders list */
.ja-profile-orders{
    list-style: none;
    padding: 0;
    margin: 0;
}
.ja-profile-orders__item{
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
}
.ja-profile-orders__item:last-child{
    border-bottom: none;
}
.ja-profile-orders__row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    align-items: center;
    font-size: 0.875rem;
}
.ja-profile-orders__id{ font-weight: 500; }
.ja-profile-orders__date{ color: var(--ink-soft, #3F3A33); }
.ja-profile-orders__status{ color: var(--copper, #8B6F47); }
.ja-profile-orders__total{ font-weight: 500; text-align: right; }
/* Account menu list */
.ja-profile-menu{
    list-style: none;
    padding: 0;
    margin: 0;
}
.ja-profile-menu li{
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
}
.ja-profile-menu li:last-child{
    border-bottom: none;
}
.ja-profile-menu a{
    color: var(--ink, #1A1815);
    text-decoration: none;
    font-size: 1rem;
    transition: color 200ms ease;
}
.ja-profile-menu a:hover{
    color: var(--copper, #8B6F47);
}
@media (max-width: 600px){
    .ja-profile-orders__row{
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
}
/* === HOVER FLYOUT NAVIGATION (Maude/Aesop pattern) ===
   Per operator 2026-08-06: hover on any nav item reveals nested flyout.
   Re-included 2026-08-06 turn-7 after accidentally deleted in 28KB block removal.
*/
.ja-flyout{
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 220px;
    background: var(--bone, #F5F0E8);
    border: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(26, 24, 21, 0.10);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
    z-index: 50;
}
.ja-nav__item--has-flyout:hover .ja-flyout,
.ja-nav__item--has-flyout.is-open .ja-flyout{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ja-flyout__list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.ja-flyout__link{
    display: block;
    padding: 0.5rem 0.875rem;
    color: var(--ink, #1A1815);
    text-decoration: none;
    font-size: 0.9375rem;
    border-radius: 6px;
    transition: background 150ms ease, color 150ms ease;
    cursor: pointer;
}
.ja-flyout__link:hover,
.ja-flyout__link:focus-visible{
    background: rgba(26, 24, 21, 0.04);
    color: var(--copper, #8B6F47);
    outline: none;
}
.ja-flyout__link--static{
    color: var(--ink-soft, #3F3A33);
    cursor: default;
}
.ja-flyout__link--static:hover{
    background: transparent;
    color: var(--ink-soft, #3F3A33);
}
.ja-flyout__heading{
    padding: 0.5rem 0.875rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--ink-soft, #3F3A33);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.ja-flyout__divider{
    height: 1px;
    margin: 0.25rem 0.5rem;
    background: var(--rule, rgba(26, 24, 21, 0.08));
}
/* Hide desktop nav on mobile, show mobile pattern */
/* Mobile: tap to toggle (no hover) */
@media (max-width: 768px){
    .ja-flyout{
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 0 1rem;
        margin: 0;
        min-width: auto;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: max-height 250ms ease, opacity 200ms ease, visibility 200ms ease;
    }
    .ja-nav__item--has-flyout.is-open .ja-flyout{
        max-height: 600px;
        opacity: 1;
        visibility: visible;
    }
}
/* === CURRENCY SWITCHER (re-added 2026-08-06 - was missing) === */
/* === SCROLL FADE-IN (IntersectionObserver) === (re-added 2026-08-06) */
.ja-fade-in{
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}
.ja-fade-in--visible{
    opacity: 1;
    transform: translateY(0);
}
.ja-fade-in:nth-child(2){ transition-delay: 60ms; }
.ja-fade-in:nth-child(3){ transition-delay: 120ms; }
.ja-fade-in:nth-child(4){ transition-delay: 180ms; }
.ja-fade-in:nth-child(5){ transition-delay: 240ms; }
.ja-fade-in:nth-child(6){ transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce){
    .ja-fade-in{ opacity: 1; transform: none; transition: none; }
    .ja-fade-in:nth-child(n){ transition-delay: 0ms; }
}
/* === PDP IMAGE RESPONSIVE OVERRIDE === (re-added 2026-08-06) */
/* joandrew's PDP has width="300" height="421" inline on the image.
   The image should fill its container, not be constrained to 300px.
   Also fix the gallery wrapper to use a max width. */
.single-product .woocommerce-product-gallery__wrapper{
    max-width: 100%;
    width: 100%;
    display: block;
}
.single-product .woocommerce-product-gallery__image{
    width: 100% !important;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background: var(--bone, #F5F0E8);
}
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image a img,
.single-product .wp-post-image{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
/* Don't let the .ja-fade-in auto-apply break the gallery image */
.single-product .woocommerce-product-gallery__image.ja-fade-in{
    opacity: 1 !important;
    transform: none !important;
}
/* === HERO-EDITORIAL SECTION — "above Twelve on rotation right now" === */
/* The hero has a 40/60 split with text on left, stats card on right.
   Make sure the card is visible and sized properly. */
.ja-hero{
    padding: 5rem 0 4rem;
    background: var(--paper, #FAF6F0);
}
.ja-hero__inner{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}
@media (max-width: 900px){
    .ja-hero__inner{ grid-template-columns: 1fr; }
}
.ja-hero__eyebrow{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--copper, #8B6F47);
    margin-bottom: 1rem;
}
.ja-hero__title{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    font-weight: 500;
    color: var(--ink, #1A1815);
    margin: 0 0 1.5rem;
}
.ja-hero__title em{
    font-style: italic;
    color: var(--copper, #8B6F47);
}
.ja-hero__lede{
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft, #3F3A33);
    margin: 0 0 1.5rem;
    max-width: 480px;
}
.ja-hero__actions{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.ja-hero__media{
    aspect-ratio: 4 / 5;
    background: var(--bone, #F5F0E8);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ja-hero__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ja-hero__card{
    background: var(--bone, #F5F0E8);
    border-radius: var(--radius-lg, 16px);
    padding: 1.5rem;
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* === CART DRAWER — extra styles (re-added 2026-08-06) === */
.ja-cart-drawer{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background: var(--bone, #F5F0E8);
    border-left: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    box-shadow: -8px 0 24px rgba(26, 24, 21, 0.08);
    transform: translateX(100%);
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ja-cart-drawer.is-open{
    transform: translateX(0);
}
.ja-cart-drawer__backdrop{
    position: fixed;
    inset: 0;
    background: rgba(26, 24, 21, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
    z-index: 199;
}
.ja-cart-drawer__backdrop.is-open{
    opacity: 1;
    pointer-events: all;
}
.ja-cart-drawer__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
}
.ja-cart-drawer__title{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ink, #1A1815);
    letter-spacing: 0.01em;
}
.ja-cart-drawer__close{
    background: transparent;
    border: none;
    color: var(--ink-soft, #3F3A33);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 200ms ease, color 200ms ease;
}
.ja-cart-drawer__close:hover{
    background: rgba(26, 24, 21, 0.06);
    color: var(--ink, #1A1815);
}
.ja-cart-drawer__cart{
    padding: 1.5rem;
    flex: 1;
}
.ja-cart-drawer__cart-title{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink-soft, #3F3A33);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.75rem;
}
.ja-cart-drawer__cart-empty{
    color: var(--ink-soft, #3F3A33);
    font-style: italic;
    text-align: center;
    padding: 2rem 0;
}
.ja-cart-drawer__cart-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ja-cart-drawer__cart-item{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(26, 24, 21, 0.02);
}
.ja-cart-drawer__cart-item img{
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}
.ja-cart-drawer__cart-item-name{
    font-size: 0.875rem;
    color: var(--ink, #1A1815);
    margin-bottom: 0.25rem;
}
.ja-cart-drawer__cart-item-qty{
    font-size: 0.75rem;
    color: var(--ink-soft, #3F3A33);
}
.ja-cart-drawer__cart-item-price{
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--ink, #1A1815);
    font-weight: 500;
}
.ja-cart-drawer__continue{
    display: block;
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem;
    color: var(--copper, #8B6F47);
    text-decoration: none;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 0.875rem;
    border: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    border-radius: 6px;
    transition: background 200ms ease;
}
.ja-cart-drawer__continue:hover{
    background: rgba(26, 24, 21, 0.04);
}
.ja-cart-drawer__checkout{
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
}
.ja-cart-drawer__checkout-btn{
    display: block;
    background: var(--ink, #1A1815);
    color: var(--bone, #F5F0E8);
    text-align: center;
    padding: 0.875rem 1rem;
    text-decoration: none;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background 200ms ease, transform 200ms ease;
}
.ja-cart-drawer__checkout-btn:hover{
    background: var(--copper, #8B6F47);
    color: var(--bone, #F5F0E8);
    transform: translateY(-1px);
}
.ja-cart-drawer__hint{
    display: block;
    text-align: center;
    margin-top: 0.5rem;
    color: var(--ink-soft, #3F3A33);
    font-size: 0.75rem;
    font-style: italic;
}
/* Inside-drawer bottom tabs (mobile users see them when drawer is open) */
.ja-cart-drawer .ja-mobile-bottom-nav{
    display: flex;
    position: static;
    background: transparent;
    border-top: 1px solid var(--rule, rgba(26, 24, 21, 0.08));
    border-bottom: none;
    box-shadow: none;
    padding: 1rem 1.5rem;
    margin-top: auto;
    animation: none;
    transform: none;
    justify-content: space-around;
    gap: 0.25rem;
    align-items: center;
}
.ja-cart-drawer .ja-mobile-bottom-nav__item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1;
    padding: 0.4rem 0.25rem;
    color: var(--ink-soft, #3F3A33);
    text-decoration: none;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: 8px;
    transition: color 200ms ease;
}
.ja-cart-drawer .ja-mobile-bottom-nav__item:hover,
.ja-cart-drawer .ja-mobile-bottom-nav__item.is-active{
    color: var(--copper, #8B6F47);
}
/* Don't show fixed bottom-nav on regular pages (only inside drawer / profile) */
.ja-mobile-bottom-nav{
    display: none;
}
/* Lock body scroll when drawer open */
body.ja-cart-drawer-open{
    overflow: hidden;
}
/* === PDP MAIN IMAGE VISIBILITY === */
.single-product .woocommerce-product-gallery{
    opacity: 1 !important;
    transition: none !important;
}
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__wrapper img{
    opacity: 1 !important;
    visibility: visible !important;
}
/* === HERO VISUAL: real product image + stat card (re-added 2026-08-06) === */
.ja-hero__visual{
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: var(--bone, #F5F0E8);
    box-shadow: 0 24px 60px rgba(26, 24, 21, 0.12);
}
.ja-hero__visual-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ja-hero__visual-card{
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    background: rgba(26, 24, 21, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: var(--bone, #F5F0E8);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ja-hero__visual-eyebrow{
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--copper, #8B6F47);
    font-weight: 600;
}
.ja-hero__visual-stat{
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--bone, #F5F0E8);
}
.ja-hero__visual-num{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--bone, #F5F0E8);
}
.ja-hero__visual-label{
    font-size: 0.75rem;
    color: rgba(245, 240, 232, 0.78);
}
.ja-hero__visual-label{
    color: var(--bone, #F5F0E8);
    background: transparent;
    border: none;
    font-size: 0.75rem;
    padding: 0;
    text-align: left;
    opacity: 0.7;
}
.ja-hero__copy{
    padding: 1rem 0;
}
/* === CURRENCY SWITCHER — bulletproof overrides (Astra has button styles that fight) === */
/* === BULLETPROOF CURRENCY SWITCHER === (re-added 2026-08-06 to override Astra defaults) */
/* === FEATURED PRODUCTS CAROUSEL (inside static-brand-row) === */
.ja-featured-carousel{
    position: relative;
    margin: 2.5rem 0 3rem;
}
.ja-featured-carousel__track{
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--copper) transparent;
}
.ja-featured-carousel__track::-webkit-scrollbar{
    height: 4px;
}
.ja-featured-carousel__track::-webkit-scrollbar-track{
    background: transparent;
}
.ja-featured-carousel__track::-webkit-scrollbar-thumb{
    background: var(--copper-soft);
    border-radius: 2px;
}
.ja-featured-carousel__item{
    flex: 0 0 calc((100% - 2rem) / 3);
    min-width: 200px;
    scroll-snap-align: start;
    background: var(--bone);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: transform 200ms ease, box-shadow 200ms ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
}
@media (max-width: 768px){
    .ja-featured-carousel__item{
        flex: 0 0 calc((100% - 1rem) / 2);
    }
}
.ja-featured-carousel__item:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26, 24, 21, 0.10);
}
.ja-featured-carousel__visual{
    aspect-ratio: 1 / 1;
    background: var(--paper);
    overflow: hidden;
}
.ja-featured-carousel__visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ja-featured-carousel__body{
    padding: 1rem 1.25rem 1.25rem;
}
.ja-featured-carousel__name{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 0.9375rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
    color: var(--ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ja-featured-carousel__price{
    font-size: 0.875rem;
    color: var(--copper);
    font-weight: 500;
    margin: 0;
}
.ja-featured-carousel__arrows{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    padding: 0 -0.5rem;
}
.ja-featured-carousel__arrow{
    pointer-events: auto;
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    box-shadow: 0 2px 8px rgba(26, 24, 21, 0.08);
}
.ja-featured-carousel__arrow:hover{
    background: var(--copper);
    color: var(--bone);
    border-color: var(--copper);
}
@media (max-width: 768px){
    .ja-featured-carousel__arrows{ display: none; }
}
/* ============================================================
   SCHEME B — Clean White + Pink (2026-08-08)
   ============================================================ */
:root{
    --ink: #1A1815;
    --ink-soft: #5C5750;
    --bone: #FFFFFF;
    --paper: #FAFAF8;
    --rule: rgba(26, 24, 21, 0.08);
    --accent: #3E7C6A;
    --accent-soft: #E8F0EA;
    --accent-deep: #2E5E4E;
    --copper: #8B6F47;
    --radius-pill: 999px;
    --radius-md: 8px;
    --radius-lg: 16px;
}
body{ background: var(--bone); color: var(--ink); }
.hero-section, .ja-hero{ background: var(--bone); }
/* EXPANDED DROPDOWN OVERLAY */
.ja-flyout{
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    min-width: 560px;
    padding: 1.25rem;
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(26, 24, 21, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 200;
}
.ja-nav__item--has-flyout:hover .ja-flyout,
.ja-nav__item--has-flyout:focus-within .ja-flyout,
.ja-nav__item--has-flyout.is-open .ja-flyout{
    opacity: 1; visibility: visible; transform: translateY(0);
}
.ja-flyout__list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1.5rem;
    list-style: none;
    margin: 0; padding: 0;
}
.ja-flyout__divider{ grid-column: 1 / -1; }
.ja-flyout__heading{ grid-column: 1 / -1; }
.ja-flyout__link{
    display: block;
    padding: 0.55rem 0.875rem;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.ja-flyout__link:hover,
.ja-flyout__link:focus-visible{
    background: var(--accent-soft);
    color: var(--accent-deep);
}
/* UNIFIED BUTTON SYSTEM — all CTAs are pills */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .checkout-button,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.ja-cart-drawer__checkout-btn,
.ja-btn--primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    padding: 0 2rem;
    border-radius: 999px !important;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #FFFFFF !important;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .checkout-button:hover,
.woocommerce .button.alt:hover,
.ja-cart-drawer__checkout-btn:hover,
.ja-btn--primary:hover{
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #FFFFFF !important;
    transform: translateY(-1px);
}
.woocommerce a.button.outline,
.ja-btn--secondary,
.ja-cart-drawer__continue{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 2rem;
    border-radius: 999px !important;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink) !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.ja-cart-drawer__continue:hover,
.ja-btn--secondary:hover{
    background: var(--ink);
    color: #FFFFFF !important;
}
.ja-cart-drawer__footer{
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--rule);
}
.ja-cart-drawer__checkout-btn{ width: 100%; }
/* CART DRAWER QTY STEPPERS */
.ja-cart-drawer__cart-item-qty{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.ja-qty-btn{
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--bone);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ja-qty-btn:hover{ border-color: var(--accent); color: var(--accent); }
.ja-qty-value{
    min-width: 1.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.9375rem;
}
/* PROFILE MENU — violettefr k-hub style */
.ja-profile-wrap{ position: relative; display: inline-block; }
.ja-profile-menu{
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 220px;
    padding: 0.5rem;
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(26, 24, 21, 0.12);
    z-index: 300;
}
.ja-profile-menu__item{
    display: block;
    padding: 0.6rem 0.875rem;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.ja-profile-menu__item:hover{ background: var(--accent-soft); color: var(--accent-deep); }
/* Cart no longer in navbar — hide old link (drawer is the only cart surface) */
/* cart link re-shown 2026-08-08 r2 */
/* ============================================================
   SHARED EXPANDED DROPDOWN (Susanne Kaufmann mega-menu style)
   2026-08-08 — one fixed dialog, content swaps per nav item
   ============================================================ */
/* Nav item underline on hover — SK `before:` pattern */
/* Mobile: mega menu becomes full-screen drawer */
/* ============================================================
   2026-08-08 r2 — icon-only account, cart icon, mega promo col
   ============================================================ */
/* Account as icon only (violettefr header__icon--account style) */
/* Cart icon in navbar (icon-only, pill count badge) */
/* wait — .ja-cart-link{display:none} was added earlier to hide it; undo that */
/* Mega menu promotional feature column */
/* Mega panel grid now 4 columns on shop (3 links + 1 feature); about/contact stay 1 wide col */
/* Header actions layout: icons in a row, gap */
/* ============================================================
   2026-08-08 r3 — brand carousel + mega menu inline-with-image
   ============================================================ */
/* --- Brand carousel --- */
.ja-brand-carousel{
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
}
.ja-brand-carousel__viewport{
    overflow: hidden;
}
.ja-brand-carousel__track{
    display: flex;
    width: 100%;
    transition: transform 0.4s ease;
}
.ja-brand-carousel__slide{
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 0.5rem;
}
.ja-brand-carousel__arrow{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--paper, #FAFAF8);
    border: 1px solid var(--rule);
    color: var(--ink, #1A1815);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.ja-brand-carousel__arrow:hover{
    background: var(--accent, #3E7C6A);
    color: #FFFFFF;
    border-color: var(--accent, #3E7C6A);
}
.ja-brand-carousel__arrow:focus-visible{
    outline: 2px solid var(--accent, #3E7C6A);
    outline-offset: 2px;
}
.ja-brand-carousel__dots{
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
    grid-column: 1 / -1;
}
.ja-brand-carousel__dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rule);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ja-brand-carousel__dot.is-active{
    background: var(--accent, #3E7C6A);
    transform: scale(1.2);
}
.ja-static-brand-card__link{
    text-decoration: none;
    color: inherit;
    display: block;
}
.ja-static-brand-card__visual{
    position: relative;
    aspect-ratio: 16 / 11;
    width: 100%;
    background: var(--paper, #FAFAF8);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ja-static-brand-card__visual img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.ja-static-brand-card__body{ padding: 0 0.25rem; }
/* --- Mega menu Shop panel: feature FIRST (hero), categories INLINE on desktop --- */
/* On narrow viewports, stack feature on top and categories below in 3 cols */
/* ============================================================
   2026-08-08 r4 — seamless mega menu hover + profile link
   ============================================================ */
/* --- The host container holds nav + mega-menu as one hover area --- */
/* --- Nav item underline (driven by .is-active class via JS) --- */
/* --- Mega menu open state --- */
/* --- Profile: violettefr-format bare icon link --- */
/* ============================================================
   2026-08-08 r5 — currency price hooks
   ============================================================ */
[data-ja-price]{ display: inline; }
/* ============================================================
   2026-08-08 r8 — wider mega menu, account drawer, profile adjustments
   ============================================================ */
/* Account hub drawer (violettefr k-hub style) */
.ja-account-drawer{
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
}
.ja-account-drawer.is-open{ pointer-events: auto; }
.ja-account-drawer__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(26, 24, 21, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ja-account-drawer.is-open .ja-account-drawer__backdrop{ opacity: 1; }
.ja-account-drawer__panel{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 360px;
    max-width: 90vw;
    background: var(--bone, #FFFFFF);
    box-shadow: -8px 0 32px rgba(26, 24, 21, 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.ja-account-drawer.is-open .ja-account-drawer__panel{ transform: translateX(0); }
.ja-account-drawer__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--rule);
}
.ja-account-drawer__title{
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink, #1A1815);
}
.ja-account-drawer__close{
    border: none;
    background: transparent;
    color: var(--ink, #1A1815);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    line-height: 0;
}
.ja-account-drawer__close:hover{ background: var(--paper, #FAFAF8); }
.ja-account-drawer__nav{
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}
.ja-account-drawer__link{
    display: block;
    padding: 0.875rem 1.5rem;
    color: var(--ink, #1A1815);
    text-decoration: none;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--rule);
    transition: background 0.15s ease, color 0.15s ease;
}
.ja-account-drawer__link:hover{
    background: var(--paper, #FAFAF8);
    color: var(--accent, #3E7C6A);
}
.ja-account-drawer__link--primary{
    background: var(--accent, #3E7C6A);
    color: #FFFFFF;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    margin: 0.75rem 1.5rem;
    border-radius: 999px;
    border-bottom: none;
}
.ja-account-drawer__link--primary:hover{
    background: var(--accent-deep, #2E5E4E);
    color: #FFFFFF;
}
body.ja-account-open{ overflow: hidden; }
/* Mega menu: nav text size matches sticky nav density */
/* Mega menu inner padding/grid: support wider showcase */
/* Keyboard nav underline */
/* Constrain mega-menu width so it doesn't bleed full-bleed */
/* ============================================================
   2026-08-08 r9 — navbar polish: no focus outlines, logo inline,
   even spacing
   ============================================================ */
/* Logo: no focus rectangle on click */
/* Custom logo image (WordPress) inside .ja-logo — no outline */
/* Search form: no border at all, no focus dot/rectangle */
/* Default focus ring on any clickable child element — kill it */
/* Even spacing for the header inner row */
/* Nav items: even spacing */
/* Logo: sit inline with nav items (same vertical alignment) */
/* ============================================================
   2026-08-08 r9 final — definitive no-border/no-focus overrides
   ============================================================ */
/* Search bar: no border, no outline, no shadow ring on focus */
/* Header inner: final grid — logo | nav | search | actions all in one row */
/* Nav items: even spacing */
/* Logo: inline with nav items, no outline */
/* Header a/button focus: no outline on click */
/* ============================================================
   2026-08-08 r10 FINAL — definitive overrides
   These override ALL previous rules, no matter the order.
   ============================================================ */
/* === LOGO: 22px tall, flush left, inline with nav === */
/* === SEARCH BAR: zero everything (no border, no bg, no shadow, no outline) === */
/* === HEADER layout: logo | nav | search | actions all in one row === */
/* === NAV items even spacing === */
/* === All anchor/button focus: no outline on click === */
/* ============================================================
   2026-08-08 r15 — AUTHORITATIVE STICKY NAVBAR (single source of truth)
   Replaces ALL prior .ja-header rules. One full-width sticky bar,
   one inner container, no nested boxes, no ::before layering hacks.
   Structure follows the operator reference sites:
   - full-width background (Violette_FR / Susanne Kaufmann)
   - boxed inner content aligned to --container (SK 12-col grid pattern)
   - visible hairline bottom border
   ============================================================ */
/* THE STICKY BAR — full width, always */
/* THE INNER CONTAINER — boxed, adaptive, one row */
/* Logo: left, inline with nav items */
/* Nav: sits directly right of logo */
/* Search: flexible middle */
/* Actions: right side */
/* Trust strip: full-width, distinct row */
/* Responsive: tighten at smaller widths */
/* ============================================================
   r16 — minimal fixes per operator:
   1) Search bar right-aligned
   2) Mega-menu panel spans the ENTIRE navbar width
      (remove center-boxing so the surface area = full nav bar)
   ============================================================ */
/* --- 1. Search right-aligned --- */
/* --- 2. Mega-menu panel: full navbar width --- */
/* ============================================================
   r17 — nav visibly distinct edge-to-edge (minimal)
   A barely-perceptible tint on the FULL-WIDTH header so the
   bar reads as its own surface across the entire viewport,
   instead of white-on-white (which reads as "only the center").
   ============================================================ */
/* ============================================================
   r18 — FIX: hidden panels must stay hidden.
   The shop panel rule (display:grid, data-panel-content selector)
   previously came AFTER the [hidden] rule with equal specificity,
   so the shop panel stayed visible when JS set hidden=true ->
   stacked content + scroll when hovering About/Contact.
   This rule wins by specificity + !important + position.
   ============================================================ */
/* Mega menu: full-bleed panel, no internal scroll constraint */
/* ============================================================
   r19 — mega-menu panel follows navbar color (not pure white)
   ============================================================ */
/* ============================================================
   r20 — "The shelf, not the showroom"
   Aesop × Maude × Susanne Kaufmann three-brands section
   ============================================================ */
/* --- Section shell --- */
.ja-three-brands{
    padding: clamp(64px, 8vw, 120px) 0;
    background: var(--bone, #FFFFFF);
}
/* --- Aesop-style left-aligned header --- */
.ja-three-brands__head{
    max-width: 620px;
    margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.ja-three-brands__eyebrow{
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute, rgba(26,24,21,0.55));
    margin-bottom: 0.75rem;
    transition: letter-spacing 0.7s ease-out;
}
.ja-three-brands__eyebrow.is-settled{ letter-spacing: 0.09em; }
.ja-three-brands__title{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--ink, #1A1815);
    margin: 0 0 0.9rem;
}
.ja-three-brands__intro{
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-soft, #5C5750);
    max-width: 52ch;
    margin: 0 0 1.25rem;
}
.ja-text-link{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink, #1A1815);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.ja-text-link span{ transition: transform 0.25s ease; }
.ja-text-link:hover{ color: var(--accent, #3E7C6A); border-bottom-color: currentColor; }
.ja-text-link:hover span{ transform: translateX(4px); }
/* --- Shelf rule --- */
.ja-three-brands__rule{
    height: 1px;
    background: var(--rule, rgba(26,24,21,0.08));
    transform: scaleX(0);
    transform-origin: 0 50%;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    transition: transform 0.8s ease-in-out 0.2s;
}
.ja-three-brands__rule.is-drawn{ transform: scaleX(1); }
/* --- SK-disciplined uniform grid --- */
.ja-three-brands__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
}
/* --- Card anatomy (identical for all three) --- */
.ja-brand-card{
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.ja-brand-card.is-inview{
    opacity: 1;
    transform: none;
}
.ja-brand-card__link{
    display: block;
    text-decoration: none;
    color: inherit;
}
.ja-brand-card__visual{
    aspect-ratio: 3 / 4;
    background: var(--paper, #FAFAF8);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-sizing: border-box;
}
.ja-brand-card__visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ja-brand-card:hover .ja-brand-card__visual img{ transform: scale(1.03); }
.ja-brand-card__name{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.35rem;
    color: var(--ink, #1A1815);
}
.ja-brand-card__tagline{
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink, #1A1815);
    margin: 0 0 0.3rem;
}
.ja-brand-card__descriptor{
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ink-mute, rgba(26,24,21,0.55));
    margin: 0 0 0.7rem;
}
.ja-brand-card__product{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink, #1A1815);
}
.ja-brand-card__product span{ transition: transform 0.25s ease; }
.ja-brand-card:hover .ja-brand-card__product{ color: var(--accent, #3E7C6A); }
.ja-brand-card:hover .ja-brand-card__product span{ transform: translateX(4px); }
/* underline settle on hover */
.ja-brand-card__body::after{
    content: '';
    display: block;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease-out;
}
.ja-brand-card:hover .ja-brand-card__body::after{ transform: scaleX(1); }
/* --- Mobile: scroll-snap carousel --- */
@media (max-width: 767px){
    .ja-three-brands__grid{
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    .ja-brand-card{
        flex: 0 0 82%;
        scroll-snap-align: start;
        min-width: 0;
    }
    .ja-three-brands__head{ margin-bottom: 1.75rem; }
}
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce){
    .ja-brand-card{ opacity: 1; transform: none; transition: none; }
    .ja-three-brands__rule{ transform: scaleX(1); transition: none; }
    .ja-three-brands__eyebrow{ letter-spacing: 0.09em; }
}
/* ============================================================
   v2 (2026-08-09) — brand carousel + ingredient panels
   ============================================================ */
/* ============ BRAND CAROUSEL (SK-style image+copy panels) ============ */
.ja-brands-carousel{ padding: clamp(56px, 7vw, 100px) 0; background: var(--bone, #FFFFFF); }
.ja-brands-carousel__viewport{ overflow: hidden; }
.ja-brands-carousel__track{ display: flex; transition: transform 0.45s ease; }
.ja-brands-slide{ flex: 0 0 100%; min-width: 100%; box-sizing: border-box; padding: 0 0.25rem; }
.ja-brands-slide__panel{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    background: var(--paper, #FAFAF8);
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(26,24,21,0.04);
}
.ja-brands-slide__visual{
    aspect-ratio: 1 / 1;
    background: #F1ECE4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    min-height: 380px;
}
.ja-brands-slide__visual img{
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ja-brands-slide:hover .ja-brands-slide__visual img{ transform: scale(1.03); }
.ja-brands-slide__body{ padding: clamp(1.5rem, 3vw, 2.5rem); }
.ja-brands-slide__name{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: var(--ink, #1A1815);
}
.ja-brands-slide__tagline{
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink, #1A1815);
    margin: 0 0 0.4rem;
}
.ja-brands-slide__descriptor{
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-soft, #5C5750);
    margin: 0 0 1.25rem;
    max-width: 44ch;
}
.ja-brands-slide__products{ list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ja-brands-slide__products .ja-text-link{ font-size: 0.875rem; }
.ja-brands-slide__cta{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    background: var(--ink, #1A1815);
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}
.ja-brands-slide__cta:hover{ background: var(--accent, #3E7C6A); }
.ja-brands-slide__cta span{ transition: transform 0.25s ease; }
.ja-brands-slide__cta:hover span{ transform: translateX(3px); }
.ja-brands-carousel__controls{ display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; }
.ja-brands-carousel__arrow{
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--paper, #FAFAF8);
    border: 1px solid var(--rule, rgba(26,24,21,0.08));
    color: var(--ink, #1A1815);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
    transition: background 0.2s ease, color 0.2s ease;
}
.ja-brands-carousel__arrow:hover{ background: var(--accent, #3E7C6A); color: #FFF; border-color: transparent; }
.ja-brands-carousel__dots{ display: flex; gap: 0.5rem; }
.ja-brands-carousel__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--rule); border: none; padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.ja-brands-carousel__dot.is-active{ background: var(--accent, #3E7C6A); transform: scale(1.25); }
/* ============ INGREDIENT PANELS ============ */
.ja-ingredients{ padding: clamp(56px, 7vw, 100px) 0; background: var(--paper, #FAFAF8); }
.ja-ingredients__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.ja-ingredient{
    background: #FFFFFF;
    border-radius: var(--radius-lg, 16px);
    padding: 1.5rem;
    border: 1px solid rgba(26,24,21,0.06);
    box-shadow: 0 1px 2px rgba(26,24,21,0.03);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
}
.ja-ingredient.is-inview{ opacity: 1; transform: none; }
.ja-ingredient:hover{ box-shadow: 0 8px 24px rgba(26,24,21,0.07); }
.ja-ingredient__visual{
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-soft, #E8F0EA), #FFFFFF);
    color: var(--accent, #3E7C6A);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    margin-bottom: 1rem;
}
.ja-ingredient__index{
    position: absolute;
    top: -4px; right: -4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ink, #1A1815);
    color: #FFF;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ja-ingredient__name{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0 0 0.2rem;
    color: var(--ink, #1A1815);
}
.ja-ingredient__role{
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent, #3E7C6A);
    margin-bottom: 0.5rem;
}
.ja-ingredient__note{
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-soft, #5C5750);
    margin: 0;
}
.ja-ingredients__foot{ text-align: center; margin-top: 2rem; }
/* ============ Responsive ============ */
@media (max-width: 900px){
    .ja-brands-slide__panel{ grid-template-columns: 1fr; }
    .ja-brands-slide__visual{ min-height: 260px; aspect-ratio: 4/3; }
    .ja-ingredients__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
    .ja-ingredients__grid{ grid-template-columns: 1fr; }
}
/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
    .ja-ingredient{ opacity: 1; transform: none; transition: none; }
    .ja-brands-carousel__track{ transition: none; }
}
/* ============================================================
   r21 — CLEANUP: visibility + arrows + section colors
   ============================================================ */
/* ---- 1. Ingredients: visible by DEFAULT (no JS gate) ----
   The reveal animation was gating opacity:0 on JS firing .is-inview.
   If the observer never fired, the section was blank. Now content is
   always visible; the stagger is a pure enhancement (transform only). */
.ja-ingredient{
    opacity: 1 !important;
    transform: none !important;
}
.ja-ingredient.is-inview{
    opacity: 1 !important;
    transform: none !important;
}
/* keep a gentle hover lift only */
.ja-ingredient:hover{
    box-shadow: 0 8px 24px rgba(26, 24, 21, 0.08) !important;
    transform: translateY(-2px) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
/* ---- 2. Carousel arrows: glyphs always render ----
   Ensure the svg inside the round button is visible, sized, centered. */
.ja-brands-carousel__arrow svg{
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex: 0 0 auto !important;
}
.ja-brands-carousel__arrow--prev svg,
.ja-brands-carousel__arrow--next svg{
    color: inherit !important;
}
/* ---- 3. Section color differentiation ----
   Scheme B (white + pink) rhythm. Each homepage section gets a
   distinct background so the eye can rest on one area at a time. */
.ja-hero{ background: #FFFFFF !important; }
.ja-brands-carousel{ background: #F7FAF7 !important; }   /* soft pink tint */
.ja-products,
.ja-product-grid{ background: #FFFFFF !important; }
.ja-ingredients{ background: #F3F7F4 !important; }       /* soft sage tint */
/* subtle separation hairlines between sections */
.ja-brands-carousel,
.ja-ingredients{
    border-top: 1px solid rgba(26, 24, 21, 0.05) !important;
    border-bottom: 1px solid rgba(26, 24, 21, 0.05) !important;
}
/* ============================================================
   r22 — FIX: mega-menu closes when moving down into nested values
   Root cause 1: .ja-mega-menu{pointer-events:none} (closed state)
   was not reliably overridden on .is-open, so the panel was
   invisible to the cursor -> hover fell through -> menu closed.
   Root cause 2: no hover bridge between nav row and panel.
   ============================================================ */
/* Hover bridge: an invisible extension that fills the tiny gap
   between the nav row bottom and the panel top, so the cursor
   never leaves the hover zone while moving down. */
/* ============================================================
   Week-1 PDP anatomy (2026-08-09)
   ============================================================ */
/* One-line benefit under title */
.ja-pdp-benefit{
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--ink-soft, #5C5750);
    margin: 0 0 0.5rem;
    max-width: 52ch;
}
/* Key actives strip */
.ja-pdp-actives{
    background: var(--paper, #FAFAF8);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}
.ja-pdp-actives__title{
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent, #3E7C6A);
    margin: 0 0 0.5rem;
}
.ja-pdp-actives__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
}
.ja-pdp-actives__list li{
    font-size: 0.875rem;
    color: var(--ink, #1A1815);
}
.ja-pdp-actives__list li::before{
    content: '✓';
    color: var(--accent, #3E7C6A);
    margin-right: 0.3rem;
}
/* Shipping / returns reassurance */
.ja-pdp-reassurance{
    margin: 1rem 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule, rgba(26,24,21,0.08));
}
.ja-pdp-reassurance__line{
    font-size: 0.8125rem;
    color: var(--ink-soft, #5C5750);
    margin: 0 0 0.25rem;
}
.ja-pdp-reassurance__line::before{
    content: '· ';
    color: var(--accent, #3E7C6A);
}
/* How to use */
.ja-pdp-howto{
    margin: 2.5rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule, rgba(26,24,21,0.08));
}
.ja-pdp-howto__title{
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink, #1A1815);
    margin: 0 0 0.75rem;
}
.ja-pdp-howto__steps{
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}
.ja-pdp-howto__steps li{
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink, #1A1815);
    margin-bottom: 0.4rem;
}
.ja-pdp-howto__note{
    font-size: 0.8125rem;
    color: var(--ink-mute, rgba(26,24,21,0.55));
    font-style: italic;
    margin: 0;
}
/* Sticky mobile add-to-cart bar */
.ja-pdp-sticky{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(26, 24, 21, 0.08);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}
.ja-pdp-sticky.is-visible{ transform: translateY(0); }
.ja-pdp-sticky__price{
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink, #1A1815);
}
.ja-pdp-sticky__btn{
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    background: var(--ink, #1A1815);
    color: #FFF;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.2s ease;
}
.ja-pdp-sticky__btn:hover{ background: var(--accent, #3E7C6A); }
@media (min-width: 768px){
    .ja-pdp-sticky{ display: none; }
}
/* ============================================================
   2026-08-09 — CLINICAL SAGE palette (option A)
   Token-level swap: white base, green-white paper, sage accent,
   near-black text. Keeps the clean white/pink layout structure,
   changes only the color tokens so the whole site re-tints.
   ============================================================ */
:root{
    /* base surfaces */
    --bone:         #FFFFFF !important;   /* pure clinical white */
    --bone-deep:    #F0F4F0 !important;   /* soft green-grey */
    --paper:        #F7FAF7 !important;   /* green-white paper */
    /* ink / text */
    --ink:          #1A1A1A !important;   /* near-black (LRP anchor) */
    --ink-soft:     #4A544F !important;   /* green-grey body */
    --ink-mute:     rgba(26, 26, 26, 0.55) !important;
    /* accent — clinical sage */
    --accent:       #8FAE8B !important;          /* sage primary */
    --accent-deep:  #3E7C6A !important;          /* deep sage for hover/CTAs */
    --accent-soft:  #EAF2E9 !important;          /* pale sage wash */
    --copper:       #8FAE8B !important;          /* alias accent (legacy rules use --copper) */
    --copper-deep:  #3E7C6A !important;
    --copper-soft:  rgba(143, 174, 139, 0.14) !important;
    /* rules / hairline */
    --rule:         rgba(26, 26, 26, 0.08) !important;
    --rule-strong:  rgba(26, 26, 26, 0.18) !important;
}
/* ============================================================
   Clinical Sage — section tint + nav link cohesion
   (overrides hardcoded pink/sage section tints and the dark
   nav-link hex so the whole page re-tints consistently)
   ============================================================ */
/* Section surfaces — all align to clinical white/green-white */
.ja-hero{ background: #FFFFFF !important; }
.ja-brands-carousel{ background: #F7FAF7 !important; }        /* green-white paper */
.ja-products,
.ja-product-grid{ background: #FFFFFF !important; }
.ja-ingredients{ background: #F7FAF7 !important; }
/* Nav links — sage-tinted ink instead of warm #2A2A2A */
/* Sage underline on hover (was pink) */
/* CTA / buttons — deep sage */
.ja-brands-slide__cta{ background: #1A1A1A !important; }
.ja-brands-slide__cta:hover{ background: #3E7C6A !important; }
/* Ingredient glyph circles — sage wash */
.ja-ingredient__visual{
    background: linear-gradient(135deg, #EAF2E9, #FFFFFF) !important;
    color: #3E7C6A !important;
}
.ja-ingredient__role{ color: #3E7C6A !important; }
/* Hero italic emphasis + eyebrow — deep sage */
.ja-hero__title em{ color: #3E7C6A !important; }
.ja-section-head__eyebrow{ color: #4A544F !important; }
/* ============================================================
   2026-08-09 — carousel embed bg fix + depth layer
   1) The carousel slide image panel was hardcoded warm beige
      #F1ECE4 (pre-sage) — retint to sage-washed paper.
   2) Add depth: soft shadows, layered surfaces, gradient washes
      so sections read as cards, not flat white slabs.
   ============================================================ */
/* ---- 1. Carousel embed background: sage-washed surface ---- */
.ja-brands-slide__visual{
    background: linear-gradient(145deg, #EFF5EF 0%, #F7FAF7 60%, #EAF2E9 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(62, 124, 106, 0.06) !important;
}
/* product image itself gets a soft drop to lift off the panel */
.ja-brands-slide__visual img{
    filter: drop-shadow(0 14px 24px rgba(26, 26, 26, 0.14)) !important;
}
/* ---- 2. Depth: shadows + surface hierarchy ----
   Sections as layered cards: white content floats on the
   green-white paper with a soft elevation shadow. */
.ja-section,
.ja-hero{
    position: relative;
}
/* soft elevation under the hero visual + brand carousel panel */
.ja-hero__visual{
    box-shadow: 0 24px 60px rgba(26, 26, 26, 0.10), 0 4px 16px rgba(26, 26, 26, 0.05) !important;
}
.ja-brands-slide__panel{
    box-shadow: 0 20px 50px rgba(26, 26, 26, 0.08), 0 2px 8px rgba(26, 26, 26, 0.04) !important;
    border: 1px solid rgba(62, 124, 106, 0.08) !important;
}
/* ingredient panels: card elevation on the sage band */
.ja-ingredient{
    box-shadow: 0 6px 20px rgba(26, 26, 26, 0.05), 0 1px 3px rgba(26, 26, 26, 0.03) !important;
    border: 1px solid rgba(62, 124, 106, 0.06) !important;
    background: #FFFFFF !important;
}
.ja-ingredient:hover{
    box-shadow: 0 16px 40px rgba(26, 26, 26, 0.10), 0 4px 12px rgba(26, 26, 26, 0.05) !important;
    transform: translateY(-3px) !important;
}
/* product cards: gentle lift + border definition */
.ja-product-card,
.ja-product-grid article,
.products .product{
    box-shadow: 0 2px 10px rgba(26, 26, 26, 0.04) !important;
    border: 1px solid rgba(26, 26, 26, 0.05) !important;
    border-radius: var(--radius-lg, 16px) !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.ja-product-card:hover,
.ja-product-grid article:hover,
.products .product:hover{
    box-shadow: 0 12px 32px rgba(26, 26, 26, 0.09) !important;
    transform: translateY(-2px) !important;
}
/* section header eyebrows get a subtle rule underline for hierarchy */
.ja-section-head__title::after{
    content: '';
    display: block;
    width: 44px;
    height: 2px;
    margin-top: 0.75rem;
    background: linear-gradient(90deg, #8FAE8B, transparent) !important;
}
/* buttons: elevation + hover lift (was flat) */
.ja-brands-slide__cta,
.ja-pdp-sticky__btn,
.woocommerce a.button,
.woocommerce button.button,
button.single_add_to_cart_button{
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.10) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
}
.ja-brands-slide__cta:hover,
.ja-pdp-sticky__btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
button.single_add_to_cart_button:hover{
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.16) !important;
    transform: translateY(-1px) !important;
}
/* nav: subtle sticky elevation when scrolled */
/* ============================================================
   2026-08-09 — PAGE-LEVEL BACKGROUND DEPTH
   Layered tonal bands + ambient sage glows behind products so
   the focus sits on the visuals, not on flat white slabs.
   ============================================================ */
/* ---- Body: subtle vertical tonal drift (white -> green-white -> white) ---- */
body{
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(143, 174, 139, 0.07), transparent 70%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FAF7 50%, #FFFFFF 100%) !important;
    background-attachment: fixed !important;
}
/* ---- Hero: ambient sage glow behind the product visual ----
   Pulls the product forward, gives the hero a soft lit backdrop. */
.ja-hero{
    background:
        radial-gradient(700px 420px at 78% 45%, rgba(143, 174, 139, 0.10), transparent 65%),
        radial-gradient(500px 300px at 20% 20%, rgba(234, 242, 233, 0.6), transparent 70%),
        #FFFFFF !important;
}
.ja-hero__visual{
    box-shadow: 0 30px 70px rgba(26, 26, 26, 0.12), 0 6px 20px rgba(26, 26, 26, 0.05) !important;
}
/* ---- Section bands: soft layered transitions, no hard hairlines ----
   Each section gets its own tonal band + a glow behind its content
   focal point. Sections read as layers, not slabs. */
.ja-brands-carousel{
    background:
        radial-gradient(800px 500px at 30% 40%, rgba(143, 174, 139, 0.08), transparent 65%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FAF7 12%, #F7FAF7 88%, #FFFFFF 100%) !important;
    border: none !important;
}
/* brand panel floats on the band */
.ja-brands-slide__panel{
    box-shadow: 0 24px 60px rgba(26, 26, 26, 0.10), 0 4px 14px rgba(26, 26, 26, 0.04) !important;
}
/* product grid band: white with a soft sage halo at the top edge */
.ja-products,
.ja-product-grid,
.woocommerce ul.products{
    background:
        radial-gradient(900px 400px at 50% 0%, rgba(143, 174, 139, 0.05), transparent 70%),
        #FFFFFF !important;
}
/* ingredient band: deeper sage wash, glows behind each panel */
.ja-ingredients{
    background:
        radial-gradient(1000px 500px at 50% 20%, rgba(143, 174, 139, 0.09), transparent 70%),
        linear-gradient(180deg, #FFFFFF 0%, #F0F5F0 20%, #F0F5F0 80%, #FFFFFF 100%) !important;
    border: none !important;
}
.ja-ingredient{
    box-shadow: 0 10px 28px rgba(26, 26, 26, 0.06), 0 2px 6px rgba(26, 26, 26, 0.03) !important;
}
/* ---- Trust strip: hairline-elevated off the page ---- */
/* ---- Ambient glow helper: product images lift off their cards ---- */
.ja-product-card img,
.ja-brand-card__visual img,
.products .product img{
    filter: drop-shadow(0 10px 18px rgba(26, 26, 26, 0.08)) !important;
}
/* ---- Section divider softness: replace hard hairlines with gradient fades ---- */
.ja-hero::after,
.ja-brands-carousel::after{
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(143, 174, 139, 0.15), transparent) !important;
}
/* ============================================================
   2026-08-09 — hero single-CTA + micro-trust line
   ============================================================ */
/* One primary CTA; trust line sits under it, small and quiet */
.ja-hero__ctas{ flex-direction: column; align-items: flex-start; gap: 0.75rem !important; }
.ja-hero__trust{
    font-size: 0.8125rem;
    color: var(--ink-mute, rgba(26,26,26,0.55));
    margin: 0;
    line-height: 1.5;
}
.ja-hero__trust .star{ color: #8FAE8B; }
/* 'How I pick' demoted to a text link below the CTA */
.ja-hero__how{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink, #1A1A1A);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.ja-hero__how:hover{ color: #3E7C6A; border-bottom-color: currentColor; }
.ja-hero__how span{ transition: transform 0.25s ease; }
.ja-hero__how:hover span{ transform: translateX(3px); }
/* primary CTA: sage elevation (was flat) */
.ja-btn--primary{
    background: #1A1A1A !important;
    box-shadow: 0 4px 14px rgba(26,26,26,0.12) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.ja-btn--primary:hover{
    background: #3E7C6A !important;
    box-shadow: 0 8px 24px rgba(26,26,26,0.18) !important;
    transform: translateY(-1px) !important;
}
/* ============================================================
   2026-08-09 — PRODUCT IMAGE CONSISTENCY + CAROUSEL SHADOW FIX
   1) All product images: uniform 1:1 surface, object-fit cover,
      no distortion/gaps regardless of source size.
   2) WooCommerce archive cards (shop/catalog/category) get the
      same uniform visual treatment.
   3) Carousel panel: shadow contained, no bleed beyond corners,
      closes the visible gap between section band and nested panel.
   ============================================================ */
/* ---- 1. Product card images: uniform, cover, no gaps ---- */
.ja-product-card__visual{
    aspect-ratio: 1 / 1 !important;
    background: #F7FAF7 !important;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ja-product-card__img,
.ja-product-card__visual img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}
/* ---- 2. WooCommerce archive cards (shop/catalog/category) ---- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
    background: #FFFFFF !important;
    border: 1px solid rgba(26, 26, 26, 0.05) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(26, 26, 26, 0.04) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover{
    box-shadow: 0 12px 32px rgba(26, 26, 26, 0.09) !important;
    transform: translateY(-2px) !important;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img{
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title{
    font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 0.75rem 0.9rem 0.2rem !important;
    color: var(--ink, #1A1A1A) !important;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price{
    padding: 0 0.9rem 0.9rem !important;
    color: #3E7C6A !important;
    font-weight: 600 !important;
}
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button{
    margin: 0 0.9rem 0.9rem !important;
    background: #1A1A1A !important;
    color: #FFF !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.6rem 1.1rem !important;
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.10) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover{
    background: #3E7C6A !important;
    box-shadow: 0 8px 22px rgba(26, 26, 26, 0.16) !important;
}
/* ---- 3. Carousel panel: contained shadow, closed gap ----
   The panel shadow bled at corners and a gap showed between the
   section band and the nested panel. Fix: contain with overflow,
   matching radius, and pull the panel flush to the band. */
.ja-brands-slide__panel{
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(26, 26, 26, 0.08), 0 2px 8px rgba(26, 26, 26, 0.04) !important;
}
.ja-brands-carousel__viewport{
    overflow: hidden !important;
    border-radius: 20px !important;
}
.ja-brands-slide{
    padding: 0 !important;
}
.ja-brands-carousel{
    padding-bottom: clamp(56px, 6vw, 90px) !important;
}
/* ensure the section band and panel share the same curve, no seam */
.ja-brands-slide__panel,
.ja-brands-slide__visual{
    border-radius: 20px 0 0 20px !important;
}
.ja-brands-slide__body{
    border-radius: 0 20px 20px 0 !important;
}
/* ============================================================
   2026-08-09 — CAROUSEL FLATTEN (remove double-nested panel)
   The slide IS the card now: visual + body are direct grid
   children. No inner panel box. Also hard-clips off-screen
   slides so only the active one is ever visible.
   ============================================================ */
.ja-brands-slide{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    background: #FFFFFF;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(26, 26, 26, 0.08), 0 2px 8px rgba(26, 26, 26, 0.04) !important;
    border: 1px solid rgba(62, 124, 106, 0.08) !important;
}
/* clip: only the active slide shows */
.ja-brands-carousel__viewport{
    overflow: hidden !important;
    border-radius: 20px !important;
}
.ja-brands-carousel__track{ display: flex; }
.ja-brands-slide{ flex: 0 0 100%; min-width: 100%; }
/* visual + body as direct children — corners match the slide */
.ja-brands-slide__visual{
    border-radius: 20px 0 0 20px !important;
    background: linear-gradient(145deg, #EFF5EF 0%, #F7FAF7 60%, #EAF2E9 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
}
.ja-brands-slide__body{
    border-radius: 0 20px 20px 0 !important;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* responsive: stack */
@media (max-width: 900px){
    .ja-brands-slide{ grid-template-columns: 1fr; }
    .ja-brands-slide__visual{ border-radius: 20px 20px 0 0 !important; min-height: 260px; }
    .ja-brands-slide__body{ border-radius: 0 0 20px 20px !important; }
}
/* ===== About compact layout (deployed 2026-08-11) ===== */
/* ==========================================================================
   About page — compact horizontal layout (rework 2026-08-11)
   Task joandrew::t_da4a48e5 — 3-column grid (visual | story | stats),
   magazine-style compactness, ~40% shorter above the fold.
   Scoped to .ja-about-compact* only — no interference with base styles.
   ========================================================================== */
.ja-about-compact__container{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
  padding-block: clamp(1.25rem, 3vw, 3rem);
}
.ja-about-compact__visual{ grid-column: 1; }
.ja-about-compact__story{ grid-column: 2; }
.ja-about-compact__stats{ grid-column: 3; }
.ja-about-compact__cta{ grid-column: 2; }
.ja-about-compact__cards{ grid-column: 1 / -1; }
/* ---- visual column ---- */
.ja-about-compact__visual{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ja-about-compact__eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted, #6f6b63);
}
.ja-about-compact__mark{
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ink, #1d1d1b);
  border: 1px solid currentColor;
  padding: clamp(0.75rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2rem);
  width: fit-content;
  margin: 0;
}
.ja-about-compact__visual-copy{
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 30ch;
  color: var(--muted, #6f6b63);
  margin: 0;
}
.ja-about-compact__brand-row{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0;
  margin: 0;
}
.ja-about-compact__brand-row li{
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* ---- story column ---- */
.ja-about-compact__intro h1{
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.ja-about-compact__intro > p{
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}
.ja-about-compact__section-list{
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  display: grid;
  gap: 1.25rem;
}
.ja-about-compact__section h2{
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}
.ja-about-compact__section p{
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 0.6rem;
}
/* ---- stats column ---- */
.ja-about-compact__stats{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--paper, #fffdf8);
  border: 1px solid var(--line, #e5dfd3);
}
.ja-about-compact__stats h2{
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted, #6f6b63);
  margin: 0 0 0.25rem;
}
.ja-about-compact__stats div{
  font-size: 1.05rem;
  line-height: 1.4;
}
.ja-about-compact__stats div strong{
  font-size: 1.35rem;
  display: block;
}
/* ---- cta ---- */
.ja-about-compact__cta{
  margin-top: 1.25rem;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--ink, #1d1d1b);
  color: var(--bone, #f6f1e7);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* ---- cards ---- */
.ja-about-compact__cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line, #e5dfd3);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.ja-about-compact__card{
  border: 1px solid var(--line, #e5dfd3);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--paper, #fffdf8);
}
.ja-about-compact__card h2{
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
}
.ja-about-compact__card p,
.ja-about-compact__card ul{
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
/* ---- responsive ---- */
@media (max-width: 980px){
  .ja-about-compact__container{ grid-template-columns: 1fr; }
  .ja-about-compact__visual,
  .ja-about-compact__story,
  .ja-about-compact__stats,
  .ja-about-compact__cta,
  .ja-about-compact__cards{ grid-column: 1; }
}
@media (max-width: 640px){
  .ja-about-compact__cards{ grid-template-columns: 1fr; }
}
/* ==========================================================================
   RESTORED COMPONENTS — 2026-08-12 rework
   Rebuilt from live-page DOM structure + the existing design language,
   replacing the rules lost in the 2026-08-11 style.css truncation.
   ========================================================================== */
/* --- ja-page wrapper --- */
.ja-page{ min-height: 100vh; display: flex; flex-direction: column; }
.ja-page__content{ flex: 1; width: 100%; }
/* --- ja-loader: full-screen preloader --- */
.ja-loader{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bone, #f6f1e7);
  transition: opacity .5s ease, visibility .5s ease;
}
.ja-loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.ja-loader__mark{
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: .12em;
  color: var(--ink, #1d1d1b);
  animation: ja-loader-pulse 1.2s ease-in-out infinite;
}
@keyframes ja-loader-pulse{ 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.ja-loader__inner{ text-align: center; }
/* --- ja-intro-overlay: intro veil with logo --- */
.ja-intro-overlay{
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink, #1d1d1b);
  color: var(--bone, #f6f1e7);
  transition: transform .7s cubic-bezier(.77,0,.18,1), opacity .7s ease;
}
.ja-intro-overlay.is-leaving{ transform: translateY(-100%); opacity: 0; }
.ja-intro-overlay__logo{
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: .2em; text-transform: uppercase;
}
/* --- ja-mega-panel: header mega menu --- */
/* --- ja-cart-drawer: side drawer --- */
.ja-cart-drawer{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9990;
  width: min(92vw, 420px);
  background: var(--paper, #fffdf8);
  box-shadow: -12px 0 32px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.77,0,.18,1);
  overflow-y: auto;
}
.ja-cart-drawer.is-open{ transform: none; }
.ja-cart-drawer__proceed{
  display: block; width: 100%; margin-top: 1rem;
  padding: .9rem 1.25rem; text-align: center;
  background: var(--ink, #1d1d1b); color: var(--bone, #f6f1e7);
  text-decoration: none; font-weight: 600; letter-spacing: .04em;
}
/* --- ja-mobile-bottom-nav --- */
.ja-mobile-bottom-nav{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9950;
  display: flex; justify-content: space-around; align-items: center;
  background: var(--paper, #fffdf8);
  border-top: 1px solid var(--line, #e5dfd3);
  padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
}
.ja-mobile-bottom-nav a{ display: flex; flex-direction: column; align-items: center; gap: .2rem; text-decoration: none; color: var(--muted, #6f6b63); font-size: .7rem; }
.ja-mobile-bottom-nav a.is-active{ color: var(--ink, #1d1d1b); }
.ja-mobile-bottom-nav__icon-wrap{ position: relative; font-size: 1.3rem; line-height: 1; }
.ja-mobile-bottom-nav__badge{
  position: absolute; top: -6px; right: -10px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--accent, #b3322c); color: #fff;
  font-size: .65rem; line-height: 18px; text-align: center;
}
.ja-mobile-bottom-nav__label{ letter-spacing: .02em; }
.ja-mobile-bottom-nav__item--cart .ja-mobile-bottom-nav__badge{ display: none; }
.ja-mobile-bottom-nav__item--cart.has-items .ja-mobile-bottom-nav__badge{ display: block; }
@media (min-width: 900px){ .ja-mobile-bottom-nav{ display: none; } }
/* --- ja-products grids --- */
.ja-products__grid--featured{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
/* --- ja-shop page --- */
.ja-shop__head{ padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.ja-shop__head h1{ font-size: clamp(1.8rem, 4vw, 2.75rem); margin: 0 0 .5rem; }
.ja-shop__lede{ color: var(--muted, #6f6b63); max-width: 60ch; font-size: 1rem; line-height: 1.6; }
.ja-shop__grid{ margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* --- ja-brand-filter --- */
.ja-brand-filter{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: 1rem 1.5rem; }
.ja-brand-filter__label{ font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted, #6f6b63); margin-right: .25rem; }
.ja-brand-filter__pills{ display: flex; flex-wrap: wrap; gap: .5rem; }
.ja-brand-filter__pill{
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--line, #e5dfd3); border-radius: 999px;
  padding: .4rem .9rem; font-size: .85rem; cursor: pointer;
  background: var(--paper, #fffdf8); color: var(--ink, #1d1d1b);
  transition: border-color .2s, background .2s;
}
.ja-brand-filter__pill:hover{ border-color: var(--ink, #1d1d1b); }
.ja-brand-filter__pill.is-active{ background: var(--ink, #1d1d1b); color: var(--bone, #f6f1e7); border-color: var(--ink, #1d1d1b); }
.ja-brand-filter__name{ font-weight: 500; }
.ja-brand-filter__count{ font-size: .72rem; opacity: .6; }
/* --- ja-product-card--shop --- */
.ja-product-card--shop{ transition: transform .25s ease, box-shadow .25s ease; }
.ja-product-card--shop:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
/* --- ja-ingredient reveal --- */
.ja-ingredient{ opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.ja-ingredient[data-reveal]{ transition-delay: calc(var(--reveal-order, 0) * 80ms); }
.ja-ingredient.is-visible{ opacity: 1; transform: none; }
.ja-ingredient__body{ font-size: .95rem; line-height: 1.6; color: var(--muted, #6f6b63); }
/* --- ja-about base (children already styled by the compact layout) --- */
.ja-about{ max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 1.25rem); }
/* --- delta: 3 remaining gap classes (2026-08-12 verify pass) --- */
.ja-about--compact, .ja-about-compact{ max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 1.25rem); }
.ja-search-page__pagination{ display: flex; justify-content: center; gap: .5rem; margin-block: 2rem; list-style: none; }
.ja-search-page__pagination .page-numbers{ display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; border: 1px solid var(--line, #e5dfd3); border-radius: 4px; padding: 0 .5rem; text-decoration: none; color: var(--ink, #1d1d1b); }
.ja-search-page__pagination .page-numbers.current{ background: var(--ink, #1d1d1b); color: var(--bone, #f6f1e7); border-color: var(--ink, #1d1d1b); }
/* JA-NAV-FIX (2026-08-15) — final-wins rules for the hover mega menu.
   The 742KB style.css has layered revisions with equal-specificity conflicts
   ([hidden] vs display:grid) and pointer-events:none on the closed menu that
   was not reliably overridden on .is-open. This block is appended LAST so it
   wins the cascade regardless of what earlier revisions did. */
/* JA-NAV-FIX-2 (2026-08-15) — positioning context for the shared mega menu.
   Root cause of "menu has nothing inside": .ja-mega-menu is position:absolute
   top:100% but its containing block was static (the initial containing block),
   so the open menu rendered ~one viewport below the header — invisible.
   This block pins the header as the containing block and forces the menu
   under it, full-width, above all content. Appended LAST so it wins. */
/* JA-THEME-FIX (2026-08-15) — pink -> sage palette + brand slide backgrounds.
   The design tokens still pointed at the old pink (#F15BB5) after the sage/copper
   swap; every var(--accent) consumer (arrows, dots, profile/cart links, mega links,
   badges) rendered pink. Also extends the DABO cinematic background treatment to
   the other brand slides and adds a subtle sitewide brand wash. Appended LAST. */
/* 1) Palette tokens -> sage (keep copper for accents) */
:root{
    --accent: #3E7C6A !important;
    --accent-soft: #E8F0EA !important;
    --accent-deep: #2E5E4E !important;
    --copper: #8B6F47 !important;
}
/* 2) Hardcoded pink fallbacks / hover rules -> sage */
.ja-brand-carousel__arrow:hover,
.ja-brand-carousel__arrow:focus-visible{
    background: #3E7C6A !important;
    color: #FFFFFF !important;
    border-color: #3E7C6A !important;
}
.ja-brand-carousel__dot.is-active{
    background: #3E7C6A !important;
}
/* 3) Brand slide backgrounds — extend the DABO cinematic treatment */
.ja-carousel__slide--tsuya-tsuya{
    background: radial-gradient(ellipse at top, rgba(139, 111, 71, 0.18) 0%, transparent 60%),
                linear-gradient(180deg, #1A1A14 0%, #2E2A20 60%, #4A4232 100%) !important;
}
.ja-carousel__slide--tsuya-ii{
    background: radial-gradient(ellipse at top, rgba(62, 124, 106, 0.18) 0%, transparent 60%),
                linear-gradient(180deg, #10181A 0%, #1C2B26 60%, #2E4A3E 100%) !important;
}
/* 4) Subtle sitewide brand wash (background placeholder branding) */
body{
    background: linear-gradient(180deg, #FAF8F3 0%, #F3EFE6 100%) !important;
}
.ja-page,
.ja-front-page{
    background: transparent !important;
}
/* JA-GALLERY-FIX (2026-08-15) — uniform PDP gallery alignment.
   Images with mixed aspect ratios stretched inside the 3:4 box because
   object-fit was not enforced. This block pins cover-fit + centering on the
   gallery and thumbnails so every image renders aligned. Appended LAST. */
.single-product .woocommerce-product-gallery__image{
    aspect-ratio: 3 / 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image a img,
.single-product .wp-post-image{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
.single-product .flex-control-thumbs img{
    object-fit: cover !important;
}
.single-product .woocommerce-product-gallery__wrapper{
    display: flex !important;
    justify-content: center !important;
}
/* ============================================================
   JA-NAV-FIX-3 (2026-08-15) — the open mega menu was invisible.
   Root cause: ja-menu.js toggles .ja-mega-panel--visible, but no
   rule existed for that class, and an old base rule (.ja-mega-panel {
   position:absolute; top:100%; opacity:0; visibility:hidden }) still
   applied inside the shared menu. Panels inside the OPEN menu must
   render in-flow. Inactive panels stay hidden via [hidden].
   ============================================================ */
/* ============================================================
   JA-PINK-KILL-2 (2026-08-15) — JA-THEME-FIX used a typo'd class
   (.ja-brand-carousel__arrow — missing the "s"), so the real
   .ja-brands-carousel__arrow hover/dot rules kept rendering the pink
   #F15BB5 fallback. Corrected selectors, appended last.
   ============================================================ */
.ja-brands-carousel__arrow:hover,
.ja-brands-carousel__arrow:focus-visible,
.ja-brands-carousel__arrow--prev:hover,
.ja-brands-carousel__arrow--next:hover{
    background: #3E7C6A !important;
    color: #FFFFFF !important;
    border-color: #3E7C6A !important;
}
.ja-brands-carousel__dot.is-active{ background: #3E7C6A !important; transform: scale(1.25) !important; }
.ja-brands-slide__cta:hover{ background: #3E7C6A !important; color: #FFFFFF !important; }
.ja-pdp-sticky__btn:hover{ background: #3E7C6A !important; }
.ja-ingredient__visual{ color: #3E7C6A !important; }
.ja-ingredient__visual i, .ja-ingredient__visual svg{ color: #3E7C6A !important; }
.ja-account-drawer__link--primary{ background: #3E7C6A !important; color: #FFFFFF !important; }
.ja-text-link:hover{ color: #3E7C6A !important; border-bottom-color: currentColor !important; }
.ja-brand-card:hover .ja-brand-card__product{ color: #3E7C6A !important; }
.ja-brands-slide__name a:hover{ color: #3E7C6A !important; }
/* ============================================================
   JA-GALLERY-FIX-2 (2026-08-15) — wrapper flex broke flexslider.
   JA-GALLERY-FIX forced display:flex; justify-content:center on
   .woocommerce-product-gallery__wrapper, which laid ALL slides out
   in a row (4-up main image) and broke the track -> clicking a slide
   went blank. Restore block layout so flexslider positions slides;
   keep cover-fit on the main slide; give the thumbnail strip even
   fixed-size spacing.
   ============================================================ */
.single-product .woocommerce-product-gallery__wrapper{
    display: block !important;
    justify-content: initial !important;
}
.single-product .woocommerce-product-gallery__image{
    aspect-ratio: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
}
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image a img{
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 600px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}
.single-product .flex-control-thumbs{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
    justify-content: flex-start !important;
}
.single-product .flex-control-thumbs li{
    width: 64px !important;
    flex: 0 0 64px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.single-product .flex-control-thumbs li img{
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
}
/* ============================================================
   JA-LOADER-FIX (2026-08-15) — the JA monogram pulsed forever
   (1.2s infinite opacity animation) while JS added .ja-loader--out
   which had NO rule, so the "blink" was visible until node removal.
   Kill the infinite pulse; make .ja-loader--out actually fade once.
   ============================================================ */
.ja-loader__mark{
    animation: none !important;
}
.ja-loader--out{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .4s ease !important;
}
/* ============================================================
   JA-FIX-4 (2026-08-15) — remaining pink + menu body regression.
   1) .ja-brands-carousel section still had a hardcoded pink tint
      (#FDF0F7) -> paper-green.
   2) Astra's a:focus { color: var(--ast-global-color-1) } = #EA559D
      pink — clicking Shop focused the link and turned it pink.
      Only ast-global-color-0 was remapped; remap the rest.
   3) JA-PINK-KILL-2 covered :hover/:focus-visible but not :active
      or plain :focus — click states still went pink.
   4) JA-NAV-FIX-3 made panels static but left the old base rule's
      background/border-top/box-shadow on the panel, creating a
      card-in-card. The menu bar (.ja-mega-menu, #FDFDFC) is the
      original menu body; panels must be transparent inside it.
   ============================================================ */
/* 1+2) Astra pink palette -> sage/copper (defensive, covers a:focus) */
:root{
    --ast-global-color-1: #3E7C6A !important;
    --ast-global-color-4: #F7FAF7 !important;
    --ast-global-color-6: #EDF3EE !important;
}
/* 3) Click states: :active and :focus (not just :focus-visible) */
.ja-brands-carousel__arrow:active,
.ja-brands-carousel__arrow:focus,
.ja-brands-carousel__arrow--prev:active,
.ja-brands-carousel__arrow--next:active{
    background: #3E7C6A !important;
    color: #FFFFFF !important;
    border-color: #3E7C6A !important;
}
/* 4) Menu body: panels transparent inside the bar */
/* ============================================================
   JA-NAV-FIX-5 (2026-08-15) — full-bleed menu + uniform panels.
   1) The menu was absolute inside .ja-header__inner (boxed to
      max-width:1440px, position:relative) so it never reached the
      viewport edges. Escape the box: left:50% + margin-left:-50vw
      + width:100vw centers the bar on the viewport (inner is
      margin:0 auto, so its center == viewport center). No
      transform conflict with the open/close translateY.
   2) Shop panel grid was 1.2fr 1fr 1fr 1fr (feature image column
      made it wider) while about/contact were repeat(3,1fr) with a
      single col -> inconsistent bar widths. Unify: every panel is
      a 4-track grid; about/contact single col spans all tracks so
      all three bars render the same width edge-to-edge.
   ============================================================ */
/* 1) Full-bleed menu bar */
/* 2) Uniform panel grid */
/* ============================================================
   JA-NAVGAL (2026-08-16) — nav smoothness + PDP gallery overhaul.
   1) NAV: the .is-open final-wins blocks carried NO transition, so the
      mega menu snapped open. Transition on BOTH states, 0.23s ease-out.
   2) GALLERY TRACK: flexslider sets track inline width:400% with slides
      side-by-side, but TWO caps fought it: the slide cap
      (max-width:600px !important from JA-GALLERY-FIX) AND the theme base
      track cap (max-width:100% at ~445837). Both made slides wrap/offset.
      Neutralize both — track must be allowed its full N*100% width.
   3) FRAME: the operator asked for a visible border around the main image
      area. Put the frame on the VIEWPORT (not the wrapper — wrapper
      overflow clips mid-translate slides), radius + white padding.
   4) HORIZONTAL LEFT-SIDE GALLERY: thumbs move from below to a LEFT-side
      vertical rail (WooCommerce default = below; CSS-only reorder).
   ============================================================ */
/* 1) Nav smooth open/close */
/* 2) Neutralize the slide cap that broke the flexslider track */
.single-product .woocommerce-product-gallery__image{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}
/* Neutralize the theme's track cap (base rule ~445837) — the flexslider
   track must expand to its full N*100% inline width for side-by-side slides. */
.single-product .woocommerce-product-gallery__wrapper{
    max-width: none !important;
}
/* 3) Visible frame on the main image viewport */
.single-product .woocommerce-product-gallery{
    border: 1px solid var(--rule, rgba(26, 24, 21, 0.14)) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    background: #FFFFFF !important;
}
.single-product .woocommerce-product-gallery__wrapper{
    overflow: hidden !important;
    border-radius: 8px !important;
}
/* 4) Horizontal gallery: thumbs as a LEFT rail (CSS-only reorder) */
.single-product .woocommerce-product-gallery--with-images{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
.single-product .woocommerce-product-gallery--with-images .woocommerce-product-gallery__wrapper{
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.single-product .woocommerce-product-gallery--with-images .flex-viewport{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 2 !important;
}
.single-product .flex-control-thumbs{
    flex: 0 0 64px !important;
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.single-product .flex-control-thumbs li{
    width: 64px !important;
    flex: 0 0 64px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.single-product .flex-control-thumbs li img{
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
    cursor: pointer !important;
}
.single-product .flex-control-thumbs li.is-selected img,
.single-product .flex-control-thumbs li.active img,
.single-product .flex-control-thumbs li.flex-active img{
    outline: 2px solid var(--accent, #3E7C6A) !important;
    outline-offset: 1px !important;
}
/* Mobile: fall back to below-gallery thumbs (no room for a left rail) */
@media (max-width: 640px){
    .single-product .woocommerce-product-gallery--with-images{
        flex-direction: column !important;
    }
    .single-product .woocommerce-product-gallery--with-images .flex-viewport{
        order: 0 !important;
    }
    .single-product .flex-control-thumbs{
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        order: 3 !important;
    }
}
/* ============================================================
   JA-NAVSEAM (2026-08-16) — nav panel crossfade, scroll reveal,
   carousel containment, PDP sticky-ATC hide + polish.
   Root causes (measured 2026-08-16): (1) panel swap is a hard
   show/hide — no crossfade; (2) homepage sections snap on scroll;
   (3) carousel card shadow/border bleeds out of the section band
   (band has no overflow clip); (4) Astra sticky ATC has NO filter
   in v4.13.9 — must hide via CSS; (5) my JA-NAVGAL width:auto on
   the gallery wrapper killed flexslider's 400% track (fixed above).
   ============================================================ */
/* 1) Nav panel crossfade: incoming panel fades+slides in (class is
      re-added on every swap, so the animation re-triggers) */
@keyframes ja-panel-in{
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 2) Homepage scroll reveal: sections fade + rise into view.
      Additive only — content visible without JS (is-inview adds the
      transitioned state; we never gate visibility on JS). */
.ja-section-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
html.ja-reveal-ready .ja-section-reveal:not(.is-inview),
html.ja-reveal-ready .ja-front-page .ja-hero:not(.is-inview),
html.ja-reveal-ready .ja-front-page .ja-section:not(.is-inview){
    opacity: 0 !important;
    transform: translateY(18px) !important;
}
html.ja-reveal-ready .ja-section-reveal.is-inview,
html.ja-reveal-ready .ja-front-page .ja-hero.is-inview,
html.ja-reveal-ready .ja-front-page .ja-section.is-inview{
    opacity: 1 !important;
    transform: none !important;
}
@media (prefers-reduced-motion: reduce){
    html.ja-reveal-ready .ja-section-reveal:not(.is-inview),
    html.ja-reveal-ready .ja-front-page .ja-hero:not(.is-inview),
    html.ja-reveal-ready .ja-front-page .ja-section:not(.is-inview){
        opacity: 1 !important;
        transform: none !important;
    }
}
/* 3) Carousel containment: the section band must clip its child so no
      border/shadow pokes outside the main parent. */
.ja-section.ja-brands-carousel{
    overflow: hidden !important;
}
.ja-section.ja-brands-carousel > .ja-container{
    padding-left: clamp(12px, 2vw, 24px) !important;
    padding-right: clamp(12px, 2vw, 24px) !important;
}
.ja-brands-carousel__viewport{
    overflow: hidden !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    border: none !important;
}
/* 4) PDP: hide Astra's sticky add-to-cart (covers the header; no
      filter exists in Astra 4.13.9 — CSS is the only lever). */
.ast-sticky-add-to-cart{
    display: none !important;
}
/* 5) PDP add-to-cart card: clean framed block consistent with the
      gallery frame. */
.single-product .entry-summary .cart{
    border: 1px solid var(--rule, rgba(26, 24, 21, 0.14)) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}
.single-product .entry-summary .cart .quantity{
    margin: 0 !important;
}
.single-product .entry-summary .cart button.single_add_to_cart_button{
    flex: 1 1 auto !important;
    min-width: 160px !important;
    border-radius: 999px !important;
    justify-content: center !important;
}
/* 6) PDP reviews empty state: visitor-voice, styled. */
.single-product .woocommerce-Reviews .woocommerce-noreviews{
    border: 1px dashed var(--rule, rgba(26, 24, 21, 0.18)) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    color: var(--ink-soft, #5C5750) !important;
    background: #FAFAF8 !important;
    text-align: center !important;
}
/* JA-NAVGAL-FILL (2026-08-16) — PDP main slide must fill the frame.
   Audit (context-engineer) found the main slide rendered at natural 300x300
   inside a 559x300 viewport -> big white space ("image not in the box").
   Root cause: object-fit:cover was on .woocommerce-product-gallery__image img,
   but flexslider's slide <img> parent is the slide, so the selector never
   matched. Target the slide img + entire flexslider viewport track. */
.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image > a,
.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}
.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img{
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}
/* ===== JA-MOBILE-DENSITY (2026-08-20): shrink homepage for small screens ===== */
@media (max-width: 768px){
    .ja-hero{ padding: 2rem 0 !important; }
    .ja-hero h1, .ja-hero__title{ font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important; line-height: 1.15 !important; }
    .ja-hero p, .ja-hero__lead{ font-size: 0.9375rem !important; }
    .ja-section{ padding: 2rem 0 !important; }
    .ja-section__title, .ja-section h2{ font-size: clamp(1.25rem, 5.5vw, 1.7rem) !important; }
    .ja-products__grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; }
    .ja-carousel__slide{ min-width: 78vw !important; }
    .ja-product-card__title{ font-size: 0.8125rem !important; }
    .ja-product-card__price{ font-size: 0.875rem !important; }
}
@media (max-width: 480px){
    .ja-products__grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 0.625rem !important; }
    .ja-section__title, .ja-section h2{ font-size: 1.2rem !important; }
    .ja-btn--primary, .ja-btn--ghost{ padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
}
/* ===== END JA-MOBILE-DENSITY ===== */
/* ===== JA-FIX-B (2026-08-20): card image crop + header shadow vs dropdown ===== */
/* 1. Product card images: contain (no side-crop of brand/packaging text) */
.ja-product-card__img,
.ja-product-card__visual img{
    object-fit: contain !important;
    object-position: center !important;
}
/* 2. Sticky-header shadow must not fight the hover dropdown: hide it while a
      mega menu / dropdown is open so the panel attaches seamlessly. */
/* 3. Partial last row on shop grids: keep items top-aligned, no stretch blanks. */
.ja-products__grid{ align-content: start !important; }
/* ===== END JA-FIX-B ===== */
/* ===== JA-FIX-C (2026-08-20): watermark + menu depth + carousel cohesion ===== */
/* 1. Product-card brand span -> true watermark behind the image (was in-flow, clipped) */
.ja-product-card__visual .ja-product-card__brand{
    position: absolute;
    left: 10%;
    bottom: 4%;
    z-index: 0;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(62, 124, 106, 0.14);
    line-height: 1;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
.ja-product-card__visual img{ position: relative; z-index: 1; }
/* 2. Mega-menu depth: visible soft shadow over page content */
/* 3. Brands carousel: flatten box-within-box (slide is the single panel; halves carry the radii) */
.ja-brands-slide{ background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }
.ja-brands-slide__visual{ box-shadow: none !important; }
/* 4. Carousel pagination: pull controls up, close dead space */
.ja-brands-carousel{ padding-bottom: clamp(32px, 4vw, 56px) !important; }
.ja-brands-carousel__controls{ margin-top: 0.75rem !important; }
/* ===== END JA-FIX-C ===== */
/* ===== JA-FIX-D (2026-08-20): site-wide polish (operator) ===== */
/* 1. Kill Astra's dotted focus outlines everywhere (consistent cause: a:focus{outline:thin dotted}) */
a:focus, a:focus-visible, button:focus, button:focus-visible{
    outline: 2px solid var(--accent, #3E7C6A) !important;
    outline-offset: 2px !important;
}
a:hover, button:hover{ outline: none !important; }
/* 2. Featured grid: exactly 4 per row on desktop */
.ja-products__grid--featured{ grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 920px){
    .ja-products__grid--featured{ grid-template-columns: repeat(2, 1fr) !important; }
}
/* 3. Carousel: remove every boxed/border artifact (visible nest) */
.ja-brands-carousel{ border-top: none !important; border-bottom: none !important; }
.ja-brands-carousel::after{ display: none !important; }
.ja-brands-carousel__viewport{ border-radius: 0 !important; }
.ja-brands-slide__visual{ border-radius: 0 !important; }
.ja-brands-slide__body{ border-radius: 0 !important; }
/* 4. Header+dropdown seam: no border line at the junction when menu is open */
/* ===== END JA-FIX-D ===== */
/* ===== JA-FIX-E (2026-08-20): PDP gallery + focus + cart controls ===== */
/* 1. Mouse-click focus: no persistent ring (keyboard :focus-visible keeps it) */
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; }
/* 2. PDP gallery: contain (no skew/enlarge), frame breathing room */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image a img,
.single-product .wp-post-image{ object-fit: contain !important; }
.single-product .woocommerce-product-gallery{ padding: 16px 16px 12px !important; }
/* 3. Cart controls tidy: G Pay/Apple Pay full width under ADD TO CART */
.wc-stripe-product-checkout-container{ width: 100% !important; margin-top: 0.75rem !important; }
.wc-stripe-product-checkout-container .payment-box{ width: 100% !important; }
.wc-stripe_googlepay-product-button, .wc-stripe_applepay-product-button{ width: 100% !important; }
.single-product .entry-summary .cart{ display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important; }
/* 4. Carousel: viewport carries no framing; brand slide owns content only */
.ja-brands-carousel__viewport{ overflow: hidden !important; border-radius: 0 !important; box-shadow: none !important; border: none !important; background: transparent !important; }
.ja-brands-slide{ box-shadow: none !important; border: none !important; border-radius: 0 !important; }
/* ===== END JA-FIX-E ===== */
/* ===== JA-FIX-F (2026-08-20): Direction 1 'Warm Editorial' — operator-approved ===== */
:root{
  --bone:#F4EFE6; --cream:#FBF7F0; --ink:#2B2119; --muted:#6F6253;
  --copper:#A95E2A; --copper-deep:#8C4A1F;
  --sage:#3E7C6A; --sage-deep:#2E5E4E; --sage-soft:#EDF3EE;
  --stroke:#E3DACB; --rule:#E3DACB; --paper:#FBF7F0;
  --shadow-1:0 1px 2px rgba(43,33,25,.05);
  --shadow-2:0 2px 4px rgba(43,33,25,.06), 0 8px 24px rgba(43,33,25,.09);
  --shadow-3:0 0 0 1px rgba(43,33,25,.04), 0 4px 12px rgba(43,33,25,.06), 0 24px 56px rgba(43,33,25,.16);
  --shadow-4:0 1px 0 rgba(43,33,25,.05), 0 6px 20px rgba(43,33,25,.07);
  --shadow-5:0 8px 16px rgba(43,33,25,.10), 0 32px 72px rgba(43,33,25,.20);
  --ring-focus:0 0 0 3px rgba(62,124,106,.30);
}
body{background:var(--bone); color:var(--ink);}
/* Focus ring: warm sage ring for keyboard, nothing for mouse */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{ box-shadow:var(--ring-focus) !important; outline:none !important; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none !important; box-shadow:none !important; }
/* Buttons: copper pills, min 44px, no elevation on filled */
.ja-btn--primary, .woocommerce button.button.alt, button.single_add_to_cart_button,
button.single_add_to_cart_button.alt, .ja-pdp-sticky__btn, .wc-stripe-product-checkout-container .wc-stripe_googlepay-product-button > div,
.wc-stripe-product-checkout-container .wc-stripe_applepay-product-button > div{
  background:var(--copper) !important; color:var(--cream) !important;
  border-radius:999px !important; min-height:44px !important;
  box-shadow:none !important; border:none !important;
}
.ja-btn--primary:hover, button.single_add_to_cart_button:hover{ background:var(--copper-deep) !important; }
/* Product cards: borderless; media carries radius+shadow */
.ja-product-card{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.ja-product-card__visual{ border-radius:14px !important; box-shadow:var(--shadow-1) !important; transition:box-shadow 250ms ease !important; }
.ja-product-card:hover .ja-product-card__visual{ box-shadow:var(--shadow-2) !important; }
.ja-product-card__img, .ja-product-card__visual img{ transition:transform 600ms cubic-bezier(.2,.7,.2,1) !important; }
.ja-product-card:hover .ja-product-card__img, .ja-product-card:hover .ja-product-card__visual img{ transform:scale(1.045) !important; }
.ja-product-card__title{ color:var(--ink) !important; }
.ja-product-card__title::after{ content:''; display:block; height:2px; width:0; background:var(--copper); transition:width 300ms ease; }
.ja-product-card:hover .ja-product-card__title::after{ width:100%; }
.ja-product-card__price{ color:var(--ink) !important; }
.ja-product-card__add{ background:var(--copper) !important; color:var(--cream) !important; border:none !important; box-shadow:none !important; }
.ja-product-card__add:hover{ background:var(--copper-deep) !important; }
/* Mega menu / dropdown: cream sheet, stroke + shadow-3, bottom radii, sage rows */
/* Carousel: flat sections, open track, mask edges, cream arrows */
.ja-brands-carousel{ background:transparent !important; border:none !important; }
.ja-brands-carousel::after{ display:none !important; }
.ja-brands-carousel__viewport{ border-radius:0 !important; border:none !important; box-shadow:none !important;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent) !important;
  mask-image:linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent) !important; }
.ja-brands-carousel__arrow{ background:var(--cream) !important; border:1px solid var(--stroke) !important; color:var(--ink) !important; box-shadow:none !important; }
.ja-brands-carousel__arrow:hover{ background:var(--sage-soft) !important; color:var(--sage-deep) !important; box-shadow:var(--shadow-2) !important; }
/* Sticky header: quiet at rest; shadow-4 + cream/blur once scrolled (is-stuck via JS) */
/* Headings/links: sage-deep links, copper hovers */
a{ color:var(--sage-deep); }
a:hover{ color:var(--copper); }
.ja-section__title, .ja-section-head__title, .ja-footer__name{ color:var(--ink) !important; }
/* ===== END JA-FIX-F ===== */
/* ===== JA-FIX-G (2026-08-20): seamless integration + semantic theming layer ===== */
/* 1. Semantic tokens — single source of truth for surfaces (modular/scalable) */
:root{
  --bg-page:var(--bone);            /* page canvas */
  --bg-surface:var(--cream);        /* cards, menus, drawers */
  --bg-elevated:var(--cream);       /* floating surfaces */
  --bg-header:transparent;          /* header at rest inherits page */
  --bg-header-scrolled:rgba(251,247,240,.92);
  --bg-menu:var(--cream);           /* mega menu sheet */
  --bg-hero:var(--bone);
  --bg-strip:var(--bone);           /* trust strip */
  --bg-input:rgba(251,247,240,.6);
  --border-hairline:1px solid var(--stroke);
}
body{ background:var(--bg-page) !important; }
/* 2. Header: transparent at rest (seamless with hero), cream+blur when stuck */
/* 3. Trust strip: kill hardcoded white + white/green gradient */
/* 4. Hero + front-page sections: transparent over bone (kill 'Scheme B' whites) */
.ja-hero, .ja-front-page .ja-section, .ja-front-page .ja-hero,
.ja-section, .ja-pad-section{ background:transparent !important; background-image:none !important; }
.ja-hero__media, .ja-hero__card{ background:var(--bg-surface) !important; }
/* 5. Mega menu / panel: token surface, stroke hairline, no seam */
/* 6. Search: bone-tinted input surface instead of near-white */
/* 7. Remaining hardcoded near-whites on surfaces -> tokens */
.ja-cart-drawer{ background:var(--bg-surface) !important; }
.ja-mobile-nav{ background:var(--bg-surface) !important; }
.ja-products__grid--featured .ja-product-card{ background:transparent !important; }
/* 8. Hairlines: unify border colors to stroke token */
.ja-footer__inner{ border-color:var(--stroke) !important; }
/* ===== END JA-FIX-G ===== */
/* ===== JA-FIX-G2 (2026-08-20): neutralize Astra container boxes — page owns the canvas ===== */
.site, .site-content, #content, #primary, #main, .ast-container,
.ast-separate-container #primary, .ast-separate-container #content,
.ast-separate-container .ast-container, .ast-separate-container #main,
.ast-separate-container .site-main, .ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post, .ast-separate-container .ast-archive-description,
.ast-separate-container .ast-author-box, .ast-separate-container .entry-content,
.ast-separate-container .entry-header, .ast-container > .ast-row,
.ast-main-header-wrap, .ast-primary-header-bar, .ast-sticky-header,
.ast-above-header, .ast-below-header{ background-color:transparent !important; background-image:none !important; }
/* Any Astra content box with a hardcoded light bg */
.ast-separate-container .ast-archive-description{ background-color:transparent !important; }
/* ===== END JA-FIX-G2 ===== */
/* ===== JA-FIX-G3 (2026-08-20): kill pink residue + rest-state blur sheen ===== */
/* ===== END JA-FIX-G3 ===== */
/* ===== JA-FIX-H (2026-08-20): header/menu/underline/trust/loader cohesion ===== */
/* 1. True sticky navbar — container populates the header, full-width row */
/* 2. Mega menu follows the header width (same gutter alignment) + complementary surface */
/* 3. Card title underline: 1px, 70% less width, inside the card */
.ja-product-card__title::after{ height: 1px !important; }
.ja-product-card:hover .ja-product-card__title::after{ width: 30% !important; }
/* 4. Trust strip: softer hairlines + smooth running rotation */
[data-ja-trust-message]{ transition: opacity 400ms ease !important; }
/* 5. Mega panel links carry the panel accent (sage-deep) */
/* 6. Loader disabled entirely (markup removed from front-page.php) */
.ja-loader, .ja-loader__inner, .ja-loader__mark, .ja-loader--out, .ja-loader.is-hidden{ display: none !important; }
/* ===== END JA-FIX-H ===== */
/* ===== JA-FIX-H2 (2026-08-20): underline compromise + menu surface ===== */
/* Title underline: centered, 55% width, left+right not reaching (compromise after 30% too short) */
.ja-product-card__title::after{ margin: 0 auto !important; }
.ja-product-card:hover .ja-product-card__title::after{ width: 55% !important; }
/* Mega menu: bone surface (same as page + header) — no beige box, seamless */
/* ===== END JA-FIX-H2 ===== */
/* ===== JA-FIX-H3 (2026-08-20): final title underline =====
   Text-sized copper underline: follows the words exactly (no card-width line),
   fades in on hover, 1px, 3px offset. Replaces the ::after width experiments. */
.ja-product-card__title{ text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 300ms ease; }
.ja-product-card:hover .ja-product-card__title, .ja-product-card:focus-within .ja-product-card__title{ text-decoration-color: var(--copper); }
.ja-product-card__title::after{ display: none !important; }
/* ===== JA-FIX-H4 (2026-08-20): title underline removed entirely (operator) ===== */
.ja-product-card__title, .ja-product-card__title:hover{ text-decoration: none !important; text-decoration-color: transparent !important; }
.ja-product-card__title::after{ display: none !important; }
/* === Below-the-fold sections: content-visibility for paint savings === */
.ja-page > section:not(:first-child),
.ja-about-compact__section,
.ja-about-compact__card,
.ja-product-card--shop:nth-child(n+4){
    content-visibility: auto;
    contain-intrinsic-size: 300px 400px;
}