.shorts-page {
    background-color: #000;
    color: #fff;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1400px) {
    .shorts-page {
        padding: 5dvh 3dvh;
        display: block;
    }
}
.shorts-page a {
    color: #fff;
}
.shorts-content {
    display: flex;
    justify-content: center;
}
@media (min-width: 1200px) {
    .shorts-content {
        justify-content: space-between;
    }
}
.shorts-aside-column {
    display: none;
	transition:opacity 0.5s ease;
}
@media (min-width: 1400px) {
    .shorts-aside-column {
        display: block;
    }
}
.back-btn {
    padding: 0;
    padding: 4px;
}
.back-btn:hover {
    color: #EF7D00;
}
.back-btn:hover > svg {
    fill: #EF7D00;
}
.shorts-search-box {
    position: relative;
}
.shorts-search-box input {
    margin-right: -72px;
    border: none;
    background-color: #313131;
    color: #fff;
}
.shorts-search-box input:focus, .shorts-search-box input:active {
    background-color: #313131;
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    border: 1px solid #EF7D00;
}
.shorts-search-box input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}
.shorts-search-box .btn-search {
    background-color: #313131;
    border-color: #fff;
}
.shorts-search-box input:focus + .btn-search, .shorts-search-box input:active + .btn-search {
    background-color: #EF7D00;
    border-color: #EF7D00;
}
.shorts-search-box .icon-clear {
    position: absolute;
    right: 75px;
    top: calc(50% - 10px);
}
.shorts-categorys-box {
    display: none;
	overflow-x:hidden !important;
}
.shorts-categorys {
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 18px;
}
@media (min-width: 1400px) {
    .shorts-categorys-box {
        display: block;
    }
}
@media (min-width: 1600px) {
    .shorts-categorys {
        max-width: 400px;
    }
}
.shorts-subcategorys {
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
}
.shorts-categorys a:hover {
    color: #EF7D00;
}
.shorts-categorys a:hover + svg {
    stroke: #EF7D00;
}

/* =========================
   SWIPER / SLIDES FIX
   ========================= */
.shorts-slider-wrapper {
    height: 100dvh;
    overflow: hidden;
    position: relative;
}
@media (min-width: 576px) {
    .shorts-slider-wrapper {
        height: 90dvh;
        display: flex;
    }
}

/* Swiper container/wrapper must have fixed height */
.shorts-slider {
    height: 100%;
    overflow: hidden;
}
.shorts-slider .swiper-wrapper {
    height: 100%;
}
.shorts-slider .swiper-slide {
    height: 100%;
}

/* KEY: slide = 100% height, NO margin-bottom (it breaks snapping) */
.shorts-slider-item {
    height: 100% !important;
    margin: 0 !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-height: 0;
    box-sizing: border-box;

    padding-bottom: 14px; /* вместо margin-bottom: 5dvh */
}

/* Video area takes all free space, title always stays visible */
.shorts-video-container {
    flex: 1 1 auto;
    min-height: 0;

    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;
    order: 1;
}

.shorts-video-player {
    max-width: 100%;
    max-height: 100%;
}

/* Mobile: fit by width */
@media (max-width: 575.98px) {
    .shorts-video-player {
        width: 100%;
        height: auto;
        height: 83dvh;
    }
}

