/** Shopify CDN: Minification failed

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

**/
/* ============================================
   CUSTOM STYLES - Aurate Theme Customizations
   ============================================ */

/* === Font Imports === */
@font-face {
  font-family: "Ginto-Nord-Medium";
  src: url("https://cdn.shopify.com/s/files/1/1437/2544/files/GintoNord-Medium.woff2?v=1594752904") format("woff2"),
    url("https://cdn.shopify.com/s/files/1/1437/2544/files/GintoNord-Medium.woff?v=1594752904") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "BiancoSerif";
  src: url("https://cdn.shopify.com/s/files/1/1437/2544/files/BiancoSerif-Regular.eot?v=1594745908");
  src: url("https://cdn.shopify.com/s/files/1/1437/2544/files/BiancoSerif-Regular.eot?v=1594745908?#iefix") format("embedded-opentype"),
    url("https://cdn.shopify.com/s/files/1/1437/2544/files/BiancoSerif-Regular.woff?v=1594745908") format("woff"),
    url("https://cdn.shopify.com/s/files/1/1437/2544/files/BiancoSerif-Regular.ttf?v=1594745908") format("truetype"),
    url("https://cdn.shopify.com/s/files/1/1437/2544/files/BiancoSerif-Regular.svg?v=1594745908#BiancoSerif-Regular") format("svg");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
  /* Brand Colors - Primary */
  --color-primary: #f6a772;
  --color-primary-hover: #dc9260;
  --color-primary-dark: #a75022;
  /* Vendor text. Rust instead of coral for contrast on white (ClickUp 86bcnnfqb). */
  --color-vendor: #c05626;
  
  /* Brand Colors - Secondary (Recast) */
  --color-secondary: #ecab21;
  --color-secondary-hover: #ac7d19;
  
  /* Accent Colors */
  --color-accent: #f05522;
  --color-accent-orange: #e88a4d;
  --color-accent-dark: #9e542f;
  
  /* Text Colors */
  --color-text-base: #2d2d2d;
  --color-text-dark: #212529;
  --color-text-medium: #575757;
  --color-text-muted: #999999;
  --color-text-muted-alt: #9d9d9d;
  --color-text-light: #707070;
  --color-text-lighter: #5e5e5e;
  --color-text-lightest: #bababa;
  
  /* Border & Line Colors */
  --color-border: #e0e0e0;
  --color-border-dark: #ddd;
  --color-border-black: #000;
  
  /* Background Colors */
  --color-bg-white: #fff;
  --color-bg-off-white: #fdfdfd;
  --color-bg-cream: #fbf7f1;
  --color-bg-yellow: #f2d789;
  
  /* State Colors */
  --color-disabled: lightgray;
  
  /* Font Families */
  --font-ginto: "Ginto-Nord-Medium", sans-serif;
  --font-bianco: "BiancoSerif", sans-serif;
  --font-sofia: "sofia-pro", sans-serif;
  --font-pt-sans: pt-sans-narrow, Helvetica, "Franklin Gothic", Arial, Verdana, sans-serif;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    /* color: inherit; */
}
.h3, h3, .rte h3, .rte .h3 {
    font-size: 1.75rem;
}

/* === Font Utility Classes === */
.ginto-nord {
  font-family: var(--font-ginto);
  font-weight: normal;
}

.sofia-pro {
  font-family: var(--font-sofia);
}

.bianco-serif {
  font-family: var(--font-bianco);
}

/* === Heading Overrides === */
h1 {
  font-family: var(--font-ginto);
  font-size: 48px;
}

h1 em {
  font-family: var(--font-bianco);
  font-style: normal;
}

.h2,
.rte h2 {
  font-size: 40px;
}

.h3,
.rte h3 {
  font-size: 30px;
}

.heading:not(a) {
  font-family: var(--font-ginto);
}

.section__header h2 {
  font-family: var(--font-ginto);
  font-weight: normal;
}

.text-container h2,
.text-container h3 {
  font-family: var(--font-ginto);
  font-weight: normal;
}

/* === Text Emphasis Styles === */
.content-box.emphasis em,
.image-with-text__text-wrapper.emphasis em,
.multi-column__text-container.emphasis em {
  color: var(--color-accent);
  font-family: var(--font-bianco);
  line-height: 1.25;
  font-weight: 500;
  font-size: 2rem;
  font-style: normal;
}

.article__content h2 {
  color: var(--color-accent);
  font-family: var(--font-bianco);
  line-height: 1.25;
  font-weight: 500;
  font-size: 2rem;
  font-style: normal;
}

.article__content h4 {
  margin-bottom: 20px;
}

/* ============================================
   BUTTONS & LINKS
   ============================================ */

