/*
Theme Name:   	Storefront Child Theme
Theme URI:    	https://github.com/stuartduff/storefront-child-theme
Author:       	Stuart Duff
Author URI:     http://stuartduff.com
Template:     	storefront
Description:  	This is a blank child theme for WooThemes StoreFront theme
Version:      	1.0.0
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront
Tags:         	black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Images License: GNU General Public License v2 or later
*/
/*
 * Custom Fonts - Titillium Web & Source Sans 3
 * Titillium Web: Nowoczesne, czytelne nagłówki
 * Source Sans 3: Profesjonalny, czytelny font dla treści
 */

/* Titillium Web - Nagłówki */
@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/titillium-web-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/titillium-web-600.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/titillium-web-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 - Treść */
@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans-3-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans-3-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans-3-600.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans-3-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
 * Typography - Set default fonts
 * Treść: Source Sans 3 (profesjonalny, czytelny)
 * Nagłówki: Titillium Web (nowoczesny, elegancki)
 */

body,
.woocommerce-tabs .panel,
.woocommerce .woocommerce-product-rating,
.woocommerce .woocommerce-breadcrumb,
.woocommerce-checkout .woocommerce-info,
.woocommerce form .form-row label,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
p,
span,
div,
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-ordering select,
.woocommerce-page .woocommerce-result-count {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.widget-title,
.woocommerce .widget-title,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce h5,
.woocommerce h6,
.woocommerce-loop-product__title,
.woocommerce .product_title,
.woocommerce .woocommerce-tabs .panel h2,
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
}

/*
 * Custom Categories Sections - Clean Implementation
 */

/* Full-width wrapper */
.custom-categories-wrapper {
    width: 100%;
    margin: 40px 0;
    padding: 0;
}


/* Section container */
.categories-section {
    
    padding: 0 20px;
    margin-bottom: 40px;
    box-sizing: border-box;
}

