/*
Theme Name: Kali
Theme URI: https://lafactory.vip/kali
Description: KALI Saint Barth child theme of Kadence. Editorial activewear design, WooCommerce-native, collection-driven (no hardcoded catalog data). Header/footer/typography via the Kadence builder, brand components via this stylesheet.
Author: LaFactory
Author URI: https://lafactory.com
Template: kadence
Version: 2.35.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: kali
*/

/* Variable Archivo bundled with the theme: guarantees true 100-900 weights.
   Kadence's generated Google Fonts CSS only declares 400/700, which would
   leave the 800/900 display weights synthesized (wider, breaks the hero). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/archivo-latin.woff2) format('woff2-variations');
}

:root {
  --kali-cream: #EFE9DD;
  --kali-surface: #F6F2EA;
  --kali-dark: #17140F;
  --kali-night: #1C1A17;
  --kali-terra: #C0603F;
  --kali-terra-deep: #A94F31;
  --kali-chocolate: #4A3A32; /* Pantone 19-1216 TCX Chocolate Martini (bandeau haut) */
  --kali-logo-w: 116px; /* logo header KALI Saint Barth, ratio ~2.17:1 */
  --kali-logo-h: 53px;
  --kali-taupe: #8B7F6E;
  --kali-muted: #C9BFAF;
  --kali-sand: #E2D8C8;
  --kali-line: rgba(23, 20, 15, .12);
  --kali-line-light: rgba(246, 242, 234, .14);
}

body {
  background: var(--kali-cream);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--kali-terra);
  color: var(--kali-surface);
}

/* ---------- header (Kadence builder) ---------- */

/* No manual sticky/top offset here: Kadence owns header stickiness (with the
   correct admin-bar offset). The old `#masthead{position:sticky} +
   body.admin-bar #masthead{top:32px}` fell back to position:relative (Kadence
   overrides), so top:32px just shoved the header down 32px and opened a cream
   gap ABOVE the terracotta bar for logged-in users. The announce bar must sit
   flush at the very top. */

/* Announce top bar styled at CONTAINER level: the client edits plain text
   in the customizer, it must stay on-charte without any markup. */
.site-top-header-wrap {
  background: var(--kali-chocolate);
}

.site-top-header-wrap .site-header-row,
.site-top-header-wrap .site-header-row-container-inner {
  min-height: 0;
}

.site-top-header-wrap .header-html,
.site-top-header-wrap .mobile-html {
  width: 100%;
  margin: 0;
  padding: 9px 20px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .24em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--kali-surface);
}

.site-top-header-wrap .header-html a,
.site-top-header-wrap .header-html p,
.site-top-header-wrap .mobile-html a,
.site-top-header-wrap .mobile-html p {
  color: inherit;
  margin: 0;
}

/* Mobile: announce top row flush at the very top of the sticky header. */
.site-mobile-header-wrap .site-top-header-wrap {
  background: var(--kali-chocolate);
}

.site-mobile-header-wrap .site-top-header-wrap .mobile-html-inner,
.site-mobile-header-wrap .site-top-header-wrap .mobile-html {
  letter-spacing: .18em;
  padding: 8px 14px;
}

#mobile-header .site-header-upper-wrap {
  margin: 0;
}

#masthead {
  margin: 0;
}

.kali-announce-text {
  font-size: 11px;
  letter-spacing: .24em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--kali-surface);
}

#masthead .header-navigation .header-menu-container > ul > li > a {
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 600;
  text-transform: uppercase;
}

/* Brand: KALI Saint Barth logo image (ratio ~2.17:1), real title kept for
   assistive tech (font-size:0 collapses the text, the image is the ::after). */
.site-branding .site-title {
  font-size: 0;
  line-height: 1;
}

.site-branding .site-title::after {
  content: "";
  display: block;
  width: var(--kali-logo-w);
  height: var(--kali-logo-h);
  background: url("assets/img/kali-logo.png") center / contain no-repeat;
}

/* Mobile: logo un peu plus compact dans la barre. */
.site-mobile-header-wrap .site-branding .site-title::after {
  width: calc(var(--kali-logo-w) * 0.82);
  height: calc(var(--kali-logo-h) * 0.82);
}

/* ---------- header to the handoff (nav / KALI / actions) ---------- */

/* Generous side padding (mockup 20px 44px). The row had padding:0, so the nav
   and actions were glued to the viewport edges - Francis's "marges". */
#masthead .site-main-header-inner-wrap {
  padding: 18px 44px;
}

/* Left nav on ONE line (was white-space:normal, so "CARE & BEAUTY" wrapped),
   evenly spaced; COLLECTIONS (first) in terracotta like the mockup. */
#masthead .header-navigation .header-menu-container > ul {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
}

#masthead .header-navigation .header-menu-container > ul > li {
  margin: 0;
}

#masthead .header-navigation .header-menu-container > ul > li > a {
  white-space: nowrap;
  padding-left: 0;
  padding-right: 0;
  color: var(--kali-dark);
}

#masthead .site-header-main-section-left .header-navigation .header-menu-container > ul > li:first-child > a {
  color: var(--kali-terra);
}

/* Right actions as TEXT labels (mockup: RECHERCHER · COMPTE · PANIER · N),
   not Kadence's icons. */
#masthead .site-header-main-section-right {
  gap: 22px;
}

#masthead .site-header-main-section-right .header-menu-container > ul > li > a {
  white-space: nowrap;
}

/* RECHERCHER: swap the search icon for the word. */
#masthead .search-toggle-open .kadence-svg-iconset,
#masthead .search-toggle-open svg {
  display: none;
}

#masthead .search-toggle-open {
  width: auto;
  height: auto;
}

#masthead .search-toggle-open::after {
  content: "Rechercher";
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--kali-dark);
}

/* PANIER · N: swap the cart icon for the word, terracotta like the mockup. */
#masthead .kadence-header-cart .kadence-svg-iconset,
#masthead .kadence-header-cart svg {
  display: none;
}

#masthead .kadence-header-cart .header-cart-button,
#masthead .kadence-header-cart .header-cart-button:hover {
  color: var(--kali-terra);
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

#masthead .kadence-header-cart .header-cart-button::before {
  content: "Panier · ";
}

/* ---------- classic-theme group wrapper ----------
   Kadence has no theme.json, so WP renders group blocks with the legacy
   .wp-block-group__inner-container. Flatten it inside the grid/flex
   containers so their children lay out as designed. */

.kali-hero > .wp-block-group__inner-container,
.kali-hero__copy > .wp-block-group__inner-container,
.kali-hero__foot > .wp-block-group__inner-container,
.kali-terra-split > .wp-block-group__inner-container,
.kali-sechead > .wp-block-group__inner-container {
  display: contents;
}

.kali-hero > .wp-block-group__inner-container > *,
.kali-sechead > .wp-block-group__inner-container > *,
.kali-hero__foot > .wp-block-group__inner-container > * {
  margin-block-start: 0 !important;
}

/* ---------- shared section pieces ---------- */

.kali-section {
  padding: 76px 44px;
}

.kali-dark {
  background: var(--kali-dark);
  color: var(--kali-surface);
}

.kali-sand {
  background: var(--kali-sand);
}

.kali-kicker {
  font-size: 11px;
  letter-spacing: .28em;
  font-weight: 700;
  color: var(--kali-terra);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.kali-title {
  font-weight: 900;
  font-size: clamp(34px, 4.2vw, 52px);
  letter-spacing: -.03em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  color: var(--kali-dark);
}

.kali-dark .kali-title {
  color: var(--kali-surface);
}

.kali-sechead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.kali-sechead > * {
  margin-block-start: 0 !important;
}

.kali-arrow {
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

.kali-arrow a {
  color: inherit;
  text-decoration: none;
}

.kali-arrow a:hover {
  color: var(--kali-terra);
}

/* ---------- buttons ---------- */

.kali-btns .wp-block-button__link {
  border-radius: 0;
  background: var(--kali-terra);
  color: var(--kali-dark);
  border: 1px solid var(--kali-terra);
  padding: 15px 30px;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.kali-btns .wp-block-button__link:hover {
  background: var(--kali-terra-deep);
  border-color: var(--kali-terra-deep);
  color: var(--kali-surface);
}

.kali-btns .is-style-outline .wp-block-button__link,
.kali-btns .is-style-outline > .wp-block-button__link {
  background: transparent;
  border: 1px solid rgba(246, 242, 234, .35);
  color: var(--kali-surface);
  font-weight: 700;
}

.kali-btns .is-style-outline .wp-block-button__link:hover,
.kali-btns .is-style-outline > .wp-block-button__link:hover {
  border-color: var(--kali-terra);
  color: var(--kali-terra);
  background: transparent;
}

/* ---------- hero ---------- */

.kali-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 660px;
  background: var(--kali-dark);
  color: var(--kali-surface);
}

.kali-hero > * {
  margin-block-start: 0 !important;
}

.kali-hero__copy {
  padding: 70px 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}

.kali-hero__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .24em;
  font-weight: 600;
  color: var(--kali-taupe);
  text-transform: uppercase;
}

.kali-hero h1 {
  font-weight: 900;
  /* Calibrated so MOUVEMENT (the widest line) fits the 1.05fr column at any width. */
  font-size: clamp(46px, 7vw - 16px, 118px);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--kali-surface);
  margin: 24px 0 0;
}

.kali-hero h1 em {
  font-style: normal;
  color: var(--kali-terra);
}

.kali-hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.kali-hero__foot > * {
  margin-block-start: 0 !important;
}

