/** Shopify CDN: Minification failed
Line 825:11 Expected ":"
**/
:root {
--hexes: url("data:image/svg+xml,%3Csvg width='401' height='152' viewBox='0 0 401 152' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M95.0177 17.0003L47.5051 44.0348L4.70877e-06 17.0003L0 -37.0759L47.5051 -64.1103L95.0177 -37.0759L95.0177 17.0003Z' fill='%2353B7BA'/%3E%3Cpath d='M146.513 103.111L99 130.146L51.4949 103.111L51.4949 49.0349L99 22.0005L146.513 49.0349V103.111Z' fill='%2384DADE' fill-opacity='0.5'/%3E%3Cpath d='M301.013 17.0005L253.5 44.0349L205.995 17.0005V-37.0757L253.5 -64.1102L301.013 -37.0757V17.0005Z' fill='%230A1E46'/%3E%3Cpath d='M352.518 103.095L305.005 130.13L257.5 103.095V49.0189L305.005 21.9845L352.518 49.0189V103.095Z' fill='%2384DADE'/%3E%3Cpath d='M198.018 17.0003L150.505 44.0348L103 17.0003L103 -37.0759L150.505 -64.1104L198.018 -37.0759V17.0003Z' fill='%2384DADE'/%3E%3Cpath d='M404 17.0005L356.487 44.0349L308.982 17.0005V-37.0757L356.487 -64.1102L404 -37.0757L404 17.0005Z' fill='%2353B7BA'/%3E%3Cpath d='M404.518 189.077L357.005 216.111L309.5 189.077V135L357.005 107.966L404.518 135L404.518 189.077Z' fill='%23081C46'/%3E%3Cpath d='M455.518 103.095L408.005 130.13L360.5 103.095V49.0189L408.005 21.9845L455.518 49.0189V103.095Z' fill='%2300BABC'/%3E%3C/svg%3E");
--arrow: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="31" height="30" viewBox="0 0 31 30" fill="none"%3E%3Cg%3E%3Cpath d="M15.8347 11.25L21.1384 16.5538L19.3697 18.3213L15.8347 14.785L12.2997 18.3213L10.5309 16.5538L15.8347 11.25Z" fill="white"/%3E%3C/g%3E%3C/svg%3E');
--icon-filter: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4' y1='2' x2='14' y2='2' stroke='white' stroke-width='2'/%3E%3Cline x1='4' y1='7' x2='10' y2='7' stroke='white' stroke-width='2'/%3E%3Cline x1='4' y1='12' x2='12' y2='12' stroke='white' stroke-width='2'/%3E%3Ccircle cx='1' cy='2' r='1' fill='white'/%3E%3Ccircle cx='1' cy='7' r='1' fill='white'/%3E%3Ccircle cx='1' cy='12' r='1' fill='white'/%3E%3C/svg%3E");
--icon-sort: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.85109 1.45851L6.34757 0.962034C6.07337 0.687836 5.62881 0.687836 5.35461 0.962034L5.85109 1.45851ZM2.35461 3.96203L1.85813 4.45851L2.85109 5.45147L3.34757 4.95499L2.35461 3.96203ZM8.35461 4.95499L8.85109 5.45147L9.84405 4.45851L9.34757 3.96203L8.35461 4.95499ZM6.55322 12.5415L6.55322 1.45851L5.14896 1.45851L5.14896 12.5415L6.55322 12.5415ZM3.34757 4.95499L6.34757 1.95499L5.35461 0.962034L2.35461 3.96203L3.34757 4.95499ZM5.35461 1.95499L8.35461 4.95499L9.34757 3.96203L6.34757 0.962034L5.35461 1.95499Z' fill='%23021D49' fill-opacity='0.6'/%3E%3Cpath d='M12.8511 12.5415L12.3546 13.038C12.6288 13.3122 13.0733 13.3122 13.3475 13.038L12.8511 12.5415ZM16.3475 10.038L16.844 9.54148L15.8511 8.54853L15.3546 9.04501L16.3475 10.038ZM10.3475 9.04501L9.85106 8.54853L8.8581 9.54149L9.35458 10.038L10.3475 9.04501ZM12.1489 1.45851L12.1489 12.5415L13.5532 12.5415L13.5532 1.45851L12.1489 1.45851ZM15.3546 9.04501L12.3546 12.045L13.3475 13.038L16.3475 10.038L15.3546 9.04501ZM13.3475 12.045L10.3475 9.04501L9.35458 10.038L12.3546 13.038L13.3475 12.045Z' fill='%23021D49' fill-opacity='0.6'/%3E%3C/svg%3E");
--zoom: url("data:image/svg+xml,%3Csvg width='13' height='7' viewBox='0 0 13 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='13' y1='0.5' x2='4' y2='0.499999' stroke='%2384DADE'/%3E%3Cline x1='12' y1='3.5' x2='-4.37114e-08' y2='3.5' stroke='%2384DADE'/%3E%3Cline x1='11' y1='6.5' x2='4' y2='6.5' stroke='%2384DADE'/%3E%3C/svg%3E");
--close: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07373 1L8.9999 9' stroke='%234A5E7D' stroke-linecap='round'/%3E%3Cpath d='M1 9L8.92617 1' stroke='%234A5E7D' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-frown: url("data:image/svg+xml,%3Csvg width='42' height='52' viewBox='0 0 42 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='21' cy='21' r='20' stroke='%2384DADE' stroke-width='2'/%3E%3Ccircle cx='26.8802' cy='16.8001' r='0.846667' fill='%23021D49' stroke='%23021D49' stroke-width='1.66667'/%3E%3Ccircle cx='15.1199' cy='16.8001' r='0.846667' fill='%23021D49' stroke='%23021D49' stroke-width='1.66667'/%3E%3Cpath d='M13.4399 29.4002L28.5599 25.2002' stroke='%23021D49' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
--new: url("data:image/svg+xml,%3Csvg width='44' height='18' viewBox='0 0 44 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L38 0L44 9L38 18H0V0Z' fill='%2384DADE'/%3E%3Cpath d='M13.8999 4.27273V13H12.4936L8.38139 7.0554H8.30895V13H6.72798V4.27273H8.14276L12.2507 10.2216H12.3274V4.27273H13.8999ZM15.6225 13V4.27273H21.2987V5.59801H17.2035V7.96733H21.0046V9.29261H17.2035V11.6747H21.3327V13H15.6225ZM24.7482 13L22.2852 4.27273H23.9854L25.5579 10.6861H25.6388L27.3178 4.27273H28.8647L30.5479 10.6903H30.6246L32.1971 4.27273H33.8974L31.4343 13H29.8746L28.1275 6.87642H28.0593L26.3079 13H24.7482Z' fill='%23021D49'/%3E%3C/svg%3E%0A");
--sale: url("data:image/svg+xml,%3Csvg width='44' height='18' viewBox='0 0 44 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L38 0L44 9L38 18H0V0Z' fill='%23F26522'/%3E%3Cpath d='M10.3928 6.67188C10.353 6.29972 10.1854 6.00994 9.88991 5.80256C9.5973 5.59517 9.21662 5.49148 8.74787 5.49148C8.41832 5.49148 8.13565 5.54119 7.89986 5.64062C7.66406 5.74006 7.48366 5.875 7.35866 6.04545C7.23366 6.21591 7.16974 6.41051 7.1669 6.62926C7.1669 6.81108 7.2081 6.96875 7.29048 7.10227C7.37571 7.2358 7.49077 7.34943 7.63565 7.44318C7.78054 7.53409 7.94105 7.6108 8.11719 7.6733C8.29332 7.7358 8.47088 7.78835 8.64986 7.83097L9.46804 8.03551C9.79759 8.11222 10.1143 8.21591 10.4183 8.34659C10.7251 8.47727 10.9993 8.64205 11.2408 8.84091C11.4851 9.03977 11.6783 9.27983 11.8203 9.56108C11.9624 9.84233 12.0334 10.1719 12.0334 10.5497C12.0334 11.0611 11.9027 11.5114 11.6413 11.9006C11.38 12.2869 11.0021 12.5895 10.5078 12.8082C10.0163 13.0241 9.42116 13.1321 8.7223 13.1321C8.04332 13.1321 7.45384 13.027 6.95384 12.8168C6.45668 12.6065 6.06747 12.2997 5.78622 11.8963C5.50781 11.4929 5.35724 11.0014 5.33452 10.4219H6.88991C6.91264 10.7259 7.00639 10.9787 7.17116 11.1804C7.33594 11.3821 7.55043 11.5327 7.81463 11.6321C8.08168 11.7315 8.37997 11.7812 8.70952 11.7812C9.05327 11.7812 9.3544 11.7301 9.61293 11.6278C9.87429 11.5227 10.0788 11.3778 10.2266 11.1932C10.3743 11.0057 10.4496 10.7869 10.4524 10.5369C10.4496 10.3097 10.3828 10.1222 10.2521 9.97443C10.1214 9.82386 9.93821 9.69886 9.70241 9.59943C9.46946 9.49716 9.19673 9.40625 8.88423 9.3267L7.89134 9.07102C7.17259 8.88636 6.6044 8.60653 6.18679 8.23153C5.77202 7.85369 5.56463 7.35227 5.56463 6.72727C5.56463 6.21307 5.70384 5.76278 5.98224 5.37642C6.26349 4.99006 6.6456 4.69034 7.12855 4.47727C7.61151 4.26136 8.15838 4.15341 8.76918 4.15341C9.38849 4.15341 9.93111 4.26136 10.397 4.47727C10.8658 4.69034 11.2337 4.98722 11.5007 5.3679C11.7678 5.74574 11.9055 6.1804 11.9141 6.67188H10.3928ZM14.4229 13H12.7354L15.8079 4.27273H17.7596L20.8363 13H19.1488L16.8178 6.0625H16.7496L14.4229 13ZM14.4783 9.57812H19.0806V10.848H14.4783V9.57812ZM21.9858 13V4.27273H23.5668V11.6747H27.4105V13H21.9858ZM28.7827 13V4.27273H34.4588V5.59801H30.3636V7.96733H34.1648V9.29261H30.3636V11.6747H34.4929V13H28.7827Z' fill='white'/%3E%3C/svg%3E%0A");
--best-seller: url('data:image/svg+xml,');
--merch-pick: url('data:image/svg+xml,');
--dark-blue: #021d49;
--dark-blue-5pc: #021D490D;
--dark-blue-10pc: #021D491A;
--dark-blue-45pc: #021d4973;
--dark-blue-50pc: #021d4980;
--dark-blue-60pc: #021D4999;
--dark-blue-70pc: #021D49B2;
--grey: #f3f4f6;
--teal: #84dade;
--dark-teal: #00b1b4;
--orange: #f26522;
}
.collection-body {
background: white!important;
font-family: Inter;
}
.container-1440 {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 2rem;
}
.coll-wrap {
padding: 0 0 0 3rem;
background-color: white;
}
.collection-breadcrumb {
padding: 2rem 0 4rem 0;
}
.collection-breadcrumb-list {
font-family: Inter;
font-size: 14px;
font-weight: 500;
line-height: normal;
text-align: left;
color: #021D4999;
list-style: none;
padding: 0;
}
.collection-breadcrumb-list>li+li::before {
padding: 0 5px;
content: ">";
}
.collection-breadcrumb-list > li {
display: inline-block;
}
.collection-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border-radius: 20px;
background-color: var(--grey);
height: 152px;
margin: 0 2rem 2rem;
padding: 2rem;
background-image: var(--hexes);
background-repeat: no-repeat;
background-size: contain;
background-position: right;
}
.collection-header-title h1 {
width: 700px;
font-size: 36px;
font-weight: 600;
line-height: 39.6px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue);
font-family: 'MuseoSans-700';
}
.collection-header-learn-more {
cursor: pointer;
text-decoration: underline;
}
.collection-product-count {
font-family: Inter;
font-size: 16px;
font-weight: 700;
line-height: 21.6px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue);
}
.collection-info {
padding: 0 2rem 2rem 0;
overflow: auto;
}
.showmore,
.showless {
font-size: 12px;
font-weight: 400;
line-height: 16.2px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue-70pc);
margin-top: 0.5rem!important;
text-decoration: underline;
cursor: pointer;
}
.filter-selection-wrap {
width: 100%;
display: none;
background: white;
}
.filter-selection {
display: flex;
align-items: center;
}
.filter-selection-clearall {
font-size: 12px;
font-weight: 500;
line-height: 16.2px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue-70pc);
text-decoration: underline;
cursor: pointer;
}
.filter-selection span {
display: flex;
flex-wrap: wrap;
align-content: center;
height: 44px;
background-color: var(--dark-blue-5pc);
border-radius: 8px;
margin: 0 1rem 0 0;
padding: 0 4rem 0 2rem;
font-size: 14px;
font-weight: 500;
line-height: 18.9px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue-70pc);
cursor: pointer;
}
.filter-selection span::after {
content: '';
display: inline-block;
position: relative;
margin-right: -1.5rem;
top: 5px;
right: -1rem;
background-color: var(--dark-blue-70pc);
mask: var(--close);
-webkit-mask: var(--close);
width: 10px;
height: 10px;
}
.product-sort-wrap {
display: block;
position: relative;
z-index: 101;
width: 100%;
}
.sort-by {
background: transparent;
width: 105px;
margin-top: 0.5rem;
margin-right: 2rem;
}
#sort-by-list {
width: 175px;
height: 240px;
border-radius: 8px;
border: 1px solid #e6e8ed;
right: -2rem;
top: 0;
display: none;
font-family: Inter!important;
font-size: 14px;
font-weight: 500;
line-height: 16.41px;
text-align: left;
box-shadow: 0px 10px 20px 0px #4B4B5526!important;
}
#sort-by-list > li {
position: relative;
top: 3.5rem;
height: 30px;
margin: 0;
}
#sort-by-list > li > a {
color: var(--dark-blue-60pc);
}
.sort-by h3 {
display: flex;
justify-content: flex-end;
margin: 0;
padding: 12px 1rem 11px 15px;
border: unset;
cursor: pointer;
font-size: 16px;
font-weight: 700;
line-height: 21.6px;
letter-spacing: -0.01em;
text-align: right;
color: var(--dark-blue-60pc);
position: relative;
z-index: 1000;
font-family: Inter;
}
.sort-text-icon::before,
.mobile-sort-heading::before {
content: "";
display: block;
position: relative;
background: var(--icon-sort);
width: 18px;
height: 14px;
top: 2px;
left: -6px;
}
.sort-by .arrow::after {
content: '';
display: inline-block;
position: absolute;
margin-right: -1.5rem;
top: -5px;
transform: rotate(180deg);
background-color: var(--dark-blue-60pc);
mask: var(--arrow);
-webkit-mask: var(--arrow);
width: 30px;
height: 30px;
}
.sort-by .arrow-active::after {
content: '';
display: inline-block;
position: absolute;
margin-right: -1.5rem;
top: -5px;
transform: rotate(0deg);
background-color: var(--dark-blue-60pc);
mask: var(--arrow);
-webkit-mask: var(--arrow);
width: 30px;
height: 30px;
}
.collection-filter-sidebar {
border-radius: 20px;
background-color: var(--grey);
}
.collection-filter-header {
height: 60px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: 16px;
font-weight: 700;
line-height: 21.6px;
text-align: left;
color: white;
background-color: var(--dark-blue);
display: flex;
padding: 0 2rem;
align-items: center;
}
.collection-filter-header::before {
content: '';
display: block;
position: relative;
margin-right: 1rem;
background-color: white;
mask: var(--icon-filter);
-webkit-mask: var(--icon-filter);
width: 14px;
height: 14px;
}
.hide-before::before {
display: none;
}
.select-attrs {
display: none;
padding: 1rem 2rem;
}
.select-attrs > li {
margin: 1rem 0;
}
.select-attrs > li > a {
display: block;
font-family: Inter;
margin: 0.5rem 0;
font-size: 16px;
font-weight: 700;
line-height: 21.6px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue);
}
.slider-arrow {
position: absolute;
right: 0;
top: 1px;
font-family: unset;
font-size: unset;
display: inline-block;
width: 50px;
cursor: pointer;
transition: none;
transform: none;
top: -6px;
}
.slider-arrow::after {
content: '';
display: flex!important;
position: absolute;
left: 3rem;
transform: rotate(180deg);
background-color: var(--dark-blue);
width: 30px;
height: 30px;
-webkit-mask: var(--arrow);
mask: var(--arrow);
margin-left: auto!important;
}
.slider-arrow-active::after {
content: '';
display: flex!important;
position: absolute;
left: 3rem;
transform: rotate(0deg);
background-color: var(--dark-blue);
width: 30px;
height: 30px;
-webkit-mask: var(--arrow);
mask: var(--arrow);
margin-left: auto!important;
}
.coll-filter {
margin-top: 1rem;
}
.coll-filter li .filter-color {
width: 10px;
height: 10px;
border-radius: 2px;
margin-right: 1rem;
}
.coll-filter > li {
padding-top: 3px;
margin: 0;
}
.coll-filter > li > a {
padding: 0;
height: 20px;
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 18.9px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue-70pc);
}
.coll-filter > li > a:hover {
text-decoration: underline;
}
.coll-filter > li.selected > a {
margin-left: -6px;
padding-left: 2rem;
}
.coll-filter > li.selected > a::before {
all: unset;
}
.coll-filter > li > a::before {
all: unset;
}
.coll-filter > li.selected:not(:first-of-type) {
border-left: 6px solid var(--teal);
}
.coll-filter > li.selected[value=""] > a {
margin-left: 0;
}
.coll-filter > li.selected {
margin-left: -2rem;
}
.sep {
border-top: 1px solid var(--dark-blue-10pc);
margin: 2rem 0;
}
.collection-info h2 {
font-size: 24px;
font-weight: 700;
line-height: 32.4px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue);
}
.collection-info p {
font-size: 16px;
font-weight: 400;
line-height: 21.6px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue-60pc);
}
.readMoreSec {
display: none;
}
/* pagination */
#collection-pagination-ul {
list-style-type: none;
display: inline-flex;
padding-inline-start: 0;
}
.collection-pagination {
height: 80px;
margin-top: 5rem;
border-bottom: 1px solid var(--dark-blue-10pc);
}
.pagination-sm > li > a, .pagination-sm > li > span {
margin: 0 5px;
font-size: 16px;
font-weight: 500;
line-height: 21.6px;
letter-spacing: -0.01em;
text-align: center;
color: var(--dark-blue-60pc);
}
.coll-pagination > .active > span {
width: 44px;
height: 44px;
border-radius: 22px!important;
color: white;
background-color: var(--dark-blue);
font-size: 16px;
font-weight: 700;
line-height: 21.6px;
letter-spacing: -0.01em;
text-align: center;
display: flex;
justify-content: space-around;
position: relative;
align-items: center;
top: -13px;
margin: 0 1rem;
}
.previousarrow,
.nextarrow {
width: 44px;
height: 44px;
border-radius: 22px;
border: 1px solid var(--dark-blue-60pc);
display: flex;
justify-content: space-around;
position: relative;
align-items: center;
top: -36px;
margin: 0 1rem;
}
.previousarrow::before {
content: '';
display: inline-block;
position: absolute;
right: 6px;
top: 7px;
transform: rotate(-90deg);
background-color: var(--dark-blue-60pc);
mask: var(--arrow);
-webkit-mask: var(--arrow);
width: 30px;
height: 30px;
}
.nextarrow::before {
content: '';
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
transform: rotate(90deg);
background-color: var(--dark-blue-60pc);
mask: var(--arrow);
-webkit-mask: var(--arrow);
width: 30px;
height: 30px;
}
@media (max-width: 768px) {
.sticky-filter-sort {
position: sticky;
top: 0;
z-index: 1000;
background: white;
padding: 2rem 1rem 0;
border-bottom: 1px solid var(--dark-blue-10pc);
margin: 0 -1rem;
}
}
.product-filter {
margin: 0;
}
.sidebar-menu-label {
margin: 20px 0 17px;
}
.price {
font-family: Inter;
}
.product-info .price {
height: unset;
}
.product-info {
height: 340px;
max-height: 340px;
margin: 0 20px 30px;
}
.product-list-inner {
margin-top: 10px;
}
.product-thumbnail {
padding: 0 0 15px;
}
.product-thumbnail img {
width: 210px;
height: 210px;
object-fit: contain;
}
.product-info .minqty {
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 16.2px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue-60pc);
}
/* labels */
.product-info .new-label {
background: var(--new);
width: 44px;
height: 18px;
position: absolute;
top: 203px;
left: 0;
}
.product-info .sale-label {
background: var(--sale);
width: 44px;
height: 18px;
position: absolute;
top: 203px;
left: 0;
}
.product-info .made-in-usa {
padding-left: 1rem;
padding-right: 0.3rem;
height: 18px;
position: absolute;
top: 203px;
left: 0;
text-wrap: nowrap;
font-weight: 700;
font-size: 12px;
color: white;
background-color: var(--dark-blue);
}
.product-info .made-in-usa::after {
content: "";
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 18px;
background: inherit;
clip-path: polygon(0 0, 100% 50%, 0 100%);
z-index: 1;
}
.product-info .best-seller {
background-image: var(--best-seller);
position: absolute;
top: 203px;
left: 0;
width: 91px;
height: 18px;
background-size: 91px 18px;
}
.product-info .merch-pick {
background: var(--merch-pick);
position: absolute;
top: 203px;
left: 0;
width: 92px;
height: 18px;
background-size: 92px 18px;
}
@media screen and (max-width: 768px) {
.product-info .merch-pick {
top: 133px;
}
}
.both-label {
top: 179px!important;
}
.product-info .quick-ship,
.product-info .three-day-shipping {
position: absolute;
top: -15px;
left: 0;
text-align: left;
color: var(--dark-blue);
font-size: 12px;
font-style: italic;
text-transform: uppercase;
font-family: 'Inter';
font-weight: 600;;
}
.product-info .quick-ship::before,
.product-info .three-day-shipping::before {
content: '';
display: inline-block;
position: relative;
top: -1px;
background-color: var(--teal);
mask: var(--zoom);
-webkit-mask: var(--zoom);
width: 13px;
height: 7px;
}
.product-price {
font-family: Inter;
font-size: 16px;
font-weight: 700;
line-height: 21.6px;
letter-spacing: -0.01em;
text-align: left;
margin: 0 0.75rem 0 0;
color: var(--dark-blue);
}
.product-info h4 {
margin: 1rem 0;
padding: 0;
font-family: Inter;
font-size: 16px;
font-weight: 500;
line-height: 21.6px;
text-align: left;
color: var(--dark-blue);
display: block;
}
.msrp {
font-size: 12px;
font-weight: 400;
line-height: 16.2px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue-60pc);
}
/* color choice dots */
.loading {
width: 100%;
height: 40px;
background-image: url('/cdn/shop/files/merch-loading.gif?v=1722981845');
background-size: contain;
background-repeat: no-repeat;
background-position-y: top;
background-position-x: -5px;
padding: 13px 0 0 38px;
color: var(--dark-blue-60pc);
font-size: 12px;
position: relative;
top: 30px;
}
.nocolors {
color: var(--dark-blue-60pc);
font-size: 12px;
margin-bottom: 1rem;
}
.slideColorCount {
color: var(--dark-blue-60pc);
font-size: 12px;
margin-top: 1rem;
}
/* tooltip colors should be scoped to .color-choices-wrap in data-container attribute */
.tooltip-inner {
background-color: var(--dark-blue);
color: white;
border: 1px solid var(--dark-blue);
border-radius: 8px;
}
.tooltip-bottom .tooltip-arrow {
border-top-color: var(--dark-blue);
}
.tooltip {
z-index: 10000;
}
.color-choices-wrap {
width: 100%;
position: relative;
height: 45px;
}
.color-choices-pr-coll {
display: none;
}
.colorChoiceSlideColl {
position: relative;
top: 14px;
}
.colorChoiceSlideColl a {
display: block;
width: 20px;
}
.coll-prevArrow {
left: -30px;
}
.coll-nextArrow {
right: -20px;
}
.coll-nextArrow,
.coll-prevArrow {
color: var(--dark-blue-70pc);
font-size: 28px;
top: 38px;
}
.color-circle {
width: 20px;
height: 20px;
border-radius: 10px;
transition: all .2s ease-in-out;
}
.color-circle:hover {
transform: scale(1.05) translateY(-4px);
transition: all .2s ease-in-out;
}
.jumpup {
transform: scale(1.05) translateY(-4px);
}
.jumpdown {
transform: scale(1);
}
.color-count {
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 16.2px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue-60pc);
cursor: pointer;
margin-right: auto;
padding: 3rem 0;
}
.color-count::after {
content: '';
display: inline-block;
position: relative;
margin-left: -7px;
top: 10px;
transform: rotate(90deg);
background-color: var(--dark-blue-45pc);
mask: var(--arrow);
-webkit-mask: var(--arrow);
width: 30px;
height: 30px;
}
.colorChoiceSlider-coll {
visibility: hidden;
}
.colorChoiceSlider-coll.slick-initialized {
visibility: visible;
}
.colorChoiceSlider-coll.slick-initialized .slick-list {
height: 40px;
top: 1.5rem;
}
/* logged-in merchology employee info */
.selector-wrapper {
background: var(--dark-blue);
padding: 1rem;
border-radius: 1rem;
position: absolute;
color: white;
left: 168px;
width: 200px;
z-index: 10000;
}
.triangle {
right: 100%;
border: solid transparent;
position: absolute;
pointer-events: none;
border-color: rgba(170, 170, 170, 0);
border-right-color: var(--dark-blue);
border-width: 11px;
margin-top: -11px;
}
.triangle-border {
right: 100.25%;
position: absolute;
border: solid transparent;
border-color: rgba(238, 238, 238, 0);
border-right-color: var(--dark-blue);
border-width: 12px;
margin-top: -12px;
}
.instock-table {
text-align: left;
width: 100%;
}
.instock-table td {
border: none;
border-bottom: 1px solid #aaa;
padding: .25rem;
}
.instock-table thead {
font-weight: 700;
}
.selector-wrapper p {
margin: 0;
padding 0;
}
.selector-wrapper p.note {
font-size: .85rem;
margin-top: .75rem;
}
.showhide-buttons {
font-size: 1.1rem;
color: var(--dark-blue-60pc);
background-color: transparent;
cursor: pointer;
border: none;
bottom: -36px;
left: 70px;
text-decoration: underline;
position: absolute;
}
.showhide-buttons:hover,
.showhide-buttons:active {
background-color: var(--dark-blue);
color: white;
font-weight: 700;
border-radius: 8px;
padding: 3px 8px;
text-decoration: unset;
}
.supplier {
text-align: left;
font-size: 1.2rem;
margin: 1rem 0;
}
.supplier a {
color: white;
letter-spacing: 0.02rem;
}
.supplier a:hover {
color: white;
text-decoration: underline;
font-weight: 700;
letter-spacing: normal;
}
.desktop-only {
display: none;
}
/*-------------------*/
.no-merch {
width: 100%;
height: 275px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.no-merch h2 {
font-size: 24px;
font-weight: 700;
line-height: 32.4px;
color: var(--dark-blue);
}
.no-merch p {
font-size: 14px;
font-weight: 500;
line-height: 18.9px;
color: var(--dark-blue-70pc);
}
.no-merch p.clear {
font-size: 12px;
font-weight: 500;
line-height: 16.2px;
letter-spacing: -0.01em;
text-decoration: underline;
cursor: pointer;
}
.no-merch::before {
content: '';
display: inline-block;
background: var(--icon-frown);
width: 42px;
height: 42px;
}
@media (min-width: 768px){
.desktop-only {
display: block;
}
}
@media (max-width: 767px) {
html {
overflow-x: hidden;
}
.container-1440 {
padding: 0 1.3rem;
}
.top-bar {
display: none;
}
.coll-wrap {
padding: 0;
}
.coll-filter {
background: var(--grey);
}
.coll-filter.show-section {
padding: 2rem 0 2rem 2rem;
}
.collection-product-list:first-of-type {
padding-top: 2rem !important;
}
.product-list-inner {
margin-top: 0;
}
.product-info {
margin: 10px 10px 0;
display: flex;
gap: 1.5rem;
height: 170px;
align-items: center;
width: 100%;
}
.product-info .new-label,
.product-info .sale-label,
.product-info .made-in-usa,
.product-info .best-seller {
top: 135px;
}
.both-label {
top: 112px!important;
}
.product-thumbnail img {
width: 140px;
height: 170px;
object-fit: contain;
max-width: 140px;
max-height: 170px;
}
.product-info-wrap {
display: flex;
flex: 0 1 auto;
flex-direction: column;
gap: 1rem;
max-width: 100%!important;
min-width: 0;
}
.colorChoiceSlider-coll {
width: 80%!important;
}
.color-choices-wrap {
top: unset;
}
.color-count {
padding-bottom: 0;
position: relative;
height: 43px;
margin-top: 24px;
padding: 0;
}
.loading {
position: relative;
top: 2rem;
left: -10px;
display: block;
}
.collection-header {
background-color: transparent;
height: 88px;
padding: 1.3rem;
margin: 0 2rem 0 0;
background-image: unset;
}
.collection-header-title h1 {
width: 100%;
font-size: 20px;
line-height: 22px;
text-align: left;
}
.collection-filter-header {
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
background-color: var(--grey);
color: var(--dark-blue);
border-bottom: 1px solid var(--dark-blue-60pc);
height: 44px;
position: relative;
}
.collection-filter-sidebar {
height: calc(100% - 80px);
max-height: auto;
overflow-y: scroll;
border-radius: 0;
}
.filterText {
margin-right: calc(50% - 30px);
}
.filterText::before {
content: '';
display: inline-block;
position: relative;
margin-right: 0.5rem;
background-color: var(--dark-blue);
mask: var(--icon-filter);
-webkit-mask: var(--icon-filter);
width: 14px;
height: 14px;
top: 1px;
}
.collection-filter-header-back {
margin-right: auto;
width: 40px;
height: 40px;
cursor: pointer;
}
.filter-selection-wrap {
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.filter-selection {
overflow-x: auto;
flex-wrap: nowrap;
width: auto;
overflow-y: hidden;
}
.filter-selection span,
.filter-selection .filter-selection-clearall {
flex: 0 1 auto;
white-space: nowrap;
}
.filter-selection-wrap::-webkit-scrollbar {
display: none;
}
.collection-filter-header-back::after {
background-color: var(--dark-blue);
content: '';
display: inline-block;
position: absolute;
top: 8px;
transform: rotate(-90deg);
mask: var(--arrow);
-webkit-mask: var(--arrow);
width: 30px;
height: 30px;
left: 10px;
}
.select-attrs > li > a.slider-arrow {
position: absolute;
top: -4px;
right: 18px;
}
.product-filter, .xs-filter {
background-color: white;
}
.xs-short-filter {
border: none;
}
.xs-short-filter .short-filter-list {
width: 100%;
display: flex;
padding: 0;
height: 44px;
border-radius: 8px;
border: 1px solid var(--dark-blue-60pc);
background-color: white;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
cursor: pointer;
font-family: Inter;
font-size: 16px;
font-weight: 700;
line-height: 21.6px;
letter-spacing: -0.01em;
color: var(--dark-blue-60pc);
}
.short-filter-list > a.filter-trigger {
display: flex;
width: 100%;
justify-content: center;
height: 44px;
align-items: center;
color: var(--dark-blue-60pc);
}
.short-filter-list > a.filter-trigger::before {
content: '';
-webkit-mask: var(--icon-filter);
mask: var(--icon-filter);
background-color: var(--dark-blue-60pc);
margin-right: 4px;
display: inline-block;
width: 14px;
height: 13px;
position: relative;
top: -1px;
color: var(--dark-blue-60pc);
}
.select-attrs {
padding: 0;
}
.select-attrs > li {
border: none;
margin: 0;
padding: 0;
}
li.closed-selected {
margin-left: 2rem;
padding: 0;
font-size: 12px;
margin-top: -1rem;
color: var(--dark-blue-60pc);
}
.select-attrs > li > a {
padding: 1.7rem 0 1rem 2rem;
margin: 0;
}
.select-attrs > li.filter-btn {
display: flex!important;
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
padding: 18px 0px;
border: 1px solid #ced4dc;
justify-content: center;
gap: 2rem;
}
.select-attrs > li.filter-btn > a {
all: unset;
height: 44px;
border-radius: 8px!important;
width: 45%;
}
.select-attrs > li.filter-btn > a.apply-product-filter {
background-color: var(--orange);
color: white !important;
justify-content: center;
display: flex;
align-items: center;
}
.select-attrs > li.filter-btn > a.clear-product-filter {
justify-content: center;
display: flex;
align-items: center;
border: 1px solid var(--dark-blue);
color: var(--dark-blue)!important;
}
.sidebar-menu-label {
background: white;
font-family: Inter;
font-size: 14px;
font-weight: 700;
line-height: 18.9px;
letter-spacing: -0.01em;
text-align: left;
color: var(--dark-blue);
padding: 0;
margin-bottom: 2rem;
}
.sort-text-icon::before {
left: -3px;
}
.sort-by {
margin-right: -1rem;
}
.sort-by h3 {
font-size: 14px;
font-weight: 700;
line-height: 18.9px;
letter-spacing: -0.01em;
text-align: right;
}
.sort-by .arrow::after {
display: none;
}
.product-sort-wrap {
z-index: 9999;
margin-top: -10px;
}
#sort-by-list > li {
font-family: Inter;
border: none;
color: var(--dark-blue-60pc);
display: flex;
align-items: center;
height: 44px;
top: 16px;
cursor: pointer;
pointer-events: auto;
}
#sort-by-list > li:not(:first-of-type) {
margin-left: 2rem;
}
#sort-by-list > li.selected {
border-left: 6px solid var(--teal);
}
#sort-by-list > li.selected {
margin-left: 0;
}
#sort-by-list > li.selected a {
margin-left: calc(3rem - 6px);
}
#sort-by-list > li > a {
padding: 0;
margin-left: 1rem;
display: block;
cursor: pointer;
}
#sort-by-list > li > a::after {
all: unset;
}
#sort-by-list > li.selected > a::after {
all: unset;
}
#sort-by-list > li:first-of-type {
display: flex!important;
align-items: center;
justify-content: center;
border-radius: 0;
background-color: var(--grey);
color: var(--dark-blue);
border-bottom: 1px solid var(--dark-blue-60pc);
height: 44px;
position: relative;
top: 0
}
#sort-by-list > li:first-of-type::after {
background-color: var(--dark-blue);
content: '';
display: inline-block;
position: absolute;
top: 8px;
transform: rotate(-90deg);
mask: var(--arrow);
-webkit-mask: var(--arrow);
width: 30px;
height: 30px;
left: 10px;
cursor: pointer;
}
.active-filter .xs-filter {
transform: translateX(0%);
}
.active-short .product-filter {
transform: translateX(100%);
}
}
/* tablet size */
@media (min-width: 600px) and (max-width: 1024px) {
.select-attrs > li > a {
max-width: 92%;
}
}