{"id":1167,"date":"2026-05-28T16:25:06","date_gmt":"2026-05-28T16:25:06","guid":{"rendered":"https:\/\/baffhand.com\/?page_id=1167"},"modified":"2026-05-28T19:00:18","modified_gmt":"2026-05-28T19:00:18","slug":"customize-beanie","status":"publish","type":"page","link":"https:\/\/baffhand.com\/?page_id=1167","title":{"rendered":"Customize Beanie"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1167\" class=\"elementor elementor-1167\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9479fa8 e-flex e-con-boxed e-con e-parent\" data-id=\"9479fa8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e6b082b e-con-full e-flex e-con e-child\" data-id=\"e6b082b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c097a2 elementor-widget elementor-widget-tahefobu-site-logo\" data-id=\"3c097a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tahefobu-site-logo.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"tahefobu-site-logo-wrapper\">\r\n            <div class=\"tahefobu-site-logo\">\r\n                                    <a href=\"https:\/\/baffhand.com\/\">\r\n                      <img decoding=\"async\" src=\"https:\/\/baffhand.com\/wp-content\/uploads\/2025\/01\/BAFF-HAND-1.webp\" alt=\"BAFF HAND\" \/>                    <\/a>\r\n                            <\/div>\r\n        <\/div>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5301f40 e-con-full e-flex e-con e-child\" data-id=\"5301f40\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5cec351 tahefobu-main-menu-align-center tahefobu-main-menu-align--tabletleft tahefobu-main-menu-align--mobileleft tahefobu-sub-icon-caret-down tahefobu-nav-menu-bp-mobile tahefobu-mobile-menu-full-width tahefobu-mobile-menu-item-align-center tahefobu-mobile-toggle-v1 tahefobu-sub-divider-yes tahefobu-mobile-divider-yes elementor-widget elementor-widget-tahefobu-navigation-menu\" data-id=\"5cec351\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tahefobu-navigation-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav class=\"tahefobu-nav-menu-container tahefobu-nav-menu-horizontal\" data-trigger=\"hover\"><ul id=\"menu-1-5cec351\" class=\"tahefobu-nav-menu\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-1152\"><a href=\"https:\/\/baffhand.com\/\" class=\"tahefobu-menu-item tahefobu-pointer-item\">Home<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-180\"><a href=\"https:\/\/baffhand.com\/?page_id=5\" class=\"tahefobu-menu-item tahefobu-pointer-item\">Shop<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1232\"><a href=\"https:\/\/baffhand.com\/?page_id=1167\" class=\"tahefobu-menu-item tahefobu-pointer-item\">Customize<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-338\"><a href=\"https:\/\/baffhand.com\/?page_id=335\" class=\"tahefobu-menu-item tahefobu-pointer-item\">Rugs<\/a><\/li>\n<\/ul><\/nav><nav class=\"tahefobu-mobile-nav-menu-container\"><div class=\"tahefobu-mobile-toggle-wrap\"><div class=\"tahefobu-mobile-toggle\"><span class=\"tahefobu-mobile-toggle-line\"><\/span><span class=\"tahefobu-mobile-toggle-line\"><\/span><span class=\"tahefobu-mobile-toggle-line\"><\/span><\/div><\/div><ul id=\"mobile-menu-2-5cec351\" class=\"tahefobu-mobile-nav-menu\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-1152\"><a href=\"https:\/\/baffhand.com\/\" class=\"tahefobu-mobile-menu-item\">Home<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-180\"><a href=\"https:\/\/baffhand.com\/?page_id=5\" class=\"tahefobu-mobile-menu-item\">Shop<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1232\"><a href=\"https:\/\/baffhand.com\/?page_id=1167\" class=\"tahefobu-mobile-menu-item\">Customize<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-338\"><a href=\"https:\/\/baffhand.com\/?page_id=335\" class=\"tahefobu-mobile-menu-item\">Rugs<\/a><\/li>\n<\/ul><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-045ed2d e-con-full e-flex e-con e-child\" data-id=\"045ed2d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9959713 tahefobu-main-menu-align-left tahefobu-main-menu-align--tabletleft tahefobu-main-menu-align--mobileleft tahefobu-sub-icon-caret-down tahefobu-nav-menu-bp-mobile tahefobu-mobile-menu-full-width tahefobu-mobile-menu-item-align-center tahefobu-mobile-toggle-v1 tahefobu-sub-divider-yes tahefobu-mobile-divider-yes elementor-widget elementor-widget-tahefobu-navigation-menu\" data-id=\"9959713\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tahefobu-navigation-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav class=\"tahefobu-nav-menu-container tahefobu-nav-menu-horizontal\" data-trigger=\"hover\"><ul id=\"menu-1-9959713\" class=\"tahefobu-nav-menu\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1150\"><a href=\"https:\/\/baffhand.com\/?page_id=6\" class=\"tahefobu-menu-item tahefobu-pointer-item\">Cart<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1166\"><a href=\"https:\/\/baffhand.com\/?page_id=8\" class=\"tahefobu-menu-item tahefobu-pointer-item\">Profile<\/a><\/li>\n<\/ul><\/nav><nav class=\"tahefobu-mobile-nav-menu-container\"><div class=\"tahefobu-mobile-toggle-wrap\"><div class=\"tahefobu-mobile-toggle\"><span class=\"tahefobu-mobile-toggle-line\"><\/span><span class=\"tahefobu-mobile-toggle-line\"><\/span><span class=\"tahefobu-mobile-toggle-line\"><\/span><\/div><\/div><ul id=\"mobile-menu-2-9959713\" class=\"tahefobu-mobile-nav-menu\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1150\"><a href=\"https:\/\/baffhand.com\/?page_id=6\" class=\"tahefobu-mobile-menu-item\">Cart<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1166\"><a href=\"https:\/\/baffhand.com\/?page_id=8\" class=\"tahefobu-mobile-menu-item\">Profile<\/a><\/li>\n<\/ul><\/nav>\t\t\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-d2a4220 e-flex e-con-boxed e-con e-parent\" data-id=\"d2a4220\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f401996 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"f401996\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- BAFFHAND Independent Beanie Visualizer Layout & Engine -->\r\n<style>\r\n  #skyknit-visualizer * { box-sizing: border-box; }\r\n  #skyknit-visualizer {\r\n    font-family: 'Inter', sans-serif;\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n    padding: 20px;\r\n    background: #f8fafc;\r\n    border-radius: 16px;\r\n  }\r\n  #skyknit-visualizer h2 {\r\n    font-family: 'Space Grotesk', 'Inter', sans-serif;\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin: 0 0 24px;\r\n    color: #0f172a;\r\n  }\r\n  .skn-layout {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 32px;\r\n  }\r\n  @media (max-width: 640px) {\r\n    .skn-layout { grid-template-columns: 1fr; }\r\n  }\r\n  .skn-preview {\r\n    background: white;\r\n    border-radius: 12px;\r\n    padding: 24px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 260px;\r\n    border: 1px solid #e2e8f0;\r\n  }\r\n  .skn-preview svg { width: 100%; max-width: 280px; }\r\n  .skn-controls { display: flex; flex-direction: column; gap: 20px; }\r\n  .skn-section label {\r\n    display: block;\r\n    font-size: 0.75rem;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.08em;\r\n    color: #64748b;\r\n    margin-bottom: 10px;\r\n  }\r\n  .skn-radios { display: flex; flex-wrap: wrap; gap: 8px; }\r\n  .skn-radios input { display: none; }\r\n  .skn-radios input + span {\r\n    display: inline-block;\r\n    padding: 6px 14px;\r\n    border-radius: 999px;\r\n    border: 1.5px solid #e2e8f0;\r\n    font-size: 0.8rem;\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    background: white;\r\n    color: #475569;\r\n    transition: all 0.15s;\r\n  }\r\n  .skn-radios input:checked + span {\r\n    border-color: #38bdf8;\r\n    background: #f0f9ff;\r\n    color: #0369a1;\r\n  }\r\n  .skn-colors { display: flex; flex-wrap: wrap; gap: 7px; }\r\n  .skn-color-btn {\r\n    width: 30px;\r\n    height: 30px;\r\n    border-radius: 50%;\r\n    border: 2px solid transparent;\r\n    cursor: pointer;\r\n    transition: transform 0.1s, box-shadow 0.1s;\r\n  }\r\n  .skn-color-btn:hover { transform: scale(1.15); }\r\n  .skn-color-btn.active {\r\n    border-color: #38bdf8;\r\n    box-shadow: 0 0 0 3px #bae6fd;\r\n  }\r\n  .skn-color-label { font-size: 0.78rem; color: #64748b; margin-top: 6px; }\r\n  .skn-price {\r\n    font-size: 1.4rem;\r\n    font-weight: 700;\r\n    color: #0f172a;\r\n  }\r\n  .skn-add-btn {\r\n    width: 100%;\r\n    padding: 14px;\r\n    background: #38bdf8;\r\n    color: white;\r\n    font-size: 0.95rem;\r\n    font-weight: 700;\r\n    border: none;\r\n    border-radius: 999px;\r\n    cursor: pointer;\r\n    transition: background 0.15s;\r\n    font-family: inherit;\r\n    letter-spacing: 0.04em;\r\n    text-align: center;\r\n  }\r\n  .skn-add-btn:hover { background: #0ea5e9; }\r\n  .skn-summary {\r\n    font-size: 0.8rem;\r\n    color: #94a3b8;\r\n    margin-top: 6px;\r\n    line-height: 1.6;\r\n  }\r\n<\/style>\r\n\r\n<div id=\"skyknit-visualizer\">\r\n  <h2>Design Your Beanie<\/h2>\r\n  <div class=\"skn-layout\">\r\n\r\n    <div class=\"skn-preview\">\r\n      <svg id=\"skn-svg\" viewBox=\"0 0 200 220\"><\/svg>\r\n    <\/div>\r\n\r\n    <div class=\"skn-controls\">\r\n      <div class=\"skn-section\">\r\n        <label>Style<\/label>\r\n        <div class=\"skn-radios\">\r\n          <label><input type=\"radio\" name=\"skn-style\" value=\"fisherman\" checked><span>Fisherman<\/span><\/label>\r\n          <label><input type=\"radio\" name=\"skn-style\" value=\"slouchy\"><span>Classic Slouchy<\/span><\/label>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"skn-section\">\r\n        <label>Colour Layout<\/label>\r\n        <div class=\"skn-radios\">\r\n          <label><input type=\"radio\" name=\"skn-ctype\" value=\"single\" checked><span>Single<\/span><\/label>\r\n          <label><input type=\"radio\" name=\"skn-ctype\" value=\"two_tone\"><span>Two Tone<\/span><\/label>\r\n          <label><input type=\"radio\" name=\"skn-ctype\" value=\"reversible\"><span>Reversible<\/span><\/label>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"skn-section\">\r\n        <label>Primary Colour<\/label>\r\n        <div class=\"skn-colors\" id=\"skn-primary-colors\"><\/div>\r\n        <div class=\"skn-color-label\" id=\"skn-primary-label\">Royal Blue<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"skn-section\" id=\"skn-secondary-section\" style=\"display:none\">\r\n        <label>Secondary Colour<\/label>\r\n        <div class=\"skn-colors\" id=\"skn-secondary-colors\"><\/div>\r\n        <div class=\"skn-color-label\" id=\"skn-secondary-label\">Camel<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"skn-section\">\r\n        <div class=\"skn-price\" id=\"skn-price\">$1800.00<\/div>\r\n        <div class=\"skn-summary\" id=\"skn-summary\"><\/div>\r\n        <br>\r\n        \r\n        <!-- Native URL-based Cart Injection Form -->\r\n        <form id=\"skn-direct-form\" method=\"GET\" action=\"\/cart\/\">\r\n          <!-- Core WooCommerce fields -->\r\n          <input type=\"hidden\" name=\"add-to-cart\" value=\"469\">\r\n          <input type=\"hidden\" name=\"quantity\" value=\"1\">\r\n          \r\n          <!-- Custom attribute mappings for backend catch -->\r\n          <input type=\"hidden\" id=\"field-style\" name=\"skyknit_style\" value=\"Fisherman Beanie\">\r\n          <input type=\"hidden\" id=\"field-type\" name=\"skyknit_color_type\" value=\"Single\">\r\n          <input type=\"hidden\" id=\"field-primary\" name=\"skyknit_primary\" value=\"Royal Blue\">\r\n          <input type=\"hidden\" id=\"field-secondary\" name=\"skyknit_secondary\" value=\"None\">\r\n          <input type=\"hidden\" name=\"skyknit_patch\" value=\"No\">\r\n\r\n          <button class=\"skn-add-btn\" id=\"skn-add-btn\" type=\"submit\">Add to Cart<\/button>\r\n        <\/form>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  const COLORS = [\r\n    { id:'01', name:'Off White',      hex:'#F5F5F0' },\r\n    { id:'02', name:'Baby Pink',      hex:'#F9C4CE' },\r\n    { id:'03', name:'Hot Pink',       hex:'#F06292' },\r\n    { id:'04', name:'Orange',         hex:'#F4783A' },\r\n    { id:'05', name:'Mustard Yellow', hex:'#E8C044' },\r\n    { id:'09', name:'Violet',         hex:'#7C3AED' },\r\n    { id:'10', name:'Red',            hex:'#DC2626' },\r\n    { id:'11', name:'Sky Blue',       hex:'#7EC8E3' },\r\n    { id:'12', name:'Cyan',           hex:'#00BCD4' },\r\n    { id:'13', name:'Turquoise',      hex:'#1ABC9C' },\r\n    { id:'14', name:'Grass Green',    hex:'#4CAF50' },\r\n    { id:'15', name:'Periwinkle',     hex:'#9FA8DA' },\r\n    { id:'16', name:'Dark Espresso',  hex:'#2C1008' },\r\n    { id:'18', name:'Black',          hex:'#1A1A1A' },\r\n    { id:'19', name:'White',          hex:'#FFFFFF' },\r\n    { id:'20', name:'Olive Green',    hex:'#6B8E23' },\r\n    { id:'21', name:'Forest Green',   hex:'#2E7D32' },\r\n    { id:'22', name:'Cobalt Blue',    hex:'#1565C0' },\r\n    { id:'23', name:'Royal Blue',     hex:'#1E3A8A' },\r\n    { id:'24', name:'Charcoal Grey',  hex:'#607D8B' },\r\n    { id:'32', name:'Mint',           hex:'#66CDAA' },\r\n    { id:'41', name:'Camel',          hex:'#C4956A' },\r\n    { id:'42', name:'Nude Beige',     hex:'#E8D5C0' },\r\n    { id:'43', name:'Lilac',          hex:'#BA8EC4' },\r\n    { id:'45', name:'Blush',          hex:'#F5C6C8' },\r\n    { id:'46', name:'Burgundy',       hex:'#800020' },\r\n    { id:'47', name:'Dusty Rose',     hex:'#C48A8A' },\r\n    { id:'67', name:'Sage Green',     hex:'#7D9B76' },\r\n    { id:'70', name:'Mauve',          hex:'#9C7A9C' },\r\n    { id:'78', name:'Dark Olive',     hex:'#4A5E3A' },\r\n  ];\r\n\r\n  let state = {\r\n    style: 'fisherman',\r\n    colorType: 'single',\r\n    primaryColor: '#1E3A8A',\r\n    primaryName: 'Royal Blue',\r\n    secondaryColor: '#C4956A',\r\n    secondaryName: 'Camel'\r\n  };\r\n\r\n  const ns = 'http:\/\/www.w3.org\/2000\/svg';\r\n  function el(tag, attrs, children) {\r\n    const e = document.createElementNS(ns, tag);\r\n    if (attrs) Object.entries(attrs).forEach(([k,v]) => e.setAttribute(k, v));\r\n    if (children) children.forEach(c => e.appendChild(c));\r\n    return e;\r\n  }\r\n  function knitLines(color) {\r\n    const g = el('g', { stroke: color, 'stroke-width': '1.2', fill: 'none', opacity: '0.15' });\r\n    [55,75,95,115,135].forEach(y => { g.appendChild(el('path', { d: `M40 ${y} Q100 ${y-5} 160 ${y}` })); });\r\n    return g;\r\n  }\r\n  function ribLines(y1s) {\r\n    const g = el('g', { stroke: 'rgba(0,0,0,0.09)', 'stroke-width': '1.5' });\r\n    y1s.forEach(y => g.appendChild(el('line', { x1:'40', y1:y, x2:'160', y2:y })));\r\n    return g;\r\n  }\r\n  function textEl(x, y, str, size, fill) {\r\n    const t = el('text', { x, y, 'text-anchor':'middle', 'font-size':size, fill, 'font-family':'sans-serif' });\r\n    t.textContent = str;\r\n    return t;\r\n  }\r\n\r\n  function buildFisherman(p, s, ctype) {\r\n    if (ctype === 'single') {\r\n      return {\r\n        viewBox: '0 20 200 220',\r\n        children: [\r\n          el('path', { d:'M40 145 Q38 60 100 50 Q162 60 160 145', fill: p }),\r\n          el('rect', { x:'40', y:'145', width:'120', height:'20', fill: p }),\r\n          el('rect', { x:'36', y:'163', width:'128', height:'38', rx:'4', fill: p, opacity:'0.82' }),\r\n          el('rect', { x:'36', y:'163', width:'128', height:'5', fill:'rgba(0,0,0,0.08)' }),\r\n          knitLines('rgba(255,255,255,1)'), ribLines([170,178,186,194]),\r\n        ]\r\n      };\r\n    }\r\n    if (ctype === 'two_tone') {\r\n      return {\r\n        viewBox: '0 20 200 220',\r\n        children: [\r\n          el('path', { d:'M40 145 Q38 60 100 50 Q162 60 160 145', fill: p }),\r\n          el('rect', { x:'40', y:'145', width:'120', height:'20', fill: p }),\r\n          knitLines('rgba(255,255,255,1)'),\r\n          el('rect', { x:'36', y:'163', width:'128', height:'38', rx:'4', fill: s }),\r\n          el('rect', { x:'36', y:'163', width:'128', height:'5', fill:'rgba(0,0,0,0.08)' }),\r\n          ribLines([170,178,186,194]),\r\n        ]\r\n      };\r\n    }\r\n    const sideA = fishSide(p, s, 0); sideA.appendChild(textEl('100','218','Side A','14','rgba(0,0,0,0.5)'));\r\n    const sideB = fishSide(s, p, 148); sideB.appendChild(textEl('100','218','Side B','14','rgba(0,0,0,0.5)'));\r\n    const arrow = el('g', { transform:'translate(128,90)' });\r\n    arrow.appendChild(textEl('0','0','\u21c4','22','rgba(0,0,0,0.3)'));\r\n    function fishSide(m, c, tx) {\r\n      const g = el('g', { transform: `translate(${tx},0) scale(0.7)` });\r\n      g.appendChild(el('path', { d:'M40 145 Q38 60 100 50 Q162 60 160 145', fill: m }));\r\n      g.appendChild(el('rect', { x:'40', y:'145', width:'120', height:'20', fill: m }));\r\n      g.appendChild(el('rect', { x:'36', y:'163', width:'128', height:'38', rx:'4', fill: c }));\r\n      return g;\r\n    }\r\n    return { viewBox:'0 20 260 220', children:[sideA, arrow, sideB] };\r\n  }\r\n\r\n  function buildSlouchy(p, s, ctype) {\r\n    function kl() {\r\n      const g = el('g', { stroke:'rgba(255,255,255,0.13)', 'stroke-width':'1.5', fill:'none' });\r\n      ['M50 65 Q100 55 150 65','M40 95 Q100 88 160 95','M35 135 Q100 130 165 135','M35 165 Q100 162 165 165'].forEach(d => g.appendChild(el('path', { d })));\r\n      return g;\r\n    }\r\n    if (ctype === 'single') {\r\n      return {\r\n        viewBox: '0 25 200 250',\r\n        children: [\r\n          el('ellipse', { cx:'100', cy:'42', rx:'11', ry:'9', fill: p }),\r\n          el('path', { d:'M32 120 Q32 22 100 28 Q168 22 168 120', fill: p }),\r\n          el('rect', { x:'32', y:'120', width:'136', height:'78', rx:'3', fill: p }),\r\n          el('rect', { x:'32', y:'196', width:'136', height:'34', rx:'6', fill: p }),\r\n          kl()\r\n        ]\r\n      };\r\n    }\r\n    if (ctype === 'two_tone') {\r\n      const defs = el('defs'); const clip = el('clipPath', { id:'skn-sl-clip' });\r\n      clip.appendChild(el('path', { d:'M32 120 Q32 22 100 28 Q168 22 168 120 L168 196 H32 Z' }));\r\n      defs.appendChild(clip); const b = el('g', { 'clip-path':'url(#skn-sl-clip)' });\r\n      b.appendChild(el('rect', { x:'32', y:'22', width:'136', height:'174', fill: p }));\r\n      return {\r\n        viewBox: '0 25 200 250',\r\n        children: [ defs, el('ellipse', { cx:'100', cy:'42', rx:'11', ry:'9', fill: p }), b, el('rect', { x:'32', y:'196', width:'136', height:'34', rx:'6', fill: s }), kl() ]\r\n      };\r\n    }\r\n    function slSide(m, c, tx) {\r\n      const g = el('g', { transform:`translate(${tx},0) scale(0.7)` });\r\n      g.appendChild(el('ellipse', { cx:'100', cy:'42', rx:'11', ry:'9', fill:m }));\r\n      g.appendChild(el('path', { d:'M32 120 Q32 22 100 28 Q168 22 168 120', fill:m }));\r\n      g.appendChild(el('rect', { x:'32', y:'120', width:'136', height:'78', rx:'3', fill:m }));\r\n      g.appendChild(el('rect', { x:'32', y:'196', width:'136', height:'34', rx:'6', fill:c }));\r\n      return g;\r\n    }\r\n    const sideA = slSide(p, s, 0); sideA.appendChild(textEl('100','248','Side A','14','rgba(0,0,0,0.5)'));\r\n    const sideB = slSide(s, p, 148); sideB.appendChild(textEl('100','248','Side B','14','rgba(0,0,0,0.5)'));\r\n    const arrow = el('g', { transform:'translate(128,105)' });\r\n    arrow.appendChild(textEl('0','0','\u21c4','22','rgba(0,0,0,0.3)'));\r\n    return { viewBox:'0 25 260 250', children:[sideA, arrow, sideB] };\r\n  }\r\n\r\n  function renderSVG() {\r\n    const { style, colorType, primaryColor, secondaryColor } = state;\r\n    const { viewBox, children } = style === 'fisherman' ? buildFisherman(primaryColor, secondaryColor, colorType) : buildSlouchy(primaryColor, secondaryColor, colorType);\r\n    const svg = document.getElementById('skn-svg');\r\n    svg.setAttribute('viewBox', viewBox);\r\n    while (svg.firstChild) svg.removeChild(svg.firstChild);\r\n    children.forEach(c => svg.appendChild(c));\r\n  }\r\n\r\n  function renderSwatches(containerId, labelId, selectedHex, onClick) {\r\n    const container = document.getElementById(containerId); container.innerHTML = '';\r\n    COLORS.forEach(c => {\r\n      const btn = document.createElement('button'); btn.type = 'button';\r\n      btn.className = 'skn-color-btn' + (c.hex === selectedHex ? ' active' : '');\r\n      btn.style.background = c.hex;\r\n      btn.addEventListener('click', () => onClick(c));\r\n      container.appendChild(btn);\r\n    });\r\n  }\r\n\r\n  function syncFormInputs() {\r\n    document.getElementById('field-style').value = state.style === 'fisherman' ? 'Fisherman Beanie' : 'Classic Slouchy';\r\n    document.getElementById('field-type').value = state.colorType === 'single' ? 'Single' : state.colorType === 'two_tone' ? 'Two Tone' : 'Reversible';\r\n    document.getElementById('field-primary').value = state.primaryName;\r\n    document.getElementById('field-secondary').value = state.colorType !== 'single' ? state.secondaryName : 'None';\r\n  }\r\n\r\n  function update() {\r\n    document.getElementById('skn-secondary-section').style.display = state.colorType !== 'single' ? '' : 'none';\r\n    renderSwatches('skn-primary-colors', 'skn-primary-label', state.primaryColor, (c) => { state.primaryColor = c.hex; state.primaryName = c.name; document.getElementById('skn-primary-label').textContent = c.name; update(); });\r\n    renderSwatches('skn-secondary-colors', 'skn-secondary-label', state.secondaryColor, (c) => { state.secondaryColor = c.hex; state.secondaryName = c.name; document.getElementById('skn-secondary-label').textContent = c.name; update(); });\r\n    \r\n    let base = state.colorType === 'reversible' ? 2800 : (state.style === 'fisherman' ? 1800 : 2500);\r\n    document.getElementById('skn-price').textContent = '$' + base + '.00';\r\n    document.getElementById('skn-summary').textContent = (state.style === 'fisherman' ? 'Fisherman' : 'Classic Slouchy') + ' \u00b7 ' + (state.colorType === 'single' ? state.primaryName : state.primaryName + ' \/ ' + state.secondaryName);\r\n    \r\n    renderSVG();\r\n    syncFormInputs();\r\n  }\r\n\r\n  document.querySelectorAll('input[name=\"skn-style\"]').forEach(r => r.addEventListener('change', () => { state.style = r.value; update(); }));\r\n  document.querySelectorAll('input[name=\"skn-ctype\"]').forEach(r => r.addEventListener('change', () => { state.colorType = r.value; update(); }));\r\n\r\n  update();\r\n})();\r\n<\/script>\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home Shop Customize Rugs Home Shop Customize Rugs Cart Profile Cart Profile Design Your Beanie Style Fisherman Classic Slouchy Colour Layout Single Two Tone Reversible Primary Colour Royal Blue Secondary Colour Camel $1800.00 Add to Cart<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1167","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/baffhand.com\/index.php?rest_route=\/wp\/v2\/pages\/1167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/baffhand.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/baffhand.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/baffhand.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/baffhand.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1167"}],"version-history":[{"count":5,"href":"https:\/\/baffhand.com\/index.php?rest_route=\/wp\/v2\/pages\/1167\/revisions"}],"predecessor-version":[{"id":1257,"href":"https:\/\/baffhand.com\/index.php?rest_route=\/wp\/v2\/pages\/1167\/revisions\/1257"}],"wp:attachment":[{"href":"https:\/\/baffhand.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}