/* Legends BC-350 skin for the product page (goldtone/product.php, gated by $LEGENDS_HERO).
   Linked from components/legends/featured-bc-350.php. Recolors the standard product page in the
   BC-350 Legends palette (goldtone/legends.php #bc-350): Bob Carlin's Hawaiian-shirt florals on
   cream, Galax red, teal. The only LIGHT Legends 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-*.
   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.
   The floral band and shirt pattern are the landing page's SVG motifs expanded into data-URI
   tiles drawn 1:1 (never scaled up, so edges stay crisp) and static (no animation).

   Palette (from goldtone/legends.php #bc-350):
     bg #FBF7D6  card #FDFBEA  red #B4292B  red-hover #962123  teal #1F7A6F  teal-dark #175F56
     hibiscus #E4587A  marigold #E8A93C  leaf #4E8C42  body #4A3726  caption #7A6244 */

.gt-product-new-container.lg-skin-bc-350 {
  /* the shared card layout (components/css/product-cards.css), recolored */
  --pp-card-bg: #FDFBEA;
  --pp-card-border: rgba(180,41,43,.22);
  --pp-card-radius: 2px;
  --pp-card-shadow: 6px 6px 0 rgba(31,122,111,.14);
  /* the landing page's floral band runs along the top, under the white navbar */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='58' viewBox='0 0 150 58'%3E%3Crect width='150' height='58' fill='%23FDFBEA'/%3E%3Cg transform='translate(6 40) rotate(-14)'%3E%3Cpath d='M0 0C13 -4 22 -12 24 -24 12 -24 2 -16 0 0z' fill='%234E8C42'/%3E%3Cpath d='M1 -1C9 -7 16 -14 20 -21' fill='none' stroke='%232F6A2C' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(58 20) rotate(150)'%3E%3Cpath d='M0 0C13 -4 22 -12 24 -24 12 -24 2 -16 0 0z' fill='%234E8C42'/%3E%3Cpath d='M1 -1C9 -7 16 -14 20 -21' fill='none' stroke='%232F6A2C' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(96 44) rotate(-32)'%3E%3Cpath d='M0 0C13 -4 22 -12 24 -24 12 -24 2 -16 0 0z' fill='%234E8C42'/%3E%3Cpath d='M1 -1C9 -7 16 -14 20 -21' fill='none' stroke='%232F6A2C' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(146 22) rotate(168)'%3E%3Cpath d='M0 0C13 -4 22 -12 24 -24 12 -24 2 -16 0 0z' fill='%234E8C42'/%3E%3Cpath d='M1 -1C9 -7 16 -14 20 -21' fill='none' stroke='%232F6A2C' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(26 26)'%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(72)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(144)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(216)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(288)'/%3E%3Ccircle r='5' fill='%23E8A93C'/%3E%3Ccircle r='1.9' fill='%23B4292B'/%3E%3C/g%3E%3Cg transform='translate(58 44)'%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(45)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(90)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(135)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(180)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(225)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(270)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(315)'/%3E%3Ccircle r='3.6' fill='%23FBF7D6'/%3E%3Ccircle r='1.7' fill='%23E8A93C'/%3E%3C/g%3E%3Cg transform='translate(86 18) scale(.82)'%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(72)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(144)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(216)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(288)'/%3E%3Ccircle r='5' fill='%23E8A93C'/%3E%3Ccircle r='1.9' fill='%23B4292B'/%3E%3C/g%3E%3Cg transform='translate(112 40) scale(1.05)'%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(45)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(90)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(135)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(180)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(225)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(270)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(315)'/%3E%3Ccircle r='3.6' fill='%23FBF7D6'/%3E%3Ccircle r='1.7' fill='%23E8A93C'/%3E%3C/g%3E%3Cg transform='translate(138 30) scale(.7)'%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(72)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(144)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(216)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(288)'/%3E%3Ccircle r='5' fill='%23E8A93C'/%3E%3Ccircle r='1.9' fill='%23B4292B'/%3E%3C/g%3E%3Ccircle cx='72' cy='9' r='2.4' fill='%23B4292B'/%3E%3Ccircle cx='40' cy='52' r='2.2' fill='%23E8A93C'/%3E%3Ccircle cx='128' cy='8' r='2' fill='%231F7A6F'/%3E%3Crect width='150' height='2' fill='%23B4292B'/%3E%3Crect y='56' width='150' height='2' fill='%23B4292B'/%3E%3C/svg%3E") left top / 150px 58px repeat-x, #FBF7D6;
  color: #4A3726;
  font-family: 'Spectral', Georgia, serif;
  padding-top: 72px;
}
.lg-skin-bc-350 .gt-product-new { margin: 0 auto; }

