/** Shopify CDN: Minification failed

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

**/
/* Interior Moderna — Custom CSS Overrides */

/* =============================================
   PRODUCT PAGE: Hide Quantity Selector
   Users can add to cart multiple times instead
   ============================================= */
.product-info quantity-selector,
.product-info .quantity-selector,
.product-info [class*="quantity"] {
  display: none !important;
}

/* Also hide the "Quantity:" label above it */
.product-form__label:has(+ quantity-selector),
.product-info__quantity,
safe-sticky.product-info .v-stack > .product-form__label {
  display: none !important;
}

/* =============================================
   PRODUCT PAGE: Tighten Right-Side Spacing
   Compress gaps between liquid -> variant -> ATC
   ============================================= */
safe-sticky.product-info {
  display: flex !important;
  flex-direction: column !important;
}

safe-sticky.product-info > .v-stack {
  gap: 1rem !important;
}

/* Reduce gap inside the product form area */
.shopify-product-form .v-stack.gap-4 {
  gap: 0.75rem !important;
}

/* --- Targeted margin overrides for product info sections --- */

/* Price -> Shipping info = 16px gap (8px bottom + 8px top) */
.product-info__price {
  margin-bottom: 8px !important;
}

.product-info__liquid {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

/* Shipping info -> Variant picker = 16px gap (8px bottom on liquid + 8px top) */
.product-info__variant-picker {
  margin-top: 10px !important;
  margin-bottom: 15px !important;
}

/* Variant picker -> ATC = 20px gap (10px bottom + 10px top) */
.product-info__buy-buttons {
  margin-top: 15px !important;
  margin-bottom: 8px !important;
}

/* Collapse hidden/empty elements between variant picker and ATC */
.product-info__quantity-selector,
#wcp_vd_table:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Payment terms — keep tight */
.product-info__payment-terms {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* =============================================
   PRODUCT PAGE: Wishlist Button — Option C
   Circle heart icon inline next to Add to Cart
   ============================================= */

/* Flex row wrapper created by custom-im.js */
#atc-wishlist-row {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
}

#atc-wishlist-row buy-buttons {
  flex: 1 1 auto !important;
}

#atc-wishlist-row .shopify-app-block:has(.wk-button) {
  order: unset !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

/* Circle button styling */
.wk-button {
  background-color: transparent !important;
  border: 1.5px solid #1a1a1a !important;
  border-radius: 50% !important;
  height: 52px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease !important;
}

.wk-button:hover {
  background-color: #1a1a1a !important;
}

/* Heart icon */
.wk-button .wk-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 0 !important;
}

.wk-button .wk-icon svg {
  fill: #1a1a1a !important;
  transition: fill 0.25s ease !important;
}

.wk-button:hover .wk-icon svg {
  fill: #f0f0f0 !important;
}

/* Hide the text label — icon only */
.wk-button .wk-text {
  display: none !important;
}

/* =============================================
   PRODUCT PAGE: Section Ordering (fallback)
   Keep ordering sane if JS doesn't run
   ============================================= */
.product-info__description {
  order: 2 !important;
}

.product-info__collapsible {
  order: 3 !important;
}

/* =============================================
   WISHLIST: Remove (X) Button — Reduce Size
   WishlistKing floating X on product cards
   ============================================= */
remove-button .wk-floating .wk-button {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  --icon-size: 10px !important;
}

/* =============================================
   COLLECTION PAGES: Hide redundant H2 subtitle
   The H1 collection title is sufficient
   ============================================= */
.im-top-intro > h2,
.collection-description-top > section > h2 {
  display: none !important;
}

/* =============================================
   MOBILE: Collection / Listings Page Fixes
   Tighten spacing, flexible grid, better header
   ============================================= */