/* === Primary Buttons === */
.btnlink,
a.book,
.page-content a.btnlink,
.btn.klaviyo-bis-trigger {
  background: var(--color-primary);
  border-radius: 3px;
  color: var(--color-text-base);
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  padding: 20px 30px;
  text-align: center;
  text-decoration: none!important;
  text-transform: uppercase;
  transition: all 250ms;
  cursor: pointer;
  width: auto;
  margin-top: 20px;

}

.btnlink:hover,
a.book:hover,
.btn.klaviyo-bis-trigger:hover {
  background: var(--color-primary-hover);
  color: var(--color-bg-white);
}

/* === Recast Buttons === */
.btnlink-recast{
  color: var(--color-text-base);
  background: var(--color-secondary);
 /*  padding: 10px 25px; */
  transition: all 0.3s ease-in-out;
  margin-top: 20px;
  display: inline-block;
  /* width: fit-content; */
}
.recast #klaviyo-bis-button-container button{
  color: var(--color-text-base);
  background: var(--color-secondary);
}

.btnlink-recast:hover,.recast #klaviyo-bis-button-container button:hover {
  color: var(--color-bg-white);
  background: var(--color-secondary-hover);
}

/* === Link Colors === */
.page-content a:not(.btnlink):not(.btnlink-recast),
.text-container a:not(.button, .btnlink),
div.page-content a:not(.btnlink):not(.btnlink-recast) {
  color: var(--color-primary);
}

.content-box a:not(.button) {
  color: var(--color-primary);
  text-decoration: none;
}

.content-box a:not(.button):hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.multi-column__text-container a,
.multi-column__link {
  color: var(--color-primary);
  text-decoration: none;
}

.multi-column__text-container a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.multi-column__link {
  font-size: 18px;
}

.image-with-text__text-wrapper a:not(.button) {
  color: var(--color-primary);
  text-decoration: none;
}

.image-with-text__text-wrapper a.button {
  color: var(--color-bg-white);
}

.image-with-text__content .heading-link:hover h3 {
  color: var(--color-primary);
}

.image-with-text__content h2.heading.heading--small {
  color: var(--color-accent-dark);
}

.image-overlay a {
  text-decoration: underline;
}

.image-overlay a:hover {
  color: var(--color-primary);
}

a.heading-link:hover span {
  text-decoration: underline;
}

.shopify-installments__learn-more {
  color: var(--color-primary);
}

.nickel-msg a,
.policy-msg a,
.status a {
  color: var(--color-primary);
}

.nickel-msg a:hover,
.policy-msg a:hover,
.status a:hover,
.shopify-installments__learn-more:hover {
  color: var(--color-text-base);
}

/* ============================================
   PRODUCT PAGES
   ============================================ */

@media screen and (max-width: 740px) {
.product:not(.product--featured) {
  margin-top: 0;
}
}

/* === Product Meta === */
product-item .product-item-meta__vendor,
product-meta .product-meta__vendor,
.product-meta__vendor,
a.product-item-meta__vendor {
  color: var(--color-vendor);
  font-family: var(--font-sofia);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 15px;
  line-height: 21.75px;
}

h1.product-meta__title {
  font-family: var(--font-bianco);
  text-transform: capitalize;
  margin-bottom: 0px;
}

a.product-item-meta__title {
  font-family: var(--font-bianco);
  text-transform: capitalize;
  font-weight: 400;
  font-size: 18px;
  line-height: 26.1px;
  color: var(--color-text-base);
}

.product-lead-in {
  margin-bottom: 20px;
}

.product-lead-in a {
  color: var(--color-accent-orange);
}

.product-meta__vendor a:hover,
.product-lead-in a:hover {
  text-decoration: underline;
}

span.product-form__option-name,
span.product-form__quantity-label {
  font-family: var(--font-ginto);
  font-weight: 400;
}

p.heading.h5 {
  font-family: var(--font-bianco);
}
.heading:not(a),
p.heading.h5:not(a) {
  font-family: var(--font-ginto);
}

/* === Product Pricing === */
product-item .price-list {
  font-family: var(--font-sofia);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 15px;
  line-height: 21.75px;
}

.product-meta__price-list-container {
  margin-top: 10px;
}

.product-meta__price-list-container .price-list .price {
  font-size: 30px;
}

.price.price--highlight {
  color: var(--color-text-muted);
}

.product__info .price.price--highlight.price--large {
  color: var(--color-text-dark);
}

.product__info .price.price--compare {
  font-size: 20px;
}

.product-from-text {
  margin-right: 5px;
}

/* === Recast Product Variations === */
.recast .product-meta__vendor,
.container.recast a.product-item-meta__vendor.heading.heading--xsmall,
product-recommendations.recast a.product-item-meta__vendor.heading.heading--xsmall,
recently-viewed-products.recast a.product-item-meta__vendor.heading.heading--xsmall {
  color: var(--color-secondary);
}

