.agga-ccg{
  --agga-ccg-accent:#d90045;
  margin:28px 0 20px;
  padding:20px;
  clear:both;
  border:1px solid rgba(20,20,20,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 28px rgba(20,20,20,.055)
}
.agga-ccg__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}
.agga-ccg__head-main{min-width:0}
.agga-ccg__availability{font-size:18px;font-weight:700;line-height:1.2;color:#171717;letter-spacing:-.015em}
.agga-ccg__availability strong{font-size:22px;font-weight:800;color:var(--agga-ccg-accent)}
.agga-ccg__title{margin-top:4px;font-size:13px;font-weight:500;line-height:1.3;color:rgba(20,20,20,.58)}
.agga-ccg__category{max-width:48%;padding:6px 10px;border-radius:999px;background:rgba(20,20,20,.045);font-size:11px;font-weight:650;line-height:1.25;color:rgba(20,20,20,.66);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agga-ccg__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--agga-ccg-size,86px),1fr));gap:10px;align-items:start}
.agga-ccg__item{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;text-decoration:none!important;color:inherit!important;border-radius:10px;outline:none}
.agga-ccg__item.is-extra{display:none}
.agga-ccg.is-expanded .agga-ccg__item.is-extra{display:flex}
.agga-ccg__thumb{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border:2px solid transparent;border-radius:10px;background:#f3f3f3;box-shadow:inset 0 0 0 1px rgba(0,0,0,.055);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,filter .16s ease}
.agga-ccg__thumb:after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none}
.agga-ccg__thumb img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;margin:0!important;transition:transform .18s ease}
.agga-ccg__item:hover .agga-ccg__thumb,.agga-ccg__item:focus-visible .agga-ccg__thumb{border-color:rgba(217,0,69,.55);box-shadow:0 7px 20px rgba(0,0,0,.12);transform:translateY(-2px)}
.agga-ccg__item:hover .agga-ccg__thumb img{transform:scale(1.025)}
.agga-ccg__item.is-current .agga-ccg__thumb{border-color:var(--agga-ccg-accent);box-shadow:0 0 0 2px rgba(217,0,69,.13),0 7px 18px rgba(0,0,0,.10)}
.agga-ccg__check{position:absolute;z-index:3;top:6px;right:6px;display:grid;place-items:center;width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:var(--agga-ccg-accent);color:#fff;font-size:12px;font-weight:900;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.23)}
.agga-ccg__badge{position:absolute;z-index:2;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.94);color:#171717;font-size:9px;font-weight:750;line-height:1.2;box-shadow:0 2px 8px rgba(0,0,0,.13);backdrop-filter:blur(3px)}
.agga-ccg__name{font-size:11px;line-height:1.25;text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.agga-ccg__toggle{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:14px;padding:10px 14px;border:1px solid rgba(217,0,69,.32);border-radius:9px;background:rgba(217,0,69,.035);color:var(--agga-ccg-accent);font:inherit;font-size:13px;font-weight:750;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.agga-ccg__toggle:hover{background:rgba(217,0,69,.075);border-color:rgba(217,0,69,.55)}
.agga-ccg__toggle:active{transform:translateY(1px)}
.agga-ccg__toggle-icon{font-size:18px;line-height:.8;transition:transform .16s ease}
.agga-ccg.is-expanded .agga-ccg__toggle-icon{transform:rotate(180deg)}
@media (max-width:767px){
  .agga-ccg{margin-top:20px;padding:14px;border-radius:12px}
  .agga-ccg__head{align-items:flex-start;flex-direction:column;gap:7px}
  .agga-ccg__category{max-width:100%;text-align:left}
  .agga-ccg__availability{font-size:17px}
  .agga-ccg__availability strong{font-size:20px}
  .agga-ccg__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .agga-ccg__check{width:18px;height:18px;top:5px;right:5px;font-size:10px}
  .agga-ccg__badge{font-size:8px;left:5px;bottom:5px}
}
@media (max-width:420px){.agga-ccg__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v1.2.0 — безопасное размещение под «Оптовая цена» в основной колонке товара. */
.woocommerce div.product .summary .agga-ccg,
.woocommerce div.product .entry-summary .agga-ccg,
.single-product .summary .agga-ccg{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  float:none!important;
  clear:both!important;
  width:100%!important;
  max-width:560px;
  min-width:0!important;
  height:auto!important;
  box-sizing:border-box!important;
  margin:16px 0 22px!important;
  z-index:auto!important;
  transform:none!important;
}
.agga-ccg,
.agga-ccg *{box-sizing:border-box}
.agga-ccg__grid{min-width:0;max-width:100%}
.agga-ccg__item{max-width:100%}

/* Планшеты: блок остаётся в потоке и не наезжает на соседние колонки. */
@media (max-width:1100px){
  .woocommerce div.product .summary .agga-ccg,
  .woocommerce div.product .entry-summary .agga-ccg,
  .single-product .summary .agga-ccg{
    max-width:100%;
  }
  .agga-ccg__grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
}

/* Мобильная карточка товара: палитра занимает всю ширину своей колонки. */
@media (max-width:767px){
  .woocommerce div.product .summary .agga-ccg,
  .woocommerce div.product .entry-summary .agga-ccg,
  .single-product .summary .agga-ccg{
    width:100%!important;
    max-width:none!important;
    margin:14px 0 18px!important;
    padding:13px!important;
  }
  .agga-ccg__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
}

@media (max-width:420px){
  .agga-ccg__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}

/* v1.8.0 — «Детали» визуально закреплены прямо под фото,
   но больше не являются flex/grid-колонкой верхнего ряда.
   Это не даёт центральному блоку и корзине переноситься вниз. */

/* Палитра остаётся в центральной колонке сразу после «Оптовая цена». */
.woocommerce div.product .summary .agga-ccg,
.woocommerce div.product .entry-summary .agga-ccg,
.single-product .summary .agga-ccg,
.single-product .entry-summary .agga-ccg{
  position:static!important;
  display:block!important;
  float:none!important;
  clear:both!important;
  width:100%!important;
  max-width:560px!important;
  min-width:0!important;
  height:auto!important;
  margin:14px 0 22px!important;
  padding:16px!important;
  inset:auto!important;
  transform:none!important;
  z-index:1!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.woocommerce div.product .summary .agga-ccg .agga-ccg__grid,
.woocommerce div.product .entry-summary .agga-ccg .agga-ccg__grid,
.single-product .summary .agga-ccg .agga-ccg__grid,
.single-product .entry-summary .agga-ccg .agga-ccg__grid{
  grid-template-columns:repeat(auto-fit,minmax(78px,1fr));
  gap:9px;
}

/* Верхний контейнер сохраняет исходные колонки темы.
   Меняем только координатную систему и не позволяем вертикальному центрированию
   смещать summary/корзину вниз при увеличении высоты контейнера. */
.woocommerce div.product .product-images-summary.agga-ccg-stage--details-overlay,
.single-product .product-images-summary.agga-ccg-stage--details-overlay{
  position:relative!important;
  align-items:flex-start!important;
  min-height:var(--agga-stage-min-height,auto)!important;
  overflow:visible!important;
}

/* «Детали» не участвуют в flex/grid-раскладке верхнего ряда.
   JS задаёт left/top/width точно по фактическому блоку изображения. */
.woocommerce div.product .product-images-summary > .woocommerce-tabs.agga-ccg-details--anchored-left,
.woocommerce div.product .product-images-summary > .woocommerce-tabs.wc-tabs-wrapper.agga-ccg-details--anchored-left,
.single-product .product-images-summary > .woocommerce-tabs.agga-ccg-details--anchored-left,
.single-product .product-images-summary > .woocommerce-tabs.wc-tabs-wrapper.agga-ccg-details--anchored-left,
.product-images-summary > .agga-ccg-details--anchored-left{
  position:absolute!important;
  display:block!important;
  float:none!important;
  clear:none!important;
  left:var(--agga-details-left,0)!important;
  top:var(--agga-details-top,0)!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--agga-details-width,520px)!important;
  max-width:var(--agga-details-width,520px)!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0 0 24px!important;
  transform:none!important;
  z-index:2!important;
  box-sizing:border-box!important;
}

.agga-ccg-details--anchored-left > *{
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

.agga-ccg-details--anchored-left .wc-tabs,
.agga-ccg-details--anchored-left ul.tabs{
  margin:0!important;
  padding-top:0!important;
}

.agga-ccg-details--anchored-left .woocommerce-Tabs-panel,
.agga-ccg-details--anchored-left .woocommerce-Tabs-panel--additional_information,
.agga-ccg-details--anchored-left #tab-additional_information{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}

/* Характеристики остаются строго в ширине фотографии. */
.agga-ccg-details--anchored-left table,
.agga-ccg-details--anchored-left .woocommerce-product-attributes{
  width:100%!important;
  max-width:100%!important;
  table-layout:fixed!important;
}
.agga-ccg-details--anchored-left .woocommerce-product-attributes th{
  width:38%!important;
  min-width:125px!important;
  box-sizing:border-box!important;
}
.agga-ccg-details--anchored-left .woocommerce-product-attributes td,
.agga-ccg-details--anchored-left .woocommerce-product-attributes p{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* На планшете и мобильном JS возвращает «Детали» на исходное место WooCommerce. */
@media (max-width:999px){
  .woocommerce div.product .summary .agga-ccg,
  .woocommerce div.product .entry-summary .agga-ccg,
  .single-product .summary .agga-ccg,
  .single-product .entry-summary .agga-ccg{
    width:100%!important;
    max-width:100%!important;
    margin:14px 0 18px!important;
  }
  .woocommerce div.product .product-images-summary.agga-ccg-stage--details-overlay,
  .single-product .product-images-summary.agga-ccg-stage--details-overlay{
    min-height:auto!important;
  }
}

@media (max-width:767px){
  .woocommerce div.product .summary .agga-ccg,
  .woocommerce div.product .entry-summary .agga-ccg,
  .single-product .summary .agga-ccg,
  .single-product .entry-summary .agga-ccg{
    padding:13px!important;
  }
  .woocommerce div.product .summary .agga-ccg .agga-ccg__grid,
  .woocommerce div.product .entry-summary .agga-ccg .agga-ccg__grid,
  .single-product .summary .agga-ccg .agga-ccg__grid,
  .single-product .entry-summary .agga-ccg .agga-ccg__grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
  }
}
@media (max-width:420px){
  .woocommerce div.product .summary .agga-ccg .agga-ccg__grid,
  .woocommerce div.product .entry-summary .agga-ccg .agga-ccg__grid,
  .single-product .summary .agga-ccg .agga-ccg__grid,
  .single-product .entry-summary .agga-ccg .agga-ccg__grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* v1.9.0 — мобильный порядок: штатный блок цены/корзины темы всегда выше палитры. */
@media (max-width:767px){
  .product-images-summary > .agga-ccg.agga-ccg--mobile-after-purchase,
  .single-product .product-images-summary > .agga-ccg.agga-ccg--mobile-after-purchase,
  .woocommerce div.product .product-images-summary > .agga-ccg.agga-ccg--mobile-after-purchase{
    position:static!important;
    display:block!important;
    float:none!important;
    clear:both!important;
    flex:0 0 100%!important;
    order:999!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:14px 0 18px!important;
    padding:13px!important;
    inset:auto!important;
    transform:none!important;
    z-index:1!important;
    box-sizing:border-box!important;
  }
}