/* Fastidious Wellness - shop / product archive cards
   Bordered card, wash image panel, title > category > price, full-bleed Add to Cart. */

:root{
  --fw-ink:#0E2240;
  --fw-teal:#2F8F85;
  --fw-line:#E4E9F0;
  --fw-wash:#F4F7FA;
  --fw-muted:#7A879B;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--fw-line);
  border-radius:14px;
  overflow:hidden;
  padding:0;
  margin-bottom:0;
  text-align:left;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.woocommerce ul.products li.product:hover{
  border-color:#CFDAE8;
  box-shadow:0 14px 34px rgba(14,34,64,.10);
  transform:translateY(-2px);
}

/* image panel */
.woocommerce ul.products li.product .woocommerce-image__wrapper{
  background:var(--fw-wash);
  border-bottom:1px solid var(--fw-line);
  padding:24px;
  margin:0;
}
.woocommerce ul.products li.product .woocommerce-image__wrapper img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  margin:0;
  border-radius:0;
  mix-blend-mode:multiply;
}

/* body */
.woocommerce ul.products li.product .woocommerce-card__header{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:18px 18px 0;
  gap:0;
}

/* title first, then category (DOM order is the reverse) */
.woocommerce ul.products li.product .woocommerce-loop-product__title{order:1;margin:0 0 4px}
.woocommerce ul.products li.product .woocommerce-loop-product__title a{
  font-family:'Archivo',system-ui,sans-serif;
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  color:var(--fw-ink);
  text-decoration:none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover{color:var(--fw-teal)}

.woocommerce ul.products li.product .product__categories{order:2;margin:0 0 12px;padding:0}
.woocommerce ul.products li.product .product__categories a{
  font-family:'Archivo',system-ui,sans-serif;
  font-size:13.5px;
  font-weight:400;
  color:var(--fw-muted);
  text-decoration:none;
  text-transform:none;
  letter-spacing:0;
}
.woocommerce ul.products li.product .product__categories a:hover{color:var(--fw-ink)}

.woocommerce ul.products li.product .price{
  order:3;
  margin:0 0 18px;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:25px;
  font-weight:700;
  color:var(--fw-ink);
  line-height:1.2;
}
.woocommerce ul.products li.product .price del{font-size:16px;font-weight:400;color:var(--fw-muted);opacity:.8}
.woocommerce ul.products li.product .price ins{text-decoration:none}

/* full-bleed Add to Cart pinned to the card bottom */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  order:4;
  margin:auto -18px 0;
  width:calc(100% + 36px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 16px;
  border:0;
  border-radius:0;
  background:var(--fw-ink) !important;
  color:#fff !important;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  text-align:center;
  transition:background .2s ease;
}
.woocommerce ul.products li.product .button:hover{background:var(--fw-teal) !important}

/* cart glyph */
.woocommerce ul.products li.product .button::before{
  content:"";
  flex:0 0 18px;
  width:18px;
  height:18px;
  background-color:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center/contain no-repeat;
}

/* "View cart" link Woo injects after an ajax add */
.woocommerce ul.products li.product .added_to_cart{
  order:5;
  margin:0 -18px;
  min-height:44px;
  background:var(--fw-teal) !important;
  font-size:14px;
}
.woocommerce ul.products li.product .added_to_cart::before{content:none}

/* keep Woo's ajax spinner tidy on a flex button */
.woocommerce ul.products li.product .button.loading{opacity:.75}
.woocommerce ul.products li.product .button.loading::after{margin-left:6px;position:static}

/* grid spacing */
.woocommerce ul.products{gap:26px}

@media (max-width:600px){
  .woocommerce ul.products li.product .woocommerce-card__header{padding:16px 16px 0}
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{margin-left:-16px;margin-right:-16px;width:calc(100% + 32px)}
  .woocommerce ul.products li.product .price{font-size:22px}
}
/* ---- corrections ---- */

/* Shoptimizer prints its own subtitle ("Research Peptide", "Immune Peptide"...).
   Use that as the descriptor under the title; the category is "Peptides" on every
   product, so it is redundant. */
.woocommerce ul.products li.product .ts-product-subtitle{
  order:2;
  margin:0 0 12px;
  padding:0;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:13.5px;
  font-weight:400;
  line-height:1.4;
  color:var(--fw-muted);
}
.woocommerce ul.products li.product .product__categories{display:none}
.woocommerce ul.products li.product .screen-reader-text{order:6}

/* The button was sized with calc(100% + 36px), which resolved wider than the card
   and got clipped. Stretch it instead and let the negative margins do the bleed. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  width:auto;
  align-self:stretch;
  box-sizing:border-box;
}
@media (max-width:600px){
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{width:auto}
}
/* Shoptimizer positions the loop Add-to-cart button absolutely (a hover overlay),
   so it never became a flex item and would not stretch. Put it back in normal flow
   and keep it permanently visible. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  position:static !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  width:auto !important;
  align-self:stretch !important;
  margin:auto -18px 0 !important;
  float:none !important;
}
.woocommerce ul.products li.product .added_to_cart{margin:0 -18px !important}

@media (max-width:600px){
  .woocommerce ul.products li.product .button{margin:auto -16px 0 !important}
  .woocommerce ul.products li.product .added_to_cart{margin:0 -16px !important}
}
/* ---- Elementor Products widget (homepage lineup) ----
   Elementor pads each li.product (0 15px 40px), which pushes the card border away
   from the content and stops the Add-to-Cart bar reaching the card edges.
   Zero it so the widget renders identically to the shop archive. */
.elementor .lineup-shop ul.products li.product,
.elementor .fw-shop-grid ul.products li.product{padding:0;margin:0 0 4px}
.elementor .lineup-shop ul.products,
.elementor .fw-shop-grid ul.products{margin:0}
.elementor .lineup-shop .woocommerce-image__wrapper,
.elementor .fw-shop-grid .woocommerce-image__wrapper{margin:0}

/* the page skin zeroes list/paragraph margins - keep the card's own spacing */
.elementor .lineup-shop li.product .woocommerce-loop-product__title{margin:0 0 4px}
.elementor .lineup-shop li.product .ts-product-subtitle{margin:0 0 12px}
.elementor .lineup-shop li.product .price{margin:0 0 18px}
/* Elementor's widget stylesheet loads after this file, so an equal-specificity rule
   loses the tie. Force the reset for the lineup grid only. */
.elementor .lineup-shop ul.products li.product{padding:0 !important;margin:0 !important}
.elementor .lineup-shop ul.products{gap:26px !important;margin:0 !important}
/* ---- related / upsell loops (single product page) ----
   The theme lays these out with flex: at desktop the 300px cards plus our 26px gaps
   overflowed the 1200px box, so the 4th product wrapped onto its own row; below 768px
   it turned into a horizontal scroller showing one card at a time. Both loops are now
   a real grid, so they behave exactly like the shop archive. */
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px !important;
  overflow:visible !important;
  flex-wrap:wrap;
  margin:0;
}
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  flex:none !important;
  margin:0 !important;
  padding:0 !important;
}
@media (max-width:1024px){
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px !important}
}

