/* ===============================
   HERO VISIBILITY SWITCH
   =============================== */

/* Default: desktop shows, mobile hidden */
.hero-desktop { display: block !important; }
.hero-mobile  { display: none !important; }

/* Mobile + tablet */
@media (max-width: 1024px) {
  .hero-desktop { display: none !important; }
  .hero-mobile  { display: block !important; }
}

/* ===============================
   COVER IMAGE BEHAVIOUR
   =============================== */

.hero-desktop.wp-block-cover,
.hero-mobile.wp-block-cover{
  width: 100%;
  margin: 0;
}

/* Cover image fit */
.hero-desktop .wp-block-cover__image-background,
.hero-mobile  .wp-block-cover__image-background{
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Remove overlay/fade */
.hero-desktop .wp-block-cover__background,
.hero-mobile  .wp-block-cover__background{
  opacity: 0 !important;
}

/* Heights */
.hero-desktop.wp-block-cover{
  min-height: 70vh;
}
@media (max-width: 1024px){
  .hero-mobile.wp-block-cover{
    min-height: 85vh;
  }
}

/* ===============================
   CONTENT POSITION (LOWER)
   =============================== */

/* Desktop: push content lower */
.hero-desktop.wp-block-cover .wp-block-cover__inner-container{
  padding-top: 35vh !important;
  padding-bottom: 10vh !important;
}

/* Mobile: push content even lower */
@media (max-width: 1024px){
  .hero-mobile.wp-block-cover .wp-block-cover__inner-container{
    padding-top: 38vh !important;
    padding-bottom: 12vh !important;
  }
}

/* Button stability */
.hero-desktop .wp-block-button__link,
.hero-mobile  .wp-block-button__link{
  display: inline-block;
}

.hero-btn {
  position: absolute;
  left: 950px;
  top: 740px;
  z-index: 5;
}
.hero-btn a {
  padding: 9px 36px;
  font-size: 20px;
  font-weight: 800;
  border-radius: 999px;
}
:root{
  --pc-blue:#154575; /* PeptideConnect Blue */
  --pc-ink:#0f1f33;
}

.pc-pagehero{
  width:100vw;
  margin-left:calc(-50vw + 50%);
  padding:72px 16px 66px;
  position:relative;
  background:
    radial-gradient(900px 420px at 50% 50%,
      rgba(21,69,117,.08) 0%,
      rgba(21,69,117,.04) 38%,
      rgba(21,69,117,0) 70%
    ),
    #fff;
}

.pc-pagehero::before,
.pc-pagehero::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:var(--pc-blue);
  opacity:.9;
}
.pc-pagehero::before{ top:0; }
.pc-pagehero::after{ bottom:0; }

.pc-pagehero__inner{
  max-width:1000px;
  margin:0 auto;
  text-align:center;
}

.pc-pagehero__pill{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(21,69,117,.18);
  color:var(--pc-blue);
  font-weight:800;
  font-size:14px;
  box-shadow:0 8px 22px rgba(15,31,51,.06);
}

.pc-pagehero__title{
  margin:22px 0 10px;
  font-size:64px;
  line-height:1.05;
  letter-spacing:-1px;
  font-weight:900;
  color:var(--pc-ink);
}

.pc-pagehero__sub{
  margin:0 auto;
  max-width:720px;
  font-size:18px;
  line-height:1.6;
  color:rgba(15,31,51,.65);
}

@media (max-width:900px){
  .pc-pagehero{ padding:60px 16px 56px; }
  .pc-pagehero__title{ font-size:48px; }
}
@media (max-width:520px){
  .pc-pagehero{ padding:52px 14px 48px; }
  .pc-pagehero__title{ font-size:36px; }
  .pc-pagehero__sub{ font-size:16px; }
  .pc-pagehero__pill{ font-size:13px; padding:9px 16px; }
}
/* 1️⃣ Completely remove the Shop title (and its spacing) */
body.woocommerce-shop .hero-section[data-type="type-2"] .page-title{
  display:none !important;
}

/* 2️⃣ Remove the padding/margin that Blocksy adds above your HTML */
body.woocommerce-shop .hero-section[data-type="type-2"] .entry-header{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* =========================
   PC SHOP GRID (reset + fix)
   4 desktop / 2 mobile
   no crop
   centered content
========================= */

/* Grid */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:28px !important;
  margin:0 !important;
  padding:0 !important;
}
@media (max-width: 900px){
  .woocommerce ul.products{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:18px !important;
  }
}

/* Items */
.woocommerce ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}

