/*
 * Mighty Kids — Shop & Archive Page Styles
 * Loaded on: shop, product archives, category pages, single product (for related/upsells)
 * Sections: product grid, cards, images, buttons, filters, related products, mobile shop
 */


/* ============================================================================
   SHOP PAGE — PRODUCT GRID POLISH
   ============================================================================ */

body.post-type-archive-product ul.products li.product,
  body.tax-product_cat ul.products li.product,
  .mk-showcase ul.products li.product {
  position: relative;
  overflow: hidden;
}

/* Wrapper clips the rotated band to a clean corner square,
  aligned to card
   edge. Sized by breakpoint — grows on wider viewports so the badge
   stays legible next to larger cards. */
.mk-shop-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}

.mk-shop-ribbon::before,
  .mk-shop-ribbon::after { content: none; }

/* Band geometry: width stays ≤ wrapper-diagonal − 12px so letters never
   clip. top/left keep the band centred on the corner diagonal. Values
   scale in tandem with the wrapper across breakpoints below. */
.mk-shop-ribbon__band {
  position: absolute;
  top: 21px;
  left: -26px;
  width: 124px;
  display: block;
  padding: 5px 0;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-45deg);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fffaf0;
  text-shadow: 0 1px 1px rgba(74, 48, 6, 0.35);
  box-shadow: 0 2px 7px rgba(74, 48, 6, 0.28);
}

