/** Shopify CDN: Minification failed

Line 51:0 All "@import" rules must come first

**/
/* ==========================================================================
   KLISTEL PINKLET — Custom Overrides
   File: assets/custom.css   |  Theme: Impulse 9.0.0
   Source of truth: V1 prototype. Replace the ENTIRE custom.css with this.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [00a] RUPEE GLYPH -- IMAGE REPLACEMENT (the official geometric mark)
   Fonts kept rendering the rupee sign in the wrong shape across systems,
   so we replace every literal Rs character with an inline SVG icon of
   the official Reserve Bank of India design. The SVG is embedded as a
   CSS mask (data:URI base64) -- no extra HTTP request, no asset upload.

   custom.js wraps every Rs character it finds inside price-rendering
   containers in <span class="klistel-rupee">Rs</span>. The CSS below
   hides the original character and paints the SVG in its place, sized to
   match cap-height. The SVG uses background-color: currentColor on a
   mask, so it inherits whatever text color the parent uses (sale red,
   pink CTA, dark grey body, etc).
   -------------------------------------------------------------------------- */
.klistel-rupee {
  display: inline-block;
  position: relative;
  width: 0.55em;            /* glyph width relative to surrounding text */
  height: 0.85em;           /* glyph height ~ cap-height of digits */
  vertical-align: -0.08em;  /* nudge baseline so it sits like a letter */
  color: inherit;
  overflow: hidden;
  text-indent: 100%;        /* push the actual character offscreen */
  white-space: nowrap;
  margin-right: 0.04em;     /* tiny breathing space before the digits */
  line-height: 1;
}
.klistel-rupee::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTMwIiBmaWxsPSJjdXJyZW50Q29sb3IiIGFyaWEtbGFiZWw9IlJ1cGVlIj48cGF0aCBkPSJNMTQgOGg3MnYxNEg2Mi41YzIuMyAzLjQgMy44IDcuMyA0LjQgMTEuNkg4NnYxNEg2Ni41Yy0yLjQgMTEuOC0xMS43IDIwLjQtMjUgMjIuMUw3MiAxMjJINTMuNUwyMCA2Ny41VjU0aDIyYzguNiAwIDE0LjYtMy40IDE3LTEwLjRIMTR2LTE0aDQ0LjVjLTIuNi02LjQtOC42LTEwLTE3LTEwSDE0Vjh6Ii8+PC9zdmc+") no-repeat center / contain;
          mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTMwIiBmaWxsPSJjdXJyZW50Q29sb3IiIGFyaWEtbGFiZWw9IlJ1cGVlIj48cGF0aCBkPSJNMTQgOGg3MnYxNEg2Mi41YzIuMyAzLjQgMy44IDcuMyA0LjQgMTEuNkg4NnYxNEg2Ni41Yy0yLjQgMTEuOC0xMS43IDIwLjQtMjUgMjIuMUw3MiAxMjJINTMuNUwyMCA2Ny41VjU0aDIyYzguNiAwIDE0LjYtMy40IDE3LTEwLjRIMTR2LTE0aDQ0LjVjLTIuNi02LjQtOC42LTEwLTE3LTEwSDE0Vjh6Ii8+PC9zdmc+") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   [00] HEADER BRAND FONT — Playfair Display (closest free match to V1 Canela)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* Sitewide heading font — Cormorant Garamond replaces theme default everywhere */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.section-header__title,
.product-single__title,
.collection-hero__title,
.cart__title,
.page-title,
.index-section .section-header__title,
.featured-quote__text,
.product-recommendations__heading,
.article__title {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif !important;
}

.site-header__logo,
.site-header__logo a,
.site-header__logo-link,
.site-header__logo-text,
.site-header__logo-link span,
.site-header h1,
.site-header h1 a,
.site-header h1 span,
.header-layout .site-header__logo,
.header-layout .site-header__logo a,
.header-layout .site-header__logo span {
  font-family: 'Cormorant Garamond', 'Cormorant', 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  font-style: normal !important;
}

/* --------------------------------------------------------------------------
   [01] CAROUSEL / HEADER GAP
   Controls top padding of the product section (space below the sticky header).
   Set to 0 for flush. Increase (e.g. 12px) to add breathing room.
   -------------------------------------------------------------------------- */
.template-product .index-section {
  padding-top: 0 !important;
}


/* --------------------------------------------------------------------------
   [02] PDP HERO — full-bleed + 3:4 portrait (match V1 prototype)
   KEY LESSON: Impulse uses Flickity, which sets viewport height via JS using
   the slide's padding-bottom box. So we DO NOT touch .flickity-viewport and
   we DO NOT use aspect-ratio. We only change padding-bottom 100% -> 133.33%
   (which is exactly 3:4 portrait). Flickity measures it correctly at init.
   -------------------------------------------------------------------------- */


/* 2.1  Full-bleed breakout — DESKTOP ONLY.
        On mobile the image already fills the screen, and 100vw includes the
        scrollbar (caused a 17px overflow / sideways shift). So we apply the
        breakout only at >=769px and reset cleanly on mobile. */
@media (min-width: 769px) {
  .product-template .grid--product-images--partial .grid__item.product-single__sticky,
  .grid--product-images--partial .grid__item.medium-up--three-fifths {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    flex: 0 0 100vw;
    position: static;
  }
}


