/** Shopify CDN: Minification failed

Line 193:0 Unexpected "{"
Line 193:1 Expected identifier but found "%"
Line 193:26 Expected identifier but found whitespace
Line 194:13 Unexpected "/"
Line 195:66 Expected identifier but found "%"
Line 1075:0 Unexpected "{"
Line 1075:1 Expected identifier but found "%"
Line 1075:26 Expected identifier but found whitespace
Line 1075:64 Expected identifier but found "%"
Line 1147:0 Unexpected "{"
... and 3 more hidden warnings

**/
/* ======== LEGACY CODE FROM PAGES:: NEEDS ORGANIZED ======== */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"),
    local("Noto Sans"), local("Liberation Sans");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
  size-adjust: 102%; /* keeps metrics closer to Figtree to minimize layout shift */
}

:root {
  --jd-font-sans: "Figtree", "Figtree Fallback", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    "Liberation Sans", sans-serif;
}

body {
  font-family: var(--jd-font-sans);
}

/* ======== COLLECTION & GRID IMAGE LOADING (scoped) ======== */
/* Keep collection/product grids visible without touching sliders or nav */
.collection-grid .image-element,
.product-grid .image-element,
.collection-grid image-element,
.product-grid image-element,
.collection-grid img,
.product-grid img,
.collection-grid .image-wrap,
.product-grid .image-wrap {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Force only collection/product grid items to display */
.collection-item,
.grid-product,
.product-grid,
.collection-grid .grid__item,
.product-grid .grid__item {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Remove AOS inside collection/product grids only */
.collection-grid [data-aos],
.product-grid [data-aos] {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* Leave header/nav and other sections to manage their own visibility */
img:not(.site-header img):not(.site-logo img):not(header img):not(.testimonials-section img),
image-element:not(.site-header image-element):not(.site-logo image-element):not(header image-element):not(.testimonials-section image-element),
.image-element:not(.site-header .image-element):not(.site-logo .image-element):not(header .image-element):not(.testimonials-section .image-element) {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* ======== FOOTER LOGO FIX ======== */
/* Force footer logo/images to load instantly */
.site-footer img,
.site-footer .image-element,
.site-footer image-element,
footer img,
footer .image-element,
footer image-element,
.footer__logo img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Remove AOS animations from footer */
.site-footer [data-aos],
footer [data-aos] {
  opacity: 1 !important;
  animation: none !important;
}

/* Let testimonials images stay visible without forcing display */
.testimonials-section img,
.testimonials-section .image-element,
.testimonials-section image-element,
.testimonials-section .image-wrap {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* ======== NAVIGATION DROPDOWN MENU IMAGE FIX ======== */
/* Force navigation and dropdown menu images to load instantly */
.site-nav img,
.site-nav .image-element,
.site-nav image-element,
.site-nav__dropdown img,
.site-nav__dropdown .image-element,
.site-nav__dropdown image-element,
.megamenu img,
.megamenu .image-element,
.megamenu image-element,
.site-header__menu img,
.navmenu img,
.dropdown-menu img,
header .site-nav__link img,
.site-nav__expanded-item img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}


/* Mobile navigation thumbnails */
.drawer--nav img,
.mobile-nav img,
.mobile-nav .image-element,
.mobile-nav image-element {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Remove AOS animations from navigation */
.site-nav [data-aos],
.site-nav__dropdown [data-aos],
.megamenu [data-aos],
header [data-aos].site-nav__link {
  opacity: 1 !important;
  animation: none !important;
}

/* Desktop dropdown layout: keep submenu items horizontal */
@media only screen and (min-width: 769px) {
  .site-nav__dropdown {
    white-space: nowrap;
  }

  .site-nav__dropdown > li {
    display: inline-block;
    vertical-align: top;
  }

  .site-nav__dropdown > li:not(:last-child) {
    margin-right: 16px;
  }
}

/* ===== TYPOGRAPHY & FONT FALLBACKS ======= */

/* Site Header */
.site-header {
  background-color: #52376c;
  padding-top:0!important;
  padding-bottom:0!important;
}

/* JD-CUSTOM: Remove the fixed-height spacer the sticky header JS
     injects. The header overlays content — no space reservation needed.
     To revert, remove this block. {%- endcomment -%} */
#StickyHeaderWrap {
  height: auto !important;
}

h1.site-header__logo {
  padding: 0px;
}

#shopify-section-sections--25634218213686__header .site-nav__link {
  color:#fff!important;
}

{%- comment -%} JD-CUSTOM: announcement-bar styles moved inline to
     sections/announcement.liquid (above-the-fold; custom.css loads async).
     That section is now the single source of truth for the bar. {%- endcomment -%}



a[href="/account"].site-nav__link {
  display: none!important;
}



h1,
h2,
h3 {
  color: #52376c;
  letter-spacing: 0.05em;
}

h4 {
  color: #52376c;
}
.footer__title {
  color: #fff;
  font-size: 1em;
}
footer.site-footer a:hover {
  color: #39ff14 !important;
}
#Footer-custom_cFmYkr .h4 {
  padding-top: 10px!important;
}

input,
select,
textarea {
  background-color: #fff;
}
.cl-po--label {
  color: #000;
  font-size: 18px;
  margin-bottom: 5px;
}
label .button .grid-product__title .grid-product__title--heading {
  color: #52376c !important;
  letter-spacing: 0.1rem;
  text-transform: none !important;
}
span.product__price {
  font-size: 1.25em !important;
}

.collection-image {
  display: block;
  position: relative;
}
.collection-image--square {
  position: relative;
  padding-bottom: 100%;
}
.collection-item__title--center {
  text-align: center;
  position: absolute;
  bottom: 0;

} /* PRODUCT GRID Heading */
.grid-product__title.grid-product__title--heading {
  color: #52376c;
  text-transform: none;
  letter-spacing: 0rem;
  font-size: 1rem;
  line-height: 1.15rem;
}
.map-section__overlay {
  background-color: #fff;
} /* Buttons */
.btn--small {
  background: #52376c;
  color: #fff !important;
}
button .label .social-sharing__link {
  border-radius: 4px;
  color: #52376c !important;
  font-weight: 600;
}
p.h2 {
  color: #52376c;
  letter-spacing: 0.05em;
}
.left-align {
  text-align: left;
}
.rte {
  white-space: normal;
  word-wrap: break-word;
}
.product__policies.rte {
  display: none;
}

#recently-viewed h2.section-title {
  font-size: 1.85em!important;
}


.ring-size__link { 
    margin-left:.25rem; 
    text-decoration:underline; 
    color: #52376c !important;
    font-weight: 600!important;
}





/* =========== COLLECTIONS PAGE ===== */

h1.section-header__title {
    text-transform: uppercase !important;
    font-size: 2.5rem! important;
}

h3.section-header__title {
    font-size: 1.85rem!important;
    margin-top: 3rem;
}

div.grid-product__title,
div.grid-product__title--heading {
    color: #52376c !important;
    text-transform: none !important;
    font-size: 1em !important;
    line-height: 1.2em !important;
    font-weight: 600 !important;
    font-family: 'Figtree Fallback' !important;
}

/* Collections section item title */
.collection-item__title--heading {
    font-size: 1.25rem !important;
    line-height: 1.3rem !important;
    color: #52376c !important;
    font-weight: bold!important;
    letter-spacing: 0.1rem!important;
}

button.btn, a.btn {
    font-weight: bold !important;
    text-transform: uppercase !important;
}

div.grid-product__price {
   display: flex !important;
  flex-wrap: wrap !important; /* ✅ allows wrapping to next line */
  gap: 4px !important;
  line-height: 1rem!important;
  padding-top: 4px!important;

}


.grid-product__price
 {
    font-size: 1rem;
    margin-top: 5px;
    font-weight: 600 !important;
}

.grid-product__price--original {
    font-weight: normal !important;
    color: #9AA0A6!important;
}

.grid-product__price--savings {
    display: none !important;
}

.dfd-card-row {
  margin-top: 0!important;
}

/* Hide sale tags in product recommendations slider and complementary products */
.product-recommendations .grid-product__tag--sale,
.product-recommendations__slide .grid-product__tag--sale {
  display: none !important;
}

/* JD-CUSTOM: Hide "Save X%" text on collection/search cards (Doofinder + theme grid).
   The discount is already communicated by the red "X% OFF" chip and the
   strikethrough compare-at price, so the inline "Save X%" line is redundant
   and adds visual noise on mobile. Applies to Doofinder cards (.dfd-card-save)
   and theme grid (.grid-product__price--savings is hidden separately above). */
.dfd-card-save,
span.dfd-card-save {
  display: none !important;
}
/* /JD-CUSTOM */

/* ─────────────────────────────────────────────────────────────────────
   JD-CUSTOM: Card chips (Treatment C — May 2026)
   - Discount chip: #c8202c, white, 10px, tight padding, top-left
   - Sold-out chip: #6b6b6b mid-neutral, white, same dimensions
   - Sold-out cards also get image desaturation + title/price fade so the
     scroll focuses on items available to buy.
   Applies to theme grid (.grid-product) and Doofinder cards (.dfd-card).
   ───────────────────────────────────────────────────────────────────── */

/* Sale Tag — styled to match sImage discount flag */
.grid-product__tag.grid-product__tag--sale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    margin-left: 0 !important;
    background-color: #c8202c !important;
    color: #fff !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    border-radius: 0 !important;
    z-index: 10 !important;
}

