/* rr-img-fallback — presentation for stand-in product art.
   The "SAMPLE IMAGE" caption is drawn inside each SVG, so nothing is overlaid here. */

img.rr-ph-img {
  /* The real photos are square and the cards size themselves from the image box.
     `contain` keeps the drawing whole in slots with a different ratio (cart line
     items, predictive search) instead of cropping the stone out of frame.
     !important because the card rules that set `cover` outrank this on specificity
     and a cropped placeholder loses the very thing it is there to show. */
  object-fit: contain !important;
  background: #0f3d2e;  /* matches the branded stand-in, so no pale band shows around it */
  /* Several card styles animate a zoom on hover; on a flat drawing that just
     blurs the strokes. */
  transform: none !important;
  transition: none !important;
}

/* Card media boxes position their image absolutely and rely on it having intrinsic
   width/height. An SVG with only a viewBox has none, so pin it to the slot it
   replaced. Scoped to those boxes: elsewhere (cart lines, search results) the
   image must stay in normal flow. */
.card__media img.rr-ph-img,
.media img.rr-ph-img {
  width: 100%;
  height: 100%;
  inset: 0;
  position: absolute;
}

/* The hover/second image on a product card: when the primary is a stand-in there is
   no second view to cross-fade to, so keep the one drawing steady. */
.card__media img.rr-ph-img + img.rr-ph-img {
  display: none;
}

/* --- card title link -------------------------------------------------------
   The visible card title (.card__heading.test2) had no anchor at all, so clicking
   a product name did nothing. It is linked now — but component-card.css gives every
   `.card__heading a` an ::after that stretches over the whole card:

     .card__heading a:after { position:absolute; inset:0; z-index:1 }

   That overlay would sit on top of the wishlist heart, the metal swatches and quick
   add, and swallow their clicks. The card's image already has its own anchor, so
   the title only needs to be a plain text link. */
.card__heading a.rr-title-link:after {
  content: none;
}

/* No underline, hover included. component-card.css underlines every anchor inside a
   hovered .underline-links-hover card, which is the wrapper these titles sit in, so
   plain `text-decoration: none` loses to it on specificity. */
.card__heading a.rr-title-link,
.card__heading a.rr-title-link:hover,
.card__heading a.rr-title-link:focus,
.underline-links-hover:hover .card__heading a.rr-title-link {
  text-decoration: none !important;
  color: inherit;
}


/* --- card metal swatches ---------------------------------------------------
   One dot per metal the product actually has as a sibling (see
   snippets/rr-card-swatches.liquid); each links to that metal's product.

   Geometry measured off the reference storefront's .wm-pcard__sw row: 17px circles,
   9px apart, a 1px INSET ring (so the dot never grows), and a gold outline on the
   metal you are looking at. Selectors are doubled up on purpose — the card sections
   ship an inline ".variant-item { width: 30px }" that loads after this file and
   would otherwise win on source order at equal specificity. */
.card_product_variant.rr-swatches {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0;
  flex-wrap: wrap;
  /* keep the dots above the card's own overlay anchors */
  position: relative;
  z-index: 2;
}

.card_product_variant.rr-swatches .rr-swatch {
  display: block;
  width: 30px;
  height: 30px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 0;
  text-decoration: none;
  position: relative;
  outline: 1px solid transparent;
  outline-offset: 1px;
  transition: outline-color .15s ease;
}

/* The demo carries the hairline on the swatch SPAN, not the item, so the 30px circle is the
   bordered element and nothing overflows the link box. */
.card_product_variant.rr-swatches .rr-swatch .variant-swatch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

.card_product_variant.rr-swatches .rr-swatch:hover {
  outline-color: rgba(156, 133, 89, .55);
}

.card_product_variant.rr-swatches .rr-swatch.is-active {
  outline-color: #9c8559;
}

/* card-product.liquid: the title carries its own anchor now that the outer card link only wraps
   the media (an <a> cannot nest inside an <a>, which is what the metal swatch row needs). Keep it
   looking like the plain text it was inside the old whole-card link. */
.card--product .card__title-link {
  color: inherit;
  text-decoration: none;
}
.card--product .card__title-link:hover { text-decoration: underline; }

/* custom.css sizes the theme's ORIGINAL card swatch markup with !important:
       .product-card-wrapper .variant-swatch { width:20px !important; height:20px !important }
       .product-card-wrapper .variant-item   { height:30px !important }
   Our dot reuses those class names, so it inherited a 17x30 anchor holding a 20x20 circle — the
   round outline stretched into a pale pill with the colour sitting in its top half. Only the
   .rr-swatches row is re-squared here, so the theme's own swatch rows keep their 20/30 geometry.
   !important is required to answer !important; specificity alone cannot. */
.card_product_variant.rr-swatches .rr-swatch {
  width: 30px !important;
  height: 30px !important;
}
.card_product_variant.rr-swatches .rr-swatch .variant-swatch {
  width: 100% !important;
  height: 100% !important;
}