.shopping_btn {
    float: left;
    width: 25%;
    text-align: center;
    font-size: 18px;
    padding: 3px 0;
    color: #fff;
    border-right: 1px solid #ffffff14;
}
.shopping_btn i {
    color: #fff;
}
.shopping_btn a:last-child {
    font-size: 11px;
    display: block;
    color: #fff;
    font-weight: 300;
    margin-top: -3px;
}

.coupon_error {
    padding: 2px;
    color: #e53131;
}

div#cart_price {
    display: block;
    margin-left: 20px;
}












/* Hot deals*/
.outerWrapper {
text-align: left;
position: relative;
margin: 15px auto 25px auto;
width: 100%;
}

.left-nav-btn, .right-nav-btn {
    position: absolute;
    width: 37px;
    height: 37px;
    top: 80px;
    cursor: pointer;
    opacity: 1;
    background: transparent url(../images/arrows.png) top left no-repeat;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

.left-nav-btn {
left:-70px;
top: 120px;
}

.right-nav-btn {
    right: -70px;
    background-position: top right;
    top: 120px;
}

.left-nav-btn:hover, .right-nav-btn:hover {
opacity: 1;
}

.vert.outerWrapper {
margin:50px auto 60px auto;
width:204px;
height:456px;
}

.vert .item {
float:left;
margin-bottom:48px;
width:162px;
}

.vert .left-nav-btn, .vert .right-nav-btn {
position:absolute;
width:37px;
height:37px;
cursor:pointer;
left:82px;
background:transparent url('../images/arrows_vert.png') top left no-repeat;
}

.vert .left-nav-btn {
top:-60px;
}

.vert .right-nav-btn {
top:auto;
bottom:-60px;
background-position: bottom left;
}

.leftWrapper {
width:48%;
float:left;
}

.rightWrapper {
width:48%;
float:right;
}

.leftWrapper h2, .rightWrapper h2 {
width:100%;
text-align:center;
}

/ Pager /

.pager {
line-height: 100px;
text-align: center;
}

.pager > span {
cursor: pointer;
border-radius:8px;
display: inline-block;
width:16px;
height:16px;
background: #DDDDDD;
border:1px solid #B3B3B3;
margin:0 4px;
overflow: none;
}

.pager > span.active {
background: #B3B3B3;
}

.pager > span > span {
display: none;
}

#counter {
margin-top:-30px;
font-weight: bold;
font-size: 18px;
text-align: center;
padding-bottom: 20px;
}
div#carosel .products-5x .product {
width: 196px;
}
div#carosel .mask {
height: auto !important;
}
section#carosel_area {
    background: rgb(255, 235, 219);
    margin-bottom: 40px;
}
section#carosel_area .products-area {
    padding-bottom: 5px;
}
div#carosel .buttons {
    display: none;
}
div#carosel .product article .price {
    margin-top: 0px;
    margin-bottom: -8px;
}

img.hot_details_image {
    height: 40px;
}
.product article .price span {
    font-weight: 400;
    color: #d0021b;
}
span.cur-price span.price-sign {
    color: #d0021b !important;
}
div#carosel .product article .product-hover {
    height: 76% !important;
    background: #fff0;
}
span.old_price_tag {
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 15px;
    color: #d0021b;
}

div#carosel .product article .thumb {
    height: 155px;
}
.product article .thumb img {
    height: 100%;
    width: 100%;
}
div#carosel:nth-child(1) {
    margin-bottom: -42px;
}
@media only screen and (max-width: 400px) {
div#carosel .products-5x .product {
    width: 105px;
}

