/*
 Theme Name:   W.Atelier
 Theme URI:    https://watelier.com.my/
 Description:  Custom theme for W.Atelier based on Bricks
 Author:       Danny
 Author URI:   https://sugodigital.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
    --watelier-red: #df222c;
    --watelier-darkest: #181818;
    --watelier-grey: #969696;
    --watelier-grey-light: #d9d9d9;
    --watelier-offwhite: #f5f5f5;
}

/**
 * HTML
 */
body {
    background: #f5f5f5;
    background: linear-gradient(180deg, rgba(217, 217, 217, 1) 0%, rgba(245, 245, 245, 1) 30%, rgba(255, 255, 255, 1) 100%);
    background-attachment: fixed;
}

/**
 * Gutenberg
 */
figure.wp-block-gallery.has-nested-images figure {
	margin-bottom: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) ) !important;
}

/**
 * Header
 */
.scheme-light .site-header .menu-item,
.scheme-light .site-header .brxe-text-link {
    color: var(--watelier-darkest);
}
.scheme-dark .site-header .menu-item,
.scheme-dark .site-header span.brxe-text-link,
.scheme-dark .site-header .brx-submenu-toggle {
    color: var(--watelier-offwhite);
}
.scheme-dark .site-header ul.brx-dropdown-content .brxe-text-link {
    color: var(--watelier-darkest);
}
.site-header .brxe-text-link:hover,
.scheme-light .site-header .menu-item a:is(:hover, :active),
.scheme-light .site-header .menu-item a[aria-current="page"],
.scheme-light .site-header li.brxe-dropdown.open .brx-submenu-toggle,
.scheme-light .site-header .menu-item a:is(:hover, :active),
.scheme-dark .site-header .menu-item a[aria-current="page"],
.scheme-dark .site-header li.brxe-dropdown.open .brx-submenu-toggle,
.scheme-dark .site-header .menu-item a:is(:hover, :active) {
    color: var(--watelier-red) !important;
    stroke: var(--watelier-red);
}
.watelier-logo-light,
.watelier-logo-dark,
.site-header.brx-sticky .watelier-logo-dark {
    display: block;
}
.scheme-light .watelier-logo-light,
.site-header.brx-sticky .watelier-logo-light,
.scheme-dark .watelier-logo-dark {
    display: none;
}
.scheme-dark .site-header .brxa-wrap {
    color: var(--watelier-grey-light)
}
.scheme-light header.brx-sticky.scrolling {
    background-color: var(--watelier-offwhite);
}
.scheme-dark header.brx-sticky.scrolling {
    background-color: var(--watelier-darkest);
}
.brxe-nav-nested.brx-open .brx-submenu-toggle {
    justify-content: center;
}

/**
 * Content
 */
main#brx-content input[type="checkbox"],
main#brx-content input[type="radio"] {
    width: 24px;
    height: 24px;
    border-color: var(--watelier-grey-light);
}
main#brx-content input[type="checkbox"]:checked,
main#brx-content input[type="radio"]:checked {
    color: var(--watelier-red);
    accent-color: var(--watelier-red);
}

/**
 * Component: Filter Checkbox
 */
