/*
Theme Name: Block Story
Author: Alexey Yatskiv
Author URI: https://yatskiv.site
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2026
Text Domain: blockstory
*/

*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{line-height:1.5;-webkit-text-size-adjust:100%}body{min-height:100vh;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}button{cursor:pointer;background:none;border:none}a{text-decoration:none;color:inherit}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}


@font-face {
  font-family: 'Google Sans';
  src: url('/wp-content/themes/block-story/assets/fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/block-story/assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --gray: #9695A9;
  --coal: #151515;
  --chalk: #F6F6F6;
  --prpl-fog: #F1ECFF;
  --prpl-light: #A55EEA;
  --prpl: #9D5AE4;
  --prpl-deep: #633CB6;
  --prpl-dark: #5C3CB6;
}


body{
	color: var(--coal);
	background: var(--chalk);
  font-family: 'Google Sans', sans-serif;
}

main{ overflow-x: hidden; }

.blst-page{ padding: 150px 0; }
.blst-page-title{ font-size: 39px; font-weight: 700; text-align: center; margin-bottom: 40px; }

.blst-btn{ display: inline-flex; align-items: center; border-radius: 50px; padding: 17px 35px; font-size: 19px; line-height: 22px; background: var(--prpl-deep); color: var(--white); cursor: pointer; transition: all .3s ease-in; }
.blst-btn:hover{ background: var(--prpl); }

.blst-btn svg rect,
.blst-btn svg path{ transition: all .3s ease-in; }

.blst-btn-alt{ background: var(--prpl); color: var(--white); cursor: pointer; transition: all .3s ease-in; }
.blst-btn-alt:hover{ background: var(--prpl-deep); }

.blst-btn-negative{ background: var(--white); color: var(--coal); cursor: pointer; transition: all .3s ease-in; }
.blst-btn-negative:hover{ background: var(--prpl); color: var(--white); }

.blst-btn-mini{ padding: 10px 25px; font-size: 16px; line-height: 22px; }

.blst-btn-arrow{ padding: 4px 5px 4px 20px; background: var(--white); color: var(--coal); gap: 12px; }
.blst-btn-arrow:hover{ background: var(--prpl-deep); color: var(--white); }
.blst-btn-arrow svg rect{ fill: var(--prpl-deep); }
.blst-btn-arrow:hover svg rect{ fill: var(--white); }
.blst-btn-arrow svg path{ stroke: var(--white); }
.blst-btn-arrow:hover svg path{ stroke: var(--prpl-deep); }


.blst-image-desktop{ display: block; }
.blst-image-mobile{ display: none; }


.ff-montserrat{ font-family: 'Montserrat', sans-serif; }
.fw-black { font-weight: 900 !important; }


//* ===================== */
/* BACKGROUND */
/* ===================== */
.bg-white { background-color: var(--white); }
.bg-coal { background-color: var(--coal); }
.bg-chalk { background-color: var(--chalk); }
.bg-prpl-fog { background-color: var(--prpl-fog); }
.bg-prpl { background-color: var(--prpl); }
.bg-prpl-light { background-color: var(--prpl-light); }
.bg-prpl-deep { background-color: var(--prpl-deep); }
.bg-prpl-dark { background-color: var(--prpl-dark); }

/* HOVER BACKGROUND */
.bg-white-hover:hover { background-color: var(--white)!important; }
.bg-coal-hover:hover { background-color: var(--coal)!important; }
.bg-chalk-hover:hover { background-color: var(--chalk)!important; }
.bg-prpl-fog-hover:hover { background-color: var(--prpl-fog)!important; }
.bg-prpl-hover:hover { background-color: var(--prpl)!important; }
.bg-prpl-light-hover:hover { background-color: var(--prpl-light)!important; }
.bg-prpl-deep-hover:hover { background-color: var(--prpl-deep)!important; }
.bg-prpl-dark-hover:hover { background-color: var(--prpl-dark)!important; }

/* ===================== */
/* TEXT */
/* ===================== */
.text-white { color: var(--white); }
.text-gray { color: var(--gray); }
.text-coal { color: var(--coal); }
.text-chalk { color: var(--chalk); }
.text-prpl-fog { color: var(--prpl-fog); }
.text-prpl { color: var(--prpl); }
.text-prpl-light { color: var(--prpl-light); }
.text-prpl-deep { color: var(--prpl-deep); }
.text-prpl-dark { color: var(--prpl-dark); }

/* HOVER TEXT */
.text-white-hover:hover { color: var(--white)!important; }
.text-coal-hover:hover { color: var(--coal)!important; }
.text-chalk-hover:hover { color: var(--chalk)!important; }
.text-prpl-fog-hover:hover { color: var(--prpl-fog)!important; }
.text-prpl-hover:hover { color: var(--prpl)!important; }
.text-prpl-light-hover:hover { color: var(--prpl-light)!important; }
.text-prpl-deep-hover:hover { color: var(--prpl-deep)!important; }
.text-prpl-dark-hover:hover { color: var(--prpl-dark)!important; }

/* ===================== */
/* BORDER */
/* ===================== */
.border-white { border-color: var(--white); }
.border-coal { border-color: var(--coal); }
.border-chalk { border-color: var(--chalk); }
.border-prpl-fog { border-color: var(--prpl-fog); }
.border-prpl { border-color: var(--prpl); }
.border-prpl-light { border-color: var(--prpl-light); }
.border-prpl-deep { border-color: var(--prpl-deep); }
.border-prpl-dark { border-color: var(--prpl-dark); }

/* HOVER BORDER */
.border-white-hover:hover { border-color: var(--white)!important; }
.border-coal-hover:hover { border-color: var(--coal)!important; }
.border-chalk-hover:hover { border-color: var(--chalk)!important; }
.border-prpl-fog-hover:hover { border-color: var(--prpl-fog)!important; }
.border-prpl-hover:hover { border-color: var(--prpl)!important; }
.border-prpl-light-hover:hover { border-color: var(--prpl-light)!important; }
.border-prpl-deep-hover:hover { border-color: var(--prpl-deep)!important; }
.border-prpl-dark-hover:hover { border-color: var(--prpl-dark)!important; }

/* ===================== */
/* SVG FILL */
/* ===================== */
.fill-white { fill: var(--white); }
.fill-coal { fill: var(--coal); }
.fill-chalk { fill: var(--chalk); }
.fill-prpl-fog { fill: var(--prpl-fog); }
.fill-prpl { fill: var(--prpl); }
.fill-prpl-light { fill: var(--prpl-light); }
.fill-prpl-deep { fill: var(--prpl-deep); }
.fill-prpl-dark { fill: var(--prpl-dark); }

/* HOVER FILL */
.fill-white-hover:hover { fill: var(--white)!important; }
.fill-coal-hover:hover { fill: var(--coal)!important; }
.fill-chalk-hover:hover { fill: var(--chalk)!important; }
.fill-prpl-fog-hover:hover { fill: var(--prpl-fog)!important; }
.fill-prpl-hover:hover { fill: var(--prpl)!important; }
.fill-prpl-light-hover:hover { fill: var(--prpl-light)!important; }
.fill-prpl-deep-hover:hover { fill: var(--prpl-deep)!important; }
.fill-prpl-dark-hover:hover { fill: var(--prpl-dark)!important; }


/* PADDING 20px */
.p-20 { padding: 1.25rem; }
.pt-20 { padding-top: 1.25rem; }
.pb-20 { padding-bottom: 1.25rem; }
.ps-20 { padding-left: 1.25rem; }
.pe-20 { padding-right: 1.25rem; }
.px-20 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-20 { padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* MARGIN 20px */
.m-20 { margin: 1.25rem; }
.mt-20 { margin-top: 1.25rem; }
.mb-20 { margin-bottom: 1.25rem; }
.ms-20 { margin-left: 1.25rem; }
.me-20 { margin-right: 1.25rem; }
.mx-20 { margin-left: 1.25rem; margin-right: 1.25rem; }
.my-20 { margin-top: 1.25rem; margin-bottom: 1.25rem; }


/* PADDING 30px */
.p-30 { padding: 1.875rem; }
.pt-30 { padding-top: 1.875rem; }
.pb-30 { padding-bottom: 1.875rem; }
.ps-30 { padding-left: 1.875rem; }
.pe-30 { padding-right: 1.875rem; }
.px-30 { padding-left: 1.875rem; padding-right: 1.875rem; }
.py-30 { padding-top: 1.875rem; padding-bottom: 1.875rem; }

/* MARGIN 30px */
.m-30 { margin: 1.875rem; }
.mt-30 { margin-top: 1.875rem; }
.mb-30 { margin-bottom: 1.875rem; }
.ms-30 { margin-left: 1.875rem; }
.me-30 { margin-right: 1.875rem; }
.mx-30 { margin-left: 1.875rem; margin-right: 1.875rem; }
.my-30 { margin-top: 1.875rem; margin-bottom: 1.875rem; }


/* PADDING 40px */
.p-40 { padding: 2.5rem; }
.pt-40 { padding-top: 2.5rem; }
.pb-40 { padding-bottom: 2.5rem; }
.ps-40 { padding-left: 2.5rem; }
.pe-40 { padding-right: 2.5rem; }
.px-40 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-40 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* MARGIN 40px */
.m-40 { margin: 2.5rem; }
.mt-40 { margin-top: 2.5rem; }
.mb-40 { margin-bottom: 2.5rem; }
.ms-40 { margin-left: 2.5rem; }
.me-40 { margin-right: 2.5rem; }
.mx-40 { margin-left: 2.5rem; margin-right: 2.5rem; }
.my-40 { margin-top: 2.5rem; margin-bottom: 2.5rem; }


/* ===================== */
/* GAP */
/* ===================== */

/* DEFAULT */
.gap-20 { gap: 1.25rem; }   /* 20px */
.gap-30 { gap: 1.875rem; }  /* 30px */
.gap-40 { gap: 2.5rem; }    /* 40px */


/* ===================== */
/* SM ≥576px */
/* ===================== */

@media (min-width: 576px) {
  .gap-sm-20 { gap: 1.25rem; }
  .gap-sm-30 { gap: 1.875rem; }
  .gap-sm-40 { gap: 2.5rem; }
}


/* ===================== */
/* MD ≥768px */
/* ===================== */

@media (min-width: 768px) {
  .gap-md-20 { gap: 1.25rem; }
  .gap-md-30 { gap: 1.875rem; }
  .gap-md-40 { gap: 2.5rem; }
}


/* ===================== */
/* LG ≥992px */
/* ===================== */

@media (min-width: 992px) {
  .gap-lg-20 { gap: 1.25rem; }
  .gap-lg-30 { gap: 1.875rem; }
  .gap-lg-40 { gap: 2.5rem; }
}


/* ===================== */
/* XL ≥1200px */
/* ===================== */

@media (min-width: 1200px) {
  .gap-xl-20 { gap: 1.25rem; }
  .gap-xl-30 { gap: 1.875rem; }
  .gap-xl-40 { gap: 2.5rem; }
}


/* ===================== */
/* XXL ≥1400px */
/* ===================== */

@media (min-width: 1400px) {
  .gap-xxl-20 { gap: 1.25rem; }
  .gap-xxl-30 { gap: 1.875rem; }
  .gap-xxl-40 { gap: 2.5rem; }
}

/* AXIS */
.row-gap-20 { row-gap: 1.25rem; }
.row-gap-30 { row-gap: 1.875rem; }
.row-gap-40 { row-gap: 2.5rem; }

.column-gap-20 { column-gap: 1.25rem; }
.column-gap-30 { column-gap: 1.875rem; }
.column-gap-40 { column-gap: 2.5rem; }


/* BORDER RADIUS */
.rounded-20 { border-radius: 1.25rem; }   /* 20px */
.rounded-30 { border-radius: 1.875rem; }  /* 30px */
.rounded-40 { border-radius: 2.5rem; }    /* 40px */

/* SIDES */
.rounded-top-20 { border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; }
.rounded-top-30 { border-top-left-radius: 1.875rem; border-top-right-radius: 1.875rem; }
.rounded-top-40 { border-top-left-radius: 2.5rem; border-top-right-radius: 2.5rem; }

.rounded-bottom-20 { border-bottom-left-radius: 1.25rem; border-bottom-right-radius: 1.25rem; }
.rounded-bottom-30 { border-bottom-left-radius: 1.875rem; border-bottom-right-radius: 1.875rem; }
.rounded-bottom-40 { border-bottom-left-radius: 2.5rem; border-bottom-right-radius: 2.5rem; }

/* CORNERS */
.rounded-start-20 { border-top-left-radius: 1.25rem; border-bottom-left-radius: 1.25rem; }
.rounded-start-30 { border-top-left-radius: 1.875rem; border-bottom-left-radius: 1.875rem; }
.rounded-start-40 { border-top-left-radius: 2.5rem; border-bottom-left-radius: 2.5rem; }

.rounded-end-20 { border-top-right-radius: 1.25rem; border-bottom-right-radius: 1.25rem; }
.rounded-end-30 { border-top-right-radius: 1.875rem; border-bottom-right-radius: 1.875rem; }
.rounded-end-40 { border-top-right-radius: 2.5rem; border-bottom-right-radius: 2.5rem; }



#header{ position: fixed; width: calc(100% - 56px); /*max-width: 1390px;*/ top: 23px; left: 50%; transform: translateX(-50%); z-index: 1000; border-radius: 68px; box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.1); transition: all .3s ease-in; }
#header>div{ width: 100%; transition: all .3s ease-in; }
#header.header-sticky{ width: 100%; max-width: 100%; border-radius: 0; top: 0; }
#header>div{ /*max-width: 1374px;*/ margin: 0 auto; }
#header-menu ul li a{ font-size: 17px; line-height: 20px; transition: all .3s ease-in; cursor: pointer; }
#header-logo img{ max-width: 57.4px; }

#header-mobile{ display: none; background: transparent; padding: 23px 34px; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: all .3s ease-in; }
#header-mobile.header-sticky,
body:not(.home) #header-mobile{ background: var(--prpl-deep); }
#header-mobile.transparent{ background: transparent!important; }
#header-mobile-logo{ max-width: 64px; }
#header-mobile-menu{ position: fixed; padding-top: 82px; background: var(--prpl-deep); top: 0; left: 0; right: 0; bottom: 0; display: none; z-index: 1001; }
#header-mobile-menu.active{ display: flex; z-index: -1; }
#header-mobile-menu h2{ font-size: 60px; line-height: 50px; font-weight: 700; margin-bottom: 50px; }
#header-mobile-menu ul{ gap: 20px; }
#header-mobile-menu ul li a{ font-size: 22px; }
#header-mobile-menu li .blst-btn{ background: var(--prpl); }
#blst-menu-toggler-close,
#blst-menu-toggler.active #blst-menu-toggler-open{ display: none; }
#blst-menu-toggler.active #blst-menu-toggler-close{ display: flex; }


.home-section-title{ font-size: 39px; line-height: 42px; font-weight: 700; }

#blst-home-hero{ padding: 123px 0 56px; transform: translateY(14px); width: calc(100% - 28px); /*max-width: 1420px;*/ margin: 0 auto; background: linear-gradient( to bottom, var(--prpl-dark), var(--prpl-light) ); border-radius: 48px; transition: all .3s ease-in; }
#blst-home-hero.full{ width: 100%; max-width: 100%; }
#blst-home-hero h1{ font-size: 58px; line-height: 58px; max-width: 620px; }
#blst-home-hero h2{ font-size: 20px; line-height: 27px; max-width: 630px; }
#blst-home-mobile-hero-title{ font-size: 43px; line-height: 43px; margin-bottom: 15px; max-width: 360px; }
#blst-home-mobile-hero-subtitle{ font-size: 16px; line-height: 18px; max-width: 290px; }
#blst-home-hero-mobile-banner{ display: block; margin-left: 20px; max-width: 373px; margin: 0 auto; }
#blst-home-video{ padding: 114px 0 100px; }
#blst-home-video{ max-width: 980px; margin: 0 auto; }

#blst-home-why-us{ max-width: 1210px; }
#blst-home-why-us-inner>div:nth-child(2){max-width: 580px;}
#blst-home-why-us h2{ font-size: 39px; line-height: 42px; padding: 18px 39px; margin-bottom: 21px; border-radius: 18px; }
#blst-home-why-us-inner ul{ gap: 20px; }
#blst-home-why-us-inner ul li img{ width: 90px; height: 90px; }
#blst-home-why-us-inner ul li h3{ font-size: 26px; line-height: 28px; }
#blst-home-why-us-inner ul li p{ font-size: 20px; line-height: 27px; margin-bottom: 0; }
#blst-home-why-us-inner ul li p a{ text-decoration: underline; }


#blst-home-how-works{ max-width: 1210px; padding: 100px 0 0; }
#blst-home-how-works ul{ padding: 29px 85px 58px; gap: 0; }
#blst-home-how-works ul li div{ width: 68px; height: 68px; font-size: 47px; line-height: 21px; margin-bottom: 28px; margin-top: 29px; }
#blst-home-how-works ul li h3{ font-size: 26px; line-height: 28px; font-weight: 700; margin-bottom: 10px; }
#blst-home-how-works ul li p{ font-size: 20px; line-height: 27px; margin-bottom: 0; }
#blst-home-how-works ul li p a{ text-decoration: underline; }

#blst-home-how-works ul li:nth-child(1){ width: 200px; margin-right: 80px; }
#blst-home-how-works ul li:nth-child(2){ width: 248px; margin-right: 12px; }
#blst-home-how-works ul li:nth-child(3){ width: 225px; margin-right: 37px; }
#blst-home-how-works ul li:nth-child(4){ width: 207px; }

#blst-home-how-works-poster { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; }

#blst-home-how-works-poster img { width: 100%; height: auto; position: absolute; bottom: -58px; left: 50%; transform: translateX(-50%); }




#blst-home-products{ padding: 100px 0; max-width: 1210px; margin: 0 auto; }
#blst-home-products-inner{ padding: 0; }
#blst-home-products-list{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blst-home-product{ padding: 16px 18px; background: var(--white); border-radius: 10px; }
.blst-home-product-gallery{ position: relative; aspect-ratio: 1.17; background: var(--prpl); border-radius: 10px; margin-bottom: 20px; }
.blst-home-product-gallery-track{ position: absolute; inset: 0; }
.blst-home-product-gallery-image { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .3s ease-in; border-radius: 10px; }
.blst-home-product-gallery-image.active { opacity: 1; }
.blst-home-product-gallery-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; background: var(--prpl-light); border-radius: 50%; transition: all .3s ease-in; z-index: 1; }
.blst-home-product-gallery-nav:hover{ background: var(--prpl-deep); }
.blst-home-product-gallery-nav svg{ max-width: 10px; }
.blst-home-product-gallery-nav svg path{ fill: var(--chalk); }
.blst-home-product-gallery-prev{ left: 12px; }
.blst-home-product-gallery-next{ right: 12px; }
.blst-home-product-title{ font-size: 26px; line-height: 28px; font-weight: 700; margin-bottom: 10px; color: #2B2B2B; }
.blst-home-product p{ font-size: 18px; line-height: 23px; color: #6B6B6B; margin-bottom: 0; }
.blst-home-product-actions{ display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.blst-home-product-price{ font-size: 26px; line-height: 28px; font-weight: 700; color: #2B2B2B; }

#blst-home-gallery{ max-width: 1210px; margin: 0 auto; }
#blst-home-gallery-inner{ background: #fff; padding: 40px 66px; margin-bottom: 120px; border-radius: 40px; }
#blst-home-gallery-inner .home-section-title{ margin-bottom: 40px!important; }
#blst-home-gallery-slider .slick-slide{ aspect-ratio: 1.09; background-position: center; background-size: cover; background-repeat: no-repeat; }
#blst-home-gallery-slider .slick-slide { margin-right: 18px; }
#blst-home-gallery-slider .slick-list { margin-right: -18px; }
#blst-home-gallery-nav{ display: flex; justify-content: center; align-items: center; margin-top: 30px; gap: 14px; }
.blst-gallery-nav{ width: 46px; height: 46px; background: var(--prpl); border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all .3s ease-in; }
.blst-gallery-nav:hover{ background: var(--prpl-deep); }
.blst-gallery-nav svg path{ fill: var(--chalk); transition: all .3s ease-in; }


#blst-aboutus-page-content{ font-size: 20px; line-height: 27px; }

#blst-terms-page-content h2,
#blst-privacy-page-content h2{ font-size: 26px; line-height: 28px; margin-bottom: 20px; font-weight: 700 }
#blst-terms-page-content p,
#blst-privacy-page-content p{ font-size: 20px; line-height: 27px; margin-bottom: 20px; }

#blst-faq-list li{ cursor: pointer; }
#blst-faq-list li h3{ margin-bottom: 0; text-wrap: wrap; font-size: 26px; font-weight: 700; }
#blst-faq-list li div{ display: none; border-top: 1px solid var(--prpl); padding-top: 16px; text-wrap: wrap; }
#blst-faq-list li.active{ background: var(--white)!important; }
#blst-faq-list li.active h3{ padding-bottom: 16px; }
#blst-faq-list li.active div{ display: block; padding-top: 16px; font-size: 20px;  }
#blst-faq-list svg{ transform: rotate(90deg); transition: all .3s ease-in; }
#blst-faq-list li.active svg{ transform: rotate(-90deg); }
#blst-faq-list svg rect{ fill: var(--prpl); }
#blst-faq-list svg path{ stroke: var(--white); }

#blst-terms-page-content h2,
#blst-privacy-page-content h2{ font-size: 22px; line-height: 27px; margin-bottom: 0; font-weight: 700 }
#blst-terms-page-content p,
#blst-privacy-page-content p{ font-size: 20px; line-height: 27px; margin-bottom: 0; }


.blst-instruction-block h2{ font-size: 26px; line-height: 28px; font-weight:700; }
#blst-instruction-block-1 img{ margin: 0 auto; }

#blst-generator-page.blst-page{ padding: 110px 0; }
.blst-generator-step{ display: none; }
.blst-generator-step.active{ display: flex; }

#blst-generator-step-code{ min-height: 425px; max-width: 780px; }
#blst-generator-step-code h2{ font-size: 26px; line-height: 28px; font-weight: 700; margin-bottom: 10px; }
#blst-generator-step-code h3{ font-size: 20px; line-height: 27px; font-weight: 400; margin-bottom: 20px; color: var(--gray); }
#blst-generator-step-code input{ background: var(--chalk); border: 1px solid var(--gray); border-radius: 12px; color: var(--gray); font-size: 20px; line-height: 27px; padding: 15px; margin-bottom: 20px; text-align: center; cursor: pointer; transition: all .3s ease-in; max-width: 225px; }
#blst-generator-step-code input::placeholder{ color: var(--gray); opacity: 1; }
#blst-generator-step-code input:hover,
#blst-generator-step-code input:focus{ border-color: var(--prpl); }

#blst-generator-step-file>h2{ font-size: 39px; line-height: 42px; font-weight: 700; margin-bottom: 10px; }
#blst-generator-step-file>h3{ font-size: 26px; line-height: 28px; margin-bottom: 33px; font-weight: 700; }
#blst-generator-step-file>h4{ font-size: 20px; line-height: 27px; font-weight: 400; color: var(--gray); margin-bottom: 40px; max-width: 460px; margin: 0 auto 40px; }
#blst-generator-file-area{ min-height: 380px; max-width: 780px; cursor: default;  border-radius: 20px;
  background: var(--prpl-fog); border: 2px solid transparent;
  background-clip: padding-box; background-image: linear-gradient(var(--prpl-fog), var(--prpl-fog)), repeating-linear-gradient(
      45deg, var(--prpl-deep) 0px, var(--prpl-deep) 20px, transparent 20px, transparent 36px); background-origin: padding-box, border-box; background-clip: padding-box, border-box; background-repeat: no-repeat; position: relative; transition: all .3s ease-in;
}
#blst-generator-file-area.dragover{ opacity: .7; transform: scale(1.05); }
#blst-generator-file-area img{ max-width: 85px; display: block; margin: 0 auto 40px; }
#blst-generator-file-area h3{ color: var(--prpl-deep); font-size: 26px; line-height: 28px; font-weight: 700; margin-bottom: 10px; }
#blst-generator-file-area h4{ color: var(--gray); font-size: 20px; line-height: 27px; margin-bottom: 20px;  }
#blst-generator-file-area input{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index:-1; }

#blst-generator-step-product>h2{ font-size: 39px; line-height: 42px; font-weight: 700; margin-bottom: 10px; }
#blst-generator-step-product>h3{ font-size: 26px; line-height: 28px; margin-bottom: 37px; font-weight: 700; }
#blst-generator-step-product ul{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
#blst-generator-step-product ul li{ border-radius: 12px; padding: 55px 70px 24px; }
#blst-generator-step-product ul li:nth-child(2){ padding-top: 74px; }
#blst-generator-step-product ul li:nth-child(3){ padding-top: 34px; }
#blst-generator-step-product ul li:nth-child(1) img{ margin-bottom: 49px; }
#blst-generator-step-product ul li:nth-child(2) img{ margin-bottom: 73px; }
#blst-generator-step-product ul li:nth-child(3) img{ margin-bottom: 41px; }
#blst-generator-step-product ul li h3{ font-size: 26px; line-height: 28px; font-weight: 700; margin-bottom: 10px; }
#blst-generator-step-product ul li div{ color: var(--gray); font-size: 20px; line-height: 27px; font-weight: 400; margin-bottom: 20px; }

#blst-generator-crop{ width: 482px; height: 482px; background: rgb(99, 60, 182, 0.5); }
/* затемнение вокруг crop области */
.cropper-view-box{ outline: 4px solid var(--chalk); !important; outline-color: var(--chalk); !important; }
/* линии сетки */
.cropper-dashed{border-color: rgba(255,255,255,.7) !important; }
/* центральные линии */
.cropper-center::before,
.cropper-center::after{ background-color: var(--chalk); !important; }
.cropper-point{  background-color: transparent !important; }
/* рамка crop области */
.cropper-line{ background-color: var(--chalk); !important; }
/* Находим слой, который находится ВНЕ рамки кроппера */
.cropper-modal { background-color: rgb(99, 60, 182, 0.5) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); will-change: backdrop-filter; opacity: 1 !important; }
#blst-generator-crop-adjust{ background: var(--white); border-radius: 116px; padding: 10px 28px; gap: 15px; }

#blst-generator-result-svg{ height: 390px; }
#blst-generator-result-svg svg,
#blst-generator-result-svg img{ max-width: 100%; max-height: 100%; display: block; }
#blst-generator-result-thumbs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; border-radius: 17px; overflow: hidden; width: 440px; max-width: 100%; margin: 0 auto 20px; }
#blst-generator-result-thumbs canvas{ width: 100%; border-radius: 17px; cursor: pointer; border: 3px solid transparent; box-sizing: border-box; }
#blst-generator-result-thumbs canvas.active{ border: 3px solid var(--prpl-deep); }


#blst-checkout-wrapper{  }
#blst-checkout-left { flex: 1 1 0; min-width: 0; }
#blst-checkout-right { flex: 0 0 auto; width: 100%; max-width: 430px; }
.blst-checkout-group{ padding: 25px; }
.blst-checkout-group h2{ font-size: 26px; line-height: 28px; font-weight: 700; margin-bottom: 15px; }
.blst-checkout-group .blst-checkout-col{  }
.blst-checkout-group .blst-checkout-row{  }
.blst-checkout-row label{ position: relative; padding-top: 18px; }
.blst-checkout-row label span{ position: absolute; top: 8px; left: 25px; padding: 0 14px; font-size: 18px; line-height: 18px; color: var(--gray); background: var(--white); z-index: 1; }
.blst-checkout-row input[type="text"],
.woocommerce-input-wrapper input[type="text"]{ border: 2px solid var(--gray); border-radius: 8px; min-height: 50px; width: 100%; padding-left: 25px; padding-right: 25px; font-size: 18px;  }
.blst-checkout-row input[type="text"]::placeholder,
.woocommerce-input-wrapper input[type="text"]::placeholder{ opacity: 0; }
.blst-checkout-group .zen-ui-select__value{ min-height: 50px; border: 2px solid var(--gray); border-radius: 8px; color: var(--coal); font-size: 18px; line-height: 30px; }
#wcus-billing-fields p{ margin-bottom: 15px; }
.wcus-checkout-fields h3{ display: none; }
/*.woocommerce-checkout-payment .wc_payment_methods*/
.wcus-checkout-np-fields p:last-of-type{ margin-bottom: 0!important; }
#wcus-order-total-mobile{ display: none; }
#blst-payment-switch{ gap: 12px; }
#blst-payment-switch label{ padding: 16px 22px; border: 2px solid var(--gray); border-radius: 8px; font-size: 18px; line-height: 18px; height: 50px; cursor: pointer; transition: all .3s ease-in; }
#blst-payment-switch label:has(input:checked),
#blst-payment-switch label:hover{ background: var(--prpl-fog); border-color: var(--prpl-deep) }

#blst-checkout-product{ display: flex; justify-content: space-between; align-items: start; gap: 20px; }
#blst-checkout-product-image{ width: 184px; height: 184px; border-radius: 15px; background-position: center; background-size: cover; }
#blst-checkout-product-order{  }
#blst-checkout-product-order h3{ font-size: 22px; line-height: 27px; font-weight: 700; margin-bottom: 14px; }
#blst-checkout-product-order div,
#blst-checkout-product-order h4{ font-size: 16px; line-height: 22px; font-weight: 400; color: var(--gray); }
#blst-checkout-product-order h4{ margin-bottom: 11px; }
#blst-checkout-product-order div{ margin-bottom: 8px; }
#blst-checkout-product-order div p{ margin-bottom: 0; }
#blst-checkout-product-order section{ display: flex; max-width: 100px; border: 1px solid var(--gray); height: 36px; border-radius: 8px; justify-content: space-between; align-items: center; padding: 3px; font-size: 18px; line-height: 18px; font-weight: 700; }
#blst-checkout-product-order section span{ display: inline-flex; cursor: pointer; text-align: center; width: 30px; height: 100%; justify-content: center; align-items: center; transition: all .3s ease-in; }
#blst-checkout-product-order section span:hover{ background: var(--prpl-fog); }
#blst-checkout-product-qty-decrease{ border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
#blst-checkout-product-qty-increase{ border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
#blst-checkout-product-order section input{ display: inline-flex; pointer-events: none; text-align: center; max-width: 20px; font-size: 18px; line-height: 18px; font-weight: 700; border: none; box-shadow: none;  }
.place-order{ background: var(--white); }
button#place_order{ font-size: 22px; line-height: 28px; font-weight: 700; }
#blst-checkout-secure{ gap: 18px; }
#blst-checkout-secure svg{ width: 40px; height: 40px; }
#blst-checkout-secure span{ flex-wrap: wrap; font-size: 16px; line-height: 18px; color: var(--gray); }
#blst-checkout-order-data{margin: 34px 0 34px; padding: 18px 0; border-top: 1px solid var(--gray); border-bottom: 1px solid var(--gray); display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 18px; }
#blst-checkout-order-cost,
#blst-checkout-order-delivery{ display: flex; justify-content: space-between; align-items: center; width: 100%; }
#blst-checkout-order-data h3,
#blst-checkout-order-data span{ font-size: 16px; line-height: 23px; font-weight: 400; color: var(--gray); margin-bottom: 0; }
#blst-checkout-order-data ul{ padding: 0; margin: 0; }
#blst-checkout-order-delivery-info{ display: flex; align-items: center; gap: 15px;  }
#blst-checkout-order-delivery-info svg{ width: 25px; }

#wcus-order-total-mobile-wrapper{ display: none; }
#blst-checkout-order-total{ display: flex; justify-content: space-between; align-items: center; padding: 0px 0px 22px; }
#blst-checkout-order-total h3{ font-size: 22px; line-height: 25px; font-weight: 700; margin-bottom: 0; }
#blst-checkout-order-total span{ font-size: 30px; line-height: 33px; font-weight: 700; }
#wcus-order-total-mobile-wrapper{ margin-bottom: 0!important; margin-left: 30px; }
#wcus-order-total-mobile-wrapper span{ font-size: 17px; line-height: 26px; font-weight: 700; color: var(--coal); white-space: nowrap; }

#blst-thank-you{ padding: 116px 30px 66px; margin-top: 50px; box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1); max-width: 944px;   }
#blst-thank-you img{ position: absolute; width: 103px; height: 103px; top: -51px; left: 50%; transform: translateX(-50%); z-index: 1; }
#blst-thank-you h1{ font-size: 26px; line-height: 28px; font-weight: 700; margin-bottom: 24px; }
#blst-thank-you h2{ font-size: 20px; line-height: 26px; font-weight: 400; margin-bottom: 20px; }
#blst-thank-you ul li{ font-size: 20px; line-height: 25px; margin-bottom: 5px; }
#blst-thank-you ul li strong{ font-weight: 700; }

#footer{ padding-top: 90px; padding-bottom: 90px; }
#footer ul li a{ font-size: 20px; line-height: 27px; }
#footer ul li a:hover{ opacity: 0.7 }
#footer-menu-social svg path,
#footer-menu-contacts svg path{ transition: all .3s ease-in; }
#footer-menu-social a:hover svg path,
#footer-menu-contacts a:hover svg path{ opacity: 0.7; }
#footer-logo-text{ margin-top: 87px; }


@media (max-width: 1400px) {

}

@media (max-width: 1200px) {
  #blst-home-how-works ul{ padding: 29px; }
  #blst-home-how-works ul li:nth-child(1){ width: 215px; margin-right: 15px; }
  #blst-home-how-works-poster img{ bottom: -29px; }

  #blst-generator-step-product ul{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  #blst-generator-step-product ul li{ border-radius: 12px; padding: 55px 40px 24px; }
}

@media (max-width: 991px) {

  .blst-btn{ font-size: 18px; }
  #blst-home-hero-cta{ font-size: 16px; }

  .blst-page{ padding: 120px 0 80px; }
  .blst-page-title{ font-size: 35px; line-height: 35px; margin-bottom: 52px; }
  #blst-aboutus-page-content{ font-size: 18px; line-height: 26px; }
  .blst-instruction-block h2{ font-size: 32px; line-height: 35px; }

  .blst-image-desktop{ display: none; }
  .blst-image-mobile{ display: block; }


  #header{ display: none; }
  #header-mobile{ display: flex; }

  #blst-home-video{ padding: 50px 0; }

  #blst-home-hero{ width: 100%; border-radius: 0px; padding-bottom: 0; transform: none; background: var(--prpl-deep); }
  .home-section-title{ font-size: 28px; line-height: 32px; }

  #blst-home-why-us h2{ background: transparent; color: var(--coal); margin: 50px auto 30px; padding: 0!important; border-radius: 0!important; font-size: 28px; line-height: 32px; max-width: 320px; }
  #blst-home-why-us-inner ul li img{ width: 60px; height: 60px; }
  #blst-home-why-us-inner ul li h3{ font-size: 18px; line-height: 18px; }
  #blst-home-why-us-inner ul li p{ font-size: 16px; line-height: 21px; }

  #blst-home-how-works{ padding-top: 50px; max-width: 610px; }
  #blst-home-how-works ul{ padding: 36px 30px; }
  #blst-home-how-works ul li:nth-child(1){ width: 100%; margin-right: 0; }
  #blst-home-how-works ul li:nth-child(2){ width: 100%; margin-right: 0; }
  #blst-home-how-works ul li:nth-child(3){ width: 100%; margin-right: 0; }
  #blst-home-how-works ul li:nth-child(4){ width: 100%; margin-right: 0; }
  #blst-home-how-works ul li p{ margin-bottom: 24px; font-size: 16px; line-height: 21px; }
  #blst-home-how-works ul li:nth-child(4) p{ margin-bottom: 0; }
  #blst-home-how-works ul li div{ margin-bottom: 25px; margin-top: 0; width: 58px; height: 58px; font-size: 42px; }
  #blst-home-how-works ul li h3{ font-size: 18px; line-height: 18px; margin-bottom: 8px; }

  #blst-home-products{ padding: 50px 0 20px; }
  #blst-home-products-inner{ padding: 0; }
  #blst-home-products-list{ grid-template-columns: repeat(1, 1fr); gap: 30px; }
  .blst-home-product-title,
  .blst-home-product-actions{ font-size: 24px; line-height: 26px; }
  .blst-home-product p{ font-size: 16px; line-height: 21px; }

  #blst-home-gallery-inner{ padding: 30px 0px; background: transparent; margin-bottom: 20px; }
  #blst-home-gallery-inner .slick-slide{ border-radius: 10px; }

  #footer{ padding: 35px 0 20px; }
  #footer ul li a{ font-size: 16px; line-height: 32px; }
  #footer-logo-text{ margin-top: 40px; }

  #blst-faq-list li{ padding: 20px!important; }
  #blst-faq-list li h3{ font-size: 24px; line-height: 28px!important; }
  #blst-faq-list li h3 svg{ width: 35px; height: 35px!important; }
  #blst-faq-list li.active div{ font-size: 14px; line-height: 18px; }

  #blst-generator-step-code{ min-height: 310px; }
  #blst-generator-step-code h2{ font-size: 20px; line-height: 18px; }
  #blst-generator-step-code h3{ font-size: 16px; line-height: 21px; max-width: 235px;  }
  #blst-generator-step-code input{ font-size: 18px; line-height: 18px; }
  #blst-generator-step-file>h2{ font-size: 22px; line-height: 25px; margin-bottom: 5px; }
  #blst-generator-step-file>h3{ color: #6B6B6B; font-size: 18px; font-weight: 18px; margin-bottom: 30px; }
  #blst-generator-file-area{ min-height: 300px; }
  #blst-generator-file-area img{ max-width: 55px; margin-bottom: 20px; }
  #blst-generator-file-area h3{ font-size: 20px; line-height: 20px; margin-bottom: 10px; }
  #blst-generator-file-area h4{ font-size: 16px; line-height: 21px; margin-bottom: 20px; }
  #blst-generator-step-product>h3{ font-size: 22px; line-height: 25px; margin-bottom: 30px; max-width: 175px; }
  #blst-generator-step-product ul{ grid-template-columns: repeat(1, 1fr); gap: 19px; }
  #blst-generator-step-product ul li{ padding: 22px !important; margin: 0 auto; width: 100%; max-width: 320px; }
  #blst-generator-step-product ul li img{ margin-bottom: 20px !important; }
  #blst-generator-step-product ul li h3{ font-size: 20px; line-height: 24px; margin-bottom: 10px; }
  #blst-generator-step-product ul li div{ font-size: 16px; line-height: 21px; margin-bottom: 30px; }
  #blst-generator-crop{ width: 320px; height: 320px; margin-top: 30px!important;  }
  #blst-generator-result-thumbs{ grid-template-columns: repeat(2, 1fr); gap: 15px; }
  #blst-generator-result-svg{ height: auto; }


  #blst-checkout-wrapper{ flex-direction: column-reverse; max-width: 700px; margin: 0 auto; }
  #blst-checkout-left,
  #blst-checkout-right{ flex: 0 0 auto; max-width: 100%; width: 100%; }
  #blst-checkout-right>.blst-checkout-group{ padding: 18px 12px; }
  #blst-checkout-product{ justify-content: start; }
  #blst-checkout-order-data,
  #blst-checkout-order-total,
  .place-order,
  #blst-checkout-right h2{ display: none; }
  #blst-checkout-product{ gap: 12px; }

  #blst-checkout-product-order h3{ font-size: 18px; line-height: 25px; margin-bottom: 0; font-weight: 600; }
  #blst-checkout-product-order div,
  #blst-checkout-product-order h4{ font-size: 13px; line-height: 16px; }
  #blst-checkout-product-image{ width: 175px; height: 144px;  }
  #wcus-order-total-mobile-wrapper{ display: block; }

  #place_order_mobile{ font-size: 18px; line-height: 22px; font-weight: 700; }

  #blst-thank-you{ padding: 50px 16px 25px;   }
  #blst-thank-you img{ position: absolute; width: 64px; height: 64px; top: -32px; }
  #blst-thank-you h1{ font-size: 20px; line-height: 25px; font-weight: 700; margin-bottom: 10px; }
  #blst-thank-you h2{ font-size: 16px; line-height: 21px; margin-bottom: 16px; max-width: 370px; }
  #blst-thank-you ul li{ font-size: 16px; line-height: 21px; margin-bottom: 5px; }

}





@media (max-width: 768px) {
  .blst-page{ padding: 110px 0 70px; }
  .blst-page-title{ font-size: 22px; line-height: 25px; margin: 0 auto 30px; max-width: 275px; }
  #blst-terms-page-content h2, #blst-privacy-page-content h2,
  #blst-terms-page-content p, #blst-privacy-page-content p{ font-size: 16px; line-height: 21px;  }
  #blst-aboutus-page-content{ font-size: 16px; line-height: 21px; }
  .blst-instruction-block h2{ font-size: 20px; line-height: 28px; }
  #blst-faq-list li{ padding: 11px 13px 11px 19px!important; }
  #blst-faq-list li h3{ font-size: 18px; line-height: 22px!important; }
  #blst-faq-list li h3 span{ max-width: 260px; }
  #blst-faq-list li h3 svg{ width: 25px; height: 25px!important; }

  #header-mobile{ padding: 18px 29px; }
  #header-mobile-logo{ max-width: 58px; }
  #header-mobile-menu{ padding-top: 67px; }
  #header-mobile-menu h2{ font-size: 50px; line-height: 50px; margin-bottom: 20px; }
  #blst-checkout-product-order section span{ width: 25px; }
  #blst-checkout-product-order section{ font-size: 16px; }
  #wcus-order-total-mobile-wrapper{ margin-left: 10px; font-size: 16px; }
}

@media (max-width: 640px) {

}

@media (max-width: 575px) {
    
}