/* ============================================================
   JUMANJI — SALLA THEME  v5  (MINIMAL)
   Purple outlines · black icons · light background
   FULL FILE — clear editor (Cmd+A, Delete) then paste this
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --black:#141019;
  --purple:#9D4EDD;
  --ink:#1C0E2B;
  --bg:#FBF8F3;       /* warm light. pure white = #FFFFFF */
  --surface:#FFFFFF;
}
/* background */
html,body,#app,main,.store-page,.page-wrapper,.salla-theme,
.app,.app-inner,section,.s-block-parent{
  background:var(--bg) !important;
  background-image:none !important;
  color:var(--ink) !important;
}
/* type */
body,p,span,li,a,input,button,select,textarea{
  font-family:'Inter',system-ui,sans-serif !important;
}
p,span,li{ color:var(--ink) !important; }
h1,h2,h3,h4,.s-block__title,.section-title{
  font-family:'Cinzel',Georgia,serif !important;
  color:var(--black) !important; font-weight:700 !important;
}
/* ============================================================
   CARDS — PURPLE OUTLINE
   ============================================================ */
.s-block,.s-products-slider,.s-products-list,.s-slider-block,
.products-slider,.products-list,.s-block--fixed-products,
.s-block--features__item,.feature-item,
.s-product-card-entry,.product-card,.s-product-card{
  background:var(--surface) !important;
  border:1px solid var(--purple) !important;
  border-radius:18px !important;
  box-shadow:none !important;
}
/* ============================================================
   ICONS — BLACK (svg fill/stroke + image filter)
   ============================================================ */
.s-block svg,.s-block i,
.s-products-slider svg,.s-products-slider i,
.s-block--features__item svg,.s-block--features__item i,
.feature-item svg,.feature-item i,
[class*="feature"] svg,[class*="feature"] i,
.s-empty svg,.empty-state svg,[class*="empty"] svg,
header svg,header i,nav svg,nav i,
.icon svg,.icon i,
.s-block svg path,[class*="feature"] svg path,
.s-empty svg path,[class*="empty"] svg path,header svg path{
  color:var(--black) !important;
  fill:var(--black) !important;
  stroke:var(--black) !important;
  opacity:1 !important;
}
.s-block--features__item img,.feature-item img,
[class*="feature"] img,.s-empty img,[class*="empty"] img,.icon img{
  filter:brightness(0) !important;
  opacity:1 !important;
}
/* protect logo + product images from the filter */
[class*="logo"] img,.logo img,.s-header__logo img,
.s-product-card img,.product-card img,.s-product-card-entry img,
[class*="product"] img{ filter:none !important; }
/* HEADER ACTION CHIPS (cart, profile, user) → no purple/colored box.
   Broad sweep: any header button/link/span wrapper gets transparent bg. */
header a, header button, header span, header div,
.s-header a, .s-header button, .s-header span,
nav a, nav button, .navbar a, .navbar button,
header [class*="icon"], .s-header [class*="icon"], nav [class*="icon"],
header [class*="profile"], header [class*="user"], header [class*="account"],
header [class*="cart"], header [class*="btn"],
.s-header__cart, .s-header__user, .s-header__profile,
.header-actions *, .s-header-actions *{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
/* ============================================================
   INPUTS / SEARCH — purple outline
   ============================================================ */
input,textarea,select,.s-search-input{
  background:var(--surface) !important; color:var(--ink) !important;
  border:1px solid var(--purple) !important; border-radius:999px !important;
}
input:focus,textarea:focus,select:focus,.s-search-input:focus{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(157,78,221,.18) !important;
}
/* ============================================================
   BUTTONS — purple
   ============================================================ */
button,.btn,.s-button-primary,.s-button-btn,.btn-primary{
  background:var(--purple) !important; color:#FFFFFF !important;
  border:none !important; border-radius:12px !important; font-weight:700 !important;
}
button svg,button i,.btn svg,.btn i,
.s-button-primary svg,.s-button-primary i{
  color:#FFFFFF !important; fill:#FFFFFF !important; stroke:#FFFFFF !important;
}
.badge,.s-badge{ background:var(--purple) !important; color:#FFFFFF !important; }

/* ============================================================
   BANNER / SLIDER — no border + smaller  (ONLY thing added)
   height applies ONLY to the slider/banner, never product cards
   ============================================================ */
.s-slider-block,
.s-block--slider,
.salla-slider,
[class*="slider-block"],
.s-block-slider-photos,
[class*="banner"]{
  border:none !important;
  box-shadow:none !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
/* taller/shorter — banner images ONLY (not product images) */
.s-slider-block img,
.s-block--slider img,
.salla-slider img,
[class*="slider-block"] img,
.s-block-slider-photos img,
[class*="banner"] img{
  width:100% !important;
  height:300px !important;       /* smaller. raise to 360px / lower to 240px */
  object-fit:cover !important;
  border-radius:18px !important;
}
@media (max-width:600px){
  .s-slider-block img,.s-block--slider img,.salla-slider img,
  [class*="slider-block"] img,.s-block-slider-photos img,[class*="banner"] img{
    height:180px !important;
  }
}