/* =========================================================================
   FLEVAMALL — theme fill-in stylesheet (v2)

   IMPORTANT CONTEXT (found by reading the plugin's own PHP):
   Almost every fmke-* widget — category shortcuts, shop sidebar, featured
   vendors, banners, flash sales, wishlist, footer, live search, account
   dropdown, badges — already ships its own complete CSS, hard-coded via
   wp_add_inline_style() inside each class-*.php file. That existing design
   uses a maroon/cream palette (#7A2048 / #FBF7F0) with serif headings.

   v1 of this file re-styled those same widgets with a different orange
   scheme and different layout assumptions, which fought the plugin's own
   CSS on every page — that's what caused the "messed up" All/Flowers tags.

   v2 below does two things only:
   1. Matches the site's ALREADY-ESTABLISHED palette (maroon/cream) instead
      of introducing a clashing orange one, for the couple of things the
      plugin genuinely does NOT style: the raw WooCommerce product grid/
      cards, the add-to-cart buttons, and the sort-by dropdown.
   2. Fixes one real bug in the plugin's own shop-sidebar CSS: it applies
      display:flex to the category <a> tag expecting the item count to be
      inside it, but WooCommerce's widget actually outputs the count as a
      sibling <span> outside the <a> — so the flex rule never touches it.
      This patch targets the parent <li> instead, which the count and the
      link both actually sit inside.

   Everything else — cat shortcuts, banners, vendors, footer, etc. — is
   left untouched on purpose. It already works.
   ========================================================================= */

:root {
  --fmke-primary: #FF6A00;      /* vibrant Jumia-style orange, matches the recolored plugin files */
  --fmke-primary-dark: #CC5500;
  --fmke-primary-light: #FFF1E0;
  --fmke-dark: #1F3D2C;
  --fmke-sale: #E0201E;
  --fmke-text: #1F3D2C;
  --fmke-muted: #767676;
  --fmke-card: #ffffff;
  --fmke-border: #F0E4D8;
  --fmke-radius: 6px;
  --fmke-shadow: 0 1px 3px rgba(0,0,0,.08);
  --fmke-shadow-hover: 0 10px 24px rgba(255,106,0,.18);
}

/* -------------------------------------------------------------------- *
 * 1. WooCommerce product grid (genuinely unstyled by the plugin)
 * -------------------------------------------------------------------- */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  list-style: none !important;
}

/* Best Sellers / Trending Products: sliders, not static grids */
.fmke-best-sellers ul.products,
.fmke-trending-products ul.products,
.fmke-flash-sales-section ul.products {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 18px !important;
  padding: 4px 4px 14px;
  list-style: none !important;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.fmke-best-sellers ul.products::-webkit-scrollbar,
.fmke-trending-products ul.products::-webkit-scrollbar,
.fmke-flash-sales-section ul.products::-webkit-scrollbar {
  display: none;
}

.fmke-best-sellers ul.products li.product,
.fmke-trending-products ul.products li.product,
.fmke-flash-sales-section ul.products li.product {
  flex: 0 0 220px;
  scroll-snap-align: start;
}

.fmke-best-sellers,
.fmke-trending-products,
.fmke-flash-sales-section {
  position: relative;
}

/* Slider nav arrows, injected by fmke-slider.js */
.fmke-slider-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--fmke-primary);
  box-shadow: var(--fmke-shadow-hover);
  font-size: 16px;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background .15s ease;
}

