/* Gold Tone product page (goldtone/product.php) card layout: every content block is a card with
   the same border, padding and spacing, and on desktop the blocks sit in a two-column grid with
   exact gutters. Linked from product.php for every product; the Legends skin
   (components/legends/skin-ml-1.css) only recolors the cards through the --pp-card-* variables.

   Only the Bootstrap row and its columns get layout rules here. Nothing js/product.js toggles
   (.hidden add-to-cart / notify buttons, variation chips, the gallery) changes display/position.

   The row's children (see product.php): breadcrumb (.col-xs-12), title (.product-title-container),
   image (.product-image-section), buy box (.product-detail-top), a Bootstrap .clearfix (instruments
   only), the specs column (a bare .col-md-6 whose inner .product-specifications are the cards:
   Specifications, Similar Products) and the description column (.col-md-6.product-specifications,
   which also holds Recommended Gear). Anything else directly in the row (the OB-Bela interview
   banner) spans both columns, as it did under the old floats. */

.gt-product-new-container {
  --pp-gap: 24px;            /* between cards, and under the title */
  --pp-pad: 24px;            /* inside every card */
  --pp-card-bg: #fff;
  --pp-card-border: #ebe5d6;
  --pp-card-radius: 10px;
  --pp-card-shadow: 0 1px 2px rgba(20,22,25,.04), 0 10px 28px rgba(20,22,25,.05);
  padding-bottom: 48px;
}
@media (max-width: 767px) {
  .gt-product-new-container { --pp-gap: 16px; --pp-pad: 18px; }
}

.gt-product-new-container .gt-product-new > .row { margin-left: 0; margin-right: 0; }
/* breadcrumb + title line up with the cards' outer edge */
.gt-product-new-container .gt-product-new > .row > .col-xs-12:not(.col-md-6) { padding-left: 0; padding-right: 0; }
.gt-product-new-container .gt-product-new .product-title-container { margin: 0 0 var(--pp-gap) !important; }

/* the cards */
.gt-product-new-container .gt-product-new > .row > .product-image-section,
.gt-product-new-container .gt-product-new > .row > .product-detail-top,
.gt-product-new-container .gt-product-new > .row > .col-md-6:not(.product-image-section):not(.product-specifications) > .product-specifications,
.gt-product-new-container .gt-product-new > .row > .col-md-6.product-specifications:not(.product-detail-top) {
  background-color: var(--pp-card-bg);
  border: 1px solid var(--pp-card-border);
  border-radius: var(--pp-card-radius);
  box-shadow: var(--pp-card-shadow);
  padding: var(--pp-pad) !important; /* the specs cards have inline 15px side padding */
  margin: 0 0 var(--pp-gap);
}
/* a description column with nothing in it (no description, no addons) shouldn't draw an empty card.
   Its own rule: an older browser without :has() drops just this rule, not the card rule above. */
.gt-product-new-container .gt-product-new > .row > .col-md-6.product-specifications:not(.product-detail-top):not(:has(> *)) {
  border: 0; padding: 0 !important; margin: 0; background: none; box-shadow: none;
}

/* a specs column with no spec/similar cards but other content (the Support note on neck and
   Cheat-A-Key pages) becomes the card itself */
.gt-product-new-container .gt-product-new > .row > .col-md-6:not(.product-image-section):not(.product-specifications):not(:has(> .product-specifications)):has(> *) {
  background-color: var(--pp-card-bg);
  border: 1px solid var(--pp-card-border);
  border-radius: var(--pp-card-radius);
  box-shadow: var(--pp-card-shadow);
  padding: var(--pp-pad) !important;
  margin: 0 0 var(--pp-gap);
}

/* spacing inside the cards: the card padding replaces the old edge margins */
.gt-product-new-container .gt-product-new .product-specifications > .product-header:first-child,
.gt-product-new-container .gt-product-new .product-specifications > .product-blurb:first-child { margin-top: 0; }
.gt-product-new-container .gt-product-new .product-detail-top > .info-price { padding-top: 0; }
.gt-product-new-container .gt-product-new .product-image-section { display: flex; flex-direction: column; justify-content: center; }
/* the standard gallery (components/product/featured-image.php), not its full-screen lightbox copy */
.gt-product-new-container .gt-product-new .product-image-section > div > .product-featured-image-container { margin-top: 0; padding-top: 24px; }
.gt-product-new-container .gt-product-new .product-image-section .thumbnails { margin-bottom: 0; padding-top: 24px !important; }

