/*
Theme Name: Bio Cotton
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Fresh Digital
Author URI: https://freshdigital.co.th/
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1787273294
Updated: 2026-08-21 00:48:14

*/

body {
  max-width: 1920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Begin Global Style */
.elementor-widget-text-editor *:last-child {
  margin-bottom: 0 !important;
}

/* End Global Style */

/* Class: .banner-carousel */
.banner-carousel.elementor-widget-image-carousel {
  line-height: 0 !important;
}

.banner-carousel.elementor-widget-image-carousel .swiper-pagination.swiper-pagination-bullets {
  bottom: 25px;
}

/* Class: .testimonial-carousel */
.testimonial-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__footer {
  flex-direction: row !important;
  gap: 20px !important;
}

.testimonial-carousel.elementor-widget-testimonial-carousel .elementor-testimonial .elementor-testimonial__cite {
  align-items: flex-start;
  margin-top: 0 !important;
}

.testimonial-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__image {
  line-height: 0;
}

.testimonial-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__image>img {
  border: 1px solid #8AABDB;
}

.testimonial-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__name {
  text-align: left;
}

/* Class: .product-category-grid */
.product-category-grid .woocommerce ul.products.columns-3 {
  display: grid !important;
  align-items: stretch;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-category-grid .woocommerce ul.products.columns-3::before,
.product-category-grid .woocommerce ul.products.columns-3::after {
  content: none !important;
  display: none !important;
}

.product-category-grid .woocommerce ul.products.columns-3 li.product-category {
  position: relative;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid #e2e9f3;
  border-radius: 12px;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}

.product-category-grid .woocommerce ul.products.columns-3 li.product-category:hover {
  box-shadow: 0 8px 24px rgba(16, 38, 77, .08);
  transform: translateY(-2px);
}

.product-category-grid .woocommerce ul.products.columns-3 li.product-category a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.product-category-grid .woocommerce ul.products.columns-3 li.product-category>a>img {
  width: 100% !important;
  height: 360px !important;
  max-width: 360px !important;
  object-fit: contain !important;
  margin: 0 auto 20px !important;
  display: block !important;
}

.product-category-grid ul.products li.product-category .woocommerce-loop-category__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #00358E;
  margin: 0;
}

.product-category-grid .woocommerce-loop-category__title mark.count {
  display: none;
}

.product-category-grid .category-name-subtitle {
  display: block;
  margin-top: 0;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
  color: #8493a8;
}

@media (max-width: 1024px) {
  .product-category-grid .woocommerce ul.products.columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .product-category-grid .woocommerce ul.products.columns-3 {
    grid-template-columns: 1fr;
  }
}

.bc-category-search-wrap {
  max-width: 320px;
}

.bc-category-search-wrap input {
  width: 100%;
  padding: 12px 20px 12px 44px;
  border: 1px solid #e2e9f3;
  border-radius: 100px;
  font-size: 14px;
  color: #1c2b3d;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238493a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 16px center;
  outline: none;
}

.bc-category-search-wrap input:focus {
  border-color: #00358E;
}

/* Fresh Digital: on phones the search box goes full width so the longer placeholder
   ("Search Categories in English") is never clipped */
@media (max-width: 767px) {
  .bc-category-search-wrap {
    max-width: 100%;
    width: 100%;
  }
  /* the Elementor widget holding it is set to ~70% width on the Products pages */
  .elementor-widget-shortcode:has(.bc-category-search-wrap) {
    width: 100% !important;
    max-width: 100% !important;
  }
  .bc-category-search-wrap input {
    padding-right: 14px;
    text-overflow: ellipsis;
  }
}

.bc-category-load-more-wrap {
  text-align: center;
  margin-top: 32px;
}

.bc-category-load-more {
  padding: 12px 32px;
  border: 1px solid #00358E;
  border-radius: 100px;
  background: #fff;
  color: #00358E;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.bc-category-load-more:hover {
  background: #00358E;
  color: #fff;
}

.bc-category-empty {
  text-align: center;
  padding: 48px 24px;
  color: #b4b4b4;
  font-size: 15px;
}

/* Products recommended CSS */
.bc-recommended-carousel {
  position: relative;
}

.bc-rec-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 12px;
  cursor: grab;
}