/* Link wrapper */
.woocommerce ul.products li.product .woocommerce-loop-product__link{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

/* HARD FIX: stop theme crop wrappers + stop giant whitespace */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product .woocommerce-loop-product__link{
  overflow:visible !important;
}

/* Make every product image sit in the same sized frame */
.woocommerce ul.products li.product a .ct-media-container,
.woocommerce ul.products li.product a .ct-media-container img{
  border-radius: 18px;
}

.woocommerce ul.products li.product a .ct-media-container{
  height: 260px;              /* same box for all */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}

/* Fill the box consistently */
.woocommerce ul.products li.product a img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: contain !important;  /* keep labels readable */
  object-position: center !important;
}

/* Remove forced aspect ratio (this is what’s causing mismatch) */
.woocommerce ul.products li.product a img{
  aspect-ratio: auto !important;
}


/* Titles + price centered and visible */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  width:100% !important;
  margin:0 0 10px !important;
  text-align:center !important;
}
.woocommerce ul.products li.product .price{
  width:100% !important;
  margin:0 0 14px !important;
  text-align:center !important;
}

/* Buttons centered */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  align-self:center !important;
  display:inline-flex !important;
  justify-content:center !important;
  width:auto !important;
  min-width:150px;
  margin:0 !important;
}
/* Give the image area more vertical room (stops the top cap being cut) */
.woocommerce ul.products li.product a img{
  max-height: 320px !important;   /* was 240 */
  padding: 14px !important;
}

/* Mobile a bit smaller */
@media (max-width: 900px){
  .woocommerce ul.products li.product a img{
    max-height: 260px !important;
  }
}
/* FAQ page (page-id-6) — remove Blocksy vertical spacing gap */
body.page-id-6 .ct-container-full[data-vertical-spacing]{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* sometimes Blocksy also adds spacing on the content wrapper */
body.page-id-6 main#main.site-main{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* FAQ page (page-id-6) — make hero FULL WIDTH like Shop */
body.page-id-6 #pc-pagehero{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* Shop page – Add to cart buttons */
.woocommerce a.button,
.woocommerce a.add_to_cart_button,
.woocommerce button.button {
  background-color: #154575 !important;
  color: #ffffff !important;
}

/* Hover state */
.woocommerce a.button:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce button.button:hover {
  background-color: #123d66 !important;
}
/* FULL BLEED FIX (Blocksy) */
.entry-content.is-layout-constrained > #pc-pagehero{
  max-width:none !important;
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* =========================================
   SHOP HERO – FULL BLEED (MATCH FAQ HERO)
   ========================================= */

/* BLOCKSY FULL-WIDTH OVERRIDE */
.entry-content.is-layout-constrained > #pc-pagehero,
#pc-pagehero.pc-full-bleed {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* HERO CONTAINER */
#pc-pagehero{
  padding: 92px 20px 84px;
  border-top: 2px solid rgba(21,69,117,.9);
  border-bottom: 2px solid rgba(21,69,117,.9);

  background:
    radial-gradient(circle at 50% 38%,
      rgba(21,69,117,.14) 0%,
      rgba(21,69,117,.08) 38%,
      rgba(21,69,117,.03) 62%,
      #ffffff 100%);
}

/* INNER WIDTH */
#pc-pagehero .pc-pagehero__inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* PILL — SAME AS FAQ */
#pc-pagehero .pc-pagehero__pill{
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(21,69,117,.18);
  box-shadow: 0 10px 30px rgba(15,25,40,.08);
  font-weight: 700;
  font-size: 14px;
  color: #154575;
  margin-bottom: 18px;
}

/* TITLE */
#pc-pagehero .pc-pagehero__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 1.05;
}

/* SUBTEXT */
#pc-pagehero .pc-pagehero__sub{
  margin: 14px auto 0;
  max-width: 760px;
  color: rgba(15,23,42,.72);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
}

/* MOBILE */
@media (max-width: 640px){
  #pc-pagehero{
    padding: 56px 16px 52px;
  }
}

/* 🔥 REMOVE BLOCKSY TOP/BOTTOM SPACING BLOCKS */
.ct-container-full[data-vertical-spacing] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}

/* 🔥 ENSURE HERO TOUCHES HEADER */
#pc-pagehero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 🔥 REMOVE ANY RESIDUAL BACKGROUND ABOVE/BELOW */
.site-main > .ct-container-full {
  background: transparent !important;
}

/* 🔥 SHOP PAGE – REMOVE BLOCKSY HERO PADDING */
.post-type-archive-product .hero-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #ffffff !important;
}

/* 🔥 REMOVE EXTRA BLOCKSY SPACING CONTAINER AROUND SHOP HERO */
.post-type-archive-product .ct-container-full[data-vertical-spacing] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}

/* 🔥 FORCE SHOP HERO FLUSH UNDER HEADER */
.post-type-archive-product .hero-section {
  margin-top: 0 !important;
}

