/* =================================================================
   CANADA PEPTIDES — MAIN STYLESHEET
   -----------------------------------------------------------------
   1.  THEME VARIABLES   <- change colors here, everything follows
   2.  BASE / RESET
   3.  SHARED (buttons, eyebrow, pills)
   4.  HERO
   5.  TRUST BAND
   6.  WHY WE'RE DIFFERENT
   7.  PRODUCT SHOWCASE
   8.  SCAN / VERIFY / TRUST
   9.  WOOCOMMERCE OVERRIDES
   10. RESPONSIVE
   ================================================================= */


/* =================================================================
   1. THEME VARIABLES
   ================================================================= */

:root{

  /* ---- BRAND COLORS (change these to re-skin the whole site) ---- */
  --red:        #cf030e;   /* main brand color: buttons, icons, accents */
  --red-dark:   #b60210;   /* button hover */
  --red-line:   #c22b38;   /* thin decorative lines */
  --red-tint:   #fdeaec;   /* pale background behind red text/icons */

  /* ---- NEUTRALS ---- */
  --ink:        #111114;   /* headings */
  --body:       #3c3c43;   /* body text */
  --muted:      #6b6b73;   /* secondary text */
  --black:      #0c0c0e;   /* black bands + footer */
  --soft:       #f8f8fa;   /* light grey section background */
  --line:       #e4e4e9;   /* borders */
  --line-soft:  #ececf0;   /* lighter dividers */

  /* ---- LAYOUT ---- */
  --container:  1280px;
  --pad:        64px;
  --radius:     2px;

  /* ---- TYPE ---- */
  --font: "Figtree", "Segoe UI", Arial, sans-serif;
}


/* =================================================================
   2. BASE / RESET
   ================================================================= */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:#fff;
  color:var(--body);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; color:var(--ink); font-weight:800; }
p{ margin:0; }
a{ text-decoration:none; color:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.red{ color:var(--red); }

/* visually hidden but readable by screen readers / crawlers */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* =================================================================
   3. SHARED
   ================================================================= */

.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--red);
  line-height:1;
  margin-bottom:22px;
}
.eyebrow--sm{ font-size:11px; margin-bottom:15px; }

/* ---- buttons ---- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  height:52px;
  padding:0 26px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.085em;
  text-transform:uppercase;
  white-space:nowrap;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--primary{
  background:var(--red);
  color:#fff;
  border:1px solid var(--red);
}
.btn--primary:hover,
.btn--primary:focus-visible{
  background:var(--red-dark);
  border-color:var(--red-dark);
  color:#fff;
}

.btn--ghost{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn--ghost:hover,
.btn--ghost:focus-visible{
  border-color:var(--red);
  color:var(--red);
}

.btn--block{ display:flex; width:100%; }
.btn--sm{ height:44px; padding:0 22px; font-size:11.5px; }
.btn__arrow{ width:20px; height:14px; flex:none; }

/* ---- pills ---- */

.pill{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1;
}
.pill--outline{
  color:var(--red);
  background:#fff;
  border:1px solid #f2bcc1;
  border-radius:3px;
  padding:8px 11px;
}
.pill--solid{
  color:var(--red);
  background:var(--red-tint);
  border-radius:999px;
  padding:7px 14px;
  font-size:11.5px;
}


/* =================================================================
   4. HERO
   ================================================================= */

