/* Skatells site-wide CSS overrides.
 * Layered ON TOP of the /static/webpack/ bundles in shared/header.php.
 * Keep this file small and purpose-specific. */

/* Pure-CSS hover dropdowns for the main nav.
 * Replaces the Bootstrap-3 data-hover="dropdown" JS plugin we don't load. */
.navbar-nav .nav-item.dropdown:hover > .dropdown-menu { display: block; }

/* Remove the visible gap between trigger and menu so the hover state
 * doesn't drop when the cursor crosses from <a> down into the menu. */
.navbar-nav .nav-item.dropdown > .dropdown-menu { margin-top: 0; }

/* <details>-based click-to-open dropdowns in the brand-catalog header band.
 * Hides the native disclosure triangle so the styled button looks the same
 * as the original Bootstrap-3 dropdown, and reveals .dropdown-menu when open. */
.brand-catalog details.dropdown > summary { list-style: none; cursor: pointer; }
.brand-catalog details.dropdown > summary::-webkit-details-marker { display: none; }
.brand-catalog details.dropdown[open] > .dropdown-menu { display: block; }

/* ── Homepage CSS slideshow (replaces Owl Carousel, no JS) ─────────────── */
.ss-input { display: none; }

.css-slideshow-wrap {
    position: relative;
    overflow: hidden;
    background: #111;
    user-select: none;
}
.css-slideshow {
    width: 100%;
    aspect-ratio: 1400 / 470;
    overflow: hidden;
}

/* Track: all 5 slides side-by-side, animates left for auto-play */
.ss-track {
    display: flex;
    width: 500%;
    height: 100%;
    animation: ss-autoplay 25s infinite;
}
.css-slide {
    width: 20%;
    flex-shrink: 0;
    height: 100%;
}
.css-slide a { display: block; width: 100%; height: 100%; }
.css-slide img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Auto-play: slide track left, hold 4.25s per slide, transition 0.75s */
@keyframes ss-autoplay {
    0%    { transform: translateX(0);      }  /* slide 1 */
    17%   { transform: translateX(0);      }
    20%   { transform: translateX(-20%);   }  /* → slide 2 */
    37%   { transform: translateX(-20%);   }
    40%   { transform: translateX(-40%);   }  /* → slide 3 */
    57%   { transform: translateX(-40%);   }
    60%   { transform: translateX(-60%);   }  /* → slide 4 */
    77%   { transform: translateX(-60%);   }
    80%   { transform: translateX(-80%);   }  /* → slide 5 */
    97%   { transform: translateX(-80%);   }
    100%  { transform: translateX(0);      }  /* → back to slide 1 */
}

/* Manual override: stop animation, slide to selected position */
#ss1:checked ~ .css-slideshow .ss-track { animation: none; transform: translateX(0);    transition: transform .5s ease; }
#ss2:checked ~ .css-slideshow .ss-track { animation: none; transform: translateX(-20%); transition: transform .5s ease; }
#ss3:checked ~ .css-slideshow .ss-track { animation: none; transform: translateX(-40%); transition: transform .5s ease; }
#ss4:checked ~ .css-slideshow .ss-track { animation: none; transform: translateX(-60%); transition: transform .5s ease; }
#ss5:checked ~ .css-slideshow .ss-track { animation: none; transform: translateX(-80%); transition: transform .5s ease; }

/* Arrows — shared styles */
.ss-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 1.4rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s;
    line-height: 1;
}
.ss-arrow:hover { background: rgba(0,0,0,.65); }
.ss-left  { left: 18px; }
.ss-right { right: 18px; }

/* Default arrows (auto-play mode — no radio checked) */
.ss-default-prev, .ss-default-next { display: flex; }

/* Hide defaults and show state arrows when a radio is checked */
#ss1:checked ~ .ss-default-prev, #ss1:checked ~ .ss-default-next,
#ss2:checked ~ .ss-default-prev, #ss2:checked ~ .ss-default-next,
#ss3:checked ~ .ss-default-prev, #ss3:checked ~ .ss-default-next,
#ss4:checked ~ .ss-default-prev, #ss4:checked ~ .ss-default-next,
#ss5:checked ~ .ss-default-prev, #ss5:checked ~ .ss-default-next { display: none; }

#ss1:checked ~ .ss-prev-1, #ss1:checked ~ .ss-next-1,
#ss2:checked ~ .ss-prev-2, #ss2:checked ~ .ss-next-2,
#ss3:checked ~ .ss-prev-3, #ss3:checked ~ .ss-next-3,
#ss4:checked ~ .ss-prev-4, #ss4:checked ~ .ss-next-4,
#ss5:checked ~ .ss-prev-5, #ss5:checked ~ .ss-next-5 { display: flex; }

