/* =============================================================================
   WEBOX — Custom CSS overrides for default Raed theme
   Paste into: Merchant Dashboard → تخصيص باستخدام CSS
   REPLACES all previous custom CSS — delete the old one first
   Last updated: 2026-05-05
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

/* ---------- GLOBAL FONT ---------- */
body,
.s-product-card, .s-product-card *,
custom-salla-product-card, custom-salla-product-card * {
  font-family: "Cairo", sans-serif !important;
}


/* ========== HEADER ========== */

/* Hide black top bar (search, links, contacts strip) */
.top-navbar {
  display: none !important;
}

/* White background, no shadow, clean bottom edge */
header, .store-header {
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.main-nav-container {
  box-shadow: none !important;
}

/* Logo sizing */
.navbar-brand {
  display: inline-block !important;
}
.navbar-brand img {
  width: 220px !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  object-fit: contain !important;
}
#mainnav .navbar-brand {
  width: 220px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* ---- Desktop: two-row header (logo row + nav/icons row) ---- */
@media (min-width: 1024px) {
  /* Override Raed's .container max-width — go full-width like our custom header */
  #mainnav .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Convert the single flex row into a 2-col × 3-row grid
     Row 1 = logo, Row 2 = full-width border, Row 3 = nav + icons */
  #mainnav .container > div {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1px auto !important;
    align-items: center !important;
  }

  /* Full-width border line between rows (pseudo-element grid item) */
  #mainnav .container > div::before {
    content: "" !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    background: #e5e7eb !important;
    height: 1px !important;
  }

  /* Dissolve the left-side wrapper so logo + menu become direct grid items */
  #mainnav .container > div > div:first-child {
    display: contents !important;
  }

  /* Hamburger: ensure hidden on desktop */
  #mainnav .mburger {
    display: none !important;
  }

  /* Logo: spans both columns, row 1 */
  #mainnav .navbar-brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    padding: 20px 0 16px !important;
    display: block !important;
  }

  /* Nav menu: row 3, col 1 (right side in RTL) */
  #mainnav custom-main-menu {
    grid-column: 1 !important;
    grid-row: 3 !important;
    padding: 12px 0 !important;
  }

  /* Icon trio: row 3, col 2 (left side in RTL) */
  #mainnav .container > div > div:last-child {
    grid-row: 3 !important;
    grid-column: 2 !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    gap: 14px !important;
  }
}

/* Category nav links */
.s-main-menu a {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #111 !important;
}

/* ---- Force teal color on ALL header icons (including Shadow DOM) ---- */
#mainnav salla-user-menu,
#mainnav salla-cart-summary {
  --color-primary: #31b7b1 !important;
  --color-text: #31b7b1 !important;
  color: #31b7b1 !important;
}

/* ---- Override Salla's default `visibility: hidden` on web components in the header.
   Salla ships a long blanket rule that hides every salla-* component until it hydrates,
   which leaves the user-icon + cart-icon slots invisible-but-clickable for several
   seconds on slow networks. We force them visible from the first paint — children
   inherit visibility, and the icons render as soon as the SVG slot markup is present. ---- */
#mainnav salla-user-menu,
#mainnav salla-cart-summary {
  visibility: visible !important;
}

/* ---- All header icon buttons: NO borders, NO circles, plain icons ---- */
.header-btn__icon,
.s-user-menu-trigger,
.s-user-menu-login-btn,
#mainnav salla-cart-summary,
#mainnav salla-user-menu {
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Strip the default .header-btn__icon circle
   Use background-color (NOT shorthand background) to preserve background-image on .sicon-shopping-bag */
.header-btn__icon {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #31b7b1 !important;
}

/* Hide login text + avatar image */
.s-user-menu-trigger span,
.s-user-menu-trigger .login-text { display: none !important; }
.s-user-menu-trigger img { display: none !important; }

/* Account trigger: plain icon, teal, no circle */
.s-user-menu-trigger,
.s-user-menu-login-btn {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
  transition: opacity 0.2s ease !important;
  color: #31b7b1 !important;
}
/* Force all children teal + consistent 20px size */
.s-user-menu-trigger i,
.s-user-menu-trigger svg,
.s-user-menu-login-btn i,
.s-user-menu-login-btn svg {
  color: #31b7b1 !important;
  fill: none !important;
  stroke: #31b7b1 !important;
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle !important;
}
.s-user-menu-trigger:hover,
.s-user-menu-login-btn:hover {
  opacity: 0.7 !important;
}

