/** Shopify CDN: Minification failed

Line 354:4 Expected identifier but found "."
Line 911:25 Expected ":"
Line 1804:0 Unexpected "}"
Line 1890:12 Unexpected "{"
Line 1890:21 Expected ":"
Line 1896:12 Unexpected "{"
Line 1896:21 Expected ":"
Line 1902:12 Unexpected "{"
Line 1902:21 Expected ":"
Line 1907:10 Unexpected "{"
... and 2 more hidden warnings

**/
/** 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 
𐦝 𐦝 𐦝 𐦝 𐦝  TABLE OF CONTENTS 𐦝 𐦝 𐦝 𐦝  
𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 𐦝 

1. TYPOGRAPHY
  A — Remove small text
  B — Remove Small Text
  C — Match paragraph fonts
  D — Italicised paragraph text = heading font
  E — Italicised headings wrapped in <em></em> = accent font
  F — Other items in accent font
  G — Italics <em> + Bold <strong> = matches button font styling
  H — Button fonts
  I — Hyperlinks
  J — Nav links
  K — Control letter spacing
  L — Remove default uppercase
  M — Bigger product titles on collection sections
  N — Tighten spacing of headings
  O — System pages
  P — Match 'Product Pairing' heading to h4
  Q — Product card text alignment
  R — Shopify Reviews Header match h1 sizing
  S — Cart totals fix
  T — Remove light opacity text


2. SPACING
  A — Override max page width
  B — Pages with natural width
  C — Remove left padding on “Image With Text” section on collection pages (desktop)
  D — Remove top padding on mobile product image slider

3. NAVIGATION
  A — Animate logo on scroll
  B — Transparent header
  C — Solid background on scroll
  D — Header border on all pages except home

4. FOOTER
  A — XL footer logo styling
  B — Hide label on currency picker

5. HOVER STATES
  A — Hide title underlines when products are hovered
  B — Hide hover styles on accordion
  C — Hyperlinks - change to accent colour on hover
  D — Buttons - change shape and colour on hover
  E — Hide double weight borders on field focus
  F — Hide background colour hovers

6. CONTROL BORDER + OPACITY STYLES
  A — Override root styling
  B — Single elements override

7. BORDERS
  A — Shopify Forms popup
  B — Secondary footer content border
  C — Header & announcement bar borders
  D — "Collapsible Content" section borders
  E — "Slideshow" section borders
  F — Hide cart popup top border
  G — Full page cart borders
  H — Add border to blog post template
  I — Predictive search modal
  J — Collection page filter bar 
  K — Borders on "Vertical Tabs ꩜" section
  L — Mobile popout menu drawer

8. COLLECTION PAGES
  A — Bug fix for background hover effect 
  B — Product badges

9. STYLISH PRODUCT TEMPLATE
  A — Remove gap 
  B — Hide 'peek' feature on slideshow
  C — Product badges
  D – Slider padding

10. BUTTONS
  A — Wider buttons
  B — Hide buttons without links added


11. VERTICAL TABS SECTION
  A — Second image shrink

12. VIDEO & IMAGE GRID SECTION
  A — Bigger images + matching text container width for 'Stacked' layout

13. SPLIT SLIDER
  A — Add padding between button and text

14. BLOG
  A — Full width feature image
  B — Hide blog title
  C — Remove top margin on "Multicolumn" section tag links
  D — Borders on "Multicolumn" section tag links
  E — Accent background and link on hover for tag links
  F — Hide borders on tables
  G — Increase spacing above and below blog title

15. MOBILE
  A — “Modular” Section 50% width background images
  B — Hide slider toggles on “Multicolumn” sections


16. MAGIC WORDS
  A — Formatting & Responsiveness
    	.twoColMobile
        .fullWidthText
    	.image-icon
    	.miniMobile
      	.fontLarge
    	.fontAccent
    	.darkText
    	.lightText
    	.imagePadding
    	.decorPadding
    	.decorMobile
        .decorFront
        .fullheight-bg
    	.autoMargins
    	.centerMargins
    	.quarterText
    	.halfText
    	.threeFourText
    	.justified
    	.centered
  B — Borders
    	.borders
    	.topBorder
  C — Misc
    	.hide-mobile
    	.sticky
        .flushButton
  D — Animations
    	.rotate360
    	.floating
  E — Image Shapes
    	.circleImage
    	.archImage
    	.wavyDiamond
    	.decoFrame
    	.abstractArch
    	.roundedStar
    	.roundedDiamond
        .twoCircles
        .threeCircles
**/



/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ TYPOGRAPHY ✿ ✿ ✿ ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/


/** Remove small text 🟒 🟒 🟒 **/
.caption-with-letter-spacing,
.caption,
.link,
.form__label,
 small,
table:not([class]),
label, 
.facets__summary,
.facets__heading,
.facet-filters__sort,
.facet-filters__label,
.product-count__text,
.spr-review-content-body,
.spr-review-header-byline {
  font-size: 100% !important;
}


/** Match paragraph fonts 🟒 🟒 🟒 **/
select,
.field__input,
.link {
  font-weight: var(--font-body-weight) !important;
  font-family: var(--font-body-family) !important;
}


/** Italicised paragraph text = Heading Font 🟒 🟒 🟒 **/
p em, p span em {
  font-family: var(--font-heading-family) !important;
  font-style: normal !important;
  line-height: 1.1rem !important;
}


/** Italicised headings wrapped in <em></em> = accent font 🟒 🟒 🟒 **/
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, 
.h0 em, .h1 em, .h2 em, .h3 em, .h4 em, .h5 em,
h1 span em, h2 span em, h3 span em, h4 span em, h5 span em, h6 span em, 
.h0 span em, .h1 span em, .h2 span em, .h3 span em, .h4 span em, .h5 span em {
    font-family: var(--font-accent-family);
    font-style: var(--font-accent-style);
    font-weight: var(--font-accent-weight);
    font-size: 110% !important;
}


/** Other items in accent font 🟒 🟒 🟒 **/
.multicolumn-card__info a.link,
.article-card__info,
.caption-with-letter-spacing,
.subtitle,
.footer__copyright,
.spr-review-header-title,
.swatch-product-wrapper {
    font-family: var(--font-accent-family);
    font-style: var(--font-accent-style);
    font-weight: var(--font-accent-weight);
    font-size: 120% !important;
}


/** Italics <em> + Bold <strong> = matches button font styling 🟒 🟒 🟒 **/
strong em,
em strong {
  font-family: var(--font-body-family) !important;
  font-weight: var(--font-body-weight) !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  font-size: 1.5rem !important; 
}


