.elementor-266 .elementor-element.elementor-element-26af7db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-266 .elementor-element.elementor-element-a96a143 .woocommerce-breadcrumb{color:var( --e-global-color-942e09a );font-family:"Ropa Sans", Sans-serif;font-size:20px;}.elementor-266 .elementor-element.elementor-element-a96a143 .woocommerce-breadcrumb > a{color:var( --e-global-color-d1ac240 );}.elementor-266 .elementor-element.elementor-element-7c2c863{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-266 .elementor-element.elementor-element-d624fe1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-266 .elementor-element.elementor-element-2a89510{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-woocommerce-product-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-266 .elementor-element.elementor-element-e65dd33 .elementor-heading-title{font-family:"Ropa Sans", Sans-serif;font-weight:600;color:var( --e-global-color-d1ac240 );}.woocommerce .elementor-widget-woocommerce-product-price .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.woocommerce .elementor-266 .elementor-element.elementor-element-65c0617 .price{color:var( --e-global-color-942e09a );font-family:"Ropa Sans", Sans-serif;font-weight:600;}.elementor-widget-woocommerce-product-add-to-cart .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-266 .elementor-element.elementor-element-45add7e .cart button, .elementor-266 .elementor-element.elementor-element-45add7e .cart .button{background-color:var( --e-global-color-942e09a );transition:all 0.2s;}.elementor-266 .elementor-element.elementor-element-45add7e{--view-cart-spacing:14px;}.elementor-266 .elementor-element.elementor-element-45add7e .quantity .qty{transition:all 0.2s;}.elementor-widget-woocommerce-product-meta .product_meta .detail-container:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-266 .elementor-element.elementor-element-9b793a9{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;--e-share-buttons-primary-color:var( --e-global-color-942e09a );}.elementor-266 .elementor-element.elementor-element-49ec574{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.woocommerce .elementor-266 .elementor-element.elementor-element-565e680 .woocommerce-tabs ul.wc-tabs li a{font-family:"Ropa Sans", Sans-serif;}.woocommerce .elementor-266 .elementor-element.elementor-element-565e680 .woocommerce-tabs .woocommerce-Tabs-panel{font-family:"Ropa Sans", Sans-serif;}.woocommerce .elementor-266 .elementor-element.elementor-element-565e680 .woocommerce-tabs .woocommerce-Tabs-panel h2{font-family:"Ropa Sans", Sans-serif;}.elementor-266 .elementor-element.elementor-element-691f12a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.woocommerce .elementor-widget-woocommerce-product-related.elementor-wc-products .products > h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-product-related.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-266 .elementor-element.elementor-element-00c45ad.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-266 .elementor-element.elementor-element-00c45ad.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(min-width:768px){.elementor-266 .elementor-element.elementor-element-d624fe1{--width:50%;}.elementor-266 .elementor-element.elementor-element-2a89510{--width:50%;}}@media(max-width:1024px){ .elementor-266 .elementor-element.elementor-element-9b793a9{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-266 .elementor-element.elementor-element-00c45ad.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){ .elementor-266 .elementor-element.elementor-element-9b793a9{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-266 .elementor-element.elementor-element-00c45ad.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for woocommerce-product-images, class: .elementor-element-3148acb *//*=============================================================================
  WooCommerce Product Gallery - Modern Design
=============================================================================*/

/*=============================================================================
  1. CSS Variables
=============================================================================*/
:root {
  /* Colors */
  --bg-color: #f0f0f3;
  --text-color: #1a1a1a;
  --primary-color: #0066ff;
  --accent-color: #00d2ff;
  --highlight-color: #ff4081;

  /* Glass & Neumorphism */
  --glass-blur: 16px;
  --neu-shadow-light:  8px 8px 16px rgba(255,255,255,0.7);
  --neu-shadow-dark:  -8px -8px 16px rgba(0,0,0,0.1);

  /* Spacing */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;

  /* Transitions */
  --t-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-normal: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Badge */
  --badge-bg-gradient: linear-gradient(135deg, var(--accent-color), var(--highlight-color));
  --badge-color: #ffffff;
  --badge-padding: var(--space-xs) var(--space-sm);
  --badge-radius: var(--radius-lg);
  --badge-scale: 1.15;
}

/* Dark Mode Variables */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1e1e1e;
    --text-color: #e0e0e0;
    --primary-color: #3399ff;
    --accent-color: #00bcd4;
    --highlight-color: #e91e63;
    --neu-shadow-light:  8px 8px 16px rgba(0,0,0,0.3);
    --neu-shadow-dark: -8px -8px 16px rgba(255,255,255,0.05);
  }
}

/*=============================================================================
  2. Gallery Container - Neumorphic Glass
=============================================================================*/
.woocommerce-product-gallery {
  position: relative;
  padding: var(--space-lg);
  background: var(--bg-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--neu-shadow-light), var(--neu-shadow-dark);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/*=============================================================================
  3. Promo Badge - Gradient & Hover Pulse
=============================================================================*/
.pi-promo-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--badge-bg-gradient);
  color: var(--badge-color);
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transform: translateZ(0);
  transition: transform var(--t-fast), filter var(--t-fast);
  pointer-events: none;
}
.pi-promo-badge:hover {
  transform: scale(var(--badge-scale));
  filter: brightness(1.1);
}

/*=============================================================================
  4. Main Image - Smooth Zoom & Shadow
=============================================================================*/
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  transition: transform var(--t-normal), box-shadow var(--t-normal);
  cursor: zoom-in;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  will-change: transform;
  transition: transform var(--t-normal);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:hover {
  transform: scale(1.02);
  box-shadow: var(--neu-shadow-dark);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:hover img {
  transform: scale(1.08);
}

/*=============================================================================
  5. Thumbnail Grid - Modern Layout
=============================================================================*/
.woocommerce-product-thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.woocommerce-product-thumbnails .woocommerce-product-thumbnail {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.woocommerce-product-thumbnails .woocommerce-product-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
.woocommerce-product-thumbnails .woocommerce-product-thumbnail:hover {
  transform: translateY(-6px);
  box-shadow: var(--neu-shadow-dark);
}
.woocommerce-product-thumbnails .woocommerce-product-thumbnail.is-active {
  box-shadow: 0 0 0 3px var(--primary-color);
}

/*=============================================================================
  6. Navigation Arrows - Floating Circles
=============================================================================*/
.woocommerce-product-gallery .flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.8rem;
  height: 2.8rem;
  line-height: 2.8rem;
  font-size: 1.4rem;
  background: var(--bg-color);
  border-radius: 50%;
  text-align: center;
  box-shadow: var(--neu-shadow-light), var(--neu-shadow-dark);
  transition: transform var(--t-normal), background var(--t-fast);
  color: var(--text-color);
  pointer-events: auto;
}
.woocommerce-product-gallery .flex-prev { left: var(--space-md); }
.woocommerce-product-gallery .flex-next { right: var(--space-md); }
.woocommerce-product-gallery .flex-direction-nav a:hover {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}

/*=============================================================================
  7. Responsive Breakpoints
=============================================================================*/
@media (max-width: 768px) {
  .woocommerce-product-gallery { padding: var(--space-md); }
  .woocommerce-product-thumbnails { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .woocommerce-product-gallery { padding: var(--space-sm); }
  .woocommerce-product-thumbnails { grid-template-columns: repeat(2, 1fr); }
  .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:hover img {
    transform: none;
  }
}

/*=============================================================================
  8. HTML Usage Snippet (for reference)
=============================================================================*/
/*
<div class="woocommerce-product-gallery">
  <span class="pi-promo-badge">New</span>
  <div class="woocommerce-product-gallery__wrapper">
    <div class="woocommerce-product-gallery__image">
      <img src="main.jpg" alt="Product">
    </div>
    <div class="flex-direction-nav">
      <a href="#" class="flex-prev">‹</a>
      <a href="#" class="flex-next">›</a>
    </div>
  </div>
  <div class="woocommerce-product-thumbnails">
    <div class="woocommerce-product-thumbnail is-active"><img src="thumb1.jpg"></div>
    <div class="woocommerce-product-thumbnail"><img src="thumb2.jpg"></div>
    <!-- more -->
  </div>
</div>
*//* End custom CSS */