ul.brxe-filter-checkbox {
    display: flex;
    flex-direction: column;
}
ul.brxe-filter-checkbox label {
    align-items: flex-start;
}
.brxe-filter-checkbox .brx-option-text {
    line-height: 1;
}
ul.brxe-filter-checkbox li span.brx-option-active {
    color: var(--watelier-red);
}
ul.brxe-filter-checkbox label.no-filter-options {
    pointer-events: none;
}
ul.brxe-filter-checkbox label.no-filter-options input[type="checkbox"] {
    display: none;
}
/**
 * Component: Post Slider
 */
 .post-slider .splide__slide img {
	opacity: 0.1;
	transition: opacity 300ms ease, transform 300ms ease;
}
.post-slider .splide__slide .brxe-div,
.post-slider .splide__slide .brxe-heading,
.post-slider .splide__slide .brxe-text-basic {
	opacity: 0;
	transition: opacity 300ms ease, transform 300ms ease;
}
.post-slider .splide__slide.is-active img,
.post-slider .splide__slide.is-active .brxe-div,
.post-slider .splide__slide.is-active .brxe-heading,
.post-slider .splide__slide.is-active .brxe-text-basic {
	opacity: 1;
}
.post-slider .splide__slide.is-next img {
	opacity: 0.1;
}
.post-slider .splide__slide.is-next .brxe-div,
.post-slider .splide__slide.is-next .brxe-heading,
.post-slider .splide__slide.is-next .brxe-text-basic {
	opacity: 0;
	pointer-events: none;
}
.post-slider .splide__arrow svg {
    fill: var(--watelier-offwhite);
}
.post-slider .splide__arrow--prev {
    display: none;
}
.post-slider .splide__arrow--next {
    right: 5%;
    top: 45%;
}
/**
 * Component: Splide (Swiper)
 */
.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: 1px solid #d9d9d9;
}
/**
 * Component: Carousel (Swiper)
 */
.brand-images-carousel .swiper-autoheight .image {
  aspect-ratio: 3/2;
  object-fit: cover;  
}
/**
 * Component: Reviews
 */
.ndrsl-wdiget {
  font-size: var(--text-s);  
}

/**
 * W.Atelier
 */
.watelier-menu-close-btn:before {
    content:"CLOSE MENU";
    display: block;
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    font-size: var(--text-s);
    color: var(--watelier-darkest);
}
.watelier-catalog_product-title {
	word-break: break-all;
}
.watelier-tabs-btn .tab-menu .tab-title {
    padding-top: var(--space-2xs) !important;
    padding-bottom: var(--space-2xs) !important;
    padding-left: var(--space-s) !important;
    padding-right: var(--space-s) !important;
}
.watelier-tabs-btn .tab-menu .tab-title.brx-open {
    color: var(--watelier-offwhite) !important;
    background-color: var(--watelier-red) !important;
}
.watelier-tabs-btn .tab-content {
    padding-top: var(--space-m) !important;
    padding-bottom: var(--space-m) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
}
.watelier-tabs-txt .tab-menu .tab-title.brx-open {
    color: var(--watelier-red) !important;
    background-color: transparent !important;
}
.watelier-tabs-txt .tab-content {
    padding-bottom: var(--space-m) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
}
.sidebar-category-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sidebar-category-nav .category-link {
	font-size: var(--text-s);
}
.sidebar-category-nav .category-link:hover,
.sidebar-category-nav .category-link.active {
	color: var(--watelier-red);
}
.cta-block-effect:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--watelier-darkest);
    background: linear-gradient(
        180deg,
        rgba(24, 24, 24, 0) 25%,
        rgba(24, 24, 24, 1) 100%
    );
    opacity: 1;
    transition: all 0.5s ease-in-out;
}
.cta-block-effect:hover:before {
    opacity: 0;
}
.cta-block-effect:after {    
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--watelier-darkest);
    background: linear-gradient(
        0deg,
        rgba(24, 24, 24, 0.8) 0%,
        rgba(24, 24, 24, 0.8) 100%
    );
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.cta-block-effect:hover::after {
    opacity: 1;
}

/**
 * Breakpoint: Tablets
 */
@media screen and (min-width: 767px) {
    header.brx-sticky.scrolling #brxe-07f446 {
        padding-top: 0;
        padding-bottom: 0;
    }
    header.brx-sticky .watelier-logo-light,
    header.brx-sticky .watelier-logo-dark {
        transition: all 0.2s ease-in-out;
    }
    header.brx-sticky svg {
        transform: scale(1);
    }
    header.brx-sticky.scrolling svg {
        transform: scale(0.6);
    }
    header.brx-sticky.scrolling ul > li.menu-item{
        color: var(--watelier-offwhite);
    }
    .watelier-menu-close-btn:before {
        color: var(--watelier-offwhite);
    }
}