/* ——— Утилиты ——— */
.text-mid   { font-size: 14px; }
.text-small { font-size: 12px; }

.atc-container { display:flex; flex-direction:column; gap:24px; }

/* ——— Аккордеоны (верхний уровень) ——— */
.accordion-container{
  display:flex; flex-direction:column;
  border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;
}
.accordion{ display:flex; flex-direction:column; }
.accordion:not(:last-child){ border-bottom:1px solid #d7d7d7; }

.accordion-title-container{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:24px 0; cursor:pointer; user-select:none;
}
/* тайтл слева толкает правую часть */
.accordion-title-container > :first-child{ flex:1 1 auto; min-width:0; }

.accordion-title-right{
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; flex:0 0 auto; min-width:160px; text-align:right;
}
.accordion-title-right .label{
  max-width:clamp(120px,30vw,280px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:right; transition:opacity .2s ease;
}
.accordion .accordion-title-right .label{ opacity:0; }
.accordion.is-open .accordion-title-right .label{ opacity:1; }

.accordion-panel{ overflow:hidden; height:0; transition:height .25s ease; }

/* Плюс/минус */
.accordion-plus-icon{ position:relative; width:12px; height:12px; margin-left:8px; }
.accordion-plus-icon .bar{
  position:absolute; left:50%; top:50%; width:10px; height:1px; background:#000;
  transform:translate(-50%,-50%); transform-origin:50% 50%;
  transition:transform .25s ease, opacity .25s ease; border-radius:.5px;
}
.accordion-plus-icon .bar--v{ transform:translate(-50%,-50%) rotate(90deg); opacity:1; }
.accordion.is-open .accordion-plus-icon .bar--v{ transform:translate(-50%,-50%) rotate(0); opacity:0; }

/* ——— Вложенный “Проверить наличие в шоуруме” ——— */
.product-info-table{ margin-bottom:0; }
.quantity-accordion.is-open .product-info-table{ margin-bottom:24px; }

.product-info-line{
  display:flex; justify-content:space-between; padding:24px;
  background:#f6f6f6; transition:background-color .3s ease; cursor:pointer;
}
.product-info-line:hover{ background:#f8f8f8; }
.product-info-line:not(:last-child){ border-bottom:1px solid #d7d7d7; }

.accordion-icon{ position:relative; width:16px; height:16px; margin-left:auto; }
.accordion-icon .bar{
  position:absolute; left:50%; top:50%; width:10px; height:1px; background:#000;
  transform:translate(-50%,-50%); transform-origin:50% 50%;
  transition:transform .2s ease, opacity .2s ease; border-radius:.5px;
}
.accordion-icon .bar--v{ transform:translate(-50%,-50%) rotate(90deg); opacity:1; }
.quantity-accordion.is-open .accordion-icon .bar--v{ transform:translate(-50%,-50%) rotate(0); opacity:0; }

@media (prefers-reduced-motion: reduce){
  .accordion-plus-icon .bar, .accordion-icon .bar{ transition:none; }
}

/* ——— Сетка изображений ——— */
.image-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.image-grid img{
  display:block; width:100%; cursor:pointer; box-sizing:border-box;
  outline:2px solid transparent; outline-offset:-2px;
  transition:outline-color .2s ease, outline-offset .2s ease;
}
.image-grid img:hover,
.image-grid img.is-selected{ outline-color:#000; }

/* ——— Add To Bag ——— */

/* reset woo-обёртки у оригинальной кнопки */
.atc-container p.add_to_cart_inline.add-to-bag,
.atc-container p.product.add_to_cart_inline.add-to-bag{
  background:transparent !important; border:0 !important;
  padding:0 !important; margin:0 !important; box-shadow:none !important; border-radius:0 !important;
}

/* единый стиль самой кнопки (и для оригинала, и для клона) */
.atc-container .add-to-bag .add_to_cart_button,
.add-to-bag--clone         .add_to_cart_button,
.atc-container .add-to-bag a.button.add_to_cart_button,
.add-to-bag--clone        a.button.add_to_cart_button{
  display:block !important; width:100% !important; box-sizing:border-box !important;
  padding:20px !important; background:#1c1c1c !important; color:#fff !important;
  text-decoration:none !important; text-transform:uppercase !important; letter-spacing:1px !important;
  font-size:12px !important; line-height:1 !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; text-align:center !important; margin:0 !important;
  transition:background-color .2s ease !important;
}
.atc-container .add-to-bag .add_to_cart_button:hover,
.add-to-bag--clone         .add_to_cart_button:hover,
.atc-container .add-to-bag a.button.add_to_cart_button:hover,
.add-to-bag--clone        a.button.add_to_cart_button:hover{ background:#2b2b2b !important; }
.atc-container .add-to-bag .add_to_cart_button:active,
.add-to-bag--clone         .add_to_cart_button:active,
.atc-container .add-to-bag a.button.add_to_cart_button:active,
.add-to-bag--clone        a.button.add_to_cart_button:active{ background:#242424 !important; }

/* оригинал прячем, когда активен клон (без сдвига макета) */
.add-to-bag.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

/* клон — НИ КАКОГО transform; позицию/ширину/высоту задаёт JS */
.add-to-bag--clone{
  position:fixed; z-index:1000;
  background:transparent !important; border:0 !important; outline:0 !important;
  box-shadow:none !important; margin:0 !important; padding:0 !important; border-radius:0 !important;

  opacity:0; visibility:hidden; pointer-events:none;

  left:0; right:auto; top:auto; bottom:20px; /* <- JS заменяет left/width/height */
  white-space:nowrap; box-sizing:border-box;
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
}