/* ============================================================
   SMOKE LAND v1.1.0
   Design layer for JTL NOVA 5.8+
   Clean grey / white / editorial ecommerce
   ============================================================ */

:root {
  --sml-bg: #ffffff;
  --sml-soft: #f5f5f5;
  --sml-soft-2: #eeeeee;
  --sml-border: #e7e7e7;
  --sml-text: #151515;
  --sml-muted: #707070;
  --sml-dark: #181818;
  --sml-radius-sm: 8px;
  --sml-radius: 12px;
  --sml-radius-lg: 18px;
  --sml-container-gap: clamp(16px, 2.8vw, 44px);
  --sml-shadow: 0 18px 46px rgba(0,0,0,.07);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sml-bg) !important;
  color: var(--sml-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--sml-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: -.035em;
}

a { color: inherit; }
a:hover { color: #000; }
img { max-width: 100%; }

.container-fluid-xl {
  width: 100%;
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sml-container-gap) !important;
  padding-right: var(--sml-container-gap) !important;
}

/* TOP USP ---------------------------------------------------- */
#header-top-bar {
  min-height: 31px !important;
  background: #191919 !important;
  border: 0 !important;
  color: #fff;
}
#header-top-bar > div { width: 100%; }
.sml-usp-bar {
  width: 100%;
  min-height: 31px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  align-items: center;
  gap: 18px;
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
}
.sml-usp-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}
.sml-usp-bar i { font-size: 10px; color: #fff; }
.sml-usp-mobile {
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  padding: 6px 12px;
  background: #191919;
  color: rgba(255,255,255,.86);
  font-size: 10px;
  letter-spacing: .025em;
}

/* HEADER ----------------------------------------------------- */
#jtl-nav-wrapper,
#jtl-nav-wrapper .navbar,
.sml-header-container,
.sml-header-main,
.sml-main-nav {
  background: #fff !important;
}
#jtl-nav-wrapper {
  border: 0 !important;
  border-bottom: 1px solid var(--sml-border) !important;
  box-shadow: none !important;
}

.sml-header-container {
  max-width: 1560px;
  margin: 0 auto;
  padding-left: var(--sml-container-gap) !important;
  padding-right: var(--sml-container-gap) !important;
}
.sml-header-main {
  display: grid !important;
  grid-template-columns: minmax(210px, 260px) minmax(420px, 760px) minmax(250px, 1fr) !important;
  align-items: center !important;
  gap: clamp(22px, 3vw, 54px) !important;
  min-height: 82px !important;
  padding: 14px 0 !important;
}
.sml-header-checkout { display: flex !important; }
.sml-secure-checkout {
  color: #555;
  font-size: 13px;
  font-weight: 600;
}

.toggler-logo-wrapper,
.sml-header-brand,
.sml-logo-wrapper {
  position: static !important;
  float: none !important;
  min-width: 0 !important;
}
.toggler-logo-wrapper {
  display: flex !important;
  align-items: center !important;
}
.sml-navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.sml-wordmark,
.sml-footer-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: #151515;
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1;
  white-space: nowrap;
}
.sml-wordmark strong,
.sml-footer-wordmark strong { font-weight: 800; }
.sml-custom-logo {
  display: block !important;
  width: auto !important;
  height: 48px !important;
  max-width: 240px !important;
  object-fit: contain !important;
}

