:root{
      --sf-flat-surface: #0e1020;
      --sf-desktop-shell-max: 1400px;
      --sf-desktop-shell-gap: 16px;
      --sf-vivid-blue: #435fff;
      --sf-vivid-blue-soft: #5b72ff;
      --sf-vivid-cyan: #22d3ee;
      --sf-vivid-green: #24e987;
      --sf-vivid-orange: #ff9f3f;
      --sf-vivid-violet: #9b5cff;
    }
html{
      background-color: var(--sf-flat-surface) !important;
      background-image: none !important;
    }
body.storefront-body{
      background-color: var(--sf-flat-surface) !important;
      background-image:
        radial-gradient(900px 520px at 8% -8%, rgba(67, 95, 255, 0.24), transparent 58%),
        linear-gradient(180deg, #101326 0%, #0e1020 48%, #101326 100%) !important;
    }
.storefront-main{
      background-color: transparent !important;
      background-image: none !important;
    }
html,
body,
body.storefront-body{
      margin: 0 !important;
      padding: 0 !important;
    }
body.storefront-body > :first-child:not(.sf-header){
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
body.storefront-body{
      position: relative;
      isolation: isolate;
      --sf-header-radius: 4px;
      --sf-page-radius: var(--sf-header-radius);
      --sf-panel-radius: var(--sf-header-radius);
    }
body.storefront-body > .storefront-main{
      position: relative;
    }
body.storefront-body > .site-global-backdrop{
      position: fixed !important;
      inset: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
.storefront-main > :where(:not([data-storefront-isolated])){
      background-color: transparent !important;
      background-image: none !important;
    }
.storefront-main > :where(:not([data-storefront-isolated]))::before,
.storefront-main > :where(:not([data-storefront-isolated]))::after{
      background-image: none !important;
    }

.cart-page__panel,
.cart-page__summary,
.blog-page__post-card,
.blog-article-page__panel,
.legal-page__panel{
      border-color: rgba(91, 114, 255, 0.18) !important;
      background-color: rgba(24, 28, 51, 0.96) !important;
    }
.cart-page__checkout{
      background: linear-gradient(135deg, var(--sf-vivid-green), #16c76e) !important;
      color: #ffffff !important;
      border-color: rgba(255, 255, 255, 0.16) !important;
    }
.blog-page__button{
      background: linear-gradient(135deg, var(--sf-vivid-blue), var(--sf-vivid-blue-soft)) !important;
      color: #ffffff !important;
      border-color: rgba(255, 255, 255, 0.16) !important;
    }
.sf-shell{
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }
body.storefront-body::before,
body.storefront-body::after,
.storefront-main::before,
.storefront-main::after{
      display: none !important;
      content: none !important;
    }
*{
      min-width: 0;
    }
img,
video,
canvas,
svg{
      max-width: 100%;
      height: auto;
    }
iframe{
      max-width: 100%;
    }
table{
      width: 100%;
      max-width: 100%;
      table-layout: auto;
    }
.table-responsive,
.storefront-main .table-wrap{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
input,
textarea,
select,
button{
      max-width: 100%;
    }
.storefront-main{
      overflow-x: clip;
    }
.storefront-main :where(h1, h2, h3, h4, h5, h6, p, li, td, th, a, span, strong, em){
      overflow-wrap: anywhere;
      word-break: break-word;
    }

@media (min-width: 1200px) {
body.storefront-body{
        --sf-shell-gap: var(--sf-desktop-shell-gap);
      }
.sf-shell{
        width: min(calc(100% - (var(--sf-desktop-shell-gap) * 2)), var(--sf-desktop-shell-max)) !important;
        max-width: var(--sf-desktop-shell-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
}
@media (max-width: 1199.98px) {
.sf-shell{
        width: min(100%, calc(100% - 20px)) !important;
      }
}
@media (max-width: 767.98px) {
html,
body{
        overflow-x: hidden !important;
      }
body.storefront-body{
        --sf-header-radius: 4px;
        --sf-page-radius: var(--sf-header-radius);
        --sf-panel-radius: var(--sf-header-radius);
        
      }
.storefront-main{
        overflow-x: hidden !important;
      }

.storefront-main .table-responsive,
.storefront-main .table-wrap,
.storefront-main .storefront-table-scroll{
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
.sf-shell{
        width: min(100%, calc(100% - 20px)) !important;
      }

.cart-page,
.blog-page,
.blog-article-page,
.legal-page{
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

.cart-page__shell,
.blog-page__layout,
.blog-article-page__layout,
.legal-page__layout{
        grid-template-columns: 1fr !important;
      }

.cart-page__panel,
.cart-page__summary,
.blog-page__post-card,
.blog-page__sidebar-post,
.blog-article-page__panel,
.blog-article-page__side-card,
.legal-page__panel{
        padding: 14px !important;
      }

.cart-page__panel,
.cart-page__summary,
.blog-page__post-card,
.blog-page__sidebar-post,
.blog-article-page__panel,
.blog-article-page__side-card{
        border-radius: var(--sf-header-radius) !important;
      }
.blog-page__hero-copy,
.blog-page__posts,
.blog-page__sidebar,
.blog-page__sidebar-stack,
.blog-article-page__content{
        min-width: 0 !important;
      }

.cart-page__item-controls{
        display: grid !important;
        grid-template-columns: 1fr !important;
      }
.cart-page__summary-link,
.blog-page__button{
        width: 100% !important;
      }
.blog-page__button{
        justify-content: center !important;
      }
.blog-page__hero{
        min-height: 240px !important;
        height: auto !important;
      }
.blog-page__hero-copy{
        max-width: 100% !important;
        padding: 16px 16px 40px !important;
      }
.blog-page__hero-panel,
.blog-page__hero-copy h1,
.blog-page__hero-copy p{
        max-width: 100% !important;
      }
.blog-page__post-card,
.blog-page__sidebar-post{
        grid-template-columns: 1fr !important;
      }
.blog-page__post-thumb,
.blog-page__post-fallback,
.blog-page__sidebar-thumb,
.blog-page__sidebar-fallback{
        width: 100% !important;
        max-width: 100% !important;
      }
.cart-page__item{
        grid-template-columns: 1fr !important;
      }
.cart-page__item-total{
        min-width: 0 !important;
        text-align: left !important;
      }
.sf-cart-preview__panel{
        width: min(calc(100vw - 20px), 420px) !important;
        max-width: calc(100vw - 20px) !important;
        top: auto !important;
        bottom: 10px !important;
        right: 10px !important;
        max-height: min(82vh, 720px) !important;
      }

.storefront-home-showcase__grid{
        min-width: 0 !important;
      }
.storefront-home-showcase__grid{
        grid-template-columns: 1fr !important;
      }

.storefront-home-showcase__card{
        padding: 14px !important;
      }

.storefront-home-showcase__cards{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

.storefront-home-showcase__card{
        min-width: 0 !important;
      }
.storefront-home-category-hub {
        min-width: 0 !important;
      }
}
@media (max-width: 575.98px) {

.sf-cart-preview__panel{
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
      }

.storefront-home-showcase__cards{
        grid-template-columns: 1fr !important;
      }

}
:root,
body.storefront-body{
      --sf-header-radius: 4px !important;
      --sf-page-radius: 4px !important;
      --sf-panel-radius: 4px !important;

    }
body.storefront-body :where(*, *::before, *::after):not(:where([data-storefront-isolated], [data-storefront-isolated] *)){
      border-radius: 4px !important;
    }
body.storefront-body :where(svg, svg *, path, circle, rect, line, polyline, polygon):not(:where(.sf-header, .sf-header *)){
      border-radius: 0 !important;
    }
@media (max-width: 767.98px) {
body.storefront-body--home .storefront-main{
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
      }

}
html,
body,
body.storefront-body{
      margin-top: 0 !important;
      padding-top: 0 !important;
      transform: none !important;
    }