/* =========================================================================
   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;
}

/* Note: Best Sellers / Trending / Featured / Recently Added / Recommended
   no longer use this — they moved to the shared .fmke-pcarousel component
   (flower-main/assets/product-carousel.css), which handles its own
   scrolling grid independently. Flash Sales is the only section still
   using this older flex-slider approach. */
.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-flash-sales-section ul.products::-webkit-scrollbar {
  display: none;
}

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

.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-pcarousel,
.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 base is now handled by cart-style.css (icon, pill, hover
   dropdown). Only the bounce-on-hover motion stays here since it's part
   of the original interaction design. */
.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);
}

/* 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; }

/* Desktop spacing fix: Storefront gives the breadcrumb band ~3em of bottom
   margin plus ~1.6em of padding from 768px up, which left a big empty white
   strip between the breadcrumb and the page content on every page. Tighten it
   sitewide; pages with their own breadcrumb rules (shop, cart, checkout,
   store page, my orders) override this with the same compact values. */
@media (min-width: 768px) {
  .storefront-breadcrumb { margin: 0 !important; padding: 16px 0 8px !important; }
  .storefront-breadcrumb .woocommerce-breadcrumb { margin: 0 !important; padding: 0 !important; }
}
/* Pages whose content area is cream: let the breadcrumb band match so there is
   no white strip above the cream section. */
:is(body.woocommerce-account, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .storefront-breadcrumb { background: #F6F3EE; }
:is(body.woocommerce-account, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .storefront-breadcrumb .col-full { max-width: 1280px; }

/* -------------------------------------------------------------------- *
 * 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;
}

/* -------------------------------------------------------------------- *
 * 8. Shop / category page header + toolbar (genuinely unstyled before —
 *    "Showing 1–16 of 42 results" and the sort dropdown had no layout,
 *    and the "Shop"/category title used the browser/theme default).
 * -------------------------------------------------------------------- */
.woocommerce-products-header__title.page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--fmke-dark);
  margin: 20px 0 6px;
}

/* Storefront wraps result-count + ordering together in this element. If a
   different theme doesn't use it, the two rules below still style each
   piece individually rather than depending on the wrapper existing. */
.storefront-sorting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--fmke-border);
}

.woocommerce-result-count {
  color: var(--fmke-muted);
  font-size: 13px;
  margin: 0;
}

@media (max-width: 480px) {
  .woocommerce-products-header__title.page-title { font-size: 24px; }
  .storefront-sorting { flex-direction: column; align-items: flex-start; }
}

/* Tablet: the shop grid sits inside a 73%-width column alongside the
   category sidebar (see class-shop-sidebar.php), so 4 fixed columns get
   uncomfortably narrow well before the existing 782px mobile breakpoint
   (which also drops the sidebar to full width). 3 columns in between. */
@media (min-width: 783px) and (max-width: 1024px) {
  ul.products:not(.fmke-pcarousel__track) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}


.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; }

/* -------------------------------------------------------------------- *
 * 9. 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;
}

/* Hide the page title on the front page only (the blank "Home" page used
   just to host the banners/best-sellers/etc.) — WordPress renders every
   page's title automatically, which otherwise leaves an empty "Home"
   heading sitting above the footer. Every other page keeps its title. */
body.home .entry-header,
body.home .page-title {
  display: none !important;
}

body.home .entry-content:empty {
  margin: 0 !important;
  padding: 0 !important;
}

/* -------------------------------------------------------------------- *
 * 10. 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;
  }
}

/* -------------------------------------------------------------------- *
 * Page rhythm — one consistent, compact vertical spacing for every
 * cream-background page (breadcrumb → title → content).
 * Storefront / WooCommerce blocks / WP layout each add their own top
 * margin or padding, which stacked into ~100px of empty space between the
 * page title and the first card on desktop. Pages with a page title:
 * account, cart, checkout, my orders, store list, onboarding, wishlist.
 * -------------------------------------------------------------------- */
