/*
  HOURSE / HORSE CARD — Store Theme
  CSS only → Salla: تخصيص الثيم → CSS
  Do NOT paste script.js — menu uses Raed theme (Mmenu) natively
*/

:root {
  /* Brand palette (from visual identity) */
  --hc-cream: #f5efe4;
  --hc-navy: #0d1b2e;
  --hc-orange: #ff8a00;
  --hc-purple: #682bd9;
  --hc-white: #ffffff;
  --hc-text: #0d1b2e;
  --hc-muted: #5c6570;

  /* Store canvas */
  --hc-bg: var(--hc-cream);
  --hc-font: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

/* ---------- Full store cream background ---------- */
html,
body {
  background-color: var(--hc-bg) !important;
  color: var(--hc-text);
  font-family: var(--hc-font);
}

/* Common Salla / theme wrappers */
#app,
main,
.main,
.wrapper,
.store,
.store-content,
.page,
.page-content,
.s-block--main,
.salla-container,
.container-fluid,
body > div:not(.swal2-container):not(.mm-ocd) {
  background-color: var(--hc-bg) !important;
}

/* Keep nested sections transparent so cream shows through */
.container,
.s-block,
.s-products-list,
.s-product-card,
.site-header,
.store-header,
footer,
.footer {
  background-color: transparent;
}

/* Header can stay cream (or switch to navy if you prefer later) */
.site-header,
.store-header,
header.header,
.main-header {
  background-color: var(--hc-cream) !important;
}

/* Soft text defaults */
a {
  color: var(--hc-navy);
}

a:hover {
  color: var(--hc-orange);
}

/* Primary buttons → brand orange */
.btn-primary,
button.btn-primary,
.s-button--primary,
a.btn-primary,
[class*="btn-primary"] {
  background-color: var(--hc-orange) !important;
  border-color: var(--hc-orange) !important;
  color: var(--hc-white) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
.s-button--primary:hover {
  filter: brightness(0.95);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--hc-navy);
  font-family: var(--hc-font);
}

/* Product grid / cards sit on cream */
.s-products-list__item,
.product-block,
.product-item {
  background-color: transparent;
}

/* Optional: dark navy sections (banners) still allowed */
.hc-navy-section,
[data-hc-section="navy"] {
  background-color: var(--hc-navy) !important;
  color: var(--hc-white);
}

.hc-purple-section,
[data-hc-section="purple"] {
  background-color: var(--hc-purple) !important;
  color: var(--hc-white);
}

/* Utility helpers */
.hc-bg-cream {
  background-color: var(--hc-cream) !important;
}
.hc-bg-navy {
  background-color: var(--hc-navy) !important;
}
.hc-bg-orange {
  background-color: var(--hc-orange) !important;
}
.hc-bg-purple {
  background-color: var(--hc-purple) !important;
}
.hc-text-orange {
  color: var(--hc-orange) !important;
}
.hc-text-navy {
  color: var(--hc-navy) !important;
}
.hc-text-cream {
  color: var(--hc-cream) !important;
}

/* =========================================================
   HORSE CARD navbar — adapted from SVR SAlla (CSS only)
   Raed DOM: header.store-header > #mainnav.main-nav-container
   Menu: #mobile-menu.mobile-menu (main-menu.js + Mmenu Light)
   ========================================================= */

:root {
  --hc-nav-top: 12px;
  --hc-nav-side: 14px;
  --hc-nav-height: 56px;
  --hc-nav-radius: 16px;
  --hc-nav-gap: 14px;

  /* Mmenu drawer width (RTL = slides from right) */
  --mm-ocd-width: min(420px, 88vw);
  --mm-ocd-min-width: 280px;
  --mm-ocd-max-width: 420px;
}

/* Push page below floating navbar */
.app-inner {
  padding-top: calc(var(--hc-nav-top) + var(--hc-nav-height) + var(--hc-nav-gap)) !important;
}

/* Single bar like SVR — hide Raed top search row */
.store-header .top-navbar {
  display: none !important;
}

/* Fixed floating shell */
.store-header,
.store-header.fixed-sticky,
.store-header.fixed-sticky.is_large,
.store-header.fixed-sticky.scrolled,
.store-header.fixed-sticky.sticky,
.store-header.fixed-sticky.is-sticky {
  position: fixed !important;
  top: var(--hc-nav-top) !important;
  left: var(--hc-nav-side) !important;
  right: var(--hc-nav-side) !important;
  width: auto !important;
  height: var(--hc-nav-height) !important;
  min-height: var(--hc-nav-height) !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 1000 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

.store-header #mainnav,
.store-header #mainnav.main-nav-container,
#mainnav.main-nav-container {
  height: var(--hc-nav-height) !important;
  min-height: var(--hc-nav-height) !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Raed ships shadow-default + bg-white on #mainnav */
.store-header #mainnav.shadow-default,
.store-header #mainnav.bg-white {
  box-shadow: none !important;
  background: transparent !important;
}

/* Navy bar — solid, never transparent on scroll */
.store-header #mainnav .inner {
  height: var(--hc-nav-height) !important;
  min-height: var(--hc-nav-height) !important;
  max-height: none !important;
  overflow: visible !important;
  background: var(--hc-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: var(--hc-nav-radius) !important;
  box-shadow: 0 14px 34px rgba(13, 27, 46, 0.22) !important;
  opacity: 1 !important;
}

.store-header #mainnav .container {
  max-width: 100% !important;
  height: var(--hc-nav-height) !important;
  padding-inline: 18px !important;
  overflow: visible !important;
}

