/* CSS Variables for Consistent Styling */
:root {
    --primary-orange: #ff8a00;
    /* CTA button color */
    --primary-blue: #0069d9;
    /* Darker, modern blue for accents */
    --light-bg: #f5f6f8;
    /* Soft page background */
    --white-panel: #ffffff;
    /* Content panel background */
    --border-color: #e0e0e0;
    --text-dark: #333333;
    --text-medium: #6c757d;
    --category-bg: #fcfcfc;
    --in-stock-color: #28a745;
}

/* --- BASE STYLES & ENHANCEMENTS --- */
body {
    /* font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--light-bg);
    color: var(--text-dark);
    font-size: 14px; */
}

a {
    text-decoration: none;
    color: var(--primary-blue);
    transition: color 0.2s;
}

a:hover {
    color: var(--primary-orange);
}

button {
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* Smoothing enhancement: subtle shadow on main content blocks */
.product-image-box,
.details-panel,
.pricing-box,
.category-sidebar {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}


/* --- 1. HEADER / NAVBAR --- */
.header {
    background-color: var(--white-panel);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}

.logo span {
    color: var(--primary-blue);
}

.search-bar-container {
    flex-grow: 1;
    max-width: 400px;
    margin: 0 40px;
    position: relative;
}

.search-bar-container input {
    width: 100%;
    padding: 8px 35px 8px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--white-panel);
}

.search-bar-container i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-medium);
    cursor: pointer;
}

.header-actions a {
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 500;
    margin-left: 10px;
    color: var(--text-dark);
}

.header-actions .quote-btn {
    background-color: var(--primary-orange);
    color: var(--white-panel);
}

/* --- 2. MAIN LAYOUT CONTAINER --- */
.page-layout {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 20px;
    gap: 20px;
}

/* --- 2.1 LEFT CATEGORY SIDEBAR (Accordion) --- */
.category-sidebar {
    width: 250px;
    background-color: var(--white-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px 0;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 0 20px 10px 20px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
}

.category-tabs {
    display: flex;
    padding: 10px 20px 0;
}

/* Category Tabs (Oil & Gas / Mining) */
.category-tabs button {
    background: none;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-medium);
    border-bottom: 2px solid transparent;
    margin-right: 10px;
    font-size: 13px;
}

.category-tabs button.active {
    color: var(--primary-orange);
    border-bottom-color: var(--primary-orange);
    font-weight: 600;
}

.view-all-btn {
    display: block;
    margin: 15px 20px;
    padding: 10px;
    text-align: center;
    background-color: var(--primary-orange);
    color: var(--white-panel);
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
}

.category-list-container {
    /* Container to hold switchable ULs */
    padding: 10px 0;
}

.category-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    /* Hidden by default, toggled by JS */
}

.category-menu.active {
    display: block;
}

.category-menu>li>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-weight: 500;
    color: var(--text-dark);
    border-bottom: 1px solid transparent;
    transition: background-color 0.2s;
}

.category-menu>li>a:hover {
    background-color: var(--light-bg);
}

.category-menu li.active>a {
    background-color: #fff6e6;
    /* Light orange background */
    color: var(--primary-orange);
    border-bottom-color: var(--border-color);
}

/* Submenu Styling for Accordion */
.category-menu li ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--white-panel);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.category-menu li ul a {
    display: block;
    padding: 7px 20px 7px 40px;
    /* Indent sub-items */
    color: var(--text-medium);
    font-size: 13px;
    transition: color 0.2s, background-color 0.2s;
}

.category-menu li ul a:hover {
    color: var(--primary-blue);
    background-color: var(--light-bg);
}

/* --- 2.2 MAIN PRODUCT CONTENT --- */
.main-product-content {
    flex-grow: 1;
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
}

/* Product Image & Thumbnails (Left Half) */
.product-visuals-col {
    flex: 1.2;
}

