/* Legends OB-Bela skin for the product page (goldtone/product.php, gated by $LEGENDS_HERO).
   Linked from components/legends/featured-ob-bela.php. Recolors the standard product page in the
   OB-Bela "Bluegrass Heart" rich ruby/crimson red palette with heart motif 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 (Bluegrass Heart Crimson Theme):
     bg #120A0D  card #1B0E12  hairline #481D26  rule rgba(196,30,58,.38)  label #AB7A84
     primary-ruby #C41E3A  ruby-hover #E52D4D  ruby-glow rgba(196,30,58,.5)  ruby-soft #FFB3C0
     gold-accent #D4AF37  body #D8C5C8  value #F2E4E7  heading #FDF2F4 */

.gt-product-new-container.lg-skin-ob-bela {
  /* the shared card layout (components/css/product-cards.css), recolored in deep ruby theme */
  --pp-card-bg: #1B0E12;
  --pp-card-border: #481D26;
  --pp-card-shadow: 0 18px 40px rgba(0,0,0,.45);
  background: #120A0D;
  color: #D8C5C8;
  font-family: 'Spectral', Georgia, serif;
  padding-top: 12px;
  border-top: 1px solid #C41E3A;
}
.lg-skin-ob-bela .gt-product-new { margin: 0 auto; }

