/** Shopify CDN: Minification failed

Line 852:0 All "@import" rules must come first
Line 1122:0 All "@import" rules must come first

**/
/* Karlan — Collection text-size + visual fixes v6 (2026-05-09 round 2)
   Covers Karl issues : 4 (footer-bg), 5 (header transparent scroll), 6 (3x3 grid), 7 (no pill) */

/* ═══ Recently viewed strip ═══ */
.kl3 .kl3__recent { padding: 28px 0 20px !important; }
.kl3 .kl3__recent .kl3__recent-eyebrow { font-size: 9px !important; letter-spacing: 0.18em !important; }
.kl3 .kl3__recent .kl3__recent-card { flex: 0 0 120px !important; }
.kl3 .kl3__recent .kl3__recent-card-img { width: 120px !important; height: 150px !important; }
.kl3 .kl3__recent .kl3__recent-card-title { font-size: 10px !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; text-transform: uppercase !important; margin-top: 6px !important; }
.kl3 .kl3__recent .kl3__recent-card-price { font-size: 9px !important; letter-spacing: 0.04em !important; margin-top: 2px !important; }
.kl3 .kl3__recent .kl3__recent-head { padding: 0 22px 14px !important; }

/* ═══ Mobile : grid card titles tighten ═══ */
@media (max-width: 749px) {
  .kl3 .kl3__pcard .kl3__title { margin-top: 10px !important; padding: 0 10px !important; gap: 2px !important; }
  .kl3 .kl3__pcard .kl3__title .name { font-size: 10px !important; letter-spacing: 0.02em !important; line-height: 1.3 !important; min-height: auto !important; }
  .kl3 .kl3__pcard .kl3__title .price { font-size: 10px !important; letter-spacing: 0.02em !important; }
  .kl3 .kl3__pcard { padding: 0 0 22px !important; }
  .kl3 .kl3__recent .kl3__recent-card { flex: 0 0 110px !important; }
  .kl3 .kl3__recent .kl3__recent-card-img { width: 110px !important; height: 138px !important; }
  .kl3 .kl3__recent .kl3__recent-card-title { font-size: 9.5px !important; }
  .kl3 .kl3__recent .kl3__recent-card-price { font-size: 8.5px !important; }
  .kl3 .kl3__recent .kl3__recent-eyebrow { font-size: 8px !important; }
}

/* ═══ Hide "Nouveau" tag, bookmark, lookbook labels ═══ */
html body .kl3 .kl3__pcard .kl3__tag { display: none !important; }
html body .kl-zara-coll-title__bookmark, html body button.kl-zara-coll-title__bookmark, html body [data-kl-zara-coll-bookmark] { display: none !important; }
html body .klh-dr.klh-dr .klh-dr-lookbook.klh-dr-lookbook a .klh-sec__item-label,
html body .klh-dr.klh-dr .klh-dr-lookbook.klh-dr-lookbook a span.klh-sec__item-label { display: none !important; }
html body .klh-dr.klh-dr .klh-dr-lookbook.klh-dr-lookbook a::before { background: transparent !important; }

