.charms-showcase{display:block;padding-top:var(--charms-pad-top, 32px);padding-bottom:var(--charms-pad-bottom, 32px)}.charms-showcase__header{margin-bottom:calc(var(--pdp-header-gap, 32px) - 20px);text-align:var(--charms-align, left)}.charms-showcase__header-actions{display:none}.charms-showcase .charms-showcase__heading{--global-section-heading-margin-bottom: 0;font-family:var(--typeHeaderPrimary),var(--typeHeaderFallback)}.charms-showcase__text{margin-top:12px;color:rgb(var(--color-foreground));font-family:var(--typeBasePrimary),var(--typeBaseFallback);font-size:var(--pdp-body-size, 15px);line-height:var(--pdp-body-line, 1.6)}.charms-showcase__text>*{margin:0}.charms-showcase__text :is(p,ul,ol,li,span,strong,em,a){font-size:inherit;line-height:inherit}.charms-showcase__row{display:flex;flex-direction:column;gap:20px}.charms-showcase__row>*{min-width:0}.charms-showcase__howto--compact{display:flex;align-items:center;gap:16px}.charms-showcase__howto--compact .charms-showcase__media{flex:none;width:58%}.charms-showcase__howto--stacked .charms-showcase__steps-wrap{margin-top:16px}.charms-showcase__media{position:relative;overflow:hidden;aspect-ratio:var(--charms-media-ratio, 4 / 5);background:rgba(var(--color-foreground),.04)}.charms-showcase__media video,.charms-showcase__media picture,.charms-showcase__media img{display:block;width:100%;height:100%;object-fit:cover}.charms-showcase__controls{position:absolute;bottom:8px;left:8px;display:flex;gap:6px}.charms-showcase__control{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:0;background:#0a0a0a8c;box-shadow:none;color:#fff;cursor:pointer}.charms-showcase__control:hover{background:#0a0a0abf}.charms-showcase__icon-play,.charms-showcase__icon-sound,.charms-showcase__media.is-paused .charms-showcase__icon-pause,.charms-showcase__media.is-unmuted .charms-showcase__icon-muted{display:none}.charms-showcase__media.is-paused .charms-showcase__icon-play,.charms-showcase__media.is-unmuted .charms-showcase__icon-sound{display:block}.charms-showcase__steps-heading{margin:0 0 12px;font-family:var(--typeBasePrimary),var(--typeBaseFallback);font-size:var(--pdp-heading-size, 14px);font-weight:700;letter-spacing:var(--pdp-tracking, .1em);line-height:1.4;text-transform:uppercase}.charms-showcase__steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}.charms-showcase__step{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--typeBasePrimary),var(--typeBaseFallback);font-size:var(--pdp-body-size, 15px);line-height:1.4}.charms-showcase__step-icon{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;overflow:hidden;border:1px solid rgb(var(--color-foreground));border-radius:100%}.charms-showcase__step-icon img{width:60%;height:60%;object-fit:contain}.charms-showcase__list{display:flex;flex-direction:column;gap:16px}.charms-showcase__list.is-empty .charms-showcase__cards{display:none}.charms-showcase__grid{margin:0;padding:0;list-style:none}.charms-showcase__grid--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sg-grid-row-gap, 24px) var(--sg-grid-gap, 3px)}.charms-showcase__grid--carousel{display:flex;gap:var(--sg-grid-gap, 3px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.charms-showcase__grid--carousel::-webkit-scrollbar{display:none}.charms-showcase__grid--carousel>.charms-showcase__item{flex:0 0 var(--charms-card-width, 170px);scroll-snap-align:start}.charms-showcase__item{position:relative;min-width:0;margin:0}.charms-showcase__button{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 20px;border:1px solid rgb(var(--color-foreground));background:transparent;color:rgb(var(--color-foreground));font-family:var(--typeBasePrimary),var(--typeBaseFallback);font-size:var(--pdp-heading-size, 14px);font-weight:700;letter-spacing:var(--pdp-tracking, .1em);line-height:1.2;text-align:center;text-decoration:none;text-transform:uppercase;transition:background-color .2s ease,color .2s ease}.charms-showcase__button--solid,.charms-showcase__button--outline:hover{background:rgb(var(--color-foreground));color:rgb(var(--color-background))}.charms-showcase__button--solid:hover{opacity:.85}@media screen and (min-width:750px){.charms-showcase__grid--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sg-grid-row-gap, 32px) var(--sg-grid-gap, 3px)}}@media screen and (min-width:990px){.charms-showcase__row{display:grid;grid-template-columns:minmax(0,min(var(--charms-media-width, 42%),var(--charms-media-max, 100%))) minmax(0,1fr);align-items:start;gap:48px}.charms-showcase__row--no-media{grid-template-columns:minmax(0,1fr)}.charms-showcase__howto--compact,.charms-showcase__howto--stacked{display:block;padding:0;border:none}.charms-showcase__howto--compact .charms-showcase__media{width:100%}.charms-showcase__steps-wrap,.charms-showcase__howto--stacked .charms-showcase__steps-wrap{margin-top:24px}.charms-showcase__steps{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.charms-showcase__step{flex-direction:column;align-items:flex-start;gap:12px}.charms-showcase__step-icon{width:44px;height:44px}.charms-showcase__step-icon svg{width:20px;height:20px}.charms-showcase__list{gap:24px}.charms-showcase__grid--grid,.charms-showcase__grid--carousel{display:grid;grid-template-columns:repeat(var(--charms-cols, 3),minmax(0,1fr));gap:var(--sg-grid-row-gap, 32px) var(--sg-grid-gap, 3px);overflow:visible}.charms-showcase__button{min-height:60px}}@media screen and (min-width:990px){.charms-showcase--desktop-row{--charms-row-max: 100000px}.charms-showcase--desktop-row.charms-showcase--fit{--charms-pad-top-fit: min(var(--charms-pad-top, 0px), 7svh);--charms-pad-bottom-fit: min(var(--charms-pad-bottom, 0px), 7svh);--charms-row-max: calc(100svh - var(--header-height, 0px) - var(--charms-pad-top-fit) - var(--charms-pad-bottom-fit));padding-top:var(--charms-pad-top-fit);padding-bottom:var(--charms-pad-bottom-fit)}.charms-showcase--desktop-row .charms-showcase__row{grid-template-columns:minmax(0,min(var(--charms-media-width, 42%),var(--charms-media-max, 100%),calc(var(--charms-row-max) * var(--charms-media-ratio-num, .8)))) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"media header" "media list" "media steps";column-gap:48px;row-gap:32px}@media(max-height:820px){.charms-showcase--desktop-row.charms-showcase--fit .charms-showcase__row{row-gap:24px}}.charms-showcase--desktop-row .charms-showcase__row--no-media{grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "list" "steps"}.charms-showcase--desktop-row .charms-showcase__howto{display:contents}.charms-showcase--desktop-row .charms-showcase__media{grid-area:media;width:100%}.charms-showcase--desktop-row .charms-showcase__header{grid-area:header;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0}.charms-showcase--desktop-row .charms-showcase__header-text{min-width:0}.charms-showcase--desktop-row .charms-showcase__header-actions{display:flex;flex:none;align-items:center;gap:24px}.charms-showcase--desktop-row .charms-showcase__list{grid-area:list}.charms-showcase--desktop-row .charms-showcase__list>.charms-showcase__button{display:none}.charms-showcase--desktop-row .charms-showcase__steps-wrap{grid-area:steps;align-self:end;margin-top:0;padding-top:24px;border-top:1px solid rgba(var(--color-foreground),.14)}.charms-showcase--desktop-row .charms-showcase__steps-wrap:has(.charms-showcase__steps){display:flex;align-items:center;gap:32px}.charms-showcase--desktop-row .charms-showcase__steps-heading{flex:none;margin:0}.charms-showcase--desktop-row .charms-showcase__steps{flex:1;min-width:0;gap:16px}.charms-showcase--desktop-row .charms-showcase__step{flex-direction:row;align-items:center}.charms-showcase--desktop-row .charms-showcase__step-icon{width:36px;height:36px}.charms-showcase--desktop-row .charms-showcase__step-icon svg{width:16px;height:16px}.charms-showcase--desktop-row .charms-showcase__grid--grid,.charms-showcase--desktop-row .charms-showcase__grid--carousel{display:flex;gap:var(--sg-grid-gap, 16px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}.charms-showcase--desktop-row .charms-showcase__grid::-webkit-scrollbar{display:none}.charms-showcase--desktop-row .charms-showcase__grid>.charms-showcase__item{--charms-n: var(--charms-visible, var(--charms-cols, 3));flex:0 0 calc((100% - (var(--charms-n) - 1) * var(--sg-grid-gap, 16px)) / var(--charms-n));scroll-snap-align:start}.charms-showcase__arrows{display:flex;gap:8px}.charms-showcase__arrows[hidden]{display:none}.charms-showcase__arrow{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid rgba(var(--color-foreground),.14);border-radius:0;background:rgb(var(--color-background));box-shadow:none;color:rgb(var(--color-foreground));cursor:pointer;transition:border-color .2s ease,opacity .2s ease}.charms-showcase__arrow:hover:not(:disabled){border-color:rgb(var(--color-foreground))}.charms-showcase__arrow:disabled{opacity:.3;cursor:default}.charms-showcase--desktop-grid .charms-showcase__header{grid-column:1 / -1;margin-bottom:calc(var(--pdp-header-gap, 32px) - 48px)}}
/*# sourceMappingURL=/cdn/shop/t/153/assets/advanced-charms-showcase.css.map */