/* ==================================================
   Single product — refactored
   Media query order preserved: 1280 → 1024 → 768 → 590
   ================================================== */

/* Base layout */


.single-stock-quantity {
  display: none;
}




.single-first-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.single-content-area {
  margin-bottom: var(--minimum);
}

/* Image gallery */
.single-image-viewport {
  margin: var(--offset-usual) var(--offset-usual) 0;
}

.single-image-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--offset-usual);
}

.single-main-image-container {
  position: relative;
  order: 2;
  width: 480px;
  border-radius: var(--radius-maximum);
}

.single-icon-share {
  position: absolute;
  top: var(--offset-usual);
  right: var(--offset-usual);
}

.single-main-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: var(--offset-usual);
  background: var(--color-box-top);
  border-radius: var(--radius-maximum);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.wp-post-image {
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.single-image-mini-container {
  gap: var(--minimum);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#single_exitvideobtn {
  position: absolute;
  display: none;
  top: var(--minimum);
  right: var(--minimum);
  z-index: 3;
  filter: invert(0);
  transition: filter .2s;
}

#single_exitvideobtn:hover {
  filter: invert(1);
}

.noindex-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: var(--minimum);
  right: var(--minimum);
  z-index: 1;
  gap: 5px;
}

.noindex-container span {
  z-index: 1;
}

.share-btn-container {
  cursor: pointer;
}

.thumbnail-video {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-box-top);
  border: 2px solid var(--color-light-gray);
}

/* Thumbnails line */
.thumbnails-flex-line {
  display: flex;
  flex-direction: column;
  width: auto;
  max-height: 410px;
  gap: var(--offset-usual);
  overflow: scroll;
  padding: 4px;
}

.custom-product-thumbnail {
  min-width: 120px;
  background-color: var(--color-background);
  border-radius: var(--radius-maximum);
  box-shadow: var(--shadow-small);
  transition: all .15s;
}

.custom-product-thumbnail:hover {
  box-shadow: var(--shadow-medium-active);
}

.single-mini-image {
  width: auto;
  max-height: 120px;
  margin: auto;
  padding: 10px;
}

/* Description */
.single-item-description-container {
  margin-top: var(--offset-usual);
}

.single-item-description-scroll {
  height: auto;
  overflow: hidden;
  transition: height .5s ease-in-out;
  text-align: justify;
}

.description-expand-btn {
  margin: var(--minimum) 0;
}

#description-btn {
  cursor: pointer;
}

.single-youtube-container {
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-maximum);
  overflow: hidden;
}

/* Info block */
.single-info {
  min-height: 280px;
  width: auto;
  padding: var(--offset-usual);
  background: var(--color-box-middle);
  border-radius: var(--radius-maximum);
  box-shadow: var(--shadow-medium);
  transition: all .3s;
}

.single-info-li {
  margin-bottom: 10px;
}
.single-info-li p {
  color: var(--color-black);
}
.single-sku {
  text-align: right;
}
.single-info-li p,
.single-sku {
  margin: 0;
}
.woocommerce-Price-amount, #login_variable_price {
  color: var(--color-red);
  white-space: nowrap;
  margin: 0;
}
.single-sku,
.single-info-heading,
.single-info-li,
.single-info-price,
.single-info-heading-min {
  padding-left: var(--minimum);
}

.single-info-price {
  margin:0;
}

.single-info-heading {
  text-transform: capitalize;
  margin: 40px 0px 20px 0px;
  font-size: var(--fontsize-biggest);
  text-transform: uppercase;
}

.single-info-heading-min {
  margin: 0 0 40px;
  color: var(--color-grey);
  line-height: 24px;
  font-weight: 400;
  font-size: var(--fontsize-usual);
  letter-spacing: 0.03em;
}
#login_simple_price {
  margin: 0;
}
/* Quantity / counter / cart */
.single-counter-btn,
.single-counter-info {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-minimum);
  color: var(--color-black);
  font-size: var(--fontsize-biggest);
  border: 1px solid var(--color-gray);
  transition: all .15s;
  user-select: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--fontsize-biggest);
}

