/* =========================================================
   PRODUCT CARD  the one canonical `.jewel-card` used everywhere a full
   product grid card appears: the home page's Featured Collections section
   and trending strip, the collection/shop grid, and the cart/product
   pages' "Complete the Look"/"Finish the Set" related-products grids.
   Change the card's look here  once  instead of per page.

   Design: a "jewellery case" card. The photo sits in a squared gold-line
   frame (.jewel-visual / .jewel-visual-inner, a 1px gold "mat" around the
   inner frame). Hovering it (mouse/trackpad) steps a multi-image product
   through its other photos on a timer, cross-fading via the .is-swapping
   class below (assets/js/product-card.js's setupImageCycle()); the
   collection/shop grid runs that same timer continuously on touch, where
   there's no hover to start it. The drawer itself never opens on hover
   tapping/clicking the .jewel-options-btn button (stacked with Wishlist/
   Quick View in .jewel-quick-actions, the photo's top-right corner; only
   rendered when the product has a drawer to open) opens the metal/carat/
   ring-size/band-width choices and the buy button: on a mouse/trackpad as
   a frosted glass drawer sliding in from the photo's right edge, on touch
   as a bottom-sheet modal (see assets/js/product-card.js). Like the rest
   of .jewel-quick-actions, it's hidden until hover on a real mouse/
   trackpad and always visible on touch (no hover there to reveal it).
   Ported from the standalone design/jewel-card.html concept and adapted
   to also work in this site's dark default theme (that file was cream/
   gold only; the dark variant below translates the same ribbon/glass-
   drawer motifs into ink + gold on near-black).

   Because the drawer only ever slides within its own card's width, this
   card needs none of the viewport-edge-flip or narrow-width bottom-sheet
   logic the previous side-flyout design needed  it's the same size and
   behavior at every grid width, so there's nothing page-specific left for
   featured-collections.css/page-collection.css/page-cart.css/
   page-product.css/trending-products.css to override for it either.

   Every class here is `jewel-`-prefixed on purpose (even the ones that
   read as generic, like the swatch/chip/drawer pieces)  this card shares
   the page with other independently-built components (the single product
   page's own metal/carat picker in page-product.css, for one) that are
   free to use plain names like .swatch or .buy-btn for their own unrelated
   markup. An unprefixed class here doesn't just risk a collision, it *had*
   one: page-product.css's own `.swatch` (a pill-shaped label) and this
   card's original bare `.swatch` (a round color dot) fought over the same
   selector wherever both loaded on the same page (the product page's
   "Finish the Set" section pulls this file in), visibly breaking the
   product page's own metal picker.

   Data comes from one shared PHP builder too (fm_build_featured_product_card()
   in inc/woocommerce-featured.php) and one shared JS renderer
   (assets/js/product-card.js's FM.renderProductCard())  see that file's
   header comment for the full picture.

   What's deliberately NOT here: each page's `.product-grid` column count,
   which stays in that page's own stylesheet  only the *card* is shared,
   not the grid it sits in.
   ========================================================= */

/* Rounded corners + a lift-on-hover are a deliberate, scoped exception to
   the brand's usual sharp-corner/flat system (see base/buttons.css's own
   comment on that)  the client asked specifically for this card to match
   the older site's rounded, elevated "3D" look, not to change the system
   everywhere else. */