/* Sold-out tag — mid-neutral, recedes below red discount chip in hierarchy */
.grid-product__tag.grid-product__tag--sold-out {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    margin-left: 0 !important;
    background-color: #6b6b6b !important;
    color: #fff !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    z-index: 10 !important;
}

/* Sold-out card fade — text retreats to 70% (image untouched) */
.grid-product:has(.grid-product__tag--sold-out) .grid-product__title,
.grid-product:has(.grid-product__tag--sold-out) .grid-product__meta,
.grid-product:has(.grid-product__tag--sold-out) .grid-product__price,
.grid-product:has(.grid-product__tag--sold-out) .grid-product__vendor {
  opacity: 0.7 !important;
}

/* Doofinder discount flag on card */
div.dfd-card-flags {
  left: 0 !important;
  right: auto !important;
}

/* Doofinder discount chip — distinguished by [data-discount] */
/* Doofinder discount chip — distinguished by [data-discount].
   NOTE: position is controlled by the .dfd-card-flags flex container,
   not by individual flags. We only style appearance here. */
div.dfd-card-flag {
  background-color: #c8202c !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  padding: 4px 8px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Pin the flags container to the top-left corner with a small inset */
div.dfd-card-flags {
  left: 10px !important;
  top: 10px !important;
  right: auto !important;
  gap: 4px !important;
}

/* Doofinder sold-out chip — same .dfd-card-flag element but
   distinguished by data-availability="out-of-stock". Override the red. */
div.dfd-card-flag[data-availability="out-of-stock"] {
  background-color: #6b6b6b !important;
  color: #fff !important;
}

/* When a card is sold out, hide the discount chip — show only SOLD OUT.
   Per Treatment C spec: sold pieces never display both chips. */
div.dfd-card-flags:has(.dfd-card-flag[data-availability="out-of-stock"]) .dfd-card-flag[data-discount] {
  display: none !important;
}

/* Relabel "Out of stock" → "SOLD OUT" via CSS (fallback only).
   Preferred: change the label in the Doofinder admin
   (Layer settings → Texts / Translations → out_of_stock).
   Remove this block once the admin label is updated. */
div.dfd-card-flag[data-availability="out-of-stock"] {
  font-size: 0 !important; /* hide native text */
}
div.dfd-card-flag[data-availability="out-of-stock"]::before {
  content: "SOLD OUT";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Doofinder sold-out card fade — text retreats to 70% (image untouched).
   Walk up from the flag to the card root via :has(). */
.dfd-card:has(.dfd-card-flag[data-availability="out-of-stock"]) .dfd-card-title,
.dfd-card:has(.dfd-card-flag[data-availability="out-of-stock"]) .dfd-card-price,
.dfd-card:has(.dfd-card-flag[data-availability="out-of-stock"]) .dfd-card-price--sale,
.dfd-card:has(.dfd-card-flag[data-availability="out-of-stock"]) .dfd-card-price--regular,
.dfd-card:has(.dfd-card-flag[data-availability="out-of-stock"]) .dfd-card-price--compare,
.dfd-card:has(.dfd-card-flag[data-availability="out-of-stock"]) .dfd-card-prices,
.dfd-card:has(.dfd-card-flag[data-availability="out-of-stock"]) .dfd-card-content {
  opacity: 0.7 !important;
}

/* Hide "Similar results" button on Doofinder search cards */
.dfd-similar-button,
.dfd-flags-container.with-similar-products .dfd-similar-button {
  display: none !important;
}

/* Hide "Similar results" button on Doofinder search cards */
button.dfd-similar {
  display: none !important;
}

/* FILTER + PRODUCT LISTING STYLES */

/* JD-CUSTOM 2026-06-12: removed conflicting .gf-Checkbox border + ::after purple
   rules — the Globo filter restyle now owns checkbox/swatch styling in
   snippets/jd-globo-filter-restyle.liquid. (Grid visibility rules below kept.) */

div#gf-products.grid {
  margin-inline-start: 0!important;
  margin-left: 0!important;
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force grid items to display */
div#gf-products.grid .grid__item,
div#gf-products.grid .grid-product {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}


/* Custom button styling */

.custom-button:hover {
  background-color: #3d2850;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(82, 55, 108, 0.3);
}

/* ======= HOMEPAGE =====*/


.index-section {
    margin: 6px 0!important;
}

/* Let hero/slideshow sections respect their own media-query visibility.
   NOTE: display is intentionally omitted — "display: unset !important" resolves
   to "display: inline" (CSS initial value) on non-inherited properties, which
   collapses the hero to text-only inline width. Flickity and the UA stylesheet
   already set display: block; we only need to undo AOS opacity/visibility. */
.index-section.slideshow-section,
.index-section[data-section-type="slideshow"],
.hero,
.slideshow {
  visibility: unset !important;
  opacity: unset !important;
}

/* ======== HERO SLIDER SECTION ========== */

/* Force ONLY hero images to load - let media queries control visibility */
.hero img, .slideshow img, .hero__image, .slideshow__slide img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Kill the dark overlay on hero/slideshow */ .hero--has-overlay .hero__image:after,
.slideshow__overlay:after,
.slideshow__overlay:before {
  background: transparent !important;
  opacity: 0 !important;
}

/* ======== BNPL PROMOTIONS ======== */

/* JD-CUSTOM: Reserve space for async BNPL messaging to prevent CLS */
[data-shopify-block-id*="affirm"],
[data-shopify-block-id*="afterpay"],
[data-shopify-block-id*="synchrony"],
[data-shopify-block-id*="klarna"] {
  min-height: 40px;
}
/* /JD-CUSTOM */

/* JD-CUSTOM 2026-05-15: CLS fix — Shopify accelerated-checkout / Shop Pay
   injects <img id="productPresentment"> with no width/height attributes.
   Lighthouse flags it as "Unsized image element". We can't edit the markup
   (it's app-injected), so we reserve a 1:1 box with aspect-ratio. The image
   itself is a tiny presentment thumbnail (~60-80 px square in the dynamic
   checkout button preview); max-width caps it so it never blows up the row. */
img#productPresentment {
  width: 60px;
  height: 60px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: inline-block;
  contain: layout size;
}
/* /JD-CUSTOM */

/* Affirm! */
.affirm-as-low-as {
  padding-top: 10px!important;
}

.affirm-modal-trigger {
  color: #000049!important;
  text-decoration-line: underline!important;
  font-weight: bold!important;
}


/* BNPL Header - eye-catching promotion */
div.BNPL-Ad {
  background: #CEEAD6;
  color: #0D652D !important;
  text-align: center !important;
  padding: 15px 20px !important;
  margin-top: 1rem !important;
  /*border: 2px solid #0D652D;*/
  box-shadow: 0 2px 8px rgba(13, 101, 45, 0.2);
}




.BNPL-header-text {
  color: #0D652D !important;
  font-size: 1rem;
  font-weight: bold!important;
  letter-spacing: 0.05rem !important;
}

.BNPL-body-text {
  font-size: 0.9rem!important;
  font-weight: bold!important;
}

a.BNPL-Ad {
  color: #0D652D !important;
  text-decoration: underline dotted;
  text-decoration-color:  #0D652D !important;
}



/* cart note styling */
.cart__note {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  padding-bottom: 1rem!important;
  height: 1rem!important;
}


/* Featured collections section - reduce top margin */
div.index-section {
  margin-top: 0 !important;
}

/* FILTERS */
.js-drawer-open-collection-filters.btn--tertiary {
  border: 2px solid #52376c !important; /* adjust thickness & purple tint */
}

/*SORT BY*/
.js-drawer-open-collection-filters.btn--tertiary,
#SortBy {
  border: 2px solid #52376c !important; /* adjust thickness & purple tint */
  border-radius: 0px !important;        /* optional, match button shape */
}


