/* -------- Theme tokens -------- */
    :root{
      --brand:#e30613; --brand-600:#cc0713; --brand-700:#b3000f;
      --ink:#111; --text:#222; --muted:#6b7280;
      --bg:#fff; --panel:#f7f7f8;
      --ring:0 0 0 3px rgba(227,6,19,.14);
      --radius:14px; --radius-sm:10px;
      --elev-1:0 6px 18px rgba(0,0,0,.10);
      --elev-2:0 14px 38px rgba(0,0,0,.16);
      --speed:280ms; --speed-slow:520ms;
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
         background:var(--bg);color:var(--text); overflow-x: hidden;}

    img{max-width:100%;height:auto;display:block}

    /* -------- Header -------- */
    header{
      position:sticky;top:0;z-index:40;
      background:linear-gradient(180deg,var(--brand),var(--brand-700));
      color:#fff;text-align:center;font-weight:800;letter-spacing:.3px;
      padding:.9rem 1rem;font-size:1.25rem;box-shadow:0 2px 10px rgba(0,0,0,.18)
    }
    .subheader{
      background:#ffe5e7;color:var(--brand-700);
      border-bottom:1px solid #f2bcbc;
      text-align:center;padding:.45rem 1rem;
      font-size:.95rem;font-weight:600
    }

    .wrap{max-width:1200px;margin:0 auto;padding:1rem}

    /* -------- Logo strip (kept) -------- */
    .logo-section{background:#fff;text-align:center;padding:1.1rem 0}
    .logo-row{display:flex;align-items:center;justify-content:center;gap:1rem;width:fit-content;margin:0 auto}
    .tvs-logo{max-width:120px}
    .welcome-text{margin:0;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--brand-700)}

    /* -------- Views slide (Home <-> Catalog) -------- */
    .views{
      position:relative;
      overflow:hidden;
      min-height:60vh;
      /* Allow scrolling on mobile */
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    .view{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      gap:.8rem;
      padding:clamp(12px,2vw,22px);
      transform:translateX(0);
      transition:transform var(--speed-slow) cubic-bezier(.2,.8,.2,1);
      /* Ensure content can scroll if needed */
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    body.view-home  #homeView{transform:translateX(0)}
    body.view-home  #catalogView{transform:translateX(100%)}
    body.view-catalog #homeView{transform:translateX(-100%)}
    body.view-catalog #catalogView{transform:translateX(0)}

    /* -------- Flip Card Styles -------- */
    .flip-cards-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 60px;
      /*flex-wrap: wrap;*/
      margin-top: 40px;
      padding-bottom: 20px; /* Add padding for mobile */
    }
    
    /* Mobile responsive flip cards */
    @media (max-width: 768px) {
      .flip-cards-container {
        flex-direction: column;
        gap: 30px;
        margin-top: 20px;
      }
    }
    
    .flip-card {
      background: transparent;
      width: 280px;
      height: 300px;
      perspective: 1000px;
      cursor: pointer;
    }
    
    /* Mobile responsive flip cards */
    @media (max-width: 768px) {
      .flip-card {
        width: 90vw;
        max-width: 280px;
        height: 280px;
      }
    }
    
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.9s;
      transform-style: preserve-3d;
    }
    .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
    
    /* Mobile touch support */
    @media (max-width: 768px) {
      .flip-card:active .flip-card-inner { transform: rotateY(180deg); }
    }
    
    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    }
    .flip-card-front {
      background: rgba(255, 255, 255, 0.85);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .flip-card-front img { width: 80%; border-radius: 10px; transition: transform 0.3s ease; }
    .flip-card-front:hover img { transform: scale(1.05); }
    .flip-card-front h2 { margin-top: 10px; font-size: 1.3em; color: #000; font-weight: bold; }
    .flip-card-back {
      background: linear-gradient(135deg, #003366, #0066cc);
      color: #fff; transform: rotateY(180deg); display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center;
    }
    .flip-card-back h2 { font-size: 1.4em; margin-bottom: 10px; }
    .flip-card-back p { font-size: 1em; color: #e0e0e0; }
    .flip-card:hover { transform: scale(1.05); transition: transform 0.4s ease; }
    .flip-card:hover .flip-card-front img { box-shadow: 0 0 20px rgba(255,255,255,0.5); }

    /* -------- Catalog -------- */
    .catalog-toolbar{
      display:flex;
      gap:.75rem;
      align-items:center;
      flex-wrap:wrap;
      justify-content:space-between;
      padding: 10px 0;
    }
    
    /* Mobile responsive catalog toolbar */
    @media (max-width: 768px) {
      .catalog-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }
      
      .search {
        width: 100%;
        max-width: 100%;
      }
    }
    
    .back-btn{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.55rem .9rem;
      border-radius:10px;
      background:#f3f4f6;
      border:1px solid #e5e7eb;
      color:#111;
      font-weight:700;
      cursor:pointer;
      white-space: nowrap; /* Prevent button text from wrapping */
    }
    .catalog-title{font-weight:800;color:var(--brand-700); margin: 0;}
    .search{flex:1;max-width:420px;position:relative}
    .search input{width:100%;padding:.65rem .9rem .65rem 2.2rem;border:1px solid #ddd;border-radius:10px;font-size:1rem}
    .search input:focus{outline:none;box-shadow:var(--ring);border-color:var(--brand)}
    .search::before{content:"🔎";position:absolute;left:.65rem;top:50%;transform:translateY(-50%);opacity:.6}

    .product-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
      gap:14px;
      padding-bottom: 20px; /* Add padding for mobile */
    }
    
    /* Mobile responsive product grid */
    @media (max-width: 768px) {
      .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
      }
    }
    
    .card{
      background:#fff;
      border:1px solid #eee;
      border-radius:14px;
      overflow:hidden;
      box-shadow:var(--elev-1);
      transition:transform var(--speed), box-shadow var(--speed);
      cursor:pointer;
      display:grid;
      grid-template-rows:160px auto;
    }
    .card:hover{transform:translateY(-4px);box-shadow:var(--elev-2)}
    .thumb{display:grid;place-items:center;background:linear-gradient(180deg,#f6f7fb,#fff)}
    .thumb img{max-height:140px;object-fit:contain}
    .card h4{margin:.6rem .8rem .2rem;font-size:1rem}
    .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem .8rem .8rem}
    .tag{font-size:.72rem;background:#f3f4f6;border:1px solid #e5e7eb;color:#111;padding:.15rem .45rem;border-radius:999px}

    /* -------- Product Drawer -------- */
    .drawer{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.45);
      display:none;
      align-items:flex-end;
      justify-content:center;
      z-index:70;
      padding:1.2rem;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .drawer[open]{display:flex}
    .drawer-panel{
      width:min(1100px,98vw);
      max-height:92vh;
      overflow:auto;
      background:#fff;
      border-radius:16px;
      box-shadow:var(--elev-2);
      position:relative;
      display:grid;
      grid-template-columns:minmax(260px,40%) 1fr;
    }
    
    /* Mobile responsive drawer */
    @media (max-width:900px){
      .drawer-panel{
        grid-template-columns:1fr;
        width: 95vw;
        max-height: 85vh;
      }
      
      .drawer {
        padding: 0.5rem;
      }
    }
    
    .drawer-close{
      position:absolute;
      right:.8rem;
      top:.8rem;
      width:36px;
      height:36px;
      border-radius:999px;
      border:0;
      background:var(--brand);
      color:#fff;
      font-size:18px;
      cursor:pointer;
      z-index: 80; /* Ensure close button is always on top */
    }
    .drawer-left{
      padding:1rem;
      border-right:1px solid #eee;
      background:linear-gradient(180deg,#f7f8fc,#fff);
    }
    .drawer-left .heroimg{border-radius:12px;overflow:hidden;background:#fff;border:1px solid #eee;box-shadow:var(--elev-1)}
    .drawer-left .actions{
      display:flex;
      gap:.6rem;
      flex-wrap:wrap;
      margin-top:.8rem;
    }
    
    /* Mobile responsive drawer actions */
    @media (max-width: 768px) {
      .drawer-left .actions {
        flex-direction: column;
      }
    }
    
    .btn{
      appearance:none;
      border:0;
      border-radius:10px;
      padding:.7rem 1rem;
      font-weight:800;
      cursor:pointer;
      flex: 1;
      text-align: center;
    }
    .btn.primary{background:var(--brand);color:#fff}
    .btn.secondary{background:#111;color:#fff}
    .btn.light{background:#f3f4f6}

    .drawer-right{padding:1rem}
    .product-title{margin:.2rem 0 .25rem;font-size:1.4rem}
    .pill-tabs{
      display:flex;
      gap:.4rem;
      flex-wrap:wrap;
      margin:.4rem 0 .8rem;
      overflow-x: auto; /* Allow horizontal scrolling on mobile */
      padding-bottom: 5px;
    }
    .pill{
      border:1px solid #e5e7eb;
      background:#fff;
      color:#111;
      padding:.45rem .7rem;
      border-radius:999px;
      font-weight:700;
      cursor:pointer;
      white-space: nowrap; /* Prevent text wrapping */
    }
    .pill.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
    .tab-panel{display:none}
    .tab-panel.active{display:block;animation:fadeIn .25s ease both}
    @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

    /* Features column layout */
    .features{
      display:grid;
      grid-template-columns:260px 1fr;
      gap:12px;
      align-items:start;
    }
    
    /* Mobile responsive features */
    @media (max-width:720px){
      .features{
        grid-template-columns:1fr;
        gap: 20px;
      }
    }
    
    .feat-list{
      display:flex;
      flex-direction:column;
      gap:8px;
      max-height: 300px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .feat-item{
      display:flex;
      align-items:center;
      gap:.6rem;
      padding:.55rem .65rem;
      border:1px solid #e5e7eb;
      border-radius:10px;
      background:#fff;
      cursor:pointer;
    }
    .feat-item:hover{box-shadow:var(--elev-1)}
    .feat-item.active{background:#fef2f2;border-color:#fecaca}
    .feat-detail{
      border:1px solid #e5e7eb;
      border-radius:12px;
      padding:.8rem;
      background:#fff;
      min-height:140px;
      box-shadow:var(--elev-1);
    }
    .feat-detail h5{margin:.1rem 0 .4rem}
    .feat-detail p{margin:0;color:var(--muted)}

    /* Colours & specs */
    .swatches{display:flex;gap:.5rem;flex-wrap:wrap}
    .swatch{width:28px;height:28px;border-radius:50%;border:2px solid #fff;outline:1px solid #e5e7eb;box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer}
    .specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
    .spec{background:#fff;border:1px solid #eee;border-radius:10px;padding:.7rem}
    .swatch.active{
        border: 2px solid;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }
    /* -------- Brochure modal (kept) -------- */
    .modal{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.55);
      justify-content:center;
      align-items:flex-start;
      overflow:auto;
      padding:2rem 1rem;
      z-index:100;
      -webkit-overflow-scrolling: touch;
    }
    .modal[open]{display:flex}
    .modal-content{
      background:#fff;
      border-radius:var(--radius);
      padding:1.2rem;
      width:min(920px,98vw);
      position:relative;
      margin:auto;
      max-height:92vh;
      overflow:auto;
      box-shadow:0 10px 30px rgba(0,0,0,.25);
    }
    .close-btn{
      position:absolute;
      right:.8rem;
      top:.8rem;
      background:var(--brand);
      color:#fff;
      border:none;
      border-radius:50%;
      width:34px;
      height:34px;
      cursor:pointer;
      font-size:18px;
      z-index: 110; /* Ensure close button is always on top */
    }
    .preview iframe{width:100%;height:clamp(260px,50vh,480px);border:0}
    .btn-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1rem}
    .form{display:none;margin-top:1rem;text-align:left;max-height:340px;overflow:auto;border-top:1px dashed #ddd;padding-top:1rem}
    .form.show{display:block}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
    .row>.full{grid-column:1 / -1}
    
    /* Mobile responsive form */
    @media (max-width: 768px) {
      .row {
        grid-template-columns: 1fr;
      }
    }
    
    label{font-size:.9rem;color:var(--muted);display:block;margin-bottom:.25rem}
    input{width:100%;padding:.65rem;border:1px solid #ccc;border-radius:8px;font-size:1rem}
    input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
    .submit{width:100%;background:#16a34a;color:#fff;border:none;padding:.85rem;border-radius:10px;cursor:pointer;font-size:1rem;margin-top:.75rem}

    /* -------- Footer -------- */
    footer{margin-top:1rem;background:var(--brand);color:#fff;text-align:center;padding:.8rem;font-size:.9rem}
    .bottom-logo img{max-width:180px;margin:1.1rem auto}

    /* Reduced motion */
    @media (prefers-reduced-motion:reduce){
      .view,.flip-card,.tab-panel{transition:none;animation:none}
    }

    /* -------- Background slideshow -------- */
    #bg-slideshow {
      position: fixed;
      inset: 0;
      z-index: -2;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: opacity 2.5s ease-in-out, background-image 1s ease-in-out;
      opacity: 1;
    }
    #bg-overlay {
      position: fixed;
      inset: 0;
      z-index: -1;
      background: radial-gradient(circle at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%);
      pointer-events: none;
    }

    /* --- Added Animations --- */
@keyframes flipLogo {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

@keyframes jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Ensure logo and title can animate */
.tvs-logo {
  display: block;
  margin: 0 auto;
  transition: transform 0.6s ease;
}


/* Slide in and out smoothly */
@keyframes slideInOut {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { transform: translateX(0); opacity: 1; }
  80% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Apply to title */
.welcome-text {
  opacity: 0;
}
/*adddtional css */
/* --- IMAGE SIZE BOOST / VISIBILITY FOCUS --- */

/* HOME: Bigger flip cards, larger image fill */
.flip-card {
  width: 360px;
  height: 420px;
}
@media (max-width: 768px) {
  .flip-card {
    width: 92vw;
    max-width: 720px;
    height: 600px;
  }
}
.flip-card-front {
  padding: 12px; /* give image room without cropping */
}
.flip-card-front img {
  width: 100%;
  height: 72%;
  object-fit: contain;
  /* subtle lift */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.flip-card-front h2 {
  font-size: 1.35rem;
}

/* CATALOG GRID: larger cards & thumbnails */
.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
.card {
  grid-template-rows: 240px auto; /* taller image area */
}
.thumb {
  background: linear-gradient(180deg,#f3f5fb,#fff);
}
.thumb img {
  max-height: 220px;
  width: 100%;
  object-fit: contain;
}

/* DRAWER: bigger hero image area */
.drawer-panel {
  grid-template-columns: minmax(360px, 55%) 1fr; /* give more width to image */
  max-height: 92vh;
}
@media (max-width: 900px) {
  .drawer-panel {
    grid-template-columns: 1fr;
  }
}
.drawer-left {
  padding: 1rem;
}
.drawer-left .heroimg {
  /* taller image container with aspect control */
  aspect-ratio: 16 / 10; /* adaptable wide display */
  max-height: 72vh;
  display: grid;
  place-items: center;
}
.drawer-left .heroimg img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* show full product nicely */
}

/* Make background slideshow subtly more prominent by reducing overlay if desired */
#bg-overlay {
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.55) 100%
  );
}

/* Optional: increase welcome title and logos a bit for balance */
.welcome-text {
  font-size: clamp(1.4rem, 2vw, 2rem);
}
.tvs-logo {
  max-width: 160px;
}

/* ===== HOME: make the two tiles big, like page-filling hero cards ===== */

/* Let the home "view" breathe vertically */
body.view-home .views {
  min-height: 85vh; /* taller stage so tiles can be big */
}

/* Center the two large tiles and give them roomy gaps */
body.view-home .flip-cards-container {
  gap: min(4vw, 48px);
  margin-top: min(2vh, 24px);
  padding-bottom: min(2vh, 24px);
}

/* Make each card a large, responsive hero tile */
body.view-home .flip-card {
  width: min(42vw, 560px);    /* big on desktop, caps at ~560px */
  height: min(60vh, 620px);   /* tall hero; capped for very tall screens */
  border-radius: 18px;
}

  .flip-card-front h3{
      margin: 0px;
  }
  .mt-2{
        margin-top: 15px !important;
    }
/* Stack on small screens and still keep them large */
@media (max-width: 1000px) {
  body.view-home .flip-card {
    width: 100%;
    /*height: 150vh;           */
    max-height: 1000px;
  }
  .flip-card-front h3{
      padding: 0px 20px;
      text-align: center;
      margin: 0px;
  }
}

/* Remove extra padding and let the image *cover* the front face */
body.view-home .flip-card-front {
  padding: 0;
}



body.view-home .flip-card-front img {
  object-fit: contain;   /* instead of cover */
  background: #fff;      /* optional neutral backdrop around product */
}


/* Put the title over the image, bottom-centered with a small backdrop */
body.view-home .flip-card-front h2 {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  padding: .45rem .8rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: #fff;
  background: color-mix(in srgb, #000 36%, transparent);
  border-radius: 12px;
  backdrop-filter: blur(2px);
}

/* Keep the flip effect but remove scale pop (less card-like) */
body.view-home .flip-card:hover {
  transform: none;
}
body.view-home .flip-card-inner {
  border-radius: inherit;
}
body.view-home .flip-card-front,
body.view-home .flip-card-back {
  border-radius: inherit;
}

/* Back face tidy up for large format */
body.view-home .flip-card-back {
  padding: 16px;
  background: linear-gradient(135deg, #0b2a57, #0c55b6);
}

/* Optional: make the logo/title area a bit tighter so heroes sit higher */
.logo-section {
  padding: 0.6rem 0;
}
.welcome-text {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}

#map-tabs { margin-bottom: 10px; }
.map-tab {
  display: inline-block;
  padding: 10px 20px;
  margin-right: 5px;
  cursor: pointer;
  background-color: #ddd;
  border-radius: 5px 5px 0 0;
}
.map-tab.active { background-color: #e30613; color: white; }
#map { height: 90vh; width: 100%; }
#conditionSpecs th,
#conditionSpecs td,
#conditionSpecs p,
#conditionSpecs li,
#warrantytermSpecs th,
#warrantytermSpecs td,
#warrantytermSpecs p,
#warrantytermSpecs li
{
    font-size: 13px;
}
#applicationSpecs{
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}
#lightboxOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
  }

  #lightboxOverlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255,255,255,0.3);
  }

  #lightboxOverlay.close-area {
    cursor: pointer;
  }