/* Wishlist cards use the same action treatment as homepage product cards. */
.product article .product-hover.wish-lists {
    background: #091d35;
    border: 0;
    min-height: 76px;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.product:hover article .product-hover.wish-lists,
.product article .product-hover.wish-lists:focus-within {
    opacity: 1;
}

.product article .product-hover.wish-lists .icons {
    display: flex;
    float: none;
    width: 100% !important;
    height: 36px;
}

.product article .product-hover.wish-lists .icons .fa {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.product article .product-hover.wish-lists .icons .fa:hover {
    color: #ef3239;
}

.product article .product-hover.wish-lists .buttons {
    float: none;
    width: 100%;
}

.product article .product-hover.wish-lists .buttons .btn {
    border-radius: 0;
}

.header-quick-actions__link {
    position: relative;
}

.header-area .header-maxi .header-top-right .header-quick-actions__link > .badge.badge-secondary {
    position: absolute;
    top: -8px;
    left: 39px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: 0;
    border-radius: 50% !important;
    background: #ef3239;
    color: #fff !important;
    z-index: 1;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 20%);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
div#carosel span.cur-price {
    display: none;
}
div#carosel .product article .thumb {
    height: 70px;
}
div#carosel .product article .price {
    margin-top: 2px;
    margin-bottom: -10px;
}
.product article .price {
    font-size: 14px;
}
.left-nav-btn {
    left: -10px;
    top: 28px;
}
.right-nav-btn {
    right: -25px;
    background-position: top right;
    top: 28px;
}
div#carosel span.discount_rate {
    text-decoration: none;
    width: 30px;
    height: 30px;
    background: #850c4f;
    border-radius: 100%;
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 12px;
    color: #fff;
    font-weight: 400;
    text-align: center;
    padding-top: 5px;
}


}
/* Hot Deals end */


/* Chanages for implementing product variation start*/
.product article .product-hover .buttons {
    display: block;
}
.product article .tag {
    font-size: 12px;
    color: #000000b3;
    display: block;
    width: 100%;
    margin: 5px 0;
    margin-bottom: 0px;
}


/*Chanages for implementing product variation end */



/** Top Subcategory **/
.subcategory2-li {
    margin-left: 0;
}
/** Top Subcategory **/

/** Navbar Styles **/
.search-button {
    /* border: none; */
    cursor: pointer;
}
/** Navbar Styles **/

/*css for product search*/
.suggestion-area,.suggestion-area1 {
    position: absolute;
    width: 100%;
    background-color: #fff;
    z-index: 11;
    display: block;
    height: auto;
    margin-top: 40px;
}

.suggestion-area2 {
    position: absolute;
    width: 100%;
    background-color: #ffe066;
    z-index: 11;
    display: block;
    height: auto;
    margin-top: 35px;
}

.suggestion-area li img {
    height: 40px;
}


@media only screen and (max-width: 400px) {
    .suggestion-area,.suggestion-area1,.suggestion-area2 {
        position: absolute;
        width: 100%;
        background-color: #fff;
        z-index: 11;
        display: block;
        height: auto;
        top: 51px;
    }
}

.suggestion-area li {
    border-bottom: 1px solid #00000017;
}

.suggestion-area ul,.suggestion-area1 ul,.suggestion-area2 ul{
    margin: 0;
    padding: 0;
}
.suggestion-area li a,.suggestion-area1 li a,.suggestion-area2 li a {
    text-decoration: none;
}

.suggestion-area .search-item,.suggestion-area1 .search-item,.suggestion-area2 .search-item {
    background-color: #ffdb6d;
    padding: 5px;
    list-style: none;
    overflow: hidden;
}
.suggestion-area .search-item .all-result,.suggestion-area1 .search-item .all-result,.suggestion-area2 .search-item .all-result {
    text-align: center;
    margin: 0;
}
.suggestion-area .search-item .all-result a,.suggestion-area1 .search-item .all-result a,.suggestion-area2 .search-item .all-result a {
    border: 1px solid #ddd;
    padding: 2px 10px;
    border-radius: 25px;
}
.suggestion-area .search-item .all-result a:hover,.suggestion-area1 .search-item .all-result a:hover,.suggestion-area2 .search-item .all-result a:hover {
    background-color: #efefef;
}
.suggestion-area .search-item:hover,.suggestion-area1 .search-item:hover,.suggestion-area2 .search-item:hover {
    background-color: #ffcb0061;
}

