/* =========================================================================
   MODERN THEME — visual upgrade layer
   -------------------------------------------------------------------------
   This file does NOT replace styles.css. It loads AFTER styles.css and
   only overrides colors, spacing, shadows, and adds new hover/animation
   effects. No class names are renamed. No HTML or JS logic is touched.
   Load order in index.html:
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="modern-theme.css">

   COLOR SYSTEM — built around the client's brand green #005752.
   The header keeps that exact color. Every other accent (links, focus
   rings, buttons, active states, glows) is a teal-green drawn from the
   same family, so the whole site reads as one consistent brand instead
   of "green header + unrelated accent color". Blue is kept only as a
   small secondary marker for the "New" badge, to tell it apart from
   the green "Recommended" badge at a glance.
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root{
  /* ---- Brand green (header) — exact client color, unchanged ---- */
  --header-bg:#005752;
  --header-bg-hover:#0C7A73;
  --header-border:#00423E;

  /* ---- Primary accent, derived from the brand green ----
     Used for links, focus rings, active states, CTA buttons, glows. */
  --green-500:#0E8C74;
  --green-600:#0B6F5D;
  --green-glow:rgba(14,140,116,.35);
  --mint-300:#4FD9C4;   /* light accent for text/lines sitting on the dark header */

  /* ---- Secondary accent, used ONLY for the "New" badge ----
     Kept as a cool blue so New vs Recommended stay easy to tell apart. */
  --blue-500:#2F6FED;
  --blue-400:#5B93FF;
  --blue-glow:rgba(47,111,237,.35);

  /* ---- Neutral dark surfaces — teal-charcoal, not generic navy, so
     footer / active buttons / utility bar all feel part of the same
     brand family as the green header. ---- */
  --navy-900:#0A1A18;
  --navy-800:#0F2622;
  --navy-700:#173832;

  /* ---- Neutral grays (unchanged: soft whites / cool grays / charcoal ink) ---- */
  --steel-500:#5B7186;
  --steel-300:#9BAAB8;
  --paper:#F4F6F9;
  --card:#FFFFFF;
  --line:#E4E9F0;
  --ink-900:#111827;
  --ink-600:#4B5666;
  --ink-400:#8994A3;
  --red-500:#E5484D;

  /* ---- New tokens used only in this file ---- */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-pill:100px;

  --glass-bg:rgba(255,255,255,.68);
  --glass-bg-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.5);
  --glass-blur:18px;

  --shadow-1:0 1px 2px rgba(17,24,39,.04), 0 2px 6px rgba(17,24,39,.04);
  --shadow-2:0 10px 24px -8px rgba(17,24,39,.14), 0 4px 8px -4px rgba(17,24,39,.08);
  --shadow-3:0 24px 48px -12px rgba(17,24,39,.22), 0 8px 16px -4px rgba(17,24,39,.10);
  --shadow-card:var(--shadow-1);
  --shadow-card-hover:var(--shadow-2);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.18s;
  --dur-med:.32s;
}

/* Smoother global font rendering + a faint brand-green tint in the page background */
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(14,140,116,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(14,140,116,.04), transparent 55%),
    var(--paper);
  letter-spacing:-.01em;
}
::selection{background:var(--green-500);color:#fff;}


/* =========================================================================
   2. UTILITY BAR + HEADER
   ========================================================================= */
.utility-bar{display:none;}

.site-header{
  background:linear-gradient(180deg, var(--header-bg) 0%, var(--header-border) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 4px 20px rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
}
.logo-mark{
  background:linear-gradient(135deg, var(--header-bg-hover), var(--header-bg));
  box-shadow:0 4px 14px rgba(0,87,82,.45);
}
.logo-text em{color:var(--mint-300);}
.logo-text-wrap{display:flex; flex-direction:column; line-height:1.15;}
.logo-tagline{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--mint-300);
  opacity:.85;
  margin-top:2px;
}

/* Animated underline under top-level nav links — light mint so it shows
   clearly against the dark green header */
.main-nav > ul > li > a{
  position:relative;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.main-nav > ul > li > a::after{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:6px;
  height:2px;
  background:var(--mint-300);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-med) var(--ease-out);
}
.main-nav > ul > li > a:hover{background:rgba(255,255,255,.08);}
.main-nav > ul > li > a:hover::after{transform:scaleX(1);}

/* Mega menu: glass panel with a gentle drop-and-fade entrance */
.has-mega .mega-panel{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-top:3px solid var(--green-500);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-3);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  display:flex;
  pointer-events:none;
}
.has-mega:hover .mega-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.mega-col a{
  border-radius:var(--radius-sm);
  padding:6px 8px;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mega-col a:hover{
  background:rgba(14,140,116,.08);
  color:var(--green-500);
  text-decoration:none;
  transform:translateX(2px);
}

/* About / Contact dropdown panels — same mega-menu mechanism as
   "Product Overview", just a single text column instead of link lists.
   No JavaScript is needed: the reveal-on-hover behavior already comes
   from the existing ".has-mega:hover .mega-panel" rule. */
.mega-panel--text{
  min-width:420px;
  max-width:460px;
  flex-direction:column;
  gap:0;
}
.mega-panel--narrow{min-width:340px; max-width:380px;}
.mega-panel--right{left:auto; right:0; border-radius:var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);}

