/************************************** WOOCOMMERCE CSS ***************************************




************************************ WOOCOMMERCE CSS ****************************************/

  /* 1. Global Product Layout Overrides */
  .single-product #content.site-content,
  .single-product #primary.content-area {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .vlier-grid-container {
    display: flex;
    flex-wrap: wrap;
  }

/* 2. Header / Title Bar - Full width strip, constrained text */
.vlier-product-header {
    background-color: #142559;
    color: #ffffff;
    padding: 15px 40px;
    width: 100%;
    box-sizing: border-box;
    /* Ensure it stays behind the sidebar's negative margin relative to stacking */
    position: relative; 
    z-index: 1; 
}

@media (min-width: 992px) {
    .vlier-product-header {
        /* This creates a "dead zone" on the right 35% of the blue bar */
        padding-right: 38%; 
    }
}

.vlier-product-header h1 {
    margin: 0;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem); 
    line-height: 1.2;
    word-wrap: break-word;
    /* This ensures it wraps before hitting the 38% padding boundary */
    display: block; 
    max-width: 100%; 
}


  /* 3. Columns Layout - THE FIX FOR THE WIDE COLUMN */
  .vlier-column-main {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    /* CRITICAL: Allows flexbox to shrink below content size */
    padding: 40px;
    box-sizing: border-box !important;
    /* Prevents padding from adding to the width */
  }

  .vlier-column-sidebar {
    flex: 0 0 100%;
    max-width: 100%;
    background-color: #e4e7e8;
    box-sizing: border-box !important;
    /* Forces padding to sit inside the 35% width */
  }

  @media (min-width: 992px) {
    .vlier-column-main {
      flex: 0 0 65%;
      max-width: 65%;
      /* CRITICAL: Forces column to respect the 65% limit */
    }

    .vlier-column-sidebar {
      flex: 0 0 35%;
      max-width: 35%;
      /* Strict constraint so it fits perfectly next to main */
      margin-top: -59px;
    }
  }




  /* 4. Sidebar Tabs - Fixed Width & Slants */
  .vlier-sidebar-tabs {
    display: flex;
    /* The navy container fills the empty space on the right */
    background: #142559 !important;
    padding: 0 !important;
    overflow: hidden;
    justify-content: flex-start !important;
    /* Packs tabs tightly to the left */
  }

  .vlier-sidebar-tabs button.tab {
    /* Critical: Removes the stretch behavior */
    flex: 0 0 auto !important;
    padding: 18px 10px !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    background: #43739e !important;
    /* Inactive slate blue */
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease;
    text-align: center;

    /* THE MAGIC: Slants the right edge of BOTH tabs */
    clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
  }

  /* Active Tab Colors */
  .vlier-sidebar-tabs button.tab.active {
    background: #e4e7e8 !important;
    /* Active light gray */
    color: #142559 !important;
    /* Active navy text */
  }

  /* First Tab (Product Info) */
  .vlier-sidebar-tabs button.tab:first-child {
    width: 45% !important;
    /* Width of the first tab */
    z-index: 2;
    /* Sits on top of the second tab */
  }

  /* Second Tab (CAD/Specs) */
  .vlier-sidebar-tabs button.tab:last-child {
    width: 45% !important;
    /* Width of the second tab */
    z-index: 1;
    /* Sits underneath the first tab */

    /* Pulls the tab left so it tucks perfectly under the slant of the first tab */
    margin-left: -30px !important;

    /* Pushes text a bit to the right so it isn't hidden under the overlap */
    padding-left: 30px !important;
  }





  /* Specific styling for the active tab to keep it distinct */
  .vlier-sidebar-tabs button.tab.active {
    background-color: #e4e7e8
      /* Example active color */
      border-bottom: none;
    /* Often used to make it look connected to the content below */
  }


