.elementor-kit-33{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-33 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ----------------------------------------------
   LUXURY PRODUCT ARCHIVE – Peptides Kingdom
   Paste in Elementor > Site Settings > Custom CSS
   ---------------------------------------------- */

/* Section / grid wrapper */
.woocommerce ul.products,
.woocommerce-page ul.products{
  background: radial-gradient(1400px 800px at 18% -8%, #1b1b36 0%, #0a0a1a 64%);
  padding: 60px 40px;
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(5,6,20,.55) inset, 0 8px 22px rgba(0,0,0,.35);
}

/* product card */
.woocommerce ul.products li.product{
  background: linear-gradient(180deg, #171735, #12122a 65%);
  border: 1px solid #2b2b55;
  border-radius: 18px;
  padding: 18px 18px 22px;
  box-shadow: 0 10px 36px rgba(10,10,30,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .3s ease, box-shadow .35s ease, border-color .3s ease;
  position: relative;

  /* Make all cards equal height and allow anchoring the button */
  display: flex;
  flex-direction: column;
}

/* Soft glow halo on hover, gentle elevation */
.woocommerce ul.products li.product:hover{
  transform: translateY(-10px);
  border-color: rgba(245,215,110,.55);
  box-shadow: 0 28px 76px rgba(245,215,110,.20), 0 12px 28px rgba(0,0,0,.55);
}

/* ---------- IMAGE PANEL (for transparent vials) ---------- */

/* The link that wraps image + title */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  padding: 16px;
  margin-bottom: 12px;

  /* “glass” panel under transparent PNGs */
  background:
    radial-gradient(220px 140px at 50% 40%, rgba(245,215,110,.09), rgba(255,255,255,0) 68%),
    radial-gradient(140px 100px at 60% 60%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #0f1024 10%, #0b0c1b 100%);
  border: 1px solid #232358;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 26px rgba(0,0,0,.35);
}

/* “shine” sweep on hover */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 68%);
  transform: translateX(-120%) rotate(12deg);
  transition: transform .7s ease;
  pointer-events:none;
  filter: blur(8px);
}
.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link::after{
  transform: translateX(35%) rotate(12deg);
}

/* The product image itself */
.woocommerce ul.products li.product img{
  display:block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 0;
  transition: transform .32s ease;
}

/* Smooth zoom on hover */
.woocommerce ul.products li.product:hover img{
  transform: scale(1.04);
}

/* ---------- TYPOGRAPHY ---------- */

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  margin: 10px 0 6px;
  font-weight: 800;
  font-size: 1.04rem;
  color:#eef2ff;
  line-height: 1.25;
  text-align: left;
  text-shadow: 0 0 10px rgba(0,0,0,.45);
}

/* Ratings smaller + subtle */
.woocommerce ul.products li.product .star-rating{
  margin: 2px 0 4px;
  transform: scale(.95);
}
.woocommerce ul.products li.product .star-rating span{
  color: #f5d76e !important;
  text-shadow: 0 0 6px rgba(245,215,110,.45);
}

/* Price in gold, prominent */
.woocommerce ul.products li.product .price{
  color: #f5d76e !important;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing:.2px;
  display:block;
  margin: 0 0 14px;
  text-shadow: 0 0 14px rgba(245,215,110,.5);
  text-align:left;
}

/* ---------- BUTTON (anchor to bottom, centered, wide) ---------- */

.woocommerce ul.products li.product .button{
  margin-top: auto;                 /* push to bottom within flex card */
  align-self: center;
  width: 86%;
  text-align: center;

  background: linear-gradient(98deg, #ffe6a0 10%, #f5d76e 55%, #e9c65c 100%);
  color:#151524 !important;
  font-weight: 800;
  border-radius: 44px;
  padding: 12px 22px;
  border: none;
  box-shadow: 0 9px 26px rgba(245,215,110,.25);
  transition: transform .22s ease, box-shadow .25s ease, letter-spacing .22s ease;
}
.woocommerce ul.products li.product .button:hover{
  transform: translateY(-3px) scale(1.03);
  letter-spacing:.2px;
  box-shadow: 0 18px 46px rgba(245,215,110,.4);
}

/* Ensure consistent bottom spacing under the button */
.woocommerce ul.products li.product .button + *{
  margin-top: 0 !important;
}

/* ---------- SPACING / GAPS ---------- */

/* Give cards some breathing room in the grid (for themes that don’t gap) */
.woocommerce ul.products li.product{
  margin: 12px;
}

/* Small screens: widen the button and calm shadows */
@media (max-width: 768px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    padding: 36px 18px;
    border-radius: 16px;
  }
  .woocommerce ul.products li.product .button{
    width: 92%;
  }
  .woocommerce ul.products li.product{
    box-shadow: 0 10px 26px rgba(10,10,30,.45), inset 0 1px 0 rgba(255,255,255,.05);
  }
}



/* ===== Global Luxe Background with drifting dots (CTA-style) ===== */

/* Base gradient (fallback) */
html, body{
  background: radial-gradient(ellipse at 50% 10%, #0d0d1a 0%, #060610 100%) !important;
}

/* Drifting dotted layer behind the whole site */
body::before{
  content:"";
  position: fixed;     /* stay behind while you scroll */
  inset: 0;
  z-index: 0;          /* keep it behind all content */
  pointer-events: none;

  /* two dot layers + very subtle glow, same idea as your CTA */
  background-image:
    radial-gradient(#ffffffaa 1px, transparent 1.2px),
    radial-gradient(#ffffff66 1px, transparent 1.2px),
    radial-gradient(1200px 520px at 50% -10%, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%);
  background-size: 70px 70px, 120px 120px, 100% 100%;
  background-position: 0 0, 30px 20px, center;
  opacity: .18;        /* strength of the dots */
  animation: pkStarsDrift 22s linear infinite;
}

/* Drift animation (like your CTA) */
@keyframes pkStarsDrift{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(60px,40px,0); }
}

/* Make sure theme wrappers are above the background and transparent */
#page,
.site,
.site-content,
.hfeed,
.ast-container,
.elementor,
.elementor-location-body,
.ast-page-builder-template .site-content {
  position: relative;
  z-index: 1;
  background: transparent !important;  /* let the dots show around sections */
}

/* Optional: gold “dust” instead of silver – uncomment to try */
/*
body::before{
  background-image:
    radial-gradient(rgba(245,215,110,.65) 1px, transparent 1.2px),
    radial-gradient(rgba(245,215,110,.35) 1px, transparent 1.2px),
    radial-gradient(1200px 520px at 50% -10%, rgba(245,196,81,.06) 0%, rgba(245,196,81,0) 60%);
}
*/


/* VISUAL SKIN ONLY — no width/box-size changes */
.section-contrast-99pp{
  background: linear-gradient(180deg, #19182a, #121122);
  border: 1px solid rgba(245, 215, 110, 0.15);
  border-radius: 22px;
  box-shadow: 
    0 20px 60px rgba(0,0,0,.65),
    0 0 25px rgba(245, 215, 110, 0.08);
  /* no padding, margin, or max-width here */
}

/* put this in Elementor → Site Settings → Custom CSS or Customizer */
.woocommerce nav.woocommerce-pagination {
  position: relative;
  z-index: 50;   /* higher than your sections */
}/* End custom CSS */