.bc-rec-track::-webkit-scrollbar {
  display: none;
}

.bc-rec-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.bc-rec-slide {
  flex: 0 0 calc(25% - 18px);
  scroll-snap-align: start;
}

.bc-rec-card,
.bc-rec-card img {
  -webkit-user-drag: none;
  user-drag: none;
}

.bc-rec-card {
  position: relative;
  display: block;
  height: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid #e2e9f3;
  border-radius: 12px;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.bc-rec-card:hover {
  box-shadow: 0 8px 24px rgba(16, 38, 77, .08);
  transform: translateY(-2px);
}

.bc-rec-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  -webkit-user-drag: none;
  user-drag: none;
}

.bc-rec-image {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.bc-rec-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bc-rec-title {
  font-size: 20px;
  font-weight: 700;
  color: #00358E;
  margin-bottom: 4px;
}

.bc-rec-category {
  position: relative;
  z-index: 2;
  color: #b4b4b4;
  margin-bottom: 4px;
}

.bc-rec-category a {
  color: #b4b4b4;
  text-decoration: none;
}

.bc-rec-category a:hover {
  color: #a7c6ed;
}

.bc-rec-type {
  font-size: 14px;
  color: #00358e;
  margin-bottom: 8px;
}

.bc-rec-more {
  font-size: 14px;
  color: #a7c6ed;
  text-decoration: underline;
}

.bc-rec-price {
  position: relative;
  z-index: 2;
  font-size: 16px;
  font-weight: 700;
  color: #00358e;
  margin-bottom: 8px;
}

.bc-rec-price .woocommerce-Price-amount {
  color: inherit;
}

/* Regular price struck through, sale price in front -- Woo already
   wraps these in <del>/<ins>, just theme the colors to match. */
.bc-rec-price del {
  font-weight: 400;
  color: #b4b4b4;
  margin-right: 6px;
}

/* Single Product page's native Price widget -- same colors as the card
   price above, but the widget ships its own default styling (blue
   underlined <ins>, like a link), so this needs !important to win over
   it, same as the other Elementor-widget color fights on this page. */
.elementor-widget-woocommerce-product-price .price {
  color: #00358e !important;
}

.elementor-widget-woocommerce-product-price .price del {
  color: #b4b4b4 !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  margin-right: 6px;
}

.elementor-widget-woocommerce-product-price .price ins {
  color: #00358e !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.bc-rec-price ins {
  text-decoration: none;
}

.bc-rec-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 24px;
}

.bc-rec-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #d7e5f6 !important;
  cursor: pointer;
}

.bc-rec-dot:hover,
.bc-rec-dot:focus {
  background: #d7e5f6 !important;
}

.bc-rec-dot.is-active,
.bc-rec-dot.is-active:hover {
  background: #00358E !important;
}

/* Fresh Digital: brand logo on category cards (top-left, like client mock) */
.product-category-grid ul.products li.product-category {
  position: relative;
}
.product-category-grid ul.products li.product-category .bc-cat-brand {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  display: block;
  line-height: 0;
  pointer-events: none;
}
.product-category-grid ul.products li.product-category .bc-cat-brand img.bc-cat-brand-logo {
  display: block;
  max-height: 42px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
}
@media (max-width: 767px) {
  .product-category-grid ul.products li.product-category .bc-cat-brand {
    top: 16px;
    left: 16px;
  }
  .product-category-grid ul.products li.product-category .bc-cat-brand img.bc-cat-brand-logo {
    max-height: 48px;
    max-width: 160px;
  }
}

/* Fresh Digital: match hero banner dots on mobile (6px, 2px gap) */
@media (max-width: 767px) {
  .bc-rec-dots { gap: 2px; }
  .bc-rec-dot { width: 6px; height: 6px; }
}

