.elementor-1398 .elementor-element.elementor-element-b323880{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1398 .elementor-element.elementor-element-b88e626{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1398 .elementor-element.elementor-element-6376363{text-align:center;}.elementor-1398 .elementor-element.elementor-element-6376363 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:53px;font-weight:700;color:#222222;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1398 .elementor-element.elementor-element-c4b543b{width:var( --container-widget-width, 75.556% );max-width:75.556%;--container-widget-width:75.556%;--container-widget-flex-grow:0;text-align:center;font-family:"Inter", Sans-serif;font-size:18px;font-weight:400;color:#777777;}.elementor-1398 .elementor-element.elementor-element-c4b543b.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}@media(max-width:1024px){.elementor-1398 .elementor-element.elementor-element-6376363 .elementor-heading-title{font-size:38px;}.elementor-1398 .elementor-element.elementor-element-c4b543b{font-size:15px;}}@media(max-width:767px){.elementor-1398 .elementor-element.elementor-element-6376363{text-align:center;}.elementor-1398 .elementor-element.elementor-element-6376363 .elementor-heading-title{font-size:35px;}.elementor-1398 .elementor-element.elementor-element-c4b543b{--container-widget-width:479px;--container-widget-flex-grow:0;width:var( --container-widget-width, 479px );max-width:479px;}}/* Start custom CSS for html, class: .elementor-element-805d9ad *//* Lock Product Card Button Colors */
.bg-\[#f20212\], 
[class*="bg-[#f20212]"],
button[onclick*="toggleQuoteSection"],
button[onclick*="addToQuote"] {
    background-color: #f20212 !important;
    color: white !important;
}

/* Lock Product Card Button Hover Colors */
.bg-\[#f20212\]:hover,
[class*="bg-[#f20212]"]:hover,
button[onclick*="toggleQuoteSection"]:hover,
button[onclick*="addToQuote"]:hover {
    background-color: #c41e3a !important;
    color: white !important;
}

/* Lock Read More Button Colors */
.border-\[#f20212\],
[class*="border-[#f20212]"],
button[onclick*="openModal"] {
    border-color: #f20212 !important;
    color: #f20212 !important;
    background-color: transparent !important;
}

/* Lock Read More Button Hover Colors */
.border-\[#f20212\]:hover,
[class*="border-[#f20212]"]:hover,
button[onclick*="openModal"]:hover {
    background-color: #fef2f2 !important;
    border-color: #f20212 !important;
    color: #f20212 !important;
}

/* Lock Gray ADD Button Colors */
.bg-gray-400,
[class*="bg-gray-400"] {
    background-color: #9ca3af !important;
    color: white !important;
}

/* Lock Modal Popup Layout and Colors */
.modal {
    position: fixed !important;
    z-index: 1000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0,0,0,0.5) !important;
    display: none !important;
}

.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Lock Modal Content Layout */
.modal .bg-white {
    background-color: white !important;
    border-radius: 8px !important;
    max-width: 672px !important;
    width: 100% !important;
    margin: 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

/* Lock Modal Button Colors */
#modal-quote-btn,
#modal-add-btn {
    background-color: #f20212 !important;
    color: white !important;
}

#modal-quote-btn:hover,
#modal-add-btn:hover {
    background-color: #c41e3a !important;
    color: white !important;
}

/* Lock Modal Close Button */
.modal button[onclick="closeModal()"] {
    color: #6b7280 !important;
    font-size: 24px !important;
}

.modal button[onclick="closeModal()"]:hover {
    color: #f20212 !important;
}

/* Lock Form Submit Button Colors */
#submit-btn {
    background-color: #f20212 !important;
    color: white !important;
}

#submit-btn:hover {
    background-color: #c41e3a !important;
    color: white !important;
}

/* Lock Focus Ring Colors */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #f20212 !important;
    border-color: #f20212 !important;
}

/* Lock Remove Button Colors in Quote Summary */
button[onclick*="removeFromQuote"] {
    color: #dc2626 !important;
}

button[onclick*="removeFromQuote"]:hover {
    color: #991b1b !important;
}

/* Lock Notification Colors */
.notification {
    background-color: #16a34a !important;
    color: white !important;
    position: fixed !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    z-index: 1001 !important;
}

/* Lock Success Message Colors */
#success-message {
    background-color: #f0fdf4 !important;
    border-color: #22c55e !important;
    color: #15803d !important;
}

/* Prevent Elementor Theme Overrides */
.elementor-widget-html * {
    box-sizing: border-box !important;
}

