/* ═══════════════════════════════════════════════════════════════
   JARABI STORE — Design System v4
   Palette: Nuit Africaine × Rose Sensuel
   Appliqué: 2026-08-07T00:40:48.869Z
═══════════════════════════════════════════════════════════════ */

/* ── Token officiel — 6 couleurs max ────────────────────────── */
:root {
  --j-primary:      #B8395A;   /* Rose Jarabi       — CTA, accents     */
  --j-primary-dk:   #91243F;   /* Rose Profond      — hover             */
  --j-primary-lt:   #D4A0B5;   /* Pêche Rose        — highlights        */
  --j-dark:         #1A0F1E;   /* Nuit Profonde     — header/footer/bg  */
  --j-dark2:        #261830;   /* Aubergine         — values bar, news  */
  --j-dark3:        #321D42;   /* Violet Nuit       — cards hover bg    */
  --j-light:        #FAF5F0;   /* Ivoire            — fond clair        */
  --j-blush:        #F5D5E0;   /* Rose Doux         — accent léger      */
  --j-muted:        #6B4158;   /* Prune             — texte secondaire  */
  --j-text:         #1A0F1E;   /* Corps de texte principal              */
  --j-text-lt:      #7A6570;   /* Texte secondaire sur fond clair       */
  --j-border:       rgba(184,57,90,.15);
  --j-sans:         'Jost', 'DM Sans', system-ui, sans-serif;
  --j-serif:        'Cormorant Garamond', Georgia, serif;
  --j-script:       'Great Vibes', cursive;
  --j-ease:         cubic-bezier(.25,.46,.45,.94);
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--j-sans) !important;
  background: #fff !important;
  color: var(--j-text) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── Écraser Bootstrap complet ──────────────────────────────── */
/* Primary */
.btn-primary,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--j-primary) !important;
  border-color:     var(--j-primary) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: var(--j-primary-dk) !important;
  border-color:     var(--j-primary-dk) !important;
}

/* Danger → rose Jarabi */
.btn-danger { background: var(--j-primary) !important; border-color: var(--j-primary) !important; color: #fff !important; }
/* Success → sombre */
.btn-success { background: var(--j-dark) !important; border-color: var(--j-dark) !important; color: #fff !important; }
/* Info / Warning → blush */
.btn-info, .btn-warning { background: var(--j-blush) !important; border-color: var(--j-primary-lt) !important; color: var(--j-dark) !important; }
/* Secondary */
.btn-secondary { background: var(--j-muted) !important; border-color: var(--j-muted) !important; color: #fff !important; }

/* Links */
a { color: var(--j-primary) !important; }
a:hover { color: var(--j-primary-dk) !important; }

/* Alerts */
.alert-success { background: var(--j-blush) !important; border-color: var(--j-primary-lt) !important; color: var(--j-muted) !important; }
.alert-danger  { background: #ffeef2 !important; border-color: var(--j-primary-lt) !important; color: var(--j-primary-dk) !important; }
.alert-info    { background: var(--j-light) !important; border-color: var(--j-border) !important; color: var(--j-text) !important; }

/* Bootstrap focus rings */
.btn:focus, input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(184,57,90,.2) !important;
  border-color: var(--j-primary) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════
   HEADER TOP — #B8395A unifié (exit rose candy #D982A6)
══════════════════════════════════════════════════════════════ */
.header-top,
#header .header-top {
  background: var(--j-primary) !important;
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
  padding: 8px 0 !important;
}
.header-top *,
#header .header-top * {
  color: rgba(255,255,255,.9) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
}
.header-top a:hover { color: #fff !important; opacity: .8; }

/* ── Header bottom nav ── */
.header-bottom,
#header .header-bottom,
header#header {
  background: var(--j-dark) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* Logo */
.logo img, .header-logo img { max-height: 46px !important; }

/* Nav links */
.main-menu a,
.js-menu-desktop a,
.top-nav-link {
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  transition: color .2s !important;
  text-decoration: none !important;
}
.main-menu a:hover,
.js-menu-desktop a:hover { color: var(--j-primary-lt) !important; }

/* Header icons */
.header-block a,
.user-info a,
.contact-link a,
.blockcart a {
  color: rgba(255,255,255,.62) !important;
  transition: color .2s !important;
  text-decoration: none !important;
}
.header-block a:hover,
.blockcart a:hover { color: #fff !important; }

/* Cart count badge */
.cart-products-count {
  background: var(--j-primary) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO SLIDER — ps_imageslider Bootstrap
══════════════════════════════════════════════════════════════ */
.header__banner { margin: 0 !important; padding: 0 !important; }

#home-slider.jarabi-slider-container,
#home-slider {
  background: var(--j-dark) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Slide dimensions */
#home-slider .carousel-item {
  height: 560px !important;
  background: var(--j-dark) !important;
}
@media (max-width: 991px) { #home-slider .carousel-item { height: 380px !important; } }
@media (max-width: 576px)  { #home-slider .carousel-item { height: 260px !important; } }

/* Images plein écran */
#home-slider .carousel-content {
  position: absolute !important; inset: 0 !important;
  margin: 0 !important; width: 100% !important; height: 100% !important;
}
#home-slider .carousel-content img,
#home-slider .carousel-item img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center top !important;
  display: block !important;
}

/* Gradient overlay */
#home-slider .carousel-item::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important; z-index: 2 !important;
  background: linear-gradient(
    110deg,
    rgba(26,15,30,.93) 0%,
    rgba(26,15,30,.72) 38%,
    rgba(26,15,30,.28) 64%,
    rgba(26,15,30,.04) 100%
  ) !important;
}

/* Caption positioning */
#home-slider .carousel-caption,
#home-slider figcaption.caption {
  position: absolute !important;
  left: max(5%, 32px) !important; right: auto !important;
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%) !important;
  text-align: left !important; z-index: 10 !important;
  max-width: min(520px, 56vw) !important;
  padding: 0 !important;
}
@media (max-width: 576px) {
  #home-slider .carousel-caption,
  #home-slider figcaption.caption {
    left: 20px !important; max-width: calc(100vw - 40px) !important;
  }
}

