/**
* 2007-2025 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2025 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/
/**************** tv multibanner **********************/
.tvcmsmultibanners {
  position: relative;
}
/* "Shop by category" heading above the column grid, inside container */
.tvcmsmultibanners .tvmultibanner .oss-shopbycategory-heading {
  width: 100%;
  margin-bottom: 24px;
  text-align: left;
}
.tvcmsmultibanners .tvmultibanner .oss-shopbycategory-heading .tvcms-main-title,
.tvcmsmultibanners .tvmultibanner .oss-shopbycategory-heading .tvmain-title {
  width: 100%;
}
.tvmultibanner-part1,
.tvmultibanner-part2 {
  padding: 0;
  text-align: center;
}
/* Section spacing: handled via padding in tvcmscustomsetting for background fill */
.tvcmsmultibanners {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}
.tvmultibanner-wrapper_inner {
  padding-right: 0;
  padding-left: 0;
}
.tvmultibanner2-wrapper.tvmultibanner-4 {
  padding-left: 7.5px;
  padding-right: 0;
}
.tvmultibanner4-wrapper.tvmultibanner-4 {
  margin-top: 15px;
}
.tvcmsmultibanners .tvmultibanner-1,
.tvcmsmultibanners .tvmultibanner-2 {
  padding-left: 0;
}
.tvcmsmultibanners .tvmultibanner-1,
.tvcmsmultibanners .tvmultibanner-2,
.tvcmsmultibanners .tvmultibanner-3,
.tvcmsmultibanners .tvmultibanner-4 {
  display: inline-block;
  vertical-align: middle;
  padding: 0 7.5px;
  position: relative;
}
.tvmultibanner2-center-wrapper {
  padding: 0;
}
.tvmultibanner1-wrapper.tvmultibanner-1 {
  padding-left: 0;
}
.tvmultithreebanner-wrapper.tvmultibanner-2 {
  padding: 0 7.5px;
}
.tvmultithreebanner-wrapper.tvmultibanner-1 {
  padding-right: 7.5px;
  padding-left: 0;
}
.tvmultithreebanner-wrapper.tvmultibanner-3 {
  padding-left: 7.5px;
  padding-right: 0;
}
.tvcmsmultibanners .tvmultibanner-wrapper_inner .tvmultibanner-3 {
  margin-top: 15px;
  padding-left: 0;
}
.tvmultibanner-wrapper {
  padding: 0;
}
.tvcmsmultibanners .tvbanner-hover-wrapper,
.tvmultithreebanner .tvbanner-hover-wrapper {
  border: 1px solid #ededed;
  border-radius: 3px;
}
.tvcmsmultibanners .tvbanner-hover-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.none.tvmultibanner-content {
  display: none;
}
.tvcmsmultibanners .tvbanner-hover-wrapper:after {
  position: absolute;
  content: "";
  width: 50px;
  -webkit-transform: skewX(-50deg);
  -moz-transform: skewX(-50deg);
  -ms-transform: skewX(-50deg);
  -o-transform: skewX(-50deg);
  transform: skewX(-50deg);
  bottom: 0%;
  left: -220%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
}
.tvcmsmultibanners .tvbanner-hover-wrapper:hover:after {
  left: 300%;
  -webkit-transition: all 1.5s ease 0.1s;
  -o-transition: all 1.5s ease 0.1s;
  transition: all 1.5s ease 0.1s;
}
.tvmultibanner-content {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  transform: translate(0, -50%);
  left: 40px;
}
.tvmultibanner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 15px;
}
.tvmultibanner-content h6 {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 15px;
}
.tvmultibanner-content .tvmultibanner-btn {
  font-size: 14px;
  color: #222222;
  font-weight: 500;
  border: 1px solid #333333;
  background-color: #ffffff;
  border-radius: 3px;
  padding: 5px 18px;
  cursor: pointer;
  line-height: 19px;
  display: inline-block;
}
.tvmultibanner-content .tvmultibanner-btn:hover {
  background-color: #333333;
  color: #ffffff;
}
.tvmultibanner-content .tvmultibanner-btn:hover a {
  color: #ffffff;
}
.tvmultibanner-1 .tvmultibanner-content h6 {
  color: #ff2d3a;
}
.tvmultibanner-2 .tvmultibanner-content h6 {
  color: #11c68f;
}
.tvmultibanner-3 .tvmultibanner-content h6 {
  color: #4b48bb;
}
.tvmultibanner .tvbanner-hover-wrapper img {
  width: 100%;
}
/* Outer section wrapper: block layout so heading and grid stack (flex only on grid) */
.tvcmsmultibanners .tvmultibanner {
  display: block;
}
/* Grid row: flex layout for the three banner columns only */
.tvcmsmultibanners .tvmultibanner-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
}
/* Swap Women (left) and Kids (right column) block positions */
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper {
  order: 3;
}
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-wrapper {
  order: 2;
}
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-center-wrapper {
  order: 1;
}
/* RTL: keep Women/Kids swap (order reversed for RTL flow) */
.lang-rtl .tvmultibanner-grid .tvmultibanner1-wrapper {
  order: 1;
}
.lang-rtl .tvmultibanner-grid .tvmultibanner2-center-wrapper {
  order: 3;
}
.lang-rtl .tvmultibanner2-wrapper.tvmultibanner-4 {
  padding-right: 7.5px;
  padding-left: 0;
}
.lang-rtl .tvmultibanner1-wrapper.tvmultibanner-1 {
  padding-right: 0;
  padding-left: 7.5px;
}
@media (max-width: 1040px) {
  .tvmultibanner2-wrapper.tvmultibanner-4 {
    padding-right: 0;
  }
  .tvmultibanner-wrapper_inner {
    padding-left: 0;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
}
@media (max-width: 991px) {
  .tvmultibanner-content h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .tvmultibanner-content h6 {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .tvcmsmultibanners {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .tvcmsmultibanners .tvmultibanner-wrapper_inner .tvmultibanner-3 {
    margin-top: 15px;
    padding-right: 0;
  }
  .tvmultithreebanner .tvmultithreebanner-wrapper.tvmultibanner-2 {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .tvcmsmultibanners .tvmultibanner-1,
  .tvcmsmultibanners .tvmultibanner-2,
  .tvcmsmultibanners .tvmultibanner-3,
  .tvcmsmultibanners .tvmultibanner-4 {
    padding: 0;
  }
  .tvmultibanner1-wrapper,
  .tvmultibanner2-wrapper,
  .tvmultibanner3-wrapper {
    margin-bottom: 15px;
  }
  .tvmultibanner4-wrapper.tvmultibanner-4 {
    margin-top: 0;
  }
  .tvmultibanner4-wrapper {
    margin-bottom: 15px;
  }
  .tvcmsmultibanners .tvmultibanner-wrapper_inner .tvmultibanner-3 {
    margin-top: 0px;
  }
}
@media (max-width: 575px) {
  .tvmultibanner1-wrapper.tvmultibanner-1 {
    padding: 0;
  }
  .tvmultibanner2-wrapper.tvmultibanner-4 {
    padding: 0;
  }
  .tvmultithreebanner-wrapper.tvmultibanner-2,
  .tvmultithreebanner-wrapper.tvmultibanner-3,
  .tvmultithreebanner-wrapper.tvmultibanner-1 {
    margin-bottom: 15px;
  }
  .tvmultithreebanner-wrapper.tvmultibanner-1 {
    padding-right: 0;
  }
  .tvmultithreebanner-wrapper.tvmultibanner-2 {
    padding: 0;
  }
  .tvmultithreebanner-wrapper.tvmultibanner-3 {
    padding-left: 0;
  }
}
@media (max-width: 425px) {
  .tvcmsmultibanners .tvmultibanner-1,
  .tvcmsmultibanners .tvmultibanner-2,
  .tvcmsmultibanners .tvmultibanner-3,
  .tvcmsmultibanners .tvmultibanner-4 {
    padding: 0;
  }
}
/* OSS: 3-column layout — last column has 2 boxes, all stretch to fill 800 px */

/* Column order: banner1 | banner2 | center-wrapper(2 boxes) */
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper {
  order: 1;
}
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-wrapper {
  order: 2;
}
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-center-wrapper {
  order: 3;
}
/* RTL: mirror order */
.lang-rtl .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper {
  order: 3;
}
.lang-rtl .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-center-wrapper {
  order: 1;
}

/* Section: auto height so heading + grid both visible */
.tvcmsmultibanners {
  overflow: visible;
}

/* Outer container: section width, block layout (heading + grid stack) */
.tvcmsmultibanners .tvmultibanner {
  max-width: 1256px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Grid row: fixed height so columns stretch, flex for 3-column layout */
.tvcmsmultibanners .tvmultibanner-grid {
  min-height: 630px;
  max-width: 1256px;
  width: 100%;
}

/* Each column: equal flex width, full height, no Bootstrap column padding */
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper,
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-wrapper,
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-center-wrapper {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  height: 100%;
  min-height: 630px;
  padding: 0;
  margin: 0;
}

/* Single-image columns: anchor + image fill the column */
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper .tvbanner-hover-wrapper,
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-wrapper .tvbanner-hover-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper .tvbanner-hover-wrapper img,
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-wrapper .tvbanner-hover-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right column: two boxes stacked, each half height */
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-center-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner3-wrapper,
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner4-wrapper {
  flex: 1 1 0;
  padding: 0;
  margin-top: 0 !important;
}
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner3-wrapper .tvbanner-hover-wrapper,
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner4-wrapper .tvbanner-hover-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner3-wrapper .tvbanner-hover-wrapper img,
.tvcmsmultibanners .tvmultibanner-grid .tvmultibanner4-wrapper .tvbanner-hover-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet (768–991px): keep 3 columns but reduce grid height */
@media (max-width: 991px) and (min-width: 768px) {
  .tvcmsmultibanners .tvmultibanner-grid {
    min-height: 500px;
  }
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-wrapper,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-center-wrapper {
    min-height: 500px;
  }
}

/* OSS: content block positioning per BO-assigned class
   width:100% + padding makes text-align actually work (no more shrink-wrap).
   text-align:left is the default, overriding the inherited center from
   .tvcmsmultibanners. Each position class only needs to set top/bottom
   and text-align — no left/right offset needed since padding handles it. */
.tvcmsmultibanners .tvmultibanner-content {
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  top: auto;
  bottom: auto;
  transform: none;
  text-align: left;
}
/* top-* */
.tvcmsmultibanners .tvmultibanner-content.top-left {
  top: 30px;
  text-align: left;
}
.tvcmsmultibanners .tvmultibanner-content.top-center {
  top: 30px;
  text-align: center;
}
.tvcmsmultibanners .tvmultibanner-content.top-right {
  top: 30px;
  text-align: right;
}
/* center-* / center */
.tvcmsmultibanners .tvmultibanner-content.center-left,
.tvcmsmultibanners .tvmultibanner-content.left {
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}
.tvcmsmultibanners .tvmultibanner-content.center {
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.tvcmsmultibanners .tvmultibanner-content.center-right,
.tvcmsmultibanners .tvmultibanner-content.right {
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}
/* bottom-* */
.tvcmsmultibanners .tvmultibanner-content.bottom-left {
  bottom: 30px;
  text-align: left;
}
.tvcmsmultibanners .tvmultibanner-content.bottom-center {
  bottom: 30px;
  text-align: center;
}
.tvcmsmultibanners .tvmultibanner-content.bottom-right {
  bottom: 30px;
  text-align: right;
}

/* Mobile (≤767px): stack columns, auto height */
@media (max-width: 767px) {
  .tvcmsmultibanners .tvmultibanner-grid {
    min-height: 0;
    flex-wrap: wrap;
    height: auto;
    gap: 10px;
  }
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-wrapper,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-center-wrapper {
    flex: 0 0 100%;
    min-height: 0;
    height: auto;
  }
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper .tvbanner-hover-wrapper,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-wrapper .tvbanner-hover-wrapper,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner3-wrapper .tvbanner-hover-wrapper,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner4-wrapper .tvbanner-hover-wrapper {
    height: auto;
  }
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner1-wrapper .tvbanner-hover-wrapper img,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-wrapper .tvbanner-hover-wrapper img,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner3-wrapper .tvbanner-hover-wrapper img,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner4-wrapper .tvbanner-hover-wrapper img {
    height: auto;
    object-fit: initial;
  }
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner2-center-wrapper {
    flex-direction: column;
    height: auto;
  }
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner3-wrapper,
  .tvcmsmultibanners .tvmultibanner-grid .tvmultibanner4-wrapper {
    flex: 0 0 auto;
  }
}

/* OSS: banner content typography */
.tvcmsmultibanners .tvmultibanner-content h1,
.tvcmsmultibanners .tvmultibanner-content h2,
.tvcmsmultibanners .tvmultibanner-content h3,
.tvcmsmultibanners .tvmultibanner-content h4,
.tvcmsmultibanners .tvmultibanner-content h5,
.tvcmsmultibanners .tvmultibanner-content h6 {
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 63px;
  color: #ffffff;
  margin: 0;
}

/* "Shop >" — plain text, no button chrome */
.tvcmsmultibanners .tvmultibanner-content .tvmultibanner-btn,
.tvcmsmultibanners .tvmultibanner-content .tvmultibanner-btn:hover {
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 27px;
  color: #ffffff;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  display: inline;
  cursor: default;
}
.tvcmsmultibanners .tvmultibanner-content .tvmultibanner-btn a,
.tvcmsmultibanners .tvmultibanner-content .tvmultibanner-btn:hover a {
  color: #ffffff;
  text-decoration: none;
}