/* ---------- breadcrumb + title ---------- */
.lg-skin-ob-bela .product-breadcrumb,
.lg-skin-ob-bela .product-breadcrumb a { color: #AB7A84; }
.lg-skin-ob-bela .product-breadcrumb a:hover { color: #E52D4D; text-decoration: none; }
.lg-skin-ob-bela .product-breadcrumb > li + li::before { color: #66202D; }
.lg-skin-ob-bela .product-breadcrumb .active { color: #E52D4D; }
.lg-skin-ob-bela .gt-product-new .product-title-container { border-bottom-color: #481D26; }
.lg-skin-ob-bela .gt-product-new .product-title-container .product-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #FDF2F4;
  text-transform: none;
  text-wrap: balance;
}
.lg-skin-ob-bela .gt-product-new .product-title-container .product-title::before {
  content: "♥ ";
  color: #C41E3A;
  margin-right: 8px;
  font-size: 0.9em;
  vertical-align: 1px;
  text-shadow: 0 0 14px rgba(196,30,58,.65);
}

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

/* ---------- price, options, badges ---------- */
.lg-skin-ob-bela .gt-product-new .product-detail-top .info { border-color: #481D26; }
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-price .price {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  color: #FDF2F4;
  text-shadow: 0 0 10px rgba(196,30,58,.25);
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .option-label {
  font: 500 11px/1.2 'Spectral', Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #AB7A84;
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-option button,
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-option--condition button,
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-option--b-stock button {
  color: #DEB841;
  border-color: #66202D;
  border-radius: 0;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-option button.selected,
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-option--condition button.selected,
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-option--b-stock button.selected {
  background-color: #C41E3A;
  border-color: #C41E3A;
  color: #FFE699 !important;
  box-shadow: 0 0 10px rgba(196,30,58,.4);
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-option button.out-of-stock { color: #6E454C; }
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-option button.out-of-stock.selected {
  background-color: #381A20; border-color: #381A20; color: #A88289;
}
.lg-skin-ob-bela .gt-product-new .product-detail-top a { color: #DEB841; }
.lg-skin-ob-bela .gt-product-new .product-detail-top a:hover { color: #FFF0BD; }
.lg-skin-ob-bela .gt-product-new .product-detail-top .ri-medal-line { color: #C41E3A !important; }
.lg-skin-ob-bela .gt-product-new .product-detail-top .ri-medal-line::before {
  content: "♥ " !important;
  color: #C41E3A !important;
  font-family: inherit;
  font-size: 1.1em;
}
.lg-skin-ob-bela .gt-product-new .products-tooltip { color: #AB7A84; }
.lg-skin-ob-bela .gt-product-new .option-label-tooltip { border-color: #DEB841; color: #DEB841; }
.lg-skin-ob-bela .gt-product-new .option-label-tooltip:hover,
.lg-skin-ob-bela .gt-product-new .option-label-tooltip:focus { background-color: #DEB841; color: #120A0D; }

/* Ensure .hidden always wins over any custom button rules */
.lg-skin-ob-bela .gt-product-new .hidden {
  display: none !important;
}

/* ---------- action buttons (inline-styled in product.php, hence !important) ---------- */
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions .add-to-cart:not(.hidden),
.lg-skin-ob-bela .gt-product-new #notify-when-in-stock:not(.hidden),
.lg-skin-ob-bela .gt-product-new #upgrade-with-case-button:not(.hidden) {
  background-color: #C41E3A !important;
  border: 1px solid #C41E3A !important;
  border-radius: 0 !important;
  color: #FFE699 !important;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(196,30,58,.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-ob-bela .gt-product-new .product-detail-top .info.info-actions .add-to-cart .glyphicon-shopping-cart {
  color: #FFE699 !important;
  margin-left: 4px !important;
  font-size: 12px !important;
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions .add-to-cart:hover,
.lg-skin-ob-bela .gt-product-new #notify-when-in-stock:hover,
.lg-skin-ob-bela .gt-product-new #upgrade-with-case-button:hover {
  background-color: #E52D4D !important;
  border-color: #E52D4D !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(229,45,77,.55);
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions .add-to-cart:hover .glyphicon-shopping-cart {
  color: #ffffff !important;
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
  background-color: transparent !important;
  border: 1px solid #C41E3A !important;
  border-radius: 0 !important;
  color: #DEB841 !important;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .04em !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-bela .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions:hover {
  background-color: #C41E3A !important;
  color: #FFE699 !important;
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu {
  background-color: #1B0E12;
  border-color: #66202D;
  border-radius: 0;
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li { border-color: #66202D; }
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a {
  color: #DEB841 !important;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a:hover {
  background-color: #2D141A;
  color: #FFF0BD !important;
}

/* ---------- section title bars ("OB-Bela Specifications") ---------- */
.lg-skin-ob-bela .gt-product-new .product-header {
  background-color: transparent;
  border-top: 1px solid rgba(196,30,58,.38);
  border-bottom: 1px solid rgba(196,30,58,.38);
  padding: 10px 0 8px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: #FDF2F4;
  text-transform: none;
}
.lg-skin-ob-bela .gt-product-new .product-header::before {
  content: "♥ ";
  color: #C41E3A;
  margin-right: 8px;
  font-size: 13px;
  vertical-align: 1px;
  opacity: .9;
}
.lg-skin-ob-bela .gt-product-new .product-header::after {
  content: " ♥";
  color: #C41E3A;
  margin-left: 8px;
  font-size: 13px;
  vertical-align: 1px;
  opacity: .9;
}
.lg-skin-ob-bela .gt-product-new .product-blurb {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #FDF2F4;
}

/* ---------- specifications ---------- */
/* "All Gold Tone instruments setup in Titusville, FL. USA" (inline-styled h3 under the title bar) */
.lg-skin-ob-bela .gt-product-new .product-specifications .product-header + h3 {
  font: italic 400 15px/1.4 'Spectral', Georgia, serif !important;
  color: #DEB841 !important;
  text-decoration-color: rgba(222,184,65,.4) !important;
  text-underline-offset: 3px;
}
.lg-skin-ob-bela .gt-product-new .product-specifications .group-label {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: #FDF2F4;
  border-bottom: 1px solid rgba(196,30,58,.38);
}
.lg-skin-ob-bela .gt-product-new .product-specifications .group-label::after {
  content: " ♥";
  color: #C41E3A;
  font-size: 11px;
  margin-left: 6px;
  opacity: .75;
}
/* the group / highlight icons: warm gold tone */
.lg-skin-ob-bela .gt-product-new .product-specifications .group-label img,
.lg-skin-ob-bela .gt-product-new .product-features img {
  filter: invert(.8) sepia(1) saturate(3) hue-rotate(5deg) brightness(.9);
}
.lg-skin-ob-bela .gt-product-new .product-specifications .detail { border-bottom-color: #481D26; }
.lg-skin-ob-bela .gt-product-new .product-specifications .detail .spec-label {
  font: 500 11px/1.4 'Spectral', Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #AB7A84;
}
.lg-skin-ob-bela .gt-product-new .product-specifications .detail .spec-value { color: #F5EAE1; font-family: 'Spectral', Georgia, serif; }
.lg-skin-ob-bela .gt-product-new .product-specifications .detail .spec-value a { color: #DEB841 !important; }
.lg-skin-ob-bela .gt-product-new .product-specifications .detail .spec-value a:hover { color: #FFF0BD !important; text-decoration: underline; }
.lg-skin-ob-bela .gt-product-new .product-features .feature-label { color: #D8C5C8; font-family: 'Spectral', Georgia, serif; }

/* ---------- description ---------- */
.lg-skin-ob-bela .gt-product-new #product-description {
  font: 300 16px/1.68 'Spectral', Georgia, serif;
  color: #D8C5C8;
}
.lg-skin-ob-bela .gt-product-new #product-description a { color: #DEB841 !important; }
.lg-skin-ob-bela .gt-product-new #product-description a:hover { color: #FFF0BD !important; text-decoration: underline; }

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

/* ---------- staff-only inline edit icons ---------- */
.lg-skin-ob-bela .gt-product-new .edit-button { color: #AB7A84; }
.lg-skin-ob-bela .gt-product-new .edit-button:hover { color: #E52D4D; font-weight: normal; }

/* ---------- OB-Bela "Read Bela's Interview" banner ---------- */
.lg-skin-ob-bela .gt-product-new > .row > #bela-interview {
  background: #1B0E12 !important;
  border: 1px solid #481D26;
  border-left: 4px solid #C41E3A !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lg-skin-ob-bela .gt-product-new > .row > #bela-interview:hover {
  border-color: #C41E3A;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,.3), 0 18px 40px rgba(196,30,58,.2);
}
.lg-skin-ob-bela .gt-product-new > .row > #bela-interview h2 {
  font-family: 'Bodoni Moda', Georgia, serif !important;
  font-size: 22px;
  font-weight: 400 !important;
  color: #FDF2F4 !important;
}
.lg-skin-ob-bela .gt-product-new > .row > #bela-interview h2::before {
  content: "♥ ";
  color: #C41E3A !important;
  margin-right: 6px;
}
.lg-skin-ob-bela .gt-product-new > .row > #bela-interview h2::after {
  content: "\2192";
  margin-left: .5em;
  color: #C41E3A !important;
}

/* ---------- OB-Bela Customization Modal (#bela-banjo-customization-modal) ---------- */
#bela-banjo-customization-modal .modal-content {
  background: #1B0E12;
  border: 1px solid #481D26;
  color: #F2E4E7;
  font-family: 'Spectral', Georgia, serif;
  box-shadow: 0 20px 50px rgba(0,0,0,.85);
  border-radius: 4px;
}
#bela-banjo-customization-modal .modal-header {
  border-bottom: 1px solid #481D26;
  position: relative;
  padding: 20px 24px 16px;
}
#bela-banjo-customization-modal .modal-header .close {
  color: #E52D4D;
  opacity: .8;
  font-size: 28px;
  text-shadow: none;
  transition: opacity .2s, color .2s;
}
#bela-banjo-customization-modal .modal-header .close:hover {
  color: #FFB3C0;
  opacity: 1;
}
#bela-banjo-customization-modal .modal-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #FDF2F4;
}
#bela-banjo-customization-modal .modal-title::before {
  content: "♥ ";
  color: #C41E3A;
  margin-right: 6px;
}
#bela-banjo-customization-modal .modal-header div {
  font-style: italic;
  color: #E52D4D;
  margin-top: 4px;
}
#bela-banjo-customization-modal .modal-body {
  padding: 24px;
}
#bela-banjo-customization-modal .form-group h4 {
  font: 500 12px/1.4 'Spectral', Georgia, serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #AB7A84;
  border-bottom: 1px solid #381A20;
  padding-bottom: 6px;
  margin-top: 14px;
}
#bela-banjo-customization-modal .form-group label {
  color: #F2E4E7;
}
#bela-banjo-customization-modal .form-group label h5 {
  color: #F2E4E7;
  font-family: 'Spectral', Georgia, serif;
  font-size: 13px;
  margin-top: 8px;
}
#bela-banjo-customization-modal #bela-banjo-customization-form [type="radio"] + img {
  border: 1px solid #481D26;
  border-radius: 4px;
  background: #120A0D;
  padding: 4px;
  transition: border-color .2s, outline .2s;
}
#bela-banjo-customization-modal #bela-banjo-customization-form [type="radio"]:checked + img {
  outline: 2px solid #C41E3A;
  border-color: #C41E3A;
}
#bela-banjo-customization-modal .big-asterisk {
  color: #E52D4D;
}
#bela-banjo-customization-modal .modal-footer {
  border-top: 1px solid #481D26;
  padding: 16px 24px;
}
#bela-banjo-customization-modal .modal-footer .btn.reserve {
  background: transparent;
  border: 1px solid #66202D;
  color: #E52D4D;
  font-family: 'Spectral', Georgia, serif;
  border-radius: 0;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
#bela-banjo-customization-modal .modal-footer .btn.reserve:hover {
  background: #2D141A;
  color: #FFB3C0;
}
#bela-banjo-customization-modal .modal-footer .btn[type="submit"] {
  background: #C41E3A !important;
  border: 1px solid #C41E3A !important;
  color: #ffffff !important;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background .2s, border-color .2s;
}
#bela-banjo-customization-modal .modal-footer .btn[type="submit"]:hover {
  background: #E52D4D !important;
  border-color: #E52D4D !important;
}

/* action button tracking and sizing */
@media only screen and (max-width: 1199px) {
  .lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ob-bela .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ob-bela .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-bela .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ob-bela .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ob-bela .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-bela .gt-product-new .product-detail-top .info.info-actions .add-to-cart .glyphicon-shopping-cart {
    margin-left: 3px !important;
    font-size: 11px !important;
  }
}
/* Stack action buttons full width on small screens to give "Customize/Add To Cart" generous space */
@media only screen and (max-width: 520px) {
  .lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions .add-to-cart-container > div > div {
    width: 100% !important;
  }
  .lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown {
    width: 100% !important;
    margin-top: 8px !important;
  }
  .lg-skin-ob-bela .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ob-bela .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-ob-bela .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-bela .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-bela.php) ---------- */
.lg-feature { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.lg-cover {
  position: relative; flex: 1 1 auto; min-height: clamp(380px, 58vh, 620px);
  border: 1px solid #481D26; border-radius: 8px; overflow: hidden;
  /* Pure CSS ruby glow + subtle watermark heart graphic centered behind the instrument */
  background:
    radial-gradient(ellipse 70% 65% at 50% 55%, rgba(196,30,58,.22), rgba(110,16,32,.10) 48%, rgba(18,10,13,0) 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -90 200 170'%3E%3Cpath d='M0 58C-44 26-78 0-78-30-78-54-60-72-38-72-20-72-7-62 0-48 7-62 20-72 38-72 60-72 78-54 78-30 78 0 44 26 0 58Z' fill='%23C41E3A' fill-opacity='0.08' stroke='%23C41E3A' stroke-width='1.2' stroke-opacity='0.22'/%3E%3C/svg%3E") no-repeat center 62% / 320px auto,
    #170D10;
}
.lg-cover-open {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0;
  padding: 28px 68px; border: 0; background: none; cursor: zoom-in;
}
.lg-cover-open:focus-visible { outline: 1px solid #C41E3A; outline-offset: -8px; }
.lg-cover-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.6));
}
/* featured-ob-bela.php swapTo(): fade in once loaded */
@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(196,30,58,.45); border-radius: 50%; background: rgba(18,10,13,.75);
  color: #FDF2F4; 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: #C41E3A; border-color: #C41E3A; color: #ffffff; outline: none; }
.lg-cover-prev { left: 14px; }
.lg-cover-next { right: 14px; }
.lg-cover-count {
  position: absolute; right: 16px; bottom: 14px; pointer-events: none; z-index: 3;
  font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #AB7A84;
}
.lg-feature.is-single .lg-cover-nav,
.lg-feature.is-single .lg-cover-count,
.lg-feature.is-single .lg-gallery { display: none; }

/* ---------- Thumbnails ---------- */
.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%, #2A141A, #140C0F 72%);
  border: 1px solid #481D26; border-radius: 4px; opacity: .82;
  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: #E52D4D; transform: translateY(-2px); outline: none; }
.lg-gallery-item.is-current { opacity: 1; border-color: #C41E3A; box-shadow: 0 0 0 1px #C41E3A, 0 0 10px rgba(196,30,58,.45); }

/* laptops and phones */
@media (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .lg-gallery { --cols: var(--cols-sm, 5); }
}
@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: 20px 52px; }
  .lg-cover-nav { width: 38px; height: 38px; margin-top: -19px; font-size: 22px; }
  .lg-cover-prev { left: 8px; }
  .lg-cover-next { right: 8px; }
}

/* ---------- 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(196,30,58,.28), rgba(80,10,20,0) 70%),
    rgba(18,10,13,.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: #FDF2F4; letter-spacing: .01em; }
.lg-lightbox .lg-lb-title::before { content: "♥ "; color: #C41E3A; font-size: 15px; }
.lg-lightbox .lg-lb-count { font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #AB7A84; }
.lg-lightbox > button {
  position: absolute; border: 1px solid rgba(196,30,58,.45); background: rgba(18,10,13,.7); color: #FDF2F4;
  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: #C41E3A; border-color: #C41E3A; color: #ffffff; 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%, #2A141A, #140C0F 72%);
  border: 1px solid #481D26; 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: #C41E3A; }
@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; }
}