/* 🔥 REMOVE BLUE/GREY BAND BELOW HERO */
.post-type-archive-product .site-main > .ct-container {
  padding-top: 0 !important;
}

/* ✅ SHOP HERO (HTML) — MATCH FAQ / ABOUT HERO EXACTLY */
#pc-pagehero{
  padding: 92px 20px 84px !important;
  border-top: 2px solid rgba(21,69,117,.9) !important;
  border-bottom: 2px solid rgba(21,69,117,.9) !important;

  background:
    radial-gradient(circle at 50% 38%,
      rgba(21,69,117,.14) 0%,
      rgba(21,69,117,.08) 38%,
      rgba(21,69,117,.03) 62%,
      #ffffff 100%) !important;
}

/* Blocksy full-bleed (same method you used) */
.entry-content.is-layout-constrained > #pc-pagehero{
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Inner width + center */
#pc-pagehero .pc-pagehero__inner{
  max-width: 1100px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Pill */
#pc-pagehero .pc-pagehero__pill{
  display: inline-flex !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(21,69,117,.18) !important;
  box-shadow: 0 10px 30px rgba(15,25,40,.08) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #154575 !important;
  margin-bottom: 18px !important;
}

/* Title */
#pc-pagehero .pc-pagehero__title{
  margin: 0 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  font-size: clamp(38px, 4.5vw, 64px) !important;
  line-height: 1.05 !important;
}

/* Subtext */
#pc-pagehero .pc-pagehero__sub{
  margin: 14px auto 0 !important;
  max-width: 760px !important;
  color: rgba(15,23,42,.72) !important;
  font-size: clamp(15px, 1.4vw, 18px) !important;
  line-height: 1.6 !important;
}

@media (max-width: 640px){
  #pc-pagehero{ padding: 56px 16px 52px !important; }
}

/* 🔥 FORCE PC HERO FLUSH UNDER HEADER (SHOP / ABOUT / FAQ) */
#pc-pagehero{
  margin-top: calc(- 1 * var(--header-height)+ 1.5) !important;
}