/* Grid layout */
.categories-grid {
    display: flex;
    gap: 15px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Column definitions */
/* Layout for 7 categories (original) */
.col-medium {
    flex: 0 0 calc(33.33% - 10px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

.col-large {
    flex: 0 0 calc(33.33% - 10px);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.col-large .category-banner {
    height: 100% !important;
    margin-bottom: 0;
}

.col-large .banner-container {
    overflow: hidden;
    height: 100%;
}

.col-large .banner-container img {
    height: 100%;
}

.col-small {
    flex: 0 0 calc(16.67% - 10px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

/* Layout for 6 categories: 2 medium + 1 large + 3 small */
.col-triple {
    flex: 0 0 calc(33.33% - 10px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

/* Layout for 3 categories: 2 wider medium + 1 wider large */
.col-wide-medium {
    flex: 0 0 calc(40% - 10px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

.col-wide-large {
    flex: 0 0 calc(60% - 10px);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.col-wide-large .category-banner {
    height: 415px;
    margin-bottom: 0;
}

.col-wide-large .banner-container {
    overflow: hidden;
    height: 100%;
}

.col-wide-large .banner-container img {
    height: 100%;
}

/* Layout for 2 categories: 50/50 */
.col-half {
    flex: 0 0 calc(50% - 7.5px);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.col-half .category-banner {
    height: 415px;
    margin-bottom: 0;
}

.col-half .banner-container {
    overflow: hidden;
    height: 100%;
}

.col-half .banner-container img {
    height: 100%;
}

/* Layout for 1 category: 100% */
.col-full {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.col-full .category-banner {
    height: 415px;
    margin-bottom: 0;
}

.col-full .banner-container {
    overflow: hidden;
    height: 100%;
}

.col-full .banner-container img {
    height: 100%;
}

/* Banner styling */
.category-banner {
    margin-bottom: 0;
}

.banner-container {
    overflow: hidden;
    position: relative;
    
    border-radius: 4px;
}

.banner-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Triple banner - 3 equal squares */
.col-triple .banner-container img {
    height: 130px;
}

/* Hover effect */
.banner-container:hover img {
    transform: scale(1.1);
}

/* Text overlay */
.banner-overlay {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    width: calc(100% - 40px);
}

.banner-overlay h4 {
    margin: 0;
    font-size: 24px;
    color: #4AB6B6;
    transition: color 0.2s ease;
}

/* Clickable banner link */
.banner-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.banner-link:hover .banner-overlay h4 {
    color: #305B7B;
}

.banner-link:hover .banner-container img {
    transform: scale(1.1);
}

/* Responsive design */
@media (max-width: 1200px) {
    .categories-section {
    
    
        padding: 0 15px;
    }

    .categories-grid {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 5px;
    }

    .col-medium,
    .col-large,
    .col-small,
    .col-triple,
    .col-wide-medium,
    .col-wide-large,
    .col-half {
        flex: 0 0 calc(50% - 5px);
    }

    .col-full {
        flex: 0 0 100%;
    }
}

@media (max-width: 768px) {
    .categories-section {
    
    
        padding: 0 10px;
    }

    .categories-grid {
        flex-direction: column;
        gap: 15px;
        padding: 0;
    }

    .col-medium,
    .col-large,
    .col-small,
    .col-triple,
    .col-wide-medium,
    .col-wide-large,
    .col-half,
    .col-full {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .banner-container img,
    .col-large .banner-container img,
    .col-wide-large .banner-container img,
    .col-half .banner-container img,
    .col-full .banner-container img {
    height: 100%;
        height: 100%;
    }

    .col-large .category-banner,
    .col-wide-large .category-banner,
    .col-half .category-banner,
    .col-full .category-banner {
    height: 415px;
    flex: 1;
        flex: 0 0 auto;
        margin-bottom: 15px;
    }

    .col-large .banner-container,
    .col-wide-large .banner-container,
    .col-half .banner-container,
    .col-full .banner-container {
    overflow: hidden;
        height: auto;
    }

    .banner-overlay h4 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .categories-section {
    
    
        padding: 0 5px;
    }

    .banner-overlay h4 {
        font-size: 16px;
    }
}

/*
 * Global Color System - Aviation Blue Palette
 * Profesjonalna paleta dla strony technicznej B2B (części do samolotów)
 * Użycie: var(--color-primary), var(--color-bg-light), etc.
 */
:root {
    /* Aviation Blue - Kolory główne */
    --color-primary: #1e88e5;           /* Aviation Blue - akcent/przycisk */
    --color-primary-dark: #1565c0;      /* Ciemniejszy niebieski - hover */
    --color-secondary: #f5f6f7;         /* Jasnoszary - tło drugorzędne */

    /* Kolory tła */
    --color-bg-light: #f5f6f7;          /* Jasnoszary - tło główne */
    --color-bg-beige: #f5f6f7;          /* Alias (zachowany dla kompatybilności) */

    /* Kolory tekstu */
    --color-text-dark: #222831;         /* Grafit - tekst główny */
    --color-text-light: #6d6d6d;        /* Szary - tekst pomocniczy */

    /* Linie i ikonografia */
    --color-line: #90a4ae;              /* Szaroniebieski - linie/ikony */
    --color-border: #90a4ae;            /* Alias dla ramek */

    /* Backwards compatibility - stare nazwy (deprecated) */
    --bg-warm-white: var(--color-bg-light);
    --bg-soft-beige: var(--color-bg-beige);
    --text-dark: var(--color-text-dark);
    --accent-green: var(--color-primary);
    --border-brown: var(--color-primary-dark);
}

/*
 * Hero Section - Clean Implementation
 */

/* Full-width hero */
/* Hero section styles moved to assets/css/hero-section.css */
/* Loads only on homepage for better performance */

/*
 * Global color updates for existing elements
 */

/* Update category banners to use global colors */
.banner-overlay {
    background: rgba(250, 250, 247, 0.95);
}

.banner-overlay h4 {
    color: var(--accent-green);
}

.banner-link:hover .banner-overlay h4 {
    color: var(--border-brown);
}

/* Update body background */
body {
    background-color: var(--bg-warm-white);
}

/*
 * Custom Homepage Template Styling
 */

/* Custom homepage wrapper - completely bypass Storefront containers */
.custom-homepage-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Products sections styling */
.products-section {
    width: 100%;
    padding: 60px 20px;
    background: var(--bg-warm-white);
    margin: 0;
}

.products-section:nth-child(even) {
    background: var(--bg-soft-beige);
}

.products-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 48px;
    color: var(--accent-green);
    text-align: center;
    margin: 0 0 40px 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Products grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 0 auto;
}

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

@media (min-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* WooCommerce Product Cards Styling */

/* Fix for WooCommerce grid conflicts */
.products-section .products::before,
.products-section .products::after,
.woocommerce .products::before,
.woocommerce .products::after,
.woocommerce-page .products::before,
.woocommerce-page .products::after {
    display: none !important;
}

/* Basic homepage products grid layout */
.products-section .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

@media (min-width: 992px) {
    .products-section .products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Product category badge - centered with better spacing */
.products-section .product .category-badge,
#popular-products-grid .product .category-badge,
.woocommerce ul.products li.product .category-badge {
    display: block;
    background: rgba(43, 43, 43, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 auto 10px auto;
    white-space: nowrap;
    
    text-overflow: ellipsis;
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    width: fit-content;
    max-width: 100%;
    text-align: center;
    flex-shrink: 0;
}

/* Rotating badge animation */
.products-section .product .category-badge.rotating {
    animation: categoryFadeTransition 0.5s ease-in-out;
}

@keyframes categoryFadeTransition {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Minimal homepage product improvements - keep WooCommerce defaults */
.products-section .woocommerce-loop-product__title,
#popular-products-grid .woocommerce-loop-product__title {
    font-size: 20px !important;
    text-align: center !important;
}

.products-section .price,
#popular-products-grid .price {
    font-size: 18px !important;
    text-align: center !important;
}

/* Sale badge positioned on image - elegant style */
.products-section .onsale,
#popular-products-grid .onsale {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: #e74c3c !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    z-index: 2 !important;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3) !important;
    line-height: 1 !important;
}

/* Homepage button colors and 100% width */
.products-section .button,
.products-section .add_to_cart_button,
.products-section a.button,
.products-section .product_type_simple,
.products-section .product_type_variable,
#popular-products-grid .button,
#popular-products-grid .add_to_cart_button,
#popular-products-grid a.button,
#popular-products-grid .product_type_simple,
#popular-products-grid .product_type_variable {
    background: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: white !important;
    width: 100% !important;
}

.products-section .woosw-btn,
#popular-products-grid .woosw-btn {
    width: 100% !important;
}

/* Equal height cards - now handled by unified flexbox system below in "EQUAL HEIGHT PRODUCT CARDS" section */

/* Homepage button hover colors only */
.products-section .button:hover,
.products-section .add_to_cart_button:hover,
.products-section a.button:hover,
.products-section .product_type_simple:hover,
.products-section .product_type_variable:hover,
#popular-products-grid .button:hover,
#popular-products-grid .add_to_cart_button:hover,
#popular-products-grid a.button:hover,
#popular-products-grid .product_type_simple:hover,
#popular-products-grid .product_type_variable:hover {
    background: var(--border-brown) !important;
    border-color: var(--border-brown) !important;
    color: white !important;
}


@media (min-width: 992px) {
    #popular-products-grid .products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}



/*
 * Category Filter Buttons Styling
 */

.category-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 40px 0;
    padding: 0 20px;
}

.category-filter-btn {
    background: white;
    color: var(--accent-green);
    border: 2px solid var(--accent-green);
    padding: 10px 20px;
    border-radius: 25px;
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    white-space: nowrap;
}

.category-filter-btn:hover {
    background: var(--accent-green);
    color: white;
    transform: translateY(-2px);
}

.category-filter-btn.active {
    background: var(--accent-green);
    color: white;
    box-shadow: 0 4px 10px rgba(47, 79, 79, 0.3);
}

.loading-spinner {
    text-align: center;
    padding: 40px;
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--accent-green);
    font-size: 16px;
}

.no-products,
.error {
    text-align: center;
    padding: 40px;
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-dark);
    font-size: 16px;
    background: var(--bg-soft-beige);
    border-radius: 8px;
    margin: 20px;
}

.error {
    color: #d32f2f;
    background: #ffebee;
}

/* Mobile responsive buttons */
@media (max-width: 768px) {
    .category-filter-buttons {
        padding: 0 10px;
        gap: 8px;
    }

    .category-filter-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .category-filter-buttons {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
    }

    .category-filter-btn {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 12px;
    }
}

/*
 * Add your own custom css below this text.
 */

/* WooCommerce Shop & Archive Pages - exact copy of homepage styling */

/* Shop page product styling - exact copy of homepage */
.woocommerce ul.products:not(.products-section .products) li.product .woocommerce-loop-product__title {
    font-size: 20px !important;
    text-align: center !important;
}

.woocommerce ul.products:not(.products-section .products) li.product .price {
    font-size: 18px !important;
    text-align: center !important;
}

/* Shop page sale badge - exact copy of homepage */
.woocommerce ul.products:not(.products-section .products) li.product .onsale {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: #e74c3c !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    z-index: 2 !important;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3) !important;
    line-height: 1 !important;
}

/* Shop page buttons - exact copy of homepage */
.woocommerce ul.products:not(.products-section .products) li.product .button {
    background: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: white !important;
    width: 100% !important;
}

.woocommerce ul.products:not(.products-section .products) li.product .woosw-btn {
    width: 100% !important;
}

.woocommerce ul.products:not(.products-section .products) li.product .button:hover {
    background: var(--border-brown) !important;
    border-color: var(--border-brown) !important;
    color: white !important;
}

/* ============================================
   EQUAL HEIGHT PRODUCT CARDS - SHOP & HOMEPAGE
   ============================================ */

/* Shop page grid - ensure equal heights */
.woocommerce ul.products:not(.products-section .products) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    align-items: stretch !important;
}

@media (min-width: 768px) {
    .woocommerce ul.products:not(.products-section .products) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 992px) {
    .woocommerce ul.products:not(.products-section .products) {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Shop & Homepage: Product card structure with flexbox */
.woocommerce ul.products li.product,
.products-section li.product,
#popular-products-grid li.product {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Product link wrapper - flex container */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.products-section li.product .woocommerce-LoopProduct-link,
#popular-products-grid li.product .woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    position: relative !important;
}

/* Product thumbnail wrapper with overflow hidden */
.product-thumb {
    overflow: hidden;
    display: block;
    
    border-radius: 8px;
    position: relative;
    flex-shrink: 0;
}

/* Product image hover animation */
.product-thumb img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    width: 100%;
    height: auto;
}

.woocommerce ul.products li.product:hover .product-thumb img,
.products-section li.product:hover .product-thumb img,
.product:hover .product-thumb img {
    transform: scale(1.05);
}

/* Product title - flexible height with consistent minimum */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.products-section li.product .woocommerce-loop-product__title,
#popular-products-grid li.product .woocommerce-loop-product__title {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin: 10px 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* Price always above buttons */
.woocommerce ul.products li.product .price,
.products-section li.product .price,
#popular-products-grid li.product .price {
    margin: 10px 0 15px 0 !important;
    flex-shrink: 0 !important;
}

/* Buttons container - always at bottom */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .woosw-btn,
.woocommerce ul.products li.product .add_to_cart_button,
.products-section li.product .button,
.products-section li.product .woosw-btn,
#popular-products-grid li.product .button,
#popular-products-grid li.product .woosw-btn {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* Fix ordering dropdown positioning */
.woocommerce-ordering {
    clear: both !important;
}

/* Shop page category badge - now handled by unified badge styles above */

/*
 * Responsive Typography - Section Titles
 * Unified responsive sizing for all section titles (.section-title, .brands-title)
 */

/* Tablet (iPad) */
@media screen and (max-width: 1024px) {
    .section-title {
        font-size: 42px;
        margin-bottom: 35px;
        letter-spacing: -0.4px;
    }
}

/* Mobile (Phone) */
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 32px;
        margin-bottom: 30px;
        letter-spacing: -0.3px;
    }
}

/* Small mobile */
@media screen and (max-width: 480px) {
    .section-title {
        font-size: 26px;
        margin-bottom: 25px;
        letter-spacing: -0.2px;
    }
}

/*
 * Remove default Storefront header margin-bottom
 */
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
    margin-bottom: 0 !important;
}

/*
 * Price discount badge - Single Product Page
 */
.price-discount-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--accent-green, #1e88e5) !important;
    color: var(--bg-warm-white, #ffffff) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    margin-left: 8px !important;
    vertical-align: baseline !important;
    align-self: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    position: relative !important;
    top: -2px !important;
}

.single-product div.product p.price .price-discount-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--accent-green, #1e88e5) !important;
    color: var(--bg-warm-white, #ffffff) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    margin-left: 8px !important;
    vertical-align: baseline !important;
    align-self: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    position: relative !important;
    top: -2px !important;
}

@media (max-width: 768px) {
    .price-discount-badge,
    .single-product div.product p.price .price-discount-badge {
        font-size: 13px !important;
        padding: 4px 8px !important;
        margin-left: 6px !important;
    }
}

@media (max-width: 480px) {
    .price-discount-badge,
    .single-product div.product p.price .price-discount-badge {
        font-size: 12px !important;
        padding: 3px 7px !important;
        margin-left: 5px !important;
    }
}

/*
 * Omnibus price message styling - Single Product Page
 * Elegant info box design - subtle and informative
 */
.single-product div.product .product-price-wrapper .omnibus-message,
.single-product div.product .product-price-wrapper .omnibus-price-message,
.single-product div.product .product-price-wrapper .wc-omnibus,
.single-product div.product .product-price-wrapper .omnibus-lowest-price,
.single-product div.product .product-price-wrapper .iworks-omnibus,
.single-product div.product .product-price-wrapper [class*="omnibus"],
.product-price-wrapper .omnibus-message,
.product-price-wrapper .omnibus-price-message,
.product-price-wrapper .wc-omnibus,
.product-price-wrapper .omnibus-lowest-price,
.product-price-wrapper .iworks-omnibus,
.product-price-wrapper [class*="omnibus"] {
    font-size: 13px !important;
    color: #555 !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    display: block !important;
    background: #f8f9fa !important;
    padding: 10px 12px 10px 36px !important;
    border-radius: 6px !important;
    border-left: 3px solid #9e9e9e !important;
    position: relative !important;
}

/* Info icon before omnibus message */
.single-product div.product .product-price-wrapper .iworks-omnibus::before,
.single-product div.product .product-price-wrapper .omnibus-message::before,
.single-product div.product .product-price-wrapper .omnibus-price-message::before,
.single-product div.product .product-price-wrapper [class*="omnibus"]::before {
    content: "ⓘ" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: #9e9e9e !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Price inside omnibus message - make it stand out slightly */
.single-product div.product .product-price-wrapper .iworks-omnibus .woocommerce-Price-amount,
.single-product div.product .product-price-wrapper [class*="omnibus"] .woocommerce-Price-amount {
    font-weight: 600 !important;
    color: #333 !important;
}

@media (max-width: 768px) {
    .single-product div.product .product-price-wrapper .omnibus-message,
    .single-product div.product .product-price-wrapper .omnibus-price-message,
    .single-product div.product .product-price-wrapper .wc-omnibus,
    .single-product div.product .product-price-wrapper .iworks-omnibus,
    .single-product div.product .product-price-wrapper [class*="omnibus"] {
        font-size: 12px !important;
        padding: 9px 10px 9px 32px !important;
    }

    .single-product div.product .product-price-wrapper .iworks-omnibus::before,
    .single-product div.product .product-price-wrapper .omnibus-message::before,
    .single-product div.product .product-price-wrapper .omnibus-price-message::before,
    .single-product div.product .product-price-wrapper [class*="omnibus"]::before {
        font-size: 14px !important;
        left: 10px !important;
    }
}

@media (max-width: 480px) {
    .single-product div.product .product-price-wrapper .omnibus-message,
    .single-product div.product .product-price-wrapper .omnibus-price-message,
    .single-product div.product .product-price-wrapper .wc-omnibus,
    .single-product div.product .product-price-wrapper .iworks-omnibus,
    .single-product div.product .product-price-wrapper [class*="omnibus"] {
        font-size: 11px !important;
        padding: 8px 8px 8px 28px !important;
        margin-top: 10px !important;
    }

    .single-product div.product .product-price-wrapper .iworks-omnibus::before,
    .single-product div.product .product-price-wrapper .omnibus-message::before,
    .single-product div.product .product-price-wrapper .omnibus-price-message::before,
    .single-product div.product .product-price-wrapper [class*="omnibus"]::before {
        font-size: 13px !important;
        left: 8px !important;
    }
}

/*
 * Stock Status Styling - Single Product Page
 * Elegant info boxes for in-stock, low-in-stock, and out-of-stock
 */
.single-product div.product p.stock {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 14px 10px 40px !important;
    border-radius: 6px !important;
    margin: 15px 0 !important;
    position: relative !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    border: 1px solid !important;
}

/* Icon before stock status */
.single-product div.product p.stock::before {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

/* In Stock - Green */
.single-product div.product p.stock.in-stock {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    border-color: #66bb6a !important;
}

.single-product div.product p.stock.in-stock::before {
    content: "✓" !important;
    color: #2e7d32 !important;
    font-weight: 700 !important;
}

/* Low in Stock - Orange/Yellow */
.single-product div.product p.stock.low-in-stock {
    background: #fff3e0 !important;
    color: #e65100 !important;
    border-color: #fb8c00 !important;
}

.single-product div.product p.stock.low-in-stock::before {
    content: "⚠" !important;
    color: #e65100 !important;
    font-weight: 700 !important;
}

/* Out of Stock - Red */
.single-product div.product p.stock.out-of-stock {
    background: #ffebee !important;
    color: #c62828 !important;
    border-color: #e57373 !important;
}

.single-product div.product p.stock.out-of-stock::before {
    content: "✕" !important;
    color: #c62828 !important;
    font-weight: 700 !important;
}

/* On Backorder */
.single-product div.product p.stock.available-on-backorder {
    background: #e3f2fd !important;
    color: #1565c0 !important;
    border-color: #42a5f5 !important;
}

.single-product div.product p.stock.available-on-backorder::before {
    content: "⟳" !important;
    color: #1565c0 !important;
    font-weight: 700 !important;
}

/* Responsive - Stock Status */
@media (max-width: 768px) {
    .single-product div.product p.stock {
        font-size: 13px !important;
        padding: 9px 12px 9px 36px !important;
    }

    .single-product div.product p.stock::before {
        font-size: 18px !important;
        left: 12px !important;
    }
}

@media (max-width: 480px) {
    .single-product div.product p.stock {
        font-size: 12px !important;
        padding: 8px 10px 8px 32px !important;
    }

    .single-product div.product p.stock::before {
        font-size: 16px !important;
        left: 10px !important;
    }
}

/*
 * WhatsApp Icon in Footer - Contact Section
 */
.footer-whatsapp-link {
    margin-right: 8px;
    color: #25D366;
    text-decoration: none !important;
    display: inline-block;
    vertical-align: middle;
}

.footer-whatsapp-link:hover {
    text-decoration: none !important;
    color: #25D366;
    cursor: pointer;
}

.footer-whatsapp-link svg {
    vertical-align: middle;
}

/*
 * Product Condition Badges
 * New/Used/NOS/Serviceable/Damaged badges for product cards and single product pages
 */

/* Single Product Page - Condition Badge */
.product-condition-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1;
}

.product-condition-badge .condition-label {
    font-weight: 500;
    opacity: 0.9;
}

.product-condition-badge .condition-value {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Product Card - Condition Badge */
.product-card-condition-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* NEW - Green */
.product-condition-new,
.product-card-condition-new {
    background: #e8f5e9;
    color: #2e7d32;
    border: 2px solid #66bb6a;
}

.product-card-condition-new {
    background: #2e7d32;
    color: white;
    border: none;
}

/* USED - Blue */
.product-condition-used,
.product-card-condition-used {
    background: #e3f2fd;
    color: #1565c0;
    border: 2px solid #42a5f5;
}

.product-card-condition-used {
    background: #1565c0;
    color: white;
    border: none;
}

/* NOS - Orange/Gold */
.product-condition-nos,
.product-card-condition-nos {
    background: #fff3e0;
    color: #e65100;
    border: 2px solid #fb8c00;
}

.product-card-condition-nos {
    background: #fb8c00;
    color: white;
    border: none;
}

/* SERVICEABLE - Yellow/Amber */
.product-condition-serviceable,
.product-card-condition-serviceable {
    background: #fffde7;
    color: #f57f17;
    border: 2px solid #fdd835;
}

.product-card-condition-serviceable {
    background: #f9a825;
    color: white;
    border: none;
}

/* DAMAGED - Red */
.product-condition-damaged,
.product-card-condition-damaged {
    background: #ffebee;
    color: #c62828;
    border: 2px solid #e57373;
}

.product-card-condition-damaged {
    background: #c62828;
    color: white;
    border: none;
}

/* Ensure product-thumb has position relative for absolute positioning */
.product-thumb {
    overflow: hidden;
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-condition-badge {
        font-size: 13px;
        padding: 7px 12px;
    }

    .product-card-condition-badge {
        font-size: 10px;
        padding: 4px 8px;
        top: 12px;
        left: 12px;
    }
}

@media (max-width: 480px) {
    .product-condition-badge {
        font-size: 12px;
        padding: 6px 10px;
    }

    .product-card-condition-badge {
        font-size: 9px;
        padding: 3px 7px;
        top: 10px;
        left: 10px;
    }
}

/* Fix: ensure banner h4 text is blue */
.category-banner .banner-link .banner-overlay h4 {
    color: var(--color-primary, #1e88e5) !important;
}

.category-banner .banner-link:hover .banner-overlay h4 {
    color: var(--color-primary-dark, #1565c0) !important;
}

/* Fix grid layout with banner-link */
.category-banner {
    height: 200px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.banner-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.banner-link .banner-container {
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.banner-link .banner-container img {
    height: 100%;
    flex: 1;
    object-fit: cover;
}