/* ======== END SHARED ELEMENTS ======== */



/* ======== COLLECTION PAGES ======== */

/* ======== DOOFINDER  ======== */

/* -------- Doofinder Search Custom Styling -------- */

.dfd-card-title {
  font-family: "Figtree Fallback";
  font-weight: 600!important;
  font-size: 1em!important;
  color: #52376c !important;
}

.dfd-card-price.dfd-card-price--sale, .card-price.card-price--sale {
   color: #191308 !important;
}

.dfd-card, .dfwidget-card {
  border: none !important;
  padding: .5em!important;
}

.dfd-card-thumbnail img, .card-media-thumbnail img {
  object-fit: cover!important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  display: block !important;
}

/* Ensure Doofinder results grid thumbs render instantly */
.dfd-results-grid img,
.dfd-results-grid .image-element,
.dfd-results-grid image-element,
.dfd-results-grid .dfd-card-thumbnail,
.dfd-results-grid .dfd-card-thumbnail img,
.dfd-results-grid .card-media-thumbnail img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  display: block !important;
}



/* -------- Doofinder Product Cards Custom Styling -------- */

/* Hide carousel titles */
div.dfwidget-title {
  display: none !important;
}

#recently-viewed h2, #recently-viewed p {

  text-align: center!important;
}

#recently-viewed .container-padding {
  padding-bottom: 2rem!important;
}


.card-title {
  font-family: "Figtree Fallback";
  font-weight: 600!important;
  font-size: 1em!important;
  color: #52376c !important;
}

.dfwidget-card {
  border: none !important;
}

/* ----- Synchrony spacing correct ---*/

#syf-unifi-widget {
   padding-top: 10px!important;
}


/* ======== END DOOFINDER  ======== */



/* ======== SHARED ELEMENTS======== */

/* JD-CUSTOM: Hide ALL breadcrumbs on product pages */
.template-product .breadcrumb,
.template-product nav#uncomplicated-breadcrumbs,
.template-product .shopify-app-block[id*="breadcrumbs"],
.template-product .shopify-app-block[id*="Breadcrumbs"],
.template-product [data-breadcrumbs],
.template-product .bc-breadcrumbs {
  display: none !important;
}

.page-content--top {
  padding-top: 2rem !important;
}

.ring-size__link { 
    margin-left:.25rem; 
    text-decoration:underline; 
    color: #52376c !important;
    font-weight: 600!important;
}

/* Make wishlist icon white in header */
.swym-header-launcher svg path {
  stroke: white !important;
  stroke-width: 1.5 !important;
}

.swym-header-launcher svg {
  width: 30px !important;
  height: 30px !important;
}

/* Hide obstructive add to wishlist modal */

.swym-atw-notification-container {
    display: none !important;
}

/* ======== HOME PAGE ======== */

/* Hero/Slideshow section headings and subtitles */

[id$="__slideshow"] h2,
[id$="__slideshow"] h2 * {
    color: #fff !important;
}

[id$="__slideshow"] .hero__subtitle,
[id$="__slideshow"] .hero__subtitle *,
[id$="__slideshow"] .animation-contents,
[id$="__slideshow"] .animation-contents * {
  color: #fff !important;
}

h2.hero__title, h1.hero__title {
 color: #fff!important;
 font-size: 3.5rem !important;
 letter-spacing: .05rem !important;
 padding-bottom: 10px!important;
 text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 0, 0, 0.3);
}

div.hero__subtitle {
  font-size: 1rem;
  color:#fff!important;
  font-weight: bold;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 0, 0, 0.3);
  padding: 1em 0;
}


/* ======== PRODUCT PAGE ======== */

h1.product-single__title, h2.product-single__title {
  Font-family: 'Figtree' !important;
  font-weight: 600!important;
  letter-spacing: 0.1px !important;

}

/*div.page-content.page-content--product {
    margin-top: 3rem!important;
}*/

/*div.page-width.page-content.page-content--top {
   padding-top: 0px!important;
}/*


/* More payment options link styling */
.shopify-payment-button__more-options {
  font-weight: bold !important;
  color:#5433EB !important;
}

/*producct price styling*/

.product__price {
  font-weight: 600 !important;
}

p.product-single__sku {
  color: #9AA0A6!important;
}

.product__price.product__price--compare {
    font-weight: normal !important;
    color: #9AA0A6!important;
}

.product__price.on-sale {
    font-weight: bold !important;
}

/* Product price savings text - make bold */
.product__price-savings {
  font-weight: regular;
  font-size:1.25em!important;
}

/* Make product price label visible */

.visually-displayed {
display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #202124 !important;
  text-align:left!important;
}


#shopify-section-template--25634224865590__main h1, #shopify-section-template--25634224865590__main h2, #shopify-section-template--25634224865590__main h3 {
        text-transform: uppercase !important;
}


/* LIVE PRODUCT OPTIONS WIDGETS */

.cl-po--label {
  font-weight: bold!important;
}

.cl-po--option {
  padding-bottom:0!important;
  padding-top: 1em!important;
  margin-bottom:1rem!important;

}

.cl-po--help {
  color: #191308 !important;
  font-size: 14px! important;
}

/* --- dynamic product details section ---*/

div.setting-details {
  padding-top: 1em;
  padding-left: 10px;
}

div.setting-details {
  padding-top: 1em;
  padding-left: 10px;
}

div.certification-details {
  padding-left: 10px;
}

h3.details-heading {
  font-size: 18px!important;
}


/* SIRV THUMBNAILS */
/* Spin icon is self-hosted as /assets/icon.spin.11.svg to eliminate an external
   network request to scripts.sirv.com during CSS render. Do NOT change back to
   the CDN URL — it adds a DNS lookup + request that delays thumbnail rendering. */
.smv-thumbnails .smv-selector[data-type="spin"]:before {
    background-image: url(icon.spin.11.svg)!important;
}

.sirv-hint {
    top: auto;
    bottom: 0 !important;
}

.sirv-spin .spin-canvas-container {
    cursor: grabbing !important;
}



/* Ensure Sirv viewer stays visible when theme.js races with Sirv init.
   Must handle BOTH Sirv theme-match paths:
     Impulse (galleryContainer) → #sirv-media-viewer-block is INSIDE [data-product-images] > .product__photos
     Impulse_2 (galleryElement) → #sirv-media-viewer-block REPLACES [data-product-images] entirely

   CRITICAL: Only force display:block AFTER InitSMV() has positioned the viewer.
   InitSMV adds a sirv-theme-* class when it moves the block into the gallery.
   Before that, the block has style="display:none" which MUST be respected —
   otherwise sirv.js sees the viewer in the wrong DOM position and caches
   stale dimensions, causing the spin to freeze and thumbnails to vanish. */
#sirv-media-viewer-block[class*="sirv-theme-"] {
    display: block !important;
    position: relative !important;
}
/* Fallback: if sirv-theme-* class is lost (e.g. after fullscreen close),
   keep the viewer visible when it's inside the product section.
   Uses the section wrapper as anchor — always present regardless of
   Sirv's internal class management. */
[data-section-type="product"] #sirv-media-viewer-block,
.product-single__sticky #sirv-media-viewer-block {
    display: block !important;
    position: relative !important;
}
/* galleryContainer path: SIRV sits inside .product__photos */
[data-product-images] > .product__photos > #sirv-media-viewer-block {
    z-index: 1;
}
/* galleryElement path: SIRV sits as a sibling where [data-product-images] was */
.product-single__sticky > #sirv-media-viewer-block {
    z-index: 1;
}

/* Keep the offscreen gallery that InitSMV() creates truly hidden.
   galleryContainer path: hidden div is inside .product__photos */
