/* =========================================================
   FABRIC-STOCK24 - GLOBAL STYLES
   Layout, Komponenten, Seiten, Admin, Utilities
   ========================================================= */


/* --- components.css --- */
/* components.css */


/* --- header.css --- */
/* ── TOPBAR ──────────────────────────────────────────── */
.topbar {
  background: var(--topbar-bg, #0f1923);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0;
  font-size: .76rem;
}
.topbar-inner {
  max-width: var(--layout-max-width, 1280px);
  margin: 0 auto;
  padding: 6px var(--layout-padding, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.topbar-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  color: #e8c96a;
  font-size: .74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.topbar-dot {
  width: 6px; height: 6px;
  border-radius: 50%; background: #e8c96a;
  flex-shrink: 0;
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.topbar-link {
  font-family: 'Lato', sans-serif;
  font-size: .73rem;
  font-weight: 300;
  color: var(--topbar-text, #8fa8b8);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .18s;
  white-space: nowrap;
}
.topbar-link:hover { color: #fff; }
.topbar-link i { font-size: .8rem; }
/* Sprach-Dropdown */
.lang-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 3px 9px 3px 7px;
  cursor: pointer;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .3px;
  transition: background .18s;
  white-space: nowrap;
}
.lang-toggle:hover { background: rgba(255,255,255,.12); }
.lang-toggle .flag { font-size: .9rem; line-height: 1; }
.lang-toggle .chevron {
  font-size: .55rem;
  opacity: .6;
  margin-left: 1px;
  transition: transform .18s;
}
.lang-dropdown.open .lang-toggle .chevron { transform: rotate(180deg); }
.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #162636;
  border: 1px solid rgba(255,255,255,.1);
  border-top: 2px solid #c9a84c;
  border-radius: 8px;
  min-width: 160px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 9999;
  overflow: hidden;
}
.lang-dropdown.open .lang-menu { display: block; }
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-family: 'Lato', sans-serif;
  font-size: .82rem;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.lang-menu a:hover { background: rgba(201,168,76,.12); color: #c9a84c; }
.lang-menu a.active { background: rgba(201,168,76,.08); color: #c9a84c; font-weight: 700; }
.lang-menu a .flag { font-size: 1rem; }
.lang-menu a .lang-name { flex: 1; }
.lang-menu a .lang-short { font-size: .7rem; opacity: .5; font-weight: 700; letter-spacing: .5px; }
/* ── NAVBAR ──────────────────────────────────────────── */
.main-nav {
  background: var(--nav-bg, #1b3a4b);
  border-bottom: 3px solid var(--nav-border, #c9a84c);
  position: sticky; top: 0; z-index: 900;
  box-shadow: 0 4px 20px rgba(15,25,35,.35);
}
.nav-inner {
  max-width: var(--layout-max-width, 1280px);
  margin: 0 auto;
  padding: 0 var(--layout-padding, 24px);
  display: flex;
  align-items: center;
  height: var(--nav-height, 62px);
  gap: 0;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0; margin-right: 20px;
}
.nav-logo img {
  height: var(--logo-height, 40px);
  max-width: var(--logo-max-width, 220px);
  object-fit: contain; display: block;
}
.nav-logo-icon {
  width: 34px; height: 34px;
  background: var(--col-gold, #c9a84c);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #0f1923; font-size: 1rem; flex-shrink: 0;
}
.nav-logo-text {
  font-family: 'Raleway', sans-serif;
  font-weight: 800; font-size: 1.05rem;
  color: #fff; letter-spacing: -.3px; white-space: nowrap;
}
/* Nav Links */
.nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2px;
  flex: 1; justify-content: center;
}
.nav-link-item {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: var(--nav-font-size, .75rem);
  color: var(--nav-link, rgba(255,255,255,.8)) !important;
  text-decoration: none !important;
  padding: 8px 11px;
  border-radius: 6px;
  display: flex; align-items: center; gap: 5px;
  letter-spacing: .7px; text-transform: uppercase;
  transition: all .18s; white-space: nowrap;
}
.nav-link-item:hover,
.has-dropdown.open > .nav-link-item {
  background: var(--nav-link-hover-bg, rgba(201,168,76,.18));
  color: var(--nav-link-hover, #c9a84c) !important;
}
.nav-arrow { font-size: .55rem; transition: transform .2s; }
.has-dropdown.open .nav-arrow { transform: rotate(180deg); }
.has-dropdown { position: relative; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--nav-dropdown-bg, var(--nav-bg, #1b3a4b));
  border: 1px solid rgba(201,168,76,.2);
  border-top: 2px solid var(--nav-border, #c9a84c);
  border-radius: 10px;
  list-style: none; padding: 6px 0; margin: 0;
  min-width: 210px;
  box-shadow: 0 14px 40px rgba(0,0,0,.4);
  z-index: 1000;
}
.has-dropdown.open .nav-dropdown { display: block; }
.nav-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-family: 'Lato', sans-serif;
  font-size: .85rem; font-weight: 400;
  color: var(--nav-dropdown-text, var(--nav-link, rgba(255,255,255,.88)));
  text-decoration: none;
  transition: all .15s;
}
.nav-dd-item:hover {
  background: rgba(201,168,76,.12);
  color: var(--nav-link-hover, #c9a84c);
}
.nav-dd-item i { font-size: .8rem; color: var(--nav-border, #c9a84c); width: 14px; flex-shrink: 0; }
/* Auth */
.nav-auth {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: 16px;
}
.nav-auth-link {
  font-family: 'Lato', sans-serif;
  font-size: .8rem; font-weight: 400;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 9px; border-radius: 6px;
  transition: all .18s;
}
.nav-auth-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-auth-logout { color: #ef9595 !important; }
.nav-auth-logout:hover { background: rgba(185,28,28,.15) !important; color: #fca5a5 !important; }
.nav-btn-register {
  font-family: 'Raleway', sans-serif;
  font-weight: 800; font-size: .76rem; letter-spacing: .4px;
  background: var(--reg-btn-bg, #c9a84c);
  color: var(--reg-btn-text, #0f1923) !important;
  text-decoration: none;
  padding: 8px 16px; border-radius: 25px;
  transition: all .18s; white-space: nowrap;
}
.nav-btn-register:hover { filter: brightness(1.1); transform: translateY(-1px); }
/* Hamburger */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px; margin-left: auto; flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px; transition: all .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ── RESPONSIVE ──────────────────────────────────────── */
/* Tablet: ≤1024px */

/* Mobil: ≤ 768px */

/* Sehr klein: ≤ 480px */

/* Landscape Tablet */

/* Desktop: > 1024px */
@media (min-width: 1025px) {
  .nav-hamburger { display: none !important; }
}
/* iOS Safe Area */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar { padding-top: env(safe-area-inset-top); }
}



/* ==========================================================
   FINAL HEADER / MEGA MENU RESET
   Muss am Ende von header.css stehen.
   Verhindert alte Menüs im Dokumentfluss und setzt Desktop/Mobile sauber.
   ========================================================== */

/* Alte Mobile-Listen und Child-Panels niemals als normale Listen anzeigen */
.main-nav .mm-mobile-list {
  display: none !important;
}

.main-nav .megamenu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  max-width: 1120px !important;
  background: #ffffff !important;
  border: 1px solid rgba(201,168,76,.48) !important;
  border-top: 3px solid #c9a84c !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 24px 64px rgba(15,25,35,.20) !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-nav .has-megamenu {
  position: static !important;
}

.main-nav .nav-inner {
  position: relative !important;
}

.main-nav .has-megamenu.open > .megamenu {
  display: block !important;
}

@media (min-width: 1025px) {
  .main-nav .has-megamenu:hover > .megamenu {
    display: block !important;
  }
}

/* Hero und Content dürfen nie vom Menü verschoben werden */
.hero-slideshow,
.search-section,
#productsGrid,
.ad-placeholder {
  position: relative;
  z-index: 1;
}

/* Kategorien Mega-Menü */
.main-nav .megamenu .mm-inner {
  display: grid !important;
  grid-template-columns: 285px 1fr 190px !important;
  min-height: 390px !important;
  max-height: 540px !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: #fff !important;
}

.main-nav .megamenu .mm-groups {
  background: #f8fafc !important;
  border-right: 1px solid #e8edf2 !important;
  padding: 14px 10px !important;
  overflow-y: auto !important;
}

.main-nav .megamenu .mm-group-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 13px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #1b3a4b !important;
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  font-size: .93rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  border-left: 0 !important;
}

.main-nav .megamenu .mm-group-link:hover,
.main-nav .megamenu .mm-group.active .mm-group-link {
  background: #fff !important;
  color: #0f1923 !important;
  box-shadow: 0 2px 8px rgba(15,25,35,.06) !important;
}

.main-nav .megamenu .mm-children {
  padding: 20px 22px !important;
  overflow-y: auto !important;
  background: #fff !important;
}

.main-nav .megamenu .mm-child-header {
  color: #0f1923 !important;
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: .78rem !important;
  letter-spacing: .7px !important;
  border-bottom: 1px solid #edf1f5 !important;
  padding-bottom: 11px !important;
  margin-bottom: 13px !important;
}

.main-nav .megamenu .mm-child-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  gap: 7px 14px !important;
}

.main-nav .megamenu .mm-child-link {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 9px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #334155 !important;
  font-family: var(--font-body, 'Lato', sans-serif) !important;
  font-size: .88rem !important;
  font-weight: 400 !important;
}

.main-nav .megamenu .mm-child-link:hover {
  background: #f8fafc !important;
  color: #1b3a4b !important;
}

.main-nav .megamenu .mm-select-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  height: 100%;
  font-size: .9rem;
}

.main-nav .megamenu .mm-promo {
  border-left: 1px solid #e8edf2 !important;
  background: #fbfbfc !important;
  padding: 18px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.main-nav .megamenu .mm-promo-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 10px !important;
  background: #fff !important;
  border: 1px solid #e8edf2 !important;
  border-radius: 9px !important;
  color: #1b3a4b !important;
  text-decoration: none !important;
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
}

.main-nav .megamenu .mm-promo-link:hover {
  border-color: #c9a84c !important;
}

/* Stocklots 3-Spalten-Showcase */
.main-nav .megamenu-stocklots {
  width: min(1120px, calc(100vw - 48px)) !important;
}

.main-nav .mm-showcase {
  display: grid !important;
  grid-template-columns: 285px 1fr 270px !important;
  min-height: 395px !important;
  background: #fff !important;
}

.main-nav .mm-side-list {
  background: #f8fafc !important;
  border-right: 1px solid #e8edf2 !important;
  padding: 14px 12px 12px !important;
}

.main-nav .mm-side-item {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: #102335 !important;
  text-decoration: none !important;
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  font-size: .91rem !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  min-height: 42px !important;
}

.main-nav .mm-side-item:hover {
  background: #fff !important;
  color: #1b3a4b !important;
  box-shadow: 0 2px 8px rgba(15,25,35,.06) !important;
}

.main-nav .mm-side-icon {
  width: 22px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.main-nav .mm-side-title {
  flex: 1 !important;
}

.main-nav .mm-badge-inline {
  color: #fff !important;
  border-radius: 7px !important;
  padding: 1px 5px !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.main-nav .mm-side-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-top: 1px solid #e8edf2 !important;
  margin-top: 10px !important;
  padding-top: 12px !important;
}

.main-nav .mm-side-small {
  color: #1b3a4b !important;
  text-decoration: none !important;
  font-size: .82rem !important;
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.main-nav .mm-feature-panel {
  padding: 22px 22px 18px !important;
  background: #fff !important;
}

.main-nav .mm-panel-title {
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  color: #0f1923 !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
  margin-bottom: 14px !important;
}

.main-nav .mm-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

.main-nav .mm-feature-card {
  position: relative !important;
  min-height: 106px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: #fff !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  background: linear-gradient(135deg, rgba(15,25,35,.10), rgba(15,25,35,.84)), linear-gradient(135deg,#c9a84c,#1b3a4b) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.main-nav .mm-feature-card span,
.main-nav .mm-feature-card strong,
.main-nav .mm-feature-card em {
  position: relative !important;
  z-index: 1 !important;
}

.main-nav .mm-feature-card span {
  font-size: 1.15rem !important;
  margin-bottom: 4px !important;
}

.main-nav .mm-feature-card strong {
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

.main-nav .mm-feature-card em {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  font-style: normal !important;
  border-radius: 7px !important;
  padding: 2px 6px !important;
  font-size: .63rem !important;
  font-weight: 900 !important;
}

.main-nav .mm-feature-1 { background:linear-gradient(135deg, rgba(128,85,20,.25), rgba(15,25,35,.82)), linear-gradient(135deg,#d9a441,#8a5a19) !important; }
.main-nav .mm-feature-2 { background:linear-gradient(135deg, rgba(10,20,32,.10), rgba(15,25,35,.86)), linear-gradient(135deg,#374151,#111827) !important; }
.main-nav .mm-feature-3 { background:linear-gradient(135deg, rgba(20,70,96,.25), rgba(15,25,35,.83)), linear-gradient(135deg,#22607d,#0f2538) !important; }
.main-nav .mm-feature-4 { background:linear-gradient(135deg, rgba(95,95,95,.18), rgba(15,25,35,.78)), linear-gradient(135deg,#b7b0a7,#4b5563) !important; }
.main-nav .mm-feature-5 { background:linear-gradient(135deg, rgba(155,60,20,.2), rgba(15,25,35,.82)), linear-gradient(135deg,#b45309,#7f1d1d) !important; }
.main-nav .mm-feature-6 { background:linear-gradient(135deg, rgba(20,80,80,.18), rgba(15,25,35,.85)), linear-gradient(135deg,#164e63,#111827) !important; }

.main-nav .mm-more-title {
  border-top: 1px solid #e8edf2 !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  color: #0f1923 !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
}

.main-nav .mm-more-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 18px !important;
  margin-top: 10px !important;
}

.main-nav .mm-more-links a {
  color: #334155 !important;
  text-decoration: none !important;
  font-size: .82rem !important;
  font-family: var(--font-body, 'Lato', sans-serif) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.main-nav .mm-info-panel {
  border-left: 1px solid #e8edf2 !important;
  background: #fbfbfc !important;
  padding: 22px 20px !important;
}

.main-nav .mm-info-item {
  display: flex !important;
  gap: 12px !important;
  padding: 11px 0 !important;
  color: #102335 !important;
  text-decoration: none !important;
}

.main-nav .mm-info-item i {
  width: 22px !important;
  color: #1b3a4b !important;
  font-size: 1.05rem !important;
  margin-top: 2px !important;
}

.main-nav .mm-info-item strong {
  display: block !important;
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  font-size: .91rem !important;
  font-weight: 900 !important;
  color: #0f1923 !important;
  margin-bottom: 3px !important;
}

.main-nav .mm-info-item small {
  display: block !important;
  color: #475569 !important;
  font-family: var(--font-body, 'Lato', sans-serif) !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
}

.main-nav .mm-info-cta {
  margin-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg,#c9a84c,#d8a036) !important;
  color: #0f1923 !important;
  text-decoration: none !important;
  font-family: var(--font-head, 'Raleway', sans-serif) !important;
  font-weight: 900 !important;
  font-size: .88rem !important;
}

/* Dropdown Über uns */
.main-nav .has-dropdown {
  position: relative !important;
}

.main-nav .nav-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 230px !important;
  background: #fff !important;
  border: 1px solid #e8edf2 !important;
  border-top: 3px solid #c9a84c !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 16px 38px rgba(15,25,35,.16) !important;
  padding: 8px !important;
  list-style: none !important;
  z-index: 99999 !important;
}

.main-nav .has-dropdown.open > .nav-dropdown,
.main-nav .has-dropdown:hover > .nav-dropdown {
  display: block !important;
}

.main-nav .nav-dd-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 10px !important;
  color: #1b3a4b !important;
  text-decoration: none !important;
  border-radius: 7px !important;
  font-size: .86rem !important;
}

.main-nav .nav-dd-item:hover {
  background: #f8fafc !important;
}

/* Mobile endgültig getrennt */
@media (max-width:1024px) {
  .main-nav .has-megamenu > .megamenu {
    display: none !important;
  }

  .main-nav .has-megamenu.open > .mm-mobile-list {
    display: block !important;
  }

  .main-nav .mm-mobile-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 12px !important;
    width: 100% !important;
    background: #fff !important;
    border-top: 1px solid #e8edf2 !important;
  }

  .main-nav .mm-mobile-link,
  .main-nav .mm-mobile-action {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    text-decoration: none !important;
    color: #1b3a4b !important;
    background: #fff !important;
    font-size: .94rem !important;
  }

  .main-nav .mm-mobile-link span:first-child {
    flex: 1 !important;
  }

  .main-nav .mm-mobile-bottom {
    border-top: 1px solid #e8edf2 !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .main-nav .mm-mobile-action {
    font-size: .85rem !important;
    flex: 1 1 33% !important;
    justify-content: center !important;
    color: #12649a !important;
  }
}



/* ==========================================================
   MEGA MENU HOVER BRIDGE FIX
   verhindert, dass das Menü beim Weg vom Hauptpunkt zum Dropdown verschwindet
   ========================================================== */

.main-nav .has-megamenu > .megamenu {
  top: calc(100% - 1px) !important;
}

.main-nav .has-megamenu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  display: none;
  z-index: 99998;
}

.main-nav .has-megamenu.open::after,
.main-nav .has-megamenu:hover::after {
  display: block;
}

.main-nav .has-dropdown > .nav-dropdown {
  top: calc(100% - 1px) !important;
}

.main-nav .has-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  display: none;
  z-index: 99998;
}

.main-nav .has-dropdown.open::after,
.main-nav .has-dropdown:hover::after {
  display: block;
}


/* ── AUTH/HAMBURGER VISIBILITY FIX 2026-05 ─────────────────────────
   Header nutzt weißen Navigationsbereich. Login/Hamburger dürfen deshalb
   nicht weiß sein. Diese Regeln bewusst am Ende der Datei lassen. */
.main-nav .nav-auth{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-left:16px !important;
}

.main-nav .nav-auth-link{
  color:#0f1923 !important;
  background:rgba(15,25,35,.04) !important;
  border:1px solid rgba(15,25,35,.08) !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  font-family:'Raleway',sans-serif !important;
  font-weight:800 !important;
  font-size:.78rem !important;
}

.main-nav .nav-auth-link i{
  color:#0f1923 !important;
}

.main-nav .nav-auth-link:hover{
  color:#0f1923 !important;
  background:#fff8df !important;
  border-color:#c9a84c !important;
}

.main-nav .nav-auth-logout{
  color:#b91c1c !important;
  background:#fff5f5 !important;
  border-color:#fecaca !important;
}

.main-nav .nav-auth-logout i{
  color:#b91c1c !important;
}

.main-nav .nav-btn-register{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#c9a84c !important;
  color:#0f1923 !important;
  border:1px solid #c9a84c !important;
  border-radius:999px !important;
  min-height:38px !important;
  padding:8px 18px !important;
  box-shadow:0 8px 18px rgba(201,168,76,.18) !important;
}

.main-nav .nav-hamburger{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  border:1px solid rgba(15,25,35,.12) !important;
  background:#fff8df !important;
  align-items:center !important;
  justify-content:center !important;
}

.main-nav .nav-hamburger span{
  background:#0f1923 !important;
  height:2px !important;
  width:24px !important;
}

@media(max-width:1024px){
  .main-nav .nav-auth{
    order:2 !important;
    margin-left:auto !important;
    margin-right:8px !important;
  }

  .main-nav .nav-auth-link span{
    display:inline !important;
  }

  .main-nav .nav-hamburger{
    display:flex !important;
    order:3 !important;
  }
}

@media(max-width:640px){
  .main-nav .nav-auth-link{
    padding:8px 10px !important;
  }

  .main-nav .nav-auth-link span{
    display:none !important;
  }

  .main-nav .nav-btn-register{
    padding:8px 12px !important;
    font-size:.72rem !important;
  }
}


/* --- footer.css --- */
/* ==========================================================
   PROFESSIONAL SITE FOOTER
   ========================================================== */

.site-footer {
  margin-top: 64px;
  background:
    radial-gradient(circle at top left, rgba(201,168,76,.16), transparent 34%),
    linear-gradient(135deg, #0f1923 0%, #13283a 48%, #081018 100%);
  color: rgba(255,255,255,.82);
  border-top: 4px solid #c9a84c;
  font-family: var(--font-body, 'Lato', sans-serif);
  overflow: hidden;
}

.footer-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 22px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 28px;
  align-items: stretch;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.footer-brand {
  min-width: 0;
}

.footer-logo-text {
  display: inline-block;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  letter-spacing: .3px;
  margin-bottom: 3px;
}

.footer-logo-text:hover {
  color: #c9a84c;
}

.footer-claim {
  color: #c9a84c;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  margin-bottom: 12px;
}

.footer-brand p {
  max-width: 700px;
  margin: 0 0 18px;
  color: rgba(255,255,255,.68);
  font-size: .94rem;
  line-height: 1.7;
}

.footer-contact-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  text-decoration: none;
  font-size: .82rem;
  transition: all .18s ease;
}

.footer-pill:hover {
  color: #fff;
  border-color: rgba(201,168,76,.65);
  background: rgba(201,168,76,.14);
  transform: translateY(-1px);
}

.footer-pill-wa i,
.footer-wa {
  color: #25d366 !important;
}

.footer-newsletter-box {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.footer-box-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f1923;
  background: linear-gradient(135deg, #c9a84c, #e6c56b);
  margin-bottom: 13px;
}

.footer-newsletter-box strong {
  display: block;
  color: #fff;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-weight: 900;
  font-size: 1rem;
  margin-bottom: 7px;
}

.footer-newsletter-box span {
  display: block;
  color: rgba(255,255,255,.67);
  font-size: .86rem;
  line-height: 1.55;
  margin-bottom: 15px;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c9a84c, #d9a441);
  color: #0f1923;
  text-decoration: none;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: .84rem;
  font-weight: 900;
}

.footer-cta:hover {
  color: #0f1923;
  filter: brightness(1.05);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
  padding: 34px 0 28px;
}

.footer-col h5 {
  position: relative;
  color: #fff;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: .92rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin: 0 0 16px;
  padding-bottom: 11px;
}

.footer-col h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 3px;
  background: #c9a84c;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin: 0 0 9px;
  padding: 0;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: .88rem;
  line-height: 1.45;
  transition: color .18s ease, transform .18s ease;
  word-break: break-word;
}

.footer-links a:hover {
  color: #c9a84c;
  transform: translateX(2px);
}

.footer-arrow {
  font-size: .64rem;
  color: #c9a84c;
  opacity: .9;
  flex-shrink: 0;
}

.footer-lang {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.footer-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 800;
}

.footer-lang a.active,
.footer-lang a:hover {
  color: #0f1923;
  background: #c9a84c;
  border-color: #c9a84c;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,255,255,.58);
  font-size: .8rem;
}

.footer-tagline {
  color: rgba(201,168,76,.75);
  text-align: right;
}

.footer-rtl {
  direction: rtl;
  text-align: right;
}

.footer-rtl .footer-col h5::after {
  left: auto;
  right: 0;
}

.footer-rtl .footer-links a:hover {
  transform: translateX(-2px);
}

.footer-rtl .footer-tagline {
  text-align: left;
}


/* --- home.css --- */
.hero-slideshow {
  position: relative;
  overflow: hidden;
  min-height: 460px;
}

.slide {
  display: none;
  position: relative;
  min-height: 460px;
  padding: 70px 24px 90px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-size: cover !important;
  background-position: center !important;
}

.slide-1 {
  background: linear-gradient(135deg, rgba(10,18,28,.82), rgba(18,38,54,.88)), url('../img/slides/slide1.jpg') center/cover no-repeat;
}
.slide-2 {
  background: linear-gradient(135deg, rgba(18,8,8,.80), rgba(45,12,12,.88)), url('../img/slides/slide2.jpg') center/cover no-repeat;
}
.slide-3 {
  background: linear-gradient(135deg, rgba(8,18,8,.78), rgba(15,40,18,.88)), url('../img/slides/slide3.jpg') center/cover no-repeat;
}

.slide.active {
  display: flex;
  animation: slideIn .6s cubic-bezier(.4,0,.2,1);
}

@keyframes slideIn {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

.slide-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.slide-pattern-1 {
  background-image: repeating-linear-gradient(45deg, rgba(201,168,76,.04) 0, rgba(201,168,76,.04) 1px, transparent 0, transparent 50%);
  background-size: 20px 20px;
}
.slide-pattern-2 {
  background-image: repeating-linear-gradient(-45deg, rgba(201,100,76,.05) 0, rgba(201,100,76,.05) 1px, transparent 0, transparent 40%);
  background-size: 16px 16px;
}
.slide-pattern-3 {
  background-image: repeating-linear-gradient(90deg, rgba(76,201,76,.04) 0, rgba(76,201,76,.04) 1px, transparent 0, transparent 30%);
  background-size: 12px 12px;
}

.slide-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
}

.slide-tag {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9a84c;
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.3);
  padding: 4px 14px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 16px;
}

.slide-content h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2rem;
  color: #fff;
  letter-spacing: -.5px;
  line-height: 1.2;
  margin-bottom: 14px;
}

.slide-content p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 28px;
  line-height: 1.7;
}

.slide-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.slide-btn-primary,
.slide-btn-outline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .3px;
  border-radius: 25px;
  text-decoration: none;
  transition: all .2s;
}

.slide-btn-primary {
  background: #c9a84c;
  color: #122636;
  padding: 11px 28px;
}
.slide-btn-primary:hover {
  background: #e0bf65;
  transform: translateY(-2px);
  color: #122636;
}
.slide-btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.4);
  padding: 9px 26px;
}
.slide-btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
  color: #fff;
}

.slide-stats {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 32px;
  margin-top: 36px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px;
}
.slide-stat { text-align: center; }
.slide-stat .sn {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: #c9a84c;
  letter-spacing: -.5px;
}
.slide-stat .sl {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 300;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background .2s;
  z-index: 10;
}
.hero-arrow:hover {
  background: rgba(201,168,76,.3);
  border-color: #c9a84c;
}
.hero-prev { left: 16px; }
.hero-next { right: 16px; }

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: all .3s;
  border: none;
  padding: 0;
}
.hero-dot.active {
  background: #c9a84c;
  width: 24px;
  border-radius: 4px;
}

.ad-728 { height: 90px; }

.locked-info-newsletter {
  background: #fff8e1;
  border-color: #f0c040;
}

.grid-switcher-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0ece6;
}
.results-count {
  font-family: var(--font-body);
  font-size: .82rem;
  color: #64748b;
  font-weight: 300;
  min-height: 18px;
}
.grid-switcher {
  display: flex;
  align-items: center;
  gap: 5px;
}
.grid-switcher-label {
  font-family: var(--font-body);
  font-size: .72rem;
  color: #b0a898;
  margin-right: 2px;
}
.grid-btn {
  border: 1.5px solid #e2ddd6;
  background: #fff;
  color: #94a3b8;
  border-radius: 7px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all .15s;
  font-family: var(--font-body);
  font-weight: 700;
}
.grid-btn.active {
  background: #1b3a4b;
  color: #fff;
  border-color: #1b3a4b;
}

.home-info-section {
  background: var(--col-white, #fff);
  border-top: 1px solid #e2ddd6;
}
.home-section-kicker {
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9a84c;
}
.home-section-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.4rem;
  color: #0f1923;
  margin-top: 6px;
}
.home-benefit-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: #0f1923;
}
.home-benefit-text {
  font-family: var(--font-body);
  font-weight: 300;
  color: #64748b;
  font-size: .88rem;
}
.home-trust-strip { border-top: 1px solid #e2ddd6; }
.home-trust-num {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 800;
  color: #1b3a4b;
  letter-spacing: -1px;
}
.home-trust-num-green { color: #0d7a55; }
.home-trust-label {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 300;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .8px;
}

html[lang="ar"] .hero-slideshow *,
body.lang-ar .hero-slideshow * {
  font-family: var(--font-ar, 'Cairo', sans-serif) !important;
  letter-spacing: 0 !important;
}
html[lang="ar"] .slide-content,
body.lang-ar .slide-content {
  direction: rtl;
  text-align: center;
}
html[lang="ar"] .hero-prev,
body.lang-ar .hero-prev {
  left: auto;
  right: 16px;
}
html[lang="ar"] .hero-next,
body.lang-ar .hero-next {
  right: auto;
  left: 16px;
}



/* ==========================================================
   PRODUCT / STOCKLOT LISTING FINAL FIX
   Wichtig: diese Regeln gehören zur Startseite, nicht nur style.css.
   ========================================================== */

#productsGrid {
  max-width: 1180px;
  margin: 0 auto;
  align-items: stretch;
}

#productsGrid > [class*="col-"] {
  display: flex;
  min-width: 0;
}

#productsGrid .pcard-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  width: 100%;
}

#productsGrid .pcard {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e8edf2;
  height: 100%;
  width: 100%;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: 0 4px 16px rgba(15,25,35,.045);
}

#productsGrid .pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15,25,35,.12);
  border-color: #c9a84c;
}

#productsGrid .pcard-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f2ed;
}

#productsGrid .pcard-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .3s ease;
}

#productsGrid .pcard:hover .pcard-img {
  transform: scale(1.045);
}

#productsGrid .pcard-status-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  color: #fff;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
}

#productsGrid .pcard-cat-tag {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  max-width: 54%;
  background: rgba(15,25,35,.72);
  color: rgba(255,255,255,.94);
  font-family: var(--font-body, 'Lato', sans-serif);
  font-size: .68rem;
  padding: 4px 7px;
  border-radius: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#productsGrid .pcard-lot-tag {
  position: absolute;
  bottom: 9px;
  left: 9px;
  z-index: 3;
  background: #1b3a4b;
  color: #c9a84c;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-weight: 900;
  font-size: .62rem;
  letter-spacing: 1.2px;
  padding: 3px 8px;
  border-radius: 5px;
}

#productsGrid .pcard-body {
  padding: 14px 15px 16px;
  background: #fff;
}

#productsGrid .pcard-nr {
  font-family: var(--font-body, 'Lato', sans-serif);
  font-weight: 300;
  font-size: .75rem;
  color: #94a3b8;
  letter-spacing: .9px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

#productsGrid .pcard-name {
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-weight: 800;
  font-size: .98rem;
  color: #0f1923;
  line-height: 1.3;
  margin-bottom: 10px;
  min-height: 2.55em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#productsGrid .pcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

#productsGrid .pcard-price-val {
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-weight: 900;
  font-size: 1.02rem;
  color: #0d7a55;
}

#productsGrid .pcard-price-lock {
  font-family: var(--font-body, 'Lato', sans-serif);
  font-size: .82rem;
  font-weight: 700;
  color: #c9a84c;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#productsGrid .pcard-sqm {
  font-family: var(--font-body, 'Lato', sans-serif);
  font-weight: 300;
  font-size: .82rem;
  color: #64748b;
  white-space: nowrap;
}

#productsGrid .pcard-lot {
  border-top: 2px dashed #1b3a4b;
}

#productsGrid .pcard-varbar {
  width: 100%;
  height: 4px;
  background: #e8edf2;
  border-radius: 3px;
  margin: 2px 0 9px;
  overflow: hidden;
}

