/*!
Theme Name: ToyShop
Theme URI: https://github.com/Jeyzik
Author: Jeyzik (Wonder Web)
Author URI: https://github.com/Jeyzik
Description: ToyShop theme
Version: 1.0.0
Requires PHP: 8.1
Requires MySQL: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: starter-theme
Tags: custom-logo, carbon-fields, e-commerce, multi language

This theme, like WordPress, is licensed under the GPL.

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

Here is where you can add your own CSS to the starter theme.

--------------------------------------------------------------*/


.hero .holder .swiper .swiper-wrapper .swiper-slide .image{
width: 100%;
}

.contact_address{
max-width: 290px;
}

@media (max-width: 500px){
	.contact_address{
		max-width: 161px;
	}
}

.hero .image .desktop-image {
    display: block;
}

.hero .image .mobile-image {
    display: none;
}

/* Mobile: hide desktop, show mobile */
@media (max-width: 768px) {
    .hero .image .desktop-image {
        display: none !important;
    }
    
    .hero .image .mobile-image {
        display: block !important;
    }
}

/* If only desktop image exists (no mobile), show desktop on mobile too */
@media (max-width: 768px) {
    .hero .swiper-slide:not(.has-mobile) .desktop-image {
        display: block !important;
    }
}


.blog-container .posts .post .image img{
max-height: 360px;
}

.product-details .holder .info .current-tags .availability.out-of-stock::before{
	    background: #FF0000;
    --dot-color: #FF0000;
}
.product-details .holder .info .current-tags .tag.hit{
	background: #ff8fc7;
}

.empty-state{
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}


/* SEARCH */


/* Состояния поиска */
.search .found-items {
    display: none;
}

.search-loading,
.no-results,
.search-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: #666;
}

.loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #FF8FC7;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.search-error {
    color: #dc3545;
}

.no-results {
    color: #6c757d;
}

/* Кнопка и иконка очистки */
.search .search-clear {
    display: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    z-index: 10;
}

.search .clear-icon {
    display: none;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
}

.search .field {
    position: relative;
}

.product-details .holder .info .colors .lists{
	flex-wrap: wrap;
}


.bread-crumbs .holder{
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap !important;

  /* скрыть скроллбар */
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
.bread-crumbs .holder::-webkit-scrollbar{
  display: none;              /* Chrome/Safari/Opera */
}

.bread-crumbs .holder a {
white-space: nowrap;
}

#smmix-article table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 16px 0;
}

#smmix-article th,
#smmix-article td{
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.12);
  text-align: left;
  vertical-align: top;
}

#smmix-article th{
  font-weight: 600;
  background: rgba(0,0,0,.03);
}

#smmix-article tbody tr:nth-child(even){
  background: rgba(0,0,0,.02);
}

.single-post .info-holder h2{
margin-bottom: 32px!important;
}

.single-post .info-holder h3{
	margin-bottom: 24px!important;
}


@media (max-width: 500px){
.single-post .info-holder h2{
margin-bottom: 24px!important;
}

.single-post .info-holder h3{
	margin-bottom: 16px!important;
}

}

.single-post .info-holder ul,
.single-post .info-holder ol{
	margin: 24px 0;
}

.single-post .info-holder a{
	color: #ff8fc7!important;
	text-decoration: underline;
	font-weight: 600!important;
}