/* Header & menus background to BLACK */
header, .salla-header, .site-header,
.top-navbar, .navbar, nav,
.salla-menu, .menu,
.bottom-nav, .mobile-bottom-nav, .salla-bottom-nav,
[class*="header"], [class*="nav"], [class*="menu"], [class*="topbar"] {
  background: #000000 !important;
  background-image: none !important;
}
/* Turn secondary / muted text to white */
.text-muted,
.text-secondary,
.text-subtitle,
.sub-title,
.subtitle,
.small,
small,
[class*="muted"],
[class*="secondary"],
[class*="subtitle"],
[class*="sub-title"] {
  color: #ffffff !important;
}
/* FINAL: soft outline only + force inner overlays off */
.s-product-card,
.s-product-card-entry,
[class*="product-card"],
[class*="product-item"]{
  background: #000 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: 0 0 0 2px rgba(233, 81, 86, 0.35) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* kill any overlay fills (very common cause of red fill) */
.s-product-card::before,
.s-product-card::after,
.s-product-card-entry::before,
.s-product-card-entry::after,
[class*="product-card"]::before,
[class*="product-card"]::after,
[class*="product-item"]::before,
[class*="product-item"]::after{
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}
/* Remove ALL inner frames inside product card (borders/shadows/outline/overlays) */
.s-product-card-entry *:not(img):not(picture):not(svg),
.s-product-card *:not(img):not(picture):not(svg),
[class*="product-card"] *:not(img):not(picture):not(svg),
[class*="product-item"] *:not(img):not(picture):not(svg) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Also remove pseudo-element frames inside the card */
.s-product-card-entry *::before,
.s-product-card-entry *::after,
.s-product-card *::before,
.s-product-card *::after,
[class*="product-card"] *::before,
[class*="product-card"] *::after,
[class*="product-item"] *::before,
[class*="product-item"] *::after {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
}
/*
  NEW FIX: Target SVG icons directly to remove borders/shadows.
  This is based on the class name found via inspect element.
*/
.product-card-actions-add-to-cart-icon,
.product-card-actions-wishlist-icon {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
/*
  FIX: Target SVG icons for "Add to Cart" and "Wishlist" directly
  to remove any borders, shadows, or background circles.
*/
.product-card-actions-add-to-cart-icon,
.product-card-actions-wishlist-icon {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* 1) Reset: don't scale ANY footer icons/images by default */
footer img,
footer svg {
  height: auto !important;
  width: auto !important;
}

/* 2) Scale ONLY the logo (common logo containers + logo file names) */
footer :is(.footer-logo, .site-footer__logo, .store-footer__logo, [class*="footer-logo"], [class*="footer__logo"], [class*="logo"]) :is(img, svg),
footer :is(img, svg)[src*="logo"],
footer :is(img, svg)[src*="Logo"],
footer :is(img, svg)[alt*="logo"],
footer :is(img, svg)[alt*="Logo"] {
  height: 110px !important;
  width: auto !important;
  max-width: 100% !important;
}

/* 3) Force phone (tel:) icon to stay normal size */
footer a[href^="tel:"] svg,
footer a[href^="tel:"] img {
  height: 16px !important;
  width: 16px !important;
}
/* Phone icon + number color */
footer a[href^="tel:"] {
  color: #e95156 !important;
}

footer a[href^="tel:"] svg {
  fill: #e95156 !important;
  stroke: #e95156 !important;
}
/* Space under footer logo only */
footer a[aria-label="Store Homepage"] {
  display: inline-block !important;
  margin-bottom: 24px !important;
}
/* Header logo +20% (covers most Salla themes) */
:where(header, .salla-header, .site-header)
  :where(a[aria-label*="Store"], a[aria-label*="Homepage"], a[aria-label*="Home"], a[href="/"], a[href="./"])
  img {
  transform: scale(1.2) !important;
  transform-origin: left center !important;
}

/* Prevent header height from clipping the bigger logo */
:where(header, .salla-header, .site-header) {
  overflow: visible !important;
}
/* Cart item box: stroke instead of fill */
form[id^="item-"] section.cart-item {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 2px #e95156 !important; /* stroke */
  border: 0 !important;
  color: #ffffff !important;
}

/* Keep text white inside the cart item */
form[id^="item-"] section.cart-item,
form[id^="item-"] section.cart-item * {
  color: #ffffff !important;
}
/* Order summary box: stroke instead of fill */
.shadow-default.bg-\[var\(--bg-light\)\] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 2px #e95156 !important; /* stroke */
  border: 0 !important;
  color: #ffffff !important;
}

/* Keep text white inside order summary */
.shadow-default.bg-\[var\(--bg-light\)\],
.shadow-default.bg-\[var\(--bg-light\)\] * {
  color: #ffffff !important;
}
/* ===== WhatsApp & Email icons: same style as phone ===== */

/* Color text + icons */
footer a[href*="wa.me"],
footer a[href*="whatsapp"],
footer a[href^="mailto:"] {
  color: #e95156 !important;
}

/* SVG icon color */
footer a[href*="wa.me"] svg,
footer a[href*="whatsapp"] svg,
footer a[href^="mailto:"] svg {
  fill: #e95156 !important;
  stroke: #e95156 !important;
}

/* Remove circular white frame */
footer a[href*="wa.me"],
footer a[href*="whatsapp"],
footer a[href^="mailto:"] {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Kill any pseudo-element circle */
footer a[href*="wa.me"]::before,
footer a[href*="wa.me"]::after,
footer a[href*="whatsapp"]::before,
footer a[href*="whatsapp"]::after,
footer a[href^="mailto:"]::before,
footer a[href^="mailto:"]::after {
  content: none !important;
  display: none !important;
}

/* Match icon size with phone */
footer a[href*="wa.me"] svg,
footer a[href*="whatsapp"] svg,
footer a[href^="mailto:"] svg {
  width: 16px !important;
  height: 16px !important;
}
/* ===== TikTok & Instagram icons: same style as phone ===== */

/* Text + icon color */
footer a[href*="tiktok"],
footer a[href*="instagram"],
footer a[href*="insta"] {
  color: #e95156 !important;
}

/* SVG icon color */
footer a[href*="tiktok"] svg,
footer a[href*="instagram"] svg,
footer a[href*="insta"] svg {
  fill: #e95156 !important;
  stroke: #e95156 !important;
}

/* Remove any frame / background */
footer a[href*="tiktok"],
footer a[href*="instagram"],
footer a[href*="insta"] {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Kill pseudo-element circles */
footer a[href*="tiktok"]::before,
footer a[href*="tiktok"]::after,
footer a[href*="instagram"]::before,
footer a[href*="instagram"]::after,
footer a[href*="insta"]::before,
footer a[href*="insta"]::after {
  content: none !important;
  display: none !important;
}

/* Match icon size */
footer a[href*="tiktok"] svg,
footer a[href*="instagram"] svg,
footer a[href*="insta"] svg {
  width: 16px !important;
  height: 16px !important;
}