/* NOTE: This sample code is defining vars at . Use any CSS selector to narrow or broaden the scope. */ body { --vs-spacer: 1rem; --vs-gap: 1.5rem; --vs-font-family: inherit; --vs-font-weight: unset; --vs-header-font-family: inherit; --vs-header-font-weight: inherit; --vs-header-font-size: 1.3125rem; /* Badges: Uses include Product Catalog, Product Item, and Avaiable In. */ --vs-badge-gap: calc(var(--vs-spacer, 1rem) * 0.75); --vs-badge-padding-y: 4px; --vs-badge-padding-x: 12px; --vs-badge-font-size: 0.75em; --vs-badge-font-weight: 600; --vs-badge-line-height: 1; --vs-badge-letter-spacing: normal; --vs-badge-color: #000000; --vs-badge-background-color: #cfe3fa; --vs-badge-border: inherit; --vs-badge-border-radius: 12rem; --vs-badge-text-transform: none; /* Badge: Restricted Variant */ --vs-badge-restricted-color: #FFFFFF; --vs-badge-restricted-background-color: #6C757D; --vs-badge-restricted-border: inherit; --vs-badge-restricted-text-transform: none; /* Badge Tooltips */ --vs-badge-tooltip-offset: 4px; --vs-badge-tooltip-arrow-size: 8px; --vs-badge-tooltip-color: #ffffff; --vs-badge-tooltip-background-color: #222222; --vs-badge-tooltip-padding-y: 12px; --vs-badge-tooltip-padding-x: 16px; --vs-badge-tooltip-border-radius: 4px; --vs-badge-tooltip-font-size: 1rem; --vs-badge-tooltip-font-weight: normal; --vs-badge-tooltip-text-transform: none; --vs-badge-tooltip-z-index: 100; } .vs-cart { --vs-cart-font-family: "Proxima Nova", sans-serif; --vs-cart-color: #000000; --vs-cart-background-color: #ffffff; --vs-cart-link-color: #1C6DB0; --vs-cart-link-text-decoration: none; --vs-cart-link-hover-color: #1C6DB0; --vs-cart-link-hover-text-decoration: underline; --vs-cart-shown-width-max: 400px; --vs-cart-animation-duration: 300ms; --vs-cart-animation-timing-function: ease-in; --vs-cart-animation-close-duration: 300ms; --vs-cart-animation-close-timing-function: ease-in-out; --vs-cart-stage-backdrop-z-index: 1040; --vs-cart-stage-backdrop-background-color: rgba(0, 0, 0, 0); --vs-cart-stage-z-index: 1045; --vs-cart-stage-backdrop-shown-background-color: rgba(0, 0, 0, 0.5); } /* When using a simple theme in a dark contrast ('dark', 'red-dark', etc), the default variables are as follows: */ .vs-cart[data-vs-theme-is-dark="true"] { --vs-cart-color: #ffffff; --vs-cart-background-color: #000000; --vs-cart-stage-backdrop-background-color: rgba(255, 255, 255, 0); --vs-cart-stage-backdrop-shown-background-color: rgba(255, 255, 255, 0.2); } .vs-products { --vs-products-margin-bottom: 1rem; --vs-products-spacer: var(--vs-spacer, 1rem); --vs-products-gap: var(--vs-gap, 1.5rem); --vs-products-card-min-width: 325px; --vs-products-card-max-width: 400px; --vs-products-list-card-max-width: 578px; --vs-products-img-wrapper-width: 324px; --vs-products-img-wrapper-height: 276px; --vs-products-img-width: 100%; --vs-products-img-height: 276px; --vs-products-list-md-img-width: 450px; --vs-products-font-family: var(--vs-font-family, 'Proxima Nova', sans-serif); --vs-products-font-weight: var(--vs-font-weight, normal); --vs-products-font-size: 1.3125rem; --vs-products-line-height: 1.2; --vs-products-header-font-family: var(--vs-header-font-family, inherit); --vs-products-header-font-weight: var(--vs-header-font-weight, 600); --vs-products-color: #212529; --vs-products-background-color: #ffffff; --vs-products-secondary-color: #6c757d; --vs-products-border-color: #ced4da; --vs-products-border-width: 1px; --vs-products-border-style: solid; --vs-products-border-radius: 0.3rem; --vs-products-act-border-radius: var(--vs-products-border-radius, 0.3rem); --vs-products-form-control-height: inherit; --vs-products-form-control-inline-height: 3rem; --vs-products-padding: calc(var(--vs-products-spacer, var(--vs-spacer, 1rem)) * 1.5); --vs-badge-padding-x: 0.65em; --vs-badge-padding-y: 0.35em; --vs-badge-font-size: 0.75em; --vs-badge-font-weight: 700; --vs-badge-color: #000000; --vs-badge-background-color: rgba(207, 227, 250, 1); --vs-badge-border-radius: 50rem; } .vs-add-to-cart { /* General */ --vs-atc-margin-bottom: 15px; --vs-atc-horizontal-select-margin-right: 15px; /* Button */ --vs-atc-button-color: #ffffff; --vs-atc-button-background-color: #0d6efd; --vs-atc-button-border-color: #0d6efd; --vs-atc-button-border-width: 1px; --vs-atc-button-border-style: solid; --vs-atc-button-border-radius: 4px; --vs-atc-button-padding-y: 0.375rem; --vs-atc-button-padding-x: 0.75rem; --vs-atc-button-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0px 8px 16px 0px rgba(0, 0, 0, 0.149); --vs-atc-button-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; --vs-atc-button-font-family: inherit; --vs-atc-button-font-size: 1rem; --vs-atc-button-font-weight: 500; --vs-atc-button-line-height: 1.5; /* Hover */ --vs-atc-button-hover-color: #ffffff; --vs-atc-button-hover-background-color: #0b5ed7; --vs-atc-button-hover-border-color: #0a58ca; /* Focus & Active */ --vs-atc-button-active-color: #ffffff; --vs-atc-button-active-background-color: #0a58ca; --vs-atc-button-active-border-color: #0a53be; --vs-atc-button-active-shadow: inset 0 3px 5px rgba(#000, .125); /* Disabled */ --vs-atc-button-disabled-color: #ffffff; --vs-atc-button-disabled-background-color: #0d6efd; --vs-atc-button-disabled-border-color: #0d6efd; --vs-atc-button-disabled-opacity: 0.65; --vs-atc-button-disabled-box-shadow: none; /* Quanitiy Select */ --vs-atc-select-color: #000000; --vs-atc-select-background-color: #ffffff; --vs-atc-select-padding: 0.375rem 2.25rem 0.375rem 0.75rem; --vs-atc-select-margin-bottom: 15px; --vs-atc-select-background-image: '** SVG Excaped Image **'; --vs-atc-select-background-position: right 0.75rem center; --vs-atc-select-background-size: 16px 12px; --vs-atc-select-border-width: 1px; --vs-atc-select-border-style: solid; --vs-atc-select-border-color: #000000; --vs-atc-select-border-radius: 0.375rem; --vs-atc-select-box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%); --vs-atc-select-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; --vs-atc-select-font-size: 1rem; --vs-atc-select-font-weight: 300; --vs-atc-select-line-height: 1.5; /* Focus */ --vs-atc-select-focus-color: #000; --vs-atc-select-focus-background-color: #ffffff; --vs-atc-select-focus-border-color: #86b7fe; --vs-atc-select-focus-box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%), 0 0 0 0.25rem rgb(13 110 253 / 25%); /* Disabled */ --vs-atc-select-disabled-color: #a9a9a9; --vs-atc-select-disabled-background-color: #e9ecef; --vs-atc-select-disabled-border-color: #ced4da; --vs-atc-select-disabled-cursor: not-allowed; }