/** Shopify CDN: Minification failed

Line 278:0 Unexpected "/"

**/
/* ============================================================
   Studio Muse - Custom theme styles
   Loaded after base.css so overrides take precedence.

   Keep brand-specific overrides scoped and documented here
   rather than editing stock base.css. Group by concern.
   ============================================================ */

/* ------------------------------------------------------------
   Typography — Newsreader (display) + Geist (UI)

   Two families mapped onto Horizon's four font roles:
     heading / accent   -> Newsreader (editorial, heritage)
     body / subheading  -> Geist (modern ecommerce, UI)

   Sizes, leading, tracking and case stay merchant-editable in
   Theme settings > Typography. Only what the theme editor cannot
   express lives here.
   ------------------------------------------------------------ */

/* `theme-styles-variables.liquid` renders its `:root` block after
   this stylesheet, so variable overrides need the extra
   specificity of `:root:root` to win the cascade. */
:root:root {
  /* Uppercase eyebrows and labels need more tracking than the
     theme's "loose" preset (0.03em) allows. */
  --font-h6--letter-spacing: 0.12em;
}

/* ------------------------------------------------------------
   Brand Color System — FINAL palette per brief
   Core: Warm Ivory #F7F1E8 (bg), Soft Cream #FFF9F2 (cards),
   Soft Champagne #EFE5D9 (alt), Espresso #2B1A12 (text/footer),
   Royal Cocoa #4D2816 (CTA), Deep Ruby #7B1E2B (accent),
   Antique Gold #B1844B (luxury accent), Muted #725947,
   Border Taupe #D8C6B3
   ------------------------------------------------------------ */
:root:root {
  --brand-ivory: #F7F1E8;
  --brand-cream: #FFF9F2;
  --brand-champagne: #EFE5D9;
  --brand-border: #D8C6B3;
  --brand-espresso: #2B1A12;
  --brand-cocoa: #4D2816;
  --brand-ruby: #7B1E2B;
  --brand-gold: #B1844B;
  --brand-muted: #725947;
}

/* Newsreader ships regular/medium and italic; disable synthetic bold Without this the
   browser fakes a bold weight which smears thin strokes. Geist handles UI; 
   only synthesis is disabled. */
:is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
  font-synthesis-weight: none;
}

/* Newsreader uses natural word spacing — no compensation needed. */

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

/* Header wordmark.

   No logo image is uploaded, so Horizon falls back to rendering the shop
   name as text at the body size. With the logo moved to the centre of the
   navbar that left it the same size as the nav links either side of it, so
   it no longer read as the brand anchor.

   Size and tracking only - family is Newsreader Medium per finalized system. `_header-logo.liquid` pins the family with an inline custom
   property and exposes no font setting, so this cannot be done from the
   theme editor. Superseded automatically once brand artwork is uploaded
   under Theme settings > Logo, which is the better long-term fix.

   The doubled class is deliberate: the block's own `{% stylesheet %}` sets
   `font-size: var(--font-size--md)` at equal specificity, and Shopify
   concatenates block styles after this file, so it would otherwise win on
   source order. */
.header-logo.header-logo {
  font-family: var(--font-heading--family);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 749px) {
  .header-logo.header-logo {
    font-size: 1.0625rem;
  }
}

/* Submenu content, text menu style.

   Horizon lays every submenu out on the same six-column mega-menu grid and
   stretches the panel to the full header width. That suits the image-led
   menu styles, but in `text` mode a short list of links gets spread across
   the viewport with most columns empty.

   This packs the groups to their natural width at the start of the panel so
   the dropdown reads as a compact list. Flex rather than grid on purpose:
   the groups wrap to a second row as the merchant adds categories, where a
   single grid row would eventually overflow.

   Only layout properties inside the panel are touched. The panel's
   position, reveal animation and clip-path are Horizon's and stay
   untouched - they are driven by element measurements taken at runtime in
   header-menu.js, so overriding them here would desynchronise the two.

   `data-menu-content-type` is emitted from the menu style setting in
   `_header-menu.liquid`, so switching to an image-led style in the theme
   editor restores the stock grid with no CSS change.

   Desktop only; below 750px the drawer handles navigation. */