.recast .btn.klaviyo-bis-trigger {
  background-color: var(--color-secondary);
}

.recast .price.price--compare {
  color: var(--color-text-muted-alt);
  text-decoration: none;
}

.header__cart-count.recast,
.announcement-bar.recast {
  background-color: var(--color-secondary);
}

.product__info .compare-at-new {
  display: none;
}

.product__info.recast .compare-at-new {
  display: inline;
}

/* === Product Form Elements === */
.product-form__text a:not(.btnLink) {
  color: var(--color-primary);
  text-decoration: underline;
}

.product-form__text a:not(.btnLink):hover {
  color: black;
}

.combo-box__option-item.is-disabled {
  text-decoration: line-through 2px solid;
  color: var(--color-disabled);
  opacity: 1;
}

/* === Stock Messages === */
div.stock-message {
  display: none;
  visibility: hidden;
}

div.stock-message.active {
  display: block;
  visibility: visible;
}

.nickel-msg,
.policy-msg {
  margin-top: 30px;
  color: var(--color-text-light);
}

.status {
  color: var(--color-text-light);
}

/* === Hidden Product Elements === */
.product-meta__label-list{
  display: none;
}

/* Hide the disabled "Sold out" button on sold-out variants at render time so the
   Klaviyo "Notify me" button stands in its place — ClickUp 86baexte7.
   #AddToCart[disabled] is server-rendered and re-rendered on every variant change,
   so this hides/shows correctly per variant with no wait for Klaviyo (no flash).
   !important is required because the theme sets an inline display on the button.
   Note: if Klaviyo is blocked/fails, no purchase button shows for sold-out
   variants — same as the theme's prior behavior. */
#AddToCart[disabled]:not([data-ws-disabled]) {
  display: none !important;
}
/* ...but a button disabled by a quantity limit (wholesale_buffer.js, data-ws-disabled) stays
   visible as a disabled CTA: the variant is in stock, so no Notify me button replaces it. */

/* Hide the dynamic checkout / "Buy with Shop" button on sold-out variants — ClickUp 86baexte7.
   Shopify's accelerated-checkout script sets an inline `display:block` on this wrapper
   after page load, which overrides both the theme's server <style> and any JS hide. Using
   CSS !important beats the inline style, and :has(#AddToCart[disabled]) keys it to the
   current variant's availability (re-rendered on variant change). Covers main + sticky. */
product-payment-container:has(#AddToCart[disabled]) .shopify-payment-button {
  display: none !important;
}
.product-form__payment-container:has(#AddToCart[disabled]){
  gap:0;
}

/* Hide the sticky add-to-cart bar on sold-out variants — ClickUp 86baexte7.
   The sticky bar's button is #StickyAddToCart (a different id from the main
   #AddToCart), so the rule above didn't cover it and the bar kept showing
   "SOLD OUT" on scroll. The Notify Me button only lives in the main form, so
   hide the whole bar when the current variant is unavailable. */
product-sticky-form:has(#StickyAddToCart[disabled]) {
  display: none !important;
}

/* Hide the Shop Pay installments / payment terms on sold-out variants — ClickUp 86baexte7.
   It sits in the price block ABOVE the button and loads in asynchronously, briefly reserving
   space and then collapsing (because the variant is sold out) — which shifted the Notify Me
   CTA during load. Hiding it from render on sold-out variants keeps the button from moving. */
.product-form:has(#AddToCart[disabled]) product-payment-terms {
  display: none !important;
}

/* Klaviyo Back in Stock placeholder anchor (ClickUp 86baexte7).
   This is the button shown on render, before Klaviyo swaps in its own "Notify me"
   button. Styled to match Klaviyo's button exactly so there is no visible
   swap/flash when Klaviyo loads. Klaviyo hides this anchor and renders its button
   as a sibling once it initializes. */
a.klaviyo-bis-trigger,
a.klaviyo-bis-trigger:hover,
a.klaviyo-bis-trigger:focus,
a.klaviyo-bis-trigger:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  font-family: 'sofia-pro', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase; /* added beyond your list — Klaviyo renders the text in all caps, so this keeps the swap seamless. Remove if undesired. */
  background-color: #F6A772;
  border-radius: 6px;
  height: 48px;
  width: 100%;
  cursor: pointer;
}
#klaviyo-bis-button-container{margin-bottom:0!important;}

button.shopify-payment-button__more-options {
  display: none;
  visibility: hidden;
}

.no-shop-pay shopify-payment-terms,
div.product__info.gift-cards product-payment-terms,
.product__info.fine-jewelry store-pickup,
div.product-form.fine-jewelry store-pickup {
  display: none;
}

