﻿.ss_garments-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:4rem}
.ss_garments-grid .ss_garment-img {display:block;position:relative;background-color:#f7f7f7;margin-bottom:3rem;padding:1rem 1rem 0}
.ss_garments-grid .ss_garment-img img {width:100%;height:268px;display:block;position:absolute;opacity:0;will-change:opacity;object-fit:cover}
.ss_garments-grid .ss_garment-img img.active {opacity:1;position:relative}
.slider-dots {bottom:calc(-1.5rem - 5px) !important}
.slider-arrow {color:#cacaca !important}
.ss_garments-grid a.ss_garment-name {font-family:Freeman, Montserrat, sans-serif;text-decoration: none;color:#000;font-size:130%;padding-bottom:0.5rem;display:block;border-bottom:solid 1px #eee;margin-bottom:0.5rem}
.ss_garments-grid a.ss_garment-name:hover {color:#DB297A}
.ss_garments-grid p.ss_garment-desc {line-height:130%;color:#999;font-size:95%;font-style:italic;padding-bottom:0.5rem}
.ss_garments-grid p.ss_garment-price {display:flex;align-items:center;font-weight:700;font-size:120%;gap:0.4rem;padding-bottom:0.5rem;border-bottom:solid 1px #eee;margin-bottom:0.5rem}
.ss_garments-grid p.ss_garment-price::before {content:"From:";display:block;font-size:75%;font-weight:400;color:#999}
.ss_garments-grid p.ss_garment-price::after {content:"(ex. VAT)";display:block;font-size:70%;font-weight:400;color:#000}
.ss_garments-grid p.ss_garment-sizes {display:flex;align-items:center;font-size:90%;gap:1rem;font-weight:500;padding:0 0 0.5rem}
.ss_garments-grid p.ss_garment-sizes::before {content:"Available sizes:";display:block;font-weight:400;color:#999}
.ss_garments-grid .ss_garment-colours {display:flex;align-items:center;gap:0.5rem}
.ss_garments-grid .ss_garment-colours span {display:block;height:20px;width:20px}
.ss_garments-grid .ss_garment-colours span.white {outline:solid 1px #ccc;outline-offset:-1px}
.lbljet_black_fire_red {outline:solid 3px #cc0000;outline-offset:-3px}
.lbljet_black_gold {outline:solid 3px #ffc600;outline-offset:-3px}
.lbljet_black_heather_grey {outline:solid 3px #ccc;outline-offset:-3px}
.lbljet_black_sun_yellow {outline:solid 3px #ffff00;outline-offset:-3px}
.lbljet_black_sapphire {outline:solid 3px #028dc6;outline-offset:-3px}
.lblwhite_black {outline:solid 3px #000;outline-offset:-3px}
.lblwhite_heather {outline:solid 3px #b0afb0;outline-offset:-3px}
.lblwhite_navy {outline:solid 3px #0c3067;outline-offset:-3px}
.lblwhite_denim {outline:solid 3px #7db1d3;outline-offset:-3px}
.lblwhite_kelly {outline:solid 3px #009900;outline-offset:-3px}
.lbljet_black_charcoal {outline:solid 3px #737373;outline-offset:-3px}
.lbljet_black_hot_pink {outline:solid 3px #fc1da7;outline-offset:-3px}
.lbljet_black_sun_yellow {outline:solid 3px #ffff00;outline-offset:-3px}
.lblheather_grey_jet_black {outline:solid 3px #000;outline-offset:-3px}
.lbloxford_navy_heather_grey {outline:solid 3px #ccc;outline-offset:-3px}
.lblwhite_royal {outline:solid 3px #003399;outline-offset:-3px}
.lblsunflower_kelly {outline:solid 3px #007d3c;outline-offset:-3px}
.lblgrey_lime {outline:solid 3px #70b966;outline-offset:-3px}
.lblroyal_navy {outline:solid 3px #0c3067;outline-offset:-3px}
.border-white {outline:solid 3px #fff;outline-offset:-4px;border:solid 1px #ccc}
.ss_garments-grid .ss_garment-colours p {color:#999;font-size:90%;padding:0}

/**Collections**/
.ss_collections-banner {position:relative;overflow:hidden}
.ss_collections-banner-inner {display:flex;width:100%}
.ss_collections-banner-inner img, .ss_collections-banner-inner a {width:50%;display:block}
.ss_collections-banner-inner a img {width:100%}
.ss_collections-track {display:flex;transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);width:100%}
.ss_collections-track > div {min-width:100%;flex-shrink:0}
.ss_collections-arrow {position:absolute;top:50%;transform:translateY(-50%);z-index:10;border:none;padding:10px 14px;background:rgba(0,0,0,0.5);color:#fff;font-size:18px;cursor:pointer;border-radius:4px}
.ss_collections-arrow.left {left:15px}
.ss_collections-arrow.right {right:15px}
.ss_collections-wrapper {position:relative}
.ss_collections-wrapper .slider-dots {bottom:-2rem !important}
.ss_collections-links {display:grid;grid-template-columns:repeat(4, 1fr);margin:6rem 0 4rem;column-gap:1rem}
.ss_collections-links img {width:100%;height:auto}
.ss_all-links {display:flex;justify-content:center;margin-bottom:4rem}

/**GarmentsHome**/
.ss_banner-garments {background-color:#759fc2;display:flex;justify-content:center;position:relative}
.ss_banner-garments img {width:auto;height:420px}
.ss_banner-garments-inner {position:absolute;bottom:0;background-color: rgba(63, 89, 104, 0.5);width:100%}
.ss_banner-garments h1 {color:#fff;font-family:Freeman, Montserrat, sans-serif;font-size:290%;text-transform:uppercase;padding:2rem 0}

.ss_garments-types {display:grid;grid-template-columns:repeat(6, 1fr);column-gap:2rem;padding:4rem 3rem;row-gap:3rem}
.ss_garments-types a {display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#000;font-weight:800;transition:transform .4s;text-align:center}
.ss_garments-types img {width:100%;height:auto}
.ss_garments-types a span {margin-top:1rem}
.ss_garments-types span.view-all {grid-column-start:6;display:flex;align-items:center}
.ss_garments-types span.view-all a {font-weight:400;font-size:110%}

.ss_default-content h3.garment-best-sellers {font-family:Freeman, Montserrat, sans-serif;color:#000;font-size:200%;padding:2rem 0}
.best-sellers {grid-template-columns:repeat(4, 1fr);margin-bottom:6rem}
.ss_garments-all {display:flex;justify-content:center;margin:4rem 0 2rem}

/**AdjustHeigh/WidthProductImages**/
.ss_garment img.full-height {height:calc(269px + 1rem);margin-top:-1rem}
.ss_garment img.full-width {width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem}


/**Mobile**/
@media screen and (max-width: 990px) {
    .ss_banner-garments {width:100%;overflow:hidden}
    .ss_banner-garments h1 {padding:2rem 1rem}
    .ss_garments-grid {grid-template-columns:repeat(1, 1fr)}
    .ss_garments-types {grid-template-columns:repeat(2, 1fr);padding:0;row-gap:2rem}
    .ss_garments-types span.view-all {grid-column-start:inherit}
    .ss_garments-grid .ss_garment-img img {object-fit:contain}
}

/**Tablet**/
@media screen and (min-width: 650px) and (max-width: 990px) {
    .ss_garments-types {grid-template-columns:repeat(3, 1fr)}
    .ss_garments-types span.view-all {justify-content:center;grid-column:span 3 / span 3}
    .ss_garments-grid {grid-template-columns:repeat(3, 1fr);gap:2rem}
}