/* ====== Core Reset / Base ====== */ /* Single font policy: Roboto Bold only */ @font-face { font-family:'Roboto'; src:url('roboto-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } * { box-sizing:border-box; font-family:'Roboto', Arial, sans-serif !important; font-weight:700 !important; } body { margin:0; background:#ffffff; color:#4A4A4A; -webkit-font-smoothing:antialiased; } body.lock { overflow:hidden; } a { color: inherit; } /* ====== Layout Shell ====== */ .app-wrapper { min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; padding:0 0 48px 0; } .shell { width:100%; max-width:none; margin:0; display:flex; flex-direction:column; gap:40px; min-width:1240px; } .layout-with-sidebar { flex-direction:row; align-items:flex-start; gap:46px; } .main-shell { flex:1; display:flex; flex-direction:column; gap:40px; } /* ====== Brand Sidebar ====== */ .brand-sidebar { width:240px; flex:0 0 240px; position:static; top:auto; max-height:none; overflow:visible; background:#1d1f22; border:1px solid #303437; padding:26px 20px 30px; border-radius:28px; display:flex; flex-direction:column; gap:18px; box-shadow:0 10px 34px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,0.02) inset; } .brand-sidebar::-webkit-scrollbar { width:10px; } .brand-sidebar::-webkit-scrollbar-track { background:#0d1117; } .brand-sidebar::-webkit-scrollbar-thumb { background:#1e2832; border-radius:20px; } .brand-sidebar-title { font-size:18px; font-weight:600; letter-spacing:.5px; background:linear-gradient(90deg,#ffb347,#ffe1c4); -webkit-background-clip:text; background-clip:text; color:transparent; } .brand-list { display:flex; flex-direction:column; gap:6px; } .brand-item { text-decoration:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px 9px 14px; border-radius:14px; background:#2d2f33; color:#d0d0d0; font-size:14px; font-weight:500; letter-spacing:.3px; position:relative; transition:.25s background,.25s color,.3s box-shadow; } .brand-list .brand-item { width:100%; box-sizing:border-box; } @media (max-width:1100px){ .brand-list .brand-item { width:auto; } } .brand-item .brand-name { flex:1; text-transform:uppercase; } .brand-item:hover { background:#36383c; color:#fff; } .brand-item.active { background:#ff7a18; color:#fff; box-shadow:0 6px 20px -6px rgba(255,122,24,.55); } .brand-item.active::after { content:""; position:absolute; right:8px; top:50%; width:6px; height:6px; background:#fff; border-radius:50%; transform:translateY(-50%); opacity:.9; } @media (max-width:1100px){ .layout-with-sidebar { flex-direction:column; } .brand-sidebar { width:100%; position:static; top:auto; max-height:none; order:0; display:flex; flex-wrap:wrap; padding:20px 18px 22px; gap:12px 10px; overflow:visible; } .brand-list { flex-direction:row; flex-wrap:wrap; gap:10px; } .brand-item { flex: 1 1 calc(25% - 10px); min-width:120px; text-align:center; } } @media (max-width:700px){ .brand-item { flex:1 1 calc(33.33% - 10px); } } @media (max-width:520px){ .brand-item { flex:1 1 calc(50% - 10px); } } /* ====== Topbar ====== */ .topbar { display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; } .brand { font-size:clamp(26px,3.2vw,42px); font-weight:700; letter-spacing:1px; background:linear-gradient(90deg,#ff7a18,#ffb347); -webkit-background-clip:text; background-clip:text; color:transparent; } .brand .accent { background:linear-gradient(90deg,#ffb347,#ffd9a1); -webkit-background-clip:text; background-clip:text; color:transparent; } .filters-inline { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .chip { border:none; background:#3b3e42; color:#d0d0d0; padding:10px 18px; border-radius:1000px; font-size:14px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:6px; line-height:1; transition:.2s background,.2s color,.2s box-shadow; text-decoration:none; } .chip:hover { background:#45494e; color:#fff; } .chip-reset { background:#4a2d2a; color:#ffb7a8; } .chip-reset:hover { background:#633a36; color:#fff; } .chip-dark { background:#141414; color:#eee; } .chip-dark:hover { background:#1f1f1f; } .chip-secondary { background:#ff7a18; color:#fff; } .chip-secondary:hover { background:#ff8f3c; color:#fff; } /* ====== Panel Upload ====== */ .panel { background:#1c1f22; border:1px solid #303437; border-radius:28px; padding:32px clamp(20px,3vw,48px); box-shadow:0 10px 40px -10px rgba(0,0,0,.5), 0 2px 6px -1px rgba(0,0,0,.45); backdrop-filter:blur(10px); } .panel-upload { display:flex; flex-direction:column; gap:28px; } .upload-form-modern { display:flex; flex-direction:column; gap:18px; } .uf-col { display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .file-label { position:relative; overflow:hidden; } .file-input { position:absolute; inset:0; opacity:0; cursor:pointer; } .file-trigger { display:inline-flex; align-items:center; background:#303337; padding:12px 20px; border-radius:14px; font-size:14px; font-weight:500; color:#d2d2d2; border:1px solid #3d4044; transition:.25s; } .file-trigger:hover { background:#3d4145; color:#fff; } .action-btn { background:#2d2f33; border:1px solid #414244; color:#f0f0f0; padding:12px 22px; font-size:14px; font-weight:600; border-radius:14px; cursor:pointer; letter-spacing:.5px; transition:.25s; text-transform:uppercase; } .action-btn.primary { background:#ff7a18; border-color:#ff7a18; } .action-btn.primary:hover { background:#ff8f3c; } /* ===== Inline stock editor (admin) ===== */ .stock-edit-form { margin-top:6px; display:flex; gap:6px; align-items:center; } .stock-edit-form .stock-input { width:60px; padding:4px 6px; border:1px solid #b3b5b9; border-radius:6px; background:#fff; font:11px/1.2 Tahoma, Arial, sans-serif; } .stock-edit-form .stock-input:focus { outline:2px solid #ffb347; outline-offset:1px; } .stock-edit-form .stock-save-btn { padding:5px 10px; border:1px solid #c27000; background:#ff9800; color:#111; font:600 11px/1 Tahoma, Arial, sans-serif; border-radius:6px; cursor:pointer; transition:background .18s, box-shadow .18s; } .stock-edit-form .stock-save-btn:hover { background:#ffa726; } .stock-edit-form .stock-save-btn:active { background:#fb8c00; } /* Hidden products (admin view) */ .product-card-hidden { opacity:.45; position:relative; } .product-card-hidden::after { content:'СКРЫТО'; position:absolute; top:8px; right:8px; font:700 10px/1 Tahoma, Arial, sans-serif; padding:4px 6px; background:#b71c1c; color:#fff; border-radius:4px; letter-spacing:.5px; } .inline-hide-form { margin-top:6px; display:flex; } .inline-hide-form button.hide-btn, .inline-hide-form button.restore-btn { font:600 11px/1 Tahoma, Arial, sans-serif; padding:5px 10px; border:1px solid #999; background:#ececec; border-radius:6px; cursor:pointer; transition:.18s background,.18s color,.18s border-color; } .inline-hide-form button.hide-btn:hover { background:#ef5350; color:#fff; border-color:#d32f2f; } .inline-hide-form button.restore-btn:hover { background:#66bb6a; color:#fff; border-color:#2e7d32; } .brand-item-wrap { position:relative; } .rename-brand-form { margin-top:4px; display:flex; gap:4px; align-items:center; } .rename-brand-input { width:90px; padding:4px 6px; border:1px solid #3a3d41; background:#1b1d1f; color:#e0e0e0; border-radius:6px; font:11px/1.1 Tahoma, Arial, sans-serif; } .rename-brand-input:focus { outline:2px solid #ff9800; outline-offset:1px; } .rename-brand-btn { padding:4px 8px; border:1px solid #3d4044; background:#2d2f33; color:#ddd; font:600 11px/1 Tahoma, Arial, sans-serif; border-radius:6px; cursor:pointer; transition:.2s background,.2s color,.2s border-color; } .rename-brand-btn:hover { background:#ff7a18; border-color:#ff7a18; color:#fff; } .rename-brand-btn:active { background:#ff8f3c; } .brand-line { display:flex; align-items:center; gap:8px; } .brand-expand-btn { background:#2d2f33; color:#c2c2c2; border:1px solid #3a3c3f; width:34px; height:34px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:.25s background,.25s color,.25s transform; } .brand-expand-btn:hover { background:#393b3f; color:#fff; } .brand-group.open > .brand-line .brand-expand-btn { background:#ff9800; color:#111; } .plus-minus { position:relative; width:14px; height:14px; display:block; } .plus-minus::before, .plus-minus::after { content:""; position:absolute; background:currentColor; border-radius:2px; left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); transition:.25s opacity,.25s transform; } .plus-minus::after { transform:translateY(-50%) rotate(90deg); } .brand-group.open .plus-minus::after { transform:translateY(-50%) rotate(180deg); opacity:0; } .model-sublist { display:none; flex-direction:column; flex-wrap:nowrap; gap:4px; margin:8px 0 4px 0; padding:4px 0 0 0; width:100%; } .model-link { display:block; width:100%; text-decoration:none; font:600 11px/1.1 Tahoma, Arial, sans-serif; padding:6px 10px; background:#eceef0; color:#333; border:1px solid #d2d4d7; border-radius:6px; letter-spacing:.2px; transition:.18s background,.18s color,.18s border-color; position:relative; } .model-link:hover { background:#ff9800; color:#111; border-color:#ff9800; } .model-link.model-active { background:#ff9800; color:#111; border-color:#ff9800; box-shadow:0 0 0 1px #ff9800 inset; } .action-btn.danger { background:#6a2c2c; border-color:#7d3434; } .action-btn.danger:hover { background:#8c3f3f; } .action-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px -8px rgba(0,0,0,.7); } .uf-hint { font-size:12.5px; color:#8292a4; line-height:1.5; } /* ====== Products Section ====== */ .products-section { display:flex; flex-direction:column; gap:10px; } .page-title { margin:0; font-size:clamp(22px,2.6vw,40px); font-weight:600; background:linear-gradient(90deg,#ffb347,#ffe1c4); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.5px; } /* Force exactly 4 product cards per row horizontally. Each column is 1fr but constrained by a fixed card width to keep visuals consistent. Use grid-auto-flow:column fallback so layout doesn't collapse; allow horizontal centering. */ /* Grid: 4 fixed-width columns (300px) with fluid gap that grows with viewport width. gap uses clamp(min, preferred, max) so spacing increases as screen gets wider while cards keep 300px. */ /* Use inline-grid so it can keep intrinsic width (4 * 300px + gaps). If viewport is narrower, allow horizontal scrolling on the container. */ /* Scroll container for product grid */ .products-grid { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; width:100%; } /* Grid: 4 fixed-width columns (300px) with fluid gap. The grid itself is block-level and will overflow its container when viewport is too narrow, producing a horizontal scrollbar. */ .products-grid.modern-grid { display:grid; grid-template-columns: repeat(4, 300px); /* Keep cards fixed at 300px; use a modest base column-gap and let the grid distribute any remaining space evenly using justify-content:space-evenly. This makes the spacing appear adaptive and equal between all cards and on the left/right edges as the viewport widens. */ column-gap: clamp(12px, 2.8vw, 64px); row-gap: clamp(12px, 1.2vw, 30px); align-items:start; justify-content: space-evenly; /* distribute extra horizontal space evenly */ } /* Simplified category title: plain text + soft shadow */ .selected-brand-title { margin:4px 0 12px 0; font:700 clamp(16px,1.4vw,22px)/1.15 'Inter','Segoe UI',Arial,sans-serif; color:#111; letter-spacing:.45px; text-shadow:0 2px 6px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.25); background:transparent; padding:0; border:none; box-shadow:none; text-transform:uppercase; display:block; } /* Removed underline bar & marker per user request */ .product-card { border:1px solid #2d2f33; background:#111213; border-radius:24px; overflow:visible; display:flex; flex-direction:column; position:relative; width:300px; /* height intentionally not fixed so info can be visible */ box-shadow:0 4px 18px -6px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,0.02) inset; transition:.35s transform,.35s box-shadow; flex: 0 0 auto; } .product-card:hover { transform:translateY(-6px); box-shadow:0 14px 44px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,0.04) inset; } .product-card img { width:100%; height:auto; display:block; background:#1d1e20; } /* Enforce fixed card width but allow height to expand so product-info is visible */ .product-card { width:300px !important; max-width:300px !important; flex:0 0 auto !important; } /* Контейнер под изображение теперь адаптивный по фактической высоте изображения */ .media-wrap { width:100%; background:#101a23; position:relative; overflow:hidden; aspect-ratio:3/4; border-bottom:1px solid #2f3236; flex:0 0 auto; } .media-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .product-info { padding:14px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; min-height:80px; } .info-spacer { flex:1 1 auto; } .product-card { min-height:unset; } .product-name { font-size:16px; font-weight:700; line-height:1.25; color:#e2e8f0; display:block; overflow:visible; font-family:'Roboto','Montserrat','Inter','Segoe UI',Arial,sans-serif; } .view-badge { position:absolute; top:10px; left:10px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); padding:4px 8px; font:600 11px/1 Tahoma,Arial,sans-serif; color:#f5f5f5; border:1px solid rgba(255,255,255,.14); border-radius:8px; box-shadow:0 4px 12px -6px rgba(0,0,0,.6); } .product-info { position:relative; } .product-price { font-size:20px; font-weight:700; font-family:'Roboto','Montserrat','Inter','Segoe UI',Arial,sans-serif; color:#111; background:none; -webkit-background-clip:initial; background-clip:initial; } .product-price .price-amount { font:700 1em/1 'Roboto','Montserrat','Inter','Segoe UI',Arial,sans-serif; color:inherit; } .product-sku { font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#6b7a88; } .buy-btn { margin-top:auto; background:#ff7a18; border:none; border-radius:14px; padding:10px 0; font-size:14px; font-weight:600; cursor:pointer; color:#fff; letter-spacing:.5px; box-shadow:0 4px 18px -8px rgba(255,122,24,.55); transition:.25s; } .buy-btn:hover { background:#ff8f3c; box-shadow:0 6px 28px -8px rgba(255,122,24,.65); } /* ====== Pagination ====== */ .pagination.modern { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:8px 0 16px; } /* ===== Product Page (templated) ===== */ .product-page { max-width:1100px; margin:10px auto 60px; padding:30px 32px 40px; background:#f2f3f5; border:1px solid #d0d2d6; border-radius:34px; font:14px/1.5 'Roboto',Arial,sans-serif; color:#1d2125; box-shadow:0 20px 60px -18px rgba(0,0,0,.15); } .product-page .pp-head { display:flex; gap:42px; flex-wrap:wrap; align-items:flex-start; } .pp-media { flex:0 0 420px; position:relative; } .pp-main-img { background:#e1e3e7; border:1px solid #c6c9cc; border-radius:22px; aspect-ratio:3/4; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; } .pp-main-img img, .pp-main-img video { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; background:#f0f1f3; transition:.25s; } @media (max-width:1100px){ .product-page .pp-head{gap:28px;} .pp-media{flex:1 1 100%;} } .pp-thumbs-wrapper { margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; } .pp-main { flex:1; display:flex; flex-direction:column; gap:18px; } .pp-title { margin:0; font:700 26px/1.15 'Roboto',Arial,sans-serif; letter-spacing:.4px; } .pp-price-row { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; } .pp-price { font:700 32px/1 'Roboto',Arial,sans-serif; color:#111; } .pp-buy:hover { background:#ff8f3c !important; border-color:#ff8f3c !important; color:#fff !important; } /* Advantages block (adjust if already defined) */ .pp-advantages .adv-title { font:700 15px/1.2 'Roboto',Arial,sans-serif; margin-bottom:14px; display:flex; align-items:center; gap:10px; } .pp-advantages .badge-star { background:#ff9800; color:#111; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; font-size:16px; font-weight:700; border-radius:12px; box-shadow:0 4px 14px -6px rgba(255,152,0,.6); } .pp-advantages .adv-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .pp-advantages .adv-item { display:flex; gap:14px; font:13px/1.5 'Roboto',Arial,sans-serif; background:#fff; padding:12px 16px 14px; border:1px solid #d8dce0; border-radius:16px; position:relative; box-shadow:0 6px 16px -10px rgba(0,0,0,.15); } .pp-advantages .adv-item.highlight { background:linear-gradient(140deg,#fff8ef,#fff); border-color:#f7c893; } .pp-advantages .adv-item-icon { background:#2e7d32; color:#fff; width:24px; height:24px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font:700 14px/1 'Roboto',Arial,sans-serif; box-shadow:0 4px 10px -4px rgba(46,125,50,.6); flex-shrink:0; } .adv-stack { display:flex; flex-direction:column; gap:4px; } .adv-stack-head { font:700 13px/1.2 'Roboto',Arial,sans-serif; letter-spacing:.3px; } .adv-stack-desc { font:12.5px/1.4 'Roboto',Arial,sans-serif; color:#2b343c; } .adv-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .adv-chip { background:#2e7d32; color:#fff; font:600 11px/1 Tahoma,Arial,sans-serif; padding:6px 10px 6px; border-radius:20px; letter-spacing:.4px; box-shadow:0 4px 12px -6px rgba(0,0,0,.4); } .adv-chip.light { background:#ff9800; color:#111; } /* Generic feature block (same visual style as advantages) */ .pp-feature-block { margin-top:24px; padding:26px 28px 30px; background:linear-gradient(135deg,#ffffff 0%,#f4f6f8 50%,#eef1f4 100%); border:1px solid #d0d4d9; border-radius:28px; box-shadow:0 10px 34px -14px rgba(0,0,0,.18),0 2px 6px -2px rgba(0,0,0,.1); position:relative; overflow:hidden; } /* Compact variant for title block: remove vertical gaps */ #block-title.pp-feature-block { padding:8px 24px 10px; margin-top:8px; } #block-title .pp-feature-title { margin:0; font-size:22px; line-height:1.15; } /* Price block orange variant */ #block-price.pp-feature-block { background:#ff9800; border:1px solid #000; box-shadow:none; padding:22px 26px 24px; } #block-price.pp-feature-block::before, #block-price.pp-feature-block::after { display:none; } #block-price .pp-price-inline { color:#111; } #block-price .stock-badge.in-stock { background:#2e7d32; border:1px solid #1b531e; animation:stockPulseStrong 3.6s ease-in-out infinite; will-change:transform,filter; } #block-price .stock-badge.out-stock { background:linear-gradient(135deg,#7d1f1f,#b71c1c); border:1px solid #5a1212; } #block-price .pp-cart-btn { background:#111; color:#fff; border:1px solid #000; } #block-price .pp-cart-btn:hover { background:#222; color:#fff; border-color:#111; } /* Merged title style inside price block */ #block-price .pp-price-stock-inline { margin-top:0; } .pp-feature-block::before { content:""; position:absolute; top:-40px; right:-40px; width:220px; height:220px; background:radial-gradient(circle at 30% 30%, rgba(255,152,0,.45) 0%, rgba(255,152,0,0) 70%); opacity:.18; pointer-events:none; } .pp-feature-block::after { content:""; position:absolute; bottom:-60px; left:-60px; width:280px; height:280px; background:radial-gradient(circle at 70% 70%, rgba(46,125,50,.30) 0%, rgba(46,125,50,0) 70%); opacity:.16; pointer-events:none; } .pp-feature-title { margin:0 0 14px; font:700 20px/1.25 'Roboto',Arial,sans-serif; letter-spacing:.4px; position:relative; z-index:2; display:flex; align-items:center; gap:12px; } .pp-feature-title .badge-icon { width:32px; height:32px; border-radius:14px; background:#ff9800; color:#111; font:700 16px/32px 'Roboto',Arial,sans-serif; text-align:center; box-shadow:0 6px 16px -6px rgba(255,152,0,.55); } .pp-price-inline { font:700 30px/1 'Roboto',Arial,sans-serif; letter-spacing:.3px; } .pp-stock-line { margin-top:10px; } .pp-stock-line .stock-badge { margin-top:8px; } .pp-cart-btn { display:inline-flex; align-items:center; gap:10px; font:700 16px/1 'Roboto',Arial,sans-serif; background:#e1e3e7; border:1px solid #c2c5c9; border-radius:16px; padding:18px 28px; color:#1e2327; text-decoration:none; transition:.25s; position:relative; z-index:2; } .pp-cart-btn:hover { background:#ff9800; border-color:#ff9800; color:#111; } /* Description block */ .pp-desc-block { margin-top:28px; background:#ffffff; border:1px solid #d3d7db; padding:28px 30px 34px; border-radius:30px; box-shadow:0 16px 48px -18px rgba(0,0,0,.18),0 2px 8px -2px rgba(0,0,0,.1); } .pp-desc-title { margin:0 0 18px; font:700 24px/1.2 'Roboto',Arial,sans-serif; letter-spacing:.4px; } .pp-desc-body p { margin:0 0 14px; font:14px/1.55 'Roboto',Arial,sans-serif; color:#1e2429; } .pp-desc-body ul { margin:0 0 18px 20px; padding:0; list-style:disc; } .pp-desc-body li { margin:0 0 6px; font:13.5px/1.5 'Roboto',Arial,sans-serif; } /* Admin note block */ /* Back link */ .back-top:hover { background:#ff9800 !important; border-color:#ff9800 !important; color:#111 !important; } /* Admin view stat reuse */ .view-stat { font:11px/1.2 Tahoma; background:#d9dbde; padding:6px 10px; border-radius:8px; color:#333; display:inline-flex; align-items:center; gap:6px; } /* Stock badge animation */ @keyframes stockPulse { 0%,100% { box-shadow:0 0 0 0 rgba(46,125,50,.0), 0 0 0 0 rgba(255,255,255,0); filter:brightness(1); } 45% { box-shadow:0 0 0 0 rgba(46,125,50,.0), 0 0 14px 4px rgba(46,125,50,.35); filter:brightness(1.08); } 60% { box-shadow:0 0 0 6px rgba(46,125,50,0), 0 0 18px 6px rgba(46,125,50,.28); filter:brightness(1.12); } 80% { box-shadow:0 0 0 10px rgba(46,125,50,0), 0 0 8px 2px rgba(46,125,50,.15); filter:brightness(1.04); } } @keyframes stockPulseStrong { 0% { transform:scale(1); box-shadow:0 0 0 0 rgba(46,125,50,0.0),0 0 0 0 rgba(46,125,50,0.0); filter:brightness(1); } 35% { transform:scale(1.045); box-shadow:0 0 0 0 rgba(46,125,50,0),0 0 18px 6px rgba(46,125,50,.50); filter:brightness(1.12); } 55% { transform:scale(1.075); box-shadow:0 0 0 7px rgba(46,125,50,0),0 0 30px 12px rgba(46,125,50,.42); filter:brightness(1.2); } 75% { transform:scale(1.035); box-shadow:0 0 0 12px rgba(46,125,50,0),0 0 16px 6px rgba(46,125,50,.30); filter:brightness(1.08); } 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(46,125,50,0),0 0 0 0 rgba(46,125,50,0); filter:brightness(1); } } .stock-badge { display:inline-flex; align-items:center; padding:6px 16px 7px; border-radius:14px; font-size:13px; letter-spacing:.35px; position:relative; line-height:1; } .stock-badge.in-stock { background:linear-gradient(135deg,#2e7d32,#3b8c41); color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); animation:stockPulse 3.4s ease-in-out infinite; border:1px solid #1f5a21; } .stock-badge.in-stock::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 60%); border-radius:inherit; mix-blend-mode:overlay; pointer-events:none; } .stock-badge.out-stock { background:linear-gradient(135deg,#7d1f1f,#b71c1c); color:#fff; border:1px solid #5a1212; } /* Normalize price row & buy button after removing inline styles */ .pp-price-row { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; } .pp-price { margin:0; } .pp-buy { display:inline-flex; align-items:center; gap:10px; margin-top:12px; padding:14px 24px; text-decoration:none; background:#e1e3e7; border:1px solid #c2c5c9; border-radius:14px; color:#1e2327; transition:.25s; font-size:15px; } .pp-buy:hover { background:#ff9800; border-color:#ff9800; color:#111; } .page-pill { text-decoration:none; font-size:14px; font-weight:600; padding:10px 16px; border-radius:12px; background:#333538; color:#f0b07a; border:1px solid #3f4144; transition:.25s; min-width:46px; text-align:center; } .page-pill:hover { background:#3f4246; color:#ffd7b1; } /* ===== Rich Content (col_28) ===== */ .rc-block { background:#ffffff; border:1px solid #e1e4e8; border-radius:22px; padding:18px 20px 20px; margin:0 0 18px; box-shadow:0 6px 18px -10px rgba(0,0,0,.08); } .rc-block:last-child { margin-bottom:0; } .rc-title { margin:0 0 12px; font:700 18px/1.25 'Roboto',Arial,sans-serif; letter-spacing:.4px; color:#111; } .rc-img { margin:0 0 14px; text-align:left; } .rc-img img { max-width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 4px 14px -6px rgba(0,0,0,.18); } .rc-list { margin:0 0 10px 18px; padding:0; list-style:disc; } .rc-list li { margin:0 0 6px; font:15px/1.55 'Roboto',Arial,sans-serif; color:#222; } .rc-block p { margin:0 0 14px; font:15.5px/1.6 'Roboto',Arial,sans-serif; color:#222; } .rc-block p:last-child { margin-bottom:0; } .rc-sep { border:0; border-top:1px solid #d4d8dc; margin:14px 0 16px; } .rc-showcase { background:#f7f9fa; } .page-pill.active { background:#ff7a18; border-color:#ff7a18; color:#fff; pointer-events:none; box-shadow:0 4px 20px -6px rgba(255,122,24,.55); } /* ====== Categories Modal ====== */ .categories-modal { position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:80px 24px 120px; pointer-events:none; opacity:0; transition:.35s opacity; z-index:40; } .categories-modal[aria-hidden="false"] { opacity:1; pointer-events:auto; } .modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); } .cat-dialog { position:relative; width:100%; max-width:880px; background:#0f151c; border:1px solid #202b35; border-radius:32px; padding:34px clamp(20px,3vw,46px) 48px; display:flex; flex-direction:column; gap:24px; box-shadow:0 20px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,0.03) inset; } .cat-head { display:flex; justify-content:space-between; align-items:center; } .cat-title { font-size:24px; font-weight:600; letter-spacing:.5px; background:linear-gradient(90deg,#ffb347,#ffe1c4); -webkit-background-clip:text; background-clip:text; color:transparent; } .close-btn { background:#1d2731; border:1px solid #283440; color:#b7c8d9; font-size:16px; padding:8px 14px; cursor:pointer; border-radius:12px; transition:.25s; } .close-btn:hover { background:#293643; color:#fff; } .cat-search-wrap { position:sticky; top:0; background:linear-gradient(#0f151c,#0f151c); padding:4px 0 4px; z-index:5; } .cat-search { width:100%; background:#121c25; border:1px solid #253340; color:#d9e7f2; padding:14px 18px; border-radius:16px; font-size:14px; outline:none; transition:.25s border,.25s background; } .cat-search:focus { border-color:#3d7eff; background:#162230; } .cat-scroll { max-height:50vh; overflow-y:auto; padding-right:4px; display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .cat-scroll::-webkit-scrollbar { width:10px; } .cat-scroll::-webkit-scrollbar-track { background:#0f151c; } .cat-scroll::-webkit-scrollbar-thumb { background:#1e2832; border-radius:20px; } .cat-group { background:#121b24; border:1px solid #1f2a35; border-radius:20px; padding:14px 16px 10px; display:flex; flex-direction:column; gap:12px; position:relative; } .cat-brand-line { display:flex; justify-content:space-between; align-items:center; gap:10px; } .brand-link { font-size:15px; font-weight:600; color:#e3e3e3; text-decoration:none; background:#303337; padding:8px 14px; border-radius:12px; flex:1; transition:.25s; text-align:center; text-transform:uppercase; } .brand-link:hover { background:#3a3d41; color:#fff; } .brand-link.active { background:#ff7a18; color:#fff; } .expand-btn { background:#2d2f33; color:#c2c2c2; border:1px solid #383a3d; width:40px; height:40px; border-radius:14px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; padding:0; transition:.25s; } .expand-btn:hover { background:#393b3f; color:#fff; } .cat-group.open .expand-btn { transform:rotate(180deg); } .models-collapsed { display:flex; flex-wrap:wrap; gap:8px; max-height:0; overflow:hidden; transition:.35s max-height; } .cat-group.open .models-collapsed { max-height:500px; } .model-chip { background:#323438; color:#e0e0e0; padding:6px 12px; font-size:12px; border-radius:10px; text-decoration:none; letter-spacing:.5px; font-weight:600; transition:.25s; } .model-chip:hover { background:#3b3d41; color:#fff; } .model-chip.active { background:#ff7a18; color:#fff; } .empty-cat { font-size:14px; color:#6f7d89; } /* ====== Responsive ====== */ @media (max-width: 880px){ .cat-scroll { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } } @media (max-width: 1200px){ /* slightly reduce max gap on medium screens */ .modern-grid { gap: clamp(12px, 2vw, 40px); grid-template-columns: repeat(4, 300px); } } @media (max-width: 900px){ /* smaller screens use a smaller preferred gap */ .modern-grid { gap: clamp(10px, 2vw, 32px); grid-template-columns: repeat(4, 300px); } } @media (max-width: 520px){ /* mobile-ish narrow widths: keep some spacing but not too large */ .modern-grid { gap: clamp(8px, 3vw, 20px); grid-template-columns: repeat(4, 300px); } } @media (max-width: 880px){ .panel { padding:28px 22px; } .cat-dialog { padding:30px 26px 40px; } } @media (max-width:600px){ .filters-inline { width:100%; justify-content:flex-start; } .brand { font-size:34px; } .app-wrapper { padding:32px 16px 80px; } .page-title { font-size:28px; } .action-btn, .file-trigger { padding:10px 18px; } .model-chip { font-size:11px; } } /* ====== Header Block (cardvd adaptation) ====== */ #top_bg8 {position:relative;margin:0 0 24px;padding:0;} .top-columns{display:flex;width:100%;min-width:0;max-width:100%;overflow:hidden;} #top1,#top3{flex:1 1 auto;background:url('/img/fontop00.png') repeat-x center top;min-height:124px;height:124px;} #top2{flex:0 0 1200px;max-width:1200px;background:#e9eaed url('/img/top00000.png') no-repeat center top;background-size:1200px 235px;min-height:235px;height:235px;position:relative;z-index:3;} #cart_informer{position:absolute;top:14px;right:24px;z-index:10;} .logoav{position:absolute;top:3px;left:18px;z-index:15;} /* moved up by 30px total */ .logoav img{max-height:129px;width:auto;display:block;} .whatsapp-btn{display:inline-flex;align-items:center;gap:12px;margin-top:21px;padding:10px 16px;background:linear-gradient(90deg,#25d366,#128c7e);color:#fff;font:700 15px/1 'Roboto',Arial,sans-serif;border-radius:999px;text-decoration:none;box-shadow:0 10px 30px rgba(18,140,126,0.18);position:relative;transition:transform .18s,box-shadow .18s,filter .18s;} .whatsapp-btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(18,140,126,0.24);filter:brightness(1.03);} .whatsapp-btn:active{transform:translateY(-1px);} /* nicer circular icon with white background and subtle shadow, plus pulsing animation when .pulse present */ .whatsapp-btn .wa-icon{ width:40px;height:40px;border-radius:50%;background:#fff center/60% no-repeat;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.12); background-image: url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; } /* Pulse animation on icon (subtle scale + glow) */ .whatsapp-btn.pulse .wa-icon{ animation:waIconPulse 1.6s ease-in-out infinite; } @keyframes waIconPulse{ 0% { transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,0.12); filter:brightness(1);} 45% { transform:scale(1.08); box-shadow:0 10px 28px rgba(18,140,126,0.18); filter:brightness(1.03);} 70% { transform:scale(1.03); box-shadow:0 8px 22px rgba(18,140,126,0.14); filter:brightness(1.02);} 100% { transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,0.12); filter:brightness(1);} } /* Lift the search visually above the header layers */ .main-nav__search{ position:absolute; right:18px; top:calc(53px - 200px + 20px); z-index:60; width:520px; /* base position */ } .main-nav__search.search-raised, .main-nav__search.raised { transform: translateY(-6px); } .main-nav__search .search-box__input{ box-shadow:0 10px 30px rgba(0,0,0,0.12); } /* Replace icon with pulsing phone number: hide icon span if present and pulse the text */ .whatsapp-btn .wa-icon{ display:none !important; } .whatsapp-btn .wa-text{ display:inline-block; font:700 15px/1 'Roboto',Arial,sans-serif; color:#fff; position:relative; } .whatsapp-btn.pulse .wa-text{ animation:phonePulse 1.6s ease-in-out infinite; } @keyframes phonePulse{ 0% { transform:scale(1); text-shadow:0 0 0 rgba(18,140,126,0); } 40% { transform:scale(1.04); text-shadow:0 6px 18px rgba(18,140,126,0.18); } 70% { transform:scale(1.02); text-shadow:0 8px 22px rgba(18,140,126,0.14); } 100% { transform:scale(1); text-shadow:0 0 0 rgba(18,140,126,0); } } /* ===== New Unified Navigation ===== */ .main-nav { margin-top:16px; width:100%; } .main-nav__inner { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:8px clamp(18px,4vw,42px) 10px; background:transparent; border:none; box-shadow:none; } .main-nav__group { display:flex; align-items:center; gap:14px; } .nav-pill { position:relative; display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px; background:#ff9800; font:700 14px/1 Tahoma, Arial, sans-serif; color:#111; text-decoration:none; border:1px solid #ff9800; border-radius:12px; letter-spacing:.5px; transition:.25s background,.25s color,.25s transform; box-shadow:none; } .nav-pill:hover { background:#ffae33; transform:translateY(-2px); } .nav-pill:active { transform:translateY(0); } .main-nav__search { flex:0 0 520px; max-width:520px; margin-left:auto; position:relative; } /* Pill container that visually matches .nav-pill on the sides while keeping a white input area inside */ .search-box { position:relative; display:flex; align-items:stretch; gap:6px; width:100%; } .search-box__input { flex:1 1 100%; width:100%; min-width:80px; height:40px; padding:0 12px; font:600 14px/1 Tahoma, Arial, sans-serif; letter-spacing:.5px; border:1px solid #c8c8c8; background:#fff; border-radius:6px; color:#222; transform:none; box-shadow:none; } .search-box__btn { display:none !important; } .search-box__clear { position:absolute; right:10px; top:50%; transform:translateY(calc(-50%)); width:28px; height:28px; border-radius:8px; background:#ff5722; color:#fff; font:700 14px/1 Tahoma, Arial, sans-serif; text-align:center; text-decoration:none; border:1px solid #ff5722; display:inline-flex; align-items:center; justify-content:center; opacity:.95; transition:.18s background,.18s transform,.18s box-shadow; } .search-box__clear:hover { background:#ff7043; transform:translateY(calc(-50%)) scale(1.05); box-shadow:0 6px 18px rgba(0,0,0,.12); } .search-box__clear:active { transform:translateY(calc(-50%)) scale(.95); } .search-box__input:focus { outline:none; box-shadow:0 0 0 3px rgba(255,152,0,.18); } @media (max-width:1100px){ .main-nav__inner { flex-wrap:wrap; gap:16px; } .main-nav__group { flex:1 1 100%; justify-content:center; } .main-nav__search { flex:1 1 100%; max-width:none; position:static; margin-top:8px; } .search-box { width:100%; } } /* Horizontal nav strip with main buttons */ .nav-strip { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; display:flex; justify-content:center; background:linear-gradient(180deg,#f6f7f8 0%, #e9ebed 100%); padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.04); box-shadow:0 10px 40px rgba(0,0,0,0.06); } .nav-strip__inner { display:flex; gap:10px; background:linear-gradient(180deg,#efe7d8 0%,#f6f0e6 100%); padding:10px 18px; border-radius:0; align-items:center; max-width:none; width:100vw; justify-content:center; position:relative; left:50%; transform:translateX(-50%); border:1px solid #000; box-shadow: inset 0 4px 12px rgba(0,0,0,0.28); } .nav-strip__col { display:flex; align-items:center; gap:6px; } .nav-strip__col--left { flex:0 0 auto; margin-right:0; } .nav-strip__col--center { flex:0 0 auto; justify-content:center; } .nav-strip__col--right { flex:0 0 auto; justify-content:flex-start; } .nav-strip__inner .nav-pill { background:#ff7a18; color:#111; border:1px solid rgba(0,0,0,0.06); padding:0 20px; height:52px; display:inline-flex; align-items:center; border-radius:12px; font-family:'Roboto', Arial, sans-serif; font-weight:700; font-size:16px; box-shadow:0 10px 30px rgba(255,122,24,0.10); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, color .12s ease; } .nav-strip__inner .nav-pill:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 20px 48px rgba(255,122,24,0.14); filter:brightness(1.04); color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.65); } .nav-strip__inner .nav-pill:active { transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,0.12); } .nav-strip__inner .nav-pill:focus { outline:3px solid rgba(255,122,24,0.16); outline-offset:3px; } /* Phone pill and search sizing to match nav-pill */ .phone-pill { display:inline-flex; align-items:center; justify-content:center; background:#ff7a18; color:#111; font-family:'Roboto', Arial, sans-serif; font-weight:700; font-size:16px; padding:0 16px; height:52px; border-radius:12px; border:1px solid rgba(0,0,0,0.06); text-decoration:none; box-shadow:0 10px 30px rgba(255,122,24,0.10); transition: color .12s ease, text-shadow .12s ease; } .phone-pill{ position:relative; overflow:visible; z-index:2; display:flex; flex-direction:column; gap:2px; padding:6px 14px; height:auto; min-height:52px; } .phone-pill:hover { color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.65); } /* Phone number main and sublabel */ .phone-pill .phone-main { font-size:16px; line-height:1; display:block; } .phone-pill .phone-sub { font-size:10px; line-height:1; color:rgba(17,17,17,0.65); display:block; font-weight:700; margin-top:2px; } /* Orbiting dot removed: the markup and animation have been disabled. Inert keyframes kept as no-op. */ @keyframes orbitRotate{ 0% { transform:none; } 100% { transform:none; } } /* Reduce motion for prefers-reduced-motion */ @media (prefers-reduced-motion: reduce){ .phone-pill .orbit-dot { animation: none; opacity:0.6; } } /* Inner white edge shadow (inside the button) */ .phone-pill::before{ content:""; position:absolute; /* inset so the shadow hugs the edges of the pill */ inset:0; /* cover entire area */ border-radius:12px; pointer-events:none; z-index:0; /* create a softer edge shadow: transparent center, subtle white edges with reduced intensity */ background: radial-gradient(closest-side at 50% 40%, rgba(255,255,255,0) 35%, rgba(255,255,255,0.28) 60%, rgba(255,255,255,0.45) 100%); mix-blend-mode:screen; filter:blur(6px); opacity:0; transform:scale(1); animation:innerEdgePulse 1.6s ease-in-out infinite; } @keyframes innerEdgePulse{ 0% { opacity:0; filter:blur(6px); transform:scale(1); } 30% { opacity:0.65; filter:blur(6px); transform:scale(1.00); } 60% { opacity:0.28; filter:blur(8px); transform:scale(1.01); } 100% { opacity:0; filter:blur(10px); transform:scale(1); } } /* Remove any external gold glow — ensure no ::after glow remains */ .phone-pill::after{ display:none !important; } /* hover/focus: slightly intensify the inner edge shadow */ .phone-pill:hover::before, .phone-pill:focus::before { animation-duration:1.1s; opacity:1; filter:blur(6px); transform:scale(1.01); } .nav-search { display:flex; align-items:center; } .nav-search .search-box { display:flex; align-items:center; gap:6px; } .nav-search .search-box__input { height:40px; padding:0 12px; border-radius:8px; border:1px solid #d8d8d8; box-sizing:border-box; font-size:15px; font-family:'Roboto', Arial, sans-serif; font-weight:700; color:#111; display:inline-flex; align-items:center; } .nav-search .search-box__btn { display:none !important; } @media (max-width:900px){ .nav-strip__inner { gap:8px; padding:8px 10px; border:1px solid #000; box-shadow: inset 0 4px 12px rgba(0,0,0,0.28); background:linear-gradient(180deg,#efe7d8 0%,#f6f0e6 100%); } .nav-strip__col--right { flex:1 1 100%; } .nav-strip__col--center { justify-content:center; gap:8px; } } @media (max-width:600px){ .nav-pill { flex:1 1 calc(33.33% - 10px); min-width:100px; padding:0 10px; } .main-nav__group { gap:10px; flex-wrap:wrap; } .main-nav__search { order:10; } } .top-filters-inline{margin-top:22px;} @media (max-width:1100px){ .top-columns{flex-direction:column;min-width:0;} #top2{width:100%;flex:1 1 auto;} #top1,#top3{display:none;} #cart_informer{position:relative;top:auto;right:auto;margin:8px 18px 0 auto;} .logoav{position:relative;top:auto;left:auto;margin:17px 18px 0;display:flex;flex-direction:column;align-items:flex-start;} /* adjusted up by 25px total */ } @media (max-width:640px){ .logoav img{max-height:96px;} .whatsapp-btn{margin-top:13px;font-size:14px;padding:8px 12px;gap:10px;} .whatsapp-btn .wa-icon{width:36px;height:36px;background-size:60% 60%;} } /* ====== Light Theme Overrides ====== */ body { background:#ffffff; color:#4A4A4A; } .app-wrapper { background:transparent; } .brand-sidebar { background:#ffffff; border:1px solid #e6e6e6; box-shadow:0 2px 6px rgba(0,0,0,.05); } .brand-sidebar-title { background:linear-gradient(90deg,#ff9800,#ffb74d); -webkit-background-clip:text; background-clip:text; color:transparent; } .brand-item { background:#ffffff; color:#444; border:1px solid #e8e8e8; box-shadow:none; } .brand-item:hover { background:#f6f6f6; color:#111; } .brand-item.active { background:#ff9800; color:#111; box-shadow:0 0 0 1px #ff9800 inset; } .panel { background:#ffffff; border:1px solid #e6e6e6; box-shadow:0 4px 14px -6px rgba(0,0,0,.08); } .upload-form-modern .uf-hint { color:#777; } .products-section .page-title { background:linear-gradient(90deg,#ff9800,#ffb74d); -webkit-background-clip:text; background-clip:text; color:transparent; } .modern-grid { justify-content:flex-start; } .product-card { background:#ffffff; border:1px solid #e3e3e3; box-shadow:0 2px 10px rgba(0,0,0,.05); } .product-card:hover { box-shadow:0 6px 20px -6px rgba(0,0,0,.12); } .media-wrap { background:#fafafa; border-bottom:1px solid #ededed; } .product-name { color:#222; font-family:'Roboto','Montserrat','Inter','Segoe UI',Arial,sans-serif; font-size:13px; } .product-price { color:#111; background:none; -webkit-background-clip:initial; background-clip:initial; font-family:'Roboto','Montserrat','Inter','Segoe UI',Arial,sans-serif; } .product-price .price-amount { font:700 1em/1 'Roboto','Montserrat','Inter','Segoe UI',Arial,sans-serif; } .product-sku { color:#777; } .buy-btn { background:#ff9800; color:#111; box-shadow:none; } .buy-btn:hover { background:#ffae33; } .pagination.modern .page-pill { background:#ffffff; border:1px solid #e2e2e2; color:#ff9800; } .pagination.modern .page-pill:hover { background:#fff4e0; } .pagination.modern .page-pill.active { background:#ff9800; color:#111; border-color:#ff9800; box-shadow:none; } .categories-modal .cat-dialog { background:#ffffff; border:1px solid #e6e6e6; box-shadow:0 8px 40px -12px rgba(0,0,0,.18); } .cat-search { background:#fafafa; border:1px solid #e0e0e0; color:#333; } .cat-search:focus { border-color:#ff9800; background:#fff; } .cat-group { background:#ffffff; border:1px solid #ececec; } .brand-link { background:#f5f5f5; color:#333; } .brand-link:hover { background:#ececec; color:#000; } .brand-link.active { background:#ff9800; color:#111; } .expand-btn { background:#f5f5f5; border:1px solid #e2e2e2; color:#555; } .expand-btn:hover { background:#ececec; } .model-chip { background:#f5f5f5; color:#333; } .model-chip:hover { background:#ececec; color:#000; } .model-chip.active { background:#ff9800; color:#111; } .top-filters-inline .chip { background:#f0f0f0; color:#444; } .top-filters-inline .chip:hover { background:#e6e6e6; color:#111; } .chip-reset { background:#ffe1d6; color:#d84315; } .chip-reset:hover { background:#ffccbc; color:#111; } .chip-secondary { background:#ff9800; color:#111; } .chip-secondary:hover { background:#ffb74d; } .chip-dark { background:#222; color:#fff; } .chip-dark:hover { background:#000; } .file-trigger { background:#f5f5f5; border:1px solid #e0e0e0; color:#444; } .file-trigger:hover { background:#ececec; color:#111; } .action-btn { background:#f5f5f5; color:#333; border:1px solid #e0e0e0; } .action-btn.primary { background:#ff9800; border-color:#ff9800; color:#111; } .action-btn.primary:hover { background:#ffb74d; } .action-btn.danger { background:#ffe5e5; border-color:#ffc5c5; color:#b71c1c; } .action-btn.danger:hover { background:#ffcccc; } .categories-modal[aria-hidden="false"] .modal-backdrop { background:rgba(0,0,0,.35); backdrop-filter:blur(2px); } @media (prefers-color-scheme: light){ .brand-item.active::after { background:#111; } } /* Footer bar (moved top bar) */ .footerbar { position:fixed; bottom:0; left:0; width:100%; min-width:320px; background:#191919; color:#fff; padding:6px 20px; display:flex; justify-content:space-between; align-items:center; gap:20px; z-index:9999; box-shadow:0 -2px 8px rgba(0,0,0,0.25); } .topbarleft, .topbarright { display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .topbarlink { color:#fff; text-decoration:none; font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:6px; transition:.25s color; } .topbarlink img { height:22px; width:auto; display:block; } .topbarlink:hover { color:#ff0000; } .footerbar img { height:24px; width:auto; display:block; } body { padding-bottom:70px; overflow-x:hidden; } @media (max-width:700px){ .footerbar { flex-direction:column; align-items:flex-start; padding:10px 16px; } .topbarleft, .topbarright { gap:12px; } body { padding-bottom:110px; } } /* ====== Typography Overrides (Legacy Style Integration) ====== */ /* ====== Light Gray Background Adjustment ====== */ body { background:#e9eaed; } .app-wrapper { background:transparent; } #top_bg8 { background:#e9eaed; } .brand-sidebar { background:#f7f7f9; border-color:#dcdde0; } .panel { background:#f7f7f9; border-color:#dadbdd; } .product-card { background:#f7f7f9; border-color:#dcdde0; } .media-wrap { background:#f0f1f3; } .categories-modal .cat-dialog { background:#f7f7f9; border-color:#dcdde0; } .brand-item { background:#f7f7f9; } .brand-item:hover { background:#ececef; } .brand-link { background:#f0f1f3; } .brand-link:hover { background:#e7e8ea; } .model-chip { background:#f0f1f3; } .model-chip:hover { background:#e7e8ea; } .pagination.modern .page-pill { background:#f7f7f9; } .file-trigger, .action-btn { background:#f0f1f3; border-color:#d6d7da; } .file-trigger:hover, .action-btn:hover { background:#e9eaec; } .footerbar { background:#202124; } /* ====== Gray Tone Adjustment 2 (slightly darker) ====== */ body { background:#e9eaed; } #top_bg8, #top1, #top2, #top3 { background-color:#e9eaed; } /* Central header segment: keep image if present, otherwise uniform gray */ #top2 { background:#e9eaed url('/img/top00000.png') center top no-repeat; background-size:1200px 235px; } #top1, #top3 { background:#e9eaed url('/img/fontop00.png') center top repeat-x; } .brand-sidebar, .panel, .product-card, .categories-modal .cat-dialog { background:#e9eaed; border-color:#c2c3c6; } .media-wrap { background:#e6e7ea; } .brand-item { background:#e9eaed; } .brand-item:hover { background:#e2e3e6; } .brand-link, .model-chip { background:#eceef0; } .brand-link:hover, .model-chip:hover { background:#e1e3e5; } .pagination.modern .page-pill { background:#e9eaed; } .file-trigger, .action-btn { background:#eceef0; border-color:#c4c5c8; } .file-trigger:hover, .action-btn:hover { background:#e2e3e6; } .media-wrap img { background:#dcdde0; } body { font:12px Tahoma, Arial, Helvetica, Geneva, sans-serif; color:#4A4A4A; } p { margin-bottom:10px; } h1, h2, h3, h4 { font:normal 18px/1.023 Tahoma, Arial, Helvetica, Geneva, sans-serif; margin:0 0 15px; color:#000; text-shadow:0 2px 0 rgba(88,88,88,.1); } h2 { font-size:16px; font-weight:700; } h3 { font-size:13px; font-weight:700; } h4 { font-size:13px; font-weight:400; margin:10px 0; } a { color:#6BA701; transition:color .5s; text-decoration:none; } a:hover { color:#E44C4B; } ::selection { background:#6BA701; color:#fff; } ::-moz-selection { background:#6BA701; color:#fff; } /* Brand sidebar adjustments */ .brand-sidebar-title { font:700 14px/1 Tahoma, Arial, sans-serif; letter-spacing:0; } .brand-item { font:600 12px/1.1 Tahoma, Arial, sans-serif; padding:7px 12px; } .brand-item.active { color:#111; } /* Product grid typography */ .product-name { font:700 13px/1.15 'Roboto','Montserrat', Arial, sans-serif; } .product-price { font:700 18px/1 'Roboto','Montserrat', Arial, sans-serif; color:#111; background:none; } .product-price .price-amount { font:700 1em/1 'Roboto','Montserrat', Arial, sans-serif; color:inherit; } .product-sku { font:11px/1.2 Tahoma, Arial, sans-serif; letter-spacing:0; } .buy-btn { font:700 12px/1 Tahoma, Arial, sans-serif; padding:8px 0; } /* Panel & buttons */ .action-btn, .chip, .file-trigger { font:600 12px/1 Tahoma, Arial, sans-serif; letter-spacing:0; } .chip-dark { font-weight:700; } /* Category modal */ .cat-title { font:700 16px/1.1 Tahoma, Arial, sans-serif; } .brand-link { font:600 12px/1.1 Tahoma, Arial, sans-serif; } .model-chip { font:600 11px/1 Tahoma, Arial, sans-serif; } .expand-btn { font-size:14px; } .cat-search { font:12px/1.2 Tahoma, Arial, sans-serif; } /* Pagination */ .pagination.modern .page-pill { font:600 12px/1 Tahoma, Arial, sans-serif; } /* Footer bar links */ .topbarlink { font:700 14px/1 Tahoma, Arial, sans-serif; } /* ====== Product Page Advantages (Enhanced) ====== */ .pp-advantages { margin-top:32px; padding:26px 28px 30px; background:linear-gradient(135deg,#ffffff 0%,#f4f6f8 50%,#eef1f4 100%); border:1px solid #d0d4d9; border-radius:28px; box-shadow:0 10px 34px -14px rgba(0,0,0,.18),0 2px 6px -2px rgba(0,0,0,.1); position:relative; overflow:hidden; } .pp-advantages::before { content:""; position:absolute; top:-40px; right:-40px; width:220px; height:220px; background:radial-gradient(circle at 30% 30%, rgba(255,152,0,.45) 0%, rgba(255,152,0,0) 70%); opacity:.18; pointer-events:none; } .pp-advantages::after { content:""; position:absolute; bottom:-60px; left:-60px; width:280px; height:280px; background:radial-gradient(circle at 70% 70%, rgba(46,125,50,.30) 0%, rgba(46,125,50,0) 70%); opacity:.16; pointer-events:none; } .adv-title { display:flex; align-items:center; gap:12px; font:700 16px/1.15 'Roboto', Arial, sans-serif; letter-spacing:.4px; color:#111; position:relative; z-index:2; } .adv-title .badge-star { width:30px; height:30px; border-radius:12px; background:#ff9800; color:#111; font:700 15px/30px 'Roboto', Arial, sans-serif; text-align:center; box-shadow:0 6px 16px -6px rgba(255,152,0,.55); } .adv-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; position:relative; z-index:2; } .adv-item { display:flex; gap:14px; align-items:flex-start; font:500 13px/1.5 'Roboto', Arial, sans-serif; color:#1d2328; position:relative; } .adv-item-icon { position:relative; width:20px; height:20px; flex:0 0 20px; border-radius:50%; background:linear-gradient(135deg,#2e7d32,#3c8c40); color:#fff; font:0/0 'Roboto', Arial, sans-serif; text-indent:-9999px; overflow:hidden; box-shadow:0 2px 6px -2px rgba(46,125,50,.55); margin-top:2px; } .adv-item-icon::before { content:""; position:absolute; left:50%; top:50%; width:9px; height:5px; border:2px solid #fff; border-top:none; border-right:none; transform:translate(-50%,-55%) rotate(-45deg); border-radius:1px; } /* Variant for highlight (auto inherited) */ .adv-item.highlight .adv-item-icon { background:linear-gradient(135deg,#ff9800,#ffb84d); box-shadow:0 2px 8px -2px rgba(255,152,0,.55); } .adv-item strong { font-weight:700; color:#0f1113; } .adv-item.highlight strong { color:#ff9800; } .adv-stack { display:flex; flex-direction:column; gap:8px; } .adv-stack-head { font:700 13px/1.2 'Roboto', Arial, sans-serif; letter-spacing:.35px; color:#111; } .adv-stack-desc { font:500 13px/1.5 'Roboto', Arial, sans-serif; color:#252b30; } .adv-chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .adv-chip { font:600 11px/1 'Roboto', Arial, sans-serif; letter-spacing:.5px; padding:6px 12px 6px; border-radius:1000px; background:#2e7d32; color:#fff; box-shadow:0 4px 12px -6px rgba(46,125,50,.55); position:relative; } .adv-chip.alt { background:#ff9800; color:#111; box-shadow:0 4px 14px -6px rgba(255,152,0,.55); } .adv-chip.light { background:#e1e3e7; color:#1c1f22; box-shadow:none; font-weight:600; } .adv-item + .adv-item::before { content:""; position:absolute; top:-8px; left:40px; right:0; height:1px; background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(180,185,190,.55) 40%,rgba(0,0,0,0) 100%); opacity:.35; } /* Zebra backgrounds (no numbering) */ .adv-item { background:rgba(255,255,255,.55); padding:10px 14px 12px; border-radius:18px; transition:.25s background,.25s box-shadow; } .adv-item:nth-child(odd) { background:rgba(240,242,245,.85); } .adv-item:nth-child(even) { background:rgba(255,255,255,.78); } .adv-item:hover { background:#ffffff; box-shadow:0 4px 14px -6px rgba(0,0,0,.15); } .adv-item.highlight { background:linear-gradient(135deg,#fff7e6 0%,#ffffff 70%); box-shadow:0 4px 16px -6px rgba(255,152,0,.35); } .adv-item.highlight:hover { background:linear-gradient(135deg,#fff2d6 0%,#ffffff 70%); } @media (max-width:640px){ .adv-item { padding:10px 12px 12px; } } @media (max-width:640px){ .pp-advantages { padding:24px 22px 26px; border-radius:24px; } .adv-title { font-size:15px; } .adv-item { gap:12px; } .adv-item-icon { width:24px; height:24px; line-height:24px; font-size:14px; } .adv-chips { gap:6px; } .adv-chip { padding:6px 10px 6px; } } /* Adjust existing orange-nav buttons */ /* Ensure consistent small font for misc elements */ .info-spacer { font-size:0; } /* Slightly tighten product card spacing due to smaller fonts */ .product-info { padding:14px 14px 16px; gap:8px; } /* Final product card shadow refinement */ .product-card { background:#e9eaed; border:2px solid #96979b; box-shadow:0 2px 4px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,.30) inset; transition:.3s box-shadow,.3s border-color,.3s background; } .product-card:hover { background:#e3e4e7; border-color:#7b7c80; box-shadow:0 16px 46px -8px rgba(0,0,0,.38), 0 8px 18px -6px rgba(0,0,0,.22); } .product-card:focus-within { border-color:#ff9800; box-shadow:0 0 0 2px rgba(255,152,0,.40),0 14px 40px -10px rgba(0,0,0,.34); } /* Header center block unified gray background */ #top2 { background:#e9eaed url('/img/top00000.png') center top no-repeat !important; background-size:1200px 235px !important; } /* Extra hard reset to eliminate any residual right vertical line near categories */ .brand-sidebar { background-clip:padding-box; outline:none; } .brand-sidebar::before, .brand-sidebar::after { display:none !important; } /* ===== Remove vertical line at right side of categories sidebar ===== */ .brand-sidebar { border:none !important; box-shadow:none !important; } .layout-with-sidebar { gap:30px; } .brand-sidebar::after { content:none !important; } /* ===== Final header center background unification ===== */ #top_bg8, #top_bg8 .top-columns, #top2, #top2.top-col { background-color:#e9eaed !important; } #top2 { background:#e9eaed !important; background-image:url('/img/top00000.png') !important; background-repeat:no-repeat !important; background-position:center top !important; background-size:1200px 235px !important; } #top2:empty { display:block; } #top2::before { content:''; display:block; width:100%; height:100%; pointer-events:none; } /* Remove any default white backgrounds on header columns */ .top-col { background-color:#e9eaed !important; } /* ===== Modern Brand Sidebar Visual Refresh (no JS) ===== */ .brand-sidebar { background:#e5e6e9 !important; padding:18px 16px 20px !important; border-radius:22px !important; display:flex !important; flex-direction:column; gap:14px; box-shadow:0 4px 14px -6px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.55) inset !important; position:static !important; top:auto !important; max-height:none !important; overflow:visible !important; scrollbar-width:thin; scrollbar-color:#b2b3b6 transparent; } .brand-sidebar::-webkit-scrollbar { width:10px; } .brand-sidebar::-webkit-scrollbar-track { background:transparent; } .brand-sidebar::-webkit-scrollbar-thumb { background:#b5b6b9; border-radius:20px; border:2px solid #e5e6e9; } .brand-sidebar::-webkit-scrollbar-thumb:hover { background:#a5a6a9; } .brand-sidebar-title { font:700 15px/1.1 Tahoma, Arial, sans-serif !important; letter-spacing:.3px; color:#27282b; padding:2px 2px 6px; position:sticky; top:0; background:#e5e6e9; z-index:2; } .brand-list { display:flex; flex-direction:column; gap:4px; margin:0; padding:0; } .brand-item { position:relative; display:flex; align-items:center; gap:8px; min-height:34px; padding:6px 12px 6px 14px; font:400 12px/1.25 Tahoma, Arial, sans-serif; color:#2f3134; text-decoration:none; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25)); border:1px solid #c9cacd; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(255,255,255,.5) inset; transition:.28s background,.28s box-shadow,.28s border-color,.28s color; } .brand-item:hover { background:linear-gradient(180deg,#ffffff,#f3f4f6); border-color:#b5b6b9; box-shadow:0 4px 10px -4px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.55) inset; color:#1d1f21; } .brand-item:active { background:#e2e3e6; box-shadow:0 2px 6px -2px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.55) inset; } .brand-item.active { background:linear-gradient(180deg,#ffb347,#ff9800); color:#fff !important; border-color:#ff9800; box-shadow:0 4px 14px -6px rgba(255,152,0,.55),0 0 0 1px rgba(255,255,255,.45) inset; } .brand-item.active::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:3px; background:#fff8; } .brand-item .brand-name { flex:1 1 auto; display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.25px; font-weight:700; color:#111; } /* Brand count separate pill */ .brand-item .brand-count { font:600 11px/1 Tahoma, Arial, sans-serif; color:#7c7e82; background:rgba(255,255,255,.55); padding:3px 7px 4px; border-radius:12px; border:1px solid #cfd0d2; box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(0,0,0,.05); letter-spacing:.3px; min-width:30px; text-align:center; transition:.25s background,.25s color,.25s border-color,.25s box-shadow; } .brand-item:hover .brand-count { background:#fff; color:#5a5c60; } .brand-item.active .brand-count { background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.35); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset; } /* Focus accessibility */ .brand-item:focus { outline:none; } .brand-item:focus-visible { box-shadow:0 0 0 2px rgba(255,152,0,.55),0 4px 10px -4px rgba(0,0,0,.25); border-color:#ff9800; } /* Слабый разделитель каждые несколько элементов (опционально через nth-child) */ .brand-item:nth-child(12n+1) { margin-top:6px; } /* Плавное появление (однократно если нужно) */ .brand-item { opacity:1; transform:translateY(0); } /* ===== Product stock status styling (simplified price) ===== */ .product-price { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; } .product-price .price-amount { font:700 22px/1 'Roboto','Montserrat','Inter','Segoe UI',Arial,sans-serif; color:#111; letter-spacing:.2px; } .product-price .price-new { order: 0; color: #e74c3c; font-weight: 800; font-size: 22px; } .product-price .price-old { order: 1; text-decoration: line-through; color: #999; font-size: 16px; opacity: .9; } /* Center stock badge under price */ .stock-row { text-align:center; margin-top:8px; } .stock-row .stock-status { margin-left:0; display:inline-block; } .stock-status { margin-left:8px; position:relative; font:600 11px/1 Tahoma, Arial, sans-serif; padding:4px 9px 5px 18px; border-radius:14px; letter-spacing:.3px; user-select:none; white-space:nowrap; transition:.3s background,.3s color,.3s box-shadow; } .stock-status.in-stock { background:linear-gradient(135deg,#d9f4e2,#c2ecd2); color:#1b5e20; box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(255,255,255,.6) inset; } .stock-status.in-stock .stock-dot { position:absolute; left:8px; top:50%; width:8px; height:8px; background:#33a354; border-radius:50%; transform:translateY(-50%); box-shadow:0 0 0 4px rgba(51,163,84,.25); animation:stockPulse 2.6s ease-in-out infinite; transition:.3s background,.3s box-shadow, .3s transform; } .stock-status.in-stock .stock-dot.blink-off { background:#6bd189; box-shadow:0 0 0 2px rgba(51,163,84,.10); transform:translateY(-50%) scale(.65); } .stock-status.no-stock { background:linear-gradient(135deg,#f8d6d6,#f3c1c1); color:#9d1d1d; box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(255,255,255,.55) inset; padding-left:14px; } .stock-status.no-stock::before { content:""; position:absolute; left:6px; top:50%; width:6px; height:6px; background:#d62828; border-radius:50%; transform:translateY(-50%); box-shadow:0 0 0 3px rgba(214,40,40,.25); } @keyframes stockPulse { 0%,100% { box-shadow:0 0 0 4px rgba(51,163,84,.25); opacity:1; } 50% { box-shadow:0 0 0 7px rgba(51,163,84,.08); opacity:.85; } } .product-card:hover .stock-status.in-stock { box-shadow:0 2px 6px -2px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.65) inset; } .product-card:hover .stock-status.no-stock { box-shadow:0 2px 6px -2px rgba(0,0,0,.15),0 0 0 1px rgba(255,255,255,.6) inset; } /* Final buy button emphasis */ .buy-btn { font:800 14px/1.05 Tahoma, Arial, sans-serif !important; letter-spacing:.6px; padding:10px 0 !important; } .buy-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px -6px rgba(255,152,0,.45); } /* Ensure buy button label is visually centered for anchors and buttons Use inline-flex so text centers both vertically and horizontally across variants. */ .buy-btn, .pp-buy, .pp-cart-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding-left: 14px !important; padding-right: 14px !important; /* Make the button occupy full card width so label centers reliably */ width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; } /* If any inner element inside the button is forced to the left, ensure its text centers */ .buy-btn *, .pp-buy *, .pp-cart-btn * { text-align: center !important; } /* Stronger rule scoped to product card to avoid overrides from other themes */ .products-grid .product-card .buy-btn { display: block !important; width: 100% !important; text-align: center !important; padding: 10px 16px !important; margin: 8px 0 0 0 !important; min-height: 40px !important; line-height: 1 !important; white-space: nowrap !important; /* Ensure no underline or other decorations */ text-decoration: none !important; } /* Fallback: ensure anchor's inline text nodes are centered inside flex */ .products-grid .product-card .buy-btn::before, .products-grid .product-card .buy-btn::after { content: none !important; } /* Unified grid spacing (requested 35px) with responsive scaling */ .modern-grid { gap:35px !important; } @media (max-width:1200px){ .modern-grid { gap:30px !important; } } @media (max-width:900px){ .modern-grid { gap:26px !important; } } @media (max-width:600px){ .modern-grid { gap:20px !important; } } /* Hover effect: no layout shift, heavier black shadow only */ .product-card { position:relative; } .product-card:hover { background:#e3e4e7; /* оставляем легкую реакцию (можно убрать при желании) */ border-color:#7b7c80; /* не меняем толщину */ box-shadow:0 22px 60px -12px rgba(0,0,0,.55), 0 6px 18px -6px rgba(0,0,0,.35) !important; transform:none !important; } .product-card:focus-within { box-shadow:0 0 0 2px rgba(255,152,0,.40),0 18px 54px -14px rgba(0,0,0,.38); } /* Footer hidden toggle link */ .footer-hidden-toggle { display:inline-block; font:700 12px/1 Tahoma, Arial, sans-serif; padding:8px 14px; background:#ff9800; color:#111 !important; border:2px solid #ff9800; border-radius:10px; text-decoration:none; letter-spacing:.5px; transition:.22s background,.22s color,.22s box-shadow,.22s transform; position:relative; } .footer-hidden-toggle:hover { background:#ffae33; color:#111; transform:translateY(-2px); box-shadow:0 4px 12px -4px rgba(0,0,0,.35); } .footer-hidden-toggle:active { background:#ff9800; transform:translateY(0); box-shadow:0 2px 6px -2px rgba(0,0,0,.35); } .footer-hidden-toggle:focus-visible { outline:2px solid #111; outline-offset:2px; } /* ===== Temporary DEBUG helpers (enable with body.debug or ?debug=1) ===== */ body.debug * { transition:none !important; } body.debug .debug-outline { outline: 1px solid #000 !important; } body.debug .debug-label { position: absolute; left:0; top:-18px; background:#000; color:#fff; font:700 11px/1 'Roboto',Arial,sans-serif; padding:2px 6px; border-radius:4px; z-index:99999; pointer-events:none; opacity:0.95; } /* Apply to common container/block elements */ body.debug header, body.debug nav, body.debug main, body.debug footer, body.debug .shell, body.debug .brand-sidebar, body.debug .panel, body.debug .product-card, body.debug .cat-dialog, body.debug .categories-modal, body.debug .topbar, body.debug .top-columns, body.debug .logoav, body.debug .nav-strip, body.debug .brand-item-wrap, body.debug .product-info, body.debug .media-wrap { position:relative; /* ensure label can position */ } body.debug header, body.debug nav, body.debug main, body.debug footer, body.debug .shell, body.debug .brand-sidebar, body.debug .panel, body.debug .product-card, body.debug .cat-dialog, body.debug .categories-modal, body.debug .topbar, body.debug .top-columns, body.debug .logoav, body.debug .nav-strip, body.debug .brand-item-wrap, body.debug .product-info, body.debug .media-wrap { border:1px solid #000 !important; } /* Helper class to inject a visible human-readable label (JS will insert these) */ .debug-injected-label { position:relative; } /* Smaller tables/inline blocks too */ body.debug table, body.debug td, body.debug th, body.debug .brand-line, body.debug .cat-group, body.debug .model-sublist { border:1px solid #000 !important; } /* Make sure modals/backdrops still visible */ body.debug .modal-backdrop { opacity:.45 !important; } /* Keep debug visuals printable off by default */ @media print { body.debug * { outline: none !important; border: none !important; } } /* Stretch main content to full viewport width when debugging */ body.debug .main-shell { position:relative !important; left:50% !important; right:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; width:100vw !important; box-sizing:border-box !important; padding-left:18px !important; padding-right:18px !important; } /* Shift everything inside main-shell slightly right and down to avoid debug-label overlap */ body.debug .main-shell > * { transform: translate(5px, 5px) !important; } /* Also shift common inner large containers to make sure grids/tables move in lock-step */ body.debug .main-shell .products-grid, body.debug .main-shell .modern-grid, body.debug .main-shell .products-section, body.debug .main-shell .product-card, body.debug .main-shell .categories-modal { transform: translate(5px, 5px) !important; } /* Shift labels slightly inside table cells to avoid overlap when multiple tables start together */ body.debug table .debug-label, body.debug td .debug-label, body.debug th .debug-label { left:5px !important; top:5px !important; } /* Prevent clipping of debug labels inside grids/tables and make labels single-line */ body.debug table, body.debug td, body.debug th, body.debug .products-grid, body.debug .modern-grid, body.debug .main-shell, body.debug .shell { overflow: visible !important; } body.debug .debug-label { white-space:nowrap; } /* Stronger positioning for injected debug labels: ensure the container is a positioned context and apply nudges for grids/tables/cards so labels don't overlap or get clipped. */ body.debug .debug-injected-label { position: relative !important; overflow: visible !important; } /* Default nudge for common grid/section containers */ body.debug .products-grid .debug-label, body.debug .modern-grid .debug-label, body.debug .main-shell .debug-label, body.debug .brand-sidebar .debug-label, body.debug .shell .debug-label, body.debug .cat-dialog .debug-label, body.debug .nav-strip__inner .debug-label { left: 5px !important; top: 5px !important; } /* Product cards need a slightly larger nudge and to sit above media content */ body.debug .product-card .debug-label { left: 8px !important; top: 8px !important; z-index: 130000 !important; } /* Table cells explicit (safety) */ body.debug table .debug-label, body.debug td .debug-label, body.debug th .debug-label { left: 5px !important; top: 5px !important; z-index: 125000 !important; } /* Ensure labels always render above complex widgets */ body.debug .debug-label { z-index: 140000 !important; }