#hover {
  position: absolute;
  z-index: 2;
  display: none;
  width: 25%;
  height: 47px;
  background: transparent;
  opacity: .5;
}
.price-btn-container {
    display: flex;

    justify-content: space-between;
    margin-top: 40px;
    align-items: center;
    gap: var(--offset-usual);

}

.single-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.single-cart-btn:hover {
  background-color: var(--color-black) !important;
}

.single-cart-btn:hover svg path {
  fill: white;
  color: white;
  transition: all .15s;
}

.single-counter-btn:hover {
  color: var(--color-white) !important;
  background-color: var(--color-red-active) !important;
  border-color: var(--color-red);
}
.single-counter-btn:hover svg path{
  fill: var(--color-white);
}

.add_to_cart_button {
  width: 100%;
  color: white;
  padding: 6px 30px;
  height: auto;
}
.add_to_cart_button:hover h3{
  color: var(--color-white);
}
.single-info-btn-container-min {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  width: 100%; 
}

.single-quantity-container {
  display: flex;
  gap: var(--offset-usual);
  width: 100%;
  height: 40px;
}

#quantity_current {
  width: 100%;
}

/* Purchase buttons */
.single-info-btn-container {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--offset-usual);
  width: 100%;
  padding: 0 20px 0 0;
}

.single-btn {
  font-weight: bold;
  text-transform: uppercase;
  border-radius: var(--radius-minimum);
}

.single-btn h3 {
  margin: 0;
  text-align: center;
}

.btn-wb,
.btn-ozon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: all .15s;
}

.btn-wb {
  border: 2px solid var(--color-wb-single);
}

.btn-ozon {
  border: 2px solid var(--color-ozon-single);
}

.btn-wb:hover {
  background-color: var(--color-wb-single);
}

.btn-ozon:hover {
  background-color: var(--color-ozon-single);
}

.btn-wb-inactive,
.btn-ozon-inactive {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 2px solid var(--color-light-gray);
  background-color: var(--color-box-base);
}

.btn-wb h3,
.btn-ozon h3 {
  color: var(--color-black);
  font-weight: 200;
}

.btn-wb-inactive h3,
.btn-ozon-inactive h3 {
  margin: 1rem;
  color: var(--color-grey);
  font-weight: 200;
  cursor: default;
}

.btn-wb:hover h3,
.btn-ozon:hover h3 {
  color: var(--color-white);
}

/* Other variations */
.single-other-heading {
  margin-top: var(--offset-usual);
  text-align: center;
}

#single_description_mobile {
  display: none;
}

.single-other-mini {
  height: auto;
  max-height: 100px;
  margin: auto;
  width: auto;
  object-fit: contain;
}

.single-other-mini-image-container {
  height: auto;
  padding: 11px;
  background-color: var(--color-box-top);
  border-radius: var(--radius-medium);
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-small);
}

.single-item-other-variation-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: var(--offset-usual);
  width: auto;
  min-height: 175px;
  padding: 0 20px 20px;
}

.single-item-other-variation {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: var(--offset-usual);
}

.single-other-mini-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: 110px;
  transition: all .15s;
}

.single-other-mini-container:hover {
  transform: scale(1.05);
}

.single-other-mini-container p {
  width: 90px;
  margin: 10px 0 0;
  text-align: center;
}

.single-item-heading {
  margin-top: var(--offset-usual);
}

/* Size / color variations */
.single-size-item {
  width: 60px;
  padding: 10px;
  border: 1px solid var(--color-dark-gray);
  border-radius: var(--radius-minimum);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-dark-gray);
  background-color: var(--color-box-top);
  box-shadow: var(--shadow-small);
  transition: all .15s;
  cursor: pointer;
}

.single-size-item:hover {
  box-shadow: var(--shadow-medium-active);
}

.single-size-item-selected {
  color: var(--color-white) !important;
  background-color: var(--color-red-active);
  border-color: var(--color-red);
}

.product-size-variations,
.product-color-variations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
}

.single-typeof-heading {
  margin-top: 20px;
  margin: var(--offset-biggest);
  text-align: center;
}

.single-description-heading {
  margin-bottom: var(--offset-usual);
}

/* Mobile variation buttons */
.single-item-other-variation-min {
  display: none;
}