.suggestion-area .search-item .title-name, .suggestion-area1 .search-item .title-name,.suggestion-area2 .search-item .title-name {
    /* display: inline-block; */
    margin-left: 8px;
}
.suggestion-area .search-item .title-name .subject-name,.suggestion-area1 .search-item .title-name .subject-name {
    color: #848383;
    margin-top: 5px;

}
.suggestion-area .search-item .title-name p,.suggestion-area1 .search-item .title-name p,.suggestion-area2 .search-item .title-name p {
    margin: 0;
}

.inlinecheckbox{
    display: inline-block;
}

/** Subcategory Product Page **/
.subcategory-items {
    border: 1px solid #ced4da;
    padding: 0px;
    margin-bottom: 10px;
    text-align: center;
    background: #eee;
}
.subcategory-items img {
    width: 100%;
    padding: 0px;
}
/** Subcategory Product Page **/

/** Order table design **/
.order-table thead {
    background: #f2f2f2;
    border-bottom: 2px solid #ced4da;
}
.order-table thead th {
    /*border: 1px solid #ced4da;*/
}
.bg-light-gray{
    background: #f2f2f2;
}
/** Order table design **/

/** Cart table **/
#checkout-items tr, #cart-items tr{
    border-bottom: 1px solid #8080801f;
}
#checkout-items a.title, #cart-items a.title{
    font-weight: 600;
    margin-bottom: 3px;
}
#checkout-items thead tr, #cart-items thead tr {
    background: #f2f2f2;
}
/** Cart table **/




.filters .card .card-body #slider-values .slider-value-0 input, .filters .card .card-body #slider-values .slider-value-1 input {
    width: 60px;
}

/** Checkbox **/
.radio-price-set{
    display: none;
}

.radio_style {
    display: inline-block;
    padding: 0px 0px;
    cursor: pointer;
}
/*
 * With how I decided to build this, the position: relative is super important.
 * We're going to position a pseudo element within this element(As it is the containing box)
 */
.radio_style span {
    position: relative;
    line-height: 10px;
}
/*
 * Because we're using pseudo elements, a content property is required to make them appear.
 */

.radio_style span:before,
.radio_style span:after {
    content: '';
}


.radio_style span:before {
    border: 1px solid #596157;
    width: 19px;
    height: 19px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
}

.radio_style span:after {
    background: #6f7000;
    width: 13px;
    height: 13px;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: 300ms;
    opacity: 0;
}


.radio_style input:checked+span:after {
    opacity: 1;
}

/** Checkbox **/
.hidden {
    display: none !important;
}
.main_total_inactive {
    background: #ff00001f;
    text-decoration: line-through;
}
.thanks-purchase {
    background: #c6ffce40;
    padding: 50px 15px 15px 15px;
    text-align: center;
    border-bottom: 5px solid #bbfec4;
}
.thanks-purchase h2 {
    color: #188c06;
}
.thanks-purchase h4 {
    color: #db6843;
    margin-bottom: 20px;
}
.order-details {
    border: 1px solid #80808029;
    margin-top: 20px;
    padding: 10px;
}
.order-details h4 {
    /**border-left: 2px solid #298c06; **/
    padding-left: 10px;
}
.btn-order {
    color: #621717;
    background: #f4da82;
    border-color: transparent;
}
.btn-order:hover {
    background: #de4a2c;
    color: #fff;
    border-color: transparent;
}
.cartadd {
    cursor: pointer;
}
.off-text {
    font-size: 16px;
    color: gray;
}
.cart-product-detail img {
    width: 50px !important;
}
.discount-percent {
    color: #199216;
    font-weight: bold;
    font-size: 22px;
}
.availbility {
    margin-top: 10px;
}
/** Promo Price **/
.old-price {
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: gray;
    font-size: 12px;
}
.old-price .discount-percent{
    font-weight: 500;
    color: #f57224;
}
.product-discount-top2 {
    float: right;
    width: 45px;
    background: #f02424;
    color: #FFF;
    height: 45px;
    position: absolute;
    top: 0px;
    right: 0;
    z-index: 2000;
    border-radius: 0px 0px 14px 103px;
    margin-top: 5px;
    text-align: center;
    font-weight: bold;

}
.product-discount-top {
    width: 22%;
    float: right;
    background: #E64723;
    padding: 3px 45px 15px 15px;
    border-radius: 0px 0px 0px 100%;
    position: absolute;
    color: rgb(255, 255, 255);
    top: 0px;
    right: 0px;
    z-index: 2000;
    height: 55px;
}
.product-discount-top p {
    margin-top: 6px;
    margin-left: 3px;
    font-size: 18px;
}
/** Promo Price **/

