/* === 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-ask-price-css === */ form.cart{display:none !important} /* === dvk-vybor-otdelki === */ html body.single-product form.variations_form.cart{display:block !important} html body.single-product form.variations_form table.variations{width:100% !important;margin:0 0 18px !important} html body.single-product form.variations_form table.variations td.value{width:100% !important} html body.single-product form.variations_form table.variations th.label label{font-size:16px !important;font-weight:600 !important;margin-bottom:6px !important;display:block !important} html body.single-product form.variations_form table.variations select{width:100% !important;max-width:100% !important;min-width:0 !important;height:auto !important;padding:12px 14px !important;font-size:16px !important;line-height:1.35 !important;border:1px solid #c9c4bd !important;border-radius:4px !important;background-color:#fff !important} html body.single-product form.variations_form .reset_variations{display:inline-block;margin-top:4px;font-size:14px} /* === 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-filtr-ceny === */ .dvk-cf-ceny{display:flex;flex-direction:column;gap:6px}.dvk-cf-cena{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 12px;border:1px solid #e0dbd2;text-decoration:none;color:#1a1a1a;transition:border-color .2s,background .2s}.dvk-cf-cena:hover{border-color:#c9a66b}.dvk-cf-cena--vybran{border-color:#1a1a1a;background:#1a1a1a;color:#fff}.dvk-cf-cena--vybran .dvk-cf-cena__podpis{color:#c9a66b}.dvk-cf-cena__imya{font-family:Raleway,sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.dvk-cf-cena__podpis{font-family:Raleway,sans-serif;font-size:11px;color:#8a8a8a;white-space:nowrap}.dvk-cf-sbros{display:block;margin-top:4px;font-family:Raleway,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a;text-decoration:none}.dvk-cf-sbros:hover{color:#c9a66b} /* === 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-kartochka-kolonka === */ html body.single-product div.product{ /* ⚠️ Заказчик 20.09: «теперь галлерея слишком большая». Доля (1,08fr) росла вместе со страницей: на экране 2055 px снимку доставалось 839 px. Предел в пикселях держит снимок в разумном размере на любом экране, а `minmax(0,…)` позволяет ему ужаться на узком. */ grid-template-columns:minmax(0,520px) minmax(0,660px) !important; justify-content:center !important; gap:48px !important;max-width:none !important;padding:0 0 64px !important; } /* ⚠️ Колонки заданы пределом, а не долей, поэтому на широком экране справа оставался бы пустой метр. `justify-content:center` собирает разворот в середину — пустота делится поровну и читается как поле, а не как дыра. */ html body.single-product .woocommerce-tabs, html body.single-product .up-sells, html body.single-product .related{ max-width:1228px !important;margin-left:auto !important;margin-right:auto !important; } html body.single-product div.product > .woocommerce-product-gallery, html body.single-product div.product > .summary{min-width:0 !important} /* ⚠️ Миниатюры делаем КВАДРАТНЫМИ. Дверь — вытянутый предмет, и снимок у неё примерно 1:2,2. Если миниатюра повторяет пропорцию снимка, лента получается 79×170 с разной обрезкой у каждой: у одной видно полотно целиком, у другой кусок наличника. Заказчик 20.09: «галлерея под большим фото выглядит ужасно должны быть квадратные миниатюры». Квадрат + `object-fit:contain` + тёплая подложка: снимок вписывается целиком, ничего не обрезается, и лента становится ровной сеткой. */ html body.single-product .flex-control-thumbs{ display:grid !important;grid-template-columns:repeat(auto-fill,minmax(72px,1fr)) !important; gap:8px !important;margin:14px 0 0 !important;padding:0 !important;float:none !important; } html body.single-product .flex-control-thumbs li{ width:auto !important;margin:0 !important;float:none !important;aspect-ratio:1/1 !important; } /* ⚠️ Заказчик 20.09: «фон где фото… сделай белым… оставь тонкую рамку разделения». Тёплая подложка сливалась со светлыми полотнами. */ html body.single-product .flex-control-thumbs img{ width:100% !important;height:100% !important;display:block; object-fit:contain !important;background:#fff !important; padding:6px !important;border-radius:8px !important;box-sizing:border-box !important; border:1px solid var(--dvk-border,#e2ded9) !important;opacity:1 !important; transition:border-color .2s; } html body.single-product .flex-control-thumbs img:hover{border-color:#d8d2ca !important} html body.single-product .flex-control-thumbs img.flex-active, html body.single-product .flex-control-thumbs .flex-active img{ border-color:var(--dvk-gold-deep,#75563d) !important; } html body.single-product .summary .product_title{font-size:30px !important;line-height:1.18 !important} .dvk-kk-cveta{display:flex;flex-wrap:wrap;gap:6px} .dvk-kk-cvet{display:inline-flex;align-items:baseline;gap:6px;padding:6px 10px;border:1px solid #e0dbd2; text-decoration:none;color:#1a1a1a;font-size:14px;transition:border-color .2s} .dvk-kk-cvet:hover{border-color:#c9a66b} .dvk-kk-cvet--svoj{border-color:#1a1a1a} .dvk-kk-cvet__skolko{font-size:12px;color:#8a8377} /* ⚠️ Заказчик 20.09: «страница должна быть по ширине экрана чтобы все хорошо распологалось». Контейнер темы зажат в 1240 px, и на экране 2055 px карточке доставалось 779: галерея 384, колонка с ценой и отделками 355. Плитки отделок в такой колонке ломались на две строки. Разделы каталога и корзина и так идут во всю ширину — правило их не задевает. Текстовые страницы («О компании», «Сервис») намеренно оставлены узкими: строка длиной 1700 px нечитаема. */ /* Поля 30 px задаёт общий слой оформления (сниппет 69), здесь только снимаем прежний предел 1720 px — заказчик просил поля уже́. */ html body.single-product #content .ast-container{max-width:none !important} /* Большое фото — тоже на белом, с тонкой рамкой (заказчик 20.09). ⚠️ Саму подложку галереи красит не сниппет, а mu-плагин `dvk-css.php` правилом `body.single-product .woocommerce-product-gallery{background: var(--dvk-warm)}`. Файл плагина нам не править, поэтому перебиваем селектором на класс длиннее: `html body.single-product …` весомее. */ html body:not(#dvk-net-takogo).single-product .woocommerce-product-gallery{ background:#fff !important; border:1px solid var(--dvk-border,#e2ded9) !important; } html body.single-product .woocommerce-product-gallery__wrapper, html body.single-product .woocommerce-product-gallery__image{ background:#fff !important; } html body.single-product .woocommerce-product-gallery__image{ border:1px solid var(--dvk-border,#e2ded9) !important; border-radius:10px !important;overflow:hidden !important; } /* Количество: кнопки минус и плюс вместо голого поля со стрелками браузера */ /* Цена вариации стоит последней перед кнопкой «В корзину» (заказчик 20.09). Соседи — `.quantity` и сама кнопка — float:left, поэтому нужен clear. */ html body.single-product .woocommerce-variation-add-to-cart .single_variation{ clear:both !important;width:100% !important;margin:0 0 12px !important} html body.single-product .woocommerce-variation-add-to-cart .woocommerce-variation-price{ margin:0 !important} html body .quantity{display:inline-flex !important;align-items:stretch; border:1px solid var(--dvk-border,#e2ded9) !important;border-radius:8px;overflow:hidden;background:#fff} html body .quantity input.qty{width:54px !important;border:0 !important;text-align:center !important; -moz-appearance:textfield;background:transparent !important;font-size:15px !important} html body .quantity input.qty::-webkit-outer-spin-button, html body .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} html body .dvk-kol{width:38px;border:0;background:transparent;cursor:pointer; font-size:19px;line-height:1;color:var(--dvk-text,#26231f);padding:0} html body .dvk-kol:hover{background:var(--dvk-warm,#f5f3f1)} html body .dvk-kol:disabled{opacity:.35;cursor:default;background:transparent} @media (max-width:992px){ html body.single-product div.product{grid-template-columns:minmax(0,1fr) !important;gap:28px !important;padding:0 0 48px !important} } /* ============ Блок покупки: разрешить перенос ============ Замер 21.09.2026 на карточке товара, загрузка на каждой ширине заново. Страница вылезала за край окна: окно 1100 → лишних 145 px окно 1200 → лишних 95 px окно 1300 → лишних 45 px окно 1400 → 0 Горизонтальной полосы при этом нет — `overflow-x:hidden` на `body` обрезает, — но правый край содержимого срезан, и на ноутбуке это видно. Виновник ровно один: `form.cart` — флекс-строка **без переноса** (`flex-wrap:nowrap`), а внутри три элемента: блок ручек (93 px), поле количества (120 px) и кнопка «В корзину» с `min-width:220px` из `dvk-custom`. Флекс-элемент не может стать уже своего `min-width`, поэтому строка не ужимается, а выходит за колонку: 93 + 12 + 120 + 12 + 220 = 457 px при колонке 377. ⚠️ Правку искал не там. Сначала снимал кнопке `min-width` — перелив уходил, но кнопка становилась 67 px, в неё не помещалась надпись. Потом ставил `min-width:150px` — перелив оставался (25 px на 1200), потому что дело не в размере кнопки, а в запрете переноса. Настоящее лечение — одна строка: разрешить строке переноситься. Тогда кнопка, если не помещается рядом с количеством, просто уходит на следующую строку и занимает всю ширину колонки — ровно так, как это уже работает на телефоне. Замер после правки: окно 1100 → перелива нет, кнопка 283×56 на своей строке окно 1200 → перелива нет, кнопка 333×56 на своей строке окно 1400 → перелива нет, кнопка 285×56 рядом с количеством ⚠️ На широком экране кнопка стала шире (285 вместо 220): у неё `flex:1 1 auto`, и на своей строке она забирает остаток. Это не побочный эффект, а то, чего и хочется от кнопки покупки. */ html body:not(#dvk-net-takogo).single-product form.cart{ flex-wrap:wrap !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-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 знаков в строке. Главная идёт во всю ширину ради полос и плиток, но к сплошному тексту это не относится: ему нужна колонка. ⚠️ Тот же случай, что был на «Сервисе» и «Оплате». Ширина страницы и длина строки — разные вещи, и каждый новый блок с текстом надо проверять отдельно. */ /* ⚠️ Заказчик 21.09, трижды: «текста внизу страниц не по ширине экрана выглядит ужасно». Я дважды пробовал середину — сначала колонку 860 px, потом газетные колонки, — и оба раза это было не то. Значит буквально: текст идёт во всю ширину экрана. Блоки лежат внутри контейнера страницы, а он местами зажат (на текстовых страницах 1320 px). Поэтому выводим их из контейнера: ширина в размер окна, сдвиг влево на половину разницы. Поля 30 px — как у всего остального. ⚠️ Строка при этом получается длинной, и я об этом сказал. Решение заказчика, оно записано; если понадобится вернуть — предел ширины в двух правилах ниже. */ html body:not(#dvk-net-takogo) .seo-text, html body:not(#dvk-net-takogo) .dvk-svc-story, html body:not(#dvk-net-takogo) .dvk-pay-story, html body:not(#dvk-net-takogo) .dvk-about-story{ max-width:none !important; width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding-left:30px !important;padding-right:30px !important; box-sizing:border-box !important; column-width:auto !important;columns:auto !important; } @media (max-width:600px){ html body:not(#dvk-net-takogo) .seo-text, html body:not(#dvk-net-takogo) .dvk-svc-story, html body:not(#dvk-net-takogo) .dvk-pay-story, html body:not(#dvk-net-takogo) .dvk-about-story{ padding-left:16px !important;padding-right:16px !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; } /* ⚠️ В подвале стоял перенос «в любом месте» (`overflow-wrap:anywhere`). Он нужен почте — длинный адрес иначе вылезает за колонку. Но применялся ко всему подряд и рвал слова посреди: «ИНФОРМАЦИ / Я», «КОНСУЛЬТА / ЦИЯ». Оставляем его только почте, остальным — обычный перенос по словам. Заодно колонки: они были заданы разной ширины (246/176/176/194/194/176), и в узкие заголовок не влезал. Делим поровну — на 1433 px выходит по 209, и «ИНФОРМАЦИЯ» встаёт в строку. */ html body:not(#dvk-net-takogo) .dvk-footer-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; } html body:not(#dvk-net-takogo) .dvk-footer-grid *{ overflow-wrap:normal !important;word-break:normal !important; } /* Почта — единственное слово в подвале, которое честно не влезает в колонку в 209 px. Перенос ей разрешён, но сначала пробуем уместить целиком: на кегле 13 адрес занимает около 172 px и встаёт в строку. */ html body:not(#dvk-net-takogo) .dvk-footer-grid a[href^="mailto"]{ overflow-wrap:break-word !important; font-size:13px !important;letter-spacing:0 !important; } @media (max-width:900px){ html body:not(#dvk-net-takogo) .dvk-footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !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; } /* ============ 5е. Лишние 60 КБ шрифта из-за одного стека ============ Замер главной по сетевым запросам: браузер скачивает **два файла Montserrat на 60 КБ**, хотя ни один заголовок и ни один абзац им не набран — на сайте Raleway в тексте и Cormorant Garamond в заголовках. Оказалось, Montserrat стоит вторым в стеке у горстки элементов интерфейса (значок поиска, всплывающая корзина, окно замера, мобильная полоса), где первым идёт «Exo 2». Exo 2 на сайт не подключён, браузер проваливается дальше по стеку — и качает Montserrat ради десятка подписей. ⚠️ Правила с «Exo 2» в стилях нет: он проставлен инлайном в разметке mu-плагина. Поэтому перебиваем и по классам, и по самому атрибуту. */ html body:not(#dvk-net-takogo) .dvk-search-icon, html body:not(#dvk-net-takogo) .dvk-cart-icon, html body:not(#dvk-net-takogo) .dvk-cart-backdrop, html body:not(#dvk-net-takogo) .dvk-cart-close, html body:not(#dvk-net-takogo) .dvk-cart-go, html body:not(#dvk-net-takogo) .dvk-zamer-backdrop, html body:not(#dvk-net-takogo) .dvk-zamer-close, html body:not(#dvk-net-takogo) .dvk-drawer-close-top, html body:not(#dvk-net-takogo) .dvk-mobile-cta, html body:not(#dvk-net-takogo) .dvk-mobile-email, html body:not(#dvk-net-takogo) [style*="Exo 2"]{ font-family:Raleway,Arial,sans-serif !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`, но там восемь товаров, и им четыре колонки как раз впору: два ровных ряда. */ /* ⚠️ Только для широких экранов. Правило без медиазапроса перебивало мобильное, и на телефоне 375 px разделы вставали в три колонки по 115 px — от плитки оставалась марка. Ниже 901 px пусть работает общее правило. */ @media (min-width:901px){ 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; } } /* ============ 8. Шапка, которая помещается на ноутбук ============ Шапка Astra — сетка из трёх дорожек, и ширина каждой считается по содержимому: grid-template-columns: 219.86px 887.25px 429.95px логотип меню правый блок С полями и зазорами это **1661 px**. Ровно столько нужно окну, чтобы шапка поместилась. На всём, что уже, дорожки не ужимаются — они и так по минимуму, — а вылезают за край. Прокрутки при этом нет: `body` обрезает лишнее (`overflow-x:hidden`), поэтому выглядит не как поломка, а как будто пунктов в меню меньше. Что видел посетитель на ноутбуке 1366 px: меню обрывалось на «Оплата и доставка», а «Контакты», телефон, поиск и **корзина** просто исчезали. На 1024 px — то же самое. ── Четыре ступени ────────────────────────────────────────────────────────── Ужимаем ровно настолько, насколько не хватает. Границы взяты не из расчёта, а найдены перебором: грузим страницу заново на каждой ширине и смотрим, отрицательный ли запас справа. | окно | меню | «Консультация» | телефон | чем подтверждено | |-------------|------|----------------|---------|------------------| | 1781 и шире | 887 | есть | цифрами | арифметикой: нужно 1676 | | 1440–1780 | 663 | есть | цифрами | 1425 и 1430 — запас 0; 1420 — минус 1 | | 1180–1439 | 567 | скрыта | цифрами | 1180…1439 — запас 0; 1140 — минус 15 | | 1030–1179 | 567 | скрыта | значком | 1025 — запас 0 | | 922–1029 | 503 | скрыта | значком | 925 — запас 0 | Ниже 922 px работает мобильная шапка темы с гамбургером — не трогаем. ⚠️ Ступени 2 и 3 отличаются только телефоном. Меню у них одинаковое: с такой метрикой оно помещается вплоть до 1170 px, и до этой ширины номер можно держать **цифрами**, а не значком. Ради этого ступень 2 и опущена до 1180 — номер телефона в магазине дверей стоит того, чтобы меню стало на полпункта мельче. ⚠️ Что уходит первым и почему. Сначала «Консультация»: кнопка дублирует форму, которая есть на каждой странице. Телефон держим до последнего и не убираем совсем — на узком он становится значком трубки, ссылка `tel:` при этом живая. Ни один пункт меню не прячется. ⚠️ Выше 1430 px измерить не на чем: ни одно доступное окно шире не рисует. Для 1440–1780 и для исходной шапки выше 1781 остаётся расчёт по min-content дорожек. Поэтому верхняя граница первой ступени взята с большим запасом: исходной шапке нужно 1676, отдаём ей всё с 1781. ⚠️ **Как эти границы едва не оказались неверными.** Сначала я мерил так: открыть страницу, менять ширину окна, снимать замеры. Числа получились другие — и ошибочные: ступень 2 якобы помещалась с 1180, хотя на самом деле не помещалась до 1205. Причина не в эмуляторе: у элементов шапки стоит `transition: .2s`, а **переход в каскаде сильнее `!important`** — computed-значение застывает на середине и не меняется даже от инлайнового `!important`. Правило простое: мерить только после свежей загрузки на нужной ширине, а если ширину меняли — сперва добить переходы: el.getAnimations().forEach(a => a.finish()); Логотип по этой же причине показался «неуменьшаемым». На самом деле его размером управляет mu-плагин (24 px, на ≤1100 — 20, на ≤992 — 18), и в наши ступени он не заложен: 220 px логотипа считаем данностью. ⚠️ Кавычки внутри значка телефона экранированы обратной косой: все стили лежат внутри одинарной строки PHP. */ /* Ступень 1: ужали меню и зазоры, ничего не убрали */ @media (min-width:1440px) and (max-width:1780px){ html body:not(#dvk-net-takogo) .ast-builder-grid-row{column-gap:18px !important} html body:not(#dvk-net-takogo) .main-header-menu{column-gap:12px !important} html body:not(#dvk-net-takogo) .main-header-menu > li > a{ padding-left:9px !important;padding-right:9px !important; font-size:12px !important;letter-spacing:.4px !important; } html body:not(#dvk-net-takogo) .dvk-header-actions{column-gap:12px !important} html body:not(#dvk-net-takogo) .dvk-header-cta{padding-left:12px !important;padding-right:12px !important} html body:not(#dvk-net-takogo) .dvk-header-phone{display:inline-block !important;font-size:13px !important} } /* Ступени 2 и 3: меню одно и то же, «Консультация» уходит */ @media (min-width:1030px) and (max-width:1439px){ html body:not(#dvk-net-takogo) .ast-builder-grid-row{column-gap:12px !important} html body:not(#dvk-net-takogo) .main-header-menu{column-gap:10px !important} html body:not(#dvk-net-takogo) .main-header-menu > li > a{ padding-left:6px !important;padding-right:6px !important; font-size:11px !important;letter-spacing:.2px !important; } html body:not(#dvk-net-takogo) .dvk-header-actions{column-gap:12px !important} html body:not(#dvk-net-takogo) .dvk-header-cta{display:none !important} } /* Ступень 2: номер ещё помещается цифрами */ @media (min-width:1180px) and (max-width:1439px){ html body:not(#dvk-net-takogo) .dvk-header-phone{display:inline-block !important;font-size:13px !important} } /* Ступень 3: номер становится значком трубки, ссылка tel: живая */ @media (min-width:1030px) and (max-width:1179px){ html body:not(#dvk-net-takogo) .dvk-header-phone{ display:inline-block !important;font-size:0 !important; width:24px !important;height:24px !important; background:url("data:image/svg+xml;utf8,") center/21px 21px no-repeat !important; } } /* Ступень 4: самая плотная, до мобильной шапки темы */ @media (min-width:922px) and (max-width:1029px){ html body:not(#dvk-net-takogo) .ast-builder-grid-row{column-gap:8px !important} html body:not(#dvk-net-takogo) .main-header-menu{column-gap:6px !important} html body:not(#dvk-net-takogo) .main-header-menu > li > a{ padding-left:4px !important;padding-right:4px !important; font-size:10.5px !important;letter-spacing:.2px !important; } html body:not(#dvk-net-takogo) .dvk-header-actions{column-gap:8px !important} html body:not(#dvk-net-takogo) .dvk-header-cta{display:none !important} html body:not(#dvk-net-takogo) .dvk-header-phone{ display:inline-block !important;font-size:0 !important; width:24px !important;height:24px !important; background:url("data:image/svg+xml;utf8,") center/21px 21px no-repeat !important; } } /* ============ 9. Телефон: зона нажатия и мелкие подписи ============ Проверка 21.09.2026 на ширине 375 px — рамкой настоящей ширины, не эмулятором (эмулятор ниже 992 px врёт, см. раздел 8). ── Поиск и корзина: 24 px вместо 44 ──────────────────────────────────────── В мобильной шапке значок поиска — квадрат 24×24, корзины — 26×26. Рекомендация для пальца — 44×44; 24 px это примерно кончик мизинца. Промахнуться по корзине на телефоне — значит не дойти до оформления. Расширяем **зону нажатия, не трогая вид**: прозрачный `::after` поверх значка. Картинка та же, высота шапки та же (80 px), нажимается втрое большая площадь. ⚠️ Почему 40, а не 44. Центры значков стоят в 43 px друг от друга (поиск 254, корзина 297). Два круга по 44 наложились бы, и край одного перехватывал бы нажатия у соседа. 40 — наибольшее, при котором зоны не пересекаются: 234..274 и 277..317. ⚠️ `::before` и `::after` у обоих значков свободны — проверено (`content: none`), сама иконка нарисована фоном. Значок счётчика корзины — отдельный `span`, он под прозрачным слоем и виден. ── Подписи мельче 12 px ──────────────────────────────────────────────────── На телефоне нашлось от 2 до 14 надписей мельче 12 px на страницу. Разделил их на два сорта: • **Капсы-подписи** («ПО Г. КАЛУГА», «БЕСПЛАТНО», «С 2013 ГОДА») — это приём оформления, они и должны быть мелкими. 10 → 11,5: читается, а вид сохраняется. • **Текст со смыслом** (условия доставки, строки прайса, счётчики товаров в разделах, подписи полей формы) — 10–11,5 → 13. Это то, ради чего страницу открывают, и мельче 12 его читать тяжело. Замер после правки: на «Сервисе» мелких надписей было 14, стало 4 — и все четыре это капсы-подписи, то есть по замыслу. На «Оплате» 13 → 4, на «О компании» 7 → 1, в каталоге 7 → 0, на главной 2 → 0. ⚠️ Одна надпись не поддалась: ссылка «Консультация» (`.dvk-pay-cta__link`) осталась 11 px. Её размер перебивается чем-то, что сильнее селектора с весом id, — тот же почерк, что у логотипа в разделе 8. Соседняя такая же ссылка на «Сервисе» правится нормально. Не стал давить дальше: это одна ссылка-кнопка, набранная капсом по замыслу. ⚠️ Порог 600 px, а не 921: на планшете эти блоки стоят в два-три столбца, и там 10 px выглядят иначе. Мерил телефон — правлю телефон. */ @media (max-width:921px){ html body:not(#dvk-net-takogo) .dvk-search-icon, html body:not(#dvk-net-takogo) .dvk-cart-icon{position:relative !important} html body:not(#dvk-net-takogo) .dvk-search-icon::after, html body:not(#dvk-net-takogo) .dvk-cart-icon::after{ content:"" !important;position:absolute !important; top:50% !important;left:50% !important; width:40px !important;height:40px !important; transform:translate(-50%,-50%) !important; background:none !important;border:0 !important;border-radius:50% !important; } } @media (max-width:600px){ /* капсы-подписи: мелкие по замыслу, но не настолько */ html body:not(#dvk-net-takogo) .dvk-svc-hero__label, html body:not(#dvk-net-takogo) .dvk-svc-card__tag, html body:not(#dvk-net-takogo) .dvk-pay-card__label, html body:not(#dvk-net-takogo) .dvk-about-hero__label{font-size:11.5px !important} /* то, что несёт смысл */ html body:not(#dvk-net-takogo) .dvk-svc-price__title, html body:not(#dvk-net-takogo) .dvk-pay-method__desc, html body:not(#dvk-net-takogo) .dvk-pay-card__note, html body:not(#dvk-net-takogo) .dvk-pay-note, html body:not(#dvk-net-takogo) .dvk-pay-note strong, html body:not(#dvk-net-takogo) .dvk-about-stat__label, html body:not(#dvk-net-takogo) .woocommerce-result-count, html body:not(#dvk-net-takogo) li.product-category .count{font-size:13px !important} /* подписи блоков и ссылки-кнопки */ html body:not(#dvk-net-takogo) .dvk-about-contact__label, html body:not(#dvk-net-takogo) .home-contacts__label, html body:not(#dvk-net-takogo) .dvk-color-label, html body:not(#dvk-net-takogo) .dvk-pay-cta .dvk-pay-cta__link, html body:not(#dvk-net-takogo) .dvk-svc-cta .dvk-svc-cta__link{font-size:12.5px !important} /* подписи полей в форме замера */ html body:not(#dvk-net-takogo) .wpcf7 label{font-size:13px !important} } /* ============ 10. Оформление заказа с телефона ============ Проверка 21.09.2026, рамка 375 px, путь «карточка → корзина → оформление». Карточка и корзина оказались в порядке: переполнения нет, кнопка «В корзину» во всю ширину, плитки ручек 48×48, полоса «Позвонить / Консультация» внизу ничего не закрывает — под неё у `body` отведено 62 px при высоте полосы 63. А вот на самом оформлении — две беды. ── 1. Таблица заказа шире экрана ─────────────────────────────────────────── `table.shop_table` на «Оформлении» занимала 37..416 px при ширине окна 370. Это **46 px наружу**: правый столбец с суммами уходил за край, а достать его прокруткой нельзя — `overflow-x:hidden` на `body` гасит выход. Посетитель на последнем шаге не видел, за что платит. Лечится не прокруткой, а раскладкой: `table-layout:fixed` заставляет столбцы делить ширину контейнера, а `overflow-wrap:break-word` разрешает длинному названию перенестись. После правки таблица 37..333 — внутри. ⚠️ Корзину тронул тем же правилом намеренно: там таблица помещалась (338 px), но только потому, что название товара короткое. Проверил с правилом — раскладка корзины не изменилась ни на пиксель. ── 2. Поля формы 15 px — Safari на айфоне увеличивает страницу ───────────── Все восемь полей оформления набраны 15 px. Safari на iOS увеличивает страницу при попадании в поле мельче **16 px** — и посетитель, заполняя адрес, каждый раз получает зум, который надо отщипывать обратно. Это не косметика: на форме из восьми полей это восемь раз. 16 px — не «покрупнее для читаемости», а ровно тот порог, ниже которого включается зум. Ставим его полям оформления, формам Contact Form 7 (заявка и калькулятор), полю поиска, а также полю количества в корзине и на карточке и полю купона: они тоже были 14–15 px. ⚠️ Кнопку «Оформить заказ» во всю ширину растягивать не стал: 254×60 — нормальная цель для пальца. (Первый замер показывал, будто правило не применяется; на деле мешал залипший `transition` — см. раздел 8. Проверено заново на свежей загрузке: ширину задаёт тема.) ⚠️ Порог 600 px: правки нужны телефону. На планшете таблица помещается и без них. */ @media (max-width:600px){ /* таблица заказа делит ширину по столбцам, а не растёт по содержимому */ html body:not(#dvk-net-takogo) .woocommerce-checkout table.shop_table, html body:not(#dvk-net-takogo) .woocommerce-cart table.shop_table{ width:100% !important;max-width:100% !important; table-layout:fixed !important; margin-left:0 !important;margin-right:0 !important; } html body:not(#dvk-net-takogo) .woocommerce-checkout table.shop_table th, html body:not(#dvk-net-takogo) .woocommerce-checkout table.shop_table td{ padding-left:8px !important;padding-right:8px !important; overflow-wrap:break-word !important;word-break:normal !important; } /* 16 px — порог, ниже которого Safari на iOS увеличивает страницу */ html body:not(#dvk-net-takogo) .woocommerce-checkout input[type=text], html body:not(#dvk-net-takogo) .woocommerce-checkout input[type=tel], html body:not(#dvk-net-takogo) .woocommerce-checkout input[type=email], html body:not(#dvk-net-takogo) .woocommerce-checkout input[type=number], html body:not(#dvk-net-takogo) .woocommerce-checkout textarea, html body:not(#dvk-net-takogo) .woocommerce-checkout select, html body:not(#dvk-net-takogo) .woocommerce input[type=text], html body:not(#dvk-net-takogo) .woocommerce input[type=tel], html body:not(#dvk-net-takogo) .woocommerce input[type=email], html body:not(#dvk-net-takogo) .wpcf7 input[type=text], html body:not(#dvk-net-takogo) .wpcf7 input[type=tel], html body:not(#dvk-net-takogo) .wpcf7 input[type=email], html body:not(#dvk-net-takogo) .wpcf7 input[type=date], html body:not(#dvk-net-takogo) .wpcf7 textarea, html body:not(#dvk-net-takogo) .wpcf7 select, html body:not(#dvk-net-takogo) .dvk-search-overlay input, html body:not(#dvk-net-takogo) .woocommerce input[type=number], html body:not(#dvk-net-takogo) .quantity input[type=number], html body:not(#dvk-net-takogo) .dvk-cart-pm input[type=number], html body:not(#dvk-net-takogo) #coupon_code{font-size:16px !important} } /* ============ 11. Цвета и шрифт как на сайте-образце ============ Заказчик 21.09.2026: «цвета сайта и шрифты не как на сайте образце». Снял обе палитры замером, а не на глаз — по частоте и по занимаемой площади: | | образец dveri-provance.ru | было у нас | |---|---|---| | фон страницы | **#F9F6F0** кремовый, 5298 тыс. px² | белый, 7487 тыс. px² | | золотой | **#AA8567** | #B8906D в оформлении, #75563D в тексте | | заголовки | Cormorant | Cormorant Garamond | | текст | чистый чёрный | #26231F тёплый тёмный | | посторонний тон | нет | **#F8F9FA холодный серый**, 2310 тыс. px² | Главное расхождение — не золотой, а **фон**. У образца вся страница тёплого кремового тона, а белым выделены только карточки и снимки. У нас наоборот: белый лист, на нём островки кремового. Отсюда и ощущение «не тот сайт», даже когда шрифт и золото совпадают. Второе — **холодный серый #F8F9FA** в блоке «Новое поступление». В тёплой палитре он выглядит инородным пятном на 2,3 млн px². Что делаем: • страница — кремовая #F9F6F0, как у образца; • «Новое поступление» — белый вместо холодного серого: белые полосы под товар у образца тоже есть, а холодного тона нет нигде; • золотой в оформлении — #AA8567. ⚠️ Золотой в ТЕКСТЕ оставляем прежним (#75563D). У образца золотом набраны подписи, и на белом это 3,0:1 — ниже порога читаемости 4,5:1. Мы этот порог уже проходили: в сентябре было 94 нарушения контраста, стало 0. Повторять чужую ошибку ради сходства не стоит — поэтому светлый золотой идёт в рамки, значки и крупные заголовки, а мелкий текст остаётся на тёмном золоте. Разницы на глаз почти нет, а читать можно. ⚠️ Интерлиньяж у образца плотнее (1,44 против нашего 1,65). Не трогал: на длинных описаниях товаров плотная строка читается тяжелее, а выгода чисто внешняя. Если захочется — это одна строка в `body`. */ html:root{ --dvk-gold:#aa8567; /* было #b8906d — тон образца */ --dvk-bumaga:#f9f6f0; /* кремовая «бумага» страницы */ } /* Страница — кремовая, как у образца */ html:not(#dvk-net-takogo), html body:not(#dvk-net-takogo) { background-color:#f9f6f0 !important; } /* ⚠️ Одного кремового фона у `body` мало. Первый замер после правки показал, что белого стало БОЛЬШЕ, а не меньше: 9647 тыс. px² против 7487. Причина — широкие полосы, которым белый задан отдельно: текст внизу (2735), «Новое поступление» (2310), разделы на главной (1531). Пока они белые, кремовая страница из-под них не видна. У образца наоборот: кремовым залита вся страница, а белым выделены только карточки товаров и врезки. Поэтому полосам возвращаем прозрачность — пусть сквозь них проступает «бумага», — а белый оставляем плиткам, карточке контактов и блоку с цифрами. */ html body:not(#dvk-net-takogo) section.new-arrivals, html body:not(#dvk-net-takogo) section.home-cats, html body:not(#dvk-net-takogo) .seo-text{ background-color:transparent !important; } /* ⚠️ Второй слой белого — уже не на главной. Замер по всем типам страниц показал, что кремовая бумага видна везде, кроме каталога и карточки товара: там содержимое лежит на белом контейнере. /catalog/ main.site-main 1947 тыс. px² белого карточка div.ast-container 2725, main.site-main 1770 Задано это в стилях mu-плагина правилом `body.archive.ast-woo-shop-archive .site-main{background:#fff!important}`. Получалось, что две самые посещаемые страницы остались «старыми белыми», а остальные стали кремовыми — ровно та половинчатость, которую видно сразу. ⚠️ У карточки нельзя просто обнулить `.ast-container`: этот класс носит и контейнер шапки, а у шапки фон тёмный. Поэтому сужаем селектор до `#content .ast-container` — внутрь содержимого, мимо шапки. Проверено: после правки шапка осталась #1F1C19, галерея товара и плитки витрины — белыми, как и задумано. */ html body:not(#dvk-net-takogo).archive .site-main, html body:not(#dvk-net-takogo).tax-product_cat .site-main, html body:not(#dvk-net-takogo).post-type-archive-product .site-main, html body:not(#dvk-net-takogo).woocommerce-page .site-main, html body:not(#dvk-net-takogo).single-product #content .ast-container, html body:not(#dvk-net-takogo).single-product .site-main{ background-color:transparent !important; } /* Заголовки — Cormorant вместо Cormorant Garamond */ html body:not(#dvk-net-takogo) h1, html body:not(#dvk-net-takogo) h2, html body:not(#dvk-net-takogo) h3, html body:not(#dvk-net-takogo) h4, html body:not(#dvk-net-takogo) h5, html body:not(#dvk-net-takogo) h6, html body:not(#dvk-net-takogo) .entry-title, html body:not(#dvk-net-takogo) .ast-archive-title, html body:not(#dvk-net-takogo) .slider__title, html body:not(#dvk-net-takogo) .about-section__title, html body:not(#dvk-net-takogo) .advantages-section__title, html body:not(#dvk-net-takogo) .advantages-section__item-title, html body:not(#dvk-net-takogo) .home-contacts__title, html body:not(#dvk-net-takogo) .woocommerce-loop-product__title, html body:not(#dvk-net-takogo) .product_title, html body:not(#dvk-net-takogo) .dvk-gl__zag, html body:not(#dvk-net-takogo) .dvk-svc-hero__title, html body:not(#dvk-net-takogo) .dvk-pay-hero__title, html body:not(#dvk-net-takogo) .dvk-about-hero__title{ font-family:Cormorant,"Cormorant Garamond",Georgia,serif !important; } /* ⚠️ Два самых заметных заголовка главной — «Каталог» и «Новое поступление» — правилу выше не поддались: они набраны Raleway, а не Cormorant, и холодным #212529 вместо тёплого тёмного. Причина не в весе селектора, а в том, что у них в разметке инлайновый стиль: style=font-family: «Exo 2», Montserrat, sans-serif; … color: #212529 «Exo 2» на сайт не подключён, и наше давнее правило `[style*="Exo 2"]{font-family:Raleway}` (раздел 5е — оно спасало 60 КБ лишнего Montserrat) исправно уводило их на Raleway. У селектора по атрибуту вес выше, чем у простого `h2`, поэтому он и выигрывал у правила выше. Здесь добиваем тем же весом, но позже по файлу: заголовкам с этим инлайном отдаём Cormorant и тёплый тёмный. Остальные элементы с «Exo 2» (значки, мини-корзина) остаются на Raleway, как и были. ⚠️ Цвет #212529 — холодный сине-серый из Bootstrap, чужой в тёплой палитре. Инлайн задан без `!important`, поэтому наш `!important` его перебивает. */ /* ⚠️ Базовый цвет заголовков — холодный #212529 (серо-синий из Bootstrap), чужой в тёплой палитре. Задан в стилях mu-плагина правилом `h1,h2,…{color:#212529!important}`. Попадается он там, где у блока нет своего цвета: на главной это три заголовка блоков, на «Оплате» — три, на «Контактах» — пять. ⚠️ Здесь НЕЛЬЗЯ писать наш обычный префикс `html body:not(#…)`. Он даёт вес с идентификатором, и правило начнёт перебивать заголовки, которым белый цвет задан осознанно: у слайдера это `.slider .slider__title` с весом в два класса. Белые заголовки на фотографии стали бы тёмными. Поэтому берём ровно тот же селектор, что и у mu-плагина, тем же весом, и выигрываем порядком: наш файл стилей подключается после него. Все точечные переопределения с классами при этом продолжают работать. */ h1,h2,h3,h4,h5,h6, .entry-title,.ast-archive-title{ color:#1f1c19 !important; } /* ⚠️ «Позвонить» в нижней полосе на телефоне — главная кнопка мобильной версии, и она не проходила по контрасту: светлое золото #AA8567 по белому даёт **3,2:1** при норме 4,5 для обычного текста (кегль 14, начертание 600 — до «крупного» не дотягивает). Сентябрьская проверка контраста этого не видела: она шла на ширине рабочего стола, где мобильная полоса скрыта. Нашлось только сейчас, при проверке палитры на 375 px. Ставим тёмное золото — по белому это 6,4:1. На вид почти то же, читается уверенно. Соседняя кнопка «Консультация» белым по #1A1A1A в порядке. */ html body:not(#dvk-net-takogo) .dvk-mobile-bar__call{ color:#75563d !important; } /* ============ 12. Переход только по нужным свойствам ============ Замер главной: из 1056 элементов **732 с переходом**, и у 643 из них стоит `transition: all`. Источник — правило самой темы Astra: .secondary a *, .site-footer a *, .site-header a *, a { transition: .2s linear } `a *` — это каждый потомок каждой ссылки, отсюда и 208 элементов с одного правила. Чем плохо `all`. Переход применяется ко **всем** анимируемым свойствам, включая размерные: ширину, отступы, кегль. Браузер обязан следить за каждым, а в каскаде переход стоит **выше `!important`** — пока он «идёт», вычисленное значение не меняется ничем. ⚠️ Это не теория: сегодня три разбора подряд ушли по ложному следу именно из-за застывших переходов — «неуменьшаемый» логотип, «обрезанная» шапка на 940 px и «не открывающееся» меню. Каждый раз значение застывало на прошлом состоянии, и замер показывал несуществующую беду. Сужаем список свойств до тех, ради которых переход и нужен: цвет, фон, рамка, тень, сдвиг, прозрачность. Длительность и кривую темы не трогаем — меняем только перечень свойств, поэтому вид наведения остаётся прежним, а размерные свойства перестают «залипать». */ html body:not(#dvk-net-takogo) a, html body:not(#dvk-net-takogo) .site-header a *, html body:not(#dvk-net-takogo) .site-footer a *, html body:not(#dvk-net-takogo) .secondary a *{ transition:color .2s linear,background-color .2s linear,border-color .2s linear, box-shadow .2s linear,transform .2s linear,opacity .2s linear !important; } /* ⚠️ Сначала написал только `transition-property` — и ссылки перестали плавно менять цвет вовсе. Причина: у темы стоит сокращённая запись `transition:.2s linear`, она задаёт сразу свойство, длительность и кривую. Перебив одно лишь свойство своим `!important`, я оставил длительность без значения — она вернулась к начальному `0s`, то есть к мгновенной смене. Поэтому пишем полную запись: и перечень свойств, и те же 0,2 секунды с линейной кривой, что были у темы. */ html body:not(#dvk-net-takogo) h1[style*="Exo 2"], html body:not(#dvk-net-takogo) h2[style*="Exo 2"], html body:not(#dvk-net-takogo) h3[style*="Exo 2"], html body:not(#dvk-net-takogo) h4[style*="Exo 2"]{ font-family:Cormorant,"Cormorant Garamond",Georgia,serif !important; color:#1f1c19 !important; }