/** Shopify CDN: Minification failed

Line 624:0 Expected "}" to go with "{"

**/


@font-face {
  font-family: 'Flecha Italic';
  src: url("/cdn/shop/files/FlechaM-RegularItalic_5.24.woff?v=1715376368") format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Flecha Regular';
  src: url("/cdn/shop/files/FlechaM-Regular_5.24.woff?v=1715376368") format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url("/cdn/shop/files/Neue_Haas_Grotesk_Display_Pro_Light.woff?v=1709146829") format('woff');
  font-weight: 300; /* Light */
  font-style: normal;
}

@font-face {
  font-family: 'Neue Haas Grotesk Display Pro Medium';
  src: url("/cdn/shop/files/Neue_Haas_Grotesk_Display_Pro_Medium.woff?v=1709146828") format('woff');
  font-weight: 500; /* Medium */
  font-style: normal;
}


:root {
  --FONT-STACK-SERIF: Garamond, Georgia, serif;
  --FONT-STACK-SANS-SERIF: Helvetica, Tahoma, sans-serif;
}
















:root {
  --FONT-STACK-BODY: 'Neue Haas Grotesk Display Pro', var(--FONT-STACK-SANS-SERIF) ;
  --FONT-STACK-HEADING: 'Flecha Regular', var(--FONT-STACK-SERIF) !important;
  --FONT-STACK-ACCENT: 'Neue Haas Grotesk Display Pro Medium',  !important;
  --TYPE-STACK-NAV: 'Neue Haas Grotesk Display Pro Medium', var(--FONT-STACK-SANS-SERIF) !important;
  --TYPE-STACK-BUTTON: 'Neue Haas Grotesk Display Pro Medium', var(--FONT-STACK-SANS-SERIF) !important; 
  --TYPE-STACK-KICKER: 'Neue Haas Grotesk Display Pro', var(--FONT-STACK-SANS-SERIF) !important;
}

/* FIX: Make entire hero banner image clickable */
[data-section-type="hero"] .hero__content__wrapper {
  z-index: 25 !important;
  pointer-events: none !important;
}
[data-section-type="hero"] .hero__content__wrapper a,
[data-section-type="hero"] .hero__content__wrapper button {
  pointer-events: auto !important;
}
.theme-animate-hover [data-section-type="hero"] .link-over-image ~ img,
.theme-animate-hover [data-section-type="hero"] .link-over-image ~ .image__hero__frame .image__hero__scale {
  transition: none !important;
  transform: none !important;
}
.theme-animate-hover [data-section-type="hero"] .link-over-image:hover ~ img,
.theme-animate-hover [data-section-type="hero"] .link-over-image:focus ~ img,
.theme-animate-hover [data-section-type="hero"] .link-over-image:hover ~ .image__hero__frame .image__hero__scale,
.theme-animate-hover [data-section-type="hero"] .link-over-image:focus ~ .image__hero__frame .image__hero__scale {
  transition: none !important;
  transform: none !important;
}

/* HP Video Banner Full-Click Overlay */
[data-section-type="video"] .hero__content__wrapper {
  z-index: 25 !important;
  pointer-events: none !important;
}
[data-section-type="video"] .hero__content__wrapper a,
[data-section-type="video"] .hero__content__wrapper button {
  pointer-events: auto !important;
}

/* ==============================================
   PDP V4: Add to Cart + Monogram Button Restyle
   ============================================== */

/* Flex container to control button order */
.pplr_atc_form {
  display: flex !important;
  flex-direction: column !important;
}
.pplr_atc_form .product__form__inner {
  order: 1 !important;
  margin-bottom: 16px !important;
}
.pplr_atc_form .product-personalizer {
  order: 2 !important;
}
.pplr_atc_form .shop-pay-terms {
  order: 3 !important;
}
.pplr_atc_form input[type="hidden"] {
  order: 0 !important;
}

/* Add to Cart: warm rose-gold fill */
.product__submit__buttons .btn--add-to-cart {
  background-color: #D8AC9D !important;
  border: none !important;
  color: #000 !important;
  height: 56px !important;
}
.product__submit__buttons .btn--add-to-cart:hover {
  background-color: #c99a8a !important;
}

/* Monogram: ghost/outline button */
.product-personalizer {
  width: 100% !important;
  min-height: 56px !important;
}
.product-personalizer .ptc_button {
  background-color: transparent !important;
  border: 1px solid #000 !important;
  color: #000 !important;
  height: 56px !important;
  width: 100% !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
}
.product-personalizer .ptc_button:hover {
  background-color: #f5f5f5 !important;
}

 /* Sibling Swatch — Size Unavailable Strikethrough */
