/* =========================================================
   NEXAPEP UI — FINAL V4
   ========================================================= */

:root {
  /* palette from nexapep.fit */
  --nx-primary: #1de0f5;
  --nx-primary-dark: #15c3d6;
  --nx-on-primary: #041014;
  --nx-lime: #caff5b;

  --nx-bg: #05090b;
  --nx-card: #0b1316;
  --nx-panel2: #0f1a1e;
  --nx-card-gradient:
    linear-gradient(150deg, rgba(18,28,31,.95), rgba(8,13,15,.96));

  --nx-text: #f3f7f7;
  --nx-muted: #8fa0a5;
  --nx-light: #728287;

  --nx-border: rgba(255,255,255,.08);

  --nx-radius-card: 14px;

  /* Salla's own components read these */
  --color-primary: #1de0f5;
  --color-primary-dark: #15c3d6;
  --color-primary-light: #7eeefb;
  --color-primary-reverse: #041014;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
  background: var(--nx-bg) !important;
}

body {
  background:
    radial-gradient(circle at 70% -10%, rgba(29,224,245,.12), transparent 34%),
    radial-gradient(circle at 10% 30%, rgba(202,255,91,.05), transparent 30%),
    var(--nx-bg) !important;
  background-attachment: fixed !important;
}

body {
  color: var(--nx-text) !important;
}

* {
  box-sizing: border-box;
}