[data-product-images] > .product__photos > div[sirv-hidden] {
    position: absolute !important;
    top: -10000px !important;
    left: -10000px !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* galleryElement path: the entire [data-product-images] clone gets sirv-hidden */
[data-product-images][sirv-hidden] {
    display: none !important;
    position: absolute !important;
    top: -10000px !important;
    left: -10000px !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ======== SIRV VIEWER INTERNAL EXEMPTIONS ========
   The broad img { opacity:1; visibility:visible; animation:none } rules above
   can interfere with SIRV's internal rendering pipeline:
   - visibility:visible forces inactive gallery slides to show
   - animation:none blocks SIRV's CSS transitions for thumbnails/loading
   Reset these for elements inside the SIRV viewer so SIRV manages its own state.
   The ID selector (#) provides enough specificity to override the tag selectors. */
#sirv-media-viewer-block img,
#sirv-media-viewer-block .image-element,
#sirv-media-viewer-block image-element {
    visibility: inherit !important;
    animation: revert !important;
}

/* ======== SIRV FULLSCREEN OVERLAY EXEMPTIONS ========
   Sirv's fullscreen overlay (.smv-fullscreen, .smv-content) is appended
   to <body>, OUTSIDE #sirv-media-viewer-block. The block-scoped exemptions
   above don't reach it. Without these rules the global
   img { animation:none !important; visibility:visible !important }
   overrides break Sirv's internal slide-management in fullscreen,
   causing a blank overlay and orphaned DOM state on close. */
.smv-fullscreen img,
.smv-fullscreen .image-element,
.smv-fullscreen image-element,
.smv-content img {
    visibility: inherit !important;
    animation: revert !important;
}

/* ======== HIDE SIRV FULLSCREEN BUTTON ON MOBILE ========
   Sirv's fullscreen overlay is incompatible with the broad CSS overrides
   this theme requires (visibility/animation resets for lazy-load fixes).
   On mobile the fullscreen opens blank and after closing it the entire
   Sirv viewer vanishes. Hiding the button prevents users from entering
   the broken fullscreen path. Inline zoom (trigger:'click') still works.
   Desktop keeps the button because the overlay renders correctly there. */
@media only screen and (max-width: 768px) {
    .smv-button-fullscreen {
        display: none !important;
    }
}

{%- comment -%} JD-CUSTOM: Mobile near-full-width Sirv gallery {%- endcomment -%}
/* ======== MOBILE: NEAR-FULL-WIDTH SIRV GALLERY ========
   Breaks the Sirv viewer out of the 17px page-width padding so the
   ring image is nearly edge-to-edge on mobile. Keeps 6px breathing room.
   Hides Sirv's arrows + loading UI on mobile — our blur-up placeholder
   handles the loading state and users swipe to navigate.
   TO REVERT: Remove this entire @media block. */
@media only screen and (max-width: 768px) {
    /* Break #sirv-media-viewer-block out of the page-width padding */
    .product-single__sticky #sirv-media-viewer-block,
    [data-section-type="product"] #sirv-media-viewer-block {
        margin-left: -11px;
        margin-right: -11px;
        width: calc(100% + 22px);
    }

    /* Hide ALL Sirv slide navigation arrows on mobile.
       Covers every known Sirv arrow class:
         .smv-arrow-control  = arrow wrapper/hit area
         .smv-arrow          = the arrow icon itself
         .smv-arrow-prev/next = specific left/right variants
       Users swipe to navigate — arrows just eat into the ring image. */
    #sirv-media-viewer-block .smv-arrow-control,
    #sirv-media-viewer-block .smv-arrow,
    #sirv-media-viewer-block .smv-arrow-prev,
    #sirv-media-viewer-block .smv-arrow-next,
    #sirv-media-viewer .smv-arrow-control,
    #sirv-media-viewer .smv-arrow,
    #sirv-media-viewer .smv-arrow-prev,
    #sirv-media-viewer .smv-arrow-next {
        display: none !important;
    }
}

/* ======== SIRV SPINNER HIDING ========
   Spinners (.smv-spinner, .sirv-spinner, .spin-pre) are now hidden
   via the Sirv app's CSS styling field in Shopify Admin → Apps → Sirv.
   That CSS loads inline via content_for_header, so it applies instantly
   before custom.css even loads. No duplicates needed here.
   ================================================ */

/* ======== THUMBNAIL SHIMMER WHILE LOADING ========
   A subtle shimmer placeholder over the thumbnail strip until
   Sirv populates it with actual images. Uses ::before on the
   container; Sirv's own thumbnail content sits on top (z-index)
   so the shimmer naturally disappears as thumbnails render.
   TO REVERT: Remove this block. */
.pdp-gallery-thumbnails {
    position: relative;
    overflow: hidden;
}
/* Shimmer only while Sirv is still loading (loading-sirv is removed on viewer:ready) */
.SirvContainer.loading-sirv .pdp-gallery-thumbnails::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: linear-gradient(90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 4px;
}
.pdp-gallery-thumbnails .smv-thumbnails {
    position: relative;
    z-index: 1;
}
{%- comment -%} /JD-CUSTOM {%- endcomment -%}


/* ADD TO CART BUttoN stYLING */
button.btn.btn--full.add-to-cart {
  font-size: 1em!important;
  background-color: #52376c !important;
}


/* RING SIZE SELECTOR STYLING */
 div.choices {
  border: 2px solid #52376c !important
 }

 /* ring size label appearance */
.ring-size
 {
  font-weight: bold!important;
  font-size:1em!important;
 }

/* SHOP PAY BNPL -- Hide */
div.shopify-payment-terms.product__policies {
  display: none!important;
}



/* Salespoints Styling — matched to jd-sales-points__item (checkout page) */

li.sales-point {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    background-color: #faf8f3 !important;
    border: 1px solid #e8e2d4 !important;
    color: #4a3f28 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: calc(var(--typeBaseSize) * .8) !important;
}
@media only screen and (max-width: 768px) {
  li.sales-point {
    font-size: calc(var(--typeBaseSize) * .85) !important;
  }
}

/* ALL CUSTOM CONTENT SECTIONS */
div.custom-content {
  margin-top: 1rem!important;
  margin-bottom: 1rem!important;
}

/* ===== PRODUCT PAGE: MAGIC MAKE AN OFFER APP STYLING ===== */

/* Hide the custom badge and remove any spacing it might add */
make-an-offer-badge[data-type="badge"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Product Page Button Styling */



/* Offerly Modal Styling*/



/* Make an Offer Submit Offer Button*/

button#ma-make-an-offer-open-button {
  border: solid 2px  #52376c !important;
  text-transform: uppercase!important;
  background: #fff !important;
  color: #52376c !important;
  letter-spacing: .3em!important;
  font-weight: 700! important;
  font-size: 1em!important;
}


/* Ensure the Make an Offer modal sits above everything when open */
#ma-make-an-offer-modal,
.ma-make-an-offer-modal,
make-an-offer-badge[data-type="modal"] {
  z-index: 2147483647 !important;
}

/* Keep the floating Offer button below header (z-index: 20), drawers (1000) & search (10000) */
[id*="ma-make-an-offer"]:not(#ma-make-an-offer-modal) {
  z-index: 10 !important;
}


#modal-product-offer-notes {
  display: none!important;
}

#modal-220613247286-notes-label {
  display: none!important; 
}

div.mao-modal-product-card-quantity {
  display:none!important;
}

/* ===== END PRODUCT PAGE: MAGIC MAKE AN OFFER APP STYLING ===== */

/* Klarna Badge */

::part(osm-badge) {
  height: 20px !important;
  width: auto !important;
}

::part(osm-container) {
  padding: 2px 2px !important;
  border: none !important;
  margin-top: 1em!important;
  margin-bottom: 1em!important;
}



/* ===== sImage "You May Also Like" — Carousel + Card Styling ======= */
/*
   CHANGE LOG (Feb 2026):
   Converted the static 4-column grid into a lightweight CSS-scroll carousel.
   Desktop: 4 visible cards per page, arrows to navigate.
   Mobile:  2 visible cards per page, touch-swipe to navigate.
   No external libraries — pure CSS scroll-snap + vanilla JS arrows.
   All card styling (discount flags, pricing, title) is preserved.
*/

/* ── sImage app-block container selector ────────────────────────────── */
/* Uses [id*="simage_similar_items_by_image_app_block"] attribute selector
   so CSS works across all themes (not tied to a specific block ID). */

