{"id":48470,"date":"2026-05-28T09:33:58","date_gmt":"2026-05-28T09:33:58","guid":{"rendered":"https:\/\/www.cnshining.com\/?page_id=48470"},"modified":"2026-06-02T05:25:15","modified_gmt":"2026-06-02T05:25:15","slug":"%d0%ba%d0%b0%d0%bb%d1%8c%d0%ba%d1%83%d0%bb%d1%8f%d1%82%d0%be%d1%80-%d0%b5%d0%bc%d0%ba%d0%be%d1%81%d1%82%d0%b8-%d0%b0%d1%8d%d1%80%d0%be%d0%b7%d0%be%d0%bb%d1%8c%d0%bd%d0%be%d0%b3%d0%be-%d0%b1%d0%b0","status":"publish","type":"page","link":"https:\/\/www.cnshining.com\/ru\/%d1%86%d0%b5%d0%bd%d1%82%d1%80-%d1%83%d0%bf%d0%b0%d0%ba%d0%be%d0%b2%d0%be%d1%87%d0%bd%d1%8b%d1%85-%d0%b8%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%bc%d0%b5%d0%bd%d1%82%d0%be%d0%b2\/%d0%ba%d0%b0%d0%bb%d1%8c%d0%ba%d1%83%d0%bb%d1%8f%d1%82%d0%be%d1%80-%d0%b5%d0%bc%d0%ba%d0%be%d1%81%d1%82%d0%b8-%d0%b0%d1%8d%d1%80%d0%be%d0%b7%d0%be%d0%bb%d1%8c%d0%bd%d0%be%d0%b3%d0%be-%d0%b1%d0%b0","title":{"rendered":"\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043e\u0431\u044a\u0435\u043c\u0430 \u0430\u043b\u044e\u043c\u0438\u043d\u0438\u0435\u0432\u043e\u0433\u043e \u0430\u044d\u0440\u043e\u0437\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u0430\u043b\u043b\u043e\u043d\u0447\u0438\u043a\u0430"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"48470\" class=\"elementor elementor-48470\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e4ac71a e-flex e-con-boxed e-con e-parent\" data-id=\"1e4ac71a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd2f5a7 elementor-icon-list--layout-inline elementor-align-center elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"fd2f5a7\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-inline-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.cnshining.com\/ru\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-home\" viewbox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0414\u043e\u043c \/<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.cnshining.com\/ru\/%d1%86%d0%b5%d0%bd%d1%82%d1%80-%d1%83%d0%bf%d0%b0%d0%ba%d0%be%d0%b2%d0%be%d1%87%d0%bd%d1%8b%d1%85-%d0%b8%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%bc%d0%b5%d0%bd%d1%82%d0%be%d0%b2\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0426\u0435\u043d\u0442\u0440 \u0443\u043f\u0430\u043a\u043e\u0432\u043e\u0447\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b4f7e93 e-flex e-con-boxed e-con e-parent\" data-id=\"2b4f7e93\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c6722f3 e-con-full e-flex e-con e-child\" data-id=\"c6722f3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35015ca elementor-widget elementor-widget-html\" data-id=\"35015ca\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"acc-calculator\" class=\"sp-aerosol-can-calculator\" data-sp-aerosol-can-calculator>\r\n  <style>\r\n    #acc-calculator,\r\n    #acc-calculator * { box-sizing: border-box; }\r\n\r\n    #acc-calculator {\r\n      --sp-bg: #f5f7fb;\r\n      --sp-panel: #ffffff;\r\n      --sp-text: #152033;\r\n      --sp-muted: #5f708c;\r\n      --sp-line: #d8e2ef;\r\n      --sp-blue: #1363df;\r\n      --sp-blue-dark: #082a5e;\r\n      --sp-blue-soft: #edf4ff;\r\n      --sp-silver: #eef3fa;\r\n      --sp-red: #d62828;\r\n      --sp-shadow: 0 20px 48px rgba(8, 42, 94, .08);\r\n      --acc-value-size: 24px;\r\n      max-width: 1220px;\r\n      margin: 28px auto;\r\n      color: var(--sp-text);\r\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n      line-height: 1.55;\r\n    }\r\n\r\n    #acc-calculator h2,\r\n    #acc-calculator h3,\r\n    #acc-calculator p { margin: 0; }\r\n\r\n    #acc-calculator button,\r\n    #acc-calculator input,\r\n    #acc-calculator select {\r\n      font: inherit;\r\n    }\r\n\r\n    #acc-calculator .acc-panel,\r\n    #acc-calculator .acc-preview-panel {\r\n      -webkit-user-select: none;\r\n      user-select: none;\r\n    }\r\n\r\n    #acc-calculator .acc-native-input,\r\n    #acc-calculator .acc-native-select {\r\n      -webkit-user-select: auto;\r\n      user-select: auto;\r\n    }\r\n\r\n    #acc-calculator .acc-shell {\r\n      background: linear-gradient(180deg, #fbfcfe 0%, var(--sp-bg) 100%);\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 30px;\r\n      padding: clamp(24px, 5vw, 56px);\r\n      box-shadow: 0 12px 30px rgba(15, 36, 74, .04);\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding: 8px 14px;\r\n      margin-bottom: 18px;\r\n      border: 1px solid #bcd0f1;\r\n      border-radius: 999px;\r\n      background: #fff;\r\n      color: var(--sp-blue);\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      letter-spacing: .02em;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    #acc-calculator .acc-badge::before {\r\n      content: \"\";\r\n      width: 9px;\r\n      height: 9px;\r\n      border-radius: 50%;\r\n      background: var(--sp-blue);\r\n      box-shadow: 0 0 0 5px rgba(19, 99, 223, .12);\r\n      flex: 0 0 auto;\r\n    }\r\n\r\n    #acc-calculator .acc-hero h2 {\r\n      margin-bottom: 18px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(30px, 4vw, 42px);\r\n      line-height: .98;\r\n      letter-spacing: -.05em;\r\n      max-width: 980px;\r\n    }\r\n\r\n    #acc-calculator .acc-hero p {\r\n      max-width: 980px;\r\n      color: var(--sp-muted);\r\n      font-size: clamp(16px, 2vw, 18px);\r\n      line-height: 1.75;\r\n    }\r\n\r\n    #acc-calculator .acc-feature-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 14px;\r\n      margin-top: 28px;\r\n    }\r\n\r\n    #acc-calculator .acc-feature {\r\n      background: #fff;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      padding: 16px;\r\n      min-height: 112px;\r\n    }\r\n\r\n    #acc-calculator .acc-feature strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 18px;\r\n      line-height: 1.25;\r\n      letter-spacing: -.02em;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    #acc-calculator .acc-feature span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 13px;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    #acc-calculator .acc-browser {\r\n      margin-top: 28px;\r\n      padding: 28px;\r\n      border-radius: 28px;\r\n      background: linear-gradient(135deg, #1a1b1f 0%, #0f1013 100%);\r\n      color: #fff;\r\n      box-shadow: 0 22px 48px rgba(0, 0, 0, .18);\r\n    }\r\n\r\n    #acc-calculator .acc-browser-kicker {\r\n      color: #ff4b39;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      letter-spacing: .04em;\r\n      text-transform: uppercase;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n\r\n\r\n    #acc-calculator .acc-browser-subtitle {\r\n      font-size: 15px;\r\n      line-height: 1.6;\r\n      color: rgba(255,255,255,.78);\r\n      margin-bottom: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(5, minmax(0, 1fr));\r\n      gap: 18px;\r\n      margin-top: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field label {\r\n      display: block;\r\n      margin-bottom: 8px;\r\n      font-size: 13px;\r\n      font-weight: 700;\r\n      color: rgba(255,255,255,.92);\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field select,\r\n    #acc-calculator .acc-native-select,\r\n    #acc-calculator .acc-native-input {\r\n      width: 100%;\r\n      border: 1px solid rgba(255,255,255,.18);\r\n      border-radius: 0;\r\n      background: transparent;\r\n      color: inherit;\r\n      min-height: 48px;\r\n      padding: 10px 14px;\r\n      outline: none;\r\n      box-shadow: none;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field select {\r\n      border-width: 0 0 1px 0;\r\n      color: #fff;\r\n      padding-left: 0;\r\n      padding-right: 24px;\r\n      font-size: 16px;\r\n      background-color: transparent;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-field option,\r\n    #acc-calculator .acc-native-select option { color: #111827; }\r\n\r\n    #acc-calculator .acc-browser-table-wrap {\r\n      margin-top: 18px;\r\n      overflow-x: auto;\r\n      border-top: 1px solid rgba(255,255,255,.14);\r\n      padding-top: 16px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n      min-width: 820px;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table th,\r\n    #acc-calculator .acc-browser-table td {\r\n      padding: 10px 10px;\r\n      font-size: 14px;\r\n      text-align: left;\r\n      border-bottom: 1px solid rgba(255,255,255,.08);\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table th {\r\n      color: rgba(255,255,255,.72);\r\n      font-size: 12px;\r\n      text-transform: uppercase;\r\n      letter-spacing: .04em;\r\n    }\r\n\r\n    #acc-calculator .acc-browser-table td:last-child,\r\n    #acc-calculator .acc-browser-table th:last-child { text-align: right; }\r\n\r\n    #acc-calculator .acc-browser-table .is-highlight td {\r\n      background: rgba(255,255,255,.08);\r\n    }\r\n\r\n    #acc-calculator .acc-browser-empty {\r\n      padding: 14px 0 6px;\r\n      color: rgba(255,255,255,.72);\r\n      font-size: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-workspace {\r\n      display: grid;\r\n      grid-template-columns: minmax(360px, 1.08fr) minmax(360px, .92fr);\r\n      gap: clamp(22px, 4vw, 36px);\r\n      align-items: start;\r\n      overflow: visible;\r\n      margin-top: 28px;\r\n    }\r\n\r\n    #acc-calculator .acc-preview-column {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-panel,\r\n    #acc-calculator .acc-preview-panel {\r\n      position: relative;\r\n      background: var(--sp-panel);\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 24px;\r\n      box-shadow: var(--sp-shadow);\r\n    }\r\n\r\n    #acc-calculator .acc-panel,\r\n    #acc-calculator .acc-preview-panel {\r\n      padding: clamp(22px, 3vw, 30px);\r\n      overflow: visible;\r\n      z-index: 20;\r\n    }\r\n\r\n    #acc-calculator .acc-preview-panel {\r\n      min-height: 570px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    #acc-calculator .acc-panel::before,\r\n    #acc-calculator .acc-preview-panel::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 18px;\r\n      right: 18px;\r\n      top: 0;\r\n      height: 4px;\r\n      background: linear-gradient(90deg, var(--sp-blue), var(--sp-blue-dark));\r\n      border-radius: 999px;\r\n    }\r\n\r\n    #acc-calculator .acc-title-row {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      justify-content: space-between;\r\n      gap: 18px;\r\n      margin-bottom: 20px;\r\n      padding-top: 4px;\r\n    }\r\n\r\n    #acc-calculator h3 {\r\n      color: var(--sp-blue-dark);\r\n      font-size: 22px;\r\n      line-height: 1.1;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    #acc-calculator .acc-title-row p {\r\n      margin-top: 8px;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-input-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-split-row {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\r\n      gap: 14px;\r\n      align-items: start;\r\n    }\r\n\r\n    #acc-calculator .acc-field {\r\n      display: block;\r\n      position: relative;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 14px;\r\n      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-field:focus-within {\r\n      border-color: rgba(19, 99, 223, .58);\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .10);\r\n      transform: translateY(-1px);\r\n    }\r\n\r\n    #acc-calculator .acc-field > span {\r\n      display: block;\r\n      margin-bottom: 2px;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 850;\r\n      text-transform: uppercase;\r\n      letter-spacing: .055em;\r\n    }\r\n\r\n    #acc-calculator .acc-field small {\r\n      display: block;\r\n      margin-bottom: 8px;\r\n      color: #8ba0bb;\r\n      font-size: 12px;\r\n    }\r\n\r\n    #acc-calculator .acc-mouth-field[hidden] {\r\n      display: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-mouth-field .acc-native-select:disabled {\r\n      opacity: 1;\r\n    }\r\n\r\n    #acc-calculator .acc-height-range {\r\n      margin: 8px 0 10px;\r\n      color: var(--sp-blue);\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    #acc-calculator .acc-height-quick-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 8px;\r\n      margin-top: 12px;\r\n    }\r\n\r\n    #acc-calculator .acc-height-quick,\r\n    #acc-calculator .acc-reset,\r\n    #acc-calculator .acc-copy,\r\n    #acc-calculator .acc-clear {\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 13px;\r\n      background: #fff;\r\n      color: var(--sp-blue-dark);\r\n      padding: 12px 14px;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      cursor: pointer;\r\n      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-height-quick:hover,\r\n    #acc-calculator .acc-reset:hover,\r\n    #acc-calculator .acc-copy:hover,\r\n    #acc-calculator .acc-clear:hover {\r\n      transform: translateY(-1px);\r\n      border-color: rgba(19, 99, 223, .4);\r\n      background: #f7fbff;\r\n      box-shadow: 0 10px 24px rgba(22, 32, 51, .05);\r\n    }\r\n\r\n    #acc-calculator .acc-copy {\r\n      border-color: transparent;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark));\r\n      color: #fff;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .18);\r\n    }\r\n\r\n\r\n    #acc-calculator .acc-copy:active,\r\n    #acc-calculator .acc-copy:focus,\r\n    #acc-calculator .acc-copy:focus-visible,\r\n    #acc-calculator .acc-copy.is-selected,\r\n    #acc-calculator .acc-copy.acc-is-selected,\r\n    #acc-calculator .acc-reset:active,\r\n    #acc-calculator .acc-reset:focus,\r\n    #acc-calculator .acc-reset:focus-visible,\r\n    #acc-calculator .acc-reset.is-selected,\r\n    #acc-calculator .acc-reset.acc-is-selected,\r\n    #acc-calculator .acc-clear:active,\r\n    #acc-calculator .acc-clear:focus,\r\n    #acc-calculator .acc-clear:focus-visible,\r\n    #acc-calculator .acc-clear.is-selected,\r\n    #acc-calculator .acc-clear.acc-is-selected,\r\n    #acc-calculator .acc-action-row button.is-selected,\r\n    #acc-calculator .acc-action-row button.acc-is-selected,\r\n    #acc-calculator .acc-action-row button:active,\r\n    #acc-calculator .acc-action-row button:focus-visible {\r\n      color: #fff !important;\r\n      -webkit-text-fill-color: #fff !important;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      background-color: var(--sp-blue-dark) !important;\r\n      background-image: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      border-color: transparent !important;\r\n      outline: none !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .22) !important;\r\n    }\r\n\r\n\r\n    \/* Final override for action buttons: prevents the first active click from flashing white. *\/\r\n    #acc-calculator .acc-action-row > button:active,\r\n    #acc-calculator .acc-action-row > button:focus,\r\n    #acc-calculator .acc-action-row > button:focus-visible,\r\n    #acc-calculator .acc-action-row > button.is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"],\r\n    #acc-calculator .acc-action-row > button.is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:hover {\r\n      color: #ffffff !important;\r\n      -webkit-text-fill-color: #ffffff !important;\r\n      background: #082a5e !important;\r\n      background-color: #082a5e !important;\r\n      background-image: linear-gradient(135deg, #1363df, #082a5e) !important;\r\n      border-color: transparent !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .24) !important;\r\n      opacity: 1 !important;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row > button.acc-button-selected,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:active,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus {\r\n      color: #ffffff !important;\r\n      -webkit-text-fill-color: #ffffff !important;\r\n      background: #082a5e !important;\r\n      background-color: #082a5e !important;\r\n      background-image: linear-gradient(135deg, #1363df, #082a5e) !important;\r\n      border-color: transparent !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .24) !important;\r\n      opacity: 1 !important;\r\n    }\r\n\r\n\r\n    #acc-calculator .acc-input-box {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) auto;\r\n      gap: 12px;\r\n      align-items: center;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-native-select,\r\n    #acc-calculator .acc-native-input {\r\n      border: 0 !important;\r\n      background: transparent !important;\r\n      padding: 2px 0 !important;\r\n      min-height: auto;\r\n      color: var(--sp-blue-dark) !important;\r\n      font-size: var(--acc-value-size) !important;\r\n      font-weight: 900 !important;\r\n      line-height: 1.15 !important;\r\n      letter-spacing: -.04em !important;\r\n      text-transform: none !important;\r\n      outline: none !important;\r\n      box-shadow: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-native-input::-webkit-outer-spin-button,\r\n    #acc-calculator .acc-native-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\r\n    #acc-calculator .acc-native-input { appearance: textfield; }\r\n\r\n    #acc-calculator .acc-input-box em {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 58px;\r\n      padding: 9px 12px;\r\n      border-radius: 999px;\r\n      background: var(--sp-silver);\r\n      color: var(--sp-blue);\r\n      font-size: 14px;\r\n      font-style: normal;\r\n      font-weight: 900;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-warning {\r\n      margin-top: 16px;\r\n      border: 1px solid #bfdcff;\r\n      border-radius: 16px;\r\n      background: #eef7ff;\r\n      color: var(--sp-red);\r\n      padding: 14px 16px;\r\n      font-size: 14px;\r\n      line-height: 1.7;\r\n      display: none;\r\n    }\r\n\r\n    #acc-calculator .acc-result-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 10px;\r\n      margin-top: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-result {\r\n      padding: 13px;\r\n      border-radius: 16px;\r\n      background: linear-gradient(180deg, #fbfdff, #f5f9ff);\r\n      border: 1px dashed rgba(19, 99, 223, .32);\r\n      min-height: 112px;\r\n    }\r\n\r\n    #acc-calculator .acc-result span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 10.5px;\r\n      font-weight: 900;\r\n      letter-spacing: .04em;\r\n      text-transform: uppercase;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    #acc-calculator .acc-result strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 22px;\r\n      line-height: 1.08;\r\n      word-break: break-word;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    #acc-calculator .acc-result small {\r\n      display: block;\r\n      margin-top: 7px;\r\n      color: var(--sp-muted);\r\n      font-size: 11px;\r\n      line-height: 1.4;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr 1fr;\r\n      gap: 10px;\r\n      margin-top: 18px;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table-wrap {\r\n      margin-top: 18px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      overflow: hidden;\r\n      background: #fff;\r\n    }\r\n\r\n    #acc-calculator .acc-table-title {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      gap: 12px;\r\n      padding: 13px 16px;\r\n      background: #f8fbff;\r\n      border-bottom: 1px solid var(--sp-line);\r\n      color: var(--sp-blue-dark);\r\n      font-size: 14px;\r\n      font-weight: 900;\r\n    }\r\n\r\n    #acc-calculator table.acc-size-table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n      font-size: 13px;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table th,\r\n    #acc-calculator .acc-size-table td {\r\n      padding: 10px 12px;\r\n      border-bottom: 1px solid #edf2f7;\r\n      text-align: right;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table th:first-child,\r\n    #acc-calculator .acc-size-table td:first-child { text-align: left; }\r\n\r\n    #acc-calculator .acc-size-table th {\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      text-transform: uppercase;\r\n      letter-spacing: .04em;\r\n      background: #fff;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table tr.is-active td {\r\n      background: #eef7ff;\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n    }\r\n\r\n    #acc-calculator .acc-size-table tr:last-child td { border-bottom: 0; }\r\n\r\n    #acc-calculator .acc-svg-wrap {\r\n      width: 100%;\r\n      min-height: 470px;\r\n      background: #fff;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 24px;\r\n      padding: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-svg {\r\n      display: block;\r\n      width: auto;\r\n      height: auto;\r\n      max-width: 100%;\r\n      margin: 0 auto;\r\n      overflow: visible;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-text {\r\n      fill: #64748b;\r\n      font-size: 3.2px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-text-blue {\r\n      fill: var(--sp-blue);\r\n      font-size: 3.4px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-label {\r\n      fill: #55657d;\r\n      font-size: 4.1px;\r\n      font-weight: 700;\r\n      letter-spacing: .02em;\r\n    }\r\n\r\n    #acc-calculator .acc-svg-dim-blue {\r\n      stroke: var(--sp-blue);\r\n      stroke-width: 0.45;\r\n      marker-start: url(#accArrowStart);\r\n      marker-end: url(#accArrowEnd);\r\n    }\r\n\r\n    #acc-calculator .acc-svg-extension {\r\n      stroke: #9bbcff;\r\n      stroke-width: 0.38;\r\n    }\r\n\r\n    #acc-calculator .acc-status-card {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 10px;\r\n      margin-top: 16px;\r\n      width: 100%;\r\n    }\r\n\r\n    #acc-calculator .acc-status {\r\n      border: 1px solid var(--sp-line);\r\n      background: #fff;\r\n      border-radius: 16px;\r\n      padding: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-status span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 900;\r\n      text-transform: uppercase;\r\n      letter-spacing: .04em;\r\n      margin-bottom: 5px;\r\n    }\r\n\r\n    #acc-calculator .acc-status strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 20px;\r\n      line-height: 1.1;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link-card {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 12px;\r\n      margin-top: 12px;\r\n      width: 100%;\r\n      padding: 12px 14px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 16px;\r\n      background: linear-gradient(180deg, #fbfdff, #f5f9ff);\r\n    }\r\n\r\n    #acc-calculator .acc-product-link-card[hidden] {\r\n      display: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link-card span {\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 900;\r\n      letter-spacing: .035em;\r\n      text-transform: uppercase;\r\n      line-height: 1.35;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-height: 36px;\r\n      padding: 9px 13px;\r\n      border-radius: 999px;\r\n      background: var(--sp-blue-dark);\r\n      color: #fff !important;\r\n      -webkit-text-fill-color: #fff !important;\r\n      font-size: 13px;\r\n      font-weight: 900;\r\n      text-decoration: none;\r\n      white-space: nowrap;\r\n      box-shadow: 0 10px 22px rgba(8, 42, 94, .16);\r\n      transition: transform .16s ease, box-shadow .16s ease;\r\n    }\r\n\r\n    #acc-calculator .acc-product-link:hover {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 14px 28px rgba(8, 42, 94, .22);\r\n    }\r\n\r\n    #acc-calculator .acc-size-table a.acc-size-link {\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n      text-decoration: none;\r\n      border-bottom: 1px solid rgba(19, 99, 223, .35);\r\n    }\r\n\r\n    #acc-calculator .acc-size-table a.acc-size-link:hover {\r\n      color: var(--sp-blue);\r\n      border-bottom-color: currentColor;\r\n    }\r\n\r\n    #acc-calculator .acc-toast {\r\n      position: fixed;\r\n      right: 20px;\r\n      bottom: 20px;\r\n      z-index: 99999;\r\n      transform: translateY(18px);\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      background: #082a5e;\r\n      color: #fff;\r\n      padding: 12px 14px;\r\n      border-radius: 14px;\r\n      box-shadow: 0 18px 50px rgba(8, 42, 94, .22);\r\n      transition: opacity .18s ease, transform .18s ease;\r\n      font-weight: 800;\r\n      font-size: 14px;\r\n    }\r\n\r\n    #acc-calculator .acc-toast.is-visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n\r\n\r\n    \/* Final action-button style: transparent background, deep-blue text, no visual change on click\/selection. *\/\r\n    #acc-calculator .acc-action-row > button,\r\n    #acc-calculator .acc-action-row > button:hover,\r\n    #acc-calculator .acc-action-row > button:active,\r\n    #acc-calculator .acc-action-row > button:focus,\r\n    #acc-calculator .acc-action-row > button:focus-visible,\r\n    #acc-calculator .acc-action-row > button.is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"],\r\n    #acc-calculator .acc-action-row > button.is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:hover {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: var(--sp-line) !important;\r\n      box-shadow: none !important;\r\n      transform: none !important;\r\n      opacity: 1 !important;\r\n      outline: none !important;\r\n    }\r\n\r\n    @media (max-width: 1080px) {\r\n      #acc-calculator .acc-browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 980px) {\r\n      #acc-calculator .acc-workspace { grid-template-columns: 1fr; }\r\n      #acc-calculator .acc-preview-panel { min-height: auto; }\r\n      #acc-calculator .acc-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 720px) {\r\n      #acc-calculator {\r\n        --acc-value-size: 22px;\r\n      }\r\n\r\n      #acc-calculator .acc-action-row,\r\n      #acc-calculator .acc-result-grid,\r\n      #acc-calculator .acc-feature-row,\r\n      #acc-calculator .acc-status-card,\r\n      #acc-calculator .acc-height-quick-row,\r\n      #acc-calculator .acc-browser-grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      #acc-calculator .acc-svg-wrap { min-height: 420px; }\r\n      #acc-calculator .acc-browser { padding: 22px 18px; }\r\n      #acc-calculator .acc-split-row { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 620px) {\r\n      #acc-calculator .acc-shell { padding: 22px 16px; }\r\n      #acc-calculator .acc-title-row { flex-direction: column; }\r\n      #acc-calculator .acc-reset,\r\n      #acc-calculator .acc-copy,\r\n      #acc-calculator .acc-clear { width: 100%; }\r\n      #acc-calculator .acc-size-table-wrap,\r\n      #acc-calculator .acc-browser-table-wrap { overflow-x: auto; }\r\n    }\r\n\r\n\r\n    \/* v36: action buttons stay transparent\/deep-blue, hover only adds lift + shadow. *\/\r\n    #acc-calculator .acc-action-row > button,\r\n    #acc-calculator .acc-action-row > button:focus,\r\n    #acc-calculator .acc-action-row > button:focus-visible,\r\n    #acc-calculator .acc-action-row > button:active,\r\n    #acc-calculator .acc-action-row > button.is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"] {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: var(--sp-line) !important;\r\n      box-shadow: none !important;\r\n      transform: translateY(0) !important;\r\n      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;\r\n      outline: none !important;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row > button:hover,\r\n    #acc-calculator .acc-action-row > button:focus:hover,\r\n    #acc-calculator .acc-action-row > button:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button:active:hover,\r\n    #acc-calculator .acc-action-row > button.is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:hover {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: rgba(8, 42, 94, .22) !important;\r\n      box-shadow: 0 14px 28px rgba(8, 42, 94, .16) !important;\r\n      transform: translateY(-3px) !important;\r\n    }\r\n\r\n\r\n    \/* v36 fix: selected\/focused action buttons must not keep old shadows; hover alone lifts. *\/\r\n    #acc-calculator .acc-action-row > button.is-selected:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:not(:hover),\r\n    #acc-calculator .acc-action-row > button.is-selected:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus:not(:hover),\r\n    #acc-calculator .acc-action-row > button.is-selected:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus-visible:not(:hover),\r\n    #acc-calculator .acc-action-row > button.is-selected:active:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:active:not(:hover),\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:active:not(:hover),\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:active:not(:hover) {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: var(--sp-line) !important;\r\n      box-shadow: none !important;\r\n      transform: translateY(0) !important;\r\n    }\r\n\r\n    #acc-calculator .acc-action-row > button.is-selected:focus:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus:hover,\r\n    #acc-calculator .acc-action-row > button.is-selected:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:focus-visible:hover,\r\n    #acc-calculator .acc-action-row > button.is-selected:active:hover,\r\n    #acc-calculator .acc-action-row > button.acc-is-selected:active:hover,\r\n    #acc-calculator .acc-action-row > button.acc-button-selected:active:hover,\r\n    #acc-calculator .acc-action-row > button[aria-pressed=\"true\"]:active:hover {\r\n      color: #082a5e !important;\r\n      -webkit-text-fill-color: #082a5e !important;\r\n      background: transparent !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border-color: rgba(8, 42, 94, .22) !important;\r\n      box-shadow: 0 14px 28px rgba(8, 42, 94, .16) !important;\r\n      transform: translateY(-3px) !important;\r\n    }\r\n<\/style>\r\n\r\n  <div class=\"acc-shell\">\r\n    <div class=\"acc-hero\">\r\n      <div class=\"acc-badge\">\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0446\u0435\u043d\u043a\u0438 \u0435\u043c\u043a\u043e\u0441\u0442\u0438 \u0430\u044d\u0440\u043e\u0437\u043e\u043b\u044c\u043d\u044b\u0445 \u0431\u0430\u043b\u043b\u043e\u043d\u0447\u0438\u043a\u043e\u0432<\/div>\r\n      <h2>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043e\u0431\u044a\u0435\u043c\u0430 \u0430\u043b\u044e\u043c\u0438\u043d\u0438\u0435\u0432\u043e\u0433\u043e \u0430\u044d\u0440\u043e\u0437\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u0430\u043b\u043b\u043e\u043d\u0447\u0438\u043a\u0430<\/h2>\r\n      <p>\r\n        \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0430\u043b\u044e\u043c\u0438\u043d\u0438\u0435\u0432\u044b\u0445 \u0430\u044d\u0440\u043e\u0437\u043e\u043b\u044c\u043d\u044b\u0445 \u0431\u0430\u043b\u043b\u043e\u043d\u0447\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043e\u0431\u044a\u0435\u043c\u0430 \u0434\u043e \u043a\u0440\u0430\u0435\u0432, \u043e\u0431\u044a\u0435\u043c\u0430 \u0437\u0430\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u0436\u0438\u0436\u0435\u043d\u043d\u044b\u043c \u0433\u0430\u0437\u043e\u043c \u0438 \u043e\u0431\u044a\u0435\u043c\u0430 \u0437\u0430\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u0436\u0430\u0442\u044b\u043c \u0433\u0430\u0437\u043e\u043c. \u0412\u044b\u0441\u043e\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u043d\u0438\u0436\u0435.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"acc-workspace\">\r\n      <div class=\"acc-preview-column\">\r\n        <section class=\"acc-preview-panel\">\r\n          <div>\r\n            <div class=\"acc-svg-wrap\">\r\n              <svg id=\"accCanSvg\" class=\"acc-svg\" viewbox=\"0 0 240 410\" aria-label=\"\u0421\u0445\u0435\u043c\u0430 \u0430\u044d\u0440\u043e\u0437\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u0430\u043b\u043b\u043e\u043d\u0447\u0438\u043a\u0430\">\r\n                <defs>\r\n                  <lineargradient id=\"accMetal\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\r\n                    <stop offset=\"0%\" stop-color=\"#cbd5e1\"><\/stop>\r\n                    <stop offset=\"18%\" stop-color=\"#f8fafc\"><\/stop>\r\n                    <stop offset=\"48%\" stop-color=\"#e2e8f0\"><\/stop>\r\n                    <stop offset=\"76%\" stop-color=\"#ffffff\"><\/stop>\r\n                    <stop offset=\"100%\" stop-color=\"#94a3b8\"><\/stop>\r\n                  <\/lineargradient>\r\n                  <lineargradient id=\"accLiquid\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\r\n                    <stop offset=\"0%\" stop-color=\"#dbeafe\" stop-opacity=\"0.76\"><\/stop>\r\n                    <stop offset=\"100%\" stop-color=\"#60a5fa\" stop-opacity=\"0.46\"><\/stop>\r\n                  <\/lineargradient>\r\n                  <clippath id=\"accCanClip\">\r\n                    <path id=\"accCanClipPath\"><\/path>\r\n                  <\/clippath>\r\n                  <marker id=\"accArrowStart\" markerwidth=\"4\" markerheight=\"4\" refx=\"0.5\" refy=\"2\" orient=\"auto-start-reverse\">\r\n                    <path d=\"M 4 0 L 0 2 L 4 4 z\" fill=\"#1363df\"><\/path>\r\n                  <\/marker>\r\n                  <marker id=\"accArrowEnd\" markerwidth=\"4\" markerheight=\"4\" refx=\"3.5\" refy=\"2\" orient=\"auto\">\r\n                    <path d=\"M 0 0 L 4 2 L 0 4 z\" fill=\"#1363df\"><\/path>\r\n                  <\/marker>\r\n                <\/defs>\r\n                <path id=\"accCanFill\" fill=\"url(#accMetal)\" stroke=\"none\"><\/path>\r\n                <g clip-path=\"url(#accCanClip)\">\r\n                  <rect id=\"accLiquidRect\" x=\"0\" y=\"120\" width=\"260\" height=\"230\" fill=\"url(#accLiquid)\"><\/rect>\r\n                  <line id=\"accLiquidLine\" x1=\"40\" y1=\"120\" x2=\"150\" y2=\"120\" stroke=\"#1363df\" stroke-width=\"0.7\" stroke-dasharray=\"2 1.8\"><\/line>\r\n                <\/g>\r\n                <path id=\"accCanStroke\" fill=\"none\" stroke=\"#475569\" stroke-width=\"0.85\"><\/path>\r\n                <line id=\"accMouthLeftExt\" class=\"acc-svg-extension\"><\/line>\r\n                <line id=\"accMouthRightExt\" class=\"acc-svg-extension\"><\/line>\r\n                <line id=\"accMouthLine\" class=\"acc-svg-dim-blue\"><\/line>\r\n                <text id=\"accMouthText\" class=\"acc-svg-text-blue\"><\/text>\r\n                <text id=\"accMouthNote\" class=\"acc-svg-text-blue\"><\/text>\r\n                <rect id=\"accCup\" fill=\"#e2e8f0\" stroke=\"#475569\" stroke-width=\"0.5\" rx=\"1.4\"><\/rect>\r\n                <rect id=\"accValve\" fill=\"#f8fafc\" stroke=\"#475569\" stroke-width=\"0.5\" rx=\"1.6\"><\/rect>\r\n                <line id=\"accStem\" stroke=\"#64748b\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accHeightLine\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accHeightTopTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accHeightBottomTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <text id=\"accHeightText\" class=\"acc-svg-text acc-svg-secondary\"><\/text>\r\n                <line id=\"accDiameterLine\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accDiameterLeftTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <line id=\"accDiameterRightTick\" class=\"acc-svg-secondary\" stroke=\"#94a3b8\" stroke-width=\"0.45\"><\/line>\r\n                <text id=\"accDiameterText\" class=\"acc-svg-text acc-svg-secondary\"><\/text>\r\n                <text id=\"accFillText\" class=\"acc-svg-text acc-svg-secondary\"><\/text>\r\n                <text id=\"accCanLabel\" class=\"acc-svg-label\">\u0418\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b<\/text>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"acc-status-card\">\r\n              <div class=\"acc-status\">\r\n                <span>\u0412\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440<\/span>\r\n                <strong id=\"accStatusSize\">\u2014<\/strong>\r\n              <\/div>\r\n              <div class=\"acc-status\">\r\n                <span>\u0423\u0440\u043e\u0432\u0435\u043d\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/span>\r\n                <strong id=\"accStatusRatio\">\u2014<\/strong>\r\n              <\/div>\r\n              <div class=\"acc-status\">\r\n                <span>\u0420\u043e\u0442<\/span>\r\n                <strong id=\"accStatusMouth\">\u2014<\/strong>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"acc-product-link-card\" id=\"accProductLinkCard\" hidden>\r\n              <span id=\"accProductLinkLabel\">\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u043e\u0432\u0430\u0440\u0430 \u0434\u043b\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430<\/span>\r\n              <a id=\"accProductLink\" class=\"acc-product-link\" href=\"#\" target=\"_blank\" rel=\"nofollow noopener\">\u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0442\u043e\u0432\u0430\u0440\u0430<\/a>\r\n            <\/div>\r\n          <\/div>\r\n        <\/section>\r\n      <\/div>\r\n\r\n      <section class=\"acc-panel\">\r\n        <div class=\"acc-title-row\">\r\n          <div>\r\n            <h3>\u0420\u0430\u0437\u043c\u0435\u0440 \u0432\u0432\u043e\u0434\u0430<\/h3>\r\n            <p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0438\u0430\u043c\u0435\u0442\u0440 \u0431\u0430\u043d\u043a\u0438, \u0437\u0430\u0442\u0435\u043c \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u044b\u0441\u043e\u0442\u0443 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"acc-input-grid\">\r\n          <div class=\"acc-split-row\">\r\n            <label class=\"acc-field\">\r\n              <span>\u0414\u0438\u0430\u043c\u0435\u0442\u0440 \u0431\u0430\u043d\u043a\u0438<\/span>\r\n              <small>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0438\u0430\u043c\u0435\u0442\u0440.<\/small>\r\n              <div class=\"acc-input-box\">\r\n                <select id=\"accDiameter\" class=\"acc-native-select\"><\/select>\r\n                <em>\u043c\u043c<\/em>\r\n              <\/div>\r\n            <\/label>\r\n\r\n            <label class=\"acc-field\">\r\n              <span>\u0412\u044b\u0441\u043e\u0442\u0430 \u0431\u0430\u043d\u043a\u0438<\/span>\r\n              <div id=\"accHeightRange\" class=\"acc-height-range\">\u0414\u0438\u0430\u043f\u0430\u0437\u043e\u043d: -<\/div>\r\n              <div class=\"acc-input-box\">\r\n                <input id=\"accHeight\" class=\"acc-native-input\" type=\"number\" step=\"1\" \/>\r\n                <em>\u043c\u043c<\/em>\r\n              <\/div>\r\n            <\/label>\r\n          <\/div>\r\n\r\n          <label class=\"acc-field acc-mouth-field\" id=\"accMouthField\" hidden>\r\n            <span>\u0414\u0438\u0430\u043c\u0435\u0442\u0440 \u0440\u0442\u0430<\/span>\r\n            <small id=\"accMouthHelp\">\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0430 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u0435 \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u043e\u043c 20 \u043c\u043c \u0438\u043b\u0438 25,4 \u043c\u043c (1 \u0434\u044e\u0439\u043c).<\/small>\r\n            <div class=\"acc-input-box\">\r\n              <select id=\"accMouth\" class=\"acc-native-select\"><\/select>\r\n              <em>\u0440\u043e\u0442<\/em>\r\n            <\/div>\r\n          <\/label>\r\n\r\n          <label class=\"acc-field\">\r\n            <span>\u0420\u0435\u0436\u0438\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0438\u0441\u043f\u043b\u0435\u044f<\/span>\r\n            <small>\u0420\u0435\u0433\u0443\u043b\u0438\u0440\u0443\u0435\u0442 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u0438\u043d\u0435\u0439 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u0432 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435.<\/small>\r\n            <div class=\"acc-input-box\">\r\n              <select id=\"accMode\" class=\"acc-native-select\">\r\n                <option>\u0421\u0436\u0438\u0436\u0435\u043d\u043d\u044b\u0439 \u0433\u0430\u0437<\/option>\r\n                <option>\u0421\u0436\u0430\u0442\u044b\u0439 \u0433\u0430\u0437<\/option>\r\n                <option>\u041f\u043e\u043b\u043d\u0430\u044f \u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c<\/option>\r\n              <\/select>\r\n              <em>\u0440\u0435\u0436\u0438\u043c<\/em>\r\n            <\/div>\r\n          <\/label>\r\n        <\/div>\r\n\r\n        <div id=\"accWarning\" class=\"acc-warning\"><\/div>\r\n\r\n        <div class=\"acc-result-grid\">\r\n          <div class=\"acc-result\">\r\n            <span>\u041f\u043e\u043b\u043d\u0430\u044f \u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c<\/span>\r\n            <strong><b id=\"accFullMl\">0 \u043c\u043b<\/b><\/strong>\r\n            <small>\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0435 \u0436\u0438\u0434\u043a\u0438\u0435 \u0443\u043d\u0446\u0438\u0438: <i id=\"accFullUsOz\">0<\/i><br>\u0431\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u0438\u0445 \u0436\u0438\u0434\u043a\u0438\u0445 \u0443\u043d\u0446\u0438\u0439: <i id=\"accFullUkOz\">0<\/i><\/small>\r\n          <\/div>\r\n\r\n          <div class=\"acc-result\">\r\n            <span>\u0421\u0436\u0438\u0436\u0435\u043d\u043d\u044b\u0439 \u0433\u0430\u0437<\/span>\r\n            <strong><b id=\"accLiquidMl\">0 \u043c\u043b<\/b><\/strong>\r\n            <small>\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0435 \u0436\u0438\u0434\u043a\u0438\u0435 \u0443\u043d\u0446\u0438\u0438: <i id=\"accLiquidUsOz\">0<\/i><br>\u0431\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u0438\u0445 \u0436\u0438\u0434\u043a\u0438\u0445 \u0443\u043d\u0446\u0438\u0439: <i id=\"accLiquidUkOz\">0<\/i><\/small>\r\n          <\/div>\r\n\r\n          <div class=\"acc-result\">\r\n            <span>\u0421\u0436\u0430\u0442\u044b\u0439 \u0433\u0430\u0437<\/span>\r\n            <strong><b id=\"accCompressedMl\">\u2014<\/b><\/strong>\r\n            <small>\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0435 \u0436\u0438\u0434\u043a\u0438\u0435 \u0443\u043d\u0446\u0438\u0438: <i id=\"accCompressedUsOz\">\u2014<\/i><br>\u0431\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u0438\u0445 \u0436\u0438\u0434\u043a\u0438\u0445 \u0443\u043d\u0446\u0438\u0439: <i id=\"accCompressedUkOz\">\u2014<\/i><\/small>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"acc-action-row\">\r\n          <button type=\"button\" class=\"acc-copy\" id=\"accCopy\">\u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/button>\r\n          <button type=\"button\" class=\"acc-reset\" id=\"accReset\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0431\u0440\u043e\u0441\u0430<\/button>\r\n          <button type=\"button\" class=\"acc-clear\" id=\"accCopyTable\">\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043f\u0438\u0439<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"acc-size-table-wrap\">\r\n          <div class=\"acc-table-title\">\r\n            <span id=\"accTableTitle\">\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u043b\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0430.<\/span>\r\n            <span id=\"accTableCount\">0 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/span>\r\n          <\/div>\r\n          <table class=\"acc-size-table\">\r\n            <thead>\r\n              <tr>\r\n                <th>\u0420\u0430\u0437\u043c\u0435\u0440<\/th>\r\n                <th>\u041f\u043e\u043b\u043d\u044b\u0439<\/th>\r\n                <th>\u0416\u0438\u0434\u043a\u043e\u0441\u0442\u044c<\/th>\r\n                <th>\u0421\u0436\u0430\u0442\u044b\u0439<\/th>\r\n              <\/tr>\r\n            <\/thead>\r\n            <tbody id=\"accCompatibleRows\"><\/tbody>\r\n          <\/table>\r\n        <\/div>\r\n      <\/section>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"acc-toast\" id=\"accToast\" role=\"status\" aria-live=\"polite\">\u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043e<\/div>\r\n\r\n  <script>\r\n    (function () {\r\n      var root = document.getElementById('acc-calculator');\r\n      if (!root || root.dataset.accReady === 'true') return;\r\n      root.dataset.accReady = 'true';\r\n\r\n      var canData = [\r\n        { no: 1, size: '\u03a622 \u00d7 52', d: 22, h: 52, full: 17, liquid: 12, compressed: null },\r\n        { no: 2, size: '\u03a622 \u00d7 68', d: 22, h: 68, full: 23, liquid: 15, compressed: null },\r\n        { no: 3, size: '\u03a625 \u00d7 65', d: 25, h: 65, full: 28, liquid: 20, compressed: null },\r\n        { no: 4, size: '\u03a625 \u00d7 95', d: 25, h: 95, full: 41, liquid: 30, compressed: null },\r\n        { no: 5, size: '\u03a635 \u00d7 65', d: 35, h: 65, full: 53, liquid: 40, compressed: 30 },\r\n        { no: 6, size: '\u03a635 \u00d7 88', d: 35, h: 88, full: 75, liquid: 50, compressed: null },\r\n        { no: 7, size: '\u03a635 \u00d7 105', d: 35, h: 105, full: 89, liquid: 50, compressed: null },\r\n        { no: 8, size: '\u03a638 \u00d7 90', d: 38, h: 90, full: 89, liquid: 50, compressed: null },\r\n        { no: 9, size: '\u03a635 \u00d7 125', d: 35, h: 125, full: 110, liquid: 75, compressed: null },\r\n        { no: 10, size: '\u03a638 \u00d7 110', d: 38, h: 110, full: 110, liquid: 75, compressed: null },\r\n        { no: 11, size: '\u03a640 \u00d7 100', d: 40, h: 100, full: 110, liquid: 75, compressed: null },\r\n        { no: 12, size: '\u03a638 \u00d7 125', d: 38, h: 125, full: 120, liquid: 80, compressed: 65 },\r\n        { no: 13, size: '\u03a635 \u00d7 135', d: 35, h: 135, full: 125, liquid: 85, compressed: 65 },\r\n        { no: 14, size: '\u03a635 \u00d7 156', d: 35, h: 156, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 15, size: '\u03a638 \u00d7 138', d: 38, h: 138, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 16, size: '\u03a640 \u00d7 125', d: 40, h: 125, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 17, size: '\u03a645 \u00d7 105', d: 45, h: 105, full: 140, liquid: 100, compressed: 75 },\r\n        { no: 18, size: '\u03a638 \u00d7 165', d: 38, h: 165, full: 150, liquid: 125, compressed: 100 },\r\n        { no: 19, size: '\u03a640 \u00d7 140', d: 40, h: 140, full: 150, liquid: 125, compressed: 100 },\r\n        { no: 20, size: '\u03a640 \u00d7 156', d: 40, h: 156, full: 175, liquid: 125, compressed: 100 },\r\n        { no: 21, size: '\u03a645 \u00d7 125', d: 45, h: 125, full: 175, liquid: 125, compressed: 100 },\r\n        { no: 22, size: '\u03a645 \u00d7 150', d: 45, h: 150, full: 210, liquid: 150, compressed: 125 },\r\n        { no: 23, size: '\u03a650 \u00d7 125', d: 50, h: 125, full: 210, liquid: 150, compressed: 125 },\r\n        { no: 24, size: '\u03a653 \u00d7 110', d: 53, h: 110, full: 210, liquid: 150, compressed: 125 },\r\n        { no: 25, size: '\u03a645 \u00d7 190', d: 45, h: 190, full: 270, liquid: 200, compressed: 150 },\r\n        { no: 26, size: '\u03a650 \u00d7 156', d: 50, h: 156, full: 270, liquid: 200, compressed: 150 },\r\n        { no: 27, size: '\u03a653 \u00d7 142', d: 53, h: 142, full: 270, liquid: 200, compressed: 150 },\r\n        { no: 28, size: '\u03a653 \u00d7 160', d: 53, h: 160, full: 300, liquid: 225, compressed: 175 },\r\n        { no: 29, size: '\u03a650 \u00d7 190', d: 50, h: 190, full: 335, liquid: 250, compressed: 200 },\r\n        { no: 30, size: '\u03a653 \u00d7 173', d: 53, h: 173, full: 335, liquid: 250, compressed: 200 },\r\n        { no: 31, size: '\u03a659 \u00d7 142', d: 59, h: 142, full: 335, liquid: 250, compressed: 200 },\r\n        { no: 32, size: '\u03a653 \u00d7 190', d: 53, h: 190, full: 350, liquid: 275, compressed: 225 },\r\n        { no: 33, size: '\u03a650 \u00d7 225', d: 50, h: 225, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 34, size: '\u03a653 \u00d7 205', d: 53, h: 205, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 35, size: '\u03a659 \u00d7 169', d: 59, h: 169, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 36, size: '\u03a666 \u00d7 143', d: 66, h: 143, full: 405, liquid: 300, compressed: 250 },\r\n        { no: 37, size: '\u03a659 \u00d7 214', d: 59, h: 214, full: 520, liquid: 400, compressed: 300 },\r\n        { no: 38, size: '\u03a666 \u00d7 178', d: 66, h: 178, full: 520, liquid: 400, compressed: 300 },\r\n        { no: 39, size: '\u03a666 \u00d7 218', d: 66, h: 218, full: 650, liquid: 500, compressed: 400 },\r\n        { no: 40, size: '\u03a666 \u00d7 260', d: 66, h: 260, full: 800, liquid: 600, compressed: 500 },\r\n        { no: 41, size: '\u03a674 \u00d7 210', d: 74, h: 210, full: 800, liquid: 600, compressed: 500 },\r\n        { no: 42, size: '\u03a674 \u00d7 263', d: 74, h: 263, full: 1000, liquid: 750, compressed: 600 },\r\n        { no: 43, size: '\u03a680 \u00d7 226', d: 80, h: 226, full: 1000, liquid: 750, compressed: 600 }\r\n      ];\r\n\r\n      var productUrlBySize = {\r\n              \"\u03a622 \u00d7 68\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/22068-aluminum-aerosol-can\",\r\n              \"\u03a625 \u00d7 65\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/25065-aluminum-aerosol-can\",\r\n              \"\u03a625 \u00d7 95\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/25095-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 65\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35065-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 88\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35088-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 105\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35105-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 90\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38090-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35125-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 110\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38110-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 100\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40100-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38125-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 135\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35135-aluminum-aerosol-can\",\r\n              \"\u03a635 \u00d7 156\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/35156-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 138\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38138-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40125-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 105\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45105-aluminum-aerosol-can\",\r\n              \"\u03a638 \u00d7 165\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/38165-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 140\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40140-aluminum-aerosol-can\",\r\n              \"\u03a640 \u00d7 156\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/40156-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45125-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 150\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45150-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 125\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50125-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 110\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53110-aluminum-aerosol-can\",\r\n              \"\u03a645 \u00d7 190\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/45190-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 156\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50156-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 142\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53142-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 160\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53160-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 190\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50190-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 173\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53173-aluminum-aerosol-can\",\r\n              \"\u03a659 \u00d7 142\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/59142-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 190\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53190-aluminum-aerosol-can\",\r\n              \"\u03a650 \u00d7 225\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/50225-aluminum-aerosol-can\",\r\n              \"\u03a653 \u00d7 205\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/53205-aluminum-aerosol-can\",\r\n              \"\u03a659 \u00d7 169\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/59169-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 143\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66143-aluminum-aerosol-can\",\r\n              \"\u03a659 \u00d7 214\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/59214-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 178\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66178-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 218\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66218-aluminum-aerosol-can\",\r\n              \"\u03a666 \u00d7 260\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/66260-aluminum-aerosol-can\",\r\n              \"\u03a674 \u00d7 210\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/74210-aluminum-aerosol-can\",\r\n              \"\u03a674 \u00d7 263\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/74263-aluminum-aerosol-can\",\r\n              \"\u03a680 \u00d7 226\": \"https:\/\/www.cnshining.com\/aluminum-aerosol-can-manufacturer\/80226-aluminum-aerosol-can\"\r\n      };\r\n\r\n      var DIAGRAM_SCALE = 1.85;\r\n      var DEFAULT_DIAMETER = 53;\r\n      var DEFAULT_HEIGHT = 205;\r\n      var DEFAULT_MODE = 'Liquid Gas';\r\n      var DEFAULT_MOUTH = 25.4;\r\n      var warningTimer = null;\r\n\r\n      var mouthOptionsByDiameter = {\r\n        22: [20],\r\n        25: [20],\r\n        35: [25.4, 20],\r\n        38: [25.4],\r\n        40: [25.4, 20],\r\n        45: [25.4, 20],\r\n        50: [25.4],\r\n        53: [25.4],\r\n        59: [25.4],\r\n        66: [25.4],\r\n        74: [25.4],\r\n        80: [25.4]\r\n      };\r\n\r\n\r\n      var heightRangeByDiameter = {\r\n        22: { min: 50, max: 90 },\r\n        25: { min: 65, max: 95 },\r\n        28: { min: 75, max: 100 },\r\n        35: { min: 65, max: 160 },\r\n        40: { min: 80, max: 180 },\r\n        45: { min: 100, max: 190 },\r\n        50: { min: 110, max: 225 },\r\n        53: { min: 110, max: 235 },\r\n        59: { min: 120, max: 250 },\r\n        66: { min: 140, max: 240 },\r\n        74: { min: 160, max: 300 },\r\n        80: { min: 180, max: 300 }\r\n      };\r\n\r\n      var state = {\r\n        diameter: DEFAULT_DIAMETER,\r\n        heightInput: DEFAULT_HEIGHT,\r\n        matchedHeight: DEFAULT_HEIGHT,\r\n        mouth: DEFAULT_MOUTH,\r\n        mode: DEFAULT_MODE\r\n      };\r\n\r\n      var filterState = {\r\n        diameter: null,\r\n        height: null,\r\n        liquid: null,\r\n        compressed: null,\r\n        full: null\r\n      };\r\n\r\n      function $(id) { return root.querySelector('#' + id); }\r\n      function roundTo(value, digits) {\r\n        var base = Math.pow(10, digits || 0);\r\n        return Math.round(value * base) \/ base;\r\n      }\r\n      function setLine(el, x1, y1, x2, y2) {\r\n        el.setAttribute('x1', x1); el.setAttribute('y1', y1); el.setAttribute('x2', x2); el.setAttribute('y2', y2);\r\n      }\r\n      function showToast(message) {\r\n        var toast = $('accToast');\r\n        toast.textContent = message;\r\n        toast.classList.add('is-visible');\r\n        clearTimeout(showToast.timer);\r\n        showToast.timer = setTimeout(function () { toast.classList.remove('is-visible'); }, 1400);\r\n      }\r\n      function showWarning(message) {\r\n        var warning = $('accWarning');\r\n        warning.textContent = message;\r\n        warning.style.display = 'block';\r\n        clearTimeout(warningTimer);\r\n        warningTimer = setTimeout(function () { warning.style.display = 'none'; }, 3400);\r\n      }\r\n      function hideWarning() {\r\n        clearTimeout(warningTimer);\r\n        $('accWarning').style.display = 'none';\r\n      }\r\n      function formatValue(value) { return value === null || typeof value === 'undefined' ? '\u2014' : String(value); }\r\n      function getProductUrl(row) {\r\n        return row && row.size ? productUrlBySize[row.size] || '' : '';\r\n      }\r\n      function renderProductLink(referenceItem, displayItem) {\r\n        var card = $('accProductLinkCard');\r\n        var link = $('accProductLink');\r\n        var label = $('accProductLinkLabel');\r\n        if (!card || !link || !label) return;\r\n        var url = getProductUrl(referenceItem);\r\n        if (!url) {\r\n          card.hidden = true;\r\n          link.removeAttribute('href');\r\n          return;\r\n        }\r\n        var exact = displayItem && Math.abs(Number(displayItem.h) - Number(referenceItem.h)) < 0.01;\r\n        label.textContent = exact ? 'Product page for ' + referenceItem.size : 'Closest standard product: ' + referenceItem.size;\r\n        link.textContent = exact ? 'View product page' : 'View closest product';\r\n        link.href = url;\r\n        card.hidden = false;\r\n      }\r\n      function formatNumber(value) {\r\n        if (value === null || typeof value === 'undefined') return '\u2014';\r\n        return Math.abs(value - Math.round(value)) < 0.001 ? String(Math.round(value)) : String(roundTo(value, 1));\r\n      }\r\n      function formatUsOz(value) {\r\n        return value === null || typeof value === 'undefined' ? '\u2014' : roundTo(value \/ 29.5735295625, 2);\r\n      }\r\n      function formatUkOz(value) {\r\n        return value === null || typeof value === 'undefined' ? '\u2014' : roundTo(value \/ 28.4130625, 2);\r\n      }\r\n      function getMouthOptionsForDiameter(diameter) {\r\n        return mouthOptionsByDiameter[Number(diameter)] || [25.4];\r\n      }\r\n      function isSameMouth(a, b) { return Math.abs(Number(a) - Number(b)) < 0.01; }\r\n      function formatMouth(value) {\r\n        return isSameMouth(value, 25.4) ? '25.4 mm (1 inch)' : '20 mm';\r\n      }\r\n      function getShortMouth(value) {\r\n        return isSameMouth(value, 25.4) ? '25.4 mm' : '20 mm';\r\n      }\r\n      function syncMouthControl() {\r\n        var options = getMouthOptionsForDiameter(state.diameter);\r\n        var mouthSelect = $('accMouth');\r\n        var mouthField = $('accMouthField');\r\n        var mouthHelp = $('accMouthHelp');\r\n        if (!mouthSelect || !mouthField) return;\r\n        var chosen = options.some(function (value) { return isSameMouth(value, 25.4); }) ? 25.4 : options[0];\r\n        state.mouth = chosen;\r\n        mouthSelect.innerHTML = '';\r\n        options.forEach(function (value) {\r\n          var option = document.createElement('option');\r\n          option.value = String(value);\r\n          option.textContent = formatMouth(value);\r\n          mouthSelect.appendChild(option);\r\n        });\r\n        mouthSelect.value = String(chosen);\r\n        if (options.length > 1) {\r\n          mouthField.hidden = false;\r\n          mouthSelect.disabled = false;\r\n          mouthHelp.textContent = 'This diameter supports both 20 mm and 25.4 mm (1 inch) mouths.';\r\n        } else {\r\n          mouthField.hidden = true;\r\n          mouthSelect.disabled = true;\r\n          mouthHelp.textContent = 'Mouth is fixed at ' + formatMouth(chosen) + ' for this diameter.';\r\n        }\r\n      }\r\n      function formatRatio(value, total) {\r\n        if (value === null || !total) return '\u2014';\r\n        return Math.round((value \/ total) * 100) + '%';\r\n      }\r\n      function numericCompare(a, b) {\r\n        if (a === null) return 1;\r\n        if (b === null) return -1;\r\n        return a - b;\r\n      }\r\n      function uniqueSorted(list) {\r\n        var seen = {};\r\n        var out = [];\r\n        list.forEach(function (item) {\r\n          var key = String(item);\r\n          if (!seen[key]) { seen[key] = true; out.push(item); }\r\n        });\r\n        return out.sort(numericCompare);\r\n      }\r\n      function getDiameterOptions() { return uniqueSorted(canData.map(function (item) { return item.d; })); }\r\n      function getRowsForDiameter(d) { return canData.filter(function (item) { return item.d === Number(d); }).sort(function (a, b) { return a.h - b.h; }); }\r\n      function getHeightRange(d) {\r\n        var configured = heightRangeByDiameter[Number(d)];\r\n        if (configured) return { min: configured.min, max: configured.max };\r\n        var rows = getRowsForDiameter(d);\r\n        return { min: rows[0].h, max: rows[rows.length - 1].h };\r\n      }\r\n      function findNearestRow(diameter, heightValue) {\r\n        var rows = getRowsForDiameter(diameter);\r\n        var best = rows[0];\r\n        var bestDiff = Math.abs(rows[0].h - heightValue);\r\n        rows.forEach(function (row) {\r\n          var diff = Math.abs(row.h - heightValue);\r\n          if (diff < bestDiff) { best = row; bestDiff = diff; }\r\n        });\r\n        return best;\r\n      }\r\n      function getCurrentItem() {\r\n        var rawHeight = parseFloat($('accHeight').value);\r\n        if (isNaN(rawHeight)) rawHeight = state.heightInput;\r\n        var range = getHeightRange(state.diameter);\r\n        var clamped = Math.min(Math.max(rawHeight, range.min), range.max);\r\n        state.heightInput = clamped;\r\n        var matched = findNearestRow(state.diameter, clamped);\r\n        state.matchedHeight = matched.h;\r\n        return matched;\r\n      }\r\n\r\n      function interpolateMetric(diameter, height, key) {\r\n        var rows = getRowsForDiameter(diameter).filter(function (row) {\r\n          return row[key] !== null && typeof row[key] !== 'undefined';\r\n        }).sort(function (a, b) { return a.h - b.h; });\r\n        if (!rows.length) return null;\r\n        if (rows.length === 1) {\r\n          var reference = rows[0];\r\n          if (!reference.h) return Math.max(0, Math.round(reference[key]));\r\n          return Math.max(0, Math.round(reference[key] * (height \/ reference.h)));\r\n        }\r\n\r\n        function valueOnSegment(a, b) {\r\n          if (b.h === a.h) return a[key];\r\n          var ratio = (height - a.h) \/ (b.h - a.h);\r\n          return Math.max(0, Math.round(a[key] + (b[key] - a[key]) * ratio));\r\n        }\r\n\r\n        if (height <= rows[0].h) return valueOnSegment(rows[0], rows[1]);\r\n        if (height >= rows[rows.length - 1].h) return valueOnSegment(rows[rows.length - 2], rows[rows.length - 1]);\r\n\r\n        for (var i = 0; i < rows.length - 1; i += 1) {\r\n          var a = rows[i];\r\n          var b = rows[i + 1];\r\n          if (height >= a.h && height <= b.h) {\r\n            return valueOnSegment(a, b);\r\n          }\r\n        }\r\n        return Math.max(0, Math.round(rows[rows.length - 1][key]));\r\n      }\r\n\r\n      function getDynamicItem(referenceItem) {\r\n        var height = state.heightInput;\r\n        return {\r\n          no: referenceItem.no,\r\n          size: '\u03a6' + state.diameter + ' \u00d7 ' + formatNumber(height),\r\n          d: state.diameter,\r\n          h: height,\r\n          full: interpolateMetric(state.diameter, height, 'full'),\r\n          liquid: interpolateMetric(state.diameter, height, 'liquid'),\r\n          compressed: interpolateMetric(state.diameter, height, 'compressed'),\r\n          reference: referenceItem\r\n        };\r\n      }\r\n\r\n      function populateMainControls() {\r\n        var diameterSelect = $('accDiameter');\r\n        diameterSelect.innerHTML = '';\r\n        getDiameterOptions().forEach(function (value) {\r\n          var option = document.createElement('option');\r\n          option.value = value;\r\n          option.textContent = value;\r\n          diameterSelect.appendChild(option);\r\n        });\r\n        diameterSelect.value = String(DEFAULT_DIAMETER);\r\n        $('accMode').value = DEFAULT_MODE;\r\n        updateHeightRangeUI();\r\n        syncMouthControl();\r\n      }\r\n\r\n      function updateHeightRangeUI() {\r\n        var range = getHeightRange(state.diameter);\r\n        var heightInput = $('accHeight');\r\n        heightInput.min = range.min;\r\n        heightInput.max = range.max;\r\n        if (!heightInput.value) heightInput.value = state.heightInput;\r\n        if (Number(heightInput.value) < range.min) heightInput.value = range.min;\r\n        if (Number(heightInput.value) > range.max) heightInput.value = range.max;\r\n        $('accHeightRange').textContent = 'Range: ' + range.min + '\u2013' + range.max + ' mm';\r\n      }\r\n\r\n\r\n      function clampHeightToRange(value, showMessage) {\r\n        var range = getHeightRange(state.diameter);\r\n        if (isNaN(value)) return null;\r\n        var clamped = Math.min(Math.max(value, range.min), range.max);\r\n        if (Math.abs(clamped - value) > 0.001) {\r\n          state.heightInput = clamped;\r\n          $('accHeight').value = clamped;\r\n          if (showMessage) {\r\n            showWarning('For diameter ' + state.diameter + ' mm, height must be between ' + range.min + ' mm and ' + range.max + ' mm. The nearest valid value has been used.');\r\n          }\r\n          return clamped;\r\n        }\r\n        state.heightInput = value;\r\n        if (showMessage) hideWarning();\r\n        return value;\r\n      }\r\n\r\n      function validateHeight(showMessage) {\r\n        var input = parseFloat($('accHeight').value);\r\n        if (isNaN(input)) return true;\r\n        var clamped = clampHeightToRange(input, showMessage);\r\n        return clamped !== null && Math.abs(clamped - input) <= 0.001;\r\n      }\r\n\r\n      function renderCompatibleTable(item) {\r\n        var rows = getRowsForDiameter(state.diameter);\r\n        var tbody = $('accCompatibleRows');\r\n        tbody.innerHTML = '';\r\n        rows.forEach(function (row) {\r\n          var tr = document.createElement('tr');\r\n          var productUrl = getProductUrl(row);\r\n          tr.className = row.h === item.h ? 'is-active' : '';\r\n\r\n          var sizeTd = document.createElement('td');\r\n          if (productUrl) {\r\n            var link = document.createElement('a');\r\n            link.className = 'acc-size-link';\r\n            link.href = productUrl;\r\n            link.target = '_blank';\r\n            link.rel = 'nofollow noopener';\r\n            link.textContent = row.size;\r\n            link.title = 'View product page for ' + row.size;\r\n            link.addEventListener('click', function (event) {\r\n              event.stopPropagation();\r\n            });\r\n            sizeTd.appendChild(link);\r\n          } else {\r\n            sizeTd.textContent = row.size;\r\n          }\r\n\r\n          var fullTd = document.createElement('td');\r\n          fullTd.textContent = row.full;\r\n          var liquidTd = document.createElement('td');\r\n          liquidTd.textContent = row.liquid;\r\n          var compressedTd = document.createElement('td');\r\n          compressedTd.textContent = formatValue(row.compressed);\r\n\r\n          tr.appendChild(sizeTd);\r\n          tr.appendChild(fullTd);\r\n          tr.appendChild(liquidTd);\r\n          tr.appendChild(compressedTd);\r\n\r\n          tr.addEventListener('click', function () {\r\n            $('accHeight').value = row.h;\r\n            state.heightInput = row.h;\r\n            calculate();\r\n          });\r\n          tbody.appendChild(tr);\r\n        });\r\n        $('accTableTitle').textContent = 'Available sizes for \u03a6' + state.diameter + ' mm';\r\n        $('accTableCount').textContent = rows.length + ' sizes';\r\n      }\r\n\r\n      function displayModeValue(item) {\r\n        if (state.mode === 'Full Capacity') return item.full;\r\n        if (state.mode === 'Compressed Gas') return item.compressed;\r\n        return item.liquid;\r\n      }\r\n\r\n      function drawCan(item, fillRatio) {\r\n        var displayHeight = Math.max(item.h \/ DIAGRAM_SCALE, 1);\r\n        var displayDiameter = Math.max(item.d \/ DIAGRAM_SCALE, 1);\r\n        var mouthDiameter = state.mouth || getMouthOptionsForDiameter(item.d)[0];\r\n        var isWideMouth = isSameMouth(mouthDiameter, 25.4);\r\n\r\n        var bodyHalf = displayDiameter \/ 2;\r\n        var mouthHalf = isWideMouth ? Math.max(bodyHalf * 0.47, 6.6) : Math.max(bodyHalf * 0.34, 4.8);\r\n        mouthHalf = Math.min(mouthHalf, bodyHalf * 0.62);\r\n\r\n        var topSpace = 38;\r\n        var bottomSpace = 24;\r\n        var leftSpace = 36;\r\n        var rightSpace = 52;\r\n\r\n        var shoulderH = isWideMouth\r\n          ? Math.max(6.6, Math.min(bodyHalf * 0.98, 14.8))\r\n          : Math.max(8.4, Math.min(bodyHalf * 1.14, 17.4));\r\n        var domeH = Math.max(1.9, Math.min(bodyHalf * 0.24, 4.6));\r\n        var finishH = (isWideMouth\r\n          ? Math.max(4.6, Math.min(displayHeight * 0.045, 6.6))\r\n          : Math.max(4.9, Math.min(displayHeight * 0.05, 7.1))) * 0.5;\r\n        var rimPad = isWideMouth ? 1.9 : 1.25;\r\n        var rimH = (isWideMouth ? 2.9 : 2.5) * 0.5;\r\n\r\n        var viewW = leftSpace + displayDiameter + rightSpace;\r\n        var viewH = topSpace + displayHeight + bottomSpace;\r\n        var x = leftSpace + displayDiameter \/ 2;\r\n        var yTop = topSpace;\r\n        var yFinishTop = yTop - finishH;\r\n        var yBottom = yTop + displayHeight;\r\n        var yShoulderEnd = yTop + shoulderH;\r\n        var svg = $('accCanSvg');\r\n        svg.setAttribute('viewBox', '0 0 ' + viewW + ' ' + viewH);\r\n        svg.style.width = viewW + 'mm';\r\n        svg.style.height = viewH + 'mm';\r\n\r\n        var useShoulderTuck = !isWideMouth;\r\n        var shoulderRoundness = Math.max(0.70, Math.min(0.80, 0.70 + (bodyHalf - 9.5) * 0.012));\r\n        var shoulderBulge = isWideMouth\r\n          ? 0.28 + (shoulderRoundness - 0.70) * 0.70\r\n          : 0.34 + (shoulderRoundness - 0.70) * 0.75;\r\n        var shoulderLead = isWideMouth\r\n          ? 1.76 + (shoulderRoundness - 0.70) * 0.64\r\n          : 1.86 + (shoulderRoundness - 0.70) * 0.72;\r\n        var shoulderReach = Math.min(bodyHalf * 0.99, Math.max(mouthHalf * shoulderLead, mouthHalf + bodyHalf * shoulderBulge));\r\n        var leftShoulderCtrlX1 = x - shoulderReach;\r\n        var leftShoulderCtrlY1 = yTop + shoulderH * (isWideMouth ? 0.06 : 0.05);\r\n        var leftShoulderCtrlX2 = x - bodyHalf * 0.99;\r\n        var leftShoulderCtrlY2 = yTop + shoulderH * (isWideMouth ? 0.96 : 0.98);\r\n        var rightShoulderCtrlX1 = x + shoulderReach;\r\n        var rightShoulderCtrlY1 = leftShoulderCtrlY1;\r\n        var rightShoulderCtrlX2 = x + bodyHalf * 0.99;\r\n        var rightShoulderCtrlY2 = leftShoulderCtrlY2;\r\n\r\n        var fillPath;\r\n        var strokePath;\r\n        if (useShoulderTuck) {\r\n          var straightY = yTop + shoulderH * 0.22;\r\n          var leftBlendCtrlX1 = x - Math.min(bodyHalf * 0.72, mouthHalf + bodyHalf * 0.16);\r\n          var leftBlendCtrlY1 = yTop + shoulderH * 0.36;\r\n          var leftBlendCtrlX2 = x - bodyHalf * 0.995;\r\n          var leftBlendCtrlY2 = yTop + shoulderH * 0.74;\r\n          var rightBlendCtrlX1 = x + Math.min(bodyHalf * 0.72, mouthHalf + bodyHalf * 0.16);\r\n          var rightBlendCtrlY1 = leftBlendCtrlY1;\r\n          var rightBlendCtrlX2 = x + bodyHalf * 0.995;\r\n          var rightBlendCtrlY2 = leftBlendCtrlY2;\r\n\r\n          fillPath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'L', x - mouthHalf, straightY,\r\n            'C', leftBlendCtrlX1, leftBlendCtrlY1, leftBlendCtrlX2, leftBlendCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightBlendCtrlX2, rightBlendCtrlY2, rightBlendCtrlX1, rightBlendCtrlY1, x + mouthHalf, straightY,\r\n            'L', x + mouthHalf, yTop,\r\n            'Z'\r\n          ].join(' ');\r\n\r\n          strokePath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'L', x - mouthHalf, straightY,\r\n            'C', leftBlendCtrlX1, leftBlendCtrlY1, leftBlendCtrlX2, leftBlendCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightBlendCtrlX2, rightBlendCtrlY2, rightBlendCtrlX1, rightBlendCtrlY1, x + mouthHalf, straightY,\r\n            'L', x + mouthHalf, yTop\r\n          ].join(' ');\r\n        } else {\r\n          fillPath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'C', leftShoulderCtrlX1, leftShoulderCtrlY1, leftShoulderCtrlX2, leftShoulderCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightShoulderCtrlX2, rightShoulderCtrlY2, rightShoulderCtrlX1, rightShoulderCtrlY1, x + mouthHalf, yTop,\r\n            'Z'\r\n          ].join(' ');\r\n\r\n          strokePath = [\r\n            'M', x - mouthHalf, yTop,\r\n            'C', leftShoulderCtrlX1, leftShoulderCtrlY1, leftShoulderCtrlX2, leftShoulderCtrlY2, x - bodyHalf, yShoulderEnd,\r\n            'L', x - bodyHalf, yBottom - domeH,\r\n            'Q', x - bodyHalf, yBottom, x, yBottom,\r\n            'Q', x + bodyHalf, yBottom, x + bodyHalf, yBottom - domeH,\r\n            'L', x + bodyHalf, yShoulderEnd,\r\n            'C', rightShoulderCtrlX2, rightShoulderCtrlY2, rightShoulderCtrlX1, rightShoulderCtrlY1, x + mouthHalf, yTop\r\n          ].join(' ');\r\n        }\r\n\r\n        $('accCanFill').setAttribute('d', fillPath);\r\n        $('accCanStroke').setAttribute('d', strokePath);\r\n        $('accCanClipPath').setAttribute('d', fillPath);\r\n\r\n        var liquidY = yBottom - displayHeight * Math.max(0, Math.min(fillRatio, 0.98));\r\n        $('accLiquidRect').setAttribute('x', 0);\r\n        $('accLiquidRect').setAttribute('y', liquidY);\r\n        $('accLiquidRect').setAttribute('width', viewW);\r\n        $('accLiquidRect').setAttribute('height', yBottom - liquidY + 2);\r\n        setLine($('accLiquidLine'), x - bodyHalf + 1.2, liquidY, x + bodyHalf - 1.2, liquidY);\r\n\r\n        $('accCup').setAttribute('x', x);\r\n        $('accCup').setAttribute('y', yTop);\r\n        $('accCup').setAttribute('width', 0);\r\n        $('accCup').setAttribute('height', 0);\r\n        $('accCup').style.opacity = '0';\r\n\r\n        $('accValve').setAttribute('x', x - mouthHalf - rimPad);\r\n        $('accValve').setAttribute('y', yFinishTop);\r\n        $('accValve').setAttribute('width', mouthHalf * 2 + rimPad * 2);\r\n        $('accValve').setAttribute('height', finishH + rimH * 0.1);\r\n        $('accValve').setAttribute('rx', (finishH + rimH * 0.1) * 0.34);\r\n        $('accValve').style.opacity = '1';\r\n\r\n        setLine($('accStem'), x, yTop, x, yTop);\r\n        $('accStem').style.opacity = '0';\r\n\r\n        var mouthDimY = Math.max(6, yFinishTop - 10);\r\n        setLine($('accMouthLeftExt'), x - mouthHalf, yFinishTop + 0.8, x - mouthHalf, mouthDimY + 3.5);\r\n        setLine($('accMouthRightExt'), x + mouthHalf, yFinishTop + 0.8, x + mouthHalf, mouthDimY + 3.5);\r\n        setLine($('accMouthLine'), x - mouthHalf, mouthDimY, x + mouthHalf, mouthDimY);\r\n\r\n        var mouthText = $('accMouthText');\r\n        mouthText.textContent = '\u03a6' + getShortMouth(mouthDiameter) + ' Mouth';\r\n        mouthText.setAttribute('x', x);\r\n        mouthText.setAttribute('y', mouthDimY - 3.4);\r\n        mouthText.setAttribute('text-anchor', 'middle');\r\n\r\n        var mouthNote = $('accMouthNote');\r\n        mouthNote.textContent = '';\r\n        mouthNote.setAttribute('x', x);\r\n        mouthNote.setAttribute('y', mouthDimY - 3.4);\r\n        mouthNote.setAttribute('text-anchor', 'middle');\r\n\r\n        var canLabel = $('accCanLabel');\r\n        if (canLabel) {\r\n          var labelSize = Math.max(1.45, Math.min(2.15, bodyHalf * 0.16));\r\n          var labelWidth = Math.max(7.2, displayDiameter - 4.4);\r\n          canLabel.textContent = 'Ingredients';\r\n          canLabel.setAttribute('x', x);\r\n          canLabel.setAttribute('y', yBottom - Math.max(6.6, displayHeight * 0.105));\r\n          canLabel.setAttribute('text-anchor', 'middle');\r\n          canLabel.setAttribute('font-size', labelSize);\r\n          canLabel.setAttribute('textLength', labelWidth);\r\n          canLabel.setAttribute('lengthAdjust', 'spacingAndGlyphs');\r\n        }\r\n\r\n        var dimensionIds = [\r\n          'accHeightLine', 'accHeightTopTick', 'accHeightBottomTick', 'accHeightText',\r\n          'accDiameterLine', 'accDiameterLeftTick', 'accDiameterRightTick', 'accDiameterText'\r\n        ];\r\n        dimensionIds.forEach(function (id) {\r\n          var el = $(id);\r\n          if (el) el.style.display = 'block';\r\n        });\r\n\r\n        setLine($('accHeightLine'), x + bodyHalf + 8, yTop, x + bodyHalf + 8, yBottom);\r\n        setLine($('accHeightTopTick'), x + bodyHalf + 5, yTop, x + bodyHalf + 11, yTop);\r\n        setLine($('accHeightBottomTick'), x + bodyHalf + 5, yBottom, x + bodyHalf + 11, yBottom);\r\n        var heightText = $('accHeightText');\r\n        heightText.textContent = formatNumber(item.h) + ' mm';\r\n        heightText.setAttribute('x', x + bodyHalf + 15);\r\n        heightText.setAttribute('y', (yTop + yBottom) \/ 2);\r\n        heightText.setAttribute('transform', 'rotate(90 ' + (x + bodyHalf + 15) + ' ' + ((yTop + yBottom) \/ 2) + ')');\r\n        heightText.setAttribute('text-anchor', 'middle');\r\n\r\n        setLine($('accDiameterLine'), x - bodyHalf, yBottom + 6, x + bodyHalf, yBottom + 6);\r\n        setLine($('accDiameterLeftTick'), x - bodyHalf, yBottom + 3.5, x - bodyHalf, yBottom + 8.5);\r\n        setLine($('accDiameterRightTick'), x + bodyHalf, yBottom + 3.5, x + bodyHalf, yBottom + 8.5);\r\n        var diameterText = $('accDiameterText');\r\n        diameterText.textContent = '\u00d8' + formatNumber(item.d) + ' mm';\r\n        diameterText.setAttribute('x', x);\r\n        diameterText.setAttribute('y', yBottom + 14);\r\n        diameterText.setAttribute('text-anchor', 'middle');\r\n        diameterText.removeAttribute('transform');\r\n\r\n        $('accFillText').textContent = '';\r\n      }\r\n\r\n      function calculate() {\r\n        validateHeight(false);\r\n        var referenceItem = getCurrentItem();\r\n        var item = getDynamicItem(referenceItem);\r\n        var range = getHeightRange(state.diameter);\r\n        $('accHeight').value = state.heightInput;\r\n        if (state.heightInput < range.min) $('accHeight').value = range.min;\r\n        if (state.heightInput > range.max) $('accHeight').value = range.max;\r\n\r\n        $('accFullMl').textContent = formatNumber(item.full) + ' ml';\r\n        $('accFullUsOz').textContent = formatUsOz(item.full);\r\n        $('accFullUkOz').textContent = formatUkOz(item.full);\r\n        $('accLiquidMl').textContent = formatNumber(item.liquid) + ' ml';\r\n        $('accLiquidUsOz').textContent = formatUsOz(item.liquid);\r\n        $('accLiquidUkOz').textContent = formatUkOz(item.liquid);\r\n        $('accCompressedMl').textContent = item.compressed === null ? '\u2014' : formatNumber(item.compressed) + ' ml';\r\n        $('accCompressedUsOz').textContent = formatUsOz(item.compressed);\r\n        $('accCompressedUkOz').textContent = formatUkOz(item.compressed);\r\n\r\n        $('accStatusSize').textContent = item.size;\r\n        $('accStatusMouth').textContent = getShortMouth(state.mouth);\r\n        if ($('accStatusMode')) $('accStatusMode').textContent = state.mode;\r\n\r\n        var modeValue = displayModeValue(item);\r\n        var fillRatio = modeValue ? modeValue \/ item.full : item.liquid \/ item.full;\r\n        $('accStatusRatio').textContent = Math.round(fillRatio * 100) + '%';\r\n\r\n        renderProductLink(referenceItem, item);\r\n\r\n        if (state.mode === 'Compressed Gas' && item.compressed === null) {\r\n          showWarning('Compressed Gas capacity is not defined for ' + item.size + '. The preview is using the Liquid Gas fill level instead.');\r\n          fillRatio = item.liquid \/ item.full;\r\n        }\r\n\r\n        renderCompatibleTable(referenceItem);\r\n        drawCan(item, fillRatio);\r\n      }\r\n\r\n      function populateSelect(select, values, currentValue, formatter, allowDash) {\r\n        select.innerHTML = '';\r\n        if (!values.length && allowDash) {\r\n          var dashOption = document.createElement('option');\r\n          dashOption.value = '__dash__';\r\n          dashOption.textContent = '\u2014';\r\n          select.appendChild(dashOption);\r\n          select.value = '__dash__';\r\n          return null;\r\n        }\r\n        values.forEach(function (value) {\r\n          var option = document.createElement('option');\r\n          option.value = value === null ? '__dash__' : String(value);\r\n          option.textContent = formatter ? formatter(value) : String(value);\r\n          select.appendChild(option);\r\n        });\r\n        var chosen = values.indexOf(currentValue) >= 0 ? currentValue : values[0];\r\n        select.value = chosen === null ? '__dash__' : String(chosen);\r\n        return chosen;\r\n      }\r\n\r\n      function filterRows(excludeKey) {\r\n        return canData.filter(function (item) {\r\n          if (excludeKey !== 'diameter' && filterState.diameter !== null && item.d !== filterState.diameter) return false;\r\n          if (excludeKey !== 'height' && filterState.height !== null && item.h !== filterState.height) return false;\r\n          if (excludeKey !== 'liquid' && filterState.liquid !== null && item.liquid !== filterState.liquid) return false;\r\n          if (excludeKey !== 'compressed' && filterState.compressed !== undefined && filterState.compressed !== null && item.compressed !== filterState.compressed) return false;\r\n          if (excludeKey !== 'compressed' && filterState.compressed === null && $('accFilterCompressed').dataset.hasDash === 'true') {\r\n            if (item.compressed !== null) return false;\r\n          }\r\n          if (excludeKey !== 'full' && filterState.full !== null && item.full !== filterState.full) return false;\r\n          return true;\r\n        });\r\n      }\r\n\r\n      function updateFilterControls(changedKey) {\r\n        var diameterOptions = uniqueSorted(filterRows('diameter').map(function (item) { return item.d; }));\r\n        filterState.diameter = populateSelect($('accFilterDiameter'), diameterOptions, filterState.diameter, function (v) { return v + ' mm'; }, false);\r\n\r\n        var heightOptions = uniqueSorted(filterRows('height').map(function (item) { return item.h; }));\r\n        filterState.height = populateSelect($('accFilterHeight'), heightOptions, filterState.height, function (v) { return v + ' mm'; }, false);\r\n\r\n        var liquidOptions = uniqueSorted(filterRows('liquid').map(function (item) { return item.liquid; }));\r\n        filterState.liquid = populateSelect($('accFilterLiquid'), liquidOptions, filterState.liquid, function (v) { return v + ' ml'; }, false);\r\n\r\n        var compressedRows = filterRows('compressed');\r\n        var compressedOptions = uniqueSorted(compressedRows.map(function (item) { return item.compressed; }));\r\n        var compressedSelect = $('accFilterCompressed');\r\n        compressedSelect.dataset.hasDash = compressedOptions.indexOf(null) >= 0 ? 'true' : 'false';\r\n        filterState.compressed = populateSelect(compressedSelect, compressedOptions, filterState.compressed, function (v) { return v === null ? '\u2014' : v + ' ml'; }, true);\r\n\r\n        var fullOptions = uniqueSorted(filterRows('full').map(function (item) { return item.full; }));\r\n        filterState.full = populateSelect($('accFilterFull'), fullOptions, filterState.full, function (v) { return v + ' ml'; }, false);\r\n\r\n        renderFilterResults();\r\n      }\r\n\r\n      function getFilteredResultRows() {\r\n        return canData.filter(function (item) {\r\n          if (filterState.diameter !== null && item.d !== filterState.diameter) return false;\r\n          if (filterState.height !== null && item.h !== filterState.height) return false;\r\n          if (filterState.liquid !== null && item.liquid !== filterState.liquid) return false;\r\n          var compressedSelect = $('accFilterCompressed');\r\n          if (filterState.compressed === null && compressedSelect.dataset.hasDash === 'true') {\r\n            if (item.compressed !== null) return false;\r\n          } else if (filterState.compressed !== null && item.compressed !== filterState.compressed) {\r\n            return false;\r\n          }\r\n          if (filterState.full !== null && item.full !== filterState.full) return false;\r\n          return true;\r\n        });\r\n      }\r\n\r\n      function renderFilterResults() {\r\n        var rows = getFilteredResultRows();\r\n        var tbody = $('accFilterResults');\r\n        var empty = $('accFilterEmpty');\r\n        tbody.innerHTML = '';\r\n        if (!rows.length) {\r\n          empty.style.display = 'block';\r\n          return;\r\n        }\r\n        empty.style.display = 'none';\r\n        rows.forEach(function (item, index) {\r\n          var tr = document.createElement('tr');\r\n          if (index === 0) tr.className = 'is-highlight';\r\n          tr.innerHTML = '<td>' + item.size + '<\/td>' +\r\n            '<td>' + item.d + ' mm<\/td>' +\r\n            '<td>' + item.h + ' mm<\/td>' +\r\n            '<td>' + item.liquid + ' ml<\/td>' +\r\n            '<td>' + formatValue(item.compressed) + (item.compressed === null ? '' : ' ml') + '<\/td>' +\r\n            '<td style=\"text-align:right;\">' + item.full + ' ml<\/td>';\r\n          tr.addEventListener('click', function () {\r\n            state.diameter = item.d;\r\n            state.heightInput = item.h;\r\n            $('accDiameter').value = String(item.d);\r\n            updateHeightRangeUI();\r\n            syncMouthControl();\r\n            $('accHeight').value = item.h;\r\n            $('accMode').value = item.compressed !== null ? 'Compressed Gas' : 'Liquid Gas';\r\n            state.mode = $('accMode').value;\r\n            calculate();\r\n          });\r\n          tbody.appendChild(tr);\r\n        });\r\n      }\r\n\r\n      function initFilterRow() {\r\n        updateFilterControls();\r\n        ['Diameter', 'Height', 'Liquid', 'Compressed', 'Full'].forEach(function (key) {\r\n          var id = 'accFilter' + key;\r\n          $(id).addEventListener('change', function () {\r\n            var value = this.value;\r\n            var normalized;\r\n            if (value === '__dash__') {\r\n              normalized = null;\r\n            } else {\r\n              normalized = Number(value);\r\n            }\r\n            filterState[key.toLowerCase()] = normalized;\r\n            updateFilterControls(key.toLowerCase());\r\n          });\r\n        });\r\n      }\r\n\r\n      function markActionSelected(button) {\r\n        root.querySelectorAll('.acc-action-row button').forEach(function (item) {\r\n          item.classList.remove('is-selected');\r\n          item.classList.remove('acc-is-selected');\r\n          item.classList.remove('acc-button-selected');\r\n          item.setAttribute('aria-pressed', 'false');\r\n          item.style.setProperty('color', '#082a5e', 'important');\r\n          item.style.setProperty('-webkit-text-fill-color', '#082a5e', 'important');\r\n          item.style.setProperty('background', 'transparent', 'important');\r\n          item.style.setProperty('background-color', 'transparent', 'important');\r\n          item.style.setProperty('background-image', 'none', 'important');\r\n          item.style.setProperty('border-color', 'var(--sp-line)', 'important');\r\n          item.style.removeProperty('box-shadow');\r\n          item.style.removeProperty('transform');\r\n        });\r\n        if (button) {\r\n          button.classList.add('is-selected');\r\n          button.classList.add('acc-is-selected');\r\n          button.classList.add('acc-button-selected');\r\n          button.setAttribute('aria-pressed', 'true');\r\n          button.style.setProperty('color', '#082a5e', 'important');\r\n          button.style.setProperty('-webkit-text-fill-color', '#082a5e', 'important');\r\n          button.style.setProperty('background', 'transparent', 'important');\r\n          button.style.setProperty('background-color', 'transparent', 'important');\r\n          button.style.setProperty('background-image', 'none', 'important');\r\n          button.style.setProperty('border-color', 'var(--sp-line)', 'important');\r\n          button.style.removeProperty('box-shadow');\r\n          button.style.removeProperty('transform');\r\n        }\r\n      }\r\n\r\n      function copyText(text, successMessage) {\r\n        if (navigator.clipboard && navigator.clipboard.writeText) {\r\n          navigator.clipboard.writeText(text).then(function () { showToast(successMessage); }).catch(function () { showToast('Copy failed'); });\r\n        } else {\r\n          showToast('Copy not supported');\r\n        }\r\n      }\r\n\r\n      function copyResult() {\r\n        var referenceItem = getCurrentItem();\r\n        var item = getDynamicItem(referenceItem);\r\n        var text = 'Aerosol Can Capacity Result\\n' +\r\n          'Size: ' + item.size + '\\n' +\r\n          'Diameter: ' + item.d + ' mm\\n' +\r\n          'Mouth Diameter: ' + formatMouth(state.mouth) + '\\n' +\r\n          'Input Height: ' + formatNumber(state.heightInput) + ' mm\\n' +\r\n          'Reference Standard Size: ' + referenceItem.size + '\\n' +\r\n          'Full Capacity: ' + formatNumber(item.full) + ' mL \/ ' + formatUsOz(item.full) + ' US fl oz \/ ' + formatUkOz(item.full) + ' UK fl oz\\n' +\r\n          'Liquid Gas: ' + formatNumber(item.liquid) + ' mL \/ ' + formatUsOz(item.liquid) + ' US fl oz \/ ' + formatUkOz(item.liquid) + ' UK fl oz\\n' +\r\n          'Compressed Gas: ' + (item.compressed === null ? '\u2014' : formatNumber(item.compressed)) + ' mL \/ ' + formatUsOz(item.compressed) + ' US fl oz \/ ' + formatUkOz(item.compressed) + ' UK fl oz';\r\n        copyText(text, 'Result copied');\r\n      }\r\n\r\n      function copySizeTable() {\r\n        var header = 'No\\tSize (mm)\\tDiameter (mm)\\tHeight (mm)\\tFull Capacity (mL)\\tLiquid Gas (mL)\\tCompressed Gas (mL)';\r\n        var lines = canData.map(function (item) {\r\n          return [item.no, item.size, item.d, item.h, item.full, item.liquid, formatValue(item.compressed)].join('\\t');\r\n        });\r\n        copyText([header].concat(lines).join('\\n'), 'Size table copied');\r\n      }\r\n\r\n      function resetExample() {\r\n        state.diameter = DEFAULT_DIAMETER;\r\n        state.heightInput = DEFAULT_HEIGHT;\r\n        state.mode = DEFAULT_MODE;\r\n        state.mouth = DEFAULT_MOUTH;\r\n        $('accDiameter').value = String(DEFAULT_DIAMETER);\r\n        updateHeightRangeUI();\r\n        syncMouthControl();\r\n        $('accHeight').value = DEFAULT_HEIGHT;\r\n        $('accMode').value = DEFAULT_MODE;\r\n        calculate();\r\n      }\r\n\r\n      $('accDiameter').addEventListener('change', function () {\r\n        state.diameter = Number(this.value);\r\n        updateHeightRangeUI();\r\n        syncMouthControl();\r\n        validateHeight(true);\r\n        calculate();\r\n      });\r\n\r\n      $('accMouth').addEventListener('change', function () {\r\n        state.mouth = Number(this.value);\r\n        calculate();\r\n      });\r\n\r\n      $('accHeight').addEventListener('input', function () {\r\n        var raw = String(this.value).trim();\r\n        if (raw === '' || raw === '-' || raw === '.' || raw === '-.') return;\r\n        var value = parseFloat(raw);\r\n        if (isNaN(value)) return;\r\n\r\n        var range = getHeightRange(state.diameter);\r\n        var maxDigits = String(Math.floor(range.max)).length;\r\n        var numericChars = raw.replace(\/[^0-9]\/g, '');\r\n\r\n        \/*\r\n          Let users finish typing short intermediate values such as \"2\" -> \"20\" -> \"205\".\r\n          Once the entered number has enough digits for this diameter range, clamp immediately\r\n          if it is outside the allowed min\/max range.\r\n        *\/\r\n        if (value < range.min && numericChars.length < maxDigits) {\r\n          state.heightInput = value;\r\n          hideWarning();\r\n          return;\r\n        }\r\n\r\n        var clamped = clampHeightToRange(value, true);\r\n        if (clamped === null) return;\r\n        calculate();\r\n      });\r\n\r\n      $('accHeight').addEventListener('blur', function () {\r\n        var range = getHeightRange(state.diameter);\r\n        var value = parseFloat(this.value);\r\n        if (isNaN(value)) value = range.min;\r\n        clampHeightToRange(value, true);\r\n        calculate();\r\n      });\r\n\r\n      $('accMode').addEventListener('change', function () {\r\n        state.mode = this.value;\r\n        calculate();\r\n      });\r\n      function bindActionButton(id, handler) {\r\n        var button = $(id);\r\n        ['pointerdown', 'mousedown', 'touchstart', 'focus'].forEach(function (eventName) {\r\n          button.addEventListener(eventName, function () { markActionSelected(button); }, true);\r\n        });\r\n        button.addEventListener('click', function () {\r\n          markActionSelected(button);\r\n          handler();\r\n          requestAnimationFrame(function () { markActionSelected(button); });\r\n          setTimeout(function () { markActionSelected(button); }, 0);\r\n          setTimeout(function () { markActionSelected(button); }, 80);\r\n        });\r\n      }\r\n\r\n      bindActionButton('accCopy', copyResult);\r\n      bindActionButton('accReset', resetExample);\r\n      bindActionButton('accCopyTable', copySizeTable);\r\n\r\n      populateMainControls();\r\n      resetExample();\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \/ \u0426\u0435\u043d\u0442\u0440 \u0443\u043f\u0430\u043a\u043e\u0432\u043e\u0447\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0430\u044d\u0440\u043e\u0437\u043e\u043b\u044c\u043d\u044b\u0445 \u0431\u0430\u043b\u043b\u043e\u043d\u0447\u0438\u043a\u043e\u0432 \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0430\u043b\u044e\u043c\u0438\u043d\u0438\u0435\u0432\u044b\u0445 \u0430\u044d\u0440\u043e\u0437\u043e\u043b\u044c\u043d\u044b\u0445 \u0431\u0430\u043b\u043b\u043e\u043d\u0447\u0438\u043a\u043e\u0432 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0430\u043b\u044e\u043c\u0438\u043d\u0438\u0435\u0432\u044b\u0445 \u0430\u044d\u0440\u043e\u0437\u043e\u043b\u044c\u043d\u044b\u0445 \u0431\u0430\u043b\u043b\u043e\u043d\u0447\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043e \u043a\u0440\u0430\u0435\u0432, \u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u0436\u0438\u0436\u0435\u043d\u043d\u044b\u043c \u0433\u0430\u0437\u043e\u043c \u0438 \u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u0436\u0430\u0442\u044b\u043c \u0433\u0430\u0437\u043e\u043c. \u0412\u044b\u0441\u043e\u0442\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u043d\u0438\u0436\u0435. \u0412\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b [\u2026]<\/p>","protected":false},"author":1,"featured_media":0,"parent":48526,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-48470","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.cnshining.com\/ru\/wp-json\/wp\/v2\/pages\/48470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cnshining.com\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cnshining.com\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/ru\/wp-json\/wp\/v2\/comments?post=48470"}],"version-history":[{"count":24,"href":"https:\/\/www.cnshining.com\/ru\/wp-json\/wp\/v2\/pages\/48470\/revisions"}],"predecessor-version":[{"id":48610,"href":"https:\/\/www.cnshining.com\/ru\/wp-json\/wp\/v2\/pages\/48470\/revisions\/48610"}],"up":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/ru\/wp-json\/wp\/v2\/pages\/48526"}],"wp:attachment":[{"href":"https:\/\/www.cnshining.com\/ru\/wp-json\/wp\/v2\/media?parent=48470"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}