diff --git a/examples/bundle/src/main/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServlet.java b/examples/bundle/src/main/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServlet.java index f923bcc6a1..565cbd57e1 100644 --- a/examples/bundle/src/main/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServlet.java +++ b/examples/bundle/src/main/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServlet.java @@ -87,11 +87,17 @@ public class GraphqlServlet extends SlingAllMethodsServlet { private static final String PRODUCTS_FILTER_ARG = "filter"; private static final String PRODUCTS_SEARCH_ARG = "search"; - private static final String CATEGORY_UID_REGEX = "\\{category_uid=\\{eq=.+\\}\\}"; + private static final Pattern CATEGORY_UID_EQ_PATTERN = Pattern.compile("\\{category_uid=\\{eq=(.+)\\}\\}"); private static final Pattern SKU_IN_PATTERN = Pattern.compile("\\{sku=\\{in=\\[(.+)\\]\\}\\}"); private static final Pattern SKU_EQ_PATTERN = Pattern.compile("\\{sku=\\{eq=(.+)\\}\\}"); private static final Pattern URL_KEY_EQ_PATTERN = Pattern.compile("\\{url_key=\\{eq=(.+)\\}\\}"); + private static final String CATEGORY_UID = "uid-1"; + private static final String CATEGORY_STAGED_PRODUCTS_UID = "uid-2"; + + private static final String STAGED_PRODUCT_URL_KEY = "chaz-crocodile-hoodie"; + private static final String STAGED_PRODUCT_SKU = "MH02"; + private static final String PRODUCT_SKU = "MH01"; private static final String GROUPED_PRODUCT_URL_KEY = "set-of-sprite-yoga-straps"; @@ -107,17 +113,20 @@ public class GraphqlServlet extends SlingAllMethodsServlet { private static final String PRODUCT_CAROUSEL_JSON = "magento-graphql-productcarousel.json"; private static final String PRODUCT_TEASER_JSON = "magento-graphql-productteaser.json"; private static final String PRODUCTS_COLLECTION_JSON = "magento-graphql-products-collection.json"; + private static final String PRODUCTS_COLLECTION_WITH_STAGED_PRODUCTS_JSON = "magento-graphql-products-collection-with-staged-products.json"; private static final String GROUPED_PRODUCT_JSON = "magento-graphql-grouped-product.json"; private static final String PRODUCTS_JSON = "magento-graphql-products.json"; private static final String CATEGORY_LIST_TREE_JSON = "magento-graphql-categories-list.json"; private static final String CATEGORY_UID_JSON = "magento-graphql-category.json"; private static final String CATEGORY_JSON = "magento-graphql-category.json"; + private static final String CATEGORY_WITH_STAGED_PRODUCTS_JSON = "magento-graphql-category-with-staged-products.json"; private static final String FEATURED_CATEGORY_LIST_JSON = "magento-graphql-featuredcategorylist.json"; private static final String CATEGORIES_CAROUSEL_JSON = "magento-graphql-categories-carousel.json"; private static final String PRODUCTS_BREADCRUMB_JSON = "magento-graphql-products-breadcrumb.json"; private static final String CATEGORYLIST_BREADCRUMB_JSON = "magento-graphql-categorylist-breadcrumb.json"; private static final String BUNDLE_PRODUCT_JSON = "magento-graphql-bundle-product.json"; private static final String BUNDLE_PRODUCT_ITEMS_JSON = "magento-graphql-bundle-product-items.json"; + private static final String STAGED_PRODUCT_JSON = "magento-graphql-products-staged.json"; private Gson gson; private GraphQL graphQL; @@ -172,7 +181,7 @@ protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse /** * Executes the given GraphQL query with the optional operationName and variables parameters. - * + * * @param query The GraphQL query. * @param operationName An optional operation name for that query. * @param variables An optional map of variables for the query. @@ -192,7 +201,7 @@ private ExecutionResult execute(String query, String operationName, Map readGraphqlResponse(String filename) { /** * Initialises and parses the GraphQL schema. - * + * * @return The registry of type definitions. * @throws IOException If an I/O error occurs. */ @@ -260,7 +269,7 @@ private TypeDefinitionRegistry buildTypeDefinitionRegistry() throws IOException /** * Configures and builds the execution engine of the GraphQL server. - * + * * @return The runtime wiring of the server. * @throws IOException If an I/O error occurs. */ @@ -349,7 +358,7 @@ public Object get(DataFetchingEnvironment env) { * that "matches" the data expected by each CIF component. Each CIF component indeed expects a * specific JSON response. Luckily, each GraphQL query sent by each component is different so * we can "detect" what response should be returned. - * + * * @param env The metadata of the GraphQL query. * @return A Magento Products object. */ @@ -374,6 +383,7 @@ private Products readProductsResponse(DataFetchingEnvironment env) { Matcher skuInMatcher = SKU_IN_PATTERN.matcher(filter); Matcher skuEqMatcher = SKU_EQ_PATTERN.matcher(filter); Matcher urlKeyEqPattern = URL_KEY_EQ_PATTERN.matcher(filter); + Matcher uidPattern = CATEGORY_UID_EQ_PATTERN.matcher(filter); if (skuInMatcher.matches()) { // The filter {sku:{in:[...]}} can be a query for the carousel (3 skus) or a client-side query to fetch prices @@ -401,15 +411,23 @@ private Products readProductsResponse(DataFetchingEnvironment env) { return readProductsFrom(GROUPED_PRODUCT_JSON); } else if (skuEqMatcher.group(1).equals(PRODUCT_SKU)) { return readProductsFrom(PRODUCTS_JSON); + } else if (skuEqMatcher.group(1).equals(STAGED_PRODUCT_SKU)) { + return readProductsFrom(STAGED_PRODUCT_JSON); } return readProductsFrom(PRODUCT_TEASER_JSON); - } else if (filter.matches(CATEGORY_UID_REGEX)) { - return readProductsFrom(PRODUCTS_COLLECTION_JSON); + } else if (uidPattern.matches()) { + if (CATEGORY_UID.equals(uidPattern.group(1))) { + return readProductsFrom(PRODUCTS_COLLECTION_JSON); + } else if (CATEGORY_STAGED_PRODUCTS_UID.equals(uidPattern.group(1))) { + return readProductsFrom(PRODUCTS_COLLECTION_WITH_STAGED_PRODUCTS_JSON); + } } else if (urlKeyEqPattern.matches()) { if (GROUPED_PRODUCT_URL_KEY.equals(urlKeyEqPattern.group(1))) { return readProductsFrom(GROUPED_PRODUCT_JSON); } else if (BUNDLE_PRODUCT_URL_KEY.equals(urlKeyEqPattern.group(1))) { return readProductsFrom(BUNDLE_PRODUCT_JSON); + } else if (STAGED_PRODUCT_URL_KEY.equals(urlKeyEqPattern.group(1))) { + return readProductsFrom(STAGED_PRODUCT_JSON); } } } @@ -423,7 +441,7 @@ private Products readProductsResponse(DataFetchingEnvironment env) { /** * Reads the JSON of the given file and deserialises the content in a Magento Products object. - * + * * @param filename The file that contains the products JSON response. * @return A Magento Products object. */ @@ -437,13 +455,13 @@ private Products readProductsFrom(String filename) { * that "matches" the data expected by each CIF component. Each CIF component indeed expects a * specific JSON response. Luckily, each GraphQL query sent by each component is different so * we can "detect" what response should be returned. - * + * * @param env The metadata of the GraphQL query. * @return A list of Magento CategoryTree objects. */ private List readCategoryListResponse(DataFetchingEnvironment env) { - GraphqlResponse graphqlResponse; + GraphqlResponse graphqlResponse = null; Map> filters = env.getArgument("filters"); DataFetchingFieldSelectionSet selectionSet = env.getSelectionSet(); @@ -454,20 +472,29 @@ private List readCategoryListResponse(DataFetchingEnvironment env) filters.get("url_key").get("eq").equals("outdoor")) { // The URLProvider example will return category uid graphqlResponse = readGraphqlResponse(CATEGORY_UID_JSON); + } else if (filters.containsKey("url_key") && filters.get("url_key").containsKey("eq") && + filters.get("url_key").get("eq").equals("outdoor-staged")) { + // The URLProvider example will return category uid + graphqlResponse = readGraphqlResponse(CATEGORY_WITH_STAGED_PRODUCTS_JSON); } else if (filters.containsKey("category_uid") && filters.get("category_uid").containsKey("in") && (((List) (filters.get( "category_uid").get("in"))) .size() == 4)) { // The CategoriesCarousel example will require 4 items graphqlResponse = readGraphqlResponse(CATEGORIES_CAROUSEL_JSON); - } else if (filters.containsKey("category_uid") && filters.get("category_uid").containsKey("eq") && - filters.get("category_uid").get("eq").equals("uid-1")) { - // The ProductList example will require 1 item - graphqlResponse = readGraphqlResponse(CATEGORY_JSON); - } else if (filters.containsKey("category_uid") && filters.get("category_uid").containsKey("eq") && - filters.get("category_uid").get("eq").equals("Mg==")) { - // The navigation example will require item "Mg==" as the default root category - graphqlResponse = readGraphqlResponse(CATEGORY_LIST_TREE_JSON); - } else { + } else if (filters.containsKey("category_uid") && filters.get("category_uid").containsKey("eq")) { + if (filters.get("category_uid").get("eq").equals("uid-1")) { + // The ProductList example will require 1 item + graphqlResponse = readGraphqlResponse(CATEGORY_JSON); + } else if (filters.get("category_uid").get("eq").equals("uid-2")) { + graphqlResponse = readGraphqlResponse(CATEGORY_WITH_STAGED_PRODUCTS_JSON); + } else if (filters.containsKey("category_uid") && filters.get("category_uid").containsKey("eq") && + filters.get("category_uid").get("eq").equals("Mg==")) { + // The navigation example will require item "Mg==" as the default root category + graphqlResponse = readGraphqlResponse(CATEGORY_LIST_TREE_JSON); + } + } + + if (graphqlResponse == null) { graphqlResponse = readGraphqlResponse(FEATURED_CATEGORY_LIST_JSON); } diff --git a/examples/bundle/src/main/resources/graphql/magento-graphql-category-with-staged-products.json b/examples/bundle/src/main/resources/graphql/magento-graphql-category-with-staged-products.json new file mode 100644 index 0000000000..0495795dd2 --- /dev/null +++ b/examples/bundle/src/main/resources/graphql/magento-graphql-category-with-staged-products.json @@ -0,0 +1,17 @@ +{ + "data": { + "categoryList": [ + { + "uid": "uid-2", + "description": "A collection of staged products for outdoor activities", + "name": "Outdoor Collection (staged)", + "image": null, + "product_count": 0, + "meta_description": "Meta description for Outdoor Collection", + "meta_keywords": "Meta keywords for Outdoor Collection", + "meta_title": "Meta title for Outdoor Collection", + "staged": false + } + ] + } +} diff --git a/examples/bundle/src/main/resources/graphql/magento-graphql-products-collection-with-staged-products.json b/examples/bundle/src/main/resources/graphql/magento-graphql-products-collection-with-staged-products.json new file mode 100644 index 0000000000..7df67e49a8 --- /dev/null +++ b/examples/bundle/src/main/resources/graphql/magento-graphql-products-collection-with-staged-products.json @@ -0,0 +1,530 @@ +{ + "data": { + "products": { + "total_count": 12, + "items": [ + { + "__typename": "SimpleProduct", + "staged": false, + "sku": "24-MB02", + "name": "Fusion Backpack", + "small_image": { + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/fusion-backpack/mb02-gray-0.jpg" + }, + "url_key": "fusion-backpack", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 59, + "currency": "USD" + }, + "final_price": { + "value": 59, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + } + }, + { + "__typename": "SimpleProduct", + "staged": true, + "sku": "24-MG03", + "name": "Summit Watch", + "small_image": { + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/summit-watch/mg03-br-0.jpg" + }, + "url_key": "summit-watch", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 54, + "currency": "USD" + }, + "final_price": { + "value": 54, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + } + }, + { + "__typename": "SimpleProduct", + "staged": false, + "sku": "24-WG01", + "name": "Bolo Sport Watch", + "small_image": { + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/bolo-sport-watch/wg01-bk-0.jpg" + }, + "url_key": "bolo-sport-watch", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 49, + "currency": "USD" + }, + "final_price": { + "value": 49, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + } + }, + { + "__typename": "ConfigurableProduct", + "staged": false, + "sku": "MH01", + "name": "Chaz Kangeroo Hoodie", + "small_image": { + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "url_key": "chaz-kangeroo-hoodie", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + }, + "maximum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + } + }, + { + "__typename": "ConfigurableProduct", + "staged": false, + "sku": "MH03", + "name": "Bruno Compete Hoodie", + "small_image": { + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/bruno-compete-hoodie/mh03-black_main_2.jpg" + }, + "url_key": "bruno-compete-hoodie", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 63, + "currency": "USD" + }, + "final_price": { + "value": 63, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + }, + "maximum_price": { + "regular_price": { + "value": 63, + "currency": "USD" + }, + "final_price": { + "value": 63, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + } + }, + { + "__typename": "ConfigurableProduct", + "staged": true, + "sku": "WJ04", + "name": "Ingrid Running Jacket", + "small_image": { + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/ingrid-running-jacket/wj04-white_main_2.jpg" + }, + "url_key": "ingrid-running-jacket", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 84, + "currency": "USD" + }, + "final_price": { + "value": 84, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + }, + "maximum_price": { + "regular_price": { + "value": 84, + "currency": "USD" + }, + "final_price": { + "value": 84, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + } + } + ], + "aggregations": [ + { + "options": [ + { + "count": 1, + "label": "40-50", + "value": "40_50" + }, + { + "count": 3, + "label": "50-60", + "value": "50_60" + }, + { + "count": 1, + "label": "60-70", + "value": "60_70" + }, + { + "count": 1, + "label": "80-*", + "value": "80_*" + } + ], + "attribute_code": "price", + "count": 4, + "label": "Price" + }, + { + "options": [ + { + "count": 3, + "label": "Gear", + "value": "3" + }, + { + "count": 1, + "label": "Bags", + "value": "4" + }, + { + "count": 2, + "label": "Watches", + "value": "6" + }, + { + "count": 1, + "label": "Collections", + "value": "7" + }, + { + "count": 2, + "label": "New Luma Yoga Collection", + "value": "8" + }, + { + "count": 2, + "label": "Tops", + "value": "13" + }, + { + "count": 2, + "label": "Hoodies & Sweatshirts", + "value": "16" + }, + { + "count": 1, + "label": "Tops", + "value": "22" + }, + { + "count": 1, + "label": "Jackets", + "value": "24" + }, + { + "count": 1, + "label": "Performance Fabrics", + "value": "36" + }, + { + "count": 2, + "label": "Eco Friendly", + "value": "37" + } + ], + "attribute_code": "category_id", + "count": 11, + "label": "Category" + }, + { + "options": [ + { + "count": 4, + "label": "Black", + "value": "49" + }, + { + "count": 1, + "label": "Blue", + "value": "50" + }, + { + "count": 1, + "label": "Gray", + "value": "52" + }, + { + "count": 1, + "label": "Green", + "value": "53" + }, + { + "count": 2, + "label": "Orange", + "value": "56" + }, + { + "count": 1, + "label": "Red", + "value": "58" + }, + { + "count": 1, + "label": "White", + "value": "59" + } + ], + "attribute_code": "color", + "count": 7, + "label": "Color" + }, + { + "options": [ + { + "count": 1, + "label": "Outdoor", + "value": "5" + }, + { + "count": 1, + "label": "Yoga", + "value": "8" + }, + { + "count": 2, + "label": "Recreation", + "value": "9" + }, + { + "count": 1, + "label": "Gym", + "value": "11" + }, + { + "count": 1, + "label": "Athletic", + "value": "16" + }, + { + "count": 2, + "label": "Sports", + "value": "17" + }, + { + "count": 1, + "label": "Hiking", + "value": "18" + }, + { + "count": 1, + "label": "School", + "value": "20" + } + ], + "attribute_code": "activity", + "count": 8, + "label": "Activity" + }, + { + "options": [ + { + "count": 1, + "label": "Burlap", + "value": "31" + }, + { + "count": 2, + "label": "Nylon", + "value": "37" + }, + { + "count": 2, + "label": "Polyester", + "value": "38" + }, + { + "count": 1, + "label": "Metal", + "value": "43" + }, + { + "count": 1, + "label": "Plastic", + "value": "44" + }, + { + "count": 2, + "label": "Silicone", + "value": "48" + }, + { + "count": 1, + "label": "Organic Cotton", + "value": "156" + }, + { + "count": 1, + "label": "CoolTech™", + "value": "158" + }, + { + "count": 1, + "label": "Wool", + "value": "161" + } + ], + "attribute_code": "material", + "count": 9, + "label": "Material" + }, + { + "options": [ + { + "count": 2, + "label": "Electronic", + "value": "86" + }, + { + "count": 2, + "label": "Exercise", + "value": "87" + }, + { + "count": 2, + "label": "Timepiece", + "value": "90" + } + ], + "attribute_code": "category_gear", + "count": 3, + "label": "Category Gear" + }, + { + "options": [ + { + "count": 3, + "label": "XS", + "value": "169" + }, + { + "count": 3, + "label": "S", + "value": "170" + }, + { + "count": 3, + "label": "M", + "value": "171" + }, + { + "count": 3, + "label": "L", + "value": "172" + }, + { + "count": 3, + "label": "XL", + "value": "173" + } + ], + "attribute_code": "size", + "count": 5, + "label": "Size" + }, + { + "options": [ + { + "count": 2, + "label": "All-Weather", + "value": "204" + }, + { + "count": 3, + "label": "Cool", + "value": "206" + }, + { + "count": 2, + "label": "Indoor", + "value": "207" + }, + { + "count": 3, + "label": "Spring", + "value": "210" + }, + { + "count": 3, + "label": "Windy", + "value": "212" + }, + { + "count": 1, + "label": "Wintry", + "value": "213" + } + ], + "attribute_code": "climate", + "count": 6, + "label": "Climate" + } + ] + } + } +} \ No newline at end of file diff --git a/examples/bundle/src/main/resources/graphql/magento-graphql-products-staged.json b/examples/bundle/src/main/resources/graphql/magento-graphql-products-staged.json new file mode 100644 index 0000000000..4a9cc5dc14 --- /dev/null +++ b/examples/bundle/src/main/resources/graphql/magento-graphql-products-staged.json @@ -0,0 +1,1169 @@ +{ + "data": { + "products": { + "items": [ + { + "__typename": "ConfigurableProduct", + "sku": "MH02", + "staged": true, + "name": "Chaz Crocodile Hoodie", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie", + "stock_status": "IN_STOCK", + "meta_description": "Meta description for Chaz Crocodile Hoodie", + "meta_keyword": "Meta keywords for Chaz Crocodile Hoodie", + "meta_title": "Meta title for Chaz Crocodile Hoodie", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + }, + "maximum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg", + "label": "", + "position": 1 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_alt1_2.jpg", + "label": "", + "position": 2 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_back_2.jpg", + "label": "", + "position": 3 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ], + "configurable_options": [ + { + "label": "Color", + "attribute_code": "color", + "values": [ + { + "value_index": 49, + "label": "Black" + }, + { + "value_index": 52, + "label": "Gray" + }, + { + "value_index": 56, + "label": "Orange" + } + ] + }, + { + "label": "Size", + "attribute_code": "size", + "values": [ + { + "value_index": 169, + "label": "XS" + }, + { + "value_index": 170, + "label": "S" + }, + { + "value_index": 171, + "label": "M" + }, + { + "value_index": 172, + "label": "L" + }, + { + "value_index": 173, + "label": "XL" + } + ] + } + ], + "variants": [ + { + "attributes": [ + { + "code": "color", + "value_index": 49 + }, + { + "code": "size", + "value_index": 169 + } + ], + "product": { + "sku": "MH02-XS-Black", + "staged": true, + "name": "Chaz Crocodile Hoodie-XS-Black", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-XS-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-XS-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-xs-black", + "stock_status": "IN_STOCK", + "color": "49", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 52 + }, + { + "code": "size", + "value_index": 169 + } + ], + "product": { + "sku": "MH02-XS-Gray", + "staged": true, + "name": "Chaz Crocodile Hoodie-XS-Gray", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-XS-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-XS-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-xs-gray", + "stock_status": "IN_STOCK", + "color": "52", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg", + "label": "", + "position": 1 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_alt1_2.jpg", + "label": "", + "position": 2 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_back_2.jpg", + "label": "", + "position": 3 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 56 + }, + { + "code": "size", + "value_index": 169 + } + ], + "product": { + "sku": "MH02-XS-Orange", + "staged": true, + "name": "Chaz Crocodile Hoodie-XS-Orange", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-XS-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-XS-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-xs-orange", + "stock_status": "IN_STOCK", + "color": "56", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 49 + }, + { + "code": "size", + "value_index": 170 + } + ], + "product": { + "sku": "MH02-S-Black", + "staged": true, + "name": "Chaz Crocodile Hoodie-S-Black", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-S-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-S-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-s-black", + "stock_status": "IN_STOCK", + "color": "49", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 52 + }, + { + "code": "size", + "value_index": 170 + } + ], + "product": { + "sku": "MH02-S-Gray", + "staged": true, + "name": "Chaz Crocodile Hoodie-S-Gray", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-S-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-S-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-s-gray", + "stock_status": "IN_STOCK", + "color": "52", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg", + "label": "", + "position": 1 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_alt1_2.jpg", + "label": "", + "position": 2 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_back_2.jpg", + "label": "", + "position": 3 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 56 + }, + { + "code": "size", + "value_index": 170 + } + ], + "product": { + "sku": "MH02-S-Orange", + "staged": true, + "name": "Chaz Crocodile Hoodie-S-Orange", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-S-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-S-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-s-orange", + "stock_status": "IN_STOCK", + "color": "56", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 49 + }, + { + "code": "size", + "value_index": 171 + } + ], + "product": { + "sku": "MH02-M-Black", + "staged": true, + "name": "Chaz Crocodile Hoodie-M-Black", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-M-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-M-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-m-black", + "stock_status": "IN_STOCK", + "color": "49", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 52 + }, + { + "code": "size", + "value_index": 171 + } + ], + "product": { + "sku": "MH02-M-Gray", + "staged": true, + "name": "Chaz Crocodile Hoodie-M-Gray", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-M-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-M-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-m-gray", + "stock_status": "IN_STOCK", + "color": "52", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg", + "label": "", + "position": 1 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_alt1_2.jpg", + "label": "", + "position": 2 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_back_2.jpg", + "label": "", + "position": 3 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 56 + }, + { + "code": "size", + "value_index": 171 + } + ], + "product": { + "sku": "MH02-M-Orange", + "staged": true, + "name": "Chaz Crocodile Hoodie-M-Orange", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-M-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-M-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-m-orange", + "stock_status": "IN_STOCK", + "color": "56", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 49 + }, + { + "code": "size", + "value_index": 172 + } + ], + "product": { + "sku": "MH02-L-Black", + "staged": true, + "name": "Chaz Crocodile Hoodie-L-Black", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-L-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-L-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-l-black", + "stock_status": "IN_STOCK", + "color": "49", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 52 + }, + { + "code": "size", + "value_index": 172 + } + ], + "product": { + "sku": "MH02-L-Gray", + "staged": true, + "name": "Chaz Crocodile Hoodie-L-Gray", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-L-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-L-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-l-gray", + "stock_status": "IN_STOCK", + "color": "52", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg", + "label": "", + "position": 1 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_alt1_2.jpg", + "label": "", + "position": 2 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_back_2.jpg", + "label": "", + "position": 3 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 56 + }, + { + "code": "size", + "value_index": 172 + } + ], + "product": { + "sku": "MH02-L-Orange", + "staged": true, + "name": "Chaz Crocodile Hoodie-L-Orange", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-L-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-L-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-l-orange", + "stock_status": "IN_STOCK", + "color": "56", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 49 + }, + { + "code": "size", + "value_index": 173 + } + ], + "product": { + "sku": "MH02-XL-Black", + "staged": true, + "name": "Chaz Crocodile Hoodie-XL-Black", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-XL-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-XL-Black", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/chaz-kangeroo-hoodie/mh01-black_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-xl-black", + "stock_status": "IN_STOCK", + "color": "49", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-black_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 52 + }, + { + "code": "size", + "value_index": 173 + } + ], + "product": { + "sku": "MH02-XL-Gray", + "staged": true, + "name": "Chaz Crocodile Hoodie-XL-Gray", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-XL-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-XL-Gray", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-xl-gray", + "stock_status": "IN_STOCK", + "color": "52", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_main_2.jpg", + "label": "", + "position": 1 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_alt1_2.jpg", + "label": "", + "position": 2 + }, + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-gray_back_2.jpg", + "label": "", + "position": 3 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + }, + { + "attributes": [ + { + "code": "color", + "value_index": 56 + }, + { + "code": "size", + "value_index": 173 + } + ], + "product": { + "sku": "MH02-XL-Orange", + "staged": true, + "name": "Chaz Crocodile Hoodie-XL-Orange", + "description": { + "html": "

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

\n

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

" + }, + "image": { + "label": "Chaz Crocodile Hoodie-XL-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "thumbnail": { + "label": "Chaz Crocodile Hoodie-XL-Orange", + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg" + }, + "url_key": "chaz-crocodile-hoodie-xl-orange", + "stock_status": "IN_STOCK", + "color": "56", + "price_range": { + "minimum_price": { + "regular_price": { + "value": 52, + "currency": "USD" + }, + "final_price": { + "value": 52, + "currency": "USD" + }, + "discount": { + "amount_off": 0, + "percent_off": 0 + } + } + }, + "media_gallery": [ + { + "__typename": "ProductImage", + "disabled": false, + "url": "/content/dam/core-components-examples/library/cif-sample-assets/catalog/product/chaz-kangeroo-hoodie/mh01-orange_main_2.jpg", + "label": "", + "position": 1 + } + ], + "categories": [ + { + "__typename": "CategoryTree", + "uid": "uid-1", + "name": "category-1", + "image": "/url/to/image" + } + ] + } + } + ] + } + ] + } + } +} \ No newline at end of file diff --git a/examples/bundle/src/test/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServletTest.java b/examples/bundle/src/test/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServletTest.java index 4b70ceefa1..e7de898107 100644 --- a/examples/bundle/src/test/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServletTest.java +++ b/examples/bundle/src/test/java/com/adobe/cq/commerce/core/examples/servlets/GraphqlServletTest.java @@ -16,6 +16,7 @@ import java.io.IOException; import java.lang.reflect.Type; +import java.util.ArrayList; import java.util.Arrays; import java.util.Collection; import java.util.Collections; @@ -276,6 +277,20 @@ private void testProductModelImpl(Product productModel) throws ServletException Assert.assertEquals("Meta title for Chaz Kangeroo Hoodie", productModel.getMetaTitle()); } + @Test + public void testProductModelV2Staged() throws ServletException { + prepareModel(PRODUCT_V2_RESOURCE); + + MockRequestPathInfo requestPathInfo = (MockRequestPathInfo) context.request().getRequestPathInfo(); + requestPathInfo.setSuffix("/chaz-crocodile-hoodie.html"); + + Product productModel = context.request().adaptTo(Product.class); + Assert.assertTrue(productModel instanceof com.adobe.cq.commerce.core.components.internal.models.v2.product.ProductImpl); + + Assert.assertEquals("MH02", productModel.getSku()); + Assert.assertTrue(productModel.isStaged()); + } + @Test public void testGroupedProductModel() throws ServletException { prepareModel(PRODUCT_V1_RESOURCE); @@ -356,6 +371,23 @@ private void testProductListModelImpl(ProductList productListModel) { Assert.assertEquals("Meta title for Outdoor Collection", productListModel.getMetaTitle()); } + @Test + public void testProductListModelV2Staged() throws ServletException { + prepareModel(PRODUCT_LIST_V2_RESOURCE); + + // The category data is coming from magento-graphql-category.json + MockRequestPathInfo requestPathInfo = (MockRequestPathInfo) context.request().getRequestPathInfo(); + requestPathInfo.setSuffix("/outdoor-staged.html"); + + ProductList productListModel = context.request().adaptTo(ProductList.class); + Assert.assertTrue(productListModel instanceof com.adobe.cq.commerce.core.components.internal.models.v2.productlist.ProductListImpl); + // anything else is already asserted in testProductListModelV2 with uid-1 + Assert.assertEquals("Outdoor Collection (staged)", productListModel.getTitle()); + List items = new ArrayList<>(productListModel.getProducts()); + Assert.assertTrue(items.get(1).isStaged()); + Assert.assertTrue(items.get(5).isStaged()); + } + @Test public void testProductCarouselModel() throws ServletException { Resource resource = prepareModel(PRODUCT_CAROUSEL_RESOURCE); diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.css b/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.css index 1bfc21f280..c97ad3048e 100644 --- a/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.css +++ b/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.css @@ -11,4 +11,4545 @@ * governing permissions and limitations under the License. * ******************************************************************************/ -@import url(https://fonts.googleapis.com/css?family=Muli);:root{--venia-anim-bounce:cubic-bezier(0.5,1.8,0.9,0.8);--venia-anim-in:cubic-bezier(0,0,0.2,1);--venia-anim-out:cubic-bezier(0.4,0,1,1);--venia-anim-standard:cubic-bezier(0.4,0,0.2,1);--venia-border:224,224,224;--venia-error:192,18,63;--venia-error-alt:255,226,234;--venia-font:Muli,-apple-system,BlinkMacSystemFont,sans-serif;--venia-grey:246,246,246;--venia-grey-dark:209,209,209;--venia-orange:241,99,33;--venia-teal:0,115,120;--venia-teal-alt:224,240,241;--venia-teal-dark:0,104,108;--venia-teal-light:212,243,238;--venia-text:33,33,33;--venia-text-alt:112,112,112;--venia-text-hint:158,158,158;--venia-text-spot:255,99,51;--venia-warning-dark:249,93,94;--venia-warning-light:254,229,232;--venia-global-anim-bounce:cubic-bezier(0.5,1.8,0.9,0.8);--venia-global-anim-in:cubic-bezier(0,0,0.2,1);--venia-global-anim-out:cubic-bezier(0.4,0,1,1);--venia-global-anim-standard:cubic-bezier(0.4,0,0.2,1);--venia-global-color-blue-100:194 200 255;--venia-global-color-blue-400:61 132 255;--venia-global-color-blue-500:51 109 255;--venia-global-color-blue-600:41 84 255;--venia-global-color-blue-700:31 57 255;--venia-global-color-blue-800:23 43 196;--venia-global-color-gray-50:255 255 255;--venia-global-color-gray-75:250 250 250;--venia-global-color-gray-100:244 245 245;--venia-global-color-gray-200:234 235 235;--venia-global-color-gray-300:223 225 226;--venia-global-color-gray-400:181 184 186;--venia-global-color-gray-500:149 154 157;--venia-global-color-gray-600:118 123 127;--venia-global-color-gray-700:84 93 99;--venia-global-color-gray-800:51 63 71;--venia-global-color-gray-900:23 32 38;--venia-global-color-gray:var(--venia-global-color-gray-100);--venia-global-color-gray-dark:var(--venia-global-color-gray-300);--venia-global-color-gray-darker:var(--venia-global-color-gray-600);--venia-global-color-green-400:51 171 132;--venia-global-color-green-500:45 157 120;--venia-global-color-green-600:38 142 108;--venia-global-color-green-700:18 128 92;--venia-global-color-orange:241 99 33;--venia-global-color-red-400:236 91 98;--venia-global-color-red-500:227 72 80;--venia-global-color-red-600:215 55 63;--venia-global-color-red-700:201 37 45;--venia-global-color-red-800:161 30 36;--venia-global-color-teal:var(--venia-global-color-blue-400);--venia-global-color-teal-dark:var(--venia-global-color-blue-600);--venia-global-color-teal-light:var(--venia-global-color-gray-100);--venia-global-color-background:var(--venia-global-color-gray-50);--venia-global-color-border:var(--venia-global-color-gray-300);--venia-global-color-error:var(--venia-global-color-red-700);--venia-global-color-text:var(--venia-global-color-gray-900);--venia-global-color-text-alt:var(--venia-global-color-gray-darker);--venia-global-color-text-hint:var(--venia-global-color-gray-500);--venia-global-color-warning-dark:var(--venia-global-color-red-700);--venia-global-color-warning-light:var(--venia-global-color-gray-100);--venia-global-fontFamily-sansSerif:"Muli",sans-serif;--venia-global-fontFamily-serif:"Source Serif Pro",serif;--venia-global-fontSize-50:0.6875rem;--venia-global-fontSize-75:0.75rem;--venia-global-fontSize-100:0.875rem;--venia-global-fontSize-200:1rem;--venia-global-fontSize-300:1.125rem;--venia-global-fontSize-400:1.25rem;--venia-global-fontSize-500:1.375rem;--venia-global-fontSize-600:1.5rem;--venia-global-fontSize-700:1.75rem;--venia-global-fontSize-800:2rem;--venia-global-fontSize-900:2.25rem;--venia-global-fontSize-1000:2.5rem;--venia-global-fontSize-1100:3rem;--venia-global-fontSize-1200:3.5rem;--venia-global-fontWeight-normal:400;--venia-global-fontWeight-semibold:600;--venia-global-fontWeight-bold:700;--venia-global-lineHeight-100:1;--venia-global-lineHeight-200:1.25;--venia-global-lineHeight-300:1.5;--venia-global-lineHeight-400:1.75;--venia-global-lineHeight-500:2;--venia-global-maxWidth:1440px}.cif-demo *{-webkit-box-sizing:border-box;box-sizing:border-box}.cif-demo html{background-color:#fff;font-size:100%;font-weight:400;line-height:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.cif-demo body{background-color:#fff;color:#212121;margin:0;padding:0}.cif-demo div.header+div.responsivegrid{margin:0 auto;max-width:1500px!important;float:none!important}.cif-demo body,.cif-demo input,.cif-demo select,.cif-demo textarea{font-family:Muli,-apple-system,BlinkMacSystemFont,sans-serif}.cif-demo h1,.cif-demo h2,.cif-demo h3,.cif-demo h4,.cif-demo h5,.cif-demo h6{font-size:1rem;font-weight:400;margin:0}.cif-demo h1{font-size:1.5rem}.cif-demo h2{font-size:1.25rem}.cif-demo a{color:currentColor;text-decoration:none}.cif-demo p{margin:0}.cif-demo dl,.cif-demo ol,.cif-demo ul{list-style-type:none;margin:0;padding:0}.cif-demo dd,.cif-demo dt{margin:0}.cif-demo button{background:none;border:0;cursor:pointer;font-family:Muli,-apple-system,BlinkMacSystemFont,sans-serif;font-size:100%;padding:0;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}.cif-demo button:disabled{cursor:default;-ms-touch-action:none;touch-action:none}.cif-demo .cmp-Mask__mask__root{background-color:#000;cursor:pointer;display:block;height:100%;left:0;opacity:0;position:fixed;top:0;-webkit-transition-duration:192ms;transition-duration:192ms;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;-webkit-transition-timing-function:linear;transition-timing-function:linear;visibility:hidden;width:100%;z-index:2;-webkit-appearance:none}.cif-demo .cmp-Mask__mask__root_active{opacity:.5;-webkit-transition-duration:224ms;transition-duration:224ms;visibility:visible}.cif-demo .cmp-Minicart__header__root{-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:RGB(var(--venia-grey));-webkit-box-shadow:0 1px RGB(var(--venia-border));box-shadow:0 1px RGB(var(--venia-border));display:grid;grid-auto-columns:auto;grid-auto-flow:column;grid-auto-rows:3rem;grid-template-columns:1fr;height:var(--minicart-header-height);-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;padding:0 1rem;position:relative;z-index:1}.cif-demo .cmp-Minicart__header__title{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;font-weight:400;margin-right:auto;padding:0;text-transform:uppercase}.cif-demo .cmp-LoadingIndicator__indicator__root{-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:grid;gap:3rem;height:calc(100% - 6rem);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center;margin:3rem 0;width:100%}.cif-demo .cmp-LoadingIndicator__indicator__global{position:fixed;top:0;left:0;margin:0;height:100%;width:100%}.cif-demo .cmp-LoadingIndicator__indicator__message{color:RGB(var(--venia-text-alt));font-size:1rem;letter-spacing:.25rem;text-transform:uppercase}.cif-demo .cmp-LoadingIndicator__indicator__indicator{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:cmp-LoadingIndicator__indicator__pulse;animation-name:cmp-LoadingIndicator__indicator__pulse;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1)}@-webkit-keyframes cmp-LoadingIndicator__indicator__pulse{0%{-webkit-filter:grayscale(1);filter:grayscale(1);-webkit-transform:scale(.75) rotate(-540deg);transform:scale(.75) rotate(-540deg)}to{-webkit-filter:grayscale(0);filter:grayscale(0);-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg)}}@keyframes cmp-LoadingIndicator__indicator__pulse{0%{-webkit-filter:grayscale(1);filter:grayscale(1);-webkit-transform:scale(.75) rotate(-540deg);transform:scale(.75) rotate(-540deg)}to{-webkit-filter:grayscale(0);filter:grayscale(0);-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg)}}.cif-demo .cmp-components__clickable__root{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;line-height:1;pointer-events:auto;white-space:nowrap}.cif-demo .cmp-components__clickable__root,.cif-demo .cmp-Minicart__emptyMiniCartBody__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.cif-demo .cmp-Minicart__emptyMiniCartBody__root{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1rem}.cif-demo .cmp-Minicart__emptyMiniCartBody__continue{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;pointer-events:auto;text-align:center;white-space:nowrap;background:none;border:1px solid rgb(var(--color));border-radius:1.5rem;font-size:.75rem;font-weight:600;height:2rem;min-width:7.5rem;padding:0 1rem;-webkit-transition-duration:384ms;transition-duration:384ms;-webkit-transition-property:background-color,color;transition-property:background-color,color;-webkit-transition-timing-function:var(--venia-anim-standard);transition-timing-function:var(--venia-anim-standard);--color:var(--venia-text);color:#fff;background-color:RGB(var(--color))}.cif-demo .cmp-Minicart__emptyMiniCartBody__continue:hover{color:#fff;background-color:RGB(var(--venia-teal))}.cif-demo .cmp-Minicart__body__root{display:grid;grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content 1fr;grid-template-rows:min-content min-content min-content 1fr;overflow:auto}.cif-demo .cmp-Minicart__product__root{position:relative;-ms-flex-line-pack:start;align-content:start;display:grid;grid-gap:0 1rem;grid-template-areas:"image name" "image options" "image quantity";grid-template-columns:5pc 1fr;grid-template-rows:-webkit-min-content minmax(54px,1fr) -webkit-min-content;grid-template-rows:min-content minmax(54px,1fr) min-content}.cif-demo .cmp-Minicart__product__image{background-color:RGB(var(--venia-grey));border:1px solid rgb(var(--venia-border));border-radius:2px;grid-area:image;max-width:5pc;min-height:75pt}.cif-demo .cmp-Minicart__product__name{font-size:.875rem;font-weight:600;grid-area:name;padding-top:.125rem}.cif-demo .cmp-Minicart__product__quantityRow{-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.cif-demo .cmp-Minicart__product__quantity{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;grid-column:2/span 1;font-size:13px;align-self:end}.cif-demo .cmp-Minicart__product__quantityOperator{color:RGB(var(--venia-text-alt));margin:0 .375rem}.cif-demo .cmp-Minicart__product__price,.cif-demo .cmp-Minicart__product__quantityOperator{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.cif-demo .cmp-Minicart__product__rowTotalRow{-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;text-align:right}.cif-demo .cmp-Minicart__product__rowTotal{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;float:right}.cif-demo .cmp-Minicart__product__bundleOptions{padding:3px 0 7px}.cif-demo .cmp-Minicart__product__bundleOptionTitle{font-weight:600;font-size:.9rem;margin:7px 0 3px}.cif-demo .cmp-Minicart__product__bundleOptionValue{font-size:.8rem;margin-bottom:2px}.cif-demo .cmp-Minicart__product__mask{position:absolute;left:-24px;right:-24px;top:-7px;bottom:-7px;background-color:RGB(var(--venia-grey));opacity:.5;z-index:2}.cif-demo .cmp-Minicart__kebab__root{display:inline-block;grid-row-start:1;grid-row-end:4;grid-column-start:3;grid-column-end:4;margin-top:2px;position:relative}.cif-demo .cmp-Minicart__kebab__dropdown{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 0 1px rgba(0,0,0,.2);box-shadow:0 0 1px rgba(0,0,0,.2);display:grid;position:absolute;right:2px;top:0;-webkit-transition:256ms ease-out;transition:256ms ease-out;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:100% 0;transform-origin:100% 0;z-index:3}.cif-demo .cmp-Minicart__kebab__dropdown_active{position:absolute;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.25s var(--venia-anim-bounce);transition:.25s var(--venia-anim-bounce)}.cif-demo .cmp-Minicart__kebab__dropdown li{display:block;width:100%;background-color:#fff;border-bottom:1px solid rgb(var(--venia-border))}.cif-demo .cmp-Minicart__kebab__dropdown li:hover{background-color:#eee}.cif-demo .cmp-Minicart__kebab__kebab{outline:0;border:none;background-color:#fff}.cif-demo .cmp-Icon__icon__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-touch-action:manipulation;touch-action:manipulation}.cif-demo .cmp-Minicart__section__menuItem button{width:100%;padding:.6rem 1.6rem .72rem .6rem;display:-webkit-box;display:-ms-flexbox;display:flex;white-space:pre;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:left;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:start;-webkit-column-gap:.7rem;-moz-column-gap:.7rem;column-gap:.7rem}.cif-demo .cmp-Minicart__section__text{padding-top:1px;padding-left:.4rem;font-size:11px}.cif-demo .cmp-Minicart__productList__root{display:grid;grid-gap:1rem;margin:0 1.5rem;padding:1.5rem 0}.cif-demo .cmp-Button__button__root{background:none;border:1px solid rgb(var(--color));border-radius:1.5rem;color:RGB(var(--color));font-size:.75rem;font-weight:600;height:2rem;min-width:7.5rem;padding:0 1rem;-webkit-transition-duration:384ms;transition-duration:384ms;-webkit-transition-property:background-color,color;transition-property:background-color,color;-webkit-transition-timing-function:var(--venia-anim-standard);transition-timing-function:var(--venia-anim-standard);--color:var(--venia-text)}.cif-demo .cmp-Button__button__filled{background-color:RGB(var(--color));color:#fff}.cif-demo .cmp-Button__button__root:hover{--color:var(--venia-teal)}.cif-demo .cmp-Button__button__root:focus{-webkit-box-shadow:0 0 0 2px RGB(var(--venia-teal-light)),0 0 .5rem 2px rgba(var(--venia-teal),.2);box-shadow:0 0 0 2px RGB(var(--venia-teal-light)),0 0 .5rem 2px rgba(var(--venia-teal),.2);outline:none;-webkit-transition-duration:128ms;transition-duration:128ms;--color:var(--venia-teal)}.cif-demo .cmp-Button__button__root:active{-webkit-transition-duration:128ms;transition-duration:128ms;--color:var(--venia-teal-dark)}.cif-demo .cmp-Button__button__root:disabled{pointer-events:none;--color:var(--venia-grey-dark)}.cif-demo .cmp-Button__button__content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:inline-grid;gap:.5rem;grid-auto-flow:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center}.cif-demo .cmp-Field__field__root{color:RGB(var(--venia-text));display:grid}.cif-demo .cmp-Field__field__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.875rem;line-height:1rem;padding:.375rem .125rem}.cif-demo .cmp-Field__field__input{background:#fff;border:1px solid rgb(var(--venia-text-alt));border-radius:2px;color:RGB(var(--venia-text));display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;font-size:1rem;height:2.25rem;margin:0;padding:calc(.375rem - 1px) calc(.625rem - 1px);width:100%;-webkit-appearance:none}.cif-demo .cmp-Field__field__input:focus{border-color:RGB(var(--venia-teal));-webkit-box-shadow:0 0 0 2px RGB(var(--venia-teal-light)),0 0 .5rem 2px rgba(var(--venia-teal),.2);box-shadow:0 0 0 2px RGB(var(--venia-teal-light)),0 0 .5rem 2px rgba(var(--venia-teal),.2);outline:none}.cif-demo .cmp-Field__field__requiredSymbol{background-color:#000;width:.4rem;height:.4rem;border-radius:50%;margin-right:.4rem}.cif-demo .cmp-Field__fieldIcons__root{display:inline-grid;grid-auto-flow:column;grid-template-areas:"before input after";grid-template-columns:auto 1fr auto;height:2.25rem}.cif-demo .cmp-Field__fieldIcons__input{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;grid-column:before-start/after-end;grid-row:input-start/input-end}.cif-demo .cmp-Field__fieldIcons__input>input{padding-left:calc(1.875rem*var(--iconsBefore) + .375rem - 1px);padding-right:calc(1.875rem*var(--iconsAfter) + .375rem - 1px)}.cif-demo .cmp-Field__fieldIcons__after,.cif-demo .cmp-Field__fieldIcons__before{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;width:2.25rem}.cif-demo .cmp-Field__fieldIcons__after:empty,.cif-demo .cmp-Field__fieldIcons__before:empty{display:none}.cif-demo .cmp-Field__fieldIcons__before{grid-area:before}.cif-demo .cmp-Field__fieldIcons__after{grid-area:after}.cif-demo .cmp-Field__message__root{color:RGB(var(--venia-text));font-size:.875rem;font-weight:400;line-height:1rem;padding:.375rem .125rem .125rem}.cif-demo .cmp-Field__message__root:empty{display:none}.cif-demo .cmp-Field__message__root_error{color:RGB(var(--venia-error))}.cif-demo .cmp-Select__select__wrapper{display:inline-grid;grid-auto-flow:column;grid-template-areas:"input icon";grid-template-columns:auto 2.25rem;height:2.25rem}.cif-demo .cmp-Select__select__input{grid-area:input-start/input-start/input-end/icon-end;padding-right:calc(2.25rem - 1px)}.cif-demo .cmp-Minicart__cartOptions__root{display:grid;grid-template-rows:-webkit-min-content 1fr;grid-template-rows:min-content 1fr;height:calc(100% - var(--minicart-header-height));left:0;position:absolute;top:3.5rem;width:100%}.cif-demo .cmp-Minicart__cartOptions__focusItem{-webkit-box-shadow:0 1px RGB(var(--venia-border));box-shadow:0 1px RGB(var(--venia-border));display:grid;gap:2rem;grid-auto-flow:column;grid-template-columns:1fr;padding:1rem}.cif-demo .cmp-Minicart__cartOptions__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cif-demo .cmp-Minicart__cartOptions__form{overflow:auto}.cif-demo .cmp-Minicart__cartOptions__modal{visibility:hidden;height:100%;width:100%;background-color:RGB(var(--venia-grey));text-align:center;position:absolute;bottom:0}.cif-demo .cmp-Minicart__cartOptions__modal_active{visibility:visible;opacity:.9}.cif-demo .cmp-Minicart__cartOptions__options{font-weight:700}.cif-demo .cmp-Minicart__cartOptions__quantity{border:solid rgb(var(--venia-border));border-width:0 0 1px;margin:0 1.5rem;padding-top:1rem;padding-bottom:1rem}.cif-demo .cmp-Minicart__cartOptions__quantityTitle{font-size:1rem;font-weight:600;line-height:1.5;margin-bottom:1.5rem}.cif-demo .cmp-Minicart__cartOptions__save{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;display:grid;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;grid-auto-flow:column;grid-gap:.75rem;height:5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center;position:relative}.cif-demo .cmp-Minicart__error__root{background-color:RGB(var(--venia-warning-light));-webkit-box-shadow:0 1px RGB(var(--venia-border));box-shadow:0 1px RGB(var(--venia-border));margin:10px;padding:10px}.cif-demo .cmp-Minicart__error__root h2{color:RGB(var(--venia-warning-dark));padding-bottom:.83rem}.cif-demo .cmp-Minicart__error__root .cmp-Minicart__error__action{padding:10px 0;text-align:center}.cif-demo .cmp-Minicart__couponForm__root{display:grid;grid-template-columns:auto 8rem;grid-gap:1rem;margin:0 1.5rem}.cif-demo .cmp-Minicart__couponForm__root input{max-height:2pc}.cif-demo .cmp-Minicart__couponForm__error{grid-column:1/3;background-color:RGB(var(--venia-grey));border-radius:4px;color:RGB(var(--venia-error));font-size:.875rem;line-height:1.25rem;padding:1rem}.cif-demo .cmp-Minicart__couponForm__error:empty{display:none}.cif-demo .cmp-Minicart__couponItem__root{display:grid;grid-gap:0 1rem;grid-template-columns:1fr -webkit-min-content;grid-template-columns:1fr min-content;margin:0 1.5rem}.cif-demo .cmp-Minicart__couponItem__couponName{line-height:1.5rem}.cif-demo .cmp-Minicart__discountList__root{display:grid;grid-gap:1rem;margin:0 1.5rem;font-size:14px;padding-bottom:1.5rem}.cif-demo .cmp-Minicart__discountList__item{display:grid;grid-template-columns:75% auto}.cif-demo .cmp-Minicart__discountList__price{text-align:right}.cif-demo .cmp-Checkout__flow__root{position:relative}.cif-demo .cmp-Checkout__flow__heading{background-color:#fff;font-size:.875rem;font-weight:600;grid-column-end:span 2;line-height:1rem;padding:1.5rem 0 1.25rem;text-align:center;text-transform:uppercase;top:0;z-index:1}.cif-demo .cmp-Checkout__flow__body{-ms-flex-line-pack:start;align-content:start;-webkit-animation-duration:224ms;animation-duration:224ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:cmp-Checkout__flow__enter;animation-name:cmp-Checkout__flow__enter;background-color:#fff;bottom:5rem;-webkit-box-shadow:0 -1px RGB(var(--venia-border));box-shadow:0 -1px RGB(var(--venia-border));display:grid;grid-gap:.5rem;left:0;max-height:calc(100vh - 8.5rem);overflow:auto;padding:0 1.5rem;position:absolute;right:0}.cif-demo .cmp-Checkout__flow__footer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;display:grid;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;grid-auto-flow:column;grid-gap:.75rem;height:5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center;position:relative}@-webkit-keyframes cmp-Checkout__flow__enter{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes cmp-Checkout__flow__enter{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.cif-demo .cmp-Checkout__section__root{display:block;width:100%;background-color:#fff;border:none}.cif-demo .cmp-Checkout__section__root:focus{background-image:radial-gradient(circle,RGB(var(--venia-grey)),#fff);outline:0 none}.cif-demo .cmp-Checkout__section__content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid rgb(var(--venia-border));display:grid;gap:1rem;grid-auto-flow:column;grid-template-columns:5rem 1fr 2rem;justify-items:start;margin:0 1.5rem;min-height:4.5rem;padding:1rem 0;text-align:left}.cif-demo .cmp-Checkout__section__label{color:RGB(var(--venia-teal));font-size:14px;font-weight:600}.cif-demo .cmp-Checkout__section__summary{font-size:13px;justify-self:stretch;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cif-demo .cmp-Checkout__section__icon{justify-self:center}.cif-demo .cmp-Checkout__form__root{bottom:0;left:0;position:absolute;right:0}.cif-demo .cmp-Checkout__form__body{grid-gap:0;padding:0}.cif-demo .cmp-Checkout__form__informationPrompt{color:RGB(var(--venia-error));text-transform:capitalize}.cif-demo .cmp-Checkout__form__paymentDisplayPrimary{text-transform:capitalize}.cif-demo .cmp-Checkout__form__paymentDisplaySecondary{display:block;text-transform:lowercase}.cif-demo .cmp-Checkout__form__paymentDisplaySecondary:first-letter{text-transform:uppercase}@-webkit-keyframes cmp-Checkout__form__enter{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes cmp-Checkout__form__enter{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.cif-demo .cmp-AddressForm__addressSelect__root{grid-column-end:span 2}.cif-demo .cmp-Checkbox__checkbox__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:RGB(var(--venia-text));display:inline-grid;font-size:1rem;font-weight:400;gap:.5rem;grid-auto-flow:column;grid-template-columns:auto;justify-items:center;margin:.5rem;vertical-align:top}.cif-demo .cmp-Checkbox__checkbox__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:var(--base-z-index1,1)}.cif-demo .cmp-Checkbox__checkbox__icon,.cif-demo .cmp-Checkbox__checkbox__input{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;grid-column:1/span 1;grid-row:1/span 1;height:1.25rem;width:1.25rem}.cif-demo .cmp-Checkbox__checkbox__input{background:none;border:1px solid rgb(var(--venia-text));border-radius:2px;margin:0;-webkit-appearance:none}.cif-demo .cmp-Checkbox__checkbox__input:focus{border-color:RGB(var(--venia-teal));-webkit-box-shadow:0 0 0 2px RGB(var(--venia-teal-light)),0 0 .5rem 2px rgba(var(--venia-teal),.2);box-shadow:0 0 0 2px RGB(var(--venia-teal-light)),0 0 .5rem 2px rgba(var(--venia-teal),.2);outline:none}.cif-demo .cmp-Checkbox__checkbox__label{font-size:1rem;grid-column:2/span 1;grid-row:1/span 1}.cif-demo .cmp-AddressForm__addressForm__heading{background-color:#fff;font-size:.875rem;font-weight:600;grid-column-end:span 2;line-height:1rem;padding:1.5rem 0 1.25rem;text-align:center;text-transform:uppercase;top:0;z-index:1}.cif-demo .cmp-AddressForm__addressForm__body{-ms-flex-line-pack:start;align-content:start;-webkit-animation-duration:224ms;animation-duration:224ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:cmp-AddressForm__addressForm__enter;animation-name:cmp-AddressForm__addressForm__enter;background-color:#fff;bottom:5rem;-webkit-box-shadow:0 -1px RGB(var(--venia-border));box-shadow:0 -1px RGB(var(--venia-border));display:grid;grid-gap:.5rem;left:0;max-height:calc(100vh - 8.5rem);overflow:auto;padding:0 1.5rem;right:0}.cif-demo .cmp-AddressForm__addressForm__footer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;display:grid;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;grid-auto-flow:column;grid-gap:.75rem;height:5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center;position:relative}@-webkit-keyframes cmp-AddressForm__addressForm__enter{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes cmp-AddressForm__addressForm__enter{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.cif-demo .cmp-AddressForm__addressForm__button{text-transform:capitalize}.cif-demo .cmp-AddressForm__addressForm__textInput{background:#fff;border:1px solid rgb(var(--venia-text-alt));border-radius:2px;color:RGB(var(--venia-text));display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;font-size:.9375rem;height:2.25rem;padding:calc(.375rem - 1px) calc(.625rem - 1px);width:100%}.cif-demo .cmp-AddressForm__addressForm__textInput:focus{border-color:RGB(var(--venia-text));outline:0 none}.cif-demo .cmp-AddressForm__addressForm__city,.cif-demo .cmp-AddressForm__addressForm__firstname,.cif-demo .cmp-AddressForm__addressForm__lastname,.cif-demo .cmp-AddressForm__addressForm__postcode,.cif-demo .cmp-AddressForm__addressForm__region_code,.cif-demo .cmp-AddressForm__addressForm__telephone{grid-column-end:span 1}.cif-demo .cmp-AddressForm__addressForm__address_select,.cif-demo .cmp-AddressForm__addressForm__email,.cif-demo .cmp-AddressForm__addressForm__street0{grid-column-end:span 2}.cif-demo .cmp-AddressForm__addressForm__default_shipping,.cif-demo .cmp-AddressForm__addressForm__save_in_address_book{grid-column-end:span 2;text-align:left}.cif-demo .cmp-AddressForm__addressForm__validation{grid-column-end:span 2;line-height:normal}.cif-demo .cmp-AddressForm__addressForm__error{color:RGB(var(--venia-error));grid-column-end:span 2;line-height:normal}.cif-demo .cmp-Checkout__paymentsForm__body{min-height:21rem}.cif-demo .cmp-Checkout__paymentsForm__button{text-transform:capitalize}.cif-demo .cmp-Checkout__paymentsForm__textInput{background:#fff;border:1px solid rgb(var(--venia-text-alt));border-radius:2px;color:RGB(var(--venia-text));display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;font-size:.9375rem;height:2.25rem;padding:calc(.375rem - 1px) calc(.625rem - 1px);width:100%}.cif-demo .cmp-Checkout__paymentsForm__textInput:focus{border-color:RGB(var(--venia-text));outline:0 none}.cif-demo .cmp-Checkout__paymentsForm__city,.cif-demo .cmp-Checkout__paymentsForm__postcode,.cif-demo .cmp-Checkout__paymentsForm__region_code{grid-column-end:span 1}.cif-demo .cmp-Checkout__paymentsForm__address_check,.cif-demo .cmp-Checkout__paymentsForm__address_select,.cif-demo .cmp-Checkout__paymentsForm__braintree,.cif-demo .cmp-Checkout__paymentsForm__email,.cif-demo .cmp-Checkout__paymentsForm__save_in_address_book,.cif-demo .cmp-Checkout__paymentsForm__street0{grid-column-end:span 2}.cif-demo .cmp-Checkout__paymentsForm__validation{color:RGB(var(--venia-error));font-size:.8125rem;grid-column-end:span 2}.cif-demo [data-braintree-id=upper-container]{z-index:unset}.cif-demo .braintree-placeholder{display:none}.cif-demo .cmp-Checkout__shippingForm__button{text-transform:capitalize}.cif-demo .cmp-Checkout__shippingForm__shippingMethod{grid-column-end:span 1}.cif-demo .cmp-Checkout__receipt__root{background-color:#fff;display:grid;grid-template-rows:1fr auto;height:100vh;left:0;padding-top:3.5rem;position:absolute;right:0;bottom:0}.cif-demo .cmp-Checkout__receipt__body{padding:1.5rem 1rem 1rem}.cif-demo .cmp-Checkout__receipt__footer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 1.5rem;padding:1rem 0}.cif-demo .cmp-Checkout__receipt__textBlock{margin:1.5rem 0;line-height:1.875rem;font-size:.875rem}.cif-demo .cmp-Checkout__receipt__orderId{color:#22a1a8;text-decoration:underline}.cif-demo .cmp-Checkout__receipt__header{font-size:1.25rem;font-weight:300;line-height:1.25rem}.cif-demo .cmp-Checkout__receipt__continue{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;pointer-events:auto;text-align:center;white-space:nowrap;background:none;border:1px solid rgb(var(--color));border-radius:1.5rem;font-size:.75rem;font-weight:600;height:2rem;min-width:7.5rem;padding:0 1rem;-webkit-transition-duration:384ms;transition-duration:384ms;-webkit-transition-property:background-color,color;transition-property:background-color,color;-webkit-transition-timing-function:var(--venia-anim-standard);transition-timing-function:var(--venia-anim-standard);--color:var(--venia-text);color:#fff;background-color:RGB(var(--color))}.cif-demo .cmp-Checkout__receipt__continue:hover{color:#fff;background-color:RGB(var(--venia-teal))}.cif-demo .cmp-Minicart__footer__root{background-color:#fff;padding:0}.cif-demo .cmp-Minicart__footer__root_open{z-index:3}.cif-demo .cmp-Minicart__footer__placeholderButton{text-align:center;margin:1.5rem 0 1rem}.cif-demo .cmp-Minicart__totalsSummary__root{-webkit-box-shadow:0 -1px RGB(var(--venia-border));box-shadow:0 -1px RGB(var(--venia-border));line-height:2rem;margin:0 1.5rem;padding-top:1.5rem}.cif-demo .cmp-Minicart__totalsSummary__subtotalLabel{color:RGB(var(--venia-text-alt))}.cif-demo .cmp-Minicart__totalsSummary__subtotalValue{font-weight:600;margin-left:.5rem}.cif-demo .cmp-Minicart__totalsSummary__totals{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cif-demo .cmp-Minicart__totalsSummary__discounted{text-decoration:line-through}.cif-demo .cmp-Minicart__totalsSummary__totalsDiscount{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cif-demo .cmp-Minicart__minicart__root{--base-z-index:4;--minicart-header-height:3.5rem;-ms-flex-line-pack:start;align-content:start;background-color:#fff;bottom:0;-webkit-box-shadow:-1px 0 RGB(var(--venia-border));box-shadow:-1px 0 RGB(var(--venia-border));display:grid;grid-template-rows:-webkit-min-content 1fr;grid-template-rows:min-content 1fr;height:100%;opacity:0;overflow:hidden;position:fixed;right:0;top:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-webkit-transition-duration:192ms;transition-duration:192ms;-webkit-transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,transform,visibility;transition-property:opacity,transform,visibility,-webkit-transform;-webkit-transition-timing-function:cubic-bezier(.4,0,1,1);transition-timing-function:cubic-bezier(.4,0,1,1);visibility:hidden;width:100%;max-width:360px;z-index:var(--base-z-index)}.cif-demo .cmp-Minicart__minicart__root_open{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition-duration:224ms;transition-duration:224ms;-webkit-transition-timing-function:cubic-bezier(0,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);visibility:visible}.cif-demo .cmp-AuthBar__authBar__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;display:grid;gap:.75rem;grid-auto-flow:column;height:5.5rem;justify-items:center}.cif-demo .cmp-AuthBar__userChip__root{width:100%}.cif-demo .cmp-AuthBar__userChip__content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:grid;font-size:.875rem;height:5.5rem;gap:.5rem;grid-auto-flow:column;grid-template-columns:3rem 1fr 3rem;line-height:1rem;padding:0 .5rem;text-align:center}.cif-demo .cmp-AuthBar__userChip__user{display:grid;gap:.25rem;grid-auto-flow:row;text-align:left}.cif-demo .cmp-AuthBar__userChip__email{color:RGB(var(--venia-text-alt))}.cif-demo .cmp-SignIn__signIn__root{display:grid;gap:1.5rem;justify-items:stretch;padding:1rem 1.5rem}.cif-demo .cmp-SignIn__signIn__forgotPassword{display:block;text-decoration:underline;color:RGB(var(--venia-error));font-size:.8rem}.cif-demo .cmp-SignIn__signIn__form{display:grid;row-gap:1rem}.cif-demo .cmp-SignIn__signIn__formTitle{padding:1rem 0 .5rem}.cif-demo .cmp-SignIn__signIn__modal{visibility:hidden;height:100%;width:100%;background-color:RGB(var(--venia-grey));text-align:center;position:absolute;bottom:0}.cif-demo .cmp-SignIn__signIn__modal_active{visibility:visible;opacity:.9}.cif-demo .cmp-SignIn__signIn__createAccountButton,.cif-demo .cmp-SignIn__signIn__forgotPasswordButton,.cif-demo .cmp-SignIn__signIn__signInButton{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center}.cif-demo .cmp-SignIn__signIn__createAccountButton,.cif-demo .cmp-SignIn__signIn__signInButton{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cif-demo .cmp-SignIn__signIn__createAccountButton button,.cif-demo .cmp-SignIn__signIn__signInButton button{min-width:10rem}.cif-demo .cmp-SignIn__signIn__forgotPasswordButton{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.cif-demo .cmp-SignIn__signIn__signInButton{margin-top:1rem}.cif-demo .cmp-SignIn__signIn__signInError{background-color:RGB(var(--venia-grey));border-radius:4px;color:RGB(var(--venia-error));font-size:.875rem;line-height:1.25rem;padding:1rem}.cif-demo .cmp-SignIn__signIn__signInError:empty{display:none}.cif-demo .cmp-MyAccount__accountLink__root{border-bottom:1px solid rgb(var(--venia-border));width:100%}.cif-demo .cmp-MyAccount__accountLink__content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:grid;gap:.5rem;grid-auto-flow:column;grid-template-columns:2rem 1fr;height:3rem;justify-items:start}.cif-demo .cmp-MyAccount__accountLink__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:RGB(var(--venia-teal));display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-self:center}.cif-demo .cmp-MyAccount__accountLink__text{font-size:.875rem;line-height:1rem}.cif-demo .cmp-MyAccount__myAccount__root{display:grid;gap:1rem;padding:1.5rem}.cif-demo .cmp-MyAccount__myAccount__user{display:grid;gap:.5rem;grid-auto-flow:row}.cif-demo .cmp-MyAccount__myAccount__subtitle{color:RGB(var(--venia-text-alt))}.cif-demo .cmp-ForgotPassword__forgotPasswordForm__root{display:grid;gap:1rem;justify-items:stretch}.cif-demo .cmp-ForgotPassword__forgotPasswordForm__buttonContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;margin-top:1rem;text-align:center}.cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__root{display:grid;gap:1rem}.cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__text{background-color:RGB(var(--venia-grey));border-radius:4px;font-size:.875rem;font-weight:300;line-height:1.25rem;padding:1rem}.cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__buttonContainer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:1rem;text-align:center}.cif-demo .cmp-ForgotPassword__forgotPassword__root{display:grid;gap:1.5rem;justify-items:stretch;padding:1rem 1.5rem}.cif-demo .cmp-ForgotPassword__forgotPassword__instructions{background-color:RGB(var(--venia-grey));border-radius:4px;font-size:.875rem;font-weight:300;line-height:1.25rem;padding:1rem}.cif-demo .cmp-CreateAccount__createAccount__root{display:grid;gap:1rem;justify-items:stretch;padding:1rem 1.5rem}.cif-demo .cmp-CreateAccount__createAccount__message{background-color:RGB(var(--venia-grey));border-radius:4px;font-size:.875rem;line-height:1.25rem;padding:1rem}.cif-demo .cmp-CreateAccount__createAccount__message:empty{display:none}.cif-demo .cmp-CreateAccount__createAccount__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;margin-top:1rem}.cif-demo .cmp-CreateAccount__createAccount__error{color:RGB(var(--venia-error))}.cif-demo .cmp-CreateAccount__createAccount__subscribe{margin-left:-.5rem}.cif-demo .cmp-CreateAccount__createAccountSuccess__root{padding-top:1.5rem}.cif-demo .cmp-CreateAccount__createAccountSuccess__body{padding:1.5rem 1rem 1rem}.cif-demo .cmp-CreateAccount__createAccountSuccess__header{font-size:1.25rem;font-weight:300;line-height:1.25rem}.cif-demo .cmp-CreateAccount__createAccountSuccess__textBlock{margin:1.5rem 0;line-height:1.875rem;font-size:.875rem}.cif-demo .cmp-CreateAccount__createAccountSuccess__signin{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;pointer-events:auto;text-align:center;white-space:nowrap;background:none;border:1px solid rgb(var(--color));border-radius:1.5rem;font-size:.75rem;font-weight:600;height:2rem;min-width:7.5rem;padding:0 1rem;-webkit-transition-duration:384ms;transition-duration:384ms;-webkit-transition-property:background-color,color;transition-property:background-color,color;-webkit-transition-timing-function:var(--venia-anim-standard);transition-timing-function:var(--venia-anim-standard);--color:var(--venia-text);color:#fff;background-color:RGB(var(--color))}.cif-demo .cmp-CreateAccount__createAccountSuccess__signin:hover{color:#fff;background-color:RGB(var(--venia-teal))}.cif-demo .cmp-CreateAccount__createAccountSuccess__actions{display:grid;justify-items:center;margin-top:1rem}.cif-demo .cmp-ChangePassword__changePassword__root{display:grid;gap:1rem;padding:1.5rem}.cif-demo .cmp-ChangePassword__changePassword__message{background-color:RGB(var(--venia-grey));border-radius:4px;font-size:.875rem;line-height:1.25rem;padding:1rem}.cif-demo .cmp-ChangePassword__changePassword__message:empty{display:none}.cif-demo .cmp-ChangePassword__changePassword__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;margin-top:1rem}.cif-demo .cmp-ChangePassword__changePassword__error{color:RGB(var(--venia-error))}.cif-demo .cmp-AuthBar__myAccountPanel__root{display:block}.cif-demo .cmp-AuthBar__container__enter{-webkit-transition-duration:384ms;transition-duration:384ms;-webkit-transition-timing-function:var(--venia-anim-in);transition-timing-function:var(--venia-anim-in)}.cif-demo .cmp-AuthBar__container__exit{-webkit-transition-duration:192ms;transition-duration:192ms;-webkit-transition-timing-function:var(--venia-anim-out);transition-timing-function:var(--venia-anim-out)}.cif-demo .cmp-AuthBar__container__hidden{opacity:0;visibility:hidden}.cif-demo .cmp-AuthBar__container__visible{opacity:1;visibility:visible}.cif-demo .cmp-AuthBar__container__modal{background-color:#fff;bottom:0;left:0;overflow:auto;position:absolute;right:0;top:3.5rem;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,transform,visibility;transition-property:opacity,transform,visibility,-webkit-transform}.cif-demo .cmp-AuthBar__container__modal_open{-webkit-transform:translateZ(0);transform:translateZ(0)}.cif-demo .cmp-CartTrigger__cartCounter__root{font-weight:600;margin-left:.3rem}.cif-demo .cmp-AccountContainer__accountTrigger__root,.cif-demo .cmp-CartTrigger__cartTrigger__root{height:3rem;min-width:3rem}.cif-demo .cmp-AccountContainer__accountTrigger__label{padding:0 .5rem}.cif-demo .cmp-AccountContainer__accountDropdown__root{background-color:RGB(var(--venia-grey));display:grid;gap:1rem;min-width:22rem;left:50%;opacity:0;position:absolute;top:3.3rem;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);-webkit-transition-duration:192ms;transition-duration:192ms;-webkit-transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,transform,visibility;transition-property:opacity,transform,visibility,-webkit-transform;-webkit-transition-timing-function:cubic-bezier(.4,0,1,1);transition-timing-function:cubic-bezier(.4,0,1,1);visibility:hidden;z-index:4}.cif-demo .cmp-AccountContainer__accountDropdown__root_open{opacity:1;-webkit-transition-duration:224ms;transition-duration:224ms;-webkit-transition-timing-function:cubic-bezier(0,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);visibility:visible}.cif-demo .cmp-AccountContainer__accountDropdown__mask_active{opacity:0}.cif-demo .cmp-AddressBook__addressDeleteModal__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:rgba(var(--venia-grey),.8);bottom:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:distribute;justify-content:space-around;left:0;position:absolute;right:0;top:0;z-index:2}.cif-demo .cmp-AddressBook__addressItem__root{border:1px solid rgb(var(--venia-text));border-radius:5px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:8rem;padding:1.5rem;position:relative;width:100%}.cif-demo .cmp-AddressBook__addressItem__defaultTag{border:1px solid rgb(var(--venia-teal));border-radius:5px;color:RGB(var(--venia-teal));max-width:4.5rem;padding:.5rem;text-align:left;margin-top:.5rem}.cif-demo .cmp-AddressBook__addressItem__cityRegion,.cif-demo .cmp-AddressBook__addressItem__country,.cif-demo .cmp-AddressBook__addressItem__name,.cif-demo .cmp-AddressBook__addressItem__street{text-align:left}.cif-demo .cmp-AddressBook__addressItem__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.cif-demo .cmp-AddressBook__addressItem__deleteButton,.cif-demo .cmp-AddressBook__addressItem__editButton,.cif-demo .cmp-AddressBook__addressItem__icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cif-demo .cmp-AddressBook__addressItem__icon{color:RGB(var(--venia-teal));-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-touch-action:manipulation;touch-action:manipulation}.cif-demo .cmp-AddressBook__addressItem__label{padding-left:.5rem}.cif-demo .cmp-AddressBook__addAddressButton__root{border:1px dotted rgb(var(--venia-text));border-radius:5px;min-height:8rem;padding:1.5rem;width:100%}.cif-demo .cmp-AddressBook__addAddressButton__icon,.cif-demo .cmp-AddressBook__addAddressButton__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cif-demo .cmp-AddressBook__addAddressButton__icon{color:RGB(var(--venia-teal));-ms-touch-action:manipulation;touch-action:manipulation}.cif-demo .cmp-AddressBook__addAddressButton__label{padding-left:.5rem}.cif-demo .cmp-AddressBook__addressItemsContainer__root{display:grid;grid-template-columns:repeat(auto-fill,minmax(20pc,1fr));grid-gap:1rem}@media (max-width:424px){.cif-demo .cmp-AddressBook__addressItemsContainer__root{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}.cif-demo .cmp-AddressBook__addressFormContainer__mask{cursor:auto;z-index:10}.cif-demo .cmp-AddressBook__addressFormContainer__container{background-color:#fff;left:50%;max-width:360px;position:absolute;top:5rem;-webkit-transform:translate(-50%);transform:translate(-50%);width:100%;z-index:11}.cif-demo .cmp-AddressBook__addressBook__root{width:100%;text-align:center;padding:1rem}.cif-demo .cmp-AddressBook__addressBook__title{margin-bottom:1.5rem}.cif-demo .cmp-ResetPassword__ResetPassword__root{padding:1rem}.cif-demo .cmp-ResetPassword__ResetPassword__fields{max-width:300px}.cif-demo .cmp-ResetPassword__ResetPassword__lead{background-color:RGB(var(--venia-grey));border-radius:4px;font-size:.875rem;font-weight:300;line-height:1.25rem;padding:1rem;margin:1rem 0}.cif-demo .cmp-ResetPassword__ResetPassword__submit{padding-top:1rem}.cif-demo .cmp-ResetPassword__ResetPassword__error{color:RGB(var(--venia-error));background-color:RGB(var(--venia-grey));border-radius:4px;font-size:.875rem;font-weight:300;line-height:1.25rem;padding:1rem;margin:1rem 0}.cif-demo .cmp-AccountDetails__accountDetails__root{display:grid;row-gap:2rem;width:100%;text-align:center;padding:1rem;margin-top:3rem}.cif-demo .cmp-AccountDetails__accountDetails__lineItems{display:grid;grid-gap:.75rem;grid-template-columns:1fr auto;line-height:1.5rem}.cif-demo .cmp-AccountDetails__accountDetails__lineItemLabel{font-weight:var(--venia-global-fontWeight-bold)}.cif-demo .cmp-AccountDetails__accountDetails__editInformationButton{margin:auto}.cif-demo .cmp-AccountDetails__accountDetails__messageText{text-align:center;margin:auto}@media (min-width:961px){.cif-demo .cmp-AccountDetails__accountDetails__accountDetails{display:grid;gap:1rem;grid-template-columns:1fr 1fr 1fr;margin:3rem 1rem}}@media (max-width:960px){.cif-demo .cmp-AccountDetails__accountDetails__lineItems{grid-template-columns:1fr}.cif-demo .cmp-AccountDetails__accountDetails__lineItemButton{text-align:center}}.cif-demo .cmp-Dialog__dialog__root{position:fixed;left:0;top:0;height:100%;width:100%;opacity:0;visibility:hidden;-webkit-transition-duration:192ms;transition-duration:192ms;-webkit-transition-timing-function:var(--venia-global-anim-out);transition-timing-function:var(--venia-global-anim-out);-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;z-index:3}.cif-demo .cmp-Dialog__dialog__root_open{opacity:1;visibility:visible;-webkit-transition-duration:224ms;transition-duration:224ms;-webkit-transition-timing-function:var(--venia-global-anim-in);transition-timing-function:var(--venia-global-anim-in)}.cif-demo .cmp-Dialog__dialog__form{height:100%;width:100%;display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center}.cif-demo .cmp-Dialog__dialog__mask{position:absolute;left:0;top:0;height:100%;width:100%;background-color:RGB(var(--venia-global-color-gray-darker));opacity:.5}.cif-demo .cmp-Dialog__dialog__dialog{background-color:RGB(var(--venia-global-color-background));border-radius:5px;-webkit-box-shadow:1px 1px 5px RGB(var(--venia-global-color-gray-darker));box-shadow:1px 1px 5px RGB(var(--venia-global-color-gray-darker));height:100%;max-height:90vh;min-height:360px;width:40pc;overflow:hidden;display:grid;grid-template-rows:auto 1fr;pointer-events:auto;z-index:4}.cif-demo .cmp-Dialog__dialog__header{border-bottom:1px solid rgb(var(--venia-global-color-border));height:3.5rem;padding:0 .75rem 0 1rem;display:grid;grid-auto-flow:column;grid-template-columns:1fr auto;-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cif-demo .cmp-Dialog__dialog__headerText{color:RGB(var(--venia-global-color-text-alt));text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25rem}.cif-demo .cmp-Dialog__dialog__headerButton{justify-self:right}.cif-demo .cmp-Dialog__dialog__body{overflow:auto;display:grid;grid-template-rows:1fr auto}.cif-demo .cmp-Dialog__dialog__contents{padding:1rem}.cif-demo .cmp-Dialog__dialog__buttons{padding:2.5rem;display:grid;grid-auto-flow:column;gap:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-width:960px){.cif-demo .cmp-Dialog__dialog__root{left:auto;right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-webkit-transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,transform,visibility;transition-property:opacity,transform,visibility,-webkit-transform}.cif-demo .cmp-Dialog__dialog__root_open{-webkit-transform:translateZ(0);transform:translateZ(0)}.cif-demo .cmp-Dialog__dialog__form{-ms-flex-line-pack:stretch;align-content:stretch;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}.cif-demo .cmp-Dialog__dialog__dialog{max-height:100%;max-width:360px}.cif-demo .cmp-Dialog__dialog__buttons{grid-auto-flow:row}.cif-demo .cmp-Dialog__dialog__confirmButton{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}}.cif-demo .cmp-FormError__formError__errorMessage{color:RGB(var(--venia-global-color-error));font-size:var(--venia-typography-body-S-fontSize);font-weight:var(--venia-global-fontWeight-semibold);line-height:var(--venia-global-lineHeight-300)}.cif-demo .cmp-LinkButton__linkButton__root{color:RGB(var(--venia-brand-color-1-700));font-size:var(--venia-global-fontSize-200);font-weight:var(--venia-global-fontWeight-semibold);text-decoration:underline;line-height:1.25rem;max-width:100%}.cif-demo .cmp-LinkButton__linkButton__root:hover{color:RGB(var(--venia-global-color-gray-900))}.cif-demo .cmp-Password__password__passwordButton{--stroke:var(--venia-global-color-gray-500);background:none;border-radius:0;border-style:none;border-width:0;padding:0;min-width:0}.cif-demo .cmp-Password__password__passwordButton:hover{--stroke:var(--venia-global-color-gray-700)}.cif-demo .cmp-Password__password__passwordButton:focus{-webkit-box-shadow:none;box-shadow:none;--stroke:var(--venia-global-color-gray-700)}.cif-demo .cmp-Password__password__root:active{--stroke:var(--venia-global-color-gray-700)}.cif-demo .cmp-breadcrumb__list{margin-bottom:5px}.cif-demo .cmp-breadcrumb__item:before{content:"> "}.cif-demo .cmp-breadcrumb__item--active{color:#707070}.cif-demo .venia-HeroImage{min-height:460px;padding:20px 0;margin-bottom:40px;background:#555 50% no-repeat;background-size:cover;position:relative;text-align:center}.cif-demo .venia-HeroImage .navbar{margin-top:20px}.cif-demo .venia-HeroImage-title{display:block;margin:0 auto 20px;text-transform:uppercase}.cif-demo .venia-HeroImage p{margin:0 auto}.cif-demo .venia-HeroImage p.h3{font-weight:400;line-height:2.58333333}.cif-demo .venia-HeroImage-title,.cif-demo .venia-HeroImage p{text-shadow:2px 4px 3px rgba(0,0,0,.5)}.cif-demo .venia-HeroImage-title .btn,.cif-demo .venia-HeroImage p .btn{text-shadow:none}.cif-demo .header~.heroimage,.cif-demo .header~.target .heroimage{position:relative;top:-130px;margin-bottom:-130px;overflow:visible}@media (max-width:1199px){.cif-demo .header~.heroimage,.cif-demo .header~.target .heroimage{margin-top:-40px}}@media (min-width:992px){.cif-demo .venia-HeroImage{text-align:left}.cif-demo .venia-HeroImage .container{-webkit-transform:translateX(-50%);transform:translateX(-50%);position:absolute;top:0;bottom:0;left:50%}.cif-demo .venia-HeroImage-wrapper{-webkit-transform:translateY(-50%);transform:translateY(-50%);position:absolute;top:50%;left:0}}@media (min-width:992px) and (min-width:992px){.cif-demo .venia-HeroImage-wrapper{margin-left:16.66667%}}@media (max-width:991px){.cif-demo .venia-HeroImage.width-full{padding:180px 0 70px}}.cif-demo .jumbotron{padding-top:20px;padding-bottom:20px;margin-bottom:20px;color:#fff;background-color:#eee}.cif-demo .jumbotron .h1,.cif-demo .jumbotron h1{color:inherit}.cif-demo .jumbotron p{margin-bottom:10px;font-size:24px;font-weight:200}.cif-demo .jumbotron>hr{border-top-color:#d5d5d5}.container-fluid .cif-demo .jumbotron,.container .cif-demo .jumbotron{border-radius:0}.cif-demo .jumbotron .container{max-width:100%}@media screen and (min-width:768px){.cif-demo .jumbotron{padding-top:2pc;padding-bottom:2pc}.container-fluid .cif-demo .jumbotron,.container .cif-demo .jumbotron{padding-left:40px;padding-right:40px}.cif-demo .jumbotron .h1,.cif-demo .jumbotron h1{font-size:3pc}}.cif-demo .container-fluid{margin-right:auto;margin-left:auto;padding-left:9pt;padding-right:9pt}.cif-demo .carousel__cardsroot{overflow:hidden}.cif-demo .carousel__cardsroot .price{font-size:.875rem;line-height:1rem;margin:.5rem 0;min-height:1rem}.cif-demo .carousel__cardsroot .price .regularPrice{text-decoration:line-through;font-size:.8rem}.cif-demo .carousel__cardsroot .price .discountedPrice{font-weight:700;color:#007378;font-size:1.2rem}.cif-demo .carousel__cardsroot :after,.cif-demo .carousel__cardsroot :before{content:"";display:table}.cif-demo .carousel__cardsroot :after{clear:both}.cif-demo .carousel__title{text-align:center;margin-bottom:10px;color:#333}.cif-demo .carousel__container{position:relative;margin:25px auto;width:15pc}@media screen and (min-width:790px){.cif-demo .carousel__container{width:45pc}}@media screen and (min-width:1090px){.cif-demo .carousel__container{width:60pc}}@media screen and (min-width:1380px){.cif-demo .carousel__container{width:75pc}}@media screen and (min-width:1650px){.cif-demo .carousel__container{width:90pc}}.cif-demo .carousel__cardscontainer{margin:auto}.cif-demo .carousel__cardscontainer :after,.cif-demo .carousel__cardscontainer :before{content:"";display:table}.cif-demo .carousel__cardscontainer :after{clear:both}.cif-demo .carousel__btn{background:transparent;border:0;-webkit-box-shadow:none;box-shadow:none;outline:none;cursor:pointer;height:20px;margin-top:-25px;position:absolute;top:50%;width:20px}.cif-demo .carousel__btn--next{border-bottom:8px solid #aaa;border-right:8px solid #aaa;right:0;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.cif-demo .carousel__btn--prev{border-bottom:8px solid #aaa;border-left:8px solid #aaa;left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}@media screen and (max-width:769px){.cif-demo .carousel__btn--next{right:8%}.cif-demo .carousel__btn--prev{left:8%}}.cif-demo .categorycarousel__anchor{display:inline-block;line-height:1rem;text-align:center}.cif-demo .categorycarousel__imagewrapper{background-position:50% 50%;background-size:cover;border-radius:50%;-webkit-box-shadow:0 0 0 1px;box-shadow:0 0 0 1px;display:block;height:7rem;margin:0 auto 1rem;width:7rem}.cif-demo .categorycarousel__image{height:100%;opacity:0;width:100%}.cif-demo .cmp-categorylist{padding:1rem}.cif-demo .cmp-categorylist__content{display:grid;grid-gap:3rem 1rem;grid-template-columns:repeat(auto-fit,6rem);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cif-demo .cmp-categorylist__anchor{display:block;line-height:1rem;text-align:center;width:6rem}.cif-demo .cmp-categorylist__imagewrapper{background-position:50% 50%;background-size:cover;border-radius:50%;-webkit-box-shadow:0 0 0 1px;box-shadow:0 0 0 1px;display:block;height:5rem;margin:0 auto 1rem;width:5rem}.cif-demo .cmp-categorylist__image{height:100%;opacity:0;width:100%}.cif-demo .cmp-categorylist__name{display:block}.cif-demo .cmp-categorylist__title{text-align:center;padding:2rem}.cif-demo .loader-img{height:4pc;width:4pc;background:url(../resources/images/logo.svg)}.cif-demo .flow__root{--flow-footer-height:5.5rem;position:relative}.cif-demo .flow__body{-webkit-animation-duration:224ms;animation-duration:224ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:enter;animation-name:enter;background-color:#fff;bottom:var(--flow-footer-height);-webkit-box-shadow:0 -1px #e0e0e0;box-shadow:0 -1px #e0e0e0;display:grid;left:0;position:absolute;right:0}.cif-demo .flow__footer{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;display:grid;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;grid-auto-flow:column;grid-gap:.75rem;height:var(--flow-footer-height);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center;margin:0 1.5rem;padding:1.5rem 0 1rem;position:relative}@-webkit-keyframes enter{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes enter{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.cif-demo .icon__root{height:25px;width:25px}.cif-demo .icon__root.icon__root-close{background:url(src/main/resourcesces/images/close.svg)}.cif-demo .icon__root.icon__root-kebab{background:url(src/main/resourcesces/images/kebab.svg)}.cif-demo .icon__root.icon__root_heart{background:no-repeat 50% url(src/main/resourcesces/images/heart.svg)}.cif-demo .icon__root.icon__root_pencil{background:no-repeat 50% url(src/main/resourcesces/images/pencil.svg)}.cif-demo .icon__root.icon__root_trash{background:no-repeat 50% url(src/main/resourcesces/images/trash.svg)}.cif-demo .icon__root.icon__root_lock{background:no-repeat 50% url(src/main/resourcesces/images/lock.svg)}.cif-demo .cmp-Minicart__emptyMiniCartBody__emptyTitle{font-size:1.5rem;line-height:1.25;font-style:italic;margin-bottom:1.5rem}.cif-demo .clickable__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;padding:0;pointer-events:auto;text-align:center;white-space:nowrap}.cif-demo .errorDisplay__root{background-color:#ffe2ea;border:1px solid #c0123f;border-radius:2px;color:#c0123f;font-size:.875rem;line-height:1.25rem;margin:1rem 0;max-height:5rem;overflow-x:auto;padding:0}.cif-demo .errorDisplay__body{display:inline-block;font-size:.875rem;line-height:1.25rem;margin:1rem}.cif-demo .createAccount__root{display:grid;gap:.5rem;justify-items:stretch;padding:0 1.5rem}.cif-demo .createAccount__actions{display:grid;justify-items:center;margin-top:1rem;padding:1rem 0}.cif-demo .createAccount__lead{margin:1rem 0;text-align:center}.cif-demo .input__helpText{font-size:.7rem;margin:.4rem 0}.cif-demo .input__requiredSymbol{background-color:#000;width:.4em;height:.4em;border-radius:50%;display:inline-block;vertical-align:top}.cif-demo .input__hint{color:#707070}.cif-demo .input__error{color:red}.cif-demo .input__success{color:green}.cif-demo .input__root{padding:.5rem 1.5rem}.cif-demo .input__input{width:100%;height:1.85rem;border:1px solid #000;padding:1rem;margin:.2rem 0 0;outline:none}.cif-demo .input__label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.85rem}.cif-demo .input__labelFocused{color:#007378;-webkit-transition:.2s;transition:.2s}.cif-demo .input__rootFocused{background-color:#e0f0f1;-webkit-transition:.2s;transition:.2s}.cif-demo .signIn__signInDivider{border:solid #e0e0e0;border-width:0 0 1px;margin:2rem 1rem}.cif-demo .signIn__showCreateAccountButton,.cif-demo .signIn__signInButton{text-align:center;margin:1rem 0}.cif-demo .signIn__forgotPassword{display:block;text-decoration:underline;color:#c0123f;font-size:.8rem;margin:2rem auto 0}.cif-demo .forgotPasswordForm__form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cif-demo .forgotPasswordForm__buttonContainer{-ms-flex-item-align:center;align-self:center;margin-top:2rem}.cif-demo .formSubmissionSuccessful__text{padding:.5rem 1.5rem;font-size:.875rem;font-weight:300;line-height:1.25rem;text-align:center;margin-bottom:2rem;overflow-wrap:break-word}.cif-demo .formSubmissionSuccessful__buttonContainer{margin:0 auto;text-align:center}.cif-demo .forgotPassword__instructions{padding:.5rem 1.5rem 0;margin-bottom:1.5rem;font-size:.875rem;font-weight:300;line-height:1.25rem}.cif-demo .categoryLeaf__root{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;padding:0 1.25rem;width:100%}.cif-demo .categoryLeaf__inactive{position:fixed;visibility:hidden}.cif-demo .categoryLeaf__text{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid #e0e0e0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:auto;flex:auto;height:3.5rem;padding:0 .25rem}.cif-demo .categoryTree__inactive{position:fixed;visibility:hidden}.cif-demo .navHeader__title{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;font-weight:400;text-transform:uppercase}.cif-demo .navigation__root{background-color:#fff;bottom:0;display:grid;grid-template-rows:auto 1fr auto;left:0;opacity:0;position:fixed;top:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition-duration:192ms;transition-duration:192ms;-webkit-transition-timing-function:cubic-bezier(.4,0,1,1);transition-timing-function:cubic-bezier(.4,0,1,1);-webkit-transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,visibility,-webkit-transform;transition-property:opacity,transform,visibility;transition-property:opacity,transform,visibility,-webkit-transform;visibility:hidden;width:100%;max-width:360px;z-index:3}.cif-demo .navigation__header{-ms-flex-line-pack:center;align-content:center;background-color:#f6f6f6;-webkit-box-shadow:0 1px #e0e0e0;box-shadow:0 1px #e0e0e0;display:grid;grid-auto-columns:3.5rem;grid-auto-flow:column;grid-auto-rows:3.5rem;grid-template-columns:3.5rem 1fr 3.5rem;height:3.5rem;position:relative;z-index:1}.cif-demo .navigation__body{min-height:0;overflow:auto}.cif-demo .navigation__footer{-webkit-box-shadow:0 -1px #e0e0e0;box-shadow:0 -1px #e0e0e0}@media (min-width:1024px){.cif-demo .navigation__footer{display:none}}.cif-demo .navigation__authBar{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;height:5.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1.5rem 1rem 1rem;width:100%}.cif-demo .navigation__userChip{-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#f6f6f6;display:grid;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;grid-template-rows:3.5rem;height:4rem;padding:0 1rem;width:100%}.cif-demo .navigation__userEmail{color:#707070;font-size:.8125rem;line-height:1rem}.cif-demo .navigation__userAvatar,.cif-demo .navigation__userMore{height:3.5rem;width:3.5rem}.cif-demo .navigation__signIn{-webkit-animation-duration:244ms;animation-duration:244ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;background:#fff;bottom:0;left:0;padding-top:4.5rem;position:absolute;right:0;top:0;overflow-y:auto}.cif-demo .navigation__signIn_open{-webkit-animation-name:navigation__slidein;animation-name:navigation__slidein}.cif-demo .navigation__signIn_closed{-webkit-animation-name:navigation__slideout;animation-name:navigation__slideout}.cif-demo .navigation__form_open{-webkit-animation-name:navigation__slideinSide;animation-name:navigation__slideinSide}.cif-demo .navigation__form_closed{-webkit-animation-name:navigation__slideoutSide;animation-name:navigation__slideoutSide}.cif-demo .navigation__root_open{-webkit-box-shadow:1px 0 #e0e0e0;box-shadow:1px 0 #e0e0e0;opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition-duration:224ms;transition-duration:224ms;-webkit-transition-timing-function:cubic-bezier(0,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);visibility:visible}.cif-demo .navigation__mask{background-color:#000;cursor:pointer;display:block;height:100vh;left:0;opacity:0;position:fixed;top:0;-webkit-transition-duration:192ms;transition-duration:192ms;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;-webkit-transition-timing-function:linear;transition-timing-function:linear;visibility:hidden;width:100vw;z-index:2;-webkit-appearance:none}.cif-demo .navigation__mask_active{opacity:.5;-webkit-transition-duration:224ms;transition-duration:224ms;visibility:visible}@-webkit-keyframes navigation__slidein{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes navigation__slidein{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes navigation__slideout{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes navigation__slideout{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes navigation__slideinSide{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes navigation__slideinSide{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes navigation__slideoutSide{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes navigation__slideoutSide{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.cif-demo .myAccountMenuTrigger__userChip{-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#f6f6f6;display:grid;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;grid-template-columns:1fr 3.5rem;grid-template-rows:3.5rem;height:4rem;width:100%}.cif-demo .myAccountMenuTrigger__userEmail{color:#707070;font-size:.8125rem;line-height:1rem}.cif-demo .myAccountMenuTrigger__userMore{height:3.5rem;width:3.5rem}.cif-demo .myAccountMenuTrigger__menuOpen{position:fixed;z-index:5;background-color:#fff;-webkit-transition:top 244ms;transition:top 244ms;top:0;bottom:0;left:0;right:0;height:100%}.cif-demo .myAccountMenuTrigger__menuClosed{top:101%}.cif-demo .userInformation__root{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cif-demo .userInformation__userInformationContainer{font-size:.875rem;font-weight:300;line-height:1rem}.cif-demo .userInformation__email{color:#707070;font-size:.8125rem;line-height:1rem}.cif-demo .userInformation__iconContainer{margin:0 1rem 0 1.25rem}.cif-demo .menuItem__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:3.5rem;border-bottom:1px solid #e0e0e0;font-size:.875rem;font-weight:300;line-height:.875rem}.cif-demo .myAccountMenu__list{padding:0 1.5rem}.cif-demo .myAccountMenu__signOutTitle{color:#ff6333}.cif-demo .myAccountMenu__rewardsPoints{font-size:.625rem;font-weight:300;line-height:.875rem}.cif-demo .header__closeButton{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:3.5rem}.cif-demo .myAccountMenuPage__root{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;background-color:#fff}.cif-demo .myAccountMenuPage__logoContainer{margin:2rem auto}.cif-demo .categoryTree__root--shadow{display:none}.cif-demo .cmp-navigation__item--active .categoryLeaf__text,.cif-demo .cmp-navigation__item--active .icon__root--active{color:#c53457}.cif-demo .categoryLeaf__root--link{padding-left:0;padding-right:0}.cif-demo .categoryLeaf__root--box{border-bottom:1px solid #e0e0e0;padding-left:0;padding-right:0}.cif-demo .thumbnail__root{border:1px solid #212121;border-radius:50%;height:.875rem;width:.875rem;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;outline:none}.cif-demo .thumbnail__rootSelected{background-color:#212121}.cif-demo .thumbnail__image{display:none}@media (min-width:1024px){.cif-demo .thumbnail__root{border:0;border-radius:0;height:auto;width:auto}.cif-demo .thumbnail__rootSelected{-webkit-box-shadow:0 0 10px 0 #007378;box-shadow:0 0 10px 0 #007378;background-color:#212121}.cif-demo .thumbnail__image{background-color:#f6f6f6;border-radius:2px;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;display:block;height:auto;width:100%}}.cif-demo .thumbnailList__root{-ms-flex-line-pack:stretch;align-content:stretch;display:grid;grid-auto-flow:column;grid-gap:1rem;grid-template-columns:repeat(auto-fit,1rem);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:1rem;z-index:1}@media (min-width:1024px){.cif-demo .thumbnailList__root{-ms-flex-line-pack:start;align-content:start;grid-auto-flow:row;grid-gap:1.5rem;grid-template-columns:1fr;margin-top:0}}.cif-demo .carousel__root{display:grid;grid-template-areas:"main" "thumbs";grid-template-columns:auto;grid-template-rows:auto}@media (min-width:1024px){.cif-demo .carousel__root{grid-gap:1.5rem;grid-template-areas:"thumbs main";grid-template-columns:17fr 80fr}}.cif-demo .carousel__imageContainer{display:grid;grid-area:main;grid-template-columns:repeat(3,1fr)}.cif-demo .carousel__currentImage{background-color:#f6f6f6;border-radius:2px;width:100%;grid-area:1/1/2/4}.cif-demo .carousel__chevron-left,.cif-demo .carousel__chevron-right{display:-webkit-box;display:-ms-flexbox;display:flex;outline:none;z-index:1}.cif-demo .carousel__chevron-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;grid-area:1/1/2/2;margin-left:1.625rem}.cif-demo .carousel__chevron-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;grid-area:1/3/2/4;margin-right:1.625rem}@media (min-width:1024px){.cif-demo .carousel__chevron-left,.cif-demo .carousel__chevron-right{display:none}}.cif-demo .select__wrapper{display:inline-grid;grid-auto-flow:column;grid-template-areas:"input icon";grid-template-columns:auto 2.25rem;height:2.25rem}.cif-demo .select__input{grid-area:input-start/input-start/input-end/icon-end;padding-right:calc(2.25rem - 1px)}.cif-demo .quantity__root{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cif-demo .richText__root{font-size:.875rem;line-height:1.25rem;padding:0 .5rem}.cif-demo .richText__root p{margin:0 0 1rem}.cif-demo .richText__root ul{list-style-type:disc;margin:0 0 1rem;padding-left:2.5rem}.cif-demo .option__root{border-bottom:1px solid #e0e0e0;margin:0 1.5rem;padding:1.75rem 0}.cif-demo .option__title{font-size:1rem;font-weight:600;line-height:1.5;margin-bottom:1.5rem}.cif-demo .productFullDetail__root{display:block}@media (min-width:1024px){.cif-demo .productFullDetail__root{-webkit-box-align:start;-ms-flex-align:start;align-items:start;display:grid;grid-auto-flow:row;grid-template-areas:"images title" "images actions" "images options" "images quantity" "images cart" "images .";grid-template-columns:1.5625fr 1fr;grid-template-rows:repeat(5,-webkit-min-content) 1fr [fold];grid-template-rows:repeat(5,min-content) 1fr [fold];padding:2.5rem 4rem}}.cif-demo .productFullDetail__section{border:solid #e0e0e0;border-width:0 0 1px;margin:0 1.5rem;padding:1.5rem 0}.cif-demo .productFullDetail__section .required{color:#c0123f}.cif-demo .productFullDetail__sectionTitle{font-size:1rem;font-weight:600;line-height:1.5;margin-bottom:1.5rem;text-align:center}.cif-demo .productFullDetail__customizeBundle,.cif-demo .productFullDetail__sectionTitle{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cif-demo .productFullDetail__customizeBundle{grid-area:cart}.cif-demo .productFullDetail__title{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:grid;grid-area:title;grid-gap:1rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;line-height:1.5;padding:1rem 1.5rem}@media (min-width:1024px){.cif-demo .productFullDetail__title{padding:1.5rem}}.cif-demo .productFullDetail__productName{font-size:1rem;font-weight:600}@media (min-width:1024px){.cif-demo .productFullDetail__productName{font-size:1.3125rem;font-weight:400}}.cif-demo .productFullDetail__title .price{text-align:right}.cif-demo .productFullDetail__root .price{display:block}.cif-demo .productFullDetail__root .price .regularPrice{text-decoration:line-through;font-size:.8rem}.cif-demo .productFullDetail__root .price .discountedPrice{font-weight:700;color:#007378;font-size:1.2rem}.cif-demo .productFullDetail__root .price .you-save{font-size:.9rem;color:#707070}.cif-demo .productFullDetail__root .price .you-save:before{display:block;content:" "}.cif-demo .productFullDetail__imageCarousel{grid-area:images;grid-column:1/2;grid-row:1/fold;margin:0 auto;max-width:40pc}@media (min-width:1024px){.cif-demo .productFullDetail__imageCarousel{margin:0;max-width:50pc;padding:1.5rem 0}}.cif-demo .productFullDetail__options{grid-area:options}.cif-demo .productFullDetail__quantity{grid-area:quantity}.cif-demo .productFullDetail__groupedProducts table{width:100%}.cif-demo .productFullDetail__groupedProducts th,.cif-demo td{padding:15px}.cif-demo .productFullDetail__groupedProducts th,.cif-demo tr:nth-child(2n){background-color:#f2f2f2}.cif-demo .productFullDetail__groupedProducts .price{margin-top:5px;font-weight:700}.cif-demo .productFullDetail__bundleProduct .priceInfo{float:right}.cif-demo .productFullDetail__bundleProduct .bundlePrice{font-weight:700}.cif-demo .bundleProduct__quantityTitle{font-size:1rem;font-weight:600;line-height:1.5;margin:1.5rem 0 .5rem}.cif-demo .productFullDetail__bundleProduct select[multiple]{width:75%;height:unset}.cif-demo .productFullDetail__bundleProduct .bundleOptionSelect__root{width:75%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cif-demo .productFullDetail__bundleProduct .option__quantity{-moz-appearance:textfield;margin:0;height:34px;text-align:center;width:54px;padding:1px 9px}.cif-demo .productFullDetail__bundleProduct .option__quantity::-webkit-inner-spin-button,.cif-demo .productFullDetail__bundleProduct .option__quantity::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cif-demo .productFullDetail__cartActions{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;grid-area:cart;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (min-width:1024px){.cif-demo .productFullDetail__cartActions{border-bottom-width:0}}.cif-demo .productFullDetail__description{grid-column:1/span 1;grid-row:fold/span 1}@media (min-width:1024px){.cif-demo .productFullDetail__description{-ms-flex-item-align:stretch;align-self:stretch;border-top-width:1px;margin:0;padding-left:1.5rem;padding-right:1.5rem}}.cif-demo .productFullDetail__details{grid-column:2/span 1;grid-row:fold/span 1}@media (min-width:1024px){.cif-demo .productFullDetail__details{-ms-flex-item-align:stretch;align-self:stretch;border-top-width:1px;margin:0;padding-left:1.5rem;padding-right:1.5rem}}.cif-demo .productFullDetail__related{border-bottom-width:0;grid-column:1/span 2}.cif-demo .tile__root{border:1px solid #212121;border-radius:2px;height:3rem;margin-left:1rem;margin-top:1rem;min-width:3rem;padding:0 .75rem}@media (min-width:1024px){.cif-demo .tile__root{height:2rem;min-width:2rem;padding:0 .5rem}}.cif-demo .tile__root_selected{background-color:#212121;color:#fff}.cif-demo .swatch__root{background-color:#f6f6f6;border-color:rgba(0,0,0,.1);color:#fff;padding:0}.cif-demo .swatch__root_selected{background-image:linear-gradient(-45deg,rgba(0,0,0,.2),transparent)}.cif-demo .tileList__root{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-1rem;margin-top:-1rem}.cif-demo .productcarousel__root{overflow:hidden}.cif-demo .productcarousel__root .price{font-size:.875rem;line-height:1rem;margin:.5rem 0;min-height:1rem}.cif-demo .productcarousel__root .price .regularPrice{text-decoration:line-through;font-size:.8rem}.cif-demo .productcarousel__root .price .discountedPrice{font-weight:700;color:#007378;font-size:1.2rem}.cif-demo .productcarousel__root :after,.cif-demo .productcarousel__root :before{content:"";display:table}.cif-demo .productcarousel__root :after{clear:both}.cif-demo .productcarousel__title{text-align:center;margin-bottom:10px;color:#333}.cif-demo .product__image{max-width:15pc;max-height:15pc}.cif-demo .productcarousel__container{position:relative;margin:25px auto;width:15pc}@media screen and (min-width:790px){.cif-demo .productcarousel__container{width:45pc}}@media screen and (min-width:1090px){.cif-demo .productcarousel__container{width:60pc}}@media screen and (min-width:1380px){.cif-demo .productcarousel__container{width:75pc}}@media screen and (min-width:1650px){.cif-demo .productcarousel__container{width:90pc}}.cif-demo .card{border:10px solid #fff;float:left;font-size:20px;text-align:center;width:15pc}.cif-demo .productcarousel__cardscontainer{margin:auto}.cif-demo .productcarousel__cardscontainer :after,.cif-demo .productcarousel__cardscontainer :before{content:"";display:table}.cif-demo .productcarousel__cardscontainer :after{clear:both}.cif-demo .product__card{float:left}.cif-demo .product__card__image{height:243px}.cif-demo .productcarousel__btn{background:transparent;border:0;-webkit-box-shadow:none;box-shadow:none;outline:none;cursor:pointer;height:20px;margin-top:-25px;position:absolute;top:50%;width:20px}.cif-demo .productcarousel__btn--next{border-bottom:8px solid #aaa;border-right:8px solid #aaa;right:0;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.cif-demo .productcarousel__btn--prev{border-bottom:8px solid #aaa;border-left:8px solid #aaa;left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}@media screen and (max-width:769px){.cif-demo .productcarousel__btn--next{right:8%}.cif-demo .productcarousel__btn--prev{left:8%}}.cif-demo .item__root .item__name,.cif-demo .item__root .price{font-size:.875rem;line-height:1rem;margin:.5rem 0;min-height:1rem}.cif-demo .item__root .price .regularPrice{text-decoration:line-through;font-size:.8rem}.cif-demo .item__root .price .discountedPrice{font-weight:700;color:#007378;font-size:1.2rem}.cif-demo .item__images{display:grid;grid-template-areas:"main"}.cif-demo .item__image{display:block;grid-area:main;height:auto;opacity:1;-webkit-transition-duration:512ms;transition-duration:512ms;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;visibility:visible;width:100%}.cif-demo .item__imagePlaceholder{background-color:#f6f6f6}.cif-demo .item__image_pending{opacity:0;visibility:hidden}.cif-demo .item__name_pending{background-color:#f6f6f6}.cif-demo .item__price_pending{background-color:#f6f6f6;width:3rem}.cif-demo .gallery__root{display:grid;grid-template-areas:"actions" "items";grid-template-columns:1fr;line-height:1}.cif-demo .category__style_grid .gallery__items{-ms-flex-line-pack:start;align-content:start;display:grid;grid-gap:1rem;grid-template-columns:repeat(3,1fr);margin-bottom:10px}.cif-demo .category__style_list .gallery__items{display:block;margin-bottom:10px}@media (max-width:640px){.cif-demo div .gallery__items{grid-template-columns:repeat(2,1fr)}}.cif-demo .category__root{padding:1rem}.cif-demo .category__root-message{text-align:center}.cif-demo .category__title{font-size:1.5rem;font-weight:400;margin:0 0 1rem;padding:0 .5rem .5rem}.cif-demo .category__pagination{position:-webkit-sticky;position:sticky;bottom:0}.cif-demo .category__categoryTitle{color:#212121;font-size:1.375rem;font-weight:300;line-height:1.375rem;text-align:center}.cif-demo .category__pagination_root{display:grid;grid-template-rows:1fr;grid-column-gap:.7rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:1rem;padding-bottom:1rem;background-color:#fff;border-top:1px solid #ccc;text-align:center}.cif-demo .category__pagination_navbutton-inactive{color:#999}.cif-demo .category__pagination_navbutton-arrow{display:grid;padding-bottom:1px}.cif-demo .category__pagination_tilebutton{grid-row-start:1;outline:none}.cif-demo .category__pagination_tilebutton-text{border:0;padding:.1rem .2rem}.cif-demo .category__pagination_icon-root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-touch-action:manipulation;touch-action:manipulation}.cif-demo .category__pagination_tilebutton-marker{border:1px solid;border-radius:2px}.cif-demo .category__pagination_button{background:none;border:0;cursor:pointer;font-family:Muli,-apple-system,BlinkMacSystemFont,sans-serif;font-size:100%;padding:0;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}.cif-demo .category__pagination_button :disabled{cursor:default;-ms-touch-action:none;touch-action:none}.cif-demo .category__image{min-height:460px;padding:20px 0;margin-bottom:40px;background:#f6f6f6 50% no-repeat;background-size:cover;position:relative;text-align:center}.cif-demo .results__count{color:#212121;font-size:1rem;text-align:center;line-height:1rem;margin-bottom:1.5rem;font-weight:200}.cif-demo .loadmore__button{display:block;margin:5px auto;background-color:#000;color:#fff;padding:5px 10px;border-radius:10px}.cif-demo .loadmore__spinner{display:none;width:40px;height:40px;margin:0 auto}.cif-demo .loadmore__spinner:after{content:" ";display:block;width:2pc;height:2pc;border-radius:50%;border-color:#d1d1d1 transparent;border-style:solid;border-width:6px;-webkit-animation:loadmore__spinner 1.2s linear infinite;animation:loadmore__spinner 1.2s linear infinite}@-webkit-keyframes loadmore__spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadmore__spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.cif-demo .productteaser .item__root{position:relative}.cif-demo .productteaser .item__images{display:grid;grid-template-areas:"main"}.cif-demo .productteaser .item__image{border:1px solid #3498db;display:block;grid-area:main;height:auto;opacity:1;-webkit-transition-duration:512ms;transition-duration:512ms;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;visibility:visible;width:100%}.cif-demo .productteaser .item__name{top:40%;text-transform:uppercase;font-size:22px}.cif-demo .productteaser .item__name,.cif-demo .productteaser .price{position:absolute;display:block;left:20%;color:#fff;font-weight:900;text-shadow:2px 2px 4px rgba(0,0,0,.9)}.cif-demo .productteaser .price{top:45%;font-size:18px}.cif-demo .productteaser .price .regularPrice{text-decoration:line-through;font-size:.8rem}.cif-demo .productteaser .price .discountedPrice{font-weight:700;color:#007378;font-size:1.2rem}.cif-demo .productteaser .item__badge{width:150px;height:150px;right:0;overflow:hidden;position:absolute}.cif-demo .productteaser .item__badge :after,.cif-demo .productteaser .item__badge :before{position:absolute;z-index:-1;content:"";display:block;border-color:transparent transparent #2980b9 #2980b9;border-style:solid;border-width:5px}.cif-demo .productteaser .item__badge :before{top:0;left:0}.cif-demo .productteaser .item__badge :after{bottom:0;right:0}.cif-demo .productteaser .item__badge span{position:absolute;display:block;width:225px;padding:15px 0;background-color:#3498db;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.1);box-shadow:0 5px 10px rgba(0,0,0,.1);color:#fff;font:700 18px/1 Lato,sans-serif;text-shadow:0 1px 1px rgba(0,0,0,.2);text-transform:uppercase;text-align:center;left:-25px;top:30px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.cif-demo .productteaser .productteaser__cta{text-align:center;padding:10px 0}@media (max-width:768px){.cif-demo .productteaser .item__name{font-size:15px}.cif-demo .productteaser .item__price{top:60%;font-size:10px}}@media (max-width:992px){.cif-demo .productteaser .item__name{font-size:18px}.cif-demo .productteaser .item__price{top:60%;font-size:14px}}.cif-demo .search__root{display:grid;grid-template-columns:minmax(15pc,1fr) auto;grid-column-gap:2rem;grid-row-gap:1rem}.cif-demo .filterSection-header{padding:1.5rem 0}.cif-demo .filterSection-title{font-size:14px;font-weight:800;line-height:14px}.cif-demo .filterBlock__root{display:grid;border:solid #e0e0e0;border-width:1px 0 0}.cif-demo .filterBlock__toggler{opacity:0}.cif-demo .filterBlock__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:grid;grid-auto-flow:column;grid-template-columns:1fr auto;min-height:3rem;cursor:pointer}.cif-demo .filterBlock-name{height:1.5rem;line-height:1.5rem;text-align:left;font-weight:600}.cif-demo label{cursor:pointer}.cif-demo .filterBlock__toggler:checked~.filterList-items{display:grid}.cif-demo .filterBlock__toggler:checked+.filterBlock__header>.icon-closed{display:none}.cif-demo .filterBlock__toggler:checked+.filterBlock__header>.icon-open{display:block}.cif-demo .filterList-items{display:none;gap:1rem;grid-template-columns:100%;padding:.5rem 0}.cif-demo .filterDefault-icon{background-color:#fff;border:1px solid #212121;width:1rem;height:1rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border-radius:3px;margin-right:1rem}.cif-demo .currentFilters__root{display:grid;gap:.5rem;grid-auto-flow:row;padding:.5rem 0}.cif-demo .currentFilter__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #e0e0e0;border-radius:4px;display:inline-grid;gap:.5rem;grid-auto-flow:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.2rem .5rem;white-space:nowrap}.cif-demo .icon-closed{display:block}.cif-demo .icon-open{display:none}.cif-demo .search__filters{grid-row-start:1;grid-row-end:2 span}.cif-demo .sort__fields{float:right}.cif-demo .sort__fields label{font-size:.8rem;font-weight:700}.cif-demo .sort__fields select{font-size:1rem}.cif-demo .button__root{background:none;border:1px solid rgba(var(--color),1);border-radius:1.5rem;color:rgba(var(--color),1);font-size:.75rem;font-weight:600;height:2rem;min-width:7.5rem;padding:0 1rem;-webkit-transition-duration:384ms;transition-duration:384ms;-webkit-transition-property:background-color,color;transition-property:background-color,color;-webkit-transition-timing-function:var(--venia-anim-standard);transition-timing-function:var(--venia-anim-standard);--color:var(--venia-text)}.cif-demo .button__root :hover{--color:var(--venia-teal)}.cif-demo .button__root :focus{-webkit-box-shadow:0 0 0 2px #d4f3ee,0 0 .5rem 2px rgba(0,115,120,.2);box-shadow:0 0 0 2px #d4f3ee,0 0 .5rem 2px rgba(0,115,120,.2);outline:none;-webkit-transition-duration:128ms;transition-duration:128ms;--color:var(--venia-teal)}.cif-demo .button__root :active{-webkit-transition-duration:128ms;transition-duration:128ms;--color:var(--venia-teal-dark)}.cif-demo .button__root :disabled{pointer-events:none;--color:var(--venia-grey-dark)}.cif-demo .button__filled{background-color:rgba(var(--color),1);color:#fff}.cif-demo .button__content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:inline-grid;gap:.5rem;grid-auto-flow:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center}.cif-demo .field__root{color:#212121;display:grid}.cif-demo .field__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.875rem;font-weight:600;line-height:1rem;padding:.375rem .125rem}.cif-demo .field__input{background:#fff;border:1px solid #707070;border-radius:2px;color:#212121;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;font-size:1rem;height:2.25rem;margin:0;padding:calc(.375rem - 1px) calc(.625rem - 1px);width:100%;-webkit-appearance:none}.cif-demo .field__input :focus{border-color:#007378;-webkit-box-shadow:0 0 0 2px #d4f3ee,0 0 .5rem 2px rgba(0,115,120,.2);box-shadow:0 0 0 2px #d4f3ee,0 0 .5rem 2px rgba(0,115,120,.2);outline:none}.cif-demo .fieldIcons__root{display:inline-grid;grid-auto-flow:column;grid-template-areas:"before input after";grid-template-columns:auto 1fr auto;height:2.25rem}.cif-demo .fieldIcons__input{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;grid-column:before-start/after-end;grid-row:input-start/input-end}.cif-demo .fieldIcons__input>input{padding-left:calc(1.875rem*var(--iconsBefore) - -.375rem - 1px);padding-right:calc(1.875rem*var(--iconsAfter) - -.375rem - 1px)}.cif-demo .fieldIcons__after,.cif-demo .fieldIcons__before{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;width:2.25rem}.cif-demo .fieldIcons__after:empty,.cif-demo .fieldIcons__before:empty{display:none}.cif-demo .fieldIcons__before{grid-area:before}.cif-demo .fieldIcons__after{grid-area:after}.cif-demo .message__root{color:#212121;font-size:.875rem;font-weight:400;line-height:1rem;padding:.375rem .125rem .125rem}.cif-demo .message__root:empty{display:none}.cif-demo .message__root_error{color:#c0123f}.cif-demo main.container{padding:.5em 1em}.cif-demo .footer__root{background-color:#f6f6f6;border-top:1px solid #e0e0e0;color:#202020;margin-top:1rem;padding:0 1rem}.cif-demo .footer__tile{border-bottom:1px solid #e0e0e0;padding:1rem 2rem}.cif-demo .footer__tileTitle{font-size:1.25rem;margin:1rem 0}.cif-demo .footer__tileBody{font-size:.875rem;line-height:1.25rem;margin:1rem 0}.cif-demo .footer__copyright{display:block;color:#707070;font-size:.75rem;padding:1.5rem 2rem;text-align:center}.cif-demo .header{position:-webkit-sticky;position:sticky;top:0;z-index:10}.cif-demo .icon__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-touch-action:manipulation;touch-action:manipulation}.cif-demo .cartCounter__root{font-weight:600;margin-left:.3rem}.cif-demo .cartTrigger__root{height:3rem;min-width:3rem}.cif-demo .navTrigger__root{height:3rem;width:3rem}.cif-demo .searchTrigger__root{-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:224ms;transition-duration:224ms;-webkit-transition-timing-function:cubic-bezier(0,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);height:3rem;width:3rem}.cif-demo .searchTrigger__open{color:#007378}.cif-demo .header__root{background-color:#f6f6f6;-webkit-box-shadow:0 1px #e0e0e0;box-shadow:0 1px #e0e0e0;display:grid;grid-auto-columns:100%;grid-auto-flow:row;grid-auto-rows:auto;grid-row-gap:.5rem;position:-webkit-sticky;position:sticky;top:0;z-index:10}.cif-demo .header__toolbar{-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:grid;grid-template-areas:"primary title secondary";grid-template-columns:1fr auto 1fr;grid-template-rows:3rem;justify-items:center;min-height:3.5rem;padding:0 1rem}.cif-demo .header__accountTrigger,.cif-demo .header__cartTrigger,.cif-demo .header__navTrigger{height:3rem;width:3rem}.cif-demo .header__accountTrigger{position:relative;display:inline-block}@media (max-width:1023px){.cif-demo .header__accountTrigger{display:none}}.cif-demo .header__logo{grid-area:title}.cif-demo .header__primaryActions{grid-area:primary;justify-self:start}.cif-demo .header__secondaryActions{grid-area:secondary;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;justify-items:end}@media (max-width:1023px){.cif-demo .header__secondaryActions{grid-template-columns:1fr 1fr}}.cif-demo .indicator__root{-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:grid;gap:3rem;height:calc(100% - 6rem);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center;margin:3rem 0;width:100%}.cif-demo .indicator__message{color:#707070;font-size:1rem;letter-spacing:.25rem;text-transform:uppercase}.cif-demo .indicator__indicator{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:indicator__pulse;animation-name:indicator__pulse;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1)}@-webkit-keyframes indicator__pulse{0%{-webkit-filter:grayscale(1);filter:grayscale(1);-webkit-transform:scale(.75) rotate(-540deg);transform:scale(.75) rotate(-540deg)}to{-webkit-filter:grayscale(0);filter:grayscale(0);-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg)}}@keyframes indicator__pulse{0%{-webkit-filter:grayscale(1);filter:grayscale(1);-webkit-transform:scale(.75) rotate(-540deg);transform:scale(.75) rotate(-540deg)}to{-webkit-filter:grayscale(0);filter:grayscale(0);-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg)}}.cif-demo .suggestedCategories__root{padding:0 1.5rem 1rem}.cif-demo .suggestedCategories__item{padding-bottom:.72rem}.cif-demo .suggestedCategories__item:last-child{padding-bottom:0}.cif-demo .suggestedProduct__root{-ms-flex-line-pack:start;align-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:grid;grid-gap:.375rem 1rem;grid-template-areas:"image name price";grid-template-columns:60px 1fr;grid-template-rows:-webkit-min-content;grid-template-rows:min-content;padding-bottom:1rem}.cif-demo .suggestedProduct__root:last-child{padding-bottom:0}.cif-demo .suggestedProduct__productImage{display:block;height:auto;width:100%}.cif-demo .suggestedProduct__productName{padding-right:50%;word-break:break-word}.cif-demo .suggestedProducts__items{padding:0 1.5rem}.cif-demo .suggestedProducts__title{padding-bottom:1rem;text-transform:uppercase}.cif-demo .suggestedProducts__titleText{display:block;border-bottom:2px solid #e0e0e0;padding:.5rem 1.5rem}.cif-demo .autocomplete__root{border:1px solid #e0e0e0;font-size:.8125rem;-webkit-box-shadow:0 3px 10px rgba(0,0,0,.2);box-shadow:0 3px 10px rgba(0,0,0,.2);background-color:#fff;z-index:2;padding:1rem 0}.cif-demo .autocomplete__statusContent{padding:.5rem 1.5rem}.cif-demo .searchBar__root{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 1rem}.cif-demo .searchBar__root_open{display:-webkit-box;display:-ms-flexbox;display:flex}.cif-demo .searchBar__form{display:grid;justify-items:stretch;margin-bottom:.5rem}.cif-demo .searchBar__form,.cif-demo .searchBar__searchInner{-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.cif-demo .searchBar__searchInner{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:24rem}.cif-demo .searchBar__SearchAutocompleteWrapper{text-align:left;margin:-.5rem 0 .5rem;position:absolute;top:100%;left:0;right:0}.cif-demo .cmp-navigation__group{list-style-type:revert;padding:revert;} \ No newline at end of file +/* + * - To prefix the css classes with .cif-demo use: ^([ ]*)\. $1\.cif-demo \. + * - Also remove all body, html stylings and prefix any other element style with .cif-demo as well + * - move the :root {} variable definitions to the top + */ +@import url(https://fonts.googleapis.com/css?family=Muli); + + + +:root { + --venia-anim-bounce : cubic-bezier(0.5, 1.8, 0.9, 0.8); + --venia-anim-in : cubic-bezier(0, 0, 0.2, 1); + --venia-anim-out : cubic-bezier(0.4, 0, 1, 1); + --venia-anim-standard : cubic-bezier(0.4, 0, 0.2, 1); + --venia-border : 224, 224, 224; + --venia-error : 192, 18, 63; + --venia-error-alt : 255, 226, 234; + --venia-font : Muli, -apple-system, BlinkMacSystemFont, sans-serif; + --venia-grey : 246, 246, 246; + --venia-grey-dark : 209, 209, 209; + --venia-orange : 241, 99, 33; + --venia-teal : 0, 115, 120; + --venia-teal-alt : 224, 240, 241; + --venia-teal-dark : 0, 104, 108; + --venia-teal-light : 212, 243, 238; + --venia-text : 33, 33, 33; + --venia-text-alt : 112, 112, 112; + --venia-text-hint : 158, 158, 158; + --venia-text-spot : 255, 99, 51; + --venia-warning-dark : 249, 93, 94; + --venia-warning-light : 254, 229, 232; + --venia-global-anim-bounce : cubic-bezier(0.5, 1.8, 0.9, 0.8); + --venia-global-anim-in : cubic-bezier(0, 0, 0.2, 1); + --venia-global-anim-out : cubic-bezier(0.4, 0, 1, 1); + --venia-global-anim-standard : cubic-bezier(0.4, 0, 0.2, 1); + --venia-global-color-blue-100 : 194 200 255; + --venia-global-color-blue-400 : 61 132 255; + --venia-global-color-blue-500 : 51 109 255; + --venia-global-color-blue-600 : 41 84 255; + --venia-global-color-blue-700 : 31 57 255; + --venia-global-color-blue-800 : 23 43 196; + --venia-global-color-gray-50 : 255 255 255; + --venia-global-color-gray-75 : 250 250 250; + --venia-global-color-gray-100 : 244 245 245; + --venia-global-color-gray-200 : 234 235 235; + --venia-global-color-gray-300 : 223 225 226; + --venia-global-color-gray-400 : 181 184 186; + --venia-global-color-gray-500 : 149 154 157; + --venia-global-color-gray-600 : 118 123 127; + --venia-global-color-gray-700 : 84 93 99; + --venia-global-color-gray-800 : 51 63 71; + --venia-global-color-gray-900 : 23 32 38; + --venia-global-color-gray : var(--venia-global-color-gray-100); + --venia-global-color-gray-dark : var(--venia-global-color-gray-300); + --venia-global-color-gray-darker : var(--venia-global-color-gray-600); + --venia-global-color-green-400 : 51 171 132; + --venia-global-color-green-500 : 45 157 120; + --venia-global-color-green-600 : 38 142 108; + --venia-global-color-green-700 : 18 128 92; + --venia-global-color-orange : 241 99 33; + --venia-global-color-red-400 : 236 91 98; + --venia-global-color-red-500 : 227 72 80; + --venia-global-color-red-600 : 215 55 63; + --venia-global-color-red-700 : 201 37 45; + --venia-global-color-red-800 : 161 30 36; + --venia-global-color-teal : var(--venia-global-color-blue-400); + --venia-global-color-teal-dark : var(--venia-global-color-blue-600); + --venia-global-color-teal-light : var(--venia-global-color-gray-100); + --venia-global-color-background : var(--venia-global-color-gray-50); + --venia-global-color-border : var(--venia-global-color-gray-300); + --venia-global-color-error : var(--venia-global-color-red-700); + --venia-global-color-text : var(--venia-global-color-gray-900); + --venia-global-color-text-alt : var(--venia-global-color-gray-darker); + --venia-global-color-text-hint : var(--venia-global-color-gray-500); + --venia-global-color-warning-dark : var(--venia-global-color-red-700); + --venia-global-color-warning-light : var(--venia-global-color-gray-100); + --venia-global-fontFamily-sansSerif: "Muli", sans-serif; + --venia-global-fontFamily-serif : "Source Serif Pro", serif; + --venia-global-fontSize-50 : 0.6875rem; + --venia-global-fontSize-75 : 0.75rem; + --venia-global-fontSize-100 : 0.875rem; + --venia-global-fontSize-200 : 1rem; + --venia-global-fontSize-300 : 1.125rem; + --venia-global-fontSize-400 : 1.25rem; + --venia-global-fontSize-500 : 1.375rem; + --venia-global-fontSize-600 : 1.5rem; + --venia-global-fontSize-700 : 1.75rem; + --venia-global-fontSize-800 : 2rem; + --venia-global-fontSize-900 : 2.25rem; + --venia-global-fontSize-1000 : 2.5rem; + --venia-global-fontSize-1100 : 3rem; + --venia-global-fontSize-1200 : 3.5rem; + --venia-global-fontWeight-normal : 400; + --venia-global-fontWeight-semibold : 600; + --venia-global-fontWeight-bold : 700; + --venia-global-lineHeight-100 : 1; + --venia-global-lineHeight-200 : 1.25; + --venia-global-lineHeight-300 : 1.5; + --venia-global-lineHeight-400 : 1.75; + --venia-global-lineHeight-500 : 2; + --venia-global-maxWidth : 1440px +} + +.cif-demo .cmp-Mask__mask__root { + background-color : #000; + cursor : pointer; + display : block; + height : 100%; + left : 0; + opacity : 0; + position : fixed; + top : 0; + transition-duration : 192ms; + transition-property : opacity, visibility; + transition-timing-function: linear; + visibility : hidden; + width : 100%; + z-index : 2; + -webkit-appearance : none +} + +.cif-demo .cmp-Mask__mask__root_active { + opacity : .5; + transition-duration: 224ms; + visibility : visible +} + +.cif-demo .cmp-Minicart__header__root { + align-content : center; + align-items : center; + background-color : rgb(var(--venia-grey)); + box-shadow : 0 1px rgb(var(--venia-border)); + display : grid; + grid-auto-columns : auto; + grid-auto-flow : column; + grid-auto-rows : 3rem; + grid-template-columns: 1fr; + height : var(--minicart-header-height); + justify-content : end; + padding : 0 1rem; + position : relative; + z-index : 1 +} + +.cif-demo .cmp-Minicart__header__title { + align-items : center; + display : inline-flex; + font-size : 1rem; + font-weight : 400; + margin-right : auto; + padding : 0; + text-transform: uppercase +} + +.cif-demo .cmp-LoadingIndicator__indicator__root { + align-content : center; + align-items : center; + display : grid; + gap : 3rem; + height : calc(100% - 6rem); + justify-content: center; + justify-items : center; + margin : 3rem 0; + width : 100% +} + +.cif-demo .cmp-LoadingIndicator__indicator__global { + position: fixed; + top : 0; + left : 0; + margin : 0; + height : 100%; + width : 100% +} + +.cif-demo .cmp-LoadingIndicator__indicator__message { + color : rgb(var(--venia-text-alt)); + font-size : 1rem; + letter-spacing: .25rem; + text-transform: uppercase +} + +.cif-demo .cmp-LoadingIndicator__indicator__indicator { + animation-direction : alternate; + animation-duration : 1.5s; + animation-iteration-count: infinite; + animation-name : cmp-LoadingIndicator__indicator__pulse; + animation-timing-function: cubic-bezier(.4, 0, .2, 1) +} + +@keyframes cmp-LoadingIndicator__indicator__pulse { + 0% { + filter : grayscale(1); + transform: scale(.75) rotate(-540deg) + } + + to { + filter : grayscale(0); + transform: scale(1) rotate(0deg) + } +} + +.cif-demo .cmp-components__clickable__root { + align-items : center; + cursor : pointer; + display : inline-flex; + justify-content: center; + line-height : 1; + pointer-events : auto; + text-align : center; + white-space : nowrap +} + +.cif-demo .cmp-Minicart__emptyMiniCartBody__root { + align-items : center; + display : flex; + flex-direction : column; + justify-content: center; + padding : 1rem; + text-align : center +} + +.cif-demo .cmp-Minicart__emptyMiniCartBody__continue { + align-items : center; + cursor : pointer; + display : inline-flex; + justify-content : center; + line-height : 1; + pointer-events : auto; + text-align : center; + white-space : nowrap; + background : none; + border : 1px solid rgb(var(--color)); + border-radius : 1.5rem; + font-size : .75rem; + font-weight : 600; + height : 2rem; + min-width : 7.5rem; + padding : 0 1rem; + transition-duration : 384ms; + transition-property : background-color, color; + transition-timing-function: var(--venia-anim-standard); + --color : var(--venia-text); + color : #fff; + background-color : rgb(var(--color)) +} + +.cif-demo .cmp-Minicart__emptyMiniCartBody__continue:hover { + color : #fff; + background-color: rgb(var(--venia-teal)) +} + +.cif-demo .cmp-Minicart__body__root { + display : grid; + grid-template-rows: min-content min-content min-content 1fr; + overflow : auto +} + +.cif-demo .cmp-Minicart__product__root { + position : relative; + align-content : start; + display : grid; + grid-gap : 0 1rem; + grid-template-areas : "image name""image options""image quantity"; + grid-template-columns: 5pc 1fr; + grid-template-rows : min-content minmax(54px, 1fr) min-content +} + +.cif-demo .cmp-Minicart__product__image { + background-color: rgb(var(--venia-grey)); + border : 1px solid rgb(var(--venia-border)); + border-radius : 2px; + grid-area : image; + max-width : 5pc; + min-height : 75pt +} + +.cif-demo .cmp-Minicart__product__name { + font-size : .875rem; + font-weight: 600; + grid-area : name; + padding-top: .125rem +} + +.cif-demo .cmp-Minicart__product__quantityRow { + align-items: center; + width : 100% +} + +.cif-demo .cmp-Minicart__product__quantity { + align-items: flex-start; + display : flex; + grid-column: 2/span 1; + font-size : 13px; + align-self : end +} + +.cif-demo .cmp-Minicart__product__quantityOperator { + align-items: center; + color : rgb(var(--venia-text-alt)); + display : inline-flex; + margin : 0 .375rem +} + +.cif-demo .cmp-Minicart__product__price { + align-items: center; + display : inline-flex +} + +.cif-demo .cmp-Minicart__product__rowTotalRow { + align-items: center; + width : 100%; + text-align : right +} + +.cif-demo .cmp-Minicart__product__rowTotal { + align-items: center; + display : inline-flex; + float : right +} + +.cif-demo .cmp-Minicart__product__bundleOptions { + padding: 3px 0 7px +} + +.cif-demo .cmp-Minicart__product__bundleOptionTitle { + font-weight: 600; + font-size : .9rem; + margin : 7px 0 3px +} + +.cif-demo .cmp-Minicart__product__bundleOptionValue { + font-size : .8rem; + margin-bottom: 2px +} + +.cif-demo .cmp-Minicart__product__mask { + position : absolute; + left : -24px; + right : -24px; + top : -7px; + bottom : -7px; + background-color: rgb(var(--venia-grey)); + opacity : .5; + z-index : 2 +} + +.cif-demo .cmp-Minicart__kebab__root { + display : inline-block; + grid-row-start : 1; + grid-row-end : 4; + grid-column-start: 3; + grid-column-end : 4; + margin-top : 2px; + position : relative +} + +.cif-demo .cmp-Minicart__kebab__dropdown { + align-items : center; + box-shadow : 0 0 1px rgba(0, 0, 0, .2); + display : grid; + position : absolute; + right : 2px; + top : 0; + transition : 256ms ease-out; + transform : scale(0); + transform-origin: 100% 0; + z-index : 3 +} + +.cif-demo .cmp-Minicart__kebab__dropdown_active { + position : absolute; + transform : scale(1); + transition: .25s var(--venia-anim-bounce) +} + +.cif-demo .cmp-Minicart__kebab__dropdown li { + display : block; + width : 100%; + background-color: #fff; + border-bottom : 1px solid rgb(var(--venia-border)) +} + +.cif-demo .cmp-Minicart__kebab__dropdown li:hover { + background-color: #eee +} + +.cif-demo .cmp-Minicart__kebab__kebab { + outline : 0; + border : none; + background-color: #fff +} + +.cif-demo .cmp-Icon__icon__root { + align-items : center; + display : inline-flex; + justify-content: center; + touch-action : manipulation +} + +.cif-demo .cmp-Minicart__section__menuItem button { + width : 100%; + padding : .6rem 1.6rem .72rem .6rem; + display : flex; + white-space : pre; + box-sizing : border-box; + text-align : left; + align-items : center; + justify-items: start; + column-gap : .7rem +} + +.cif-demo .cmp-Minicart__section__text { + padding-top : 1px; + padding-left: .4rem; + font-size : 11px +} + +.cif-demo .cmp-Minicart__productList__root { + display : grid; + grid-gap: 1rem; + margin : 0 1.5rem; + padding : 1.5rem 0 +} + +.cif-demo .cmp-Button__button__root { + background : none; + border : 1px solid rgb(var(--color)); + border-radius : 1.5rem; + color : rgb(var(--color)); + font-size : .75rem; + font-weight : 600; + height : 2rem; + min-width : 7.5rem; + padding : 0 1rem; + transition-duration : 384ms; + transition-property : background-color, color; + transition-timing-function: var(--venia-anim-standard); + --color : var(--venia-text) +} + +.cif-demo .cmp-Button__button__filled { + background-color: rgb(var(--color)); + color : #fff +} + +.cif-demo .cmp-Button__button__root:hover { + --color: var(--venia-teal) +} + +.cif-demo .cmp-Button__button__root:focus { + box-shadow : 0 0 0 2px rgb(var(--venia-teal-light)), 0 0 .5rem 2px rgba(var(--venia-teal), .2); + outline : none; + transition-duration: 128ms; + --color : var(--venia-teal) +} + +.cif-demo .cmp-Button__button__root:active { + transition-duration: 128ms; + --color : var(--venia-teal-dark) +} + +.cif-demo .cmp-Button__button__root:disabled { + pointer-events: none; + --color : var(--venia-grey-dark) +} + +.cif-demo .cmp-Button__button__content { + align-items : center; + display : inline-grid; + gap : .5rem; + grid-auto-flow : column; + justify-content: center; + justify-items : center +} + +.cif-demo .cmp-Field__field__root { + color : rgb(var(--venia-text)); + display: grid +} + +.cif-demo .cmp-Field__field__label { + align-items: center; + display : flex; + font-size : .875rem; + line-height: 1rem; + padding : .375rem .125rem +} + +.cif-demo .cmp-Field__field__input { + background : #fff; + border : 1px solid rgb(var(--venia-text-alt)); + border-radius : 2px; + color : rgb(var(--venia-text)); + display : inline-flex; + flex : 0 0 100%; + font-size : 1rem; + height : 2.25rem; + margin : 0; + padding : calc(.375rem - 1px) calc(.625rem - 1px); + width : 100%; + -webkit-appearance: none +} + +.cif-demo .cmp-Field__field__input:focus { + border-color: rgb(var(--venia-teal)); + box-shadow : 0 0 0 2px rgb(var(--venia-teal-light)), 0 0 .5rem 2px rgba(var(--venia-teal), .2); + outline : none +} + +.cif-demo .cmp-Field__field__requiredSymbol { + background-color: #000; + width : .4rem; + height : .4rem; + border-radius : 50%; + margin-right : .4rem +} + +.cif-demo .cmp-Field__fieldIcons__root { + display : inline-grid; + grid-auto-flow : column; + grid-template-areas : "before input after"; + grid-template-columns: auto 1fr auto; + height : 2.25rem +} + +.cif-demo .cmp-Field__fieldIcons__input { + align-items: center; + display : flex; + grid-column: before-start/after-end; + grid-row : input-start/input-end +} + +.cif-demo .cmp-Field__fieldIcons__input>input { + padding-left : calc(1.875rem*var(--iconsBefore) + .375rem - 1px); + padding-right: calc(1.875rem*var(--iconsAfter) + .375rem - 1px) +} + +.cif-demo .cmp-Field__fieldIcons__after, +.cif-demo .cmp-Field__fieldIcons__before { + align-items : center; + display : flex; + justify-content: center; + pointer-events : none; + width : 2.25rem +} + +.cif-demo .cmp-Field__fieldIcons__after:empty, +.cif-demo .cmp-Field__fieldIcons__before:empty { + display: none +} + +.cif-demo .cmp-Field__fieldIcons__before { + grid-area: before +} + +.cif-demo .cmp-Field__fieldIcons__after { + grid-area: after +} + +.cif-demo .cmp-Field__message__root { + color : rgb(var(--venia-text)); + font-size : .875rem; + font-weight: 400; + line-height: 1rem; + padding : .375rem .125rem .125rem +} + +.cif-demo .cmp-Field__message__root:empty { + display: none +} + +.cif-demo .cmp-Field__message__root_error { + color: rgb(var(--venia-error)) +} + +.cif-demo .cmp-Select__select__wrapper { + display : inline-grid; + grid-auto-flow : column; + grid-template-areas : "input icon"; + grid-template-columns: auto 2.25rem; + height : 2.25rem +} + +.cif-demo .cmp-Select__select__input { + grid-area : input-start/input-start/input-end/icon-end; + padding-right: calc(2.25rem - 1px) +} + +.cif-demo .cmp-Minicart__cartOptions__root { + display : grid; + grid-template-rows: min-content 1fr; + height : calc(100% - var(--minicart-header-height)); + left : 0; + position : absolute; + top : 3.5rem; + width : 100% +} + +.cif-demo .cmp-Minicart__cartOptions__focusItem { + box-shadow : 0 1px rgb(var(--venia-border)); + display : grid; + gap : 2rem; + grid-auto-flow : column; + grid-template-columns: 1fr; + padding : 1rem +} + +.cif-demo .cmp-Minicart__cartOptions__name { + overflow : hidden; + text-overflow: ellipsis; + white-space : nowrap +} + +.cif-demo .cmp-Minicart__cartOptions__form { + overflow: auto +} + +.cif-demo .cmp-Minicart__cartOptions__modal { + visibility : hidden; + height : 100%; + width : 100%; + background-color: rgb(var(--venia-grey)); + text-align : center; + position : absolute; + bottom : 0 +} + +.cif-demo .cmp-Minicart__cartOptions__modal_active { + visibility: visible; + opacity : .9 +} + +.cif-demo .cmp-Minicart__cartOptions__options { + font-weight: 700 +} + +.cif-demo .cmp-Minicart__cartOptions__quantity { + border : solid rgb(var(--venia-border)); + border-width : 0 0 1px; + margin : 0 1.5rem; + padding-top : 1rem; + padding-bottom: 1rem +} + +.cif-demo .cmp-Minicart__cartOptions__quantityTitle { + font-size : 1rem; + font-weight : 600; + line-height : 1.5; + margin-bottom: 1.5rem +} + +.cif-demo .cmp-Minicart__cartOptions__save { + align-items : center; + background-color : #fff; + display : grid; + grid-auto-columns: min-content; + grid-auto-flow : column; + grid-gap : .75rem; + height : 5rem; + justify-content : center; + justify-items : center; + position : relative +} + +.cif-demo .cmp-Minicart__error__root { + background-color: rgb(var(--venia-warning-light)); + box-shadow : 0 1px rgb(var(--venia-border)); + margin : 10px; + padding : 10px +} + +.cif-demo .cmp-Minicart__error__root h2 { + color : rgb(var(--venia-warning-dark)); + padding-bottom: .83rem +} + +.cif-demo .cmp-Minicart__error__root .cmp-Minicart__error__action { + padding : 10px 0; + text-align: center +} + +.cif-demo .cmp-Minicart__couponForm__root { + display : grid; + grid-template-columns: auto 8rem; + grid-gap : 1rem; + margin : 0 1.5rem +} + +.cif-demo .cmp-Minicart__couponForm__root input { + max-height: 2pc +} + +.cif-demo .cmp-Minicart__couponForm__error { + grid-column : 1/3; + background-color: rgb(var(--venia-grey)); + border-radius : 4px; + color : rgb(var(--venia-error)); + font-size : .875rem; + line-height : 1.25rem; + padding : 1rem +} + +.cif-demo .cmp-Minicart__couponForm__error:empty { + display: none +} + +.cif-demo .cmp-Minicart__couponItem__root { + display : grid; + grid-gap : 0 1rem; + grid-template-columns: 1fr min-content; + margin : 0 1.5rem +} + +.cif-demo .cmp-Minicart__couponItem__couponName { + line-height: 1.5rem +} + +.cif-demo .cmp-Minicart__discountList__root { + display : grid; + grid-gap : 1rem; + margin : 0 1.5rem; + font-size : 14px; + padding-bottom: 1.5rem +} + +.cif-demo .cmp-Minicart__discountList__item { + display : grid; + grid-template-columns: 75% auto +} + +.cif-demo .cmp-Minicart__discountList__price { + text-align: right +} + +.cif-demo .cmp-Checkout__flow__root { + position: relative +} + +.cif-demo .cmp-Checkout__flow__heading { + background-color: #fff; + font-size : .875rem; + font-weight : 600; + grid-column-end : span 2; + line-height : 1rem; + padding : 1.5rem 0 1.25rem; + text-align : center; + text-transform : uppercase; + top : 0; + z-index : 1 +} + +.cif-demo .cmp-Checkout__flow__body { + align-content : start; + animation-duration : 224ms; + animation-iteration-count: 1; + animation-name : cmp-Checkout__flow__enter; + background-color : #fff; + bottom : 5rem; + box-shadow : 0 -1px rgb(var(--venia-border)); + display : grid; + grid-gap : .5rem; + left : 0; + max-height : calc(100vh - 8.5rem); + overflow : auto; + padding : 0 1.5rem; + position : absolute; + right : 0 +} + +.cif-demo .cmp-Checkout__flow__footer { + align-items : center; + background-color : #fff; + display : grid; + grid-auto-columns: min-content; + grid-auto-flow : column; + grid-gap : .75rem; + height : 5rem; + justify-content : center; + justify-items : center; + position : relative +} + +@keyframes cmp-Checkout__flow__enter { + 0% { + opacity : 0; + transform: translate3d(0, 100%, 0) + } + + to { + opacity : 1; + transform: translateZ(0) + } +} + +.cif-demo .cmp-Checkout__section__root { + display : block; + width : 100%; + background-color: #fff; + border : none +} + +.cif-demo .cmp-Checkout__section__root:focus { + background-image: radial-gradient(circle, rgb(var(--venia-grey)), #fff); + outline : 0 none +} + +.cif-demo .cmp-Checkout__section__content { + align-items : center; + border-bottom : 1px solid rgb(var(--venia-border)); + display : grid; + gap : 1rem; + grid-auto-flow : column; + grid-template-columns: 5rem 1fr 2rem; + justify-items : start; + margin : 0 1.5rem; + min-height : 4.5rem; + padding : 1rem 0; + text-align : left +} + +.cif-demo .cmp-Checkout__section__label { + color : rgb(var(--venia-teal)); + font-size : 14px; + font-weight: 600 +} + +.cif-demo .cmp-Checkout__section__summary { + font-size : 13px; + justify-self : stretch; + line-height : 1.5; + overflow : hidden; + text-overflow: ellipsis; + white-space : nowrap +} + +.cif-demo .cmp-Checkout__section__icon { + justify-self: center +} + +.cif-demo .cmp-Checkout__form__root { + bottom : 0; + left : 0; + position: absolute; + right : 0 +} + +.cif-demo .cmp-Checkout__form__body { + grid-gap: 0; + padding : 0 +} + +.cif-demo .cmp-Checkout__form__informationPrompt { + color : rgb(var(--venia-error)); + text-transform: capitalize +} + +.cif-demo .cmp-Checkout__form__paymentDisplayPrimary { + text-transform: capitalize +} + +.cif-demo .cmp-Checkout__form__paymentDisplaySecondary { + display : block; + text-transform: lowercase +} + +.cif-demo .cmp-Checkout__form__paymentDisplaySecondary:first-letter { + text-transform: uppercase +} + +@keyframes cmp-Checkout__form__enter { + 0% { + opacity : 0; + transform: translate3d(0, 100%, 0) + } + + to { + opacity : 1; + transform: translateZ(0) + } +} + +.cif-demo .cmp-AddressForm__addressForm__heading { + background-color: #fff; + font-size : .875rem; + font-weight : 600; + grid-column-end : span 2; + line-height : 1rem; + padding : 1.5rem 0 1.25rem; + text-align : center; + text-transform : uppercase; + top : 0; + z-index : 1 +} + +.cif-demo .cmp-AddressForm__addressForm__body { + align-content : start; + animation-duration : 224ms; + animation-iteration-count: 1; + animation-name : cmp-AddressForm__addressForm__enter; + background-color : #fff; + bottom : 5rem; + box-shadow : 0 -1px rgb(var(--venia-border)); + display : grid; + grid-gap : .5rem; + left : 0; + max-height : calc(100vh - 8.5rem); + overflow : auto; + padding : 0 1.5rem; + right : 0 +} + +.cif-demo .cmp-AddressForm__addressForm__footer { + align-items : center; + background-color : #fff; + display : grid; + grid-auto-columns: min-content; + grid-auto-flow : column; + grid-gap : .75rem; + height : 5rem; + justify-content : center; + justify-items : center; + position : relative +} + +@keyframes cmp-AddressForm__addressForm__enter { + 0% { + opacity : 0; + transform: translate3d(0, 100%, 0) + } + + to { + opacity : 1; + transform: translateZ(0) + } +} + +.cif-demo .cmp-AddressForm__addressForm__button { + text-transform: capitalize +} + +.cif-demo .cmp-AddressForm__addressForm__textInput { + background : #fff; + border : 1px solid rgb(var(--venia-text-alt)); + border-radius: 2px; + color : rgb(var(--venia-text)); + display : inline-flex; + flex : 0 0 100%; + font-size : .9375rem; + height : 2.25rem; + padding : calc(.375rem - 1px) calc(.625rem - 1px); + width : 100% +} + +.cif-demo .cmp-AddressForm__addressForm__textInput:focus { + border-color: rgb(var(--venia-text)); + outline : 0 none +} + +.cif-demo .cmp-AddressForm__addressForm__city, +.cif-demo .cmp-AddressForm__addressForm__firstname, +.cif-demo .cmp-AddressForm__addressForm__lastname, +.cif-demo .cmp-AddressForm__addressForm__postcode, +.cif-demo .cmp-AddressForm__addressForm__region_code, +.cif-demo .cmp-AddressForm__addressForm__telephone { + grid-column-end: span 1 +} + +.cif-demo .cmp-AddressForm__addressForm__address_select, +.cif-demo .cmp-AddressForm__addressForm__email, +.cif-demo .cmp-AddressForm__addressForm__street0 { + grid-column-end: span 2 +} + +.cif-demo .cmp-AddressForm__addressForm__default_shipping, +.cif-demo .cmp-AddressForm__addressForm__save_in_address_book { + grid-column-end: span 2; + text-align : left +} + +.cif-demo .cmp-AddressForm__addressForm__error, +.cif-demo .cmp-AddressForm__addressForm__validation { + grid-column-end: span 2; + line-height : normal +} + +.cif-demo .cmp-AddressForm__addressForm__error { + color: rgb(var(--venia-error)) +} + +.cif-demo .cmp-AddressForm__addressSelect__root { + grid-column-end: span 2 +} + +.cif-demo .cmp-Checkbox__checkbox__root { + align-items : center; + color : rgb(var(--venia-text)); + display : inline-grid; + font-size : 1rem; + font-weight : 400; + gap : .5rem; + grid-auto-flow : column; + grid-template-columns: auto; + justify-items : center; + margin : .5rem; + vertical-align : top +} + +.cif-demo .cmp-Checkbox__checkbox__icon { + align-items : center; + justify-content: center; + z-index : var(--base-z-index + 1, 1) +} + +.cif-demo .cmp-Checkbox__checkbox__icon, +.cif-demo .cmp-Checkbox__checkbox__input { + display : inline-flex; + grid-column: 1/span 1; + grid-row : 1/span 1; + height : 1.25rem; + width : 1.25rem +} + +.cif-demo .cmp-Checkbox__checkbox__input { + background : none; + border : 1px solid rgb(var(--venia-text)); + border-radius : 2px; + margin : 0; + -webkit-appearance: none +} + +.cif-demo .cmp-Checkbox__checkbox__input:focus { + border-color: rgb(var(--venia-teal)); + box-shadow : 0 0 0 2px rgb(var(--venia-teal-light)), 0 0 .5rem 2px rgba(var(--venia-teal), .2); + outline : none +} + +.cif-demo .cmp-Checkbox__checkbox__label { + font-size : 1rem; + grid-column: 2/span 1; + grid-row : 1/span 1 +} + +.cif-demo .cmp-Checkout__paymentsForm__body { + min-height: 21rem +} + +.cif-demo .cmp-Checkout__paymentsForm__button { + text-transform: capitalize +} + +.cif-demo .cmp-Checkout__paymentsForm__textInput { + background : #fff; + border : 1px solid rgb(var(--venia-text-alt)); + border-radius: 2px; + color : rgb(var(--venia-text)); + display : inline-flex; + flex : 0 0 100%; + font-size : .9375rem; + height : 2.25rem; + padding : calc(.375rem - 1px) calc(.625rem - 1px); + width : 100% +} + +.cif-demo .cmp-Checkout__paymentsForm__textInput:focus { + border-color: rgb(var(--venia-text)); + outline : 0 none +} + +.cif-demo .cmp-Checkout__paymentsForm__city, +.cif-demo .cmp-Checkout__paymentsForm__postcode, +.cif-demo .cmp-Checkout__paymentsForm__region_code { + grid-column-end: span 1 +} + +.cif-demo .cmp-Checkout__paymentsForm__address_check, +.cif-demo .cmp-Checkout__paymentsForm__address_select, +.cif-demo .cmp-Checkout__paymentsForm__braintree, +.cif-demo .cmp-Checkout__paymentsForm__email, +.cif-demo .cmp-Checkout__paymentsForm__save_in_address_book, +.cif-demo .cmp-Checkout__paymentsForm__street0 { + grid-column-end: span 2 +} + +.cif-demo .cmp-Checkout__paymentsForm__validation { + color : rgb(var(--venia-error)); + font-size : .8125rem; + grid-column-end: span 2 +} + +[data-braintree-id=upper-container] { + z-index: unset +} + +.cif-demo .braintree-placeholder { + display: none +} + +.cif-demo .cmp-Checkout__shippingForm__button { + text-transform: capitalize +} + +.cif-demo .cmp-Checkout__shippingForm__shippingMethod { + grid-column-end: span 1 +} + +.cif-demo .cmp-Checkout__receipt__root { + background-color : #fff; + display : grid; + grid-template-rows: 1fr auto; + height : 100vh; + left : 0; + padding-top : 3.5rem; + position : absolute; + right : 0; + bottom : 0 +} + +.cif-demo .cmp-Checkout__receipt__body { + padding: 1.5rem 1rem 1rem +} + +.cif-demo .cmp-Checkout__receipt__footer { + align-items : center; + display : flex; + justify-content: center; + margin : 0 1.5rem; + padding : 1rem 0 +} + +.cif-demo .cmp-Checkout__receipt__textBlock { + margin : 1.5rem 0; + line-height: 1.875rem; + font-size : .875rem +} + +.cif-demo .cmp-Checkout__receipt__orderId { + color : #22a1a8; + text-decoration: underline +} + +.cif-demo .cmp-Checkout__receipt__header { + font-size : 1.25rem; + font-weight: 300; + line-height: 1.25rem +} + +.cif-demo .cmp-Checkout__receipt__continue { + align-items : center; + cursor : pointer; + display : inline-flex; + justify-content : center; + line-height : 1; + pointer-events : auto; + text-align : center; + white-space : nowrap; + background : none; + border : 1px solid rgb(var(--color)); + border-radius : 1.5rem; + font-size : .75rem; + font-weight : 600; + height : 2rem; + min-width : 7.5rem; + padding : 0 1rem; + transition-duration : 384ms; + transition-property : background-color, color; + transition-timing-function: var(--venia-anim-standard); + --color : var(--venia-text); + color : #fff; + background-color : rgb(var(--color)) +} + +.cif-demo .cmp-Checkout__receipt__continue:hover { + color : #fff; + background-color: rgb(var(--venia-teal)) +} + +.cif-demo .cmp-Minicart__footer__root { + background-color: #fff; + padding : 0 +} + +.cif-demo .cmp-Minicart__footer__root_open { + z-index: 3 +} + +.cif-demo .cmp-Minicart__footer__placeholderButton { + text-align: center; + margin : 1.5rem 0 1rem +} + +.cif-demo .cmp-Minicart__totalsSummary__root { + box-shadow : 0 -1px rgb(var(--venia-border)); + line-height: 2rem; + margin : 0 1.5rem; + padding-top: 1.5rem +} + +.cif-demo .cmp-Minicart__totalsSummary__subtotalLabel { + color: rgb(var(--venia-text-alt)) +} + +.cif-demo .cmp-Minicart__totalsSummary__subtotalValue { + font-weight: 600; + margin-left: .5rem +} + +.cif-demo .cmp-Minicart__totalsSummary__totals { + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content: center +} + +.cif-demo .cmp-Minicart__totalsSummary__discounted { + text-decoration: line-through +} + +.cif-demo .cmp-Minicart__totalsSummary__totalsDiscount { + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content: center +} + +.cif-demo .cmp-Minicart__minicart__root { + --base-z-index : 4; + --minicart-header-height : 3.5rem; + align-content : start; + background-color : #fff; + bottom : 0; + box-shadow : -1px 0 rgb(var(--venia-border)); + display : grid; + grid-template-rows : min-content 1fr; + height : 100%; + opacity : 0; + overflow : hidden; + position : fixed; + right : 0; + top : 0; + transform : translate3d(100%, 0, 0); + transition-duration : 192ms; + transition-property : opacity, transform, visibility; + transition-timing-function: cubic-bezier(.4, 0, 1, 1); + visibility : hidden; + width : 100%; + max-width : 360px; + z-index : var(--base-z-index) +} + +.cif-demo .cmp-Minicart__minicart__root_open { + opacity : 1; + transform : translateZ(0); + transition-duration : 224ms; + transition-timing-function: cubic-bezier(0, 0, .2, 1); + visibility : visible +} + +.cif-demo .cmp-AuthBar__authBar__root { + align-items : center; + background-color: #fff; + display : grid; + gap : .75rem; + grid-auto-flow : column; + height : 5.5rem; + justify-items : center +} + +.cif-demo .cmp-AuthBar__userChip__root { + width: 100% +} + +.cif-demo .cmp-AuthBar__userChip__content { + align-items : center; + display : grid; + font-size : .875rem; + height : 5.5rem; + gap : .5rem; + grid-auto-flow : column; + grid-template-columns: 3rem 1fr 3rem; + line-height : 1rem; + padding : 0 .5rem; + text-align : center +} + +.cif-demo .cmp-AuthBar__userChip__user { + display : grid; + gap : .25rem; + grid-auto-flow: row; + text-align : left +} + +.cif-demo .cmp-AuthBar__userChip__email { + color: rgb(var(--venia-text-alt)) +} + +.cif-demo .cmp-SignIn__signIn__root { + display : grid; + gap : 1.5rem; + justify-items: stretch; + padding : 1rem 1.5rem +} + +.cif-demo .cmp-SignIn__signIn__forgotPassword { + display : block; + text-decoration: underline; + color : rgb(var(--venia-error)); + font-size : .8rem +} + +.cif-demo .cmp-SignIn__signIn__form { + display: grid; + row-gap: 1rem +} + +.cif-demo .cmp-SignIn__signIn__formTitle { + padding: 1rem 0 .5rem +} + +.cif-demo .cmp-SignIn__signIn__modal { + visibility : hidden; + height : 100%; + width : 100%; + background-color: rgb(var(--venia-grey)); + text-align : center; + position : absolute; + bottom : 0 +} + +.cif-demo .cmp-SignIn__signIn__modal_active { + visibility: visible; + opacity : .9 +} + +.cif-demo .cmp-SignIn__signIn__createAccountButton, +.cif-demo .cmp-SignIn__signIn__forgotPasswordButton, +.cif-demo .cmp-SignIn__signIn__signInButton { + align-items: center; + display : flex; + text-align : center +} + +.cif-demo .cmp-SignIn__signIn__createAccountButton, +.cif-demo .cmp-SignIn__signIn__signInButton { + justify-content: center +} + +.cif-demo .cmp-SignIn__signIn__createAccountButton button, +.cif-demo .cmp-SignIn__signIn__signInButton button { + min-width: 10rem +} + +.cif-demo .cmp-SignIn__signIn__forgotPasswordButton { + justify-content: flex-start +} + +.cif-demo .cmp-SignIn__signIn__signInButton { + margin-top: 1rem +} + +.cif-demo .cmp-SignIn__signIn__signInError { + background-color: rgb(var(--venia-grey)); + border-radius : 4px; + color : rgb(var(--venia-error)); + font-size : .875rem; + line-height : 1.25rem; + padding : 1rem +} + +.cif-demo .cmp-SignIn__signIn__signInError:empty { + display: none +} + +.cif-demo .cmp-MyAccount__myAccount__root { + display: grid; + gap : 1rem; + padding: 1.5rem +} + +.cif-demo .cmp-MyAccount__myAccount__user { + display : grid; + gap : .5rem; + grid-auto-flow: row +} + +.cif-demo .cmp-MyAccount__myAccount__subtitle { + color: rgb(var(--venia-text-alt)) +} + +.cif-demo .cmp-MyAccount__accountLink__root { + border-bottom: 1px solid rgb(var(--venia-border)); + width : 100% +} + +.cif-demo .cmp-MyAccount__accountLink__content { + align-items : center; + display : grid; + gap : .5rem; + grid-auto-flow : column; + grid-template-columns: 2rem 1fr; + height : 3rem; + justify-items : start +} + +.cif-demo .cmp-MyAccount__accountLink__icon { + align-items : center; + color : rgb(var(--venia-teal)); + display : flex; + justify-content: center; + justify-self : center +} + +.cif-demo .cmp-MyAccount__accountLink__text { + font-size : .875rem; + line-height: 1rem +} + +.cif-demo .cmp-ForgotPassword__forgotPasswordForm__root { + display : grid; + gap : 1rem; + justify-items: stretch +} + +.cif-demo .cmp-ForgotPassword__forgotPasswordForm__buttonContainer { + align-items : center; + display : flex; + justify-content: space-around; + margin-top : 1rem; + text-align : center +} + +.cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__root { + display: grid; + gap : 1rem +} + +.cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__text { + background-color: rgb(var(--venia-grey)); + border-radius : 4px; + font-size : .875rem; + font-weight : 300; + line-height : 1.25rem; + padding : 1rem +} + +.cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__buttonContainer { + align-items : center; + display : flex; + justify-content: center; + margin-top : 1rem; + text-align : center +} + +.cif-demo .cmp-ForgotPassword__forgotPassword__root { + display : grid; + gap : 1.5rem; + justify-items: stretch; + padding : 1rem 1.5rem +} + +.cif-demo .cmp-ForgotPassword__forgotPassword__instructions { + background-color: rgb(var(--venia-grey)); + border-radius : 4px; + font-size : .875rem; + font-weight : 300; + line-height : 1.25rem; + padding : 1rem +} + +.cif-demo .cmp-CreateAccount__createAccount__root { + display : grid; + gap : 1rem; + justify-items: stretch; + padding : 1rem 1.5rem +} + +.cif-demo .cmp-CreateAccount__createAccount__message { + background-color: rgb(var(--venia-grey)); + border-radius : 4px; + font-size : .875rem; + line-height : 1.25rem; + padding : 1rem +} + +.cif-demo .cmp-CreateAccount__createAccount__message:empty { + display: none +} + +.cif-demo .cmp-CreateAccount__createAccount__actions { + display : flex; + justify-content: space-around; + margin-top : 1rem +} + +.cif-demo .cmp-CreateAccount__createAccount__error { + color: rgb(var(--venia-error)) +} + +.cif-demo .cmp-CreateAccount__createAccount__subscribe { + margin-left: -.5rem +} + +.cif-demo .cmp-CreateAccount__createAccountSuccess__root { + padding-top: 1.5rem +} + +.cif-demo .cmp-CreateAccount__createAccountSuccess__body { + padding: 1.5rem 1rem 1rem +} + +.cif-demo .cmp-CreateAccount__createAccountSuccess__header { + font-size : 1.25rem; + font-weight: 300; + line-height: 1.25rem +} + +.cif-demo .cmp-CreateAccount__createAccountSuccess__textBlock { + margin : 1.5rem 0; + line-height: 1.875rem; + font-size : .875rem +} + +.cif-demo .cmp-CreateAccount__createAccountSuccess__signin { + align-items : center; + cursor : pointer; + display : inline-flex; + justify-content : center; + line-height : 1; + pointer-events : auto; + text-align : center; + white-space : nowrap; + background : none; + border : 1px solid rgb(var(--color)); + border-radius : 1.5rem; + font-size : .75rem; + font-weight : 600; + height : 2rem; + min-width : 7.5rem; + padding : 0 1rem; + transition-duration : 384ms; + transition-property : background-color, color; + transition-timing-function: var(--venia-anim-standard); + --color : var(--venia-text); + color : #fff; + background-color : rgb(var(--color)) +} + +.cif-demo .cmp-CreateAccount__createAccountSuccess__signin:hover { + color : #fff; + background-color: rgb(var(--venia-teal)) +} + +.cif-demo .cmp-CreateAccount__createAccountSuccess__actions { + display : grid; + justify-items: center; + margin-top : 1rem +} + +.cif-demo .cmp-ChangePassword__changePassword__root { + display: grid; + gap : 1rem; + padding: 1.5rem +} + +.cif-demo .cmp-ChangePassword__changePassword__message { + background-color: rgb(var(--venia-grey)); + border-radius : 4px; + font-size : .875rem; + line-height : 1.25rem; + padding : 1rem +} + +.cif-demo .cmp-ChangePassword__changePassword__message:empty { + display: none +} + +.cif-demo .cmp-ChangePassword__changePassword__actions { + display : flex; + justify-content: space-around; + margin-top : 1rem +} + +.cif-demo .cmp-ChangePassword__changePassword__error { + color: rgb(var(--venia-error)) +} + +.cif-demo .cmp-AuthBar__myAccountPanel__root { + display: block +} + +.cif-demo .cmp-AuthBar__container__enter { + transition-duration : 384ms; + transition-timing-function: var(--venia-anim-in) +} + +.cif-demo .cmp-AuthBar__container__exit { + transition-duration : 192ms; + transition-timing-function: var(--venia-anim-out) +} + +.cif-demo .cmp-AuthBar__container__hidden { + opacity : 0; + visibility: hidden +} + +.cif-demo .cmp-AuthBar__container__visible { + opacity : 1; + visibility: visible +} + +.cif-demo .cmp-AuthBar__container__modal { + background-color : #fff; + bottom : 0; + left : 0; + overflow : auto; + position : absolute; + right : 0; + top : 3.5rem; + transform : translate3d(-100%, 0, 0); + transition-property: opacity, transform, visibility +} + +.cif-demo .cmp-AuthBar__container__modal_open { + transform: translateZ(0) +} + +.cif-demo .cmp-CartTrigger__cartCounter__root { + font-weight: 600; + margin-left: .3rem +} + +.cif-demo .cmp-AccountContainer__accountTrigger__root, +.cif-demo .cmp-CartTrigger__cartTrigger__root { + height : 3rem; + min-width: 3rem +} + +.cif-demo .cmp-AccountContainer__accountTrigger__label { + padding: 0 .5rem +} + +.cif-demo .cmp-AccountContainer__accountDropdown__root { + background-color : rgb(var(--venia-grey)); + display : grid; + gap : 1rem; + min-width : 22rem; + left : 50%; + opacity : 0; + position : absolute; + top : 3.3rem; + transform : translate3d(-50%, 0, 0); + transition-duration : 192ms; + transition-property : opacity, transform, visibility; + transition-timing-function: cubic-bezier(.4, 0, 1, 1); + visibility : hidden; + z-index : 4 +} + +.cif-demo .cmp-AccountContainer__accountDropdown__root_open { + opacity : 1; + transition-duration : 224ms; + transition-timing-function: cubic-bezier(0, 0, .2, 1); + visibility : visible +} + +.cif-demo .cmp-AccountContainer__accountDropdown__mask_active { + opacity: 0 +} + +.cif-demo .cmp-AddressBook__addressDeleteModal__root { + align-items : center; + background-color: rgba(var(--venia-grey), .8); + bottom : 0; + display : inline-flex; + justify-content : space-around; + left : 0; + position : absolute; + right : 0; + top : 0; + z-index : 2 +} + +.cif-demo .cmp-AddressBook__addressItem__root { + border : 1px solid rgb(var(--venia-text)); + border-radius : 5px; + display : inline-flex; + justify-content: space-between; + min-height : 8rem; + padding : 1.5rem; + position : relative; + width : 100% +} + +.cif-demo .cmp-AddressBook__addressItem__defaultTag { + border : 1px solid rgb(var(--venia-teal)); + border-radius: 5px; + color : rgb(var(--venia-teal)); + max-width : 4.5rem; + padding : .5rem; + text-align : left; + margin-top : .5rem +} + +.cif-demo .cmp-AddressBook__addressItem__cityRegion, +.cif-demo .cmp-AddressBook__addressItem__country, +.cif-demo .cmp-AddressBook__addressItem__name, +.cif-demo .cmp-AddressBook__addressItem__street { + text-align: left +} + +.cif-demo .cmp-AddressBook__addressItem__actions { + display : flex; + flex-direction: column; + align-items : flex-start +} + +.cif-demo .cmp-AddressBook__addressItem__deleteButton, +.cif-demo .cmp-AddressBook__addressItem__editButton, +.cif-demo .cmp-AddressBook__addressItem__icon { + display : inline-flex; + align-items: center +} + +.cif-demo .cmp-AddressBook__addressItem__icon { + color : rgb(var(--venia-teal)); + justify-content: center; + touch-action : manipulation +} + +.cif-demo .cmp-AddressBook__addressItem__label { + padding-left: .5rem +} + +.cif-demo .cmp-AddressBook__addAddressButton__root { + align-items : center; + border : 1px dotted rgb(var(--venia-text)); + border-radius : 5px; + display : inline-flex; + justify-content: center; + min-height : 8rem; + padding : 1.5rem; + width : 100% +} + +.cif-demo .cmp-AddressBook__addAddressButton__icon { + color : rgb(var(--venia-teal)); + align-items : center; + display : inline-flex; + justify-content: center; + touch-action : manipulation +} + +.cif-demo .cmp-AddressBook__addAddressButton__label { + padding-left: .5rem +} + +.cif-demo .cmp-AddressBook__addressItemsContainer__root { + display : grid; + grid-template-columns: repeat(auto-fill, minmax(20pc, 1fr)); + grid-gap : 1rem +} + +@media (max-width:424px) { + .cif-demo .cmp-AddressBook__addressItemsContainer__root { + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) + } +} + +.cif-demo .cmp-AddressBook__addressFormContainer__mask { + cursor : auto; + z-index: 10 +} + +.cif-demo .cmp-AddressBook__addressFormContainer__container { + background-color: #fff; + left : 50%; + max-width : 360px; + position : absolute; + top : 5rem; + transform : translate(-50%); + width : 100%; + z-index : 11 +} + +.cif-demo .cmp-AddressBook__addressBook__root { + width : 100%; + text-align: center; + padding : 1rem +} + +.cif-demo .cmp-AddressBook__addressBook__title { + margin-bottom: 1.5rem +} + +.cif-demo .cmp-ResetPassword__ResetPassword__root { + padding: 1rem +} + +.cif-demo .cmp-ResetPassword__ResetPassword__fields { + max-width: 300px +} + +.cif-demo .cmp-ResetPassword__ResetPassword__lead { + background-color: rgb(var(--venia-grey)); + border-radius : 4px; + font-size : .875rem; + font-weight : 300; + line-height : 1.25rem; + padding : 1rem; + margin : 1rem 0 +} + +.cif-demo .cmp-ResetPassword__ResetPassword__submit { + padding-top: 1rem +} + +.cif-demo .cmp-ResetPassword__ResetPassword__error { + color : rgb(var(--venia-error)); + background-color: rgb(var(--venia-grey)); + border-radius : 4px; + font-size : .875rem; + font-weight : 300; + line-height : 1.25rem; + padding : 1rem; + margin : 1rem 0 +} + +.cif-demo .cmp-AccountDetails__accountDetails__root { + display : grid; + row-gap : 2rem; + width : 100%; + text-align: center; + padding : 1rem; + margin-top: 3rem +} + +.cif-demo .cmp-AccountDetails__accountDetails__lineItems { + display : grid; + grid-gap : .75rem; + grid-template-columns: 1fr auto; + line-height : 1.5rem +} + +.cif-demo .cmp-AccountDetails__accountDetails__lineItemLabel { + font-weight: var(--venia-global-fontWeight-bold) +} + +.cif-demo .cmp-AccountDetails__accountDetails__editInformationButton { + margin: auto +} + +.cif-demo .cmp-AccountDetails__accountDetails__messageText { + text-align: center; + margin : auto +} + +@media (min-width:961px) { + .cif-demo .cmp-AccountDetails__accountDetails__accountDetails { + display : grid; + gap : 1rem; + grid-template-columns: 1fr 1fr 1fr; + margin : 3rem 1rem + } +} + +@media (max-width:960px) { + .cif-demo .cmp-AccountDetails__accountDetails__lineItems { + grid-template-columns: 1fr + } + + .cif-demo .cmp-AccountDetails__accountDetails__lineItemButton { + text-align: center + } +} + +.cif-demo .cmp-Dialog__dialog__root { + position : fixed; + left : 0; + top : 0; + height : 100%; + width : 100%; + opacity : 0; + visibility : hidden; + transition-duration : 192ms; + transition-timing-function: var(--venia-global-anim-out); + transition-property : opacity, visibility; + z-index : 3 +} + +.cif-demo .cmp-Dialog__dialog__root_open { + opacity : 1; + visibility : visible; + transition-duration : 224ms; + transition-timing-function: var(--venia-global-anim-in) +} + +.cif-demo .cmp-Dialog__dialog__form { + height : 100%; + width : 100%; + display : grid; + justify-content: center; + align-content : center +} + +.cif-demo .cmp-Dialog__dialog__mask { + position : absolute; + left : 0; + top : 0; + height : 100%; + width : 100%; + background-color: rgb(var(--venia-global-color-gray-darker)); + opacity : .5 +} + +.cif-demo .cmp-Dialog__dialog__dialog { + background-color : rgb(var(--venia-global-color-background)); + border-radius : 5px; + box-shadow : 1px 1px 5px rgb(var(--venia-global-color-gray-darker)); + height : 100%; + max-height : 90vh; + min-height : 360px; + width : 40pc; + overflow : hidden; + display : grid; + grid-template-rows: auto 1fr; + pointer-events : auto; + z-index : 4 +} + +.cif-demo .cmp-Dialog__dialog__header { + border-bottom : 1px solid rgb(var(--venia-global-color-border)); + height : 3.5rem; + padding : 0 .75rem 0 1rem; + display : grid; + grid-auto-flow : column; + grid-template-columns: 1fr auto; + column-gap : 1rem; + align-items : center +} + +.cif-demo .cmp-Dialog__dialog__headerText { + color : rgb(var(--venia-global-color-text-alt)); + text-transform: capitalize; + white-space : nowrap; + overflow : hidden; + text-overflow : ellipsis; + line-height : 1.25rem +} + +.cif-demo .cmp-Dialog__dialog__headerButton { + justify-self: right +} + +.cif-demo .cmp-Dialog__dialog__body { + overflow : auto; + display : grid; + grid-template-rows: 1fr auto +} + +.cif-demo .cmp-Dialog__dialog__contents { + padding: 1rem +} + +.cif-demo .cmp-Dialog__dialog__buttons { + padding : 2.5rem; + display : grid; + grid-auto-flow : column; + gap : 1rem; + justify-content: center +} + +@media (max-width:960px) { + .cif-demo .cmp-Dialog__dialog__root { + left : auto; + right : 0; + transform : translate3d(100%, 0, 0); + transition-property: opacity, transform, visibility + } + + .cif-demo .cmp-Dialog__dialog__root_open { + transform: translateZ(0) + } + + .cif-demo .cmp-Dialog__dialog__form { + align-content : stretch; + justify-content: end + } + + .cif-demo .cmp-Dialog__dialog__dialog { + max-height: 100%; + max-width : 360px + } + + .cif-demo .cmp-Dialog__dialog__buttons { + grid-auto-flow: row + } + + .cif-demo .cmp-Dialog__dialog__confirmButton { + order: -1 + } +} + +.cif-demo .cmp-FormError__formError__errorMessage { + color : rgb(var(--venia-global-color-error)); + font-size : var(--venia-typography-body-S-fontSize); + font-weight: var(--venia-global-fontWeight-semibold); + line-height: var(--venia-global-lineHeight-300) +} + +.cif-demo .cmp-LinkButton__linkButton__root { + color : rgb(var(--venia-brand-color-1-700)); + font-size : var(--venia-global-fontSize-200); + font-weight : var(--venia-global-fontWeight-semibold); + text-decoration: underline; + line-height : 1.25rem; + max-width : 100% +} + +.cif-demo .cmp-LinkButton__linkButton__root:hover { + color: rgb(var(--venia-global-color-gray-900)) +} + +.cif-demo .cmp-Password__password__passwordButton { + --stroke : var(--venia-global-color-gray-500); + background : none; + border-radius: 0; + border-style : none; + border-width : 0; + padding : 0; + min-width : 0 +} + +.cif-demo .cmp-Password__password__passwordButton:hover { + --stroke: var(--venia-global-color-gray-700) +} + +.cif-demo .cmp-Password__password__passwordButton:focus { + box-shadow: none; + --stroke : var(--venia-global-color-gray-700) +} + +.cif-demo .cmp-Password__password__root:active { + --stroke: var(--venia-global-color-gray-700) +} + +.cif-demo .cmp-AccountDetails__editForm__root { + display : grid; + gap : .5rem 1.5rem; + grid-template-columns: 1fr 1fr; + width : 100% +} + +.cif-demo .cmp-AccountDetails__editForm__field { + grid-column-end: span 2 +} + +.cif-demo .cmp-AccountDetails__editForm__buttons { + display : grid; + gap : 1rem; + grid-auto-flow: column; + justify-self : center; + padding : 1rem +} + +.cif-demo .cmp-AccountDetails__editForm__changePasswordButton, +.cif-demo .cmp-AccountDetails__editForm__changePasswordButtonContainer { + padding-top: 1rem +} + +@media (max-width:960px) { + + .cif-demo .cmp-AccountDetails__editForm__firstname, + .cif-demo .cmp-AccountDetails__editForm__lastname, + .cif-demo .cmp-AccountDetails__editForm__newPassword, + .cif-demo .cmp-AccountDetails__editForm__password { + grid-column: 1/span 2 + } +} + +.cif-demo * { + -webkit-box-sizing: border-box; + box-sizing : border-box +} + +.cif-demo div.header+div.responsivegrid { + margin : 0 auto; + max-width: 1500px !important; + float : none !important +} + +.cif-demo input, +.cif-demo select, +.cif-demo textarea { + font-family: Muli, -apple-system, BlinkMacSystemFont, sans-serif +} + +.cif-demo h1, +.cif-demo h2, +.cif-demo h3, +.cif-demo h4, +.cif-demo h5, +.cif-demo h6 { + font-size : 1rem; + font-weight: 400; + margin : 0 +} + +.cif-demo h1 { + font-size: 1.5rem +} + +.cif-demo h2 { + font-size: 1.25rem +} + +.cif-demo a { + color : currentColor; + text-decoration: none +} + +.cif-demo p { + margin: 0 +} + +.cif-demo dl, +.cif-demo ol, +.cif-demo ul { + list-style-type: none; + margin : 0; + padding : 0 +} + +.cif-demo dd, +.cif-demo dt { + margin: 0 +} + +.cif-demo button { + background : none; + border : 0; + cursor : pointer; + font-family : Muli, -apple-system, BlinkMacSystemFont, sans-serif; + font-size : 100%; + padding : 0; + -ms-touch-action : manipulation; + touch-action : manipulation; + -webkit-user-select: none; + -moz-user-select : none; + -ms-user-select : none; + user-select : none; + -webkit-appearance : none +} + +.cif-demo button:disabled { + cursor : default; + -ms-touch-action: none; + touch-action : none +} + +.cif-demo .cmp-breadcrumb__list { + margin-bottom: 5px +} + +.cif-demo .cmp-breadcrumb__item:before { + content: "> " +} + +.cif-demo .cmp-breadcrumb__item--active { + color: #707070 +} + +.cif-demo .cmp-contentfragment__element-title { + font-weight: 700 +} + +.cif-demo .cmp-contentfragment__element-value p { + margin-top: 2px +} + +.cif-demo .cmp-contentfragment__element-value ol, +.cif-demo .cmp-contentfragment__element-value ul { + margin: 5px 0 0 20px +} + +.cif-demo .cmp-contentfragment__element-value ul { + list-style: disc +} + +.cif-demo .cmp-contentfragment__element-value ol { + list-style: decimal +} + +.cif-demo .cf-style-hide-fieldnames .cmp-contentfragment__element-title, +.cif-demo .cf-style-hide-title .cmp-contentfragment__title { + display: none +} + +.cif-demo .cf-style-1 .cmp-contentfragment__elements { + display : grid; + grid-auto-columns: 1fr; + grid-auto-flow : row +} + +.cif-demo .cf-style-1 .cmp-contentfragment__element-title { + grid-row : 1; + background-color: #f6f6f6 +} + +.cif-demo .cf-style-1 .cmp-contentfragment__element-title, +.cif-demo .cf-style-1 .cmp-contentfragment__element-value { + border : 1px solid #d1d1d1; + margin : 0; + padding: 10px +} + +.cif-demo .cf-style-2 .cmp-contentfragment__elements { + border : 1px solid #d1d1d1; + display : grid; + grid-template-columns: 1fr 1fr +} + +.cif-demo .cf-style-2 .cmp-contentfragment__element-title { + background-color: #f6f6f6 +} + +.cif-demo .cf-style-2 .cmp-contentfragment__element-title, +.cif-demo .cf-style-2 .cmp-contentfragment__element-value { + border : 1px solid #d1d1d1; + margin : 0; + padding: 10px +} + +.cif-demo .venia-HeroImage { + min-height : 460px; + padding : 20px 0; + margin-bottom : 40px; + background : #555 50% no-repeat; + background-size: cover; + position : relative; + text-align : center +} + +.cif-demo .venia-HeroImage .navbar { + margin-top: 20px +} + +.cif-demo .venia-HeroImage-title { + display : block; + margin : 0 auto 20px; + text-transform: uppercase +} + +.cif-demo .venia-HeroImage p { + margin: 0 auto +} + +.cif-demo .venia-HeroImage p.h3 { + font-weight: 400; + line-height: 2.58333333 +} + +.cif-demo .venia-HeroImage-title, +.cif-demo .venia-HeroImage p { + text-shadow: 2px 4px 3px rgba(0, 0, 0, .5) +} + +.cif-demo .venia-HeroImage-title .btn, +.cif-demo .venia-HeroImage p .btn { + text-shadow: none +} + +.cif-demo .header~.heroimage, +.cif-demo .header~.target .heroimage { + position : relative; + top : -130px; + margin-bottom: -130px; + overflow : visible +} + +@media (max-width:1199px) { + + .cif-demo .header~.heroimage, + .cif-demo .header~.target .heroimage { + margin-top: -40px + } +} + +@media (min-width:992px) { + .cif-demo .venia-HeroImage { + text-align: left + } + + .cif-demo .venia-HeroImage .container { + -webkit-transform: translateX(-50%); + transform : translateX(-50%); + position : absolute; + top : 0; + bottom : 0; + left : 50% + } + + .cif-demo .venia-HeroImage-wrapper { + -webkit-transform: translateY(-50%); + transform : translateY(-50%); + position : absolute; + top : 50%; + left : 0 + } +} + +@media (min-width:992px) and (min-width:992px) { + .cif-demo .venia-HeroImage-wrapper { + margin-left: 16.66667% + } +} + +@media (max-width:991px) { + .cif-demo .venia-HeroImage.width-full { + padding: 180px 0 70px + } +} + +.cif-demo .jumbotron { + padding-top : 20px; + padding-bottom : 20px; + margin-bottom : 20px; + color : #fff; + background-color: #eee +} + +.cif-demo .jumbotron .h1, +.cif-demo .jumbotron h1 { + color: inherit +} + +.cif-demo .jumbotron p { + margin-bottom: 10px; + font-size : 24px; + font-weight : 200 +} + +.cif-demo .jumbotron>hr { + border-top-color: #d5d5d5 +} + +.cif-demo .container-fluid .jumbotron, +.cif-demo .container .jumbotron { + border-radius: 0 +} + +.cif-demo .jumbotron .container { + max-width: 100% +} + +@media screen and (min-width:768px) { + .cif-demo .jumbotron { + padding-top : 2pc; + padding-bottom: 2pc + } + + .cif-demo .container-fluid .jumbotron, + .cif-demo .container .jumbotron { + padding-left : 40px; + padding-right: 40px + } + + .cif-demo .jumbotron .h1, + .cif-demo .jumbotron h1 { + font-size: 3pc + } +} + +.cif-demo .container-fluid { + margin-right : auto; + margin-left : auto; + padding-left : 9pt; + padding-right: 9pt +} + +.cif-demo .cmp-teaser__title { + font-size : 40px !important; + font-weight : 600 !important; + max-width : 25pc; + margin-bottom : 10px; + text-align : left; + line-height : 1.25em; + letter-spacing: .32px; + opacity : 1 +} + +.cif-demo .cmp-teaser__description { + margin-bottom: 1rem; + line-height : 1.5em; + font-size : 14px +} + +.cif-demo .cmp-teaser__action-link { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + border-radius : 1.25rem; + display : -webkit-inline-box; + display : -ms-inline-flexbox; + display : inline-flex; + font-size : 14px !important; + font-weight : 700 !important; + height : 2.5rem; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + letter-spacing : .25px; + margin-right : .75rem; + margin-top : .75rem; + min-width : 12rem; + text-decoration : none !important; + text-transform : uppercase +} + +.cif-demo .carousel__cardsroot { + overflow: hidden +} + +.cif-demo .carousel__cardsroot .price { + font-size : .875rem; + line-height: 1rem; + margin : .5rem 0; + min-height : 1rem +} + +.cif-demo .carousel__cardsroot .price .regularPrice { + text-decoration: line-through; + font-size : .8rem +} + +.cif-demo .carousel__cardsroot .price .discountedPrice { + font-weight: 700; + color : #007378; + font-size : 1.2rem +} + +.cif-demo .carousel__cardsroot :after, +.cif-demo .carousel__cardsroot :before { + content: ""; + display: table +} + +.cif-demo .carousel__cardsroot :after { + clear: both +} + +.cif-demo .carousel__title { + text-align : center; + margin-bottom: 10px; + color : #333 +} + +.cif-demo .carousel__container { + position: relative; + margin : 25px auto; + width : 15pc +} + +@media screen and (min-width:790px) { + .cif-demo .carousel__container { + width: 45pc + } +} + +@media screen and (min-width:1090px) { + .cif-demo .carousel__container { + width: 60pc + } +} + +@media screen and (min-width:1380px) { + .cif-demo .carousel__container { + width: 75pc + } +} + +@media screen and (min-width:1650px) { + .cif-demo .carousel__container { + width: 90pc + } +} + +.cif-demo .carousel__cardscontainer { + margin: auto +} + +.cif-demo .carousel__cardscontainer :after, +.cif-demo .carousel__cardscontainer :before { + content: ""; + display: table +} + +.cif-demo .carousel__cardscontainer :after { + clear: both +} + +.cif-demo .carousel__btn { + background : transparent; + border : 0; + -webkit-box-shadow: none; + box-shadow : none; + outline : none; + cursor : pointer; + height : 20px; + margin-top : -25px; + position : absolute; + top : 50%; + width : 20px +} + +.cif-demo .carousel__btn--next { + border-bottom : 8px solid #aaa; + border-right : 8px solid #aaa; + right : 0; + -webkit-transform: rotate(315deg); + transform : rotate(315deg) +} + +.cif-demo .carousel__btn--prev { + border-bottom : 8px solid #aaa; + border-left : 8px solid #aaa; + left : 0; + -webkit-transform: rotate(45deg); + transform : rotate(45deg) +} + +@media screen and (max-width:769px) { + .cif-demo .carousel__btn--next { + right: 8% + } + + .cif-demo .carousel__btn--prev { + left: 8% + } +} + +.cif-demo .categorycarousel__anchor { + display : inline-block; + line-height: 1rem; + text-align : center +} + +.cif-demo .categorycarousel__imagewrapper { + background-position: 50% 50%; + background-size : cover; + border-radius : 50%; + -webkit-box-shadow : 0 0 0 1px; + box-shadow : 0 0 0 1px; + display : block; + height : 7rem; + margin : 0 auto 1rem; + width : 7rem +} + +.cif-demo .categorycarousel__image { + height : 100%; + opacity: 0; + width : 100% +} + +.cif-demo .cmp-categorylist { + padding: 1rem +} + +.cif-demo .cmp-categorylist__content { + display : grid; + grid-gap : 3rem 1rem; + grid-template-columns: repeat(auto-fit, 6rem); + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center +} + +.cif-demo .cmp-categorylist__anchor { + display : block; + line-height: 1rem; + text-align : center; + width : 6rem +} + +.cif-demo .cmp-categorylist__imagewrapper { + background-position: 50% 50%; + background-size : cover; + border-radius : 50%; + -webkit-box-shadow : 0 0 0 1px; + box-shadow : 0 0 0 1px; + display : block; + height : 5rem; + margin : 0 auto 1rem; + width : 5rem +} + +.cif-demo .cmp-categorylist__image { + height : 100%; + opacity: 0; + width : 100% +} + +.cif-demo .cmp-categorylist__name { + display: block +} + +.cif-demo .cmp-categorylist__title { + text-align: center; + padding : 2rem +} + +.cif-demo .loader-img { + height : 4pc; + width : 4pc; + background: url(../resources/images/logo.svg) +} + +.cif-demo .flow__root { + --flow-footer-height: 5.5rem; + position : relative +} + +.cif-demo .flow__body { + -webkit-animation-duration : 224ms; + animation-duration : 224ms; + -webkit-animation-iteration-count: 1; + animation-iteration-count : 1; + -webkit-animation-name : enter; + animation-name : enter; + bottom : var(--flow-footer-height); + -webkit-box-shadow : 0 -1px #e0e0e0; + box-shadow : 0 -1px #e0e0e0; + left : 0; + position : absolute; + right : 0 +} + +.cif-demo .flow__body, +.cif-demo .flow__footer { + background-color: #fff; + display : grid +} + +.cif-demo .flow__footer { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + grid-auto-columns: -webkit-min-content; + grid-auto-columns: min-content; + grid-auto-flow : column; + grid-gap : .75rem; + height : var(--flow-footer-height); + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + justify-items : center; + margin : 0 1.5rem; + padding : 1.5rem 0 1rem; + position : relative +} + +@-webkit-keyframes enter { + 0% { + opacity : 0; + -webkit-transform: translate3d(0, 100%, 0); + transform : translate3d(0, 100%, 0) + } + + to { + opacity : 1; + -webkit-transform: translateZ(0); + transform : translateZ(0) + } +} + +@keyframes enter { + 0% { + opacity : 0; + -webkit-transform: translate3d(0, 100%, 0); + transform : translate3d(0, 100%, 0) + } + + to { + opacity : 1; + -webkit-transform: translateZ(0); + transform : translateZ(0) + } +} + +.cif-demo .icon__root { + height: 25px; + width : 25px +} + +.cif-demo .icon__root.icon__root-close { + background: url(src/main/resourcesces/images/close.svg) +} + +.cif-demo .icon__root.icon__root-kebab { + background: url(src/main/resourcesces/images/kebab.svg) +} + +.cif-demo .icon__root.icon__root_heart { + background: no-repeat 50% url(src/main/resourcesces/images/heart.svg) +} + +.cif-demo .icon__root.icon__root_pencil { + background: no-repeat 50% url(src/main/resourcesces/images/pencil.svg) +} + +.cif-demo .icon__root.icon__root_trash { + background: no-repeat 50% url(src/main/resourcesces/images/trash.svg) +} + +.cif-demo .icon__root.icon__root_lock { + background: no-repeat 50% url(src/main/resourcesces/images/lock.svg) +} + +.cif-demo .cmp-Minicart__emptyMiniCartBody__emptyTitle { + font-size : 1.5rem; + line-height : 1.25; + font-style : italic; + margin-bottom: 1.5rem +} + +.cif-demo .cmp-navigation__group { + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.cif-demo .cmp-navigation__item { + list-style: none; + padding : 1.5em 1em +} + +.cif-demo .cmp-navigation__item--level-0 .cmp-navigation__group { + display: none +} + +.cif-demo .cmp-navigation__item--level-0:hover>.cmp-navigation__group { + background : #f6f6f6; + -webkit-box-shadow: 0 1px #e0e0e0; + box-shadow : 0 1px #e0e0e0; + margin-top : 1.3em; + margin-bottom : 1.5em; + display : -webkit-box; + display : -ms-flexbox; + display : flex; + -ms-flex-wrap : wrap; + flex-wrap : wrap; + -webkit-box-pack : space-evenly; + -ms-flex-pack : space-evenly; + justify-content : space-evenly; + position : absolute; + left : 0; + right : 0 +} + +.cif-demo .thumbnail__root { + border : 1px solid #212121; + border-radius : 50%; + height : .875rem; + width : .875rem; + -webkit-box-shadow: 0 0 0 1px #fff; + box-shadow : 0 0 0 1px #fff; + outline : none +} + +.cif-demo .thumbnail__rootSelected { + background-color: #212121 +} + +.cif-demo .thumbnail__image { + display: none +} + +@media (min-width:1024px) { + .cif-demo .thumbnail__root { + border : 0; + border-radius: 0; + height : auto; + width : auto + } + + .cif-demo .thumbnail__rootSelected { + -webkit-box-shadow: 0 0 10px 0 #007378; + box-shadow : 0 0 10px 0 #007378; + background-color : #212121 + } + + .cif-demo .thumbnail__image { + background-color : #f6f6f6; + border-radius : 2px; + -webkit-box-shadow: 0 0 0 1px #fff; + box-shadow : 0 0 0 1px #fff; + display : block; + height : auto; + width : 100% + } +} + +.cif-demo .thumbnailList__root { + -ms-flex-line-pack : stretch; + align-content : stretch; + display : grid; + grid-auto-flow : column; + grid-gap : 1rem; + grid-template-columns: repeat(auto-fit, 1rem); + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + margin-top : 1rem; + z-index : 1 +} + +@media (min-width:1024px) { + .cif-demo .thumbnailList__root { + -ms-flex-line-pack : start; + align-content : start; + grid-auto-flow : row; + grid-gap : 1.5rem; + grid-template-columns: 1fr; + margin-top : 0 + } +} + +.cif-demo .carousel__root { + display : grid; + grid-template-areas : "main""thumbs"; + grid-template-columns: auto; + grid-template-rows : auto +} + +@media (min-width:1024px) { + .cif-demo .carousel__root { + grid-gap : 1.5rem; + grid-template-areas : "thumbs main"; + grid-template-columns: 17fr 80fr + } +} + +.cif-demo .carousel__imageContainer { + display : grid; + grid-area : main; + grid-template-columns: repeat(3, 1fr) +} + +.cif-demo .carousel__currentImage { + background-color: #f6f6f6; + border-radius : 2px; + width : 100%; + grid-area : 1/1/2/4 +} + +.cif-demo .carousel__chevron-left, +.cif-demo .carousel__chevron-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + outline: none; + z-index: 1 +} + +.cif-demo .carousel__chevron-left { + -webkit-box-pack: start; + -ms-flex-pack : start; + justify-content : flex-start; + grid-area : 1/1/2/2; + margin-left : 1.625rem +} + +.cif-demo .carousel__chevron-right { + -webkit-box-pack: end; + -ms-flex-pack : end; + justify-content : flex-end; + grid-area : 1/3/2/4; + margin-right : 1.625rem +} + +@media (min-width:1024px) { + + .cif-demo .carousel__chevron-left, + .cif-demo .carousel__chevron-right { + display: none + } +} + +.cif-demo .select__wrapper { + display : inline-grid; + grid-auto-flow : column; + grid-template-areas : "input icon"; + grid-template-columns: auto 2.25rem; + height : 2.25rem +} + +.cif-demo .select__input { + grid-area : input-start/input-start/input-end/icon-end; + padding-right: calc(2.25rem - 1px) +} + +.cif-demo .quantity__root { + display : -webkit-box; + display : -ms-flexbox; + display : flex; + -webkit-box-orient : vertical; + -webkit-box-direction: normal; + -ms-flex-direction : column; + flex-direction : column +} + +.cif-demo .richText__root { + font-size : .875rem; + line-height: 1.25rem; + padding : 0 .5rem +} + +.cif-demo .richText__root p { + margin: 0 0 1rem +} + +.cif-demo .richText__root ul { + list-style-type: disc; + margin : 0 0 1rem; + padding-left : 2.5rem +} + +.cif-demo .option__root { + border-bottom: 1px solid #e0e0e0; + margin : 0 1.5rem; + padding : 1.75rem 0 +} + +.cif-demo .option__title { + font-size : 1rem; + font-weight : 600; + line-height : 1.5; + margin-bottom: 1.5rem +} + +.cif-demo .productFullDetail__root { + display: block +} + +@media (min-width:1024px) { + .cif-demo .productFullDetail__root { + -webkit-box-align : start; + -ms-flex-align : start; + align-items : start; + display : grid; + grid-auto-flow : row; + grid-template-areas : "images title""images actions""images options""images quantity""images cart""images ."; + grid-template-columns: 1.5625fr 1fr; + grid-template-rows : repeat(5, -webkit-min-content) 1fr [fold]; + grid-template-rows : repeat(5, min-content) 1fr [fold]; + padding : 2.5rem 4rem + } +} + +.cif-demo .productFullDetail__section { + border : solid #e0e0e0; + border-width: 0 0 1px; + margin : 0 1.5rem; + padding : 1.5rem 0 +} + +.cif-demo .productFullDetail__section .required { + color: #c0123f +} + +.cif-demo .productFullDetail__sectionTitle { + font-size : 1rem; + font-weight : 600; + line-height : 1.5; + margin-bottom: 1.5rem; + text-align : center +} + +.cif-demo .productFullDetail__customizeBundle, +.cif-demo .productFullDetail__sectionTitle { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + display : -webkit-box; + display : -ms-flexbox; + display : flex; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center +} + +.cif-demo .productFullDetail__customizeBundle { + grid-area: cart +} + +.cif-demo .productFullDetail__title { + -webkit-box-align : center; + -ms-flex-align : center; + align-items : center; + display : grid; + grid-area : title; + grid-gap : 1rem; + grid-template-columns: 1fr -webkit-max-content; + grid-template-columns: 1fr max-content; + line-height : 1.5; + padding : 1rem 1.5rem +} + +@media (min-width:1024px) { + .cif-demo .productFullDetail__title { + padding: 1.5rem + } +} + +.cif-demo .productFullDetail__productName { + font-size : 1rem; + font-weight: 600 +} + +@media (min-width:1024px) { + .cif-demo .productFullDetail__productName { + font-size : 1.3125rem; + font-weight: 400 + } +} + +.cif-demo .productFullDetail__title .price { + text-align: right +} + +.cif-demo .productFullDetail__root .price { + display: block +} + +.cif-demo .productFullDetail__root .price .regularPrice { + text-decoration: line-through; + font-size : .8rem +} + +.cif-demo .productFullDetail__root .price .discountedPrice { + font-weight: 700; + color : #007378; + font-size : 1.2rem +} + +.cif-demo .productFullDetail__root .price .you-save { + font-size: .9rem; + color : #707070 +} + +.cif-demo .productFullDetail__root .price .you-save:before { + display: block; + content: " " +} + +.cif-demo .productFullDetail__imageCarousel { + grid-area : images; + grid-column: 1/2; + grid-row : 1/fold; + margin : 0 auto; + max-width : 40pc +} + +@media (min-width:1024px) { + .cif-demo .productFullDetail__imageCarousel { + margin : 0; + max-width: 50pc; + padding : 1.5rem 0 + } +} + +.cif-demo .productFullDetail__options { + grid-area: options +} + +.cif-demo .productFullDetail__quantity { + grid-area: quantity +} + +.cif-demo .productFullDetail__groupedProducts table { + width: 100% +} + +.cif-demo .productFullDetail__groupedProducts th, +td { + padding: 15px +} + +.cif-demo .productFullDetail__groupedProducts th, +tr:nth-child(2n) { + background-color: #f2f2f2 +} + +.cif-demo .productFullDetail__groupedProducts .price { + margin-top : 5px; + font-weight: 700 +} + +.cif-demo .productFullDetail__bundleProduct .priceInfo { + float: right +} + +.cif-demo .productFullDetail__bundleProduct .bundlePrice { + font-weight: 700 +} + +.cif-demo .bundleProduct__quantityTitle { + font-size : 1rem; + font-weight: 600; + line-height: 1.5; + margin : 1.5rem 0 .5rem +} + +.cif-demo .productFullDetail__bundleProduct select[multiple] { + width : 75%; + height: unset +} + +.cif-demo .productFullDetail__bundleProduct .bundleOptionSelect__root { + width : 75%; + display : -webkit-box; + display : -ms-flexbox; + display : flex; + -webkit-box-orient : vertical; + -webkit-box-direction: normal; + -ms-flex-direction : column; + flex-direction : column +} + +.cif-demo .productFullDetail__bundleProduct .option__quantity { + -moz-appearance: textfield; + margin : 0; + height : 34px; + text-align : center; + width : 54px; + padding : 1px 9px +} + +.cif-demo .productFullDetail__bundleProduct .option__quantity::-webkit-inner-spin-button, +.cif-demo .productFullDetail__bundleProduct .option__quantity::-webkit-outer-spin-button { + -webkit-appearance: none; + margin : 0 +} + +.cif-demo .productFullDetail__cartActions { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + display : -webkit-box; + display : -ms-flexbox; + display : flex; + grid-area : cart; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center +} + +@media (min-width:1024px) { + .cif-demo .productFullDetail__cartActions { + border-bottom-width: 0 + } +} + +.cif-demo .productFullDetail__description { + grid-column: 1/span 1; + grid-row : fold/span 1 +} + +@media (min-width:1024px) { + .cif-demo .productFullDetail__description { + -ms-flex-item-align: stretch; + align-self : stretch; + border-top-width : 1px; + margin : 0; + padding-left : 1.5rem; + padding-right : 1.5rem + } +} + +.cif-demo .productFullDetail__details { + grid-column: 2/span 1; + grid-row : fold/span 1 +} + +@media (min-width:1024px) { + .cif-demo .productFullDetail__details { + -ms-flex-item-align: stretch; + align-self : stretch; + border-top-width : 1px; + margin : 0; + padding-left : 1.5rem; + padding-right : 1.5rem + } +} + +.cif-demo .productFullDetail__related { + border-bottom-width: 0; + grid-column : 1/span 2 +} + +.cif-demo .productFullDetail__staged { + grid-column : span 2; + background-color: #f9aa80; + padding : 2px 5px +} + +.cif-demo .tile__root { + border : 1px solid #212121; + border-radius: 2px; + height : 3rem; + margin-left : 1rem; + margin-top : 1rem; + min-width : 3rem; + padding : 0 .75rem +} + +@media (min-width:1024px) { + .cif-demo .tile__root { + height : 2rem; + min-width: 2rem; + padding : 0 .5rem + } +} + +.cif-demo .tile__root_selected { + background-color: #212121; + color : #fff +} + +.cif-demo .swatch__root { + background-color: #f6f6f6; + border-color : rgba(0, 0, 0, .1); + color : #fff; + padding : 0 +} + +.cif-demo .swatch__root_selected { + background-image: linear-gradient(-45deg, rgba(0, 0, 0, .2), transparent) +} + +.cif-demo .tileList__root { + display : -webkit-box; + display : -ms-flexbox; + display : flex; + -ms-flex-wrap: wrap; + flex-wrap : wrap; + margin-left : -1rem; + margin-top : -1rem +} + +.cif-demo .productcarousel__root { + overflow: hidden +} + +.cif-demo .productcarousel__root .price { + font-size : .875rem; + line-height: 1rem; + margin : .5rem 0; + min-height : 1rem +} + +.cif-demo .productcarousel__root .price .regularPrice { + text-decoration: line-through; + font-size : .8rem +} + +.cif-demo .productcarousel__root .price .discountedPrice { + font-weight: 700; + color : #007378; + font-size : 1.2rem +} + +.cif-demo .productcarousel__root :after, +.cif-demo .productcarousel__root :before { + content: ""; + display: table +} + +.cif-demo .productcarousel__root :after { + clear: both +} + +.cif-demo .productcarousel__title { + text-align : center; + margin-bottom: 10px; + color : #333 +} + +.cif-demo .product__image { + max-width : 15pc; + max-height: 15pc +} + +.cif-demo .productcarousel__container { + position: relative; + margin : 25px auto; + width : 15pc +} + +@media screen and (min-width:790px) { + .cif-demo .productcarousel__container { + width: 45pc + } +} + +@media screen and (min-width:1090px) { + .cif-demo .productcarousel__container { + width: 60pc + } +} + +@media screen and (min-width:1380px) { + .cif-demo .productcarousel__container { + width: 75pc + } +} + +@media screen and (min-width:1650px) { + .cif-demo .productcarousel__container { + width: 90pc + } +} + +.cif-demo .card { + border : 10px solid #fff; + float : left; + font-size : 20px; + text-align: center; + width : 15pc +} + +.cif-demo .productcarousel__cardscontainer { + margin: auto +} + +.cif-demo .productcarousel__cardscontainer :after, +.cif-demo .productcarousel__cardscontainer :before { + content: ""; + display: table +} + +.cif-demo .productcarousel__cardscontainer :after { + clear: both +} + +.cif-demo .product__card { + float: left +} + +.cif-demo .product__card__image { + height: 243px +} + +.cif-demo .productcarousel__btn { + background : transparent; + border : 0; + -webkit-box-shadow: none; + box-shadow : none; + outline : none; + cursor : pointer; + height : 20px; + margin-top : -25px; + position : absolute; + top : 50%; + width : 20px +} + +.cif-demo .productcarousel__btn--next { + border-bottom : 8px solid #aaa; + border-right : 8px solid #aaa; + right : 0; + -webkit-transform: rotate(315deg); + transform : rotate(315deg) +} + +.cif-demo .productcarousel__btn--prev { + border-bottom : 8px solid #aaa; + border-left : 8px solid #aaa; + left : 0; + -webkit-transform: rotate(45deg); + transform : rotate(45deg) +} + +@media screen and (max-width:769px) { + .cif-demo .productcarousel__btn--next { + right: 8% + } + + .cif-demo .productcarousel__btn--prev { + left: 8% + } +} + +.cif-demo .item__root .item__name, +.cif-demo .item__root .price { + font-size : .875rem; + line-height: 1rem; + margin : .5rem 0; + min-height : 1rem +} + +.cif-demo .item__root .price .regularPrice { + text-decoration: line-through; + font-size : .8rem +} + +.cif-demo .item__root .price .discountedPrice { + font-weight: 700; + color : #007378; + font-size : 1.2rem +} + +.cif-demo .item__images { + display : grid; + grid-template-areas: "main" +} + +.cif-demo .item__image { + display : block; + grid-area : main; + height : auto; + opacity : 1; + -webkit-transition-duration : 512ms; + transition-duration : 512ms; + -webkit-transition-property : opacity, visibility; + transition-property : opacity, visibility; + -webkit-transition-timing-function: ease-out; + transition-timing-function : ease-out; + visibility : visible; + width : 100% +} + +.cif-demo .item__imagePlaceholder { + background-color: #f6f6f6 +} + +.cif-demo .item__image_pending { + opacity : 0; + visibility: hidden +} + +.cif-demo .item__name_pending, +.cif-demo .item__price_pending { + background-color: #f6f6f6 +} + +.cif-demo .item__price_pending { + width: 3rem +} + +.cif-demo .gallery__root { + display : grid; + grid-template-areas : "actions""items"; + grid-template-columns: 1fr; + line-height : 1 +} + +.cif-demo .category__style_grid .gallery__items { + -ms-flex-line-pack : start; + align-content : start; + display : grid; + grid-gap : 1rem; + grid-template-columns: repeat(3, 1fr); + margin-bottom : 10px +} + +.cif-demo .category__style_list .gallery__items { + display : block; + margin-bottom: 10px +} + +@media (max-width:640px) { + div .gallery__items { + grid-template-columns: repeat(2, 1fr) + } +} + +.cif-demo .category__root { + padding: 1rem +} + +.cif-demo .category__root-message { + text-align: center +} + +.cif-demo .category__title { + font-size : 1.5rem; + font-weight: 400; + margin : 0 0 1rem; + padding : 0 .5rem .5rem +} + +.cif-demo .category__staged, +.cif-demo .item__staged { + background-color: #f9aa80; + padding : 5px; + margin : 0 auto 5px; + text-align : center; + width : 150px +} + +.cif-demo .category__pagination { + position: -webkit-sticky; + position: sticky; + bottom : 0 +} + +.cif-demo .category__categoryTitle { + color : #212121; + font-size : 1.375rem; + font-weight: 300; + line-height: 1.375rem; + text-align : center +} + +.cif-demo .category__pagination_root { + display : grid; + grid-template-rows: 1fr; + grid-column-gap : .7rem; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + padding-top : 1rem; + padding-bottom : 1rem; + background-color : #fff; + border-top : 1px solid #ccc; + text-align : center +} + +.cif-demo .category__pagination_navbutton-inactive { + color: #999 +} + +.cif-demo .category__pagination_navbutton-arrow { + display : grid; + padding-bottom: 1px +} + +.cif-demo .category__pagination_tilebutton { + grid-row-start: 1; + outline : none +} + +.cif-demo .category__pagination_tilebutton-text { + border : 0; + padding: .1rem .2rem +} + +.cif-demo .category__pagination_icon-root { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + display : -webkit-inline-box; + display : -ms-inline-flexbox; + display : inline-flex; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + -ms-touch-action : manipulation; + touch-action : manipulation +} + +.cif-demo .category__pagination_tilebutton-marker { + border : 1px solid; + border-radius: 2px +} + +.cif-demo .category__pagination_button { + background : none; + border : 0; + cursor : pointer; + font-family : Muli, -apple-system, BlinkMacSystemFont, sans-serif; + font-size : 100%; + padding : 0; + -ms-touch-action : manipulation; + touch-action : manipulation; + -webkit-user-select: none; + -moz-user-select : none; + -ms-user-select : none; + user-select : none; + -webkit-appearance : none +} + +.cif-demo .category__pagination_button :disabled { + cursor : default; + -ms-touch-action: none; + touch-action : none +} + +.cif-demo .category__image { + min-height : 460px; + padding : 20px 0; + margin-bottom : 40px; + background : #f6f6f6 50% no-repeat; + background-size: cover; + position : relative; + text-align : center +} + +.cif-demo .results__count { + color : #212121; + font-size : 1rem; + text-align : center; + line-height : 1rem; + margin-bottom: 1.5rem; + font-weight : 200 +} + +.cif-demo .loadmore__button { + display : block; + margin : 5px auto; + background-color: #000; + color : #fff; + padding : 5px 10px; + border-radius : 10px +} + +.cif-demo .loadmore__spinner { + display: none; + width : 40px; + height : 40px; + margin : 0 auto +} + +.cif-demo .loadmore__spinner:after { + content : " "; + display : block; + width : 2pc; + height : 2pc; + border-radius : 50%; + border-color : #d1d1d1 transparent; + border-style : solid; + border-width : 6px; + -webkit-animation: loadmore__spinner 1.2s linear infinite; + animation : loadmore__spinner 1.2s linear infinite +} + +@-webkit-keyframes loadmore__spinner { + 0% { + -webkit-transform: rotate(0deg); + transform : rotate(0deg) + } + + to { + -webkit-transform: rotate(1turn); + transform : rotate(1turn) + } +} + +@keyframes loadmore__spinner { + 0% { + -webkit-transform: rotate(0deg); + transform : rotate(0deg) + } + + to { + -webkit-transform: rotate(1turn); + transform : rotate(1turn) + } +} + +.cif-demo .productteaser .item__root { + position: relative +} + +.cif-demo .productteaser .item__images { + display : grid; + grid-template-areas: "main" +} + +.cif-demo .productteaser .item__image { + border : 1px solid #3498db; + display : block; + grid-area : main; + height : auto; + opacity : 1; + -webkit-transition-duration : 512ms; + transition-duration : 512ms; + -webkit-transition-property : opacity, visibility; + transition-property : opacity, visibility; + -webkit-transition-timing-function: ease-out; + transition-timing-function : ease-out; + visibility : visible; + width : 100% +} + +.cif-demo .productteaser .item__name { + top : 40%; + text-transform: uppercase; + font-size : 22px +} + +.cif-demo .productteaser .item__name, +.cif-demo .productteaser .price { + position : absolute; + display : block; + left : 20%; + background : unset; + color : #fff; + font-weight: 900; + text-shadow: 2px 2px 4px rgba(0, 0, 0, .9) +} + +.cif-demo .productteaser .price { + top : 45%; + font-size: 18px +} + +.cif-demo .productteaser .price .regularPrice { + text-decoration: line-through; + font-size : .8rem +} + +.cif-demo .productteaser .price .discountedPrice { + font-weight: 700; + color : #007378; + font-size : 1.2rem +} + +.cif-demo .productteaser .item__badge { + width : 150px; + height : 150px; + right : 0; + overflow: hidden; + position: absolute +} + +.cif-demo .productteaser .item__badge :after, +.cif-demo .productteaser .item__badge :before { + position : absolute; + z-index : -1; + content : ""; + display : block; + border-color: transparent transparent #2980b9 #2980b9; + border-style: solid; + border-width: 5px +} + +.cif-demo .productteaser .item__badge :before { + top : 0; + left: 0 +} + +.cif-demo .productteaser .item__badge :after { + bottom: 0; + right : 0 +} + +.cif-demo .productteaser .item__badge span { + position : absolute; + display : block; + width : 225px; + padding : 15px 0; + background-color : #3498db; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1); + box-shadow : 0 5px 10px rgba(0, 0, 0, .1); + color : #fff; + font : 700 18px/1 Lato, sans-serif; + text-shadow : 0 1px 1px rgba(0, 0, 0, .2); + text-transform : uppercase; + text-align : center; + left : -25px; + top : 30px; + -webkit-transform : rotate(45deg); + transform : rotate(45deg) +} + +.cif-demo .productteaser .productteaser__cta { + position : relative; + text-align: center; + padding : 10px 0 +} + +@media (max-width:768px) { + .cif-demo .productteaser .item__name { + font-size: 15px + } + + .cif-demo .productteaser .item__price { + top : 60%; + font-size: 10px + } +} + +@media (max-width:992px) { + .cif-demo .productteaser .item__name { + font-size: 18px + } + + .cif-demo .productteaser .item__price { + top : 60%; + font-size: 14px + } +} + +.cif-demo .search__root { + display : grid; + grid-template-columns: minmax(15pc, 1fr) auto; + grid-column-gap : 2rem; + grid-row-gap : 1rem +} + +.cif-demo .filterSection-header { + padding: 1.5rem 0 +} + +.cif-demo .filterSection-title { + font-size : 14px; + font-weight: 800; + line-height: 14px +} + +.cif-demo .filterBlock__root { + display : grid; + border : solid #e0e0e0; + border-width: 1px 0 0 +} + +.cif-demo .filterBlock__toggler { + opacity: 0 +} + +.cif-demo .filterBlock__header { + -webkit-box-align : center; + -ms-flex-align : center; + align-items : center; + display : grid; + grid-auto-flow : column; + grid-template-columns: 1fr auto; + min-height : 3rem; + cursor : pointer +} + +.cif-demo .filterBlock-name { + height : 1.5rem; + line-height: 1.5rem; + text-align : left; + font-weight: 600 +} + +label { + cursor: pointer +} + +.cif-demo .filterBlock__toggler:checked~.filterList-items { + display: grid +} + +.cif-demo .filterBlock__toggler:checked+.filterBlock__header>.icon-closed { + display: none +} + +.cif-demo .filterBlock__toggler:checked+.filterBlock__header>.icon-open { + display: block +} + +.cif-demo .filterList-items { + display : none; + gap : 1rem; + grid-template-columns: 100%; + padding : .5rem 0 +} + +.cif-demo .filterDefault-icon { + background-color: #fff; + border : 1px solid #212121; + width : 1rem; + height : 1rem; + display : -webkit-inline-box; + display : -ms-inline-flexbox; + display : inline-flex; + border-radius : 3px; + margin-right : 1rem +} + +.cif-demo .currentFilters__root { + display : grid; + gap : .5rem; + grid-auto-flow: row; + padding : .5rem 0 +} + +.cif-demo .currentFilter__root { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + border : 1px solid #e0e0e0; + border-radius : 4px; + display : inline-grid; + gap : .5rem; + grid-auto-flow : column; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + padding : .2rem .5rem; + white-space : nowrap +} + +.cif-demo .icon-closed { + display: block +} + +.cif-demo .icon-open { + display: none +} + +.cif-demo .search__filters { + grid-row-start: 1; + grid-row-end : 2 span +} + +.cif-demo .sort__fields { + float: right +} + +.cif-demo .sort__fields label { + font-size : .8rem; + font-weight: 700 +} + +.cif-demo .sort__fields select { + font-size: 1rem +} + +.cif-demo .cmp-teaser-banner-dark .cmp-teaser__content { + margin-top : -500px; + height : 300px; + min-height : 300px; + float : left; + position : relative; + width : 574px; + margin-left: 133px +} + +.cif-demo .cmp-teaser-banner-dark .cmp-teaser__title { + text-align: left +} + +.cif-demo .cmp-teaser-banner-dark .cmp-teaser__action-link { + border : 2px solid #00f; + background-color: #00f; + color : #fff +} + +.cif-demo .cmp-teaser-banner-light .cmp-teaser__content { + margin-top : -500px; + height : 300px; + min-height : 300px; + float : left; + position : relative; + width : 574px; + margin-left: 133px +} + +.cif-demo .cmp-teaser-banner-light .cmp-teaser__title { + text-align: left; + color : #fff +} + +.cif-demo .cmp-teaser-banner-light .cmp-teaser__description { + color: #fff +} + +.cif-demo .cmp-teaser-banner-light .cmp-teaser__action-link { + border : 2px solid #00f; + background-color: #00f; + color : #fff +} + +.cif-demo .cmp-teaser-feature-left { + padding-top : 10px; + padding-bottom: 10px +} + +.cif-demo .cmp-teaser-feature-left .cmp-teaser { + display : -webkit-box; + display : -ms-flexbox; + display : flex; + -webkit-box-orient : horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction : row-reverse; + flex-direction : row-reverse; + overflow : hidden +} + +.cif-demo .cmp-teaser-feature-left .cmp-teaser__image { + -o-object-fit: contain; + object-fit : contain +} + +.cif-demo .cmp-teaser-feature-left .cmp-teaser__content { + padding: 5rem 2rem !important +} + +.cif-demo .cmp-teaser-feature-left .cmp-teaser__title { + color: #212121 +} + +.cif-demo .cmp-teaser-feature-left .cmp-teaser__action-link { + border : 2px solid #00f; + background-color: #fff; + color : #00f +} + +.cif-demo .cmp-teaser-feature-right { + padding-top : 10px; + padding-bottom: 10px +} + +.cif-demo .cmp-teaser-feature-right .cmp-teaser { + display : -webkit-box; + display : -ms-flexbox; + display : flex; + -webkit-box-orient : horizontal; + -webkit-box-direction: normal; + -ms-flex-direction : row; + flex-direction : row; + overflow : hidden +} + +.cif-demo .cmp-teaser-feature-right .cmp-teaser__image { + -o-object-fit: contain; + object-fit : contain +} + +.cif-demo .cmp-teaser-feature-right .cmp-teaser__content { + padding: 5rem 2rem !important +} + +.cif-demo .cmp-teaser-feature-right .cmp-teaser__title { + text-align: left; + color : #212121 +} + +.cif-demo .cmp-teaser-feature-right .cmp-teaser__action-link { + border : 2px solid #00f; + background-color: #fff; + color : #00f +} + +.cif-demo .button__root { + background : none; + border : 1px solid rgba(var(--color), 1); + border-radius : 1.5rem; + color : rgba(var(--color), 1); + font-size : .75rem; + font-weight : 600; + height : 2rem; + min-width : 7.5rem; + padding : 0 1rem; + -webkit-transition-duration : 384ms; + transition-duration : 384ms; + -webkit-transition-property : background-color, color; + transition-property : background-color, color; + -webkit-transition-timing-function: var(--venia-anim-standard); + transition-timing-function : var(--venia-anim-standard); + --color : var(--venia-text) +} + +.cif-demo .button__root :hover { + --color: var(--venia-teal) +} + +.cif-demo .button__root :focus { + -webkit-box-shadow: 0 0 0 2px #d4f3ee, 0 0 .5rem 2px rgba(0, 115, 120, .2); + box-shadow : 0 0 0 2px #d4f3ee, 0 0 .5rem 2px rgba(0, 115, 120, .2); + outline : none; + --color : var(--venia-teal) +} + +.cif-demo .button__root :active, +.cif-demo .button__root :focus { + -webkit-transition-duration: 128ms; + transition-duration : 128ms +} + +.cif-demo .button__root :active { + --color: var(--venia-teal-dark) +} + +.cif-demo .button__root :disabled { + pointer-events: none; + --color : var(--venia-grey-dark) +} + +.cif-demo .button__filled { + background-color: rgba(var(--color), 1); + color : #fff +} + +.cif-demo .button__content { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + display : inline-grid; + gap : .5rem; + grid-auto-flow : column; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + justify-items : center +} + +.cif-demo .field__root { + color : #212121; + display: grid +} + +.cif-demo .field__label { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + display : -webkit-box; + display : -ms-flexbox; + display : flex; + font-size : .875rem; + font-weight : 600; + line-height : 1rem; + padding : .375rem .125rem +} + +.cif-demo .field__input { + background : #fff; + border : 1px solid #707070; + border-radius : 2px; + color : #212121; + display : -webkit-inline-box; + display : -ms-inline-flexbox; + display : inline-flex; + -webkit-box-flex : 0; + -ms-flex : 0 0 100%; + flex : 0 0 100%; + font-size : 1rem; + height : 2.25rem; + margin : 0; + padding : calc(.375rem - 1px) calc(.625rem - 1px); + width : 100%; + -webkit-appearance: none +} + +.cif-demo .field__input :focus { + border-color : #007378; + -webkit-box-shadow: 0 0 0 2px #d4f3ee, 0 0 .5rem 2px rgba(0, 115, 120, .2); + box-shadow : 0 0 0 2px #d4f3ee, 0 0 .5rem 2px rgba(0, 115, 120, .2); + outline : none +} + +.cif-demo .fieldIcons__root { + display : inline-grid; + grid-auto-flow : column; + grid-template-areas : "before input after"; + grid-template-columns: auto 1fr auto; + height : 2.25rem +} + +.cif-demo .fieldIcons__input { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + display : -webkit-box; + display : -ms-flexbox; + display : flex; + grid-column : before-start/after-end; + grid-row : input-start/input-end +} + +.cif-demo .fieldIcons__input>input { + padding-left : calc(1.875rem*var(--iconsBefore) - -.375rem - 1px); + padding-right: calc(1.875rem*var(--iconsAfter) - -.375rem - 1px) +} + +.cif-demo .fieldIcons__after, +.cif-demo .fieldIcons__before { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + display : -webkit-box; + display : -ms-flexbox; + display : flex; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + pointer-events : none; + width : 2.25rem +} + +.cif-demo .fieldIcons__after:empty, +.cif-demo .fieldIcons__before:empty { + display: none +} + +.cif-demo .fieldIcons__before { + grid-area: before +} + +.cif-demo .fieldIcons__after { + grid-area: after +} + +.cif-demo .message__root { + color : #212121; + font-size : .875rem; + font-weight: 400; + line-height: 1rem; + padding : .375rem .125rem .125rem +} + +.cif-demo .message__root:empty { + display: none +} + +.cif-demo .message__root_error { + color: #c0123f +} + +main.container { + padding: .5em 1em +} + +.cif-demo .cmp-experiencefragment--footer { + background-color: #f6f6f6; + border-top : 1px solid #e0e0e0; + color : #202020; + margin-top : 1rem; + padding : 0 1rem +} + +#footerCopyright { + display : block; + color : #707070; + font-size : .75rem; + padding : .5rem 2rem 1rem; + line-height: normal; + text-align : center +} + +.cif-demo .header { + position: -webkit-sticky; + position: sticky; + top : 0; + z-index : 10 +} + +.cif-demo .icon__root { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + display : -webkit-inline-box; + display : -ms-inline-flexbox; + display : inline-flex; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + -ms-touch-action : manipulation; + touch-action : manipulation +} + +.cif-demo .cartCounter__root { + font-weight: 600; + margin-left: .3rem +} + +.cif-demo .cartTrigger__root { + height : 3rem; + min-width: 3rem +} + +.cif-demo .navTrigger__root, +.cif-demo .searchTrigger__root { + height: 3rem; + width : 3rem +} + +.cif-demo .searchTrigger__root { + -webkit-transition-property : color; + transition-property : color; + -webkit-transition-duration : 224ms; + transition-duration : 224ms; + -webkit-transition-timing-function: cubic-bezier(0, 0, .2, 1); + transition-timing-function : cubic-bezier(0, 0, .2, 1) +} + +.cif-demo .searchTrigger__open { + color: #007378 +} + +.cif-demo .header__root { + background-color : #f6f6f6; + -webkit-box-shadow: 0 1px #e0e0e0; + box-shadow : 0 1px #e0e0e0; + display : grid; + grid-auto-columns : 100%; + grid-auto-flow : row; + grid-auto-rows : auto; + grid-row-gap : .5rem; + position : -webkit-sticky; + position : sticky; + top : 0; + z-index : 10 +} + +.cif-demo .header__toolbar { + -ms-flex-line-pack : center; + align-content : center; + -webkit-box-align : center; + -ms-flex-align : center; + align-items : center; + display : grid; + grid-template-areas : "primary title secondary"; + grid-template-columns: 1fr auto 1fr; + grid-template-rows : 3rem; + justify-items : center; + min-height : 3.5rem; + padding : 0 1rem +} + +.cif-demo .header__toolbar>a { + justify-self: start +} + +.cif-demo .header__accountTrigger, +.cif-demo .header__cartTrigger, +.cif-demo .header__navTrigger { + height: 3rem; + width : 3rem +} + +.cif-demo .header__accountTrigger { + position: relative; + display : inline-block +} + +.cif-demo .header__logo { + grid-area: title +} + +.cif-demo .header__secondaryActions { + grid-area : secondary; + width : 100%; + display : grid; + grid-template-columns: 1fr 1fr 1fr; + justify-items : end +} + +@media (max-width:1023px) { + .cif-demo .header__secondaryActions { + grid-template-columns: 1fr 1fr + } +} + +.cif-demo .indicator__root { + -ms-flex-line-pack: center; + align-content : center; + -webkit-box-align : center; + -ms-flex-align : center; + align-items : center; + display : grid; + gap : 3rem; + height : calc(100% - 6rem); + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + justify-items : center; + margin : 3rem 0; + width : 100% +} + +.cif-demo .indicator__message { + color : #707070; + font-size : 1rem; + letter-spacing: .25rem; + text-transform: uppercase +} + +.cif-demo .indicator__indicator { + -webkit-animation-direction : alternate; + animation-direction : alternate; + -webkit-animation-duration : 1.5s; + animation-duration : 1.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count : infinite; + -webkit-animation-name : indicator__pulse; + animation-name : indicator__pulse; + -webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1); + animation-timing-function : cubic-bezier(.4, 0, .2, 1) +} + +@-webkit-keyframes indicator__pulse { + 0% { + -webkit-filter : grayscale(1); + filter : grayscale(1); + -webkit-transform: scale(.75) rotate(-540deg); + transform : scale(.75) rotate(-540deg) + } + + to { + -webkit-filter : grayscale(0); + filter : grayscale(0); + -webkit-transform: scale(1) rotate(0deg); + transform : scale(1) rotate(0deg) + } +} + +@keyframes indicator__pulse { + 0% { + -webkit-filter : grayscale(1); + filter : grayscale(1); + -webkit-transform: scale(.75) rotate(-540deg); + transform : scale(.75) rotate(-540deg) + } + + to { + -webkit-filter : grayscale(0); + filter : grayscale(0); + -webkit-transform: scale(1) rotate(0deg); + transform : scale(1) rotate(0deg) + } +} + +.cif-demo .suggestedCategories__root { + padding: 0 1.5rem 1rem +} + +.cif-demo .suggestedCategories__item { + padding-bottom: .72rem +} + +.cif-demo .suggestedCategories__item:last-child { + padding-bottom: 0 +} + +.cif-demo .suggestedProduct__root { + -ms-flex-line-pack : start; + align-content : start; + -webkit-box-align : center; + -ms-flex-align : center; + align-items : center; + display : grid; + grid-gap : .375rem 1rem; + grid-template-areas : "image name price"; + grid-template-columns: 60px 1fr; + grid-template-rows : -webkit-min-content; + grid-template-rows : min-content; + padding-bottom : 1rem +} + +.cif-demo .suggestedProduct__root:last-child { + padding-bottom: 0 +} + +.cif-demo .suggestedProduct__productImage { + display: block; + height : auto; + width : 100% +} + +.cif-demo .suggestedProduct__productName { + padding-right: 50%; + word-break : break-word +} + +.cif-demo .suggestedProducts__items { + padding: 0 1.5rem +} + +.cif-demo .suggestedProducts__title { + padding-bottom: 1rem; + text-transform: uppercase +} + +.cif-demo .suggestedProducts__titleText { + display : block; + border-bottom: 2px solid #e0e0e0; + padding : .5rem 1.5rem +} + +.cif-demo .autocomplete__root { + border : 1px solid #e0e0e0; + font-size : .8125rem; + -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, .2); + box-shadow : 0 3px 10px rgba(0, 0, 0, .2); + background-color : #fff; + z-index : 2; + padding : 1rem 0 +} + +.cif-demo .autocomplete__statusContent { + padding: .5rem 1.5rem +} + +.cif-demo .searchBar__root { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + display : none; + -webkit-box-pack : center; + -ms-flex-pack : center; + justify-content : center; + padding : 0 1rem +} + +.cif-demo .searchBar__root_open { + display: -webkit-box; + display: -ms-flexbox; + display: flex +} + +.cif-demo .searchBar__form { + display : grid; + justify-items: stretch; + margin-bottom: .5rem +} + +.cif-demo .searchBar__form, +.cif-demo .searchBar__searchInner { + -webkit-box-align: center; + -ms-flex-align : center; + align-items : center; + width : 100% +} + +.cif-demo .searchBar__searchInner { + position : relative; + display : -webkit-inline-box; + display : -ms-inline-flexbox; + display : inline-flex; + -webkit-box-pack: center; + -ms-flex-pack : center; + justify-content : center; + max-width : 24rem +} + +.cif-demo .searchBar__SearchAutocompleteWrapper { + text-align: left; + margin : -.5rem 0 .5rem; + position : absolute; + top : 100%; + left : 0; + right : 0 +} + +; \ No newline at end of file diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.less.template b/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.less.template deleted file mode 100644 index e7f636cd72..0000000000 --- a/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.less.template +++ /dev/null @@ -1,30 +0,0 @@ - -:root { - --venia-anim-bounce: cubic-bezier(0.5, 1.8, 0.9, 0.8); - --venia-anim-in: cubic-bezier(0, 0, 0.2, 1); - --venia-anim-out: cubic-bezier(0.4, 0, 1, 1); - --venia-anim-standard: cubic-bezier(0.4, 0, 0.2, 1); - --venia-border: 224, 224, 224; - --venia-error: 192, 18, 63; - --venia-error-alt: 255, 226, 234; - --venia-font: Muli, -apple-system, BlinkMacSystemFont, sans-serif; - --venia-grey: 246, 246, 246; - --venia-grey-dark: 209, 209, 209; - --venia-orange: 241, 99, 33; - --venia-teal: 0, 115, 120; - --venia-teal-alt: 224, 240, 241; - --venia-teal-dark: 0, 104, 108; - --venia-teal-light: 212, 243, 238; - --venia-text: 33, 33, 33; - --venia-text-alt: 112, 112, 112; - --venia-text-hint: 158, 158, 158; - --venia-text-spot: 255, 99, 51; - --venia-warning-dark: 249, 93, 94; - --venia-warning-light: 254, 229, 232; -} - -.cif-demo { - - // ADD @import statements here - -} \ No newline at end of file diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/product/.content.xml b/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/product/.content.xml index 5fef9d74e2..fb118548d5 100644 --- a/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/product/.content.xml +++ b/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/product/.content.xml @@ -3,5 +3,5 @@ jcr:description="Product Detail Component for the Core Components Library" jcr:primaryType="cq:Component" jcr:title="Product Detail" - sling:resourceSuperType="core/cif/components/commerce/product/v1/product" + sling:resourceSuperType="core/cif/components/commerce/product/v2/product" componentGroup="Core Components Examples"/> diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/productlist/.content.xml b/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/productlist/.content.xml index e77c10db2d..ae95a5e99c 100644 --- a/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/productlist/.content.xml +++ b/examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/components/productlist/.content.xml @@ -3,5 +3,5 @@ jcr:description="Product List Component for the Core Components Library" jcr:primaryType="cq:Component" jcr:title="Product List" - sling:resourceSuperType="core/cif/components/commerce/productlist/v1/productlist" + sling:resourceSuperType="core/cif/components/commerce/productlist/v2/productlist" componentGroup="Core Components Examples"/> diff --git a/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/commerce/product/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/commerce/product/.content.xml index 86893c399b..31f13e815d 100644 --- a/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/commerce/product/.content.xml +++ b/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/commerce/product/.content.xml @@ -24,7 +24,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" sling:resourceType="core/wcm/components/text/v2/text" - text="<h1>Product<sub>v1</sub></h1>" + text="<h1>Product<sub>v2</sub></h1>" textIsRich="true"/>