.kali-hero__lede {
  font-size: 15px;
  line-height: 1.7;
  color: var(--kali-muted);
  max-width: 330px;
  margin: 0;
}

.kali-hero__img {
  min-height: 420px;
  background: url(assets/img/hero.jpg) center 28% / cover no-repeat var(--kali-night);
  /* WebP for every current browser (half the bytes of the JPEG on the LCP
     element), the url() above stays the fallback for the ones that ignore
     image-set(). functions.php preloads the WebP on the home page.
     Deliberately NO -webkit-image-set companion despite what linters ask:
     the prefixed syntax has no type(), so a Safari old enough to need it
     (< 14, no WebP) would pick the WebP and render nothing. Falling back to
     the JPEG is the correct behaviour there. */
  background-image: image-set(url(assets/img/hero.webp) type("image/webp"), url(assets/img/hero.jpg) type("image/jpeg"));
}

/* ---------- specs strip ---------- */

.kali-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--kali-line);
}

.kali-specs__item {
  padding: 32px 34px;
  border-right: 1px solid var(--kali-line);
}

.kali-specs__item:last-child {
  border-right: none;
}

.kali-specs__num {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--kali-terra);
  font-weight: 700;
}

.kali-specs__title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 12px 0 6px;
}

.kali-specs__desc {
  font-size: 12px;
  color: var(--kali-taupe);
  line-height: 1.5;
}

/* ---------- collections block: bento ---------- */

.kali-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 250px;
  gap: 14px;
}

.kali-bento__item {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--kali-sand);
}

.kali-bento__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.kali-bento__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.kali-bento__item:hover img {
  transform: scale(1.05);
}

.kali-bento__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 20, 15, 0) 55%, rgba(23, 20, 15, .6));
}

.kali-bento__cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--kali-surface);
}

.kali-bento__name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.kali-bento__item:first-child .kali-bento__name {
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -.01em;
}

.kali-bento__num {
  font-size: 11px;
  font-weight: 600;
  opacity: .75;
}

/* ---------- collections block: universe ---------- */

.kali-universe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.kali-universe__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--kali-dark);
}

.kali-universe__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.kali-universe__item:hover img {
  transform: scale(1.04);
}

.kali-universe__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 20, 15, .05) 40%, rgba(23, 20, 15, .68));
}

.kali-universe__cap {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 1;
  color: var(--kali-surface);
  display: block;
}

.kali-universe__name {
  display: block;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.kali-universe__desc {
  display: block;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--kali-muted);
  margin-top: 5px;
}

/* ---------- collections block: color swatches ---------- */

.kali-colors {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.kali-colors__item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.kali-colors__tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--kali-sand);
}

.kali-colors__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.kali-colors__item:hover .kali-colors__tile img {
  transform: scale(1.05);
}

.kali-colors__tilename {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 1;
  color: var(--kali-surface);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(23, 20, 15, .45);
}

.kali-colors__tile--light .kali-colors__tilename {
  color: var(--kali-dark);
  text-shadow: none;
}

.kali-colors__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kali-colors__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--kali-line);
  flex-shrink: 0;
}

.kali-dark .kali-colors__meta {
  color: var(--kali-surface);
}

/* ---------- WooCommerce loop restyle (scoped to home sections) ---------- */

:is(.kali-products, .woocommerce) ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 16px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

:is(.kali-products, .woocommerce) ul.products::before,
:is(.kali-products, .woocommerce) ul.products::after {
  display: none;
}

:is(.kali-products, .woocommerce) ul.products li.product {
  position: relative;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  text-align: left;
  background: transparent !important;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* Kadence wraps title/price/button in .product-details with a card background. */
:is(.kali-products, .woocommerce) ul.products li.product .product-details {
  background: transparent !important;
  padding: 0 !important;
  margin: 13px 0 0;
  position: static;
  text-align: left;
}

:is(.kali-products, .woocommerce) ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

:is(.kali-products, .woocommerce) ul.products li.product img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--kali-sand);
  margin: 0;
}

:is(.kali-products, .woocommerce) ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0;
  color: var(--kali-dark);
}

:is(.kali-products, .woocommerce) ul.products li.product .woocommerce-loop-product__title a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}

.kali-dark :is(.kali-products, .woocommerce) ul.products li.product .woocommerce-loop-product__title,
.kali-dark :is(.kali-products, .woocommerce) ul.products li.product .woocommerce-loop-product__title a {
  color: var(--kali-surface);
}

:is(.kali-products, .woocommerce) ul.products li.product .price {
  font-size: 14px;
  font-weight: 700;
  color: var(--kali-dark);
  margin: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(.kali-products, .woocommerce) ul.products li.product .price del {
  opacity: .5;
  margin-right: 8px;
  font-weight: 400;
}

:is(.kali-products, .woocommerce) ul.products li.product .price ins {
  text-decoration: none;
}

.kali-dark :is(.kali-products, .woocommerce) ul.products li.product .woocommerce-loop-product__title {
  color: var(--kali-surface);
}

.kali-dark :is(.kali-products, .woocommerce) ul.products li.product .price {
  color: var(--kali-muted);
}

:is(.kali-products, .woocommerce) ul.products li.product .product-action-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 58px;
  z-index: 2;
  margin: 0;
  opacity: 0;
  transition: opacity .25s ease;
}

:is(.kali-products, .woocommerce) ul.products li.product:hover .product-action-wrap,
:is(.kali-products, .woocommerce) ul.products li.product .product-action-wrap:focus-within {
  opacity: 1;
}

:is(.kali-products, .woocommerce) ul.products li.product .button {
  display: block;
  width: 100%;
  background: var(--kali-dark);
  color: var(--kali-surface);
  border: none;
  border-radius: 0;
  text-align: center;
  padding: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0;
}

:is(.kali-products, .woocommerce) ul.products li.product .button:hover {
  background: var(--kali-terra);
  color: var(--kali-dark);
}

:is(.kali-products, .woocommerce) ul.products li.product .added_to_cart {
  display: none;
}

:is(.kali-products, .woocommerce) ul.products li.product .onsale {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 2;
  background: var(--kali-terra);
  color: var(--kali-surface);
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  padding: 4px 10px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.kali-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--kali-cream);
  color: var(--kali-dark);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Best-seller badge (real sales): same compact cream pill as New in the
   mockup, only the wording differs. */
.kali-badge--best {
  background: var(--kali-cream);
  color: var(--kali-dark);
}

:is(.kali-products, .woocommerce) ul.products .star-rating {
  display: none;
}

/* ---------- Kali product card (custom loop template, mockup) ---------- */
:is(.kali-products, .woocommerce) ul.products li.product.kali-card {
  padding: 0;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none;
  border: 0;
}

.kali-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.kali-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--kali-sand);
}

/* Absolute fill guarantees the image covers the 4/5 box whatever its intrinsic
   ratio (square packshots and portrait lifestyle shots alike). aspect-ratio
   derives height from width, immune to Kadence's ".woocommerce img{height:auto}";
   the extra class raises specificity above it. */
.kali-card .kali-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0;
  transition: transform .7s ease;
}

.kali-card__link:hover .kali-card__media img {
  transform: scale(1.04);
}

/* "APERÇU RAPIDE" dark bar sliding up on hover (mockup). */
.kali-card__quick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--kali-dark);
  color: var(--kali-surface);
  text-align: center;
  padding: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .3s ease, transform .3s ease;
}

.kali-card__link:hover .kali-card__quick,
.kali-card__link:focus-visible .kali-card__quick {
  opacity: 1;
  transform: none;
}

/* Product info centered under the image (live KALI site): full name centered,
   price centered below it. */
.kali-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 13px;
  text-align: center;
}

/* Full name, never truncated, centered, wraps freely (handoff 14px/600). */
.kali-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--kali-dark);
  overflow-wrap: anywhere;
}

.kali-card__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--kali-dark);
  white-space: nowrap;
}

.kali-card__price del {
  opacity: .5;
  font-weight: 400;
  margin-right: 6px;
}

.kali-card__price ins {
  text-decoration: none;
}

.kali-card__swatches {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
}

.kali-card__swatch {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--kali-line);
}

/* dark surfaces (related strip): light text on the same card. */
.kali-dark .kali-card__name,
.single-product .related.products .kali-card__name,
.single-product .up-sells.products .kali-card__name {
  color: var(--kali-surface);
}

.kali-dark .kali-card__price,
.single-product .related.products .kali-card__price,
.single-product .up-sells.products .kali-card__price {
  color: var(--kali-taupe);
}

/* ---------- shop archives & single product (Kadence surfaces) ---------- */

.woocommerce-products-header h1,
h1.woocommerce-products-header__title,
.product-archive-title h1 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

/* sidebar (Location filter) */
.primary-sidebar.widget-area .widget-title,
.primary-sidebar .widget-title {
  font-size: 11px !important;
  letter-spacing: .2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kali-terra) !important;
  margin-bottom: 10px;
}

.primary-sidebar .woocommerce-widget-layered-nav-list a::before,
.primary-sidebar .woocommerce-widget-layered-nav-list li::before {
  display: none !important;
  content: none !important;
}

/* FILTRES panel (handoff) */
.kali-filters-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.kali-filters-head h2 {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
}

.kali-filters-head .kali-reset {
  font-size: 12px;
  color: var(--kali-taupe);
  text-decoration: underline;
}

/* Active filters: what the shop is currently filtered on, one removable chip
   each. Sits above the product grid, in the eyeline of the results it
   restricts. Only rendered when at least one filter is on. */
