/* =================================================================
   Boxed shell — the site sits on a canvas with side + bottom framing,
   flush to the top of the viewport (matches the approved design).
   ================================================================= */
:root{--katjo-page:#ECE9E3;--katjo-shell-max:1560px;--katjo-inset:0px;}

@media (min-width:900px){
  :root{--katjo-inset:clamp(14px,3.2vw,52px);}
}

html{background:var(--katjo-page);}
body{
  background:var(--katjo-page);
  padding:0 var(--katjo-inset) var(--katjo-inset);
  overflow-x:hidden;
}
body > header.xpro-theme-builder-header,
body > .elementor,
body > .wp-site-blocks,
body > main,
body > footer#xpro-theme-builder-footer{
  max-width:var(--katjo-shell-max);
  margin-left:auto;margin-right:auto;
  background:var(--katjo-cream);
}
/* The boxed shell is three stacked elements - header, main, footer - and
   each used to carry its own edge shadow. Where they met, two shadows
   overlapped (and the sticky header painted its own on top of main's), so
   the edge read as a double line. One pseudo-element the height of the
   document now draws the shadow once, and the three carry none. */
@media (min-width:900px){
  body{position:relative;}
  body::before{
    content:"";
    position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:min(100%,var(--katjo-shell-max));height:100%;
    box-shadow:-20px 0 30px -24px rgba(64,51,38,.5),
                20px 0 30px -24px rgba(64,51,38,.5),
                0 22px 30px -26px rgba(64,51,38,.5);
    pointer-events:none;z-index:0;
  }
  body > header.xpro-theme-builder-header,
  body > .elementor,
  body > .wp-site-blocks,
  body > main,
  body > footer#xpro-theme-builder-footer{box-shadow:none;}
}


/* Kat & Jo — support styles for the Elementor build */
:root{
  --katjo-ink:#1C1B19; --katjo-ink-soft:#45403A; --katjo-muted:#6F6862;
  --katjo-line:#E4DCD4; --katjo-dark:#23221F; --katjo-sage:#899277;
  --katjo-coral:#E2957A; --katjo-coral-deep:#D3805F; --katjo-tile:#F5F0EC;
  --katjo-sage-deep:#7C8A67;
  --katjo-cream:#F7F3EF;
}

/* ---- images that must fill their flex cell ---- */
.katjo-fill,
.katjo-fill .elementor-widget-container,
.katjo-fill figure,
.katjo-fill .elementor-image{height:100%;}
.katjo-fill img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- home: best-seller tiles ---- */
.katjo-bs-shot img{width:100%;aspect-ratio:215/115;object-fit:cover;display:block;background:var(--katjo-tile);}

/* ---- home: shop-by-category tiles ---- */
.katjo-cat-tile{overflow:hidden;}
.katjo-cat-shot,
.katjo-cat-shot .elementor-widget-container,
.katjo-cat-shot figure{height:100%;}
.katjo-cat-shot img{width:100%;height:100%;object-fit:contain;object-position:right center;display:block;}

/* ---- home: instagram row ---- */
.katjo-ig-shot img{width:100%;aspect-ratio:107/95;object-fit:cover;display:block;}

/* ---- tips & advice cards ---- */
.katjo-cat-card-shot img{width:100%;aspect-ratio:1/1.32;object-fit:cover;display:block;}
.katjo-article-shot img{width:100%;aspect-ratio:1/.74;object-fit:cover;display:block;}

/* ---- shop-all ingredient strip ----
   The band centres its children, so the image widget sized to fit-content
   (1287 of 1483) and sat inset from the boxed edges. Force it to stretch. */
.katjo-strip{width:100%!important;align-self:stretch!important;}
.katjo-strip > .elementor-widget-container,
.katjo-strip figure,
.katjo-strip .elementor-image{display:block;width:100%!important;margin:0!important;}
.katjo-strip img{width:100%!important;max-width:none!important;
  object-fit:cover;display:block;}   /* height comes from the widget */

/* ---- about: arch images ---- */
.katjo-arch img{
  width:100%;aspect-ratio:182/230;object-fit:cover;display:block;
  border-radius:50% 50% 0 0 / 38% 38% 0 0;
}

/* ---- legal long-form ---- */
.katjo-legal h2{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:29px;
  line-height:1.2;margin:42px 0 14px;color:var(--katjo-ink);}
.katjo-legal h3{font-family:"Jost",sans-serif;font-weight:400;font-size:12px;
  letter-spacing:1.9px;text-transform:uppercase;margin:26px 0 10px;color:var(--katjo-ink);}
.katjo-legal ul{list-style:disc;padding-left:20px;margin:0 0 1.05em;}
.katjo-legal li{margin-bottom:6px;}
.katjo-legal a{color:var(--katjo-ink);border-bottom:1px solid currentColor;}

/* ---- header: everything folds into Xpro's off-canvas at <=1024px ---- */
@media (max-width:1024px){
  .katjo-header-row{grid-template-columns:1fr auto 1fr;}
}
/* between 1025 and 1340 the 9-item split nav needs to tighten to fit */
@media (min-width:1025px) and (max-width:1340px){
  .katjo-header-row{padding-left:24px!important;padding-right:24px!important;column-gap:16px;}
  .katjo-header-row .xpro-elementor-nav-link{
    font-size:9px!important;letter-spacing:.6px!important;padding:3px 7px!important;}
  .katjo-header-row .katjo-wordmark .elementor-heading-title{font-size:24px!important;}
}
@media (min-width:1341px) and (max-width:1460px){
  .katjo-header-row .xpro-elementor-nav-link{
    font-size:10px!important;letter-spacing:.9px!important;padding:3px 9px!important;}
}

/* ---- header ---- */
.katjo-header-row{
  display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;
  column-gap:24px;max-width:1560px;margin-left:auto;margin-right:auto;}
.katjo-header-row > *{min-width:0;}
.katjo-header-row > *:first-child{justify-self:start;}
.katjo-header-row > *:last-child{justify-self:end;}
.katjo-header-row .katjo-wordmark{justify-self:center;}

.xpro-theme-builder-header{position:relative;z-index:99;}
.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav{flex-wrap:nowrap!important;}
.xpro-theme-builder-header .xpro-elementor-nav-link{
  white-space:nowrap;padding:3px 11px!important;
  border-bottom:1px solid transparent;transition:border-color .2s ease;}
.xpro-theme-builder-header .xpro-elementor-nav-link:hover{border-bottom-color:rgba(28,27,25,.45);}
.xpro-theme-builder-header .current-menu-item > .xpro-elementor-nav-link{border-bottom-color:var(--katjo-ink);}
.katjo-wordmark,.katjo-wordmark .elementor-heading-title{white-space:nowrap;}
@media (max-width:1300px){
  .xpro-theme-builder-header .xpro-elementor-nav-link{font-size:10.5px!important;letter-spacing:.9px!important;padding:3px 8px!important;}
}

/* ---- footer: stack the menus vertically ---- */
#xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-nav{
  flex-direction:column;align-items:flex-start;gap:0;}
#xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-nav > li{width:100%;}
#xpro-theme-builder-footer .xpro-elementor-nav-link{padding:0 0 9px!important;
  text-align:left!important;justify-content:flex-start!important;}
#xpro-theme-builder-footer .xpro-elementor-nav-link:hover{
  text-decoration:underline;text-underline-offset:3px;}

/* ---- Newsletter plugin forms ---- */
.katjo-footer-news .tnp form,
.katjo-glow-form .tnp form,
.katjo-tips-form .tnp form,
.katjo-footer-news .tnp-widget form,
.katjo-glow-form .tnp-widget form,
.katjo-tips-form .tnp-widget form{display:flex;gap:0;margin:0;}
.katjo-footer-news .tnp-field-email,
.katjo-glow-form .tnp-field-email,
.katjo-tips-form .tnp-field-email{flex:1;min-width:0;margin:0;}
.tnp input[type=email],
.tnp-widget input[type=email]{
  width:100%;border:1px solid var(--katjo-line);background:#fff;padding:14px 16px;
  font-family:"Jost",sans-serif;font-weight:300;font-size:13.4px;color:var(--katjo-ink);
  border-radius:0;height:auto;}
.tnp input[type=email]::placeholder,
.tnp-widget input[type=email]::placeholder{color:var(--katjo-muted);}
.tnp .tnp-field-button,
.tnp-widget .tnp-field-button{margin:0;}
.tnp input[type=submit],
.tnp-widget input[type=submit]{
  background:var(--katjo-coral);color:#fff;border:1px solid var(--katjo-coral);
  padding:14px 28px;font-family:"Jost",sans-serif;font-weight:400;font-size:10.5px;
  letter-spacing:1.7px;text-transform:uppercase;border-radius:0;height:auto;
  transition:background .25s ease;width:auto;}
.tnp input[type=submit]:hover,
.tnp-widget input[type=submit]:hover{background:var(--katjo-coral-deep);border-color:var(--katjo-coral-deep);}
.katjo-footer-news .tnp input[type=submit],
.tnp-widget input[type=submit]{background:var(--katjo-dark);border-color:var(--katjo-dark);}
.katjo-footer-news .tnp input[type=submit]:hover,
.tnp-widget input[type=submit]:hover{background:var(--katjo-sage);border-color:var(--katjo-sage);}
.tnp-widget .tnp-privacy-field{font-size:11px;color:var(--katjo-muted);margin-top:8px;}

/* ---- Xpro WooCommerce product grid ---- */
.xpro-woo-product-grid-item .cbp-item-wrapper{
  background:#FAF8F6;border:1px solid #ECE5DE;text-align:center;height:100%;
  display:flex;flex-direction:column;}
.xpro-woo-product-grid-img img{
  width:100%;aspect-ratio:1/1.12;object-fit:cover;display:block;}
.xpro-woo-product-grid-content-sec{padding:20px 16px 26px;}
.xpro-woo-product-grid-title,
.xpro-woo-product-grid-title a{
  font-family:"Jost",sans-serif;font-size:11.5px;font-weight:400;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--katjo-ink);line-height:1.5;}
.xpro-woo-product-grid-price-wrapper .price,
.xpro-woo-product-grid-price-wrapper{
  font-family:"Jost",sans-serif;font-size:13.5px;font-weight:500;color:var(--katjo-ink);
  margin-top:8px;display:block;}
.xpro-woo-product-grid-price-wrapper del{color:var(--katjo-muted);font-weight:300;margin-right:6px;}
.xpro-woo-product-grid-price-wrapper ins{text-decoration:none;}
/* Scope to the real buttons only. `…-add-to-cart-btn a` also matched the
   empty <a class="xpro-woo-product-grid-title-wrapper"> that Xpro emits
   beside the button, and padding + a dark background turned that empty
   anchor into a 44x24 black block. */
.xpro-woo-product-grid-btn-section a.add_to_cart_button,
.xpro-woo-product-grid-btn-section a.button,
.xpro-woo-product-grid-btn-section a.added_to_cart{
  font-family:"Jost",sans-serif;font-size:10.5px;letter-spacing:1.9px;text-transform:uppercase;
  background:var(--katjo-dark);color:#fff;border-radius:0;padding:12px 22px;display:inline-block;
  transition:background .25s ease;}
.xpro-woo-product-grid-btn-section a.add_to_cart_button:hover,
.xpro-woo-product-grid-btn-section a.button:hover,
.xpro-woo-product-grid-btn-section a.added_to_cart:hover{background:var(--katjo-sage);color:#fff;}
/* and hide the empty wrapper outright so nothing can paint it again */
.xpro-woo-product-grid-btn-section a.xpro-woo-product-grid-title-wrapper{display:none!important;}
/* sale badge is consolidated near the end of this file */

/* ---- WooCommerce shop / cart / account ---- */
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,
.woocommerce input.button,.woocommerce #respond input#submit{
  background:var(--katjo-dark);color:#fff;border-radius:0;
  font-family:"Jost",sans-serif;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  padding:14px 30px;font-weight:400;}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{
  background:var(--katjo-sage);color:#fff;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:"Jost",sans-serif;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;}
.woocommerce div.product .product_title{font-family:"Cormorant Garamond",serif;font-weight:400;}


/* ---- WPForms ---- */
.wpforms-container .wpforms-field{padding:0;}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container textarea{
  border:0;border-bottom:1px solid var(--katjo-line);background:transparent;border-radius:0;
  font-family:"Jost",sans-serif;font-weight:300;font-size:13.6px;color:var(--katjo-ink);
  padding:12px 2px;box-shadow:none;}
.wpforms-container textarea{border:1px solid var(--katjo-line);padding:14px;min-height:118px;}
.wpforms-container input::placeholder,.wpforms-container textarea::placeholder{color:var(--katjo-muted);}
.wpforms-container .wpforms-field-label{
  font-family:"Jost",sans-serif;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:400;color:var(--katjo-ink);}
/* The submit was stretched to the form's full width, which made it the
   heaviest thing on the page. Size it to its own label instead. */
.wpforms-container button[type=submit]{
  background:var(--katjo-dark);color:#fff;border:1px solid var(--katjo-dark);border-radius:0;
  font-family:"Jost",sans-serif;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  padding:13px 40px;width:auto;min-width:0;display:inline-block;
  transition:background .25s ease,color .25s ease;}
.wpforms-container .wpforms-submit-container{text-align:left;}
.wpforms-container button[type=submit]:hover{background:transparent;color:var(--katjo-dark);}

/* ---- refer a friend ---- */
.katjo-raf .gens-raf-wrapper{font-family:"Jost",sans-serif;}

/* ---- responsive ---- */
@media (max-width:767px){
  .katjo-arch img{max-width:300px;margin:0 auto;}
  .katjo-cat-shot img{object-position:right center;}
}


/* ---- product grid: beat the Elementor kit heading styles ---- */
.xpro-woo-product-grid .xpro-woo-product-grid-title,
.xpro-woo-product-grid .xpro-woo-product-grid-title a,
.elementor-widget-xpro-woo-product-grid h2.xpro-woo-product-grid-title,
.elementor-widget-xpro-woo-product-grid h3.xpro-woo-product-grid-title{
  font-family:"Jost",sans-serif!important;font-size:11.5px!important;font-weight:400!important;
  letter-spacing:1.8px!important;text-transform:uppercase!important;
  color:var(--katjo-ink)!important;line-height:1.6!important;margin:0 0 6px!important;}
.elementor-widget-xpro-woo-product-grid .xpro-woo-product-grid-price-wrapper,
.elementor-widget-xpro-woo-product-grid .xpro-woo-product-grid-price-wrapper .price,
.elementor-widget-xpro-woo-product-grid .xpro-woo-product-grid-price-wrapper span{
  font-family:"Jost",sans-serif!important;font-size:13.5px!important;font-weight:500!important;
  color:var(--katjo-ink)!important;letter-spacing:.3px!important;}
.elementor-widget-xpro-woo-product-grid .xpro-woo-product-grid-item .cbp-item-wrapper{
  background:#FAF8F6;border:1px solid #ECE5DE;}
.elementor-widget-xpro-woo-product-grid .xpro-woo-product-grid-content-sec{
  padding:18px 14px 24px;text-align:center;}
/* products with no photo fall back to a neutral tile rather than a broken icon */
.xpro-woo-product-grid-img img[src=""],
.xpro-woo-product-grid-img img:not([src]){visibility:hidden;}
.xpro-woo-product-grid-img{background:var(--katjo-tile);}

/* =================================================================
   Sticky header — CSS only, so it stays inside the boxed shell.
   Xpro's JS sticky is disabled (it forces position:fixed;width:100%,
   which escapes the box and shifts the header grid).
   ================================================================= */
body > header.xpro-theme-builder-header{
  position:sticky;top:0;z-index:200;
}
/* neutralise Xpro's fixed-position sticky if the class ever returns */
.xtb-header-sticky.xtb-appear .xpro-theme-builder-header-nav,
.xtb-appear .xpro-theme-builder-header-nav{
  position:static!important;left:auto!important;top:auto!important;width:auto!important;
  box-shadow:none!important;animation:none!important;
}
.xtb-header-sticky{min-height:0!important;}

/* header grid can never be overflowed by its side columns */
.katjo-header-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;}
.katjo-header-row > *{min-width:0;}
.katjo-header-row .katjo-wordmark{overflow:visible;}

/* =================================================================
   Images must fill their grid/flex cell edge to edge.
   Elementor wraps images as .elementor-widget-container > figure > img,
   so every link in that chain needs to stretch.
   ================================================================= */
.katjo-fill,
.katjo-fill > .elementor-widget-container,
.katjo-fill figure,
.katjo-fill .elementor-image,
.katjo-fill a{display:block;width:100%;height:100%;margin:0;}
.katjo-fill img{width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block;}

.katjo-ig-shot,
.katjo-ig-shot > .elementor-widget-container,
.katjo-ig-shot figure,
.katjo-ig-shot a{display:block;width:100%;margin:0;}
.katjo-ig-shot img{width:100%!important;max-width:none;aspect-ratio:107/95;object-fit:cover;display:block;}

.katjo-bs-shot,
.katjo-bs-shot > .elementor-widget-container,
.katjo-bs-shot figure,
.katjo-bs-shot a{display:block;width:100%;margin:0;}
.katjo-bs-shot img{width:100%!important;max-width:none;aspect-ratio:215/115;object-fit:cover;display:block;}

.katjo-cat-shot,
.katjo-cat-shot > .elementor-widget-container,
.katjo-cat-shot figure,
.katjo-cat-shot a{display:block;width:100%;height:100%;margin:0;}
.katjo-cat-shot img{width:100%!important;height:100%!important;max-width:none;
  object-fit:contain;object-position:right center;display:block;}

.katjo-cat-card-shot,
.katjo-cat-card-shot > .elementor-widget-container,
.katjo-cat-card-shot figure,
.katjo-cat-card-shot a,
.katjo-article-shot,
.katjo-article-shot > .elementor-widget-container,
.katjo-article-shot figure,
.katjo-article-shot a{display:block;width:100%;margin:0;}
.katjo-cat-card-shot img{width:100%!important;max-width:none;aspect-ratio:1/1.32;object-fit:cover;display:block;}
.katjo-article-shot img{width:100%!important;max-width:none;aspect-ratio:1/.74;object-fit:cover;display:block;}

.katjo-arch,
.katjo-arch > .elementor-widget-container,
.katjo-arch figure{display:block;width:100%;margin:0;}
.katjo-arch img{width:100%!important;max-width:none;}

/* grid cells stretch so the media column reaches the card edges */
.e-con.e-grid > .e-con{height:100%;}

/* header side tracks: shrink type before anything can clip */
.katjo-header-row .xpro-elementor-horizontal-navbar-wrapper{min-width:0;}
.katjo-header-row .elementor-widget-icon{flex:0 0 auto;}

/* =================================================================
   Theme-rendered pages (search, archives, cart, checkout, account,
   single product). Hello Elementor ships these unstyled, so give them
   the same boxed shell, a readable measure and the brand type.
   ================================================================= */
main.site-main{
  max-width:var(--katjo-shell-max);
  margin-left:auto;margin-right:auto;
  background:var(--katjo-cream);
  padding:clamp(44px,4.6vw,76px) clamp(20px,4vw,60px) clamp(60px,6vw,92px);
  box-sizing:border-box;
}
/* main's own copy of the shell shadow - the single body::before above
   replaces it, otherwise theme-rendered pages get the doubled edge back */
@media (min-width:900px){
  main.site-main{box-shadow:none;}
}
main.site-main > *{max-width:1240px;margin-left:auto;margin-right:auto;}
main.site-main .woocommerce{max-width:1240px;margin-left:auto;margin-right:auto;}

/* ---- page + search headings ---- */
main.site-main .page-header{margin:0 auto clamp(28px,3vw,44px);}
main.site-main .page-title,
main.site-main .entry-title,
main.site-main h1{
  font-family:"Cormorant Garamond",serif;font-weight:400;line-height:1.14;
  font-size:clamp(30px,3.2vw,44px);color:var(--katjo-ink);margin:0 0 .4em;}
main.site-main .entry-title{font-size:clamp(22px,2vw,28px);}
main.site-main .entry-title a{color:var(--katjo-ink);}
main.site-main .entry-title a:hover{color:var(--katjo-sage);}
main.site-main article{
  padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--katjo-line);}
