/* ============================================================================ * Mocko — Shop archive (category / shop) styling * Matches the product-page redesign: Montserrat, black #0a0a0a, clean cards * (mirrors .mocko-related .card) + Filter Everything (WPC) panel in our style. * Loaded ONLY on archive pages (see mocko_shop_assets() in functions.php). * ========================================================================== */ /* ---------- Page title (H1) ---------- */ .shop_page .woocommerce-products-header, .woocommerce.archive .woocommerce-products-header { width: auto !important; max-width: none !important; float: none !important; margin: 0 0 15px !important; padding: 0 !important; text-align: left; /* title row: H1 (left) + "Всі товари" (right), rendered in-place by PHP */ display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; } .shop_page .woocommerce-products-header__title, .woocommerce.archive .woocommerce-products-header__title.page-title { font-family: Montserrat, Gilroy, sans-serif !important; font-size: clamp(11px, 1.7vw, 15px) !important; font-weight: 300 !important; letter-spacing: 0.02em; text-transform: uppercase; text-align: left !important; color: #0a0a0a !important; line-height: 1.2 !important; margin: 0 !important; } .shop_page .woocommerce-products-header .term-description, .shop_page .woocommerce-products-header__subtitle { flex: 0 0 100%; /* description on its own line, below the title row */ font-family: Montserrat, Gilroy, sans-serif; color: #6a6a6a; font-size: 14px; margin-top: 8px; } /* "Всі товари" — right side of the title row (rendered in-place, no jump) */ .mocko-shop-all { flex: 0 0 auto; margin-left: auto; font-family: Montserrat, Gilroy, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #0a0a0a; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .mocko-shop-all:hover { color: #6a6a6a; } /* ---------- Layout: FULL-WIDTH products; filters in an off-canvas drawer ----- * Theme uses .col-sm-4.col-md-3.col-md-pull-9 (sidebar) + col-md-push-3 * (products) with float + pull/push. We make products FULL WIDTH and turn the * filters sidebar into a side pop-up (drawer) toggled by the ФІЛЬТРИ button. * --------------------------------------------------------------------------- */ .shop_page > .container > .row { display: block !important; margin: 0 !important; } .shop_page > .container > .row::before, .shop_page > .container > .row::after { content: none !important; display: none !important; } /* products column → full width (kill Bootstrap width/float/pull/push) */ .shop_page > .container > .row > div { width: 100% !important; max-width: 100% !important; float: none !important; left: auto !important; right: auto !important; margin: 0 !important; padding: 0 !important; } /* filters sidebar (aside) → off-canvas drawer sliding in from the RIGHT. Targets both the in-place aside (before JS) and the .mocko-archive-aside that js/shop.js moves to (so the overlay can't trap it). */ .shop_page > .container > .row > aside, .mocko-archive-aside { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 360px !important; max-width: 88vw !important; height: 100% !important; margin: 0 !important; padding: 72px 26px 28px !important; background: #fff !important; box-shadow: 0 0 50px rgba(0, 0, 0, 0.18); z-index: 100000 !important; overflow-y: auto; float: none !important; display: block !important; transform: translateX(100%); transition: transform 0.34s cubic-bezier(.22,.61,.36,1); -webkit-overflow-scrolling: touch; } body.mocko-filters-open .shop_page > .container > .row > aside, body.mocko-filters-open .mocko-archive-aside { transform: translateX(0); } .shop_page > .container > .row > aside .zn_sidebar, .shop_page > .container > .row > aside .sidebar, .mocko-archive-aside .zn_sidebar, .mocko-archive-aside .sidebar { padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; } /* backdrop + drawer close button (injected by js/shop.js) */ .mocko-filter-backdrop { position: fixed; inset: 0; background: rgba(20, 20, 20, 0.28); z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } body.mocko-filters-open .mocko-filter-backdrop { opacity: 1; visibility: visible; } body.mocko-filters-open { overflow: hidden; } .mocko-filter-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; padding: 0; z-index: 2; } .mocko-filter-close::before, .mocko-filter-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 1.6px; background: #0a0a0a; } .mocko-filter-close::before { transform: translate(-50%, -50%) rotate(45deg); } .mocko-filter-close::after { transform: translate(-50%, -50%) rotate(-45deg); } /* ---------- Toolbar: [Фільтри] … [chips centered] … [switchers] ---------- */ .mocko-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; } .mocko-shop-toolbar { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; margin: 0; width: max-content; /* sits in the products header, right of the title */ } #mocko-filter-toggle { padding: 0px; } .mocko-cols-controls { flex: 0 0 auto; } /* right */ .mocko-toolbar-chips { /* center */ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .mocko-filter-btn { flex: 0 0 auto; } /* left */ .mocko-filter-btn.mocko-hidden { display: none !important; } /* hidden when WPC's button shows */ .mocko-filter-btn { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; height: 36px; padding: 0 18px; background: #fff; color: #0a0a0a; border: 0; border-radius: 4px; font-family: Montserrat, Gilroy, sans-serif; font-size: 12px; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .mocko-filter-btn:hover, .mocko-filter-btn.is-active { background: transparent; color: #0a0a0a; } .mocko-filter-btn__icon { width: 16px; height: 12px; flex: 0 0 16px; opacity: 0.7; /* soften so it reads as light as the thin (300) label */ background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1.4px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 70% 1.4px no-repeat, linear-gradient(currentColor, currentColor) 0 10px / 40% 1.4px no-repeat; } /* columns switchers — desktop (3/4) + mobile (1/2) */ .mocko-cols-controls { display: inline-flex; align-items: center; gap: 8px; } .mocko-cols-switch, .mocko-mcols-switch { display: inline-flex; align-items: center; gap: 4px; } .mocko-mcols-switch { display: none; } /* mobile-only; revealed in the ≤768 query */ .mocko-cols-btn, .mocko-mcols-btn { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid #d9d9d9; background: #fff; color: #6a6a6a; border-radius: 4px; font-family: Montserrat, Gilroy, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .mocko-cols-btn:hover, .mocko-mcols-btn:hover { border-color: #0a0a0a; color: #0a0a0a; } .mocko-cols-btn.is-active, .mocko-mcols-btn.is-active { background: #0a0a0a; border-color: #0a0a0a; color: #fff; } /* Premmerce AJAX wrapper around the loop — no extra spacing (avoids a gap/jump between the header and the category nav) */ .shop_page .premmerce-filter-ajax-container { margin: 0 !important; padding: 0 !important; } /* empty "active filters" / chips wrappers render before the nav with a margin, then collapse → the nav jumps. Hide them when empty, kill their margin. */ .premmerce-active-filters-widget-wrapper { margin: 0 !important; padding: 0 !important; } .premmerce-active-filters-widget-wrapper:empty { display: none !important; } .wpc-custom-selected-terms { margin: 0 !important; padding: 0 !important; } .wpc-custom-selected-terms:not(:has(.wpc-filter-chip)) { display: none !important; } /* ---------- Category navigation — 1 row, horizontal scroll with arrows ---------- */ .shop_page .mocko-cat-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 16px; width: 100%; height: 36px; /* fixed → row can't change height (no jump) */ margin: 0 0 22px; font-family: Montserrat, Gilroy, sans-serif; } .shop_page .mocko-cat-scroller { position: relative; height: 36px; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } /* fade edges (shown only when there is more to scroll) */ .shop_page .mocko-cat-scroller::before, .shop_page .mocko-cat-scroller::after { content: ''; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.2s ease; } .shop_page .mocko-cat-scroller::before { left: 0; background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)); } .shop_page .mocko-cat-scroller::after { right: 0; background: linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)); } .shop_page .mocko-cat-scroller.can-prev::before { opacity: 1; } .shop_page .mocko-cat-scroller.can-next::after { opacity: 1; } .shop_page .mocko-cat-nav-list { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; height: 36px; /* fixed → no scrollbar/content-driven height shift */ min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0; } .shop_page .mocko-cat-nav-list::-webkit-scrollbar { display: none; } /* scroll arrows */ .shop_page .mocko-cat-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; box-sizing: border-box; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 4px; border: 1px solid #0a0a0a; background: #0a0a0a; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22); /* hidden by default (opacity, not display) → no pop/jump on render; JS fades the right one in */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease, background 0.15s ease; } .shop_page .mocko-cat-arrow.is-shown { opacity: 1 !important; /* beats the inline opacity:0 used to avoid the render jump */ visibility: visible; pointer-events: auto; } .shop_page .mocko-cat-arrow:hover { background: rgba(10, 10, 10, 0.82); } .shop_page .mocko-cat-arrow--prev { left: 0; } .shop_page .mocko-cat-arrow--next { right: 0; } .shop_page .mocko-cat-link { display: inline-flex; align-items: center; white-space: nowrap; box-sizing: border-box; height: 34px; padding: 0 15px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; font-size: 12px; font-weight: 300; line-height: 1; color: #0a0a0a; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .shop_page .mocko-cat-link:hover { background: #f4f4f4; border-color: #0a0a0a; color: #0a0a0a; } .shop_page .mocko-cat-link.is-active:hover { background: #0a0a0a; } /* active stays black on hover */ /* current (leaf) category — highlighted */ .shop_page .mocko-cat-link.is-active { background: #0a0a0a; border-color: #0a0a0a; color: #fff; cursor: default; } .shop_page .mocko-cat-all { flex: 0 0 auto; margin-left: auto; /* always hug the right edge */ font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #0a0a0a; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .shop_page .mocko-cat-all:hover { color: #6a6a6a; } /* ============================================================ PRODUCT GRID + CARDS (mirror .mocko-related .card) ============================================================ */ .shop_page ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); /* default; body.mocko-cols-N overrides */ gap: 30px 22px; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* configurable desktop columns — switcher / add_filter('mocko_archive_columns', fn=>3|4) */ body.mocko-cols-3 .shop_page ul.products { grid-template-columns: repeat(3, 1fr); } body.mocko-cols-4 .shop_page ul.products { grid-template-columns: repeat(4, 1fr); } .shop_page ul.products::before, .shop_page ul.products::after { content: none !important; display: none !important; } .shop_page ul.products li.product { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; display: flex !important; flex-direction: column; gap: 4px; text-align: left; position: relative; font-family: Montserrat, Gilroy, sans-serif; background: transparent; box-shadow: none; border: 0; } .shop_page ul.products li.product::before, .shop_page ul.products li.product::after { content: none !important; } /* theme card wrapper — strip its chrome + KILL the hover shadow (no shadows) */ .shop_page li.product .product-list-item { position: static !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .shop_page li.product .product-list-item:hover, .woocommerce ul.products li.product .product-list-item:hover, .woocommerce ul.products li.product .product-list-item.prod-layout-style2:hover { box-shadow: none !important; transform: none !important; } /* details block (.kw-details) → clean vertical stack. The theme renders the rating INSIDE .kw-details (via its own hook) with positioning that overlaps the price — flex + order fixes it cleanly. */ /* details block (.kw-details) — now holds only the title */ .shop_page li.product .kw-details { display: block !important; position: static !important; margin: 8px 0 0 !important; padding: 0 !important; } .shop_page li.product .kw-details > p:not(.price) { display: none !important; } /* meta block (our markup): price → sizes → rating → availability, like the related-products card with extra info stacked below. */ .shop_page li.product .mocko-loop-meta { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; } .shop_page li.product .mocko-loop-price { margin: 0 !important; } /* status badge — overlaid on the top-left of the product image (was a row under the card). li.product is position:relative, so absolute pins it to the image. */ .shop_page li.product .mocko-loop-statusline { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; max-width: calc(100% - 16px); } /* hide the old image badges (Out of stock / Limited / Italian) — the status badge now occupies that top-left spot */ .product-availability-p-out { display: none !important; } .shop_page li.product .mocko-loop-rating { display: inline-flex; align-items: center; gap: 6px; line-height: 1; flex: 0 0 auto; } /* clean stars (★) — yellow filled, grey empty; no verbose WC text */ .shop_page li.product .mocko-loop-stars { display: inline-flex; align-items: center; font-size: 19px; line-height: 1; letter-spacing: 1px; color: #f5b301; transform: translateY(-2px); /* optical nudge: ★ glyph sits low in its line box */ } .shop_page li.product .mocko-loop-stars .off { color: #d9d9d9; } .shop_page li.product .mocko-loop-rating-count { font-family: Montserrat, Gilroy, sans-serif; font-size: 12px; color: #9a9a9a; } /* availability — reuse .mocko-stock-line (custom.css), just compact for cards */ .shop_page li.product .mocko-stock-line { margin: 0 !important; font-size: 11px !important; gap: 8px; } .shop_page li.product .mocko-stock-text { font-weight: 300 !important; } @media (max-width: 404px) { .shop_page li.product .mocko-stock-line { font-size: 10px !important; } } /* image link (wraps image + title in WC loop) */ .shop_page li.product > a.woocommerce-LoopProduct-link, .shop_page li.product > a.woocommerce-loop-product__link { display: block; text-decoration: none; color: inherit; } /* image frame (Kallyas wraps the img in span.kw-prodimage) */ .shop_page li.product .kw-prodimage, .shop_page li.product a > img:only-child { display: block !important; position: relative; width: 100% !important; height: auto !important; overflow: hidden; background: #fafafa; border-radius: 2px; } .shop_page li.product .kw-prodimage img, .shop_page li.product .kw-prodimage-img, .shop_page li.product a.woocommerce-LoopProduct-link img { width: 100% !important; height: auto !important; object-fit: cover; display: block; margin: 0 !important; border-radius: 2px; transition: transform 0.55s cubic-bezier(.22,.61,.36,1), opacity 0.3s ease; } .shop_page li.product:hover .kw-prodimage img, .shop_page li.product:hover .kw-prodimage-img { transform: scale(1.04); } /* secondary (hover) image if the theme outputs one */ .shop_page li.product .kw-prodimage-img-secondary { position: absolute; inset: 0; opacity: 0; } .shop_page li.product:hover .kw-prodimage-img-secondary { opacity: 1; } /* sale / new badge → Mocko muted black tag (kills the red speech-bubble) */ .shop_page li.product .onsale, .shop_page li.product .zonsale, .shop_page li.product .zn_badge_sale, .shop_page li.product .zn_badge_new, .shop_page li.product .zn_badge_container > span { position: absolute !important; top: 3px; right: 0px; left: auto; bottom: auto; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; padding: 4px 8px !important; background: #0a0a0a !important; color: #fff !important; border: 0 !important; border-radius: 3px !important; font-family: Montserrat, Gilroy, sans-serif !important; font-size: 11px !important; font-weight: 300; letter-spacing: 0.02em; line-height: 1.3 !important; text-transform: none; z-index: 3; } .shop_page li.product .onsale::before, .shop_page li.product .onsale::after, .shop_page li.product .zonsale::before, .shop_page li.product .zonsale::after, .shop_page li.product .zn_badge_sale::before, .shop_page li.product .zn_badge_sale::after { content: none !important; display: none !important; border: 0 !important; } /* title */ .shop_page li.product .woocommerce-loop-product__title, .shop_page li.product h2.woocommerce-loop-product__title, .shop_page li.product h3 { font-family: Montserrat, Gilroy, sans-serif !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1.4 !important; letter-spacing: 0.02em; color: #0a0a0a !important; text-transform: none !important; margin: 0 !important; padding: 0 !important; /* natural height — title takes only the lines it needs (no reserved gap) */ } /* Hide WooCommerce's own .star-rating in the loop — we render our own clean .mocko-loop-stars. (Kills the leftover/duplicate rating element.) */ .shop_page li.product .star-rating { display: none !important; } /* price */ .shop_page li.product .price { font-family: Montserrat, Gilroy, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #0a0a0a !important; display: block; float: none; clear: both; margin: 4px 0 0 !important; } .shop_page li.product .price del, .shop_page li.product .price del .woocommerce-Price-amount { color: #9a9a9a !important; font-weight: 300 !important; font-size: 12px !important; opacity: 1 !important; margin-right: 0px; } .shop_page li.product .price ins, .shop_page li.product .price ins .woocommerce-Price-amount { text-decoration: none !important; background: transparent !important; color: #0a0a0a !important; font-weight: 300 !important; } /* the price number itself (overrides the global span.woocommerce-Price-amount 14px) */ .shop_page li.product .price .woocommerce-Price-amount { font-size: 13px !important; } .shop_page li.product .price del .woocommerce-Price-amount { font-size: 11px !important; } /* available variation sizes on the card (in-stock vs out) */ .shop_page li.product .mocko-loop-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; } .shop_page li.product .mocko-loop-size { font-family: Montserrat, Gilroy, sans-serif; font-size: 10px; font-weight: 300; line-height: 1; min-width: 24px; padding: 4px 6px; text-align: center; color: #0a0a0a; border: 1px solid #d9d9d9; border-radius: 3px; background: #fff; text-transform: uppercase; letter-spacing: 0.02em; } .shop_page li.product .mocko-loop-size.is-out { color: #c4c4c4; border-color: #ededed; background: #fafafa; text-decoration: line-through; } /* add-to-cart / "Обрати розмір" button — removed from cards (the whole card links to the product). Hidden as a backup to the PHP remove_action. */ .shop_page li.product .button, .shop_page li.product a.add_to_cart_button, .shop_page li.product a.product_type_variable, .shop_page li.product a.product_type_simple, .shop_page li.product .added_to_cart { display: none !important; } /* ============================================================ FILTERS (Filter Everything / WPC) — Mocko style. NOT scoped to .shop_page: the drawer is moved to (js/shop.js) and WPC's mobile drawer lives outside .shop_page too — so we target the WPC classes directly (they only appear in filter widgets). ============================================================ */ .widget_wpc_filters_widget, .wpc-filters-widget, .wpc-filters-widget-wrapper, .wpc-filters-main-wrap { font-family: Montserrat, Gilroy, sans-serif !important; color: #0a0a0a; } /* widget heading + the "edit filter set" admin link */ .wpc-filter-set-widget-title { font-family: Montserrat, Gilroy, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #0a0a0a !important; margin: 0 0 16px !important; } .wpc-edit-filter-set { display: none !important; } /* each filter section */ .wpc-filters-section { border-bottom: 1px solid #e9e9e9 !important; margin: 0 0 18px !important; padding: 0 0 18px !important; } .wpc-filters-section:last-child { border-bottom: 0 !important; } /* section header (label or our +/- trigger from the mu-plugin) */ .wpc-filter-header { margin: 0; } .wpc-filter-title, .wpc-filter-title.widget-title, .ywf-wpc-filter-trigger { font-family: Montserrat, Gilroy, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #0a0a0a !important; margin: 0 0 14px !important; padding: 0 !important; background: none !important; border: 0 !important; } .ywf-wpc-filter-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; margin-bottom: 0 !important; } .ywf-wpc-filter-trigger .wpc-open-icon svg { width: 18px; height: 18px; } .ywf-wpc-filter-trigger .wpc-icon-plus path { fill: #0a0a0a; } .ywf-wpc-filter-trigger .wpc-icon-minus path { stroke: #0a0a0a; } /* term list */ ul.wpc-filters-ul-list, ul.wpc-filters-checkboxes { list-style: none !important; margin: 0 !important; padding: 0 !important; } li.wpc-term-item { margin: 0 0 11px !important; padding: 0 !important; } li.wpc-term-item:last-child { margin-bottom: 0 !important; } .wpc-term-item-content-wrapper { display: flex !important; align-items: center; gap: 0; } li.wpc-term-item label, li.wpc-term-item .wpc-term-item-content-wrapper > label, li.wpc-term-item a { font-family: Montserrat, Gilroy, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.3 !important; color: #2a2a2a !important; text-decoration: none !important; cursor: pointer; display: inline-flex; align-items: center; margin: 0; } li.wpc-term-item:hover label, li.wpc-term-item:hover a { color: #0a0a0a !important; } .wpc-term-count, .wpc-term-count-value { color: #9a9a9a !important; font-size: 12px !important; margin-left: 5px; font-weight: 400 !important; } /* custom checkbox — 18×18, black filled with white check */ .wpc-term-item-content-wrapper input[type="checkbox"], li.wpc-term-item input[type="checkbox"], .wpc-term-item-content-wrapper input[type="radio"], li.wpc-term-item input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px !important; flex: 0 0 18px; border: 1.5px solid #c9c9c9 !important; border-radius: 4px !important; background: #fff !important; margin: 0 10px 0 0 !important; padding: 0 !important; cursor: pointer; position: relative; transition: border-color 0.15s ease, background 0.15s ease; } .wpc-term-item-content-wrapper input[type="radio"], li.wpc-term-item input[type="radio"] { border-radius: 50% !important; } .wpc-term-item-content-wrapper input[type="checkbox"]:hover, li.wpc-term-item input[type="checkbox"]:hover, li.wpc-term-item input[type="radio"]:hover { border-color: #0a0a0a !important; } .wpc-term-item-content-wrapper input[type="checkbox"]:checked, li.wpc-term-item input[type="checkbox"]:checked { background-color: #0a0a0a !important; border-color: #0a0a0a !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7L6 10L11 4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 12px 12px !important; } li.wpc-term-item input[type="radio"]:checked { background-color: #0a0a0a !important; border-color: #0a0a0a !important; box-shadow: inset 0 0 0 3px #fff !important; } /* "Показати більше / менше" (more / less toggle) — appearance only; WPC hides the inactive control via state classes, so we must NOT set `display`. */ .wpc-filter-more-less .wpc-toggle-a, .wpc-see-more-control, .wpc-see-less-control { font-family: Montserrat, Gilroy, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.06em; text-transform: uppercase; color: #0a0a0a !important; text-decoration: underline !important; text-underline-offset: 3px; border: 0 !important; background: none !important; padding: 0 !important; margin: 10px 0 0 !important; cursor: pointer; } .wpc-filter-more-less .wpc-toggle-a:hover { color: #6a6a6a !important; } /* posts-found count inside the widget */ .wpc-posts-found { font-family: Montserrat, Gilroy, sans-serif !important; font-size: 12px !important; color: #6a6a6a !important; } /* search field inside a filter (if any) */ .wpc-search-field, .wpc-filter-search-field input, .wpc-filters-main-wrap input[type="text"] { font-family: Montserrat, Gilroy, sans-serif !important; border: 1px solid #d9d9d9 !important; border-radius: 6px !important; padding: 8px 12px !important; font-size: 14px !important; } /* ============================================================ OPEN / CLOSE (mobile drawer + overlay) ============================================================ */ /* WPC open button "Фільтри" — styled IDENTICAL to our .mocko-filter-btn */ .wpc-filters-open-widget, .wpc-filters-open-button-container a { display: inline-flex !important; align-items: center; gap: 10px; box-sizing: border-box; height: 36px; padding: 0 18px !important; background: #fff !important; color: #0a0a0a !important; border: 0 !important; border-radius: 4px !important; font-family: Montserrat, Gilroy, sans-serif !important; font-size: 12px !important; font-weight: 300 !important; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none !important; } .wpc-filters-open-widget .wpc-button-inner { display: inline-flex !important; align-items: center; gap: 10px; } .wpc-filters-open-widget .wpc-filters-button-text { font: inherit; letter-spacing: inherit; text-transform: inherit; } /* hide WPC's native icon and draw OUR icon (same 3 decreasing bars as .mocko-filter-btn__icon) */ .wpc-filters-open-widget .wpc-icon-html-wrapper { display: none !important; } .wpc-filters-open-widget .wpc-button-inner::before { content: ''; width: 16px; height: 12px; flex: 0 0 16px; opacity: 0.7; /* match .mocko-filter-btn__icon — softer than the label */ background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1.4px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 70% 1.4px no-repeat, linear-gradient(currentColor, currentColor) 0 10px / 40% 1.4px no-repeat; } .wpc-filters-open-widget:hover { background: transparent !important; color: #0a0a0a !important; } /* backdrop */ .wpc-filters-overlay { background: rgba(10,10,10,0.45) !important; } /* bottom-drawer panel (mobile) */ .wpc_show_bottom_widget .wpc-filters-widget-content { border-radius: 14px 14px 0 0 !important; background: #fff !important; } .wpc-filters-widget-top-container { font-family: Montserrat, Gilroy, sans-serif !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* bottom controls: Apply (black) + Cancel (outline) */ .wpc-filters-apply-button, .wpc-filters-widget-controls-one a { display: inline-flex !important; align-items: center; justify-content: center; background: #0a0a0a !important; color: #fff !important; border: 1px solid #0a0a0a !important; border-radius: 4px !important; font-family: Montserrat, Gilroy, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none !important; padding: 12px 20px !important; } .wpc-filters-apply-button:hover { background: rgba(10,10,10,0.85) !important; color: #fff !important; } .wpc-filters-close-button, .wpc-filters-widget-controls-two a { font-family: Montserrat, Gilroy, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.06em; text-transform: uppercase; color: #0a0a0a !important; text-decoration: underline !important; text-underline-offset: 3px; } /* chips (selected filters) — ONLY ever visible inside the toolbar (or the filter drawer). Hidden at their original WPC location so selecting a filter (AJAX) never flashes them at the top + jumps the layout. */ .wpc-custom-selected-terms, .wpc-filter-chips-list { display: none !important; } .mocko-toolbar-chips .wpc-custom-selected-terms, .mocko-toolbar-chips .wpc-filter-chips-list, .mocko-archive-aside .wpc-custom-selected-terms, .mocko-archive-aside .wpc-filter-chips-list { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* center the chips inside the toolbar */ .mocko-toolbar-chips .wpc-custom-selected-terms, .mocko-toolbar-chips .wpc-filter-chips-list { width: 100% !important; justify-content: center !important; } /* empty → stay hidden even in the toolbar */ .mocko-toolbar-chips .wpc-filter-chips-list.wpc-empty-chips-container, .mocko-toolbar-chips .wpc-custom-selected-terms:not(:has(.wpc-filter-chip)) { display: none !important; } .wpc-filter-chip { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: none !important; } .wpc-filter-chip > a { display: inline-flex !important; align-items: center; gap: 6px; font-family: Montserrat, Gilroy, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1; color: #0a0a0a !important; text-decoration: none !important; background: #fff !important; border: 1px solid #d9d9d9 !important; border-radius: 4px !important; padding: 7px 12px !important; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .wpc-filter-chip > a:hover { border-color: #0a0a0a !important; } .wpc-filter-chip .wpc-chip-content { display: inline-flex; align-items: center; gap: 6px; } .wpc-filter-chip .wpc-filter-chip-name { text-transform: none; letter-spacing: 0.01em; } .wpc-filter-chip .wpc-chip-remove-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: #9a9a9a; } .wpc-filter-chip > a:hover .wpc-chip-remove-icon { color: #0a0a0a; } /* reset-all chip — black filled (clear) */ .wpc-filter-chip.wpc-chip-reset-all > a { background: #0a0a0a !important; border-color: #0a0a0a !important; color: #fff !important; } .wpc-filter-chip.wpc-chip-reset-all > a:hover { background: rgba(10,10,10,0.82) !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { body .shop_page ul.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { /* mobile columns — default 2, switchable to 1 */ body .shop_page ul.products { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; } body.mocko-mcols-1 .shop_page ul.products { grid-template-columns: 1fr !important; } body.mocko-mcols-2 .shop_page ul.products { grid-template-columns: repeat(2, 1fr) !important; } /* WPC's default "Фільтри" button now lives in the products header (moved in functions.php, where "Всі товари" was) — sit it inline on the title row, no vertical gaps, no padding (matches the desktop toggle). */ .shop_page .woocommerce-products-header .wpc-filters-open-button-container { margin: 0 0 0 auto !important; } .wpc-filters-open-widget, .wpc-filters-open-button-container a { padding: 0 !important; } /* drawer takes most of the screen on phones */ .shop_page > .container > .row > aside, .mocko-archive-aside { width: 88vw !important; } /* swap switchers: hide desktop (3/4), show mobile (1/2) */ .mocko-cols-switch { display: none !important; } .mocko-mcols-switch { display: inline-flex !important; } /* on mobile we rely on WPC's own button (.wpc-filters-open-widget) — hide ours */ #mocko-filter-toggle { display: none !important; } /* chips already show inside the filters drawer on mobile — hide toolbar copy */ .mocko-toolbar-chips { display: none !important; } /* toolbar now sits in the header; on mobile its toggle + chips are hidden, so the container is empty — keep it from adding any height to the title row */ .mocko-shop-toolbar { margin: 0; width: max-content; max-width: 100%; } .shop_page ul.products { clear: both; } /* mobile font sizes */ .shop_page .woocommerce-products-header__title, .woocommerce.archive .woocommerce-products-header__title.page-title { font-size: 13px !important; } .shop_page .mocko-cat-link { font-size: 11px; padding: 0 10px; } /* minimal side gutters on mobile — let the grid use the full width (theme .container is 15px each side by default) */ .shop_page > .container { padding-left: 8px !important; padding-right: 8px !important; } /* pull the category-nav arrows out to the screen edges */ .shop_page .mocko-cat-arrow--prev { left: -8px; } .shop_page .mocko-cat-arrow--next { right: -8px; } } @media (min-width: 769px) { .mocko-mcols-switch { display: none !important; } } @media (max-width: 480px) { body .shop_page ul.products { gap: 20px 12px; } }