/* Product grid for the Category Archive template — [bc_category_products] */
.bc-cat-products-grid {
  display: grid;
  grid-template-columns: repeat(var(--bc-cat-products-columns, 3), 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .bc-cat-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .bc-cat-products-grid {
    grid-template-columns: 1fr !important;
  }
}

.bc-cat-products-item {
  height: 100%;
}

.bc-rec-brand {
  margin-bottom: 8px;
}

.bc-rec-brand-logo {
  display: block;
  max-height: 42px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.woocommerce-pagination {
  margin-top: 32px;
  text-align: center;
}

.woocommerce-pagination ul.page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  clear: none !important;
  white-space: normal !important;
}

.woocommerce-pagination ul.page-numbers li {
  margin: 0 !important;
  border: none !important;
  float: none !important;
}

.woocommerce-pagination .page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 8px !important;
  border: 1px solid #e2e9f3 !important;
  border-radius: 100px !important;
  background: #fff !important;
  color: #00358E !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  line-height: normal !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.woocommerce-pagination a.page-numbers:hover {
  background: #00358E !important;
  color: #fff !important;
  border-color: #00358E !important;
}

.woocommerce-pagination .page-numbers.current {
  background: #00358E !important;
  border-color: #00358E !important;
  color: #fff !important;
}

.woocommerce-pagination .page-numbers.dots {
  border: none !important;
  background: none !important;
  color: #8493a8 !important;
}

/* [bc_product_search] */
.bc-product-search-wrap {
  position: relative;
  max-width: 320px;
  margin-bottom: 24px;
}

.bc-product-search-input {
  width: 100% !important;
  padding: 12px 20px 12px 44px !important;
  border: 1px solid #e2e9f3 !important;
  border-radius: 100px !important;
  font-size: 14px;
  color: #1c2b3d;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238493a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 16px center !important;
  outline: none;
  box-sizing: border-box !important;
}

.bc-product-search-input:focus {
  border-color: #00358E;
}

.bc-product-search-preview {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #e2e9f3;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 38, 77, .12);
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
}

.bc-product-search-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  color: #1c2b3d;
}

.bc-product-search-preview-item:hover {
  background: #f4f7fb;
}

.bc-product-search-preview-thumb {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-product-search-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bc-product-search-preview-title {
  font-size: 14px;
}

.bc-product-search-lang-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #e2e9f3;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 38, 77, .12);
  padding: 16px;
  text-align: center;
}

.bc-product-search-lang-popup p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #1c2b3d;
}

.bc-product-search-lang-link,
.bc-product-search-lang-link:hover,
.bc-product-search-lang-link:focus {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 100px;
  background: #00358E;
  color: #fff !important;
  font-size: 14px;
  text-decoration: none;
  /* Elementor's global button/link hover animation (a shrink/scale
     transform) was leaking onto this <a> the same way its global
     typography/link-color leaks onto other custom shortcode elements in
     this file -- pin both transform and a real transition here so the
     only thing that visibly changes on hover is the background color,
     smoothly, instead of an inherited instant scale-down. */
  transform: none !important;
  transition: background-color .15s ease;
}

.bc-product-search-lang-link:hover {
  background: #00256a;
}

/* [bc_product_filter] */
.bc-product-filter-group {
  margin-bottom: 20px;
}

.bc-product-filter-group:last-child {
  margin-bottom: 0;
}

.bc-product-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e9f3;
}

.bc-product-filter-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: #00358E;
  cursor: pointer;
  user-select: none;
}

.bc-product-filter-title::after {
  content: '\25BE';
  display: inline-block;
  margin-left: 6px;
  font-size: 24px;
  color: #00358E;
  transition: transform .2s ease;
}

.bc-product-filter-group.is-collapsed .bc-product-filter-title::after {
  transform: rotate(-90deg);
}

.bc-product-filter-body {
  overflow: hidden;
}

.bc-product-filter-group.is-collapsed .bc-product-filter-body {
  display: none;
}

.bc-product-filter-clear {
  border: none !important;
  background: none !important;
  color: #8493a8 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.bc-product-filter-clear:hover {
  color: #00358E !important;
}

.bc-product-filter-option {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: #00358E;
  margin-bottom: 16px;
  cursor: pointer;
}

