*
* This will reverse the displayed order of the system so that it runs in the
* opposite order to our source, effectively flipping the system over.
*
*
*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes.
=========================================== */
.o-layout {
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
margin: 0 0 0 calc(-1 * var(--default-spacing-unit));
padding: 0;
}
.o-layout__item {
flex: 1 1 auto;
max-width: 100%;
padding-left: var(--default-spacing-unit);
}
.o-layout.o-layout__item {
margin-left: 0;
}
/* Layout Display Direction.
* The flex-direction property specifies the direction of the flexible items
* inside the flex container. The default value of flex-direction is row
* (left-to-right, top-to-bottom).
=========================================== */
/**
* To reverse the layout direction, use o-layout--row-reverse.
*/
.o-layout--row-reverse {
flex-direction: row-reverse;
}
/**
* Use o-layout--column to set the flex items vertically.
*/
.o-layout--column {
align-items: flex-start;
flex-direction: column;
}
.o-layout--column > .o-layout__item[ class*="u-width-12" ],
.o-layout--column-reverse > .o-layout__item[ class*="u-width-12" ] {
width: 100%;
}
/**
* Same as column, but reversed.
*/
.o-layout--column-reverse {
align-items: flex-start;
flex-direction: column-reverse;
}
@media screen and ( min-width: 48em ) {
.o-layout--row--m {
flex-direction: row;
}
.o-layout--row-reverse--m {
flex-direction: row-reverse;
}
.o-layout--column--m {
flex-direction: column;
}
.o-layout--column-reverse--m {
flex-direction: column-reverse;
}
}
@media screen and ( min-width: 60em ) {
.o-layout--row--l {
flex-direction: row;
}
.o-layout--row-reverse--l {
flex-direction: row-reverse;
}
.o-layout--column--l {
flex-direction: column;
}
.o-layout--column-reverse--l {
flex-direction: column-reverse;
}
}
@media screen and ( min-width: 90em ) {
.o-layout--row--w {
flex-direction: row;
}
.o-layout--row-reverse--w {
flex-direction: row-reverse;
}
.o-layout--column--w {
flex-direction: column;
}
.o-layout--column-reverse--w {
flex-direction: column-reverse;
}
}
/* Gutter size modifiers.
=========================================== */
/**
* Smaller gutters between items.
*/
.o-layout--narrow {
margin-left: calc(-0.5 * var(--default-spacing-unit));
}
.o-layout--narrow > .o-layout__item {
padding-left: calc(0.5 * var(--default-spacing-unit));
}
/**
* Larger gutters between items.
*/
.o-layout--wide {
margin-left: calc(-2 * var(--default-spacing-unit));
}
.o-layout--wide > .o-layout__item {
padding-left: calc(2 * var(--default-spacing-unit));
}
/**
* No gutters between items.
*/
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
/**
* Make full width of parent.
*/
.o-layout--full {
margin-right: calc(-1 * var(--default-spacing-unit));
}
/* Vertical gutter modifiers.
=========================================== */
/**
* Include vertical gutters on layout items.
*/
.o-layout--spaced > .o-layout__item {
margin-bottom: var(--default-spacing-unit);
}
/**
* If we've chosen to change the size of the horizontal gutters, let's change
* the vertical gutters accordingly.
*/
.o-layout--spaced.o-layout--narrow > .o-layout__item {
margin-bottom: calc(0.5 * var(--default-spacing-unit));
}
.o-layout--spaced.o-layout--wide > .o-layout__item {
margin-bottom: calc(2 * var(--default-spacing-unit));
}
/* Align-Items modifiers.
* The align-items property controls how flex items are positioned
* when the items do not use all available space along the container's cross-axis.
=========================================== */
/**
* Items are positioned at the start of the container's cross-axis.
*/
.o-layout--align-top {
align-items: flex-start;
}
/**
* Items are positioned along the center of the container's cross-axis.
*/
.o-layout--align-center {
align-items: center;
}
/**
* Items are positioned at the end of the container's cross-axis.
*/
.o-layout--align-bottom {
align-items: flex-end;
}
/**
* Items are positioned at along the container's cross-axis so that their baselines align.
*/
.o-layout--align-baseline {
align-items: baseline;
}
/**
* Default value. Items are stretched to fit the container's cross-axis.
*/
.o-layout--align-stretch {
align-items: stretch;
}
/* Align-Content modifiers.
* The align-content property controls how lines are positioned in multi-line containers.
=========================================== */
/**
* Default value. Lines are packed at the start of the container's cross-axis.
*/
.o-layout--align-content-start {
align-content: flex-start;
}
/**
* Lines are packed along the center of the container's cross-axis.
*/
.o-layout--align-content-center {
align-content: center;
}
/**
* Lines are packed at the end of the container's cross-axis.
*/
.o-layout--align-content-end {
align-content: flex-end;
}
/**
* Lines are distributed along the container's cross-axis with equal spacing around each line.
*/
.o-layout--align-content-around {
align-content: space-around;
}
/**
* Lines are distributed along the container's cross-axis with equal spacing between each line.
*/
.o-layout--align-content-between {
align-content: space-between;
}
/* Align-Self modifiers.
* The align-self property controls how individual flex items are positioned along the container's cross-axis.
=========================================== */
/**
* Default value. Items are aligned based on the flex container's `align-items` value.
*/
.o-layout--align-self-auto {
align-self: auto;
}
/**
* Items are aligned to the start of the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-start {
align-self: flex-start;
}
/**
* Items are aligned along the center of the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-center {
align-self: center;
}
/**
* Items are aligned to the end of the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-end {
align-self: flex-end;
}
/**
* Items are stretched to fill the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-stretch {
align-self: stretch;
}
/* Justify-Content modifiers.
* The justify-content property controls how flex items are positioned
* when the items do not use all available space along the container's main-axis.
=========================================== */
/**
* Default value. Items are justified at the start of the container's main-axis.
*/
.o-layout--justify-start {
justify-content: flex-start;
}
/**
* Items are justified along the center of the container's main-axis.
*/
.o-layout--justify-center {
justify-content: center;
}
/**
* Items are justified at the end of the container's main-axis.
*/
.o-layout--justify-end {
justify-content: flex-end;
}
/**
* Items are justified along the container's main-axis with equal spacing around each item.
*/
.o-layout--justify-around {
justify-content: space-around;
}
/**
* Items are justified along the container's main-axis with equal spacing between each item.
*/
.o-layout--justify-between {
justify-content: space-between;
}
/* Growth control.
=========================================== */
.o-layout--grow {
flex-grow: 1;
}
.o-layout--no-grow {
flex-grow: 0;
}
.o-layout--shrink {
flex-shrink: 1;
}
.o-layout--no-shrink {
flex-shrink: 0;
}
/* Wrapping modifiers.
=========================================== */
.o-layout--no-wrap {
flex-wrap: nowrap;
}
.o-layout--wrap {
flex-wrap: wrap;
}
.o-layout--wrap-reverse {
flex-wrap: wrap-reverse;
}
/* Flex ordering modifiers.
* Set an item to be first or last in grid.
=========================================== */
.o-layout__first {
order: -1;
}
.o-layout__last {
order: 1;
}
@media screen and ( min-width: 40em ) {
.o-layout__first--s {
order: -1;
}
.o-layout__last--s {
order: 1;
}
}
@media screen and ( min-width: 48em ) {
.o-layout__first--m {
order: -1;
}
.o-layout__last--m {
order: 1;
}
}
@media screen and ( min-width: 60em ) {
.o-layout__first--l {
order: -1;
}
.o-layout__last--l {
order: 1;
}
}
@media screen and ( min-width: 90em ) {
.o-layout__first--w {
order: -1;
}
.o-layout__last--w {
order: 1;
}
}
/* ==========================================================================
OBJECTS / LISTS
========================================================================== */
/**
* The o-list-bare object strips list-like appearance from lists by removing
* their bullets, and any indentation.
*/
.o-list-bare {
list-style: none;
margin-left: 0;
}
/**
* The o-list-block object displays any list of items into stacked blocks.
*/
.o-list-block {
list-style: none;
margin-left: 0;
}
.o-list-block__item {
display: block;
}
/**
* The o-list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
list-style: none;
margin-left: 0;
}
.o-list-inline__item {
display: inline-block;
}
.o-list-inline__item:not(:last-child) {
margin-right: var(--default-spacing-unit);
}
/* Spacing modifiers
=========================================== */
.o-list-inline--narrow > .o-list-inline__item {
margin-right: calc(0.5 * var(--default-spacing-unit));
}
.o-list-inline--wide > .o-list-inline__item {
margin-right: calc(2 * var(--default-spacing-unit));
}
/* ==========================================================================
OBJECTS / TABLES
========================================================================== */
/**
* A simple object for manipulating the structure of HTML 'table's.
*/
.o-table {
width: 100%;
}
/* Equal-width table cells.
========================================================================== */
/**
* 'table-layout: fixed' forces all cells within a table to occupy the same
* width as each other. This also has performance benefits: because the browser
* does not need to (re)calculate cell dimensions based on content it discovers,
* the table can be rendered very quickly. Further reading:
* https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
*/
.o-table--fixed {
table-layout: fixed;
}
/* Padding variants.
========================================================================== */
.o-table--narrow th,
.o-table--narrow td {
padding: calc(0.5 * var(--default-spacing-unit));
}
.o-table--wide th,
.o-table--wide td {
padding: calc(2 * var(--default-spacing-unit));
}
/* Borderless table
* Removes default border-bottom on TABLE rows.
=========================================== */
.o-table-borderless tr {
border: none;
}
/* ==========================================================================
OBJECTS / WRAPPER
========================================================================== */
/**
* Page-level constraining and wrapping elements.
*/
.o-site-wrapper {
margin-left: auto;
margin-right: auto;
max-width: var(--default-site-width);
width: 100%;
}
.o-wrapper {
margin-left: auto;
margin-right: auto;
max-width: var(--default-wrapper-width);
padding-left: var(--default-spacing-unit);
padding-right: var(--default-spacing-unit);
width: 100%;
}
.o-wrapper--full {
max-width: var(--default-site-width);
}
.o-wrapper--flush {
padding-left: 0;
padding-right: 0;
}
/* ==========================================================================
COMPONENTS / BUTTONS
========================================================================== */
.c-button {
align-items: center;
align-self: start;
background-color: var(--primary);
border: var(--default-border-width) solid var(--transparent);
border-radius: var(--default-border-radius);
color: var(--white);
cursor: pointer;
display: inline-flex;
font-family: var(--primary-font-family);
font-size: var(--default-input-font-size);
font-weight: var(--font-medium);
justify-content: center;
letter-spacing: 0.08em;
line-height: 1;
padding: 1rem 1.375rem;
text-decoration: none;
text-transform: uppercase;
transition: background-color 0.1s, color 0.125s ease-in-out;
-webkit-user-select: none;
user-select: none;
}
.c-button--secondary {
background-color: var(--white);
border-color: var(--primary);
color: var(--primary);
}
.c-button-dark {
background-color: var(--white);
color: var(--primary);
}
.c-button-dark--secondary {
background-color: var(--transparent);
border-color: var(--white);
color: var(--white);
}
/* Button state modifiers
=========================================== */
.c-button:active,
.c-button:focus,
.c-button:hover {
text-decoration: none;
transition-duration: 0.25s;
}
.c-button:disabled,
.c-button[ aria-disabled="true" ] {
background-color: var(--gray-300);
cursor: not-allowed;
}
.c-button--secondary:disabled,
.c-button--secondary[ aria-disabled="true" ] {
background-color: var(--white);
border-color: var(--gray-300);
color: var(--gray-300);
}
.c-button-dark:disabled,
.c-button-dark[ aria-disabled="true" ] {
background-color: var(--gray-600);
color: var(--black);
}
.c-button-dark--secondary:disabled,
.c-button-dark--secondary[ aria-disabled="true" ] {
background-color: var(--transparent);
border-color: var(--gray-600);
color: var(--gray-600);
}
.c-button:focus:not(:focus-visible) {
outline: none;
outline-color: var(--transparent);
outline-offset: 0rem;
}
.c-button:focus-visible {
outline: calc(var(--default-border-width) * 2) solid var(--focus);
outline-color: var(--focus);
outline-offset: var(--default-border-width);
transition: none;
}
@media ( hover: hover ) and ( pointer: fine ) {
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
background-color: var(--primary--hover);
}
.c-button--secondary:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
background-color: var(--white);
border-color: var(--primary);
color: var(--primary);
outline: var(--default-border-width) solid var(--primary);
}
.c-button-dark:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
background-color: var(--primary);
border-color: var(--primary);
color: var(--white);
}
.c-button-dark--secondary:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
background-color: var(--white);
border-color: var(--white);
color: var(--primary);
}
}
/* Button shape modifiers
=========================================== */
.c-button--circle {
border-radius: 50%;
}
.c-button--circle,
.c-button--square {
padding: 1rem;
}
/* Button sizing modifiers
=========================================== */
.c-button--large {
padding: 1.375rem 2.3125rem;
}
.c-button--flush {
padding-left: 0;
padding-right: 0;
}
.c-button--full {
width: 100%;
}
@media screen and ( max-width: 47.999em ) {
.c-button--full-small {
width: 100%;
}
}
/* Button aesthetic modifier
(For buttons you want to look like normal links)
=========================================== */
.c-button--as-link {
background-color: rgba(0, 0, 0, 0);
border: none;
border-radius: 0;
color: var(--primary);
font-size: 0.875rem;
font-weight: var(--font-medium);
letter-spacing: 0;
line-height: inherit;
padding: 0;
text-decoration: underline;
text-decoration-thickness: var(--text-link-underline-width);
text-transform: none;
text-underline-offset: var(--text-link-underline-offset);
transition: -webkit-text-decoration ease-in-out 0.2s;
transition: text-decoration ease-in-out 0.2s;
transition: text-decoration ease-in-out 0.2s,
-webkit-text-decoration ease-in-out 0.2s;
-webkit-user-select: auto;
user-select: auto;
}
.c-button--as-link:is(:active, :focus, :hover) {
text-decoration: underline;
text-decoration-color: var(--primary--hover);
text-decoration-thickness: 0.125rem;
}
.c-button--as-link:is(:focus, :focus-visible) {
outline-color: var(--focus);
outline-offset: 0.25rem;
text-decoration: underline;
}
/* ==========================================================================
COMPONENTS / CONTROL GROUPS
========================================================================== */
/**
* To group related buttons and/or inputs together, you can use the
* `.c-control-group` wrapping element. This will bunch the related elements
* together and remove the spacing between them.
*/
.c-control-group {
align-items: stretch;
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;
}
.c-control-group .c-control-group__button,
.c-control-group .c-control-group__field {
border-radius: 0;
flex: 1 1 auto;
min-width: 0;
position: relative;
width: 1%;
}
.c-control-group .c-control-group__field {
height: auto;
margin-bottom: 0;
}
.c-control-group .c-control-group__button:not(:first-child):not(:first-of-type),
.c-control-group .c-control-group__field:not(:first-child):not(:first-of-type) {
border-left-width: 0;
}
.c-control-group .c-control-group__button:first-child,
.c-control-group .c-control-group__field:first-child {
border-bottom-left-radius: var(--default-border-radius);
border-top-left-radius: var(--default-border-radius);
}
.c-control-group .c-control-group__button:last-child,
.c-control-group .c-control-group__field:last-child {
border-bottom-right-radius: var(--default-border-radius);
border-top-right-radius: var(--default-border-radius);
}
/* ==========================================================================
COMPONENTS / MINI-MODAL
========================================================================== */
.is-inert {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.has-dialog {
overflow: hidden;
}
.c-dialog[ aria-hidden="true" ] {
display: none;
}
.c-dialog[ aria-hidden="false" ] {
display: block;
position: relative;
z-index: 500;
}
.c-dialog__overlay {
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.c-dialog__overlay,
.c-dialog__container {
will-change: transform;
}
.c-dialog__container {
background-color: var(--white);
border-radius: 0.25rem;
margin-left: 1.25rem;
margin-right: 1.25rem;
max-height: 90vh;
max-width: 40rem;
min-width: 20rem;
overflow-y: auto;
padding: 2rem;
}
.c-dialog__container--fit {
width: -moz-fit-content;
width: fit-content;
}
.c-dialog__header {
align-items: flex-start;
display: flex;
justify-content: space-between;
}
.c-dialog__title {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
}
.c-dialog__close {
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%23fff' stroke='%23767676'%3E%3Ccircle cx='14' cy='14' r='14' stroke='none'/%3E%3Ccircle cx='14' cy='14' r='13.5' fill='none'/%3E%3C/g%3E%3Cpath d='m17.061 9.999-3.062 3.062-3.06-3.062-.939.939 3.061 3.061-3.062 3.062.939.939 3.061-3.061 3.062 3.06.939-.939-3.061-3.061 3.06-3.06Z' fill='%23575a5d'/%3E%3C/svg%3E");
border: 0 none;
border-radius: 50%;
cursor: pointer;
height: 1.75rem;
line-height: normal;
padding: 0;
transform: translate(50%, -50%);
width: 1.75rem;
}
.c-dialog__content {
margin-top: 2rem;
}
.c-dialog__content > *:last-child {
margin-bottom: 0;
}
@media screen and ( min-width: 48em ) {
.c-dialog__container {
margin-left: auto;
margin-right: auto;
}
}
/************************** \
Animation Style
\ **************************/
@keyframes dialogFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes dialogFadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes dialogSlideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}
@keyframes dialogSlideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
.c-dialog[ aria-hidden="false" ] .c-dialog__overlay {
animation: dialogFadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.c-dialog[ aria-hidden="false" ] .c-dialog__container {
animation: dialogSlideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.c-dialog[ aria-hidden="true" ] .c-dialog__overlay {
animation: dialogFadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.c-dialog[ aria-hidden="true" ] .c-dialog__container {
animation: dialogSlideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
@media screen and ( prefers-reduced-motion: reduce ) {
.c-dialog[ aria-hidden="false" ] .c-dialog__overlay {
animation: none;
opacity: 1;
}
.c-dialog[ aria-hidden="true" ] .c-dialog__overlay {
animation: none;
opacity: 0;
}
}
/* ==========================================================================
COMPONENTS / DIVIDER
========================================================================== */
/**
* Divider component to provide more prominent horizontal rules between other
* elements.
*
* The default Divider and it's `--top` modifier are intended for use on
* horizontal rules.
* e.g. `
`
*
* 1. Set a transparent border on the relevant edge to prevent element collapse.
* 2. Reduce the `margin-bottom` by the same width as the divider in order to
* keep on our baseline grid.
*/
.c-divider {
border: solid transparent;
border-width: 0 0 var(--default-border-width); /* 1 */
margin-bottom: calc(
var(--default-spacing-unit) - var(--default-border-width)
); /* 2 */
position: relative;
}
.c-divider:before,
.c-divider:after {
content: "";
display: block;
position: absolute;
width: 100%;
}
/**
* Divider gradient border.
*/
.c-divider:before {
background: linear-gradient(
to right,
rgba(191, 191, 191, 0),
rgb(192, 192, 192),
rgba(191, 191, 191, 0)
);
bottom: 0;
height: var(--default-border-width);
}
/**
* Divider shadow.
*/
.c-divider:after {
background: radial-gradient(
at 50% 0,
rgba(74, 74, 74, 0.15),
transparent 40%
);
height: calc(var(--default-spacing-unit) / 2);
top: 100%;
}
/**
* Top divider
*/
.c-divider--top {
border-width: var(--default-border-width) 0 0;
}
.c-divider--top:before {
background: linear-gradient(
to right,
rgba(191, 191, 191, 0),
rgb(192, 192, 192),
rgba(191, 191, 191, 0)
);
bottom: 100%;
}
.c-divider--top:after {
background: radial-gradient(
at 50% 100%,
rgba(74, 74, 74, 0.15),
transparent 40%
);
top: calc(
var(--default-spacing-unit) / 2 + var(--default-border-width) * -0.0625rem
);
}
/* ==========================================================================
COMPONENTS / FORMS
========================================================================== */
/* Form list
=========================================== */
/**
* All form fields should be presented in a list so that
*
* a) they are easier to navigate using a screen reader;
* b) if CSS fails to load for any reason, the user is still presented with a
* well-formatted list of fields.
*/
.c-form-list:not(.o-layout) {
list-style: none;
margin: 0;
padding: 0;
}
.c-form-list__item,
.c-form__item {
display: block;
margin-bottom: 1rem;
width: 100%;
}
.c-form-list:not(.professional-info) .c-form-list__item:last-child,
.c-form-list:not(.professional-info) .c-form__item:last-child {
margin-bottom: 0;
}
@media ( min-width: 48em ) {
.c-form-list__item,
.c-form__item {
max-width: 20rem;
}
/* For any inputs that need to be displayed full-width */
.c-form-list__item--full,
.c-form__item--full {
max-width: 100%;
}
}
/* Form labels
=========================================== */
/**
* All LABEL elements must also carry a class of `.c-form-label`. By applying
* these styles to a class and not to the LABEL element directly, we are free
* to reuse the same look-and-feel on spoofed LABEL elements. E.g. when we have
* a `meta label` covering a number of sub labels:
*
* Gender
* • Male • Female • Rather not say
*
*/
.c-form-label {
color: var(--gray-600);
display: inline-flex;
font-size: 0.8125rem;
margin-bottom: 0.5rem;
}
/* Form text inputs
=========================================== */
/**
* All text-like form inputs require a class of `.c-form-input`: we do not use
* selectors like `input[type="text"] {}`.
*/
.c-form-input {
-webkit-appearance: none;
appearance: none;
background-color: var(--white);
border: var(--default-border-width) solid var(--gray-300);
border-radius: var(--default-border-radius);
display: inline-block;
font-family: inherit;
font-size: var(--default-input-font-size);
line-height: 1;
margin-bottom: 0.25rem;
padding: 0.9375rem 1rem;
width: 100%;
}
/**
* For use on large text inputs such as a textarea
*/
.c-form-input--long {
min-height: 6rem;
resize: vertical;
}
/* Form select inputs
=========================================== */
.c-form-select {
cursor: pointer;
display: inline-block;
font-size: var(--default-input-font-size);
line-height: 1;
margin-bottom: 0.5rem;
position: relative;
width: 100%;
}
/**
* Gradient to hide the overflow of long labels
*/
.c-form-select:before {
background: linear-gradient(
to left,
rgb(255, 255, 255) 60%,
rgba(255, 255, 255, 0)
);
border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0;
bottom: var(--default-border-radius);
content: "";
height: calc(100% - calc(2 * var(--default-border-width)));
pointer-events: none;
position: absolute;
right: calc(var(--default-border-width) + var(--default-border-radius) * 0.0625rem);
top: var(--default-border-width);
width: 2rem;
}
/**
* Custom drop-down indicator icon
*/
.c-form-select:after {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAkCAYAAAA5DDySAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPVJREFUeNrk2s0NgzAMhmFno47EKGzQETpSR2CEjkCjyEg0aiAhP7Y/IuUSuLyPhDg4RLycc5PfH78fBLy48/3TyYcrb1iEv53RISxCqpM4dkVGSMSHTakHKAhH8RvAExXhLD58AvziCw0hJz7+E8AgFMcjIVyOR0CojreM0CzeIkLzeEsI3eItIHSP14wwLF4jwvB4TQhi8RoQxOMlEdTESyCoix+JoDZ+BIL6+J4IZuJ7IJiLb4lgNr4Fgvn4GgSY+CsIcPGFCDP0bCIDAXowU4OANZ8sRMCcUGciYN9ROEGAv6BxhHCP+B3CvLubsEjFfwUYAKjtGJxFvDJsAAAAAElFTkSuQmCC")
no-repeat center center;
background-size: contain;
content: "";
height: 0.75rem;
margin-bottom: 0.25rem;
pointer-events: none;
position: absolute;
right: 0.625rem;
top: 50%;
transform: translateY(-50%);
width: 0.75rem;
}
.c-form-select__dropdown {
-webkit-appearance: none;
appearance: none;
background-color: var(--white);
border: var(--default-border-width) solid var(--gray-400);
border-radius: var(--default-border-radius);
box-shadow: 0 0 0 0 rgba(var(--black), 0.2);
cursor: pointer;
font-size: inherit;
padding: 0.9375rem 1rem;
transition: box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out;
width: 100%;
}
/* Form checkbox inputs
=========================================== */
.c-form-checkbox {
cursor: pointer;
display: inline-block;
font-size: var(--default-input-font-size);
margin-bottom: 0.25rem;
width: 100%;
}
/**
* For cases where checkboxes or radio buttons need to display inline.
*/
.c-form-checkbox--inline {
margin-right: 2rem;
width: auto;
}
/**
* Hide the default input visually to utilise keyboard functionality and allow
* for custom input styles.
*/
.c-form-checkbox__input {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 0.0625rem;
}
.c-form-checkbox__caption {
align-items: center;
color: var(--black);
display: flex;
font-size: 0.875rem;
margin-left: 1rem;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.c-form-checkbox__caption:before {
background-color: var(--white);
border: var(--default-border-width) solid var(--gray-400);
border-radius: var(--default-border-radius);
content: "";
display: inline-block;
flex-shrink: 0;
height: 0.9375rem;
margin-left: -1rem;
margin-right: 0.5rem;
position: relative;
transition: border-color 0.25s ease-in-out;
width: 0.9375rem;
}
.c-form-checkbox--radio .c-form-checkbox__caption:before {
border-radius: 100%;
}
.c-form-checkbox__input:checked + .c-form-checkbox__caption:before {
box-shadow: inset 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
.c-form-checkbox__input:checked + .c-form-checkbox__caption:after {
background: var(--white)
url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRDY0MjBEO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQzLjUsMC42SDQuNWMtMi4yLDAtMy45LDEuNy0zLjksMy45djM5LjFjMCwyLjIsMS43LDMuOSwzLjksMy45aDM5LjFjMi4yLDAsMy45LTEuNywzLjktMy45VjQuNQoJQzQ3LjQsMi4zLDQ1LjcsMC42LDQzLjUsMC42eiBNMzIuOSwyMi42TDIwLjEsMzUuNGwwLDBsLTAuNywwLjdsMCwwbDAsMGwtMS42LTEuNmwwLDBMNy4zLDI0LjFsMy0zbDkuMSw5LjFMMzAsMTkuNmwwLDBsNy44LTcuOAoJbDMsM0wzMi45LDIyLjZ6Ii8+Cjwvc3ZnPgo=");
background-position: center;
background-size: contain;
border: 0 none;
border-radius: var(--default-border-radius);
content: "";
height: 1rem;
left: -1rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 1rem;
}
.c-form-checkbox--radio .c-form-checkbox__input:checked + .c-form-checkbox__caption:after {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyMHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAyMCIgd2lkdGg9IjIwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzguMDAwMDAwLCAtMzM4LjAwMDAwMCkiPjxnIGlkPSJyYWRpby1idXR0b24tb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMzOC4wMDAwMDAsIDMzOC4wMDAwMDApIj48cGF0aCBkPSJNMTAsNSBDNy4yLDUgNSw3LjIgNSwxMCBDNSwxMi44IDcuMiwxNSAxMCwxNSBDMTIuOCwxNSAxNSwxMi44IDE1LDEwIEMxNSw3LjIgMTIuOCw1IDEwLDUgTDEwLDUgWiBNMTAsMCBDNC41LDAgMCw0LjUgMCwxMCBDMCwxNS41IDQuNSwyMCAxMCwyMCBDMTUuNSwyMCAyMCwxNS41IDIwLDEwIEMyMCw0LjUgMTUuNSwwIDEwLDAgTDEwLDAgWiBNMTAsMTggQzUuNiwxOCAyLDE0LjQgMiwxMCBDMiw1LjYgNS42LDIgMTAsMiBDMTQuNCwyIDE4LDUuNiAxOCwxMCBDMTgsMTQuNCAxNC40LDE4IDEwLDE4IEwxMCwxOCBaIiBpZD0iU2hhcGUiLz48L2c+PC9nPjwvZz48L3N2Zz4=");
border: 0 none;
border-radius: 100%;
}
.c-form-checkbox__input:disabled + .c-form-checkbox__caption {
cursor: not-allowed;
opacity: 0.5;
}
.c-form-checkbox__input:disabled + .c-form-checkbox__caption:before {
background-color: var(--gray-300);
border-color: var(--gray-300);
}
/* Form Elements State Modifiers
=========================================== */
.c-form-input:disabled,
.c-form-select__dropdown:disabled,
.c-form-checkbox__input:disabled,
.c-form-input[ aria-disabled="true" ],
.c-form-select__dropdown[ aria-disabled="true" ],
.c-form-checkbox__input[ aria-disabled="true" ] {
background-color: var(--gray-100);
}
.c-form-input:focus:not(:focus-visible),
.c-form-select__dropdown:focus:not(:focus-visible),
.c-form-checkbox:focus:not(:focus-visible),
.c-form-checkbox__input:focus:not(:focus-visible) {
outline: none;
}
.c-form-input:focus-visible,
.c-form-select__dropdown:focus-visible,
.c-form-checkbox:focus-within {
outline: calc(var(--default-border-width) * 2) solid var(--focus);
outline-offset: var(--default-border-width);
transition: none;
}
/* Form errors
=========================================== */
/**
* Errors are handled by adding the .has-error class to the field's parent –
* usually the .c-form-list__item.
*
* The `invalid` class is included here to work with code output by Miva Merchant on some pages.
*/
.has-error,
.invalid {
color: var(--red-400);
}
.has-error:where(.c-form-input, .c-form-select__dropdown, .c-form-checkbox__caption:before),
.invalid:where(.c-form-input, .c-form-select__dropdown, .c-form-checkbox__caption:before) {
border-color: var(--red-400);
}
/* Input sizing modifiers
=========================================== */
.c-form-input--small {
padding: 0.6875rem 1rem;
}
.c-form-input--large {
padding: 1.3125rem 1rem;
}
.c-form-input--small.c-form-select__dropdown {
line-height: inherit;
}
/* Form Input Sets
=========================================== */
.c-form-inline-set {
display: flex;
gap: 0.5rem;
line-height: initial;
}
/* ==========================================================================
COMPONENTS / KEYLINE
========================================================================== */
/**
* Simple keyline component to provide horizontal rules between other elements.
* e.g. `
`
*
* 1. Reduce the `margin-bottom` by the same width as the keyline in order to
* keep on our baseline grid.
*/
.c-keyline {
border: none;
border-bottom: var(--default-border-width) solid var(--gray-200);
margin-bottom: calc(
var(--default-spacing-unit) - var(--default-border-width)
); /* [1] */
}
/**
* Heavier keylines.
*/
.c-keyline--thick {
border-bottom-width: calc(var(--default-border-width) * 2);
margin-bottom: calc(
var(--default-spacing-unit) - var(--default-border-width) * 2
); /* [1] */
}
/**
* Smaller gaps underneath keylines.
*/
.c-keyline--small {
margin-bottom: calc(
var(--default-spacing-unit) / 2 - var(--default-border-width)
); /* [1] */
}
/**
* Adjust smaller gaps underneath thicker keylines.
*/
.c-keyline--small.c-keyline--thick {
margin-bottom: calc(
var(--default-spacing-unit) / 2 - var(--default-border-width) * 2
); /* [1] */
}
/**
* Keylines for under headings.
*/
.c-heading--keyline {
display: inline-block;
margin-bottom: 1rem;
position: relative;
}
.c-heading--keyline:after {
background-color: var(--gray-400);
content: "";
display: block;
height: 0.125rem;
left: 50%;
position: absolute;
transform: translate(-50%, 0.5em);
width: 25%;
}
/**
* Keylines with Text.
*/
.c-keyline[ data-text ] {
overflow: visible;
position: relative;
text-align: center;
}
.c-keyline[ data-text ]:before {
background-color: var(--white);
content: attr(data-text);
display: inline-block;
font-size: var(--message-one);
font-weight: var(--font-regular);
padding: 0 1rem;
transform: translateY(calc(-50% - 0.0625rem));
}
/* ==========================================================================
COMPONENTS / MENU
========================================================================== */
.c-menu__title {
font-weight: 700;
}
.c-menu__list {
line-height: 2;
list-style: none;
margin-left: 0;
}
.c-menu__link {
color: currentColor;
display: block;
}
@media ( min-width: 48em ) {
.c-menu__link {
display: inline-block;
}
}
/* ==========================================================================
COMPONENTS / NAVIGATION
========================================================================== */
.c-navigation {
position: relative;
}
.c-navigation__trigger {
display: none;
}
.c-navigation__trigger:checked ~ .c-navigation__row,
.c-navigation__trigger:checked ~ .c-navigation__row .c-navigation__row {
display: block;
}
.c-navigation__label {
background-color: var(--gray-500);
color: var(--white);
display: block;
font-style: normal;
margin: 0;
min-height: 2rem;
padding: 1rem;
position: relative;
}
.c-navigation__label:after,
.c-navigation__label:before {
position: absolute;
right: 1rem;
transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}
.c-navigation__label:after {
content: "-";
opacity: 0;
transform: scale(0);
}
.c-navigation__label:before {
content: "≡";
opacity: 1;
transform: scale(2);
}
.c-navigation__trigger:checked ~ .c-navigation__label:after {
opacity: 1;
transform: scale(2);
}
.c-navigation__trigger:checked ~ .c-navigation__label:before {
opacity: 0;
transform: scale(0);
}
.c-navigation__row {
display: none;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.c-navigation__link {
background-color: var(--white);
color: var(--black);
display: block;
padding: 0.5rem 1rem;
}
.c-navigation__link:hover {
box-shadow: 0 0.125rem 0 -0.0625rem var(--black);
text-decoration: none;
transition: box-shadow ease-in-out 0.2s;
}
.c-navigation__row:nth-child(2) .c-navigation__link {
padding-left: 2rem;
}
.c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 3rem;
}
@media ( min-width: 48em ) {
.c-navigation__label {
display: none;
}
.c-navigation__row,
.c-navigation__trigger:checked ~ .c-navigation__row,
.c-navigation__trigger:checked ~ .c-navigation__row .c-navigation__row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.c-navigation__list {
flex: 1 1 auto;
position: relative;
text-align: center;
}
.c-navigation__list .c-navigation__row {
display: none;
min-width: 100%;
position: absolute;
white-space: nowrap;
z-index: 100;
}
.c-navigation__row:nth-child(2) .c-navigation__list {
text-align: left;
}
.c-navigation__row:nth-child(2) .c-navigation__row:last-of-type {
left: 100%;
top: 0;
z-index: 200;
}
.c-navigation__row:nth-child(2) .c-navigation__link,
.c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 1rem;
}
.c-navigation__row:nth-child(2) .c-navigation__link:hover {
background-color: var(--gray-200);
box-shadow: none;
}
.c-navigation__list:hover > .c-navigation__row {
display: table;
}
.c-navigation__link {
border-right: 0 solid var(--black); /* Change to 0.0625rem to add a right-border */
}
.c-navigation__list:last-of-type .c-navigation__link,
.c-navigation__row:nth-child(2) .c-navigation__list .c-navigation__link {
border-right: 0;
}
}
/* ==========================================================================
COMPONENTS / TABLES
========================================================================== */
/**
* The simple table offers easy to read data with a horizontal divider between
* rows at the expense of occupying more space.
*/
.c-table-simple {
border-collapse: collapse;
}
.c-table-simple__row {
border-bottom: var(--default-border-width) solid var(--gray-200);
}
.c-table-simple__cell {
padding: calc(var(--default-spacing-unit) / 2);
text-align: left;
vertical-align: top;
}
.c-table-simple__cell--standard {
padding: var(--default-spacing-unit);
}
.c-table-simple__cell--wide {
padding: calc(var(--default-spacing-unit) * 2);
}
/**
* The stripped table offers easy to read data with alternating background rows.
*/
.c-table-stripped {
border-collapse: collapse;
}
.c-table-stripped__row:not(:nth-child(even)) {
background-color: var(--gray-200);
}
/**
* This is a basic, responsive table set-up. It does require using a `data-label`
* attribute if you would like to show the row titles.
*/
.c-table-responsive {
border-collapse: collapse;
width: 100%;
}
.c-table-responsive_thead {
display: none;
}
.c-table-responsive__row {
border-bottom: var(--default-border-width) solid var(--gray-200);
display: block;
margin-bottom: calc(var(--default-spacing-unit) / 2);
}
.c-table-responsive__cell {
display: block;
padding-bottom: calc(var(--default-spacing-unit) / 2);
}
.c-table-responsive__cell:before {
content: attr(data-label);
display: block;
font-weight: 700;
text-align: left;
}
.c-table-responsive__cell--flex {
display: flex;
justify-content: space-between;
}
@media screen and ( min-width: 48em ) {
.c-table-responsive_thead {
display: table-header-group;
}
.c-table-responsive__row {
display: table-row;
margin-bottom: 0;
}
.c-table-responsive__cell {
display: table-cell;
padding: calc(var(--default-spacing-unit) / 2);
text-align: left;
vertical-align: top;
}
.c-table-responsive__cell--standard {
padding: var(--default-spacing-unit);
}
.c-table-responsive__cell--wide {
padding: calc(var(--default-spacing-unit) * 2);
}
.c-table-responsive__cell:before {
content: "";
display: none;
}
}
/* ==========================================================================
COMPONENTS / TYPOGRAPHY
========================================================================== */
/**
* In order to divorce our semantic decisions from our stylistic ones, we only
* define opinionated typographical styles against classes, NOT against
* typographic HTML elements.
*
* Further reading:
* http://csswizardry.com/2016/02/managing-typography-on-large-apps/
*/
/* Heading-level typography
=========================================== */
.c-heading-alpha {
font-size: var(--display-two);
font-weight: var(--font-regular);
line-height: calc(var(--display-two) * 1.2);
}
.c-heading-bravo {
font-size: var(--display-three);
font-weight: var(--font-regular);
line-height: calc(var(--display-three) * 1.08);
}
.c-heading-charlie {
font-size: var(--title-one);
font-weight: var(--font-medium);
line-height: calc(var(--title-one) * 1.2);
}
.c-heading-delta {
font-size: var(--title-two);
font-weight: var(--font-medium);
line-height: calc(var(--title-two) * 1.25);
}
.c-heading-echo {
font-size: var(--title-three);
font-weight: var(--font-medium);
line-height: calc(var(--title-three) * 1.33);
}
.c-heading-foxtrot {
font-size: var(--title-four);
font-weight: var(--font-medium);
line-height: calc(var(--title-four) * 1.4);
}
@media screen and ( max-width: 59.999em ) {
.c-heading-alpha {
font-size: var(--display-two-mobile);
line-height: calc(var(--display-two-mobile) * 1.2);
}
.c-heading-bravo {
font-size: var(--display-three-mobile);
line-height: calc(var(--display-three-mobile) * 1.08);
}
.c-heading-charlie {
font-size: var(--title-one-mobile);
line-height: calc(var(--title-one-mobile) * 1.2);
}
.c-heading-delta {
font-size: var(--title-two-mobile);
line-height: calc(var(--title-two-mobile) * 1.2);
}
.c-heading-echo {
font-size: var(--title-three-mobile);
line-height: calc(var(--title-three-mobile) * 1.33);
}
.c-heading-foxtrot {
font-size: var(--title-four-mobile);
line-height: calc(var(--title-four-mobile) * 1.33);
}
}
/* Subheading typography
=========================================== */
.c-heading--subheading {
font-weight: var(--font-medium);
text-transform: uppercase;
}
.c-heading--subheading--small {
color: var(--primary);
font-size: var(--subheading-small);
line-height: calc(var(--subheading-small) * 1.5);
}
.c-heading--subheading--medium {
color: var(--primary);
font-size: var(--subheading-medium);
line-height: calc(var(--subheading-medium) * 1.33);
}
.c-heading--subheading--large {
color: var(--primary);
font-size: var(--subheading-large);
line-height: calc(var(--subheading-large) * 1.4);
}
@media screen and ( max-width: 59.999em ) {
.c-heading--subheading--medium,
.c-heading--subheading--large {
font-size: var(--subheading-small);
line-height: calc(var(--subheading-small) * 1.33);
}
}
/* ==========================================================================
UTILITIES / BORDERS
========================================================================== */
/**
* Utility classes to adjust element borders.
*/
.u-border-none {
border-width: 0;
}
.u-border-thick {
border-width: calc(var(--default-border-width) * 2);
}
.u-border-thin {
border-width: calc(var(--default-border-width) * 0.5);
}
.u-border-rounded {
border-radius: 10rem;
}
.u-border-square {
border-radius: 0;
}
/* ==========================================================================
UTILITIES / CLEAR FIX
========================================================================== */
/**
* Class-based implementation of the 'clearfix hack'.
* http://cssmojo.com/the-very-latest-clearfix-reloaded/
*/
.u-clear-fix:after {
clear: both;
content: "";
display: table;
}
/* ==========================================================================
UTILITIES / COLORS
========================================================================== */
/**
* Utility classes to adjust element colors inline.
* Both .u-bg-*** and .u-color-*** work for each color class.
*/
.u-bg-red:before,
.u-bg-red {
background-color: var(--red-400);
}
.u-bg-yellow:before,
.u-bg-yellow {
background-color: var(--yellow-400);
}
.u-bg-blue:before,
.u-bg-blue {
background-color: var(--blue-400);
}
.u-bg-green:before,
.u-bg-green {
background-color: var(--green-400);
}
.u-bg-black:before,
.u-bg-black {
background-color: var(--black);
}
.u-bg-gray-50:before,
.u-bg-gray-50,
.u-bg-gray-600:before,
.u-bg-gray-600 {
background-color: var(--gray-600);
}
.u-bg-gray-40:before,
.u-bg-gray-40,
.u-bg-gray-500:before,
.u-bg-gray-500 {
background-color: var(--gray-500);
}
.u-bg-gray-30:before,
.u-bg-gray-30,
.u-bg-gray-400:before,
.u-bg-gray-400 {
background-color: var(--gray-400);
}
.u-bg-gray-20:before,
.u-bg-gray-20,
.u-bg-gray-300:before,
.u-bg-gray-300 {
background-color: var(--gray-300);
}
.u-bg-gray-10:before,
.u-bg-gray-10,
.u-bg-gray-200:before,
.u-bg-gray-200 {
background-color: var(--gray-200);
}
.u-bg-gray-100:before,
.u-bg-gray-100 {
background-color: var(--gray-100);
}
.u-bg-white:before,
.u-bg-white {
background-color: var(--white);
}
.u-bg-transparent {
background-color: var(--transparent);
}
@media ( hover: hover ) {
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-red) {
background-color: var(--red-400--shaded);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-yellow) {
background-color: var(--yellow-400--shaded);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-blue) {
background-color: var(--blue-400--shaded);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-green) {
background-color: var(--green-400--shaded);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-black) {
background-color: var(--black--tinted);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-gray-50, .u-bg-gray-600) {
background-color: var(--gray-600--shaded);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-gray-40, .u-bg-gray-500) {
background-color: var(--gray-500--shaded);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-gray-30, .u-bg-gray-400) {
background-color: var(--gray-400--tinted);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-gray-20, .u-bg-gray-300) {
background-color: var(--gray-300--shaded);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-gray-10, .u-bg-gray-200) {
background-color: var(--gray-200--shaded);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-gray-100) {
background-color: var(--gray-100--shaded);
}
.c-button:hover:not(:disabled):not([ aria-disabled="true" ]):is(.u-bg-white) {
background-color: var(--white--shaded);
}
}
.u-border-red {
border-color: var(--red-400);
}
.u-border-yellow {
border-color: var(--yellow-400);
}
.u-border-blue {
border-color: var(--blue-400);
}
.u-border-green {
border-color: var(--green-400);
}
.u-border-black {
border-color: var(--black);
}
.u-border-gray-50,
.u-border-gray-600 {
border-color: var(--gray-600);
}
.u-border-gray-40,
.u-border-gray-500 {
border-color: var(--gray-500);
}
.u-border-gray-30,
.u-border-gray-400 {
border-color: var(--gray-400);
}
.u-border-gray-20,
.u-border-gray-300 {
border-color: var(--gray-300);
}
.u-border-gray-10,
.u-border-gray-200 {
border-color: var(--gray-200);
}
.u-border-gray-100 {
border-color: var(--gray-100);
}
.u-border-white {
border-color: var(--white);
}
.u-border-transparent {
border-color: var(--transparent);
}
.u-color-red {
color: var(--red-400);
}
.u-color-yellow {
color: var(--yellow-400);
}
.u-color-blue {
color: var(--blue-400);
}
.u-color-green {
color: var(--green-400);
}
.u-color-black {
color: var(--black);
}
.u-color-gray-50,
.u-color-gray-600 {
color: var(--gray-600);
}
.u-color-gray-40,
.u-color-gray-500 {
color: var(--gray-500);
}
.u-color-gray-30,
.u-color-gray-400 {
color: var(--gray-400);
}
.u-color-gray-20,
.u-color-gray-300 {
color: var(--gray-300);
}
.u-color-gray-10,
.u-color-gray-200 {
color: var(--gray-200);
}
.u-color-gray-100 {
color: var(--gray-100);
}
.u-color-white {
color: var(--white);
}
.u-color-transparent {
color: var(--transparent);
}
/**
* This will make sure the full background of a layout object is filled.
*/
.o-layout[ class*="u-bg-" ] {
background-color: var(--transparent);
position: relative;
}
.o-layout[ class*="u-bg-" ]:before {
bottom: 0;
content: "";
display: block;
left: var(--default-spacing-unit);
position: absolute;
right: 0;
top: 0;
}
.o-layout--narrow[ class*="u-bg-" ]:before {
left: calc(var(--default-spacing-unit) * 0.5);
}
.o-layout--wide[ class*="u-bg-" ]:before {
left: calc(var(--default-spacing-unit) * 2);
}
.o-layout--flush[ class*="u-bg-" ]:before {
left: 0;
}
.o-layout[ class*="u-bg-" ] > * {
position: relative;
z-index: 1;
}
/* ==========================================================================
UTILITIES / DISPLAY
========================================================================== */
.u-overflow-hidden {
overflow: hidden;
}
/**
* Hide only visually, but have it available for screen readers
*/
.u-hide-visually:not(:focus):not(:active) {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 0.0625rem;
margin: -0.0625rem;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 0.0625rem;
}
/**
* Hide visually and from screen readers.
*/
.u-hidden {
display: none;
}
/**
* Hidden visually but maintains the layout.
*/
.u-invisible {
visibility: hidden;
}
/**
* Various utility classes to show the content.
*/
.u-flex {
display: flex;
}
.u-inline-flex {
display: inline-flex;
}
.u-block,
.u-shown {
display: block;
}
.u-inline {
display: inline;
}
.u-inline-block {
display: inline-block;
}
.u-visible {
visibility: visible;
}
/* Small Breakpoint [40em = 40rem]
=========================================== */
@media screen and ( min-width: 40em ) {
.u-hidden--s {
display: none;
}
.u-invisible--s {
visibility: hidden;
}
.u-flex--s {
display: flex;
}
.u-inline-flex--s {
display: inline-flex;
}
.u-block--s,
.u-shown--s {
display: block;
}
.u-inline--s {
display: inline;
}
.u-inline-block--s {
display: inline-block;
}
.u-visible--s {
visibility: visible;
}
}
/* Medium Breakpoint [48em = 48rem]
=========================================== */
@media screen and ( min-width: 48em ) {
.u-hidden--m {
display: none;
}
.u-invisible--m {
visibility: hidden;
}
.u-flex--m {
display: flex;
}
.u-inline-flex--m {
display: inline-flex;
}
.u-block--m,
.u-shown--m {
display: block;
}
.u-inline--m {
display: inline;
}
.u-inline-block--m {
display: inline-block;
}
.u-visible--m {
visibility: visible;
}
}
/* Large Breakpoint [60em = 60rem]
=========================================== */
@media screen and ( min-width: 60em ) {
.u-hidden--l {
display: none;
}
.u-invisible--l {
visibility: hidden;
}
.u-flex--l {
display: flex;
}
.u-inline-flex--l {
display: inline-flex;
}
.u-block--l,
.u-shown--l {
display: block;
}
.u-inline--l {
display: inline;
}
.u-inline-block--l {
display: inline-block;
}
.u-visible--l {
visibility: visible;
}
}
/* Extra-Large Breakpoint [75em = 75rem]
=========================================== */
@media screen and ( min-width: 75em ) {
.u-hidden--xl {
display: none;
}
.u-invisible--xl {
visibility: hidden;
}
.u-flex--xl {
display: flex;
}
.u-inline-flex--xl {
display: inline-flex;
}
.u-block--xl,
.u-shown--xl {
display: block;
}
.u-inline--xl {
display: inline;
}
.u-inline-block--xl {
display: inline-block;
}
.u-visible--xl {
visibility: visible;
}
}
/* Wide-Screen Breakpoint [90em = 90rem]
=========================================== */
@media screen and ( min-width: 90em ) {
.u-hidden--w {
display: none;
}
.u-invisible--w {
visibility: hidden;
}
.u-flex--w {
display: flex;
}
.u-inline-flex--w {
display: inline-flex;
}
.u-block--w,
.u-shown--w {
display: block;
}
.u-inline--w {
display: inline;
}
.u-inline-block--w {
display: inline-block;
}
.u-visible--w {
visibility: visible;
}
}
/* ==========================================================================
UTILITIES / GRIDS
========================================================================== */
/**
* A series of utility classes that give an automatic number of columns based
* on the class used, media breakpoints are included.
*
*
*
* The above will create a three-column structure in which each column will
* fluidly fill one-third of the width of the parent with the remainder elements
* wrapping as needed. We can have more complex systems:
*
*
*
* The above will create a structure in which each column will be 100% width
* until we enter our medium breakpoint, then they will be one-third the width
* of the parent container with the remainder elements wrapping as needed.
*/
/* Mobile First
=========================================== */
.u-grids-1 > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2 > .o-layout__item {
flex-basis: 50%;
max-width: 50%;
}
.u-grids-3 > .o-layout__item {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.u-grids-4 > .o-layout__item {
flex-basis: 25%;
max-width: 25%;
}
.u-grids-5 > .o-layout__item {
flex-basis: 20%;
max-width: 20%;
}
.u-grids-6 > .o-layout__item {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.u-grids-7 > .o-layout__item {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%;
}
.u-grids-8 > .o-layout__item {
flex-basis: 12.5%;
max-width: 12.5%;
}
.u-grids-9 > .o-layout__item {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%;
}
.u-grids-10 > .o-layout__item {
flex-basis: 10%;
max-width: 10%;
}
.u-grids-11 > .o-layout__item {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%;
}
.u-grids-12 > .o-layout__item {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
/* Small Breakpoint [40em = 40rem]
=========================================== */
@media screen and ( min-width: 40em ) {
.u-grids-1--s > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--s > .o-layout__item {
flex-basis: 50%;
max-width: 50%;
}
.u-grids-3--s > .o-layout__item {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.u-grids-4--s > .o-layout__item {
flex-basis: 25%;
max-width: 25%;
}
.u-grids-5--s > .o-layout__item {
flex-basis: 20%;
max-width: 20%;
}
.u-grids-6--s > .o-layout__item {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.u-grids-7--s > .o-layout__item {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%;
}
.u-grids-8--s > .o-layout__item {
flex-basis: 12.5%;
max-width: 12.5%;
}
.u-grids-9--s > .o-layout__item {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%;
}
.u-grids-10--s > .o-layout__item {
flex-basis: 10%;
max-width: 10%;
}
.u-grids-11--s > .o-layout__item {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%;
}
.u-grids-12--s > .o-layout__item {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
}
/* Medium Breakpoint [48em = 48rem]
=========================================== */
@media screen and ( min-width: 48em ) {
.u-grids-1--m > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--m > .o-layout__item {
flex-basis: 50%;
max-width: 50%;
}
.u-grids-3--m > .o-layout__item {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.u-grids-4--m > .o-layout__item {
flex-basis: 25%;
max-width: 25%;
}
.u-grids-5--m > .o-layout__item {
flex-basis: 20%;
max-width: 20%;
}
.u-grids-6--m > .o-layout__item {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.u-grids-7--m > .o-layout__item {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%;
}
.u-grids-8--m > .o-layout__item {
flex-basis: 12.5%;
max-width: 12.5%;
}
.u-grids-9--m > .o-layout__item {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%;
}
.u-grids-10--m > .o-layout__item {
flex-basis: 10%;
max-width: 10%;
}
.u-grids-11--m > .o-layout__item {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%;
}
.u-grids-12--m > .o-layout__item {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
}
/* Large Breakpoint [60em = 60rem]
=========================================== */
@media screen and ( min-width: 60em ) {
.u-grids-1--l > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--l > .o-layout__item {
flex-basis: 50%;
max-width: 50%;
}
.u-grids-3--l > .o-layout__item {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.u-grids-4--l > .o-layout__item {
flex-basis: 25%;
max-width: 25%;
}
.u-grids-5--l > .o-layout__item {
flex-basis: 20%;
max-width: 20%;
}
.u-grids-6--l > .o-layout__item {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.u-grids-7--l > .o-layout__item {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%;
}
.u-grids-8--l > .o-layout__item {
flex-basis: 12.5%;
max-width: 12.5%;
}
.u-grids-9--l > .o-layout__item {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%;
}
.u-grids-10--l > .o-layout__item {
flex-basis: 10%;
max-width: 10%;
}
.u-grids-11--l > .o-layout__item {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%;
}
.u-grids-12--l > .o-layout__item {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
}
/* Extra-Large Breakpoint [75em = 75rem]
=========================================== */
@media screen and ( min-width: 75em ) {
.u-grids-1--xl > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--xl > .o-layout__item {
flex-basis: 50%;
max-width: 50%;
}
.u-grids-3--xl > .o-layout__item {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.u-grids-4--xl > .o-layout__item {
flex-basis: 25%;
max-width: 25%;
}
.u-grids-5--xl > .o-layout__item {
flex-basis: 20%;
max-width: 20%;
}
.u-grids-6--xl > .o-layout__item {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.u-grids-7--xl > .o-layout__item {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%;
}
.u-grids-8--xl > .o-layout__item {
flex-basis: 12.5%;
max-width: 12.5%;
}
.u-grids-9--xl > .o-layout__item {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%;
}
.u-grids-10--xl > .o-layout__item {
flex-basis: 10%;
max-width: 10%;
}
.u-grids-11--xl > .o-layout__item {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%;
}
.u-grids-12--xl > .o-layout__item {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
}
/* Wide-Screen Breakpoint [90em = 90rem]
=========================================== */
@media screen and ( min-width: 90em ) {
.u-grids-1--w > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--w > .o-layout__item {
flex-basis: 50%;
max-width: 50%;
}
.u-grids-3--w > .o-layout__item {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.u-grids-4--w > .o-layout__item {
flex-basis: 25%;
max-width: 25%;
}
.u-grids-5--w > .o-layout__item {
flex-basis: 20%;
max-width: 20%;
}
.u-grids-6--w > .o-layout__item {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.u-grids-7--w > .o-layout__item {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%;
}
.u-grids-8--w > .o-layout__item {
flex-basis: 12.5%;
max-width: 12.5%;
}
.u-grids-9--w > .o-layout__item {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%;
}
.u-grids-10--w > .o-layout__item {
flex-basis: 10%;
max-width: 10%;
}
.u-grids-11--w > .o-layout__item {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%;
}
.u-grids-12--w > .o-layout__item {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
}
/* ==========================================================================
UTILITIES / ICONS
========================================================================== */
/**
* This contains the "@font-face" call needed to add the ReadyTheme Icons Font
* package to your site.
*/
@font-face {
font-display: block;
font-family: "ReadyTheme Icons";
font-style: normal;
font-weight: 400;
src: url("../woff/readythemeicons.woff")
format("woff");
}
[ class^="u-icon-" ],
[ class*=" u-icon-" ],
[ data-icon ]:before {
font-family: "ReadyTheme Icons", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant: normal;
font-weight: 400;
line-height: 1;
speak: none;
text-transform: none;
}
[ data-icon ]:before {
content: attr(data-icon);
}
[ class^="u-icon-" ]:before,
[ class*=" u-icon-" ]:before,
[ data-icon ]:before {
background-color: rgba(0, 0, 0, 0);
}
.u-icon-add:before {
content: "=";
}
.u-icon-add-circle:before {
content: "\e901";
}
.u-icon-alert:before {
content: "\e902";
}
.u-icon-arrow-down:before {
content: "9";
}
.u-icon-arrow-left:before {
content: ":";
}
.u-icon-arrow-right:before {
content: ";";
}
.u-icon-arrow-up:before {
content: "8";
}
.u-icon-bag:before {
content: "X";
}
.u-icon-bag-full:before {
content: "Y";
}
.u-icon-balance:before {
content: "-";
}
.u-icon-calendar:before {
content: "W";
}
.u-icon-cart-add:before {
content: "/";
}
.u-icon-cart-empty:before {
content: "Z";
}
.u-icon-cart-full:before {
content: "[";
}
.u-icon-check:before {
content: "?";
}
.u-icon-chevron-down:before {
content: "1";
}
.u-icon-chevron-left:before {
content: "2";
}
.u-icon-chevron-right:before {
content: "3";
}
.u-icon-chevron-up:before {
content: "0";
}
.u-icon-contact:before {
content: "\e913";
}
.u-icon-credit-card:before {
content: "C";
}
.u-icon-cross:before {
content: ">";
}
.u-icon-customer-credit:before {
content: "\e916";
}
.u-icon-document:before {
content: "U";
}
.u-icon-edit:before {
content: "\e918";
}
.u-icon-envelope:before {
content: ")";
}
.u-icon-error:before {
content: "!";
}
.u-icon-exit-circle:before {
content: "\e91b";
}
.u-icon-eye-closed:before {
content: "\e91c";
}
.u-icon-eye-open:before {
content: "\e91d";
}
.u-icon-filter:before {
content: "\e91e";
}
.u-icon-flag-empty:before {
content: "\e91f";
}
.u-icon-flag-full:before {
content: "\e920";
}
.u-icon-gift:before {
content: "%";
}
.u-icon-globe:before {
content: "+";
}
.u-icon-heart-empty:before {
content: "D";
}
.u-icon-heart-full:before {
content: "E";
}
.u-icon-heart-half:before {
content: "\e925";
}
.u-icon-history:before {
content: ",";
}
.u-icon-home:before {
content: "H";
}
.u-icon-info:before {
content: "$";
}
.u-icon-location:before {
content: "\\";
}
.u-icon-lock:before {
content: "\e92a";
}
.u-icon-menu:before {
content: "V";
}
.u-icon-minus-circle:before {
content: "\e92c";
}
.u-icon-phone:before {
content: "J";
}
.u-icon-play:before {
content: "\e92e";
}
.u-icon-print:before {
content: "S";
}
.u-icon-question:before {
content: "#";
}
.u-icon-remove:before {
content: ".";
}
.u-icon-search:before {
content: "B";
}
.u-icon-secure:before {
content: "(";
}
.u-icon-settings:before {
content: "&";
}
.u-icon-shield:before {
content: "'";
}
.u-icon-sign-out:before {
content: "\e936";
}
.u-icon-star-empty:before {
content: "F";
}
.u-icon-star-full:before {
content: "G";
}
.u-icon-star-half:before {
content: "\e939";
}
.u-icon-subtract:before {
content: "<";
}
.u-icon-talk:before {
content: "\e93b";
}
.u-icon-triangle-down:before {
content: "5";
}
.u-icon-triangle-left:before {
content: "6";
}
.u-icon-triangle-right:before {
content: "7";
}
.u-icon-triangle-up:before {
content: "4";
}
.u-icon-truck:before {
content: "*";
}
.u-icon-user:before {
content: "I";
}
.u-icon-wallet:before {
content: "T";
}
.u-icon-warning:before {
content: '"';
}
.u-icon-zoom-in:before {
content: "A";
}
.u-icon-zoom-out:before {
content: "@";
}
.u-icon-facebook:before {
content: "K";
}
.u-icon-instagram:before {
content: "O";
}
.u-icon-linkedin:before {
content: "N";
}
.u-icon-pinterest:before {
content: "M";
}
.u-icon-twitter:before {
content: "L";
}
.u-icon-youtube:before {
content: "P";
}
@media speech {
[ class^="u-icon-" ]:before,
[ class*=" u-icon-" ]:before,
[ data-icon ]:before {
content: none;
display: none;
visibility: hidden;
}
}
/* ==========================================================================
UTILITIES / PRINT
========================================================================== */
/**
* Print styles taken from the HTML5 Boilerplate:
* https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
* Inlined to avoid the additional HTTP request:
* http://www.phpied.com/delay-loading-your-print-css/
*/
@media print {
@page {
margin: 10%;
orphans: 2;
size: letter;
widows: 2;
}
/**
* 1. Black prints faster: http://www.sanbeiji.com/archives/953
*/
*,
*:before,
*:after {
background: transparent !important;
box-shadow: none !important;
color: #000 !important; /* [1] */
text-shadow: none !important;
}
body > *:not(main) {
display: none;
}
a,
a:visited {
text-decoration: underline !important;
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 0.0625rem solid #999999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
.u-printable__content {
display: none;
visibility: hidden;
}
@media print {
.u-printable:not(.u-printable__content) {
display: none;
visibility: hidden;
}
.u-printable__content {
display: block;
left: 0;
position: absolute;
top: 0;
visibility: visible;
width: 100%;
}
.u-printable__content * {
visibility: visible;
}
.u-print-none {
display: none !important;
}
.u-print-inline {
display: inline !important;
}
.u-print-inline-block {
display: inline-block !important;
}
.u-print-block {
display: block !important;
}
.u-print-table {
display: table !important;
}
.u-print-table-row {
display: table-row !important;
}
.u-print-table-cell {
display: table-cell !important;
}
.u-print-flex {
display: flex !important;
}
.u-print-inline-flex {
display: inline-flex !important;
}
}
/* ==========================================================================
UTILITIES / TYPOGRAPHY
========================================================================== */
/* Set font-family options
=========================================== */
.u-font-primary {
font-family: var(--primary-font-family);
}
.u-font-secondary {
font-family: var(--secondary-font-family);
}
/* Text alignment utilities
=========================================== */
.u-text-left {
text-align: left;
}
.u-text-center {
text-align: center;
}
.u-text-right {
text-align: right;
}
.u-text-justify {
text-align: justify;
}
@media screen and ( min-width: 40em ) {
.u-text-left--s {
text-align: left;
}
.u-text-center--s {
text-align: center;
}
.u-text-right--s {
text-align: right;
}
.u-text-justify--s {
text-align: justify;
}
}
@media screen and ( min-width: 48em ) {
.u-text-left--m {
text-align: left;
}
.u-text-center--m {
text-align: center;
}
.u-text-right--m {
text-align: right;
}
.u-text-justify--m {
text-align: justify;
}
}
@media screen and ( min-width: 60em ) {
.u-text-left--l {
text-align: left;
}
.u-text-center--l {
text-align: center;
}
.u-text-right--l {
text-align: right;
}
.u-text-justify--l {
text-align: justify;
}
}
@media screen and ( min-width: 75em ) {
.u-text-left--xl {
text-align: left;
}
.u-text-center--xl {
text-align: center;
}
.u-text-right--xl {
text-align: right;
}
.u-text-justify--xl {
text-align: justify;
}
}
@media screen and ( min-width: 90em ) {
.u-text-left--w {
text-align: left;
}
.u-text-center--w {
text-align: center;
}
.u-text-right--w {
text-align: right;
}
.u-text-justify--w {
text-align: justify;
}
}
/* Font sizing utilities
=========================================== */
.u-font-tiny {
font-size: 0.625rem;
}
.u-font-small {
font-size: 0.75rem;
}
@media screen and ( min-width: 40em ) {
.u-font-tiny {
font-size: 0.75rem;
}
.u-font-small {
font-size: 0.832rem;
}
}
.u-font-medium {
font-size: 1rem;
}
.u-font-large {
font-size: 1.25rem;
}
.u-font-huge {
font-size: 1.75rem;
}
.u-paragraph-large {
font-size: var(--paragraph-large);
}
.u-paragraph-small {
font-size: var(--paragraph-small);
}
@media screen and ( max-width: 59.999em ) {
.u-paragraph-large {
font-size: var(--paragraph-small);
}
}
/* Font style utilities
* 1. This is a hold-over class for content output by Miva.
=========================================== */
.u-text-regular {
font-weight: var(--font-regular);
}
.u-text-medium {
font-weight: var(--font-medium);
}
.required,
.u-text-bold {
font-weight: var(--font-bold);
}
.u-text-caps {
font-variant: small-caps;
}
.u-text-italic {
font-style: italic;
}
.u-text-normal {
font-style: normal;
}
.u-text-lowercase {
text-transform: lowercase;
}
.u-text-revert {
text-transform: none;
}
.u-text-uppercase {
text-transform: uppercase;
}
.u-text-strike {
text-decoration: line-through;
}
.u-text-no-underline,
.u-text-no-underline:focus-visible,
.u-text-no-underline:hover {
text-decoration: none;
}
.u-text-underline {
text-decoration: underline;
}
a.u-text-underline:hover {
text-decoration: none;
}
/**
* Text utility to constrain text to a maximum of 75 characters per line,
* regardless of the text's 'font-size'. 30em is roughly equal to 75 characters,
* so we hard-code this value. Please don't change it.
*
* https://jsfiddle.net/5571te7g/
*
*/
.u-text-constrain {
max-width: 30rem;
}
/* Word Wrapping and White Space utilities
=========================================== */
.u-white-space-normal {
white-space: normal;
}
.u-white-space-nowrap {
white-space: nowrap;
}
.u-white-space-pre {
white-space: pre;
}
.u-white-space-pre-line {
white-space: pre-line;
}
.u-white-space-pre-wrap {
white-space: pre-wrap;
}
.u-word-wrap-break {
word-wrap: break-word;
}
.u-word-wrap-normal {
word-wrap: normal;
}
/* Line Height utilities
=========================================== */
.u-line-height-inherit {
line-height: inherit;
}
.u-line-height-initial {
line-height: initial;
}
.u-line-height-normal {
line-height: normal;
}
/* ==========================================================================
UTILITIES / VERTICAL ALIGN
========================================================================== */
.u-align-baseline {
vertical-align: baseline;
}
.u-align-bottom {
vertical-align: bottom;
}
.u-align-middle {
vertical-align: middle;
}
.u-align-top {
vertical-align: top;
}
/**
* Utility classes to vertically align an element centrally within its parent.
*
* Using .u-vertical-align-center on an element can cause visual issues if it renders
* on a half pixel so we can apply preserve-3d to prevent this on the parent
* element.
*/
.u-vertical-align-parent {
transform-style: preserve-3d;
}
/**
* This class requires a set height on the parent element to function correctly.
*/
.u-vertical-align-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* ==========================================================================
UTILITIES / WIDTHS
========================================================================== */
/**
* A series of utility classes that give a fluid width to whichever element
* they are applied to, media breakpoints are included.
*/
/* Mobile First
=========================================== */
/**
* Width size modifiers.
*/
.u-width-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2 {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3 {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5 {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6 {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8 {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9 {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11 {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12 {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-1 {
margin-left: 8.333%;
}
.u-offset-2 {
margin-left: 16.666%;
}
.u-offset-3 {
margin-left: 25%;
}
.u-offset-4 {
margin-left: 33.333%;
}
.u-offset-5 {
margin-left: 41.666%;
}
.u-offset-6 {
margin-left: 50%;
}
.u-offset-7 {
margin-left: 58.333%;
}
.u-offset-8 {
margin-left: 66.666%;
}
.u-offset-9 {
margin-left: 75%;
}
.u-offset-10 {
margin-left: 83.333%;
}
.u-offset-11 {
margin-left: 91.666%;
}
/* Small Breakpoint [40em = 40rem]
=========================================== */
@media screen and ( min-width: 40em ) {
.u-width-1--s {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--s {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--s {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--s {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--s {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--s {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--s {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--s {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--s {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--s {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--s {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--s {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-1--s {
margin-left: 8.333%;
}
.u-offset-2--s {
margin-left: 16.666%;
}
.u-offset-3--s {
margin-left: 25%;
}
.u-offset-4--s {
margin-left: 33.333%;
}
.u-offset-5--s {
margin-left: 41.666%;
}
.u-offset-6--s {
margin-left: 50%;
}
.u-offset-7--s {
margin-left: 58.333%;
}
.u-offset-8--s {
margin-left: 66.666%;
}
.u-offset-9--s {
margin-left: 75%;
}
.u-offset-10--s {
margin-left: 83.333%;
}
.u-offset-11--s {
margin-left: 91.666%;
}
}
/* Medium Breakpoint [48em = 48rem]
=========================================== */
@media screen and ( min-width: 48em ) {
.u-width-1--m {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--m {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--m {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--m {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--m {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--m {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--m {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--m {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--m {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--m {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--m {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--m {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-1--m {
margin-left: 8.333%;
}
.u-offset-2--m {
margin-left: 16.666%;
}
.u-offset-3--m {
margin-left: 25%;
}
.u-offset-4--m {
margin-left: 33.333%;
}
.u-offset-5--m {
margin-left: 41.666%;
}
.u-offset-6--m {
margin-left: 50%;
}
.u-offset-7--m {
margin-left: 58.333%;
}
.u-offset-8--m {
margin-left: 66.666%;
}
.u-offset-9--m {
margin-left: 75%;
}
.u-offset-10--m {
margin-left: 83.333%;
}
.u-offset-11--m {
margin-left: 91.666%;
}
}
/* Large Breakpoint [60em = 60rem]
=========================================== */
@media screen and ( min-width: 60em ) {
.u-width-1--l {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--l {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--l {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--l {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--l {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--l {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--l {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--l {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--l {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--l {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--l {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--l {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-1--l {
margin-left: 8.333%;
}
.u-offset-2--l {
margin-left: 16.666%;
}
.u-offset-3--l {
margin-left: 25%;
}
.u-offset-4--l {
margin-left: 33.333%;
}
.u-offset-5--l {
margin-left: 41.666%;
}
.u-offset-6--l {
margin-left: 50%;
}
.u-offset-7--l {
margin-left: 58.333%;
}
.u-offset-8--l {
margin-left: 66.666%;
}
.u-offset-9--l {
margin-left: 75%;
}
.u-offset-10--l {
margin-left: 83.333%;
}
.u-offset-11--l {
margin-left: 91.666%;
}
}
/* Extra-Large Breakpoint [75em = 75rem]
=========================================== */
@media screen and ( min-width: 75em ) {
.u-width-1--xl {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--xl {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--xl {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--xl {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--xl {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--xl {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--xl {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--xl {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--xl {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--xl {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--xl {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--xl {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-1--xl {
margin-left: 8.333%;
}
.u-offset-2--xl {
margin-left: 16.666%;
}
.u-offset-3--xl {
margin-left: 25%;
}
.u-offset-4--xl {
margin-left: 33.333%;
}
.u-offset-5--xl {
margin-left: 41.666%;
}
.u-offset-6--xl {
margin-left: 50%;
}
.u-offset-7--xl {
margin-left: 58.333%;
}
.u-offset-8--xl {
margin-left: 66.666%;
}
.u-offset-9--xl {
margin-left: 75%;
}
.u-offset-10--xl {
margin-left: 83.333%;
}
.u-offset-11--xl {
margin-left: 91.666%;
}
}
/* Wide-Screen Breakpoint [90em = 90rem]
=========================================== */
@media screen and ( min-width: 90em ) {
.u-width-1--w {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--w {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--w {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--w {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--w {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--w {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--w {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--w {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--w {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--w {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--w {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--w {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-1--w {
margin-left: 8.333%;
}
.u-offset-2--w {
margin-left: 16.666%;
}
.u-offset-3--w {
margin-left: 25%;
}
.u-offset-4--w {
margin-left: 33.333%;
}
.u-offset-5--w {
margin-left: 41.666%;
}
.u-offset-6--w {
margin-left: 50%;
}
.u-offset-7--w {
margin-left: 58.333%;
}
.u-offset-8--w {
margin-left: 66.666%;
}
.u-offset-9--w {
margin-left: 75%;
}
.u-offset-10--w {
margin-left: 83.333%;
}
.u-offset-11--w {
margin-left: 91.666%;
}
}
/* ==========================================================================
UTILITIES / Z-INDEX
========================================================================== */
/**
* Utility classes to set display relevance on the 'Z' axis.
*/
.u-below-content {
z-index: -1;
}
.u-over-content {
z-index: 100;
}
.u-over-control {
z-index: 200;
}
.u-over-page {
z-index: 300;
}
.u-over-screen {
z-index: 400;
}
.u-over-everything {
z-index: 500;
}
/* ==========================================================================
THEME STYLE MODIFICATIONS
========================================================================== */
/**
* Set all your THEME styles in this file.
*
* Adding a Theme to a design is very straightforward as every component works
* like an extensible class. This allows you to add theme specific classes
* and/or override existing classes.
*
* NOTE: Any new classes created should follow the established coding
* standards for the framework. Theme specific classes should be prefixed by
* `.t-`.
*
* Why do it this way?
* By decoupling the theme styling from the default framework, you get the
* following benefits:
* Keep the framework core library up-to-date
* Updates to the core styles of the framework do not get overwritten when
* extending the component.
*
* End-user entry points remain untouched
* End-users do not need to use any custom name that belongs only to the
* theme.
*/
/* Site Header
=========================================== */
.t-site-header__top-navigation {
border-bottom: var(--default-border-width) solid var(--gray-200);
color: var(--gray-600);
font-size: var(--message-one);
font-weight: var(--font-medium);
height: 2.5rem;
letter-spacing: 0.04em;
line-height: 2.5rem;
text-transform: uppercase;
}
.t-site-header__link {
font-family: inherit;
font-weight: inherit;
transition: all 0.125s ease-in-out;
}
.t-site-header__link:not(.t-site-header__secondary-cta) {
color: inherit;
margin: 0 var(--default-spacing-unit);
padding: 0;
text-decoration: none;
}
.t-site-header__link:not(.t-site-header__secondary-cta):hover {
color: var(--primary);
}
.t-site-header__secondary-cta {
background: var(--tertiary);
color: var(--white);
margin-left: var(--default-spacing-unit);
padding: 0 2.25rem;
text-decoration: none;
}
.t-site-header__secondary-cta:hover {
background: var(--primary);
}
.t-site-header__links {
display: flex;
justify-content: flex-end;
}
.t-site-header__basket-link--mobile {
display: flex;
font-size: 2rem;
}
.t-site-header__basket-link-quantity--mobile {
border-radius: 50%;
display: inline-block;
font-size: var(--message-one);
height: 2rem;
line-height: 2;
min-width: 2rem;
padding: 0 0.25rem;
text-align: center;
touch-action: none;
transform: translate(-0.75em, -1em);
z-index: -1;
}
.t-global-account {
background-color: var(--white);
border: var(--default-border-width) solid var(--gray-200);
border-radius: var(--default-border-radius);
box-shadow: 0 0.1875rem 0.5rem 0 rgba(0, 0, 0, 0.08);
max-width: 18.25rem;
padding: 1.5rem 1.25rem;
position: absolute;
right: 0;
top: 80%;
width: 100vw;
}
.t-global-account__form {
margin-bottom: 0;
}
.t-global-account__form .c-form-list__item:first-of-type {
margin-bottom: var(--default-spacing-unit);
}
.t-site-header__masthead {
padding: 0.625rem var(--default-spacing-unit);
}
.t-site-header__masthead .t-site-header__buttons .c-button {
background: var(--transparent);
color: var(--black);
padding: 0;
}
.t-site-header__masthead .t-site-header__buttons .u-icon-menu {
margin-right: 1.5rem;
}
.t-site-header__masthead .t-site-header__buttons .c-button:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
background: var(--transparent);
color: var(--primary);
}
.t-site-header__logo {
margin-bottom: 0;
}
.t-site-header__logo img {
height: 1.625rem;
width: auto;
}
.t-site-header__mini-basket {
padding-right: 0;
}
.t-site-header__search-form {
border-radius: var(--default-border-radius);
margin-bottom: 0;
position: relative;
}
.t-site-header__search-form .c-form-list__item {
margin-bottom: 0;
margin-left: auto;
}
.t-site-header__search-icon {
align-self: center;
padding-left: calc(var(--default-spacing-unit) - var(--default-border-width) * 2);
padding-right: 0.5rem;
}
.t-site-header__search-field,
.t-site-header__search-form .t-site-header__search-button {
border: var(--default-border-width) solid var(--gray-300);
}
.t-site-header__search-field {
border-bottom-right-radius: 0;
border-right: none;
border-top-right-radius: 0;
flex: 1;
margin-bottom: 0;
padding: 0 var(--default-spacing-unit);
}
.t-site-header__search-form .t-site-header__search-button {
background-color: var(--transparent);
border-left: none;
color: var(--black);
flex: 0 0 2.5rem;
font-size: 1rem;
height: 2.5rem;
padding: 0;
width: auto;
}
.t-site-header__masthead .t-site-header__search-button:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
background-color: var(--primary);
border-color: var(--primary);
color: var(--white);
}
.t-site-header__masthead-links {
align-items: center;
justify-content: flex-end;
}
.t-site-header__masthead-links button:hover {
opacity: 0.75;
text-decoration: none;
transition: 0.3s;
}
.t-site-header__masthead-links .t-global-account-toggle {
align-items: center;
background-color: var(--white);
border: 0 none;
color: var(--black);
display: inline-flex;
font-family: inherit;
font-size: 0.8125rem;
font-weight: var(--font-medium);
padding: 0.5rem;
text-decoration: none;
text-transform: uppercase;
transition: all 0.125s ease-in-out;
}
.t-site-header__masthead-links .t-global-account-toggle:hover {
color: var(--primary);
}
.t-site-header__masthead-links .t-global-account-toggle > * {
font-size: 0.625rem;
margin-left: 0.5rem;
pointer-events: none;
}
.t-site-header__basket-link {
align-items: center;
background-color: var(--white);
border: 0 none;
color: var(--black);
cursor: pointer;
display: inline-flex;
padding: 0;
text-decoration: none;
transition: color 0.125s ease-in-out;
}
.t-site-header__basket-link:focus {
text-decoration: none;
}
.t-site-header__basket-link:hover {
color: var(--primary);
}
.t-site-header__basket-link:focus-visible {
outline-color: var(--focus);
}
.t-site-header__basket-link :is(.u-icon-cart-empty, .u-icon-cart-full) {
font-size: 2rem;
pointer-events: none;
}
.t-site-header__basket-link .u-icon-cart-full + .t-site-header__basket-link-quantity {
display: inline-block;
font-size: 0.8125rem;
font-weight: var(--font-medium);
max-width: -moz-fit-content;
max-width: fit-content;
min-width: 3.5ch;
opacity: 1;
padding: 0.5rem 0;
}
.t-site-header__basket-link-quantity {
display: inline-block;
max-width: 0;
min-width: 1rem;
opacity: 0;
overflow: hidden;
pointer-events: none;
text-align: center;
}
.t-site-navigation {
margin-bottom: var(--default-spacing-unit);
}
.t-site-navigation__wrap {
font-size: 0.8125rem;
margin-left: auto;
margin-right: auto;
max-width: 62.5rem;
position: relative;
width: 100%;
}
@media ( pointer: coarse ) {
.t-site-header__search-form .t-site-header__search-button {
display: inline-flex;
flex: 0 0 fit-content;
font-size: var(--default-spacing-unit);
padding: var(--default-spacing-unit);
}
}
@media screen and ( max-width: 74.999em ) {
.t-site-header {
position: relative;
z-index: 2;
}
.t-site-header__search {
height: 0;
opacity: 0;
overflow: hidden;
transition: height ease-in-out 0.2s;
}
.t-site-header.search-is-active .t-site-header__search {
height: -moz-fit-content;
height: fit-content;
opacity: 1;
overflow: visible;
}
.t-site-header.search-is-active:after {
background-color: rgba(34, 34, 34, 0.8);
content: "";
height: 100vmax;
position: absolute;
width: 100%;
z-index: -1;
}
.t-site-header__search-form {
margin: 0.5rem 0;
}
.t-site-header__search-icon {
display: none;
}
}
@media screen and ( min-width: 48em ) {
.t-site-header__links .o-layout__item:not(:first-of-type) {
border-left: var(--default-border-width) solid var(--gray-400);
flex-grow: 0;
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.t-site-header__logo img {
height: 2rem;
}
}
@media screen and ( min-width: 75em ) {
.t-site-header__message {
padding-left: var(--default-spacing-unit);
}
.t-site-header__masthead {
justify-content: space-between;
padding: 0 var(--default-spacing-unit);
}
.t-site-header__logo {
flex: 0 1 auto;
}
.t-site-header__search {
flex: 0 1 9.375rem;
margin-left: var(--default-spacing-unit);
margin-right: 0;
max-width: 9.375rem;
}
.t-site-header__search-field{
font-size: var(--message-one);
}
.t-site-header__masthead-links {
flex: 0 1 auto;
margin-left: var(--default-spacing-unit);
margin-right: 0;
position: relative;
}
.t-site-header__basket-link {
margin-left: var(--default-spacing-unit);
padding: 0.5rem 0;
}
.t-site-header__basket-link-quantity {
min-width: 0;
}
.t-site-navigation {
flex: 0 1 auto;
margin: 0 0 0 auto;
}
.t-site-navigation__wrap {
position: static;
}
}
@media screen and ( min-width: 90em ) {
.t-site-header__logo img {
height: 2.6875rem;
}
.t-site-header__search {
flex: 0 1 13.75rem;
margin-left: 1.375rem;
max-width: 13.75rem;
}
.t-site-header__masthead-links {
margin-left: 1.875rem;
margin-right: 1.25rem;
}
.t-site-header__basket-link {
margin-left: 1.75rem;
}
}
/* Main Element
=========================================== */
.t-main-content-element {
max-width: var(--default-content-width);
padding-bottom: 2rem;
}
.t-input-font-size {
font-size: var(--default-input-font-size);
}
/* Site Footer
=========================================== */
.t-site-footer {
background: var(--black);
color: var(--gray-100);
}
.t-site-footer__wrapper {
max-width: 68.75rem;
padding: 0;
}
.t-newsletter-form {
margin-bottom: 1.75rem;
padding-top: 1.5rem;
}
.t-newsletter-form__title {
line-height: 1;
text-align: center;
}
.t-newsletter-form .hs_email,
.t-newsletter-form .hs_customer_type {
margin-bottom: var(--default-spacing-unit);
}
/* stylelint-disable declaration-no-important */
.t-newsletter-form .hs_customer_type legend {
display: none !important;
}
/* stylelint-enable declaration-no-important */
.t-newsletter-form label {
display: inline-block;
font-weight: var(--font-medium);
line-height: 1;
margin-bottom: 0.5rem;
}
.t-newsletter-form span.hs-form-required {
color: var(--primary);
}
.t-newsletter-form .hs-input,
.t-newsletter-form .hs-button {
border: none;
border-radius: 0.0625rem;
font-family: var(--primary-font-family);
height: 3.125rem;
width: 100%;
}
.t-newsletter-form .hs-input {
background: var(--gray-600);
border: none;
border-radius: 0.0625rem;
color: var(--gray-100);
font-size: 1rem;
padding: 0 var(--default-spacing-unit);
}
.t-newsletter-form select.hs-input {
border-right: var(--default-spacing-unit) solid var(--transparent);
}
.t-newsletter-form .hs-button,
.t-newsletter-form select.hs-input {
cursor: pointer;
}
.t-newsletter-form .hs-button {
background: var(--primary);
color: var(--white);
font-size: var(--default-font-size);
font-weight: var(--font-medium);
letter-spacing: 0.08em;
padding-left: 1.1875rem;
padding-right: 1.1875rem;
text-transform: uppercase;
transition: all 0.2s ease-in-out;
}
.t-newsletter-form .hs-button:hover {
background-color: var(--primary--hover);
}
.t-newsletter-form .hs-error-msgs {
list-style: none;
margin: 0.5rem 0 0;
}
.t-newsletter-form .hs-error-msgs label {
font-weight: var(--font-regular);
}
.t-site-footer__content-newsletter .submitted-message {
background-color: var(--green-100);
border: var(--default-border-width) solid var(--green-200);
color: var(--green-400);
padding: 0.875rem 1.25rem;
}
.t-site-footer .c-menu__title,
.t-site-footer .c-collapsible-menu__label {
font-size: var(--subheading-small);
font-weight: var(--font-regular);
margin-bottom: calc(var(--default-spacing-unit/2));
}
.t-site-footer__content .c-menu__link:not([ class*=" u-icon-" ]) {
color: var(--gray-100);
font-size: 0.8125rem;
font-weight: var(--font-regular);
line-height: 3;
text-decoration: none;
}
.t-site-footer__content .c-menu__link:not([ class*=" u-icon-" ]):hover {
color: var(--primary--hover);
}
.t-global-footer-social .c-menu__title {
margin-bottom: var(--default-spacing-unit);
}
.t-global-footer-social__list {
display: grid;
font-size: 1rem;
gap: var(--default-spacing-unit);
grid-auto-rows: auto;
grid-template-columns: repeat(auto-fill, 2rem);
grid-template-rows: 2rem;
list-style: none;
margin: 0 0 var(--default-spacing-unit);
padding: 0;
place-items: center;
}
.t-global-footer-social__link {
color: var(--gray-100);
padding: 0.5em;
text-decoration: none;
}
.t-global-footer-social__link:focus-visible {
text-decoration: none;
}
.t-global-footer-social__link:hover {
color: var(--primary--hover);
}
.t-site-footer__copyright {
border-top: var(--default-border-width) solid var(--gray-600);
color: var(--gray-100);
font-size: var(--message-one);
padding-bottom: 1.25rem;
padding-top: 1.25rem;
}
.t-site-footer__copyright p {
margin-bottom: 0;
}
.t-site-footer__copyright .c-secondary-link {
color: inherit;
margin: 0 0.25rem;
}
.t-site-footer__copyright .c-secondary-link:hover {
color: var(--primary--hover);
text-decoration-color: var(--primary--hover);
}
@media ( max-width: 47.999em ) {
.t-site-footer__content-column-1,
.t-site-footer__content-column-2 {
border-bottom: var(--default-border-width) solid var(--gray-600);
}
.t-site-footer__content-newsletter {
border-top: var(--default-border-width) solid var(--gray-600);
padding-left: var(--default-spacing-unit);
padding-right: var(--default-spacing-unit);
}
.t-site-footer__content .x-collapsible-content,
.t-site-footer__copyright p {
padding: 0 var(--default-spacing-unit);
}
.t-site-footer .x-collapsible-content__toggle {
color: var(--gray-100);
font-family: var(--primary-font-family);
font-size: var(--paragraph-large);
font-weight: var(--font-regular);
padding: 1.34375rem 0;
}
.t-site-footer .x-collapsible-content .c-menu__title {
display: none;
}
.t-site-footer .x-collapsible-content__toggle [ class^="u-icon-" ] {
font-size: 0.625rem;
font-weight: var(--font-regular);
}
.t-site-footer .x-collapsible-content__item {
margin: 0;
}
.t-site-footer .x-collapsible-content__item[ aria-hidden="false" ] {
padding-bottom: 0.75rem;
}
.t-site-footer__copyright-copyright {
display: block;
margin-bottom: 0.625rem;
}
}
@media ( min-width: 40em ) {
.t-newsletter-form__input {
flex: 1 1 fit-content;
}
}
@media ( min-width: 48em ) {
.t-site-footer {
padding-top: 3.75rem;
}
.t-site-footer__content {
padding-bottom: 3rem;
}
.t-global-footer-social__list {
gap: 0.5rem;
margin-bottom: 3rem;
}
.t-site-footer__wrapper {
padding-left: var(--default-spacing-unit);
padding-right: var(--default-spacing-unit);
}
.t-site-footer .x-collapsible-content__toggle {
display: none;
}
.t-site-footer .x-collapsible-content__item {
max-height: none;
opacity: 1;
overflow: visible;
visibility: visible;
}
.t-site-footer__content .x-collapsible-content .c-menu__title {
margin-bottom: 0.5rem;
}
.t-site-footer__content .c-menu__link:not([ class*=" u-icon-" ]) {
font-size: 0.8125rem;
line-height: 2.5;
}
.t-site-footer__content-newsletter {
max-width: 20rem;
}
.t-newsletter-form {
padding-top: 0;
}
.t-newsletter-form__title {
text-align: left;
}
}
@media ( min-width: 60em ) {
.t-site-footer__content-column-2 .x-collapsible-content__item {
display: inline-grid;
grid-template-columns: auto auto;
width: 100%;
}
}
@media ( min-width: 90em ) {
.t-site-footer__wrapper {
padding: 0;
}
}
/* Storefront
=========================================== */
.t-page-sfnt .t-site-navigation {
margin-bottom: 0;
}
.t-page-sfnt .t-main-content-element {
max-width: 120rem;
padding: 0;
}
.t-page-sfnt--content > .mmx-wrapper:not(mmx-hero):not(mmx-hero-slider) {
display: block;
margin-left: auto;
margin-right: auto;
max-width: var(--default-content-width);
padding-left: var(--default-spacing-unit);
padding-right: var(--default-spacing-unit);
}
.t-page-sfnt--content > mmx-hero
.t-page-sfnt--content > mmx-hero-slider {
width: 100%;
}
@media ( max-width: 39.9375em ) {
.t-page-sfnt mmx-hero::part(content) {
text-align: center;
}
.t-page-sfnt #mmx-image-across__mmx_imageacross mmx-hero::part(content) {
text-align: left;
}
.t-page-sfnt #mmx-image-across__mmx_imageacross {
margin-bottom: 0;
}
}
.t-page-sfnt #mmx-image-across__two-across mmx-hero {
position: relative;
}
.t-page-sfnt #mmx-image-across__two-across mmx-hero::part(content-bg) {
bottom: unset;
height: auto;
left: 50%;
margin: auto;
position: absolute;
text-align: center;
top: 64%;
transform: translateX(-50%);
white-space: nowrap;
}
@media ( min-width: 40.0625em ) {
.t-page-sfnt #mmx-image-across__two-across mmx-hero::part(content-bg) {
top: 70%;
}
}
@media ( min-width: 60em ) {
.t-page-sfnt #mmx-image-across__two-across mmx-hero::part(content-bg) {
top: 73%;
}
}
/* Category Page
=========================================== */
.t-category-header {
background: var(--gray-100);
border-bottom: var(--default-border-width) solid var(--gray-200);
border-top: var(--default-border-width) solid var(--gray-200);
}
.t-category-header > .o-layout {
margin: 0;
}
.t-category-header__text {
padding: 1.25rem var(--default-spacing-unit) 1.5rem var(--default-spacing-unit);
}
.t-category-header__name {
font-size: var(--title-two);
margin-bottom: 0;
text-align: center;
}
.t-category-header__spacer {
border-bottom: 0.1875rem solid var(--gray-600);
margin: var(--default-spacing-unit) auto 1.5rem;
width: 5.625rem;
}
.t-category-header__descrip {
text-align: center;
}
@media screen and ( min-width: 48em ) {
.t-category-header__text {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media screen and ( min-width: 60em ) {
.t-category-header__text {
flex-basis: 60%;
max-width: 60%;
}
.t-category-header__no-image .t-category-header__text {
flex-basis: 50rem;
max-width: 50rem;
padding-left: 0;
padding-right: 0;
}
.t-category-header__image {
flex-basis: 40%;
max-width: 40%;
padding-left: 0;
}
.t-category-header:not(.t-category-header__no-image) .t-category-header__descrip {
text-align: left;
}
}
@media screen and ( min-width: 75em ) {
.t-category-header__text,
.t-category-header__image {
flex-basis: 50%;
max-width: 50%;
}
.t-category-header__text {
padding: 2.25rem 4rem 2.5rem 4rem;
}
}
@media screen and ( min-width: 90em ) {
.t-category-header__text,
.t-category-header__image {
flex-basis: 40%;
max-width: 40%;
padding: 3.25rem 6rem 3.5rem 6rem;
}
.t-category-header__image {
flex-basis: 60%;
max-width: 60%;
}
}
/* Product Page
=========================================== */
.t-page-prod .tippy-box[ data-theme~="custom" ] {
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.16);
padding: 0;
}
.t-page-prod .tippy-box[ data-theme~="custom" ][ data-placement^="bottom" ] > .tippy-arrow:before {
border-bottom-color: var(--tertiary);
}
.t-page-prod .tippy-box[ data-theme~="custom" ] .tippy-content {
background-color: var(--tertiary);
border-radius: 0.25rem;
color: var(--gray-100);
font-size: var(--message-one);
padding: var(--default-spacing-unit);
text-transform: none;
}
.t-product-tabs {
border-bottom: var(--default-border-width) solid var(--gray-200);
border-top: var(--default-border-width) solid var(--gray-200);
}
.t-product-tabs__list {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
.t-product-tabs__list-item {
margin: 0;
}
.t-product-tabs__panel {
display: block;
margin: 0;
padding: 0;
}
.t-product-tabs__panel:not(:last-child) {
border-bottom: var(--default-border-width) solid var(--gray-200);
}
.t-product-tabs__panel.is-hidden .content {
display: none;
}
.t-product-tabs__panel:active,
.t-product-tabs__panel:focus {
outline: none;
}
.t-product-tabs.is-initialized.tabs-allowed .t-product-tabs__panel {
display: inherit;
}
.t-product-tabs__accordion-trigger {
align-items: center;
color: var(--black);
cursor: pointer;
display: flex;
font-size: 1rem;
font-weight: var(--font-medium);
justify-content: space-between;
line-height: 1;
padding: var(--default-spacing-unit) 0;
position: relative;
text-decoration: none;
width: 100%;
}
.t-product-tabs__accordion-trigger:is(:active, :focus, :hover) {
text-decoration: none;
}
.t-product-tabs__accordion-trigger:after {
color: var(--gray-500);
display: block;
font-size: 1.25rem;
font-weight: var(--font-regular);
position: absolute;
right: 0;
}
.t-product-tabs__accordion-trigger[ aria-expanded="false" ]:after {
content: "+";
}
.t-product-tabs__accordion-trigger[ aria-expanded="true" ]:after {
content: "-";
}
.t-product-tabs__content {
padding: 0.375rem 0 0.75rem;
}
.t-product-tabs__panel-reviews .yotpo-main-widget .promoted-products-box .yotpo-main-title {
font-size: 1.5rem;
line-height: 1;
margin: 0 0 2rem;
}
.t-product-tabs__panel-reviews .yotpo-main-widget .yotpo-default-button {
background-color: var(--primary);
}
.t-product-tabs__panel-reviews .yotpo-main-widget .yotpo-default-button:hover {
background-color: var(--primary--hover);
}
.t-product-tabs__panel-reviews .yotpo-main-widget .yotpo-nav ul .yotpo-nav-tab.yotpo-active span {
color: var(--black);
}
.t-product-tabs__panel-reviews .yotpo-main-widget .yotpo-nav ul .yotpo-nav-tab.yotpo-active .yotpo-nav-wrapper {
border-color: var(--primary);
}
.t-product-tabs__panel-privacy-level,
.t-product-tabs__panel-privacy-image {
margin-bottom: 0.75rem;
}
.t-product-tabs__panel-privacy-level-title {
font-size: 1rem;
font-weight: var(--font-medium);
}
.t-product-tabs__panel-privacy-level-descrip {
color: var(--gray-600);
margin-top: 0.625rem;
}
.t-product-characteristics {
display: grid;
gap: 1.875rem;
grid-template-columns: 1fr 1fr;
margin: var(--default-spacing-unit) auto;
}
.t-product-characteristic {
display: flex;
flex-direction: column;
gap: 0.875rem;
text-align: center;
}
.t-product-characteristic__title,
.t-product-characteristic__tooltip-trigger {
margin-left: 0.25rem;
}
.t-product-characteristic__title {
align-items: center;
color: var(--gray-500);
display: flex;
flex-flow: row nowrap;
font-size: var(--message-one);
font-weight: var(--font-medium);
justify-content: center;
letter-spacing: 0.022em;
margin-bottom: 0.375rem;
text-transform: uppercase;
}
.t-product-characteristic__tooltip-trigger {
background: #8D8D8D;
border-radius: 50%;
color: var(--white);
cursor: pointer;
display: inline-block;
font-size: 0.625rem;
font-weight: var(--font-medium);
height: 0.8125rem;
line-height: 0.8125rem;
text-align: center;
width: 0.8125rem;
}
.t-product-characteristic__tooltip-header,
.t-product-characteristic__tooltip-content {
text-align: left;
}
.t-product-characteristic__tooltip-header-title {
align-items: center;
display: flex;
flex-flow: row nowrap;
font-size: 1.125rem;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.t-product-characteristic__tooltip-header-text,
.t-product-characteristic__tooltip-content-block-text {
font-weight: var(--font-regular);
}
.t-product-characteristic__tooltip-content {
margin: 0 -1rem -1rem;
}
.t-product-characteristic__tooltip:not(.t-product-characteristic__adhesive-type-tooltip) .t-product-characteristic__tooltip-content-block {
display: flex;
}
.t-product-characteristic__tooltip-content-block {
padding: 0.75rem var(--default-spacing-unit);
}
.t-product-characteristic__tooltip:not(.t-product-characteristic__adhesive-type-tooltip) .t-product-characteristic__tooltip-content-block-title,
.t-product-characteristic__tooltip:not(.t-product-characteristic__adhesive-type-tooltip) .t-product-characteristic__tooltip-content-block-text {
flex: 1;
margin-bottom: 0;
}
.t-product-characteristic__tooltip:not(.t-product-characteristic__adhesive-type-tooltip) .t-product-characteristic__tooltip-content-block-title {
flex-basis: 25%;
}
.t-product-characteristic__adhesive-type-tooltip .t-product-characteristic__tooltip-content-block-title {
margin-bottom: 0.5rem;
}
.t-product-characteristic__tooltip:not(.t-product-characteristic__adhesive-type-tooltip):not(.t-product-characteristic__uv-rating-tooltip) .t-product-characteristic__tooltip-content-block-text {
padding-left: 0.5rem;
}
.t-product-characteristic__tooltip:not(.t-product-characteristic__adhesive-type-tooltip) .t-product-characteristic__tooltip-content-block-text {
flex-basis: 75%;
}
.t-product-characteristic__text {
font-size: 0.75rem;
margin-bottom: 0;
}
@media screen and ( min-width: 48em ) {
.t-product-characteristic__adhesive-type-tooltip .t-product-characteristic__tooltip-content-block {
display: flex;
}
.t-product-characteristic__adhesive-type-tooltip .t-product-characteristic__tooltip-content-block-title {
flex-basis: 25%;
margin-bottom: 0;
}
.t-product-characteristic__adhesive-type-tooltip .t-product-characteristic__tooltip-content-block-text {
flex-basis: 75%;
margin-bottom: 0;
padding-left: 1.75rem;
}
}
@media screen and ( min-width: 60em ) {
.t-product-tabs,
.t-product-tabs__panel:not(:last-child) {
border: none;
}
.t-product-tabs__accordion-trigger {
display: none;
}
.t-product-tabs__list,
.t-product-tabs__panel {
display: flex;
justify-content: center;
}
.t-product-tabs__list-item {
padding: 0 1.875rem;
}
.t-product-tabs__link {
color: var(--gray-500);
font-size: 1.125rem;
font-weight: var(--font-medium);
margin: 0;
padding: 0;
text-decoration: underline;
text-decoration-color: var(--transparent);
text-decoration-thickness: var(--text-link-underline-width);
text-underline-offset: 0.5rem;
}
.t-product-tabs__link:hover,
.t-product-tabs__link.is-selected {
color: var(--black);
text-decoration: underline;
text-decoration-color: var(--primary);
text-decoration-thickness: var(--text-link-underline-width);
}
.t-product-tabs__link:active {
outline: none;
}
.t-product-tabs__content {
margin: 2rem auto 0;
max-width: 56.25rem;
padding: 0;
}
.t-product-tabs__panel-reviews .yotpo-main-widget .promoted-products-box .yotpo-main-title {
margin: 0;
}
.t-product-tabs__panel-privacy-level,
.t-product-tabs__panel-privacy-image {
margin-bottom: var(--default-spacing-unit);
}
.t-product-tabs__panel-privacy-level-title {
font-size: 1.125rem;
}
.t-product-tabs__panel-privacy-level-descrip {
font-size: 1rem;
margin-top: 0.375rem;
}
.t-product-characteristics {
column-gap: 9.375rem;
gap: 3.125rem 6.25rem;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 0;
margin-top: 2rem;
}
.t-product-characteristic__title {
margin-bottom: 0.75rem;
}
.t-product-characteristic__text {
font-size: var(--default-font-size);
}
}
/* Basket Page
=========================================== */
@media ( max-width: 39.9375em ) {
.t-page-bask mmx-product-carousel {
padding: 0 1rem;
}
}
.t-page-bask {
background-color: var(--gray-100);
}
.t-basket {
margin-bottom: 4rem;
padding-top: var(--default-spacing-unit);
}
.t-basket__alt-heading {
background-color: var(--white);
margin-bottom: var(--default-spacing-unit);
padding: 1.25rem var(--default-spacing-unit);
}
.t-basket__alt-heading-subtotal {
color: var(--gray-600);
display: flex;
font-size: var(--default-input-font-size);
justify-content: space-between;
margin-bottom: 0;
}
.t-basket__product-contents,
.t-basket__order-summary,
.t-basket__order-summary + .t-helpful-info {
background-color: var(--white);
margin-bottom: var(--default-spacing-unit);
padding: 2.25rem 4rem;
}
/* Free Shipping */
.t-checkout__free-shipping {
font-size: 0.9375rem;
margin-top: var(--default-spacing-unit);
}
.t-checkout__free-shipping .t-checkout__free-shipping--inner {
padding-bottom: 1rem;
padding-top: 1rem;
}
.t-checkout__free-shipping-highlight {
color: var(--primary);
font-weight: var(--font-medium);
}
.t-checkout__free-shipping-highlight-icon {
align-items: center;
background-color: var(--primary);
border-radius: 50%;
color: var(--white);
display: flex;
height: 1.25rem;
justify-content: center;
position: relative;
top: -0.125rem;
width: 1.25rem;
}
.t-checkout__free-shipping-highlight-icon:before {
font-size: 0.6875rem;
margin-left: 0.0625rem;
}
.t-checkout__free-shipping-highlight-text {
margin-left: 0.5rem;
}
@media ( min-width: 60em ) {
.t-checkout__free-shipping .t-checkout__free-shipping--inner {
margin-bottom: 0;
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
.t-basket__alt-heading,
.t-basket__product-contents {
border-radius: calc(var(--default-border-radius) * 2);
}
.t-basket__alt-heading {
padding: 1.75rem var(--default-spacing-unit);
}
.t-basket__order-summary {
border-radius: calc(var(--default-border-radius) * 2) calc(var(--default-border-radius) * 2) 0 0;
margin-bottom: 0;
padding: 1.75rem 1.75rem 0;
}
.t-basket__order-summary + .t-helpful-info {
border-radius: 0 0 calc(var(--default-border-radius) * 2) calc(var(--default-border-radius) * 2);
margin-top: -1rem;
padding: var(--default-spacing-unit) 1.75rem 1.75rem;
}
.t-page-invc .t-helpful-info {
margin-top: 0;
padding: 0;
}
}
.t-basket__product-contents summary {
font-size: var(--default-input-font-size);
width: -moz-fit-content;
width: fit-content;
}
.t-basket__order-summary .x-mini-basket__list {
padding: 0;
}
.t-basket__order-summary .x-mini-basket__line {
border-bottom: var(--default-border-width) solid var(--gray-200);
border-top: 0 none;
}
.t-basket__table {
border-collapse: collapse;
min-width: 100%;
}
.t-basket__table-head {
border-bottom: var(--default-border-width) solid var(--gray-300);
color: var(--gray-600);
display: grid;
font-size: var(--message-one);
font-weight: var(--font-medium);
gap: 0 1.25rem;
grid-template-columns: minmax(min-content, 35.75rem) minmax(7.5rem, 1fr) 6rem;
padding-bottom: 0.5em;
text-transform: uppercase;
}
.t-basket__product-information {
border-bottom: var(--default-border-width) solid var(--gray-300);
display: grid;
gap: 0 1.25rem;
grid-template-columns: 6.5rem minmax(min-content, 28rem) minmax(7.5rem, 1fr) 6rem;
padding: 1.25rem 0;
}
.t-basket__product-image {
grid-area: 1/1/2/2;
}
.t-basket__product-details {
display: flex;
flex-direction: column;
grid-area: 1/2/2/3;
justify-content: space-between;
}
.t-basket__product-qty {
grid-area: 1/3/2/4;
}
.t-basket__product-price {
font-size: 1rem;
grid-area: 1/4/2/5;
}
.t-basket__product-action-bar {
align-items: baseline;
display: flex;
grid-area: 2/2/3/5;
justify-content: space-between;
padding-top: 1em;
}
.t-basket__product-summary .c-table-responsive__row,
.t-basket__order-summary .c-table-simple__row {
border-color: var(--gray-300);
}
.t-basket__product-top {
margin-bottom: 0.875rem;
}
.t-basket__product-name {
color: var(--gray-600);
display: block;
margin-bottom: 0.125rem;
text-decoration: none;
}
.t-basket__product-name:is(:hover, :focus) {
color: var(--primary--hover);
}
.t-basket__product-discounts {
display: flex;
flex-flow: column;
gap: 0.5rem;
}
.t-basket__product-discount {
color: var(--gray-500);
display: flex;
flex-flow: row;
font-size: 0.75rem;
font-weight: var(--font-medium);
gap: 0 0.3125rem;
}
.t-basket__product-discount-tag {
position: relative;
top: -0.125rem;
}
.t-basket__product-code,
.t-basket__product-sku,
.t-basket__product-added {
padding-bottom: 0.5em;
}
.t-basket__product-attr-options {
padding-bottom: 0.5em;
padding-top: 0.5em;
}
.t-basket__product-price s {
font-size: 0.875rem;
padding-top: 0.5em;
}
.t-basket__product-attributes {
flex: 1 0 auto;
font-size: var(--message-one);
max-width: 20rem;
}
.t-basket__product-edit-save,
.t-basket__additional-product-actions {
display: inline-flex;
gap: 1.5rem;
}
.x-edit-basket-item,
.t-basket__product-remove,
.t-basket__product-save,
.t-basket__additional-product-actions {
line-height: var(--default-line-height);
}
.t-basket_coupon-form {
margin-bottom: calc(var(--default-spacing-unit) / 2);
}
.t-basket_coupon-form .c-form-input {
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
}
@media screen and ( -webkit-min-device-pixel-ratio: 2 ) {
.t-basket_coupon-form input {
font-size: var(--paragraph-large);
padding: calc(0.875em - var(--default-border-width)) calc(1.375em - var(--default-border-width));
}
}
.t-basket__order-summary .c-table-simple__row:not(.t-basket__order-total) {
border: 0 none;
}
.t-basket__order-total {
border-bottom: 0 none;
border-top: var(--default-border-width) solid var(--gray-400);
}
.t-basket__order-total-text {
color: var(--gray-600);
}
.t-basket__order-total td {
padding-top: var(--default-spacing-unit);
}
.t-checkout-log-in__form {
margin-bottom: 0;
}
.t-basket_coupon-form[ aria-hidden="false" ] {
margin-top: 0.5rem;
min-height: 3rem;
}
.t-helpful-info p {
align-items: center;
display: flex;
gap: var(--default-spacing-unit);
}
.t-helpful-info :is([ class^="u-icon-" ], [ class*="u-icon-" ]) {
font-size: var(--subheading-small);
}
@media ( max-width: 47.999em ) {
.t-page-bask .t-main-content-element {
padding-left: 0;
padding-right: 0;
}
.t-basket {
margin-bottom: 0;
padding-top: 0;
}
.t-basket__product-contents,
.t-basket__order-summary,
.t-basket__order-summary + .t-helpful-info {
padding: var(--default-spacing-unit);
}
.t-page-invc .t-helpful-info {
padding: 0;
}
.t-basket__product-contents {
padding-bottom: 2rem;
}
.t-basket__product-information {
gap: 1.25rem var(--default-spacing-unit);
grid-template-columns: 4.5rem 7.5rem 1fr;
padding: 1.25rem 0;
}
.t-basket__product-image {
grid-area: 1/1/2/2;
}
.t-basket__product-details {
grid-area: 1/2/2/4;
padding-right: 0;
}
.t-basket__product-qty {
grid-area: 2/2/3/3;
}
.t-basket__product-price {
grid-area: 2/3/3/4;
}
.t-basket__product-action-bar {
grid-area: 3/2/4/4;
}
}
/* Checkout Pages
=========================================== */
.t-logn-block {
margin: 6rem 0;
padding: 0 6rem;
}
.t-logn-block:not(:first-child) {
border-left: var(--default-border-width) solid var(--gray-400);
}
:is(.t-page-invc, .t-page-ords) .t-basket {
margin-bottom: 3rem;
padding-top: 0;
}
@media ( max-width: 47.999em ) {
:is(.t-page-invc, .t-page-logn, .t-page-ordl, .t-page-ords, .t-page-ocst, .t-page-osel, .t-page-opay) .t-main-content-element {
padding: var(--default-spacing-unit) 0 0;
}
.t-logn-block {
margin: 2rem 2rem 0;
padding: 0 0 0 var(--default-spacing-unit);
}
.t-logn-block:not(:first-child) {
border-left: 0 none;
}
}
.t-checkout-steps {
color: var(--gray-600);
display: grid;
font-size: 0.625rem;
font-weight: var(--font-medium);
grid-template-columns: repeat(3, 1fr);
line-height: 2;
margin-bottom: calc(2 * var(--default-spacing-unit));
text-transform: uppercase;
}
.t-checkout-step--mobile {
font-weight: var(--font-bold);
grid-column: span 3;
padding-bottom: 1em;
text-align: center;
}
@media ( min-width: 48em ) {
.t-checkout-step--mobile {
display: none;
}
}
.t-checkout-step {
border-bottom: 0.1875rem solid var(--gray-200);
text-decoration: none;
}
.t-checkout-step--complete {
border-bottom-color: currentColor;
color: var(--black);
font-weight: var(--font-bold);
}
.t-checkout-basket-summary {
background-color: #F2F2F2;
height: calc(100% - 1rem);
padding: 2rem 2rem 0;
}
.t-checkout-basket-summary__product-summary tbody .c-table-simple__cell {
padding-top: 1.5rem;
}
.t-checkout-basket-summary__image {
margin-right: 2rem;
}
.t-checkout-basket-summary__promo-form,
.t-checkout-basket-summary__promo-form:first-child,
.t-checkout-basket-summary__promo-form:last-child {
background-color: var(--gray-300);
display: block;
margin: -0.0625rem -2rem;
padding-left: 2rem;
padding-right: 2rem;
}
.t-ordl-form {
margin-bottom: 0;
}
@media ( max-width: 59.999em ) {
:is(.t-page-ocst, .t-page-opay, .t-page-ordl, .t-page-osel, .t-page-ous1, .t-page-ousm, .t-page-uatm, .t-page-uatr) .t-site-header__masthead {
padding: var(--default-spacing-unit) 0;
}
:is(.t-page-ocst, .t-page-opay, .t-page-ordl, .t-page-osel, .t-page-ous1, .t-page-ousm, .t-page-uatm, .t-page-uatr) .t-site-header__logo {
flex-basis: 50%;
max-width: 50%;
padding-left: var(--default-spacing-unit);
}
:is(.t-page-ocst, .t-page-opay, .t-page-ordl, .t-page-osel, .t-page-ous1, .t-page-ousm, .t-page-uatm, .t-page-uatr) .t-site-header__secure {
padding-left: var(--default-spacing-unit);
padding-right: var(--default-spacing-unit);
}
}
@media ( min-width: 60em ) {
.t-checkout-page .t-site-header {
padding-bottom: var(--default-spacing-unit);
padding-top: var(--default-spacing-unit);
}
}
@media ( min-width: 90em ) {
:is(.t-page-ocst, .t-page-opay, .t-page-ordl, .t-page-osel, .t-page-ous1, .t-page-ousm, .t-page-uatm, .t-page-uatr) .t-main-content-element {
padding-top: 2rem;
}
.t-checkout-basket-summary {
height: 100%;
}
.t-checkout-basket-summary .c-table-simple {
width: 60%;
}
.t-checkout-basket-summary__promo-form,
.t-checkout-basket-summary__promo-form:first-child,
.t-checkout-basket-summary__promo-form:last-child {
margin: -0.0625rem 0;
}
.t-page-ocst .t-site-footer,
.t-page-osel .t-site-footer,
.t-page-opay .t-site-footer {
padding-top: 0;
}
.t-page-ocst .t-site-footer__disclaimer,
.t-page-osel .t-site-footer__disclaimer,
.t-page-opay .t-site-footer__disclaimer {
padding-bottom: 1em;
padding-top: 1em;
text-align: left;
}
.t-page-ocst .t-site-footer__disclaimer .o-layout__item,
.t-page-osel .t-site-footer__disclaimer .o-layout__item,
.t-page-opay .t-site-footer__disclaimer .o-layout__item {
flex: 0;
white-space: nowrap;
}
}
.t-payment-heading {
margin-bottom: var(--default-spacing-unit);
}
.t-payment-authnet-seal img {
max-width: 3.75rem;
}
.t-payment-cta {
padding: 3rem 0;
text-align: right;
}
.t-payment-form {
border: var(--default-border-width) solid var(--gray-400);
}
.t-payment-form__heading {
background-color: var(--gray-100);
border-bottom: var(--default-border-width) solid var(--gray-400);
display: flex;
font-size: var(--default-input-font-size);
justify-content: space-between;
padding: 1em;
}
.t-payment-form__heading a {
margin-left: 1em;
}
.t-payment-form__fields {
display: flex;
flex-wrap: wrap;
gap: var(--default-spacing-unit);
justify-content: space-between;
padding: 1em;
}
.t-payment-form__field-set {
flex-grow: 1;
}
.t-payment-form__field-set .c-form-input {
display: block;
}
.t-payment-form__field-exp {
max-width: calc(70% - 1em);
}
.t-payment-form__field-cvv {
max-width: calc(30% - 1em);
}
.t-payment-form .t-data-cvv {
font-size: var(--default-input-font-size);
}
@media ( min-width: 60em ) {
.t-payment-form__heading,
.t-payment-form__fields {
padding: 1em 2em;
}
.t-payment-form__field-set .c-form-input {
display: inline-block;
}
.t-payment-form__field-fname {
max-width: calc(50% - 1em);
}
.t-payment-form__field-lname {
max-width: calc(50% - 1em);
}
.t-payment-form__field-number {
max-width: calc(50% - 1em);
}
.t-payment-form__field-exp {
max-width: calc(40% - 1em);
}
.t-payment-form__field-cvv {
max-width: calc(10% - 1em);
}
}
.t-paypalcp .t-payment-form__field-set {
flex-basis: clamp(20rem, 50% - 1rem, 100%);
}
.t-customer-address-2 summary,
.t-order-instructions-toggle summary {
color: var(--gray-600);
}
.t-customer-address-2 summary span,
.t-order-instructions-toggle summary span {
cursor: pointer;
font-size: 0.8125rem;
text-decoration: underline;
text-decoration-thickness: from-font;
transition: -webkit-text-decoration ease-in-out 0.2s;
transition: text-decoration ease-in-out 0.2s;
transition: text-decoration ease-in-out 0.2s, -webkit-text-decoration ease-in-out 0.2s;
}
.t-customer-address-2[ open ] summary span,
.t-customer-address-2:not([ open ]) summary span,
.t-order-instructions-toggle[ open ] summary span,
.t-order-instructions-toggle:not([ open ]) summary:hover span {
text-decoration-thickness: 0.1em;
text-underline-offset: 0.15em;
}
.t-customer-address-2[ open ] summary,
.t-order-instructions-toggle[ open ] summary {
margin-bottom: 0.5em;
}
.t-customer-address-2 summary::marker,
.t-order-instructions-toggle summary::marker {
content: "+ ";
font-size: 1rem;
}
.t-customer-address-2[ open ] summary::marker,
.t-order-instructions-toggle[ open ] summary::marker {
content: "- ";
}
.t-osel-additional-fields {
margin-bottom: 1.375rem;
margin-top: 1.375rem;
}
@media ( min-width: 60em ) {
.t-shipping-methods {
max-width: 85%;
}
}
.t-shipping-method {
border-bottom: var(--default-border-width) solid var(--gray-200);
line-height: 1;
margin: 0;
padding: 1.25rem 0;
}
.t-shipping-method:first-of-type {
border-top: var(--default-border-width) solid var(--gray-200);
}
.t-shipping-method .c-form-checkbox {
margin-bottom: 0;
}
.t-shipping-method .c-form-checkbox__input:checked ~ .c-form-checkbox__caption .shipping-method-price {
color: var(--primary);
}
.t-shipping-modal-triggers {
display: flex;
flex-flow: row wrap;
gap: var(--default-spacing-unit);
margin-bottom: 1.625rem;
margin-top: -0.5rem;
}
.t-shipping-modal-trigger {
background-color: transparent;
border: 0 none;
cursor: pointer;
font-family: var(--primary-font-family);
padding: 0;
text-decoration: underline;
width: -moz-fit-content;
width: fit-content;
}
.t-checkout-customer-summary {
color: var(--gray-600);
}
.t-order-complete-heading {
background-color: var(--white);
margin-bottom: var(--default-spacing-unit);
padding: 1.5rem var(--default-spacing-unit);
}
.t-account-at-checkout {
border-top: var(--default-border-width) solid var(--gray-400);
margin-top: 1.5rem;
padding-top: 2rem;
}
.t-account-at-checkout .c-form-list__item {
max-width: 30rem;
}
.t-account-at-checkout .c-form-inline-set span {
flex: 1;
}
.t-account-at-checkout .c-form-inline-set .c-form-input {
margin-bottom: 0;
}
.t-account-at-checkout .c-form-inline-set .c-button {
align-self: flex-end;
}
.t-order-complete-content {
background-color: var(--white);
margin-bottom: var(--default-spacing-unit);
padding: 1.5rem var(--default-spacing-unit);
}
@media ( min-width: 48em ) {
.t-order-complete-heading {
border-radius: calc(var(--default-border-radius) * 2);
padding: 2.25rem 4rem 1.25rem;
}
.t-order-complete-content {
border-radius: calc(var(--default-border-radius) * 2);
padding: 3rem 4rem;
}
}
.t-order-totals-table tr:not(.t-basket__order-total) {
border: 0 none;
}
/* Account Landing Page
=========================================== */
.t-page-acln .c-heading-delta {
align-items: center;
margin-bottom: 0;
}
.t-account-landing-section {
margin-bottom: calc(var(--default-spacing-unit) * 2);
}
.t-account-landing-section__content:not([ aria-hidden="true" ]) {
padding-bottom: var(--default-spacing-unit);
}
.t-account-landing-section .x-collapsible-content__toggle {
font-family: inherit;
font-size: var(--default-font-size);
}
.t-account-landing-section__title {
color: var(--gray-600);
}
.t-address-book__default-address {
background-color: var(--gray-100);
border-radius: 1rem;
color: var(--black);
display: inline-block;
font-size: var(--message-one);
font-weight: var(--font-medium);
margin-bottom: 0.25rem;
padding: 0.25rem var(--default-spacing-unit);
}
.t-page-acln__wish-list-content {
padding-top: 0;
}
.t-helpful-info {
border-top: var(--default-border-width) solid var(--gray-200);
margin-top: calc(var(--default-spacing-unit) * 2);
padding-left: 0;
padding-right: 0;
padding-top: calc(var(--default-spacing-unit) * 2);
}
.t-account-edit-link {
text-underline-offset: 0.375rem;
}
.t-account-landing-section .t-newsletter-form__title {
display: none;
}
.t-account-landing-section .t-newsletter-form__input:not(.c-button) {
background: var(--white);
border-color: var(--gray-400);
color: var(--black);
}
.t-page-acln .t-newsletter-form .hs-input {
background: var(--white);
border: var(--default-border-width) solid var(--gray-300);
color: var(--black);
}
.t-account-address-book-grid .o-layout__item:not(:last-child) {
margin-bottom: 1rem;
}
@media screen and ( min-width: 60em ) {
.t-page-acln .c-heading-delta {
margin-bottom: var(--default-spacing-unit);
}
.t-account-landing-section .x-collapsible-content__toggle {
display: none;
}
.x-category-tree.t-account-landing-section {
padding-top: 0;
}
.t-account-landing-section__content {
padding-top: 1.25rem;
}
.t-account-landing-section .x-collapsible-content__item {
list-style: none;
margin: 0;
max-height: none;
opacity: 1;
overflow: visible;
visibility: visible;
}
.t-account-landing-section .x-collapsible-content__item .x-category-tree__link-set,
.t-account-landing-section .x-collapsible-content__item .x-category-tree__link {
line-height: 2;
}
.t-account-landing-section .x-collapsible-content__item .x-category-tree__link-set {
font-size: var(--subheading-small);
font-weight: var(--font-medium);
}
.t-account-landing-section .x-collapsible-content__item .x-category-tree__link {
margin: var(--default-spacing-unit) 0;
padding: 0;
text-transform: none;
}
}
/* Account Pages (ACAD/ACED/CEML/CPWD/RGFT)
=========================================== */
#shipping_fields .c-form-list .c-form-list__item:last-child,
#shipping_fields .c-form-list .c-form__item:last-child,
#billing_fields .c-form-list .c-form-list__item:last-child,
#billing_fields .c-form-list .c-form__item:last-child {
margin-bottom: 0.5rem;
}
@media screen and ( min-width: 60em ) {
.t-ceml-form,
.t-cpwd-form,
.t-rgft-form {
justify-content: flex-start;
}
}
/* FAQ Page
=========== */
.t-faq-content {
display: grid;
gap: var(--default-spacing-unit) calc(var(--default-spacing-unit) * 2);
grid-template-columns: repeat(2, 1fr);
place-items: flex-start stretch;
}
.t-faq-content details {
border: var(--default-border-width) solid var(--gray-400);
border-radius: calc(var(--default-border-radius) * 2);
padding: var(--default-spacing-unit) var(--default-spacing-unit) 0;
}
/* Site Map Page
=========== */
.t-site-map-list {
align-items: center;
display: grid;
gap: var(--default-spacing-unit);
grid-auto-rows: 2em;
grid-template-columns: repeat(auto-fill, 20em);
list-style: none;
margin: 0 0 var(--default-spacing-unit);
}
/* Page Title Banner
=========================================== */
.t-page-title-banner {
background-color: var(--secondary);
}
.t-page-title-banner__name {
color: var(--white);
font-size: 1.125rem;
letter-spacing: 0.625em;
margin-bottom: 0;
text-align: center;
text-transform: uppercase;
}
.t-page-title-banner__text {
padding: 1.25rem 1rem 1.5rem 1rem;
}
@media ( min-width: 48em ) {
.t-page-title-banner__text {
padding-inline: 2rem;
}
}
@media ( min-width: 60em ) {
.t-page-title-banner__name {
font-size: 1.375rem;
}
}
@media ( min-width: 75em ) {
.t-page-title-banner__text {
padding: 2.25rem 4rem 2.5rem 4rem;
}
}
@media ( min-width: 90em ) {
.t-page-title-banner__text {
padding: 3.25rem 6rem 3.5rem 6rem;
}
}
/* Static Info Page Styles
=========================================== */
.t-page-info {
padding-block: 1.5rem;
}
.t-page-info__container {
margin-inline: auto;
}
.t-page-info__container--sm {
max-width: 50rem;
}
.t-page-info__cta {
padding-block: 1rem;
}
.t-page-info__divider {
margin-block-end: 2rem;
}
.t-page-info__img {
aspect-ratio: 16 / 9;
}
.t-page-info__section {
font-size: 1rem;
line-height: 1.75;
padding-block-end: 1rem;
}
.t-page-info__subsection {
padding-inline-start: 2rem;
}
.t-page-info__title {
letter-spacing: 0.125rem;
}
.t-page-info__video {
padding-block-end: 2rem;
}
.t-page-info [ data-tab-component ] [ role="tabpanel" ] * + * {
margin-block-start: 0;
}
@media ( min-width: 64em ) {
.t-page-info {
padding-block: 2rem;
}
.t-page-info__cta {
padding-block: 2rem;
}
}
@media ( min-width: 80em ) {
.t-page-info {
padding-block: 3rem;
}
}
/* Custom Helper Utilities
=========================================== */
.c-button--hollow {
background-color: var(--white);
border-color: var(--primary);
color: var(--primary);
}
/* stylelint-disable declaration-no-important */
.c-button--hollow:hover {
background-color: var(--primary) !important;
border-color: var(--primary);
color: var(--white) !important;
}
/* stylelint-enable declaration-no-important */
.u-color-primary {
color: var(--primary);
}
/* ===== +MISC PAGES+ ===== */
#js-INT .main-content h2 {
margin-bottom: 3.75rem;
}
#js-INT .grid {
display: grid;
grid-gap: 2.5rem;
grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
}
#js-INT .grid:not(:last-child) {
margin-bottom: 2.5rem;
}
#js-INT .main-content h4 {
margin-bottom: 1.875rem;
}
#js-INT address {
font-size: 0.875rem;
font-style: normal;
line-height: 1.75;
margin-bottom: 0;
}
#js-INT address a {
color: #000;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.0625rem;
text-transform: uppercase;
}
#js-INT address a:hover {
color: #585858;
}
#js-INT hr {
background-color: var(--gray-600);
border: none;
color: var(--gray-600);
height: 0.0625rem;
}
/* PLST Page Banner
=========================================== */
.t-plst-header {
background-color: var(--secondary);
background-position: center;
background-size: cover;
padding: 2rem;
}
.t-plst-header__text {
font-size: 1rem;
line-height: 1.75;
margin-inline: auto;
max-width: 60rem;
}
.t-plst-header__name {
display: block;
letter-spacing: 0.25rem;
padding-block-end: 2rem;
}
@media ( min-width: 64em ) {
.t-plst-header {
padding: 5rem;
}
}
#newsletter_controls {
margin-top: 0.5rem;
}
/* RTNL and RTNF Page Styles
=========================================== */
#oauth-connectors img {
margin: 0.25rem 0;
width: 9.375rem;
}
.or-spacer {
margin: 0 auto;
}
.or-spacer hr {
border: 1px solid var(--gray-200);
}
.or-spacer p {
margin: 0;
padding: 0.5rem;
}
#js-return-rows textarea {
max-height: 3.17rem;
}
.c-dialog__content iframe {
display: block;
height: 70vh;
margin: 0;
min-width: 100%;
padding: 0;
width: 100%;
}
/* Buy X get Y - Basket */
.x-buyxgety-basket {
margin-bottom: 1.5rem;
margin-top: 1.875rem;
}
.x-buyxgety-basket__title {
color: var(--black);
font-size: 1.125rem;
font-weight: var(--font-medium);
line-height: 1.3;
margin-bottom: 1.375rem;
}
.x-buyxgety-basket__item {
background-color: var(--gray-100);
display: flex;
flex-flow: row nowrap;
gap: 0 1.25rem;
margin-left: calc(-1 * var(--default-spacing-unit));
margin-right: calc(-1 * var(--default-spacing-unit));
padding: 1.25rem 1rem;
}
.x-buyxgety-basket__item-image {
width: 4.375rem;
}
.x-buyxgety-basket__item-details {
color: var(--gray-600);
flex-grow: 1;
font-weight: var(--font-medium);
}
.x-buyxgety-basket__item-top {
display: flex;
flex-flow: row nowrap;
gap: 1.25rem;
justify-content: space-between;
}
.x-buyxgety-basket__item-name {
font-size: 0.875rem;
margin-bottom: 0.6875rem;
}
.x-buyxgety-basket__item-discount {
color: var(--gray-500);
display: flex;
flex-flow: row;
font-size: 0.75rem;
gap: 0.25rem;
margin-bottom: 1rem;
}
.x-buyxgety-basket__item-discount-tag {
position: relative;
top: -0.125rem;
}
.x-buyxgety-basket__item-pricing {
align-self: flex-start;
color: var(--black);
display: flex;
flex-flow: column-reverse;
font-weight: var(--font-bold);
gap: 0 0.3125rem;
line-height: 1.2;
padding-top: 0.3125rem;
text-align: right;
}
.x-buyxgety-basket__item-base-price {
color: var(--gray-500);
font-size: 0.875rem;
font-weight: var(--font-medium);
position: relative;
top: -0.125rem;
}
.x-buyxgety-basket__item-form {
margin-bottom: 0;
}
.x-buyxgety-basket__item-cta {
background: var(--transparent);
}
/* Buy X get Y - Mini Basket */
.x-buyxgety-minibasket {
background-color: var(--gray-100);
margin-left: calc(-1 * var(--default-spacing-unit));
margin-right: calc(-1 * var(--default-spacing-unit));
margin-top: 1rem;
padding: 1rem 1rem 1.625rem;
}
.x-buyxgety-minibasket__title {
color: var(--black);
font-size: var(--default-font-size);
font-weight: var(--font-medium);
margin-bottom: 1.25rem;
text-align: center;
}
.x-buyxgety-minibasket__item {
display: flex;
flex-flow: row nowrap;
gap: 0 1.25rem;
}
.x-buyxgety-minibasket__item-image {
width: 2.5rem;
}
.x-buyxgety-minibasket__item-details {
color: var(--gray-600);
flex-grow: 1;
font-weight: var(--font-medium);
}
.x-buyxgety-minibasket__item-name {
font-size: 0.875rem;
margin-bottom: 0.25rem;
}
.x-buyxgety-minibasket__item-discount {
color: var(--gray-500);
display: flex;
flex-flow: row;
font-size: 0.75rem;
gap: 0.25rem;
margin-bottom: 1.4375rem;
}
.x-buyxgety-minibasket__item-discount-tag {
position: relative;
top: -0.125rem;
}
.x-buyxgety-minibasket__item-footer {
display: flex;
flex-flow: row nowrap;
gap: 0 1rem;
justify-content: space-between;
margin-bottom: 1.125rem;
}
.x-buyxgety-minibasket__item-qty {
color: var(--black);
font-size: 0.8125rem;
font-weight: var(--font-medium);
}
.x-buyxgety-minibasket__item-pricing {
align-items: center;
color: var(--black);
display: flex;
flex-flow: row;
font-size: 0.875rem;
font-weight: var(--font-bold);
gap: 0 0.3125rem;
line-height: 1.2;
text-align: right;
}
.x-buyxgety-minibasket__item-base-price {
color: var(--gray-500);
font-weight: var(--font-medium);
position: relative;
top: -0.125rem;
}
.x-buyxgety-minibasket__item-form {
margin-bottom: 0;
}
.x-buyxgety-minibasket__item-cta {
background: var(--transparent);
}
@media ( min-width: 48em ) {
.x-buyxgety-basket {
margin-bottom: 0;
}
.x-buyxgety-basket__item {
margin-left: 0;
margin-right: 0;
max-width: 100%;
padding: 1.25rem;
width: 28.875rem;
}
.x-buyxgety-basket__item-image {
width: 6.375rem;
}
.x-buyxgety-basket__item-top {
flex-flow: column;
gap: 0;
}
.x-buyxgety-basket__item-name {
margin-bottom: 0.0625rem;
}
.x-buyxgety-basket__item-pricing {
align-items: center;
flex-flow: row;
gap: 0 0.3125rem;
margin-bottom: 0.8125rem;
padding: 0;
text-align: left;
}
}
/* stylelint-disable declaration-no-important */
/* ==========================================================================
EXTENSIONS LIST
========================================================================== */
/* ======================================
EXTENSIONS / BREADCRUMBS / BREADCRUMBS
====================================== */
.x-breadcrumbs {
margin-bottom: 1.25rem;
text-transform: uppercase;
}
@media ( min-width: 60em ) {
.x-breadcrumbs {
margin: 0 auto calc(var(--default-spacing-unit) * 2);
max-width: var(--default-content-width);
width: 100%;
}
}
.x-breadcrumbs__list {
border-bottom: 0 none;
color: var(--gray-600);
font-size: var(--message-one);
gap: var(--default-spacing-unit) 0;
line-height: inherit;
list-style: none;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
max-width: var(--default-wrapper-width);
padding-left: var(--default-spacing-unit);
padding-right: var(--default-spacing-unit);
padding-top: var(--default-spacing-unit);
}
.x-breadcrumbs__item {
display: inline;
}
.x-breadcrumbs__item:not(:last-child) {
margin-right: var(--default-spacing-unit);
}
.x-breadcrumbs__item:not(:last-of-type):after {
border-right: 0.2ch solid currentColor;
content: "";
display: inline-block;
height: 1.75ch;
position: relative;
right: -0.5rem;
top: 0.25ch;
transform: rotate(15deg);
}
.x-breadcrumbs__item:not([ aria-current="page" ]) a {
color: currentColor;
}
.x-breadcrumbs a {
text-decoration: none;
transition: all ease-in-out 0.2s;
}
.x-breadcrumbs a:is(:active, :focus, :hover) {
color: var(--primary--hover);
}
/* ==========================================================================
EXTENSIONS / CATEGORY TREE / CATEGORY TREE
========================================================================== */
.x-category-tree {
backface-visibility: hidden;
background: var(--transparent);
bottom: 0;
left: 0;
opacity: 0;
overflow: hidden;
padding: 0;
position: fixed;
right: 0;
top: 0;
transition: all ease-in-out 0.2s;
z-index: -1;
}
.x-category-tree.is-open {
background: rgba(34, 34, 34, 0.8);
opacity: 1;
overflow-y: auto;
z-index: 2;
}
.x-category-tree__wrap {
background: var(--white);
max-width: 20rem;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 0 1.25rem 1.25rem;
transform: translateX(-100%);
transform-origin: left;
transition: all ease-in-out 0.2s;
}
.x-category-tree.is-open .x-category-tree__wrap {
transform: translateX(0);
}
.x-category-tree__header {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.x-category-tree__mobile-title {
font-size: 0.8125rem;
font-weight: var(--font-medium);
}
.x-category-tree__mobile-title-icon {
margin-right: 0.25rem;
position: relative;
top: -0.0625rem;
}
.x-category-tree__close {
background-color: var(--transparent);
border: none;
cursor: pointer;
font-size: 0.625rem;
padding: var(--default-spacing-unit);
text-decoration: none;
transform: translateX(1rem);
}
.x-category-tree__close:hover {
color: var(--primary);
}
.x-category-tree__wrap .x-display-list-filtering {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.x-category-tree__wrap .x-display-list-filtering .c-form-label {
font-size: 0.8125rem;
font-weight: var(--font-medium);
}
.x-category-tree__wrap .x-display-list-filtering__per-page {
margin-right: 0;
}
.x-category-tree__categories {
border-bottom: var(--default-border-width) solid var(--gray-200);
padding: 1.125rem 0;
}
.x-category-tree__label.x-collapsible-content__toggle {
color: var(--black);
cursor: pointer;
font-family: var(--primary-font-family);
font-size: 1rem;
font-weight: var(--font-medium);
transition: all ease-in-out 0.2s;
}
.x-category-tree__label.x-collapsible-content__toggle span[ class^="u-icon-" ] {
color: var(--gray-600);
font-size: 0.625rem;
}
.x-category-tree__label.x-collapsible-content__toggle.has-children,
.x-category-tree__link {
border-top: var(--default-border-width) solid var(--gray-200);
color: var(--gray-600);
font-size: 0.8125rem;
letter-spacing: 0.04em;
padding: var(--default-spacing-unit) 0.75rem;
text-align: left;
text-transform: uppercase;
}
.x-category-tree__label.x-collapsible-content__toggle.has-children:is([ aria-expanded="true" ]) {
background: var(--gray-100);
border-color: var(--gray-100);
}
.x-category-tree__link,
.x-category-tree__child-link {
display: block;
text-decoration: none;
}
.x-category-tree__label.x-collapsible-content__toggle[ aria-expanded="false" ]:hover,
.x-category-tree__link:hover,
.x-category-tree__child-link:hover,
.x-category-tree__label.x-collapsible-content__toggle.x-category-tree__link--current,
.x-category-tree__link.x-category-tree__link--current,
.x-category-tree__child-link.x-category-tree__child-link--current {
color: var(--primary);
}
.x-category-tree__link:first-child {
border-top: none;
}
.x-category-tree__child-link {
color: var(--black);
font-size: 0.75rem;
line-height: 1.5;
}
.x-category-tree__child-link:not(:last-child) {
margin-bottom: 1rem;
}
.x-category-tree .x-collapsible-content__item[ aria-hidden="false" ] {
margin-top: 0.75rem;
max-height: 100%;
}
.x-category-tree .x-collapsible-content__child-item[ aria-hidden="false" ] {
margin-bottom: 1rem;
margin-top: 1rem;
}
.x-category-tree .x-collapsible-content__child-item {
padding: 0 1.125rem;
}
.x-category-tree__heading {
color: var(--gray-600);
}
.x-category-tree__heading--facets {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 0;
}
.x-category-tree__clear-all {
color: var(--gray-600);
font-size: var(--default-input-font-size);
font-weight: var(--font-regular);
}
.x-category-tree__section-title:not(:first-of-type) {
margin-top: 2.5rem;
}
.x-category-tree__list--level-2 .x-category-tree__link,
.x-category-tree__list--level-3 .x-category-tree__link {
font-size: var(--default-input-font-size);
}
.x-category-tree__list--level-2 .x-category-tree__link {
font-weight: var(--font-regular);
padding-left: var(--title-four);
}
.x-category-tree__list--level-3 .x-category-tree__link {
padding-left: var(--title-two);
}
@media screen and ( min-width: 60em ) {
.x-category-tree {
backface-visibility: visible;
opacity: 1;
overflow: auto;
padding-top: 3.625rem;
position: static;
transition: none;
z-index: 1;
}
.x-category-tree__wrap {
background: var(--transparent);
max-width: none;
overflow-x: auto;
overflow-y: hidden;
padding: 0;
transform: translateX(0);
transition: none;
}
.x-category-tree__header {
display: none;
}
}
/**
* This section contains the necessary styles when using the built-in search
* faceting ability of Miva. Since the functional code is generated at run-time,
* these styles do not conform to the tenants used in the rest of the framework.
*/
.mm_facet_rangeslider {
display: block;
height: 2em;
margin: 0.25em;
position: relative;
}
.mm_facet_rangeslider_input_container_low,
.mm_facet_rangeslider_input_container_high {
border-bottom: var(--default-border-width) solid var(--gray-300);
height: 2em;
position: absolute;
text-align: center;
top: 0;
width: 4em;
}
.mm_facet_rangeslider_input_container_low {
border-radius: 0.25em 0 0 0.25em;
left: 0;
}
.mm_facet_rangeslider_input_container_high {
border-radius: 0 0.25em 0.25em 0;
right: 0;
}
.mm_facet_rangeslider_input_container_low.mm_facet_rangeslider_input_active,
.mm_facet_rangeslider_input_container_high.mm_facet_rangeslider_input_active {
border-color: var(--gray-300);
}
.mm_facet_rangeslider_track_container {
border-bottom: var(--default-border-width) solid var(--gray-300);
border-top: var(--default-border-width) solid var(--gray-300);
box-sizing: border-box;
height: 2em;
left: 4em;
position: absolute;
right: 4em;
top: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.mm_facet_rangeslider_track {
height: 0.25em;
left: 0.25em;
position: absolute;
right: 0.25em;
top: 50%;
transform: translateY(-50%);
}
.mm_facet_rangeslider_track_background,
.mm_facet_rangeslider_track_selection {
background: var(--gray-300);
bottom: 0;
left: 0.5em;
position: absolute;
right: 0.5em;
top: 0;
}
.mm_facet_rangeslider_track_selection {
background: var(--gray-300);
}
.mm_facet_rangeslider_track_handle_low,
.mm_facet_rangeslider_track_handle_high {
background: var(--white);
border: var(--default-border-width) solid var(--gray-300);
border-radius: 50%;
cursor: pointer;
height: 2em;
left: -0.5em;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2em;
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini {
height: 6em;
margin: 0;
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_low {
border-radius: 0.25em 0 0 0;
width: 50%;
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_high {
border-left: none;
border-radius: 0 0.25em 0 0;
width: 50%;
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_track_container {
border: var(--default-border-width) solid var(--gray-300);
border-radius: 0 0 0.25em 0.25em;
border-top: none;
height: 3em;
left: 0;
right: 0;
top: 2em;
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_low.mm_facet_rangeslider_input_active,
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_high.mm_facet_rangeslider_input_active {
border-color: var(--gray-200);
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
EXTENSIONS / DISPLAY LIST FILTERING / DISPLAY LIST FILTERING
========================================================================== */
/**
* Display list filtering is for use in product list filtering as well as any
* place a batch list or sortable data is used.
*/
.x-display-list-filtering-button__trigger {
color: var(--black);
font-size: 0.8125rem;
font-weight: var(--font-medium);
line-height: 1;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.x-display-list-filtering-button__trigger:is(:active, :focus, :hover) {
color: var(--primary);
text-decoration: none;
}
.x-display-list-filtering-button__icon {
margin-right: 0.375rem;
}
.x-display-list-product-count {
font-size: 0.75rem;
}
.x-display-list-filtering {
flex-wrap: nowrap;
}
.x-display-list-filtering .c-form-label {
color: var(--gray-600);
font-size: 0.75rem;
}
.x-display-list-filtering .c-form-select__dropdown {
font-family: var(--primary-font-family);
}
.x-display-list-filtering :is(.x-display-list-filtering__per-page, .x-display-list-filtering__sort-by, .c-form-list__item, .c-form-label, .c-form-select) {
color: var(--gray-600);
margin-bottom: 0;
}
.x-display-list-filtering__per-page {
margin-right: calc(var(--default-spacing-unit) * 4);
}
/**
* Product List Page Modifications
*/
:is(.t-page-ctgy, .t-page-plst, .t-page-srch) :is(.x-display-list-filtering .c-form-select__dropdown) {
border: 0 none;
color: var(--gray-600);
padding: 0;
}
:is(.t-page-ctgy, .t-page-plst, .t-page-srch) :is(.x-display-list-filtering .c-form-select):after {
right: 0;
}
@media screen and ( min-width: 60em ) {
.x-display-list-product-count {
font-size: var(--default-font-size);
}
}
/* ==========================================================================
EXTENSIONS / HERO
========================================================================== */
/**
* The Hero component provides a dominant piece of media to a page
*
* 1. Allows for absolute positioning of borders and content.
* 2. Hero images set via background-image should cover and center.
*/
.x-hero {
background-position: center; /* [2] */
background-size: cover; /* [2] */
display: block;
position: relative; /* [1] */
}
/**
* The caption overlays at the bottom of a Hero, providing space for additional
* content such as titles or logos.
*/
.x-hero__caption {
bottom: 0;
padding: var(--default-spacing-unit) 0;
position: absolute;
text-shadow: 0 0 25px rgba(0, 0, 0, 0.25), 1px 1px 1px rgba(0, 0, 0, 0.5);
width: 100%;
}
/**
* Hero video needs to be set to `display: block` to avoid spacing issues.
*/
.x-hero__video {
display: block;
height: 100%;
-o-object-fit: fill;
object-fit: fill;
width: 100%;
}
/**
* Hero link inherits the Hero `color` to override anchor element styles.
*/
.x-hero__link {
color: inherit;
}
/**
* As we cannot set a border property over video, borders are implemented
* using pseudo-elements.
*/
.x-hero--borders:before {
border: calc(var(--default-spacing-unit) / 4) solid rgba(255, 255, 255, 0.3);
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
/**
* Make any other content below the Hero overlap upwards.
*/
.x-hero--overlap {
margin-bottom: -10vh;
}
/**
* If hero has overlap modifier, shift caption upwards to compensate.
*/
.x-hero--overlap .x-hero__caption {
bottom: 10vh;
}
/* ==========================================================================
EXTENSIONS / MESSAGES
========================================================================== */
/**
* Messages are block elements used to display information to the visitor about
* their current session. Typically these are informational or error messages
* such as you would see on a checkout page if there was an error with the
* credit card used.
*/
.x-messages {
background-color: var(--gray-200);
border: var(--default-border-width) solid var(--gray-500);
color: var(--black);
font-size: var(--default-font-size);
margin-bottom: var(--default-spacing-unit);
padding: 0.875em 1.25em;
}
.x-messages *:last-child {
margin-bottom: 0;
}
.x-messages--borderless {
border: 0 none;
}
.x-messages--error {
background-color: var(--red-100);
border-color: var(--red-200);
color: var(--red-400);
}
.x-messages--info {
background-color: var(--blue-100);
border-color: var(--blue-200);
color: var(--blue-400);
}
.x-messages--success {
background-color: var(--green-100);
border-color: var(--green-200);
color: var(--green-400);
}
.x-messages--warning {
background-color: var(--yellow-100);
border-color: var(--yellow-200);
color: var(--yellow-400);
}
/**
* These classes will help format the message if you are adding an icon.
*/
.x-messages--with-icon {
align-items: center;
display: flex;
gap: 1.25em;
}
.x-messages__icon {
font-size: 2em;
}
.x-messages__close {
line-height: 1;
margin-top: -1rem;
position: absolute;
right: 0.25rem;
text-decoration: none;
top: 50%;
}
/* ==========================================================================
EXTENSIONS / PAGINATION
========================================================================== */
/**
* Pagination is for use in product list as well as any place a pageable batch
* list or data is used.
*/
.x-pagination {
margin-bottom: auto var(--default-spacing-unit);
max-width: 18rem;
}
.x-pagination--centered {
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.x-pagination--right {
margin-left: auto;
}
.x-pagination__list {
align-items: center;
display: flex;
gap: var(--default-spacing-unit);
justify-content: space-between;
list-style: none;
margin: 0;
width: 100%;
}
.x-pagination__link {
border: none;
border-radius: 50%;
color: var(--gray-600);
font-size: 0.75rem;
height: 2.8125rem;
padding: 0;
width: 2.8125rem;
}
span.x-pagination__link {
opacity: 0.5;
pointer-events: none;
}
.x-pagination__link:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.14);
color: var(--gray-600);
outline-color: var(--gray-600);
}
.x-pagination__link:active:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.14);
color: var(--primary);
outline: var(--default-border-width) solid var(--primary);
}
.x-pagination__link:focus-visible:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.14);
color: var(--focus);
}
.x-pagination .c-form-select {
margin-bottom: 0;
}
.x-pagination .c-form-select:before {
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.x-pagination .c-form-select__dropdown {
border-radius: 0.25rem;
font-family: var(--primary-font-family);
padding-bottom: 0.6875rem;
padding-top: 0.6875rem;
}
/* ==========================================================================
EXTENSIONS / PRODUCT LAYOUT / PRODUCT LAYOUT
========================================================================== */
/**
* This is the default product layout for the product page.
*/
.x-product-layout {
margin-bottom: 2.5rem;
}
.x-product-layout__image-wrap {
margin-bottom: 2rem;
}
.x-product-layout-images {
display: flex;
flex-flow: column nowrap;
gap: 0.75rem;
margin-left: 0;
min-height: var(--prod-img-y);
}
.x-product-layout-images .x-filmstrip {
margin: 0 0.5rem;
}
.x-product-layout-images .x-filmstrip__list {
column-gap: 0.75rem;
margin: 0 auto;
padding: 0;
}
.x-product-layout-images .x-filmstrip__list .x-filmstrip__list-item {
height: 4rem;
width: 4rem;
}
.x-product-layout-images .x-filmstrip__list.has-controls {
padding: 0;
}
.x-product-layout-images__figure,
.x-product-layout-images__picture,
.x-product-layout-images__image {
display: block;
margin-bottom: 0;
}
.x-product-layout-images__image {
width: 100%;
}
.x-product-layout-images__thumbnail-image {
margin-bottom: var(--default-spacing-unit);
}
.x-product-layout-purchase {
margin-bottom: 0;
}
.x-product-layout-purchase .c-form-list__item {
margin-bottom: 0;
}
.x-product-layout-purchase__name {
font-family: var(--primary-font-family);
font-size: 1.25rem;
font-weight: var(--font-medium);
line-height: 1.75rem;
margin-bottom: 0.125rem;
}
.x-product-layout-purchase__privacy,
.x-product-layout-purchase__privacy-level {
align-items: center;
display: flex;
flex-flow: row nowrap;
}
.x-product-layout-purchase__privacy {
color: var(--gray-500);
font-size: var(--message-one);
font-weight: var(--font-medium);
line-height: 1.125rem;
text-transform: uppercase;
}
.x-product-layout-purchase__privacy-level,
.x-product-layout-purchase__privacy-level-trigger {
margin-left: 0.25rem;
}
.x-product-layout-purchase__privacy-level-trigger {
background: #8D8D8D;
border-radius: 50%;
color: var(--white);
cursor: pointer;
display: inline-block;
font-size: 0.625rem;
font-weight: var(--font-medium);
height: 0.8125rem;
line-height: 0.8125rem;
text-align: center;
width: 0.8125rem;
}
.x-product-layout-purchase__privacy-tooltip {
align-items: center;
display: flex;
flex-flow: row nowrap;
}
.x-product-layout-purchase__privacy-tooltip-bars {
display: flex;
flex-basis: 2rem;
flex-flow: row nowrap;
gap: 0.1875rem;
max-width: 2rem;
}
.x-product-layout-purchase__privacy-tooltip-bar {
background-color: #66747C;
flex-basis: 25%;
height: 1.75rem;
max-width: 25%;
}
.x-product-layout-purchase__privacy-tooltip-tier-1 .x-product-layout-purchase__privacy-tooltip-bar:nth-child(1),
.x-product-layout-purchase__privacy-tooltip-tier-2 .x-product-layout-purchase__privacy-tooltip-bar:nth-child(1),
.x-product-layout-purchase__privacy-tooltip-tier-2 .x-product-layout-purchase__privacy-tooltip-bar:nth-child(2),
.x-product-layout-purchase__privacy-tooltip-tier-3 .x-product-layout-purchase__privacy-tooltip-bar:nth-child(1),
.x-product-layout-purchase__privacy-tooltip-tier-3 .x-product-layout-purchase__privacy-tooltip-bar:nth-child(2),
.x-product-layout-purchase__privacy-tooltip-tier-3 .x-product-layout-purchase__privacy-tooltip-bar:nth-child(3),
.x-product-layout-purchase__privacy-tooltip-tier-4 .x-product-layout-purchase__privacy-tooltip-bar {
background-color: var(--gray-100);
}
.x-product-layout-purchase__privacy-tooltip-text {
display: flex;
flex: 1;
flex-flow: row wrap;
padding-left: 0.625rem;
}
.x-product-layout-purchase__privacy-tooltip-descrip {
font-weight: var(--font-regular);
margin-top: 0.25rem;
}
.x-product-layout-purchase__reviews-and-qna {
align-items: center;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin-top: 0.75rem;
}
.x-product-layout-purchase__reviews {
position: relative;
top: 0.0625rem;
}
.x-product-layout-purchase__reviews-and-qna .yotpo.bottomLine .yotpo-bottomline .yotpo-icon-star,
.x-product-layout-purchase__reviews-and-qna .yotpo.bottomLine .yotpo-bottomline .yotpo-icon-half-star,
.x-product-layout-purchase__reviews-and-qna .yotpo.bottomLine .yotpo-bottomline .yotpo-icon-empty-star,
.x-product-layout-purchase__reviews-and-qna .yotpo.bottomline .yotpo-bottomline .yotpo-icon-star,
.x-product-layout-purchase__reviews-and-qna .yotpo.bottomline .yotpo-bottomline .yotpo-icon-half-star,
.x-product-layout-purchase__reviews-and-qna .yotpo.bottomline .yotpo-bottomline .yotpo-icon-empty-star,
.x-product-layout-purchase__reviews-and-qna .yotpo .yotpo-modal-bottom-line .yotpo-bottomline .yotpo-icon-star,
.x-product-layout-purchase__reviews-and-qna .yotpo .yotpo-modal-bottom-line .yotpo-bottomline .yotpo-icon-half-star,
.x-product-layout-purchase__reviews-and-qna .yotpo .yotpo-modal-bottom-line .yotpo-bottomline .yotpo-icon-empty-star {
font-size: var(--default-font-size);
}
.x-product-layout-purchase__reviews-and-qna .yotpo-stars + a {
margin-left: 0.5rem;
position: relative;
top: 0.125rem;
}
.x-product-layout-purchase__reviews-and-qna .yotpo a {
color: var(--gray-500) !important;
font-family: var(--primary-font-family);
font-size: 0.75rem;
font-weight: var(--font-medium);
line-height: 1;
}
.x-product-layout-purchase__reviews-and-qna .yotpo a:hover {
color: var(--primary) !important;
}
.x-product-layout-purchase__reviews-and-qna .x-product-layout-purchase__qna .yotpo-icon {
display: none;
}
.x-product-layout-purchase__pricing {
border-top: var(--default-border-width) solid var(--gray-200);
display: flex;
flex-flow: row wrap;
line-height: 1;
margin-bottom: 2rem;
margin-top: var(--default-spacing-unit);
padding-top: 1.375rem;
}
.x-product-layout-purchase__pricing-original,
.x-product-layout-purchase__pricing-current {
flex-basis: 100%;
max-width: 100%;
}
.x-product-layout-purchase__pricing-current {
font-size: var(--title-three);
font-weight: var(--font-bold);
}
.x-product-layout-purchase__pricing-label,
.x-product-layout-purchase__pricing-original {
color: var(--gray-500);
font-weight: var(--font-medium);
}
.x-product-layout-purchase__pricing-label {
font-size: var(--message-one);
letter-spacing: 0.022em;
}
.x-product-layout-purchase__pricing-original {
font-size: 1.375rem;
margin-top: 0.5rem;
}
.x-product-layout-purchase__product-discounts *,
.x-product-layout-purchase__product-weight,
.x-product-layout-purchase__product-quantity {
font-size: var(--message-one);
font-weight: var(--font-medium);
line-height: var(--title-four);
}
.x-product-layout-purchase__product-discounts * {
color: var(--primary);
margin-bottom: 1rem;
}
.x-product-layout-purchase__inventory-message:empty {
display: none;
}
.x-product-layout-purchase__options,
.x-product-layout-purchase__cta {
max-width: none;
width: auto;
}
.x-product-layout-purchase__options-attribute {
margin-bottom: calc(var(--default-spacing-unit) / 2);
width: 100%;
}
.x-product-layout-purchase__options-attribute-width-select {
column-gap: 0.75rem;
display: flex;
flex-flow: row wrap;
margin-bottom: 0;
}
.x-product-layout-purchase__options-attribute-roll-width-img,
.x-product-layout-purchase__options-attribute-roll-height-img {
align-self: center;
flex: 0 1 auto;
margin-top: -1rem;
}
.x-product-layout-purchase__options-attribute-width-select .c-form-label {
flex-basis: 100%;
max-width: 100%;
}
.x-product-layout-purchase__options-attribute-width-select .x-product-layout-purchase__options-attribute-options {
flex: 1;
}
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox:focus-within,
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox:focus-visible {
outline: none;
}
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox {
margin-bottom: var(--default-spacing-unit);
margin-right: 0.75rem;
}
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox__caption {
background: var(--gray-100);
border: var(--default-border-width) solid var(--gray-400);
border-radius: 50%;
font-size: 0.75rem;
height: 3rem;
margin-left: 0;
text-align: center;
width: 3rem;
}
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox:hover .c-form-checkbox__caption:before,
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox:focus-visible .c-form-checkbox__caption:before {
outline: 0.125rem solid var(--focus);
outline-offset: 0.125rem;
}
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox__caption:before {
background: var(--transparent);
border: none;
height: 3rem;
left: -0.0625rem;
margin: 0;
outline: 0.125rem solid;
outline-color: var(--transparent);
outline-offset: 0.125rem;
position: absolute;
transition: all 0.2s ease-in-out;
width: 3rem;
}
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox__input:checked + .c-form-checkbox__caption:before {
box-shadow: none;
outline-color: var(--primary);
transition: none;
}
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox__input:checked + .c-form-checkbox__caption:after,
.x-product-layout-purchase__options-attribute-width-select .c-form-checkbox--radio .c-form-checkbox__input:checked + .c-form-checkbox__caption:after {
display: none;
}
.x-product-layout-purchase__swatches {
min-height: 5rem;
padding-top: 0.1875rem;
}
.x-product-layout-purchase__swatches button {
background-color: transparent;
border: 0 none;
padding: 0;
}
.x-product-layout-purchase__swatches img {
border: var(--default-border-width) solid var(--gray-400);
border-radius: 50%;
height: 3rem;
width: 3rem;
}
.x-product-layout-purchase__swatches--active {
border-radius: 50%;
outline: var(--default-border-width) solid var(--black);
outline-offset: 0.25rem;
}
.x-product-layout-purchase__options-cut-to-size {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.x-product-layout-purchase__options-cut-to-size .x-product-layout-purchase__options-attribute {
align-items: center;
column-gap: 0.625rem;
display: flex;
flex-basis: 48%;
flex-flow: row wrap;
max-width: 48%;
}
.x-product-layout-purchase__options-cut-to-size .x-product-layout-purchase__options-attribute .c-form-label,
.x-product-layout-purchase__options-attribute-size-chart {
flex-basis: 100%;
max-width: 100%;
}
.x-product-layout-purchase__options-cut-to-size .x-product-layout-purchase__options-attribute-img {
flex-basis: 2.25rem;
max-width: 2.25rem;
}
.x-product-layout-purchase__options-cut-to-size .x-product-layout-purchase__options-attribute-options {
flex: 1;
}
.x-product-layout-purchase__options-cut-to-size .x-product-layout-purchase__options-attribute-options .c-form-input {
margin-bottom: 0;
}
.x-product-layout-purchase__options-attribute-size-chart {
margin-bottom: var(--default-spacing-unit);
}
.x-product-layout-purchase__options-attribute-size-chart .c-button--as-link {
color: var(--gray-500);
font-size: 0.75rem;
font-weight: var(--font-medium);
text-decoration-thickness: unset;
text-underline-offset: unset;
}
.x-product-layout-purchase__options-attribute-size-chart .c-button--as-link:hover {
color: var(--primary);
text-decoration-color: var(--primary);
}
.x-product-layout-size-chart .c-dialog__container {
max-width: -moz-fit-content;
max-width: fit-content;
}
.x-product-layout-size-chart .c-dialog__title {
color: var(--gray-600);
}
.x-product-layout-size-chart .c-dialog__content {
margin-top: var(--default-spacing-unit);
}
.x-product-layout-size-chart .c-dialog__content p {
margin-bottom: 1.5rem;
}
.x-product-layout-size-chart .c-dialog__content p strong {
font-weight: var(--font-medium);
}
.x-product-layout-size-chart .c-table-simple__row {
border-bottom-color: var(--gray-300);
}
.x-product-layout-size-chart .c-table-simple__row:last-child {
border-bottom: none;
}
.x-product-layout-purchase__options-attribute .c-form-label,
.x-product-layout-purchase__options-quantity-label .c-form-label {
color: var(--gray-600);
font-size: 0.8125rem;
font-weight: var(--font-medium);
margin-bottom: 0.5rem;
}
.x-product-layout-purchase__options-quantity {
margin-bottom: 1.25rem;
}
.x-product-layout-purchase__options-quantity:not(.u-width-4--m) {
display: flex;
flex-flow: row nowrap;
gap: 0.75rem;
}
.x-product-layout-purchase__options-quantity-img {
align-self: center;
}
.x-product-layout-purchase__options-quantity .x-quantify {
height: 3rem;
}
.x-product-layout-purchase__options-ctas {
align-items: center;
display: flex;
flex-flow: row nowrap;
gap: var(--default-spacing-unit);
}
.x-product-layout-purchase__atc-btn {
flex: 1 0 auto;
}
.x-product-layout-purchase__out-of-stock-btn .c-button,
.x-product-layout-purchase__out-of-stock-btn .c-button:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
background-color: var(--gray-300);
cursor: not-allowed;
}
.x-product-layout-purchase__atwl-btn {
flex-basis: 3.875rem;
max-width: 3.875rem;
}
.x-product-layout-purchase__atwl-btn .c-button {
background-color: var(--white);
border: var(--default-border-width) solid var(--gray-300);
color: var(--gray-500);
font-size: 1.125rem;
height: 3rem;
width: 100%;
}
.x-product-layout-purchase__atwl-btn .c-button:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
background-color: var(--white);
color: var(--primary);
}
.x-product-layout-purchase__atwl-btn .c-button:active {
border-color: var(--primary);
color: var(--primary);
}
.x-product-layout-purchase__atwl-btn .c-button:focus-visible {
color: var(--primary);
}
.x-product-layout-purchase-sample {
margin-bottom: 0;
margin-top: 1.25rem;
}
.x-product-layout-purchase-additional-links {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
margin-top: 0.875rem;
max-width: 25rem;
row-gap: 0.75rem;
}
.x-product-layout-purchase-additional-links__section-link {
align-items: center;
color: var(--gray-500);
column-gap: 0.5rem;
display: flex;
flex-basis: 50%;
font-size: var(--message-one);
letter-spacing: 0.022em;
text-decoration: none;
text-transform: uppercase;
}
.x-product-layout-purchase-additional-links__section-link:hover {
color: var(--primary);
}
.x-product-layout-purchase-additional-links__section-link-icon {
flex: 0 1 1.1875rem;
text-align: center;
}
.x-product-layout-purchase-additional-links__section-link-text {
flex: 1;
line-height: 1;
}
.x-product-layout-purchase-share {
column-gap: 1.5rem;
display: flex;
justify-content: center;
margin-top: 2.25rem;
}
.x-product-layout-purchase-share__icon {
color: var(--gray-600);
font-size: 1.25rem;
text-decoration: none;
}
.x-product-layout-purchase-share__icon:is(:hover, :active, :focus) {
color: var(--primary);
}
.x-product-layout-purchase-share__icon.c-button {
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.x-product-description {
margin-bottom: 4.75rem;
}
@media screen and ( min-width: 48em ) {
.x-product-layout-purchase__options-cut-to-size .x-product-layout-purchase__options-attribute-img {
flex-basis: 2.875rem;
max-width: 2.875rem;
}
.x-product-layout-purchase__options-cut-to-size{
column-gap: var(--default-spacing-unit);
justify-content: flex-start;
}
.x-product-layout-purchase__options-cut-to-size .x-product-layout-purchase__options-attribute {
flex-basis: 10.9375rem;
max-width: 10.9375rem;
}
.x-product-layout-purchase__options-attribute-size-chart {
flex: 1;
margin-bottom: 0;
text-align: right;
}
.x-product-layout-purchase__options-quantity.u-width-4--m {
flex: 0 1 7.5rem;
margin-bottom: 0;
max-width: none;
}
.x-product-layout-purchase__options-ctas.u-width-8--m {
flex: 1 0 auto;
max-width: none;
}
}
@media screen and ( min-width: 60em ) {
.x-product-layout {
margin-bottom: 6.25rem;
}
.x-product-layout__image-wrap,
.x-product-layout__purchase-wrap {
flex-basis: 50%;
}
.x-product-layout__image-wrap {
max-width: 42rem;
}
.x-product-layout .x-product-layout__purchase-wrap {
max-width: 28.75rem;
}
.x-product-layout-images {
flex-direction: row-reverse;
gap: 2rem;
justify-content: space-between;
max-height: var(--prod-img-y);
min-height: 100%;
overflow: hidden;
place-content: flex-start flex-end;
}
.x-product-layout-images .x-filmstrip {
margin: 0;
}
.x-product-layout-images .x-filmstrip__list {
gap: 1.25rem;
}
.x-product-layout-images .x-filmstrip__list .x-filmstrip__list-item {
height: auto;
max-height: 3.75rem;
overflow: hidden;
width: 3.75rem;
}
.x-product-layout-purchase__name {
font-size: 1.75rem;
line-height: 2.375rem;
}
.x-product-layout-purchase-additional-links {
margin-top: 1.25rem;
}
.x-product-layout-purchase-share {
margin-top: 0.875rem;
}
}
@media screen and ( min-width: 75em ) {
.x-product-layout {
column-gap: 3.75rem;
}
.x-product-layout__purchase-wrap {
padding-left: 0;
}
}
/* ==========================================================================
EXTENSIONS / PRODUCT LISTS / PRODUCT LISTS
========================================================================== */
/**
* Product lists are used in many spots throughout the store. They can be found
* on the storefront as featured product, the related products section of a
* product page, as an auto-suggest feature during checkout, or wherever.
*/
.x-product-list,
.x-subcategory-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.x-product-list {
gap: 2.5rem 0.9375rem;
margin-bottom: 2.5rem;
margin-top: var(--default-spacing-unit);
}
.x-subcategory-list {
gap: 0.9375rem;
justify-content: center;
margin-bottom: 2rem;
}
.x-product-list-title h2 {
font-family: var(--primary-font-family);
}
.x-product-list__item,
.x-subcategory-list__item {
background-color: var(--gray-100);
display: flex;
position: relative;
}
.x-subcategory-list__item {
align-items: center;
justify-content: center;
}
.x-product-list__figure,
.x-product-list__figure-caption,
.x-subcategory-list__figure,
.x-subcategory-list__figure-caption {
display: flex;
flex-direction: column;
}
.x-product-list__figure,
.x-subcategory-list__figure {
margin-bottom: 0;
}
.x-product-list__figure {
flex-basis: 100%;
max-width: 100%;
}
.x-subcategory-list__figure {
padding: var(--default-spacing-unit);
}
.x-product-list__picture,
.x-subcategory-list__picture {
align-items: center;
aspect-ratio: 384 / 250;
display: flex;
justify-content: center;
overflow: hidden;
width: 100%;
}
.x-product-list__image {
flex-shrink: 0;
min-height: 100%;
min-width: 100%;
}
.x-product-list__figure-caption {
flex-grow: 1;
gap: var(--default-spacing-unit);
justify-content: space-between;
padding: 0.9375rem 0.625rem 0.625rem;
}
.x-subcategory-list__figure-caption {
font-weight: var(--font-medium);
text-align: center;
}
.x-product-list__image,
.x-product-list__link .x-product-list__name,
.x-subcategory-list__link .x-subcategory-list__name {
transition: all 0.2s ease-in-out;
}
.x-product-list__link,
.x-subcategory-list__link {
color: var(--black);
font-weight: var(--font-regular);
text-decoration: none;
}
.x-product-list__link:hover .x-product-list__name,
.x-subcategory-list__link:hover .x-subcategory-list__name {
color: var(--primary);
}
.x-product-list__item:has(.x-product-list__link:hover) .x-product-list__image,
.x-product-list__item:has(.x-subcategory-list__link:hover) .x-subcategory-list__image {
opacity: 0.8;
}
.x-product-list__link:before,
.x-subcategory-list__link:before {
bottom: 0;
content: "";
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: box-shadow 0.25s;
z-index: 1;
}
.x-product-list__name {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
}
.x-product-list__price {
font-size: 0.8125rem;
font-weight: var(--font-bold);
}
.x-product-list__product-flag {
background: var(--primary);
border-radius: 50%;
color: var(--white);
font-size: 0.6875rem;
height: 2.5rem;
left: 1rem;
line-height: 2.5rem;
position: absolute;
text-align: center;
top: 1rem;
width: 2.5rem;
z-index: 1;
}
.x-product-list--related,
.x-product-list--recently-viewed,
.x-product-list--also-bought {
display: block;
margin-right: -1rem;
}
.x-product-list--related .x-product-list__link,
.x-product-list--recently-viewed .x-product-list__link,
.x-product-list--also-bought .x-product-list__link {
color: var(--black);
font-weight: var(--font-regular);
}
.x-product-list--related .x-product-list__link:hover .x-product-list__name,
.x-product-list--recently-viewed .x-product-list__link:hover .x-product-list__name,
.x-product-list--also-bought .x-product-list__link:hover .x-product-list__name {
color: var(--primary);
}
.splide__arrow {
border: none;
border-radius: 50%;
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.14);
color: var(--gray-600);
font-size: 0.75rem;
height: 2.8125rem;
outline: var(--default-border-width) solid var(--white);
padding: 0;
transition: all 0.2s ease-in-out;
width: 2.8125rem;
}
/* Free samples */
.x-product-list__free-sample {
display: flex;
flex-flow: column;
gap: var(--default-spacing-unit);
position: relative;
z-index: 2;
}
.x-product-list__free-sample-name {
flex-grow: 1;
font-weight: var(--font-bold);
}
.x-product-list__free-sample-form {
flex-grow: 1;
flex-shrink: 0;
margin: 0;
}
@media screen and ( min-width: 48em ) {
.x-product-list__free-sample {
align-items: center;
flex-flow: row;
}
.x-product-list__free-sample-form {
flex-grow: 0;
}
.x-subcategory-list {
grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
}
}
@media screen and ( min-width: 60em ) {
.x-product-list-title h3 {
margin-bottom: 2rem;
}
.x-product-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.x-subcategory-list {
grid-template-columns: repeat(auto-fit, minmax(0, 12.5rem));
margin-bottom: 2rem;
}
.x-product-list__figure-caption {
padding-bottom: var(--default-spacing-unit);
padding-top: 1.25rem;
}
.x-product-list__price {
font-size: 1rem;
}
.x-product-list--related,
.x-product-list--recently-viewed,
.x-product-list--also-bought {
margin-bottom: 2.75rem;
}
.x-product-list--related .x-product-list__name,
.x-product-list--recently-viewed .x-product-list__name,
.x-product-list--also-bought .x-product-list__name {
font-size: 1.125rem;
}
.x-product-list--related .x-product-list__price,
.x-product-list--recently-viewed .x-product-list__price,
.x-product-list--also-bought .x-product-list__price {
font-size: 1rem;
}
}
@media screen and ( min-width: 75em ) {
.x-subcategory-list {
margin-bottom: 2rem;
}
.x-product-list--related,
.x-product-list--recently-viewed,
.x-product-list--also-bought {
margin-right: 0;
}
}
@media screen and ( min-width: 90em ) {
.x-product-list,
.x-subcategory-list {
column-gap: 2rem;
}
.x-product-list:not(.x-product-list--related, .x-product-list--recently-viewed, .x-product-list--also-bought) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ==========================================================================
EXTENSIONS / SUBSCRIPTIONS / SUBSCRIPTIONS
========================================================================== */
/**
* When using the subscription function of Miva, this is the default styling
* used for the date picker. You can update the styles in your theme file if
* you are looking to make changes.
*/
.miva_datepicker {
background-color: var(--white);
border: var(--default-border-width) solid var(--gray-400);
display: none;
padding: var(--default-spacing-unit);
position: absolute;
z-index: 1000;
}
.miva_datepicker_calendar_container {
display: inline-block;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
vertical-align: top;
width: 214px;
}
.miva_datepicker_calendar_month_selector {
align-items: center;
background-color: var(--gray-400);
display: flex;
position: relative;
}
.miva_datepicker_calendar_month_selector_next,
.miva_datepicker_calendar_month_selector_prev {
background: 0 -35px no-repeat;
border: 0 none;
cursor: pointer;
height: 35px;
padding: 0;
width: 35px;
}
.miva_datepicker_calendar_month_selector_next:hover,
.miva_datepicker_calendar_month_selector_prev:hover {
background-color: var(--gray-600);
}
.miva_datepicker_calendar_month_selector_title {
color: var(--white);
flex-grow: 1;
text-align: center;
}
.miva_datepicker_calendar_month_selector_title_month {
display: inline-block;
}
.miva_datepicker_calendar_month_selector_title_year {
display: inline-block;
margin-left: 0.25em;
}
.miva_datepicker_cancel {
display: inline-block;
margin-top: 0.75em;
}
.miva_datepicker_calendar_weekday_container {
height: 34px;
margin: 2px;
position: relative;
}
.miva_datepicker_calendar_weekday_title {
display: inline-block;
font-weight: 700;
padding: 3px 0;
position: absolute;
text-align: center;
width: 28px;
}
#miva_datepicker_calendar_week_container {
margin: 2px;
position: relative;
}
.miva_datepicker_calendar_week {
display: block;
height: 30px;
position: relative;
}
.miva_datepicker_calendar_day {
align-items: center;
border: var(--default-border-width) solid var(--gray-400);
bottom: 1px;
cursor: pointer;
display: inline-flex;
font-size: 0.75em;
justify-content: center;
position: absolute;
top: 1px;
width: 26px;
}
.miva_datepicker_calendar_day:hover {
background-color: var(--gray-400);
border-color: var(--gray-600);
color: var(--white);
}
.miva_datepicker_calendar_day_noselect,
.miva_datepicker_calendar_day_noselect:hover {
background-color: var(--gray-300);
border-color: var(--gray-600);
color: var(--gray-600);
}
.miva_datepicker_calendar_day_current {
border-color: var(--gray-600);
color: var(--gray-600);
font-weight: 700;
}
.miva_datepicker_calendar_day_current:hover {
background-color: var(--gray-600);
color: var(--white);
}
.miva_datepicker_calendar_day_active {
background-color: var(--gray-600);
border-color: var(--gray-400);
color: var(--white);
font-weight: 700;
}
.miva_datepicker_calendar_day_0 {
left: 1px;
}
.miva_datepicker_calendar_day_1 {
left: 31px;
}
.miva_datepicker_calendar_day_2 {
left: 61px;
}
.miva_datepicker_calendar_day_3 {
left: 91px;
}
.miva_datepicker_calendar_day_4 {
left: 121px;
}
.miva_datepicker_calendar_day_5 {
left: 151px;
}
.miva_datepicker_calendar_day_6 {
left: 181px;
}
/* ==========================================================================
EXTENSIONS / SEARCH-PREVIEW / SEARCH-PREVIEW
========================================================================== */
.x-search-preview {
background-color: var(--white);
border-radius: var(--default-border-radius);
color: var(--gray-600);
display: none;
flex-direction: column;
font-size: var(--default-input-font-size);
gap: var(--default-spacing-unit);
left: 0;
list-style: none;
margin: 0;
outline: var(--default-border-width) solid var(--gray-300);
padding: 0.75rem var(--default-spacing-unit);
padding: 0;
position: absolute;
right: auto;
top: 2.75rem;
width: 100%;
z-index: 500;
}
.x-search-preview--open {
display: flex;
}
.x-search-preview__item {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--default-spacing-unit);
padding: 0.5rem var(--default-spacing-unit);
}
/**
* This section contains the necessary styles when using the built-in search
* preview ability of Miva. Since the functional code is generated at run-time,
* these styles do not conform to the tenants used in the rest of the framework.
*/
.mm_searchfield_menuitem_selected {
background-color: var(--gray-100);
color: var(--primary);
}
.x-search-preview__image {
align-items: center;
display: flex;
height: var(--search-preview-image-y);
margin-bottom: 0;
overflow: hidden;
width: var(--search-preview-image-x);
}
.x-search-preview__search-all {
cursor: pointer;
font-weight: var(--font-medium);
padding: 0.5rem var(--default-spacing-unit);
}
@media screen and ( min-width: 60em ) {
.x-search-preview {
width: 150%;
}
}
/* ==========================================================================
EXTENSIONS / MINI-BASKET / MINI-BASKET
========================================================================== */
/**
* This is an extension to use the mini-basket functionality of Miva in an
* off-canvas method.
*/
.x-mini-basket {
background-color: rgba(34, 34, 34, 0.8);
bottom: 0;
display: flex;
justify-content: flex-end;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
transition: all ease-in-out 0.2s;
z-index: 500;
}
.x-mini-basket--open {
opacity: 1;
}
.x-mini-basket__empty-icon {
align-items: center;
border-radius: 50%;
display: inline-flex;
height: 4.5rem;
justify-content: center;
margin-top: 1.875rem;
width: 4.5rem;
}
.x-mini-basket__content {
display: flex;
flex: 1 1 100%;
flex-direction: column;
max-width: 25rem;
padding: var(--default-spacing-unit) 0;
width: 100vw;
}
.x-mini-basket__content :is(header, footer),
.x-mini-basket__list {
padding: 0 var(--default-spacing-unit);
}
.x-mini-basket__header,
.x-mini-basket__subtotal {
display: flex;
justify-content: space-between;
padding-bottom: 1.875rem;
}
.x-mini-basket__subtotal {
color: var(--gray-600);
font-weight: var(--font-medium);
padding-bottom: 1.75rem;
}
.x-mini-basket__header button {
background-color: var(--white);
border: 0 none;
cursor: pointer;
font-size: 0.625rem;
}
.x-mini-basket__header button:hover {
color: var(--primary);
}
.x-mini-basket__list {
flex-grow: 1;
margin-bottom: var(--default-spacing-unit);
overflow-y: auto;
}
.x-mini-basket__line {
border-top: var(--default-border-width) solid var(--gray-200);
display: flex;
flex-wrap: wrap;
font-size: var(--default-font-size);
gap: 1.25rem;
padding: 1.5rem 0;
}
.x-mini-basket__line:last-of-type {
padding: var(--default-spacing-unit) 0;
}
.x-mini-basket__image {
height: 2.5rem;
overflow: hidden;
text-align: center;
width: 2.5rem;
}
.x-mini-basket__item {
display: flex;
flex: 1 1 0;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
}
.x-mini-basket__item:hover {
text-decoration: none;
}
.x-mini-basket__item:hover .x-mini-basket__item-name {
color: var(--primary--hover);
}
.x-mini-basket__item-name,
.x-mini-basket__item-attributes {
display: block;
margin-bottom: var(--default-spacing-unit);
}
.x-mini-basket__item-name {
color: var(--gray-600);
font-weight: 500;
transition: color ease-in-out 0.2s;
}
.x-mini-basket__item-attributes {
font-size: var(--message-one);
line-height: 1.75;
}
.x-mini-basket__subscription {
flex-basis: 100%;
}
.x-mini-basket__item-attributes,
.x-mini-basket__item-total {
color: var(--black);
}
.x-mini-basket__item-total {
align-items: center;
display: flex;
justify-content: space-between;
}
.x-mini-basket__charges,
.x-mini-basket__total {
display: flex;
flex: 1 0 100%;
justify-content: space-between;
}
.x-mini-basket__charges {
flex-direction: column;
font-size: var(--default-font-size);
margin-bottom: 1em;
}
.x-mini-basket__charge-item {
display: flex;
justify-content: space-between;
}
.x-mini-basket__total {
font-size: var(--subheading-small);
font-weight: var(--font-medium);
}
.x-mini-basket__cta {
display: grid;
gap: 1rem 0;
}
/* ==========================================================================
EXTENSIONS / QUANTIFY / QUANTIFY
========================================================================== */
/**
* This extension allows for the use of buttons to increase/decrease item
* quantities on the product and basket pages. When used on the basket page,
* the decrease button becomes a remove button if the quantity is 1.
*/
.x-quantify {
border: var(--default-border-width) solid var(--gray-300);
border-radius: var(--default-border-radius);
display: grid;
grid-template-columns: 2.5rem 1fr 2.5rem;
grid-template-rows: 1fr;
height: 2.5rem;
width: 7.5rem;
}
.x-quantify :is(.c-button, .c-form-input) {
align-self: stretch;
border: 0 none;
line-height: normal;
margin-bottom: 0;
outline-offset: calc(-1 * var(--default-border-width) * 2);
padding: 0;
}
.x-quantify button {
color: var(--gray-600);
font-size: 0.625rem;
-webkit-user-select: none;
user-select: none;
}
.x-quantify button[ aria-disabled="true" ] {
background-color: var(--white);
color: var(--gray-400);
}
.x-quantify button > * {
pointer-events: none;
}
/* =====
EXTENSIONS / TABS / A11Y-TABS
===== */
/**
* This is an accessible tab solution extension based on guidelines documented
* by Heydon Pickering on the Inclusive Components Pattern Library.
* https://inclusive-components.design/tabbed-interfaces/
*/
[ data-tab-component ] *:focus:not(:focus-visible) {
box-shadow: inset 0 0 0 4px var(--transparent);
outline: none;
text-decoration: none;
}
[ data-tab-component ] *:focus-visible {
box-shadow: inset 0 0 0 4px var(--focus);
outline: none;
text-decoration: none;
}
[ data-tab-component ] [ role="tablist" ] {
display: flex;
gap: 1.75rem;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
[ data-tab-component ] [ role="presentation" ],
[ data-tab-component ] [ role="tab" ] {
display: inline-block;
}
[ data-tab-component ] [ role="tab" ] {
border-bottom: calc(var(--default-border-width) * 2) solid var(--transparent);
font-size: var(--paragraph-large);
font-weight: var(--font-medium);
padding: 0.5rem;
text-decoration: none;
}
[ data-tab-component ] [ role="tab" ][ aria-selected ] {
border-color: currentColor;
}
[ data-tab-component ] [ role="tabpanel" ] {
font-size: var(--paragraph-large);
margin: auto;
max-width: 50rem;
padding-top: 2rem;
}
[ data-tab-component ] [ role="tabpanel" ] * + * {
margin-top: 0.75rem;
}
@media ( max-width: 40em ) {
[ data-tab-component ] [ role="tablist" ],
[ data-tab-component ] [ role="presentation" ] {
display: block;
}
[ data-tab-component ] [ role="tab" ] {
border-bottom: var(--default-border-width) solid var(--gray-300);
color: var(--black);
display: flex;
justify-content: space-between;
}
[ data-tab-component ] [ role="tab" ][ aria-selected ] {
border-color: var(--gray-300);
}
[ data-tab-component ] [ role="tablist" ] li + li a {
border-top: 0 !important;
}
[ data-tab-component ] [ role="tab" ]:after {
content: "+";
font-size: 1.25em;
line-height: 1;
}
[ data-tab-component ] [ role="tab" ][ aria-selected ]:after {
content: "-";
}
[ data-tab-component ] [ role="tabpanel" ] {
border-bottom: var(--default-border-width) solid var(--transparent);
padding: var(--default-spacing-unit) 0.5rem;
}
[ data-tab-component ] [ role="tabpanel" ]:not([ hidden ]) {
border-color: var(--gray-300);
}
}
/* ==========================================================================
EXTENSIONS / NAVIGATION / TRANSFIGURE NAVIGATION
========================================================================== */
.x-transfigure-navigation .c-navigation__link {
color: var(--gray-600);
font-weight: var(--font-medium);
letter-spacing: 0.04em;
text-decoration: none;
}
@media screen and ( max-width: 74.999em ) {
@supports (will-change: auto) {
.x-transfigure-navigation .c-navigation__list:focus-within > .c-navigation__row {
box-shadow: none;
display: block;
}
}
.has-open-main-menu,
.has-open-main-menu body,
.has-open-filters,
.has-open-filters body {
overflow: hidden;
}
.x-transfigure-navigation {
backface-visibility: hidden;
background-color: var(--transparent);
bottom: 0;
left: -100vw;
opacity: 0;
overflow: hidden;
padding: 0;
position: fixed;
right: 0;
top: 0;
transform: scaleX(0);
transform-origin: left;
transition: all ease-out 0.2s;
z-index: -1;
}
.x-transfigure-navigation.is-open {
background: rgba(17, 17, 17, 0.65);
left: 0;
opacity: 1;
transform: scaleX(1);
transition: all ease-in-out 0.2s;
z-index: 2;
}
.x-transfigure-navigation__wrap {
background-color: var(--white);
max-width: 19.6875rem;
min-height: 100%;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: auto;
}
.x-transfigure-navigation__header {
align-items: center;
padding: 0.25rem 0 0.5rem 1.5rem;
}
.x-transfigure-navigation__header-account {
color: var(--black);
font-weight: var(--font-medium);
text-decoration: none;
transition: all ease-in-out 0.2s;
}
.x-transfigure-navigation__header-account:focus {
text-decoration: none;
}
.x-transfigure-navigation__header-account .u-icon-user {
position: relative;
top: 1px;
}
.x-transfigure-navigation__header-close {
align-self: auto;
background-color: var(--transparent);
border: none;
cursor: pointer;
font-size: 0.625rem;
padding: var(--default-spacing-unit);
text-decoration: none;
}
.x-transfigure-navigation__header-account:hover,
.x-transfigure-navigation__header-close:hover {
color: var(--primary);
}
.x-transfigure-navigation__content {
font-size: 0.8125rem;
position: relative;
}
.x-transfigure-navigation__row,
.x-transfigure-navigation__row .c-navigation__row,
.x-transfigure-navigation__row .c-navigation__row:nth-child(2) .c-navigation__row:last-of-type {
background-color: var(--white);
display: block;
left: 0;
list-style: none;
min-height: 100%;
position: absolute;
top: 0;
transition: transform 0.3s;
width: 100%;
z-index: 1;
}
.x-transfigure-navigation .c-navigation__list {
position: static;
}
.x-transfigure-navigation .c-navigation__list:hover > .c-navigation__row,
.x-transfigure-navigation .c-navigation__list.focus-within > .c-navigation__row {
box-shadow: none;
display: block;
}
.x-transfigure-navigation .c-navigation__link {
align-items: center;
backface-visibility: hidden;
display: flex;
font-weight: var(--font-medium);
height: 2.625rem;
justify-content: space-between;
overflow: hidden;
padding: 0 0 0 1.5rem;
text-overflow: ellipsis;
transform: translateZ(0);
transition: all ease-in-out 0.2s;
white-space: nowrap;
}
.x-transfigure-navigation .c-navigation__link:not(.c-navigation__link-back) {
text-transform: uppercase;
}
.x-transfigure-navigation .c-navigation__link-back,
.x-transfigure-navigation .c-navigation__link-title {
color: var(--black);
}
.x-transfigure-navigation .c-navigation__link-back {
cursor: pointer;
}
.x-transfigure-navigation .c-navigation__link-title {
font-size: 1rem;
margin-top: 0.5rem;
}
.x-transfigure-navigation .c-navigation__link-back .u-icon-arrow-left {
font-size: 1rem;
font-weight: var(--font-semibold);
}
.x-transfigure-navigation .c-navigation__link:hover,
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__link:hover {
background-color: var(--transparent);
box-shadow: none;
color: var(--primary);
}
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__link,
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 1.5rem;
}
.x-transfigure-navigation__row .c-navigation__list:last-of-type > .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row .c-navigation__list:last-of-type > .c-navigation__link {
border-bottom-width: var(--default-border-width);
}
.x-transfigure-navigation__row.is-hidden,
.x-transfigure-navigation__row .c-navigation__row.is-hidden {
transform: translateX(100%);
}
.x-transfigure-navigation__row.is-hidden > .cmp-primary-navigation__title,
.x-transfigure-navigation__row.show-next > .cmp-primary-navigation__title,
.x-transfigure-navigation__row.is-hidden > .c-navigation__list > .c-navigation__link,
.x-transfigure-navigation__row.show-next > .c-navigation__list > .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row.is-hidden > .c-navigation__list > .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row.show-next > .c-navigation__list > .c-navigation__link {
opacity: 0;
}
.x-transfigure-navigation__row.show-next > .c-navigation__list > .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row.show-next > .c-navigation__list > .c-navigation__link {
transform: translateX(-100%);
}
.x-transfigure-navigation .c-navigation__link-carat {
display: none;
}
.x-transfigure-navigation .has-child-menu .c-navigation__link-carat {
align-self: stretch;
display: inline-flex;
}
.x-transfigure-navigation .c-navigation__link-carat > * {
align-items: center;
display: flex;
font-size: 0.5rem;
justify-content: center;
width: 3.5rem;
}
.x-transfigure-navigation__footer {
font-size: var(--default-input-font-size);
font-weight: var(--font-regular);
margin: 1.875rem 0 var(--default-spacing-unit);
padding: 0 1.5rem;
width: 100%;
}
.x-transfigure-navigation__footer-link {
align-items: center;
color: var(--gray-600);
display: flex;
font-weight: var(--font-regular);
height: 2.5rem;
text-decoration: none;
transition: all ease-in-out 0.2s;
}
.x-transfigure-navigation__footer-link:hover {
color: var(--primary);
}
.x-transfigure-navigation__footer-link:first-child {
position: relative;
}
.x-transfigure-navigation__footer-link:first-child:before {
background-color: var(--gray-300);
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
top: -0.625rem;
width: 100%;
}
.x-transfigure-navigation .c-navigation__list-outline-callout .c-navigation__custom-text {
display: none;
}
}
@media screen and ( min-width: 75em ) {
.t-site-header {
position: relative;
}
.x-transfigure-navigation {
position: static;
}
.x-transfigure-navigation__content {
font-size: var(--message-one);
}
.x-transfigure-navigation .c-navigation__list {
flex: 0 1 auto;
position: static;
}
.x-transfigure-navigation .c-navigation__child-row-level-1 {
align-content: center;
background-color: var(--white);
border-bottom: 1px solid var(--gray-200);
border-top: 1px solid var(--gray-200);
display: none;
font-size: var(--default-font-size);
left: 0;
max-height: var(--mega-menu-max-height);
padding-bottom: 2.5rem;
padding-left: calc(((100vw - var(--breakpoint-wide)) / 2) - 0.5rem);
padding-right: calc(((100vw - var(--breakpoint-wide)) / 2) - 0.5rem);
padding-top: 2.25rem;
position: absolute;
top: 100%;
white-space: nowrap;
width: 100%;
z-index: 100;
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__child-row-level-1 {
column-gap: 2rem;
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__child-row-level-1 > .c-navigation__list {
max-width: 13.75rem;
width: calc(100% / 5);
}
.x-transfigure-navigation .c-navigation__list:not(:first-of-type) .c-navigation__child-row-level-1 > .c-navigation__list {
text-align: center;
}
.x-transfigure-navigation .c-navigation__child-row-level-2 {
border-top: none;
display: flex;
flex-flow: column nowrap;
height: auto;
padding: 0;
position: static;
width: auto;
}
.x-transfigure-navigation .c-navigation__link {
text-transform: uppercase;
}
.x-transfigure-navigation .c-navigation__link:hover {
box-shadow: none;
}
.x-transfigure-navigation .c-navigation__parent-link {
padding: 0 var(--default-spacing-unit);
}
.x-transfigure-navigation .c-navigation__parent-link .c-navigation__link-text {
display: block;
padding: 2rem 0;
position: relative;
}
.x-transfigure-navigation .c-navigation__parent-link .c-navigation__link-text:after {
background-color: var(--primary);
bottom: 0;
content: "";
height: 0.25rem;
left: 0;
position: absolute;
transform: scaleX(0);
transform-origin: bottom left;
transition: transform 0.25s ease-in-out;
width: 100%;
}
.x-transfigure-navigation .c-navigation__parent-link:is(:focus, :focus-within, :hover) .c-navigation__link-text:after,
.x-transfigure-navigation .c-navigation__list.has-child-menu:has(.c-navigation__row:hover) .c-navigation__parent-link .c-navigation__link-text:after {
transform: scaleX(1);
}
.x-transfigure-navigation .c-navigation__list.has-child-menu:has(.c-navigation__row:hover) .c-navigation__parent-link {
color: var(--primary);
}
.x-transfigure-navigation .c-navigation__list.has-child-menu:hover .c-navigation__child-row-level-1,
.x-transfigure-navigation .c-navigation__list.has-child-menu:focus-within .c-navigation__child-row-level-1,
.x-transfigure-navigation .c-navigation__list.has-child-menu:hover .c-navigation__child-row-level-2,
.x-transfigure-navigation .c-navigation__list.has-child-menu:focus-within .c-navigation__child-row-level-2 {
display: flex;
}
.x-transfigure-navigation .c-navigation__list.has-child-menu:hover .c-navigation__child-row-level-1,
.x-transfigure-navigation .c-navigation__list.has-child-menu:focus-within .c-navigation__child-row-level-1 {
flex-flow: column wrap;
}
.x-transfigure-navigation .c-navigation__list.has-child-menu:not(:first-of-type):hover .c-navigation__child-row-level-1,
.x-transfigure-navigation .c-navigation__list.has-child-menu:not(:first-of-type):focus-within .c-navigation__child-row-level-1 {
flex-flow: row nowrap;
justify-content: center;
}
.x-transfigure-navigation .c-navigation__list.has-child-menu:hover .c-navigation__child-row-level-2,
.x-transfigure-navigation .c-navigation__list.has-child-menu:focus-within .c-navigation__child-row-level-2 {
box-shadow: none;
}
.x-transfigure-navigation .c-navigation__child-row .c-navigation__child-link {
background-color: var(--transparent);
padding: 0;
transition: all ease-in-out 0.3s;
}
.x-transfigure-navigation .c-navigation__list:not(:first-of-type) .c-navigation__child-row-level-1 .c-navigation__child-link {
border-left: var(--default-border-width) solid var(--transparent);
border-right: var(--default-border-width) solid var(--transparent);
color: var(--gray-500);
height: 5.625rem;
line-height: 5.625rem;
padding: 0 3.75rem;
width: 100%;
}
.x-transfigure-navigation__row .c-navigation__row:nth-child(2) .c-navigation__row .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 0;
}
.x-transfigure-navigation .c-navigation__link-carat {
display: none;
}
.x-transfigure-navigation .c-navigation__row .c-navigation__link:hover {
background-color: var(--transparent);
color: var(--primary);
}
.x-transfigure-navigation .c-navigation__list:not(:first-of-type) .c-navigation__child-row-level-1 .c-navigation__child-link:hover {
background: var(--gray-100);
border-color: var(--gray-300);
color: var(--black);
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__list-primary-cta .c-navigation__link,
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__list-secondary-cta .c-navigation__link {
color: var(--white);
height: 3.75rem;
line-height: 3.75rem;
margin-bottom: 0;
text-align: center;
}
.x-transfigure-navigation .c-navigation__list-primary-cta .c-navigation__link {
background: var(--primary);
}
.x-transfigure-navigation .c-navigation__list-primary-cta .c-navigation__link:hover {
background: var(--primary--hover);
}
.x-transfigure-navigation .c-navigation__list-secondary-cta .c-navigation__link {
background: var(--black);
}
.x-transfigure-navigation .c-navigation__list-secondary-cta .c-navigation__link:hover {
background: var(--primary);
}
.x-transfigure-navigation .c-navigation__list-primary-cta .c-navigation__link:hover, .x-transfigure-navigation .c-navigation__list-secondary-cta .c-navigation__link:hover {
color: var(--white);
}
.x-transfigure-navigation .c-navigation__list-callout .c-navigation__child-link-level-1 {
color: var(--black);
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__list-callout .c-navigation__child-link-level-1:hover {
color: var(--primary);
}
.x-transfigure-navigation .c-navigation__list-primary-cta,
.x-transfigure-navigation .c-navigation__list-callout,
.x-transfigure-navigation .c-navigation__list-outline-callout {
margin-bottom: var(--default-spacing-unit);
}
.x-transfigure-navigation .c-navigation__list-callout,
.x-transfigure-navigation .c-navigation__list-outline-callout {
padding: 1.5rem;
}
.x-transfigure-navigation .c-navigation__list-callout {
background: var(--gray-100);
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__child-row-level-1 > .c-navigation__list:not(.c-navigation__list-primary-cta):not(.c-navigation__list-callout):not(.c-navigation__list-secondary-cta):not(.c-navigation__list-outline-callout) {
margin-bottom: 1.75rem;
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__child-row-level-1 > .c-navigation__list-specialized-functions:not(.c-navigation__list-primary-cta):not(.c-navigation__list-callout):not(.c-navigation__list-secondary-cta):not(.c-navigation__list-outline-callout) {
margin-bottom: 5.625rem;
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__child-link-level-1 {
color: var(--primary);
}
.x-transfigure-navigation .c-navigation__list:is(:first-of-type) .c-navigation__child-row-level-1 > .c-navigation__list:not(.c-navigation__list-primary-cta):not(.c-navigation__list-callout):not(.c-navigation__list-secondary-cta):not(.c-navigation__list-outline-callout) .c-navigation__child-link-level-1:hover {
color: var(--primary--hover);
}
.x-transfigure-navigation .c-navigation__child-link-level-2 {
font-weight: var(--font-regular);
letter-spacing: 0;
text-transform: none;
}
.x-transfigure-navigation .c-navigation__child-link-level-1 + .c-navigation__child-row {
margin-top: 0.625rem;
}
.x-transfigure-navigation .c-navigation__child-row-level-2 .c-navigation__list:not(.u-hidden--xl):not(:last-child) .c-navigation__child-link-level-2 {
margin-bottom: 0.375rem;
}
.x-transfigure-navigation .c-navigation__list-outline-callout {
background: var(--white);
}
.x-transfigure-navigation .c-navigation__list-outline-callout-primary {
border: var(--default-border-width) solid var(--primary);
}
.x-transfigure-navigation .c-navigation__list-outline-callout-darkgreen {
background-color: #266338;
border: var(--default-border-width) solid #266338;
}
.x-transfigure-navigation .c-navigation__list-outline-callout-green {
border: var(--default-border-width) solid #AFDFA4;
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__list-outline-callout .c-navigation__child-link-level-1 {
margin-bottom: 0.625rem;
text-transform: none;
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__list-outline-callout-primary .c-navigation__child-link-level-1 {
color: var(--primary);
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__list-outline-callout-darkgreen .c-navigation__child-link-level-1 {
color: var(--white);
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__list-outline-callout-green .c-navigation__child-link-level-1 {
color: #5EBF48;
}
.x-transfigure-navigation .c-navigation__list-outline-callout .c-navigation__custom-text {
color: var(--gray-600);
font-weight: 400;
white-space: normal;
}
.x-transfigure-navigation .c-navigation__list-outline-callout-darkgreen .c-navigation__custom-text {
color: var(--white);
}
}
@media screen and ( min-width: 90em ) {
.x-transfigure-navigation__content {
font-size: 0.8125rem;
}
.x-transfigure-navigation__row {
gap: 0.25rem;
}
.x-transfigure-navigation .c-navigation__list:first-of-type .c-navigation__child-row-level-1 {
column-gap: 3.75rem;
}
}
/* ==========================================================================
EXTENSIONS / FACETS / FACETS
========================================================================== */
.x-facets__parent {
border-bottom: var(--default-border-width) solid var(--gray-200);
padding: 1.125rem 0;
}
.x-facet-set:not([ aria-hidden="true" ]) {
margin-top: 0.75rem;
}
.x-facets__parent > .x-facet-set__label.x-collapsible-content__toggle,
.x-facet-set > .x-facet-set__label.x-collapsible-content__toggle {
cursor: pointer;
font-family: var(--primary-font-family);
font-weight: var(--font-medium);
transition: all ease-in-out 0.2s;
}
.x-facets__parent > .x-facet-set__label.x-collapsible-content__toggle[ aria-expanded="false" ]:hover,
.x-facet-set > .x-facet-set__label.x-collapsible-content__toggle[ aria-expanded="false" ]:hover {
color: var(--primary);
}
.x-facets__parent > .x-facet-set__label.x-collapsible-content__toggle {
color: var(--black);
font-size: 1rem;
}
.x-facet-set > .x-facet-set__label.x-collapsible-content__toggle {
color: var(--gray-600);
font-size: 0.8125rem;
letter-spacing: 0.04em;
padding: var(--default-spacing-unit) 0.75rem;
text-transform: uppercase;
}
.x-facet-set > .x-facet-set__label.x-collapsible-content__toggle:not(:first-of-type) {
border-top: var(--default-border-width) solid var(--gray-200);
}
.x-facet-set > .x-facet-set__label.x-collapsible-content__toggle:is([ aria-expanded="true" ]) {
background: var(--gray-100);
border-color: var(--gray-100);
}
.x-facets__parent > .x-facet-set__label span[ class^="u-icon-" ],
.x-facet-set > .x-facet-set__label span[ class^="u-icon-" ] {
font-size: 0.625rem;
}
.x-facets__parent > .x-facet-set__label span[ class^="u-icon-" ] {
color: var(--gray-600);
}
.x-facet-set > .x-facet-set__label span[ class^="u-icon-" ] {
color: var(--gray-500);
}
.x-facet-set > .x-facet-set__list {
padding: 0 1.125rem;
}
.x-facet-set > .x-facet-set__list:is([ aria-hidden="false" ]) {
margin-bottom: 0.625rem;
margin-top: 0.625rem;
}
.x-facet-set > .x-facet-set__list .c-form-checkbox__caption:before {
border-radius: 0.125rem;
}
.x-facet-set > .x-facet-set__list .c-form-checkbox__caption {
font-size: 0.75rem;
line-height: 1.5;
}
.x-facet-set > .x-facet-set__list .c-form-checkbox {
font-size: var(--paragraph-small);
line-height: 2;
margin: 0.5rem 0;
}
.x-facet-set > .x-facet-set__grid {
display: flex;
flex-flow: row wrap;
row-gap: 1.5rem;
}
.x-facet-set > .x-facet-set__grid:is([ aria-hidden="false" ]) {
margin-bottom: 2rem;
margin-top: 1.5rem;
}
.x-facet-set > .x-facet-set__grid .c-form-checkbox {
align-items: center;
display: flex;
flex-basis: calc(100% / 3);
flex-direction: column;
margin: 0;
}
.x-facet-set > .x-facet-set__grid .c-form-checkbox__swatch {
border-radius: 0.0625rem;
margin-bottom: 0.375rem;
width: 3.4375rem;
}
.x-facet-set > .x-facet-set__grid .c-form-checkbox__swatch-img {
width: 100%;
}
.x-facet-set > .x-facet-set__grid .c-form-checkbox__caption:before {
display: none;
}
.x-facet-set > .x-facet-set__grid .c-form-checkbox__caption {
display: block;
margin-left: 0;
text-align: center;
}
.x-facet-set > .x-facet-set__grid .c-form-checkbox__input:is(:checked) ~ .c-form-checkbox__swatch {
outline: 0.125rem solid var(--primary);
outline-offset: 0.125rem;
}
.x-facet-set > .x-facet-set__grid .c-form-checkbox__input:is(:checked) ~ .c-form-checkbox__caption {
font-weight: var(--font-medium);
}
.x-applied-facets {
margin-top: 0.5rem;
}
.x-applied-facets__list {
display: flex;
flex-flow: row wrap;
gap: 0.5rem;
list-style: none;
margin: 0;
}
.x-facets__applied-label {
align-items: center;
background: var(--gray-100);
border: var(--default-border-width) solid var(--gray-200);
border-radius: 1rem;
color: var(--gray-600);
cursor: pointer;
display: inline-flex;
font-family: var(--primary-font-family);
font-size: 0.75rem;
font-weight: var(--font-regular);
gap: 0.5rem;
line-height: 1;
padding: 0.5rem 0.75rem;
}
.x-applied-facets__label-icon {
color: var(--gray-500);
font-size: 0.375rem;
}
@media screen and ( min-width: 60em ) {
.x-category-tree__title {
margin-bottom: 0.25rem;
}
.x-applied-facets {
margin-top: var(--default-spacing-unit);
}
}
/* ==========================================================================
EXTENSIONS / FASTEN HEADER / FASTEN HEADER
========================================================================== */
.x-fasten-header {
display: none;
}
@media screen and ( min-width: 75em ) {
.x-fasten-header {
background-color: var(--white);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
color: var(--gray-600);
display: flex;
font-size: var(--default-font-size);
justify-content: space-between;
left: 0;
margin-left: 0;
max-width: none;
opacity: 0;
padding: 0.5rem var(--default-spacing-unit);
position: fixed;
right: 0;
top: 0;
transform: translateY(-100%);
transform-origin: top;
transition: all ease-in-out 0.15s;
z-index: 300;
}
.x-fasten-header--is-active .x-fasten-header {
opacity: 1;
transform: translateY(0);
}
.x-fasten-header .t-site-header__logo {
padding-left: 0;
}
.x-fasten-header__navigation {
position: relative;
}
.x-fasten-header__navigation:before {
content: " ";
display: block;
height: var(--default-input-font-size);
width: 100%;
}
.x-fasten-header__navigation-element {
cursor: pointer;
font-size: var(--default-input-font-size);
font-weight: var(--font-medium);
position: absolute;
top: -1rem;
}
.x-fasten-header__navigation-element summary {
border-radius: var(--default-border-radius);
cursor: pointer;
line-height: 1;
margin-bottom: 0;
padding: var(--default-spacing-unit) 3.5rem var(--default-spacing-unit) 1.5rem;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
}
.x-fasten-header__navigation-element summary::marker {
content: "V";
font-family: "ReadyTheme Icons", sans-serif;
font-size: var(--default-spacing-unit);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.x-fasten-header__navigation-element summary span {
padding-left: var(--default-spacing-unit);
position: relative;
top: calc(-1 * (var(--default-spacing-unit) - var(--default-input-font-size)) / 2);
}
.x-fasten-header__navigation-element[ open ] summary {
background-color: var(--primary);
color: var(--white);
margin-bottom: calc(0.25rem + var(--default-border-width));
}
.x-fasten-header__navigation-list {
background-color: var(--white);
border: var(--default-border-width) solid var(--gray-200);
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.08);
list-style: none;
margin: 0;
padding: 0.5rem 1.5rem;
}
.x-fasten-header__navigation-item {
padding: 0.5rem 0;
}
.x-fasten-header__navigation-link {
display: block;
padding: 0.5rem 0;
text-decoration: none;
}
.x-fasten-header__navigation-link:hover {
color: var(--primary--hover);
}
.x-fasten-header .t-site-header__search-button:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
background-color: var(--primary);
border-color: var(--primary);
color: var(--white);
}
}
@media screen and ( min-width: 90em ) {
.x-fasten-header {
justify-content: center;
}
}
/* ==========================================================================
EXTENSIONS / SHOW PASSWORD / SHOW PASSWORD
========================================================================== */
/**
* This extension allows a user to reveal the password they have typed.
*/
input[ type="password" ]:invalid + .x-toggle-password {
color: var(--gray-400);
}
.x-toggle-password {
border: 0 none;
border-radius: 0;
color: var(--gray-600);
font-size: 1.5em;
margin-top: -0.125em;
padding: 0.25em;
position: absolute;
right: 0.5em;
top: calc(50% - 1px);
}
.x-toggle-password--no-label {
margin-top: -0.25em;
top: 25%;
}
.x-collapsible-content__toggle {
align-items: center;
background-color: transparent;
border: 0 none;
color: inherit;
display: flex;
font-weight: 700;
justify-content: space-between;
line-height: normal;
padding: 0;
width: 100%;
}
.x-collapsible-content__toggle[ aria-expanded="true" ] [ class^="u-icon-" ]:before {
content: attr(data-toggle);
}
.x-collapsible-content__item[ aria-hidden="false" ] {
max-height: -moz-fit-content;
max-height: fit-content;
opacity: 1;
overflow: visible;
transition: visibility 0s ease-in-out, max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
visibility: visible;
}
.x-collapsible-content__item {
max-height: 0;
opacity: 0;
overflow: hidden;
visibility: hidden;
}
/* ==========================================================================
EXTENSIONS / CONTACT / CONTACT
========================================================================== */
.x-contact-form .is-required span {
color: var(--red-400);
}
/**
Thumbnail Filmstrip
*/
[ data-filmstrip-wrapper ] {
position: relative;
}
[ data-filmstrip ] {
overflow: hidden;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-webkit-user-select: none;
user-select: none;
}
[ data-vertical ] [ data-filmstrip ] {
height: 100%;
scroll-snap-type: y mandatory;
}
[ data-filmstrip ]::-webkit-scrollbar {
display: none;
}
[ data-filmstrip ] ul {
align-items: center;
display: flex;
flex-flow: row nowrap;
gap: var(--default-spacing-unit);
margin: 0;
width: max-content;
}
[ data-filmstrip ] ul.has-controls {
padding: 0 calc(var(--default-spacing-unit) / 2);
}
[ data-vertical ] [ data-filmstrip ] ul {
flex-direction: column;
height: max-content;
}
[ data-vertical ] [ data-filmstrip ] ul.has-controls {
padding: calc(var(--default-spacing-unit) / 2) 0;
}
[ data-filmstrip ] li {
height: var(--prod-thumb-y);
list-style: none;
scroll-snap-align: none;
scroll-snap-stop: always;
width: var(--prod-thumb-x);
}
[ data-filmstrip ] picture {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
width: 100%;
}
[ data-filmstrip ] img {
height: auto;
max-width: 100%;
width: 100%;
}
[ data-filmstrip-controls ] {
align-items: center;
display: flex;
height: 100%;
justify-content: space-between;
left: 0;
list-style: none;
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
[ data-filmstrip-controls ] button {
border: none;
border-radius: 50%;
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.14);
color: var(--gray-600);
font-size: 0.75rem;
height: 2.8125rem;
outline: var(--default-border-width) solid var(--white);
padding: 0;
transition: all 0.2s ease-in-out;
width: 2.8125rem;
}
[ data-filmstrip-controls ] .c-button--secondary:hover:not(:disabled):not([ aria-disabled="true" ]):not(.c-button--as-link) {
color: var(--gray-600);
outline-color: var(--gray-600);
}
[ data-filmstrip-controls ] button:active {
color: var(--primary);
outline-color: var(--primary);
}
[ data-filmstrip-controls ] button span {
pointer-events: none;
}
[ data-vertical ] [ data-filmstrip-controls ] {
flex-direction: column;
}
[ data-vertical ] [ data-filmstrip-controls ] button span {
transform: rotate(90deg);
}
/**
Modal Photo Viewer
*/
.is-inert {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.has-photo-viewer {
overflow: hidden;
}
.x-photo-viewer {
background-color: rgba(0, 0, 0, 0.9);
border: 0;
clip: rect(0 0 0 0);
display: flex;
flex-direction: column;
height: auto;
left: 0;
margin: 0;
opacity: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
transform: scale(0);
transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
white-space: nowrap;
width: 1px;
z-index: 9999;
}
.x-photo-viewer__visible {
clip: auto;
height: 100%;
opacity: 1;
position: fixed;
transform: scale(1);
width: 100%;
}
.x-photo-viewer__header,
.x-photo-viewer__controls {
align-items: center;
background-color: var(--black);
color: var(--gray-100);
display: flex;
width: 100%;
}
.x-photo-viewer__title {
flex: 1;
font-size: var(--title-four);
margin: 0;
padding-left: 2em;
text-align: center;
white-space: normal;
}
.x-photo-viewer__close {
height: 2.25em;
margin: 0.5em;
width: 2.25em;
}
.x-photo-viewer__close button {
height: 100%;
padding: 0;
width: 100%;
}
.x-photo-viewer__container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
padding: 0 var(--default-spacing-unit);
touch-action: manipulation;
white-space: nowrap;
width: 100%;
}
.x-photo-viewer__current-image {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
opacity: 0;
transition: opacity ease-in-out 0.3s 0.3s;
width: 100%;
}
.x-photo-viewer__current-image.is-loaded {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.x-photo-viewer__current-image img {
max-height: 80vh;
}
.x-photo-viewer__controls {
justify-content: space-between;
padding: 1em 2em;
}
.x-photo-viewer__count {
font-weight: var(--font-medium);
text-align: center;
}
/* ==========================================================================
EXTENSIONS / PAYMENT / PAYMENT CARD
========================================================================== */
/**
* This is the default card layout for the saved payment methods page.
*/
.x-payment-card {
align-items: baseline;
display: grid;
font-size: var(--default-input-font-size);
gap: var(--default-spacing-unit);
grid-template-columns: repeat(2, 1fr);
padding: var(--default-spacing-unit);
}
.x-payment-card__image {
display: none;
}
@media ( min-width: 48em ) {
.x-payment-card {
align-items: center;
grid-template-columns: 38px repeat(4, 1fr);
}
.x-payment-card__image {
display: block;
grid-area: 1/1/2/2;
}
.x-payment-card__number {
grid-area: 1/2/2/3;
}
.x-payment-card__cardholder {
grid-area: 1/3/2/4;
}
.x-payment-card__expiry {
grid-area: 1/4/2/5;
}
.x-payment-card__actions {
grid-area: 1/5/2/6;
place-self: center end;
}
}
.x-payment-card__actions > * {
align-items: baseline;
gap: 2rem;
}
/* Custom Pagination for Product lists */
.t-pagination {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 1rem auto;
}
.t-pagination__button,
.t-pagination__link {
background-color: transparent;
border-radius: 100%;
color: var(--gray-600);
display: inline-block;
font-weight: var(--font-regular);
height: 2.1875rem;
line-height: 2.1875rem;
min-width: 2.1875rem;
text-align: center;
text-decoration: none;
}
.t-pagination__button {
font-size: 0.5rem;
}
.t-pagination__button[ disabled ] {
border: none;
}
.t-pagination__button-icon {
color: #222;
}
.t-pagination__button[ disabled ]
.t-pagination__button-icon {
color: var(--gray-300);
}
.t-pagination__link--active {
color: var(--primary);
font-weight: var(--font-medium);
}
@media ( min-width: 60em ) {
.t-pagination {
margin-bottom: 3rem;
margin-top: 2rem;
}
}