/* ==========================================================================
   ARABA ÇIKMA PARÇA — Ultra Premium Design System v2
   ========================================================================== */

/* ── Palette & Tokens ──────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-void:       #030711;
  --bg-base:       #0a0f1e;
  --bg-raised:     #111827;
  --bg-surface:    #1a2236;
  --bg-surface-2:  #1f2b42;
  --bg-hover:      #243352;

  /* Borders */
  --border-subtle:  rgba(255,255,255,.06);
  --border-default: rgba(255,255,255,.08);
  --border-hover:   rgba(255,255,255,.14);
  --border-glow:    rgba(239,68,68,.25);

  /* Accent */
  --accent:        #ef4444;
  --accent-bright: #f87171;
  --accent-dim:    rgba(239,68,68,.12);

  /* Secondary Accent — Emerald */
  --emerald:       #10b981;
  --emerald-bright:#34d399;
  --emerald-dim:   rgba(16,185,129,.10);

  /* Tertiary — Indigo glow */
  --indigo:        #6366f1;
  --indigo-dim:    rgba(99,102,241,.08);

  /* Text */
  --text-100: #f8fafc;
  --text-200: #e2e8f0;
  --text-300: #94a3b8;
  --text-400: #64748b;

  /* Typography */
  --font: 'Outfit', system-ui, -apple-system, sans-serif;

  /* Transitions */
  --ease:  all .35s cubic-bezier(.4,0,.2,1);
  --ease-bounce: all .5s cubic-bezier(.34,1.56,.64,1);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 8px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 50px rgba(0,0,0,.45);
  --shadow-glow-red:   0 0 30px rgba(239,68,68,.18), 0 0 60px rgba(239,68,68,.06);
  --shadow-glow-green: 0 0 30px rgba(16,185,129,.18), 0 0 60px rgba(16,185,129,.06);
  --shadow-glow-indigo:0 0 30px rgba(99,102,241,.15);

  /* Blur */
  --glass: blur(16px) saturate(1.6);
}

/* ── Global Reset ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--bg-void);
  color:var(--text-200);
  font-family:var(--font);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Ambient background grain */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(99,102,241,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(239,68,68,.04) 0%, transparent 50%),
    var(--bg-void);
}

a{color:inherit;text-decoration:none;transition:var(--ease)}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:inherit;color:inherit}

.container{width:100%;max-width:1220px;margin:0 auto;padding:0 24px}

/* Scrollbar & Scroll Progress */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-void);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-void);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent) 0%, var(--indigo) 100%);
  border-radius: 5px;
  border: 2px solid var(--bg-void);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
}

/* Modern Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(10, 15, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px) scale(0.9);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: var(--shadow-glow-red);
  transform: translateY(-4px) scale(1.05);
}

.back-to-top .progress-circle {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.back-to-top .progress-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 3;
}

.back-to-top .progress-circle-bar {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 138.2;
  stroke-dashoffset: 138.2;
  transition: stroke-dashoffset 0.1s linear;
}

.back-to-top .arrow-icon {
  color: var(--text-100);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.back-to-top:hover .arrow-icon {
  transform: translateY(-2px);
  color: var(--accent-bright);
}

/* ── Utility: Animated gradient border ─────────────────────────────────── */
@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--angle:360deg}}

.glow-border{
  position:relative;border-radius:16px;overflow:hidden;
}
.glow-border::before{
  content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from var(--angle), var(--accent), var(--indigo), var(--emerald), var(--accent));
  animation:spin 6s linear infinite;
  opacity:.35;
}
.glow-border::after{
  content:'';position:absolute;inset:1px;z-index:-1;border-radius:inherit;
  background:var(--bg-raised);
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER & NAVIGATION
   ══════════════════════════════════════════════════════════════════════════ */

.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(3,7,17,.75);
  backdrop-filter:var(--glass);
  border-bottom:1px solid var(--border-subtle);
  transition:var(--ease);
}

/* ── Ticker / Marquee ──────────────────────────────────────────────────── */
.neon-topbar{
  background:linear-gradient(90deg,var(--bg-void) 0%,#0c1029 50%,var(--bg-void) 100%);
  border-bottom:1px solid var(--border-subtle);
  overflow:hidden;padding:9px 0;position:relative;
}
.neon-topbar::before{
  content:'';position:absolute;left:0;top:0;width:100%;height:100%;
  background:linear-gradient(90deg,rgba(239,68,68,.05),rgba(99,102,241,.05),rgba(16,185,129,.05));
  animation:shimmer 8s ease infinite;
}
@keyframes shimmer{
  0%,100%{opacity:.4}
  50%{opacity:1}
}
.marquee-track{
  display:flex;white-space:nowrap;width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee-track span{
  color:var(--text-300);font-size:.82rem;font-weight:600;
  padding:0 3rem;letter-spacing:.8px;
}
@keyframes marquee{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-33.333%,0,0)}
}

/* ── Nav Shell ─────────────────────────────────────────────────────────── */
.nav-shell{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;max-width:1300px;margin:0 auto;
}

.brand-lockup img{
  height:auto;width:155px;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.08));
  transition:var(--ease);
}
.brand-lockup:hover img{filter:drop-shadow(0 0 18px rgba(239,68,68,.2))}

/* Nav Links */
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links>a,.dropdown-trigger{
  font-size:.92rem;font-weight:500;color:var(--text-300);
  padding:6px 0;position:relative;cursor:pointer;
  letter-spacing:.3px;
}
.nav-links>a::after{
  content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--indigo));
  border-radius:2px;transition:var(--ease);transform:translateX(-50%);
}
.nav-links>a:hover,.dropdown-trigger:hover{color:var(--text-100)}
.nav-links>a:hover::after{width:100%}