.hero{ background:#fff; padding:36px 0 26px; }

.hero__grid{
  display:grid;
  grid-template-columns:400fr 498fr;
  column-gap:30px;
  align-items:center;
}

.hero__title{
  font-size:60px;
  line-height:1.12;
  letter-spacing:-.012em;
  margin-bottom:38px;
}

.hero__lead{
  font-size:20px;
  line-height:1.63;
  color:#2f2f36;
  margin-bottom:42px;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:25px; }
.hero__actions .btn{ height:52px; }
.hero__actions .btn--ghost{ padding:0 30px; }

.hero__figure{ width:100%; }

.hero__diagram{
  display:block;
  width:100%;
  height:auto;
}


/* =================================================================
   5. TRUST BAND
   ================================================================= */

.band{ background:var(--black); color:#fff; padding:31px 0; }

.band__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.band__item{
  display:flex;
  align-items:center;
  gap:26px;
}
.band__item:first-child{ padding-left:82px; padding-right:24px; }
.band__item:last-child{ border-left:1px solid #2b2b31; padding-left:57px; }

.band__icon{ flex:none; width:52px; height:52px; color:var(--red); }
.band__icon svg{ width:100%; height:100%; display:block; }

.band__text h2{
  font-size:19.5px;
  font-weight:700;
  color:#fff;
  line-height:1.3;
  margin-bottom:9px;
}
.band__text p{
  font-size:14.5px;
  line-height:1.62;
  color:#e3e3e7;
}


/* =================================================================
   6. WHY WE'RE DIFFERENT
   ================================================================= */

.features{ background:#fefefe; padding:46px 0 45px; }

.section-head{ text-align:center; margin-bottom:35px; }
.section-head .eyebrow{ margin-bottom:19px; }

.section-title{
  font-size:45px;
  line-height:1.1;
  letter-spacing:-.015em;
  margin-bottom:12px;
}

.section-sub{
  font-size:17.5px;
  line-height:1.5;
  color:#4a4a52;
}

.features__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.feature{
  text-align:center;
  padding:0 24px;
  border-left:1px solid var(--line-soft);
}
.feature:first-child{ border-left:0; }

.feature__icon{
  display:block;
  height:56px;
  margin:0 auto 25px;
  color:var(--red);
}
.feature__icon svg{ height:100%; width:auto; margin-inline:auto; display:block; }

.feature h3{
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  margin-bottom:19px;
}
.feature p{
  font-size:14.5px;
  line-height:1.79;
  color:#43434b;
}


/* =================================================================
   7. PRODUCT SHOWCASE
   ================================================================= */

.product{ background:var(--soft); padding:36px 0 32px; }

.product__grid{
  display:grid;
  grid-template-columns:218fr 325fr 334fr;
  column-gap:27px;
  align-items:start;
}

.product__media{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  padding:13px;
}
.product__media img{ width:100%; }

.product__info{ padding-top:4px; }

.product__headline{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:25px;
}
.product__headline h2{
  font-size:35px;
  letter-spacing:-.02em;
  line-height:1;
}

.product__subtitle{
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  margin-bottom:16px;
}

.product__desc{
  font-size:14px;
  line-height:1.72;
  color:#43434b;
  max-width:350px;
  margin-bottom:22px;
}

.speclist{ margin-bottom:26px; }
.speclist li{
  display:flex;
  align-items:baseline;
  gap:14px;
  font-size:14px;
  line-height:1.55;
  color:#33333a;
  padding:4px 0;
}
.speclist svg{
  flex:none;
  width:15px;
  height:11px;
  color:var(--red);
  transform:translateY(1px);
}

.product__actions{ display:flex; flex-wrap:wrap; gap:16px; }
.product__actions .btn{ height:46px; padding:0 24px; }

/* ---- batch card ---- */

.batchcard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  padding:6px 26px 24px;
}

.batchcard__rows{ margin:0; }

.batchcard__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
}

.batchcard__row dt{ font-size:14px; color:#3a3a42; }
.batchcard__row dd{ margin:0; font-size:14px; color:#1b1b21; text-align:right; }

.coa{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:20px 0 22px;
}

.coa__text h3{
  font-size:14.5px;
  font-weight:700;
  line-height:1.4;
  margin-bottom:9px;
}
.coa__tag{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#9d9da5;
}
.coa__text p{
  font-size:14px;
  line-height:1.62;
  color:#43434b;
}

.coa__icon{
  flex:none;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  background:var(--red-tint);
  border-radius:6px;
  color:var(--red);
}
.coa__icon svg{ width:25px; height:25px; }

.batchcard .btn{ height:46px; }


/* =================================================================
   8. SCAN. VERIFY. TRUST.
   ================================================================= */

.verify{
  position:relative;
  background:var(--black);
  color:#fff;
  padding:40px 0;
  overflow:hidden;
}
.verify::before,
.verify::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:200px;
  background-repeat:no-repeat;
  background-size:cover;
  pointer-events:none;
}
.verify::before{ left:0;  background-image:url("../img/pattern-left.png");  background-position:left center; }
.verify::after{  right:0; background-image:url("../img/pattern-right.png"); background-position:right center; }

.verify__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
}

.verify__lead{
  display:flex;
  align-items:center;
  gap:38px;
  padding-left:30px;
}

.verify__shield{ flex:none; width:90px; height:94px; color:var(--red); }
.verify__shield svg{ width:100%; height:100%; display:block; }

.verify__text h2{
  font-size:27px;
  font-weight:700;
  color:#fff;
  line-height:1.25;
  letter-spacing:-.005em;
  margin-bottom:12px;
}
.verify__text p{
  font-size:14.5px;
  line-height:1.68;
  color:#dcdce2;
}

.verify__steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.verify__steps li{
  text-align:center;
  padding:0 12px;
  border-left:1px solid #2b2b31;
}

.verify__icon{
  display:block;
  height:60px;
  margin:0 auto 14px;
  color:var(--red);
}
.verify__icon svg{ height:100%; width:auto; margin-inline:auto; display:block; }

.verify__steps h3{
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  line-height:1.2;
  margin-bottom:7px;
}
.verify__steps p{
  font-size:13px;
  line-height:1.4;
  color:#d3d3d9;
}


/* =================================================================
   9. WOOCOMMERCE OVERRIDES
   Makes shop / product / cart / checkout match the brand.
   ================================================================= */

/* ---- page width + typography ---- */

.woocommerce-page .site-main,
.woocommerce .site-main{ font-family:var(--font); }

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2{
  font-family:var(--font);
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.012em;
}

/* ---- all Woo buttons ---- */

.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce-page .button{
  background:var(--red) !important;
  color:#fff !important;
  border:1px solid var(--red) !important;
  border-radius:var(--radius) !important;
  font-family:var(--font);
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.085em;
  text-transform:uppercase;
  padding:15px 26px !important;
  line-height:1.1 !important;
  transition:background-color .18s ease, border-color .18s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce-page .button:hover{
  background:var(--red-dark) !important;
  border-color:var(--red-dark) !important;
  color:#fff !important;
}

/* disabled / out of stock */
.woocommerce .button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled]{
  background:#c7c7cf !important;
  border-color:#c7c7cf !important;
  opacity:1 !important;
}

/* secondary buttons (continue shopping, update cart) */
.woocommerce .cart .button[name="update_cart"],
.woocommerce a.button.wc-backward{
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
}
.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover{
  border-color:var(--red) !important;
  color:var(--red) !important;
  background:#fff !important;
}

/* ---- product grid ---- */

.woocommerce ul.products li.product{
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  padding:16px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover{
  border-color:#d6d6de;
  box-shadow:0 12px 28px rgba(12,12,14,.07);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:16px !important;
  font-weight:700;
  color:var(--ink);
  line-height:1.35;
  padding:14px 0 6px !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--ink) !important;
  font-size:17px;
  font-weight:800;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del{
  color:var(--muted) !important;
  font-weight:500;
  opacity:1;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins{
  color:var(--red) !important;
  text-decoration:none;
  font-weight:800;
}

/* sale badge */
.woocommerce span.onsale{
  background:var(--red) !important;
  color:#fff !important;
  border-radius:2px !important;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:7px 12px;
  min-height:0;
  min-width:0;
  line-height:1;
}

/* ---- single product ---- */

.woocommerce div.product .product_title{
  font-size:34px;
  letter-spacing:-.02em;
  margin-bottom:14px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom-color:var(--red);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--red);
}

.woocommerce .quantity .qty{
  border:1px solid var(--line);
  border-radius:var(--radius);
  height:48px;
  font-family:var(--font);
}

/* ---- forms: cart, checkout, login ---- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text{
  font-family:var(--font);
  font-size:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 14px;
  transition:border-color .18s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color:var(--red);
  outline:none;
}

.woocommerce table.shop_table{
  border:1px solid var(--line);
  border-radius:3px;
}
.woocommerce table.shop_table th{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}

/* ---- notices ---- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-top-color:var(--red) !important;
  font-size:14px;
  border-radius:var(--radius);
}
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--red) !important; }

/* ---- breadcrumb + result count ---- */

.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count{
  font-size:13px;
  color:var(--muted);
}
.woocommerce .woocommerce-breadcrumb a:hover{ color:var(--red); }

/* ---- pagination ---- */

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--red) !important;
  color:#fff !important;
}


/* =================================================================
   10. RESPONSIVE
   ================================================================= */

@media (max-width:1240px){
  :root{ --pad:48px; }
  .hero__title{ font-size:54px; }
  .section-title{ font-size:40px; }
  .band__item:first-child{ padding-left:40px; }
  .band__item:last-child{ padding-left:40px; }
  .verify__lead{ padding-left:16px; gap:30px; }
}

@media (max-width:1040px){
  :root{ --pad:32px; }

  .hero{ padding:44px 0 56px; }
  .hero__grid{ grid-template-columns:1fr; row-gap:56px; }
  .hero__title{ font-size:50px; }
  .hero__title br,
  .hero__lead br{ display:none; }
  .hero__lead{ max-width:46ch; }

  .hero__diagram{ max-width:560px; margin-inline:auto; }

  .band{ padding:36px 0; }
  .band__grid{ grid-template-columns:1fr; gap:30px; }
  .band__item,
  .band__item:first-child,
  .band__item:last-child{ padding:0; border-left:0; }
  .band__text p br{ display:none; }

  .features{ padding:56px 0; }
  .section-title{ font-size:36px; }
  .features__grid{ grid-template-columns:repeat(2,1fr); gap:44px 0; }
  .feature:nth-child(odd){ border-left:0; }
  .feature p br{ display:none; }

  .product{ padding:48px 0; }
  .product__grid{ grid-template-columns:1fr 1fr; row-gap:28px; }
  .product__media{ max-width:280px; }
  .batchcard{ grid-column:1 / -1; }

  .verify{ padding:48px 0; }
  .verify__grid{ grid-template-columns:1fr; row-gap:38px; }
  .verify__lead{ padding:0; }
  .verify__steps li:first-child{ border-left:0; }
  .verify__text p br{ display:none; }
  .verify::before,
  .verify::after{ width:110px; opacity:.6; }
}

@media (max-width:640px){
  :root{ --pad:20px; }

  .hero__title{ font-size:38px; }
  .hero__lead{ font-size:18px; }
  .hero__actions{ gap:14px; }
  .hero__actions .btn,
  .product__actions .btn{ width:100%; }

  .section-title{ font-size:29px; }
  .features__grid{ grid-template-columns:1fr; }
  .feature{ border-left:0; padding:0; }

  .product__grid{ grid-template-columns:1fr; }
  .product__media{ max-width:none; }
  .product__headline h2{ font-size:30px; }

  .verify__lead{ flex-direction:column; align-items:flex-start; gap:22px; }
  .verify__steps{ grid-template-columns:repeat(2,1fr); gap:30px 0; }
  .verify__steps li:nth-child(odd){ border-left:0 !important; }
  .verify::before,
  .verify::after{ display:none; }

  .woocommerce div.product .product_title{ font-size:26px; }
}


/* =================================================================
   11. WOOCOMMERCE PRODUCT GRID — CENTERED CARDS
   ================================================================= */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  display:flex !important;
  flex-direction:column;
  text-align:center !important;
}

/* image */
.woocommerce ul.products li.product a img{
  margin:0 auto 4px !important;
}

/* title */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  text-align:center !important;
  margin-inline:auto;
}

/* price */
.woocommerce ul.products li.product .price{
  display:block;
  text-align:center !important;
  margin:0 auto 10px !important;
}

/* category list under the price */
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .product__categories{
  text-align:center !important;
}

/* rating stars */
.woocommerce ul.products li.product .star-rating{
  margin:0 auto 10px !important;
  float:none;
}

/* short description, if the theme shows one */
.woocommerce ul.products li.product .woocommerce-product-details__short-description{
  text-align:center !important;
}

/* push the button to the bottom, full width, centered */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:auto auto 0 !important;
  text-align:center !important;
}

/* keep the sale badge in the corner, not centered */
.woocommerce ul.products li.product span.onsale{
  position:absolute;
  left:14px;
  right:auto;
  top:14px;
  margin:0;
}
.woocommerce ul.products li.product{ position:relative; }