.product__info.sold-out a.klaviyo-bis-trigger,
.product__info.sold-out .btn.klaviyo-bis-trigger,
.product__info.available .btn.klaviyo-bis-trigger {
  display: none;
}

.recast-buy-back-kit .btn.klaviyo-bis-trigger {
  display: none;
  visibility: hidden;
}

/* ============================================
   COLLECTIONS & GRID
   ============================================ */

.list-collections__item-image-wrapper {
  position: relative;
  height: 60vh;
  width: 100%;
  object-fit: cover;
}

h3.heading.h2 p {
  font-family: var(--font-ginto);
}

/* ============================================
   BLOG & ARTICLES
   ============================================ */

.article-item__image {
  width: 100%;
  height: 60vh;
  object-fit: cover;
}

.article__content .rte > h6 {
  color: var(--color-text-lighter);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-sofia);
  text-align: center;
}

.blog-logo-container {
  margin: 50px auto;
  display: block;
  width: fit-content;
}

.blog-view-all-link {
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

.blog-view-all-link:hover {
  color: var(--color-text-medium);
}

/* === FAQ Blog Template === */
.templateBlog .post {
  margin: 0 auto 3.236em;
  max-width: 800px;
}

.templateBlog .post img {
  display: block;
  margin-bottom: 15px;
}

.templateBlog .faq {
  border-bottom: 1px solid var(--color-border-black);
  padding: 20px 0;
}

.templateBlog .faq:first-child {
  border-top: 1px solid var(--color-border-black);
}

.templateBlog .faq--header {
  font-family: var(--font-ginto);
  font-size: 50px;
}

.templateBlog .faq--subheader {
  border-bottom: 1px solid var(--color-border-black);
  padding-bottom: 15px;
}

.templateBlog .faq .fa {
  margin-right: 0.5rem;
}

.templateBlog .faq a {
  color: var(--color-border-black);
  font-weight: 500;
}

.templateBlog .faq .faq--copy a {
  color: var(--color-primary);
}

.templateBlog .faq .faq--copy a.btnlink {
  color: var(--color-text-dark);
}
.templateBlog .faq p {
  padding-top: 10px;
}

.templateBlog #main p a {
  color: var(--color-secondary);
  text-decoration: underline;
}

.templateBlog .alt--bg {
  background-color: var(--color-bg-cream);
}

.templateBlog .faq--block h2 {
  color: var(--color-border-black);
  font-family: var(--font-ginto);
  font-size: 36px;
}

.templateBlog .faq table,
.templateArticle .faq table {
  border: 1px solid var(--color-border-dark);
  vertical-align: top;
}

.templateBlog .faq table td,
.templateArticle .faq table td {
  border: 1px solid var(--color-border-dark);
  padding: 10px;
  vertical-align: top;
}

.templateBlog .faq table p,
.templateArticle .faq table p {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.templateBlog .faq ul,
.templateArticle .faq ul {
  font-size: 18px;
  margin: 15px 0;
  padding-left: 10px;
}

.templateBlog .faq ul li,
.templateArticle .faq ul li {
  font-size: 18px;
  margin-bottom: 8px;
  padding-left: 10px;
  position: relative;
}

.templateBlog .faq ul li::before,
.templateArticle .faq ul li::before {
  position: absolute;
  left: -10px;
}

/* === FAQ Filters === */
#faq--filters {
  background-color: var(--color-bg-yellow);
}

#faq--filters p {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

#main #faq--filters a {
  color: var(--color-border-black);
  display: inline-block;
  margin-left: 15px;
  text-decoration: underline;
}

#main #faq--filters a.is--active {
  font-weight: bold;
  text-decoration: none;
}

#main #faq--filters a.is--active::after {
  content: "x";
  display: inline-block;
  margin-left: 5px;
  text-decoration: none;
}

/* ============================================
   NAVIGATION & HEADER
   ============================================ */

nav.breadcrumb {
  background-color: transparent;
}

.header__cart-count {
  background: var(--color-accent-orange);
}

/* ============================================
   FOOTER
   ============================================ */
div.klaviyo-form-L8a5cK .kl-private-reset-css-Xuajs1.go3176171171 p span.ql-font-sofiapro-semibold {
    font-family: var(--font-bianco)!important;
    text-transform: capitalize !important;
}
.footer__item-content .linklist__item {
  padding-top: 0;
  font-weight: 600;
  text-transform: uppercase;
}

.footer__item-title.heading.heading--small {
  font-family: var(--font-bianco);
  text-transform: capitalize;
  font-size: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid white;
  display: block;
}

.linklist__item a {
  font-weight: 500;
}

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

/* === Wufoo Forms === */
.wufoo {
  font-family: var(--font-pt-sans);
  font-size: 16px;
}

.wufoo #header,
.wufoo li h3 {
  display: none;
}