/* Dropdown */
.has-dropdown{position:relative}
.dropdown-trigger svg{margin-left:4px;transition:var(--ease);vertical-align:middle}
.dropdown-menu{
  background:rgba(17,24,39,.92);backdrop-filter:var(--glass);
  border:1px solid var(--border-default);border-radius:12px;
  display:none;flex-direction:column;min-width:210px;
  padding:8px 0;position:absolute;top:calc(100% + 8px);left:-10px;
  box-shadow:var(--shadow-lg);
  animation:dropIn .25s ease;
}
@keyframes dropIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dropdown-menu a{
  color:var(--text-300);font-size:.88rem;font-weight:500;padding:11px 22px;
  transition:var(--ease);
}
.dropdown-menu a:hover{background:var(--bg-hover);color:var(--text-100)}
.has-dropdown:hover .dropdown-menu{display:flex}
.has-dropdown:hover .dropdown-trigger svg{transform:rotate(180deg)}

/* Actions */
.nav-actions{display:flex;align-items:center;gap:12px}

.icon-button{
  background:var(--bg-surface);border:1px solid var(--border-default);
  border-radius:50%;color:var(--text-200);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  height:42px;width:42px;transition:var(--ease);
}
.icon-button:hover{
  background:var(--bg-hover);border-color:var(--border-hover);
  color:var(--accent);box-shadow:var(--shadow-glow-red);
  transform:translateY(-2px);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.primary-button{
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 50%,#b91c1c 100%);
  border:none;border-radius:10px;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:.92rem;padding:13px 26px;
  box-shadow:var(--shadow-glow-red);
  transition:var(--ease);position:relative;overflow:hidden;
}
.primary-button::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 60%);
  opacity:0;transition:var(--ease);
}
.primary-button:hover{
  transform:translateY(-3px);
  box-shadow:0 0 40px rgba(239,68,68,.35),0 8px 30px rgba(239,68,68,.2);
}
.primary-button:hover::before{opacity:1}
.primary-button.compact{padding:10px 18px;font-size:.84rem}

.secondary-button{
  background:transparent;border:1px solid var(--border-default);
  border-radius:10px;color:var(--text-200);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:.92rem;padding:13px 26px;
  transition:var(--ease);
}
.secondary-button:hover{
  background:var(--bg-surface);border-color:var(--border-hover);
  transform:translateY(-2px);box-shadow:var(--shadow-sm);
}

.menu-button{display:none}

/* ── Mobile Panel ──────────────────────────────────────────────────────── */
.mobile-nav-panel{
  background:rgba(3,7,17,.96);backdrop-filter:var(--glass);
  border-bottom:1px solid var(--border-subtle);
  display:flex;flex-direction:column;
  max-height:0;opacity:0;visibility:hidden;
  overflow:hidden;
  transition:max-height .4s cubic-bezier(0.4, 0, 0.2, 1), 
             opacity 0.3s ease, 
             visibility 0.3s;
  width:100%;
  position:absolute;top:100%;left:0;z-index:999;
}
.mobile-nav-panel a{
  border-bottom:1px solid var(--border-subtle);color:var(--text-300);
  font-size:1rem;font-weight:500;padding:16px 28px;display:block;
}
.mobile-nav-panel a:hover{background:var(--bg-surface);color:var(--text-100)}
.mobile-submenu{background:rgba(255,255,255,.015);padding-left:22px}
.mobile-nav-panel .mobile-cta-btn{
  background:linear-gradient(135deg,var(--emerald),#059669);
  color:#fff;font-weight:700;text-align:center;padding:16px;border:none;
}
.mobile-nav-panel .mobile-cta-btn:hover{filter:brightness(1.1)}
.mobile-nav-panel.open{
  max-height:600px;opacity:1;visibility:visible;
  overflow-y:auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════════════════════════════ */

.hero-section{
  padding:90px 0 70px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--border-subtle);
}
/* Ambient orbs */
.hero-section::before{
  content:'';position:absolute;width:600px;height:600px;border-radius:50%;
  top:-200px;right:-100px;
  background:radial-gradient(circle,rgba(239,68,68,.07) 0%,transparent 70%);
  filter:blur(80px);pointer-events:none;
}
.hero-section::after{
  content:'';position:absolute;width:500px;height:500px;border-radius:50%;
  bottom:-200px;left:-100px;
  background:radial-gradient(circle,rgba(99,102,241,.06) 0%,transparent 70%);
  filter:blur(80px);pointer-events:none;
}

.hero-inner{
  display:grid;grid-template-columns:1.2fr .8fr;gap:55px;
  align-items:center;max-width:1220px;margin:0 auto;padding:0 24px;
  position:relative;z-index:2;
}

.hero-copy{display:flex;flex-direction:column;align-items:flex-start}

/* Eyebrow Badge */
.eyebrow{
  color:var(--accent-bright);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:2.5px;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;margin-bottom:18px;
  background:var(--accent-dim);border-radius:6px;
  border-left:3px solid var(--accent);
  backdrop-filter:blur(4px);
}
.eyebrow.dark{color:var(--accent-bright)}

.hero-copy h1{
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.1;font-weight:800;
  letter-spacing:-1.5px;margin-bottom:22px;
  background:linear-gradient(135deg,var(--text-100) 0%,var(--text-300) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-copy>p{
  color:var(--text-300);font-size:1.12rem;margin-bottom:36px;
  max-width:540px;line-height:1.7;
}

.hero-actions{display:flex;gap:14px;margin-bottom:42px;flex-wrap:wrap}

/* ── Quick Search ──────────────────────────────────────────────────────── */
.quick-search{
  background:rgba(17,24,39,.7);backdrop-filter:var(--glass);
  border:1px solid var(--border-default);border-radius:14px;
  display:flex;align-items:center;padding:8px 12px 8px 20px;
  width:100%;max-width:560px;
  box-shadow:var(--shadow-md);transition:var(--ease);
}
.quick-search:focus-within{
  border-color:rgba(239,68,68,.3);
  box-shadow:var(--shadow-glow-red);
}
.quick-search svg{color:var(--text-400);margin-right:12px;flex-shrink:0}
.quick-search input{
  background:transparent;border:none;font-size:.95rem;outline:none;width:100%;
  color:var(--text-200);
}
.quick-search input::placeholder{color:var(--text-400)}
.quick-search button{
  background:var(--accent);border:none;border-radius:10px;
  color:#fff;cursor:pointer;font-weight:700;padding:11px 24px;
  transition:var(--ease);flex-shrink:0;
}
.quick-search button:hover{background:var(--accent-bright)}

/* ── Floating Hero Visuals ─────────────────────────────────────────────── */
.hero-visual{
  position:relative;height:440px;width:100%;
  display:flex;justify-content:center;align-items:center;
}
.hero-product{
  background:rgba(17,24,39,.65);backdrop-filter:var(--glass);
  border:1px solid var(--border-default);border-radius:18px;
  padding:8px;position:absolute;
  box-shadow:var(--shadow-lg);transition:var(--ease-bounce);overflow:hidden;
}
.hero-product img{border-radius:12px;object-fit:cover;width:280px;height:190px}
.hero-product span{
  position:absolute;bottom:16px;left:16px;
  background:rgba(3,7,17,.7);backdrop-filter:blur(8px);
  border-radius:8px;font-size:.75rem;font-weight:700;
  padding:5px 12px;border:1px solid var(--border-subtle);
  letter-spacing:.5px;
}
.hero-product-1{transform:rotate(-5deg) translate(-30px,-50px);z-index:3}
.hero-product-2{transform:rotate(5deg) translate(55px,50px);z-index:2}
.hero-product-3{transform:rotate(-2deg) translate(-55px,120px);z-index:1}
.hero-product:hover{
  transform:scale(1.06) translateY(-12px) rotate(0deg) !important;z-index:10;
  border-color:var(--accent);box-shadow:var(--shadow-glow-red);
}

/* ── Hero Slider Styles ────────────────────────────────────────────────── */
.hero-slider-section {
  position: relative;
  padding: 0 0 70px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.hero-slider-container {
  position: relative;
  height: 520px;
  width: 100%;
  background: var(--bg-alt);
}
.hero-slider {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.hero-slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 6s ease-in-out;
  transform: scale(1);
}
.hero-slide.active .hero-slide-bg {
  transform: scale(1.06);
}
.hero-slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(3,7,17,0.4) 0%, rgba(3,7,17,0.85) 100%);
}
.hero-slide-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  text-align: center;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(20px);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
  opacity: 0;
}
.hero-slide.active .hero-slide-content {
  transform: translateY(0);
  opacity: 1;
}
.hero-slide-content h2 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  margin-bottom: 25px;
  letter-spacing: -1px;
}
.hero-slide-actions {
  display: flex;
  gap: 14px;
  margin-top: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(17,24,39,0.55);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-default);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: var(--ease);
}
.slider-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-glow-red);
}
.prev-arrow { left: 24px; }
.next-arrow { right: 24px; }