main.site-main article:last-child{border-bottom:0;}
main.site-main p{color:var(--katjo-ink-soft);}
main.site-main .search-form,
main.site-main .wp-block-search__inside-wrapper{
  display:flex;max-width:520px;margin:0 0 32px;}
main.site-main .search-form input[type=search],
main.site-main .wp-block-search__input{
  flex:1;min-width:0;border:1px solid var(--katjo-line);background:#fff;border-radius:0;
  padding:13px 16px;font-family:"Jost",sans-serif;font-weight:300;font-size:13.6px;}
main.site-main .search-form button,
main.site-main .wp-block-search__button{
  background:var(--katjo-dark);color:#fff;border:0;border-radius:0;padding:13px 26px;
  font-family:"Jost",sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;}

/* ---- WooCommerce: my account ---- */
.woocommerce-account .woocommerce{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,56px);}
.woocommerce-account .woocommerce-MyAccount-navigation{
  flex:0 0 auto;width:220px;float:none;margin:0;}
.woocommerce-account .woocommerce-MyAccount-content{
  flex:1;min-width:0;float:none;width:auto;margin:0;}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--katjo-line);}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--katjo-line);}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:12px 0;font-family:"Jost",sans-serif;font-size:11.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--katjo-ink-soft);}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover{color:var(--katjo-ink);}
@media (max-width:767px){
  .woocommerce-account .woocommerce{display:block;}
  .woocommerce-account .woocommerce-MyAccount-navigation{width:100%;margin-bottom:28px;}
}

/* ---- WooCommerce: cart / checkout / forms ---- */
.woocommerce table.shop_table{border-radius:0;border-color:var(--katjo-line);}
.woocommerce table.shop_table th{
  font-family:"Jost",sans-serif;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  font-weight:400;color:var(--katjo-ink);}
.woocommerce .cart_totals h2,.woocommerce-billing-fields h3,
.woocommerce-checkout h3,.woocommerce h2{
  font-family:"Cormorant Garamond",serif;font-weight:400;color:var(--katjo-ink);}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page input[type=text],.woocommerce-page input[type=email],
.woocommerce-page input[type=password],.woocommerce-page input[type=tel]{
  border:1px solid var(--katjo-line);border-radius:0;background:#fff;padding:12px 14px;
  font-family:"Jost",sans-serif;font-weight:300;font-size:13.6px;color:var(--katjo-ink);}
.woocommerce form .form-row label{
  font-family:"Jost",sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--katjo-ink);}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--katjo-sage);border-radius:0;background:#FAF8F6;}
.woocommerce-message::before,.woocommerce-info::before{color:var(--katjo-sage);}

/* ---- WooCommerce: single product + archive ---- */
.single-product div.product .product_title{font-size:clamp(28px,3vw,40px);}
.single-product div.product .price{
  font-family:"Jost",sans-serif;font-size:18px;font-weight:500;color:var(--katjo-ink);}
.woocommerce ul.products{gap:clamp(14px,1.6vw,24px);}
.woocommerce ul.products li.product{background:#FAF8F6;border:1px solid #ECE5DE;
  padding:0 0 22px;text-align:center;}
.woocommerce ul.products li.product a img{margin:0 0 16px;}
.woocommerce ul.products li.product .price{
  font-family:"Jost",sans-serif;font-size:13.5px;font-weight:500;color:var(--katjo-ink);}
.woocommerce nav.woocommerce-breadcrumb{
  font-family:"Jost",sans-serif;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--katjo-muted);margin-bottom:24px;}

/* NOTE: an earlier generic block lived here -
     main.site-main article img { max-width:180px; aspect-ratio:1/1 }
   It was written for search results but matched every archive article
   too, and because it set max-width and aspect-ratio (which the later,
   properly scoped rules never reset) it clamped the archive thumbnails
   to 180px and cropped landscape photos square. Search results and
   archives are now each styled in their own scoped block further down
   this file. */

/* =================================================================
   WooCommerce colour system. Woo 9+/Blocks paint buttons from its own
   CSS variables, which beat plain class selectors - set the variables
   as well as the classes.
   ================================================================= */
:root,body{
  --woocommerce:#23221F;
  --wc-primary:#23221F;
  --wc-primary-text:#FFFFFF;
  --wc-secondary:#F5F0EC;
  --wc-secondary-text:#1C1B19;
  --wc-highlight:#899277;
  --wc-content-bg:#F7F3EF;
  --wc-form-border-color:#E4DCD4;
  --wp--preset--color--primary:#23221F;
  --wp--preset--color--contrast:#1C1B19;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce ul.products li.product .button,
.wc-block-components-button,
.wp-element-button,
.woocommerce #respond input#submit{
  background:var(--katjo-dark)!important;
  background-image:none!important;
  color:#FFFFFF!important;
  border:1px solid var(--katjo-dark)!important;
  border-radius:0!important;
  font-family:"Jost",sans-serif!important;
  font-size:11px!important;
  font-weight:400!important;
  letter-spacing:2px!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  padding:13px 26px!important;
  opacity:1!important;
  transition:background .25s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.wc-block-components-button:hover,
.wp-element-button:hover{
  background:var(--katjo-sage)!important;border-color:var(--katjo-sage)!important;color:#fff!important;}

/* quantity box sits flush with the button */
.woocommerce .quantity .qty{
  border:1px solid var(--katjo-line);background:#fff;border-radius:0;
  padding:12px 8px;font-family:"Jost",sans-serif;color:var(--katjo-ink);height:auto;}

/* prices + sale badge */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce .price,
.woocommerce-Price-amount{color:var(--katjo-ink)!important;}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del{color:var(--katjo-muted)!important;opacity:1;}
/* sale badge is consolidated near the end of this file */

/* product tabs
   Woo styles the active tab as a white pill with its own borders; the
   earlier reset only matched plain `li`, so `li.active` kept the white
   box and the labels sat flush against each other. Flex + gap spaces
   them evenly and both states are now flattened. */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:0 38px;list-style:none;
  padding:0;margin:0 0 32px;border-bottom:1px solid var(--katjo-line);}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after{display:none!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;margin:0!important;padding:0!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--katjo-muted);padding:14px 0 13px;
  font-weight:400;transition:color .2s ease;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--katjo-ink);}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--katjo-ink);box-shadow:inset 0 -2px 0 var(--katjo-ink);}
.woocommerce div.product .woocommerce-tabs .panel{margin-bottom:0;}
.woocommerce div.product .woocommerce-tabs .panel > h2{
  font-family:"Cormorant Garamond",serif;font-weight:400;font-size:26px;
  color:var(--katjo-ink);margin:0 0 14px;}

/* cross-sell / upsell tiles line up */
.woocommerce ul.products li.product a img{
  width:100%;aspect-ratio:1/1.05;object-fit:cover;margin:0 0 16px;}
.woocommerce ul.products li.product{display:flex;flex-direction:column;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding:0 14px;margin-bottom:8px;}
.woocommerce ul.products li.product .price{padding:0 14px;margin-bottom:14px;}
.woocommerce ul.products li.product .button{margin:auto 14px 0;align-self:center;}

/* =================================================================
   Hello Elementor caps .site-main at --container-max-width (1140px),
   which made theme-rendered pages narrower than the boxed header and
   footer. Match the shell instead, and keep a readable measure inside.
   ================================================================= */
:root{--container-max-width:1560px;}

