/* 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, #00c1d5, #019eaf);
      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; }
.donofrio-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #002d5c;
  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;
}

/* Tonalidades complejas D'Onofrio */

/* 1. Clásica */
.bg-cyan {
  background-color: #00c1d5 !important;
  background-image:
      radial-gradient(ellipse 100% 700px at 50% 320px, #80f2ff 0%, #00c1d5 40%, rgba(0, 193, 213, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #80f2ff 0%, #00c1d5 40%, rgba(0, 193, 213, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #80f2ff 0%, #00c1d5 40%, rgba(0, 193, 213, 0) 80%),
      linear-gradient(180deg, #00c1d5 0%, #007a87 60%, #00c1d5 100%) !important;
}

/* 2. Bolsa */
.bg-cyan-light {
  background-color: #00c6df !important;
  background-image:
      radial-gradient(ellipse 100% 700px at 50% 320px, #85f7ff 0%, #00c6df 40%, rgba(0, 198, 223, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #85f7ff 0%, #00c6df 40%, rgba(0, 198, 223, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #85f7ff 0%, #00c6df 40%, rgba(0, 198, 223, 0) 80%),
      linear-gradient(180deg, #00c6df 0%, #007e8e 60%, #00c6df 100%) !important;
}

/* 3. Lata */
.bg-cyan-dark {
  background-color: #00b8cc !important;
  background-image:
      radial-gradient(ellipse 100% 700px at 50% 320px, #7aeaff 0%, #00b8cc 40%, rgba(0, 184, 204, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #7aeaff 0%, #00b8cc 40%, rgba(0, 184, 204, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #7aeaff 0%, #00b8cc 40%, rgba(0, 184, 204, 0) 80%),
      linear-gradient(180deg, #00b8cc 0%, #007482 60%, #00b8cc 100%) !important;
}

/* 4. Delicia */
.bg-peach {
  background-color: #f9c4a2 !important;
  background-image:
      radial-gradient(ellipse 100% 700px at 50% 320px, #ffffff 0%, #f9c4a2 40%, rgba(249, 196, 162, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #ffffff 0%, #f9c4a2 40%, rgba(249, 196, 162, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #ffffff 0%, #f9c4a2 40%, rgba(249, 196, 162, 0) 80%),
      linear-gradient(180deg, #f9c4a2 0%, #cc8256 60%, #f9c4a2 100%) !important;
}

/* 5. Familiar */
.bg-green {
  background-color: #009036 !important;
  background-image:
      radial-gradient(ellipse 100% 700px at 50% 320px, #4dff8a 0%, #009036 40%, rgba(0, 144, 54, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #4dff8a 0%, #009036 40%, rgba(0, 144, 54, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #4dff8a 0%, #009036 40%, rgba(0, 144, 54, 0) 80%),
      linear-gradient(180deg, #009036 0%, #004d1c 60%, #009036 100%) !important;
}

/* 6. Postre / Chocotón */
#page-6 {
  background-color: #0033a0 !important;
  background-image:
      radial-gradient(ellipse 100% 700px at 50% 320px, #4d88ff 0%, #0033a0 40%, rgba(0, 51, 160, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #4d88ff 0%, #0033a0 40%, rgba(0, 51, 160, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #4d88ff 0%, #0033a0 40%, rgba(0, 51, 160, 0) 80%),
      linear-gradient(180deg, #0033a0 0%, #00174d 60%, #0033a0 100%) !important;
}

/* 7. Bolsón */
#page-7 {
  background-color: #007bb5 !important;
  background-image:
      radial-gradient(ellipse 100% 700px at 50% 320px, #66c2ff 0%, #007bb5 40%, rgba(0, 123, 181, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #66c2ff 0%, #007bb5 40%, rgba(0, 123, 181, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #66c2ff 0%, #007bb5 40%, rgba(0, 123, 181, 0) 80%),
      linear-gradient(180deg, #007bb5 0%, #004a6e 60%, #007bb5 100%) !important;
}

/* 8. Pandulce */
#page-8 {
  background-color: #f39200 !important;
  background-image:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C70 70, 30 30, 0 100 L0 0 Z' fill='%230087a3'/%3E%3C/svg%3E"),
      radial-gradient(ellipse 100% 700px at 50% 320px, #ffdf80 0%, #f39200 40%, rgba(243, 146, 0, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 920px, #ffdf80 0%, #f39200 40%, rgba(243, 146, 0, 0) 80%),
      radial-gradient(ellipse 100% 700px at 50% 1500px, #ffdf80 0%, #f39200 40%, rgba(243, 146, 0, 0) 80%),
      linear-gradient(180deg, #f39200 0%, #a66300 60%, #f39200 100%) !important;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}


.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;
  }
}