.slider-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: var(--ease);
}
.indicator-dot.active {
  background: var(--accent);
  width: 22px;
  border-radius: 4px;
}
.slider-search-container {
  position: relative;
  margin: -32px auto 0;
  z-index: 15;
  max-width: 580px;
  padding: 0 24px;
}
@media (max-width: 768px) {
  .hero-slider-container { height: 420px; }
  .slider-arrow { display: none; }
  .slider-indicators { bottom: 20px; }
}

/* ── Stats Row ─────────────────────────────────────────────────────────── */
.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:70px;
  background:var(--border-subtle);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-md);
}
.stat-row div{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:30px 20px;background:rgba(17,24,39,.6);
  backdrop-filter:blur(8px);
}
.stat-row strong{
  font-size:2.5rem;font-weight:800;line-height:1;margin-bottom:6px;
  background:linear-gradient(135deg,var(--accent-bright),var(--indigo));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.stat-row span{color:var(--text-400);font-size:.85rem;font-weight:500}

/* ══════════════════════════════════════════════════════════════════════════
   TRUST BAND
   ══════════════════════════════════════════════════════════════════════════ */
.trust-band{
  background:var(--bg-base);
  border-bottom:1px solid var(--border-subtle);
  display:flex;justify-content:center;flex-wrap:wrap;gap:40px;
  padding:22px 24px;
}
.trust-band div{
  display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:.9rem;color:var(--text-300);
}
.trust-band svg{color:var(--accent)}

/* ══════════════════════════════════════════════════════════════════════════
   CONTENT SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.content-section{
  padding:90px 24px;border-bottom:1px solid var(--border-subtle);
  max-width:1220px;margin:0 auto;
}
.content-section.bg-alt{
  max-width:100%;padding:90px 24px;
  background:linear-gradient(180deg,rgba(10,15,30,.4) 0%,var(--bg-void) 100%);
}
.content-section.bg-alt>.container,
.content-section.bg-alt>.home-product-catalog,
.content-section.bg-alt>.commerce-shell{
  max-width:1220px;margin:0 auto;
}
.home-product-catalog{max-width:1220px;margin:0 auto}

.section-header{margin-bottom:55px;max-width:660px}
.section-header.center{margin-left:auto;margin-right:auto;text-align:center}
.section-header h2{
  font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;
  margin-bottom:14px;letter-spacing:-.5px;line-height:1.2;
  color:var(--text-100);
}
.section-header p{color:var(--text-300);font-size:1.05rem;line-height:1.7}

/* Dark Section (categories) */
.dark-section{
  background:linear-gradient(180deg,var(--bg-base) 0%,rgba(10,15,30,.6) 100%);
  max-width:100%;padding-left:24px;padding-right:24px;
}
.dark-section .section-header,
.dark-section .category-grid{max-width:1220px;margin-left:auto;margin-right:auto}

/* ══════════════════════════════════════════════════════════════════════════
   BRAND GRID
   ══════════════════════════════════════════════════════════════════════════ */
.brand-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:12px;
}
.brand-card{
  background:rgba(17,24,39,.5);backdrop-filter:blur(6px);
  border:1px solid var(--border-subtle);border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 10px;text-align:center;height:115px;
  transition:var(--ease);position:relative;overflow:hidden;
}
.brand-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(99,102,241,.06),transparent 70%);
  opacity:0;transition:var(--ease);
}
.brand-card:hover::before{opacity:1}
.brand-card img{width:38px;height:38px;object-fit:contain;margin-bottom:10px;transition:var(--ease)}
.brand-card span{font-size:.82rem;font-weight:600;color:var(--text-400);transition:var(--ease)}
.brand-card:hover{
  background:var(--bg-surface);border-color:var(--border-hover);
  transform:translateY(-5px);box-shadow:var(--shadow-glow-indigo);
}
.brand-card:hover span{color:var(--text-100)}
.brand-card:hover img{transform:scale(1.1)}