:is(body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.fmke-my-orders, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .site-content {
  padding-top: 0 !important;
}
:is(body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.fmke-my-orders, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .site-main,
:is(body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.fmke-my-orders, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .hentry {
  margin-top: 0 !important; padding-top: 0 !important;
}
:is(body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.fmke-my-orders, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .entry-header {
  margin: 0 0 18px !important; padding: 0 !important;
}
:is(body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.fmke-my-orders, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .entry-title {
  margin-top: 12px !important; padding-bottom: 12px !important;
}
/* Nothing inside the page content should push the first card down */
:is(body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.fmke-my-orders, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .entry-content > :first-child {
  margin-top: 0 !important;
}
:is(body.woocommerce-cart, body.woocommerce-checkout) .entry-content > .wp-block-spacer,
:is(body.woocommerce-cart, body.woocommerce-checkout) .entry-content > p:empty,
:is(body.woocommerce-cart, body.woocommerce-checkout) .woocommerce-notices-wrapper:empty,
:is(body.woocommerce-cart, body.woocommerce-checkout) .wc-block-components-notices:empty { display: none !important; }
/* Cart + checkout blocks: wrappers that add their own top space */
:is(body.woocommerce-cart, body.woocommerce-checkout) .entry-content > .wp-block-woocommerce-cart,
:is(body.woocommerce-cart, body.woocommerce-checkout) .entry-content > .wp-block-woocommerce-checkout,
:is(body.woocommerce-cart, body.woocommerce-checkout) .entry-content > .woocommerce,
:is(body.woocommerce-cart, body.woocommerce-checkout) .wp-block-woocommerce-filled-cart-block,
:is(body.woocommerce-cart, body.woocommerce-checkout) .wc-block-cart,
:is(body.woocommerce-cart, body.woocommerce-checkout) .wc-block-checkout,
:is(body.woocommerce-cart, body.woocommerce-checkout) .wc-block-components-sidebar-layout,
:is(body.woocommerce-cart, body.woocommerce-checkout) .wc-block-components-sidebar-layout > .wc-block-components-main,
:is(body.woocommerce-cart, body.woocommerce-checkout) .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
  margin-top: 0 !important; padding-top: 0 !important;
}
:is(body.woocommerce-cart, body.woocommerce-checkout) .wc-block-components-sidebar-layout .wc-block-cart-items { margin-top: 0 !important; }

@media (max-width: 782px) {
  :is(body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.fmke-my-orders, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .entry-header { margin-bottom: 14px !important; }
  :is(body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.fmke-my-orders, body.fmke-store-listing, body:has(#dokan-seller-listing-wrap), body.fmke-onboarding, body.fmke-wishlist) .entry-title { margin-top: 8px !important; }
}

/* -------------------------------------------------------------------- *
 * Storefront sticky "You're viewing … Add to cart" bar on product pages.
 * It used Storefront's default dark button; match the theme's orange pill.
 * -------------------------------------------------------------------- */
.storefront-sticky-add-to-cart a.button,
.storefront-sticky-add-to-cart .storefront-sticky-add-to-cart__content-button {
  background: var(--fmke-primary) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  transition: background .15s ease;
}
.storefront-sticky-add-to-cart a.button:hover,
.storefront-sticky-add-to-cart .storefront-sticky-add-to-cart__content-button:hover {
  background: var(--fmke-primary-dark) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------- *
 * "View cart" link that WooCommerce injects after Add to cart (AJAX).
 * Footer-green so it reads as a different action from the orange button.
 * -------------------------------------------------------------------- */
a.added_to_cart,
a.added_to_cart.wc-forward,
.woocommerce a.added_to_cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--fmke-dark) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background .15s ease;
}
a.added_to_cart:hover,
.woocommerce a.added_to_cart:hover {
  background: #2C5640 !important;
  color: #fff !important;
}