/** Button fonts 🟒 🟒 🟒 **/
a.button, 
.shopify-payment-button__button,
.shopify-challenge__button, 
.customer button,
.c-grid-text a,
.description a,
.c-vertical-tabs__content a,
.c-vertical-tabs__tab,
button._formSubmitButton_muap4_72,
p.product__text.subtitle,
.mega-menu__link--level-2,
.button--primary,
.button--secondary {
  font-family: var(--font-heading-family) !important;
  text-transform: uppercase !important;
  font-size: 1.5rem !important;
}


/** Hyperlinks 🟒 🟒 🟒 **/
.rte a,
.c-grid-text a,
.description a,
.c-vertical-tabs__content a,
a:not(.button) {
  color: rgb(var(--color-foreground)) !important;
  text-decoration: none !important;
}


/** Nav links 🟒 🟒 🟒 **/
.header__active-menu-item {
  text-decoration: none !important;
}

.header__inline-menu li span {
  text-transform: uppercase !important;  
}

/** Control letter spacing 🟒 🟒 🟒 **/
body, 
span {
  letter-spacing: 0rem !important;
}


/** Remove default uppercase 🟒 🟒 🟒 **/
.article-card__info,
.caption-with-letter-spacing {
  text-transform: none !important;
}


/** Bigger product titles on collection sections 🟒 🟒 🟒 **/
.card__heading {
  font-size: calc(var(--font-heading-scale) * 1.6rem) !important;
}


/** Tighten spacing of headings 🟒 🟒 🟒 **/
h2 {
  margin-block-start: 0.2em !important;
  margin-block-end: 0.2em !important;
}


/** System pages 🟒 🟒 🟒 **/
.password-modal__content-heading {
  font-family: var(--font-heading-family) !important;
}


/** Match 'Product Pairing' heading to h4 🟒 🟒 🟒 **/
.product-list-title {
    font-family: var(--font-heading-family) !important;
    font-style: var(--font-heading-style) !important;
    font-size: calc(var(--font-heading-scale) * 1.5rem) !important;
}


/** Product card text alignment 🟒 🟒 🟒 **/
.card__information {
  text-align: var(--product-card-text-alignment) !important;
}


/** Shopify Reviews Product Page 🟒 🟒 🟒 **/
.spr-header-title {
  font-size: calc(var(--font-heading-scale) * 4rem) !important;
  padding-bottom: 2rem !important;
}

.spr-review-header-byline {
  font-style: normal !important;
}

.spr-review-header-byline strong {
  font-weight: lighter !important;
}

@media only screen and (max-width: 480px) {
  .spr-summary {
    text-align: left !important;
  } 
  .spr-summary-caption {
    .padding-top: 20px !important;
  }
}


/** Cart totals fix 🟒 🟒 🟒 **/
.totals > h2,
.totals__subtotal-value {
  font-size: 2rem !important;
}


/** Remove light opacity text 🟒 🟒 🟒 **/
.predictive-search__heading {
  color: rgba(var(--color-foreground),1) !important;
}



/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ SPACING ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** Override max page width 🟒 🟒 🟒 **/
@media screen and (min-width: 750px) {
.page-width {
    max-width: 2500px !important;
}
}


/** Pages with natural width 🟒 🟒 🟒 **/
@media screen and (min-width: 750px) {
  .page-width--narrow {
    width: 100rem !important; 
    max-width: var(--page-width) !important;
  }
}

@media screen and (max-width: 750px) {
  .page-width--narrow {
      width: 100% !important;  
      max-width: var(--page-width) !important;
  }
}

/** Remove left padding on "Image With Text" section on collection pages (desktop) 🟒 🟒 🟒 **/
@media screen and (min-width: 990px) {
  .collection-hero .image-with-text__content {
    padding-left: 0rem !important;
  } 
}


/** Remove top padding on mobile product image slider 🟒 🟒 🟒 **/
@media screen and (max-width: 749px) {
  .slider.slider--mobile .slider__slide {
    padding-top: 0px !important;
 }
}


/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ NAVIGATION ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/


/** Animate logo on scroll 🟒 🟒 🟒 **/
body.template-index .header__heading-logo {
  max-width:100px !important;
  transition:1s;
}

body.scrolled.template-index .header__heading-logo {
  max-width:65px !important;
  transition:1s;
}


/** Transparent header 🟒 🟒 🟒 **/
body.template-index .header-wrapper {
  position:absolute;
  width:100%;
  background-color: transparent;
}


/** Solid background on scroll 🟒 🟒 🟒 **/
.scrolled .header-wrapper {
  transition:1s;
  background-color: rgb(var(--color-background), 1) !important;
  border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground), 1); 
}


/** Header border on all pages except home 🟒 🟒 🟒 **/
body:not(.template-index) .header-wrapper {
  border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground), 1) !important; 
}

/* === HOMEPAGE HEADER: transparent with white text/logo before scroll === */
body.template-index:not(.scrolled) .header-wrapper {
  position: absolute;
  width: 100%;
  background: transparent !important;
  border-bottom: none !important;
}

/* Make links and icons white on transparent header */
body.template-index:not(.scrolled) .header__menu-item,
body.template-index:not(.scrolled) .header__menu-item span,
body.template-index:not(.scrolled) .mega-menu__link,
body.template-index:not(.scrolled) .header__icon,
body.template-index:not(.scrolled) .header__icon .icon,
body.template-index:not(.scrolled) .header__heading-link .h2 {
  color: #fff !important;
  fill: #fff !important;   /* many theme icons inherit currentColor via fill */
  stroke: #fff !important; /* fallback for stroke-based icons */
}

/* Make active/hover states still look white on transparent */
body.template-index:not(.scrolled) .header__menu-item:hover span,
body.template-index:not(.scrolled) .header__active-menu-item {
  color: #fff !important;
  text-decoration-color: #fff !important;
}

/* Logo: turn it white before scroll (works for png/svg via filter) */
body.template-index:not(.scrolled) .header__heading-logo {
  filter: brightness(0) invert(1) contrast(100%);
}

/* When scrolled: fall back to your normal light bg + dark text settings */
body.template-index.scrolled .header-wrapper {
  transition: 0.3s background-color ease, 0.3s border-color ease;
  background-color: rgb(var(--color-background)) !important;
  border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground), 1) !important;
}

/* Remove logo filter after scroll so it’s “black” again */
body.template-index.scrolled .header__heading-logo {
  filter: none;
}

/* === HOMEPAGE ONLY: dropdown invert for transparent header === */
@media screen and (min-width: 990px) {
  /* dropdown + mega menu background */
  body.template-index:not(.scrolled) .header__submenu,
  body.template-index:not(.scrolled) .mega-menu__content {
    background-color: #171818 !important;
    color: #FAF9F5 !important;
    border: 1px solid !important;
  }

  /* dropdown links */
  body.template-index:not(.scrolled) .header__submenu a,
  body.template-index:not(.scrolled) .mega-menu__link {
    color: #FAF9F5 !important;
  }

  /* icons inside dropdown */
  body.template-index:not(.scrolled) .header__submenu svg,
  body.template-index:not(.scrolled) .mega-menu__content svg {
    fill: #fff !important;
    stroke: #fff !important;
  }
}