@media (max-width: 768px) {
  .product-template .grid--product-images--partial .grid__item.product-single__sticky,
  .grid--product-images--partial .grid__item.medium-up--three-fifths {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 100% !important;
  }
  .product-slideshow,
  .product-slideshow .flickity-viewport {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}


/* 2.2  Force single-column on desktop: info sits BELOW the full-bleed image */
@media (min-width: 769px) {
  .grid--product-images--partial {
    display: block;
  }
  .grid--product-images--partial .grid__item.medium-up--two-fifths {
    width: 100%;
    max-width: var(--layout-section-max-inline-size, 1420px);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* 2.3  Aspect ratio via padding-bottom (Flickity-safe).
        100% = 1:1 square (matches Panna PDP). Locking every PDP hero to
        SQUARE so different product photo aspect ratios all crop to the
        same container size. */
.product-slideshow .product-main-slide .image-wrap,
.product-slideshow .flickity-slider > div .image-wrap,
.product-slideshow .flickity-slider .slick-slide .image-wrap {
  padding-bottom: 100% !important;
}


/* 2.4  Make the image fill the taller 3:4 box without distortion */
.product-slideshow .product-main-slide .image-wrap .image-element,
.product-slideshow .product-main-slide .photoswipe__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 2.4b  Lock the carousel viewport to a FIXED aspect ratio so every PDP
         renders at the same hero height regardless of source image size.
         Without this, Flickity reads each slide's natural image dimensions
         and the carousel jumps between products (tall portrait vs landscape). */
@media (max-width: 768px) {
  /* Lock viewport to 100vw = SQUARE (matches Panna). Targets every
     possible slide-wrapper class so PDPs with landscape source images
     still render at the same square height as Panna. */
  .product-slideshow .flickity-viewport {
    height: 100vw !important;
    overflow: hidden !important;
  }
  .product-slideshow .product-main-slide .image-wrap,
  .product-slideshow .flickity-slider > div .image-wrap,
  .product-slideshow .flickity-slider .slick-slide .image-wrap,
  .product-slideshow .flickity-slider .product__main-slideshow-item .image-wrap {
    height: 100vw !important;
    padding-bottom: 0 !important;
  }
  .product-slideshow .image-wrap .image-element,
  .product-slideshow .image-wrap img,
  .product-slideshow .photoswipe__image,
  .product-slideshow .product-main-slide img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}


/* 2.5  Kill Impulse's "partial peek" carousel on mobile.
        Impulse shows the active slide at 75% width with the next slide
        peeking in. V1 wants ONE full-width image. Force slides to 100vw
        and remove the peek gap.
        CRITICAL: Use 100vw (viewport units), not 100%. Flickity sizes the
        slider track wider than the viewport to fit all slides, so 100%
        would make each slide as wide as the track and collapse the visible
        slide to nothing. 100vw locks to the screen width regardless. */
@media (max-width: 768px) {
  .grid--product-images--partial .flickity-slider .product-main-slide {
    width: 100vw !important;
    margin-right: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   [03] HERO DOTS — overlay on image, bottom-center (match V1 prototype)
   Active dot = pill (22px wide, 3px radius). Inactive = 6x6 circle.
   Flickity renders .flickity-page-dots > li.dot (active = .is-selected).
   -------------------------------------------------------------------------- */
.product-slideshow .flickity-page-dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 3;
  line-height: 1;
}


.product-slideshow .flickity-page-dots .dot {
  width: 6px;
  height: 6px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
  transition: width 0.25s ease, background 0.25s ease;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}


.product-slideshow .flickity-page-dots .dot.is-selected {
  width: 22px;
  height: 6px;
  border-radius: 3px;
  background: #ffffff;
}


/* 3.1  "current / total" counter — overlaid top-right of the hero image. */
.product-slideshow .klistel-slide-counter {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   [04] HERO THUMBNAIL STRIP on mobile (V1 prototype shows it at all widths)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .product__thumbs.small--hide {
    display: block !important;
  }

  .product__thumbs .product__thumbs--scroller {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0px;
    margin-top: -16px;
  }
  .product__thumbs .product__thumbs--scroller::-webkit-scrollbar {
    display: none;
  }

  .product__thumbs .product__thumb-item {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
  }

  .product__thumbs .product__thumb {
    display: block;
    width: 48px !important;
    height: 48px !important;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid transparent;
    background: transparent;
  }

  /* Force video thumb (or any thumb with non-square source image) to be
     a perfect square — image inside crops with object-fit: cover. Without
     this the video thumb stretches to ~84px tall because Impulse keeps
     the image's natural aspect ratio. */
  .product__thumbs .product__thumb .image-wrap,
  .product__thumbs .product__thumb .image-wrap__thumbnail,
  .product__thumbs .product__thumb img,
  .product__thumbs .product__thumb .image-element {
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    object-fit: cover !important;
  }
  .product__thumbs .product__thumb .product__thumb-icon {
    /* center the play-icon overlay on the now-square video thumb */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .product__thumbs .product__thumb.is-active {
    overflow: visible !important;
    padding: 3px !important;
    background: #fff !important;
    border: 1.5px solid #C58989 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .product__thumbs .product__thumb.is-active .image-wrap,
  .product__thumbs .product__thumb.is-active img {
    border-radius: 5px !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .product__thumbs .product__thumb.is-active image-element,
  .product__thumbs .product__thumb.is-active .image-wrap__thumbnail,
  .product__thumbs .product__thumb.is-active *,
  .product__thumbs .product__thumb.is-active::before,
  .product__thumbs .product__thumb.is-active::after,
  .product__thumbs .product__thumb.is-active .image-wrap::before,
  .product__thumbs .product__thumb.is-active .image-wrap::after {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .product__thumbs .product__thumb-arrow {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   [04b] HEADER ICON SPACING (mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-nav__icons .js-search-header {
    margin-right: 14px;
  }
}


/* --------------------------------------------------------------------------
   [05] FREE SHIPPING line — inline plain text (no pill)
   Sits on the price row after a small bullet dot, matching V1 reference:
        ₹4,900.00  Tax included  •  📦 Free delivery across India
   We keep the existing markup (.product-single__sales-point) but strip the
   pill chrome and lay it out as quiet inline text instead. The bullet (•)
   is rendered via a ::before pseudo on this same element so we don’t need
   any JS or theme changes.
   -------------------------------------------------------------------------- */
.product-single__sales-point,
.sales-point {
  display: inline-flex;
  align-items: center;
  gap: 3px; /* v6 — match left-of-bullet gap */
  background: transparent !important;
  color: #6B5B53 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 0 !important;
  line-height: 1.4 !important;
}

/* Small bullet dot before the free-delivery text, separating it from the
   price + "Tax included" group on the same line. */
.product-single__sales-point::before,
.sales-point::before {
  content: "\2022"; /* • */
  color: #2C2C2C;
  font-size: 12px;
  line-height: 1;
  margin-right: 0; /* v6 — gap handled by parent inline-flex */
  flex: 0 0 auto;
}

/* Truck/shipping icon — keep it small and aligned, in body text color. */
.product-single__sales-point .icon,
.sales-point .icon {
  width: 16px;
  height: 16px;
  color: #2C2C2C;
  stroke-width: 1.5px;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}


/* --------------------------------------------------------------------------
   [06] SIZE TILES
   -------------------------------------------------------------------------- */
.variant-input-wrap[data-handle="size"] {
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:4px !important;
}
.variant-input-wrap[data-handle="size"] .variant-input {
  margin:0.25px !important;
  width:100% !important;
}
.variant-input-wrap[data-handle="size"] .variant__button-label {
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  height:48px !important;
  min-height:48px !important;
  margin:0 !important;
  padding:0 6px !important;
  background:#fff;
  border:0.25px solid #E0E0E0;
  border-radius:6px;
  color:#6b6b6b;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.02em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.2;
  cursor:pointer;
  transition:border-color .18s, background .18s, color .18s, box-shadow .18s;
}
.variant-input-wrap[data-handle="size"] .variant__button-label:hover {
  border-color:#C58989;
  color:#2C2C2C;
}
.variant-input-wrap[data-handle="size"] input:checked + .variant__button-label,
.variant-input-wrap[data-handle="size"] .variant-input[aria-checked="true"] .variant__button-label {
  border:1px solid #C58989 !important;
  background:#F9EEE8;
  color:#2C2C2C;
  box-shadow:none;
}


/* --------------------------------------------------------------------------
   [07] PRODUCT INFO BLOCK — left-align + V1 typography
   -------------------------------------------------------------------------- */
.product-single__meta,
.product-single__meta .product-block,
.product-single__meta .product-single__title,
.product-single__meta .product__price,
.product-single__meta .product-single__prices,
.product-single__meta .product-single__sales-point,
.product-single__meta .product-form__item,
.product-single__meta .variant-input-wrap > legend,
.product-single__meta .product-single__description,
.product-single__meta .rte {
  text-align:left !important;
}

/* Title — Cormorant Garamond, V1 size, left */
.product-single__title {
  text-align:left !important;
  font-family:'Cormorant Garamond','Cormorant',Georgia,serif !important;
  font-size:28px !important;
  line-height:1.15 !important;
  font-weight:500 !important;
  color:#2C2C2C !important;
  margin:0 0 0 0 !important;
}

/* --------------------------------------------------------------------------
   [07a] VERTICAL RHYTHM — standardise PDP info-column gaps to exactly 8px
   Order on page: carousel → title → subtitle → price → rating → SIZE → CTA
   Exception: SIZE → ADD TO CART gets extra breathing room (20px)
   -------------------------------------------------------------------------- */
.product-single__meta {
  margin-top:8px !important;
  display:flex !important;          /* makes `order` work on children */
  flex-direction:column !important;
}
.product-single__meta .product-block {
  margin:0 0 0 0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  order: 50; /* default order — anything not explicitly ordered below */
}
.product-single__meta .product-block:last-child {
  margin-bottom:0 !important;
}

/* ============================================================
   [07c] PDP META BLOCK ORDER — deterministic visual order
   Different PDPs (product.salwar.json vs product.json) ship
   their product-blocks in different Liquid orders, which made
   price stack on top of size, or hide the size-chart link.
   We force the visual order here so EVERY PDP renders identically.
   ============================================================ */
/* TITLE — Impulse uses .product-block--header for the H1 */
.product-single__meta .product-block--header,
.product-single__meta .product-block:has(.product-single__title),
.product-single__meta .product-block:has(h1.product__title) {
  order: 10 !important;
}
/* REVIEWS / JUDGE.ME BADGE — lives inside [data-product-blocks] wrapper */
.product-single__meta [data-product-blocks]:has(.jdgm-prev-badge),
.product-single__meta .product-block:has(.jdgm-prev-badge),
.product-single__meta .klistel-meta-badge,
.product-single__meta .product-block:has(.klistel-reviews-row) {
  order: 15 !important;
}
/* PRICE */
.product-single__meta .product-block--price,
.product-single__meta .product-block:has(.product__price),
.product-single__meta .product-block:has(.product-single__price) {
  order: 20 !important;
}
/* TAILOR-FIT secondary CTA */
.product-single__meta .product-block:has(.klistel-tailor-fit),
.product-single__meta .klistel-tailor-fit {
  order: 25 !important;
}
/* ESTIMATED DELIVERY TRACKER — placed IMMEDIATELY after the tailor-made-fit
   button (JS injects it as .klistel-info-blocks which currently contains
   only the tracker, since fabric cards now come from the Liquid metafield) */
.product-single__meta .klistel-info-blocks,
.product-single__meta .product-block:has(.klistel-tracker),
.product-single__meta [data-product-blocks] .klistel-info-blocks {
  order: 27 !important;
}
/* SALES POINTS (delivery/return badges) */
.product-single__meta .product-block--sales-point {
  order: 28 !important;
}
/* WHY MOMS LOVE THIS FABRIC */
.product-single__meta .product-block:has(.kl-fabric),
.product-single__meta [data-product-blocks] > .product-block:has(.kl-fabric) {
  order: 35 !important;
}
/* SIZE selector */
.product-single__meta .product-block:has(.variant-input-wrap[data-handle="size"]),
.product-single__meta .product-block:has(.variant-wrapper),
.product-single__meta .variant-wrapper {
  order: 40 !important;
}
/* ADD TO CART row */
.product-single__meta .product-block:has(.klistel-cta-row),
.product-single__meta .product-block:has(button[name="add"]),
.product-single__meta .product-block:has(.product-form__cart-submit) {
  order: 45 !important;
}
/* TABS / ACCORDIONS at the bottom */
.product-single__meta .product-block--tab,
.product-single__meta .product-block:has(.collapsible-trigger-btn) {
  order: 60 !important;
}
/* [data-product-blocks] is itself a child of .product-single__meta — make
   sure the wrapper inherits proper order. We tag it with order:30 so any
   ungrouped product-blocks inside it stay between info-blocks and SIZE. */
.product-single__meta > [data-product-blocks] {
  order: 32 !important;
  display: contents !important; /* let inner product-blocks participate in parent flex */
}

/* Extra space between SIZE tiles and ADD TO CART so they don't stick together */
.product-single__meta .product-block:has(.variant-input-wrap[data-handle="size"]) {
  margin-top: 12px !important;
  padding-top: 0 !important;
}
/* --------------------------------------------------------------------------
   [07b] TITLE META — reviews badge + subtitle
   -------------------------------------------------------------------------- */
/* Hidden for now (V1 pre-launch). Remove this block to bring the rating
   badge back on PDP. Also hides the click-to-jump anchor and the spacing it
   reserves below the price. */
.klistel-meta-badge,
.klistel-meta-badge--below-price { display:none !important; }

.klistel-meta-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
  margin:0;
  font-family:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  line-height:1;
  white-space:nowrap;
  transition:opacity .2s ease;
}
.klistel-meta-badge:hover { opacity:0.75; }

/* Space between price row and rating badge — standardised 8px */
.klistel-meta-badge--below-price {
  margin:8px 0 0 0 !important;
}

.klistel-meta-badge .klistel-rating-num {
  font-weight:600;
  color:#2C2C2C;
  margin-right:2px;
  font-size:13px;
}
.klistel-meta-badge .klistel-stars-inline {
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.klistel-meta-badge .klistel-stars-inline svg {
  width:16px;
  height:16px;
  display:block;
  fill:#C9A96E;
}
.klistel-meta-badge .klistel-review-count {
  color:#7A3F3D;
  font-weight:500;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(122,63,61,0.35);
  text-decoration-thickness:1px;
}

/* Gray subtitle block. Allows long, multi-line descriptions (200+ chars).
   Wraps naturally; no truncation. Caps at 3 lines on desktop and 4 on
   mobile so the page doesn't push the price/CTA below the fold. */
.klistel-product-subtitle {
  text-align:left;
  font-family:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  letter-spacing:0.01em;
  color:#6B5B53;
  margin:0px 0 12px 0 !important;
  max-width:48ch;
  white-space:normal;
  overflow-wrap:break-word;
  word-wrap:break-word;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
@media (max-width: 768px) {
  .klistel-product-subtitle {
    font-size:13.5px;
    max-width:none;
    -webkit-line-clamp:4;
  }
}

/* Price row left-aligned */
.product-single__prices,
.product__price,
.product-single__price {
  text-align:left !important;
  justify-content:flex-start !important;
}

/* --------------------------------------------------------------------------
   [07c] PRICE ROW — price + "Tax included" + pill on ONE line
   FIX: gap was invalid (-12px 4px). Now 0 row-gap / 4px col-gap.
   FIX: align-items changed from baseline to center so all three items
        sit at the same vertical midpoint regardless of font size.
   -------------------------------------------------------------------------- */
.product-block--price.klistel-price-row {
  display:flex !important;
  flex-wrap:wrap;
  align-items:baseline;      /* price + tax note share the same text baseline */
  gap:0 4px;
}
/* v7.14 — Impulse theme has a higher-specificity rule that was producing
   computed margin: 16px 0 -11px on the price product-block. Override using
   a 4-class chained selector (specificity 0,4,0) plus !important so we win
   regardless of source order. The negative bottom margin was what made the
   SIZE label sit flush against the price. */
html body .product-single__meta .product-block.product-block--price.klistel-price-row {
  /* v7.17 — actual computed gaps are 8px/8px but description above has
     ~8px of optical leading inside its last line-box, making the top look
     larger. Compensate by reducing the price top margin so both gaps
     LOOK optically equal. */
  margin: 0 0 8px 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* v7.16 — Impulse renders an empty .product-block--sales-point div directly
   below the price (25px tall, no content for this product). That spacer is
   what made the gap-below-price look ~25px larger than the gap-above-price.
   Hide it completely when empty so the 8px price-bottom margin is the real
   visible gap to the SIZE row. */
html body .product-single__meta .product-block.product-block--sales-point {
  display: none !important;
}
/* Also hide any empty product-block siblings of the price (Impulse renders
   a few zero-height/empty wrappers between blocks). */
html body .product-single__meta .product-block:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Also reset any inherited block margin on the wrapping product-block in
   case theme adds spacing there too. */
html body .product-single__meta .product-block:has(> .klistel-price-row),
html body .product-single__meta .product-block:has(.klistel-price-row) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.product-block--price.klistel-price-row .product__price--compare,
.product-block--price.klistel-price-row [data-compare-price],
.product-block--price.klistel-price-row [data-product-price-wrap],
.product-block--price.klistel-price-row .product__price-savings,
.product-block--price.klistel-price-row [data-save-price] {
  display:none !important;
}

.product-block--price.klistel-price-row [data-a11y-price],
.product-block--price.klistel-price-row [data-compare-price-a11y],
.product-block--price.klistel-price-row .visually-hidden,
.product-block--price.klistel-price-row [data-unit-price-wrapper] {
  display:none !important;
}

/* The one real price */
.product-block--price.klistel-price-row .product__price.on-sale,
.product-block--price.klistel-price-row [data-product-price]:not(.product__price--compare) {
  font-family:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size:22px !important;
  font-weight:500 !important;
  color:#2C2C2C !important;
  letter-spacing:0.01em;
  line-height:1;
  margin:0 !important;
  padding:0 !important;      /* FIX: was 2px — removed extra space on price element */
}

/* "Tax included" note — matches the "Free delivery across India"
   sales-point text exactly (same family, size, weight, color, tracking,
   leading) so the whole inline row reads as one quiet meta line. */
.product-block--price.klistel-price-row .klistel-tax-note {
  font-family:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  color:#6B5B53 !important;
  letter-spacing:0.01em !important;
  line-height:1 !important;
  text-transform:none !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  white-space:nowrap;
}
.product-block--price.klistel-price-row .klistel-tax-note a { display:none; }

/* Free-shipping line on the price row — sits inline right after
   "Tax included", separated by a bullet (rendered via ::before above).
   No more right-push / top offset since it’s plain text now. */
.product-block--price.klistel-price-row .klistel-moved-shippill {
  margin: 0 !important;
  align-self: baseline;
  position: static;
  top: auto;
}

/* SIZE legend */
.variant-input-wrap > legend,
.variant-input-wrap .variant-label {
  text-align:left !important;
  display:block;
}

/* Free-delivery text stays inline-left on the price row. */
.product-single__sales-point,
.sales-point {
  align-self: baseline;
  margin-left: 0 !important;
}


/* --------------------------------------------------------------------------
   [08] SIZE CHART LINK
   -------------------------------------------------------------------------- */
.product-single__meta .variant-wrapper.klistel-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0px;
}
.product-single__meta .variant-wrapper.klistel-size-row .variant__label {
  margin: 0;
  flex: 0 0 auto;
}
.product-single__meta .variant-wrapper.klistel-size-row .size-chart__standalone {
  flex: 0 0 auto;
  margin: 0 !important;
  text-align: right;
}
.product-single__meta .variant-wrapper.klistel-size-row .variant-input-wrap {
  flex: 1 1 100%;
  margin-top: 2px;
}

.product-single__meta .size-chart__standalone {
  display: block;
  margin: 6px 0 4px 0;
  text-align: left;
}
.product-single__meta .size-chart__standalone .tool-tip-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.product-single__meta .size-chart__standalone .tool-tip-trigger__title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #C58989;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.product-single__meta .size-chart__standalone .icon-size-chart {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}


/* --------------------------------------------------------------------------
   [08b] QUANTITY — hidden per V1
   -------------------------------------------------------------------------- */
.product-single__meta .product__quantity,
.product-single__meta .product-block .product__quantity {
  display: none !important;
}

/* --------------------------------------------------------------------------
   [09] CTA ROW — ADD TO CART + wishlist heart
   -------------------------------------------------------------------------- */
.product-single__meta .klistel-cta-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  /* v7.11 — 10px top margin matches the gap between Add to Cart and the
     Want a Tailor-Made Fit button below, so the spacing above and below
     the CTA looks identical when the size row is its previous sibling. */
  margin: 10px 0 0 0;
}
/* v7.11 — when JS relocates the size row directly before the CTA row,
   guarantee exactly 10px between them regardless of inherited block margins. */
.product-single__meta .klistel-size-row {
  margin-bottom: 0 !important;
}
.product-single__meta .klistel-size-row + .klistel-cta-row {
  margin-top: 10px !important;
}

.product-single__meta .klistel-cta-row .btn.add-to-cart,
.product-single__meta .klistel-cta-row button[name="add"] {
  flex: 1 1 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  background: #C58989 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.product-single__meta .klistel-cta-row .btn.add-to-cart:hover,
.product-single__meta .klistel-cta-row button[name="add"]:hover {
  background: #B07575 !important;
}

.product-single__meta .klistel-cta-row .klistel-bag-icon {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
}
.product-single__meta .klistel-cta-row .klistel-bag-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  position: relative;
  top: -0.5px;
}

.product-single__meta .klistel-wishlist-btn {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #C58989;
  border: 1px solid #C58989;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.product-single__meta .klistel-wishlist-btn:hover {
  background: #F9EEE8;
  border-color: #B07575;
  color: #B07575;
}
.product-single__meta .klistel-wishlist-btn svg {
  display: block;
  fill: none;
  stroke: currentColor;
}
.product-single__meta .klistel-wishlist-btn.is-active {
  background: #F9EEE8;
  border-color: #C58989;
}
.product-single__meta .klistel-wishlist-btn.is-active svg {
  fill: #C58989;
  stroke: #C58989;
}

/* ============================================================
   [10] TAILOR-MADE FIT - secondary CTA + bottom sheet
   ============================================================ */
.product-single__meta .klistel-tailor-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin: 10px 0 0;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #C58989;
  border-radius: 4px;
  /* Soft pink-tinted shadow so the button feels lifted and clickable */
  box-shadow:
    0 1px 2px rgba(44, 33, 28, 0.04),
    0 4px 12px rgba(211, 144, 138, 0.18);
  color: #C58989;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition:
    border-color .18s ease,
    background   .18s ease,
    color        .18s ease,
    box-shadow   .18s ease,
    transform    .12s ease;
}
.product-single__meta .klistel-tailor-trigger:hover {
  border-color: #B07575;
  background: #FBF6F3;
  color: #B07575;
  box-shadow:
    0 2px 4px rgba(44, 33, 28, 0.05),
    0 8px 20px rgba(211, 144, 138, 0.28);
}
.product-single__meta .klistel-tailor-trigger:active {
  /* Press-down feedback */
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(44, 33, 28, 0.06),
    0 2px 6px rgba(211, 144, 138, 0.16);
}
.product-single__meta .klistel-tailor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #C58989;
}
.product-single__meta .klistel-tailor-icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
}
.product-single__meta .klistel-tailor-label {
  flex: 0 0 auto;
  text-align: center;
  line-height: 1.2;
  color: inherit;
}

/* Bottom sheet */
.klistel-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(46, 37, 32, 0.45);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.klistel-sheet-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.klistel-sheet {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  background: #FFFDFB;
  border-radius: 20px 20px 0 0;
  padding: 0 0 calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
}
.klistel-sheet-overlay.is-open .klistel-sheet {
  transform: translateY(0);
}
.klistel-sheet-handle {
  width: 36px;
  height: 4px;
  margin: 12px auto 8px;
  background: #E0E0E0;
  border-radius: 2px;
}
.klistel-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #9a9a9a;
  cursor: pointer;
  padding: 0;
}
.klistel-sheet-close:hover { color: #2C2C2C; }
.klistel-sheet-close svg { display: block; fill: none; stroke: currentColor; }

.klistel-sheet-header {
  padding: 4px 20px 16px;
}
.klistel-sheet-title {
  margin: 0 0 4px;
  font-family: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #2C2C2C;
  text-align: left;
  line-height: 1.15;
}
.klistel-sheet-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: #888888;
  letter-spacing: 0.02em;
  text-align: left;
}

/* Form */
.klistel-custom-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 20px;
}
.klistel-form-row {
  display: flex;
  gap: 12px;
}
.klistel-field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.klistel-field label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888888;
}
.klistel-field-input {
  display: flex;
  align-items: center;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  background: #ffffff;
  transition: border-color .18s ease;
}
.klistel-field-input:focus-within {
  border-color: #C58989;
}
.klistel-field-input input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 12px 12px;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #2C2C2C;
  outline: none;
  -moz-appearance: textfield;
}
.klistel-field-input input::-webkit-outer-spin-button,
.klistel-field-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.klistel-field-input input::placeholder { color: #bbbbbb; }
.klistel-field-unit {
  padding-right: 12px;
  font-size: 11px;
  color: #aaaaaa;
  letter-spacing: 0.04em;
}

.klistel-custom-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
  padding: 12px 14px;
  background: #F9EEE8;
  border-radius: 6px;
}
.klistel-custom-info svg {
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin-top: 1px;
  stroke: #C58989;
  fill: none;
}
.klistel-custom-info p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #6b6b6b;
  letter-spacing: 0.01em;
}

/* Sheet footer */
.klistel-sheet-footer {
  position: sticky;
  bottom: 0;
  margin-top: 18px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  background: #FFFDFB;
  border-top: 1px solid #f0e8e2;
}
.klistel-sheet-cta {
  width: 100%;
  padding: 16px;
  background: #C58989;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, opacity .18s ease, transform .12s ease;
}
.klistel-sheet-cta:hover:not(:disabled) { background: #B07575; }
.klistel-sheet-cta:active:not(:disabled) { transform: scale(0.99); }
.klistel-sheet-cta:disabled {
  background: #E4D8D2;
  color: #ffffff;
  cursor: not-allowed;
}

/* Toast */
.klistel-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  background: #2C2C2C;
  color: #ffffff;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.klistel-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.klistel-toast svg { display: block; stroke: #8FD19E; fill: none; }

@media (prefers-reduced-motion: reduce) {
  .klistel-sheet,
  .klistel-sheet-overlay,
  .klistel-toast { transition: none; }
}

/* ============================================================
   [11] HIDE "Talk to our designer" WhatsApp strip
   ============================================================ */
.product-single__meta a[href*="wa.me"],
.product-block > a[href*="wa.me"] {
  display: none !important;
}
.product-block:has(> a[href*="wa.me"]) {
  display: none !important;
}

body.klistel-sticky-on iframe[src*="zoko" i],
body.klistel-sticky-on [class*="zoko" i],
body.klistel-sticky-on [id*="zoko" i],
body.klistel-sticky-on [class*="whatsapp" i],
body.klistel-sticky-on [id*="whatsapp" i],
body.klistel-sticky-on a[href*="wa.me"][style*="fixed"] {
  bottom: 92px !important;
  transition: bottom .25s ease !important;
}

/* ============================================================
   [12] ACCORDIONS
   ============================================================ */
.product-block--tab .collapsibles-wrapper--border-bottom {
  border: 0 !important;
}
.product-block--tab .collapsibles-wrapper {
  border: 0;
  border-bottom: 1px solid #F0E6DC !important;
}
.product-block--tab:first-of-type .collapsibles-wrapper {
  border-top: 1px solid #F0E6DC;
}

.product-single__meta .product-block--tab:last-of-type {
  margin-bottom: 8px !important;
}

.product-block--tab .collapsible-trigger-btn--borders {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  padding: 0 4px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2C2C2C;
  line-height: 1.3;
  transition: color .2s ease;
}
.product-block--tab .collapsible-trigger-btn--borders:hover {
  color: #C58989;
}

.product-block--tab .collapsible-trigger__icon {
  flex: 0 0 auto;
  margin-left: 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
.product-block--tab .collapsible-trigger__icon .icon-chevron-down {
  width: 14px;
  height: auto;
}
.product-block--tab .collapsible-trigger__icon .icon-chevron-down path {
  stroke: #C58989 !important;
}
.product-block--tab .collapsible-trigger__icon--open {
  transform: rotate(180deg);
}

.product-block--tab .collapsible-content {
  overflow: hidden;
}

.product-block--tab .collapsible-content__inner {
  padding: 4px 4px 24px !important;
  border: 0 !important;
}
.product-block--tab .collapsible-content__inner.rte,
.product-block--tab .collapsible-content__inner.rte p {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #6B6258;
}
.product-block--tab .collapsible-content__inner.rte strong {
  color: #2C2C2C;
  font-weight: 600;
}
.product-block--tab .collapsible-content__inner.rte p {
  margin: 0 0 10px;
}
.product-block--tab .collapsible-content__inner.rte p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .product-block--tab .collapsible-trigger__icon { transition: none; }
}

/* ============================================================
   [13] INFO BLOCKS — Estimated Delivery + Why Moms Love This Fabric
   ============================================================ */
.klistel-info-blocks {
  margin: 0;
  padding: 0;
}

.klistel-tracker {
  margin: 16px 0 8px;
  padding: 18px 18px 20px;
  background: #F4E7E5;
  border: 1px solid #E0E0E0;
  border-radius: 16px;
}
.klistel-tracker__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2C2C2C;
  margin-bottom: 18px;
}
.klistel-tracker__title svg {
  width: 15px;
  height: 15px;
  color: #2C2C2C;
  flex: 0 0 auto;
}
.klistel-tracker__steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
.klistel-tracker__steps::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 32px;
  right: 32px;
  height: 1px;
  background: #E0E0E0;
  z-index: 0;
}
.klistel-tracker__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 1;
  flex: 1;
}
.klistel-tracker__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFDFB;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B5ABA0;
}
.klistel-tracker__dot svg {
  width: 13px;
  height: 13px;
}
.klistel-tracker__dot.is-done {
  background: #C58989;
  border-color: #C58989;
  color: #FFFFFF;
}
.klistel-tracker__label {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #2C2C2C;
  letter-spacing: 0.03em;
  text-align: center;
}
.klistel-tracker__date {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #9A8F84;
  text-align: center;
}