.bc-cat-products-empty {
  text-align: center;
  padding: 48px 24px;
  color: #b4b4b4;
  font-size: 15px;
}

.bc-product-filter-input {
  width: 16px;
  height: 16px;
  accent-color: #a7c6ed;
  cursor: pointer;
}

/* Mobile off-canvas filter panel -- hidden on desktop (the panel just
   renders inline, exactly as before), only takes over below the same
   767px breakpoint used elsewhere in this stylesheet. Everything here is
   under its own bc-product-filter-* / bc-filter-panel-open names (never
   reusing anything Elementor's own header hamburger menu relies on) so
   the two off-canvas panels can never collide, even if both happened to
   be triggered close together. */
.bc-product-filter-toggle {
  display: none;
}

.bc-product-filter-overlay {
  display: none;
}

.bc-product-filter-panel-head {
  display: none;
}

@media (max-width: 767px) {
  .bc-product-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    /* Hello Elementor's theme-wide default `button` style (its accent
       color, in this site's case a pink/magenta from the Elementor Kit)
       otherwise wins over the plain properties above on a bare <button>
       element -- !important here pins this to the site's own navy/white
       palette instead, same fix pattern already used for
       .bc-product-search-lang-link's inherited hover elsewhere in this
       file. */
    border: 1px solid #00358E !important;
    border-radius: 100px !important;
    background: #fff !important;
    color: #00358E !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
  }

  .bc-product-filter-toggle:hover,
  .bc-product-filter-toggle:focus {
    border-color: #00358E !important;
    background: #fff !important;
    color: #00358E !important;
  }

  .bc-product-filter-toggle::before {
    content: '';
    width: 16px;
    height: 12px;
    flex: 0 0 16px;
    background-color: #00358E;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 1a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1Zm3 5a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm3 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 1a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1Zm3 5a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm3 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .bc-product-filter-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(16, 38, 77, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 100000;
  }

  .bc-product-filter.is-open .bc-product-filter-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .bc-product-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: #fff;
    padding: 20px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 100001;
  }

  .bc-product-filter.is-open .bc-product-filter-panel {
    transform: translateX(0);
  }

  .bc-product-filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e9f3;
  }

  .bc-product-filter-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: #00358E;
  }

  .bc-product-filter-close {
    border: none !important;
    background: none !important;
    color: #00358E !important;
    font-size: 26px;
    line-height: 1;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    padding: 0;
  }

  .bc-product-filter-close:hover,
  .bc-product-filter-close:focus {
    background: none !important;
    color: #00358E !important;
  }

  body.bc-filter-panel-open {
    overflow: hidden;
  }
}

/* Class: .cta-btn-icon */
.cta-btn-icon .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
}

.cta-btn-icon .elementor-button-icon {
  font-size: 29px;
}

@media (max-width: 767px) {
  .bc-product-search-wrap {
    max-width: 100%;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .bc-rec-slide {
    flex-basis: calc(50% - 12px);
  }

  .bc-rec-title {
    font-size: 18px;
  }

  .product-category-grid ul.products li.product-category .woocommerce-loop-category__title {
    font-size: 18px;
  }

  .testimonial-carousel.elementor-widget-testimonial-carousel .elementor-testimonial {
    flex-direction: column !important;
    align-items: center;
  }

  .testimonial-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__footer {
    align-items: center;
  }
}

@media (max-width: 767px) {
  .bc-rec-slide {
    flex-basis: calc(50% - 8px); /* Fresh Digital: 2 cards per row on mobile */
  }

  .bc-rec-track {
    gap: 16px;
  }

  .bc-rec-title {
    font-size: 16px;
  }

  .product-category-grid ul.products li.product-category .woocommerce-loop-category__title {
    font-size: 16px;
  }
}

.bc-product-certifications {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.bc-product-cert-img {
  max-width: 160px;
  height: auto;
  cursor: zoom-in;
  transition: transform .2s ease;
}

.bc-product-certifications a:hover .bc-product-cert-img {
  transform: scale(1.03);
}

/*
 * Single Product tabs (Product Details / Features & How to Use /
 * Certifications) -- these were still rendering with WooCommerce's
 * default jQuery-UI-style "folder tab" look (white box behind the active
 * tab, washed-out near-invisible inactive tabs), which doesn't match the
 * mockup's flat style: no box, no per-tab underline (dropped from the
 * design), active tab told apart from the rest purely by weight (700)
 * and full color, inactive tabs a lighter but still readable navy, and
 * one thin divider spanning the full row underneath all of them.
 */
.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px;
  list-style: none !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(0, 23, 131, .15) !important;
  background: none !important;
}

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a {
  display: block;
  padding: 0 0 14px !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  background: none !important;
  transition: color .15s ease;
}

/* White at rest is the mockup's intended look for inactive tabs -- only
   hover gets a color change, as a hint the tab is clickable. */
.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li:not(.active) a:hover {
  color: rgba(0, 23, 131, .75) !important;
}

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li.active a {
  color: #001783 !important;
  font-weight: 700 !important;
}

.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #001783;
}