/* === CLEAN STATIC UNDERLINE STYLE FOR DROPDOWN LINKS === */

/* remove default hover background + underline globally */
.header__submenu a,
.mega-menu__link {
  text-decoration: none !important;
  border: none !important;
}

/* on hover: simple underline directly under text */
.header__submenu a:hover,
.mega-menu__link:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px; /* small gap below text */
  text-decoration-thickness: 1px;
}

/* === HOMEPAGE ONLY (transparent header) === */
body.template-index:not(.scrolled) .header__submenu a,
body.template-index:not(.scrolled) .mega-menu__link {
  color: #FAF9F5 !important; /* off-white text */
}

body.template-index:not(.scrolled) .header__submenu a:hover,
body.template-index:not(.scrolled) .mega-menu__link:hover {
  text-decoration-color: #FAF9F5 !important; /* off-white underline */
}

/* === SCROLLED HEADER + ALL OTHER PAGES === */
body.scrolled .header__submenu a,
body.scrolled .mega-menu__link,
body:not(.template-index) .header__submenu a,
body:not(.template-index) .mega-menu__link {
  color: #171818 !important; /* dark text */
}

body.scrolled .header__submenu a:hover,
body.scrolled .mega-menu__link:hover,
body:not(.template-index) .header__submenu a:hover,
body:not(.template-index) .mega-menu__link:hover {
  text-decoration-color: #171818 !important; /* dark underline */
}

/* optional: remove hover underline for mobile */
@media screen and (max-width: 749px) {
  .header__submenu a:hover,
  .mega-menu__link:hover {
    text-decoration: none !important;
  }
}



/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ FOOTER ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/
 
/** XL footer logo styling 🟒 🟒 🟒 **/
.logoXL img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
 
div.logoXL {
  display: flex;
}


/** Hide label on currency picker 🟒 🟒 🟒 **/
#FooterCountryLabel {
  display: none !important;
}


/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ HOVER STATES ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** Hide title underlines when products are hovered  🟒 🟒 🟒 **/
.full-unstyled-link:hover {
  text-decoration: none !important;
}


/** Hide hover styles on accordion  🟒 🟒 🟒 **/
.collapsible-content summary:hover {
  background: rgba(var(--color-foreground),0) !important;
}

.collapsible-content summary:hover .accordion__title {
  text-decoration: none !important;
}


/** Hyperlinks - change to accent colour on hover 🟒 🟒 🟒 **/

.c-vertical-tabs__tab-wrapper a:not(button):hover:hover {
  color: rgb(var(--color-foreground)) !important;
}

.rte a:hover,
.header__menu-item:hover span,
details[open]>.header__menu-item,
.mega-menu__link:hover, 
.mega-menu__link--active {
  text-decoration: none !important; 
}

/** Buttons - change shape and colour on hover 🟒 🟒 🟒 **/

a.button,
.button--primary,
.button--secondary,
.contact__button button,
#app-embed button,
.cart__checkout-button,
.shopify-payment-button__button, 
.shopify-challenge__button, 
.customer button, 
button._formSubmitButton_muap4_72 {
	border: var(--buttons-border-width) solid rgb(var(--color-foreground)) !important;
	transition: 0.3s all !important;
}

/** Buttons - change shape and colour on hover 🟒 🟒 🟒 **/

a.button,
.button--primary,
.button--secondary,
.contact__button button,
#app-embed button,
.cart__checkout-button,
.shopify-payment-button__button, 
.shopify-challenge__button, 
.customer button, 
button._formSubmitButton_muap4_72 {
	border: var(--buttons-border-width) solid rgb(var(--color-foreground)) !important;
	transition: 0.3s all !important;
}

/* === DEFAULT HOVER (red) === */
a.button:hover,
.button--primary:hover,
.button--secondary:hover,
#app-embed button:hover,
.shopify-challenge__button:hover,
.customer button:hover,
.contact__button button:hover,
.cart__checkout-button:hover,
.shopify-payment-button__button--unbranded:hover {
  background-color: #5A0010 !important; /* default red */
  color: #FAF9F5 !important;
  border-color: #171818 !important;
  border-radius: 2rem !important;
  transition: 0.3s all !important;
}

/* === COLOR VARIANTS (set via Custom Class on section) === */

/* Dark hover */
.btn-hover-dark a.button:hover,
.btn-hover-dark .button:hover,
.btn-hover-dark button:hover {
  background-color: #171818 !important;
}

/* Burgundy hover */
.btn-hover-burgundy a.button:hover,
.btn-hover-burgundy .button:hover,
.btn-hover-burgundy button:hover {
  background-color: #5A0010 !important;
}

/* Sage hover */
.btn-hover-sage a.button:hover,
.btn-hover-sage .button:hover,
.btn-hover-sage button:hover {
  background-color: #959A68 !important;
}


/* Remove pseudo hover effects globally */
a.button:after,
.button--primary:after,
.button--secondary:after,
#app-embed button:after,
.cart__checkout-button:after,
.shopify-challenge__button:after,
.customer button:after,
.contact__button button:after,
.shopify-payment-button__button--unbranded:after,
.button:before, 
.shopify-challenge__button:before, 
.customer button:before, 
.shopify-payment-button__button--unbranded:before, 
.shopify-payment-button [role=button]:before, 
.cart__dynamic-checkout-buttons [role=button]:before {
	display: none !important;
}

.button--secondary:hover:after {
  --border-offset: 0.65px !important;
}


/** Hide double weight borders on field focus  🟒 🟒 🟒 **/
.field:before, .customer .field:before,.field:after, .customer .field:after {
	display: none !important;
}

.customer .field input, .customer select, .field__input, .select__select {
	box-shadow: 0 0 0 !important;
    border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground), 1);
}


/** Hide mobile menu background colour hover  🟒 🟒 🟒 **/
.menu-drawer__menu-item--active, 
.menu-drawer__menu-item:focus, 
.menu-drawer__close-button:focus, 
.menu-drawer__menu-item:hover, 
.menu-drawer__close-button:hover {
    background-color: rgba(var(--color-foreground),0) !important;
}

/* === universal hover color utilities === */

/* burgundy hover */
.hover-burgundy:hover,
.hover-burgundy .c-grid-text:hover,
.hover-burgundy .c-video-section__item--text:hover {
  background-color: #5A0010 !important; /* burgundy */
  color: #FAF9F5 !important;
  transition: background-color .25s ease, color .25s ease;
}

/* black hover */
.hover-black:hover,
.hover-black .c-grid-text:hover,
.hover-black .c-video-section__item--text:hover {
  background-color: #111111 !important; /* black */
  color: #FAF9F5 !important;
  transition: background-color .25s ease, color .25s ease;
}