/* Desktop: a two-column grid instead of Bootstrap floats, so the gutters are exact and the image
   and buy-box cards share a height. */
@media (min-width: 992px) {
  .gt-product-new-container .gt-product-new > .row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--pp-gap); align-items: start;
  }
  .gt-product-new-container .gt-product-new > .row::before,
  .gt-product-new-container .gt-product-new > .row::after,
  .gt-product-new-container .gt-product-new > .row > .clearfix { display: none; }
  /* the description column has an inline float:right */
  .gt-product-new-container .gt-product-new > .row > * { width: auto; float: none !important; }
  .gt-product-new-container .gt-product-new > .row > :not(.col-md-6) { grid-column: 1 / -1; }
  .gt-product-new-container .gt-product-new > .row > .product-image-section,
  .gt-product-new-container .gt-product-new > .row > .product-detail-top { align-self: stretch; }
  .gt-product-new-container .gt-product-new > .row > .col-md-6:not(.product-image-section):not(.product-specifications) { padding-left: 0; padding-right: 0; }
}

/* ---------- variation pickers: groups side by side, each group's buttons on one line ----------
   A group keeps its natural width (all its buttons in a row) and whole groups wrap to the next line
   when the card runs out of room; only a group wider than the card wraps its own buttons. */
/* instruments: the price and the option groups share the .info-price row (both inline display:flex) */
.gt-product-new-container .gt-product-new .product-detail-top .info-price > div:first-child { column-gap: 32px; row-gap: 14px; }
.gt-product-new-container .gt-product-new .product-detail-top .info-price .info-options {
  flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px 28px;
  margin-left: 0 !important; /* inline 2em: the row gap spaces it now */
}
/* accessories + parts: the .info-options block under the price */
.gt-product-new-container .gt-product-new .product-detail-top > .info-options {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; padding: 4px 0 16px;
}
/* the Banjo Accessory Pack's two-column layout row and the "*B-Stock ..." note take a whole line */
.gt-product-new-container .gt-product-new .product-detail-top > .info-options > :not(.info) { flex-basis: 100%; }
.gt-product-new-container .gt-product-new .product-detail-top .info-options > .info {
  flex: 0 1 auto; max-width: 100%; margin: 0; padding: 0;
}
.gt-product-new-container .gt-product-new .product-detail-top .info-options .option-label { margin: 0 0 2px; }
@media (max-width: 991px) {
  .gt-product-new-container .gt-product-new .product-detail-top > .info-options { justify-content: center; }
}
/* Purchase Options menu: attach it to the button. The action row is a flex row that stretches its
   children to the tallest one, and when "Notify Me When In Stock" shows, that column is ~5px taller
   than the button. The menu hangs off the stretched wrapper's bottom, so it floated below the button.
   Keep the wrapper at the button's height, and overlap the 1px borders so they read as one piece. */
.gt-product-new-container .gt-product-new .product-detail-top #purchase-options-dropdown { align-self: flex-start; }
.gt-product-new-container .gt-product-new .product-detail-top #purchase-options-dropdown .dropdown-menu {
  margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0;
}

/* phones: the card padding leaves the two ~48% action buttons a little narrower than before, so let
   a long label ("Customize/Add To Cart" on OB-Bela) wrap to two lines instead of being clipped */
@media (max-width: 767px) {
  .gt-product-new-container .gt-product-new .product-detail-top .info-actions .ob-action-button { white-space: normal; line-height: 1.15; }
}

/* ---------- OB-Bela "Read Bela's Interview" banner (clickable; js/product.js opens the interview) ----------
   Its inline paper-texture background image 404s, so it gets the card look with a gold accent. */
.gt-product-new-container .gt-product-new > .row > #bela-interview {
  background: var(--pp-card-bg) !important;
  border: 1px solid var(--pp-card-border); border-left: 4px solid #f2b234;
  border-radius: var(--pp-card-radius); box-shadow: var(--pp-card-shadow);
  padding: 18px var(--pp-pad) !important; margin: 0 0 var(--pp-gap) !important;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.gt-product-new-container .gt-product-new > .row > #bela-interview:hover {
  border-color: #f2b234; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(20,22,25,.06), 0 14px 32px rgba(20,22,25,.09);
}
.gt-product-new-container .gt-product-new > .row > #bela-interview h2 { font-size: 22px; font-weight: bold; color: #141619; }
.gt-product-new-container .gt-product-new > .row > #bela-interview h2::after { content: "\2192"; margin-left: .5em; color: #f2b234; }