/* --- Fix for the thin blue line under the active tab --- */
  .vlier-sidebar-content {
      background-color: #e4e7e8; /* Forces the panel background to be solidly opaque */
      position: relative;
      z-index: 10; /* Ensures the panel sits OVER the tabs container */
      margin-top: -2px; /* Pulls the panel up slightly to hide the hairline gap */
  }



  .tab-pane {
    display: none;
    padding: 0;
  }

  /* Removed padding here to control it in the grid */
  .tab-pane.active {
    display: block;
  }

  /* 5. The Tab Content Grid (The 50/50 Split) */
  /* --- Tab Content Grid --- */
  .vlier-tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 30px;
    text-align: left;
  }

  /* --- Left Column Content --- */
  .vlier-tab-col {
    display: flex;
    flex-direction: column;
  }

  /* Ensure paragraph text in the Intro Copy stays dark and readable */
  .vlier-acf-content p {
    color: #444 !important;
    /* Standard dark grey/black for body text */
    text-align: left !important;
    margin-bottom: 15px;
    line-height: 1.5;
  }

  /* Force only Headers to be the Dark Blue */
  .vlier-acf-content h2,
  .vlier-acf-content h3 {
    color: #142559 !important;
    /* Your brand dark blue */
    text-align: left !important;
    margin-top: 0;
    margin-bottom: 10px;
  }

  /* Update ACF headers to 1.6rem */
  .vlier-acf-content h3 {
    font-size: 1.6rem !important;
  }

  /* List Alignment Fix */
  .vlier-acf-content ul {
    text-align: left !important;
    margin: 0 0 20px 0 !important;
    padding-left: 1.2rem !important;
    list-style-position: outside !important;
  }

  .vlier-acf-content li {
    color: #444;
    margin-bottom: 8px;
  }

  /* --- Right Column Image & CTAs --- */

  /* Restore Image Styling */
  .vlier-product-image {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }

  .vlier-product-image img {
    width: 100% !important;
    /* Restores 100% available width */
    max-width: 400px;
    /* Prevents it from getting too huge on large screens */
    height: auto !important;
    display: block;
  }

  /* --- Visual Accents --- */
  .vlier-teal-divider {
    height: 2px;
    background-color: #00a491;
    margin: 20px 0;
    width: 100%;
  }


  /* Sidebar Title Styling */
  .vlier-side-title {
    color: #142559 !important;
    /* Dark Blue from your comp */
    font-size: 2rem;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
    line-height: 1.2;
  }

  /* Fix for top paragraph alignment now that title is above it */
  .vlier-tab-col .vlier-acf-content:first-of-type {
    margin-top: 0;
  }



  /* First Button: "Add to Cart" Style */
  .cta-intab-1 {
    background-color: #e4e7e8;
    color: #142559;
    border: 2px solid #142559;
    padding: 8px 20px;
    text-align: center;
    font-weight: 700;
    font-family: sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    display: block;
    margin-bottom: 10px;
  }

  .cta-extra {
    background-color: #00a491;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    /* Slightly thicker as it has no border */
    text-align: center;
    font-weight: 700;
    font-family: sans-serif;
    cursor: pointer;
    width: 250px;
    display: block;
    margin-bottom: 10px;
  }

  .cta-extra a,
  a.cta-extra {
    color: #ffffff !important;
    text-decoration: none !important;
  }


  /* Second Button: "Find a Distributor" Style */
  .cta-intab-2 {
    background-color: #142559;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    /* Slightly thicker as it has no border */
    text-align: center;
    font-weight: 700;
    font-family: sans-serif;
    cursor: pointer;
    display: block;
    margin-bottom: 10px;
  }

  .cta-intab-2 a,
  a.cta-intab-2 {
    color: #ffffff !important;
    text-decoration: none !important;
  }


  /* 1. Container remains transparent and full width */
  .cta-intab-3 {
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    /* Ensure the container is full width */
  }



  /* 2. Target the internal button to match the others */
  .cta-intab-3 .save-as-pdf-pdfcrowd-button {
    /* Critical for width matching */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* Visual styles to match your intab-2 style */
    background-color: #00a491 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    font-weight: 700 !important;
    font-family: sans-serif !important;
    text-align: center;
    cursor: pointer;
    border: none !important;
    border-radius: 0px !important;
    line-height: normal;
    /* Normalizes height relative to text */
  }

  /* 3. Cleanup the plugin wrapper */
  .cta-intab-3 .save-as-pdf-pdfcrowd-button-wrap {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }



  /* Container reset */
  .vlier-product-image .woocommerce-product-gallery {
    opacity: 1 !important;
    /* Prevent the 'flash' during loading */
  }

  /* Hide the magnifying glass if it still appears */
  .vlier-product-image .woocommerce-product-gallery__trigger {
    display: none !important;
  }

  /* Disable the hover zoom image overlay */
  .vlier-product-image .zoomImg {
    display: none !important;
    pointer-events: none;
  }

  /* Style the main image */
  .vlier-product-image .wp-post-image {
    cursor: pointer;
    transition: none !important;
    /* Removes hover animations */
    width: 100%;
    height: auto;
    display: block;
  }

  /* Ensure the wrapper doesn't force a specific height/overflow */
  .vlier-product-image .woocommerce-product-gallery__wrapper {
    margin: 0;
    padding: 0;
  }

  .vlier-product-image .woocommerce-product-gallery__image:hover {
    transform: none !important;
  }



  /* Indicate the drawing is clickable */
  .vlier-lightbox-trigger {
    cursor: zoom-in;
    display: block;
  }



  /* Changes the PhotoSwipe lightbox overlay from black to white */
  .pswp__bg {
    background: #ffffff !important;
  }





  /* If the background is white, you may need to make the close button/arrows dark so they are visible */
  .pswp__button--close,
  .pswp__button--arrow--left,
  .pswp__button--arrow--right {
    filter: invert(1);
  }


  /* Ensure the section holding the accordions has no extra padding/margins */
  .vlier-tables-section {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    display: block;
    clear: both;
    /* Prevents floating elements from overlapping */
  }

  .vlier-conversion-wrapper {
    margin-top: 0px !important;
    margin: 20px 0;
    padding: 20px;
    border: 2px solid #142559;
  }

  .vlier-calc-title {
    color: #142559;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px !important;
  }

  .vlier-calc-subtitle {
    text-align: center;
    margin-bottom: 25px;
    font-size: 14px;
  }

  .vlier-calc-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  .vlier-calc-box {
    flex: 1;
    min-width: 300px;
  }

  .vlier-calc-header {
    background-color: #142559;
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .vlier-input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }

  .vlier-input-field {
    border: 2px solid #142559;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    flex: 1;
  }

  .vlier-input-field input {

    color: #142559;
    border: none;
    width: 100%;
    outline: none;
    text-align: center;
    font-size: 16px;
  }

  /* Hide arrows in chrome/safari/edge */
  .vlier-input-field input::-webkit-outer-spin-button,
  .vlier-input-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .vlier-equal {
    font-weight: bold;
    color: #142559;
    font-size: 28px;
  }