@media screen and (min-width: 750px) {
  [data-menu-content-type='text'] .mega-menu__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg) var(--gap-3xl);
  }

  [data-menu-content-type='text'] .mega-menu__column {
    flex: 0 0 auto;
    grid-column: auto;
  }
}

/* Prices.
   Several templates render prices with the h6 preset, which is now the
   uppercase, wide-tracked label style. Money should never inherit that, so
   the preset variables are reset locally rather than fighting selector
   specificity. Tabular figures keep columns aligned in product grids. */
product-price {
  --font-h6--case: none;
  --font-h6--letter-spacing: normal;

  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Cards: suppress the native link/image drag ghost

   Dragging a collection or product card otherwise lifts Chrome's
   link preview (bold title + URL in a grey box) instead of doing
   nothing / letting the slider drag. Firefox ignores this property,
   so custom.js also cancels dragstart on the same elements.
   ------------------------------------------------------------ */
:is(.collection-card, .product-card) :is(a, img),
:is(.collection-card, .product-card) {
  -webkit-user-drag: none;
}

/* ------------------------------------------------------------
   Back link, top-left under the header on every route except the
   homepage (markup in layout/theme.liquid). A plain anchor to the
   home page - no history logic - so it is deterministic.
   ------------------------------------------------------------ */
.back-link-bar {
  padding-inline: var(--page-margin, 2rem);
  padding-block: var(--padding-lg) 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2xs);
  min-height: var(--minimum-touch-target);
  font-family: var(--font-body--family);
  font-size: var(--font-paragraph--size);
  color: var(--color-foreground);
  text-decoration: none;
  cursor: pointer;
}

.back-link .svg-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.back-link .svg-wrapper svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Optical alignment: flex centers the full line-box, but cap-height text
   reads high next to the icon — nudge the icon down to cap center. */
.back-link .svg-wrapper {
  position: relative;
  top: 2px;
}

.back-link:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
}

/* ------------------------------------------------------------
   Footer

   The main columns are the generic `section` in footer-group.json,
   laid out as a flex row (content_direction: row) with columns
   spread across the width (horizontal_alignment: space-between).
   Below 750px the theme's `mobile-column` stacks them vertically;
   on tablet we let the columns wrap so they read as 2-3 per row
   instead of being squeezed into a single row of five.
   ------------------------------------------------------------ */

@media screen and (min-width: 750px) and (max-width: 989px) {
  footer .layout-panel-flex--row {
    flex-wrap: wrap;
  }

  footer .layout-panel-flex--row > .shopify-block {
    flex: 1 1 30%;
  }
}

/* ------------------------------------------------------------
   Brand Color System — Global overrides
   ------------------------------------------------------------ */

/* Page */
body {
  background-color: var(--brand-ivory);
  color: var(--brand-espresso);
}

/* Muted/secondary text where available */
:root:root {
  --color-foreground-muted: var(--brand-muted);
}

/* Links */
a {
  color: var(--brand-cocoa);
}
a:hover {
  color: var(--brand-ruby);
}

/* Primary buttons — Royal Cocoa / Ruby hover */
:root:root {
  --color-primary-button-hover-background: var(--brand-ruby);
  --color-primary-button-hover-text: var(--brand-cream);
  --color-primary-button-hover-border: var(--brand-ruby);
  --color-secondary-button-hover-background: var(--brand-cocoa);
  --color-secondary-button-hover-text: var(--brand-cream);
  --color-secondary-button-hover-border: var(--brand-cocoa);
}

/* Focus outline — Antique Gold where appropriate */
:focus-visible {
  outline-color: var(--brand-gold);
}

/* Forms / Inputs */
:root:root {
  --color-input-background: var(--brand-cream);
  --color-input-text: var(--brand-espresso);
  --color-input-border: var(--brand-border);
}
input::placeholder,
textarea::placeholder {
  color: var(--brand-muted);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-gold);
}

