/* =======================================
   CUSTOM PRODUCT PAGE OVERRIDES
   ======================================= */

/* ---------- Logo tweaks ---------- */
.header-logo { 
  padding-top: 16px;
}
body.single-product .logo img {
  content: url(https://andredonawa.com/wp-content/uploads/2025/09/AD-Fine-Art-Photography-Logo-Inverted.png) !important;
}

/* ---------- Header styling ---------- */
body.single-product #header,
body.single-product #masthead,
body.single-product .header,
body.single-product .header-wrapper,
body.single-product .header-main {
  background: #1a202c !important; /* match vignette */
  box-shadow: none !important;
  position: relative;
  z-index: 999 !important;
}

/* ---------- Navigation contrast ---------- */
body.single-product #header .nav > li > a,
body.single-product #masthead .nav > li > a {
  color: #fff !important;
}
body.single-product #header .nav > li > a:hover,
body.single-product #masthead .nav > li > a:hover {
  color: #ccc !important;
}

/* ---------- Product gallery container ---------- */
.single-product .product-gallery {
  width: 100%;
  max-width: 100%;
}

/* Gallery wrapper cleanup */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__wrapper .flickity-viewport,
.single-product .woocommerce-product-gallery__wrapper .flickity-slider {
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 auto 40px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2;
  overflow: visible !important;
  background: #1a202c !important; /* match vignette */
}

/* Prevent Flickity clones peeking/doubling */
.single-product .woocommerce-product-gallery__wrapper .flickity-slider {
  transform: none !important;
  left: 0 !important;
}

/* Image container */
.single-product .woocommerce-product-gallery__image {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  z-index: 3;
  overflow: visible !important;
}

/* Product image */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__wrapper img {
  max-height: 800px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ---------- Drop Shadow ---------- */
/* Remove shadow from wrapper */
.single-product .woocommerce-product-gallery__wrapper {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Apply to the image */
.single-product .woocommerce-product-gallery__image img {
  -webkit-filter:
    drop-shadow(-16px 16px 6px rgba(0,0,0,0.9))
    drop-shadow(-28px 28px 18px rgba(0,0,0,0.45));
  filter:
    drop-shadow(-16px 16px 6px rgba(0,0,0,0.9))
    drop-shadow(-28px 28px 18px rgba(0,0,0,0.45));
}


/* ---------- Hide zoom + Flickity buttons ---------- */
.single-product .zoom-button,
.single-product .image-tools .zoom-button,
.single-product .zoom-button.button.is-outline.circle.icon,
.single-product .woocommerce-product-gallery .flickity-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- Product vignette + glow ---------- */
.single-product .product-vignette::after {
  display: none !important; /* kill pseudo-glow */
}

.single-product .product-vignette {
  position: relative;
  z-index: 0;
  overflow: visible !important;
  background: #1a202c !important; /* master background */
  padding: 28px 0 !important;
}

.single-product .vignette-glow {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 160%;
  height: 160%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.06) 32%,
      rgba(40,50,69,0) 68%
    ),
    linear-gradient(
      to top,
      rgba(40,50,69,1) 0%,
      rgba(40,50,69,0.6) 30%,
      rgba(40,50,69,0) 65%
    );
  filter: blur(48px);
}

.single-product .product-vignette .gallery-row,
.single-product .product-vignette .cart-row {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Kill wrapper background so vignette glow shows through */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__wrapper[style],
.single-product .woocommerce-product-gallery__wrapper[style*="background"],
.single-product .woocommerce-product-gallery__image {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.single-product .product-vignette {
  position: relative;
  background: #1a202c !important; /* your base color */
  overflow: visible;
  z-index: 0;
}

.single-product .vignette-glow {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 160%;
  height: 160%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at center,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.06) 32%,
      rgba(40,50,69,0) 68%
    );
  filter: blur(48px);
}

/* Safety reset: nuke ANY inline backgrounds Flickity injects */
.single-product .woocommerce-product-gallery__wrapper[style],
.single-product .woocommerce-product-gallery__wrapper[style*="background"],
.single-product .woocommerce-product-gallery[style],
.single-product .woocommerce-product-gallery[style*="background"] {
  background: transparent !important;
  background-color: transparent !important;
}


/* ---------- Page-specific fixes ---------- */
.page-id-744 .about-selfie { 
  display: block; 
  margin: 0 auto; 
}

/* --- Final Fix: force gallery wrappers transparent & let glow show --- */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__wrapper .flickity-viewport,
.single-product .woocommerce-product-gallery__wrapper .flickity-slider {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important; /* no clipping at sides */
}

/* Ensure vignette glow sits *behind* gallery but visible on sides */
.single-product .product-vignette {
  position: relative;
  z-index: 0;
  background: #1a202c !important; /* master background */
  overflow: visible !important;
}

.single-product .vignette-glow {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 180%;   /* wider to extend past gallery sides */
  height: 160%;
  pointer-events: none;
  z-index: 1;    /* behind gallery content, above vignette base */
  background: radial-gradient(
      circle at center,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.06) 32%,
      rgba(26,32,44,0) 70%
    );
  filter: blur(60px);
}

/* ==============================
   Global Variables
   ============================== */
:root {
  --site-bg-color: #283245; /* Change this in ONE place */
}

/* ==============================
   Background Color Patches
   ============================== */
.glow-section-top,
.site-header,
.custom-header-wrapper,
.header-wrapper,
.footer-wrapper {
  background-color: var(--site-bg-color) !important;
}

/* Keep gallery container transparent so glow shows correctly */
.glow-section-top .container,
.glow-section-top .row,
.glow-section-top .col {
  background-color: transparent !important;
}

/* ==============================
   Glow Effect
   ============================== */
.glow-effect {
  position: relative;
}

.glow-effect::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  z-index: 0;
  pointer-events: none;
}

.glow-effect img {
  position: relative;
  z-index: 1;
}

/* Force header white everywhere */
body .header-bg-color {
  background-color: #ffffff !important;
}

/* On product pages only, make it semi-transparent */
body.single-product .header-bg-color {
  background-color: rgba(255, 255, 255, 0.9) !important;
}