/* Lock Loading Spinner Colors */
.loading-spinner {
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid #f20212 !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Lock Card Hover Effects */
.hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Lock Transition Effects */
.transition-colors,
.transition-shadow {
    transition-property: color, background-color, border-color, box-shadow !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}
/* Lock Modal Popup Layout and Colors - Responsive Sizing */
.modal {
    position: fixed !important;
    z-index: 1000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0,0,0,0.5) !important;
    display: none !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Desktop Modal Content Layout */
.modal .bg-white {
    background-color: white !important;
    border-radius: 8px !important;
    max-width: 600px !important;
    width: 90% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Tablet Modal Sizing */
@media (max-width: 1024px) and (min-width: 769px) {
    .modal .bg-white {
        max-width: 500px !important;
        width: 85% !important;
        max-height: 80vh !important;
    }
    
    .modal {
        padding: 15px !important;
    }
}

/* Mobile Modal Sizing */
@media (max-width: 768px) {
    .modal .bg-white {
        max-width: none !important;
        width: 95% !important;
        max-height: 90vh !important;
        margin: 0 !important;
    }
    
    .modal {
        padding: 10px !important;
    }
    
    /* Smaller modal image on mobile */
    #modal-image {
        height: 200px !important;
        object-fit: cover !important;
    }
    
    /* Adjust modal padding on mobile */
    .modal .bg-white > div {
        padding: 20px !important;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .modal .bg-white {
        width: 98% !important;
        max-height: 95vh !important;
    }
    
    .modal {
        padding: 5px !important;
    }
    
    #modal-image {
        height: 150px !important;
    }
    
    .modal .bg-white > div {
        padding: 15px !important;
    }
    
    /* Stack modal buttons on very small screens */
    .modal .flex.gap-2 {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* Ensure Modal Content Never Overflows */
.modal .bg-white {
    overflow: hidden !important;
}

.modal .bg-white > div {
    overflow-y: auto !important;
    max-height: 100% !important;
}

/* Lock Modal Close Button Position */
.modal button[onclick="closeModal()"] {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 10 !important;
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    color: #6b7280 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Lock Modal Popup Layout and Colors - Responsive Sizing */
.modal {
    position: fixed !important;
    z-index: 1000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0,0,0,0.5) !important;
    display: none !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Desktop Modal Content Layout */
.modal .bg-white {
    background-color: white !important;
    border-radius: 8px !important;
    max-width: 600px !important;
    width: 90% !important;
    max-height: 85vh !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Scrollable Modal Content */
.modal .bg-white > div {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 100% !important;
    flex: 1 !important;
    padding: 24px !important;
    scroll-behavior: smooth !important;
}

/* Custom Scrollbar Styling for Modal */
.modal .bg-white > div::-webkit-scrollbar {
    width: 8px !important;
}

.modal .bg-white > div::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
}

.modal .bg-white > div::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

.modal .bg-white > div::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* Firefox Scrollbar */
.modal .bg-white > div {
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 #f1f5f9 !important;
}

/* Tablet Modal Sizing */
@media (max-width: 1024px) and (min-width: 769px) {
    .modal .bg-white {
        max-width: 500px !important;
        width: 85% !important;
        max-height: 80vh !important;
    }
    
    .modal {
        padding: 15px !important;
    }
}

/* Mobile Modal Sizing */
@media (max-width: 768px) {
    .modal .bg-white {
        max-width: none !important;
        width: 95% !important;
        max-height: 90vh !important;
        margin: 0 !important;
    }
    
    .modal {
        padding: 10px !important;
    }
    
    /* Smaller modal image on mobile */
    #modal-image {
        height: 200px !important;
        object-fit: cover !important;
    }
    
    /* Adjust modal padding on mobile */
    .modal .bg-white > div {
        padding: 20px !important;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .modal .bg-white {
        width: 98% !important;
        max-height: 95vh !important;
    }
    
    .modal {
        padding: 5px !important;
    }
    
    #modal-image {
        height: 150px !important;
    }
    
    .modal .bg-white > div {
        padding: 15px !important;
    }
    
    /* Stack modal buttons on very small screens */
    .modal .flex.gap-2 {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* Lock Modal Close Button Position */
.modal button[onclick="closeModal()"] {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 10 !important;
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    color: #6b7280 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure Modal Images Don't Break Layout */
.modal img {
    max-width: 100% !important;
    height: auto !important;
}

/* Prevent Text Overflow in Modal */
.modal p,
.modal div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
/* Lock Search Bar Container */
.flex.justify-center {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 32px !important;
}

/* Lock Search Bar Wrapper */
.relative.w-full.max-w-md {
    position: relative !important;
    width: 100% !important;
    max-width: 448px !important;
}

/* Lock Search Input Styling */
#search-input,
input[id="search-input"] {
    width: 100% !important;
    padding: 12px 16px 12px 48px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    background-color: white !important;
    color: #374151 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    box-sizing: border-box !important;
}

/* Lock Search Input Focus State */
#search-input:focus,
input[id="search-input"]:focus {
    outline: none !important;
    border-color: #f20212 !important;
    box-shadow: 0 0 0 3px rgba(242, 2, 18, 0.1) !important;
}

/* Lock Search Input Placeholder */
#search-input::placeholder,
input[id="search-input"]::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Lock Search Icon Positioning and Color */
.absolute.left-4.top-1\/2 svg,
svg[class*="absolute left-4"] {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    color: #f20212 !important;
    fill: currentColor !important;
    pointer-events: none !important;
}

/* Lock Search Bar Responsive Behavior */
@media (max-width: 768px) {
    .relative.w-full.max-w-md {
        max-width: 100% !important;
        margin: 0 16px !important;
    }
    
    #search-input,
    input[id="search-input"] {
        font-size: 16px !important;
        padding: 10px 14px 10px 44px !important;
    }
    
    .absolute.left-4.top-1\/2 svg,
    svg[class*="absolute left-4"] {
        left: 14px !important;
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 480px) {
    .flex.justify-center {
        margin-bottom: 24px !important;
    }
    
    .relative.w-full.max-w-md {
        margin: 0 12px !important;
    }
}

/* Prevent Elementor Theme Overrides on Search */
.elementor-widget-html #search-input,
.elementor-section #search-input,
.elementor-container #search-input {
    font-family: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Lock Search Container Margins */
.container.mx-auto .flex.justify-center {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 32px !important;
    margin-top: 0 !important;
}

/* Ensure Search Icon SVG Path Styling */
.absolute svg path {
    fill-rule: evenodd !important;
    clip-rule: evenodd !important;
}

/* Lock Search Input Border Radius */
#search-input,
input[id="search-input"] {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Prevent Input Zoom on iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #search-input,
    input[id="search-input"] {
        font-size: 16px !important;
    }
}
/* Lock Popup Quantity Input and ADD Button Same Size */
#modal-quantity,
input[id="modal-quantity"] {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    padding: 4px 8px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    height: 32px !important;
    box-sizing: border-box !important;
}

#modal-add-btn,
button[id="modal-add-btn"] {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    padding: 4px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    height: 32px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Lock Popup Quantity Section Layout */
#modal-quote-section,
div[id="modal-quote-section"] {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

#modal-quote-section.hidden {
    display: none !important;
}

/* Make Popup Image Slightly Smaller - FIXED to show full image */
#modal-image,
img[id="modal-image"] {
    width: 100% !important;
    height: 200px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    background-color: #f8f9fa !important;
}

/* Ensure Popup Controls Don't Get Overridden */
.modal #modal-quantity,
.modal #modal-add-btn {
    font-family: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Lock Button Colors */
#modal-add-btn.bg-gray-400 {
    background-color: #9ca3af !important;
    color: white !important;
}

#modal-add-btn:hover,
#modal-add-btn.bg-red-600,
#modal-add-btn[style*="background"] {
    background-color: #f20212 !important;
    color: white !important;
}

/* Responsive Popup Image */
@media (max-width: 768px) {
    #modal-image,
    img[id="modal-image"] {
        height: 180px !important;
    }
}

@media (max-width: 480px) {
    #modal-image,
    img[id="modal-image"] {
        height: 160px !important;
    }
    
    #modal-quantity,
    #modal-add-btn {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        font-size: 13px !important;
    }
}

/* Lock Modal Container Styling */
.modal .bg-white.rounded-lg {
    max-width: 512px !important;
    width: 100% !important;
    margin: 0 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

/* Prevent Elementor Theme Overrides on Modal Elements */
.modal input,
.modal button {
    font-family: inherit !important;
    box-shadow: none !important;
    outline: none !important;
}

.modal input:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(242, 2, 18, 0.2) !important;
}
/* ADD Button Same Size */
#modal-quantity,
input[id="modal-quantity"] {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    padding: 4px 8px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    height: 32px !important;
    box-sizing: border-box !important;
}

#modal-add-btn,
button[id="modal-add-btn"] {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    padding: 4px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    height: 32px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#products-grid > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

#products-grid .flex.gap-2 {
    margin-top: auto;
    margin-bottom: 5%;
}
#products-grid img {
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
#products-grid div:hover img {
    transform: scale(1.08);
}
/* Responsive grid: 1 column mobile, 2 tablet, 4 desktop */
#products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  #products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  #products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
///////
/* Make Read More button narrower and number input wider */
#products-grid .flex.gap-2 > button:first-child {
  flex: 0 0 90px; /* Fixed width for Read More */
  min-width: 90px;
  max-width: 120px;
}

#products-grid .flex.gap-2 > div {
  flex: 1 1 0;
}

#products-grid input[type="number"] {
  width: 60px;      /* Wider number box */
  min-width: 60px;
  text-align: center;
}/* End custom CSS */