/* === dvk-cf-css === */ .dvk-cf { margin-bottom: 32px; } .dvk-cf__title { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #1a1a1a; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #c9a66b; } .dvk-cf__reset { display: inline-block; font-family: 'Raleway', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #888; text-decoration: none; margin-bottom: 12px; transition: color 0.2s; } .dvk-cf__reset:hover { color: #c9a66b; } .dvk-cf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 6px; } .dvk-cf__swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; padding: 8px 4px 6px; border-radius: 6px; transition: background 0.2s; border: 1px solid transparent; } .dvk-cf__swatch:hover { background: rgba(201,166,107,0.07); border-color: rgba(201,166,107,0.25); } .dvk-cf__swatch--active { background: rgba(201,166,107,0.05); border-color: rgba(201,166,107,0.3); } .dvk-cf__dot { display: block; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.18); transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; } .dvk-cf__dot--light { box-shadow: 0 1px 4px rgba(0,0,0,0.18), inset 0 0 0 1px #d8d0bf; } .dvk-cf__swatch:hover .dvk-cf__dot { transform: scale(1.12); box-shadow: 0 3px 10px rgba(0,0,0,0.22); } .dvk-cf__swatch--active .dvk-cf__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c9a66b, 0 2px 8px rgba(0,0,0,0.2); transform: scale(1.08); } .dvk-cf__dot--light.dvk-cf__swatch--active .dvk-cf__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c9a66b; } .dvk-cf__name { font-family: 'Raleway', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #888; text-align: center; line-height: 1.25; transition: color 0.2s; word-break: break-word; } .dvk-cf__swatch:hover .dvk-cf__name { color: #1a1a1a; } .dvk-cf__swatch--active .dvk-cf__name { color: #c9a66b; font-weight: 600; } /* === dvk-mobile-padding === */ @media (max-width: 600px) { html body.archive.ast-woo-shop-archive .site-main, html body.tax-product_cat .site-main, html body.woocommerce-shop .site-main { padding-left: 16px !important; padding-right: 16px !important; } } /* === dvk-mobile-bar-css === */ .dvk-mobile-bar{display:none}@media (max-width:768px){.dvk-mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:998;gap:8px;padding:8px 10px;background:#fff;border-top:1px solid #e6e6e6;box-shadow:0 -2px 10px rgba(0,0,0,.08);}.dvk-mobile-bar a{flex:1 1 50%;min-height:46px;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1.2;font-weight:600;text-align:center;text-decoration:none;border-radius:4px;padding:6px 8px;}.dvk-mobile-bar__call{background:#fff;color:#1a1a1a;border:1px solid #1a1a1a}.dvk-mobile-bar__zamer{background:#1a1a1a;color:#fff;border:1px solid #1a1a1a}body{padding-bottom:62px}} /* === dvk-edinyj-shrift === */ /* Подмена шрифта: Montserrat под именами прежних семейств. Собрано sobrat-shrift.py — не править руками. */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html body, html body *:not(#dvk-net-takogo),html body *:not(#dvk-net-takogo)::before,html body *:not(#dvk-net-takogo)::after{font-style:normal !important} /* === dvk-kontakty-ssylki === */ .dvk-kontakt{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;white-space:nowrap}.dvk-kontakt:hover{text-decoration-style:solid} /* === dvk-oformlenie === */ /* ============ 1. Палитра: двенадцать переменных вместо сотен правил ============ */ html:root{ --dvk-gold:#b8906d; /* декоративный, на тёмном фоне: 6,1:1 */ --dvk-gold-deep:#75563d; /* текст и кнопки: белым по нему 6,3:1, им по белому 6,4:1 */ --dvk-gold2:#75563d; --dvk-tishe:#6b655d; /* подписи и второстепенное: 5,6:1 на тёплом, 6,0:1 на белом */ --dvk-warm:#f5f3f1; --dvk-warm-deep:#ebe7e3; --dvk-border:#e2ded9; --dvk-text:#26231f; --dvk-muted:#7c766e; /* прежний #888 давал 3,5:1 — ниже нормы */ --dvk-dark:#1f1c19; /* свои, для правил ниже */ --dvk-zazor:28px; --dvk-skruglenie:10px; } /* ============ 2. Витрина: воздух вместо стыков ============ */ /* ⚠️ :not(#dvk-net-takogo) добавляет вес уровня id — иначе не перебить тринадцать конкурирующих правил зазора, см. докблок сниппета. */ html body:not(#dvk-net-takogo) ul.products{ gap:var(--dvk-zazor) !important; background:transparent !important; padding:0 !important; } html body:not(#dvk-net-takogo) ul.products li.product{ background:transparent !important; border:0 !important; overflow:visible !important; } html body:not(#dvk-net-takogo) ul.products li.product::after{display:none !important} /* ============ 3. Фото на белом поле с тонкой рамкой ============ Заказчик 20.09: «фон где фото не нравится сделай белым… оставь тонкую рамку разделения». Тёплая подложка #f5f3f1 сливалась со светлыми полотнами; рамка в 1 px отделяет снимок от страницы и держит сетку. */ html body:not(#dvk-net-takogo) ul.products li.product:not(.product-category) .woocommerce-loop-product__link{ background:#fff !important; border:1px solid var(--dvk-border) !important; border-radius:var(--dvk-skruglenie) !important; overflow:hidden !important; display:block !important; } html body:not(#dvk-net-takogo) ul.products li.product:not(.product-category) img{ padding:20px 22px !important; background:transparent !important; } /* ============ 4. Имя, отделки, цена ============ */ html body:not(#dvk-net-takogo) ul.products li.product .woocommerce-loop-product__title, html body:not(#dvk-net-takogo) ul.products li.product h2{ padding:12px 2px 0 !important;line-height:1.3 !important; } .dvk-of-otdelki{display:flex;align-items:center;gap:5px;margin:9px 2px 2px;min-height:14px} .dvk-of-tochka{width:13px;height:13px;border-radius:50%;display:inline-block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)} .dvk-of-eshche{font-size:12px;color:var(--dvk-tishe);margin-left:2px} /* ============ 3б. Ровный низ у плиток витрины ============ Замер на главной: плитки одной высоты (586 px), а кнопки внутри них стоят на разной высоте — 2869, 2925, 2968. Разброс до 99 px, ряд выглядит рваным. Причина не в вёрстке, а в данных: у товара с вариациями цена печатается диапазоном в две строки («6 465 ₽ — 7 345 ₽»), у простого — в одну, а название занимает то одну строку, то две. Всё, что ниже, съезжает. Лечится не подгонкой, а раскладкой: подпись под фото растягиваем на всю оставшуюся высоту, названию даём место под две строки всегда, кнопку прижимаем к низу. Тогда ряд заканчивается одной линией независимо от длины названия и формы цены. */ html body:not(#dvk-net-takogo) ul.products li.product .astra-shop-summary-wrap{ display:flex !important;flex-direction:column !important; flex:1 1 auto !important; } html body:not(#dvk-net-takogo) ul.products li.product .ast-loop-product__link, html body:not(#dvk-net-takogo) ul.products li.product .woocommerce-loop-product__title{ min-height:2.6em !important; } html body:not(#dvk-net-takogo) ul.products li.product .price{ margin-top:8px !important;margin-bottom:12px !important; } html body:not(#dvk-net-takogo) #content ul.products li.product .button, html body:not(#dvk-net-takogo) #content ul.products li.product .dvk-price-request, html body:not(#dvk-net-takogo) ul.products li.product .button, html body:not(#dvk-net-takogo) ul.products li.product .dvk-price-request{ margin-top:auto !important; } /* ============ 4а. Места, где цвет прописан мимо переменных ============ Проверил контраст по всем видимым надписям главной: 19 не дотягивали до нормы 4,5:1. Ни одно из них не берёт цвет из переменной — значения вписаны в правила руками, поэтому переналадка палитры их не задела. Ниже поимённо, с прежним контрастом. */ html body:not(#dvk-net-takogo) .dvk-color-label{color:var(--dvk-tishe) !important} /* было 3,2 */ html body:not(#dvk-net-takogo) .home-contacts__label, html body:not(#dvk-net-takogo) .footer__label{color:var(--dvk-tishe) !important} /* было 3,54 */ html body:not(#dvk-net-takogo) .home-contacts__value a, html body:not(#dvk-net-takogo) .home-contacts__value{color:var(--dvk-gold-deep) !important} /* было 2,3 и 2,9 */ html body:not(#dvk-net-takogo) .footer__logo, html body:not(#dvk-net-takogo) .footer__title, html body:not(#dvk-net-takogo) .footer__phone{color:var(--dvk-gold-deep) !important} /* было 2,07 */ /* ⚠️ А вот блок отзывов Яндекса — на тёмной плашке (#181818), и глубокий акцент там сливается с фоном: сначала я свалил его в общую кучу и получил 2,67 вместо прежних 4,4. На тёмном работает светлый тон акцента. */ html body:not(#dvk-net-takogo) .dvk-ya-profile a{color:var(--dvk-gold) !important} /* ============ 4г. Колонка фильтров и подпись разделов ============ Проверка контраста 20.09 по разделу каталога нашла 49 надписей ниже нормы, и все — в колонке фильтров. Заголовки виджетов «Цена», «Категории», «Цвет» набраны акцентом #c9a66b по тёплому #f7f4ee: **2,09 при норме 4,5**. Счётчики «(17)» серым #999 по тому же фону — 2,6. Это не от правок оформления: обе краски вписаны в правила руками, мимо переменных, поэтому смена палитры их не коснулась. Заголовкам даём глубокий акцент, счётчикам — приглушённый текстовый тон: оба темнее фона настолько, чтобы пройти норму с запасом. */ html body:not(#dvk-net-takogo) #secondary .widget-title, html body:not(#dvk-net-takogo) #secondary .widgettitle{ color:var(--dvk-gold-deep) !important; /* было 2,09 */ } html body:not(#dvk-net-takogo) #secondary .count, html body:not(#dvk-net-takogo) #secondary .woocommerce-widget-layered-nav-list__item .count{ color:var(--dvk-tishe) !important; /* было 2,6 */ } /* Названия цветов в фильтре — серый #888 по тёплому фону, 3,23 при кегле 10. Мелкий текст норму не снижает: 4,5 нужен и ему. */ html body:not(#dvk-net-takogo) .dvk-cf__name{color:var(--dvk-tishe) !important} /* Подпись «Категории:» под карточкой — серый #888 по белому даёт 3,54. */ html body:not(#dvk-net-takogo) .posted_in{color:var(--dvk-tishe) !important} /* ============ 4е. Остальные страницы: та же пара красок ============ Проверка 20.09 прошла по восьми страницам. Нарушения нашлись почти везде, и все — одна и та же пара значений, вписанных руками мимо переменных: · старое золото #c9a66b по белому — **2,3** при норме 4,5; · серые #888 / #999 / #777 / #8a8a8a по белому — 2,85…4,48. Оба оттенка появились до переналадки палитры и потому её не заметили. Заменяем поимённо: золоту — глубокий тон, серым — приглушённый текстовый. Витрина, карточка, корзина и «Статьи» уже чисты — их здесь нет. */ /* золото по белому: 2,3 → глубокий тон */ html body:not(#dvk-net-takogo) .dvk-about-page em, html body:not(#dvk-net-takogo) .dvk-svc-section__num, html body:not(#dvk-net-takogo) .dvk-svc-card__num, html body:not(#dvk-net-takogo) .dvk-svc-card__tag, html body:not(#dvk-net-takogo) .dvk-svc-price__value, html body:not(#dvk-net-takogo) .dvk-svc-price__cur, html body:not(#dvk-net-takogo) .dvk-svc-cta__link, html body:not(#dvk-net-takogo) .dvk-pay-card__title{ color:var(--dvk-gold-deep) !important; } /* серые подписи: 2,85…4,48 → приглушённый текстовый */ html body:not(#dvk-net-takogo) .woocommerce-result-count, html body:not(#dvk-net-takogo) .dvk-about-hours-row span, html body:not(#dvk-net-takogo) .dvk-svc-price__title, html body:not(#dvk-net-takogo) .dvk-svc-price__from, html body:not(#dvk-net-takogo) .dvk-svc-price__note, html body:not(#dvk-net-takogo) .dvk-calcform-note, html body:not(#dvk-net-takogo) .dvk-consent, html body:not(#dvk-net-takogo) .dvk-pay-card__label, html body:not(#dvk-net-takogo) .dvk-pay-card__note, html body:not(#dvk-net-takogo) .dvk-pay-method__desc, html body:not(#dvk-net-takogo) form label{ color:var(--dvk-tishe) !important; } /* ⚠️ Кнопка «Консультация» на «О компании» — тёмное золото ПО золоту, 2,9. Здесь менять надо не краску надписи на более тёмную того же семейства, а увести её в тёмный: на #c9a66b тёмный тон даёт 7,6, а белый — всего 2,2. Тот же урок, что был с отзывами Яндекса: сначала смотрим, на чём лежит. */ html body:not(#dvk-net-takogo) #content .dvk-about-cta__button, html body:not(#dvk-net-takogo) .dvk-about-cta__button{color:var(--dvk-dark) !important} /* ============ 4д. Блоки контактов и цифры «О компании» ============ На «Контактах» подписи «Адрес», «Телефоны», «E-mail» набраны золотом #c9a66b по тёплому фону — 2,09. На «О компании» тем же золотом по белому набраны цифры «12+», «900+», «5000+» — 2,3. У подписей нет ни одного класса, поэтому правило строится от контейнера: всё, что не ссылка, читается тёмным, ссылки — глубоким акцентом. */ html body:not(#dvk-net-takogo) .dvk-contacts-wrap div, html body:not(#dvk-net-takogo) .dvk-contacts-block div{color:var(--dvk-text) !important} html body:not(#dvk-net-takogo) .dvk-contacts-wrap a, html body:not(#dvk-net-takogo) .dvk-contacts-block a, html body:not(#dvk-net-takogo) .wpcf7 a{color:var(--dvk-gold-deep) !important} /* ⚠️ подписи «Адрес», «Телефоны» — это h2 по 11 px, а не div: первая попытка правила по div их не задела, пришлось смотреть разметку */ /* ⚠️ Дважды ошибся с направлением правки, прежде чем понял: часть надписей лежит на тёмных плашках, часть на светлых, а акцент один и тот же. Поэтому у каждой правки ниже проверен фон: на светлом — глубокий тон, на тёмном — светлый (см. блок отзывов Яндекса выше). */ html body:not(#dvk-net-takogo) .dvk-about-page a, html body:not(#dvk-net-takogo) .dvk-about-cta__link, html body:not(#dvk-net-takogo) .dvk-about-value__num, html body:not(#dvk-net-takogo) .dvk-kontakty-text a, html body:not(#dvk-net-takogo) .dvk-contacts-block h2, html body:not(#dvk-net-takogo) .dvk-about-section__num, html body:not(#dvk-net-takogo) .dvk-about-stat, html body:not(#dvk-net-takogo) .dvk-about-stat *, html body:not(#dvk-net-takogo) .dvk-about-contact__label{color:var(--dvk-gold-deep) !important} html body:not(#dvk-net-takogo) .dvk-about-page span:not([class*="gold"]){color:var(--dvk-tishe)} /* неактивные вкладки на карточке: тёмный текст лежал на среднем сером — 3,54 */ html body:not(#dvk-net-takogo) .woocommerce-tabs ul.tabs li{background:var(--dvk-warm) !important} html body:not(#dvk-net-takogo) .woocommerce-tabs ul.tabs li a{color:var(--dvk-tishe) !important} html body:not(#dvk-net-takogo) .woocommerce-tabs ul.tabs li.active{background:#fff !important} html body:not(#dvk-net-takogo) .woocommerce-tabs ul.tabs li.active a{color:var(--dvk-text) !important} /* ============ 4б. Шапка: одна и та же на всех страницах ============ ⚠️ На главной полоса шапки тёмная, а на карточке товара внутренняя обёртка `.site-primary-header-wrap` оказалась белой — и золотое меню на ней давало контраст 2,9 при норме 4,5. Сводим шапку к тёмной везде: на ней тот же акцент читается на 6,1. Заодно уходит разнобой между шаблонами. */ html body:not(#dvk-net-takogo) .site-primary-header-wrap, html body:not(#dvk-net-takogo) .ast-primary-header-bar, html body:not(#dvk-net-takogo) .ast-above-header-bar{background-color:var(--dvk-dark) !important} /* ============ 4в. Мелкие подписи в колонке и на карточке ============ Счётчики у цветов, подписи классов цены, артикул — все набраны серым около #888 по 11–12 px, контраст 3,4–3,8. Это не придирка: такие надписи и так на пределе читаемости из-за размера. */ html body:not(#dvk-net-takogo) .dvk-kk-cvet__skolko, html body:not(#dvk-net-takogo) .dvk-cf-cena__podpis, html body:not(#dvk-net-takogo) .sku, html body:not(#dvk-net-takogo) .sku_wrapper, html body:not(#dvk-net-takogo) .product_meta, html body:not(#dvk-net-takogo) .product_meta a, html body:not(#dvk-net-takogo) .widget .count{color:var(--dvk-tishe) !important} /* знак рубля брал акцентный цвет и отрывался от самой цены */ html body:not(#dvk-net-takogo) .woocommerce-Price-currencySymbol{color:inherit !important} html body:not(#dvk-net-takogo) .dvk-cart-close{color:var(--dvk-tishe) !important} /* ============ 4г. Цена на карточке товара ============ ⚠️ Самое заметное из найденного: цена на странице товара набрана золотом #c9a66b по белому — контраст 2,3 при норме 4,5. Это не подпись и не украшение, это цена: покупатель обязан её прочитать с первого взгляда. Делаем тёмной и крупной, как в плитках каталога. */ html body:not(#dvk-net-takogo) .summary .price, html body:not(#dvk-net-takogo) .summary .price .amount, html body:not(#dvk-net-takogo) .summary .price bdi, html body:not(#dvk-net-takogo) .woocommerce-variation-price .price, html body:not(#dvk-net-takogo) .woocommerce-variation-price .amount, html body:not(#dvk-net-takogo) .woocommerce-variation-price bdi{ color:var(--dvk-text) !important;font-weight:700 !important; } html body:not(#dvk-net-takogo) .summary .price del, html body:not(#dvk-net-takogo) .summary .price del bdi{ color:var(--dvk-tishe) !important;font-weight:400 !important; } html body:not(#dvk-net-takogo) ul.products li.product .price, html body:not(#dvk-net-takogo) ul.products li.product .price .amount, html body:not(#dvk-net-takogo) ul.products li.product .price bdi{ color:var(--dvk-text) !important;font-size:17px !important;font-weight:700 !important; padding:6px 2px 0 !important;letter-spacing:0 !important; } html body:not(#dvk-net-takogo) ul.products li.product .price del, html body:not(#dvk-net-takogo) ul.products li.product .price del bdi{ color:var(--dvk-muted) !important;font-weight:400 !important; } /* ============ 5. Кнопка на плитке ============ */ html body:not(#dvk-net-takogo) ul.products li.product a.button, html body:not(#dvk-net-takogo) ul.products li.product button.button{ display:inline-block !important;width:auto !important;margin:12px 2px 0 !important; background:var(--dvk-gold-deep) !important;color:#fff !important;border:0 !important; border-radius:8px !important;text-transform:none !important; font-size:13px !important;font-weight:600 !important;letter-spacing:0 !important; padding:10px 16px !important; } html body:not(#dvk-net-takogo) ul.products li.product a.button:hover, html body:not(#dvk-net-takogo) ul.products li.product button.button:hover{ background:var(--dvk-dark) !important;color:#fff !important; } /* ============ 5б. Поля страницы — 30 px (заказчик 20.09) ============ «Отступы слева справа должны быть по 30 пикселей». Шапка стоит на 30 px, а содержимое темы зажато в 1240 px: на широком экране страница выглядела колонкой посреди пустоты и не совпадала с шапкой. ⚠️ Поля задаём padding, а не margin: у внутренних блоков Astra свои отрицательные margin, и на них поле бы не сработало. */ html body:not(#dvk-net-takogo) #content .ast-container{ max-width:none !important;width:100% !important; padding-left:30px !important;padding-right:30px !important; } @media (max-width:600px){ html body:not(#dvk-net-takogo) #content .ast-container{ padding-left:16px !important;padding-right:16px !important; } } /* ⚠️ А текстовым страницам ширину, наоборот, надо ограничить. Замер на экране 1961 px: на «Сервисе» и «Оплате и доставке» абзац растянулся на 1856 px — это строка примерно в 250 знаков, её физически неудобно читать, глаз теряет начало следующей. Каталогу и карточке ширина нужна (там сетка и фотографии), тексту — нет. 1240 px — то, что было до 20.09. «О компании» держит свою вёрстку и от этого предела не страдает. */ /* ⚠️ «О компании», «Сервис», «Оплата», «Контакты»: собранная полоса, а не вся ширина. Пробовал и так и так, и вот что показал замер на 1961 px. Во всю ширину эти страницы рассыпаются, потому что свёрстаны как единая композиция, а не как сетка блоков: форма консультации растягивалась на 1864 px (поля ввода в метр длиной), заголовки — на 1848, подписи разъезжались с тем, что они подписывают. Каталогу ширина нужна — там сетка товаров, и чем больше колонок, тем лучше. Тексту и форме — нет. 1320 px — середина: страница перестаёт быть узкой полосой, ряды карточек получают по 300+ px на карточку, а строки и поля ввода остаются соразмерными человеку. */ html body:not(#dvk-net-takogo).page:not(.home) #content .ast-container{ max-width:1320px !important;margin-left:auto !important;margin-right:auto !important; } /* ⚠️ Форму держим узкой отдельно от страницы. Поле ввода имени шириной в половину экрана выглядит как ошибка вёрстки, даже когда это не она: глазу негде зацепиться, и непонятно, сколько туда писать. */ html body:not(#dvk-net-takogo) .dvk-svc-form .wpcf7, html body:not(#dvk-net-takogo) .dvk-form, html body:not(#dvk-net-takogo) .dvk-pay-cta form, html body:not(#dvk-net-takogo) .dvk-about-cta form{ max-width:620px !important;margin-left:auto !important;margin-right:auto !important; } /* ⚠️ Во всю ширину вылезли две вещи, которых при 1180 px было не видно. 1. Ряды карточек собраны на flex БЕЗ переноса и с направлением в столбец: три карточки доставки вытягивались на всю строку каждая. Возвращаем их в ряд и разрешаем перенос — на узком экране лягут столбиком сами. 2. Ряды на сетке были заданы в два столбца независимо от места. На широком экране это половина пустоты: четыре способа оплаты просятся в один ряд. */ html body:not(#dvk-net-takogo) .dvk-pay-cards{ display:flex !important;flex-direction:row !important;flex-wrap:wrap !important; gap:20px !important;align-items:stretch !important; } html body:not(#dvk-net-takogo) .dvk-pay-cards > *{ flex:1 1 300px !important; } html body:not(#dvk-net-takogo) .dvk-pay-methods{ display:grid !important;gap:20px !important; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important; } html body:not(#dvk-net-takogo) .dvk-svc-cards, html body:not(#dvk-net-takogo) .dvk-svc-prices, html body:not(#dvk-net-takogo) .dvk-about-values{ display:grid !important;gap:20px !important; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important; } /* ⚠️ Ряд цифр «О компании» вынесен наружу отрицательными полями по 20 px — при узком контейнере это было незаметно, а во всю ширину он стал вылезать за поле страницы и упираться в край экрана. */ html body:not(#dvk-net-takogo) .dvk-about-stats{ margin-left:0 !important;margin-right:0 !important; } /* ⚠️ У способов оплаты вместо значков стояло «????» — четыре знака вопроса прямо в содержимом страницы. Так выглядит эмодзи, прошедшее через базу, которая их не хранит: сами значки утрачены, восстановить их неоткуда. Поставил вместо них нумерацию 01…04 — приём, который на сайте уже используется на «Сервисе» и в блоке «Как мы работаем», так что смотрится как задумано, а не как заплатка. Здесь — её оформление. */ html body:not(#dvk-net-takogo) .dvk-pay-method__icon{ font-size:13px !important;letter-spacing:.12em !important; color:var(--dvk-gold-deep) !important;margin-bottom:10px !important; } /* ⚠️ Расширение композиции и длина строки — разные задачи, и решать их надо по отдельности. Замер на 1961 px: при пределе 1240 страницы «О компании», «Сервис», «Оплата», «Контакты» занимали 1240 из 1961 — по 360 px пустоты с каждой стороны, а всё содержимое (шапки-полосы, ряды карточек, цены) ужималось в 1180. Предел 1560 отдаёт им 1500: карточки и цифры дышат. Но проза внутри при этом стала бы 1460 px — примерно 200 знаков в строке, читать невозможно. Поэтому сами абзацы-рассказы остаются узкими: 860 px это около 100 знаков, верхняя граница удобного чтения. Колонки, которые и так узкие («Наша история» 620, форма расчёта 480), не трогаем. */ /* ⚠️ Подводки под заголовками разделов набраны по центру, но заданы фиксированной шириной 300 px без автоматических полей — то есть стоят у левого края. При ширине 1180 px это читалось как задумка; во всю ширину фраза осталась одна в углу, а заголовок — посередине. Ставим их под заголовок: ширина по месту, поля автоматические. */ html body:not(#dvk-net-takogo) .dvk-svc-lead, html body:not(#dvk-net-takogo) .dvk-about-lead, html body:not(#dvk-net-takogo) .dvk-pay-lead, html body:not(#dvk-net-takogo) .dvk-svc-hero > p, html body:not(#dvk-net-takogo) .dvk-pay-hero > p, html body:not(#dvk-net-takogo) .dvk-about-hero > p{ width:auto !important;max-width:620px !important; margin-left:auto !important;margin-right:auto !important; } /* ⚠️ Текст-рассказ держим узким, но прижатым К ЛЕВОМУ краю, а не по центру. Когда страница пошла во всю ширину, центрированный абзац оказался в середине, а его же заголовок — у левого края: получались две разные оси. Один край для заголовка, ряда карточек и текста читается спокойнее. */ html body:not(#dvk-net-takogo) .dvk-svc-story, html body:not(#dvk-net-takogo) .dvk-pay-story{ max-width:860px !important;margin-left:auto !important;margin-right:auto !important; } /* Короткие сноски и предупреждения остаются по центру — они и набраны по центру. */ html body:not(#dvk-net-takogo) .dvk-svc-warning, html body:not(#dvk-net-takogo) .dvk-pay-note, html body:not(#dvk-net-takogo) .dvk-consent{ max-width:860px !important;margin-left:auto !important;margin-right:auto !important; } /* ⚠️ Главная — исключение: заказчик 20.09 «на главной отступы справа слева не нужны». Там всё построено на широких полосах — слайдер, плитки разделов, тёмная полоса контактов, — и поля по краям их обрезали. */ html body:not(#dvk-net-takogo).home #content .ast-container, html body:not(#dvk-net-takogo).page-id-1827 #content .ast-container{ padding-left:0 !important;padding-right:0 !important; } /* ============ 5в. Колонка с фильтрами — 300 px ============ Заказчик 20.09: «левое меню слишком широкое… с фильтрами». ⚠️ `.ast-container` здесь flex, поэтому ширину держим через flex-basis: одной `width` мало — flex-grow растянул бы колонку обратно. */ html body:not(#dvk-net-takogo) #content .ast-container > #secondary{ flex:0 0 300px !important;width:300px !important;max-width:300px !important; padding-right:34px !important; } html body:not(#dvk-net-takogo) #content .ast-container > #primary{ flex:1 1 auto !important;width:auto !important;min-width:0 !important; } /* ⚠️ Отступ от колонки — только когда колонка на странице есть. Первая версия вешала 34 px на #primary всегда, и на главной, где колонки нет, слайдер и плитки отъезжали от края на лишние 34 px. */ html body:not(#dvk-net-takogo) #content .ast-container > #secondary ~ #primary{ padding-left:34px !important; } @media (max-width:921px){ html body:not(#dvk-net-takogo) #content .ast-container > #secondary{ flex:1 1 100% !important;width:100% !important;max-width:100% !important; padding-right:0 !important; } /* ⚠️ Селектор должен быть НЕ СЛАБЕЕ настольного `#secondary ~ #primary`: у того на один идентификатор больше, и он перебивал это правило прямо внутри медиазапроса — медиазапрос веса не добавляет. На телефоне колонка скрыта (`display:none`), но элемент в разметке остаётся, поэтому отступ в 34 px продолжал применяться: сетка товаров съезжала вправо и обрезалась. */ html body:not(#dvk-net-takogo) #content .ast-container > #secondary ~ #primary, html body:not(#dvk-net-takogo) #content .ast-container > #primary{ padding-left:0 !important; } } /* ============ 5г. Статьи: убрать пустую колонку слева ============ Заказчик 21.09: «надо на странице статей убрать отступ слева». Отступ давала боковая колонка: тема включает её на блоге (`ast-left-sidebar`), но виджетов в ней ноль — замер показал 300 px ширины, 1302 px высоты и **ноль знаков текста**. Пустая колонка съедала 348 px слева, карточки статей начинались от неё. Прячем колонку и снимаем отступ, который был нужен только из-за неё. */ html body:not(#dvk-net-takogo).blog #secondary{display:none !important} html body:not(#dvk-net-takogo).blog #content .ast-container > #primary, html body:not(#dvk-net-takogo).blog #content .ast-container > #secondary ~ #primary{ padding-left:0 !important;width:100% !important;flex:1 1 100% !important; } /* ⚠️ Ряд карточек вынесен наружу отрицательными полями по 16 px — без колонки он начал бы вылезать за поле страницы. */ html body:not(#dvk-net-takogo).blog .ast-row{ margin-left:0 !important;margin-right:0 !important; } /* ============ 5д. Текст для поисковиков и подвал ============ Замер на главной: абзацы внизу страницы растянулись на **1860 px** — это около 250 знаков в строке. Главная идёт во всю ширину ради полос и плиток, но к сплошному тексту это не относится: ему нужна колонка. ⚠️ Тот же случай, что был на «Сервисе» и «Оплате». Ширина страницы и длина строки — разные вещи, и каждый новый блок с текстом надо проверять отдельно. */ html body:not(#dvk-net-takogo) .seo-text{ max-width:860px !important;margin-left:auto !important;margin-right:auto !important; } /* ⚠️ Шапка начиналась на 72 px от края, а содержимое страниц — на 30. Логотип не совпадал по вертикали ни с плитками каталога, ни с заголовками: глаз это ловит, даже когда не может назвать причину. 72 набегали из трёх вложенных отступов — 28 + 20 + 24. Обнуляем два внешних и оставляем одно поле в 30 px на том же уровне, где оно у страницы. */ html body:not(#dvk-net-takogo) .ast-primary-header-bar, html body:not(#dvk-net-takogo) .site-primary-header-wrap{ padding-left:0 !important;padding-right:0 !important; } html body:not(#dvk-net-takogo) .ast-builder-grid-row{ padding-left:30px !important;padding-right:30px !important; } /* ⚠️ Подвалу своё поле больше не нужно: он лежит внутри того же `.ast-builder-grid-row`, которому поле задано выше. Сначала я добавил ему отдельные 30 px и получил 60 — отступ насчитался дважды. */ html body:not(#dvk-net-takogo) .dvk-footer-grid{ padding-left:0 !important;padding-right:0 !important; box-sizing:border-box !important; } /* ============ 6. Заголовок раздела плотнее ============ */ html body:not(#dvk-net-takogo).tax-product_cat h1, html body:not(#dvk-net-takogo).post-type-archive-product h1{ font-size:40px !important;line-height:1.05 !important;letter-spacing:.02em !important; text-transform:uppercase !important;margin-bottom:22px !important; } @media (max-width:900px){ html:root{--dvk-zazor:14px} html body:not(#dvk-net-takogo) ul.products li.product:not(.product-category) img{padding:12px !important} html body:not(#dvk-net-takogo).tax-product_cat h1{font-size:26px !important} html body:not(#dvk-net-takogo) ul.products li.product a.button{width:100% !important;text-align:center !important} } /* ============ 7. Дорожки витрины, которые всегда влезают ============ ⚠️ В `dvk-custom` сетка задана как `repeat(N,1fr)`. А `1fr` — это `minmax(auto,1fr)`: нижняя граница дорожки равна min-content плитки, и дорожка отказывается ужиматься. Пока контейнер был широким, это не мешало; после того как поля страницы изменились, сетка стала вылезать за свой блок — на 375 px блок 311, дорожки 331; на 1024 px блок 508, дорожки 531. `minmax(0,1fr)` снимает нижнюю границу, и ширина считается от места. ⚠️ `#content` в селекторе обязателен: у плагина есть `html body.archive #content ul.products{repeat(2,1fr)}` — с идентификатором он весомее, и без него правило молча не применялось два захода подряд. Число колонок повторяет замысел сайта (4 → 3 → 2), кроме одного: ниже 480 px сайт переключался на одну колонку, а мы оставляем две — на 375 px плитка выходит 148 px, это нормально читается и показывает вдвое больше товара. */ html body:not(#dvk-net-takogo) #content ul.products{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } /* Надпись «Цена по запросу» идёт одной строкой и на узкой плитке шире её на три пиксела — разрешаем перенос, иначе она торчит за край. */ html body:not(#dvk-net-takogo) #content ul.products .dvk-price-request{ display:block !important;white-space:normal !important;max-width:100% !important; } /* ⚠️ Разделов на главной шесть, а сетка была в четыре колонки: последний ряд оставался наполовину пустым — четыре плитки, потом две и провал справа. Три колонки дают два ровных ряда по три, и плитка становится крупнее (около 600 px вместо 444) — разделы и есть главное, ради чего сюда заходят. */ /* ⚠️ Только сетка РАЗДЕЛОВ. «Новое поступление» на той же странице — тоже `ul.products`, но там восемь товаров, и им четыре колонки как раз впору: два ровных ряда. */ html body:not(#dvk-net-takogo).home #content .home-cats ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } @media (max-width:1100px){ html body:not(#dvk-net-takogo) #content ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width:900px){ html body:not(#dvk-net-takogo) #content ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }