/* =========================================================================
   Homepage product cards = the same card as the /shop page.
   Covers every WooCommerce product list on the front page (Best Sellers,
   Featured, Trending, Recently Added, Recommended, Flash Sales carousels).
   These rules are the /shop card rules, re-scoped from body.fmke-shop to
   body.home, so the two stay visually identical.
   ========================================================================= */

/* ---- Product cards ---------------------------------------------------- */
body.home ul.products li.product {
  display: flex !important; flex-direction: column;
  box-sizing: border-box;
  padding: 12px 12px 14px !important;
  border-radius: 16px !important;
  text-align: left;
}
body.home ul.products li.product:hover { border-color: var(--fmke-primary) !important; }
body.home ul.products li.product > a.woocommerce-LoopProduct-link,
body.home ul.products li.product > a:first-of-type { display: block; }
body.home ul.products li.product img {
  width: 100%; height: auto; margin: 0 0 12px !important;
  aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px !important; background: var(--fmke-primary-light);
}
body.home ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: 0 0 6px !important; padding: 0 !important;
  font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.35; color: var(--fmke-dark);
}
body.home ul.products li.product .star-rating { margin: 0 0 6px; }
body.home ul.products li.product .price {
  display: block; margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--fmke-primary-dark) !important;
}
body.home ul.products li.product .price del { color: var(--fmke-muted); font-size: 13px; font-weight: 500; opacity: 1; margin-right: 4px; }
body.home ul.products li.product .price ins { background: none; text-decoration: none; }
/* Add-to-cart pinned to the bottom so buttons line up across a row */
body.home ul.products li.product a.button,
body.home ul.products li.product a.add_to_cart_button {
  margin: auto 0 0 !important; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 11px 14px !important; border-radius: 999px !important;
  font-size: 13.5px !important; font-weight: 800 !important;
}
/* No theme underline on card text / links */
body.home ul.products li.product a,
body.home ul.products li.product a:hover,
body.fmke-shop .fmke-cat-shortcut,
body.fmke-shop .fmke-cat-shortcut:hover { text-decoration: none !important; }
body.home ul.products li.product .woocommerce-loop-product__title:hover { color: var(--fmke-primary-dark); }
/* Wishlist heart: floats over the image, under the SALE badge */
body.home ul.products li.product .fmke-wishlist-btn {
  position: absolute !important; top: 46px; right: 14px; z-index: 3;
  width: 34px !important; height: 34px !important; padding: 0 !important; margin: 0 !important;
  background: #fff !important; border: 0 !important; border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(31,61,44,.2) !important; color: var(--fmke-primary) !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
body.home ul.products li.product .fmke-wishlist-btn.is-saved { background: var(--fmke-primary) !important; color: #fff !important; }
body.home ul.products li.product .fmke-wishlist-btn-label { display: none; }

/* Mobile card sizing (same as /shop). Card internals only: the carousel
   keeps its own column sizing from product-carousel.css. */
@media (max-width: 600px) {
  body.home ul.products li.product { padding: 8px 8px 12px !important; border-radius: 14px !important; }
  body.home ul.products li.product img { border-radius: 10px !important; margin-bottom: 10px !important; }
  body.home ul.products li.product .woocommerce-loop-product__title { font-size: 13.5px !important; }
  body.home ul.products li.product .price { font-size: 14.5px; margin-bottom: 10px; }
  body.home ul.products li.product a.button,
  body.home ul.products li.product a.add_to_cart_button { padding: 10px 8px !important; font-size: 12.5px !important; }
  body.home ul.products li.product .fmke-wishlist-btn { top: 40px; right: 10px; width: 30px !important; height: 30px !important; }
}

/* =========================================================================
   Service tags (SAME DAY / M-PESA / VERIFIED / FRESH) on homepage cards.
   The plugin only loads their colours on shop + category pages, so on the
   homepage they were unstyled. Same colours as /shop.
   ========================================================================= */
body.home ul.products li.product { position: relative; }
body.home ul.products li.product .fmke-badges {
  position: absolute; top: 20px; left: 20px; right: 20px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none;
}
body.home ul.products li.product .fmke-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.4; color: #fff;
  background: rgba(31, 61, 44, 0.9); box-shadow: 0 1px 3px rgba(0,0,0,.2); white-space: nowrap;
}
body.home ul.products li.product .fmke-badge-icon { font-size: 11px; line-height: 1; }
body.home ul.products li.product .fmke-badge-same-day        { background: rgba(255, 106, 0, 0.92); }
body.home ul.products li.product .fmke-badge-mpesa           { background: rgba(0, 121, 63, 0.92); }   /* green M-Pesa tag */
body.home ul.products li.product .fmke-badge-verified-vendor { background: rgba(31, 61, 44, 0.92); }
body.home ul.products li.product .fmke-badge-fresh-today     { background: rgba(176, 138, 62, 0.92); }

/* Service tags on the single-product page cards (Related products, Up-sells,
   etc.). The plugin's tag CSS isn't loaded there, so the M-Pesa tag showed as
   plain purple text. Same pill look/colours as the homepage + /shop. */
body.single-product ul.products li.product .fmke-badges {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px;
}
body.single-product ul.products li.product .fmke-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  color: #fff !important; background: rgba(31, 61, 44, 0.92);
  box-shadow: 0 1px 3px rgba(0,0,0,.2); white-space: nowrap; text-transform: none;
}
body.single-product ul.products li.product .fmke-badge-icon { font-size: 11px; line-height: 1; }
body.single-product ul.products li.product .fmke-badge-same-day        { background: rgba(255, 106, 0, 0.92); }
body.single-product ul.products li.product .fmke-badge-mpesa           { background: rgba(0, 121, 63, 0.95); }   /* green M-Pesa tag */
body.single-product ul.products li.product .fmke-badge-verified-vendor { background: rgba(31, 61, 44, 0.92); }
body.single-product ul.products li.product .fmke-badge-fresh-today     { background: rgba(176, 138, 62, 0.92); }