/* ---------- breadcrumb + title ---------- */
.lg-skin-bc-350 .product-breadcrumb,
.lg-skin-bc-350 .product-breadcrumb a { color: #7A6244; }
.lg-skin-bc-350 .product-breadcrumb a:hover { color: #B4292B; text-decoration: none; }
.lg-skin-bc-350 .product-breadcrumb > li + li::before { color: rgba(180,41,43,.45); }
.lg-skin-bc-350 .product-breadcrumb .active { color: #1F7A6F; }
.lg-skin-bc-350 .gt-product-new .product-title-container { border-bottom-color: rgba(180,41,43,.25); }
.lg-skin-bc-350 .gt-product-new .product-title-container .product-title {
  font-family: 'Alfa Slab One', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
  color: #B4292B;
  text-transform: none;
  text-wrap: balance;
}
/* a single hibiscus ahead of the title */
.lg-skin-bc-350 .gt-product-new .product-title-container .product-title::before {
  content: "";
  display: inline-block;
  width: 26px; height: 26px;
  margin: 0 12px 4px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='-13 -13 26 26'%3E%3Cg transform='scale(.52)'%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(72)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(144)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(216)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(288)'/%3E%3Ccircle r='5' fill='%23E8A93C'/%3E%3Ccircle r='1.9' fill='%23B4292B'/%3E%3C/g%3E%3C/svg%3E") center / 26px 26px no-repeat;
  vertical-align: middle;
}

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

/* ---------- price, options, badges ---------- */
.lg-skin-bc-350 .gt-product-new .product-detail-top .info { border-color: rgba(180,41,43,.2); }
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-price .price {
  font-family: 'Alfa Slab One', Georgia, serif;
  font-weight: 400;
  color: #B4292B;
}
.lg-skin-bc-350 .gt-product-new .product-detail-top .option-label {
  font: 500 11px/1.2 'Spectral', Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #175F56;
}
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-option button,
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-option--condition button,
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-option--b-stock button {
  color: #4A3726;
  background-color: #FDFBEA;
  border-color: rgba(31,122,111,.45);
  border-radius: 0;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-option button.selected,
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-option--condition button.selected,
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-option--b-stock button.selected {
  background-color: #1F7A6F;
  border-color: #1F7A6F;
  color: #FBF7D6 !important;
}
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-option button.out-of-stock { color: #A8998A; }
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-option button.out-of-stock.selected {
  background-color: #D9D3BC; border-color: #D9D3BC; color: #6E6252 !important;
}
.lg-skin-bc-350 .gt-product-new .product-detail-top a { color: #1F7A6F; }
.lg-skin-bc-350 .gt-product-new .product-detail-top a:hover { color: #B4292B; }
.lg-skin-bc-350 .gt-product-new .product-detail-top .ri-medal-line { color: #B4292B !important; }
.lg-skin-bc-350 .gt-product-new .products-tooltip { color: #7A6244; }
.lg-skin-bc-350 .gt-product-new .option-label-tooltip { border-color: #1F7A6F; color: #1F7A6F; }
.lg-skin-bc-350 .gt-product-new .option-label-tooltip:hover,
.lg-skin-bc-350 .gt-product-new .option-label-tooltip:focus { background-color: #1F7A6F; color: #FBF7D6; }

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

/* ---------- action buttons (inline-styled in product.php, hence !important) ---------- */
/* Galax red, teal on hover: the landing page's Buy Now (.lg-hover-4) */
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions .add-to-cart:not(.hidden),
.lg-skin-bc-350 .gt-product-new #notify-when-in-stock:not(.hidden),
.lg-skin-bc-350 .gt-product-new #upgrade-with-case-button:not(.hidden) {
  background-color: #B4292B !important;
  border: 1px solid #B4292B !important;
  border-radius: 0 !important;
  color: #FBF7D6 !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: 4px 4px 0 rgba(31,122,111,.28);
  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-bc-350 .gt-product-new .product-detail-top .info.info-actions .add-to-cart .glyphicon-shopping-cart {
  color: #FBF7D6 !important;
  margin-left: 4px !important;
  font-size: 12px !important;
}
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions .add-to-cart:hover,
.lg-skin-bc-350 .gt-product-new #notify-when-in-stock:hover,
.lg-skin-bc-350 .gt-product-new #upgrade-with-case-button:hover {
  background-color: #1F7A6F !important;
  border-color: #1F7A6F !important;
  box-shadow: 4px 4px 0 rgba(180,41,43,.25);
}
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions {
  background-color: transparent !important;
  border: 1px solid #B4292B !important;
  border-radius: 0 !important;
  color: #B4292B !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-bc-350 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown #dropdownMenuPurchaseOptions:hover {
  background-color: #B4292B !important;
  color: #FBF7D6 !important;
}
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu {
  background-color: #FDFBEA;
  border-color: rgba(180,41,43,.4);
  border-radius: 0;
}
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li { border-color: rgba(180,41,43,.18); }
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a {
  color: #4A3726 !important;
  font-family: 'Spectral', Georgia, serif;
}
.lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown .dropdown-menu li a:hover {
  background-color: #F4EDC4;
  color: #B4292B !important;
}

/* ---------- section title bars ("BC-350 Specifications"), flanked by teal daisies ---------- */
.lg-skin-bc-350 .gt-product-new .product-header {
  background-color: transparent;
  border-top: 2px solid rgba(180,41,43,.35);
  border-bottom: 2px solid rgba(180,41,43,.35);
  padding: 10px 0 8px;
  font-family: 'Alfa Slab One', Georgia, serif;
  font-weight: 400;
  color: #B4292B;
  text-transform: none;
}
.lg-skin-bc-350 .gt-product-new .product-header::before,
.lg-skin-bc-350 .gt-product-new .product-header::after {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin: 0 12px 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='-9 -9 18 18'%3E%3Cg transform='scale(.5)'%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(45)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(90)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(135)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(180)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(225)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(270)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(315)'/%3E%3Ccircle r='3.6' fill='%23FBF7D6'/%3E%3Ccircle r='1.7' fill='%23E8A93C'/%3E%3C/g%3E%3C/svg%3E") center / 18px 18px no-repeat;
  vertical-align: middle;
}
.lg-skin-bc-350 .gt-product-new .product-blurb {
  font-family: 'Yellowtail', cursive;
  font-weight: 400;
  color: #1F7A6F;
}

/* ---------- specifications ---------- */
/* "All Gold Tone instruments setup in Titusville, FL. USA" (inline-styled h3 under the title bar) */
.lg-skin-bc-350 .gt-product-new .product-specifications .product-header + h3 {
  font: italic 400 15px/1.4 'Spectral', Georgia, serif !important;
  color: #1F7A6F !important;
  text-decoration-color: rgba(31,122,111,.4) !important;
  text-underline-offset: 3px;
}
/* group labels ("Headstock", "Neck") in the landing page's Yellowtail script */
.lg-skin-bc-350 .gt-product-new .product-specifications .group-label {
  font-family: 'Yellowtail', cursive;
  font-weight: 400;
  color: #1F7A6F;
  border-bottom: 2px solid rgba(180,41,43,.25);
}
/* the group / highlight icons are black line art: tint them teal */
.lg-skin-bc-350 .gt-product-new .product-specifications .group-label img,
.lg-skin-bc-350 .gt-product-new .product-features img {
  filter: invert(36%) sepia(52%) saturate(640%) hue-rotate(126deg) brightness(.82);
}
.lg-skin-bc-350 .gt-product-new .product-specifications .detail { border-bottom-color: rgba(180,41,43,.14); }
.lg-skin-bc-350 .gt-product-new .product-specifications .detail .spec-label {
  font: 500 11px/1.4 'Spectral', Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #175F56;
}
.lg-skin-bc-350 .gt-product-new .product-specifications .detail .spec-value { color: #4A3726; font-family: 'Spectral', Georgia, serif; }
/* every value is an <a> (product.php); only the ones with an href link to a product, and on
   cream an all-red table reads too hot, so plain values stay brown and real links get a red underline */
.lg-skin-bc-350 .gt-product-new .product-specifications .detail .spec-value a { color: #4A3726 !important; text-decoration: none; }
.lg-skin-bc-350 .gt-product-new .product-specifications .detail .spec-value a[href] {
  text-decoration: underline; text-decoration-color: rgba(180,41,43,.55); text-underline-offset: 3px;
}
.lg-skin-bc-350 .gt-product-new .product-specifications .detail .spec-value a[href]:hover { color: #B4292B !important; text-decoration-color: #B4292B; }
.lg-skin-bc-350 .gt-product-new .product-features .feature-label { color: #4A3726; font-family: 'Spectral', Georgia, serif; }

/* ---------- description ---------- */
.lg-skin-bc-350 .gt-product-new #product-description {
  font: 300 16px/1.68 'Spectral', Georgia, serif;
  color: #4A3726;
}
.lg-skin-bc-350 .gt-product-new #product-description a { color: #B4292B !important; }
.lg-skin-bc-350 .gt-product-new #product-description a:hover { color: #1F7A6F !important; text-decoration: underline; }

/* ---------- video: the "selected" underline + arrows ---------- */
.lg-skin-bc-350 .gt-product-new .youtube-thumbnails .youtube-thumbnail-container img.selected { border-color: #B4292B !important; }
.lg-skin-bc-350 .gt-product-new .youtube-thumbnails-wrapper .arrow { background-color: rgba(253,251,234,.9); color: #B4292B; }

/* ---------- staff-only inline edit icons (blue #3c3ccc by default) ---------- */
.lg-skin-bc-350 .gt-product-new .edit-button { color: #7A6244; }
.lg-skin-bc-350 .gt-product-new .edit-button:hover { color: #B4292B; font-weight: normal; }

/* action button tracking and sizing (same breakpoints as the other Legends skins) */
@media only screen and (max-width: 1199px) {
  .lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-bc-350 .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-bc-350 .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) {
  .gt-product-new-container.lg-skin-bc-350 { padding-top: 64px; }
  .lg-skin-bc-350 .gt-product-new .product-title-container .product-title::before { width: 22px; height: 22px; background-size: 22px 22px; margin-right: 8px; }
  .lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-bc-350 .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-bc-350 .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-bc-350 .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-bc-350 .gt-product-new .product-detail-top .info.info-actions .add-to-cart-container > div > div {
    width: 100% !important;
  }
  .lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions #purchase-options-dropdown {
    width: 100% !important;
    margin-top: 8px !important;
  }
  .lg-skin-bc-350 .gt-product-new .product-detail-top .info.info-actions .add-to-cart,
  .lg-skin-bc-350 .gt-product-new #notify-when-in-stock:not(.hidden),
  .lg-skin-bc-350 .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-bc-350 .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-bc-350.php) ---------- */
.lg-feature { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* The landing page's shirt card, static: cream with a 3px Galax-red border and a teal offset
   shadow. .lg-cover-frame (the span in featured-bc-350.php) carries the floral shirt pattern 14px
   in, faded out behind the instrument by the cream radial wash on top of it. Built for transparent
   PNG cut-outs. The cover is inset by the shadow's 10px so the shadow stays inside the card. */
.lg-cover {
  position: relative; flex: 1 1 auto; min-height: clamp(380px, 58vh, 620px);
  margin: 0 10px 10px 0;
  border: 3px solid #B4292B; border-radius: 0;
  background: #FDFBEA;
  box-shadow: 10px 10px 0 rgba(31,122,111,.28);
}
.lg-cover-frame {
  position: absolute; inset: 14px; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 56%, rgba(253,251,234,.94), rgba(253,251,234,.55) 46%, rgba(253,251,234,0) 76%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg opacity='.26'%3E%3Cg transform='translate(10 52) rotate(-24) scale(1.5)'%3E%3Cpath d='M0 0C13 -4 22 -12 24 -24 12 -24 2 -16 0 0z' fill='%234E8C42'/%3E%3Cpath d='M1 -1C9 -7 16 -14 20 -21' fill='none' stroke='%232F6A2C' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(150 96) rotate(158) scale(1.6)'%3E%3Cpath d='M0 0C13 -4 22 -12 24 -24 12 -24 2 -16 0 0z' fill='%234E8C42'/%3E%3Cpath d='M1 -1C9 -7 16 -14 20 -21' fill='none' stroke='%232F6A2C' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(74 152) rotate(-88) scale(1.3)'%3E%3Cpath d='M0 0C13 -4 22 -12 24 -24 12 -24 2 -16 0 0z' fill='%234E8C42'/%3E%3Cpath d='M1 -1C9 -7 16 -14 20 -21' fill='none' stroke='%232F6A2C' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(44 40) scale(1.7)'%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(72)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(144)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(216)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(288)'/%3E%3Ccircle r='5' fill='%23E8A93C'/%3E%3Ccircle r='1.9' fill='%23B4292B'/%3E%3C/g%3E%3Cg transform='translate(120 34) scale(1.5)'%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(45)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(90)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(135)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(180)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(225)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(270)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(315)'/%3E%3Ccircle r='3.6' fill='%23FBF7D6'/%3E%3Ccircle r='1.7' fill='%23E8A93C'/%3E%3C/g%3E%3Cg transform='translate(124 118) scale(1.45)'%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(72)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(144)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(216)'/%3E%3Cellipse cy='-12' rx='7.5' ry='11' fill='%23E4587A' transform='rotate(288)'/%3E%3Ccircle r='5' fill='%23E8A93C'/%3E%3Ccircle r='1.9' fill='%23B4292B'/%3E%3C/g%3E%3Cg transform='translate(34 122) scale(1.3)'%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(45)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(90)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(135)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(180)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(225)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(270)'/%3E%3Cellipse cy='-9' rx='3.6' ry='8' fill='%231F7A6F' transform='rotate(315)'/%3E%3Ccircle r='3.6' fill='%23FBF7D6'/%3E%3Ccircle r='1.7' fill='%23E8A93C'/%3E%3C/g%3E%3Ccircle cx='82' cy='82' r='3.4' fill='%23E8A93C'/%3E%3Ccircle cx='8' cy='8' r='2.6' fill='%23B4292B'/%3E%3C/g%3E%3C/svg%3E") center / 160px 160px repeat,
    #FDFBEA;
}
.lg-cover-open {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0;
  padding: 34px 80px; border: 0; background: none; cursor: zoom-in;
}
.lg-cover-open:focus-visible { outline: 2px solid #1F7A6F; outline-offset: -10px; }
.lg-cover-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(74,55,38,.4));
}
/* featured-bc-350.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: 2px solid #B4292B; border-radius: 50%; background: rgba(253,251,234,.92);
  color: #B4292B; 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: #B4292B; border-color: #B4292B; color: #FBF7D6; outline: none; }
.lg-cover-prev { left: 26px; }
.lg-cover-next { right: 26px; }
.lg-cover-count {
  position: absolute; right: 28px; bottom: 26px; pointer-events: none; z-index: 3;
  padding: 4px 6px; background: rgba(253,251,234,.85);
  font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #7A6244;
}
.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 cream tiles; the current one gets the red border + teal offset shadow.
   Rows are balanced per photo count: featured-bc-350.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: 5px; margin: 0; overflow: hidden; cursor: pointer;
  background: #FDFBEA;
  border: 1px solid rgba(180,41,43,.25); 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(74,55,38,.3)); }
.lg-gallery-item:hover, .lg-gallery-item:focus-visible { opacity: 1; border-color: #1F7A6F; transform: translateY(-2px); outline: none; }
.lg-gallery-item.is-current { opacity: 1; border: 2px solid #B4292B; padding: 4px; box-shadow: 4px 4px 0 rgba(31,122,111,.28); }

/* 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-cover { margin: 0 6px 6px 0; box-shadow: 6px 6px 0 rgba(31,122,111,.28); }
  .lg-cover-frame { inset: 10px; }
  .lg-gallery { --gap: 8px; margin-top: 14px; }
  .lg-cover-open { padding: 26px 58px; }
  .lg-cover-nav { width: 38px; height: 38px; margin-top: -19px; font-size: 22px; }
  .lg-cover-prev { left: 18px; }
  .lg-cover-next { right: 18px; }
  .lg-cover-count { right: 20px; bottom: 18px; }
}

/* ---------- lightbox (cream, like the page) ---------- */
.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(253,251,234,1), rgba(253,251,234,0) 70%),
    #F4EDC4; /* opaque: on cream, even 2% see-through ghosts the page's dark red type */
  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 22px 40px rgba(74,55,38,.4));
}
.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 'Alfa Slab One', Georgia, serif; color: #B4292B; }
.lg-lightbox .lg-lb-count { font: 500 11px/1 'Spectral', Georgia, serif; letter-spacing: .2em; color: #7A6244; }
.lg-lightbox > button {
  position: absolute; border: 2px solid #B4292B; background: rgba(253,251,234,.9); color: #B4292B;
  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: #B4292B; border-color: #B4292B; color: #FBF7D6; 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: #FDFBEA;
  border: 1px solid rgba(180,41,43,.25); border-radius: 0; opacity: .6; 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: 2px solid #B4292B; padding: 3px; }
@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; }
}