.kali-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 18px;
}

.kali-active-filters__clear,
.widget-area .kali-active-filters__clear {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kali-taupe);
  text-decoration: underline;
  margin-left: 4px;
}

.kali-active-filters__clear:hover,
.kali-active-filters__clear:focus {
  color: var(--kali-terra);
}

/* Kadence colors sidebar links with `.widget-area a:where(...)` (0,1,1), which
   outweighs a single class: the chips came out ink on ink, unreadable. Same
   selector weight here, nothing !important. */
.kali-active-filters__chip,
.widget-area .kali-active-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--kali-dark);
  background: var(--kali-dark);
  color: var(--kali-surface);
  padding: 6px 10px 6px 12px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
}

.kali-active-filters__chip:hover,
.kali-active-filters__chip:focus,
.widget-area .kali-active-filters__chip:hover,
.widget-area .kali-active-filters__chip:focus {
  background: var(--kali-terra);
  border-color: var(--kali-terra);
  color: var(--kali-surface);
}

.kali-active-filters__x {
  font-size: 14px;
  line-height: 1;
}

/* The filter column scrolls with the page, full stop.
   It used to be sticky with its own overflow, which capped it at the viewport
   height: with 1316px of groups in an 848px box, 468px of filters were locked
   inside a nested scroller nobody expects, and the wheel over the column moved
   that inner box instead of the page. A sticky column only works while it fits
   on screen, and six groups never will - so the column stays in the flow and
   the page carries it. Below 992px the mobile bottom sheet takes over. */

/* --- WooCommerce Product Filters block on charte --------------------------
   Kadence + WooCommerce ship this block in their own skin (bold black titles,
   fixed-width price inputs that overflow a narrow column, blue overlay link).
   These rules give it the same language as the hand-made column. */
.wp-block-woocommerce-product-filters {
  display: flex;
  width: 100%;
  min-width: 0;
}

.wp-block-woocommerce-product-filters .wp-block-heading {
  font-size: 11px;
  letter-spacing: .2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kali-terra);
  margin: 0 0 12px;
}

.wp-block-woocommerce-product-filters > * {
  min-width: 0;
}

/* Price: the two amounts sat side by side at a fixed width and spilled over the
   product grid as soon as the column narrowed. They share the row and shrink. */
.wc-block-product-filter-price-slider__content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.wc-block-product-filter-price-slider__range {
  flex: 1 0 100%;
  min-width: 0;
}

.wc-block-product-filter-price-slider__left,
.wc-block-product-filter-price-slider__right {
  flex: 1 1 calc(50% - 5px);
  min-width: 0;
  max-width: 160px;
}

.wc-block-product-filter-price-slider__content input[type="text"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--kali-line);
  border-radius: 0;
  padding: 8px 6px;
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  color: var(--kali-dark);
}

.wc-block-product-filter-price-slider .range-bar {
  background: var(--kali-dark);
}

/* Sizes and category rows: same pills and same rows as the hand-made column. */
.wc-block-product-filter-chips__item {
  border: 1px solid var(--kali-line);
  border-radius: 0;
  background: var(--kali-surface);
  color: var(--kali-dark);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 10px;
}

.wc-block-product-filter-chips__item[aria-checked="true"] {
  background: var(--kali-dark);
  border-color: var(--kali-dark);
  color: var(--kali-surface);
}

.wc-block-product-filter-checkbox-list__label,
.wc-block-product-filter-checkbox-list__text,
.wc-block-product-filter-checkbox-list__count,
.wc-block-product-filters__close-overlay,
.wc-block-product-filters__close-overlay span,
.wc-block-product-filter-removable-chips__label {
  font-size: 13px;
  color: var(--kali-dark);
}

.wc-block-product-filter-checkbox-list__count {
  color: var(--kali-taupe);
}

/* Mobile: the overlay opener is a plain blue link out of the box. */
.wc-block-product-filters__open-overlay {
  width: 100%;
  justify-content: center;
  border: 1px solid var(--kali-dark) !important;
  padding: 12px 14px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kali-dark);
  background: var(--kali-surface);
}

/* Mobile header: the search label pushed the cart past the right edge (cart
   item measured from x=347 to x=426 in a 390px window). The icon stays, the
   word goes - the button keeps its aria-label. */
@media (max-width: 600px) {
  #masthead .search-toggle-open::after {
    content: none;
  }

  #masthead .search-toggle-open .kadence-svg-iconset,
  #masthead .search-toggle-open svg {
    display: inline-flex;
  }
}

/* The block's mobile opener is a bare blue link; the label carries the color,
   not the button. */
.wc-block-product-filters__open-overlay span,
.wc-block-product-filters__open-overlay svg {
  color: var(--kali-dark);
  fill: var(--kali-dark);
}

/* The product grid of a Product Collection: same 3 / 2 / 2 rhythm as the shop
   archive, instead of the block's own flex row. */
.wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
}

/* Two columns only while there is room for both. Core pins
   `.wp-block-columns` to `flex-wrap: nowrap !important` above 782px, so the
   stacking has to answer at the same weight - otherwise the filters keep a
   half-width column and the grid gets 379px for three products. */
@media (max-width: 1024px) {
  .wp-block-columns:has(.wp-block-woocommerce-product-filters) {
    flex-wrap: wrap !important;
  }

  .wp-block-columns:has(.wp-block-woocommerce-product-filters) > .wp-block-column {
    flex-basis: 100% !important;
  }

  .wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The column follows the grid on desktop: changing a size after scrolling
   three rows down should not cost a trip back to the top.

   No inner scroller this time. The first sticky column (2.31.2) came with
   `max-height:100vh; overflow-y:auto`, which locked 468px of filters inside a
   nested lift and stole the wheel from the page. Here the column keeps its
   natural height and `--kali-filters-top` (set by kali-filters.js) decides
   what sticks: the top edge while the whole column fits under the header, the
   bottom edge - a negative offset - once it is taller than the viewport
   (973px against 900px today). Fallback without JavaScript: sticks to the top,
   same as any sticky sidebar. */
@media (min-width: 992px) {
  .primary-sidebar .sidebar-inner-wrap {
    position: sticky;
    top: var(--kali-filters-top, 24px);
  }
}

.primary-sidebar section.widget {
  margin: 0 0 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--kali-line);
}

.primary-sidebar section.widget:last-child {
  border-bottom: none;
}

.primary-sidebar .wp-block-heading {
  font-size: 11px;
  letter-spacing: .2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kali-terra);
  margin: 0 0 14px;
}

/* Type: category rows with checkbox look and right-aligned counts */
.primary-sidebar .widget_product_categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-sidebar .widget_product_categories li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.35;
}

/* Twelve types stacked one per row ate 522px of column on their own - more
   than half the fold - and pushed TAILLE, the other filter people buy on, off
   screen. Two columns of six cost 12px of label width (the longest, CARE &
   BEAUTY, still fits) and give back ~310px of height. Reading stays
   left-to-right alphabetical. Desktop only: the mobile drawer scrolls and has
   no height to save, so it keeps its single column. */
@media (min-width: 992px) {
  .primary-sidebar .widget_product_categories ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }
}

/* The one square every tick-box in the column is drawn with.
   The browser default was the last thing in here still wearing the OS skin,
   next to hand-drawn chips and colour dots - which is exactly what read as
   "template". Sand border (taupe, the darkest sand of the charte: a lighter
   one drops the control under the 3:1 contrast floor a form element owes),
   terracotta fill and a white tick when checked.

   The square hangs off the LINK, never off the row: drawn on `li::before` it
   sat outside the only clickable element on the row, so clicking the box did
   nothing at all (elementFromPoint over it returned the LI) while the label
   next to it filtered. A control that looks like a checkbox must be part of
   the hit target. */
.primary-sidebar .widget_product_categories a::before,
.kali-instock-box {
  content: "";
  /* inline-block, not the default inline: WooCommerce keeps the category link
     in `display:block` at a weight a lone class cannot reach, so the square is
     not always a flex item. Inline, width and height are simply ignored and the
     box collapses to its two side borders - a hairline, which is exactly what
     it rendered as. */
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid var(--kali-taupe);
  background: var(--kali-surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  flex-shrink: 0;
  transition: background-color .12s ease, border-color .12s ease;
}

.primary-sidebar .widget_product_categories li.current-cat a::before,
.kali-instock-box.on {
  border-color: var(--kali-terra);
  background-color: var(--kali-terra);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23F6F2EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.4 4.7 9 10 3.2'/%3E%3C/svg%3E");
}

.primary-sidebar .widget_product_categories a:hover::before,
.kali-instock-filter a:hover .kali-instock-box {
  border-color: var(--kali-terra);
}

/* The square is a pseudo-element of the link, so the keyboard ring goes on the
   same element the pointer hits. */
.primary-sidebar .widget_product_categories a:focus-visible::before,
.kali-instock-filter a:focus-visible .kali-instock-box {
  outline: 2px solid var(--kali-terra);
  outline-offset: 2px;
}

.primary-sidebar .widget_product_categories a:focus-visible,
.kali-instock-filter a:focus-visible {
  outline: none; /* the ring is on the box, one ring per control */
  color: var(--kali-terra);
}

/* The link carries the square AND the label: one hit target per row, box
   included. The `display:flex` needs the same weight as WooCommerce's own
   `.woocommerce.widget_product_categories > ul li a` (0,2,3), which pins the
   link to `display:block`; at (0,2,1) the rule was simply dropped. */
.primary-sidebar .widget_product_categories a,
.primary-sidebar .woocommerce.widget_product_categories > ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--kali-dark);
  text-decoration: none;
  text-transform: none;
  flex: 1;
  min-width: 0;
}

