/* =========================================================
   Lancing UK — All Products "Pro Edition" Enhancement Layer
   Drop-in. No markup changes required.
   ========================================================= */

/* -------- Brand & Design Tokens -------- */
:root{
  --lu-brand:#e8f2ff;
  --lu-brand-ink:#0a58ca;
  --lu-ink:#0b1220;
  --lu-muted:#5f6b7a;
  --lu-bg:#f5f8ff;
  --lu-panel:#ffffff;
  --lu-border:#e6e9ef;
  --lu-shadow:0 10px 30px rgba(22,34,66,.12);
  --lu-shadow-lg:0 22px 60px rgba(22,34,66,.18);
  --lu-focus:0 0 0 .22rem rgba(13,110,253,.32);
  --lu-glass:rgba(255,255,255,.75);
  --lu-pill:rgba(13,110,253,.10);
}

/* Crisp text across UI */
html,body{scroll-behavior:smooth;}
body,button,input,textarea{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* -------- Global polish -------- */
body{ color:var(--lu-ink); background:#fff; }
.container5, .container7{ max-width:1200px; }

/* Fancy section headings (works on any h2/h3 in sections) */
section h2, section h3{
  position:relative; font-weight:900; letter-spacing:.2px;
}
section h2:after, section h3:after{
  content:""; position:absolute; left:0; bottom:-10px; height:3px; width:72px;
  background:linear-gradient(90deg,var(--lu-brand), transparent);
  border-radius:3px; opacity:.85;
}

/* -------- Navigation polish (keeps your structure) -------- */
.top-bar{ background:#0b1220; color:#cbd6ea; border-bottom:1px solid rgba(255,255,255,.06); }
.top-bar a{ color:#e9f1ff; opacity:.95; }
.main_menu_wrapper .navbar{ border:0; box-shadow:0 6px 24px rgba(0,0,0,.08); }
.navbar-default .navbar-nav>li>a{ font-weight:700; }


/* -------- Sticky Filters: glass morph + collapse on scroll -------- */
#filters-bar{
  position:sticky; top:0; z-index:30;
  background:var(--lu-glass); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--lu-border); transition:padding .2s ease, background .2s ease;
}
#filters-bar.compact .py-3{ padding-top:.45rem!important; padding-bottom:.45rem!important; }
#product-filters{ gap:.6rem; flex-wrap:wrap; }
#product-filters .btn{
  border-radius:999px; padding:.55rem 1rem; font-weight:800; letter-spacing:.2px;
  border:1px solid var(--lu-brand); color:var(--lu-brand); background:linear-gradient(#fff,#f7faff);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
#product-filters .btn:hover{ background:var(--lu-pill); transform:translateY(-1px); }
#product-filters .btn.active{
  color:#fff; background:var(--lu-brand); border-color:var(--lu-brand); box-shadow:0 14px 32px rgba(13,110,253,.22);
}

/* -------- Product Grid: luxe cards -------- */
#product-grid .col-12{ padding:12px; }

.product-card{
  display:flex; flex-direction:column; background:var(--lu-panel);
  border:1px solid var(--lu-border); border-radius:22px; overflow:hidden;
  box-shadow:var(--lu-shadow); transition:transform .2s ease, box-shadow .22s ease, border-color .22s ease;
  isolation:isolate;
}
.product-card:hover{ transform:translateY(-6px); border-color:rgba(13,110,253,.35); box-shadow:var(--lu-shadow-lg); }

/* image area with layered depth + parallax */
.product-card .product-image{ position:relative; aspect-ratio:4/3; background:#eff3fb; overflow:hidden; }
.product-card .product-image::after{
  content:""; position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient( to top, rgba(9,16,32,.55), rgba(9,16,32,0) 55% );
  pointer-events:none; opacity:.85; transition:.3s;
}
.product-card .product-image img{
  width:100%; height:100%; object-fit:cover; transform:translateZ(0) scale(1.03);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .25s ease;
}
.product-card:hover .product-image img{ transform:scale(1.08); filter:saturate(1.05) contrast(1.02); }

.product-card .product-body{ padding:18px 20px 20px; }
.product-card h3{
  margin:0 0 .35rem; font-weight:900; font-size:clamp(1.05rem,1.2vw,1.15rem);
  letter-spacing:.2px;
}
.product-card h3 a{ color:inherit; text-decoration:none; position:relative; }
.product-card h3 a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:3px;
  background:linear-gradient(90deg,var(--lu-brand), transparent); transition:.25s ease; border-radius:3px;
}
.product-card:hover h3 a::after{ width:80px; }

.product-card .text-muted{ color:var(--lu-muted)!important; font-weight:600; }

/* Soft “spec / feature” pills if you already print them inline */
.product-card .pill{
  display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  padding:.32rem .6rem; margin:.25rem .35rem .35rem 0; border-radius:999px;
  background:var(--lu-pill); color:var(--lu-brand);
}

/* -------- Sections & rhythm -------- */
#range{ background:linear-gradient(#fff, var(--lu-bg)); }
#range .container{ padding-top:22px; padding-bottom:28px; }

/* -------- Enquiry / Contact -------- */
.blog_section .comments_form{
  background:#fff; border:1px solid var(--lu-border); border-radius:16px; padding:24px;
  box-shadow:0 12px 28px rgba(12,20,40,.06);
}
#contactForm .form-control{
  border-radius:12px; border:1px solid var(--lu-border); padding:.9rem 1rem; transition:border-color .2s, box-shadow .2s;
}
#contactForm .form-control:focus{ border-color:var(--lu-brand); box-shadow:var(--lu-focus); }
#contactForm .btn.btn-primary{
  background:linear-gradient(180deg,var(--lu-brand),var(--lu-brand-ink));
  border-color:var(--lu-brand-ink); font-weight:900; letter-spacing:.2px;
  padding:.9rem 1.1rem; border-radius:12px; box-shadow:0 14px 34px rgba(13,110,253,.25);
  transition:transform .12s ease, box-shadow .2s ease;
}
#contactForm .btn.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(13,110,253,.33); }

