From 2b117ec1f423ba5be70973ef68531c1bc5306e59 Mon Sep 17 00:00:00 2001 From: Dirk Rudolph Date: Tue, 6 Jul 2021 11:27:45 +0200 Subject: [PATCH 1/6] use v2 for product and product list --- .../core/components/internal/services/UrlProviderImpl.java | 7 ++++++- .../components/product/.content.xml | 2 +- .../components/productlist/.content.xml | 2 +- .../library/commerce/product/.content.xml | 2 +- .../library/commerce/productlist/.content.xml | 2 +- 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/bundles/core/src/main/java/com/adobe/cq/commerce/core/components/internal/services/UrlProviderImpl.java b/bundles/core/src/main/java/com/adobe/cq/commerce/core/components/internal/services/UrlProviderImpl.java index c5fec31a21..a58f89ee85 100644 --- a/bundles/core/src/main/java/com/adobe/cq/commerce/core/components/internal/services/UrlProviderImpl.java +++ b/bundles/core/src/main/java/com/adobe/cq/commerce/core/components/internal/services/UrlProviderImpl.java @@ -259,7 +259,12 @@ private String parseIdentifier(IdentifierLocation identifierLocation, SlingHttpS String[] selectors = request.getRequestPathInfo().getSelectors(); return selectors.length == 0 ? null : selectors[selectors.length - 1]; } else if (IdentifierLocation.SUFFIX.equals(identifierLocation)) { - return request.getRequestPathInfo().getSuffix().substring(1); // Remove leading / + if (StringUtils.isNotEmpty(request.getRequestPathInfo().getSuffix())) { + return request.getRequestPathInfo().getSuffix().substring(1); // Remove leading / + } else { + // allowed + return null; + } } else { throw new RuntimeException("Identifier location " + identifierLocation + " is not supported"); } 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 9b0dadeffa..0dad211be6 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"/> Date: Wed, 7 Jul 2021 09:53:20 +0200 Subject: [PATCH 2/6] format venia.css for better diff --- .../clientlibs/venia-theme/venia.css | 5317 ++++++++++++++++- 1 file changed, 5316 insertions(+), 1 deletion(-) 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..796ee9fb0b 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,5319 @@ * 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 +@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 From b8e49b926623a6038eff7d5717e303d7a3cba49c Mon Sep 17 00:00:00 2001 From: Dirk Rudolph Date: Wed, 7 Jul 2021 11:05:04 +0200 Subject: [PATCH 3/6] update sample data --- .../examples/servlets/GraphqlServlet.java | 65 +- ...graphql-category-with-staged-products.json | 17 + ...ducts-collection-with-staged-products.json | 530 +++ .../magento-graphql-products-staged.json | 1169 +++++++ .../examples/servlets/GraphqlServletTest.java | 32 + .../clientlibs/venia-theme/venia.css | 2966 ++++++----------- .../venia-theme/venia.less.template | 30 - .../library/commerce/product/.content.xml | 2 +- .../product/manual-product/.content.xml | 4 +- .../library/commerce/productlist/.content.xml | 2 +- 10 files changed, 2890 insertions(+), 1927 deletions(-) create mode 100644 examples/bundle/src/main/resources/graphql/magento-graphql-category-with-staged-products.json create mode 100644 examples/bundle/src/main/resources/graphql/magento-graphql-products-collection-with-staged-products.json create mode 100644 examples/bundle/src/main/resources/graphql/magento-graphql-products-staged.json delete mode 100644 examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/venia.less.template 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 0e094c7035..03514fd8ca 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,16 @@ 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 PRODUCT_SKU = "MH01"; private static final String GROUPED_PRODUCT_URL_KEY = "set-of-sprite-yoga-straps"; @@ -107,16 +112,19 @@ 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_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; @@ -171,7 +179,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. @@ -191,7 +199,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. */ @@ -259,7 +267,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. */ @@ -348,7 +356,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. */ @@ -373,6 +381,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 @@ -397,13 +406,20 @@ private Products readProductsResponse(DataFetchingEnvironment env) { return readProductsFrom(PRODUCTS_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); } } } @@ -417,7 +433,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. */ @@ -431,13 +447,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(); @@ -449,15 +465,20 @@ private List readCategoryListResponse(DataFetchingEnvironment env) .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 c146836c42..42d5ad518d 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.setSelectorString("chaz-crocodile-hoodie"); + + 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.setSelectorString("uid-2"); + + 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 796ee9fb0b..707acc6492 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,8 +11,13 @@ * governing permissions and limitations under the License. * ******************************************************************************/ +/* + * To prefix the css classes with .cif-demo use: ^([ ]*)\. $1\.cif-demo \. + */ @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); @@ -107,148 +112,41 @@ --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 + 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; - -webkit-transition-duration: 224ms; - transition-duration : 224ms; - visibility : visible + opacity : .5; + 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)); + 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); - -webkit-box-pack : end; - -ms-flex-pack : end; justify-content : end; padding : 0 1rem; position : relative; @@ -256,34 +154,25 @@ } .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 + 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 { - -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% + 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 { @@ -296,149 +185,100 @@ } .cif-demo .cmp-LoadingIndicator__indicator__message { - color : RGB(var(--venia-text-alt)); + 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) - } + 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% { - -webkit-filter : grayscale(1); - filter : grayscale(1); - -webkit-transform: scale(.75) rotate(-540deg); - transform : scale(.75) rotate(-540deg) + filter : grayscale(1); + transform: scale(.75) rotate(-540deg) } to { - -webkit-filter : grayscale(0); - filter : grayscale(0); - -webkit-transform: scale(1) rotate(0deg); - transform : scale(1) rotate(0deg) + filter : grayscale(0); + 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 + 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 { - 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 + align-items : center; + display : flex; + flex-direction : column; + justify-content: center; + padding : 1rem; + text-align : center } .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)) + 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)) + 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)); + background-color: rgb(var(--venia-grey)); border : 1px solid rgb(var(--venia-border)); border-radius : 2px; grid-area : image; @@ -454,55 +294,40 @@ } .cif-demo .cmp-Minicart__product__quantityRow { - -webkit-box-align: center; - -ms-flex-align : center; - align-items : center; - width : 100% + 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 + align-items: flex-start; + 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 + align-items: center; + color : rgb(var(--venia-text-alt)); + display : inline-flex; + 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__price { + align-items: center; + 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 + 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 + align-items: center; + display : inline-flex; + float : right } .cif-demo .cmp-Minicart__product__bundleOptions { @@ -526,7 +351,7 @@ right : -24px; top : -7px; bottom : -7px; - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); opacity : .5; z-index : 2 } @@ -542,30 +367,22 @@ } .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 + 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; - -webkit-transform : scale(1); - transform : scale(1); - -webkit-transition: .25s var(--venia-anim-bounce); - transition : .25s var(--venia-anim-bounce) + position : absolute; + transform : scale(1); + transition: .25s var(--venia-anim-bounce) } .cif-demo .cmp-Minicart__kebab__dropdown li { @@ -586,36 +403,22 @@ } .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 + 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 : -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 + 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 { @@ -632,26 +435,23 @@ } .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) + 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)); + background-color: rgb(var(--color)); color : #fff } @@ -660,18 +460,15 @@ } .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) + 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 { - -webkit-transition-duration: 128ms; - transition-duration : 128ms; - --color : var(--venia-teal-dark) + transition-duration: 128ms; + --color : var(--venia-teal-dark) } .cif-demo .cmp-Button__button__root:disabled { @@ -680,45 +477,33 @@ } .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 + 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)); + 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 + 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 : -webkit-inline-box; - display : -ms-inline-flexbox; + color : rgb(var(--venia-text)); display : inline-flex; - -webkit-box-flex : 0; - -ms-flex : 0 0 100%; flex : 0 0 100%; font-size : 1rem; height : 2.25rem; @@ -729,10 +514,9 @@ } .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 + 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 { @@ -752,14 +536,10 @@ } .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 + align-items: center; + display : flex; + grid-column: before-start/after-end; + grid-row : input-start/input-end } .cif-demo .cmp-Field__fieldIcons__input>input { @@ -769,17 +549,11 @@ .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 + align-items : center; + display : flex; + justify-content: center; + pointer-events : none; + width : 2.25rem } .cif-demo .cmp-Field__fieldIcons__after:empty, @@ -796,7 +570,7 @@ } .cif-demo .cmp-Field__message__root { - color : RGB(var(--venia-text)); + color : rgb(var(--venia-text)); font-size : .875rem; font-weight: 400; line-height: 1rem; @@ -808,7 +582,7 @@ } .cif-demo .cmp-Field__message__root_error { - color: RGB(var(--venia-error)) + color: rgb(var(--venia-error)) } .cif-demo .cmp-Select__select__wrapper { @@ -826,7 +600,6 @@ .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; @@ -836,8 +609,7 @@ } .cif-demo .cmp-Minicart__cartOptions__focusItem { - -webkit-box-shadow : 0 1px RGB(var(--venia-border)); - box-shadow : 0 1px RGB(var(--venia-border)); + box-shadow : 0 1px rgb(var(--venia-border)); display : grid; gap : 2rem; grid-auto-flow : column; @@ -859,7 +631,7 @@ visibility : hidden; height : 100%; width : 100%; - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); text-align : center; position : absolute; bottom : 0 @@ -890,33 +662,27 @@ } .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 + 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)); + color : rgb(var(--venia-warning-dark)); padding-bottom: .83rem } @@ -938,9 +704,9 @@ .cif-demo .cmp-Minicart__couponForm__error { grid-column : 1/3; - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); border-radius : 4px; - color : RGB(var(--venia-error)); + color : rgb(var(--venia-error)); font-size : .875rem; line-height : 1.25rem; padding : 1rem @@ -953,7 +719,6 @@ .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 } @@ -997,71 +762,45 @@ } .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 + 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 { - -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) + opacity : 0; + transform: translate3d(0, 100%, 0) } to { - opacity : 1; - -webkit-transform: translateZ(0); - transform : translateZ(0) + opacity : 1; + transform: translateZ(0) } } @@ -1073,13 +812,11 @@ } .cif-demo .cmp-Checkout__section__root:focus { - background-image: radial-gradient(circle, RGB(var(--venia-grey)), #fff); + 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; @@ -1094,7 +831,7 @@ } .cif-demo .cmp-Checkout__section__label { - color : RGB(var(--venia-teal)); + color : rgb(var(--venia-teal)); font-size : 14px; font-weight: 600 } @@ -1125,7 +862,7 @@ } .cif-demo .cmp-Checkout__form__informationPrompt { - color : RGB(var(--venia-error)); + color : rgb(var(--venia-error)); text-transform: capitalize } @@ -1142,96 +879,18 @@ 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) + opacity : 0; + transform: translate3d(0, 100%, 0) } to { - opacity : 1; - -webkit-transform: translateZ(0); - transform : translateZ(0) + opacity : 1; + 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; @@ -1246,70 +905,44 @@ } .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 + 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 { - -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) + opacity : 0; + transform: translate3d(0, 100%, 0) } to { - opacity : 1; - -webkit-transform: translateZ(0); - transform : translateZ(0) + opacity : 1; + transform: translateZ(0) } } @@ -1318,24 +951,20 @@ } .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% + 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)); + border-color: rgb(var(--venia-text)); outline : 0 none } @@ -1360,15 +989,67 @@ 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)); - grid-column-end: span 2; - line-height : normal + 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 { @@ -1380,24 +1061,20 @@ } .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% + 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)); + border-color: rgb(var(--venia-text)); outline : 0 none } @@ -1417,12 +1094,12 @@ } .cif-demo .cmp-Checkout__paymentsForm__validation { - color : RGB(var(--venia-error)); + color : rgb(var(--venia-error)); font-size : .8125rem; grid-column-end: span 2 } -.cif-demo [data-braintree-id=upper-container] { +[data-braintree-id=upper-container] { z-index: unset } @@ -1455,17 +1132,11 @@ } .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 + align-items : center; + display : flex; + justify-content: center; + margin : 0 1.5rem; + padding : 1rem 0 } .cif-demo .cmp-Checkout__receipt__textBlock { @@ -1486,42 +1157,33 @@ } .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)) + 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)) + background-color: rgb(var(--venia-teal)) } .cif-demo .cmp-Minicart__footer__root { @@ -1539,15 +1201,14 @@ } .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 + 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)) + color: rgb(var(--venia-text-alt)) } .cif-demo .cmp-Minicart__totalsSummary__subtotalValue { @@ -1556,17 +1217,10 @@ } .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 + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content: center } .cif-demo .cmp-Minicart__totalsSummary__discounted { @@ -1574,74 +1228,53 @@ } .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 + 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; - -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) + --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; - -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 + 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 { - -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 + 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 { @@ -1649,8 +1282,6 @@ } .cif-demo .cmp-AuthBar__userChip__content { - -webkit-box-align : center; - -ms-flex-align : center; align-items : center; display : grid; font-size : .875rem; @@ -1671,7 +1302,7 @@ } .cif-demo .cmp-AuthBar__userChip__email { - color: RGB(var(--venia-text-alt)) + color: rgb(var(--venia-text-alt)) } .cif-demo .cmp-SignIn__signIn__root { @@ -1684,7 +1315,7 @@ .cif-demo .cmp-SignIn__signIn__forgotPassword { display : block; text-decoration: underline; - color : RGB(var(--venia-error)); + color : rgb(var(--venia-error)); font-size : .8rem } @@ -1701,7 +1332,7 @@ visibility : hidden; height : 100%; width : 100%; - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); text-align : center; position : absolute; bottom : 0 @@ -1715,20 +1346,14 @@ .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 + align-items: center; + 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 + justify-content: center } .cif-demo .cmp-SignIn__signIn__createAccountButton button, @@ -1737,9 +1362,7 @@ } .cif-demo .cmp-SignIn__signIn__forgotPasswordButton { - -webkit-box-pack: start; - -ms-flex-pack : start; - justify-content : flex-start + justify-content: flex-start } .cif-demo .cmp-SignIn__signIn__signInButton { @@ -1747,9 +1370,9 @@ } .cif-demo .cmp-SignIn__signIn__signInError { - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); border-radius : 4px; - color : RGB(var(--venia-error)); + color : rgb(var(--venia-error)); font-size : .875rem; line-height : 1.25rem; padding : 1rem @@ -1759,14 +1382,28 @@ 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 { - -webkit-box-align : center; - -ms-flex-align : center; align-items : center; display : grid; gap : .5rem; @@ -1777,17 +1414,11 @@ } .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 + align-items : center; + color : rgb(var(--venia-teal)); + display : flex; + justify-content: center; + justify-self : center } .cif-demo .cmp-MyAccount__accountLink__text { @@ -1795,22 +1426,6 @@ 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; @@ -1818,16 +1433,11 @@ } .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 + align-items : center; + display : flex; + justify-content: space-around; + margin-top : 1rem; + text-align : center } .cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__root { @@ -1836,7 +1446,7 @@ } .cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__text { - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); border-radius : 4px; font-size : .875rem; font-weight : 300; @@ -1845,17 +1455,11 @@ } .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 + align-items : center; + display : flex; + justify-content: center; + margin-top : 1rem; + text-align : center } .cif-demo .cmp-ForgotPassword__forgotPassword__root { @@ -1866,7 +1470,7 @@ } .cif-demo .cmp-ForgotPassword__forgotPassword__instructions { - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); border-radius : 4px; font-size : .875rem; font-weight : 300; @@ -1882,7 +1486,7 @@ } .cif-demo .cmp-CreateAccount__createAccount__message { - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); border-radius : 4px; font-size : .875rem; line-height : 1.25rem; @@ -1894,16 +1498,13 @@ } .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)) + color: rgb(var(--venia-error)) } .cif-demo .cmp-CreateAccount__createAccount__subscribe { @@ -1931,42 +1532,33 @@ } .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)) + 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)) + background-color: rgb(var(--venia-teal)) } .cif-demo .cmp-CreateAccount__createAccountSuccess__actions { @@ -1982,7 +1574,7 @@ } .cif-demo .cmp-ChangePassword__changePassword__message { - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); border-radius : 4px; font-size : .875rem; line-height : 1.25rem; @@ -1994,16 +1586,13 @@ } .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)) + color: rgb(var(--venia-error)) } .cif-demo .cmp-AuthBar__myAccountPanel__root { @@ -2011,17 +1600,13 @@ } .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) + transition-duration : 384ms; + 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) + transition-duration : 192ms; + transition-timing-function: var(--venia-anim-out) } .cif-demo .cmp-AuthBar__container__hidden { @@ -2035,24 +1620,19 @@ } .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 + 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 { - -webkit-transform: translateZ(0); - transform : translateZ(0) + transform: translateZ(0) } .cif-demo .cmp-CartTrigger__cartCounter__root { @@ -2071,35 +1651,27 @@ } .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 + 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; - -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 + opacity : 1; + transition-duration : 224ms; + transition-timing-function: cubic-bezier(0, 0, .2, 1); + visibility : visible } .cif-demo .cmp-AccountContainer__accountDropdown__mask_active { @@ -2107,42 +1679,33 @@ } .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 + 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 : -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% + 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)); + color : rgb(var(--venia-teal)); max-width : 4.5rem; padding : .5rem; text-align : left; @@ -2157,36 +1720,22 @@ } .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 + 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 : -webkit-inline-box; - display : -ms-inline-flexbox; - display : inline-flex; - -webkit-box-align: center; - -ms-flex-align : center; - align-items : center + display : inline-flex; + 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 + color : rgb(var(--venia-teal)); + justify-content: center; + touch-action : manipulation } .cif-demo .cmp-AddressBook__addressItem__label { @@ -2194,30 +1743,22 @@ } .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 + 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)); - -ms-touch-action: manipulation; - touch-action : manipulation + color : rgb(var(--venia-teal)); + align-items : center; + display : inline-flex; + justify-content: center; + touch-action : manipulation } .cif-demo .cmp-AddressBook__addAddressButton__label { @@ -2242,15 +1783,14 @@ } .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 + 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 { @@ -2272,7 +1812,7 @@ } .cif-demo .cmp-ResetPassword__ResetPassword__lead { - background-color: RGB(var(--venia-grey)); + background-color: rgb(var(--venia-grey)); border-radius : 4px; font-size : .875rem; font-weight : 300; @@ -2286,8 +1826,8 @@ } .cif-demo .cmp-ResetPassword__ResetPassword__error { - color : RGB(var(--venia-error)); - background-color: RGB(var(--venia-grey)); + color : rgb(var(--venia-error)); + background-color: rgb(var(--venia-grey)); border-radius : 4px; font-size : .875rem; font-weight : 300; @@ -2345,40 +1885,32 @@ } .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 + 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; - -webkit-transition-duration : 224ms; - transition-duration : 224ms; - -webkit-transition-timing-function: var(--venia-global-anim-in); - transition-timing-function : var(--venia-global-anim-in) + 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; - -webkit-box-pack : center; - -ms-flex-pack : center; - justify-content : center; - -ms-flex-line-pack: center; - align-content : center + height : 100%; + width : 100%; + display : grid; + justify-content: center; + align-content : center } .cif-demo .cmp-Dialog__dialog__mask { @@ -2387,15 +1919,14 @@ top : 0; height : 100%; width : 100%; - background-color: RGB(var(--venia-global-color-gray-darker)); + 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)); + 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)); + box-shadow : 1px 1px 5px rgb(var(--venia-global-color-gray-darker)); height : 100%; max-height : 90vh; min-height : 360px; @@ -2414,16 +1945,12 @@ 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)); + color : rgb(var(--venia-global-color-text-alt)); text-transform: capitalize; white-space : nowrap; overflow : hidden; @@ -2446,38 +1973,28 @@ } .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 + 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; - -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 + left : auto; + right : 0; + transform : translate3d(100%, 0, 0); + transition-property: opacity, transform, visibility } .cif-demo .cmp-Dialog__dialog__root_open { - -webkit-transform: translateZ(0); - 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 + align-content : stretch; + justify-content: end } .cif-demo .cmp-Dialog__dialog__dialog { @@ -2490,21 +2007,19 @@ } .cif-demo .cmp-Dialog__dialog__confirmButton { - -webkit-box-ordinal-group: 0; - -ms-flex-order : -1; - order : -1 + order: -1 } } .cif-demo .cmp-FormError__formError__errorMessage { - color : RGB(var(--venia-global-color-error)); + 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)); + 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; @@ -2513,7 +2028,7 @@ } .cif-demo .cmp-LinkButton__linkButton__root:hover { - color: RGB(var(--venia-global-color-gray-900)) + color: rgb(var(--venia-global-color-gray-900)) } .cif-demo .cmp-Password__password__passwordButton { @@ -2531,59 +2046,233 @@ } .cif-demo .cmp-Password__password__passwordButton:focus { - -webkit-box-shadow: none; - box-shadow : none; - --stroke : var(--venia-global-color-gray-700) + 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-AccountDetails__editForm__root { + display : grid; + gap : .5rem 1.5rem; + grid-template-columns: 1fr 1fr; + width : 100% } -.cif-demo .cmp-breadcrumb__item:before { - content: "> " +.cif-demo .cmp-AccountDetails__editForm__field { + grid-column-end: span 2 } -.cif-demo .cmp-breadcrumb__item--active { - color: #707070 +.cif-demo .cmp-AccountDetails__editForm__buttons { + display : grid; + gap : 1rem; + grid-auto-flow: column; + justify-self : center; + padding : 1rem } -.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 .cmp-AccountDetails__editForm__changePasswordButton, +.cif-demo .cmp-AccountDetails__editForm__changePasswordButtonContainer { + padding-top: 1rem } -.cif-demo .venia-HeroImage .navbar { - margin-top: 20px -} +@media (max-width:960px) { -.cif-demo .venia-HeroImage-title { - display : block; - margin : 0 auto 20px; - text-transform: uppercase + .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 .venia-HeroImage p { - margin: 0 auto +.cif-demo * { + -webkit-box-sizing: border-box; + box-sizing : border-box } -.cif-demo .venia-HeroImage p.h3 { - font-weight: 400; - line-height: 2.58333333 +.cif-demo div.header+div.responsivegrid { + margin : 0 auto; + max-width: 1500px !important; + float : none !important } -.cif-demo .venia-HeroImage-title, -.cif-demo .venia-HeroImage p { - text-shadow: 2px 4px 3px rgba(0, 0, 0, .5) +.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, @@ -2665,8 +2354,8 @@ border-top-color: #d5d5d5 } -.container-fluid .cif-demo .jumbotron, -.container .cif-demo .jumbotron { +.cif-demo .container-fluid .jumbotron, +.cif-demo .container .jumbotron { border-radius: 0 } @@ -2680,8 +2369,8 @@ padding-bottom: 2pc } - .container-fluid .cif-demo .jumbotron, - .container .cif-demo .jumbotron { + .cif-demo .container-fluid .jumbotron, + .cif-demo .container .jumbotron { padding-left : 40px; padding-right: 40px } @@ -2699,6 +2388,45 @@ 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 } @@ -2893,764 +2621,151 @@ } .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) - } + height : 4pc; + width : 4pc; + background: url(../resources/images/logo.svg) } -@keyframes navigation__slideout { - 0% { - -webkit-transform: translateZ(0); - transform : translateZ(0) - } +.cif-demo .flow__root { + --flow-footer-height: 5.5rem; + position : relative +} - to { - -webkit-transform: translate3d(0, 100%, 0); - transform : translate3d(0, 100%, 0) - } +.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 } -@-webkit-keyframes navigation__slideinSide { - 0% { - -webkit-transform: translate3d(-100%, 0, 0); - transform : translate3d(-100%, 0, 0) - } +.cif-demo .flow__body, +.cif-demo .flow__footer { + background-color: #fff; + display : grid +} - to { - -webkit-transform: translateZ(0); - transform : translateZ(0) - } +.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 } -@keyframes navigation__slideinSide { +@-webkit-keyframes enter { 0% { - -webkit-transform: translate3d(-100%, 0, 0); - transform : translate3d(-100%, 0, 0) + opacity : 0; + -webkit-transform: translate3d(0, 100%, 0); + transform : translate3d(0, 100%, 0) } to { + opacity : 1; -webkit-transform: translateZ(0); transform : translateZ(0) } } -@-webkit-keyframes navigation__slideoutSide { +@keyframes enter { 0% { - -webkit-transform: translateZ(0); - transform : translateZ(0) + opacity : 0; + -webkit-transform: translate3d(0, 100%, 0); + transform : translate3d(0, 100%, 0) } to { - -webkit-transform: translate3d(-100%, 0, 0); - transform : translate3d(-100%, 0, 0) - } -} - -@keyframes navigation__slideoutSide { - 0% { + opacity : 1; -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 .icon__root { + height: 25px; + width : 25px } -.cif-demo .userInformation__email { - color : #707070; - font-size : .8125rem; - line-height: 1rem +.cif-demo .icon__root.icon__root-close { + background: url(src/main/resourcesces/images/close.svg) } -.cif-demo .userInformation__iconContainer { - margin: 0 1rem 0 1.25rem +.cif-demo .icon__root.icon__root-kebab { + background: url(src/main/resourcesces/images/kebab.svg) } -.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 .icon__root.icon__root_heart { + background: no-repeat 50% url(src/main/resourcesces/images/heart.svg) } -.cif-demo .myAccountMenu__list { - padding: 0 1.5rem +.cif-demo .icon__root.icon__root_pencil { + background: no-repeat 50% url(src/main/resourcesces/images/pencil.svg) } -.cif-demo .myAccountMenu__signOutTitle { - color: #ff6333 +.cif-demo .icon__root.icon__root_trash { + background: no-repeat 50% url(src/main/resourcesces/images/trash.svg) } -.cif-demo .myAccountMenu__rewardsPoints { - font-size : .625rem; - font-weight: 300; - line-height: .875rem +.cif-demo .icon__root.icon__root_lock { + background: no-repeat 50% url(src/main/resourcesces/images/lock.svg) } -.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 .cmp-Minicart__emptyMiniCartBody__emptyTitle { + font-size : 1.5rem; + line-height : 1.25; + font-style : italic; + margin-bottom: 1.5rem } -.cif-demo .myAccountMenuPage__root { - display : grid; - grid-template-rows: auto 1fr auto; - height : 100%; - width : 100%; - background-color : #fff +.cif-demo .cmp-navigation__group { + display: -webkit-box; + display: -ms-flexbox; + display: flex } -.cif-demo .myAccountMenuPage__logoContainer { - margin: 2rem auto +.cif-demo .cmp-navigation__item { + list-style: none; + padding : 1.5em 1em } -.cif-demo .categoryTree__root--shadow { +.cif-demo .cmp-navigation__item--level-0 .cmp-navigation__group { 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 .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 { @@ -3978,12 +3093,12 @@ } .cif-demo .productFullDetail__groupedProducts th, -.cif-demo td { +td { padding: 15px } .cif-demo .productFullDetail__groupedProducts th, -.cif-demo tr:nth-child(2n) { +tr:nth-child(2n) { background-color: #f2f2f2 } @@ -4094,6 +3209,12 @@ 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; @@ -4329,13 +3450,13 @@ visibility: hidden } -.cif-demo .item__name_pending { +.cif-demo .item__name_pending, +.cif-demo .item__price_pending { background-color: #f6f6f6 } .cif-demo .item__price_pending { - background-color: #f6f6f6; - width : 3rem + width: 3rem } .cif-demo .gallery__root { @@ -4360,7 +3481,7 @@ } @media (max-width:640px) { - .cif-demo div .gallery__items { + div .gallery__items { grid-template-columns: repeat(2, 1fr) } } @@ -4380,6 +3501,15 @@ 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; @@ -4576,6 +3706,7 @@ position : absolute; display : block; left : 20%; + background : unset; color : #fff; font-weight: 900; text-shadow: 2px 2px 4px rgba(0, 0, 0, .9) @@ -4646,6 +3777,7 @@ } .cif-demo .productteaser .productteaser__cta { + position : relative; text-align: center; padding : 10px 0 } @@ -4717,7 +3849,7 @@ font-weight: 600 } -.cif-demo label { +label { cursor: pointer } @@ -4801,6 +3933,122 @@ 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); @@ -4825,18 +4073,20 @@ } .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-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; - --color : var(--venia-teal) + transition-duration : 128ms } .cif-demo .button__root :active { - -webkit-transition-duration: 128ms; - transition-duration : 128ms; - --color : var(--venia-teal-dark) + --color: var(--venia-teal-dark) } .cif-demo .button__root :disabled { @@ -4974,11 +4224,11 @@ color: #c0123f } -.cif-demo main.container { +main.container { padding: .5em 1em } -.cif-demo .footer__root { +.cif-demo .cmp-experiencefragment--footer { background-color: #f6f6f6; border-top : 1px solid #e0e0e0; color : #202020; @@ -4986,28 +4236,13 @@ 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 +#footerCopyright { + display : block; + color : #707070; + font-size : .75rem; + padding : .5rem 2rem 1rem; + line-height: normal; + text-align : center } .cif-demo .header { @@ -5041,7 +4276,8 @@ min-width: 3rem } -.cif-demo .navTrigger__root { +.cif-demo .navTrigger__root, +.cif-demo .searchTrigger__root { height: 3rem; width : 3rem } @@ -5052,9 +4288,7 @@ -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 + transition-timing-function : cubic-bezier(0, 0, .2, 1) } .cif-demo .searchTrigger__open { @@ -5091,6 +4325,10 @@ padding : 0 1rem } +.cif-demo .header__toolbar>a { + justify-self: start +} + .cif-demo .header__accountTrigger, .cif-demo .header__cartTrigger, .cif-demo .header__navTrigger { @@ -5103,21 +4341,10 @@ 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%; @@ -5323,7 +4550,4 @@ right : 0 } -.cif-demo .cmp-navigation__group { - list-style-type: revert; - padding : revert; -} \ No newline at end of file +; \ 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.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 0dad211be6..7e928ff2ef 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 @@ -34,7 +34,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" sling:resourceType="core/wcm/components/text/v2/text" - text="<p>The product component is a server side component written in HTL, allowing to display product details. The product details are retrieved from Magento via GraphQL using the product identifier provided in the URL selector.</p> <p>On an author instance, when the page URL does not contain any selector, like for example when the page is edited in the AEM Sites editor, the component displays some placeholder data. On a publish instance, not setting any selector displays a &quot;Product not found&quot; message.<br> </p> <p>Note that when a selector is set, this example page always displays the same product data based on some sample data. Try different options:</p> <ul> <li><a href="/content/core-components-examples/library/commerce/product.chaz-kangeroo-hoodie.html">Showing sample data (selector is set in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.set-of-sprite-yoga-straps.html">Showing sample data for a grouped product (only for this particular selector in the URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.sprite-yoga-companion-kit.html">Showing sample data for a bundle product (only for this particular selector in the URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.html">Showing placeholder data on author instance (no selector in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product/manual-product.html">Showing sample data (manual product selection)</a></li> </ul> <p>For the three examples with sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the product prices on page load. This demonstrates how prices can be refreshed upon page load even if the rest of the page data may be cached in the AEM dispatcher.</p> <p>In addition, the example showing a bundle product includes a small React application that is activated when clicking on the &quot;Customize&quot; button. It is used to fetch the bundle options with a client-side GraphQL request and to calculcate and prepare the product data for the cart when selecting the options of the bundle product.<br> </p> " + text="<p>The product component is a server side component written in HTL, allowing to display product details. The product details are retrieved from Magento via GraphQL using the product identifier provided in the URL selector.</p> <p>On an author instance, when the page URL does not contain any selector, like for example when the page is edited in the AEM Sites editor, the component displays some placeholder data. On a publish instance, not setting any selector displays a &quot;Product not found&quot; message.<br> </p> <p>Note that when a selector is set, this example page always displays the same product data based on some sample data. Try different options:</p> <ul> <li><a href="/content/core-components-examples/library/commerce/product.chaz-kangeroo-hoodie.html">Showing sample data (selector is set in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.chaz-crocodile-hoodie.html">Showing sample data for a staged product (selector is set in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.set-of-sprite-yoga-straps.html">Showing sample data for a grouped product (only for this particular selector in the URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.sprite-yoga-companion-kit.html">Showing sample data for a bundle product (only for this particular selector in the URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.html">Showing placeholder data on author instance (no selector in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product/manual-product.html">Showing sample data (manual product selection)</a></li> </ul> <p>For the three examples with sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the product prices on page load. This demonstrates how prices can be refreshed upon page load even if the rest of the page data may be cached in the AEM dispatcher.</p> <p>In addition, the example showing a bundle product includes a small React application that is activated when clicking on the &quot;Customize&quot; button. It is used to fetch the bundle options with a client-side GraphQL request and to calculcate and prepare the product data for the cart when selecting the options of the bundle product.<br> </p> " textIsRich="true"/> Date: Wed, 7 Jul 2021 11:06:25 +0200 Subject: [PATCH 4/6] update help text for the venia.css --- .../cif-components-examples/clientlibs/venia-theme/venia.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 707acc6492..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 @@ -12,7 +12,9 @@ * ******************************************************************************/ /* - * To prefix the css classes with .cif-demo use: ^([ ]*)\. $1\.cif-demo \. + * - 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); From 08228c105dd8458b02f82fcd14929fe046437e36 Mon Sep 17 00:00:00 2001 From: Dirk Rudolph Date: Thu, 8 Jul 2021 13:53:07 +0200 Subject: [PATCH 5/6] fix example tests --- .../commerce/core/examples/servlets/GraphqlServlet.java | 8 +++++++- .../core/examples/servlets/GraphqlServletTest.java | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) 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 f9490b208a..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 @@ -96,6 +96,7 @@ public class GraphqlServlet extends SlingAllMethodsServlet { 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"; @@ -410,6 +411,8 @@ 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 (uidPattern.matches()) { @@ -418,7 +421,6 @@ private Products readProductsResponse(DataFetchingEnvironment env) { } 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); @@ -470,6 +472,10 @@ 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)) { 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 e326bc85c3..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 @@ -282,7 +282,7 @@ public void testProductModelV2Staged() throws ServletException { prepareModel(PRODUCT_V2_RESOURCE); MockRequestPathInfo requestPathInfo = (MockRequestPathInfo) context.request().getRequestPathInfo(); - requestPathInfo.setSelectorString("chaz-crocodile-hoodie"); + 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); @@ -377,7 +377,7 @@ public void testProductListModelV2Staged() throws ServletException { // The category data is coming from magento-graphql-category.json MockRequestPathInfo requestPathInfo = (MockRequestPathInfo) context.request().getRequestPathInfo(); - requestPathInfo.setSelectorString("uid-2"); + 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); From 1a477922c676444445e5afb82096c9b321638b8a Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Wed, 14 Jul 2021 11:25:04 +0200 Subject: [PATCH 6/6] CIF-2182 - fix sample content urls --- .../library/commerce/product/.content.xml | 2 +- .../library/commerce/product/manual-product/.content.xml | 2 +- .../library/commerce/productlist/.content.xml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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 8a54b0c649..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 @@ -34,7 +34,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" sling:resourceType="core/wcm/components/text/v2/text" - text="<p>The product component is a server side component written in HTL, allowing to display product details. The product details are retrieved from Magento via GraphQL using the product identifier provided in the URL selector.</p> <p>On an author instance, when the page URL does not contain any selector, like for example when the page is edited in the AEM Sites editor, the component displays some placeholder data. On a publish instance, not setting any selector displays a &quot;Product not found&quot; message.<br> </p> <p>Note that when a selector is set, this example page always displays the same product data based on some sample data. Try different options:</p> <ul> <li><a href="/content/core-components-examples/library/commerce/product.html/chaz-kangeroo-hoodie.html">Showing sample data (selector is set in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.chaz-crocodile-hoodie.html">Showing sample data for a staged product (selector is set in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.html/set-of-sprite-yoga-straps.html">Showing sample data for a grouped product (only for this particular selector in the URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.html/sprite-yoga-companion-kit.html">Showing sample data for a bundle product (only for this particular selector in the URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.html">Showing placeholder data on author instance (no selector in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product/manual-product.html">Showing sample data (manual product selection)</a></li> </ul> <p>For the three examples with sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the product prices on page load. This demonstrates how prices can be refreshed upon page load even if the rest of the page data may be cached in the AEM dispatcher.</p> <p>In addition, the example showing a bundle product includes a small React application that is activated when clicking on the &quot;Customize&quot; button. It is used to fetch the bundle options with a client-side GraphQL request and to calculcate and prepare the product data for the cart when selecting the options of the bundle product.<br> </p> " + text="<p>The product component is a server side component written in HTL, allowing to display product details. The product details are retrieved from Magento via GraphQL using the product identifier provided in the URL selector.</p> <p>On an author instance, when the page URL does not contain any selector, like for example when the page is edited in the AEM Sites editor, the component displays some placeholder data. On a publish instance, not setting any selector displays a &quot;Product not found&quot; message.<br> </p> <p>Note that when a selector is set, this example page always displays the same product data based on some sample data. Try different options:</p> <ul> <li><a href="/content/core-components-examples/library/commerce/product.html/chaz-kangeroo-hoodie.html">Showing sample data (selector is set in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.html/chaz-crocodile-hoodie.html">Showing sample data for a staged product (selector is set in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.html/set-of-sprite-yoga-straps.html">Showing sample data for a grouped product (only for this particular selector in the URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.html/sprite-yoga-companion-kit.html">Showing sample data for a bundle product (only for this particular selector in the URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product.html">Showing placeholder data on author instance (no selector in URL)</a></li> <li><a href="/content/core-components-examples/library/commerce/product/manual-product.html">Showing sample data (manual product selection)</a></li> </ul> <p>For the three examples with sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the product prices on page load. This demonstrates how prices can be refreshed upon page load even if the rest of the page data may be cached in the AEM dispatcher.</p> <p>In addition, the example showing a bundle product includes a small React application that is activated when clicking on the &quot;Customize&quot; button. It is used to fetch the bundle options with a client-side GraphQL request and to calculcate and prepare the product data for the cart when selecting the options of the bundle product.<br> </p> " textIsRich="true"/>