.klistel-fabric {
  margin: 28px 0 24px;
}
.klistel-fabric__title {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #2C2C2C;
  margin: 0 0 18px;
  text-align: left;
}
.klistel-fabric__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.klistel-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #F4E7E5;            /* v6 — warmer dusty-pink per request */
  border: 0 !important;            /* drop the old hairline border */
  border-radius: 14px;
  box-shadow: none;                /* flat — matches bottom-nav look */
}
.klistel-feature__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;             /* white circle on pink card */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B07575;                  /* brand hover pink for icon stroke */
}
.klistel-feature__icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.klistel-feature__text h4 {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2C2C2C;
  margin: 0 0 3px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: none !important;  /* Sentence Case, not ALL CAPS */
}
.klistel-feature__text p {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: #6B5B53;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   [14] "YOU MAY ALSO LIKE"
   ============================================================ */
product-recommendations .index-section {
  margin-top: 8px;
  margin-bottom: 24px;
}
product-recommendations .section-header {
  text-align: left;
  margin-bottom: 16px;
}
product-recommendations .section-header__title {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #2C2C2C;
  text-align: left;
  margin: 0;
}

/* ============================================================
   [15] "MADE FOR MOMENTS" + "WORDS FROM OUR MOTHERS"
   ============================================================ */
.klistel-social {
  /* let children control spacing */
}

.klistel-moments {
  margin: 24px 16px 0;
  padding: 28px 20px;
  background: #F4E7E5;
  border-radius: 16px;
  text-align: center;
}
.klistel-moments__title {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: #2C2C2C;
  margin: 0 0 12px;
}
.klistel-moments__sub {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: #6B6258;
  max-width: 320px;
  margin: 0 auto 16px;
}
.klistel-occasion-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.klistel-occasion-tag {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #2C2C2C;
  background: #FFFFFF;
  border: 1px solid #EFE2DA;
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

.klistel-reviews {
  padding: 32px 16px 8px;
}
.klistel-reviews__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}
.klistel-reviews__title {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: #2C2C2C;
  text-align: left;
  margin: 0;
}
.klistel-reviews__count {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #9A8F84;
  white-space: nowrap;
  flex: none;
}
.klistel-reviews__scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin: 0;
  padding: 2px 16px 6px 0;
  scrollbar-width: none;
}
.klistel-reviews__scroll::-webkit-scrollbar {
  display: none;
}