/* ── Section heading ─────────────────────────────────────────────────── */
[id*="simage_similar_items_by_image_app_block"] h2 {
  font-size: 1.85rem !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* ── CAROUSEL WRAPPER (injected by simage-card.js) ───────────────────
   .simage-carousel-wrap  = the outer positioning context (arrows live here)
   #similar-products-list = the scrollable track (was a grid, now flexbox) */

/* Outer wrapper — positions the prev/next arrows */
.simage-carousel-wrap {
  position: relative;
  width: 100%;
}

/* The <ul> becomes a horizontal scroll track.
   IMPORTANT: The JS (simage-card.js) also sets these as INLINE styles to
   guarantee they override the sImage app's Tailwind grid classes (tw-grid,
   tw-grid-cols-*). This CSS exists as a belt-and-suspenders fallback. */
[id*="simage_similar_items_by_image_app_block"] #similar-products-list,
#similar-products-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: 12px !important;
  padding: 0 0 12px !important;
  margin: 0 !important;
  list-style: none !important;
  /* Kill Tailwind grid properties */
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: unset !important;
  /* Hide scrollbar — keep swipe */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[id*="simage_similar_items_by_image_app_block"] #similar-products-list::-webkit-scrollbar,
#similar-products-list::-webkit-scrollbar {
  display: none;
}

/* ── CARD SIZING — Desktop: 4 per view, Mobile: 1.5 per view ────── */
[id*="simage_similar_items_by_image_app_block"] #similar-products-list > li {
  /* Desktop default: 4 cards per viewport row */
  flex: 0 0 calc((100% - 36px) / 4) !important; /* 3 gaps × 12px = 36px */
  max-width: calc((100% - 36px) / 4) !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (max-width: 749px) {
  [id*="simage_similar_items_by_image_app_block"] #similar-products-list > li {
    /* Mobile: 1 full card + half peek of the 2nd card.
       Math: 1.5 cards + 1 visible gap (12px) = viewport width
       → card width = (100% - 12px) / 1.5 */
    flex: 0 0 calc((100% - 12px) / 1.5) !important;
    max-width: calc((100% - 12px) / 1.5) !important;
  }
}

/* ── CAROUSEL ARROW BUTTONS (injected by JS) ─────────────────────── */
.simage-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-60%); /* visual center on the image area */
  z-index: 20;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, box-shadow 0.2s;
  padding: 0;
  color: #333;
}
.simage-carousel-btn:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.simage-carousel-btn:disabled {
  opacity: 0;
  pointer-events: none;
}
.simage-carousel-btn--prev { left: -14px; }
.simage-carousel-btn--next { right: -14px; }
/* On mobile, tuck arrows inside the container so they don't overflow the page */
@media (max-width: 749px) {
  .simage-carousel-btn--prev { left: 4px; }
  .simage-carousel-btn--next { right: 4px; }
  .simage-carousel-btn {
    width: 30px;
    height: 30px;
  }
}
/* Arrow SVG icons inside the buttons */
.simage-carousel-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── DOT PAGINATION (injected by JS) ─────────────────────────────── */
.simage-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 0;
  margin: 0;
  list-style: none;
}
.simage-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.simage-carousel-dot.active {
  background: #52376c;
}

/* ── Remove Tailwind card chrome — match clean DFD look ──────────── */
[id*="simage_similar_items_by_image_app_block"] .tw-overflow-hidden {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[id*="simage_similar_items_by_image_app_block"] .tw-border-gray-200 {
  border: none !important;
}
[id*="simage_similar_items_by_image_app_block"] .tw-shadow-sm,
[id*="simage_similar_items_by_image_app_block"] .hover\:tw-shadow-md {
  box-shadow: none !important;
}
[id*="simage_similar_items_by_image_app_block"] .tw-rounded-lg {
  border-radius: 0 !important;
}

/* Card padding */
[id*="simage_similar_items_by_image_app_block"] .tw-p-4 {
  padding: 0.5em !important;
}

/* ── Product title styling (matches Doofinder .dfd-card-title) ────── */
[id*="simage_similar_items_by_image_app_block"] h3,
[id*="simage_similar_items_by_image_app_block"] h3 a {
  font-family: "Figtree Fallback", "Figtree", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1em !important;
  line-height: 1.25em !important;
  color: #52376c !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: normal !important;
  /* 3-line clamp with ellipsis — matches Doofinder card truncation */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  margin-bottom: 4px !important;
}
[id*="simage_similar_items_by_image_app_block"] h3 a:hover {
  text-decoration: none !important;
  color: #52376c !important;
}

/* Override Tailwind line clamp to use our 3-line clamp instead of 2 */
[id*="simage_similar_items_by_image_app_block"] .tw-line-clamp-2 {
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Image container - position relative for discount flag */
[id*="simage_similar_items_by_image_app_block"] .tw-relative {
  position: relative !important;
}

/* ── Discount flag — positioned top-right of image ───────────────── */
[id*="simage_similar_items_by_image_app_block"] .simage-discount-flag {
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: #c20000 !important;
  color: #fff !important;
  padding: 4px 8px;
  font-size: 0.75em;
  font-weight: 700;
  z-index: 10;
  line-height: 1;
}

/* ── Price container styling ─────────────────────────────────────── */
[id*="simage_similar_items_by_image_app_block"] .tw-mt-auto {
  margin-top: 5px !important;
}
[id*="simage_similar_items_by_image_app_block"] .simage-price-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-top: 2px !important;
  font-size: 1rem!important;
}
[id*="simage_similar_items_by_image_app_block"] .simage-price-line {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 8px !important;
}
[id*="simage_similar_items_by_image_app_block"] .simage-compare-price {
  color: #9AA0A6 !important;
  font-size: 0.75em !important;
  text-decoration: line-through !important;
  text-decoration-line: line-through !important;
  font-weight: 300 !important;
  line-height: 1rem !important;
  order: 1 !important;
  padding-right: 5px !important;
}
[id*="simage_similar_items_by_image_app_block"] .simage-current-price {
  color: #191308 !important;  /* matches Doofinder .dfd-card-price--sale */
  font-size: 0.75em !important;
  font-weight: 600 !important;
  line-height: 1em !important;
  order: 1 !important;
  padding-right: 5px !important;
}
[id*="simage_similar_items_by_image_app_block"] .simage-savings {
  display: none !important;  /* Discount % is shown via the red flag on the image instead */
}

/* Hide default Tailwind price when enhanced pricing exists */
[id*="simage_similar_items_by_image_app_block"] .tw-mt-auto:has(.simage-price-container) > span {
  display: none !important;
}

/* ── simage-card.js compare-price fallback ──────────────────────── */
[id*="simage_similar_items_by_image_app_block"] span.simage-compare-price {
  color: #9AA0A6 !important;
  font-size: 0.75em !important;
  text-decoration: line-through !important;
  text-decoration-line: line-through !important;
  font-weight: 300 !important;
  line-height: 1em !important;
  padding-right: 5px !important;
}



/* Ensure all sImage prices use correct color */
[id*="simage_similar_items_by_image_app_block"] .tw-text-gray-900 {
  color: #52376c !important;
}

/* JD-CUSTOM: Share + SKU meta row — CSS moved to snippets/section.flex-pdp.sku.liquid */
/* /JD-CUSTOM */



/* ======== END PRODUCT PAGE SECTION ========== */




 /* CUSTOMER REVIEWS SECTION */

/* Product page — Testimonials — "Customer Reviews" heading */
#shopify-section-template--25634224865590__testimonials .section-header h2 {
  font-size: 1.85rem!important;
  font-weight: 400!important;
  text-align: center;
}


/* Testimonials section — make links purple (normal/visited/hover) */
#shopify-section-template--25634224865590__testimonials a,
#shopify-section-template--25634224865590__testimonials a:visited {
  color: #52376c !important;
}

#shopify-section-template--25634224865590__testimonials a:hover,
#shopify-section-template--25634224865590__testimonials a:focus {
  color: #52376c !important;
  text-decoration: underline;
}

span.testimonial-stars {
  color: #ff1a1a!important;
}

/* Keep testimonial slides from all rendering at once; let Flickity control visibility */
.testimonials-section .testimonials-slide {
  display: none !important;
  opacity: 0 !important;
}

.testimonials-section .testimonials-slide:first-child {
  display: block !important;
  opacity: 1 !important;
}

.testimonials-section .flickity-slider .testimonials-slide {
  display: block !important;
  opacity: 1 !important;
}

/* ======== END PRODUCT PAGE ======== */



/* ======== CART PAGE ======== */

/* Force cart images to load instantly - no lazy loading */
.cart__image img,
.cart-item__image img,
.cart-item img,
[data-cart-item-image] img,
.cart__row img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Ensure cart image containers don't hide images */
.cart__image,
.cart-item__image,
[data-cart-item-image],
.cart__image-wrapper {
  opacity: 1 !important;
}