/* Kadence rules every category link (woocommerce.min.css, (0,2,3) - a lone
   class never reached it). One rule per row read as a list while the group was
   a single column; in two columns it draws a table nobody asked for. The
   checkbox already separates the rows. */
.primary-sidebar .woocommerce.widget_product_categories > ul li a {
  border-bottom: 0;
}

.primary-sidebar .widget_product_categories a:hover {
  color: var(--kali-terra);
}

.primary-sidebar .widget_product_categories .count {
  margin-left: auto;
  color: var(--kali-taupe);
  font-size: 13px;
}

/* Couleur: compact row of colour dots (official Kali Catégorie mockup) */
.kali-color-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.kali-color-dot {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color .15s ease;
}

.kali-color-dot span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--kali-line);
}

.kali-color-dot:hover {
  border-color: var(--kali-muted);
}

/* The name of a colour on hover: the dots stay on one row (a labelled list
   would eat the column), so the label shows on demand. Native title waits a
   second and renders in the OS skin; this one is immediate and on charte.
   Anchored on the left of the dot, never centred: the column scrolls, so a
   tooltip sticking out to the left would be clipped. */
.kali-color-dot::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 5;
  background: var(--kali-dark);
  color: var(--kali-surface);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.kali-color-dot:hover::after,
.kali-color-dot:focus-visible::after {
  opacity: 1;
}

/* Last dots of a row: the label unfolds to the left so it stays in the column. */
.kali-color-filter .kali-color-dot:nth-child(n+6)::after {
  left: auto;
  right: 0;
}

.kali-color-dot.is-active {
  border-color: var(--kali-terra);
}

.kali-color-reset {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 11px;
  color: var(--kali-taupe);
  text-decoration: underline;
}

.kali-color-reset:hover {
  color: var(--kali-terra);
}

.primary-sidebar ul.woocommerce-widget-layered-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.primary-sidebar .woocommerce-widget-layered-nav-list a {
  display: inline-block;
  border: 1px solid var(--kali-line);
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kali-dark);
  background: var(--kali-surface);
}

.primary-sidebar .woocommerce-widget-layered-nav-list a:hover,
.primary-sidebar .woocommerce-widget-layered-nav-list li.chosen a {
  background: var(--kali-dark);
  color: var(--kali-surface);
  border-color: var(--kali-dark);
}

/* Counts were hidden here while TYPE printed its own: a column that counts in
   one group and stays silent in the next reads as unfinished. Every group
   counts now (colour keeps its count in the hover label - a dot has no room
   for a figure). kali_layered_nav_term_html() moves the count inside the chip
   and drops the parentheses: at this weight the figure separates on its own. */
.primary-sidebar .woocommerce-widget-layered-nav-list .count {
  color: inherit;
  opacity: .55;
  font-weight: 500;
  font-size: 11px;
}

/* TAILLE chips = uniform squares (mockup), not text-width pills. Scoped to the
   size widget so the RÉGION widget keeps its wider label chip. */
#woocommerce_layered_nav-3 .woocommerce-widget-layered-nav-list {
  gap: 8px;
}

/* The count sits UNDER the size, not beside it. Side by side on a baseline in a
   fixed 38px box, the pair hung from the top edge and left the bottom third
   empty - the chip read as broken rather than as a square. Stacked and centred,
   with the same padding all round, the box breathes and the figure stops
   fighting the letter for the same line. Height comes from the content, so the
   air above and below is equal by construction. */
#woocommerce_layered_nav-3 .woocommerce-widget-layered-nav-list a {
  min-width: 46px;
  padding: 8px 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1.15;
  text-align: center;
}

#woocommerce_layered_nav-3 .woocommerce-widget-layered-nav-list .count {
  display: block;
}

#woocommerce_layered_nav-3 .woocommerce-widget-layered-nav-list li {
  display: inline-flex;
}

/* category dark header band (official Kali Catégorie mockup) */
.kali-archive-head {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: var(--kali-dark);
  color: var(--kali-surface);
  padding: 52px 44px 46px;
}

.kali-archive-head__crumb {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--kali-taupe);
  margin-bottom: 20px;
}

.kali-archive-head__crumb a {
  color: var(--kali-taupe);
  text-decoration: none;
}

.kali-archive-head__crumb a:hover {
  color: var(--kali-terra);
}

.kali-archive-head__crumb span {
  color: var(--kali-surface);
}

.kali-archive-head__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}

.kali-archive-head__num {
  font-size: 11px;
  letter-spacing: .28em;
  font-weight: 700;
  color: var(--kali-terra);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.kali-archive-head__title {
  font-weight: 900;
  font-size: clamp(40px, 5.4vw, 76px);
  letter-spacing: -.035em;
  text-transform: uppercase;
  line-height: .9;
  margin: 0;
  color: var(--kali-surface);
}

.kali-archive-head__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--kali-muted);
  max-width: 380px;
  margin: 0;
}

/* Kadence's own beige archive title is disabled in setup; hide any residue. */
.woocommerce-products-header,
.product-archive-title,
.archive .page-hero-section {
  display: none;
}

/* "Complétez le look" dark cross-sell (mockup). Content-width (not full-bleed):
   this block sits deep in the Woo content wrappers where a 100vw breakout
   overflowed and clipped the last card. */
.kali-ctl {
  background: var(--kali-dark);
  color: var(--kali-surface);
  padding: 64px 44px;
  margin-top: 40px;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.kali-ctl__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
  gap: 20px;
  flex-wrap: wrap;
}

.kali-ctl__head h2 {
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--kali-surface);
}

.kali-ctl__head a {
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kali-surface);
  text-decoration: none;
}

.kali-ctl__head a:hover {
  color: var(--kali-terra);
}

.kali-ctl__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kali-ctl__item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.kali-ctl__img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--kali-night);
}

/* Absolute fill: square packshots and portrait shots both cover the 4/5 box.
   aspect-ratio (not just height:100%) derives the height from the width, so it
   survives Kadence's ".woocommerce img{height:auto}" which ties on specificity;
   the extra class also raises specificity above it. */
.kali-ctl .kali-ctl__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .7s ease;
}

.kali-ctl__item:hover .kali-ctl__img img {
  transform: scale(1.05);
}

.kali-ctl__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 11px;
  gap: 10px;
}

.kali-ctl__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--kali-surface);
}

.kali-ctl__price {
  font-size: 13px;
  color: var(--kali-taupe);
}

.kali-ctl__price .amount {
  color: var(--kali-taupe);
}

@media (max-width: 1024px) {
  .kali-ctl__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* sidebar PRIX (native WC price filter) + DISPONIBILITÉ, on-charte */
.primary-sidebar .widget_price_filter .price_slider_wrapper {
  margin-top: 4px;
}

.primary-sidebar .widget_price_filter .ui-slider {
  margin: 14px 8px 18px;
}

/* FILTRER (left) + range label (right) on one aligned row, not floated. */
.primary-sidebar .widget_price_filter .price_slider_amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.primary-sidebar .widget_price_filter .price_slider_amount .button {
  background: var(--kali-dark);
  color: var(--kali-surface);
  border: none;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 18px;
  order: 1;
  float: none;
  margin: 0;
}

.primary-sidebar .widget_price_filter .price_slider_amount .button:hover {
  background: var(--kali-terra);
}

.primary-sidebar .widget_price_filter .ui-slider .ui-slider-range,
.primary-sidebar .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--kali-terra);
}

.primary-sidebar .widget_price_filter .price_label {
  font-size: 12px;
  color: var(--kali-taupe);
  order: 2;
  float: none;
  margin: 0;
}

.kali-instock-filter label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
}

.kali-instock-filter a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--kali-dark);
  text-decoration: none;
}

.kali-instock-filter a:hover {
  color: var(--kali-terra);
}

/* PRIX: two-handle slider, no heading, no submit button. The whole group is
   ~50px tall against ~110px for the three brackets it replaces - the height
   that puts TYPE and TAILLE back above the fold. */
.kali-price-range {
  padding: 2px 0 0;
}

.kali-price-range__track {
  --kali-lo: 0%;
  --kali-hi: 100%;
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
}

/* The rail, and over it the selected span. */
.kali-price-range__track::before,
.kali-price-range__fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--kali-sand);
}

.kali-price-range__fill {
  left: var(--kali-lo);
  right: calc(100% - var(--kali-hi));
  background: var(--kali-terra);
}

/* Both inputs share the rail, one stacked on the other, each transparent so
   only the drawn rail shows.
   Splitting the grab between them is done with clip-path, which clips hit
   testing as well as paint: the min input answers left of the midpoint between
   the handles, the max input right of it, plus half a thumb of overlap each
   way so neither handle is ever drawn cut in half. Marking the thumbs
   pointer-events:auto over a pointer-events:none input - the usual recipe -
   left nothing grabbable at all in Chromium: the slider only moved with the
   keyboard. The midpoint is kept up to date by kali-filters.js. */
/* Selector weight on purpose: Kadence dresses every input, `input[type=range]`
   included, with a border, a radius, a padding and a background. It outweighs a
   lone class, so the rail was hidden under an opaque field and the control came
   out as a pale blue box. This one is (0,2,1) and undresses it. */