.klistel-review {
  flex: 0 0 auto;
  min-width: 270px;
  max-width: 290px;
  padding: 20px;
  /* v7.7 — "Words From Our Mothers" card background updated from
     #FFFDFB to brand pink #F4E7E5 (matches "Moments That Matter"). */
  background: #F4E7E5;
  border: 1px solid #E8C9C5; /* tonal border so card edge stays visible on white page bg */
  border-radius: 16px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.klistel-review__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}
.klistel-star {
  width: 13px;
  height: 13px;
  fill: #E8A038;
  flex: none;
}
.klistel-star.is-muted {
  fill: #E8DDD3;
}
.klistel-review__text {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #6B6258;
  margin: 0 0 16px;
  flex: 1 1 auto;
}
.klistel-review__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.klistel-review__author {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2C2C2C;
}
.klistel-review__city {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: #9A8F84;
  margin-top: 2px;
}
.klistel-review__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #2E7D52;
  background: #EAF6EE;
  border-radius: 20px;
  padding: 4px 9px;
  white-space: nowrap;
  flex: none;
}
.klistel-review__badge svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* ============================================================
   [15b] COMPLETE THE LOOK
   ============================================================ */
.klistel-complete {
  /* Match the Impulse theme's .page-width gutter so the section's
     header AND cards line up with the product title/price above.
     Mobile = 17px (theme default), desktop = 22px from 750px up. */
  --kl-cl-gutter: 17px;
  margin: -24px 0 4px;
}
@media (min-width: 750px) {
  .klistel-complete { --kl-cl-gutter: 22px; }
}
.klistel-cl-head {
  padding: 0 var(--kl-cl-gutter);
  margin-bottom: 14px;
}
.klistel-cl-title {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: #2C2C2C;
  margin: 0 0 4px;
}
.klistel-cl-sub {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: #6B6258;
  margin: 0;
}
.klistel-cl-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  /* Match the header's gutter so the first card lines up with the
     section title's left edge. The right gutter keeps the last card
     from sticking to the edge while scroll-snap reveals more on swipe. */
  padding: 2px var(--kl-cl-gutter) 6px var(--kl-cl-gutter);
  scrollbar-width: none;
  scroll-padding-left: var(--kl-cl-gutter);
}
.klistel-cl-scroll::-webkit-scrollbar {
  display: none;
}
.klistel-cl-card {
  flex: 0 0 auto;
  width: 150px;
  background: #FFFDFB;
  border: 1px solid #EFE6DF;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.klistel-cl-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F4ECE6;
}
.klistel-cl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.klistel-cl-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B07575;
  background: rgba(255,255,255,0.92);
  border-radius: 20px;
  padding: 3px 9px;
}
.klistel-cl-body {
  padding: 10px 11px 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.klistel-cl-name {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #2C2C2C;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
  margin: 0 0 8px;
}
.klistel-cl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.klistel-cl-price {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2C2C2C;
}
.klistel-cl-add {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background: #C58989;
  border: 0;
  border-radius: 3px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, opacity .18s ease;
}
.klistel-cl-add:hover {
  background: #B07575;
}
.klistel-cl-add:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ============================================================
   [16] STICKY BOTTOM ADD-TO-CART BAR
   ============================================================ */
.klistel-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 246, 241, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid #E0E0E0;
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.klistel-sticky-bar.is-visible {
  transform: translateY(0);
}

.klistel-sticky-info {
  flex: 1 1 auto;
  min-width: 0;
}
.klistel-sticky-price {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #2C2C2C;
  line-height: 1.1;
}
/* v7.18 — align the ₹ SVG mask with the digits in the sticky bottom-bar
   price. The global rule has vertical-align: -0.08em which drops the
   rupee below the baseline here because the sticky price uses
   line-height: 1.1 instead of 1. Bump the glyph up so it visually
   centres against the digits. Slightly enlarge the height so the
   rupee cap-height matches the digit cap-height. */
.klistel-sticky-price .klistel-rupee {
  /* v7.19 — v7.18 went too high. Remove the translateY and the height
     bump; just neutralise the global vertical-align so the rupee sits
     flush with the digit baseline. */
  vertical-align: 0 !important;
  height: 0.85em !important;
  width: 0.55em !important;
  transform: translateY(1px);
}
.klistel-sticky-size {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #9A8F84;
  margin-top: 8px;
}

.klistel-sticky-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.klistel-sticky-like {
  width: 48px;
  height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFDFB;
  border: 1px solid #C58989;
  border-radius: 4px;
  color: #C58989;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, color .2s ease;
}
.klistel-sticky-like svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  transition: fill .2s ease;
}
.klistel-sticky-like.liked svg {
  fill: #C58989;
  stroke: #C58989;
}
.klistel-sticky-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: #C58989;
  color: #FFFDFB;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease;
}
.klistel-sticky-btn:hover {
  background: #B07575;
}
.klistel-sticky-btn:active {
  transform: scale(.97);
  background: #B07575;
}

/* ============================================================
   [17] FOOTER
   ============================================================ */
.site-footer.klistel-footer {
  background: #F9EEE8 !important;
  border-top: 1px solid #EFE0D6 !important;
  color: #2C2C2C;
  padding-top: 44px;
  padding-bottom: 40px;
}
.site-footer.klistel-footer .page-width {
  max-width: 760px;
}

