/* Legends ML-1 skin for the product page (goldtone/product.php, gated by $LEGENDS_HERO).
   Linked from components/legends/featured-ml-1.php. Recolors the standard product page in the
   ML-1 Legends greens. The card layout itself (grid, border, padding, spacing) is shared with every
   product page in components/css/product-cards.css; this file only 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 #ml-1):
     bg #080B09  card #0D1511  hairline #1F3A2B  rule #3D6B51  label #6E8C74
     accent #A9C79B  gold #C9B06A  body #C5D3BE  value #DCE6D6  heading #EDF3E8 */

.gt-product-new-container.lg-skin-ml-1 {
  /* the shared card layout (components/css/product-cards.css), recolored */
  --pp-card-bg: #0D1511;
  --pp-card-border: #1F3A2B;
  --pp-card-shadow: 0 18px 40px rgba(0,0,0,.28);
  background: #080B09;
  color: #C5D3BE;
  font-family: 'Spectral', Georgia, serif;
  padding-top: 12px;
}
.lg-skin-ml-1 .gt-product-new { margin: 0 auto; }

/* ---------- breadcrumb + title ---------- */
.lg-skin-ml-1 .product-breadcrumb,
.lg-skin-ml-1 .product-breadcrumb a { color: #6E8C74; }
.lg-skin-ml-1 .product-breadcrumb a:hover { color: #A9C79B; text-decoration: none; }
.lg-skin-ml-1 .product-breadcrumb > li + li::before { color: #3D6B51; }
.lg-skin-ml-1 .product-breadcrumb .active { color: #A9C79B; }
.lg-skin-ml-1 .gt-product-new .product-title-container { border-bottom-color: #1F3A2B; }
.lg-skin-ml-1 .gt-product-new .product-title-container .product-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #EDF3E8;
  text-transform: none;
  text-wrap: balance;
}

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

/* ---------- price, options, badges ---------- */
.lg-skin-ml-1 .gt-product-new .product-detail-top .info { border-color: #1F3A2B; }
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-price .price {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  color: #EDF3E8;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .option-label {
  font: 500 11px/1.2 'Spectral', Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6E8C74;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-option button,
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-option--condition button,
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-option--b-stock button {
  color: #A9C79B;
  border-color: #3D6B51;
  border-radius: 0;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-option button.selected,
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-option--condition button.selected,
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-option--b-stock button.selected {
  background-color: #A9C79B;
  border-color: #A9C79B;
  color: #080B09;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-option button.out-of-stock { color: #4A5A4E; }
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-option button.out-of-stock.selected {
  background-color: #2A352D; border-color: #2A352D; color: #8A9A8E;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top a { color: #A9C79B; }
.lg-skin-ml-1 .gt-product-new .product-detail-top .ri-medal-line { color: #C9B06A !important; }
.lg-skin-ml-1 .gt-product-new .products-tooltip { color: #6E8C74; }
.lg-skin-ml-1 .gt-product-new .option-label-tooltip { border-color: #A9C79B; color: #A9C79B; }
.lg-skin-ml-1 .gt-product-new .option-label-tooltip:hover,
.lg-skin-ml-1 .gt-product-new .option-label-tooltip:focus { background-color: #A9C79B; color: #080B09; }

/* ---------- action buttons (inline-styled in product.php, hence !important) ---------- */
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
.lg-skin-ml-1 .gt-product-new #notify-when-in-stock,
.lg-skin-ml-1 .gt-product-new #upgrade-with-case-button {
  background-color: #A9C79B !important;
  border: 1px solid #A9C79B !important;
  border-radius: 0 !important;
  color: #080B09 !important;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s, border-color .2s;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions .add-to-cart:hover,
.lg-skin-ml-1 .gt-product-new #notify-when-in-stock:hover,
.lg-skin-ml-1 .gt-product-new #upgrade-with-case-button:hover {
  background-color: #C9DDC0 !important;
  border-color: #C9DDC0 !important;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
  background-color: transparent;
  border: 1px solid #A9C79B;
  border-radius: 0;
  color: #A9C79B;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions:hover {
  background-color: #A9C79B;
  color: #080B09;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu {
  background-color: #0D1511;
  border-color: #3D6B51;
  border-radius: 0;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li { border-color: #3D6B51; }
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a {
  color: #A9C79B !important;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a:hover {
  background-color: #16241C;
}

/* ---------- section title bars ("ML-1 Specifications") ---------- */
.lg-skin-ml-1 .gt-product-new .product-header {
  background-color: transparent;
  border-top: 1px solid #3D6B51;
  border-bottom: 1px solid #3D6B51;
  padding: 10px 0 8px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: #EDF3E8;
  text-transform: none;
}
.lg-skin-ml-1 .gt-product-new .product-blurb {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #EDF3E8;
}

/* ---------- specifications ---------- */
/* "All Gold Tone instruments setup in Titusville, FL. USA" (inline-styled h3 under the title bar) */
.lg-skin-ml-1 .gt-product-new .product-specifications .product-header + h3 {
  font: italic 400 15px/1.4 'Spectral', Georgia, serif !important;
  color: #A9C79B;
  text-decoration-color: #3D6B51 !important;
  text-underline-offset: 3px;
}
.lg-skin-ml-1 .gt-product-new .product-specifications .group-label {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  color: #EDF3E8;
  border-bottom: 1px solid #3D6B51;
}
/* the group / highlight icons are dark SVG/PNG line art: flip them light */
.lg-skin-ml-1 .gt-product-new .product-specifications .group-label img,
.lg-skin-ml-1 .gt-product-new .product-features img { filter: invert(1) sepia(.35) hue-rotate(50deg) brightness(.85); }
.lg-skin-ml-1 .gt-product-new .product-specifications .detail { border-bottom-color: #1F3A2B; }
.lg-skin-ml-1 .gt-product-new .product-specifications .detail .spec-label {
  font: 500 11px/1.4 'Spectral', Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6E8C74;
}
.lg-skin-ml-1 .gt-product-new .product-specifications .detail .spec-value { color: #DCE6D6; font-family: 'Spectral', Georgia, serif; }
.lg-skin-ml-1 .gt-product-new .product-specifications .detail .spec-value a { color: #A9C79B; }
.lg-skin-ml-1 .gt-product-new .product-features .feature-label { color: #C5D3BE; font-family: 'Spectral', Georgia, serif; }

/* ---------- description ---------- */
.lg-skin-ml-1 .gt-product-new #product-description {
  font: 300 16px/1.68 'Spectral', Georgia, serif;
  color: #C5D3BE;
}
.lg-skin-ml-1 .gt-product-new #product-description a { color: #C9B06A; }

/* ---------- video: the orange "selected" underline + arrows ---------- */
.lg-skin-ml-1 .gt-product-new .youtube-thumbnails .youtube-thumbnail-container img.selected { border-color: #C9B06A !important; }
.lg-skin-ml-1 .gt-product-new .youtube-thumbnails-wrapper .arrow { background-color: rgba(8,11,9,.8); color: #A9C79B; }

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

/* ---------- top of the dark area: a thin green rule under the white navbar ---------- */
.lg-skin-ml-1 { border-top: 1px solid #3D6B51; }

/* the two action buttons are ~48% of the buy box each: below 1200px the tracked uppercase
   overflows them ("PURCHASE OPTIONS" ran past its border at 1024), so tighten it */
@media only screen and (max-width: 1199px) {
  .lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ml-1 .gt-product-new #notify-when-in-stock,
  .lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
    letter-spacing: .05em;
    font-size: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ml-1 .gt-product-new #notify-when-in-stock,
  .lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
    letter-spacing: .03em;
    font-size: 12px !important; /* product.php's .ob-action-button forces 14px !important on phones */
  }
}
@media only screen and (max-width: 400px) {
  .lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-ml-1 .gt-product-new #notify-when-in-stock,
  .lg-skin-ml-1 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
    letter-spacing: .01em;
    font-size: 11px !important;
  }
}

/* ---------- image column: cover photo + thumbnails (components/legends/featured-ml-1.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 #1F3A2B; border-radius: 8px; overflow: hidden;
  background: radial-gradient(ellipse 65% 60% at 50% 52%, rgba(46,107,76,.28), rgba(46,107,76,0) 72%), #0A120D;
}
.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 #C9B06A; 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-ml-1.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: 1; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(169,199,155,.45); border-radius: 50%; background: rgba(8,11,9,.55);
  color: #C9DDC0; 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: #A9C79B; border-color: #A9C79B; color: #080B09; outline: none; }
.lg-cover-prev { left: 14px; }
.lg-cover-next { right: 14px; }
.lg-cover-count {
  position: absolute; right: 16px; bottom: 14px; pointer-events: none;
  font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #6E8C74;
}
.lg-feature.is-single .lg-cover-nav,
.lg-feature.is-single .lg-cover-count,
.lg-feature.is-single .lg-gallery { display: none; }

/* Thumbnails: transparent PNG cut-outs on dark green tiles; the current one is outlined in gold.
   Rows are balanced per photo count: featured-ml-1.php sets --cols-lg (at most 9 across) and
   --cols-sm (at most 5, for narrow columns), e.g. 9 photos = 9 | 5+4, 10 = 5+5 | 5+5. Tiles cap at
   --tile; the side padding centers the rows (padding % and flex-basis % both resolve against the
   column width here). */
.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%, #17301F, #0C1710 72%);
  border: 1px solid #1F3A2B; border-radius: 4px; opacity: .78;
  transition: border-color .2s, opacity .2s, transform .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: #3D6B51; transform: translateY(-2px); outline: none; }
.lg-gallery-item.is-current { opacity: 1; border-color: #C9B06A; box-shadow: 0 0 0 1px rgba(201,176,106,.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: 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(46,107,76,.30), rgba(46,107,76,0) 70%),
    rgba(5,8,6,.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: #EDF3E8; letter-spacing: .01em; }
.lg-lightbox .lg-lb-count { font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #6E8C74; }
.lg-lightbox > button {
  position: absolute; border: 1px solid rgba(169,199,155,.45); background: rgba(8,11,9,.6); color: #C9DDC0;
  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: #A9C79B; border-color: #A9C79B; color: #080B09; 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%, #17301F, #0C1710 72%);
  border: 1px solid #1F3A2B; 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: #C9B06A; }
@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; }
}