/* Premium Pagination */
    .premium-pagination-wrapper {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 8px 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 2px 10px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.nav-arrow { display: inline; }
.page-text { display: inline; }
.page-num { display: none; }
.premium-pagination-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 5px;
}
@media (max-width: 768px) {
  .page-text { display: none; }
  .page-num { display: inline; }
  .nav-arrow { display: none; }
  .premium-pagination-list { justify-content: center; }
}
    .premium-page-link {
      display: inline-block;
      padding: 10px 22px;
      border-radius: 30px;
      color: #555;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.3s ease;
    }
    .premium-page-link:hover {
      color: #111;
      background: rgba(0, 0, 0, 0.03);
    }
    .premium-page-link.active {
      background: linear-gradient(135deg, #f9ad15, #f0a713);
      color: white;
      box-shadow: 0 4px 12px rgba(227, 24, 55, 0.3);
    }
    .nav-arrow {
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      transition: all 0.3s ease;
      margin: 0 5px;
      text-decoration: none;
    }
    .nav-arrow-left {
      background: #f0f0f0;
      color: #555;
    }
    .nav-arrow-left:hover {
      background: #e4e4e4;
      color: #111;
    }
    .nav-arrow-right {
      background: linear-gradient(135deg, #e31837, #ff5e3a);
      color: white;
      box-shadow: 0 4px 12px rgba(227, 24, 55, 0.3);
    }
    .nav-arrow-right:hover {
      transform: scale(1.05);
      color: white;
    }
    @media (max-width: 768px) {
      .premium-pagination-wrapper {
        max-width: 100%;
        padding: 5px;
        flex-wrap: nowrap;
        border-radius: 30px;
      }
      .premium-pagination-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;        
      }
      .premium-pagination-list::-webkit-scrollbar {
        display: none;
      }
      .premium-page-link {
        padding: 6px 14px;
        font-size: 0.85rem;
        white-space: nowrap;
      }
      .nav-arrow-right, .nav-arrow-left{
        display: none;
      }     
    }
  /* Zoom overlay */
  .product-image-wrapper { position: relative; overflow: hidden; cursor: pointer; }
  .product-image-wrapper .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.2);
    opacity: 0;
    transition: opacity .25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;   
    z-index: 2;
  }
  .product-image-wrapper:hover .overlay { opacity: 1; }

  /* Todinno Clásico Section Studio Glow & Background */
  #page-1 {
    background-color: #e59a00;
    background-image: 
      radial-gradient(ellipse 100% 700px at 50% 320px, #ffed4a 0%, #ffc107 35%, rgba(229, 154, 0, 0) 75%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #ffed4a 0%, #ffc107 35%, rgba(229, 154, 0, 0) 75%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #ffed4a 0%, #ffc107 35%, rgba(229, 154, 0, 0) 75%),
      linear-gradient(180deg, #ffc700 0%, #e69900 50%, #ffc700 100%);
    position: relative;
  }
  #page-1 .product-image-wrapper {
    position: relative;
    overflow: visible;
  }
  #page-1 .product-image-wrapper img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 18px 30px rgba(100, 60, 0, 0.35));
  }

  /* Costa & Mini Section Studio Glow & Background */
  #page-3, #page-4 {
    background-color: #008a3f;
    background-image: 
      radial-gradient(ellipse 100% 700px at 50% 320px, #00de8b 0%, #00b865 35%, rgba(0, 138, 63, 0) 75%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #00de8b 0%, #00b865 35%, rgba(0, 138, 63, 0) 75%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #00de8b 0%, #00b865 35%, rgba(0, 138, 63, 0) 75%),
      linear-gradient(180deg, #00873d 0%, #007835 50%, #00873d 100%);
    position: relative;
  }
  #page-3 .product-image-wrapper,
  #page-4 .product-image-wrapper {
    position: relative;
    overflow: visible;
  }
  #page-3 .product-image-wrapper img,
  #page-4 .product-image-wrapper img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 18px 30px rgba(0, 40, 15, 0.4));
  }
  #page-1 .product-image-wrapper .overlay,
  #page-3 .product-image-wrapper .overlay,
  #page-4 .product-image-wrapper .overlay,
  #page-5 .product-image-wrapper .overlay {
    z-index: 2;
  }
  #page-3 .hr-dashed,
  #page-4 .hr-dashed,
  #page-5 .hr-dashed {
    border-top: 2px dashed rgba(255, 255, 255, 0.35) !important;
  }

  /* Pascualino Section Studio Glow & Background */
  #page-5 {
    background-color: #082d73;
    background-image: 
      radial-gradient(ellipse 100% 700px at 50% 320px, #1a56c4 0%, #0d43a6 35%, rgba(8, 45, 115, 0) 75%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #1a56c4 0%, #0d43a6 35%, rgba(8, 45, 115, 0) 75%),
      linear-gradient(180deg, #0a3380 0%, #062157 50%, #0a3380 100%);
    position: relative;
  }
  #page-5 .product-image-wrapper {
    position: relative;
    overflow: visible;
  }
  #page-5 .product-image-wrapper img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 18px 30px rgba(0, 15, 50, 0.45));
  }
.todinno-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #cc0000, #990000);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 6px 18px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}


.premium-pagination-group .premium-page-link:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.premium-pagination-group .premium-page-link:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.premium-pagination-group {
    gap: 0 !important;
}
@media (max-width: 768px) {
  .premium-pagination-group {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .premium-pagination-group::-webkit-scrollbar {
    display: none;
  }
  .premium-pagination-wrapper {
    padding: 0;
  }
}


  .premium-pagination-group .page-num {
    display: none !important;
  }
}

/* Premium Pagination Grid/Wrap Styles */
.premium-pagination-wrapper {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.premium-pagination-group {
  display: flex;
  flex-wrap: wrap !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
}
.premium-pagination-group .premium-page-link {
  flex: 1 1 auto;
  border-radius: 0 !important;
  margin: 0 0 -1px -1px !important;
  border: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 768px) {
  .premium-pagination-group .page-text {
    display: inline !important;
  }
  .premium-pagination-group .page-num {
    display: none !important;
  }
}
