/* Legends CEB-4 skin for the product page (goldtone/product.php, gated by $LEGENDS_HERO).
   Linked from components/legends/featured-ceb-4.php. Recolors the standard product page in the
   CEB-4 Legends "carpet page" palette (goldtone/legends.php #ceb-4): deep Kells green, illuminated
   gold, red-lead dots, triquetra accents. 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.

   Palette (from goldtone/legends.php #ceb-4):
     bg #0A1B17 (top #0F2823)  card #0E2420  hairline #1F3A33  rule rgba(207,160,82,.4)  top rule #8C5A2E
     gold #CFA052  gold-hover #E2BE72  gold-light #E6CFA9  red-lead #B5452C  label #A08466
     sub #C9A27A  body #BCC6BD  value #E4DCCB  heading #EFE6D4 */

.gt-product-new-container.lg-skin-ceb-4 {
  /* the shared card layout (components/css/product-cards.css), recolored */
  --pp-card-bg: #0E2420;
  --pp-card-border: #1F3A33;
  --pp-card-shadow: 0 18px 40px rgba(0,0,0,.4);
  background: linear-gradient(180deg, #0F2823 0, #0A1B17 720px, #050C0A 100%);
  color: #BCC6BD;
  font-family: 'Spectral', Georgia, serif;
  padding-top: 12px;
  border-top: 1px solid #8C5A2E;
}
.lg-skin-ceb-4 .gt-product-new { margin: 0 auto; }

/* ---------- breadcrumb + title ---------- */
.lg-skin-ceb-4 .product-breadcrumb,
.lg-skin-ceb-4 .product-breadcrumb a { color: #A08466; }
.lg-skin-ceb-4 .product-breadcrumb a:hover { color: #E2BE72; text-decoration: none; }
.lg-skin-ceb-4 .product-breadcrumb > li + li::before { color: #8C5A2E; }
.lg-skin-ceb-4 .product-breadcrumb .active { color: #CFA052; }
.lg-skin-ceb-4 .gt-product-new .product-title-container { border-bottom-color: #1F3A33; }
.lg-skin-ceb-4 .gt-product-new .product-title-container .product-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #EFE6D4;
  text-transform: none;
  text-wrap: balance;
}
/* the gold diamond from the landing page's section divider */
.lg-skin-ceb-4 .gt-product-new .product-title-container .product-title::before {
  content: "";
  display: inline-block;
  width: .32em; height: .32em;
  margin: 0 .45em .12em 0;
  background: #CFA052;
  transform: rotate(45deg);
  vertical-align: middle;
}

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

/* ---------- price, options, badges ---------- */
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info { border-color: #1F3A33; }
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-price .price {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  color: #EFE6D4;
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top .option-label {
  font: 500 11px/1.2 'Spectral', Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A08466;
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-option button,
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-option--condition button,
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-option--b-stock button {
  color: #E6CFA9;
  border-color: rgba(207,160,82,.45);
  border-radius: 0;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-option button.selected,
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-option--condition button.selected,
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-option--b-stock button.selected {
  background-color: #CFA052;
  border-color: #CFA052;
  color: #0A1B17 !important;
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-option button.out-of-stock { color: #5E6B60; }
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-option button.out-of-stock.selected {
  background-color: #23332D; border-color: #23332D; color: #8E9A90;
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top a { color: #CFA052; }
.lg-skin-ceb-4 .gt-product-new .product-detail-top a:hover { color: #E6CFA9; }
.lg-skin-ceb-4 .gt-product-new .product-detail-top .ri-medal-line { color: #CFA052 !important; }
.lg-skin-ceb-4 .gt-product-new .products-tooltip { color: #A08466; }
.lg-skin-ceb-4 .gt-product-new .option-label-tooltip { border-color: #CFA052; color: #CFA052; }
.lg-skin-ceb-4 .gt-product-new .option-label-tooltip:hover,
.lg-skin-ceb-4 .gt-product-new .option-label-tooltip:focus { background-color: #CFA052; color: #0A1B17; }

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

/* ---------- action buttons (inline-styled in product.php, hence !important) ---------- */
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions .add-to-cart:not(.hidden),
.lg-skin-ceb-4 .gt-product-new #notify-when-in-stock:not(.hidden),
.lg-skin-ceb-4 .gt-product-new #upgrade-with-case-button:not(.hidden) {
  background-color: #CFA052 !important;
  border: 1px solid #CFA052 !important;
  border-radius: 0 !important;
  color: #0A1B17 !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, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  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-ceb-4 .gt-product-new .product-detail-top .info.info-actions .add-to-cart .glyphicon-shopping-cart {
  color: #0A1B17 !important;
  margin-left: 4px !important;
  font-size: 12px !important;
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions .add-to-cart:hover,
.lg-skin-ceb-4 .gt-product-new #notify-when-in-stock:hover,
.lg-skin-ceb-4 .gt-product-new #upgrade-with-case-button:hover {
  background-color: #E2BE72 !important;
  border-color: #E2BE72 !important;
  box-shadow: 0 6px 20px rgba(207,160,82,.3);
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
  background-color: transparent !important;
  border: 1px solid #CFA052 !important;
  border-radius: 0 !important;
  color: #E6CFA9 !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-ceb-4 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions:hover {
  background-color: #CFA052 !important;
  color: #0A1B17 !important;
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu {
  background-color: #0E2420;
  border-color: rgba(207,160,82,.45);
  border-radius: 0;
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li { border-color: #1F3A33; }
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a {
  color: #E6CFA9 !important;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a:hover {
  background-color: #15332C;
  color: #EFE6D4 !important;
}

/* ---------- section title bars ("CEB-4 Specifications"), flanked by red-lead diamonds ---------- */
.lg-skin-ceb-4 .gt-product-new .product-header {
  background-color: transparent;
  border-top: 1px solid rgba(207,160,82,.4);
  border-bottom: 1px solid rgba(207,160,82,.4);
  padding: 10px 0 8px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: #EFE6D4;
  text-transform: none;
}
.lg-skin-ceb-4 .gt-product-new .product-header::before,
.lg-skin-ceb-4 .gt-product-new .product-header::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: #B5452C;
  transform: rotate(45deg);
  vertical-align: middle;
  margin: 0 12px 3px;
}
.lg-skin-ceb-4 .gt-product-new .product-blurb {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #C9A27A;
}

/* ---------- specifications ---------- */
/* "All Gold Tone instruments setup in Titusville, FL. USA" (inline-styled h3 under the title bar) */
.lg-skin-ceb-4 .gt-product-new .product-specifications .product-header + h3 {
  font: italic 400 15px/1.4 'Spectral', Georgia, serif !important;
  color: #C9A27A !important;
  text-decoration-color: rgba(207,160,82,.4) !important;
  text-underline-offset: 3px;
}
.lg-skin-ceb-4 .gt-product-new .product-specifications .group-label {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: #EFE6D4;
  border-bottom: 1px solid rgba(207,160,82,.4);
}
/* the group / highlight icons are dark line art: flip them to a warm gold */
.lg-skin-ceb-4 .gt-product-new .product-specifications .group-label img,
.lg-skin-ceb-4 .gt-product-new .product-features img {
  filter: invert(.78) sepia(1) saturate(1.6) hue-rotate(-8deg) brightness(.95);
}
.lg-skin-ceb-4 .gt-product-new .product-specifications .detail { border-bottom-color: #1F3A33; }
.lg-skin-ceb-4 .gt-product-new .product-specifications .detail .spec-label {
  font: 500 11px/1.4 'Spectral', Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A08466;
}
.lg-skin-ceb-4 .gt-product-new .product-specifications .detail .spec-value { color: #E4DCCB; font-family: 'Spectral', Georgia, serif; }
.lg-skin-ceb-4 .gt-product-new .product-specifications .detail .spec-value a { color: #CFA052 !important; }
.lg-skin-ceb-4 .gt-product-new .product-specifications .detail .spec-value a:hover { color: #E6CFA9 !important; text-decoration: underline; }
.lg-skin-ceb-4 .gt-product-new .product-features .feature-label { color: #BCC6BD; font-family: 'Spectral', Georgia, serif; }

/* ---------- description ---------- */
.lg-skin-ceb-4 .gt-product-new #product-description {
  font: 300 16px/1.68 'Spectral', Georgia, serif;
  color: #BCC6BD;
}
.lg-skin-ceb-4 .gt-product-new #product-description a { color: #CFA052 !important; }
.lg-skin-ceb-4 .gt-product-new #product-description a:hover { color: #E6CFA9 !important; text-decoration: underline; }

/* ---------- video: the "selected" underline + arrows ---------- */
.lg-skin-ceb-4 .gt-product-new .youtube-thumbnails .youtube-thumbnail-container img.selected { border-color: #CFA052 !important; }
.lg-skin-ceb-4 .gt-product-new .youtube-thumbnails-wrapper .arrow { background-color: rgba(10,27,23,.85); color: #CFA052; }

/* ---------- staff-only inline edit icons (blue #3c3ccc by default) ---------- */
.lg-skin-ceb-4 .gt-product-new .edit-button { color: #A08466; }
.lg-skin-ceb-4 .gt-product-new .edit-button:hover { color: #E2BE72; font-weight: normal; }

/* action button tracking and sizing (same breakpoints as the OB-Bela skin) */
@media only screen and (max-width: 1199px) {
  .lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ceb-4 .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ceb-4 .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-ceb-4 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ceb-4 .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ceb-4 .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-ceb-4 .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-ceb-4 .gt-product-new .product-detail-top .info.info-actions .add-to-cart-container > div > div {
    width: 100% !important;
  }
  .lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown {
    width: 100% !important;
    margin-top: 8px !important;
  }
  .lg-skin-ceb-4 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ceb-4 .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ceb-4 .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-ceb-4 .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-ceb-4.php) ---------- */
.lg-feature { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* The cover is the landing page's carpet-page panel, minus the plait band, drawn at 1:1 pixel size
   so every line stays crisp: the green panel with a warm glow behind the pot, a gold outer rule, and
   .lg-cover-frame (featured-ceb-4.php) = an inset gold hairline 16px in (::before), a row of red-lead
   dots 7px inside it (its own background; `space` spreads whole dots evenly, so none are cut off),
   and triquetra medallions on the hairline's corners (::after, painted on top so they cap the rows).
   Built for transparent PNG cut-outs. */
.lg-cover {
  position: relative; flex: 1 1 auto; min-height: clamp(380px, 58vh, 620px);
  border: 1px solid rgba(207,160,82,.55); border-radius: 2px; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 50% 68%, rgba(207,160,82,.13), rgba(150,90,30,.04) 55%, rgba(10,27,23,0) 80%),
    radial-gradient(ellipse 95% 85% at 50% 55%, #1E4A40, #12302A 55%, #0A1B17);
}
.lg-cover-frame {
  position: absolute; inset: 0; pointer-events: none;
  --dot: radial-gradient(circle, rgba(181,69,44,.8) 0 1px, rgba(181,69,44,0) 1.6px);
  background:
    var(--dot) left 0 top 22px / 7px 3px space no-repeat,
    var(--dot) left 0 bottom 22px / 7px 3px space no-repeat,
    var(--dot) left 22px top 0 / 3px 7px no-repeat space,
    var(--dot) right 22px top 0 / 3px 7px no-repeat space;
}
.lg-cover-frame::before {
  content: ""; position: absolute; inset: 16px;
  border: 1px solid rgba(207,160,82,.5);
}
.lg-cover-frame::after {
  content: ""; position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='-16 -16 32 32'%3E%3Ccircle r='14.5' fill='%230E2420' stroke='%23CFA052' stroke-width='1'/%3E%3Ccircle r='10.5' fill='none' stroke='%23B5452C' stroke-width='1.7' stroke-dasharray='0 3.2987' stroke-linecap='round'/%3E%3Cpath d='M0 -7.5A7.21 7.21 0 0 1 -0 3.75A7.21 7.21 0 0 1 0 -7.5ZM6.5 3.75A7.21 7.21 0 0 1 -3.25 -1.87A7.21 7.21 0 0 1 6.5 3.75ZM-6.5 3.75A7.21 7.21 0 0 1 3.25 -1.87A7.21 7.21 0 0 1 -6.5 3.75Z' fill='none' stroke='%23CFA052' stroke-width='1.1'/%3E%3C/svg%3E") left 0 top 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='-16 -16 32 32'%3E%3Ccircle r='14.5' fill='%230E2420' stroke='%23CFA052' stroke-width='1'/%3E%3Ccircle r='10.5' fill='none' stroke='%23B5452C' stroke-width='1.7' stroke-dasharray='0 3.2987' stroke-linecap='round'/%3E%3Cpath d='M0 -7.5A7.21 7.21 0 0 1 -0 3.75A7.21 7.21 0 0 1 0 -7.5ZM6.5 3.75A7.21 7.21 0 0 1 -3.25 -1.87A7.21 7.21 0 0 1 6.5 3.75ZM-6.5 3.75A7.21 7.21 0 0 1 3.25 -1.87A7.21 7.21 0 0 1 -6.5 3.75Z' fill='none' stroke='%23CFA052' stroke-width='1.1'/%3E%3C/svg%3E") right 0 top 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='-16 -16 32 32'%3E%3Ccircle r='14.5' fill='%230E2420' stroke='%23CFA052' stroke-width='1'/%3E%3Ccircle r='10.5' fill='none' stroke='%23B5452C' stroke-width='1.7' stroke-dasharray='0 3.2987' stroke-linecap='round'/%3E%3Cpath d='M0 -7.5A7.21 7.21 0 0 1 -0 3.75A7.21 7.21 0 0 1 0 -7.5ZM6.5 3.75A7.21 7.21 0 0 1 -3.25 -1.87A7.21 7.21 0 0 1 6.5 3.75ZM-6.5 3.75A7.21 7.21 0 0 1 3.25 -1.87A7.21 7.21 0 0 1 -6.5 3.75Z' fill='none' stroke='%23CFA052' stroke-width='1.1'/%3E%3C/svg%3E") left 0 bottom 0 no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='-16 -16 32 32'%3E%3Ccircle r='14.5' fill='%230E2420' stroke='%23CFA052' stroke-width='1'/%3E%3Ccircle r='10.5' fill='none' stroke='%23B5452C' stroke-width='1.7' stroke-dasharray='0 3.2987' stroke-linecap='round'/%3E%3Cpath d='M0 -7.5A7.21 7.21 0 0 1 -0 3.75A7.21 7.21 0 0 1 0 -7.5ZM6.5 3.75A7.21 7.21 0 0 1 -3.25 -1.87A7.21 7.21 0 0 1 6.5 3.75ZM-6.5 3.75A7.21 7.21 0 0 1 3.25 -1.87A7.21 7.21 0 0 1 -6.5 3.75Z' fill='none' stroke='%23CFA052' stroke-width='1.1'/%3E%3C/svg%3E") right 0 bottom 0 no-repeat;
}
.lg-cover-open {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0;
  padding: 40px 88px; border: 0; background: none; cursor: zoom-in;
}
.lg-cover-open:focus-visible { outline: 1px solid #CFA052; outline-offset: -30px; }
.lg-cover-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.6));
}
/* featured-ceb-4.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(207,160,82,.5); border-radius: 50%; background: rgba(10,27,23,.75);
  color: #E6CFA9; 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: #CFA052; border-color: #CFA052; color: #0A1B17; outline: none; }
.lg-cover-prev { left: 36px; }
.lg-cover-next { right: 36px; }
.lg-cover-count {
  position: absolute; right: 44px; bottom: 42px; pointer-events: none; z-index: 3;
  font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #A08466;
}
.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 small green panels; the current one is outlined in gold.
   Rows are balanced per photo count: featured-ceb-4.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: 5px; margin: 0; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 42%, #1E4A40, #0E2420 72%);
  border: 1px solid #1F3A33; border-radius: 2px; opacity: .8;
  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,.5)); }
.lg-gallery-item:hover, .lg-gallery-item:focus-visible { opacity: 1; border-color: rgba(207,160,82,.6); transform: translateY(-2px); outline: none; }
.lg-gallery-item.is-current { opacity: 1; border-color: #CFA052; box-shadow: 0 0 0 1px rgba(207,160,82,.35); }

/* 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-open { padding: 36px 70px; }
  .lg-cover-nav { width: 38px; height: 38px; margin-top: -19px; font-size: 22px; }
  .lg-cover-prev { left: 30px; }
  .lg-cover-next { right: 30px; }
  .lg-cover-count { right: 38px; bottom: 36px; }
}

/* ---------- 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% 46%, rgba(30,74,64,.55), rgba(30,74,64,0) 70%),
    rgba(5,12,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,.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 18px/1 'Bodoni Moda', Georgia, serif; color: #EFE6D4; letter-spacing: .01em; }
.lg-lightbox .lg-lb-count { font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #A08466; }
.lg-lightbox > button {
  position: absolute; border: 1px solid rgba(207,160,82,.5); background: rgba(10,27,23,.7); color: #E6CFA9;
  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: #CFA052; border-color: #CFA052; color: #0A1B17; 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%, #1E4A40, #0E2420 72%);
  border: 1px solid #1F3A33; border-radius: 2px; 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: #CFA052; }
@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; }
}