/* Общий стиль карточек товара для SEO-страниц  /profiles/trade.css */

p {
margin: 0px 0;
font-size: 14px !important;
color: #5e5e5e;
}

body {
margin: 0;
padding: 0;
background: #fff !important;
color: #1a1a1a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
}
.product-page {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin: auto;
max-width: 1200px;
}
.product-title {
display: flex;
gap: 0px;
line-height: 1.1;
flex-wrap: wrap;
margin: 0 0 10px 0;
font-size: 22px;
}
.product-price {
font-weight: 400;
font-size: 31px;
margin: 0 0 30px 0;
line-height: 1;
background: #484b53;
color: white;
width: fit-content;
padding: 8px 15px;
border-radius: 5px 5px 5px 5px;
position: relative;
}
.product-price::after {
content: "оптом";
padding: 4px 8px;
background: #eb0000;
font-size: 9px;
text-transform: uppercase;
border-radius: 999px;
position: absolute;
line-height: 1;
bottom: -20%;
left: 50%;
transform: translate(-50%, 0%);
}
.product-likes-shares {
display: flex;
align-items: center;
justify-content: center;
gap: 0px;
z-index: 3;
position: absolute;
transform: translate(-50%, 0px);
left: 50%;
bottom: 20px;
margin: auto;
text-align: center;
padding: 3px;
background: #ffffff47;
border-radius: 13px;
}
.product-likes-shares-call {
background: #00c345;
border: 0;
outline: 0;
color: #fff;
border-radius: 10px 0px 0px 10px;
padding: 0;
width: 60px;
height: 60px;
cursor: pointer;
}
.product-likes-shares-call img {
width: 34px;
animation-name: wiggle;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
top: -4px;
position: relative;
}
@keyframes wiggle2 {
    0%   { transform: rotate(20deg) translateX(10px) translateY(-10px) }
    10%  { transform: rotate(-10deg) translateX(0px) translateY(10px) }
    20%  { transform: rotate(10deg) translateX(0px) translateY(0px) }
    30%  { transform: rotate(-10deg) translateX(0px) translateY(10px) }
    40%  { transform: rotate(-10deg) translateX(0px) translateY(10px) }
    100% { transform: rotate(20deg) translateX(10px) translateY(-10px) }
    }

@media (max-width: 660px){
  .product-image{ width: -webkit-fill-available; }
}
.product-description {
display: flex;
flex-direction: column;
max-width: 450px;
padding: 0 30px;
}
.product-description br {
line-height: 1.6;
}
/* все прямые дети, кроме двух кнопок — тянут на всю ширину */
.product-description > :not(#shareOpenBtn):not(#likeBtn) {
grid-column: 1 / -1;
}

/* сами кнопки — в правых колонках одной строки */
#shareOpenBtn { }
#likeBtn { }

.product-meta {
display: flex;
margin: 10px;
justify-content: center;
}
.product-meta .seller-link {
color: #000000;
word-break: break-word;
}
.product-meta .seller-link:hover {
text-decoration: underline;
}
.product-gallery {
display: flex;
flex-direction: column;
max-width: 700px;
min-width: 260px;
height: fit-content;
}

@media (max-width: 600px) {
.product-page {margin: 0;}
.product-meta {font-size: 0.9rem;}
}











.share-btn {
cursor: pointer;
border: 0;
outline: 0;
padding: 0;
background: #5e6169;
width: 60px;
height: 60px;
border-radius: 0px;
backdrop-filter: blur(10px);
}
.share-btn img {
width: 21px;
rotate: 26deg;
top: -3px;
position: relative;
}
/* Кнопка лайка */
.like-btn {
cursor: pointer;
border: 0;
outline: 0;
padding: 0;
background: #484b53;
width: 60px;
height: 60px;
border-radius: 0px;
backdrop-filter: blur(10px);
}
.like-btn img {
width: 24px;
top: -4px;
position: relative;
}

/* единые состояния для обеих кнопок */
.share-btn:hover,
.like-btn:hover { filter: brightness(0.96); }

.share-btn:active,
.like-btn:active { transform: translateY(1px); }

.share-btn:focus-visible,
.like-btn:focus-visible {
outline: 2px solid #111;
outline-offset: 2px;
}

/* при aria-pressed=true — лёгкий акцент */
.like-btn[aria-pressed="true"]{
background: #ff1a62;
}

