/* Main Hero Section */
.main-hero-section .banner_slider { position: relative; }
.main-hero-section .inner { width: 100%; height: 100%; position: relative; } 
.main-hero-section .banner_img { position: relative; }
.main-hero-section .banner_img img { border-radius: 4px; width: 100%; display: block;}   
.main-hero-section .banner_img:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(21,21,21,0),rgba(21,21,21,0), rgba(21,21,21,.09), rgba(21,21,21,0.50)); }
.main-hero-section .content { text-align: center; position: absolute; bottom: 20%; left: 50%; transform: translate(-50%, -20%); }
.main-hero-section .content .banner_heading { font-family: 'Louize'; font-size: 56px; line-height: 70px; letter-spacing: 0.1px; color: #ffffff; }
.main-hero-section .content .banner_text { letter-spacing: 0.4px; color: var(--white-main-color); padding-block: 30px; }
.main-hero-section .content .banner_cta { display: flex; justify-content: center; gap: 10px; }



/* Category */
.category-section .card { position: relative; display: inline-block; }
.category-section .card img { width: 100%; display: block; border-radius: 4px; }
.category-section .card:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(21,21,21,0),rgba(21,21,21,0), rgba(21,21,21,.09), rgba(21,21,21,0.50)); }
.category-section .card .content { position: absolute; z-index: 1; bottom: 50px; left: 50%; text-align: center; transform: translate(-50%); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.category-section .card .content .card_heading { font-size: 22px; line-height: 36px; color: var(--white-text-color); }


/* Collection */
.collection .categories { display: flex; gap: 10px; padding-block:15px 10px;  overflow:auto;  margin-bottom: 20px;}
.collection .categories .category-btn { border: none; background-color: transparent; cursor: pointer; letter-spacing: 0.6px; font-size: 14px; line-height: 24px; transition: 0.3s; color: rgba(21, 21, 21, 0.5); }
.collection .categories .category-btn.active { text-decoration: underline; color: var(--primary-text-color); }
.collection .products { position: relative; }
.products .product .content { position: relative; padding-top: 20px; }
.products .product .content .title { font-size: 13px; line-height: 23px; font-weight: 500; letter-spacing: 0.1px; color: var(--primary-text-color); text-transform: capitalize; padding-bottom: 7px; }
.products .product .content .color_label { font-size: 13px; line-height: 23px; letter-spacing: 0.1px; color: var(--primary-text-color); font-weight: 500; }
.products .product .content .color_label .price { color: #8E8E8E; font-size: 12px; font-weight: 400; padding-left: 20px; }
.products .product .content .product_cta { opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out; }
.products .product:hover .product_cta { opacity: 1; visibility: visible; } 
.products .product .content button { background-color: var(--black-main-color); width: 36px; height: 36px; border-radius: 50%; border: 0; position: absolute; top: 10px; right: 20px; }


/*  Overshirt Collection Banner */
.overshirt-collection-banner .inner { width: 100%; height: 100%; position: relative; }
.overshirt-collection-banner .banner_img { position: relative; }
.overshirt-collection-banner .banner_img img { width: 100%; }
.overshirt-collection-banner .content { width: 100%; position: absolute; bottom: 10%; left: 50%; transform: translate(-50%, -10%); text-align: center; }
.overshirt-collection-banner .content .heading { font-family: 'Louize'; font-size: 56px; font-weight: 400; line-height: 70px; letter-spacing: 0.1px; text-align: center; color: var(--primary-text-color); }
.overshirt-collection-banner .content p { color: var(--secondary-text-color); padding-block: 30px; }
.overshirt-collection-banner .content .banner_cta { display: flex; justify-content: center; gap: 10px; }



/* MAgsol Motion */
.magsol_motion { position: relative; }
.magsol_motion h2 { padding-bottom: 30px; }
.magsol_motion .magsol_card { position: relative; }
.magsol_motion .card_img img { border-radius: 4px; width: 100%; }
.magsol_motion .card_content { position: absolute; top: 0; padding: 30px 35px; width: 100%; height: 100%; display: flex; justify-content: space-between; justify-content: end; flex-direction: column; }
.magsol_motion .card_content .heading { color: var(--white-text-color); font-size: 20px; line-height: 36px; font-weight: 600; letter-spacing: 0.2px; background: rgba(0,0,0,0.4);
  padding: 10px 15px;
  border-radius: 5px 5px 0 0;}
.magsol_motion .card_cta { display: flex; gap: 60px; align-items: center;background: rgba(0,0,0,0.4);  padding: 10px 15px;  border-radius: 0 0 5px 5px; }
.magsol_motion .primary_cta { padding: 10px 30px !important; min-width: 12em; }
.magsol_motion .primary_text { color: var(--white-text-color); }
.magsol_motion .swiper-slide { opacity: 80%; }
.magsol_motion .swiper-slide-active { opacity: 100%; }
.magsol_motion_cta { padding-top: 45px; text-align: center; }
.magsol_motion_cta .cta { background-color: transparent; border: 1px solid var(--buttons-links-color); color: var(--buttons-links-color); padding: 15px 45px; border-radius: 50px; font-size: 13px; line-height: 23px; cursor: pointer; }
.magsol_motion_cta .cta:hover { background-color: var(--buttons-links-color); color: #ffffff;}



@media (min-width: 1025px) and (max-width: 1280px) {
    /* MAgsol Motion */
    .magsol_motion .card_content { padding: 25px; }
    .magsol_motion .card_cta { gap: 30px; }
    .magsol_motion .primary_cta { padding: 5px 15px !important; min-width: 9em; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Main Hero Section */
    .main-hero-section .content { bottom: 5%; transform: translate(-50%, -5%); }
    .main-hero-section .content .banner_heading { font-size: 46px; line-height: 54px; }
    .main-hero-section .content .banner_text { padding-block: 20px; }


    /* Category Section */
    .category-section .card .content { width: 100%; bottom: 30px; }
    

    /* Overshirt Collection banner */
    .overshirt-collection-banner .content .heading { font-size: 46px; line-height: 54px; }
    .overshirt-collection-banner .content p { padding-block: 20px; }


    /* MAgsol Motion */
    .magsol_motion .card_content { padding: 20px; text-align: center; align-items: center;}
    .magsol_motion .primary_text { display: none; }
    .magsol_motion .card_content { padding: 20px; }
}

@media screen and (max-width: 767px) {
    /* MAin Hero Section */
    .main-hero-section .content { bottom: 10%; transform: translate(-50%, -10%); width: 100%; }
    .main-hero-section .content .banner_heading { font-size: 42px; line-height: 56px; }
    .main-hero-section .content .banner_text { padding-block: 15px; }


    /* Category */
    .category-section { width: 100%; overflow-x: auto; white-space: nowrap; }
    .category-section .card { display: inline-block; width: 350px; }


    /* Collection */
    .banner_img img { width: 100%}
    .overshirt-collection-banner .content { position: unset; transform: none; padding: 40px 20px 0 20px;}
    .overshirt-collection-banner .banner_img { display: block; }
    .overshirt-collection-banner .content .heading { font-size: 42px; line-height: 56px; }
    .banner_cta .primary_cta { background-color: #ffffff !important;color: var(--primary-text-color) !important; }
    .products .product .content .product_cta { opacity: 1; visibility: visible; }



    /* MAgsol Motion */
    .magsol_motion .primary_text { display: none; }
    .magsol_motion .card_content { align-items: center; padding: 15px; }
    .magsol_motion .card_content .heading { font-size: 15px; line-height: 22px; text-align: center; }
    .magsol_motion .primary_cta { padding: 7px 19px !important; min-width: 9em; font-size: 12px; line-height: 20px; }
    .magsol_motion_cta .cta { padding: 8px 40px; }

}


.related .block-actions{
  margin-bottom: 20px;
}
.related .block-actions .action.select{
      color: red;
    line-height: 14px;
    text-decoration: underline;
}
.block.related .field.choice.related{
      top: 24px;
    right: 5px;
    left:unset;
}
.block.related .field.choice.related .checkbox.related{
  height: 19px;
        width: 19px;
}
@media  (max-width: 1024px) {
.magsol_motion .card_cta{background: none;}
.magsol_motion .card_content { justify-content: space-between}
.magsol_motion .card_content .heading {border-radius: 5px;}
}