.wufoo li.focused {
  background-color: var(--color-bg-white);
}

.wufoo select.select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(/cdn/shop/files/select-bg.png?5673067234009135263);
  background-position: 97% center;
  background-repeat: no-repeat;
  border: 1px solid #aaa;
  color: #555;
  font-size: inherit;
  overflow: hidden;
  padding: 5px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 300px;
}

.wufoo label {
  font-family: var(--font-pt-sans);
  font-weight: 700;
  display: inline-block;
  line-height: 1.3;
  clear: both;
}

.wufoo input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: border-color;
  -moz-transition: border-color;
  transition: border-color;
  background-color: var(--color-bg-white);
  border-radius: 3px;
  border: 1px solid var(--color-border-dark);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  font-family: var(--font-pt-sans);
  font-size: 1em;
  margin-bottom: 0.75em;
  padding: 0.5em;
  width: 100%;
}

.wufoo input[type="file"] {
  width: auto;
}

.wufoo input[type="radio"] {
  clear: none;
  float: left;
  width: 2%;
}

.wufoo input.submit {
  background-color: var(--color-primary);
  border: none;
  border-radius: 3px;
  color: var(--color-bg-white);
  cursor: pointer;
  padding: 10px 0 12px;
  text-align: center;
  text-transform: uppercase;
  transition: all 250ms;
}

.wufoo input.submit:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-bg-white);
}

/* === Klaviyo Forms === */
div.klaviyo-form-L8a5cK .kl-private-reset-css-Xuajs1.go3176171171 p span.ql-font-sofiapro-semibold {
  font-family: var(--font-bianco);
  text-transform: capitalize;
}

/* ============================================
   ACCORDION
   ============================================ */

#accordion {
  margin: 50px auto 100px;
  max-width: 800px;
}

#accordion ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.accordion {
  display: none;
  padding: 10px;
}

.accordion.focus {
  display: block;
  border-bottom: 1px solid var(--color-border);
}

#accordion ul li > a {
  text-decoration: none;
  display: block;
  padding: 10px;
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 24px;
  font-weight: bold;
}

.accordion {
  background: var(--color-bg-off-white);
  color: var(--color-text-muted);
}

.accordion p {
  margin-bottom: 1em;
}

#accordion .icon {
  display: inline-block;
  font-weight: normal;
  margin-right: 10px;
}

/* ============================================
   CAROUSEL
   ============================================ */

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.carousel-control-next,
.carousel-control-prev {
  width: 5%;
}

ol.carousel-indicators li {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 100%;
  height: 10px;
  width: 10px;
}