/* =========================================================================
   Carousel column sizing, matched to /shop's card width
   (shop shows ~215px+ cards; phones show 2 per row).
   gap and the "- N * gap" in each calc() must stay in sync.
   ========================================================================= */
body.home ul.fmke-pcarousel__track.products {
  grid-auto-columns: calc((100% - 4 * 16px) / 5);   /* desktop: 5 cards */
  gap: 16px;
}
@media (max-width: 1200px) {
  body.home ul.fmke-pcarousel__track.products { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
}
@media (max-width: 900px) {
  body.home ul.fmke-pcarousel__track.products { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; }
}
@media (max-width: 600px) {
  /* phones: 2 cards per row, exactly like /shop */
  body.home ul.fmke-pcarousel__track.products { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
  body.home ul.products li.product .fmke-badges { top: 14px; left: 14px; right: 50px; }
  body.home ul.products li.product .fmke-badge { padding: 3px 8px; font-size: 9.5px; }
  body.home ul.products li.product .fmke-badge-icon { display: none; }
  body.home ul.products li.product .onsale { top: 6px !important; right: 6px !important; left: auto !important; }
}

/* =========================================================================
   Carousel arrows
   - Phones / tablets / any touch screen: no arrows at all (swipe instead).
   - Desktop with a mouse: arrows stay hidden and fade in only while the
     pointer is over that carousel (or a keyboard user focuses inside it).
   Applies to every homepage product carousel, incl. Flash Sales.
   ========================================================================= */
.fmke-pcarousel .fmke-pcarousel__arrow,
.fmke-flash-sales-section .fmke-slider-arrow {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.fmke-pcarousel:hover .fmke-pcarousel__arrow,
.fmke-pcarousel:focus-within .fmke-pcarousel__arrow,
.fmke-flash-sales-section:hover .fmke-slider-arrow,
.fmke-flash-sales-section:focus-within .fmke-slider-arrow {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none), (pointer: coarse), (max-width: 782px) {
  .fmke-pcarousel .fmke-pcarousel__arrow,
  .fmke-flash-sales-section .fmke-slider-arrow { display: none !important; }
}