/* SHOP: remove Blocksy hero push-down */
body.post-type-archive-product [data-prefix="woo_categories"] .hero-section[data-type="type-2"]{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* safety: if prefix changes */
body.post-type-archive-product .hero-section[data-type="type-2"]{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* SHOP HERO: kill the extra top gap Blocksy adds above your HTML hero */
body.post-type-archive-product .hero-section[data-type="type-2"] .page-description{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* if Blocksy still reserves space, remove it completely */
body.post-type-archive-product .hero-section[data-type="type-2"] .page-description:empty{
  display: none !important;
}

/* Make shop product images larger */
.woocommerce ul.products li.product a img {
  width: 100%;
  max-width: 430px; /* increase to 280–300px if you want even bigger */
  margin: 0 auto 15px;
  display: block;
}

/* Give cards more vertical space so buttons don't feel cramped */
.woocommerce ul.products li.product {
  padding-bottom: 20px;
}

/* Hide product descriptions in checkout order summary */
.wc-block-components-product-metadata__description,
.wc-block-components-product-details__description,
.wc-block-components-product-metadata__content p {
  display: none !important;
}

/* Hide PayPal Pay Later / Pay in 4 message iframe */
iframe[id^="paypal-message-uid-"],
iframe[name^="paypal-message-uid-"]{
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Extra: hide any PayPal message containers if present */
.paypal-messages,
#paypal-messages,
[data-pp-message]{
  display: none !important;
}

.pcx-wrap{margin:12px 0 18px}
.pcx-card{
  max-width:680px;
  margin:0 auto;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  background:#fff;
  padding:22px 22px 18px;
  box-shadow:0 18px 42px rgba(0,0,0,.08);
  text-align:center;
}

/* Research pill (premium) */
.pcx-pill{
  display:inline-flex;
  align-items:center;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(21,69,117,.20);
  background:linear-gradient(180deg, rgba(21,69,117,.12), rgba(21,69,117,.03));
  box-shadow:0 10px 22px rgba(21,69,117,.08);
  margin-bottom:16px;
}
.pcx-pill strong{
  display:block;
  font-size:12.8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0b2540;
  margin:0 0 6px;
  font-weight:800;
}
.pcx-pill span{
  display:block;
  font-size:12.7px;
  color:rgba(0,0,0,.70);
  line-height:1.45;
}

/* KEEP PRODUCT TEXT AS-IS: we only control how it's displayed */
.pcx-desc{
  margin:12px auto 18px;
  max-width:62ch;
  font-size:14.2px;
  line-height:1.75;
  color:rgba(0,0,0,.78);
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere;
  hyphens:none !important;
}
.pcx-desc p{margin:0 !important}
.pcx-desc br{display:none !important}

/* Feature cards - cleaner, more premium */
.pcx-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:6px;
}
.pcx-item{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 12px 13px;
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(21,69,117,.02));
}
.pcx-miniico{
  width:38px;height:38px;
  margin:0 auto 10px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(21,69,117,.10);
  border:1px solid rgba(21,69,117,.18);
  box-shadow:0 10px 20px rgba(21,69,117,.10);
}
.pcx-item b{
  display:block;
  font-size:12.2px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0b2540;
  margin:0 0 7px;
  font-weight:800;
}
.pcx-item p{
  margin:0;
  font-size:12.8px;
  line-height:1.45;
  color:rgba(0,0,0,.70);
}

/* Footer info */
.pcx-foot{
  margin-top:16px;
  padding:14px 14px;
  border-radius:18px;
  border:1px dashed rgba(21,69,117,.35);
  background:rgba(21,69,117,.06);
  font-size:12.9px;
  line-height:1.55;
  color:rgba(0,0,0,.74);
}
.pcx-foot strong{color:#0b2540}

@media (max-width: 900px){
  .pcx-card{max-width:100%}
}
@media (max-width: 720px){
  .pcx-grid{grid-template-columns:1fr}
}

/* =========================
   Bac Water ONLY (Product ID: 269)
   ========================= */

.single-product.postid-269 .pcx-wrap{margin:12px 0 18px}

.single-product.postid-269 .pcx-card{
  max-width:680px;
  margin:0 auto;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  background:#fff;
  padding:22px 22px 18px;
  box-shadow:0 18px 42px rgba(0,0,0,.08);
  text-align:center;
}

.single-product.postid-269 .pcx-pill{
  display:inline-flex;
  align-items:center;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(21,69,117,.20);
  background:linear-gradient(180deg, rgba(21,69,117,.12), rgba(21,69,117,.03));
  box-shadow:0 10px 22px rgba(21,69,117,.08);
  margin-bottom:16px;
}
.single-product.postid-269 .pcx-pill strong{
  display:block;
  font-size:12.8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0b2540;
  margin:0 0 6px;
  font-weight:800;
}

.single-product.postid-269 .pcx-desc{
  margin:12px auto 18px;
  max-width:62ch;
  font-size:14.2px;
  line-height:1.75;
  color:rgba(0,0,0,.78);
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere;
}
.single-product.postid-269 .pcx-desc p{margin:0 !important}
.single-product.postid-269 .pcx-desc br{display:none !important}

.single-product.postid-269 .pcx-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:6px;
}

/* HARD desktop lock */
@media (min-width:721px){
  .single-product.postid-269 .pcx-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}

.single-product.postid-269 .pcx-item{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 12px 13px;
  background:linear-gradient(180deg,#fff,rgba(21,69,117,.02));
}

.single-product.postid-269 .pcx-miniico{
  width:38px;height:38px;
  margin:0 auto 10px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(21,69,117,.10);
  border:1px solid rgba(21,69,117,.18);
  box-shadow:0 10px 20px rgba(21,69,117,.10);
  color:#154575;
}
.single-product.postid-269 .pcx-miniico svg{
  width:18px;
  height:18px;
}

.single-product.postid-269 .pcx-item b{
  display:block;
  font-size:12.2px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0b2540;
  margin:0 0 7px;
  font-weight:800;
}
.single-product.postid-269 .pcx-item p{
  margin:0;
  font-size:12.8px;
  line-height:1.45;
  color:rgba(0,0,0,.70);
}

.single-product.postid-269 .pcx-foot{
  margin-top:16px;
  padding:14px;
  border-radius:18px;
  border:1px dashed rgba(21,69,117,.35);
  background:rgba(21,69,117,.06);
  font-size:12.9px;
  line-height:1.55;
}
.single-product.postid-269 .pcx-foot strong{color:#0b2540}

@media (max-width:720px){
  .single-product.postid-269 .pcx-grid{grid-template-columns:1fr}
}

.pc-shop-notice {
  max-width: 1200px;
  margin: 24px auto 32px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(21,69,117,.08), rgba(21,69,117,.16));
  border: 1px solid rgba(21,69,117,.35);
  box-shadow: 0 18px 40px rgba(21,69,117,.18), inset 0 1px 0 rgba(255,255,255,.6);
}

.pc-shop-notice__icon {
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #154575;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(21,69,117,.45);
}

.pc-shop-notice__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.55;
}

.pc-shop-notice__content strong {
  color: #154575;
  font-weight: 600;
}

@media (max-width: 768px) {
  .pc-shop-notice {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
}