ol.carousel-indicators li.active {
  background-color: black;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.image-with-text:before {
  z-index: 0;
}

.image-with-text__content-list {
  z-index: 1;
  position: relative;
}
.image-with-text__content-list .button-wrapper{
  margin-top:16px;
}

.article__main-part .container {
  padding-right: 0;
  padding-left: 0;
}

.pin-icon {
  z-index: 0;
}

a,
p,
div {
  font-family: var(--font-sofia);
}

a.heading-link span {
  font-family: var(--font-ginto);
}

.shopify-section--rich-text .content-box a:not(.button) {
  color: black;
  text-decoration: underline;
}

.shopify-section--rich-text .content-box a:not(.button):hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* === Tables === */
table:not(.line-item-table) td {
  vertical-align: top;
  padding: 8px;
  border: 1px solid var(--color-text-base);
}

/* === Image Fix === */
.image-with-text__image-wrapper {
  overflow: visible;
  z-index: auto;
}

.image-with-text__image {
  height: auto;
  display: block;
}

.shopify-section--banner split-lines span{
  display: inline-block;
}
@media screen and (max-width: 999px) {
    .shopify-section--banner .image-with-text__wrapper {
        display: flex;
        flex-direction: column;
    }

    .shopify-section--banner .image-with-text__image-wrapper {
        order: 2;
        margin-top: 30px;
    }

    .shopify-section--banner .image-with-text {
        padding: var(--vertical-breather) 0; 
    }
}
/* ============================================
   MEDIA QUERIES
   ============================================ */

@media screen and (max-width: 400px) {
  div.footer__item-list {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 1000px) {
  sort-by-popover.popover {
    max-width: 500px;
    right: 0;
    left: -90px;
  }
}

.shopify-policy__body h3,
.shopify-policy__body .h3{
  font-family: var(--font-sofia);
  font-weight: 400;
}
/* -------------------------------------------------------------------------
   Standardized breadcrumbs — mobile visibility.
   Breadcrumbs are now metafield-driven (snippets/breadcrumb.liquid) and shown
   at all breakpoints. Previously they were hidden on phone via hidden-phone /
   hidden-pocket. On small screens the trail scrolls horizontally rather than
   wrapping, so a long trail never grows down over a banner image or title.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 740px) {
  .breadcrumb {
    font-size: 0.8rem;
  }

  .breadcrumb--floating {
    right: 0;
    max-width: 100%;
  }

  .breadcrumb__list {
    padding: 14px 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .breadcrumb__list::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb__item {
    white-space: nowrap;
  }

  /* Hide current-page title on mobile, keep the trailing "/" and AT access. */
  .breadcrumb__item:last-child .breadcrumb__link {
    clip: rect(0 0 0 0);
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
  }
}
.wh-discounted-price-block,
.ws-pdp-price {
  line-height: 1.2;
}
.wh-discounted-price-block .wh-discounted-price,
.ws-pdp-price .ws-pdp-price__amount {
  font-size: 30px;
}

/* Wholesale price rendered by the theme, for variants the B2B Wholesale Hub app
   can't price itself: anything past a product's first 250 variants, which is
   where Liquid stops and the app's variant data stops with it. Shares the rules
   above with the app's own block so the two always read the same. The app hides
   .product-meta__price-list-container whenever it renders its own price, so only
   one of the two is ever on screen. */
.price-list--ws > span.price {
  display: none;
}
.ws-pdp-price {
  width: 100%;
  /* the size the app's block inherits from the product info column */
  font-size: 18px;
}
.ws-pdp-price .ws-pdp-price__amount {
  /* the app's own red, which is not one of the theme's scheme colors */
  color: #c61719;
}
.ws-pdp-price .ws-pdp-price__compare {
  text-decoration: line-through;
}

/* The app's block sits after the payment terms, so ours moves below them too,
   otherwise the wholesale price jumps above the Shop Pay line when a shopper
   picks a variant the app can't price. .product__info here is the price block's
   own wrapper, holding just the price container and the payment terms. */
.product__info:has(.price-list--ws) {
  display: flex;
  flex-direction: column;
}
.product__info:has(.price-list--ws) .product-meta__price-list-container {
  order: 2;
}

/* ==========================================================================================
   NOT-OFFERED VARIANT COMBINATIONS — ClickUp 86bcfa53f / 86bcvn77y (Figma: BIYA Designs › "Not Offered")
   - Not offered (.is-not-offered): gray, not struck through, with a right-aligned label such as
     "(Not offered with size 7)". Never shown in the first option. Not selectable outside the
     first option (aria-disabled / disabled, see custom.js).
   - Sold out (.is-sold-out): normal text with a gold bell tag on the right; still selectable.
   - Selected combination that doesn't exist: the option(s) to change get .is-flagged (note under
     the option name, red border), the button reads "Selection Not Offered" (data-not-offered),
     and payment terms, stock and pickup messaging are hidden.
   ========================================================================================== */

/* Dropdown rows: value on the left, label or bell tag on the right. */
.combo-box__option-item:is(.is-not-offered, .is-sold-out) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: start;
}

/* Not offered */
.combo-box__option-item.is-not-offered,
.block-swatch.is-not-offered .block-swatch__item {
  color: #767676;
  text-decoration: none;
}
.option-value-not-offered {
  flex-shrink: 0;
  text-align: end;
}
.block-swatch .option-value-not-offered {
  margin-inline-start: .35em;
}

/* Desktop dropdowns size to their longest row (min-width: max-content), so long values plus a
   label like the chain's "(Not offered with 2.25 mm)" overflowed. Keep those lists to the field
   width and let the label wrap. */
.combo-box__option-list:has(.option-value-not-offered) {
  min-width: 0;
}
.combo-box__option-item.is-not-offered .option-value-text {
  flex-shrink: 0;
  max-width: 60%;
}
.combo-box__option-item.is-not-offered .option-value-not-offered {
  flex-shrink: 1;
  min-width: 0;
  white-space: normal;
}

/* Color and image swatches: reuse the theme's crossed-out sold-out look for not-offered values
   (their label is in the swatch's title tooltip and visually-hidden text). */
.color-swatch.is-not-offered .color-swatch__item:before {
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--background)) calc(50% - 1px), rgb(var(--background)) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat;
}
.variant-swatch.is-not-offered .variant-swatch__image {
  opacity: .4;
}
.variant-swatch.is-not-offered .variant-swatch__item:before {
  content: "";
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--border-color)) 50%, transparent calc(50% + 1px)) no-repeat;
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Sold out: the rule above (.combo-box__option-item.is-disabled) strikes and grays sold-out
   values; the design keeps them plain and adds the Notify Me bell instead. */
.combo-box__option-item.is-sold-out {
  text-decoration: none;
  color: inherit;
}
.option-value-sold-out {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: var(--color-primary);
}
/* Recast products use the Recast (secondary) color. The product page has no .recast wrapper;
   Recast Fashion Jewelry is marked by .btnlink-recast on the add-to-cart button. */
