/** Shopify CDN: Minification failed

Line 329:0 Unexpected "}"

**/
/*
  custom-khaadi-style.css
  ========================
  Khaadi-inspired refinements for Dawn:
  — Ultra-slim announcement bar
  — Transparent / overlay header on slideshow
  — Bolder, spaced-out, uppercase nav menu
  — Tighter, editorial section padding
  — Clean, minimal aesthetic throughout
*/

/* ─────────────────────────────────────────
   ANNOUNCEMENT BAR  — slim, elegant strip
   ───────────────────────────────────────── */
.announcement-bar-section .utility-bar {
  min-height: unset;
}

.announcement-bar__message {
  min-height: unset !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 !important;
  line-height: 1.4;
}

/* ─────────────────────────────────────────
   HEADER  — refined layout
   ───────────────────────────────────────── */

/* Remove heavy bottom border by default; replaced by subtler line */
.header-wrapper--border-bottom {
  border-bottom-color: rgba(var(--color-foreground), 0.06) !important;
}

/* ─────────────────────────────────────────
   OVERLAY HEADER  — floats above slideshow
   ───────────────────────────────────────── */

/* When overlay is enabled via section setting, the header section renders
   position:absolute via the {%- style -%} block in header.liquid.
   We add the next sibling slideshow negative margin so it fills underneath. */
.section-header--overlay ~ .shopify-section:first-of-type,
.shopify-section-group-header-group ~ .shopify-section:first-of-type {
  /* Slideshow sits behind header when overlay mode is on */
}

/* ─────────────────────────────────────────
   NAVIGATION MENU  — Khaadi aesthetic
   ───────────────────────────────────────── */
.header__menu-item {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(var(--color-foreground), 0.85);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
  opacity: 1;
}

.header__menu-item span {
  font-size: inherit;
}

/* Submenu refinement */
.header__submenu .header__menu-item {
  letter-spacing: 0.06em;
  font-weight: 400;
  text-transform: none;
}

/* ─────────────────────────────────────────
   SECTION PADDING  — tighter editorial feel
   ───────────────────────────────────────── */

/* Featured collection, multicolumn, rich-text etc use .section-*-padding class.
   We keep section-level control via liquid settings, so no overrides needed here.
   The following rules refine inner padding instead. */