/* Card padding and button bleed now derive from one variable. The theme overrides
   .woocommerce-card__header padding at some breakpoints (15px at 768), while the
   Add-to-Cart bar bled by a hard-coded -18px, making the button 4px wider than the card. */
.woocommerce ul.products li.product{--fw-pad:18px}
.woocommerce ul.products li.product .woocommerce-card__header{padding:var(--fw-pad) var(--fw-pad) 0 !important}
.woocommerce ul.products li.product .button{margin:auto calc(-1 * var(--fw-pad)) 0 !important}
.woocommerce ul.products li.product .added_to_cart{margin:0 calc(-1 * var(--fw-pad)) !important}
@media (max-width:600px){
  .woocommerce ul.products li.product{--fw-pad:14px}
}

/* ---- fix: related/upsell grid ran past the viewport ----
   The theme still applied its carousel padding (5px 15px 20px 18.75px) and a fixed
   width to ul.products, so on a 390px screen the list ended at 404px and the right
   column was pushed off-screen with no gutter. Carousel leftovers cleared. */
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products{
  width:auto !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box;
}

/* ---- compact card, so four sit comfortably in a row ---- */
.woocommerce ul.products li.product .woocommerce-image__wrapper{padding:16px}
.woocommerce ul.products li.product .woocommerce-loop-product__title a{font-size:15.5px;line-height:1.3}
.woocommerce ul.products li.product .ts-product-subtitle{font-size:12.5px;margin:0 0 10px}
.woocommerce ul.products li.product .price{font-size:21px;margin:0 0 14px}
.woocommerce ul.products li.product .button{min-height:48px;font-size:14px;gap:8px}
.woocommerce ul.products li.product .button::before{width:16px;height:16px;flex:0 0 16px}
.woocommerce ul.products li.product{--fw-pad:16px}

