/*
 * potensic/assets/css/utilities.css
 * Utility classes, ported 1:1 from the Shopify Enterprise 1.6.1 `main.css`.
 * The original markup leans on these heavily (flex/grid/spacing/typography helpers),
 * so keeping the exact class names lets the absorbed HTML be reused verbatim.
 *
 * Responsive prefixes (spec §4.4 / §7):
 *   xs:   @media (max-width: 599.98px)
 *   sm:   @media (min-width: 600px)
 *   md:   @media (min-width: 769px)      md-down:  @media (max-width: 768.98px)
 *   lg:   @media (min-width: 1024px)
 *   xl:   @media (min-width: 1280px)
 *
 * Loaded after components.css so utilities win over component defaults.
 * Depends on tokens.css + base.css.
 */


/* ==========================================================================
   Positioning, visibility, display, sizing, flex & grid
   ========================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.pointer-events-none{pointer-events:none}
.pointer-events-auto{pointer-events:auto}
.visible{visibility:visible}
.invisible{visibility:hidden}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.sticky{position:-webkit-sticky;position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}
.bottom-0{bottom:0}
.left-0{left:0}
.right-0{right:0}
.top-0{top:0}
.z-10{z-index:10}
.col-span-2{grid-column:span 2 / span 2}
.col-span-full{grid-column:1 / -1}
.col-start-1{grid-column-start:1}
.col-end-3{grid-column-end:3}
.row-span-2{grid-row:span 2 / span 2}
.row-span-3{grid-row:span 3 / span 3}
.m-0{margin:0}
.mx-auto{margin-left:auto;margin-right:auto}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:var(--space-unit)}
.mb-10{margin-bottom:calc(10 * var(--space-unit))}
.mb-12{margin-bottom:calc(12 * var(--space-unit))}
.mb-16{margin-bottom:calc(16 * var(--space-unit))}
.mb-2{margin-bottom:calc(2 * var(--space-unit))}
.mb-3{margin-bottom:calc(3 * var(--space-unit))}
.mb-4{margin-bottom:calc(4 * var(--space-unit))}
.mb-5{margin-bottom:calc(5 * var(--space-unit))}
.mb-6{margin-bottom:calc(6 * var(--space-unit))}
.mb-8{margin-bottom:calc(8 * var(--space-unit))}
.mb-section{margin-bottom:calc(var(--section-gap) * var(--fluid-1-5))}
.ml-2{margin-left:calc(2 * var(--space-unit))}
.ml-auto{margin-left:auto}
.mr-2{margin-right:calc(2 * var(--space-unit))}
.mr-auto{margin-right:auto}
.mt-1{margin-top:var(--space-unit)}
.mt-10{margin-top:calc(10 * var(--space-unit))}
.mt-12{margin-top:calc(12 * var(--space-unit))}
.mt-16{margin-top:calc(16 * var(--space-unit))}
.mt-2{margin-top:calc(2 * var(--space-unit))}
.mt-3{margin-top:calc(3 * var(--space-unit))}
.mt-4{margin-top:calc(4 * var(--space-unit))}
.mt-5{margin-top:calc(5 * var(--space-unit))}
.mt-6{margin-top:calc(6 * var(--space-unit))}
.mt-8{margin-top:calc(8 * var(--space-unit))}
.mt-section{margin-top:calc(var(--section-gap) * var(--fluid-1-5))}
.block{display:block}
.inline-block{display:inline-block}
.inline{display:inline}
.flex{display:flex}
.inline-flex{display:inline-flex}
.table{display:table}
.grid{display:grid}
.inline-grid{display:inline-grid}
.contents{display:contents}
.hidden{display:none}
.h-full{height:100%}
.w-auto{width:auto}
.w-full{width:100%}
.max-w-full{max-width:100%}
.max-w-none{max-width:none}
.max-w-screen-lg{max-width:1024px}
.max-w-screen-md{max-width:769px}
.flex-auto{flex:1 1 auto}
.shrink-0{flex-shrink:0}
.flex-grow,.grow{flex-grow:1}
.table-fixed{table-layout:fixed}
.cursor-pointer{cursor:pointer}
.resize{resize:both}
.list-none{list-style-type:none}
.auto-cols-1{grid-auto-columns:100%}
.auto-cols-2{grid-auto-columns:calc((100% - var(--column-gap)) / 2)}
.grid-flow-col{grid-auto-flow:column}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.flex-row{flex-direction:row}
.flex-row-reverse{flex-direction:row-reverse}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.items-center{align-items:center}
.items-stretch{align-items:stretch}
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-3{gap:calc(3 * var(--space-unit))}
.gap-theme{gap:var(--column-gap)}
.gap-x-6{column-gap:calc(6 * var(--space-unit))}
.gap-x-theme{column-gap:var(--column-gap)}
.gap-y-10{row-gap:calc(10 * var(--space-unit))}
.gap-y-12{row-gap:calc(12 * var(--space-unit))}
.gap-y-16{row-gap:calc(16 * var(--space-unit))}
.gap-y-4{row-gap:calc(4 * var(--space-unit))}
.gap-y-5{row-gap:calc(5 * var(--space-unit))}
.gap-y-6{row-gap:calc(6 * var(--space-unit))}
.gap-y-8{row-gap:calc(8 * var(--space-unit))}
.gap-y-theme{row-gap:var(--column-gap)}
.self-start{align-self:flex-start}
.self-center{align-self:center}
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}
.whitespace-nowrap{white-space:nowrap}
.border{border-width:1px}
.bg-error-bg{background-color:rgb(var(--error-bg-color))}
.bg-info-bg{background-color:rgb(var(--info-bg-color))}
.bg-success-bg{background-color:rgb(var(--success-bg-color))}
.bg-theme-bg{background-color:rgba(var(--bg-color))}
.bg-theme-text{background-color:rgb(var(--text-color))}
.object-center{object-position:center}
.p-4{padding:calc(4 * var(--space-unit))}
.p-5{padding:calc(5 * var(--space-unit))}
.p-6{padding:calc(6 * var(--space-unit))}
.p-8{padding:calc(8 * var(--space-unit))}
.pb-0{padding-bottom:0}
.pb-1{padding-bottom:var(--space-unit)}
.pb-2{padding-bottom:calc(2 * var(--space-unit))}
.pb-3{padding-bottom:calc(3 * var(--space-unit))}
.pb-4{padding-bottom:calc(4 * var(--space-unit))}
.pb-6{padding-bottom:calc(6 * var(--space-unit))}
.pl-4{padding-left:calc(4 * var(--space-unit))}
.pl-6{padding-left:calc(6 * var(--space-unit))}
.pr-4{padding-right:calc(4 * var(--space-unit))}
.pr-6{padding-right:calc(6 * var(--space-unit))}
.pt-2{padding-top:calc(2 * var(--space-unit))}
.pt-3{padding-top:calc(3 * var(--space-unit))}
.pt-4{padding-top:calc(4 * var(--space-unit))}
.pt-5{padding-top:calc(5 * var(--space-unit))}
.pt-6{padding-top:calc(6 * var(--space-unit))}
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.text-start{text-align:start}
.text-end{text-align:end}
.align-middle{vertical-align:middle}
.align-bottom{vertical-align:bottom}
.text-sm{font-size:.88em}
.text-xs{font-size:.75em}
.font-bold{font-weight:700}
.font-normal{font-weight:400}
.uppercase{text-transform:uppercase}
.capitalize{text-transform:capitalize}
.leading-none{line-height:1}
.text-current{color:currentColor}
.text-error-text{color:rgb(var(--error-text-color))}
.text-info-text{color:rgb(var(--info-text-color))}
.text-inherit{color:inherit}
.text-success-text{color:rgb(var(--success-text-color))}
.text-theme-bg{color:rgba(var(--bg-color))}
.text-theme-heading{color:rgb(var(--heading-color))}
.text-theme-light{color:rgba(var(--text-color) / .6)}
.text-theme-text{color:rgb(var(--text-color))}
.underline{text-decoration-line:underline}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.js .js-hidden,.no-js .no-js-hidden{display:none}


/* ==========================================================================
   JS / no-JS visibility, screen-reader helpers
   ========================================================================== */

