.elementor-10412 .elementor-element.elementor-element-66f0ef3{--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-10412 .elementor-element.elementor-element-ed4a819{--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-10412 .elementor-element.elementor-element-5bca21a{--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-10412 .elementor-element.elementor-element-af84c24{--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-10412 .elementor-element.elementor-element-d88c567{--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-10412 .elementor-element.elementor-element-b346067{--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-10412 .elementor-element.elementor-element-1d4b5f6{--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-10412 .elementor-element.elementor-element-f0f36e5{--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;}/* Start custom CSS for shortcode, class: .elementor-element-24ae989 *//* ============================================================
   POWER PEPTIDES – HERO SECTION (FULL CLEAN VERSION)
   Fully responsive + clickable buttons + fixed overlay issues
   ============================================================ */

:root{
  --pp-blue:#204aa0;
  --pp-dark:#195a78;
  --pp-pink:#d473a6;
}

/* ------------------------------------------- */
/* HERO WRAPPER (full-width breakout)         */
/* ------------------------------------------- */

.pp-hero{
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  width:100vw!important;
  background:linear-gradient(160deg,var(--pp-blue) 0%, var(--pp-dark) 45%, var(--pp-pink) 100%)!important;
  color:#fff!important;
  padding:clamp(60px,8vw,120px) 0!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  z-index:1;
}

/* ------------------------------------------- */
/* FIX: Overlay cannot block buttons           */
/* ------------------------------------------- */

.pp-hero::before{
  content:"";
  position:absolute;
  inset:-20% -10% -20% -10%;
  opacity:.12;
  pointer-events:none !important;
  z-index:0 !important;

  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='white' stroke-opacity='0.6' stroke-width='1'>\
  <defs><pattern id='hex' width='20' height='17.32' patternUnits='userSpaceOnUse'>\
  <path d='M5 0 L15 0 L20 8.66 L15 17.32 L5 17.32 L0 8.66 Z'/></pattern></defs>\
  <rect width='100%' height='100%' fill='url(%23hex)'/></svg>");
  
  background-size:320px 320px;
  animation:pp-pan 60s linear infinite alternate;
}

/* Animation */
@keyframes pp-pan{
  from{background-position:0 0}
  to{background-position:-600px -400px}
}

/* ------------------------------------------- */
/* INNER GRID                                 */
/* ------------------------------------------- */

.pp-hero__inner{
  max-width:1320px!important;
  margin:0 auto!important;
  padding:0 clamp(16px,3vw,32px)!important;

  display:grid!important;
  grid-template-columns:1.2fr 1fr!important;
  gap:clamp(28px,4vw,60px)!important;
  align-items:center!important;

  position:relative;
  z-index:2!important; /* ensures content is ABOVE overlay */
}

/* ------------------------------------------- */
/* LEFT COLUMN                                 */
/* ------------------------------------------- */

.pp-hero__left{
  max-width:650px!important;
}

.pp-hero__title{
  font-weight:800!important;
  line-height:1.1!important;
  font-size:clamp(38px,4vw,64px)!important;
  margin:0 0 16px!important;
}

.pp-hero__sub{
  font-size:clamp(16px,2vw,20px)!important;
  line-height:1.55!important;
  margin:0 0 22px!important;
  color:#e7ecf7!important;
}

/* ------------------------------------------- */
/* BUTTONS                                     */
/* ------------------------------------------- */

.pp-cta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:14px!important;
  margin:0 0 16px!important;
}

.pp-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:14px 22px!important;
  border-radius:14px!important;
  font-weight:800!important;
  text-decoration:none!important;
  position:relative;
  z-index:10 !important; /* ensures ALWAYS clickable */
}

.pp-btn--primary{
  background:#fff!important;
  color:#204aa0!important;
}

.pp-btn--ghost{
  background:transparent!important;
  color:#fff!important;
  border:2px solid #fff!important;
}

/* ------------------------------------------- */
/* CHIPS                                       */
/* ------------------------------------------- */

.pp-hero__chips{
  list-style:none!important;
  padding:0!important;
  margin:12px 0 10px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}

.pp-hero__chips li{
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  color:#fff!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  font-weight:700!important;
  font-size:14px!important;
}

/* ------------------------------------------- */
/* IMAGE (RIGHT COLUMN)                        */
/* ------------------------------------------- */

.pp-hero__right{
  display:flex!important;
  justify-content:center!important;
}

.pp-hero__right img{
  width:min(520px,100%)!important;
  height:auto!important;
  border-radius:20px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.28)!important;

  animation:pp-float 8s ease-in-out infinite alternate;
  position:relative;
  z-index:5!important;
}

/* Floating animation */
@keyframes pp-float{
  from{transform:translateY(3px)}
  to{transform:translateY(-4px)}
}

/* ------------------------------------------- */
/* RESPONSIVE ADJUSTMENTS                      */
/* ------------------------------------------- */

@media (max-width:1024px){
  .pp-hero__inner{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }

  .pp-hero__right{
    order:-1!important;
  }

  .pp-btn{
    width:100%!important;
  }

  .pp-hero__left{
    margin:0 auto!important;
  }

  .pp-hero__right img{
    width:80%!important;
    margin:0 auto!important;
  }
}

@media (max-width:600px){
  .pp-hero{
    padding:60px 0!important;
  }

  .pp-cta{
    justify-content:center!important;
  }

  .pp-btn{
    width:100%!important;
  }

  .pp-hero__right img{
    width:100%!important;
  }
}

/* ------------------------------------------- */
/* REDUCED MOTION                              */
/* ------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .pp-hero::before{
    animation:none;
  }
  .pp-hero__right img{
    animation:none;
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-df56851 *//* ============================================================
   SECTION 2 – TRUST STRIP (Full Design)
   ============================================================ */

.pp-trust{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  background:#f8fafc;
  padding:60px 16px;
}

.pp-trust__inner{
  max-width:1200px;
  margin:auto;
  display:grid;
  gap:18px;
  grid-template-columns:repeat(4,1fr);
}

@media(max-width:1024px){
  .pp-trust__inner{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){
  .pp-trust__inner{ grid-template-columns:1fr; }
}

.pp-trust__card{
  background:#fff;
  padding:22px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:.2s;
}

.pp-trust__card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.1);
}

.pp-trust__icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--pp-blue),var(--pp-dark));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  margin-bottom:12px;
}

