/* OCMasters Grouped Products */
.ocm-grouped { --ocm-swatch: 32px; }
.ocm-grouped-axis { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.ocm-grouped-page .ocm-grouped-axis { display: block; margin: 0 0 12px; }
.ocm-grouped-title { margin-bottom: 6px; }
.ocm-grouped-values { display: flex; flex-wrap: wrap; gap: 8px; }
.ocm-grouped-value { display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--ocm-swatch) * .8); padding: 2px 10px; border: 1px solid #ccc; border-radius: 4px; color: inherit; text-decoration: none; background: #fff; font-size: 13px; line-height: 1.2; cursor: pointer; position: relative; }
.ocm-grouped-card .ocm-grouped-value { padding: 1px 6px; font-size: 12px; min-height: 0; }
.ocm-grouped-value:hover { border-color: #666; color: inherit; }
.ocm-grouped-value.is-current { border: 2px solid #1e91cf; font-weight: bold; }
.ocm-grouped-value.is-oos { opacity: .55; text-decoration: line-through; }
.ocm-grouped-value.is-disabled { opacity: .3; cursor: not-allowed; border-style: dashed; }
.ocm-grouped-image .ocm-grouped-value, .ocm-grouped-color .ocm-grouped-value { padding: 2px; width: var(--ocm-swatch); height: var(--ocm-swatch); min-height: 0; }
.ocm-grouped-card.ocm-grouped .ocm-grouped-image .ocm-grouped-value, .ocm-grouped-card .ocm-grouped-color .ocm-grouped-value { width: calc(var(--ocm-swatch) * .75); height: calc(var(--ocm-swatch) * .75); }
.ocm-grouped-value img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ocm-grouped-value i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.ocm-grouped-color .ocm-grouped-value { border-radius: 50%; }
.ocm-grouped-image .ocm-grouped-value.is-oos, .ocm-grouped-color .ocm-grouped-value.is-oos { text-decoration: none; }
.ocm-grouped-image .ocm-grouped-value.is-oos::after, .ocm-grouped-color .ocm-grouped-value.is-oos::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; border-top: 1px solid #999; transform: rotate(-45deg); }
.ocm-grouped-more { font-size: 12px; text-decoration: none; }
.ocm-grouped-loading { opacity: .5; pointer-events: none; transition: opacity .2s; }
.ocm-grouped-select { max-width: 320px; }
/* bogdanmebel 2026-11-01: card sizes more visible (green = Промоции menu #3cc472) */
.ocm-grouped-card { background: #f1fbf5; border: 1px solid #cdeedb; border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.ocm-grouped-card .ocm-grouped-axis { margin: 0; }
.ocm-grouped-card .ocm-grouped-axis + .ocm-grouped-axis { margin-top: 6px; }
.ocm-grouped-card .ocm-grouped-axis:first-child::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233cc472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.4 2.4 0 0 1 0-3.4l2.6-2.6a2.4 2.4 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2M11.5 9.5l2-2M8.5 6.5l2-2M17.5 15.5l2-2'/%3E%3C/svg%3E") center/contain no-repeat; }
.ocm-grouped-value.is-current, .ocm-grouped-card .ocm-grouped-value.is-current { border: 2px solid #3cc472; color: #1d7a45; }
.ocm-grouped-card .ocm-grouped-value { background: #fff; }
.ocm-grouped-value:hover { border-color: #3cc472; }
.ocm-grouped-card .ocm-grouped-more { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 4px; background: #3cc472; color: #fff; font-size: 12px; font-weight: bold; line-height: 1.5; }
.ocm-grouped-card .ocm-grouped-more:hover { background: #111; color: #fff; }
.ocm-grouped-card .ocm-grouped-axis { gap: 4px; }
.ocm-grouped-card .ocm-grouped-value { padding: 1px 5px; }
.ocm-grouped-card .ocm-grouped-more { padding: 1px 6px; }
/* bogdanmebel 2026-11-01: size list on the product page (idea A) */
.bm-size-list { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.bm-size-list .bm-size { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 15px; line-height: 1.3; min-height: 0; justify-content: flex-start; text-align: left; }
.bm-size-list .bm-size:hover { border-color: #3cc472; }
.bm-size-list .bm-size.is-current { border: 2px solid #3cc472; background: #f3fbf6; color: inherit; padding: 8px 11px; }
.bm-size-list.is-collapsed .bm-extra { display: none; }
.bm-radio { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #999; box-sizing: border-box; }
.bm-size.is-current .bm-radio { border: 5px solid #3cc472; }
.bm-label { font-weight: bold; min-width: 64px; }
.bm-badge { font-size: 11px; font-weight: bold; background: #e6f7ed; color: #1d7a45; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.bm-note { font-size: 12px; color: #999; }
.bm-price { margin-left: auto; font-weight: bold; color: #e30613; white-space: nowrap; }
.bm-price s { color: #999; font-size: 12px; font-weight: normal; margin-left: 6px; }
.bm-size.is-oos { text-decoration: none; }
.bm-size-more { align-self: flex-start; border: 0; background: none; padding: 4px 2px; color: #1d7a45; font-weight: bold; font-size: 14px; cursor: pointer; }
.bm-size-more:hover { text-decoration: underline; }
@media (max-width: 480px) { .bm-size-list .bm-size { flex-wrap: wrap; gap: 6px 8px; font-size: 14px; } .bm-badge.bm-save { order: 5; } }