/** Product Show **/
#exzoom {
    width: 400px;
    /*height: 400px;*/
}
.pointer{
    cursor: pointer;
}
.add-wishlist{
    cursor: pointer;
}
/** Product Show **/

.mycard{
    width: 210px !important;
    text-align: center;
    background-color: #7ec5ff;
    font-size: 15px;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 10px
}
#carosel_area{
    margin-top: 40px;
}

/*.show1{
  width: 400px;
  height: 400px;
}*/
#show-img { 
    width: 400px; 
    height: 400px; 
}
.small-img {
    width: 90px;
    height: auto;
    margin-top: 10px;
    position: relative;
    left: 0;
    background: #00000000;
    float: left;
    transform: rotate(90deg);
    margin-top: 20px;
}
.small-img .icon-left, .small-img .icon-right {
    width: 23px; 
    height: 24px;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
.small-img .icon-left {
    transform: rotate(180deg);
}
.small-img .icon-right {
    transform: rotate(0deg);
}
.small-img .icon-left:hover, .small-img .icon-right:hover{
  opacity: .5;
}
.small-container {
    width: 400px;
    height: 70px;
    overflow: hidden;
    margin: 0 auto;
}
.small-container div{
  width: 800%;
  position: relative;
}
.small-container img {
    transform: rotate(-90deg);
}

.small-container .show-small-img {
    width: 70px;
    height: 70px;
    margin-right: 10px;
    cursor: pointer;
    float: left;
}
.small-container .show-small-img:last-of-type{
  margin-right: 0;
}

.detail-area .show1 div {
    z-index: 999999999999 !important;
}

/* Key Features block on the product detail page (show.php).
   Content comes from the admin-entered size_guide_description field, so it is raw
   HTML — these rules only tighten the outer spacing and pull the bullet list back
   towards the heading instead of letting the browser default 40px indent apply. */
/* Item Code line on the product detail page. app.css gives h6.pcodes 15px top and
   bottom, which is loose when the line sits alone above the stock badge, so tighten
   it here rather than editing the shared rule in app.css. */
/* Price line on the product detail page. No stylesheet defines .product_price_info,
   so it inherited the browser default <p> margins (~16px top and bottom) on top of a
   stray <br> that added another empty line - a very large gap above Item Code. The
   <br> is gone from show.php; these margins replace it. */
.product_price_info {
    margin-top: 8px;
    margin-bottom: 4px;
}

h6.pcodes.item_code {
    margin-top: 6px;
    margin-bottom: 6px;
}

h6.pcodes.key_features_title {
    margin-top: -5px;
    margin-bottom: 10px;
}

.key_features_body {
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 28px;
}

.key_features_body ul,
.key_features_body ol {
    padding-left: 18px;
    margin: 0 0 8px;
}

.key_features_body > *:last-child {
    margin-bottom: 0;
}

.small-container .show-small-img:last-of-type { margin-right: 0; }
/* Image Zoom */

/* ============================================================
   Horizontal scroll fixes (page could be dragged sideways)
   ============================================================ */
/* ---------------------------------------------------------------
   1) Mobile grid gutter mismatch (<= 767.98px)
   responsive.css drops .container side padding to 7px but the
   Bootstrap .row still pulls -15px, so every row ends up 16px wider
   than the screen: 8px of empty overhang on each side that the page
   can be dragged into. Matching the row margin / column padding to
   the 7px gutter keeps the content in exactly the same place.
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .row {
        margin-left: -7px;
        margin-right: -7px;
    }

    .row > [class*="col-"] {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* ---------------------------------------------------------------
   2) .row lost its flex-wrap in the compiled app.css
   (only the IE-only -ms-flex-wrap survived), so multi-column rows
   never stacked and pushed their right column off-screen - the cart
   page was ~400px wider than the screen because of this.
   --------------------------------------------------------------- */
.row {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   3) Carousel arrows parked outside the carousel
   app.css sets .owl-next { right: -30px } and .owl-prev { left: -15px }.
   Between 992px and ~1050px the container gutter is smaller than that,
   so the next arrow pokes past the right edge of the viewport and the
   whole page can be dragged sideways.
   --------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1080px) {
    .owl-nav .owl-next {
        right: 2px;
    }

    .owl-nav .owl-prev {
        left: 2px;
    }
}

