/* JJ EDC neutral UI study. Existing section order, media and behavior are retained. */
:root {
  --jj-canvas:#f5f5f5;
  --jj-paper:#fff;
  --jj-surface:#fafafa;
  --jj-ink:#0a0a0a;
  --jj-ink-soft:#171717;
  --jj-muted:#737373;
  --jj-line:#e5e5e5;
  --jj-error:#e7000b;
  --jj-font:"JJ Geist",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --jj-card-radius:24px;
  --jj-control-radius:18px;
  --jj-shadow:0 0 0 1px rgba(23,23,23,.05),0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
  --glass-bg:#fff;
  --glass-bg-strong:#fff;
  --glass-blur:none;
  --glass-blur-subtle:none;
  --glass-border:1px solid #e5e5e5;
  --glass-overlay-bg:rgba(10,10,10,.3);
  --page-width:1280px;
  --button-border-radius:18px;
  --input-border-radius:18px;
  --modal-border-radius:24px;
  --variant-selector-border-radius:18px;
  --sort-title-font:var(--jj-font);
  --sort-body-font:var(--jj-font);
  --sort-body-font-weight:400;
  --sort-body-font-style:normal;
  --sort-title-font-weight:600;
  --sort-title-font-style:normal;
  --sort-title-line-height:1.2;
  --sort-body-line-height:1.5;
  --sort-title-letter-spacing:-.025em;
  --sort-body-letter-spacing:0;
  --body1-font-size:18px;
  --body2-font-size:16px;
  --body3-font-size:16px;
  --body4-font-size:14px;
  --body5-font-size:14px;
  --body6-font-size:14px;
}
body.jj-neutral-ui { background:var(--jj-canvas); color:var(--jj-ink); font-family:var(--jj-font); font-size:14px; font-feature-settings:"ss01" 1,"cv11" 1; }
body.jj-neutral-ui :is(button,input,select,textarea) { font-family:var(--jj-font); }
body.jj-neutral-ui :is(.title0,.title1,.title2,.title3,.title4,.title5,.title6,h1,h2,h3,h4,h5,h6) { font-family:var(--jj-font); font-weight:600; }
body.jj-neutral-ui :is(.title0,.title1) { font-size:48px; line-height:1.1; letter-spacing:-.05em; }
body.jj-neutral-ui .title2 { font-size:36px; line-height:1.11; letter-spacing:-.025em; }
body.jj-neutral-ui .title3 { font-size:30px; line-height:1.2; letter-spacing:-.025em; }
body.jj-neutral-ui .title4 { font-size:24px; line-height:1.33; letter-spacing:-.025em; }
body.jj-neutral-ui .title5 { font-size:18px; line-height:1.56; letter-spacing:0; }
body.jj-neutral-ui .title6 { font-size:16px; line-height:1.5; letter-spacing:0; }
body.jj-neutral-ui :is(.body0,.body1,.body2,.body3,.body4,.body5,.body6,.rte,.field__input,.field__label) { font-family:var(--jj-font); font-size:14px; letter-spacing:0; }
body.jj-neutral-ui :is(a,button,summary,input,select,textarea):focus-visible { outline:2px solid currentColor; outline-offset:3px; }
/* Solid surfaces replace the previous draft's glass, without changing layout. */
body.jj-neutral-ui .header__container,
body.jj-neutral-ui .theme-sticky-header--sticky .header__container,
body.jj-neutral-ui .theme-sticky-header--sticky .transparent .header__container { background:var(--jj-paper); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--jj-line); }
body.jj-neutral-ui .header-section { --header-background:255,255,255; --header-color-text:10,10,10; }
body.jj-neutral-ui .header__logo { color:var(--jj-ink); }
body.jj-neutral-ui .jj-navigation { font-family:var(--jj-font); color:var(--jj-ink); --jj-menu-border:var(--jj-line); }
body.jj-neutral-ui .jj-navigation__root-link { font-size:14px; font-weight:500; min-height:48px; letter-spacing:0; }
body.jj-neutral-ui .header__container .jj-navigation--desktop .jj-navigation__panel { background:var(--jj-paper); backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid var(--jj-line); border-radius:24px; box-shadow:var(--jj-shadow); padding:24px; margin-top:8px; color:var(--jj-ink); }
body.jj-neutral-ui .jj-navigation__panel-heading { color:var(--jj-muted); border-color:var(--jj-line); font-size:12px; line-height:1.33; letter-spacing:.05em; font-weight:500; padding-bottom:16px; margin-bottom:20px; }
body.jj-neutral-ui .jj-navigation__panel-heading a { font-size:14px; color:var(--jj-ink); }
body.jj-neutral-ui .jj-navigation__products,
body.jj-neutral-ui .jj-navigation__materials { gap:12px; }
body.jj-neutral-ui .jj-navigation__product,
body.jj-neutral-ui .jj-navigation__material { padding:20px; border:1px solid var(--jj-line); border-radius:24px; background:var(--jj-paper); box-shadow:0 1px 2px rgba(0,0,0,.04); color:var(--jj-ink); }
body.jj-neutral-ui .jj-navigation__series-title { font-family:var(--jj-font); font-size:24px; font-weight:600; line-height:1.33; letter-spacing:-.025em; }
body.jj-neutral-ui .jj-navigation__size-group { padding-inline-start:12px; border-inline-start:2px solid var(--jj-line); margin-top:16px; }
body.jj-neutral-ui .jj-navigation__size-heading { color:var(--jj-muted); font-size:12px; font-weight:500; letter-spacing:.05em; }
body.jj-neutral-ui .jj-navigation__sizes a { border-radius:18px; background:var(--jj-canvas); border:1px solid transparent; padding:12px; min-height:80px; color:var(--jj-ink); }
body.jj-neutral-ui .jj-navigation__sizes a > span { font-size:14px; font-weight:500; }
body.jj-neutral-ui .jj-navigation__sizes small { color:var(--jj-muted); font-size:14px; line-height:1.43; opacity:1; }
body.jj-neutral-ui .jj-navigation__material { font-size:16px; font-weight:500; min-height:64px; }
body.jj-neutral-ui .jj-navigation__material > span[aria-hidden],
body.jj-neutral-ui .jj-navigation__series-title > span[aria-hidden] { color:var(--jj-muted); }
body.jj-neutral-ui .jj-navigation__all-series { font-size:14px; }
body.jj-neutral-ui .jj-navigation__sizes a:hover,
body.jj-neutral-ui .jj-navigation__material:hover { background:var(--jj-canvas); border-color:var(--jj-ink); }
body.jj-neutral-ui .header-nav-drawer__content { background:var(--jj-surface); backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--jj-ink); border-inline-end:1px solid var(--jj-line); }
/* Native button states, loading spinners, and small icon controls stay intact. */
body.jj-neutral-ui .button:not(.button--icon):not(.button--link):not(.button--text),
body.jj-neutral-ui .shopline-element-buy-now,
body.jj-neutral-ui .sgc-product-comparison .sgc-button { border-radius:18px; min-height:40px; padding:8px 16px; font-size:14px; line-height:1.43; font-weight:500; letter-spacing:0; background:var(--jj-ink-soft); color:var(--jj-surface); box-shadow:none; }
body.jj-neutral-ui .button:not(.button--icon):not(.button--link):not(.button--text)::after { box-shadow:none; border:1px solid transparent; border-radius:18px; background:none; }
body.jj-neutral-ui .button.button--secondary:not(.button--icon):not(.button--link):not(.button--text) { background:var(--jj-canvas); color:var(--jj-ink); }
body.jj-neutral-ui .button.button--secondary:not(.button--icon):not(.button--link):not(.button--text)::after { border-color:var(--jj-line); }
body.jj-neutral-ui :is(.button--link,.button--text) { font-size:14px; }
body.jj-neutral-ui .button--icon { border-radius:18px; }
body.jj-neutral-ui .button--icon:hover { background:var(--jj-canvas); }
body.jj-neutral-ui .button.loading:not(.button--icon):not(.button--link):not(.button--text) { color:transparent; }
body.jj-neutral-ui .button:not([disabled]):not(.loading):not(.button--icon):hover { opacity:.88; }
/* Native fields retain floating labels and validation behavior. */
body.jj-neutral-ui .field { background:var(--jj-canvas); color:var(--jj-ink); border-radius:18px; }
body.jj-neutral-ui .field::after { border:1px solid transparent; border-radius:18px; box-shadow:none; }
body.jj-neutral-ui .field:focus-within { background:var(--jj-paper); }
body.jj-neutral-ui .field:focus-within::after { border-color:var(--jj-line); box-shadow:0 0 0 1px var(--jj-line); }
body.jj-neutral-ui .field__input { min-height:40px; color:var(--jj-ink); }
body.jj-neutral-ui .field__label,
body.jj-neutral-ui .field__input::placeholder { color:var(--jj-muted); }
body.jj-neutral-ui .field.field--error::after { border-color:var(--jj-error); box-shadow:0 0 0 1px var(--jj-error); }
body.jj-neutral-ui .field__info--error { color:var(--jj-error); font-size:14px; }
/* Catalog cards: preserve image ratios, product state and add-to-cart actions. */
body.jj-neutral-ui .block-product-card.product-card-style--card { background:var(--jj-paper); border:1px solid var(--jj-line); border-radius:24px; box-shadow:var(--jj-shadow); color:var(--jj-ink); }
body.jj-neutral-ui .block-product-card .block-product-card__image-wrapper { border-radius:24px 24px 0 0; overflow:hidden; background:var(--jj-paper); }
body.jj-neutral-ui .block-product-card .block-product-card-info__content { padding:20px; }
body.jj-neutral-ui .block-product-card :is(.block-product-title,.block-product-price) { color:var(--jj-ink); font-family:var(--jj-font); font-size:16px; font-weight:500; letter-spacing:0; }
body.jj-neutral-ui .block-product-card__sold-out.block-product-card__sold-out { background:var(--jj-ink-soft); color:var(--jj-surface); border:1px solid var(--jj-ink-soft); border-radius:18px; padding:2px 8px; font-size:12px; line-height:1.33; opacity:1; letter-spacing:0; }
body.jj-neutral-ui :is(.block-product-card__discount-tag,.cart-bubble__count) { background:var(--jj-ink-soft); color:var(--jj-surface); border-radius:18px; }
/* Existing product selectors: text options only; material swatch colors are real data. */
body.jj-neutral-ui .block-product-variant-picker .variant-picker__button:not(.variant-picker__button--image):not(.variant-picker__button--swatch) { border-radius:18px; background:var(--jj-canvas); color:var(--jj-ink); font-size:14px; }
body.jj-neutral-ui .block-product-variant-picker { --variant-selector-border-radius:18px; --border-color:#e5e5e5; }
body.jj-neutral-ui .product-detail__variant-picker.product-detail__variant-picker .variant-picker__option { --variant-selector-border-radius:18px; }
body.jj-neutral-ui .product-detail__additional { border-color:var(--jj-line); }
body.jj-neutral-ui :is(.quantity-selector,.quantity-selector__input) { border-radius:18px; }
body.jj-neutral-ui .product-detail__breadcrumb-item { font-size:14px; color:var(--jj-muted); }
body.jj-neutral-ui .product-detail__breadcrumb-item:last-child { color:var(--jj-ink); }
body.jj-neutral-ui .product-detail__breadcrumb-item:not(:last-child)::after { color:var(--jj-muted); }
/* The comparison table retains its rows, column sizing and mobile scrolling. */
body.jj-neutral-ui .sgc-product-comparison { --comparison-card-background-color:255,255,255; --comparison-card-border-color:229,229,229; --comparison-card-border-opacity:100%; --comparison-card-border-width:1px; --comparison-card-border-radius:24px; }
body.jj-neutral-ui .sgc-product-comparison :is(.sgc-product-card__title,.sgc-product-card__price) { font-family:var(--jj-font); color:var(--jj-ink); font-weight:500; letter-spacing:0; }
body.jj-neutral-ui .sgc-product-comparison .sgc-product-comparison__cell { font-size:14px; }
body.jj-neutral-ui .sgc-product-comparison .sgc-product-comparison__description p:has(strong) { background:var(--jj-ink-soft); color:var(--jj-surface); border-radius:18px; font-size:12px; letter-spacing:.05em; }
body.jj-neutral-ui .footer { background:var(--jj-surface); color:var(--jj-ink); border-top:1px solid var(--jj-line); }
body.jj-neutral-ui :is(.footer__menu-title,.footer__custom-text-title) { font-size:16px; font-weight:600; letter-spacing:0; }
body.jj-neutral-ui .footer__menu-item { font-size:14px; }
body.jj-neutral-ui .modal__content { border-radius:24px; border:1px solid var(--jj-line); box-shadow:var(--jj-shadow); }
@media (max-width:959px) {
  body.jj-neutral-ui :is(.title0,.title1) { font-size:36px; line-height:1.11; letter-spacing:-.025em; }
  body.jj-neutral-ui .title2 { font-size:30px; line-height:1.2; }
  body.jj-neutral-ui .title3 { font-size:24px; line-height:1.33; }
  body.jj-neutral-ui .jj-navigation--mobile .jj-navigation__root-link { font-size:16px; font-weight:600; }
  body.jj-neutral-ui .jj-navigation--mobile .jj-navigation__panel { padding:0 16px 20px; }
  body.jj-neutral-ui .jj-navigation--mobile .jj-navigation__product,
  body.jj-neutral-ui .jj-navigation--mobile .jj-navigation__material { padding:12px; border-radius:24px; }
  body.jj-neutral-ui .jj-navigation--mobile .jj-navigation__series-title { font-size:18px; font-weight:600; }
  body.jj-neutral-ui .jj-navigation--mobile .jj-navigation__sizes a { padding:10px; }
  body.jj-neutral-ui .block-product-card .block-product-card-info__content { padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
  body.jj-neutral-ui .jj-navigation * { animation:none !important; transition:none !important; }
}

:root {
  --sort-body0-font:var(--jj-font);
  --sort-body1-font:var(--jj-font);
  --sort-body2-font:var(--jj-font);
  --sort-body3-font:var(--jj-font);
  --sort-body4-font:var(--jj-font);
  --sort-body5-font:var(--jj-font);
  --sort-body6-font:var(--jj-font);
  --sort-title0-font:var(--jj-font);
  --sort-title1-font:var(--jj-font);
  --sort-title2-font:var(--jj-font);
  --sort-title3-font:var(--jj-font);
  --sort-title4-font:var(--jj-font);
  --sort-title5-font:var(--jj-font);
  --sort-title6-font:var(--jj-font);
}

body.jj-neutral-ui .body1 { font-size:18px; }
body.jj-neutral-ui :is(.body2,.body3) { font-size:16px; }

/* Responsive readability: retain full product names and give content room to wrap. */
body.jj-neutral-ui :is(.main-collection__products,.main-search__results-wrapper,.featured-recommend-products__group,.cart-item__product-infos,.cart-item__product-infos-text) { min-width:0; }
body.jj-neutral-ui :is(.product-detail__title,.block-heading,.sgc-product-card__title) { overflow-wrap:anywhere; }
body.jj-neutral-ui .sgc-product-comparison .sgc-product-card__title { display:block; overflow:visible; -webkit-line-clamp:unset; }
body.jj-neutral-ui .block-product-card__sold-out.block-product-card__sold-out { width:fit-content; white-space:nowrap; }
body.jj-neutral-ui .block-subscription__inline-form .field { min-width:0; }
body.jj-neutral-ui .featured-recommend-products__image-wrapper { max-width:100%; }
body.jj-neutral-ui :is(.rte,.product-expander__content) table:has(tr > :nth-child(4)) {
  display:block;
  max-width:100%;
  height:auto !important;
  overflow-x:auto;
  table-layout:auto;
  overscroll-behavior-inline:contain;
}
body.jj-neutral-ui :is(.rte,.product-expander__content) table:has(tr > :nth-child(4)) :is(th,td) { min-width:76px; }
body.jj-neutral-ui :is(.rte,.product-expander__content) table:has(tr > :nth-child(4)) tr > :first-child { min-width:112px; }
/* Material reference articles contain prose, so their cells need more room than numeric specs. */
body.jj-neutral-ui .main-article__content.rte table:has(tr > :nth-child(4)) :is(th,td) { min-width:180px; overflow-wrap:normal; word-break:normal; }
body.jj-neutral-ui .main-article__content.rte table:has(tr > :nth-child(4)) tr > :first-child { min-width:160px; }

@media (min-width:960px) and (max-width:1199px) {
  body.jj-neutral-ui .main-collection.facets-layout-vertical.enable-filtering .main-collection__list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.jj-neutral-ui ul.main-search__results.grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.jj-neutral-ui .facets-layout-vertical.enable-filtering ul.main-search__results.grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.jj-neutral-ui .featured-recommend-products > .page-width > div { column-gap:32px; }
  body.jj-neutral-ui .featured-recommend-products__group { flex:1; }
  body.jj-neutral-ui .sgc-product-comparison .sgc-product-card__title { font-size:18px; line-height:1.4; }
}

@media (max-width:959px) {
  body.jj-neutral-ui .slideshow__group { min-width:0; max-width:100%; height:auto; padding:24px 20px 40px; }
  body.jj-neutral-ui .slideshow .block-heading { height:auto; }
  body.jj-neutral-ui .slideshow .button { max-width:100%; }
  body.jj-neutral-ui .slideshow--text-below .slideshow__image-container { color:var(--jj-ink); background:var(--jj-canvas); }
  body.jj-neutral-ui .slideshow--text-below .slideshow__pager--progress { background:rgb(0 0 0 / 20%); }
  body.jj-neutral-ui .slideshow--text-below .slideshow__pager--progress-inner { background:var(--jj-ink); }
  body.jj-neutral-ui .sgc-product-comparison .sgc-product-comparison__header-title { font-size:var(--sgc-product-comparison-header-title-mobile-font-size,24px); }
  body.jj-neutral-ui .sgc-product-comparison .sgc-product-comparison__table-container {
    overflow-x:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--jj-muted) var(--jj-canvas);
    padding-block-end:12px;
    overscroll-behavior-inline:contain;
  }
  body.jj-neutral-ui .sgc-product-comparison .sgc-product-comparison__table-container::-webkit-scrollbar { display:block; height:6px; }
  body.jj-neutral-ui .sgc-product-comparison .sgc-product-comparison__table-container::-webkit-scrollbar-thumb { background:var(--jj-muted); border-radius:6px; }
  body.jj-neutral-ui .sgc-product-comparison .sgc-product-comparison__table {
    --sgc-mobile-col:clamp(228px,calc(100cqw - 44px),300px);
    --sgc-mobile-gap:12px;
    width:calc(var(--card-column) * (var(--sgc-mobile-col) + 12px) + 12px);
    min-width:100%;
    border-spacing:12px 0;
  }
  body.jj-neutral-ui .sgc-product-comparison .sgc-product-comparison__table :is(th,td) { width:var(--sgc-mobile-col); min-width:var(--sgc-mobile-col); max-width:none; }
  body.jj-neutral-ui .sgc-product-comparison .sgc-product-card__title { font-size:16px; line-height:1.4; }
  body.jj-neutral-ui .cart-item__product { column-gap:12px; }
  body.jj-neutral-ui .cart-item__product-infos { flex:1; }
  body.jj-neutral-ui .main-cart-items__list .cart-item__product-infos .cart-item__amount { min-width:0; width:100%; }
  body.jj-neutral-ui .cart-item__amount-operator { flex-wrap:wrap; gap:10px; }
}

@media (max-width:479px) {
  body.jj-neutral-ui .block-subscription__inline-form { flex-direction:column; gap:12px; }
  body.jj-neutral-ui .block-subscription__inline-form .button { width:100%; max-width:100%; }
  body.jj-neutral-ui .cart-drawer__body { width:100%; }
}

@media (max-width:359px) {
  body.jj-neutral-ui :is(.main-collection__list,ul.main-search__results.grid) { grid-template-columns:minmax(0,1fr); }
  body.jj-neutral-ui .facets-mobile__modals { flex-direction:column; align-items:stretch; padding-block:4px; }
  body.jj-neutral-ui .facets-mobile__modals > *:first-child { border-inline-end:0; border-block-end:1px solid var(--jj-line); }
  body.jj-neutral-ui .facets-mobile__modals summary { min-height:44px; justify-content:flex-start; padding-inline:20px; }
  body.jj-neutral-ui .block-product-buy-button-group > div:has(> .quantity-selector__input) { flex-direction:column; align-items:stretch; }
}