.brand-fallback-mark{
  background:linear-gradient(135deg,var(--accent-dim),var(--indigo-dim));
  border:1px solid var(--border-subtle);
  border-radius:50%;color:var(--accent-bright);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:800;height:40px;width:40px;margin-bottom:10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMMERCE / CATALOG LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */
.commerce-shell{
  display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:start;
}
.compact-commerce{max-width:1220px;margin:0 auto}

/* ── Filter Panel ──────────────────────────────────────────────────────── */
.filter-panel{
  background:rgba(17,24,39,.6);backdrop-filter:var(--glass);
  border:1px solid var(--border-subtle);border-radius:18px;
  padding:26px;position:sticky;top:100px;
}
.filter-title{
  display:flex;align-items:center;gap:10px;font-size:1.05rem;
  margin-bottom:26px;padding-bottom:16px;
  border-bottom:1px solid var(--border-subtle);
}
.filter-title svg{color:var(--accent)}

.filter-panel label{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.filter-panel label span{
  font-size:.78rem;font-weight:700;color:var(--text-400);
  text-transform:uppercase;letter-spacing:.8px;
}
.filter-search{
  background:var(--bg-void);border:1px solid var(--border-subtle);
  border-radius:10px;display:flex;align-items:center;padding:10px 14px;
  transition:var(--ease);
}
.filter-search:focus-within{border-color:var(--border-hover)}
.filter-search svg{color:var(--text-400);margin-right:8px}
.filter-search input{background:transparent;border:none;outline:none;width:100%;color:var(--text-200);font-size:.9rem}

.filter-panel select{
  background:var(--bg-void);border:1px solid var(--border-subtle);
  border-radius:10px;padding:11px 14px;outline:none;cursor:pointer;
  font-size:.9rem;width:100%;transition:var(--ease);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:32px;
}
.filter-panel select:focus{border-color:var(--border-hover)}

.category-mini-list{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--border-subtle);
}
.category-mini-list strong{font-size:.85rem;display:block;margin-bottom:14px;color:var(--text-300)}
.category-mini-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;background:var(--bg-void);
  border:1px solid var(--border-subtle);border-radius:10px;
  margin-bottom:7px;font-size:.82rem;font-weight:500;color:var(--text-300);
  transition:var(--ease);
}
.category-mini-item:hover{border-color:var(--accent);color:var(--text-100);background:var(--bg-surface)}
.category-mini-item small{
  background:var(--accent-dim);color:var(--accent-bright);
  border-radius:20px;padding:2px 9px;font-weight:700;font-size:.75rem;
}

/* ── Commerce Products ─────────────────────────────────────────────────── */
.commerce-products{display:flex;flex-direction:column;gap:30px}
.commerce-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--border-subtle);padding-bottom:18px;
  flex-wrap:wrap;gap:18px;
}
.commerce-toolbar h3{font-size:1rem;font-weight:600;color:var(--text-300)}

.quick-brand-row{display:flex;gap:8px;flex-wrap:wrap}
.quick-brand-row a{
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:8px;font-size:.78rem;font-weight:600;padding:7px 14px;
  color:var(--text-400);transition:var(--ease);
}
.quick-brand-row a:hover{border-color:var(--accent);color:var(--text-100)}

/* ── Product Cards ─────────────────────────────────────────────────────── */
.shop-product-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.shop-product-card{
  background:rgba(17,24,39,.5);backdrop-filter:blur(6px);
  border:1px solid var(--border-subtle);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:var(--ease);position:relative;
}
.shop-product-card::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(99,102,241,.04),transparent 60%);
  opacity:0;transition:var(--ease);border-radius:inherit;
}
.shop-product-card:hover::before{opacity:1}
.shop-product-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-6px);box-shadow:var(--shadow-lg);
}

.shop-product-image{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:var(--bg-void);z-index:1;
}
.shop-product-image img{
  width:100%;height:100%;object-fit:cover;transition:transform .6s ease;
}
.shop-product-image span{
  position:absolute;top:14px;left:14px;
  background:linear-gradient(135deg,var(--accent),#b91c1c);
  color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;
  border-radius:6px;box-shadow:var(--shadow-glow-red);
  letter-spacing:.5px;text-transform:uppercase;
}
.shop-product-card:hover .shop-product-image img{transform:scale(1.08)}

.shop-product-body{padding:20px;display:flex;flex-direction:column;flex-grow:1;position:relative;z-index:1}

.product-meta-row{
  display:flex;gap:10px;margin-bottom:10px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
}
.product-meta-row span:first-child{color:var(--accent-bright)}
.product-meta-row span:last-child{color:var(--text-400)}

.shop-product-body h3{font-size:1.05rem;font-weight:700;margin-bottom:14px;line-height:1.35}
.shop-product-body h3 a:hover{color:var(--accent-bright)}

.shop-product-body dl{
  display:flex;flex-wrap:wrap;gap:14px;
  padding:12px 0;border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);margin-bottom:18px;
}
.shop-product-body dl div{display:flex;flex-direction:column;font-size:.78rem}
.shop-product-body dt{color:var(--text-400);font-weight:500}
.shop-product-body dd{font-weight:700;color:var(--text-200)}