.kali-price-range input[type="range"] {
  position: absolute;
  left: 0;
  width: 100%;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.kali-price-range input[type="range"].kali-price-range__in--lo {
  z-index: 3;
  clip-path: inset(0 calc(100% - var(--kali-mid, 50%) - 8px) 0 0);
}

.kali-price-range input[type="range"].kali-price-range__in--hi {
  z-index: 4;
  clip-path: inset(0 0 0 calc(var(--kali-mid, 50%) - 8px));
}

.kali-price-range input[type="range"]::-webkit-slider-runnable-track {
  height: 22px;
  background: transparent;
  border: 0;
}

.kali-price-range input[type="range"]::-moz-range-track {
  height: 22px;
  background: transparent;
  border: 0;
}

.kali-price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid var(--kali-terra);
  background: var(--kali-surface);
  box-shadow: 0 1px 2px rgba(23, 20, 15, .18);
  cursor: pointer;
}

.kali-price-range input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--kali-terra);
  background: var(--kali-surface);
  box-shadow: 0 1px 2px rgba(23, 20, 15, .18);
  cursor: pointer;
}

.kali-price-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--kali-terra);
  outline-offset: 2px;
}

.kali-price-range input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--kali-terra);
  outline-offset: 2px;
}

/* The two amounts ARE the label of the group: there is no "PRIX" title. */
.kali-price-range__out {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--kali-dark);
}

.kali-price-range__sep {
  color: var(--kali-taupe);
  margin: 0 2px;
}

/* RÉGION DE LIVRAISON chips: every region the brand serves, padded (not the
   flush layered-nav link). Active = filled, not stocked yet = greyed out. */
.kali-region-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kali-region-filter a,
.kali-region-filter .kali-region-chip {
  display: inline-block;
  border: 1px solid var(--kali-line);
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kali-dark);
  background: var(--kali-surface);
}

.kali-region-filter a:hover,
.kali-region-filter a.on {
  background: var(--kali-dark);
  color: var(--kali-surface);
  border-color: var(--kali-dark);
}

.kali-region-filter a .count {
  opacity: .55;
  font-weight: 500;
  margin-left: 2px;
}

/* A region the brand serves but does not stock yet: named, so the shopper
   knows KALI ships there, and inert - no link, nothing to click into an empty
   shop. It turns back into a real chip on its own once a piece is stocked. */
.kali-region-filter .is-disabled {
  opacity: .4;
  cursor: default;
}

/* shop toolbar (handoff): "N pièces" + sort chips */
.kali-shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 28px;
}

.kali-shop-count {
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kali-taupe);
}

.kali-shop-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kali-shop-sort__label {
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 4px;
}

.kali-shop-sort a {
  border: 1px solid var(--kali-line);
  background: var(--kali-surface);
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--kali-dark);
  text-decoration: none;
}

.kali-shop-sort a:hover {
  border-color: var(--kali-dark);
}

.kali-shop-sort a.is-active {
  background: var(--kali-dark);
  border-color: var(--kali-dark);
  color: var(--kali-surface);
}

/* archive grid: Kadence tags the list with grid-lg-col-N (3 with the sidebar, per mockup) */
.woocommerce ul.products.columns-3,
.woocommerce ul.products.grid-lg-col-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.woocommerce ul.products.columns-2,
.woocommerce ul.products.grid-lg-col-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* single product */
.single-product div.product .product_title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.single-product div.product p.price {
  font-size: 22px;
  font-weight: 800;
  color: var(--kali-dark);
}

.single-product div.product p.price del {
  opacity: .5;
  font-weight: 400;
}

.single-product div.product p.price ins {
  text-decoration: none;
}

.single-product div.product form.cart .button,
.woocommerce a.checkout-button,
.woocommerce button.button.alt {
  background: var(--kali-terra);
  color: var(--kali-dark);
  border-radius: 0;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 15px 30px;
  border: 1px solid var(--kali-terra);
}

.single-product div.product form.cart .button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce button.button.alt:hover {
  background: var(--kali-terra-deep);
  border-color: var(--kali-terra-deep);
  color: var(--kali-surface);
}

.single-product div.product form.cart .button {
  line-height: 1.2;
}

/* ---------- variation swatches (handoff pills) ---------- */

.kali-swatch-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.kali-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.kali-swatch {
  border-radius: 0;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.kali-swatch--text {
  background: var(--kali-surface);
  border: 1px solid var(--kali-line);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kali-dark);
}

.kali-swatch--text:hover {
  border-color: var(--kali-dark);
  background: var(--kali-surface);
  color: var(--kali-dark);
}

.kali-swatch--text.selected {
  background: var(--kali-dark);
  border-color: var(--kali-dark);
  color: var(--kali-surface);
}

.kali-swatch--dot {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  padding: 3px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kali-swatch__dot {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--kali-line);
}

.kali-swatch--dot:hover {
  border-color: var(--kali-muted);
}

.kali-swatch--dot.selected {
  border-color: var(--kali-terra);
}

.kali-swatch.disabled {
  opacity: .3;
  cursor: not-allowed;
  text-decoration: line-through;
}

.kali-swatch--dot.disabled {
  text-decoration: none;
}

.single-product div.product table.variations th.label {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding-right: 18px;
}

.single-product div.product table.variations td.value {
  padding: 6px 0;
}

.single-product div.product form.cart .quantity .qty,
.single-product div.product table.variations select {
  border: 1px solid var(--kali-line);
  border-radius: 0;
  background: var(--kali-surface);
}

.woocommerce span.onsale {
  background: var(--kali-terra);
  color: var(--kali-surface);
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.single-product .related > h2,
.single-product .up-sells > h2 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

/* ---------- edition terrarose : tuile editoriale + grille 2x2 (mockup) ---------- */

.kali-terra-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.kali-terra-split > * {
  margin-block-start: 0 !important;
}

.kali-lead-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--kali-night);
  min-height: 520px;
  height: 100%;
}

.kali-lead-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.kali-lead-tile:hover img {
  transform: scale(1.03);
}

.kali-lead-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 20, 15, 0) 50%, rgba(23, 20, 15, .65));
}

.kali-lead-tile__kicker {
  position: absolute;
  left: 24px;
  top: 22px;
  z-index: 1;
  background: var(--kali-terra);
  color: var(--kali-dark);
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: .2em;
  font-weight: 800;
  text-transform: uppercase;
}

.kali-lead-tile__cap {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  color: var(--kali-surface);
}

.kali-lead-tile__name {
  font-weight: 900;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.kali-lead-tile__count {
  background: var(--kali-terra);
  color: var(--kali-dark);
  padding: 12px 22px;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- cercle kali (newsletter band) ---------- */

.kali-cercle {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  background: url(assets/img/campaign.jpg) center 30% / cover no-repeat var(--kali-dark);
  /* Same deal as the hero: the band sits under a 75% dark gradient, so the
     WebP can be compressed hard without anything showing. */
  background-image: image-set(url(assets/img/campaign.webp) type("image/webp"), url(assets/img/campaign.jpg) type("image/jpeg"));
}

.kali-cercle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 20, 15, .75), rgba(23, 20, 15, .3));
}

.kali-cercle__inner {
  position: relative;
  z-index: 1;
  padding: 64px 56px;
  color: var(--kali-surface);
  max-width: 680px;
}

.kali-cercle__inner .kali-title {
  color: var(--kali-surface);
  font-size: clamp(38px, 5vw, 60px);
  line-height: .92;
}

.kali-cercle__inner p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--kali-muted);
  max-width: 400px;
  margin: 20px 0 30px;
}

/* ---------- footer (Kadence builder + block widgets) ---------- */

#colophon {
  background: var(--kali-dark);
  color: var(--kali-surface);
}

#colophon .site-footer-row-container {
  background: transparent;
}

#colophon a {
  color: var(--kali-muted);
  text-decoration: none;
}

#colophon a:hover {
  color: var(--kali-terra);
}

#colophon p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--kali-taupe);
}

.kali-footer__label {
  font-size: 11px !important;
  letter-spacing: .2em;
  color: var(--kali-taupe) !important;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 16px !important;
}

#colophon ul.wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13px;
}

.kali-logo--footer {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--kali-surface) !important;
  text-decoration: none;
}

.kali-logo--footer:hover {
  color: var(--kali-terra) !important;
}

#colophon .footer-html {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kali-taupe);
}

/* The legal links sit inside a sentence of the same colour family, so colour
   alone did not tell them apart (Lighthouse link-in-text-block). Underline is
   the fix that does not touch the palette. */
#colophon .footer-html a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- home page container reset (fullwidth/unboxed page) ---------- */

body.home .content-area {
  margin: 0;
  padding: 0;
  max-width: none;
}

body.home .content-container,
body.home .site-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body.home .entry-content {
  margin: 0;
}

body.home .entry-content > * {
  margin-block-start: 0;
}

/* ---------- mobile shop bar, drawer & add bar (desktop: hidden) ----------
   Per the "Kali Mobile" handoff: M2 FILTRER/TRIER bar, M3 bottom-sheet
   filters, M4 sticky add-to-cart bar. Markup comes from kali_shop_toolbar()
   (bar) and assets/kali-mobile.js (scrim, drawer footer, chips, add bar). */