/* ---------- the description blurb ("A Banjo With Heart") is titled like the other sections ----------
   (the Legends skin styles its own blurb, hence :not(.lg-skin)) */
.gt-product-new-container:not(.lg-skin) .gt-product-new .product-blurb {
  text-align: center; color: #fff; background-color: #141619;
  font-size: 30px; font-style: normal; padding: 5px 0 1px; margin-bottom: 10px !important;
}
@media (max-width: 767px) {
  .gt-product-new-container:not(.lg-skin) .gt-product-new .product-blurb { font-size: 25px; }
}

/* ---------- Recommended Gear + Similar Products tiles: one grid, square image wells ----------
   Markup (product.php, and js/product.js re-renders .addons the same way after load):
   .tile > a.tile-info (img + h3 name) > [select.cart-addon-variant] > div (price + Add To Cart).
   Before, a tall photo (the banjo case) set its row's height and every other tile in that row pushed
   its price to the bottom, leaving big gaps; the flex tiles also had percentage padding. */
.gt-product-new-container .gt-product-new .addons,
.gt-product-new-container .gt-product-new .similar-products {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px;
  margin: 16px 0 0; padding: 0;
}
.gt-product-new-container .gt-product-new .addons::before,
.gt-product-new-container .gt-product-new .addons::after,
.gt-product-new-container .gt-product-new .similar-products::before,
.gt-product-new-container .gt-product-new .similar-products::after,
.gt-product-new-container .gt-product-new .addons > .clearfix,
.gt-product-new-container .gt-product-new .similar-products > .clearfix { display: none; }
.gt-product-new-container .gt-product-new .addons > .tile,
.gt-product-new-container .gt-product-new .similar-products > .tile {
  display: flex; flex-direction: column; width: auto; float: none; padding: 0; margin: 0; min-width: 0;
}
.gt-product-new-container .gt-product-new .addons .tile .tile-info { float: none; flex-grow: 1; display: block; }
/* similar products keep the price inside the link: pin it to the tile bottom so prices line up */
.gt-product-new-container .gt-product-new .similar-products .tile .tile-info { float: none; flex-grow: 1; display: flex; flex-direction: column; }
.gt-product-new-container .gt-product-new .similar-products .tile .tile-info .tile-price { margin-top: auto; }
/* square wells, photo contained: every row is the same height */
.gt-product-new-container .gt-product-new .addons .tile img {
  display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain;
  padding: 10px; border: 1px solid #ece7da; border-radius: 6px; background: #fff;
}
/* similar products: product.php gives each photo a 1:2 box (inline padding-top:200%), which at full
   tile width is ~400px tall; a 3:4 portrait box keeps the three tiles compact (photo is contained) */
.gt-product-new-container .gt-product-new .similar-products .tile .tile-info > div:first-child {
  padding-top: 133% !important; border: 1px solid #ece7da; border-radius: 6px; overflow: hidden; background: #fff;
}
.gt-product-new-container .gt-product-new .similar-products .tile .tile-info > div:first-child img { border: 0; padding: 10px; }
.gt-product-new-container .gt-product-new .addons .tile .tile-info h3,
.gt-product-new-container .gt-product-new .similar-products .tile .tile-info h3 {
  margin: 10px 0 6px; font-size: 12px; line-height: 1.35;
}
.gt-product-new-container .gt-product-new .addons .tile .cart-addon-variant { margin: 0 0 8px; width: 100%; }
/* price + Add To Cart on one line at the bottom of the tile (wraps under each other if too narrow) */
.gt-product-new-container .gt-product-new .addons .tile > div:last-child {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px;
}
.gt-product-new-container .gt-product-new .addons .tile .tile-price,
.gt-product-new-container .gt-product-new .similar-products .tile .tile-price { margin: 0; font-size: 13px; }
.gt-product-new-container .gt-product-new .addons .tile .buy-addon { margin: 0 0 0 auto; }
@media (max-width: 480px) {
  .gt-product-new-container .gt-product-new .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
}