.fmke-slider-arrow:hover {
  background: var(--fmke-primary);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.fmke-slider-arrow-prev { left: -6px; }
.fmke-slider-arrow-next { right: -6px; }

@media (max-width: 782px) {
  .fmke-slider-arrow { display: none; } /* touch-scroll on mobile instead */
}

/* Neutralise WooCommerce core's float-based clearfix, which otherwise
   inserts an invisible extra grid item and shifts every product tile. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  clear: none !important;
  background: var(--fmke-card) !important;
  border: 1px solid var(--fmke-border) !important;
  border-radius: var(--fmke-radius) !important;
  padding: 14px !important;
  margin: 0 !important;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--fmke-shadow) !important;
}

ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--fmke-shadow-hover) !important;
}

ul.products li.product img {
  border-radius: var(--fmke-radius);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fafafa;
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fmke-text);
  margin: 10px 0 4px;
  min-height: 38px;
}

ul.products li.product .price ins {
  color: var(--fmke-sale) !important;
  font-weight: 800 !important;
  text-decoration: none;
}

ul.products li.product .price del {
  color: var(--fmke-muted);
  font-size: 12px;
  opacity: .8;
}

ul.products li.product .star-rating { color: var(--fmke-primary); }

.onsale,
span.onsale,
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale {
  background: var(--fmke-sale) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  min-height: unset !important;
  min-width: unset !important;
  height: auto !important;
  width: auto !important;
  line-height: 1.4 !important;
  padding: 3px 8px !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 3;
}

ul.products li.product a.button,
ul.products li.product a.add_to_cart_button,
.single_add_to_cart_button {
  background: var(--fmke-primary) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  transition: background .15s ease;
}

ul.products li.product a.button:hover,
ul.products li.product a.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
  background: var(--fmke-primary-dark) !important;
}

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

/* -------------------------------------------------------------------- *
 * 2. Sort-by dropdown (no CSS anywhere in the plugin for this)
 * -------------------------------------------------------------------- */
.woocommerce-ordering select,
.woocommerce-ordering .orderby {
  border: 1px solid var(--fmke-border);
  border-radius: var(--fmke-radius);
  padding: 8px 32px 8px 12px;
  font-size: 13px;
  color: var(--fmke-text);
  background-color: #fff;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23FF6A00'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

.woocommerce-ordering select:focus,
.woocommerce-ordering .orderby:focus {
  outline: none;
  border-color: var(--fmke-primary);
}

/* -------------------------------------------------------------------- *
 * 3. Fix: shop-sidebar category count alignment
 * The plugin's own CSS puts display:flex on the <a>, but WooCommerce's
 * widget renders the count as a sibling <span> outside the <a>, so that
 * rule never reaches it. Move the flex behaviour to the actual parent.
 * -------------------------------------------------------------------- */
.fmke-shop-sidebar .widget_product_categories li {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.fmke-shop-sidebar .widget_product_categories li > a {
  flex: 1 1 auto;
  min-width: 0;
}

.fmke-shop-sidebar .widget_product_categories li > .count {
  flex: 0 0 auto;
}

/* Keep the children list (for categories with subcategories) on its own
   full-width row, unaffected by the count-alignment fix above. */
.fmke-shop-sidebar .widget_product_categories li.cat-parent > ul.children {
  flex-basis: 100%;
}

/* =========================================================================
   HOW TO INSTALL
   Already handled if you're using the fmke-jumia-style plugin — just
   replace style.css inside that plugin's folder with this file and
   deactivate/reactivate the plugin (or hard-refresh if it's already active).
   ========================================================================= */

/* =========================================================================
   PART 2 — Header, nav, and other zones confirmed NOT touched by any
   fmke-*.php file (checked against the plugin source, not guessed), plus
   an animation layer. Safe to style with zero conflict risk.
   ========================================================================= */

@keyframes fmke-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fmke-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179,38,30,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(179,38,30,0); }
}

/* -------------------------------------------------------------------- *
 * 4. Site header / navigation
 * -------------------------------------------------------------------- */
.site-header {
  background: #fff;
  border-bottom: 3px solid var(--fmke-primary);
  box-shadow: var(--fmke-shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 8px 0 !important;
}

.site-header .col-full,
.site-header .site-branding,
.site-header .storefront-primary-navigation {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.site-branding .site-description {
  display: none; /* the default "My WordPress Blog" tagline — remove properly in Settings > General, this just hides it visually */
}

.main-navigation ul {
  margin: 0;
}

.site-branding .site-title,
.site-branding .site-title a,
.site-branding .site-logo-anchor {
  color: var(--fmke-primary) !important;
  font-weight: 800;
  letter-spacing: -.5px;
}

.main-navigation ul li a {
  color: var(--fmke-dark);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .3px;
  position: relative;
  padding: 8px 12px !important;
  line-height: 1.2;
}

/* Constrain content width so sections don't stretch edge-to-edge on wide
   screens — this is what was making the banner grid look uneven/stretched. */
.fmke-promo-banners,
.fmke-best-sellers,
.fmke-trending-products,
.fmke-flash-sales-section,
.fmke-top-categories-grid,
.fmke-featured-vendors-grid {
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.main-navigation ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--fmke-primary);
  transition: width .2s ease;
}

.main-navigation ul li a:hover {
  color: var(--fmke-primary);
}

.main-navigation ul li a:hover::after {
  width: 100%;
}

/* Cart icon: subtle bounce on hover */
.site-header-cart .cart-contents,
.site-header a.cart-contents {
  transition: transform .2s ease;
}

.site-header-cart .cart-contents:hover,
.site-header a.cart-contents:hover {
  transform: translateY(-2px) scale(1.05);
}

.site-header-cart .cart-contents .count,
.site-header a.cart-contents .count {
  background: var(--fmke-sale);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 700;
  font-size: 11px;
}

/* Mobile menu toggle (Storefront's handheld nav button) */
button.menu-toggle {
  border: 1px solid var(--fmke-border);
  border-radius: var(--fmke-radius);
  transition: background .15s ease, border-color .15s ease;
}

button.menu-toggle:hover {
  background: var(--fmke-primary-light);
  border-color: var(--fmke-primary);
}

/* -------------------------------------------------------------------- *
 * 5. Breadcrumbs
 * -------------------------------------------------------------------- */
.woocommerce-breadcrumb {
  font-size: 12px;
  color: var(--fmke-muted);
  padding: 10px 0;
}

.woocommerce-breadcrumb a {
  color: var(--fmke-primary);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------- *
 * 6. Pagination
 * -------------------------------------------------------------------- */
.woocommerce-pagination ul.page-numbers {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--fmke-border);
  border-radius: var(--fmke-radius);
  color: var(--fmke-text);
  text-decoration: none;
  font-size: 13px;
  transition: all .15s ease;
}

.woocommerce-pagination .page-numbers li a:hover {
  background: var(--fmke-primary);
  border-color: var(--fmke-primary);
  color: #fff;
  transform: translateY(-2px);
}

.woocommerce-pagination .page-numbers li span.current {
  background: var(--fmke-primary);
  border-color: var(--fmke-primary);
  color: #fff;
  font-weight: 700;
}

/* -------------------------------------------------------------------- *
 * 7. WooCommerce notices (add-to-cart, errors, info)
 * -------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--fmke-primary) !important;
  background: var(--fmke-primary-light);
  animation: fmke-fade-up .3s ease;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--fmke-primary) !important;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  background: var(--fmke-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

.woocommerce-error {
  border-top-color: var(--fmke-sale) !important;
  animation: fmke-fade-up .3s ease;
}

.woocommerce-error::before { color: var(--fmke-sale) !important; }

/* -------------------------------------------------------------------- *
 * 8. Single product page (tabs, quantity input, related heading)
 * -------------------------------------------------------------------- */
.woocommerce-tabs ul.tabs li {
  border: none !important;
  background: none !important;
}

.woocommerce-tabs ul.tabs li a {
  font-weight: 600;
  color: var(--fmke-muted);
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--fmke-primary);
  border-bottom-color: var(--fmke-primary);
}

.quantity .qty {
  border: 1px solid var(--fmke-border);
  border-radius: var(--fmke-radius);
  padding: 8px 10px;
  text-align: center;
}

.related.products > h2,
.upsells.products > h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--fmke-dark);
  border-left: 5px solid var(--fmke-primary);
  padding-left: 12px;
  margin: 32px 0 16px;
}

/* -------------------------------------------------------------------- *
 * 9. Motion layer for the product grid we already own
 * -------------------------------------------------------------------- */
ul.products li.product {
  animation: fmke-fade-up .35s ease both;
  overflow: hidden;
}

ul.products li.product:nth-child(2) { animation-delay: .05s; }
ul.products li.product:nth-child(3) { animation-delay: .1s; }
ul.products li.product:nth-child(4) { animation-delay: .15s; }
ul.products li.product:nth-child(5) { animation-delay: .2s; }
ul.products li.product:nth-child(6) { animation-delay: .25s; }
ul.products li.product:nth-child(n+7) { animation-delay: .3s; }

ul.products li.product a img {
  transition: transform .35s ease;
}

ul.products li.product:hover img {
  transform: scale(1.06);
}

.onsale,
span.onsale {
  animation: fmke-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  ul.products li.product,
  .onsale,
  span.onsale,
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info {
    animation: none !important;
  }
}