/* Shop Action Buttons */
.shop-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto}
.shop-actions a{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border-radius:10px;font-size:.82rem;font-weight:600;
  transition:var(--ease);
}
.shop-actions a:first-child{
  background:var(--bg-hover);color:var(--text-100);
  padding:10px 16px;flex-grow:1;
}
.shop-actions a:first-child:hover{background:var(--indigo);box-shadow:var(--shadow-glow-indigo)}
.shop-actions a:nth-child(2){
  background:linear-gradient(135deg,var(--emerald),#059669);
  color:#fff;padding:10px 16px;flex-grow:1;
  box-shadow:var(--shadow-glow-green);
}
.shop-actions a:nth-child(2):hover{filter:brightness(1.15);transform:translateY(-2px)}
.shop-actions a:last-child{
  background:var(--accent-dim);border:1px solid rgba(239,68,68,.2);
  color:var(--accent-bright);height:40px;width:40px;flex-shrink:0;
  border-radius:10px;
}
.shop-actions a:last-child:hover{
  background:var(--accent);color:#fff;box-shadow:var(--shadow-glow-red);
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:30px}
.pagination a{
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:10px;font-size:.88rem;font-weight:600;padding:10px 18px;
  color:var(--text-300);transition:var(--ease);
}
.pagination a:hover,.pagination a.active{
  background:linear-gradient(135deg,var(--accent),#b91c1c);
  border-color:var(--accent);color:#fff;
  box-shadow:var(--shadow-glow-red);transform:translateY(-2px);
}

.no-results-card{
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:18px;padding:55px 30px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.no-results-card svg{color:var(--accent);margin-bottom:22px;opacity:.6}
.no-results-card h4{font-size:1.3rem;margin-bottom:10px;color:var(--text-100)}
.no-results-card p{color:var(--text-300);margin-bottom:28px;max-width:500px}

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORY GRID
   ══════════════════════════════════════════════════════════════════════════ */
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.category-card{
  background:rgba(17,24,39,.5);backdrop-filter:blur(6px);
  border:1px solid var(--border-subtle);border-radius:18px;
  padding:32px 28px;position:relative;overflow:hidden;
  transition:var(--ease);
}
.category-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--indigo),var(--emerald));
  opacity:0;transition:var(--ease);
}
.category-card:hover::before{opacity:1}

.category-number{
  position:absolute;top:-24px;right:-12px;
  font-size:6.5rem;font-weight:900;line-height:1;user-select:none;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;transition:var(--ease);
}
.category-card h3{font-size:1.25rem;font-weight:700;margin-bottom:12px;position:relative;z-index:2}
.category-card p{color:var(--text-400);font-size:.88rem;margin-bottom:22px;position:relative;z-index:2}

.part-tags{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:2}
.part-tags span{
  background:var(--bg-void);border:1px solid var(--border-subtle);
  border-radius:6px;font-size:.72rem;font-weight:600;padding:4px 10px;
  color:var(--text-400);transition:var(--ease);
}
.category-card:hover{
  border-color:rgba(99,102,241,.2);transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
}
.category-card:hover .category-number{
  background:linear-gradient(180deg,rgba(239,68,68,.06),transparent);
  -webkit-background-clip:text;background-clip:text;
  transform:scale(1.08) rotate(-3deg);
}
.category-card:hover .part-tags span{border-color:var(--border-hover);color:var(--text-300)}

/* ══════════════════════════════════════════════════════════════════════════
   SPLIT ABOUT SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.split-section{
  display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:center;
  max-width:1220px;margin:0 auto;padding:90px 24px;
}

.about-list{margin-top:35px;margin-bottom:30px;display:flex;flex-direction:column;gap:16px}
.about-list p{display:flex;gap:12px;align-items:flex-start;color:var(--text-300);line-height:1.7}
.about-list svg{color:var(--accent);flex-shrink:0;margin-top:4px}

.text-link{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--accent-bright);font-weight:700;font-size:.95rem;
}
.text-link:hover{color:var(--text-100);gap:12px}

.premium-panel{
  border:1px solid var(--border-subtle);border-radius:22px;padding:10px;
  background:rgba(17,24,39,.4);backdrop-filter:blur(6px);
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.premium-panel::before{
  content:'';position:absolute;inset:-1px;z-index:0;border-radius:inherit;
  background:conic-gradient(from 45deg,transparent,rgba(99,102,241,.1),transparent,rgba(239,68,68,.08),transparent);
}
.premium-panel img{border-radius:14px;width:100%;position:relative;z-index:1}

.about-split-view{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.rounded-premium-img{
  border-radius:18px;border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-lg);
}
.content-body p{margin-bottom:20px;color:var(--text-300);font-size:1.02rem;line-height:1.75}
.content-body ul{margin-left:20px;margin-bottom:20px;color:var(--text-300)}
.content-body li{margin-bottom:10px}

/* ══════════════════════════════════════════════════════════════════════════
   PROCESS SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.process-section{
  padding:90px 24px;max-width:1220px;margin:0 auto;
  border-bottom:1px solid var(--border-subtle);
}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:55px}
.process-grid>div{
  display:flex;flex-direction:column;align-items:flex-start;
  background:rgba(17,24,39,.4);backdrop-filter:blur(6px);
  border:1px solid var(--border-subtle);border-radius:18px;
  padding:35px 30px;transition:var(--ease);position:relative;overflow:hidden;
}
.process-grid>div::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
  opacity:0;transition:var(--ease);
}
.process-grid>div:hover::before{opacity:1}
.process-grid>div:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}

.process-icon{
  background:linear-gradient(135deg,var(--accent-dim),var(--indigo-dim));
  border:1px solid var(--border-subtle);border-radius:14px;
  color:var(--accent-bright);display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:800;height:52px;width:52px;margin-bottom:22px;
}
.process-grid h3{font-size:1.2rem;font-weight:700;margin-bottom:10px}
.process-grid p{color:var(--text-400);font-size:.92rem;line-height:1.65}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.blog-card{
  background:rgba(17,24,39,.5);backdrop-filter:blur(6px);
  border:1px solid var(--border-subtle);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:var(--ease);
}
.blog-image{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-void)}
.blog-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.blog-card:hover .blog-image img{transform:scale(1.06)}

.blog-body{padding:26px;display:flex;flex-direction:column;flex-grow:1}

.blog-date{
  font-size:.72rem;font-weight:700;color:var(--accent-bright);
  text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;display:block;
}
.blog-body h3{font-size:1.15rem;font-weight:700;margin-bottom:12px;line-height:1.4}
.blog-body h3 a:hover{color:var(--accent-bright)}
.blog-body p{
  color:var(--text-400);font-size:.88rem;margin-bottom:18px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-link{
  color:var(--accent-bright);font-weight:700;font-size:.84rem;margin-top:auto;
  display:inline-block;transition:var(--ease);
}
.blog-link:hover{color:var(--text-100);transform:translateX(4px)}

.blog-card:hover{
  border-color:var(--border-hover);transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.cta-banner{
  background:
    radial-gradient(ellipse 50% 60% at 10% 50%,rgba(239,68,68,.08),transparent),
    radial-gradient(ellipse 40% 50% at 90% 50%,rgba(99,102,241,.06),transparent),
    linear-gradient(135deg,#060a18,#0f172a);
  border-bottom:1px solid var(--border-subtle);
  padding:90px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.cta-banner h2{
  font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;margin-bottom:16px;
  max-width:700px;color:var(--text-100);
}
.cta-banner p{color:var(--text-300);font-size:1.08rem;margin-bottom:32px}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.contact-container{display:grid;grid-template-columns:1fr 1.3fr;gap:50px}
.contact-info-column h2,.contact-form-column h2{font-size:1.8rem;font-weight:800;margin-bottom:14px;color:var(--text-100)}
.contact-info-column>p,.contact-form-column>p{color:var(--text-300);margin-bottom:35px}

.contact-card-grid{display:flex;flex-direction:column;gap:16px}
.contact-detail-card{
  background:rgba(17,24,39,.5);backdrop-filter:blur(6px);
  border:1px solid var(--border-subtle);border-radius:14px;
  padding:22px;display:flex;gap:16px;align-items:center;
  transition:var(--ease);
}
.contact-detail-card:hover{border-color:var(--border-hover);background:var(--bg-surface)}
.contact-detail-card .card-icon{
  background:linear-gradient(135deg,var(--accent-dim),var(--indigo-dim));
  border-radius:12px;color:var(--accent-bright);
  display:flex;align-items:center;justify-content:center;
  height:50px;width:50px;flex-shrink:0;
}
.contact-detail-card h4{font-size:.8rem;color:var(--text-400);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.contact-detail-card a,.contact-detail-card p{font-weight:700;font-size:1rem}
.contact-detail-card a:hover{color:var(--accent-bright)}

/* Form */
.contact-form{display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label{display:flex;flex-direction:column;gap:7px}
.contact-form label span{font-size:.82rem;font-weight:600;color:var(--text-400)}
.contact-form input,.contact-form textarea{
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:10px;padding:13px 16px;outline:none;
  font-size:.95rem;transition:var(--ease);color:var(--text-200);
}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:rgba(239,68,68,.3);box-shadow:var(--shadow-glow-red);
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text-400)}