.pp-trust__card h3{
  font-weight:800;
  font-size:18px;
  margin:6px 0 4px;
  color:#0f172a;
}

.pp-trust__card p{
  margin:0;
  color:#475569;
  font-size:14px;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5bca21a *//* ============================================================
   POWER PEPTIDES – CATEGORY GRID (DYNAMIC + RESPONSIVE)
   ============================================================ */

.pp-cats{
  padding:clamp(48px,6vw,88px) 16px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:#f9fafb;
}

.pp-cats__inner{
  max-width:1250px;
  margin:0 auto;
}

/* Heading */
.pp-cats__header{
  text-align:center;
  margin-bottom:42px;
}

.pp-cats__header h2{
  font-size:clamp(28px,4vw,42px);
  font-weight:800;
  color:#0f172a;
  margin:0 0 10px;
}

.pp-cats__header p{
  margin:0;
  font-size:16px;
  color:#475569;
}

/* GRID */
.pp-cats__grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(3,1fr);
}

/* Tablet */
@media(max-width:1024px){
  .pp-cats__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Mobile */
@media(max-width:680px){
  .pp-cats__grid{
    grid-template-columns:1fr;
  }
}

/* CARD */
.pp-cats__card{
  display:flex;
  align-items:flex-end;
  padding:24px;
  border-radius:18px;
  min-height:180px;
  text-decoration:none!important;

  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  border:1px solid #e5e7eb;
  overflow:hidden;
  position:relative;
  transition:all .25s ease;
}

/* Frosted overlay */
.pp-cats__card::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,0.48);
  border-radius:18px;
  z-index:1;
}

/* Hover effect */
.pp-cats__card:hover{
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
  transform:translateY(-3px);
}

/* CONTENT */
.pp-cats__content{
  position:relative;
  z-index:2;
}

.pp-cats__content h3{
  margin:0 0 4px;
  font-size:20px;
  font-weight:800;
  color:#0f172a;
}

