/* --- GLOBAL RESETS & STYLES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@media (max-width: 767px) {
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.35rem !important; }
    h3 { font-size: 1.15rem !important; }
    h4 { font-size: 1rem !important; }
    p, li, a { font-size: 0.95rem; }
    .section-title { font-size: 1.3rem !important; }
    .section-subtitle { font-size: 0.9rem !important; }
}
body {
    background-color: #fcfcfc;
    color: #333;
    line-height: 1.6;
}
a {
    text-decoration: none;
    color: inherit;
}
.container {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
}
.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 700;
}
.section-title span {
    color: #B30006;
}
.section-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: #666;
    font-size: 0.95rem;
}
.red-btn {
    background-color: #B30006 !important;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease;
}
.red-btn:hover {
    background-color: #8a0004;
}

/* --- HEADER & NAVIGATION --- */
header {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}
.logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #B30006;
}
nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}
nav ul li a:hover,
nav ul li a.active { 
    color: #B30006; 
} 



/* ==========================================================================
       DESKTOP NAVIGATION & MEGA DROPDOWN (768px and up)
       ========================================================================== */
    @media (min-width: 768px) {
      nav {
        height: 100%;
      }
      nav > ul {
        display: flex;
        list-style: none;
        height: 100%;
        align-items: center;
      }
      
      /* Main Navigation Parent Link items */
      .nav-item {
        position: static; /* Vital constraint: allows full width dropdown container relative to header layout */
        height: 100%;
        display: flex;
        align-items: center;
      }
      .nav-link {
        font-size: 0.85rem;
        color: #333333;
        text-decoration: none;
        padding: 0 0.8rem;
        font-weight: bold;
        height: 100%;
        display: flex;
        align-items: center;
        border-bottom: 3px solid transparent;
        transition: color 0.2s, border-color 0.2s;
      }
      .nav-link:hover, .nav-link.active {
        color: #cc0000;
        border-bottom-color: #cc0000;
      }

      /* --- FULL VIEW MEGA MENU SUBMENU --- */
      .mega-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        border-bottom: 2px solid #cc0000;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        padding: 2rem 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
      }
      
      /* Hover interaction engine */
      .nav-item:hover .mega-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      /* Submenu Internal Structure (Grid format) */
      .mega-dropdown-grid {
        display: grid;
        grid-template-cols: repeat(4, 1fr); /* Split inside panel symmetrically into 4 columns */
        gap: 1.5rem;
      }
      .mega-column-title {
        font-size: 0.85rem;
        color: #cc0000;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 0.4rem;
      }
      .mega-column-list {
        list-style: none;
      }
      .mega-column-list li {
        margin-bottom: 0.5rem;
      }
      .mega-column-list a {
        font-size: 0.8rem;
        color: #555555;
        text-decoration: none;
        transition: color 0.15s ease;
      }
      .mega-column-list a:hover {
        color: #cc0000;
        text-shadow: 0.1px 0px #cc0000;
      }
    }

    /* ==========================================================================
       MOBILE RESPONSIVE NAVIGATION MODULE (< 768px Mobile Fallback)
       ========================================================================== */
    @media (max-width: 767px) {
      .menu-toggle-btn {
        display: block; /* Reveal mobile collapse structural trigger */
        order: 2;
      }
      .lang-selector {
        order: 3;
        margin-left: auto;
        margin-right: 1rem;
      }
      .logo {
        order: 1;
      }

      /* Absolute overlay positioning canvas drawer */
      nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        border-top: 1px solid #eeeeee;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        display: none; /* Controlled runtime dynamic activation toggle via JS class toggle injection */
        max-height: 80vh;
        overflow-y: auto;
      }
      nav.show-mobile-menu {
        display: block;
      }

      nav > ul {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 0.5rem 0;
      }
      .nav-item {
        width: 100%;
        border-bottom: 1px solid #f9f9f9;
      }
      .nav-link {
        display: block;
        padding: 0.85rem 1rem;
        font-size: 0.9rem;
        color: #333333;
        text-decoration: none;
        font-weight: bold;
      }
      .nav-link.active, .nav-link:hover {
        color: #cc0000;
        background-color: #fff9f9;
      }

      /* Stack full view categories column panels cleanly vertically flat into accordion drawers on mobile devices */
      .mega-dropdown {
        background-color: #fafafa;
        padding: 0.5rem 1.5rem 1rem 1.5rem;
        display: none; /* Toggled using interactive click routines natively inside smaller view screens if necessary */
      }
      /* Auto display submenu modules expanded in a stacked layout style for rapid scroll access on small screen footprints */
      .nav-item:hover .mega-dropdown,
      .nav-link:focus + .mega-dropdown {
        display: block;
      }
      .mega-dropdown-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .mega-column-title {
        font-size: 0.8rem;
        color: #cc0000;
        font-weight: bold;
        margin-top: 0.5rem;
        margin-bottom: 0.35rem;
      }
      .mega-column-list li {
        padding: 0.25rem 0;
      }
    }

