/** Shopify CDN: Minification failed

Line 320: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;
}

/* =============================================
   PRODUCT PAGE: Description-accordion breathing room
   The PDP description uses raw <details>/<summary>
   inside .prose (NOT the theme's .accordion class).
   Border-top on each <details> is the divider line.
   The Story content is plain text inside <details>
   (no <p> wrapper), so the existing rule on
   `details > *:not(summary)` matches NOTHING for
   that case. Adding padding-bottom directly on the
   <details> element pushes the closing edge away
   from the next details' border-top, which is the
   divider Cole sees against the last line of text.
   ============================================= */
.product-info .product-info__description details[open] {
  padding-bottom: 1rem !important;
}
.product-info .product-info__description details > *:not(summary) {
  padding-bottom: 1rem !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 === */

/* === IM-VARIANT-SOLDOUT START ===
 * Strengthen the visual treatment of sold-out / unavailable variant
 * swatches. The theme's native .is-disabled styling is subtle on some
 * surfaces (esp. block pills like Size: Regular/XL on Wall Art); this
 * adds a diagonal strikethrough + dimmed fill so it's visible at a
 * glance, while keeping the swatch clickable so the customer can still
 * see the price for the unavailable option.
 */

/* Block pills (Size, Condition) — strikethrough + dimmed */
.block-swatch.is-disabled,
.block-swatch[aria-disabled="true"],
[data-option-value].is-disabled .block-swatch {
  opacity: 0.5 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
  text-decoration-color: rgba(0, 0, 0, 0.55) !important;
  pointer-events: auto !important; /* keep clickable so price stays viewable */
  cursor: pointer !important;
}

/* Color swatches — diagonal strike via gradient overlay */
.color-swatch.is-disabled,
[data-option-value].is-disabled .color-swatch {
  opacity: 0.55 !important;
  position: relative;
  pointer-events: auto !important;
}
.color-swatch.is-disabled::after,
[data-option-value].is-disabled .color-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(0, 0, 0, 0.6) 50%,
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* Thumbnail swatches — diagonal strike overlay */
.thumbnail-swatch.is-disabled,
[data-option-value].is-disabled .thumbnail-swatch {
  opacity: 0.55 !important;
  position: relative;
  pointer-events: auto !important;
}
.thumbnail-swatch.is-disabled::after,
[data-option-value].is-disabled .thumbnail-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(0, 0, 0, 0.55) 50%,
    transparent calc(50% + 1px)
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Buy button when current selection is unavailable / non-existent combo */
buy-buttons button[type="submit"].is-soldout,
buy-buttons button[type="submit"][aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === IM-VARIANT-SOLDOUT END === */

/* =============================================
   FOOTER REDESIGN (2026-05-04)
   --------------------------------------------
   Issues with the legacy block layout:
   1. Right column was visually heavy — duplicate logo + serif H1
      "Sign up" + sub-copy + email field made it dwarf the other two.
   2. Middle column ("Get in touch") died after 3 lines, leaving a big
      whitespace pocket.
   3. Left column ("More") was one long stack of 7 links mixing studio
      nav (About / Blog / Contact) with policies (Privacy / Refund / etc.)
      — different audiences in one list.
   4. "Sign up" rendered like a page H1, not a footer CTA.
   5. Bottom strip was uneven: socials + currency stranded bottom-left,
      payment badges floating bottom-right with no visual anchor.
   ============================================= */
@media screen and (min-width: 1000px) {
  /* Three equal columns: More | Get in touch | Sign up.
     Symmetric 8% padding so the geometry is left/right balanced and
     the middle column sits at the page center. DOM order preserved
     (no grid-auto-flow: dense — that was packing items into the
     wrong cells when one block had column-start set). */
  .footer .footer__block-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-auto-flow: row !important;
    column-gap: 24px !important;
    row-gap: var(--spacing-12, 48px) !important;
    align-items: start !important;
    padding-inline-start: 8% !important;
    padding-inline-end: 8% !important;
  }
  /* Override the theme's `grid-column: span 2` on text + newsletter
     blocks. Without this, the text block consumes 2 of 3 cols and
     pushes newsletter to its own row. Each block takes ONE column.
     Visual column order: Get in Touch | More | Sign Up. */
  .footer .footer__block,
  .footer .footer__block--text,
  .footer .footer__block--menu,
  .footer .footer__block--newsletter {
    grid-row: auto !important;
    flex-basis: auto !important;
    max-width: none !important;
    text-align: center !important;
  }
  .footer .footer__block--text       { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; }
  .footer .footer__block--menu       { grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; }
  .footer .footer__block--newsletter { grid-column: 3 !important; grid-row: 1 !important; align-self: start !important; }
  /* Center inline elements (links, email field) within each column. */
  .footer .footer__block--menu ul {
    align-items: center !important;
  }
  .footer .footer__block--menu ul li {
    text-align: center !important;
  }
  /* Newsletter form input: keep usable width, but center it horizontally. */
  .footer .footer__block--newsletter form,
  .footer .footer__block--newsletter .form {
    margin-inline: auto !important;
    max-width: 320px !important;
  }
}

/* Drop the duplicate logo from the newsletter block — header carries
   brand identity already; second logo is redundant and adds visual weight. */
.footer .footer__block--newsletter > img {
  display: none !important;
}

/* "Sign up" heading: drop from H1-serif to a quiet small-caps label so it
   reads as a footer CTA, not a page heading. */
.footer .footer__block--newsletter p.h0,
.footer .footer__block--newsletter p.h1,
.footer .footer__block--newsletter p.h2,
.footer .footer__block--newsletter p.h3,
.footer .footer__block--newsletter p.h4,
.footer .footer__block--newsletter p.h5,
.footer .footer__block--newsletter p.h6 {
  font-family: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.78) !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

/* Tighten the newsletter sub-copy spacing */
.footer .footer__block--newsletter .v-stack {
  gap: 0.75rem !important;
}
.footer .footer__block--newsletter .prose {
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
}

/* Split the "More" / links column into two visual columns to balance
   weight against the text + form columns. CSS columns flow the <li>
   items into two equal stacks. */
@media screen and (min-width: 1000px) {
  .footer .footer__block--menu ul {
    column-count: 2 !important;
    column-gap: var(--spacing-8, 32px) !important;
    column-fill: balance !important;
  }
  .footer .footer__block--menu ul li {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

/* Tighten body section header weight to match the newsletter "Sign up"
   small-caps label so all three column titles share the same visual rhythm. */
.footer .footer__block > p.bold {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.78) !important;
  margin-bottom: 0.5rem !important;
}

/* Non-newsletter blocks: tighten the gap between title and content
   to match the Sign Up column's spacing rhythm. The theme's default
   --footer-block-gap was leaving too much air below the title. */
.footer .footer__block--menu,
.footer .footer__block--text {
  gap: 0.5rem !important;
  --footer-block-gap: 0.5rem !important;
}

/* Bottom-strip: social + locale + payment + copyright on one balanced row,
   separated from the columns above by a hairline divider. */
.footer .footer__aside {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
}
@media screen and (min-width: 1000px) {
  .footer .footer__aside-top,
  .footer .footer__aside-bottom {
    align-items: center !important;
  }
}

/* Copyright + payment icons: ensure they share the bottom row evenly */
.footer .footer__aside-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}
/* === FOOTER REDESIGN END === */

/* =============================================
   MOBILE NAV DRAWER: Compact layout — items at top, no scroll
   The Maestrooo default centers content vertically (its grid v-stack +
   align-content: flex-start stretches a single row to 100% height) and
   uses h3 sizes that push the footer below the fold. We collapse all
   stretching, kill the inner scroll, tighten the outer chrome, and
   shrink the type so the whole drawer fits on one mobile screen.
   ============================================= */
@media screen and (max-width: 699px) {
  /* Outer drawer chrome — minimal padding above X, near-flush gap to panel. */
  .navigation-drawer::part(body),
  .navigation-drawer[mobile-opening="left"]::part(body) {
    gap: 0 !important;
    padding-block-start: var(--spacing-1) !important;
    overflow-y: hidden !important;
  }

  /* Panel & wrappers: stop stretching to 100% height. Let content flow from
     the top and let the footer drift to the bottom via margin-top:auto. */
  .navigation-drawer .panel,
  .navigation-drawer .panel-list__wrapper {
    height: auto !important;
  }
  .navigation-drawer .panel__wrapper {
    justify-content: flex-start !important;
    gap: var(--spacing-2) !important;
    padding-block-start: 0 !important;
    padding-block-end: var(--spacing-3) !important;
    height: auto !important;
    min-height: 100% !important;
  }
  .navigation-drawer .panel__scroller {
    height: auto !important;
    align-content: start !important; /* fix grid row stretch */
    overflow-y: visible !important;  /* no inner scroll */
    flex: 0 0 auto !important;
    gap: var(--spacing-2) !important;
  }
  .navigation-drawer .panel__scroller > ul.v-stack {
    gap: var(--spacing-1) !important;
  }

  /* Smaller, denser primary nav items. */
  .navigation-drawer .panel-list__wrapper li.h3 {
    font-size: 1rem !important;       /* ~16px */
    line-height: 1.4 !important;
  }
  .navigation-drawer .panel-list__wrapper li.h3 a,
  .navigation-drawer .panel-list__wrapper li.h3 button {
    padding-block: 0.125rem !important;
  }

  /* Footer pinned to bottom of drawer, tightened. */
  .navigation-drawer .panel-footer {
    margin-top: auto !important;
  }
  .navigation-drawer .panel-footer__localization-wrapper {
    padding-block-start: var(--spacing-2) !important;
  }
}
/* === MOBILE NAV DRAWER COMPACT END === */