{"title":"Manual Shades","description":null,"products":[{"product_id":"smartwave-manual-drapery","title":"SmartWave Manual Drapery","description":"\u003cdiv id=\"sw-width-calculator\" style=\"max-width: 1200px; margin: 0 auto; padding: 18px;\"\u003e\n  \u003cstyle\u003e\n    \/* Card UI - scoped to this component *\/\n    #sw-width-calculator .sw-card{\n      border-radius: 16px;\n      background: #fff;\n      border: 1px solid rgba(0,0,0,.08);\n      box-shadow: 0 10px 30px rgba(0,0,0,.06);\n      padding: 18px;\n    }\n    #sw-width-calculator .sw-header{\n      display:flex;\n      align-items:flex-start;\n      justify-content:space-between;\n      gap: 12px;\n      margin-bottom: 14px;\n    }\n    #sw-width-calculator .sw-title{\n      margin:0;\n      font-size: 25px;\n      line-height: 1.2;\n      letter-spacing: -0.2px;\n    }\n    #sw-width-calculator .sw-sub{\n      margin-top: 6px;\n      margin-bottom: 0;\n      font-size: 16px;\n      opacity: .7;\n    }\n    #sw-width-calculator .sw-grid{\n      display:grid;\n      grid-template-columns: 1fr;\n      gap: 14px;\n    }\n    @media (min-width: 760px){\n      #sw-width-calculator .sw-grid{\n        grid-template-columns: 1.2fr 0.8fr;\n        align-items: stretch;\n      }\n    }\n    #sw-width-calculator .sw-field{\n      border-radius: 14px;\n      border: 1px solid rgba(0,0,0,.10);\n      padding: 14px;\n      background: rgba(0,0,0,.02);\n    }\n    #sw-width-calculator label{\n      display:block;\n      font-weight: 600;\n      font-size: 16px;\n      margin-bottom: 8px;\n    }\n    #sw-width-calculator .sw-input{\n      width: 100%;\n      max-width: 360px;\n      padding: 12px 12px;\n      border-radius: 12px;\n      border: 1px solid rgba(0,0,0,.20);\n      background: #fff;\n      font-size: 16px;\n      outline: none;\n      transition: box-shadow .15s ease, border-color .15s ease;\n    }\n    #sw-width-calculator .sw-input:focus{\n      border-color: rgba(71,157,204,.55);\n      box-shadow: 0 0 0 4px rgba(71,157,204,.15);\n    }\n    #sw-width-calculator .sw-hint{\n      margin: 10px 0 0;\n      font-size: 13px;\n      opacity: .65;\n    }\n    #sw-width-calculator .sw-result{\n      border-radius: 14px;\n      border: 1px solid rgba(71,157,204,.25);\n      background: rgba(71,157,204,.06);\n      padding: 14px;\n      display:flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 6px;\n      min-height: 118px;\n    }\n    #sw-width-calculator .sw-result-label{\n      font-size: 16px;\n      font-weight: 600;\n      opacity: .85;\n    }\n    #sw-width-calculator .sw-result-value{\n      font-weight: 800;\n      color: #479dcc;\n      font-size: 25px;\n      line-height: 1.05;\n      letter-spacing: -0.6px;\n    }\n    #sw-width-calculator .sw-result-unit{\n      font-size: 13px;\n      opacity: .7;\n      margin-left: 6px;\n      font-weight: 600;\n    }\n    #sw-width-calculator .sw-empty{\n      opacity: .5;\n      font-weight: 700;\n    }\n\n    \/* Added info section styles *\/\n    #sw-width-calculator .sw-info{\n      margin-top: 16px;\n      border-top: 1px solid rgba(0,0,0,.08);\n      padding-top: 14px;\n    }\n    #sw-width-calculator .sw-info h3{\n      margin: 0 0 8px;\n      font-size: 18px;\n      line-height: 1.25;\n      letter-spacing: -0.1px;\n    }\n    #sw-width-calculator .sw-info p{\n      margin: 8px 0;\n      font-size: 15px;\n      line-height: 1.55;\n      opacity: .85;\n    }\n    #sw-width-calculator .sw-examples{\n      margin-top: 12px;\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 12px;\n    }\n    @media (min-width: 760px){\n      #sw-width-calculator .sw-examples{\n        grid-template-columns: 1fr 1fr;\n      }\n    }\n    #sw-width-calculator .sw-example-card{\n      border-radius: 14px;\n      border: 1px solid rgba(0,0,0,.10);\n      background: rgba(0,0,0,.02);\n      padding: 14px;\n    }\n    #sw-width-calculator .sw-example-title{\n      margin: 0 0 10px;\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 1.25;\n    }\n    #sw-width-calculator .sw-kv{\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n    #sw-width-calculator .sw-kv li{\n      display:flex;\n      justify-content: space-between;\n      gap: 12px;\n      padding: 6px 0;\n      border-top: 1px solid rgba(0,0,0,.06);\n      font-size: 14px;\n      line-height: 1.4;\n    }\n    #sw-width-calculator .sw-kv li:first-child{\n      border-top: none;\n      padding-top: 0;\n    }\n    #sw-width-calculator .sw-k{\n      opacity: .75;\n      font-weight: 600;\n    }\n    #sw-width-calculator .sw-v{\n      font-weight: 700;\n      text-align: right;\n      white-space: nowrap;\n    }\n    #sw-width-calculator .sw-note{\n      margin-top: 10px;\n      font-size: 14px;\n      line-height: 1.5;\n      opacity: .85;\n    }\n  \u003c\/style\u003e\n\n  \u003cdiv class=\"sw-card\"\u003e\n    \u003cdiv class=\"sw-header\"\u003e\n      \u003cdiv\u003e\n        \u003ch2 class=\"sw-title\"\u003eEnsure Full Window Visibility When Opened\u003c\/h2\u003e\n        \u003cp class=\"sw-sub\"\u003eIf you want the window fully visible when the drapes are open, enter your window width below to get a recommended order width.\u003c\/p\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"sw-grid\"\u003e\n      \u003cdiv class=\"sw-field\"\u003e\n        \u003clabel for=\"sw_w_in\"\u003eWindow Width (inches)\u003c\/label\u003e\n        \u003cinput id=\"sw_w_in\" class=\"sw-input\" type=\"number\" inputmode=\"decimal\" min=\"1\" step=\"0.01\" placeholder=\"e.g., 60.25\"\u003e\n        \u003cp class=\"sw-hint\"\u003eTip: You can enter decimals (e.g., 60.25).\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"sw-result\" aria-live=\"polite\"\u003e\n        \u003cdiv class=\"sw-result-label\"\u003eMinimum Recommended Order Width\u003c\/div\u003e\n        \u003cdiv\u003e\n          \u003cspan id=\"sw_order\" class=\"sw-result-value sw-empty\"\u003e—\u003c\/span\u003e\n          \u003cspan class=\"sw-result-unit\"\u003ein\u003c\/span\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Added Content --\u003e\n    \u003cdiv class=\"sw-info\"\u003e\n      \u003ch3\u003eMinimum Recommended Order Width (for full window clearance when opened)\u003c\/h3\u003e\n      \u003cp\u003e\n        The calculated width is the minimum recommended order width to keep the window fully visible when the drapes are open.\n      \u003c\/p\u003e\n      \u003cp\u003e\n        If you order below this width, the side fabric stacks may cover the window edges.\n      \u003c\/p\u003e\n      \u003cp\u003e\n        You can also adjust the order width based on your wall space and design preference.\n      \u003c\/p\u003e\n\n      \u003cdiv class=\"sw-examples\"\u003e\n        \u003cdiv class=\"sw-example-card\"\u003e\n          \u003cdiv class=\"sw-example-title\"\u003eExample 1 (Order based on space and design preference)\u003c\/div\u003e\n          \u003cul class=\"sw-kv\"\u003e\n            \u003cli\u003e\n\u003cspan class=\"sw-k\"\u003eTotal wall width\u003c\/span\u003e\u003cspan class=\"sw-v\"\u003e200\"\u003c\/span\u003e\n\u003c\/li\u003e\n            \u003cli\u003e\n\u003cspan class=\"sw-k\"\u003eWindow width\u003c\/span\u003e\u003cspan class=\"sw-v\"\u003e140\"\u003c\/span\u003e\n\u003c\/li\u003e\n            \u003cli\u003e\n\u003cspan class=\"sw-k\"\u003eMinimum recommended order width\u003c\/span\u003e\u003cspan class=\"sw-v\"\u003e184 1\/8\"\u003c\/span\u003e\n\u003c\/li\u003e\n          \u003c\/ul\u003e\n          \u003cdiv class=\"sw-note\"\u003e\n            You can order the minimum recommended width of \u003cb\u003e184 1\/8\"\u003c\/b\u003e for full window clearance when opened.\n            If you prefer a cleaner, seamless look by covering the entire wall, you may also order \u003cb\u003e200\"\u003c\/b\u003e instead.\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"sw-example-card\"\u003e\n          \u003cdiv class=\"sw-example-title\"\u003eExample 2 (Wall width limits full clearance)\u003c\/div\u003e\n          \u003cul class=\"sw-kv\"\u003e\n            \u003cli\u003e\n\u003cspan class=\"sw-k\"\u003eTotal wall width\u003c\/span\u003e\u003cspan class=\"sw-v\"\u003e200\"\u003c\/span\u003e\n\u003c\/li\u003e\n            \u003cli\u003e\n\u003cspan class=\"sw-k\"\u003eWindow width\u003c\/span\u003e\u003cspan class=\"sw-v\"\u003e170\"\u003c\/span\u003e\n\u003c\/li\u003e\n            \u003cli\u003e\n\u003cspan class=\"sw-k\"\u003eMinimum recommended order width\u003c\/span\u003e\u003cspan class=\"sw-v\"\u003e217 1\/4\"\u003c\/span\u003e\n\u003c\/li\u003e\n          \u003c\/ul\u003e\n          \u003cdiv class=\"sw-note\"\u003e\n            Since your wall width is \u003cb\u003e200\"\u003c\/b\u003e, the maximum you can order is \u003cb\u003e200\"\u003c\/b\u003e.\n            In this case, about \u003cb\u003e9\"\u003c\/b\u003e on each side of the window opening may remain partially covered when the drapes are fully open.\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003c!-- \/Added Content --\u003e\n\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n(function () {\n  \/\/ ====== Constants (cm) used internally ======\n  var FIXED_STACK_CM   = 62;\n  var CARRIER_BLOCK_CM = 40;\n  var PITCH_CM         = 13.6;\n  var PER_CARRIER_CM   = 1.6;\n  var EXTRA_CM         = 10;\n  var N_MIN = 1;\n\n  function safeNumber(v) {\n    var n = Number(v);\n    return Number.isFinite(n) ? n : null;\n  }\n\n  function roundToNearestEighth(inches) {\n    return Math.round(inches * 8) \/ 8;\n  }\n\n  function toEighthFraction(inches) {\n    var sign = inches \u003c 0 ? \"-\" : \"\";\n    inches = Math.abs(inches);\n\n    var whole = Math.floor(inches + 1e-9);\n    var eighths = Math.round((inches - whole) * 8);\n\n    if (eighths === 8) { whole += 1; eighths = 0; }\n\n    var map = [\"\", \"1\/8\", \"1\/4\", \"3\/8\", \"1\/2\", \"5\/8\", \"3\/4\", \"7\/8\"];\n    var frac = map[eighths] || \"\";\n\n    if (!frac) return sign + String(whole);\n    if (whole === 0) return sign + frac;\n    return sign + whole + \" \" + frac;\n  }\n\n  function calc(W_in) {\n    \/\/ Convert inches to cm for original formula\n    var W_cm = W_in * 2.54;\n\n    \/\/ N = ceil((Wcm − 40)\/13.6 + 1)\n    var rawN = (W_cm - CARRIER_BLOCK_CM) \/ PITCH_CM + 1;\n    var N = Math.ceil(rawN);\n    if (N \u003c N_MIN) N = N_MIN;\n\n    \/\/ Ordercm = Wcm + 62 + N×1.6 + 10\n    var order_cm = W_cm + FIXED_STACK_CM + (N * PER_CARRIER_CM) + EXTRA_CM;\n\n    \/\/ Convert to inches and round to nearest 1\/8\"\n    var order_in = order_cm \/ 2.54;\n    var order_rounded = roundToNearestEighth(order_in);\n\n    return { order_rounded: order_rounded };\n  }\n\n  var input = document.getElementById('sw_w_in');\n  var out = document.getElementById('sw_order');\n  if (!input || !out) return;\n\n  function renderEmpty() {\n    out.textContent = \"—\";\n    out.classList.add('sw-empty');\n  }\n\n  function renderValue(text) {\n    out.textContent = text;\n    out.classList.remove('sw-empty');\n  }\n\n  function update() {\n    var W = safeNumber(input.value);\n    if (W === null || W \u003c= 0) { renderEmpty(); return; }\n\n    var r = calc(W);\n    renderValue(toEighthFraction(r.order_rounded));\n  }\n\n  input.addEventListener('input', update);\n  input.addEventListener('change', update);\n  update();\n})();\n\u003c\/script\u003e","brand":"SmartWave Shades","offers":[{"title":"Default Title","offer_id":50826771824887,"sku":"SWDM02","price":229.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/3312\/8439\/files\/Main_ManualDrapery-2.jpg?v=1780476270"}],"url":"https:\/\/www.smartwaveshades.com\/collections\/manual-shades.oembed","provider":"SmartWave Shades","version":"1.0","type":"link"}