@media (max-width: 749px) {

  /* --- Fix A: Tighten header height on mobile --- */
  .shopify-section-header .header {
    padding-block: 0.5rem !important;
  }

  .shopify-section-header .header__logo-image {
    max-height: 40px !important;
  }

  /* --- Fix B: Flexible product grid + better gaps --- */
  product-list,
  .product-list,
  .collection product-list {
    --product-list-column-gap: 0.625rem !important;
    --product-list-row-gap: 1.25rem !important;
  }

  product-list .product-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 10px !important;
  }

  /* Tighter card spacing */
  .product-card .v-stack {
    gap: 0.375rem !important;
  }

  /* --- Fix C: Collection title/banner area spacing --- */
  /* Banner section: small top padding, no bottom */
  .collection-banner {
    --section-outer-spacing-block: 0 !important;
    padding-block-start: 1rem !important;
    padding-block-end: 0 !important;
  }

  /* Product grid section: no top padding — target section directly */
  .shopify-section--main-collection {
    --section-outer-spacing-block: 0 !important;
    padding-block-start: 0 !important;
  }

  /* Kill the 20px top margin on the inner collection div */
  .shopify-section--main-collection .container > .collection {
    margin-top: 0 !important;
  }

  /* Reduce gap between hidden filter bar and product grid (gap-6 = 24px → 3px) */
  .shopify-section--main-collection .collection__results > .v-stack {
    gap: 3px !important;
  }

  /* Collection title font size */
  .shopify-section--collection-banner h1,
  .shopify-section--collection-banner h1.h2 {
    font-size: 1.5rem !important;
  }

  /* Title → description gap: h1 has theme margin-bottom:-28px eating the grid gap,
     and theme v-stack rules cap child margin-top at 10px. Padding can't be overridden
     by grid layout, so we use padding-top on the description element directly. */

  /* Description text */
  .collection-description-top,
  .collection-banner__description,
  .collection__description {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 1rem !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }

  /* Zero out <p> tag margins inside description — the default p margin-bottom
     was making the description element ~51px taller than its text, creating
     phantom space between description and the first products. */
  .collection-description-top p,
  .collection-banner__description p,
  .collection__description p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Product list itself */
  .collection product-list,
  .collection .product-list {
    margin-top: 0 !important;
  }

  /* --- Fix D: Nav icon spacing from edges --- */
  .header__icon-list {
    gap: 0.625rem !important;
  }

  .header__icon-list .header__icon {
    padding: 0.5rem !important;
  }

  /* Give the header inner content more breathing room from screen edges */
  .header__wrapper,
  .header > .page-width {
    padding-inline: 1rem !important;
  }

}

/* ═══════════════════════════════════════════════════════════
   FONT OVERRIDE — Cormorant Garamond + Jost
   Applied: 2026-04-11 via deploy_font_override.py
   Replaces: Playfair Display (headings) → Cormorant Garamond
   Body/UI text: Jost (replaces any existing sans fallback)
   To revert: remove everything between these comment markers
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Jost:wght@300;400;500&display=swap');

/* Headings → Cormorant Garamond */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.product__title,
.product-title,
.product-single__title,
.product__name,
.collection-title,
.collection__title,
.section-header__title,
.hero__title,
.banner__title,
.hero-title,
.page-title,
.article__title,
.blog-article__title,
.card__heading,
.featured-product__title,
.modal__product-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* Nav, labels, UI, body → Jost */
body,
.btn, button,
.nav-link,
.header__menu-item,
.link,
.type-body-regular,
.caption,
.product__price,
.price,
.badge,
.tag,
.breadcrumb,
.pagination,
input, select, textarea,
.form__label {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 300;
}

