/** Shopify CDN: Minification failed

Line 129:60 Expected "}" to go with "{"

**/
/* ===========================
   MODEST HER – Responsive Add-On (non-destructive)
   Paste at END of your main CSS file
   =========================== */

/* 1) Fluid type/space scale (safe variables) */
:root{
  --mh-step--2: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --mh-step--1: clamp(0.86rem, 0.80rem + 0.35vw, 0.96rem);
  --mh-step-0:  clamp(1.00rem, 0.95rem + 0.50vw, 1.10rem);
  --mh-step-1:  clamp(1.14rem, 1.05rem + 0.80vw, 1.34rem);
  --mh-step-2:  clamp(1.30rem, 1.15rem + 1.20vw, 1.66rem);

  --mh-icon:    clamp(18px, 3.2vw, 28px);
  --mh-gap-1:   clamp(6px, 1.2vw, 12px);
  --mh-gap-2:   clamp(10px, 1.8vw, 18px);
  --mh-gap-3:   clamp(14px, 2.4vw, 24px);
}

/* 2) Header/logo/icon scaling without changing HTML */
:where(header, .header){
  padding-inline: var(--mh-gap-3);
  padding-block: var(--mh-gap-2);
}
:where(.header__heading, .header__heading-logo, .header__logo) img{
  max-height: clamp(28px, 5.2vw, 48px);
  height: auto;
  width: auto;
}
:where(.header__icons, .header__inline-menu, .header__submenu, .menu-drawer){
  gap: var(--mh-gap-1);
}
:where(.header__icons) svg,
:where(.header__icons) img{
  width: var(--mh-icon);
  height: var(--mh-icon);
}

/* 3) Nav link sizing that shrinks on mobile */
:where(.list-menu, .header__inline-menu) a{
  font-size: var(--mh-step--1);
  line-height: 1.2;
  padding: 6px 10px;
}
@media (min-width: 1024px){
  :where(.list-menu, .header__inline-menu) a{
    font-size: var(--mh-step-0);
    padding: 8px 12px;
  }
}

/* 4) Dropdowns/mega menus stay on screen and scroll on small devices */
:where(.mega-menu, .dropdown, .header__submenu){
  max-height: 70vh;
  overflow:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-width: min(88vw, 360px);
}
@media (max-width: 767px){
  :where(.mega-menu, .dropdown, .header__submenu){ min-width: 92vw; }
}

/* 5) Product/collection grids become auto-fit and adaptive */
:where(.collection, .collection-list, .product-grid, .grid, .cards){
  --mh-min: 160px; /* change to 200–240 if you want bigger tiles */
}
:where(.collection, .product-grid, .grid, .cards) > :where(*){
  /* no-op: preserve original card styles */
}
:where(.collection .grid, .product-grid, .cards){
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mh-min), 1fr));
  gap: var(--mh-gap-2);
}
@media (min-width: 1024px){
  :where(.collection .grid, .product-grid, .cards){
    --mh-min: 220px;
  }
}

/* 6) Gallery/Lookbook images fill neatly without distortion */
:where(.media, .card__media, .gallery, .lookbook, .product__media) img{
  width: 100%;
  height: auto;
  display: block;
}
:where(.gallery, .lookbook){
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--mh-gap-2);
}
:where(.gallery .media, .lookbook .media, .gallery__item, .lookbook__item){
  border-radius: 8px;
  overflow: hidden;
}
:where(.gallery img, .lookbook img){
  aspect-ratio: 3 / 4; /* adjust to 4/3 or 1/1 if preferred */
  object-fit: cover;
}

/* 7) Buttons/badges/text scale down gracefully on mobile */
:where(.button, .btn){
  font-size: var(--mh-step--1);
  padding: 10px 14px;
  border-radius: 6px;
}
:where(.badge, .tag){
  font-size: var(--mh-step--2);
  padding: 3px 8px;
  border-radius: 999px;
}

/* 8) Global image safety: never overflow container */
img{ max-width: 100%; height: auto; }

/* 9) Tighten spacing on tiny screens so nothing feels cramped */
@media (max-width: 767px){
  :where(header, .header){
    padding-inline: var(--mh-gap-2);
    padding-block: var(--mh-gap-1);
  }
  :where(.list-menu, .header__inline-menu){ gap: 6px; }
  :where(.list-menu, .header__inline-menu) a{ padding: 4px 8