/* TODO: when full redesign implementation is complete: Replace primary-new to primary, secondary-new to secondary, and so on.. */ .custom-select:-moz-focusring, .custom-select::-moz-focus-inner { color: transparent; text-shadow: 0 0 0 #434343; } /* TODO: when full redesign implementation is complete: Replace primary-new to primary, secondary-new to secondary, and so on.. */ .custom-select:-moz-focusring, .custom-select::-moz-focus-inner { color: transparent; text-shadow: 0 0 0 #434343; } .swatch-circle-black { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #000; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-black.disabled { opacity: 0.2; } .swatch-filter-black { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #000; border-radius: 0.69em; background-color: #000; display: block; position: relative; } .swatch-filter-black.disabled { opacity: 0.2; } .swatch-circle-blue { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #1900ff; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-blue.disabled { opacity: 0.2; } .swatch-filter-blue { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #1900ff; border-radius: 0.69em; background-color: #1900ff; display: block; position: relative; } .swatch-filter-blue.disabled { opacity: 0.2; } .swatch-circle-brown { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #a52a2b; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-brown.disabled { opacity: 0.2; } .swatch-filter-brown { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #a52a2b; border-radius: 0.69em; background-color: #a52a2b; display: block; position: relative; } .swatch-filter-brown.disabled { opacity: 0.2; } .swatch-circle-beige { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #eee2cd; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-beige.disabled { opacity: 0.2; } .swatch-filter-beige { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #eee2cd; border-radius: 0.69em; background-color: #eee2cd; display: block; position: relative; } .swatch-filter-beige.disabled { opacity: 0.2; } .swatch-circle-green { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #008000; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-green.disabled { opacity: 0.2; } .swatch-filter-green { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #008000; border-radius: 0.69em; background-color: #008000; display: block; position: relative; } .swatch-filter-green.disabled { opacity: 0.2; } .swatch-circle-dark-green { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #55651d; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-dark-green.disabled { opacity: 0.2; } .swatch-filter-dark-green { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #55651d; border-radius: 0.69em; background-color: #55651d; display: block; position: relative; } .swatch-filter-dark-green.disabled { opacity: 0.2; } .swatch-circle-olive { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #7f8000; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-olive.disabled { opacity: 0.2; } .swatch-filter-olive { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #7f8000; border-radius: 0.69em; background-color: #7f8000; display: block; position: relative; } .swatch-filter-olive.disabled { opacity: 0.2; } .swatch-circle-grey { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #c0c0c0; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-grey.disabled { opacity: 0.2; } .swatch-filter-grey { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #c0c0c0; border-radius: 0.69em; background-color: #c0c0c0; display: block; position: relative; } .swatch-filter-grey.disabled { opacity: 0.2; } .swatch-circle-dark-grey { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #808080; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-dark-grey.disabled { opacity: 0.2; } .swatch-filter-dark-grey { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #808080; border-radius: 0.69em; background-color: #808080; display: block; position: relative; } .swatch-filter-dark-grey.disabled { opacity: 0.2; } .swatch-circle-navy { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #060080; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-navy.disabled { opacity: 0.2; } .swatch-filter-navy { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #060080; border-radius: 0.69em; background-color: #060080; display: block; position: relative; } .swatch-filter-navy.disabled { opacity: 0.2; } .swatch-circle-orange { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #ffa500; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-orange.disabled { opacity: 0.2; } .swatch-filter-orange { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #ffa500; border-radius: 0.69em; background-color: #ffa500; display: block; position: relative; } .swatch-filter-orange.disabled { opacity: 0.2; } .swatch-circle-dark-orange { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #ff7f50; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-dark-orange.disabled { opacity: 0.2; } .swatch-filter-dark-orange { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #ff7f50; border-radius: 0.69em; background-color: #ff7f50; display: block; position: relative; } .swatch-filter-dark-orange.disabled { opacity: 0.2; } .swatch-circle-pink { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #ffc0cb; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-pink.disabled { opacity: 0.2; } .swatch-filter-pink { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #ffc0cb; border-radius: 0.69em; background-color: #ffc0cb; display: block; position: relative; } .swatch-filter-pink.disabled { opacity: 0.2; } .swatch-circle-dark-pink { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #dd3daa; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-dark-pink.disabled { opacity: 0.2; } .swatch-filter-dark-pink { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #dd3daa; border-radius: 0.69em; background-color: #dd3daa; display: block; position: relative; } .swatch-filter-dark-pink.disabled { opacity: 0.2; } .swatch-circle-purple { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #800080; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-purple.disabled { opacity: 0.2; } .swatch-filter-purple { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #800080; border-radius: 0.69em; background-color: #800080; display: block; position: relative; } .swatch-filter-purple.disabled { opacity: 0.2; } .swatch-circle-red { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #ff0200; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-red.disabled { opacity: 0.2; } .swatch-filter-red { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #ff0200; border-radius: 0.69em; background-color: #ff0200; display: block; position: relative; } .swatch-filter-red.disabled { opacity: 0.2; } .swatch-circle-white { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #fff; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-white.disabled { opacity: 0.2; } .swatch-filter-white { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #fff; border-radius: 0.69em; background-color: #fff; display: block; position: relative; } .swatch-filter-white.disabled { opacity: 0.2; } .swatch-circle-yellow { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #feff00; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-yellow.disabled { opacity: 0.2; } .swatch-filter-yellow { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #feff00; border-radius: 0.69em; background-color: #feff00; display: block; position: relative; } .swatch-filter-yellow.disabled { opacity: 0.2; } .swatch-circle-dark-yellow { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #ffd700; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-dark-yellow.disabled { opacity: 0.2; } .swatch-filter-dark-yellow { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #ffd700; border-radius: 0.69em; background-color: #ffd700; display: block; position: relative; } .swatch-filter-dark-yellow.disabled { opacity: 0.2; } .swatch-circle-camouflage { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #55651d; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-camouflage.disabled { opacity: 0.2; } .swatch-filter-camouflage { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #55651d; border-radius: 0.69em; background-color: #55651d; display: block; position: relative; } .swatch-filter-camouflage.disabled { opacity: 0.2; } .swatch-circle-coral { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #ff8300; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-coral.disabled { opacity: 0.2; } .swatch-filter-coral { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #ff8300; border-radius: 0.69em; background-color: #ff8300; display: block; position: relative; } .swatch-filter-coral.disabled { opacity: 0.2; } .swatch-circle-gold { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #bfa110; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-gold.disabled { opacity: 0.2; } .swatch-filter-gold { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #bfa110; border-radius: 0.69em; background-color: #bfa110; display: block; position: relative; } .swatch-filter-gold.disabled { opacity: 0.2; } .swatch-circle-gray { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #949494; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-gray.disabled { opacity: 0.2; } .swatch-filter-gray { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #949494; border-radius: 0.69em; background-color: #949494; display: block; position: relative; } .swatch-filter-gray.disabled { opacity: 0.2; } .swatch-circle-multi { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #dd3caa; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-multi.disabled { opacity: 0.2; } .swatch-filter-multi { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #dd3caa; border-radius: 0.69em; background-color: #dd3caa; display: block; position: relative; } .swatch-filter-multi.disabled { opacity: 0.2; } .swatch-circle-natural { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #eee2c6; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-natural.disabled { opacity: 0.2; } .swatch-filter-natural { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #eee2c6; border-radius: 0.69em; background-color: #eee2c6; display: block; position: relative; } .swatch-filter-natural.disabled { opacity: 0.2; } .swatch-circle-miscellaneous { background: linear-gradient(0deg, #821e91 0, #821e91 25%, #edd134 25%, yellow 50%, #edd134 50%, #59ba00 50%, #59ba00 76%, #111 76%, #111 100%), linear-gradient(0deg, #0e5cd1 0, #0e5cd1 50%, #e20b0b 50%, #e20b0b 100%); background-repeat: repeat-y, repeat; background-size: 50% 100%, 100% 100%; border: 0.063em solid rgba(0, 0, 0, 0.3); border-radius: 1.25em; display: block; height: 2.5em; position: relative; transform: rotate(35deg); width: 2.5em; } .swatch-circle-miscellaneous.disabled { opacity: 0.2; } .swatch-circle-miscellaneous.selected::after { transform: rotate(-35deg); } .swatch-circle-multi, .swatch-filter-multi { background-image: url("../images/swatch-multi.png"); background-repeat: no-repeat; background-size: contain; } .category-tile { position: relative; } .category-tile h1, .category-tile h2 { font-size: 1.75rem; position: absolute; bottom: 1.875rem; left: 1.875rem; color: #fff; } .category-tile::before { content: ''; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.5) 100%); } .form-group.required .form-control-label::before, .form-control-label.label-for-required-field::before { content: "*"; color: #D31717; margin-right: 4px; } .refinement-bar { overflow: auto; } .refinement-bar ul { padding-left: 0; } .filter-header { margin-left: -10px; margin-right: -10px; } .header-bar { border-bottom: 0.063em solid #eee; } .header-bar button.close { font-size: 1rem; font-weight: normal; opacity: 1; } .header-bar .fa.fa-close::before { font-size: 1.25em; } @media (min-width: 1280px) { .header-bar { padding: 0; } } .refinements .header { padding: 0.313em 0; } @media (min-width: 544px) and (max-width: 767.98px) { .refinements .header li { display: inline-block; } } .refinements .header { font-size: 1.125em; color: #444; } .refinements ul li { padding-left: 1px; } .refinements ul li button i { display: none; } .refinements li { list-style-type: none; padding-left: 0; } .refinements li.color-attribute { display: inline-block; } .refinements li.color-attribute .swatch-circle { border-radius: 50%; height: 100%; width: 100%; } .refinements li.color-attribute .swatch-circle::after { content: none; } .refinements li.disabled { opacity: 0.5; } .secondary-bar { padding-bottom: 1em; overflow: auto; } @media (max-width: 767.98px) { .secondary-bar button.reset { float: right; } } @media (min-width: 544px) and (max-width: 767.98px) { .secondary-bar { padding: 0.938em 2.813em; } } @media (max-width: 543.98px) { .secondary-bar { padding: 0.938em; } } .refinement-header { overflow: auto; } .disabled { pointer-events: none; } @media (max-width: 543.98px) { .grid-header .filter-results, .content-grid-header .filter-results { display: block; width: 100%; } } .grid-header select, .content-grid-header select { width: 100%; } @media (max-width: 767.98px) { .refinement.card { border-left: 0 none; border-right: 0 none; border-radius: 0; margin-bottom: 0; } .refinement .card-header { border-bottom: 0 none; } } .refinement a { text-decoration: none; } .refinement.refinement-category li { display: block; } .refinement.refinement-category > ul > li { margin-left: 0; } .search-keywords { color: #434343; font-weight: bold; } .filter-bar { margin-top: 16px; margin-bottom: 12px; } @media (min-width: 768px) { .filter-bar { margin-top: 0; margin-bottom: 12px; } } .filter-bar ul { margin-bottom: 0; padding-left: 0; } .filter-bar li { list-style: none; float: left; margin-right: 12px; } .filter-bar li:first-child { margin-left: 0; } .filter-bar li.filter-value { border: 1px solid #f5f5f5; padding: 0; border-radius: 4px; margin-bottom: 12px; position: relative; background: #f5f5f5; border-radius: 20px; font-weight: bold; color: #434343; line-height: 22px; font-size: 16px; } @media (min-width: 768px) { .filter-bar li.filter-value { margin-bottom: 12px; } } .filter-bar li.filter-value:hover { border-color: #666; } .filter-bar li.filter-value:hover button::after { background-image: url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3E49213BC1-EE19-4CC8-8902-B2DBE632CE6D%3C/title%3E%3Cg id='PLP' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='PLP-(Desktop)----Default' transform='translate(-594.000000, -401.000000)'%3E%3Cg id='Filters/Applied/Default' transform='translate(537.000000, 387.000000)'%3E%3Cg id='close' transform='translate(58.000000, 15.000000)'%3E%3Crect id='Rectangle' x='0' y='0' width='10' height='10'%3E%3C/rect%3E%3Cpath d='M9.375,9.375 L0.625,0.625 L9.375,9.375 Z M0.625,9.375 L9.375,0.625 L0.625,9.375 Z' id='Shape' stroke='%23434343' stroke-width='2' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .filter-bar li.filter-value button { border: none; color: #434343; font-size: 1rem; line-height: 22px; padding: 9px 42px 9px 22px; text-transform: none; letter-spacing: 0; font-weight: bold; text-align: center; min-height: 40px; } .filter-bar li.filter-value button::after { background-image: url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3E49213BC1-EE19-4CC8-8902-B2DBE632CE6D%3C/title%3E%3Cg id='PLP' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='PLP-(Desktop)----Default' transform='translate(-594.000000, -401.000000)'%3E%3Cg id='Filters/Applied/Default' transform='translate(537.000000, 387.000000)'%3E%3Cg id='close' transform='translate(58.000000, 15.000000)'%3E%3Crect id='Rectangle' x='0' y='0' width='10' height='10'%3E%3C/rect%3E%3Cpath d='M9.375,9.375 L0.625,0.625 L9.375,9.375 Z M0.625,9.375 L9.375,0.625 L0.625,9.375 Z' id='Shape' stroke='%23666666' stroke-width='2' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-position: center center; background-repeat: no-repeat; background-size: contain; content: ''; height: 12px; text-rendering: auto; position: absolute; right: 16px; top: 15px; width: 12px; } .filter-bar li .swatch-filter { font-size: 1.38em; height: 25px; position: absolute; top: 7.5px; left: 9.5px; z-index: 1; margin-right: 13px; width: 25px; } .filter-bar li .swatch-filter-button { margin-right: 15px; min-height: 24px; z-index: 1; } @media (max-width: 1279.98px) { .tab-content { padding-left: 0; padding-right: 0; } } .search-tips { text-align: left; } .category-item { margin-bottom: 0.938rem; } .show-more, .show-more-content { padding: 0 0 13px; clear: both; } @media (min-width: 768px) { .show-more, .show-more-content { padding-bottom: 0.938em; padding-top: 0.938em; } } .show-more .btn, .show-more-content .btn { font-size: 1.125rem; letter-spacing: 0; line-height: 22px; max-width: 100%; width: 100%; padding: 13px 22px 13px 22px; } @media (min-width: 768px) { .show-more .btn, .show-more-content .btn { width: 33.33%; } } @media (min-width: 1440px) { .show-more .btn, .show-more-content .btn { width: 25%; } } .swatch-mark.color-value[data-selected=true]::after { color: #000; display: table-caption; font-size: 1.625em; left: 0.295em; position: absolute; } .swatch-mark.color-value.selected::after { background: #fff; border-radius: 50%; color: #000; display: table-caption; font-size: 1.625em; height: 0.75em; left: 0.31em; line-height: 0.8em; position: absolute; top: 0.35em; width: 0.8em; } .search-nav { margin-bottom: 1em; border-bottom: 0.063em solid #ccc; } .search-nav .nav-tabs-wrapper { padding: 0; } @media (max-width: 543.98px) { .search-nav .nav-tabs-wrapper { width: 100%; } } .search-nav .nav-tabs-wrapper .nav-tabs { border-bottom: 0 none; } .search-nav .nav-link:focus { background-color: #f9f9f9; } .product-options .quantity { position: absolute; bottom: 0; right: 0; } .grid-footer { margin-bottom: 12px; padding-top: 0; } @media (min-width: 1280px) { .grid-footer { margin-bottom: 24px; padding-top: 8px; } }