.product__info:has(.btnlink-recast) .option-value-sold-out {
  background: var(--color-secondary);
}
.option-value-sold-out img {
  display: block;
  width: 14px;
  height: 14px;
}

/* Values that can't be picked. */
.combo-box__option-item[aria-disabled="true"],
:disabled + :is(.block-swatch__item, .color-swatch__item, .variant-swatch__item) {
  cursor: not-allowed;
}

/* Note under the option name for the option(s) that need changing. */
.product-form__option-selector.is-flagged .product-form__option-info {
  flex-wrap: wrap;
  row-gap: 4px;
  flex-direction: column;
}
.product-form__option-flag {
  color: rgb(var(--error-color));
  display: block;
  line-height: 22px;
}

/* Highlight the field that needs changing. */
.product-form__option-selector.is-flagged .select {
  border-color: rgb(var(--error-color));
}
.product-form__option-selector.is-flagged .block-swatch__radio:checked + .block-swatch__item:after,
.product-form__option-selector.is-flagged .block-swatch__item.is-selected:after {
  box-shadow: 0 0 0 1px rgb(var(--error-color)) inset, 0 0 0 1px rgb(var(--error-color));
}
.product-form__option-selector.is-flagged .color-swatch__radio:checked + .color-swatch__item:after,
.product-form__option-selector.is-flagged .color-swatch__item.is-selected:after {
  border-color: rgb(var(--error-color));
}
/* Image swatches draw their selected outline with box-shadow, not a border. */
.product-form__option-selector.is-flagged .variant-swatch__radio:checked + .variant-swatch__item:after,
.product-form__option-selector.is-flagged .variant-swatch__item.is-selected:after {
  box-shadow: 0 0 0 1px rgb(var(--error-color)) inset, 0 0 0 1px rgb(var(--error-color));
}

/* "Selection Not Offered" button. The sold-out rule above (#AddToCart[disabled]) hides the
   disabled button so Klaviyo's Notify Me can stand in, but Notify Me does not apply to something
   that is never made. Higher specificity wins over that !important rule. */
#AddToCart[disabled][data-not-offered] {
  display: block !important;
  background: #f7f4ee;
  color: #2d2d2d;
  opacity: 1;
}

/* Hide payment terms, stock, wholesale-limit and pickup messaging for a combination that doesn't exist. The
   payment button and payment terms are already hidden by the #AddToCart[disabled] rules above. */
.product__info:has(#AddToCart[data-not-offered]) :is([data-stock-status], [data-block-type="inventory"], store-pickup, product-payment-terms, [data-ws-note]) {
  display: none !important;
}

/* While an option dropdown / mobile option drawer is open, keep the Gorgias chat launcher and
   the Klaviyo teaser underneath it (both ship with near-max z-indexes). The open combo-box sits at
   z-index 10 on mobile and 2 on desktop. position: relative gives the Gorgias container a stacking
   context, so the z-index caps the fixed iframes inside it. */
html:has(combo-box[open]) #gorgias-chat-container {
  position: relative;
  z-index: 1 !important;
}
html:has(combo-box[open]) .needsclick[class*="kl-teaser-"] {
  z-index: 1 !important;
}

/* Notify Me button: same bell as the sold-out tag in the option dropdowns (client request,
   ClickUp 86bcvn77y). Covers our placeholder anchor and the button Klaviyo renders in its place.
   Drawn with a mask so it takes the button's text color. The URL is relative to this file, so it
   resolves to assets/icon-bell-ringing.svg on the CDN. */
a.klaviyo-bis-trigger::before,
#klaviyo-bis-button-container button::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-inline-end: 8px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("icon-bell-ringing.svg") center / contain no-repeat;
  mask: url("icon-bell-ringing.svg") center / contain no-repeat;
/* Quantity limits (ClickUp 86bcg2cyv) — see assets/wholesale_buffer.js.
   Wording lives in locales/en.default.json under quantity_limits. */
.quantity-selector__button[disabled],
.quantity-selector__button--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.quantity-limit-note {
  margin-block-start: 8px;
  margin-block-end: 0;
}
.quantity-limit-note--fallback {
  margin-block-start: 12px;
}
.line-item__limit-note {
  margin-block-start: 6px;
  margin-block-end: 0;
  flex-basis: 100%;
  width: 100%;
}
.line-item__limit-note--error,
.cart__limit-blocked {
  color: rgb(var(--error-color));
}
.cart__limit-blocked {
  margin-block-end: 12px;
  text-align: center;
}
.cart-limit-notice-slot {
  margin-block-end: 16px;
}
.cart-limit-notice.banner {
  display: block;
}
.cart-limit-notice__heading {
  font-weight: bold;
  margin: 0 0 6px;
}
.cart-limit-notice__list {
  margin: 0 0 8px;
  padding-inline-start: 18px;
}
/* Nothing more can be added (wholesale limit, or all stock already in the cart): hide the
   in-stock message and pickup availability. data-ws-blocked is set server-side and by
   wholesale_buffer.js on variant/cart changes. */
