/*************************************************************
 * ModernCart Overrides – Child Theme
 * -----------------------------------------------------------
 * Purpose : Clean up & restyle ModernCart slide-out and
 *           recommendations (cards, headings, arrows, etc.)
 * Location: /wp-content/themes/your-child-theme/moderncart-overrides.css
 * Safe    : Survives theme/plugin updates
 * Notes   : Last updated: Oct 2025
 *************************************************************/

/* ========================
   Brand Colour Variables
   ======================== */
:root {
  --ml-gold: rgb(184, 163, 59);
  --ml-text-grey: #555;
}

/* ========================
   Empty-cart intro section
   ======================== */
#moderncart-slide-out .moderncart-slide-out-empty-cart-recommendations {
  padding: 8px !important;
  margin: 0 !important;
  box-sizing: border-box;
  text-align: centre;
}

#moderncart-slide-out .moderncart-slide-out-empty-cart-recommendations h4 {
  margin: 4px 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 600;
  color: var(--ml-gold) !important;
  text-align: centre !important;
}

/* ========================
   Recommendations header
   ======================== */
#moderncart-recommendations-slide .moderncart-slide-header {
  background: #000 !important;
  padding: 8px 12px;
  text-align: centre;
}

#moderncart-recommendations-slide .moderncart-slide-header > h3 {
  color: #fff !important;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  font-weight: 600;
}

/* ========================
   Product grid & cards
   ======================== */
#moderncart-recommendations-slide .moderncart-recommendations-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 12px;
  box-sizing: border-box;
}

@media (max-width: 420px) {
  #moderncart-recommendations-slide .moderncart-recommendations-grid {
    grid-template-columns: 1fr;
  }
}

#moderncart-recommendations-slide .moderncart-recommendation-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  box-sizing: border-box;
  overflow: hidden;
  text-align: centre;
}

/* Product image */
#moderncart-recommendations-slide .moderncart-recommendation-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 0;
}

/* Titles */
#moderncart-recommendations-slide .moderncart-recommendation-item h1,
#moderncart-recommendations-slide .moderncart-recommendation-item h2,
#moderncart-recommendations-slide .moderncart-recommendation-item h3,
#moderncart-recommendations-slide .moderncart-recommendation-item h4,
#moderncart-recommendations-slide .moderncart-recommendation-item .woocommerce-loop-product__title,
#moderncart-recommendations-slide .moderncart-recommendation-item [class*="product-title"] {
  font-size: clamp(14px, 2vw, 16px) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600;
}

/* Price */
#moderncart-recommendations-slide .moderncart-recommendation-item .price,
#moderncart-recommendations-slide .moderncart-recommendation-item .price ins,
#moderncart-recommendations-slide .moderncart-recommendation-item .price del,
#moderncart-recommendations-slide .moderncart-recommendation-item p.moderncart-recommendation-price {
  color: var(--ml-text-grey) !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  margin: 2px 0 0;
}

#moderncart-recommendations-slide .moderncart-recommendation-item .price del {
  opacity: .6;
}

/* Add-to-cart button */
#moderncart-recommendations-slide .moderncart-recommendation-item a.button,
#moderncart-recommendations-slide .moderncart-recommendation-item .button,
#moderncart-recommendations-slide .moderncart-recommendation-item .moderncart-button {
  position: static !important;
  transform: none !important;
  inset: auto !important;
  display: block;
  width: 100%;
  margin-top: auto;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: centre;
}

/* ========================
   Carousel controls
   ======================== */

/* Hide pagination dots */
#moderncart-slide-out .splide__pagination {
  display: none !important;
}

/* Show big gold chevron arrows */
#moderncart-slide-out .splide__arrow {
  display: flex !important;
  align-items: centre;
  justify-content: centre;
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  width: 48px;
  height: 48px;
  opacity: 1;
  z-index: 10;
  cursor: pointer;
}

#moderncart-slide-out .splide__arrow::after {
  content: '›';
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--ml-gold);
}

#moderncart-slide-out .splide__arrow.splide__arrow--prev::after {
  content: '‹';
}

/* ========================
   Back-to-cart button
   ======================== */
#moderncart-slide-out .moderncart-slide-back {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 20;
}

#moderncart-slide-out .moderncart-slide-back svg {
  fill: var(--ml-gold) !important;
  stroke: var(--ml-gold) !important;
  width: 24px;
  height: 24px;
}

/* ========================
   Order Summary text visibility (generic)
   ======================== */
#moderncart-slide-out .moderncart-summary-title,
#moderncart-slide-out .moderncart-order-summary-title,
#moderncart-slide-out .moderncart-summary-section h3,
#moderncart-slide-out .moderncart-order-summary h3 {
  color: var(--ml-text-grey) !important;
}

/* ========================
   Order Summary (style 2) – force readable subtle grey
   ======================== */
#moderncart-slide-out .moderncart-slide-out-footer
  .moderncart-cart-total.moderncart-order-summary-style-style2 h3,
#moderncart-slide-out .moderncart-slide-out-footer
  .moderncart-cart-total.moderncart-order-summary-style-style2 .moderncart-order-summary-title {
  color: var(--ml-text-grey) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}