/*
Theme Name: CW Theme
Theme URI: https://conceptwashroom.co.uk
Author: Worx Media
Description: Concept Washroom custom theme
Version: 1.0
License: Private
Text Domain: cw-theme
*/

.sector-hero-wrap {
    height: 500px !important;
    display: flex;
    align-items: flex-end;
}

.sectorhero {
    padding: 30px;
}

.sectorhero h1 {
    color: #fff;
    font-size: 60px;
}

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

:root {
    --font-primary: 'Urbanist', system-ui, sans-serif;
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  48px;
    --space-xl:  80px;
    --container: 1320px;
}

body {
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 1.6;
    color: #1a1a2e;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    line-height: 1.2;
    color: #1a1a2e;
}

h1 {
    font-size: 52px;
    font-weight: 800;
    text-transform: uppercase;
}
h2 {
    font-size: 34px;
    font-weight: 600;
}
h3 {
    font-size: 34px;
    font-weight: 600;
}
h4 {
    font-size: 20px;
    font-weight: 600;
}
h5 {
    font-size: 20px;
    font-weight: 500;
}
h6 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    color: #9e7653;
}

p {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

a {
    text-decoration: none;
    color: #9e7653;
}

@media (max-width: 768px) {
    h1 { font-size: 40px; }
    h2, h3 { font-size: 22px; }
    h4, h5 { font-size: 18px; }
    h6 { font-size: 12px; }
    p { font-size: 16px; }
}

/* =============================================
   GLOBAL LAYOUT
   ============================================= */

.cw-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 5%;
}

.cw-section {
    padding: var(--space-xl) 0;
}

.cw-section-sm {
    padding: var(--space-lg) 0;
}

/* =============================================
   GLOBAL BUTTONS
   ============================================= */

.button {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 0;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
}

/* --- Blue --- */
.button-blue {
    background: #c0e2fa;
    color: #000125;
    border: 2px solid transparent;
}
.button-blue:hover {
    background: #c0e2fa;
    color: #000125;
}

/* --- Purple --- */
.button-purple {
    background: transparent;
    color: #371d36;
    border: 2px solid #371d36;
}
.button-purple:hover {
    background: #371d36;
    color: #fff;
}

/* --- White --- */
.button-white {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.button-white:hover {
    background: #fff;
    color: #000;
}

/* --- Gold --- */
.button-gold {
    background: #eee3d1;
    color: #000;
    border: 2px solid transparent;
}
.button-gold:hover {
    background: #9e7653;
    color: #fff;
}

.cpp-hero,
.cpp-centered-copy,
.cpp-tools,
.cpp-specification,
.cpp-seo,
.cpp-related,
[style*="padding: 80px 5%"] {
    padding-left: max(24px, calc((100% - 1300px) / 2)) !important;
    padding-right: max(24px, calc((100% - 1300px) / 2)) !important;
}

.cpp-purple-banner,
.cpp-splash-lab,
.cpp-cpd-banner {
    padding-left: max(24px, calc((100% - 1300px) / 2)) !important;
    padding-right: max(24px, calc((100% - 1300px) / 2)) !important;
}

.cw-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

@media screen and (min-width: 1240px) {
 .sample-carousel-section, .carousel-overflow {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
  
.sample-carousel-section .elementor-widget-container, .carousel-overflow .elementor-widget-container {
    max-width: calc(1240px + 50vw);
    margin-left: calc((100vw - 1240px) / 2) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/*
 * FULL-WIDTH CAROUSEL SECTION FOR SMALLER DESKTOP
 * Similar to above but for smaller desktop screens (1025px-1239px)
 * Adjusts calculations to use percentage-based widths
 */
@media screen and (min-width: 1025px) and (max-width: 1239px) {
.sample-carousel-section,  .carousel-overflow {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
  
.sample-carousel-section .elementor-widget-container, .carousel-overflow .elementor-widget-container {
    max-width: calc(95% + 50vw);
    margin-left: calc((100vw - 95%) / 2) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/*
 * CAROUSEL OVERFLOW VISIBILITY
 * Ensures carousel items outside the viewport remain visible on desktop
 * Prevents Swiper's default overflow:hidden from hiding carousel items
 */
@media screen and (min-width: 1025px) {
  .carousel-overflow .swiper,
  .carousel-overflow .swiper-wrapper {
    overflow: visible !important;
  }
}

/*
 * MENU ITEM VISIBILITY CONTROLS
 * Controls which menu items are visible at different screen sizes
 * Hides menu item 707 on desktop and menu item 411 on mobile
 */
@media (min-width: 980px) {
  .menu-item-242 {
    display: none !important;
  }
}

@media (max-width: 980px) {
  li.menu-item.menu-item-47.menu-item-has-children.menu-item-has-megamenu.uicore-visible {
    display: none !important;
  }
}

/*
 * HOME SAMPLES SECTION FULL-WIDTH LAYOUT
 * Makes the samples section on homepage extend full-width
 * Uses transform for horizontal centering
 */
@media screen and (min-width: 1025px) {
.sampleshome {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(10px) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}
}

/*
 * TAB SPACING ADJUSTMENT
 * Adds right margin to the first tab item for better spacing
 * Only applies on screens wider than 800px
 */
@media only screen and (min-width: 800px) {
	
.eael-tab-item-trigger[data-tab="1"] {
  margin-right: 40px
}
}

/*
 * SECTOR HERO SECTION DECORATIVE BORDERS
 * Creates decorative lines/borders around the sector hero section
 * Includes vertical lines, horizontal lines with color gradients
 * Only applies on large screens (1300px+)
 */
@media only screen and (min-width: 1300px) {
.sectorhero {
  position: relative;
  --top-white-length: 1280px;
  --left-white-length: 550px;
  --right-white-length: 100%; /* Right border entirely white */
  --accent-color: #9e7653; /* Warm bronze/brown color */
  --line-width: 2px;
  --top-offset: -60px;
}




.sectorhero::after {
  content: '';
  position: absolute;
  top: -100px;
  right: 0;
  width: var(--line-width, 4px);
  height: 600px;
  z-index: 1;

  background-image: linear-gradient(
    to bottom,
    transparent 0px,
    white 60px,
    white 100%
  ) !important;
}


/* Horizontal top line */
.sectorhero > div:first-child::before {
  content: '';
  position: absolute;
  left: -100px;
  right: -100px;
  top: -10px;
  height: var(--line-width);
  width: 100vw;
  background-image: linear-gradient(
    to right,
    white 0,
    white var(--top-white-length),
    var(--accent-color) var(--top-white-length),
    var(--accent-color) 100% /* Make accent color run to the end */
  );
  z-index: 1;
}

/* New feature to the left of the top white line */
.sectorhero > div:first-child::after {
  content: '';
  position: absolute;
  left: -1560px; /* Further left than the main line */
  top: -10px;
  height: var(--line-width);
  width: 1500px; /* Width of the new feature */
  background-color: var(--accent-color); 
  z-index: 1;
}

/* Cancel out any other potential pseudo-elements */
.sectorhero > div:not(:first-child)::before,
.sectorhero > div:not(:first-child)::after {
  display: none !important;
}
}

/*
 * DOWNLOAD GUIDE DECORATIVE BORDERS
 * Creates white decorative lines/borders around the downloadguide section
 * Top and bottom lines extend full width to the left
 * Vertical lines are centered with faded edges
 * Only applies on large screens (1300px+)
 */
@media only screen and (min-width: 1300px) {
  .downloadguide {
    position: relative;
    --line-width: 1px;
    --side-height: 750px;
    --line-color: white;
  }
  
  /* Left vertical line - centered vertically with faded edges */
  .downloadguide::before {
    content: '';
    position: absolute;
    /* Center vertically relative to the element */
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: var(--side-height);
    width: var(--line-width);
    /* Replace solid background with gradient for faded edges */
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 5%,
      var(--line-color) 15%,
      var(--line-color) 85%,
      transparent 95%,
      transparent 100%
    );
    z-index: 1;
    display: block !important; /* Ensure visibility */
  }
  
  /* Right vertical line - centered vertically with faded edges */
  .downloadguide::after {
    content: '';
    position: absolute;
    /* Center vertically relative to the element */
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    height: var(--side-height);
    width: var(--line-width);
    /* Replace solid background with gradient for faded edges */
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 5%,
      var(--line-color) 15%,
      var(--line-color) 85%,
      transparent 95%,
      transparent 100%
    );
    z-index: 1;
    display: block !important; /* Ensure visibility */
  }
  
/* Horizontal top line - with faded edges and reduced width for ALL downloadguide elements */
.downloadguide > div:first-child::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Center the line horizontally */
  height: var(--line-width);
  width: 1550px; /* Reduced width instead of full viewport */
  /* Horizontal gradient with faded edges on left and right */
  background-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 5%,
    var(--line-color) 15%,
    var(--line-color) 85%,
    transparent 95%,
    transparent 100%
  );
  z-index: 1;
  display: block !important; /* Ensure visibility */
}

/* Horizontal bottom line - with faded edges and reduced width for ALL downloadguide elements */
.downloadguide > div:first-child::after {
  content: '';
  position: absolute;
  bottom: 20px; /* Position at bottom */
  left: 50%;
  transform: translateX(-50%); /* Center the line horizontally */
  height: var(--line-width);
  width: 1550px; /* Reduced width instead of full viewport */
  /* Horizontal gradient with faded edges on left and right */
  background-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 5%,
    var(--line-color) 15%,
    var(--line-color) 85%,
    transparent 95%,
    transparent 100%
  );
  z-index: 1;
  display: block !important; /* Ensure visibility */
}

  
  /* Cancel out any other potential pseudo-elements */
  .downloadguide > div:not(:first-child)::before,
  .downloadguide > div:not(:first-child)::after {
    display: none !important;
  }
}

.download-text, .eael-tabs-content h3 {
    position: relative;
    width: fit-content;
}

/* download text hover style */
/* Download text with 15px margin */
.download-text {
   position: relative;
   width: fit-content;
	color: #9E7653 !important;
}

.download-text::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: -2px;
   left: calc(50% + 7.5px);
   transform: translateX(-50%);
   background-color: #9e7653;
   transition: width 0.3s;
}

.download-text:hover::after {
   width: calc(100% - 15px);
}

/* Download text without margin */
.related-product-title, .download-text-other, .eael-tabs-content h3 {
   position: relative;
   width: fit-content;
}

.related-product-title::after, .download-text-other::after, .eael-tabs-content h3::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: -3px;
   left: 50%;
   transform: translateX(-50%);
   background-color: #9e7653;
   transition: width 0.3s;
}