.share-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .45);
z-index: 9999;
}
.share-modal.open {
display: flex;
}
.share-modal__card {
background: #212121;
color: #a7a7a7;
border-radius: 10px;
max-width: 270px;
padding: 10px 22px;
position: relative;
}
.share-modal__title {
margin: auto;
font-size: 18px;
FONT-WEIGHT: 400;
text-align: center;
}
.share-close {
position: absolute;
top: 0px;
right: 0px;
border: 0;
background: #2d2d2d;
font-size: 25px;
cursor: pointer;
line-height: 1;
color: #ffffff57;
border-radius: 0px 18px 0px 10px;
width: 35px;
height: 35px;
}
.share-list {
display: flex;
flex-direction: row;
gap: 10px;
margin: 10px 0 0 0;
justify-content: center;
}
.share-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
border: 0;
cursor: pointer;
color: #ffffff9e;
font-size: 12px;
background: none;
justify-content: center;
margin: 0;
padding: 0;
}
.share-item img {
width: 44px;
height: 44px;
display: block;
padding: 11px;
border-radius: 17px;
}

/* Верхняя навигация */
.top-nav  {
display: flex;
position: fixed;
margin: 0;
bottom: 0;
right: 0;
z-index: 48;
padding: 4px;
box-sizing: border-box;
}
.top-nav a {
color: #000000;
display: flex;
align-items: center;
gap: 5px;
padding: 7px 10px;
background: #ffe9e9;
border-radius: 6px;
font-size: 12px;
}
.top-nav a:hover {
background: #f0f0f0;
}
.top-nav img {
width: 20px;
border-radius: 999px;
}


/* Хлебные крошки */
.breadcrumbs  {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
padding: 10px 20px;
font-size: 12px;
color: #666;
justify-content: center;
margin: 67px auto 10px;
background: #f7f7f7;
width: fit-content;
border-radius: 10px;
}

.breadcrumbs a {
color: inherit;
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs span {
font-weight: 600;
color: black;
}
.breadcrumbs__sep {
color: #00c6ab !important;
margin: 0 4px;
}

/* Ещё из этой категории */
.related  {
margin: 0;
width: 1200px;
}

.related__title {
margin: 20px auto;
font-size: 22px;
font-weight: 400;
text-align: center;
line-height: 1.2;
}

.related-grid  {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
gap: 9px;
margin: 0 10px;
}

@media (max-width: 425px) {
.related-grid {grid-template-columns: repeat(auto-fill, minmax(103px, 1fr));}
}
.related-card  {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
/* background: hsl(222 10% 96% / 1); */
border: 0px solid #00000000;
border-radius: 16px;
overflow: hidden;
justify-content: flex-start;
box-shadow: 0px 0px 20px 0px #00355b33;
}
.related-card img  {
width: 100%;
height: auto;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
border-radius: 20px;
}
.related-card__name  {
padding: 8px 10px 0;
font-size: 13px;
line-height: 1.3;
height: 33px;
overflow: hidden;
}
.related-card__price  {
padding: 6px 10px 10px;
font-weight: 600;
font-size: 17px;
color: #006a95;
}
.related__more  {
margin: auto;
}
.related__more a  {
text-decoration: none;
background: #f4f4f6;
padding: 11px 15px;
color: black;
border-radius: 999px;
border: 1px solid #0a131e00;
margin: 16px auto;
display: block;
width: 240px;
text-align: center;
}

.related__more a:hover  {
background: #fff;
}

/* Пейджер по категории */
.cat-pager  {
display: flex;
align-items: flex-start;
margin: auto;
width: 100%;
gap: 0;
position: fixed;
top: 70px;
z-index: 3;
justify-content: space-between;
pointer-events: none;
}

.cat-pager__btn {
text-decoration: none;
border: 0;
border-radius: 5px;
padding: 8px;
color: #ffffff;
height: 29px;
background: #00000029;
display: flex;
align-items: center;
pointer-events: auto;
}
.cat-pager__btn img {
height: 17px;
}
.cat-pager__btn:hover {
background: #000;
}
.cat-pager__btn--disabled {
opacity: .5;
pointer-events: none;
}












/* ======================= CSS-ГАЛЕРЕЯ (чистый CSS) ======================= */

/* корневой контейнер */
.pg {
    width: 100%;
    margin: 0px 0px;
    max-width: 480px;
    position: relative;
    background: #313131;
    border-radius: 30px;
    overflow: hidden;
}

/* кружки-индикаторы под фото */
.pg__radio {
position: absolute;
top: 10px;
width: 10px;
height: 10px;
margin: 0;
padding: 0;
border-radius: 50%;
border: 0;
background: #ffffff99;
box-shadow: 0 0 0 1px #00000059;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
outline: none;
z-index: 10;
transition: .2s;
}

/* состояние наведения */
.pg__radio:hover{
background:#fff;
transform: scale(1.0);
}

/* активный слайд — подчёркиваем */
.pg__radio:checked{
background: #ffffff;
box-shadow: 0 0 0 1px black;
transform: scale(1.2);
}

/* сцена с фиксированным соотношением 3/4 и max-width 670px */
.pg__stage {
position: relative;
width: min(670px, 100%);
aspect-ratio: 3 / 4;
border-radius: 25px;
overflow: hidden;
/* background: #f4f4f6; */
display: flex;
justify-content: center;
align-items: center;
}

/* слайды — стопка, КАЖДЫЙ на всю сцену. работаем только маской clip-path. */
.pg__slide {
position: absolute;
/* inset: 0; */
padding: 0;
margin: 0;
clip-path: inset(0 100% 0 0);
transition: clip-path .55s ease;
will-change: clip-path;
z-index: 1;
clip-path: inset(0 100% 0 0);
transition: clip-path .55s ease;
will-change: clip-path;
z-index:1;
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
}

.pg__slide .product-image {
width:100%;
/* height:100%; */
/* object-fit:cover; */
/* margin:0; */
/* border-radius:0; */
}
.product-image {
    /* border-radius: 20px; */
    margin: 0 0px;
    /* max-width: 660px; */
    width: -webkit-fill-available;
}

/* ================= ЛОГИКА МАСКИ =================
   Обозначения:
   - V  (visible)      = clip-path: inset(0 0 0 0);        (виден целиком)
   - HL (hidden-left)  = clip-path: inset(0 0 0 100%);     (сжат к правому краю, раскрывается справа→налево)
   - HR (hidden-right) = clip-path: inset(0 100% 0 0);     (сжат к левому краю, раскрывается слева→направо)

   При переходе:
   - вперёд (N -> N+1): новый слайд идёт HL -> V  (маска едет справа налево)
   - назад (N+1 -> N):  новый слайд идёт HR -> V  (маска едет слева направо)
*/

/* когда выбран 1-й */
#pg-1:checked ~ .pg__stage .pg__slide--1{
  /* V */
  clip-path: inset(0 0 0 0);
  z-index:2;
}
#pg-1:checked ~ .pg__stage .pg__slide--2{
  /* HL — чтобы при переходе 1 -> 2 маска шла справа налево */
  clip-path: inset(0 0 0 100%);
}
#pg-1:checked ~ .pg__stage .pg__slide--3,
#pg-1:checked ~ .pg__stage .pg__slide--4,
#pg-1:checked ~ .pg__stage .pg__slide--5,
#pg-1:checked ~ .pg__stage .pg__slide--6{
  /* HR — просто скрыты справа */
  clip-path: inset(0 100% 0 0);
}

