/* =========================================================
   Lancing UK — NITRO ULTRA Theme (drop-in, no markup edits)
   Big visual upgrade: masonry grid, luxe cards, category chips
   ========================================================= */

/* -------- Tokens -------- */
:root{
  --lu-brand:#cfdff7; --lu-brand-ink:#0a58ca;
  --lu-ink:1b2334;   --lu-muted:1b2334;
  --lu-bg:#f5f8ff;    --lu-panel:#fff; --lu-border:#e6e9ef;
  --lu-focus:0 0 0 .22rem rgba(13,110,253,.34);
  --lu-shadow-sm:0 10px 26px rgba(16,28,56,.12);
  --lu-shadow:0 24px 70px rgba(16,28,56,.18);
  --lu-pill:rgba(13,110,253,.12);
}
html,body{scroll-behavior:smooth}
body,button,input,textarea{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}



/* =========================================================
   FILTER BAR — glassy, compact-on-scroll feel
   ========================================================= */
#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}
#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:.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, 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 16px 36px rgba(13,110,253,.25)
}

/* =========================================================
   GRID — Masonry without markup changes (CSS multi-column)
   ========================================================= */
/* Convert the grid area to columns (masonry effect) */


/* =========================================================
   CARD — premium depth, animated border glow, category chips
   ========================================================= */
#product-grid > a.product-card,
.product-card{
  position:relative;display:flex;flex-direction:column;background:var(--lu-panel);
  border:1px solid var(--lu-border)!important;border-radius:22px;overflow:hidden;
  box-shadow:var(--lu-shadow-sm);
  text-decoration:none;color:#000000;
  transition:transform .18s, box-shadow .22s, border-color .22s;
}

/* Animated border glow frame */
#product-grid > a.product-card::after,
.product-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 180deg,rgba(13,110,253,.0),rgba(13,110,253,.24),rgba(13,110,253,.0));
  opacity:.0;transition:opacity .25s;mix-blend:overlay;
}
#product-grid > a.product-card:hover{transform:translateY(-6px);box-shadow:var(--lu-shadow);border-color:rgba(13,110,253,.35)!important}
#product-grid > a.product-card:hover::after{opacity:.65}

/* Category chip (from data-cat) */
#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:.3rem .6rem;border-radius:999px;background:var(--lu-pill);color:var(--lu-brand);
  border:1px solid rgba(13,110,253,.25)
}
/* Category accent colours (edit as needed) */
#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,.14);color:#ff9f1c;border-color:rgba(255,159,28,.32)}
#product-grid > a.product-card[data-cat*="Fill"]::before{background:rgba(17,138,178,.14);color:#118ab2;border-color:rgba(17,138,178,.32)}
#product-grid > a.product-card[data-cat*="Seal"]::before{background:rgba(108,92,231,.14);color:#6c5ce7;border-color:rgba(108,92,231,.32)}
#product-grid > a.product-card[data-cat*="Wrap"]::before{background:rgba(231,76,60,.14);color:#e74c3c;border-color:rgba(231,76,60,.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)}

/* Content */
#product-grid .product-body{padding:18px 20px 20px}
#product-grid h3{margin:0 0 .35rem;
	font-weight:900;
	font-size:clamp(1.06rem,1.2vw,1.22rem);
	letter-spacing:.2px;
	color: #000000;
}
#product-grid h3 a{color:inherit;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:78px}
#product-grid .text-muted{color:#000000!important;font-weight:450}

/* =========================================================
   ENQUIRY / CONTACT — clearer, tactile 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:.9rem 1.1rem;border-radius:12px;
  box-shadow:0 16px 38px rgba(13,110,253,.28);transition:transform .12s, box-shadow .2s
}
#contactForm .btn.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(13,110,253,.34)}

/* =========================================================
   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}

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

/* Dark mode auto */
@media (prefers-color-scheme: dark){
  :root{--lu-ink:#1b2334;--lu-muted:#fff;--lu-panel:#0f1726;--lu-bg:#030303;--lu-border:#1b2334}
  body{background:linear-gradient(##f5f8ff, var(--lu-bg)); }
  #product-grid > a.product-card{box-shadow:0 20px 48px rgba(0,0,0,.45)}
  #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}
}
/* ============================================================
   GLOBAL FIX — Prevent product images overlapping H1 titles
   Applies to all single-product pages that use .container7 layout
   ============================================================ */

/* Standardise product hero layout on ALL product pages */
.product-hero,
.bg-gradient-to-b.from-slate-50.to-white .container7 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.5rem;
}

/* Columns inside hero */
.product-hero > div,
.bg-gradient-to-b.from-slate-50.to-white .container7 > div {
    flex: 1 1 0;
}

/* Ensure titles NEVER sit under images */
.product-hero h1,
.bg-gradient-to-b.from-slate-50.to-white .container7 h1 {
    position: relative;
    z-index: 5;
    margin: 0 0 1rem 0;
}

/* Reset ALL product images so no CSS can push them over text */
.product-hero img,
.bg-gradient-to-b.from-slate-50.to-white .container7 img,
.container7 .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;

    /* Overrides any conflicting styles from theme files */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;

    z-index: 1;
}

/* Responsive mobile layout */
@media (max-width: 768px) {
    .product-hero,
    .bg-gradient-to-b.from-slate-50.to-white .container7 {
        flex-direction: column;
        text-align: left;
    }

    .product-hero img,
    .bg-gradient-to-b.from-slate-50.to-white .container7 img {
        margin-top: 1rem !important;
    }
}