.single-other-variation-mobile {
  display: flex;
  align-items: center;
  min-height: 80px;
  margin-bottom: 0;
  padding: 5px;
  border: 1px solid var(--color-dark-gray);
  border-radius: var(--radius-minimum);
  text-align: center;
  color: var(--color-dark-gray);
  background: transparent;
}

/* Misc */
.storefront-product-pagination {
  display: none;
}

.single-info-btn-container-market {
  display: flex;
  margin-top: 20px;
}

.video-js.vjs-fluid {
  height: 100%;
}

.single-videobtn-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.vjs-big-play-button {
  border-radius: 20px !important;
  background-color: black !important;
  transition: background-color .3s !important;
}

.vjs-big-play-button:hover {
  background-color: white !important;
}

.video-js .vjs-control-bar {
  background-color: black !important;
}

.in-cart {
  border: 1px solid var(--color-red);
  color: var(--color-red);
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
  }
}

.once {
  width: 96%;
}

.fixed {
  position: fixed;
  top: 130px;
  display: none;
  width: 521px;
  text-align: left;
}

/* .single-mobile-variations-container {
  display: none;
} */

.single-variable-price {
  display: block;
}

.single-item-other-variation-container-mobile {
  display: none;
}

#num,
#sep {
  display: none;
}

#text {
  font-size: var(--fontsize-biggest);
}
#btn_variable {
    padding: 6px 0;
}
#btn_variable:hover {
  background-color: var(--color-red-active);
  border: 1px solid var(--color-red);

}
#btn_variable:hover #text {
  color: var(--color-white);
}
#btn_variable #text {
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.single-bottom-line {
    border-bottom: 1px solid var(--color-black);
    width: 1px;
    margin: 0 auto 0 auto;
    transition: width 1s;

    display: none;
}


/* Стили для кнопки "Показать все" */
.alternative-show-more-container {
    text-align: center;
    margin-top: 15px;
}

.alternative-show-more-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.alternative-show-more-btn:hover {
    background: #e8e8e8;
    border-color: #ccc;
}

.alternative-show-more-icon {
    font-size: 10px;
    transition: transform 0.3s ease;
}

/* Скрытые элементы */
.alternative-item.alternative-hidden {
    display: none;
}

/* Анимация появления */
.alternative-item {
    transition: opacity 0.3s ease;
}

/* Mini PC */
@media screen and (max-width: 1280px) {
  .main {
    max-width: 1000px;
  }

  .single-mini-image,
  .single-image-mini {
    width: 120px;
  }

  .single-image-mini {
    height: 360px;
  }

  .single-main-image-container {
    width: 400px;
    height: 400px;
  }

  .single-info {
    min-height: 300px;
  }

  .single-btn {
    height: 50px;
    padding: 4px;
  }

  .single-info-price {
    margin: var(--offset-usual) 0;
  }

  .single-item-other-variation-container {
    width: auto;
    margin-top: var(--offset-usual);
  }

  .icon-share {
    width: 20px;
    height: 20px;
  }

  .single-other-mini {
    width: 105px;
  }

  .thumbnails-flex-line {
    max-height: 335px;
  }

  .custom-product-thumbnail,
  .single-mini-image {
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: contain;
  }

  .custom-product-thumbnail {
    padding: 5px;
  }

  .btn-wb a h3,
  .btn-ozon a h3 {
    font-size: 28px;
  }
}

