/**
 * 2007-2025 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 *  @author    PrestaShop SA <contact@prestashop.com>
 *  @copyright 2007-2025 PrestaShop SA
 *  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 *  International Registered Trademark & Property of PrestaShop SA
 *
 * Don't forget to prefix your containers with your own identifier
 * to avoid any conflicts with others containers.
 */

/**
 * "Shop by brand" strip shown at the bottom of each top-level mega-menu
 * dropdown. Auto-scrolls slowly, pauses on hover/focus, and exposes small
 * previous/next arrows. See views/js/front.js for the behaviour.
 */

.content-with-sidebar {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "sidebar main"
        "sidebar brand";
    min-height: 600px;
    max-width: 100%;
    margin: 0 auto;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

#category-sidebar {
    grid-area: sidebar;
    height: 100%;        /* fills the full row-span height */
}

/* Sidebar navigation */
.sidebar-nav {
    width: 320px;
    border-right: 1px solid #e0e0e0;
}

.category-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sidebar-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#category-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    padding: 11px 20px;
    color: #444;
    text-decoration: none;
    border-bottom: 1px solid rgba(224,224,224,0.5);
    transition: all 0.3s;
    position: relative;
}

#category-sidebar .sidebar-item.active {
    margin-left: 0 !important;
    border-left: 11px solid #62B144;
}

#category-sidebar .sidebar-item.active a {
    color: #62B144 !important;
}

.content-with-sidebar .category-header .title
{
    margin-top: 5px;
    font-size: 21px;
    line-height: 28px;
    color: #232323;
    font-weight: 700;
}

.content-with-sidebar .category-header .see-all-link
{
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    padding: 0 !important;
}

.content-with-sidebar .category-header ul
{
    margin-top: 25px;
}

.content-with-sidebar .category-header ul li a
{
    font-size: 14px;
    font-weight: normal;
}

.nav-icon {
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.nav-label {
    flex: 1;
    font-weight: 500;
}


/* ================= Brand slider ================= */
.menu-brand-strip {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 32px;
    min-width: 0;
    overflow: hidden;
}

.menu-brand-strip--static {
    /* 8 brands or fewer: front.js skips the slider entirely for these, so
       there is no scrolling, no forced item width, and no room needed for
       arrows - just let the row (and its viewport/track) size and wrap
       naturally around the logos at their natural size. */
    padding-left: 12px;
    padding-right: 12px;
}

.menu-brand-strip--static .menu-brand-strip__viewport {
    overflow: visible;
}

.menu-brand-strip--static .menu-brand-strip__track {
    width: auto;
    flex-wrap: wrap;
    will-change: auto;
}

.menu-brand-strip--static .menu-brand-strip__item {
    flex: 0 0 auto;
}

.menu-brand-strip__viewport {
    flex: 1 1 auto;
    min-width: 0;
    /* The track is moved with a CSS transform (see front.js), not native
       scrolling, so this just needs to clip it - no scrollbar to hide. */
    overflow: hidden;
}

.menu-brand-strip__track {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    will-change: transform;
}

.menu-brand-strip__item {
    flex: 0 0 auto;
}

.menu-brand-strip__link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.menu-brand-strip__link:hover,
.menu-brand-strip__link:focus {
    border-color: #bdbdbd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.menu-brand-strip__link img {
    display: block;
    max-width: 92px;
    height: auto;
    object-fit: contain;
}

.menu-brand-strip__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a7a7a7;
    cursor: pointer;
    transition: color 0.2s ease;
}

.menu-brand-strip__arrow svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.menu-brand-strip__arrow:hover,
.menu-brand-strip__arrow:focus {
    color: #6d6d6d;
}

.menu-brand-strip__arrow[hidden] {
    display: none;
}