.related-product-title:hover::after, .download-text-other:hover::after, .eael-tabs-content h3:hover::after {
   width: 100%;
}

.related-product-title a {
   display: inline !important;
   text-decoration: none;
}

.faq-right, .footer-right {
  position: relative;
  padding-left: 100px; /* Adds space between content and the border */
}

.faq-right::after {
  content: '';
  position: absolute;
  top: -100px;
  bottom: -190px;
  right: -88px; /* Positions the border 10px away from the div */
  width: 2px;
  background:  #F4F7FA6E
}


/* Right border with gradient fade-out at bottom */
.footer-right::after {
  content: '';
  position: absolute;
  top: -80px;
  bottom: -190px;
  right: -88px; /* Positions the border 10px away from the div */
  width: 2px;
  background: linear-gradient(to bottom, 
                             #F4F7FA6E 0%, 
                             #F4F7FA6E 80%, 
                             transparent 100%);
  z-index: 100;
}

.showmore .e-n-accordion-item-title {
    width: 150px;
    margin: 0 auto;
    z-index: 1;
}

/* Sector Hub Tabs */

        /* Tab Container */
        .tab-container {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-bottom: 20px;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            padding-top: 50px;
            padding-bottom: 50px;
        }
        
        /* Tab Navigation */
        .tabs {
            display: flex;
			gap: 60px;
			justify-content: center;
        }
        
        .tab-btn {
            padding: 0px 0px;
            border: none;
            background: none;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            transition: all 0.3s;
            position: relative;
        }
        
        /* NEW tag styling */
