.elementor-1411 .elementor-element.elementor-element-db13d89{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;}.elementor-1411 .elementor-element.elementor-element-a198b0a{--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;--justify-content:center;--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-1411 .elementor-element.elementor-element-ff7ecd9{--display:flex;}.elementor-1411 .elementor-element.elementor-element-c43e5c6 .elementor-button{background-color:#02010100;font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-1411 .elementor-element.elementor-element-c43e5c6 .elementor-button .elementor-button-content-wrapper{justify-content:end;}.elementor-1411 .elementor-element.elementor-element-c43e5c6 .elementor-button:hover, .elementor-1411 .elementor-element.elementor-element-c43e5c6 .elementor-button:focus{color:#C0B4A0;}.elementor-1411 .elementor-element.elementor-element-c43e5c6 .elementor-button:hover svg, .elementor-1411 .elementor-element.elementor-element-c43e5c6 .elementor-button:focus svg{fill:#C0B4A0;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-1411 .elementor-element.elementor-element-db13d89{--margin-top:47px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-1411 .elementor-element.elementor-element-db13d89{--width:93%;}}/* Start custom CSS for container, class: .elementor-element-a198b0a *//* =========================================
   NAIRA SWIMWEAR CATEGORIES - Option A (Luxury Minimal)
   (Elementor Container Custom CSS version)
   Container class: swimwear-categories-wrap
   Shortcode inside: [product_categories ...]
========================================= */

/* -----------------------------------------
   0) SAFETY / WIDTH RESET
----------------------------------------- */
.elementor-1411 .elementor-element.elementor-element-a198b0a,
.elementor-1411 .elementor-element.elementor-element-a198b0a .elementor-widget-shortcode,
.elementor-1411 .elementor-element.elementor-element-a198b0a .elementor-widget-container,
.elementor-1411 .elementor-element.elementor-element-a198b0a .elementor-shortcode,
.elementor-1411 .elementor-element.elementor-element-a198b0a .woocommerce {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

/* -----------------------------------------
   1) GRID WRAPPER (force Woo shortcode into clean grid)
----------------------------------------- */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Remove Woo clearfix stuff that can break CSS grid */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products::before,
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products::after,
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category::before,
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category::after,
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product::before,
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product::after {
  content: none !important;
  display: none !important;
}

/* Reset Woo default floats / widths / clear rules */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category,
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product,
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.first,
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.last {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* -----------------------------------------
   2) CARD LINK (whole image card clickable)
----------------------------------------- */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category > a {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;

  border-radius: 0 !important; /* βάλε 10-12px αν θες rounded */
  text-decoration: none !important;
  background: #f2f2f2 !important;

  line-height: 0 !important; /* removes image gap */
}

/* -----------------------------------------
   3) IMAGE (portrait rectangle + crisp rendering)
----------------------------------------- */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category img {
  width: 100% !important;

  /* Use aspect-ratio for cleaner responsive scaling */
  aspect-ratio: 4 / 5 !important;
  height: auto !important;

  object-fit: cover !important;
  object-position: center center !important;

  display: block !important;
  margin: 0 !important;

  /* CRISP rendering helpers */
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  image-rendering: auto !important;

  transition: none !important; /* no zoom -> no soft/blur feeling */
}

/* Keep hover image crisp (no scaling) */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category:hover img {
  transform: translateZ(0) !important;
}

/* -----------------------------------------
   4) GRADIENT OVERLAY (for title readability)
----------------------------------------- */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category > a::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.16) 22%,
    rgba(0,0,0,0) 52%
  ) !important;

  transition: opacity .25s ease !important;
}

.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category:hover > a::after {
  opacity: .96 !important;
}

/* -----------------------------------------
   5) TITLE OVERLAY ON IMAGE (Luxury minimal)
----------------------------------------- */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category .woocommerce-loop-category__title {
  position: absolute !important;
  left: 18px !important;
  bottom: 16px !important;
  z-index: 2 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  font-size: 23px !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px !important;
  text-align: left !important;

  display: block !important;
  width: auto !important;

  /* ensure title doesn't sit in normal flow visually */
  pointer-events: none !important;
}

/* -----------------------------------------
   6) HIDE COUNT COMPLETELY
----------------------------------------- */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category .count,
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category mark.count {
  display: none !important;
}

/* -----------------------------------------
   7) FOCUS STATE (keyboard accessible)
----------------------------------------- */
.elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category > a:focus-visible {
  outline: 2px solid rgba(255,255,255,.85) !important;
  outline-offset: -6px !important;
}

/* -----------------------------------------
   8) TABLET
----------------------------------------- */
@media (max-width: 1024px) {
  .elementor-1411 .elementor-element.elementor-element-a198b0a ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category .woocommerce-loop-category__title {
    left: 14px !important;
    bottom: 13px !important;
    font-size: 20px !important;
  }
}

/* -----------------------------------------
   9) MOBILE
----------------------------------------- */
@media (max-width: 767px) {
  .elementor-1411 .elementor-element.elementor-element-a198b0a ul.products {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category > a {
    border-radius: 0 !important;
  }

  /* slightly taller portrait feel on mobile */
  .elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category img {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
  }

  .elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category .woocommerce-loop-category__title {
    left: 12px !important;
    bottom: 12px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  .elementor-1411 .elementor-element.elementor-element-a198b0a ul.products li.product-category > a::after {
    background: linear-gradient(
      to top,
      rgba(0,0,0,.36) 0%,
      rgba(0,0,0,.18) 26%,
      rgba(0,0,0,0) 56%
    ) !important;
  }
}/* End custom CSS */