/* ═══ Collection title : centered, smaller, configurable size + description below ═══ */
html body .kl-zara-coll-title.kl-zara-coll-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  padding: var(--kl-coll-pad-top, 24px) 16px var(--kl-coll-pad-bot, 16px) !important;
  gap: 6px !important;
}
html body .kl-zara-coll-title.kl-zara-coll-title h1 {
  font-size: var(--kl-coll-title-size, 22px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  color: #000 !important;
}
@media (min-width: 750px) {
  html body .kl-zara-coll-title.kl-zara-coll-title h1 {
    font-size: calc(var(--kl-coll-title-size, 22px) + 8px) !important;
  }
}
html body .kl-zara-coll-title.kl-zara-coll-title span,
html body .kl-zara-coll-title.kl-zara-coll-title > span,
html body .kl-zara-coll-title.kl-zara-coll-title > span:last-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: center !important;
  width: auto !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,0.55) !important;
}
/* Collection description below title */
html body .kl-zara-coll-desc {
  text-align: center !important;
  max-width: 680px !important;
  margin: 4px auto 0 !important;
  padding: 0 24px !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: var(--kl-coll-desc-size, 13px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: rgba(0,0,0,0.6) !important;
  letter-spacing: 0.01em !important;
}

/* ═══ Categories slider square + progress bar (issue 7 prev round) ═══ */
html body .kcs2 .kcs2__media { aspect-ratio: 1 / 1 !important; }
html body .kcs2 { position: relative !important; padding-bottom: 22px !important; }
html body .kcs2 .kcs2-progress { position: absolute !important; left: 16px !important; right: 16px !important; bottom: 6px !important; height: 2px !important; background: rgba(0,0,0,0.08) !important; border-radius: 2px !important; overflow: hidden !important; pointer-events: none !important; z-index: 2 !important; }
html body .kcs2 .kcs2-progress__bar { position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 30% !important; background: #000 !important; border-radius: 2px !important; transition: transform 120ms ease, width 120ms ease !important; }

/* ═══ ISSUE 1+6 : Grid toggle inside stickybar (NOT on images) ═══ */
html body .kl3 .kl3-grid-toggle {
  position: static !important;
  display: inline-flex !important;
  gap: 4px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 8px !important;
  align-items: center !important;
}
html body .kl-zara-stickybar .kl3-grid-toggle {
  margin-left: 8px !important;
}
html body .kl3 .kl3-grid-toggle button {
  background: transparent !important;
  border: 0 !important;
  padding: 6px !important;
  color: rgba(0,0,0,0.4) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
}
html body .kl3 .kl3-grid-toggle button[aria-pressed="true"] { color: #000 !important; }
html body .kl3 .kl3-grid-toggle svg { width: 16px !important; height: 16px !important; }

/* ═══ ISSUE 6 : Grid mode classes ═══ */
html body .kl3.kl3-grid--1x1 .kl3__grid { grid-template-columns: 1fr !important; }
html body .kl3.kl3-grid--1x1 .kl3__pcard { grid-column: 1 / -1 !important; }
html body .kl3.kl3-grid--2x2 .kl3__grid { grid-template-columns: 1fr 1fr !important; }
html body .kl3.kl3-grid--2x2 .kl3__pcard { grid-column: span 1 !important; }
html body .kl3.kl3-grid--3x3 .kl3__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }
html body .kl3.kl3-grid--3x3 .kl3__pcard { grid-column: span 1 !important; padding: 0 0 16px !important; }
html body .kl3.kl3-grid--3x3 .kl3__media { aspect-ratio: 2 / 3 !important; }

/* ═══ 3x3 special : hide title, show only image + price + "+" (Zara-style) ═══ */
html body .kl3.kl3-grid--3x3 .kl3__title .name { display: none !important; }
html body .kl3.kl3-grid--3x3 .kl3__pcard-info { padding: 6px 6px 0 !important; }
html body .kl3.kl3-grid--3x3 .kl3__title { padding: 6px 4px !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 4px !important; }
html body .kl3.kl3-grid--3x3 .kl3__title .price { font-size: 10px !important; letter-spacing: 0.02em !important; flex: 1 !important; text-align: left !important; }
html body .kl3.kl3-grid--3x3 .kl3__pcard::after {
  content: "+" !important;
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  width: 24px !important;
  height: 24px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  color: #000 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  font-weight: 300 !important;
}
html body .kl3.kl3-grid--3x3 .kl3__pcard { position: relative !important; }
/* Hide tag, recent-card etc on 3x3 already covered. Hide kl3 wishlist heart on 3x3 to declutter */
html body .kl3.kl3-grid--3x3 .kl3__wish, html body .kl3.kl3-grid--3x3 .kl3__qa-trigger { display: none !important; }
/* Force only first image in 3x3 (hide hover/swipable extras) */
html body .kl3.kl3-grid--3x3 .kl3__media-track > .kl3__media-slide:not(:first-child) { display: none !important; }
html body .kl3.kl3-grid--3x3 .kl3__media-dots, html body .kl3.kl3-grid--3x3 .kl3__media-arrow { display: none !important; }

/* ═══ ISSUE 7 : remove sticky pill (was rendered before, now CSS-hidden by snippet update) ═══ */
html body .kl3-sticky-fs { display: none !important; }
html body .kl3 .kl3__filter-bar { display: none !important; }

/* ═══ ISSUE 5 : Header sticky transparent on scroll (collection + product) ═══ */
html body.template-karlan .kl-header-section,
html body.template-collection .kl-header-section,
html body.template-product .kl-header-section,
html body.template-karlan header.klh,
html body.template-collection header.klh,
html body.template-product header.klh {
  transition: background-color 240ms ease, backdrop-filter 240ms ease, -webkit-backdrop-filter 240ms ease, box-shadow 240ms ease !important;
}
/* removed by fix-logo-scroll */
html body.template-karlan.is-scrolled .klh-bar,
html body.template-collection.is-scrolled .klh-bar,
html body.template-product/* removed scroll bar transparent */

/* ═══ ISSUE 4 : Footer-color on safe-area / page bottom ═══ */
html { background-color: #000 !important; }
body { background-color: #ffffff; }
/* iOS safe-area pad */
body { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ═══ Cart icon count badge close to icon ═══ */
.klh .klh-icon[data-klh-cart-trigger] .klh-icon-count, .klh-icons .klh-icon-count {
  position: absolute !important; top: -2px !important; right: -4px !important;
  font-size: 9px !important; min-width: auto !important; padding: 0 2px !important; line-height: 1 !important;
}

/* ═══ Wishlist drawer title 11px uppercase ═══ */
html body .klh-cd .klh-wd-item .klh-wd-item-title, html body .klh-cd .klh-wd-item-title {
  font-size: 11px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; font-weight: 500 !important; line-height: 1.3 !important;
}

/* ═══ iOS tap-highlight + hover gates (carryover) ═══ */
.kl3 .kl3__pcard, .kl3 .kl3__pcard a, .kl3 .kl3__pcard *,
.kl3 .kl3__media, .kl3 .kl3__media-link, .kl3 .kl3__img, .kl3 .kl3__qa-trigger,
.klh-icon, .klh-menu, .klh-dr-tab, .klh-cd-item-img, .klh-wd-item-img, .klh-wd-item-img a {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}
@media (hover: none), (pointer: coarse) {
  .kl3 .kl3__pcard:hover .kl3__img, .kl3 .kl3__pcard:hover .kl3__img.primary, .kl3 .kl3__pcard:hover .kl3__img.alt {
    opacity: 1 !important; transform: none !important;
  }
  .kl3 .kl3__pcard:hover .kl3__qa-trigger { opacity: 0 !important; }
  .kl3 .kl3__media-arrow { opacity: 0 !important; pointer-events: none !important; }
}

/* ═══ Bottom-sheet filter modal ensure styled (Karl issue 7) ═══ */
html body .kl-zara-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99500 !important;
  background: rgba(0,0,0,0.4) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 240ms ease, visibility 240ms ease !important;
}
html body .kl-zara-sheet.is-open, html body .kl-zara-sheet[aria-hidden="false"] {
  opacity: 1 !important;
  visibility: visible !important;
}
html body .kl-zara-sheet__panel {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: #fff !important;
  max-height: 85vh !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(100%) !important;
  transition: transform 320ms cubic-bezier(.4,0,.2,1) !important;
  overflow: hidden !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}
html body .kl-zara-sheet.is-open .kl-zara-sheet__panel,
html body .kl-zara-sheet[aria-hidden="false"] .kl-zara-sheet__panel {
  transform: translateY(0) !important;
}
html body .kl-zara-sheet__head {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 18px 20px !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
html body .kl-zara-sheet__title {
  font-family: 'Inter Tight', sans-serif !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important;
}
html body .kl-zara-sheet__close { background: none !important; border: 0 !important; padding: 6px !important; cursor: pointer !important; }
html body .kl-zara-sheet__close svg { width: 20px !important; height: 20px !important; }
html body .kl-zara-sheet__body { flex: 1 !important; overflow-y: auto !important; padding: 16px 20px !important; }

/* Stickybar — make filter trigger clearly tappable */
html body .kl-zara-stickybar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  position: sticky !important;
  top: 56px !important;
  z-index: 50 !important;
}


/* ════════════════════════════════════════
   ZARA-EXACT CARD INFO LAYOUT v2 (Karl 2026-05-09 round 5)
   - 2x2/1x1 : title (1 line ellipsis) + price below + "+" + heart inline right
   - 3x3 : price centered + "+" centered below (no title)
   - "+" no circle, plain symbol
   - Wishlist heart next to "+"
   - "+" click → existing [data-kl3-qa-trigger] (quick-add modal)
   ════════════════════════════════════════ */

/* Re-enable kl3__qa-trigger (real button, no circle) on 1x1/2x2 */
html body .kl3.kl3-grid--1x1 .kl3__pcard .kl3__qa-trigger,
html body .kl3.kl3-grid--2x2 .kl3__pcard .kl3__qa-trigger {
  display: inline-flex !important;
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: rgba(0,0,0,0.85) !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  transform: none !important;
}
html body .kl3.kl3-grid--1x1 .kl3__pcard .kl3__qa-trigger svg,
html body .kl3.kl3-grid--2x2 .kl3__pcard .kl3__qa-trigger svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.5px !important;
}
html body .kl3.kl3-grid--1x1 .kl3__pcard .kl3__qa-trigger span,
html body .kl3.kl3-grid--2x2 .kl3__pcard .kl3__qa-trigger span {
  display: none !important;
}

/* Re-enable wishlist heart next to "+" */
html body .kl3 .kl3__pcard .kl3__wish,
html body .kl3 .kl3__pcard .kl3__wish--inline {
  display: inline-flex !important;
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(0,0,0,0.85) !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent !important;
  flex: 0 0 auto !important;
}
html body .kl3 .kl3__pcard .kl3__wish svg,
html body .kl3 .kl3__pcard .kl3__wish--inline svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.5px !important;
}

/* Remove "+" pseudo I added earlier (replaced by real button) */
html body .kl3.kl3-grid--1x1 .kl3__pcard .kl3__title::after,
html body .kl3.kl3-grid--2x2 .kl3__pcard .kl3__title::after,
html body .kl3.kl3-grid--3x3 .kl3__pcard::after { content: none !important; display: none !important; }

/* 2x2 / 1x1 card structure : flex-row row, title+price stack left, [+ heart] right */
html body .kl3.kl3-grid--1x1 .kl3__pcard-info,
html body .kl3.kl3-grid--2x2 .kl3__pcard-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 4px 0 !important;
}
html body .kl3.kl3-grid--1x1 .kl3__pcard-info .kl3__title,
html body .kl3.kl3-grid--2x2 .kl3__pcard-info .kl3__title {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
  padding: 0 !important;
}
html body .kl3.kl3-grid--1x1 .kl3__pcard-info .kl3__title .name,
html body .kl3.kl3-grid--2x2 .kl3__pcard-info .kl3__title .name {
  display: block !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  color: #000 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  text-align: left !important;
}
html body .kl3.kl3-grid--1x1 .kl3__pcard-info .kl3__title .price,
html body .kl3.kl3-grid--2x2 .kl3__pcard-info .kl3__title .price {
  display: block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  color: #000 !important;
  text-align: left !important;
  margin: 0 !important;
}

/* Right column : + button then heart */
html body .kl3.kl3-grid--1x1 .kl3__pcard-info .kl3__qa-trigger,
html body .kl3.kl3-grid--2x2 .kl3__pcard-info .kl3__qa-trigger,
html body .kl3.kl3-grid--1x1 .kl3__pcard-info .kl3__wish,
html body .kl3.kl3-grid--2x2 .kl3__pcard-info .kl3__wish {
  align-self: flex-start !important;
  margin-top: 0 !important;
}

/* Wrap [+, heart] in pseudo flex group via order — kl3__qa-trigger first then wish */
html body .kl3.kl3-grid--1x1 .kl3__pcard-info,
html body .kl3.kl3-grid--2x2 .kl3__pcard-info { gap: 6px !important; }
html body .kl3.kl3-grid--1x1 .kl3__qa-trigger,
html body .kl3.kl3-grid--2x2 .kl3__qa-trigger { order: 2 !important; }
html body .kl3.kl3-grid--1x1 .kl3__wish,
html body .kl3.kl3-grid--2x2 .kl3__wish { order: 3 !important; }
html body .kl3.kl3-grid--1x1 .kl3__title,
html body .kl3.kl3-grid--2x2 .kl3__title { order: 1 !important; }

/* ════ 3x3 : price centered + "+" centered below + heart next to "+" ════ */
html body .kl3.kl3-grid--3x3 .kl3__pcard-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 4px 0 !important;
  text-align: center !important;
}
html body .kl3.kl3-grid--3x3 .kl3__title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
}
html body .kl3.kl3-grid--3x3 .kl3__title .name { display: none !important; }
html body .kl3.kl3-grid--3x3 .kl3__title .price {
  display: block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  color: #000 !important;
  text-align: center !important;
  flex: none !important;
  margin: 0 !important;
}
html body .kl3.kl3-grid--3x3 .kl3__qa-trigger,
html body .kl3.kl3-grid--3x3 .kl3__wish {
  display: inline-flex !important;
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  color: rgba(0,0,0,0.85) !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}
html body .kl3.kl3-grid--3x3 .kl3__qa-trigger svg,
html body .kl3.kl3-grid--3x3 .kl3__wish svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.5px !important;
}
/* Group [+, heart] horizontally below price */
html body .kl3.kl3-grid--3x3 .kl3__qa-trigger { order: 2 !important; }
html body .kl3.kl3-grid--3x3 .kl3__wish { order: 3 !important; }
html body .kl3.kl3-grid--3x3 .kl3__title { order: 1 !important; width: 100% !important; }