/* Language dropdown element wrapper */
    .lang-selector {
      font-size: 0.85rem;
      color: #333333;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    .lang-caret {
      font-size: 0.75rem;
      color: #666666;
    }
	.wpml-ls-legacy-dropdown {
        width: 8.5em;
        max-width: 100%;
    }
    /* Mobile Interaction Toggle UI Button (Hidden by default on Desktop) */
    .menu-toggle-btn {
      display: none;
      background: none;
      border: none;
      font-size: 1.35rem;
      color: #333333;
      cursor: pointer;
    }

/* --- HERO BANNER --- */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}
.hero h1 {
    font-size: 2.8rem;
    font-weight: bold;
    max-width: 900px;
    line-height: 1.3;
}

.hero img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* --- INTRO SECTION & STATS --- */
.intro-section {
    padding: 60px 0;
    background-color: #fff;
}
.intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
}
.intro-text h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}
.intro-text h2 span { color: #B30006; }
.intro-text p {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 15px;
}
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.stat-box {
    border-left: 3px solid #ffccd0;
    padding-left: 15px;
}
.stat-number {
    font-size: 2.2rem;
    font-weight: bold;
    color: #B30006;
    line-height: 1.1;
}
.stat-label {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
}
.stat-unit {
    font-size: 1.2rem;
}

/* --- PRODUCT CATEGORIES --- */
.products-section { padding: 60px 0; }
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.product-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.product-card img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}
.product-info { padding: 25px; }
.product-info h3 {
    color: #B30006;
    font-size: 1.4rem;
    margin-bottom: 15px;
}
.product-info p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    height: 65px;
    overflow: hidden;
}
.read-more {
    color: #B30006;
    font-weight: bold;
    font-size: 0.85rem;
}

/* --- SLIDER SECTIONS --- */
.slider-section {
    padding: 60px 0;
    background-color: #fff;
}
.socks-bg {
    background-color: #fcfcfc;
}
.slider-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    gap: 15px;
}
.slider-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}
.slider-item {
    text-align: center;
}
.slider-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 4px;
}
.slider-item p {
    font-size: 0.8rem;
    color: #B30006;
    margin-top: 10px;
    font-weight: 500;
}
.arrow-btn {
    background: #f0f0f0;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: 0.3s;
}
.arrow-btn:hover { background: #B30006; color: white; }

/* --- VIDEO BANNER --- */
.video-banner {
    /* Path links out of css/ folder up into images/ folder */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/video-bg.jpg') center/cover no-repeat;
    height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 20px;
}
.video-banner h2 {
    font-size: 2.2rem;
    max-width: 800px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}
@media (max-width: 768px) {
    .video-banner h2 {
        font-size: 1.72rem;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .video-banner h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
}
.play-btn {
    font-size: 3.5rem;
    color: white;
    cursor: pointer;
    transition: transform 0.3s;
}
.play-btn:hover { transform: scale(1.1); }

/* --- INFRASTRUCTURE & VISITS --- */
.infra-section { padding: 60px 0; }
.infra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.infra-title {
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: bold;
}
.infra-title span { color: #B30006; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.gallery-grid img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
}
.visit-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.visit-images img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 4px;
}

/* --- CUSTOMERS & CERTIFICATIONS --- */
.trust-section {
    padding: 50px 0;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.trust-col:first-child {
    border-right:1px solid #f0f0f0;
}

.trust-col h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
}
.trust-col h3 span { color: #B30006; }
.brands-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: center;
    justify-items: center;
}
.brands-logos img {
    max-width: 110px;
    max-height: 50px;
    object-fit: contain;
}
.cert-logos {
    display: flex;
    gap: 35px;
    align-items: center;
}
.cert-logos img { 
    max-height: 65px; 
    object-fit: contain;
}

/* --- CONTACT US --- */
.contact-section { padding: 60px 0; }
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
}
.contact-form h2 {
    font-size: 2rem;
    color: #B30006;
    margin-bottom: 30px;
}
.form-group { margin-bottom: 15px; }
.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 4px;
    outline: none;
    font-size: 0.9rem;
}
.contact-info-box {
    background-color: #fff;
    padding: 10px;
    font-size: 0.85rem;
    color: #555;
}
.contact-info-box h4 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}
.contact-info-box p { margin-bottom: 8px; line-height: 1.5; }
.fax-spacing { margin-top: 20px !important; }