#productsGrid .pcard-varbar-fill {
  height: 100%;
  background: #0d7a55;
  border-radius: 3px;
}

#productsGrid .pcard-vars {
  font-family: var(--font-body, 'Lato', sans-serif);
  font-size: .76rem;
  font-weight: 300;
  color: #94a3b8;
  margin-top: 6px;
}

/* 5-Spalten Bootstrap-Ergänzung */
@media (min-width: 1200px) {
  #productsGrid .col-xl-20p {
    flex: 0 0 auto;
    width: 20%;
  }
}

/* verhindert alte Bildregeln aus anderen CSS-Dateien */
#productsGrid img {
  max-width: none;
}

/* ==========================================================
   HOME SECTIONS FINAL PROFESSIONAL STYLE
   ========================================================== */

.home-info-section {
  background:
    radial-gradient(circle at 10% 0%, rgba(201,168,76,.10), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  padding: 84px 0 !important;
}

.home-info-section .container {
  max-width: 1180px !important;
}

.home-section-kicker {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff7df !important;
  border: 1px solid rgba(201,168,76,.35) !important;
  color: #b78b22 !important;
  border-radius: 999px !important;
  padding: 7px 15px !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.home-section-title {
  color: #0f1923 !important;
  font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin-bottom: 14px !important;
}

.home-info-section .row.text-center.g-4:first-of-type {
  margin-top: 38px !important;
}

.home-info-section .row.text-center.g-4:first-of-type .col-md-3 {
  background: #ffffff !important;
  color: #0f1923 !important;
  border: 1px solid #e8edf2 !important;
  border-radius: 22px !important;
  padding: 30px 22px !important;
  box-shadow: 0 14px 34px rgba(15,25,35,.075) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.home-info-section .row.text-center.g-4:first-of-type .col-md-3:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(201,168,76,.55) !important;
  box-shadow: 0 22px 44px rgba(15,25,35,.12) !important;
}

.info-icon-wrap {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 18px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg,#1b3a4b,#254d63) !important;
  color: #c9a84c !important;
  box-shadow: 0 14px 30px rgba(27,58,75,.16) !important;
}

.info-icon-green {
  background: linear-gradient(135deg,#0d7a55,#19a06b) !important;
  color: #fff !important;
}

.home-benefit-title {
  color: #0f1923 !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}

.home-info-section p {
  color: #64748b !important;
  font-size: .94rem !important;
  line-height: 1.75 !important;
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.home-info-section hr {
  margin: 58px 0 26px !important;
  border-color: #e8edf2 !important;
  opacity: 1 !important;
}

/* Statistik-Zeile gezielt professionell */
.home-info-section hr + .row.text-center.g-4 .col-md-3,
.home-info-section .stats-row .col-md-3 {
  background: linear-gradient(135deg,#ffffff,#fbfcfe) !important;
  border: 1px solid #e8edf2 !important;
  border-radius: 20px !important;
  padding: 26px 18px !important;
  box-shadow: 0 12px 28px rgba(15,25,35,.06) !important;
}

.home-info-section hr + .row.text-center.g-4 .col-md-3 h3,
.home-info-section hr + .row.text-center.g-4 .col-md-3 .h2,
.home-info-section .stats-row h3,
.home-info-section .stats-row .h2 {
  color: #0f1923 !important;
  font-weight: 900 !important;
  font-size: 2rem !important;
  margin-bottom: 8px !important;
}

.home-info-section hr + .row.text-center.g-4 .col-md-3:nth-child(4) h3,
.home-info-section hr + .row.text-center.g-4 .col-md-3:nth-child(4) .h2 {
  color: #0d7a55 !important;
}

.home-info-section hr + .row.text-center.g-4 .col-md-3 small,
.home-info-section hr + .row.text-center.g-4 .col-md-3 span,
.home-info-section .stats-row small,
.home-info-section .stats-row span {
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 1.1px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
}

/* Preise & Pakete */
.home-info-section + section {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 72px 24px !important;
}

.home-info-section + section h2 {
  color: #0f1923 !important;
  font-size: clamp(1.7rem, 3vw, 2.35rem) !important;
  font-weight: 900 !important;
}


/* --- product.css --- */
:root { --status-color: <?= $statusColor ?>; }
/* ── Raleway + Lato in Produktseite ── */
.pd-wrap { max-width:1400px; margin:0 auto; padding:32px 24px; }
.pd-breadcrumb { font-family:'Lato',sans-serif; font-size:.8rem; font-weight:300; color:#888; margin-bottom:24px; }
.pd-breadcrumb a { color:var(--primary); text-decoration:none; }
.pd-breadcrumb span { margin:0 6px; }

.pd-gallery { position:relative; }
.pd-main-img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; cursor:zoom-in; box-shadow:0 8px 40px rgba(0,0,0,.13); transition:transform .3s; }
.pd-main-img:hover { transform:scale(1.01); }
.pd-thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pd-thumb { width:72px; height:58px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; transition:border-color .2s,transform .2s; }
.pd-thumb:hover,.pd-thumb.active { border-color:var(--status-color); transform:scale(1.05); }

.pd-status-bar { display:inline-flex; align-items:center; gap:8px; background:var(--status-color); color:#fff; padding:5px 16px; border-radius:20px; font-family:'Raleway',sans-serif; font-size:.72rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:16px; }
.pd-status-bar .dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.7); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }

.pd-artnr { font-family:'Lato',sans-serif; font-size:.72rem; font-weight:300; color:#aaa; letter-spacing:2.5px; text-transform:uppercase; }
.pd-title { font-family:'Raleway',sans-serif; font-size:2rem; font-weight:800; color:#1a252f; line-height:1.15; margin:6px 0 14px; letter-spacing:-.5px; }
.pd-desc { font-family:'Lato',sans-serif; font-weight:300; color:#555; font-size:.95rem; line-height:1.75; margin-bottom:24px; }

.pd-price-box { background:linear-gradient(135deg,#1a5276,#2980b9); border-radius:14px; padding:22px 28px; color:#fff; margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 6px 24px rgba(26,82,118,.3); }
.pd-price-box .price-label { font-family:'Lato',sans-serif; font-size:.78rem; font-weight:300; opacity:.85; letter-spacing:.3px; }
.pd-price-box .price-value { font-family:'Raleway',sans-serif; font-size:2.2rem; font-weight:800; letter-spacing:-1px; }
.pd-price-box .price-unit { font-family:'Lato',sans-serif; font-size:.72rem; font-weight:300; opacity:.7; }

.pd-locked { background:#f8f9fa; border:2px dashed #ddd; border-radius:14px; padding:28px; text-align:center; margin-bottom:24px; }
.pd-locked .lock-icon { font-size:2.5rem; color:#ccc; margin-bottom:12px; }
.pd-locked h5 { font-family:'Raleway',sans-serif; font-weight:800; color:#333; margin-bottom:8px; letter-spacing:-.3px; }
.pd-locked p { font-family:'Lato',sans-serif; font-weight:300; color:#888; font-size:.9rem; margin-bottom:16px; }
.pd-locked .btn-unlock { background:#1a5276; color:#fff; border:none; padding:10px 28px; border-radius:25px; font-family:'Raleway',sans-serif; font-weight:700; font-size:.9rem; text-decoration:none; letter-spacing:.3px; }
.pd-locked .btn-unlock:hover { background:#2980b9; color:#fff; }

.pd-cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.btn-cta-primary { background:linear-gradient(135deg,#1e8449,#27ae60); color:#fff; border:none; padding:13px 28px; border-radius:30px; font-family:'Raleway',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:.3px; display:inline-flex; align-items:center; gap:8px; text-decoration:none; box-shadow:0 4px 16px rgba(30,132,73,.3); transition:all .2s; }
.btn-cta-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(30,132,73,.4); color:#fff; }
.btn-cta-wa { background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; border:none; padding:13px 28px; border-radius:30px; font-family:'Raleway',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:.3px; display:inline-flex; align-items:center; gap:8px; text-decoration:none; box-shadow:0 4px 16px rgba(37,211,102,.3); transition:all .2s; }
.btn-cta-wa:hover { transform:translateY(-2px); color:#fff; }
.btn-cta-outline { background:transparent; color:#1a5276; border:2px solid #1a5276; padding:11px 22px; border-radius:30px; font-family:'Raleway',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.3px; display:inline-flex; align-items:center; gap:7px; text-decoration:none; transition:all .2s; }
.btn-cta-outline:hover { background:#1a5276; color:#fff; }
.btn-cta-danger { background:transparent; color:#c0392b; border:2px solid #c0392b; padding:11px 22px; border-radius:30px; font-family:'Raleway',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.3px; display:inline-flex; align-items:center; gap:7px; text-decoration:none; transition:all .2s; }
.btn-cta-danger:hover { background:#c0392b; color:#fff; }

.pd-specs { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-bottom:28px; }
.spec-chip { background:#fff; border:1px solid #e8ecf0; border-radius:12px; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; transition:box-shadow .2s; }
.spec-chip:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); }
.spec-chip i { font-size:1rem; color:#2980b9; margin-top:3px; flex-shrink:0; }
.spec-chip .spec-label { font-family:'Lato',sans-serif; font-size:.68rem; font-weight:700; color:#aaa; text-transform:uppercase; letter-spacing:1px; display:block; }
.spec-chip .spec-val { font-family:'Lato',sans-serif; font-size:.9rem; font-weight:400; color:#1a252f; }

.pd-inquiry { background:#fff; border-radius:16px; padding:32px; box-shadow:0 4px 24px rgba(0,0,0,.07); border:1px solid #f0f0f0; }
.pd-inquiry h4 { font-family:'Raleway',sans-serif; font-size:1.15rem; font-weight:800; margin-bottom:4px; color:#1a252f; letter-spacing:-.3px; }
.pd-inquiry .subtitle { font-family:'Lato',sans-serif; font-weight:300; color:#888; font-size:.83rem; margin-bottom:24px; }
.form-floating-custom { position:relative; margin-bottom:16px; }
.form-floating-custom input,.form-floating-custom textarea { border:1.5px solid #e0e0e0; border-radius:10px; padding:12px 16px; width:100%; font-family:'Lato',sans-serif; font-size:.9rem; font-weight:400; transition:border-color .2s; background:#fafafa; outline:none; }
.form-floating-custom input:focus,.form-floating-custom textarea:focus { border-color:#2980b9; background:#fff; }
.form-floating-custom label { font-family:'Lato',sans-serif; font-size:.78rem; font-weight:700; color:#888; display:block; margin-bottom:5px; letter-spacing:.3px; }
.btn-submit-inquiry { background:linear-gradient(135deg,#1a5276,#2980b9); color:#fff; border:none; width:100%; padding:14px; border-radius:30px; font-family:'Raleway',sans-serif; font-size:.95rem; font-weight:800; letter-spacing:.8px; cursor:pointer; transition:all .2s; box-shadow:0 4px 16px rgba(26,82,118,.3); }
.btn-submit-inquiry:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,82,118,.4); }

.inquiry-success { background:linear-gradient(135deg,#1e8449,#27ae60); color:#fff; border-radius:12px; padding:20px; text-align:center; }
.inquiry-success i { font-size:2rem; display:block; margin-bottom:8px; }
.inquiry-success strong { font-family:'Raleway',sans-serif; font-weight:800; }
.inquiry-success span { font-family:'Lato',sans-serif; font-weight:300; }

.pd-share-box { background:#f8f9fa; border-radius:12px; padding:16px 20px; border:1px solid #e8ecf0; margin-top:16px; }
.pd-share-box span { font-family:'Lato',sans-serif; }
.share-url-input { font-family:'Lato',sans-serif; font-size:.78rem; font-weight:300; background:#fff; border:1px solid #ddd; border-radius:8px; padding:8px 12px; width:100%; color:#555; }

@media (min-width:992px) { .pd-sticky { position:sticky; top:20px; } }

/* --- stocklot.css --- */
/* ==========================================================
   STOCKLOT DETAIL PAGE — PROFESSIONAL LAYOUT
   ========================================================== */

.sl-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 56px;
  font-family: var(--font-body, 'Lato', sans-serif);
  color: #0f1923;
}

.sl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #64748b;
  font-size: .86rem;
  margin: 6px 0 18px;
}

.sl-breadcrumb a {
  color: #12649a;
  text-decoration: none;
  font-weight: 700;
}

.sl-breadcrumb a:hover {
  color: #c9a84c;
}

/* Hero */
.sl-hero {
  position: relative;
  min-height: 360px;
  border-radius: 26px;
  overflow: hidden;
  background: #0f1923;
  display: flex;
  align-items: flex-end;
  padding: 34px;
  margin-bottom: 30px;
  box-shadow: 0 22px 54px rgba(15,25,35,.16);
}

.sl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,25,35,.88) 0%, rgba(15,25,35,.60) 42%, rgba(15,25,35,.16) 100%),
    linear-gradient(0deg, rgba(15,25,35,.74), transparent 55%);
  z-index: 1;
}

.sl-hero-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 0;
}

.sl-hero > div {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.sl-lot-nr {
  display: inline-flex;
  align-items: center;
  background: rgba(201,168,76,.17);
  color: #e6c56b;
  border: 1px solid rgba(201,168,76,.34);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 13px;
}

.sl-lot-title {
  color: #fff;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -1px;
  margin: 0 0 17px;
  text-shadow: 0 8px 26px rgba(0,0,0,.3);
}

.sl-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.sl-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: .78rem;
  font-weight: 800;
  background: rgba(255,255,255,.12);
  color: #fff;
  backdrop-filter: blur(6px);
}

.sl-badge-lot {
  background: rgba(27,58,75,.86);
  color: #fff;
}

.sl-badge-div {
  background: rgba(13,122,85,.9);
  color: #fff;
}

.sl-badge-nodiv {
  background: rgba(185,28,28,.86);
  color: #fff;
}

/* Main grid */
.sl-wrap > .row {
  align-items: flex-start;
}

.sl-wrap .col-lg-7,
.sl-wrap .col-lg-5 {
  min-width: 0;
}

/* Availability */
.sl-progress-wrap,
.sl-variants-wrap,
.sl-price-box,
.sl-locked,
.sl-inquiry,
.sl-share-box,
.sl-desc-box {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15,25,35,.06);
}

.sl-progress-wrap {
  padding: 22px;
  margin-bottom: 18px;
}

.sl-progress-title,
.sl-variants-title {
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: .86rem;
  font-weight: 900;
  color: #0f1923;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sl-bar-bg {
  height: 14px;
  background: #e8edf2;
  border-radius: 999px;
  overflow: hidden;
}

.sl-bar-avail {
  height: 100%;
  background: linear-gradient(90deg,#0d7a55,#21a971);
  border-radius: 999px;
}

.sl-bar-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.sl-bar-label {
  font-size: .88rem;
}

/* Stats */
.sl-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.sl-stat {
  background: linear-gradient(135deg,#0f1923,#1b3a4b);
  color: #fff;
  border-radius: 16px;
  padding: 18px 15px;
  box-shadow: 0 12px 28px rgba(15,25,35,.12);
}

.sl-stat-val {
  color: #c9a84c;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 7px;
}

.sl-stat-lbl {
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Variants */
.sl-variants-wrap {
  padding: 22px;
  margin-bottom: 18px;
}

.sl-variants-sub {
  color: #64748b;
  font-size: .88rem;
  margin: -6px 0 14px;
}

.sl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
}

.sl-table thead th {
  background: #f8fafc;
  color: #0f1923;
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
  border-bottom: 1px solid #e8edf2;
  padding: 11px 10px;
  white-space: nowrap;
}

.sl-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
  color: #334155;
  font-size: .9rem;
}

.sl-table tbody tr:hover {
  background: #fbfcfe;
}

.sl-table .sold-row {
  opacity: .55;
}

.var-thumb {
  width: 54px !important;
  height: 42px !important;
  object-fit: cover !important;
  border-radius: 9px;
  border: 1px solid #e8edf2;
  cursor: zoom-in;
  display: block;
}

.var-thumb-empty {
  width: 54px;
  height: 42px;
  border-radius: 9px;
  border: 1px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

.color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  border: 1px solid rgba(15,25,35,.14);
  vertical-align: -2px;
}

.var-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}

.vs-avail {
  background: #e6f5ef;
  color: #0d7a55;
}

.vs-res {
  background: #fff3d8;
  color: #b7791f;
}

.vs-sold {
  background: #fef2f2;
  color: #b91c1c;
}

/* Specs */
.sl-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.sl-spec-chip {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 8px 22px rgba(15,25,35,.045);
}

.sl-spec-chip > i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f8fafc;
  color: #1b3a4b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sl-spec-label {
  display: block;
  color: #94a3b8;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 900;
  margin-bottom: 4px;
}

.sl-spec-val {
  display: block;
  color: #0f1923;
  font-weight: 800;
  line-height: 1.35;
}

/* Right sticky area */
.sl-wrap .col-lg-5 > div[style*="sticky"] {
  position: sticky !important;
  top: 96px !important;
}

.sl-price-box {
  padding: 24px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg,#0f1923,#1b3a4b);
  color: #fff;
}

.sl-price-lbl {
  color: rgba(255,255,255,.70);
  font-size: .82rem;
  margin-bottom: 6px;
}

.sl-price-val {
  color: #c9a84c;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: 2.45rem;
  font-weight: 900;
  line-height: 1;
}

.sl-price-unit {
  color: rgba(255,255,255,.8);
  margin-top: 5px;
}

.sl-min-order {
  margin-top: 12px;
  color: rgba(255,255,255,.82);
  font-size: .92rem;
}

.sl-locked {
  padding: 26px;
  text-align: center;
  margin-bottom: 14px;
}

.sl-locked h5 {
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-weight: 900;
  color: #0f1923;
}

.sl-locked p {
  color: #64748b;
}

.btn-unlock,
.btn-sl-prim,
.btn-sl-wa,
.btn-sl-out,
.btn-sl-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: .86rem;
  font-weight: 900;
  padding: 9px 17px;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}

.btn-unlock,
.btn-sl-prim,
.btn-sl-submit {
  background: linear-gradient(135deg,#c9a84c,#d9a441);
  color: #0f1923 !important;
}

.btn-sl-wa {
  background: #18a765;
  color: #fff !important;
}

.btn-sl-out {
  background: #fff;
  color: #1b3a4b !important;
  border: 1px solid #dbe3ea;
}

.btn-unlock:hover,
.btn-sl-prim:hover,
.btn-sl-wa:hover,
.btn-sl-out:hover,
.btn-sl-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.sl-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.sl-cta-row > * {
  flex: 1 1 auto;
}

.sl-share-box {
  padding: 15px;
}

.share-url {
  width: 100%;
  border: 1px solid #dbe3ea;
  border-radius: 9px;
  padding: 9px 10px;
  font-size: .82rem;
}

/* Inquiry */
.sl-inquiry {
  padding: 24px;
}

.sl-inquiry h4 {
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: 1.2rem;
  font-weight: 900;
  margin-bottom: 8px;
  color: #0f1923;
}

.sl-inquiry .sub {
  color: #64748b;
  font-size: .88rem;
  margin-bottom: 16px;
}

.sl-form-group {
  margin-bottom: 10px;
}

.sl-form-group label {
  display: block;
  color: #1b3a4b;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 6px;
}

.sl-form-group input,
.sl-form-group textarea {
  width: 100%;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  font-size: .9rem;
}

.sl-form-group input:focus,
.sl-form-group textarea:focus {
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201,168,76,.16);
}

.btn-sl-submit {
  width: 100%;
  margin-top: 10px;
}

.inq-success {
  background: #e6f5ef;
  border: 1px solid #b9e7d3;
  color: #0d7a55;
  border-radius: 12px;
  padding: 14px;
}

/* Description override for inline block */
.sl-wrap div[style*="background:#fff"][style*="Beschreibung"] {
  border-radius: 18px !important;
  border: 1px solid #e8edf2 !important;
  box-shadow: 0 10px 30px rgba(15,25,35,.06) !important;
}

/* Lightbox */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,16,24,.92);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 34px;
}

.lb-overlay.active {
  display: flex;
}

.lb-img-wrap {
  max-width: min(1100px, 90vw);
  max-height: 76vh;
}

.lb-main-img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.lb-close,
.lb-arrow {
  position: fixed;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.lb-close {
  top: 22px;
  right: 22px;
}

.lb-prev {
  left: 22px;
}

.lb-next {
  right: 22px;
}

.lb-label {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 800;
}

.lb-thumbs {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  max-width: 90vw;
  overflow-x: auto;
}

.lb-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 7px;
  opacity: .55;
  border: 2px solid transparent;
  cursor: pointer;
}

.lb-thumb.active {
  opacity: 1;
  border-color: #c9a84c;
}


/* Stocklot Gallery Thumbnails */
.sl-gallery-strip{display:flex;gap:10px;overflow-x:auto;padding:0 2px 18px;margin:-12px 0 18px;scrollbar-width:thin}
.sl-gallery-thumb{flex:0 0 94px;width:94px;height:70px;border:2px solid transparent;border-radius:12px;padding:0;overflow:hidden;background:#fff;cursor:pointer;box-shadow:0 8px 18px rgba(15,25,35,.08);opacity:.72;transition:border-color .18s ease,opacity .18s ease,transform .18s ease}
.sl-gallery-thumb:hover,.sl-gallery-thumb.active{opacity:1;border-color:#c9a84c;transform:translateY(-2px)}
.sl-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}


/* --- auth-login.css --- */
/* auth-login.css */
.login-page{
  padding:46px 22px 62px;
  background:
    radial-gradient(circle at 8% 0%, rgba(201,168,76,.10), transparent 26%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.login-shell{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(380px,.95fr) minmax(420px,.82fr);
  gap:30px;
  align-items:stretch;
}

.login-info-panel{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  padding:34px;
  color:#fff;
  background:
    radial-gradient(circle at right top, rgba(201,168,76,.28), transparent 35%),
    linear-gradient(135deg,#102335,#1b3a4b);
  border-bottom:3px solid #c9a84c;
  box-shadow:0 22px 55px rgba(15,25,35,.16);
}

.login-info-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 9px, transparent 9px 18px);
  pointer-events:none;
}

.login-info-panel>*{
  position:relative;
  z-index:1;
}

.login-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(201,168,76,.18);
  border:1px solid rgba(201,168,76,.35);
  color:#f1d27a;
  font-family:'Raleway',sans-serif;
  font-size:.78rem;
  font-weight:800;
  margin-bottom:18px;
}

.login-info-panel h1{
  font-family:'Raleway',sans-serif;
  font-size:clamp(2rem,3.4vw,3rem);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.7px;
  color:#fff;
  margin:0 0 14px;
}

.login-lead{
  max-width:680px;
  color:rgba(255,255,255,.78);
  font-family:'Lato',sans-serif;
  font-size:1rem;
  line-height:1.7;
  margin:0 0 24px;
}

.login-visual{
  position:relative;
  height:155px;
  border-radius:20px;
  margin:0 0 24px;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.13);
  overflow:hidden;
}

.login-roll{
  position:absolute;
  bottom:32px;
  width:94px;
  height:46px;
  border-radius:999px;
  box-shadow:0 18px 28px rgba(0,0,0,.25);
}

.login-roll-1{
  left:32px;
  background:linear-gradient(90deg,#e8dcc5,#9d7841 48%,#f4ead3);
  transform:rotate(-8deg);
}

.login-roll-2{
  left:130px;
  bottom:52px;
  background:linear-gradient(90deg,#dce3ec,#627284 48%,#eff4f8);
  transform:rotate(6deg);
}

.login-roll-3{
  right:44px;
  background:linear-gradient(90deg,#1d4759,#0f2835 48%,#527f93);
  transform:rotate(-4deg);
}

.login-access-card{
  position:absolute;
  left:35px;
  right:35px;
  bottom:18px;
  min-height:42px;
  border-radius:999px;
  background:linear-gradient(90deg,#c9a84c,#e0bf65);
  color:#0f1923;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:'Raleway',sans-serif;
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}

.login-access-card span{
  background:#0f1923;
  color:#fff;
  border-radius:999px;
  padding:5px 9px;
  font-weight:900;
  font-size:.72rem;
}

.login-benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.login-benefit{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:12px;
  align-items:start;
  padding:15px;
  border-radius:17px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(8px);
}

.login-benefit span{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#c9a84c;
  color:#0f1923;
  font-size:1.15rem;
}

.login-benefit strong{
  display:block;
  color:#fff;
  font-family:'Raleway',sans-serif;
  font-size:.98rem;
  font-weight:900;
  margin:0 0 4px;
}

.login-benefit small{
  color:rgba(255,255,255,.68);
  font-family:'Lato',sans-serif;
  font-size:.82rem;
  line-height:1.45;
}

.login-form-panel{
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-card{
  width:100%;
  max-width:560px;
  background:#fff;
  border:1px solid #e2ddd6;
  border-top:3px solid #c9a84c;
  border-radius:22px;
  padding:30px;
  box-shadow:0 18px 45px rgba(15,25,35,.10);
}

.login-card-head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:24px;
}

.login-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff4cf;
  color:#0f1923;
  font-size:1.55rem;
  flex-shrink:0;
}

.login-card-head h2{
  font-family:'Raleway',sans-serif;
  color:#0f1923;
  font-size:1.65rem;
  font-weight:900;
  margin:0 0 5px;
}

.login-card-head p{
  color:#64748b;
  font-family:'Lato',sans-serif;
  margin:0;
  font-size:.92rem;
}

.login-alert{
  display:flex;
  align-items:center;
  gap:9px;
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:16px;
  font-weight:800;
  font-size:.9rem;
}

.login-success{
  color:#0d7a55;
  background:#e6f5ef;
  border:1px solid #b9e7d3;
}

.login-error{
  color:#b91c1c;
  background:#fef2f2;
  border:1px solid #fecaca;
}

.login-form label{
  display:block;
  color:#1b3a4b;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.65px;
  margin:0 0 6px;
}

.login-form input{
  width:100%;
  border:1.5px solid #d8d3cc;
  border-radius:12px;
  min-height:46px;
  background:#faf7f2;
  padding:10px 13px;
  outline:none;
  margin-bottom:15px;
  font-family:'Lato',sans-serif;
}

.login-form input:focus{
  border-color:#c9a84c;
  box-shadow:0 0 0 3px rgba(201,168,76,.15);
  background:#fff;
}

.login-submit{
  width:100%;
  border:0;
  border-radius:999px;
  background:#c9a84c;
  color:#0f1923;
  font-family:'Raleway',sans-serif;
  font-weight:900;
  min-height:48px;
  padding:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all .18s ease;
}

.login-submit:hover{
  background:#e0bf65;
  transform:translateY(-1px);
}

.login-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}

.login-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  border-radius:999px;
  border:1px solid #e2ddd6;
  background:#fff;
  color:#0f1923;
  font-weight:900;
  text-decoration:none;
  font-size:.84rem;
}

.login-actions a:hover{
  border-color:#c9a84c;
  background:#fff8df;
}

.login-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:16px;
  padding:13px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e4eaf0;
  color:#64748b;
  font-size:.84rem;
  line-height:1.5;
}

.login-note i{
  color:#c9a84c;
  margin-top:2px;
}


/* --- buyer-register.css --- */
/* buyer-register.css */
.buyer-register-page{
  padding:46px 22px 62px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(201,168,76,.10), transparent 26%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 100%) !important;
}

.buyer-register-shell{
  max-width:1280px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:minmax(380px,.95fr) minmax(420px,.82fr) !important;
  gap:30px !important;
  align-items:stretch !important;
}

.buyer-register-info{
  position:relative !important;
  overflow:hidden !important;
  border-radius:26px !important;
  padding:34px !important;
  color:#fff !important;
  background:
    radial-gradient(circle at right top, rgba(201,168,76,.28), transparent 35%),
    linear-gradient(135deg,#102335,#1b3a4b) !important;
  border-bottom:3px solid #c9a84c !important;
  box-shadow:0 22px 55px rgba(15,25,35,.16) !important;
}

.buyer-register-info::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 9px, transparent 9px 18px);
  pointer-events:none;
}

.buyer-register-info>*{
  position:relative;
  z-index:1;
}

.buyer-info-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  background:rgba(201,168,76,.18) !important;
  border:1px solid rgba(201,168,76,.35) !important;
  color:#f1d27a !important;
  font-family:'Raleway',sans-serif !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  margin-bottom:18px !important;
}

.buyer-register-info h1{
  font-family:'Raleway',sans-serif !important;
  font-size:clamp(2rem,3.4vw,3rem) !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:-.7px !important;
  color:#fff !important;
  margin:0 0 14px !important;
}

.buyer-info-lead{
  max-width:680px !important;
  color:rgba(255,255,255,.78) !important;
  font-family:'Lato',sans-serif !important;
  font-size:1rem !important;
  line-height:1.7 !important;
  margin:0 0 24px !important;
}

.buyer-info-visual{
  position:relative !important;
  height:155px !important;
  border-radius:20px !important;
  margin:0 0 24px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  overflow:hidden !important;
}

.buyer-roll{
  position:absolute !important;
  bottom:32px !important;
  width:94px !important;
  height:46px !important;
  border-radius:999px !important;
  box-shadow:0 18px 28px rgba(0,0,0,.25) !important;
}

.buyer-roll-1{
  left:32px !important;
  background:linear-gradient(90deg,#e8dcc5,#9d7841 48%,#f4ead3) !important;
  transform:rotate(-8deg) !important;
}

.buyer-roll-2{
  left:130px !important;
  bottom:52px !important;
  background:linear-gradient(90deg,#dce3ec,#627284 48%,#eff4f8) !important;
  transform:rotate(6deg) !important;
}

.buyer-roll-3{
  right:44px !important;
  background:linear-gradient(90deg,#1d4759,#0f2835 48%,#527f93) !important;
  transform:rotate(-4deg) !important;
}

.buyer-price-card{
  position:absolute !important;
  left:35px !important;
  right:35px !important;
  bottom:18px !important;
  min-height:42px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#c9a84c,#e0bf65) !important;
  color:#0f1923 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-family:'Raleway',sans-serif !important;
  box-shadow:0 12px 24px rgba(0,0,0,.22) !important;
}

.buyer-price-card span{
  background:#0f1923 !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:5px 9px !important;
  font-weight:900 !important;
  font-size:.72rem !important;
}

.buyer-benefits-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

.buyer-benefit-box{
  display:grid !important;
  grid-template-columns:44px 1fr !important;
  gap:12px !important;
  align-items:start !important;
  padding:15px !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  backdrop-filter:blur(8px) !important;
}

.buyer-benefit-box span{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#c9a84c !important;
  color:#0f1923 !important;
  font-size:1.15rem !important;
}

.buyer-benefit-box h3{
  color:#fff !important;
  font-family:'Raleway',sans-serif !important;
  font-size:.98rem !important;
  font-weight:900 !important;
  margin:0 0 4px !important;
}

.buyer-benefit-box p{
  color:rgba(255,255,255,.68) !important;
  font-family:'Lato',sans-serif !important;
  font-size:.82rem !important;
  line-height:1.45 !important;
  margin:0 !important;
}

.buyer-info-note{
  display:flex !important;
  gap:10px !important;
  align-items:flex-start !important;
  margin-top:20px !important;
  padding:14px !important;
  border-radius:16px !important;
  background:rgba(201,168,76,.12) !important;
  border:1px solid rgba(201,168,76,.25) !important;
  color:rgba(255,255,255,.82) !important;
  font-size:.86rem !important;
  line-height:1.5 !important;
}

.buyer-register-form-area{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.buyer-form-card{
  width:100% !important;
  max-width:560px !important;
  background:#fff !important;
  border:1px solid #e2ddd6 !important;
  border-top:3px solid #c9a84c !important;
  border-radius:22px !important;
  padding:30px !important;
  box-shadow:0 18px 45px rgba(15,25,35,.10) !important;
}

.buyer-register-tabs{
  display:flex !important;
  gap:0 !important;
  margin-bottom:26px !important;
  border:1.5px solid #e2ddd6 !important;
  border-radius:13px !important;
  overflow:hidden !important;
  background:#fff !important;
}

.buyer-register-tabs>*{
  flex:1 !important;
  text-align:center !important;
  padding:13px 8px !important;
  font-family:'Raleway',sans-serif !important;
  font-weight:800 !important;
  font-size:.84rem !important;
  text-decoration:none !important;
}

.buyer-register-tabs .active{
  background:#0f1923 !important;
  color:#fff !important;
}

.buyer-register-tabs a{
  background:#faf7f2 !important;
  color:#0f1923 !important;
  border-left:1.5px solid #e2ddd6 !important;
}

.buyer-form-head{
  text-align:center !important;
  margin-bottom:22px !important;
}

.buyer-form-head h2{
  font-family:'Raleway',sans-serif !important;
  color:#0f1923 !important;
  font-size:1.55rem !important;
  font-weight:900 !important;
  margin:0 0 7px !important;
}

.buyer-form-head p{
  color:#64748b !important;
  font-family:'Lato',sans-serif !important;
  margin:0 !important;
  font-size:.92rem !important;
}

.buyer-register-form .form-label{
  font-family:'Lato',sans-serif !important;
  font-size:.8rem !important;
  font-weight:800 !important;
  color:#475569 !important;
  margin-bottom:6px !important;
}

.buyer-register-form .form-control{
  border:1.5px solid #d8d3cc !important;
  border-radius:10px !important;
  min-height:42px !important;
  background:#faf7f2 !important;
  font-family:'Lato',sans-serif !important;
}

.buyer-newsletter-box{
  display:flex !important;
  gap:10px !important;
  align-items:flex-start !important;
  padding:14px !important;
  border-radius:14px !important;
  background:#faf7f2 !important;
  border:1px solid #e8d49a !important;
  margin:14px 0 18px !important;
}

.buyer-newsletter-box input{
  margin-top:4px !important;
  flex-shrink:0 !important;
}

.buyer-newsletter-box label{
  color:#334155 !important;
  font-size:.88rem !important;
  line-height:1.45 !important;
}

.buyer-newsletter-box small{
  display:block !important;
  color:#64748b !important;
  margin-top:3px !important;
}

.btn-buyer-register{
  width:100% !important;
  border:0 !important;
  border-radius:999px !important;
  background:#c9a84c !important;
  color:#0f1923 !important;
  font-family:'Raleway',sans-serif !important;
  font-weight:900 !important;
  min-height:46px !important;
  padding:12px !important;
  cursor:pointer !important;
}

.buyer-login-hint{
  text-align:center !important;
  color:#64748b !important;
  margin:17px 0 0 !important;
  font-size:.88rem !important;
}

.buyer-login-hint a{
  color:#0f1923 !important;
  font-weight:900 !important;
}

@media(max-width:1080px){
  .buyer-register-shell{
    grid-template-columns:1fr !important;
  }
  .buyer-form-card{
    max-width:720px !important;
  }
}

@media(max-width:768px){
  .buyer-register-page{
    padding:28px 16px 44px !important;
  }
  .buyer-register-info,
  .buyer-form-card{
    border-radius:20px !important;
    padding:24px !important;
  }
  .buyer-benefits-grid{
    grid-template-columns:1fr !important;
  }
  .buyer-register-tabs{
    flex-direction:column !important;
  }
  .buyer-register-tabs a{
    border-left:0 !important;
    border-top:1.5px solid #e2ddd6 !important;
  }
}


/* --- cms-dynamic-sections.css --- */
.cms-dynamic-section{padding:48px 0;background:#fff}.cms-dynamic-section:nth-of-type(even){background:#f7f8fb}.cms-dynamic-section h2{font-size:clamp(26px,3vw,40px);font-weight:900;color:#102337;margin:0 0 14px}.cms-dynamic-lead{font-size:18px;color:#64748b;max-width:860px}.cms-dynamic-content{color:#334155;line-height:1.8;max-width:920px}.cms-dynamic-image{max-width:100%;border-radius:18px;margin:18px 0;box-shadow:0 12px 34px rgba(15,35,55,.10)}.cms-dynamic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}.cms-dynamic-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(15,35,55,.06)}.cms-dynamic-card strong{display:block;font-size:32px;color:#c9a84c;font-weight:900}.cms-dynamic-card h3{font-size:20px;font-weight:850;color:#102337}.cms-dynamic-card p{color:#64748b;line-height:1.7}.cms-dynamic-btn{display:inline-flex;margin-top:18px;background:#c9a84c;color:#102337!important;text-decoration:none;border-radius:999px;padding:12px 22px;font-weight:900}@media(max-width:900px){.cms-dynamic-grid{grid-template-columns:1fr}}

/* --- rtl.css --- */
/* RTL-Regeln sind absichtlich nur über html[dir='rtl'] / html[lang='ar'] aktiv. */

html[lang='ar'], body[dir='rtl'] {
  direction: rtl;
  text-align: right;
}
html[lang='ar'] body,
html[lang='ar'] body * {
  font-family: var(--font-ar, 'Cairo', sans-serif);
}
html[lang='ar'] .nav-links,
body[dir='rtl'] .nav-links {
  flex-direction: row-reverse;
}
html[lang='ar'] .nav-auth,
body[dir='rtl'] .nav-auth {
  flex-direction: row-reverse;
}
html[lang='ar'] .topbar-inner,
body[dir='rtl'] .topbar-inner {
  flex-direction: row-reverse;
}


/* --- style.css --- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=Lato:ital,wght@0,300;0,400;0,700;1,300&family=Cairo:wght@200;300;400;600;700&display=swap');

:root {
  --nav-bg: #1b3a4b;
  --nav-border: #c9a84c;
  --nav-link: rgba(255,255,255,.8);
  --nav-link-hover: #c9a84c;
  --nav-link-hover-bg: rgba(201,168,76,.18);
  --nav-height: 72px;
  --topbar-bg: #0f1923;
  --topbar-text: #8fa8b8;
  --reg-btn-bg: #c9a84c;
  --reg-btn-text: #0f1923;
  --logo-height: 40px;
  --logo-max-width: 220px;

  --col-night: #0f1923;
  --col-navy: #1b3a4b;
  --col-navy-mid: #254d63;
  --col-gold: #c9a84c;
  --col-gold-lt: #e8d49a;
  --col-gold-dk: #9a7c30;
  --col-emerald: #0d7a55;
  --col-emerald-lt: #e6f5ef;
  --col-amber: #e07b00;
  --col-amber-lt: #fff3e0;
  --col-crimson: #b91c1c;
  --col-crimson-lt: #fef2f2;
  --col-ivory: #faf7f2;
  --col-white: #ffffff;
  --col-slate: #64748b;
  --col-border: #e2ddd6;

  --font-head: 'Raleway', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-ar: 'Cairo', sans-serif;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-bold: 700;
  --fw-black: 800;

  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.82rem;
  --fs-nav: 1rem;

  --lh-body: 1.6;
  --lh-head: 1.2;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 50px;

  --layout-max-width: 1280px;
  --layout-padding: 24px;
}

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

body {
  background: var(--col-ivory);
  font-family: var(--font-body);
  font-weight: var(--fw-normal);
  font-size: var(--fs-body);
  color: #1e2a35;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ARABISCH / RTL */
html[lang="ar"],
html[dir="rtl"],
body.lang-ar,
body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] body,
html[dir="rtl"] body,
body.lang-ar,
body[dir="rtl"] {
  font-family: var(--font-ar);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] a,
html[lang="ar"] button,
html[lang="ar"] .btn,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] label,
html[lang="ar"] .nav-link-item,
html[lang="ar"] .nav-dd-item,
html[lang="ar"] .pcard-name,
html[lang="ar"] .pcard-nr,
html[lang="ar"] .card-title,
html[lang="ar"] .form-label,
html[lang="ar"] .admin-sidebar .nav-link,
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar h4,
body.lang-ar h5,
body.lang-ar h6,
body.lang-ar p,
body.lang-ar a,
body.lang-ar button,
body.lang-ar .btn,
body.lang-ar input,
body.lang-ar select,
body.lang-ar textarea,
body.lang-ar label,
body.lang-ar .nav-link-item,
body.lang-ar .nav-dd-item,
body.lang-ar .pcard-name,
body.lang-ar .pcard-nr,
body.lang-ar .card-title,
body.lang-ar .form-label,
body.lang-ar .admin-sidebar .nav-link {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

html[lang="ar"] .nav-logo,
body.lang-ar .nav-logo {
  margin-right: 0;
  margin-left: 28px;
}

html[lang="ar"] .nav-auth,
body.lang-ar .nav-auth {
  margin-left: 0;
  margin-right: 20px;
}

html[lang="ar"] .nav-dropdown,
body.lang-ar .nav-dropdown {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}

html[lang="ar"] .admin-sidebar,
body.lang-ar .admin-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid rgba(201,168,76,.15);
}

html[lang="ar"] .admin-content,
body.lang-ar .admin-content {
  margin-left: 0;
  margin-right: 240px;
}

html[lang="ar"] .admin-sidebar .nav-link:hover,
html[lang="ar"] .admin-sidebar .nav-link.active,
body.lang-ar .admin-sidebar .nav-link:hover,
body.lang-ar .admin-sidebar .nav-link.active {
  border-left: none;
  border-right: 3px solid var(--col-gold);
  padding-left: 20px;
  padding-right: 17px;
}

html[lang="ar"] .locked-info,
body.lang-ar .locked-info {
  border-left: 1px solid var(--col-gold-lt);
  border-right: 4px solid var(--col-gold);
  border-radius: var(--r-md) 0 0 var(--r-md);
}

/* LAYOUT */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: var(--layout-max-width) !important;
  padding-left: var(--layout-padding) !important;
  padding-right: var(--layout-padding) !important;
}

.row {
  --bs-gutter-x: 1rem;
}

/* TYPOGRAFIE */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  letter-spacing: -.3px;
  line-height: var(--lh-head);
  color: var(--col-night);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.3; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p,
button,
.btn,
input,
select,
textarea,
label {
  font-family: var(--font-body);
}

button,
.btn {
  font-size: var(--fs-sm);
}

input,
select,
textarea,
label {
  font-size: var(--fs-body);
}

.btn {
  font-weight: var(--fw-bold);
  letter-spacing: .3px;
}

a {
  color: var(--col-navy);
}

/* TOPBAR */
.topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid rgba(201,168,76,.15);
  padding: 7px 0;
}

.topbar-inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-notice {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: #e8c96a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8c96a;
  animation: blink 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes blink {
  0%,100% { opacity: .4; }
  50% { opacity: 1; }
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-right a {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  color: #8fa8b8;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .2s;
}

.topbar-right a:hover {
  color: #fff;
}

/* NAVBAR */
.main-nav {
  background: var(--nav-bg);
  border-bottom: 3px solid var(--nav-border);
  position: sticky;
  top: 0;
  z-index: 9000;
  overflow: visible;
  box-shadow: 0 4px 20px rgba(15,25,35,.4);
}

.nav-inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-padding);
  display: flex;
  align-items: center;
  height: var(--nav-height);
  position: relative;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 28px;
}

.nav-logo-icon {
  width: 34px;
  height: 34px;
  background: var(--col-gold);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--col-night);
  font-size: 1rem;
  flex-shrink: 0;
}

.nav-logo-text {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: -.3px;
  white-space: nowrap;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.nav-link-item {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-nav);
  color: var(--nav-link) !important;
  text-decoration: none !important;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .8px;
  text-transform: uppercase;
  transition: all .18s;
  white-space: nowrap;
}

.nav-link-item:hover,
.has-dropdown.open > .nav-link-item {
  background: var(--nav-link-hover-bg);
  color: var(--nav-link-hover) !important;
}

.nav-arrow {
  font-size: .68rem;
  transition: transform .2s;
}

.has-dropdown.open .nav-arrow {
  transform: rotate(180deg);
}

.has-dropdown {
  position: relative;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--nav-bg);
  border: 1px solid rgba(201,168,76,.2);
  border-top: 2px solid var(--nav-border);
  border-radius: var(--r-md);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  min-width: 220px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  z-index: 1000;
}

.has-dropdown.open .nav-dropdown {
  display: block;
}

.nav-dd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 400;
  color: var(--nav-dropdown-text, var(--nav-link));
  text-decoration: none;
  transition: all .15s;
}

.nav-dd-item:hover {
  background: rgba(201,168,76,.12);
  color: var(--nav-link-hover);
}

.nav-dd-item i,
.nav-dd-arrow {
  color: var(--nav-border);
}

.nav-auth {
  list-style: none;
  margin: 0 0 0 20px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-auth-link,
.nav-auth-logout,
.nav-btn-register {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: .88rem;
  letter-spacing: .5px;
  background: var(--reg-btn-bg);
  color: var(--reg-btn-text) !important;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  transition: all .18s;
  white-space: nowrap;
}

.nav-auth-link:hover,
.nav-auth-logout:hover,
.nav-btn-register:hover {
  background: #e0bf65;
  transform: translateY(-1px);
  color: var(--reg-btn-text) !important;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  color: #0f1923;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #222;
  border-radius: 2px;
  transition: all .3s;
}

.nav-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px,5px);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px,-5px);
}

/* MEGA-MENÜ */
.has-megamenu {
  position: static;
}

.megamenu {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  top: 0;
  background: #fff;
  border-top: 3px solid var(--nav-border);
  border-bottom: 2px solid var(--col-border);
  box-shadow: 0 20px 60px rgba(15,25,35,.18);
  z-index: 8999;
}

.has-megamenu.open .megamenu {
  display: block;
}

.mm-inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-padding);
  display: grid;
  grid-template-columns: 240px 1fr 160px;
  min-height: var(--mm-inner-height, 400px);
  max-height: 520px;
}

.mm-groups {
  border-right: 1px solid #f0ece6;
  padding: 10px 0;
  background: #faf7f2;
  overflow-y: auto;
}

.mm-group-link,
.mm-promo-link,
.mm-lot-item,
.mm-lot-all,
.mm-child-header {
  font-family: var(--font-head);
}

.mm-group-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--mm-group-pad, 11px 18px);
  text-decoration: none;
  color: #374151;
  font-weight: 700;
  font-size: var(--mm-group-fs, 1.05rem);
  transition: all .14s;
  border-left: 3px solid transparent;
  cursor: pointer;
}

.mm-group-link:hover,
.mm-group.active .mm-group-link {
  background: #fff;
  color: var(--col-navy);
  border-left-color: var(--col-gold);
}

.mm-emoji {
  font-size: var(--mm-emoji-size, 1.2rem);
  width: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.mm-group-title {
  flex: 1;
  line-height: 1.2;
}

.mm-group-arrow {
  font-size: .70rem;
  opacity: .35;
}

.mm-children {
  padding: 18px 20px;
  overflow-y: auto;
}

.mm-child-header {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--col-navy);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--col-gold);
}

.mm-child-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px 12px;
}

.mm-child-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--mm-child-pad, 7px 8px);
  text-decoration: none;
  color: #4b5563;
  font-family: var(--font-body);
  font-size: var(--mm-child-fs, .95rem);
  font-weight: 400;
  border-radius: 6px;
  transition: all .12s;
}

.mm-child-link:hover {
  color: var(--col-navy);
  background: #f0ece6;
}

.mm-child-link i {
  color: var(--col-gold);
  font-size: .80rem;
  flex-shrink: 0;
}

.mm-select-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #d0c8be;
  font-family: var(--font-body);
  font-size: .85rem;
  padding: 40px;
}

.mm-promo {
  border-left: 1px solid #f0ece6;
  padding: 16px 12px;
  background: #faf7f2;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mm-promo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid #e8e4dd;
  border-radius: 8px;
  text-decoration: none;
  color: #374151;
  font-weight: 600;
  font-size: .95rem;
  transition: all .15s;
}

.mm-promo-link:hover {
  border-color: var(--col-gold);
  color: var(--col-navy);
}

.mm-promo-link i {
  color: var(--col-gold);
}

.megamenu-compact .mm-inner-compact {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.mm-lot-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  padding: 18px var(--layout-padding);
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.mm-lot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: #faf7f2;
  border: 1px solid #e8e4dd;
  border-radius: 10px;
  text-decoration: none;
  color: #374151;
  text-align: center;
  font-weight: 600;
  font-size: var(--mm-lot-fs, .95rem);
  transition: all .15s;
  position: relative;
}

.mm-lot-item:hover {
  border-color: var(--col-gold);
  background: #fff;
  color: var(--col-navy);
  transform: translateY(-2px);
}

.mm-lot-emoji {
  font-size: var(--mm-lot-emoji, 1.8rem);
}

.mm-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
}

.mm-lot-footer {
  text-align: center;
  padding: 10px 20px;
  border-top: 1px solid #f0ece6;
  background: #faf7f2;
}

.mm-lot-all {
  font-weight: 700;
  font-size: .82rem;
  color: var(--col-navy);
  text-decoration: none;
}

.mm-lot-all:hover {
  color: var(--col-gold);
}

.mm-mobile-list {
  display: none;
}

/* PRODUKT-KARTEN */
.pcard-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.pcard {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e8e4dd;
  height: 100%;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease;
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(15,25,35,.12);
  border-color: var(--col-gold);
}

.pcard-img-wrap {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  background: #f5f2ed;
}

.pcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.pcard:hover .pcard-img {
  transform: scale(1.05);
}

.pcard-status-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.pcard-cat-tag {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  background: rgba(15,25,35,.6);
  color: rgba(255,255,255,.9);
  font-family: var(--font-body);
  font-size: .70rem;
  padding: 3px 7px;
  border-radius: 5px;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcard-lot-tag {
  position: absolute;
  bottom: 9px;
  left: 9px;
  z-index: 2;
  background: var(--col-navy);
  color: var(--col-gold);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .65rem;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  border-radius: 4px;
}

.pcard-body {
  padding: 14px 16px 16px;
}

.pcard-nr {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .88rem;
  color: #9ca3af;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.pcard-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--col-night);
  line-height: 1.3;
  margin-bottom: 9px;
  min-height: 2.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: wrap;
}

.pcard-price-val {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--col-emerald);
}

.pcard-price-lock {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 400;
  color: var(--col-gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pcard-sqm {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .88rem;
  color: var(--col-slate);
  white-space: nowrap;
}

.pcard-lot {
  border-top: 2px dashed var(--col-navy);
}

.pcard-varbar {
  width: 100%;
  height: 3px;
  background: #e8e4dd;
  border-radius: 3px;
  margin-bottom: 8px;
  overflow: hidden;
}

.pcard-varbar-fill {
  height: 100%;
  background: var(--col-emerald);
  border-radius: 3px;
}

.pcard-vars {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 300;
  color: #9ca3af;
  margin-top: 4px;
}

.col-xl-20p {
  flex: 0 0 auto;
  width: 20%;
}

/* STATUS BADGES */
.badge-available,
.badge-reserved,
.badge-sold {
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.badge-available { background: var(--col-emerald); }
.badge-reserved { background: var(--col-amber); }
.badge-sold { background: var(--col-crimson); }

.badge-available::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.8);
  animation: blink 1.4s infinite;
  flex-shrink: 0;
}

/* PRODUKTKARTEN ALT */
.product-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--col-white);
  border: 1px solid var(--col-border);
  height: 100%;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
  position: relative;
}

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 2px var(--col-gold);
  opacity: 0;
  transition: opacity .22s;
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(15,25,35,.14);
}

.product-card:hover::after {
  opacity: 1;
}

.card-available { border-top: 4px solid var(--col-emerald) !important; }
.card-reserved { border-top: 4px solid var(--col-amber) !important; }
.card-sold { border-top: 4px solid var(--col-crimson) !important; }

.product-card .card-img-top {
  height: 200px;
  object-fit: cover;
}

.product-card .card-title {
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: var(--fw-bold);
  color: var(--col-night);
  letter-spacing: -.2px;
  line-height: 1.3;
}

.product-card .article-nr {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  color: var(--col-slate);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.sold-overlay {
  position: relative;
}

.sold-overlay .card-img-top {
  filter: grayscale(60%) opacity(.7);
}

.sold-overlay::before {
  content: "SOLD";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--col-crimson);
  color: #fff;
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

.card-price {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: .98rem;
  color: var(--col-emerald);
  letter-spacing: -.3px;
}

.card-price-locked {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  color: #bbb;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* HERO */
.hero-section {
  background: linear-gradient(135deg, var(--col-navy) 10%, var(--col-night) 40%);
  color: #fff;
  padding: 70px 0 50px;
  text-align: center;
}

.hero-section h1 {
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  letter-spacing: -1px;
  color: #fff;
}

.hero-section p {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: var(--fw-light);
  opacity: .9;
  color: #fff;
}

/* SUCHE */
.search-section {
  background: var(--col-white);
  padding: 16px 0;
  border-bottom: 1px solid var(--col-border);
  box-shadow: 0 2px 12px rgba(15,25,35,.06);
}

.search-section .form-control,
.search-section .form-select,
.form-control,
.form-select {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  border: 1.5px solid #d8d3cc;
  border-radius: var(--r-sm);
  background: var(--col-ivory);
}

.search-section .form-control:focus,
.search-section .form-select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--col-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.15);
  background: #fff;
}

.search-section .form-control::placeholder {
  font-weight: var(--fw-light);
  color: #b0a898;
}

/* LOCKED INFO */
.locked-info {
  background: linear-gradient(135deg,#fefcf7,#fef9ee);
  border: 1px solid var(--col-gold-lt);
  border-left: 4px solid var(--col-gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 18px;
  color: var(--col-gold-dk);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

.locked-info strong {
  font-weight: var(--fw-bold);
  color: var(--col-navy);
}

.locked-info a {
  color: var(--col-navy);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}

/* INFO SECTION */
.info-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.5rem;
}

.info-icon-green { background: var(--col-emerald-lt); color: var(--col-emerald); }
.info-icon-gold { background: #fef7e6; color: var(--col-gold-dk); }
.info-icon-navy { background: #e8eef3; color: var(--col-navy); }
.info-icon-amber { background: var(--col-amber-lt); color: var(--col-amber); }

/* FOOTER */
.site-footer {
  background: var(--col-night);
  color: #b0bec5;
  padding: 52px 0 22px;
  border-top: 3px solid var(--col-gold);
}

.site-footer h5 {
  font-family: var(--font-head);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: .88rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #8fa8b8;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 7px;
}

.footer-links a:hover {
  color: var(--col-gold);
}

.footer-desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: #607d8b;
  line-height: 1.7;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 18px;
  margin-top: 22px;
  color: #455a64;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  text-align: center;
}

/* PRODUKTDETAIL */
.product-detail-img {
  border-radius: var(--r-lg);
  max-height: 420px;
  object-fit: cover;
  width: 100%;
}

.spec-table td {
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.spec-table td:first-child {
  font-weight: var(--fw-bold);
  color: var(--col-night);
  width: 160px;
}

/* FORMULARE */
.form-card {
  background: var(--col-white);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: 0 6px 28px rgba(15,25,35,.08);
  max-width: 520px;
  margin: 0 auto;
  border-top: 3px solid var(--col-gold);
}

.form-card h3 {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: -.5px;
  color: var(--col-night);
}

.form-label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: #455a64;
}

/* BUTTONS */
.btn-primary-custom,
.btn-gold {
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary-custom {
  background: var(--col-navy);
  color: #fff;
  padding: 10px 28px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  letter-spacing: .5px;
}

.btn-primary-custom:hover {
  background: var(--col-navy-mid);
  transform: translateY(-1px);
  color: #fff;
}

.btn-gold {
  background: var(--col-gold);
  color: var(--col-night);
  padding: 11px 28px;
  font-weight: var(--fw-black);
  font-size: var(--fs-body);
  letter-spacing: .3px;
}

.btn-gold:hover {
  background: #e0bf65;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,168,76,.4);
  color: var(--col-night);
}

/* ADMIN */
.admin-sidebar {
  background: var(--col-night);
  min-height: 100vh;
  width: 240px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  border-right: 1px solid rgba(201,168,76,.15);
}

.admin-sidebar .brand {
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: var(--fw-black);
  letter-spacing: -.3px;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(201,168,76,.2);
  display: block;
}

.admin-sidebar .nav-link {
  color: #8fa8b8;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all .15s;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  background: rgba(201,168,76,.1);
  color: var(--col-gold);
  border-left: 3px solid var(--col-gold);
  padding-left: 17px;
}

.admin-content {
  margin-left: 240px;
  padding: 30px;
  min-height: 100vh;
  background: var(--col-ivory);
}

.admin-topbar {
  background: var(--col-white);
  padding: 13px 20px;
  border-bottom: 1px solid var(--col-border);
  margin: -30px -30px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(15,25,35,.05);
}

.admin-topbar span:first-child {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  color: var(--col-night);
  font-size: 1rem;
}

.admin-topbar span:last-child {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  color: var(--col-slate);
}

.stat-card {
  background: var(--col-white);
  border-radius: var(--r-md);
  padding: 22px;
  text-align: center;
  border-left: 4px solid var(--col-gold);
  box-shadow: 0 2px 12px rgba(15,25,35,.06);
}

.stat-card .stat-num {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: var(--fw-black);
  color: var(--col-navy);
  letter-spacing: -1px;
}

.stat-card .stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--col-slate);
}

/* ADSENSE PLACEHOLDER */
.ad-placeholder {
  background: #f5f2ec;
  border: 2px dashed #d8d3cc;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0a898;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
}

/* RESPONSIVE */
@media (max-width: 1280px) {
  .nav-link-item {
    font-size: .9rem;
    padding: 8px 10px;
  }

  .mm-child-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 1024px) {
  .nav-hamburger {
    display: flex;
  }

  .nav-links,
  .nav-auth {
    display: none;
  }

  .nav-inner {
    justify-content: space-between;
  }

  .mm-inner,
  .mm-lot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .col-xl-20p {
    width: 33.3333%;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 2.25rem;
    --fs-h2: 1.8rem;
    --fs-h3: 1.45rem;
    --nav-height: 64px;
    --layout-padding: 16px;
  }

  .topbar-inner,
  .admin-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .topbar-right {
    gap: 12px;
    flex-wrap: wrap;
  }

  .hero-section {
    padding: 48px 0 36px;
  }

  .mm-inner,
  .mm-lot-grid {
    grid-template-columns: 1fr;
  }

  .col-xl-20p {
    width: 50%;
  }

  .admin-sidebar {
    position: relative;
    width: 100%;
    min-height: auto;
  }

  .admin-content,
  html[lang="ar"] .admin-content,
  body.lang-ar .admin-content {
    margin-left: 0;
    margin-right: 0;
    padding: 20px;
  }

  .admin-topbar {
    margin: -20px -20px 20px;
  }

  .form-card {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-h1: 1.9rem;
    --fs-h2: 1.55rem;
    --fs-h3: 1.3rem;
    --fs-body: .95rem;
  }

  .col-xl-20p {
    width: 100%;
  }

  .pcard-body {
    padding: 12px;
  }

  .footer-links a {
    font-size: .85rem;
  }

  .btn-primary-custom,
  .btn-gold {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════
   STOCKLOT DETAILSEITE
   Datei: stocklots.php / stocklot.php
   ════════════════════════════════════════════════════════ */

.sl-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 20px;
}

.sl-breadcrumb {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 300;
  color: #888;
  margin-bottom: 20px;
}

.sl-breadcrumb a {
  color: #1a5276;
  text-decoration: none;
}

/* HERO BANNER */
.sl-hero {
  background: linear-gradient(135deg,#1a252f,#2c3e50);
  border-radius: 16px;
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.sl-hero-img {
  width: 140px;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
}

.sl-lot-nr {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}

.sl-lot-title {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0 0 10px;
}

.sl-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sl-badge {
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}

.sl-badge-lot {
  background: rgba(255,255,255,.15);
  color: #fff;
}

.sl-badge-div {
  background: #1e8449;
  color: #fff;
}

.sl-badge-nodiv {
  background: #c0392b;
  color: #fff;
}

/* STATS GRID */
.sl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.sl-stat {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e8ecf0;
  text-align: center;
}

.sl-stat-val {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: #1a252f;
  letter-spacing: -.5px;
}

.sl-stat-lbl {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 300;
  color: #888;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* FORTSCHRITTSBALKEN */
.sl-progress-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e8ecf0;
  margin-bottom: 24px;
}

.sl-progress-title {
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  color: #444;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.sl-bar-bg {
  background: #f0f0f0;
  border-radius: 8px;
  height: 14px;
  position: relative;
  overflow: hidden;
}

.sl-bar-avail {
  height: 14px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg,#1e8449,#27ae60);
  transition: width .6s;
}

.sl-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.sl-bar-label {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 400;
}

/* PREIS BOX */
.sl-price-box {
  background: linear-gradient(135deg,#1a5276,#2980b9);
  border-radius: 14px;
  padding: 20px 24px;
  color: #fff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sl-price-lbl {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 300;
  opacity: .8;
}

.sl-price-val {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.sl-price-unit {
  font-family: var(--font-body);
  font-size: .72rem;
  opacity: .7;
}

.sl-min-order {
  font-family: var(--font-body);
  font-size: .78rem;
  margin-top: 6px;
  opacity: .85;
}

.sl-min-order strong {
  font-weight: 700;
}

/* LOCKED */
.sl-locked {
  background: #f8f9fa;
  border: 2px dashed #ddd;
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.sl-locked h5 {
  font-family: var(--font-head);
  font-weight: 800;
  margin-bottom: 6px;
}

.sl-locked p {
  font-family: var(--font-body);
  font-weight: 300;
  color: #888;
  font-size: .88rem;
  margin-bottom: 14px;
}

.btn-unlock {
  background: #1a5276;
  color: #fff;
  border: none;
  padding: 10px 26px;
  border-radius: 25px;
  font-family: var(--font-head);
  font-weight: 700;
  text-decoration: none;
  font-size: .88rem;
}

/* CTA BUTTONS */
.sl-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.btn-sl-prim,
.btn-sl-wa,
.btn-sl-out {
  border-radius: 28px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}

.btn-sl-prim {
  background: linear-gradient(135deg,#1e8449,#27ae60);
  color: #fff;
  border: none;
  padding: 12px 24px;
}

.btn-sl-wa {
  background: linear-gradient(135deg,#25d366,#128c7e);
  color: #fff;
  border: none;
  padding: 12px 24px;
}

.btn-sl-out {
  background: transparent;
  color: #1a5276;
  border: 2px solid #1a5276;
  padding: 10px 20px;
  font-size: .82rem;
}

.btn-sl-prim:hover,
.btn-sl-wa:hover,
.btn-sl-submit:hover {
  transform: translateY(-2px);
  color: #fff;
}

.btn-sl-out:hover {
  background: #1a5276;
  color: #fff;
}

/* VARIANTEN TABELLE */
.sl-variants-wrap {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  border: 1px solid #e8ecf0;
  margin-bottom: 24px;
}

.sl-variants-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: #1a252f;
  margin-bottom: 4px;
}

.sl-variants-sub {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 300;
  color: #888;
  margin-bottom: 16px;
}

.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}

.sl-table th {
  font-size: .72rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 8px 12px;
  border-bottom: 2px solid #f0f0f0;
  text-align: left;
}

.sl-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f8f8f8;
  font-size: .88rem;
  vertical-align: middle;
}

.sl-table tr:last-child td {
  border-bottom: none;
}

.sl-table tr.sold-row td {
  color: #bbb;
  text-decoration: line-through;
}

.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
  border: 1px solid rgba(0,0,0,.1);
  flex-shrink: 0;
}

.var-status {
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-family: var(--font-head);
  white-space: nowrap;
}

.vs-avail {
  background: #e8f5e2;
  color: #1e5c2a;
}

.vs-res {
  background: #fef9e7;
  color: #7d6608;
}

.vs-sold {
  background: #fdecea;
  color: #7b1c1c;
}

.var-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ANFRAGE FORMULAR */
.sl-inquiry {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  border: 1px solid #f0f0f0;
}

.sl-inquiry h4 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 4px;
  color: #1a252f;
}

.sl-inquiry .sub {
  font-family: var(--font-body);
  font-weight: 300;
  color: #888;
  font-size: .8rem;
  margin-bottom: 20px;
}

.sl-form-group {
  margin-bottom: 14px;
}

.sl-form-group label {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  color: #555;
  display: block;
  margin-bottom: 5px;
}

.sl-form-group input,
.sl-form-group textarea {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: .9rem;
  background: #fafafa;
  outline: none;
  transition: border-color .2s;
}

.sl-form-group input:focus,
.sl-form-group textarea:focus {
  border-color: #2980b9;
  background: #fff;
}

.btn-sl-submit {
  width: 100%;
  background: linear-gradient(135deg,#1a5276,#2980b9);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 28px;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .2s;
}

.inq-success {
  background: linear-gradient(135deg,#1e8449,#27ae60);
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.inq-success i {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 8px;
}

/* SHARE */
.sl-share-box {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid #e8ecf0;
  margin-top: 14px;
}

.share-url {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 300;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 7px 12px;
  width: 100%;
  color: #555;
}

/* SPECS */
.sl-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.sl-spec-chip {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.sl-spec-chip i {
  font-size: .95rem;
  color: #2980b9;
  margin-top: 2px;
}

.sl-spec-label {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .8px;
  display: block;
}

.sl-spec-val {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 400;
  color: #1a252f;
}

/* VARIANTEN THUMBNAILS */
.var-thumb {
  width: 56px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
  border: 2px solid transparent;
  transition: border-color .2s, transform .2s;
  display: block;
}

.var-thumb:hover {
  border-color: #2980b9;
  transform: scale(1.08);
}

.var-thumb-empty {
  width: 56px;
  height: 44px;
  background: #f0f0f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

/* LIGHTBOX */
.lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lb-overlay.active {
  display: flex;
}

.lb-img-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 80vh;
}

.lb-main-img {
  max-width: 90vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.lb-label {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-top: 14px;
  letter-spacing: .3px;
}

.lb-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.lb-thumb {
  width: 60px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.3);
  transition: border-color .2s;
}

.lb-thumb.active,
.lb-thumb:hover {
  border-color: #fff;
}

.lb-close {
  position: fixed;
  top: 20px;
  right: 24px;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.lb-close:hover {
  background: rgba(255,255,255,.3);
}

.lb-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.lb-arrow:hover {
  background: rgba(255,255,255,.25);
}

.lb-prev {
  left: 16px;
}

.lb-next {
  right: 16px;
}

/* ARABISCH / RTL FÜR STOCKLOT */
html[lang="ar"] .sl-wrap,
body.lang-ar .sl-wrap,
body[dir="rtl"] .sl-wrap {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .sl-wrap *,
body.lang-ar .sl-wrap *,
body[dir="rtl"] .sl-wrap * {
  font-family: var(--font-ar, 'Cairo', sans-serif) !important;
  letter-spacing: 0 !important;
}

html[lang="ar"] .sl-breadcrumb,
body.lang-ar .sl-breadcrumb,
body[dir="rtl"] .sl-breadcrumb {
  text-align: right;
}

html[lang="ar"] .sl-hero,
body.lang-ar .sl-hero,
body[dir="rtl"] .sl-hero {
  flex-direction: row-reverse;
}

html[lang="ar"] .sl-badges,
html[lang="ar"] .sl-cta-row,
html[lang="ar"] .sl-bar-labels,
body.lang-ar .sl-badges,
body.lang-ar .sl-cta-row,
body.lang-ar .sl-bar-labels,
body[dir="rtl"] .sl-badges,
body[dir="rtl"] .sl-cta-row,
body[dir="rtl"] .sl-bar-labels {
  direction: rtl;
}

html[lang="ar"] .sl-table th,
html[lang="ar"] .sl-table td,
body.lang-ar .sl-table th,
body.lang-ar .sl-table td,
body[dir="rtl"] .sl-table th,
body[dir="rtl"] .sl-table td {
  text-align: right;
}

html[lang="ar"] .color-dot,
body.lang-ar .color-dot,
body[dir="rtl"] .color-dot {
  margin-right: 0;
  margin-left: 7px;
}

html[lang="ar"] .lb-close,
body.lang-ar .lb-close,
body[dir="rtl"] .lb-close {
  right: auto;
  left: 24px;
}

html[lang="ar"] .lb-prev,
body.lang-ar .lb-prev,
body[dir="rtl"] .lb-prev {
  left: auto;
  right: 16px;
}

html[lang="ar"] .lb-next,
body.lang-ar .lb-next,
body[dir="rtl"] .lb-next {
  right: auto;
  left: 16px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .sl-hero {
    padding: 20px;
  }

  .sl-lot-title {
    font-size: 1.3rem;
  }

  .sl-table {
    font-size: .78rem;
  }

  .sl-table th,
  .sl-table td {
    padding: 7px 8px;
  }

  .sl-price-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  html[lang="ar"] .sl-price-box,
  body.lang-ar .sl-price-box,
  body[dir="rtl"] .sl-price-box {
    align-items: flex-end;
  }

  .sl-inquiry {
    padding: 22px;
  }
}

/* --- mobile.css --- */
/* ============================================================
   MOBILE.CSS — Ausschließlich Responsive Overrides
   Berührt NIEMALS Desktop-Styles (>1024px)
   ============================================================

   STRUKTUR:
   1. Tablet Landscape  ≤ 1280px
   2. Tablet Portrait   ≤ 1024px  → Hamburger + Mobile Nav
   3. Smartphone        ≤ 768px
   4. Klein             ≤ 480px
   5. Sehr klein        ≤ 360px
   6. iOS Safe Area
   7. Print
   ============================================================ */

/* ── 1. TABLET LANDSCAPE (≤ 1280px) ──────────────────────── */
@media (max-width: 1280px) {
  .container,
  .container-sm,.container-md,.container-lg,.container-xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .nav-inner  { padding: 0 16px; }
  .topbar-inner { padding: 6px 16px; }
}

/* ── 2. TABLET PORTRAIT & MOBILE (≤ 1024px) ─────────────── */
@media (max-width: 1024px) {

  /* HAMBURGER einblenden */
  .nav-hamburger {
    display: flex !important;
    order: 3;
    margin-left: 8px;
  }

  /* NAV-INNER: flex-wrap für 3 Zeilen-Struktur */
  .main-nav .nav-inner {
    flex-wrap: wrap;
    height: auto !important;
    padding: 10px 16px;
    position: relative;
  }
  .nav-logo     { order: 1; }
  .nav-auth     { order: 2; margin-left: auto; }
  .nav-hamburger{ order: 3; }

  /* NAV-LINKS: versteckt bis .open */
  .nav-links {
    order: 4;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--nav-bg, var(--col-navy, #1b3a4b)) !important;
    border-top: 2px solid var(--nav-border, #c9a84c);
    padding: 6px 0;
    gap: 0;
    box-shadow: 0 10px 32px rgba(0,0,0,.6);
    z-index: 9999 !important; /* Über allem, auch über Hero-Slider */
    max-height: 80vh;
    overflow-y: auto;
    width: 100%;
  }
  .nav-links.open { display: flex; }
  .nav-links > li { width: 100%; }

  .nav-link-item {
    padding: 13px 22px;
    border-radius: 0;
    width: 100%;
    font-size: 1.0rem;
    font-weight: 600;
    color: #ffffff !important;
    letter-spacing: .3px;
  }
  .nav-link-item:hover {
    background: rgba(255,255,255,.06);
  }

  /* AUTH: Icon-only auf Tablet */
  .nav-auth .nav-auth-link span { display: none; }

  /* NORMAL DROPDOWN: statisch (nicht absolut) */
  .nav-dropdown {
    display: none;
    position: static !important;
    transform: none !important;
    background: rgba(0,0,0,.18);
    border: none;
    border-left: 3px solid var(--nav-border, #c9a84c);
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 0 20px;
    min-width: auto;
    padding: 4px 0;
    width: auto;
  }
  .has-dropdown.open .nav-dropdown { display: block; }
  .nav-dd-item {
    padding: 8px 14px;
    font-size: .83rem;
    color: #ffffff !important;
  }

  /* DESKTOP MEGA-MENÜ: komplett weg */
  .megamenu { display: none !important; }

  /* MOBILE ACCORDION (Kategorien & Stocklots) */
  /* Standard: versteckt */
  .mm-mobile-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.18);
    border-left: 3px solid var(--nav-border, #c9a84c);
    max-height: 55vh;
    overflow-y: auto;
  }
  /* Einblenden wenn parent .open */
  .has-megamenu.open .mm-mobile-list { display: block; }

  .mm-mobile-list li {
    display: block;
    width: 100%;
    margin: 0; padding: 0;
  }
  .mm-mobile-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 11px 26px;
    width: 100%;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    border-bottom: 1px solid rgba(255,255,255,.04);
    box-sizing: border-box;
    transition: background .12s;
  }
  .mm-mobile-link:hover,
  .mm-mobile-link:active {
    background: rgba(255,255,255,.07);
    color: var(--nav-link-hover, #c9a84c) !important;
  }
  .mm-mobile-link i { color: var(--nav-border, #c9a84c); font-size: .78rem; flex-shrink: 0; }
  .mm-mobile-group  { padding-left: 28px; }
  .mm-mobile-badge  {
    color: #fff; font-size: .56rem; font-weight: 700;
    padding: 1px 6px; border-radius: 8px;
    margin-left: auto; flex-shrink: 0;
  }

  /* Produkt-Grid: max 3 Spalten */
  .col-xl-2, .col-xl-3, .col-xl-20p {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }

  /* Grid-Switcher: 5+6 verstecken */
  #gbtn-5, #gbtn-6 { display: none !important; }
}

/* ── 3. SMARTPHONE (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {

  /* Typografie Mobile */
  :root {
    --fs-h1:   2.1rem;
    --fs-h2:   1.75rem;
    --fs-h3:   1.4rem;
    --fs-h4:   1.15rem;
    --fs-body: 1rem;
    --fs-sm:   0.875rem;
    --fs-xs:   0.8rem;
    --fs-nav:  1rem;
    --nav-height: 62px;
    --lh-body: 1.6;
  }

  /* Topbar */
  .topbar-inner { padding: 5px 12px; }
  .topbar-notice { max-width: 45%; font-size: .68rem; }
  .topbar-right  { gap: 8px; }
  .topbar-link   { display: none; }
  .topbar-link.topbar-wa { display: flex; }

  /* Logo kleiner */
  .nav-logo img { height: 32px !important; }
  .nav-btn-register { padding: 6px 12px; font-size: .72rem; }

  /* Produkt-Karten: Mobile immer 1 Spalte */
  .col-xl-2,.col-xl-3,.col-xl-4,.col-xl-20p,
  .col-lg-3,.col-md-4,.col-sm-6,.col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Grid-Switcher auf Mobile verstecken */
  #gbtn-2,#gbtn-3,#gbtn-4,#gbtn-5,#gbtn-6 { display:none !important; }
  .search-section [style*="pro Zeile"] { display:none !important; }
  .pcard-body   { padding: 9px 10px 11px; }
  .pcard-name   { font-size: .8rem; min-height: 2em; }

  /* Suchleiste */
  .search-section .row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 6px;
  }

  /* Info-Karten */
  .info-icon-wrap { width: 44px; height: 44px; font-size: 1.2rem; }

  /* Grid-Switcher komplett verstecken auf Mobile */
  #gbtn-2,#gbtn-3,#gbtn-4,#gbtn-5,#gbtn-6 { display:none !important; }
  .grid-switcher-wrap { display:none !important; }

  /* Footer */
  .site-footer .col-lg-3 { flex: 0 0 100%; max-width: 100%; }
  .footer-bottom .row    { flex-direction: column; gap: 4px; text-align: center; }

  /* Admin */
  .admin-sidebar { width: 100% !important; min-height: auto; position: relative; }
  .admin-content { margin-left: 0 !important; padding: 14px; }
}

/* ── 4. KLEIN (≤ 480px) ──────────────────────────────────── */
@media (max-width: 480px) {
  /* Topbar */
  .topbar-notice { display: none; }

  /* Auth: Icon only */
  .nav-auth-link:not(.nav-btn-register) span { display: none; }
  .nav-logo img { height: 28px !important; }

  /* Produkt-Karten Details */
  .pcard-nr          { display: none; }
  .pcard-status-badge{ font-size: .54rem; padding: 2px 7px; }
  .pcard-cat-tag     { display: none; }

  /* Grid */
  #gbtn-3, #gbtn-5, #gbtn-6 { display: none !important; }
}

/* ── 5. SEHR KLEIN (≤ 360px — alte Androids) ─────────────── */
@media (max-width: 360px) {
  .col-xl-2,.col-xl-3,.col-xl-4,.col-xl-20p,
  .col-lg-3,.col-md-4,.col-sm-6,.col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .nav-btn-register { display: none; }
}

/* ── 6. IOS SAFE AREA (Notch / Dynamic Island) ───────────── */
@supports (padding: env(safe-area-inset-top)) {
  .topbar {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .main-nav .nav-inner {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ── 7. PRINT ─────────────────────────────────────────────── */
@media print {
  .topbar, .main-nav, .site-footer,
  .search-section, .nav-hamburger,
  .lang-dropdown, .locked-info { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .container { max-width: 100% !important; }
}


/* --- admin/admin-product-form.css --- */
/* Admin Product Forms */
.admin-content>.bg-white,.admin-content form.bg-white,.admin-content .bg-white.p-4.rounded.shadow-sm{background:#fff!important;border:1px solid #e4eaf0!important;border-radius:20px!important;box-shadow:0 14px 34px rgba(15,25,35,.07)!important;padding:24px!important}
.admin-content .form-label{font-size:.78rem;font-weight:900;color:#1b3a4b;text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.admin-content .form-control,.admin-content .form-select{border:1px solid #dbe3ea;border-radius:11px;min-height:42px;background:#fbfcfe;box-shadow:none!important}
.admin-content .form-control:focus,.admin-content .form-select:focus{border-color:#c9a84c;box-shadow:0 0 0 3px rgba(201,168,76,.16)!important}
.admin-content textarea.form-control{min-height:120px}
.admin-content img[style*="width:120px"],.admin-content img[style*="height:80px"]{width:220px!important;max-width:100%!important;height:140px!important;object-fit:cover!important;border-radius:14px!important;border:1px solid #e4eaf0!important;box-shadow:0 8px 22px rgba(15,25,35,.08)!important}
.admin-content .btn-success{background:#0d7a55;border-color:#0d7a55;border-radius:999px;font-weight:900;padding:9px 18px}
.admin-content .btn-secondary{border-radius:999px;font-weight:800;padding:9px 18px}
.admin-content .alert{border-radius:14px;border:0}


/* --- admin/admin-product-full.css --- */
/* Product Admin Full Form */
.product-admin-full-form{padding:0 14px 28px}
.product-admin-card{background:#fff;border:1px solid #e2ddd6;border-radius:14px;box-shadow:0 10px 28px rgba(15,25,35,.06);padding:22px}
.product-admin-card h5{font-size:1.05rem;font-weight:900;color:#0f1923;margin:0 0 20px}
.product-subtitle{font-weight:900;color:#1b3a4b;margin:0 0 14px}
.product-admin-card .form-label{font-size:.78rem;font-weight:900;color:#1b3a4b;text-transform:uppercase;letter-spacing:.55px}
.product-admin-card .form-control,.product-admin-card .form-select{border:1px solid #d5cec3;border-radius:9px;background:#fbfaf8;min-height:40px;box-shadow:none}
.product-admin-card .form-control:focus,.product-admin-card .form-select:focus{border-color:#c9a84c;box-shadow:0 0 0 3px rgba(201,168,76,.16)}
.product-main-preview{width:100%;max-height:160px;object-fit:cover;border-radius:12px;border:1px solid #e4eaf0;margin-bottom:12px}
.product-gallery-admin{background:#fbfcfe;border:1px solid #e8edf2;border-radius:14px;padding:16px;margin-top:14px}
.product-gallery-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.product-gallery-head h6{font-weight:900;margin:0 0 4px}
.product-gallery-head p{margin:0;color:#64748b;font-size:.84rem}
.product-gallery-head span{background:#1b3a4b;color:#c9a84c;border-radius:999px;padding:5px 10px;font-weight:900}
.product-gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:12px}
.product-gallery-item{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid #e4eaf0;background:#fff}
.product-gallery-item img{width:100%;height:100%;object-fit:cover}
.product-gallery-item a{position:absolute;right:5px;top:5px;width:22px;height:22px;border-radius:50%;background:#b91c1c;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-weight:900}
.product-gallery-empty{border:1px dashed #cbd5e1;border-radius:12px;background:#fff;color:#64748b;padding:14px;margin-bottom:12px}
.product-gallery-upload{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.product-variant-row{background:#fff;border:1px solid #eef2f6;border-radius:12px;padding:8px;margin-left:0;margin-right:0}
.product-new-variants{background:#fbfcfe;border:1px solid #e8edf2;border-radius:14px;padding:14px}
.product-variant-table{min-width:720px}
.product-variant-table thead th{background:#f8fafc;font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:#0f1923}
.product-color-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid #ddd;margin-right:6px;vertical-align:-2px}
.product-form-actions{background:#fff;border:1px solid #e2ddd6;border-radius:14px;padding:16px;margin-top:16px;text-align:right;box-shadow:0 10px 28px rgba(15,25,35,.05)}
.product-form-actions .btn{border-radius:999px;font-weight:900;padding:9px 18px}


/* --- admin/admin-products.css --- */
/* Admin Products Listing */
.admin-products-page{padding:4px 2px 28px}
.admin-products-hero{background:radial-gradient(circle at right top,rgba(201,168,76,.22),transparent 34%),linear-gradient(135deg,#102335,#1b3a4b);border-radius:22px;color:#fff;padding:28px 30px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 18px 44px rgba(15,25,35,.16)}
.admin-products-kicker{color:#e2bd5c;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:7px}
.admin-products-hero h1{font-size:2rem;font-weight:900;margin:0}
.admin-products-hero p{margin:8px 0 0;color:rgba(255,255,255,.72)}
.admin-products-primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border-radius:999px;background:linear-gradient(135deg,#c9a84c,#d9a441);color:#0f1923!important;text-decoration:none;font-weight:900;padding:9px 18px;box-shadow:0 12px 24px rgba(201,168,76,.24);border:0}
.admin-products-toolbar{background:#fff;border:1px solid #e4eaf0;border-radius:18px;padding:16px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 10px 28px rgba(15,25,35,.055)}
.admin-products-count strong{font-size:1.4rem;font-weight:900;color:#0f1923;display:block;line-height:1}
.admin-products-count span{color:#64748b;font-size:.78rem;text-transform:uppercase;letter-spacing:.8px;font-weight:800}
.admin-products-search{position:relative;max-width:420px;width:100%}
.admin-products-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#94a3b8}
.admin-products-search input{width:100%;height:42px;border:1px solid #dbe3ea;border-radius:999px;padding:0 14px 0 38px;outline:0}
.admin-products-search input:focus{border-color:#c9a84c;box-shadow:0 0 0 3px rgba(201,168,76,.15)}
.admin-products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.admin-product-card{background:#fff;border:1px solid #e4eaf0;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(15,25,35,.065);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;min-width:0}
.admin-product-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(15,25,35,.11);border-color:rgba(201,168,76,.5)}
.admin-product-image-wrap{position:relative;aspect-ratio:4/3;background:#f8fafc;overflow:hidden}
.admin-product-image-wrap img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:0!important;max-width:none!important}
.admin-product-no-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:2rem}
.admin-product-status{position:absolute;top:10px;right:10px}
.admin-product-status .badge{border-radius:999px;font-weight:900;padding:5px 9px}
.admin-product-body{padding:15px}
.admin-product-art{color:#94a3b8;font-size:.72rem;text-transform:uppercase;letter-spacing:.9px;font-weight:900;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-product-body h3{font-size:1rem;font-weight:900;line-height:1.3;color:#0f1923;margin:0 0 12px;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.admin-product-meta{display:grid;gap:7px;margin-bottom:14px}
.admin-product-meta span{display:flex;align-items:center;gap:7px;color:#64748b;font-size:.84rem;min-width:0}
.admin-product-meta i{color:#c9a84c;flex-shrink:0}
.admin-product-actions{display:flex;gap:7px;flex-wrap:wrap}
.admin-product-actions .btn{border-radius:999px;font-weight:800}
.admin-products-empty{grid-column:1/-1;background:#fff;border:1px dashed #cbd5e1;border-radius:18px;text-align:center;padding:46px 20px;color:#64748b}
.admin-products-empty i{font-size:2rem;color:#c9a84c}
.admin-products-empty h3{color:#0f1923;font-weight:900;margin:10px 0 6px}
.admin-products-alert{border-radius:14px}


/* --- admin/campaign_send.css --- */
'
        . 'body{font-family:Arial,sans-serif;background:#f5f2ec;margin:0;padding:20px;}'
        . '.wrap{max-width:600px;margin:0 auto;background:#fff;border-radius:12px;border:1px solid #e2ddd6;overflow:hidden;}'
        . '.hdr{background:#1b3a4b;padding:24px 32px;text-align:center;}'
        . '.hdr h1{color:#c9a84c;font-family:Arial,sans-serif;font-size:1.3rem;margin:0;}'
        . '.cnt{padding:28px 32px;color:#374151;line-height:1.7;font-size:1rem;}'
        . '.ftr{background:#f5f2ec;padding:16px 32px;text-align:center;font-size:.78rem;color:#94a3b8;border-top:1px solid #e2ddd6;}'
        . 'a{color:#c9a84c;}'
        . '

/* --- admin/cms-login.css --- */
body {
  background:
    radial-gradient(circle at 20% 20%, rgba(201,168,76,.18), transparent 28%),
    linear-gradient(135deg,#0f1923,#1b3a4b);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  font-family:'Lato', system-ui, sans-serif;
}

.login-card {
  position:relative;
  background:#fff;
  border-radius:24px;
  padding:42px;
  width:100%;
  max-width:420px;
  box-shadow:0 28px 70px rgba(0,0,0,.42);
  border-top:5px solid #c9a84c;
  overflow:hidden;
}

.login-glow {
  position:absolute;
  width:180px;
  height:180px;
  right:-80px;
  top:-80px;
  background:radial-gradient(circle, rgba(201,168,76,.22), transparent 70%);
}

.login-logo {
  position:relative;
  font-family:'Raleway',sans-serif;
  font-weight:900;
  font-size:1.45rem;
  color:#0f1923;
  margin-bottom:4px;
}

.login-sub {
  position:relative;
  font-size:.82rem;
  color:#64748b;
  margin-bottom:28px;
}

.form-label {
  font-size:.78rem;
  font-weight:900;
  color:#1b3a4b;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.form-control {
  border:1px solid #dbe3ea;
  background:#fbfcfe;
  border-radius:12px;
  min-height:45px;
}

.form-control:focus {
  border-color:#c9a84c;
  box-shadow:0 0 0 3px rgba(201,168,76,.16);
}

.btn-cms {
  background:linear-gradient(135deg,#c9a84c,#d9a441);
  color:#0f1923;
  border:none;
  width:100%;
  padding:12px;
  border-radius:999px;
  font-weight:900;
}

.btn-cms:hover {
  filter:brightness(1.05);
  color:#0f1923;
}


/* --- admin/cms-media.css --- */
/* CMS Media */
.cms-media-page {
  padding:28px;
}

.cms-media-page > .alert {
  border-radius:14px;
}

.cms-media-upload,
.cms-media-grid-wrap {
  background:#fff;
  border:1px solid #e8edf2;
  border-radius:18px;
  box-shadow:0 12px 34px rgba(15,25,35,.07);
  padding:22px;
  margin-bottom:20px;
}

.cms-media-upload h2,
.cms-media-grid-wrap h2 {
  font-size:1.1rem;
  font-weight:900;
  color:#0f1923;
  margin-bottom:14px;
}

.media-card,
.cms-media-item {
  background:#fff;
  border:1px solid #e8edf2;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(15,25,35,.05);
  transition:.18s ease;
}

.media-card:hover,
.cms-media-item:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(15,25,35,.1);
  border-color:#c9a84c;
}

.media-card img,
.cms-media-item img {
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}

.media-meta {
  padding:12px;
  font-size:.82rem;
  color:#64748b;
}


/* --- admin/cms-password.css --- */
/* CMS Password */
.cms-password-card,
form {
  max-width:520px;
}

.cms-password-card,
.card {
  background:#fff;
  border:1px solid #e8edf2!important;
  border-radius:18px!important;
  box-shadow:0 12px 34px rgba(15,25,35,.07)!important;
}

.password-hint {
  background:#f8fafc;
  border:1px solid #e8edf2;
  border-radius:14px;
  padding:12px;
  color:#64748b;
  font-size:.86rem;
}


/* --- admin/cms-product-content.css --- */
/* CMS Product Content */
.cms-product-content-page,
.cms-edit-layout,
form {
  max-width:1180px;
}

.cms-product-content-card,
.card {
  background:#fff;
  border:1px solid #e8edf2!important;
  border-radius:18px!important;
  box-shadow:0 12px 34px rgba(15,25,35,.07)!important;
}

textarea.form-control {
  min-height:120px;
}

.cms-json-area,
textarea[name*="json"],
textarea[name*="advantages"],
textarea[name*="faq"] {
  font-family:Consolas, Monaco, monospace;
  font-size:.86rem;
}

.cms-preview-box {
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  padding:14px;
  color:#64748b;
}


/* --- admin/cms-sections.css --- */
/* ==========================================================
   CMS Sections Professional Repair
   ========================================================== */

.cms-section-page {
  max-width: 1480px;
  margin: 0 auto;
}

.cms-section-hero {
  background:
    radial-gradient(circle at right top, rgba(201,168,76,.20), transparent 34%),
    linear-gradient(135deg, #102335 0%, #1b3a4b 100%);
  color: #fff;
  border-radius: 22px;
  padding: 28px 30px;
  box-shadow: 0 20px 48px rgba(15,25,35,.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}

.cms-section-kicker {
  color: #e2bd5c;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cms-section-hero h2 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -.5px;
}

.cms-section-hero p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.76);
}

.cms-gold-btn,
.cms-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 900;
  text-decoration: none;
  border: 0;
}

.cms-gold-btn {
  background: linear-gradient(135deg,#c9a84c,#d9a441);
  color: #0f1923 !important;
  box-shadow: 0 12px 24px rgba(201,168,76,.25);
}

.cms-ghost-btn {
  background: rgba(255,255,255,.10);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22);
}

.cms-section-filter {
  background: #fff;
  border: 1px solid #e4eaf0;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(15,25,35,.06);
  padding: 18px;
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cms-section-filter label {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #64748b;
  margin-bottom: 6px;
}

.cms-section-filter .form-select {
  min-width: 210px;
}

.cms-filter-buttons {
  display: flex;
  gap: 8px;
}

.cms-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.cms-section-card {
  position: relative;
  background: #fff;
  border: 1px solid #e4eaf0;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(15,25,35,.07);
  padding: 20px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cms-section-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(15,25,35,.10);
  border-color: rgba(201,168,76,.45);
}

.cms-section-status {
  position: absolute;
  right: 14px;
  top: 14px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .72rem;
  font-weight: 900;
}

.cms-section-status.active {
  background: #e6f5ef;
  color: #0d7a55;
}

.cms-section-status.inactive {
  background: #f1f5f9;
  color: #64748b;
}

.cms-section-card-top {
  display: flex;
  gap: 10px;
  padding-right: 72px;
}

.cms-drag-handle {
  color: #94a3b8;
  font-size: 1.1rem;
  margin-top: 3px;
}

.cms-section-type {
  color: #c9a84c;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cms-section-card h3 {
  margin: 0;
  color: #0f1923;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 900;
}

.cms-section-preview {
  color: #64748b;
  font-size: .9rem;
  line-height: 1.6;
  margin: 16px 0 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 86px;
  overflow: hidden;
}

.cms-section-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
}

.cms-section-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e4eaf0;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .72rem;
  font-weight: 800;
}

.cms-section-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cms-empty-section {
  grid-column: 1/-1;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 20px;
  padding: 46px 20px;
  text-align: center;
  color: #64748b;
}

.cms-empty-section i {
  color: #c9a84c;
  font-size: 2rem;
}

.cms-empty-section h3 {
  color: #0f1923;
  font-weight: 900;
  margin: 10px 0 4px;
}

/* Edit page */
.cms-section-edit-form {
  margin-top: 0;
}

.cms-section-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

.cms-edit-card {
  background: #fff;
  border: 1px solid #e4eaf0;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(15,25,35,.07);
  padding: 22px;
  margin-bottom: 18px;
}

.cms-edit-card h3 {
  color: #0f1923;
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0 0 18px;
}

.cms-help {
  color: #64748b;
  font-size: .86rem;
  margin-top: -8px;
}

.cms-code-area {
  font-family: Consolas, Monaco, monospace;
  font-size: .86rem;
  min-height: 210px;
}

.cms-json-helper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cms-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  color: #1b3a4b;
  margin-bottom: 8px;
}

.cms-toggle input {
  display: none;
}

.cms-toggle span {
  width: 44px;
  height: 25px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: .18s;
}

.cms-toggle span::after {
  content: "";
  width: 19px;
  height: 19px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: .18s;
  box-shadow: 0 2px 8px rgba(15,25,35,.18);
}

.cms-toggle input:checked + span {
  background: #0d7a55;
}

.cms-toggle input:checked + span::after {
  transform: translateX(19px);
}

.cms-sticky-card {
  position: sticky;
  top: 98px;
}

.cms-image-preview {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e4eaf0;
  margin-bottom: 14px;
}

.cms-image-preview img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.cms-action-stack {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.cms-side-note {
  margin-top: 16px;
  background: #f8fafc;
  border: 1px solid #e4eaf0;
  border-radius: 14px;
  padding: 13px;
  color: #64748b;
  font-size: .84rem;
  line-height: 1.5;
}

.cms-notice {
  max-width: 1480px;
  margin: 0 auto 16px;
  border-radius: 14px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
}

.cms-notice-success {
  background: #e6f5ef;
  color: #0d7a55;
  border: 1px solid #b9e7d3;
}

.cms-notice-danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Make sure old Bootstrap/form elements look consistent */
.cms-section-page .form-control,
.cms-section-page .form-select {
  border-radius: 11px;
  border: 1px solid #dbe3ea;
  min-height: 42px;
  box-shadow: none;
}

.cms-section-page .form-control:focus,
.cms-section-page .form-select:focus {
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201,168,76,.16);
}


/* --- admin/stocklot-edit-gallery.css --- */
/* Admin Stocklot Edit Gallery */
.stocklot-main-preview {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e8edf2;
  display: block;
  margin-bottom: 8px;
}

.lot-gallery-admin {
  background: #fbfcfe;
  border: 1px solid #e8edf2;
  border-radius: 16px;
  padding: 18px;
  margin-top: 8px;
}

.lot-gallery-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.lot-gallery-head h5 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 900;
  color: #0f1923;
}

.lot-gallery-head p {
  margin: 0;
  color: #64748b;
  font-size: .86rem;
}

.lot-gallery-counter {
  background: #1b3a4b;
  color: #c9a84c;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 900;
  white-space: nowrap;
}

.lot-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.lot-gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e8edf2;
  background: #fff;
}

.lot-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lot-gallery-delete {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #b91c1c;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.lot-gallery-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 18px;
  color: #64748b;
  background: #fff;
  margin-bottom: 14px;
}

.lot-gallery-upload {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}


/* --- admin/stocklot-form.css --- */
/* Admin Stocklot Form: Product-like 2-column layout + translations */
.stocklot-admin-form{padding:0 18px 24px}
.stocklot-form-card{background:#fff;border:1px solid #e2ddd6;border-radius:12px;box-shadow:0 8px 22px rgba(15,25,35,.055);padding:22px;margin-bottom:18px}
.stocklot-form-card h5{font-family:'Raleway',sans-serif;font-size:1rem;font-weight:900;color:#0f1923;margin:0 0 20px}
.stocklot-subtitle{font-weight:900;color:#1b3a4b;margin:0 0 14px}
.stocklot-form-card .form-label{font-size:.82rem;font-weight:800;color:#1b3a4b;margin-bottom:6px}
.stocklot-form-card .form-control,.stocklot-form-card .form-select{border:1px solid #d5cec3;border-radius:8px;background:#fbfaf8;min-height:38px;box-shadow:none}
.stocklot-form-card .form-control:focus,.stocklot-form-card .form-select:focus{border-color:#c9a84c;box-shadow:0 0 0 3px rgba(201,168,76,.16)}
.stocklot-main-preview{width:100%;max-height:145px;object-fit:cover;border-radius:10px;border:1px solid #e8edf2;display:block;margin-bottom:8px}
.lot-gallery-admin{background:#fbfcfe;border:1px solid #e8edf2;border-radius:14px;padding:16px;margin-top:8px}
.lot-gallery-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}
.lot-gallery-head h5{margin:0 0 4px;font-size:.95rem;font-weight:900;color:#0f1923}
.lot-gallery-head p{margin:0;color:#64748b;font-size:.84rem}
.lot-gallery-counter{background:#1b3a4b;color:#c9a84c;border-radius:999px;padding:5px 10px;font-weight:900;white-space:nowrap}
.lot-gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.lot-gallery-item{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid #e8edf2;background:#fff}
.lot-gallery-item img{width:100%;height:100%;object-fit:cover}
.lot-gallery-delete{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:#b91c1c;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.lot-gallery-empty{border:1px dashed #cbd5e1;border-radius:12px;padding:14px;color:#64748b;background:#fff;margin-bottom:14px}
.lot-gallery-upload{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.variant-row{background:#fbfcfe;border:1px solid #eef2f6;border-radius:12px;padding:8px;margin-left:0;margin-right:0}
.stocklot-form-actions{background:#fff;border:1px solid #e2ddd6;border-radius:12px;padding:16px;margin-top:16px;text-align:right}
.variant-img-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.variant-img-box{position:relative;width:44px;height:35px;border-radius:5px;overflow:hidden;border:1px solid #ddd}
.variant-img-box img{width:100%;height:100%;object-fit:cover}
.variant-img-box a{position:absolute;top:-3px;right:-3px;background:#b91c1c;color:#fff;border-radius:50%;width:16px;height:16px;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900}
.variant-img-upload{display:flex;gap:5px;align-items:center;margin-top:6px}
.variant-img-upload input{font-size:.72rem;max-width:160px}


/* Neue Varianten im Stocklot-Edit */
.stocklot-new-variants {
  background:#fbfcfe;
  border:1px solid #e8edf2;
  border-radius:14px;
  padding:14px;
  margin-top:14px;
}
.stocklot-variant-table {
  min-width:760px;
}
.stocklot-variant-table thead th {
  background:#f8fafc;
  color:#0f1923;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.stocklot-new-variants .variant-row {
  background:#fff;
}
.stocklot-new-variants .form-label.small {
  font-size:.68rem;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:3px;
}


/* --- admin/stocklot-list.css --- */
.stocklot-list-card{background:#fff;border:1px solid #e8edf2;border-radius:16px;box-shadow:0 10px 30px rgba(15,25,35,.06);overflow:hidden}.stocklot-list-img{width:58px;height:46px;object-fit:cover;border-radius:8px;border:1px solid #e8edf2}.stocklot-list-placeholder{width:58px;height:46px;border-radius:8px;background:#f8fafc;border:1px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;color:#94a3b8}.badge-gallery{background:#1b3a4b;color:#c9a84c;border-radius:999px;padding:4px 9px;font-weight:900}.table thead th{background:#f8fafc!important;color:#0f1923;text-transform:uppercase;font-size:.74rem;font-weight:900;letter-spacing:.7px}.btn-success{border-radius:999px;font-weight:800}

/* --- admin-billing-plans.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-billing.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-categories.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-contacts.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-index.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-inquiries.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-modern.css --- */
/* admin patch css */ body{background:#f5f7fb;} .card,fieldset{border-radius:18px!important;box-shadow:0 14px 40px rgba(15,35,55,.08)!important;}

/* --- admin-product-add.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-product-edit.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-product-form.css --- */
/* Admin Product Form - extracted from product_add/product_edit inline styling */
.admin-product-section-title {
  color: #1b3a4b;
}

.admin-product-title-icon {
  color: #c9a84c;
}

.admin-product-divider {
  border-color: #f0ece6;
  opacity: 1;
}

.admin-product-form .form-label,
form .form-label.fw-bold.small {
  color: #1e2a35;
}

.admin-product-form .bg-white,
form .bg-white.rounded.shadow-sm.p-4 {
  border: 1px solid #e2ddd6;
}


/* --- admin-products.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-settings.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-stocklot-add.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-stocklot-edit.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-stocklot-form.css --- */
/* Shared admin form/submission styles.
   Keep design rules here instead of inline PHP style blocks. */
.admin-form-card{background:#fff;border:1px solid #e2ddd6;border-radius:12px;padding:18px;}
.admin-form-grid{display:grid;gap:16px;}


/* --- admin-stocklots.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-users.css --- */
/* Modular admin page stylesheet.
   Page-specific styles can be added here without touching PHP templates. */


/* --- admin-vendor-submissions.css --- */
/* Shared admin form/submission styles.
   Keep design rules here instead of inline PHP style blocks. */
.admin-form-card{background:#fff;border:1px solid #e2ddd6;border-radius:12px;padding:18px;}
.admin-form-grid{display:grid;gap:16px;}


/* --- auth/auth.css --- */
/* Harmonized Auth Pages */
.auth-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(201,168,76,.12), transparent 24%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
  padding: 56px 20px 64px;
}

.auth-shell {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  gap: 34px;
  align-items: stretch;
}

.auth-register-shell {
  grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr);
}

.auth-left {
  background:
    radial-gradient(circle at right top, rgba(201,168,76,.20), transparent 32%),
    linear-gradient(135deg,#102335,#1b3a4b);
  color: #fff;
  border-radius: 26px;
  padding: 42px;
  box-shadow: 0 22px 55px rgba(15,25,35,.16);
  min-height: 520px;
}

.auth-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(201,168,76,.15);
  color: #e6c56b;
  border: 1px solid rgba(201,168,76,.30);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.auth-left h1 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.8px;
  margin: 0 0 16px;
}

.auth-left p {
  color: rgba(255,255,255,.78);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.auth-role-info,
.auth-benefits {
  display: grid;
  gap: 13px;
  margin-top: 30px;
}

.auth-role-info article,
.auth-benefits div {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(8px);
}

.auth-role-info i,
.auth-benefits i {
  color: #e6c56b;
  font-size: 1.25rem;
}

.auth-role-info h3 {
  font-size: 1.02rem;
  font-weight: 900;
  margin: 10px 0 6px;
}

.auth-role-info p {
  font-size: .88rem;
  line-height: 1.55;
}

.auth-benefits div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.auth-card {
  background: #fff;
  border: 1px solid #e4eaf0;
  border-radius: 26px;
  box-shadow: 0 22px 55px rgba(15,25,35,.12);
  padding: 34px;
}

.auth-register-card {
  padding: 32px;
}

.auth-card-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
}

.auth-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #fff4cf;
  color: #0f1923;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.auth-card h2 {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  color: #0f1923;
  font-weight: 900;
  font-size: 1.55rem;
}

.auth-card-head p {
  color: #64748b;
  margin: 4px 0 0;
  font-size: .9rem;
}

.auth-form label {
  display: block;
  color: #1b3a4b;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .65px;
  margin: 0 0 6px;
}

.auth-form input,
.auth-form select {
  width: 100%;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  background: #fbfcfe;
  min-height: 46px;
  padding: 10px 13px;
  outline: none;
  margin-bottom: 15px;
}

.auth-form input:focus,
.auth-form select:focus {
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201,168,76,.15);
  background: #fff;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.auth-submit {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg,#c9a84c,#d9a441);
  color: #0f1923 !important;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  margin-top: 4px;
}

.auth-card-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  font-weight: 800;
}

.auth-card-links-center {
  justify-content: center;
}

.auth-card-links a {
  color: #12649a;
  text-decoration: none;
}

.auth-card-links a:hover {
  color: #c9a84c;
}

.auth-alert {
  display: flex;
  gap: 9px;
  align-items: center;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-weight: 800;
}

.auth-alert-success {
  background: #e6f5ef;
  color: #0d7a55;
  border: 1px solid #b9e7d3;
}

.auth-alert-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.auth-type-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 15px;
}

.auth-type-switch label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.auth-type-switch input {
  display: none;
}

.auth-type-switch span {
  min-height: 86px;
  border-radius: 15px;
  border: 1px solid #dbe3ea;
  background: #f8fafc;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-type-switch input:checked + span {
  border-color: #c9a84c;
  background: #fff8df;
  box-shadow: 0 0 0 3px rgba(201,168,76,.14);
}

.auth-type-switch strong {
  color: #0f1923;
  font-size: .9rem;
}

.auth-type-switch small {
  color: #64748b;
  font-size: .76rem;
  line-height: 1.35;
}

.auth-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #334155 !important;
  margin: 0 0 15px !important;
  font-size: .86rem !important;
}

.auth-checkbox input {
  width: auto;
  min-height: auto;
  margin: 3px 0 0;
}

.auth-legal-note {
  background: #f8fafc;
  border: 1px solid #e4eaf0;
  border-radius: 14px;
  color: #64748b;
  font-size: .84rem;
  line-height: 1.55;
  padding: 13px;
  margin-bottom: 15px;
}

.auth-success-box {
  text-align: center;
  padding: 20px 8px;
}

.auth-success-box > i {
  color: #0d7a55;
  font-size: 3rem;
}

.auth-success-box h3 {
  color: #0f1923;
  font-weight: 900;
  margin: 14px 0 8px;
}

.auth-success-box p {
  color: #64748b;
  line-height: 1.6;
}

.auth-success-link {
  max-width: 280px;
  margin: 16px auto 0;
}

.auth-rtl {
  direction: rtl;
}

.auth-rtl .auth-card-head,
.auth-rtl .auth-benefits div {
  flex-direction: row-reverse;
}


/* --- auth/login.css --- */

.auth-wrapper{
    padding:80px 20px;
    background:linear-gradient(180deg,#f8fafc,#ffffff);
}
.auth-container{
    max-width:1300px;
    margin:auto;
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:40px;
}
.auth-info h1{
    font-size:42px;
    margin-bottom:20px;
}
.badge{
    display:inline-block;
    background:#d4af37;
    color:#fff;
    padding:8px 14px;
    border-radius:30px;
    margin-bottom:20px;
}
.login-types{
    display:grid;
    gap:20px;
    margin-top:30px;
}
.type-card{
    background:#fff;
    border-radius:18px;
    padding:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}
.auth-box{
    background:#0f2235;
    color:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}
.auth-box h2{
    margin-bottom:25px;
}
.auth-box input,.auth-box select{
    width:100%;
    padding:16px;
    margin-bottom:16px;
    border-radius:12px;
    border:1px solid #ddd;
}
.auth-box button{
    width:100%;
    padding:16px;
    border:none;
    border-radius:12px;
    background:#d4af37;
    font-weight:bold;
    cursor:pointer;
}
.auth-links{
    display:flex;
    justify-content:space-between;
    margin-top:20px;
}
@media(max-width:900px){
    .auth-container{
        grid-template-columns:1fr;
    }
}


/* --- cms-admin.css --- */
/* ==========================================================
   TEXTIL CMS PROFESSIONAL CORE DESIGN
   applies to all /admin/cms pages
   ========================================================== */

:root {
  --cms-night: #0f1923;
  --cms-night-2: #142433;
  --cms-navy: #1b3a4b;
  --cms-gold: #c9a84c;
  --cms-gold-2: #e2bd5c;
  --cms-bg: #f4f6f8;
  --cms-card: #ffffff;
  --cms-border: #e4eaf0;
  --cms-text: #0f1923;
  --cms-muted: #64748b;
  --cms-soft: #f8fafc;
  --cms-green: #0d7a55;
  --cms-red: #b91c1c;
  --cms-radius: 18px;
  --cms-shadow: 0 16px 38px rgba(15, 25, 35, .08);
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 96% 0%, rgba(201,168,76,.10), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #f2f5f8 100%);
  color: var(--cms-text);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.cms-app {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

/* Sidebar */
.cms-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background:
    radial-gradient(circle at 0 0, rgba(201,168,76,.16), transparent 30%),
    linear-gradient(180deg, #0d1721 0%, #101d2a 100%);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 10px 0 30px rgba(15,25,35,.16);
  z-index: 1000;
}

.cms-brand {
  height: 76px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cms-brand-link {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
}

.cms-brand-link:hover {
  color: #fff;
}

.cms-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(201,168,76,.13);
  color: var(--cms-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cms-brand-text {
  font-size: 1.05rem;
}

.cms-brand-text span {
  color: var(--cms-gold);
  margin-left: 2px;
}

.cms-sidebar-toggle,
.cms-mobile-menu-btn {
  border: 0;
  background: transparent;
  color: inherit;
}

.cms-sidebar-toggle {
  display: none;
  color: rgba(255,255,255,.75);
}

.cms-nav {
  padding: 16px 0 24px;
}

.cms-nav-section {
  color: rgba(201,168,76,.70);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 17px 18px 7px;
}

.cms-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 18px;
  color: rgba(255,255,255,.72);
  border-left: 3px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.cms-nav-item i {
  width: 18px;
  color: #8fc9ec;
  font-size: .98rem;
}

.cms-nav-item span {
  font-size: .9rem;
  font-weight: 500;
}

.cms-nav-item:hover,
.cms-nav-item.active {
  color: #fff;
  background: rgba(201,168,76,.12);
  border-left-color: var(--cms-gold);
}

.cms-nav-item:hover i,
.cms-nav-item.active i {
  color: var(--cms-gold);
}

.cms-nav-logout {
  color: #ffb4b4;
}

.cms-nav-logout i {
  color: #ff7b7b;
}

.cms-nav-separator {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 18px 18px 10px;
}

/* Main */
.cms-main {
  min-width: 0;
}

.cms-topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  min-height: 76px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cms-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  box-shadow: 0 8px 24px rgba(15,25,35,.045);
}

.cms-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cms-topbar h1 {
  margin: 0;
  color: var(--cms-text);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.2px;
}

.cms-topbar p {
  margin: 2px 0 0;
  color: var(--cms-muted);
  font-size: .78rem;
}

.cms-mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--cms-soft);
  border: 1px solid var(--cms-border);
  color: var(--cms-navy);
}

.cms-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cms-muted);
  font-size: .86rem;
}

.cms-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--cms-border);
  color: var(--cms-navy);
  font-size: .72rem;
  font-weight: 900;
}

.cms-user-name {
  font-weight: 700;
}

.cms-page {
  padding: 30px;
  min-width: 0;
}

/* Dashboard */
.cms-dashboard {
  max-width: 1480px;
}

.cms-hero-card {
  background:
    radial-gradient(circle at right top, rgba(201,168,76,.23), transparent 32%),
    linear-gradient(135deg, #102335 0%, #1b3a4b 100%);
  color: #fff;
  border-radius: 24px;
  padding: 30px;
  box-shadow: var(--cms-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.cms-kicker {
  color: var(--cms-gold-2);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cms-hero-card h2 {
  margin: 0;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -.6px;
}

.cms-hero-card p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.72);
}

.cms-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-cms-primary,
.btn-cms-light,
.btn-cms-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 900;
  border: 0;
  transition: transform .18s ease, filter .18s ease;
}

.btn-cms-primary {
  background: linear-gradient(135deg, var(--cms-gold), #d9a441);
  color: #0f1923 !important;
}

.btn-cms-light {
  background: rgba(255,255,255,.12);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18);
}

.btn-cms-primary:hover,
.btn-cms-light:hover,
.btn-cms-outline:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

/* legacy support */
.btn-cms,
.btn-cms-primary {
  background: linear-gradient(135deg, var(--cms-gold), #d9a441);
  color: #0f1923 !important;
  border: none;
  border-radius: 999px;
  font-weight: 900;
}

.cms-stat-grid,
.row.g-3.mb-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px !important;
}

.cms-stat-card,
.stat-box {
  background: #fff;
  border: 1px solid var(--cms-border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(15,25,35,.06);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

.cms-stat-card::after,
.stat-box::after {
  content: "";
  position: absolute;
  inset: auto -20px -35px auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(201,168,76,.10);
}

.cms-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--cms-navy), #254d63);
  color: var(--cms-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.cms-stat-number,
.stat-box .sn {
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 900;
  color: var(--cms-text);
}

.cms-stat-label,
.stat-box .sl {
  margin-top: 6px;
  color: var(--cms-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
}

.cms-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

.cms-panel,
.quick-card,
.system-card {
  background: #fff;
  border: 1px solid var(--cms-border);
  border-radius: 20px;
  box-shadow: var(--cms-shadow);
  overflow: hidden;
}

.cms-panel-head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid #eef2f6;
}

.cms-panel-head h3 {
  margin: 0;
  color: var(--cms-text);
  font-size: 1.05rem;
  font-weight: 900;
}

.cms-panel-head p {
  margin: 4px 0 0;
  color: var(--cms-muted);
  font-size: .8rem;
}

.cms-table,
.table {
  background: #fff;
  margin-bottom: 0;
}

.cms-table thead th,
.table thead th {
  background: #f8fafc !important;
  color: var(--cms-text);
  border-color: #eef2f6 !important;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .75px;
  font-weight: 900;
  padding: 12px 16px;
}

.cms-table tbody td,
.table tbody td {
  border-color: #eef2f6 !important;
  padding: 12px 16px;
  vertical-align: middle;
}

.cms-table tbody tr:hover,
.table tbody tr:hover {
  background: #fbfcfe;
}

.cms-action-badge,
.badge {
  border-radius: 999px;
  font-size: .72rem;
  padding: 5px 9px;
  font-weight: 900;
}

.cms-action-badge {
  background: #e8eef5;
  color: var(--cms-navy);
}

.cms-quick-list {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.cms-quick-list a,
.quick-card a {
  min-height: 46px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid var(--cms-border);
  color: var(--cms-text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  font-weight: 800;
}

.cms-quick-list a:hover,
.quick-card a:hover {
  background: #fff7df;
  border-color: rgba(201,168,76,.45);
}

.cms-quick-list i {
  color: var(--cms-gold);
}

.cms-system-info {
  padding: 18px;
  border-top: 1px solid #eef2f6;
}

.cms-system-info h4 {
  font-size: .88rem;
  font-weight: 900;
  color: var(--cms-text);
  margin: 0 0 10px;
}

.cms-system-info div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  color: var(--cms-muted);
  border-bottom: 1px solid #f1f5f9;
}

.cms-system-info div:last-child {
  border-bottom: 0;
}

.cms-system-info strong {
  color: var(--cms-text);
  font-weight: 800;
}

/* Generic CMS pages */
.card,
.cms-card,
.bg-white,
form.bg-white {
  border: 1px solid var(--cms-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--cms-shadow) !important;
}

.form-label {
  font-size: .78rem;
  color: var(--cms-navy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .65px;
}

.form-control,
.form-select {
  border: 1px solid #dbe3ea;
  border-radius: 11px;
  min-height: 42px;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cms-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.16) !important;
}

textarea.form-control {
  min-height: 120px;
}

.alert {
  border-radius: 14px;
  border: 0;
}

/* Legacy right column quick card fallback */
.quick-card,
.system-card {
  padding: 18px;
  margin-bottom: 16px;
}

.quick-card h5,
.system-card h5 {
  font-size: .95rem;
  font-weight: 900;
  margin-bottom: 12px;
}

.quick-card a {
  margin-bottom: 9px;
  justify-content: center;
}

.system-card .row,
.system-card div {
  font-size: .86rem;
}

/* Tables */
.table-responsive {
  border-radius: 18px;
}

/* Overlay */
.cms-overlay {
  display: none;
}


/* --- vendor-checkout.css --- */
/* Vendor checkout page */


/* --- vendor-dashboard.css --- */
/* Vendor dashboard page styles are mostly inline-safe placeholders after modularization. */


/* --- vendor-pay_listing.css --- */
/* Vendor listing payment page */


/* --- vendor-payment_done.css --- */
.done-wrap { max-width:620px; margin:60px auto; padding:0 20px; text-align:center; }
.done-icon { width:72px; height:72px; background:#e8f5ef; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:2rem; color:#0d7a55; }
.done-title { font-family:'Raleway',sans-serif; font-weight:800; font-size:1.6rem; color:#0f1923; margin-bottom:8px; }
.done-sub   { font-family:'Lato',sans-serif; font-weight:300; color:#64748b; margin-bottom:32px; }
.invoice-box { background:#fff; border-radius:14px; padding:28px; border:1px solid #e2ddd6; text-align:left; margin-bottom:24px; }
.inv-header  { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; padding-bottom:16px; border-bottom:2px solid #c9a84c; }
.inv-logo    { font-family:'Raleway',sans-serif; font-weight:800; font-size:1.1rem; color:#0f1923; }
.inv-nr      { font-family:'Lato',sans-serif; font-size:.8rem; color:#64748b; text-align:right; }
.inv-nr strong { font-family:'Raleway',sans-serif; font-size:1rem; color:#0f1923; display:block; }
.inv-row     { display:flex; justify-content:space-between; font-family:'Lato',sans-serif; font-size:.88rem; padding:6px 0; border-bottom:1px solid #faf7f2; }
.inv-row:last-child { border-bottom:none; }
.inv-total   { display:flex; justify-content:space-between; padding:12px 0 0; margin-top:8px; border-top:2px solid #0f1923; }
.inv-total-lbl { font-family:'Raleway',sans-serif; font-weight:800; font-size:1rem; color:#0f1923; }
.inv-total-val { font-family:'Raleway',sans-serif; font-weight:800; font-size:1.1rem; color:#0f1923; }
.btn-continue { background:#c9a84c; color:#0f1923; border:none; padding:13px 36px; border-radius:25px; font-family:'Raleway',sans-serif; font-weight:800; font-size:.92rem; letter-spacing:.3px; cursor:pointer; text-decoration:none; display:inline-block; transition:all .2s; }
.btn-continue:hover { background:#e0bf65; color:#0f1923; transform:translateY(-2px); }

/* --- vendor-payments.css --- */
/* Vendor payment confirmation/listing paid pages */


/* --- vendor-pricing.css --- */
/* vendor-pricing.css */
.pricing-wrap{
  max-width:1240px;
  margin:0 auto;
  padding:46px 22px 68px;
  background:
    radial-gradient(circle at 8% 0%, rgba(201,168,76,.10), transparent 28%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.pricing-hero{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  padding:42px 34px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at right top, rgba(201,168,76,.28), transparent 35%),
    linear-gradient(135deg,#102335,#1b3a4b);
  border-bottom:3px solid #c9a84c;
  box-shadow:0 22px 55px rgba(15,25,35,.16);
  margin-bottom:24px;
}

.pricing-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 9px, transparent 9px 18px);
  pointer-events:none;
}

.pricing-hero h1,
.pricing-hero p{
  position:relative;
  z-index:1;
}

.pricing-hero h1{
  color:#fff;
  font-family:'Raleway',sans-serif;
  font-size:clamp(2rem,3.6vw,3rem);
  font-weight:900;
  letter-spacing:-.8px;
  margin:0 0 12px;
}

.pricing-hero p{
  color:rgba(255,255,255,.78);
  font-family:'Lato',sans-serif;
  font-size:1.04rem;
  margin:0;
}

.billing-toggle{
  width:max-content;
  max-width:100%;
  margin:0 auto 32px;
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid #e4eaf0;
  border-radius:999px;
  padding:10px 14px;
  box-shadow:0 12px 32px rgba(15,25,35,.08);
  font-family:'Raleway',sans-serif;
  font-weight:800;
  color:#1b3a4b;
}

.toggle-track{
  width:58px;
  height:30px;
  border-radius:999px;
  background:#0f1923;
  position:relative;
  cursor:pointer;
  transition:.18s;
}

.toggle-thumb{
  position:absolute;
  width:24px;
  height:24px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#c9a84c;
  transition:.18s;
}

.billing-toggle.yearly .toggle-thumb,
.toggle-track.yearly .toggle-thumb{
  transform:translateX(28px);
}

.save-badge{
  color:#0d7a55;
  background:#e6f5ef;
  border-radius:999px;
  padding:3px 8px;
  font-size:.72rem;
}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-bottom:42px;
}

.plan-card{
  position:relative;
  background:#fff;
  border:1px solid #e4eaf0;
  border-radius:24px;
  padding:28px;
  box-shadow:0 18px 42px rgba(15,25,35,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}

.plan-card:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 60px rgba(15,25,35,.13);
  border-color:rgba(201,168,76,.55);
}

.plan-card.featured{
  border:2px solid #c9a84c;
  box-shadow:0 24px 58px rgba(201,168,76,.18);
}

.plan-card.featured:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(201,168,76,.08),transparent 36%);
  pointer-events:none;
}

.plan-badge{
  position:absolute;
  right:18px;
  top:18px;
  background:#c9a84c;
  color:#0f1923;
  border-radius:999px;
  padding:6px 11px;
  font-family:'Raleway',sans-serif;
  font-size:.72rem;
  font-weight:900;
}

.plan-name{
  color:#0f1923;
  font-family:'Raleway',sans-serif;
  font-size:1.24rem;
  font-weight:900;
  margin-bottom:12px;
  padding-right:88px;
}

.plan-price{
  color:#0f1923;
  margin-bottom:16px;
}

.plan-price .amount{
  font-family:'Raleway',sans-serif;
  font-size:2.7rem;
  font-weight:900;
  letter-spacing:-1px;
}

.plan-price .period{
  color:#64748b;
  font-size:.92rem;
}

.yearly-note{
  display:block;
  color:#0d7a55;
  font-size:.8rem;
  margin-top:6px;
  font-weight:800;
}

.plan-divider{
  border:0;
  border-top:1px solid #e4eaf0;
  margin:18px 0;
}

.plan-features{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:grid;
  gap:12px;
}

.plan-features li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:#334155;
  font-family:'Lato',sans-serif;
  font-size:.94rem;
  line-height:1.35;
}

.feat-check{
  color:#0d7a55;
  margin-top:2px;
}

.feat-x{
  color:#94a3b8;
  margin-top:2px;
}

.plan-btn{
  width:100%;
  min-height:46px;
  border-radius:999px;
  border:1px solid #c9a84c;
  font-family:'Raleway',sans-serif;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}

.plan-btn-gold{
  background:#c9a84c;
  color:#0f1923;
}

.plan-btn-outline{
  background:#fff;
  color:#0f1923;
}

.plan-btn-current{
  background:#e6f5ef;
  color:#0d7a55;
  border-color:#b9e7d3;
  cursor:not-allowed;
}

.plan-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(201,168,76,.18);
}

.fees-section{
  background:#fff;
  border:1px solid #e4eaf0;
  border-radius:24px;
  box-shadow:0 18px 42px rgba(15,25,35,.07);
  padding:28px;
  margin-bottom:42px;
}

.fees-title{
  font-family:'Raleway',sans-serif;
  color:#0f1923;
  font-size:1.3rem;
  font-weight:900;
  margin-bottom:6px;
}

.fees-sub{
  color:#64748b;
  margin-bottom:18px;
  font-size:.94rem;
}

.fee-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 0;
  border-top:1px solid #e4eaf0;
}

.fee-left h5{
  margin:0 0 4px;
  color:#0f1923;
  font-family:'Raleway',sans-serif;
  font-weight:900;
}

.fee-left p{
  margin:0;
  color:#64748b;
}

.fee-price{
  color:#0f1923;
  font-family:'Raleway',sans-serif;
  font-size:1.4rem;
  font-weight:900;
  white-space:nowrap;
}

.fee-price small{
  display:block;
  color:#64748b;
  font-size:.72rem;
  font-weight:700;
  text-align:right;
}

.faq-item{
  background:#fff;
  border:1px solid #e4eaf0;
  border-radius:16px;
  margin-bottom:10px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(15,25,35,.04);
}

.faq-q{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  cursor:pointer;
  padding:16px 18px;
  font-family:'Raleway',sans-serif;
  font-weight:900;
  color:#0f1923;
}

.faq-a{
  display:none;
  padding:0 18px 18px;
  color:#64748b;
  line-height:1.6;
}

.faq-a.open{
  display:block;
}

/* Inline-current-sub replacement support */
.pricing-wrap > div[style*="background:#e8f5ef"]{
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(13,122,85,.08) !important;
}


/* --- vendor-register.css --- */
/* vendor-register.css */
.vendor-register-page{
  padding:46px 22px 62px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(201,168,76,.10), transparent 26%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 100%) !important;
}

.vendor-register-shell{
  max-width:1280px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:minmax(380px,.95fr) minmax(440px,.82fr) !important;
  gap:30px !important;
  align-items:stretch !important;
}

.vendor-register-info{
  position:relative !important;
  overflow:hidden !important;
  border-radius:26px !important;
  padding:34px !important;
  color:#fff !important;
  background:
    radial-gradient(circle at right top, rgba(201,168,76,.28), transparent 35%),
    linear-gradient(135deg,#102335,#1b3a4b) !important;
  border-bottom:3px solid #c9a84c !important;
  box-shadow:0 22px 55px rgba(15,25,35,.16) !important;
}

.vendor-register-info::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 9px, transparent 9px 18px);
  pointer-events:none;
}

.vendor-register-info>*{
  position:relative;
  z-index:1;
}

.vendor-info-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  background:rgba(201,168,76,.18) !important;
  border:1px solid rgba(201,168,76,.35) !important;
  color:#f1d27a !important;
  font-family:'Raleway',sans-serif !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  margin-bottom:18px !important;
}

.vendor-register-info h1{
  font-family:'Raleway',sans-serif !important;
  font-size:clamp(2rem,3.4vw,3rem) !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:-.7px !important;
  color:#fff !important;
  margin:0 0 14px !important;
}

.vendor-info-lead{
  max-width:680px !important;
  color:rgba(255,255,255,.78) !important;
  font-family:'Lato',sans-serif !important;
  font-size:1rem !important;
  line-height:1.7 !important;
  margin:0 0 24px !important;
}

.vendor-info-visual{
  position:relative !important;
  height:155px !important;
  border-radius:20px !important;
  margin:0 0 24px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  overflow:hidden !important;
}

.vendor-box{
  position:absolute !important;
  bottom:36px !important;
  width:86px !important;
  height:58px !important;
  border-radius:14px !important;
  box-shadow:0 18px 28px rgba(0,0,0,.24) !important;
}

.vendor-box-1{
  left:36px !important;
  background:linear-gradient(135deg,#c9a84c,#f0d47a) !important;
  transform:rotate(-8deg) !important;
}

.vendor-box-2{
  left:128px !important;
  bottom:54px !important;
  background:linear-gradient(135deg,#dce3ec,#617385) !important;
  transform:rotate(6deg) !important;
}

.vendor-box-3{
  right:42px !important;
  background:linear-gradient(135deg,#174255,#0f2835) !important;
  transform:rotate(-4deg) !important;
}

.vendor-flow-card{
  position:absolute !important;
  left:28px !important;
  right:28px !important;
  bottom:18px !important;
  min-height:44px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#c9a84c,#e0bf65) !important;
  color:#0f1923 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  font-family:'Raleway',sans-serif !important;
  box-shadow:0 12px 24px rgba(0,0,0,.22) !important;
  font-size:.82rem !important;
}

.vendor-flow-card span{
  width:24px !important;
  height:24px !important;
  border-radius:50% !important;
  background:#0f1923 !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:.72rem !important;
  font-weight:900 !important;
}

.vendor-flow-card strong{
  font-weight:900 !important;
}

.vendor-benefits-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

.vendor-benefit-box{
  display:grid !important;
  grid-template-columns:44px 1fr !important;
  gap:12px !important;
  align-items:start !important;
  padding:15px !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  backdrop-filter:blur(8px) !important;
}

.vendor-benefit-box span{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#c9a84c !important;
  color:#0f1923 !important;
  font-size:1.15rem !important;
}

.vendor-benefit-box h3{
  color:#fff !important;
  font-family:'Raleway',sans-serif !important;
  font-size:.98rem !important;
  font-weight:900 !important;
  margin:0 0 4px !important;
}

.vendor-benefit-box p{
  color:rgba(255,255,255,.68) !important;
  font-family:'Lato',sans-serif !important;
  font-size:.82rem !important;
  line-height:1.45 !important;
  margin:0 !important;
}

.vendor-info-note{
  display:flex !important;
  gap:10px !important;
  align-items:flex-start !important;
  margin-top:20px !important;
  padding:14px !important;
  border-radius:16px !important;
  background:rgba(201,168,76,.12) !important;
  border:1px solid rgba(201,168,76,.25) !important;
  color:rgba(255,255,255,.84) !important;
  font-size:.86rem !important;
  line-height:1.5 !important;
}

.vendor-info-note a{
  color:#f1d27a !important;
  font-weight:900 !important;
  text-decoration:underline !important;
}

.vendor-register-form-area{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.vendor-form-card{
  width:100% !important;
  max-width:580px !important;
  background:#fff !important;
  border:1px solid #e2ddd6 !important;
  border-top:3px solid #c9a84c !important;
  border-radius:22px !important;
  padding:30px !important;
  box-shadow:0 18px 45px rgba(15,25,35,.10) !important;
}

.vendor-register-tabs{
  display:flex !important;
  gap:0 !important;
  margin-bottom:24px !important;
  border:1.5px solid #e2ddd6 !important;
  border-radius:13px !important;
  overflow:hidden !important;
  background:#fff !important;
}

.vendor-register-tabs>*{
  flex:1 !important;
  text-align:center !important;
  padding:13px 8px !important;
  font-family:'Raleway',sans-serif !important;
  font-weight:800 !important;
  font-size:.84rem !important;
  text-decoration:none !important;
}

.vendor-register-tabs .active{
  background:#0f1923 !important;
  color:#fff !important;
}

.vendor-register-tabs a{
  background:#faf7f2 !important;
  color:#0f1923 !important;
  border-right:1.5px solid #e2ddd6 !important;
}

.vendor-form-head{
  text-align:center !important;
  margin-bottom:18px !important;
}

.vendor-form-head h2{
  font-family:'Raleway',sans-serif !important;
  color:#0f1923 !important;
  font-size:1.55rem !important;
  font-weight:900 !important;
  margin:0 0 7px !important;
}

.vendor-form-head h2 i{
  color:#c9a84c !important;
}

.vendor-form-head p{
  color:#64748b !important;
  font-family:'Lato',sans-serif !important;
  margin:0 !important;
  font-size:.92rem !important;
}

.vendor-mini-steps{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 0 20px !important;
}

.vendor-mini-steps div{
  background:#faf7f2 !important;
  border:1px solid #e8d49a !important;
  border-radius:13px !important;
  padding:10px !important;
  text-align:center !important;
}

.vendor-mini-steps strong{
  display:block !important;
  color:#c9a84c !important;
  font-family:'Raleway',sans-serif !important;
  font-size:.8rem !important;
}

.vendor-mini-steps span{
  color:#334155 !important;
  font-size:.75rem !important;
  font-weight:800 !important;
}

.vendor-register-form .form-label{
  font-family:'Lato',sans-serif !important;
  font-size:.8rem !important;
  font-weight:800 !important;
  color:#475569 !important;
  margin-bottom:6px !important;
}

.vendor-register-form .form-control{
  border:1.5px solid #d8d3cc !important;
  border-radius:10px !important;
  min-height:42px !important;
  background:#faf7f2 !important;
  font-family:'Lato',sans-serif !important;
}

.vendor-register-form .form-control:focus{
  border-color:#c9a84c !important;
  box-shadow:0 0 0 3px rgba(201,168,76,.15) !important;
  background:#fff !important;
}

.vendor-duty-box{
  display:flex !important;
  gap:10px !important;
  align-items:flex-start !important;
  padding:14px !important;
  border-radius:14px !important;
  background:#fff8df !important;
  border:1px solid #e8d49a !important;
  color:#5f4b00 !important;
  font-size:.84rem !important;
  line-height:1.45 !important;
}

.vendor-duty-box i{
  color:#c9a84c !important;
  margin-top:2px !important;
}

.btn-vendor-register,
.btn-vendor-primary{
  width:100% !important;
  border:0 !important;
  border-radius:999px !important;
  background:#c9a84c !important;
  color:#0f1923 !important;
  font-family:'Raleway',sans-serif !important;
  font-weight:900 !important;
  min-height:46px !important;
  padding:12px !important;
  cursor:pointer !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.vendor-pricing-link{
  margin-top:17px !important;
  background:#f8fafc !important;
  border:1px solid #e4eaf0 !important;
  border-radius:14px !important;
  padding:14px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:12px !important;
  color:#64748b !important;
  font-size:.86rem !important;
}

.vendor-pricing-link a,
.btn-vendor-secondary{
  color:#0f1923 !important;
  font-weight:900 !important;
  text-decoration:none !important;
  background:#fff !important;
  border:1px solid #e8d49a !important;
  border-radius:999px !important;
  padding:8px 12px !important;
}

.vendor-login-hint{
  text-align:center !important;
  color:#64748b !important;
  margin:17px 0 0 !important;
  font-size:.88rem !important;
}

.vendor-login-hint a{
  color:#0f1923 !important;
  font-weight:900 !important;
}

.vendor-success-box{
  text-align:center !important;
  padding:22px 8px !important;
}

.vendor-success-icon{
  width:68px !important;
  height:68px !important;
  border-radius:50% !important;
  background:#e8f5ef !important;
  color:#0d7a55 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto 16px !important;
  font-size:1.9rem !important;
}

.vendor-success-actions{
  display:grid !important;
  gap:10px !important;
  max-width:300px !important;
  margin:18px auto 0 !important;
}

@media(max-width:1080px){
  .vendor-register-shell{
    grid-template-columns:1fr !important;
  }
  .vendor-form-card{
    max-width:760px !important;
  }
}

@media(max-width:768px){
  .vendor-register-page{
    padding:28px 16px 44px !important;
  }
  .vendor-register-info,
  .vendor-form-card{
    border-radius:20px !important;
    padding:24px !important;
  }
  .vendor-benefits-grid{
    grid-template-columns:1fr !important;
  }
  .vendor-register-tabs{
    flex-direction:column !important;
  }
  .vendor-register-tabs a{
    border-right:0 !important;
    border-bottom:1.5px solid #e2ddd6 !important;
  }
  .vendor-mini-steps{
    grid-template-columns:1fr !important;
  }
  .vendor-pricing-link{
    display:grid !important;
    text-align:center !important;
  }
}

@media(max-width:480px){
  .vendor-register-info h1{
    font-size:1.7rem !important;
  }
  .vendor-flow-card{
    left:12px !important;
    right:12px !important;
    gap:5px !important;
    font-size:.7rem !important;
  }
}


/* --- vendor-submit.css --- */
/* Vendor submit page base styles are already referenced here. */



/* --- Extracted inline CSS / utilities --- */
.contact-form-card{max-width:560px;}
.icon-whatsapp,.text-whatsapp{color:var(--col-whatsapp)!important;}
.icon-gold,.text-gold{color:var(--col-gold)!important;}
.icon-info,.text-info-soft{color:var(--col-info)!important;}
.icon-success,.text-success-soft{color:var(--col-success)!important;}
.text-muted-soft{color:#888!important;}
.text-small-75{font-size:.75rem;}
.text-small-78{font-size:.78rem;}
.text-small-80{font-size:.8rem;}
.text-small-82{font-size:.82rem;}
.text-small-88{font-size:.88rem;}
.text-small-90{font-size:.9rem;}
.fw-head{font-family:var(--font-head);font-weight:800;}
.fw-body-light{font-family:var(--font-body);font-weight:300;}
.d-none-initial{display:none;}
.table-scroll{overflow-x:auto;}
.variant-image-cell{width:64px;}
.ai-translate-container{max-width:960px;padding-bottom:32px;}
.auth-inline-button{display:inline-flex!important;}
.share-small-button{font-size:.82rem!important;padding:8px 18px!important;}
.share-wa-button{padding:6px 14px!important;font-size:.78rem!important;}
.product-success-note{font-size:.9rem;opacity:.9;}
.product-locked-empty-icon{font-size:2.5rem;color:#ccc;margin-bottom:12px;}
.pd-price-icon{font-size:2.5rem;opacity:.4;}
.pd-locked-newsletter{border-color:#f0c040!important;}
.lock-newsletter{color:#f0c040!important;}
.newsletter-box{max-width:480px;margin:0 auto;background:#fff;border-radius:14px;padding:40px;border:1px solid #e2ddd6;}
.newsletter-icon{font-size:3rem;margin-bottom:16px;}
.newsletter-title{font-family:var(--font-head);font-weight:800;color:#1b3a4b;}
.newsletter-text{color:#64748b;}
.sl-flex-fill{flex:1;}
.sl-category-badge{background:rgba(255,255,255,.12)!important;color:#fff!important;}
.sl-bar-avail{width:0;}
.sl-label-available{color:#1e8449;}
.sl-label-total{color:#888;}
.sl-helper-text{margin-top:12px;font-family:var(--font-body);font-size:.8rem;font-weight:300;color:#888;}
.sl-desc-box{background:#fff;border-radius:12px;padding:20px 24px;border:1px solid #e8ecf0;margin-bottom:24px;}
.sl-desc-title{font-family:var(--font-head);font-weight:800;font-size:.9rem;color:#444;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.sl-desc-text{font-family:var(--font-body);font-weight:300;color:#555;font-size:.92rem;line-height:1.75;margin:0;}
.sl-sticky-box{position:sticky;top:20px;}
.sl-price-icon{font-size:2rem;opacity:.3;}
.sl-lock-icon{font-size:2.2rem;color:#ccc;margin-bottom:10px;}
.sl-lock-newsletter-icon{font-size:2.2rem;color:#f0c040;margin-bottom:10px;}
.sl-locked-newsletter{border-color:#f0c040!important;}
.sl-share-form{margin-top:8px;}
.sl-share-button{width:100%;justify-content:center;}
.sl-share-label{font-family:var(--font-body);font-size:.78rem;font-weight:700;margin-bottom:6px;}
.sl-inquiry-success-title{font-family:var(--font-head);font-weight:800;}
.sl-inquiry-success-text{font-family:var(--font-body);font-weight:300;font-size:.88rem;}
.selected-info-box{background:#eaf1fb;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-family:var(--font-body);font-size:.82rem;color:#1a5276;display:none;}
.sl-locked-login-box{text-align:center;padding:16px;}
.dynamic-badge[data-bg],.dynamic-bg[data-bg],.color-dot[data-bg]{background:var(--dynamic-bg,var(--col-gold));}
.dynamic-progress[data-pct]{width:var(--dynamic-width,0%);}
.nav-auth-link-gold{color:var(--col-gold)!important;}


/* =========================================================
   CMS Pages (page.php)
   ========================================================= */
.cms-page{
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 42%,#f7f3ea 100%);
  color:#1f2937;
}

.cms-hero{
  position:relative;
  overflow:hidden;
  padding:72px 0 42px;
  background:
    radial-gradient(circle at 18% 20%,rgba(201,168,76,.22),transparent 30%),
    radial-gradient(circle at 82% 10%,rgba(255,255,255,.12),transparent 28%),
    linear-gradient(135deg,var(--col-navy,#1b3a4b),var(--col-night,#0f1923));
}

.cms-hero::after{
  content:"";
  position:absolute;
  inset:auto -8% -95px -8%;
  height:150px;
  background:#f8fafc;
  border-radius:50% 50% 0 0;
}

.cms-hero-card{
  position:relative;
  z-index:1;
  max-width:920px;
  margin:0 auto;
  text-align:center;
  padding:8px 18px;
}

.cms-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.88);
  font-family:var(--font-head,'Raleway',sans-serif);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.cms-title{
  color:#fff;
  font-family:var(--font-head,'Raleway',sans-serif);
  font-size:clamp(2rem,4.5vw,3.6rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.055em;
  margin:0;
}

.cms-subtitle{
  max-width:760px;
  margin:18px auto 0;
  color:rgba(255,255,255,.82);
  font-size:clamp(1rem,1.8vw,1.2rem);
  line-height:1.75;
  font-weight:300;
}

.cms-content-section{
  position:relative;
  z-index:2;
  padding:26px 0 54px;
}

.cms-content-card{
  max-width:940px;
  margin:0 auto;
  padding:48px 54px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(226,221,214,.9);
  border-radius:28px;
  box-shadow:0 22px 60px rgba(15,25,35,.09);
}

.cms-section-title{
  position:relative;
  margin:38px 0 16px;
  padding-inline-start:18px;
  color:var(--col-navy,#1b3a4b);
  font-family:var(--font-head,'Raleway',sans-serif);
  font-size:1.28rem;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.02em;
}

.cms-section-title:first-child{
  margin-top:0;
}

.cms-section-title::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.22em;
  width:5px;
  height:1.15em;
  border-radius:999px;
  background:var(--col-gold,#c9a84c);
}

.cms-paragraph{
  margin:0 0 15px;
  color:#374151;
  font-size:1.03rem;
  line-height:1.95;
  font-weight:300;
}

.cms-content-gap{
  height:10px;
}

.cms-list{
  display:grid;
  gap:10px;
  margin:18px 0 22px;
  padding:0;
  list-style:none;
}

.cms-list li{
  position:relative;
  padding:14px 16px 14px 42px;
  background:#f8fafc;
  border:1px solid #edf0f2;
  border-radius:16px;
  color:#334155;
  line-height:1.7;
}

.cms-list li::before{
  content:"✓";
  position:absolute;
  left:16px;
  top:14px;
  color:var(--col-gold,#c9a84c);
  font-weight:800;
}

html[dir="rtl"] .cms-list li{
  padding:14px 42px 14px 16px;
}

html[dir="rtl"] .cms-list li::before{
  left:auto;
  right:16px;
}

.cms-cta-section{
  padding:0 0 64px;
}

.cms-cta-card{
  max-width:940px;
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  padding:30px 34px;
  border-radius:28px;
  background:linear-gradient(135deg,#fff,#fbf7ee);
  border:1px solid #eadfca;
  box-shadow:0 18px 45px rgba(15,25,35,.07);
}

.cms-cta-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:var(--col-gold,#c9a84c);
  color:#0f1923;
  font-size:1.35rem;
}

.cms-cta-content h2{
  margin:0 0 6px;
  color:var(--col-navy,#1b3a4b);
  font-family:var(--font-head,'Raleway',sans-serif);
  font-size:1.3rem;
  font-weight:800;
}

.cms-cta-content p{
  margin:0;
  color:#64748b;
  line-height:1.7;
  font-weight:300;
}

.cms-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:12px 22px;
  border-radius:999px;
  font-family:var(--font-head,'Raleway',sans-serif);
  font-size:.92rem;
  font-weight:800;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}

.cms-btn:hover{
  transform:translateY(-2px);
  text-decoration:none;
}

.cms-btn-primary{
  background:var(--col-gold,#c9a84c);
  color:#0f1923;
  box-shadow:0 10px 24px rgba(201,168,76,.28);
}

.cms-btn-primary:hover{
  color:#0f1923;
  background:#d9b85b;
}

.cms-empty-state{
  padding:72px 0;
  background:#f8fafc;
}

.cms-empty-card{
  max-width:560px;
  margin:0 auto;
  padding:44px 34px;
  text-align:center;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:28px;
  box-shadow:0 18px 45px rgba(15,25,35,.08);
}

.cms-empty-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border-radius:20px;
  background:#fff7ed;
  color:#c2410c;
  font-size:1.6rem;
}

.cms-empty-card h1{
  margin:0 0 10px;
  color:var(--col-navy,#1b3a4b);
  font-family:var(--font-head,'Raleway',sans-serif);
  font-weight:800;
}

.cms-empty-card p{
  margin:0 0 22px;
  color:#64748b;
}

html[dir="rtl"] .cms-hero-card,
html[dir="rtl"] .cms-empty-card{
  text-align:right;
}

html[dir="rtl"] .cms-btn .bi-arrow-right::before{
  content:"\f12f";
}


/* =========================================================
   HOME CLEAN B2B LAYOUT - 20260508 FIX
   ========================================================= */
.home-hero-pro{position:relative;overflow:hidden;background:#071521;color:#fff;min-height:290px;display:flex;align-items:center;border-bottom:1px solid rgba(201,168,76,.25);}
.home-hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,21,33,.96) 0%,rgba(7,21,33,.82) 44%,rgba(7,21,33,.35) 100%),radial-gradient(circle at 80% 50%,rgba(201,168,76,.22),transparent 32%),url('../images/hero-fabric.jpg');background-size:cover;background-position:center;opacity:1;}
.home-hero-pro::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 14px);pointer-events:none;}
.home-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:40px;align-items:center;padding:54px 0;}
.home-hero-kicker{display:inline-flex;align-items:center;gap:8px;color:#f1d586;font-family:'Raleway',sans-serif;font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:15px;}
.home-hero-copy h1{max-width:650px;color:#fff;font-family:'Raleway',sans-serif;font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.08;font-weight:900;letter-spacing:-.055em;margin:0 0 16px;}
.home-hero-copy p{color:rgba(255,255,255,.88);font-size:1.08rem;font-weight:500;margin:0 0 26px;}
.home-hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.btn-hero-primary,.btn-hero-outline{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:45px;padding:11px 22px;border-radius:10px;font-family:'Raleway',sans-serif;font-weight:800;font-size:.9rem;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
.btn-hero-primary{background:#c9a84c;color:#071521;box-shadow:0 12px 30px rgba(201,168,76,.28);}
.btn-hero-outline{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28);}
.btn-hero-primary:hover,.btn-hero-outline:hover{transform:translateY(-1px);color:inherit;}
.home-login-card{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:24px;box-shadow:0 22px 70px rgba(0,0,0,.22);backdrop-filter:blur(10px);}
.home-login-icon{width:38px;height:38px;border-radius:12px;background:rgba(201,168,76,.16);color:#f1d586;display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:1.15rem;}
.home-login-card strong{display:block;color:#fff;font-weight:900;margin-bottom:10px;}.home-login-card p{color:rgba(255,255,255,.82);font-size:.92rem;line-height:1.65;margin:0 0 18px;}
.home-login-card a{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#c9a84c;color:#071521;text-decoration:none;border-radius:9px;padding:12px 16px;font-weight:900;}
.home-search-panel{background:#fff;padding:26px 0 18px;border-bottom:1px solid #e8edf2;}.home-search-card{background:#fff;border-radius:16px;box-shadow:0 10px 35px rgba(10,25,41,.06);}
.home-filter-grid{display:grid;grid-template-columns:1.45fr 1fr .95fr .95fr 120px;gap:14px;align-items:center;}.home-filter-grid .form-control,.home-filter-grid .form-select{height:48px;border:1px solid #d9e1e8;border-radius:9px;padding-left:16px;color:#102033;box-shadow:none;font-size:.95rem;}
.home-search-input-wrap{position:relative;}.home-search-input-wrap i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#607080;z-index:2;}.home-search-input-wrap .form-control{padding-left:45px;}
.btn-home-reset{height:48px;border:0;border-radius:9px;background:#071521;color:#fff;font-weight:800;transition:.18s ease;}.btn-home-reset:hover{background:#12324a;transform:translateY(-1px);}
.home-products-section{background:#fff;padding:18px 0 42px;}
.home-products-toolbar{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;padding:18px 0 16px;margin-bottom:24px;border-bottom:1px solid #e8edf2;}
.home-products-count-box{min-width:140px;}
.results-count{font-weight:900;color:#102033;font-size:.96rem;line-height:1.45;}
.home-grid-switcher,.grid-switcher{justify-self:end;width:auto;max-width:max-content;display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:8px 10px;border:1px solid #edf2f7;border-radius:999px;background:linear-gradient(135deg,#ffffff,#f8fafc);box-shadow:0 12px 28px rgba(15,25,35,.055),inset 0 1px 0 rgba(255,255,255,.95);}
.grid-switcher-label{font-size:.82rem;color:#8a6a2b;margin-right:4px;font-weight:800;white-space:nowrap;}
.grid-btn{width:42px;height:36px;min-width:42px;border:1px solid #d9e1e8;border-radius:11px;background:#fff;color:#607080;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-weight:900;font-size:.82rem;padding:0;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;}
.grid-btn:hover{color:#0f1923;border-color:#c9a84c;background:#fff8df;transform:translateY(-1px);}
.grid-btn.active{background:#071521;border-color:#071521;color:#fff;box-shadow:0 8px 22px rgba(7,21,33,.18);}
.home-products-grid{min-height:180px;}.home-view-all-wrap{text-align:center;margin-top:24px;}.btn-view-all{display:inline-flex;align-items:center;gap:10px;background:#071521;color:#fff;text-decoration:none;border-radius:9px;padding:13px 28px;font-weight:900;box-shadow:0 10px 25px rgba(7,21,33,.16);}.btn-view-all:hover{color:#fff;background:#12324a;}
.home-empty-state,.home-load-error{background:#f8fafc;border:1px solid #e1e8ef;border-radius:14px;padding:26px;text-align:center;color:#425466;}.home-load-error{background:#fff7f4;border-color:#ffd6c9;color:#7a2e19;}.home-load-error code{background:rgba(0,0,0,.06);padding:2px 6px;border-radius:5px;}.locked-info{display:none!important;}.home-info-section{background:linear-gradient(180deg,#faf7ef 0%,#fff 100%);border-top:1px solid #eee3cf;}
html[dir="rtl"] .home-search-input-wrap i{left:auto;right:16px;}html[dir="rtl"] .home-search-input-wrap .form-control{padding-left:16px;padding-right:45px;}html[dir="rtl"] .home-hero-copy,html[dir="rtl"] .home-login-card{text-align:right;}

/* ==========================================================
   PRODUCT DETAIL PAGE - PROFESSIONAL MOCKUP IMPLEMENTATION
   added 2026-05
   ========================================================== */
.pd-product-page{
  max-width:1180px !important;
  padding:28px 24px 56px !important;
  color:#0f2235 !important;
}

.pd-product-page .pd-breadcrumb{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin-bottom:28px !important;
  color:#64748b !important;
  font-size:.86rem !important;
}

.pd-product-page .pd-breadcrumb a{
  color:#284b63 !important;
  font-weight:700 !important;
}

.pd-gallery-card{
  position:relative !important;
}

.pd-image-wrap{
  position:relative !important;
  overflow:hidden !important;
  border-radius:18px !important;
  background:#f1f5f9 !important;
  box-shadow:0 18px 50px rgba(15,35,55,.14) !important;
}

.pd-product-page .pd-main-img{
  display:block !important;
  width:100% !important;
  aspect-ratio:1.55/1 !important;
  min-height:360px !important;
  object-fit:cover !important;
  border-radius:18px !important;
  box-shadow:none !important;
  transform:none !important;
}

.pd-product-page .pd-main-img:hover{
  transform:none !important;
}

.pd-image-badge{
  position:absolute !important;
  top:16px !important;
  left:16px !important;
  z-index:3 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:32px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#12a150 !important;
  font-family:var(--font-head,'Raleway',sans-serif) !important;
  font-weight:900 !important;
  font-size:.78rem !important;
  box-shadow:0 8px 20px rgba(15,35,55,.12) !important;
}

.pd-zoom-btn{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:3 !important;
  width:42px !important;
  height:42px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#0f2235 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 8px 22px rgba(15,35,55,.18) !important;
  cursor:pointer !important;
}

.pd-thumbs-row{
  display:grid !important;
  grid-template-columns:36px 1fr 36px !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:14px !important;
}

.pd-product-page .pd-thumbs{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  overflow-x:auto !important;
  padding:2px 2px 5px !important;
}

.pd-product-page .pd-thumb{
  width:74px !important;
  height:54px !important;
  border-radius:9px !important;
  border:2px solid transparent !important;
  box-shadow:0 4px 13px rgba(15,35,55,.10) !important;
  flex:0 0 auto !important;
}

.pd-product-page .pd-thumb.active,
.pd-product-page .pd-thumb:hover{
  border-color:#1e5d89 !important;
  transform:translateY(-1px) !important;
}

.pd-thumb-arrow{
  width:34px !important;
  height:34px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#0f3b59 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.pd-details-panel{
  margin-top:24px !important;
}

.pd-details-panel h2{
  margin:0 0 14px !important;
  padding-bottom:10px !important;
  border-bottom:1px solid #cfd9e3 !important;
  color:#0f3b59 !important;
  font-family:var(--font-head,'Raleway',sans-serif) !important;
  font-size:.92rem !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.7px !important;
}

.pd-product-page .pd-specs-list{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  margin:0 !important;
  background:#fff !important;
  border-bottom:1px solid #e1e8ef !important;
}

.pd-product-page .spec-row{
  min-height:72px !important;
  padding:14px 16px !important;
  border:0 !important;
  border-right:1px solid #e1e8ef !important;
  border-bottom:1px solid #e1e8ef !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}

.pd-product-page .spec-row:nth-child(3n){
  border-right:0 !important;
}

.pd-product-page .spec-row:hover{
  background:#f8fafc !important;
  box-shadow:none !important;
}

.pd-product-page .spec-row i{
  margin:0 !important;
  width:26px !important;
  min-width:26px !important;
  text-align:center !important;
  color:#0f4d7a !important;
  font-size:1.15rem !important;
}

.pd-product-page .spec-label{
  color:#718096 !important;
  font-size:.72rem !important;
  font-weight:800 !important;
  letter-spacing:.35px !important;
}

.pd-product-page .spec-val{
  color:#0f2235 !important;
  font-size:.91rem !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}

.pd-side-panel{
  padding-top:4px !important;
}

.pd-meta-line{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin-bottom:12px !important;
}

.pd-category-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:31px !important;
  padding:0 15px !important;
  border-radius:999px !important;
  background:#eaf2f8 !important;
  color:#0f3b59 !important;
  font-family:var(--font-head,'Raleway',sans-serif) !important;
  font-size:.78rem !important;
  font-weight:900 !important;
}

.pd-product-page .pd-artnr{
  color:#7b8794 !important;
  letter-spacing:.6px !important;
  font-size:.82rem !important;
  text-transform:uppercase !important;
}

.pd-product-page .pd-title{
  color:#0a2744 !important;
  font-size:clamp(1.75rem,2.5vw,2.28rem) !important;
  font-weight:900 !important;
  margin:0 0 10px !important;
  letter-spacing:-.7px !important;
}

.pd-product-page .pd-desc{
  color:#34495e !important;
  font-size:1.05rem !important;
  font-style:italic !important;
  line-height:1.6 !important;
  margin-bottom:18px !important;
}

.pd-product-page .pd-price-box{
  border-radius:10px !important;
  padding:23px 26px !important;
  margin-bottom:22px !important;
  background:linear-gradient(135deg,#073b61 0%,#1766a6 100%) !important;
  box-shadow:0 16px 32px rgba(7,59,97,.24) !important;
}

.pd-product-page .price-label{
  font-size:.82rem !important;
  font-weight:700 !important;
}

.pd-product-page .price-value{
  font-size:2.25rem !important;
  font-weight:900 !important;
}

.pd-product-page .price-unit{
  font-size:.78rem !important;
  font-weight:700 !important;
}

.pd-price-icon{
  font-size:2rem !important;
  opacity:.56 !important;
}

.pd-cta-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:13px !important;
  margin:0 0 28px !important;
}

.pd-cta-grid .btn-cta-primary,
.pd-cta-grid .btn-cta-wa,
.pd-cta-grid .btn-cta-danger,
.pd-cta-grid .btn-cta-outline,
.pd-cta-grid .share-small-button{
  width:100% !important;
  min-height:44px !important;
  justify-content:center !important;
  border-radius:10px !important;
  padding:10px 16px !important;
  font-size:.87rem !important;
  box-shadow:none !important;
}

.pd-share-form{
  grid-column:1 / -1 !important;
  margin:0 !important;
}

.pd-product-page .btn-cta-wa{
  background:#fff !important;
  color:#0a963d !important;
  border:1.5px solid #20b957 !important;
}

.pd-product-page .btn-cta-wa:hover{
  background:#20b957 !important;
  color:#fff !important;
}

.pd-product-page .btn-cta-primary{
  background:linear-gradient(135deg,#06a848,#15c35d) !important;
  color:#fff !important;
}

.pd-product-page .btn-cta-danger{
  border:1.5px solid #ef4444 !important;
  color:#ef3333 !important;
  background:#fff !important;
}

.pd-product-page .btn-cta-outline{
  border:1.5px solid #12649a !important;
  color:#12649a !important;
  background:#fff !important;
}

.pd-product-page .pd-inquiry{
  margin-top:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid #e1e8ef !important;
  border-radius:16px !important;
  box-shadow:0 18px 45px rgba(15,35,55,.10) !important;
}

.pd-product-page .pd-inquiry h4{
  margin:0 !important;
  padding:20px 24px 4px !important;
  color:#0a2744 !important;
  font-size:1rem !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
}

.pd-product-page .pd-inquiry .subtitle{
  padding:0 24px 14px !important;
  margin:0 !important;
  color:#64748b !important;
  font-size:.82rem !important;
}

.pd-product-page .pd-inquiry form{
  padding:0 24px 20px !important;
}

.pd-product-page .form-floating-custom{
  margin-bottom:0 !important;
}

.pd-product-page .form-floating-custom label{
  color:#526273 !important;
  font-size:.75rem !important;
  font-weight:800 !important;
}

.pd-product-page .form-floating-custom input,
.pd-product-page .form-floating-custom textarea{
  border:1.3px solid #d7e0e8 !important;
  background:#fff !important;
  border-radius:8px !important;
  padding:11px 14px !important;
  font-size:.91rem !important;
}

.pd-product-page .form-floating-custom input:focus,
.pd-product-page .form-floating-custom textarea:focus{
  border-color:#12649a !important;
  box-shadow:0 0 0 3px rgba(18,100,154,.10) !important;
}

.pd-product-page .btn-submit-inquiry{
  border-radius:9px !important;
  background:linear-gradient(135deg,#073b61,#1766a6) !important;
  min-height:46px !important;
  box-shadow:none !important;
}

.pd-trust-row{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:10px !important;
  padding:14px 24px 18px !important;
  border-top:1px solid #edf2f7 !important;
  color:#38546c !important;
  font-size:.75rem !important;
  font-weight:800 !important;
}

.pd-trust-row span{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  white-space:nowrap !important;
}

.pd-trust-row i{
  color:#0f4d7a !important;
}

.pd-benefit-bar{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  margin-top:38px !important;
  background:#fff !important;
  border:1px solid #e8edf2 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 14px 40px rgba(15,35,55,.06) !important;
}

.pd-benefit-bar > div{
  display:grid !important;
  grid-template-columns:44px 1fr !important;
  column-gap:12px !important;
  align-items:center !important;
  padding:18px 22px !important;
  border-right:1px solid #e8edf2 !important;
}

.pd-benefit-bar > div:last-child{
  border-right:0 !important;
}

.pd-benefit-bar i{
  grid-row:1 / span 2 !important;
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#f1f5f9 !important;
  color:#0f4d7a !important;
  font-size:1.15rem !important;
}

.pd-benefit-bar strong{
  color:#0a2744 !important;
  font-family:var(--font-head,'Raleway',sans-serif) !important;
  font-size:.9rem !important;
  font-weight:900 !important;
}

.pd-benefit-bar span{
  color:#64748b !important;
  font-size:.8rem !important;
}


/* ==========================================================
   PRODUCT PAGE FIXED ACTION BAR
   Desktop bottom bar for product.php
   ========================================================== */

.pd-floating-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid rgba(15, 25, 35, .12);
  box-shadow: 0 -12px 36px rgba(15, 25, 35, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 13px 24px;
}

.pd-floating-inner {
  max-width: var(--layout-max-width, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1px minmax(160px, 250px) minmax(420px, 640px);
  align-items: center;
  gap: 24px;
}

.pd-floating-price strong {
  display: block;
  color: #073763;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.pd-floating-price span {
  display: block;
  margin-top: 3px;
  color: #0b3159;
  font-size: .82rem;
  font-weight: 800;
}

.pd-floating-separator {
  width: 1px;
  height: 42px;
  background: rgba(15, 25, 35, .18);
}

.pd-floating-price-note {
  color: #0b3159;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.35;
}

.pd-floating-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.pd-floating-btn {
  min-height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  text-decoration: none !important;
  border: 1px solid transparent;
  color: #fff !important;
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .16);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.pd-floating-btn:hover {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(22, 163, 74, .22);
  filter: brightness(1.03);
}

.pd-floating-btn-primary {
  background: linear-gradient(135deg, #0ea545 0%, #19c45b 100%);
}

.pd-floating-btn-whatsapp {
  background: linear-gradient(135deg, #16a34a 0%, #25d366 100%);
}

.pd-product-page {
  padding-bottom: 105px;
}