/* not always a direct child of body - Woo templates nest it */
main.site-main,
main#content,
.site-main{
  max-width:var(--katjo-shell-max)!important;
  width:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
/* the readable column lives inside, so the panel still spans the box */
main.site-main > *,
main.site-main .woocommerce{
  max-width:1240px;margin-left:auto;margin-right:auto;
}
/* product archive + single product use the full box */
.woocommerce main.site-main > .woocommerce-products-header,
.woocommerce main.site-main > ul.products,
.single-product main.site-main > div.product{max-width:1240px;}

/* ---- Woo Blocks buttons (cart cross-sells, block grids) ---- */
.wp-block-button__link,
.wp-block-button__link.add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link{
  background-color:var(--katjo-dark)!important;
  background-image:none!important;
  color:#FFFFFF!important;
  border:1px solid var(--katjo-dark)!important;
  border-radius:0!important;
  font-family:"Jost",sans-serif!important;
  font-size:11px!important;
  font-weight:400!important;
  letter-spacing:2px!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  padding:13px 24px!important;
  line-height:1.3!important;
}
.wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover{
  background-color:var(--katjo-sage)!important;border-color:var(--katjo-sage)!important;color:#fff!important;}

/* block-grid product tiles line up */
.wc-block-grid__products{gap:clamp(14px,1.6vw,24px);}
.wc-block-grid__product{background:#FAF8F6;border:1px solid #ECE5DE;padding:0 0 20px;
  display:flex;flex-direction:column;}
.wc-block-grid__product-image img,
.wc-block-grid__product-image{width:100%;aspect-ratio:1/1.05;object-fit:cover;margin:0 0 14px;}
.wc-block-grid__product-title{
  font-family:"Jost",sans-serif!important;font-size:11.5px!important;letter-spacing:1.6px!important;
  text-transform:uppercase!important;color:var(--katjo-ink)!important;padding:0 14px;}
.wc-block-grid__product-price{
  font-family:"Jost",sans-serif!important;font-size:13.5px!important;font-weight:500!important;
  color:var(--katjo-ink)!important;padding:0 14px;margin-bottom:14px;}
.wc-block-grid__product-add-to-cart{margin-top:auto;padding:0 14px;}

/* ---- Glow Line editorial product cards ---- */
.katjo-glow-shot,
.katjo-glow-shot > .elementor-widget-container,
.katjo-glow-shot figure,
.katjo-glow-shot a{display:block;width:100%;margin:0;}
.katjo-glow-shot img{
  width:100%!important;max-width:none;aspect-ratio:1/1.16;object-fit:cover;display:block;}

/* =================================================================
   Full-bleed media columns. Elementor gives child containers a default
   10px padding, which inset every cover image from its band edge.
   ================================================================= */
.e-con:has(> .katjo-fill),
.e-con:has(> .katjo-cat-shot),
.e-con:has(> .katjo-strip){padding:0!important;}

/* fallback for engines without :has() - the media widget fills its cell */
.katjo-fill{margin:0!important;}
.katjo-fill > .elementor-widget-container{padding:0!important;}

/* single product gallery: clip the FlexSlider track */
.woocommerce div.product .woocommerce-product-gallery{overflow:hidden;}
.woocommerce div.product .woocommerce-product-gallery__wrapper{max-width:100%;}

/* ---- hero banners: image sits behind the copy ---- */
.katjo-hero{background-color:var(--katjo-cream);}
@media (max-width:767px){
  .katjo-hero{min-height:0!important;background-position:center center!important;}
}

/* hero copy sits in the scrimmed zone, never over the product */
.katjo-hero .e-con-inner{max-width:1360px;}

/* rows that carry a full-bleed media column must not keep Elementor's
   default 10px container padding, or the photo stops short of the edge */
.katjo-hero > .e-con,
.e-con:has(> .e-con > .katjo-fill){padding:0!important;}

/* =================================================================
   Home hero (4K composite background) + header fit on small screens
   ================================================================= */
.katjo-hero-home .katjo-hero-copy{max-width:540px;}
@media (max-width:1024px){
  .katjo-hero-home .katjo-hero-copy{max-width:420px;}
}

/* phones: the wordmark, hamburger and icons were colliding */
@media (max-width:767px){
  .katjo-header-row{column-gap:10px!important;
    padding-left:14px!important;padding-right:14px!important;}
  .katjo-header-row .katjo-wordmark{padding-left:0!important;padding-right:0!important;}
  .katjo-header-row .katjo-wordmark .elementor-heading-title{font-size:21px!important;}
  .katjo-header-row .katjo-wordmark > .e-con-inner > .elementor-widget:last-child
    .elementor-heading-title{font-size:7px!important;letter-spacing:2.6px!important;}
  .katjo-header-row .elementor-widget-icon .elementor-icon{font-size:15px!important;}
  .katjo-header-row > *:last-child{column-gap:12px!important;gap:12px!important;}
}
@media (max-width:400px){
  .katjo-header-row .katjo-wordmark .elementor-heading-title{font-size:18px!important;}
}

/* hero, phones: the photo is stacked under the copy on the backdrop.
   It is a mobile-only container background, not an <img>, so desktop
   browsers never download it. */
.katjo-hero-model-mobile{margin-top:46px;width:100%;}
@media (max-width:400px){
  .katjo-hero-model-mobile{min-height:290px!important;}
}

/* ---- newsletter: the plugin's "Email" label isn't in the mockup ---- */
.katjo-glow-form .tnp-field-email > label,
.katjo-tips-form .tnp-field-email > label,
.katjo-footer-news .tnp-field-email > label{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.katjo-glow-form .tnp,
.katjo-tips-form .tnp,
.katjo-footer-news .tnp{margin:0;}

/* ---- home: shop-by-category tiles are one photo each, label overlaid ---- */
.katjo-cat-tile{overflow:hidden;}
.katjo-cat-tile .elementor-heading-title{max-width:60%;}

/* ---- newsletter band: feather the vase shot into the cream ---- */
.katjo-news-col{background:#F6F1EE;}
.katjo-news-shot img{
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 54%,transparent 97%);
  mask-image:linear-gradient(90deg,#000 0%,#000 54%,transparent 97%);}

/* ---- blog cards on tablet: the 2-up grid squeezed the copy column so hard
   that headlines wrapped to six lines. Give the text the larger share. ---- */
@media (max-width:1024px){
  .katjo-blog-card > .e-con > .e-con:first-child{flex:0 0 64%!important;width:64%!important;}
  .katjo-blog-card > .e-con > .e-con:last-child{flex:0 0 36%!important;width:36%!important;}
  .katjo-blog-card .elementor-heading-title{font-size:16.5px!important;line-height:1.3!important;}
}

/* ---- about: "Our promise to you" band ---- */
.katjo-promise-shot img{
  width:100%;aspect-ratio:198/132;object-fit:cover;display:block;border-radius:4px;}
.katjo-promise-shot,
.katjo-promise-shot > .elementor-widget-container,
.katjo-promise-shot figure{display:block;width:100%;margin:0;}

/* ---- prime age defying cards: once the card stacks, the photo reverts to its
   native 16:9 and reads as a thin strip. Give it a portrait crop there. ---- */
@media (max-width:767px){
  .katjo-prime-shot img{aspect-ratio:1/0.82!important;height:auto!important;
    object-fit:cover;object-position:50% 45%;}
}

/* ---- editorial bands whose mockup crops the photo to a wide letterbox
   rather than letting it run at its native 16:9 ---- */
.katjo-ed-short img{
  aspect-ratio:2.05/1!important;height:auto!important;
  object-fit:cover;object-position:50% 50%;}
@media (max-width:767px){
  .katjo-ed-short img{aspect-ratio:16/10!important;}
}

/* =================================================================
   Shop All product cards - the mockup's 6-up bordered card.

   Two traps here: the IMAGE wrapper carries the same class as the title
   wrapper (.xpro-woo-product-grid-title-wrapper), so any order rule must be
   scoped to the content section or it reorders the photo; and the excerpt is
   .xpro-woo-product-grid-excerpt, not -content.
   ================================================================= */
.katjo-shop-grid .xpro-woo-product-grid-item .cbp-item-wrapper{
  background:#FCFAF8;border:1px solid #E9E1D9;text-align:center;height:100%;
  display:flex;flex-direction:column;}
.katjo-shop-grid .xpro-woo-product-grid-img img{
  width:100%;aspect-ratio:1/1.34;object-fit:cover;display:block;}
.katjo-shop-grid .xpro-woo-product-grid-content-sec{
  display:flex;flex-direction:column;padding:16px 12px 20px;gap:0;}
/* the excerpt's two spans join the card's flex order: NAME > sub > PRICE > size */
.katjo-shop-grid .xpro-woo-product-grid-excerpt{display:contents;}
.katjo-shop-grid .xpro-woo-product-grid-content-sec > .xpro-woo-product-grid-title-wrapper{order:1;}
.katjo-shop-grid .katjo-sub{order:2;}
.katjo-shop-grid .xpro-woo-product-grid-content-sec > .xpro-woo-product-grid-price-wrapper{order:3;}
.katjo-shop-grid .katjo-size{order:4;}
.katjo-shop-grid .xpro-woo-product-grid-title,
.katjo-shop-grid .xpro-woo-product-grid-title a{
  font-family:"Jost",sans-serif;font-size:11px;font-weight:500;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--katjo-ink);line-height:1.5;margin:0;}
.katjo-shop-grid .katjo-sub{
  display:block;font-family:"Jost",sans-serif;font-size:11.5px;font-weight:300;
  color:var(--katjo-ink-soft);line-height:1.5;margin:7px 0 0;}
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper,
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper .price{
  font-family:"Jost",sans-serif;font-size:13px;font-weight:600;
  color:var(--katjo-ink);margin:11px 0 0;display:block;}
.katjo-shop-grid .katjo-size{
  display:block;font-family:"Jost",sans-serif;font-size:10.5px;font-weight:300;
  color:var(--katjo-muted);line-height:1.5;margin:8px 0 0;}
@media (max-width:767px){
  .katjo-shop-grid .xpro-woo-product-grid-img img{aspect-ratio:1/1.1;}
}

/* one product is on sale, so its price block is two lines tall and Cube
   Portfolio's absolute layout left a hole in the row. Pin the price height. */
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper{min-height:20px;}
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper del,
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper ins{
  display:inline;text-decoration-color:var(--katjo-muted);}
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper ins{text-decoration:none;}
.katjo-shop-grid .katjo-sub{min-height:34px;}
.katjo-shop-grid .xpro-woo-product-grid-title{min-height:33px;
  display:flex;align-items:center;justify-content:center;}

/* ---- Tips & Advice newsletter: the mockup uses a bare underlined field ---- */
.katjo-tips-form .tnp-field-email > label{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.katjo-tips-form .tnp input[type=email]{
  border:0;border-bottom:1px solid #C9BFB4;background:transparent;
  padding:8px 0 10px;border-radius:0;font-size:13px;}
.katjo-tips-form .tnp input[type=email]:focus{outline:none;border-bottom-color:var(--katjo-ink);}
.katjo-tips-form .tnp input[type=submit]{
  background:transparent;color:var(--katjo-ink);border:0;border-bottom:1px solid #C9BFB4;
  padding:8px 0 10px;margin-left:18px;letter-spacing:1.6px;font-size:10px;}
.katjo-tips-form .tnp input[type=submit]:hover{
  background:transparent;color:var(--katjo-sage);border-bottom-color:var(--katjo-sage);}

/* the mockup labels the field "Email address"; the Newsletter plugin renders
   that as a <label>, so show it on this form instead of hiding it */
.katjo-tips-form .tnp-field-email > label{
  position:static!important;width:auto;height:auto;overflow:visible;
  clip:auto;clip-path:none;display:block;
  font-family:"Jost",sans-serif;font-size:11px;font-weight:300;
  color:var(--katjo-muted);letter-spacing:.4px;margin:0 0 2px;}
.katjo-tips-form .tnp form{align-items:flex-end;}
/* category + article cards: photo flush to the card border */
.katjo-cat-card-shot,
.katjo-cat-card-shot > .elementor-widget-container,
.katjo-cat-card-shot figure,
.katjo-cat-card-shot a,
.katjo-article-shot,
.katjo-article-shot > .elementor-widget-container,
.katjo-article-shot figure,
.katjo-article-shot a{display:block;width:100%;margin:0;line-height:0;}

/* ---- Tips & Advice newsletter: the floral shot was setting the band height
   (its native 16:9 at 400px wide = 225), leaving the copy in dead space.
   Cap its aspect and feather its left edge into the band. ---- */
.katjo-tips-news-shot img{
  aspect-ratio:2.1/1!important;height:auto!important;
  object-fit:cover;object-position:50% 45%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%);}

/* =================================================================
   Footer — supplied layout
   ================================================================= */
/* "Join our Glow Community" strip: sage submit, white field */
.katjo-footer-glow .tnp input[type=submit]{
  background:var(--katjo-sage-deep);border-color:var(--katjo-sage-deep);color:#fff;
  padding:13px 26px;}
.katjo-footer-glow .tnp input[type=submit]:hover{
  background:var(--katjo-sage);border-color:var(--katjo-sage);}
.katjo-footer-glow .tnp input[type=email]{
  border:1px solid #E2DAD2;background:#fff;padding:13px 16px;max-width:330px;}
.katjo-footer-glow .tnp form{gap:10px;align-items:center;}
.katjo-footer-glow .tnp-field-email{flex:0 1 330px;}

/* "Stay Connected": the underlined treatment read as an empty gap against
   the cream footer, so the field is a boxed white input with a solid
   arrow button beside it. */
.katjo-footer-news .tnp input[type=email]{
  border:1px solid #C9BFB4!important;border-radius:0;background:#fff!important;
  padding:11px 14px!important;font-size:12.5px;color:var(--katjo-ink);
  max-width:260px;box-shadow:0 1px 0 rgba(28,27,25,.04);}
.katjo-footer-news .tnp input[type=email]::placeholder{color:#8C837B;opacity:1;}
.katjo-footer-news .tnp input[type=email]:focus{
  outline:none;border-color:var(--katjo-ink)!important;
  box-shadow:0 0 0 2px rgba(137,146,119,.22);}
.katjo-footer-news .tnp input[type=submit]{
  background:var(--katjo-dark)!important;border:1px solid var(--katjo-dark)!important;
  color:#fff!important;padding:11px 0!important;margin-left:8px;
  font-size:15px;line-height:1;letter-spacing:0;min-width:44px;
  transition:background .25s ease,border-color .25s ease;}
.katjo-footer-news .tnp input[type=submit]:hover{
  background:var(--katjo-sage)!important;border-color:var(--katjo-sage)!important;
  color:#fff!important;}
.katjo-footer-news .tnp form{align-items:stretch;}
.katjo-footer-news .tnp-field-email{flex:0 1 260px;}

/* =================================================================
   FAQ accordion — the mockup prefixes each question with "Q." in its
   own column, with the +/- toggle at the far right.
   ================================================================= */
.katjo-faq-acc .e-n-accordion-item-title-header{display:flex;align-items:baseline;}
.katjo-faq-acc .e-n-accordion-item-title-header::before{
  content:"Q.";flex:0 0 46px;
  font-family:"Cormorant Garamond",serif;font-size:19px;font-weight:400;
  color:var(--katjo-ink);line-height:1.3;}
.katjo-faq-acc .e-n-accordion-item-title-text{font-weight:400;}
/* answers line up under the question, not under the "Q." */
.katjo-faq-acc details > .e-con{padding-left:46px!important;}
@media (max-width:600px){
  .katjo-faq-acc .e-n-accordion-item-title-header::before{flex-basis:30px;font-size:16px;}
  .katjo-faq-acc details > .e-con{padding-left:30px!important;}
}
/* the open answer sits in a bordered box by default; the mockup has none */
.katjo-faq-acc details > .e-con,
.katjo-faq-acc details > .e-con > .e-con-inner{
  border:0!important;background:transparent!important;box-shadow:none!important;}

/* disclaimers: the outlined icon circles use a light rule in the mockup;
   Elementor ties the border colour to the glyph colour for view:framed */
.elementor-119 .elementor-view-framed .elementor-icon{
  border-color:#D8CFC5!important;}

/* ---- home blog cards: the photo fades into the card instead of butting
   against the copy with a hard vertical edge ---- */
.katjo-blog-shot img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 46%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 46%,#000 100%);}
@media (max-width:767px){
  /* stacked on phones - a horizontal fade would cut the photo in half */
  .katjo-blog-shot img{-webkit-mask-image:none;mask-image:none;}
}
/* the about band's copy is white on sage, so keep it off the still-life */
.katjo-about-band .katjo-about-copy{max-width:600px;}


/* ---- announcement bar: message left, search field right ---- */
.katjo-announce .katjo-topsearch{display:flex;align-items:center;}
.katjo-announce .xpro-elementor-search-wrapper{width:auto;}
.katjo-announce .xpro-elementor-search-input-group{
  display:flex;align-items:center;gap:0;}
/* Xpro ships its own sizing for this input, so these need !important */
.katjo-announce .xpro-elementor-search-input-group input.field,
.katjo-announce input[type=search],
.katjo-announce input.field{
  font-family:"Jost",sans-serif;font-size:11px!important;font-weight:300;letter-spacing:.6px;
  width:210px!important;height:28px!important;min-height:0!important;
  padding:0 10px!important;border-radius:0!important;
  border:1px solid #DDD3C9!important;background:#fff!important;color:var(--katjo-ink)!important;}
.katjo-announce input[type=search]::placeholder,
.katjo-announce input.field::placeholder{color:var(--katjo-muted);opacity:1;}
.katjo-announce input[type=search]:focus,
.katjo-announce input.field:focus{outline:none;border-color:var(--katjo-ink);}
.katjo-announce .xpro-elementor-search-button{
  height:28px!important;min-height:0!important;min-width:34px;width:auto!important;
  padding:0 10px!important;border:0!important;
  background:var(--katjo-dark)!important;color:#fff!important;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s ease;}
.katjo-announce .xpro-elementor-search-button:hover{background:var(--katjo-sage)!important;}
.katjo-announce .xpro-elementor-search-button svg,
.katjo-announce .xpro-elementor-search-button i{
  width:13px;height:13px;font-size:13px;fill:#fff;color:#fff;}
@media (max-width:767px){
  .katjo-announce input[type=search],
  .katjo-announce input.field{width:150px;}
  .katjo-announce .elementor-widget-text-editor p{font-size:9.5px!important;letter-spacing:1.2px!important;}
}
/* keep the bar itself compact now the field is 28px */
.katjo-announce{min-height:0!important;}
.katjo-announce .elementor-widget-xpro-search{margin:0!important;}
.katjo-announce .xpro-elementor-search-wrapper,
.katjo-announce .xpro-elementor-search-inner,
.katjo-announce form{margin:0!important;}

/* ---- announcement bar: trim Elementor's default row padding so the
       bar hugs the 28px field ---- */
.katjo-announce > .e-con-inner > .elementor-element,
.katjo-announce .elementor-element > .e-con-inner > .elementor-element{padding-top:0!important;padding-bottom:0!important;}
.katjo-announce .elementor-widget-text-editor p{margin:0!important;}

/* =====================================================================
   SEARCH RESULTS
   Hello Elementor prints title -> thumbnail -> excerpt in a single column.
   Grid re-orders it into a card: art on the left, copy on the right. The
   :has() test keeps thumbnail-less results full width instead of leaving
   an empty column.
   ================================================================== */
.search-results .site-main .page-header{
  max-width:1240px;margin:0 auto 30px;padding:0 0 22px;
  border-bottom:1px solid var(--katjo-line);}
.search-results .site-main .page-header .entry-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;font-size:34px;
  line-height:1.2;color:var(--katjo-ink);margin:0;}
.search-results .site-main .page-header .entry-title span{font-style:italic;}

.search-results .page-content{display:flex;flex-direction:column;gap:0;}
.search-results .page-content article.post{
  display:grid;grid-template-columns:1fr;gap:8px;
  align-items:start;padding:26px 0;margin:0;
  border-bottom:1px solid var(--katjo-line);}
.search-results .page-content article.post:has(> a > img){
  grid-template-columns:180px 1fr;column-gap:28px;row-gap:8px;}
.search-results .page-content article.post:has(> a > img) > a:has(> img){
  grid-column:1;grid-row:1 / span 2;align-self:start;
  display:block;overflow:hidden;background:var(--katjo-tile);}
.search-results .page-content article.post:has(> a > img) > .entry-title{grid-column:2;grid-row:1;}
.search-results .page-content article.post:has(> a > img) > p{grid-column:2;grid-row:2;}
.search-results .page-content article.post > a > img{
  display:block;width:180px;height:135px;object-fit:cover;margin:0;
  transition:transform .5s ease;}
.search-results .page-content article.post:hover > a > img{transform:scale(1.04);}
.search-results .page-content article.post .entry-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;font-size:24px;
  line-height:1.25;margin:0;}
.search-results .page-content article.post .entry-title a{
  color:var(--katjo-ink);text-decoration:none;}
.search-results .page-content article.post .entry-title a:hover{color:var(--katjo-sage-deep);}
.search-results .page-content article.post p{
  font-family:"Jost",sans-serif;font-size:13.5px;font-weight:300;line-height:1.8;
  color:var(--katjo-ink-soft);margin:0;max-width:62ch;}
.search-results .page-content article.post p strong{font-weight:500;color:var(--katjo-ink);}
.search-results .page-content article.post p a{color:var(--katjo-ink-soft);}

.search-results .site-main .pagination{
  max-width:1240px;margin:34px auto 0;display:flex;justify-content:space-between;
  font-family:"Jost",sans-serif;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;}
.search-results .site-main .pagination a{color:var(--katjo-ink);text-decoration:none;}

@media (max-width:767px){
  .search-results .site-main .page-header .entry-title{font-size:26px;}
  .search-results .page-content article.post:has(> a > img){grid-template-columns:110px 1fr;column-gap:16px;}
  .search-results .page-content article.post > a > img{width:110px;height:88px;}
  .search-results .page-content article.post .entry-title{font-size:19px;}
  .search-results .page-content article.post p{font-size:12.5px;line-height:1.7;}
}
.katjo-footer-news .tnp-field-button{display:flex;}
.katjo-footer-news .tnp input[type=submit]{align-self:stretch;}

/* =====================================================================
   PRODUCT GALLERY
   FlexSlider lays the slides out as a horizontal track and sets the
   wrapper to width:400% inline. A theme rule clamped that back with
   "max-width:100%", so slide 2 wrapped onto a second row and the slide
   transform carried it off-screen - the gallery went blank on any image
   after the first.
   ================================================================== */
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{
  max-width:none!important;}

/* The secondary gallery shots are small (roughly 220-275px) while the
   lead shot is 2560px, so a shared box keeps the gallery from lurching
   in height and stops the small ones being upscaled into a blur. */
.woocommerce div.product .woocommerce-product-gallery__image > a > img,
.woocommerce div.product .woocommerce-product-gallery__image > img:not(.zoomImg){
  width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;
  background:var(--katjo-tile);display:block;}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img{
  aspect-ratio:1/1;object-fit:cover;background:var(--katjo-tile);}

/* =====================================================================
   CART - EMPTY STATE
   The block default is a 180px sad-face glyph followed by a lot of air.
   Replaced in the page markup with a heading, a line of copy and two
   CTAs; this sizes and spaces them.
   ================================================================== */
.woocommerce-cart .site-main{padding-top:52px!important;padding-bottom:64px!important;}
.woocommerce-cart .page-header{margin:0 auto 6px;text-align:center;}
.woocommerce-cart .page-header .entry-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;font-size:36px;
  color:var(--katjo-ink);margin:0;}

.wp-block-woocommerce-empty-cart-block{text-align:center;padding:14px 0 0;}
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before{display:none!important;}
.katjo-empty-title{
  font-family:"Cormorant Garamond",serif!important;font-weight:400!important;
  font-size:30px!important;line-height:1.2;color:var(--katjo-ink);
  margin:0 0 12px!important;}
.katjo-empty-sub{
  font-family:"Jost",sans-serif;font-weight:300;font-size:14px;line-height:1.8;
  color:var(--katjo-ink-soft);max-width:430px;margin:0 auto 26px!important;}

.katjo-empty-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 58px;}
.katjo-empty-actions .wp-block-button__link{
  font-family:"Jost",sans-serif;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  font-weight:400;padding:13px 34px;border-radius:0;
  background:var(--katjo-dark);color:#fff;border:1px solid var(--katjo-dark);
  transition:background .25s ease,color .25s ease;}
.katjo-empty-actions .wp-block-button__link:hover{background:transparent;color:var(--katjo-dark);}
.katjo-empty-actions .is-style-outline .wp-block-button__link{
  background:transparent;color:var(--katjo-ink);border:1px solid var(--katjo-line);}
.katjo-empty-actions .is-style-outline .wp-block-button__link:hover{
  border-color:var(--katjo-ink);background:transparent;}

.katjo-empty-newin{
  font-family:"Cormorant Garamond",serif!important;font-weight:400!important;
  font-size:24px!important;color:var(--katjo-ink);margin:0 0 4px!important;}
.katjo-empty-newin::after{
  content:"";display:block;width:38px;height:1px;background:var(--katjo-line);
  margin:16px auto 30px;}

/* the block grid wraps on flex-basis, which orphans the last tile on some
   widths - an explicit grid keeps the rows even */
.wc-block-grid__products{
  display:grid!important;grid-template-columns:repeat(4,1fr);gap:26px;
  list-style:none;margin:0!important;padding:0!important;}
.wc-block-grid__product{
  width:auto!important;max-width:none!important;flex:none!important;
  margin:0!important;padding:0!important;text-align:center;}
.wc-block-grid__product-link{display:block;text-decoration:none;}
.wc-block-grid__product-image{margin:0 0 16px;overflow:hidden;background:var(--katjo-tile);}
.wc-block-grid__product-image img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;margin:0;
  transition:transform .55s ease;}
.wc-block-grid__product:hover .wc-block-grid__product-image img{transform:scale(1.04);}
.wc-block-grid__product-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;font-size:19px;line-height:1.3;
  color:var(--katjo-ink);text-transform:none!important;text-decoration:none;margin:0 0 6px;}
.wc-block-grid__product-price{
  font-family:"Jost",sans-serif;font-weight:300;font-size:13px;color:var(--katjo-ink-soft);
  margin:0 0 14px;display:block;}
.wc-block-grid__product-price del{opacity:.55;margin-right:6px;}
.wc-block-grid__product-price ins{text-decoration:none;color:var(--katjo-ink);}
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  font-family:"Jost",sans-serif;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  font-weight:400;padding:11px 26px;border-radius:0;
  background:var(--katjo-dark);color:#fff;border:1px solid var(--katjo-dark);
  transition:background .25s ease,color .25s ease;}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover{
  background:transparent;color:var(--katjo-dark);}
/* sale badge is consolidated near the end of this file */

@media (max-width:1024px){.wc-block-grid__products{grid-template-columns:repeat(3,1fr);}}
@media (max-width:767px){
  .wc-block-grid__products{grid-template-columns:repeat(2,1fr);gap:18px;}
  .woocommerce-cart .site-main{padding-top:34px!important;}
  .katjo-empty-title{font-size:25px!important;}
  .katjo-empty-actions{flex-direction:column;align-items:center;margin-bottom:42px;}
  .katjo-empty-actions .wp-block-button{width:100%;max-width:280px;}
  .katjo-empty-actions .wp-block-button__link{display:block;}
}
/* core's block-library styles win on the outline variant, so force it */
.katjo-empty-actions .wp-block-button.is-style-outline > .wp-block-button__link{
  background:transparent!important;color:var(--katjo-ink)!important;
  border:1px solid var(--katjo-line)!important;}
.katjo-empty-actions .wp-block-button.is-style-outline > .wp-block-button__link:hover{
  border-color:var(--katjo-ink)!important;background:transparent!important;}
/* the whole tile is the link; the underline made every title look ruled */
.wc-block-grid__product-link,
.wc-block-grid__product-link:hover,
.wc-block-grid__product-link .wc-block-grid__product-title{text-decoration:none!important;}

/* ---- editorial bands: soften the hard vertical seam where the photo
   meets the copy. The image fades out over its left ~20% so the band
   colour reads through instead of a ruled edge. The mask is dropped on
   mobile, where the image stacks above the copy. ---- */
.katjo-ed-feather img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 12%,#000 30%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 12%,#000 30%,#000 100%);}
@media (max-width:767px){
  .katjo-ed-feather img{-webkit-mask-image:none;mask-image:none;}
}

/* ---- keep the top bar (and the search in it) pinned while scrolling ----
   Xpro already makes the header sticky; these restate it in our own sheet
   so the search survives a template that does not go through the theme
   builder, and so nothing downstream can drop the rule. */
header.xpro-theme-builder-header{
  position:sticky!important;top:0!important;z-index:200!important;}
header.xpro-theme-builder-header .katjo-announce{
  position:sticky;top:0;z-index:210;background:#F4EEE8;}
/* anchors must not land underneath the pinned bar */
html{scroll-padding-top:130px;}

/* the mobile header is rebuilt in one block at the end of this file */

/* =====================================================================
   BLOG - single posts and category archives
   These run on Hello Elementor's own templates, so they need the brand
   type and rhythm applied directly.
   ================================================================== */
.single-post .site-main,
.archive .site-main,
.blog .site-main{padding-top:56px!important;padding-bottom:70px!important;}

.single-post .site-main .page-header,
.archive .site-main .page-header{
  max-width:1000px;margin:0 auto 30px;padding:0 0 24px;
  border-bottom:1px solid var(--katjo-line);text-align:center;}
.single-post .entry-title,
.archive .page-header .entry-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:40px;line-height:1.16;color:var(--katjo-ink);margin:0;}
.archive .page-header .entry-title{font-size:32px;}
.archive .page-header .entry-title span,
.archive .page-header .archive-description{display:block;}
.archive .page-header .archive-description p{
  font-family:"Jost",sans-serif;font-weight:300;font-size:13.5px;
  color:var(--katjo-ink-soft);margin:12px 0 0;}

/* --- single post body --- */
.single-post .page-content{max-width:1000px;margin:0 auto;}
.single-post .page-content p{
  font-family:"Jost",sans-serif;font-weight:300;font-size:15px;line-height:1.9;
  color:var(--katjo-ink-soft);margin:0 0 22px;}
.single-post .page-content h2,
.single-post .page-content h3{
  font-family:"Cormorant Garamond",serif;font-weight:400;color:var(--katjo-ink);
  line-height:1.25;margin:38px 0 14px;}
.single-post .page-content h2{font-size:27px;}
.single-post .page-content h3{font-size:22px;}
.single-post .page-content strong{font-weight:500;color:var(--katjo-ink);}
.single-post .page-content ul,
.single-post .page-content ol{margin:0 0 22px;padding-left:22px;}
.single-post .page-content li{
  font-family:"Jost",sans-serif;font-weight:300;font-size:15px;line-height:1.85;
  color:var(--katjo-ink-soft);margin:0 0 9px;}
.single-post .katjo-post-hero img{
  display:block;width:100%;max-width:980px;height:auto;aspect-ratio:16/7;
  object-fit:cover;margin:0 auto 38px;background:var(--katjo-tile);}
.single-post .entry-meta,
.single-post .post-meta{
  font-family:"Jost",sans-serif;font-size:10.5px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--katjo-muted);text-align:center;margin:14px 0 0;}
.single-post .entry-meta a{color:var(--katjo-muted);text-decoration:none;}

/* --- category archive listing: art left, copy right, same as search --- */
.archive .page-content,
.blog .page-content{max-width:1240px;margin:0 auto;}
.archive .page-content article,
.blog .page-content article{
  display:grid;grid-template-columns:1fr;gap:8px;align-items:start;
  padding:28px 0;margin:0;border-bottom:1px solid var(--katjo-line);}
.archive .page-content article:has(img),
.blog .page-content article:has(img){grid-template-columns:210px 1fr;column-gap:30px;row-gap:8px;}
.archive .page-content article:has(img) > a:has(img),
.blog .page-content article:has(img) > a:has(img),
.archive .page-content article:has(img) > .post-thumbnail,
.blog .page-content article:has(img) > .post-thumbnail{
  grid-column:1;grid-row:1 / span 3;margin:0;overflow:hidden;background:var(--katjo-tile);}
.archive .page-content article img,
.blog .page-content article img{
  width:210px;height:150px;object-fit:cover;display:block;margin:0;
  transition:transform .5s ease;}
.archive .page-content article:hover img,
.blog .page-content article:hover img{transform:scale(1.04);}
.archive .page-content article:has(img) > :not(a):not(.post-thumbnail),
.blog .page-content article:has(img) > :not(a):not(.post-thumbnail){grid-column:2;}
.archive .page-content .entry-title,
.blog .page-content .entry-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;font-size:25px;
  line-height:1.25;margin:0;}
.archive .page-content .entry-title a,
.blog .page-content .entry-title a{color:var(--katjo-ink);text-decoration:none;}
.archive .page-content .entry-title a:hover,
.blog .page-content .entry-title a:hover{color:var(--katjo-sage-deep);}
.archive .page-content p,
.blog .page-content p{
  font-family:"Jost",sans-serif;font-weight:300;font-size:13.5px;line-height:1.8;
  color:var(--katjo-ink-soft);margin:0;max-width:62ch;}

.single-post .post-navigation,
.archive .pagination,
.blog .pagination{
  max-width:1240px;margin:36px auto 0;display:flex;justify-content:space-between;
  font-family:"Jost",sans-serif;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;}
.single-post .post-navigation a,
.archive .pagination a,
.blog .pagination a{color:var(--katjo-ink);text-decoration:none;}

@media (max-width:767px){
  .single-post .entry-title{font-size:28px;}
  .archive .page-header .entry-title{font-size:24px;}
  .single-post .entry-content p,.single-post .page-content li{font-size:14px;line-height:1.8;}
  .archive .page-content article:has(img),
  .blog .page-content article:has(img){grid-template-columns:110px 1fr;column-gap:16px;}
  .archive .page-content article img,
  .blog .page-content article img{width:110px;height:88px;}
  .archive .page-content .entry-title,.blog .page-content .entry-title{font-size:19px;}
}
/* meta line + hero image injected ahead of the post body */
.single-post .katjo-post-meta{
  font-family:"Jost",sans-serif;font-size:10.5px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--katjo-muted);text-align:center;
  margin:0 0 30px;}
.single-post .katjo-post-meta a{color:var(--katjo-muted);text-decoration:none;}
.single-post .katjo-post-meta a:hover{color:var(--katjo-ink);}
.single-post .katjo-post-hero{margin:0 0 38px;}
.single-post .katjo-post-hero img{
  display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;
  margin:0;background:var(--katjo-tile);}
.single-post .katjo-post-back{
  margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--katjo-line);
  font-family:"Jost",sans-serif;font-size:10.5px;letter-spacing:1.8px;
  text-transform:uppercase;text-align:center;}