/* dark sage hover */
.hover-dark-sage:hover,
.hover-dark-sage .c-grid-text:hover,
.hover-dark-sage .c-video-section__item--text:hover {
  background-color: #424d2a !important; /* dark sage */
  color: #FAF9F5 !important;
  transition: background-color .25s ease, color .25s ease;
}




/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ CONTROL BORDER + OPACITY STYLES ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

:root {
  --media-border-opacity: 1;
  --product-card-border-opacity: 1;
  --collection-card-border-opacity: 1;
  --blog-card-border-opacity: 1;
  --border-opacity: 1;
  --popup-border-opacity: 1;
  --drawer-border-opacity: 1;
  --text-boxes-border-opacity: 1;
  --container-shadow: none;
  --container-border-radius: 0px;
  --button-background-color-hovered-modifier: opacity (100%);
}


.light,
.quantity__input,
.facets__heading {
  opacity: 1 !important;
}



/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ BORDERS ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** Shopify Forms popup 🟒 🟒 🟒 **/
#app-embed input,
section[data-testid="form-container"] {
	box-shadow: none !important;
	border: var(--inputs-border-width) solid rgba(var(--color-foreground),1) !important;
    border-radius: 0px !important;
}

/** Shopify Forms popup 🟒 🟒 🟒 **/
.spr-review {
  border-top: var(--inputs-border-width) solid rgba(var(--color-foreground),1) !important;
}

/** Footer borders 🟒 🟒 🟒 **/
.footer {
    border-top: var(--inputs-border-width) solid rgba(var(--color-foreground)) !important;
}

.footer__content-bottom {
    border-top: 0rem solid rgba(var(--color-foreground)) !important;
}


/** Header & announcement bar borders 🟒 🟒 🟒 **/
.header-wrapper--border-bottom,
.announcement-bar {
    border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground), 1) !important; 
}


/** "Collapsible Content" section borders 🟒 🟒 🟒 **/
.accordion {
	border-top: var(--inputs-border-width) solid rgba(var(--color-foreground),0) !important;
	border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground),1) !important;
}


/** "Slideshow" section borders 🟒 🟒 🟒 **/
.slideshow__autoplay.slider-button {
  border-left: var(--inputs-border-width) solid rgba(var(--color-foreground),1) !important;
}

.slideshow__controls {
  border: var(--inputs-border-width) solid rgba(var(--color-foreground),1)  !important;
}


/** Hide cart popup top border 🟒 🟒 🟒 **/
@media screen and (min-width: 750px) {
  .header-wrapper:not(.header-wrapper--border-bottom)+cart-notification .cart-notification {
    border-top-width: 0px !important;
  } 
}


/** Cart borders 🟒 🟒 🟒 **/
.cart-items th,
.cart__items,
.drawer__footer > details {
    border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground),1) !important;
}

.drawer__footer {
    border-top: var(--inputs-border-width) solid rgba(var(--color-foreground),1) !important;
}

.drawer__inner {
    border-left: var(--inputs-border-width) solid rgba(var(--color-foreground),1) !important;
    border-right: var(--inputs-border-width) solid transparent !important;
    border-top: var(--inputs-border-width) solid transparent !important;
    border-bottom: var(--inputs-border-width) solid transparent !important;
}


/** Add border to blog post template 🟒 🟒 🟒 **/
.article-template__back:last-child {
    border-top: var(--inputs-border-width) solid rgba(var(--color-foreground),1);
    padding-top: 3.2rem;
}


/** Predictive search modal 🟒 🟒 🟒 **/
.predictive-search__heading,
.predictive-search__list-item:nth-last-child(2) {
    border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground),1) !important;
}


/** Collection page filter bar 🟒 🟒 🟒 **/
.facets__header {
    border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground),1) !important;
}


/** Borders on "Vertical Tabs ꩜" section 🟒 🟒 🟒 **/
@media screen and (min-width: 750px) {
  .vertical-border .c-vertical-tabs__tab {
    border-right: var(--inputs-border-width) solid currentColor !important;
    box-sizing-border-box;
  }

  .vertical-border .c-vertical-tabs__item.is-active + .c-vertical-tabs__item .c-vertical-tabs__tab {
    border-left: var(--inputs-border-width) solid currentColor !important;
  }
}


/** Mobile popout menu drawer 🟒 🟒 🟒 **/
.menu-drawer {
    border-top: var(--inputs-border-width) solid currentColor !important;
}



/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ COLLECTION PAGES ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** Bug fix for background hover effect 🟒 🟒 🟒 **/
.grid__item .card__media {
    width: auto;
    height: auto;
    inset: 0;
}

/** Product Badges 🟒 🟒 🟒 **/
.grid__item .custom-badge--wrapper,
.card__inner .custom-badge--wrapper {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;    
}

.grid__item .custom-badge--wrapper .custom-badge,
.card__inner .custom-badge--wrapper .custom-badge {
  background-color: var(--gradient-base-accent-2)!important;
  position: relative;
  text-transform: uppercase !important;
  font-size: calc(var(--font-body-scale) * 1.5rem) !important;
  border: var(--buttons-border-width) solid !important;
  padding: 0.25em 2em!important;
  margin: 0.5em !important;
}

@media screen and (max-width:749px) {
  .grid__item .custom-badge--wrapper .custom-badge,
  .card__inner .custom-badge--wrapper .custom-badge {
    font-size: calc(var(--font-body-scale) * 1rem) !important;
    padding: 0.15em 1em!important;
    margin: 0.25em !important;
  }
}

.grid__item .card__inner {
  isolation:isolate;
}

/** Bug fix for swatch on collage section 🟒 🟒 🟒 **/
div.card__inner.color-background-1.gradient.ratio > div.card__media {
    width:100% !important;
}


/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ STYLISH PRODUCT TEMPLATE
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** Remove gap 🟒 🟒 🟒 **/
.section-stylish--product {
  padding-bottom: 0px !important;
}

/** Hide 'peek' feature on mobile 🟒 🟒 🟒 **/
@media screen and (max-width:749px) {
.grid--peek.slider .grid__item:first-of-type {
    margin-left: 0 !important;
}

.product__media-list .product__media-item {
    width: 100% !important;
}
}

/** Product badges 🟒 🟒 🟒 **/
.product .custom-badge--wrapper {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
}

.product .product__media-wrapper {
    position: relative;
    isolation: isolate;
}


/** Mobile background image fix 🟒 🟒 🟒 **/
@media screen and (max-width:749px) {
  .product__media {
   background-attachment:scroll !important;
  }
}


/** Slider padding 🟒 🟒 🟒 **/

.product__media-list {
  --grid-desktop-horizontal-spacing: 0px !important;
  --grid-mobile-horizontal-spacing: 0px !important;
}

.product__media-list.slider {
    scroll-padding-left: 0rem !important;
}