/* --- FOOTER --- */
footer {
    background-color: #22252A;
    color: #A4A6A9;
    padding: 60px 0 20px 0;
    font-size: 0.85rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}
.footer-col h4 {
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-col ul {
    list-style: none;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a:hover { color: #fff; }
.footer-contact-item { margin-bottom: 10px; }
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.social-icons a {
    color: #A4A6A9;
    font-size: 1.1rem;
    margin-left: 15px;
}
.social-icons a:hover { color: white; }

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 992px) {
    .intro-grid, .product-grid, .infra-grid, .trust-grid, .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .slider-container { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    nav, .lang-selector { display: flex; }
    .hero h1 { font-size: 1.8rem; }
    .slider-container { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
    .lang-selector {
    display: flex !important;
    order: 3;
    margin-left: auto;
}
.lang-selector .wpml-ls-native {
    display: none;
}
}

/* Top Breadcrumb Navigation */
    .breadcrumb-wrapper {
      background-color: #ffffff;
      width: 100%;
      border-bottom: 1px solid #eaeaea;
      margin-bottom: 10px;
    }
    .breadcrumb {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0.75rem 1rem;
      font-size: 0.75rem;
      color: #666666;
    }
    .breadcrumb a {
      color: #666666;
      text-decoration: none;
    }
    .breadcrumb a:hover {
      text-decoration: underline;
    }
    .breadcrumb .current {
      color: #cc0000;
    }


    /* Main Section Container (Mobile-First Stacking) */
    .product-section {
      background-color: #ffffff;
      max-width: 1200px;
      width: 100%;
      padding: 0;
      border-radius: 0;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin-top: 2rem;
    }

    /* Left Side: Media Display Components */
    .gallery-panel {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .main-viewport {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #eeeeee;
      padding: 0;
      background-color: #ffffff;
      width: 100%;
      aspect-ratio: 502 / 351;
      overflow: hidden;
    }
    .main-viewport img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .thumbnails-strip {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .thumbnails-viewport {
      overflow: hidden;
      flex: 1 1 auto;
      min-width: 0;
    }
    .thumbnails-track {
      display: flex;
      gap: 0.5rem;
      transition: transform 0.3s ease;
    }
    .thumb-control {
      background: none;
      border: 1px solid #dddddd;
      padding: 0.25rem;
      cursor: pointer;
      outline: none;
      transition: border-color 0.2s ease;
      flex: 0 0 calc(25% - 0.375rem);
      box-sizing: border-box;
    }
    .thumb-control img {
      width: 100%;
      height: auto;
      aspect-ratio: 1.15;
      object-fit: cover;
      display: block;
    }
    .thumb-control.active, .thumb-control:hover {
      border-color: #cc0000;
    }
    .thumb-nav {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid #dddddd;
      background: #ffffff;
      color: #cc0000;
      font-size: 1rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.2s ease, opacity 0.2s ease;
    }
    .thumb-nav:hover {
      border-color: #cc0000;
    }
    .thumb-nav:disabled {
      opacity: 0.3;
      cursor: default;
    }
    .thumb-nav[hidden] {
      display: none;
    }

    /* Right Side: Data Metrics & Copy */
    .content-panel {
      width: 100%;
    }
    .title-text {
      font-size: 1.3rem;
      color: #cc0000;
      font-weight: bold;
      margin-bottom: 0.75rem;
      line-height: 1.3;
    }
    .metadata-line {
      font-size: 0.75rem;
      color: #555555;
      margin-bottom: 1rem;
    }
    .metadata-line strong {
      color: #333333;
    }
    .metadata-line .highlight-red {
      color: #cc0000;
    }
    .metadata-spacer {
      margin: 0 0.4rem;
      color: #cccccc;
    }
    .description-copy {
      font-size: 0.8rem;
      color: #444444;
      line-height: 1.6;
      margin-bottom: 1.5rem;
    }

    /* Terms Context Highlight Card */
    .terms-box {
      background-color: #fff9f9;
      border: 1px solid #ffebeb;
      padding: 1rem;
      margin-bottom: 1.5rem;
    }
    .subheading-title {
      font-size: 0.85rem;
      color: #cc0000;
      font-weight: bold;
      margin-bottom: 0.75rem;
    }
    .terms-records, .specs-records {
      list-style: none;
    }
    .terms-records li {
      font-size: 0.8rem;
      margin-bottom: 0.5rem;
      color: #333333;
    }
    .terms-records li:last-child {
      margin-bottom: 0;
    }
    .terms-records .row-label {
      display: inline-block;
      width: 110px;
      color: #555555;
    }
    .terms-records .row-val {
      color: #cc0000;
    }

    /* Details List Spec Box */
    .specs-box {
      margin-bottom: 1.75rem;
    }
    .specs-records li {
      font-size: 0.8rem;
      margin-bottom: 0.5rem;
      color: #333333;
    }
    .specs-records li:last-child {
      margin-bottom: 0;
    }
    .specs-records .bold-marker {
      font-weight: bold;
    }

    /* Action Trigger Link Element */
    .enquiry-action-btn {
      background-color: #8a1414;
      color: #ffffff;
      border: none;
      padding: 0.75rem 2rem;
      font-size: 0.9rem;
      font-weight: bold;
      cursor: pointer;
      border-radius: 2px;
      transition: background-color 0.2s ease;
      width: 100%;
    }
    .enquiry-action-btn:hover {
      background-color: #6e1010;
    }

    /* --- RESPONSIVE LAYOUT TRANSLATIONS --- */
    @media (min-width: 600px) {
      .terms-records .row-label {
        width: 130px;
      }
      .enquiry-action-btn {
        width: auto;
      }
    }

    @media (min-width: 768px) {
      .product-section {
        flex-direction: row;
        padding: 0;
      }
      .gallery-panel {
        width: 42%;
        flex-shrink: 0;
      }
      .content-panel {
        width: 58%;
      }
      .title-text {
        font-size: 1.45rem;
      }
    }

    /* ==========================================================================
       SECTION 2: DESCRIPTION RUNTIME TABS INTERFACE
       ========================================================================== */

    .description-tabs-card {
        margin-top: 40px;
    }

    .tabs-navigation-strip {
      display: flex;
      border-bottom: 1px solid #dddddd;
      gap: 1.5rem;
      margin-bottom: 1.25rem;
    }
    .tab-trigger-item {
      font-size: 0.85rem;
      padding-bottom: 0.5rem;
      color: #555555;
      cursor: pointer;
      white-space: nowrap;
      position: relative;
    }
    .tab-trigger-item.active {
      color: #cc0000;
      font-weight: bold;
    }
    .tab-trigger-item.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #cc0000;
    }
    .tabs-content-display p {
      font-size: 0.85rem;
      color: #444444;
      line-height: 1.7;
      margin-bottom: 1.25rem;
    }
    .tabs-content-display p:last-child {
      margin-bottom: 0;
    }

    /* ==========================================================================
       SECTION 2: RELATED PRODUCTS MODULE (Dynamic Product Grid Showcase)
       ========================================================================== */

    .related-products {
        margin-top: 40px;
    }

    .related-section-title {
      font-size: 1.2rem;
      color: #cc0000;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }
    .related-section-intro {
      font-size: 0.825rem;
      color: #555555;
      line-height: 1.5;
      margin-bottom: 1.5rem;
    }
    .showcase-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
    }
    .product-showcase-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      text-decoration: none;
    }
    .item-media-frame {
      width: 128px;
      height: 149px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #eeeeee;
      padding: 0.5rem;
      background-color: #ffffff;
      box-sizing: border-box;
    }
    .item-media-frame img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .item-caption-text {
      font-size: 0.8rem;
      color: #cc0000;
      margin-top: 0.75rem;
      line-height: 1.4;
      padding: 0 0.25rem;
    }
    .item-caption-text:hover {
      text-decoration: underline;
    }

    /* ==========================================================================
       Responsive Breakpoints 
       ========================================================================== */
    
    /* Small Tablets and Mid-range Displays */
    @media (min-width: 540px) {
      .showcase-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
    }

    /* Standard Desktops / Wide Viewports */
    @media (min-width: 768px) {
      .card-panel.related-products {
        padding: 2rem;
      }
      .showcase-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* Snaps fluidly to a pixel-perfect 6-column grid */
        gap: 1rem;
      }
      .related-section-title {
        font-size: 1.25rem;
      }
      .item-caption-text {
        font-size: 0.8rem;
      }
    }

    /* --- Hero Banner Section --- */
.hero-banner {
    width: 100%;
    height: auto;
    max-height: 480px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Main Intro Text Styling --- */
.intro-section {
    padding: 50px 0 35px 0;
}

.intro-section h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.intro-section p {
    margin-bottom: 20px;
    color: #555555;
    text-align: justify;
}

.cta-link-wrapper {
    font-weight: 600;
    margin-top: 25px;
}

.click-here-link {
    color: #e52d2d;
    text-decoration: underline;
}

/* --- Category Cards Grid Section --- */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding-bottom: 60px;
}

.category-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.card-img-holder {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f0f0f0;
}

.card-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-card:hover .card-img-holder img {
    transform: scale(1.04);
}

.card-content {
    padding: 15px 0;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.card-content p {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden; /* Multi-line clamping to match text balance */
}

.read-more {
    font-size: 0.9rem;
    color: #e52d2d;
    text-decoration: none;
    font-weight: 600;
}

/* --- Popular Products Grid Section --- */
.popular-products-section {
    background-color: #f9f9f9;
    padding: 60px 0;
    border-top: 1px solid #eaeaea;
}

.popular-products-section h2 {
    font-size: 2.2rem;
    text-align: center;
    font-weight: 700;
    margin-bottom: 15px;
}

.section-subtitle {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 45px auto;
    color: #666666;
    font-size: 0.95rem;
}

/* 5 Column layout setup for perfect item grid scaling */
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    row-gap: 35px;
}

.product-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.product-img-box {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    transition: box-shadow 0.2s ease;
}

.product-item:hover .product-img-box {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.product-img-box img {
    max-width: 100%;
    height: auto;
    display: block;
}

.product-name {
    font-size: 0.88rem;
    line-height: 1.4;
    color: #ba2121; /* Slightly structural reddish hue matching text labels */
    font-weight: 500;
    padding: 0 5px;
}


/* --- Responsive Media Queries --- */

/* Responsive break for tablets and landscape devices */
@media screen and (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive break for mobile screens */
@media screen and (max-width: 768px) {
    .intro-section h1, .popular-products-section h2 {
        font-size: 1.8rem;
    }
    
    .intro-section p {
        text-align: left;
    }

    .categories-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Extra small mobile adjustments */
@media screen and (max-width: 480px) {
    /* Keep two products per row on phones. A single 280px column meant a
       24-product category was an extremely long scroll, and shoppers expect a
       two-up grid on mobile. The tile keeps its fixed aspect ratio, so the
       images stay uniform at this size too. */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        row-gap: 22px;
        max-width: none;
        margin: 0;
    }
    .products-grid .product-name {
        font-size: 0.78rem;
        line-height: 1.35;
    }
}
/* ============================================
   Basic functional nav dropdown (quick fix)
   TODO: UI team to restyle to match mega-dropdown design
   ============================================ */
nav[role="navigation"] ul li {
    position: relative;
}

nav[role="navigation"] ul li.menu-item-has-children > a::after {
    content: " \25BE";
    font-size: 0.7em;
}

nav[role="navigation"] ul li .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    z-index: 999;
    padding: 0.5rem 0;
    list-style: none;
    margin: 0;
}

nav[role="navigation"] ul li:hover > .sub-menu {
    display: block;
}

nav[role="navigation"] ul li .sub-menu li {
    display: block;
}

nav[role="navigation"] ul li .sub-menu li a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: #333333;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: normal;
    white-space: nowrap;
}

nav[role="navigation"] ul li .sub-menu li a:hover {
    background-color: #f7f7f7;
    color: #cc0000;
}
@media (max-width: 921px) {
    .brands-logos {
        grid-template-columns: repeat(2, 1fr);
    }
    .cert-logos {
        flex-wrap: wrap;
        justify-content: center;
    }
}
.header-actions {
    display: contents;
}

@media (max-width: 991px) {
    .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
}
@media (max-width: 767px) {
    .product-grid {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .product-grid .product-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
    .product-grid .product-card img {
        width: 100%;
        height: auto;
    }
    .product-grid .product-info p {
        font-size: 0.85rem;
        max-height: 100px;
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    .slider-container {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .slider-container .slider-item {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
    .slider-container .slider-item img {
        width: 100%;
        height: auto;
    }
    .slider-wrapper .arrow-btn {
        display: none;
    }
}

/* =====================================================================
   Homepage product sliders (Popular Socks / Bottle Sweaters)
   The markup already flags `.with-slider` when there are more than 4
   products; previously nothing implemented it, so extra items simply
   wrapped onto a second row and the arrows did nothing.
   Show exactly 4 at a time and page through the rest.
   ===================================================================== */
.slider-wrapper.with-slider .slider-container {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;      /* IE/Edge */
    scrollbar-width: none;         /* Firefox */
}
.slider-wrapper.with-slider .slider-container::-webkit-scrollbar {
    display: none;                 /* Chrome/Safari */
}
.slider-wrapper.with-slider .slider-container > .slider-item {
    flex: 0 0 calc((100% - 60px) / 4);   /* 4 visible, 3 × 20px gaps */
    max-width: calc((100% - 60px) / 4);
    scroll-snap-align: start;
}
.slider-wrapper .arrow-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #B30006;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.slider-wrapper .arrow-btn:hover:not(:disabled) {
    border-color: #B30006;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.slider-wrapper .arrow-btn:disabled {
    opacity: .35;
    cursor: default;
}
/* if there are 4 or fewer products there is nothing to page through */
.slider-wrapper:not(.with-slider) .arrow-btn {
    display: none;
}
@media (max-width: 991px) {
    .slider-wrapper.with-slider .slider-container > .slider-item {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}
@media (max-width: 767px) {
    .slider-wrapper.with-slider .slider-container > .slider-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =====================================================================
   Category page product grid ("Our Most Popular ...") — uniform tiles.
   The structure reference only looked even because every placeholder was
   exactly 220x260; with real photos of mixed ratios the boxes rendered at
   different heights. Lock the tile to the reference proportion and let the
   photo fit inside it (contain = never stretch, never crop).
   ===================================================================== */
.products-grid .product-img-box {
    width: 100%;
    aspect-ratio: 220 / 260;
    overflow: hidden;
    box-sizing: border-box;
}
.products-grid .product-img-box img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
/* keep tiles the same height in a row so the captions line up */
.products-grid .product-item {
    height: 100%;
}
.products-grid .product-item > a.product-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* same treatment for the child-category cards above the grid */
.categories-grid .card-img-holder {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.categories-grid .card-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =====================================================================
   Mobile fixes found in the responsive audit.
   ===================================================================== */
@media (max-width: 767px) {
    /* The four product tabs (Detailed Description / Size Chart / How to
       Measure / FAQ) total ~393px and were forcing the whole page to scroll
       sideways inside a 319px column. Let the strip scroll on its own instead. */
    .tabs-navigation-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 1.1rem;
        scrollbar-width: none;
    }
    .tabs-navigation-strip::-webkit-scrollbar { display: none; }
    .tabs-navigation-strip .tab-trigger-item { flex: 0 0 auto; }

    /* Tables pasted into FAQ and product tab content (size charts) are the
       other classic source of sideways scroll — keep them inside their own
       scroller rather than stretching the page. */
    .tabs-content-display table,
    .ck-faq-page table,
    .u-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Long product references / URLs shouldn't push the layout out. */
    .description-copy, .tabs-content-display, .u-body p {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Give the language links a comfortable tap height. */
    .lang-selector a, .lang-selector li a { min-height: 40px; display: flex; align-items: center; }
}

/* =====================================================================
   Narrow-phone fix (found at 320px): classic CSS grid blowout.
   `grid-template-columns: 1fr` means minmax(auto, 1fr), so a column can
   never shrink below its content's minimum width. The two-column
   .stats-grid plus its 30px gap had a minimum wider than the 272px
   container, which pushed .intro-text to 302px inside a 272px grid and
   made the whole homepage scroll sideways by 6px.
   minmax(0, 1fr) behaves like 1fr but permits the column to shrink.
   ===================================================================== */
@media (max-width: 767px) {
    .intro-grid,
    .product-grid,
    .infra-grid,
    .trust-grid,
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .stats-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 18px;
    }
}
@media (max-width: 400px) {
    /* on the narrowest phones give the stats a single column so the
       labels are not squeezed to two or three characters per line */
    .stats-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}