/* Remove AOS animations on cart images */
.cart__image [data-aos],
.cart-item__image [data-aos] {
  opacity: 1 !important;
  animation: none !important;
}

.cart-notes {
  margin-top: 0 !important;
}

a.cart__item-name {
    color: #52376c !important;
    text-transform: none !important;
    font-size: 1em !important;
    line-height: 1.3em !important;
    font-weight: 600 !important;
    font-family: 'Figtree', serif !important;
}

.cart__item--properties {
  font-size: 1em!important;
  font-family: 'Figtree', var(--jd-font-sans);
  font-weight: 400;
}

/* ---- BNPL ADS ---- */
p.affirm-as-low-as {
  font-size:14px!important;
}

/* ======== END CART PAGE ======== */


/* ======== WISHLIST PAGES ======== */

/* Wishlist button hover text */
.swym-wishlist-collections-v2-container {
  position: relative;
}


.swym-wishlist-collections-v2-container:hover::after {
  content: "Add to Wishlist";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background-color: #202124;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.875rem;
  z-index: 1000;
}


/* ======== END WISHLIST PAGES ======== */


/* ======== ORDER PAGE ======== */

/* Order page: post-total resizing message */
.resizer-fee-row .resizer-fee-text {
  color: #5a31f4;         /* the purple you requested */
  font-weight: 700;       /* bold */
  margin: 6px 0 0 0;
}

.resizer-fee-row .resizer-subtext {
  color: #6b7280;         /* neutral gray (tweak if your theme uses a different gray) */
  font-size: 12px;
  line-height: 1.35;
  margin: 2px 0 0 0;
}



/* ======== ENTER THE ILLUSIVE CHECKOUT PAGE!!!  ======== */

/*div.i8Dpn {
 background: #52376c !important;
}

header.EAjaz._8wrz5.d5pfT._1fragemux._1fragemow._1fragemoo {
  background-color:  #52376c !important;
  background: #52376c !important;
}*/


/* ============= BLOG STYLING ============= */


div#dib-post-single.dib-post-single {
  padding-left: 6%;
  padding-right: 6%;
  flex-wrap:wrap!important;
  width:100%;
}

a.dib-cta {
  color: #fff!important;
}

p.blog-column {
  font-size: 16px!important;
}


/* BLOG TYPOGRAPHY */

/* In-page blog ads for products */

.dib-product-title {
  font-size: 1em !important;
    margin-top: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: "Figtree Fallback" !important;
    margin-bottom: 0!important;
}

.dib-product {
  margin:0!important;
}

p.dib-prod-desc {
  /* line-height: 1.12!important;*/
  display: none!important;
}


/* =================== FOOTER BADGE IMAGES ====================== */

.footer__image-pair {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Footer block internal two-column layouts */
@media only screen and (min-width: 769px) {
  .site-footer__linklist--two-col {
    column-count: 2;
    column-gap: 20px;
  }

  .footer__collapsible--two-col {
    column-count: 2;
    column-gap: 20px;
  }
}

/* =================== CUSTOM MODAL STYLES ====================== */

/* Modal Popup Styles */
.custom-modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.modal-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}

.modal-dialog {
  position: relative;
  width: 80%;
  max-width: 1200px;
  margin: 50px auto;
  z-index: 10000;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 0px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 80vh;
}

.modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
}

.modal-close {
  position: absolute;
  right: 15px;
  top: 15px;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  line-height: 1;
  color: #333;
  z-index: 1;
}

.modal-close:hover {
  color: #000;
}

.modal-body h2 {
  margin-top: 0;
  font-size:2em!important;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  padding-bottom: 10px;
}

.modal-body h3 {
  font-size: 1.5em!important;
}

.rte h3 {
  margin-top: 1em!important;
  margin-bottom: 4px!important;
}


.modal-body p {
  font-size: 1em!important; /* 80% of paragraph size */
  margin-bottom: .6em!important;
}

.modal-body a {
  color: #52376c;
}

/* Sales Point Link Styles — matched to jd-sales-points__link (checkout page) */
.sales-point-link {
  text-decoration: underline;
  color: rgb(136, 136, 136);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  font-size: calc(var(--typeBaseSize) * .8);
}
@media only screen and (max-width: 768px) {
  .sales-point-link {
    font-size: calc(var(--typeBaseSize) * .85);
  }
}








/* =============================================== */
/* ======== MOBILE STYLES – IMPORTANT!!!  ======== */

/* Force collection/product grid sections visible; avoid globally forcing all .shopify-section so sliders can control their own visibility */
.collection-grid, .product-grid, .grid, section[data-section-type="collection-template"],
section[data-section-type="collection-grid"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Move mobile menu icon to far right on mobile */
@media only screen and (max-width: 768px) {
  /* Make icons container use flexbox */
  .site-nav__icons {
    display: flex !important;
    align-items: center;
  }
  
  /* Move hamburger menu to the end (far right) */
  .site-nav__icons .js-drawer-open-nav {
    order: 999;
    margin-left: auto;
  }
  
  /* Keep other icons in their original order */
  .site-nav__icons .js-search-header {
    order: 1;
  }
  
  /* Bag/cart: also match by data-icon. The cart link dropped
     .js-drawer-open-cart on 2026-06-01 (the bag now links straight to /cart),
     so without this it falls back to order:0 and jumps to the LEFT of the
     search icon on mobile. Keep both selectors for resilience. */
  .site-nav__icons .js-drawer-open-cart,
  .site-nav__icons .site-nav__link--icon[data-icon] {
    order: 2;
  }
}

 /* so prices align */

 @media only screen and (max-width: 768px) {
    .product-single__meta {
      text-align:left!important;
    }
  }


@media (max-width: 1024px) {


    h2.h1.hero__title {
  font-size: 3rem !important;
  }

  div.hero__subtitle {
      display: none !important;
  }

  .hero__link .btn {
      font-size: 1rem !important;
  }

  .collection-item__title--heading {
    font-size: 1.2rem !important;
  }

    .grid-product {

      margin-bottom: 1.5rem!important;

    }


  h3.section-header__title {
    font-size: 1.65rem!important;
    margin-top: 2rem;
}

.grid-product_title {
  font-size: 0.85rem!important;
}

.grid-product__title.grid-product__title--heading {
  font-size: 0.85rem!important;
}

    .page-content.page-content--product {
      padding-top: 0.5rem!important;
      padding-bottom: 0!important;
    }







div.grid-product__price
 {
    font-size: 0.8rem!important;
    margin-top: 2px!important;
    font-weight: 600 !important;
}

.grid-product__price--original {
    font-weight: normal !important;
    color: #9AA0A6!important;
     padding-top: 0!important;
}

.grid-product__price--savings {
    display: none !important;
}

/*Sticky FIlter on Mobile: Product and Collections Pages */

#gf-controls-container {
  position: sticky!important;
  top: var(--jd-header-height, 80px);
  z-index: 900!important;
  background: rgba(255,255,255,0.7)!important;
  margin-bottom:0px!important;
}

.gf-refine-toggle-mobile{
  border: solid 2px #9AA0A6!important;
}

ul.globo-selected-items{
  margin-bottom: 0!important;
  padding-bottom: 0!important;
}

.gl-actions {
    margin-bottom: 0!important;
  padding-bottom: 0!important;
}

div#dib-post-single.dib-post-single {
  padding-left: 2%!important;
  padding-right: 2%!important;
}

}

/* Recently Viewed Section */

/* ======== SIDEBAR NAVIGATION PAGE ======== */
/* Sidebar Navigation Layout */
.sidebar-nav-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  margin-top: 40px;
  margin-bottom: 60px;
}

/* Sidebar Styles */
.sidebar-nav {
  position: sticky;
  top: 120px;
  align-self: start;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.sidebar-nav__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav__link {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  background: #f5f5f5;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: #191308;
  transition: all 0.2s ease;
}

.sidebar-nav__link:hover {
  background: #e8e8e8;
  border-left-color: #52376c;
}

.sidebar-nav__link.is-active {
  background: #fff;
  border-left-color: #52376c;
  color: #52376c;
  font-weight: 600;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.08);
}

/* Content Area Styles */
.sidebar-nav__content {
  min-height: 400px;
}

.sidebar-nav__panel {
  display: none;
}

.sidebar-nav__panel.is-active {
  display: block;
  animation: sidebarNavFadeIn 0.3s ease;
}