/* Stack actions horizontally in 3x3 — wrap via flex-direction row on action group */
html body .kl3.kl3-grid--3x3 .kl3__pcard-info {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}
html body .kl3.kl3-grid--3x3 .kl3__title { flex: 0 0 100% !important; }


/* ════════════════════════════════════════
   ZARA PDP HEADER PARITY (Karl 2026-05-09 round 6)
   - Cart trigger = "| 0 |" bracket text (Zara style), no bag SVG
   - Wishlist trigger visible sur PDP (template-product)
   - Order : menu | (toggle/filtres on collection) | wishlist | search | cart
   ════════════════════════════════════════ */

/* Hide cart bag SVG on collection + product + karlan, show count as "| N |" */
html body .klh-bar [data-klh-cart-trigger] svg { display: none !important; }
html body .klh-bar [data-klh-cart-trigger] {
  font-family: 'Inter Tight', 'Helvetica Neue', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: #000 !important;
  padding: 6px 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
}
html body .klh-bar [data-klh-cart-trigger] .klh-icon-count {
  position: static !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: #000 !important;
  padding: 0 6px !important;
  margin: 0 !important;
  min-width: auto !important;
  line-height: 1 !important;
}
html body .klh-bar [data-klh-cart-trigger]::before {
  content: "|" !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: #000 !important;
  line-height: 1 !important;
  margin-right: -2px !important;
}
html body .klh-bar [data-klh-cart-trigger]::after {
  content: "|" !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: #000 !important;
  line-height: 1 !important;
  margin-left: -2px !important;
}

/* Show wishlist trigger on PDP (override any earlier hide) */
html body.template-product .klh-bar [data-klh-wishlist-trigger] {
  display: inline-flex !important;
}

/* PDP header layout : menu (left) | flex-spacer | wishlist | search | cart */
body.template-product .klh-bar {
  grid-template-columns: auto 1fr auto auto auto !important;
  gap: 8px !important;
  padding: 0 14px !important;
}
/* removed by fix-logo-scroll */
body.template-product .klh-bar .klh-icons {
  display: inline-flex !important;
  gap: 12px !important;
  justify-self: end !important;
  align-items: center !important;
}

/* PDP : floating up-arrow only when scrolled (already CSS) — verify body.is-scrolled triggered */


/* ════════════════════════════════════════
   ZARA TYPOGRAPHY EXACT (Karl 2026-05-09 round 8)
   Source : zara.com/ma/fr inspecté DOM
   Font : "Helvetica Now Text", Helvetica, Arial, sans-serif
   Weight : 300 (light)
   ════════════════════════════════════════ */