.store-header #mainnav .container > .flex {
  position: relative !important;
  height: var(--hc-nav-height) !important;
  min-height: var(--hc-nav-height) !important;
  align-items: center !important;
  overflow: visible !important;
}

.store-header #mainnav .flex > div:first-child {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  z-index: 2 !important;
}

.store-header #mainnav .flex > div:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 !important;
  gap: 6px !important;
  z-index: 2 !important;
}

/* Logo — centered on mobile */
@media (max-width: 1023px) {
  .store-header .navbar-brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
  }
}

/* Desktop navbar — 3-column grid: icons | links | logo */
@media (min-width: 1024px) {
  .store-header #mainnav .container > .flex {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "hc-icons hc-menu hc-logo" !important;
    align-items: center !important;
    column-gap: 12px !important;
  }

  /* RTL store: grid col 1 is visual right — swap logo & icons */
  [dir="rtl"] .store-header #mainnav .container > .flex {
    grid-template-areas: "hc-logo hc-menu hc-icons" !important;
  }

  /* Flatten Raed wrapper so logo + menu become grid items */
  .store-header #mainnav .flex > div:first-child {
    display: contents !important;
    position: static !important;
    flex: unset !important;
    pointer-events: auto !important;
  }

  /* Icons — visual left */
  .store-header #mainnav .flex > div:last-child {
    grid-area: hc-icons !important;
    justify-self: start !important;
    flex: unset !important;
    z-index: 4 !important;
  }

  [dir="rtl"] .store-header #mainnav .flex > div:last-child {
    justify-self: end !important;
  }

  /* Logo — visual right */
  .store-header .navbar-brand {
    grid-area: hc-logo !important;
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    justify-self: end !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  [dir="rtl"] .store-header .navbar-brand {
    justify-self: start !important;
  }

  /* Menu — dead center column */
  .store-header custom-main-menu {
    grid-area: hc-menu !important;
    justify-self: center !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .store-header #mobile-menu.mobile-menu,
  .store-header .mobile-menu {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
  }

  .store-header .main-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .store-header .main-menu > li.root-level {
    display: inline-block !important;
    flex-shrink: 0 !important;
  }

  .store-header .main-menu > li.root-level > a,
  .store-header .main-menu #more-menu-dropdown > a {
    position: relative !important;
    padding: 0 8px 6px !important;
  }

  .store-header .main-menu > li.root-level > a,
  .store-header .main-menu > li.root-level > a span,
  .store-header .main-menu #more-menu-dropdown > a,
  .store-header .main-menu #more-menu-dropdown > a span {
    color: var(--hc-cream) !important;
    font-family: var(--hc-font) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    white-space: nowrap !important;
  }

  /* Hover underline — draws right → left (RTL) */
  .store-header .main-menu > li.root-level > a::before,
  .store-header .main-menu #more-menu-dropdown > a::before {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    inset-inline-end: 8px !important;
    inset-inline-start: 8px !important;
    height: 2px !important;
    background: var(--hc-orange) !important;
    border-radius: 2px !important;
    transform: scaleX(0) !important;
    transform-origin: inline-end !important;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
  }

  .store-header .main-menu > li.root-level > a:hover::before,
  .store-header .main-menu > li.root-level:hover > a::before,
  .store-header .main-menu #more-menu-dropdown > a:hover::before,
  .store-header .main-menu #more-menu-dropdown:hover > a::before {
    transform: scaleX(1) !important;
  }

  .store-header .main-menu > li.root-level > a:hover,
  .store-header .main-menu > li.root-level:hover > a,
  .store-header .main-menu > li.root-level > a:hover span,
  .store-header .main-menu #more-menu-dropdown:hover > a,
  .store-header .main-menu #more-menu-dropdown > a:hover span {
    color: var(--hc-orange) !important;
  }

  .store-header .main-menu > li.has-children.root-level > a:after {
    color: var(--hc-cream) !important;
    opacity: 0.7 !important;
  }

  .store-header .main-menu > li.has-children.root-level:hover > a:after {
    color: var(--hc-orange) !important;
    opacity: 1 !important;
  }
}

