/**
 * ====================================================
 * Shopex Pro
 * CATEGORY SLIDER ENGINE v1.1
 *
 * Location :
 * assets/css/category-slider.css
 *
 * Purpose :
 * • Homepage Product Category Slider
 * • Responsive Category Cards
 * • Category Thumbnail
 * • Horizontal Scroll
 * • Navigation Button Styling
 *
 * JavaScript :
 * Not included yet
 * ====================================================
 */

/* ====================================================
01. CATEGORY SLIDER SECTION
==================================================== */

.shopex-category-slider {


position: relative;

width: 100%;

margin: 0;

padding: 24px 0;

background: #ffffff;

overflow: hidden;

box-sizing: border-box;


}

/* ====================================================
02. CATEGORY CONTAINER
==================================================== */

.shopex-category-container {


width: min(100%, 1400px);

max-width: 1400px;

margin: 0 auto;

padding-inline: 24px;

box-sizing: border-box;


}

/* ====================================================
03. CATEGORY HEADER
==================================================== */

.shopex-category-header {


display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

margin-bottom: 18px;

min-height: 38px;


}

/* ====================================================
04. CATEGORY HEADER LEFT
==================================================== */

.shopex-category-header-left {


display: flex;

align-items: center;

min-width: 0;


}

/* ====================================================
05. CATEGORY TITLE
==================================================== */

.shopex-category-title {


margin: 0;

padding: 0;

font-size: 24px;

font-weight: 800;

line-height: 1.2;

color: #222222;

white-space: nowrap;


}

/* ====================================================
06. CATEGORY NAVIGATION
==================================================== */

.shopex-category-navigation {


display: flex;

align-items: center;

gap: 8px;

flex-shrink: 0;


}

/* ====================================================
07. PREVIOUS / NEXT BUTTON
==================================================== */

.shopex-category-prev,
.shopex-category-next {

display: inline-flex;

align-items: center;

justify-content: center;

width: 36px;

height: 36px;

margin: 0;

padding: 0;

border: 1px solid #e7e7e7;

border-radius: 50%;

background: #ffffff;

color: #333333;

font-size: 14px;

line-height: 1;

cursor: pointer;

box-shadow: 0 3px 12px rgba(0, 0, 0, .08);

transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;

appearance: none;

-webkit-appearance: none;


}

/* ====================================================
08. NAVIGATION ICON
==================================================== */

.shopex-category-prev i,
.shopex-category-next i {


display: block;

font-size: 12px;

line-height: 1;


}

/* ====================================================
09. NAVIGATION HOVER
==================================================== */

.shopex-category-prev:hover,
.shopex-category-next:hover {


background: #ff9900;

border-color: #ff9900;

color: #ffffff;

box-shadow: 0 5px 16px rgba(0, 0, 0, .13);

transform: translateY(-1px);


}

/* ====================================================
10. NAVIGATION FOCUS
==================================================== */

.shopex-category-prev:focus-visible,
.shopex-category-next:focus-visible {


outline: 2px solid #ff9900;

outline-offset: 2px;


}

/* ====================================================
11. CATEGORY VIEWPORT
==================================================== */

.shopex-category-viewport {


position: relative;

width: 100%;

min-width: 0;

overflow: hidden;


}

/* ====================================================
12. CATEGORY TRACK
==================================================== */

.shopex-category-track {


display: flex;

align-items: flex-start;

gap: 16px;

width: 100%;

min-width: 0;

overflow-x: auto;

overflow-y: hidden;

padding: 2px 2px 8px;

box-sizing: border-box;

scroll-behavior: smooth;

scrollbar-width: none;

-ms-overflow-style: none;


}

/* Hide Chrome / Edge scrollbar */

.shopex-category-track::-webkit-scrollbar {


display: none;


}

/* ====================================================
13. CATEGORY ITEM
==================================================== */

.shopex-category-item {


display: block;

flex: 0 0 150px;

width: 150px;

min-width: 150px;

margin: 0;

padding: 0;

color: inherit;

text-decoration: none;

box-sizing: border-box;


}

/* ====================================================
14. CATEGORY IMAGE
==================================================== */

.shopex-category-image {


position: relative;

display: flex;

align-items: center;

justify-content: center;

width: 70%;

aspect-ratio: 1 / 1;

margin: 0;

padding: 0;

overflow: hidden;

border-radius: 14px;

background: #f7f7f7;

box-sizing: border-box;


}

/* ====================================================
15. CATEGORY IMAGE
==================================================== */

.shopex-category-image img {


display: block;

width: 100%;

height: 100%;

margin: 0;

padding: 0;

object-fit: cover;

object-position: center;

border: 0;

transition:
    transform .40s ease,
    opacity .30s ease;


}

/* ====================================================
16. IMAGE HOVER
==================================================== */

.shopex-category-item:hover
.shopex-category-image img {


transform: scale(1.06);


}

/* ====================================================
17. IMAGE OVERLAY
==================================================== */

.shopex-category-image::after {


content: "";

position: absolute;

inset: 0;

background: linear-gradient(
    to top,
    rgba(0, 0, 0, .08),
    transparent 45%
);

opacity: 0;

pointer-events: none;

transition: opacity .30s ease;


}

