/* Legends OB-2JM skin for the product page (goldtone/product.php, gated by $LEGENDS_HERO).
   Linked from components/legends/featured-ob-2jm.php. Recolors the standard product page in the
   OB-2JM Legends palette (goldtone/legends.php #ob-2jm): Joe Mullins is also a broadcaster, so the
   cover is the landing page's 1930s cathedral radio (walnut cabinet, gold fretwork over a glowing
   grille), on ivory. A LIGHT skin, so product.php leaves the PayPal note's text black for it.
   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-*.
   OB-2JM is an Orange Blossom model, so it also styles the OB-only pieces: the "Mastertone Revival"
   h3 under the title, the Customize button (#ob-customize-button) and, lightly, the customization
   modal (#orange-blossom-customization-modal; the skin CSS only loads on this page).
   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.

   Palette (from goldtone/legends.php #ob-2jm):
     bg #F4EFE3  card #FBF8EF  hairline rgba(176,138,62,.35)  gold #B08A3E  gold-bright #D4AF37
     gold-light #E9CF8A  plate #FFF1C4>#D4AF37>#9C7A2E  walnut #D08E36>#A45E22>#6A3414>#2E1508
     grille #22150B  ink #15120E  body #3E3326  label #7A5A1C  caption #6B5A3E  needle red #B4292B */

.gt-product-new-container.lg-skin-ob-2jm {
  /* the shared card layout (components/css/product-cards.css), recolored */
  --pp-card-bg: #FBF8EF;
  --pp-card-border: rgba(176,138,62,.35);
  --pp-card-shadow: 0 14px 34px rgba(21,18,14,.08);
  background: #F4EFE3;
  color: #3E3326;
  font-family: 'Spectral', Georgia, serif;
  padding-top: 12px;
  border-top: 1px solid #B08A3E;
}
.lg-skin-ob-2jm .gt-product-new { margin: 0 auto; }