.product-image-box {
    background-color: var(--white-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-image-box .product-header-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.main-product-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    margin-bottom: 20px;
}

.image-counter {
    font-size: 12px;
    color: var(--text-medium);
    margin-bottom: 15px;
}

.thumbnails {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.thumbnails img {
    width: 70px;
    height: 70px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    object-fit: cover;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.thumbnails img.active-thumbnail {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px var(--primary-blue);
}

.image-caption {
    font-size: 12px;
    color: var(--text-medium);
    text-align: center;
}

/* Product Details (Right Half) */
.product-details-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.details-panel {
    /* Removed background/border/padding here to align title with content below */
    background-color: transparent;
    border: none;
    padding: 0;
}

.category-tag {
    background-color: var(--primary-blue);
    color: var(--white-panel);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
}

.product-title {
    font-size: 1.8em;
    font-weight: 700;
    margin: 10px 0 0 0;
    line-height: 1.2;
}

.model-number {
    color: var(--text-medium);
    margin-top: 5px;
}

.rating-stock {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.stars {
    color: #ffc107;
    font-size: 14px;
    margin-right: 10px;
}

.stock-tag {
    background-color: var(--in-stock-color);
    color: var(--white-panel);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Pricing Box */
.pricing-box {
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 8px;
    background-color: var(--white-panel);
}

.contact-for-pricing {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.price-note {
    font-size: 12px;
    color: var(--text-medium);
    margin-bottom: 15px;
}

.cta-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.cta-buttons button {
    padding: 10px 20px;
    border: 1px solid var(--primary-orange);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.request-quote-btn {
    background-color: var(--primary-orange);
    color: var(--white-panel);
    flex-grow: 1;
    border-color: var(--primary-orange);
}

.request-quote-btn:hover {
    background-color: #e57d00;
}

.add-to-cart-btn {
    background-color: var(--white-panel);
    color: var(--primary-orange);
    flex-grow: 1;
}

.add-to-cart-btn:hover {
    background-color: #fff6e6;
}

.guarantees {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.guarantees div {
    font-size: 12px;
    color: var(--text-medium);
}

.guarantees i {
    color: var(--in-stock-color);
    margin-bottom: 5px;
    font-size: 16px;
}

/* Info Tabs Container */
.info-tabs {
    background-color: var(--white-panel);
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
    display: flex;
    padding: 0 10px;
    /* Ensure shadow only applies to content panel */
    box-shadow: none;
}

.info-tabs button {
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-medium);
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.info-tabs button.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

/* Info Content Panels */
.product-info-content {
    background-color: var(--white-panel);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 25px;
    margin-top: -1px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

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

.tab-content-panel.active {
    display: block;
}

.tab-content-panel h4 {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 10px;
}

.tab-content-panel p,
.tab-content-panel ul,
.tab-content-panel li {
    color: var(--text-medium);
    line-height: 1.5;
    font-size: 14px;
}

.tab-content-panel ul {
    padding-left: 20px;
}

/* --- 3. RELATED PRODUCTS --- */
.related-products-section {
    max-width: 1400px;
    margin: 0 auto 50px auto;
    padding: 20px 40px;
}

.related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.related-header h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
}

.related-list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    /* Allow for scrollbar on desktop */
    -webkit-overflow-scrolling: touch;
    /* For smoother scrolling on iOS */
    scroll-snap-type: x mandatory;
}

.related-card {
    min-width: 250px;
    max-width: 250px;
    background-color: var(--white-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 15px;
    position: relative;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.related-card .stock-tag {
    position: absolute;
    top: 15px;
    right: 15px;
}

.related-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: var(--light-bg);
}

.related-card .title {
    font-weight: 600;
    font-size: 15px;
    margin: 5px 0;
    color: var(--text-dark);
}

.related-card .category {
    font-size: 11px;
    color: var(--primary-orange);
    margin-bottom: 5px;
    font-weight: 500;
}

.related-card .price-text {
    font-size: 14px;
    color: var(--primary-orange);
    font-weight: 600;
    margin: 10px 0;
}

.related-card .card-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.related-card .quote-btn {
    background-color: var(--primary-orange);
    color: var(--white-panel);
    padding: 8px;
    border-radius: 4px;
    flex-grow: 1;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.related-card .cart-icon {
    background-color: var(--white-panel);
    color: var(--primary-orange);
    border: 1px solid var(--primary-orange);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* --- RESPONSIVENESS (SMOOTHER EXPERIENCE) --- */
@media (max-width: 1100px) {

    .header {
        padding: 15px 20px;
    }

    .search-bar-container {
        display: none;
        /* Hide search bar on smaller screens for cleaner nav */
    }

    .page-layout {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    .category-sidebar {
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 10px 0;
        box-shadow: none;
        /* Remove shadow on mobile for full-width element */
    }

    .main-product-content {
        max-width: 100%;
        flex-direction: column;
        padding: 20px;
    }

    .product-visuals-col,
    .product-details-col {
        max-width: 100%;
        flex: none;
    }

    .product-image-box {
        padding: 15px;
    }

    .product-title {
        font-size: 1.5em;
    }

    .related-products-section {
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .header {
        flex-wrap: wrap;
    }

    .header-actions {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .header-actions a {
        margin: 0;
    }

    .header-actions .quote-btn {
        padding: 8px 10px;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .guarantees {
        flex-wrap: wrap;
        gap: 10px;
    }

    .guarantees div {
        flex-basis: 40%;
    }

    .related-products-section {
        padding: 10px;
    }
}