.jewel-card {
  position: relative;
  isolation: isolate;
  z-index: 1;
  cursor: pointer;
  /* Every grid this card sits in uses it as a CSS Grid/flex item, whose
     default min-width:auto is a content-based automatic minimum  it can
     inflate past the column's real 1fr share to fit whatever's inside,
     forcing the whole row wider than the viewport on mobile. */
  min-width: 0;
  border-radius: var(--fm-radius-lg);
  background: linear-gradient(175deg, #16130e 0%, #0d0b08 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28), 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* No lift-on-hover, at the client's request (on every device, not just
   touch)  it was clipping against ancestor overflow:hidden sections,
   cutting a card's top edge off mid-animation. Shadow still deepens on
   hover as feedback, just without the translateY. */
@media (hover: hover) and (pointer: fine) {
  .jewel-card:hover {
    box-shadow: 0 32px 54px rgba(0,0,0,0.42), 0 10px 20px rgba(0,0,0,0.2);
  }
}
.jewel-card.is-hidden { display: none; }
/* Every card is its own isolated stacking context at the same z-index, so
   a later sibling in the grid would otherwise paint over an earlier
   card's open .jewel-drawer flyout (which needs to render outside its own
   card's box, over whatever's beside it) regardless of that flyout's own
   z-index  those only rank within this card's context, not against a
   sibling's separate one. Raising the whole open card's z-index lifts its
   entire context above every unopened sibling. */
.jewel-card.is-open { z-index: 10; }

/* Corner-draw hover border: two pseudo-elements, each covering the full
   card, painting two 1px line-shaped background gradients pinned to an
   opposite corner. background-size (not `border`, which would leave a
   permanent corner blob since border thickness renders even at 0 width/
   height) animates 0%  100% on hover, so ::before's lines trace the top
   edge rightward and the left edge downward from the top-left corner,
   and ::after's trace the right edge upward and the bottom edge
   leftward from the bottom-right corner  meeting at the two untouched
   corners at once instead of a border just fading in. */
/* Rounded version: straight gradient lines can't follow the card's
   border-radius, so this is a 1px ring (a conic-gradient masked down to
   its border box) that sweeps clockwise around the card on hover, with
   --fm-sweep animated via @property. */
@property --fm-sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.jewel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg, var(--fm-gold) var(--fm-sweep), transparent var(--fm-sweep));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: --fm-sweep 0.6s ease;
}
.jewel-card:hover::before {
  --fm-sweep: 360deg;
}

/* ---------------- visual: square frame ----------------
   Two layers: the outer .jewel-visual is a 1px "mat" painted in the gold
   border color; the inner .jewel-visual-inner carries everything else
   positioning context, overflow, the photo/fallback-icon, the badge, the
   out-of-stock overlay, and the drawer itself. Fluid
   via aspect-ratio rather than a fixed pixel height, so a page that puts
   this card in a narrower grid column (the cart page's related-products
   strip, the trending track) automatically gets a shorter photo with no
   per-page override needed. */
.jewel-visual {
  position: relative;
  aspect-ratio: 4 / 5;
}
.jewel-visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--fm-radius-lg) var(--fm-radius-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #2a251c 0%, #3a2f1f 45%, #4a3a22 100%);
}
.jewel-visual-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.jewel-visual-inner svg {
  width: 30%; height: 30%;
  min-width: 44px; min-height: 44px;
  stroke: rgba(233,221,196,0.85);
  fill: none;
  stroke-width: 1.1;
  transition: transform 0.5s ease;
}
.jewel-card:hover .jewel-visual-inner svg { transform: scale(1.12); }
.jewel-visual-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.22s ease;
}
/* Fade cross-fade between photos when a multi-image product's card steps
   to its next one (hover on desktop, an auto-advancing timer on mobile
   see setupImageCycle() in assets/js/product-card.js): opacity dips while
   JS swaps the real <img> src underneath, then recovers. */
.jewel-visual-inner img.is-swapping { opacity: 0; }

.jewel-oos {
  position: absolute;
  inset: 0;
  background: rgba(10,9,8,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #a79d90;
}

/* Square tag, floating with a proper gap off the photo's own edges (not
   flush against the corner  the facet clip on .jewel-visual-inner already
   does enough there without the badge crowding it too). */
.jewel-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: #C9A236;
  font-family: 'Jost', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #000000;
}

/* Manual prev/next: identical box styling to .jewel-quick-actions button
   (same size, square, gold hairline border, dark glass, backdrop blur)
   just flush in the photo's own bottom corners instead of stacked in its
   top-right. Only rendered at all when there's more than one photo (see
   renderProductCard() in assets/js/product-card.js), so there's never a
   dead arrow pair sitting on a single-photo card. */