@media (max-width: 768px) {
  .vlier-equal {
    display: none;
  }
}




  /* Creates the two-column split inside the main area */
  .vlier-main-top-row {
    display: flex;
    gap: 30px;
    /* Adjust spacing between table and buttons */
    align-items: flex-start;
    margin-bottom: 10px;
  }

  /* Let the technical data take up the remaining space */
  .vlier-technical-data {
    flex: 1;
    margin-bottom: 5px !important;
  }

  /* Force the button column to exactly 300px */
  .vlier-topbuttonholder {
    flex: 0 0 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    /* Vertical spacing between buttons */
  }

  /* Ensure the calculator below spans the full width of the main column */
  .vlier-conversion-wrapper {
    margin-top: 40px !important;
    /* Increased margin */
    clear: both;
    position: relative;
    z-index: 10;
    /* Ensures it stays above any 'ghost' layers from the tables */
    background: #fff;
    /* Ensures it isn't transparent over the tables */
  }

  /* Mobile fix: stack them if the screen gets too tight */
  @media (max-width: 1024px) {
    .vlier-main-top-row {
      flex-direction: column;
    }

    .vlier-topbuttonholder {
      width: 100%;
      flex: 1 1 auto;
    }
  }





  /* First Button: "Add to Cart" Style */
  .cta-main-1 {
    background-color: #ffffff;
    color: #142559;
    border: 2px solid #142559;
    padding: 8px 20px;
    text-align: center;
    font-weight: 700;
    font-family: sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    display: block;
    margin-bottom: 10px;
  }

  .cta-main-1 a,
  a.cta-main-1 {
    color: #142559 !important;
    text-decoration: none !important;
  }

  /* Second Button: "Find a Distributor" Style */
  .cta-main-2 {
    background-color: #142559;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    /* Slightly thicker as it has no border */
    text-align: center;
    font-weight: 700;
    font-family: sans-serif;
    cursor: pointer;
    display: block;
    margin-bottom: 10px;
  }

  .cta-main-2 a,
  a.cta-main-2 {
    color: #ffffff !important;
    text-decoration: none !important;
  }


  /* Second Button: "Find a Distributor" Style */
  .cta-main-3 {
    background-color: #00a491;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 0px;
    text-align: center;
    font-weight: 700;
    font-family: sans-serif;
    cursor: pointer;
    display: block;
    margin-bottom: 10px;
  }

  .cta-main-3 a,
  a.cta-main-3 {
    color: #ffffff !important;
    text-decoration: none !important;
  }