/* ---- Header cart ---- */
/* Make the whole salla-cart-summary align like the other icons */
#mainnav salla-cart-summary {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* The wrapper inside the web component */
.s-cart-summary-wrapper,
.s-cart-summary {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.s-cart-summary-total { display: none !important; }
.s-cart-summary-count {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #31b7b1 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
  top: -6px !important;
  margin-left: -2px !important;
}

/* Replace bag icon glyph with outlined cart-with-wheels SVG */
.header-btn__icon.sicon-shopping-bag::before {
  content: none !important;
}
.header-btn__icon.sicon-shopping-bag {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2331b7b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h3l2.5 12.5a1 1 0 0 0 1 .8h9'/%3E%3Cpath d='M7 8h14l-2 7H8.5'/%3E%3Ccircle cx='10' cy='20' r='1.6' fill='%2331b7b1' stroke='none'/%3E%3Ccircle cx='17' cy='20' r='1.6' fill='%2331b7b1' stroke='none'/%3E%3C/svg%3E") !important;
  background-size: 20px 20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Search button (injected by JS) */
.webox-search-btn {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  color: #31b7b1 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  transition: opacity 0.2s ease !important;
}
.webox-search-btn svg {
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle !important;
}
.webox-search-btn:hover {
  opacity: 0.7 !important;
}

/* ---- Consistent alignment + breathing room for the 3 header icons ---- */
#mainnav .container > div > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}
#mainnav .container > div > div:last-child > * {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
}


/* ========== PRODUCT CARDS (Eyewa-style) ========== */

/* Card shell */
.s-product-card-entry {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  transition: all 0.3s ease !important;
  background: #fff !important;
  position: relative !important;
}
.s-product-card-entry:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

/* Image area */
.s-product-card-image {
  overflow: hidden !important;
  background: #f9f9f9 !important;
}
.s-product-card-image img {
  transition: transform 0.4s ease !important;
}
.s-product-card-entry:hover .s-product-card-image img {
  transform: scale(1.04) !important;
}

/* Content area: light grey to differentiate from white image area */
.s-product-card-entry .s-product-card-content {
  background: #f4f6f9 !important;
  border-top: 0 !important;
  padding: 14px !important;
}

/* Product name — dark navy (specificity bumped to beat Salla's defaults) */
.s-product-card-entry .s-product-card-content-title,
.s-product-card-entry .s-product-card-content-title a,
.s-product-card-entry .s-product-card-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0b1f35 !important;
  text-decoration: none !important;
}

/* Prices — always dark navy, even on sale (per request) */
.s-product-card-entry .s-product-card-price,
.s-product-card-entry .s-product-card-sale-price h4,
.s-product-card-entry .s-product-card-sale-price h4 i,
.s-product-card-entry .s-product-card-sale-price h4 *,
.s-product-card-entry .s-product-card-starting-price h4 {
  color: #0b1f35 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.s-product-card-entry .s-product-card-sale-price span,
.s-product-card-entry .s-product-card-content del {
  font-size: 12px !important;
  color: #888 !important;
  text-decoration: line-through !important;
}

/* ---- Add-to-cart: simple icon, NO circle (Eyewa-style) ---- */
.s-product-card-entry salla-add-product-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* Absolute position: physical bottom-left */
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  right: auto !important;
  /* Hide text (inherits into Shadow DOM) */
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  letter-spacing: -9999px !important;
  /* Teal cart icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2331b7b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h3l2.5 12.5a1 1 0 0 0 1 .8h9'/%3E%3Cpath d='M7 8h14l-2 7H8.5'/%3E%3Ccircle cx='10' cy='20' r='1.6' fill='%2331b7b1' stroke='none'/%3E%3Ccircle cx='17' cy='20' r='1.6' fill='%2331b7b1' stroke='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}
.s-product-card-entry salla-add-product-button:hover {
  opacity: 0.6 !important;
}

/* Light-DOM fallback — IMPORTANT: explicit min dimensions so the inner button
   fills the 28x28 host. Without these, hiding the inner span/i/svg via display:none
   collapses the button to 28x0, killing the click target (customers can't add to cart). */
.s-product-card-entry salla-add-product-button .s-button-element,
.s-product-card-entry salla-add-product-button .s-button-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer !important;
  align-self: stretch !important;
  display: inline-block !important;
  pointer-events: auto !important;
}
.s-product-card-entry salla-add-product-button .s-button-element *,
.s-product-card-entry salla-add-product-button .s-button-btn * {
  display: none !important;
}

/* Remove old pseudo-elements */
custom-salla-product-card::after,
custom-salla-product-card::before {
  display: none !important;
}

/* ---- Sold-out badge (Eyewa-style ribbon on the product image) ----
   Card gets the .webox-out-of-stock class via JS when its add-to-cart button
   is product-status="out" or disabled. Badge sits top-left (physical left, RTL agnostic). */