@media screen and (max-width: 1100px) {
  .main {
    max-width: 880px;
    width: auto;
    background-color: transparent;
    box-shadow: none;
  }

  .single-content-area {
    margin: auto;
    margin-top: 0;
  }

  .single-first-grid {
    margin: 0 20px;
    grid-template-rows: 1fr;
    grid-template-columns: auto;
  }

  .single-image-viewport {
    margin: auto;
  }

  .single-image-container {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr;
    height: auto;
    overflow: hidden;
    margin-bottom: var(--offset-usual);
    gap: var(--offset-usual);
  }
  .single-sku {
    text-align: left;
  }
  .single-image-mini-container {
    height: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    flex-direction: row;
  }

  .single-main-image-container {
    width: auto;
    height: auto;
    max-width: 500px;
    aspect-ratio: 1 / 1;
  }

  .single-image-mini {
    width: auto;
    height: auto;
    max-width: 560px;
  }

  .wp-post-image {
    width: 100%;
    margin: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }


  .flex-col-center {
    order: 1;
    max-height: 560px;
  }

  .thumbnails-flex-line {
    display: flex;




    flex-direction: column;
    justify-content: space-between;
    gap: var(--offset-usual);
    width: 100%;
    height: 100%;

    max-height: 530px;
    padding: 0;
    justify-content: center;
  }
  .single-info-heading {
    margin: 20px 0px;
  }
  .price-btn-container {
    margin: var(--offset-biggest) 0px 0px;
  }
  .thumbnails-flex-line:has(> .custom-product-thumbnail:nth-child(2):last-child) > .custom-product-thumbnail {
    max-width: 230px;
    width: 50%;
    display: block;
  }

  .custom-product-thumbnail {
    width: auto;
    min-width: 100px;
    max-width: 180px;
    aspect-ratio: 1 / 1;
  }

  .single-mini-image {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .single-info {
    background-color: transparent;
    box-shadow: var(--shadow-medium);
    padding: 0;
    width: auto;
    min-height: 100px;
    border: none;
  }
  .single-mobile-sub-container {
    padding: var(--offset-biggest);
    margin-bottom: 0;
    background: var(--color-box-middle);
    border-radius: var(--radius-maximum) var(--radius-maximum) 0px 0px;
    box-shadow: var(--shadow-medium);
    border-radius: 20px;
  }
  .single-typeof-heading {
    text-align: left;
    margin-left: 0;
  }
  .single-size {
    border-radius: 0px 0px  var(--radius-maximum) var(--radius-maximum);
  }
  .storefront-breadcrumb {
    margin-top: 70px;
  }

  .single-sku,
  .single-info-heading,
  .single-info-li,
  .single-info-price {
    padding-left: 10px;
  }

  #single_description,
  .single-item-other-variation-min {
    display: none;
  }

  .single-item-other-variation-min {
    justify-content: space-between;
    gap: var(--offset-smallest);
    margin-top: 20px;
  }

  #single_description_mobile {
    display: block;
  }

  #single_description h4,
  #single_description_mobile h4 {
    margin-left: 15px;
  }

  #info-container,
  .col-md-8 {
    margin: 0;
    padding: 0 15px;
    text-align: justify;
    font-size: 14px;
  }

  .single-item-description-container {
    margin-top: 10px;
  }

  .description-expand-btn {
    justify-content: center;
  }

  .single-item-other-variation-container {
    width: auto;
    justify-content: center;
  }

  .single-size-item {
    font-size: var(--fontsize-usual);
    font-weight: 400;
  }

  .single-typeof-heading {
    margin-top: 0;
  }

  .single-youtube-container {
    display: none;
  }

  #num,
  #sep {
    display: block;
  }

  /* #login_variable_price {
    display: none;
  } */

  .fixed {
    top: auto;
    bottom: 80px;
    width: 95%;
    margin: 0 20px;
    text-align: center;
  }

  .fixed .single-info {
    min-height: 80px;
  }

  .fixed .single-sku,
  .fixed ul {
    display: none;
  }

  .fixed .single-info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .fixed .single-info-container * {
    margin: 0;
  }
  .icon-rotate-0 {
    transform: rotate(0deg);
  }
  .icon-rotate-90 {
    transform: rotate(90deg);
  }
  .icon-rotate-180 {
    transform: rotate(180deg);
  }
  .icon-rotate-270 {
    transform: rotate(270deg);
  }
}