.mega-text h4{
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green-600);
  margin:0 0 12px;
}
.mega-text p{
  font-size:13.5px;
  line-height:1.65;
  color:var(--ink-600);
  margin:0 0 12px;
}
.mega-text p:last-child{margin-bottom:0;}

.contact-list{display:flex; flex-direction:column; gap:10px;}
.contact-list li{
  font-size:13.5px;
  color:var(--ink-900);
  padding-top:10px;
  border-top:1px solid var(--line);
}
.contact-list li:first-child{padding-top:0; border-top:none;}
.contact-list span{
  display:block;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-400);
  margin-bottom:3px;
}
.contact-list a{
  color:var(--green-600);
  font-weight:600;
  transition:color var(--dur-fast) var(--ease-out);
}
.contact-list a:hover{color:var(--green-500); text-decoration:underline;}

.icon-btn{
  border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.icon-btn:hover{transform:translateY(-1px);}
.icon-btn:active{transform:translateY(0) scale(.94);}
.burger svg line{
  transform-origin:12px 12px;
  transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.burger.is-open svg line:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.is-open svg line:nth-child(2){opacity:0;}
.burger.is-open svg line:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---- Mobile menu toggle button ----
   Hidden on desktop (the horizontal nav is always visible there);
   shown only at the same 900px breakpoint where styles.css hides
   .main-nav, since it's the only way to reach the nav below that. */
.icon-btn.burger{display:none;}
@media (max-width: 900px){
  .icon-btn.burger{display:flex;}
}

/* ---- Mobile nav drawer (opened by #menu-toggle) ----
   styles.css hides .main-nav entirely below 900px; this only adds the
   "open" state, plus tap-to-expand behavior for the dropdown panels
   (which normally rely on :hover, unavailable on touch). */
@media (max-width: 900px){
  .main-nav.open{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    max-height:calc(100vh - 72px);
    overflow-y:auto;
    background:linear-gradient(180deg, var(--header-bg) 0%, var(--header-border) 100%);
    box-shadow:var(--shadow-3);
    animation:mobile-nav-in .22s var(--ease-out);
  }
  .main-nav.open > ul{flex-direction:column; gap:0; height:auto;}
  .main-nav.open > ul > li{width:100%; display:block;}
  .main-nav.open > ul > li > a{
    width:100%;
    padding:16px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .main-nav.open > ul > li > a::after{display:none;}

  .main-nav.open .has-mega > a::before{
    content:"";
    width:8px;height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:transform var(--dur-fast) var(--ease-out);
  }
  .main-nav.open .has-mega.mobile-expanded > a::before{transform:rotate(-135deg);}

  .main-nav.open .mega-panel{
    position:static;
    display:none;
    opacity:1;
    transform:none;
    min-width:0;
    max-width:none;
    width:100%;
    box-shadow:none;
    border:none;
    border-top:1px solid rgba(255,255,255,.1);
    border-radius:0;
    background:rgba(0,0,0,.18);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:6px 24px 20px;
    flex-direction:column;
    gap:18px;
  }
  .main-nav.open .has-mega.mobile-expanded .mega-panel{display:flex;}

  .main-nav.open .mega-col h4,
  .main-nav.open .mega-text h4{color:var(--mint-300);}
  .main-nav.open .mega-col a{color:#D7E4E1; padding:8px 0;}
  .main-nav.open .mega-col a:hover{color:#fff; background:none; transform:none;}
  .main-nav.open .mega-text p{color:#C3D3CF;}
  .main-nav.open .contact-list li{color:#D7E4E1; border-top-color:rgba(255,255,255,.12);}
  .main-nav.open .contact-list span{color:#8AA6A0;}
  .main-nav.open .contact-list a{color:var(--mint-300);}
}
@keyframes mobile-nav-in{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:translateY(0);}
}

/* Search drawer + input */
.search-drawer{background:var(--header-bg-hover);}
#header-search{
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-1);
  border:1px solid transparent;
  transition:box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#header-search:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--green-glow), var(--shadow-2);
}
/* Gentle placeholder fade-in, only runs once per drawer open */
@keyframes placeholder-fade{
  from{opacity:0;} to{opacity:.6;}
}
#header-search::placeholder{
  color:var(--ink-400);
  animation:placeholder-fade .6s var(--ease-out);
}


/* =========================================================================
   3. BREADCRUMB
   ========================================================================= */
.breadcrumb-bar{background:var(--card);}
.breadcrumb-bar a{
  transition:color var(--dur-fast) var(--ease-out);
}
.breadcrumb-bar a:hover{color:var(--green-600);}


/* =========================================================================
   3b. PROMO BANNER CAROUSEL
   -------------------------------------------------------------------------
   5 banners, one visible at a time. The track is just 5 slides in a row,
   shifted with transform: translateX() — no layout thrashing, GPU only.
   modern-enhancements.js handles autoplay, the arrows, and the dots.
   ========================================================================= */
.banner-section{margin-top:24px;}
.banner-carousel{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  aspect-ratio:1376 / 768;
  background:var(--paper);
}
.banner-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .6s var(--ease-out);
  will-change:transform;
}
.banner-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
}
.banner-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.banner-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--glass-border);
  border-radius:50%;
  background:rgba(17,24,39,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.banner-nav:hover{background:rgba(17,24,39,.55); transform:translateY(-50%) scale(1.06);}
.banner-nav:active{transform:translateY(-50%) scale(.96);}
.banner-nav.prev{left:16px;}
.banner-nav.next{right:16px;}

.banner-dots{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  padding:6px 10px;
  border-radius:var(--radius-pill);
  background:rgba(17,24,39,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.banner-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  border:none;
  cursor:pointer;
  padding:0;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.banner-dot:hover{background:rgba(255,255,255,.8);}
.banner-dot.is-active{background:var(--mint-300); transform:scale(1.2);}

@media (max-width: 640px){
  .banner-section{margin-top:16px;}
  .banner-carousel{border-radius:var(--radius-md);}
  .banner-nav{width:36px; height:36px;}
  .banner-nav.prev{left:8px;}
  .banner-nav.next{right:8px;}
}

@media (prefers-reduced-motion: reduce){
  .banner-track{transition:none;}
}


/* =========================================================================
   3c. STANDALONE LEGAL PAGE (copyright.html)
   ========================================================================= */
.legal-page{
  max-width:820px;
  padding-top:36px;
  padding-bottom:80px;
}
.legal-card{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  padding:40px 44px;
}
.legal-card h1{
  font-family:var(--font-display);
  font-size:26px;
  color:var(--ink-900);
  margin:0 0 6px;
}
.legal-card h2{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--green-600);
  margin:32px 0 12px;
}
.legal-card h2:first-of-type{margin-top:8px;}
.legal-card code{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 6px;
  font-family:var(--font-mono, monospace);
  font-size:13px;
}
.legal-updated{
  font-size:12.5px;
  color:var(--ink-400);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:0 0 28px;
}
.legal-card p{
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink-600);
  margin:0 0 18px;
}
.legal-card p:last-child{margin-bottom:0;}
.legal-card a{color:var(--green-600); font-weight:600;}
.legal-card a:hover{color:var(--green-500); text-decoration:underline;}

@media (max-width: 640px){
  .legal-card{padding:28px 22px;}
}


/* =========================================================================
   4. SIDEBAR — glass cards
   ========================================================================= */
.catalog{gap:36px; padding-top:36px; padding-bottom:80px;}

.sidebar-block{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  padding:20px;
  transition:box-shadow var(--dur-med) var(--ease-out);
}
.sidebar-block:hover{box-shadow:var(--shadow-2);}

.category-tree > li > button,
.subcategory-tree li button{
  border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.category-tree > li > button:hover{padding-left:14px;}
.category-tree > li.active > button{
  background:linear-gradient(135deg, rgba(14,140,116,.12), rgba(14,140,116,.05));
  color:var(--green-600);
}
.category-tree > li.active .count{color:var(--green-500);}
.subcategory-tree li.active button{color:var(--green-600);}
.subcategory-tree{transition:max-height .28s var(--ease-out);}

.filter-chip{
  border-radius:var(--radius-pill);
  transition:all var(--dur-fast) var(--ease-out);
}
.filter-chip:hover{
  border-color:var(--green-500);
  color:var(--green-600);
  transform:translateY(-1px);
}
.filter-chip.active{
  background:linear-gradient(135deg, var(--navy-800), var(--navy-700));
  border-color:var(--navy-800);
  box-shadow:var(--shadow-1);
}

.checkbox-row input[type="checkbox"]{
  width:16px;height:16px;
  accent-color:var(--green-500);
  border-radius:4px;
}
.checkbox-row{border-radius:var(--radius-sm); transition:background var(--dur-fast) var(--ease-out);}
.checkbox-row:hover{background:rgba(14,140,116,.06); padding-left:6px;}

/* Region Availability is hidden per request. The block stays in the DOM
   (display:none only) because script.js renders region filter chips into
   #region-filters on every page load — removing the element from the
   HTML would make that script.js call fail and break the whole catalog. */
#region-availability-block{display:none;}


/* =========================================================================
   5. TOOLBAR (sort + view toggle)
   ========================================================================= */
#sort-select{
  border-radius:var(--radius-sm);
  transition:box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
#sort-select:hover, #sort-select:focus{border-color:var(--green-500);}

.view-toggle{border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-1);}
.view-btn{transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);}
.view-btn.active{background:linear-gradient(135deg, var(--navy-800), var(--navy-700));}


/* =========================================================================
   6. PRODUCT GRID / CARDS — glassmorphism + rich hover states
   ========================================================================= */
.product-grid{
  gap:24px;
  container-type:inline-size; /* enables the container query below */
}

.product-card{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  transition:transform var(--dur-med) var(--ease-out),
             box-shadow var(--dur-med) var(--ease-out),
             border-color var(--dur-med) var(--ease-out);

  /* scroll-reveal starting state; toggled by modern-enhancements.js */
  opacity:0;
  transform:translateY(18px);
}
.product-card.in-view{
  opacity:1;
  transform:translateY(0);
}
.product-card:hover{
  box-shadow:var(--shadow-3);
  transform:translateY(-6px) scale(1.015);
  border-color:rgba(14,140,116,.35);
}
.product-card:active{transform:translateY(-3px) scale(1.005);}

/* Image zoom + soft shine sweep on hover, brightness lift */
.card-media{
  background:linear-gradient(135deg, #EEF2F7 0%, #E3E9F0 100%);
  position:relative;
}
.card-media img{
  transition:transform var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.product-card:hover .card-media img{
  transform:scale(1.07);
  filter:brightness(1.04);
}
.card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  background-size:220% 220%;
  background-position:120% 0;
  opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out);
  pointer-events:none;
}
.product-card:hover .card-media::after{
  opacity:1;
  animation:card-shine 1s var(--ease-out);
}
@keyframes card-shine{
  from{background-position:120% 0;}
  to{background-position:-20% 0;}
}

/* Badges: gradient pill with a soft glow pulse.
   "New" stays blue (secondary accent) so it reads differently from
   "Recommended", which uses the brand green. */
.badge{
  border-radius:var(--radius-pill);
  padding:4px 11px;
  box-shadow:0 2px 6px rgba(17,24,39,.15);
}
.badge.new{
  background:linear-gradient(135deg, var(--blue-400), var(--blue-500));
  animation:badge-glow-blue 2.4s ease-in-out infinite;
}
.badge.recommended{
  background:linear-gradient(135deg, var(--header-bg-hover), var(--header-bg));
  animation:badge-glow-green 2.4s ease-in-out infinite;
}
.badge.featured{
  background:linear-gradient(135deg, #F0B429, #DE911D);
  animation:badge-glow-amber 2.4s ease-in-out infinite;
}
@keyframes badge-glow-amber{
  0%, 100%{box-shadow:0 2px 6px rgba(17,24,39,.15), 0 0 0 0 rgba(222,145,29,.35);}
  50%{box-shadow:0 2px 6px rgba(17,24,39,.15), 0 0 0 5px rgba(222,145,29,0);}
}
@keyframes badge-glow-blue{
  0%, 100%{box-shadow:0 2px 6px rgba(17,24,39,.15), 0 0 0 0 var(--blue-glow);}
  50%{box-shadow:0 2px 6px rgba(17,24,39,.15), 0 0 0 5px rgba(47,111,237,0);}
}
@keyframes badge-glow-green{
  0%, 100%{box-shadow:0 2px 6px rgba(17,24,39,.15), 0 0 0 0 var(--green-glow);}
  50%{box-shadow:0 2px 6px rgba(17,24,39,.15), 0 0 0 5px rgba(14,140,116,0);}
}

.model-tag{
  border-radius:6px;
  background:var(--paper);
}
.card-cta{
  transition:gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.product-card:hover .card-cta{
  color:var(--green-600);
  text-decoration:none;
  gap:8px;
}

/* Container query: tighten card text once cards get narrow (e.g. 4-up grid) */
@container (max-width: 260px){
  .card-title{font-size:13.5px;}
  .card-body{padding:12px 14px 14px;}
}


/* =========================================================================
   7. PAGINATION
   ========================================================================= */
.pagination button{
  border-radius:var(--radius-sm);
  transition:all var(--dur-fast) var(--ease-out);
}
.pagination button:hover:not(.active):not(:disabled){
  border-color:var(--green-500);
  color:var(--green-600);
  transform:translateY(-1px);
}
.pagination button.active{
  background:linear-gradient(135deg, var(--navy-800), var(--navy-700));
  box-shadow:var(--shadow-1);
}


/* =========================================================================
   8. MODAL — glass surface, smooth entrance
   ========================================================================= */
.modal-overlay{
  background:rgba(10,26,24,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.modal{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
  animation:modal-in .28s var(--ease-out);
}
@keyframes modal-in{
  from{opacity:0; transform:translateY(12px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.modal-close{
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.modal-close:hover{transform:rotate(90deg);}

.modal-media{background:linear-gradient(135deg, #EEF2F7 0%, #E3E9F0 100%);}

/* Primary CTA button: brand-green gradient, lift, and a soft glow ring on hover */
.modal-cta{
  background:linear-gradient(135deg, var(--header-bg-hover), var(--header-bg));
  border-radius:var(--radius-pill);
  box-shadow:0 6px 16px var(--green-glow);
  transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
  position:relative;
  overflow:hidden;
}
.modal-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px var(--green-glow);
}
.modal-cta:active{transform:translateY(0) scale(.98);}
/* Ripple element added by modern-enhancements.js on click */
.modal-cta .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:ripple .6s var(--ease-out);
  pointer-events:none;
}
@keyframes ripple{
  to{transform:scale(3); opacity:0;}
}

.spec-table tr{transition:background var(--dur-fast) var(--ease-out);}
.spec-table tr:hover{background:rgba(14,140,116,.05);}


/* =========================================================================
   9. FOOTER
   ========================================================================= */
.site-footer{
  background:linear-gradient(180deg, var(--navy-900) 0%, #050F0E 100%);
  padding-top:64px;
}
.footer-col a{
  transition:color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  display:block;
  padding:6px 0;
}
.footer-col a:hover{
  color:var(--mint-300);
  transform:translateX(3px);
}

/* "Get in Touch" reuses .contact-list (built for the light nav dropdown);
   these overrides adapt it to the dark footer background. */
.footer-contact-list li{
  color:#D7E4E1;
  border-top-color:rgba(255,255,255,.1);
}
.footer-contact-list span{color:#8AA6A0;}
.footer-contact-list a{color:var(--mint-300);}
.footer-contact-list a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);}
.footer-legal a{transition:color var(--dur-fast) var(--ease-out);}

/* Scroll-reveal for footer, same mechanism as product cards */
.site-footer{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.site-footer.in-view{opacity:1; transform:translateY(0);}


/* =========================================================================
   10. SKELETON / SHIMMER LOADING STATE
   -------------------------------------------------------------------------
   Applied to .card-media while a product image has not finished loading.
   modern-enhancements.js toggles the "is-loading" class; if JS is
   disabled the plain gradient background from styles.css still shows,
   so nothing breaks.
   ========================================================================= */
.card-media.is-loading{
  background:linear-gradient(90deg, #EEF1F5 0%, #F7F9FB 50%, #EEF1F5 100%);
  background-size:200% 100%;
  animation:shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}


/* =========================================================================
   11. RESPONSIVE TUNING
   ========================================================================= */
@media (max-width: 900px){
  .catalog{gap:24px;}
  .sidebar-block{padding:16px;}
}
@media (max-width: 640px){
  .product-grid{gap:14px;}
  .modal{max-height:92vh;}
}


/* =========================================================================
   12. ACCESSIBILITY
   ========================================================================= */
:focus-visible{
  outline:2px solid var(--green-500);
  outline-offset:2px;
  border-radius:4px;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .product-card,
  .site-footer{
    opacity:1 !important;
    transform:none !important;
  }
  .badge.new, .badge.recommended, .badge.featured{animation:none;}
  .card-media::after{display:none;}
}