/* ====================================================
18. IMAGE OVERLAY HOVER
==================================================== */

.shopex-category-item:hover
.shopex-category-image::after {


opacity: 1;


}

/* ====================================================
19. CATEGORY PLACEHOLDER
==================================================== */

.shopex-category-placeholder {


display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 100%;

color: #b7b7b7;

font-size: 34px;

background: #f5f5f5;


}

/* ====================================================
20. CATEGORY NAME
==================================================== */

.shopex-category-name {


display: block;

width: 70%;

margin: 10px 0 0;

padding: 0;

text-align: center;

font-size: 13px;

font-weight: 700;

line-height: 1.35;

color: #333333;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

box-sizing: border-box;

transition:
    color .25s ease;


}

/* ====================================================
21. CATEGORY NAME HOVER
==================================================== */

.shopex-category-item:hover
.shopex-category-name {


color: #ff9900;


}

/* ====================================================
22. CATEGORY ITEM FOCUS
==================================================== */

.shopex-category-item:focus-visible {


outline: none;


}

.shopex-category-item:focus-visible
.shopex-category-image {


outline: 2px solid #ff9900;

outline-offset: 3px;


}

/* ====================================================
23. LAPTOP
1200px and below
==================================================== */

@media (max-width: 1200px) {


.shopex-category-container {

    padding-inline: 20px;

}


.shopex-category-item {

    flex-basis: 138px;

    width: 138px;

    min-width: 138px;

}


.shopex-category-track {

    gap: 15px;

}


}

/* ====================================================
24. TABLET
991px and below
==================================================== */

@media (max-width: 991px) {


.shopex-category-slider {

    padding: 20px 0;

}


.shopex-category-header {

    margin-bottom: 15px;

}


.shopex-category-title {

    font-size: 21px;

}


.shopex-category-item {

    flex-basis: 120px;

    width: 120px;

    min-width: 120px;

}


.shopex-category-track {

    gap: 14px;

}


.shopex-category-prev,
.shopex-category-next {

    width: 34px;

    height: 34px;

}


.shopex-category-name {

    font-size: 13px;

}


}

/* ====================================================
25. MOBILE
767px and below
==================================================== */

@media (max-width: 767px) {


.shopex-category-slider {

    padding: 18px 0;

}


.shopex-category-container {

    padding-inline: 16px;

}


.shopex-category-header {

    margin-bottom: 13px;

}


.shopex-category-title {

    font-size: 19px;

}


.shopex-category-item {

    flex-basis: 105px;

    width: 105px;

    min-width: 105px;

}


.shopex-category-track {

    gap: 12px;

    padding-bottom: 6px;

}


.shopex-category-name {

    margin-top: 8px;

    font-size: 12px;

}


.shopex-category-navigation {

    gap: 6px;

}


.shopex-category-prev,
.shopex-category-next {

    width: 32px;

    height: 32px;

}


}

/* ====================================================
26. SMALL MOBILE
480px and below
==================================================== */

@media (max-width: 480px) {


.shopex-category-container {

    padding-inline: 14px;

}


.shopex-category-item {

    flex-basis: 92px;

    width: 92px;

    min-width: 92px;

}


.shopex-category-track {

    gap: 10px;

}


.shopex-category-name {

    margin-top: 7px;

    font-size: 11px;

}


.shopex-category-title {

    font-size: 18px;

}


.shopex-category-prev,
.shopex-category-next {

    width: 30px;

    height: 30px;

}


}

/* ====================================================
27. LARGE DESKTOP
1600px and above
==================================================== */

@media (min-width: 1600px) {


.shopex-category-container {

    max-width: 1500px;

    padding-inline: 28px;

}


.shopex-category-item {

    flex-basis: 158px;

    width: 158px;

    min-width: 158px;

}


.shopex-category-track {

    gap: 18px;

}


}

/* ====================================================
28. VERY LARGE DESKTOP
1920px and above
==================================================== */

@media (min-width: 1920px) {


.shopex-category-container {

    max-width: 1600px;

    padding-inline: 30px;

}


.shopex-category-item {

    flex-basis: 165px;

    width: 165px;

    min-width: 165px;

}


.shopex-category-track {

    gap: 20px;

}


.shopex-category-title {

    font-size: 25px;

}


}

/* ====================================================
29. 4K
2560px and above
==================================================== */

@media (min-width: 2560px) {


.shopex-category-container {

    max-width: 1800px;

    padding-inline: 32px;

}


.shopex-category-item {

    flex-basis: 175px;

    width: 175px;

    min-width: 175px;

}


.shopex-category-track {

    gap: 22px;

}


}

/* ====================================================
30. REDUCED MOTION
==================================================== */

@media (prefers-reduced-motion: reduce) {


.shopex-category-track {

    scroll-behavior: auto;

}


.shopex-category-image img,
.shopex-category-name,
.shopex-category-prev,
.shopex-category-next {

    transition: none;

}

}

/* ====================================================
END OF CATEGORY SLIDER CSS
==================================================== */