.kali-mshop,
.kali-mchips,
.kali-drawer-scrim,
.kali-drawer-foot,
.kali-addbar {
  display: none;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .kali-section {
    padding: 56px 20px;
  }

  .kali-hero {
    grid-template-columns: 1fr;
  }

  .kali-hero__copy {
    padding: 48px 24px 40px;
  }

  .kali-hero__img {
    min-height: 340px;
  }

  .kali-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kali-specs__item {
    border-bottom: 1px solid var(--kali-line);
  }

  .kali-specs__item:nth-child(even) {
    border-right: none;
  }

  .kali-terra-split {
    grid-template-columns: 1fr;
  }

  .kali-lead-tile {
    min-height: 340px;
  }

  .kali-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 210px;
  }

  .kali-universe {
    grid-template-columns: 1fr;
  }

  .kali-colors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :is(.kali-products, .woocommerce) ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- shop archive as bottom-sheet (M2 + M3) ----------
   1024px = the width where Kadence stacks the sidebar under the grid,
   which is useless for filters: it becomes the drawer instead. */

@media (max-width: 1024px) {
  .kali-shop-toolbar {
    display: block;
    margin: 0 0 16px;
  }

  .kali-shop-count {
    display: none;
  }

  /* FILTRER | TRIER bar, edge to edge */
  .kali-mshop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--kali-line);
    border-bottom: 1px solid var(--kali-line);
  }

  .kali-mshop button {
    background: none;
    border: none;
    border-radius: 0;
    padding: 13px;
    text-align: center;
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kali-dark);
    cursor: pointer;
  }

  .kali-mshop__filter {
    border-right: 1px solid var(--kali-line) !important;
  }

  /* Pas de glyphe decoratif : U+26C3 sortait en carre noir (police absente) et
     U+2195 en fleche bleue (presentation emoji). Les libelles suffisent. */

  /* TRIER: the sort chips unfold under the bar */
  .kali-shop-sort {
    display: none;
    padding: 14px 0 4px;
  }

  body.kali-sort-open .kali-shop-sort {
    display: flex;
  }

  .kali-shop-sort__label {
    display: none;
  }

  /* active filter chips row (built by kali-mobile.js) */
  .kali-mchips {
    display: flex;
    gap: 8px;
    padding: 14px 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .kali-mchips:empty {
    display: none;
  }

  .kali-mchip {
    background: var(--kali-dark);
    color: var(--kali-surface);
    padding: 7px 13px;
    font-size: 10px;
    letter-spacing: .08em;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
  }

  .kali-mchip--count {
    background: none;
    border: 1px solid rgba(23, 20, 15, .3);
    color: var(--kali-taupe);
  }

  /* the archive grid drops to 2 columns whatever grid-lg-col-N Kadence set */
  .woocommerce ul.products.grid-lg-col-3,
  .woocommerce ul.products.grid-lg-col-4,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ...except on a tablet, where the sidebar has already left: 2 columns there
     meant 420px-wide cards. Three fit comfortably from 768px up. */
  @media (min-width: 768px) {
    .woocommerce ul.products.grid-lg-col-3,
    .woocommerce ul.products.grid-lg-col-4,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* sidebar -> bottom sheet (padding !important: Kadence sidebar rules win otherwise) */
  .primary-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 12%;
    z-index: 9990;
    margin: 0;
    box-sizing: border-box;
    background: var(--kali-cream);
    border-radius: 24px 24px 0 0;
    padding: 22px 20px 110px !important;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(105%);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    visibility: hidden;
    max-width: none;
    width: auto;
  }

  .primary-sidebar .sidebar-inner-wrap {
    padding: 0;
    width: auto;
    max-width: 100%;
  }

  body.kali-drawer-open .primary-sidebar {
    transform: none;
    visibility: visible;
  }

  body.kali-drawer-open {
    overflow: hidden;
  }

  .kali-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 9989;
    background: rgba(23, 20, 15, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
  }

  body.kali-drawer-open .kali-drawer-scrim {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  /* EFFACER / VOIR N PIÈCES */
  body.kali-drawer-open .kali-drawer-foot {
    display: flex;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 9991;
    gap: 10px;
  }

  .kali-drawer-foot__clear {
    flex: 1;
    text-align: center;
    border: 1px solid var(--kali-dark);
    background: var(--kali-cream);
    padding: 15px;
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kali-dark);
    text-decoration: none;
  }

  .kali-drawer-foot__see {
    flex: 1.6;
    text-align: center;
    background: var(--kali-terra);
    border: 1px solid var(--kali-terra);
    border-radius: 0;
    color: var(--kali-dark);
    padding: 15px;
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* full-height grid while the sidebar is a drawer */
  .content-wrap.right-sidebar .content-container,
  .content-wrap.left-sidebar .content-container {
    display: block;
  }
}

/* ---------- phone layouts (M1 / M4 / M5) ---------- */

@media (max-width: 767px) {
  .kali-section {
    padding: 44px 18px;
  }

  /* M1 hero: the image becomes the backdrop, copy overlaid at the bottom */
  .kali-hero {
    display: block;
    position: relative;
    min-height: 560px;
  }

  .kali-hero__img {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .kali-hero__copy {
    position: relative;
    z-index: 1;
    min-height: 560px;
    justify-content: flex-end;
    gap: 0;
    padding: 24px 22px 30px;
    background: linear-gradient(180deg, rgba(23, 20, 15, .08) 30%, rgba(23, 20, 15, .62));
  }

  .kali-hero__meta {
    margin-bottom: 6px;
    color: rgba(246, 242, 234, .85);
  }

  .kali-hero h1 {
    font-size: 40px;
    margin: 10px 0 0;
  }

  .kali-hero__foot {
    margin-top: 20px;
  }

  .kali-hero__lede {
    display: none;
  }

  /* M1 vestiaire: 2-col tiles, the lead tile full width */
  .kali-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
  }

  .kali-bento__item {
    aspect-ratio: 3 / 4;
  }

  .kali-bento__item:first-child {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 3 / 2;
  }

  .kali-colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kali-cercle__inner {
    padding: 48px 24px;
  }

  /* product cards: name left, price right on one row */
  :is(.kali-products, .woocommerce) ul.products {
    gap: 22px 10px;
  }

  .kali-card__info {
    gap: 8px;
    margin-top: 9px;
  }

  .kali-card__name,
  .kali-card__price {
    font-size: 12px;
  }

  /* mobile drawer menu on-charte */
  #mobile-drawer .drawer-inner {
    background: var(--kali-cream);
  }

  #mobile-drawer .drawer-inner .mobile-navigation ul li a {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kali-dark);
  }

  /* M4 product: sticky add bar (built by kali-mobile.js) */
  .kali-addbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9980;
    background: var(--kali-dark);
    color: var(--kali-surface);
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
  }

  .kali-addbar__price {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kali-addbar__price del {
    opacity: .5;
    font-weight: 400;
    margin-right: 6px;
  }

  .kali-addbar__price ins {
    text-decoration: none;
  }

  .kali-addbar__btn {
    background: var(--kali-terra);
    border: 1px solid var(--kali-terra);
    border-radius: 0;
    color: var(--kali-dark);
    padding: 14px 28px;
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
  }

  body.kali-has-addbar.single-product {
    padding-bottom: 74px;
  }

  /* the sticky bar is the only CTA: hide the in-form button and the qty
     stepper (M4 has none; quantities stay editable in the cart).
     .kali-qty repeated: the desktop stepper rule is more specific. */
  body.kali-has-addbar.single-product form.cart .single_add_to_cart_button,
  body.kali-has-addbar.single-product form.cart .quantity,
  body.kali-has-addbar.single-product div.product form.cart .quantity.kali-qty {
    display: none;
  }

  .single-product div.product .product_title {
    font-size: 30px;
    line-height: .95;
  }

  /* gallery thumbs: one scrollable row instead of a wrapped grid */
  .single-product .woocommerce-product-gallery ol.flex-control-thumbs {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 10px 0 0;
    padding: 0;
  }

  .single-product .woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 64px;
    width: 64px;
    float: none;
    margin: 0;
  }

  .single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 64px;
    height: 64px;
    object-fit: cover;
  }

  /* M5 cart / checkout */
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .woocommerce form .form-row textarea,
  .woocommerce-cart .cart .quantity .qty {
    background: var(--kali-surface);
    border: 1px solid rgba(23, 20, 15, .25);
    border-radius: 0;
    padding: 12px 14px;
    font-size: 14px;
  }

  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    background: var(--kali-dark);
    color: var(--kali-surface);
    padding: 20px;
    margin: 0;
  }

  .woocommerce-checkout #order_review_heading {
    padding-bottom: 0;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.01em;
    font-size: 18px;
  }

  .woocommerce-checkout #order_review table.shop_table {
    background: transparent;
    border: none;
    color: var(--kali-surface);
  }

  .woocommerce-checkout #order_review table.shop_table td,
  .woocommerce-checkout #order_review table.shop_table th {
    border-color: var(--kali-line-light);
    background: transparent;
    color: inherit;
  }

  .woocommerce-checkout #order_review a {
    color: var(--kali-muted);
  }

  .woocommerce-checkout #order_review .woocommerce-privacy-policy-text {
    color: var(--kali-taupe);
    font-size: 12px;
  }

  .woocommerce #payment,
  .woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
  }

  .woocommerce-checkout #payment div.payment_box {
    background: rgba(246, 242, 234, .08);
    color: var(--kali-muted);
  }

  .woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: rgba(246, 242, 234, .08);
  }

  .woocommerce #payment #place_order {
    display: block;
    width: 100%;
    background: var(--kali-terra);
    border: 1px solid var(--kali-terra);
    border-radius: 0;
    color: var(--kali-dark);
    padding: 17px;
    font-size: 12px;
    letter-spacing: .16em;
    font-weight: 800;
    text-transform: uppercase;
  }

  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* M5, block-based checkout (this shop uses the Woo blocks, not the
     shortcodes): dark order summary like the handoff */
  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    background: var(--kali-dark);
    color: var(--kali-surface);
    border: none;
    border-radius: 0;
    padding: 6px 16px 14px;
  }

  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item,
  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item,
  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block a {
    color: inherit;
  }

  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-metadata,
  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description {
    color: var(--kali-muted);
  }

  /* the product name ships with its own dark color from the blocks CSS */
  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
    color: var(--kali-surface);
    font-weight: 700;
  }

  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__quantity {
    background: var(--kali-terra);
    color: var(--kali-dark);
    border: none;
  }

  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper,
  .woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel {
    border-color: var(--kali-line-light);
  }
}