.sibling--size-unavailable {
  position: relative;
}
.sibling--size-unavailable .sibling__image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 2px;
  height: 100%;
  background: #999;
  margin-left: -1px;
  transform: rotate(45deg);
}

/* Larger color swatches — target the SIBLINGS swatch, not .swatch__button */
.product-single .sibling__image{
  --OPTION-SIZE-SIBLING:44px;   /* was 36px; bump higher if you want */
}
/* Issue 1 fix: keep rich-text section headings looking identical
   after switching them from <p> to <h2>/<h3>/<h4> */
.standard__heading .standard__heading__el{
  font: inherit;
  margin: 0;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* --- Mobile PDP gallery: stop the white-band flash on refresh ---
   On mobile the gallery is a Flickity carousel whose height locks to
   the first image only AFTER that image lazy-loads. Reserving each
   slide's height up front (matching the theme's --default-ratio: 150%)
   means the image can no longer resize the carousel on load. */
@media only screen and (max-width: 767px) {
  .product__grid--slides .product__media {
    aspect-ratio: 2 / 3;   /* portrait box = 150% of width, the theme default */
  }
}

/* ===========================================================
   PDP "More to Love" recommendations.
   Desktop: image-only, side by side (unchanged).
   Mobile (<=767px): mirrors the Recently Viewed product card —
   0.6 cropped image, centered name (1 line) + price, theme gutter,
   one large card plus a peek, horizontal swipe.
   Markup: sections/api-product-upsell-item.liquid.
   =========================================================== */

/* custom element is display:inline by default — make it a full-width block */
product-complimentary{ display:block; width:100%; }

/* drop the boxed border; center the heading + flourish line */
.upsell__holder--bare{
  border:0;
  text-align:center;
  margin-top:32px;
}
.upsell__holder--bare .upsell__holder__title{
  position:static;
  width:auto;
  margin:0 0 16px;
}
.upsell__holder--bare .upsell__holder__title__text{
  transform:none;
  background:none;
  padding:0 0 14px;
  position:relative;
  display:inline-block;
}
.upsell__holder--bare .upsell__holder__title__text:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:30px;
  height:3px;
  margin-left:-15px;
  background:var(--text);
  opacity:.2;
}

/* force the image to the same 0.6 crop the product grid uses */
.upsell__images__imgwrap{
  aspect-ratio:3 / 5;        /* 0.6 width:height, same as product cards */
  height:auto;
  width:100%;
  overflow:hidden;
  display:block;
}
.upsell__images__imgwrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---- Desktop: equal-width images, no text ---- */
.upsell__images{
  display:flex;
  gap:10px;
}
.upsell__images__item{
  flex:1 1 0;
  min-width:0;
  display:block;
  transition:opacity .3s;
}
.upsell__images__item:hover{ opacity:.85; }
.upsell__images__info{ display:none; }   /* name + price hidden on desktop */