/* когда выбран 2-й */
#pg-2:checked ~ .pg__stage .pg__slide--2{
  /* V */
  clip-path: inset(0 0 0 0);
  z-index:2;
}
#pg-2:checked ~ .pg__stage .pg__slide--1{
  /* HR — чтобы при переходе 2 -> 1 маска шла слева направо */
  clip-path: inset(0 100% 0 0);
}
#pg-2:checked ~ .pg__stage .pg__slide--3{
  /* HL — чтобы при переходе 2 -> 3 маска шла справа налево */
  clip-path: inset(0 0 0 100%);
}
#pg-2:checked ~ .pg__stage .pg__slide--4,
#pg-2:checked ~ .pg__stage .pg__slide--5,
#pg-2:checked ~ .pg__stage .pg__slide--6{
  clip-path: inset(0 100% 0 0);
}

/* когда выбран 3-й */
#pg-3:checked ~ .pg__stage .pg__slide--3{
  /* V */
  clip-path: inset(0 0 0 0);
  z-index:2;
}
#pg-3:checked ~ .pg__stage .pg__slide--2{
  /* HR — для перехода 3 -> 2 (назад) */
  clip-path: inset(0 100% 0 0);
}
#pg-3:checked ~ .pg__stage .pg__slide--4{
  /* HL — для перехода 3 -> 4 (вперёд) */
  clip-path: inset(0 0 0 100%);
}
#pg-3:checked ~ .pg__stage .pg__slide--1,
#pg-3:checked ~ .pg__stage .pg__slide--5,
#pg-3:checked ~ .pg__stage .pg__slide--6{
  clip-path: inset(0 100% 0 0);
}