/* ---------- pages handoff P1-P9 (desktop) ---------- */

/* P1: PDP polish */
.single-product .kali-pdp-kicker {
  font-size: 11px;
  letter-spacing: .28em;
  font-weight: 700;
  color: var(--kali-terra);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.single-product div.product .stock {
  color: var(--kali-terra);
  font-size: 13px;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  opacity: .55;
  transition: opacity .2s, outline-color .2s;
  outline: 2px solid transparent;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1;
  outline-color: var(--kali-dark);
}

.single-product .wc-tabs {
  border-bottom: 1px solid var(--kali-line) !important;
}

.single-product .wc-tabs li a {
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 600;
  text-transform: uppercase;
}

/* One breadcrumb only: hide Kadence's on single products (ours lives in the
   summary column, per the mockup). */
.single-product .kadence-breadcrumbs,
.single-product nav.woocommerce-breadcrumb,
.single-product .entry-hero .kadence-breadcrumbs {
  display: none;
}

/* PDP breadcrumb + badges + tax note (official Kali Produit mockup) */
.kali-pdp-crumb {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--kali-taupe);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.kali-pdp-crumb a {
  color: var(--kali-taupe);
  text-decoration: none;
}

.kali-pdp-crumb a:hover {
  color: var(--kali-terra);
}

.kali-pdp-crumb span {
  color: var(--kali-dark);
}

.kali-pdp-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.kali-pdp-bestseller {
  background: var(--kali-dark);
  color: var(--kali-surface);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kali-pdp-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--kali-taupe);
}

.kali-pdp-rating .star-rating {
  color: var(--kali-terra);
  font-size: 12px;
  display: inline-block !important;
}

.kali-pdp-taxnote {
  font-size: 12px;
  color: var(--kali-taupe);
  margin: 8px 0 0;
}

.kali-pdp-taxnote span {
  text-decoration: underline;
}

/* PDP feature specs strip (mockup) */
.kali-pdp-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--kali-line);
  border: 1px solid var(--kali-line);
  margin-top: 36px;
}

.kali-pdp-specs > div {
  background: var(--kali-cream);
  padding: 16px 14px;
  text-align: center;
}

.kali-pdp-specs__t {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kali-pdp-specs__d {
  display: block;
  font-size: 11px;
  color: var(--kali-taupe);
  margin-top: 4px;
}

/* PDP "Acheter maintenant" secondary button (mockup) */
.kali-buy-now {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--kali-dark);
  border-radius: 0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kali-dark);
  cursor: pointer;
}

.kali-buy-now:hover {
  background: var(--kali-dark);
  color: var(--kali-surface);
}

/* PDP actions row (mockup): stepper + dark add button, buy-now full width under */
.single-product div.product form.cart:not(.variations_form),
.single-product div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.single-product div.product form.cart .single_add_to_cart_button {
  flex: 1;
  background: var(--kali-dark);
  border-color: var(--kali-dark);
  color: var(--kali-surface);
  letter-spacing: .18em;
  padding: 17px 20px;
}

.single-product div.product form.cart .single_add_to_cart_button:hover {
  background: var(--kali-terra);
  border-color: var(--kali-terra);
  color: var(--kali-dark);
}

.single-product div.product form.cart .single_add_to_cart_button.disabled,
.single-product div.product form.cart .single_add_to_cart_button:disabled {
  opacity: .35;
}

.kali-add-total {
  font-weight: 800;
}

.single-product div.product form.cart .kali-buy-now {
  flex-basis: 100%;
  margin-top: 0;
}

/* quantity stepper (kali-product.js wraps the input with - / + buttons) */
.single-product div.product form.cart .quantity.kali-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(23, 20, 15, .3);
  margin: 0;
}

.kali-qty input.qty {
  border: none !important;
  background: transparent !important;
  width: 38px;
  padding: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}

.kali-qty input.qty::-webkit-outer-spin-button,
.kali-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.kali-qty__btn {
  width: 44px;
  align-self: stretch;
  min-height: 52px;
  background: none;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
  color: var(--kali-dark);
}

/* PDP accordions (mockup): the Woo tabs, moved into the summary column */
.single-product .summary .woocommerce-tabs {
  margin-top: 28px;
  border-top: 1px solid var(--kali-line);
}

.single-product .summary .woocommerce-tabs ul.wc-tabs {
  display: none !important;
}

.kali-acc__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--kali-line);
  padding: 18px 0;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kali-dark);
  cursor: pointer;
  text-align: left;
}

.kali-acc__btn i {
  font-style: normal;
  color: var(--kali-terra);
  font-size: 16px;
  line-height: 1;
}

.single-product .kali-acc .woocommerce-Tabs-panel {
  padding: 2px 0 20px;
  border-bottom: 1px solid var(--kali-line);
  font-size: 13px;
  line-height: 1.75;
  color: #5c554e;
}

/* the panel repeats its own title: the accordion row already names it */
.single-product .kali-acc .woocommerce-Tabs-panel > h2:first-child {
  display: none;
}

/* ---------- my-account (logged in) ----------
   Kadence renders the nav links as dark buttons over our ink text (active
   item was ink-on-ink, unreadable) and floats them. Charte: avatar + one
   clean vertical rail on the LEFT, content right. Login page untouched
   (no .logged-in). */

@media (min-width: 1025px) {
  .woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 48px;
    align-items: start;
  }

  .woocommerce-account.logged-in .account-navigation-wrap {
    grid-column: 1;
    grid-row: 1;
    /* Kadence sizes this wrap ~30% and floats it right inside the cell */
    width: 100% !important;
    max-width: none !important;
    float: none !important;
  }

  .woocommerce-account.logged-in .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 1;
  }

  .woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }
}

.woocommerce-account .kadence-account-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-weight: 800;
  font-size: 14px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  display: block;
  float: none;
  margin: 0;
  border-bottom: 1px solid var(--kali-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 13px 2px !important;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  color: var(--kali-dark) !important;
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--kali-terra) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--kali-terra) !important;
  border-left: 2px solid var(--kali-terra) !important;
  padding-left: 12px !important;
}

/* ---------- quick view modal (APERÇU RAPIDE on the cards) ---------- */

.kali-qv {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: none;
}

body.kali-qv-open .kali-qv {
  display: block;
}

body.kali-qv-open {
  overflow: hidden;
}

.kali-qv__scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 20, 15, .55);
}

.kali-qv__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--kali-cream);
  padding: 26px;
}

.kali-qv__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--kali-dark);
  cursor: pointer;
  padding: 8px;
}

.kali-qv__loading {
  padding: 80px;
  text-align: center;
  font-size: 22px;
  color: var(--kali-taupe);
}

.kali-qv__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 26px;
  align-items: start;
}

.kali-qv__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--kali-sand);
  display: block;
}

.kali-qv__title {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: .95;
  margin: 6px 0 0;
}

.kali-qv__price {
  font-size: 18px;
  font-weight: 800;
  margin: 12px 0 4px;
}

.kali-qv__price del {
  opacity: .5;
  font-weight: 400;
  margin-right: 6px;
}

.kali-qv__price ins {
  text-decoration: none;
}

/* the injected form reuses the PDP styling; scope the essentials here since
   .single-product body class is absent on archives */
.kali-qv form.cart:not(.variations_form),
.kali-qv form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.kali-qv form.cart {
  margin-top: 14px;
}

.kali-qv form.cart table.variations th.label {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding-right: 18px;
}

.kali-qv form.cart .quantity .qty {
  border: 1px solid var(--kali-line);
  border-radius: 0;
  background: var(--kali-surface);
  width: 56px;
  padding: 12px 6px;
  text-align: center;
}

.kali-qv form.cart .single_add_to_cart_button {
  flex: 1;
  background: var(--kali-dark);
  border: 1px solid var(--kali-dark);
  border-radius: 0;
  color: var(--kali-surface);
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 800;
  text-transform: uppercase;
  padding: 15px 20px;
  cursor: pointer;
}

.kali-qv form.cart .single_add_to_cart_button:hover {
  background: var(--kali-terra);
  border-color: var(--kali-terra);
  color: var(--kali-dark);
}

.kali-qv form.cart .single_add_to_cart_button.disabled,
.kali-qv form.cart .single_add_to_cart_button:disabled {
  opacity: .35;
}

.kali-qv .woocommerce-variation-price .price {
  font-weight: 800;
}

.kali-qv .stock {
  color: var(--kali-terra);
  font-size: 13px;
}

.kali-qv__full {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kali-dark);
  text-decoration: underline;
}

.kali-qv__full:hover {
  color: var(--kali-terra);
}

