/* =========================================================================
   Header cart — icon pill + hover mini-cart dropdown.
   Targets Storefront's default markup (.site-header-cart, .cart-contents,
   .count/.cart-contents-count) and WooCommerce's default mini-cart widget
   classes (.widget_shopping_cart_content, .cart_list, .mini_cart_item, …),
   since neither is custom to this site.
   ========================================================================= */

@media (min-width: 783px) {
  .site-header-cart {
    position: relative;
    float: right;
    margin-left: 12px;
  }
}

/* ---- Toggle pill ---------------------------------------------------- */
.site-header-cart .cart-contents,
.site-header a.cart-contents {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--fmke-primary-light, #FFF1E0);
  color: var(--fmke-dark, #1F3D2C) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}
.site-header-cart .cart-contents:hover,
.site-header a.cart-contents:hover {
  background: var(--fmke-primary, #FF6A00);
  color: #fff !important;
}
.site-header-cart .cart-contents:hover .fmke-cart-icon,
.site-header a.cart-contents:hover .fmke-cart-icon { color: #fff; }

.fmke-cart-icon { color: var(--fmke-primary, #FF6A00); flex: 0 0 auto; }

/* Unify the count badge — was styled two different colors across two
   plugin files (red vs orange); orange wins, consistently, everywhere. */
.site-header-cart .cart-contents-count,
.site-header-cart .cart-contents .count,
.site-header a.cart-contents .count {
  background: var(--fmke-primary, #FF6A00) !important;
  color: #fff !important;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1 !important;
}
.site-header-cart .cart-contents:hover .count,
.site-header-cart .cart-contents:hover .cart-contents-count {
  background: #fff !important;
  color: var(--fmke-primary, #FF6A00) !important;
}
.site-header-cart .cart-contents .amount {
  font-weight: 800;
  font-size: 13px;
}

/* ---- Hover mini-cart dropdown ---------------------------------------- */
/* Force it into the DOM at all times, hidden via opacity/visibility
   instead of display, so it can actually transition in/out smoothly
   instead of Storefront's abrupt default show/hide. Being position:
   absolute + visibility:hidden means it never affects layout or receives
   focus/clicks while closed. */
.site-header-cart .widget_shopping_cart_content {
  display: block !important;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  width: 320px;
  max-width: 90vw;
  background: #fff;
  border: 1px solid var(--fmke-border, #F0E4D8);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  /* Closing has a short delay (.15s) so a slightly off-path mouse
     movement doesn't slam it shut; opening (below) has none. */
  transition: opacity .18s ease .15s, transform .18s ease .15s, visibility 0s linear .33s;
  z-index: 200;
}
/* Invisible bridge covering the 10px gap between the cart pill and the
   card. It belongs to the card, so hovering it counts as hovering the
   card — the mouse can travel from icon to card without ever leaving
   hover territory. */
.site-header-cart .widget_shopping_cart_content::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.site-header-cart:hover .widget_shopping_cart_content,
.site-header-cart:focus-within .widget_shopping_cart_content,
.site-header-cart .widget_shopping_cart_content:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.widget_shopping_cart_content ul.cart_list,
.widget_shopping_cart_content ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.widget_shopping_cart_content ul.cart_list li,
.widget_shopping_cart_content ul.woocommerce-mini-cart li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding: 10px 26px 10px 0;
  border-bottom: 1px solid var(--fmke-border, #F0E4D8);
}
.widget_shopping_cart_content ul.cart_list li:last-child { border-bottom: none; }

.widget_shopping_cart_content ul.cart_list li img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
  order: -1;
}
.widget_shopping_cart_content ul.cart_list li a:not(.remove) {
  font-size: 13px;
  font-weight: 700;
  color: var(--fmke-dark, #1F3D2C);
  text-decoration: none !important;
  display: block;
  line-height: 1.3;
}
.widget_shopping_cart_content ul.cart_list li a:not(.remove):hover { color: var(--fmke-primary, #FF6A00); }
.widget_shopping_cart_content ul.cart_list li dl.variation,
.widget_shopping_cart_content ul.cart_list li .quantity {
  font-size: 12px;
  color: var(--fmke-muted, #767676);
  margin: 2px 0 0;
}
.widget_shopping_cart_content ul.cart_list li .quantity .amount { color: var(--fmke-muted, #767676); }

.widget_shopping_cart_content ul.cart_list li a.remove,
.widget_shopping_cart_content ul.cart_list li a.remove_from_cart_button {
  position: absolute;
  top: 10px;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fmke-primary-light, #FFF1E0) !important;
  color: var(--fmke-dark, #1F3D2C) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.widget_shopping_cart_content ul.cart_list li a.remove:hover,
.widget_shopping_cart_content ul.cart_list li a.remove_from_cart_button:hover {
  background: var(--fmke-sale, #E0201E) !important;
  color: #fff !important;
}

.widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
  margin: 4px 0 0;
  padding: 18px 0;
  text-align: center;
  color: var(--fmke-muted, #767676);
  font-size: 13.5px;
}

.widget_shopping_cart_content .total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--fmke-border, #F0E4D8);
  font-weight: 800;
  font-size: 14px;
  color: var(--fmke-dark, #1F3D2C);
}
.widget_shopping_cart_content .total::before { content: "Subtotal"; font-weight: 700; }
.widget_shopping_cart_content .total .amount { color: var(--fmke-primary, #FF6A00); }

.widget_shopping_cart_content .woocommerce-mini-cart__buttons,
.widget_shopping_cart_content p.buttons {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button,
.widget_shopping_cart_content p.buttons a.button {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout),
.widget_shopping_cart_content p.buttons a.wc-forward:not(.checkout) {
  background: var(--fmke-primary-light, #FFF1E0) !important;
  color: var(--fmke-dark, #1F3D2C) !important;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.checkout,
.widget_shopping_cart_content p.buttons a.checkout {
  background: var(--fmke-dark, #1F3D2C) !important;
  color: #fff !important;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.checkout:hover,
.widget_shopping_cart_content p.buttons a.checkout:hover { background: #16301f !important; }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover,
.widget_shopping_cart_content p.buttons a.wc-forward:not(.checkout):hover {
  background: var(--fmke-primary, #FF6A00) !important;
  color: #fff !important;
}

@media (max-width: 782px) {
  /* Hover dropdowns don't make sense on touch — the bottom-nav Cart tap
     goes straight to the cart page instead, so hide this here. */
  .site-header-cart .widget_shopping_cart_content { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header-cart .widget_shopping_cart_content { transition: none !important; }
}