/* Eyebrow */
#home-slider .carousel-caption::before {
  content: 'Jarabi Collection' !important;
  display: block !important;
  font-family: var(--j-script) !important;
  font-size: 22px !important;
  color: var(--j-primary-lt) !important;
  margin-bottom: 6px !important;
}

/* Titles */
#home-slider .caption h2,
#home-slider .carousel-caption h2,
#home-slider h2 {
  font-family: var(--j-serif) !important;
  font-size: clamp(30px, 3.8vw, 56px) !important;
  font-weight: 300 !important; font-style: italic !important;
  color: #fff !important; line-height: 1.08 !important;
  margin: 0 0 12px !important; text-shadow: none !important;
}
#home-slider h2 em { font-style: normal !important; font-weight: 500 !important; }

/* Description */
#home-slider .caption p,
#home-slider .carousel-caption p {
  font-family: var(--j-sans) !important;
  font-size: clamp(12px, 1.1vw, 13.5px) !important;
  color: rgba(255,255,255,.52) !important;
  line-height: 1.7 !important; margin: 0 0 22px !important;
  max-width: 400px !important; text-shadow: none !important;
}

/* CTA button */
#home-slider .caption a,
#home-slider .carousel-caption a,
#home-slider .carousel-link {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 11px 26px !important;
  font-family: var(--j-sans) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .18em !important; text-transform: uppercase !important;
  background: var(--j-primary) !important; color: #fff !important;
  border: none !important; border-radius: 0 !important;
  text-decoration: none !important;
  transition: background .22s var(--j-ease), transform .2s var(--j-ease) !important;
}
#home-slider .caption a:hover,
#home-slider .carousel-caption a:hover {
  background: var(--j-primary-dk) !important; transform: translateY(-2px) !important;
  color: #fff !important; text-decoration: none !important;
}

/* Indicators */
#home-slider .carousel-indicators { bottom: 20px !important; z-index: 20 !important; gap: 5px !important; }
#home-slider .carousel-indicators button {
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.25) !important; border: 0 !important;
  opacity: 1 !important; transition: all .25s !important;
}
#home-slider .carousel-indicators .active {
  background: var(--j-primary) !important; transform: scale(1.5) !important;
}