@keyframes sidebarNavFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.sidebar-nav__title {
  color: #52376c;
  font-size: 2rem;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .sidebar-nav-container {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 20px;
  }
  
  .sidebar-nav {
    position: static;
    max-height: none;
  }
  
  .sidebar-nav__menu {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
  }
  
  .sidebar-nav__link {
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  
  .sidebar-nav__link.is-active {
    border-left: none;
    border-bottom-color: #52376c;
  }
  
  .sidebar-nav__title {
    font-size: 1.5rem;
  }
}

/* ======== DFD WIDGET FONT SIZE ======== */
.dfwidget-host {
  --font-size: 18px !important;
}


/* ======== MOBILE HEADER: HAMBURGER LEFT OF LOGO ======== */
@media only screen and (max-width: 768px) {
  /* Hide the original hamburger that lives inside header-icons (right side) */
  .header-item--icons .site-nav__icons .js-drawer-open-nav,
  .header-item--icons .js-drawer-open-nav,
  .site-nav__icons > .js-drawer-open-nav {
    display: none !important;
  }

  /* Show and style the new mobile-only hamburger to the left of the logo */
  .header-item--mobile-nav {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 4px;
  }

  .header-item--mobile-nav .site-nav__link--icon {
    padding: 8px;
    color: #ffffff;
  }
}

/* Drawer must sit above the sticky search bar (z-index: 901) */
#NavDrawer.drawer {
  z-index: 1000 !important;
}
/* The overlay behind the drawer also needs to be above the sticky search */
.js-drawer-open .main-content:after {
  z-index: 999 !important;
}

/* JD-CUSTOM: Mobile nav drawer — 90% width + dark overlay
   Default Impulse sets .drawer--left to 350px (max-width:95%).
   On mobile we cap it at 90vw so the page peeks through on the right,
   and darken the overlay for contrast. To revert, remove this block. */
@media only screen and (max-width: 768px) {
  #NavDrawer.drawer.drawer--left {
    width: 90vw !important;
    max-width: 90vw !important;
    left: -90vw !important;
  }
  #NavDrawer.drawer.drawer--left.drawer--is-open {
    transform: translateX(90vw) !important;
  }
  /* Dark overlay behind the drawer */
  .js-drawer-open .main-content:after {
    background-color: rgba(0, 0, 0, 0.55) !important;
  }
}
/* /JD-CUSTOM */
/* ======== END MOBILE HEADER: HAMBURGER LEFT OF LOGO ======== */

/* ======== TABLET HEADER: LOGO WIDTH + NAV SPACING ======== */
/* Applies at 769px–1199px (tablet through small desktop).
   The Shopify-generated site-header-structure.css sets flex-basis:300px on
   .header-item--logo; we override it here to reclaim horizontal space. */
@media only screen and (min-width: 769px) and (max-width: 1199px) {

  /* Shrink logo container from 300px → 250px */
  .header-layout--left-center .header-item--logo {
    flex: 0 0 250px !important;
    max-width: 250px !important;
  }

  /* Scope logo image + link overrides to the header only.
     Previously img.small--hide.image-element was unscoped and hit the hero. */
  .site-header__logo img.small--hide.image-element {
    width: 250px !important;
    aspect-ratio: auto 250 !important;
  }

  .site-header__logo .site-header__logo-link {
    width: 250px !important;
  }

  .site-header__logo-link {
    width:250px!important;
  }

  /* Cap the logo image itself to match */
  .header-layout--left-center .site-header__logo-image {
    max-width: 250px !important;
  }

  /* Remove the extra left indent between logo block and nav */
  .header-layout--left .site-navigation {
    padding-left: 0 !important;
  }

  /* Tighten horizontal padding on each nav link */
  .site-nav__link {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

}
/* ======== END TABLET HEADER ======== */

/* ======== JD BRAND STORY SECTION ======== */
/* Heading uses Gelasio (theme header font). All sizes in em. */

.jd-brand-story {
  max-width: 56em;
  margin: 0 auto;
  padding: 3em 1.25em 3.75em;
  text-align: center;
}

/* ── Heading — Gelasio ────────────────────────── */
.jd-brand-story__heading .rte {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.2;
  color: #52376c;
}
.jd-brand-story__heading .rte p,
.jd-brand-story__heading .rte h1,
.jd-brand-story__heading .rte h2 {
  font-size: 2.15em;
  margin: 0 0 0.35em;
}

/* ── Body text ────────────────────────────────── */
.jd-brand-story__intro .rte,
.jd-brand-story__supporting .rte {
  font-size: 1em;
  line-height: 1.55;
  color: var(--colorTextBody);
  max-width: 44em;
  margin-left: auto;
  margin-right: auto;
}
.jd-brand-story__intro {
  margin-bottom: 2.25em;
}
.jd-brand-story__supporting {
  margin-top: 2.25em;
}

/* ── Image grid (2-up) ─────────────────────────── */
.jd-brand-story__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em;
}
.jd-brand-story__image-wrap {
  overflow: hidden;
  border-radius: 0;
}
.jd-brand-story__image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── Section-level bg override ─────────────────── */
.jd-brand-story--has-bg {
  padding-top: 3.75em;
  padding-bottom: 3.75em;
}

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  .jd-brand-story {
    padding: 2em 1em 2.5em;
  }

  .jd-brand-story__heading .rte p,
  .jd-brand-story__heading .rte h1,
  .jd-brand-story__heading .rte h2 {
    font-size: 1.65em;
  }

  .jd-brand-story__intro .rte,
  .jd-brand-story__supporting .rte {
    font-size: 0.95em;
    max-width: 100%;
  }

  .jd-brand-story__intro {
    margin-bottom: 1.5em;
  }

  .jd-brand-story__supporting {
    margin-top: 1.5em;
  }

  .jd-brand-story__images {
    gap: 0.5em;
  }

  .jd-brand-story--has-bg {
    padding-top: 2em;
    padding-bottom: 2em;
  }
}

/* /JD-CUSTOM */

/* JD-CUSTOM: Hide breadcrumbs on collection pages */
.template-collection .breadcrumb,
.template-collection nav#uncomplicated-breadcrumbs {
  display: none !important;
}
/* /JD-CUSTOM */

/* JD-CUSTOM: Hide "Save x%" on collection grid items (theme + Doofinder) */
.template-collection .grid-product__price--savings,
.dfd-card-price--savings,
.dfd-card-savings,
.dfd-card .dfd-card-row:last-child .dfd-card-price--savings {
  display: none !important;
}
/* /JD-CUSTOM */

/* ======== END JD BRAND STORY SECTION ======== */