/* ---- Mobile (<=767px): match the Recently Viewed card ---- */
@media screen and (max-width:767px){
  .upsell__holder--bare{ margin-top:36px; }

  .upsell__images{
    flex-wrap:nowrap;
    width:100%;
    box-sizing:border-box;
    gap:var(--gutter);          /* same inter-card spacing as the grid */
    overflow-x:auto;
    padding-right:var(--outer);  /* trailing space; first image aligns to the gutter */
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .upsell__images::-webkit-scrollbar{ display:none; }

  .upsell__images__item{
    flex:0 0 82%;               /* ~1.2 cards visible, like grid_small */
    scroll-snap-align:start;
  }

  .upsell__images__info{ display:block; }   /* show name + price, centered */
  /* single-line name like the screenshot */
  .upsell__images__info .product__grid__title{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* ===== Mobile footer: move brand message + socials under email signup ===== */
@media only screen and (max-width: 767px) {
  .footer__content {
    display: flex;
    flex-direction: column;
  }
  /* Brand message + social icons first (right under the signup) */
  .footer__block--socials {
    order: -1;
    border-top: none;        /* drop the divider line now that it's at the top */
    padding-top: 20px;
  }
  /* Company / Support / Legal link columns follow */
  .footer__content__inner {
    order: 0;
  }
}

/* ===== Mobile footer: smaller, condensed type ===== */
@media only screen and (max-width: 767px) {
  /* "Join the List" heading */
  .footer__newsletter__body h3 { font-size: 20px; line-height: 1.25; }
  /* Newsletter sub-text */
  .footer__newsletter__body .rte { font-size: 12px; line-height: 1.4; }
  /* Email field + Join button */
  .footer__form input,
  .footer__form button { font-size: 13px; }
  /* Brand tagline "For the Softer Side of Life™" */
  .footer__block--socials h3 { font-size: 15px; line-height: 1.3; }
  /* Column headers (Company / Support / Legal) */
  .footer__title { font-size: 11px; }
  /* Menu links */
  .footer__content__inner .footer__block a { font-size: 13px; line-height: 1.7; }
}

/* ===== Mobile footer — Option B: two-column compact menus (Anine Bing style) ===== */
@media only screen and (max-width: 767px) {

  /* 1) Force the three menus open + remove the accordion look */
  .footer__content__inner .footer__accordion__body {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
.footer__content__inner .footer__title {
    padding: 0 0 6px !important;
    margin: 0 0 10px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
    cursor: default;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: 1px;
  }
  .footer__content__inner .footer__title .icon-theme {
    display: none !important;    /* hide the +/chevron arrows */
  }

  /* 2) Put the menus into two columns */
  .footer__content__inner .float-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 22px;
    width: 100% !important;
    margin: 0 !important;
  }
  .footer__content__inner .grid__item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  /* 3) Legal runs full-width under Company + Support */
  .footer__content__inner .grid__item:nth-child(3) {
    grid-column: 1 / -1;
  }

  /* 4) Tight, small link list */
  .footer__content__inner .footer__block a { font-size: 13px; line-height: 1.85; }
  .footer__quicklinks li { margin-bottom: 4px !important; }
}

/* Park the Product Personalizer placeholder off-screen while the app injects it
   at the top of <body>, before it's moved into the product form. Stops the flash
   without hiding it (the app can still measure it). Once moved into the form this
   no longer matches, so the real "Add Monogram" button shows normally below ATC. */
body > .product-personalizer,
body > [id^="pplr-"] {
  position: fixed !important;
  top: -9999px !important;
  left: 0 !important;
  z-index: -1 !important;
}

/* ==================================================================
   PDP: Country-aware shipping message + spacing  (added 30 Jun 2026)
   One lever per gap — change a single number to adjust each gap.
   ================================================================== */

/* Gap between ADD TO CART and ADD MONOGRAM */
.pplr_atc_form .product__form__inner { margin-bottom: 6px !important; }

/* Gap between ADD MONOGRAM and the shipping message */
.pplr_atc_form .product-personalizer { margin-bottom: 6px !important; }
.product__block__buttons { padding-bottom: 4px !important; }

/* The shipping message itself (first number = gap above, last = gap below) */
.eb-ship-msg { margin: 0 0 11px; text-align: center; color: #333; font-size: 11px; line-height: 1.5; }
.eb-ship-msg > * { margin: 0; }
.eb-ship-msg__intl[hidden] { display: none; }
 
/* ============================================================
   PDP — review stars row (server-rendered; under title / above color)
   ============================================================ */
.product__reviews-row {
  display: inline-flex; align-items: center; gap: 6px;
margin: 16px 0 0; text-decoration: none; line-height: 1;
}
.product__reviews-row .eb-stars {
  position: relative; display: inline-block;
  font-size: 14px; line-height: 1; white-space: nowrap;
}
.product__reviews-row .eb-stars::before { content: "★★★★★"; color: #e3d3cc; }   /* empty stars */
.product__reviews-row .eb-stars::after  {                                        /* filled = Add-to-Cart rose gold */
  content: "★★★★★"; color: #d8ac9d;
  position: absolute; left: 0; top: 0; width: var(--eb-pct); overflow: hidden;
}
.product__reviews-row .eb-rating,
.product__reviews-row .eb-count { color: #000; font-size: 14px; }
.product__reviews-row .eb-count { text-decoration: underline; text-underline-offset: 2px; }


Sale price pdp paste into eberjeycustom.css · LIQUID
/* ============================================================
   ITEM S — PDP sale price.
   Sale products: strikethrough original + sale price (NO % chip — the chip
   is only rendered for bundles in product-price.liquid).
   Bundles: sale price + grey "X% off" chip (styled below).
   ============================================================ */
.product__block__price .product__price--off {
  border: 1px solid var(--border);   /* light grey box */
  color: var(--text-light);          /* light grey text */
}
 
/* Make the current (sale) price the SAME size as the strikethrough original */
.product__block__price .product__price {
  font-size: inherit;
}
 
 
/* ============================================================
   Collection — STICKY filter sidebar (desktop only)
   Keeps the left filter column pinned in view while the product
   grid scrolls. Mobile is untouched (filters there are a slide-in
   drawer that is already position:fixed).
   Target markup: <div class="collection__filters__outer"> inside
   <aside class="collection__filters__wrapper"> in sections/collection.liquid.
   ============================================================ */
@media only screen and (min-width: 768px) {
  .collection__filters__outer {
    position: -webkit-sticky;
    position: sticky;
    /* Clear the sticky header (--header-height is 100px) + a little breathing room */
    top: calc(var(--header-height, 100px) + 20px);
    /* If ALL filter groups are expanded and the list is taller than the
       screen, let the sidebar scroll on its own instead of being cut off */
    max-height: calc(100vh - var(--header-height, 100px) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Keep the internal scrollbar slim/subtle */
  .collection__filters__outer::-webkit-scrollbar { width: 6px; }
  .collection__filters__outer::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }
}
 /* Collection — make the main filter group headings bold */
.sidebar__heading {
  font-weight: 700 !important;
}
/* ============================================================
   FIX: MAKE FINAL PRICE Same as Strikethru price
   ============================================================ */
.product__block__price .product__price {
  font-size: inherit;
}

/* ============================================================
   FIX: Top sale/announcement bar flicker on load
   ------------------------------------------------------------
   The announcement bar is a Flickity carousel. Before its JS
   runs, its two ticker messages stack (~54px tall); once
   Flickity initializes it collapses to one line (27px). That
   height snap is the flicker.
 
   Reserving the final one-line height (27px) up front means the
   bar never changes size, so there is nothing to flicker.
   Tested live: pins the bar at 27px through the whole load.
   ============================================================ */
.announcement {
  height: 27px !important;
  min-height: 27px !important;
  overflow: hidden;
}
 
/* ============================================================
   ITEM W — Sale collection sticky banner (reveal-on-scroll)
   Sits under the nav, hidden at page load, revealed once the
   shopper scrolls past ~220px (see the script in
   sections/collection.liquid) — and hides again near the footer.
   Filter/Sort and the active-filters/product-count row are also
   sticky, stacking in order: nav → banner → Filter/Sort →
   active filters → grid.
   Background is a translucent nav tint + blur (matches the
   header's own "stuck" treatment) so it reads as part of the
   nav rather than a separate banner.
   Message / on-off / target collection are all set in
   Theme Settings → Product card → "Sale collection sticky banner".
   ============================================================ */
.collection__sale-banner {
  position: fixed;
  top: var(--header-height, 100px);
  left: 0;
  right: 0;
  z-index: 500;
  background: #D8AC9D;
  color: #1A1A1A;
  text-align: center;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.collection__sale-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.collection__sale-banner p {
  margin: 0;
}

/* ============================================================
   ITEM Y — MOBILE FONT-SIZE FIX (targeted) — 04 Jul 2026
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* [Y-01] Add to Cart button label — was ~12.15px on phones */
  .btn--add-to-cart {
    font-size: 14px !important;
  }

  /* [Y-02] Collection grid — product name — was ~13.2px on phones */
  .product__grid__title {
    font-size: 14px !important;
  }

  /* [Y-03] Collection grid — price — was ~12.8px on phones */
  .product__grid__price,
  .product__grid__price .price {
    font-size: 13px !important;
  }

  /* [Y-04] Footer headings (Company / Support / Legal) — were 11px on phones */
  .footer__title {
    font-size: 12px !important;
  }

  /* [Y-05] Collection sidebar filter headings — were ~12.15px on phones */
  .sidebar__heading {
    font-size: 13px !important;
  }
}

/* ============================================================
   ITEM Y (PDP) — MOBILE FONT-SIZE FIX — by section — 06 Jul 2026
   ============================================================ */
@media only screen and (max-width: 767px) {

  /* [Y-06] Price — was 15.2px. Targets the shared row (.product__price__main),
     not the price span itself, so the strikethrough stays matched. */
  .product__price__main {
    font-size: 16px !important;
  }

  /* [Y-07] "COLOR" label — was 12.15px */
  .radio__legend__label {
    font-size: 13px !important;
  }

  /* [Y-08] Color name, e.g. "Hourglass Sunbeam/Navy" — was 12.8px */
  .radio__legend {
    font-size: 13.5px !important;
  }

  /* [Y-09] Size letters (XXS/XS/S/M/L/XL/XXL) — was 13.15px */
  .radio__fieldset .radio__button label {
    font-size: 14px !important;
  }

  /* [Y-13] Add Monogram button label — was 12.15px */
  .ptc_button {
    font-size: 14px !important;
  }

/* [Y-17] Product name/title — was 19px.
     Mobile-only exception on top of item E's all-widths reduction in
     theme.css ([data-section-type="product"] .product__title, "-3px" off
     the heading scale) — desktop stays exactly as it was. */
  [data-section-type="product"] .product__title {
    font-size: 20px !important;
  }

  /* [Y-18] Review stars + rating number + review count under the title —
     were 14px, identical on desktop and mobile. Mobile-only bump. */
  .product__reviews-row .eb-stars,
  .product__reviews-row .eb-rating,
  .product__reviews-row .eb-count {
    font-size: 16px !important;
  }