/* Arrows */
#home-slider .carousel-control-prev,
#home-slider .carousel-control-next {
  width: 38px !important; height: 38px !important;
  top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
  opacity: 1 !important; z-index: 20 !important;
  transition: all .2s !important; border-radius: 0 !important;
}
#home-slider .carousel-control-prev { left: 18px !important; }
#home-slider .carousel-control-next { right: 18px !important; }
#home-slider .carousel-control-prev:hover,
#home-slider .carousel-control-next:hover {
  background: var(--j-primary) !important; border-color: var(--j-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   VALUES BAR (JS injected)
══════════════════════════════════════════════════════════════ */
#j-values-bar {
  background: var(--j-dark2) !important;
  border-bottom: 1px solid rgba(184,57,90,.1) !important;
}
.j-values-inner {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  max-width: 1280px !important; margin: 0 auto !important; padding: 0 40px !important;
}
.j-val {
  display: flex !important; align-items: center !important; gap: 13px !important;
  padding: 18px 20px !important;
  border-right: 1px solid rgba(255,255,255,.05) !important;
}
.j-val:last-child { border-right: none !important; }
.j-val-icon { color: var(--j-primary-lt) !important; flex-shrink: 0 !important; }
.j-val-label { font-size: 12px !important; font-weight: 600 !important; color: #fff !important; letter-spacing: .04em !important; }
.j-val-sub   { font-size: 10.5px !important; color: rgba(255,255,255,.35) !important; margin-top: 2px !important; }
@media (max-width: 900px) { .j-values-inner { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 480px) {
  .j-values-inner { grid-template-columns: 1fr 1fr !important; }
  .j-val { padding: 12px 12px !important; }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT SECTIONS
══════════════════════════════════════════════════════════════ */
.featured-products,
section.featured-products { background: #fff !important; padding: 48px 0 !important; }

/* Section title */
.featured-products h2,
.featured-products .h2,
h2.products-section-title {
  font-family: var(--j-serif) !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 300 !important; font-style: italic !important;
  color: var(--j-text) !important;
  text-align: center !important;
  margin: 0 auto 36px !important; letter-spacing: -.01em !important;
}
.featured-products h2::after {
  content: '' !important; display: block !important;
  width: 32px !important; height: 1px !important;
  background: var(--j-primary) !important; margin: 10px auto 0 !important;
}

/* Product cards */
.product-miniature .card {
  border: 1px solid rgba(26,15,30,.07) !important;
  border-radius: 0 !important; overflow: hidden !important;
  transition: box-shadow .25s var(--j-ease), transform .25s var(--j-ease) !important;
  background: #fff !important; box-shadow: none !important;
}
.product-miniature .card:hover {
  box-shadow: 0 10px 36px rgba(184,57,90,.12) !important;
  transform: translateY(-4px) !important;
}

/* Image container */
.product-miniature__image-container,
.thumbnail-container {
  aspect-ratio: 3 / 4 !important; overflow: hidden !important;
  background: var(--j-light) !important;
}
.thumbnail-container img,
.product-miniature__image-container img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform .4s var(--j-ease) !important;
}
.product-miniature .card:hover .thumbnail-container img { transform: scale(1.06) !important; }

/* Product name */
.product-miniature__name a,
.product-title a, .product-title {
  font-family: var(--j-serif) !important;
  font-size: 17px !important; font-weight: 400 !important;
  color: var(--j-text) !important; line-height: 1.3 !important;
  text-decoration: none !important;
}

/* Price */
.price, .product-price,
.product-miniature__prices .price {
  color: var(--j-primary) !important;
  font-weight: 700 !important; font-size: 15px !important;
  font-family: var(--j-sans) !important;
}

/* Add to cart */
.add-to-cart, .btn-add-to-cart,
.product-miniature .btn-primary {
  background: var(--j-dark) !important; border-color: var(--j-dark) !important;
  border-radius: 0 !important; color: #fff !important;
  font-family: var(--j-sans) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  transition: background .2s !important;
}
.add-to-cart:hover, .product-miniature .btn-primary:hover {
  background: var(--j-primary) !important; border-color: var(--j-primary) !important;
}

/* ════════════════════════════════════════�������═════════════════════
   CUSTOM TEXT BLOCK
══════════════════════════════════════════════════════════════ */
#custom-text {
  background: var(--j-light) !important;
  padding: 72px 24px !important; text-align: center !important;
}
#custom-text h2, #custom-text .h2 {
  font-family: var(--j-serif) !important;
  font-size: clamp(28px, 3vw, 42px) !important; font-weight: 300 !important;
  font-style: italic !important; color: var(--j-text) !important;
  margin-bottom: 16px !important;
}
#custom-text p {
  font-size: 15px !important; color: var(--j-text-lt) !important;
  max-width: 640px !important; margin: 0 auto 20px !important;
  line-height: 1.78 !important;
}