.tab-btn.new-item::before {
    content: 'NEW';
    position: absolute;
    top: 8px;
    right: 1px;
    background-color: #eee3d2;
    color: #9e7853;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
        /* Added underline effect for tab buttons */
        .tab-btn::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #9e7653;
            transition: width 0.3s;
        }
        
        .tab-btn:hover::after {
            width: 100%;
        }
        
        .tab-btn.active::after {
            width: 100%;
        }
        
        .tab-btn:hover {
            color: #9e7653;
            opacity: 0.8;
        }
        
        .tab-btn.active {
            color: #9e7653;
            font-weight: bolder;
        }
        
        /* Tab Content */
        .tab-content {
            display: none;
            padding: 20px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .tab-description {
            margin-bottom: 30px;
            font-size: 18px;
            line-height: 1.5;
            color: #444;
            text-align: center;
            width: 70%;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 260px); 
  gap: 20px;
  justify-content: center;
}
        
        /* Responsive Tabs for Mobile - Dropdown Style */
        @media (max-width: 768px) {
            .tabs {
                position: relative;
				display: block;
                border-bottom: none;
        max-height: 48px; /* height of one tab button */
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            }
			
			
    .tabs.open {
        max-height: 500px; /* large enough to fit all buttons expanded */
    }
		
			
			.tab-container {
    padding-top: 10px;
    padding-bottom: 10px;
				width: 70% !important;
			}
            
            .tab-btn {
                display: none;
                width: 100%;
                text-align: left;
                padding: 12px 15px;
                color: black;
            }
            
            .tab-btn.active {
                display: block;
                position: relative;
            }
            
            /* Mobile arrow indicator */
            .tab-btn.active::before {
                content: "▼";
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12px;
            }
           
			.tab-btn.new-item::before {
				    right: 15px;
			}
				
            /* Adjust NEW tag position for mobile active tab */
            .tab-btn.new-item.active::before {
                content: 'NEW';
    position: absolute;
    right: 35px;
    background-color: #eee3d2;
    color: #9e7853;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
            }
            
            /* Arrow for mobile dropdown when NEW tag is present */
            .tab-btn.new-item.active::after {
                content: "▼";
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12px;
                background: none;
                height: auto;
                width: auto;
                bottom: auto;
                left: auto;
            }
            
            /* Remove the underline effect completely on mobile */
            .tab-btn:not(.new-item.active)::after {
                display: none;
            }
            
            .tabs.open .tab-btn {
                display: block;
            }
            
            .tabs.open .tab-btn.new-item.active::after {
                content: "▲";
            }
            
            .product-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .tab-description {
                width: 100%;
            }
			
			.product-title::after {
				height: 0px !important;
			}
        }
        
        .product-item {
            text-decoration: none;
            color: inherit;
            transition: transform 0.3s;
            display: block;
        }
        
        .product-item:hover {
            transform: translateY(-5px);
        }
        
        .product-image {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: cover;
            border-radius: 0;
            margin-bottom: 10px;
        }
        
        .product-subtitle {
            color: #9e7653;
            font-size: 14px;
            margin-bottom: 5px;
            text-transform: uppercase;
			font-weight: 600;
        }
        
        .product-title {
            font-weight: 600;
            font-size: 22px !important;
            color: #222;
            position: relative;
            display: inline-block;
			margin-top: 0px;
			margin-bottom: 0px;
			justify-self: left;
        }
        
        .product-title::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -8px;
            left: 0;
            background-color: #9e7653;
            transition: width 0.3s;
        }
        
        .product-item:hover .product-title::after,
.related-product-item:hover .product-title::after {
    width: 100%;
}



.buttonaccessory1{
    background-color: white;
	border: 2px solid #010325;
    color: #010325;
	font-weight: 600;
}

.buttonaccessory1:hover{
    background-color: #010325;
    color: white;
	font-weight: 600;
}

.buttonaccessory2 {
    background-color: #9e7653;
	border: solid 2px #9e7653;
    color: white;
	font-weight: 600;
}

.buttonaccessory2:hover {
    background-color: #eee3d2;
	border: solid 2px #eee3d2;
	color: black;
}


/* Configurator Shared Styles */
.option-row {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    min-height: 40px;
}

.option-label {
    width: 140px;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    font-weight: 600;
}

.option-buttons {
    display: flex;
    flex-wrap: wrap;
}

.option-button {
    position: relative;
}

.option-button input[type="radio"] {
    display: none;
}

.option-button label {
    display: block;
    padding: 8px 16px;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.option-button input[type="radio"]:checked + label {
    background: #9E7653;
    color: white;
}

.option-button label:hover {
    background: #e0e0e0;
}

.option-button input[type="radio"]:checked + label:hover {
    background: #9E7653;
}

/* Confugartor Coming Soon Styles */
.option-button.coming-soon {
    position: relative;
}

.option-button.coming-soon label {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed !important;
    pointer-events: none;
}

.option-button.coming-soon input[type="radio"] {
    pointer-events: none;
}

.disabled-row {
    display: none !important;
    pointer-events: none;
}

/* Configurator Download Buttons Styles */
.downloads-section {
    margin-bottom: 25px;
}

.download-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.download-button {
    padding: 8px 16px;
    border: 2px solid #010325;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.download-button {
    background-color: white;
    color: #010325;
}

.download-button:hover {
    background-color: #000218;
	color: white;
}

.download-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Configurator Styles */
.configurator-container {
    margin: 0 auto;
    overflow: hidden;
}

.configurator-main-content {
    display: flex;
    min-height: 500px;
}

.configurator-options-panel {
    flex: 1;
    padding: 30px;
    background: white;
}

.configurator-image-panel {
    flex: 1;
    background: #ede7e7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 500px;
}

.configurator-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.locker-animation-container {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: #ede7e7 !important;
    min-height: 400px;
	align-content: center;
}

.configurator-preview-image {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    display: block;
    position: relative;
    object-fit: cover;
    transition: opacity 0.3s ease;
	justify-self: center;
}

.locker-closed {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
    transition: opacity 2s ease, transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.locker-open {
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(0.98) rotateY(-15deg);
    transition: opacity 2s ease, transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	justify-self: center;
}

.locker-animation-container.open .locker-closed {
    opacity: 0;
    transform: scale(0.98) rotateY(15deg);
}

.locker-animation-container.open .locker-open {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
}

.configurator-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #ede7e7;
    text-align: center;
}

.configurator-support-text {
    margin-top: 40px;
    font-size: 16px;
    color: #666;
    line-height: 1.5;
}

.configurator-support-text a {
    color: #666;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .configurator-main-content {
        flex-direction: column;
        min-height: auto;
    }
    
    .configurator-options-panel, .configurator-image-panel {
        padding: 20px;
        flex: none;
    }

 .locker-animation-container, .configurator-image-placeholder,  .configurator-image-panel {
        min-height: 200px;
    }
    
    .option-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px !important;
		margin-bottom: 10px !important;
    }
	
	.option-button label {
		padding: 2px 6px !important;
	}

    
    .option-label {
        width: auto;
    }

    .configurator-preview-image {
        max-width: 100%;
        height: 100%;
    }


	.download-button {
		padding: 4px 6px !important;
		
	}
		
.configurator-support-text {
		 margin-top: 20px !important;	
		}
}

.coming-soon {
    font-size: 12px;
    color: red;
    text-align: center;
	margin-bottom: 0px;
}