/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ BUTTONS ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** Cart count bubble 🟒 🟒 🟒 **/
.cart-count-bubble {
    background-color: rgb(var(--color-button-text)) !important;
    color: rgb(var(--color-button)) !important;
}


/** Wider buttons 🟒 🟒 🟒 **/
.button--primary,
.button--secondary {
  min-width: 22rem !important;
}


/** Hide buttons without links added 🟒 🟒 🟒 **/
.button[aria-disabled="true"] {
  display: none !important;
}



/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ VERTICAL TABS SECTION ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** Second image shrink 🟒 🟒 🟒 **/
.c-vertical-tabs__secondmedia img {
  object-fit: contain !important;
}


/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ VIDEO & IMAGE GRID ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** Bigger images + matching text container width for 'Stacked' layout 🟒 🟒 🟒 **/

.c-video-section__item.c-video-section__item--image.stacked .c-grid-text,
.c-video-section__item--image.stacked > .item-heading,
.c-image-wrapper {
    max-width: 75% !important;
    width: 75% !important;
}



/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ SPLIT SLIDER ✿ ✿ ✿ ✿
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** Add padding between button and text 🟒 🟒 🟒 **/
.c-slider__button-container {
  padding-top: 1em !important;
}


/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ BLOG ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ **/

/** Full width feature image 🟒 🟒 🟒 **/
.article-template__hero-container {
    max-width: 100% !important;
}

/** Hide blog title 🟒 🟒 🟒 **/
.main-blog .title--primary {
  display: none !important;
}

/** Remove top margin on "Multicolumn" section tag links 🟒 🟒 🟒 **/
.template-blog .multicolumn-card__info .link {
  margin-top: 0px !important;
}

/** Borders on "Multicolumn" section tag links 🟒 🟒 🟒 **/
@media screen and (min-width: 750px) {
  .template-blog .background-none .multicolumn-list .multicolumn-card__info, 
  .template-blog .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
    padding: 1rem !important;
    border: var(--buttons-border-width) solid rgba(var(--color-foreground),1);
  }
}

/** Accent background and link on hover for tag links 🟒 🟒 🟒 **/
@media screen and (min-width: 750px) {
  .template-blog .multicolumn-list .multicolumn-card__info:hover {
    background: var(--gradient-base-accent-2) !important;
  }
  .multicolumn-card__info a.link:hover {
    color: rgb(var(--color-foreground)) !important;
  }
}

/** Hide borders on tables 🟒 🟒 🟒 **/
.article-template table:not([class]),
table:not([class]) td, table:not([class]) th {
  box-shadow: 0 0 0 .1rem rgba(var(--color-foreground),0) !important;
  border: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground),0) !important;
}


/** Increase spacing above and below blog title 🟒 🟒 🟒 **/
@media screen and (min-width: 750px) {
  .blog-articles .card__information {
    padding-bottom: 5rem !important;
    padding-top: 5rem !important;
  }
}


/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ MOBILE ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

@media screen and (max-width: 749px) {

  /** "Modular" Section 50% Width Background Images 🟒 🟒 🟒 **/
  .background-split--right .section-background {
    width: 100% !important;
    left: 0 !important;    
  }

    .background-split--left .section-background {
    width: 100% !important;
    right: 0 !important;    
  }

  /** Hide slider toggles on "Multicolumn" sections 🟒 🟒 🟒 **/
  .multicolumn .slider-buttons {
      display: none !important;
  } 
}



/** ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ MAGIC WORDS ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ 
✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿  ✿ ✿ ✿ ✿ **/

/** ☻ ☻ ☻ ☻ FORMATTING & RESPONSIVENESS ☻ ☻ ☻ ☻ **/
/** ☻ ☻ ☻ ☻ FORMATTING & RESPONSIVENESS ☻ ☻ ☻ ☻ **/
/** ☻ ☻ ☻ ☻ FORMATTING & RESPONSIVENESS ☻ ☻ ☻ ☻ **/

/** Use class "twoColMobile" to trigger 2 columns on "Modular" section (mobile) 🟒 🟒 🟒 **/
@media screen and (max-width: 749px) {
  .twoColMobile .ss-col-12 > .ss-grid__item {
    flex: 1 !important;
    flex-basis: 40% !important;
  }
  .twoColMobile .ss-col-12 {
    display: flex;
    flex-wrap: wrap;
  }
}
/** 🟒 Two-column Modular Section (mobile) — add spacing between image blocks 🟒 **/
@media screen and (max-width: 749px) {
  .twoColMobile .ss-col-12 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px !important; /* adds even spacing between the flex items */
  }

  /* optional: remove double padding from inside the tiles so spacing feels even */
  .twoColMobile .ss-col-12 > .ss-grid__item {
    flex: 1 1 48% !important; /* two columns */
    margin: 0 !important;     /* rely on gap instead of margins */
    padding: 0 !important;
  }
}

/* === Decor size controls (mobile-only) === */
@media (max-width: 749px) {
  .decorMobile .ss-inline-image,
  .decorMobile.ss-inline--inline_video {
    width: var(--decor-mw, 35vw) !important;
  }

  .decorW-40 { --decor-mw: 40vw; }
  .decorW-50 { --decor-mw: 50vw; }
  .decorW-60 { --decor-mw: 60vw; }
  .decorW-70 { --decor-mw: 70vw; }
  .decorW-80 { --decor-mw: 80vw; }
  .decorW-90 { --decor-mw: 90vw; }
}


