/*
styles for Product Highlight, Buying Guide Block and Product Highlight Carousel
note that the majority of the DOM for these elements is generated in SFCC! if DOM is changed in SFCC,
styles will need to be updated here.
SVGs have been turned into inline 'data:image' defs to avoid loading various additional files.
how to convert all turnto SVG files into inline defs:
- svgs are in the SFCC codebase. filename search 'curvestars' to find them.
- use find replace with regex \n to convert to remove line breaks
- find replace all " with '
- find replace all hashes with %23
- style def should look like this:
background: url("data:image/svg+xml;utf8,[YOUR_CONVERTED_SVG_CODE_PASTED_HERE]");
*/
*, ::after, ::before {
box-sizing: border-box;
}
.product-tile {
font-family: "ProximaNova", sans-serif;
font-weight: 400;
color: #1a1a1a;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.product-tile a, .product-tile a:hover, .product-tile a:visited, .product-tile a:active {
color: #1a1a1a !important;
text-decoration: none !important;
}
.product-tile .tablet-only, .product-tile .tablet-plus {
display: none !important;
}
.product-tile .badge-icon {
top: 0 !important;
left: 0 !important;
position: absolute;
width: auto !important;
z-index: 1;
color: #fff;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
background: transparent !important;
}
.product-tile .badge-icon .product-badge-text {
padding: 2px 6px;
letter-spacing: .8px;
color: #fff;
font-size: 10px;
line-height: 12px;
font-weight: 700;
background: #1a1a1a;
display: block;
margin: 4px 4px 0;
width: fit-content;
}
.product-tile .product-image {
padding: 0 24px 0 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.product-tile .product-image > .thumb-link {
border: 1px solid #eee;
display: block;
}
.product-tile .product-tile-img {
width: 100%;
border: 1px solid #eee;
}
.product-tile .servings-flavors {
font-size: 12px;
line-height: 16px;
font-weight: 400;
margin: 5px 0;
text-align: center;
}
.product-tile .productitemContentWrapper {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
display: -ms-flexbox !important;
-ms-flex-direction: column !important;
-ms-flex-positive: 1 !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
}
.product-tile .product-brand {
color: #636466;
font-size: 10px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
}
.product-tile .brand-product-name {
font-size: 16px;
line-height: 20px;
font-weight: 400;
margin: 5px 0;
}
.product-tile .atc-servings {
display: none;
}
.product-tile .product-review {
font-size: 13px;
margin-bottom: 10px;
}
.product-tile .TTstars {
display: inline-block;
vertical-align: middle;
background-size: 72px !important;
background-repeat: no-repeat !important;
background-position: 0 0 !important;
width: 72px;
height: 14px;
}
.product-tile .TTstars.TTrating-0-0 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-0-5 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-1-0 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-1-5 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-2-0 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-2-5 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-3-0 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-3-5 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-4-0 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-4-5 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars.TTrating-5-0 {
background: url("data:image/svg+xml;utf8,");
}
.product-tile .TTstars span {
padding-left: .125rem;
}
.product-tile .TTstars + span::before {
content: "(";
}
.product-tile .TTstars + span::after {
content: ")";
}
.product-tile .product-promo-container {
margin: 0 0 12px;
}
.product-tile .product-promo {
background: #017080;
color: #fff;
display: -webkit-box;
max-width: max-content;
word-break: break-all;
font-size: 12px;
line-height: 20px;
font-weight: 700;
margin: 4px 0;
padding: 2px 8px;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.product-tile .product-pricing {
font-size: 18px;
font-weight: 700;
line-height: 18px;
}
.product-tile .product-pricing .product-sales-price {
color: #e60d2e;
}
.product-tile .product-pricing .product-former-price-strike {
color: #636466;
text-decoration: line-through;
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
.product-tile .routine-price {
font-size: 13px;
line-height: 17px;
font-weight: 400;
margin: 4px 0;
}
.product-tile .routine-price .tab {
display: none;
}
.product-tile .add-to-cart-wrap {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
-ms-flex-positive: 1 !important;
flex-grow: 1 !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
.product-tile .add-to-cart-wrap button {
border-radius: 0;
appearance: button;
cursor: pointer;
box-sizing: border-box;
display: inline-block;
letter-spacing: .2px;
padding: 16px 32px;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
font-weight: 700;
font-size: 14px;
line-height: 14px;
overflow: unset;
position: relative;
width: 100%;
background: #1a1a1a;
color: #fff;
border: 1px solid #1a1a1a;
margin-top: 24px;
padding: 16px 32px;
line-height: 14px;
}
.product-tile .add-to-cart-wrap button:not(:disabled) {
cursor: pointer;
}
.product-tile .add-to-cart-wrap button.secondary {
color: #1a1a1a;
border: 1px solid #1a1a1a;
background-color: #fff;
}
.product-tile .add-to-cart-wrap button.secondary:hover {
color: #fff;
background-color: #1a1a1a;
}
.producttile-carousel .product-image > .thumb-link {
border: 1px solid #eee;
display: block;
min-height: 160px;
}
.producttile-carousel .product-tile-img {
border: none
}
@media only screen and (min-width: 768px) {
.product-tile .mobile-only {
display: none !important;
}
.product-tile .tablet-only, .product-tile .tablet-plus {
display: block !important;
}
.product-tile .product-image {
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
padding-right: 48px;
}
.product-tile .productitemContentWrapper {
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
.product-tile .routine-price .mob {
display: none;
}
.product-tile .routine-price .tab {
display: inline;
}
}
@media only screen and (min-width: 1024px) {
.product-tile .product-image {
-ms-flex: 0 0 33%;
flex: 0 0 33%;
max-width: 33%;
}
.product-tile .productitemContentWrapper {
-ms-flex: 0 0 66%;
flex: 0 0 66%;
max-width: 66%;
}
}
.product-tile.buyguide .product-image, .product-tile.buyguide .productitemContentWrapper {
padding: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.product-tile.buyguide .product-image-inner {
width: 200px;
position: relative;
margin: 0 auto;
}
.product-tile.buyguide .brand-product-name {
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 22px;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.product-tile.buyguide .more-details {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e7e6e6;
}
.product-tile.buyguide .servings-flavors,
.product-tile.buyguide .product-brand,
.product-tile.buyguide .routine-price,
.product-tile.buyguide .product-promo-container {
display: none !important;
}
@media only screen and (min-width: 1024px) {
.product-tile.buyguide .product-image, .product-tile.buyguide .productitemContentWrapper {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.product-tile.buyguide .product-image {
padding-right: 24px;
}
.product-tile.buyguide .product-image-inner {
width: 100%;
margin: 0;
}
}
.producttile-carousel .product-tile .product-tile-img {
width: auto;
max-height: 100%;
margin: 0 auto;
}
.producttile-carousel .product-tile {
display: flex;
-ms-flex-direction: column !important;
flex-direction: column !important;
padding: 0 24px;
border-right: 1px solid #e7e6e6;
}
.producttile-carousel .product-tile:last-child {
border-right: none;
}
.producttile-carousel .product-tile .badge-icon {
left: 24px !important;
}
.producttile-carousel .product-tile .product-image {
padding: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.producttile-carousel .product-tile .productitemContentWrapper {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.producttile-carousel .product-tile .add-to-cart-wrap {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
-ms-flex-positive: 1 !important;
flex-grow: 1 !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
}
.gnc-producttile .product-tile-title {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
padding: 0 0 24px;
}
.gnc-producttile .product-tile-title h3 {
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 28px;
text-transform: uppercase;
padding: 0;
}
.gnc-producttile .product-tile-title a {
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 14px;
text-transform: uppercase;
text-decoration: underline;
color: #1a1a1a;
-ms-flex-line-pack: center;
align-content: center;
}
@media only screen and (max-width: 768px) {
.gnc-producttile .product-tile-title h3 {
font-size: 20px;
}
.gnc-producttile .product-tile-title a {
font-size: 12px;
}
}