@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;700&display=swap");

body {
    font-family: "Exo 2", Arial, sans-serif !important;
}

/* --------------------
   COMMONS
-------------------- */
:root,
[data-bs-theme="light"] {
    /* Primary */
    --bs-primary: #fbba00;
    --bs-primary-rgb: 251, 186, 0;
    --bs-primary-text-emphasis: #644a00;
    --bs-primary-bg-subtle: #fef8e5;
    --bs-primary-border-subtle: #feedbf;
    /* Links */
    --bs-link-color: #fbba00;
    --bs-link-color-rgb: 251, 186, 0;
    --bs-link-hover-color: #d59e00;
    --bs-link-hover-color-rgb: 213, 158, 0;
    /* Focus ring */
    --bs-focus-ring-color: rgba(251, 186, 0, 0.25);
}
.btn {
    --bs-btn-border-radius: 42px;
}
.btn-primary {
    /* Base */
    --bs-btn-bg: #fbba00;
    --bs-btn-border-color: #fbba00;
    /* Hover */
    --bs-btn-hover-bg: #fcc233;
    --bs-btn-hover-border-color: #fccc4c;
    /* Focus */
    --bs-btn-focus-shadow-rgb: 226, 167, 0;
    /* Active */
    --bs-btn-active-bg: #fdd366;
    --bs-btn-active-border-color: #fccc4c;
    /* Disabled */
    --bs-btn-disabled-bg: #fbba00;
    --bs-btn-disabled-border-color: #fbba00;
}
a.link-reset:hover {
    color: #fbba00;
}
.alert-info {
    --bs-alert-color: #644a00;
    --bs-alert-bg: #fef8e5;
    --bs-alert-border-color: #feedbf;
    --bs-alert-link-color: #644a00;
}
.form-select:focus {
    box-shadow: none;
    border-color: #dee2e6;
}
/* --------------------
   LOADER
-------------------- */
.sylius-shop-loader {
    --loader-radius: 32px;
    width: var(--loader-radius);
    height: var(--loader-radius);
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    /* background: transparent; */
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.header-wrap .sylius-shop-loader {
    background: inherit;
}
.sylius-shop-loader img {
    display: none !important;
}
.sylius-shop-loader::before {
    content: "";
    position: absolute;
    width: var(--loader-radius);
    height: var(--loader-radius);
    border: 4px solid var(--default-blue, #fbba00);
    border-top-color: var(--default-blue-light-10, transparent);
    border-radius: 50%;
    animation: animate-preloader 0.6s linear infinite;
}
@keyframes animate-preloader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --------------------
   HEADER WRAP
-------------------- */
.header-wrap {
    background-color: #212529;
}

/* --------------------
   HOME CATEGORY
-------------------- */
.home-category-container {
    position: relative;
    flex-grow: 1;
}
.home-category-container:before,
.home-category-container:after {
    content: "";
    position: absolute;
    filter: blur(250px);
    border-radius: 50%;
    background: #fbba00;
    z-index: -1;
}
@media (max-width: 992px) {
    .home-category-container:before,
    .home-category-container:after {
        display: none;
    }
}
.home-category-container:before {
    top: -15vh;
    left: -15vw;
    width: 420px;
    height: 420px;
}
.home-category-container:after {
    top: 15vh;
    right: 0;
    width: 225px;
    height: 225px;
}
.home-category-title {
    font-weight: 700;
    background: linear-gradient(90deg, #212529 14.42%, #c6c6c6 93.75%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-category-subtitle {
    margin-bottom: 0;
    color: #212529;
    font-weight: 400;
}
@media (min-width: 992px) {
    .home-category-title {
        font-size: 64px;
        letter-spacing: -1.92px;
    }
    .home-category-subtitle {
        font-size: 26px;
        line-height: 28px;
        letter-spacing: -0.52px;
    }
}
@media (max-width: 992px) {
    .home-category-title {
        font-size: 30px;
        line-height: normal;
        letter-spacing: -0.9px;
    }
    .home-category-subtitle {
        font-size: 18px;
        line-height: normal;
        letter-spacing: -0.36px;
    }
}
.categories-card {
    position: relative;
    background-color: #f5f5f5;
    border-radius: 16px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.categories-image {
    height: calc(100% - 68px);
}
@media (max-width: 1200px) {
    .categories-image {
        height: calc(100% - 56px);
    }
}
.categories-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 24px;
}
.categories-title span {
    color: #131313;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
}
@media (max-width: 1200px) {
    .categories-title {
        padding: 20px;
    }
    .categories-title span {
        font-size: 18px;
    }
}

/* --------------------
   BREADCRUMBS
-------------------- */
.breadcrumb-item {
    display: flex;
    align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    padding: 0;
    margin-top: 2px;
    margin-right: 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M5.5 3L10.5 8L5.5 13" stroke="%23848484" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* --------------------
   SEARCH BAR
-------------------- */
.products-search-bar {
    height: 40px;
    min-width: 300px;
    max-width: 300px;
    border-radius: 40px;
    background: #f6f6f6;
    margin-right: calc(0.5 * var(--bs-gutter-x));
    margin-left: calc(0.5 * var(--bs-gutter-x));
}
@media (max-width: 576px) {
    .products-search-bar {
        max-width: 100%;
    }
}
.products-search-bar .input-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.products-search-bar input,
.products-search-bar input::placeholder {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    line-height: normal;
    box-shadow: none !important;
    outline: none !important;
    height: 40px;
    padding: 0;
    transition: 0s !important;
}
.products-search-bar input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f6f6f6 inset !important;
    box-shadow: 0 0 0 1000px #f6f6f6 inset !important;
    -webkit-text-fill-color: #212529 !important;
}
.products-search-bar .search-submit {
    order: 1;
}
.products-search-bar input {
    order: 2;
}
.products-search-bar .search-clear {
    order: 3;
}
.products-search-bar .search-submit,
.products-search-bar .search-clear {
    display: flex;
    align-items: center;
    border: none;
    margin: 0;
    color: #000;
}
.products-search-bar .search-submit .icon,
.products-search-bar .search-clear .icon {
    height: 22px;
    width: 22px;
}
.products-search-bar .search-submit:hover,
.products-search-bar .search-clear:hover {
    background-color: transparent !important;
    color: #000 !important;
}

/* --------------------
   FILTERS
-------------------- */
.products-filters {
    max-width: fit-content;
}

/* --------------------
   PRODUCTS GRID
-------------------- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 3rem 2rem;
}
.products-card-wrap {
    padding: 8px 8px 24px;
    background-color: #f6f6f6;
    border-radius: 16px;
}
.products-card-wrap .products-card .products-card-title {
    padding: 0 8px;
    color: #231f20;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-transform: uppercase;
}
.products-card-wrap .products-card-price {
    padding: 0 8px;
}
.products-card-wrap .products-card-price span {
    color: #212529;
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
}
.products-card-wrap
    .products-card-price
    span[data-test-product-original-price] {
    font-weight: 400;
}
.products-card-pagination {
    gap: 8px;
}
.products-card-pagination .page-item {
    overflow: hidden;
}
.products-card-pagination .page-item .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background-color: #f6f6f6;
}
.products-card-pagination .page-item.active .page-link,
.products-card-pagination .page-item .page-link:hover {
    background-color: #212529;
    color: #fff;
}
.products-card-pagination .page-item.disabled {
    opacity: 0.25;
}
.products-card-pagination .page-item:first-of-type .page-link,
.products-card-pagination .page-item:last-of-type .page-link {
    background-color: transparent;
    font-size: 0;
    color: transparent;
}
.products-card-pagination .page-item:first-of-type .page-link::before,
.products-card-pagination .page-item:last-of-type .page-link::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 18L9 12L15 6" stroke="%230E2432"/></svg>');
}
.products-card-pagination .page-item:last-of-type .page-link::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9 6L15 12L9 18" stroke="%230E2432"/></svg>');
}

/* --------------------
   PRODUCT OPTIONS CAROUSEL
-------------------- */
.variant-section > .variant-carousel {
    position: relative;
    margin-bottom: 1.5rem;
}

.variant-section .no-wrap-row {
    display: flex;
    flex-wrap: nowrap;
}

.variant-section > .variant-carousel .carousel-control-prev-icon,
.variant-section > .variant-carousel .carousel-control-next-icon {
    display: none;
}

.variant-section .carousel-value {
    display: block;
    cursor: pointer;
}

.variant-section .carousel-img-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px #b6b9bf;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.variant-section .carousel-img-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.variant-section input[type="radio"]:checked + .carousel-value {
    pointer-events: none;
}

.variant-section
    input[type="radio"]:checked
    + .carousel-value
    .carousel-img-container,
.carousel-img-container:hover {
    box-shadow: inset 0 0 0 2px var(--bs-primary) !important;
}

.variant-section > .variant-carousel .carousel-control-prev,
.variant-section > .variant-carousel .carousel-control-next {
    position: absolute;
    top: calc(50% - 27px);
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    z-index: 2;
}

.variant-section > .variant-carousel .carousel-control-prev {
    left: -1.25rem;
}
.variant-section > .variant-carousel .carousel-control-next {
    right: -1.25rem;
}

.variant-section > .variant-carousel .carousel-control-prev svg,
.variant-section > .variant-carousel .carousel-control-next svg {
    width: 1.75rem;
    height: 1.75rem;
    color: #000;
}

.variant-section > .variant-carousel .carousel-control-prev:hover svg,
.variant-section > .variant-carousel .carousel-control-prev:focus svg,
.variant-section > .variant-carousel .carousel-control-next:hover svg,
.variant-section > .variant-carousel .carousel-control-next:focus svg {
    color: var(--bs-primary);
}

.variant-section .carousel-item {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.variant-section .options-title {
    margin-bottom: 30px;
    color: #212529;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
}

.variant-section .options-item-title {
    margin-top: 10px;
    color: #726c6c;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.variant-carousel[data-bs-wrap="false"] {
    --bs-carousel-wrap: false;
}

.variant-carousel[data-bs-wrap="false"]:has(
        .carousel-inner > .carousel-item:first-child.active
    )
    .carousel-control-prev {
    display: none !important;
}

.variant-carousel[data-bs-wrap="false"]:has(
        .carousel-inner > .carousel-item:last-child.active
    )
    .carousel-control-next {
    display: none !important;
}

@media (max-width: 576px) {
    .variant-section .variant-carousel {
        /* touch-action: pan-y; */
        overflow-x: clip;
    }
    .variant-section > .variant-carousel .carousel-control-prev {
        left: -12px !important;
        right: auto;
        width: 3rem;
        height: 3rem;
    }
    .variant-section > .variant-carousel .carousel-control-next {
        right: -12px !important;
        left: auto;
        width: 3rem;
        height: 3rem;
    }
}

.disabled-option {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.disabled-option img {
    opacity: 0.5;
}

.disabled-option .options-item-title {
    color: #999;
}