/* ---------------------------------------------------------------
   4) Safety net: never allow the document itself to scroll sideways.
   clip does not create a scroll container, so the sticky header and
   position: fixed elements keep working.
   --------------------------------------------------------------- */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

/* ---------------------------------------------------------------
   Header search field - matches the Figma spec:
     width 448 / height 44 / radius 100 / padding 12 / opacity 1
     gap 12 (between magnifier icon and text)
     background #FFFFFF1F, backdrop-filter blur(10px)
     placeholder #FFFFFFB2 at 14px

   app.css only sets background + padding on
   `.header-area .header-maxi .search-categories input`, and loads
   before this file. responsive.css loads after this file, so the
   wrapper rule below is repeated (.search-categories.search-categories)
   to win the cascade and drop its white background - otherwise it
   would show through the pill's rounded corners.

   Text starts at 40px = 12px padding + 16px icon + 12px gap.
   --------------------------------------------------------------- */

/* Wrapper: 448 x 44, no opaque backdrop behind the pill */
.header-area .header-maxi .search-categories.search-categories {
    width: 448px;
    max-width: 100%;
    height: 44px;
    background: transparent;
    border: 0;
}

/* Phones: responsive.css stretches this box with 108% width + negative
   margins; keep it inside the viewport instead. */
@media (max-width: 767.98px) {
    .header-area .header-maxi .search-categories.search-categories {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* The field itself */
.header-area .header-maxi .search-categories input#search {
    width: 96%;
    height: 44px;
    padding: 12px 12px 12px 40px; /* 12 padding + 16 icon + 12 gap */
    border: 0;
    border-radius: 100px;
    background: #FFFFFF1F;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    opacity: 1;
    outline: none;
    box-shadow: none;
}

/* Magnifier: 12px from the left edge, inside the pill */
.header-area .header-maxi .search-categories .btn-secondary {
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 100%;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 0;
    border-radius: 100px 0 0 100px;
    background: transparent;
    box-shadow: none;
    color: #FFFFFF;
    font-size: 16px;
}

/* Placeholder: #FFFFFFB2, 14px */
.header-area .header-maxi .search-categories input#search::placeholder {
    color: rgba(255, 255, 255, 0.7); /* fallback for browsers without 8-digit hex */
    color: #FFFFFFB2;
    font-size: 14px;
    opacity: 1;
}

.header-area .header-maxi .search-categories input#search::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.7); /* fallback for browsers without 8-digit hex */
    color: #FFFFFFB2;
    font-size: 14px;
    opacity: 1;
}

.header-area .header-maxi .search-categories input#search::-moz-placeholder {
    color: rgba(255, 255, 255, 0.7); /* fallback for browsers without 8-digit hex */
    color: #FFFFFFB2;
    font-size: 14px;
    opacity: 1;
}

.header-area .header-maxi .search-categories input#search:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7); /* fallback for browsers without 8-digit hex */
    color: #FFFFFFB2;
    font-size: 14px;
    opacity: 1;
}

/* ---------------------------------------------------------------
   Header quick actions: [heart] Favourite  |  [user] Login / Sign Up
   Matches the Figma header design. Markup lives in
   includes/header.php (.header-quick-actions).
   --------------------------------------------------------------- */
