/** 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 === */