/* Mobile */
@media screen and (max-width: 1100px) {
  .main {
    width: 100%;
    background-color: transparent;
    box-shadow: none;
  }
  .single-bottom-line {
    display: block;
  }
  .single-other-mini-container {
    max-width: 100px;
  }

  .single-item-other-variation-container {
    min-height: 130px;
    gap: var(--offset-small);
  }

  .single-info-price {
    margin: 0 0;
  }

  .single-variation-price-FADE,
  .single-variable-price,
  .single-variable-container,
  .single-price {
    display: none;
  }

  .single-price,
  .single-variable-price {
    margin: 0;
  }

  .single-mobile-variations-container {
    display: block;
  }

  .single-content-area,
  .single-first-grid {
    margin: 0;
  }

  .single-first-grid {
    gap: var(--offset-usual);
  }

  .thumbnails-flex-line {
    flex-direction: row;
  }

  #single_description_mobile {
    margin: var(--offset-usual) var(--offset-usual) var(--minimum);
  }

  #single_description_mobile h4 {
    margin: 0 0 var(--minimum);
  }

  .description-expand-btn {
    margin: var(--minimum) 0 0;
  }

  .single-other-heading {
    margin-top: var(--minimum);
  }

  .single-sku,
  .single-info-heading,
  .single-info-li,
  .single-info-price,
  .single-info-btn-container-min,
  .single-info-heading-min {
    padding-left: 0;
  }

  .flex-col-center {
    margin-bottom: 0;
  }


  .single-item-other-variation-min {
    display: flex;
  }

  .single-item-other-variation-min a {
    width: 100%;
  }

  .single-other-variation-mobile {
    background-color: var(--color-box-top);
    border: 0;
  }

  .single-image-container {
    grid-template-columns: auto;
    margin-bottom: 0;
    aspect-ratio: 0;
  }

  .single-image-mini-container {
    order: 2;
  }

  .custom-product-thumbnail {
    min-width: 100px;
    background: var(--color-box-top);
  }

  /* В исходнике селектор был написан без запятой, поэтому сохранён как descendant.
     Если имелось в виду применение к обоим блокам, замените на:
     .single-main-image, .thumbnails-flex-line */
  .single-main-image .thumbnails-flex-line {
    flex-direction: row;
    height: auto;
    width: 100%;
    padding: 0;
  }

  .single_pangination {
    display: none;
  }
  .product-size-variations {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 0;
  }
  .product-size-variations,
  .product-color-variations {
    gap: var(--offset-usual);
  }

  .product-size-variations span,
  .product-color-variations span {
    padding: 5px 0;
    border-radius: 10;
  }

  .size_item {
    width: 100%;
  }
}


/* Сбрасываем отступы у p внутри li, чтобы точки были ровными */
.single-info-li p.attr-row {
    display: flex;
    align-items: baseline;
    margin: 0 0 8px 0;
    padding: 0;
    font-size: var(--fontsize-usual);
    line-height: 1.5;
}

/* Левая метка (Материал:) */
.single-info-li .attr-label {
    flex: 0 0 auto;
    color: var(--color-black);
    white-space: nowrap;
}

/* Правое значение (Серебро с позолотой) */
.single-info-li .attr-value {
    flex: 0 0 auto;
    color: var(--color-black);
    white-space: nowrap;
}

/* Точки между меткой и значением */
.single-info-li .attr-label::after {
    content: "";
    display: inline-block;
    width: 100%;
    border-bottom: 1px dotted #ccc;
    margin-left: 6px;
    transform: translateY(-3px);
}

/* Растягиваем метку, чтобы ::after заполнил всё свободное место */
.single-info-li .attr-label {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
}




/* ==================================================
STICKY БЛОК ИНФОРМАЦИИ О ТОВАРЕ
================================================== */

/* Сам липкий контейнер */
#single-info-dynamic-container {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 200px !important;
    z-index: 10;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

@media screen and (max-width: 1280px) {
  #single-info-dynamic-container {
    top: 115px !important;
  }
}

/* КРИТИЧНО: position: sticky не работает, если у предка есть overflow != visible */
.main,
.single-content-area,
.single-first-grid,
#info-fixed,
#single-info-dynamic-container,
.single-info {
    overflow: visible !important;
}

/* Убираем инлайн-высоты */
#info-fixed {
    height: auto !important;
    align-self: stretch;
}

/* На планшетах и мобилках sticky отключаем */
@media screen and (max-width: 1100px) {
    .single-first-grid {
        align-items: stretch;
    }
    #single-info-dynamic-container {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}

@media (min-width: 600px) and (max-width: 1365px) {
  .single-image-container {
    grid-template-columns: 1fr 4fr;
  }
  .single-image-mini-container {
    order: 1;
  }
  .thumbnails-flex-line {
    flex-direction: column;
  }
  .single-image-container, .thumbnails-flex-line, .single-first-grid {
    gap: var(--offset-usual);
  }
  .thumbnails-flex-line {
    max-height: 500px;
  }
}