.header-area .header-maxi .header-top-right {
    float: none;
    margin-right: 28px;
}

.header-area .header-maxi .header-top-right .header-quick-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-area .header-maxi .header-top-right .header-quick-actions__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    float: none;
    margin: 0;
    padding: 0;
}

.header-area .header-maxi .header-top-right .header-quick-actions__link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.header-area .header-maxi .header-top-right .header-quick-actions__link i {
    font-size: 20px;
    line-height: 1;
}

.header-area .header-maxi .header-top-right .header-quick-actions__link:hover,
.header-area .header-maxi .header-top-right .header-quick-actions__link:focus {
    color: #FFFFFF;
    opacity: .85;
    text-decoration: none;
}

/* Narrower desktops/tablets: keep the two actions on one line */
@media (max-width: 1199.98px) {
    .header-area .header-maxi .header-top-right {
        margin-right: 18px;
    }

    .header-area .header-maxi .header-top-right .header-quick-actions {
        gap: 22px;
    }

    .header-area .header-maxi .header-top-right .header-quick-actions__link {
        gap: 8px;
        font-size: 14px;
    }

    .header-area .header-maxi .header-top-right .header-quick-actions__link i {
        font-size: 18px;
    }
}

/* Tablets (768-991): no room for the labels next to the search box,
   so keep only the heart and user icons. Below 768 responsive.css
   hides .header-top-right entirely, same as before. */
@media (max-width: 991.98px) {
    .header-area .header-maxi .header-top-right {
        margin-right: 12px;
    }

    .header-area .header-maxi .header-top-right .header-quick-actions {
        gap: 14px;
    }

    .header-area .header-maxi .header-top-right .header-quick-actions__link span {
        display: none;
    }

    .header-area .header-maxi .header-top-right .header-quick-actions__link i {
        font-size: 20px;
    }
}

/* ---------------------------------------------------------------
   Homepage split banners (index.php -> .group-banners.banner-split)
   Figma: big banner on the left, two stacked banners on the right,
   rounded corners, one consistent gutter.

   Widths: 63.3% + 34.5% + 2.2% gap = 100% (no Bootstrap gutters),
   so the columns line up flush with the container edges.
   --------------------------------------------------------------- */

.banner-split .row {
    gap: 2.2%;
    margin-left: 0;
    margin-right: 0;
}

.banner-split .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