.product-form[data-ws-blocked] .status,
.product-form[data-ws-blocked] .product-form__store-availability-container {
  display: none !important;
}
/* Cart edits are held while the checkout check runs (wholesale_buffer.js). */
[data-ws-validating] line-item-quantity,
[data-ws-validating] .line-item__remove-button {
  pointer-events: none;
  opacity: 0.6;
}

/* === Wholesale availability badges (ClickUp 86bcnnfqb) ===
   snippets/wholesale-stock-badge.liquid. Sold out reuses the theme's .label--subdued. */
.label--ws-plenty {
  background: #fff;
  color: #767676;
  box-shadow: inset 0 0 0 1px #f7eee3;
}

.label--ws-low {
  background: var(--color-primary);
  color: #2d2d2d;
}

.ws-stock-badge {
  margin-block-end: 10px;
}

.ws-stock-badge .label[hidden] {
  display: none;
}

/* === Mobile gallery ticker (ClickUp 86bcnnfqb) ===
   snippets/product-media.liquid + assets/custom.js. Below 1000px: each image is 43px narrower than the
   screen so the next one peeks in, a light stroke shows where white images end, and a "1/20 >"
   counter replaces the dots and arrows. */
@media screen and (max-width: 999px) {
  .product__media--ticker .product__media-item {
    width: calc(100% - 43px - var(--container-gutter));
    min-width: 0;
    padding-inline-start: var(--container-gutter);
    padding-inline-end: 0;
  }

  .product__media--ticker .product__media-image-wrapper {
    border: 1px solid #f5f5f5;
  }

  .product__media--ticker .product__media-nav {
    display: none;
  }

  /* Keep zoom inside the current image instead of over the peek. */
  .product__media--ticker .product__zoom-button:not(:lang(ar), :lang(he)) {
    right: 54px;
  }

  .product__media-ticker {
    position: absolute;
    top: 16px;
    right: calc(15px - var(--container-gutter));
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding: 0 10px 0 12px;
    border-radius: 12px;
    background: #f5f5f5;
    color: #000;
    font-size: 13px;
    line-height: 1;
  }

  .product__media-ticker[hidden] {
    display: none;
  }

  .product__media-ticker-icon {
    flex: none;
  }
}

/* === Fast Bundle add-ons hidden for wholesale customers (ClickUp 86bcnnfqb) ===
   body[data-ws-customer] is set in layout/theme.liquid for wholesale-tagged customers. When its add-on
   widget is on the page, Fast Bundle's own CSS hides the theme's quantity selector and Add to cart
   (#MainPaymentContainer) with !important. That hid the wholesale availability badge, and Fast Bundle's
   button skips the product page quantity limits. For wholesale customers: hide the widget and bring
   the theme's controls back. These selectors out-rank Fast Bundle's, so both being !important is fine.
   Fast Bundle places the widget from its app embed script, so skipping the app block in Liquid
   doesn't remove it. */
html body[data-ws-customer] #rbr-container-element-addOn {
  display: none !important;
}

html body[data-ws-customer]:has(#rbr-container-element-addOn) .product-form [data-block-id*="quantity_selector"] {
  display: block !important;
}

html body[data-ws-customer]:has(#rbr-container-element-addOn) .product-form #MainPaymentContainer {
  display: grid !important;
}

/* Bundle product pages (the Fast Bundle add-on block is in the form), wholesale customers only:
   match the regular product page order. Intro text, Quantity (with the availability badge),
   variants, wholesale price, then Add to cart. The "Quantity & price applies to medallions only."
   note, which follows the quantity block, is about the add-ons wholesale customers don't see,
   so it's hidden. Visual order only; the retail template is untouched. */
html body[data-ws-customer] .product-form:has([id*="fbp_fast_bundle"]) > * {
  order: 4;
}

html body[data-ws-customer] .product-form:has([id*="fbp_fast_bundle"]) > .product-form__text {
  order: 0;
}

html body[data-ws-customer] .product-form:has([id*="fbp_fast_bundle"]) > .product-form__quantity {
  order: 1;
}

html body[data-ws-customer] .product-form:has([id*="fbp_fast_bundle"]) > variant-picker {
  order: 2;
}

html body[data-ws-customer] .product-form:has([id*="fbp_fast_bundle"]) > [id*="b2b_wholesale_hub"] {
  order: 3;
}

html body[data-ws-customer] .product-form:has([id*="fbp_fast_bundle"]) > .product-form__quantity + .product-form__text {
  display: none;
}