.container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.s-block {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

.shadow-default {
  box-shadow: none !important;
}


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

.store-header,
.top-navbar,
.main-nav-container,
.main-nav-container .inner {
  background: rgba(5,9,11,.74) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.store-header {
  border: 0 !important;
}

.top-navbar {
  border: 0 !important;
}

.main-nav-container {
  box-shadow: none !important;
  border-bottom: 1px solid var(--nx-border) !important;
}


/* logo */

.navbar-brand {
  padding: 0 !important;
}

.navbar-brand img {
  width: auto !important;
  height: auto !important;

  max-width: 100px !important;
  max-height: 44px !important;

  object-fit: contain !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.header-search,
.nx-search {
  background: rgba(5,9,11,.74) !important;
}

.nx-search {
  width: 100% !important;

  padding:
    0
    13px
    12px !important;

  margin: 0 !important;
}

.nx-search > * {
  width: 100% !important;
}

.nx-search salla-search,
salla-search {
  display: block !important;

  width: 100% !important;

  overflow: hidden !important;

  border-radius: 13px !important;
}


/* =========================================================
   BANNERS
   ========================================================= */

.s-block--fixed-banner {
  margin-top: 14px !important;
}

.s-block--fixed-banner .container {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.s-block--fixed-banner a,
.s-block--fixed-banner .banner {
  display: block !important;

  overflow: hidden !important;

  border-radius: 14px !important;
}

.s-block--fixed-banner img {
  display: block !important;

  width: 100% !important;

  border-radius: 14px !important;
}

salla-slider {
  border-radius: 14px !important;
}

salla-slider img {
  border-radius: 14px !important;
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.s-block__title {
  padding: 0 2px !important;
  margin-bottom: 11px !important;
}

.s-block__title h2,
.s-block__title h3 {
  margin: 0 !important;

  color: var(--nx-text) !important;

  font-size: 19px !important;
  line-height: 1.4 !important;

  font-weight: 800 !important;
}

.s-block__title a {
  color: var(--nx-primary) !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  text-decoration: none !important;
}


/* =========================================================
   PRODUCT SECTIONS
   ========================================================= */

[data-testid="store-home-fixed-products"],
[data-testid="store-home-products-slider"],
[data-testid="store-home-featured-products-tabs"],
.s-block--tabs-produtcs {
  background: transparent !important;
}


/* =========================================================
   PRODUCT CARD HOST
   IMPORTANT: NEVER height:100%
   ========================================================= */

salla-product-card,
custom-salla-product-card {
  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  align-self: start !important;

  background: var(--nx-card-gradient) !important;

  border:
    1px solid
    var(--nx-border) !important;

  border-radius:
    var(--nx-radius-card) !important;

  overflow: visible !important;

  box-shadow: none !important;

  transition: border-color .25s, box-shadow .25s;
}

salla-product-card:hover,
custom-salla-product-card:hover {
  border-color: rgba(29,224,245,.25) !important;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.25) !important;
}


/* =========================================================
   RAED / CUSTOM PRODUCT CARD
   ========================================================= */

.s-product-card-entry {
  display: flex !important;
  flex-direction: column !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;

  background: transparent !important;

  border: 0 !important;

  border-radius:
    var(--nx-radius-card) !important;

  box-shadow: none !important;
}


/* IMAGE */

.s-product-card-image {
  position: relative !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  aspect-ratio: 1 / 1 !important;

  overflow: hidden !important;

  margin: 0 !important;

  background: var(--nx-panel2) !important;

  border-radius:
    13px
    13px
    0
    0 !important;
}

.s-product-card-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  margin: 0 !important;

  border-radius: 0 !important;
}


/* CONTENT */

.s-product-card-content {
  display: flex !important;

  flex-direction: column !important;

  height: auto !important;
  min-height: 0 !important;

  padding:
    9px
    10px
    10px !important;

  background: transparent !important;
}


/* PRODUCT NAME */

.s-product-card-content-title {
  margin:
    0
    0
    5px !important;

  min-height: 37px !important;
  max-height: 40px !important;

  overflow: hidden !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  color: var(--nx-text) !important;

  font-size: 12.5px !important;
  line-height: 1.5 !important;

  font-weight: 650 !important;
}


/* optional text */

.s-product-card-content-sub {
  display: none !important;
}


/* PRICE */

.s-product-card-price,
.s-product-card-sale-price {
  color: var(--nx-text) !important;

  font-size: 15px !important;
  line-height: 1.35 !important;

  font-weight: 800 !important;
}

.s-product-card-regular-price {
  color: var(--nx-light) !important;

  font-size: 10.5px !important;

  font-weight: 400 !important;
}


/* =========================================================
   WISHLIST
   ========================================================= */

.s-product-card-wishlist-btn {
  width: 31px !important;
  height: 31px !important;

  min-width: 31px !important;

  padding: 0 !important;

  display: flex !important;

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

  border:
    1px solid
    var(--nx-border) !important;

  border-radius: 50% !important;

  background:
    rgba(11,19,22,.85) !important;

  color: var(--nx-text) !important;

  box-shadow: none !important;
}


/* =========================================================
   ADD TO CART
   ========================================================= */

salla-add-product-button {
  display: block !important;

  position: static !important;

  width: 100% !important;

  height: auto !important;
  min-height: 39px !important;

  margin-top: 8px !important;

  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;

  overflow: visible !important;
}


/* Theme Raed wrapper */

.s-product-card-add-button {
  display: flex !important;

  position: static !important;

  width: 100% !important;

  min-height: 39px !important;

  margin-top: 8px !important;

  padding: 7px 8px !important;

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

  gap: 5px !important;

  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;

  border: 0 !important;

  border-radius: 10px !important;

  background: #f0f5f3 !important;

  color: #061013 !important;

  font-size: 11.5px !important;

  font-weight: 700 !important;

  box-shadow: none !important;
}

.s-product-card-add-button:hover,
salla-product-card:hover .s-product-card-add-button,
custom-salla-product-card:hover .s-product-card-add-button {
  background: var(--nx-primary) !important;

  color: #000 !important;

  box-shadow:
    0 0 15px
    rgba(29,224,245,.3) !important;
}


/* =========================================================
   FEATURES
   ========================================================= */

.s-block--features {
  margin-left: 10px !important;
  margin-right: 10px !important;

  padding-top: 16px !important;
  padding-bottom: 16px !important;

  background: rgba(255,255,255,.025) !important;

  border: 1px solid var(--nx-border) !important;

  border-radius: 16px !important;
}

.s-block--features__item {
  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;
}

.s-block--features__item h2 {
  color: var(--nx-text) !important;

  font-size: 13px !important;

  font-weight: 700 !important;
}

.s-block--features__item p {
  color: var(--nx-light) !important;

  font-size: 10.5px !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.store-footer {
  margin-top: 36px !important;

  background: var(--nx-bg) !important;

  border-top:
    1px solid
    var(--nx-border) !important;
}


/* =========================================================
   BOTTOM NAV
   ========================================================= */

.nx-bottom-nav {
  display: none;
}


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

@media (max-width: 767px) {

  body {
    padding-bottom: 75px !important;
  }

  .container {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .s-block {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }


  /* hide original upper row */

  .nx-header-ready .top-navbar {
    display: none !important;
  }


  /* main header */

  .main-nav-container {
    position: relative !important;

    min-height: 64px !important;

    background: rgba(5,9,11,.74) !important;

    border: 0 !important;

    box-shadow: none !important;
  }

  .main-nav-container .inner {
    background: transparent !important;
  }

  .main-nav-container .container {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .main-nav-container
  .flex.items-stretch.justify-between.relative {

    position: relative !important;

    min-height: 64px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;
  }


  /* MENU RIGHT */

  [data-testid="store-header-mobile-toggle"] {

    position: absolute !important;

    right: 0 !important;
    left: auto !important;

    top: 50% !important;

    transform:
      translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;

    margin: 0 !important;

    display: flex !important;

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

    border: 0 !important;

    border-radius: 10px !important;

    background: rgba(255,255,255,.05) !important;

    border: 1px solid var(--nx-border) !important;

    z-index: 5;
  }

  [data-testid="store-header-mobile-toggle"] i {
    color: var(--nx-text) !important;

    font-size: 20px !important;
  }


  /* LOGO CENTER */

  .navbar-brand {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform:
      translate(-50%, -50%) !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 3;
  }

  .navbar-brand img {

    width: auto !important;
    height: auto !important;

    max-width: 88px !important;
    max-height: 39px !important;
  }


  custom-main-menu {
    display: none !important;
  }


  /* ACCOUNT + CART LEFT */

  .main-nav-container
  .flex.items-center.justify-end {

    position: absolute !important;

    left: 0 !important;
    right: auto !important;

    top: 50% !important;

    transform:
      translateY(-50%) !important;

    width: auto !important;

    max-width: 86px !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 6px !important;

    overflow: visible !important;

    z-index: 5;
  }


  salla-user-menu,
  salla-cart-summary {

    position: relative !important;

    flex:
      0
      0
      35px !important;

    width: 35px !important;
    height: 35px !important;

    min-width: 35px !important;
    max-width: 35px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

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

    overflow: visible !important;

    border:
      1px solid
      var(--nx-border) !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,.05) !important;

    box-shadow: none !important;
  }


  /* SEARCH BELOW */

  .nx-search {

    width: 100% !important;

    padding:
      0
      12px
      11px !important;

    border-bottom:
      1px solid
      var(--nx-border) !important;
  }


  /* PRODUCT CARDS */

  salla-product-card,
  custom-salla-product-card {

    height: auto !important;

    min-height: 0 !important;

    align-self: start !important;

    border-radius: 13px !important;
  }

  .s-product-card-entry {

    height: auto !important;

    min-height: 0 !important;

    border-radius: 13px !important;
  }

  .s-product-card-content {

    height: auto !important;

    min-height: 0 !important;

    padding:
      8px
      9px
      9px !important;
  }

  .s-product-card-content-title {

    min-height: 35px !important;

    max-height: 38px !important;

    font-size: 12px !important;

    margin-bottom: 4px !important;
  }

  .s-product-card-price,
  .s-product-card-sale-price {

    font-size: 14.5px !important;
  }


  salla-add-product-button,
  .s-product-card-add-button {

    display: flex !important;

    width: 100% !important;

    min-height: 38px !important;

    margin-top: 7px !important;

    opacity: 1 !important;

    visibility: visible !important;

    position: static !important;

    transform: none !important;
  }


  /* BOTTOM NAV */

  .nx-bottom-nav {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 999999;

    height:
      calc(
        66px +
        env(safe-area-inset-bottom)
      );

    padding-bottom:
      env(safe-area-inset-bottom);

    display: grid;

    grid-template-columns:
      repeat(4, 1fr);

    direction: rtl;

    background:
      rgba(5,9,11,.85);

    border-top:
      1px solid
      var(--nx-border);

    box-shadow:
      0 -6px 24px
      rgba(0,0,0,.4);

    backdrop-filter:
      blur(16px);

    -webkit-backdrop-filter:
      blur(16px);
  }


  .nx-bottom-nav a {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    color: var(--nx-muted);

    font-size: 10px;

    font-weight: 500;

    text-decoration: none !important;
  }

  .nx-bottom-nav i {
    font-size: 20px;

    line-height: 1;
  }

  .nx-bottom-nav a.active {
    color: var(--nx-primary);
  }

  .nx-bottom-nav a.active::before {

    content: "";

    position: absolute;

    top: 4px;

    width: 20px;
    height: 3px;

    background:
      var(--nx-primary);

    border-radius: 20px;
  }

}


/* tiny phones */

@media (max-width: 380px) {

  .navbar-brand img {
    max-width: 78px !important;
  }

  salla-user-menu,
  salla-cart-summary {

    flex-basis: 33px !important;

    width: 33px !important;
    height: 33px !important;

    min-width: 33px !important;
    max-width: 33px !important;

    min-height: 33px !important;
    max-height: 33px !important;
  }

  .main-nav-container
  .flex.items-center.justify-end {
    gap: 4px !important;
  }

}

/* =====================================================
   MOBILE HEADER ICONS FIX
   Salla renders these without shadow DOM, so the
   inner elements must be styled from here.
   ===================================================== */

@media (max-width: 767px) {

  /* lock both buttons to a perfect circle */

  salla-user-menu,
  salla-cart-summary {

    box-sizing: border-box !important;

    min-height: 35px !important;
    max-height: 35px !important;

    aspect-ratio: 1 / 1 !important;

    align-self: center !important;

    flex-shrink: 0 !important;

    line-height: 1 !important;
  }


  /* hide cart total, keep icon + count */

  salla-cart-summary .s-cart-summary-content,
  salla-cart-summary .s-cart-summary-total {
    display: none !important;
  }


  salla-cart-summary .s-cart-summary-wrapper,
  salla-user-menu .s-user-menu-login-btn,
  salla-user-menu .s-user-menu-trigger {

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;

    border-radius: 50% !important;

    line-height: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

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

    gap: 0 !important;

    border: 0 !important;

    background: transparent !important;
  }


  salla-cart-summary #s-cart-icon {

    display: flex !important;

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

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }


  /* hidden default icon must stay hidden */

  salla-cart-summary slot-fb[hidden],
  salla-cart-summary [hidden] {
    display: none !important;
  }


  /* remove theme's own circle/background behind the icon */

  salla-cart-summary .s-cart-summary-wrapper::before,
  salla-cart-summary .s-cart-summary-wrapper::after,
  salla-cart-summary #s-cart-icon::before,
  salla-cart-summary #s-cart-icon::after {
    display: none !important;
    content: none !important;
  }


  /* icons size */

  salla-cart-summary .header-btn__icon,
  salla-cart-summary .s-cart-summary-icon {

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;

    display: flex !important;

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

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    margin: 0 !important;

    color: var(--nx-text) !important;

    font-size: 18px !important;

    line-height: 1 !important;
  }

  salla-cart-summary svg,
  salla-user-menu .s-user-menu-login-btn svg,
  salla-user-menu .s-user-menu-trigger svg {

    width: 19px !important;
    height: 19px !important;

    fill: var(--nx-text) !important;
  }


  /* count badge on the corner */

  salla-cart-summary .s-cart-summary-count {

    position: absolute !important;

    top: -5px !important;
    right: -5px !important;
    left: auto !important;

    min-width: 17px !important;
    height: 17px !important;

    margin: 0 !important;
    padding: 0 4px !important;

    display: flex !important;

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

    border: 2px solid var(--nx-bg) !important;
    border-radius: 20px !important;

    background: var(--nx-primary) !important;

    color: var(--nx-on-primary) !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    z-index: 2;
  }


  /* user avatar (logged in) */

  salla-user-menu img {

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    border-radius: 50% !important;
  }

}


/* =====================================================
   DARK THEME — SALLA / RAED SHARED ELEMENTS
   Matches nexapep.fit
   ===================================================== */

h1, h2, h3, h4, h5, h6,
.store-footer,
.store-footer a,
.store-footer p {
  color: var(--nx-text) !important;
}

.store-footer p,
.store-footer small {
  color: var(--nx-light) !important;
}


/* Tailwind light utilities used by the theme */

.bg-white,
.bg-gray-50,
.bg-gray-100 {
  background-color: var(--nx-card) !important;
}

.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700 {
  color: var(--nx-muted) !important;
}

.text-gray-800,
.text-gray-900,
.text-dark {
  color: var(--nx-text) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300,
.divide-gray-100 > * {
  border-color: var(--nx-border) !important;
}


/* SEARCH — same as reference input */

salla-search input,
.s-search-input,
.nx-search input {

  height: 46px !important;

  border: 1px solid var(--nx-border) !important;

  border-radius: 13px !important;

  background: rgba(255,255,255,.035) !important;

  color: var(--nx-text) !important;
}

salla-search input::placeholder,
.s-search-input::placeholder,
.nx-search input::placeholder {
  color: #6e8085 !important;
}

salla-search input:focus,
.s-search-input:focus,
.nx-search input:focus {

  border-color: rgba(29,224,245,.5) !important;

  box-shadow:
    0 0 0 4px
    rgba(29,224,245,.07) !important;

  outline: none !important;
}

.s-search-container,
.s-search-results {
  background: var(--nx-card) !important;

  color: var(--nx-text) !important;
}


/* FORMS */

input,
select,
textarea,
.form-input {
  background-color: rgba(255,255,255,.035) !important;

  border-color: var(--nx-border) !important;

  color: var(--nx-text) !important;
}


/* MODALS / DRAWERS / DROPDOWNS */

.s-modal-body,
.s-modal-wrapper .s-modal-body,
.s-user-menu-dropdown,
.s-user-menu-header,
.mm-spn,
.mm-spn.mm-spn--light {
  background: var(--nx-card) !important;

  color: var(--nx-text) !important;
}


/* PRICES / LINKS */

.s-product-card-price,
.s-product-card-sale-price {
  color: var(--nx-text) !important;
}

.s-product-card-content-title a {
  color: var(--nx-text) !important;
}


/* PRIMARY BUTTONS (Salla) */

.s-button-primary,
.btn--primary {
  background: var(--nx-primary) !important;

  color: var(--nx-on-primary) !important;

  border-color: transparent !important;
}

.s-button-primary:hover,
.btn--primary:hover {
  background: var(--nx-primary-dark) !important;
}


/* header icons on dark */

salla-cart-summary .header-btn__icon,
salla-cart-summary .s-cart-summary-icon,
[data-testid="store-header-mobile-toggle"] i {
  color: var(--nx-text) !important;
}


/* =====================================================
   WHATSAPP FLOATING BUTTON
   ===================================================== */

#wa-angel {
  display: none !important;
}

.nx-whatsapp {

  position: fixed;

  right: 16px;
  bottom: 20px;

  z-index: 999998;

  width: 54px;
  height: 54px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #25d366;

  color: #fff !important;

  text-decoration: none !important;

  box-shadow:
    0 10px 25px
    rgba(37,211,102,.35);

  transition: transform .25s, box-shadow .25s;
}

.nx-whatsapp i {
  font-size: 28px;

  line-height: 1;

  color: #fff !important;
}

.nx-whatsapp:hover {

  transform: translateY(-3px);

  box-shadow:
    0 14px 32px
    rgba(37,211,102,.45);
}


/* soft pulse ring */

.nx-whatsapp::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background: #25d366;

  opacity: .45;

  z-index: -1;

  animation: nx-wa-pulse 2.2s ease-out infinite;
}

@keyframes nx-wa-pulse {

  0% {
    transform: scale(1);
    opacity: .45;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-whatsapp::before {
    animation: none;
  }
}


/* mobile: sit above the bottom nav */

@media (max-width: 767px) {

  .nx-whatsapp {

    right: 14px;

    bottom:
      calc(
        66px +
        env(safe-area-inset-bottom) +
        14px
      );

    width: 50px;
    height: 50px;
  }

  .nx-whatsapp i {
    font-size: 26px;
  }
}


/* =====================================================
   TRUST FEATURES BLOCK (dark)
   ===================================================== */

.s-block-trust-store-features {
  background: transparent !important;
}

.s-block-trust-store-features__item {

  padding: 18px 14px !important;

  background: rgba(255,255,255,.025) !important;

  border: 1px solid var(--nx-border) !important;

  border-radius: 18px !important;

  box-shadow: none !important;
}

.s-block-trust-store-features__media {

  border-radius: 14px !important;

  overflow: hidden;
}

/* icons without their own background get a soft cyan one */

.s-block-trust-store-features__media[style=""],
.s-block-trust-store-features__media:not([style]) {
  background: rgba(29,224,245,.08) !important;
}

/* grey icon (#333) is invisible on dark */

.s-block-trust-store-features__icon[style*="#333"] {
  color: var(--nx-primary) !important;
}

.s-block-trust-store-features__media[style*="51,51,51"] {
  background-color: rgba(29,224,245,.08) !important;
}

.s-block-trust-store-features__title {

  color: var(--nx-text) !important;

  font-weight: 700 !important;
}

.s-block-trust-store-features__subtitle {

  color: var(--nx-muted) !important;

  line-height: 1.8 !important;
}


/* =====================================================
   FOOTER (dark)
   ===================================================== */

.store-footer,
.store-footer__inner,
.store-footer .bg-white,
.store-footer [class*="bg-gray"] {
  background: var(--nx-bg) !important;

  color: var(--nx-muted) !important;
}

.store-footer__inner {
  border-top: 1px solid var(--nx-border) !important;
}

.store-footer h3,
.store-footer .s-contacts-title {
  color: var(--nx-text) !important;

  font-weight: 700 !important;
}

.store-footer div,
.store-footer p,
.store-footer span {
  color: inherit;
}

.store-footer .leading-6 {
  color: var(--nx-muted) !important;
}


/* links */

.store-footer a,
.s-menu-footer-item,
.s-contacts-item {
  color: var(--nx-muted) !important;

  transition: color .2s;
}

.store-footer a:hover,
.s-menu-footer-item:hover,
.s-contacts-item:hover {
  color: var(--nx-primary) !important;
}


/* contact icons */

.s-contacts-icon {

  background: rgba(255,255,255,.05) !important;

  border: 1px solid var(--nx-border) !important;

  color: var(--nx-primary) !important;
}

.s-contacts-icon svg,
.s-social-icon svg {
  fill: currentColor !important;
}


/* social */

.s-social-link a,
.s-social-icon {

  background: rgba(255,255,255,.05) !important;

  border-color: var(--nx-border) !important;

  color: var(--nx-text) !important;
}

.s-social-link a:hover .s-social-icon,
.s-social-link a:hover {
  color: var(--nx-primary) !important;

  border-color: rgba(29,224,245,.35) !important;
}


/* trust badge (freelance doc) */

.s-trust-badges-wrapper {

  background: rgba(255,255,255,.035) !important;

  border: 1px solid var(--nx-border) !important;

  border-radius: 14px !important;
}

.s-trust-badges-label {
  color: var(--nx-muted) !important;
}

.s-trust-badges-number {
  color: var(--nx-text) !important;
}

.s-trust-badges-image {
  border-radius: 10px;

  background: #fff;
}


/* bottom copyright bar */

.store-footer [class*="copyright"],
.store-footer__bottom,
.store-footer .copyright-text {
  background: var(--nx-bg) !important;

  color: var(--nx-light) !important;

  border-top: 1px solid var(--nx-border) !important;
}


/* =====================================================
   TRUST FEATURES + REVIEWS — STRONGER DARK
   (same rules are injected into shadow roots by js.js)
   ===================================================== */

body .s-block-trust-store-features,
body .s-block-trust-store-features .s-block-trust-store-features__grid {
  background: transparent !important;
}

body .s-block-trust-store-features .s-block-trust-store-features__item {
  background-color: var(--nx-card) !important;
  background-image: var(--nx-card-gradient) !important;
  border: 1px solid var(--nx-border) !important;
}

body .s-reviews-testimonial,
body .s-reviews-testimonial .s-reviews-testimonial__inner {
  background-color: var(--nx-card) !important;
  background-image: var(--nx-card-gradient) !important;
  box-shadow: none !important;
}

/* testimonials slider wrapper */

.s-block--testimonials,
.s-block--testimonials .swiper-slide,
[class*="s-reviews"] .swiper-slide {
  background: transparent !important;
}

/* trust features */

.s-block-trust-store-features,
.s-block-trust-store-features__grid {
  background: transparent !important;
}

.s-block-trust-store-features .s-block-trust-store-features__item,
.s-block-trust-store-features__item {
  background-color: var(--nx-card, #0b1316) !important;
  background-image: var(--nx-card-gradient, none) !important;
  border: 1px solid var(--nx-border, rgba(255,255,255,.08)) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

.s-block-trust-store-features__media[style*="51,51,51"],
.s-block-trust-store-features__media[style=""],
.s-block-trust-store-features__media:not([style]) {
  background-color: rgba(29,224,245,.08) !important;
}

.s-block-trust-store-features__icon[style*="#333"] {
  color: var(--nx-primary, #1de0f5) !important;
}

.s-block-trust-store-features__title {
  color: var(--nx-text, #f3f7f7) !important;
}

.s-block-trust-store-features__subtitle {
  color: var(--nx-muted, #8fa0a5) !important;
}


/* reviews / testimonials */

.s-reviews-testimonial,
.s-reviews-testimonial .s-reviews-testimonial__inner,
.s-reviews-testimonial__inner {
  background-color: var(--nx-card, #0b1316) !important;
  background-image: var(--nx-card-gradient, none) !important;
  border-color: var(--nx-border, rgba(255,255,255,.08)) !important;
  box-shadow: none !important;
}

.s-reviews-testimonial__inner {
  border: 1px solid var(--nx-border, rgba(255,255,255,.08)) !important;
  border-radius: 18px !important;
}

.s-reviews-testimonial__text p,
.s-reviews-testimonial .text-gray-700 {
  color: var(--nx-muted, #8fa0a5) !important;
}

.s-reviews-testimonial__info h2,
.s-reviews-testimonial .text-gray-900 {
  color: var(--nx-text, #f3f7f7) !important;
}

.s-reviews-testimonial__avatar img {
  border: 2px solid var(--nx-border, rgba(255,255,255,.08)) !important;
  border-radius: 50% !important;
  background: var(--nx-panel2, #0f1a1e) !important;
}

.s-reviews-testimonial__icon {
  color: rgba(29,224,245,.25) !important;
}

.s-reviews-testimonial__icon svg {
  fill: currentColor !important;
}

.s-rating-stars-selected svg {
  fill: #ffd166 !important;
}


/* =====================================================
   COMMENTS / REVIEWS (dark)
   ===================================================== */


/* product comments / reviews */

.s-comments-container,
.s-comments-product,
.s-comments,
.s-comments-page {
  background-color: transparent !important;
  color: var(--nx-text, #f3f7f7) !important;
}

.s-comments-container {
  background-color: var(--nx-card, #0b1316) !important;
  background-image: var(--nx-card-gradient, none) !important;
  border: 1px solid var(--nx-border, rgba(255,255,255,.08)) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

.s-comments-container .bg-white,
.s-comments-container [class*="bg-gray"],
.s-comments-item,
.s-comments-product-item,
.s-comment-item,
.s-comments-form,
.s-comments-summary,
.s-comments-rating-summary {
  background-color: rgba(255,255,255,.03) !important;
  border-color: var(--nx-border, rgba(255,255,255,.08)) !important;
  color: var(--nx-text, #f3f7f7) !important;
}

.s-comments-container h1,
.s-comments-container h2,
.s-comments-container h3,
.s-comments-container h4,
.s-comments-container b,
.s-comments-container strong,
.s-comments-container .text-gray-900,
.s-comments-container .text-gray-800 {
  color: var(--nx-text, #f3f7f7) !important;
}

.s-comments-container p,
.s-comments-container span,
.s-comments-container small,
.s-comments-container time,
.s-comments-container .text-gray-400,
.s-comments-container .text-gray-500,
.s-comments-container .text-gray-600,
.s-comments-container .text-gray-700 {
  color: var(--nx-muted, #8fa0a5) !important;
}

.s-comments-container hr,
.s-comments-container [class*="border"],
.s-comments-container [class*="divide"] > * {
  border-color: var(--nx-border, rgba(255,255,255,.08)) !important;
}

.s-comments-container textarea,
.s-comments-container input {
  background-color: rgba(255,255,255,.035) !important;
  border: 1px solid var(--nx-border, rgba(255,255,255,.08)) !important;
  color: var(--nx-text, #f3f7f7) !important;
}

.s-comments-container textarea::placeholder,
.s-comments-container input::placeholder {
  color: #6e8085 !important;
}

.s-comments-container img {
  background: var(--nx-panel2, #0f1a1e) !important;
}


/* =====================================================
   COMPACT PRODUCT CARDS
   ===================================================== */

/*
 * Grids only: a container with 2+ cards side by side.
 * Slides (one card each) are excluded.
 */

.s-products-list-wrapper,
:is(div, section):not(.swiper-wrapper):not(.swiper-slide):has(> salla-product-card + salla-product-card),
:is(div, section):not(.swiper-wrapper):not(.swiper-slide):has(> custom-salla-product-card + custom-salla-product-card) {

  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 9px !important;
}

@media (min-width: 640px) {
  .s-products-list-wrapper,
  :is(div, section):not(.swiper-wrapper):not(.swiper-slide):has(> salla-product-card + salla-product-card),
  :is(div, section):not(.swiper-wrapper):not(.swiper-slide):has(> custom-salla-product-card + custom-salla-product-card) {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .s-products-list-wrapper,
  :is(div, section):not(.swiper-wrapper):not(.swiper-slide):has(> salla-product-card + salla-product-card),
  :is(div, section):not(.swiper-wrapper):not(.swiper-slide):has(> custom-salla-product-card + custom-salla-product-card) {
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    gap: 12px !important;
  }
}

@media (min-width: 1280px) {
  .s-products-list-wrapper,
  :is(div, section):not(.swiper-wrapper):not(.swiper-slide):has(> salla-product-card + salla-product-card),
  :is(div, section):not(.swiper-wrapper):not(.swiper-slide):has(> custom-salla-product-card + custom-salla-product-card) {
    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;
  }
}


/* slider slides: plain block, card fills it */

.s-products-slider-card,
.swiper-slide:has(> salla-product-card),
.swiper-slide:has(> custom-salla-product-card) {

  display: block !important;

  width: 150px !important;

  max-width: 150px !important;

  height: auto !important;
}

@media (min-width: 768px) {
  .s-products-slider-card,
  .swiper-slide:has(> salla-product-card),
  .swiper-slide:has(> custom-salla-product-card) {
    width: 185px !important;

    max-width: 185px !important;
  }
}

.s-products-slider-card > salla-product-card,
.s-products-slider-card > custom-salla-product-card {
  width: 100% !important;
}


/* tighter inside the card */

salla-product-card,
custom-salla-product-card {
  max-width: 100% !important;

  min-width: 0 !important;
}

.s-product-card-image {
  aspect-ratio: 1 / 1 !important;
}

.s-product-card-content {
  padding: 7px 8px 8px !important;
}

.s-product-card-content-title {
  min-height: 32px !important;

  max-height: 34px !important;

  font-size: 11px !important;

  line-height: 1.5 !important;

  margin-bottom: 2px !important;
}


/* price lives inside content-sub — keep it visible */

.s-product-card-content-sub {

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  flex-wrap: wrap !important;
}

.s-product-card-price,
.s-product-card-sale-price {
  margin: 0 !important;

  font-size: 13px !important;
}

.s-product-card-regular-price {
  font-size: 10px !important;
}


/* add to cart — always visible */

.s-product-card-content-footer {

  display: flex !important;

  width: 100% !important;

  margin-top: 6px !important;

  opacity: 1 !important;

  visibility: visible !important;
}

salla-add-product-button {
  min-height: 32px !important;

  margin-top: 0 !important;

  flex: 1 1 auto !important;
}

.s-product-card-content-footer .s-button-element,
.s-product-card-add-button {

  width: 100% !important;

  min-height: 32px !important;

  padding: 4px 6px !important;

  border: 0 !important;

  border-radius: 9px !important;

  background: #f0f5f3 !important;

  color: #061013 !important;

  font-size: 10.5px !important;

  font-weight: 700 !important;
}

.s-product-card-content-footer .s-button-element i {
  font-size: 13px !important;

  color: #0b9f63 !important;
}

.s-product-card-content-footer .s-button-element:hover,
custom-salla-product-card:hover .s-product-card-content-footer .s-button-element,
salla-product-card:hover .s-product-card-content-footer .s-button-element {
  background: var(--nx-primary) !important;

  color: #000 !important;
}

custom-salla-product-card:hover .s-product-card-content-footer .s-button-element i,
salla-product-card:hover .s-product-card-content-footer .s-button-element i {
  color: #000 !important;
}

.s-product-card-wishlist-btn {
  width: 27px !important;
  height: 27px !important;

  min-width: 27px !important;
}