/* Product cards — less wasted space */
.card__information {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

/* Headings inside sections — tighter */
.section__header {
  margin-bottom: 1.6rem !important;
}

/* ─────────────────────────────────────────
   TYPOGRAPHY  — refined scale
   ───────────────────────────────────────── */
.h1, .h2, .h3 {
  letter-spacing: 0.04em;
}

/* Price */
.price {
  letter-spacing: 0.03em;
}

/* ─────────────────────────────────────────
   BUTTONS  — Khaadi style: minimal, outlined
   ───────────────────────────────────────── */
.button--primary,
.button {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ─────────────────────────────────────────
   FOOTER  — clean & airy
   ───────────────────────────────────────── */
.footer__heading {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 1.1rem;
}

/* ─────────────────────────────────────────
   SLIDESHOW  — full-bleed, no gap at top
   when overlay header is active
   ───────────────────────────────────────── */
.shopify-section-group-header-group {
  /* Allows absolute positioned overlay header to sit above slideshow */
  position: relative;
  z-index: 5;
}

/* Slideshow section immediately after header group gets no top gap */
.shopify-section-group-header-group + .shopify-section {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────
   UTILITY BAR  — no min-height clamp
   ───────────────────────────────────────── */
.utility-bar {
  height: auto !important;
}

/* ─────────────────────────────────────────
   PAGE WIDTH  — slightly tighter gutters
   for editorial feel on desktop
   ───────────────────────────────────────── */
@media screen and (min-width: 1200px) {
  .page-width {
    max-width: 1320px;
  }
}

/* ─────────────────────────────────────────
   MOBILE REFINEMENTS
   ───────────────────────────────────────── */
@media screen and (max-width: 749px) {
  .header__menu-item {
    font-size: 1.3rem;
  }

  .announcement-bar__message {
    font-size: 1.1rem !important;
  }
}
/* ── Collection page spacing fixes ── */
.collection-hero {
  padding: 0 !important;
}
.collection-hero__inner {
  padding: 0 !important;
}
.collection-hero__title {
  margin: 0 !important;
  padding: 12px 0 !important;
}
.collection-hero--with-image .collection-hero__text-wrapper {
  padding: 0 !important;
}
.collection-hero--with-image .collection-hero__inner {
  padding-bottom: 0 !important;
}
.collection__title.title-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
.collection-hero__title,
.collection-hero__title.h1,
h1.collection-hero__title {
  margin: 0 !important;
  padding: 10px 0 !important;
}
/* ===== COLLECTION PAGE PADDING FIX ===== */
.collection-hero__title,
.collection-hero__title.h1,
h1.collection-hero__title {
  margin: 0 !important;
  padding: 10px 0 !important;
}

.collection-hero {
  padding: 0 !important;
}

.collection-hero__inner {
  padding: 0 !important;
}

.collection-hero--with-image .collection-hero__text-wrapper {
  padding: 0 !important;
}

.collection-hero--with-image .collection-hero__inner {
  padding-bottom: 0 !important;
}

.collection__title.title-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== MOBILE MENU DRAWER: keep above homepage slideshow ===== */
/* Root cause: the slideshow's slide-transition animation (transform/opacity)
   creates its own micro stacking context. When the header isn't in
   "overlay" mode it has no explicit z-index of its own, so during a slide
   change that animating layer can momentarily paint above the menu drawer,
   causing the flicker. Fixing this requires the header's wrapping group to
   always hold a high, explicit stacking context -- not just the drawer
   itself, since a child's z-index can never beat a sibling section if the
   parent group has no context of its own. Scoped to mobile/tablet only so
   desktop layout and the existing overlay_header behavior are untouched. */
@media screen and (max-width: 989px) {
  .shopify-section-group-header-group {
    position: relative;
    isolation: isolate;
    z-index: 9999 !important;
  }
  .section-header {
    z-index: 9999 !important;
  }
  .menu-drawer-container,
  #menu-drawer,
  .menu-drawer {
    z-index: 9999 !important;
  }
  .menu-drawer-container[open] {
    z-index: 10000 !important;
  }
}

/* ─────────────────────────────────────────
   COLLECTION GRID — darker product name
   (opacity only, no font-weight change)
   ───────────────────────────────────────── */
.card__heading,
.card__heading a {
  color: rgba(var(--color-foreground), 0.95);
}

/* ─────────────────────────────────────────
   SITE BACKGROUND — force white everywhere,
   while keeping the header exactly the color
   it already is (header + mobile menu drawer
   are explicitly restored to the current
   scheme-1 color below)
   ───────────────────────────────────────── */
:root,
.color-scheme-1 {
  --color-background: 255, 255, 255;
  --gradient-background: #ffffff;
}

.header-wrapper.color-scheme-1,
.menu-drawer.color-scheme-1 {
  --color-background: 249, 239, 231;
  --gradient-background: #f9efe7;
}

/* ─────────────────────────────────────────
   MOBILE SIZE PICKER — shrink padding/font
   so every size (XS through 2XL) fits on one
   line without needing to scroll. Horizontal
   scroll is kept only as a silent fallback
   for products with unusually many options.
   ───────────────────────────────────────── */
@media screen and (max-width: 749px) {
  .product-form__input--pill,
  .product-form__input--swatch {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: 0.4rem;
    margin-left: -0.8rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product-form__input--pill::-webkit-scrollbar,
  .product-form__input--swatch::-webkit-scrollbar {
    display: none;
  }

  .product-form__input--pill input[type='radio'] + label {
  flex-shrink: 0;
  padding: 0.6rem 0.9rem !important;
  margin: 0.5rem 0 0.2rem 0 !important;
  font-size: 1.5rem !important;
  min-width: 2.6rem !important;
}

  .product-form__input--swatch .swatch-input__input + .swatch-input__label {
    flex-shrink: 0;
  }
}

}

/* ─────────────────────────────────────────
   PRODUCT IMAGE MODAL (MOBILE) — turn the
   single static zoomed image into a
   swipeable, fullscreen, one-image-at-a-time
   gallery. Desktop behavior (hover zoom) is
   completely untouched by this block.
   ───────────────────────────────────────── */
@media screen and (max-width: 749px) {
  .product-media-modal__content {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    max-height: 100vh;
    height: 100vh;
    padding: 0 !important;
    scrollbar-width: none;
  }

  .product-media-modal__content::-webkit-scrollbar {
    display: none;
  }

  .product-media-modal__content > * {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 100vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    scroll-snap-align: center;
    margin: 0 !important;
  }

  .product-media-modal__content img,
  .product-media-modal__content .media {
    max-height: 100vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}

/* ─────────────────────────────────────────
   ADD TO CART / BUY IT NOW — black & white
   to match the white background
   ───────────────────────────────────────── */
.product-form__buttons .product-form__submit.button {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

.product-form__buttons button.shopify-payment-button__button--unbranded {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 0.1rem solid #000000 !important;
}

/* ─────────────────────────────────────────
   SIZE CHART POPUP — bolder close icon
   ───────────────────────────────────────── */
.product-popup-modal__toggle {
  color: rgba(var(--color-foreground), 0.9);
}

.product-popup-modal__toggle .icon path {
  stroke: currentColor;
  stroke-width: 1.3;
}