@media (max-width: 767px) {
  .kali-qv__panel {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    padding: 20px 18px 28px;
  }

  .kali-qv__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---------- PDP layout & gallery (official Kali Produit mockup) ----------
   Two columns 1.15fr/1fr, gallery with a LEFT vertical thumbnail rail.
   The rail is a grid on .woocommerce-product-gallery: the flexslider
   viewport sits in column 2 and ol.flex-control-thumbs in column 1, both
   row 1 (the old float reflow overlapped the slides; the grid does not,
   because flexslider measures the viewport inside its own grid cell).
   Desktop only: below 1025px the native stacked layout is kept. */

@media (min-width: 1025px) {
  .single-product div.product {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
  }

  .single-product div.product > .woocommerce-product-gallery {
    grid-column: 1;
    width: 100% !important;
    float: none;
    margin: 0;
    padding: 24px;
  }

  .single-product div.product > .entry-summary,
  .single-product div.product > .summary {
    grid-column: 2;
    width: 100% !important;
    float: none;
    margin: 0;
    padding: 52px 56px 52px 32px;
  }

  /* everything else (notices, related, upsells) spans both columns */
  .single-product div.product > *:not(.woocommerce-product-gallery):not(.entry-summary):not(.summary) {
    grid-column: 1 / -1;
  }

  .single-product .woocommerce-product-gallery {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 14px;
    align-items: start;
  }

  .single-product .woocommerce-product-gallery > .flex-viewport,
  .single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }

  .single-product .woocommerce-product-gallery > ol.flex-control-thumbs {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .single-product .woocommerce-product-gallery .flex-control-thumbs li {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
  }

  .single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    background: var(--kali-sand);
  }
}

/* main image: tall editorial crop on the sand backdrop, every ratio covers */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--kali-sand);
}

/* PDP related products "Portez-le avec" dark (mockup) */
.single-product .related.products,
.single-product .up-sells.products {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: var(--kali-dark);
  color: var(--kali-surface);
  padding: 64px 44px;
  /* Francis 2026-07-15: 10px between the columns and this dark block */
  margin-top: 10px;
}

/* the dark related block IS the end of the page: no cream void either
   between the summary and it (Woo's 2em on .summary survives a plain
   override, hence the !important) or between it and the dark footer
   (Kadence's 80px on .content-area) */
.single-product div.product .entry-summary,
.single-product div.product .summary {
  margin-bottom: 0 !important;
}

.single-product div.product .woocommerce-product-gallery {
  margin-bottom: 0 !important;
}

.single-product .content-area {
  margin-bottom: 0;
}

.single-product .related.products > h2,
.single-product .up-sells.products > h2 {
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--kali-surface);
  margin: 0 0 30px;
}

.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
.single-product .related.products ul.products li.product .woocommerce-loop-product__title a {
  color: var(--kali-surface);
}

.single-product .related.products ul.products li.product .price {
  color: var(--kali-taupe);
}

/* product page COULEUR swatch selector (buy by colour, links to siblings) */
.kali-pdp-color {
  margin: 4px 0 22px;
}

.kali-pdp-color__label {
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.kali-pdp-color__label span {
  color: var(--kali-terra);
}

.kali-pdp-color__swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kali-pdp-swatch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color .15s ease;
}

.kali-pdp-swatch span {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--kali-line);
}

.kali-pdp-swatch:hover {
  border-color: var(--kali-muted);
}

.kali-pdp-swatch.is-current {
  border-color: var(--kali-terra);
}

.kali-size-guide {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--kali-terra) !important;
  text-decoration: underline !important;
  margin-left: 14px;
  text-transform: none;
}

/* P2/P3: cart + checkout, dark summary sidebar on desktop too */
@media (min-width: 783px) {
  .woocommerce-cart .wp-block-woocommerce-cart-totals-block,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block {
    background: var(--kali-dark);
    color: var(--kali-surface);
    padding: 28px;
  }

  .woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-totals-item,
  .woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-panel__button,
  .woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-totals-coupon-link,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-panel__button,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-product-metadata,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item__description {
    color: var(--kali-muted);
  }

  .woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-totals-item__value,
  .woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-totals-footer-item,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item__value,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-footer-item,
  .woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-product-name,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-product-name {
    color: var(--kali-surface) !important;
  }

  .woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-totals-wrapper,
  .woocommerce-cart .wp-block-woocommerce-cart-totals-block .wc-block-components-panel,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-wrapper,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block .wc-block-components-panel {
    border-color: var(--kali-line-light);
  }
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
  background: var(--kali-surface);
}

.wc-block-components-button:not(.is-link),
a.wc-block-components-button {
  border-radius: 0 !important;
  background: var(--kali-terra) !important;
  color: var(--kali-dark) !important;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px !important;
}

.wc-block-components-button:not(.is-link):hover,
a.wc-block-components-button:hover {
  background: var(--kali-terra-deep) !important;
  color: var(--kali-surface) !important;
}

/* P4: order confirmation */
.woocommerce-order-received .woocommerce-order {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.kali-thankyou-title {
  font-weight: 900;
  font-size: clamp(38px, 4.6vw, 56px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-align: center;
  margin: 10px 0 12px;
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-size: 16px;
  line-height: 1.7;
  color: var(--kali-taupe);
  max-width: 520px;
  margin: 0 auto 24px;
}

.woocommerce-order-received ul.woocommerce-order-overview {
  list-style: none;
  margin: 0 0 32px;
  padding: 20px;
  background: var(--kali-surface);
  border: 1px solid var(--kali-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  font-size: 13px;
  text-align: left;
}

.woocommerce-order-received ul.woocommerce-order-overview li {
  border: none;
  margin: 0;
  padding: 0;
  float: none;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kali-taupe);
}

.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kali-dark);
  margin-top: 4px;
}

.kali-thankyou-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0 40px;
}

.kali-thankyou-actions a {
  background: var(--kali-terra);
  color: var(--kali-dark);
  border: 1px solid var(--kali-terra);
  padding: 14px 26px;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.kali-thankyou-actions a.ghost {
  background: transparent;
  border-color: var(--kali-line);
  color: var(--kali-dark);
  font-weight: 700;
}

/* P5: account */
.woocommerce-account .u-columns.col2-set .u-column1,
.woocommerce-account .u-columns.col2-set .u-column2 {
  padding: 36px;
}

.woocommerce-account .u-columns.col2-set .u-column1 {
  background: var(--kali-surface);
  border: 1px solid var(--kali-line);
}

.woocommerce-account .u-columns.col2-set .u-column2 {
  background: var(--kali-dark);
  color: var(--kali-surface);
}

.woocommerce-account .u-columns.col2-set .u-column2 h2,
.woocommerce-account .u-columns.col2-set .u-column2 label {
  color: var(--kali-surface);
}

.woocommerce-account .u-columns.col2-set h2 {
  font-weight: 900;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.woocommerce-account .woocommerce-form input[type=text],
.woocommerce-account .woocommerce-form input[type=email],
.woocommerce-account .woocommerce-form input[type=password] {
  border: 1px solid var(--kali-line);
  border-radius: 0;
  background: #fff;
  padding: 13px 15px;
  width: 100%;
}

.woocommerce-account .woocommerce-form .button,
.woocommerce-account .woocommerce-Button {
  background: var(--kali-terra) !important;
  color: var(--kali-dark) !important;
  border-radius: 0 !important;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 14px 26px;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.woocommerce-MyAccount-navigation li a {
  display: inline-block;
  border: 1px solid var(--kali-line);
  background: var(--kali-surface);
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kali-dark);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--kali-dark);
  border-color: var(--kali-dark);
  color: var(--kali-surface);
}

/* P6: 404 */
.error404 .content-area {
  background: var(--kali-dark);
  color: var(--kali-surface);
  text-align: center;
  padding: 90px 24px;
  max-width: none;
}

.error404 .content-area h1,
.error404 .content-area h2 {
  color: var(--kali-surface);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.error404 .content-area p {
  color: var(--kali-muted);
}

.error404 .content-area form {
  max-width: 420px;
  margin: 24px auto 0;
}

/* P9: contact form */
.kali-contact-form {
  max-width: 560px;
}

.kali-contact-form label {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kali-taupe);
}

.kali-contact-form input,
.kali-contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--kali-line);
  border-radius: 0;
  background: var(--kali-surface);
  padding: 13px 15px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  color: var(--kali-dark);
}

.kali-contact-form input:focus,
.kali-contact-form textarea:focus {
  outline: 2px solid var(--kali-terra);
  outline-offset: 0;
  border-color: var(--kali-terra);
}

.kali-contact-form .kali-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kali-contact-submit {
  background: var(--kali-terra);
  color: var(--kali-dark);
  border: 1px solid var(--kali-terra);
  border-radius: 0;
  padding: 15px 34px;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.kali-contact-submit:hover {
  background: var(--kali-terra-deep);
  border-color: var(--kali-terra-deep);
  color: var(--kali-surface);
}

.kali-form-notice {
  padding: 14px 18px;
  font-size: 14px;
  border: 1px solid var(--kali-line);
  background: var(--kali-surface);
}

.kali-form-notice--ok {
  border-color: var(--kali-terra);
  color: var(--kali-dark);
}

.kali-form-notice--err {
  border-color: #a33;
  color: #a33;
}

/* P7-P9: brand pages */
.kali-page-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.kali-page-table th {
  text-align: left;
  padding: 12px;
  border-bottom: 2px solid var(--kali-dark);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.kali-page-table td {
  padding: 12px;
  border-bottom: 1px solid var(--kali-line);
}