:root{
  --jax-pink:#e91e63;
  --jax-pink-deep:#c2185b;
  --jax-pink-soft:#fdf1f6;
  --jax-line:#f3d3df;
  --jax-ink:#251219;
}
body{ color:var(--jax-ink); }
header.wp-block-template-part{ background:var(--jax-pink-soft); }
main a{ color:var(--jax-pink-deep); }
.wp-block-button .wp-block-button__link,
button.single_add_to_cart_button,
a.single_add_to_cart_button,
.wc-block-components-button,
.wc-block-cart__submit-button,
button[name="add-to-cart"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background-color:#000000 !important;
  border-color:#000000 !important;
  color:#ffffff !important;
  border-radius:10px !important;
  font-weight:700;
}
.wp-block-button .wp-block-button__link:hover,
button.single_add_to_cart_button:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  background-color:var(--jax-pink) !important;
  border-color:var(--jax-pink) !important;
}
.woocommerce-Price-amount,
.wc-block-grid__product-price,
span.price, p.price, .price{
  color:var(--jax-pink-deep) !important;
  font-weight:700;
}
.onsale, .wc-block-grid__product-onsale{
  background-color:var(--jax-pink) !important;
  color:#fff !important;
  border:none !important;
}
.woocommerce-message, .woocommerce-info{ border-top-color:var(--jax-pink) !important; }
.wp-block-woocommerce-product-collection .wc-block-product,
.products .product{ border-radius:14px; }
input:focus, select:focus, textarea:focus{ outline-color:var(--jax-pink) !important; }
footer.wp-block-template-part{ background:var(--jax-pink-soft); }