.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel h2 {
  display: none;
}

.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel h3 {
  color: #001783;
  font-size: 20px;
  margin: 0 0 12px;
}

/*
 * ANY <table> pasted into a tab panel (Product Details / Description,
 * Features & How to Use, Certifications) gets this styling automatically
 * -- no inline style="" needed in the pasted HTML anymore, so future
 * tables the client adds just inherit it for free.
 */
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  background: transparent;
}

/* The theme's own reset.css zebra-stripes every table's odd rows with a
   translucent gray fill -- these tables sit on a colored panel
   background, not white, so that stripe reads as a visible patch. Force
   every cell back to transparent regardless of row position. */
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table tbody tr>td,
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table tbody tr>th {
  background: transparent !important;
}

.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table th,
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table td {
  padding: 16px;
  text-align: center;
  vertical-align: middle;
  color: #001783;
  border: 1px solid #fff;
}

.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table thead th {
  font-weight: 700;
}

/* Data rows for "Product Size" / "Unit / Pack" read left-aligned per the
   mockup -- header labels and the "Product" name column stay centered
   (the default above), this only overrides the plain data cells. */
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table tbody td:not(.bc-table-name) {
  text-align: left;
}

/* First column ("Product") stays narrower than the two data columns,
   which split the rest evenly (50/50 of what's left), instead of an even
   3-way split.
   ⚠ Can't do this with :first-child -- the "Product" cell only exists
   ONCE, spanning several rows via rowspan, so in every OTHER row the
   *actual* first <td> child is really the "Product Size" cell, not
   "Product" -- :first-child would (and did) make those bold too. Needs
   the "bc-table-name" class on that one cell instead; see the updated
   Description template. */
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table th.bc-table-name,
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table td.bc-table-name {
  width: 20%;
  font-weight: 700;
}

/* "Product Size" and "Unit / Pack" -- the 2nd and 3rd column. Both get
   the SAME width, so it doesn't matter that rowspan makes ":nth-child(2)"
   land on a different actual column in rows after the first (see note
   above) -- either way it resolves to the same 40%. */
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table th:nth-child(2),
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table td:nth-child(2),
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table th:nth-child(3),
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table td:nth-child(3) {
  width: 40%;
  font-weight: 400;
}

