/* ==========================================================
   Style Lab look: white page, black type, serif headings,
   hairline borders, square buttons, centered logo.
   Loaded AFTER style.css / styleEn.css, so it overrides them.
   Change the colors/fonts in :root to tune the whole site.
   ========================================================== */
:root{
  --sl-bg:#ffffff;
  --sl-ink:#1f1f1f;
  --sl-muted:#7a7a7a;
  --sl-line:#e8e8e8;
  --sl-serif:"Cormorant Garamond","Scheherazade New",Georgia,serif;
  --sl-sans:"Jost","Segoe UI",Tahoma,sans-serif;
  --sl-header-h:76px;
}

body{background:var(--sl-bg);color:var(--sl-ink);-webkit-font-smoothing:antialiased}
html[lang="en"] body{font-family:var(--sl-sans);font-weight:300}
a{color:var(--sl-ink)}
a:hover{color:var(--sl-muted)}

h1,h2,h3,h4,h5{font-family:var(--sl-serif);font-weight:500;letter-spacing:0;color:var(--sl-ink)}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{font-style:italic}

/* ---------- Header: links on one side, logo centered, cart on the other ---------- */
#header{
  height:var(--sl-header-h);padding:0;
  background:rgba(255,255,255,.97)!important;
  box-shadow:none!important;border-bottom:1px solid var(--sl-line);
}
#header .container{position:relative;justify-content:space-between}
#header .logo{position:absolute;inset-inline-start:50%;transform:translateX(-50%);margin:0!important;line-height:1}
html[dir="rtl"] #header .logo{transform:translateX(50%)}
#header .logo img{max-height:48px;width:auto}
#header .navbar{order:1;padding:0}
#header .cart-btn{order:3;margin-inline-start:auto}

@media (min-width:992px){
  #header .navbar a,#header .navbar a:focus{
    color:var(--sl-ink);font-family:inherit;font-size:15px;font-weight:400;
    padding:10px 14px;white-space:nowrap;
  }
  #header .navbar a:hover,#header .navbar .active,#header .navbar li:hover>a{color:var(--sl-muted)}
  #header .navbar .dropdown ul{border-radius:0;border:1px solid var(--sl-line);box-shadow:none;padding:8px 0}
  #header .navbar .dropdown ul a{font-size:14px}
  #header .navbar .dropdown ul img{margin-inline-end:8px}
}
#header .mobile-nav-toggle{color:var(--sl-ink)}

.langu{background:transparent;color:var(--sl-ink);font-size:14px;padding:6px 10px}
.langu:hover{color:var(--sl-muted)}

.cart-btn{
  background:transparent!important;color:var(--sl-ink)!important;
  border:1px solid var(--sl-ink)!important;border-radius:0!important;
  padding:.4rem .8rem;display:inline-flex;align-items:center;gap:6px;
}
.cart-btn:hover{background:var(--sl-ink)!important;color:#fff!important}
.cart-btn .badge2,.cart-btn .bi{color:inherit!important}

/* ---------- Hero ---------- */
#hero{height:auto;min-height:88vh;padding-top:var(--sl-header-h);background:var(--sl-bg)}
#hero .carousel-item{min-height:88vh;background-size:cover;background-position:center}
#hero .carousel-item::before{background:rgba(255,255,255,0)!important}
#hero .carousel-container{display:flex;align-items:center;justify-content:center;text-align:center;padding-top:var(--sl-header-h)}
#hero h2{color:var(--sl-ink);font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1.1;margin-bottom:1rem}
#hero p{color:var(--sl-ink)!important;font-weight:400!important;max-width:560px;margin:0 auto 1.75rem}
#hero .btn-get-started{
  color:var(--sl-ink);background:transparent;border:1px solid var(--sl-ink);
  border-radius:0;padding:12px 34px;font-family:inherit;font-weight:400;letter-spacing:0;
}
#hero .btn-get-started:hover{background:var(--sl-ink);color:#fff}

.sl-banner{opacity:1!important;width:100%}
#main .border{border-color:var(--sl-line)!important}

/* ---------- Categories ---------- */
.services{padding:56px 0 24px}
.services a{text-decoration:none}
.services .icon-box{background:none;border:0;box-shadow:none;padding:0;text-align:center}
.services .icon-box img{width:100%;aspect-ratio:1/1;object-fit:contain;border:1px solid var(--sl-line);padding:10px;transition:border-color .2s}
.services a:hover .icon-box img{border-color:var(--sl-ink)}
.services .icon-box h4{font-size:1.15rem;margin-top:.8rem;color:var(--sl-ink)}

/* ---------- Product grid: image, then name and price below ---------- */
.team{padding:24px 0 72px;background:var(--sl-bg)}
.team a{text-decoration:none}
.team .member{background:none;border:0;box-shadow:none;border-radius:0;padding:0;text-align:center;overflow:visible}
.team .member img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:0}
.team .member .member-info{
  position:static!important;inset:auto!important;opacity:1!important;visibility:visible!important;
  background:none!important;padding:0!important;transform:none!important;
}
.team .member .member-info h4{background:none!important;color:var(--sl-ink)!important;font-size:1.2rem;padding:0!important;margin:0 0 4px}
.team .member .member-info span{color:var(--sl-muted);font-size:.95rem;padding:0}

/* ---------- Footer ---------- */
#footer{background:var(--sl-bg);color:var(--sl-ink);border-top:1px solid var(--sl-line);font-size:14px}
#footer .footer-top{background:none;padding:40px 0 16px;border:0}
#footer .social-links a{
  background:transparent;color:var(--sl-ink);border:1px solid var(--sl-ink);border-radius:0;
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;margin:0 4px;
}
#footer .social-links a:hover{background:var(--sl-ink);color:#fff}
#footer .copyright,#footer .credits{color:var(--sl-muted);text-align:center;float:none}
#footer .credits a{color:var(--sl-ink)}
.back-to-top{background:var(--sl-ink)!important;border-radius:0!important}

/* ---------- Cart drawer ---------- */
.sl-offcanvas-head{background:var(--sl-ink);color:#fff}
.sl-offcanvas-head .offcanvas-title{color:#fff;font-size:1.3rem}
.sl-offcanvas-head .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.9}

:focus-visible{outline:2px solid var(--sl-ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}