.mk-shop-ribbon--bestseller .mk-shop-ribbon__band,
.mk-shop-ribbon--bundle-bestseller .mk-shop-ribbon__band {
  background: linear-gradient(180deg, #d9a236 0%, #b9801a 100%);
}

/* "Best selling bundle" is a longer label — shrink it so it stays on one
   line inside the same corner footprint as every other ribbon. */
.mk-shop-ribbon--bundle-bestseller .mk-shop-ribbon__band {
  font-size: 7.5px;
  letter-spacing: 0.02em;
  font-weight: 800;
}
.mk-shop-ribbon--bestseller::before {
  top: 0;
  right: 40px;
  border-right-color: #5f3f08;
  border-bottom-color: #5f3f08;
}
.mk-shop-ribbon--bestseller::after {
  top: 40px;
  left: 0;
  border-right-color: #5f3f08;
  border-bottom-color: #5f3f08;
}

.mk-shop-ribbon--new .mk-shop-ribbon__band {
  background: linear-gradient(135deg, #3d566e 0%, #2c3e50 50%, #162433 100%);
}
.mk-shop-ribbon--new::before {
  top: 0;
  right: 40px;
  border-right-color: #0e1a25;
  border-bottom-color: #0e1a25;
}
.mk-shop-ribbon--new::after {
  top: 40px;
  left: 0;
  border-right-color: #0e1a25;
  border-bottom-color: #0e1a25;
}

.mk-shop-ribbon--bundle .mk-shop-ribbon__band {
  background: #f6ecd4;
  color: #8f5f0e;
  text-shadow: none;
  box-shadow:
    0 2px 7px rgba(74, 48, 6, 0.18),
    inset 0 0 0 1px rgba(201, 142, 31, 0.5);
}
.mk-shop-ribbon--bundle::before {
  top: 0;
  right: 40px;
  border-right-color: #8f5f0e;
  border-bottom-color: #8f5f0e;
}
.mk-shop-ribbon--bundle::after {
  top: 40px;
  left: 0;
  border-right-color: #8f5f0e;
  border-bottom-color: #8f5f0e;
}

@media (min-width: 551px) {
  .mk-shop-ribbon {
    width: 104px;
    height: 104px;
  }
  .mk-shop-ribbon__band {
    top: 23px;
    left: -28px;
    width: 134px;
    font-size: 10px;
    padding: 5px 0;
  }
  .mk-shop-ribbon--bundle-bestseller .mk-shop-ribbon__band {
    font-size: 8px;
  }
}

/* Wide desktop (≥1200px): 3-col grid hits its 1200px cap,
  cards ~340–380px */
@media (min-width: 1200px) {
  .mk-shop-ribbon {
    width: 116px;
    height: 116px;
  }
  .mk-shop-ribbon__band {
    top: 27px;
    left: -32px;
    width: 152px;
    font-size: 11px;
    padding: 6px 0;
  }
  .mk-shop-ribbon--bundle-bestseller .mk-shop-ribbon__band {
    font-size: 9px;
  }
}

.mk-shop-social {
  max-width: 1200px;
  margin: 56px auto 16px;
  padding: 0 16px;
}

.mk-shop-social__head {
  text-align: center;
  margin-bottom: 32px;
}

.mk-shop-social__eyebrow {
  display: inline-block;
  color: #c98e1f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mk-shop-social__title {
  margin: 0;
  font-size: 26px;
  color: #2c3e50;
  line-height: 1.2;
}

.mk-shop-social__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mk-shop-social__card {
  margin: 0;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mk-shop-social__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(44, 62, 80, 0.08);
}

.mk-shop-social__stars {
  color: #f5a623;
  font-size: 15px;
  letter-spacing: 2px;
}

.mk-shop-social__star-off {
  color: #e5e7eb;
}

.mk-shop-social__quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #2c3e50;
  font-style: italic;
}

.mk-shop-social__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mk-shop-social__name {
  font-weight: 700;
  color: #2c3e50;
  font-size: 14px;
}

.mk-shop-social__role {
  color: #718096;
  font-size: 12.5px;
}

@media (max-width: 900px) {
  .mk-shop-social__grid { grid-template-columns: 1fr; gap: 14px; }
  .mk-shop-social { margin-top: 40px; }
  .mk-shop-social__title { font-size: 22px; }
}

/* Shop hero — unified eyebrow + H1 + lede,
  sits above the value bar.
   Centered as a single visual unit (replaces the prior split layout where
   the H1 and intro copy lived on different axes). */
.mk-shop-hero {
  max-width: 940px;
  margin: -24px auto 40px;
  padding: 0 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.mk-shop-hero__eyebrow {
  color: #c98e1f;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.mk-shop-hero__title {
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.15;
  font-weight: 700;
  color: #0f1e2e;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.mk-shop-hero__title::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: #c98e1f;
  border-radius: 3px;
  margin: 12px auto 0;
}

.mk-shop-hero__lede {
  max-width: 560px;
  margin: 0 auto;
  color: #4a5568;
  font-size: 15.5px;
  line-height: 1.55;
}

@media (max-width: 768px) {
  /* Mobile uses .mk-shop-mobile-header instead — hide the desktop hero. */
  .mk-shop-hero { display: none; }
}

.mk-shop-edu {
  max-width: 1200px;
  margin: 56px auto 16px;
  padding: 40px 32px;
  background: #fffbf4;
  border: 1px solid #f1e6cf;
  border-radius: 16px;
  text-align: center;
}

.mk-shop-edu__title {
  font-size: 28px;
  color: #2c3e50;
  margin: 0 0 12px;
}

.mk-shop-edu__intro {
  max-width: 680px;
  margin: 0 auto 32px;
  color: #4a5568;
  font-size: 16px;
  line-height: 1.65;
}

.mk-shop-edu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
  margin-bottom: 28px;
}

.mk-shop-edu__card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 22px 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mk-shop-edu__card:hover {
  box-shadow: 0 6px 20px rgba(44, 62, 80, 0.08);
  transform: translateY(-2px);
}

.mk-shop-edu__card-title {
  font-size: 17px;
  color: #c98e1f;
  margin: 0 0 8px;
}

.mk-shop-edu__card p {
  margin: 0;
  color: #4a5568;
  font-size: 14.5px;
  line-height: 1.6;
}

.mk-shop-edu__cta {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.mk-shop-edu__link {
  color: #2c3e50;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.mk-shop-edu__link:hover {
  color: #c98e1f;
  border-color: #c98e1f;
}

@media (max-width: 900px) {
  .mk-shop-edu__grid { grid-template-columns: 1fr; gap: 16px; }
  .mk-shop-edu { padding: 32px 20px; margin-top: 40px; }
  .mk-shop-edu__title { font-size: 24px; }
}

.mk-shop-value-bar {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 24px 32px;
  margin-bottom: 32px;
}

.mk-shop-value-bar__inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.mk-shop-value-bar__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.mk-shop-value-bar__item svg {
  flex-shrink: 0;
  color: #c98e1f;
  margin-top: 2px;
}

.mk-shop-value-bar__item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.3;
}

.mk-shop-value-bar__item span {
  display: block;
  font-size: 12px;
  color: #888;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .mk-shop-value-bar__inner {
    flex-wrap: wrap;
    gap: 16px;
  }
  .mk-shop-value-bar__item {
    flex: 0 0 calc(50% - 8px);
  }
}

@media (max-width: 550px) {
  .mk-shop-value-bar {
    padding: 16px 20px;
  }
  .mk-shop-value-bar__inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .mk-shop-value-bar__item {
    flex: 0 0 calc(50% - 6px);
  }
}

body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  .mk-showcase ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 0;
}