@media (max-width: 767px) {

  /* Scroll sideways instead of squeezing 3 columns into a phone screen. */
  .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table th,
  .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel table td {
    padding: 10px 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* Fresh Digital: keep the 3 tab titles (Product Details / Features & How to Use /
     Certifications) on ONE line on mobile -- scroll sideways instead of wrapping
     onto a second row. Lives here because this selector outranks the widget's
     custom CSS in Elementor. */
  .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs {
    flex-wrap: nowrap !important;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs::-webkit-scrollbar { display: none; }
  .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a {
    font-size: 13px !important;
    padding-bottom: 10px !important;
  }
}

/* "Features" content was sitting almost flush against the "How to Use"
   heading right below it -- give each field block breathing room before
   whatever comes next. */
.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel .bc-product-wysiwyg-field {
  margin-bottom: 28px;
}

/*
 * The current-page crumb (last item, no link -- wrapped in <strong>) was
 * rendering at a different size than the clickable crumbs before it: the
 * links get their size from the font-size set on the Breadcrumbs widget
 * itself (Elementor Style panel), but <strong> has no rule of its own, so
 * it inherits from a higher ancestor's Global Typography preset instead --
 * a different value. Force every piece (links, separators, current page)
 * to inherit from the SAME nearest ancestor -- the widget wrapper, where
 * the font-size set in Elementor's Style panel actually lives -- so they
 * all end up the one size instead of two.
 */
.elementor-widget-breadcrumbs a,
.elementor-widget-breadcrumbs span,
.elementor-widget-breadcrumbs strong {
  font-size: inherit !important;
}

.elementor-widget-breadcrumbs strong {
  font-weight: 600;
}

.bc-product-wysiwyg-field,
.bc-product-wysiwyg-field p,
.bc-product-wysiwyg-field li {
  color: #001783;
}

/* Type: / Brand: / Category: on the Single Product page -- Elementor's
   Shortcode widget was leaking its own global link color (the reddish
   default) onto the Brand link, and font-size/weight weren't matching
   each other (each shortcode widget was picking up whatever ancestor
   happened to be nearby), so all three are pinned to the site's own
   Global Typography preset (the same one already used for headings on
   this template) with !important to reliably win. The <a> tags need the
   SAME rule repeated on them directly -- font-size/weight don't cascade
   down from the wrapping div here because Elementor's kit CSS sets its
   own font-size straight on every <a>, and a rule that directly targets
   an element always wins over one the element would otherwise inherit,
   no matter how specific the inherited-from rule is. */
.bc-product-type,
.bc-product-brand,
.bc-product-categories,
.bc-product-brand a,
.bc-product-categories a {
  font-size: var(--e-global-typography-bf72b83-font-size) !important;
  font-weight: var(--e-global-typography-bf72b83-font-weight) !important;
}

.bc-product-type,
.bc-product-brand {
  color: #001783 !important;
  margin-bottom: 4px;
}

.bc-product-brand a {
  color: #001783 !important;
  text-decoration: none;
}

.bc-product-brand a:hover {
  text-decoration: underline;
}

.bc-product-categories {
  color: #767676 !important;
  margin-top: 12px;
}

.bc-product-categories a {
  color: #767676 !important;
  text-decoration: none;
}

.bc-product-categories a:hover {
  text-decoration: underline;
}

/*
 * Home page "Our Products" Loop Grid -- bento layout matching the mockup:
 * card 1 wide (top), card 2 narrow but tall (spans 2 rows, right side),
 * cards 3+4 small (bottom, split under card 1). REPEATS every 4 items,
 * so Load More adding a 5th/6th/... card starts the same pattern over
 * again automatically, indefinitely -- not just a fixed first 4.
 *
 * This is ORDER-based (nth-of-type position within each group of 4), not
 * name-based -- category NAMES aren't pinned to big/small roles, just
 * "1st and 2nd of every 4" vs "3rd and 4th of every 4". Reordering
 * categories in the widget's Query moves which one gets which role.
 *
 * How the repeat-forever part works: card 1/5/9/... and 2/6/10/... only
 * get an explicit COLUMN plus a RELATIVE row span ("span 2", not a fixed
 * row number) -- no explicit grid-row start. That leaves the actual row
 * number for the browser's native auto-placement to figure out on its
 * own each time, packing each new group of 4 into the next free pair of
 * rows -- which is exactly what lets this keep working for any item
 * count without JS or recalculating anything by hand.
 *
 * Uses "div:nth-of-type" rather than "*:nth-child" on purpose: Elementor
 * injects its own scoped <style> tag as the very FIRST child inside
 * .elementor-loop-container (for that widget's per-instance CSS), ahead
 * of any of the real card <div>s. nth-child would count that invisible
 * style tag as "item 1", shifting every real card's position off by one
 * (confirmed live -- this is exactly what was happening). nth-of-type on
 * "div" only counts div siblings, so the non-div style tag is ignored
 * and "item 1" correctly means the first actual card.
 */
.bc-home-products-grid .elementor-loop-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
}

.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1) {
  grid-column: 1 / span 2;
}

