:root { --container:1184px; --catalog-sidebar-offset:0; --catalog-sticky-top:88px; } .page-container { width:min(calc(100% - 32px), var(--container)); max-width:100%; margin-inline:auto; } .catalog-layout { display:grid; grid-template-columns:270px minmax(0, 1fr); gap:18px; align-items:start; } .catalog-filter-card { width:270px; border-radius:4px; background:#fff; box-shadow:0 2px 8px rgb(0 0 0 / 8%); padding:16px 14px; } @media (min-width:992px) { .catalog-filter-card { margin-top:var(--catalog-sidebar-offset); position:sticky; top:var(--catalog-sticky-top); align-self:start; max-height:calc(100vh - var(--catalog-sticky-top) - 16px); overflow-y:auto; } } .catalog-card { width:100%; max-width:none; padding:12px; border-radius:8px; background:#fff; box-shadow:0 2px 8px rgb(0 0 0 / 8%); overflow:hidden; } .catalog-product-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; padding:14px 0 0; } .catalog-product { display:flex; flex-direction:column; min-width:0; padding:0; border-radius:8px; background:#fff; box-shadow:none; border:1px solid #eee; overflow:hidden; transition:box-shadow .18s ease, transform .18s ease; } .catalog-product:hover { box-shadow:0 4px 14px rgba(0,0,0,.12); transform:translateY(-1px); z-index:1; } .catalog-image-wrap { position:relative; width:100%; aspect-ratio:1 / 1; padding:8px; margin:0; display:flex; align-items:center; justify-content:center; background:#fff; overflow:hidden; } .catalog-image-wrap img { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; padding:0; display:block; } .product-card-specs { width:100%; min-height:30px; margin:0; padding:6px 8px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:center; gap:4px; background:#ffc400; color:#111; font-size:12px; font-weight:700; line-height:1.15; text-align:center; box-sizing:border-box; } .product-card-specs .spec-item { min-width:0; display:block; overflow:visible; text-overflow:clip; white-space:normal; word-break:keep-all; } .product-card-specs .spec-separator { display:none; } .catalog-product-body { display:flex; flex-direction:column; gap:6px; padding:10px 12px 14px; margin:0; min-width:0; border-top:none; } .catalog-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:36px; overflow:hidden; text-overflow:clip; font-size:14px; line-height:1.35; color:#111; font-weight:400; margin:0; } .catalog-price { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:17px; line-height:1.2; font-weight:800; color:#111; width:max-content; } .catalog-old-price { font-size:13px; color:#777; text-decoration:line-through; } .discount-badge { display:inline-flex; align-items:center; justify-content:center; min-height:20px; margin-left:6px; padding:2px 6px; color:#fff; background:#198754; font-weight:700; font-size:11px; white-space:nowrap; border-radius:4px; } .catalog-product-skel { display:block; border-radius:8px; background:#fff; box-shadow:none; overflow:hidden; pointer-events:none; padding:0; } .catalog-product-skel .skel-image { width:100%; aspect-ratio:1 / 1; } .catalog-product-skel .skel-body { padding:10px 12px 14px; display:flex; flex-direction:column; gap:8px; } .catalog-product-skel .skel-name { height:36px; border-radius:4px; } .catalog-product-skel .skel-price { height:18px; width:52%; border-radius:4px; } .catalog-product-skel .skel-old { height:13px; width:35%; border-radius:4px; } @media (max-width:1199.98px) { .catalog-layout { grid-template-columns:260px minmax(0, 1fr); gap:14px; } .catalog-filter-card { width:260px; } .catalog-product-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; } } @media (max-width:991.98px) { .page-container { width:min(calc(100% - 12px), var(--container)); } .catalog-layout { display:block; gap:8px; } .catalog-filter-card { display:none; width:auto; } .catalog-card { box-shadow:none; padding:8px 0 20px; border-radius:0; } .catalog-product-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; padding:12px 0 0; } .catalog-product { padding:0; border-radius:6px; } .catalog-image-wrap { padding:6px; } .catalog-product-body { padding:8px 10px 12px; } .catalog-name { font-size:13px; min-height:34px; } .catalog-price { font-size:15px; } .product-card-specs { font-size:11px; min-height:26px; gap:5px; } } @media (max-width:767.98px) { .page-container { width:min(calc(100vw - 16px), var(--container)); } .catalog-card { padding:4px 0 20px; } .catalog-product-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; padding:10px 0 0; } .catalog-product { padding:0; border-radius:6px; overflow:hidden; } .catalog-image-wrap { width:100%; aspect-ratio:1 / 1; padding:6px; } .catalog-image-wrap img { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; } .product-card-specs { min-height:28px; padding:5px 4px; gap:2px; font-size:10.5px; line-height:1.1; } .catalog-product-body { padding:8px 9px 10px; gap:4px; } .catalog-name { font-size:13px; line-height:1.3; min-height:34px; -webkit-line-clamp:2; } .catalog-price { font-size:15px; } } @media (max-width:767.98px) { .mobile-sticky-atc__btn--buy-now { background:#FFC400 !important; color:#111 !important; border:1px solid #FFC400 !important; font-weight:800; box-shadow:0 8px 24px rgba(0,0,0,.18); border-radius:10px; min-height:48px; } .mobile-sticky-atc__btn--buy-now:hover, .mobile-sticky-atc__btn--buy-now:active { background:#e6b000 !important; color:#111 !important; border-color:#e6b000 !important; } .mobile-sticky-atc__btn--buy-now:disabled { background:#9ca3af !important; color:#fff !important; border-color:#9ca3af !important; box-shadow:none; } } body.has-mobile-sticky-buy { padding-bottom:calc(68px + env(safe-area-inset-bottom, 0)); } @media (max-width:767.98px) { body.has-mobile-sticky-buy { padding-bottom:calc(76px + env(safe-area-inset-bottom, 0)); } } @media (max-width:379.98px) { .catalog-product-grid { gap:6px; } .catalog-name { font-size:12px; } } @media (max-width:767.98px) { .gallery-thumbnail { aspect-ratio:1 / 1 !important; min-height:80px !important; } } @media (min-width:992px) and (max-width:1299px) { body.product-page .side-stack { flex:0 0 300px !important; width:300px !important; } } @media (min-width:992px) { body.product-page .product-card { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } } .description-copy table { max-width:100%; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .description-copy table td, .description-copy table th { word-break:break-word; white-space:normal; } @media (max-width:767.98px) { .specs-columns { gap:0; } .specs-col--first, .specs-col--second { border-radius:6px !important; border:1px solid #e8e8e8 !important; } .specs-col--first { border-bottom:none !important; border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; } .specs-col--second { border-top:none !important; border-top-left-radius:0 !important; border-top-right-radius:0 !important; margin-top:0; } .specs-col--second thead { display:none; } } @media (max-width:767.98px) { .mobile-sticky-atc { padding-bottom:calc(10px + env(safe-area-inset-bottom, 0)) !important; } } .mobile-sticky-atc { z-index:500 !important; } .lightbox-thumbnail img { object-fit:contain !important; } @media (max-width:767.98px) { .breadcrumb-nav ol { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .breadcrumb-nav ol::-webkit-scrollbar { display:none; } .breadcrumb-nav li:not(:first-child) { flex-shrink:0; } .breadcrumb-nav li[aria-current="page"] { flex-shrink:1; min-width:0; } }