.single-post .katjo-post-back a{color:var(--katjo-ink);text-decoration:none;}
.single-post .katjo-post-back a:hover{color:var(--katjo-sage-deep);}
/* comments are closed on the blog, but keep any stray form on-brand */
.single-post #comments,.single-post .comments-area{display:none;}

/* ---- archive header: kicker / name / count / sibling categories ---- */
.archive .site-main .page-header{
  max-width:1240px;margin:0 auto 34px;padding:0 0 26px;
  border-bottom:1px solid var(--katjo-line);text-align:center;}
.archive .site-main .page-header .entry-title{
  display:flex;flex-direction:column;align-items:center;gap:0;
  font-size:inherit;line-height:1;margin:0;}
.katjo-arch-kicker{
  font-family:"Jost",sans-serif;font-size:10px;font-weight:400;letter-spacing:3.2px;
  text-transform:uppercase;color:var(--katjo-muted);line-height:1;margin:0 0 16px;}
.katjo-arch-name{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(30px,4.2vw,48px);line-height:1.06;letter-spacing:.4px;
  color:var(--katjo-ink);margin:0;}
.katjo-arch-name::after{
  content:"";display:block;width:34px;height:1px;background:var(--katjo-line);
  margin:18px auto 0;}
.katjo-arch-count{
  font-family:"Jost",sans-serif;font-size:10.5px;font-weight:300;letter-spacing:2px;
  text-transform:uppercase;color:var(--katjo-muted);margin:14px 0 0;}