.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+2) {
  grid-column: 3;
  grid-row: span 2;
}

.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+3) {
  grid-column: 1;
}

.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n) {
  grid-column: 2;
}

@media (max-width: 1024px) {

  /* Not enough width for the 3-track bento to read correctly -- fall
     back to a plain 2-column grid, natural DOM order. */
  .bc-home-products-grid .elementor-loop-container {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }

  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1),
  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+2),
  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+3),
  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n) {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .bc-home-products-grid .elementor-loop-container {
    grid-template-columns: 1fr;
  }
}

/*
 * Confirmed via live inspection: the grid positioning above is working
 * correctly (card 2 genuinely computes to the full 2-row height) -- what
 * actually looked wrong was that the Loop Item template's Image widget
 * has no height limit, so each category's own photo renders at its own
 * natural size. One image (863px tall) was much taller than the rest
 * (~390px), and since it's a bento layout the whole grid's row height
 * follows the tallest item in the row, inflating every card to match.
 * Capping every card image to the same height keeps all 4 cards a
 * consistent, mockup-like size regardless of what each photo's own
 * original resolution happens to be.
 */
.bc-home-products-grid .elementor-loop-container img {
  max-height: 220px;
  width: 100%;
  object-fit: contain;
}

/*
 * Confirmed via live inspection (again): the outer grid item (.e-loop-item)
 * correctly stretches to the full 2-row height for the tall "card 2" slot
 * (measured 812px) -- but the VISIBLE card, a separate inner Elementor
 * Container one level down (the one with the white background/border,
 * e.g. class "...e-con e-parent"), only wraps its own content (394px)
 * and never stretches to match its parent's height, since a plain block
 * child doesn't inherit a percentage height by default. Force it (and
 * its own inner wrapper) to fill the outer slot, so the visible border
 * actually reaches all the way down instead of stopping halfway with
 * invisible empty space below it.
 */
.bc-home-products-grid .elementor-loop-container>div.e-loop-item {
  display: flex;
}

.bc-home-products-grid .elementor-loop-container>div.e-loop-item>.e-con {
  height: 100% !important;
  width: 100%;
}

.bc-home-products-grid .elementor-loop-container>div.e-loop-item>.e-con>.e-con-inner {
  height: 100%;
}

/*
 * WIDE card only (1st of every group of 4) -- title+"See more" stacked
 * on the left, image on the right spanning the card's full height, per
 * the mockup. The TALL card (2nd of the group) stays stacked like the
 * small cards -- title/link on top, image below, full width -- just
 * taller since it spans 2 outer rows (handled separately below). Small
 * cards (3rd/4th) are untouched, using the template's own default.
 *
 * The Loop Item template itself is 3 flat siblings in this exact DOM
 * order: image widget, title heading, "See more" heading (confirmed
 * live -- no extra injected elements at this level, unlike the outer
 * loop container). CSS Grid template areas let them be repositioned by
 * plain DOM position (nth-child) without needing to nest them in the
 * template itself.
 */
.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1) .e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: 4px 24px;
  height: 100%;
}

.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1) .e-con-inner> :nth-child(1) {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
}

.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1) .e-con-inner> :nth-child(2) {
  grid-column: 1;
  grid-row: 1;
}

.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1) .e-con-inner> :nth-child(3) {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

/*
 * Confirmed via live inspection: with max-height:none/height:100% here,
 * the grid row's intrinsic-size measurement pass can't resolve that
 * percentage (indefinite at that point), so it falls back to the
 * image's natural aspect ratio -- inflating the whole row (and every
 * card sharing it) far beyond the mockup's compact proportions. Using
 * the same fixed cap as the small cards keeps row heights predictable
 * and matches the mockup's tighter card sizing.
 */
.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1) img {
  max-height: 260px;
  height: auto;
  width: 100%;
  object-fit: contain;
}