/* WooCommerce float-clearfix pseudo-elements become unwanted grid items when
   ul.products switches to display:grid. Neutralise them. */
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after,
.mk-showcase ul.products::before,
.mk-showcase ul.products::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 768px) {
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  .mk-showcase ul.products:not(.swiper-wrapper) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 0 !important;
  }
  body.post-type-archive-product ul.products li.product,
  body.tax-product_cat ul.products li.product,
  .mk-showcase ul.products li.product:not(.swiper-slide) {
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid #e8e2d6 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  /* When a single product is visible,
  center it and limit width */
  body.post-type-archive-product ul.products li.product:only-child,
  body.post-type-archive-product ul.products li.product:not(.mk-filter-hidden):first-child:last-child,
  .mk-showcase ul.products li.product:not(.swiper-slide):only-child,
  .mk-showcase ul.products li.product:not(.swiper-slide):not(.mk-filter-hidden):first-child:last-child {
    max-width: 260px !important;
    margin: 0 auto !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
  /* Add to cart buttons — filled brand CTA on mobile (small catalog,
  thumbs-reach-friendly). */
  body.post-type-archive-product ul.products li.product a.add_to_cart_button,
  body.post-type-archive-product ul.products li.product button.button,
  body.tax-product_cat ul.products li.product a.add_to_cart_button,
  body.tax-product_cat ul.products li.product button.button,
  .mk-showcase ul.products li.product a.add_to_cart_button,
  .mk-showcase ul.products li.product button.button {
    background: #c98e1f !important;
    color: #fff !important;
    border: 1.5px solid #c98e1f !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(201, 142, 31, 0.18) !important;
    margin: 0 10px 10px !important;
    text-align: center !important;
  }
  body.post-type-archive-product ul.products li.product .price,
  body.tax-product_cat ul.products li.product .price,
  .mk-showcase ul.products li.product .price {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px 2px !important;
  }
  body.post-type-archive-product ul.products li.product .wcsatt-sub-options,
  body.tax-product_cat ul.products li.product .wcsatt-sub-options,
  .mk-showcase ul.products li.product .wcsatt-sub-options {
    text-align: center !important;
    padding: 0 6px 4px !important;
    font-size: 11px !important;
  }
}

body.post-type-archive-product ul.products li.product,
  body.tax-product_cat ul.products li.product,
  .related.products ul.products li.product,
  .up-sells ul.products li.product,
  .mk-showcase ul.products li.product {
  background: #f8f6f2;
  border: 1px solid #e8e2d6;
  border-radius: 14px;
  padding: 0 !important;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

/* Swiper sets margin-right via inline style for spaceBetween —
   !important in a stylesheet always beats inline styles, so only
   apply margin:0 to non-carousel slides. */
body.post-type-archive-product ul.products li.product,
  body.tax-product_cat ul.products li.product,
  .related.products ul.products li.product,
  .up-sells ul.products li.product,
  .mk-showcase ul.products li.product:not(.swiper-slide) {
  margin: 0 !important;
}

body.post-type-archive-product ul.products li.product:not(.swiper-slide),
  body.tax-product_cat ul.products li.product:not(.swiper-slide),
  .related.products ul.products li.product:not(.swiper-slide),
  .up-sells ul.products li.product:not(.swiper-slide),
  .mk-showcase ul.products li.product:not(.swiper-slide) {
  width: 100% !important;
}

body.post-type-archive-product ul.products li.product:hover,
  body.tax-product_cat ul.products li.product:hover,
  .related.products ul.products li.product:hover,
  .up-sells ul.products li.product:hover,
  .mk-showcase ul.products li.product:not(.swiper-slide):hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}


body.post-type-archive-product ul.products li.product .woocommerce-LoopProduct-link,
  body.tax-product_cat ul.products li.product .woocommerce-LoopProduct-link,
  body.post-type-archive-product ul.products li.product.product-type-external .woocommerce-LoopProduct-link,
  .related.products ul.products li.product .woocommerce-LoopProduct-link,
  .up-sells ul.products li.product .woocommerce-LoopProduct-link,
.mk-showcase ul.products li.product .woocommerce-LoopProduct-link,
  .mk-showcase ul.products li.product.product-type-external .woocommerce-LoopProduct-link {
  border: none !important;
}

body.post-type-archive-product ul.products li.product .wc-product-image,
  body.tax-product_cat ul.products li.product .wc-product-image,
  .related.products ul.products li.product .wc-product-image,
  .up-sells ul.products li.product .wc-product-image,
  .mk-showcase ul.products li.product .wc-product-image {
  border: none !important;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

body.post-type-archive-product ul.products li.product .wc-product-image .inside-wc-product-image,
  body.tax-product_cat ul.products li.product .wc-product-image .inside-wc-product-image,
  .related.products ul.products li.product .wc-product-image .inside-wc-product-image,
  .up-sells ul.products li.product .wc-product-image .inside-wc-product-image,
  .mk-showcase ul.products li.product .wc-product-image .inside-wc-product-image {
  border: none !important;
}

body.post-type-archive-product ul.products li.product .wc-product-image,
  body.tax-product_cat ul.products li.product .wc-product-image,
  .related.products ul.products li.product .wc-product-image,
  .up-sells ul.products li.product .wc-product-image,
  .mk-showcase ul.products li.product .wc-product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f6f2;
  position: relative;
  overflow: hidden;
  width: 100%; /* span the card even when the parent doesn't stretch it */
  box-sizing: border-box;
  padding-bottom: 133.33%; /* 3:4 fallback for Safari 14 */
  height: 0;
}
@supports (aspect-ratio: 3 / 4) {
  body.post-type-archive-product ul.products li.product .wc-product-image,
  body.tax-product_cat ul.products li.product .wc-product-image,
  .related.products ul.products li.product .wc-product-image,
  .up-sells ul.products li.product .wc-product-image,
  .mk-showcase ul.products li.product .wc-product-image {
    aspect-ratio: 3 / 4;
    padding-bottom: 0;
    height: auto;
    /* Cap the box at the thumbnail's natural height (400px) so wide
       cards don't grow empty bands above/below the photo. */
    max-height: 400px;
  }
  /* The wrapper defaults to the thumbnail's intrinsic size (varies with
     the srcset source the browser picks), which misaligns the photo
     whenever it differs from the box. Pin it to the box; the img inside
     is 100% × 100% with object-fit: contain, so the photo always scales
     with the card and stays centered. */
  body.post-type-archive-product ul.products li.product .wc-product-image .inside-wc-product-image,
  body.tax-product_cat ul.products li.product .wc-product-image .inside-wc-product-image,
  .related.products ul.products li.product .wc-product-image .inside-wc-product-image,
  .up-sells ul.products li.product .wc-product-image .inside-wc-product-image,
  .mk-showcase ul.products li.product .wc-product-image .inside-wc-product-image {
    width: 100%;
    height: 100%;
  }
}

body.post-type-archive-product ul.products li.product .wc-product-image img,
  body.tax-product_cat ul.products li.product .wc-product-image img,
  .related.products ul.products li.product .wc-product-image img,
  .up-sells ul.products li.product .wc-product-image img,
  .mk-showcase ul.products li.product .wc-product-image img {
  transition: transform 0.4s ease;
  object-fit: contain;
  /* !important: GP inline CSS (width: 300px) and mighty-kids-customizations.css
     (max-width: 300px) pin the img to the thumbnail size, which left-aligns
     the photo inside the full-width wrapper. */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
}
@supports (aspect-ratio: 3 / 4) {
  body.post-type-archive-product ul.products li.product .wc-product-image img,
  body.tax-product_cat ul.products li.product .wc-product-image img,
  .related.products ul.products li.product .wc-product-image img,
  .up-sells ul.products li.product .wc-product-image img,
  .mk-showcase ul.products li.product .wc-product-image img {
    position: static;
  }
}

body.post-type-archive-product ul.products li.product:hover .wc-product-image img,
  body.tax-product_cat ul.products li.product:hover .wc-product-image img,
  .related.products ul.products li.product:hover .wc-product-image img,
  .up-sells ul.products li.product:hover .wc-product-image img,
  .mk-showcase ul.products li.product:not(.swiper-slide):hover .wc-product-image img {
  transform: scale(1.05);
}

body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
  body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
  .related.products ul.products li.product .woocommerce-loop-product__title,
  .up-sells ul.products li.product .woocommerce-loop-product__title,
  .mk-showcase ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  color: #2c3e50;
  padding: 16px 16px 4px !important;
  margin: 0 !important;
  line-height: 1.3;
}