.archive .site-main .page-header .archive-description{margin:22px 0 0;}
.archive .site-main .page-header .archive-description p{margin:0 0 14px;}
.katjo-arch-pills{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 0;}
.katjo-arch-pill{
  font-family:"Jost",sans-serif;font-size:10px;font-weight:400;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--katjo-ink-soft);text-decoration:none;
  padding:8px 16px;border:1px solid var(--katjo-line);background:transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease;}
.katjo-arch-pill:hover{border-color:var(--katjo-ink);color:var(--katjo-ink);}
.katjo-arch-pill.is-current{
  background:var(--katjo-dark);border-color:var(--katjo-dark);color:#fff;}

@media (max-width:767px){
  .archive .site-main .page-header{margin-bottom:26px;padding-bottom:22px;}
  .katjo-arch-kicker{letter-spacing:2.4px;margin-bottom:12px;}
  .katjo-arch-pill{padding:7px 12px;letter-spacing:1.2px;}
}

/* ---- logged-in: clear the WordPress admin bar ----
   #wpadminbar is position:fixed at top:0, so a sticky header pinned to
   top:0 slides underneath it and the admin bar covers the announcement
   bar - which is why the search vanished on scroll while logged in.
   The bar is 32px above 782px wide, 46px below it, and switches to
   position:absolute (scrolls away) at 600px and under. */
body.admin-bar header.xpro-theme-builder-header{top:32px!important;}
body.admin-bar{--katjo-adminbar:32px;}
html:has(body.admin-bar){scroll-padding-top:162px;}
@media screen and (max-width:782px){
  body.admin-bar header.xpro-theme-builder-header{top:46px!important;}
  body.admin-bar{--katjo-adminbar:46px;}
  html:has(body.admin-bar){scroll-padding-top:146px;}
}
@media screen and (max-width:600px){
  body.admin-bar header.xpro-theme-builder-header{top:0!important;}
  body.admin-bar{--katjo-adminbar:0px;}
  html:has(body.admin-bar){scroll-padding-top:100px;}
}
/* wider column needs slightly bigger type so the measure stays readable,
   and the shell's 60px gutter can come in on these templates */
.single-post .site-main,
.archive .site-main,
.blog .site-main{padding-left:40px!important;padding-right:40px!important;}
.single-post .page-content p,
.single-post .page-content li{font-size:18px;line-height:1.85;}
.single-post .page-content h2{font-size:29px;}
.single-post .page-content h3{font-size:23px;}
/* the article cards can use the extra width for a larger thumbnail */
.archive .page-content article:has(img),
.blog .page-content article:has(img){grid-template-columns:280px 1fr;column-gap:36px;}
.archive .page-content article img,
.blog .page-content article img{width:280px;height:196px;}
.archive .page-content p,
.blog .page-content p{max-width:none;}
@media (max-width:900px){
  .single-post .site-main,.archive .site-main,.blog .site-main{
    padding-left:24px!important;padding-right:24px!important;}
}
@media (max-width:767px){
  .archive .page-content article:has(img),
  .blog .page-content article:has(img){grid-template-columns:110px 1fr;column-gap:16px;}
  .archive .page-content article img,
  .blog .page-content article img{width:110px;height:88px;}
  .single-post .page-content p,.single-post .page-content li{font-size:14px;line-height:1.8;}
}

/* =====================================================================
   SALE BADGE
   Three different markups ship one badge between them:
     Xpro grids  .xpro-sale-flash-wrap > span.xpro-onsale
     Woo loop    span.onsale
     Block grid  .wc-block-grid__product-onsale > span
   Xpro's wrapper carried a white background AND padding while the coral
   sat on the inline span inside it, so the badge read as a white box
   with a coral word floating in it. The wrapper is now inert and the
   span is the whole chip; the other two are matched to it.
   ================================================================== */
.xpro-sale-flash-wrap,
.xpro-woo-product-grid-badges-wrapper,
.xpro-woo-product-grid-badges-innner-wrapper{
  background:transparent!important;padding:0!important;border:0!important;
  box-shadow:none!important;border-radius:0!important;}

.xpro-sale-flash-wrap span.xpro-onsale,
.xpro-woo-product-grid-badges-wrapper .onsale,
.xpro-woo-product-grid-badges-innner-wrapper span,
.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale{
  display:inline-block!important;
  background:var(--katjo-coral)!important;
  color:#fff!important;
  border:0!important;
  border-radius:0!important;
  font-family:"Jost",sans-serif!important;
  font-size:9.5px!important;
  font-weight:500!important;
  letter-spacing:2.1px!important;
  text-transform:uppercase!important;
  line-height:1!important;
  padding:8px 13px 7px!important;
  margin:0!important;
  min-height:0!important;min-width:0!important;
  width:auto!important;height:auto!important;
  text-align:center!important;
  white-space:nowrap;
  box-shadow:0 2px 10px rgba(28,27,25,.16)!important;
  transition:background .25s ease;}

/* the block grid nests the word in a span - keep the chip on the parent */
.wc-block-grid__product-onsale > span{
  background:transparent!important;color:inherit!important;
  font:inherit!important;letter-spacing:inherit!important;padding:0!important;}
.wc-block-grid__product-onsale .screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* sit it in the top-left corner of the art, clear of the frame */
.wc-block-grid__product-onsale{top:12px!important;left:12px!important;right:auto!important;}
.woocommerce ul.products li.product span.onsale{
  position:absolute;top:12px;left:12px;right:auto;margin:0;z-index:3;}
.xpro-woo-product-grid-badges-wrapper{z-index:3;}

/* a touch darker on hover so it tracks the card */
.xpro-woo-product-grid-item:hover .xpro-sale-flash-wrap span.xpro-onsale,
.wc-block-grid__product:hover .wc-block-grid__product-onsale,
.woocommerce ul.products li.product:hover span.onsale{
  background:var(--katjo-coral-deep)!important;}
/* belt and braces: these thumbnails set their own box, so nothing
   upstream should be constraining them */
.archive .page-content article img,
.blog .page-content article img,
.search-results .page-content article.post > a > img{
  max-width:none!important;aspect-ratio:auto!important;}

/* ---- product cards: close the gaps under the art ----
   The card inherits a 27px line-height from the widget, so every wrapper
   was taller than its own text - the price row measured 38px to hold a
   19px price. Reset that, then trim the stacked margins. */
.xpro-woo-product-grid-item .cbp-item-wrapper,
.xpro-woo-product-grid-content-sec,
.xpro-woo-product-grid-content-sec a,
.xpro-woo-product-grid-title-wrapper,
.xpro-woo-product-grid-price-wrapper{line-height:1.4!important;}

.katjo-shop-grid .xpro-woo-product-grid-content-sec{padding:13px 12px 15px!important;}
.katjo-shop-grid .xpro-woo-product-grid-title,
.katjo-shop-grid .xpro-woo-product-grid-title a{line-height:1.35!important;}
.katjo-shop-grid .xpro-woo-product-grid-title{min-height:30px;}
.katjo-shop-grid .katjo-sub{margin:4px 0 0!important;line-height:1.45!important;min-height:32px;}
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper,
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper .price{
  margin:7px 0 0!important;line-height:1.3!important;}
.katjo-shop-grid .katjo-size{margin:4px 0 0!important;line-height:1.4!important;}

/* the same trim for the grids on the collection pages */
.xpro-woo-product-grid-content-sec{padding:13px 12px 15px;}
.xpro-woo-product-grid-title{margin:0 0 4px!important;}
.xpro-woo-product-grid-price-wrapper{margin-top:6px!important;}
.xpro-woo-product-grid-excerpt{margin:0 0 6px!important;}

/* ---- refer a friend panel ---- */
.katjo-raf-gate,
.katjo-raf-panel{
  background:var(--katjo-tile);border:1px solid var(--katjo-line);
  padding:30px 32px;text-align:left;}
.katjo-raf-gate p,
.katjo-raf-panel p{
  font-family:"Jost",sans-serif;font-weight:300;font-size:13.5px;line-height:1.8;
  color:var(--katjo-ink-soft);margin:0 0 16px;}
.katjo-raf-gate p:last-child,
.katjo-raf-panel p:last-child{margin-bottom:0;}
.katjo-raf-btn{
  display:inline-block;background:var(--katjo-dark);color:#fff!important;
  font-family:"Jost",sans-serif;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  padding:13px 30px;text-decoration:none;border:1px solid var(--katjo-dark);
  transition:background .25s ease,color .25s ease;}
.katjo-raf-btn:hover{background:transparent;color:var(--katjo-dark)!important;}
.katjo-raf-panel input[type=text],
.katjo-raf-panel input[type=url]{
  width:100%;border:1px solid #C9BFB4;background:#fff;border-radius:0;
  font-family:"Jost",sans-serif;font-size:12.5px;color:var(--katjo-ink);padding:11px 14px;}
.katjo-raf-panel .gens-raf-wrapper h2,
.katjo-raf-panel h2,.katjo-raf-panel h3{
  font-family:"Cormorant Garamond",serif;font-weight:400;font-size:22px;
  color:var(--katjo-ink);margin:0 0 12px;}
.katjo-raf-panel table{width:100%;border-collapse:collapse;font-family:"Jost",sans-serif;font-size:12.5px;}
.katjo-raf-panel th,.katjo-raf-panel td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--katjo-line);
  font-weight:300;color:var(--katjo-ink-soft);}
.katjo-raf-panel th{
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:400;color:var(--katjo-ink);}

/* ---- product cards, second pass: tighter still ----
   Most of the remaining air was the min-heights that keep the price row
   aligned when a name or subtitle wraps to two lines. They are trimmed to
   just what two lines need, and the margins come down with them. */
.katjo-shop-grid .xpro-woo-product-grid-content-sec{padding:11px 12px 12px!important;}
.katjo-shop-grid .xpro-woo-product-grid-title,
.katjo-shop-grid .xpro-woo-product-grid-title a{line-height:1.25!important;}
.katjo-shop-grid .xpro-woo-product-grid-title{min-height:26px;}
.katjo-shop-grid .katjo-sub{
  margin:2px 0 0!important;line-height:1.35!important;min-height:28px;}
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper,
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper .price{
  margin:3px 0 0!important;line-height:1.2!important;}
.katjo-shop-grid .katjo-size{margin:1px 0 0!important;line-height:1.35!important;}

/* =====================================================================
   HOME - BEST SELLERS
   Was three bare images with centred text floating on the band, so the
   section had no edges. Each product is now a framed card: art flush to
   the top, a ruled body underneath, and the whole thing lifts on hover.
   ================================================================== */
.katjo-bs-band .katjo-bs-head{
  padding-bottom:16px;border-bottom:1px solid var(--katjo-line);}

.katjo-bs-card{
  background:#FFFFFF;
  border:1px solid #EAE2DA;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.katjo-bs-card:hover{
  transform:translateY(-4px);
  border-color:#DCD2C7;
  box-shadow:0 14px 34px rgba(28,27,25,.10);}

/* art fills the card's top edge to edge, taller crop than the old strip */
.katjo-bs-media{overflow:hidden;background:var(--katjo-tile);}
.katjo-bs-band .katjo-bs-shot img{
  width:100%!important;max-width:none;
  aspect-ratio:1/0.86!important;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.katjo-bs-card:hover .katjo-bs-shot img{transform:scale(1.05);}

.katjo-bs-body{background:#FFFFFF;}
/* a hairline above the price separates identity from commerce */
.katjo-bs-price{
  padding-top:14px;margin-top:14px!important;
  border-top:1px solid var(--katjo-line);}
.katjo-bs-price p{font-variant-numeric:tabular-nums;}

.katjo-bs-cta a{
  display:inline-block;text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid transparent;transition:border-color .25s ease,color .25s ease;}
.katjo-bs-card:hover .katjo-bs-cta a{
  border-bottom-color:var(--katjo-ink);color:var(--katjo-ink);}

@media (max-width:1024px){
  .katjo-bs-band .katjo-bs-shot img{aspect-ratio:1/0.92!important;}
}
@media (max-width:767px){
  .katjo-bs-band .katjo-bs-shot img{aspect-ratio:1/0.72!important;}
  .katjo-bs-card:hover{transform:none;box-shadow:none;}
}

/* =====================================================================
   SHOP ARCHIVE
   ul.products was capped at 1240px inside a 1403px content box AND laid
   out with floats, so the row could not fill the width - hence the gap
   down the right. It is a grid now, spanning the full box, with the same
   card treatment as the home page best sellers.
   ================================================================== */
.woocommerce main.site-main > *,
.woocommerce main.site-main .woocommerce,
.woocommerce main.site-main > ul.products,
.woocommerce main.site-main > .woocommerce-products-header,
.single-product main.site-main > div.product{max-width:none!important;}

/* ---- header + toolbar ---- */
.woocommerce .woocommerce-products-header{margin:0 0 6px;}
.woocommerce .woocommerce-products-header__title{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(30px,3.4vw,42px);line-height:1.1;color:var(--katjo-ink);margin:0;}
.katjo-shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:0 0 16px;margin:0 0 28px;
  border-bottom:1px solid var(--katjo-line);}
.woocommerce .katjo-shop-toolbar .woocommerce-result-count{
  float:none;margin:0;font-family:"Jost",sans-serif;font-size:11px;font-weight:300;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--katjo-muted);}
.woocommerce .katjo-shop-toolbar .woocommerce-ordering{float:none;margin:0;}
.woocommerce .katjo-shop-toolbar select.orderby{
  font-family:"Jost",sans-serif;font-size:11px;font-weight:400;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--katjo-ink);
  background:#fff;border:1px solid var(--katjo-line);border-radius:0;
  padding:10px 34px 10px 14px;height:auto;line-height:1.2;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231C1B19' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:10px;}
.woocommerce .katjo-shop-toolbar select.orderby:focus{outline:none;border-color:var(--katjo-ink);}

/* ---- the grid ---- */
.woocommerce ul.products{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  gap:26px!important;margin:0!important;padding:0!important;list-style:none;}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none!important;display:none!important;}

/* ---- the card ---- */
.woocommerce ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;clear:none!important;
  display:flex;flex-direction:column;position:relative;
  background:#FFFFFF;border:1px solid #EAE2DA;padding:0 0 22px;text-align:center;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);border-color:#DCD2C7;
  box-shadow:0 14px 34px rgba(28,27,25,.10);}

/* the link holds image + title + price, so it stays a plain block; the
   crop and the tile colour belong to the media wrapper alone */
.woocommerce ul.products li.product > a.woocommerce-loop-product__link{
  display:block;overflow:visible;background:transparent;margin:0;}
.woocommerce ul.products li.product .katjo-loop-media{
  display:block;position:relative;overflow:hidden;
  background:var(--katjo-tile);margin:0 0 18px;}
.woocommerce ul.products li.product .katjo-loop-media img{
  width:100%;aspect-ratio:1/0.94;object-fit:cover;margin:0!important;display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.woocommerce ul.products li.product:hover .katjo-loop-media img{transform:scale(1.05);}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:"Jost",sans-serif;font-size:12.5px;font-weight:500;letter-spacing:1.9px;
  text-transform:uppercase;color:var(--katjo-ink);line-height:1.45;
  padding:0 18px;margin:0 0 10px;min-height:36px;}
.woocommerce ul.products li.product .star-rating{
  margin:0 auto 10px;font-size:12px;color:var(--katjo-coral);}
.woocommerce ul.products li.product .price{
  font-family:"Jost",sans-serif;font-size:17px;font-weight:500;color:var(--katjo-ink);
  padding:14px 18px 0;margin:0 18px 16px;
  border-top:1px solid var(--katjo-line);}
.woocommerce ul.products li.product .price del{
  color:var(--katjo-muted)!important;opacity:1;margin-right:7px;font-weight:300;}
