/* Legends OB-3CJ "Ruby Pearl" skin for the product page (goldtone/product.php, gated by $LEGENDS_HERO).
   Linked from components/legends/featured-ob-3cj.php. Recolors the standard product page in the
   OB-3CJ Legends palette (goldtone/legends.php #ob-3cj): jet black, gilt, ruby, pearl. The card
   layout itself (grid, border, padding, spacing) is shared with every product page in
   components/css/product-cards.css; this file recolors it via --pp-card-*.
   Never change display/position on anything js/product.js toggles (.hidden add-to-cart / notify
   buttons, variation chips, etc.). Many rules need !important because product.php sets these
   colors inline.
   The gem, filigree corners and twinkles are the landing page's SVGs as static data-URI tiles,
   drawn so their strokes land on whole pixels (never thin strokes scaled up).

   Palette (from goldtone/legends.php #ob-3cj):
     bg #0B0A0A  card #121010  hairline #2A2218  gilt #C6A24C  gilt-dark #7A5C22  gilt-light #E9CF8A
     ruby #A8122A  ruby-bright #C81E3C  ruby-bg #2A1216  label #8A7648  caption #B5A788
     body #B3AA9C  value #E6DDCC  heading/pearl #F0EADC */

.gt-product-new-container.lg-skin-ob-3cj {
  /* the shared card layout (components/css/product-cards.css), recolored */
  --pp-card-bg: #121010;
  --pp-card-border: #2A2218;
  --pp-card-shadow: 0 18px 40px rgba(0,0,0,.5);
  background: #0B0A0A;
  color: #B3AA9C;
  font-family: 'Spectral', Georgia, serif;
  padding-top: 12px;
  border-top: 1px solid #C6A24C;
}
.lg-skin-ob-3cj .gt-product-new { margin: 0 auto; }