.alert-message{padding:16px 20px;border-radius:10px;margin-bottom:25px;font-weight:600;font-size:.92rem}
.alert-message.success{background:var(--emerald-dim);border:1px solid rgba(16,185,129,.25);color:var(--emerald-bright)}
.alert-message.error{background:var(--accent-dim);border:1px solid rgba(239,68,68,.25);color:var(--accent-bright)}

.map-wrapper{
  margin-top:60px;border:1px solid var(--border-subtle);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL
   ══════════════════════════════════════════════════════════════════════════ */
.product-detail-container{padding:40px 24px 90px;max-width:1220px;margin:0 auto}

.detail-breadcrumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.84rem;color:var(--text-400);margin-bottom:32px;
}
.detail-breadcrumbs a:hover{color:var(--accent-bright)}
.detail-breadcrumbs span{color:var(--text-200);font-weight:600}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start;margin-bottom:55px}

.detail-gallery{display:flex;flex-direction:column;gap:14px}
.main-image-wrapper{
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
}
.main-image-wrapper img{width:100%;height:100%;object-fit:cover}

.thumbnail-row{display:flex;gap:10px}
.thumbnail-row button{
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:10px;cursor:pointer;overflow:hidden;height:60px;width:80px;padding:0;
  transition:var(--ease);
}
.thumbnail-row button img{width:100%;height:100%;object-fit:cover}
.thumbnail-row button:hover{border-color:var(--accent);box-shadow:var(--shadow-glow-red)}

.detail-specs-panel h1{
  font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;
  margin-top:10px;margin-bottom:16px;line-height:1.25;color:var(--text-100);
}

.price-badge{
  background:linear-gradient(135deg,var(--accent-dim),rgba(99,102,241,.06));
  border:1px solid rgba(239,68,68,.2);border-radius:10px;
  color:var(--accent-bright);display:inline-block;
  font-size:1.3rem;font-weight:800;padding:11px 22px;margin-bottom:30px;
}

.specs-table{border-collapse:collapse;width:100%;margin-bottom:35px}
.specs-table th,.specs-table td{padding:13px 16px;text-align:left}
.specs-table tr{border-bottom:1px solid var(--border-subtle)}
.specs-table th{color:var(--text-400);font-weight:500;width:170px;font-size:.9rem}
.specs-table td{font-weight:700;color:var(--text-200)}
.specs-table td a{color:var(--accent-bright)}
.specs-table td a:hover{text-decoration:underline}

.condition-tag{
  background:var(--emerald-dim);color:var(--emerald-bright);
  border-radius:6px;font-size:.78rem;padding:4px 10px;font-weight:700;
}

.detail-cta-row{display:flex;gap:14px;margin-bottom:30px}
.detail-cta-row a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;font-weight:700;font-size:1rem;padding:15px 30px;flex-grow:1;
  transition:var(--ease);
}

.whatsapp-btn{
  background:linear-gradient(135deg,var(--emerald),#059669);
  color:#fff;box-shadow:var(--shadow-glow-green);
}
.whatsapp-btn:hover{filter:brightness(1.15);transform:translateY(-3px);box-shadow:0 0 40px rgba(16,185,129,.3)}

.call-btn{
  background:linear-gradient(135deg,var(--accent),#b91c1c);
  color:#fff;box-shadow:var(--shadow-glow-red);
}
.call-btn:hover{filter:brightness(1.15);transform:translateY(-3px);box-shadow:0 0 40px rgba(239,68,68,.3)}

.verification-badge-box{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--border-subtle)}
.verification-badge-box div{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text-300)}
.verification-badge-box svg{color:var(--emerald)}