/* когда выбран 4-й */
#pg-4:checked ~ .pg__stage .pg__slide--4{
  /* V */
  clip-path: inset(0 0 0 0);
  z-index:2;
}
#pg-4:checked ~ .pg__stage .pg__slide--3{
  /* HR — переход 4 -> 3 (назад) */
  clip-path: inset(0 100% 0 0);
}
#pg-4:checked ~ .pg__stage .pg__slide--5{
  /* HL — переход 4 -> 5 (вперёд) */
  clip-path: inset(0 0 0 100%);
}
#pg-4:checked ~ .pg__stage .pg__slide--1,
#pg-4:checked ~ .pg__stage .pg__slide--2,
#pg-4:checked ~ .pg__stage .pg__slide--6{
  clip-path: inset(0 100% 0 0);
}

/* когда выбран 5-й */
#pg-5:checked ~ .pg__stage .pg__slide--5{
  /* V */
  clip-path: inset(0 0 0 0);
  z-index:2;
}
#pg-5:checked ~ .pg__stage .pg__slide--4{
  /* HR — переход 5 -> 4 (назад) */
  clip-path: inset(0 100% 0 0);
}
#pg-5:checked ~ .pg__stage .pg__slide--6{
  /* HL — переход 5 -> 6 (вперёд) */
  clip-path: inset(0 0 0 100%);
}
#pg-5:checked ~ .pg__stage .pg__slide--1,
#pg-5:checked ~ .pg__stage .pg__slide--2,
#pg-5:checked ~ .pg__stage .pg__slide--3{
  clip-path: inset(0 100% 0 0);
}

/* когда выбран 6-й */
#pg-6:checked ~ .pg__stage .pg__slide--6{
  /* V */
  clip-path: inset(0 0 0 0);
  z-index:2;
}
#pg-6:checked ~ .pg__stage .pg__slide--5{
  /* HR — переход 6 -> 5 (назад) */
  clip-path: inset(0 100% 0 0);
}
#pg-6:checked ~ .pg__stage .pg__slide--1,
#pg-6:checked ~ .pg__stage .pg__slide--2,
#pg-6:checked ~ .pg__stage .pg__slide--3,
#pg-6:checked ~ .pg__stage .pg__slide--4{
  clip-path: inset(0 100% 0 0);
}

/* кликабельные зоны поверх активного слайда */
.pg__nav{
  position:absolute;
  inset:0;
  display:none; /* показываем только у активного */
}
.pg__hit,
.pg__dead{
  height:100%;
}
.pg__hit{
  width:33.333%;
  cursor:pointer;
  transition: background .2s;
}
.pg__hit--prev{ cursor:pointer; }
.pg__hit--next{ cursor:pointer; }
.pg__hit:hover{ background: #ffffff21; }
.pg__dead{
  width:33.334%;
  pointer-events:none; /* центр не кликается */
}

/* показывать клики только у активного слайда */
#pg-1:checked ~ .pg__stage .pg__slide--1 .pg__nav,
#pg-2:checked ~ .pg__stage .pg__slide--2 .pg__nav,
#pg-3:checked ~ .pg__stage .pg__slide--3 .pg__nav,
#pg-4:checked ~ .pg__stage .pg__slide--4 .pg__nav,
#pg-5:checked ~ .pg__stage .pg__slide--5 .pg__nav,
#pg-6:checked ~ .pg__stage .pg__slide--6 .pg__nav{
  display:flex;
}

/* на маленьких экранах всё тоже, размеры сцены под ширину окна */
@media (max-width: 700px){
  .pg__stage{ width: 100%; }
}



/* выравнивание точек по горизонтали относительно центра */
.pg__radio:nth-of-type(1){ left: calc(50% - 40px); }
.pg__radio:nth-of-type(2){ left: calc(50% - 24px); }
.pg__radio:nth-of-type(3){ left: calc(50% - 8px);  }
.pg__radio:nth-of-type(4){ left: calc(50% + 8px);  }
.pg__radio:nth-of-type(5){ left: calc(50% + 24px); }
.pg__radio:nth-of-type(6){ left: calc(50% + 40px); }


















/* статистика */

.product-likes-shares .pls-count {
color: #fff;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 7px;
height: 5px;
line-height: 1;
border-radius: 0px 0px 10px 10px;
font-size: 12px;
left: 0;
bottom: 0;
width: -webkit-fill-available;
}

#likeCount {
}
.product-likes-shares .views-icon {
}
.views-icon img {
  width: 28px;
}
.product-likes-shares button {
position: relative;
}
.product-likes-shares .views-btn {
width: 60px;
height: 60px;
border-radius: 0px 10px 10px 0px;
background: #3c3e45;
border: 0;
}
.product-likes-shares .views-btn img {
width: 26px;
top: -4px;
position: relative;
}