/* Desktop: fit by height */
@media (min-width: 576px) {
    .shorts-video-container {
        width: fit-content;
    }
    .shorts-video-player {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
}

/* Title must not be pushed out */
.short-title {
    flex: 0 0 auto;
    order: 2;

    text-align: center;
    font-size: 0.875rem;

    margin: 12px 0 0;
    padding: 0 16px;

    width: 100%;
    max-width: 600px;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
@media (min-width: 576px) {
    .short-title {
        font-size: 1.25rem;
    }
}

/* =========================
   Buttons / UI
   ========================= */
.shorts-buttons {
    position: absolute;
    top: 8px;
    right: 4px;
    height: 100%;
	}
.shorts-navigation {
    position: absolute;
    top: calc(50% - 74px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    text-align: center;
    width: fit-content;
    gap: 48px;
}
.shorts-nav-button, .shorts-share-button, .back-btn-mobile {
    pointer-events: all;
    background-color: rgba(49, 49, 49, 0.75);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
	z-index:111;
}
@media (min-width: 1400px) {
    .shorts-buttons {
        position: static;
    }
    .shorts-nav-button, .shorts-share-button {
        background-color: rgb(49, 49, 49);
    }
}
.shorts-nav-button {
    rotate: 90deg;
}

.back-btn-mobile {
    position: absolute;
    top: 8px;
    left: 4px;
}
@media (min-width: 1400px) {
    .back-btn-mobile {
        display: none;
    }
}

/* =========================
   Products panel
   ========================= */
.shorts-cards {
    background-color: #313131;
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 0;
    border-radius: 8px;
    padding: 0.5rem;
    display: none;
    overflow-y: auto;
    transition: height 0.7s ease-in;
}
@media (max-width: 1400px) {
    .shorts-cards::-webkit-scrollbar {
        width: 0;
    }
}
@media (min-width: 768px) {
    .shorts-cards {
        width: 90%;
        left: 5%;
        height: 90dvh;
        padding: 1rem 10%;
    }
}
@media (min-width: 1400px) {
    .shorts-cards {
        position: static;
        max-width: 300px;
        display: flex;
        padding: 1rem;
    }
}
@media (min-width: 1600px) {
    .shorts-cards {
        max-width: 350px;
        margin-left: 0;
    }
}
.shorts-card-img-box {
    max-width: 160px;
}
.shorts-cards-title {
    text-align: center;
}
.shorts-cards-close-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
}
@media (min-width: 1400px) {
    .shorts-cards-close-icon {
        display: none;
    }
}
.shorts-card-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-bottom: 12px;
    font-size: 0.875rem;
}
.hover-orange-icon:hover svg {
    stroke: #EF7D00;
}
.hover-orange-fill-icon:hover svg path{
    fill: #EF7D00;
}
.hover-orange-icon svg, .hover-orange-fill-icon svg path {
    transition: all 0.3s ease;
}
.shorts-card .product-card-price {
    font-size: 1.125rem;
    font-weight: 500;
}
.shorts-cards-mobile-btn {
    position: absolute;
    bottom: 4px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    width: 100%;
    cursor: pointer;
}
@media (min-width: 1400px) {
    .shorts-cards-mobile-btn {
        display: none;
    }
}
.cards-mobile-text {
    padding: 4px 8px;
}
.shorts-cards-mobile {
    background-color: rgba(49, 49, 49, 0.9);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
}
.shorts-cards-grid {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shorts-cards-mobile .product-card {
    background-color: #000;
    color: #fff;
}
.shorts-cards-mobile .product-card .product-card-title {
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.img-rounded {
    border-radius: 9px!important;
    overflow: hidden;
}

.swiper-slide-next,
.swiper-slide-prev {
	opacity:0;
}

/* left menu accordion */
.shorts-cat-toggle{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.shorts-cat-title {
	color:#fff;
	padding-bottom:15px;
}
.shorts-cat-toggle:hover .shorts-cat-title{
    color: #EF7D00;
}
.shorts-cat-toggle:hover .shorts-cat-chevron{
    stroke: #EF7D00;
}

.shorts-cat-chevron{
    transition: transform .2s ease;
}

.shorts-cat-item > .shorts-subcategorys{
    display: none; /* по умолчанию скрыто */
}

.shorts-cat-item.is-open > .shorts-subcategorys{
    display: flex; /* раскрыто */
}

.shorts-cat-item.is-open .shorts-cat-chevron{
    transform: rotate(180deg);
}

.shorts-cat-item .shorts-categorys {
	padding-left:30px !important;;
}



/* Filters accordion (left menu) */
.shorts-filter {
    margin-bottom: 14px;
}

.shorts-filter-toggle{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
    text-align: left;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
}
.shorts-filter-toggle span {
	color:#fff !important;
}

.shorts-filter-toggle:hover{
    color: #EF7D00;
}
.shorts-filter-toggle:hover .shorts-filter-chevron{
    stroke: #EF7D00;
}

.shorts-filter-chevron{
    transition: transform .2s ease;
}

.shorts-filter-body{
    display: none;
    margin-top: 12px;
}

.shorts-filter.is-open .shorts-filter-body{
    display: block;
}

.shorts-filter.is-open .shorts-filter-chevron{
    transform: rotate(180deg);
}

.shorts-filter-count{
    opacity: .6;
    margin-left: 6px;
    font-size: 14px;
}


.shorts-filter-item{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.shorts-filter-item input{
  width:16px;
  height:16px;
  accent-color:#EF7D00;
}
.shorts-filter-body .shorts-categorys{
  gap:10px;
}

.shorts-filter-item{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.shorts-filter-item input{
	display:none;
  width:16px;
  height:16px;
  accent-color:#EF7D00;
}
.shorts-filter-item input:checked + span {
	color:#EF7D00;
}
.shorts-filter-item.is-disabled{
  opacity:.35;
  cursor:not-allowed;
}
.shorts-filter-item.is-disabled span{
  text-decoration:none;
}
.shorts-aside-column {
	min-width:280px;
}

.shorts-categorys-box .shorts-categorys {
	padding-left:8px !important;
	font-size:16px;
	gap:8px;
}

.shorts-categorys-box > h5 {
	display:flex;
	gap:5px;
	align-items:center;
}
.shorts-categorys-box > h5:before {
	content:'';
	width:25px;
	height:25px;
	background:url(/images/icon-filter.svg) no-repeat center center;
	background-size:25px;
}

.favourite-add--active svg {
	display:none;
}
.favourite-add--active img {
	display:block !important;
}
.incart path {
	fill:#EF7D00 !important;
}

.shorts-aside-close {
	display:none;
}

.mobile-buttons {
	display:none;
	flex-direction:column;
	gap:20px;
	padding-left:4px;
	position:absolute;
	left:0;
	top:100px;
	z-index:110;
}
.mobile-buttons .show-filters {
    border: none;
    padding: 10px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
	background:url(/images/icon-filter.svg) no-repeat center center rgba(49, 49, 49, 0.75);
	background-size:30px;
}


@media(min-width:1200px) {
	
	.shorts-page {
		/*overflow:auto;*/
	}
	
	.shorts-categorys-box {
		/*max-height:520px;
		max-height:calc(100% - 235px);*/
		max-height:74dvh;
		overflow:auto;
		max-width:100%;
		width:350px;
	}
}


.shorts-slider .swiper-wrapper {
	max-width:100%;
	width:750px;
}

@media(max-width:768px) {
	
	.shorts-slider .swiper-wrapper {
		width:100vw;
		
	}
	.short-title {
		order:1;
		margin-bottom:20px;
		width:calc(100% - 100px);
		margin:auto;
		padding-bottom:15px;
	}
	.shorts-video-container {
		order:2;
	}
	
	.shorts-navigation {
		display:none;
	}
	
	.shorts-buttons {
		position:absolute;
        right: 6px;
        top: 6px;
	}
	
	.shorts-slider-item {
		height:100% !important;
	}
	
	.shorts-cards-mobile-btn {
		z-index:55;
	}
	#shorts-products-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.shorts-cards{
		z-index:111;
	}
	
	.mobile-buttons {
		display:flex;
		z-index:100;
	}
	
	.shorts-aside-column {
		display:block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 20px;
		z-index: 112;
		background: #000;
		transform: translateX(-100%);
		transition: transform 0.4s ease;
	}

	.shorts-aside-column.show {
		transform: translateX(0);
	}
	
	.show .shorts-categorys-box {
		display:block;
		max-height:68dvh;
		overflow:auto;
	}
	
	.shorts-aside-close {
		position:absolute;
		right:15px;
		top:15px;
		z-index:11;
		display:block;
	}
	
	
	.mobile-search {
		height:45px;
	}
	.mobile-search form{
		display:none;
		transform: translateX(-100%);
		transition: transform 0.4s ease;
		position: absolute;
		left: 0;
		top: 0;
		width: 98vw;
		height: 45px;
		z-index: 55;
	}
	.mobile-search.show form {
		transform: translateX(0);
		padding-left:4px;
	}
	.mobile-search > .btn-search {
		background-color: rgba(49, 49, 49, 0.75);
		border: none;
		padding: 10px;
		border-radius: 50%;
		width: 45px;
		height: 45px;
	}
	.mobile-search.show > .btn-search {
		display:none;
	}
	
	.mobile-search form .btn-search svg {
		position:relative;
		top:-3px;
	}
	
	.shorts-aside-column .shorts-search-box {
		display:none !important;
	}
	
	.shorts-cards-title {
		padding-top:20px;
	}
	.shorts-cards-close-icon {
		top:28px;
	}

}

@media (min-width: 748px) and (max-width: 1400px) {
    .short-title {
        order: 0 !important;
		
    }
	.shorts-cards-mobile-btn {
		bottom:-8px;
		background:#000;
		z-index:5;
	}
	
	.shorts-cards {
		z-index:111;
	}
}

/* чтобы вертикальные свайпы отдавались правильно */
.shorts-slider,
.shorts-slider .swiper-wrapper,
.shorts-slider .swiper-slide {
  touch-action: pan-y;
}

/********************************/

.shorts-iframe-wrap {
  position: relative;
  display: inline-block; /* подстраивается под размеры iframe */
  height:100%;
  width:max-content;
}

.shorts-iframe-overlay {
  display: none; /* по умолчанию скрыто (desktop) */
}

@media (max-width: 575.98px) {
  .shorts-iframe-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    touch-action: pan-y; /* жест отдаём вертикальному свайпу */
  }

  /* Когда “разблокировали” — убираем шторку и даём тапать по iframe */
  .shorts-iframe-wrap.is-unlocked .shorts-iframe-overlay {
    display: none;
  }
}