@media(max-width:768.98px) {
	.header__icon.js .js-hidden.md\:block,.header__icon .no-js .no-js-hidden.md\:block{display:none}
}
.no-js .no-js-visible{display:block}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.object-bottom{object-position:bottom}
.object-top{object-position:top}
[hidden]{display:none!important}
@media(prefers-reduced-motion) {
	.has-motion{transition:none!important;animation:none!important}
}
@media(hover:none) {
	.no-hover-hidden{display:none!important}
}
.color-link{color:rgb(var(--link-color))}


/* ==========================================================================
   Borders, logical properties, tap targets, motion opt-outs
   ========================================================================== */

.border-top{border-top:1px solid rgba(var(--text-color)/.15)}
.border-bottom{border-bottom:1px solid rgba(var(--text-color)/.15)}
.start{left:var(--start-gutter, 0)}
[dir=rtl] .start{right:var(--start-gutter, 0);left:auto}
.end{right:var(--end-gutter, 0)}
[dir=rtl] .end{right:auto;left:var(--end-gutter, 0)}
.mis-2{margin-inline-start:calc(2 * var(--space-unit))}
.mis-auto{margin-inline-start:auto}
.mie-auto{margin-inline-end:auto}
.vertical-center{top:50%;transform:translateY(-50%)}
.tap-target{position:relative}
.tap-target:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);opacity:0}
.tap-target--left:after{left:0;transform:translateY(-50%)}
.tap-target--right:after{right:0;left:auto;transform:translateY(-50%)}
.top-header-offset{top:calc(var(--header-end-padded, 0) * -1)}
@media(hover:hover)and (pointer:fine) {
	.hover\:underline:hover{text-decoration:underline}
	.hover\:lighten{transition:color .3s}
	.hover\:lighten:hover{color:rgba(var(--text-color)/.8)}
	.hover\:grow-media .card__media{overflow:hidden}
	.hover\:grow-media .media{transition:transform .4s cubic-bezier(.38,.41,.27,1),border-color .4s;will-change:transform}
	.hover\:grow-media:hover .media{transform:scale(1.03);border-color:transparent}
}
@media(max-width:768.98px) {
	.md-down\:text-center{text-align:center}
	.md-down\:-mx-gutter{margin-right:calc(var(--gutter) * -1);margin-left:calc(var(--gutter) * -1)}
	.md-down\:p-xl{padding:0 calc(8 * var(--space-unit))}
	.md-down\:center{align-items:center;justify-content:center}
	.md-down\:px-gutter{padding-right:var(--gutter);padding-left:var(--gutter)}
}
.visible-lg{display:none!important}
@media(min-width:769px) {
	.visible-lg{display:block!important}
	.md\:pt-0{padding-top:0!important}
}
@media(max-width:599.98px) {
	.small__grid{--column-gap: 10px;row-gap:10px}
	.carousel .small__grid{--column-gap: 0px}
	.carousel .small__grid .slider__item:not(:last-child) .card--product-contained:not(.card--highlight-product){border-inline-end:0}
	.carousel .small__grid .slider__item:not(:last-child):has(.card--product-contained.card--highlight-product)+.slider__item:not(:last-child) .card--product-contained{border-inline-start:0}
}


