) so nothing leaks onto other pages. Toggle states (open dropdown, active tab, active wishlist icon, active price-unit link) are assumed to use ".active" — the convention used everywhere else already in this template — since the real toggle JS itself is not present in this repo to verify against (loaded from cdn_url). See report for this open risk. ========================================================================== */ .wp-product{ padding-bottom:8px; } .wp-product .h1-title{ margin-top:0; } .wp-product .title-inner-wrap{ margin-bottom:20px; } /* ---------- breadcrumbs ---------- */ .wp-product .breadcrumbs-box .menu{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0 0 20px; padding:0; font-size:13px; color:var(--wp-text-muted); } .wp-product .breadcrumbs-box li{ display:flex; align-items:center; gap:4px; } .wp-product .breadcrumbs-box li:not(:last-child)::after{ content:"\203A"; margin-left:4px; color:var(--wp-border-hover); } .wp-product .breadcrumbs-box a{ color:var(--wp-text-muted); font-weight:500; } .wp-product .breadcrumbs-box a:hover{ color:var(--wp-blue); } .wp-product .breadcrumbs-box li:last-child{ color:var(--wp-ink); font-weight:600; } /* ---------- gallery + info two-column row (wrapper added in product.tpl) ---------- */ .wp-product-top{ display:grid; grid-template-columns:440px 1fr; gap:40px; align-items:start; margin-bottom:32px; } .wp-product .photos-inner-wrap{ position:relative; } .wp-product .tiles-thumbs-slider-box{ display:flex; flex-direction:column; gap:12px; } .wp-product .slider-photos-main{ position:relative; width:100%; aspect-ratio:1/1; border-radius:var(--wp-radius-lg); overflow:hidden; background:var(--wp-bg-panel); } .wp-product .slider-photos-main .slider-wrap, .wp-product .slider-photos-main .slider{ height:100%; } .wp-product .slider-photos-main .sl-wrap{ width:100%; height:100%; } .wp-product .slider-photos-main .elm-photo{ display:block; width:100%; height:100%; } .wp-product .slider-photos-main .elm-photo img{ width:100%; height:100%; object-fit:contain; display:block; } .wp-product .slider-photos-main-pagination{ position:absolute; bottom:12px; left:0; right:0; display:flex !important; justify-content:center; align-items:center; gap:6px; z-index:2; } .wp-product .slider-photos-main-pagination span[class*="bullet"]{ width:7px; height:7px; border-radius:50%; background:var(--wp-border-hover); cursor:pointer; transition:width .25s ease,background-color .25s ease; opacity:1; } .wp-product .slider-photos-main-pagination span[class*="bullet-active"]{ width:18px; border-radius:4px; background:var(--wp-blue); } .wp-product .slider-photos-thumbs{ position:relative; padding:0 26px; } .wp-product .slider-photos-thumbs .slider-wrap{ overflow:hidden; } .wp-product .slider-photos-thumbs .slider{ display:flex; gap:8px; } .wp-product .slider-photos-thumbs .sl-wrap{ flex:none; width:64px; height:64px; cursor:pointer; } .wp-product .slider-photos-thumbs .elm-photo{ width:100%; height:100%; box-sizing:border-box; padding:4px; border-radius:8px; border:1px solid var(--wp-border); overflow:hidden; display:block; transition:border-color .2s ease,box-shadow .2s ease; background:#fff; } .wp-product .slider-photos-thumbs .elm-photo img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:5px; } .wp-product .slider-photos-thumbs .sl-wrap:hover .elm-photo{ border-color:var(--wp-border-hover); box-shadow:0 4px 10px rgba(27,29,34,.14); } .wp-product .slider-photos-thumbs .swiper-slide-thumb-active .elm-photo{ border-color:var(--wp-blue); box-shadow:0 4px 10px rgba(27,29,34,.14); } .wp-product .photo-play{ position:relative; } .wp-product .photo-play::after{ content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%; background:rgba(27,29,34,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/10px no-repeat; } .wp-product .button-slider-photos-thumbs-prev, .wp-product .button-slider-photos-thumbs-next{ position:absolute; top:32px; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:#fff; border:1px solid var(--wp-border); box-shadow:var(--wp-shadow-card); cursor:pointer; z-index:3; } .wp-product .button-slider-photos-thumbs-prev{ left:0; } .wp-product .button-slider-photos-thumbs-next{ right:0; } .wp-product .button-slider-photos-thumbs-prev::before, .wp-product .button-slider-photos-thumbs-next::before{ content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; border:solid var(--wp-text); border-width:0 2px 2px 0; } .wp-product .button-slider-photos-thumbs-prev::before{ transform:translate(-30%,-50%) rotate(135deg); } .wp-product .button-slider-photos-thumbs-next::before{ transform:translate(-70%,-50%) rotate(-45deg); } /* badges + fav/video actions, overlaid on the gallery */ .wp-product .stickers-info-wrap{ position:absolute; top:12px; left:12px; z-index:3; display:flex; flex-direction:column; gap:8px; } .wp-product .elm-sticker{ display:inline-flex; align-items:center; gap:6px; border-radius:6px; padding:5px 10px; color:#fff; } .wp-product .elm-sticker .st-title{ font-size:12px; font-weight:700; } .wp-product .elm-sticker .elm-ico{ display:flex; width:13px; height:13px; flex:none; } .wp-product .elm-sticker .elm-ico img{ width:100%; height:100%; filter:brightness(0) invert(1); } .wp-product .elm-sticker.bg-att{ background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); } .wp-product .elm-sticker.bg-alert{ background:linear-gradient(135deg,var(--wp-pink),var(--wp-pink-dark)); } .wp-product .actions-info-wrap{ position:absolute; top:12px; right:12px; z-index:3; display:flex; flex-direction:column; gap:8px; } .wp-product .actions-info-wrap > *{ width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--wp-shadow-card); } .wp-product .actions-info-wrap img{ width:17px; height:17px; display:block; } .wp-product .actions-info-wrap .ico-fav{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6270' stroke-width='2'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:18px 18px; } .wp-product .actions-info-wrap .ico-fav.active{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E0537C' stroke='%23E0537C' stroke-width='2'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E"); } /* ---------- right column: stock/article, price panel, price tiers, delivery ---------- */ .wp-product .info-inner-wrap.price-info{ min-width:0; } .wp-product .product-info-wrap{ margin-bottom:10px; } .wp-product .item-article-flex{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; } .wp-product .elm-stock{ font-weight:600; color:var(--wp-green); } .wp-product .elm-stock.stock-out{ color:var(--wp-red); } .wp-product .elm-stock.stock-wait{ color:var(--wp-amber); } .wp-product .product-art{ color:var(--wp-text-muted); } .wp-product .product-art span{ color:var(--wp-ink); font-weight:600; } .wp-product #change-unit{ display:flex; justify-content:flex-end; margin-top:6px; } .wp-product #change-unit a{ font-size:12px; color:var(--wp-blue); font-weight:600; } .wp-product #change-unit .button-title-border{ border-bottom:1px dashed var(--wp-blue); } .wp-product #change-unit a.hide{ display:none; } .wp-product .tooltip-content-box{ background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); box-shadow:var(--wp-shadow-card); padding:14px 16px; font-size:13px; z-index:30; } .wp-product .wh-title{ font-weight:700; color:var(--wp-ink); margin-bottom:8px; } .wp-product .wh-row{ display:flex; justify-content:space-between; gap:16px; padding:4px 0; color:var(--wp-text); } .wp-product .wh-in{ color:var(--wp-green); font-weight:600; } .wp-product .wh-order, .wp-product .wh-wait{ color:var(--wp-amber); font-weight:600; } .wp-product-price-panel{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--wp-bg-panel); border-radius:10px; padding:18px 20px; margin:14px 0 24px; } .wp-product .price-info-wrap{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .wp-product .elm-price{ font-size:30px; font-weight:800; color:var(--wp-ink); white-space:nowrap; } .wp-product .elm-price.price-all{ font-size:14px; font-weight:600; color:var(--wp-text-muted); } .wp-product .elm-price .price-unit{ font-weight:700; } .wp-product .counter-info-wrap{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .wp-product .counter-wrap{ display:flex; } .wp-product .frm-field-counter{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; border:1px solid var(--wp-border); border-radius:10px; padding:0 12px; min-height:48px; background:#fff; box-sizing:border-box; } .wp-product .frm-field-counter .button-plus, .wp-product .frm-field-counter .button-minus{ order:2; width:20px; height:20px; border:none; background:none; color:var(--wp-text); font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0; position:relative; flex:none; } .wp-product .frm-field-counter .button-minus{ order:1; } .wp-product .frm-field-counter .button-plus{ order:3; } .wp-product .frm-field-counter .button-minus::before{ content:"\2212"; font-size:16px; } .wp-product .frm-field-counter .button-plus::before{ content:"+"; font-size:16px; } .wp-product .frm-field-counter .button-disabled{ opacity:.35; cursor:not-allowed; } .wp-product .js-input-counter{ order:4; border:none; background:transparent; text-align:center; font-size:14px; font-weight:700; color:var(--wp-ink); width:74px; font-family:inherit; padding:0; } .wp-product .field-total{ order:5; flex-basis:100%; font-size:11px; line-height:1.4; color:var(--wp-text-muted); padding:2px 0 6px; } .wp-product .button-wrap{ flex:1; min-width:150px; } .wp-product .button-wrap .btn{ display:flex; align-items:center; justify-content:center; height:48px; width:100%; box-sizing:border-box; padding:0 24px; border-radius:10px; background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition:filter .25s ease; border:none; } .wp-product .button-wrap .btn:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; } /* price-tiers table ("Ваша цена" / "Экономия") + КП request link */ .wp-product .features-info-wrap{ margin:4px 0 24px; } .wp-product .features-info-wrap table{ width:100%; border-collapse:collapse; } .wp-product .features-info-wrap thead th{ font-size:13px; font-weight:700; color:var(--wp-ink); text-align:center; padding-bottom:12px; border-bottom:1px solid var(--wp-border); } .wp-product .features-info-wrap tbody td{ font-size:14px; color:var(--wp-text); text-align:center; padding:14px 6px; border-bottom:1px solid var(--wp-border); vertical-align:middle; } .wp-product .features-info-wrap .text-light{ color:var(--wp-text-muted); font-size:12px; } .wp-product .features-info-wrap table:last-of-type{ margin-top:4px; } .wp-product .features-info-wrap table:last-of-type td{ border-bottom:none; text-align:center; padding:14px 0 0; } .wp-product .features-info-wrap table:last-of-type a{ font-size:14px; font-weight:600; color:var(--wp-blue); } .wp-product .features-info-wrap table:last-of-type a:hover{ color:var(--wp-blue-dark); } /* delivery / pickup option cards (delivery_info.tpl) */ .wp-product .delivery-info-wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding-top:8px; } .wp-product .delivery-item-wrap{ position:relative; } .wp-product .frm-field-select{ height:100%; position:relative; } .wp-product .btn-popup{ display:flex; align-items:flex-start; gap:10px; height:100%; box-sizing:border-box; background:var(--wp-bg-panel); border:1px solid var(--wp-border); border-radius:10px; padding:14px; cursor:pointer; text-decoration:none; color:inherit; transition:border-color .2s ease; } .wp-product .btn-popup:hover{ border-color:var(--wp-border-hover); color:inherit; } .wp-product .btn-popup .button-ico{ flex:none; width:18px; height:18px; margin-top:2px; } .wp-product .btn-popup .button-ico img{ width:100%; height:100%; object-fit:contain; } .wp-product .btn-popup .button-name{ font-size:14px; font-weight:600; color:var(--wp-ink); line-height:1.4; } .wp-product .select-content-block{ display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:260px; background:#fff; border:1px solid var(--wp-border); border-radius:10px; box-shadow:var(--wp-shadow-card); padding:8px; z-index:12; } .wp-product .frm-field-select.active .select-content-block, .wp-product .select-content-block.active{ display:block; } .wp-product .select-content-block .menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .wp-product .select-content-block li.hide{ display:none; } .wp-product .select-content-block .btn-menu{ display:flex; gap:10px; align-items:flex-start; padding:8px; border-radius:8px; text-decoration:none; color:inherit; transition:background-color .2s ease; } .wp-product .select-content-block .btn-menu:hover{ background:var(--wp-bg-panel); color:inherit; } .wp-product .select-content-block .button-ico{ flex:none; width:16px; height:16px; margin-top:2px; } .wp-product .select-content-block .button-ico img{ width:100%; height:100%; } .wp-product .select-content-block .button-name{ font-size:13px; font-weight:700; color:var(--wp-ink); flex:none; } .wp-product .select-content-block .button-title{ font-size:13px; color:var(--wp-text); line-height:1.5; } .wp-product .logo-info-wrap{ display:flex; align-items:center; justify-content:center; text-align:center; margin-top:12px; min-height:44px; padding:10px 16px; border-radius:10px; background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom)); color:#fff; font-size:14px; font-weight:700; text-decoration:none; } .wp-product .logo-info-wrap:hover{ filter:brightness(1.1); color:#fff; } .wp-product .info-title{ margin:0; } /* ---------- variants ("Этот товар в других вариантах") ---------- */ .wp-product .info-variants-box{ background:var(--wp-bg-panel); border-radius:10px; padding:24px; margin-bottom:32px; } .wp-product .tags-box .title-inner-wrap{ margin-bottom:16px; } .wp-product .tags-box-wrap{ margin-bottom:16px; } .wp-product .tags-box-wrap:last-child{ margin-bottom:0; } .wp-product .tile-title{ font-size:14px; font-weight:600; color:var(--wp-ink); margin-bottom:10px; } .wp-product .tags-box-wrap .menu{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; } .wp-product .button-tag{ display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:6px; border:1px solid var(--wp-border); background:#fff; color:var(--wp-ink); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; transition:border-color .2s ease; } .wp-product .button-tag:hover{ border-color:var(--wp-border-hover); color:var(--wp-ink); } .wp-product .button-tag.active{ background:linear-gradient(180deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-weight:700; border-color:transparent; } .wp-product .button-tag.not-stock-item{ background:#F1F3F5; color:var(--wp-border-hover); border-color:var(--wp-border); cursor:default; } /* ---------- description / reviews / payment / delivery / return tabs ---------- */ .wp-product .tabs-box .menu{ list-style:none; display:flex; gap:28px; margin:0; padding:0; border-bottom:1px solid var(--wp-border); overflow-x:auto; } .wp-product .button-tab-line{ position:relative; display:block; padding:0 0 14px; font-size:16px; font-weight:600; color:var(--wp-text-muted); cursor:pointer; white-space:nowrap; text-decoration:none; } .wp-product .button-tab-line::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--wp-blue); transform:scaleX(0); transform-origin:center; transition:transform .3s cubic-bezier(.22,.61,.36,1); } .wp-product .button-tab-line:hover{ color:var(--wp-ink); } .wp-product .button-tab-line.active{ color:var(--wp-ink); } .wp-product .button-tab-line.active::after{ transform:scaleX(1); } .wp-product .info-features-box{ display:none; padding-top:24px; } .wp-product .info-features-box.active{ display:block; } .wp-product .info-features-box h2.h3-title{ margin-top:0; } .wp-product .info-features-box .section-inner-wrap + .section-inner-wrap{ margin-top:28px; } .wp-product .info-features-box p, .wp-product .info-features-box li{ font-size:15px; line-height:1.75; color:var(--wp-text); } .wp-product .info-features-box b{ color:var(--wp-ink); } .wp-product .info-features-box ul{ padding-left:20px; margin:8px 0; } .wp-product .info-features-box a.link{ color:var(--wp-blue); } .wp-product .info-features-box a.link:hover{ color:var(--wp-blue-dark); } .wp-product .note-btn{ background:none; border:none; padding:0; font:inherit; color:var(--wp-blue); font-weight:600; cursor:pointer; } .wp-product .dropdown-note{ font-size:14px; color:var(--wp-text); line-height:1.7; margin-top:8px; } /* description tab: two columns (text + characteristics) on wide screens via its first .section-inner-wrap (productLadyChars.tpl) + second (product->desc) */ .wp-product [data-tab="tab01"] .section-content{ display:flex; flex-direction:column; gap:2px; } .wp-product [data-tab="tab01"] .section-content p{ margin:0; } .wp-product [data-tab="tab01"] .section-content p br{ content:""; display:block; margin:9px 0; } /* ---------- share ---------- */ .wp-product .share-box{ display:flex; align-items:center; gap:12px; margin:32px 0 8px; } .wp-product .share-title{ font-size:14px; font-weight:600; color:var(--wp-ink); margin:0; } .wp-product .share-items{ display:flex; align-items:center; gap:8px; } .wp-product .button-soc{ width:34px; height:34px; border-radius:50%; background:var(--wp-bg-panel); border:1px solid var(--wp-border); display:flex; align-items:center; justify-content:center; transition:background-color .2s ease,border-color .2s ease; } .wp-product .button-soc:hover{ background:#fff; border-color:var(--wp-border-hover); } .wp-product .button-soc img{ width:16px; height:16px; } /* ---------- compact "related_items_small.tpl" rows (accessories / compatible) ---------- */ .wp-parts{ margin:0 0 32px; } .wp-parts .section-counter{ font-size:13px; color:var(--wp-text-muted); margin-top:2px; } .wp-list{ display:flex; flex-direction:column; gap:1px; background:var(--wp-border); border:1px solid var(--wp-border); border-radius:var(--wp-radius); overflow:hidden; } .wp-row{ display:flex; align-items:center; gap:16px; background:#fff; padding:12px 16px; } .wp-row__thumb{ flex:none; width:56px; height:56px; border-radius:6px; overflow:hidden; background:var(--wp-bg-panel); display:block; } .wp-row__thumb img{ width:100%; height:100%; object-fit:contain; display:block; } .wp-row .tile-content-wrap{ flex:1; min-width:0; } .wp-row .tile-title{ font-size:14px; font-weight:600; color:var(--wp-ink); margin-bottom:4px; } .wp-row .tile-title a{ color:var(--wp-ink); } .wp-row .tile-title a:hover{ color:var(--wp-blue); } .wp-row .tile-info-row-wrap{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--wp-text-muted); } .wp-row .tile-art b{ color:var(--wp-ink); font-weight:600; } .wp-row .tile-stock{ color:var(--wp-green); font-weight:600; } .wp-row .tile-stock.stock-out{ color:var(--wp-amber); } .wp-row__price{ flex:none; text-align:right; min-width:110px; } .wp-row .wp-price{ font-size:16px; font-weight:800; color:var(--wp-ink); white-space:nowrap; } .wp-row .wp-price__unit{ font-size:11px; color:var(--wp-text-muted); } .wp-row .tile-action-wrap{ flex:none; display:flex; align-items:center; gap:8px; } .wp-row .tile-action-wrap .btn{ height:38px; padding:0 16px; border-radius:6px; background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom)); color:#fff; font-size:12.5px; font-weight:700; border:none; cursor:pointer; white-space:nowrap; } .wp-row .tile-action-wrap .btn:hover{ filter:brightness(1.1) saturate(1.1); } .wp-row .frm-field-counter{ min-height:38px; padding:0 8px; } .wp-row .js-input-counter{ width:52px; font-size:13px; } /* ---------- cross-sell "С этим товаром покупают" / "Вы смотрели" sliders ---------- Rendered as siblings of .wp-product (own #left-item-related/#left-item-history wrap in product.tpl, outside the .wp-root scope), so this block sets its own base typography/box-sizing instead of relying on .wp-root ancestors. */ .wp-product-cross{ padding:48px 0 0; font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; font-weight:500; color:var(--wp-ink); box-sizing:border-box; } .wp-product-cross, .wp-product-cross *{ box-sizing:border-box; } .wp-product-cross .title-box{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; } .wp-product-cross .title-wrap h1, .wp-product-cross .title-wrap h3{ margin:0; font-size:22px; font-weight:700; color:var(--wp-ink); } .wp-product-cross .title-wrap h1 a{ color:inherit; } .wp-product-cross .action-wrap .btn{ background:none; border:none; padding:0; cursor:pointer; } .wp-product-cross .button-link{ font-size:14px; font-weight:600; color:var(--wp-blue); display:inline-flex; align-items:center; gap:6px; text-decoration:none; } .wp-product-cross .button-link:hover{ color:var(--wp-blue-dark); } .wp-product-cross .button-title-border{ border-bottom:none; } .wp-product-cross .tabs-slider-box .menu{ list-style:none; display:flex; gap:24px; margin:0 0 20px; padding:0; border-bottom:1px solid var(--wp-border); overflow-x:auto; } .wp-product-cross .button-tab{ background:none; border:none; padding:0 0 12px; font:inherit; font-size:15px; font-weight:600; color:var(--wp-text-muted); cursor:pointer; position:relative; white-space:nowrap; } .wp-product-cross .button-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--wp-blue); transform:scaleX(0); transition:transform .3s cubic-bezier(.22,.61,.36,1); } .wp-product-cross .button-tab.active{ color:var(--wp-ink); } .wp-product-cross .button-tab.active::after{ transform:scaleX(1); } .wp-product-cross .tiles-slider-box{ position:relative; } .wp-product-cross .tiles-slider-box.js-tab-block{ display:none; } .wp-product-cross .tiles-slider-box.js-tab-block.active{ display:block; } .wp-product-cross .slider-tiles .slider{ display:flex; gap:16px; } .wp-product-cross .slider-tiles .sl-wrap{ flex:0 0 232px; width:232px; } .wp-product-cross .item-tile-catalog{ height:100%; background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:12px; display:flex; flex-direction:column; gap:8px; box-sizing:border-box; transition:box-shadow .25s ease,border-color .25s ease; } .wp-product-cross .item-tile-catalog:hover{ box-shadow:var(--wp-shadow-card); border-color:var(--wp-border-hover); } .wp-product-cross .button-slider-tiles-prev, .wp-product-cross .button-slider-tiles-next{ position:absolute; top:calc(50% - 10px); transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--wp-border); box-shadow:var(--wp-shadow-card); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; } .wp-product-cross .button-slider-tiles-prev{ left:-14px; } .wp-product-cross .button-slider-tiles-next{ right:-14px; } .wp-product-cross .button-slider-tiles-prev::before, .wp-product-cross .button-slider-tiles-next::before{ content:""; width:8px; height:8px; border:solid var(--wp-text); border-width:0 2px 2px 0; display:block; } .wp-product-cross .button-slider-tiles-prev::before{ transform:rotate(135deg); margin-left:3px; } .wp-product-cross .button-slider-tiles-next::before{ transform:rotate(-45deg); margin-right:3px; } .wp-product-cross .slider-scrollbar-tiles{ display:none; } .wp-product-cross .more-box{ text-align:center; margin-top:20px; } .wp-product-cross .more-box .button-link{ justify-content:center; } /* ---------- product page responsive ---------- */ @media (max-width: 1100px){ .wp-product-top{ grid-template-columns:1fr; } .wp-product .photos-inner-wrap{ max-width:440px; margin:0 auto; } } @media (max-width: 700px){ .wp-product .breadcrumbs-box .menu{ font-size:12px; } .wp-product .h1-title{ font-size:21px; } .wp-product-price-panel{ flex-direction:column; align-items:stretch; padding:16px; } .wp-product .counter-info-wrap{ width:100%; } .wp-product .frm-field-counter{ flex:1; } .wp-product .delivery-info-wrap{ grid-template-columns:1fr; } .wp-product .info-variants-box{ padding:16px; } .wp-product [data-tab] table{ font-size:13px; } .wp-product .tabs-box .menu{ gap:18px; } .wp-row{ flex-wrap:wrap; } .wp-row__price{ margin-left:auto; } .wp-product-cross .slider-tiles .sl-wrap{ flex-basis:180px; width:180px; } } /* ========================================================================== CATALOG CATEGORY PAGE — modules/catalog/templates_2025/catalog.tpl (product list of a category: sidebar + breadcrumbs + subcategory tiles + filters + product grid + pagination + SEO text + FAQ). Scoped under .wp-catalog-page, which is added (together with .wp-root, for the base font/color reset and the generic "LEGACY CONTENT RE-SKIN" rules above) to catalog.tpl's own outer .content-outer-wrap — nothing else on the site is touched. Real markup/classes from menu_catalog.tpl (category tree), podbor_lady.tpl/podbor_reset.tpl/podbor_lady_checkbox.tpl (working characteristic filters), navigate.tpl (pagination) and getProduct.tpl/product.tpl (product card, incl. js-input-counter / js-btn-tgl / js-counter add-to-basket hooks used site-wide) are kept 1:1 and only re-skinned by class — product.tpl especially is reused on 14+ other pages, so its markup itself is never edited. ========================================================================== */ .wp-catalog-page{ padding-bottom:8px; } .wp-catalog-page.content-outer-wrap{ max-width:var(--wp-maxw); margin:24px auto 0; padding:0 32px 56px; display:flex; align-items:flex-start; gap:32px; } .wp-catalog-page .content-wrap{ flex:1; min-width:0; order:2; } .wp-catalog-page .side-wrap{ flex:none; width:250px; order:1; } /* ---------- breadcrumbs ---------- */ .wp-catalog-page .breadcrumbs-box{ margin-bottom:16px; } .wp-catalog-page .breadcrumbs-box .menu{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; margin:0; padding:0; font-size:13px; color:var(--wp-text-muted); } .wp-catalog-page .breadcrumbs-box li{ display:flex; align-items:center; gap:8px; } .wp-catalog-page .breadcrumbs-box li:not(:last-child)::after{ content:"\203A"; color:var(--wp-border-hover); } .wp-catalog-page .breadcrumbs-box a{ color:var(--wp-text-muted); font-weight:500; transition:color .2s ease; } .wp-catalog-page .breadcrumbs-box a:hover{ color:var(--wp-blue); } .wp-catalog-page .breadcrumbs-box li:last-child{ color:var(--wp-ink); font-weight:600; } /* ---------- page header ---------- */ .wp-catalog-page .title-box.mb-small{ margin-bottom:20px; } .wp-catalog-page .title-wrap{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; } .wp-catalog-page .title-wrap .h1-title{ margin:0; } .wp-catalog-page .section-counter{ font-size:14px; font-weight:600; color:var(--wp-text-muted); } /* ---------- subcategory tiles (child_categoryes) ---------- */ .wp-catalog-page .tiles-categories-box{ margin-bottom:20px; } .wp-catalog-page .tiles-categories-box .main-catalog-wrap{ display:flex; flex-wrap:wrap; gap:10px; } .wp-catalog-page .tiles-categories-box .main-catalog-item{ display:flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border:1px solid var(--wp-border); border-radius:var(--wp-radius); text-decoration:none; color:inherit; transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease; } .wp-catalog-page .tiles-categories-box .main-catalog-item:hover{ background:var(--wp-bg-panel); border-color:var(--wp-border-hover); box-shadow:var(--wp-shadow-card); transform:translateY(-1px); color:inherit; } .wp-catalog-page .tiles-categories-box .main-catalog-icon{ flex:none; width:30px; height:30px; border-radius:6px; background:var(--wp-bg-panel); display:flex; align-items:center; justify-content:center; } .wp-catalog-page .tiles-categories-box .main-catalog-icon img{ max-width:20px; max-height:20px; } .wp-catalog-page .tiles-categories-box .child-catalog-title{ font-size:14px; font-weight:600; color:var(--wp-ink); line-height:1.25; } .wp-catalog-page .tiles-categories-box .main-catalog-quantity{ font-size:12px; color:var(--wp-text-muted); margin-top:1px; } /* ---------- filters: mobile trigger row (podbor_lady.tpl) ---------- */ .wp-catalog-page .filter-action-box{ display:none; gap:10px; margin-bottom:16px; } .wp-catalog-page .filter-action-box .btn{ display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:1px solid var(--wp-border); border-radius:var(--wp-radius); background:#fff; color:var(--wp-ink); font-size:13px; font-weight:700; cursor:pointer; } .wp-catalog-page .filter-action-box .button-ico img{ width:16px; height:16px; } /* selected filter chips (podbor_reset.tpl — shown when filters are applied) */ .wp-catalog-page .filter-box .filter-actions-wrap{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; background:var(--wp-bg-panel); border-radius:var(--wp-radius); padding:12px 16px; margin-bottom:20px; } .wp-catalog-page .filter-selected-wrap{ display:flex; flex-wrap:wrap; gap:8px; flex:1; } .wp-catalog-page .button-selected{ display:flex; align-items:center; gap:8px; height:32px; padding:0 6px 0 12px; border-radius:20px; background:#fff; border:1px solid var(--wp-border); font-size:13px; font-weight:600; color:var(--wp-ink); } .wp-catalog-page .button-selected .button-value{ color:var(--wp-blue); } .wp-catalog-page .button-selected .ico-clear{ width:20px; height:20px; border-radius:50%; position:relative; color:var(--wp-text-muted); cursor:pointer; } .wp-catalog-page .button-selected .ico-clear::before, .wp-catalog-page .button-selected .ico-clear::after{ content:""; position:absolute; width:10px; height:2px; background:currentColor; top:50%; left:50%; } .wp-catalog-page .button-selected .ico-clear::before{ transform:translate(-50%,-50%) rotate(45deg); } .wp-catalog-page .button-selected .ico-clear::after{ transform:translate(-50%,-50%) rotate(-45deg); } .wp-catalog-page .button-selected .ico-clear:hover{ background:var(--wp-bg-panel); color:var(--wp-ink); } .wp-catalog-page .filter-reset-wrap .button-link{ display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--wp-blue); font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; } .wp-catalog-page .filter-reset-wrap .button-link:hover{ color:var(--wp-blue-dark); } .wp-catalog-page .filter-reset-wrap .button-ico img{ width:12px; height:12px; } /* real characteristic filter panel (podbor_lady.tpl + podbor_lady_checkbox.tpl) */ .wp-catalog-page .filter-box.popup-mobile-box{ margin-bottom:20px; } .wp-catalog-page .filter-content-wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--wp-bg-panel); border-radius:var(--wp-radius); padding:14px 16px; } .wp-catalog-page .filter-section-wrap{ position:relative; } .wp-catalog-page .btn-filter-toggle{ display:flex; align-items:center; gap:10px; height:38px; padding:0 16px; border:1px solid var(--wp-border); border-radius:var(--wp-radius); background:#fff; color:var(--wp-ink); font-size:14px; font-weight:600; cursor:pointer; transition:border-color .2s ease,color .2s ease,box-shadow .2s ease; } .wp-catalog-page .btn-filter-toggle::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; flex:none; } .wp-catalog-page .btn-filter-toggle:hover{ border-color:var(--wp-border-hover); color:var(--wp-blue); box-shadow:var(--wp-shadow-card); } .wp-catalog-page .select-content-block.js-popup-block{ display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:260px; max-width:480px; max-height:340px; overflow-y:auto; background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); box-shadow:0 14px 28px rgba(27,29,34,.14); padding:16px; z-index:30; } .wp-catalog-page .select-content-block.js-popup-block.active{ display:block; } .wp-catalog-page .select-content-wrap{ display:flex; flex-direction:column; gap:10px; } .wp-catalog-page .frm-select{ display:flex; align-items:center; gap:9px; } .wp-catalog-page .frm-select input[type=checkbox]{ width:16px; height:16px; accent-color:var(--wp-blue); cursor:pointer; flex:none; } .wp-catalog-page .frm-select label{ font-size:14px; color:var(--wp-text); cursor:pointer; } .wp-catalog-page .select-content-block .btn-popup-close{ position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; border:none; background:var(--wp-bg-panel); cursor:pointer; } .wp-catalog-page .select-content-block .btn-popup-close::before, .wp-catalog-page .select-content-block .btn-popup-close::after{ content:""; position:absolute; width:12px; height:2px; background:var(--wp-text); top:50%; left:50%; } .wp-catalog-page .select-content-block .btn-popup-close::before{ transform:translate(-50%,-50%) rotate(45deg); } .wp-catalog-page .select-content-block .btn-popup-close::after{ transform:translate(-50%,-50%) rotate(-45deg); } /* tag-pill filters shown lower on the page (podbor_char_lady.tpl) */ .wp-catalog-page .tags-box{ margin:28px 0; } .wp-catalog-page .tags-box .tile-title.h3-title{ font-size:16px; font-weight:700; color:var(--wp-ink); margin:0 0 10px; } .wp-catalog-page .tags-box ul.menu{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 20px; padding:0; } .wp-catalog-page .tags-box .btn.button-tag{ display:flex; align-items:center; height:36px; padding:0 16px; border:1px solid var(--wp-border); border-radius:var(--wp-radius); color:var(--wp-ink); font-size:13px; font-weight:600; text-decoration:none; transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease; } .wp-catalog-page .tags-box .btn.button-tag:hover{ background:var(--wp-bg-panel); border-color:var(--wp-border-hover); box-shadow:var(--wp-shadow-card); color:var(--wp-blue); } .wp-catalog-page .tags-box .btn.button-tag.active{ background:var(--wp-blue); border-color:var(--wp-blue); color:#fff; } /* ---------- product grid (getProduct.tpl / product.tpl) ---------- */ .wp-catalog-page .tiles-catalog-box .items-wrap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .wp-catalog-page .item-wrap{ min-width:0; } .wp-catalog-page .item-tile-catalog{ position:relative; height:100%; display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:12px; transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease; } .wp-catalog-page .item-tile-catalog:hover{ box-shadow:var(--wp-shadow-card); transform:translateY(-2px); border-color:var(--wp-border-hover); } .wp-catalog-page .item-wrap.notStock .item-tile-catalog{ opacity:.9; } .wp-catalog-page .tile-photo-wrap{ position:relative; border-radius:6px; overflow:hidden; background:var(--wp-bg-panel); } .wp-catalog-page .tile-slider-wrap{ display:block; position:relative; } .wp-catalog-page .tile-slider{ display:flex; } .wp-catalog-page .tile-sl-wrap{ flex:none; width:100%; } .wp-catalog-page .tile-photo{ display:flex; align-items:center; justify-content:center; height:210px; } .wp-catalog-page .tile-photo img{ max-width:100%; max-height:100%; object-fit:contain; display:block; } .wp-catalog-page .tile-slider-catalog-pagination{ display:flex; gap:4px; margin-top:8px; padding:0 2px; } .wp-catalog-page .tile-slider-catalog-pagination .tile-bullet{ flex:1; height:3px; border-radius:2px; background:var(--wp-border); } .wp-catalog-page .tile-slider-catalog-pagination .tile-bullet:first-child{ background:var(--wp-blue); } .wp-catalog-page .tile-stickers-wrap{ position:absolute; top:8px; left:8px; z-index:2; display:flex; flex-direction:column; gap:4px; } .wp-catalog-page .tile-sticker, .wp-catalog-page .elm-sticker{ display:flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:700; color:#fff; } .wp-catalog-page .tile-sticker.bg-alert{ background:#E4483E; } .wp-catalog-page .elm-sticker.bg-att{ background:var(--wp-blue); } .wp-catalog-page .tile-sticker img, .wp-catalog-page .elm-sticker img{ width:12px; height:12px; filter:brightness(0) invert(1); } .wp-catalog-page .tile-actions-wrap{ position:absolute; top:8px; right:8px; z-index:2; display:flex; gap:6px; } .wp-catalog-page .tile-button-fav{ width:30px; height:30px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(27,29,34,.15); cursor:pointer; position:relative; } .wp-catalog-page .tile-button-fav::before{ content:"\2661"; font-size:15px; color:var(--wp-text-muted); line-height:1; } .wp-catalog-page .tile-button-fav.active::before{ content:"\2665"; color:#E4483E; } .wp-catalog-page .tile-actions-wrap a.tile-ico{ width:30px; height:30px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(27,29,34,.15); } .wp-catalog-page .tile-info-row-wrap{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; } .wp-catalog-page .tile-art{ color:var(--wp-text-muted); font-weight:500; } .wp-catalog-page .tile-stock{ color:var(--wp-green); font-weight:600; white-space:nowrap; } .wp-catalog-page .tile-stock.stock-wait, .wp-catalog-page .tile-stock.stock-out{ color:#C9750C; } .wp-catalog-page .tooltip-content-box{ display:none; } /* consumed by tippy via innerHTML, portalled elsewhere */ .item-tile-product-tooltip{ font-size:13px; min-width:200px; } .item-tile-product-tooltip .wh-title{ font-weight:700; margin-bottom:8px; color:var(--wp-ink); } .item-tile-product-tooltip .wh-row{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; } .item-tile-product-tooltip .wh-city{ color:var(--wp-text-muted); } .item-tile-product-tooltip .wh-val.wh-in{ color:var(--wp-green); font-weight:600; } .item-tile-product-tooltip .wh-val.wh-wait, .item-tile-product-tooltip .wh-val.wh-order{ color:#C9750C; font-weight:600; } .wp-catalog-page .tile-title-wrap{ flex:1; } .wp-catalog-page .tile-title{ font-size:14px; font-weight:600; line-height:1.35; } .wp-catalog-page .tile-title a{ color:var(--wp-ink); } .wp-catalog-page .tile-title a:hover{ color:var(--wp-blue); } .wp-catalog-page .wp-eta{ display:flex; align-items:flex-start; gap:8px; background:var(--wp-bg-panel); border-radius:6px; padding:8px 10px; font-size:11px; color:var(--wp-text-muted); margin:2px 0; } .wp-catalog-page .wp-eta img{ width:16px; height:16px; flex:none; margin-top:1px; } .wp-catalog-page .wp-eta__text b{ color:var(--wp-ink); } .wp-catalog-page .tile-bottom-wrap{ margin-top:auto; } .wp-catalog-page .tile-price-wrap{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:4px; } .wp-catalog-page .tile-price{ font-size:19px; font-weight:800; color:var(--wp-ink); white-space:nowrap; } .wp-catalog-page .tile-price-info{ font-size:12px; color:var(--wp-text-muted); font-weight:500; white-space:nowrap; } .wp-catalog-page .tile-price-info-wrap{ margin-bottom:4px; } .wp-catalog-page .price-label{ font-size:12px; color:var(--wp-text-muted); font-weight:500; margin-bottom:2px; } .wp-catalog-page .price-label b{ color:var(--wp-ink); font-weight:700; } .wp-catalog-page .tile-action-wrap.buy-btn{ display:flex; align-items:center; gap:8px; margin-top:6px; } .wp-catalog-page .tile-action-wrap .btn{ flex:1; min-width:0; height:42px; border-radius:var(--wp-radius); background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom)); color:#fff; font-size:13px; font-weight:700; border:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 8px; transition:filter .25s ease; } .wp-catalog-page .tile-action-wrap .btn:hover{ filter:brightness(1.12) saturate(1.1); } .wp-catalog-page .frm-field-counter.js-counter{ display:flex; align-items:center; gap:2px; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:0 4px; height:42px; flex:none; box-sizing:border-box; } .wp-catalog-page .js-input-counter{ border:none; text-align:center; font-size:13px; font-weight:700; color:var(--wp-ink); width:52px; font-family:inherit; background:none; } .wp-catalog-page .js-button-counter-plus, .wp-catalog-page .js-button-counter-minus{ width:18px; height:26px; border:none; background:none; color:var(--wp-text); font-weight:700; cursor:pointer; font-size:15px; } .wp-catalog-page .js-button-counter-plus::before{ content:"+"; } .wp-catalog-page .js-button-counter-minus::before{ content:"\2212"; } .wp-catalog-page .js-button-counter-plus.button-disabled, .wp-catalog-page .js-button-counter-minus.button-disabled{ opacity:.35; cursor:not-allowed; } .wp-catalog-page .field-total{ font-size:11px; color:var(--wp-text-muted); margin-top:4px; } /* ---------- pagination (navigate.tpl) ---------- */ .wp-catalog-page .pagenav-box{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap; } .wp-catalog-page .btn-page-nav{ width:36px; height:36px; border-radius:var(--wp-radius); display:flex; align-items:center; justify-content:center; color:var(--wp-text-muted); cursor:pointer; transition:background-color .2s ease; position:relative; text-decoration:none; } .wp-catalog-page .btn-page-nav:hover{ background:var(--wp-bg-panel); } .wp-catalog-page .btn-page-nav::before{ content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; } .wp-catalog-page .button-nav-prev::before{ transform:rotate(135deg); margin-left:3px; } .wp-catalog-page .button-nav-next::before{ transform:rotate(-45deg); margin-right:3px; } .wp-catalog-page .btn-page-nav.button-disabled{ opacity:.3; pointer-events:none; } .wp-catalog-page .pages-wrap{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; max-width:640px; } .wp-catalog-page .btn-page{ width:36px; height:36px; border-radius:var(--wp-radius); display:flex; align-items:center; justify-content:center; color:var(--wp-ink); font-weight:600; font-size:14px; cursor:pointer; transition:background-color .2s ease; text-decoration:none; } .wp-catalog-page .btn-page:hover{ background:var(--wp-bg-panel); } .wp-catalog-page .btn-page.active{ background:var(--wp-blue); color:#fff; font-weight:700; } .wp-catalog-page .show-more{ display:flex; justify-content:center; margin-top:20px; } .wp-catalog-page .show-more.hide{ display:none; } .wp-catalog-page .show-more .btn.button-link{ display:flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 28px; border:1px solid var(--wp-border); border-radius:var(--wp-radius); color:var(--wp-ink); font-size:14px; font-weight:700; cursor:pointer; background:none; transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease; } .wp-catalog-page .show-more .btn.button-link:hover{ background:var(--wp-bg-panel); border-color:var(--wp-border-hover); box-shadow:var(--wp-shadow-card); color:var(--wp-blue); } /* ---------- "order custom production" CTA banner ---------- */ .wp-catalog-page .action-inner-box{ margin:32px 0; border-radius:var(--wp-radius-lg); overflow:hidden; position:relative; background:var(--wp-dark); } .wp-catalog-page .action-inner-box .box-inner-wrap{ position:relative; display:flex; align-items:center; min-height:160px; } .wp-catalog-page .action-inner-box .photo-bg{ position:absolute; inset:0; z-index:0; } .wp-catalog-page .action-inner-box .photo-bg img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.55; } .wp-catalog-page .action-inner-box .info-inner-wrap{ position:relative; z-index:1; padding:32px; color:#fff; max-width:460px; } .wp-catalog-page .action-inner-box .section-title{ font-size:22px; font-weight:700; margin:0 0 8px; color:#fff; } .wp-catalog-page .action-inner-box p{ margin:0 0 16px; font-size:14px; color:rgba(255,255,255,.85); } .wp-catalog-page .action-inner-box .btn{ display:inline-flex; align-items:center; height:44px; padding:0 24px; border-radius:var(--wp-radius); background:#fff; color:var(--wp-ink); font-size:14px; font-weight:700; } .wp-catalog-page .action-inner-box .btn:hover{ background:var(--wp-bg-panel); color:var(--wp-ink); } /* ---------- SEO text + FAQ ---------- */ .wp-catalog-page .article-box{ max-width:900px; margin-top:8px; } .wp-catalog-page .wp-faq{ margin-top:16px; } .wp-catalog-page .wp-faq__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .wp-catalog-page .wp-faq__card{ background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:20px; } .wp-catalog-page .wp-faq__badge{ display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:20px; font-size:11px; font-weight:700; margin-bottom:10px; color:#fff; } .wp-catalog-page .wp-faq__badge--product{ background:var(--wp-blue); } .wp-catalog-page .wp-faq__badge--usage{ background:var(--wp-green); } .wp-catalog-page .wp-faq__badge--top{ background:#C9750C; } .wp-catalog-page .wp-faq__badge--order{ background:#7B5CC9; } .wp-catalog-page .wp-faq__question{ font-size:15px; font-weight:700; color:var(--wp-ink); margin:0 0 8px; } .wp-catalog-page .wp-faq__answer{ font-size:14px; line-height:1.6; color:var(--wp-text); margin:0; } /* ---------- sidebar: category tree (menu_catalog.tpl) ---------- */ .wp-catalog-page .side-wrap{ position:sticky; top:130px; } .wp-catalog-page .side-menu-box{ background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:16px 14px; } .wp-catalog-page .side-menu-box .popup-title-wrap{ display:none; } .wp-catalog-page #category-head.btn-menu{ display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:10px; border-bottom:1px solid var(--wp-border); } .wp-catalog-page #category-head .button-ico img{ width:20px; height:20px; } .wp-catalog-page #category-head .button-title{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wp-text-muted); } .wp-catalog-page .menu-inner-wrap ul.menu{ list-style:none; margin:0; padding:0; } .wp-catalog-page .menu-inner-wrap ul.menu.menu-main{ display:flex; flex-direction:column; gap:2px; } .wp-catalog-page .menu-inner-wrap ul.menu.menu-main > li > a.btn-menu{ display:block; padding:9px 8px; font-size:14px; font-weight:600; color:var(--wp-text); border-radius:6px; text-decoration:none; transition:color .2s ease,background-color .2s ease; } .wp-catalog-page .menu-inner-wrap ul.menu.menu-main > li > a.btn-menu:hover{ color:var(--wp-blue); } .wp-catalog-page .menu-inner-wrap ul.menu.menu-main > li > a.btn-menu.active, .wp-catalog-page .menu-inner-wrap li.open > a.btn-menu{ color:var(--wp-blue); font-weight:700; } .wp-catalog-page .menu-inner-wrap li ul.menu{ padding-left:14px; margin:2px 0 6px; display:flex; flex-direction:column; gap:1px; } .wp-catalog-page .menu-inner-wrap li ul.menu a.btn-menu{ display:block; padding:7px 8px 7px 12px; font-size:13.5px; font-weight:600; color:var(--wp-text); border-left:2px solid var(--wp-border); text-decoration:none; transition:color .2s ease,border-color .2s ease; } .wp-catalog-page .menu-inner-wrap li ul.menu a.btn-menu:hover{ color:var(--wp-blue); border-left-color:var(--wp-blue); } .wp-catalog-page .menu-inner-wrap li ul.menu a.btn-menu.active{ color:var(--wp-blue); border-left-color:var(--wp-blue); font-weight:700; } /* price-list dropdown + packaging calculator button */ .wp-catalog-page .action-inner-wrap{ margin-top:16px; display:flex; flex-direction:column; gap:10px; } .wp-catalog-page .frm-field-select.js-popup-select{ position:relative; } .wp-catalog-page .btn-popup.button-white{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:42px; border-radius:var(--wp-radius); border:1px solid var(--wp-border); background:#fff; color:var(--wp-ink); font-size:13px; font-weight:700; cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease; } .wp-catalog-page .btn-popup.button-white:hover{ border-color:var(--wp-border-hover); box-shadow:var(--wp-shadow-card); } .wp-catalog-page .btn-popup .button-ico img{ width:16px; height:16px; } .wp-catalog-page .action-inner-wrap .select-content-block{ display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); box-shadow:0 14px 28px rgba(27,29,34,.14); padding:8px; z-index:30; } .wp-catalog-page .action-inner-wrap .select-content-block.active{ display:block; } .wp-catalog-page .action-inner-wrap .select-content-block .menu{ list-style:none; margin:0; padding:0; } .wp-catalog-page .action-inner-wrap .select-content-block li.hide{ display:none; } .wp-catalog-page .action-inner-wrap .select-content-block a.btn-menu{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:6px; color:var(--wp-ink); font-size:13px; font-weight:600; text-decoration:none; } .wp-catalog-page .action-inner-wrap .select-content-block a.btn-menu:hover{ background:var(--wp-bg-panel); color:var(--wp-blue); } .wp-catalog-page .action-inner-wrap .select-content-block .button-ico img{ width:16px; height:16px; } .wp-catalog-page #calc-btn-wrap{ margin-top:2px; } .wp-catalog-page .wp-calc-btn{ display:flex; align-items:center; gap:10px; width:100%; height:52px; padding:0 16px; border:none; border-radius:var(--wp-radius); background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom)); color:#fff; cursor:pointer; box-shadow:0 4px 12px -2px rgba(0,119,191,.4); transition:filter .3s ease; } .wp-catalog-page .wp-calc-btn:hover{ filter:brightness(1.1) saturate(1.1); } .wp-catalog-page .wp-calc-btn__icon{ flex:none; width:24px; height:24px; } .wp-catalog-page .wp-calc-btn__icon svg{ width:100%; height:100%; display:block; } .wp-catalog-page .wp-calc-btn__body{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; text-align:left; } .wp-catalog-page .wp-calc-btn__title{ font-size:13px; font-weight:700; } .wp-catalog-page .wp-calc-btn__sub{ font-size:11px; color:rgba(255,255,255,.85); font-weight:600; } /* ---------- mobile off-canvas popups (side-menu-box + filter-box share .popup-mobile-box; toggled by the site's existing legacy JS via .js-popup-mobile-open/.js-popup-mobile-close — this CSS assumes it flips an "active" class on the .popup-mobile-box target, matching the .active convention used everywhere else in this codebase (js-btn-tgl, js-tabs-nav, etc.); verify on a live page and adjust the selector below if the real toggle uses a different class ---------- */ @media (max-width:900px){ .wp-catalog-page.content-outer-wrap{ flex-direction:column; gap:20px; padding:0 16px 40px; } .wp-catalog-page .side-wrap{ width:100%; position:static; } .wp-catalog-page .filter-action-box{ display:flex; } .wp-catalog-page .popup-mobile-box{ display:none; position:fixed; inset:0; z-index:70; background:#fff; overflow-y:auto; padding:0 0 24px; } .wp-catalog-page .popup-mobile-box.active{ display:block; } .wp-catalog-page .side-menu-box.popup-mobile-box, .wp-catalog-page .filter-box.popup-mobile-box{ border:none; border-radius:0; padding:0; margin-bottom:0; } .wp-catalog-page .popup-mobile-box .popup-title-wrap{ display:flex !important; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--wp-border); position:sticky; top:0; background:#fff; z-index:2; } .wp-catalog-page .popup-mobile-box .popup-title{ font-size:16px; font-weight:700; color:var(--wp-ink); } .wp-catalog-page .popup-mobile-box .btn-popup-close{ width:32px; height:32px; border-radius:50%; border:none; background:var(--wp-bg-panel); cursor:pointer; position:relative; } .wp-catalog-page .popup-mobile-box .btn-popup-close::before, .wp-catalog-page .popup-mobile-box .btn-popup-close::after{ content:""; position:absolute; width:14px; height:2px; background:var(--wp-text); top:50%; left:50%; } .wp-catalog-page .popup-mobile-box .btn-popup-close::before{ transform:translate(-50%,-50%) rotate(45deg); } .wp-catalog-page .popup-mobile-box .btn-popup-close::after{ transform:translate(-50%,-50%) rotate(-45deg); } .wp-catalog-page .popup-mobile-box .popup-content-wrap{ padding:16px; } .wp-catalog-page .popup-mobile-box #category-head.btn-menu{ display:none; } .wp-catalog-page .filter-box.popup-mobile-box .filter-content-wrap{ flex-direction:column; align-items:stretch; background:none; padding:16px; } .wp-catalog-page .filter-box.popup-mobile-box .select-content-block.js-popup-block{ position:static; box-shadow:none; border:none; padding:12px 0 0; max-height:none; } .wp-catalog-page .tiles-catalog-box .items-wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .wp-catalog-page .tile-photo{ height:150px; } .wp-catalog-page .item-tile-catalog{ padding:8px; } .wp-catalog-page .wp-faq__grid{ grid-template-columns:1fr; } .wp-catalog-page .action-inner-box .info-inner-wrap{ max-width:100%; } } @media (max-width:600px){ .wp-catalog-page .tiles-catalog-box .items-wrap{ grid-template-columns:1fr; } .wp-catalog-page .tiles-categories-box .main-catalog-wrap{ gap:8px; } .wp-catalog-page .action-inner-box .info-inner-wrap{ padding:20px; } .wp-catalog-page .title-wrap{ gap:8px; } }