.woocommerce ul.products li.product .price ins{text-decoration:none;}
.woocommerce ul.products li.product .button{
  margin:auto 18px 0;align-self:stretch;
  font-family:"Jost",sans-serif;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  padding:13px 18px;border-radius:0;
  background:var(--katjo-dark);color:#fff;border:1px solid var(--katjo-dark);
  transition:background .25s ease,color .25s ease;}
.woocommerce ul.products li.product .button:hover{
  background:transparent;color:var(--katjo-dark);}
.woocommerce ul.products li.product .added_to_cart{
  margin:8px 18px 0;font-family:"Jost",sans-serif;font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--katjo-muted);}

/* related / upsell rows use the same grid at 4 up */
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products{grid-template-columns:repeat(4,1fr)!important;}

.woocommerce nav.woocommerce-pagination{margin-top:36px;}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:6px;justify-content:center;}
.woocommerce nav.woocommerce-pagination ul li{border:0;}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  font-family:"Jost",sans-serif;font-size:11.5px;letter-spacing:1.2px;
  border:1px solid var(--katjo-line);padding:9px 14px;color:var(--katjo-ink);}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--katjo-dark);border-color:var(--katjo-dark);color:#fff;}

@media (max-width:1024px){
  .woocommerce ul.products,
  .woocommerce .related ul.products,
  .woocommerce .up-sells ul.products{grid-template-columns:repeat(3,1fr)!important;}
}
@media (max-width:767px){
  .woocommerce ul.products,
  .woocommerce .related ul.products,
  .woocommerce .up-sells ul.products{grid-template-columns:repeat(2,1fr)!important;gap:16px!important;}
  .woocommerce ul.products li.product{padding-bottom:16px;}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:11px;letter-spacing:1.4px;padding:0 12px;min-height:32px;}
  .woocommerce ul.products li.product .price{font-size:15px;padding:12px 12px 0;margin:0 12px 12px;}
  .woocommerce ul.products li.product .button{margin:auto 12px 0;padding:11px 10px;font-size:9.5px;letter-spacing:1.4px;}
  .woocommerce ul.products li.product:hover{transform:none;box-shadow:none;}
  .katjo-shop-toolbar{gap:12px;}
}
/* badge shares priority 10 with the thumbnail, so it lands in the wrapper */
.woocommerce ul.products li.product .katjo-loop-media span.onsale{
  position:absolute;top:12px;left:12px;right:auto;margin:0;z-index:3;}
/* give the name room now that it is clear of the art */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding:0 18px;margin:0 0 12px;}

/* =====================================================================
   PRODUCT CARD - ONE SPEC, FOUR IMPLEMENTATIONS
   The site renders products four different ways depending on where you
   are, and each had drifted its own look:
     .katjo-bs-card            home best sellers (hand-built Elementor)
     .xpro-woo-product-grid-item   shop all + the collection pages
     li.product                WooCommerce loop (/shop/, related)
     .wc-block-grid__product   Woo block grid (cart cross-sells)
   Everything below is the shared card. Anything above that conflicts is
   superseded here.
   ------------------------------------------------------------------
   frame      white, 1px #EAE2DA, square corners
   art        flush to the top, 1:1.1, cover, tile ground, 1.05 on hover
   name       Jost 12.5 / 500 / 1.9px tracking / uppercase
   price      17px / 500, above it a hairline rule
   hover      lift 4px + soft shadow
   ================================================================== */

/* ---- frame ---- */
.katjo-bs-card,
.katjo-shop-grid .xpro-woo-product-grid-item .cbp-item-wrapper,
.woocommerce ul.products li.product,
.wc-block-grid__product{
  background:#FFFFFF!important;
  border:1px solid #EAE2DA!important;
  border-radius:0!important;
  overflow:hidden;
  display:flex!important;flex-direction:column!important;
  text-align:center;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.katjo-bs-card:hover,
.katjo-shop-grid .xpro-woo-product-grid-item:hover .cbp-item-wrapper,
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover{
  transform:translateY(-4px);
  border-color:#DCD2C7!important;
  box-shadow:0 14px 34px rgba(28,27,25,.10);}

/* ---- art ---- */
.katjo-bs-media,
.katjo-shop-grid .xpro-woo-product-grid-img,
.woocommerce ul.products li.product .katjo-loop-media,
.wc-block-grid__product-image{
  display:block;position:relative;overflow:hidden;
  background:var(--katjo-tile);margin:0!important;}
.katjo-bs-band .katjo-bs-shot img,
.katjo-shop-grid .xpro-woo-product-grid-img img,
.woocommerce ul.products li.product .katjo-loop-media img,
.wc-block-grid__product-image img{
  width:100%!important;max-width:none;height:auto;
  aspect-ratio:1/1.1!important;object-fit:cover;display:block;margin:0!important;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.katjo-bs-card:hover .katjo-bs-shot img,
.katjo-shop-grid .xpro-woo-product-grid-item:hover .xpro-woo-product-grid-img img,
.woocommerce ul.products li.product:hover .katjo-loop-media img,
.wc-block-grid__product:hover .wc-block-grid__product-image img{transform:scale(1.05);}

/* ---- body ---- */
.katjo-bs-body,
.katjo-shop-grid .xpro-woo-product-grid-content-sec,
.wc-block-grid__product > :not(.wc-block-grid__product-image){padding-left:18px;padding-right:18px;}
.katjo-bs-body,
.katjo-shop-grid .xpro-woo-product-grid-content-sec{
  background:#FFFFFF!important;padding-top:18px!important;padding-bottom:20px!important;}
.woocommerce ul.products li.product{padding:0 0 20px!important;}
.wc-block-grid__product{padding:0 0 20px!important;}

/* ---- name ---- */
.katjo-bs-body .elementor-heading-title,
.katjo-shop-grid .xpro-woo-product-grid-title,
.katjo-shop-grid .xpro-woo-product-grid-title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title{
  font-family:"Jost",sans-serif!important;font-size:12.5px!important;font-weight:500!important;
  letter-spacing:1.9px!important;text-transform:uppercase!important;
  color:var(--katjo-ink)!important;line-height:1.4!important;
  margin:0 0 8px!important;}
.wc-block-grid__product-title{padding-top:18px;}

/* ---- optional subtitle ---- */
.katjo-shop-grid .katjo-sub,
.katjo-bs-body .elementor-widget-text-editor:not(.katjo-bs-price):not(.katjo-bs-cta) p{
  font-family:"Jost",sans-serif!important;font-size:13px!important;font-weight:300!important;
  color:var(--katjo-ink-soft)!important;line-height:1.45!important;}

/* ---- price, under a hairline ---- */
.katjo-bs-price,
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper,
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price{
  border-top:1px solid var(--katjo-line)!important;
  padding-top:13px!important;margin:12px 18px 0!important;
  font-family:"Jost",sans-serif!important;font-size:17px!important;font-weight:500!important;
  color:var(--katjo-ink)!important;line-height:1.3!important;display:block!important;}
.katjo-bs-price p{font-size:17px!important;font-weight:500!important;margin:0!important;}
.katjo-bs-price{padding-left:0!important;padding-right:0!important;margin:12px 0 0!important;}
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper{margin-left:0!important;margin-right:0!important;}
.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del,
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper del{
  color:var(--katjo-muted)!important;opacity:1;font-weight:300;margin-right:7px;}
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product-price ins,
.katjo-shop-grid .xpro-woo-product-grid-price-wrapper ins{text-decoration:none;}

/* ---- size / volume line, where the card carries one ---- */
.katjo-shop-grid .katjo-size{
  font-family:"Jost",sans-serif!important;font-size:11px!important;font-weight:300!important;
  color:var(--katjo-muted)!important;margin:5px 0 0!important;}

/* ---- call to action pinned to the foot ---- */
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  margin:auto 18px 0!important;align-self:stretch;display:block;
  font-family:"Jost",sans-serif!important;font-size:10.5px!important;letter-spacing:2px!important;
  text-transform:uppercase;font-weight:400;padding:13px 16px!important;border-radius:0!important;
  background:var(--katjo-dark)!important;color:#fff!important;
  border:1px solid var(--katjo-dark)!important;
  transition:background .25s ease,color .25s ease;}
.woocommerce ul.products li.product .button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover{
  background:transparent!important;color:var(--katjo-dark)!important;}
.katjo-bs-cta{margin-top:16px!important;}

/* ---- badge, same corner everywhere ---- */
.katjo-shop-grid .xpro-woo-product-grid-badges-wrapper,
.woocommerce ul.products li.product .katjo-loop-media span.onsale,
.wc-block-grid__product-onsale{top:12px!important;left:12px!important;right:auto!important;}

@media (max-width:767px){
  .katjo-bs-card:hover,
  .katjo-shop-grid .xpro-woo-product-grid-item:hover .cbp-item-wrapper,
  .woocommerce ul.products li.product:hover,
  .wc-block-grid__product:hover{transform:none;box-shadow:none;}
  .katjo-bs-body,
  .katjo-shop-grid .xpro-woo-product-grid-content-sec{padding-left:14px!important;padding-right:14px!important;}
  .katjo-bs-price,
  .katjo-shop-grid .xpro-woo-product-grid-price-wrapper,
  .woocommerce ul.products li.product .price,
  .wc-block-grid__product-price{font-size:15px!important;margin-left:14px!important;margin-right:14px!important;}
  .woocommerce ul.products li.product .button,
  .wc-block-grid__product-add-to-cart .wp-block-button__link{margin-left:14px!important;margin-right:14px!important;}
}
/* the Woo loop has no body wrapper - the name sits straight after the
   art, so it carries the body's top padding itself */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding-top:18px!important;}
/* an earlier widget-scoped rule (.elementor-widget-xpro-woo-product-grid
   h2.xpro-woo-product-grid-title) is also !important and one element more
   specific, so it outranked the shared name rule. Match its shape. */
.elementor-widget-xpro-woo-product-grid h2.xpro-woo-product-grid-title,
.elementor-widget-xpro-woo-product-grid h3.xpro-woo-product-grid-title,
.elementor-widget-xpro-woo-product-grid h2.xpro-woo-product-grid-title a,
.xpro-woo-product-grid .xpro-woo-product-grid-title,
.xpro-woo-product-grid .xpro-woo-product-grid-title a{
  font-size:12.5px!important;font-weight:500!important;
  letter-spacing:1.9px!important;line-height:1.4!important;margin:0 0 8px!important;}
/* Xpro emits two images per card - the second is the hover swap and must
   sit ON the first. Both were in flow, so the media box was twice the
   height of the photo and left a gap above the text. */
.xpro-woo-product-img-section{position:relative;display:block;}
.xpro-woo-product-img-section img.xpro-gallery-second-img-url{
  position:absolute!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;aspect-ratio:auto!important;
  object-fit:cover;margin:0!important;
  opacity:0;transition:opacity .45s ease;}
.xpro-woo-product-grid-item:hover .xpro-gallery-second-img-url{opacity:1;}
.xpro-woo-product-img-section img.xpro-gallery-first-img-url{position:relative;z-index:1;}
.xpro-woo-product-grid-item:hover .xpro-gallery-first-img-url{opacity:0;transition:opacity .45s ease;}

/* ---- Woo loop card: match the Shop All rhythm exactly ----
   Shop All measures 18px body pad / 10px name-to-subtitle / 12px to the
   rule / 13px rule-to-price / 5px price-to-size. Same numbers here, with
   the button taking the place of Shop All's trailing space. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding:18px 18px 0!important;margin:0 0 10px!important;min-height:0!important;}
.woocommerce ul.products li.product .katjo-sub{
  display:block;padding:0 18px;margin:0!important;
  font-family:"Jost",sans-serif!important;font-size:13px!important;font-weight:300!important;
  color:var(--katjo-ink-soft)!important;line-height:1.45!important;min-height:38px;}
.woocommerce ul.products li.product .price{
  padding:13px 18px 0!important;margin:12px 18px 0!important;}
.woocommerce ul.products li.product .katjo-size{
  display:block;padding:0 18px;margin:5px 0 0!important;
  font-family:"Jost",sans-serif!important;font-size:11px!important;font-weight:300!important;
  color:var(--katjo-muted)!important;line-height:1.4!important;}
.woocommerce ul.products li.product .button{margin:18px 18px 0!important;}
.woocommerce ul.products li.product{padding:0 0 18px!important;}
.woocommerce ul.products li.product .star-rating{display:none!important;}

@media (max-width:767px){
  .woocommerce ul.products li.product .woocommerce-loop-product__title{padding:14px 14px 0!important;}
  .woocommerce ul.products li.product .katjo-sub,
  .woocommerce ul.products li.product .katjo-size{padding:0 14px;}
  .woocommerce ul.products li.product .price{padding:12px 14px 0!important;margin:10px 14px 0!important;}
  .woocommerce ul.products li.product .button{margin:14px 14px 0!important;}
}

/* =====================================================================
   ASSISTANT WIDGET
   Floating launcher bottom-right, panel above it. Kept in the brand's
   square-cornered, cream-and-ink language rather than the usual rounded
   blue chat bubble.
   ================================================================== */
.katjo-chat{position:fixed;right:22px;bottom:22px;z-index:9500;
  font-family:"Jost",sans-serif;display:flex;flex-direction:column;align-items:flex-end;gap:12px;}

.katjo-chat-launch{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--katjo-dark);color:#fff;border:1px solid var(--katjo-dark);
  font-family:"Jost",sans-serif;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  padding:13px 20px;border-radius:0;cursor:pointer;
  box-shadow:0 10px 28px rgba(28,27,25,.22);
  transition:background .25s ease,transform .25s ease;}
.katjo-chat-launch:hover{background:var(--katjo-sage-deep);border-color:var(--katjo-sage-deep);transform:translateY(-2px);}
.katjo-chat-launch svg{flex:0 0 auto;}

.katjo-chat-panel{
  width:min(376px,calc(100vw - 32px));height:min(560px,calc(100vh - 140px));
  background:#fff;border:1px solid #E4DCD4;
  box-shadow:0 22px 60px rgba(28,27,25,.22);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.985);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;}
.katjo-chat-panel.is-open{opacity:1;visibility:visible;transform:none;}

