/** Shopify CDN: Minification failed

Line 648:0 Unexpected "<"
Line 672:0 Unexpected "<"

**/
/* STUDIYO global tweaks (loaded site-wide via header-tools.liquid) */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Libre+Caslon+Text:wght@400;700&display=swap');

/* Cart count badge: dark background, legible sans-serif number. */
.item-count,
.item-count[data-cart-mini-count] {
  background: #242021 !important;
  color: #ffffff !important;
  font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

/* Hide the Judge.me review badge while there are no reviews yet. */
.jdgm-prev-badge[data-number-of-reviews="0"] {
  display: none !important;
}

/* Remove the "Mark as a Gift" widget from product pages. */
.template-product .effectiveAppsWiggle {
  display: none !important;
}

/* ===========================================================
   Customer Reviews (Judge.me) - cleaner, centered layout.
   DESKTOP ONLY - mobile keeps the theme's original carousel.
   =========================================================== */
@media (min-width: 769px) {
.template-product .jdgm-rev-widg {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.template-product .jdgm-rev-widg__reviews { width: 100% !important; }
.template-product .jdgm-rev-carousel.jdgm-glider {
  overflow: visible !important;
}
.template-product .jdgm-rev-carousel.jdgm-glider,
.template-product .jdgm-glider-track {
  transform: none !important;
  width: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 22px !important;
}
.template-product .jdgm-rev {
  width: 280px !important;
  max-width: 86vw !important;
  margin: 0 !important;
  float: none !important;
}
.template-product .jdgm-rev-carousel-prev,
.template-product .jdgm-rev-carousel-next {
  display: none !important;
}
.template-product .jdgm-rev-widg__summary {
  justify-content: center !important;
  text-align: center !important;
  border: 0 !important;
}
.template-product .jdgm-rev-widg__summary-inner {
  border: 0 !important;
  text-align: center !important;
}
.template-product .jdgm-write-rev-link,
.template-product .jdgm-row-readmore .jdgm-btn,
.template-product .jdgm-row-readmore a,
.template-product .jdgm-row-readmore button {
  background: #736b53 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  letter-spacing: 0.05em !important;
}
} /* end desktop-only Customer Reviews */

/* ===========================================================
   Product page "Pairs well with" - small, left-aligned,
   image-forward, horizontally-swipeable row.
   =========================================================== */
.template-product .complementary-products__slider {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  scrollbar-width: none;
}
.template-product .complementary-products__slider::-webkit-scrollbar {
  display: none;
}
.template-product .complementary-products__grid,
.template-product .complementary-products__slide {
  display: contents !important;
}
.template-product [data-slide-item] {
  flex: 0 0 auto !important;
  width: 150px !important;
  scroll-snap-align: start !important;
}
.template-product .complementary-product {
  display: block !important;
  text-align: center !important;
}
.template-product .complementary-product__image {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 6px 0 !important;
}
.template-product .complementary-product__image-element {
  width: 100% !important;
  height: auto !important;
}
.template-product .complementary-product__details {
  width: 100% !important;
}
.template-product .complementary-product__name {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin: 0 0 2px 0 !important;
}
.template-product .complementary-product__price-wrapper {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
}
.template-product .complementary-product__price-wrapper,
.template-product .complementary-product__price,
.template-product .complementary-product__price-text {
  text-align: center !important;
}
.template-product .complementary-product__link {
  display: none !important;
}
@media (max-width: 768px) {
  .template-product [data-slide-item] {
    width: 125px !important;
  }
}

/* ===========================================================
   Home slideshow banners (mobile overlay) - kept from prior theme.
   =========================================================== */
@media (max-width: 719px) {
  .slide:has(.content-outer-wrap) .image-wrap {
    position: relative !important;
  }
  .slide:has(.content-outer-wrap) .image-wrap::after {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(36, 32, 33, 0.45) !important;
    z-index: 1 !important;
  }
  .slide .content-outer-wrap {
    position: absolute !important;
    top: auto !important;
    bottom: 10% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    text-align: center !important;
    z-index: 10 !important;
  }
  .slide .content-inner-wrap {
    position: static !important;
  }
  .slide .content {
    position: static !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .slide .content .title,
  .slide .content .tagline {
    color: #ffffff !important;
  }
}

/* ============================================================
   STUDIYO brand layer — fonts driven by theme Typography.
   ============================================================ */

/* --- Section eyebrow labels: EB Garamond, uniform everywhere --- */
.section-title,
.complementary-products__title {
  font-family: 'EB Garamond', Georgia, serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3em !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: #242021 !important;
}

/* --- Footer newsletter heading: brand serif (was Playfair) --- */
[class*="footer-newsletter-heading"],
[class*="footer-newsletter-heading"] * {
  font-family: 'Libre Caslon Text', Georgia, serif !important;
}

/* --- "How it works" (Build Your Look) custom block: brand fonts --- */
.byl-wrap,
.byl-wrap * {
  font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif !important;
}
.byl-header h1,
.path-btn .btn-label,
.step-num-digit,
.step-title {
  font-family: 'Libre Caslon Text', Georgia, serif !important;
}

/* ============================================================
   About page "Meet Yoyo" — elegant contained portrait + text.
   ============================================================ */
[id$="__about_meetyoyo"] .picture-block {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 20px 24px 60px !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  gap: 64px !important;
  background-color: transparent !important;
}
[id$="__about_meetyoyo"] .picture-block-image {
  flex: 0 0 36% !important;
  width: 36% !important;
  max-width: 36% !important;
  margin: 0 !important;
  padding: 0 !important;
}
[id$="__about_meetyoyo"] .picture-block-image img {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center !important;
  height: auto !important;
  display: block !important;
}
[id$="__about_meetyoyo"] .picture-block-wrapper {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
[id$="__about_meetyoyo"] .picture-block-content {
  text-align: left !important;
  max-width: 480px !important;
  margin: 0 !important;
}
[id$="__about_meetyoyo"] .picture-block-heading {
  text-align: left !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  margin: 0 0 16px !important;
}
[id$="__about_meetyoyo"] .picture-block-heading::before {
  content: 'The designer';
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 13px;
  font-weight: 500;
  color: #242021;
  margin-bottom: 12px;
}
[id$="__about_meetyoyo"] .picture-block-body { text-align: left !important; }
[id$="__about_meetyoyo"] .picture-block-body p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #57534e !important;
  margin: 0 0 18px !important;
}
@media (max-width: 768px) {
  [id$="__about_meetyoyo"] .picture-block {
    flex-direction: column !important;
    gap: 22px !important;
    padding: 10px 20px 34px !important;
  }
  [id$="__about_meetyoyo"] .picture-block-image {
    flex: none !important;
    width: 66% !important;
    max-width: 66% !important;
    margin: 0 auto !important;
  }
  [id$="__about_meetyoyo"] .picture-block-content { max-width: 100% !important; }
}

/* --- Prices: EB Garamond, UPRIGHT --- */
.product__price,
.product__price *,
.product-card-details .price,
.product-card-details .price *,
.price,
.price *,
.money {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-style: normal !important;
}

/* --- Collection product names: softened --- */
.product-card-details .title,
.product-card-details .title a {
  color: #696365 !important;
  font-weight: 400 !important;
}

/* --- Product card swatches (Optis/BSS): show swatches only,
   hide the "Color: <value>" text row on cards (collection grid +
   you-may-also-like). Product page keeps its variant label. --- */
.product-card-details optis-variant-picker .se-option-name,
.product-card-details optis-variant-picker .se-selected-value {
  display: none !important;
}

/* ============================================================
   Add to cart buttons — solid terracotta, white text, no hover change.
   ============================================================ */
.product-card-interaction-addtocart,
.product-card-interaction-addtocart:hover,
.product-card-interaction-addtocart:focus,
.product-form .product-submit,
.product-form .product-submit:hover,
.addtocart-button-active,
.addtocart-button-active:hover {
  background: #803d1b !important;
  color: #ffffff !important;
  border: 1px solid #803d1b !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}
.product-card-interaction-addtocart span,
.product-card-interaction-addtocart:hover span,
.addtocart-button-active span,
.product-submit span {
  color: #ffffff !important;
}

/* ============================================================
   Frosted button system — smoky glass with white text.
   ============================================================ */
.call-to-action,
.browse {
  background: rgba(36, 32, 33, 0.34) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
  transition: background 0.35s ease, color 0.35s ease !important;
}
.call-to-action {
  font-size: 12px !important;
  padding: 16px 30px !important;
}
.call-to-action-wrap:hover .call-to-action,
a:hover .call-to-action,
.browse:hover {
  background: rgba(237, 230, 216, 0.95) !important;
  color: #242021 !important;
  border-color: rgba(237, 230, 216, 0.95) !important;
  text-shadow: none !important;
}

/* --- Coral pull-quote: warm cream moment, display serif --- */
[id$="__dynamic_custom_liquid_xLKc49"] {
  background-color: #ede6d8 !important;
}
[id$="__dynamic_custom_liquid_xLKc49"] .home-section {
  padding-top: 78px !important;
  padding-bottom: 78px !important;
}
[id$="__dynamic_custom_liquid_xLKc49"] p {
  font-family: 'Libre Caslon Text', Georgia, serif !important;
}
/* Coral quote: smaller + tighter on mobile so it doesn't wrap wildly. */
@media (max-width: 768px) {
  [id$="__dynamic_custom_liquid_xLKc49"] p {
    font-size: 19px !important;
    letter-spacing: 0.06em !important;
    line-height: 1.5 !important;
  }
  [id$="__dynamic_custom_liquid_xLKc49"] .home-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* --- Rich text body: larger, readable --- */
[id$="__dynamic_richtext_Yrr3wh"] .home-section p,
[id$="__dynamic_richtext_Yrr3wh"] .home-section .rte {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}
/* Designed-for-life: even top/bottom spacing (was 40 top / 80 bottom). */
[id$="__dynamic_richtext_Yrr3wh"] .content-area {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* --- Testimonials review text: match the body paragraph (soft gray, 400). --- */
.jdgm-testimonial .jdgm-text,
.jdgm-testimonial .jdgm-text p {
  color: #696365 !important;
  font-weight: 400 !important;
}

/* --- Deeper mood gradient on slideshow images (desktop). --- */
@media (min-width: 720px) {
  .slide .image-wrap {
    position: relative !important;
    isolation: isolate !important;
  }
  .slide .image-wrap::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(36,32,33,0.04) 0%, rgba(36,32,33,0.10) 45%, rgba(36,32,33,0.42) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

/* --- Product page testimonial quote (under add-to-cart): less thin --- */
.template-product .custom-liquid,
.template-product .custom-liquid p {
  font-weight: 400 !important;
  font-size: 16px !important;
}

/* --- Product page title: smaller on mobile. --- */
@media (max-width: 768px) {
  .template-product .product__title {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
}

/* ============================================================
   Scroll reveal — sections fade/rise in.
   ============================================================ */
.sy-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  will-change: opacity, transform;
}
.sy-reveal.sy-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Product card titles — Karla, uppercase, compact (brand vibe).
   ============================================================ */
.product-card-details .title,
.product-card-details .title a,
.complementary-product__name,
.complementary-product__name a {
  font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
}
.product-card-details .title,
.product-card-details .title a {
  font-size: 13px !important;
  line-height: 1.4 !important;
}
/* "Pairs well with" title color matches the you-may-also-like titles. */
.complementary-product__name,
.complementary-product__name a {
  color: #696365 !important;
}

/* ============================================================
   "Pair it with" upsell add-to-cart button — white label text.
   ============================================================ */
.complete-look__cta,
.complete-look__cta .money,
.complete-look__cta span {
  color: #ffffff !important;
}

/* ============================================================
   Mobile sticky Add-to-Cart bar — force white button text.
   ============================================================ */
#studiyo-sticky-atc .ssa-btn,
#studiyo-sticky-atc .ssa-btn span {
  color: #ffffff !important;
}

/* ============================================================
   Cart action buttons (mini-cart + cart page) — white label text.
   ============================================================ */
.cart-mini-actions-cart,
.cart-mini-actions__checkout-button,
.cart-mini-actions__checkout-button span,
.cart-submit,
.cart-submit span {
  color: #ffffff !important;
}

/* ============================================================
   Cart drawer header — upright (was italic).
   ============================================================ */
.sidebar-drawer__header {
  font-style: normal !important;
}

/* Cart drawer "Mark as a Gift" widget — match the drawer typography. */
.effective-apps-egw-cb,
.effective-apps-egw-cb *,
#effectiveAppsEgwGiftMessageLbl {
  font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif !important;
  font-style: normal !important;
  color: #242021 !important;
}

/* ============================================================
   Cart drawer items — upright text; only attributes stay italic.
   ============================================================ */
.cart-mini-item-title,
.cart-mini-item-title a,
.cart-mini-item-vendor,
.cart-mini-item-price,
.cart-mini-item-final-price,
.cart-mini-item-original-price,
.cart-mini-item-remove,
.cart-mini-subtotal-heading,
.cart-mini-subtotal-value {
  font-style: normal !important;
}
.cart-mini-item__product-options,
.cart-mini-item__product-options .product-option__name,
.cart-mini-item__product-options .product-option__value,
.cart-mini-item-quantity {
  font-style: italic !important;
}

/* ============================================================
   Homepage "start here" collections — compact 2-column grid on
   mobile. Uses percentage padding-bottom for the tile aspect
   (works on all mobile browsers, unlike aspect-ratio). With an
   odd count the last tile becomes a full-width band; add a 4th
   collection in the editor for a clean 2x2. Layout only — swap
   or reorder collections via the section's blocks in the editor.
   ============================================================ */
@media (max-width: 768px) {
  [id$="__dynamic_collection_list_G7qq6b"] .wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    float: none !important;
  }
  [id$="__dynamic_collection_list_G7qq6b"] .collection-wrap {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    height: 0 !important;
    padding-bottom: 125% !important;
    overflow: hidden !important;
  }
  [id$="__dynamic_collection_list_G7qq6b"] .collection-wrap:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    padding-bottom: 50% !important;
  }
  [id$="__dynamic_collection_list_G7qq6b"] .collection {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
  }
  [id$="__dynamic_collection_list_G7qq6b"] .collection .label {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
}

/* ============================================================
   Homepage hero banner — taller on mobile; keep image focal point.
   ============================================================ */
@media (max-width: 768px) {
  [id$="__dynamic_slideshow_Q9tAa6"] .slideshow,
  [id$="__dynamic_slideshow_Q9tAa6"] .slides,
  [id$="__dynamic_slideshow_Q9tAa6"] .slide,
  [id$="__dynamic_slideshow_Q9tAa6"] .image-wrap {
    height: 82vh !important;
    min-height: 82vh !important;
  }
  [id$="__dynamic_slideshow_Q9tAa6"] .image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ============================================================
   Mobile type scale — cohesive hierarchy across the homepage.
   ============================================================ */
@media (max-width: 768px) {
  .slide .content .tagline,
  .slide .tagline {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .section-title {
    font-size: 13px !important;
  }
}
<style>
  /* Klaviyo pop-up: brand fonts + hide template logo.
     Scoped by the close button so it can't affect the
     embedded Inner Circle form, which has no close button. */
  [class*="kl-private-reset-css"]:has(button.klaviyo-close-form) .klaviyo-form-image {
    display: none !important;
  }
  [class*="kl-private-reset-css"]:has(button.klaviyo-close-form) form.klaviyo-form,
  [class*="kl-private-reset-css"]:has(button.klaviyo-close-form) form.klaviyo-form * {
    font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif !important;
  }
  [class*="kl-private-reset-css"]:has(button.klaviyo-close-form) .klaviyo-form-richtext > div:first-child,
  [class*="kl-private-reset-css"]:has(button.klaviyo-close-form) .klaviyo-form-richtext > div:first-child * {
    font-family: 'Libre Caslon Text', Georgia, serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
  }
  [class*="kl-private-reset-css"]:has(button.klaviyo-close-form) form.klaviyo-form button:not(.klaviyo-close-form),
  [class*="kl-private-reset-css"]:has(button.klaviyo-close-form) form.klaviyo-form button:not(.klaviyo-close-form) * {
    font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    font-weight: 500 !important;
  }
</style>

/* Klaviyo pop-up: hide the leftover template logo. */
[class*="kl-private-reset-css"]:has(button.klaviyo-close-form) .klaviyo-form-image {
  display: none !important;
}

/* Klaviyo pop-up: no focus ring when the pop-up auto-focuses the X,
   but keep a visible ring for keyboard users. */
[class*="kl-private-reset-css"] button.klaviyo-close-form {
  -webkit-tap-highlight-color: transparent !important;
}
[class*="kl-private-reset-css"] button.klaviyo-close-form:focus {
  outline: none !important;
  box-shadow: none !important;
}
[class*="kl-private-reset-css"] button.klaviyo-close-form:focus-visible {
  outline: 2px solid rgba(237, 230, 216, 0.9) !important;
  outline-offset: 2px !important;
}