@font-face {
  font-family: 'Rubik';
  src: url('./fonts/Rubik-Light.woff2') format('woff2'),
       url('./fonts/Rubik-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('./fonts/Rubik-Regular.woff2') format('woff2'),
       url('./fonts/Rubik-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('./fonts/Rubik-Bold.woff2') format('woff2'),
       url('./fonts/Rubik-Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*,*::before,*::after {box-sizing:border-box}
body {margin:0; padding:0; font-family:'Rubik',sans-serif; font-weight:300; background:#fff; color:#111; font-size: 16px}
h1,h2,h3 {margin-top:0}
h1 {font-size:2.2rem; margin-bottom:50px; line-height:1.2}
.container {width:100%; max-width:1300px; margin:0 auto; padding:0 20px}
main ul {list-style:none; padding-left:0; margin-left:0; line-height:1.6}
main ul li {position:relative; margin-bottom:8px; padding-left:40px}
main ul li::before {content:""; position:absolute; left:0; top:0.5rem; width:10px; height:10px; border:2px solid #3960ff; border-radius:50%; background-color:transparent}
header,footer {padding:20px 0}
.site-branding,.site-link {display:flex; align-items:center; text-decoration:none; color:inherit}
.logo-image {max-height:100px; height:auto; width:auto}
.site-text {display:flex; flex-direction:column; margin-left:20px}
.site-title {font-size:2rem; font-weight:bold; margin:0}
.site-description {font-size:0.9rem; margin:0}
.main-nav {margin-top:10px; padding-top:10px}
.main-nav-wrapper {border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding-bottom:20px}
.main-menu {list-style:none; display:flex; gap:30px; margin:0; padding:0}
.main-menu li {display:inline-block}
.main-menu a {text-decoration:none; font-weight:500; transition:color 0.3s ease; color:#333}
.main-menu a:hover {color:#EA3F3F}
.burger {display:none}
.home-banner {position:relative; width:100%; height:400px; padding:80px 0; color:#000; display:flex; align-items:center; overflow:hidden; background-color:#fff}
.banner-content {max-width:1300px; width:100%; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:15px; position:relative; z-index:1}
.home-banner_img {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; z-index:0}
.banner-content h1,.banner-content p {background-color:rgba(255,255,255,0.85); padding:10px 20px; border-radius:6px; margin:0; color:#000}
.home-banner h1 {font-size:2rem}
.home-banner .banner-content p {font-size:1.2rem; margin-bottom:25px}
.hello, .home-products-title {font-size:1.8rem; margin:1rem 0 3rem}
.home-content {padding:40px 0}
.btn,.btn-blue,.btn-ozon,.btn-wb,.btn-ym {display:inline-block; font-weight:500; border-radius:5px; text-decoration:none; color:#fff; user-select:none; cursor:pointer; transition:0.3s ease; box-shadow:0 2px 5px rgba(0,0,0,0.2); text-align:center}
.btn-ozon,.btn-wb,.btn-ym {width:120px; padding:12px 10px}
.btn-blue {background-color:#0073e6; padding:12px 30px}
.btn-blue:hover {background-color:#005bb5}
.btn-ozon {background-color:#005BFF}
.btn-wb {background-color:#DF34D1}
.btn-ym {background-color:#FF5226}
.btn-ozon:hover,.btn-wb:hover,.btn-ym:hover {opacity:0.8; color:#fff}
.single-product.container {margin-top:40px}
.single-product .breadcrumbs {font-size:0.8rem; color:#666; margin-bottom:10px}
.single-product .short-description {font-size:1rem; color:#333; line-height:1.4; margin:20px 0 50px}
.single-product .market-buttons {margin-top:20px; display:flex; gap:10px; flex-wrap:wrap}
.product-wrapper {display:flex; flex-wrap:nowrap; align-items:flex-start; margin-bottom:60px; gap:80px}
.product-images {display:flex; flex-wrap:nowrap; align-items:flex-start; gap:10px}
.product-gallery {width:80px; display:flex; flex-direction:column; flex-shrink:0; gap:10px}
.product-gallery img {width:70px; height:70px; border-radius:5px; cursor:pointer; object-fit:cover; box-shadow:0 2px 6px rgba(0,0,0,0.15); border:2px solid transparent; transition:border-color 0.3s ease}
.product-gallery img:hover {border-color:#005BFF}
.product-gallery figure {margin:0 0 5px}
.product-main-image {flex:1; max-width:500px; overflow:hidden}
.product-main-image img {width:100%; height:auto; display:block; border-radius:5px}
.product-details {flex:1; display:flex; flex-direction:column; gap:15px}
.single-product .full-description {max-width:800px; margin:0 auto 80px; font-size:1rem; line-height:1.6; color:#222; box-sizing:border-box}
.description-title {font-size:1.1rem; font-weight:400; text-align:center; margin-bottom:10px}
.description-separator {border:none; border-top:1px solid #ccc; width:200px; margin:0 auto 40px}
.container p {font-size:1rem; line-height:1.6; margin:0 0 1.5rem}
.container p a,.page-content a,.clearfy-cookie a {color:#3960ff; text-decoration:underline; transition:color 0.2s ease}
.container p a:hover,.page-content a:hover,.clearfy-cookie a:hover {text-decoration:none}
.page-content .sitemap a {text-decoration:none}
.page-content .sitemap a:hover {color:#EA3F3F}
.container blockquote {border-left:4px solid #ccc; padding-left:1em; color:#555; margin:1.5em 0; font-style:italic}
.container .breadcrumbs a {color:#666; text-decoration:none; transition:color 0.3s ease}
.container .breadcrumbs a:hover {color:#f43c33}
.breadcrumbs {display: flex; align-items: center; flex-wrap: wrap;}
.breadcrumb-item a {text-decoration: none; color: inherit;}
.breadcrumb-separator {margin: 0 8px; }
.site-footer {background-color:#f8f8f8; padding:40px 0; font-size:0.9rem; color:#333}
.footer-widgets {display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px}
.footer-column {flex:1 1 22%; min-width:200px}
.footer-column:first-child {flex:2 1 26%}
.footer-name {font-size:1rem; font-weight:400; margin-bottom:10px}
.footer-column p {margin:4px 0; line-height:1.4}
.footer-contact {text-align:right; line-height:1.4}
.footer-contact a {color:#3960ff}
.footer-contact a:hover {text-decoration:none}
.footer-contact .footer-phone {font-size:1.1rem}
.footer-contact .footer-email {margin-top:10px}
.footer-contact .footer-hours {font-size:0.8rem; color:#666}
.footer-column.second-third-wrapper {flex:1 1 47%; display:flex; gap:30px}
.footer-column.center {text-align:center; flex:1 1 50%}
.footer-column.center .footer-menu-wrapper {display:inline-block; text-align:left}
.footer-menu {list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.footer-menu a {color:#333; text-decoration:none; transition:color 0.3s}
.footer-menu a:hover {color:#f43c33}
.footer-bottom {padding-top:20px}
.category-page {margin-top:50px}
.category-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem; padding:0 0 4rem; width:100%}
.category-item {display:flex; flex-direction:column; background:#fff; padding:1rem 1rem 2rem; border-radius:5px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:transform 0.3s ease,box-shadow 0.3s ease; position:relative; color:inherit; text-decoration:none}
.category-item:hover {transform:translateY(-5px); box-shadow:0 6px 16px rgba(0,0,0,0.12)}
.category-arrow {font-size:1.5rem; color:#0073e6; position:absolute; bottom:1rem; right:1rem; opacity:0; transition:opacity 0.3s ease}
.category-item:hover .category-arrow {opacity:1}
.category-thumb {display:block; width:100%; height:auto; border-radius:5px; object-fit:cover;}
.category-item-title {font-size:1rem; margin:1.5rem 0 0.5rem}
.category-excerpt {font-size:0.95rem; color:#555; margin-bottom:1rem}
.category-item-link {display:block; color:inherit; text-decoration:none}
.category-item-link:hover .category-item {transform:translateY(-5px); box-shadow:0 6px 16px rgba(0,0,0,0.12); transition:transform 0.3s ease,box-shadow 0.3s ease}
.page-content {margin:50px auto 80px}
.page-content h2 {margin:3rem 0 2rem; font-size:1.8rem}
.page-content.container ul {max-width:800px; margin:2.5rem 0}
.clearfy-cookie--right {max-width: 350px !important}
.clearfy-cookie {font-size: 14px !important; line-height: 1.6}
.clearfy-cookie-accept {display: block; margin: .5em auto .5em !important; padding: .4em 1em !important; transition:0.3s ease}
.clearfy-cookie-accept:hover {background-color:#005bb5}
@media (max-width:1024px) {.footer-column.second-third-wrapper {flex:1 1 30%; display:flex; flex-direction:column; gap:10px}
 .footer-column.center {width:100%}
 .footer-column.center .footer-menu-wrapper {text-align:center}
 .footer-column:first-child {flex:2 1 28%}
 .footer-widgets {gap:10px}
 .footer-menu {align-items:center}
 .category-grid {grid-template-columns:repeat(3,1fr)}
 .product-images {flex-direction:column; max-width:40%}
 .product-main-image {order:1}
 .product-gallery {order:2; margin-right:0; width:100%}
 .product-gallery > .gallery {display:flex !important; flex-wrap:wrap; gap:8px; justify-content:space-between}
 .product-gallery > .gallery figure {flex:0 1 calc(25% - 8px); margin:0}
 .product-gallery img {width:100%; height:auto; border-radius:5px; cursor:pointer; object-fit:cover; display:block}
 .single-product h1 {font-size:1.8rem}
 .btn-ozon,.btn-wb,.btn-ym {width:110px; padding:12px 0; font-size:0.9rem}
 .single-product .breadcrumbs {margin-bottom:0}
 .single-product .short-description {margin:0 0 30px}
 .category-item {padding:0.8rem 0.8rem 1.5rem}
}
@media (max-width:768px) {h1 {font-size:1.8rem; margin-bottom:30px}
 .page-content h2 {font-size:1.6rem}
 header {border-bottom:1px solid #ccc}
 .main-nav-wrapper {overflow:hidden; max-height:0; transition:max-height 0.3s ease; padding:0; margin:0; border:none; z-index:1000; position:relative}
 .burger {display:flex; flex-direction:column; justify-content:space-around; width:30px; height:25px; background:transparent; border:none; cursor:pointer; padding:0; margin-left:auto; z-index:1100; position:relative}
 .burger-line {display:block; width:100%; height:3px; background-color:#333; border-radius:2px; transition:all 0.3s ease}
 header .container {display:flex; align-items:center; gap:15px}
 .burger.active .burger-line:nth-child(1) {transform: rotate(45deg) translate(5px, 5px)}
 .burger.active .burger-line:nth-child(2) {opacity: 0}
 .burger.active .burger-line:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px)}
 .burger-line {transition: all 0.3s ease}
 .main-menu {flex-direction:column; gap:15px; padding:10px 0}
 .main-menu li {display:block; text-align:left}
 .main-menu a {display:block; padding:10px 15px; color:#333; border-radius:4px; transition:background 0.2s ease}
 .main-nav-wrapper.open {max-height:500px; padding-bottom:20px; border-bottom:1px solid #ccc}
 .logo-image {max-height:60px}
 .site-title {font-size:1.5rem}
 .site-description {font-size:0.8rem}
 .home-banner {padding:40px 0; height:auto; background-position:center top}
 .banner-content {gap:10px}
 .banner-content h1 {font-size:1.8rem; line-height:1.2}
 .btn-blue {font-size:0.9rem; padding:10px 20px}
 .hello {font-size:1.6rem; margin:1rem 0 2.6rem}
 .site-footer {padding:30px 0}
 .footer-widgets {flex-direction:column; align-items:center; text-align:center; gap:30px; padding:20px 15px}
 .footer-column {width:100%}
 .footer-column.center {text-align:center}
 .footer-menu-wrapper {width:100%}
 .footer-menu li {margin:0}
 .footer-contact {text-align:center; width:100%}
 .footer-bottom {text-align:center}
 .category-grid {grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 0 3rem}
 .category-item {min-width:0}
 .product-wrapper {flex-direction:column; gap:1.5rem; align-items:center}
 .product-details {width:100%; max-width:100%; gap:1rem; margin-left:0}
 .single-product .buy {text-align:center}
 .single-product .market-buttons {justify-content:center}
 .single-product .short-description {margin:0 0 15px}
 .product-images {max-width:300px}
 .category-item {padding:0.8rem 0.8rem 1.2rem}
 .page-content a {word-break:break-word}
}
@media (max-width:480px) {h1,.single-product h1 {font-size:1.6rem; word-break:break-word}
 .page-content {margin-bottom:50px}
 .single-product .full-description {margin:0 auto 60px}
 .page-content h2 {font-size:1.4rem; word-break:break-word}
 .single-product .short-description ul li {margin-bottom:4px}
 .banner-content {gap:8px}
 .banner-content h1 {font-size:1.2rem}
 .home-banner .banner-content p {font-size:0.9rem; line-height:1.3}
 .category-item-title {font-size:0.9rem}
 .category-item {padding:0}
 .category-page,.page-content {margin-top:40px}
 .category-grid {padding:0.8rem 0 3rem}
}