.sml-search-desktop {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.sml-search-desktop .search-wrapper,
.sml-search-desktop .main-search,
.sml-search-desktop .input-group { width: 100% !important; }
header .sml-search-desktop .form-control,
header .sml-search-desktop .form-control:focus,
.sml-search-desktop .form-control {
  height: 48px !important;
  padding: 0 19px !important;
  border: 1px solid #dedede !important;
  border-right: 0 !important;
  border-radius: 999px 0 0 999px !important;
  background: #f6f6f6 !important;
  color: #171717 !important;
  box-shadow: none !important;
}
header .sml-search-desktop .form-control::placeholder {
  color: #7d7d7d !important;
  opacity: 1 !important;
}
.sml-search-desktop .btn,
.sml-search-desktop .btn-secondary {
  width: 54px !important;
  height: 48px !important;
  border: 1px solid #181818 !important;
  border-radius: 0 999px 999px 0 !important;
  background: #181818 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.sml-search-desktop .btn:hover { background: #000 !important; }

.sml-header-icons { justify-self: end !important; }
.sml-header-icons #shop-nav,
.sml-header-icons .nav-right {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  margin: 0 !important;
}
.sml-header-icons #search { display: none !important; }
.sml-header-icons .nav-link {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px !important;
  border-radius: 999px;
  color: #202020 !important;
  transition: background-color .18s ease;
}
.sml-header-icons .nav-link:hover { background: #f2f2f2; color: #000 !important; }
.sml-header-icons .fas,
.sml-header-icons .far { font-size: 16px !important; }
.cart-icon-dropdown-price { font-size: 12px !important; font-weight: 650; }

.sml-nav-shell {
  border-top: 1px solid #eeeeee;
}
.sml-main-nav {
  min-height: 49px !important;
  padding: 0 !important;
}
.sml-main-nav #mainNavigation { width: 100% !important; border: 0 !important; }
.sml-main-nav .nav-scrollbar-inner {
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 2px;
}
#mainNavigation .nav-link {
  position: relative;
  padding: 16px clamp(12px, 1.15vw, 20px) !important;
  color: #292929 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .025em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  transform: none !important;
}
#mainNavigation .nav-link:first-child { padding-left: 0 !important; }
#mainNavigation .nav-link:hover,
#mainNavigation .active > .nav-link { color: #000 !important; background: transparent !important; }
#mainNavigation .nav-link::after {
  content: "";
  position: absolute;
  left: clamp(12px, 1.15vw, 20px);
  right: clamp(12px, 1.15vw, 20px);
  bottom: 9px;
  height: 1px;
  background: #171717;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
#mainNavigation .nav-link:first-child::after { left: 0; }
#mainNavigation .nav-link:hover::after,
#mainNavigation .active > .nav-link::after { transform: scaleX(1); }
#mainNavigation .nav-link::before { display: none !important; }
.dropdown-menu,
.megamenu {
  border: 1px solid var(--sml-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--sml-shadow) !important;
}

/* BASE ELEMENTS --------------------------------------------- */
.sml-section { padding: clamp(44px, 5vw, 78px) 0; }
.sml-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 26px;
}
.sml-section-heading h2,
.product-slider-wrapper .hr-sect.h2,
.product-slider-wrapper .h2 {
  margin: 0;
  font-size: clamp(25px, 2.5vw, 37px) !important;
  font-weight: 750 !important;
  letter-spacing: -.04em !important;
}
.sml-section-subtitle {
  max-width: 360px;
  margin: 0 0 3px;
  color: var(--sml-muted);
  font-size: 14px;
  line-height: 1.55;
}
.sml-eyebrow {
  margin: 0 0 9px;
  color: #777;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.sml-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.sml-btn:hover { transform: translateY(-1px); }
.sml-btn-dark { background: #181818; color: #fff; border: 1px solid #181818; }
.sml-btn-dark:hover { background: #000; color: #fff; }
.sml-btn-light { background: #fff; color: #171717; border: 1px solid #fff; }
.sml-btn-light:hover { background: #f2f2f2; color: #000; }
.sml-btn-outline { background: transparent; color: #222; border: 1px solid #c7c7c7; }
.sml-btn-outline:hover { border-color: #222; color: #000; }
.sml-text-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* HERO ------------------------------------------------------- */
.sml-hero {
  padding: 24px 0 0;
  background: #fff;
}
.sml-hero-container { max-width: 1640px; }
.sml-hero-link {
  position: relative;
  display: block;
  min-height: clamp(470px, 39vw, 610px);
  overflow: hidden;
  border-radius: var(--sml-radius-lg);
  background: #e9e9e9;
  color: #171717 !important;
  text-decoration: none !important;
}
.sml-hero-media,
.sml-hero-media img,
.sml-hero-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sml-hero-media img { object-fit: cover; }
.sml-hero-placeholder {
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 38%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.42) 30%, transparent 52%),
    linear-gradient(125deg, #f1f1f1 0%, #e6e6e6 46%, #d8d8d8 100%);
}
.sml-hero-ghostmark {
  position: absolute;
  right: 6.5%;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(10,10,10,.065);
  font-size: clamp(76px, 10vw, 170px);
  font-weight: 850;
  line-height: .82;
  letter-spacing: -.075em;
  text-align: right;
}
.sml-smoke {
  position: absolute;
  display: block;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50%;
  filter: blur(.2px);
}
.sml-smoke-one { width: 440px; height: 440px; right: 15%; top: -90px; }
.sml-smoke-two { width: 300px; height: 300px; right: 5%; bottom: -110px; }
.sml-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(243,243,243,.98) 0%, rgba(243,243,243,.88) 28%, rgba(243,243,243,.28) 59%, rgba(243,243,243,0) 78%);
  pointer-events: none;
}
.sml-hero-media + .sml-hero-shade {
  background: linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.80) 28%, rgba(255,255,255,.18) 62%, rgba(255,255,255,0) 80%);
}
.sml-hero-overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 86px) clamp(28px, 5vw, 78px);
}
.sml-hero-copy {
  width: min(610px, 52%);
  margin: 0;
  padding: 0;
  background: transparent;
}
.sml-hero-copy .sml-eyebrow { color: #555; }
.sml-hero-copy h1 {
  max-width: 600px;
  margin: 0 0 19px;
  font-size: clamp(46px, 5.3vw, 78px);
  font-weight: 780;
  line-height: .97;
  letter-spacing: -.062em;
}
.sml-hero-text {
  max-width: 520px;
  margin: 0 0 28px;
  color: #505050;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
}
.sml-hero-actions { display: flex; align-items: center; gap: 14px; }
.sml-hero-meta {
  margin: 22px 0 0;
  color: #777;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* CATEGORIES ------------------------------------------------- */
.sml-categories { background: #fff; }
.sml-category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.sml-category-card {
  display: block;
  min-width: 0;
  color: #fff !important;
  text-decoration: none !important;
}
.sml-category-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--sml-border);
  border-radius: 14px;
  background: #eeeeee;
  transition: transform .22s ease, box-shadow .22s ease;
}
.sml-category-card:hover .sml-category-image {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.sml-category-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.sml-category-card:hover img { transform: scale(1.035); }
.sml-category-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.16);
  font-size: clamp(32px, 3vw, 54px);
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.88), transparent 27%),
    linear-gradient(145deg, #f4f4f4, #dedede);
}
.sml-category-2 .sml-category-placeholder { background: linear-gradient(145deg,#eeeeee,#d7d7d7); }
.sml-category-3 .sml-category-placeholder { background: linear-gradient(145deg,#f6f6f6,#dcdcdc); }
.sml-category-4 .sml-category-placeholder { background: linear-gradient(145deg,#ededed,#d4d4d4); }
.sml-category-5 .sml-category-placeholder { background: linear-gradient(145deg,#f4f4f4,#dadada); }
.sml-category-6 .sml-category-placeholder { background: linear-gradient(145deg,#ececec,#d1d1d1); }
.sml-category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.68) 100%);
}
.sml-category-name {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 15px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  font-size: 15px;
  font-weight: 730;
  letter-spacing: -.01em;
}
.sml-category-name small {
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* PRODUCT SECTIONS ------------------------------------------ */
.sml-products-band { background: #fff; }
.sml-products-band:nth-of-type(even) { background: #fafafa; }
.sml-product-section {
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 5vw, 76px) var(--sml-container-gap) !important;
}
.product-slider-wrapper { margin-top: 0 !important; }
.product-slider-wrapper .hr-sect {
  margin-bottom: 25px !important;
}
.product-slider-wrapper .hr-sect::before,
.product-slider-wrapper .hr-sect::after { display: none !important; }
.product-slider-wrapper .hr-sect a,
.product-slider-wrapper .slick-arrow { color: #333 !important; }

.productbox {
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform .18s ease;
}
.productbox:hover { transform: translateY(-2px); }
.productbox-inner { height: 100%; }
.productbox .productbox-image,
.productbox .productbox-images,
.productbox .square-image {
  overflow: hidden;
  border: 0 !important;
  border-radius: 13px !important;
  background: #f5f5f5 !important;
}
.productbox .productbox-image img {
  mix-blend-mode: multiply;
  transition: transform .28s ease;
}
.productbox:hover .productbox-image img { transform: scale(1.018); }
.productbox .productbox-title {
  min-height: 42px;
  margin-top: 14px !important;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 630 !important;
  line-height: 1.45;
}
.productbox .productbox-title a { color: #1c1c1c !important; }
.productbox .productbox-title a:hover { color: #000 !important; text-decoration: none; }
.productbox .price_wrapper,
.productbox .price { padding: 0 2px; }
.productbox .price,
.productbox .price_wrapper .price { color: #111 !important; font-size: 16px !important; font-weight: 760 !important; }
.productbox .price-note,
.productbox .base-price,
.productbox .estimated-delivery { color: #808080 !important; font-size: 11px !important; }
.productbox-quick-actions {
  top: 10px !important;
  right: 10px !important;
  gap: 6px;
}
.productbox-quick-actions .btn,
.productbox-quick-actions a {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.06) !important;
}
.ribbon {
  border-radius: 5px !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .045em;
  text-transform: uppercase;
}

/* PROMO BANNERS --------------------------------------------- */
.sml-promo { background: #fff; }
.sml-promo-between { padding-top: 24px; padding-bottom: 24px; }
.sml-promo-card {
  position: relative;
  min-height: 340px;
  display: flex;
  overflow: hidden;
  border-radius: var(--sml-radius-lg);
  background: #242424;
  color: #fff !important;
  text-decoration: none !important;
}
.sml-promo-large { min-height: 470px; }
.sml-promo-media,
.sml-promo-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sml-promo-media img { width: 100%; height: 100%; object-fit: cover; }
.sml-promo-placeholder {
  display: block;
  background:
    radial-gradient(circle at 76% 48%, rgba(255,255,255,.13), transparent 28%),
    linear-gradient(120deg,#252525,#484848);
}
.sml-promo-placeholder-large {
  background:
    radial-gradient(circle at 78% 32%, rgba(255,255,255,.17), transparent 24%),
    linear-gradient(125deg,#151515,#4c4c4c);
}
.sml-promo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.3) 48%, rgba(0,0,0,.03) 80%);
}
.sml-promo-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(570px, 54%);
  margin: 0;
  padding: clamp(36px,5vw,76px);
  color: #fff;
  background: transparent;
}
.sml-promo-copy .sml-eyebrow { color: rgba(255,255,255,.62); }
.sml-promo-copy h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(31px,4vw,52px);
  font-weight: 760;
  line-height: 1.03;
}
.sml-promo-copy p:not(.sml-eyebrow) {
  max-width: 480px;
  color: rgba(255,255,255,.76);
  font-size: 15px;
  line-height: 1.65;
}

/* CONTENT BLOCK --------------------------------------------- */
.sml-content-block { background: #f6f6f6; }
.sml-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: 470px;
  overflow: hidden;
  border-radius: var(--sml-radius-lg);
  background: #fff;
}
.sml-content-grid.sml-image-right .sml-content-image { order: 2; }
.sml-content-image { overflow: hidden; background: #e7e7e7; }
.sml-content-image img,
.sml-content-placeholder {
  width: 100%;
  height: 100%;
  min-height: 470px;
  object-fit: cover;
}
.sml-content-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.7), transparent 32%),
    linear-gradient(135deg,#eeeeee,#d4d4d4);
}
.sml-content-placeholder span {
  color: rgba(0,0,0,.08);
  font-size: clamp(64px,8vw,128px);
  font-weight: 850;
  line-height: .8;
  letter-spacing: -.07em;
  text-align: center;
}
.sml-content-copy { align-self: center; padding: clamp(42px,6vw,88px); }
.sml-content-copy h2 {
  max-width: 520px;
  margin-bottom: 18px;
  font-size: clamp(32px,3.5vw,50px);
  line-height: 1.04;
}
.sml-content-copy > p:not(.sml-eyebrow) {
  max-width: 540px;
  margin-bottom: 29px;
  color: #626262;
  font-size: 15px;
  line-height: 1.72;
}

/* CATEGORY / PRODUCT LIST ----------------------------------- */
.breadcrumb { background: transparent !important; font-size: 12px; }
.productlist-header-description { margin-bottom: 28px; }
.productlist-header-description h1,
.productlist-title h1 { font-size: clamp(31px,4vw,48px) !important; }
.productlist-header-description-image { border-radius: var(--sml-radius-lg); overflow: hidden; }
.sml-category-banner {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  margin-bottom: 30px;
  border-radius: var(--sml-radius-lg);
  background: #ededed;
}
.sml-category-banner picture,
.sml-category-banner img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
.sml-category-banner > span {
  position: absolute;
  left: 26px;
  bottom: 24px;
  max-width: calc(100% - 52px);
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #222;
  font-size: 12px;
  font-weight: 700;
}
.sub-categories {
  border: 1px solid var(--sml-border) !important;
  border-radius: 13px !important;
  padding: 14px !important;
}
.productlist-filter-wrapper,
.box-filter-hr { border-color: var(--sml-border) !important; }

/* PRODUCT DETAIL -------------------------------------------- */
#product-offer,
.product-buy,
.product-configuration-sidebar-wrapper .panel {
  border-color: var(--sml-border) !important;
  box-shadow: none !important;
}
.product-info h1,
#product-offer h1 { font-size: clamp(29px,3.2vw,44px) !important; line-height: 1.08; }
.product-buy .btn-primary,
.btn-basket-check {
  min-height: 52px;
  border-color: #181818 !important;
  border-radius: 999px !important;
  background: #181818 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 700;
}
.product-buy .btn-primary:hover,
.btn-basket-check:hover { background: #000 !important; border-color: #000 !important; }
.product-gallery .slick-slide img,
.product-gallery img { border-radius: 13px; }
.nav-tabs { border-bottom-color: var(--sml-border); }
.nav-tabs .nav-link { font-weight: 650; }
.nav-tabs .nav-link.active { border-color: var(--sml-border) var(--sml-border) #fff; }

/* FORMS / ACCOUNT / CHECKOUT -------------------------------- */
.form-control,
.custom-select {
  min-height: 46px;
  border-color: #d8d8d8;
  border-radius: 9px;
  background-color: #fff;
  box-shadow: none !important;
}
.form-control:focus,
.custom-select:focus {
  border-color: #767676;
  box-shadow: 0 0 0 3px rgba(0,0,0,.035) !important;
}
.btn { border-radius: 999px; box-shadow: none !important; }
.btn-primary { border-color: #181818; background: #181818; }
.btn-primary:hover,
.btn-primary:focus { border-color: #000; background: #000; }
.btn-outline-primary { color: #222; border-color: #777; }
.btn-outline-primary:hover { background: #181818; border-color: #181818; }
.card,
.panel,
.account-data-item,
.checkout-payment-method,
.checkout-shipping-method {
  border-color: var(--sml-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* CART ------------------------------------------------------- */
.cart-items-body { border-color: var(--sml-border) !important; }
.cart-items-image img { border-radius: 10px; }
.cart-items-name a { color: #1d1d1d; font-weight: 650; }
.cart-items-price .price_overall { color: #171717 !important; font-weight: 750; }
.cart-dropdown { border-color: var(--sml-border); border-radius: 13px; }
.cart-dropdown-buttons .btn-primary { background: #181818; border-color: #181818; }

/* ACTION / TRUST -------------------------------------------- */
.sml-action-banner { background: #181818; color: #fff; }
.sml-action-inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
}
.sml-action-inner a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.sml-trust {
  padding: 30px 0;
  border-top: 1px solid var(--sml-border);
  border-bottom: 1px solid var(--sml-border);
  background: #fff;
}
.sml-trust-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.sml-trust-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
}
.sml-trust-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dedede;
  border-radius: 50%;
  color: #2b2b2b;
  background: #fafafa;
}
.sml-trust-item strong { display: block; margin-bottom: 4px; font-size: 13px; }
.sml-trust-item div > span { display: block; color: #747474; font-size: 11px; line-height: 1.5; }

/* FOOTER ----------------------------------------------------- */
#footer {
  padding-top: 42px;
  background: #f3f3f3 !important;
  color: #343434 !important;
  border-top: 0 !important;
}
#footer a { color: #555; }
#footer a:hover { color: #000; }
#footer .h5,
#footer .h4,
#footer .h3 { color: #1d1d1d !important; font-weight: 720 !important; }
.sml-footer-intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 38px;
  padding-bottom: 30px;
  border-bottom: 1px solid #dcdcdc;
}
.sml-footer-brand p {
  max-width: 520px;
  margin: 13px 0 0;
  color: #707070;
  font-size: 13px;
  line-height: 1.65;
}
.sml-footer-contact { display: flex; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }
.sml-footer-contact a { display: flex; flex-direction: column; gap: 3px; text-decoration: none !important; }
.sml-footer-contact span { color: #858585; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sml-footer-contact strong { color: #222; font-size: 13px; font-weight: 700; }
.newsletter-footer {
  margin-bottom: 34px !important;
  padding: 28px !important;
  border-radius: 16px;
  background: #e9e9e9;
}
.newsletter-footer-heading { font-size: clamp(23px,2.6vw,34px) !important; }
#footer-boxes { padding-top: 10px; }
#footer .copyright,
#copyright {
  margin-top: 38px;
  background: #181818 !important;
  color: rgba(255,255,255,.75) !important;
}
#copyright a { color: #fff !important; }

/* LEGACY NEUTRALIZATION ------------------------------------- */
header .form-control,
header .form-control:focus { color: #171717 !important; }
.btn-secondary { background: #181818 !important; border-color: #181818 !important; color: #fff !important; }
.badge-primary { background: #181818 !important; }

/* RESPONSIVE ------------------------------------------------- */
@media (max-width: 1199.98px) {
  .sml-header-main {
    grid-template-columns: minmax(180px, 220px) minmax(320px, 1fr) auto !important;
    gap: 24px !important;
  }
  .sml-category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sml-category-image { aspect-ratio: 5 / 4; }
  .sml-trust-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 991.98px) {
  #jtl-nav-wrapper { position: relative !important; top: auto !important; }
  .sml-header-main {
    display: flex !important;
    min-height: 64px !important;
    padding: 8px 0 !important;
    gap: 12px !important;
  }
  .sml-header-brand { flex: 1 1 auto !important; }
  .sml-header-icons { flex: 0 0 auto !important; }
  .toggler-logo-wrapper { width: 100% !important; }
  .burger-menu-wrapper {
    position: static !important;
    flex: 0 0 auto !important;
    padding: 12px 13px 12px 0 !important;
  }
  .sml-wordmark { font-size: 20px !important; }
  .sml-custom-logo { height: 37px !important; max-width: 170px !important; }
  .sml-nav-shell { border-top: 0; }
  .sml-main-nav { min-height: 0 !important; border-top: 0 !important; }
  .sml-main-nav #mainNavigation { border-top: 1px solid #eee !important; }
  #mainNavigation .nav-link {
    padding: 14px 16px !important;
    font-size: 13px !important;
    text-transform: none !important;
  }
  #mainNavigation .nav-link:first-child { padding-left: 16px !important; }
  #mainNavigation .nav-link::after { display: none; }
  .sml-hero { padding-top: 14px; }
  .sml-hero-link { min-height: 530px; }
  .sml-hero-overlay { align-items: flex-end; padding: 35px 28px; }
  .sml-hero-copy { width: min(620px, 82%); }
  .sml-hero-shade { background: linear-gradient(0deg, rgba(245,245,245,.94), rgba(245,245,245,.35) 64%, rgba(245,245,245,.03)); }
  .sml-content-grid { grid-template-columns: 1fr; }
  .sml-content-grid.sml-image-right .sml-content-image { order: 0; }
  .sml-content-image img,
  .sml-content-placeholder { min-height: 330px; max-height: 470px; }
  .sml-content-copy { padding: 40px 30px 48px; }
}

@media (max-width: 767.98px) {
  :root { --sml-container-gap: 14px; }
  .sml-section { padding: 38px 0; }
  .sml-section-heading { align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .sml-section-heading-split { flex-direction: column; }
  .sml-section-subtitle { max-width: none; font-size: 13px; }

  .sml-hero-container { padding-left: 10px !important; padding-right: 10px !important; }
  .sml-hero-link { min-height: 510px; border-radius: 14px; }
  .sml-hero-overlay { align-items: flex-end; padding: 30px 22px; }
  .sml-hero-copy { width: 100%; }
  .sml-hero-copy h1 { max-width: 420px; font-size: clamp(39px,11vw,55px); }
  .sml-hero-text { max-width: 410px; font-size: 15px; }
  .sml-hero-meta { margin-top: 18px; font-size: 9px; }
  .sml-hero-ghostmark { right: -4%; top: 27%; font-size: 89px; }
  .sml-smoke-one { width: 300px; height: 300px; right: -90px; top: -60px; }
  .sml-smoke-two { width: 230px; height: 230px; right: -100px; bottom: 85px; }

  .sml-category-grid {
    display: flex;
    gap: 11px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 14px 12px;
    margin-left: -14px;
    margin-right: -14px;
    scrollbar-width: none;
  }
  .sml-category-grid::-webkit-scrollbar { display: none; }
  .sml-category-card { flex: 0 0 min(67vw, 245px); scroll-snap-align: start; }
  .sml-category-image { aspect-ratio: 4 / 5; }

  .sml-product-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .productbox .productbox-title { font-size: 13px; }

  .sml-promo-card,
  .sml-promo-large { min-height: 390px; border-radius: 14px; }
  .sml-promo-shade { background: linear-gradient(0deg, rgba(0,0,0,.79), rgba(0,0,0,.12) 76%); }
  .sml-promo-copy {
    align-self: flex-end;
    width: 100%;
    padding: 28px 24px;
  }
  .sml-promo-copy h2 { font-size: 34px; }

  .sml-trust { padding: 20px 0; }
  .sml-trust-grid { grid-template-columns: 1fr; gap: 4px; }
  .sml-trust-item { padding: 9px 2px; }
  .sml-action-inner { min-height: 64px; flex-direction: column; gap: 6px; padding: 12px 0; }

  .sml-footer-intro { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .sml-footer-contact { justify-content: flex-start; }
  .newsletter-footer { padding: 22px !important; }
}

@media (max-width: 575.98px) {
  .sml-header-container { padding-left: 14px !important; padding-right: 14px !important; }
  .sml-header-icons .nav-link { min-width: 37px; min-height: 37px; padding: 8px !important; }
  .cart-icon-dropdown-price { display: none !important; }
  .sml-wordmark { font-size: 18px !important; gap: 5px; }
  .sml-hero-link { min-height: 485px; }
  .sml-hero-copy h1 { font-size: 43px; }
  .sml-btn { min-height: 44px; padding: 11px 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* STARTSEITEN BANNER-RASTER v1.3 ---------------------------- */
.sml-tile-banners {
  padding: 22px 0 8px;
  background: #fff;
}
.sml-tile-banners .container-fluid-xl { max-width: 1640px; }
.sml-tile-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 18px;
}
.sml-tile-heading h2 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 760;
  letter-spacing: -.04em;
}
.sml-tile-grid {
  display: grid;
  gap: 12px;
}
.sml-tile-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sml-tile-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sml-tile-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sml-tile-banner {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 640 / 420;
  overflow: hidden;
  border: 1px solid var(--sml-border);
  border-radius: 13px;
  background: #f1f1f1;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sml-tile-banner:hover {
  transform: translateY(-2px);
  border-color: #d8d8d8;
  box-shadow: 0 12px 28px rgba(0,0,0,.075);
}
.sml-tile-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .32s ease;
}
.sml-tile-banner:hover img { transform: scale(1.025); }
.sml-tile-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background:
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.95), transparent 24%),
    linear-gradient(145deg, #f4f4f4, #e3e3e3);
  color: rgba(0,0,0,.20);
}
.sml-tile-placeholder strong {
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 800;
  letter-spacing: -.04em;
}
.sml-tile-placeholder small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sml-tile-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% - 20px);
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15,15,15,.78);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1399.98px) {
  .sml-tile-grid-cols-5,
  .sml-tile-grid-cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .sml-tile-grid,
  .sml-tile-grid-cols-4,
  .sml-tile-grid-cols-5,
  .sml-tile-grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .sml-tile-banners { padding-top: 12px; }
  .sml-tile-grid,
  .sml-tile-grid-cols-4,
  .sml-tile-grid-cols-5,
  .sml-tile-grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sml-tile-banner { border-radius: 10px; }
  .sml-tile-label { left: 7px; right: 7px; bottom: 7px; padding: 6px 8px; font-size: 10px; }
}