/* ======== CART CHECKOUT BUTTON ======== */
.btn.cart__checkout {
  font-size: 16px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
/* ======== END CART CHECKOUT BUTTON ======== */

/* ======== CART PAYMENT METHODS — CSS moved to snippets/cart-payment-methods.liquid ======== */

/* ======== KLAVIYO FORMS ======== */

/* JD-CUSTOM: Force Klaviyo embedded forms visible on mobile.
   Impulse's .collapsible-content--small sets height:0; opacity:0;
   overflow:hidden; visibility:hidden on ≤768px, which hides Klaviyo
   forms inside footer and page collapsible blocks.
   These rules ensure the form container and its parents stay open. */
[class*="klaviyo-form"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}
/* Un-collapse any parent that wraps a Klaviyo form */
.collapsible-content:has([class*="klaviyo-form"]),
.collapsible-content--small:has([class*="klaviyo-form"]),
.collapsible-content--all:has([class*="klaviyo-form"]) {
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  visibility: visible !important;
}
.collapsible-content__inner:has([class*="klaviyo-form"]) {
  transform: none !important;
}

/* JD-CUSTOM: Klaviyo embedded forms — stack fields on mobile
   Klaviyo injects inline flex/width styles via JS, so every property
   needs !important. We target both data-testid rows AND direct child
   divs of the form to cover all Klaviyo rendering paths. */
@media (max-width: 768px) {
  [class*="klaviyo-form"] form [data-testid="form-row"],
  [class*="klaviyo-form"] form > div[style*="display"] {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  [class*="klaviyo-form"] form [data-testid="form-row"] > div,
  [class*="klaviyo-form"] form > div[style*="display"] > div {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Override inline width on input/button wrappers */
  [class*="klaviyo-form"] form [data-testid="form-row"] > div > div,
  [class*="klaviyo-form"] form [data-testid="form-row"] > div > button,
  [class*="klaviyo-form"] form [data-testid="form-row"] > div > input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Klaviyo forms inside drawers/side-panels (narrow container, wide viewport) */
.drawer [class*="klaviyo-form"] form [data-testid="form-row"],
.drawer [class*="klaviyo-form"] form > div[style*="display"] {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.drawer [class*="klaviyo-form"] form [data-testid="form-row"] > div,
.drawer [class*="klaviyo-form"] form > div[style*="display"] > div {
  flex: 1 1 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* /JD-CUSTOM */

/* JD-CUSTOM: Footer column layout
   Mobile: single column stacked (theme default)
   Tablet (769-959px): 2-col wrapping grid
   Desktop (960px+): 4-col grid, logo+BBB stacked in col 1, others top-aligned
   To revert: remove this entire block. */

/* Logo column: background matches footer, image fills width, tight spacing */
@media only screen and (min-width: 769px) {
  /* Footer column body text: 14px */
  [data-section-type="footer-section"] .footer__collapsible,
  [data-section-type="footer-section"] .site-footer__linklist {
    font-size: 14px;
  }
  /* Logo block (custom text with image): fill width, match footer bg */
  [data-section-type="footer-section"] .grid > [data-type="custom"]:first-child {
    background-color: #52376c;
  }
  [data-section-type="footer-section"] .grid > [data-type="custom"]:first-child .footer__item-padding {
    padding-right: 0;
  }
  [data-section-type="footer-section"] .grid > [data-type="custom"]:first-child .image-wrap {
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    position: relative;
  }
  [data-section-type="footer-section"] .grid > [data-type="custom"]:first-child .image-wrap img,
  [data-section-type="footer-section"] .grid > [data-type="custom"]:first-child .image-wrap .image-element {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  /* Ensure collapsible inner doesn't clip the "Jewelry Depot, Inc." text */
  [data-section-type="footer-section"] .grid > [data-type="custom"]:first-child .collapsible-content__inner,
  [data-section-type="footer-section"] .grid > [data-type="custom"]:first-child .footer__collapsible {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
  }
  /* BBB/Yelp tight under logo text */
  [data-section-type="footer-section"] .grid > [data-type="image_pair"] {
    margin-top: 0;
    padding-top: 10px !important;
  }
}

/* Hide "Powered by Shopify" */
[data-section-type="footer-section"] .footer__small-text a[href*="shopify.com"] {
  display: none !important;
}
[data-section-type="footer-section"] p.footer__small-text:last-child {
  display: none !important;
}

/* Tablet: 2-column wrapping grid */
@media only screen and (min-width: 769px) and (max-width: 959px) {
  [data-section-type="footer-section"] .page-width > .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 22px;
  }
  [data-section-type="footer-section"] .page-width > .grid > * {
    float: none !important;
    width: auto !important;
    padding-top: 0 !important;
  }
  [data-section-type="footer-section"] .footer__clear {
    display: none !important;
  }
}

/* Desktop: 4-column grid, logo+BBB stacked in col 1 */
@media only screen and (min-width: 960px) {
  [data-section-type="footer-section"] .page-width > .grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 22px;
  }
  [data-section-type="footer-section"] .page-width > .grid > * {
    float: none !important;
    width: auto !important;
  }
  [data-section-type="footer-section"] .footer__clear {
    display: none !important;
  }
  /* Logo block → col 1, row 1 */
  [data-section-type="footer-section"] .grid > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  /* BBB/Yelp block → col 1, row 2 (under logo) */
  [data-section-type="footer-section"] .grid > :nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  /* Contact Us → col 2, spans both rows */
  [data-section-type="footer-section"] .grid > :nth-child(4) {
    grid-column: 2;
    grid-row: 1 / -1;
  }
  /* Links → col 3, spans both rows */
  [data-section-type="footer-section"] .grid > :nth-child(5) {
    grid-column: 3;
    grid-row: 1 / -1;
  }
  /* Visit Us → col 4, spans both rows */
  [data-section-type="footer-section"] .grid > :nth-child(6) {
    grid-column: 4;
    grid-row: 1 / -1;
  }
}

/* JD-CUSTOM: Payment icons — flex row, wrap on mobile, BitPay sized to match */
.payment-icons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  max-width: 100% !important;
  gap: 4px !important;
  padding: 0 !important;
}
.payment-icons .icon--payment {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.payment-icons .icon--payment svg {
  height: 24px !important;
  width: auto !important;
  max-height: 24px !important;
}
.payment-icons .icon--payment img {
  height: 24px !important;
  width: auto !important;
  max-height: 24px !important;
}
/* /JD-CUSTOM */

/* JD-CUSTOM: "Already in Shopping Bag" — Add to Cart button locked state
   Triggered when Shopify returns 422 (max quantity already in cart).
   Greys out the button and shows a green confirmation message below. */
.btn.btn--in-cart,
button.btn--in-cart,
.btn--in-cart {
  cursor: default !important;
  pointer-events: none !important;
  opacity: 0.45 !important;
}
.btn--in-cart:hover,
.btn--in-cart:focus,
.btn--in-cart:active {
  opacity: 0.45 !important;
}

/* Green confirmation message — matches FREE Shipping badge palette */
.jd-cart-success-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #2e7d32;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 3px;
  line-height: 1.4;
}
.jd-cart-success-msg a {
  color: #2e7d32;
  text-decoration: underline;
  font-weight: 700;
}
.jd-cart-success-msg a:hover,
.jd-cart-success-msg a:focus {
  color: #1b5e20;
  text-decoration: underline;
}

/* Red validation message — ring size required before ATC */
.jd-ring-size-req-msg {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #c0392b;
  background: #fff5f5;
  border: 1px solid #e57373;
  border-radius: 3px;
  text-align: center;
  line-height: 1.5;
}
.jd-ring-size-req-msg a {
  color: #c0392b;
  text-decoration: underline;
  font-weight: 700;
}
.jd-ring-size-req-msg a:hover,
.jd-ring-size-req-msg a:focus {
  color: #922b21;
  text-decoration: underline;
}
/* /JD-CUSTOM */

/* JD Share trigger gallery overlay rules removed — Share is now its own draggable PDP block */

/* JD-CUSTOM: Footer BBB/Yelp image-pair top-clip fix (desktop)
   On Chrome/desktop, the two badge images at the bottom of the left footer
   column were getting their top edge clipped. Root cause: the surrounding
   grid row + flex container ended up shorter than the image's intrinsic
   height (because `align-items: center` plus the explicit inline
   height attribute could push pixels above the cell's content box when
   the parent grid row was sized off the smaller sibling). This block:
   - lets the row grow to fit the tallest image,
   - aligns images to the top instead of centering,
   - removes any inherited overflow clipping,
   - guarantees the <a>/<img> render at full intrinsic height.
   To revert: remove this entire block. */
@media only screen and (min-width: 769px) {
  [data-section-type="footer-section"] .grid > [data-type="image_pair"],
  [data-section-type="footer-section"] .grid > [data-type="image_pair"] .footer__image-pair {
    overflow: visible !important;
    min-height: 0;
  }
  [data-section-type="footer-section"] .footer__image-pair {
    align-items: center !important;
    line-height: 1 !important;
    flex-wrap: nowrap !important;
  }
  [data-section-type="footer-section"] .footer__image-pair > a,
  [data-section-type="footer-section"] .footer__image-pair > img {
    display: inline-block;
    line-height: 0;
    vertical-align: top;
    max-width: 100%;
  }
  [data-section-type="footer-section"] .footer__image-pair > a {
    flex: 0 0 auto;
  }
  [data-section-type="footer-section"] .footer__image-pair img {
    display: block;
    max-height: none;
    object-fit: contain;
    vertical-align: top;
    transform: none !important;
    clip-path: none !important;
  }
}
/* /JD-CUSTOM */

/* ======== JD-CUSTOM (2026-05-21): Desktop persistent search bar ======== */
.jd-desktop-search {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: 0 4px 0 14px;
  min-width: 240px;
  height: 36px;
  vertical-align: middle;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin: 0;
}
.jd-desktop-search:hover,
.jd-desktop-search:focus-within {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.8);
}
.jd-desktop-search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  font-size: 13px;
  height: 100%;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.jd-desktop-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.jd-desktop-search__input:focus {
  box-shadow: none;
  outline: none;
}
.jd-desktop-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0.85;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.jd-desktop-search__btn:hover {
  opacity: 1;
}
/* ======== END JD Desktop Search Bar ======== */