/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 08 2026 | 13:51:15 */
/* CUSTOM GUITAR ATELIER — PRODUCT GALLERY */

/* Main image frame */
.single-product .woocommerce-product-gallery {
  --cga-gold: #a77b32;
  --cga-border: #e8ddcc;
  margin-bottom: 18px;
  border: 1px solid var(--cga-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(55, 40, 23, 0.06);
}

/* Keep Flatsome's image sizing and slider behavior */
.single-product .woocommerce-product-gallery .product-gallery-slider {
  margin-bottom: 0;
  border-radius: inherit;
  overflow: hidden;
}

.single-product .woocommerce-product-gallery__image > a {
  display: block;
  background: #fff;
}

.single-product .woocommerce-product-gallery__image > a > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Clearly visible navigation */
.single-product .woocommerce-product-gallery .flickity-prev-next-button,
.single-product .product-thumbnails .flickity-prev-next-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  top: 50%;
  border: 1px solid #e8ddcc;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #795720;
  box-shadow: 0 3px 12px rgba(55, 40, 23, 0.10);
  opacity: 1;
  transform: translateY(-50%);
  transition: background-color 180ms ease,
              border-color 180ms ease,
              color 180ms ease;
}

.single-product .woocommerce-product-gallery .flickity-prev-next-button.previous,
.single-product .product-thumbnails .flickity-prev-next-button.previous {
  left: 10px;
}

.single-product .woocommerce-product-gallery .flickity-prev-next-button.next,
.single-product .product-thumbnails .flickity-prev-next-button.next {
  right: 10px;
}

.single-product .woocommerce-product-gallery .flickity-prev-next-button svg,
.single-product .product-thumbnails .flickity-prev-next-button svg {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  padding: 0;
}

.single-product .woocommerce-product-gallery .flickity-prev-next-button .arrow,
.single-product .product-thumbnails .flickity-prev-next-button .arrow {
  fill: currentColor;
}

.single-product .product-thumbnails .flickity-prev-next-button:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Match the existing zoom control */
.single-product .woocommerce-product-gallery .zoom-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #e8ddcc;
  background: #fff;
  color: #795720;
  box-shadow: 0 3px 12px rgba(55, 40, 23, 0.08);
  opacity: 1;
}

/* Thumbnail cards */
.single-product .product-thumbnails {
  margin-top: 16px;
  margin-bottom: 24px;
}

.single-product .product-thumbnails .col > a {
  display: block;
  overflow: hidden;
  padding: 4px;
  border: 2px solid #eee7dc;
  border-radius: 10px;
  background: #fff;
  opacity: 1;
  transition: border-color 180ms ease,
              background-color 180ms ease;
}

.single-product .product-thumbnails .col > a > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 5px;
  opacity: 1;
  transform: none;
}

.single-product .product-thumbnails .col.is-nav-selected > a {
  border-color: #a77b32;
  background: #faf6ef;
}

/* Mouse hover */
@media (hover: hover) {
  .single-product .product-thumbnails .col > a:hover {
    border-color: #a77b32;
  }

  .single-product .woocommerce-product-gallery .flickity-prev-next-button:hover,
  .single-product .product-thumbnails .flickity-prev-next-button:hover,
  .single-product .woocommerce-product-gallery .zoom-button:hover {
    border-color: #a77b32;
    background: #a77b32;
    color: #fff;
  }
}

/* Keyboard focus */
.single-product .woocommerce-product-gallery a:focus-visible,
.single-product .woocommerce-product-gallery button:focus-visible,
.single-product .product-thumbnails a:focus-visible,
.single-product .product-thumbnails button:focus-visible {
  outline: 3px solid #795720;
  outline-offset: -4px;
}

/* Mobile spacing — retain the existing swipe gallery */
@media (max-width: 549px) {
  .single-product .woocommerce-product-gallery {
    margin-bottom: 12px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(55, 40, 23, 0.05);
  }

  .single-product .product-thumbnails {
    margin-top: 12px;
    margin-bottom: 20px;
  }

  .single-product .product-thumbnails .col > a {
    padding: 3px;
    border-radius: 8px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .single-product .woocommerce-product-gallery .flickity-prev-next-button,
  .single-product .product-thumbnails .flickity-prev-next-button,
  .single-product .product-thumbnails .col > a {
    transition: none;
  }
}
/* Center gallery and thumbnail arrows */
.single-product .woocommerce-product-gallery .flickity-prev-next-button svg,
.single-product .product-thumbnails .flickity-prev-next-button svg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
}

/* Optical alignment for Flatsome's asymmetric arrow shape */
.single-product .woocommerce-product-gallery .previous svg,
.single-product .product-thumbnails .previous svg {
  margin-left: 2px !important;
}

.single-product .woocommerce-product-gallery .next svg,
.single-product .product-thumbnails .next svg {
  margin-left: -2px !important;
}

/* Center the zoom icon */
.single-product .woocommerce-product-gallery .zoom-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.single-product .woocommerce-product-gallery .zoom-button i {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  line-height: 1 !important;
  top: auto !important;
}

.single-product .woocommerce-product-gallery .zoom-button i::before {
  display: block;
  line-height: 1 !important;
}