@media (max-width: 767px) {
    .css-slideshow { aspect-ratio: 480 / 540; }
    .ss-arrow { width: 38px; height: 38px; font-size: 1.1rem; }
}

/* ── Category listing page ─────────────────────────────────────────────── */

h1.category-page-title { margin: 1.5rem 0 .75rem; font-size: 2rem; }

/* Hide Filters — CSS checkbox trick, no JS */
.filter-toggle-input { display: none; }

/* Button text: "Hide Filters" by default, "Show Filters" when checked */
.filter-toggle-input:not(:checked) ~ .row-catalog-toolbar .hide-filters-btn::before { content: 'Hide '; }
.filter-toggle-input:checked      ~ .row-catalog-toolbar .hide-filters-btn::before { content: 'Show '; }

/* When checked: collapse sidebar, expand grid to full width */
.filter-toggle-input:checked ~ .filter-toggle-row .catalog-sidebar { display: none !important; }
.filter-toggle-input:checked ~ .filter-toggle-row .catalog-main {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Hide Filters button */
.hide-filters-btn {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    background: #252525;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: .02em;
}
.hide-filters-btn:hover { background: #444; color: #fff; }

/* Toolbar row */
.catalog-toolbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .6rem 0 .75rem;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.catalog-toolbar-divider { width: 1px; height: 18px; background: #ddd; }
.catalog-toolbar-sort { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.catalog-toolbar-sort strong { color: #555; font-weight: 600; margin-right: .1rem; }
.catalog-sort-link { color: #555; text-decoration: none; padding: .15rem .4rem; border: 1px solid transparent; border-radius: 3px; font-size: .88rem; }
.catalog-sort-link:hover { border-color: #bbb; color: #222; }
.catalog-sort-link.active { font-weight: 700; border-color: #888; color: #222; background: #f5f5f5; }
.catalog-toolbar-count { margin-left: auto; color: #888; font-size: .88rem; }

/* Sidebar */
.catalog-sidebar {
    padding-right: 1.75rem;
    border-right: 1px solid #f0f0f0;
}
.catalog-sidebar .widget { margin-bottom: 1.75rem; }
.catalog-sidebar .widget-title h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #777;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: .5rem;
    margin-bottom: .6rem;
    font-weight: 700;
}

/* Filter list items — checkbox-style indicators */
.catalog-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .28rem 0;
    color: #444;
    font-size: .9rem;
    text-decoration: none;
    line-height: 1.3;
}
.catalog-sidebar .nav-link::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    border: 1px solid #bbb;
    border-radius: 2px;
    background: #fff;
}
.catalog-sidebar .nav-item.active > .nav-link { color: #111; font-weight: 600; }
.catalog-sidebar .nav-item.active > .nav-link::before {
    background: #252525;
    border-color: #252525;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}
.catalog-sidebar .nav-link:hover { color: #000; }
.catalog-sidebar .nav-link:hover::before { border-color: #666; }
.catalog-filter-clear::before { display: none !important; }
.catalog-filter-clear { color: #900 !important; font-size: .82rem; padding: .1rem 0 .4rem; }
.catalog-filter-count { color: #aaa; font-size: .8rem; margin-left: auto; }

/* Pagination */
ul.nav-pagination { display: flex; flex-wrap: wrap; gap: .3rem; padding: 1.25rem 0; list-style: none; margin: 0; }
ul.nav-pagination .nav-item.active .nav-link { font-weight: 700; color: #111; border-color: #888; background: #f5f5f5; }
ul.nav-pagination .nav-link { padding: .3rem .7rem; border: 1px solid #ddd; border-radius: 3px; color: #555; text-decoration: none; font-size: .88rem; }
ul.nav-pagination .nav-link:hover { border-color: #888; color: #222; }
ul.nav-pagination .nav-ellipsis span { padding: .3rem .2rem; color: #aaa; font-size: .88rem; }

/* Designers listing page */
.row-designers { margin-top: 1.5rem; }
.column-designer { margin-bottom: 1.5rem; }
.column-designer .column-inner { border: 1px solid #e8e8e8; border-radius: 4px; padding: 1.5rem; transition: box-shadow .15s; }
.column-designer .column-inner:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.designer-listing-link { display: block; text-decoration: none; color: inherit; }
.designer-listing-link:hover { text-decoration: none; color: inherit; }
.designer-listing-name { font-size: 1.3rem; margin: 0 0 .25rem; color: #252525; }
.designer-listing-count { font-size: .85rem; color: #888; }

/* Product image hover swap — only fires when a secondary image exists (.has-secondary) */
.product-image-secondary { display: none; }
.id-image.has-secondary:hover .product-image-primary { display: none; }
.id-image.has-secondary:hover .product-image-secondary { display: block; }