/* =========================================================
   Lancing UK — NITRO ULTRA (Tuned)
   Big, obvious upgrade: masonry grid, luxe cards, brand accents.
   Load order: LAST stylesheet on the page.
   ========================================================= */

/* ------- Brand & tokens (tuned) ------- */
:root{
  --lu-brand:#1769ff;         /* Lancing blue, punchier than #0d6efd */
  --lu-brand-ink:#0e55d6;
  --lu-ink:#548af4;
  --lu-muted:#5e6a7a;
  --lu-bg:#f4f8ff;
  --lu-panel:#fff;
  --lu-border:#e6e9ef;
  --lu-focus:0 0 0 .22rem rgba(23,105,255,.34);
  --lu-shadow-sm:0 10px 28px rgba(16,28,56,.12);
  --lu-shadow:0 26px 72px rgba(16,28,56,.18);
  --lu-pill:rgba(23,105,255,.12);
}

/* Anti-aliasing + smooth scroll */
html,body{scroll-behavior:smooth}
body,button,input,textarea{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}


/* =========================================================
   FILTER BAR — frosted glass, compact-on-scroll
   ========================================================= */
#filters-bar{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.78);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--lu-border)
}
#filters-bar .py-3{transition:padding .2s}
#filters-bar.compact .py-3{padding-top:.45rem!important;padding-bottom:.45rem!important}

/* Horizontal scroll buttons; hide scrollbar but keep accessible */
#product-filters{gap:.6rem;flex-wrap:nowrap;overflow:auto;scrollbar-width:none}
#product-filters::-webkit-scrollbar{display:none}
#product-filters .btn{
  border-radius:999px;padding:.58rem 1.05rem;font-weight:800;letter-spacing:.2px;
  border:1px solid var(--lu-brand);color:var(--lu-brand);
  background:linear-gradient(#fff,#f7faff);
  transition:transform .12s, box-shadow .22s, background .2s, color .2s
}
#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 18px 38px rgba(23,105,255,.26)
}

/* =========================================================
   GRID — Masonry with CSS columns (no markup changes)
   ========================================================= */


/* =========================================================
   CARD — premium depth, animated border glow, category chips
   ========================================================= */
#product-grid > a.product-card{
  position:relative;background:var(--lu-panel);
  border:1px solid var(--lu-border)!important;border-radius:22px;overflow:hidden;
  box-shadow:var(--lu-shadow-sm);
  transition:transform .18s, box-shadow .22s, border-color .22s;
}
#product-grid > a.product-card:hover{
  transform:translateY(-6px);border-color:rgba(23,105,255,.34)!important;box-shadow:var(--lu-shadow)
}

/* Glow frame */
#product-grid > a.product-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 180deg, rgba(23,105,255,0), rgba(23,105,255,.23), rgba(23,105,255,0));
  opacity:0;transition:opacity .25s;mix-blend:overlay
}
#product-grid > a.product-card:hover::after{opacity:.65}

/* Category chip (from data-cat) – brand accents per category */
#product-grid > a.product-card::before{
  content:attr(data-cat);position:absolute;top:12px;left:12px;z-index:2;
  font-size:.7rem;font-weight:900;letter-spacing:.35px;text-transform:uppercase;
  padding:.32rem .62rem;border-radius:999px;background:var(--lu-pill);color:var(--lu-brand);
  border:1px solid rgba(23,105,255,.28)
}
/* TUNED category colours (edit/multiply freely) */
#product-grid > a.product-card[data-cat*="Capping"]::before{background:rgba(0,184,148,.14);color:#00b894;border-color:rgba(0,184,148,.3)}
#product-grid > a.product-card[data-cat*="Labell"]::before{background:rgba(255,159,28,.16);color:#ff9f1c;border-color:rgba(255,159,28,.32)}
#product-grid > a.product-card[data-cat*="Fill"]::before{background:rgba(17,138,178,.16);color:#118ab2;border-color:rgba(17,138,178,.32)}
#product-grid > a.product-card[data-cat*="Seal"]::before{background:rgba(108,92,231,.16);color:#6c5ce7;border-color:rgba(108,92,231,.32)}
#product-grid > a.product-card[data-cat*="Wrap"]::before{background:rgba(231,76,60,.16);color:#e74c3c;border-color:rgba(231,76,60,.32)}
#product-grid > a.product-card[data-cat*="Conveyor"]::before{background:rgba(39,174,96,.16);color:#27ae60;border-color:rgba(39,174,96,.32)}
#product-grid > a.product-card[data-cat*="Shrink"]::before{background:rgba(0,151,230,.16);color:#0097e6;border-color:rgba(0,151,230,.32)}
#product-grid > a.product-card[data-cat*="Flow"]::before{background:rgba(142,68,173,.16);color:#8e44ad;border-color:rgba(142,68,173,.32)}

/* Media */
#product-grid .product-image{position:relative;aspect-ratio:4/3;background:#eef3fb;overflow:hidden}
#product-grid .product-image::after{
  content:"";position:absolute;inset:auto 0 0 0;height:44%;
  background:linear-gradient(to top, rgba(7,12,24,.55), rgba(7,12,24,0) 60%);
  pointer-events:none
}
#product-grid .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
}
#product-grid > a.product-card:hover .product-image img{transform:scale(1.08);filter:saturate(1.05) contrast(1.02)}

/* Body */
#product-grid .product-body{padding:18px 20px 20px}
#product-grid h3{margin:0 0 .35rem;font-weight:900;font-size:clamp(1.08rem,1.2vw,1.24rem);letter-spacing:.2px}
#product-grid h3 a{color:#000000;text-decoration:none;position:relative}
#product-grid h3 a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--lu-brand),transparent);transition:width .25s
}
#product-grid > a.product-card:hover h3 a::after{width:84px}
#product-grid .text-muted{color:var(--lu-muted)!important;font-weight:600}

/* =========================================================
   ENQUIRY / CONTACT — clearer, premium action
   ========================================================= */
.blog_section .comments_form{
  background:#fff;border:1px solid var(--lu-border);border-radius:16px;padding:24px;
  box-shadow:0 14px 32px rgba(12,20,40,.08)
}
#contactForm .form-control{
  border-radius:12px;border:1px solid var(--lu-border);padding:.9rem 1rem;transition:.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:.95rem 1.12rem;border-radius:12px;
  box-shadow:0 20px 46px rgba(23,105,255,.30);transition:transform .12s, box-shadow .2s
}
#contactForm .btn.btn-primary:hover{transform:translateY(-2px);box-shadow:0 26px 56px rgba(23,105,255,.36)}

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

/* =========================================================
   QoL / Accessibility / Modes
   ========================================================= */
.btn:focus, a:focus, #product-grid > a.product-card:focus{outline:0;box-shadow:var(--lu-focus)!important}

@media (prefers-color-scheme: dark){
  :root{--lu-ink:##a9b4c6;--lu-muted:#a9b4c6;--lu-panel:#0f1726;--lu-bg:#548af4;--lu-border:#1b2334}
  body{background:linear-gradient(90deg,var(--lu-brand), transparent); transition:.25s ease; border-radius:3px; }
  #product-grid > a.product-card{box-shadow:0 22px 52px rgba(0,0,0,.46)}
  #product-grid .product-image{background:#0d1424}
}

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

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