//
//
//
//
//
//
//
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 700;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n7.100b6e9f9e693eb80761011abb508f6798f6be49.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=870a5d5e1cb2cea5fe404bd30a4e7867d48667d56c3f7cab60e66f4c595740fd") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n7.04d82c6434d847e3e6c3cffe40ce0b558944aa87.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=a8271c8f59e41ca5692b08edbcffa1c728aedf01b97732d0538bf6316b83e650") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 700;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i7.52403eb82b56e654b689dd04b705f6bbc15569c2.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0c6215bb2a96bb373c47df2797c977d1cc712f20d26e9ac0dd5e3045817bdbd4") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i7.645556cde8ca1f0179ff327036000a036389b4b6.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=2b7620d1ed61a876e11b6d8ce5f58f6ff413dfa510f011f11d853f1747053a53") format("woff");
}
$type-body: type_body;
$type-body-family: Centaur,serif;
$type-body-styles: ((normal, italic), (normal, italic));
$type-body-named-styles: ((initial, italic), (initial, italic));
$type-body-weights: (400, 700);
$type-body-named-weights: (initial, bolder);
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 700;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n7.100b6e9f9e693eb80761011abb508f6798f6be49.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=870a5d5e1cb2cea5fe404bd30a4e7867d48667d56c3f7cab60e66f4c595740fd") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n7.04d82c6434d847e3e6c3cffe40ce0b558944aa87.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=a8271c8f59e41ca5692b08edbcffa1c728aedf01b97732d0538bf6316b83e650") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 700;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i7.52403eb82b56e654b689dd04b705f6bbc15569c2.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0c6215bb2a96bb373c47df2797c977d1cc712f20d26e9ac0dd5e3045817bdbd4") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i7.645556cde8ca1f0179ff327036000a036389b4b6.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=2b7620d1ed61a876e11b6d8ce5f58f6ff413dfa510f011f11d853f1747053a53") format("woff");
}
$type-heading: type_heading;
$type-heading-family: Centaur,serif;
$type-heading-styles: ((normal, italic), (normal, italic), (normal, italic));
$type-heading-named-styles: ((initial, italic), (initial, italic), (initial, italic));
$type-heading-weights: (400, 700, 300);
$type-heading-named-weights: (initial, bolder, lighter);
@font-face {
font-family: "Avenir Next";
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/avenir_next/avenirnext_n4.7fd0287595be20cd5a683102bf49d073b6abf144.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=512491b705fb0ebe377dbc4624e1eda6e8ba52b9f1cf0d2cd57d1cc42b07333d") format("woff2"),
url("//www.efcollection.com/cdn/fonts/avenir_next/avenirnext_n4.a26a334a0852627a5f36b195112385b0cd700077.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=a58797f3d32ee6ef2eafe5e422a9d9cd7d78edd81ad21c0ced822f49f540f826") format("woff");
}
@font-face {
font-family: "Avenir Next";
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/avenir_next/avenirnext_i4.f1583d9f457b68e44fbda187a48b4096d547d7f4.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=2f48c7f543293238ebfa8622ccad4f8e9439a42079e51e9a25ff711dfc6c90ee") format("woff2"),
url("//www.efcollection.com/cdn/fonts/avenir_next/avenirnext_i4.67fb53a3e0351125941146246183577ae8d8bf23.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=9c6309b0bd618182aff7e40d91c33a97f213f4069f6f714766f79c372d42e3c0") format("woff");
}
$type-button: type_button;
$type-button-family: "Avenir Next",sans-serif;
$type-button-styles: ((normal, italic), ());
$type-button-named-styles: ((initial, italic), ());
$type-button-weights: (400);
$type-button-named-weights: (initial);
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
$type-menu: type_menu;
$type-menu-family: Centaur,serif;
$type-menu-styles: ((normal, italic), ());
$type-menu-named-styles: ((initial, italic), ());
$type-menu-weights: (400);
$type-menu-named-weights: (initial);
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 700;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n7.100b6e9f9e693eb80761011abb508f6798f6be49.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=870a5d5e1cb2cea5fe404bd30a4e7867d48667d56c3f7cab60e66f4c595740fd") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n7.04d82c6434d847e3e6c3cffe40ce0b558944aa87.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=a8271c8f59e41ca5692b08edbcffa1c728aedf01b97732d0538bf6316b83e650") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 700;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i7.52403eb82b56e654b689dd04b705f6bbc15569c2.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0c6215bb2a96bb373c47df2797c977d1cc712f20d26e9ac0dd5e3045817bdbd4") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i7.645556cde8ca1f0179ff327036000a036389b4b6.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=2b7620d1ed61a876e11b6d8ce5f58f6ff413dfa510f011f11d853f1747053a53") format("woff");
}
$type-section: type_section;
$type-section-family: Centaur,serif;
$type-section-styles: ((normal, italic), (normal, italic));
$type-section-named-styles: ((initial, italic), (initial, italic));
$type-section-weights: (400, 700);
$type-section-named-weights: (initial, bold);
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
$type-product-card-title: type_product_card_title;
$type-product-card-title-family: Centaur,serif;
$type-product-card-title-styles: ((normal, italic), ());
$type-product-card-title-named-styles: ((initial, italic), ());
$type-product-card-title-weights: (400);
$type-product-card-title-named-weights: (initial);
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
$type-product-price: type_product_price;
$type-product-price-family: Centaur,serif;
$type-product-price-styles: ((normal, italic), ());
$type-product-price-named-styles: ((initial, italic), ());
$type-product-price-weights: (400);
$type-product-price-named-weights: (initial);
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
$type-product-vendor: type_product_vendor;
$type-product-vendor-family: Centaur,serif;
$type-product-vendor-styles: ((normal, italic), ());
$type-product-vendor-named-styles: ((initial, italic), ());
$type-product-vendor-weights: (400);
$type-product-vendor-named-weights: (initial);
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
$type-footer-heading: type_footer_heading;
$type-footer-heading-family: Centaur,serif;
$type-footer-heading-styles: ((normal, italic), ());
$type-footer-heading-named-styles: ((initial, italic), ());
$type-footer-heading-weights: (400);
$type-footer-heading-named-weights: (initial);
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
$type-highlights-bar: type_highlights_bar;
$type-highlights-bar-family: Centaur,serif;
$type-highlights-bar-styles: ((normal, italic), ());
$type-highlights-bar-named-styles: ((initial, italic), ());
$type-highlights-bar-weights: (400);
$type-highlights-bar-named-weights: (initial);
@font-face {
font-family: "Avenir Next";
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/avenir_next/avenirnext_n4.7fd0287595be20cd5a683102bf49d073b6abf144.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=512491b705fb0ebe377dbc4624e1eda6e8ba52b9f1cf0d2cd57d1cc42b07333d") format("woff2"),
url("//www.efcollection.com/cdn/fonts/avenir_next/avenirnext_n4.a26a334a0852627a5f36b195112385b0cd700077.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=a58797f3d32ee6ef2eafe5e422a9d9cd7d78edd81ad21c0ced822f49f540f826") format("woff");
}
@font-face {
font-family: "Avenir Next";
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/avenir_next/avenirnext_i4.f1583d9f457b68e44fbda187a48b4096d547d7f4.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=2f48c7f543293238ebfa8622ccad4f8e9439a42079e51e9a25ff711dfc6c90ee") format("woff2"),
url("//www.efcollection.com/cdn/fonts/avenir_next/avenirnext_i4.67fb53a3e0351125941146246183577ae8d8bf23.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=9c6309b0bd618182aff7e40d91c33a97f213f4069f6f714766f79c372d42e3c0") format("woff");
}
$type-signpost: type_signpost;
$type-signpost-family: "Avenir Next",sans-serif;
$type-signpost-styles: ((normal, italic), ());
$type-signpost-named-styles: ((initial, italic), ());
$type-signpost-weights: (400);
$type-signpost-named-weights: (initial);
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: normal;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.4e13e2f4a71dfb32858a093ac0fa56e4e0d5ab02.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0408cb168ccd89c7727d23fdd825d200371f8b5be8ac8dd9d4e107afa4cca2af") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_n4.a90a766731d13ffccf07590f05a10ec39e59b06a.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f7bcf8dc35365be3cd51658684f88cac40f6dd18cc0ca015057b1ad2936aaf06") format("woff");
}
@font-face {
font-family: Centaur;
font-weight: 400;
font-style: italic;
font-display: auto;
src: url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.39ba22af14852f45a4f2f5bb36bea59d3d903b3d.woff2?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=baeff5d6c5677b08fd446e773a9cf2bf025f090e950670df45cdaff3fe826ee3") format("woff2"),
url("//www.efcollection.com/cdn/fonts/centaur/centaur_i4.552d4bd772ff5fd7f546b4f4b4050196bab9160e.woff?h1=ZWZjb2xsZWN0aW9uLmNvbQ&h2=bS1tcy1zaG9lcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=0d2a7457e536c41349064015e4aee72c3c37fb8015b7fb4b5378b3d99d310748") format("woff");
}
$type-body-bold: type_body_bold;
$type-body-bold-family: Centaur,serif;
$type-body-bold-styles: ((normal, italic), ());
$type-body-bold-named-styles: ((initial, italic), ());
$type-body-bold-weights: (400);
$type-body-bold-named-weights: (initial);
$font-variables: ($type-body $type-heading $type-button $type-menu $type-section $type-product-card-title $type-product-price $type-product-vendor $type-footer-heading $type-highlights-bar $type-signpost $type-body-bold);
$font-variables-families: ($type-body-family $type-heading-family $type-button-family $type-menu-family $type-section-family $type-product-card-title-family $type-product-price-family $type-product-vendor-family $type-footer-heading-family $type-highlights-bar-family $type-signpost-family $type-body-bold-family);
$font-variables-weights: ($type-body-weights $type-heading-weights $type-button-weights $type-menu-weights $type-section-weights $type-product-card-title-weights $type-product-price-weights $type-product-vendor-weights $type-footer-heading-weights $type-highlights-bar-weights $type-signpost-weights $type-body-bold-weights);
$font-variables-named-weights: ($type-body-named-weights $type-heading-named-weights $type-button-named-weights $type-menu-named-weights $type-section-named-weights $type-product-card-title-named-weights $type-product-price-named-weights $type-product-vendor-named-weights $type-footer-heading-named-weights $type-highlights-bar-named-weights $type-signpost-named-weights $type-body-bold-named-weights);
$font-variables-styles: ($type-body-styles $type-heading-styles $type-button-styles $type-menu-styles $type-section-styles $type-product-card-title-styles $type-product-price-styles $type-product-vendor-styles $type-footer-heading-styles $type-highlights-bar-styles $type-signpost-styles $type-body-bold-styles);
$font-variables-named-styles: ($type-body-named-styles $type-heading-named-styles $type-button-named-styles $type-menu-named-styles $type-section-named-styles $type-product-card-title-named-styles $type-product-price-named-styles $type-product-vendor-named-styles $type-footer-heading-named-styles $type-highlights-bar-named-styles $type-signpost-named-styles $type-body-bold-named-styles);
// Find the index of the font setting for cross referencing
@function font-setting-index($font-type) {
@return index($font-variables, $font-type);
}
// Font
// --------
// Find the index of a font weight from its relative name
// - [$font-type]: Variable of font to look up
// - [$font-weight]: lighter/initial/bolder
@function font-weight-index($font-type, $font-weight: initial) {
$font-setting-index: font-setting-index($font-type);
// Look up available weights based on index of font setting
$named-weights: nth($font-variables-named-weights, $font-setting-index);
// Try to find index of desired font weight by cross referencing
$weight-index: index($named-weights, $font-weight);
// Return index of named weight, or return initial weight
@return if($weight-index, $weight-index, 1);
}
// Font
// --------
// Find the font family for a font setting
// - [$font-type]: Variable of font to look up
@function font-family($font-type) {
@return nth($font-variables-families, font-setting-index($font-type));
}
// Font
// --------
// Find a font style relative to a font weight
// - [$font-type]: Variable of font to look up
// - [$font-style]: initial/italic
// - [$font-weight]: lighter/initial/bolder
@function font-style($font-type, $font-style: initial, $font-weight: initial) {
$style: null;
$styles: null;
// Find index of font setting
$font-setting-index: font-setting-index($font-type);
// Get styles based on index of font setting
$font-styles: nth($font-variables-styles, $font-setting-index);
$font-named-styles: nth($font-variables-named-styles, $font-setting-index);
// Try to find index of desired font weight by cross referencing
$weight-named-index: font-weight-index($font-type, $font-weight);
// Get styles available for $font-weight
$named-weight-style: nth($font-styles, $weight-named-index);
$named-weight-named-style: nth($font-named-styles, $weight-named-index);
// Find position of $font-style
$style-named-index: index($named-weight-named-style, $font-style);
@if $style-named-index {
@return nth($named-weight-style, $style-named-index);
} @else {
// Return initial font style
@return nth($named-weight-style, 1);
}
}
// Font weight
// --------
// Find a font sensitive relative weight
// - [$font-type]: Variable of font to look up
// - [$font-weight]: lighter/initial/bolder
@function font-weight($font-type, $font-weight: initial) {
$weight: null;
// Find index of font setting
$font-setting-index: font-setting-index($font-type);
// Look up available weights based on index of font setting
$weights: nth($font-variables-weights, $font-setting-index);
// Try to find index of desired font weight by cross referencing
$weight-index: font-weight-index($font-type, $font-weight);
// Return numerical weight of font
@return nth($weights, $weight-index);
}
// Font
// --------
// Generate complete font styles for a font setting
// - [$font-type]: Variable of font to look up
// - [$font-family]: true/false
// - [$font-size]: unit/false
// - [$font-style]: initial/italic/false
// - [$font-weight]: lighter/initial/bolder/false
@mixin font(
$font-type,
$font-family: true,
$font-size: false,
$font-style: initial,
$font-weight: initial
) {
@if $font-family { font-family: font-family($font-type); }
@if $font-size { font-size: $font-size; }
@if $font-style { font-style: font-style($font-type, $font-style: $font-style, $font-weight: $font-weight ); }
@if $font-weight { font-weight: font-weight($font-type, $font-weight: $font-weight); }
}
// External libraries
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active, hovered, visited and link.
* in all browsers (opinionated).
*/
a:active,
a:hover,
a:visited,
a:link {
outline-width: 0;
outline:none;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
// Setting abstracted libraries
@function strip-units($value) {
@return ($value / ($value * 0 + 1));
}
@function rem($pxval, $rem-base: 16px) {
@return (strip-units($pxval) / strip-units($rem-base)) * 1rem;
}
@function rem2px($remval, $px-base: 16px) {
@return (strip-units($px-base) * strip-units($remval)) * 1px;
}
@function morph($color, $adjustment-value: 2) {
$lightness: lightness($color);
$light-color: false;
@if $lightness > 35% { $light-color: true; }
@if $light-color {
$lightness: ($lightness / 20) * $adjustment-value;
$color: darken($color, $lightness);
} @else {
@if $lightness < 2.5% {
$lightness: 30%;
} @else if $lightness < 7.5% {
$lightness: 15%;
}
$lightness: ($lightness / 10) * $adjustment-value;
$color: lighten($color, $lightness);
}
$saturation: saturation($color);
$saturated-color: false;
@if $saturation > 0% { $saturated-color: true; }
$saturation: ($saturation / 20);
@if $saturated-color {
@if $light-color {
$color: desaturate($color, $saturation);
} @else {
$color: saturate($color, $saturation);
}
}
@return $color;
}
// Check to see if a color is black and transparent
@function color-transparent($color) {
@if (alpha($color) == 0 and red($color) == 0 and green($color) == 0 and blue($color) == 0) {
// Color is fully transparent, but black. Return opaque white for further adjustments
@return rgba(255, 255, 255, 1);
} @else {
@return $color;
}
}
// If background is dark return appropriate color for mixin
@function border-mix($local-background, $local-dark, $local-light) {
@if(lightness($local-background) >= 50%) {
@return $local-dark;
} @else {
@return $local-light;
}
}
@function vw($pxval) {
$vw-context: $max-width / 100;
@return ($pxval/$vw-context) * 1vw;
}
// Internal libraries
// ! Colors
// Header colors
$color-header-logo-text: #000000;
$color-header-background: color-transparent(#ffffff);
$color-header-cart-count-badge: #d0bfb5;
$color-header-cart-count-text: #ffffff;
$color-header-shadow: rgba(0,0,0,0);
// Header search bar
$color-header-search-bar-background: #ffffff;
$color-header-search-bar-border: #5a5859;
$color-header-search-bar-text: #000000;
$color-header-search-bar-button-icon: #111111;
$color-header-search-bar-button-background: #ffffff;
// Header navigation
$color-header-navigation-main-menu-text: #212121;
$color-header-navigation-main-menu-text-hover: #000000;
$color-header-navigation-secondary-menu-text: #212121;
$color-header-navigation-secondary-menu-text-hover: #000000;
$color-header-navigation-dropdown-menu-background: #ffffff;
$color-header-navigation-dropdown-menu-links: #313131;
$color-header-navigation-dropdown-menu-links-hover: #111111;
$color-header-navigation-meganavigation-promo-text: #313131;
$color-header-navigation-meganavigation-menu-headings: #313131;
$color-header-navigation-mobile-submenu-background: #faf9f7;
// Text
$color-text-headings: #212121;
$color-text-regular-text: #111111;
$color-text-light-text: #5a5859;
$color-text-links: #000000;
$color-text-links-hover: #5a5859;
$color-text-regular-text-encoded: 212121;
// Buttons
$color-buttons-primary-button-background: #5a5859;
$color-buttons-primary-button-text: #ffffff;
$color-buttons-primary-button-background-hover: #111111;
$color-buttons-secondary-button-background: #d0bfb5;
$color-buttons-secondary-button-border: #c8b3a7;
$color-buttons-secondary-button-text: #ffffff;
$color-buttons-secondary-button-text-hover: #ffffff;
$color-buttons-secondary-button-border-hover: #c8b3a7;
$color-buttons-secondary-button-background-hover: #c3ada0;
$color-buttons-sold-out-button-text: #ffffff;
$color-buttons-sold-out-button-background: #000000;
$color-buttons-disabled-text: #696969;
$color-buttons-disabled-background: #ebebeb;
// Forms
$color-forms-input-placeholder-text: #333333;
$color-forms-input-text: #212121;
$color-forms-input-background: #ffffff;
$color-forms-input-border: #212121;
$color-forms-selected-input: #212121;
$color-forms-input-border-hover: morph($color-forms-input-border, 2);
// Products
$color-products-vendor-name: #555555;
$color-products-regular-price: #212121;
$color-products-compare-at-price: #b4b4b4;
$color-products-sale-price: #c92727;
$color-products-sale-badge-text: #ffffff;
$color-products-sale-badge: #c92727;
$color-products-sold-out-badge-text: #ffffff;
$color-products-sold-out-badge: #5a5859;
$color-products-product-gallery-active-thumbnail: #d7d7d7;
$color-products-product-image-backgrounds: #efefef;
// Product cards
$color-product-cards-background: #ffffff;
// Product reviews
$color-product-reviews-star-rating-border: #7c7873;
$color-product-reviews-star-rating-active: #000000;
// Layout
$color-layout-site-background: #ffffff;
$color-layout-secondary-backgrounds: #fafafa;
$color-layout-dividers: #eaeaea;
// Content containers
$color-content-containers-background: #ffffff;
// Popups
$color-popups-background: #ffffff;
// Site overlays
$color-site-overlays-background: rgba(#212121, 0.5);
// Footer
$color-footer-background: #5a5859;
$color-footer-headings: #ffffff;
$color-footer-text: #ffffff;
$color-footer-text-link: #d0bfb5;
$color-footer-text-link-hover: #ffffff;
$color-footer-menu-list-link: #ffffff;
$color-footer-menu-list-link-hover: #ffffff;
$color-footer-additional-menu-link: #ffffff;
$color-footer-additional-menu-link-hover: #ffffff;
$color-footer-copyright-text: #999999;
$color-additional-accent: transparentize($color-footer-text, 0.5);
// Social icons
$color-facebook: #4267b1;
$color-twitter: #1da1f2;
$color-pinterest: #cc2129;
$color-instagram: #000;
$color-tumblr: #001935;
$color-vimeo: #1eb8ea;
$color-youtube: #ff0000;
$color-linkedin: #0077b5;
// Placeholders
$color-placeholder-background: mix($color-text-regular-text, $color-layout-site-background, 8%);
$color-placeholder-fill: mix($color-text-regular-text, $color-layout-site-background, 35%);
// General
$color-black: #000;
$color-white: #fff;
$color-border: mix($color-layout-site-background, border-mix($color-layout-site-background, $color-black, $color-white));
$color-border-soft: transparentize(border-mix($color-layout-site-background, $color-black, $color-white), 0.85);
$color-box-shadow-border: transparentize($color-border, 0.84);
$color-box-shadow-shadow: transparentize($color-border, 0.89);
$color-box-shadow-border-focused: transparentize($color-border, 0.5);
$color-box-shadow-shadow-focused: transparentize($color-border, 0.5);
$color-error: #f05d5d;
$color-success: #51a551;
$color-highlight: #fffbd9;
// ! Typography
// Fonts
$font-heading: $type-heading;
$font-body: $type-body;
$font-body-bold: $type-body-bold;
$use-alternate-font-body-bold: true;
$font-button: $type-button;
$font-menu: $type-menu;
$type-menu-sizing: 1.0;
$font-section: $type-section;
$font-product-card-title: $type-product-card-title;
$font-product-price: $type-product-price;
$font-product-vendor: $type-product-vendor;
$font-footer-heading: $type-footer-heading;
$font-highlights-bar: $type-highlights-bar;
$font-signpost: $type-signpost;
// Base Size
$font-size-base: 16;
$font-size-base-mobile: 15px;
// Headings size adjustment
$font-heading-sizing: 1.0;
$section-heading-sizing: 0.92;
$section-subheading-sizing: 1.0em;
$font-footer-heading-sizing: 0.98em;
// Letter spacing
$font-heading-spacing: 0.0em;
$font-body-spacing: 0.0em;
$font-menu-spacing: 0.01em;
$font-button-spacing: 0.01em;
$font-button-sizing: 1.0;
$font-section-spacing: 0.06em;
$font-product-vendor-spacing: 0.01em;
$font-footer-heading-spacing: 0.03em;
$font-highlights-spacing: 0.01em;
// Capitalization
$font-heading-capitalize: false;
$font-menu-capitalize: true;
$font-button-capitalize: true;
$font-section-capitalize: false;
$font-product-capitalize: true;
$font-footer-heading-capitalize: true;
$font-highlights-capitalize: true;
// Other
$font-body-underline-links: false;
// font sizes should be adjusted by this much if all caps.
$capitalize_adjustment: -1;
// Font sizes
$font-body-size: $font-size-base;
$font-body-size-small: rem($font-size-base - 1px); // 15px
$font-body-size-smaller: rem($font-size-base - 2px); // 14px
$font-body-size-smallest: rem($font-size-base - 3px); // 13px
$font-heading-large: rem($font-size-base * 2.125); // 34px
$font-heading-medium: rem($font-size-base * 1.875); // 32px
$font-h1-size: rem($font-size-base * 1.75); // 28px
$font-h2-size: rem($font-size-base * 1.625); // 26px
$font-h3-size: rem($font-size-base * 1.5); // 24px
$font-h4-size: rem($font-size-base * 1.25); // 20px
$font-h5-size: rem($font-size-base * 1.125); // 18px
$font-h6-size: rem($font-size-base); // 16px
$font-product-card-sizing: 1.04;
$font-highlights-sizing: 1.04;
$font-signpost-sizing: 1.0;
// ! Spacing
// Vertical spaces
$space-xxx-small: rem($font-body-size * 0.25); // 4px
$space-xx-small: rem($font-body-size * 0.5); // 8px
$space-x-small: rem($font-body-size * 0.75); // 12px
$space-small: rem($font-body-size); // 16px
$space-medium: rem($font-body-size * 1.25); // 20px
$space-large: rem($font-body-size * 1.75); // 28px
$space-x-large: rem($font-body-size * 2); // 36px
$space-xx-large: rem($font-body-size * 3.125); // 50px
$space-xxx-large: rem($font-body-size * 4.25); // 68px
$space-section-heading: rem(42px);
// Layout
$max-width: 1600px;
$page-max-width: 600px;
$gutter-outer-small: 10px;
$gutter-outer-medium: 15px;
$gutter-outer: 25px;
$gutter-content: 20px;
// ! Z-Indices
$index-header: 700;
$index-header-navmenu: $index-header + 2;
$index-banner: 800;
$index-main: 500;
$index-footer: 500;
$index-mobile-nav: $index-header + 100;
$index-modal: $index-mobile-nav + 100;
$index-header-search: 150;
$index-header-internal-icons: 125;
// ! Breakpoints
$bp-xxs: 375px;
$bp-xs: 525px;
$bp-smaller: 680px;
$bp-small: 720px;
$bp-medium: 860px;
$bp-large: 1024px;
$bp-larger: 1080px;
$bp-xl: 1280px;
// ! Components
// Container
$container-border-radius: 3px;
$container-border-radius-sm: 1.5px;
// Button font sizes
$button-x-large-size: rem($font-size-base * 1.3125); // 21px
$button-large-size: rem($font-size-base * 1.125); // 18px
$button-medium-size: rem($font-size-base); // 16px
$button-small-size: rem($font-size-base * 0.875); // 14px
$button-border-radius: 3px;
// Checkbox settings
$checkbox-size: (13px, 13px);
$checkbox-border: $color-forms-input-border;
$checkbox-inactive: $color-forms-input-background;
$checkbox-active: $color-text-links;
// Form input settings
$form-border-radius: 3px;
$form-border-radius-sm: 1.5px;
// Transitions
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-out-ripple: cubic-bezier(0.330, 0.810, 0.585, 0.990);
$ease-bubble: cubic-bezier(0.3, 0, 0, 1);
// Logo widths
$header-logo-image-max-width: 100px;
$header-content-offset-right: 305px; // My account + Logout + Currency switcher
$site-nav-item-space: 8px;
$site-nav-link-space: 7px;
$site-nav-link-space-vertical: 12px;
$site-nav-link-space-horizontal: 15px;
$site-subnav-space: 15px;
// Header Settings
$header-content-height: 46px;
$header-padding-vertical-mobile: 10px;
$header-padding-vertical: 20px;
$header-padding-vertical-sticky: 10px;
$header-line-height: $font-body-size + 2px;
// Product grid settings
$grid-column-space-desktop: 20px;
$grid-row-space-desktop: 20px;
$grid-column-space-mobile: 10px;
$grid-row-space-mobile: 10px;
$sidebar-width: 185px;
$product-card-border-radius: 3px;
// Product page settings
$color-slider-accent: $color-text-links;
$color-slider-dot: mix($color-text-regular-text, $color-layout-site-background, 23%);
$quantity-width: rem(115px);
// Featured blog post
$color-featured-post-background: $color-text-links;
$color-featured-post-foreground: $color-layout-site-background;
// Swatch settings
$swatches-size-product-page: 24px;
$swatches-size-product-card: 18px;
$swatches-size-sidebar-filter: 24px;
$swatches-shape: square;
@mixin media($max: false, $min: false) {
@if $max {
@if $min {
@media screen and (max-width: $max - 1) and (min-width: $min) { @content; }
} @else {
@media screen and (max-width: $max - 1) { @content; }
}
} @else {
@media screen and (min-width: $min) { @content; }
}
}
// Reusable button style for changing button sizes at different break points
@mixin button-size($button-size) {
$padding: false;
@if $button-size == small {
@include font-size-button-small($font-button-capitalize, -2);
$padding: (11px, 22px);
} @else if $button-size == medium {
@include font-size-button-medium($font-button-capitalize, -2);
$padding: (14px, 22px);
} @else if $button-size == large {
@include font-size-button-large($font-button-capitalize, -2);
$padding: (14px, 34px);
} @else if $button-size == x-large {
@include font-size-button-x-large($font-button-capitalize, -2);
$padding: (14px, 42px);
}
@include capitalize($font-button-capitalize);
padding: rem(nth($padding, 1)) rem(nth($padding, 2));
letter-spacing: $font-button-spacing;
}
@mixin header-shadow {
$color-header-shadow-alpha: 0.0;
@if ($color-header-shadow-alpha != 0) {
box-shadow: 0 1px 4px transparentize($color-header-shadow, 0.75);
}
}
@mixin grid-gutter($size) {
margin-right: -$size;
margin-left: -$size;
> * {
margin-right: $size;
margin-left: $size;
}
}
@mixin mobile-scrolling() {
overflow-x: scroll;
white-space: nowrap;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
// ! Font mixins
@mixin capitalize($capitalize) {
@if $capitalize == true {
text-transform: uppercase;
} @else {
text-transform: none;
}
}
@function capitalize_adjustment($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
@if $use_capitalize_adjustment {
@return $adjustment_amount;
} @else {
@return 0;
}
}
@mixin font-body-bold($font-style: initial) {
@if $use-alternate-font-body-bold {
@include font($font-body-bold, $font-weight: initial, $font-style: $font-style);
} @else {
@include font($font-body-bold, $font-weight: bolder, $font-style: $font-style);
}
}
@mixin font-body-underline-links {
@if $font-body-underline-links {
text-decoration: underline;
}
}
@mixin font-size-heading-large($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -3, $heading-size-setting: $font-heading-sizing) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 2.125 * $heading-size-setting + $adjustment); // 34px
@include media($bp-small) {
$mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
font-size: rem($font-size-base-mobile * 2.125 * $mobile-scale + $adjustment);
}
}
@mixin font-size-heading-medium($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -3, $heading-size-setting: $font-heading-sizing) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.875 * $heading-size-setting + $adjustment); // 32px
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
font-size: rem($font-size-base-mobile * 1.875 * $mobile-scale + $adjustment);
}
}
@mixin font-size-heading-1($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -3, $heading-size-setting: $font-heading-sizing) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.75 * $heading-size-setting + $adjustment); // 28px
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
font-size: rem($font-size-base-mobile * 1.75 * $mobile-scale + $adjustment);
}
}
@mixin font-size-heading-2($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2, $heading-size-setting: $font-heading-sizing) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.625 * $heading-size-setting + $adjustment); // 26px
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
font-size: rem($font-size-base-mobile * 1.625 * $mobile-scale + $adjustment);
}
}
@mixin font-size-heading-3($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: $capitalize_adjustment, $heading-size-setting: $font-heading-sizing) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount: -2);
font-size: rem($font-size-base * 1.5 * $heading-size-setting + $adjustment); // 24px
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
font-size: rem($font-size-base-mobile * 1.5 * $mobile-scale + $adjustment);
}
}
@mixin font-size-heading-4($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2, $heading-size-setting: $font-heading-sizing) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.25 * $heading-size-setting + $adjustment); // 20px
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
font-size: rem($font-size-base-mobile * 1.25 * $mobile-scale + $adjustment);
}
}
@mixin font-size-heading-5($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.125 + $adjustment); // 18px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 1.125 + $adjustment);
}
}
@mixin font-size-heading-6($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.125 + $adjustment); // 16px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 1.125 + $adjustment);
}
}
@mixin font-size-section-heading($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2, $heading-size-setting: $font-heading-sizing) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.5 * $heading-size-setting + $adjustment);
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
font-size: rem($font-size-base-mobile * 1.5 * $mobile-scale + $adjustment);
}
}
@mixin font-size-highlight-banner-heading($use_capitalize_adjustment: $font-highlights-capitalize, $adjustment_amount: -2) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.125 * $font-highlights-sizing + $adjustment); // 18px
@include media($bp-large) {
$mobile-scale: mobile-font-scaling($font-highlights-sizing, 0.6);
font-size: rem($font-size-base-mobile * $mobile-scale + $adjustment);
}
}
@mixin font-size-body-larger($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.375 + $adjustment); // 22px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 1.375 + $adjustment);
}
}
@mixin font-size-body-large($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.25 + $adjustment); // 20px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 1.25 + $adjustment);
}
}
@mixin font-size-body-medium($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.125 + $adjustment); // 18px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 1.125 + $adjustment);
}
}
@mixin font-size-body($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base + $adjustment); // 16px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile + $adjustment);
}
}
@mixin font-size-body-small($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 0.9375 + $adjustment); // 15px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 0.9375 + $adjustment);
}
}
@mixin font-size-body-smaller($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 0.875 + $adjustment); // 14px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 0.875 + $adjustment);
}
}
@mixin font-size-body-smallest($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 0.8125 + $adjustment); // 13px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 0.8125 + $adjustment);
}
}
@mixin font-size-body-tiny($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 0.75 + $adjustment); // 12px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 0.75 + $adjustment);
}
}
@mixin font-size-product-card($base-size: $font-size-base) {
font-size: rem($base-size * $font-product-card-sizing);
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($font-product-card-sizing);
font-size: rem($font-size-base-mobile * $mobile-scale);
}
}
@mixin font-size-button-small($use_capitalize_adjustment: $font-button-capitalize, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 0.875 * $font-button-sizing + $adjustment); // 14px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 0.875 * $font-button-sizing);
}
}
@mixin font-size-button-medium($use_capitalize_adjustment: $font-button-capitalize, $adjustment_amount: -2) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * $font-button-sizing + $adjustment); // 16px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * $font-button-sizing + -1);
}
}
@mixin font-size-button-large($use_capitalize_adjustment: $font-button-capitalize, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.125 * $font-button-sizing + $adjustment); // 18px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 1.125 * $font-button-sizing + -1);
}
}
@mixin font-size-button-x-large($use_capitalize_adjustment: $font-button-capitalize, $adjustment_amount: -2) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * 1.3125 * $font-button-sizing + $adjustment); // 21px
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * 1.3125 * $font-button-sizing + -1);
}
}
@mixin font-size-button-signpost() {
font-size: rem($font-size-base * $font-signpost-sizing);
@include media($bp-medium) {
font-size: rem($font-size-base-mobile * $font-signpost-sizing);
}
}
@mixin font-size-menu-large($use_capitalize_adjustment: false, $adjustment_amount: -2) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * $type-menu-sizing * 1.0625 + $adjustment);
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($type-menu-sizing, 0.5);
font-size: rem($font-size-base-mobile * 1.0625 * $mobile-scale + -1);
}
}
@mixin font-size-menu($use_capitalize_adjustment: $font-menu-capitalize, $adjustment_amount: $capitalize_adjustment) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * $type-menu-sizing + $adjustment);
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($type-menu-sizing, 0.5);
font-size: rem($font-size-base-mobile * $mobile-scale + $adjustment);
}
}
@mixin font-size-footer-heading($use_capitalize_adjustment: false, $adjustment_amount: -2) {
$adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);
font-size: rem($font-size-base * $font-footer-heading-sizing * 1.125 + $adjustment);
@include media($bp-medium) {
$mobile-scale: mobile-font-scaling($font-footer-heading-sizing, 0.4);
font-size: rem($font-size-base-mobile * $mobile-scale * 1.125 + $adjustment);
}
}
@mixin font-size-input {
font-size: rem($font-size-base); // 16px
@include media($bp-medium) {
font-size: rem(16px); // Force 16px regardless of base size
}
}
@function mobile-font-scaling($selected_scale: 1, $font_adjustment: 0.6) {
@return ($selected_scale - 1) * $font_adjustment + 1;
}
// Typography
%heading {
@include font($font-heading);
@include capitalize($font-heading-capitalize);
letter-spacing: $font-heading-spacing;
b,
strong {
font-weight: font-weight($font-heading, $font-weight: bolder);
}
em {
font-style: font-style($font-heading, $font-style: italic);
}
b em,
strong em,
em b,
em strong {
font-style: font-style($font-heading, $font-weight: bolder, $font-style: italic);
}
}
%h1 {
@extend %heading;
@include font-size-heading-1($font-heading-capitalize, -3);
}
%h2 {
@extend %heading;
@include font-size-heading-2($font-heading-capitalize, -2);
}
%h3 {
@extend %heading;
@include font-size-heading-3($font-heading-capitalize, -2);
}
%h4 {
@extend %heading;
@include font-size-heading-4($font-heading-capitalize, -2);
}
%h5 {
@extend %heading;
@include font-size-heading-5($font-heading-capitalize, -2);
}
%h6 {
@extend %heading;
@include font-size-heading-6($font-heading-capitalize, -2);
}
%menu {
@include font($font-menu);
@include font-size-menu($font-menu-capitalize);
@include capitalize($font-menu-capitalize);
letter-spacing: $font-menu-spacing;
}
%button-base {
@include button-size(small);
@include font($font-button);
display: inline-block;
text-decoration: none;
cursor: pointer;
border-radius: $button-border-radius;
transition: (
border-color 0.2s ease,
background-color 0.2s ease,
width 0.2s ease,
height 0.2s ease
);
}
%button-disable {
&,
&:active,
&:focus {
color: $color-buttons-disabled-text;
cursor: default;
background-color: $color-buttons-disabled-background;
border: 1px solid $color-buttons-disabled-background;
}
}
%button-primary {
@extend %button-base;
color: $color-buttons-primary-button-text;
background-color: $color-buttons-primary-button-background;
border: 1px solid $color-buttons-primary-button-background;
&:not(.disabled):hover {
background: $color-buttons-primary-button-background-hover;
border: 1px solid $color-buttons-primary-button-background-hover;
}
&:active,
&:focus {
background: $color-buttons-primary-button-background-hover;
border: 1px solid $color-buttons-primary-button-background-hover;
}
&.disabled { @extend %button-disable; }
}
%button-secondary {
@extend %button-base;
color: $color-buttons-secondary-button-text;
background-color: $color-buttons-secondary-button-background;
border: 1px solid $color-buttons-secondary-button-border;
&:not(.disabled):hover {
color: $color-buttons-secondary-button-text-hover;
background: $color-buttons-secondary-button-background-hover;
border: 1px solid $color-buttons-secondary-button-border-hover;
}
&:active,
&:focus {
background: $color-buttons-secondary-button-background-hover;
border: 1px solid $color-buttons-secondary-button-border-hover;
}
&.disabled { @extend %button-disable; }
}
// Layout
%layout-container {
max-width: $max-width;
padding-right: $gutter-outer-small;
padding-left: $gutter-outer-small;
margin-right: auto;
margin-left: auto;
@include media($min: $bp-small, $max: $bp-larger) {
padding-right: $space-large;
padding-left: $space-large;
}
@include media($min: $bp-larger) {
padding-right: $gutter-content * 2;
padding-left: $gutter-content * 2;
}
}
%section-container {
max-width: $max-width;
padding-right: $gutter-outer-small;
padding-left: $gutter-outer-small;
margin-right: auto;
margin-left: auto;
@include media($min: $bp-small) {
padding-right: $space-large;
padding-left: $space-large;
}
@include media($min: $bp-larger) {
padding-right: calc(#{$gutter-content * 2});
padding-left: calc(#{$gutter-content * 2});
}
}
%layout-container--reset {
max-width: 100%;
padding-right: 0;
padding-left: 0;
@include media($min: $bp-large) {
padding-right: 0;
padding-left: 0;
}
}
%page-content {
margin-top: $gutter-content * 1.5;
margin-bottom: $gutter-content * 1.5;
@include media($min: $bp-large) {
margin-top: $gutter-content * 2.5;
margin-bottom: $gutter-content * 2.5;
}
}
%clearfix {
&::before,
&::after {
display: table;
content: "";
}
&::after {
clear: both;
}
}
%link--text {
color: $color-text-regular-text;
text-decoration: none;
transition: color 0.1s ease;
&:hover {
color: $color-text-links;
}
}
%link--default {
color: $color-text-links;
text-decoration: none;
transition: color 0.1s ease;
&:hover {
color: $color-text-links-hover;
}
}
%box-shadow {
border: 1px solid $color-box-shadow-border;
box-shadow: 0 1px 4px $color-box-shadow-shadow;
}
%inline-chevron {
display: inline-block;
margin-left: rem(5px);
vertical-align: middle;
svg {
display: block;
margin-top: rem(-2px);
transform: rotate(-90deg);
}
}
%icon-checkbox {
display: inline-block;
width: nth($checkbox-size, 1);
height: nth($checkbox-size, 2);
color: $checkbox-inactive;
vertical-align: middle;
svg {
display: block;
width: 100%;
height: 100%;
background-color: $checkbox-inactive;
border: 1px solid $checkbox-border;
border-radius: $form-border-radius-sm;
fill: currentColor;
}
}
%icon-checkbox--active {
color: $checkbox-active;
svg {
background-color: transparent;
border: 0;
border-radius: $form-border-radius-sm;
fill: currentColor;
}
}
%button-reset {
@include font($font-body, $font-weight: bolder);
padding: 0;
letter-spacing: $font-body-spacing;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: normal;
-moz-appearance: normal;
appearance: normal;
}
%atc-button {
position: relative;
.atc-button--text {
opacity: 1;
}
.atc-button--icon {
position: absolute;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
opacity: 0;
visibility: hidden;
animation: rotate 0.6s linear infinite;
transition: opacity 0.1s ease 0.1s;
svg {
display: block;
width: 26px;
height: 26px;
}
}
&.processing {
.atc-button--text {
opacity: 0;
}
.atc-button--icon {
opacity: 1;
visibility: visible;
}
}
}
%search-button {
position: relative;
padding-left: 15px;
padding-right: 15px;
.search-icon--inactive,
.search-icon--active {
display: inline-block;
}
svg {
display: block;
width: 100%;
height: 100%;
}
.search-icon--inactive {
height: 23px;
opacity: 1;
transition: opacity 0.1s ease;
}
.search-icon--active {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
margin-top: -13px;
margin-left: -13px;
opacity: 0;
visibility: hidden;
animation: rotate 0.7s cubic-bezier(0.69, 0.31, 0.56, 0.83) infinite;
}
&.search-icon--processing {
.search-icon--inactive {
opacity: 0;
transition-delay: 0s;
}
.search-icon--active {
opacity: 1;
visibility: visible;
}
}
}
%message--base {
@include font($font-body, $font-weight: bolder, $font-family: false);
@include font-size-body;
letter-spacing: $font-body-spacing;
a {
color: currentColor;
}
}
%message--error {
@extend %message--base;
color: $color-error;
background-color: mix($color-error, $color-layout-site-background, 18%);
}
%message--success {
@extend %message--base;
color: $color-success;
background-color: mix($color-success, $color-layout-site-background, 18%);
}
%sneak-in {
&.animating,
&.visible:not(.animating) {
display: block;
}
&.visible:not(.animating) {
opacity: 1;
transform: translate(0);
}
&.animating-in {
animation-delay: 0s;
animation-duration: 0.27s;
animation-name: sneak-in;
animation-timing-function: linear;
animation-fill-mode: both;
animation-direction: normal;
}
&.animating-out {
opacity: 0;
transform: translateY(-5px);
transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
}
}
%fade-in {
animation-delay: 0s;
animation-duration: 0.27s;
animation-name: fade-in;
animation-timing-function: linear;
animation-fill-mode: both;
animation-direction: normal;
}
%no-results--wrapper {
width: 100%;
margin-top: $space-xx-large;
text-align: center;
@include media($min: $bp-small) {
margin-top: $space-xx-large - $space-large;
}
}
%no-results--title {
@include font($font-body);
@include font-size-heading-4;
margin-top: 0;
margin-bottom: 0;
letter-spacing: $font-body-spacing;
color: $color-text-headings;
}
%no-results--button {
@extend %button-primary;
@include button-size(medium);
margin-top: $space-medium;
}
//scss-lint:enable SelectorFormat
.account-order,
.order-footer {
width: 100%;
text-align: left;
border-collapse: collapse;
tr,
.order-footer-item {
border-bottom: 1px solid $color-layout-dividers;
}
th {
@include font($font-heading);
@include font-size-heading-6;
padding-bottom: $space-small;
color: $color-text-headings;
}
td,
.order-footer-value,
.order-footer-label {
@include font-size-body-small;
padding-top: $space-small;
padding-bottom: $space-small;
padding-left: $gutter-content;
&:first-child {
padding-left: 0;
}
}
.order-footer-value,
.order-item-price,
.order-item-quantity,
.order-item-total {
width: 20%;
text-align: right;
@include media($min: $bp-small) {
width: 16%;
}
}
.order-item-placeholder {
display: block;
}
.order-item-title {
@include font($font-heading);
display: inline-block;
width: calc(60% - 64px);
padding-left: $gutter-content;
vertical-align: middle;
a {
display: inline-block;
}
.order-item-options {
@include font-size-body-smaller;
display: block;
margin-top: $space-xx-small;
}
}
.order-item-price {
display: table-cell;
@include media($max: $bp-small) {
position: absolute;
visibility: hidden;
}
}
.order-item {
width: 50px;
a {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
svg {
display: block;
width: 50px;
height: auto;
max-width: 100%;
}
}
}
.order-footer {
display: table;
.order-footer-item {
display: table-row;
&:last-child {
border-bottom: 0;
}
.order-footer-label {
display: table-cell;
}
.order-footer-value {
display: table-cell;
}
}
}
.account-order-attributes {
padding-left: 0;
list-style: none;
li:not(:first-child) {
margin-top: $space-xx-small;
}
}
.account-order-attribute-title {
@include font($font-body, $font-weight: bolder, $font-family: false);
letter-spacing: $font-body-spacing;
}
.dynamic-video-wrapper {
@extend %section-container;
}
.video:not(.video_iframe_sets) {
position: relative;
width: 100%;
padding-bottom: percentage(9/16);
z-index: 2;
&.video-aspect-ratio-21-9 {
padding-bottom: percentage(9/21);
}
iframe {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
background-color: $color-black;
border-radius: $container-border-radius;
}
&.video-playing {
.fluid-width-video-wrapper {
z-index: 1;
}
}
.hide-player {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
&.video-transitioning .hide-player,
&.video-playing .hide-player {
opacity: 1;
}
}
.video-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
border-radius: $container-border-radius;
opacity: 1;
.video-transitioning &,
.video-playing & {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
.video-playing & {
z-index: 0;
}
}
.video-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: $container-border-radius;
}
.video-play-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: rem(77px);
height: rem(77px);
padding: 0;
margin: 0;
color: $color-white;
background-color: transparent;
cursor: pointer;
border: 0;
border-radius: rem(25px);
outline: none;
transition: transform .12s cubic-bezier(.3, 0, 0, 1);
&.no-cover {
opacity: 0;
&:active {
opacity: 0;
}
}
&:hover {
transform: scale(1.08);
}
&:active {
opacity: 0.7;
transform: scale(.96);
}
}
.icon-play {
position: absolute;
top: 0;
left: 0;
display: block;
height: auto;
opacity: 1;
.video-loading & {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
}
.icon-loading {
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0;
animation: 0.6s rotate linear infinite both;
.video-loading & {
opacity: 1;
transition: opacity 200ms ease-in-out;
}
}
$local-button-width: 53px;
$local-active-background: mix($color-text-links, $color-popups-background, 8%);
$local-image-width: rem(48px);
$local-box-shadow: 0 3px 7px rgba(127, 127, 127, 0.25);
.live-search {
position: relative;
z-index: $index-header-search;
display: block;
height: $header-content-height;
margin-top: $header-padding-vertical-mobile;
@include media($min: $bp-large) {
display: flex;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
margin-top: 0;
vertical-align: middle;
}
&.live-search--takeover {
position: fixed;
display: block;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100vh;
margin-top: 0;
background-color: $color-popups-background;
}
}
.live-search-form {
position: absolute;
right: -1px;
left: -1px;
border-radius: 0;
transition: border 0.1s ease, box-shadow 0.1s ease;
&:hover,
.live-search--focused & {
border-color: transparentize($color-border, 0.75);
}
.live-search--takeover & {
border-color: transparent;
border-radius: 0;
box-shadow: none;
}
.form-field {
position: relative;
z-index: 100;
display: flex;
height: $header-content-height;
.live-search--takeover & {
height: $header-content-height + 6px;
border: 0;
border-radius: 0;
}
}
}
.form-field .live-search-form-field {
@include font-size-input;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
width: calc(100% - #{$local-button-width});
padding-top: rem(14px);
padding-bottom: rem(14px);
color: $color-header-search-bar-text;
vertical-align: top;
background-color: $color-header-search-bar-background;
border-color: $color-header-search-bar-border;
border-style: solid;
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 1px;
border-radius: $form-border-radius 0 0 $form-border-radius;
transition: border 0.1s ease, box-shadow 0.1s ease;
@if (alpha($color-header-search-bar-border) == 0) {
border-width: 0;
}
&:-ms-input-placeholder {
color: rgba($color-header-search-bar-text, 0.6);
transform: translateY(0);
opacity: 1;
}
&::-ms-input-placeholder {
color: rgba($color-header-search-bar-text, 0.6);
transform: translateY(0);
opacity: 1;
}
&::placeholder {
color: rgba($color-header-search-bar-text, 0.6);
transform: translateY(0);
opacity: 1;
}
&:focus {
border-color: $color-header-search-bar-border;
}
.live-search--active & {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.live-search--takeover & {
z-index: $index-header-search + 50;
width: 100%;
padding-right: 100px;
border: none;
color: $color-forms-input-text;
background-color: $color-forms-input-background;
&:-ms-input-placeholder {
color: $color-forms-input-placeholder-text;
}
&::-ms-input-placeholder {
color: $color-forms-input-placeholder-text;
}
&::placeholder {
color: $color-forms-input-placeholder-text;
}
@include media($max: $bp-small) {
border-bottom: 0;
}
}
}
.live-search-button {
@extend %button-base, %search-button;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
width: $local-button-width;
color: $color-header-search-bar-button-icon;
vertical-align: top;
background-color: $color-header-search-bar-button-background;
border-color: $color-header-search-bar-border;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
border-radius: 0 $form-border-radius $form-border-radius 0;
@if (alpha($color-header-search-bar-border) == 0) {
border-width: 0;
}
&:hover {
background-color: $color-header-search-bar-button-background;
}
.live-search--active & {
border-bottom-right-radius: 0;
}
.live-search--takeover & {
display: none;
visibility: hidden;
}
}
.live-search-takeover-cancel {
@extend %button-reset, %link--default;
@include font($font-body, $font-family: false, $font-weight: bolder);
@include font-size-body;
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: $index-header-search + 100;
display: none;
padding: rem(15px);
letter-spacing: $font-body-spacing;
visibility: hidden;
.live-search--takeover & {
display: inline-block;
visibility: visible;
}
&:focus {
outline: solid transparentize($color-text-links, 0.5);
outline-offset: -3px;
}
}
.search-flydown {
@include font-size-body;
position: relative;
z-index: 50;
display: none;
width: 100%;
background-color: $color-popups-background;
box-shadow: $local-box-shadow;
transition: border 0.1s ease, box-shadow 0.1s ease;
@include media($max: $bp-small) {
box-shadow: none;
}
.live-search--active & {
z-index: 200;
// display: block;
display:none;
}
.live-search--takeover & {
height: calc(100vh - #{$header-content-height});
}
}
.search-flydown--placeholder,
.search-flydown--results,
.search-flydown--quicklinks {
display: none;
&.visible {
display: block;
}
}
// Quicklinks
.search-flydown--quicklinks {
padding-top: 15px;
padding-bottom: 10px;
}
.search-flydown--quicklinks-title {
@include font($font-body, $font-family: false, $font-weight: bolder);
margin-top: 0;
margin-bottom: 0;
margin-left: 15px;
font-size: rem(17px);
letter-spacing: $font-body-spacing;
color: $color-text-headings;
}
.search-flydown--quicklinks-list {
padding-left: 0;
margin-top: $space-xx-small;
margin-bottom: 0;
list-style: none;
}
.search-flydown--quicklinks-item {
display: block;
}
.search-flydown--quicklinks-link {
display: block;
padding: 7px 15px;
color: $color-text-links;
text-decoration: none;
transition: color 0.1s ease, background-color 0.1s ease;
&:hover,
&:focus {
background-color: $local-active-background;
}
&:focus {
outline: none;
}
}
// Product results
.search-flydown--product-items--none,
.search-flydown--product-items {
display: block;
.search-flydown--results--content-enabled & {
display: inline-block;
width: 64%;
vertical-align: top;
.live-search--takeover & {
display: block;
width: 100%;
}
}
}
.search-flydown--product {
display: flex;
align-items: center;
padding: 10px 15px;
color: $color-text-regular-text;
text-decoration: none;
transition: color 0.1s ease-in, background-color 0.1s ease-in;
&:hover,
&:focus {
background-color: $local-active-background;
}
&:focus {
outline: solid transparentize($color-text-links, 0.5);
}
.search-flydown--placeholder & {
cursor: default;
&:hover,
&:focus {
background-color: inherit;
}
}
}
.placeholder--content-text,
.placeholder--content-image {
animation: shimmer 1s ease-in-out infinite;
animation-fill-mode: forwards;
animation-direction: alternate;
}
.search-flydown--product-text,
.search-flydown--product-image {
display: inline-block;
vertical-align: middle;
}
.search-flydown--product-image {
@include font-size-body;
display: inline-block;
width: $local-image-width;
height: $local-image-width;
img {
background-color: $color-products-product-image-backgrounds;
}
img,
svg {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
+ .search-flydown--product-text {
max-width: calc(100% - (#{$local-image-width + $space-small}));
margin-left: $space-small;
}
}
.search-flydown--product-text {
@include font-size-body;
.placeholder--content-text {
height: 0.6em;
max-width: 100%;
}
}
.search-flydown--product-title {
@include font-size-body;
display: block;
line-height: 1.3;
&.placeholder--content-text {
width: 240px; // Opinionated width -- for pleasantries
}
.highlight {
background-color: $color-highlight;
}
}
.search-flydown--product-price {
@include font-size-body-small;
display: block;
line-height: 1.5;
&.placeholder--content-text {
width: 70px;
margin-top: 0.44em; // Estimated space above normally derived from line-height
}
}
.search-flydown--product-price--main {
display: inline-block;
color: $color-products-regular-price;
.search-flydown--product-price-has-sale & {
margin-right: rem(7px);
color: $color-products-sale-price;
}
}
.search-flydown--product-price--compare-at {
color: $color-products-compare-at-price;
text-decoration: line-through;
}
.search-flydown--product-items--none {
@include font-size-body;
padding: $space-medium 15px $space-large;
color: $color-text-regular-text;
vertical-align: top;
h5 {
@include font-size-heading-5;
margin-top: 0;
margin-bottom: 0;
color: $color-text-headings;
}
p {
margin-top: $space-medium;
margin-bottom: 0;
}
}
.search-flydown--continue {
@extend %link--default;
@include font-body-underline-links;
&:focus {
outline: solid transparentize($color-text-links, 0.5);
outline-offset: 4px;
}
}
// Content results
.search-flydown--content-items {
display: inline-block;
width: 36%;
padding: $space-medium 25px $space-large;
vertical-align: top;
.live-search--takeover & {
display: none;
}
}
.search-flydown--content-title {
@include font-size-body-smaller;
margin-top: 0;
margin-bottom: 0;
color: $color-text-light-text;
}
.search-flydown--content-items-list {
@include font-size-body;
padding-left: 0;
margin-top: $space-x-small;
list-style: none;
}
.search-flydown--content-item {
@include font-size-body;
margin-top: $space-xx-small;
line-height: 1.56;
a {
@extend %link--default;
&:focus {
outline: solid transparentize($color-text-links, 0.5);
outline-offset: 4px;
}
}
}
.search-flydown--content-items-none {
@include font-size-body;
margin-top: $space-xx-small;
margin-bottom: 0;
color: $color-text-regular-text;
}
.search-flydown--footer {
display: block;
width: 100%;
padding: 10px 15px 15px;
text-align: center;
}
product-cta {
display: none;
}
.product-readmore {
width: 100%;
margin: $space-xx-small $gutter-outer-small 0;
@include media($min: $bp-small) {
margin: $space-xx-large 0 0;
}
@include media($min: $bp-large) {
margin: $space-xxx-large 0 0;
}
}
.shortcode--product-cta {
&:not([hidden]) {
width: 100%;
margin-top: $space-small;
text-align: center;
&:not([button-style]) {
@extend %button-secondary;
}
&:not([button-size]) {
@include button-size(medium);
}
&[button-style="primary"] {
@extend %button-primary;
}
&[button-style="secondary"] {
@extend %button-secondary;
}
&[button-size="small"] {
@include button-size(small);
}
&[button-size="medium"] {
@include button-size(medium);
}
&[button-size="large"] {
@include button-size(large);
}
}
}
.product-description.rte,
.product-readmore.rte,
.page-content.rte {
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: $space-small;
grid-column-gap: 5%;
width: 100%;
div:not(:first-child) {
margin-top: 0;
}
&.mobile-stacked {
@include media($max: $bp-small) {
display: block;
div:not(:first-child) {
margin-top: $space-small;
}
}
}
}
}
details {
/* margin-top: $space-large; */
border-top: 1px solid $color-layout-dividers;
border-bottom: 1px solid $color-layout-dividers;
+ details {
margin-top: 0;
border-top: none;
}
.rte & {
+ p,
+ div {
margin-top: $space-large;
}
}
&[open] {
padding-bottom: $space-small;
@include media($min: $bp-small) {
padding-bottom: $space-large;
}
summary {
~ * {
animation: sneak-in 0.4s ease-in-out;
}
&::after {
transform: translateY(-50%) rotateX(180deg);
}
}
}
> div {
> h1, > h2, > h3, > h4, > h5, > h6 {
&:first-child {
margin-top: rem($font-body-size);
}
}
}
.grid {
width: auto;
&:not(.mobile-stacked) {
> div {
h1, h2, h3, h4, h5, h6 {
&:first-child {
margin-top: 0;
}
}
}
div:nth-child(1),
div:nth-child(2) {
h1, h2, h3, h4, h5, h6 {
&:first-child {
margin-top: rem($font-body-size);
}
}
}
}
&.mobile-stacked {
> div {
h1, h2, h3, h4, h5, h6 {
&:first-child {
@include media($min: $bp-small) {
margin-top: 0;
}
}
}
}
div:nth-child(1) {
h1, h2, h3, h4, h5, h6 {
&:first-child {
margin-top: rem($font-body-size);
}
}
}
div:nth-child(2) {
h1, h2, h3, h4, h5, h6 {
&:first-child {
@include media($min: $bp-small) {
margin-top: rem($font-body-size);
}
}
}
}
}
}
}
summary {
@include font($font-heading);
@include font-size-heading-4;
position: relative;
display: block;
color: $color-text-headings;
cursor: pointer;
.summary-wrapper {
padding: $space-small $space-large $space-small 0;
outline: none;
@include media($min: $bp-small) {
padding: $space-large $space-large $space-large 0;
}
}
.headline {
margin: 0;
}
.sub-headline {
@include font($font-body);
@include font-size-body;
display: block;
color: $color-text-light-text;
}
&::-webkit-details-marker {
display: none;
}
// The before is added for IE and Edge, but we want our own style (using after)
&::before {
display: none;
}
&::after {
content: "";
background: url('data:image/svg+xml;utf8,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 6.75L12.5 1.25" stroke="%23#{$color-text-regular-text-encoded}" stroke-width="1.75" stroke-linecap="square"/><path d="M7 6.75L1.5 1.25" stroke="%23#{$color-text-regular-text-encoded}" stroke-width="1.75" stroke-linecap="square"/></svg>') no-repeat 50% 50%;
display: block;
height: 20px;
width: 20px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s ease-in-out;
z-index: -1;
}
}
.product-readmore {
&.rte {
.grid {
width: auto;
}
}
summary {
@include font-size-heading-3;
.summary-wrapper {
@include media($min: $bp-smaller) {
display: flex;
align-items: center;
}
.headline {
@include media($min: $bp-smaller) {
flex: 0 0 rem(150px);
}
@include media($min: $bp-small) {
flex: 0 0 rem(250px);
}
}
.sub-headline {
@include media($min: $bp-smaller) {
margin-left: $space-large;
}
}
}
}
.indent-content {
@include media($min: $bp-smaller) {
margin-left: rem(150px);
padding-left: $space-large;
}
@include media($min: $bp-small) {
margin-left: rem(250px);
}
}
}
@media all and (-ms-high-contrast:none) {
summary::after {
content: "\203A";
height: auto;
width: auto;
font-size: 2rem;
transform: translateY(-50%) rotate(90deg);
}
details[open] summary::after {
transform: translateY(-50%) rotate(-90deg);
}
}
/* Custom Ring Inquiry - Theme Change
-------------------------------------*/
.ring__inquiry {
min-height: 650px;
padding-top: 50px;
.hide {
display: none !important;
}
.page-width {
margin: auto;
}
div.form-field-select-wrapper {
select {
font-family: "Avenir Next", sans-serif;
}
}
.promo-block-grid {
background: none;
cursor: pointer;
}
.buttonContainer {
width: 150px;
margin: auto;
display: flex;
justify-content: space-between;
margin-top: 50px;
a {
padding: 10px;
cursor: pointer;
}
}
.text-center {
text-align: center;
}
#back {
text-align: center;
-webkit-appearance: none;
svg {
transform: rotate(90deg);
}
span {
display: block;
margin-top: 10px;
}
}
#next {
text-align: center;
-webkit-appearance: none;
svg {
transform: rotate(270deg);
}
span {
display: block;
margin-top: 10px;
}
}
.promo-block-grid img {
width: 100%;
height: 100%;
position: relative;
opacity: 1;
}
.promo-block-grid-main img {
width: 100%;
height: 100%;
position: relative;
opacity: 1;
}
.img-container {
img {
object-fit: cover;
object-position: bottom;
max-width: 400px;
height: 350px;
}
}
.img-container-2 {
img {
object-fit: cover;
object-position: top;
max-width: 400px;
height: 350px;
}
}
.img-container-1 {
img {
object-fit: cover;
object-position: bottom;
max-width: 500px;
height: 400px;
}
}
.step-2 {
.ring .promo-block-grid {
flex: 0 0 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ring .promo-block-grid img.diamond-image {
width: 80px;
height: 80px;
object-fit: contain;
}
}
.step-4 {
.promo-block-grid {
margin: 1px;
padding-bottom: 30px;
padding-top: 5px;
}
.promo-block-grid.ring-setting-container {
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.promo-block-grid img.diamond-image {
width: 150px; /* Original 80x80 */
height: 150px;
object-fit: contain;
}
p {
font-family: "Avenir Next", sans-serif;
}
h1 {
font-size: 21px;
}
}
.step-similar-1 {
max-width: 1250px;
input {
margin-bottom: 15px;
height: 28px;
}
input[type="text"] {
border: 1px solid #000;
}
input:required {
box-shadow: none;
}
p {
color: #000;
}
.hasError {
margin-bottom: 0;
}
.field_error {
color: red;
font-family: "Avenir Next", sans-serif;
text-align: center;
display: block;
}
}
.step-similar-2 {
max-width: 1250px;
p {
margin-bottom: 20px;
margin-top: 5px;
font-family: "Avenir Next", sans-serif;
}
.ring_setting_style,
.diamond_shape {
text-transform: capitalize;
}
}
.submit {
text-align: center;
margin-top: 50px;
input {
width: 50%;
background-color: #000;
color: #fff;
border: none;
padding: 5px 0px;
margin: auto;
font-size: 18px;
font-family: Centaur, serif;
font-weight: bold;
}
}
#start-over {
display: block;
margin-top: 20px;
text-decoration: underline;
-webkit-appearance: none;
font-family: "Avenir Next", sans-serif;
}
.how-it-works-section {
width: 100%;
}
.how-it-works-section h2 {
text-align: center;
font-family: Centaur,serif;
font-style: normal;
font-weight: 400;
font-size: 1.64063rem;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 3rem;
letter-spacing: 0.06em;
color: #212121;
}
.how-it-works-section--steps-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.how-it-works-section--single-step {
width: 300px;
}
.how-it-works-section--single-step img {
display: block;
width: 240px;
height: 240px;
margin: 0 auto;
}
.how-it-works-section--single-step h4 {
text-align: center;
text-transform: uppercase;
}
.how-it-works-section--single-step p {
text-align: center;
}
}
@media only screen and (max-width: 1011px) {
.ring__inquiry {
div.form-field-select-wrapper {
max-width: 150px;
margin: auto;
* {
width: unset !important;
text-align: right !important;
}
select {
width: 100% !important;
}
}
div.step-1 {
img {
margin-top: 0px;
}
}
.step-similar-2 {
.preview {
img {
width: 150px !important;
margin: 0;
}
}
.promo-block-grid.promo-block-grid--index-2 {
margin-left: 0px !important;
/* margin-top: 50px; */
}
}
.how-it-works-section--single-step {
margin-bottom: 20px;
}
.how-it-works-section--steps-container .how-it-works-section--single-step img {
margin: 0 auto;
width: 240px !important;
height: 240px !important;
}
}
}
@media only screen and (min-width: 1024px) {
.ring__inquiry {
min-height: 650px;
.step-1 {
max-width: 1200px;
}
.step-2 {
.band {
margin: auto;
.promo-grid--inner {
.grid__item {
flex: 0 0 30%;
text-align: center;
.form-field-select-wrapper {
margin: auto;
}
}
}
}
.ring {
max-width: 800px;
margin: auto;
.promo-block-grid {
margin-top: 0;
}
}
}
.step-3 {
.medium-up--one-half {
flex: 0 0 30%;
text-align: center;
.form-field-select-wrapper {
margin: auto;
}
}
}
.step-4 {
.page-title {
margin-bottom: 20px;
}
.promo-grid--inner {
flex-wrap: nowrap;
}
p {
margin: 0;
}
h1 {
margin-bottom: 0px;
}
}
label {
display: block;
}
input {
width: 100%;
}
.page-masthead {
h1 {
margin-bottom: 0;
}
}
.form-field-select-wrapper {
width: 100px;
}
.preview {
img {
max-width: 150px;
height: auto;
}
}
}
.thank-you {
.innerContainer {
margin: 50px auto 0px !important;
width: 50% !important;
.contentContainer{
max-width: 60% !important;
}
}
}
}
.thank-you {
.innerContainer {
text-align: center;
width: 100%;
margin: 0px auto 0px;
position: relative;
height: 600px;
img {
object-fit: cover;
object-position: top;
width: 100%;
height: 100%;
}
.contentContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0,0,0,0.5);;
color: #fff;
padding: 50px;
text-align: center;
max-width: 80%;
width: 100%;
max-height: 80%;
h1 {
margin: 0;
text-transform: uppercase;
}
p {
margin: 10px 0px;
}
a {
background-color: #000;
color: #fff;
text-decoration: none;
padding: 8px 30px;
display: inline-block;
margin-top: 30px;
}
}
}
.collections {
max-width: 1200px;
margin: auto;
h1 {
text-align: center;
text-transform: uppercase;
margin-top: 50px;
}
.items {
overflow-x: auto;
}
}
}
/* Lifestle Edit Pages - Theme Change
-------------------------------------*/
.lifestyle{
.hide{
display:none;
}
.pagination{
display: flex;
/* display: none; */
align-items: center;
justify-content: center;
margin-top: 50px;
.prev{
padding: 10px;
margin-right: 5px;
border: 1px solid #000;
cursor: pointer;
}
.next{
padding: 10px;
margin-left: 5px;
border: 1px solid #000;
cursor: pointer;
.pagination--chevron-right{
margin:0;
}
}
}
.banner{
img{
width:100%;
height: 266px;
object-fit: cover;
object-position: center;
}
}
.wrapper{
max-width: 1340px;
margin:auto;
}
.text-center{
text-align:center;
}
.title{
h1{
margin-top:40px;
margin-bottom:45px;
font-size: 38px;
}
}
.cards{
padding: 0px 10px;
a{
text-decoration:none;
}
.card-container{
img{
width:100%;
}
.content{
text-align:center;
h1{
margin:20px 0 10px 0;
color:#000;
text-decoration:none;
}
p{
font-family: "Avenir Next", sans-serif;
width:90%;
margin:auto;
color:#000;
text-decoration:none;
line-height: 1.5;
}
}
}
}
.grid-wrapper {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 30px 10px;
}
}
.lifestyle-single-page{
margin-top:50px;
.grid-wrapper{
display: flex;
}
.outer-wrapper{
background-color: #f2ece3;
}
.inner-wrapper{
max-width:1340px;
margin:auto;
}
.person-content{
padding: 32px 0px 75px;
.grid-wrapper{
flex-wrap: wrap-reverse;
padding: 0px 10px;
}
.img_container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
img{
width: 100%;
}
.content-header{
font-size: 27px;
text-align: left;
width: 100%;
}
.name{
margin:0;
font-size:57px;
text-align: left;
width: 100%;
}
.content_person{
p{
font-family: "Avenir Next", sans-serif;
font-size: 18px;
line-height: 25px;
text-align: left;
width: 100%;
}
}
}
.inner-wrapper.product-content{
max-width: 1000px;
padding: 30px 10px 0px;
.grid-wrapper{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
.grid-item{
text-decoration:none;
margin: 0px 15px 50px;
}
img{
width:100%;
}
.contentProduct{
margin-top: 10px;
padding: 0px 5px;
p{
margin: 0;
text-decoration: none;
font-size: 18px;
color: #000;
line-height: 25px;
}
}
}
}
.content{
padding: 0px 10px;
.grid-wrapper{
grid-template-columns: repeat(1, 1fr);
}
.content-inner{
margin: 60px 0px;
*{
text-align: center;
font-size:22px;
font-family: "Avenir Next", sans-serif;
}
}
}
}
@media only screen and (min-width: 767px) {
.lifestyle{
.grid-wrapper {
grid-template-columns: repeat(2, 1fr);
grid-gap: 60px 30px;
}
.cards{
padding: 0px 30px;
}
}
.lifestyle-single-page{
margin-top:50px;
.grid-wrapper{
display: grid;
}
.person-content{
.grid-wrapper{
grid-template-columns: repeat(2, 1fr);
grid-gap: 0px 35px;
.content-header{
margin-top: 50px;
}
.name{
margin: 30px 0px;
}
img{
width: unset;
}
}
}
// .inner-wrapper.product-content{
// .grid-wrapper{
// grid-template-columns: repeat(4, 1fr);
// grid-gap: 0px 30px;
// }
// }
}
}
@media only screen and (min-width: 1024px) {
.lifestyle{
.grid-wrapper {
grid-template-columns: repeat(3, 1fr);
grid-gap: 80px 30px;
}
.wrapper{
max-width: calc(100% - 245px);
margin:auto;
}
.cards{
padding: 0px 60px;
}
}
.lifestyle-single-page{
.inner-wrapper{
max-width: calc(100% - 245px);
margin:auto;
}
}
}
@media only screen and (min-width: 1340px) {
.lifestyle{
.cards{
padding: 0px 0px;
}
}
}
/* ------------- Charm builder page CSS - Theme Change
------------------------------------------ */
.charm-builder-page{
padding-bottom:5px;
position:relative;
margin:0 auto;
max-width: 1260px;
}
.charm-builder-page .loading{
background: #fff url(ajax-loader.gif) no-repeat center;
width:100%;
height:100%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:10;
}
.choose-charm-section{
float:left; width: 52%;
}
.charm-product-preview{
float:right;
width:48%;
margin-top: 60px;
position:relative;
img{ width:100%; }
.chain-product-image{ }
}
.page-title.text-align--left{ text-align:left; padding:0; margin-top: 30px; }
.build_steps li{
font-size: 13px;
margin-bottom: 6px;
letter-spacing: 1px;
span{
font-size:10px;
font-style:italic;
}
}
.charms-carousel{
width:90%; margin:20px auto;
.product{ overflow:visible; position:relative;}
}
.charms-carousel .slick-arrow{
width: 30px;
border: none;
background: none;
}
.charms-carousel .slick-prev{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -30px;
}
.charms-carousel .slick-next{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -30px;
}
.charms-carousel .slick-track{
overflow: hidden;
}
.charm-product-info button, .charm-buttons a{
border:0;
background: #5A5859;
color: #fff;
padding: 10px 15px;
font-size: 12px;
letter-spacing: 1px;
margin-top:15px;
cursor:pointer;
display: inline-block;
text-transform: uppercase;
text-align:center;
outline:none;
text-decoration: none;
}
.charm-product-info button, .charm-buttons a:hover{
background: #000000;
}
.fixedHeight .charm-add-button{
width:unset !important;
}
.charm-buttons{
text-align:center;
a{
margin-left: 5px;
margin-right: 5px;
min-width: 20%;
}
}
.charm-price-preview{
text-align: center;
font-size: 22px;
}
.charm-product-info{
text-align:center;
.swatch{ padding: 0 0 15px 0; margin:0; display:block; }
form{ margin:0; }
.charm-product-name, .charm-product-price{ font-size:12px; display:block; white-space: normal; }
.charm-engraving-field{
margin: 15px 0 0;
font-size: 12px;
text-align: center;
padding: 8px 12px;
width:100%;
}
}
.fixedHeight .charm-add-button{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:130px;
background: #5A5859;
font-family: Centaur, serif;
font-weight: 400;
color: #fff;
display: inline-block;
text-align: center;
text-transform: uppercase;
line-height: normal;
padding: 15px 20px;
border-radius: 2px;
font-size: .9rem;
-webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
font-size: 0.92857rem;
border:none;
cursor:pointer;
}
.fixedHeight .charm-add-button a:hover {
background: #000000;
}
.charm-product-image{
position:relative;
&.fixedHeightImage img{
position: absolute;
top: 50%;
transform: translateY(-50%);
left:-3px;
width:100%;
}
}
.charm-product-preview .charms{
img{
width:auto;
max-width: 35px;
max-height: 100px;
}
.remove{
position: absolute;
line-height: 1;
padding: 0px 2px 1px 2px;
border: 1px solid #ccc;
color: #ccc;
font-size: 11px;
cursor: pointer;
left: 50%;
margin-left: -6px;
top:-15px;
}
}
.center-charm{
position: absolute;
bottom:24px;
left: 50%;
transform: translateX(-50%);
z-index:9;
}
.left-charm-1{
position: absolute;
bottom:45px;
left: 36%;
transform: rotate(34deg);
z-index:9;
}
.left-charm-3{
position:absolute;
bottom:82px;
left: 28.5%;
transform: rotate(50deg);
z-index:9;
}
.right-charm-2{
position: absolute;
bottom:38px;
right: 36%;
transform: rotate(-34deg);
z-index:9;
}
.right-charm-4{
position: absolute;
bottom:74px;
right: 28.5%;
transform: rotate(-50deg);
z-index:9;
}
.swatch {
margin:1em 0;
}
/* Label */
.choose-charm-section .header {
margin: 0 20px 0 0;
display: inline-block;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 16px;
}
.charms-section{
margin:30px 0 20px 0;
.header{
padding-bottom:10px;
border-bottom:1px solid #ccc;
display:block;
margin:0;
}
}
/* Hide radio buttons.*/
.swatch input {
display:none;
}
.swatch label{
display:inline-block;
min-width:25px !important;
margin:0;
font-size:14px;
position:relative;
line-height:1;
}
.swatch .no-color label:before{
content:'';
width:10px;
height:10px;
border-radius:50%;
border:1px solid #ccc;
position:absolute;
top:50%;
left:0;
transform:translateY(-50%);
}
.swatch .no-color input:checked + label:before {
content:'';
background: #333;
border-color: #333;
}
.swatch .color label, .swatch .material label{
/* The border when the button is not selected */
border:#ccc 1px solid;
/* Rounded corners */
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.swatch .color label span, .swatch .material label span{
/* Rounded corners */
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
/* To give width and height */
display:block;
/* Color swatches contain no text so they need to have a width. */
min-width:25px !important;
height:25px !important;
/* No extra spacing between them */
margin:3px;
/* Background color */
background-color:#ddd;
/* Styling text */
font-size:13px;
text-align:center;
line-height:25px;
white-space:nowrap;
text-transform:uppercase;
}
.swatch-element label { padding:0 10px 0 20px; }
.color.swatch-element label, .material.swatch-element label { padding:0; }
.swatch .color input:checked + label, .swatch .material input:checked + label {
border-color:#aaa;
}
.swatch .swatch-element {
display: inline-block;
vertical-align: middle;
line-height: 1;
-webkit-transform:translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing:antialiased;
margin:0px 10px 0 0;
position:relative;
}
/* Image with the cross in it */
.crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }
.swatch .swatch-element .crossed-out { display:none; }
.swatch .swatch-element.soldout .crossed-out { display:block; }
.swatch .swatch-element.soldout label {
filter: alpha(opacity=60); /* internet explorer */
-khtml-opacity: 0.6; /* khtml, old safari */
-moz-opacity: 0.6; /* mozilla, netscape */
opacity: 0.6; /* fx, safari, opera */
}
/* Tooltips */
.swatch .tooltip {
text-align:center;
background:gray;
color:#fff;
bottom:100%;
padding: 10px;
display:block;
position:absolute;
width:max-content;
left:50%;
margin-bottom:15px;
/* Make it invisible by default */
filter:alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity:0;
visibility:hidden;
/* Animations */
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
z-index: 10000;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.swatch .tooltip:before {
bottom:-20px;
content:" ";
display:block;
height:20px;
left:0;
position:absolute;
width:100%;
}
/* CSS triangle */
.swatch .tooltip:after {
border-left:solid transparent 10px;
border-right:solid transparent 10px;
border-top:solid gray 10px;
bottom:-10px;
content:" ";
height:0;
left:50%;
margin-left:-10px;
position:absolute;
width:0;
}
.swatch .swatch-element:hover .tooltip {
filter:alpha(opacity=100);
-khtml-opacity:1;
-moz-opacity:1;
opacity:1;
visibility:visible;
}
.swatch.error {
background-color:#E8D2D2!important;
color:#333!important;
padding:1em;
border-radius:5px;
}
.swatch.error p {
margin:0.7em 0;
}
.swatch.error p:first-child {
margin-top:0;
}
.swatch.error p:last-child {
margin-bottom:0;
}
.swatch.error code {
font-family:monospace;
}
.swatch-main-parent{
.selector-wrapper, .select-wrapper{ display:none; }
}
#product-select,
.product-form__variants{
display:none;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
outline:none;
padding:0 10px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}
/* Slider */
.slick-loading .slick-list
{
background: #fff url('ajax-loader.gif') center center no-repeat;
}
/* Arrows */.charms-carousel.slick-prev,
.charms-carousel.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: #ccc;
border: none;
outline: none;
background: transparent;
svg{ fill:currentcolor; }
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
outline: none;
background: transparent;
cursor: pointer;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -30px;
}
.slick-next
{
right: -30px;
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
@media only screen and (max-width: 768px) {
.choose-charm-section,
.charm-product-preview{
float: none;
width: 100%;
}
.charm-builder-page{
padding:0 15px;
}
}
@import url('//fonts.googleapis.com/css?family=Centaur:400,700');
.charm-builder-page .slick-list{
padding-bottom: 10px;
}
.charm-builder-page{
*{
font-family: Centaur, serif;;
color: #333;
line-height: 1.625;
}
.page-title{
font-family: Centaur,sans-serif;
font-weight: 400;
color: #252525;
font-size: 1.71429rem;
}
.build_steps{
ul{
list-style:none;
padding:0;
li{
font-family: Centaur,sans-serif;
color: #333;
line-height: 1.625;
}
}
}
}
/* ------------ Product Page Edits
-------------------------------- */
.form-field-select-wrapper,
.form-field-select-wrapper .form-field-select{
width: auto;
display: inline-block;
min-width: 100px;
}
.form-fields--qty .form-field--qty-select .form-field-select-wrapper{
width: auto;
min-width: 100px;
}
.smart-payment-enabled .product-form--atc-button{
max-width: 200px;
background-color: #000;
margin-top: 40px;
padding: 10px;
}
.two-column-btn{
margin-top: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.two-column-btn a{
color: #000;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid #000;
font-size: 16px;
}
.two-column-btn .btn{
display: inline-flex;
align-items: center;
}
.two-column-btn .hint-btn img{
margin-right: 5px;
}
div.swym-btn-container[data-position=default] .swym-add-to-wishlist.swym-icontext{
color:#000;
background: #fff !important;
}
div.swym-btn-container[data-position=default] .swym-fave-count{
display: none;
}
div.swym-btn-container[data-position=default] .swym-add-to-wishlist.swym-icontext:after {
color:#000;
}
div.swym-btn-container[data-position=default] .swym-add-to-wishlist.swym-icontext .swym-wishlist-cta{
border-bottom:1px solid #000;
}
.swym-button-bar.swym-wishlist-button-bar{
display: none;
}
.modal--quickshop-full .modal-inner{
max-width: 957px;
}
@media screen and (min-width: 860px){
.template-product .product--container .product--outer .product-gallery {
width: 50%;
}
.template-product .product--container .product--outer .product-gallery{
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
}
.template-product .product--container .product--outer .product-gallery .product-gallery--slider{
flex: 0 100%;
}
.template-product .product--container .product--outer .product-gallery .product-gallery--navigation{
display: block;
}
.template-product .product--container .product--outer .product-gallery .product-gallery--navigation .product-gallery--thumbnail-trigger{
display: block;
}
}
.review-twitter{
display: flex;
max-width: 1600px;
margin: auto;
}
.review-twitter .review-twitter-inner{
flex:0 50%;
margin:0;
}
.review-twitter .twitter-container{
margin-top: 60px;
padding: 0px 40px;
}
.review-twitter .twitter-container .twitter-inner{
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
}
.review-twitter .twitter-container .twitter-inner img{
width: 100%;
}
.review-twitter .twitter-container .icon .right{
display: inline-block;
float: right;
}
.review-twitter .twitter-container .icon > span{
margin-right:10px;
}
.review-twitter .twitter-container .content{
padding: 0px 10px;
margin-top: 10px;
}
.review-twitter .twitter-container .content h4{
margin: 5px 0px;
}
.review-twitter .twitter-container .content > span{
text-transform: uppercase;
font-size: 12px;
}
.template-product .product-form--regular .two-column-btn{
position: absolute;
top: -70px;
left: 130px;
}
.template-product .product-form--regular .two-column-btn,
.template-product .product-form--regular .two-column-btn .btn{
display:block;
}
.template-product .product-form--regular .two-column-btn .btn{
display: flex;
flex: 100%;
flex-wrap: wrap;
}
.template-product .product-form--regular .two-column-btn .btn.hint-btn{
margin-bottom: 30px;
}
input#custom-name {
width: 100%;
margin-top: 20px;
padding: 15px;
}
.product-reviews--content .spr-content .spr-review{
width: 100%;
}
.product-reviews--content .spr-summary-actions-newreview{
border:none;
}
.bg-send {
display: inline-block;
width: 20px; height: 18px;
background: url("/cdn/shop/files/twitter-icon.png?v=1591295760") -90px -10px;
}
.bg-heart {
display: inline-block;
width: 21px; height: 18px;
background: url('/cdn/shop/files/twitter-icon.png?v=1591295760') -10px -52px;
}
.bg-comments {
display: inline-block;
width: 21px; height: 22px;
background: url('/cdn/shop/files/twitter-icon.png?v=1591295760') -10px -10px;
}
.bg-bookmark {
display: inline-block;
width: 19px; height: 22px;
background: url('/cdn/shop/files/twitter-icon.png?v=1591295760') -51px -10px;
}
@media screen and (max-width: 860px){
.review-twitter{
display: block;
}
.review-twitter .twitter-container{
padding: 0px 10px;
}
}
.option-value-input+.option-value-swatch-wrapper{
margin-bottom:0;
}
.option-value-input+.option-value-swatch-wrapper .swatch{
margin:0;
}
/* ----------------- TEMP Two Column Page
----------------------------------------*/
* {
box-sizing: border-box;
}
.new-row {
display: flex;
}
.new-column {
flex: 50%;
padding: 10px;
}
.new-column-map-left {
flex: 40%;
padding: 10px;
}
.new-column-map-right {
flex: 60%;
padding: 10px;
}
/* ----------------- Drop a Hint
------------------------------- */
span.drophint-link {
margin: 50px 0;
padding-left: -40px;
img {
display: inline-block;
vertical-align: middle;
padding-left: 0;
margin-left: -40px;
}
}
/* ---------------Drop a Hint Mobile Fix
-------------------------------- */
@media (max-width:580px){
.drophint-link img {
display: inline-block;
vertical-align: middle;
padding-left: 40px;
}
}
/*End - Swym Wishlist header*/
.swym-button-bar.swym-wishlist-button-bar.swym-inject {
display: flex;
margin-left: 0px;
width: auto;
padding: 0;
position: relative;
left: 35%;
bottom: 43px;
}
.swym-button-bar {
margin: 10px 0 0 -30px;
display: inline-block;
}
span.swym-wishlist-cta {
/* float: right; */
color: #000000 !important;
text-decoration: underline;
font-family:Avenir Next, sans-serif;
font-size: 1rem;
margin-left: 0px;
}
.klaviyo-form-VzYLNa {
text-align: center;
}
/* SXC Single Page Dual Content - Theme Change
------------------------------------- */
.sxc-single-page{
.grid-item.img_container img {
@include media($max: $bp-small) {
width: 100%;
height: auto;
padding: 10px;
}
}
}
.banner{
img{
width:100%;
height: 226px;
object-fit: cover;
object-position: center;
}
}
.content-header{
font-size: 27px;
text-align: center;
width: 100%;
text-transform: capitalize;
}
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
padding-right: 20%;
}
.brand-content {
p {
padding: 0;
}
}
.page-img {
width: 100%;
padding-left:30%;
display: flex;
align-items: center;
flex-direction: column;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 700px) {
.row {
flex-direction: column;
.main {
background-color: white;
padding-right:0;
}
.page-img {
/* background-color: #000; */
width: 100%;
height: auto !important;
display: flex;
align-items: center;
/* justify-content: center; */
flex-direction: column;
padding: 0px;
}
.page-img img {
width: 100%;
padding: 10px;
}
}
}
/* EF Family Page Dual Content - Theme Change
------------------------------------- */
.sxc-fam-page{
.banner{
img{
width:100%;
height: 226px;
object-fit: cover;
object-position: center;
}
}
.content-header{
font-size: 27px;
text-align: center;
width: 100%;
text-transform: capitalize;
}
.outer-wrapper{
background-color: #FFF;
}
.grid-wrapper{
display: flex;
@include media($max: $bp-small) {
flex-direction: column;
}
}
.column-title{
font-size: 24px;
text-align: left;
width: 100%;
text-transform: capitalize;
padding-left: 60px;
margin: 20px 0 -40px 0;
@include media($max: $bp-small) {
text-align: center;
padding-left: 0px;
}
}
.inner-wrapper{
max-width:1340px;
margin:auto;
@include media($max: $bp-small) {
width: 100%;
}
}
.note-header{
font-size: 24px;
text-align: left;
width: 100%;
text-transform: capitalize;
padding-left: 60px;
}
.content_content{
p{
font-family: "Avenir Next", sans-serif;
font-size: 16px;
line-height: 22px;
text-align: left;
width: 100%;
padding: 0 60px 0 60px;
}
}
.klaviyo-form-WfRQFA {
padding-right: 80px;
margin-top: -170px;
}
.fam-content{
font-family: "Avenir Next", sans-serif;
font-size: 16px;
font-style: normal;
line-height: 22px;
text-align: left;
/* background-color: #ff0000; */
margin: 5px 0 0 50px;
@include media($max: $bp-small) {
margin: 0;
}
img {
padding: 10px 100px 10px 35px;
@include media($max: $bp-small) {
width: 100%;
padding: 10px;
}
}
p {
padding: 10px 190px 10px 45px;
@include media($max: $bp-small) {
padding: 10px;
}
}
}
}
/* SXC Showroom Page Dual Content - Theme Change
------------------------------------- */
.sxc-showroom-page{
.banner{
img{
width:100%;
height: 226px;
object-fit: cover;
object-position: center;
}
}
.content-header{
font-size: 27px;
text-align: center;
width: 100%;
text-transform: capitalize;
}
.appt-header{
font-size: 1.4em;
text-align: left;
width: 100%;
text-transform: capitalize;
margin: 50px 0 10px 20px;
}
.grid-wrapper{
display: flex; background-color: #000;
}
.outer-wrapper{
background-color: #FFFFFF;
margin: 5px 40px 0 50px;
@include media($max: $bp-small) {
margin: 5px;
}
}
.new-row {
display: flex;
@include media($max: $bp-small) {
flex-direction: column;
}
}
.new-column {
flex: 50%;
padding: 10px;
/* height: 500px; /* Should be removed. Only for demonstration */
margin: 5px 40px 0 50px;
@include media($max: $bp-small) {
margin: 5px;
}
p{
font-family: "Avenir Next", sans-serif;
font-size: 1.0em;
line-height: 1.1em;
text-align: left;
width: 100%;
margin: 20px 30px 10px 20px;
}
img {
@include media($max: $bp-small) {
width: 100%;
padding: 10px;
}
}
}
}
/* SXC Stockists Page Three Column - Theme Change
------------------------------------- */
.sxc-three-col-page{
.banner{
img{
width:100%;
height: 226px;
object-fit: cover;
object-position: center;
}
}
.outer-wrapper{
background-color: #FFF;
}
.inner-wrapper{
max-width:1340px;
margin: auto;
background-color: #FFF;
}
.content-header{
font-size: 27px;
text-align: center;
width: 100%;
text-transform: capitalize;
}
.continent-header{
font-size: 18px;
text-align: center;
width: 100%;
text-transform: uppercase;
margin: 50px 0 10px 0;
}
.grid-wrapper{
display: flex; background-color: #000;
}
.new-row {
display: flex;
}
.new-column {
flex: 50%;
padding: 10px;
/* height: 500px; /* Should be removed. Only for demonstration */
p{
font-family: "Avenir Next", sans-serif;
font-size: 1.0em;
line-height: 1.4em;
text-align: left;
width: 100%;
margin: auto;
}
a:link, a:visited {
color: #404041;
text-decoration: underline;
cursor: pointer;
}
}
}
/* ----------- Shop Our Instagram Link
---------------------------------*/
.social-shop {
text-align:center;
padding:10px 10px 0 10px;
margin-top:10px;
text-transform: normal;
color: #404041;
font-weight: normal;
font-size: 1.2rem;
text-decoration: none;
}
.social-shop a:link, a:hover, a:active {
text-decoration: none;
}
.social-shop-sub {
text-align:center;
padding:10px;
margin: 0 10px 25px 10px;
color: #9d9d9d;
font-weight: normal;
font-size: 14px;
text-decoration: none;
}
/* SXC Customer Care Page - Theme Change
------------------------------------- */
.sxc-customer-care-page{
.banner{
img{
width:100%;
height: 226px;
object-fit: cover;
object-position: center;
}
}
details {
padding: 20px 0 20px 0;
border-top: 1px solid #000;
border-bottom: none;
margin: 0 200px 0 200px;
}
.inner-wrapper{
max-width:1340px;
margin: 0;
}
.content-header{
font-size: 27px;
text-align: center;
width: 100%;
text-transform: capitalize;
margin: 70px 0 90px 0;
}
.headline{
font-size: 18px;
text-align: center;
width: 100%;
text-transform: capitalize;
}
.grid-wrapper{
display: flex; background-color: #000;
}
.new-row {
display: flex;
}
.new-column {
flex: 50%;
padding: 10px;
p{
font-family: "Avenir Next", sans-serif;
font-size: 1.0em;
line-height: 1.2em;
text-align: center;
width: 100%;
margin: auto;
}
a:link, a:visited {
color: #404041;
text-decoration: underline;
cursor: auto;
}
}
}
.product-form--regular form .swym-button-bar.swym-wishlist-button-bar.swym-inject {
display: inline-block;
margin: 0;
width: auto;
position: relative;
left: 0;
bottom: 0;
}
.product-form--regular form .swym-btn-container[data-position=default] .swym-add-to-wishlist.swym-iconbtnlink:after{
margin-left: 0;
}
.sxc-showroom-page .gridPage .gridDay .gridSlot {
//@include media($max: $bp-small) {
display: inline-block;
//}
}
.sxc-showroom-page .gridPage .gridDay:before,
.sxc-showroom-page .gridPage .gridDay:after {
//@include media($max: $bp-small) {
display: none;
//}
}
.site-mobile-nav .site-header-search-button-mobile {
position: relative;
top: 0;
left: 0;
margin: 4px 16px;
padding: 0 0 0 8px;
height: auto;
@include media($min: $bp-small) {
display: none;
}
@include media($min: $bp-larger) {
display: none;
}
}
.site-mobile-nav .site-header-search-button-mobile{
display: block;
}
.site-mobile-nav .site-header-search-button-mobile .site-header-icon {
padding: 0;
}
.site-mobile-nav .site-header-search-button-mobile .site-header-icon svg {
width: 18px;
height: auto;
}
.site-mobile-nav .site-header-search-button-mobile .site-header-search-icon .search-icon {
display: flex;
align-items: center;
}
.site-mobile-nav .site-header-search-button-mobile .site-header-search-icon .search-icon .visually-hidden {
position: relative !important;
display: inline-block;
width: auto !important;
height: auto;
margin-left: 10px;
font-family: Centaur,serif;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
.site-header .site-header-search-button {
display: none;
}
}
/* SXC Bridal Landing Page - Theme Change
------------------------------------- */
#shopify-section-bridal-main .dynamic-video-wrapper {
position: relative;
max-width: unset;
}
#shopify-section-bridal-main .dynamic-video-wrapper .overlay-content {
position: absolute;
bottom: 100px;
z-index: 99;
left: 50px;
}
#shopify-section-bridal-main .dynamic-video-wrapper .overlay-content h1 {
font-size: 2.125rem;
}
#shopify-section-bridal-main .dynamic-video-wrapper .overlay-content a {
color: #fff;
background-color: #000;
text-decoration: none;
padding: 10px;
width: 200px;
display: inline-block;
text-align: center;
}
.section-blocks .content-row{
max-width: 1600px;
margin: auto;
}
.section-blocks .content{
padding: 70px 0;
}
.section-blocks .content-row {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.section-blocks .content-row .img-content {
width: 50%;
}
.section-blocks .content-row .img-content img {
object-fit: cover;
width: 70%; /* default: 100% */
}
.section-blocks .content-row .text-content {
width: 45%;
text-align: right;
}
.section-blocks .content-row .text-content h1 {
font-size: 1.38rem;
max-width: 60%;
margin: 0 0 0 auto;
}
.section-blocks .content-row .text-content .p-container {
max-width: 70%;
margin: 0 0 0 auto;
}
.section-blocks .content-row .text-content .p-container p {
font-size: 1rem;
line-height: 1.5;
}
.section-blocks .content-row .text-content .p-container p a {
color: #000;
}
.section-blocks .content-row .text-content a.btn_link {
color: #fff;
background-color: #000;
text-decoration: none;
padding: 10px;
width: 200px;
display: inline-block;
text-align: center;
margin-top: 30px;
}
.section-blocks .header-content {
text-align: center;
}
.section-blocks .header-content h1 {
margin: 0 0 70px;
font-size: 2.125rem;
}
.section-blocks .content.swap {
background-color: #B8CBD9;
}
.section-blocks .content.swap .content-row {
flex-direction: row-reverse;
}
.section-blocks .content.swap .content-row .text-content {
text-align: left;
}
.section-blocks .content.swap .content-row .img-content {
text-align: right;
}
.section-blocks .content.swap .content-row .text-content .p-container {
margin: 0 auto 0 0;
}
.section-blocks .content.swap .content-row .text-content h1 {
margin: 0 auto 0 0;
}
#shopify-section-bridal-main {
margin-bottom: -2rem;
}
@media only screen and (max-width: 1600px) {
.section-blocks .content{
padding: 70px 40px;
}
}
@media screen and (min-width: 1024px) {
#shopify-section-bridal-main {
margin-bottom: -3.125rem;
}
}
@media only screen and (max-width: 1023px) {
.section-blocks .content-row {
display: block;
}
.section-blocks .content-row .img-content {
width: 100%;
text-align: center;
}
.section-blocks .content-row .text-content {
width: 100%;
text-align: center;
}
.section-blocks .content.swap .content-row .text-content {
text-align: center;
}
.section-blocks .content-row .img-content img {
//width: auto;
}
.section-blocks .content-row .text-content .p-container {
max-width: 50%;
margin: auto;
}
.section-blocks .content.swap .content-row .text-content .p-container {
margin: auto;
}
.section-blocks .content-row .text-content h1 {
max-width: 60%;
margin: 0 auto;
}
.section-blocks .content.swap .content-row .text-content h1 {
margin: 0 auto;
}
}
@media only screen and (max-width: 768px) {
.section-blocks .content-row .text-content .p-container {
max-width: 75%;
}
.section-blocks .content-row .img-content img {
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.section-blocks .content-row .text-content .p-container {
max-width: 100%;
}
.section-blocks .content {
padding: 40px;
}
.section-blocks .header-content h1 {
margin: 0 0 40px;
}
#shopify-section-bridal-main .dynamic-video-wrapper .overlay-content {
position: absolute;
bottom: 50px;
z-index: 99;
left: 25px;
}
#shopify-section-bridal-main .dynamic-video-wrapper .overlay-content h1 {
font-size: 24px;
}
}
.template-product .product--container .product--outer .product-gallery.click-to-zoom-enabled {
width: 100%;
}
.template-product .product--container .product--outer .product-gallery .product-gallery--navigation {
width: 130px;
}
.click-to-zoom-enabled .product-gallery--viewer {
width: calc(100% - 130px);
}
.template-product .product-gallery--media-thumbnail[data-gallery-selected="true"],
.template-product .product-gallery--media-thumbnail:focus {
box-shadow: 0 0 0 2px #d7d7d7;
}
.product-gallery--image img {
width: 100%;
}
.grid-custom {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 30px;
max-width: 1100px;
margin: auto;
}
.grid-custom .grid__item-custom {
width: 100%;
margin: 0;
}
.grid-custom.bridal .grid__item-custom img {
margin: 0;
padding: 10px;
width: 100%;
}
.swym-button-bar .swym-button {
border: none;
background: none;
padding-left: 25px;
position: relative;
cursor: pointer;
box-shadow: none;
outline-width: 0px;
}
.swym-button-bar .swym-button span {
letter-spacing: 1px;
font-size: 12px;
line-height: 1px;
text-transform: uppercase;
}
.swym-button-bar .swym-button:hover span{
color: #d0bfb5 !important
}
.swym-button-bar .swym-button:after {
content: "\f08a";
font-size: 16px;
width: 23px;
position: absolute;
left: 0;
}
.product-form--atc {
display: block;
}
.product-form--atc-button {
margin: 0;
margin-top: 30px;
background-color: #000;
max-width: 200px;
padding: 10px 5px;
}
#shopify-section-sxc-event-page .content-content {
max-width: 1100px;
margin: auto;
}
#shopify-section-sxc-event-page .grid-custom img {
width: 100%;
}
.sxc-showroom-page .grid-custom{
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 30px;
}
.sxc-showroom-page .grid-custom .grid__item-custom {
width: 100%;
}
.sxc-showroom-page .new-column p {
width: unset;
}
.page-content, .page-masthead {
max-width: 1100px;
}
.product-gallery--expand {
display: none;
}
.main-nav-link__container {
position: relative;
cursor: pointer;
}
.main-nav-link__container .navmenu-icon {
position: absolute;
right: 0;
}
.main-nav-link__container + .navmenu-submenu {
display: none;
}
.main-nav-link__container.active + .navmenu-submenu {
display: block;
}
.main-nav-link__container.active .navmenu-icon {
transform: rotate(270deg);
}
@media only screen and (max-width: 768px) {
.grid-custom {
display: block;
padding: 0 30px;
}
.sxc-showroom-page .grid-custom{
display: block
}
}
@media only screen and (max-width: 480px) {
.template-product .product--container .product--outer .product-gallery .product-gallery--navigation {
width: 100%;
}
.click-to-zoom-enabled .product-gallery--viewer {
width:100%;
}
.product-gallery .flickity-viewport, .flickity-slider {
min-height: 300px;
}
.product-gallery--image.image--selected, .flickity-enabled .product-gallery--image,
.product-gallery--has-media .product-gallery--image {
min-height: 300px;
}
}
.swym-dummy {
display: inline !important;
}
.swym-button-bar.swym-isa-button-bar.swym-inject {
display: inline-block !important;
margin-left: unset !important;
margin-bottom: 0px;
}
/* Aesymmetric Updates - January 26, 2021 */
@media only screen and (max-width: 1024px) {
.center-charm {
bottom: 0;
}
.left-charm-3 {
bottom: 13%;
left: 24.5%;
}
.left-charm-1 {
bottom: 5%;
left: 32%;
}
.right-charm-2 {
bottom: 4%;
right: 32%;
}
.right-charm-4 {
bottom: 12%;
right: 23.5%;
}
}
@media only screen and (max-width: 768px) {
.center-charm {
bottom: 5%;
}
.left-charm-3 {
bottom: 13%;
left: 31.5%;
}
.left-charm-1 {
bottom: 8%;
left: 37.5%;
}
.right-charm-2 {
bottom: 8%;
right: 37%;
}
.right-charm-4 {
bottom: 13%;
right: 31%;
}
}
@media only screen and (max-width: 425px) {
.center-charm {
bottom: -5%;
}
.left-charm-3 {
bottom: 10%;
left: 20%;
}
.left-charm-1 {
bottom: 0%;
left: 28.5%;
}
.right-charm-2 {
bottom: 0%;
right: 28%;
}
.right-charm-4 {
bottom: 10%;
right: 19%;
}
}
@media only screen and (max-width: 375px) {
.center-charm {
bottom: -6%;
}
.left-charm-3 {
bottom: 9%;
left: 19%;
}
.left-charm-1 {
bottom: 0%;
left: 27.5%;
}
.right-charm-2 {
bottom: 0%;
right: 27%;
}
.right-charm-4 {
bottom: 9%;
right: 18%;
}
}
@media only screen and (max-width: 320px) {
.center-charm {
bottom: -9%;
}
.left-charm-3 {
bottom: 8%;
left: 14%;
}
.left-charm-1 {
bottom: -2%;
left: 23.5%;
}
.right-charm-2 {
bottom: -2%;
right: 22%;
}
.right-charm-4 {
bottom: 8%;
right: 13%;
}
}
/* Angels 4 Austin
------------------- */
.a4a-banner{
margin: auto;
text-align: center;
img{
width:400px;
height: 229px;
}
}
.sxc-customer-care-page .inner-wrapper {
margin: auto;
}
.navmenu-depth-2 .navmenu-item-parent:hover > .navmenu {
display: block;
animation: none;
}
.product-sku {
color: #111;
}
@media only screen and (max-width: 1024px) {
.sxc-customer-care-page details {
margin: 0 10px;
}
}