/*
* potensic/assets/css/components.css
* Shared UI components, ported 1:1 from the Shopify Enterprise 1.6.1 `main.css`.
* Spec: docs/spec/01-design-tokens.md §5 (components) and §6 (motion).
*
* Scope: notices · buttons · custom select · checkbox/radio/inputs/labels ·
* breadcrumbs · cards · countdown · disclosure · pagination · price ·
* quantity input · rating · scrolling banner · slider/carousel · social ·
* swatches · tablist · product labels · badge · WooCommerce bridge.
*
* Section-specific styling (header, navigation, footer, search, drawers, product
* page, collection grid, blog) is owned by the per-section stylesheets that load
* after this file. Depends on tokens.css + base.css.
*/
/* ==========================================================================
Notices / alerts
========================================================================== */
.alert{padding:2rem 2.4rem}
.alert.bg-success-bg{border:1px solid rgba(var(--success-text-color)/.2)}
.alert.bg-error-bg{border:1px solid rgba(var(--error-text-color)/.2)}
.alert[autofocus]{outline:0}
.text-success-text{--heading-color: rgb(var(--success-text-color));--link-color: rgb(var(--success-text-color))}
.text-error-text{--heading-color: rgb(var(--error-text-color));--link-color: rgb(var(--error-text-color))}
/* ==========================================================================
Buttons — .btn, .btn--primary, .btn--secondary, .btn--icon, .btn--arrow-with-text
========================================================================== */
button{margin:0;padding:0;border:0;border-radius:0;background:none;font-family:inherit;font-size:1em;text-decoration:none;text-shadow:none;cursor:pointer}
.btn{display:inline-block;position:relative;max-width:100%;padding:var(--btn-padding-y, 12px) 26px;transition:opacity .6s ease,color .6s ease,background-position .4s ease-out;border-radius:var(--btn-border-radius, 0);outline-offset:var(--btn-border-width);font-size:.88em;font-weight:700;line-height:1.2em;text-align:center;text-transform:var(--btn-text-transform, none);-webkit-appearance:none;appearance:none;word-break:break-word}
.btn[disabled],.btn[aria-disabled=true]{opacity:.4;background-position:0 100%;cursor:default}
.btn--sm{padding:8px 16px;font-size:1.4rem;font-weight:400}
.btn--narrow{padding-top:9px;padding-bottom:9px}
.btn--extra-narrow{padding-top:5px;padding-bottom:5px}
.btn--primary,.spr-button-primary,.shopify-payment-button .shopify-payment-button__button--unbranded,.shopify-challenge__button{border:var(--btn-border-width) solid rgb(var(--btn-bg-color));outline-color:rgb(var(--btn-bg-color));outline-offset:3px;background:rgb(var(--btn-bg-hover-color)) linear-gradient(104deg,rgb(var(--btn-bg-hover-color)) 60%,rgb(var(--btn-bg-color)) 60% 100%) no-repeat 100% 100%;background-size:300% 100%;color:rgb(var(--btn-text-color))}
.btn--primary.is-loading{color:rgba(var(--btn-text-color)/.1)}
.btn--primary.is-loading:after{border-color:rgb(var(--btn-text-color));border-top-color:transparent}
.btn--primary.is-loading:before{border-color:rgb(var(--btn-text-color))}
.btn--secondary{border:var(--btn-border-width) solid rgb(var(--btn-alt-text-color));outline-color:rgb(var(--btn-alt-text-color));outline-offset:3px;background:rgba(var(--btn-alt-bg-color)/.9) linear-gradient(104deg,rgba(var(--btn-alt-text-color)/.07) 60%,rgba(var(--btn-alt-bg-color)/var(--btn-alt-bg-alpha)) 60% 100%) no-repeat 100% 100%;background-size:300% 100%;color:rgb(var(--btn-alt-text-color))}
.btn--secondary.is-loading{color:rgba(var(--btn-alt-text-color)/.1)}
.btn--secondary.is-loading:after{border-color:rgb(var(--btn-alt-text-color));border-top-color:transparent}
.btn--secondary.is-loading:before{border-color:rgb(var(--btn-alt-text-color))}
@media(hover:hover)and (pointer:fine) {
.btn--primary:not(.slider-nav__btn):not([disabled]):hover,.btn--secondary:not(.slider-nav__btn):not([disabled]):hover,.shopify-challenge__button:not([disabled]):hover,.shopify-payment-button .shopify-payment-button__button--unbranded:not([disabled]):hover{background-position:0 100%}
}
.btn--icon{padding:calc(10px - var(--btn-border-width));border-radius:var(--btn-lg-border-radius, var(--btn-border-radius))}
.btn--icon.btn--lg{padding:calc(16px - var(--btn-border-width));border-radius:var(--btn-icon-border-radius)}
.btn--icon-with-text .icon{width:auto;height:1.2em;margin-inline-end:calc(2 * var(--space-unit))}
.btn--arrow-with-text{padding-inline-end:56px}
.btn--arrow-back-with-text{padding-inline-start:56px}
.btn--arrow-with-text:after,.btn--arrow-back-with-text:after{content:"";position:absolute;top:50%;right:16px;width:24px;height:24px;transform:translateY(-50%);transition:background-color .2s ease;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
[dir=rtl] .btn--arrow-with-text:after,[dir=ltr] .btn--arrow-back-with-text:after{right:auto;left:16px;transform:translateY(-50%) scaleX(-1)}
.btn[disabled]:hover,.btn[aria-disabled=true]:hover{opacity:.4;background-position:0 100%;cursor:default}
shop-login-button{--buttons-radius: var(--btn-border-radius, 0)}
/* ==========================================================================
Custom select
========================================================================== */
.custom-select__btn{display:flex;width:var(--custom-select-button-width, auto);min-width:100%;max-width:100%;background-color:rgb(var(--input-bg-color));color:rgb(var(--input-text-color));font-size:.88em;font-weight:700;line-height:.88em}
.custom-select__btn.is-loading{color:rgba(var(--input-text-color)/.2)}
.custom-select__btn>.icon{flex-shrink:0;width:36px;height:20px;margin-inline-start:auto;margin-inline-end:-5px;padding-inline-start:16px}
.custom-select__listbox{z-index:100;top:5px;left:-5px;min-width:100%;max-height:20em;overflow-y:auto;border:var(--input-border-width) solid rgba(var(--input-text-color)/.2);outline:0;background-color:var(--input-bg-color-diff-3);box-shadow:0 5px 10px #00000026;color:rgb(var(--input-text-color));font-size:.88em}
.custom-select__listbox[aria-hidden=false]{visibility:visible}
.custom-select__option{padding:10px 16px;cursor:pointer}
.custom-select__option>em{flex-shrink:0;margin-inline-start:auto;padding-inline-start:1em;font-style:normal}
.custom-select__option.is-focused{outline:0;background-color:var(--input-bg-color-diff-6);color:rgb(var(--input-text-color))}
.custom-select__option--visual-group-end:not(:last-child){position:relative;margin-bottom:.8em}
.custom-select__option--visual-group-end:not(:last-child):after{content:"";position:absolute;top:calc(100% + .4em);left:0;width:100%;border-bottom:1px solid rgb(var(--input-text-color));opacity:.1;pointer-events:none}
/* ==========================================================================
Checkbox / radio
========================================================================== */
.checkbox{position:absolute;opacity:0}
.checkbox+label{display:inline-flex;position:relative;align-items:flex-start;margin:0;font-size:1em;line-height:1.5;vertical-align:top;cursor:pointer}
.checkbox+label:before{content:"";display:block;flex-shrink:0;width:22px;height:22px;margin-top:calc(.75em - 11px);margin-inline-end:.75em;border:var(--input-border-width) solid rgb(var(--text-color));border-radius:2px;background-color:rgb(var(--input-bg-color))}
.checkbox:checked+label:before{border-color:rgb(var(--text-color));background-color:rgb(var(--text-color))}
.checkbox:checked+label:after{content:"";position:absolute;top:calc(.75em - 1.5px);left:11px;width:calc((22px - (var(--input-border-width) * 2)) * .375);height:calc((22px - (var(--input-border-width) * 2)) * .75);transform:translate(-50%,-50%) rotate(45deg);border:solid rgba(var(--bg-color));border-width:0 2px 2px 0}
[dir=rtl] .checkbox:checked+label:after{right:11px;left:auto;transform:translate(50%,-50%) rotate(45deg)}
.checkbox[disabled]+label{opacity:.5;cursor:default}
.radio{position:absolute;opacity:0}
.radio+label{display:inline-flex;position:relative;align-items:flex-start;margin:0;font-size:1em;line-height:1.5;vertical-align:top;cursor:pointer}
.radio+label:before{content:"";display:block;flex-shrink:0;margin-inline-end:.75em;border:var(--input-border-width) solid rgb(var(--text-color));background-color:rgb(var(--input-bg-color));width:22px;height:22px;margin-top:calc(.75em - 11px);border-radius:50%}
.radio:checked+label:after{content:"";position:absolute;top:.75em;left:11px;width:calc((22px - (var(--input-border-width) * 2)) * .625);height:calc((22px - (var(--input-border-width) * 2)) * .625);transform:translate(-50%,-50%);border-radius:50%;background-color:rgb(var(--text-color))}
[dir=rtl] .radio:checked+label:after{right:11px;left:auto;transform:translate(50%,-50%)}
.custom-select__option>em{padding-inline-start:2em}
.custom-select__listbox{min-width:max(100%,165px);border-radius:var(--modal-border-radius)}
/* ==========================================================================
Form fields — label, input, textarea, select, input-with-button
========================================================================== */
fieldset{margin:0;padding:.35em .75em .625em}
legend{padding:0}
.label{display:block;margin:0 0 calc(2 * var(--space-unit));font-size:.88em;font-weight:700;text-align:start}
.label--inline{display:inline-block;margin:0}
.is-required>label:not(.required-inline):after{content:" *"}
input,textarea,select{background-clip:padding-box;font-family:inherit;font-size:16px;line-height:1.5}
input[type=date]{min-height:calc((var(--input-padding-y, 11px) + var(--input-border-width)) * 2 + 1.2em);-webkit-appearance:none}
.input,select{max-width:100%;margin:0;padding:var(--input-padding-y, 11px) 24px;transition:border-color .2s,box-shadow .2s,outline .2s;border:var(--input-border-width) solid rgba(var(--input-text-color)/.2);border-radius:var(--input-border-radius, 0);background-color:rgb(var(--input-bg-color));color:rgb(var(--input-text-color));font-size:.88em;line-height:1.2em}
.input:focus,select:focus{border-color:rgba(var(--input-text-color)/.6);outline:0;box-shadow:0 0 0 1px rgba(var(--input-text-color)/.6)}
.input::placeholder{color:rgba(var(--input-text-color)/.5)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;border:var(--input-border-width) solid rgba(var(--input-text-color)/.2);box-shadow:0 0 0 1000px rgb(var(--input-bg-color)) inset;-webkit-text-fill-color:rgb(var(--input-text-color))}
.input-with-button input:-webkit-autofill,.input-with-button input:-webkit-autofill:hover,.input-with-button input:-webkit-autofill:focus,.input-with-button textarea:-webkit-autofill,.input-with-button textarea:-webkit-autofill:hover,.input-with-button textarea:-webkit-autofill:focus,.input-with-button select:-webkit-autofill,.input-with-button select:-webkit-autofill:hover,.input-with-button select:-webkit-autofill:focus{border-color:transparent}
[type=email],[type=tel]{text-align:start}
[type=number]{-moz-appearance:textfield}
[type=search]{outline-offset:-2px;-webkit-appearance:none}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{margin:0;-webkit-appearance:none}
textarea{border-radius:var(--textarea-border-radius)!important;vertical-align:top;resize:vertical}
select{padding-inline-end:48px;font-weight:700;-webkit-appearance:none;appearance:none}
.select:after{content:"";position:absolute;top:calc(50% - 10px);right:20px;width:20px;height:20px;background-color:rgb(var(--input-text-color));pointer-events:none;-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
[dir=rtl] .select:after{right:auto;left:20px}
.input-with-button{display:flex;align-items:center;border-radius:var(--input-lg-border-radius, var(--input-border-radius));background-color:rgb(var(--input-bg-color));box-shadow:inset 0 0 0 var(--input-border-width) rgba(var(--input-text-color)/.2)}
.input-with-button:focus-within{box-shadow:inset 0 0 0 var(--input-border-width) rgba(var(--input-text-color)/.6)}
.input-with-button>.input{flex:1 1 auto;margin-inline-start:3px;margin-inline-end:calc((var(--input-border-radius, 0px) + var(--btn-border-radius, 0px)) * -1);padding-inline-end:0;border:0;background-color:transparent;box-shadow:none}
.input-with-button>.btn{flex:0 0 auto;padding:var(--btn-padding-y, 12px) 26px;border-radius:var(--input-with-btn-inner-radius, 0) var(--input-border-radius, 0) var(--input-border-radius, 0) var(--input-with-btn-inner-radius, 0)}
.input-with-button>.btn:not(.btn--primary){color:rgb(var(--input-text-color))}
.input-with-button>.btn--icon{padding:12px 16px}
.checkbox:checked+label:after{top:calc(.75em - 2px)}
.form__field{margin-bottom:calc(6 * var(--space-unit));text-align:start}
.form>.form__field:last-of-type{margin-bottom:0}
.form__field-error{margin:.5em 0 0;color:rgb(var(--error-text-color))}
.form__actions>.btn{margin-inline-end:calc(6 * var(--space-unit))}
.checkbox--small+.label,.checkbox--small:checked+.label{align-items:center;font-size:.88em}
.checkbox--small+.label:before,.checkbox--small:checked+.label:before{width:16px;height:16px;margin-top:-1px}
.checkbox--small+.label:after,.checkbox--small:checked+.label:after{content:"";left:8px;width:calc((16px - var(--input-border-width) * 2) * .375);height:calc((16px - var(--input-border-width) * 2) * .75)}
@media(max-width:768.98px) {
.input-with-button--md-up{display:block;border-radius:var(--input-border-radius, 0);background:none;box-shadow:none}
.input-with-button--md-up:focus-within{box-shadow:none}
.input-with-button--md-up>.input{padding:var(--input-padding-y, 11px) 24px;border:var(--input-border-width) solid rgba(var(--input-text-color)/.2);background-color:rgb(var(--input-bg-color))}
.input-with-button--md-up>.input:focus{border-color:rgba(var(--input-text-color)/.6)}
.input-with-button--md-up>.btn{width:100%;margin-top:calc(4 * var(--space-unit));border-radius:var(--btn-border-radius, 0)}
.input-with-button>.btn{padding:var(--btn-padding-y, 12px) 18px}
}
/* ==========================================================================
Breadcrumbs
========================================================================== */
.breadcrumbs{min-height:1.5em;margin:calc(5 * var(--space-unit)) 0;font-size:.75em}
.breadcrumbs .icon{display:inline-block;width:1.2em;height:1.2em;margin-inline-start:.125em;margin-inline-end:.25em}
.breadcrumbs-list{flex:1 1 auto;flex-wrap:wrap;line-height:1em}
.breadcrumbs-list__link{color:currentColor}
.breadcrumbs-prod-nav{margin-inline-start:auto;margin-inline-end:-7px}
.breadcrumbs-prod-nav__link--next{margin-inline-end:0}
.breadcrumbs-prod-nav__link--next:before{content:"\b7";position:relative;margin:0 .75em;opacity:.5}
.breadcrumbs-list__link--rss{margin-inline-start:1em}
@media(min-width:769px) {
.breadcrumbs{overflow:auto}
.breadcrumbs-list{flex:1 0 auto}
.product-breadcrumbs .breadcrumbs-list__link{max-width:20em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-breadcrumbs .breadcrumbs-list__link:hover{text-decoration:underline}
}
/* ==========================================================================
Cards
========================================================================== */
.card{flex-direction:column;max-width:768px;margin:0 auto}
@media(hover:hover)and (pointer:fine) {
.card__main-image,.card__media.has-hover-image:hover .card__hover-image{visibility:visible;transition:opacity .5s,visibility 0s;opacity:1}
.card__hover-image,.card__media.has-hover-image:hover .card__main-image{visibility:hidden;transition:opacity .5s,visibility 0s .5s;opacity:0}
}
.card__info{padding-top:calc(4 * var(--space-unit))}
.card.color-scheme .card__info{padding:calc(6 * var(--space-unit)) calc(6 * var(--space-unit)) calc(8 * var(--space-unit)) calc(6 * var(--space-unit))}
.card-link:after{content:"";position:absolute;z-index:2;top:0;left:0;width:100%;height:100%}
.card:not(.card--related) .price{padding-top:12px}
.card:not(.card--related):not(.card--no-lines) .price--top{margin-top:calc(3 * var(--space-unit));border-top:1px solid rgba(var(--text-color)/.15)}
.card:not(.card--related).card--no-lines .price{padding-top:calc(2 * var(--space-unit))}
.card:not(.card--related).card--no-lines .price--bottom,.card:not(.card--related) .price--bottom{padding-top:calc(4 * var(--space-unit))}
.card__quick-add{display:none}
.card__tags--links{z-index:3}
.card--wide{max-width:none}
.card--row,.main-products-grid[data-layout=list] .card{flex-direction:row;max-width:none}
.main-products-grid[data-layout=list].transition-ready .card{transition:padding-top .3s}
.main-products-grid[data-layout=list] .card--product{padding-top:calc(6 * var(--space-unit))}
.main-products-grid[data-layout=list] .card--product .card__info{position:relative;padding-top:0}
.main-products-grid[data-layout=list][data-compare=true] .card--product{padding-top:calc(5 * var(--space-unit))}
.main-products-grid[data-layout=list] .card .card__media{z-index:1;flex:0 0 calc(50% - var(--gutter) * 2);margin-inline-end:var(--gutter);background-color:inherit}
.main-products-grid[data-layout=list] .card .card__info-container{display:flex;flex-direction:column;justify-content:center}
.main-products-grid[data-layout=list] .card .card__info-inner{width:auto}
.card--related{max-width:none;margin-top:calc(4 * var(--space-unit));padding:12px;background-color:rgba(var(--text-color)/.05)}
.card--related .card__media{flex:0 0 88px}
.card--related .card__info{padding-top:0;padding-inline-start:calc(4 * var(--space-unit))}
.card--related .price{margin-bottom:calc(2 * var(--space-unit))}
.card--related .btn{z-index:3}
.slider__grid .card--related{margin-top:0}
.card__link-list{padding-top:calc(2 * var(--space-unit))}
.card__link-list li{margin-bottom:var(--space-unit)}
.card__link-list-item{padding:var(--space-unit) 0 calc(2 * var(--space-unit))}
.card__title-wrapper{padding-top:calc(4 * var(--space-unit));padding-bottom:calc(2 * var(--space-unit))}
.card--product .card__info{flex:1}
.card--product .carousel__controls{visibility:hidden;z-index:3;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none}
.card--product .carousel__controls .slider-nav__btn{pointer-events:auto}
.card--product:hover .carousel__controls,.tab-used .card--product:focus-within .carousel__controls{visibility:visible;opacity:1}
.card--product .slider-nav{padding:0 5px}
.card--product .slider-nav .slider-nav__btn{overflow:visible;background-color:rgba(var(--bg-color))}
.card--product .slider-nav__btn svg{width:18px;height:18px;color:rgb(var(--text-color))}
.card--product-contained{--text-color: var(--card-text-color);padding:calc(5 * var(--space-unit));border:1px solid var(--card-border-color);background-color:var(--card-bg-color);color:rgb(var(--card-text-color))}
.card--product-contained .text-theme-light{opacity:.7}
.card--highlight-product{--card-text-color: var(--card-highlight-text-color);--card-border-color: var(--card-highlight-border-color);--card-bg-color: var(--card-highlight-bg-color);color:rgb(var(--card-text-color))}
.card--highlight-product:not(.card--product-contained):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--card-border-color);background-color:var(--card-bg-color);pointer-events:none}
.card--highlight-product .card__info-container{--text-color: var(--card-highlight-text-color)}
.main-products-grid[data-layout=list][data-compare=false] .card--highlight-product:not(.card--product-contained){padding-top:0}
.carousel .card--highlight-product:not(.card--product-contained){padding:calc(3 * var(--space-unit))}
.carousel .card--highlight-product:not(.card--product-contained):before{top:0;right:0;bottom:0;left:0}
.card--article .btn--icon{z-index:2}
.card--article.card--row{flex-direction:column}
.card__collection--with-border .card__media{border:1px solid var(--coll-card-border-color)}
.card__collection .media{background-color:var(--coll-card-bg-color)}
.card__media--circle,.card__media--circle .media{border-radius:50%}
.card--article.card--featured .card__info{padding:var(--gutter-sm, 20px)}
@media(max-width:768.98px)and (pointer:coarse) {
.card__hover-image{display:none}
}
@media(max-width:768.98px) {
[data-layout=list] .card--highlight-product:not(.card--product-contained):before{inset:calc(8 * var(--space-unit) / 2 * -1) calc(var(--gutter) * -1)}
.grid-cols-2 .card--product-contained,.auto-cols-2 .card--product-contained{padding:calc(3 * var(--space-unit))}
.cc-product-card-grid .grid:not(.slider__grid) .card--highlight-product:not(.card--product-contained):before{top:-1px;right:-1px;bottom:-1px;left:-1px}
.cc-product-card-grid .grid:not(.slider__grid) .card--highlight-product:not(.card--product-contained) .card__info-container{padding:calc(3 * var(--space-unit))}
}
@media(min-width:769px) {
.main-products-grid[data-layout=list] .card--product{padding-top:calc(10 * var(--space-unit))}
.card--highlight-product:not(.card--product-contained):before{inset:calc(8 * var(--space-unit) / 2 * -1)}
.carousel .card--highlight-product:not(.card--product-contained){padding:calc(5 * var(--space-unit))}
.grid-cols-2:not(.small-cards-mobile) .card--product-contained,.auto-cols-2:not(.small-cards-mobile) .card--product-contained,.small-cards-desktop .card--product-contained{padding:calc(4 * var(--space-unit))}
.main-products-grid[data-layout=list] .card .card__media{flex:0 0 calc(33.333333% - calc(8 * var(--space-unit)));max-width:245px;margin-inline-end:calc(10 * var(--space-unit))}
.main-products-grid[data-layout=list] .card .card__info{flex:1 1 auto}
.main-products-grid[data-layout=list] .card .card__info-container{flex-direction:row;align-items:center}
.card--article.card--featured{flex-direction:row}
.card--article.card--featured .card__media{flex:0 0 50%}
.card--article.card--featured .card__info{min-height:250px;padding:calc(8 * var(--space-unit))}
.card.color-scheme .card__info{padding:calc(8 * var(--space-unit))}
.card--product .price__current{font-size:1.2em}
.card--product .price__was{font-size:1em}
}
@media(min-width:1280px) {
.card.color-scheme .card__info{padding:calc(10 * var(--space-unit))}
.card--article.card--featured .card__info{min-height:350px}
}
@media(hover:none) {
.card__hover-image{display:none}
}
/* ==========================================================================
Countdown
========================================================================== */
.countdown__grid{grid-template-columns:repeat(4,auto);font-size:calc(var(--countdown-size, 24) * var(--fluid-1-5));gap:var(--countdown-gap, 1em)}
.countdown__item:not(:last-child) .countdown__number:after{content:":";position:absolute;top:0;left:calc(100% + var(--countdown-gap, 1em) / 2);padding-top:.45em;transform:translate(-50%);color:rgb(var(--text-color))}
[dir=rtl] .countdown__item:not(:last-child) .countdown__number:after{right:calc(100% + var(--countdown-gap, 1em) / 2);left:auto;transform:translate(50%)}
.countdown__number{box-sizing:content-box;min-width:2ch;margin-bottom:6px;padding:.45em;border:0;border-radius:.4em;background-color:rgb(var(--text-color));color:rgba(var(--bg-color));line-height:1;white-space:nowrap}
.countdown__unit{font-size:14px}
.countdown__grid+.countdown__text{margin-top:calc(var(--countdown-size, 24) * var(--fluid-1-5) / 2)}
@media(max-width:599.98px) {
.countdown__grid{--countdown-gap: 14px;font-size:22px}
}
.color-scheme--white .text-overlay__block:not(.countdown-timer__custom-colors) .countdown__number{color:#000}
@media(max-width:599.98px) {
.color-scheme--white.mobile-stacked .text-overlay__block:not(.countdown-timer__custom-colors) .countdown__number{color:rgba(var(--bg-color))}
}
.countdown__block{margin-top:calc(8 * var(--space-unit));margin-bottom:calc(8 * var(--space-unit))}
.countdown__block:last-child{margin-bottom:0}
.section__block--countdown:not(:first-child){margin-top:calc(6 * var(--space-unit));margin-bottom:calc(6 * var(--space-unit))}
.countdown__text{margin-top:calc(4 * var(--space-unit))}
.countdown-large-endtext .countdown__text{font-size:1.25em}
@media(max-width:768.98px) {
.countdown__item{padding-right:0;padding-left:0}
}
@media(max-width:599.98px) {
.countdown__unit{font-size:.5em}
}
/* ==========================================================================
Disclosure (details/summary accordions)
========================================================================== */
.disclosure>summary{padding:calc(6 * var(--space-unit)) 0}
.disclosure--row{border:1px solid rgba(var(--text-color)/.15);border-width:1px 0}
details-disclosure+details-disclosure .disclosure--row{border-top:0}
.js .disclosure__panel{overflow:hidden;transition:height .3s cubic-bezier(.2,.6,.4,1)}
.disclosure__toggle{margin-inline-start:calc(3 * var(--space-unit))}
.disclosure__toggle>.icon{display:block;width:20px;height:20px}
.disclosure[open]:not(.is-closing) .disclosure__toggle>.icon{transform:scaleY(-1)}
.disclosure[open]:not(.is-closing) .v-line{display:none}
.disclosure__title{max-width:100%;margin-bottom:0}
.disclosure__title>.icon{flex-shrink:0;margin:0;margin-inline-end:calc(4 * var(--space-unit))}
.disclosure__title>.icon--washing,.disclosure__title>.icon--truck,.disclosure__title>.icon--silhouette,.disclosure__title>.icon--lock{margin-top:-2px}
.disclosure__content{padding-bottom:calc(6 * var(--space-unit))}
.js .disclosure__content{transition:opacity .3s ease 0s;opacity:0}
.js .disclosure[open]:not(.is-closing) .disclosure__content{transition:opacity .3s ease .1s;opacity:1}
/* ==========================================================================
Pagination
========================================================================== */
.pagination--modern{max-width:250px}
.pagination[aria-disabled=true],.pagination--modern[aria-disabled=true]{opacity:.4;cursor:default}
.pagination.is-loading li{opacity:.3;cursor:default;pointer-events:none}
.pagination__arrow[aria-disabled=true]{opacity:.4}
.pagination__arrow-icon svg{width:18px}
.pagination__next-label{margin-inline-end:calc(2 * var(--space-unit))}
.pagination__item{flex:1}
.pagination__page-link,.pagination__page-current{padding:8px 14px}
.pagination__page-link{color:rgba(var(--text-color)/.8)}
.pagination__page-link:hover,.pagination__page-current{background:linear-gradient(to top,currentColor 2px,transparent 2px) no-repeat center bottom/1.3em}
.pagination__bar{height:2px;background-color:rgba(var(--text-color)/.2)}
.pagination__bar:before{content:"";position:absolute;top:0;left:0;width:var(--pagination-percent);height:2px;transition:width .3s;background-color:rgb(var(--text-color))}
@media(min-width:1280px) {
.pagination{justify-content:center;width:auto;overflow-wrap:normal}
.pagination__item--arrow{flex:0}
.pagination__arrow{margin:0 calc(2 * var(--space-unit));padding:0 26px}
.pagination__arrow--prev{margin-inline-end:calc(8 * var(--space-unit))}
.pagination__arrow--next{margin-inline-start:calc(8 * var(--space-unit))}
}
/* ==========================================================================
Price
========================================================================== */
.price__current{padding-inline-end:.5rem;font-size:1em;white-space:nowrap}
.price__was{color:rgba(var(--text-color)/.8);font-size:.8em;white-space:nowrap}
.price__was--supercents{position:relative;text-decoration:none}
.price__was--supercents:before{content:"";position:absolute;top:50%;right:0;left:0;transform:rotate(-10deg);border-top:1px solid currentColor}
.unit-price{font-size:.8em;white-space:nowrap}
.unit-price:before{content:"("}
.unit-price:after{content:")"}
.predictive-result__info .price__current{font-size:1.6rem;font-weight:400}
.predictive-result__info .price__was{font-size:1.3rem}
sup{position:relative;top:-.5em;margin-left:1px;font-size:60%;vertical-align:baseline}
/* ==========================================================================
Quantity input
========================================================================== */
.qty-input{--padding: var(--btn-padding-y, 12px);--size: calc((var(--btn-border-width) + var(--padding)) * 2 + 1.4rem)}
.qty-input__input{width:var(--size);margin:0;padding-top:var(--padding);padding-bottom:var(--padding);border:var(--btn-border-width) solid rgba(var(--input-text-color)/.2);text-align:center}
.qty-input__btn{position:relative;z-index:1;width:var(--size);height:var(--size);padding:0;border:var(--btn-border-width) solid rgba(var(--input-text-color)/.2);border-radius:var(--btn-border-radius, 0);background-color:rgb(var(--input-bg-color));color:rgb(var(--input-text-color))}
.btn--minus:before,.btn--minus:after,.btn--plus:before,.btn--plus:after{content:"";position:absolute;top:50%;right:50%;width:12px;height:2px;transform:translate(50%,-50%);background-color:currentColor}
.btn--minus:after,.btn--plus:after{width:2px;height:12px}
.btn--minus:after{display:none}
.js .qty-input--combined{border:var(--btn-border-width) solid rgba(var(--input-text-color)/.2);border-radius:var(--btn-border-radius, 0);background-color:rgb(var(--input-bg-color))}
.js .qty-input--combined:focus-within{border-color:rgba(var(--input-text-color)/.6);box-shadow:0 0 0 1px rgba(var(--input-text-color)/.6)}
.js .qty-input--combined .qty-input__input,.js .qty-input--combined .qty-input__btn{border:0;background:none;color:rgb(var(--input-text-color))}
.js .qty-input--combined .qty-input__input{padding:var(--padding) 0;border-radius:0;box-shadow:none}
.js .qty-input--combined .qty-input__btn{width:calc(var(--padding) * 2 + 1.4rem);height:calc(var(--padding) * 2 + 1.4rem)}
.qty-input{height:100%}
.qty-input__input{flex:1 1 auto;width:2.5em}
.no-js .qty-input__input{width:4em;padding-right:5px;padding-left:5px}
.js .qty-input--combined:focus-within{box-shadow:0 0 rgba(var(--input-text-color)/.6)}
.qty-input--secondary-btn .qty-input{--input-text-color: var(--btn-alt-text-color);border-color:rgb(var(--btn-alt-text-color));background-color:rgba(var(--btn-alt-bg-color)/var(--btn-alt-bg-alpha))}
.qty-input--secondary-btn .qty-input:focus-within{border-color:rgb(var(--btn-alt-text-color));box-shadow:0 0 0 1px rgb(var(--btn-alt-text-color))}
/* ==========================================================================
Rating / stars
========================================================================== */
.rating,.rating__count{line-height:1.5rem}
.rating__stars{--no-rating-col: rgba(var(--star-color)/.2);--percent: calc((var(--rating) / var(--rating-max) + .01) * 100%);background:linear-gradient(90deg,rgb(var(--star-color)) var(--percent),var(--no-rating-col) var(--percent));-webkit-background-clip:text;background-clip:text;font-family:Times;font-size:1.125em;letter-spacing:-.1em;line-height:1;-webkit-text-fill-color:transparent}
.rating__count{margin-inline-start:.5em}
.spr-stars>span{display:flex;align-items:center;height:100%}
.spr-star{margin-inline-end:2px}
/* ==========================================================================
Scrolling banner (marquee)
========================================================================== */
@keyframes marquee{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}
.scrolling-banner--pausable:hover{--play-state: paused}
.scrolling-banner__items-container{direction:ltr}
.scrolling-banner__items{animation:marquee var(--duration, 10s) linear infinite var(--play-state, running) var(--direction)}
[dir=rtl] .scrolling-banner__items{direction:rtl}
.scrolling-banner__items,.scrolling-banner__item{white-space:nowrap}
a.scrolling-banner__item{transition:opacity .3s;color:currentColor}
a.scrolling-banner__item:hover{opacity:.6}
.scrolling-banner__text{margin-bottom:0}
/* ==========================================================================
Slider / carousel
========================================================================== */
.slider{--scrollbar-border-width: 11px;padding-bottom:calc(4 * var(--space-unit));overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:rgb(var(--scrollbar-color, 60 60 60)) rgba(var(--scrollbar-color, 60 60 60)/.05);scroll-behavior:smooth}
.slider[data-overlayscrollbars-viewport]{position:static;scroll-snap-type:none;scroll-behavior:auto;width:100%!important;margin:0!important;padding:0 0 calc(10 * var(--space-unit)) 0!important}
.slider.is-grabbable{cursor:grab;-webkit-user-select:none;user-select:none}
.slider.is-grabbable img{pointer-events:none}
.slider.is-grabbing{cursor:grabbing}
@supports selector(::-webkit-scrollbar) {
.slider::-webkit-scrollbar{height:24px}
.slider::-webkit-scrollbar-thumb{border:var(--scrollbar-border-width) solid transparent;border-radius:var(--btn-border-radius, 0);box-shadow:inset 0 0 0 2px rgb(var(--scrollbar-color, 60 60 60))}
.slider::-webkit-scrollbar-thumb:hover{border-width:10px}
.slider::-webkit-scrollbar-track{margin:0 calc(var(--gutter) - var(--scrollbar-border-width));border:var(--scrollbar-border-width) solid transparent;border-radius:var(--btn-border-radius, 0);box-shadow:inset 0 0 0 2px rgba(var(--scrollbar-color, 60 60 60)/.3)}
}
.os-scrollbar-horizontal{right:var(--gutter)!important;left:var(--gutter)!important}
.os-scrollbar.os-theme-dark{--os-size: 14px;--os-padding-perpendicular: 6px;--os-handle-bg: rgb(var(--scrollbar-color, 60 60 60));--os-handle-bg-hover: rgb(var(--scrollbar-color, 60 60 60));--os-handle-bg-active: rgb(var(--scrollbar-color, 60 60 60));--os-track-bg: rgba(var(--scrollbar-color, 60 60 60) / .3);--os-track-bg-hover: rgba(var(--scrollbar-color, 60 60 60) / .3);--os-track-bg-active: rgba(var(--scrollbar-color, 60 60 60) / .3)}
.slider.slider--no-scrollbar{padding:0;scrollbar-width:none}
.slider.slider--no-scrollbar::-webkit-scrollbar{display:none}
.carousel[inactive] .slider,.carousel[inactive]>div>.slider{padding-bottom:0}
.carousel[inactive]>.slider-nav,.carousel[inactive]>div>.slider-nav{display:none}
.carousel[inactive]>.slider::-webkit-scrollbar-thumb,.carousel[inactive]>div>.slider::-webkit-scrollbar-thumb{display:none}
.carousel[inactive]>.slider::-webkit-scrollbar-track,.carousel[inactive]>div>.slider::-webkit-scrollbar-track{display:none}
.slider__item{scroll-snap-align:start}
.slider-nav--show-on-hover{transition:opacity .3s;opacity:0}
.slider-nav--show-on-hover .slider-nav__btn{transform:translate(20px);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.6,.4,1)}
.carousel:hover .slider-nav--show-on-hover{opacity:1}
.carousel:hover .slider-nav--show-on-hover .slider-nav__btn{transform:translate(0)}
.carousel:hover .slider-nav--show-on-hover .slider-nav__btn:nth-child(2){transition-delay:.05s}
.slider-nav{--btn-border-radius: var(--btn-icon-border-radius)}
.slider-nav:not(.slide-nav--inline){z-index:3;top:50%;right:var(--gutter);transform:translate(50%,-50%)}
[dir=rtl] .slider-nav:not(.slide-nav--inline){right:auto;left:var(--gutter);transform:translate(-50%,-50%)}
.slider-nav__btn{display:block;margin-top:calc(3 * var(--space-unit));margin-bottom:calc(3 * var(--space-unit))}
.slider-nav__btn:not([disabled]) .icon{transition:transform .3s}
.slider-nav__btn:not([disabled]):hover .icon{transform:scale(1.25)}
.slide-nav--inline .slider-nav__btn{margin-top:0;margin-bottom:0;overflow:hidden;color:currentColor}
.slider-nav__btn--offset{margin-inline-end:-10px}
[dir=rtl] .slider-nav__btn.has-ltr-icon .icon{transform:rotate(180deg)}
[dir=rtl] .slider-nav__btn.has-ltr-icon:not([disabled]):hover .icon{transform:rotate(180deg) scale(1.25)}
.slider-nav>.btn{padding:calc(8px - var(--btn-border-width))}
@media(max-width:599.98px) {
.slider .slider__grid{width:calc(100% - var(--column-gap))}
.drawer--cart .slider__grid{width:100%}
.carousel[disable-mobile=true]>.slider,.carousel[disable-mobile=true]>div>.slider{overflow:auto;cursor:auto;-webkit-user-select:auto;user-select:auto;scroll-snap-type:none}
.carousel[disable-mobile=true]>.slider>.slider__grid,.carousel[disable-mobile=true]>.slider>div>.slider__grid,.carousel[disable-mobile=true]>div>.slider>.slider__grid,.carousel[disable-mobile=true]>div>.slider>div>.slider__grid{grid-auto-flow:row}
product-card-image-slider[disable-mobile=true]>div>.slider{overflow:hidden!important}
product-card-image-slider[disable-mobile=true]>div>.slider>.slider__grid{grid-auto-flow:column!important}
}
@media(min-width:600px) {
.carousel[disable-desktop=true]>.slider,.carousel[disable-desktop=true]>div>.slider{overflow:auto;cursor:auto;-webkit-user-select:auto;user-select:auto;scroll-snap-type:none}
.carousel[disable-desktop=true]>.slider>div>.slider__grid,.carousel[disable-desktop=true]>div>.slider>div>.slider__grid{grid-auto-flow:row;overflow:hidden}
}
@media(min-width:769px) {
.carousel:not([inactive]) .section__heading{text-align:start}
carousel-slider[disable-desktop=true]>[data-overlayscrollbars-viewport],carousel-slider[disable-desktop=true]>div>[data-overlayscrollbars-viewport],product-comparison-grid[disable-desktop=true] [data-overlayscrollbars-viewport]{padding:0!important}
}
@media(max-width:1023.98px) {
.carousel>.container{padding:0}
.carousel__header{padding:0 var(--gutter)}
.slider:not(.slider--no-scrollbar){width:100%;scroll-padding-left:var(--gutter)}
[dir=rtl] .slider:not(.slider--no-scrollbar){scroll-padding-right:var(--gutter);scroll-padding-left:0}
.slider:not(.slider--contained) .slider__item:last-child{width:calc(100% + var(--gutter));border-inline-end:var(--gutter) solid transparent}
}
@media(min-width:1024px) {
.slider::-webkit-scrollbar-track{margin:0 calc(var(--scrollbar-border-width) * -1)}
.slider[data-overlayscrollbars-viewport]{padding-bottom:calc(14 * var(--space-unit))!important}
.slider>.container{padding:0}
}
@media(min-width:1280px) {
.slider-nav:not(.slide-nav--inline){transform:translate(calc(100% + var(--gutter-lg, 80px) / 4),-50%)}
[dir=rtl] .slider-nav:not(.slide-nav--inline){transform:translate(-50%,-50%)}
}
/* ==========================================================================
Social links
========================================================================== */
.social{margin:-10px}
.social__link{width:44px;height:44px;padding:10px;color:rgb(var(--text-color))}
.social__link>.icon{width:auto;max-width:100%;height:100%}
.social__link>.icon,.social__link>img{transition:transform .3s ease-out}
.social__link:hover>.icon,.social__link:hover>img{transform:scale(1.2)}
.social-share__heading{margin-inline-end:calc(4 * var(--space-unit))}
/* ==========================================================================
Swatches / variant option labels
========================================================================== */
[data-swatch]:before{background-color:var(--swatch-color, var(--native-swatch-color, rgb(var(--text-color)/.08)));background-image:var(--swatch-image, var(--native-swatch-image, none))}
.card__swatches{z-index:3;flex-wrap:wrap;padding:calc(3 * var(--space-unit)) 0 0;padding-inline-end:2px;row-gap:calc(3 * var(--space-unit))}
.card__swatches>.opt-label{width:var(--swatch-card-size, 24px);height:var(--swatch-card-size, 24px);margin-top:0;margin-inline-start:2px;margin-inline-end:8px;border-width:1px}
.card__swatches>.opt-label.swatch-shape--portrait{height:calc(var(--swatch-card-size, 24px) / .75)}
.card__swatches>.opt-label.swatch-shape--natural.swatch--variant-image{height:auto}
.swatch-shape--natural.swatch--native{height:auto}
.swatch-shape--natural.swatch--native:before{display:none}
.option-selector__btns:has(.swatch-shape--natural.swatch--native){align-items:flex-start}
label[data-swatch],.filter__label[data-swatch]:before{width:var(--swatch-variant-picker-size, 36px);min-width:0;height:var(--swatch-variant-picker-size, 36px);padding:0;overflow:hidden;transition:box-shadow .1s,border-color .2s ease-out;border:1px solid rgb(var(--swatch-border-color-default));border-radius:50%;box-shadow:0 0 rgba(var(--text-color)/0);cursor:pointer}
label[data-swatch]:hover,.filter__label[data-swatch]:hover:before{border:2px solid rgba(var(--bg-color));box-shadow:0 0 0 2px rgb(var(--swatch-border-color-default))}
input:checked+.opt-label--swatch,input:checked+.filter__label[data-swatch]:before{border:2px solid rgba(var(--bg-color));box-shadow:0 0 0 2px rgb(var(--swatch-border-color-active))}
label[data-swatch]:before{content:"";display:block;width:100%;height:100%;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:cover}
.swatch-shape--not-circle[data-swatch],.swatch-shape--not-circle[data-swatch]:before{border-radius:0}
.is-unavailable+.opt-label--swatch .opt-label__media:after,.is-unavailable+.opt-label--swatch:not(.opt-label--image):after{background:linear-gradient(to bottom left,transparent calc(50% - 1px),rgba(var(--bg-color)) calc(50% - 1px),rgba(var(--bg-color)) calc(50% + 1px),transparent calc(50% + 1px)) no-repeat!important}
.is-unavailable+.opt-label--swatch:not(.opt-label--image):after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}
.custom-select__btn[data-swatch]:before,.custom-select__option[data-swatch]:before{border:1px solid rgb(var(--swatch-border-color-default))}
/* ==========================================================================
Tablist
========================================================================== */
.tablist:after{content:"";position:absolute;top:0;right:0;bottom:0;width:25px;background:linear-gradient(90deg,#fff0,rgba(var(--bg-color)) 50%)}
.tablist__scroller{overflow-x:auto;white-space:nowrap}
.tablist__tab{margin-inline-end:3rem;padding:1.2rem 0;color:rgba(var(--text-color)/.7);white-space:nowrap}
.tablist__tab[aria-selected=true]{color:rgb(var(--text-color));text-decoration:underline;text-underline-offset:.8rem;text-decoration-thickness:2px}
.cc-compare{display:none}
.theme-metafield-color{display:inline-block;width:24px;height:24px;border-radius:50%}
/* ==========================================================================
Product & collection labels
========================================================================== */
.product-label-container{z-index:2}
.product-info__block .product-label-container{display:flex;flex-wrap:wrap;align-items:flex-start}
.product-label-wrapper:not(:last-child){margin-bottom:2px}
.product-info__block .product-label-wrapper{margin-bottom:3px}
.product-label,.collection-label{display:inline-flex;align-items:center;padding:2px 6px;font-size:1.1rem;line-height:1.7rem}
.product-info__block .product-label,.product-info__block .collection-label{margin-inline-end:3px}
.badge.collection-label{position:absolute;z-index:1;top:8px;left:8px;max-width:calc(100% - 16px);margin:0;background-color:#fff;box-shadow:1px 2px 4px -1px #80808985;color:rgb(var(--collection-label-color));white-space:normal}
.badge.collection-label:before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;border-radius:2em;background-color:rgba(var(--collection-label-color)/.1)}
.badge.collection-label--circle{top:5%;right:5%;left:auto}
.product-label .icon,.collection-label .icon{position:relative;top:-.5px;flex-shrink:0;margin-inline-end:.5em}
.product-label--custom{background-color:rgb(var(--custom-label-bg-color));color:rgb(var(--custom-label-text-color))}
.product-label--sale{background-color:rgb(var(--sale-label-bg-color));color:rgb(var(--sale-label-text-color))}
.product-label--sold-out{background-color:rgb(var(--sold-out-label-bg-color));color:rgb(var(--sold-out-label-text-color))}
.product-label--new{background-color:rgb(var(--new-label-bg-color));color:rgb(var(--new-label-text-color))}
.product-label--preorder{background-color:rgb(var(--preorder-label-bg-color));color:rgb(var(--preorder-label-text-color))}
@media(max-width:599.98px) {
[data-layout=list] .product-label-container{position:relative;top:calc(2 * var(--space-unit))}
.product-label .icon{width:12px}
}
@media(min-width:769px) {
.product-label{padding:4px 8px;font-size:1.3rem}
.xl\:auto-cols-4 .badge.collection-label--circle{top:7%;right:7%}
}
/* ==========================================================================
Badge (cart count, collection corner label)
========================================================================== */
.badge{display:inline-flex;position:relative;top:-2px;align-items:center;margin:-.6em 0;padding:.6em .9em;border-radius:2em;background:rgb(var(--text-color));color:rgba(var(--bg-color));font-size:1rem;font-weight:700;line-height:1rem;white-space:nowrap}
/* ==========================================================================
WooCommerce bridge — map Woo default classes onto the theme components
========================================================================== */
/* Buttons Woo prints without a chance to filter the class list. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.wc-block-components-button{display:inline-block;position:relative;max-width:100%;padding:var(--btn-padding-y, 12px) 26px;transition:opacity .6s ease,color .6s ease,background-position .4s ease-out;border:var(--btn-border-width) solid rgb(var(--btn-bg-color));border-radius:var(--btn-border-radius, 0);outline-color:rgb(var(--btn-bg-color));outline-offset:3px;background:rgb(var(--btn-bg-hover-color)) linear-gradient(104deg,rgb(var(--btn-bg-hover-color)) 60%,rgb(var(--btn-bg-color)) 60% 100%) no-repeat 100% 100%;background-size:300% 100%;color:rgb(var(--btn-text-color));font-size:.88em;font-weight:700;line-height:1.2em;text-align:center;text-decoration:none;-webkit-appearance:none;appearance:none;word-break:break-word}
@media(hover:hover)and (pointer:fine) {
.woocommerce a.button:not([disabled]):hover,.woocommerce button.button:not([disabled]):hover,.woocommerce input.button:not([disabled]):hover,.woocommerce #respond input#submit:hover,.wc-block-components-button:not([disabled]):hover{background-position:0 100%;color:rgb(var(--btn-text-color))}
}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background-color:transparent}
.woocommerce a.button[disabled],.woocommerce button.button[disabled],.woocommerce input.button[disabled]{opacity:.4;background-position:0 100%;cursor:default}
/* Woo price markup → theme price scale. */
.woocommerce .price ins{text-decoration:none}
.woocommerce .price del{opacity:1;color:rgba(var(--text-color)/.8);font-size:.8em}
/* Woo sale flash → theme product label. */
.woocommerce span.onsale{display:inline-flex;align-items:center;padding:2px 6px;border-radius:0;background-color:rgb(var(--sale-label-bg-color));color:rgb(var(--sale-label-text-color));font-size:1.1rem;font-weight:700;line-height:1.7rem}
@media(min-width:769px) {
.woocommerce span.onsale{padding:4px 8px;font-size:1.3rem}
}
/* Woo notices → theme alert colours. */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{margin:0 0 calc(6 * var(--space-unit));padding:calc(4 * var(--space-unit));border:0;border-radius:var(--modal-border-radius);list-style:none;font-size:.88em}
.woocommerce-message{background-color:rgb(var(--success-bg-color));color:rgb(var(--success-text-color))}
.woocommerce-info,.woocommerce-noreviews{background-color:rgb(var(--info-bg-color));color:rgb(var(--info-text-color))}
.woocommerce-error{background-color:rgb(var(--error-bg-color));color:rgb(var(--error-text-color))}
/* Woo form fields → theme input. */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{max-width:100%;margin:0;padding:var(--input-padding-y, 11px) 24px;transition:border-color .2s,box-shadow .2s,outline .2s;border:var(--input-border-width) solid rgba(var(--input-text-color)/.2);border-radius:var(--input-border-radius, 0);background-color:rgb(var(--input-bg-color));color:rgb(var(--input-text-color));font-size:.88em;line-height:1.2em}
.woocommerce form .form-row textarea{border-radius:var(--textarea-border-radius)!important}
.woocommerce form .form-row label{display:block;margin:0 0 calc(2 * var(--space-unit));font-size:.88em;font-weight:700;text-align:start}
/* Woo star rating → theme --star-color gradient stars. */
.woocommerce .star-rating{overflow:hidden;position:relative;width:5.4em;height:1.5em;font-family:Times;font-size:1.125em;letter-spacing:-.1em;line-height:1}
.woocommerce .star-rating:before{content:"★★★★★";position:absolute;top:0;left:0;color:rgba(var(--star-color)/.2)}
.woocommerce .star-rating span{overflow:hidden;position:absolute;top:0;left:0;padding-top:1.5em}
.woocommerce .star-rating span:before{content:"★★★★★";position:absolute;top:0;left:0;color:rgb(var(--star-color))}