.store-header .navbar-brand img {
  height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Hamburger — mobile only */
@media (max-width: 1023px) {
  .store-header .mburger,
  .store-header a.mburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }

  /* Kill mburger library bars — use sicon-menu icon only */
  .store-header .mburger::before,
  .store-header .mburger::after,
  .store-header .mburger .mburger-inner,
  .store-header .mburger b,
  .store-header .mburger span:not(.sr-only) {
    display: none !important;
  }

  .store-header .mburger:hover {
    background: rgba(255, 138, 0, 0.16) !important;
  }

  .store-header .mburger i {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    color: var(--hc-orange) !important;
    font-size: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 1024px) {
  .store-header .mburger,
  .store-header a.mburger {
    display: none !important;
  }
}

.store-header custom-main-menu {
  min-height: 0 !important;
  overflow: visible !important;
}

/* Header action cluster — cart + user */
.store-header salla-cart-summary,
.store-header salla-user-menu {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  flex: 0 0 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.store-header salla-cart-summary:hover,
.store-header salla-user-menu:hover {
  background: rgba(255, 138, 0, 0.2) !important;
}

.store-header salla-cart-summary .s-cart-summary-wrapper,
.store-header salla-user-menu .s-user-menu-trigger-slot,
.store-header salla-user-menu .s-user-menu-trigger {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.store-header .header-btn__icon,
.store-header .s-cart-summary-wrapper i,
.store-header #s-cart-icon,
.store-header #s-cart-icon svg,
.store-header .s-user-menu-trigger-avatar i,
.store-header .s-user-menu-trigger-avatar svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  text-align: center !important;
  color: var(--hc-cream) !important;
  fill: var(--hc-cream) !important;
  font-size: 20px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.store-header #s-cart-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Hide profile dropdown chevron (avatar-only button) */
.store-header .s-user-menu-trigger-icon,
.store-header .s-user-menu-trigger-icon i,
.store-header .s-user-menu-trigger-icon svg,
.store-header .s-user-menu-trigger-content {
  display: none !important;
}

.store-header .s-user-menu-trigger-avatar {
  width: 24px !important;
  height: 24px !important;
  border: none !important;
}

.store-header .s-user-menu-trigger-avatar img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
}

.store-header salla-cart-summary {
  margin: 0 !important;
}

/* Kill Raed default margins on header controls */
.store-header .mburger[class*="ml-"],
.store-header .mburger[class*="mr-"],
.store-header salla-cart-summary[class*="ml-"],
.store-header salla-cart-summary[class*="mr-"] {
  margin: 0 !important;
}

.store-header .s-cart-summary-content {
  display: none !important;
}

.store-header .s-cart-summary-count {
  position: absolute !important;
  top: 0 !important;
  inset-inline-end: 0 !important;
  min-width: 18px !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--hc-orange) !important;
  color: var(--hc-white) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: var(--hc-font) !important;
  line-height: 1 !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transform: translate(25%, -25%) !important;
}

[dir="rtl"] .store-header .s-cart-summary-count {
  transform: translate(-25%, -25%) !important;
}

.store-header .s-cart-summary-wrapper {
  position: relative !important;
}

/* Kill Raed scroll jump (fixed-pinned on #mainnav) */
#mainnav.fixed-pinned,
#mainnav.fixed-header,
.main-nav-container.fixed-pinned,
.main-nav-container.fixed-header {
  height: var(--hc-nav-height) !important;
  min-height: var(--hc-nav-height) !important;
  max-height: none !important;
  overflow: visible !important;
}

#mainnav.fixed-pinned .inner,
#mainnav.fixed-header .inner,
.main-nav-container.fixed-pinned .inner,
.main-nav-container.fixed-header .inner,
.main-nav-container.animated .inner,
.main-nav-container.fixed-pinned.animated .inner,
.main-nav-container.fixed-header.animated .inner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* User menu dropdown on mobile */
@media (max-width: 1024px) {
  .store-header salla-user-menu,
  .store-header .s-user-menu-wrapper {
    overflow: visible !important;
    position: static !important;
    z-index: 2100 !important;
  }

  .store-header .s-user-menu-dropdown {
    position: fixed !important;
    top: calc(var(--hc-nav-top) + var(--hc-nav-height) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: min(75vh, 560px) !important;
    overflow: auto !important;
    z-index: 2101 !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --hc-nav-top: 10px;
    --hc-nav-side: 10px;
    --hc-nav-height: 52px;
    --hc-nav-radius: 14px;
    --hc-nav-gap: 12px;
  }

  .store-header #mainnav .container {
    padding-inline: 10px !important;
  }

  .store-header .navbar-brand img {
    height: 34px !important;
    max-height: 34px !important;
  }
}

/* Menu drawer — CSS only, theme Mmenu handles open/close (like SVR) */
.mm-ocd,
.mm-ocd.mm-ocd--open {
  z-index: 2000 !important;
}

.mm-ocd__backdrop {
  z-index: 1999 !important;
}

.mm-ocd--open .mm-ocd__content {
  background: var(--hc-cream) !important;
}

.mm-spn li a,
.mm-spn li span {
  color: var(--hc-navy) !important;
  font-family: var(--hc-font) !important;
  font-weight: 700 !important;
}

.mm-spn li a:hover,
.mm-spn li span:hover {
  color: var(--hc-orange) !important;
}

[dir="rtl"] .mm-spn.mm-spn--navbar.mm-spn--main:after,
.mm-spn.mm-spn--navbar.mm-spn--main:after {
  border: none !important;
  background: var(--hc-orange) !important;
  color: var(--hc-navy) !important;
  font-weight: 800 !important;
}

.menu-opened .btn--close-sm.close-mobile-menu {
  color: var(--hc-navy) !important;
}

html {
  scroll-behavior: smooth;
}

/* =========================================================
   Browse categories — compact row under homepage slider
   Raed: home.main-links + show_cats (s-block--categories)
   ========================================================= */

.s-block--categories {
  margin-top: 1.25rem !important;
  background-color: #f5efe4 !important;
}

.s-block--categories .container,
.s-block--categories salla-slider,
.s-block--categories .swiper,
.s-block--categories .swiper-wrapper {
  background-color: #f5efe4 !important;
}

@media (min-width: 640px) {
  .s-block--categories {
    margin-top: 1.75rem !important;
  }
}

.s-block--categories .s-slider-block__title,
.s-block--categories .s-block--categories__title {
  color: var(--hc-navy) !important;
  font-family: var(--hc-font) !important;
  font-weight: 800 !important;
  font-size: 1.125rem !important;
  margin-bottom: 0.875rem !important;
}

/* Carousel peek — ~3.5 tiles visible on mobile/tablet, swipe for more */
.s-block--categories .container {
  padding-inline: 12px !important;
  overflow: hidden !important;
}

.s-block--categories .swiper {
  overflow: visible !important;
}

.s-block--categories .slide--one-sixth,
.s-block--categories .swiper-slide {
  width: 28.5% !important;
  flex-shrink: 0 !important;
  margin-inline-end: 12px !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
  height: auto !important;
}

.s-block--categories .slide--cat-entry {
  width: 100% !important;
  align-items: center !important;
}

@media (min-width: 1024px) {
  /* Desktop — all 4 in one row, even spacing, no overlap */
  .s-block--categories .slide--one-sixth,
  .s-block--categories .swiper-slide {
    width: calc((100% - 48px) / 4) !important;
    margin-inline-end: 16px !important;
  }

  .s-block--categories .swiper-slide:last-child {
    margin-inline-end: 0 !important;
  }
}

@media (max-width: 639px) {
  .s-block--categories .slide--cat-entry h2 {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
    -webkit-line-clamp: 2 !important;
  }
}

.s-block--categories .slide--cat-entry {
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 10px !important;
  transition: none !important;
}

.s-block--categories .slide--cat-entry:hover {
  transform: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--hc-navy) !important;
}