.pp-cats__content p{
  margin:0 0 14px;
  font-size:14px;
  color:#334155;
}

.pp-cats__count{
  display:inline-block;
  font-size:13px;
  background:#fff;
  color:#0f172a;
  padding:5px 12px;
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(0,0,0,0.08);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-18f9a32 *//* ============================================================
   SECTION 3 – CATEGORY GRID
   ============================================================ */

.pp-cats{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:60px 16px;
  background:#fff;
}

.pp-cats__grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  gap:22px;
  grid-template-columns:repeat(3,1fr);
}

@media(max-width:900px){
  .pp-cats__grid{ grid-template-columns:repeat(2,1fr);}
}

@media(max-width:560px){
  .pp-cats__grid{ grid-template-columns:1fr;}
}

.pp-cats__card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  transition:.25s ease;
  backdrop-filter:blur(3px);
}

.pp-cats__card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.12);
}

.pp-cats__card img{
  width:100%;
  height:200px;
  object-fit:cover;
  opacity:.85;
}

.pp-cats__info{
  padding:18px;
}

.pp-cats__info h3{
  font-size:20px;
  font-weight:800;
  margin:0 0 4px;
}

.pp-cats__info p{
  margin:0;
  color:#475569;
  font-size:14px;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-424560b *//* ============================================================
   SECTION 4: CTA Banner (COA) — Improved Responsive Version
   ============================================================ */

.pp-cta-sec{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background: linear-gradient(160deg, #204aa0 0%, #195a78 55%, #d473a6 100%);
  color: #fff;
  padding: clamp(50px,7vw,100px) 16px;
  position: relative;
  overflow: hidden;
  text-align:center;
}

.pp-cta-sec__inner{
  max-width: 900px;
  margin: 0 auto;
  padding-inline: clamp(12px,3vw,24px);
  position:relative;
  z-index:2;
}

.pp-cta-sec__title{
  font-weight: 800;
  font-size: clamp(24px,4vw,40px);
  margin: 0 0 10px;
  color: #fff;
}

.pp-cta-sec__sub{
  margin: 0 0 22px;
  font-size: clamp(15px,2.3vw,19px);
  color: #eef2ff;
  line-height:1.55;
}

.pp-cta-sec__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px,1vw,16px) clamp(28px,3vw,38px);
  border-radius: 999px;
  background: #ffffff;
  color: #204aa0;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  font-size: clamp(14px,1.8vw,16px);
}

.pp-cta-sec__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  filter: brightness(0.97);
}

/* Background Hex Pattern */
.pp-cta-sec::before{
  content: "";
  position: absolute;
  inset: -15% -10%;
  opacity: .08;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1'>\
<defs><pattern id='hex' width='20' height='17.32' patternUnits='userSpaceOnUse'><path d='M5 0 L15 0 L20 8.66 L15 17.32 L5 17.32 L0 8.66 Z'/></pattern></defs>\
<rect width='100%' height='100%' fill='url(%23hex)'/></svg>");
  background-size: 260px 260px;
  animation: pp-cta-pan 50s linear infinite alternate;
}

@keyframes pp-cta-pan{
  from{background-position:0 0}
  to{background-position:-500px -300px}
}

/* Tablet Only */
@media(max-width:1024px){
  .pp-cta-sec{
    padding: 70px 20px;
  }
}

/* Mobile Only */
@media(max-width:600px){
  .pp-cta-sec{
    padding: 60px 20px;
  }
  .pp-cta-sec__btn{
    width: 100%;
    max-width: 260px;
  }
}

