Выбери свою технику
/* ============================================================================= BulletBro Shop — Column Switcher & Grid Override /wp-content/themes/porto-child/bb-shop.css Только новые классы с префиксами bb-shop-*, bb-gs-*, bb-grid-*. Никаких override существующих селекторов style.css — только дополнения. ============================================================================= */ /* ── 1. WRAPPER ──────────────────────────────────────────────────────────────── */ .bb-shop-wrap { position: relative; } /* ── 2. FILTER BAR TOP ROW (кнопка «Фильтр» + switcher в одной строке) ──────── */ .bb-filter-top-row { display: flex; align-items: center; gap: 12px; } /* На мобиле toggle полноширинный — switcher скрыт, строка не нужна как flex */ @media (max-width: 767px) { .bb-filter-top-row { display: block; } } /* ── 3. COLUMN SWITCHER UI ───────────────────────────────────────────────────── */ .bb-grid-switcher { display: flex; align-items: center; gap: 2px; /* В filter-top-row автоматически уходит вправо */ margin-left: auto; flex-shrink: 0; } .bb-gs-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 5px; background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: #888; line-height: 1; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .bb-gs-btn svg { width: 10px; height: 10px; fill: currentColor; display: block; flex-shrink: 0; pointer-events: none; } /* Лейблы — visually hidden, доступны скринридерам */ .bb-gs-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bb-gs-btn:hover { color: #555; border-color: #ccc; background: #f5f5f5; } .bb-gs-btn.is-active { color: #111; border-color: #111; background: #f0f0f0; } /* Заголовок «Вид каталога» слева от иконок */ .bb-gs-title { font-size: 14px; color: black; white-space: nowrap; margin-right: 6px; line-height: 30px; } /* Адаптивность: скрываем кнопки, неактуальные для экрана */ /* 3 и 4 колонки — скрыты на мобиле ≤767px */ @media (max-width: 767px) { .bb-gs-hide-xs { display: none !important; } } /* 5 колонок — скрыта на планшете ≤991px */ @media (max-width: 991px) { .bb-gs-hide-sm { display: none !important; } } /* 5 колонок — скрыта на всех экранах (тестовый режим: показываем только 1–4) */ .bb-gs-btn[data-cols="5"] { display: none !important; } /* 1 колонка (список) — скрыта на десктопе и планшете ≥768px */ @media (min-width: 768px) { .bb-gs-btn[data-cols="1"] { display: none !important; } } /* На мобиле ≤767px: скрываем весь переключатель (доступна только 1 колонка — нечего переключать) */ @media (max-width: 767px) { .bb-grid-switcher { display: none !important; } } /* ── 3. CSS GRID OVERRIDE ────────────────────────────────────────────────────── */ /* CSS custom property --bb-cols устанавливается через data-cols на .bb-shop-wrap. Переопределяет Porto's ccols-* flex-систему (ccols-xl-4, ccols-lg-3, …). Используем !important там, где Porto тоже их использует. */ .bb-shop-wrap[data-cols="1"] { --bb-cols: 1; } .bb-shop-wrap[data-cols="2"] { --bb-cols: 2; } .bb-shop-wrap[data-cols="3"] { --bb-cols: 3; } .bb-shop-wrap[data-cols="4"] { --bb-cols: 4; } .bb-shop-wrap[data-cols="5"] { --bb-cols: 5; } /* Планшет 768–991px: 5 колонок → 4 */ @media (min-width: 768px) and (max-width: 991px) { .bb-shop-wrap[data-cols="5"] { --bb-cols: 4; } } /* Мобиле ≤767px: всё выше 1 колонки → 1 */ @media (max-width: 767px) { .bb-shop-wrap[data-cols="2"], .bb-shop-wrap[data-cols="3"], .bb-shop-wrap[data-cols="4"], .bb-shop-wrap[data-cols="5"] { --bb-cols: 1; } } /* Переопределяем ширину li.product-col внутри Porto's ccols-системы */ .bb-shop-wrap[data-cols] ul.products.has-ccols > li.product-col { flex: 0 0 calc(100% / var(--bb-cols, 4)) !important; max-width: calc(100% / var(--bb-cols, 4)) !important; width: calc(100% / var(--bb-cols, 4)) !important; } /* ── 4. BANNER SLOTS (зарезервировано для будущих баннеров) ─────────────────── */ /* li.bb-banner-slot, вставленный через хук bb_shop_banner_slot, всегда на полную ширину */ .bb-shop-wrap ul.products > li.bb-banner-slot { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding-top: 8px !important; padding-bottom: 8px !important; box-sizing: border-box; } .bb-shop-wrap ul.products > li.bb-banner-slot img { width: 100%; height: auto; display: block; border-radius: 6px; }