.s-product-card-entry.webox-out-of-stock .s-product-card-image {
  position: relative !important;
}
.s-product-card-entry.webox-out-of-stock .s-product-card-image::before {
  content: "نفذ" !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(0, 0, 0, 0.85) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 5px 11px !important;
  border-radius: 2px !important;
  letter-spacing: 1px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  display: block !important;
  line-height: 1 !important;
}


/* ========== FOOTER (Eyewa-style) ========== */

/* ---- Base: uniform dark charcoal ---- */
.store-footer {
  background: #2d2d2d !important;
  color: #fff !important;
  margin-top: 48px !important;
}
.store-footer__inner {
  background: #2d2d2d !important;
  padding: 48px 0 40px !important;
  border-bottom: none !important;
}

/* ---- Full-width container — push columns to edges like Eyewa ---- */
.store-footer .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* ---- 4-column grid (Eyewa-style: brand | links | contacts | social+pay) ---- */
@media (min-width: 1024px) {
  .store-footer__inner .container {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important;
    gap: 40px !important;
  }
  /* Reset Raed's col-span-2 + padding on brand column */
  .store-footer__inner .container > *:first-child {
    grid-column: span 1 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Hide salla-apps-icons (the 4th original child) */
  .store-footer__inner .container > salla-apps-icons {
    display: none !important;
  }
  /* Hide brand-column social (we move social to its own column) */
  .store-footer__inner .container > *:first-child salla-social {
    display: none !important;
  }
  .store-footer .contact-social {
    display: block !important;
  }
  /* Contacts column (3rd child) — left aligned */
  .store-footer__inner .container > *:nth-child(3) {
    text-align: left !important;
  }
}

/* ---- Mobile responsive (< 1024px) ---- */
@media (max-width: 1023px) {
  /* Brand column — smaller text on mobile */
  .store-footer__inner .container > *:first-child > a > h3 {
    font-size: 36px !important;
    letter-spacing: 3px !important;
  }
  .store-footer__inner .container > *:first-child > a > h3 div:last-child {
    font-size: 11px !important;
    letter-spacing: 6px !important;
  }
  /* WhatsApp/email blocks — smaller */
  .webox-whatsapp-section h4,
  .webox-whatsapp-section ~ div h4 {
    font-size: 13px !important;
  }
  .webox-whatsapp-section a[href^="https://wa.me"] {
    font-size: 16px !important;
  }
  /* Footer columns stack on mobile (Raed default behavior) — make sure our injected col doesn't break */
  .webox-socialpay-col {
    margin-top: 24px !important;
  }
  /* Bottom strip — reduce horizontal margins on narrow screens */
  .webox-bottom-strip .copyright-text {
    margin-right: 16px !important;
    font-size: 10px !important;
  }
  .webox-bottom-strip .webox-trust-moved {
    margin-left: 16px !important;
  }
  .webox-bottom-strip .webox-trust-moved p,
  .webox-bottom-strip .webox-trust-moved b {
    font-size: 9px !important;
  }
  .webox-bottom-strip .webox-trust-moved img {
    height: 16px !important;
  }
  /* Footer container padding reduced for narrow screens */
  .store-footer .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Footer inner padding reduced */
  .store-footer__inner {
    padding: 32px 0 24px !important;
  }
  /* Product cards: 2 per row on mobile */
  .s-product-card-entry .s-product-card-content {
    padding: 12px !important;
  }
  .s-product-card-entry .s-product-card-content-title,
  .s-product-card-entry .s-product-card-content-title a {
    font-size: 13px !important;
  }
  .s-product-card-entry .s-product-card-price,
  .s-product-card-entry .s-product-card-sale-price h4,
  .s-product-card-entry .s-product-card-starting-price h4 {
    font-size: 14px !important;
  }
  /* Swatches smaller on mobile */
  .webox-swatches .webox-swatch {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Far-left column with social icons + payments (Eyewa-style) */
.webox-socialpay-col {
  text-align: left !important;
}
.webox-socialpay-col .webox-section-heading:first-child {
  margin-top: 0 !important;
}
.webox-socialpay-col .webox-payments-section {
  margin-top: 24px !important;
}

/* Hide WhatsApp + phone items in salla-contacts (light DOM uses <a class="s-contacts-item">) */
.store-footer salla-contacts a[href*="wa.me"],
.store-footer salla-contacts a[href*="whatsapp"],
.store-footer salla-contacts a[href^="tel:"] {
  display: none !important;
}

/* ---- Brand text — BIG teal like Eyewa's "eyewa" ---- */
.store-footer__inner .container > *:first-child > a,
.store-footer__inner .container > *:first-child > a.flex {
  display: block !important;
  text-decoration: none !important;
  margin-bottom: 16px !important;
}
.store-footer__inner .container > *:first-child > a > h3 {
  font-size: 48px !important;
  font-weight: 800 !important;
  color: #31b7b1 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  line-height: 1.1 !important;
}
/* Hide the small logo img if Raed renders one */
.store-footer__inner .container > *:first-child > a img {
  display: none !important;
}

/* Store description */
.store-footer__inner .container > *:first-child > div:not(.flex) {
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 20px !important;
}

/* ---- Section headings (all columns) ---- */
.store-footer h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ---- Footer menu links ---- */
.store-footer salla-menu {
  --menu-color: rgba(255,255,255,0.65) !important;
  --menu-hover-color: #fff !important;
  --color-text: rgba(255,255,255,0.65) !important;
  --s-menu-font-color: rgba(255,255,255,0.65) !important;
  --s-menu-link-color: rgba(255,255,255,0.65) !important;
  color: rgba(255,255,255,0.65) !important;
}
.store-footer salla-menu li,
.store-footer .s-menu-list li {
  margin-bottom: 12px !important;
}
.store-footer salla-menu a,
.store-footer .s-menu-list a,
.store-footer salla-menu .s-menu-list-item__link {
  font-size: 14px !important;
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.store-footer salla-menu a:hover,
.store-footer .s-menu-list a:hover {
  color: #fff !important;
}

/* ---- Contacts (salla-contacts) ---- */
.store-footer salla-contacts {
  --color-primary: #31b7b1 !important;
  --s-contacts-icon-bg: transparent !important;
  --s-contacts-icon-color: #31b7b1 !important;
  text-align: left !important;
}
.store-footer salla-contacts h3,
.store-footer salla-contacts .s-contacts-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}
.store-footer salla-contacts a,
.store-footer salla-contacts .s-contacts-link {
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px !important;
  transition: color 0.2s ease !important;
}
.store-footer salla-contacts a:hover {
  color: #fff !important;
}
.store-footer salla-contacts .s-contacts-item {
  margin-bottom: 12px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  direction: ltr !important;
  gap: 8px !important;
}
/* Contact icons — strip circles, add spacing from text */
.store-footer salla-contacts i,
.store-footer salla-contacts svg {
  color: #31b7b1 !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
}
.store-footer salla-contacts [class*="icon"],
.store-footer salla-contacts [class*="Icon"],
.store-footer salla-contacts .s-contacts-icon,
.store-footer salla-contacts .s-contacts-icon-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: #31b7b1 !important;
}

/* ---- Social icons: plain inline, spacious like Eyewa ---- */
.store-footer salla-social {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
  direction: ltr !important;
  margin-top: 4px !important;
}
.store-footer .social-link {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 22px !important;
  color: rgba(255,255,255,0.75) !important;
  transition: color 0.2s ease !important;
}
.store-footer .social-link i,
.store-footer .social-link svg {
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
}
.store-footer .social-link:hover {
  color: #fff !important;
  opacity: 1 !important;
}

/* ---- Trust badges & VAT — moved to bottom strip by JS ---- */
.store-footer salla-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
}
.store-footer salla-trust-badges img {
  height: 28px !important;
  width: auto !important;
  opacity: 0.85 !important;
}

/* Social section in contacts column (Eyewa-style with heading) */
.store-footer .contact-social {
  margin-top: 24px !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Section headings injected by JS ("مواقع التواصل الاجتماعي", "نحن نقبل") */
.webox-section-heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

/* ---- WhatsApp section under WEBOX brand (Eyewa-style) ---- */
.webox-whatsapp-section {
  margin-top: 20px !important;
  text-align: right !important;
  direction: rtl !important;
}
.webox-whatsapp-heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 6px !important;
}
.webox-whatsapp-number {
  display: inline-block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  direction: ltr !important;
  letter-spacing: 0.3px !important;
  transition: color 0.2s ease !important;
}
.webox-whatsapp-number:hover {
  color: #31b7b1 !important;
}
.webox-whatsapp-subtitle {
  font-size: 12px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-top: 4px !important;
}

/* Payments section moved into contacts column by JS */
.webox-payments-section {
  margin-top: 24px !important;
}
.webox-payments-section salla-payments {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  direction: ltr !important;
}
.webox-payments-section salla-payments img {
  height: 32px !important;
  width: auto !important;
  opacity: 0.9 !important;
  border-radius: 4px !important;
}

/* ---- Bottom strip: slim compact bar (copyright + trust badges) ---- */
.store-footer > div:not(.store-footer__inner),
.store-footer > .md\:flex,
.store-footer > div.text-center,
.webox-bottom-strip {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  border-top: none !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  /* Horizontal breathing room so trust badges and copyright don't touch the screen edges. */
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (min-width: 1024px) {
  .webox-bottom-strip {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
/* Override Raed's py-4 on inner flex container — keep top/bottom compact but
   give the strip horizontal breathing room so trust badges and copyright don't
   touch the screen edges. */
.store-footer > div:not(.store-footer__inner) > .container,
.store-footer > .md\:flex > .container,
.store-footer > div:not(.store-footer__inner) .py-4,
.webox-bottom-strip > .container,
.webox-bottom-strip .py-4 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (min-width: 1024px) {
  .webox-bottom-strip > .container,
  .webox-bottom-strip .py-4,
  .store-footer > div:not(.store-footer__inner) > .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* Copyright text — compact */
.store-footer .copyright-text,
.store-footer .copyright-text p,
.copyright-text p {
  color: rgba(255,255,255,0.4) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Trust badges in bottom strip — compact inline */
.webox-trust-moved {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  color: rgba(255,255,255,0.5) !important;
}
.webox-trust-moved img {
  height: 20px !important;
  width: auto !important;
  opacity: 0.7 !important;
}
.webox-trust-moved b,
.webox-trust-moved strong {
  color: rgba(255,255,255,0.5) !important;
  font-size: 10px !important;
}
.webox-trust-moved p {
  color: rgba(255,255,255,0.4) !important;
  font-size: 10px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Light-theme override — keep dark regardless */
.footer-is-light .store-footer,
.footer-is-light .store-footer__inner,
.footer-is-light .store-footer > div:not(.store-footer__inner) {
  background: #2d2d2d !important;
  color: #fff !important;
}


/* ========== PDP (Product Detail Page) ========== */

/* Sale price turns red */
.is-on-sale .product-pdp__price-current,
.is-on-sale .total-price {
  color: #d12b2b !important;
}

/* Strikethrough old price */
.before-price {
  color: #888 !important;
  text-decoration: line-through !important;
}

/* Navy CTA button */
.product-pdp__add-cart .s-button-element.s-button-btn,
.product-single salla-add-product-button .s-button-element {
  background: #0b1f35 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  height: 52px !important;
  font-weight: 700 !important;
}
.product-pdp__add-cart .s-button-element.s-button-btn:hover,
.product-single salla-add-product-button .s-button-element:hover {
  background: #1f3a5f !important;
}
/* تكبير لوقو الهيدر */
#mainnav .navbar-brand,
header .navbar-brand {
  width: 340px !important;
  max-width: 340px !important;
  min-width: 340px !important;
  flex: 0 0 340px !important;
}

#mainnav .navbar-brand img,
header .navbar-brand img {
  width: 340px !important;
  max-width: 340px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}
/* تثبيت حجم الهيدر مع تكبير اللوقو */
#mainnav .navbar-brand,
header .navbar-brand {
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;
  flex: 0 0 320px !important;
  padding: 8px 0 6px !important;
  margin-right: auto !important;
  
}

/* حجم اللوقو */
#mainnav .navbar-brand img,
header .navbar-brand img {
  width: 320px !important;
  max-width: 320px !important;
  height: auto !important;
  max-height: 95px !important;
  object-fit: contain !important;
}

/* تقليل ارتفاع صف اللوقو */
@media (min-width: 1024px) {
  #mainnav .navbar-brand {
    padding: 8px 0 6px !important;
  }

  #mainnav .container > div {
    grid-template-rows: 110px 1px auto !important;
  }
}
/* ===== FIX LOGO POSITION & SIZE ===== */

@media (min-width: 1024px){

  /* صف اللوقو */
  #mainnav .container > div{
    grid-template-rows: 115px 1px auto !important;
  }

  /* مكان اللوقو */
  #mainnav .navbar-brand{
  position: absolute !important;
    top:-65px !important;
    right: -50px !important;
    left: auto !important;
    margin: 0 !important;
    width: auto !important;
    z-index: 20 !important;
}

  /* حجم اللوقو الحقيقي */
  #mainnav .navbar-brand img{
    width: 360px !important;
    max-width: 360px !important;
    min-width: 360px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
  }

}
/* ===== FOOTER ALIGNMENT FIX ===== */

@media (min-width: 1024px) {

  .store-footer__inner .container {
    align-items: start !important;
  }

  /* توحيد بداية كل عمود */
  .store-footer__inner .container > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* عنوان روابط مهمة */
  .store-footer h3,
  .store-footer .webox-section-heading,
  .store-footer salla-contacts h3 {
    margin-top: 0 !important;
    line-height: 1.4 !important;
  }

  /* عمود اللوقو والوصف */
  .store-footer__inner .container > *:first-child {
    transform: translateY(-6px) !important;
  }

  /* عمود روابط مهمة */
  .store-footer__inner .container > *:nth-child(2) {
    transform: translateY(0) !important;
  }

  /* عمود التواصل والدفع */
  .webox-socialpay-col {
    transform: translateY(0) !important;
  }

  /* توحيد حجم الخطوط */
  .store-footer h3,
  .store-footer .webox-section-heading {
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  .store-footer a,
  .store-footer p,
  .store-footer div {
    line-height: 1.8 !important;
  }
}
/* ===== FOOTER PERFECT ALIGN ===== */

@media (min-width: 1024px){

  /* توزيع الأعمدة */
  .store-footer__inner .container{
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr !important;
    align-items: start !important;
  }

  /* كل الأعمدة تبدأ من نفس المستوى */
  .store-footer__inner .container > *{
    padding-top: 0 !important;
    margin-top: 0 !important;
    align-self: start !important;
  }

  /* عمود اللوقو */
  .store-footer__inner .container > *:first-child{
    margin-top: -10px !important;
  }

  /* روابط مهمة */
  .store-footer__inner .container > *:nth-child(2){
    margin-top: 20px !important;
  }

  /* التواصل الاجتماعي والدفع */
  .webox-socialpay-col{
     margin-top: -30px !important;
}

  /* توحيد العناوين */
  .store-footer h3,
  .store-footer .webox-section-heading{
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 18px !important;
  }

  /* محاذاة النصوص */
  .store-footer p,
  .store-footer a,
  .store-footer div{
    line-height: 1.9 !important;
  }

}
.store-footer__inner .container > *:nth-child(2){
    margin-left: 60px !important;
}
/* ===== WEBOX FOOTER LOGO STYLE ===== */

/* كلمة WEBOX */
.store-footer__inner .container > *:first-child > a > h3{
    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    font-size: 74px !important;
    line-height: 0.95 !important;
    text-transform: uppercase !important;
}

/* كلمة EYEWEAR */
.store-footer__inner .container > *:first-child > a > h3 div:last-child{
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 10px !important;
    margin-top:-25px !important;
    transform: translateX(7px) !important;
}
/* تكبير الكرت بشكل احترافي */
.s-product-card-entry{
    border-radius: 18px !important;
}


/* تحسين المحتوى السفلي */
.s-product-card-content{
    padding: 18px !important;
}
/* تكبير الكروت مع الحفاظ على المسافات */
@media (min-width: 1024px){

  .s-product-card-entry{
      transform: scale(1.03) !important;
      transform-origin: center center !important;
  }

  .s-products-list > *,
  .products-grid > *{
      padding: 12px !important;
  }

}
/* تثبيت الاسم والسعر أسفل كرت المنتج */
.s-product-card-entry{
    display: flex !important;
    flex-direction: column !important;
}

.s-product-card-image{
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

.s-product-card-content{
    margin-top: auto !important;
    min-height: 130px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}
/* تكبير عرض الكروت بشكل فاخر */
@media (min-width: 1024px){

  .s-products-list > *,
  .products-grid > *{
      padding-left: 24px !important;
      padding-right: 24px !important;
  }

  .s-product-card-entry{
      border-radius: 22px !important;
  }

}
.s-product-card-entry:hover{
    transform: translateY(-4px);
    transition: .25s ease;
}
/* إصلاح كامل لشارة نفذ */
.s-product-card-entry.webox-out-of-stock .s-product-card-image::before{
    left: 42px !important;
    top: 12px !important;
    padding: 6px 14px !important;
    min-width: 46px !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 999 !important;
}
/* إخفاء زر المفضلة */
.s-product-card-wishlist-btn,
.s-product-card-wishlist,
.btn--wishlist,
.product-wishlist {
    display: none !important;
}
/* إزالة المربع خلف عربة السلة مع إبقاء الأيقونة */
.s-product-card-entry salla-add-product-button .s-button-element,
.s-product-card-entry salla-add-product-button .s-button-btn,
.s-product-card-entry salla-add-product-button button {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
}
/* إصلاح تداخل WEBOX و EYEWEAR في الجوال */
@media (max-width: 767px) {

  .store-footer__inner .container > *:first-child > a > h3 {
    font-size: 46px !important;
    line-height: 1.15 !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
  }

  .store-footer__inner .container > *:first-child > a > h3 div:last-child {
    font-size: 11px !important;
    letter-spacing: 6px !important;
    margin-top: 2px !important;
    transform: translateX(0) !important;
    display: block !important;
    line-height: 1.4 !important;
  }
}
.webox-size-wrapper{
  direction:rtl;
  background:#f2fbfb;
  border:1px solid #d9eeee;
  border-radius:18px;
  padding:22px;
  margin:20px 0;
}

.webox-size-wrapper h3{
  text-align:right;
  font-size:24px;
  font-weight:900;
  color:#0b1f35;
  margin-bottom:18px;
}

.webox-size-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:22px;
}

.webox-size-card{
  background:#fff;
  border-radius:16px;
  padding:18px 8px;
  text-align:center;
  box-shadow:0 8px 18px rgba(15,155,151,.08);
}

.webox-icon{
  color:#0f9b97;
  font-size:24px;
  height:34px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.webox-name{
  font-size:14px;
  font-weight:800;
  color:#111827;
  margin-bottom:6px;
  line-height:1.4;
}

.webox-value{
  font-size:16px;
  font-weight:900;
  color:#0f9b97;
  direction:ltr;
}

.webox-value span{
  font-size:13px;
  color:#111827;
  font-weight:500;
}

.webox-specs,
.webox-features{
  background:#fff;
  border:1px solid #dceeee;
  border-radius:16px;
  padding:14px;
  margin-top:16px;
}

.webox-specs h4,
.webox-features h4{
  text-align:center;
  font-size:22px;
  font-weight:900;
  color:#0b1f35;
  margin-bottom:14px;
}

.webox-specs-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border:1px solid #e5eeee;
  border-radius:12px;
  overflow:hidden;
}

.webox-specs-grid div{
  padding:8px 14px;
  min-height:58px;
  text-align:center;
  border-left:1px solid #e5eeee;
  border-bottom:1px solid #e5eeee;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:nowrap;
}
.webox-specs-grid b{
  display:block;
  font-size:14px;
  color:#111827;
  margin-bottom:5px;
}

.webox-specs-grid span{
  color:#0f9b97;
  font-size:14px;
}

.webox-features ul{
  padding-right:18px;
  margin:0;
}

.webox-features li{
  font-size:14px;
  margin-bottom:7px;
  line-height:1.7;
  color:#1f2937;
}

@media(max-width:768px){
  .webox-size-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .webox-specs-grid{
    grid-template-columns:1fr;
  }
}
.webox-specs,
.webox-features{
  width:100%;
  margin-right:auto;
  margin-left:auto;
}

.webox-specs-grid div{
  padding:10px;
}

.webox-specs h4,
.webox-features h4{
  font-size:20px;
}

.webox-specs-grid b{
  display:inline;
  margin:0;
}

.webox-specs-grid span{
  font-size:13px;
}

.webox-features li{
  font-size:13px;
}
.s-product-card-image {
    height: 270px !important;
    background: #fff !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}
.s-product-card-entry {
     transform: translateY(-1px) !important;
}
/* إضافة سهم > قبل روابط مهمة في الفوتر */

.store-footer a::before{
  content:none !important;
}

.store-footer [class*="footer-list"] a::before,
.store-footer [class*="links"] a::before,
.store-footer nav a::before{
  content:">" !important;
  color:#31b7b1 !important;
  font-weight:700 !important;
   transition: 0.3s;
  margin-left:8px !important;
}

/* حركة بسيطة عند المرور */
.store-footer a:hover::before{
    margin-left: 12px;
}
/* تثبيت شارة الشحن المجاني يسار مقابل السعر */
.s-product-card-content {
    position: relative !important;
}

.s-product-card-content::after {
    content: "الشحن مجاني" !important;
    position: absolute !important;

    left: 10px !important;        /* هذا يتحكم باليسار */
    bottom: 90px !important;    /* هذا يرفع/ينزل الشارة */

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #31b7b1 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;

    width: 78px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

/* ===== FORCE MOBILE FULL WIDTH FIX ===== */
@media (max-width: 767px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .store-footer,
  .store-footer * {
    box-sizing: border-box !important;
  }

  .store-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .store-footer__inner,
  .store-footer__inner .container,
  .store-footer .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: block !important;
    grid-template-columns: none !important;
    transform: none !important;
  }

  .store-footer__inner .container > *,
  .webox-socialpay-col,
  .store-footer__inner .container > *:nth-child(2),
  .store-footer__inner .container > *:first-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  .store-footer__inner .container > *:nth-child(3) {
    display: block !important;
  }

  .store-footer__inner .container > *:first-child > a > h3 {
  font-size: 46px !important;
  line-height: 0.95 !important;
  letter-spacing: 2px !important;
  margin: 0 0 16px !important;
  transform: none !important;
}

.store-footer__inner .container > *:first-child > a > h3 div:last-child {
  font-size: 12px !important;
  letter-spacing: 8px !important;
  margin-top: -10px !important;
  transform: translateX(4px) !important;
  display: block !important;
  line-height: 1.2 !important;
}

  .webox-bottom-strip,
  .webox-bottom-strip .container,
  .store-footer > div:not(.store-footer__inner) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden !important;
  }
}

/* ===== MOBILE LOGO BIG WITHOUT BLOCKING MENU ===== */
@media (max-width: 767px) {

  #mainnav .container > div {
    position: relative !important;
  }

  #mainnav .mburger {
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }

  #mainnav .navbar-brand,
  header .navbar-brand {
    width: 170px !important;
    max-width: 170px !important;
    min-width: 0 !important;
    flex: 0 0 170px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  #mainnav .navbar-brand img,
  header .navbar-brand img {
    width: 190px !important;
    max-width: none !important;
    min-width: 190px !important;
    height: auto !important;
    max-height: 76px !important;
    object-fit: contain !important;
    pointer-events: none !important;
  }

  #mainnav .container > div > div:last-child,
  #mainnav .webox-search-btn,
  #mainnav salla-user-menu,
  #mainnav salla-cart-summary {
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }
}


/* إخفاء تواصل معنا من الجوال فقط */
@media (max-width: 767px) {
  .store-footer salla-contacts,
  .store-footer__inner salla-contacts,
  .store-footer .s-contacts,
  .store-footer .s-contacts-list,
  .store-footer [class*="contacts"] {
    display: none !important;
  }
}

/* جعل اللوقو قابل للنقر في الجوال ويحدث الصفحة */
@media (max-width: 767px) {
  #mainnav .navbar-brand,
  #mainnav .navbar-brand *,
  header .navbar-brand,
  header .navbar-brand * {
    pointer-events: auto !important;
  }

  #mainnav .navbar-brand {
    cursor: pointer !important;
    z-index: 50 !important;
  }

  #mainnav .mburger {
    z-index: 9999 !important;
    pointer-events: auto !important;
  }
}
@media (max-width: 767px) {

  header .navbar-brand img,
  header .s-logo img,
  .store-header .navbar-brand img,
  .store-header .s-logo img {
    width: 135px !important;   /* تحكم بعرض اللوقو */
    max-width: 135px !important;
    height: auto !important;
    transform: scale(2.4);    /* تحكم بالتكبير */
    transform-origin: center center;
    margin-right: -24px !important;
     margin-top: 15px !important;
  }

}
@media (max-width: 767px) {

  .store-footer__inner .container > div:first-child h3 {
    font-size: 48px !important;
    letter-spacing: 2px !important;
    line-height: 1.25 !important;
    margin-bottom: 18px !important;
  }

  .store-footer__inner .container > div:first-child h3 div:last-child {
  font-size: 14px !important;       /* تكبير EYEWEAR */
  letter-spacing: 8px !important;
  margin-top: 3px !important;
  line-height: 1.4 !important;
  display: block !important;
  transform: translateX(8px) !important; /* يمين */
}
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {

    .webox-size-card .webox-icon {
      height: 48px !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      background-size: 58px 42px !important;
      font-size: 0 !important;
      color: transparent !important;
    }

    /* عرض النظارة */
    .webox-size-card:nth-child(1) .webox-icon {
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 16h56' stroke='%230f9b97' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M31 8l-9 8 9 8M69 8l9 8-9 8' fill='none' stroke='%230f9b97' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 35c13-8 25-7 33-1 8-6 20-7 33 1-2 16-12 23-28 19-5-1-7-5-8-10-1 5-3 9-8 10-16 4-26-3-28-19z' fill='none' stroke='%230f9b97' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M48 38c2-2 4-2 6 0' stroke='%230f9b97' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    /* ذراع النظارة */
    .webox-size-card:nth-child(2) .webox-icon {
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 45V28h47l18 13' fill='none' stroke='%230f9b97' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48 18h34' stroke='%230f9b97' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M73 10l9 8-9 8' fill='none' stroke='%230f9b97' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

   /* حجم العدسة */
.webox-lens-size .webox-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 18h44' stroke='%230f9b97' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M37 10l-9 8 9 8M63 10l9 8-9 8' fill='none' stroke='%230f9b97' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 35c10-7 30-7 40 0-1 17-8 24-20 24s-19-7-20-24z' fill='none' stroke='%230f9b97' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* جسر الأنف */
.webox-bridge-size .webox-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 70' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='38' r='18' fill='none' stroke='%230f9b97' stroke-width='3'/%3E%3Ccircle cx='70' cy='38' r='18' fill='none' stroke='%230f9b97' stroke-width='3'/%3E%3Cpath d='M48 34c2-3 6-3 8 0' fill='none' stroke='%230f9b97' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M50 22v28M58 22v28' stroke='%230f9b97' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

  }
}