@media(prefers-reduced-motion:reduce){
  .pp-cta-sec::before{
    animation:none;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b346067 *//* === SECTION 5: Featured / Best Sellers === */
.pp-featured{
  padding: clamp(36px,6vw,80px) 16px;
  background:#ffffff;
}
.pp-featured__header{
  text-align:center; max-width:900px; margin:0 auto 24px;
}
.pp-featured__title{
  font-size:clamp(26px,3vw,38px); font-weight:800; color:#0f172a; margin:0 0 8px;
}
.pp-featured__sub{
  font-size:clamp(15px,2vw,18px); color:#475569; margin:0;
}

/* Grid card polish (scoped to this section only) */
.pp-featured .pp-grid ul.products li.product{
  border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; padding:12px; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pp-featured .pp-grid ul.products li.product:hover{
  transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.08); border-color:#e2e8f0;
}
.pp-featured .pp-grid ul.products li.product .button{
  border-radius:12px; font-weight:700; background:#204aa0; color:#fff;
}
.pp-featured .pp-grid ul.products li.product .price{ font-weight:700; color:#0f172a; }
.pp-featured .pp-grid ul.products li.product .woocommerce-loop-product__title{
  font-weight:800; font-size:16px;
}

/* COA badge styling (works with your tag-based hook) */
.pp-featured .pp-badge{
  position:absolute; top:10px; left:10px; z-index:5;
  background:#d473a6; color:#fff; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800;
}

/* Responsive columns tweaked a touch */
@media (max-width: 1024px){
  .pp-featured .pp-grid ul.products{ grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 780px){
  .pp-featured .pp-grid ul.products{ grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 520px){
  .pp-featured .pp-grid ul.products{ grid-template-columns: 1fr !important; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2dbd379 *//* ========================= SECTION 6 – FAQ Accordion ========================= */ .pp-faq{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; background: #ffffff; padding: clamp(36px,6vw,90px) 16px; border-top: 1px solid #eef2f7; } .pp-faq__header{ max-width: 900px; margin: 0 auto 18px; text-align: center; } .pp-faq__title{ font-weight: 800; font-size: clamp(26px,3vw,38px); color: #0f172a; margin: 0 0 8px; } .pp-faq__sub{ color: #475569; font-size: clamp(15px,2vw,18px); margin: 0; } .pp-faq__wrap{ max-width: 900px; margin: 18px auto 0; } /* Item */ .pp-faq__item{ background: #f8fafc; border: 1px solid #e6eaf0; border-radius: 14px; padding: 0; margin: 10px 0; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; } .pp-faq__item[open]{ background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.06); border-color: #e2e8f0; } /* Summary (question) */ .pp-faq__q{ list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; font-weight: 800; color: #0f172a; } .pp-faq__q::-webkit-details-marker { display: none; } /* Answer */ .pp-faq__a{ padding: 0 20px 18px 20px; color: #334155; line-height: 1.6; } /* Chevron animation */ .pp-faq__chev{ flex: 0 0 auto; color: #7c8aa6; transition: transform .2s ease; } .pp-faq__item[open] .pp-faq__chev{ transform: rotate(180deg); } /* Focus states for a11y */ .pp-faq__item:focus-within .pp-faq__q{ outline: 2px solid #204aa0; outline-offset: -2px; border-radius: 12px; } /* Small screens */ @media (max-width: 560px){ .pp-faq__q{ padding: 16px; } .pp-faq__a{ padding: 0 16px 16px 16px; } }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-5ea22e3 *//* ─── Email capture panel ─────────────────── */
.pp-lead{
  background:#f7f9fc;
  border:1px solid var(--pp-line);
  border-radius:16px;
  padding:28px;
  text-align:center;
  margin:60px 0 20px;
}
.pp-lead__title{font-size:22px;font-weight:700;margin:0 0 6px;color:var(--pp-ink)}
.pp-lead__sub{color:var(--pp-muted);margin:0 0 16px}
.pp-lead__form > * {max-width:640px;margin:0 auto}

/* Make embedded forms look neat (MailPoet/Elementor/Fluent) */
.pp-lead input[type="email"], .pp-lead input[type="text"]{
  width:100%; max-width:100%;
  border:1px solid var(--pp-line); border-radius:10px; padding:.75rem 1rem;
}
.pp-lead button, .pp-lead input[type="submit"]{
  background:var(--pp-blue); color:#fff; border:0; border-radius:12px;
  padding:.75rem 1.1rem; font-weight:700; cursor:pointer;
}
.pp-lead button:hover, .pp-lead input[type="submit"]:hover{ background:var(--pp-teal) }

/* ─── Legal / compliance line ─────────────── */
.pp-legal{
  font-size:14px; color:var(--pp-muted);
  text-align:center; padding:18px 0; margin-top:10px;
}/* End custom CSS */