.klistel-footer-brand {
  text-align: center;
  padding-top: 16px;
  padding-bottom: 48px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(196, 123, 106, 0.18);
}
.klistel-footer-logo-link {
  display: inline-block;
  line-height: 0;
  margin: 0 0 10px;
}
.klistel-footer-logo-img {
  display: block;
  width: auto;
  /* v7.5 — reduce footer logo to 50% (15px from 30px per user spec) */
  height: 15px !important;
  max-width: 120px !important;
  object-fit: contain;
}
.klistel-footer-tagline {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  color: #6B6258;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}
.klistel-footer-desc {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6B6258;
  max-width: 320px;
  margin: 0 auto;
}

.site-footer.klistel-footer .footer__title {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #2C2C2C !important;
}
.site-footer.klistel-footer .site-footer__linklist a,
.site-footer.klistel-footer .footer__collapsible p,
.site-footer.klistel-footer .footer__collapsible a {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 300 !important;
  font-size: 12.5px !important;
  color: #6B6258 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;     /* match SHOP — no forced uppercase */
  font-style: normal !important;
  line-height: 1 !important;        /* same vertical rhythm as SHOP column */
  transition: color .2s ease;
}

/* CUSTOMER CARE — force Title Case rendering to match SHOP column.
   CSS capitalize only affects the first letter of each word, but combined
   with lowercase on the inner span/text-node via `text-transform` cascade,
   uppercase source text stays as-is. The reliable fix is a tiny JS pass
   (see note in handoff). The rules below ensure font/size/weight match
   even before JS runs. */
.site-footer.klistel-footer .kl-col-care .site-footer__linklist a {
  text-transform: none !important;
}
.site-footer.klistel-footer .site-footer__linklist a:hover,
.site-footer.klistel-footer .footer__collapsible a:hover {
  color: #C58989 !important;
}
.site-footer.klistel-footer .site-footer__linklist {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.site-footer.klistel-footer .site-footer__linklist li {
  list-style: none !important;
}
.site-footer.klistel-footer .site-footer__linklist a.klistel-contact-link {
  display: flex !important;
  align-items: center;
  gap: 9px;
  line-height: 1.45;
}
.site-footer.klistel-footer .klistel-contact-svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: block;
  margin-top: 1px;
}
.site-footer.klistel-footer .klistel-contact-link:hover .klistel-contact-svg g,
.site-footer.klistel-footer .klistel-contact-link:hover .klistel-contact-svg path {
  stroke: #B07575;
}
.site-footer.klistel-footer .site-footer__linklist a img.ftl_log {
  display: none !important;
}

.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-newsletter {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 0 16px 0 !important;
  margin-top: 12px;
  
}
.site-footer.klistel-footer .klistel-inner-circle {
  display: block !important;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C58989;
  margin: 12px 0 10px;
}
.site-footer.klistel-footer .kl-col-newsletter .footer__title {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif !important;
  font-size: 24px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  color: #2C2C2C !important;
  margin: 0 0 8px !important;
}
.site-footer.klistel-footer .kl-col-newsletter p {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 300 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: #6B6258 !important;
  margin: 0 0 16px !important;
}
.site-footer.klistel-footer .footer__newsletter {
  display: flex !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 460px;
  position: relative;
}
/* Kill any theme-injected separator/decoration around the newsletter row */
.site-footer.klistel-footer .footer__newsletter::before,
.site-footer.klistel-footer .footer__newsletter::after,
.site-footer.klistel-footer .kl-col-newsletter::before,
.site-footer.klistel-footer .kl-col-newsletter::after,
.site-footer.klistel-footer .kl-col-newsletter hr,
.site-footer.klistel-footer .footer__newsletter + hr,
.site-footer.klistel-footer .kl-col-newsletter .footer__newsletter-wrapper::after {
  display: none !important;
  border: 0 !important;
  content: none !important;
}
.site-footer.klistel-footer .footer__newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px !important;
  border: 1px solid rgba(44, 44, 44, 0.18) !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #2C2C2C !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}
.site-footer.klistel-footer .footer__newsletter-input::placeholder {
  color: #4A4A4A !important;
  opacity: 1 !important;
}
.site-footer.klistel-footer .footer__newsletter-input:focus {
  border-color: #C58989 !important;
  outline: none !important;
}
.site-footer.klistel-footer .footer__newsletter-btn {
  flex: 0 0 auto;
  height: 46px !important;
  background: #C58989 !important;
  color: #FFFDFB !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 26px !important;
  margin: 0 !important;
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}
.site-footer.klistel-footer .footer__newsletter-btn:hover {
  background: #B07575 !important;
}
.site-footer.klistel-footer .footer__newsletter-btn .icon-email { display: none !important; }
.site-footer.klistel-footer .footer__newsletter-btn-label { display: inline !important; }
.site-footer.klistel-footer .kl-col-newsletter .footer__social {
  display: none !important;
}

.site-footer.klistel-footer .payment-icons,
.site-footer.klistel-footer .footer__payment,
.site-footer.klistel-footer .footer__payment-icons,
.site-footer.klistel-footer ul.payment-icons,
.site-footer.klistel-footer .site-footer__payment {
  display: none !important;
}
.site-footer.klistel-footer img[src*="paypal" i],
.site-footer.klistel-footer .icon--payment {
  display: none !important;
}

.site-footer.klistel-footer .collapsible-trigger__icon {
  display: none !important;
}
.site-footer.klistel-footer .collapsible-trigger.klistel-no-collapse {
  pointer-events: none;
  cursor: default;
}
.site-footer.klistel-footer .footer__title.collapsible-trigger {
  display: none !important;
}
.site-footer.klistel-footer .footer__title.small--hide {
  display: block !important;
}
.site-footer.klistel-footer .collapsible-content,
.site-footer.klistel-footer .collapsible-content--small,
.site-footer.klistel-footer .collapsible-content--all {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}
.site-footer.klistel-footer .collapsible-content__inner {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.site-footer.klistel-footer .klistel-footer-open {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.site-footer.klistel-footer .grid.klistel-footer-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 0;
  margin: 0;
}
.site-footer.klistel-footer .grid.klistel-footer-grid > .grid__item {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Care + Shop row: 16px top/bottom + divider line below */
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-care,
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-shop {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative;
}
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-care::after,
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-shop::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}
/* Single divider line under the Care+Shop row, drawn on the grid itself */
.site-footer.klistel-footer .grid.klistel-footer-grid {
  position: relative;
}
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-contact {
  position: relative;
}
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(196, 123, 106, 0.18);
}
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-care { grid-column: 1; grid-row: 1; }
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-shop { grid-column: 2; grid-row: 1; }
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-contact { grid-column: 1 / -1; grid-row: 2; }
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-newsletter { grid-column: 1 / -1; grid-row: 3; }
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-contact {
  border-top: none;
  padding-top: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(196, 123, 106, 0.18) !important;
  margin-bottom: 0 !important;
}
/* Tighten the contact list so the 12px gap below address is real */
.site-footer.klistel-footer .kl-col-contact .site-footer__linklist {
  margin: 0 !important;
  padding: 0 !important;
}
.site-footer.klistel-footer .kl-col-contact .site-footer__linklist li {
  margin: 0 !important;
  padding: 0 !important;
}
.site-footer.klistel-footer .kl-col-contact .site-footer__linklist li:last-child a,
.site-footer.klistel-footer .kl-col-contact .site-footer__linklist li:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* v7.5 — FORCE address to a single line under Contact Us.
   Disable wrapping on the address row; if the text is long enough to overflow
   the column, the column expands rather than wrapping to a second line. */
.site-footer.klistel-footer .kl-col-contact .klistel-contact-address,
.site-footer.klistel-footer .kl-col-contact a.klistel-contact-link[href*="maps"],
.site-footer.klistel-footer .kl-col-contact a.klistel-contact-link[href*="goo.gl"] {
  white-space: nowrap !important;
}
.site-footer.klistel-footer .kl-col-contact .klistel-contact-address .klistel-contact-text,
.site-footer.klistel-footer .kl-col-contact a.klistel-contact-link .klistel-contact-text {
  white-space: nowrap !important;
  overflow: visible !important;
}

/* v7.5 — Customer Care + Shop link spacing reduced to 6px (was theme default ~10–12px) */
.site-footer.klistel-footer .kl-col-care .site-footer__linklist li,
.site-footer.klistel-footer .kl-col-shop .site-footer__linklist li {
  margin: 0 !important;
  padding: 3px 0 !important; /* 3px top + 3px bottom = 6px between siblings */
}
.site-footer.klistel-footer .kl-col-care .site-footer__linklist li:first-child,
.site-footer.klistel-footer .kl-col-shop .site-footer__linklist li:first-child {
  padding-top: 0 !important;
}
.site-footer.klistel-footer .kl-col-care .site-footer__linklist li:last-child,
.site-footer.klistel-footer .kl-col-shop .site-footer__linklist li:last-child {
  padding-bottom: 0 !important;
}
.site-footer.klistel-footer .kl-col-care .site-footer__linklist a,
.site-footer.klistel-footer .kl-col-shop .site-footer__linklist a {
  display: block;
  padding: 3px 0 !important; /* makes the 6px gap robust if list has flex/gap rules elsewhere */
  line-height: 1.4;
}

.klistel-footer-payments {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 18px;
  padding-top: 24px;
  border-top: 1px solid rgba(196, 123, 106, 0.18);
}
.klistel-footer-payments-label {
  width: 100%;
  text-align: center;
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: #9A8F84;
  margin-bottom: 12px;
}
.klistel-pay-chip {
  background: #FFFDFB;
  border: 1px solid rgba(196, 123, 106, 0.16);
  border-radius: 6px;
  height: 30px;
  min-width: 46px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.klistel-pay-svg {
  height: 18px;
  width: auto;
  max-width: 48px;
  display: block;
}

.site-footer.klistel-footer .footer__small-text {
  text-align: center;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #9A8F84;
  margin: 2px 0;
}
.site-footer.klistel-footer .footer__small-text a {
  color: #9A8F84;
}
.klistel-footer-madein {
  text-align: center;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #9A8F84;
  margin: 4px 0 0;
}

/* ============================================================
   [Z] FINAL PDP SPACING OVERRIDES — single source of truth
   Order: title → subtitle → price → SIZE label → SIZE pills → ATC
   Loaded LAST so it wins the cascade.
   ============================================================ */

/* 1. Kill all default product-block gaps so we control them explicitly */
.product-single__meta .product-block {
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Title → Subtitle (4px) */
.product-single__meta .product-single__title {
  margin: 0 0 4px 0 !important;
}

/* 3. Subtitle → Price (12px below subtitle) */
.product-single__meta .klistel-product-subtitle {
  margin: 0 0 12px 0 !important;
}

/* 4. Price block — visually equal gap above and below.
      Diagnosis (live preview):
        - priceBlock height 23.1px, priceGlyph height 29px
        - glyph extends 4px ABOVE and 1.9px BELOW the block's box
        - block margin-top:10px gives visual gap above = 10 - 4 = 6px
        - block margin-bottom:10px + 16px extra space from next size
          block's internal leading => visual gap below = 26 - 1.9 = 24px
      Fix: bump margin-top to compensate the glyph's upward overflow,
            and use negative margin-bottom to absorb the size block's
            internal top leading. Target: ~14px visible on each side. */
.product-single__meta .product-block:has(.product__price),
.product-single__meta .product-single__prices {
  margin: 16px 0 -11px 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.product-single__meta .product-block:has(.product__price) .klistel-price-row,
.product-single__meta .product-block:has(.product__price) .klistel-price-row * {
  line-height: 1 !important;
}
.product-single__meta .product__price {
  margin: 0 !important;
  padding: 0 !important;
}
/* Kill leading from hidden / savings spans inside the price block so
   the block's box-height equals the visible price glyph height. */
.product-single__meta .product-block:has(.product__price) .visually-hidden,
.product-single__meta .product-block:has(.product__price) .product__price-savings,
.product-single__meta .product-block:has(.product__price) [data-product-price-wrap] {
  line-height: 0 !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. Price → SIZE label — gap now lives on the price block (rule 4),
      so size block top margin = 0 to avoid double spacing. */
.product-single__meta .product-block:has(.variant-input-wrap[data-handle="size"]) {
  margin-top: 0 !important;
  padding: 0 !important;
}

/* 6. SIZE label row — tight to pills, no phantom leading above */
.product-single__meta .variant-wrapper.klistel-size-row {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  line-height: 1 !important;
}
.product-single__meta .variant-wrapper.klistel-size-row .variant__label,
.product-single__meta .variant-wrapper.klistel-size-row .variant__label * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.product-single__meta .variant-wrapper.klistel-size-row .size-chart__standalone {
  margin: 0 !important;
  padding: 0 !important;
}

/* 7. SIZE label → pills (8px) */
.product-single__meta .variant-wrapper.klistel-size-row .variant-input-wrap,
.variant-input-wrap[data-handle="size"] {
  margin-top: 8px !important;
  padding: 0 !important;
}

/* 8. SIZE pills → ADD TO CART (12px breathing room) */
.product-single__meta .product-block:has(.klistel-cta-row),
.product-single__meta .product-block:has(.product-form__cart-submit),
.product-single__meta .product-block:has(button[name="add"]) {
  margin-top: 12px !important;
  padding-top: 0 !important;
}

/* 9. Make sure pills container has natural height (no negative margin into ATC) */
.variant-input-wrap[data-handle="size"] {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   [Z3] CTA ROW — ATC + heart alignment (clean)
   Targets ONLY .klistel-cta-row (created by custom.js).
   ============================================================ */

.klistel-cta-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

.klistel-cta-row .btn.add-to-cart,
.klistel-cta-row button[name="add"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.klistel-cta-row .klistel-wishlist-btn {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
}

/* ============================================================
   [Z9] STICKY BAR — clickable size text + bottom sheet
   ============================================================ */

/* Clickable underline on the sticky-bar size text */
.klistel-sticky-size--clickable {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  color: #C58989;
}
.klistel-sticky-size--clickable:hover,
.klistel-sticky-size--clickable:focus-visible {
  color: #B07575;
  text-decoration-color: #B07575;
  outline: none;
}

/* Bottom sheet container */
.klistel-size-sheet {
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
}
.klistel-size-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
}

.klistel-size-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 33, 28, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.klistel-size-sheet.is-open .klistel-size-sheet__backdrop {
  opacity: 1;
}

.klistel-size-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 12px 20px 24px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.94, 0.36, 1);
  box-shadow: 0 -8px 24px rgba(44, 33, 28, 0.18);
  max-height: 85vh;
  overflow-y: auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.klistel-size-sheet.is-open .klistel-size-sheet__panel {
  transform: translateY(0);
}

.klistel-size-sheet__handle {
  width: 40px;
  height: 4px;
  background: #E0D8D2;
  border-radius: 2px;
  margin: 0 auto 12px;
}

.klistel-size-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.klistel-size-sheet__title {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: #2C2C2C;
  letter-spacing: 0.02em;
}
.klistel-size-sheet__close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #6B5B53;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.klistel-size-sheet__close:hover { color: #2C2C2C; }

.klistel-size-sheet__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.klistel-size-sheet__pill {
  appearance: none;
  background: #ffffff;
  border: 1px solid #E0D8D2;
  border-radius: 4px;
  padding: 14px 8px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #2C2C2C;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  text-align: center;
  min-height: 48px;
}
.klistel-size-sheet__pill:hover:not(.is-disabled):not(.is-active) {
  border-color: #C58989;
  background: #FBF6F3;
}
.klistel-size-sheet__pill.is-active {
  background: #FBE9E3;
  border-color: #C58989;
  color: #2C2C2C;
}
.klistel-size-sheet__pill.is-disabled {
  background: #F8F5F3;
  color: #B8AFA8;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: #C9BFB7;
}

@media (max-width: 480px) {
  .klistel-size-sheet__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================
   [Z10] CART DRAWER — Light theme override + Complete-the-Look upsell
   Override Impulse's dark drawer with a warm off-white palette.
   Then style the CTL section to blend with it.
   Colors:
     bg          #F4EFEB  (warm off-white — matches page bg)
     text strong #2C2C2C
     text muted  #6E6259
     divider     #E6DED7
     accent      #C58989  (brand pink)
     accent dark #B07575
   ============================================================ */

/* ---- Drawer container -------------------------------------- */
.drawer,
.drawer--right,
.drawer__contents,
.drawer__fixed-header,
.drawer__inner,
.drawer__scrollable,
.drawer__footer,
.drawer__top-section,
#CartDrawer {
  background-color: #F4EFEB !important;
  color: #2C2C2C !important;
}

/* Drawer headings, close button, links */
.drawer__header,
.drawer__title,
.drawer__close,
.drawer .drawer__close-button {
  color: #2C2C2C !important;
}
.drawer__close svg,
.drawer__close-button svg {
  fill: #2C2C2C !important;
  stroke: #2C2C2C !important;
  color: #2C2C2C !important;
}

/* ---- Global drawer text + links — ensure dark on light ----- */
.drawer,
.drawer p,
.drawer span,
.drawer h1,
.drawer h2,
.drawer h3,
.drawer h4,
.drawer h5,
.drawer h6,
.drawer label,
.drawer dd,
.drawer dt,
#CartDrawer,
#CartDrawer p,
#CartDrawer span,
#CartDrawer h1,
#CartDrawer h2,
#CartDrawer h3,
#CartDrawer h4,
#CartDrawer label {
  color: #2C2C2C !important;
}
.drawer a,
#CartDrawer a {
  color: #2C2C2C !important;
}
.drawer a:hover,
#CartDrawer a:hover {
  color: #B07575 !important;
}
/* But keep our CTL accent links and checkout button in their own colors */
.drawer a.klistel-cart-ctl__more,
#CartDrawer a.klistel-cart-ctl__more,
.drawer .cart__checkout,
.drawer .btn--secondary,
.drawer .btn,
.ajaxcart__footer .btn {
  color: inherit;
}

/* ---- Cart line items --------------------------------------- */
.drawer .cart__item,
.drawer .ajaxcart__product,
.drawer__inner .cart__row {
  background: transparent !important;
  color: #2C2C2C !important;
  border-color: #E6DED7 !important;
}

.drawer .cart__item + .cart__item,
.drawer .ajaxcart__product + .ajaxcart__product {
  border-top: 1px solid #E6DED7 !important;
}
.drawer .ajaxcart__product-name,
.drawer .cart__item-title,
.drawer .ajaxcart__product-meta,
.drawer .cart__meta,
.drawer .cart__price,
.drawer .cart__item-price,
.drawer .ajaxcart__price,
.drawer .ajaxcart__subtotal,
.drawer .cart__subtotal-title,
.drawer .cart__subtotal-price {
  color: #2C2C2C !important;
}
.drawer .ajaxcart__product-meta strong,
.drawer .cart__meta strong {
  color: #2C2C2C !important;
}

/* Qty stepper — make all variants of Impulse's qty controls dark-on-light */
.drawer .js-qty,
.drawer .ajaxcart__qty,
.drawer .js-qty__wrapper,
.drawer .product-quantity-box,
.drawer .cart__qty,
#CartDrawer .js-qty,
#CartDrawer .product-quantity-box {
  background: #FFFFFF !important;
  border: 1px solid #E6DED7 !important;
  color: #2C2C2C !important;
  border-radius: 999px !important;
}
.drawer .js-qty__num,
.drawer .ajaxcart__qty-num,
.drawer .js-qty input,
.drawer .js-qty__input,
.drawer .cart__qty-input,
.drawer input[name="updates[]"],
.drawer input[type="number"],
#CartDrawer .js-qty input,
#CartDrawer input[name="updates[]"] {
  background: transparent !important;
  color: #2C2C2C !important;
  border: 0 !important;
  -webkit-text-fill-color: #2C2C2C !important;
  opacity: 1 !important;
}
.drawer .js-qty__adjust,
.drawer .ajaxcart__qty-adjust,
.drawer .js-qty button,
.drawer .cart__qty-adjust,
#CartDrawer .js-qty__adjust,
#CartDrawer .js-qty button {
  color: #2C2C2C !important;
  background: transparent !important;
  border: 0 !important;
  fill: #2C2C2C !important;
  stroke: #2C2C2C !important;
  opacity: 1 !important;
}
.drawer .js-qty__adjust svg,
.drawer .ajaxcart__qty-adjust svg,
.drawer .js-qty button svg,
#CartDrawer .js-qty svg {
  fill: #2C2C2C !important;
  stroke: #2C2C2C !important;
  color: #2C2C2C !important;
}
.drawer .js-qty__adjust:hover,
.drawer .ajaxcart__qty-adjust:hover,
.drawer .js-qty button:hover {
  color: #B07575 !important;
  fill: #B07575 !important;
  stroke: #B07575 !important;
}