.banner-split .row > .col-md-8 {
    width: 63.3%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.banner-split .row > .col-md-4 {
    width: 34.5%;
    margin-left: auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

/* Rounded, clipped cards */
.banner-split .banner-image {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}

.banner-split .banner-image > a {
    display: block;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.banner-split .banner-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

/* When the right column is hidden (below 992px) the big banner
   takes the full width instead of leaving an empty third. */
@media (max-width: 991.98px) {
    .banner-split .row > .col-md-8 {
        width: 100%;
    }
}

/* ---------------------------------------------------------------
   Product card hover actions (partials/product-item.php)

   Figma hover state:
   - wishlist + quick-view as light circular buttons, top-right
   - the bottom action becomes a navy "View More Info" CTA

   Kept behind (hover:hover) so touch devices keep the normal
   Add to Cart button. Absolute positioning means revealing the
   actions never changes the card's height.
   --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .dc-card article,
    .dc-card--cart article {
        position: relative;
    }

    /* quick actions, top right over the image */
    .dc-card article .product-hover .icons,
    .dc-card--cart article .product-hover .icons {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 3;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8px;
        width: auto;
        height: auto;
        float: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-transition: opacity .22s ease, visibility .22s ease, -webkit-transform .22s ease;
        transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
    }

    .dc-card:hover article .product-hover .icons,
    .dc-card:focus-within article .product-hover .icons,
    .dc-card--cart:hover article .product-hover .icons,
    .dc-card--cart:focus-within article .product-hover .icons,
    .dc-card article .product-hover .icons.has-wishlist,
    .dc-card article .product-hover .icons:has(.remove-wishlist),
    .dc-card--cart article .product-hover .icons.has-wishlist,
    .dc-card--cart article .product-hover .icons:has(.remove-wishlist) {
        opacity: 1;
        visibility: visible;
        -webkit-transform: none;
        transform: none;
    }

    .dc-card article .product-hover .icons .icon-liked,
    .dc-card article .product-hover .icons a.fa.fa-eye,
    .dc-card--cart article .product-hover .icons .icon-liked,
    .dc-card--cart article .product-hover .icons a.fa.fa-eye {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        float: none;
        border: 0;
        border-radius: 50%;
        background: #eef0f2;
        color: #1a1a1a;
        font-size: 16px;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
        -webkit-transition: background-color .2s ease, -webkit-transform .15s ease;
        transition: background-color .2s ease, transform .15s ease;
    }

    .dc-card article .product-hover .icons .icon-liked:hover,
    .dc-card article .product-hover .icons a.fa.fa-eye:hover,
    .dc-card--cart article .product-hover .icons .icon-liked:hover,
    .dc-card--cart article .product-hover .icons a.fa.fa-eye:hover {
        background: #e2e5e9;
        color: #000;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    .dc-card article .product-hover .icons .icon-liked .fa,
    .dc-card--cart article .product-hover .icons .icon-liked .fa {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
        float: none;
        font-size: 15px;
        color: inherit;
    }

    /* outline heart until the product is saved, solid once it is */
    .dc-card article .product-hover .icons .icon-liked .fa.add-wishlist::before,
    .dc-card--cart article .product-hover .icons .icon-liked .fa.add-wishlist::before {
        content: "\f08a";
    }

    .dc-card article .product-hover .icons .icon-liked .fa.remove-wishlist::before,
    .dc-card--cart article .product-hover .icons .icon-liked .fa.remove-wishlist::before {
        content: "\f004";
    }

    .dc-card article .product-hover .icons .icon-liked .fa.remove-wishlist,
    .dc-card--cart article .product-hover .icons .icon-liked .fa.remove-wishlist,
    .icon-liked .fa.remove-wishlist,
    .icon-liked .remove-wishlist {
        color: #e53e3e !important;
    }

    .dc-card article .product-hover .icons .icon-liked .badge,
    .dc-card--cart article .product-hover .icons .icon-liked .badge {
        display: none;
    }

    /* navy CTA shown in place of the normal bottom action */
    .dc-card__hover-cta {
        position: absolute;
        right: 14px;
        bottom: 14px;
        left: 14px;
        z-index: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 38px;
        border-radius: 10px;
        background: #E6E8EA;
        color: #091D35;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity .2s ease, visibility .2s ease, background-color .15s ease;
        transition: opacity .2s ease, visibility .2s ease, background-color .15s ease;
    }

    .dc-card:hover .dc-card__hover-cta,
    .dc-card:focus-within .dc-card__hover-cta,
    .dc-card--cart:hover .dc-card__hover-cta,
    .dc-card--cart:focus-within .dc-card__hover-cta {
        opacity: 1;
        visibility: visible;
    }

    .dc-card__hover-cta:hover {
        background: #091D35;
        color: #fff;
        text-decoration: none;
    }

    .dc-card--cart article .product-hover .buttons {
        -webkit-transition: opacity .2s ease, visibility .2s ease;
        transition: opacity .2s ease, visibility .2s ease;
    }

    .dc-card--cart:hover article .product-hover .buttons,
    .dc-card--cart:focus-within article .product-hover .buttons {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .dc-card--cart:hover article .product-hover:not(:has(.dc-card__hover-cta)) .buttons,
    .dc-card--cart:focus-within article .product-hover:not(:has(.dc-card__hover-cta)) .buttons {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .dc-card--cart article .product-hover:not(:has(.dc-card__hover-cta)) .buttons .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        border: 0;
        border-radius: 10px !important;
        background: #E6E8EA;
        color: #091D35;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
    }

    .dc-card--cart article .product-hover:not(:has(.dc-card__hover-cta)) .buttons .btn:hover {
        background: #091D35;
        color: #fff;
    }

    .dc-card--top-selling .dc-card__action-button,
    .dc-card--best-selling .dc-card__action-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        border: 0;
        border-radius: 10px !important;
        background: #E6E8EA;
        color: #091D35;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
    }

    .dc-card--top-selling:hover .dc-card__action-button,
    .dc-card--top-selling:focus-within .dc-card__action-button,
    .dc-card--top-selling .dc-card__action-button:hover,
    .dc-card--best-selling:hover .dc-card__action-button,
    .dc-card--best-selling:focus-within .dc-card__action-button,
    .dc-card--best-selling .dc-card__action-button:hover {
        background: #091D35;
        color: #fff;
    }
}

/* Touch and mobile product card favourite button */
@media (max-width: 991px), (hover: none) {
    .dc-card article,
    .dc-card--cart article {
        position: relative;
    }

    /* Wishlist grid uses the same card sizing and action treatment as homepage cards. */
    .wishlist-products {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .wishlist-products > .product {
        flex: 0 0 220px;
        width: 220px;
        max-width: 220px;
        height: 390px;
    }

    .wishlist-products > .product > article {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .wishlist-products > .product > article > .dc-card__link {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .wishlist-products > .product > article .dc-card__body {
        flex: 1 1 auto;
    }

    .wishlist-products .product-hover {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex: 0 0 auto;
    }

    .wishlist-products .product-hover .dc-card__hover-cta {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .wishlist-products .product-hover .buttons {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .wishlist-products .product-hover .buttons .btn {
        display: block;
    }

    .wishlist-products .dc-card__action-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        border: 0;
        border-radius: 10px !important;
        background: #E6E8EA;
        color: #091D35;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
    }

    .wishlist-products .product:hover .dc-card__action-button,
    .wishlist-products .product:focus-within .dc-card__action-button,
    .wishlist-products .dc-card__action-button:hover {
        background: #091D35;
        color: #fff;
    }

    @media (max-width: 575.98px) {
        .wishlist-products {
            justify-content: center;
            gap: 16px;
        }

        .wishlist-products > .product {
            flex-basis: min(220px, calc(50% - 8px));
            width: min(220px, calc(50% - 8px));
            max-width: min(220px, calc(50% - 8px));
        }
    }

    @media (max-width: 991px), (hover: none) {
        .wishlist-products .product-hover .buttons {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
    }

    .dc-card article .product-hover .icons,
    .dc-card--cart article .product-hover .icons {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 3;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 6px;
        width: auto;
        height: auto;
        opacity: 1;
        visibility: visible;
        -webkit-transform: none;
        transform: none;
    }

    .dc-card article .product-hover .icons .icon-liked,
    .dc-card--cart article .product-hover .icons .icon-liked {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
        color: #15171c;
        cursor: pointer;
    }

    .dc-card article .product-hover .icons a.fa.fa-eye,
    .dc-card--cart article .product-hover .icons a.fa.fa-eye {
        display: none;
    }

    .dc-card article .product-hover .icons .icon-liked .fa,
    .dc-card--cart article .product-hover .icons .icon-liked .fa {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 14px;
    }

    .dc-card article .product-hover .icons .icon-liked .fa.add-wishlist::before,
    .dc-card--cart article .product-hover .icons .icon-liked .fa.add-wishlist::before {
        content: "\f08a";
    }

    .dc-card article .product-hover .icons .icon-liked .fa.remove-wishlist::before,
    .dc-card--cart article .product-hover .icons .icon-liked .fa.remove-wishlist::before {
        content: "\f004";
    }

    .dc-card article .product-hover .icons .icon-liked .fa.remove-wishlist,
    .dc-card--cart article .product-hover .icons .icon-liked .fa.remove-wishlist {
        color: #e53e3e !important;
    }

    .dc-card article .product-hover .icons .icon-liked .badge,
    .dc-card--cart article .product-hover .icons .icon-liked .badge {
        display: none;
    }
}