.jewel-nav-prev,
.jewel-nav-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(201,162,54,0.5);
  background: rgba(10,9,8,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.jewel-nav-prev { left: 0; border-radius: 0 var(--fm-radius-md) 0 0; }
.jewel-nav-next { right: 0; border-radius: var(--fm-radius-md) 0 0 0; }
.jewel-nav-prev .arrow,
.jewel-nav-next .arrow { color: #C9A236; font-size: 20px; line-height: 1; }


/* Quick actions column  Wishlist / Quick View / Options (the drawer
   trigger, see assets/js/product-card.js's optionsBtn handler  it only
   renders here when the product actually has a drawer to open), one glass
   pill each (bi-bag-heart-fill / bi-eye / bi-cart-plus, see inc/enqueue.php
   for the Bootstrap Icons stylesheet), stacked in the photo's top-right
   corner (matching the client's reference; Options used to be its own
   bottom-right corner button, moved up here at the client's request to
   sit with the other icons).

   On a real mouse/trackpad they stay hidden until the card is hovered, then
   ease in together with a gentle slide-in + a slight stagger between the
   three (each button's own transition-delay below) so they read as one
   soft reveal rather than a flat on/off. There's no equivalent hover on
   touch to drive that, so under `(hover: none)` (phones/tablets) they're
   simply always visible  no transition to skip, just the plain visible
   state. */
.jewel-quick-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.jewel-quick-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(201,162,54,0.5);
  border-radius: var(--fm-radius-md);
  background: rgba(10,9,8,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.jewel-quick-actions button .bi { color: #C9A236; font-size: 14px; line-height: 1; }
.jewel-quick-actions button:hover {
  border-color: #C9A236;
  background: rgba(201,162,54,0.18);
}
/* Wishlist's own "picked" state  solid gold fill, ink glyph, same
   treatment .jewel-swatch/.jewel-size-chip use elsewhere for a selected
   pick, so "you've already added this" reads consistently. */
.jewel-wishlist-btn.is-active { background: #C9A236; border-color: #C9A236; }
.jewel-wishlist-btn.is-active .bi { color: #16130e; }

@media (hover: hover) and (pointer: fine) {
  .jewel-quick-actions button {
    opacity: 0;
    transform: translateX(10px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .jewel-quick-actions button:nth-child(1) { transition-delay: 0s; }
  .jewel-quick-actions button:nth-child(2) { transition-delay: 0.05s; }
  .jewel-quick-actions button:nth-child(3) { transition-delay: 0.1s; }
  .jewel-card:hover .jewel-quick-actions button {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    pointer-events: auto;
  }
  /* Extra nudge for whichever one button the cursor is actually on, layered
     on top of the column's already-revealed state  higher specificity than
     the rule above (adds :hover) so it wins just the `transform` for that
     one button without needing to repeat opacity/pointer-events. */
  .jewel-card:hover .jewel-quick-actions button:hover {
    transform: translateX(-3px) scale(1.06);
  }
}

/* ---------------- drawer: frosted glass ----------------
   Two entirely different layouts depending on viewport width, both now
   started by an explicit tap/click of .jewel-options-btn rather than by
   hovering:
    - Tablet/laptop/desktop (the base rules below): a floating flyout
      panel beside the card, not clipped inside it  full card height,
      popped out to the right with a small gap, same as design/jewel-
      card.html's .jewel-drawer but detached rather than sliding over the
      photo (a fixed-width panel sliding *over* a narrow tablet column
      card used to feel cramped and could visually collide with the next
      row). assets/js/product-card.js's optionsBtn handler measures
      available space before opening and adds `.drawer-align-left` (see
      below) when there isn't room to the right  e.g. the last card in a
      grid row.
    - Phone (the @media(max-width:620px) block further down, matching
      this codebase's own phone cutoff  see page-collection.css): a
      card is too narrow for a side flyout to make sense at all, so it
      becomes a full-width bottom-sheet modal instead (see assets/js/
      product-card.js's openDrawerModal()). Driven by viewport width, not
      hover/pointer capability  a touchscreen laptop or tablet has
      plenty of room for the side flyout and shouldn't fall back to a
      bottom sheet just because it can also be tapped. */
/* Rounded corners + a deep, soft-edged shadow here are a deliberate,
   scoped exception to the brand's usual sharp-corner system (see
   base/buttons.css's own comment on that)  the client asked this one
   "Quick Summary" panel specifically to match the older site's rounded,
   elevated "3D" card look, not to change the system everywhere else. */
.jewel-drawer {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 5;
  height: 100%;
  width: min(300px, 78vw);
  margin-left: 10px;
  overflow: hidden;
  background: rgba(20,17,12,0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(201,162,54,0.5);
  border-radius: var(--fm-radius-lg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 18px 4px 16px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: left center;
  transform: translateX(-14px) scale(0.94);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
}
/* Thin gold accent bar across the top  a small premium touch marking the
   panel as its own distinct "case" rather than a plain flat overlay. */
.jewel-drawer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #C9A236, transparent);
}
/* Deliberately keyed ONLY on `.is-open`  no `:hover`, and no
   `:focus-within` either (that one was tried and removed on purpose: the
   drawer's own swatch/chip/buy buttons sit in the DOM at their normal
   opacity:0/visibility:hidden position, so anything that can focus one of
   them, including the browser's own click-to-focus on a <button>, was
   enough to trip :focus-within and reveal the drawer without ever going
   through .jewel-options-btn  exactly the unwanted "opens without the
   button" behaviour reported; a plain :hover open-on-hover was tried too
   and rolled back at the client's own request, who wants the drawer to
   open only from an explicit click of the cart/options button, not on
   hover, on every device). Opening is a click on .jewel-options-btn
   (toggling .is-open, see product-card.js) and nothing else; a keyboard
   user reaches the same control by tabbing to that button and pressing
   Enter/Space, same as any other button. */
.jewel-card.is-open .jewel-drawer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}
/* Flips the flyout to the card's left side instead  toggled by JS
   (positionDrawerFlyout() in product-card.js) when there's no room to the
   right, e.g. the right-most card in a grid row. transform-origin flips
   with it, so the scale-in pop still grows outward from the edge the
   panel is actually attached to. */
.jewel-card.drawer-align-left .jewel-drawer {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 10px;
  transform-origin: right center;
  transform: translateX(14px) scale(0.94);
}
.jewel-card.drawer-align-left.is-open .jewel-drawer { transform: translateX(0) scale(1); }

@media (max-width: 620px) {
  .jewel-drawer {
    position: fixed;
    top: auto; right: 0; bottom: 0; left: 0;
    z-index: 200;
    height: auto;
    width: auto;
    margin: 0;
    max-height: 78vh;
    border: none;
    border-top: 1px solid rgba(201,162,54,0.5);
    border-radius: var(--fm-radius-lg) var(--fm-radius-lg) 0 0;
    box-shadow: 0 -14px 30px rgba(0,0,0,0.4);
    padding: 20px 0 18px;
    /* Reset the tablet/desktop flyout's opacity/visibility hide trick
       phone mode hides entirely via `transform: translateY(100%)`
       instead, toggled directly on .jewel-drawer itself (not via an
       .is-open ancestor) since openDrawerModal() moves this element to
       be a child of <body>, outside .jewel-card entirely, while open. */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(100%);
    transition: transform 0.35s ease;
  }
  /* Drag-handle affordance, purely visual (there's no actual swipe-to-close
     gesture wired up  the × button and tapping the backdrop both close it). */
  .jewel-drawer::before {
    content: '';
    position: absolute;
    top: 10px; left: 50%;
    width: 36px; height: 4px;
    background: rgba(232,220,192,0.35);
    transform: translateX(-50%);
  }
  .jewel-drawer.is-open { transform: translateY(0); }
  .jewel-drawer-head { padding: 0 20px 14px; }
  .jewel-drawer-scroll { padding: 0 20px; }
  .jewel-drawer-foot { padding: 10px 20px 0; }
}

/* Full-viewport scrim behind the touch bottom-sheet, shown/hidden by
   assets/js/product-card.js's openDrawerModal()/closeModalDrawer()
   created lazily as a single shared element (see that file), since only
   one modal drawer can ever be open at a time. */
.jewel-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(6,5,4,0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.jewel-modal-backdrop.is-active { opacity: 1; visibility: visible; }
body.fm-jewel-modal-open { overflow: hidden; }

/* ---- head: "Quick Summary" title + Check Availability button ----
   New, matching the client's reference (an old-site design they want this
   drawer restyled to resemble): a named heading and a dedicated
   availability button up top, instead of the plain "Check availability"
   text link that used to sit in the footer. */
.jewel-drawer-head {
  flex-shrink: 0;
  padding: 0 14px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(201,162,54,0.25);
  text-align: center;
}
.jewel-drawer-title {
  margin: 0 0 10px;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 16px;
  color: #f3efe7;
}
.jewel-selected-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.jewel-selected-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Jost', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  color: #f3efe7;
  background: transparent;
  border: 1px solid rgba(232,220,192,0.22);
  border-radius: var(--fm-radius-md);
  padding: 2px 8px;
  white-space: nowrap;
}
.jewel-selected-chip .k {
  font-size: 9px;
  font-weight: 400;
  color: #9a8f7a;
}
.jewel-selected-chip .k::after { content: ':'; }

.jewel-drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 14px;
  scrollbar-width: none;
}
.jewel-drawer-scroll::-webkit-scrollbar { display: none; }

.jewel-drawer-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #f3efe7;
  margin-bottom: 8px;
}

/* ---- metal/size pills: icon + label, two-up grid ----
   Replaces the old circular color swatches and bare text chips  every
   option is now the same labeled-pill shape (see JEWEL_PILL_ICON in
   assets/js/product-card.js), matching the client's reference. */
.jewel-swatches,
.jewel-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jewel-swatch,
.jewel-size-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  color: #cfc4ae;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(232,220,192,0.25);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.jewel-pill-icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: 0.85; }
.jewel-metal-dot { width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--fm-radius-circle); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.jewel-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jewel-swatch:hover,
.jewel-size-chip:hover { border-color: rgba(201,162,54,0.6); }
.jewel-swatch[aria-checked="true"],
.jewel-size-chip[aria-checked="true"] {
  position: relative;
  background: linear-gradient(145deg,#2a241a 0%,#0d0b08 100%);
  border-color: #0d0b08;
  color: #ecd27f;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(226,190,88,0.75), 0 8px 18px -6px rgba(13,11,8,0.55);
}
.jewel-swatch[aria-checked="true"]::after,
.jewel-size-chip[aria-checked="true"]::after {
  content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 12px;
  background: linear-gradient(225deg,#f0d98a,#c9a236); clip-path: polygon(0 0,100% 0,100% 100%);
}
.jewel-swatch[aria-checked="true"] .jewel-pill-icon,
.jewel-size-chip[aria-checked="true"] .jewel-pill-icon { opacity: 1; }

/* ---- foot: price + full-width buy button ---- */
.jewel-drawer-foot {
  flex-shrink: 0;
  margin-top: 10px;
  padding: 12px 14px 0;
  border-top: 1px solid rgba(201,162,54,0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jewel-drawer-price {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 19px;
  color: #f3efe7;
}
.jewel-buy-btn {
  width: 100%;
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #000000;
  background: #C9A236;
  border: none;
  padding: 13px 14px;
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.2s ease;
}
.jewel-buy-btn:hover:not(:disabled) { background: #ddb24a; }
.jewel-buy-btn:disabled,
.jewel-buy-btn.is-loading { opacity: 0.6; cursor: not-allowed; }

.jewel-drawer-close {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 4;
  background: none;
  border: none;
  color: #cfc4ae;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  /* Opening is now a click on .jewel-options-btn rather than :hover (see
     that rule's own comment), so the drawer no longer auto-closes just by
     moving the mouse away  this needs to be a real, always-visible close
     affordance on every device, not only touch's bottom-sheet. */
  display: block;
}

/* ---------------- body under the visual ---------------- */
/* Title spans the full width on its own row; the subtitle ("Silver") sits
   under it on the left with the price on the same row at the right.
   .jewel-info is display:contents so its children become grid items of
   .jewel-body without changing the markup. */
.jewel-body {
  padding: 16px 16px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
}
.jewel-info { display: contents; }
.jewel-title { grid-column: 1 / -1; }
.jewel-meta { grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jewel-rating { grid-column: 1 / -1; grid-row: 3; }
.jewel-price { grid-column: 2; grid-row: 2; }
.jewel-title {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.32;
}
.jewel-title a {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  color: #f3efe7;
  text-decoration: none;
  transition: color 0.2s ease;
  /* Consistent 2-line height across every card regardless of name length
      a grid where some cards run one line and others two looks ragged. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.jewel-title a:hover { color: #e8dcc0; }
.jewel-meta {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #8a8074;
  margin: 0;
}
.jewel-rating { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.jewel-rating .stars { display: flex; gap: 1px; }
.jewel-rating .stars svg { width: 10px; height: 10px; stroke: #C9A236; fill: #C9A236; }
.jewel-rating .stars svg.empty { fill: none; stroke-width: 1.3; stroke: rgba(201,162,54,0.4); }
.jewel-rating .count { font-family: 'Jost', sans-serif; font-size: 10.5px; color: #6f665a; }

.jewel-price {
  flex-shrink: 0;
  text-align: right;
  font-family: 'Jost', sans-serif;
}
.jewel-price { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 0 8px; }
.jewel-price .now { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; color: #d9b466; }
.jewel-price .was { display: block; font-size: 12px; line-height: 1.3; color: #6f665a; text-decoration: line-through; }
.jewel-price small {
  display: block;
  margin-top: 0;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #6f665a;
  font-weight: 300;
}

/* Narrow grid columns (2-up mobile grids run the card down to ~150-170px
   wide  see each page's own .product-grid breakpoints) make the corner
   chips, sized for a full-width desktop card, read as oversized against
   such a small photo. Scaled down together here rather than in each page's
   stylesheet since it's the chips themselves that are too big, not
   anything page-specific. */
@media (max-width: 480px) {
  .jewel-tag { top: 8px; left: 8px; height: 20px; padding: 0 12px; font-size: 8.5px; }
  .jewel-quick-actions { top: 10px; right: 10px; gap: 6px; }
  .jewel-quick-actions button { width: 28px; height: 28px; }
  .jewel-quick-actions button .bi { font-size: 13px; }
  .jewel-nav-prev, .jewel-nav-next { width: 28px; height: 28px; }
  .jewel-nav-prev .arrow, .jewel-nav-next .arrow { font-size: 17px; }
}

/* =========================================================
   LIGHT THEME
   Literal hex (matching this card's own design/jewel-card.html values
   almost verbatim  see that file), since that's the palette this card was
   actually drawn in: cream panel, dark-ink ribbon badge, warm gold facet
   frame, frosted cream glass drawer. The dark theme above is this same
   card translated into ink + gold on near-black, not the other way round.
   ========================================================= */
html[data-theme="light"] .jewel-card {
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(28,23,18,0.12), 0 4px 10px rgba(28,23,18,0.06);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .jewel-card:hover {
    box-shadow: 0 32px 54px rgba(28,23,18,0.22), 0 10px 20px rgba(28,23,18,0.1);
  }
}

html[data-theme="light"] .jewel-visual-inner {
  background: linear-gradient(155deg, #fbf6ea 0%, #f2e8cf 55%, #f7f0dd 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
html[data-theme="light"] .jewel-visual-inner svg { stroke: rgba(28,23,18,0.6); }

/* jewel-tag: dark-ink ribbon on cream  exactly design/jewel-card.html. */
html[data-theme="light"] .jewel-tag { background: #1c1712; color: #faf6ec; }

html[data-theme="light"] .jewel-quick-actions button {
  border-color: rgba(28,23,18,0.2);
  background: rgba(255,255,255,0.8);
}
html[data-theme="light"] .jewel-quick-actions button:hover {
  border-color: #8a6526;
  background: rgba(138,101,38,0.14);
}
html[data-theme="light"] .jewel-quick-actions button .bi { color: #8a6526; }
html[data-theme="light"] .jewel-wishlist-btn.is-active { background: #8a6526; border-color: #8a6526; }
html[data-theme="light"] .jewel-wishlist-btn.is-active .bi { color: #faf6ec; }

html[data-theme="light"] .jewel-nav-prev,
html[data-theme="light"] .jewel-nav-next {
  border-color: rgba(28,23,18,0.2);
  background: rgba(255,255,255,0.8);
}
html[data-theme="light"] .jewel-nav-prev .arrow,
html[data-theme="light"] .jewel-nav-next .arrow { color: #8a6526; }

/* Solid white (not the dark theme's translucent/frosted glass)  the
   client's reference card is a fully opaque white panel, and a blur only
   reads correctly over the dark theme's own busy near-black card photo. */
html[data-theme="light"] .jewel-drawer {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(28,23,18,0.1);
  box-shadow: 0 34px 64px rgba(28,23,18,0.26), 0 10px 22px rgba(28,23,18,0.12);
}
html[data-theme="light"] .jewel-drawer-head { border-bottom-color: rgba(28,23,18,0.1); }
html[data-theme="light"] .jewel-drawer-title { color: #000000; }
html[data-theme="light"] .jewel-selected-chip {
  color: #000000;
  border-color: rgba(28,23,18,0.18);
}
html[data-theme="light"] .jewel-selected-chip .k { color: #6f665a; }
html[data-theme="light"] .jewel-drawer-label { color: #000000; }
html[data-theme="light"] .jewel-swatch,
html[data-theme="light"] .jewel-size-chip {
  color: #000000;
  background: #faf8f4;
  border-color: rgba(28,23,18,0.16);
}
html[data-theme="light"] .jewel-swatch:hover,
html[data-theme="light"] .jewel-size-chip:hover { border-color: #8a6526; }
html[data-theme="light"] .jewel-swatch[aria-checked="true"],
html[data-theme="light"] .jewel-size-chip[aria-checked="true"] {
  background: linear-gradient(145deg,#2a241a 0%,#0d0b08 100%);
  border-color: #0d0b08;
  color: #ecd27f;
}
html[data-theme="light"] .jewel-drawer-foot { border-top-color: rgba(28,23,18,0.1); }
html[data-theme="light"] .jewel-drawer-price { color: #000000; }
html[data-theme="light"] .jewel-buy-btn { color: #ffffff; }
html[data-theme="light"] .jewel-drawer-close { color: #8c7f68; }
html[data-theme="light"] .jewel-drawer-close:hover { color: #000000; }

html[data-theme="light"] .jewel-title a { color: #000000; }
html[data-theme="light"] .jewel-title a:hover { color: #8a6526; }
html[data-theme="light"] .jewel-meta { color: #8c7f68; }
html[data-theme="light"] .jewel-rating .count { color: #656565; }
html[data-theme="light"] .jewel-price .now { color: #8a6526; }
html[data-theme="light"] .jewel-price .was,
html[data-theme="light"] .jewel-price small { color: #8c7f68; }