/* ---------- no video: the buy box ends at its content, the description moves up ----------
   The photo and buy-box cards stretch to a shared height, which on products without a video left a
   tall empty buy box. components/product/featured-video.php only renders .info-featured-video when
   there are videos. (No :has() support: the rule is dropped and the box just stretches as before.) */
@media (min-width: 992px) {
  .gt-product-new-container .gt-product-new > .row > .product-detail-top:not(:has(.info-featured-video)) { align-self: start; }
  /* ...and the description moves up under it. Explicit rows: the photo card spans rows 3-4, the
     buy box is row 3, the description spans 4-5 and the specs card is row 5. Row 3 is sized by the
     buy box alone, so the description starts right under it; row 4 absorbs the rest of the photo
     card's height, so the specs start right under the photo. (If a description is ever taller than
     photo + specs, row 4 grows and a gap opens under the photo instead; nothing overlaps.) */
  .gt-product-new-container .gt-product-new > .row:not(:has(.info-featured-video)) > :first-child { grid-row: 1; }
  .gt-product-new-container .gt-product-new > .row:not(:has(.info-featured-video)) > .product-title-container { grid-row: 2; }
  .gt-product-new-container .gt-product-new > .row:not(:has(.info-featured-video)) > .product-image-section { grid-column: 1; grid-row: 3 / span 2; }
  .gt-product-new-container .gt-product-new > .row:not(:has(.info-featured-video)) > .product-detail-top { grid-column: 2; grid-row: 3; }
  .gt-product-new-container .gt-product-new > .row:not(:has(.info-featured-video)) > .col-md-6.product-specifications:not(.product-detail-top) { grid-column: 2; grid-row: 4 / span 2; }
  .gt-product-new-container .gt-product-new > .row:not(:has(.info-featured-video)) > .col-md-6:not(.product-image-section):not(.product-specifications) { grid-column: 1; grid-row: 5; }
}

/* ---------- gallery thumbnails: bigger bordered tiles, balanced rows ----------
   Markup: components/product/featured-image.php, and js/product.js rebuilds .thumbnails with the
   same <img>s on a variant change (moving .selected). Tiles are up to --tsize (was 57px); --tcols is the
   per-row count picked from the photo count so rows come out even (10 photos = 5+5, not 7+3),
   and tiles shrink to fit a narrow card. 1-7 photos: one row. */
.gt-product-new-container .gt-product-new .product-image-section .thumbnails {
  --tgap: 8px; --tsize: 96px; --tcols: 7;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tgap);
  /* at most --tcols per row even when the card is wide enough for more */
  max-width: calc(var(--tcols) * var(--tsize) + (var(--tcols) - 1) * var(--tgap));
  margin-left: auto; margin-right: auto;
}
.gt-product-new-container .gt-product-new .product-image-section .thumbnails:has(> img:nth-child(8):last-child) { --tcols: 4; }
.gt-product-new-container .gt-product-new .product-image-section .thumbnails:has(> img:nth-child(9):last-child),
.gt-product-new-container .gt-product-new .product-image-section .thumbnails:has(> img:nth-child(10):last-child),
.gt-product-new-container .gt-product-new .product-image-section .thumbnails:has(> img:nth-child(15):last-child) { --tcols: 5; }
.gt-product-new-container .gt-product-new .product-image-section .thumbnails:has(> img:nth-child(11):last-child),
.gt-product-new-container .gt-product-new .product-image-section .thumbnails:has(> img:nth-child(12):last-child),
.gt-product-new-container .gt-product-new .product-image-section .thumbnails:has(> img:nth-child(16):last-child) { --tcols: 6; }
.gt-product-new-container .gt-product-new .product-image-section .thumbnails img {
  flex: 0 0 min(var(--tsize), calc((100% - (var(--tcols) - 1) * var(--tgap)) / var(--tcols)));
  width: auto; min-width: 0; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  padding: 4px; background: #fff;
  border: 1px solid #ece7da; border-radius: 6px;
  transition: border-color .2s, box-shadow .2s;
}
.gt-product-new-container .gt-product-new .product-image-section .thumbnails img:hover { border-color: #e2d3a6; }
.gt-product-new-container .gt-product-new .product-image-section .thumbnails img.selected {
  border: 1px solid #f2b234; box-shadow: 0 0 0 1px #f2b234; padding-bottom: 4px;
}