.cta-main-3:hover {
    transform: none !important;
    box-shadow: none !important;
}




  /* Second Button: "Find a Distributor" Style */
  .cta-main-4 {
    background-color: #00a491;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 0px;
    text-align: center;
    font-weight: 700;
    font-family: sans-serif;
    cursor: pointer;
    display: block;
    margin-bottom: 10px;
    width: 300px;
  }

  .cta-main-4 a,
  a.cta-main-4 {
    color: #ffffff !important;
    text-decoration: none !important;
  }

.cta-main-4:hover {
    transform: none !important;
    box-shadow: none !important;
}




  /* Accordion Styling */
  /* 1. The new wrapper creates a clean transparent gap */
  .vlier-accordion-item {
    margin-bottom: 15px !important;
    background: transparent !important;
    width: 100%;
    display: block;
  }

  /* 2. The accordion box stays blue and clips stray lines */
  .vlier-accordion {
    background-color: #142559 !important;
    border-right: 3px solid #142559;
    margin: 0 !important;
    overflow: hidden;
    /* This stops the "blue variations" sticking out */
  }


  /* Create the gap using a pseudo-element after the accordion */
  .vlier-accordion::after {
    content: "";
    display: block;
    height: 15px;
    /* Adjust this for the size of your gap */
    width: 100%;
    background-color: transparent !important;
  }


  /* Fix the gap between the last accordion and the calculator */
  #tables-ansi-container,
  #tables-metric-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }


  /* Accordion Header */
  .vlier-accordion-header {
    background-color: #142559 !important;
    width: 100% !important;
    padding: 5px 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    outline: none !important;
  }

  /* Ensure no hover effects from the theme apply */
  .vlier-accordion-header:hover,
  .vlier-accordion-header:active,
  .vlier-accordion-header:focus {
    background-color: #142559 !important;
    /* Keep color same on hover */
    transform: none !important;
    box-shadow: none !important;
  }

  .vlier-accordion-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
  }

  .vlier-accordion-icon {
    position: absolute !important;
    right: 15px !important;
    /* Adjust to match your padding preference */
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* Perfectly centers it vertically */
  }


  .vlier-accordion-icon::before {
    content: '+';
    color: #00a491;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
  }

  .vlier-accordion.active .vlier-accordion-icon::before {
    content: '-';
  }

  /* Flex layout for the inside of the accordion */
  .vlier-accordion-content {
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    background-color: #142559 !important;
    /* Fixed to your dark blue */
    align-items: stretch;
    min-width: 0;
    /* CRITICAL */
    width: 100%;
    margin-bottom: 0 !important;
    /* Ensure no internal margin pushes the spacer */
  }

  .vlier-accordion-header,
  .vlier-accordion-content {
    background-color: #142559 !important;
  }

  /* Left side (300px fixed width, matching the blue header) */
  .vlier-accordion-left {
    width: 240px;
    background-color: #142559;
    color: #ffffff;
    padding: 0 15px 15px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    /* Left aligns items */
    text-align: left !important;
    /* Left aligns text */
    flex-shrink: 0;

  }

  /* Ensures the button stretches or aligns properly */
  .vlier-accordion-left .cta-main-3 {
    margin-left: 0;
    margin-right: auto;
  }


  /* Right Side (Table Container) */
  .vlier-accordion-right {
    flex: 1;
    padding: 0;
    min-width: 0;
    /* CRITICAL */
    max-width: 100%;
    overflow-x: auto;
    /* Forces horizontal scroll on the table, not the page */
  }

  /* The white box around the line drawing from your comp */
  .vlier-drawing-wrapper {
    background-color: #ffffff;
    padding: 15px;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 0px;
  }

  .vlier-drawing-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .vlier-accordion-left p {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #ffffff;
  }


  /* Make the TablePress table visible and match comp */
  .vlier-accordion-right .tablepress {
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }



  /* Zero out horizontal padding and minimize vertical padding */
  .vlier-accordion-right .tablepress th,
  .vlier-accordion-right .tablepress td {
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 16px !important;
    /* Adjust as needed for readability */
    line-height: 1.2 !important;
    /* Tightens the text height as well */
    white-space: normal !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  /* 3. Handle the multi-row headers specifically */
  .vlier-accordion-right .tablepress thead th {
    text-align: center;
    min-width: 0 !important;
    /* Removes any minimum width defaults */
  }


  /* === CAD TAB & TABLE INTERACTION CSS === */

/* Make dynamically tagged part numbers obviously clickable */
  .vlier-accordion-right .tablepress tbody tr td.vlier-part-link {
    cursor: pointer !important;
    color: #142559 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  /* Hover state for part numbers */
  .vlier-accordion-right .tablepress tbody tr td.vlier-part-link:hover {
    background-color: #00a491 !important; 
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* === HIDE LAST 2 COLUMNS (CAD) ON TABLEPRESS === */
  .vlier-accordion-right .tablepress tr.row-1 th:nth-last-child(-n+2),
  .vlier-accordion-right .tablepress tr.row-1 td:nth-last-child(-n+2),
  .vlier-accordion-right .tablepress tr:not(.row-1):not(.row-2) td:nth-last-child(-n+2) {
    display: none !important;
  }

  /* 2. Hide TablePress structural <col> tags that force empty spacing */
  .vlier-accordion-right .tablepress colgroup col:nth-last-child(-n+2) {
    display: none !important;
  }

/* Ensure the CAD wrapper fills the sidebar nicely */
  .vlier-cad-wrapper {
    background-color: #e4e7e8 !important; /* Brand dark blue */
    overflow: hidden; /* Hides any overflowing content causing scrollbars */
    /* Optional: If you want rounded corners to make it look like a modern card */
    border-radius: 4px; 
  }



  /* Mobile Responsiveness */
  @media (max-width: 900px) {
    .vlier-accordion-content {
      flex-wrap: wrap;
      flex-direction: column;
    }

    .vlier-accordion-left {
      width: 100%;
    }
  }


  .addtoQuote {
    display: none !important;
  }

  .addtoQuote {
    display: none !important;
  }

  .fas.fa-cubes {
    display: none !important;
  }



  .vlier-breadcrumbs-wrapper {
    width: 100%;
    padding: 0 40px 12px 40px;
    box-sizing: border-box;
    /* Prevents padding from breaking the width */
    display: block;
  }

  /* Target the default WooCommerce breadcrumb output */
  .vlier-breadcrumbs-wrapper .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #404040;
  }

  .vlier-breadcrumbs-wrapper .woocommerce-breadcrumb a {
    text-decoration: none;
    color: #404040;
  }

  .vlier-breadcrumbs-wrapper .woocommerce-breadcrumb a:hover {
    text-decoration: underline;
  }

  /* Adjust the sidebar so it doesn't overlap the new breadcrumbs */
  @media (min-width: 992px) {
    .vlier-column-sidebar {
      margin-top: -59px;
    }
  }


  /* === DYNAMIC CAD SPECS TABLE === */
  .vlier-cad-buttons {
    width: 100%;
    max-width: 280px; /* Matches TraceParts button width */
    margin: 15px auto 20px auto; 
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 5;
  }

  .vlier-cad-btn-cart {
    background-color: #e4e7e8;
    border-radius: 0;
    color: #142559;
    border: 2px solid #142559;
    padding: 12px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    font-size: 1.2rem;
    transition: 0.3s;
  }

  .vlier-cad-btn-cart:hover {
    background-color: #d1d5d7;
  }

  .vlier-cad-btn-format {
    background-color: #142559;
    color: white;
    border: none;
    padding: 12px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    font-size: 1.2rem;
    transition: 0.3s;
  }

  .vlier-cad-btn-format:hover {
    background-color: #0b1536;
  }

  .vlier-cad-btn-download {
    background-color: #00a491;
    color: white;
    border: none;
    padding: 12px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    font-size: 1.2rem;
    transition: 0.3s;
  }

  .vlier-cad-btn-download:hover {
    background-color: #008f7e;
  }

  .vlier-specs-table {
    max-width: 350px;
    margin: 0 auto;
    border-collapse: collapse;
    width: 100%;
    font-family: sans-serif;
    border: 1px solid #142559;
  }

  .vlier-specs-table th {
    background: #2e6393;
    color: white;
    padding: 12px;
    font-size: 1.4rem;
    text-align: center;
    font-weight: 600;
  }

  .vlier-specs-table td.spec-label {
    background: #2e6393;
    color: white;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    width: 40%;
    border-top: 1px solid #ffffff;
  }

  .vlier-specs-table td.spec-value {
    background: #ffffff;
    color: #142559;
    padding: 10px;
    text-align: center;
    border: 1px solid #142559;
    border-top: none;
    font-weight: bold;
  }

  /* === CUSTOM PRODUCT IMAGE SLIDER === */
  .vlier-custom-slider {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .vlier-slider-main-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 350px;
   
  }

  .vlier-slider-main-image a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .vlier-slider-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 325px !important;
  }

  .vlier-slider-counter {
    color: #142559;
    /* Brand Dark Blue */
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
  }

  .vlier-slider-thumbs-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  .vlier-thumb-arrow {
    background: none;
    border: none;
    color: #00a491;
    /* Brand Teal */
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
  }

  .vlier-thumb-arrow:hover {
    opacity: 0.7;
  }

  .vlier-thumbs-track-wrapper {
    width: 210px;
    /* Fits exactly 3 thumbs (60px * 3 + 15px gaps) */
    overflow: hidden;
  }

  .vlier-thumbs-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .vlier-thumbs-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
  }

  .vlier-thumb-item {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border: 1px solid #c9cdd0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e4e7e8;
    /* Changed from #fff to match your sidebar */
    box-sizing: border-box;
  }

  .vlier-thumb-item img {
    width: 100%;
    height: 100%;
    padding: 4px;
    /* Gives a tiny bit of breathing room inside the box */
    object-fit: contain;
  }

  .vlier-thumb-item.active {
    border: 2px solid #00a491;
    /* Brand Teal */
  }


  /* --- Custom Panel Lightbox Overlays --- */

  /* 1. Ensure the columns act as boundaries for the absolute overlays */
  .vlier-column-main,
  .vlier-column-sidebar {
    position: relative;
  }

  /* 2. The overlay covers the full height/width of its parent column */
  .vlier-panel-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .vlier-panel-overlay.active {
    opacity: 1;
  }

  /* 3. Sticky container keeps the image in the user's viewport on tall panels */
  .vlier-overlay-sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    /* Fits to the screen height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
  }

  /* 4. Image formatting */
  .vlier-panel-overlay img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid #e4e7e8;
  }

  /* 5. Close Button */
  .vlier-overlay-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #142559;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    z-index: 1000;
    transition: background 0.3s ease;
    border-radius: 0 !important;
  }

  .vlier-overlay-close:hover {
    background: #00a491;
    /* Your brand teal */
  }

  /************************************ WOOCOMMERCE CSS *********************************************/