/* Drawers / Popovers / Modals — Soft Cream */
/cart-drawer,
.drawer,
popover-content,
.modal {
  background-color: var(--brand-cream);
  color: var(--brand-espresso);
  border-color: var(--brand-border);
}

/* Badges */
.badge--sale {
  background-color: var(--brand-ruby);
  color: var(--brand-cream);
}
.badge--sold-out,
.badge--out-of-stock {
  background-color: var(--brand-champagne);
  color: var(--brand-muted);
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

/* Transparent hero state — cream text/icons */
.header-section[data-transparent="true"],
.header-section:has(.header--transparent) {
  --color-foreground: var(--brand-cream);
}

/* Sticky / scrolled — ivory bg, espresso text, taupe divider */
.header {
  background-color: var(--brand-ivory);
  color: var(--brand-espresso);
  border-block-end: 1px solid var(--brand-border);
}

/* The homepage header sits over the hero until it becomes sticky. Keep the
   divider for the solid sticky state, but never paint it over the hero. */
.header[transparent]:not([data-sticky-state='active']) {
  border-block-end-color: transparent;
}

.header a:hover {
  color: var(--brand-ruby);
}

/* Tablet navbar — restore right-side spacing (750px – 989px).

   Root cause: .header__columns carries the 'spacing-style' class which applies
   padding-inline: var(--padding-inline-start) var(--padding-inline-end);
   Both custom properties default to 0px, so they override the section grid's
   padding-right: var(--page-margin) in EVERY header menu-style mode.

   Fix: override --padding-inline-end on the header columns element at tablet
   widths regardless of menu style (drawer on touch, menu on pointer devices).
   Uses the CSS custom property so spacing-style reads the corrected value. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .header .header__columns {
    --padding-inline-end: var(--page-margin);
  }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero__overlay,
.hero .overlay {
  background: rgba(43, 26, 18, 0.32) !important;
}
.hero .hero__heading,
.hero h1,
.hero h2 {
  color: var(--brand-cream);
}

/* The secondary hero CTA is the only outlined button that fills with cream
   on hover. Keep this independent from the global secondary-button palette. */
[id$='__hero_p9CmMG'] .button-custom[class*='__button_hero_secondary'] {
  --button-background-color: transparent;
  --button-color: var(--brand-cream);
  --button-border-color: var(--brand-cream);

  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

[id$='__hero_p9CmMG'] .button-custom[class*='__button_hero_secondary']:hover {
  --button-background-color: var(--brand-cream);
  --button-color: var(--brand-espresso);
  --button-border-color: var(--brand-cream);

  background-color: var(--brand-cream);
  color: var(--brand-espresso);
  border-color: var(--brand-cream);
}

/* ------------------------------------------------------------
   Homepage color flow
   ------------------------------------------------------------ */

/* Shop by Occasion */
.occasions-wrapper {
  background-color: var(--brand-ivory);
}
.occasions__heading {
  color: var(--brand-espresso);
}
.occasions__description {
  color: var(--brand-muted);
}
.occasions__card-title {
  color: var(--brand-cream);
}

/* Our Shop / Editorial story — dark cocoa */
.section-wrapper:has(.pull-quote),
#shopify-section-section_x8mrnx,
[id$='__section_x8mrnx'] {
  background-color: var(--brand-cocoa);
  color: var(--brand-cream);
}
:is(#shopify-section-section_x8mrnx, [id$='__section_x8mrnx']) h2 {
  color: var(--brand-cream);
}
:is(#shopify-section-section_x8mrnx, [id$='__section_x8mrnx']) p {
  color: var(--brand-champagne);
}

:is(#shopify-section-section_x8mrnx, [id$='__section_x8mrnx']) .button-custom[class*='__button_TmU98M'] {
  --button-background-color: var(--brand-ivory);
  --button-color: var(--brand-espresso);
  --button-border-color: var(--brand-ivory);
  --button-border-width: 1px;
  --button-focus-outline-color: var(--brand-ivory);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 2px;
  font-family: var(--font-body--family);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

:is(#shopify-section-section_x8mrnx, [id$='__section_x8mrnx']) .button-custom[class*='__button_TmU98M']:hover {
  --button-background-color: #B1844B;
  --button-color: #FFF9F2;
  --button-border-color: #B1844B;

  transform: translateY(-1px);
}

:is(#shopify-section-section_x8mrnx, [id$='__section_x8mrnx']) .button-custom[class*='__button_TmU98M']:focus-visible {
  outline: 2px solid #B1844B;
  outline-offset: 2px;
}

:is(#shopify-section-section_x8mrnx, [id$='__section_x8mrnx']) .button-custom[class*='__button_TmU98M']:active {
  --button-background-color: #4D2816;
  --button-color: #FFF9F2;
  --button-border-color: #4D2816;
}

/* Best Sellers / Featured */
#shopify-section-product_list_best_sellers,
#shopify-section-product_list_themegen {
  background-color: var(--brand-ivory);
}

/* Shop by Category — champagne */
#shopify-section-collection_list_featured {
  background-color: var(--brand-champagne);
}

/* Keep the homepage category cards centered at a normal card width.
   The explicit columns win over Horizon's generated/container grid rules. */
@media screen and (min-width: 990px) {
  [id$='__collection_list_featured'] [data-testid='collections-list-grid'].resource-list--grid {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: center;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  [id$='__collection_list_featured'] [data-testid='collections-list-grid'].resource-list--grid {
    width: 90%;
    max-width: 800px;
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center;
  }
}

@media screen and (max-width: 749px) {
  [id$='__collection_list_featured'] [data-testid='collections-list-grid'].resource-list--grid {
    width: 100%;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

[id$='__collection_list_featured'] .temporary-homepage-collection-card__title {
  --width: 100%;
  --text-align: center;
}

/* ------------------------------------------------------------
   Product cards — minimal editorial
   ------------------------------------------------------------ */
.product-card__title {
  color: var(--brand-espresso);
}
.product-card__price {
  color: var(--brand-cocoa);
}
.product-card__compare-at {
  color: var(--brand-muted);
}

/* ------------------------------------------------------------
   Footer — Espresso dark luxury
   ------------------------------------------------------------ */
footer,
.footer {
  background-color: var(--brand-espresso) !important;
  color: var(--brand-cream);
}
footer a,
.footer a {
  color: var(--brand-cream);
}
footer a:hover,
.footer a:hover {
  color: var(--brand-gold);
}
footer .footer__secondary,
.footer__secondary {
  color: var(--brand-champagne);
}
footer input {
  background-color: transparent;
  border-color: var(--brand-champagne);
  color: var(--brand-cream);
}
footer .button {
  background-color: var(--brand-ruby);
  color: var(--brand-cream);
  border-color: var(--brand-ruby);
}
footer .button:hover {
  background-color: var(--brand-gold);
  color: var(--brand-cream);
}

/* Newsletter subscribe area — consistent roundedness across all screen sizes */
footer .email-signup__input-group--integrated {
  border-radius: 100px !important;
  background-color: var(--brand-cream, #F7F3EE) !important;
  border-color: transparent !important;
}

footer .email-signup__input-group--integrated .email-signup__input {
  border-radius: 100px 0 0 100px !important;
}

footer .email-signup__input-group--integrated .email-signup__button--integrated {
  border-radius: 100px !important;
}

/* Wishlist empty-state CTA: explicitly keep the label legible on hover. */
.wishlist__empty-button {
  --button-color: var(--brand-cream);
  --button-background-color: var(--brand-cocoa);
  --button-border-color: var(--brand-cocoa);
}

.wishlist__empty-button:hover,
.wishlist__empty-button:active {
  --button-color: var(--brand-cream);
  --button-background-color: var(--brand-ruby);
  --button-border-color: var(--brand-ruby);
}

.wishlist__empty-button:focus-visible {
  outline-color: var(--brand-gold);
}

/* ------------------------------------------------------------
   Footer — Mobile responsiveness (< 750px)
   ------------------------------------------------------------ */
@media screen and (max-width: 749px) {
  /* Ensure footer layout stacks cleanly with natural auto height */
  footer .section,
  footer .custom-section-content,
  footer .section-content-wrapper.mobile-column {
    height: auto !important;
    min-height: 0 !important;
  }

  footer .section-content-wrapper.mobile-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: 24px;
  }

  /* Newsletter block on mobile */
  footer .email-signup-block {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto;
  }

  footer .email-signup__form {
    width: 100% !important;
    max-width: 100% !important;
  }

  footer .email-signup__input-group {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px;
  }

  footer .email-signup__input-group--integrated {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background-color: var(--brand-cream, #F7F3EE) !important;
    border-radius: 100px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  footer .email-signup__input-group--integrated .email-signup__input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 8px 10px 8px 16px !important;
    font-size: 0.875rem !important;
    color: var(--brand-espresso, #2B1A12) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  footer .email-signup__input-group--integrated .email-signup__input::placeholder {
    color: var(--brand-muted, #7A6B63) !important;
    font-size: 0.875rem !important;
    opacity: 0.85 !important;
  }

  footer .email-signup__input-group--integrated .email-signup__button--integrated {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    border-radius: 100px !important;
    min-height: 38px !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  /* Brand and 'Get in touch' column spans full width with natural content height */
  footer .group-block,
  footer .group-block--width-custom {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    height: auto !important;
  }

  footer .group-block-content {
    width: 100%;
    height: auto !important;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 16px;
  }

  footer .group-block .text-block,
  footer .group-block p {
    width: 100%;
    max-width: 100%;
    text-align: left;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Footer accordion blocks (Shop, Customer care, About) */
  footer accordion-custom.footer-links,
  footer .footer-links {
    display: block;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    height: auto !important;
    box-sizing: border-box;
  }

  footer .footer-links .menu__details {
    width: 100%;
    margin: 0;
    height: auto !important;
  }

  /* Accordion summary: full-width bar with heading on left, icon on far right */
  footer .footer-links .menu__heading {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--minimum-touch-target, 44px);
    padding-block: 8px;
    padding-inline: 0;
    cursor: pointer;
    user-select: none;
    list-style: none;
    text-align: left;
  }

  footer .footer-links .menu__heading::-webkit-details-marker {
    display: none;
  }

  footer .footer-links .menu__heading__default {
    display: none !important;
  }

  footer .footer-links .menu__heading__accordion {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }

  footer .footer-links .menu__heading__toggle,
  footer .footer-links .svg-wrapper.icon-plus {
    margin-inline-start: auto;
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
  }

  /* Expanded accordion content and links */
  footer .footer-links .details-content {
    width: 100%;
    height: auto;
    padding-inline: 0;
    margin-block-start: 10px;
    padding-block-end: 4px;
  }

  footer .footer-links .details-content ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  footer .footer-links .menu__item {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  footer .footer-links .menu__item a {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    width: 100%;
    text-align: left;
    color: rgba(255, 249, 242, 0.7);
    font-size: 0.8125rem;
    line-height: 1.4;
    word-break: normal;
    overflow-wrap: break-word;
    transition: color var(--animation-speed, 0.2s) ease;
  }

  footer .footer-links .menu__item a:hover {
    color: var(--brand-cream, #FFF9F2);
  }

  /* Trust and utilities sections on mobile */
  footer .utilities {
    text-wrap: wrap;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* ------------------------------------------------------------
   Hero Shop now button — readable hover (ruby bg, cream text).
   (Our Shop button hover is governed by its section-scoped rule
   above, which wins on specificity.)
   ------------------------------------------------------------ */
a.button-custom--button_hero_primary:hover {
  --button-background-color: var(--brand-ruby);
  --button-color: var(--brand-cream);
  --button-border-color: var(--brand-ruby);
}