/* Icon tile — cream square only, no outer white card */
.s-block--categories .slide--cat-entry img {
  width: 112px !important;
  height: 112px !important;
  max-width: 112px !important;
  max-height: 112px !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin-bottom: 0 !important;
  padding: 12px !important;
  background: #f5efe4 !important;
  background-color: #f5efe4 !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(13, 27, 46, 0.06) !important;
  box-shadow: 0 2px 8px rgba(13, 27, 46, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.s-block--categories .slide--cat-entry:hover img {
  transform: translateY(-4px);
  background: #f5efe4 !important;
  background-color: #f5efe4 !important;
  border-color: rgba(255, 138, 0, 0.4) !important;
  box-shadow: 0 12px 28px rgba(13, 27, 46, 0.12) !important;
}

/* Fallback icon when category has no uploaded image */
.s-block--categories .slide--cat-entry > i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 112px !important;
  height: 112px !important;
  margin-bottom: 0 !important;
  border-radius: 18px !important;
  background: #f5efe4 !important;
  background-color: #f5efe4 !important;
  color: var(--hc-orange) !important;
  font-size: 2.25rem !important;
  line-height: 1 !important;
  border: 1px solid rgba(13, 27, 46, 0.06) !important;
  box-shadow: 0 2px 8px rgba(13, 27, 46, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.s-block--categories .slide--cat-entry:hover > i {
  transform: translateY(-4px);
  background: #f5efe4 !important;
  background-color: #f5efe4 !important;
  border-color: rgba(255, 138, 0, 0.4) !important;
  box-shadow: 0 12px 28px rgba(13, 27, 46, 0.12) !important;
}

.s-block--categories .slide--cat-entry h2 {
  color: var(--hc-navy) !important;
  font-family: var(--hc-font) !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  margin-top: 10px !important;
  padding-inline: 2px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.2s ease !important;
}

.s-block--categories .slide--cat-entry:hover h2 {
  color: var(--hc-orange) !important;
}

/* Mobile/tablet peek — icon scales to slide width (prevents overlap) */
@media (max-width: 1023px) {
  .s-block--categories .slide--cat-entry img,
  .s-block--categories .slide--cat-entry > i {
    width: 100% !important;
    height: auto !important;
    max-width: 112px !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
  }

  .s-block--categories .slide--cat-entry > i {
    display: flex !important;
    width: 100% !important;
    max-width: 112px !important;
    aspect-ratio: 1 / 1 !important;
  }
}

@media (min-width: 1024px) {
  .s-block--categories .slide--cat-entry img,
  .s-block--categories .slide--cat-entry > i {
    width: 128px !important;
    height: 128px !important;
    max-width: 128px !important;
    max-height: 128px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .s-block--categories .slide--cat-entry h2 {
    font-size: 0.875rem !important;
    margin-top: 12px !important;
  }
}

/* Hide carousel arrows when all 4 fit (optional cleaner look) */
.s-block--categories salla-slider[controls-outer] .swiper-button-prev,
.s-block--categories salla-slider[controls-outer] .swiper-button-next {
  opacity: 0.85;
}

.s-block--categories .swiper-button-prev,
.s-block--categories .swiper-button-next {
  color: var(--hc-navy) !important;
}

.s-block--categories .swiper-button-prev:hover,
.s-block--categories .swiper-button-next:hover {
  color: var(--hc-orange) !important;
}

/* =========================================================
   Products slider — card count / sizes by breakpoint
   Raed: s-block--best-offers + salla-products-slider
   Mobile ~2 cards | Desktop up to 5 cards
   ========================================================= */

.s-block--best-offers,
[data-testid="store-home-products-slider"] {
  --hc-prod-gap: 8px;
  --hc-prod-cols: 2;
}

.s-block--best-offers .swiper,
.s-block--best-offers salla-products-slider .swiper,
[data-testid="store-home-products-slider"] .swiper {
  overflow: visible !important;
}

.s-block--best-offers .swiper-slide,
.s-block--best-offers salla-products-slider .swiper-slide,
[data-testid="store-home-products-slider"] .swiper-slide {
  width: calc(
    (100% - (var(--hc-prod-cols) - 1) * var(--hc-prod-gap)) / var(--hc-prod-cols)
  ) !important;
  max-width: none !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  height: auto !important;
}

.s-block--best-offers custom-salla-product-card,
.s-block--best-offers .s-product-card-entry,
[data-testid="store-home-products-slider"] custom-salla-product-card,
[data-testid="store-home-products-slider"] .s-product-card-entry {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Portrait product art — scale down cleanly in narrow slides */
.s-block--best-offers .s-product-card-image,
[data-testid="store-home-products-slider"] .s-product-card-image {
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
}

.s-block--best-offers .s-product-card-image img,
[data-testid="store-home-products-slider"] .s-product-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Tablet */
@media (min-width: 768px) {
  .s-block--best-offers,
  [data-testid="store-home-products-slider"] {
    --hc-prod-gap: 10px;
    --hc-prod-cols: 3;
  }
}

/* Desktop — 4 cards */
@media (min-width: 1024px) {
  .s-block--best-offers,
  [data-testid="store-home-products-slider"] {
    --hc-prod-gap: 12px;
    --hc-prod-cols: 4;
  }
}

/* Large desktop — 5 cards */
@media (min-width: 1280px) {
  .s-block--best-offers,
  [data-testid="store-home-products-slider"] {
    --hc-prod-cols: 5;
  }
}

/* Compact text & button on small slides */
@media (max-width: 767px) {
  .s-block--best-offers .s-product-card-content-title,
  .s-block--best-offers .s-product-card-content-title a,
  [data-testid="store-home-products-slider"] .s-product-card-content-title,
  [data-testid="store-home-products-slider"] .s-product-card-content-title a {
    font-size: 0.6875rem !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
  }

  .s-block--best-offers .s-product-card-price,
  .s-block--best-offers .s-product-card-sale-price h4,
  [data-testid="store-home-products-slider"] .s-product-card-price,
  [data-testid="store-home-products-slider"] .s-product-card-sale-price h4 {
    font-size: 0.8125rem !important;
  }

  .s-block--best-offers .s-product-card-content-footer,
  [data-testid="store-home-products-slider"] .s-product-card-content-footer {
    margin-top: 4px !important;
  }

  /* Add to cart — Salla renders label inside .s-button-* (host font-size does nothing) */
  .s-product-card-content-footer salla-add-product-button .s-button-text,
  .s-product-card-content-footer salla-add-product-button .s-button-text span,
  .s-product-card-content-footer salla-add-product-button > span,
  .s-block--best-offers .s-product-card-content-footer salla-add-product-button .s-button-text,
  .s-block--best-offers .s-product-card-content-footer salla-add-product-button .s-button-text span,
  .s-block--best-offers .s-product-card-content-footer salla-add-product-button > span,
  [data-testid="store-home-products-slider"] .s-product-card-content-footer salla-add-product-button .s-button-text,
  [data-testid="store-home-products-slider"] .s-product-card-content-footer salla-add-product-button .s-button-text span,
  [data-testid="store-home-products-slider"] .s-product-card-content-footer salla-add-product-button > span {
    font-size: 11.5px !important;
    line-height: 1 !important;
  }

  .s-product-card-content-footer salla-add-product-button > i,
  .s-block--best-offers .s-product-card-content-footer salla-add-product-button > i,
  [data-testid="store-home-products-slider"] .s-product-card-content-footer salla-add-product-button > i {
    font-size: 11.5px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .s-product-card-content-footer salla-add-product-button .s-button-element,
  .s-product-card-content-footer salla-add-product-button .s-button-btn,
  .s-block--best-offers .s-product-card-content-footer salla-add-product-button .s-button-element,
  .s-block--best-offers .s-product-card-content-footer salla-add-product-button .s-button-btn,
  [data-testid="store-home-products-slider"] .s-product-card-content-footer salla-add-product-button .s-button-element,
  [data-testid="store-home-products-slider"] .s-product-card-content-footer salla-add-product-button .s-button-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0.38rem !important;
    padding-bottom: 0.34rem !important;
    min-height: 0 !important;
  }

  .s-product-card-content-footer salla-add-product-button .s-button-text,
  .s-block--best-offers .s-product-card-content-footer salla-add-product-button .s-button-text,
  [data-testid="store-home-products-slider"] .s-product-card-content-footer salla-add-product-button .s-button-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .s-block--best-offers .s-product-card-wishlist-btn,
  [data-testid="store-home-products-slider"] .s-product-card-wishlist-btn {
    transform: scale(0.85);
    transform-origin: top left;
  }
}

@media (max-width: 479px) {
  .s-block--best-offers,
  [data-testid="store-home-products-slider"] {
    --hc-prod-gap: 6px;
  }
}