.katjo-chat-head{
  display:flex;align-items:center;gap:8px;padding:15px 14px 15px 18px;
  background:var(--katjo-dark);color:#fff;flex:0 0 auto;}
.katjo-chat-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.katjo-chat-title strong{
  font-family:"Cormorant Garamond",serif;font-weight:400;font-size:17px;letter-spacing:.3px;}
.katjo-chat-title span{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;opacity:.62;}
.katjo-chat-icon{
  background:transparent;border:0;color:#fff;opacity:.7;cursor:pointer;
  font-size:17px;line-height:1;width:26px;height:26px;border-radius:0;
  transition:opacity .2s ease;}
.katjo-chat-icon:hover{opacity:1;}

.katjo-chat-body{
  flex:1;overflow-y:auto;padding:18px 16px 6px;background:var(--katjo-cream);
  display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;}

.katjo-chat-row{display:flex;}
.katjo-chat-row.is-user{justify-content:flex-end;}
.katjo-chat-bubble{
  max-width:84%;padding:11px 14px;font-size:13.5px;font-weight:300;line-height:1.65;
  background:#fff;border:1px solid #EAE2DA;color:var(--katjo-ink-soft);}
.katjo-chat-row.is-user .katjo-chat-bubble{
  background:var(--katjo-dark);border-color:var(--katjo-dark);color:#fff;font-weight:300;}

.katjo-chat-typing{display:flex;gap:4px;align-items:center;padding:14px;}
.katjo-chat-typing span{
  width:5px;height:5px;border-radius:50%;background:var(--katjo-muted);
  animation:katjoChatDot 1.1s infinite ease-in-out;}
.katjo-chat-typing span:nth-child(2){animation-delay:.15s;}
.katjo-chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes katjoChatDot{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}

.katjo-chat-cards{display:flex;flex-direction:column;gap:8px;}
.katjo-chat-card{
  display:flex;gap:12px;background:#fff;border:1px solid #EAE2DA;padding:10px;}
.katjo-chat-card-art{flex:0 0 68px;display:block;overflow:hidden;background:var(--katjo-tile);}
.katjo-chat-card-art img{width:68px;height:75px;object-fit:cover;display:block;}
.katjo-chat-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.katjo-chat-card-name{
  font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--katjo-ink)!important;text-decoration:none;line-height:1.35;}
.katjo-chat-card-sub{font-size:11.5px;font-weight:300;color:var(--katjo-muted);line-height:1.4;}
.katjo-chat-card-price{font-size:13.5px;font-weight:500;color:var(--katjo-ink);margin-top:1px;}
.katjo-chat-card-actions{display:flex;gap:6px;margin-top:6px;}
.katjo-chat-btn{
  font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:400;
  padding:8px 12px;border:1px solid var(--katjo-line);background:#fff;
  color:var(--katjo-ink)!important;text-decoration:none;cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease;}
.katjo-chat-btn:hover{border-color:var(--katjo-ink);}
.katjo-chat-btn.is-primary{background:var(--katjo-dark);border-color:var(--katjo-dark);color:#fff!important;}
.katjo-chat-btn.is-primary:hover{background:var(--katjo-sage-deep);border-color:var(--katjo-sage-deep);}
.katjo-chat-btn:disabled{opacity:.6;cursor:default;}

.katjo-chat-links{display:flex;flex-wrap:wrap;gap:6px;}
.katjo-chat-link{
  font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--katjo-line);background:#fff;
  color:var(--katjo-ink)!important;text-decoration:none;}
.katjo-chat-link:hover{border-color:var(--katjo-ink);}

.katjo-chat-chips{
  display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;background:var(--katjo-cream);
  border-top:1px solid #EFE8E1;flex:0 0 auto;}
.katjo-chat-chips:empty{display:none;}
.katjo-chat-chip{
  font-family:"Jost",sans-serif;font-size:10.5px;font-weight:300;
  padding:7px 12px;border:1px solid var(--katjo-line);background:#fff;
  color:var(--katjo-ink-soft);cursor:pointer;border-radius:0;
  transition:border-color .2s ease,color .2s ease;}
.katjo-chat-chip:hover{border-color:var(--katjo-ink);color:var(--katjo-ink);}

.katjo-chat-form{
  display:flex;gap:0;padding:12px 14px 14px;background:#fff;
  border-top:1px solid #EFE8E1;flex:0 0 auto;}
.katjo-chat-input{
  flex:1;min-width:0;border:1px solid #C9BFB4;border-right:0;border-radius:0;
  padding:11px 13px;font-family:"Jost",sans-serif;font-size:13px;font-weight:300;
  color:var(--katjo-ink);background:#fff;}
.katjo-chat-input:focus{outline:none;border-color:var(--katjo-ink);}
.katjo-chat-input::placeholder{color:#8C837B;}
.katjo-chat-send{
  border:1px solid var(--katjo-dark);background:var(--katjo-dark);color:#fff;
  padding:0 15px;cursor:pointer;border-radius:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .22s ease;}
.katjo-chat-send:hover{background:var(--katjo-sage-deep);border-color:var(--katjo-sage-deep);}

@media (max-width:600px){
  .katjo-chat{right:14px;bottom:14px;left:14px;align-items:stretch;}
  .katjo-chat-panel{width:100%;height:min(72vh,540px);}
  .katjo-chat-launch{align-self:flex-end;}
}
@media (prefers-reduced-motion:reduce){
  .katjo-chat-panel,.katjo-chat-launch{transition:none;}
  .katjo-chat-typing span{animation:none;}
}

/* ---- about: "Our promise to you" ----
   Now an editorial band like the rest of the site. The signature sits
   under the copy rather than in a column of its own. */
.katjo-promise-band .katjo-promise-sign{margin-top:2px;}
.katjo-promise-band .katjo-promise-sign .elementor-heading-title{line-height:1.1;}
.katjo-promise-band .katjo-promise-sign .elementor-icon{display:inline-flex;}
@media (max-width:767px){
  .katjo-promise-band .katjo-ed-feather img{-webkit-mask-image:none;mask-image:none;}
  .katjo-promise-band .katjo-promise-sign{justify-content:flex-start;}
}

/* =====================================================================
   MOBILE HEADER
   Three problems: the announcement bar sat ABOVE the logo and ate 106px
   before you saw the brand; the search field squeezed the message into a
   55px column of wrapped text; and the slide-out menu was an unstyled
   #F5F5F5 sheet with no branding, so it read as a broken page rather
   than a menu.
   ================================================================== */
@media (max-width:767px){

  /* --- order: brand row first, announcement + search beneath it --- */
  header.xpro-theme-builder-header .elementor{display:flex;flex-direction:column;}
  header.xpro-theme-builder-header .katjo-announce{order:2;}
  header.xpro-theme-builder-header .elementor > .elementor-element:not(.katjo-announce){order:1;}

  /* The brand row used to be the sticky element. Sticky positioning on a
     flex item that has ALSO been reordered is where engines disagree -
     Firefox took it out of flow and the promo line rode up over the
     wordmark. Pin the header itself instead (a plain body child, no order
     involved) and let the children reorder inside it. The search stays on
     screen while scrolling, which is what it was there for. */
  header.xpro-theme-builder-header{
    position:sticky!important;top:0!important;z-index:200!important;
    background:#fff;box-shadow:0 1px 0 rgba(28,27,25,.07);}
  header.xpro-theme-builder-header .elementor > .elementor-element:not(.katjo-announce){
    position:static!important;z-index:auto!important;background:#fff;}
  body.admin-bar header.xpro-theme-builder-header{top:46px!important;}
  html{scroll-padding-top:180px;}

  /* --- the announcement bar itself --- */
  .katjo-announce{padding:10px 0 12px!important;}
  .katjo-announce .e-con-full.e-flex{
    flex-direction:column!important;align-items:stretch!important;gap:8px!important;}
  .katjo-announce .elementor-widget-text-editor{width:100%;}
  .katjo-announce .elementor-widget-text-editor p{
    font-size:9px!important;letter-spacing:1.1px!important;line-height:1.4!important;
    text-align:center!important;}
  .katjo-announce .katjo-topsearch{width:100%;}
  .katjo-announce .xpro-elementor-search-wrapper,
  .katjo-announce .xpro-elementor-search-input-group,
  .katjo-announce form{width:100%!important;}
  /* beats .katjo-announce .xpro-elementor-search-input-group input.field */
  .katjo-announce .xpro-elementor-search-input-group input.field,
  .katjo-announce input[type=search],
  .katjo-announce input.field{
    width:100%!important;flex:1 1 auto!important;height:38px!important;font-size:12.5px!important;
    padding:0 12px!important;}
  .katjo-announce .xpro-elementor-search-button{
    height:38px!important;min-width:46px;padding:0 12px!important;}

  /* --- the brand row --- */
  .katjo-header-row{padding-left:6px!important;padding-right:6px!important;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-menu-toggler{
    width:44px!important;height:44px!important;color:var(--katjo-ink)!important;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-menu-toggler i{font-size:19px!important;}

  /* --- the slide-out menu --- */
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper{
    background:var(--katjo-cream)!important;
    box-shadow:-16px 0 40px rgba(28,27,25,.24);
    padding-top:74px!important;overflow-y:auto;}
  /* the panel carried no branding at all */
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper::before{
    content:"KAT & JO";
    position:absolute;top:26px;left:26px;
    font-family:"Cormorant Garamond",serif;font-size:21px;letter-spacing:1.4px;
    color:var(--katjo-ink);}
  /* Xpro leaves this button in normal flow, so `top` pushed it DOWN into
     the first menu row instead of pinning it. Absolute puts it on the
     wordmark's line, clear of HOME. */
  header.xpro-theme-builder-header .xpro-elementor-horizontal-menu-close{
    position:absolute!important;top:18px!important;right:20px!important;
    width:42px!important;height:42px!important;margin:0!important;
    background:transparent!important;border:1px solid var(--katjo-line)!important;
    color:var(--katjo-ink)!important;border-radius:0!important;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-menu-close i{font-size:15px!important;}

  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav{
    width:100%!important;padding:0 20px!important;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li{
    width:100%;border-bottom:1px solid #E7DFD7;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li > a{
    display:flex!important;align-items:center;min-height:52px;padding:0 2px!important;
    font-family:"Jost",sans-serif!important;font-size:12.5px!important;font-weight:400!important;
    letter-spacing:2px!important;text-transform:uppercase!important;
    color:var(--katjo-ink)!important;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li > a:hover,
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a{
    color:var(--katjo-sage-deep)!important;}
  .xpro-elementor-horizontal-menu-overlay{background:rgba(28,27,25,.45)!important;}
}
@media (max-width:767px){
  /* The slide-out panel is fixed at z-index 999 but lives INSIDE the brand
     row. Giving that row a z-index made it a stacking context, trapping the
     panel below the announcement bar. Sticky with z-index:auto does not
     create one, so the panel can reach the top of the page again. */
  header.xpro-theme-builder-header .katjo-announce{
    position:static!important;z-index:auto!important;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper{z-index:99999!important;}
  .xpro-elementor-horizontal-menu-overlay{z-index:99998!important;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-menu-close{z-index:100000!important;}
  /* the chat launcher must not sit over the open menu either */
  body.xpro-menu-open .katjo-chat,
  body.menu-open .katjo-chat{display:none;}
}

/* =====================================================================
   MOBILE IMAGE FRAMING
   Almost every photograph on the site is 16:9, but several components
   put them in portrait boxes at 375px - object-fit:cover then throws
   away most of the frame (the home blog thumbnails kept only 26% of the
   picture). Each of these relaxes toward the source's own shape so the
   subject survives.
   ================================================================== */
@media (max-width:767px){

  /* NOTE: an earlier version clipped the document here (html{overflow-x:clip})
     to hide the parked off-canvas menu. That silently disables position:sticky
     for every descendant - the header stopped pinning, and Firefox took the
     reordered rows out of flow so the promo line overlapped the wordmark.
     The panel is clipped at source instead, below. */
  .xpro-elementor-horizontal-navbar-wrapper{max-width:100vw;}

  /* home: blog cards were a 106px-wide column, 226px tall - keep 26% of a
     16:9 shot. Stack the card so the art runs full width instead. */
  .katjo-blog-card,
  .katjo-blog-row{flex-direction:column!important;}
  .katjo-blog-shot,
  .katjo-blog-shot .elementor-widget-container,
  .katjo-blog-shot figure,
  .katjo-blog-shot a{width:100%!important;}
  .katjo-blog-shot img{
    width:100%!important;aspect-ratio:16/9!important;height:auto!important;
    -webkit-mask-image:none!important;mask-image:none!important;}

  /* tips: category tiles */
  .katjo-cat-card-shot img{aspect-ratio:16/10!important;height:auto!important;}

  /* about: the arch-topped journey / commitment shots */
  .katjo-arch img{aspect-ratio:4/3!important;height:auto!important;}

  /* glow line + collection cards */
  .katjo-glow-shot img,
  .katjo-ed-short img{aspect-ratio:4/3!important;height:auto!important;}

  /* product cards: 1:1.1 portrait from a 16:9 mockup keeps about half the
     frame. Widen the box so more of the styled shot survives. */
  .katjo-bs-band .katjo-bs-shot img,
  .katjo-shop-grid .xpro-woo-product-grid-img img,
  .woocommerce ul.products li.product .katjo-loop-media img,
  .wc-block-grid__product-image img{aspect-ratio:1/0.85!important;}

  /* the hover-swap image never fires on touch, and its sources are the
     low-resolution mockup crops - do not download or upscale them */
  .xpro-woo-product-img-section img.xpro-gallery-second-img-url{display:none!important;}
}
@media (max-width:767px){
  /* Xpro sets a per-breakpoint min-height on the grid image (360px here),
     which overrode the aspect-ratio and put the crop back. */
  .katjo-bs-band .katjo-bs-shot img,
  .katjo-shop-grid .xpro-woo-product-grid-img img,
  .xpro-woo-product-grid-img img,
  .xpro-woo-product-img-section img,
  .woocommerce ul.products li.product .katjo-loop-media img,
  .wc-block-grid__product-image img{
    min-height:0!important;height:auto!important;}
  .xpro-woo-product-grid-img,
  .xpro-woo-product-img-section{min-height:0!important;height:auto!important;}
}
@media (max-width:767px){
  /* the collection-page grids (haircare, glow line, prime age) are not
     scoped to .katjo-shop-grid, so they missed the framing rule above */
  .xpro-woo-product-grid-img img,
  .xpro-woo-product-img-section img.xpro-gallery-first-img-url{
    aspect-ratio:1/0.85!important;object-fit:cover;width:100%!important;}
}

/* =====================================================================
   MOBILE: HERO / CTA BANDS AND THE CART
   On desktop these bands put the copy on the plain side of a composite.
   At phone width the section falls back to a mobile background that is a
   busy product photograph, and the copy lands straight on it - the FAQ
   "We're here to help", the Contact hero and the Tips hero were all
   unreadable.
   ================================================================== */
@media (max-width:767px){

  /* Bands that ship a separate photo block below the copy do not need the
     photograph behind the text as well - drop it and let the cream show,
     which is how these were designed to stack. */
  .katjo-hero:has(.katjo-hero-model-mobile){
    background-image:none!important;}

  /* Bands with no separate photo keep theirs, behind a cream scrim so the
     type stays crisp and the picture reads as texture. */
  .katjo-hero:not(:has(.katjo-hero-model-mobile)):not(:has(.katjo-hero-slider)){position:relative;isolation:isolate;}
  .katjo-hero:not(:has(.katjo-hero-model-mobile)):not(:has(.katjo-hero-slider))::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:rgba(247,243,239,.84);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
  .katjo-hero > *{position:relative;z-index:1;}

  /* the copy no longer needs to dodge a photograph */
  .katjo-hero .katjo-hero-copy{padding-left:20px!important;padding-right:20px!important;}
  .katjo-hero .katjo-hero-copy p{max-width:none!important;}

  /* --- cart ---
     The cart is a WordPress "alignwide" block, which breaks out of the
     content column with negative margins. At 375px that pulled it 70px
     off the left edge and cut the copy and buttons in half. */
  .woocommerce-cart .alignwide,
  .wp-block-woocommerce-cart.alignwide,
  .woocommerce-checkout .alignwide{
    margin-left:0!important;margin-right:0!important;
    width:100%!important;max-width:100%!important;left:auto!important;right:auto!important;}
  .woocommerce-cart .wp-block-woocommerce-empty-cart-block{padding-left:4px;padding-right:4px;}
  .katjo-empty-actions .wp-block-button,
  .katjo-empty-actions .wp-block-button__link{width:100%;max-width:none;}
}

/* =====================================================================
   GRID ROW HEIGHTS ON SMALL SCREENS
   Elementor's grid container writes an explicit grid-template-rows with
   one equal height per row, sized to the tallest cell. At desktop that is
   a single row of columns, so it is invisible. Once the grid stacks, every
   row inherits the tallest cell's height - the footer's brand column got
   388px for 156px of content, and the About journey columns got 699px for
   a 249px image. That is the dead space under the arches and above SHOP.
   ================================================================== */
@media (max-width:1024px){
  .e-con.e-grid{
    grid-template-rows:none!important;
    grid-auto-rows:min-content!important;
    align-items:start!important;}
  .e-con.e-grid > .e-con,
  .e-con.e-grid > .elementor-element{
    height:auto!important;min-height:0!important;align-self:start!important;}
}
@media (max-width:767px){
  /* five stacked columns at a 48px gap made the footer 1,663px of link
     band; the columns are short so they do not need that much air */
  .e-con.e-grid{gap:28px!important;}
  #journey .e-con.e-grid{gap:22px!important;}
}
@media (max-width:767px){
  /* the footer's four menu widgets share Xpro's markup with the header's
     off-canvas nav; they must stay plain stacked lists, not slide-out panels */
  footer .xpro-elementor-horizontal-navbar-wrapper,
  #xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-wrapper{
    position:static!important;transform:none!important;
    background:transparent!important;box-shadow:none!important;
    padding:0!important;width:auto!important;height:auto!important;
    z-index:auto!important;overflow:visible!important;}
  footer .xpro-elementor-horizontal-navbar-wrapper::before,
  #xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-wrapper::before{content:none!important;}
  footer .xpro-elementor-horizontal-menu-close,
  footer .xpro-elementor-horizontal-menu-toggler,
  #xpro-theme-builder-footer .xpro-elementor-horizontal-menu-close,
  #xpro-theme-builder-footer .xpro-elementor-horizontal-menu-toggler{display:none!important;}
  footer .xpro-elementor-horizontal-navbar-nav > li,
  #xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-nav > li{border:0!important;}
  footer .xpro-elementor-horizontal-navbar-nav > li > a,
  #xpro-theme-builder-footer .xpro-elementor-horizontal-navbar-nav > li > a{
    min-height:0!important;padding:0 0 9px!important;
    font-size:12.8px!important;letter-spacing:normal!important;
    text-transform:none!important;font-weight:300!important;
    color:var(--katjo-ink-soft)!important;}
}

/* ---- offline fallback page (served by the service worker) ---- */
.page-id-299 .site-main{padding-top:70px!important;padding-bottom:90px!important;}
.page-id-299 .page-header{text-align:center;border:0;}
.page-id-299 .entry-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(28px,5vw,40px);color:var(--katjo-ink);}
.page-id-299 .page-content{max-width:520px;margin:0 auto;text-align:center;}
.page-id-299 .page-content p{
  font-family:"Jost",sans-serif;font-weight:300;font-size:16px;line-height:1.85;
  color:var(--katjo-ink-soft);margin:0 0 18px;}
.katjo-offline-lead{font-size:18px!important;color:var(--katjo-ink)!important;}
.katjo-offline-btn{
  display:inline-block;margin-top:8px;background:var(--katjo-dark);color:#fff!important;
  font-family:"Jost",sans-serif;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  padding:13px 32px;text-decoration:none;border:1px solid var(--katjo-dark);
  transition:background .25s ease,color .25s ease;}
.katjo-offline-btn:hover{background:transparent;color:var(--katjo-dark)!important;}

/* =====================================================================
   HOME - SHOP BY CATEGORY TILES
   Elementor writes the tile art into its per-element CSS, and that rule
   is not surviving LiteSpeed's optimiser (the ::before overlay does, the
   background-image does not), so all four tiles rendered as flat cream.
   Declared here against stable classes instead.
   ================================================================== */
.katjo-cat-tile{
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center right!important;
  background-color:var(--katjo-tile)!important;}
.katjo-cat-renew{background-image:url("/wp-content/uploads/2026/08/katjo-4k-cat-renew-sm.webp")!important;}
.katjo-cat-root {background-image:url("/wp-content/uploads/2026/08/katjo-4k-cat-root-revive-sm.webp")!important;}
.katjo-cat-dew  {background-image:url("/wp-content/uploads/2026/08/katjo-4k-cat-dew-sm.webp")!important;}
.katjo-cat-all  {background-image:url("/wp-content/uploads/2026/08/katjo-4k-cat-all-sm.webp")!important;}

/* =====================================================================
   HOME - "GET TO KNOW KAT & JO" BAND
   This band's copy is WHITE on a sage ground. The generic mobile hero
   scrim I added is cream, which washed the ground out and left white
   type on near-white - unreadable. It needs the sage back, not cream.
   ================================================================== */
@media (max-width:767px){
  .katjo-about-band::before{
    background:rgba(148,153,131,.86)!important;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
  .katjo-about-band .katjo-about-copy p{color:#fff!important;}
  .katjo-about-band .elementor-heading-title{color:var(--katjo-ink)!important;}
}

/* =====================================================================
   MOBILE HEADER - the brand row must never sit on the announcement
   ================================================================== */
@media (max-width:767px){
  header.xpro-theme-builder-header .elementor > .elementor-element:not(.katjo-announce){
    height:auto!important;min-height:0!important;padding-bottom:6px!important;}
  .katjo-header-row{align-items:center;}
  header.xpro-theme-builder-header .katjo-wordmark{margin-bottom:2px!important;}
}
@media (max-width:767px){
  /* Xpro paints each nav link #F5F5F5, which sat as a lighter panel on top
     of the cream sheet and made the menu look two-tone. */
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar,
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav,
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li,
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li > a,
  header.xpro-theme-builder-header .xpro-elementor-nav-link,
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-collapse{
    background:transparent!important;background-color:transparent!important;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li > a:hover,
  header.xpro-theme-builder-header .xpro-elementor-nav-link:hover{
    background:transparent!important;}
}

/* =====================================================================
   HEADER AT NARROW DESKTOP / TABLET (768-1024)
   The promo line and the 210px search share one row here. As the window
   narrows the message wraps into the search and the bar grows taller,
   which is where the two were colliding. Let the row wrap cleanly and
   step the message down instead.
   ================================================================== */
@media (min-width:768px) and (max-width:1024px){
  .katjo-announce .e-con-full.e-flex{
    flex-wrap:wrap!important;row-gap:6px!important;justify-content:center!important;}
  .katjo-announce .elementor-widget-text-editor{flex:1 1 auto;min-width:0;}
  .katjo-announce .elementor-widget-text-editor p{
    font-size:9.5px!important;letter-spacing:1.2px!important;white-space:nowrap;}
  .katjo-announce .katjo-topsearch{flex:0 0 auto;}
  .katjo-announce .xpro-elementor-search-input-group input.field,
  .katjo-announce input.field{width:170px!important;}
}
@media (min-width:768px) and (max-width:880px){
  /* below this the message cannot stay on one line beside the field, so
     give each its own row rather than letting them interleave */
  .katjo-announce .e-con-full.e-flex{flex-direction:column!important;align-items:center!important;}
  .katjo-announce .elementor-widget-text-editor p{white-space:normal;text-align:center!important;}
  .katjo-announce .xpro-elementor-search-input-group input.field,
  .katjo-announce input.field{width:280px!important;}
}

/* A row can never be shorter than the wordmark stack, at any width - this
   is what let the promo line ride up over "TORONTO". */
header.xpro-theme-builder-header .katjo-header-row{
  align-items:center;min-height:0;}
header.xpro-theme-builder-header .katjo-header-row > .e-con{
  height:auto!important;}
header.xpro-theme-builder-header .katjo-announce,
header.xpro-theme-builder-header .katjo-header-row{overflow:visible;}
@media (max-width:767px){
  /* Belt and braces for the reordered header: keep every part in normal
     flow so no engine can lift one out and overlap the other. */
  header.xpro-theme-builder-header .elementor{align-items:stretch;}
  header.xpro-theme-builder-header .katjo-announce,
  header.xpro-theme-builder-header .katjo-header-row,
  header.xpro-theme-builder-header .elementor > .elementor-element{
    float:none!important;transform:none!important;}
  header.xpro-theme-builder-header .katjo-header-row{
    position:relative!important;top:auto!important;}
  /* the wordmark stack sets the row's height, never the other way round */
  header.xpro-theme-builder-header .katjo-header-row > .e-con{
    min-height:0!important;height:auto!important;align-self:center!important;}
}
@media (max-width:767px){
  /* Keep the parked menu from widening the document without clipping the
     document itself (which would break sticky). It is fixed-position, so
     confining it to the viewport is enough. */
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper{
    max-width:100vw;right:0;}
  body{overflow-x:hidden;}
}

/* =====================================================================
   MOBILE MENU PANEL - driven by html.katjo-menu-open
   Xpro's toggler only listens for `click`, which a touch device never
   fires here, so the widget's own open state is unreliable on a phone.
   The panel is positioned from this class instead.
   ================================================================== */
.katjo-menu-backdrop{
  position:fixed;inset:0;z-index:99990;
  background:rgba(28,27,25,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility .28s;}

@media (max-width:767px){
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper{
    position:fixed!important;
    top:0!important;bottom:0!important;right:0!important;left:auto!important;
    width:min(86vw,340px)!important;max-width:340px!important;height:100%!important;
    transform:translateX(100%)!important;
    transition:transform .3s cubic-bezier(.2,.6,.2,1)!important;
    visibility:hidden!important;
    z-index:99995!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch;}

  html.katjo-menu-open header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper{
    transform:translateX(0)!important;visibility:visible!important;}

  html.katjo-menu-open .katjo-menu-backdrop{opacity:1;visibility:visible;pointer-events:auto;}

  /* the header has to out-rank the page while the panel is out */
  html.katjo-menu-open header.xpro-theme-builder-header{z-index:99994!important;}
  html.katjo-menu-open .katjo-chat{display:none!important;}

  /* Xpro's own overlay is redundant now and only gets in the way of taps */
  .xpro-elementor-horizontal-menu-overlay{display:none!important;}

  /* generous targets, and never let a tap be treated as a drag */
  header.xpro-theme-builder-header .xpro-elementor-horizontal-menu-toggler,
  header.xpro-theme-builder-header .xpro-elementor-horizontal-menu-close{
    touch-action:manipulation;cursor:pointer;}
  header.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li > a{
    touch-action:manipulation;}
}

/* =====================================================================
   CHAT WIDGET - THE CONTAINER MUST NOT SWALLOW TAPS
   The closed panel is hidden with visibility, which still occupies
   layout, so .katjo-chat stayed ~600px tall. As a fixed element with
   pointer-events:auto that covered roughly three quarters of a phone
   screen and ate every tap under it - form fields could not be focused
   and the footer links did nothing. The container is now transparent to
   input; only the launcher and the open panel accept it.
   ================================================================== */
.katjo-chat{pointer-events:none!important;}
.katjo-chat-launch{pointer-events:auto!important;}
.katjo-chat-panel{pointer-events:none!important;}
.katjo-chat-panel.is-open{pointer-events:auto!important;}
/* and do not reserve layout for a closed panel in the first place */
.katjo-chat-panel:not(.is-open){
  position:absolute!important;bottom:100%!important;right:0!important;
  margin-bottom:12px!important;}
.katjo-chat{position:fixed!important;}
@media (max-width:600px){
  /* the container spanned the full width here, which is what made the
     dead zone reach the whole screen rather than one corner */
  .katjo-chat{left:auto!important;right:14px!important;bottom:14px!important;}
  .katjo-chat-panel:not(.is-open){width:min(360px,calc(100vw - 28px))!important;}
  .katjo-chat-panel.is-open{
    position:fixed!important;left:14px!important;right:14px!important;
    bottom:76px!important;width:auto!important;margin-bottom:0!important;}
}

/* =====================================================================
   HOME HERO SLIDER

   One photograph per slide, split down the middle. The right of the frame
   is served sharp next to the copy; the left of the SAME frame - blurred
   and widened - is laid behind the copy. The wall file's right-hand column
   is the exact column the sharp crop starts on, so the halves meet on a
   colour match and the band reads as a single photograph rather than a
   picture beside a coloured panel.

   The sharp crop is faded out over its leftmost pixels so there is no hard
   edge anywhere; underneath that fade sits --seam, which is that shared
   column as a flat colour, so the blend has nothing to disagree with.
   ================================================================== */

.katjo-hero-slideshow{
  position:relative;isolation:isolate;overflow:hidden;
  /* the slider paints the background now */
  background-image:none!important;
  --katjo-hero-shot:52%;
  --katjo-hero-fade:190px;
}

/* Elementor wraps a shortcode in two divs; both have to get out of the way
   so the slider can fill the band behind the copy. */
.katjo-hero-slider-w{
  position:absolute!important;inset:0!important;z-index:0!important;
  width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
  pointer-events:none;}
.katjo-hero-slider-w > .elementor-widget-container{position:absolute;inset:0;}
.katjo-hero-slider{position:absolute;inset:0;}

/* every other child of the band sits above the photograph */
.katjo-hero-slideshow > *:not(.katjo-hero-slider-w){position:relative;z-index:1;}

.katjo-hero-slide{
  position:absolute;inset:0;opacity:0;
  background-color:var(--tone);
  transition:opacity 1.1s ease-in-out;
  will-change:opacity;}
.katjo-hero-slide.is-active{opacity:1;}

.katjo-hero-wall,
.katjo-hero-shot{position:absolute;background-repeat:no-repeat;}

/* The wall is sized so its right edge lands exactly under the far side of
   the sharp crop's fade. The flat --seam layer beneath it carries that same
   column across the fade zone, which is what the crop dissolves into. */
.katjo-hero-wall{
  inset:0;
  background-image:linear-gradient(var(--seam),var(--seam));
  background-size:100% 100%;
  background-color:var(--tone);}
.katjo-hero-slide.is-loaded .katjo-hero-wall{
  background-image:var(--wall),linear-gradient(var(--seam),var(--seam));
  background-size:calc(100% - var(--katjo-hero-shot) + var(--katjo-hero-fade)) 100%,100% 100%;
  background-position:left center,left center;}

.katjo-hero-shot{
  top:0;right:0;bottom:0;width:var(--katjo-hero-shot);
  background-size:cover;background-position:center center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--katjo-hero-fade));
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--katjo-hero-fade));}
.katjo-hero-slide.is-loaded .katjo-hero-shot{background-image:var(--shot);}

/* ---- dots ---------------------------------------------------------- */
.katjo-hero-dots{
  position:absolute;left:0;right:0;bottom:26px;
  max-width:1360px;margin:0 auto;padding:0 60px;
  display:flex;gap:9px;pointer-events:none;}
.katjo-hero-dot{
  pointer-events:auto;
  width:26px;height:3px;padding:0;border:0;border-radius:2px;
  background:rgba(64,51,38,.24);cursor:pointer;
  transition:background .3s ease,width .3s ease;}
.katjo-hero-dot:hover{background:rgba(64,51,38,.45);}
.katjo-hero-dot.is-active{width:40px;background:rgba(64,51,38,.7);}
.katjo-hero-dot:focus-visible{outline:2px solid var(--katjo-ink,#403326);outline-offset:3px;}

/* ---- tablet -------------------------------------------------------- */
/* The band narrows faster than the photograph does, so past this width the
   desktop crop would start losing the model off the right. Swap to the
   tighter crop and give the picture more of the band. */
@media (max-width:1024px){
  .katjo-hero-slideshow{--katjo-hero-shot:56%;--katjo-hero-fade:130px;}
  .katjo-hero-slide.is-loaded .katjo-hero-shot{background-image:var(--shot-m);}
  .katjo-hero-dots{padding:0 40px;bottom:20px;}
}

/* ---- phones -------------------------------------------------------- */
/* Side by side stops working long before this, so the frame splits the
   other way: copy on the wall up top, photograph across the bottom. The
   crop's top edge is faded into the wall above it so the join is still a
   blend rather than a line. */
@media (max-width:767px){
  .katjo-hero-slideshow{
    --katjo-hero-photo:44%;
    min-height:760px!important;
    padding-top:38px!important;padding-bottom:0!important;
    justify-content:flex-start!important;
    background-image:none!important;}
  .katjo-hero-slideshow .katjo-hero-wall,
  .katjo-hero-slide.is-loaded .katjo-hero-wall{
    inset:0;background-size:100% 100%,100% 100%;background-position:center,center;}
  .katjo-hero-slideshow .katjo-hero-shot{
    top:auto;left:0;right:0;bottom:0;width:auto;height:var(--katjo-hero-photo);
    background-position:center top;
    /* short fade only: the models' hair reaches the top of every frame, and a
       long one would dissolve the crown of their heads */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px);
    mask-image:linear-gradient(180deg,transparent 0,#000 28px);}
  /* dots ride in the gap between the button and the photograph */
  .katjo-hero-dots{
    bottom:calc(var(--katjo-hero-photo) + 22px);top:auto;
    padding:0 20px;justify-content:center;}
}
@media (max-width:400px){
  .katjo-hero-slideshow{min-height:740px!important;}
}

/* Someone who has asked for less motion gets a still hero and working dots,
   not a crossfade they did not ask for. */
@media (prefers-reduced-motion:reduce){
  .katjo-hero-slide{transition:none;}
}