/* Remove (X / trash) icon on cart line */
.drawer .ajaxcart__product-remove,
.drawer .cart__remove,
.drawer .cart__qty-label--remove {
  color: #8A7C72 !important;
}
.drawer .ajaxcart__product-remove:hover,
.drawer .cart__remove:hover {
  color: #B07575 !important;
}

/* ---- Footer -------------------------------------------------- */
.drawer__footer,
.cart__bottom,
.ajaxcart__footer {
  background: #F4EFEB !important;
  border-top: 1px solid #E6DED7 !important;
  color: #2C2C2C !important;
}
.drawer .cart__shipping,
.drawer .cart__terms,
.ajaxcart__note,
.drawer .cart__note {
  color: #6E6259 !important;
}
/* Checkout CTA — keep brand pink, ensure light text */
.drawer .cart__checkout,
.drawer .btn--secondary,
.drawer .btn,
.ajaxcart__footer .btn {
  background: #C58989 !important;
  color: #FFFFFF !important;
  border: 1px solid #C58989 !important;
}
.drawer .cart__checkout:hover,
.drawer .btn--secondary:hover,
.drawer .btn:hover,
.ajaxcart__footer .btn:hover {
  background: #B07575 !important;
  border-color: #B07575 !important;
  color: #FFFFFF !important;
}

/* ---- Complete the Look section ----------------------------- */
.klistel-cart-ctl {
  margin: 16px -16px 4px;
  padding: 16px 16px 4px;
  border-top: 1px solid #E6DED7;
  background: transparent;
  color: #2C2C2C;
  font-family: inherit;
}
.klistel-cart-ctl__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
}
.klistel-cart-ctl__head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.klistel-cart-ctl__heading {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 500;
  color: #2C2C2C;
  letter-spacing: 0.2px;
  margin: 0;
  white-space: nowrap;
}
.klistel-cart-ctl__ornament {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #C58989;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.klistel-cart-ctl__ornament-line {
  flex: 1 1 auto;
  height: 1px;
  background: #C58989;
  opacity: 0.65;
  min-width: 8px;
  max-width: 36px;
}
.klistel-cart-ctl__ornament svg {
  flex: 0 0 10px;
}
.klistel-cart-ctl__more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: #B07575;
  text-decoration: none;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.klistel-cart-ctl__more:hover {
  color: #B36A58;
  text-decoration: underline;
}
.klistel-cart-ctl__more svg {
  margin-top: 1px;
}
.klistel-cart-ctl__tagline {
  font-family: inherit;
  font-size: 12px;
  font-style: italic;
  color: #6E6259;
  margin: 0 0 12px;
  letter-spacing: 0.2px;
}
.klistel-cart-ctl__list {
  display: flex;
  flex-direction: column;
}
.klistel-cart-ctl__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #E6DED7;
  background: transparent;
}
.klistel-cart-ctl__item:first-child {
  border-top: none;
  padding-top: 4px;
}
.klistel-cart-ctl__item:last-child {
  padding-bottom: 4px;
}
.klistel-cart-ctl__img {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  background: #ECE3DC;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}
.klistel-cart-ctl__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.klistel-cart-ctl__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
a.klistel-cart-ctl__title,
.drawer a.klistel-cart-ctl__title,
#CartDrawer a.klistel-cart-ctl__title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.3;
  color: #2C2C2C !important;
  text-decoration: none !important;
  font-weight: 500;
}
a.klistel-cart-ctl__title:hover,
.drawer a.klistel-cart-ctl__title:hover,
#CartDrawer a.klistel-cart-ctl__title:hover {
  color: #B07575 !important;
}
.klistel-cart-ctl__price,
.drawer .klistel-cart-ctl__price {
  font-size: 12.5px;
  font-weight: 600;
  color: #2C2C2C !important;
  letter-spacing: 0.2px;
}
.klistel-cart-ctl__heading,
.drawer .klistel-cart-ctl__heading,
#CartDrawer .klistel-cart-ctl__heading {
  color: #2C2C2C !important;
}
.klistel-cart-ctl__tagline,
.drawer .klistel-cart-ctl__tagline {
  color: #6E6259 !important;
}
a.klistel-cart-ctl__more,
.drawer a.klistel-cart-ctl__more,
#CartDrawer a.klistel-cart-ctl__more {
  color: #B07575 !important;
  text-decoration: none !important;
}
a.klistel-cart-ctl__more:hover,
.drawer a.klistel-cart-ctl__more:hover {
  color: #B36A58 !important;
  text-decoration: underline !important;
}
.klistel-cart-ctl__add {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 7px 14px;
  background: transparent;
  color: #C58989;
  border: 1.4px solid #C58989;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  min-height: 30px;
  min-width: 82px;
}
.klistel-cart-ctl__add:hover {
  background: #C58989;
  color: #FFFFFF;
  border-color: #C58989;
}
.klistel-cart-ctl__add:active {
  background: #B07575;
  border-color: #B07575;
  color: #FFFFFF;
}
.klistel-cart-ctl__add[disabled],
.klistel-cart-ctl__add.is-loading {
  cursor: wait;
  opacity: 0.8;
}
.klistel-cart-ctl__add svg {
  flex: 0 0 12px;
}
.klistel-cart-ctl__spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(211, 144, 138, 0.35);
  border-top-color: #C58989;
  border-radius: 50%;
  animation: klistelCartCtlSpin 0.7s linear infinite;
}
@keyframes klistelCartCtlSpin {
  to { transform: rotate(360deg); }
}

/* Very narrow drawers */
@media (max-width: 360px) {
  .klistel-cart-ctl__heading { font-size: 18px; }
  .klistel-cart-ctl__ornament-line { max-width: 20px; }
  .klistel-cart-ctl__add { padding: 6px 12px; min-width: 74px; font-size: 11px; }
  .klistel-cart-ctl__img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px; }
}


/* ============================================================
   [Z11] Hide WhatsApp / Zoko chat widget while cart drawer is open
   Impulse adds `js-drawer-open` to <html> when the cart drawer opens.
   The widget overlaps the subtotal/checkout footer, so we hide it
   for the duration the drawer is visible. Targets Zoko's hashed
   container plus generic WhatsApp/chat signals — non-destructive
   (widget reappears as soon as the drawer closes).
   ============================================================ */