/* ==========================================================================
   Pseudo-class variants
   ========================================================================== */

.last\:mb-0:last-child{margin-bottom:0}
.last\:pb-0:last-child{padding-bottom:0}
.hover\:underline:hover{text-decoration-line:underline}


/* ==========================================================================
   Responsive variants — sm: ≥600 · md: ≥769 · lg: ≥1024 · xl: ≥1280
   ========================================================================== */

@media(min-width:600px) {
	.sm\:col-span-2{grid-column:span 2 / span 2}
	.sm\:col-span-3{grid-column:span 3 / span 3}
	.sm\:block{display:block}
	.sm\:flex{display:flex}
	.sm\:grid{display:grid}
	.sm\:w-auto{width:auto}
	.sm\:auto-cols-2{grid-auto-columns:calc((100% - var(--column-gap)) / 2)}
	.sm\:auto-cols-3{grid-auto-columns:calc((100% - var(--column-gap) * 2) / 3)}
	.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
	.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
	.sm\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
	.sm\:flex-wrap{flex-wrap:wrap}
	.sm\:gap-x-theme{column-gap:var(--column-gap)}
	.sm\:gap-y-8{row-gap:calc(8 * var(--space-unit))}
	.sm\:text-end{text-align:end}
}
@media(min-width:769px) {
	.md\:col-span-1{grid-column:span 1 / span 1}
	.md\:mb-0{margin-bottom:0}
	.md\:mb-12{margin-bottom:calc(12 * var(--space-unit))}
	.md\:mb-14{margin-bottom:calc(14 * var(--space-unit))}
	.md\:mb-6{margin-bottom:calc(6 * var(--space-unit))}
	.md\:mb-8{margin-bottom:calc(8 * var(--space-unit))}
	.md\:mr-2{margin-right:calc(2 * var(--space-unit))}
	.md\:mt-14{margin-top:calc(14 * var(--space-unit))}
	.md\:mt-16{margin-top:calc(16 * var(--space-unit))}
	.md\:block{display:block}
	.md\:inline{display:inline}
	.md\:flex{display:flex}
	.md\:inline-flex{display:inline-flex}
	.md\:grid{display:grid}
	.md\:hidden{display:none}
	.md\:h-auto{height:auto}
	.md\:w-auto{width:auto}
	.md\:auto-cols-2{grid-auto-columns:calc((100% - var(--column-gap)) / 2)}
	.md\:auto-cols-3{grid-auto-columns:calc((100% - var(--column-gap) * 2) / 3)}
	.md\:auto-cols-4{grid-auto-columns:calc((100% - var(--column-gap) * 3) / 4)}
	.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
	.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
	.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
	.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
	.md\:flex-row{flex-direction:row}
	.md\:flex-row-reverse{flex-direction:row-reverse}
	.md\:flex-wrap{flex-wrap:wrap}
	.md\:items-center{align-items:center}
	.md\:gap-y-16{row-gap:calc(16 * var(--space-unit))}
	.md\:gap-y-6{row-gap:calc(6 * var(--space-unit))}
	.md\:gap-y-8{row-gap:calc(8 * var(--space-unit))}
	.md\:self-start{align-self:flex-start}
	.md\:p-8{padding:calc(8 * var(--space-unit))}
	.md\:pt-0{padding-top:0}
}
@media(min-width:1024px) {
	.lg\:col-span-1{grid-column:span 1 / span 1}
	.lg\:col-span-2{grid-column:span 2 / span 2}
	.lg\:col-span-3{grid-column:span 3 / span 3}
	.lg\:col-span-4{grid-column:span 4 / span 4}
	.lg\:col-start-1{grid-column-start:1}
	.lg\:col-start-2{grid-column-start:2}
	.lg\:row-start-1{grid-row-start:1}
	.lg\:mt-0{margin-top:0}
	.lg\:mt-8{margin-top:calc(8 * var(--space-unit))}
	.lg\:block{display:block}
	.lg\:hidden{display:none}
	.lg\:auto-cols-3{grid-auto-columns:calc((100% - var(--column-gap) * 2) / 3)}
	.lg\:auto-cols-4{grid-auto-columns:calc((100% - var(--column-gap) * 3) / 4)}
	.lg\:auto-cols-5{grid-auto-columns:calc((100% - var(--column-gap) * 4) / 5)}
	.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
	.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
	.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
	.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
	.lg\:overflow-hidden{overflow:hidden}
}
@media(min-width:1280px) {
	.xl\:col-span-2{grid-column:span 2 / span 2}
	.xl\:col-span-3{grid-column:span 3 / span 3}
	.xl\:auto-cols-4{grid-auto-columns:calc((100% - var(--column-gap) * 3) / 4)}
	.xl\:auto-cols-5{grid-auto-columns:calc((100% - var(--column-gap) * 4) / 5)}
	.xl\:auto-cols-6{grid-auto-columns:calc((100% - var(--column-gap) * 5) / 6)}
	.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
	.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
	.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
	.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
	.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
	.xl\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
}