/* ---------- breadcrumb + title ---------- */
.lg-skin-ob-3cj .product-breadcrumb,
.lg-skin-ob-3cj .product-breadcrumb a { color: #8A7648; }
.lg-skin-ob-3cj .product-breadcrumb a:hover { color: #E9CF8A; text-decoration: none; }
.lg-skin-ob-3cj .product-breadcrumb > li + li::before { color: #5A4A2A; }
.lg-skin-ob-3cj .product-breadcrumb .active { color: #C6A24C; }
.lg-skin-ob-3cj .gt-product-new .product-title-container { border-bottom-color: #2A2218; }
.lg-skin-ob-3cj .gt-product-new .product-title-container .product-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #F0EADC;
  text-transform: none;
  text-wrap: balance;
}
/* a small ruby ahead of the title */
.lg-skin-ob-3cj .gt-product-new .product-title-container .product-title::before {
  content: "";
  display: inline-block;
  width: 24px; height: 24px;
  margin: 0 12px 5px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -4 400 400'%3E%3Cg%3E%3Cg fill-opacity='.88' stroke='%23E3C27A' stroke-width='.8' stroke-linejoin='round'%3E%3Cpolygon points='10,120 120,40 70,120' fill='%23E64F6B'/%3E%3Cpolygon points='120,40 70,120 135,120' fill='%23DF3E5C'/%3E%3Cpolygon points='120,40 160,40 135,120' fill='%23E03F5D'/%3E%3Cpolygon points='160,40 135,120 200,120' fill='%23D52848'/%3E%3Cpolygon points='160,40 200,40 200,120' fill='%23D82C4B'/%3E%3Cpolygon points='200,40 240,40 200,120' fill='%23D12646'/%3E%3Cpolygon points='240,40 200,120 265,120' fill='%23C3213F'/%3E%3Cpolygon points='240,40 280,40 265,120' fill='%23C5223F'/%3E%3Cpolygon points='280,40 265,120 330,120' fill='%23B41C37'/%3E%3Cpolygon points='280,40 330,120 390,120' fill='%23A91932'/%3E%3Cpolygon points='10,128 70,128 104,213.12' fill='%23DA3251'/%3E%3Cpolygon points='10,128 104,213.12 200,352' fill='%23B81E39'/%3E%3Cpolygon points='104,213.12 70,128 200,352' fill='%23B31C37'/%3E%3Cpolygon points='70,128 135,128 141.5,213.12' fill='%23CE2544'/%3E%3Cpolygon points='70,128 141.5,213.12 200,352' fill='%23B01B35'/%3E%3Cpolygon points='141.5,213.12 135,128 200,352' fill='%23AA1932'/%3E%3Cpolygon points='135,128 200,128 180.5,213.12' fill='%23BF203D'/%3E%3Cpolygon points='135,128 180.5,213.12 200,352' fill='%23A71830'/%3E%3Cpolygon points='180.5,213.12 200,128 200,352' fill='%23A1162D'/%3E%3Cpolygon points='200,128 265,128 219.5,213.12' fill='%23B01B35'/%3E%3Cpolygon points='200,128 219.5,213.12 200,352' fill='%239D152C'/%3E%3Cpolygon points='219.5,213.12 265,128 200,352' fill='%23981329'/%3E%3Cpolygon points='265,128 330,128 258.5,213.12' fill='%23A1162E'/%3E%3Cpolygon points='265,128 258.5,213.12 200,352' fill='%23941227'/%3E%3Cpolygon points='258.5,213.12 330,128 200,352' fill='%238D1126'/%3E%3Cpolygon points='330,128 390,128 296,213.12' fill='%23921227'/%3E%3Cpolygon points='330,128 296,213.12 200,352' fill='%23891025'/%3E%3Cpolygon points='296,213.12 390,128 200,352' fill='%23821023'/%3E%3C/g%3E%3Crect x='10' y='120' width='380' height='8' fill='%23E9CF8A' fill-opacity='.55'/%3E%3Cpolygon points='120,40 280,40 390,120 390,128 200,352 10,128 10,120' fill='none' stroke='%23F3DC9A' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") center / 24px 24px no-repeat;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(200,30,60,.55));
}

/* ---------- cards (layout shared: components/css/product-cards.css) ---------- */
.lg-skin-ob-3cj .gt-product-new .product-specifications {
  background-color: #121010;
  color: #B3AA9C;
}
/* first heading in a card: the card edge replaces the title bar's top rule */
.lg-skin-ob-3cj .gt-product-new .product-specifications > .product-header:first-child { border-top: 0; padding-top: 0; }

/* ---------- price, options, badges ---------- */
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info { border-color: #2A2218; }
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-price .price {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  color: #F0EADC;
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .option-label {
  font: 500 11px/1.2 'Spectral', Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8A7648;
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-option button,
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-option--condition button,
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-option--b-stock button {
  color: #E6DDCC;
  background-color: transparent;
  border-color: rgba(198,162,76,.45);
  border-radius: 0;
  font-family: 'Spectral', Georgia, serif;
}
/* the selected chip is the ruby */
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-option button.selected,
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-option--condition button.selected,
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-option--b-stock button.selected {
  background-color: #A8122A;
  border-color: #C81E3C;
  color: #F0EADC !important;
  box-shadow: 0 0 10px rgba(200,30,60,.35);
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-option button.out-of-stock { color: #5E574C; }
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-option button.out-of-stock.selected {
  background-color: #2A2420; border-color: #2A2420; color: #8E867A !important; box-shadow: none;
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top a { color: #C6A24C; }
.lg-skin-ob-3cj .gt-product-new .product-detail-top a:hover { color: #E9CF8A; }
.lg-skin-ob-3cj .gt-product-new .product-detail-top .ri-medal-line { color: #C81E3C !important; }
.lg-skin-ob-3cj .gt-product-new .products-tooltip { color: #8A7648; }
.lg-skin-ob-3cj .gt-product-new .option-label-tooltip { border-color: #C6A24C; color: #C6A24C; }
.lg-skin-ob-3cj .gt-product-new .option-label-tooltip:hover,
.lg-skin-ob-3cj .gt-product-new .option-label-tooltip:focus { background-color: #C6A24C; color: #0B0A0A; }

/* .hidden always wins over the button rules below (product.js toggles it) */
.lg-skin-ob-3cj .gt-product-new .hidden {
  display: none !important;
}

/* ---------- action buttons (inline-styled in product.php, hence !important) ---------- */
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions .add-to-cart:not(.hidden),
.lg-skin-ob-3cj .gt-product-new #notify-when-in-stock:not(.hidden),
.lg-skin-ob-3cj .gt-product-new #upgrade-with-case-button:not(.hidden) {
  background: linear-gradient(110deg, #B08C3C, #C6A24C 35%, #E0C47E 50%, #C6A24C 65%, #A8843A) !important;
  border: 1px solid #C6A24C !important;
  border-radius: 0 !important;
  color: #0B0A0A !important;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  transition: filter .2s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  margin: 0 !important;
  width: 100% !important;
  padding: 0.5em 0.4em !important;
  min-height: 42px !important;
  max-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions .add-to-cart .glyphicon-shopping-cart {
  color: #0B0A0A !important;
  margin-left: 4px !important;
  font-size: 12px !important;
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions .add-to-cart:hover,
.lg-skin-ob-3cj .gt-product-new #notify-when-in-stock:hover,
.lg-skin-ob-3cj .gt-product-new #upgrade-with-case-button:hover {
  filter: brightness(1.12);
  box-shadow: 0 6px 20px rgba(198,162,76,.28);
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
  background-color: transparent !important;
  border: 1px solid #C6A24C !important;
  border-radius: 0 !important;
  color: #C6A24C !important;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  transition: background .2s, color .2s;
  padding: 0.5em 0.4em !important;
  min-height: 42px !important;
  max-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions:hover {
  background-color: #C7A45A !important;
  color: #16130F !important;
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu {
  background-color: #121010;
  border-color: rgba(198,162,76,.45);
  border-radius: 0;
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li { border-color: #2A2218; }
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a {
  color: #E6DDCC !important;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a:hover {
  background-color: #2A1216;
  color: #F0EADC !important;
}

/* ---------- section title bars ("OB-3CJ Specifications"), flanked by twinkles ---------- */
.lg-skin-ob-3cj .gt-product-new .product-header {
  background-color: transparent;
  border-top: 1px solid rgba(198,162,76,.4);
  border-bottom: 1px solid rgba(198,162,76,.4);
  padding: 10px 0 8px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: #F0EADC;
  text-transform: none;
}
.lg-skin-ob-3cj .gt-product-new .product-header::before,
.lg-skin-ob-3cj .gt-product-new .product-header::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin: 0 12px 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.7 7.3 12.7 9.3 20 10 12.7 10.7 10.7 12.7 10 20 9.3 12.7 7.3 10.7 0 10 7.3 9.3 9.3 7.3 10 0Z' fill='%23F3D27A'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  vertical-align: middle;
}
.lg-skin-ob-3cj .gt-product-new .product-blurb {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #C6A24C;
}

/* ---------- specifications ---------- */
/* "All Gold Tone instruments setup in Titusville, FL. USA" (inline-styled h3 under the title bar) */
.lg-skin-ob-3cj .gt-product-new .product-specifications .product-header + h3 {
  font: italic 400 15px/1.4 'Spectral', Georgia, serif !important;
  color: #C6A24C !important;
  text-decoration-color: rgba(198,162,76,.4) !important;
  text-underline-offset: 3px;
}
.lg-skin-ob-3cj .gt-product-new .product-specifications .group-label {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: #F0EADC;
  border-bottom: 1px solid rgba(198,162,76,.4);
}
/* the group / highlight icons are black line art: flip them to gilt */
.lg-skin-ob-3cj .gt-product-new .product-specifications .group-label img,
.lg-skin-ob-3cj .gt-product-new .product-features img {
  filter: invert(.75) sepia(1) saturate(1.8) hue-rotate(-6deg) brightness(.95);
}
.lg-skin-ob-3cj .gt-product-new .product-specifications .detail { border-bottom-color: #2A2218; }
.lg-skin-ob-3cj .gt-product-new .product-specifications .detail .spec-label {
  font: 500 11px/1.4 'Spectral', Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A7648;
}
/* every value is an <a> in product.php (href only when it links to a product), so plain values
   stay pearl and only real links get the gilt underline */
.lg-skin-ob-3cj .gt-product-new .product-specifications .detail .spec-value { color: #E6DDCC; font-family: 'Spectral', Georgia, serif; }
.lg-skin-ob-3cj .gt-product-new .product-specifications .detail .spec-value a { color: #E6DDCC !important; text-decoration: none; }
.lg-skin-ob-3cj .gt-product-new .product-specifications .detail .spec-value a[href] {
  text-decoration: underline; text-decoration-color: rgba(198,162,76,.55); text-underline-offset: 3px;
}
.lg-skin-ob-3cj .gt-product-new .product-specifications .detail .spec-value a[href]:hover { color: #E9CF8A !important; text-decoration-color: #E9CF8A; }
.lg-skin-ob-3cj .gt-product-new .product-features .feature-label { color: #B3AA9C; font-family: 'Spectral', Georgia, serif; }

/* ---------- description ---------- */
.lg-skin-ob-3cj .gt-product-new #product-description {
  font: 300 16px/1.68 'Spectral', Georgia, serif;
  color: #B3AA9C;
}
.lg-skin-ob-3cj .gt-product-new #product-description a { color: #C6A24C !important; }
.lg-skin-ob-3cj .gt-product-new #product-description a:hover { color: #E9CF8A !important; text-decoration: underline; }

/* ---------- video: the "selected" underline + arrows ---------- */
.lg-skin-ob-3cj .gt-product-new .youtube-thumbnails .youtube-thumbnail-container img.selected { border-color: #C6A24C !important; }
.lg-skin-ob-3cj .gt-product-new .youtube-thumbnails-wrapper .arrow { background-color: rgba(11,10,10,.85); color: #C6A24C; }

/* ---------- staff-only inline edit icons (blue #3c3ccc by default) ---------- */
.lg-skin-ob-3cj .gt-product-new .edit-button { color: #8A7648; }
.lg-skin-ob-3cj .gt-product-new .edit-button:hover { color: #E9CF8A; font-weight: normal; }

/* action button tracking and sizing (same breakpoints as the other Legends skins) */
@media only screen and (max-width: 1199px) {
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ob-3cj .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
    letter-spacing: .03em !important;
    font-size: 12px !important;
    padding: 0.4em 0.3em !important;
  }
}
@media only screen and (max-width: 767px) {
  .lg-skin-ob-3cj .gt-product-new .product-title-container .product-title::before { width: 20px; height: 20px; background-size: 20px 20px; margin-right: 8px; }
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ob-3cj .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
    letter-spacing: 0 !important;
    font-size: 11px !important;
    padding: 0 4px !important;
  }
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions .add-to-cart .glyphicon-shopping-cart {
    margin-left: 3px !important;
    font-size: 11px !important;
  }
}
/* stack the action buttons full width on small phones */
@media only screen and (max-width: 520px) {
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions .add-to-cart-container > div > div {
    width: 100% !important;
  }
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown {
    width: 100% !important;
    margin-top: 8px !important;
  }
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ob-3cj .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
    font-size: 13px !important;
    letter-spacing: .06em !important;
    padding: 0.5em 0.8em !important;
  }
  .lg-skin-ob-3cj .gt-product-new .product-detail-top .info.info-actions .add-to-cart .glyphicon-shopping-cart {
    margin-left: 6px !important;
    font-size: 13px !important;
  }
}

/* ---------- image column: cover photo + thumbnails (components/legends/featured-ob-3cj.php) ---------- */
.lg-feature { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* The landing page's gilt jewel-case frame, static. .lg-cover carries a 2px gilt gradient border
   (border-image, square corners) over jet black with a ruby glow behind the pot. .lg-cover-frame
   (the span in featured-ob-3cj.php) paints the faceted ruby at half strength behind the pot plus a
   few twinkles near the edges (its background; the gem is bottom-anchored so it sits behind the
   pot of the front photos), a gilt hairline 10px in (::before), and the
   filigree corners top-left / bottom-right on that hairline (::after). Built for PNG cut-outs. */
.lg-cover {
  position: relative; flex: 1 1 auto; min-height: clamp(380px, 58vh, 620px);
  border: 2px solid #C6A24C;
  border-image: linear-gradient(110deg, #7A5C22, #C6A24C 20%, #FFF1C4 30%, #C6A24C 40%, #7A5C22 55%, #E9CF8A 75%, #7A5C22) 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 44% at 50% 72%, rgba(168,18,42,.55), rgba(120,16,31,.22) 45%, rgba(11,10,10,0) 75%),
    #0B0A0A;
}
.lg-cover-frame {
  position: absolute; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.7 7.3 12.7 9.3 20 10 12.7 10.7 10.7 12.7 10 20 9.3 12.7 7.3 10.7 0 10 7.3 9.3 9.3 7.3 10 0Z' fill='%23FFF4E4'/%3E%3C/svg%3E") left 16% top 17% / 14px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.7 7.3 12.7 9.3 20 10 12.7 10.7 10.7 12.7 10 20 9.3 12.7 7.3 10.7 0 10 7.3 9.3 9.3 7.3 10 0Z' fill='%23FF7A93'/%3E%3C/svg%3E") right 8% top 20% / 11px 11px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.7 7.3 12.7 9.3 20 10 12.7 10.7 10.7 12.7 10 20 9.3 12.7 7.3 10.7 0 10 7.3 9.3 9.3 7.3 10 0Z' fill='%23F3D27A'/%3E%3C/svg%3E") left 8% top 34% / 9px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.7 7.3 12.7 9.3 20 10 12.7 10.7 10.7 12.7 10 20 9.3 12.7 7.3 10.7 0 10 7.3 9.3 9.3 7.3 10 0Z' fill='%23FFF4E4'/%3E%3C/svg%3E") right 6% top 64% / 12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.7 7.3 12.7 9.3 20 10 12.7 10.7 10.7 12.7 10 20 9.3 12.7 7.3 10.7 0 10 7.3 9.3 9.3 7.3 10 0Z' fill='%23FF7A93'/%3E%3C/svg%3E") left 14% bottom 11% / 10px 10px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.7 7.3 12.7 9.3 20 10 12.7 10.7 10.7 12.7 10 20 9.3 12.7 7.3 10.7 0 10 7.3 9.3 9.3 7.3 10 0Z' fill='%23F3D27A'/%3E%3C/svg%3E") right 18% bottom 7% / 13px 13px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='392' viewBox='0 0 400 392'%3E%3Cg opacity='.5'%3E%3Cg fill-opacity='.88' stroke='%23E3C27A' stroke-width='.8' stroke-linejoin='round'%3E%3Cpolygon points='10,120 120,40 70,120' fill='%23E64F6B'/%3E%3Cpolygon points='120,40 70,120 135,120' fill='%23DF3E5C'/%3E%3Cpolygon points='120,40 160,40 135,120' fill='%23E03F5D'/%3E%3Cpolygon points='160,40 135,120 200,120' fill='%23D52848'/%3E%3Cpolygon points='160,40 200,40 200,120' fill='%23D82C4B'/%3E%3Cpolygon points='200,40 240,40 200,120' fill='%23D12646'/%3E%3Cpolygon points='240,40 200,120 265,120' fill='%23C3213F'/%3E%3Cpolygon points='240,40 280,40 265,120' fill='%23C5223F'/%3E%3Cpolygon points='280,40 265,120 330,120' fill='%23B41C37'/%3E%3Cpolygon points='280,40 330,120 390,120' fill='%23A91932'/%3E%3Cpolygon points='10,128 70,128 104,213.12' fill='%23DA3251'/%3E%3Cpolygon points='10,128 104,213.12 200,352' fill='%23B81E39'/%3E%3Cpolygon points='104,213.12 70,128 200,352' fill='%23B31C37'/%3E%3Cpolygon points='70,128 135,128 141.5,213.12' fill='%23CE2544'/%3E%3Cpolygon points='70,128 141.5,213.12 200,352' fill='%23B01B35'/%3E%3Cpolygon points='141.5,213.12 135,128 200,352' fill='%23AA1932'/%3E%3Cpolygon points='135,128 200,128 180.5,213.12' fill='%23BF203D'/%3E%3Cpolygon points='135,128 180.5,213.12 200,352' fill='%23A71830'/%3E%3Cpolygon points='180.5,213.12 200,128 200,352' fill='%23A1162D'/%3E%3Cpolygon points='200,128 265,128 219.5,213.12' fill='%23B01B35'/%3E%3Cpolygon points='200,128 219.5,213.12 200,352' fill='%239D152C'/%3E%3Cpolygon points='219.5,213.12 265,128 200,352' fill='%23981329'/%3E%3Cpolygon points='265,128 330,128 258.5,213.12' fill='%23A1162E'/%3E%3Cpolygon points='265,128 258.5,213.12 200,352' fill='%23941227'/%3E%3Cpolygon points='258.5,213.12 330,128 200,352' fill='%238D1126'/%3E%3Cpolygon points='330,128 390,128 296,213.12' fill='%23921227'/%3E%3Cpolygon points='330,128 296,213.12 200,352' fill='%23891025'/%3E%3Cpolygon points='296,213.12 390,128 200,352' fill='%23821023'/%3E%3C/g%3E%3Crect x='10' y='120' width='380' height='8' fill='%23E9CF8A' fill-opacity='.55'/%3E%3Cpolygon points='120,40 280,40 390,120 390,128 200,352 10,128 10,120' fill='none' stroke='%23F3DC9A' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") center bottom 5% / min(58%, 290px) auto no-repeat;
}
.lg-cover-frame::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(198,162,76,.45);
}
.lg-cover-frame::after {
  content: ""; position: absolute; inset: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='63' height='63' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23C6A24C' stroke-width='1.333'%3E%3Cpath d='M0 60C34 60 60 34 60 0'/%3E%3Cpath d='M0 34C18 34 34 18 34 0'/%3E%3Cpath d='M6 46c22-4 36-18 40-40 4 16 16 22 30 20-14 8-18 22-14 36-10-12-38-18-56-16z'/%3E%3C/g%3E%3Ccircle cx='52' cy='52' r='2.2' fill='%23F0EADC'/%3E%3C/svg%3E") left 0 top 0 / 63px 63px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='63' height='63' viewBox='0 0 84 84'%3E%3Cg transform='rotate(180 42 42)'%3E%3Cg fill='none' stroke='%23C6A24C' stroke-width='1.333'%3E%3Cpath d='M0 60C34 60 60 34 60 0'/%3E%3Cpath d='M0 34C18 34 34 18 34 0'/%3E%3Cpath d='M6 46c22-4 36-18 40-40 4 16 16 22 30 20-14 8-18 22-14 36-10-12-38-18-56-16z'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='2.2' fill='%23F0EADC'/%3E%3C/g%3E%3C/svg%3E") right 0 bottom 0 / 63px 63px no-repeat;
}
.lg-cover-open {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0;
  padding: 36px 84px; border: 0; background: none; cursor: zoom-in;
}
.lg-cover-open:focus-visible { outline: 1px solid #C6A24C; outline-offset: -22px; }
.lg-cover-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 30px 44px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(200,30,60,.28));
}
/* featured-ob-3cj.php swapTo(): the new photo fades in once it has loaded (cover + lightbox) */
@keyframes lgEnter { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lg-cover-img.is-entering, .lg-lightbox .lg-lb-stage img.is-entering { animation: lgEnter .28s ease both; }
.lg-cover-nav {
  position: absolute; z-index: 3; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(198,162,76,.55); border-radius: 50%; background: rgba(11,10,10,.72);
  color: #E9CF8A; font: 400 26px/1 Georgia, serif; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.lg-cover-nav:hover, .lg-cover-nav:focus-visible { background: #C6A24C; border-color: #C6A24C; color: #0B0A0A; outline: none; }
.lg-cover-prev { left: 26px; }
.lg-cover-next { right: 26px; }
.lg-cover-count {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); pointer-events: none; z-index: 3;
  font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #8A7648;
}
.lg-feature.is-single .lg-cover-nav,
.lg-feature.is-single .lg-cover-count,
.lg-feature.is-single .lg-gallery { display: none; }

/* Thumbnails: cut-outs on ruby-black tiles in a gilt double rule (the landing page's peghead
   thumbnail); the current one is lit gilt. Rows are balanced per photo count: featured-ob-3cj.php
   sets --cols-lg (at most 9 across) and --cols-sm (at most 5, for narrow columns). */
.lg-gallery {
  --gap: 10px; --tile: 104px; --cols: var(--cols-lg, 9);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: 16px;
  padding: 0 max(0px, calc((100% - var(--cols) * var(--tile) - (var(--cols) - 1) * var(--gap)) / 2));
}
.lg-gallery-item {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  aspect-ratio: 1; box-sizing: border-box; padding: 7px; margin: 0; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #2A1216, #0B0A0A 75%);
  border: 1px solid rgba(198,162,76,.3); border-radius: 0; opacity: .8;
  box-shadow: inset 0 0 0 3px #0B0A0A, inset 0 0 0 4px rgba(198,162,76,.18);
  transition: border-color .2s, opacity .2s, transform .2s, box-shadow .2s;
}
.lg-gallery-item img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.lg-gallery-item:hover, .lg-gallery-item:focus-visible { opacity: 1; border-color: rgba(198,162,76,.7); transform: translateY(-2px); outline: none; }
.lg-gallery-item.is-current {
  opacity: 1; border-color: #C6A24C;
  box-shadow: inset 0 0 0 3px #0B0A0A, inset 0 0 0 4px rgba(198,162,76,.55), 0 0 12px rgba(200,30,60,.3);
}

/* laptops (992-1199px, image column ~480px) and phones: the narrow row count */
@media (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .lg-gallery { --cols: var(--cols-sm, 5); }
}
/* below the desktop grid the column is only as tall as its content, so the cover gets a set height */
@media (max-width: 991px) {
  .lg-cover { flex: none; min-height: 0; height: min(520px, 100vw); }
}
@media (max-width: 767px) {
  .lg-gallery { --gap: 8px; margin-top: 12px; }
  .lg-cover-frame::before, .lg-cover-frame::after { inset: 7px; }
  .lg-cover-open { padding: 28px 60px; }
  .lg-cover-nav { width: 38px; height: 38px; margin-top: -19px; font-size: 22px; }
  .lg-cover-prev { left: 16px; }
  .lg-cover-next { right: 16px; }
  .lg-cover-count { bottom: 18px; }
}

/* ---------- lightbox ---------- */
.lg-lightbox {
  position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 84px 120px; box-sizing: border-box;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(168,18,42,.3), rgba(168,18,42,0) 70%),
    rgba(11,10,10,.98);
  opacity: 0; transition: opacity .25s ease;
  font-family: 'Spectral', Georgia, serif;
}
.lg-lightbox[hidden] { display: none; }
.lg-lightbox.is-open { opacity: 1; }
.lg-lightbox .lg-lb-stage {
  margin: 0; flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lg-lightbox .lg-lb-stage img {
  max-width: min(100%, 1200px); max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.75));
}
.lg-lightbox .lg-lb-top {
  position: absolute; top: 24px; left: 28px; display: flex; align-items: baseline; gap: 14px;
}
.lg-lightbox .lg-lb-title { font: 400 18px/1 'Bodoni Moda', Georgia, serif; color: #F0EADC; letter-spacing: .01em; }
.lg-lightbox .lg-lb-count { font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #8A7648; }
.lg-lightbox > button {
  position: absolute; border: 1px solid rgba(198,162,76,.55); background: rgba(11,10,10,.7); color: #E9CF8A;
  width: 48px; height: 48px; border-radius: 50%; font: 400 26px/1 Georgia, serif; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s;
}
.lg-lightbox > button:hover, .lg-lightbox > button:focus-visible { background: #C6A24C; border-color: #C6A24C; color: #0B0A0A; outline: none; }
.lg-lightbox .lg-close { top: 16px; right: 16px; }
.lg-lightbox .lg-prev { left: 20px; top: 50%; margin-top: -54px; }
.lg-lightbox .lg-next { right: 20px; top: 50%; margin-top: -54px; }
.lg-lightbox .lg-lb-strip {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100% - 40px);
  display: flex; gap: 8px; overflow-x: auto; padding: 4px; scrollbar-width: none;
}
.lg-lightbox .lg-lb-strip::-webkit-scrollbar { display: none; }
.lg-lightbox .lg-lb-strip button {
  flex: none; width: 58px; height: 58px; padding: 4px; box-sizing: border-box; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #2A1216, #0B0A0A 75%);
  border: 1px solid rgba(198,162,76,.3); border-radius: 0; opacity: .55; transition: opacity .2s, border-color .2s;
}
.lg-lightbox .lg-lb-strip button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lg-lightbox .lg-lb-strip button:hover { opacity: .9; }
.lg-lightbox .lg-lb-strip button.is-current { opacity: 1; border-color: #C6A24C; }
@media (max-width: 600px) {
  .lg-lightbox { padding: 60px 10px 150px; }
  .lg-lightbox .lg-prev, .lg-lightbox .lg-next { top: auto; bottom: 88px; margin-top: 0; }
  .lg-lightbox .lg-prev { left: calc(50% - 60px); }
  .lg-lightbox .lg-next { right: calc(50% - 60px); }
  .lg-lightbox .lg-lb-strip { left: 10px; right: 10px; transform: none; max-width: none; }
  .lg-lightbox .lg-lb-strip button { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-gallery-item, .lg-lightbox { transition: none; }
  .lg-cover-img.is-entering, .lg-lightbox .lg-lb-stage img.is-entering { animation: none; }
}