/* Nav specifically — keep tight and architectural */
.header__menu-item a,
.nav__link,
.header__link {
  font-family: 'Jost', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Product price — slightly more weight */
.price, .product__price, .price__regular {
  font-weight: 400 !important;
  letter-spacing: 0.04em;
}

/* CTAs / buttons — Jost medium */
.btn, .button, [type="submit"] {
  font-weight: 500 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
}


/* Nav items — remove bold, keep architectural */
.header__menu-item summary,
.header__menu-item a,
.header__link,
.bold.link-faded-reverse,
summary.bold {
  font-weight: 300 !important;
}

/* Wishlist heart icon — match stroke-width of other header icons (search/cart/account use 1) */
.im-wishlist-link svg {
  stroke-width: 1 !important;
}

/* Mobile nav sidebar — plain <a> links (no chevron, e.g. Sale Items)
   inherit .h3 Cormorant Garamond from their <li class="h3"> wrapper.
   Override here to match the button-based nav items (Jost). */
.panel-list__wrapper li a,
.panel-list__wrapper li a .reversed-link,
.panel-list__wrapper li a span {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 300 !important;
}

/* ═══════════════════════════════════════════════════════════
   END FONT OVERRIDE
   ═══════════════════════════════════════════════════════════ */

/* === IM-SWATCH-OVERRIDE START === */
/* Photo variant swatches — square chip, photo fills edge-to-edge.
   The high-specificity selector beats im-open-box-available.liquid's
   hairline-chip rule (`> label { border-radius: 999px !important }`),
   which otherwise catches photo chips too. */
.variant-picker__option-values:not(.variant-picker__option-values--color) > label.thumbnail-swatch,
.variant-picker__option-values:not(.variant-picker__option-values--color) input:checked + label.thumbnail-swatch,
.thumbnail-swatch {
  border-radius: 6px !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
}
.variant-picker__option-values:not(.variant-picker__option-values--color) > label.thumbnail-swatch::before,
.variant-picker__option-values:not(.variant-picker__option-values--color) > label.thumbnail-swatch::after,
.thumbnail-swatch::before,
.thumbnail-swatch::after {
  border-radius: 6px !important;
}
.thumbnail-swatch > img,
.thumbnail-swatch > img.object-contain {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
/* === IM-SWATCH-OVERRIDE END === */


/* ═══════════════════════════════════════════════════════════
   COLLECTION BANNER — locked aspect ratio across viewports
   Applied: 2026-05-02
   ───────────────────────────────────────────────────────────
   Maestrooo's `.content-over-media--md` sets a fixed min-height,
   so when the viewport narrows the frame width shrinks but the
   height doesn't — same image gets a tighter side-crop on mobile
   than on desktop. We want the SAME visible portion of the photo
   across viewports, per the intent file (Region 1 Banner contract:
   horizontal/cinematic, 16:9 or wider). Pinning aspect-ratio makes
   width and height scale together; the visible crop stays constant.
   ─────────────────────────────────────────────────────────── */
.shopify-section--collection-banner .content-over-media,
.shopify-section--collection-banner image-banner {
  aspect-ratio: 16 / 9 !important;
  min-block-size: 0 !important;
  min-height: 0 !important;
  block-size: auto !important;
  height: auto !important;
}

/* Ensure the <img> inside fills the now-aspect-locked frame edge to edge.
   Keep object-fit: cover so we still get a controlled crop, but with a
   constant frame the crop is identical on every viewport. */
.shopify-section--collection-banner .content-over-media > img,
.shopify-section--collection-banner image-banner > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* === IM-COLLECTION-BANNER-ASPECT END === */


/* ═══════════════════════════════════════════════════════════
   COLLECTION BANNER — mobile: image starts BELOW header
   Applied: 2026-05-02
   ───────────────────────────────────────────────────────────
   On desktop the banner extends UNDER the translucent header
   (the "white mist" overlay treatment). On mobile the 16:9 hero
   is short enough that overlapping with the header eats title +
   description space and clips the bottom. Mobile gets a solid
   white header strip at the top with the image starting fresh
   below it — same aspect ratio, full vertical area usable for
   title overlay.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 749px) {
  .shopify-section--collection-banner {
    margin-block-start: 0 !important;
  }
  .shopify-section--collection-banner .section[allow-transparent-header],
  .shopify-section--collection-banner image-banner,
  .shopify-section--collection-banner .content-over-media {
    padding-block-start: 0 !important;
  }
  /* Force the global header to its solid white state on collection
     pages — no translucent mist over the image since the image is
     no longer behind it. */
  body:has(.shopify-section--collection-banner) .header,
  body:has(.shopify-section--collection-banner) .ecom-header {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* === IM-COLLECTION-BANNER-MOBILE-HEADER END === */


/* ═══════════════════════════════════════════════════════════
   COLLECTION BANNER — mobile: anchor title to top of image
   Applied: 2026-05-02
   ───────────────────────────────────────────────────────────
   Maestrooo's banner uses `place-self-center` on the text block,
   so on a short 16:9 mobile image the title + description center
   vertically and overflow top + bottom. Force the text to anchor
   at the top of the frame on mobile so it grows downward instead. */
@media (max-width: 749px) {
  .shopify-section--collection-banner [class*="place-self"],
  .shopify-section--collection-banner image-banner > [class*="place-self"] {
    place-self: start start !important;
    padding-block-start: 0.75rem !important;
    padding-inline-start: 1rem !important;
  }
  .shopify-section--collection-banner .v-stack {
    align-items: flex-start !important;
    text-align: left !important;
    gap: 0.25rem !important;
  }
}
/* === IM-COLLECTION-BANNER-MOBILE-TITLE-TOP END === */


/* ═══════════════════════════════════════════════════════════
   FOOTER — mobile: center everything, anchor logo to Sign up
   Applied: 2026-05-02
   ───────────────────────────────────────────────────────────
   On mobile the footer blocks stack vertically. By default they
   inherit left alignment, with the newsletter logo floating
   awkwardly on the left between the Get-in-touch text and the
   Sign up title. We center every block on mobile and pull the
   logo into the same v-stack as the Sign up title so it reads
   as part of that block, not orphaned. */
@media (max-width: 749px) {
  .footer,
  .footer__block,
  .footer__block ul,
  .footer__block .prose,
  .footer__block .v-stack,
  .footer__copyright,
  .footer__aside-bottom,
  .footer__aside-top {
    text-align: center !important;
  }
  .footer__block ul {
    list-style: none !important;
    padding-inline-start: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .footer__block ul li {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
  .footer__block ul li a,
  .footer__block ul li a.inline-block {
    display: inline-block !important;
    text-align: center !important;
  }
  .footer__block .v-stack {
    align-items: center !important;
  }
  /* Center the newsletter logo (currently inline <img> at the
     top of the newsletter block — left-aligned by default). */
  .footer__block--newsletter > img {
    display: block !important;
    margin: 0 auto !important;
  }
  /* Tighten the gap between the page content (last review block)
     and the footer's first heading. */
  .shopify-section--footer,
  .shopify-section[id*="footer"] {
    padding-block-start: 0 !important;
  }
  .footer {
    padding-block-start: 1.5rem !important;
  }
  /* Maestrooo renders .footer__block-list as a CSS grid. On mobile
     we force a single column AND make each block full-width so
     text-align: center actually centers the contents. Without this,
     each block shrinks to its content width and aligns left in its
     grid cell. */
  .footer__block-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 2rem !important;
  }
  .footer__block,
  .footer__block--menu,
  .footer__block--text,
  .footer__block--newsletter {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    display: block !important;
  }
  /* Center social-media icons + payment row */
  .footer__aside-top,
  .footer__payment-icons {
    justify-content: center !important;
  }
}

/* Universal — defensive override that doesn't rely on the Liquid
   class change (Shopify caches storefront renders, so the bold→h3
   change in the Liquid may not be live yet). Target BOTH `p.bold`
   and `p.h3` inside the menu / text blocks and render them at the
   same h3-equivalent size. */
.footer__block--menu > p,
.footer__block--text > p,
.footer__block--menu > p.bold,
.footer__block--text > p.bold,
.footer__block--menu > p.h3,
.footer__block--text > p.h3 {
  margin-block-end: 0 !important;
  margin-block-start: 0 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

/* Universal mobile centering — applied at ALL viewports below 1000px
   (Maestrooo's desktop breakpoint), independent of any media-query
   matching. The grid-template-columns: 1fr forces a single column on
   narrow viewports and lets the desktop's space-between layout take
   over above 1000px. */
@media (max-width: 999px) {
  .footer .footer__block-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 2rem !important;
  }
  .footer .footer__block,
  .footer .footer__block--menu,
  .footer .footer__block--text,
  .footer .footer__block--newsletter {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    display: block !important;
  }
  .footer .footer__block ul,
  .footer .footer__block .v-stack,
  .footer .footer__block .prose,
  .footer .footer__block p {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
  }
  .footer .footer__block ul {
    list-style: none !important;
    padding-inline-start: 0 !important;
  }
  .footer .footer__block ul li {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
  .footer .footer__block ul li a {
    display: inline-block !important;
    text-align: center !important;
    margin-inline: auto !important;
  }
  .footer .footer__block--newsletter > img {
    display: block !important;
    margin: 0 auto !important;
  }
  .footer .footer__aside-top,
  .footer .footer__payment-icons,
  .footer .footer__aside-bottom {
    justify-content: center !important;
    text-align: center !important;
  }
}
/* === IM-FOOTER END === */


/* ═══════════════════════════════════════════════════════════
   FOOTER mobile centering — NUCLEAR SPECIFICITY OVERRIDE
   Applied: 2026-05-02
   ───────────────────────────────────────────────────────────
   Earlier rules weren't winning specificity vs Maestrooo's defaults.
   Stacking selectors 4+ deep + flex-column on every block so each
   block becomes a centered flex container regardless of the parent
   grid behavior. This guarantees More + Get in touch + Sign up sit
   on the same vertical axis with content centered horizontally. */
@media (max-width: 999px) {
  body .footer .footer__wrapper .footer__block-list,
  body .shopify-section--footer .footer__block-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    width: 100% !important;
    gap: 2.5rem !important;
  }
  body .footer .footer__wrapper .footer__block,
  body .shopify-section--footer .footer__block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
  body .footer .footer__block > *,
  body .shopify-section--footer .footer__block > * {
    text-align: center !important;
    align-self: center !important;
    margin-inline: auto !important;
  }
  body .footer .footer__block ul,
  body .shopify-section--footer .footer__block ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  body .footer .footer__block ul li,
  body .shopify-section--footer .footer__block ul li {
    text-align: center !important;
    width: auto !important;
    list-style: none !important;
  }
  body .footer .footer__block ul li a,
  body .shopify-section--footer .footer__block ul li a {
    display: inline-block !important;
    text-align: center !important;
  }
}
/* === IM-FOOTER-NUCLEAR END === */