/* ---------- breadcrumb + title ---------- */
.lg-skin-ob-2jm .product-breadcrumb,
.lg-skin-ob-2jm .product-breadcrumb a { color: #6B5A3E; }
.lg-skin-ob-2jm .product-breadcrumb a:hover { color: #B08A3E; text-decoration: none; }
.lg-skin-ob-2jm .product-breadcrumb > li + li::before { color: rgba(176,138,62,.6); }
.lg-skin-ob-2jm .product-breadcrumb .active { color: #7A5A1C; }
.lg-skin-ob-2jm .gt-product-new .product-title-container { border-bottom-color: rgba(176,138,62,.35); }
.lg-skin-ob-2jm .gt-product-new .product-title-container .product-title {
  font-family: 'Limelight', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
  color: #15120E;
  text-transform: none;
  text-wrap: balance;
}
/* the radio's winged crest ahead of the title */
.lg-skin-ob-2jm .gt-product-new .product-title-container .product-title::before {
  content: "";
  display: inline-block;
  width: 48px; height: 19px;
  margin: 0 12px 5px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='19' viewBox='0 0 140 56'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF1C4'/%3E%3Cstop offset='.5' stop-color='%23D4AF37'/%3E%3Cstop offset='1' stop-color='%238A6A2A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M70 28C52 10 30 6 8 16 22 20 30 26 34 34 24 36 16 42 12 50 34 50 54 42 70 28Z' fill='url(%23c)' stroke='%236E5420' stroke-width='2'/%3E%3Cpath d='M70 28C88 10 110 6 132 16 118 20 110 26 106 34 116 36 124 42 128 50 106 50 86 42 70 28Z' fill='url(%23c)' stroke='%236E5420' stroke-width='2'/%3E%3Cpath d='M46 16L70 28 46 40ZM94 16L70 28 94 40Z' fill='%2315120E' stroke='%23E9CF8A' stroke-width='2'/%3E%3Cpath d='M70 18L80 28 70 38 60 28Z' fill='url(%23c)' stroke='%236E5420' stroke-width='2'/%3E%3C/svg%3E") center / 48px 19px no-repeat;
  vertical-align: middle;
}
/* Orange Blossom only: "The Mastertone Revival series..." (inline margin:0 h3 under the title) */
.lg-skin-ob-2jm .gt-product-new .product-title-container h1 + h3,
.lg-skin-ob-2jm .gt-product-new .product-title-container .edit-button + h3 {
  font: italic 400 16px/1.4 'Bodoni Moda', Georgia, serif;
  color: #7A5A1C;
  margin-top: 6px !important;
}

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

/* ---------- price, options, badges ---------- */
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info { border-color: rgba(176,138,62,.3); }
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-price .price {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  color: #15120E;
}
.lg-skin-ob-2jm .gt-product-new .product-detail-top .option-label {
  font: 500 11px/1.2 'Spectral', Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7A5A1C;
}
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-option button,
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-option--condition button,
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-option--b-stock button {
  color: #3E3326;
  background-color: #FBF8EF;
  border-color: rgba(176,138,62,.55);
  border-radius: 0;
  font-family: 'Spectral', Georgia, serif;
}
/* the selected chip is the walnut cabinet */
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-option button.selected,
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-option--condition button.selected,
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-option--b-stock button.selected {
  background-color: #6A3414;
  border-color: #6A3414;
  color: #F4EFE3 !important;
}
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-option button.out-of-stock { color: #A89A84; }
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-option button.out-of-stock.selected {
  background-color: #DCD3C0; border-color: #DCD3C0; color: #6B5A3E !important;
}
.lg-skin-ob-2jm .gt-product-new .product-detail-top a { color: #7A5A1C; }
.lg-skin-ob-2jm .gt-product-new .product-detail-top a:hover { color: #B08A3E; }
.lg-skin-ob-2jm .gt-product-new .product-detail-top .ri-medal-line { color: #B08A3E !important; }
.lg-skin-ob-2jm .gt-product-new .products-tooltip { color: #6B5A3E; }
.lg-skin-ob-2jm .gt-product-new .option-label-tooltip { border-color: #B08A3E; color: #B08A3E; }
.lg-skin-ob-2jm .gt-product-new .option-label-tooltip:hover,
.lg-skin-ob-2jm .gt-product-new .option-label-tooltip:focus { background-color: #B08A3E; color: #FBF8EF; }

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

/* ---------- action buttons (inline-styled in product.php, hence !important) ---------- */
/* Add to Cart / Notify / case upgrade: the landing page's Buy Now (ink, gold type; gold on hover) */
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions .add-to-cart:not(.hidden),
.lg-skin-ob-2jm .gt-product-new #notify-when-in-stock:not(.hidden),
.lg-skin-ob-2jm .gt-product-new #upgrade-with-case-button:not(.hidden) {
  background-color: #15120E !important;
  border: 1px solid #15120E !important;
  border-radius: 0 !important;
  color: #E9CF8A !important;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
  box-shadow: 0 4px 12px rgba(21,18,14,.18);
  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;
}
/* the case upgrade sits under the row (product.php margin-top 10px) */
.lg-skin-ob-2jm .gt-product-new #upgrade-with-case-button:not(.hidden) { margin-top: 10px !important; }
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions .add-to-cart .glyphicon-shopping-cart,
.lg-skin-ob-2jm .gt-product-new #upgrade-with-case-button .glyphicon-shopping-cart {
  color: inherit !important;
  margin-left: 4px !important;
  font-size: 12px !important;
}
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions .add-to-cart:hover,
.lg-skin-ob-2jm .gt-product-new #notify-when-in-stock:hover,
.lg-skin-ob-2jm .gt-product-new #upgrade-with-case-button:hover {
  background-color: #B08A3E !important;
  border-color: #B08A3E !important;
  color: #15120E !important;
}
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
  background-color: transparent !important;
  border: 1px solid #15120E !important;
  border-radius: 0 !important;
  color: #15120E !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-2jm .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions:hover {
  background-color: #15120E !important;
  color: #E9CF8A !important;
}
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu {
  background-color: #FBF8EF;
  border-color: rgba(176,138,62,.55);
  border-radius: 0;
}
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li { border-color: rgba(176,138,62,.25); }
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a {
  color: #3E3326 !important;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a:hover {
  background-color: #F1E8D2;
  color: #15120E !important;
}
/* Orange Blossom "Customize: Neck / Rim / Tonering / Tailpiece" (full width under the row):
   the radio's gold nameplate */
.lg-skin-ob-2jm .gt-product-new #ob-customize-button:not(.hidden) {
  background: linear-gradient(#FFF1C4, #D4AF37 55%, #9C7A2E) !important;
  border: 1px solid #6E5420 !important;
  border-radius: 0 !important;
  color: #15120E !important;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(21,18,14,.25);
  min-height: 42px !important;
  padding: 0.5em 0.6em !important;
  white-space: normal !important;
  transition: filter .2s, box-shadow .2s;
}
.lg-skin-ob-2jm .gt-product-new #ob-customize-button:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 12px rgba(176,138,62,.35);
}

/* ---------- section title bars ("OB-2JM Specifications"), flanked by gold bowties ---------- */
.lg-skin-ob-2jm .gt-product-new .product-header {
  background-color: transparent;
  border-top: 1px solid rgba(176,138,62,.55);
  border-bottom: 1px solid rgba(176,138,62,.55);
  padding: 10px 0 8px;
  font-family: 'Limelight', Georgia, serif;
  font-weight: 400;
  color: #15120E;
  text-transform: none;
}
.lg-skin-ob-2jm .gt-product-new .product-header::before,
.lg-skin-ob-2jm .gt-product-new .product-header::after {
  content: "";
  display: inline-block;
  width: 26px; height: 14px;
  margin: 0 12px 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='-13 -7.5 26 15'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF1C4'/%3E%3Cstop offset='.35' stop-color='%23D4AF37'/%3E%3Cstop offset='.7' stop-color='%239C7A2E'/%3E%3Cstop offset='1' stop-color='%23E9CF8A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-12 -7L0 0-12 7ZM12 -7L0 0 12 7Z' fill='url(%23g)' stroke='%236E5420' stroke-width='.8'/%3E%3C/svg%3E") center / 26px 14px no-repeat;
  vertical-align: middle;
}
.lg-skin-ob-2jm .gt-product-new .product-blurb {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #7A5A1C;
}

/* ---------- specifications ---------- */
/* "All Gold Tone instruments setup in Titusville, FL. USA" (inline-styled h3 under the title bar) */
.lg-skin-ob-2jm .gt-product-new .product-specifications .product-header + h3 {
  font: italic 400 15px/1.4 'Spectral', Georgia, serif !important;
  color: #7A5A1C !important;
  text-decoration-color: rgba(176,138,62,.5) !important;
  text-underline-offset: 3px;
}
.lg-skin-ob-2jm .gt-product-new .product-specifications .group-label {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: #15120E;
  border-bottom: 1px solid rgba(176,138,62,.55);
}
/* the group / highlight icons are black line art: tint them walnut-gold */
.lg-skin-ob-2jm .gt-product-new .product-specifications .group-label img,
.lg-skin-ob-2jm .gt-product-new .product-features img {
  filter: invert(38%) sepia(62%) saturate(520%) hue-rotate(6deg) brightness(.85);
}
.lg-skin-ob-2jm .gt-product-new .product-specifications .detail { border-bottom-color: rgba(176,138,62,.2); }
.lg-skin-ob-2jm .gt-product-new .product-specifications .detail .spec-label {
  font: 500 11px/1.4 'Spectral', Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7A5A1C;
}
/* every value is an <a> in product.php (href only when it links to a product), so plain values
   stay ink and only real links get the gold underline */
.lg-skin-ob-2jm .gt-product-new .product-specifications .detail .spec-value { color: #15120E; font-family: 'Spectral', Georgia, serif; }
.lg-skin-ob-2jm .gt-product-new .product-specifications .detail .spec-value a { color: #15120E !important; text-decoration: none; }
.lg-skin-ob-2jm .gt-product-new .product-specifications .detail .spec-value a[href] {
  text-decoration: underline; text-decoration-color: rgba(176,138,62,.7); text-underline-offset: 3px;
}
.lg-skin-ob-2jm .gt-product-new .product-specifications .detail .spec-value a[href]:hover { color: #7A5A1C !important; text-decoration-color: #7A5A1C; }
.lg-skin-ob-2jm .gt-product-new .product-features .feature-label { color: #3E3326; font-family: 'Spectral', Georgia, serif; }

/* ---------- description ---------- */
.lg-skin-ob-2jm .gt-product-new #product-description {
  font: 300 16px/1.68 'Spectral', Georgia, serif;
  color: #3E3326;
}
.lg-skin-ob-2jm .gt-product-new #product-description a { color: #7A5A1C !important; }
.lg-skin-ob-2jm .gt-product-new #product-description a:hover { color: #B08A3E !important; text-decoration: underline; }

/* ---------- video: the "selected" underline + arrows ---------- */
.lg-skin-ob-2jm .gt-product-new .youtube-thumbnails .youtube-thumbnail-container img.selected { border-color: #B08A3E !important; }
.lg-skin-ob-2jm .gt-product-new .youtube-thumbnails-wrapper .arrow { background-color: rgba(251,248,239,.9); color: #7A5A1C; }

/* ---------- staff-only inline edit icons (blue #3c3ccc by default) ---------- */
.lg-skin-ob-2jm .gt-product-new .edit-button { color: #B08A3E !important; }
.lg-skin-ob-2jm .gt-product-new .edit-button:hover { color: #7A5A1C !important; font-weight: normal; }

/* ---------- Orange Blossom customization modal (light touch: type + the two footer buttons) ---------- */
#orange-blossom-customization-modal .modal-title {
  font-family: 'Limelight', Georgia, serif;
  font-weight: 400;
  color: #15120E;
}
#orange-blossom-customization-modal .modal-content { border-radius: 0; border: 1px solid rgba(176,138,62,.55); }
#orange-blossom-customization-modal .modal-header,
#orange-blossom-customization-modal .modal-footer { border-color: rgba(176,138,62,.35); }
#orange-blossom-customization-modal #add-to-cart-button {
  background: #15120E; border: 1px solid #15120E; border-radius: 0; color: #E9CF8A;
  font-family: 'Spectral', Georgia, serif; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
#orange-blossom-customization-modal #add-to-cart-button:hover { background: #B08A3E; border-color: #B08A3E; color: #15120E; }
#orange-blossom-customization-modal #reset-customization-button {
  background: transparent; border: 1px solid #15120E; border-radius: 0; color: #15120E;
  font-family: 'Spectral', Georgia, serif; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
#orange-blossom-customization-modal #reset-customization-button:hover { background: #F1E8D2; }

/* action button tracking and sizing (same breakpoints as the other Legends skins) */
@media only screen and (max-width: 1199px) {
  .lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ob-2jm .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ob-2jm .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;
  }
  .lg-skin-ob-2jm .gt-product-new #ob-customize-button { font-size: 12px !important; letter-spacing: .03em !important; }
}
@media only screen and (max-width: 767px) {
  .lg-skin-ob-2jm .gt-product-new .product-title-container .product-title::before { width: 38px; height: 15px; background-size: 38px 15px; margin-right: 8px; }
  .lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ob-2jm .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ob-2jm .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-2jm .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-2jm .gt-product-new .product-detail-top .info.info-actions .add-to-cart-container > div > div {
    width: 100% !important;
  }
  .lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown {
    width: 100% !important;
    margin-top: 8px !important;
  }
  .lg-skin-ob-2jm .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ob-2jm .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ob-2jm .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-2jm .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-2jm.php) ---------- */
.lg-feature { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* The landing page's cathedral radio, static: .lg-cover is the walnut cabinet (radial walnut with a
   fine vertical grain, a domed top, gold/brass rings as inset shadows). .lg-cover-frame (the span in
   featured-ob-2jm.php) is the grille set into it: fine gold mesh (1px lines every 3px) over dark
   cloth, a warm tube glow, and the gold fretwork (rays + gothic arch + bowtie studs) sized to the
   grille. The photo sits in the grille; the arrows are the radio's gold knobs and the counter is its
   nameplate. Built for transparent cut-outs (the 1387 photos already are). */
.lg-cover {
  --jm-inset: 22px;
  position: relative; flex: 1 1 auto; min-height: clamp(400px, 60vh, 640px);
  border-radius: 50% 50% 16px 16px / 26% 26% 16px 16px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, rgba(255,230,190,.04) 1px 4px, rgba(0,0,0,0) 4px 9px),
    radial-gradient(ellipse at 50% 42%, #D08E36, #A45E22 34%, #6A3414 66%, #2E1508);
  box-shadow: 0 22px 44px rgba(21,18,14,.3), inset 0 0 0 3px #D4AF37, inset 0 0 0 5px #6E5420, inset 0 0 0 6px #E9CF8A, inset 0 -12px 22px rgba(0,0,0,.4);
}
.lg-cover-frame {
  position: absolute; pointer-events: none;
  inset: var(--jm-inset) var(--jm-inset) 52px;
  border-radius: 50% 50% 6px 6px / 24% 24% 6px 6px;
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 720' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF1C4'/%3E%3Cstop offset='.35' stop-color='%23D4AF37'/%3E%3Cstop offset='.7' stop-color='%239C7A2E'/%3E%3Cstop offset='1' stop-color='%23E9CF8A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='%231E1006' stroke-width='5.5' stroke-linecap='round' fill='none' opacity='.85'%3E%3Cpath d='M200 760L-134 9'/%3E%3Cpath d='M200 760L-60 -89'/%3E%3Cpath d='M200 760L22 -161'/%3E%3Cpath d='M200 760L110 -205'/%3E%3Cpath d='M200 760L200 -220'/%3E%3Cpath d='M200 760L290 -205'/%3E%3Cpath d='M200 760L378 -161'/%3E%3Cpath d='M200 760L460 -89'/%3E%3Cpath d='M200 760L534 9'/%3E%3C/g%3E%3Cg stroke='url(%23g)' stroke-width='3' stroke-linecap='round' fill='none'%3E%3Cpath d='M200 760L-134 9'/%3E%3Cpath d='M200 760L-60 -89'/%3E%3Cpath d='M200 760L22 -161'/%3E%3Cpath d='M200 760L110 -205'/%3E%3Cpath d='M200 760L200 -220'/%3E%3Cpath d='M200 760L290 -205'/%3E%3Cpath d='M200 760L378 -161'/%3E%3Cpath d='M200 760L460 -89'/%3E%3Cpath d='M200 760L534 9'/%3E%3C/g%3E%3Cg stroke='%23FFF6D8' stroke-width='.7' fill='none' opacity='.55' transform='translate(-1 0)'%3E%3Cpath d='M200 760L-134 9'/%3E%3Cpath d='M200 760L-60 -89'/%3E%3Cpath d='M200 760L22 -161'/%3E%3Cpath d='M200 760L110 -205'/%3E%3Cpath d='M200 760L200 -220'/%3E%3Cpath d='M200 760L290 -205'/%3E%3Cpath d='M200 760L378 -161'/%3E%3Cpath d='M200 760L460 -89'/%3E%3Cpath d='M200 760L534 9'/%3E%3C/g%3E%3Cpath d='M40 720V300C40 160 110 70 200 40 290 70 360 160 360 300V720' fill='none' stroke='%232A170A' stroke-width='7'/%3E%3Cpath d='M40 720V300C40 160 110 70 200 40 290 70 360 160 360 300V720' fill='none' stroke='url(%23g)' stroke-width='4'/%3E%3Cpath transform='translate(200 40) scale(.9)' d='M-12 -7L0 0-12 7ZM12 -7L0 0 12 7Z' fill='url(%23g)' stroke='%231E1006' stroke-width='.8'/%3E%3Cpath transform='translate(118 92) scale(.9)' d='M-12 -7L0 0-12 7ZM12 -7L0 0 12 7Z' fill='url(%23g)' stroke='%231E1006' stroke-width='.8'/%3E%3Cpath transform='translate(282 92) scale(.9)' d='M-12 -7L0 0-12 7ZM12 -7L0 0 12 7Z' fill='url(%23g)' stroke='%231E1006' stroke-width='.8'/%3E%3Cpath transform='translate(70 190) scale(.9)' d='M-12 -7L0 0-12 7ZM12 -7L0 0 12 7Z' fill='url(%23g)' stroke='%231E1006' stroke-width='.8'/%3E%3Cpath transform='translate(330 190) scale(.9)' d='M-12 -7L0 0-12 7ZM12 -7L0 0 12 7Z' fill='url(%23g)' stroke='%231E1006' stroke-width='.8'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 62%, rgba(226,140,48,.55), rgba(150,70,20,.3) 40%, rgba(20,12,6,.85) 78%),
    repeating-linear-gradient(0deg, rgba(233,207,138,.11) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(233,207,138,.11) 0 1px, rgba(0,0,0,0) 1px 3px),
    #22150B;
  box-shadow: 0 0 0 3px #D4AF37, 0 0 0 5px #6E5420, inset 0 8px 20px rgba(0,0,0,.7);
}
.lg-cover-open {
  position: absolute; inset: var(--jm-inset) var(--jm-inset) 52px; display: block; width: auto; height: auto; margin: 0;
  padding: 7% 64px 3%; border: 0; background: none; cursor: zoom-in;
  border-radius: 50% 50% 6px 6px / 24% 24% 6px 6px;
}
.lg-cover-open:focus-visible { outline: 2px solid #E9CF8A; outline-offset: -6px; }
.lg-cover-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.7));
}
/* featured-ob-2jm.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; }
/* prev / next: the radio's knurled gold knobs, down on the cabinet's base either side of the plate */
.lg-cover-nav {
  position: absolute; z-index: 3; bottom: 9px; width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid transparent; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFF1C4, #D4AF37 45%, #7A5C22 90%) padding-box,
              repeating-conic-gradient(#E9CF8A 0 7deg, #6E5420 7deg 14deg) border-box;
  box-shadow: 0 3px 6px rgba(0,0,0,.55);
  color: #3A2210; font: 400 22px/1 Georgia, serif; cursor: pointer;
  transition: filter .2s, transform .2s;
}
.lg-cover-nav:hover, .lg-cover-nav:focus-visible { filter: brightness(1.12); transform: rotate(-12deg); outline: none; }
.lg-cover-prev { left: calc(50% - 118px); }
.lg-cover-next { right: calc(50% - 118px); }
/* the photo counter is the radio's gold nameplate */
.lg-cover-count {
  position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); pointer-events: none; z-index: 3;
  padding: 5px 14px; border-radius: 3px;
  font: 400 11px/1 'Limelight', Georgia, serif; letter-spacing: .22em; color: #3A2210;
  background: linear-gradient(#FFF1C4, #D4AF37 55%, #9C7A2E);
  box-shadow: 0 0 0 1px #6E5420, 0 2px 3px rgba(0,0,0,.4);
}
.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 ivory tiles in a gold hairline; the current one is framed in brass.
   Rows are balanced per photo count: featured-ob-2jm.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: 18px;
  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: 6px; margin: 0; overflow: hidden; cursor: pointer;
  background: #FBF8EF;
  border: 1px solid rgba(176,138,62,.4); border-radius: 0; opacity: .85;
  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 3px 5px rgba(21,18,14,.3)); }
.lg-gallery-item:hover, .lg-gallery-item:focus-visible { opacity: 1; border-color: #B08A3E; transform: translateY(-2px); outline: none; }
.lg-gallery-item.is-current {
  opacity: 1; border-color: #B08A3E;
  box-shadow: inset 0 0 0 2px #FBF8EF, inset 0 0 0 3px #D4AF37, 0 4px 10px rgba(176,138,62,.25);
}

/* 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(560px, 112vw); }
}
@media (max-width: 767px) {
  .lg-cover { --jm-inset: 16px; }
  .lg-gallery { --gap: 8px; margin-top: 14px; }
  .lg-cover-open { padding: 9% 40px 3%; }
  .lg-cover-nav { width: 32px; height: 32px; font-size: 19px; bottom: 10px; }
  .lg-cover-prev { left: calc(50% - 100px); }
  .lg-cover-next { right: calc(50% - 100px); }
}

/* ---------- lightbox: the dark of the grille ---------- */
.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(226,140,48,.28), rgba(150,70,20,0) 70%),
    #1A100A;
  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,.7));
}
.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 20px/1 'Limelight', Georgia, serif; color: #E9CF8A; }
.lg-lightbox .lg-lb-count { font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #B08A3E; }
.lg-lightbox > button {
  position: absolute; border: 1px solid rgba(233,207,138,.5); background: rgba(26,16,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: #D4AF37; border-color: #D4AF37; color: #15120E; 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% 42%, #3A2210, #1A100A 75%);
  border: 1px solid rgba(233,207,138,.25); 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: #D4AF37; }
@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, .lg-cover-nav { transition: none; }
  .lg-cover-img.is-entering, .lg-lightbox .lg-lb-stage img.is-entering { animation: none; }
}