/* Product cards like the catalog design */
.products{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding:0 !important; box-sizing:border-box; }
.products *, .products *::before, .products *::after{ box-sizing:border-box !important; }
.products::before, .products::after{ display:none !important; }
.products .product{
  list-style:none !important;
  margin:0 !important; width:100% !important;
  border:1px solid var(--jax-line) !important;
  border-radius:18px !important;
  padding:20px !important;
  background:#ffffff;
  display:flex; flex-direction:column;
}
.products .product img{ border-radius:14px !important; }
.products .product .woocommerce-loop-product__title{
  font-weight:800 !important; font-size:19px !important; color:var(--jax-ink) !important;
  padding-top:14px !important; order:2; min-height:52px !important;
}
.products .product .price{
  order:3; font-family:ui-monospace,Menlo,monospace !important; font-size:19px !important;
  color:var(--jax-pink-deep) !important; margin:6px 0 10px !important;
}
.products .product .jax-stock{
  order:4; display:inline-block; align-self:flex-start;
  background:var(--jax-pink-soft); border-radius:999px;
  padding:8px 16px; font-size:14px; font-weight:700; color:var(--jax-pink-deep);
}
.products .product .jax-stock small{ font-weight:500; }
.products .product .jax-stock.out{ background:#f3f3f3; color:#8a8a8a; }
.products .product{ flex-direction:row !important; flex-wrap:wrap; align-content:flex-start; }
.products .product > a.woocommerce-LoopProduct-link{ flex:0 0 100%; }
.products .product > .button{
  flex:1 1 calc(50% - 4px) !important; min-width:0 !important; max-width:calc(50% - 4px) !important;
  margin-top:12px !important; text-align:center; justify-content:center; white-space:nowrap;
}
.products .product > .button + .button{ margin-left:8px; }
.jax-buy-now{
  background:transparent !important; color:var(--jax-pink-deep) !important;
  border:1.5px solid var(--jax-pink) !important;
}
.jax-buy-now:hover{
  background:var(--jax-pink) !important; color:#ffffff !important;
}
/* Buy Now on the single product page: full-width button on its own row, clearly separated */
.single-product form.cart{ flex-wrap:wrap; }
.single-product form.cart button.single_add_to_cart_button.jax-buy-now{
  flex:1 1 100% !important; display:block !important; width:100%;
  margin:16px 0 0 !important; padding:15px 20px !important;
  font-size:16px !important; line-height:1.3; border-radius:999px;
}
@media (max-width:1100px){
  .products .product > .button{ font-size:13px !important; padding:10px 6px !important; }
}
@media (max-width:900px){ .products{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){
  .products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .products .product{ padding:12px !important; }
  .products .product .woocommerce-loop-product__title{ font-size:15px !important; min-height:46px !important; }
  .products .product .price{ font-size:15px !important; }
  .products .product .jax-stock{ font-size:12px !important; padding:7px 12px !important; }
  /* Two small equal buttons — always fit side by side, never bleed into the next column */
  .products .product{ column-gap:10px !important; }
  .products .product > .button{
    flex:1 1 calc(50% - 5px) !important;
    min-width:0 !important; max-width:calc(50% - 5px) !important;
    margin:12px 0 0 !important;
    font-size:11.5px !important;
    padding:9px 2px !important;
    white-space:nowrap !important;
  }
  /* Shorter label so "Add to cart" + "Buy Now" fit side by side on phones */
  .products .product > .button.add_to_cart_button{ font-size:0 !important; }
  .products .product > .button.add_to_cart_button::after{ content:'Add'; font-size:11.5px; font-weight:700; }
  /* gap handled by column-gap on the card */
}

/* Desktop/tablet (>=561px): stack card buttons full-width, one per row.
   The old side-by-side 50% boxes are narrower than the button labels on the
   narrow desktop catalog cards, so the nowrap label text spilled across both
   buttons (visual overlap, "Buy No..." clipped). Mobile (<=560px) keeps its
   compact side-by-side rules above — do not move this block after them without
   the min-width guard. */
@media (min-width:561px){
  .products .product > .button{
    flex:1 1 100% !important;
    max-width:100% !important;
    margin-left:0 !important;
  }
  /* Block-based shop grid cards: same stacked, full-width treatment */
  .wp-block-woocommerce-product-collection .wc-block-product .wp-block-woocommerce-product-button{
    align-items:stretch;
  }
  .wp-block-woocommerce-product-collection .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link{
    width:100%;
  }
  .wc-block-product > a.jax-buy-now{
    display:block; width:100%; box-sizing:border-box; text-align:center;
  }
}

/* Free-shipping marquee bars (top + bottom) */
.jax-marquee{ overflow:hidden; background:#c2185b; color:#ffffff; text-transform:uppercase; }
.jax-marquee-track{ display:flex; width:max-content; will-change:transform; }
.jax-marquee-half{ display:flex; align-items:center; white-space:nowrap; }
.jax-mq-msg{ font-weight:700; font-size:14px; letter-spacing:.08em; padding:9px 10px 9px 30px; }
.jax-mq-sep{ font-size:11px; padding-right:30px; }


/* Site title: one word "JAXPeptides", letters alternating black / pink (jar label) */
.wp-block-site-title a{ text-decoration:none !important; }
.jax-t-b{ color:#000000 !important; }
.jax-t-p{ color:var(--jax-pink) !important; }

/* Homepage hero product carousel (rotating product infographics) */
.jax-hero{ position:relative; margin:4px 0 28px; }
.jax-hero-viewport{
  overflow:hidden; border:1px solid var(--jax-line); border-radius:22px;
  background:linear-gradient(180deg, var(--jax-pink-soft) 0%, #ffffff 72%);
  padding:16px 16px 12px;
}
.jax-hero-track{ display:flex; gap:14px; transition:transform .65s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.jax-hero-slide{ flex:0 0 calc((100% - 14px)/2); min-width:0; }
@media (min-width:561px){ .jax-hero-slide{ flex-basis:calc((100% - 28px)/3); } }
@media (min-width:1100px){ .jax-hero-slide{ flex-basis:calc((100% - 42px)/4); } }
.jax-hero-card{
  display:flex; flex-direction:column; height:100%; box-sizing:border-box;
  background:#ffffff; border:1px solid var(--jax-line); border-radius:18px;
  padding:10px; text-decoration:none !important;
}
.jax-hero-card:hover{ border-color:var(--jax-pink); box-shadow:0 10px 26px rgba(233,30,99,.13); }
.jax-hero-img{ width:100%; height:auto; aspect-ratio:1/2; object-fit:cover; border-radius:12px; display:block; }
.jax-hero-meta{ display:flex; flex-direction:column; gap:2px; padding:10px 4px 2px; }
.jax-hero-name{ font-weight:800; font-size:15px; line-height:1.25; color:var(--jax-ink) !important; }
.jax-hero-price{ font-family:ui-monospace,Menlo,monospace; font-weight:700; font-size:15px; }
.jax-hero-arrow{
  position:absolute; top:42%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:999px; cursor:pointer;
  border:1px solid var(--jax-line); background:rgba(255,255,255,.93);
  color:var(--jax-pink-deep); font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0 0 3px;
  box-shadow:0 4px 14px rgba(233,30,99,.16);
}
.jax-hero-arrow.prev{ left:6px; }
.jax-hero-arrow.next{ right:6px; }
.jax-hero-arrow:hover{ background:var(--jax-pink); color:#ffffff; }
.jax-hero-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; flex-wrap:wrap; }
.jax-hero-dot{
  width:8px; height:8px; border-radius:999px; border:none; padding:0; cursor:pointer;
  background:#f0b9cf; transition:all .25s;
}
.jax-hero-dot.active{ width:22px; background:var(--jax-pink); }
@media (max-width:560px){
  .jax-hero-viewport{ padding:12px 12px 10px; border-radius:18px; }
  .jax-hero-name{ font-size:13px; }
  .jax-hero-price{ font-size:13px; }
  .jax-hero-arrow{ width:32px; height:32px; font-size:20px; }
}

/* === Dosage Calculator (.jaxcalc) — moved out of the /calculadora/ page content on 2026-10-22 so the CSS can never render as visible page text === */
.jaxcalc{font-family:"Archivo",system-ui,sans-serif;background:#fff;border:1px solid #f3d3df;border-radius:20px;padding:26px;margin:10px 0 30px;box-shadow:0 8px 28px rgba(233,30,99,.08)}
.jaxcalc h2{margin:0;font-size:26px;color:#251219}
.jaxcalc h2 small{display:block;font-size:14px;color:#7c5a66;font-weight:600;margin-top:4px}
.jaxcalc .calc-desc{margin:12px 0 0;color:#7c5a66;font-size:14.5px}
.jaxcalc .calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media (max-width:760px){.jaxcalc .calc-grid{grid-template-columns:1fr}}
.jaxcalc .field label{display:block;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#c2185b;margin-bottom:8px}
.jaxcalc .field input{width:100%;color:#251219;background-color:#fdf1f6;border:1px solid #f3d3df;border-radius:12px;padding:12px 14px;font:inherit;font-weight:600;font-size:15px;box-sizing:border-box}
.jaxcalc .field select{width:100%;appearance:none;-webkit-appearance:none;color:#251219;background-color:#fdf1f6;border:1px solid #f3d3df;border-radius:12px;padding:12px 38px 12px 14px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c2185b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.jaxcalc .syringe{margin-top:22px}
.jaxcalc .syringe svg{width:100%;height:auto;display:block}
.jaxcalc .syr-barrel{fill:#fff;stroke:#7c5a66;stroke-width:1.2}
.jaxcalc .syr-fill{fill:#e91e63}
.jaxcalc .syr-line{stroke:#7c5a66;stroke-width:1}
.jaxcalc .syr-metal{stroke:#7c5a66;stroke-width:2;stroke-linecap:round}
.jaxcalc .syr-txt{fill:#7c5a66;font-family:monospace;font-size:8.5px}
.jaxcalc .results{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
@media (max-width:820px){.jaxcalc .results{grid-template-columns:repeat(2,1fr)}}
.jaxcalc .result{background:#fdf1f6;border:1px solid #f3d3df;border-radius:14px;padding:14px}
.jaxcalc .r-label{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7c5a66}
.jaxcalc .r-value{font-family:monospace;font-weight:600;font-size:21px;margin-top:5px;white-space:nowrap;color:#251219}
.jaxcalc .r-value small{font-size:12px;color:#7c5a66;font-family:"Archivo",sans-serif;font-weight:600}
.jaxcalc .over-note{margin:14px 0 0;color:#8a1c1c;font-weight:700;font-size:14px}
.jaxcalc .note{margin:14px 0 0;color:#7c5a66;font-size:13.5px}