.product-description-block,.related-products-block{margin-top:60px;padding-top:40px;border-top:1px solid var(--border-subtle)}
.product-description-block h2,.related-products-block h2{font-size:1.6rem;font-weight:800;margin-bottom:25px;color:var(--text-100)}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG DETAIL
   ══════════════════════════════════════════════════════════════════════════ */
.blog-detail-container{max-width:1220px;margin:0 auto;padding:0 24px}
.blog-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:50px;margin-top:30px}

.post-header{margin-bottom:30px}
.post-header h1{
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;line-height:1.2;
  margin-top:10px;color:var(--text-100);
}
.post-featured-image{
  border-radius:18px;overflow:hidden;border:1px solid var(--border-subtle);
  margin-bottom:40px;max-height:450px;box-shadow:var(--shadow-md);
}
.post-featured-image img{width:100%;height:100%;object-fit:cover}

.post-footer-cta{
  background:rgba(17,24,39,.5);backdrop-filter:blur(6px);
  border:1px solid var(--border-subtle);border-radius:18px;
  padding:38px;margin-top:50px;text-align:center;
}
.post-footer-cta h3{font-size:1.3rem;margin-bottom:10px;color:var(--text-100)}
.post-footer-cta p{color:var(--text-300);margin-bottom:25px}

/* Sidebar */
.sidebar-widget{
  background:rgba(17,24,39,.5);backdrop-filter:blur(6px);
  border:1px solid var(--border-subtle);border-radius:18px;
  padding:26px;margin-bottom:28px;
}
.sidebar-widget h3{font-size:1.1rem;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle);color:var(--text-100)}

.recent-posts-list{display:flex;flex-direction:column;gap:14px}
.recent-post-item{display:flex;gap:12px;align-items:center;transition:var(--ease)}
.recent-post-item:hover{transform:translateX(3px)}
.recent-post-item img{border-radius:8px;height:52px;width:72px;object-fit:cover;flex-shrink:0}
.recent-post-item h4{
  font-size:.84rem;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:3px;
}
.recent-post-item span{font-size:.72rem;color:var(--text-400)}

.promo-widget{text-align:center}
.promo-widget p{color:var(--text-400);font-size:.88rem;margin-bottom:20px}

/* ── Subpage Banner ────────────────────────────────────────────────────── */
.subpage-header{
  background:
    radial-gradient(ellipse 40% 50% at 15% 50%,rgba(239,68,68,.06),transparent),
    radial-gradient(ellipse 40% 50% at 85% 50%,rgba(99,102,241,.04),transparent),
    var(--bg-base);
  border-bottom:1px solid var(--border-subtle);
  padding:65px 24px;text-align:center;
}
.subpage-header h1{
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;
  margin-bottom:12px;color:var(--text-100);
}
.subpage-header p{color:var(--text-300);font-size:1.05rem;max-width:620px;margin:0 auto}

/* 404 */
.error-card{
  background:rgba(17,24,39,.5);backdrop-filter:var(--glass);
  border:1px solid var(--border-subtle);border-radius:22px;
  padding:65px 45px;box-shadow:var(--shadow-lg);
}
.error-code{
  font-size:7rem;font-weight:900;line-height:1;display:block;margin-bottom:16px;
  background:linear-gradient(135deg,var(--accent),var(--indigo));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer{
  background:var(--bg-void);
  border-top:1px solid var(--border-subtle);
  padding:85px 0 30px;position:relative;
}
.site-footer::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:200px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

.footer-grid{
  display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:60px;
  max-width:1220px;margin:0 auto;padding:0 24px 65px;
  border-bottom:1px solid var(--border-subtle);
}
.footer-brand img{margin-bottom:20px;width:145px}
.footer-brand p{color:var(--text-400);font-size:.92rem;max-width:340px;line-height:1.7}

.footer-links,.footer-contact{display:flex;flex-direction:column;align-items:flex-start}
.footer-links h2,.footer-contact h2{
  font-size:.9rem;font-weight:800;text-transform:uppercase;
  letter-spacing:1.5px;margin-bottom:25px;color:var(--text-200);
}
.footer-links a,.footer-contact a,.footer-contact span{
  color:var(--text-400);font-size:.92rem;font-weight:500;margin-bottom:13px;
  display:flex;align-items:center;gap:10px;transition:var(--ease);
}
.footer-links a:hover,.footer-contact a:hover{color:var(--accent-bright);transform:translateX(3px)}
.footer-contact svg{color:var(--accent);flex-shrink:0}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  max-width:1220px;margin:0 auto;padding:28px 24px 0;
  flex-wrap:wrap;gap:20px;font-size:.82rem;color:var(--text-400);
}
.bmsoft-credit{display:flex;align-items:center;gap:8px}
.bmsoft-credit strong{color:var(--text-200)}
.bmsoft-credit:hover strong{color:var(--accent-bright)}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero-copy{align-items:center}
  .hero-copy>p{margin-left:auto;margin-right:auto}
  .hero-visual{display:none}
  .brand-grid{grid-template-columns:repeat(6,1fr)}
  .commerce-shell{grid-template-columns:1fr}
  .filter-panel{position:static;margin-bottom:20px}
  .shop-product-grid{grid-template-columns:repeat(2,1fr)}
  .category-grid{grid-template-columns:repeat(3,1fr)}
  .split-section{grid-template-columns:1fr;gap:40px}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .blog-detail-grid{grid-template-columns:1fr}
  .contact-container{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
}

@media(max-width:768px){
  .nav-links{display:none}
  .menu-button{display:flex}
  .nav-shell {
    padding: 10px 16px;
  }
  .brand-lockup img {
    width: 140px !important;
  }
  .nav-actions .primary-button {
    display: none !important;
  }
  .brand-grid{grid-template-columns:repeat(4,1fr)}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .shop-product-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hero-copy h1{font-size:2.2rem}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .form-row{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr;gap:20px}
  .detail-cta-row{flex-direction:column}
}