html body.template-karlan,
html body.template-collection,
html body.template-product,
html body.template-karlan *,
html body.template-collection *,
html body.template-product * {
  font-family: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Card titles + price + tabs all weight 300 */
html body .kl3 .kl3__pcard .kl3__title .name,
html body .kl3 .kl3__pcard .kl3__title .price,
html body .kl-zara-tab,
html body .klh-bar [data-zara-filtres],
html body .klh-bar [data-klh-cart-trigger],
html body .kl-zara-coll-title h1,
html body .kl-zara-coll-title span,
html body .kl-zara-coll-desc,
html body .klh-ann {
  font-family: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;
}

/* Sizes match Zara exact */
html body .kl3 .kl3__pcard .kl3__title .name,
html body .kl3 .kl3__pcard .kl3__title .price {
  font-size: 11px !important;
  text-transform: uppercase !important;
}
html body .kl-zara-tab { font-size: 13px !important; text-transform: uppercase !important; }
html body .klh-bar [data-zara-filtres] { font-size: 12px !important; text-transform: uppercase !important; }
html body .klh-bar [data-klh-cart-trigger] { font-size: 13px !important; }

/* Title centered Zara — h1 weight 400 (Zara uses 300 light too but a bit heavier) */
html body .kl-zara-coll-title h1 {
  font-weight: 400 !important;
  font-size: 22px !important;
  letter-spacing: normal !important;
}

/* ════════════════════════════════════════
   CART BRACKET FIX : "| 0 |" — was missing right pipe
   ════════════════════════════════════════ */
html body .klh-bar [data-klh-cart-trigger] {
  align-items: center !important;
  white-space: nowrap !important;
  gap: 0 !important;
}
html body .klh-bar [data-klh-cart-trigger]::before {
  content: "|" !important;
  display: inline !important;
  color: #000 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  margin-right: 4px !important;
}
html body .klh-bar [data-klh-cart-trigger]::after {
  content: "|" !important;
  display: inline !important;
  color: #000 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  margin-left: 4px !important;
}

/* ════════════════════════════════════════
   FILTER MODAL : disable auto-submit on change (multi-select)
   Style + labels FR
   ════════════════════════════════════════ */
html body .kl-zara-sheet__head { padding: 18px 20px !important; }
html body .kl-zara-sheet__title {
  font-family: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
html body .kl-zara-sheet__body details.kl3__filter-group summary,
html body .kl-zara-sheet__body details.kl3__filter-group summary span {
  font-family: "Helvetica Now Text", monospace !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
html body .kl-zara-sheet__body .kl3__filter-opt-label,
html body .kl-zara-sheet__body .kl3__filter-chip,
html body .kl-zara-sheet__body label {
  font-family: "Helvetica Now Text", "Helvetica Neue", Helvetica, sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}


/* ════════════════════════════════════════
   ROUND 9 (Karl 2026-05-09) :
   - Fix 2x2 grid overflow (long titles forcing 1fr 1fr to break with min-content)
   - Titles weight 300 → 200 (less bold)
   ════════════════════════════════════════ */

/* Force flex children to shrink properly so nowrap + ellipsis work */
html body .kl3 .kl3__pcard,
html body .kl3 .kl3__pcard-info,
html body .kl3 .kl3__pcard-info .kl3__title,
html body .kl3 .kl3__pcard-info .kl3__title .name,
html body .kl3 .kl3__pcard-info .kl3__title .price {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Grid container : never overflow viewport, force equal columns by sizing children */
html body .kl3 .kl3__grid {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
html body .kl3.kl3-grid--2x2 .kl3__grid > .kl3__pcard {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Titles less bold : weight 200 (extra-light) */
html body .kl3 .kl3__pcard .kl3__title .name,
html body .kl3 .kl3__pcard .kl3__title .price,
html body .kl-zara-tab,
html body .klh-bar [data-zara-filtres],
html body .klh-bar [data-klh-cart-trigger],
html body .kl-zara-coll-desc {
  font-weight: 200 !important;
}

/* Title h1 reste 400 pour lisibilité (centered headline) */
html body .kl-zara-coll-title h1 {
  font-weight: 400 !important;
}

/* Active tab still bold-ish to show selection */
html body .kl-zara-tab.is-active {
  font-weight: 500 !important;
}

/* Title ellipsis enforce one line */
html body .kl3.kl3-grid--2x2 .kl3__pcard .kl3__title .name,
html body .kl3.kl3-grid--1x1 .kl3__pcard .kl3__title .name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  width: 100% !important;
}


/* ════════════════════════════════════════
   ROUND 10 (Karl 2026-05-09) :
   - Title overflow on "+"
   - Titles font-weight 100 (extra-thin)
   - Header icons tighter + wishlist left of search
   - Cart : petit panier SVG visible
   ════════════════════════════════════════ */

/* === Title overflow fix === */
html body .kl3.kl3-grid--2x2 .kl3__pcard-info,
html body .kl3.kl3-grid--1x1 .kl3__pcard-info {
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
html body .kl3.kl3-grid--2x2 .kl3__pcard-info .kl3__title,
html body .kl3.kl3-grid--1x1 .kl3__pcard-info .kl3__title {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
html body .kl3.kl3-grid--2x2 .kl3__pcard-info .kl3__title .name,
html body .kl3.kl3-grid--1x1 .kl3__pcard-info .kl3__title .name {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html body .kl3 .kl3__pcard .kl3__qa-trigger,
html body .kl3 .kl3__pcard .kl3__wish {
  flex: 0 0 auto !important;
  align-self: center !important;
}

/* === Titles thinner (100) === */
html body .kl3 .kl3__pcard .kl3__title .name,
html body .kl3 .kl3__pcard .kl3__title .price {
  font-weight: 100 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}
html body .kl-zara-coll-title h1 {
  font-weight: 300 !important; /* not too bold either */
}

/* === Header icons tight + reorder === */
body.template-karlan .klh-bar,
body.template-collection .klh-bar {
  grid-template-columns: auto auto auto 1fr auto auto auto !important;
  gap: 6px !important;
  padding: 0 12px !important;
}
body.template-karlan .klh-bar .klh-icons,
body.template-collection .klh-bar .klh-icons {
  gap: 8px !important;
}
body.template-karlan .klh-bar .klh-icon,
body.template-collection .klh-bar .klh-icon {
  padding: 4px !important;
}
body.template-karlan .klh-bar [data-klh-wishlist-trigger],
body.template-collection .klh-bar [data-klh-wishlist-trigger] {
  display: inline-flex !important;
  order: 1 !important;
}
body.template-karlan .klh-bar [data-klh-search-panel-trigger],
body.template-collection .klh-bar [data-klh-search-panel-trigger] {
  order: 2 !important;
}
body.template-karlan .klh-bar [data-klh-cart-trigger],
body.template-collection .klh-bar [data-klh-cart-trigger] {
  order: 3 !important;
}

/* === Cart : SHOW basket SVG (small) + count number, no brackets === */
html body .klh-bar [data-klh-cart-trigger] svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1px !important;
  color: #000 !important;
}
html body .klh-bar [data-klh-cart-trigger]::before,
html body .klh-bar [data-klh-cart-trigger]::after {
  content: none !important;
  display: none !important;
}
html body .klh-bar [data-klh-cart-trigger] {
  position: relative !important;
  padding: 4px !important;
  font-size: 0 !important;
}
html body .klh-bar [data-klh-cart-trigger] .klh-icon-count {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  font-size: 9px !important;
  font-family: "Helvetica Now Text", "Helvetica Neue", sans-serif !important;
  font-weight: 300 !important;
  color: #000 !important;
  background: transparent !important;
  padding: 0 !important;
  min-width: 10px !important;
  line-height: 1 !important;
}

/* === Menu drawer "HOMME" → logo image === */
html body .klh-dr-genders { padding: 18px 18px 24px !important; }
html body .klh-dr-genders .klh-dr-gender-text { display: none !important; }
html body .klh-dr-genders .klh-dr-logo-link {
  display: inline-block !important;
  padding: 4px !important;
}
html body .klh-dr-genders .klh-dr-logo-link img {
  display: block !important;
  height: 22px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
}
html body .klh-dr-genders .klh-dr-gender::after { display: none !important; }


/* ════════════════════════════════════════
   ROUND 11 (Karl 2026-05-09) :
   - Wishlist icon force-show
   - Inter Tight @ 100/200/300 for proper thin rendering
   - PDP header match collection
   ════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700&display=swap');

/* === Force show wishlist trigger on ALL templates === */
html body header.klh .klh-bar [data-klh-wishlist-trigger],
html body.template-karlan .klh-bar [data-klh-wishlist-trigger],
html body.template-collection .klh-bar [data-klh-wishlist-trigger],
html body.template-product .klh-bar [data-klh-wishlist-trigger] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  order: 1 !important;
}

/* === Titles thin Inter Tight 200 === */
html body .kl3 .kl3__pcard .kl3__title .name,
html body .kl3 .kl3__pcard .kl3__title .price {
  font-family: "Inter Tight", "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 200 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
html body .kl-zara-tab {
  font-family: "Inter Tight", "Helvetica Now Text", sans-serif !important;
  font-weight: 300 !important;
}
html body .kl-zara-tab.is-active { font-weight: 500 !important; }
html body .klh-bar [data-zara-filtres],
html body .klh-bar [data-klh-cart-trigger],
html body .kl-zara-coll-desc {
  font-family: "Inter Tight", "Helvetica Now Text", sans-serif !important;
  font-weight: 300 !important;
}
html body .kl-zara-coll-title h1 {
  font-family: "Inter Tight", "Helvetica Now Text", sans-serif !important;
  font-weight: 400 !important;
}

/* === PDP header match collection : menu | wishlist | search | cart === */
body.template-product header.klh .klh-bar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 6px !important;
  padding: 0 14px !important;
  align-items: center !important;
}
/* removed by fix-logo-scroll */
body.template-product header.klh .klh-icons {
  display: inline-flex !important;
  gap: 24px !important;
  justify-self: end !important;
  align-items: center !important;
  padding-right: 4px !important;
}
body.template-product header.klh .klh-icons [data-klh-wishlist-trigger] {
  display: inline-flex !important;
  order: 1 !important;
}
body.template-product header.klh .klh-icons [data-klh-search-panel-trigger] { order: 2 !important; }
body.template-product header.klh .klh-icons [data-klh-cart-trigger] { order: 3 !important; }

/* === HOMEPAGE (template-index) : hide logo + 3 icons right edge equal gap === */
body.template-index header.klh .klh-bar,
body.template-list-collections header.klh .klh-bar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 6px !important;
  padding: 0 14px !important;
  align-items: center !important;
}
/* logo hide removed */
body.template-index header.klh .klh-icons,
body.template-list-collections header.klh .klh-icons {
  display: inline-flex !important;
  gap: 24px !important;
  justify-self: end !important;
  align-items: center !important;
  padding-right: 4px !important;
}
body.template-index header.klh .klh-icons [data-klh-wishlist-trigger],
body.template-list-collections header.klh .klh-icons [data-klh-wishlist-trigger] {
  display: inline-flex !important;
  order: 1 !important;
}
body.template-index header.klh .klh-icons [data-klh-search-panel-trigger],
body.template-list-collections header.klh .klh-icons [data-klh-search-panel-trigger] { order: 2 !important; }
body.template-index header.klh .klh-icons [data-klh-cart-trigger],
body.template-list-collections header.klh .klh-icons [data-klh-cart-trigger] { order: 3 !important; }

/* === HOME watermark : replace italic "Karlan" text with white logo image === */
html body .kl3 .kl3__home-watermark {
  font-size: 0 !important;
  color: transparent !important;
  background-image: url('/cdn/shop/files/karlan-logo-white.png?v=1777834173') !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  width: min(80vw, 600px) !important;
  height: 80px !important;
  display: block !important;
  mix-blend-mode: normal !important;
}
@media (min-width: 750px) {
  html body .kl3 .kl3__home-watermark {
    width: min(50vw, 700px) !important;
    height: 120px !important;
  }
}


/* ════════════════════════════════════════
   ROUND 12 (Karl 2026-05-09) :
   GLOBAL : hide logo on ALL pages + 3 icons right edge equal gap
   ════════════════════════════════════════ */

/* removed by fix-logo-scroll */

/* Header bar = menu (left) | flex spacer | icons (right) */
html body header.klh .klh-bar,
html body .kl-header-section .klh-bar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 6px !important;
  padding: 0 14px !important;
  align-items: center !important;
}

/* Icons cluster right edge, equal gap 24px */
html body header.klh .klh-icons,
html body .kl-header-section .klh-icons {
  display: inline-flex !important;
  gap: 24px !important;
  justify-self: end !important;
  align-items: center !important;
  padding-right: 4px !important;
}

/* Equal icon padding so visual centers align */
html body header.klh .klh-icons .klh-icon {
  padding: 4px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body header.klh .klh-icons .klh-icon svg {
  width: 20px !important;
  height: 20px !important;
}


/* ════════════════════════════════════════
   ROUND 13 (Karl 2026-05-09) :
   - Header bar = flex (était grid 3-col, icons wrapped to row 2)
   - Title typography Zara exact (font-family, weight 300, line-height 16px, ellipsis)
   ════════════════════════════════════════ */

/* Header bar : flex single row, menu group left, icons right */
html body header.klh .klh-bar,
html body .kl-header-section .klh-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 0 14px !important;
  min-height: 56px !important;
  grid-template-columns: none !important;
}

/* Left group : menu + toggle + filtres flow inline */
html body header.klh .klh-menu {
  flex: 0 0 auto !important;
  margin-right: 6px !important;
}

/* Toggle + FILTRES (collection only) inline next to menu */
html body header.klh .klh-bar > [data-zara-toggle],
html body header.klh .klh-bar > [data-zara-filtres] {
  flex: 0 0 auto !important;
}

/* Icons cluster right edge, equal gap */
html body header.klh .klh-icons,
html body .kl-header-section .klh-icons {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  gap: 24px !important;
  align-items: center !important;
  margin-left: auto !important;
  padding-right: 4px !important;
}

/* Logo hidden globally (round 12 carryover) */
/* removed by fix-logo-scroll */

/* Each icon equal box */
html body header.klh .klh-icons .klh-icon {
  padding: 4px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body header.klh .klh-icons .klh-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* ════════════════════════════════════════
   TITLE TYPOGRAPHY ZARA EXACT (verified DOM zara.com 2026-05-09)
   font-family: "Helvetica Now Text", Helvetica, Arial, sans-serif
   font-weight: 300
   font-size: 11px
   letter-spacing: normal
   line-height: 16px
   text-transform: uppercase
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis
   ════════════════════════════════════════ */

html body .kl3 .kl3__pcard .kl3__title .name,
html body .kl3 .kl3__pcard .kl3__title .price {
  font-family: "Helvetica Now Text", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: normal !important;
  line-height: 16px !important;
  text-transform: uppercase !important;
  color: #000 !important;
}
html body .kl3 .kl3__pcard .kl3__title .name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* "+" button must not push title — flex shrink right */
html body .kl3 .kl3__pcard-info {
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}
html body .kl3 .kl3__pcard .kl3__title {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
html body .kl3 .kl3__pcard .kl3__qa-trigger,
html body .kl3 .kl3__pcard .kl3__wish {
  flex: 0 0 auto !important;
  margin: 0 !important;
}


/* ════════════════════════════════════════
   ROUND 17 (Karl 2026-05-09) :
   - Title overflow fix : reserve "+" + heart space, ellipsis BEFORE
   - Force Inter Tight 200 with max specificity
   ════════════════════════════════════════ */

/* CRITICAL : import Inter Tight 100-700 with display:swap so light weights actually load */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700&display=swap');

/* Card info row layout : title (flex shrink) | actions (fixed) */
html body .kl3 .kl3__pcard .kl3__pcard-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 4px 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}
html body .kl3 .kl3__pcard .kl3__title {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: calc(100% - 60px) !important; /* reserve 60px for + + heart + gap */
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 !important;
}
html body .kl3 .kl3__pcard .kl3__title .name,
html body .kl3 .kl3__pcard .kl3__title .price {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Force light weight Inter Tight on titles + price (100 = thinnest available) */
html body.template-karlan .kl3 .kl3__pcard .kl3__title .name,
html body.template-collection .kl3 .kl3__pcard .kl3__title .name,
html body.template-karlan .kl3 .kl3__pcard .kl3__title .price,
html body.template-collection .kl3 .kl3__pcard .kl3__title .price,
html body .kl3 .kl3__pcard .kl3__title .name,
html body .kl3 .kl3__pcard .kl3__title .price {
  font-family: "Inter Tight", "Helvetica Now Text", "Helvetica Neue", Helvetica, sans-serif !important;
  font-weight: 200 !important;
  font-size: 11px !important;
  line-height: 16px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #000 !important;
}
@supports (font-variation-settings: "wght" 200) {
  html body .kl3 .kl3__pcard .kl3__title .name,
  html body .kl3 .kl3__pcard .kl3__title .price {
    font-variation-settings: "wght" 200 !important;
  }
}

/* Action group on right : flex 0 0 auto, no shrink */
html body .kl3 .kl3__pcard .kl3__qa-trigger,
html body .kl3 .kl3__pcard .kl3__wish,
html body .kl3 .kl3__pcard .kl3__wish--inline {
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

/* 3x3 mode keeps existing centered layout */
html body .kl3.kl3-grid--3x3 .kl3__pcard .kl3__title {
  max-width: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
}
html body .kl3.kl3-grid--3x3 .kl3__pcard .kl3__title .name { display: none !important; }


/* ════════════════════════════════════════
   ROUND 18 (Karl 2026-05-09) :
   - Footer suggestions on all collection pages
   - Text shrink + typo Zara everywhere (Inter Tight 100/200/300)
   ════════════════════════════════════════ */

/* Suggestions footer */
.klf-suggestions {
  padding: 56px 16px 40px !important;
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,0.04) !important;
  margin-top: 32px !important;
}
.klf-suggestions__head {
  text-align: center !important;
  margin-bottom: 20px !important;
}
.klf-suggestions__eyebrow {
  font-family: "Inter Tight", "Helvetica Now Text", sans-serif !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,0.5) !important;
  display: inline-block !important;
}
.klf-suggestions__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.klf-suggestions__card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: #000 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.klf-suggestions__media {
  display: block !important;
  aspect-ratio: 2 / 3 !important;
  background: #f5f5f5 !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
}
.klf-suggestions__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.klf-suggestions__title {
  display: block !important;
  font-family: "Inter Tight", "Helvetica Now Text", sans-serif !important;
  font-weight: 200 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  line-height: 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 4px !important;
}
.klf-suggestions__price {
  display: block !important;
  font-family: "Inter Tight", "Helvetica Now Text", sans-serif !important;
  font-weight: 200 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  color: rgba(0,0,0,0.55) !important;
  margin-top: 2px !important;
  padding: 0 4px !important;
}

/* Global text shrink Zara typo */
html body .kl3 .kl3__pcard .kl3__title .name,
html body .kl3 .kl3__pcard .kl3__title .price {
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
}
html body .kl-zara-tab { font-size: 12px !important; letter-spacing: 0.04em !important; }
html body .klh-bar [data-zara-filtres] { font-size: 11px !important; }
html body .klh-bar [data-klh-cart-trigger] { font-size: 12px !important; }
html body .kl-zara-coll-title h1 { font-size: 20px !important; font-weight: 400 !important; }
html body .kl-zara-coll-desc { font-size: 12px !important; }


/* ════════════════════════════════════════
   ROUND 19 (Karl 2026-05-09) :
   Vu récemment : titles ellipsis enforce (long titles dépassaient)
   ════════════════════════════════════════ */

html body .kl3 .kl3__recent .kl3__recent-card,
html body .kl3 .kl3__recent .kl3__recent-card * {
  max-width: 144px !important;
  min-width: 0 !important;
}
html body .kl3 .kl3__recent .kl3__recent-card {
  flex: 0 0 144px !important;
  width: 144px !important;
  overflow: hidden !important;
}
html body .kl3 .kl3__recent .kl3__recent-card-title {
  display: block !important;
  width: 100% !important;
  max-width: 144px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: "Inter Tight", "Helvetica Now Text", "Helvetica Neue", sans-serif !important;
  font-weight: 200 !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 14px !important;
}
html body .kl3 .kl3__recent .kl3__recent-card-price {
  font-family: "Inter Tight", sans-serif !important;
  font-weight: 200 !important;
  font-size: 9px !important;
}

@media (max-width: 749px) {
  html body .kl3 .kl3__recent .kl3__recent-card {
    flex: 0 0 110px !important;
    width: 110px !important;
    max-width: 110px !important;
  }
  html body .kl3 .kl3__recent .kl3__recent-card * {
    max-width: 110px !important;
  }
  html body .kl3 .kl3__recent .kl3__recent-card-title { font-size: 9.5px !important; }
}


/* ════════════════════════════════════════
   ROUND 20 : restore logo toggle + opaque scroll
   ════════════════════════════════════════ */

/* Logo : NO global force-hide. Respects section.settings.kl_logo_show via inline style in header.liquid. */
/* (intentionally empty — removal via regex above) */

/* Scroll : header reste opaque BLANC, pas de transparent/blur */
html body.template-karlan.is-scrolled .kl-header-section,
html body.template-collection.is-scrolled .kl-header-section,
html body.template-product.is-scrolled .kl-header-section,
html body.template-karlan.is-scrolled header.klh,
html body.template-collection.is-scrolled header.klh,
html body.template-product.is-scrolled header.klh {
  background-color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}
html body.template-karlan.is-scrolled .klh-bar,
html body.template-collection.is-scrolled .klh-bar,
html body.template-product.is-scrolled .klh-bar {
  background: #ffffff !important;
}


/* ════════════════════════════════════════
   ROUND 21 : home full-page no URL bar overlap
   - 100dvh sur hero / slides (dynamic viewport, ajuste auto avec URL bar Safari)
   - safe-area-inset-bottom respect
   - body bg #000 fallback sous URL bar zone
   ════════════════════════════════════════ */

html, body { height: auto; }

/* Home slider full page */
html body .kl3.kl3.is-home-slider,
html body .kl3__home-slider,
html body .kl3__home-track,
html body .kl3__home-slide,
html body .kl3__hero {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
}

/* Fallback for browsers without dvh support */
@supports not (height: 100dvh) {
  html body .kl3.is-home-slider,
  html body .kl3__home-slider,
  html body .kl3__home-track,
  html body .kl3__home-slide,
  html body .kl3__hero {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}

/* Hero image cover fully */
html body .kl3__home-slide,
html body .kl3__hero,
html body .kl3__hero-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Body : noir fond pour zones safe-area Safari */
html { background: #ffffff !important; }
body { background: #ffffff; min-height: 100dvh; min-height: 100lvh; }
body.template-index, body.template-karlan { background: #ffffff !important; }




/* ════════════════════════════════════════
   ROUND 45 (Karl 2026-05-09 14:30) — CLEAN REBUILD
   Single coherent rules. No conflicts.
   ════════════════════════════════════════ */

/* Collection page : padding-top main = header (60px) only, no extra */
html body.template-collection main,
html body.template-collection #MainContent,
html body.template-collection .kl3,
html body.template-list-collections main {
  padding-top: 64px !important;
}

/* Collection title block — visible, tight margins */
html body.template-collection .kl-zara-coll-title,
html body.template-collection .kl3__hero,
html body.template-collection .kl3__hero-title,
html body.template-collection h1 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 5 !important;
  margin-top: 12px !important;
  margin-bottom: 6px !important;
  height: auto !important;
  overflow: visible !important;
}
html body.template-collection .kl-zara-coll-desc,
html body.template-collection .kl3__hero-meta {
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

/* Collection cards : aspect 2/3 strict, cover, anchor TOP (head visible if crop) */
html body.template-collection .kl3 .kl3__pcard .kl3__media,
html body.template-list-collections .kl3 .kl3__pcard .kl3__media {
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  background: #ffffff !important;
  overflow: hidden !important;
  position: relative !important;
}
html body.template-collection .kl3 .kl3__pcard .kl3__media .kl3__media-track,
html body.template-collection .kl3 .kl3__pcard .kl3__media .kl3__media-slide {
  height: 100% !important;
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
}
html body.template-collection .kl3 .kl3__pcard .kl3__media img,
html body.template-collection .kl3 .kl3__pcard .kl3__media img.kl3__img,
html body.template-collection .kl3 .kl3__pcard .kl3__media .kl3__media-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  background: #ffffff !important;
  aspect-ratio: auto !important;
}

/* Card grid : tight gap, full width */
html body.template-collection .kl3__grid {
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.template-collection .kl3__pcard {
  padding: 0 !important;
}
html body.template-collection .kl3__pcard .kl3__pcard-info,
html body.template-collection .kl3__pcard .kl3__title {
  margin-top: 6px !important;
  padding-top: 0 !important;
}

/* PDP gallery — full natural size, no constraint, contain only as safety */
html body.template-product .ks-gallery,
html body.template-product .ks-gallery__frame {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
html body.template-product .ks-gallery img,
html body.template-product .ks-gallery__frame img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: #ffffff !important;
  aspect-ratio: auto !important;
}

/* Pop-up taille croix : repositionner */
html body .ks-size-modal__close {
  position: absolute !important;
  top: max(env(safe-area-inset-top, 0px), 12px) !important;
  right: 12px !important;
  z-index: 10 !important;
}
html body .ks-size-modal__header {
  padding-top: max(env(safe-area-inset-top, 0px), 56px) !important;
}

/* Header fixe (R24) — keep */
html body header.klh,
html body .kl-header-section {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}


/* ════════════════════════════════════════
   ROUND 46 (Karl 2026-05-09 14:50) :
   - Hide scroll-to-top FAB orange
   - HIDE collection title + description (Karl 2026-05-09 14:55)
   - Force cards collection object-fit CONTAIN (no crop ever)
   ════════════════════════════════════════ */

/* Scroll-top FAB hide */
html body button[onclick*="scrollTo"],
html body button[onclick*="scrollIntoView"],
html body a[href="#top"],
html body a[href="#"],
html body button[aria-label*="haut" i],
html body button[aria-label*="top" i],
html body button[aria-label*="scroll" i],
html body button[aria-label*="back to top" i],
html body .scroll-to-top,
html body .back-to-top,
html body .scroll-top,
html body #scroll-top,
html body #back-to-top,
html body [data-scroll-top],
html body [data-back-to-top],
html body [class*="scroll-top"],
html body [id*="scroll-top"],
html body [class*="ScrollTop"],
html body [class*="back-top"],
html body [class*="BackToTop"],
html body [id*="BackToTop"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* HIDE title + description page collection (Karl ask 14:55) */
html body.template-collection .kl-zara-coll-title,
html body.template-collection .kl-zara-coll-desc,
html body.template-collection .kl3__hero,
html body.template-collection .kl3__hero-title,
html body.template-collection .kl3__hero-meta,
html body.template-collection .kl3__hero-content,
html body.template-collection .karlan-collection-description,
html body.template-collection h1,
html body.template-collection .collection__title,
html body.template-collection .collection-hero {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* CARDS COLLECTION : object-fit CONTAIN (zéro crop) */
html body.template-collection .kl3 .kl3__pcard .kl3__media img,
html body.template-collection .kl3 .kl3__pcard .kl3__media img.kl3__img,
html body.template-collection .kl3 .kl3__pcard .kl3__media .kl3__media-slide img,
html body.template-list-collections .kl3 .kl3__pcard .kl3__media img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #ffffff !important;
}


/* ════════════════════════════════════════
   ROUND 48 (Karl 2026-05-09 15:05) :
   Hide top FILTRES button + grid toggle (only bottom bar visible now)
   ════════════════════════════════════════ */

html body.template-collection .kl-zara-stickybar,
html body.template-collection [data-kl-zara-stickybar],
html body.template-collection .kl3__filter-bar,
html body.template-collection [data-kl3-add-filter],
html body.template-collection .kl3-grid-toggle,
html body.template-collection .kl-zara-coll-header,
html body.template-collection .kl-zara-coll-tabs-row,
html body.template-collection .karlan-zara-collection-header__filter,
html body.template-collection .karlan-zara-collection-header__grid {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Reduce padding-top main since top filter row gone */
html body.template-collection main,
html body.template-collection #MainContent,
html body.template-collection .kl3,
html body.template-list-collections main {
  padding-top: 60px !important;
}


/* ════════════════════════════════════════
   ROUND 49 (Karl 2026-05-09 15:25) :
   Force cards images visible — safety override anti-hide
   ════════════════════════════════════════ */

html body.template-collection .kl3__media,
html body.template-collection .kl3__media-track,
html body.template-collection .kl3__media-slide,
html body.template-collection .kl3__pcard {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body.template-collection .kl3__media .kl3__media-track {
  display: flex !important;
}
html body.template-collection .kl3__media .kl3__media-slide {
  flex: 0 0 100% !important;
}
html body.template-collection .kl3__media img,
html body.template-collection .kl3__media img.kl3__img,
html body.template-collection .kl3__media .kl3__media-slide img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f8f8f8 !important;
}


/* ════════════════════════════════════════
   ROUND 51 (Karl 2026-05-09 15:45) :
   Strengthen hide top FILTRES + grid icons (avoid duplicates with bottom bar)
   ════════════════════════════════════════ */

html body.template-collection .kl-zara-stickybar,
html body.template-collection [data-kl-zara-stickybar],
html body.template-collection .kl3__filter-bar,
html body.template-collection [data-kl3-add-filter],
html body.template-collection .kl3-grid-toggle,
html body.template-collection .kl-zara-coll-header,
html body.template-collection .kl-zara-coll-tabs-row,
html body.template-collection .karlan-zara-collection-header,
html body.template-collection .kl-zara-coll-actions,
html body.template-collection [data-kl-grid-toggle],
html body.template-collection .karlan-zara-collection-header__filter,
html body.template-collection .karlan-zara-collection-header__grid,
html body.template-collection .kl3__rail-meta,
html body.template-collection .karlan-collection-actions {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
}


/* ════════════════════════════════════════
   ROUND 52 (Karl 2026-05-09 16:00) :
   - Hide .kl-zara-up-top orange FAB scroll-to-top (toutes templates)
   - Hide top filter + grid toggle buttons (klh-bar zara injected)
   ════════════════════════════════════════ */

html body .kl-zara-up-top,
html body button.kl-zara-up-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Hide top header zara filter + grid toggle (R48 reinforcement) */
html body.template-collection .klh-bar [data-zara-toggle],
html body.template-collection .klh-bar [data-zara-filtres],
html body[class*="template-collection"] .klh-bar [data-zara-toggle],
html body[class*="template-collection"] .klh-bar [data-zara-filtres] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}


/* ════════════════════════════════════════
   ROUND 54 (Karl 2026-05-09 16:30) :
   - Padding-top main 100px (header + tabs cover)
   ════════════════════════════════════════ */

html body.template-collection main,
html body.template-collection #MainContent,
html body.template-collection .kl3,
html body.template-list-collections main {
  padding-top: 100px !important;
}


/* ════════════════════════════════════════
   ROUND 56 (Karl 2026-05-09 17:00) :
   - Center titles + prices cards collection (override zara-coll-header LEFT align)
   - CSS hook for editor-controlled top gap (--kl-top-gap)
   ════════════════════════════════════════ */

/* Editor-controlled top gap (default 100px, can be overridden via inline style on body) */
html body.template-collection main,
html body.template-collection #MainContent,
html body.template-collection .kl3,
html body.template-list-collections main {
  padding-top: var(--kl-top-gap, 100px) !important;
}

/* Center title + price under cards (override zara-coll-header LEFT align) */
html body.template-collection .kl3 .kl3__pcard .kl3__pcard-info,
html body.template-collection .kl3.kl3-grid--1x1 .kl3__pcard .kl3__pcard-info,
html body.template-collection .kl3.kl3-grid--2x2 .kl3__pcard .kl3__pcard-info,
html body.template-collection .kl3.kl3-grid--3x3 .kl3__pcard .kl3__pcard-info {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px !important;
}
html body.template-collection .kl3 .kl3__pcard .kl3__title,
html body.template-collection .kl3.kl3-grid--1x1 .kl3__pcard .kl3__title,
html body.template-collection .kl3.kl3-grid--2x2 .kl3__pcard .kl3__title,
html body.template-collection .kl3.kl3-grid--3x3 .kl3__pcard .kl3__title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: center !important;
  width: 100% !important;
  padding: 0 4px !important;
}
html body.template-collection .kl3 .kl3__pcard .kl3__title .name,
html body.template-collection .kl3.kl3-grid--1x1 .kl3__pcard .kl3__title .name,
html body.template-collection .kl3.kl3-grid--2x2 .kl3__pcard .kl3__title .name,
html body.template-collection .kl3.kl3-grid--3x3 .kl3__pcard .kl3__title .name {
  text-align: center !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 0 2px 0 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.template-collection .kl3 .kl3__pcard .kl3__title .price,
html body.template-collection .kl3.kl3-grid--1x1 .kl3__pcard .kl3__title .price,
html body.template-collection .kl3.kl3-grid--2x2 .kl3__pcard .kl3__title .price,
html body.template-collection .kl3.kl3-grid--3x3 .kl3__pcard .kl3__title .price {
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  color: rgba(45,46,44,0.7) !important;
  display: block !important;
}
/* Hide "+" pseudo on title */
html body.template-collection .kl3 .kl3__pcard .kl3__title::after,
html body.template-collection .kl3.kl3-grid--1x1 .kl3__pcard .kl3__title::after,
html body.template-collection .kl3.kl3-grid--2x2 .kl3__pcard .kl3__title::after,
html body.template-collection .kl3.kl3-grid--3x3 .kl3__pcard .kl3__title::after {
  content: none !important;
  display: none !important;
}


/* ════════════════════════════════════════
   ROUND 57 (Karl 2026-05-09 17:15) :
   Cards collection — show ONLY first image (single slide)
   Hide multi-track + dots + arrows. Anti-zoom-bug.
   ════════════════════════════════════════ */

/* Media container : single slide only */
html body.template-collection .kl3 .kl3__pcard .kl3__media-track {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
html body.template-collection .kl3 .kl3__pcard .kl3__media-slide {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  flex: none !important;
}
/* Hide slides 2, 3, 4, 5 — show only first slide */
html body.template-collection .kl3 .kl3__pcard .kl3__media-track > .kl3__media-slide:not(:first-child) {
  display: none !important;
}
/* Hide dots and arrows in collection cards */
html body.template-collection .kl3 .kl3__pcard .kl3__media-dots,
html body.template-collection .kl3 .kl3__pcard .kl3__media-arrow {
  display: none !important;
}

/* Force img inside slide to fill perfectly with cover (head visible via center top) */
html body.template-collection .kl3 .kl3__pcard .kl3__media img,
html body.template-collection .kl3 .kl3__pcard .kl3__media img.kl3__img,
html body.template-collection .kl3 .kl3__pcard .kl3__media .kl3__media-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  background: #f5f5f5 !important;
  position: relative !important;
}


/* ════════════════════════════════════════
   ROUND 58 (Karl 2026-05-09 17:30) :
   1. Titles 2 lines visible (not first-line ellipsis)
   2. Padding-top main bump 100→140px (clear tabs sticky cover)
   ════════════════════════════════════════ */

/* Titles : force normal wrap + 2 lines max */
html body.template-collection .kl3 .kl3__pcard .kl3__title .name,
html body.template-collection .kl3.kl3-grid--1x1 .kl3__pcard .kl3__title .name,
html body.template-collection .kl3.kl3-grid--2x2 .kl3__pcard .kl3__title .name,
html body.template-collection .kl3.kl3-grid--3x3 .kl3__pcard .kl3__title .name {
  white-space: normal !important;
  word-break: break-word !important;
  hyphens: auto !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 0 2px 0 !important;
  min-height: 2.6em !important;
}

/* Padding-top main : 140px (header 60 + ann 22 + tabs 50 = 132 + 8 buffer) */
html body.template-collection main,
html body.template-collection #MainContent,
html body.template-collection .kl3,
html body.template-list-collections main {
  padding-top: var(--kl-top-gap, 140px) !important;
}