@media (max-width:600px){
  .woocommerce ul.products li.product{--fw-pad:14px}
  .woocommerce ul.products li.product .woocommerce-image__wrapper{padding:12px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title a{font-size:14.5px}
  .woocommerce ul.products li.product .price{font-size:19px}
  .woocommerce ul.products li.product .button{min-height:46px;font-size:13.5px}
}

/* ---- lineup grid parity ----
   The homepage lineup was dropping to 1 card per row on mobile while the shop and
   related grids showed 2. Same grid everywhere: 4 -> 3 -> 2. */
.elementor .lineup-shop ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:26px !important;
}
@media (max-width:1024px){
  .elementor .lineup-shop ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:768px){
  .elementor .lineup-shop ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important}
}

/* ---- breathing room around related / upsell loops ----
   These sections carry no vertical padding on desktop (0px 41.89px), and zeroing the
   ul margin removed the only bottom spacing they had - the last row of cards ended up
   flush against the footer. Padding set on the section so the side gutters survive. */
.woocommerce .related.products,
.woocommerce .upsells.products{
  padding-top:64px !important;
  padding-bottom:80px !important;
  border-top:1px solid var(--fw-line);
  margin-top:56px !important;
}
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2{
  margin:0 0 28px !important;
  font-family:Newsreader,Georgia,serif;
  font-weight:400;
  font-size:30px;
  line-height:1.25;
  color:var(--fw-ink);
}
@media (max-width:768px){
  .woocommerce .related.products,
  .woocommerce .upsells.products{padding-top:40px !important;padding-bottom:52px !important;margin-top:36px !important}
  .woocommerce .related.products > h2,
  .woocommerce .upsells.products > h2{font-size:24px;margin:0 0 20px !important}
}

/* ---- the card must stay a flex column ----
   Elementor's product widget stylesheet loads after this file and ties on specificity,
   forcing li.product back to display:block. In a block box margin-top:auto does nothing,
   so the Add-to-Cart bar stopped being pinned to the card bottom - and because the grid
   still stretches every card to the tallest in its row, any card with a shorter subtitle
   was left with dead white space under its button. */
.woocommerce ul.products li.product,
.elementor .lineup-shop ul.products li.product,
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}
.woocommerce ul.products li.product .woocommerce-card__header,
.elementor .lineup-shop ul.products li.product .woocommerce-card__header{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}
.woocommerce ul.products li.product .button,
.elementor .lineup-shop ul.products li.product .button{
  margin-top:auto !important;
}

/* keep the descriptor to two lines so cards in a row stay visually even */
.woocommerce ul.products li.product .ts-product-subtitle{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}

/* ---- card meta: tag / blurb / specs ----
   Same card design, just more information. Flex order keeps the sequence:
   tag > title > subtitle > blurb > specs > price > add to cart. */

.woocommerce ul.products li.product .fw-tag{order:0;display:inline-flex;align-items:center;gap:6px;
  margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1}