/* Make a Modular block full width on mobile when its Custom Class = fullWidthText */
@media screen and (max-width: 749px) {
  /* the block wrapper */
  .fullWidthText.ss-grid__item {
    width: 100% !important;
    flex: 0 0 100% !important;
    display: block !important;
    padding-left: 0 !important;   /* remove side padding if you want true edge-to-edge */
    padding-right: 0 !important;
  }

  /* the text container inside */
  .fullWidthText .ss-text__content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
}
/* Enable full-width text for Video & Image Grid section too */
@media screen and (max-width: 749px) {
  .fullWidthText.c-video-section__item--text,
  .fullWidthText .c-video-section__text {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/** Use class "image-icon" to make images smaller 🟒 🟒 🟒 **/
@media screen and (max-width:749px) {
  .image-icon {
    max-width: 50%;
    width: 50%;
    height: auto;
    margin: auto;
  }
}

@media screen and (min-width:749px) {
  .image-icon {
    max-width: 33%;
    width: 33%;
    height: auto;
    margin: auto;
  }
}

/** Use class "miniMobile" for smaller images on mobile only 🟒 🟒 🟒 **/
@media screen and (max-width:749px) {
  .miniMobile {
    max-width: 50%;
    width: 50%;
    height: auto;
    margin: auto;
    
  }
}


/** Use class "fontLarge" to turn paragrath text to heading size 🟒 🟒 🟒 **/
.fontLarge,
.fontLarge p,
.fontLarge .rte,
.fontLarge span {
  font-size: calc(var(--font-heading-scale) * 5.2rem) !important;
}

/** Use class "fontAccent" to turn paragraph text into your accent font 🟒 🟒 🟒 **/
.fontAccent p,
.fontAccent .rte,
.fontAccent,
.fontAccent span {
    font-family: var(--font-accent-family);
    font-style: var(--font-accent-style);
    font-weight: var(--font-accent-weight);
}

/** Use class "darkText" to change text to your lightest pallette colour 🟒 🟒 🟒 **/
.darkText p,
.darkText span,
.darkText .h1,
.darkText h1, 
.darkText h2, 
.darkText h3 {
  color: rgba(var(--color-foreground)) !important;
}

/** Use class "lightText" to change text to your lightest pallette colour 🟒 🟒 🟒 **/
.lightText p,
.lightText span,
.lightText .h1,
.lightText h1, .lightText h2, .lightText h3 {
  color: rgba(var(--color-background)) !important;
}


/** Use class "imagePadding" to add a little padding to images 🟒 🟒 🟒 **/
.imagePadding img {
  padding: 2rem !important;
}


/** Use class "decorPadding" to add padding to decord images ("Modular" Section) 🟒 🟒 🟒 **/
.decorPadding .ss-inline-image {
  margin: 10px !important;
}

/** Use class "decorMobile" to show decor images ("Modular" Section) on mobile 🟒 🟒 🟒 **/
@media screen and (max-width: 750px) {
  .ss-decor.decorMobile {
    display:block;
  }
}


/** Use class "decorFront" to bring the position of the Decor image ("Modular" Section) to the front 🟒 🟒 🟒 **/
.decorFront.decor-position--bottom-right,
.decorFront.decor-position--top-left,
.decorFront.decor-position--bottom-left,
.decorFront.decor-position--bottom-right {
   z-index:99 !important;
}


/** Use class "fullheight-bg" to show the background image ("Modular" Section) on mobile 🟒 🟒 🟒 **/
@media screen and (max-width:749px) {
  section.fullheight-bg .section-background {
   position:absolute !important;
  }
}



/** 🟒 🟒 🟒 CONTROL MARGINS 🟒 🟒 🟒 **/

  /** Use class "autoMargins" for auto aligned margins 🟒 🟒 🟒 **/
  .autoMargins p,
  .autoMargins .rte,
  .autoMargins {
    margin: auto;
  }

  /** Use class "centerMargins" for center aligned margins 🟒 🟒 🟒 **/
  .centerMargins p,
  .centerMargins .rte,
  .centerMargins {
    margin-left: auto;
    margin-right: auto;
  }



/** 🟒 🟒 🟒 CONTROL TEXT WIDTHS ON DESKTOP 🟒 🟒 🟒 **/
@media screen and (min-width: 750px) {
  
  /** Use class "quarterText" for 25% width text 🟒 🟒 🟒 **/
  .quarterText,
  .quarterText .rte,
  .quarterText p {
      max-width: 25%;
  }


  /**  Use class "halfText" for 50% width text 🟒 🟒 🟒 **/
  .halfText,
  .halfText .rte,
  .halfText p {
      max-width: 50%;
  }

  /**  Use class "threeFourText" for 75% width text 🟒 🟒 🟒 **/
  .threeFourText,
  .threeFourText .rte,
  .threeFourText p {
      max-width: 75%;
  }
}


/** 🟒 🟒 🟒 CONTROL TEXT ALIGNMENT 🟒 🟒 🟒 **/
  /** Use class "justified" to justify align text 🟒 🟒 🟒 **/
  .justified p,
  .justfied span {
     text-align: justify !important;
     text-align-last: justify !important;
  }

  /** Use class "centered" to center align text 🟒 🟒 🟒 **/
  .centred p,
  .centred span,
  .centered p,
  .centered span,
  .centered .c-slider__content-wrapper,
  .centred .c-slider__content-wrapper,
  .centred .c-grid-text,
  .centered .c-grid-text {
     text-align: center !important;
  }



/** ☻ ☻ ☻ ☻  BORDERS ☻ ☻ ☻ ☻  **/
/** ☻ ☻ ☻ ☻  BORDERS ☻ ☻ ☻ ☻  **/
/** ☻ ☻ ☻ ☻  BORDERS ☻ ☻ ☻ ☻  **/

/** Use class "borders" to apply a bottom border to the section (use this the most) 🟒 🟒 🟒 **/
section.borders,
div.borders,
article.borders {
  border-bottom: var(--inputs-border-width) solid rgba(var(--color-foreground), 1) !important;
}


/** Use class "topBorder" to apply a top border to the section (used rarely) 🟒 🟒 🟒 **/
section.topBorder,
div.topBorder,
article.topBorder {
  border-top: var(--inputs-border-width) solid rgba(var(--color-foreground), 1) !important;
}



/** ☻ ☻ ☻ ☻  MISC ☻ ☻ ☻ ☻  **/
/** ☻ ☻ ☻ ☻  MISC ☻ ☻ ☻ ☻  **/
/** ☻ ☻ ☻ ☻  MISC ☻ ☻ ☻ ☻  **/

/** Use the class ".hide-mobile" to hide element on mobile 🟒 🟒 🟒 **/
@media screen and (max-width:749px) {
  .hide-mobile {
   display:none !important; 
  }
}


/** Use the class ".sticky" to make element stick 🟒 🟒 🟒 **/
.sticky {
  position:sticky !important;
  top:0;
}


/** Use the class "flushButton" to remove the button padding on the Marquee Slider 🟒 🟒 🟒 **/
.flushButton .c-slider__button-container {
   padding-top: 0 !important;
}



/** ☻ ☻ ☻ ☻  ANIMATIONS ☻ ☻ ☻ ☻  **/
/** ☻ ☻ ☻ ☻  ANIMATIONS ☻ ☻ ☻ ☻  **/
/** ☻ ☻ ☻ ☻  ANIMATIONS ☻ ☻ ☻ ☻  **/

/** Use class "rotate360" to turn element 360 infinitely **/
.rotate360 img {
  animation: turn 10s linear infinite;
}

@keyframes turn {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
} 


/** Use class "floating" to make element levitate **/
.floating img {
  padding: 3vh;
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
   		-webkit-transition: all ease-in-out 200ms;
    	-moz-transition: all ease-in-out 200ms;
    	-ms-transition: all ease-in-out 200ms;
    	-o-transition: all ease-in-out 200ms;
  transition: all ease-in-out 200ms;
}

@keyframes floating {
  from { transform: translate(0,  0px); }
  50%  { transform: translate(0, 15px); }
  to   { transform: translate(0, 0px); }  
}



/** ☻ ☻ ☻ ☻  IMAGE SHAPES ☻ ☻ ☻ ☻  **/
/** ☻ ☻ ☻ ☻  IMAGE SHAPES ☻ ☻ ☻ ☻  **/
/** ☻ ☻ ☻ ☻  IMAGE SHAPES ☻ ☻ ☻ ☻  **/


/** Use class "circleImage" to turn it into a circle or oval 🟒 🟒 🟒 **/
.circleImage img {
  border-radius: 50% !important;
}


/** Use class "archImage" to curve top corners 🟒 🟒 🟒 **/
.archImage img {
  border-radius: 500px 500px 0 0 !important;
}


/** Use class "wavyDiamond" to apply this shape **/
.wavyDiamond img {
 -webkit-mask-image:url(https://cdn.shopify.com/s/files/1/0698/2208/7441/files/Abstract-Frame-2.svg?v=1673227734);
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
}


/** Use class "decoFrame" to apply this shape **/
.decoFrame img {
 -webkit-mask-image:url(https://cdn.shopify.com/s/files/1/0698/2208/7441/files/Abstract-Frame-1.svg?v=1673228030);
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
}

/** Use class "abstractArch" to apply this shape **/
.abstractArch img {
 -webkit-mask-image:url(https://cdn.shopify.com/s/files/1/0698/2208/7441/files/Abstract-Arch.svg?v=1673228030);
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
}

/** Use class "roundedStar" to apply this shape **/
.roundedStar img {
  -webkit-mask-image:url(https://cdn.shopify.com/s/files/1/0698/2208/7441/files/Rounded-Star.svg?v=1673228030);
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
}

/** Use class "roundedDiamond" to apply this shape **/
.roundedDiamond img {
  -webkit-mask-image:url(https://cdn.shopify.com/s/files/1/0698/2208/7441/files/Rounded-Diamond.svg?v=1673228030);
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
}


/** Use class "twoCircles" to apply this shape **/
.twoCircles img {
  -webkit-mask-image:url(https://cdn.shopify.com/s/files/1/0698/2208/7441/files/2Circles.svg?v=1674604310);
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
}

/** Use class "threeCircles" to apply this shape **/
.threeCircles img {
  -webkit-mask-image:url(https://cdn.shopify.com/s/files/1/0698/2208/7441/files/3Circles.svg?v=1674604310);
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
}



/* === Overlapping heading + image-only overlay === */
.padded-video-section .c-video-section__item--image.stacked {
  position: relative;
  overflow: visible; /* keep normal layout */
}

/* Target just the image wrapper for the dark overlay */
.padded-video-section .c-video-section__item--image.stacked .c-image-wrapper {
  position: relative;
}

.padded-video-section .c-video-section__item--image.stacked .c-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}


/* ===========================
   Custom text color: Off-white
   =========================== */

.text-cream,
.text-cream h1,
.text-cream h2,
.text-cream h3,
.text-cream h4,
.text-cream h5,
.text-cream h6,
h1.text-cream,
h2.text-cream,
h3.text-cream,
h4.text-cream,
h5.text-cream,
h6.text-cream {
  color: #FAF9F5 !important;
}

/* ===========================
   Custom background color: Deep burgundy
   =========================== */

.bg-burgundy {
  background-color: #4A001A !important;
}

/* Default link hover already exists. These are section-specific overrides */
/* sage green hover */
.hover-sage a:hover,
.hover-sage .rte a:hover,
.hover-sage p a:hover {
  color: #959A68 !important;
}

/* tan  hover */
.hover-tan a:hover,
.hover-tan .rte a:hover,
.hover-tan p a:hover {
  color: #d3c6b6 !important;
}

/* === Disable hover color change on text === */
.nohover a,
.nohover .rte a,
.nohover p a {
  pointer-events: auto; /* still clickable */
  transition: none !important;
}

.nohover a:hover,
.nohover .rte a:hover,
.nohover p a:hover {
  color: inherit !important; /* keeps the same color */
  text-decoration: none !important;
  background: none !important;
}


/* limit hover-black activation to text blocks only */
.hover-black .c-video-section__item--text:hover {
  background-color: #111111 !important;
  color: #FAF9F5 !important;
  transition: background-color .25s ease, color .25s ease;
}

/* flip text + links inside text block on hover */
.hover-black .c-video-section__item--text:hover .c-video-section__text,
.hover-black .c-video-section__item--text:hover h1,
.hover-black .c-video-section__item--text:hover h2,
.hover-black .c-video-section__item--text:hover h3,
.hover-black .c-video-section__item--text:hover p,
.hover-black .c-video-section__item--text:hover span,
.hover-black .c-video-section__item--text:hover a:not(.button),
.hover-black .c-video-section__item--text:hover svg {
  color: #FAF9F5 !important;
  fill: #FAF9F5 !important;
  stroke: #FAF9F5 !important;
}

/* limit hover-burgundy activation to text blocks only */
.hover-burgundy .c-video-section__item--text:hover {
  background-color: #5A0010 !important; /* deep burgundy */
  color: #FAF9F5 !important;
  transition: background-color .25s ease, color .25s ease;
}

/* flip text + links inside text block on hover */
.hover-burgundy .c-video-section__item--text:hover .c-video-section__text,
.hover-burgundy .c-video-section__item--text:hover h1,
.hover-burgundy .c-video-section__item--text:hover h2,
.hover-burgundy .c-video-section__item--text:hover h3,
.hover-burgundy .c-video-section__item--text:hover p,
.hover-burgundy .c-video-section__item--text:hover span,
.hover-burgundy .c-video-section__item--text:hover a:not(.button),
.hover-burgundy .c-video-section__item--text:hover svg {
  color: #FAF9F5 !important;
  fill: #FAF9F5 !important;
  stroke: #FAF9F5 !important;
}

/* VIDEO & IMAGE GRID — control vertical spacing in text block */
.c-video-section__item--text .c-video-section__text > * {
  margin: 0 !important;                /* kill random defaults */
}

.c-video-section__item--text .c-video-section__text > * + * {
  margin-top: 1.2rem !important;       /* base gap between siblings */
}

/* Fine-tune common elements */
.c-video-section__item--text .c-video-section__text h1,
.c-video-section__item--text .c-video-section__text .h1 { margin-top: 0 !important; margin-bottom: 0.8rem !important; }

.c-video-section__item--text .c-video-section__text h2,
.c-video-section__item--text .c-video-section__text .h2 { margin-top: 0 !important; margin-bottom: 0.6rem !important; }

.c-video-section__item--text .c-video-section__text p { margin-top: 0.6rem !important; }

.c-video-section__item--text .c-video-section__text .button,
.c-video-section__item--text .c-video-section__text a.button { margin-top: 1.8rem !important; }

/* Neutralize the big link-with-icon gap inside this section only */
.c-video-section__item--text .c-video-section__text .link-with-icon {
  margin-bottom: 0 !important;
}

/* 🟣 Adjust button text size on mobile so it doesn't wrap */
@media screen and (max-width: 749px) {
  .button,
  .button--primary,
  .button--secondary {
    font-size: 1.2rem !important; /* smaller size for mobile */
    white-space: nowrap !important; /* keeps text on one line */
  }
}
/* 🪄 For sections using class "stack-mobile" — image on top, text below on mobile */
@media screen and (max-width: 749px) {
  .stack-mobile .c-video-section__blocks--grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .stack-mobile .c-video-section__item {
    width: 100% !important;
    order: initial !important;
  }

  .stack-mobile .c-video-section__item--image {
    order: 1 !important;
  }

  .stack-mobile .c-video-section__item--text {
    order: 2 !important;
  }
}
/* ✿ Add top/bottom padding to text blocks on mobile when using "mobileTextPad" */
@media screen and (max-width: 749px) {
  .mobileTextPad .c-video-section__item--text {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/** Use class "hideSpacerMobile" to hide modular spacers on mobile 🟒 🟒 🟒 **/
@media screen and (max-width: 749px) {
  .hideSpacerMobile .ss-spacer,
  .hideSpacerMobile .ss-space,
  .hideSpacerMobile .modular-spacer,
  .hideSpacerMobile .section-spacer {
    display: none !important;
  }
}

/** Use class "hideImageMobile" to hide image blocks on mobile in Video & Image Grid 🟒 🟒 🟒 **/
@media screen and (max-width: 749px) {
  .hideImageMobile .c-video-section__item--image {
    display: none !important;
  }
}

/** Force square image shape on mobile 🟒 🟒 🟒 **/
@media screen and (max-width:749px) {
  .squareImageMobile img.c-video-section__media,
  .vertical-tabs img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}


  /* if your stacked layout uses .c-image-wrapper, ensure it behaves as a square too */
  .squareImageMobile .c-image-wrapper {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    width: 100% !important;
  }
}

/** Use class "bgTallMobile" to make Modular background images taller on mobile 🟒 🟒 🟒 **/
@media screen and (max-width: 749px) {
  .bgTallMobile .section-background {
    height: 40vh !important;         /* increase height — tweak as needed */
    min-height: 100px !important;    /* fallback for short screens */
    width: 100% !important;
    object-fit: cover !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* if your background uses an <img> tag inside */
  .bgTallMobile .section-background img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}


/* ===========================
   BANNER: Per-section controls
   Add these classes to the Banner's "Custom CSS class" field
   =========================== */

/* 1) TEXT COLOR (scoped to banner content) */
.banner-text-cream .banner__box,
.banner-text-cream .banner__box *:not(.button) { color: #FAF9F5 !important; }

.banner-text-dark .banner__box,
.banner-text-dark .banner__box *:not(.button) { color: #171818 !important; }

/* Make buttons readable when using light text */
.banner-text-cream .button,
.banner-text-cream .button--primary,
.banner-text-cream .button--secondary {
  color: #FAF9F5 !important;
  border-color: #FAF9F5 !important;
}

/* 2) BACKGROUND COLOR (for image-less banners or behind image) */
.banner-bg-burgundy { background-color: #4A001A !important; }
.banner-bg-black   { background-color: #111111 !important; }
.banner-bg-cream   { background-color: #FAF9F5 !important; }

/* 3) IMAGE OVERLAY (when the banner has a background image) */
.banner-overlay-dark-20 .banner,
.banner-overlay-dark-40 .banner,
.banner-overlay-dark-60 .banner { position: relative; }

.banner-overlay-dark-20 .banner::before,
.banner-overlay-dark-40 .banner::before,
.banner-overlay-dark-60 .banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.20;   /* default; overridden below */
  pointer-events: none;
}

/* tweak strengths */
.banner-overlay-dark-40 .banner::before { opacity: 0.40; }
.banner-overlay-dark-60 .banner::before { opacity: 0.60; }

/* If your theme uses .banner__media for the image stacking, keep overlay on top */
.banner-overlay-dark-20 .banner__media,
.banner-overlay-dark-40 .banner__media,
.banner-overlay-dark-60 .banner__media { position: relative; z-index: 0; }
.banner-overlay-dark-20 .banner::before,
.banner-overlay-dark-40 .banner::before,
.banner-overlay-dark-60 .banner::before { z-index: 1; }

/* 4) TIGHTEN STACKING (heading closer to paragraph/buttons inside banner only) */
.banner-tight .banner__box > * { margin: 0 !important; }
.banner-tight .banner__box > * + * { margin-top: .6rem !important; }  /* adjust to taste */

/* 5) MOBILE: make the banner background image taller if needed */
@media (max-width: 749px) {
  .banner-tall-mobile .banner { min-height: 36vh !important; }
  .banner-tall-mobile .banner__media img { object-fit: cover !important; }
}

@media (min-width:750px){
  #section-{{ section.id }} .c-vertical-tabs__tab-wrapper {
    box-shadow: inset -1px 0 0 #171818;
  }

@media (min-width:750px){
  /* Default border between tabs */
  #section-{{ section.id }} .c-vertical-tabs__tab-wrapper {
    box-shadow: inset -1px 0 0 #171818;
    background: #fff;
  }

  /* Active tab — same border thickness, just darker or offset */
  #section-{{ section.id }} .c-vertical-tabs__item.is-active .c-vertical-tabs__tab-wrapper {
    box-shadow: inset -1px 0 0 #171818, inset 0 0 0 1px #171818; /* subtle full-outline look */
    z-index: 2; /* bring it above its neighbors */
  }
}
#section-{{ section.id }} .c-vertical-tabs__item.is-active .c-vertical-tabs__tab-wrapper {
  box-shadow: inset -1px 0 0 #171818;
  background-color: #f8f8f8;
}

/* === Utility: Hide on desktop === */
@media screen and (min-width: 750px) {
  .hideDesktop {
    display: none !important;
  }
}

.header__icon--account,
.header__icon-item .account-link,
a.header__icon--account,
.header__icon .account, 
a[href*="/account"] {
  display: none !important;
}

@media (max-width: 749px) {
  .fc-desc .collection__description {
    text-align: center !important;
    margin: 0 auto !important;
  }
}

/* Cart drawer table header spacing fix */
.cart-drawer .cart-items thead th {
  line-height: 1.3 !important; /* more breathing room */
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
  font-size: 1.8rem !important; /* slightly smaller so it doesn't clip */
}

/* Ensure sticky row doesn't cover the first product */
.cart-drawer .cart-items thead {
  top: 0 !important;
  z-index: 3;
  background: rgb(var(--color-background)) !important;
}

/* Make image banner full screen height */
.full-height-banner {
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
}

/* Make sure the image covers + stays centered */
.full-height-banner .banner__media,
.full-height-banner .banner__media img,
.full-height-banner .banner__media-background {
  height: 100% !important;
  min-height: 100vh !important;
  object-fit: cover !important;
  object-position: center !important;
}