/*
 * potensic/assets/css/base.css
 * Global foundation, ported 1:1 from the Shopify Enterprise 1.6.1 `main.css`
 * (store.potensic.com theme instance /t/26/). Spec: docs/spec/01-design-tokens.md.
 *
 * Scope: reset · colour schemes · focus · layout containers/sections · typography ·
 *        rich text (.rte) · lists · links · media/images/icons · tables · overlays ·
 *        keyframes · scroll-in animation · WordPress-specific alignment classes.
 *
 * Component styling lives in components.css; utility classes in utilities.css.
 * Depends on tokens.css (loaded first).
 */


/* ==========================================================================
   Reset
   ========================================================================== */

*,*:before,*:after{box-sizing:border-box}
html{font-size:62.5%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
body{width:100%;min-width:320px;margin:0;overflow-x:hidden;background-color:rgba(var(--bg-color));overflow-wrap:break-word;overflow-wrap:anywhere}
body.fixed,body.overflow-hidden{padding-right:var(--scrollbar-width)}
body.overflow-hidden:after{content:"";position:absolute;z-index:29;right:0;bottom:0;width:var(--scrollbar-width, 0);height:100%;background:#e4e4e4}
body.overlay-predictive-search{overflow:hidden}
summary{overflow:hidden;list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
mark{background-color:transparent;color:inherit;font-weight:700}


/* ==========================================================================
   Colour schemes — .color-scheme--1/2/3/white/transparent
   ========================================================================== */

.color-scheme--1{--bg-color: var(--color-scheme-1-bg);--bg-grad: var(--color-scheme-1-grad, "none");--btn-bg-color: var(--color-scheme-1-btn-bg);--btn-bg-hover-color: var(--color-scheme-1-btn-bg-hover);--btn-text-color: var(--color-scheme-1-btn-text);--heading-color: var(--color-scheme-1-heading);--scrollbar-color: var(--color-scheme-1-text);--swatch-border-color-active: var(--color-scheme-1-text);--swatch-border-color-default: var(--color-scheme-1-text);--text-color: var(--color-scheme-1-text);--coll-card-border-color: rgb(var(--color-scheme-1-heading))}
.color-scheme--2{--bg-color: var(--color-scheme-2-bg);--bg-grad: var(--color-scheme-2-grad, "none");--btn-bg-color: var(--color-scheme-2-btn-bg);--btn-bg-hover-color: var(--color-scheme-2-btn-bg-hover);--btn-text-color: var(--color-scheme-2-btn-text);--heading-color: var(--color-scheme-2-heading);--scrollbar-color: var(--color-scheme-2-text);--swatch-border-color-active: var(--color-scheme-2-text);--swatch-border-color-default: var(--color-scheme-2-text);--text-color: var(--color-scheme-2-text);--coll-card-border-color: rgb(var(--color-scheme-2-heading))}
.color-scheme--3{--bg-color: var(--color-scheme-3-bg);--bg-grad: var(--color-scheme-3-grad, "none");--btn-bg-color: var(--color-scheme-3-btn-bg);--btn-bg-hover-color: var(--color-scheme-3-btn-bg-hover);--btn-text-color: var(--color-scheme-3-btn-text);--heading-color: var(--color-scheme-3-heading);--scrollbar-color: var(--color-scheme-3-text);--swatch-border-color-active: var(--color-scheme-3-text);--swatch-border-color-default: var(--color-scheme-3-text);--text-color: var(--color-scheme-3-text);--coll-card-border-color: rgb(var(--color-scheme-3-heading))}
.color-scheme--white:not(.mobile-stacked){--bg-color: 0 0 0 0;--btn-bg-color: var(--color-scheme-white-text, 255 255 255);--btn-bg-hover-color: var(--color-scheme-white-hover, 230 230 230);--btn-text-color: var(--color-scheme-white-text-contrast, 0 0 0);--heading-color: var(--color-scheme-white-text, 255 255 255);--scrollbar-color: var(--color-scheme-white-text, 255 255 255);--swatch-border-color-active: var(--color-scheme-white-text, 255 255 255);--swatch-border-color-default: var(--color-scheme-white-text, 255 255 255);--text-color: var(--color-scheme-white-text, 255 255 255)}
.color-scheme{background:var(--bg-grad);background-color:rgba(var(--bg-color));color:rgb(var(--text-color))}
.color-scheme .section__heading,.color-scheme .section__block--heading,.color-scheme .section__block--subheading,.color-scheme .text-overlay__heading,.color-scheme .text-overlay__subheading,.color-scheme .card__title{color:rgb(var(--heading-color))}
.color-scheme a:not(.btn),.color-scheme button.link{color:inherit}
.color-scheme .custom-select__btn,.color-scheme .price-range__input-wrapper,.color-scheme .input,.color-scheme .input-with-button,.color-scheme .select:after{--input-bg-color: var(--bg-color);--input-text-color: var(--text-color)}
.color-scheme:not(.color-scheme--no-btns) .btn--secondary{--btn-alt-bg-alpha: 0;--btn-alt-text-color: var(--btn-bg-color);background-color:transparent}
.color-scheme:not(.color-scheme--no-btns) .is-loading{--btn-alt-text-color: var(--btn-bg-color);--text-color: var(--btn-bg-color)}
.color-scheme:not(.color-scheme--no-btns) .qty-input{--btn-alt-text-color: var(--btn-bg-color);--input-text-color: var(--btn-bg-color);border-color:rgb(var(--btn-bg-color));background-color:transparent}
@media(min-width:600px) {
	.color-scheme--white{--bg-color: 0 0 0 0;--btn-bg-color: var(--color-scheme-white-text, 255 255 255);--btn-bg-hover-color: var(--color-scheme-white-hover, 230 230 230);--btn-text-color: var(--color-scheme-white-text-contrast, 0 0 0);--heading-color: var(--color-scheme-white-text, 255 255 255);--scrollbar-color: var(--color-scheme-white-text, 255 255 255);--swatch-border-color-active: var(--color-scheme-white-text, 255 255 255);--swatch-border-color-default: var(--color-scheme-white-text, 255 255 255);--text-color: var(--color-scheme-white-text, 255 255 255)}
}


/* ==========================================================================
   Focus rings
   ========================================================================== */

:focus{outline:0}
:focus-visible,.focus-label:focus-visible+label,.focus-label-before:focus-visible+label:before{outline:auto Highlight;outline:auto -webkit-focus-ring-color}
.is-focused,.focus-label.is-focused+label,.focus-label-before.is-focused+label:before,.no-js :focus,.no-js .focus-label:focus+label,.no-js .focus-label-before:focus+label:before{outline:auto Highlight;outline:auto -webkit-focus-ring-color}
.no-js :focus:not(:focus-visible),.no-js .focus-label:focus:not(:focus-visible)+label,.no-js .focus-label-before:focus:not(:focus-visible)+label:before{outline:0}
.focus-inset:focus-visible{outline-offset:-2px}
.focus-inset.is-focused,.no-js .focus-inset:focus{outline-offset:-2px}


/* ==========================================================================
   Layout — containers, page width, reading width
   ========================================================================== */

.container{width:100%;max-width:calc(var(--page-width, 1320px) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.page-width{width:var(--page-width, 1320px);max-width:var(--page-width, 1320px);margin-right:auto;margin-left:auto}
.reading-width{max-width:var(--reading-width, 48em);margin-right:auto;margin-left:auto}
.reading-width--inline{max-width:var(--reading-width, 48em)}
.form-width{max-width:26em}
.screen-height{min-height:var(--viewport-height, 100vh)}
.shopify-section:first-child .screen-height{min-height:calc(var(--viewport-height, 100vh) - var(--content-start, 200px))}
@media(min-width:600px) {
	:root{--column-gap: calc(var(--grid-column-gap) * 1.6);--gutter: var(--gutter-md, 32px)}
}
@media(min-width:1280px) {
	:root{--gutter: var(--gutter-lg, 80px)}
}


/* ==========================================================================
   Layout — sections
   ========================================================================== */

.section{display:block;width:100%;margin:calc(var(--section-gap) * var(--fluid-1-5)) auto;padding-bottom:.02px}
.section:empty{margin-top:0;margin-bottom:0}
.section--template{margin:calc(var(--section-gap) * var(--fluid-1-5)) auto}
.section--full-width{margin:0}
.section--padded,.section--padded-default{padding:calc(var(--section-gap) * var(--fluid-1-5)) 0}
.section--padded-xsmall{padding-top:calc(3 * var(--space-unit));padding-bottom:calc(3 * var(--space-unit))}
.section--padded-small{padding-top:calc(6 * var(--space-unit));padding-bottom:calc(6 * var(--space-unit))}
.section--padded-medium{padding-top:calc(8 * var(--space-unit));padding-bottom:calc(8 * var(--space-unit))}
.section__header,.section__heading{max-width:100%;margin-bottom:var(--heading-gap)}
.mb-heading{margin-bottom:var(--heading-gap)}
.section-header .link{margin-top:6px;margin-bottom:6px}
.section__header--center{grid-template-columns:1fr auto 1fr}
.section__block{max-width:100%;margin-bottom:calc(4 * var(--space-unit))}
.section__block:last-child{margin-bottom:0}
.section__block.reading-width--inline{max-width:var(--reading-width, 48em)}
.section__block+.section__block--button{margin-top:calc(6 * var(--space-unit))}
.section__block+.section__block--buttons{margin-top:calc(4 * var(--space-unit))}
.section__block--buttons{align-items:flex-end;column-gap:calc(4 * var(--space-unit));row-gap:calc(4 * var(--space-unit))}
.shopify-policy__container,.shopify-challenge__container,.shopify-email-marketing-confirmation__container{max-width:var(--reading-width, 48em)!important;padding:calc(var(--section-gap) * var(--fluid-1-5)) var(--gutter)!important}
.shopify-policy__title{text-align:var(--heading-align)!important}
.shopify-challenge__button{margin-top:calc(8 * var(--space-unit))!important}
.cc-apps:not(:has(.shopify-app-block)){display:none}
@media(max-width:768.98px) {
	.section__header--center{grid-template-columns:1fr;grid-template-rows:2}
}
@media(min-width:769px) {
	.section__block+.section__block--button{margin-top:calc(8 * var(--space-unit))}
	.section--padded-xsmall{padding-top:calc(2 * var(--space-unit));padding-bottom:calc(2 * var(--space-unit))}
	.section--padded-small{padding-top:calc(4 * var(--space-unit));padding-bottom:calc(4 * var(--space-unit))}
	.section--padded-medium{padding-top:calc(6 * var(--space-unit));padding-bottom:calc(6 * var(--space-unit))}
}


/* ==========================================================================
   Typography — headings, body copy, rich text
   ========================================================================== */

body{color:rgb(var(--text-color));font-family:var(--body-font-family);font-size:calc(var(--body-font-size) * .1rem);font-style:var(--body-font-style);font-weight:var(--body-font-weight);line-height:1.5}
.h0,h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.font-heading{margin:0 0 .5em;color:rgb(var(--heading-color));font-family:var(--heading-font-family);font-style:var(--heading-font-style);font-weight:var(--heading-font-weight);line-height:calc(4px + 2.4ex);text-transform:var(--heading-text-transform)}
.h0,.text-h0{font-size:var(--h0-font-size);line-height:1.25}
h1,.h1,.text-h1{font-size:var(--h1-font-size);line-height:1.25}
h2,.h2,.text-h2{font-size:var(--h2-font-size);line-height:1.3}
h3,.h3,.text-h3{font-size:var(--h3-font-size);line-height:1.3}
h4,.h4,.text-h4{font-size:var(--h4-font-size);line-height:1.3}
h5,.h5,.text-h5{font-size:var(--h5-font-size);line-height:1.3}
h6,.h6,.text-h6{font-size:var(--h6-font-size);line-height:1.4}
.font-body{color:rgb(var(--text-color));font-family:var(--body-font-family);font-style:var(--body-font-style);font-weight:var(--body-font-weight);line-height:1.5;text-transform:initial}
p{margin:0 0 1em}
p:empty{display:none}
hr{width:100%;height:1px;margin:calc(6 * var(--space-unit)) 0;border:0;background-color:rgba(var(--text-color)/.15)}
address{font-style:normal}
.text-body-extra_small{font-size:.8em}
.text-body-small{font-size:.9em}
.text-body-large{font-size:1.1em}
.text-body-extra_large{font-size:1.2em}
.small-text{font-size:.875em}
.regular-text{font-size:1em}
.enlarge-text{font-size:1.25em}
.enlarge-text.reading-width,.enlarge-text.reading-width--inline{max-width:calc(var(--reading-width, 48em) * .75)}
.large-text{font-size:2rem}
.subheading{color:rgb(var(--heading-color));font-family:var(--heading-font-family);font-style:var(--heading-font-style);font-weight:var(--heading-font-weight);text-transform:var(--subheading-text-transform)}
.subheading:not(:last-child){margin-bottom:1em}
.subheading-case{text-transform:var(--subheading-text-transform, none)}
.contained-heading{max-width:540px}
.rte:after{content:"";display:block;clear:both}
.rte>p:last-child{margin-bottom:0}
.rte h1,.rte h2,.rte h3,.rte h4,.rte h5,.rte h6{color:rgb(var(--heading-color))}
.rte h1:not(:first-child),.rte h2:not(:first-child),.rte h3:not(:first-child),.rte h4:not(:first-child),.rte h5:not(:first-child),.rte h6:not(:first-child){margin-top:.2em}
.rte h1:not(:last-child),.rte h2:not(:last-child),.rte h3:not(:last-child),.rte h4:not(:last-child),.rte h5:not(:last-child),.rte h6:not(:last-child){margin-bottom:.2em}
.rte iframe{max-width:100%}
.rte--inherit-heading-color h1,.rte--inherit-heading-color h2,.rte--inherit-heading-color h3,.rte--inherit-heading-color h4,.rte--inherit-heading-color h5,.rte--inherit-heading-color h6{color:inherit}
@media(max-width:599.98px) {
	.xs\:regular-text{font-size:1em}
	.xs\:text-h6{font-size:var(--h6-font-size);line-height:1.4}
}
@media(min-width:769px) {
	.enlarge-text{font-size:1.5em}
	.contained-heading{max-width:865px}
}


/* ==========================================================================
   Links
   ========================================================================== */

a,.link,.product-spec__value a{color:rgb(var(--link-color));text-decoration:none}
a[aria-disabled=true],.link[aria-disabled=true],.product-spec__value a[aria-disabled=true]{opacity:.4;cursor:default}
.link,.rte a,.product-spec__value a{transition:opacity .3s;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2rem}
.link:hover,.rte a:hover,.product-spec__value a:hover{opacity:.6}
.skip-link.btn{position:absolute;z-index:999;top:16px;left:var(--gutter)}
.skip-link.btn:focus{width:auto;height:auto;clip:auto}


/* ==========================================================================
   Lists and rich-text lists
   ========================================================================== */

ol,ul{margin:0;padding:0}
ul{list-style:none}
.rte ol,.rte ul{display:inline-block;margin:0 0 1em;padding:0;padding-inline-start:2rem;text-align:start}
.rte ol:last-child,.rte ul:last-child{margin-bottom:0}
.rte ol{margin-inline-start:1em}
.styled-list{padding-inline-start:2rem}
.rte ol li{padding-inline-start:.25em}
.rte ol li:not(:last-child){margin-bottom:.5em}
.rte ul li,.styled-list>li{padding-inline-start:1.5em}
.rte ul li:not(:last-child),.styled-list>li:not(:last-child){margin-bottom:.5em}
.rte ul li:before,.styled-list>li:before{content:"";display:inline-block;width:.5em;height:.5em;margin-top:-2px;margin-inline-start:-1.25em;margin-inline-end:.75em;border-radius:50%;background-color:currentColor;vertical-align:middle}


/* ==========================================================================
   Images, media, icons
   ========================================================================== */

img{max-width:100%;height:auto;vertical-align:top}
[loading=lazy]{transition:opacity .5s ease-out;opacity:1}
[loading=lazy]:not([src]){opacity:0}
.media{overflow:hidden}
.media--has-overlay:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}
.media__placeholder{background-color:#d8d8d8;fill:#777;vertical-align:top}
.media__placeholder.dark{background-color:#d5d5d5}
.img-fit,.md\:img-fit{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.img-fit.img-fit--contain,.md\:img-fit.img-fit--contain{object-fit:contain}
.icon{vertical-align:top;pointer-events:none}
[dir=rtl] .has-ltr-icon .icon{transform:scaleX(-1)}
.image-blend{background-color:var(--blend-bg-color)!important}
.image-blend img{mix-blend-mode:multiply}
@media(max-width:768.98px) {
	.md\:img-fit{position:static}
}


/* ==========================================================================
   Overlays and loading state
   ========================================================================== */

.overlay{visibility:hidden;z-index:30;transition:visibility .3s,z-index 0s .3s,opacity .3s;opacity:0;background-color:rgba(var(--modal-overlay-color)/var(--modal-overlay-opacity));pointer-events:none}
.overlay.is-visible{visibility:visible;transition:visibility .3s,z-index 0s,opacity .3s;opacity:1;pointer-events:initial}
.overlay.overlay--over-nav{z-index:31}
.overlay--nav{z-index:20}
.is-loading:after{content:"";position:absolute;top:calc(50% - 10px);right:calc(50% - 10px);width:20px;height:20px;transition:opacity .2s;animation:spinner .6s linear infinite;border:2px solid;border-radius:50%;border-color:rgb(var(--text-color));border-top-color:transparent}
.is-loading:before{content:"";position:absolute;top:50%;left:50%;width:10px;height:20px;margin-top:-2px;transform:scaleX(-1) rotate(135deg) translate(-50%) translateY(-50%);transform-origin:left top;border-top:2px solid rgb(var(--text-color));opacity:0;border-inline-end:2px solid rgb(var(--text-color))}
.is-success.is-loading:after{opacity:0}
html:not([dir=rtl]) .is-success:before{animation:checkmark 1.4s ease}
.panel{--heading-color: var(--panel-heading-color);padding:calc(5 * var(--space-unit));background-color:rgba(var(--panel-bg-color));color:rgb(var(--panel-text-color))}
@media(min-width:1024px) {
	.panel{padding:calc(8 * var(--space-unit))}
}


/* ==========================================================================
   Tables
   ========================================================================== */

table{margin:0;border-spacing:0;border-collapse:collapse}
th,td{padding:1em;border-collapse:collapse;border:1px solid rgba(var(--text-color)/.15);text-align:start}
.discount{padding:6px 14px;background-color:rgba(var(--text-color)/.1)}
.discount .icon{flex-shrink:0;width:20px;height:20px;margin-inline-end:calc(2 * var(--space-unit))}
.scrollable-table{display:inline-block;margin-bottom:var(--element-margin-bottom, 2em)}
@media(max-width:768.98px) {
	.scrollable-table{display:flex;overflow:auto;overflow-wrap:normal}
	.scrollable-table>table{flex-shrink:0;width:auto;min-width:100%;max-width:640px}
	.modal .rte .scrollable-table>table{margin-right:0;margin-left:0}
}


/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes spinner{to{transform:rotate(360deg)}}
@keyframes checkmark{0%{width:0;height:0;opacity:1}20%{width:10px;height:0;opacity:1}40%{width:10px;height:20px;opacity:1}90%{width:10px;height:20px;opacity:1}to{width:10px;height:20px;opacity:0}}
@keyframes colorPulse{0%{color:var(--text-color)}50%{color:var(--speech-icon-color)}to{color:var(--text-color)}}
@keyframes shake-n-grow{0%,to{transform:rotate(0);transform-origin:50% 50%}10%{transform:rotate(8deg)}20%,40%,60%{transform:rotate(-10deg) scale(1.05)}30%,50%,70%{transform:rotate(10deg) scale(1.05)}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}}
@keyframes shake{0%,to{transform:rotate(0);transform-origin:50% 50%}10%{transform:rotate(8deg)}20%,40%,60%{transform:rotate(-10deg)}30%,50%,70%{transform:rotate(10deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}}


/* ==========================================================================
   Scroll-in animation (port of animate-on-scroll.css)
   ========================================================================== */

.cc-animate-enabled [data-cc-animate]{opacity:0}
@media(prefers-reduced-motion) {
	.cc-animate-enabled [data-cc-animate]{animation:none!important;opacity:1!important}
}
.no-js .cc-animate-enabled [data-cc-animate]{animation:none!important;opacity:1!important}
@keyframes fade-in{0%{opacity:0}to{opacity:1}}
.cc-animate-enabled [data-cc-animate=""].cc-animate-in,.cc-animate-enabled .fade-in.cc-animate-in{animation:fade-in calc(var(--aos-animate-duration, 1s) * .8) .3s cubic-bezier(.39,.575,.565,1) both}


/* ==========================================================================
   WordPress core classes (no Shopify equivalent)
   ========================================================================== */

.screen-reader-text{position:absolute!important;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap}
.screen-reader-text:focus{clip:auto;width:auto;height:auto;margin:0;padding:1rem 2rem;background-color:rgba(var(--bg-color));color:rgb(var(--text-color))}
.alignleft{float:left;margin:0 var(--gutter-sm) var(--gutter-sm) 0}
.alignright{float:right;margin:0 0 var(--gutter-sm) var(--gutter-sm)}
.aligncenter{display:block;margin-right:auto;margin-left:auto}
.alignwide,.alignfull{max-width:none}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption,figcaption{margin-top:calc(2 * var(--space-unit));color:rgba(var(--text-color)/.6);font-size:.875em}
.wp-block-image img,.wp-post-image{height:auto}
.sticky,.bypostauthor{display:block}
.admin-bar .header{top:32px}
@media(max-width:782px) {
	.admin-bar .header{top:46px}
}