body.post-type-archive-product ul.products li.product .star-rating,
  body.tax-product_cat ul.products li.product .star-rating,
  .related.products ul.products li.product .star-rating,
  .up-sells ul.products li.product .star-rating,
  .mk-showcase ul.products li.product .star-rating {
  margin: 4px auto 6px !important;
  font-size: 14px !important;
}

body.post-type-archive-product ul.products li.product .price,
  body.tax-product_cat ul.products li.product .price,
  .related.products ul.products li.product .price,
  .up-sells ul.products li.product .price,
  .mk-showcase ul.products li.product .price {
  padding: 0 16px;
  font-size: 18px !important;
  font-weight: 700;
  color: #2c3e50 !important;
  display: block;
  margin-bottom: 4px;
}

body.post-type-archive-product ul.products li.product .wcsatt-sub-options,
  body.tax-product_cat ul.products li.product .wcsatt-sub-options,
  .related.products ul.products li.product .wcsatt-sub-options,
  .up-sells ul.products li.product .wcsatt-sub-options,
  .mk-showcase ul.products li.product .wcsatt-sub-options {
  font-size: 13px !important;
  color: #888 !important;
  font-weight: 400;
}

body.post-type-archive-product ul.products li.product .wcsatt-sub-discount,
  body.tax-product_cat ul.products li.product .wcsatt-sub-discount,
  .related.products ul.products li.product .wcsatt-sub-discount,
  .up-sells ul.products li.product .wcsatt-sub-discount,
  .mk-showcase ul.products li.product .wcsatt-sub-discount {
  background: linear-gradient(135deg, #c98e1f 0%, #a67617 100%);
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  display: inline-block;
  margin-left: 2px;
}

/* Bundle savings chip — dynamic "Save X%", rendered inside .price by
   mk_bundle_savings_chip(). Mirrors the subscribe-save pill so the price row
   keeps one savings language. */
body.post-type-archive-product ul.products li.product .price .mk-bundle-save,
  body.tax-product_cat ul.products li.product .price .mk-bundle-save,
  .related.products ul.products li.product .price .mk-bundle-save,
  .up-sells ul.products li.product .price .mk-bundle-save,
  .mk-showcase ul.products li.product .price .mk-bundle-save {
  background: linear-gradient(135deg, #c98e1f 0%, #a67617 100%);
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 3px 9px;
  border-radius: 20px;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* The .mk-showcase variant uses a.woocommerce-LoopProduct-link — outside
   the shop archive (e.g. homepage) the classes-only selector ties with
   GeneratePress's `display: block` rule and loses, leaving the link block
   and the image box shrink-wrapped to the left. */
body.post-type-archive-product ul.products li.product .woocommerce-LoopProduct-link,
  body.tax-product_cat ul.products li.product .woocommerce-LoopProduct-link,
  .related.products ul.products li.product .woocommerce-LoopProduct-link,
  .up-sells ul.products li.product .woocommerce-LoopProduct-link,
  .mk-showcase ul.products li.product a.woocommerce-LoopProduct-link {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Add to cart buttons — filled brand accent to drive conversion on a
   small catalog where every card needs to close the sale. */
body.post-type-archive-product ul.products li.product a.button,
  body.post-type-archive-product ul.products li.product a.add_to_cart_button,
  body.post-type-archive-product ul.products li.product button.button,
  body.tax-product_cat ul.products li.product a.button,
  body.tax-product_cat ul.products li.product a.add_to_cart_button,
  body.tax-product_cat ul.products li.product button.button,
  .related.products ul.products li.product a.button,
  .up-sells ul.products li.product a.button,
  .mk-showcase ul.products li.product a.button,
  .mk-showcase ul.products li.product a.add_to_cart_button,
  .mk-showcase ul.products li.product button.button {
  background: #c98e1f !important;
  color: #fff !important;
  border: 1.5px solid #c98e1f !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(201, 142, 31, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
  text-transform: none;
  text-align: center;
  display: block;
  text-decoration: none;
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart {
  display: flex;
  gap: 14px;
  margin: 12px 16px 16px;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  border-top: none;
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart .mk-add-to-cart-text,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart .mk-add-to-cart-text,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart .mk-add-to-cart-text {
  display: block !important;
  font-size: 10px !important;
  opacity: 0.85;
  font-weight: 400 !important;
  margin-top: 1px;
}

/* Multi-flavour buttons — gold filled to match the simple-product CTA so
   mixed rows read as a single visual tier (same fill, same height, same
   shadow). Pills are narrower because there are multiple per row, but the
   visual treatment is identical to the single ATC. */
body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button {
  flex: 1;
  min-width: 0;
  min-height: 45.4px;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #c98e1f !important;
  color: #fff !important;
  border: 1.5px solid #c98e1f !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(201, 142, 31, 0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
  word-break: break-word !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1 !important;
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button .mk-flavour-add-to-cart-btn,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button .mk-flavour-add-to-cart-btn,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button .mk-flavour-add-to-cart-btn {
  gap: 2px !important;
}

@media (hover: hover) {
  body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:hover,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:hover,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:hover {
    background: #b67d19 !important;
    color: #fff !important;
    border-color: #b67d19 !important;
    box-shadow: 0 6px 14px rgba(201, 142, 31, 0.28);
    transform: translateY(-1px);
  }
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:hover .mk-add-to-cart-text,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:hover .mk-add-to-cart-text,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:hover .mk-add-to-cart-text {
  opacity: 1;
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button.loading,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button.loading,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button.loading {
  pointer-events: none !important;
  opacity: 0.6 !important;
}
body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button.loading::after,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button.loading::after,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button.loading::after {
  display: none !important;
  content: none !important;
}

/* Added state — brand-consistent confirmation,
  remains clickable to add more */
body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button.added,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button.added,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button.added {
  background: #2c3e50 !important;
  color: #fff !important;
  border-color: #2c3e50 !important;
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button.added::after,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button.added::after,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button.added::after {
  display: none !important;
}

body.post-type-archive-product ul.products li.product a.add_to_cart_button.added::after,
  body.tax-product_cat ul.products li.product a.add_to_cart_button.added::after,
  .mk-showcase ul.products li.product a.add_to_cart_button.added::after {
  display: none !important;
}

/* Single variation — match simple product filled style for consistency.
   max-width override is required because the plugin's shop.css caps flavour
   buttons at 280px on ≥1025px viewports,
  which leaves the lone button
   narrower than the simple-product CTA above. min-height is reset so the
   button height matches the simple-product CTA (45.4px,
  not 48px). */
body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child {
  background: #c98e1f !important;
  color: #fff !important;
  border: 1.5px solid #c98e1f !important;
  box-shadow: 0 2px 6px rgba(201, 142, 31, 0.18);
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  display: block !important;
  text-align: center !important;
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-flavour-add-to-cart-btn,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-flavour-add-to-cart-btn,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-flavour-add-to-cart-btn {
  display: inline !important;
  gap: 0 !important;
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-add-to-cart-text,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-add-to-cart-text,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-add-to-cart-text {
  display: inline !important;
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-flavour-name,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-flavour-name,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-flavour-name {
  display: none !important;
}

@media (hover: hover) {
  body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child:hover,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child:hover,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child:hover {
    background: #b67d19 !important;
    color: #fff !important;
    border-color: #b67d19 !important;
    box-shadow: 0 6px 14px rgba(201, 142, 31, 0.28);
    transform: translateY(-1px);
  }
}

body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child.added,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child.added,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child.added {
  background: #2c3e50 !important;
  color: #fff !important;
  border-color: #2c3e50 !important;
}

body.post-type-archive-product ul.products li.product > a.button,
  body.post-type-archive-product ul.products li.product > button.button,
  body.tax-product_cat ul.products li.product > a.button,
  body.tax-product_cat ul.products li.product > button.button,
  .related.products ul.products li.product > a.button,
  .up-sells ul.products li.product > a.button,
.mk-showcase ul.products li.product > a.button,
  .mk-showcase ul.products li.product > button.button {
  margin: 12px 16px 16px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-width: 1.5px !important;
  box-sizing: border-box !important;
}

body.post-type-archive-product ul.products li.product a.button:hover,
  body.post-type-archive-product ul.products li.product a.add_to_cart_button:hover,
  body.post-type-archive-product ul.products li.product button.button:hover,
  body.tax-product_cat ul.products li.product a.button:hover,
  body.tax-product_cat ul.products li.product a.add_to_cart_button:hover,
  body.tax-product_cat ul.products li.product button.button:hover,
  .related.products ul.products li.product a.button:hover,
  .up-sells ul.products li.product a.button:hover,
  .mk-showcase ul.products li.product a.button:hover,
  .mk-showcase ul.products li.product a.add_to_cart_button:hover,
  .mk-showcase ul.products li.product button.button:hover {
  background: #b67d19 !important;
  color: #fff !important;
  border-color: #b67d19 !important;
  box-shadow: 0 6px 14px rgba(201, 142, 31, 0.28);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  section.related.products {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  section.related.products h2 {
    padding-left: 16px;
  }
  .related.products ul.products,
  .up-sells ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 16px !important;
    margin: 0 !important;
    list-style: none;
    gap: 12px !important;
  }
  .related.products ul.products::-webkit-scrollbar,
  .up-sells ul.products::-webkit-scrollbar {
    display: none;
  }
  .related.products ul.products li.product,
  .up-sells ul.products li.product {
    flex: 0 0 68% !important;
    max-width: 68% !important;
    margin: 0 !important;
  }
  .related.products ul.products li.product .wc-product-image,
  .up-sells ul.products li.product .wc-product-image {
    aspect-ratio: 1 / 1 !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 768px) {
  /* Constrain product-link images to their container on mobile */
  body.woocommerce-shop.woocommerce ul.products li.product a img {
    max-width: 100% !important;
  }

  body.post-type-archive-product .woocommerce-breadcrumb,
  body.tax-product_cat .woocommerce-breadcrumb,
  .mk-showcase .woocommerce-breadcrumb {
    display: none !important;
  }
  body.post-type-archive-product .site-content,
  body.tax-product_cat .site-content,
  .mk-showcase .site-content {
    padding-top: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.post-type-archive-product .inside-article,
  body.post-type-archive-product .entry-content,
  body.post-type-archive-product .grid-container,
  body.post-type-archive-product .woocommerce,
  body.tax-product_cat .inside-article,
  body.tax-product_cat .entry-content,
  body.tax-product_cat .grid-container,
  body.tax-product_cat .woocommerce,
  .mk-showcase .inside-article,
  .mk-showcase .entry-content,
  .mk-showcase .grid-container,
  .mk-showcase .woocommerce {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  .mk-showcase ul.products {
    padding: 0 !important;
    margin: 0 !important;
  }

  ul.products li.product .wc-product-image {
    padding-bottom: 90% !important; /* fallback for Safari 14 */
    border-radius: 12px 12px 0 0 !important;
    background: #f9f7f4 !important;
  }
  ul.products li.product .wc-product-image img {
    object-fit: contain !important;
    padding: 8px !important;
  }
}
@supports (aspect-ratio: 1 / 1) {
  @media (max-width: 768px) {
    ul.products li.product .wc-product-image {
      aspect-ratio: 1 / 1 !important;
      padding-bottom: 0 !important;
    }
  }
}
@media (max-width: 768px) {
  ul.products li.product .wc-product-image .inside-wc-product-image {
    width: 100% !important;
    max-width: 100% !important;
  }
  ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 10px 4px !important;
    line-height: 1.3 !important;
    min-height: auto !important;
  }
  /* Stars — hide on mobile cards,
  shown via price row instead */
  ul.products li.product .star-rating {
    display: none !important;
  }
  /* Price row — everything inline,
  wrapping naturally */
  ul.products li.product .price {
    font-size: 10px !important;
    color: #999 !important;
    padding: 4px 8px 8px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
  }
  ul.products li.product .price .woocommerce-Price-amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
  }
  /* Subscribe text — stays inline,
  inherits small size */
  ul.products li.product .price .wcsatt-sub-options {
    display: inline !important;
  }
  ul.products li.product .price .wcsatt-sub-discount,
  ul.products li.product .price .mk-bundle-save {
    font-size: 9px !important;
    padding: 1px 5px !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
  }
  ul.products li.product .wcsatt-sub-options {
    font-size: 11px !important;
    padding: 0 10px 10px !important;
    color: #888 !important;
  }
  ul.products li.product .mk-flavour-variations-add-to-cart {
    padding: 12px !important;
  }
}

/* Added state — confirm with dark navy so it reads as "done,
  saved" and
   contrasts clearly with the live gold CTA. */
body.post-type-archive-product ul.products li.product a.add_to_cart_button.added,
  body.tax-product_cat ul.products li.product a.add_to_cart_button.added,
  .mk-showcase ul.products li.product a.add_to_cart_button.added {
  background: #2c3e50 !important;
  color: #fff !important;
  border-color: #2c3e50 !important;
  box-shadow: none !important;
}

ul.products li.product a.added::after,
  ul.products li.product .mk-flavour-variations-add-to-cart a.added::after {
  display: none !important;
}

/* View Bundles link — outlined style (scoped to button,
  not product link wrapper). :not(.add_to_cart_button) keeps it off the
  bundle products' own loop buttons, whose href also contains "bundle". */
body.post-type-archive-product ul.products li.product a.button[href*="bundle"]:not(.add_to_cart_button),
  body.tax-product_cat ul.products li.product a.button[href*="bundle"]:not(.add_to_cart_button),
  .mk-showcase ul.products li.product a.button[href*="bundle"]:not(.add_to_cart_button) {
  background: transparent !important;
  color: #2c3e50 !important;
  border: 2px solid #2c3e50 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  margin: auto 16px 16px !important;
}

body.post-type-archive-product ul.products li.product a.button[href*="bundle"]:not(.add_to_cart_button):hover,
  body.tax-product_cat ul.products li.product a.button[href*="bundle"]:not(.add_to_cart_button):hover,
  .mk-showcase ul.products li.product a.button[href*="bundle"]:not(.add_to_cart_button):hover {
  background: #2c3e50 !important;
  color: #fff !important;
}


.mk-shop-mobile-header {
  display: none;
}

/* ============================================================================
   SHOP PAGE — FILTER TABS
   ============================================================================ */

.mk-shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  justify-content: center;
}

.mk-shop-filters__btn {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mk-shop-filters__save {
  position: absolute;
  top: -9px;
  right: -10px;
  background: #c98e1f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 4px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  transform: rotate(6deg);
  transition: transform 0.2s ease;
}

.mk-shop-filters__btn:hover .mk-shop-filters__save,
  .mk-shop-filters__btn.mk-active .mk-shop-filters__save {
  transform: rotate(0deg) scale(1.05);
}

.mk-shop-filters__btn:hover {
  background: #fff !important;
  border-color: #c98e1f !important;
  color: #c98e1f !important;
}

.mk-shop-filters__btn.mk-active {
  background: #2c3e50;
  border-color: #2c3e50;
  color: #fff;
}

.mk-shop-filters__btn.mk-active:hover {
  background: #1e2d3d !important;
  border-color: #1e2d3d !important;
  color: #fff !important;
}

body.post-type-archive-product ul.products li.product,
.mk-showcase ul.products li.product {
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

body.post-type-archive-product ul.products li.product.mk-filter-hidden,
  .mk-showcase ul.products li.product.mk-filter-hidden {
  display: none !important;
}

/* Under the Teens & Adults filter,
  promote Mighty Magnesium to the first
   position. CSS Grid honours `order`,
  so this reshuffles visually without
   touching the DOM. */
body.post-type-archive-product ul.products.mk-filter-active-teens-adults li.product.mk-teens-adults-first,
  .mk-showcase ul.products.mk-filter-active-teens-adults li.product.mk-teens-adults-first {
  order: -1;
}

@media (max-width: 900px) {
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  .mk-showcase ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .mk-shop-filters {
    justify-content: flex-start;
    padding: 0;
  }
}

@media (max-width: 550px) {
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  .mk-showcase ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 5px !important;
  }

  body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
  body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
  .mk-showcase ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .mk-shop-filters {
    padding: 0;
    gap: 6px;
  }
  .mk-shop-filters__btn {
    padding: 6px 14px;
    font-size: 13px;
  }

  ul.products li.product .wcsatt-sub-options,
  ul.products li.product .wcsatt-sub-discount,
  ul.products li.product .price .wcsatt-sub-options,
  ul.products li.product .price .wcsatt-sub-discount {
    display: none !important;
  }

  body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart {
    display: flex !important;
    flex-direction: column !important;
    /* Match the simple-product ATC inset (margin: 0 8px 8px on `> a.button`)
       so variable products line up horizontally with their simple siblings;
       margin-top: auto pins the ATC block to the bottom of the card. */
    margin: auto 8px 8px !important;
    padding: 0 !important;
    gap: 4px !important;
  }
  body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button,
  body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child {
    flex: none !important;
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
  body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart .mk-add-to-cart-text,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart .mk-add-to-cart-text,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart .mk-add-to-cart-text {
    display: none !important;
  }
  /* Single-variation buttons (:only-child — e.g. Multivitamin after the
     extra variation is CSS-hidden) keep "Add to cart" visible. The desktop
     :only-child rule sizes that text at 14px/1.6, which makes the button
     ~3px taller than the simple-product ATC alongside it. Size it down on
     mobile so heights match. */
  body.post-type-archive-product ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-add-to-cart-text,
  body.tax-product_cat ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-add-to-cart-text,
  .mk-showcase ul.products li.product .mk-flavour-variations-add-to-cart a.button:only-child .mk-add-to-cart-text {
    display: inline !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  body.post-type-archive-product ul.products li.product > a.button,
  body.post-type-archive-product ul.products li.product > a.add_to_cart_button,
  body.tax-product_cat ul.products li.product > a.button,
  body.tax-product_cat ul.products li.product > a.add_to_cart_button,
  .mk-showcase ul.products li.product > a.button,
  .mk-showcase ul.products li.product > a.add_to_cart_button {
    margin: 0 8px 8px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
  }
}

@media (max-width: 768px) {
  /* Hide trust badges section and value bar on shop page — overlaps on mobile */
  .post-type-archive-product .gb-container-609e7c43,
  .post-type-archive-product .mk-shop-value-bar {
    display: none;
  }

  /* Mobile shop header — H1 + active filter indicator.
     Horizontal padding matches ul.products (5px) so the title aligns with
     the product grid edge — and with the masthead logo above. */
  .post-type-archive-product .mk-shop-mobile-header {
    display: block;
    margin-top: 0;
    padding: 96px 5px 12px;
    text-align: left;
  }
  .mk-shop-mobile-title {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f1e2e;
    margin: 0;
  }
  .mk-shop-mobile-title::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #c98e1f;
    margin-top: 10px;
    border-radius: 2px;
  }
  .mk-shop-active-filter {
    display: block;
    font-size: 13px;
    color: #c98e1f;
    font-weight: 600;
    margin-top: 8px;
  }

  body.post-type-archive-product ul.products,
  .mk-showcase ul.products {
    padding-bottom: 90px !important;
  }

  .post-type-archive-product .mk-shop-filters {
    margin-top: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(to top, #E7E0CA, #DED6BE);
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
    border-top: none;
    border-radius: 0;
    justify-content: center;
    margin-bottom: 0;
    overflow: visible;
  }

  .post-type-archive-product .mk-shop-filters::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: #DED6BE;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 12' preserveAspectRatio='none'%3E%3Cpath d='M0,12 L0,8 Q180,0 360,8 T720,8 T1080,8 T1440,8 L1440,12 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 12' preserveAspectRatio='none'%3E%3Cpath d='M0,12 L0,8 Q180,0 360,8 T720,8 T1080,8 T1440,8 L1440,12 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* Lift the 3rd-party side-cart badge above the sticky filter bar so it
     doesn't sit behind the category pills. Filter bar is ~93px tall with the
     wave cap,
  so 105px gives a 12px breath below the badge. The sticky ATC
     stylesheet isn't loaded here,
  so declare the rule locally.
     Scoped to the shop archive ONLY: that's the page where the filter bar is
     fixed to the bottom. On the home page the Product Showcase block (.mk-showcase)
     renders the same filters in normal flow — nothing to clear — so the basket must
     stay at its default bottom position there. */
  body.post-type-archive-product .mk-wsc-basket {
    bottom: 105px !important;
    transition: bottom 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* Hide breadcrumb on the shop archive — with a small catalog,
  it adds
   visual noise without navigational value. */
body.post-type-archive-product .woocommerce-breadcrumb,
  .mk-showcase .woocommerce-breadcrumb {
  display: none !important;
}