html.js-drawer-open [id^="zoko-"],
html.js-drawer-open .reset23947hdfjue8934,
html.js-drawer-open iframe[src*="zoko" i],
html.js-drawer-open [class*="zoko" i],
html.js-drawer-open [class*="whatsapp" i],
html.js-drawer-open [id*="whatsapp" i],
html.js-drawer-open [class*="wa-widget" i],
html.js-drawer-open [class*="chat-widget" i],
html.js-drawer-open a[href*="wa.me"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   [18] FOOTER REVISION — match target screenshot (2026-06-20)
   Scope: only the visible "brand → grid → contact → newsletter"
   section. Keep logo, payments, copyright, Powered-by-Shopify,
   and "Made in India" lines INTACT.
   Changes:
     a. Ornament divider (— ✦ —) between tagline and description
     b. Reflow grid: Care|Shop row, then Contact full-width,
        then Newsletter full-width (with thin divider above each)
     c. Subtle botanical leaf shadow on the right edge
   Loaded LAST so it wins the cascade.
   ============================================================ */

/* ── a. Ornament divider after the italic tagline ─────────── */
.site-footer.klistel-footer .klistel-footer-brand {
  position: relative;
  /* let leaf overlay show; remove the bottom border so the
     section flows visually like the target */
  border-bottom: none !important;
  padding-bottom: 28px !important;
}
.site-footer.klistel-footer .klistel-footer-tagline {
  margin: 0 0 14px !important;
}
.site-footer.klistel-footer .klistel-footer-tagline::after {
  content: "";
  display: block;
  width: 110px;
  height: 14px;
  margin: 14px auto 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14' fill='none'><line x1='0' y1='7' x2='44' y2='7' stroke='%23C9A89E' stroke-width='0.8'/><line x1='66' y1='7' x2='110' y2='7' stroke='%23C9A89E' stroke-width='0.8'/><g transform='translate(55 7) rotate(45)'><rect x='-3.2' y='-3.2' width='6.4' height='6.4' fill='%23B07575'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110px 14px;
}
.site-footer.klistel-footer .klistel-footer-desc {
  max-width: 380px !important;
  margin: 0 auto !important;
}

/* ── b. Grid reflow ───────────────────────────────────────────
   Target layout (top → bottom):
     Row 1: [ Customer Care ] [ Shop ]            ← 2 cols
     Row 2: [        Contact Us         ]          ← full width
     Row 3: [   The Inner Circle / form ]          ← full width
   The DOM order in our footer is:
     1. kl-col-care     2. kl-col-shop
     3. kl-col-newsletter (3rd in DOM!)
     4. kl-col-contact
   So we MUST use grid-template-areas to swap rows 2 & 3.        */
.site-footer.klistel-footer .grid.klistel-footer-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "care     shop"
    "contact  contact"
    "news     news" !important;
  column-gap: 32px !important;
  row-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-care     { grid-area: care;    }
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-shop     { grid-area: shop;    }
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-contact  { grid-area: contact; }
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-newsletter { grid-area: news;  }

/* neutralize Impulse's float/inline-block on grid items */
.site-footer.klistel-footer .grid.klistel-footer-grid > .grid__item {
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Row 1 (Care + Shop) — top padding to match target */
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-care,
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-shop {
  padding: 8px 0 28px !important;
}

/* Row 2 (Contact) — thin divider above, full width */
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-contact {
  padding: 26px 0 26px !important;
  border-top: 1px solid rgba(196, 123, 106, 0.20) !important;
}

/* Row 3 (Newsletter) — thin divider above, full width */
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-newsletter {
  padding: 26px 0 8px !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(196, 123, 106, 0.20) !important;
}

/* Newsletter inner padding wrapper — kill extra top space */
.site-footer.klistel-footer .kl-col-newsletter .footer__item-padding {
  padding: 0 !important;
}

/* Section headings (CUSTOMER CARE / SHOP / CONTACT US) — looser
   tracking + slightly muted color per target */
.site-footer.klistel-footer .grid.klistel-footer-grid > .grid__item > .footer__title,
.site-footer.klistel-footer .grid.klistel-footer-grid > .grid__item .footer__collapsible-trigger {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  color: #B07575 !important;
  margin: 0 0 18px !important;
}

/* Body link / contact text — slightly larger tracking like target */
.site-footer.klistel-footer .grid.klistel-footer-grid .site-footer__linklist a,
.site-footer.klistel-footer .grid.klistel-footer-grid .footer__collapsible a,
.site-footer.klistel-footer .grid.klistel-footer-grid .footer__collapsible p {
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  color: #6B6258 !important;
  line-height: 1.85 !important;
}

/* Contact rows — preserve icon+text alignment from earlier rule */
.site-footer.klistel-footer .kl-col-contact .site-footer__linklist a.klistel-contact-link {
  line-height: 1.7 !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}

/* ── c. Botanical leaf shadow on right edge ──────────────────
   Single soft SVG placed via ::after on the footer container.
   Pointer-events disabled; sits behind all content.            */
.site-footer.klistel-footer {
  position: relative;
}
.site-footer.klistel-footer > .page-width {
  position: relative;
  z-index: 2;
}
.site-footer.klistel-footer::after { display: none !important; }

/* Keep Care + Shop side-by-side at ALL widths (only collapse on
   very narrow phones < 380px where 2 cols become unreadable).    */
@media (max-width: 380px) {
  .site-footer.klistel-footer .grid.klistel-footer-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "care"
      "shop"
      "contact"
      "news" !important;
  }
  .site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-shop {
    padding-top: 0 !important;
    border-top: none !important;
  }
}
@media (max-width: 640px) {
  .site-footer.klistel-footer::after { display: none !important; }
}

/* ============================================================
   [19] HIDE COD PAYMENT CHIP IN FOOTER (2026-06-20)
   ============================================================ */
.site-footer.klistel-footer .klistel-footer-payments .klistel-pay-chip[title="Cash on Delivery" i] {
  display: none !important;
}

/* ============================================================
   [20] JUNE 21, 2026 — 6-ITEM UPDATE PACK
   ------------------------------------------------------------
   a. ₹ glyph in Cormorant serif (paired with JS wrap)
   b. "Want a Tailor-Made Fit?" CTA → bold + darker, visible
   c. Footer spacing → 8px inner / 16px between components
   d. Footer address row → multi-line layout for new address
   e. Wishlist Hero container styling (keeps Klistel heart look)
   ============================================================ */

/* ─ (a) ₹ glyph wrapped by JS in <span class="klistel-rupee"> ─
   PIXEL-MEASURED FIX v4 (2026-06-21):
     Measured from the user's screenshot at parent font-size 17px:
       At 1.7em → ₹ rendered 24px tall (top row 4, bot row 27)
       Digit '4' rendered 15px tall (top row 15, bot row 29)
     Need to bring ₹ height from 24 → 15px and shift it down to
     match the digit's vertical span.
       new font-size = (15 / 24) * 1.7em = 1.0625em → use 1.05em
     Remove the upward vertical-align shift; use a slight downward
     nudge so ₹ baseline sits on the digit baseline.                */
/* v7.4 — OLD Cormorant-serif rule REMOVED. The ₹ character is now rendered
   as an inline SVG icon defined in block [00a] at the top of this file. */

/* ─ (b) Tailor-Made Fit CTA — SECONDARY style, mirrors heart button
   White bg, 1px brand-pink border, brand-pink text, 4px radius, 52px tall.
   Matches button.klistel-wishlist-btn next to Add-to-Cart. */
.product-single__meta .klistel-tailor-trigger {
  background: #FFFFFF !important;
  border: 1px solid #C58989 !important;
  border-radius: 4px !important;
  color: #C58989 !important;
  height: 52px !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}
.product-single__meta .klistel-tailor-trigger .klistel-tailor-label {
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #C58989 !important;
}
.product-single__meta .klistel-tailor-trigger .klistel-tailor-icon svg {
  stroke: #C58989 !important;
}
.product-single__meta .klistel-tailor-trigger:hover {
  background: #FBF6F3 !important;
  border-color: #B07575 !important;
  color: #B07575 !important;
}
.product-single__meta .klistel-tailor-trigger:hover .klistel-tailor-label {
  color: #B07575 !important;
}
.product-single__meta .klistel-tailor-trigger:hover .klistel-tailor-icon svg {
  stroke: #B07575 !important;
}

/* ─ (c) Footer spacing tighten — 8px inner / 16px between ───
   Overrides earlier [18] FOOTER REVISION values.            */
.site-footer.klistel-footer {
  padding: 24px 0 16px !important;
}
.site-footer.klistel-footer .klistel-footer-brand {
  padding: 8px 0 16px !important;
}
.site-footer.klistel-footer .grid.klistel-footer-grid {
  column-gap: 16px !important;
  row-gap: 16px !important;
}
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-care,
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-shop {
  padding: 8px 0 !important;
}
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-contact {
  padding: 16px 0 8px !important;
}
.site-footer.klistel-footer .grid.klistel-footer-grid > .kl-col-newsletter {
  padding: 16px 0 8px !important;
}
.site-footer.klistel-footer .footer__title {
  margin-bottom: 8px !important;
}
.site-footer.klistel-footer .site-footer__linklist li {
  margin-bottom: 8px !important;
}
.site-footer.klistel-footer .site-footer__linklist li:last-child {
  margin-bottom: 0 !important;
}
.site-footer.klistel-footer .klistel-footer-payments {
  margin: 16px 0 8px !important;
  padding: 16px 0 0 !important;
}
.site-footer.klistel-footer .klistel-footer-madein {
  margin: 8px 0 0 !important;
}
.site-footer.klistel-footer .footer__small-text {
  margin: 8px 0 !important;
}

/* ─ (d) Address row — full-width multi-line, target ≤3 lines ─ */
.site-footer.klistel-footer .kl-col-contact .site-footer__linklist a.klistel-contact-link {
  align-items: flex-start !important;
  line-height: 1.55 !important;
  padding: 6px 0 !important;
  /* Force the link to take the full column width so the address text can
     expand all the way to the right edge (was constrained by inline-block). */
  width: 100% !important;
  display: flex !important;
}
.site-footer.klistel-footer .kl-col-contact .klistel-contact-svg {
  flex: 0 0 auto;
  margin-top: 3px !important;
}
.site-footer.klistel-footer .kl-col-contact .klistel-address-text {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* ─ (e) Wishlist Hero container blends with Klistel hearts ── */
/* When WLH injects its own UI into our hero button containers,
   neutralise its default chrome so Klistel's heart-only look wins. */
.klistel-wishlist-btn .wishlisthero-product-page-button-container,
.klistel-sticky-like   .wishlisthero-product-page-button-container {
  display: contents !important;
}
.klistel-wishlist-btn.wlh-active,
.klistel-sticky-like.wlh-active {
  /* Filled-heart state when item is already wishlisted */
  color: #C58989 !important;
}
.klistel-wishlist-btn.wlh-active svg,
.klistel-sticky-like.wlh-active svg {
  fill: #C58989 !important;
  stroke: #C58989 !important;
}

/* ============================================================
   [21] JUNE 21, 2026 — FOLLOW-UP FIXES
   ------------------------------------------------------------
   Merge "© 2026 KLISTEL" + "Powered by Shopify" into ONE line.
   Both are <p class="footer__small-text"> siblings inside the
   footer's page-width container. CSS-only fix is unreliable on
   block <p> elements; JS will combine them. This rule hides
   the duplicate placeholder once JS marks it.
   ============================================================ */
.site-footer.klistel-footer .footer__small-text[data-klistel-merged="hidden"] {
  display: none !important;
}
/* Inline separator inside the merged paragraph */
.site-footer.klistel-footer .footer__small-text .klistel-sep {
  display: inline-block;
  margin: 0 8px;
  opacity: 0.55;
}
.site-footer.klistel-footer .footer__small-text[data-klistel-merged="merged"] {
  margin: 12px 0 !important;
  text-align: center;
}

/* ============================================================
   [22] JUNE 21, 2026 — MOBILE MENU + FOOTER COPYRIGHT
   ------------------------------------------------------------
   (a) Mobile nav drawer: theme defaulted to dark bg with dark
       text. Force white background with dark readable text.
   (b) CSS-only merge of "© 2026 KLISTEL" + "Powered by Shopify"
       on one row. Works even if JS doesn't merge them.
   ============================================================ */

/* ─ (a) Mobile menu drawer — readable white theme ─────────── */
#NavDrawer,
#NavDrawer.drawer,
#NavDrawer .drawer__inner,
#NavDrawer .drawer__contents,
#NavDrawer .drawer__scrollable,
#NavDrawer .drawer__header,
#NavDrawer .drawer__fixed-header,
#NavDrawer .drawer__footer {
  background-color: #FFFFFF !important;
  color: #2A2A2A !important;
}

/* Drawer close button → dark icon on white */
#NavDrawer .drawer__close-button,
#NavDrawer .drawer__close-button svg,
#NavDrawer .drawer__close-button .icon {
  color: #2A2A2A !important;
  fill: #2A2A2A !important;
  stroke: #2A2A2A !important;
  background-color: transparent !important;
}

/* All nav links inside the mobile drawer */
#NavDrawer .mobile-nav,
#NavDrawer .mobile-nav__item,
#NavDrawer .mobile-nav__link,
#NavDrawer .mobile-nav__link--top-level,
#NavDrawer .mobile-nav__link--button,
#NavDrawer .mobile-nav__faux-link,
#NavDrawer .mobile-nav__child-item a,
#NavDrawer .mobile-nav__has-sublist button,
#NavDrawer .mobile-nav__has-sublist > * {
  color: #2A2A2A !important;
  background-color: transparent !important;
}

/* Hover/active state — brand pink */
#NavDrawer .mobile-nav__link:hover,
#NavDrawer .mobile-nav__link:focus,
#NavDrawer .mobile-nav__link--top-level:hover,
#NavDrawer .mobile-nav__link[data-active="true"] {
  color: #C58989 !important;
}

/* Dropdown caret icons */
#NavDrawer .mobile-nav__has-sublist svg,
#NavDrawer .mobile-nav__has-sublist .icon {
  fill: #2A2A2A !important;
  stroke: #2A2A2A !important;
  color: #2A2A2A !important;
}

/* Item dividers — soft warm-grey lines */
#NavDrawer .mobile-nav__item {
  border-bottom: 1px solid #ECE6E1 !important;
}
#NavDrawer .mobile-nav__item:last-child {
  border-bottom: 0 !important;
}

/* Sublist (collapsible) background also white */
#NavDrawer .mobile-nav__sublist,
#NavDrawer .collapsible-content,
#NavDrawer .collapsible-content--all {
  background-color: #FAFAFA !important;
  color: #2A2A2A !important;
}
#NavDrawer .mobile-nav__sublist a {
  color: #4A4A4A !important;
}

/* Social row at the bottom */
#NavDrawer .mobile-nav__social,
#NavDrawer .mobile-nav__social a,
#NavDrawer .mobile-nav__social svg {
  color: #2A2A2A !important;
  fill: #2A2A2A !important;
  stroke: #2A2A2A !important;
}