/* ══════════════════════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════════════════════ */
.block_newsletter,
#blockEmailSubscription_displayHome,
div[id*="blockEmailSubscription"] {
  background: var(--j-dark2) !important;
  padding: 64px 24px !important;
  border: none !important; margin-top: 0 !important;
  text-align: center !important;
}
.block_newsletter .newsletter-title,
.block_newsletter p,
#block-newsletter-label {
  font-family: var(--j-serif) !important;
  font-size: clamp(24px, 2.5vw, 36px) !important;
  font-style: italic !important; font-weight: 300 !important;
  color: #fff !important; margin-bottom: 8px !important;
}
.block_newsletter .newsletter-sub {
  font-size: 13px !important; color: rgba(255,255,255,.45) !important;
  margin-bottom: 28px !important;
}
.block_newsletter input[type=email],
.block_newsletter .form-control {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important; border-radius: 0 !important;
  padding: 12px 20px !important;
  font-family: var(--j-sans) !important;
}
.block_newsletter input[type=email]::placeholder { color: rgba(255,255,255,.3) !important; }
.block_newsletter .btn-primary,
.block_newsletter button[type=submit] {
  background: var(--j-primary) !important; border-color: var(--j-primary) !important;
  border-radius: 0 !important; color: #fff !important;
  font-family: var(--j-sans) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .15em !important; text-transform: uppercase !important;
  padding: 12px 24px !important;
  transition: background .2s !important;
}
.block_newsletter .btn-primary:hover { background: var(--j-primary-dk) !important; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
footer, .footer-container,
#footer { background: var(--j-dark) !important; }

footer *, .footer-container * {
  color: rgba(255,255,255,.52) !important;
  font-size: 13px !important;
}
footer a, .footer-container a {
  color: rgba(255,255,255,.5) !important;
  transition: color .2s !important; text-decoration: none !important;
}
footer a:hover { color: var(--j-primary-lt) !important; }

footer h4, footer .h4, footer .h5,
.footer__title, .footer-block-title,
.block-title, footer strong {
  font-family: var(--j-serif) !important;
  color: #fff !important; font-size: 16px !important;
  font-weight: 500 !important; margin-bottom: 18px !important;
  font-style: italic !important;
}
footer hr, .footer-container hr {
  border-color: rgba(255,255,255,.07) !important;
}
.footer__copyright, .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.28) !important;
  font-size: 11px !important; letter-spacing: .04em !important;
  padding: 16px 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   BREADCRUMB & MISC
══════════════════════════════════════════════════════════════ */
.breadcrumb { background: transparent !important; font-size: 11px !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--j-primary-lt) !important; }
.breadcrumb-item.active { color: var(--j-primary) !important; }

/* Pagination */
.page-link { color: var(--j-primary) !important; border-color: var(--j-border) !important; }
.page-item.active .page-link { background: var(--j-primary) !important; border-color: var(--j-primary) !important; color: #fff !important; }

/* Badges */
.badge.bg-primary { background: var(--j-primary) !important; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .featured-products h2 { font-size: 26px !important; }
  #custom-text { padding: 48px 16px !important; }
  .block_newsletter { padding: 48px 16px !important; }
}

/* ── SLIDER TYPOGRAPHY FIX (targeted only) ──────────────────
   Problem: PrestaShop theme forces text-transform:uppercase
   Solution: Override only on slider elements
───────────────────────────────────────────────────────────── */

/* Remove ALL CAPS only on slider captions */
#home-slider .caption h2,
#home-slider .carousel-caption h2,
#home-slider figcaption.caption h2,
#home-slider h2 {
  text-transform: none !important;
  font-style: italic !important;
}

/* Remove ALL CAPS on slider description */
#home-slider .caption p,
#home-slider .carousel-caption p,
#home-slider figcaption p {
  text-transform: none !important;
  font-weight: 300 !important;
}

/* Fix eyebrow — shorter text, script font readable */
#home-slider .carousel-caption::before,
#home-slider figcaption.caption::before {
  content: 'Jarabi' !important;
  font-family: 'Great Vibes', cursive !important;
  font-size: 28px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR / LEFT COLUMN
══════════════════════════════════════════════════════════════ */
#left-column { padding-right: 24px !important; }

.j-sidebar-block {
  margin-bottom: 28px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid rgba(26,15,30,.07) !important;
}
.j-sidebar-block:last-child { border-bottom: none !important; }

.j-sidebar-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--j-dark) !important;
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--j-primary) !important;
}

/* Category tree links */
.category-tree ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.category-tree li { margin: 0 !important; }
.category-tree a {
  display: block !important;
  padding: 6px 0 !important;
  font-family: 'Jost', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--j-text-lt) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(26,15,30,.05) !important;
  transition: color .18s !important;
}
.category-tree a:hover, .category-tree a:focus {
  color: var(--j-primary) !important;
  padding-left: 4px !important;
}
.category-tree li li a { padding-left: 12px !important; font-size: 12px !important; color: rgba(26,15,30,.5) !important; }
.category-tree div { margin-left: 0 !important; }

/* Faceted search filters */
#search_filters {
  background: var(--j-light) !important;
  padding: 16px !important;
  border: 1px solid rgba(26,15,30,.06) !important;
}
#search_filters .h6, #search_filters .facet-title, #search_filters p.h6 {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: var(--j-dark) !important; margin-bottom: 10px !important;
}
#search_filters .custom-checkbox label,
#search_filters .facet-label {
  font-size: 12.5px !important; color: var(--j-text-lt) !important;
  cursor: pointer !important;
}
#search_filters .custom-control-input:checked + .custom-control-label,
#search_filters input[type=checkbox]:checked + label {
  color: var(--j-primary) !important; font-weight: 600 !important;
}
#search_filter_toggler { display: none !important; }

@media (max-width: 768px) {
  #left-column { padding-right: 0 !important; margin-bottom: 24px !important; }
}