.woocommerce ul.products li.product .fw-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.woocommerce ul.products li.product .fw-tag--teal{color:#2F8F85}
.woocommerce ul.products li.product .fw-tag--blue{color:#1A4FC4}
.woocommerce ul.products li.product .fw-tag--green{color:#1F8A4C}
.woocommerce ul.products li.product .fw-tag--amber{color:#C2740A}
.woocommerce ul.products li.product .fw-tag--violet{color:#6D3FC4}
.woocommerce ul.products li.product .fw-tag--rose{color:#C43F6D}

.woocommerce ul.products li.product .woocommerce-loop-product__title{order:1}
.woocommerce ul.products li.product .ts-product-subtitle{order:2}

.woocommerce ul.products li.product .fw-blurb{order:3;margin:0 0 12px;
  font-size:12.5px;line-height:1.5;color:#5A6B85}

.woocommerce ul.products li.product .fw-specs{order:4;display:grid;grid-template-columns:1fr 1fr;
  gap:0;margin:0 0 14px;padding-top:12px;border-top:1px solid #E4E9F0}
.woocommerce ul.products li.product .fw-spec{display:flex;flex-direction:column;gap:4px;padding-right:10px}
.woocommerce ul.products li.product .fw-spec + .fw-spec{padding-left:12px;border-left:1px solid #E4E9F0;padding-right:0}
.woocommerce ul.products li.product .fw-spec__l{font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#8A99B0;line-height:1}
.woocommerce ul.products li.product .fw-spec__v{font-size:13px;font-weight:600;color:var(--fw-ink);line-height:1.2}

.woocommerce ul.products li.product .price{order:5}
.woocommerce ul.products li.product .button{order:6}

@media (max-width:600px){
  .woocommerce ul.products li.product .fw-tag{font-size:9px;margin-bottom:8px}
  .woocommerce ul.products li.product .fw-blurb{font-size:11.5px;margin-bottom:10px}
  .woocommerce ul.products li.product .fw-specs{padding-top:10px;margin-bottom:12px}
  .woocommerce ul.products li.product .fw-spec__v{font-size:12px}
  .woocommerce ul.products li.product .fw-spec__l{font-size:8.5px}
  .woocommerce ul.products li.product .fw-spec + .fw-spec{padding-left:8px}
}

/* ---- shop archive grid: 4 across, matching the homepage lineup ---- */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:26px !important;
  overflow:visible !important;
}
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  float:none !important;
  clear:none !important;
}
@media (max-width:1024px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:768px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important}
}

/* ---- full-width shop (sidebar removed) ---- */
body.fw-no-sidebar .widget-area,
body.fw-no-sidebar #secondary{display:none !important}
body.fw-no-sidebar #primary,
body.fw-no-sidebar .content-area,
body.fw-no-sidebar .site-main{
  width:100% !important;
  max-width:100% !important;
  flex:1 1 100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  float:none !important;
}

/* ---- one card per row on phones ----
   Applies to all three grids: homepage lineup, shop archive, related/upsells.
   Tablets keep two across; phones (<=600px) get one. */
@media (max-width:600px){
  .elementor .lineup-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  /* full-width card: give the image panel a sane height so it does not tower */
  .woocommerce ul.products li.product .woocommerce-image__wrapper{padding:18px}
  .woocommerce ul.products li.product .woocommerce-image__wrapper img{max-height:220px;object-fit:contain}
  .woocommerce ul.products li.product{--fw-pad:16px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title a{font-size:16px}
  .woocommerce ul.products li.product .price{font-size:21px}
  .woocommerce ul.products li.product .fw-blurb{font-size:12.5px}
  .woocommerce ul.products li.product .fw-spec__v{font-size:13px}
  .woocommerce ul.products li.product .fw-spec__l{font-size:9.5px}
}

/* BREADCRUMBS v1
   WooCommerce native breadcrumbs enabled via Shoptimizer's display_breadcrumbs flag.
   Renders inside .woocommerce-breadcrumb on shop archive, category, and single product
   pages. Fastidious palette + calmer spacing so it reads as connective tissue rather
   than a headline. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb{
  font-size:13px;
  line-height:1.5;
  color:var(--fw-muted);
  letter-spacing:.01em;
  margin:0 0 22px;
  padding:10px 0 12px;
  border-bottom:1px solid var(--fw-line);
}
.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a{
  color:var(--fw-ink);
  text-decoration:none;
  transition:color .18s ease;
}
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-page .woocommerce-breadcrumb a:hover{
  color:var(--fw-teal);
}
/* Last crumb (current page) — WooCommerce outputs the current item as plain text after
   the final separator; nothing to select directly, so we lean on the color above and
   let the separator do the rhythm. */

/* SINGLE PRODUCT BREADCRUMB CONTAINER FIX v2
   Theme zeroes .col-full padding on single-product pages at 993px+ because each
   content section (.product-details-wrapper etc.) rebuilds its own centered
   container. Breadcrumb didn't have one, so it hit the viewport edge. Rebuild
   the same container here: max-width:1170px centered, 2.617924em side padding
   from 993px up. Below 993px, .col-full keeps its 1em padding, so no extra
   horizontal padding here (would double up). */
.single-product .woocommerce-breadcrumb{
  max-width:1170px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:28px;
}
@media (min-width:993px){
  .single-product .woocommerce-breadcrumb{
    padding-left:2.617924em;
    padding-right:2.617924em;
  }
}
/* Wash background covers the crumb strip + the gap above product content */
.single-product .site-content{background:var(--fw-wash)}
.single-product .woocommerce-breadcrumb{border-bottom:0}

@media (max-width:600px){
  .woocommerce .woocommerce-breadcrumb,
  .woocommerce-page .woocommerce-breadcrumb{
    font-size:12px;
    margin:0 0 16px;
    padding:8px 0 10px;
  }
}