@media (max-width: 1024px) {

  /* Not enough width for the side-by-side split -- fall back to the
     same stacked layout the small/tall cards already use. */
  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1) .e-con-inner {
    display: block !important;
    height: auto;
  }

  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1) .e-con-inner>* {
    grid-column: auto;
    grid-row: auto;
  }

  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+1) img {
    max-height: 240px;
    height: auto;
  }

  .bc-home-products-grid .elementor-loop-container img {
    max-height: 100% !important;
    width: 100%;
  }
}

/*
 * TALL card (2nd of every group of 4) -- stays stacked (title/link on
 * top, image below, full width), same as the small cards, just with a
 * lot more available height since it spans 2 outer rows. Growing the
 * image widget to fill the leftover space (instead of leaving it small
 * and centered with empty gaps above/below, which is what "align-self:
 * center" was doing before) makes it actually use that extra room.
 */
.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+2) .e-con-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+2) .elementor-widget-image {
  order: 3;
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}

.bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+2) img {
  width: 100%;
  object-fit: contain;
  max-height: 100% !important;
}

@media (max-width: 1024px) {
  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+2) .e-con-inner {
    height: auto;
    display: block;
  }

  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+2) .elementor-widget-image {
    flex: none;
    display: block;
  }

  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+2) img {
    height: auto;
  }

  .bc-home-products-grid .elementor-loop-container>div:nth-of-type(4n+2) .elementor-widget-icon-box {
    width: fit-content;
  }
}

/* WPML language switcher (Elementor "Legacy Dropdown" widget) -- the
   plugin ships this with no background/padding/shadow at all on its
   dropdown, and the flag <img> + language <span> aren't vertically
   centered against each other (block-level, not flex), which together
   is what made the open dropdown look like a plain unstyled line of
   text floating over the page instead of a menu. Flex-centers the
   flag/label pair in both the closed toggle and the open list, and
   gives the open list an actual card (background, border, shadow) that
   matches this site's other dropdown/preview panels (see
   .bc-product-search-preview). */
.wpml-ls-legacy-dropdown.wpml-ls {
  width: auto;
  border: none;
}

.wpml-ls-legacy-dropdown .wpml-ls-item-toggle,
.wpml-ls-legacy-dropdown .wpml-ls-link {
  display: flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #00358E;
  font-size: 14px;
}

.wpml-ls-legacy-dropdown .wpml-ls-flag {
  width: 18px;
  height: auto;
  flex: 0 0 18px;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
  background: #fff;
  border: 1px solid #e2e9f3;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 38, 77, .12);
  padding: 6px 0;
  min-width: 110px;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu .wpml-ls-item {
  padding: 0;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu .wpml-ls-link {
  padding: 8px 16px;
  text-decoration: none !important;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu .wpml-ls-link:hover {
  background: #f4f7fb;
  color: #00358E !important;
}

/* About BioClass */
@media only screen and (max-width: 1024px) {
    #testimonial-bioclass .elementor-testimonial {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Next Event */
#terms-post-text .next-event-label {
    color: #F07A1E !important;
}

/* Hide the Features / How to Use accordion item when the product has no content for it */
.e-n-accordion-item:has(.bc-product-wysiwyg-field.bc-empty){display:none;}

/* Single certification image: show it large */
.bc-product-certifications a:only-child{width:100%;max-width:960px;}
.bc-product-certifications a:only-child img{width:100%;height:auto;}

/* Category product grid: flex-column container under-sizes the grid (lazy images / 1:1 image boxes), so the next section overlapped it on mobile. Grid display sizes it correctly. */
.e-con:has(> .elementor-widget-shortcode .bc-cat-products-grid){display:grid!important;grid-template-columns:100%;}

/* AWC product family image under size table */
.bc-product-family{margin:24px 0 0;}
.bc-product-family img{display:block;width:100%;max-width:960px;height:auto;}

/* News & Events photo gallery */
.bc-post-gallery-title{margin:40px 0 16px;}
.bc-post-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 24px;}
.bc-post-gallery a{display:block;overflow:hidden;border-radius:12px;background:#f2f6fb;}
.bc-post-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s ease;}
.bc-post-gallery a:hover img{transform:scale(1.03);}
@media (max-width:767px){.bc-post-gallery{grid-template-columns:repeat(2,1fr);gap:8px;}}