/* Cubicle Dims Shortcode */
        .cubicle-container {
            display: flex;
            gap: 40px;
            align-items: flex-start;
            max-width: 1200px;
            margin: 0 auto;
        }

        .table-section {
            flex: 1;
            overflow: hidden;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            padding: 15px;
            text-align: left;
            font-weight: 600;
            border-bottom: 1px solid #eee;
            text-transform: uppercase;
            font-size: 16px;
            letter-spacing: 0.5px;
            color: #666;
        }

        tr {
            transition: all 0.3s ease;
            cursor: pointer;
        }

        tr.highlighted {
            background-color: #010325;
        }
		
		 td.highlighted {
           color: white;
        }

        td {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .number-cell {
            font-weight: bold;
            color: #333;
            text-align: center;
            width: 60px;
        }

        .lorem-text {
            padding-top: 10px;
            color: #666;
            line-height: 1.6;
        }

        .image-section {
            flex: 1;
            position: relative;
            padding: 0px;
        }

        .drawing-placeholder {
            width: 500px;
            height: 500px;
            background-color: #ede7e7;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .drawing-image {
            width: 100%;
        }

        .number-icon {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: grey;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .number-icon:hover, .number-icon.highlighted {
            background-color: #010325;
            transform: scale(1.2);
            z-index: 10;
        }

        @media (max-width: 1000px) {
            .cubicle-container {
                flex-direction: column;
                gap: 20px;
            }
            
			.image-section {
				display: none;
			}
        }


/* Material Shortcode */

        .material-container {
            display: flex;
            gap: 40px;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .material-drawing-placeholder {
            width: 100%;
			height:500px;
            max-width: 600px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
			background-color: #e5e5e5;
        }
        
        @media (max-width: 1000px) {
			
		.material-container {
                flex-direction: column;
                gap: 20px;
            }
            
            .material-drawing-placeholder {
                height: 300px;
                width: 100%;
                margin: 0px;
            }
        }

/* Related Product Shortcode */
       .related-products-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0;
}
        .related-product-item {
            flex: 0 0 calc(33.333% - 14px); /* Exactly 1/3 width minus gap adjustment */
            max-width: calc(33.333% - 14px);
        }
        
        .related-product-item img {
            width: 100%;
            height: auto;
            object-fit: cover; /* Ensures consistent rectangle shape */
            margin-bottom: 5px;
        }
        
        .related-product-item h6,
        .related-product-item h5 {
            margin: 5px 0;
            text-align: left;
        }
        
        .related-product-item h5 {
            display: block;
        }
        
        .related-product-item a {
            text-decoration: none;
			color:#000125;
        }
        
        @media (max-width: 768px) {
            .related-products-row {
                flex-direction: row;
				flex-wrap: wrap;
				gap: 10px;
            }
            
			.related-product-item img {
height: 200px !important;
			}
 
            .related-product-item {
				max-width: 50%;
                margin-bottom: 10px;
				flex:0 0 calc(50% - 5px);
            }
        }


    /* Case Studies Section on Pages */
    .case-studies-grid {
        display: grid;
        gap: 10px;
        margin: 20px 0;
        min-height: 250px;
    }

@media (min-width: 1024px) {
    .case-studies-grid.case-studies-layout-featured.case-studies-count-1,
    .case-studies-grid.case-studies-layout-featured.case-studies-count-2 {
        height: 450px;
    }
}
    
    /* 3 items layout */
    .case-studies-count-3 {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    .case-studies-count-3 .case-study-item:first-child {
        grid-row: 1 / 3;
    }
    
    /* 2 items layout */
    .case-studies-count-2 {
        grid-template-columns: 1fr 1fr;
    }
    
    /* 4 items layout */
    .case-studies-count-4 {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    .case-studies-count-4 .case-study-item:first-child {
        grid-row: 1 / 3;
    }
    
    .case-studies-count-4 .case-study-item:nth-child(2) {
        grid-column: 2 / 4;
    }
    
    /* Case study item styles */
    .case-study-item {
        position: relative;
        overflow: hidden;
        min-height: 250px;
    }
    
    .case-study-link {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: inherit;
    }
    
    .case-study-image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        min-height: 250px;
    }
    
.case-study-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    transition: all 0.3s ease;
}
    
    .case-study-content {
        color: white;
        width: 100%;
    }
    
    .case-study-title {
        font-size: 20px !important;
        font-weight: 500;
        color: white;
        margin: 0 0 10px 0;
        line-height: 1.2;
        transition: all 0.3s ease;
        display: flex;
        align-items: flex-start;
    }
    
    .case-study-arrow {
        transition: all 0.3s ease;
        margin-left: 10px;
        line-height: 1.2;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    
    .case-study-arrow img {
        width: 25px;
        height: 25px;
        transition: all 0.3s ease;
        filter: brightness(0) invert(1); /* Makes the SVG white */
    }
    
    .case-study-excerpt {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, margin-top 0.3s ease;
        opacity: 0;
    }
    
    .case-study-excerpt p {
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        color: rgba(255,255,255,0.9);
    }
    
    /* Hover effects */
    .case-study-item:hover .case-study-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
    }
    
    .case-study-item:hover .case-study-arrow img {
        transform: scaleX(1.3);
        transform-origin: left center;
    }
    
    .case-study-item:hover .case-study-excerpt {
        max-height: 100px;
        opacity: 1;
        margin-top: 15px;
    }
    
@media (max-width: 768px) {
    .case-studies-grid {
        display: grid;
        gap: 8px;
    }

    /* 1 item: full width */
    .case-studies-count-1 {
        grid-template-columns: 1fr !important;
    }

    /* 2 items: stacked full width */
    .case-studies-count-2 {
        grid-template-columns: 1fr !important;
    }

    /* 3 items: first full width, then 2 side by side */
    .case-studies-count-3 {
        grid-template-columns: 1fr 1fr !important;
    }

    .case-studies-count-3 .case-study-item:first-child {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 250px;
    }

    /* 4 items: 2x2 */
    .case-studies-count-4 {
        grid-template-columns: 1fr 1fr !important;
    }

    .case-studies-count-4 .case-study-item:first-child {
        grid-row: auto !important;
        grid-column: auto !important;
    }

    .case-studies-count-4 .case-study-item:nth-child(2) {
        grid-column: auto !important;
    }

    .case-studies-grid .case-study-item {
        grid-row: auto !important;
        grid-column: auto !important;
        min-height: 200px;
    }

    .case-study-overlay {
        padding: 20px;
    }

    .case-study-title {
        font-size: 18px !important;
    }

    .case-study-excerpt p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .case-study-item {
        min-height: 160px;
    }

    .case-study-overlay {
        padding: 15px;
    }

    .case-study-title {
        font-size: 16px !important;
    }
}


    /* Sample Page Table */
        .acf-product-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .acf-product-table {
            width: 100%;
            border-collapse: collapse;
        }
        .acf-product-table th {
            padding: 15px;
            text-align: left;
            font-weight: 600;
            border-bottom: 1px solid #eee;
            text-transform: uppercase;
            font-size: 16px;
            letter-spacing: 0.5px;
            color: #666;
        }
        .acf-product-table tr {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .acf-product-table tr:hover {
            background-color: #010325;
        }
        .acf-product-table tr:hover td {
            color: white;
        }
        .acf-product-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }
        .acf-row-label {
            font-weight: bold;
            color: #333;
            width: 50%;
        }
        .acf-data-cell {
            width: 50%;
        }

/* Dimension Selector Specific Styles */
.dimensions-selector-section {
    margin-bottom: 20px;
    width: fit-content;
}

.dimensions-selector-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.option-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    min-height: 40px;
}

.option-label {
    width: 120px;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    font-weight: 500;
}

.option-buttons {
    display: flex;
    flex-wrap: wrap;
}

.option-button {
    position: relative;
}

.option-button input[type="radio"] {
    display: none;
}

.option-button label {
    display: block;
    padding: 8px 16px;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.option-button input[type="radio"]:checked + label {
    background: #9E7653;
    color: white;
}

.option-button label:hover {
    background: #e0e0e0;
}

.option-button input[type="radio"]:checked + label:hover {
    background: #9e7653;
}

.option-button.disabled {
    opacity: 1;
    pointer-events: none;
}

.option-button.disabled label {
    color: black;
    cursor: not-allowed;
    margin-top: -5px;
}

.coming-soon {
    font-size: 12px;
    color: red;
    margin-top: 4px;
    text-align: center;
    font-weight: normal;
    text-transform: none;
    margin-top: -1px;
}

@media (max-width: 1000px) {
    .option-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .option-label {
        width: auto;
    }
}

/* Brand Button Styling */
.brand-button {
    background: #010325;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 24px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.brand-button:hover {
    color: #020540;
    background: white;
    text-decoration: none;
}

/* Download Link Styling */
.download-link {
    font-weight: 600;
    color: #9e7653;
	font-size: 20px;
}

/* Alternative approach using CSS Grid */
@media (max-width: 768px) {
    .configurator-options-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .configurator-title {
        grid-column: 1 / -1;
    }
    
    .downloads-section,
    .configurator-support-text {
        grid-column: 1 / -1;
    }
}

.wp-block-pullquote cite {
    position: relative;
    display: inline-block;
	font-weight: 400;
}

.wp-block-pullquote cite::before {
	display: none;
}
	
.wp-block-pullquote cite::after {
    content: '';
    position: absolute;
    left: calc(100% + 10px);
    top: 69%;
    transform: translateY(-50%);
    width: 100vw;
    height: 1px;
    background-color: #9e7653;
}

.wp-block-pullquote blockquote {
	background: none;
}

@media (min-width: 1100px) {
.wp-block-pullquote blockquote {
	margin-left: 130px;
}
}


@media (max-width: 800px) {
	.wp-block-pullquote blockquote {
	padding: 0;
}
}

.wp-block-pullquote p {
	font-size: 2rem !important;
	font-weight: 600;
	line-height: 40px !important;
	width: 80%;
}

.wp-block-columns {
	gap: 20px
}

/* Mobile carousel styling for partial slides */
@media (max-width: 768px) {
    .mobile-offset-carousel .samples-carousel {
        /* Ensure smooth partial slide display */
        overflow: visible;
    }
    
    .mobile-offset-carousel .slick-list {
        /* Allow partial slides to show */
        overflow: visible;
    }
    
    .mobile-offset-carousel .carousel-slide {
        /* Ensure slides don't get cut off awkwardly */
        padding-right: 10px;
    }
}

@media (max-width: 480px) {
    .mobile-offset-carousel .carousel-slide {
        /* Tighter spacing on smaller screens */
        padding-right: 8px;
    }
}
@media (min-width: 1000px) {
.wp-block-heading {
	margin-top: 0px;
	margin-bottom: 10px;
	
	}
	
.post p,
.wp-block-heading {
  max-width: 1000px;
  margin-left: 0;
  margin-right: auto;
}

	


.wp-block-image {
    margin-top: 75px;
    margin-bottom: 75px;
}
	.wp-block-gallery {
		 display: flex;
    flex-direction: column;
    gap: 30px !important;
		margin-top: 75px;
    margin-bottom: 75px;
	}
}

@media (max-width: 1000px) {
.wp-block-heading {
	margin-top: 0px;
	margin-bottom: 10px;
	
	}

.wp-block-image {
    margin-top: 35px;
    margin-bottom: 35px;
}
	.wp-block-gallery {
		 display: flex;
    flex-direction: column;
    gap: 20px !important;
		margin-top: 35px;
    margin-bottom: 35px;
	}
}

.e-n-tabs-mobile .e-n-tab-title {
        order: 0 !important;
}



.sh-line {
  width: 2000px !important;
}

.edudownload {
    position: relative !important;
}

.edudownload::after {
    content: '' !important;
    position: absolute !important;
    top: -5px !important;
    left: -5px !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 5px solid #ffe371!important;
    filter: url(#roughen) !important;
    pointer-events: none !important;
    z-index: 1 !important;
} 

@media (min-width: 1024px) {
  @keyframes marqueeFlow {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
  }

  .autocarousel .swiper-wrapper {
    animation: marqueeFlow 30s linear infinite !important;
    transition: none !important;
    width: fit-content !important;
    will-change: transform;
  }

  .autocarousel .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
  }
}

#wrapper-navbar {
  z-index: 9999 !important;
}

.featureline {
    margin-left: 1240px;
    width: calc(100vw - 1240px) !important;
}




@media (min-width: 1024px) {
.downloadcarousel {
    max-width: 1000px !important;
}
}



.archivetabs .e-n-tabs-heading {
    background-color: transparent !important;
}




.e-n-tab-title[aria-selected="true"] {
  font-weight: 700 !important;
}



/* Mega Menu Tab Spacing */
.e-n-tabs-heading{
background-color: #371d36;
padding-top: 10px;
padding-bottom: 0px;
}

@media (max-width: 1025px) {
	
	.e-n-tabs-heading{
padding-bottom: 10px;
}
}
	


@media (min-width: 1025px) {
    .asymmetric-section {
        width: calc(100% - 100px); 
        margin-right: -100px; 
}
}

h6 {
    font-weight: 800 !important; 
}
  
.imgcarousel {
    height: 400px;
    width: auto;
    object-fit: cover; 

}
	
.resourcesimage {
    position: relative;
}

.resourcesimage::before,
.resourcesimage::after {
    content: '';
    position: absolute;
    border: 2px solid #000; /* Adjust color and thickness as needed */
    pointer-events: none;
}

.resourcesimage::before {
    /* Horizontal lines (top and bottom borders) */
    width: calc(100% + 40px); /* Extends 20px on each side */
    height: 100%;
    top: 0;
    left: -20px;
    border-left: none;
    border-right: none;
}

.resourcesimage::after {
    /* Vertical lines (left and right borders) */
    width: 100%;
    height: calc(100% + 40px); /* Extends 20px on top and bottom */
    top: -20px;
    left: 0;
    border-top: none;
    border-bottom: none;
}



@media (max-width: 768px) {
    .configurator-main-content {
        flex-direction: column-reverse;
    }
    
    .locker-animation-container {
        display: flex;
        position: relative;
        height: 100%;
    }
    

    
    .locker-animation-container .configurator-preview-image {
        position: relative !important;
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: center;
        opacity: 1 !important;
    }
    
    .locker-animation-container .locker-closed::after {
        content: "Closed";
    }
    
    .locker-animation-container .locker-open::after {
        content: "Open";
    }
    
    .option-row:has(input[name="config-position"]) {
        display: none;
    }
    
    .configurator-options-panel, .configurator-image-panel {
        padding: 0px;
    }
    
    .configurator-options-panel {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    .option-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
    }
}

.sec-button {
	background: transparent;
	color: #101440;
	font-weight: 600;
border: 2px solid #101440;
	padding: 12px 20px;
}

.sec-button:hover {
	background: #101440;
	color: white
}

.edugrid {
  position: relative;
  background-color: #ffffff;
  background-image: 
    linear-gradient(rgba(64, 64, 64, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 64, 64, 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

.edugrid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 15%,
    rgba(255, 255, 255, 0) 85%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Ensure content inside the grid appears above the fade overlay */
.edugrid > * {
  position: relative;
  z-index: 2;
}

/* Top sketchy border */
.footeredu {
  position: relative;
}

.footeredu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #F4F7FA6E;
  filter: url(#sketchy);
}

/* Right vertical sketchy line */
.faqedu-right::after {
  content: '';
  position: absolute;
  top: -100px;
  bottom: -190px;
  right: -88px;
  width: 2px;
  background: #F4F7FA6E;
  filter: url(#sketchy);
}

/* Right vertical sketchy line with gradient */
.edufooter::after {
  content: '';
  position: absolute;
  top: -80px;
  bottom: -190px;
  right: -88px;
  width: 2px;
  background: linear-gradient(to bottom, #F4F7FA6E 0%, #F4F7FA6E 80%, transparent 100%);
  z-index: 100;
  filter: url(#sketchy);
}

/* Hide both of Elementor's icons */
.accordians .e-n-accordion-item-title-icon .e-opened,
.accordians .e-n-accordion-item-title-icon .e-closed {
    display: none !important;
}

.accordians .e-n-accordion-item-title-icon::after {
    content: "";
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Capa_1' x='0px' y='0px' viewBox='0 0 512.009 512.009' style='enable-background:new 0 0 512.009 512.009;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M508.625,247.801L508.625,247.801L392.262,131.437c-4.18-4.881-11.526-5.45-16.407-1.269c-4.881,4.18-5.45,11.526-1.269,16.407c0.39,0.455,0.814,0.88,1.269,1.269l96.465,96.582H11.636C5.21,244.426,0,249.636,0,256.063s5.21,11.636,11.636,11.636H472.32l-96.465,96.465c-4.881,4.18-5.45,11.526-1.269,16.407s11.526,5.45,16.407,1.269c0.455-0.39,0.88-0.814,1.269-1.269l116.364-116.364C513.137,259.67,513.137,252.34,508.625,247.801z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease-in-out;
    display: inline-block;
    transform-origin: center;
}

/* Rotate when accordion is open */
.accordians .e-n-accordion-item[open] .e-n-accordion-item-title-icon::after {
    transform: rotate(90deg);
}

.elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-next svg {
  fill: black;
}

/* Header padding */
.uicore.uicore-box .uicore.uicore-container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* ================================
   FULL WIDTH BANNER STYLES
================================ */

.fw-banner{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
margin-top: 120px;
margin-bottom: 120px;
  padding: 48px 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}


	.fw-banner{
	margin-top: 50px; !important;
	margin-bottom: 50px; !important;
}


.fw-banner__inner{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.fw-align-left{ text-align: left; }
.fw-align-center{ text-align: center; }
.fw-align-right{ text-align: right; }

.fw-banner__title{
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(22px, 2.5vw, 34px);
font-weight: 600;
	line-height: 1.3;
}


.fw-banner__text,
.fw-banner__content{
  font-size: 18px;
  line-height: 1.5;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

.fw-align-left .fw-banner__text,
.fw-align-left .fw-banner__content{ margin-left: 0; margin-right: auto; }

.fw-align-right .fw-banner__text,
.fw-align-right .fw-banner__content{ margin-left: auto; margin-right: 0; }

.fw-banner__cta{ margin-top: 18px; }


.fw-banner__btn{
  display: inline-block;
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  background: #C0E2FA;
  color: #111; 
  transition: color .25s ease, background .25s ease;
}

.fw-banner__btn:hover,
.fw-banner__btn:focus{
  background: #a6d2f1;
color: #000;
}

.spot-gradient {
  position: relative;
  overflow: hidden;
}

.spot-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      400px 700px at 65% 40%,   /* X Y position of the glow */
      rgba(166, 210, 241, 0.6),
      rgba(166, 210, 241, 0.25) 30%,
      rgba(166, 210, 241, 0.08) 55%,
      rgba(166, 210, 241, 0) 70%
    );

  z-index: 0;
}

.spot-gradient > * {
  position: relative;
  z-index: 1;
}




/* ===== BASE ===== */

.cwicon-base {
  position: relative;
  display: flex;
  align-items: center;
  color: #381d36;

  width: calc(100vw - (100vw - 100%) / 2);
  max-width: none;
}

.cwicon-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #381d36;
  transform: scaleX(0);
}



.cwicon-svg {
  width: 190px;
  z-index: 2;
}

@media (max-width: 1025px) {
.cwicon-bg {
    width: 111px !important;
}

.cwicon-left .cwicon-line {
	right: 100px !important;
}

.cwicon-svg {
    width: 90px;	
}
}

.cwicon-shape {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* ===== LEFT → RIGHT ===== */

.cwicon-left {
  justify-content: flex-end;
  margin-left: calc(-50vw + 50%);
}

.cwicon-left .cwicon-line {
  transform-origin: left;
  right:190px;
}

/* ===== RIGHT → LEFT ===== */

.cwicon-right {
  justify-content: flex-start;
  margin-right: calc(-50vw + 50%);
}

.cwicon-right .cwicon-line {
  transform-origin: right;
}

/* ===== ANIMATION ===== */

.cwicon-base.is-visible .cwicon-line {
  animation: cw-line 1s ease forwards;
}

.cwicon-base.is-visible .cwicon-shape {
  animation:
    cw-draw 1.2s linear forwards 0.6s,
    cw-fill 0.35s ease forwards 1.6s;
}

@keyframes cw-line {
  to { transform: scaleX(1); }
}

@keyframes cw-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes cw-fill {
  to { fill: currentColor; }
}
  
  .cwicon-bg {
  position: absolute;
  width: 235px;
  z-index: 0;
  left: auto;
  right: 0;
  margin-bottom: 9px;
z-index: 1;
}

.cwicon-left .cwicon-bg { 
    right: -11px; 
}

.cwicon-bg-shape {
  fill: transparent;
  stroke: transparent;
  stroke-width: 8;
  stroke-linejoin: round;
  stroke-linecap: round;

  /* draw animation */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

/* Triggered when visible */
.cwicon-base.is-visible .cwicon-bg-shape {
  animation:
    cw-bg-draw 1.2s ease forwards,
    cw-bg-fill 0.4s ease forwards 1.2s;
}

@keyframes cw-bg-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes cw-bg-fill {
  to { fill: white; }
}



.case-studies-layout-archive {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; /* adjust */
}


@media (max-width: 1025px) {
.case-studies-layout-archive {
  grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
	.case-studies-layout-archive .case-study-image {
		min-height: 150px !important;
	}

}
}

/* Ensure featured sizing classes don’t break archive layout */
.case-studies-layout-archive .featured-large,
.case-studies-layout-archive .featured-small,
.case-studies-layout-archive .featured-half {
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Accessories / shared filter styles */
.accessories-shortcode .technical-download-item { display: none; }
.accessories-shortcode .technical-download-item.active { display: block; }

.accessories-shortcode .technical-download-type { display: none; }
.accessories-shortcode .show-product-types .technical-download-type { display: block; }

.accessory-types{
  display:flex;
  flex-wrap:wrap;
  gap:10px !important;
  margin:24px 0;
  width:100%;
  padding-bottom:35px;
}
.accessory-filter{
  cursor:pointer;
  padding:10px 14px;
  border:1px solid #ddd;
  background:#fff;
  line-height:1;
  width:auto !important;
  flex:0 1 auto;
  white-space:nowrap;
  text-decoration:none;
  color:inherit;
}
.accessory-filter:hover{ border-color:#371D36; }
.accessory-filter.active{
  border-color:#371D36;
  color:#fff;
  background-color:#371D36;
}

.technical-container--v3 .sample-filters .filter-group {
    flex: auto !important;
}
	
.elementor-select-wrapper .select-caret-down-wrapper {
display: none !important;
	}

.sector_tile {
  background-color: rgba(0,0,0,0.35);
  background-blend-mode: overlay;
}

.uicore-navigation-wrapper .uicore-menu-container ul .menu-item:not(.uicore-visible) {
    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 1025px) {
    .mobile-sub-menu .elementor-nav-menu--main ul li.menu-item > a.elementor-item {
        padding: 0 !important;
        margin: 0 !important;
        padding-bottom: 5px !important;
    }
}

@media (max-width: 767px) {
  .elementor-button-align-end .e-form__buttons,
  .elementor-button-align-end .elementor-field-type-submit {
    justify-content: flex-start !important;
  }
}


@media (max-width: 768px) {
    .related-products-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 8px;
    }

    .related-products-row .related-product-item {
        flex: 0 0 70vw !important;
        max-width: 260px;
        scroll-snap-align: start;
    }

    .related-products-row .related-product-item img {
        width: 100% !important;
        max-width: 100% !important;
    }
}
	
.price-group {
    display: none;
}

.brand-corian .price-group {
    display: block;
}

/* ===== TECHNICAL DOWNLOADS OVERRIDE STYLES ===== */
/* These styles are deliberately placed at the end with high specificity to ensure they work */
.technical-downloads-grid .technical-download-item .technical-download-content {
        padding: 15px 15px 5px 15px !important;
}


.technical-downloads-grid .technical-download-item .technical-download-type {
    text-transform: uppercase !important;
}

.technical-downloads-grid .technical-download-item .technical-download-button {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 10px 20px !important;
    background-color: black !important;
    color: white !important;
    text-decoration: none !important;
}

/* ===== GLOBAL CONTAINER STYLES ===== */
.accessories-archive-container,
.samples-archive-container,
.technical-downloads-container {
	width: 100%;
    margin: 0 auto;
    padding: 0 15px;
	background: linear-gradient(170deg, #EEE3D1 12%, white 47%);
padding-top: 150px;
	padding-bottom: 50px;
}

.accessories-archive-container {
background: white !important;
}

.accessories-archive-container .inner-content,
.technical-downloads-container .inner-content,
.accessory-single .container .inner-content, 
.samples-archive-container .inner-content {
    max-width: 1200px;
	   margin: 0 auto;
}



@media (max-width: 1200px) {
    .accessories-archive-container,
    .samples-archive-container,
    .technical-downloads-container,
    .accessory-single .container {
        padding: 100px 15px;
    }
}

/* ===== GRID LAYOUTS ===== */
.accessories-grid,
.technical-downloads-grid,
.related-accessories-grid,
.mini-samples-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 50px;
}


/* Mobile responsive adjustments for grids */
@media screen and (min-width: 480px) and (max-width: 767px) {
    .accessories-grid,
    .technical-downloads-grid,
    .mini-samples-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Desktop grid layouts */
@media screen and (min-width: 650px) and (max-width: 950px) {
    .accessories-grid, .technical-downloads-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 951px) {
    .accessories-grid,
	.technical-downloads-grid,
    .related-accessories-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ===== TYPOGRAPHY STYLES ===== */
/* Navigation links (types/categories) */
.accessory-types a,
.technical-download-types a {
    text-decoration: none;
    color: #333;
    font-weight: 400;
    font-size: 18px;
    transition: color 0.2s;
}




/* Item titles */
.accessory-item-title,
.related-title,
.accessory-title h3 {
    margin: 0 0 15px;
    font-size: 20px;
    line-height: 1.3;
    text-align: left;
}

/* Technical download name styling */
.technical-download-name {
    margin: 0 0 10px;
    font-size: 18px !important;
    line-height: 1.3;
	height: 70px;
}

.accessory-title,
.accessory-technical-info h2,
.related-accessories h2,
.related-samples-section h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

/* Single view title */
.accessory-title {
	margin-top: 0px;
    margin-bottom: 30px;
}

/* Item links */
.accessory-item-title a,
.related-title a,
.sample-details h3 a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* ===== NAVIGATION MENUS ===== */
.accessory-types,
.technical-download-types {
    display: flex;
    gap: 10px;
    margin: 30px 0;
    flex-wrap: wrap;
}

/* ===== ITEM STYLING ===== */
.accessory-item,
.technical-download-item,
.related-item,
.mini-sample-item {
    display: flex;
    flex-direction: column;
}

/* Images */
.technical-download-image img,
.related-image img,
.sample-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Make accessory images smaller on archive */
.accessory-item-image {
    max-width: 85%;
}

.accessory-item-image img {
    width: 85%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ===== BUTTONS & ACTIONS ===== */
.button,
.technical-download-button,
.add-sample-btn,
.view-cart-button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    text-align: center;
}

.button-primary,
.button-primary1,
.add-sample-btn,
.technical-download-button {
    background-color: #010325;
    color: white;
	font-weight: 600;
}

.button-secondary,
.button-secondary1,
.view-cart-button {
    background-color: #9e7653;
    color: #333;
	font-weight: 600;
}

.button-secondary:hover,
.button-secondary1:hover,
.view-cart-button:hover {
    background-color: white;
	color: black;
}

/* ===== SINGLE ITEM LAYOUT ===== */
/* For accessory single and sample single */
.accessory-content-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
	justify-self: center;
}

@media (max-width: 768px) {
    .accessory-content-wrapper {
        flex-direction: column;
        gap: 30px;
    }
}

.single-sample-layout {
    display: flex;
    margin-bottom: 40px;
	gap: 20px;
}

/* Fix for single accessory styling */
.accessory-single .container {
    padding: 50px 15px;
}

.accessory-actions {
    display: flex;
	    flex-wrap: wrap;
    gap: 15px;
}

.accessory-gallery {
    flex: 1;
    min-width: 0;
}

.accessory-gallery .accessory-main-image {
    margin-bottom: 10px;
    border: 1px solid #eee;
    text-align: center;
}

.accessory-gallery .accessory-main-image img {
    max-height: 600px;
}

.accessory-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.accessory-thumbnails .thumbnail {
    flex: 0 0 calc(16.66% - 10px);
    max-width: calc(20% - 10px);
    border: 1px solid #eee;
    cursor: pointer;
}

.accessory-thumbnails img {
    width: 100%;
    height: auto;
    display: block;
}

.accessory-thumbnails .thumbnail-image.active {
    border: 1px solid #9e7653;
}

.accessory-details {
    flex: 1;
    min-width: 0;
	margin-top: 35px;
}

/* Tabs */
.technical-specs-tabs {
    border: 1px solid #eee;
    border-radius: 4px;
}

.tabs-navigation {
    display: flex;
    border-bottom: 1px solid #eee;
}

.tab-button {
    flex: 1;
    padding: 15px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    color: black;
}

.tab-button.active {
    border-bottom: 2px solid #9e7653;
    color: #9e7653;
}

.tab-content {
    padding: 20px;
}

.tab-content.hidden {
    display: none;
}



/* ===== COLOR SCHEME ===== */
/* Primary text color */
body,
.accessory-item-title a,
.technical-download-name,
.related-title a,
.news-article-content p {
    color: #333;
}






/* ===== PAGINATION ===== */
.pagination,
.nav-links {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.pagination a,
.pagination span,
.nav-links a,
.nav-links span {
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}

.pagination .current,
.nav-links .current {
    background-color: black;
    color: white;
}

/* Specifications grid */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
}

.spec-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.spec-label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
    color: #666;
}

.spec-value {
    font-size: 16px;
}

/* Responsive adjustment for specs grid */
@media (min-width: 768px) {
    .specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile responsive adjustments for grids - updated for 2 columns on mobile */
@media screen and (max-width: 479px) {
    .accessories-grid,
    .technical-downloads-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px; /* Slightly smaller gap for mobile */
    }
    
    /* Make images/content fit better in the smaller space */
    .accessory-item-image,
    .technical-download-image {
        max-width: 100%;
    }
    
    /* Adjust text size for tighter layout */
    .accessory-item-title,
    .technical-download-name {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .technical-download-type {
        font-size: 12px;
        margin-bottom: 8px;
    }
}

.technical-download-button-2 {
  padding-bottom: 5px;
  color: black;
  text-align: left !important;
  position: relative;
  padding-right: 24px; /* Make space for the icon */
font-size: 15px;
}

.technical-download-button-2::after {
  content: "";
  position: absolute;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='77' height='77' viewBox='0 0 77 77' fill='none'%3E%3Cpath d='M38.5 49.9763L27.1473 38.6236L29.418 36.316L36.8958 43.7938V16.0417H40.1042V43.7938L47.582 36.316L49.8527 38.6236L38.5 49.9763ZM21.2247 60.9584C19.7478 60.9584 18.5148 60.4638 17.5255 59.4746C16.5363 58.4853 16.0417 57.2523 16.0417 55.7754V48.0016H19.25V55.7754C19.25 56.2694 19.4556 56.7221 19.8668 57.1333C20.278 57.5445 20.7307 57.7501 21.2247 57.7501H55.7753C56.2694 57.7501 56.722 57.5445 57.1332 57.1333C57.5444 56.7221 57.75 56.2694 57.75 55.7754V48.0016H60.9583V55.7754C60.9583 57.2523 60.4637 58.4853 59.4745 59.4746C58.4852 60.4638 57.2522 60.9584 55.7753 60.9584H21.2247Z' fill='black'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.technical-download-item {
    position: relative;
	border: 1px solid #c3c4c7;
}

.technical-download-type {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #eee2d1;
    color: #9e7653 !important;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
}

.technical-download-image {
    position: relative;
    height: 200px; 
    overflow: hidden;
}

.technical-download-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
}

.techdownloadbtn {
	width: 100%;
	text-align: center; 
	display: block;
	color: #9e7653;
	padding: 5px;
	margin-top: 5px;
}

.techdownloadbtn:hover {
	background-color: #9e7653;
	color: white;
}

.tech-download-buttons {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
	padding-bottom: 5px;
	padding-top: 12px;
	border-top: 1px solid black;
	
}

.technical-download-sector {
	text-transform: uppercase;
	font-weight: 600;
	color: #9e7653;
	font-size: 12px;	
}

.download-submit {
	background: black !important;
	color: white !important;
}

.download-submit:hover {
	background: #1a1a1a !important;
	  cursor: pointer;
}

.technical-download-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.technical-download-item-link:hover {
    text-decoration: none;
}

.technical-download-item {
    cursor: pointer;
}

.accessory-meta-header {
    display: flex;
   gap: 20px;
    margin-bottom: 10px;
	align-items: center;
}

.accessory-manufacturer {
    margin: 0;
}

.accessory-code {
    font-size: 14px;
    color: #666;
	font-weight: 600;
}