/* ===== MOBILE: компактные карточки ===== */
@media (max-width: 640px){

  /* уменьшаем высоту изображения */
  .t-store__card__imgwrapper{
      height: 40px !important;
      overflow: hidden;
  }

  .t-store__card__bgimg{
      height: 97% !important;
      background-size: cover !important;
  }

  /* уменьшаем отступы под фото */
  .t-store__card__title{
      margin-top: 10px !important;
      font-size: 14px !important;
  }

  .t-store__card__descr{
      margin-bottom: 6px !important;
  }

  .t-store__card__price{
      margin-bottom: 8px !important;
  }

  /* увеличиваем высоту кнопок */
  .t-store__card__btn{
      height: 46px !important;   /* высота кнопки */
      padding: 0 12px !important;

      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      font-size: 13px !important;
  }

}

/* ===== JAYA: варианты выбора (кнопки) ===== */

/* базовое состояние (неактивное) */
.js-product 
.t-product__option-variants_buttons 
.t-product__option-item_simple {

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #F4EFE6 !important;
    border: 1px solid #d6d0c8 !important;  /* светлый бордер */

    transition: border-color 0.2s ease;
}


/* hover (по желанию — можно убрать) */
.js-product 
.t-product__option-variants_buttons 
.t-product__option-item_simple:hover {

    border: 1px solid #4A1820 !important;
}


/* АКТИВНЫЙ вариант */
.js-product 
.t-product__option-variants_buttons 
.t-product__option-item_simple.t-product__option-item_active {

    border: 2px solid #4A1820 !important;   /* бордовый */
    background-color: #F4EFE6 !important;   /* без серого */
    box-shadow: none !important;
}

/* внешний вид капсулы — 130 × 40 */

.t-store__card__mark-wrapper{
  width: 130px !important;
  max-width: 130px !important;
}

.t-store__card__mark{
  width: 100% !important;      /* чтобы заняла 130px от wrapper */
  height: 40px !important;     /* фикс высоты */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* если нужно по центру */
  
  padding: 0 10px !important;  /* только горизонтальный */

  background-color: #F8F0E6 !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 0px !important;

  color: #7A2E3A !important;

  font-family: 'Manrope', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 1 !important;

  text-transform: none !important;
  letter-spacing: 0 !important;

  white-space: normal !important;
  text-align: center !important;

  box-shadow: none !important;
}

/* Позиционируем относительно картинки */
.t-store__card__imgwrapper{
  position: relative !important;
}

/* Перемещаем плашку вниз вправо */
.t-store__card__mark-wrapper{
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  top: auto !important;
  z-index: 20 !important;

  width: 130px !important;
  max-width: 130px !important;
}

/* Перебиваем отступ описания во всех каталогах */
[id^="rec"] .t-section__descr{
    margin-bottom: 35px !important;
}








/* ====== CONTAINER 600px ====== */
#yuccaWater1.yuccaWater{
  position: relative;
  width: min(600px, calc(100% - 40px));
  margin: 0 auto;
  border-radius: 32px;
  overflow: hidden;
  min-height: 260px;
}

/* фон */
#yuccaWater1 .yuccaWater__bg{
  position:absolute;
  inset:0;
  background: url("https://static.tildacdn.com/tild3464-6637-4639-a234-303231393464/u9757431369_Cinemati.png") center/cover no-repeat;
  transform: scale(1.02);
  z-index: 0;
}
#yuccaWater1.yuccaWater::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.18);
  z-index: 1;
}

/* внешний отступ */
#yuccaWater1 .yuccaWater__glass{
  position: relative;
  z-index: 2;
  padding: 14px;
}

/* ✅ СТЕКЛО: фиксируем ширину, чтобы не “уезжало” и правый край был виден */
#yuccaWater1 .yuccaWater__wrap{
  position: relative;

  width: min(540px, 100%);
  margin: 0 auto;
  min-height: 228px;

  border-radius: 24px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: center;

  padding: 18px 18px;

  background: rgba(142,117,103,.22);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 8px 60px rgba(0,0,0,.16);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* блик */
#yuccaWater1 .yuccaWater__wrap::before{
  content:"";
  position:absolute;
  left: -60px;
  top: -40px;
  width: 320px;
  height: 180px;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
  transform: rotate(-8deg);
  pointer-events:none;
  opacity:.8;
}

/* ====== bottle bigger ====== */
#yuccaWater1 .yuccaWater__bottle{
  position: relative;
  width: 240px;
  display:flex;
  align-items:center;
  justify-content:center;

  animation: yuccaFloat 6s ease-in-out infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* ripple */
#yuccaWater1 .yuccaWater__bottle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 200px;
  height: 64px;
  border-radius: 999px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(closest-side, rgba(0,0,0,.26), transparent 65%);
  filter: blur(12px);
  opacity: .55;
  animation: yuccaRipple 3.6s ease-in-out infinite;
  pointer-events:none;
}
#yuccaWater1 .yuccaWater__bottle img{
  width: 100%;
  height: auto;
  display:block;
  filter: drop-shadow(0 28px 30px rgba(0,0,0,.32));
}

/* текст */
#yuccaWater1 .yuccaWater__text{
  color: rgba(255,255,255,.92);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  max-width: 250px;
}

/* animations */
@keyframes yuccaFloat{
  0%   { transform: translateY(0) rotate(-1.2deg); }
  40%  { transform: translateY(-10px) rotate(1.2deg); }
  70%  { transform: translateY(-4px) rotate(.4deg); }
  100% { transform: translateY(0) rotate(-1.2deg); }
}
@keyframes yuccaRipple{
  0%   { transform: translateX(-50%) scaleX(1) scaleY(.9); opacity: .50; }
  50%  { transform: translateX(-50%) scaleX(1.10) scaleY(1); opacity: .64; }
  100% { transform: translateX(-50%) scaleX(1) scaleY(.9); opacity: .50; }
}

/* =========================
   MOBILE — ПРАВКА ТОЛЬКО СТЕКЛА
   (остальное оставлено как было)
========================= */
@media (max-width: 743px){

  /* ✅ ключевое: чтобы padding/бордеры не расширяли стекло */
  #yuccaWater1 .yuccaWater__wrap{
    box-sizing: border-box !important;
  }

  /* ✅ стекло на всю ширину, без “выпирания” */
  #yuccaWater1 .yuccaWater__wrap{
    width: 100% !important;
    max-width: 100% !important;

    /* было: padding: 18px 18px; min-height: 320px; */
    padding: 14px !important;
    min-height: auto !important;

    /* было: border-radius: 24px */
    border-radius: 18px !important;

    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
  }

  /* ✅ чуть корректируем внешний паддинг вокруг стекла,
     чтобы край точно не обрезался на узких экранах */
  #yuccaWater1 .yuccaWater__glass{
    padding: 10px !important;
    box-sizing: border-box !important;
  }
}

@media (prefers-reduced-motion: reduce){
  #yuccaWater1 .yuccaWater__bottle,
  #yuccaWater1 .yuccaWater__bottle::after{ animation: none !important; }
}
</style>