/**
  * CDC TO GO — Salla theme custom CSS (reference copy)
  * Paste into: Salla dashboard → Theme → Custom CSS
  * Pair with cdctogo-salla-custom.js (language, quick-view modal, product title merge).
  */

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

  /* =============================================================================
    Page backdrop — Caky (SVG party-bakery tile).
    ============================================================================= */
  html {
    background-color: #f9fafb !important;
  }

  body {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'340'%20height%3D'340'%20viewBox%3D'0%200%20340%20340'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23a8919e'%20stroke-width%3D'1.05'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20opacity%3D'0.12'%3E%3Cg%20transform%3D'translate(58%20278)%20rotate(-24)'%3E%20%3Cpath%20d%3D'M-38%2018h76v6h-76z'%2F%3E%3Cpath%20d%3D'M-32%2012h64l-3-20h-58l-3%2020z'%2F%3E%3Cpath%20d%3D'M-26-8h52l-2.5-16h-47l-2.5%2016z'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'-26'%20r%3D'3.5'%2F%3E%3Cpath%20d%3D'M0%20-30v-9'%2F%3E%3Cpath%20d%3D'M-30-8q10%207%2020%200t20%200'%2F%3E%3Cpath%20d%3D'M-34%2012q8%205%2016%200t16%200'%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D'translate(228%2048)%20rotate(31)'%3E%20%3Cpath%20d%3D'M0%2020c-11-10-26-5-26%2014%200%2018%2026%2032%2026%2032s26-14%2026-32c0-19-15-24-26-14z'%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D'translate(124%2028)%20rotate(-11)'%3E%20%3Cellipse%20cx%3D'0'%20cy%3D'0'%20rx%3D'12'%20ry%3D'8.5'%20transform%3D'rotate(-24)'%2F%3E%3Cellipse%20cx%3D'15'%20cy%3D'3'%20rx%3D'12'%20ry%3D'8.5'%20transform%3D'rotate(22)'%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D'translate(278%20244)%20rotate(-42)'%3E%20%3Cpath%20d%3D'M0%2032L-12-8h24z'%2F%3E%3Cpath%20d%3D'M-10-8q10-12%2020%200'%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D'translate(196%20188)%20rotate(19)'%3E%20%3Cpath%20d%3D'M0%2012l4%209%209%202-7%206%202%209-8-5-8%205%202-9-7-6%209-2z'%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D'translate(20%2096)%20rotate(52)'%3E%20%3Cpath%20d%3D'M0%200q14%2010%200%2022Q-14%2010%200%200z'%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D'M48%2072%20Q72%2052%2096%2072%20T152%2068'%2F%3E%20%3Cpath%20d%3D'M268%20124c10-14%2022-10%2028%204'%2F%3E%20%3Cpath%20d%3D'M304%20284c-8%2012-18%2010-24-6'%2F%3E%20%3Ccircle%20cx%3D'14'%20cy%3D'168'%20r%3D'2.6'%2F%3E%3Ccircle%20cx%3D'322'%20cy%3D'76'%20r%3D'2.1'%2F%3E%3Ccircle%20cx%3D'172'%20cy%3D'318'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'88'%20cy%3D'12'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'312'%20cy%3D'212'%20r%3D'2.9'%2F%3E%3Ccircle%20cx%3D'36'%20cy%3D'52'%20r%3D'1.5'%2F%3E%3Ccircle%20cx%3D'236'%20cy%3D'152'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'128'%20cy%3D'304'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'260'%20cy%3D'96'%20r%3D'1.4'%2F%3E%3Ccircle%20cx%3D'76'%20cy%3D'220'%20r%3D'2.2'%2F%3E%20%3Cg%20transform%3D'translate(158%2058)%20scale(0.38)%20rotate(12)'%3E%20%3Cpath%20d%3D'M0-20l5%2012%2012%203-9%209%202%2012-10-6-10%206%202-12-9-9%2012-3z'%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D'M82%20138l4%207m8-9l-6%208m12%203l-9-5'%2F%3E%20%3Cpath%20d%3D'M244%20200c6%208%2014%206%2018-4'%2F%3E%20%3Cpath%20d%3D'M32%20244%20Q48%20228%2064%20244%20T96%20240'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
    background-repeat: repeat !important;
    background-size: 320px 320px !important;
    background-attachment: fixed !important;
  }

  @media (max-width: 768px) {
    body {
      background-attachment: scroll !important;
      background-size: 260px 260px !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body {
      background-attachment: scroll !important;
    }
  }

  #app {
    position: relative !important;
    z-index: 1 !important;
    background-color: transparent !important;
  }


  /* Homepage category strip: theme adds `active` on first card → looks “always expanded”.
     Collapse to the same state as other cards until real hover (md+). */
  @media (min-width: 768px) {
    #app a.group.has-link.active:not(:hover) > div > img {
      max-width: 163px !important;
      transform: scale(1) !important;
    }
    #app a.group.has-link.active:not(:hover) h4 {
      margin-bottom: 0 !important;
      transform: translateX(0) rotate(90deg) translateY(50%) !important;
    }
    #app a.group.has-link.active:not(:hover) .text-bg {
      transform: none !important;
    }
  }

  /* Category swiper (round tiles): no gray plate or tilted frame behind the photo */
  #app a.slide--cat-entry .item-img {
    background-color: transparent !important;
    background: transparent !important;
  }
  #app a.slide--cat-entry .item-img > span.absolute.inset-0 {
    display: none !important;
  }

  /* Full image inside the circle (theme uses object-fit: cover → hard crops) */
  #app a.slide--cat-entry.is-circle .item-img.image--aspect-ratio img {
    object-fit: contain !important;
    -o-object-fit: contain !important;
  }

  /* “Our collections” category slider: labels use opacity-50 — bump contrast */
  #app .s-block--categories .slide--cat-entry .item-content small {
    opacity: 1 !important;
    color: #374151 !important;
    font-weight: 500 !important;
  }

  /* Keep Salla main shell above page backdrop */

  /* --- Native language button: hidden (logic kept for Salla; UI is .cdc-lang-toggle) --- */
  footer.store-footer-wrap salla-button.cdc-lang-host--hidden {
    opacity: 0 !important;
    pointer-events: none !important; /* ensure clicks hit .cdc-lang-toggle only */
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* --- Single language pill (fixed): EN page → العربية · AR page → EN --- */
  .cdc-lang-toggle {
    position: fixed !important;
    top: 72px !important;
    bottom: auto !important;
    inset-inline-end: 16px !important;
    inset-inline-start: auto !important;
    z-index: 99999 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  .cdc-lang-toggle__btn {
    pointer-events: auto !important;
    margin: 0 !important;
    cursor: pointer !important;
    border: 1.5px solid rgba(142, 104, 135, 0.35) !important;
    border-radius: 9999px !important;
    padding: 10px 20px !important;
    font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Naskh Arabic', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    color: #1f2937 !important;
    background: linear-gradient(165deg, #ffffff 0%, #f9fafb 55%, #f3f4f6 100%) !important;
    box-shadow:
      0 2px 6px rgba(31, 41, 55, 0.06),
      0 8px 20px rgba(142, 104, 135, 0.1) !important;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      background 0.2s ease !important;
  }

  .cdc-lang-toggle__btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: rgba(142, 104, 135, 0.55) !important;
    box-shadow:
      0 4px 12px rgba(31, 41, 55, 0.1),
      0 10px 28px rgba(142, 104, 135, 0.14) !important;
  }

  .cdc-lang-toggle__btn:active {
    transform: translateY(0) scale(0.98) !important;
  }

  .cdc-lang-toggle__btn:focus-visible {
    outline: 2px solid #1f2937 !important;
    outline-offset: 3px !important;
  }

  /* «العربية» — roadmap display font (El Messiri) */
  .cdc-lang-toggle__btn--ar-label,
  .cdc-lang-toggle__btn:lang(ar) {
    font-family: 'El Messiri', 'Noto Naskh Arabic', 'Segoe UI', serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .cdc-lang-toggle__btn {
      transition: none !important;
    }

    .cdc-lang-toggle__btn:hover,
    .cdc-lang-toggle__btn:active {
      transform: none !important;
    }
  }

  /* --- Homepage only: hide "showrooms only" product badge (green pill) --- */
  body.index p.product-entry__promotion_title[class*="00af6c"] {
    display: none !important;
  }

  /* =============================================================================
    Store-wide primary buttons (Add to cart, Explore, solid primary CTAs)
    Hover: dark fill “empties” left → right (layer shrinks from transform-origin: right)
    Does not target .cdc-lang-toggle
    ============================================================================= */

  a.s-button-element.s-button-solid.s-button-primary,
  a.btn--main.s-button-element.s-button-primary,
  button.s-button-element.s-button-solid.s-button-primary,
  button.btn--main.s-button-element.s-button-primary {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background-color: #f9fafb !important;
    border: 2px solid #1f2937 !important;
    color: #f9fafb !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 1px 3px rgba(31, 41, 55, 0.1) !important;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease,
      border-color 0.35s ease !important;
  }

  a.s-button-element.s-button-solid.s-button-primary::before,
  a.btn--main.s-button-element.s-button-primary::before,
  button.s-button-element.s-button-solid.s-button-primary::before,
  button.btn--main.s-button-element.s-button-primary::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background-color: #1f2937 !important;
    transform-origin: right center !important;
    transform: scaleX(1) !important;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 0 !important;
  }

  a.s-button-element.s-button-solid.s-button-primary:hover::before,
  a.btn--main.s-button-element.s-button-primary:hover::before,
  button.s-button-element.s-button-solid.s-button-primary:hover::before,
  button.btn--main.s-button-element.s-button-primary:hover::before {
    transform: scaleX(0) !important;
  }

  a.s-button-element.s-button-solid.s-button-primary:hover,
  a.btn--main.s-button-element.s-button-primary:hover,
  button.s-button-element.s-button-solid.s-button-primary:hover,
  button.btn--main.s-button-element.s-button-primary:hover {
    color: #1f2937 !important;
    box-shadow: 0 4px 16px rgba(31, 41, 55, 0.14) !important;
  }

  .s-button-element.s-button-solid.s-button-primary .s-button-text,
  .s-button-element.s-button-solid.s-button-primary i,
  a.btn--main .s-button-text,
  a.btn--main i,
  button.btn--main .s-button-text,
  button.btn--main i {
    position: relative !important;
    z-index: 1 !important;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  a.s-button-element.s-button-solid.s-button-primary:not(:hover) .s-button-text,
  a.s-button-element.s-button-solid.s-button-primary:not(:hover) i,
  a.btn--main:not(:hover) .s-button-text,
  a.btn--main:not(:hover) i,
  button.s-button-element.s-button-solid.s-button-primary:not(:hover) .s-button-text,
  button.s-button-element.s-button-solid.s-button-primary:not(:hover) i,
  button.btn--main:not(:hover) .s-button-text,
  button.btn--main:not(:hover) i {
    color: #f9fafb !important;
  }

  a.s-button-element.s-button-solid.s-button-primary:hover .s-button-text,
  a.s-button-element.s-button-solid.s-button-primary:hover i,
  a.btn--main:hover .s-button-text,
  a.btn--main:hover i,
  button.s-button-element.s-button-solid.s-button-primary:hover .s-button-text,
  button.s-button-element.s-button-solid.s-button-primary:hover i,
  button.btn--main:hover .s-button-text,
  button.btn--main:hover i {
    color: #1f2937 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    a.s-button-element.s-button-solid.s-button-primary::before,
    a.btn--main.s-button-element.s-button-primary::before,
    button.s-button-element.s-button-solid.s-button-primary::before,
    button.btn--main.s-button-element.s-button-primary::before {
      transition: none !important;
    }

    a.s-button-element.s-button-solid.s-button-primary:hover::before,
    a.btn--main.s-button-element.s-button-primary:hover::before,
    button.s-button-element.s-button-solid.s-button-primary:hover::before,
    button.btn--main.s-button-element.s-button-primary:hover::before {
      transform: none !important;
      opacity: 0 !important;
    }
  }

  /* Add-to-cart: Feather-style cart SVG (JS replaces theme basket glyph) */
  #app .btn--add-to-cart button .cdc-cart-ico,
  #app salla-add-product-button button .cdc-cart-ico {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
  }

  /* Header cart: hide theme bag/svg before JS runs (stops flash of old icon) */
  #s-cart-icon svg:not(.cdc-header-cart-ico),
  #s-cart-icon svg[slot='icon'],
  #s-cart-icon i.s-cart-summary-icon,
  #s-cart-icon slot-fb {
    display: none !important;
  }

  /* Header cart chip: same Feather cart */
  #s-cart-icon .cdc-header-cart-ico {
    display: block !important;
    flex-shrink: 0 !important;
    color: inherit !important;
  }

  /* Add-to-cart label: hide theme bag/SVG (grid re-adds sicon-shopping-bag2 + inline-block) */
  #app salla-add-product-button button .s-button-text > i,
  #app salla-add-product-button button .s-button-text i,
  #app salla-add-product-button button .s-button-text i.inline-block,
  #app salla-add-product-button button .s-button-text i[class*="sicon-shopping-bag"],
  #app salla-add-product-button button .s-button-text svg:not(.cdc-cart-ico),
  #app .btn--add-to-cart button .s-button-text > i,
  #app .btn--add-to-cart button .s-button-text i,
  #app .btn--add-to-cart button .s-button-text i.inline-block,
  #app .btn--add-to-cart button .s-button-text i[class*="sicon-shopping-bag"],
  #app .btn--add-to-cart button .s-button-text svg:not(.cdc-cart-ico),
  #app custom-salla-product-card salla-add-product-button button .s-button-text i,
  #app custom-salla-product-card salla-add-product-button button .s-button-text svg:not(.cdc-cart-ico) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  #app salla-add-product-button button .s-button-text i::before,
  #app salla-add-product-button button .s-button-text i::after,
  #app .btn--add-to-cart button .s-button-text i::before,
  #app .btn--add-to-cart button .s-button-text i::after {
    content: none !important;
    display: none !important;
  }

  /* Product page only: space between cart icon and Arabic label (grid unchanged) */
  html.product-single #app salla-add-product-button button .cdc-cart-ico,
  body.product-single #app salla-add-product-button button .cdc-cart-ico,
  #app.product-single salla-add-product-button button .cdc-cart-ico {
    margin-inline-end: 0.5rem !important;
  }

  /* Horizontal product cards (desktop): theme max-width squeezes label + shows two icons if JS misses shadow button */
  @media (min-width: 480px) {
    #app .product-entry--horizontal .btn--add-to-cart {
      max-width: none !important;
      width: 100% !important;
      flex: 1 1 auto !important;
      min-width: 0 !important;
    }

    #app .product-entry--horizontal .btn--add-to-cart salla-button {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
    }

    #app .product-entry--horizontal .btn--add-to-cart button {
      width: 100% !important;
      max-width: none !important;
    }

    #app .product-entry--horizontal .btn--add-to-cart button .s-button-text {
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: nowrap !important;
    }
  }

  /* Outline primary (secondary-style cart / ghost actions) */
  .s-button-element.s-button-outline.s-button-primary {
    background-color: transparent !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color: #1f2937 !important;
    color: #1f2937 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
      box-shadow 0.2s ease !important;
  }

  .s-button-element.s-button-outline.s-button-primary:hover {
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #f9fafb !important;
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.12) !important;
  }

  /* Explore row: soften arrow */
  a.btn--main .arrow-icon,
  a.btn--main .sicon-arrow-right,
  button.btn--main .arrow-icon,
  button.btn--main .sicon-arrow-right {
    opacity: 0.9 !important;
  }

  /* Large wide cart buttons: comfortable tap target */
  .s-button-element.s-button-large.s-button-wide {
    min-height: 44px !important;
  }

  /* Keyboard focus */
  .s-button-element.s-button-primary:focus-visible,
  a.btn--main:focus-visible,
  button.btn--main:focus-visible {
    outline: 2px solid #1f2937 !important;
    outline-offset: 2px !important;
  }

  .s-button-element.s-button-outline.s-button-primary:focus-visible {
    outline: 2px solid #1f2937 !important;
    outline-offset: 2px !important;
  }

  /* =============================================================================
    Product cards — flat “gallery”: no frame; blends with page (see ref grid)
    ============================================================================= */

  /* Product grids — theme sets row-gap/column-gap separately (2.25rem row etc.); override longhands */
  #app .s-products-list-wrapper,
  #app .s-products-list-wrapper.s-products-list-vertical-cards,
  #app .s-products-list-vertical-cards,
  #app .s-products-list-filters-results,
  #app .s-products-list-row-cards,
  #app .s-products-list-horizontal-cards,
  #app salla-products-list .s-products-list-wrapper {
    width: 100% !important;
    gap: 0.25rem 0.25rem !important;
    row-gap: 0.375rem !important;
    grid-row-gap: 0.375rem !important;
    column-gap: 0.25rem !important;
    -moz-column-gap: 0.25rem !important;
  }

  @media (min-width: 640px) {
    #app .s-products-list-wrapper,
    #app .s-products-list-wrapper.s-products-list-vertical-cards,
    #app .s-products-list-vertical-cards,
    #app .s-products-list-filters-results,
    #app .s-products-list-row-cards,
    #app .s-products-list-horizontal-cards,
    #app salla-products-list .s-products-list-wrapper {
      row-gap: 0.5rem !important;
      grid-row-gap: 0.5rem !important;
      column-gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
      gap: 0.5rem 0.375rem !important;
    }
  }

  @media (min-width: 768px) {
    #app .s-products-list-wrapper,
    #app .s-products-list-wrapper.s-products-list-vertical-cards,
    #app .s-products-list-vertical-cards,
    #app .s-products-list-filters-results,
    #app .s-products-list-row-cards,
    #app .s-products-list-horizontal-cards,
    #app salla-products-list .s-products-list-wrapper {
      row-gap: 0.5rem !important;
      grid-row-gap: 0.5rem !important;
      column-gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
      gap: 0.5rem 0.375rem !important;
    }
  }

  @media (min-width: 1024px) {
    #app .s-products-list-wrapper,
    #app .s-products-list-wrapper.s-products-list-vertical-cards,
    #app .s-products-list-vertical-cards,
    #app .s-products-list-filters-results,
    #app .s-products-list-row-cards,
    #app .s-products-list-horizontal-cards,
    #app salla-products-list .s-products-list-wrapper {
      row-gap: 0.625rem !important;
      grid-row-gap: 0.625rem !important;
      column-gap: 0.5rem !important;
      -moz-column-gap: 0.5rem !important;
      gap: 0.625rem 0.5rem !important;
    }
  }

  /* Theme uses .product-entry on custom-salla-product-card and plain divs — scope #app */
  #app .product-entry {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0.125rem !important;
  }

  #app .product-entry:hover {
    border-color: transparent !important;
  }

  #app .product-entry--horizontal {
    outline: none !important;
    padding: 0.375rem !important;
  }

  @media (min-width: 640px) {
    #app .product-entry--horizontal {
      padding: 0.5rem !important;
    }
  }

  #app .product-entry .product-entry__inner {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    transition: opacity 0.25s ease !important;
    gap: 0.25rem !important;
  }

  #app .product-entry:hover .product-entry__inner {
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
  }

  /* Image: no gray “tile” — same plane as the page */
  #app .product-entry .product-entry__image-wrap {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  #app .product-entry .product-entry__image-main {
    background-color: transparent !important;
  }

  /* Image: subtle zoom on card hover */
  #app .product-entry .product-entry__image-wrap img {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
  }

  #app .product-entry:hover .product-entry__image-wrap img {
    transform: scale(1.035) !important;
  }

  /*
  * Wishlist: Pink cards use salla-button.s-product-card-wishlist-btn (NOT .btn--wishlist).
  * Hide-until-hover only when the device can hover (mouse). Avoid (hover: none) “always show”:
  * many Windows PCs report hover:none and it undid the hide.
  */
  @media (hover: hover) and (pointer: fine) {
    /* custom-salla-product-card (grid / sliders) — real class is s-product-card-wishlist-btn */
    #app custom-salla-product-card salla-button.s-product-card-wishlist-btn {
      opacity: 0 !important;
      transform: translateY(-8px) scale(0.88) !important;
      transition:
        opacity 0.32s ease,
        transform 0.4s cubic-bezier(0.34, 1.35, 0.64, 1) !important;
      pointer-events: none !important;
    }

    #app custom-salla-product-card:hover salla-button.s-product-card-wishlist-btn,
    #app custom-salla-product-card:focus-within salla-button.s-product-card-wishlist-btn {
      opacity: 1 !important;
      transform: translateY(0) scale(1) !important;
      pointer-events: auto !important;
    }

    /* Classic .product-entry cards */
    #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist {
      opacity: 0 !important;
      transform: translateY(-8px) scale(0.88) !important;
      transition:
        opacity 0.32s ease,
        transform 0.4s cubic-bezier(0.34, 1.35, 0.64, 1) !important;
      pointer-events: none !important;
    }

    #app .product-entry:hover .product-entry__image-wrap salla-button.btn--wishlist,
    #app .product-entry:focus-within .product-entry__image-wrap salla-button.btn--wishlist {
      opacity: 1 !important;
      transform: translateY(0) scale(1) !important;
      pointer-events: auto !important;
    }
  }

  /* Heart: no white circle — icon only (theme may force white on inner button; override) */
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element,
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    --tw-bg-opacity: 0 !important;
  }

  #app custom-salla-product-card:hover salla-button.s-product-card-wishlist-btn button.s-button-element,
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element:hover {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Custom SVG heart (JS injects .cdc-heart-ico); saved = full pink fill */
  #app .cdc-heart-ico {
    display: inline-block !important;
    vertical-align: middle !important;
  }

  #app .cdc-heart-ico--saved path {
    fill: #e25a8f !important;
    stroke: none !important;
  }

  /* Wishlist icon only: soft pink + heartbeat on hover (not the big padded “button” look) */
  @keyframes cdc-wishlist-heartbeat {
    0%,
    100% {
      transform: scale(1);
    }
    14% {
      transform: scale(1.14);
    }
    28% {
      transform: scale(1);
    }
    42% {
      transform: scale(1.1);
    }
    56% {
      transform: scale(1);
    }
  }

  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element .sicon-heart,
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element .cdc-heart-ico,
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element svg {
    display: inline-block !important;
    transform-origin: center center !important;
    transition: color 0.2s ease, fill 0.2s ease, filter 0.2s ease !important;
    color: #374151 !important;
    fill: currentColor !important;
    opacity: 0.95 !important;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)) !important;
  }

  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element:hover .sicon-heart,
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element:focus-visible .sicon-heart,
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element:hover .cdc-heart-ico:not(.cdc-heart-ico--saved),
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element:focus-visible .cdc-heart-ico:not(.cdc-heart-ico--saved),
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element:hover svg,
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element:focus-visible svg {
    color: #c75b89 !important;
    fill: #c75b89 !important;
    opacity: 1 !important;
    animation: cdc-wishlist-heartbeat 1.15s ease-in-out infinite !important;
  }

  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    --tw-bg-opacity: 0 !important;
  }

  #app .product-entry:hover .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist,
  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist:hover {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist .sicon-heart,
  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist .cdc-heart-ico,
  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist svg {
    display: inline-block !important;
    transform-origin: center center !important;
    transition: color 0.2s ease, fill 0.2s ease, filter 0.2s ease !important;
    color: #374151 !important;
    fill: currentColor !important;
    opacity: 0.95 !important;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)) !important;
  }

  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist:hover .sicon-heart,
  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist:focus-visible .sicon-heart,
  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist:hover .cdc-heart-ico:not(.cdc-heart-ico--saved),
  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist:focus-visible .cdc-heart-ico:not(.cdc-heart-ico--saved),
  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist:hover svg,
  #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist:focus-visible svg {
    color: #c75b89 !important;
    fill: #c75b89 !important;
    opacity: 1 !important;
    animation: cdc-wishlist-heartbeat 1.15s ease-in-out infinite !important;
  }

  @media (prefers-reduced-motion: reduce) {
    @media (hover: hover) and (pointer: fine) {
      #app custom-salla-product-card salla-button.s-product-card-wishlist-btn,
      #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist {
        transform: none !important;
        transition: opacity 0.2s ease !important;
      }
    }

    #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element:hover .sicon-heart,
    #app custom-salla-product-card salla-button.s-product-card-wishlist-btn button.s-button-element:hover svg,
    #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist:hover .sicon-heart,
    #app .product-entry .product-entry__image-wrap salla-button.btn--wishlist button.product-entry-btn--wishlist:hover svg {
      animation: none !important;
    }
  }

  /* Alternate Pink markup: .s-product-card-* (some blocks / sliders) */
  #app .s-product-card-entry {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  #app .s-product-card-shadow,
  #app .s-product-card-shadow:hover {
    box-shadow: none !important;
  }

  #app .s-product-card-image {
    background-color: transparent !important;
  }

  /* Promotion pill: calmer than flat #00af6c */
  #app .product-entry .product-entry__promotion_title {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
  }

  /* Titles & meta */
  #app .product-entry .product-entry__title {
    color: #1f2937 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
  }

  #app .product-entry .product-entry__title:hover {
    color: #111827 !important;
  }

  /* Long single-line title after JS merges subtitle (packaging + %) into title */
  #app .product-entry.cdc-pack-merge .product-entry__title a,
  #app .product-entry.cdc-pack-merge .product-entry__title {
    line-height: 1.38 !important;
  }

  /* Packaging tail — roadmap mauve #8e6887; strong selectors beat theme link color */
  #app .product-entry .product-entry__title a .cdc-pack-suffix,
  #app .product-entry .product-entry__title .cdc-pack-suffix,
  #app .s-product-card-content-title a .cdc-pack-suffix,
  #app .s-product-card-content-title .cdc-pack-suffix {
    color: #8e6887 !important;
    -webkit-text-fill-color: #8e6887 !important;
    font-weight: 500 !important;
    font-size: 0.92em !important;
  }

  #app .product-entry .product-entry__title:hover a .cdc-pack-suffix,
  #app .product-entry .product-entry__title a:hover .cdc-pack-suffix,
  #app .s-product-card-content-title a:hover .cdc-pack-suffix {
    color: #8e6887 !important;
    -webkit-text-fill-color: #8e6887 !important;
  }

  #app .product-entry .product-entry__subtitle {
    color: #6b7280 !important;
  }

  #app .product-entry .product-entry__brand {
    color: #6b7280 !important;
  }

  /* Denser text block + button (less empty padding inside the card) */
  #app .product-entry .product-entry__content,
  #app .product-entry .content-wrap {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.25rem !important;
    gap: 0.25rem !important;
  }

  #app .product-entry .add-to-cart-container,
  #app .product-entry .add-to-cart-conatiner {
    margin-top: 0.375rem !important;
    margin-bottom: 0.375rem !important;
  }

  /* Price */
  #app .product-entry .product-entry__price .normal-price,
  #app .product-entry .product-entry__price .regular-or-normal-price,
  #app .product-entry .product-entry__price .sale-price {
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Out of stock: softer card */
  #app .product-entry.out-of-stock .product-entry__image-wrap img {
    opacity: 0.72 !important;
    filter: grayscale(0.25) !important;
  }

  #app .product-entry.out-of-stock .product-entry__inner {
    background-color: transparent !important;
  }

  /* Split section: round the image panel (block-inner + bg-area) */
  .block-inner .bg-area.lazy {
    border-radius: 12px !important;
  }

  .block-inner > div.overflow-hidden:has(.bg-area) {
    border-radius: 12px !important;
  }

  @media (prefers-reduced-motion: reduce) {
    #app .product-entry .product-entry__inner {
      transition: none !important;
    }

    #app .product-entry .product-entry__image-wrap img,
    #app .product-entry:hover .product-entry__image-wrap img {
      transform: none !important;
      transition: none !important;
    }
  }

  /* =============================================================================
    Quick view modal — iframe only (cdctogo-salla-custom.js)
    ============================================================================= */

  html.cdc-qv-lock,
  body.cdc-qv-lock {
    overflow: hidden !important;
  }

  .cdc-qv {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
  }

  .cdc-qv.cdc-qv--open {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .cdc-qv__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(5px) !important;
  }

  .cdc-qv__dialog {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(96vw, 1200px) !important;
    height: min(90vh, 860px) !important;
    max-height: 96vh !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.28) !important;
  }

  .cdc-qv__close {
    position: absolute !important;
    top: 10px !important;
    inset-inline-end: 10px !important;
    z-index: 5 !important;
    width: 42px !important;
    height: 42px !important;
    border: none !important;
    border-radius: 9999px !important;
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
  }

  .cdc-qv__close:hover {
    background: #e5e7eb !important;
  }

  .cdc-qv__pane--page {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    background: #f9fafb !important;
  }

  .cdc-qv__iframe-hint {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    font-size: 14px !important;
    z-index: 1 !important;
  }

  .cdc-qv__iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    z-index: 2 !important;
  }

  @media (max-width: 900px) {
    .cdc-qv__dialog {
      left: 0 !important;
      top: 0 !important;
      transform: none !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      border-radius: 0 !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cdc-qv {
      transition: none !important;
    }
  }

  /* =============================================================================
     Statistics — “cdctogo-stats”: one shared bar + dividers (editorial strip)
     ============================================================================= */
  .cdctogo-stats {
    background-color: transparent !important;
    background-image: none !important;
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
    --cdc-stats-strip-bg: rgba(255, 255, 255, 0.92);
    --cdc-stats-strip-border: rgba(142, 104, 135, 0.22);
    --cdc-stats-strip-shadow:
      0 4px 28px rgba(31, 41, 55, 0.07),
      0 1px 0 rgba(255, 255, 255, 0.65) inset;
    --cdc-stats-divider: rgba(142, 104, 135, 0.14);
    --cdc-stats-cell-hover: rgba(142, 104, 135, 0.06);
  }

  @media (min-width: 1024px) {
    .cdctogo-stats {
      padding-top: 3.25rem !important;
      padding-bottom: 3.25rem !important;
    }
  }

  .dark .cdctogo-stats {
    --cdc-stats-strip-bg: rgba(24, 30, 42, 0.88);
    --cdc-stats-strip-border: rgba(142, 104, 135, 0.32);
    --cdc-stats-strip-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --cdc-stats-divider: rgba(142, 104, 135, 0.22);
    --cdc-stats-cell-hover: rgba(142, 104, 135, 0.1);
  }

  .cdctogo-stats .s-block__title {
    margin-bottom: 1.5rem !important;
  }

  .cdctogo-stats .s-block__title h2 {
    font-family: 'El Messiri', 'Noto Naskh Arabic', 'Segoe UI', serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.25rem, 3.4vw, 1.65rem) !important;
    color: #1f2937 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.35 !important;
    padding-bottom: 0.35rem !important;
  }

  .dark .cdctogo-stats .s-block__title h2 {
    color: #f9fafb !important;
  }

  .cdctogo-stats .s-block__title h2::after {
    content: "" !important;
    display: block !important;
    width: 48px !important;
    height: 2px !important;
    margin: 0.55rem auto 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, #8e6887, #c4a8bf, #8e6887, transparent) !important;
    opacity: 0.95 !important;
  }

  /* Single panel: overrides theme grid gaps & card look */
  .cdctogo-stats .content {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    max-width: 58rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    border-radius: 20px !important;
    border: 1px solid var(--cdc-stats-strip-border) !important;
    background: var(--cdc-stats-strip-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: var(--cdc-stats-strip-shadow) !important;
    overflow: hidden !important;
  }

  .cdctogo-stats .content::before {
    content: "" !important;
    position: absolute !important;
    inset-inline: 0 !important;
    top: 0 !important;
    height: 3px !important;
    background: linear-gradient(
      90deg,
      #8e6887 0%,
      #b89eb0 35%,
      #8e6887 70%,
      #6b5a6b 100%
    ) !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  @media (min-width: 1024px) {
    .cdctogo-stats .content {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }

  .cdctogo-stats .statistics-item {
    min-width: 0 !important;
  }

  .cdctogo-stats .statistics-item > div {
    position: relative !important;
    z-index: 0 !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.15rem 0.85rem !important;
    gap: 0.3rem !important;
    min-height: 0 !important;
    justify-content: center !important;
    transition: background-color 0.22s ease !important;
  }

  @media (min-width: 768px) {
    .cdctogo-stats .statistics-item > div {
      padding: 1.35rem 1.1rem !important;
    }
  }

  /* Mobile 2×2: vertical dividers col 1|2, horizontal between rows */
  @media (max-width: 1023px) {
    .cdctogo-stats .statistics-item:nth-child(odd) > div {
      border-inline-end: 1px solid var(--cdc-stats-divider) !important;
    }

    .cdctogo-stats .statistics-item:nth-child(-n + 2) > div {
      border-block-end: 1px solid var(--cdc-stats-divider) !important;
    }
  }

  /* Desktop: one row, only between cells */
  @media (min-width: 1024px) {
    .cdctogo-stats .statistics-item > div {
      border-block-end: none !important;
      border-inline-end: none !important;
    }

    .cdctogo-stats .statistics-item:not(:last-child) > div {
      border-inline-end: 1px solid var(--cdc-stats-divider) !important;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .cdctogo-stats .statistics-item > div:hover {
      background-color: var(--cdc-stats-cell-hover) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cdctogo-stats .statistics-item > div {
      transition: none !important;
    }
  }

  /* Brands block — hide top “عرض الكل” solid button (.s-block--brands from theme) */
  .s-block--brands :is(button, a).btn--main,
  .s-block--brands button.s-button-element.s-button-primary,
  .s-block--brands a.s-button-element.btn--main {
    display: none !important;
  }

  /* Fallback: editor anchor id (if your block id differs, CSS above still works via .s-block--brands) */
  :is(.s-block, section):has(#edit-245920990) :is(button, a).btn--main {
    display: none !important;
  }