/* -------- Footer -------- */
.footer{ background:#0b1220; color:#cbd6ea; border-top:4px solid var(--lu-brand); }
.footer a{ color:#e9f1ff; }
.copyright_wrapper{ background:#0a0f1b; color:#9fb0cf; border-top:1px solid rgba(255,255,255,.06); }

/* -------- Utilities -------- */
/* Accessible focus rings */
.btn:focus, a:focus, .product-card:focus-within{ outline:0; box-shadow:var(--lu-focus)!important; }

/* Ratio helper (if Bootstrap ratio missing) */
.ratio{ position:relative; width:100%; }
.ratio::before{ content:""; display:block; padding-top:75%; }
.ratio>*{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Mobile tweaks */
@media(max-width:575.98px){
  #filters-bar .py-3{ padding-top:.6rem!important; padding-bottom:.6rem!important; }
  .product-card .product-body{ padding:16px 16px 18px; }
  .container5{ padding:0 16px; }
}

/* Dark mode auto-adapt (if user prefers dark) */
@media (prefers-color-scheme: dark){
  :root{
    --lu-ink:#e7ecf7; --lu-muted:#a9b4c6; --lu-panel:#0f1726; --lu-bg:#0b1220; --lu-border:#1b2334;
    --lu-glass:rgba(11,18,32,.65);
  }
  body{ background:linear-gradient(90deg,var(--lu-brand), transparent); transition:.25s ease; border-radius:3px; }
  .top-bar{ background:#070d1a; }
  .main_menu_wrapper .navbar{ box-shadow:0 6px 24px rgba(0,0,0,.5); }
  .product-card{ box-shadow:0 14px 40px rgba(0,0,0,.45); }
  .product-card .product-image{ background:#0d1424; }
  .footer{ border-top-color:var(--lu-brand); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Print clean */
@media print{
  #filters-bar,.top-bar,.main_menu_wrapper,.mobail_menu_main,video,.hero1 #banner .hero-content{ display:none!important; }
  #range{ padding-top:0; background:#fff; }
  .product-card{ box-shadow:none; transform:none; }
}