@media(max-width:480px){
  .brand-lockup img {
    width: 125px !important;
  }
  .nav-actions .user-icon-btn {
    display: none !important;
  }
  .nav-actions {
    gap: 8px;
  }
  .icon-button {
    height: 38px;
    width: 38px;
  }
  .brand-grid{grid-template-columns:repeat(3,1fr)}
  .category-grid{grid-template-columns:1fr}
  .shop-product-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .primary-button,.hero-actions .secondary-button{width:100%;justify-content:center}
}

/* ── Default Page Content ──────────────────────────────────────────────── */
.default-page-content{max-width:800px;margin:0 auto}

/* ══════════════════════════════════════════════════════════════════════════
   E-COMMERCE & MEMBERSHIP STYLES (UPGRADED)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Auth Forms (Login / Register) ─────────────────────────────────────── */
.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}
.auth-card {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}
.auth-lead {
  color: var(--text-400);
  font-size: 0.95rem;
  margin-top: 5px;
  margin-bottom: 25px;
}
/* ── Global Form Styles ─────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  width: 100%;
}
.form-group.row-group {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}
.form-group.row-group > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.form-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-400);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.form-control {
  background: rgba(3, 7, 17, 0.45);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--text-200);
  outline: none;
  font-size: 0.95rem;
  transition: var(--ease);
  width: 100%;
  box-sizing: border-box;
}
.form-control:focus {
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: var(--shadow-glow-red);
}
.form-control::placeholder {
  color: var(--text-400);
  opacity: 0.5;
}
.form-control:disabled, .form-control[readonly] {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-400);
  border-color: var(--border-subtle);
  cursor: not-allowed;
  opacity: 0.7;
}
.auth-footer {
  margin-top: 25px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-400);
}
.auth-footer a {
  color: var(--accent-bright);
  font-weight: 700;
}
.auth-footer a:hover {
  text-decoration: underline;
}

/* ── Shopping Cart ─────────────────────────────────────────────────────── */
.cart-shell {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: start;
}
.cart-main-table {
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 25px;
  overflow-x: auto;
}
.cart-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.cart-table th, .cart-table td {
  padding: 15px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.cart-table th {
  color: var(--text-400);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 1px;
}
.cart-table td {
  color: var(--text-200);
  font-size: 0.92rem;
}
.btn-qty-adj {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-200);
  width: 28px;
  height: 28px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: var(--ease);
}
.btn-qty-adj:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.qty-val {
  min-width: 25px;
  text-align: center;
  font-weight: 700;
}

.cart-summary {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 25px;
}
.cart-summary h3 {
  font-size: 1.15rem;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: var(--text-300);
}
.summary-row strong {
  color: var(--text-100);
}
.summary-row.total-row {
  margin-top: 15px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-100);
}
.summary-row.total-row strong {
  color: var(--accent-bright);
}

/* ── Checkout ─────────────────────────────────────────────────────────── */
.checkout-form-shell {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}
.checkout-billing, .checkout-payment-box {
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 30px;
}
.checkout-billing h2, .checkout-payment-box h2 {
  font-size: 1.25rem;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  color: var(--text-100);
}

.payment-method-selectors {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 25px;
}
.payment-selector-label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  transition: var(--ease);
}
.payment-selector-label:hover {
  border-color: var(--border-hover);
  background: var(--bg-surface);
}
.payment-selector-label input[type="radio"] {
  accent-color: var(--accent);
}
.payment-selector-label span {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-200);
  text-transform: none !important;
}
.payment-info-text {
  font-size: 0.85rem;
  color: var(--text-400);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ── Customer Account Panel ───────────────────────────────────────────── */
.account-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 35px;
  align-items: start;
  padding: 50px 24px 80px;
}
.account-nav {
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.account-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--text-300);
  font-weight: 600;
  font-size: 0.92rem;
  transition: var(--ease);
}
.account-nav a svg {
  color: var(--text-400);
  transition: var(--ease);
}
.account-nav a:hover, .account-nav a.active {
  background: var(--bg-surface);
  color: var(--accent-bright);
}
.account-nav a:hover svg, .account-nav a.active svg {
  color: var(--accent-bright);
}
.account-nav a.logout-link {
  border-top: 1px solid var(--border-subtle);
  margin-top: 15px;
  padding-top: 15px;
  border-radius: 0;
}
.account-nav a.logout-link:hover {
  background: rgba(239, 68, 68, 0.05);
  color: #ef4444;
}
.account-nav a.logout-link:hover svg {
  color: #ef4444;
}

.account-content {
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 35px;
  min-height: 450px;
}
.account-content h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 25px;
  color: var(--text-100);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 10px;
}

.dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.widget-card {
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.widget-card h3 {
  font-size: 0.85rem;
  color: var(--text-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.widget-card .num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent-bright);
  margin: 10px 0;
}
.widget-card a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-300);
}
.widget-card a:hover {
  color: var(--accent-bright);
}

.account-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}
.account-table th, .account-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.account-table th {
  color: var(--text-400);
  font-weight: 600;
}
.account-table td {
  color: var(--text-200);
}

.address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ── Badges & Alerts ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.badge-info {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
}
.badge-success {
  background: var(--emerald-dim);
  color: var(--emerald-bright);
}
.badge-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-300);
}

.alert {
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  display: block;
}
.alert-danger {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--accent-bright);
}
.alert-success {
  background: var(--emerald-dim);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--emerald-bright);
}

/* ── Media Queries for E-commerce ─────────────────────────────────────── */
@media(max-width: 992px) {
  .cart-shell, .checkout-form-shell, .account-shell {
    grid-template-columns: 1fr;
  }
  .address-grid {
    grid-template-columns: 1fr;
  }
}
@media(max-width: 576px) {
  .dashboard-widgets {
    grid-template-columns: 1fr;
  }
}

.form-card {
  background: rgba(17, 24, 39, 0.35);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 28px;
  margin-top: 15px;
}
.form-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text-100);
}