/* Search bar inside the drawer if present */
#NavDrawer input[type="search"],
#NavDrawer input[type="text"] {
  background-color: #F4EFEB !important;
  color: #2A2A2A !important;
  border-color: #ECE6E1 !important;
}

/* ─ (b) Footer "© 2026 KLISTEL" + "Powered by Shopify" merge ─
   CSS-only fallback: hide the second .footer__small-text
   (the one containing "Powered by Shopify") and append it via
   a pseudo-element onto the first one. */
.site-footer.klistel-footer .footer__small-text + .footer__small-text {
  display: none !important;
}
.site-footer.klistel-footer .footer__small-text:first-of-type::after {
  content: " · Powered by Shopify";
  opacity: 0.7;
}
/* If JS already merged them (data-klistel-merged="merged"), do
   not double-append the pseudo. */
.site-footer.klistel-footer .footer__small-text[data-klistel-merged="merged"]::after {
  content: none !important;
}
.site-footer.klistel-footer .footer__small-text[data-klistel-merged="hidden"] {
  display: none !important;
}

/* ============================================================
   [23] HIDE STICKY BOTTOM BAR WHEN CART DRAWER IS OPEN
   ------------------------------------------------------------
   Impulse adds `js-drawer-open` to <html> while ANY drawer is
   open (cart on the right, nav on the left). The cart drawer
   itself also gets `.drawer--is-open` on #CartDrawer. We use
   the `:has()` selector to narrow this to ONLY the cart drawer
   state, so the sticky bar stays visible if only the nav menu
   is open.
   `:has()` is supported on iOS/Chrome/Safari 2023+. Fallback:
   on older engines the sticky bar simply stays put under the
   nav drawer, which is acceptable.
   ============================================================ */
html:has(#CartDrawer.drawer--is-open) .klistel-sticky-bar,
html:has(#CartDrawer.drawer--is-open) .klistel-sticky-bar.is-visible {
  /* Slide off-screen + fade out, in line with the bar's own
     transition (transform + opacity, see [16]). */
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ============================================================
   [24] SIZE SELECTOR NORMALIZATION (v7)
   Some Klistel products are configured with Impulse's
   dropdown-style SIZE variant; JS (normalizeSizeSelector) converts
   those into a custom .klistel-size-tiles button group so every PDP
   renders identical tiles. These rules mirror the look of the
   native .variant-input-wrap[data-handle="size"] tiles defined
   earlier in this file (see lines ~378–420).
   ============================================================ */
.klistel-size-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

.klistel-size-tiles {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px !important;
  width: 100%;
}

.klistel-size-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 6px;
  background: #fff;
  border: 0.25px solid #E0E0E0;
  border-radius: 6px;
  color: #6b6b6b;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
}

.klistel-size-tile:hover:not(.is-disabled) {
  border-color: #C58989;
  color: #2C2C2C;
}

.klistel-size-tile.is-selected {
  border: 1px solid #C58989 !important;
  background: #F9EEE8;
  color: #2C2C2C;
  box-shadow: none;
}

.klistel-size-tile.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* When a wrapper has been normalized, make sure the original dropdown
   chrome (Impulse's .variant-input style + arrow) stays hidden even if
   the theme tries to re-show it on variant change.
   IMPORTANT: do NOT use `:not(:has(...))` here — if JS hasn't injected
   tiles yet (or the PDP uses different markup), that rule hides the
   entire size UI with nothing to replace it. We rely on the JS adding
   `.klistel-size-select-hidden` to the native <select> instead. */
.variant-wrapper[data-klistel-normalized="1"] > select.klistel-size-select-hidden {
  display: none !important;
}

/* ============================================================
   [25] HEADER FULL-WIDTH NORMALIZATION (v7)
   Some PDPs apply extra horizontal padding to the header's
   .page-width container (visible as a wide inset on either side
   of the hamburger / logo / search-cart icons). Force the header
   to be edge-to-edge across every PDP so the navigation stays
   identical.

   - Outer wrappers: drop all horizontal padding/margin so the
     header bar has zero gutter.
   - .header-layout: stretch to 100% width and keep its own
     internal padding (16px on mobile / 22px on desktop) so the
     icons don't actually touch the screen edges.
   ============================================================ */
/* [25b] HEADER FULL-WIDTH NORMALIZATION v2 
   Live theme nests three 90%-max-width wrappers around header.
   Compound: 390 -> 284px on mobile. Force all to 100%. */
html body .shopify-section-group-header-group,
html body .header-sticky-wrapper,
html body #StickyHeaderWrap,
html body .header-wrapper,
html body #HeaderWrapper,
html body .site-header,
html body #SiteHeader {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

html body .site-header > .page-width,
html body #SiteHeader > .page-width {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .site-header .header-layout,
html body .site-header .header-layout--center {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

@media (min-width: 750px) {
  html body .site-header .header-layout,
  html body .site-header .header-layout--center {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* Defensive: drop horizontal padding/margin from the body wrapper that
   the inset PDPs use to clip everything to 90% width. */
.main-content,
.page-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}


/* ============================================================
   [26] UNIVERSAL PDP CAROUSEL SQUARE LOCK
   Forces every PDP main image carousel to a 1:1 square on mobile
   regardless of which Impulse template variant is rendering it
   (.product-slideshow / .product__main-slideshow / .product__photos
   / .product-single__photos / .product__media-wrapper). Belt and
   suspenders — high specificity selectors with html body prefix
   that beat any inline theme rule, plus every slide-wrapper class
   variant known to ship with Impulse 9.x.
   ============================================================ */
@media (max-width: 768px) {
  /* 26.1  Lock every Flickity viewport that sits inside a product
     gallery to 100vw square. Catches all template variants. */
  html body .product-template .flickity-viewport,
  html body .template-product .flickity-viewport,
  html body .product-slideshow .flickity-viewport,
  html body .product__main-slideshow .flickity-viewport,
  html body .product__photos .flickity-viewport,
  html body .product-single__photos .flickity-viewport,
  html body .product-single__media-wrapper .flickity-viewport {
    width: 100vw !important;
    height: 100vw !important;
    max-height: 100vw !important;
    overflow: hidden !important;
  }

  /* 26.2  Every possible slide wrapper -> square, no padding-bottom
     trick (Impulse writes inline padding-bottom from natural image
     ratio; we zero it out and lock height to 100vw). */
  html body .product-template .flickity-slider > *,
  html body .template-product .flickity-slider > *,
  html body .product-slideshow .product-main-slide,
  html body .product-slideshow .product-main-slide .image-wrap,
  html body .product__main-slideshow-item,
  html body .product__main-slideshow-item .image-wrap,
  html body .product-single__photo,
  html body .product-single__photo .image-wrap,
  html body .product__photo,
  html body .product__photo .image-wrap,
  html body .product__media,
  html body .product__media .image-wrap {
    width: 100vw !important;
    height: 100vw !important;
    max-height: 100vw !important;
    padding-bottom: 0 !important;
  }

  /* 26.3  Image elements inside any of the above wrappers fill the
     square and cover-crop — prevents source images of any aspect
     ratio (landscape, portrait, square) from changing the box size. */
  html body .product-template .flickity-slider img,
  html body .product-template .flickity-slider .image-element,
  html body .product-template .flickity-slider .photoswipe__image,
  html body .template-product .flickity-slider img,
  html body .template-product .flickity-slider .image-element,
  html body .template-product .flickity-slider .photoswipe__image,
  html body .product-slideshow img,
  html body .product-slideshow .image-element,
  html body .product-slideshow .photoswipe__image,
  html body .product__main-slideshow img,
  html body .product__photos img,
  html body .product-single__photos img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* 26.4  Universal thumbnail strip lock — every thumb (incl. video
     thumb) is a perfect 48px square on mobile. */
  html body .product__thumbs .product__thumb-item,
  html body .product-single__thumbnails .product-single__thumbnail {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
  }
  html body .product__thumbs .product__thumb,
  html body .product-single__thumbnails .product-single__thumbnail a,
  html body .product-single__thumbnails .product-single__thumbnail-link {
    width: 48px !important;
    height: 48px !important;
    display: block !important;
    overflow: hidden !important;
  }
  html body .product__thumbs .product__thumb .image-wrap,
  html body .product__thumbs .product__thumb .image-wrap__thumbnail,
  html body .product__thumbs .product__thumb img,
  html body .product__thumbs .product__thumb .image-element,
  html body .product-single__thumbnails img {
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    object-fit: cover !important;
  }
  html body .product__thumbs .product__thumb .product__thumb-icon {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ============================================================
   [27] WHY MOMS LOVE THIS FABRIC — Shopify Admin metafield restyle
   Targets the clean .kl-fabric markup we paste into the metafield.
   Each .kl-fabric__row is its own pink rounded card with icon left
   and serif title outside the cards. Matches V1 design.
   ============================================================ */
/* v7.6 — V1 visual restyle.
   - Title is a serif Cormorant heading ABOVE the cards (Title Case, no border)
   - 4 separate rounded pink cards with generous padding
   - Circle icon badge on the left (40px, white fill, thin brand-pink border)
   - Card title in serif, body in sans — matches the target screenshot. */
.kl-fabric {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 28px 0 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: "DM Sans", "Helvetica Neue", sans-serif !important;
}

/* Section title (Cormorant serif, Title Case, no border, sits above cards). */
.kl-fabric::before {
  content: "Why Moms Love This Fabric";
  display: block;
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #2C2C2C;
  margin: 0 0 14px 0;
  text-transform: none; /* explicitly NOT all caps */
}

/* Hide any inline <h3>/<h2> shipped inside the metafield. */
.kl-fabric > h3,
.kl-fabric > h2,
.kl-fabric > h4 {
  display: none !important;
}

.kl-fabric__row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: #F4E7E5 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* CIRCLE ICON BADGE — white fill, brand-pink stroke, brand-pink icon. */
.kl-fabric__icon {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 1px solid #E8C9C5 !important;
  border-radius: 50% !important;
  color: #C58989 !important;
  font-size: 0 !important; /* hide any emoji fallback text */
  line-height: 1 !important;
  filter: none !important;
  margin-top: 2px !important; /* aligns badge with first text line */
}
.kl-fabric__icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: #C58989 !important;
  fill: none !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
/* v7.8 — Impulse theme has a base rule svg{fill:#000}. Override on every
   child element of our SVG (path, circle, line, polygon, polyline, rect)
   so theme cannot repaint our line icons solid black. The two small dots
   in the smile icon keep their inline fill via the inline attribute, which
   wins because of specificity:0,1,0 from the [fill] attribute selector. */
.kl-fabric__icon svg path,
.kl-fabric__icon svg circle,
.kl-fabric__icon svg line,
.kl-fabric__icon svg polygon,
.kl-fabric__icon svg polyline,
.kl-fabric__icon svg rect {
  fill: none !important;
  stroke: #C58989 !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}
/* keep the two inline-filled pupils of the smile icon */
.kl-fabric__icon svg [fill="#C58989"] {
  fill: #C58989 !important;
  stroke: none !important;
}

.kl-fabric__text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
}

/* Card title — serif, Title Case, slightly larger */
.kl-fabric__text strong {
  display: block !important;
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  color: #2C2C2C !important;
  margin: 0 0 4px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.kl-fabric__text span {
  display: block !important;
  font-family: "DM Sans", "Helvetica Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #6B6258 !important;
  letter-spacing: 0 !important;
}

/* If Shopify wraps the metafield in product-block, neutralize its
   default tab styling so our card layout stays clean. */
.product-single__meta .product-block:has(.kl-fabric),
[data-product-blocks] .product-block:has(.kl-fabric) {
  border: 0 !important;
  padding: 0 !important;
  margin: 24px 0 !important;
  background: transparent !important;
}

/* Desktop: cap the card width so it doesn't stretch across the meta col */
@media (min-width: 750px) {
  .kl-fabric {
    max-width: 460px;
  }
  .kl-fabric::before {
    font-size: 28px;
  }
}


/* 26.5  Desktop — same square lock so the design stays consistent. */
@media (min-width: 769px) {
  html body .product-template .product-slideshow .flickity-viewport,
  html body .product-template .product__main-slideshow .flickity-viewport,
  html body .template-product .product-slideshow .flickity-viewport {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: none !important;
  }
}