[{"data":1,"prerenderedAt":6558},["ShallowReactive",2],{"blog-suitecommerce-theme-development-design-to-deployment":3,"all-blog-posts":6363},{"id":4,"title":5,"author":6,"body":7,"categories":6343,"date":6347,"description":6348,"extension":6349,"heroImage":6350,"meta":6351,"navigation":469,"path":6352,"relatedArticles":6353,"seo":6354,"stem":6355,"tags":6356,"__hash__":6362},"content\u002Fblog\u002Fsuitecommerce-theme-development-design-to-deployment.md","SuiteCommerce Theme Development: From Design to Deployment","Stenbase Team",{"type":8,"value":9,"toc":6280},"minimark",[10,14,18,21,24,29,36,39,44,47,147,155,159,166,354,365,368,372,375,379,382,442,447,499,503,506,516,519,572,576,579,591,594,622,636,640,643,651,653,657,660,664,676,679,705,708,712,718,1049,1052,1078,1080,1084,1087,1091,1094,1354,1360,1364,1367,1693,1697,1700,1938,1942,1945,2391,2395,2398,2595,2597,2601,2607,2611,2929,2933,2936,3032,3036,3039,3419,3421,3425,3431,3434,3438,3441,3665,3669,3672,4314,4318,4321,4548,4550,4554,4557,4561,4566,4693,4698,4934,4938,4943,5028,5033,5063,5067,5070,5099,5101,5105,5108,5112,5298,5302,5513,5517,5520,5611,5613,5617,5620,5624,5681,5684,5688,5727,5731,5736,5757,5762,5788,5793,5844,5846,5850,5853,5857,5860,5909,5913,5916,5960,5964,5967,5984,5988,6009,6014,6031,6035,6038,6052,6054,6058,6062,6067,6092,6098,6102,6107,6110,6123,6127,6132,6146,6150,6155,6198,6200,6204,6209,6212,6217,6220,6225,6228,6233,6236,6241,6244,6246,6250,6253,6256,6263,6265,6276],[11,12,5],"h1",{"id":13},"suitecommerce-theme-development-from-design-to-deployment",[15,16,17],"p",{},"Your SuiteCommerce store looks like every other NetSuite e-commerce site. Same layouts. Same color scheme variations. Same generic feel that screams \"template.\"",[15,19,20],{},"We've built over 40 custom SuiteCommerce themes, and the difference between a generic-looking store and a brand-defining one comes down to understanding the theme architecture deeply. Sites with custom themes see 15-25% higher engagement metrics and stronger brand recall—because customers can tell when a store has personality versus when it's a checkbox implementation.",[15,22,23],{},"This guide takes you from design concept to deployed theme, covering every technical detail you need to build themes that perform and convert.",[25,26,28],"h2",{"id":27},"what-makes-suitecommerce-themes-different","What Makes SuiteCommerce Themes Different",[15,30,31],{},[32,33],"img",{"alt":34,"src":35},"Theme design and development","\u002Fimages\u002Fblog\u002Fsuitecommerce-theme-design.webp",[15,37,38],{},"SuiteCommerce themes aren't just CSS files you drop into a folder. They're integrated packages combining SASS stylesheets, Handlebars templates, configuration files, and JavaScript modules. Understanding this architecture is essential before writing a single line of code.",[40,41,43],"h3",{"id":42},"theme-architecture-overview","Theme Architecture Overview",[15,45,46],{},"A SuiteCommerce theme consists of:",[48,49,50,66],"table",{},[51,52,53],"thead",{},[54,55,56,60,63],"tr",{},[57,58,59],"th",{},"Component",[57,61,62],{},"Purpose",[57,64,65],{},"File Types",[67,68,69,85,99,112,123,134],"tbody",{},[54,70,71,75,78],{},[72,73,74],"td",{},"SASS Modules",[72,76,77],{},"Styling and visual design",[72,79,80,84],{},[81,82,83],"code",{},".scss"," files",[54,86,87,90,93],{},[72,88,89],{},"Templates",[72,91,92],{},"HTML structure and layout",[72,94,95,98],{},[81,96,97],{},".tpl"," (Handlebars)",[54,100,101,104,107],{},[72,102,103],{},"Manifest",[72,105,106],{},"Configuration and metadata",[72,108,109],{},[81,110,111],{},"manifest.json",[54,113,114,117,120],{},[72,115,116],{},"Assets",[72,118,119],{},"Images, fonts, icons",[72,121,122],{},"Various",[54,124,125,128,131],{},[72,126,127],{},"Skins",[72,129,130],{},"Color\u002Fstyle variations",[72,132,133],{},"JSON + SASS",[54,135,136,139,142],{},[72,137,138],{},"Entry Points",[72,140,141],{},"SASS compilation control",[72,143,144,84],{},[81,145,146],{},"_index.scss",[15,148,149,150,154],{},"The theme system uses a ",[151,152,153],"strong",{},"fallback architecture","—your custom theme only needs to include files you want to override. Everything else falls back to the base theme. This is powerful: you can create complete visual transformations with minimal file changes.",[40,156,158],{"id":157},"fallback-themes-the-modern-approach","Fallback Themes: The Modern Approach",[15,160,161,162,165],{},"Since the 2024 releases, SuiteCommerce introduced ",[151,163,164],{},"fallback themes"," as the recommended customization approach. Instead of copying the entire base theme (and inheriting maintenance headaches), you create a lightweight theme that references the base and overrides only what you need.",[167,168,173],"pre",{"className":169,"code":170,"language":171,"meta":172,"style":172},"language-json shiki shiki-themes github-light github-dark","\u002F\u002F manifest.json for a fallback theme\n{\n    \"name\": \"MyCustomTheme\",\n    \"fantasyName\": \"My Custom Theme\",\n    \"vendor\": \"stenbase\",\n    \"version\": \"1.0.0\",\n    \"type\": \"theme\",\n    \"sub_type\": \"fallback\",\n    \"target\": \"SCS\",\n    \"skins\": [\n        {\n            \"name\": \"default\",\n            \"file\": \"default.json\"\n        }\n    ],\n    \"base_theme\": \"starter_theme\"\n}\n","json","",[81,174,175,184,191,208,221,234,247,260,273,286,295,301,314,325,331,337,348],{"__ignoreMap":172},[176,177,180],"span",{"class":178,"line":179},"line",1,[176,181,183],{"class":182},"sJ8bj","\u002F\u002F manifest.json for a fallback theme\n",[176,185,187],{"class":178,"line":186},2,[176,188,190],{"class":189},"sVt8B","{\n",[176,192,194,198,201,205],{"class":178,"line":193},3,[176,195,197],{"class":196},"sj4cs","    \"name\"",[176,199,200],{"class":189},": ",[176,202,204],{"class":203},"sZZnC","\"MyCustomTheme\"",[176,206,207],{"class":189},",\n",[176,209,211,214,216,219],{"class":178,"line":210},4,[176,212,213],{"class":196},"    \"fantasyName\"",[176,215,200],{"class":189},[176,217,218],{"class":203},"\"My Custom Theme\"",[176,220,207],{"class":189},[176,222,224,227,229,232],{"class":178,"line":223},5,[176,225,226],{"class":196},"    \"vendor\"",[176,228,200],{"class":189},[176,230,231],{"class":203},"\"stenbase\"",[176,233,207],{"class":189},[176,235,237,240,242,245],{"class":178,"line":236},6,[176,238,239],{"class":196},"    \"version\"",[176,241,200],{"class":189},[176,243,244],{"class":203},"\"1.0.0\"",[176,246,207],{"class":189},[176,248,250,253,255,258],{"class":178,"line":249},7,[176,251,252],{"class":196},"    \"type\"",[176,254,200],{"class":189},[176,256,257],{"class":203},"\"theme\"",[176,259,207],{"class":189},[176,261,263,266,268,271],{"class":178,"line":262},8,[176,264,265],{"class":196},"    \"sub_type\"",[176,267,200],{"class":189},[176,269,270],{"class":203},"\"fallback\"",[176,272,207],{"class":189},[176,274,276,279,281,284],{"class":178,"line":275},9,[176,277,278],{"class":196},"    \"target\"",[176,280,200],{"class":189},[176,282,283],{"class":203},"\"SCS\"",[176,285,207],{"class":189},[176,287,289,292],{"class":178,"line":288},10,[176,290,291],{"class":196},"    \"skins\"",[176,293,294],{"class":189},": [\n",[176,296,298],{"class":178,"line":297},11,[176,299,300],{"class":189},"        {\n",[176,302,304,307,309,312],{"class":178,"line":303},12,[176,305,306],{"class":196},"            \"name\"",[176,308,200],{"class":189},[176,310,311],{"class":203},"\"default\"",[176,313,207],{"class":189},[176,315,317,320,322],{"class":178,"line":316},13,[176,318,319],{"class":196},"            \"file\"",[176,321,200],{"class":189},[176,323,324],{"class":203},"\"default.json\"\n",[176,326,328],{"class":178,"line":327},14,[176,329,330],{"class":189},"        }\n",[176,332,334],{"class":178,"line":333},15,[176,335,336],{"class":189},"    ],\n",[176,338,340,343,345],{"class":178,"line":339},16,[176,341,342],{"class":196},"    \"base_theme\"",[176,344,200],{"class":189},[176,346,347],{"class":203},"\"starter_theme\"\n",[176,349,351],{"class":178,"line":350},17,[176,352,353],{"class":189},"}\n",[15,355,356,357,360,361,364],{},"The ",[81,358,359],{},"sub_type: \"fallback\""," property tells SuiteCommerce to use inheritance. When a file isn't found in your theme, the system checks the ",[81,362,363],{},"base_theme",".",[366,367],"hr",{},[25,369,371],{"id":370},"setting-up-your-development-environment","Setting Up Your Development Environment",[15,373,374],{},"Before touching theme files, you need a properly configured development environment. This setup determines your productivity for the entire project.",[40,376,378],{"id":377},"prerequisites","Prerequisites",[15,380,381],{},"You'll need these installed on your development machine:",[167,383,387],{"className":384,"code":385,"language":386,"meta":172,"style":172},"language-bash shiki shiki-themes github-light github-dark","# Required versions (as of 2026)\nNode.js: v18.x or v20.x LTS\nnpm: 8.x or higher\nGulp: 4.x (installed globally)\n","bash",[81,388,389,394,412,425],{"__ignoreMap":172},[176,390,391],{"class":178,"line":179},[176,392,393],{"class":182},"# Required versions (as of 2026)\n",[176,395,396,400,403,406,409],{"class":178,"line":186},[176,397,399],{"class":398},"sScJk","Node.js:",[176,401,402],{"class":203}," v18.x",[176,404,405],{"class":203}," or",[176,407,408],{"class":203}," v20.x",[176,410,411],{"class":203}," LTS\n",[176,413,414,417,420,422],{"class":178,"line":193},[176,415,416],{"class":398},"npm:",[176,418,419],{"class":203}," 8.x",[176,421,405],{"class":203},[176,423,424],{"class":203}," higher\n",[176,426,427,430,433,436,439],{"class":178,"line":210},[176,428,429],{"class":398},"Gulp:",[176,431,432],{"class":203}," 4.x",[176,434,435],{"class":189}," (installed ",[176,437,438],{"class":203},"globally",[176,440,441],{"class":189},")\n",[15,443,444],{},[151,445,446],{},"Installation verification:",[167,448,450],{"className":384,"code":449,"language":386,"meta":172,"style":172},"node --version\n# Should return v18.x.x or v20.x.x\n\nnpm --version\n# Should return 8.x.x or higher\n\ngulp --version\n# Should return CLI version 2.3.0 or higher\n",[81,451,452,460,465,471,478,483,487,494],{"__ignoreMap":172},[176,453,454,457],{"class":178,"line":179},[176,455,456],{"class":398},"node",[176,458,459],{"class":196}," --version\n",[176,461,462],{"class":178,"line":186},[176,463,464],{"class":182},"# Should return v18.x.x or v20.x.x\n",[176,466,467],{"class":178,"line":193},[176,468,470],{"emptyLinePlaceholder":469},true,"\n",[176,472,473,476],{"class":178,"line":210},[176,474,475],{"class":398},"npm",[176,477,459],{"class":196},[176,479,480],{"class":178,"line":223},[176,481,482],{"class":182},"# Should return 8.x.x or higher\n",[176,484,485],{"class":178,"line":236},[176,486,470],{"emptyLinePlaceholder":469},[176,488,489,492],{"class":178,"line":249},[176,490,491],{"class":398},"gulp",[176,493,459],{"class":196},[176,495,496],{"class":178,"line":262},[176,497,498],{"class":182},"# Should return CLI version 2.3.0 or higher\n",[40,500,502],{"id":501},"installing-the-theme-development-tools","Installing the Theme Development Tools",[15,504,505],{},"Download the Theme Development Tools from your NetSuite File Cabinet:",[15,507,508,511,512,515],{},[151,509,510],{},"Navigation:"," File Cabinet → SuiteBundles → Bundle 387395 → ThemeDevelopmentTools-",[176,513,514],{},"version",".zip",[15,517,518],{},"Extract the archive and install dependencies:",[167,520,522],{"className":384,"code":521,"language":386,"meta":172,"style":172},"# Navigate to extracted directory\ncd ThemeDevelopmentTools-24.1.0\n\n# Install npm dependencies\nnpm install\n\n# Verify installation\ngulp\n# Should display available commands\n",[81,523,524,529,537,541,546,553,557,562,567],{"__ignoreMap":172},[176,525,526],{"class":178,"line":179},[176,527,528],{"class":182},"# Navigate to extracted directory\n",[176,530,531,534],{"class":178,"line":186},[176,532,533],{"class":196},"cd",[176,535,536],{"class":203}," ThemeDevelopmentTools-24.1.0\n",[176,538,539],{"class":178,"line":193},[176,540,470],{"emptyLinePlaceholder":469},[176,542,543],{"class":178,"line":210},[176,544,545],{"class":182},"# Install npm dependencies\n",[176,547,548,550],{"class":178,"line":223},[176,549,475],{"class":398},[176,551,552],{"class":203}," install\n",[176,554,555],{"class":178,"line":236},[176,556,470],{"emptyLinePlaceholder":469},[176,558,559],{"class":178,"line":249},[176,560,561],{"class":182},"# Verify installation\n",[176,563,564],{"class":178,"line":262},[176,565,566],{"class":398},"gulp\n",[176,568,569],{"class":178,"line":275},[176,570,571],{"class":182},"# Should display available commands\n",[40,573,575],{"id":574},"connecting-to-your-netsuite-account","Connecting to Your NetSuite Account",[15,577,578],{},"The first time you run a gulp command, you'll need to authenticate:",[167,580,582],{"className":384,"code":581,"language":386,"meta":172,"style":172},"gulp theme:fetch\n",[81,583,584],{"__ignoreMap":172},[176,585,586,588],{"class":178,"line":179},[176,587,491],{"class":398},[176,589,590],{"class":203}," theme:fetch\n",[15,592,593],{},"This prompts for:",[595,596,597,604,610,616],"ul",{},[598,599,600,603],"li",{},[151,601,602],{},"Website:"," Your SuiteCommerce domain",[598,605,606,609],{},[151,607,608],{},"Email:"," NetSuite login email",[598,611,612,615],{},[151,613,614],{},"Password:"," NetSuite password (or token if using token-based auth)",[598,617,618,621],{},[151,619,620],{},"Role:"," Select a role with Commerce permissions",[15,623,624,625,628,629],{},"The tool stores credentials in ",[81,626,627],{},".nsdeploy"," for subsequent runs. ",[151,630,631,632,635],{},"Add this file to ",[81,633,634],{},".gitignore","—never commit credentials.",[40,637,639],{"id":638},"project-structure","Project Structure",[15,641,642],{},"After fetching an existing theme or creating a new one, your project structure looks like this:",[167,644,649],{"className":645,"code":647,"language":648},[646],"language-text","ThemeDevelopmentTools\u002F\n├── gulp\u002F\n│   ├── config\u002F\n│   │   └── config.json        # Deployment configuration\n│   └── tasks\u002F                 # Gulp task definitions\n├── Themes\u002F\n│   └── MyCustomTheme\u002F\n│       ├── manifest.json       # Theme metadata\n│       ├── Modules\u002F           # SASS and template modules\n│       │   ├── BaseSassStyles\u002F\n│       │   ├── Header\u002F\n│       │   ├── Footer\u002F\n│       │   ├── ProductDetails\u002F\n│       │   └── ...\n│       ├── Skins\u002F             # Skin configurations\n│       │   └── default.json\n│       └── assets\u002F            # Images and static files\n├── LocalDistribution\u002F         # Local build output\n├── node_modules\u002F\n├── package.json\n└── .nsdeploy                  # Credentials (gitignore this)\n","text",[81,650,647],{"__ignoreMap":172},[366,652],{},[25,654,656],{"id":655},"creating-your-theme","Creating Your Theme",[15,658,659],{},"With your environment ready, let's build a theme from scratch. We'll create a fallback theme that establishes a new visual identity while maintaining all base functionality.",[40,661,663],{"id":662},"initializing-a-new-theme","Initializing a New Theme",[167,665,667],{"className":384,"code":666,"language":386,"meta":172,"style":172},"gulp theme:create\n",[81,668,669],{"__ignoreMap":172},[176,670,671,673],{"class":178,"line":179},[176,672,491],{"class":398},[176,674,675],{"class":203}," theme:create\n",[15,677,678],{},"Follow the prompts:",[595,680,681,687,693,699],{},[598,682,683,686],{},[151,684,685],{},"Theme name:"," mycustomtheme (lowercase, no spaces)",[598,688,689,692],{},[151,690,691],{},"Fantasy name:"," My Custom Theme (display name)",[598,694,695,698],{},[151,696,697],{},"Version:"," 1.0.0",[598,700,701,704],{},[151,702,703],{},"Base theme:"," Select the starter theme for your SuiteCommerce version",[15,706,707],{},"The tool generates the folder structure with a minimal manifest and starter files.",[40,709,711],{"id":710},"understanding-the-manifest","Understanding the Manifest",[15,713,714,715,717],{},"Your ",[81,716,111],{}," controls how SuiteCommerce interprets your theme:",[167,719,721],{"className":169,"code":720,"language":171,"meta":172,"style":172},"{\n    \"name\": \"mycustomtheme\",\n    \"fantasyName\": \"My Custom Theme\",\n    \"vendor\": \"yourcompany\",\n    \"version\": \"1.0.0\",\n    \"type\": \"theme\",\n    \"sub_type\": \"fallback\",\n    \"target\": \"SCS\",\n    \"base_theme\": \"starter_theme\",\n    \"scss\": {\n        \"entry_points\": {\n            \"shopping\": \"Modules\u002FBaseSassStyles@1.0.0\u002Findex-shopping.scss\",\n            \"myaccount\": \"Modules\u002FBaseSassStyles@1.0.0\u002Findex-myaccount.scss\",\n            \"checkout\": \"Modules\u002FBaseSassStyles@1.0.0\u002Findex-checkout.scss\"\n        }\n    },\n    \"templates\": {\n        \"application\": {\n            \"Shopping\": \"Modules\u002FShopping@1.0.0\",\n            \"MyAccount\": \"Modules\u002FMyAccount@1.0.0\",\n            \"Checkout\": \"Modules\u002FCheckout@1.0.0\"\n        }\n    },\n    \"skins\": [\n        {\n            \"name\": \"default\",\n            \"file\": \"Skins\u002Fdefault.json\"\n        },\n        {\n            \"name\": \"dark\",\n            \"file\": \"Skins\u002Fdark.json\"\n        }\n    ],\n    \"assets\": {\n        \"img\": \"assets\u002Fimg\",\n        \"fonts\": \"assets\u002Ffonts\"\n    }\n}\n",[81,722,723,727,738,748,759,769,779,789,799,810,818,825,837,849,859,863,868,875,883,896,909,920,925,930,937,942,953,963,969,974,986,996,1001,1006,1014,1027,1038,1044],{"__ignoreMap":172},[176,724,725],{"class":178,"line":179},[176,726,190],{"class":189},[176,728,729,731,733,736],{"class":178,"line":186},[176,730,197],{"class":196},[176,732,200],{"class":189},[176,734,735],{"class":203},"\"mycustomtheme\"",[176,737,207],{"class":189},[176,739,740,742,744,746],{"class":178,"line":193},[176,741,213],{"class":196},[176,743,200],{"class":189},[176,745,218],{"class":203},[176,747,207],{"class":189},[176,749,750,752,754,757],{"class":178,"line":210},[176,751,226],{"class":196},[176,753,200],{"class":189},[176,755,756],{"class":203},"\"yourcompany\"",[176,758,207],{"class":189},[176,760,761,763,765,767],{"class":178,"line":223},[176,762,239],{"class":196},[176,764,200],{"class":189},[176,766,244],{"class":203},[176,768,207],{"class":189},[176,770,771,773,775,777],{"class":178,"line":236},[176,772,252],{"class":196},[176,774,200],{"class":189},[176,776,257],{"class":203},[176,778,207],{"class":189},[176,780,781,783,785,787],{"class":178,"line":249},[176,782,265],{"class":196},[176,784,200],{"class":189},[176,786,270],{"class":203},[176,788,207],{"class":189},[176,790,791,793,795,797],{"class":178,"line":262},[176,792,278],{"class":196},[176,794,200],{"class":189},[176,796,283],{"class":203},[176,798,207],{"class":189},[176,800,801,803,805,808],{"class":178,"line":275},[176,802,342],{"class":196},[176,804,200],{"class":189},[176,806,807],{"class":203},"\"starter_theme\"",[176,809,207],{"class":189},[176,811,812,815],{"class":178,"line":288},[176,813,814],{"class":196},"    \"scss\"",[176,816,817],{"class":189},": {\n",[176,819,820,823],{"class":178,"line":297},[176,821,822],{"class":196},"        \"entry_points\"",[176,824,817],{"class":189},[176,826,827,830,832,835],{"class":178,"line":303},[176,828,829],{"class":196},"            \"shopping\"",[176,831,200],{"class":189},[176,833,834],{"class":203},"\"Modules\u002FBaseSassStyles@1.0.0\u002Findex-shopping.scss\"",[176,836,207],{"class":189},[176,838,839,842,844,847],{"class":178,"line":316},[176,840,841],{"class":196},"            \"myaccount\"",[176,843,200],{"class":189},[176,845,846],{"class":203},"\"Modules\u002FBaseSassStyles@1.0.0\u002Findex-myaccount.scss\"",[176,848,207],{"class":189},[176,850,851,854,856],{"class":178,"line":327},[176,852,853],{"class":196},"            \"checkout\"",[176,855,200],{"class":189},[176,857,858],{"class":203},"\"Modules\u002FBaseSassStyles@1.0.0\u002Findex-checkout.scss\"\n",[176,860,861],{"class":178,"line":333},[176,862,330],{"class":189},[176,864,865],{"class":178,"line":339},[176,866,867],{"class":189},"    },\n",[176,869,870,873],{"class":178,"line":350},[176,871,872],{"class":196},"    \"templates\"",[176,874,817],{"class":189},[176,876,878,881],{"class":178,"line":877},18,[176,879,880],{"class":196},"        \"application\"",[176,882,817],{"class":189},[176,884,886,889,891,894],{"class":178,"line":885},19,[176,887,888],{"class":196},"            \"Shopping\"",[176,890,200],{"class":189},[176,892,893],{"class":203},"\"Modules\u002FShopping@1.0.0\"",[176,895,207],{"class":189},[176,897,899,902,904,907],{"class":178,"line":898},20,[176,900,901],{"class":196},"            \"MyAccount\"",[176,903,200],{"class":189},[176,905,906],{"class":203},"\"Modules\u002FMyAccount@1.0.0\"",[176,908,207],{"class":189},[176,910,912,915,917],{"class":178,"line":911},21,[176,913,914],{"class":196},"            \"Checkout\"",[176,916,200],{"class":189},[176,918,919],{"class":203},"\"Modules\u002FCheckout@1.0.0\"\n",[176,921,923],{"class":178,"line":922},22,[176,924,330],{"class":189},[176,926,928],{"class":178,"line":927},23,[176,929,867],{"class":189},[176,931,933,935],{"class":178,"line":932},24,[176,934,291],{"class":196},[176,936,294],{"class":189},[176,938,940],{"class":178,"line":939},25,[176,941,300],{"class":189},[176,943,945,947,949,951],{"class":178,"line":944},26,[176,946,306],{"class":196},[176,948,200],{"class":189},[176,950,311],{"class":203},[176,952,207],{"class":189},[176,954,956,958,960],{"class":178,"line":955},27,[176,957,319],{"class":196},[176,959,200],{"class":189},[176,961,962],{"class":203},"\"Skins\u002Fdefault.json\"\n",[176,964,966],{"class":178,"line":965},28,[176,967,968],{"class":189},"        },\n",[176,970,972],{"class":178,"line":971},29,[176,973,300],{"class":189},[176,975,977,979,981,984],{"class":178,"line":976},30,[176,978,306],{"class":196},[176,980,200],{"class":189},[176,982,983],{"class":203},"\"dark\"",[176,985,207],{"class":189},[176,987,989,991,993],{"class":178,"line":988},31,[176,990,319],{"class":196},[176,992,200],{"class":189},[176,994,995],{"class":203},"\"Skins\u002Fdark.json\"\n",[176,997,999],{"class":178,"line":998},32,[176,1000,330],{"class":189},[176,1002,1004],{"class":178,"line":1003},33,[176,1005,336],{"class":189},[176,1007,1009,1012],{"class":178,"line":1008},34,[176,1010,1011],{"class":196},"    \"assets\"",[176,1013,817],{"class":189},[176,1015,1017,1020,1022,1025],{"class":178,"line":1016},35,[176,1018,1019],{"class":196},"        \"img\"",[176,1021,200],{"class":189},[176,1023,1024],{"class":203},"\"assets\u002Fimg\"",[176,1026,207],{"class":189},[176,1028,1030,1033,1035],{"class":178,"line":1029},36,[176,1031,1032],{"class":196},"        \"fonts\"",[176,1034,200],{"class":189},[176,1036,1037],{"class":203},"\"assets\u002Ffonts\"\n",[176,1039,1041],{"class":178,"line":1040},37,[176,1042,1043],{"class":189},"    }\n",[176,1045,1047],{"class":178,"line":1046},38,[176,1048,353],{"class":189},[15,1050,1051],{},"Key properties:",[595,1053,1054,1060,1066,1072],{},[598,1055,1056,1059],{},[151,1057,1058],{},"entry_points:"," Define which SASS files compile for each application (Shopping, MyAccount, Checkout)",[598,1061,1062,1065],{},[151,1063,1064],{},"templates:"," Map template overrides to applications",[598,1067,1068,1071],{},[151,1069,1070],{},"skins:"," Define color\u002Fstyle variations customers can select",[598,1073,1074,1077],{},[151,1075,1076],{},"assets:"," Reference static resources",[366,1079],{},[25,1081,1083],{"id":1082},"sass-architecture-and-styling","SASS Architecture and Styling",[15,1085,1086],{},"SuiteCommerce uses SASS (SCSS syntax) for styling, with a structured variable system and modular organization. Mastering this architecture is the key to efficient theme development.",[40,1088,1090],{"id":1089},"color-variable-system","Color Variable System",[15,1092,1093],{},"SuiteCommerce defines colors using a semantic naming convention:",[167,1095,1099],{"className":1096,"code":1097,"language":1098,"meta":172,"style":172},"language-scss shiki shiki-themes github-light github-dark","\u002F\u002F Base color definitions (BaseSassStyles\u002F_sc-colors.scss)\n\n\u002F\u002F Theme palette\n$sc-color-theme: #5b7f8c;\n$sc-color-theme-light: #9cb6bf;\n$sc-color-theme-background: #e4eff5;\n$sc-color-theme-background-light: lighten($sc-color-theme-background, 3.5%);\n$sc-color-theme-border: desaturate(darken($sc-color-theme-background, 8%), 3%);\n\n\u002F\u002F Action colors\n$sc-color-primary: #f15c28;\n$sc-color-secondary: #15607B;\n$sc-color-tertiary: #ffffff;\n\n\u002F\u002F Semantic colors\n$sc-color-success: #4a7f35;\n$sc-color-success-background: #eef7e4;\n$sc-color-warning: #8e7728;\n$sc-color-warning-background: #f9f5cd;\n$sc-color-error: #C33C48;\n$sc-color-error-background: #FFE9F1;\n$sc-color-info: $sc-color-theme-light;\n","scss",[81,1100,1101,1106,1110,1115,1129,1141,1153,1181,1217,1221,1226,1238,1250,1262,1266,1271,1283,1295,1307,1319,1331,1343],{"__ignoreMap":172},[176,1102,1103],{"class":178,"line":179},[176,1104,1105],{"class":182},"\u002F\u002F Base color definitions (BaseSassStyles\u002F_sc-colors.scss)\n",[176,1107,1108],{"class":178,"line":186},[176,1109,470],{"emptyLinePlaceholder":469},[176,1111,1112],{"class":178,"line":193},[176,1113,1114],{"class":182},"\u002F\u002F Theme palette\n",[176,1116,1117,1121,1123,1126],{"class":178,"line":210},[176,1118,1120],{"class":1119},"s4XuR","$sc-color-theme",[176,1122,200],{"class":189},[176,1124,1125],{"class":196},"#5b7f8c",[176,1127,1128],{"class":189},";\n",[176,1130,1131,1134,1136,1139],{"class":178,"line":223},[176,1132,1133],{"class":1119},"$sc-color-theme-light",[176,1135,200],{"class":189},[176,1137,1138],{"class":196},"#9cb6bf",[176,1140,1128],{"class":189},[176,1142,1143,1146,1148,1151],{"class":178,"line":236},[176,1144,1145],{"class":1119},"$sc-color-theme-background",[176,1147,200],{"class":189},[176,1149,1150],{"class":196},"#e4eff5",[176,1152,1128],{"class":189},[176,1154,1155,1158,1160,1163,1166,1168,1171,1174,1178],{"class":178,"line":249},[176,1156,1157],{"class":1119},"$sc-color-theme-background-light",[176,1159,200],{"class":189},[176,1161,1162],{"class":196},"lighten",[176,1164,1165],{"class":189},"(",[176,1167,1145],{"class":1119},[176,1169,1170],{"class":189},", ",[176,1172,1173],{"class":196},"3.5",[176,1175,1177],{"class":1176},"szBVR","%",[176,1179,1180],{"class":189},");\n",[176,1182,1183,1186,1188,1191,1193,1196,1198,1200,1202,1205,1207,1210,1213,1215],{"class":178,"line":262},[176,1184,1185],{"class":1119},"$sc-color-theme-border",[176,1187,200],{"class":189},[176,1189,1190],{"class":196},"desaturate",[176,1192,1165],{"class":189},[176,1194,1195],{"class":196},"darken",[176,1197,1165],{"class":189},[176,1199,1145],{"class":1119},[176,1201,1170],{"class":189},[176,1203,1204],{"class":196},"8",[176,1206,1177],{"class":1176},[176,1208,1209],{"class":189},"), ",[176,1211,1212],{"class":196},"3",[176,1214,1177],{"class":1176},[176,1216,1180],{"class":189},[176,1218,1219],{"class":178,"line":275},[176,1220,470],{"emptyLinePlaceholder":469},[176,1222,1223],{"class":178,"line":288},[176,1224,1225],{"class":182},"\u002F\u002F Action colors\n",[176,1227,1228,1231,1233,1236],{"class":178,"line":297},[176,1229,1230],{"class":1119},"$sc-color-primary",[176,1232,200],{"class":189},[176,1234,1235],{"class":196},"#f15c28",[176,1237,1128],{"class":189},[176,1239,1240,1243,1245,1248],{"class":178,"line":303},[176,1241,1242],{"class":1119},"$sc-color-secondary",[176,1244,200],{"class":189},[176,1246,1247],{"class":196},"#15607B",[176,1249,1128],{"class":189},[176,1251,1252,1255,1257,1260],{"class":178,"line":316},[176,1253,1254],{"class":1119},"$sc-color-tertiary",[176,1256,200],{"class":189},[176,1258,1259],{"class":196},"#ffffff",[176,1261,1128],{"class":189},[176,1263,1264],{"class":178,"line":327},[176,1265,470],{"emptyLinePlaceholder":469},[176,1267,1268],{"class":178,"line":333},[176,1269,1270],{"class":182},"\u002F\u002F Semantic colors\n",[176,1272,1273,1276,1278,1281],{"class":178,"line":339},[176,1274,1275],{"class":1119},"$sc-color-success",[176,1277,200],{"class":189},[176,1279,1280],{"class":196},"#4a7f35",[176,1282,1128],{"class":189},[176,1284,1285,1288,1290,1293],{"class":178,"line":350},[176,1286,1287],{"class":1119},"$sc-color-success-background",[176,1289,200],{"class":189},[176,1291,1292],{"class":196},"#eef7e4",[176,1294,1128],{"class":189},[176,1296,1297,1300,1302,1305],{"class":178,"line":877},[176,1298,1299],{"class":1119},"$sc-color-warning",[176,1301,200],{"class":189},[176,1303,1304],{"class":196},"#8e7728",[176,1306,1128],{"class":189},[176,1308,1309,1312,1314,1317],{"class":178,"line":885},[176,1310,1311],{"class":1119},"$sc-color-warning-background",[176,1313,200],{"class":189},[176,1315,1316],{"class":196},"#f9f5cd",[176,1318,1128],{"class":189},[176,1320,1321,1324,1326,1329],{"class":178,"line":898},[176,1322,1323],{"class":1119},"$sc-color-error",[176,1325,200],{"class":189},[176,1327,1328],{"class":196},"#C33C48",[176,1330,1128],{"class":189},[176,1332,1333,1336,1338,1341],{"class":178,"line":911},[176,1334,1335],{"class":1119},"$sc-color-error-background",[176,1337,200],{"class":189},[176,1339,1340],{"class":196},"#FFE9F1",[176,1342,1128],{"class":189},[176,1344,1345,1348,1350,1352],{"class":178,"line":922},[176,1346,1347],{"class":1119},"$sc-color-info",[176,1349,200],{"class":189},[176,1351,1133],{"class":1119},[176,1353,1128],{"class":189},[15,1355,1356,1359],{},[151,1357,1358],{},"Best practice:"," Never use hex values directly in component styles. Always reference or extend these variables. This ensures skin variations work correctly.",[40,1361,1363],{"id":1362},"typography-system","Typography System",[15,1365,1366],{},"Typography uses t-shirt sizing from extra-small to triple-extra-large:",[167,1368,1370],{"className":1096,"code":1369,"language":1098,"meta":172,"style":172},"\u002F\u002F Typography variables (BaseSassStyles\u002F_sc-typography.scss)\n\n\u002F\u002F Font families\n$sc-font-family-base: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n$sc-font-family-heading: $sc-font-family-base;\n$sc-font-family-monospace: 'Source Code Pro', Menlo, Monaco, monospace;\n\n\u002F\u002F Font sizes (using rem for accessibility)\n$sc-font-size-xxxl: 2.5rem;    \u002F\u002F 40px\n$sc-font-size-xxl: 2rem;       \u002F\u002F 32px\n$sc-font-size-xl: 1.5rem;      \u002F\u002F 24px\n$sc-font-size-lg: 1.25rem;     \u002F\u002F 20px\n$sc-font-size-md: 1rem;        \u002F\u002F 16px (base)\n$sc-font-size-sm: 0.875rem;    \u002F\u002F 14px\n$sc-font-size-xs: 0.75rem;     \u002F\u002F 12px\n\n\u002F\u002F Line heights\n$sc-line-height-base: 1.5;\n$sc-line-height-heading: 1.2;\n$sc-line-height-tight: 1.25;\n\n\u002F\u002F Font weights\n$sc-font-weight-light: 300;\n$sc-font-weight-normal: 400;\n$sc-font-weight-medium: 500;\n$sc-font-weight-semibold: 600;\n$sc-font-weight-bold: 700;\n",[81,1371,1372,1377,1381,1386,1418,1429,1447,1451,1456,1475,1493,1511,1529,1547,1564,1581,1585,1590,1601,1613,1624,1628,1633,1645,1657,1669,1681],{"__ignoreMap":172},[176,1373,1374],{"class":178,"line":179},[176,1375,1376],{"class":182},"\u002F\u002F Typography variables (BaseSassStyles\u002F_sc-typography.scss)\n",[176,1378,1379],{"class":178,"line":186},[176,1380,470],{"emptyLinePlaceholder":469},[176,1382,1383],{"class":178,"line":193},[176,1384,1385],{"class":182},"\u002F\u002F Font families\n",[176,1387,1388,1391,1393,1396,1398,1401,1403,1406,1408,1411,1413,1416],{"class":178,"line":210},[176,1389,1390],{"class":1119},"$sc-font-family-base",[176,1392,200],{"class":189},[176,1394,1395],{"class":203},"'Open Sans'",[176,1397,1170],{"class":189},[176,1399,1400],{"class":203},"'Helvetica Neue'",[176,1402,1170],{"class":189},[176,1404,1405],{"class":196},"Helvetica",[176,1407,1170],{"class":189},[176,1409,1410],{"class":196},"Arial",[176,1412,1170],{"class":189},[176,1414,1415],{"class":196},"sans-serif",[176,1417,1128],{"class":189},[176,1419,1420,1423,1425,1427],{"class":178,"line":223},[176,1421,1422],{"class":1119},"$sc-font-family-heading",[176,1424,200],{"class":189},[176,1426,1390],{"class":1119},[176,1428,1128],{"class":189},[176,1430,1431,1434,1436,1439,1442,1445],{"class":178,"line":236},[176,1432,1433],{"class":1119},"$sc-font-family-monospace",[176,1435,200],{"class":189},[176,1437,1438],{"class":203},"'Source Code Pro'",[176,1440,1441],{"class":189},", Menlo, Monaco, ",[176,1443,1444],{"class":196},"monospace",[176,1446,1128],{"class":189},[176,1448,1449],{"class":178,"line":249},[176,1450,470],{"emptyLinePlaceholder":469},[176,1452,1453],{"class":178,"line":262},[176,1454,1455],{"class":182},"\u002F\u002F Font sizes (using rem for accessibility)\n",[176,1457,1458,1461,1463,1466,1469,1472],{"class":178,"line":275},[176,1459,1460],{"class":1119},"$sc-font-size-xxxl",[176,1462,200],{"class":189},[176,1464,1465],{"class":196},"2.5",[176,1467,1468],{"class":1176},"rem",[176,1470,1471],{"class":189},";    ",[176,1473,1474],{"class":182},"\u002F\u002F 40px\n",[176,1476,1477,1480,1482,1485,1487,1490],{"class":178,"line":288},[176,1478,1479],{"class":1119},"$sc-font-size-xxl",[176,1481,200],{"class":189},[176,1483,1484],{"class":196},"2",[176,1486,1468],{"class":1176},[176,1488,1489],{"class":189},";       ",[176,1491,1492],{"class":182},"\u002F\u002F 32px\n",[176,1494,1495,1498,1500,1503,1505,1508],{"class":178,"line":297},[176,1496,1497],{"class":1119},"$sc-font-size-xl",[176,1499,200],{"class":189},[176,1501,1502],{"class":196},"1.5",[176,1504,1468],{"class":1176},[176,1506,1507],{"class":189},";      ",[176,1509,1510],{"class":182},"\u002F\u002F 24px\n",[176,1512,1513,1516,1518,1521,1523,1526],{"class":178,"line":303},[176,1514,1515],{"class":1119},"$sc-font-size-lg",[176,1517,200],{"class":189},[176,1519,1520],{"class":196},"1.25",[176,1522,1468],{"class":1176},[176,1524,1525],{"class":189},";     ",[176,1527,1528],{"class":182},"\u002F\u002F 20px\n",[176,1530,1531,1534,1536,1539,1541,1544],{"class":178,"line":316},[176,1532,1533],{"class":1119},"$sc-font-size-md",[176,1535,200],{"class":189},[176,1537,1538],{"class":196},"1",[176,1540,1468],{"class":1176},[176,1542,1543],{"class":189},";        ",[176,1545,1546],{"class":182},"\u002F\u002F 16px (base)\n",[176,1548,1549,1552,1554,1557,1559,1561],{"class":178,"line":327},[176,1550,1551],{"class":1119},"$sc-font-size-sm",[176,1553,200],{"class":189},[176,1555,1556],{"class":196},"0.875",[176,1558,1468],{"class":1176},[176,1560,1471],{"class":189},[176,1562,1563],{"class":182},"\u002F\u002F 14px\n",[176,1565,1566,1569,1571,1574,1576,1578],{"class":178,"line":333},[176,1567,1568],{"class":1119},"$sc-font-size-xs",[176,1570,200],{"class":189},[176,1572,1573],{"class":196},"0.75",[176,1575,1468],{"class":1176},[176,1577,1525],{"class":189},[176,1579,1580],{"class":182},"\u002F\u002F 12px\n",[176,1582,1583],{"class":178,"line":339},[176,1584,470],{"emptyLinePlaceholder":469},[176,1586,1587],{"class":178,"line":350},[176,1588,1589],{"class":182},"\u002F\u002F Line heights\n",[176,1591,1592,1595,1597,1599],{"class":178,"line":877},[176,1593,1594],{"class":1119},"$sc-line-height-base",[176,1596,200],{"class":189},[176,1598,1502],{"class":196},[176,1600,1128],{"class":189},[176,1602,1603,1606,1608,1611],{"class":178,"line":885},[176,1604,1605],{"class":1119},"$sc-line-height-heading",[176,1607,200],{"class":189},[176,1609,1610],{"class":196},"1.2",[176,1612,1128],{"class":189},[176,1614,1615,1618,1620,1622],{"class":178,"line":898},[176,1616,1617],{"class":1119},"$sc-line-height-tight",[176,1619,200],{"class":189},[176,1621,1520],{"class":196},[176,1623,1128],{"class":189},[176,1625,1626],{"class":178,"line":911},[176,1627,470],{"emptyLinePlaceholder":469},[176,1629,1630],{"class":178,"line":922},[176,1631,1632],{"class":182},"\u002F\u002F Font weights\n",[176,1634,1635,1638,1640,1643],{"class":178,"line":927},[176,1636,1637],{"class":1119},"$sc-font-weight-light",[176,1639,200],{"class":189},[176,1641,1642],{"class":196},"300",[176,1644,1128],{"class":189},[176,1646,1647,1650,1652,1655],{"class":178,"line":932},[176,1648,1649],{"class":1119},"$sc-font-weight-normal",[176,1651,200],{"class":189},[176,1653,1654],{"class":196},"400",[176,1656,1128],{"class":189},[176,1658,1659,1662,1664,1667],{"class":178,"line":939},[176,1660,1661],{"class":1119},"$sc-font-weight-medium",[176,1663,200],{"class":189},[176,1665,1666],{"class":196},"500",[176,1668,1128],{"class":189},[176,1670,1671,1674,1676,1679],{"class":178,"line":944},[176,1672,1673],{"class":1119},"$sc-font-weight-semibold",[176,1675,200],{"class":189},[176,1677,1678],{"class":196},"600",[176,1680,1128],{"class":189},[176,1682,1683,1686,1688,1691],{"class":178,"line":955},[176,1684,1685],{"class":1119},"$sc-font-weight-bold",[176,1687,200],{"class":189},[176,1689,1690],{"class":196},"700",[176,1692,1128],{"class":189},[40,1694,1696],{"id":1695},"creating-a-custom-color-palette","Creating a Custom Color Palette",[15,1698,1699],{},"Let's define a custom brand palette that replaces the defaults:",[167,1701,1703],{"className":1096,"code":1702,"language":1098,"meta":172,"style":172},"\u002F\u002F Modules\u002FBaseSassStyles@1.0.0\u002F_custom-colors.scss\n\n\u002F\u002F Brand colors\n$brand-primary: #2D5A27;      \u002F\u002F Forest green\n$brand-secondary: #8B4513;    \u002F\u002F Saddle brown\n$brand-accent: #DAA520;       \u002F\u002F Goldenrod\n\n\u002F\u002F Override SuiteCommerce theme colors\n$sc-color-theme: $brand-primary;\n$sc-color-theme-light: lighten($brand-primary, 20%);\n$sc-color-theme-background: lighten($brand-primary, 55%);\n$sc-color-theme-background-light: lighten($brand-primary, 60%);\n$sc-color-theme-border: darken($sc-color-theme-background, 10%);\n\n\u002F\u002F Action color overrides\n$sc-color-primary: $brand-accent;\n$sc-color-secondary: $brand-secondary;\n\n\u002F\u002F Semantic colors (keep standard unless brand requires changes)\n$sc-color-success: #2E7D32;\n$sc-color-error: #C62828;\n$sc-color-warning: #F9A825;\n",[81,1704,1705,1710,1714,1719,1734,1749,1764,1768,1773,1783,1804,1825,1846,1867,1871,1876,1886,1896,1900,1905,1916,1927],{"__ignoreMap":172},[176,1706,1707],{"class":178,"line":179},[176,1708,1709],{"class":182},"\u002F\u002F Modules\u002FBaseSassStyles@1.0.0\u002F_custom-colors.scss\n",[176,1711,1712],{"class":178,"line":186},[176,1713,470],{"emptyLinePlaceholder":469},[176,1715,1716],{"class":178,"line":193},[176,1717,1718],{"class":182},"\u002F\u002F Brand colors\n",[176,1720,1721,1724,1726,1729,1731],{"class":178,"line":210},[176,1722,1723],{"class":1119},"$brand-primary",[176,1725,200],{"class":189},[176,1727,1728],{"class":196},"#2D5A27",[176,1730,1507],{"class":189},[176,1732,1733],{"class":182},"\u002F\u002F Forest green\n",[176,1735,1736,1739,1741,1744,1746],{"class":178,"line":223},[176,1737,1738],{"class":1119},"$brand-secondary",[176,1740,200],{"class":189},[176,1742,1743],{"class":196},"#8B4513",[176,1745,1471],{"class":189},[176,1747,1748],{"class":182},"\u002F\u002F Saddle brown\n",[176,1750,1751,1754,1756,1759,1761],{"class":178,"line":236},[176,1752,1753],{"class":1119},"$brand-accent",[176,1755,200],{"class":189},[176,1757,1758],{"class":196},"#DAA520",[176,1760,1489],{"class":189},[176,1762,1763],{"class":182},"\u002F\u002F Goldenrod\n",[176,1765,1766],{"class":178,"line":249},[176,1767,470],{"emptyLinePlaceholder":469},[176,1769,1770],{"class":178,"line":262},[176,1771,1772],{"class":182},"\u002F\u002F Override SuiteCommerce theme colors\n",[176,1774,1775,1777,1779,1781],{"class":178,"line":275},[176,1776,1120],{"class":1119},[176,1778,200],{"class":189},[176,1780,1723],{"class":1119},[176,1782,1128],{"class":189},[176,1784,1785,1787,1789,1791,1793,1795,1797,1800,1802],{"class":178,"line":288},[176,1786,1133],{"class":1119},[176,1788,200],{"class":189},[176,1790,1162],{"class":196},[176,1792,1165],{"class":189},[176,1794,1723],{"class":1119},[176,1796,1170],{"class":189},[176,1798,1799],{"class":196},"20",[176,1801,1177],{"class":1176},[176,1803,1180],{"class":189},[176,1805,1806,1808,1810,1812,1814,1816,1818,1821,1823],{"class":178,"line":297},[176,1807,1145],{"class":1119},[176,1809,200],{"class":189},[176,1811,1162],{"class":196},[176,1813,1165],{"class":189},[176,1815,1723],{"class":1119},[176,1817,1170],{"class":189},[176,1819,1820],{"class":196},"55",[176,1822,1177],{"class":1176},[176,1824,1180],{"class":189},[176,1826,1827,1829,1831,1833,1835,1837,1839,1842,1844],{"class":178,"line":303},[176,1828,1157],{"class":1119},[176,1830,200],{"class":189},[176,1832,1162],{"class":196},[176,1834,1165],{"class":189},[176,1836,1723],{"class":1119},[176,1838,1170],{"class":189},[176,1840,1841],{"class":196},"60",[176,1843,1177],{"class":1176},[176,1845,1180],{"class":189},[176,1847,1848,1850,1852,1854,1856,1858,1860,1863,1865],{"class":178,"line":316},[176,1849,1185],{"class":1119},[176,1851,200],{"class":189},[176,1853,1195],{"class":196},[176,1855,1165],{"class":189},[176,1857,1145],{"class":1119},[176,1859,1170],{"class":189},[176,1861,1862],{"class":196},"10",[176,1864,1177],{"class":1176},[176,1866,1180],{"class":189},[176,1868,1869],{"class":178,"line":327},[176,1870,470],{"emptyLinePlaceholder":469},[176,1872,1873],{"class":178,"line":333},[176,1874,1875],{"class":182},"\u002F\u002F Action color overrides\n",[176,1877,1878,1880,1882,1884],{"class":178,"line":339},[176,1879,1230],{"class":1119},[176,1881,200],{"class":189},[176,1883,1753],{"class":1119},[176,1885,1128],{"class":189},[176,1887,1888,1890,1892,1894],{"class":178,"line":350},[176,1889,1242],{"class":1119},[176,1891,200],{"class":189},[176,1893,1738],{"class":1119},[176,1895,1128],{"class":189},[176,1897,1898],{"class":178,"line":877},[176,1899,470],{"emptyLinePlaceholder":469},[176,1901,1902],{"class":178,"line":885},[176,1903,1904],{"class":182},"\u002F\u002F Semantic colors (keep standard unless brand requires changes)\n",[176,1906,1907,1909,1911,1914],{"class":178,"line":898},[176,1908,1275],{"class":1119},[176,1910,200],{"class":189},[176,1912,1913],{"class":196},"#2E7D32",[176,1915,1128],{"class":189},[176,1917,1918,1920,1922,1925],{"class":178,"line":911},[176,1919,1323],{"class":1119},[176,1921,200],{"class":189},[176,1923,1924],{"class":196},"#C62828",[176,1926,1128],{"class":189},[176,1928,1929,1931,1933,1936],{"class":178,"line":922},[176,1930,1299],{"class":1119},[176,1932,200],{"class":189},[176,1934,1935],{"class":196},"#F9A825",[176,1937,1128],{"class":189},[40,1939,1941],{"id":1940},"module-specific-styling","Module-Specific Styling",[15,1943,1944],{},"Each component in SuiteCommerce has its own SASS module. To customize the header:",[167,1946,1948],{"className":1096,"code":1947,"language":1098,"meta":172,"style":172},"\u002F\u002F Modules\u002FHeader@1.0.0\u002F_header.scss\n\n.header-main {\n    background-color: $sc-color-theme;\n    padding: $sc-spacing-md $sc-spacing-lg;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\n    &__logo {\n        max-height: 60px;\n        width: auto;\n        \n        @media (max-width: $sc-breakpoint-md) {\n            max-height: 45px;\n        }\n    }\n\n    &__navigation {\n        display: flex;\n        align-items: center;\n        gap: $sc-spacing-lg;\n    }\n\n    &__nav-link {\n        color: $sc-color-tertiary;\n        font-size: $sc-font-size-sm;\n        font-weight: $sc-font-weight-medium;\n        text-decoration: none;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        transition: color 0.2s ease;\n\n        &:hover,\n        &:focus {\n            color: $sc-color-primary;\n        }\n\n        &--active {\n            color: $sc-color-primary;\n            border-bottom: 2px solid $sc-color-primary;\n            padding-bottom: 4px;\n        }\n    }\n}\n",[81,1949,1950,1955,1959,1967,1978,1993,2036,2040,2051,2064,2076,2081,2100,2114,2118,2122,2126,2135,2147,2159,2171,2175,2179,2188,2199,2210,2221,2233,2245,2259,2280,2284,2294,2303,2314,2318,2322,2331,2341,2361,2376,2381,2386],{"__ignoreMap":172},[176,1951,1952],{"class":178,"line":179},[176,1953,1954],{"class":182},"\u002F\u002F Modules\u002FHeader@1.0.0\u002F_header.scss\n",[176,1956,1957],{"class":178,"line":186},[176,1958,470],{"emptyLinePlaceholder":469},[176,1960,1961,1964],{"class":178,"line":193},[176,1962,1963],{"class":398},".header-main",[176,1965,1966],{"class":189}," {\n",[176,1968,1969,1972,1974,1976],{"class":178,"line":210},[176,1970,1971],{"class":196},"    background-color",[176,1973,200],{"class":189},[176,1975,1120],{"class":1119},[176,1977,1128],{"class":189},[176,1979,1980,1983,1985,1988,1991],{"class":178,"line":223},[176,1981,1982],{"class":196},"    padding",[176,1984,200],{"class":189},[176,1986,1987],{"class":1119},"$sc-spacing-md",[176,1989,1990],{"class":1119}," $sc-spacing-lg",[176,1992,1128],{"class":189},[176,1994,1995,1998,2000,2003,2006,2009,2012,2014,2017,2019,2021,2023,2025,2027,2029,2031,2034],{"class":178,"line":236},[176,1996,1997],{"class":196},"    box-shadow",[176,1999,200],{"class":189},[176,2001,2002],{"class":196},"0",[176,2004,2005],{"class":196}," 2",[176,2007,2008],{"class":1176},"px",[176,2010,2011],{"class":196}," 8",[176,2013,2008],{"class":1176},[176,2015,2016],{"class":196}," rgba",[176,2018,1165],{"class":189},[176,2020,2002],{"class":196},[176,2022,1170],{"class":189},[176,2024,2002],{"class":196},[176,2026,1170],{"class":189},[176,2028,2002],{"class":196},[176,2030,1170],{"class":189},[176,2032,2033],{"class":196},"0.1",[176,2035,1180],{"class":189},[176,2037,2038],{"class":178,"line":249},[176,2039,470],{"emptyLinePlaceholder":469},[176,2041,2042,2046,2049],{"class":178,"line":262},[176,2043,2045],{"class":2044},"s9eBZ","    &",[176,2047,2048],{"class":398},"__logo",[176,2050,1966],{"class":189},[176,2052,2053,2056,2058,2060,2062],{"class":178,"line":275},[176,2054,2055],{"class":196},"        max-height",[176,2057,200],{"class":189},[176,2059,1841],{"class":196},[176,2061,2008],{"class":1176},[176,2063,1128],{"class":189},[176,2065,2066,2069,2071,2074],{"class":178,"line":288},[176,2067,2068],{"class":196},"        width",[176,2070,200],{"class":189},[176,2072,2073],{"class":196},"auto",[176,2075,1128],{"class":189},[176,2077,2078],{"class":178,"line":297},[176,2079,2080],{"class":189},"        \n",[176,2082,2083,2086,2089,2092,2094,2097],{"class":178,"line":303},[176,2084,2085],{"class":1176},"        @media",[176,2087,2088],{"class":189}," (",[176,2090,2091],{"class":196},"max-width",[176,2093,200],{"class":189},[176,2095,2096],{"class":1119},"$sc-breakpoint-md",[176,2098,2099],{"class":189},") {\n",[176,2101,2102,2105,2107,2110,2112],{"class":178,"line":316},[176,2103,2104],{"class":196},"            max-height",[176,2106,200],{"class":189},[176,2108,2109],{"class":196},"45",[176,2111,2008],{"class":1176},[176,2113,1128],{"class":189},[176,2115,2116],{"class":178,"line":327},[176,2117,330],{"class":189},[176,2119,2120],{"class":178,"line":333},[176,2121,1043],{"class":189},[176,2123,2124],{"class":178,"line":339},[176,2125,470],{"emptyLinePlaceholder":469},[176,2127,2128,2130,2133],{"class":178,"line":350},[176,2129,2045],{"class":2044},[176,2131,2132],{"class":398},"__navigation",[176,2134,1966],{"class":189},[176,2136,2137,2140,2142,2145],{"class":178,"line":877},[176,2138,2139],{"class":196},"        display",[176,2141,200],{"class":189},[176,2143,2144],{"class":196},"flex",[176,2146,1128],{"class":189},[176,2148,2149,2152,2154,2157],{"class":178,"line":885},[176,2150,2151],{"class":196},"        align-items",[176,2153,200],{"class":189},[176,2155,2156],{"class":196},"center",[176,2158,1128],{"class":189},[176,2160,2161,2164,2166,2169],{"class":178,"line":898},[176,2162,2163],{"class":196},"        gap",[176,2165,200],{"class":189},[176,2167,2168],{"class":1119},"$sc-spacing-lg",[176,2170,1128],{"class":189},[176,2172,2173],{"class":178,"line":911},[176,2174,1043],{"class":189},[176,2176,2177],{"class":178,"line":922},[176,2178,470],{"emptyLinePlaceholder":469},[176,2180,2181,2183,2186],{"class":178,"line":927},[176,2182,2045],{"class":2044},[176,2184,2185],{"class":398},"__nav-link",[176,2187,1966],{"class":189},[176,2189,2190,2193,2195,2197],{"class":178,"line":932},[176,2191,2192],{"class":196},"        color",[176,2194,200],{"class":189},[176,2196,1254],{"class":1119},[176,2198,1128],{"class":189},[176,2200,2201,2204,2206,2208],{"class":178,"line":939},[176,2202,2203],{"class":196},"        font-size",[176,2205,200],{"class":189},[176,2207,1551],{"class":1119},[176,2209,1128],{"class":189},[176,2211,2212,2215,2217,2219],{"class":178,"line":944},[176,2213,2214],{"class":196},"        font-weight",[176,2216,200],{"class":189},[176,2218,1661],{"class":1119},[176,2220,1128],{"class":189},[176,2222,2223,2226,2228,2231],{"class":178,"line":955},[176,2224,2225],{"class":196},"        text-decoration",[176,2227,200],{"class":189},[176,2229,2230],{"class":196},"none",[176,2232,1128],{"class":189},[176,2234,2235,2238,2240,2243],{"class":178,"line":965},[176,2236,2237],{"class":196},"        text-transform",[176,2239,200],{"class":189},[176,2241,2242],{"class":196},"uppercase",[176,2244,1128],{"class":189},[176,2246,2247,2250,2252,2255,2257],{"class":178,"line":971},[176,2248,2249],{"class":196},"        letter-spacing",[176,2251,200],{"class":189},[176,2253,2254],{"class":196},"0.5",[176,2256,2008],{"class":1176},[176,2258,1128],{"class":189},[176,2260,2261,2264,2266,2269,2272,2275,2278],{"class":178,"line":976},[176,2262,2263],{"class":196},"        transition",[176,2265,200],{"class":189},[176,2267,2268],{"class":196},"color",[176,2270,2271],{"class":196}," 0.2",[176,2273,2274],{"class":1176},"s",[176,2276,2277],{"class":196}," ease",[176,2279,1128],{"class":189},[176,2281,2282],{"class":178,"line":988},[176,2283,470],{"emptyLinePlaceholder":469},[176,2285,2286,2289,2292],{"class":178,"line":998},[176,2287,2288],{"class":2044},"        &",[176,2290,2291],{"class":398},":hover",[176,2293,207],{"class":189},[176,2295,2296,2298,2301],{"class":178,"line":1003},[176,2297,2288],{"class":2044},[176,2299,2300],{"class":398},":focus",[176,2302,1966],{"class":189},[176,2304,2305,2308,2310,2312],{"class":178,"line":1008},[176,2306,2307],{"class":196},"            color",[176,2309,200],{"class":189},[176,2311,1230],{"class":1119},[176,2313,1128],{"class":189},[176,2315,2316],{"class":178,"line":1016},[176,2317,330],{"class":189},[176,2319,2320],{"class":178,"line":1029},[176,2321,470],{"emptyLinePlaceholder":469},[176,2323,2324,2326,2329],{"class":178,"line":1040},[176,2325,2288],{"class":2044},[176,2327,2328],{"class":1119},"--active",[176,2330,1966],{"class":189},[176,2332,2333,2335,2337,2339],{"class":178,"line":1046},[176,2334,2307],{"class":196},[176,2336,200],{"class":189},[176,2338,1230],{"class":1119},[176,2340,1128],{"class":189},[176,2342,2344,2347,2349,2351,2353,2356,2359],{"class":178,"line":2343},39,[176,2345,2346],{"class":196},"            border-bottom",[176,2348,200],{"class":189},[176,2350,1484],{"class":196},[176,2352,2008],{"class":1176},[176,2354,2355],{"class":196}," solid",[176,2357,2358],{"class":1119}," $sc-color-primary",[176,2360,1128],{"class":189},[176,2362,2364,2367,2369,2372,2374],{"class":178,"line":2363},40,[176,2365,2366],{"class":196},"            padding-bottom",[176,2368,200],{"class":189},[176,2370,2371],{"class":196},"4",[176,2373,2008],{"class":1176},[176,2375,1128],{"class":189},[176,2377,2379],{"class":178,"line":2378},41,[176,2380,330],{"class":189},[176,2382,2384],{"class":178,"line":2383},42,[176,2385,1043],{"class":189},[176,2387,2389],{"class":178,"line":2388},43,[176,2390,353],{"class":189},[40,2392,2394],{"id":2393},"sass-entry-points","SASS Entry Points",[15,2396,2397],{},"Entry points control which files compile into your final CSS bundles. Each application (Shopping, MyAccount, Checkout) has its own entry point:",[167,2399,2401],{"className":1096,"code":2400,"language":1098,"meta":172,"style":172},"\u002F\u002F Modules\u002FBaseSassStyles@1.0.0\u002Findex-shopping.scss\n\n\u002F\u002F Base imports (order matters!)\n@import 'sc-variables';        \u002F\u002F All variable definitions\n@import 'sc-mixins';           \u002F\u002F Reusable style mixins\n@import 'custom-colors';       \u002F\u002F Your custom color overrides\n@import 'sc-reset';            \u002F\u002F CSS reset\u002Fnormalize\n@import 'sc-typography';       \u002F\u002F Type styles\n@import 'sc-grid';             \u002F\u002F Grid system\n@import 'sc-utilities';        \u002F\u002F Helper classes\n\n\u002F\u002F Component imports\n@import '..\u002FHeader@1.0.0\u002Fheader';\n@import '..\u002FFooter@1.0.0\u002Ffooter';\n@import '..\u002FProductList@1.0.0\u002Fproduct-list';\n@import '..\u002FProductDetails@1.0.0\u002Fproduct-details';\n@import '..\u002FCart@1.0.0\u002Fcart';\n@import '..\u002FFacets@1.0.0\u002Ffacets';\n\n\u002F\u002F Custom module imports\n@import '..\u002FCustomBanner@1.0.0\u002Fcustom-banner';\n@import '..\u002FCustomPromo@1.0.0\u002Fcustom-promo';\n",[81,2402,2403,2408,2412,2417,2430,2443,2455,2468,2480,2493,2505,2509,2514,2523,2532,2541,2550,2559,2568,2572,2577,2586],{"__ignoreMap":172},[176,2404,2405],{"class":178,"line":179},[176,2406,2407],{"class":182},"\u002F\u002F Modules\u002FBaseSassStyles@1.0.0\u002Findex-shopping.scss\n",[176,2409,2410],{"class":178,"line":186},[176,2411,470],{"emptyLinePlaceholder":469},[176,2413,2414],{"class":178,"line":193},[176,2415,2416],{"class":182},"\u002F\u002F Base imports (order matters!)\n",[176,2418,2419,2422,2425,2427],{"class":178,"line":210},[176,2420,2421],{"class":1176},"@import",[176,2423,2424],{"class":203}," 'sc-variables'",[176,2426,1543],{"class":189},[176,2428,2429],{"class":182},"\u002F\u002F All variable definitions\n",[176,2431,2432,2434,2437,2440],{"class":178,"line":223},[176,2433,2421],{"class":1176},[176,2435,2436],{"class":203}," 'sc-mixins'",[176,2438,2439],{"class":189},";           ",[176,2441,2442],{"class":182},"\u002F\u002F Reusable style mixins\n",[176,2444,2445,2447,2450,2452],{"class":178,"line":236},[176,2446,2421],{"class":1176},[176,2448,2449],{"class":203}," 'custom-colors'",[176,2451,1489],{"class":189},[176,2453,2454],{"class":182},"\u002F\u002F Your custom color overrides\n",[176,2456,2457,2459,2462,2465],{"class":178,"line":249},[176,2458,2421],{"class":1176},[176,2460,2461],{"class":203}," 'sc-reset'",[176,2463,2464],{"class":189},";            ",[176,2466,2467],{"class":182},"\u002F\u002F CSS reset\u002Fnormalize\n",[176,2469,2470,2472,2475,2477],{"class":178,"line":262},[176,2471,2421],{"class":1176},[176,2473,2474],{"class":203}," 'sc-typography'",[176,2476,1489],{"class":189},[176,2478,2479],{"class":182},"\u002F\u002F Type styles\n",[176,2481,2482,2484,2487,2490],{"class":178,"line":275},[176,2483,2421],{"class":1176},[176,2485,2486],{"class":203}," 'sc-grid'",[176,2488,2489],{"class":189},";             ",[176,2491,2492],{"class":182},"\u002F\u002F Grid system\n",[176,2494,2495,2497,2500,2502],{"class":178,"line":288},[176,2496,2421],{"class":1176},[176,2498,2499],{"class":203}," 'sc-utilities'",[176,2501,1543],{"class":189},[176,2503,2504],{"class":182},"\u002F\u002F Helper classes\n",[176,2506,2507],{"class":178,"line":297},[176,2508,470],{"emptyLinePlaceholder":469},[176,2510,2511],{"class":178,"line":303},[176,2512,2513],{"class":182},"\u002F\u002F Component imports\n",[176,2515,2516,2518,2521],{"class":178,"line":316},[176,2517,2421],{"class":1176},[176,2519,2520],{"class":203}," '..\u002FHeader@1.0.0\u002Fheader'",[176,2522,1128],{"class":189},[176,2524,2525,2527,2530],{"class":178,"line":327},[176,2526,2421],{"class":1176},[176,2528,2529],{"class":203}," '..\u002FFooter@1.0.0\u002Ffooter'",[176,2531,1128],{"class":189},[176,2533,2534,2536,2539],{"class":178,"line":333},[176,2535,2421],{"class":1176},[176,2537,2538],{"class":203}," '..\u002FProductList@1.0.0\u002Fproduct-list'",[176,2540,1128],{"class":189},[176,2542,2543,2545,2548],{"class":178,"line":339},[176,2544,2421],{"class":1176},[176,2546,2547],{"class":203}," '..\u002FProductDetails@1.0.0\u002Fproduct-details'",[176,2549,1128],{"class":189},[176,2551,2552,2554,2557],{"class":178,"line":350},[176,2553,2421],{"class":1176},[176,2555,2556],{"class":203}," '..\u002FCart@1.0.0\u002Fcart'",[176,2558,1128],{"class":189},[176,2560,2561,2563,2566],{"class":178,"line":877},[176,2562,2421],{"class":1176},[176,2564,2565],{"class":203}," '..\u002FFacets@1.0.0\u002Ffacets'",[176,2567,1128],{"class":189},[176,2569,2570],{"class":178,"line":885},[176,2571,470],{"emptyLinePlaceholder":469},[176,2573,2574],{"class":178,"line":898},[176,2575,2576],{"class":182},"\u002F\u002F Custom module imports\n",[176,2578,2579,2581,2584],{"class":178,"line":911},[176,2580,2421],{"class":1176},[176,2582,2583],{"class":203}," '..\u002FCustomBanner@1.0.0\u002Fcustom-banner'",[176,2585,1128],{"class":189},[176,2587,2588,2590,2593],{"class":178,"line":922},[176,2589,2421],{"class":1176},[176,2591,2592],{"class":203}," '..\u002FCustomPromo@1.0.0\u002Fcustom-promo'",[176,2594,1128],{"class":189},[366,2596],{},[25,2598,2600],{"id":2599},"template-customization","Template Customization",[15,2602,2603,2604,2606],{},"SuiteCommerce uses Handlebars templates (",[81,2605,97],{}," files) for HTML structure. Templates receive data from Backbone views and render dynamic content.",[40,2608,2610],{"id":2609},"template-syntax-basics","Template Syntax Basics",[167,2612,2616],{"className":2613,"code":2614,"language":2615,"meta":172,"style":172},"language-handlebars shiki shiki-themes github-light github-dark","{{!-- Modules\u002FProductDetails@1.0.0\u002FTemplates\u002Fproduct_details_full.tpl --}}\n\n\u003Cdiv class=\"product-details\" itemscope itemtype=\"https:\u002F\u002Fschema.org\u002FProduct\">\n    {{!-- Image gallery --}}\n    \u003Cdiv class=\"product-details__gallery\">\n        {{#if images.length}}\n            \u003Cdiv data-view=\"ProductDetails.ImageGallery\">\u003C\u002Fdiv>\n        {{else}}\n            \u003Cimg src=\"{{resizeImage thumbnail.url 'main'}}\" \n                 alt=\"{{thumbnail.altimagetext}}\"\n                 class=\"product-details__main-image\">\n        {{\u002Fif}}\n    \u003C\u002Fdiv>\n\n    {{!-- Product info --}}\n    \u003Cdiv class=\"product-details__info\">\n        \u003Ch1 class=\"product-details__name\" itemprop=\"name\">\n            {{pageHeader}}\n        \u003C\u002Fh1>\n\n        {{#if showRating}}\n            \u003Cdiv class=\"product-details__rating\" data-view=\"Rating\">\u003C\u002Fdiv>\n        {{\u002Fif}}\n\n        \u003Cdiv class=\"product-details__price\" itemprop=\"offers\" itemscope itemtype=\"https:\u002F\u002Fschema.org\u002FOffer\">\n            {{#if onSale}}\n                \u003Cspan class=\"product-details__price-original\">\n                    {{item._priceFormatted}}\n                \u003C\u002Fspan>\n                \u003Cspan class=\"product-details__price-sale\" itemprop=\"price\" content=\"{{item._price}}\">\n                    {{item._comparePriceFormatted}}\n                \u003C\u002Fspan>\n            {{else}}\n                \u003Cspan class=\"product-details__price-current\" itemprop=\"price\" content=\"{{item._price}}\">\n                    {{item._priceFormatted}}\n                \u003C\u002Fspan>\n            {{\u002Fif}}\n            \u003Cmeta itemprop=\"priceCurrency\" content=\"{{currency}}\">\n        \u003C\u002Fdiv>\n\n        {{!-- Quantity and Add to Cart --}}\n        \u003Cdiv class=\"product-details__actions\">\n            \u003Cdiv class=\"product-details__quantity\">\n                \u003Clabel for=\"quantity\">{{translate 'Quantity:'}}\u003C\u002Flabel>\n                \u003Cinput type=\"number\" \n                       id=\"quantity\" \n                       name=\"quantity\" \n                       value=\"{{quantity}}\" \n                       min=\"{{minimumQuantity}}\"\n                       class=\"product-details__quantity-input\"\n                       data-action=\"setQuantity\">\n            \u003C\u002Fdiv>\n\n            \u003Cbutton class=\"product-details__add-to-cart {{#unless isReadyForCart}}disabled{{\u002Funless}}\"\n                    data-action=\"addToCart\"\n                    {{#unless isReadyForCart}}disabled{{\u002Funless}}>\n                {{translate 'Add to Cart'}}\n            \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","handlebars",[81,2617,2618,2623,2627,2632,2637,2642,2647,2652,2657,2662,2667,2672,2677,2682,2686,2691,2696,2701,2706,2711,2715,2720,2725,2729,2733,2738,2743,2748,2753,2758,2763,2768,2772,2777,2782,2786,2790,2795,2800,2805,2809,2814,2819,2824,2830,2836,2842,2848,2854,2860,2866,2872,2878,2883,2889,2895,2901,2907,2913,2918,2923],{"__ignoreMap":172},[176,2619,2620],{"class":178,"line":179},[176,2621,2622],{},"{{!-- Modules\u002FProductDetails@1.0.0\u002FTemplates\u002Fproduct_details_full.tpl --}}\n",[176,2624,2625],{"class":178,"line":186},[176,2626,470],{"emptyLinePlaceholder":469},[176,2628,2629],{"class":178,"line":193},[176,2630,2631],{},"\u003Cdiv class=\"product-details\" itemscope itemtype=\"https:\u002F\u002Fschema.org\u002FProduct\">\n",[176,2633,2634],{"class":178,"line":210},[176,2635,2636],{},"    {{!-- Image gallery --}}\n",[176,2638,2639],{"class":178,"line":223},[176,2640,2641],{},"    \u003Cdiv class=\"product-details__gallery\">\n",[176,2643,2644],{"class":178,"line":236},[176,2645,2646],{},"        {{#if images.length}}\n",[176,2648,2649],{"class":178,"line":249},[176,2650,2651],{},"            \u003Cdiv data-view=\"ProductDetails.ImageGallery\">\u003C\u002Fdiv>\n",[176,2653,2654],{"class":178,"line":262},[176,2655,2656],{},"        {{else}}\n",[176,2658,2659],{"class":178,"line":275},[176,2660,2661],{},"            \u003Cimg src=\"{{resizeImage thumbnail.url 'main'}}\" \n",[176,2663,2664],{"class":178,"line":288},[176,2665,2666],{},"                 alt=\"{{thumbnail.altimagetext}}\"\n",[176,2668,2669],{"class":178,"line":297},[176,2670,2671],{},"                 class=\"product-details__main-image\">\n",[176,2673,2674],{"class":178,"line":303},[176,2675,2676],{},"        {{\u002Fif}}\n",[176,2678,2679],{"class":178,"line":316},[176,2680,2681],{},"    \u003C\u002Fdiv>\n",[176,2683,2684],{"class":178,"line":327},[176,2685,470],{"emptyLinePlaceholder":469},[176,2687,2688],{"class":178,"line":333},[176,2689,2690],{},"    {{!-- Product info --}}\n",[176,2692,2693],{"class":178,"line":339},[176,2694,2695],{},"    \u003Cdiv class=\"product-details__info\">\n",[176,2697,2698],{"class":178,"line":350},[176,2699,2700],{},"        \u003Ch1 class=\"product-details__name\" itemprop=\"name\">\n",[176,2702,2703],{"class":178,"line":877},[176,2704,2705],{},"            {{pageHeader}}\n",[176,2707,2708],{"class":178,"line":885},[176,2709,2710],{},"        \u003C\u002Fh1>\n",[176,2712,2713],{"class":178,"line":898},[176,2714,470],{"emptyLinePlaceholder":469},[176,2716,2717],{"class":178,"line":911},[176,2718,2719],{},"        {{#if showRating}}\n",[176,2721,2722],{"class":178,"line":922},[176,2723,2724],{},"            \u003Cdiv class=\"product-details__rating\" data-view=\"Rating\">\u003C\u002Fdiv>\n",[176,2726,2727],{"class":178,"line":927},[176,2728,2676],{},[176,2730,2731],{"class":178,"line":932},[176,2732,470],{"emptyLinePlaceholder":469},[176,2734,2735],{"class":178,"line":939},[176,2736,2737],{},"        \u003Cdiv class=\"product-details__price\" itemprop=\"offers\" itemscope itemtype=\"https:\u002F\u002Fschema.org\u002FOffer\">\n",[176,2739,2740],{"class":178,"line":944},[176,2741,2742],{},"            {{#if onSale}}\n",[176,2744,2745],{"class":178,"line":955},[176,2746,2747],{},"                \u003Cspan class=\"product-details__price-original\">\n",[176,2749,2750],{"class":178,"line":965},[176,2751,2752],{},"                    {{item._priceFormatted}}\n",[176,2754,2755],{"class":178,"line":971},[176,2756,2757],{},"                \u003C\u002Fspan>\n",[176,2759,2760],{"class":178,"line":976},[176,2761,2762],{},"                \u003Cspan class=\"product-details__price-sale\" itemprop=\"price\" content=\"{{item._price}}\">\n",[176,2764,2765],{"class":178,"line":988},[176,2766,2767],{},"                    {{item._comparePriceFormatted}}\n",[176,2769,2770],{"class":178,"line":998},[176,2771,2757],{},[176,2773,2774],{"class":178,"line":1003},[176,2775,2776],{},"            {{else}}\n",[176,2778,2779],{"class":178,"line":1008},[176,2780,2781],{},"                \u003Cspan class=\"product-details__price-current\" itemprop=\"price\" content=\"{{item._price}}\">\n",[176,2783,2784],{"class":178,"line":1016},[176,2785,2752],{},[176,2787,2788],{"class":178,"line":1029},[176,2789,2757],{},[176,2791,2792],{"class":178,"line":1040},[176,2793,2794],{},"            {{\u002Fif}}\n",[176,2796,2797],{"class":178,"line":1046},[176,2798,2799],{},"            \u003Cmeta itemprop=\"priceCurrency\" content=\"{{currency}}\">\n",[176,2801,2802],{"class":178,"line":2343},[176,2803,2804],{},"        \u003C\u002Fdiv>\n",[176,2806,2807],{"class":178,"line":2363},[176,2808,470],{"emptyLinePlaceholder":469},[176,2810,2811],{"class":178,"line":2378},[176,2812,2813],{},"        {{!-- Quantity and Add to Cart --}}\n",[176,2815,2816],{"class":178,"line":2383},[176,2817,2818],{},"        \u003Cdiv class=\"product-details__actions\">\n",[176,2820,2821],{"class":178,"line":2388},[176,2822,2823],{},"            \u003Cdiv class=\"product-details__quantity\">\n",[176,2825,2827],{"class":178,"line":2826},44,[176,2828,2829],{},"                \u003Clabel for=\"quantity\">{{translate 'Quantity:'}}\u003C\u002Flabel>\n",[176,2831,2833],{"class":178,"line":2832},45,[176,2834,2835],{},"                \u003Cinput type=\"number\" \n",[176,2837,2839],{"class":178,"line":2838},46,[176,2840,2841],{},"                       id=\"quantity\" \n",[176,2843,2845],{"class":178,"line":2844},47,[176,2846,2847],{},"                       name=\"quantity\" \n",[176,2849,2851],{"class":178,"line":2850},48,[176,2852,2853],{},"                       value=\"{{quantity}}\" \n",[176,2855,2857],{"class":178,"line":2856},49,[176,2858,2859],{},"                       min=\"{{minimumQuantity}}\"\n",[176,2861,2863],{"class":178,"line":2862},50,[176,2864,2865],{},"                       class=\"product-details__quantity-input\"\n",[176,2867,2869],{"class":178,"line":2868},51,[176,2870,2871],{},"                       data-action=\"setQuantity\">\n",[176,2873,2875],{"class":178,"line":2874},52,[176,2876,2877],{},"            \u003C\u002Fdiv>\n",[176,2879,2881],{"class":178,"line":2880},53,[176,2882,470],{"emptyLinePlaceholder":469},[176,2884,2886],{"class":178,"line":2885},54,[176,2887,2888],{},"            \u003Cbutton class=\"product-details__add-to-cart {{#unless isReadyForCart}}disabled{{\u002Funless}}\"\n",[176,2890,2892],{"class":178,"line":2891},55,[176,2893,2894],{},"                    data-action=\"addToCart\"\n",[176,2896,2898],{"class":178,"line":2897},56,[176,2899,2900],{},"                    {{#unless isReadyForCart}}disabled{{\u002Funless}}>\n",[176,2902,2904],{"class":178,"line":2903},57,[176,2905,2906],{},"                {{translate 'Add to Cart'}}\n",[176,2908,2910],{"class":178,"line":2909},58,[176,2911,2912],{},"            \u003C\u002Fbutton>\n",[176,2914,2916],{"class":178,"line":2915},59,[176,2917,2804],{},[176,2919,2921],{"class":178,"line":2920},60,[176,2922,2681],{},[176,2924,2926],{"class":178,"line":2925},61,[176,2927,2928],{},"\u003C\u002Fdiv>\n",[40,2930,2932],{"id":2931},"key-handlebars-helpers","Key Handlebars Helpers",[15,2934,2935],{},"SuiteCommerce provides custom helpers for common patterns:",[167,2937,2939],{"className":2613,"code":2938,"language":2615,"meta":172,"style":172},"{{!-- Translation (i18n) --}}\n{{translate 'Add to Cart'}}\n{{translate 'Items: $(0)' itemCount}}\n\n{{!-- Image resizing --}}\n{{resizeImage url 'thumbnail'}}\n{{resizeImage url 'main'}}\n{{resizeImage url 'zoom'}}\n\n{{!-- URL generation --}}\n{{objectToAtrributes item}}\n\n{{!-- Conditional blocks --}}\n{{#if condition}}...{{\u002Fif}}\n{{#unless condition}}...{{\u002Funless}}\n{{#each collection}}...{{\u002Feach}}\n\n{{!-- Child view placeholders --}}\n\u003Cdiv data-view=\"ChildViewName\">\u003C\u002Fdiv>\n",[81,2940,2941,2946,2951,2956,2960,2965,2970,2975,2980,2984,2989,2994,2998,3003,3008,3013,3018,3022,3027],{"__ignoreMap":172},[176,2942,2943],{"class":178,"line":179},[176,2944,2945],{},"{{!-- Translation (i18n) --}}\n",[176,2947,2948],{"class":178,"line":186},[176,2949,2950],{},"{{translate 'Add to Cart'}}\n",[176,2952,2953],{"class":178,"line":193},[176,2954,2955],{},"{{translate 'Items: $(0)' itemCount}}\n",[176,2957,2958],{"class":178,"line":210},[176,2959,470],{"emptyLinePlaceholder":469},[176,2961,2962],{"class":178,"line":223},[176,2963,2964],{},"{{!-- Image resizing --}}\n",[176,2966,2967],{"class":178,"line":236},[176,2968,2969],{},"{{resizeImage url 'thumbnail'}}\n",[176,2971,2972],{"class":178,"line":249},[176,2973,2974],{},"{{resizeImage url 'main'}}\n",[176,2976,2977],{"class":178,"line":262},[176,2978,2979],{},"{{resizeImage url 'zoom'}}\n",[176,2981,2982],{"class":178,"line":275},[176,2983,470],{"emptyLinePlaceholder":469},[176,2985,2986],{"class":178,"line":288},[176,2987,2988],{},"{{!-- URL generation --}}\n",[176,2990,2991],{"class":178,"line":297},[176,2992,2993],{},"{{objectToAtrributes item}}\n",[176,2995,2996],{"class":178,"line":303},[176,2997,470],{"emptyLinePlaceholder":469},[176,2999,3000],{"class":178,"line":316},[176,3001,3002],{},"{{!-- Conditional blocks --}}\n",[176,3004,3005],{"class":178,"line":327},[176,3006,3007],{},"{{#if condition}}...{{\u002Fif}}\n",[176,3009,3010],{"class":178,"line":333},[176,3011,3012],{},"{{#unless condition}}...{{\u002Funless}}\n",[176,3014,3015],{"class":178,"line":339},[176,3016,3017],{},"{{#each collection}}...{{\u002Feach}}\n",[176,3019,3020],{"class":178,"line":350},[176,3021,470],{"emptyLinePlaceholder":469},[176,3023,3024],{"class":178,"line":877},[176,3025,3026],{},"{{!-- Child view placeholders --}}\n",[176,3028,3029],{"class":178,"line":885},[176,3030,3031],{},"\u003Cdiv data-view=\"ChildViewName\">\u003C\u002Fdiv>\n",[40,3033,3035],{"id":3034},"creating-custom-templates","Creating Custom Templates",[15,3037,3038],{},"When overriding a template, copy the original and modify. Let's customize the product list item:",[167,3040,3042],{"className":2613,"code":3041,"language":2615,"meta":172,"style":172},"{{!-- Modules\u002FProductList@1.0.0\u002FTemplates\u002Fproduct_list_item.tpl --}}\n\n\u003Cdiv class=\"product-item {{#if item._isOnSale}}product-item--sale{{\u002Fif}}\"\n     data-track-productlist-item=\"{{item._id}}\"\n     data-sku=\"{{item._sku}}\"\n     itemscope \n     itemtype=\"https:\u002F\u002Fschema.org\u002FProduct\">\n\n    {{!-- Sale badge --}}\n    {{#if item._isOnSale}}\n        \u003Cdiv class=\"product-item__badge product-item__badge--sale\">\n            {{translate 'Sale'}}\n        \u003C\u002Fdiv>\n    {{\u002Fif}}\n\n    {{!-- New badge --}}\n    {{#if item._isNew}}\n        \u003Cdiv class=\"product-item__badge product-item__badge--new\">\n            {{translate 'New'}}\n        \u003C\u002Fdiv>\n    {{\u002Fif}}\n\n    {{!-- Image --}}\n    \u003Ca href=\"{{item._url}}\" class=\"product-item__image-link\">\n        \u003Cimg src=\"{{resizeImage item._thumbnail.url 'thumbnail'}}\"\n             alt=\"{{item._thumbnail.altimagetext}}\"\n             class=\"product-item__image\"\n             loading=\"lazy\"\n             itemprop=\"image\">\n        \n        {{!-- Secondary image on hover (if available) --}}\n        {{#if item._secondaryImage}}\n            \u003Cimg src=\"{{resizeImage item._secondaryImage.url 'thumbnail'}}\"\n                 alt=\"{{item._secondaryImage.altimagetext}}\"\n                 class=\"product-item__image product-item__image--hover\"\n                 loading=\"lazy\">\n        {{\u002Fif}}\n    \u003C\u002Fa>\n\n    {{!-- Content --}}\n    \u003Cdiv class=\"product-item__content\">\n        \u003Ch3 class=\"product-item__name\" itemprop=\"name\">\n            \u003Ca href=\"{{item._url}}\">{{item._name}}\u003C\u002Fa>\n        \u003C\u002Fh3>\n\n        {{!-- Rating --}}\n        {{#if showRating}}\n            \u003Cdiv class=\"product-item__rating\" data-view=\"Rating\">\u003C\u002Fdiv>\n        {{\u002Fif}}\n\n        {{!-- Price --}}\n        \u003Cdiv class=\"product-item__price\" itemprop=\"offers\" itemscope itemtype=\"https:\u002F\u002Fschema.org\u002FOffer\">\n            {{#if item._isOnSale}}\n                \u003Cspan class=\"product-item__price-original\">{{item._priceFormatted}}\u003C\u002Fspan>\n                \u003Cspan class=\"product-item__price-sale\" itemprop=\"price\" content=\"{{item._salePrice}}\">\n                    {{item._salePriceFormatted}}\n                \u003C\u002Fspan>\n                \u003Cspan class=\"product-item__savings\">\n                    {{translate 'Save $(0)' item._savingsFormatted}}\n                \u003C\u002Fspan>\n            {{else}}\n                \u003Cspan class=\"product-item__price-current\" itemprop=\"price\" content=\"{{item._price}}\">\n                    {{item._priceFormatted}}\n                \u003C\u002Fspan>\n            {{\u002Fif}}\n        \u003C\u002Fdiv>\n\n        {{!-- Quick add (optional) --}}\n        {{#if enableQuickAdd}}\n            \u003Cbutton class=\"product-item__quick-add\"\n                    data-action=\"quickAdd\"\n                    data-item-id=\"{{item._id}}\">\n                {{translate 'Quick Add'}}\n            \u003C\u002Fbutton>\n        {{\u002Fif}}\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[81,3043,3044,3049,3053,3058,3063,3068,3073,3078,3082,3087,3092,3097,3102,3106,3111,3115,3120,3125,3130,3135,3139,3143,3147,3152,3157,3162,3167,3172,3177,3182,3186,3191,3196,3201,3206,3211,3216,3220,3225,3229,3234,3239,3244,3249,3254,3258,3263,3267,3272,3276,3280,3285,3290,3295,3300,3305,3310,3314,3319,3324,3328,3332,3338,3343,3348,3353,3358,3363,3369,3375,3381,3387,3393,3399,3404,3409,3414],{"__ignoreMap":172},[176,3045,3046],{"class":178,"line":179},[176,3047,3048],{},"{{!-- Modules\u002FProductList@1.0.0\u002FTemplates\u002Fproduct_list_item.tpl --}}\n",[176,3050,3051],{"class":178,"line":186},[176,3052,470],{"emptyLinePlaceholder":469},[176,3054,3055],{"class":178,"line":193},[176,3056,3057],{},"\u003Cdiv class=\"product-item {{#if item._isOnSale}}product-item--sale{{\u002Fif}}\"\n",[176,3059,3060],{"class":178,"line":210},[176,3061,3062],{},"     data-track-productlist-item=\"{{item._id}}\"\n",[176,3064,3065],{"class":178,"line":223},[176,3066,3067],{},"     data-sku=\"{{item._sku}}\"\n",[176,3069,3070],{"class":178,"line":236},[176,3071,3072],{},"     itemscope \n",[176,3074,3075],{"class":178,"line":249},[176,3076,3077],{},"     itemtype=\"https:\u002F\u002Fschema.org\u002FProduct\">\n",[176,3079,3080],{"class":178,"line":262},[176,3081,470],{"emptyLinePlaceholder":469},[176,3083,3084],{"class":178,"line":275},[176,3085,3086],{},"    {{!-- Sale badge --}}\n",[176,3088,3089],{"class":178,"line":288},[176,3090,3091],{},"    {{#if item._isOnSale}}\n",[176,3093,3094],{"class":178,"line":297},[176,3095,3096],{},"        \u003Cdiv class=\"product-item__badge product-item__badge--sale\">\n",[176,3098,3099],{"class":178,"line":303},[176,3100,3101],{},"            {{translate 'Sale'}}\n",[176,3103,3104],{"class":178,"line":316},[176,3105,2804],{},[176,3107,3108],{"class":178,"line":327},[176,3109,3110],{},"    {{\u002Fif}}\n",[176,3112,3113],{"class":178,"line":333},[176,3114,470],{"emptyLinePlaceholder":469},[176,3116,3117],{"class":178,"line":339},[176,3118,3119],{},"    {{!-- New badge --}}\n",[176,3121,3122],{"class":178,"line":350},[176,3123,3124],{},"    {{#if item._isNew}}\n",[176,3126,3127],{"class":178,"line":877},[176,3128,3129],{},"        \u003Cdiv class=\"product-item__badge product-item__badge--new\">\n",[176,3131,3132],{"class":178,"line":885},[176,3133,3134],{},"            {{translate 'New'}}\n",[176,3136,3137],{"class":178,"line":898},[176,3138,2804],{},[176,3140,3141],{"class":178,"line":911},[176,3142,3110],{},[176,3144,3145],{"class":178,"line":922},[176,3146,470],{"emptyLinePlaceholder":469},[176,3148,3149],{"class":178,"line":927},[176,3150,3151],{},"    {{!-- Image --}}\n",[176,3153,3154],{"class":178,"line":932},[176,3155,3156],{},"    \u003Ca href=\"{{item._url}}\" class=\"product-item__image-link\">\n",[176,3158,3159],{"class":178,"line":939},[176,3160,3161],{},"        \u003Cimg src=\"{{resizeImage item._thumbnail.url 'thumbnail'}}\"\n",[176,3163,3164],{"class":178,"line":944},[176,3165,3166],{},"             alt=\"{{item._thumbnail.altimagetext}}\"\n",[176,3168,3169],{"class":178,"line":955},[176,3170,3171],{},"             class=\"product-item__image\"\n",[176,3173,3174],{"class":178,"line":965},[176,3175,3176],{},"             loading=\"lazy\"\n",[176,3178,3179],{"class":178,"line":971},[176,3180,3181],{},"             itemprop=\"image\">\n",[176,3183,3184],{"class":178,"line":976},[176,3185,2080],{},[176,3187,3188],{"class":178,"line":988},[176,3189,3190],{},"        {{!-- Secondary image on hover (if available) --}}\n",[176,3192,3193],{"class":178,"line":998},[176,3194,3195],{},"        {{#if item._secondaryImage}}\n",[176,3197,3198],{"class":178,"line":1003},[176,3199,3200],{},"            \u003Cimg src=\"{{resizeImage item._secondaryImage.url 'thumbnail'}}\"\n",[176,3202,3203],{"class":178,"line":1008},[176,3204,3205],{},"                 alt=\"{{item._secondaryImage.altimagetext}}\"\n",[176,3207,3208],{"class":178,"line":1016},[176,3209,3210],{},"                 class=\"product-item__image product-item__image--hover\"\n",[176,3212,3213],{"class":178,"line":1029},[176,3214,3215],{},"                 loading=\"lazy\">\n",[176,3217,3218],{"class":178,"line":1040},[176,3219,2676],{},[176,3221,3222],{"class":178,"line":1046},[176,3223,3224],{},"    \u003C\u002Fa>\n",[176,3226,3227],{"class":178,"line":2343},[176,3228,470],{"emptyLinePlaceholder":469},[176,3230,3231],{"class":178,"line":2363},[176,3232,3233],{},"    {{!-- Content --}}\n",[176,3235,3236],{"class":178,"line":2378},[176,3237,3238],{},"    \u003Cdiv class=\"product-item__content\">\n",[176,3240,3241],{"class":178,"line":2383},[176,3242,3243],{},"        \u003Ch3 class=\"product-item__name\" itemprop=\"name\">\n",[176,3245,3246],{"class":178,"line":2388},[176,3247,3248],{},"            \u003Ca href=\"{{item._url}}\">{{item._name}}\u003C\u002Fa>\n",[176,3250,3251],{"class":178,"line":2826},[176,3252,3253],{},"        \u003C\u002Fh3>\n",[176,3255,3256],{"class":178,"line":2832},[176,3257,470],{"emptyLinePlaceholder":469},[176,3259,3260],{"class":178,"line":2838},[176,3261,3262],{},"        {{!-- Rating --}}\n",[176,3264,3265],{"class":178,"line":2844},[176,3266,2719],{},[176,3268,3269],{"class":178,"line":2850},[176,3270,3271],{},"            \u003Cdiv class=\"product-item__rating\" data-view=\"Rating\">\u003C\u002Fdiv>\n",[176,3273,3274],{"class":178,"line":2856},[176,3275,2676],{},[176,3277,3278],{"class":178,"line":2862},[176,3279,470],{"emptyLinePlaceholder":469},[176,3281,3282],{"class":178,"line":2868},[176,3283,3284],{},"        {{!-- Price --}}\n",[176,3286,3287],{"class":178,"line":2874},[176,3288,3289],{},"        \u003Cdiv class=\"product-item__price\" itemprop=\"offers\" itemscope itemtype=\"https:\u002F\u002Fschema.org\u002FOffer\">\n",[176,3291,3292],{"class":178,"line":2880},[176,3293,3294],{},"            {{#if item._isOnSale}}\n",[176,3296,3297],{"class":178,"line":2885},[176,3298,3299],{},"                \u003Cspan class=\"product-item__price-original\">{{item._priceFormatted}}\u003C\u002Fspan>\n",[176,3301,3302],{"class":178,"line":2891},[176,3303,3304],{},"                \u003Cspan class=\"product-item__price-sale\" itemprop=\"price\" content=\"{{item._salePrice}}\">\n",[176,3306,3307],{"class":178,"line":2897},[176,3308,3309],{},"                    {{item._salePriceFormatted}}\n",[176,3311,3312],{"class":178,"line":2903},[176,3313,2757],{},[176,3315,3316],{"class":178,"line":2909},[176,3317,3318],{},"                \u003Cspan class=\"product-item__savings\">\n",[176,3320,3321],{"class":178,"line":2915},[176,3322,3323],{},"                    {{translate 'Save $(0)' item._savingsFormatted}}\n",[176,3325,3326],{"class":178,"line":2920},[176,3327,2757],{},[176,3329,3330],{"class":178,"line":2925},[176,3331,2776],{},[176,3333,3335],{"class":178,"line":3334},62,[176,3336,3337],{},"                \u003Cspan class=\"product-item__price-current\" itemprop=\"price\" content=\"{{item._price}}\">\n",[176,3339,3341],{"class":178,"line":3340},63,[176,3342,2752],{},[176,3344,3346],{"class":178,"line":3345},64,[176,3347,2757],{},[176,3349,3351],{"class":178,"line":3350},65,[176,3352,2794],{},[176,3354,3356],{"class":178,"line":3355},66,[176,3357,2804],{},[176,3359,3361],{"class":178,"line":3360},67,[176,3362,470],{"emptyLinePlaceholder":469},[176,3364,3366],{"class":178,"line":3365},68,[176,3367,3368],{},"        {{!-- Quick add (optional) --}}\n",[176,3370,3372],{"class":178,"line":3371},69,[176,3373,3374],{},"        {{#if enableQuickAdd}}\n",[176,3376,3378],{"class":178,"line":3377},70,[176,3379,3380],{},"            \u003Cbutton class=\"product-item__quick-add\"\n",[176,3382,3384],{"class":178,"line":3383},71,[176,3385,3386],{},"                    data-action=\"quickAdd\"\n",[176,3388,3390],{"class":178,"line":3389},72,[176,3391,3392],{},"                    data-item-id=\"{{item._id}}\">\n",[176,3394,3396],{"class":178,"line":3395},73,[176,3397,3398],{},"                {{translate 'Quick Add'}}\n",[176,3400,3402],{"class":178,"line":3401},74,[176,3403,2912],{},[176,3405,3407],{"class":178,"line":3406},75,[176,3408,2676],{},[176,3410,3412],{"class":178,"line":3411},76,[176,3413,2681],{},[176,3415,3417],{"class":178,"line":3416},77,[176,3418,2928],{},[366,3420],{},[25,3422,3424],{"id":3423},"responsive-design-implementation","Responsive Design Implementation",[15,3426,3427],{},[32,3428],{"alt":3429,"src":3430},"Theme deployment process","\u002Fimages\u002Fblog\u002Fsuitecommerce-theme-deployment.webp",[15,3432,3433],{},"Mobile commerce accounts for over 70% of e-commerce traffic. Your theme must work flawlessly across devices.",[40,3435,3437],{"id":3436},"breakpoint-system","Breakpoint System",[15,3439,3440],{},"SuiteCommerce defines standard breakpoints:",[167,3442,3444],{"className":1096,"code":3443,"language":1098,"meta":172,"style":172},"\u002F\u002F Breakpoints (BaseSassStyles\u002F_sc-variables.scss)\n\n$sc-breakpoint-xs: 0;\n$sc-breakpoint-sm: 576px;\n$sc-breakpoint-md: 768px;\n$sc-breakpoint-lg: 992px;\n$sc-breakpoint-xl: 1200px;\n$sc-breakpoint-xxl: 1400px;\n\n\u002F\u002F Media query mixins\n@mixin media-breakpoint-up($breakpoint) {\n    @media (min-width: map-get($breakpoints, $breakpoint)) {\n        @content;\n    }\n}\n\n@mixin media-breakpoint-down($breakpoint) {\n    @media (max-width: map-get($breakpoints, $breakpoint) - 0.02px) {\n        @content;\n    }\n}\n",[81,3445,3446,3451,3455,3466,3480,3493,3507,3521,3535,3539,3544,3559,3586,3593,3597,3601,3605,3618,3651,3657,3661],{"__ignoreMap":172},[176,3447,3448],{"class":178,"line":179},[176,3449,3450],{"class":182},"\u002F\u002F Breakpoints (BaseSassStyles\u002F_sc-variables.scss)\n",[176,3452,3453],{"class":178,"line":186},[176,3454,470],{"emptyLinePlaceholder":469},[176,3456,3457,3460,3462,3464],{"class":178,"line":193},[176,3458,3459],{"class":1119},"$sc-breakpoint-xs",[176,3461,200],{"class":189},[176,3463,2002],{"class":196},[176,3465,1128],{"class":189},[176,3467,3468,3471,3473,3476,3478],{"class":178,"line":210},[176,3469,3470],{"class":1119},"$sc-breakpoint-sm",[176,3472,200],{"class":189},[176,3474,3475],{"class":196},"576",[176,3477,2008],{"class":1176},[176,3479,1128],{"class":189},[176,3481,3482,3484,3486,3489,3491],{"class":178,"line":223},[176,3483,2096],{"class":1119},[176,3485,200],{"class":189},[176,3487,3488],{"class":196},"768",[176,3490,2008],{"class":1176},[176,3492,1128],{"class":189},[176,3494,3495,3498,3500,3503,3505],{"class":178,"line":236},[176,3496,3497],{"class":1119},"$sc-breakpoint-lg",[176,3499,200],{"class":189},[176,3501,3502],{"class":196},"992",[176,3504,2008],{"class":1176},[176,3506,1128],{"class":189},[176,3508,3509,3512,3514,3517,3519],{"class":178,"line":249},[176,3510,3511],{"class":1119},"$sc-breakpoint-xl",[176,3513,200],{"class":189},[176,3515,3516],{"class":196},"1200",[176,3518,2008],{"class":1176},[176,3520,1128],{"class":189},[176,3522,3523,3526,3528,3531,3533],{"class":178,"line":262},[176,3524,3525],{"class":1119},"$sc-breakpoint-xxl",[176,3527,200],{"class":189},[176,3529,3530],{"class":196},"1400",[176,3532,2008],{"class":1176},[176,3534,1128],{"class":189},[176,3536,3537],{"class":178,"line":275},[176,3538,470],{"emptyLinePlaceholder":469},[176,3540,3541],{"class":178,"line":288},[176,3542,3543],{"class":182},"\u002F\u002F Media query mixins\n",[176,3545,3546,3549,3552,3554,3557],{"class":178,"line":297},[176,3547,3548],{"class":1176},"@mixin",[176,3550,3551],{"class":398}," media-breakpoint-up",[176,3553,1165],{"class":189},[176,3555,3556],{"class":1119},"$breakpoint",[176,3558,2099],{"class":189},[176,3560,3561,3564,3566,3569,3571,3574,3576,3579,3581,3583],{"class":178,"line":303},[176,3562,3563],{"class":1176},"    @media",[176,3565,2088],{"class":189},[176,3567,3568],{"class":196},"min-width",[176,3570,200],{"class":189},[176,3572,3573],{"class":196},"map-get",[176,3575,1165],{"class":189},[176,3577,3578],{"class":1119},"$breakpoints",[176,3580,1170],{"class":189},[176,3582,3556],{"class":1119},[176,3584,3585],{"class":189},")) {\n",[176,3587,3588,3591],{"class":178,"line":316},[176,3589,3590],{"class":1176},"        @content",[176,3592,1128],{"class":189},[176,3594,3595],{"class":178,"line":327},[176,3596,1043],{"class":189},[176,3598,3599],{"class":178,"line":333},[176,3600,353],{"class":189},[176,3602,3603],{"class":178,"line":339},[176,3604,470],{"emptyLinePlaceholder":469},[176,3606,3607,3609,3612,3614,3616],{"class":178,"line":350},[176,3608,3548],{"class":1176},[176,3610,3611],{"class":398}," media-breakpoint-down",[176,3613,1165],{"class":189},[176,3615,3556],{"class":1119},[176,3617,2099],{"class":189},[176,3619,3620,3622,3624,3626,3628,3630,3632,3634,3636,3638,3641,3644,3647,3649],{"class":178,"line":877},[176,3621,3563],{"class":1176},[176,3623,2088],{"class":189},[176,3625,2091],{"class":196},[176,3627,200],{"class":189},[176,3629,3573],{"class":196},[176,3631,1165],{"class":189},[176,3633,3578],{"class":1119},[176,3635,1170],{"class":189},[176,3637,3556],{"class":1119},[176,3639,3640],{"class":189},") ",[176,3642,3643],{"class":1176},"-",[176,3645,3646],{"class":196}," 0.02",[176,3648,2008],{"class":1176},[176,3650,2099],{"class":189},[176,3652,3653,3655],{"class":178,"line":885},[176,3654,3590],{"class":1176},[176,3656,1128],{"class":189},[176,3658,3659],{"class":178,"line":898},[176,3660,1043],{"class":189},[176,3662,3663],{"class":178,"line":911},[176,3664,353],{"class":189},[40,3666,3668],{"id":3667},"mobile-first-styling-pattern","Mobile-First Styling Pattern",[15,3670,3671],{},"Always write mobile styles first, then enhance for larger screens:",[167,3673,3675],{"className":1096,"code":3674,"language":1098,"meta":172,"style":172},"\u002F\u002F Modules\u002FProductDetails@1.0.0\u002F_product-details.scss\n\n.product-details {\n    \u002F\u002F Mobile base styles\n    display: flex;\n    flex-direction: column;\n    gap: $sc-spacing-md;\n    padding: $sc-spacing-md;\n\n    &__gallery {\n        width: 100%;\n        order: 1;\n    }\n\n    &__info {\n        width: 100%;\n        order: 2;\n    }\n\n    &__name {\n        font-size: $sc-font-size-xl;\n        margin-bottom: $sc-spacing-sm;\n    }\n\n    &__actions {\n        display: flex;\n        flex-direction: column;\n        gap: $sc-spacing-sm;\n    }\n\n    &__add-to-cart {\n        width: 100%;\n        padding: $sc-spacing-md;\n        font-size: $sc-font-size-md;\n    }\n\n    \u002F\u002F Tablet and up\n    @media (min-width: $sc-breakpoint-md) {\n        flex-direction: row;\n        gap: $sc-spacing-xl;\n        padding: $sc-spacing-lg;\n\n        &__gallery {\n            width: 55%;\n            order: 1;\n        }\n\n        &__info {\n            width: 45%;\n            order: 2;\n            position: sticky;\n            top: 100px;\n            align-self: flex-start;\n        }\n\n        &__name {\n            font-size: $sc-font-size-xxl;\n        }\n\n        &__actions {\n            flex-direction: row;\n        }\n\n        &__add-to-cart {\n            width: auto;\n            min-width: 200px;\n        }\n    }\n\n    \u002F\u002F Desktop\n    @media (min-width: $sc-breakpoint-lg) {\n        &__gallery {\n            width: 60%;\n        }\n\n        &__info {\n            width: 40%;\n        }\n    }\n}\n",[81,3676,3677,3682,3686,3693,3698,3709,3721,3732,3742,3746,3755,3768,3779,3783,3787,3796,3808,3818,3822,3826,3835,3845,3857,3861,3865,3874,3884,3895,3905,3909,3913,3922,3934,3945,3955,3959,3963,3968,3982,3993,4004,4014,4018,4026,4039,4050,4054,4058,4066,4078,4088,4100,4113,4125,4129,4133,4141,4152,4156,4160,4168,4179,4183,4187,4195,4205,4219,4223,4227,4231,4236,4250,4258,4270,4274,4278,4286,4299,4304,4309],{"__ignoreMap":172},[176,3678,3679],{"class":178,"line":179},[176,3680,3681],{"class":182},"\u002F\u002F Modules\u002FProductDetails@1.0.0\u002F_product-details.scss\n",[176,3683,3684],{"class":178,"line":186},[176,3685,470],{"emptyLinePlaceholder":469},[176,3687,3688,3691],{"class":178,"line":193},[176,3689,3690],{"class":398},".product-details",[176,3692,1966],{"class":189},[176,3694,3695],{"class":178,"line":210},[176,3696,3697],{"class":182},"    \u002F\u002F Mobile base styles\n",[176,3699,3700,3703,3705,3707],{"class":178,"line":223},[176,3701,3702],{"class":196},"    display",[176,3704,200],{"class":189},[176,3706,2144],{"class":196},[176,3708,1128],{"class":189},[176,3710,3711,3714,3716,3719],{"class":178,"line":236},[176,3712,3713],{"class":196},"    flex-direction",[176,3715,200],{"class":189},[176,3717,3718],{"class":196},"column",[176,3720,1128],{"class":189},[176,3722,3723,3726,3728,3730],{"class":178,"line":249},[176,3724,3725],{"class":196},"    gap",[176,3727,200],{"class":189},[176,3729,1987],{"class":1119},[176,3731,1128],{"class":189},[176,3733,3734,3736,3738,3740],{"class":178,"line":262},[176,3735,1982],{"class":196},[176,3737,200],{"class":189},[176,3739,1987],{"class":1119},[176,3741,1128],{"class":189},[176,3743,3744],{"class":178,"line":275},[176,3745,470],{"emptyLinePlaceholder":469},[176,3747,3748,3750,3753],{"class":178,"line":288},[176,3749,2045],{"class":2044},[176,3751,3752],{"class":398},"__gallery",[176,3754,1966],{"class":189},[176,3756,3757,3759,3761,3764,3766],{"class":178,"line":297},[176,3758,2068],{"class":196},[176,3760,200],{"class":189},[176,3762,3763],{"class":196},"100",[176,3765,1177],{"class":1176},[176,3767,1128],{"class":189},[176,3769,3770,3773,3775,3777],{"class":178,"line":303},[176,3771,3772],{"class":196},"        order",[176,3774,200],{"class":189},[176,3776,1538],{"class":196},[176,3778,1128],{"class":189},[176,3780,3781],{"class":178,"line":316},[176,3782,1043],{"class":189},[176,3784,3785],{"class":178,"line":327},[176,3786,470],{"emptyLinePlaceholder":469},[176,3788,3789,3791,3794],{"class":178,"line":333},[176,3790,2045],{"class":2044},[176,3792,3793],{"class":398},"__info",[176,3795,1966],{"class":189},[176,3797,3798,3800,3802,3804,3806],{"class":178,"line":339},[176,3799,2068],{"class":196},[176,3801,200],{"class":189},[176,3803,3763],{"class":196},[176,3805,1177],{"class":1176},[176,3807,1128],{"class":189},[176,3809,3810,3812,3814,3816],{"class":178,"line":350},[176,3811,3772],{"class":196},[176,3813,200],{"class":189},[176,3815,1484],{"class":196},[176,3817,1128],{"class":189},[176,3819,3820],{"class":178,"line":877},[176,3821,1043],{"class":189},[176,3823,3824],{"class":178,"line":885},[176,3825,470],{"emptyLinePlaceholder":469},[176,3827,3828,3830,3833],{"class":178,"line":898},[176,3829,2045],{"class":2044},[176,3831,3832],{"class":398},"__name",[176,3834,1966],{"class":189},[176,3836,3837,3839,3841,3843],{"class":178,"line":911},[176,3838,2203],{"class":196},[176,3840,200],{"class":189},[176,3842,1497],{"class":1119},[176,3844,1128],{"class":189},[176,3846,3847,3850,3852,3855],{"class":178,"line":922},[176,3848,3849],{"class":196},"        margin-bottom",[176,3851,200],{"class":189},[176,3853,3854],{"class":1119},"$sc-spacing-sm",[176,3856,1128],{"class":189},[176,3858,3859],{"class":178,"line":927},[176,3860,1043],{"class":189},[176,3862,3863],{"class":178,"line":932},[176,3864,470],{"emptyLinePlaceholder":469},[176,3866,3867,3869,3872],{"class":178,"line":939},[176,3868,2045],{"class":2044},[176,3870,3871],{"class":398},"__actions",[176,3873,1966],{"class":189},[176,3875,3876,3878,3880,3882],{"class":178,"line":944},[176,3877,2139],{"class":196},[176,3879,200],{"class":189},[176,3881,2144],{"class":196},[176,3883,1128],{"class":189},[176,3885,3886,3889,3891,3893],{"class":178,"line":955},[176,3887,3888],{"class":196},"        flex-direction",[176,3890,200],{"class":189},[176,3892,3718],{"class":196},[176,3894,1128],{"class":189},[176,3896,3897,3899,3901,3903],{"class":178,"line":965},[176,3898,2163],{"class":196},[176,3900,200],{"class":189},[176,3902,3854],{"class":1119},[176,3904,1128],{"class":189},[176,3906,3907],{"class":178,"line":971},[176,3908,1043],{"class":189},[176,3910,3911],{"class":178,"line":976},[176,3912,470],{"emptyLinePlaceholder":469},[176,3914,3915,3917,3920],{"class":178,"line":988},[176,3916,2045],{"class":2044},[176,3918,3919],{"class":398},"__add-to-cart",[176,3921,1966],{"class":189},[176,3923,3924,3926,3928,3930,3932],{"class":178,"line":998},[176,3925,2068],{"class":196},[176,3927,200],{"class":189},[176,3929,3763],{"class":196},[176,3931,1177],{"class":1176},[176,3933,1128],{"class":189},[176,3935,3936,3939,3941,3943],{"class":178,"line":1003},[176,3937,3938],{"class":196},"        padding",[176,3940,200],{"class":189},[176,3942,1987],{"class":1119},[176,3944,1128],{"class":189},[176,3946,3947,3949,3951,3953],{"class":178,"line":1008},[176,3948,2203],{"class":196},[176,3950,200],{"class":189},[176,3952,1533],{"class":1119},[176,3954,1128],{"class":189},[176,3956,3957],{"class":178,"line":1016},[176,3958,1043],{"class":189},[176,3960,3961],{"class":178,"line":1029},[176,3962,470],{"emptyLinePlaceholder":469},[176,3964,3965],{"class":178,"line":1040},[176,3966,3967],{"class":182},"    \u002F\u002F Tablet and up\n",[176,3969,3970,3972,3974,3976,3978,3980],{"class":178,"line":1046},[176,3971,3563],{"class":1176},[176,3973,2088],{"class":189},[176,3975,3568],{"class":196},[176,3977,200],{"class":189},[176,3979,2096],{"class":1119},[176,3981,2099],{"class":189},[176,3983,3984,3986,3988,3991],{"class":178,"line":2343},[176,3985,3888],{"class":196},[176,3987,200],{"class":189},[176,3989,3990],{"class":196},"row",[176,3992,1128],{"class":189},[176,3994,3995,3997,3999,4002],{"class":178,"line":2363},[176,3996,2163],{"class":196},[176,3998,200],{"class":189},[176,4000,4001],{"class":1119},"$sc-spacing-xl",[176,4003,1128],{"class":189},[176,4005,4006,4008,4010,4012],{"class":178,"line":2378},[176,4007,3938],{"class":196},[176,4009,200],{"class":189},[176,4011,2168],{"class":1119},[176,4013,1128],{"class":189},[176,4015,4016],{"class":178,"line":2383},[176,4017,470],{"emptyLinePlaceholder":469},[176,4019,4020,4022,4024],{"class":178,"line":2388},[176,4021,2288],{"class":2044},[176,4023,3752],{"class":398},[176,4025,1966],{"class":189},[176,4027,4028,4031,4033,4035,4037],{"class":178,"line":2826},[176,4029,4030],{"class":196},"            width",[176,4032,200],{"class":189},[176,4034,1820],{"class":196},[176,4036,1177],{"class":1176},[176,4038,1128],{"class":189},[176,4040,4041,4044,4046,4048],{"class":178,"line":2832},[176,4042,4043],{"class":196},"            order",[176,4045,200],{"class":189},[176,4047,1538],{"class":196},[176,4049,1128],{"class":189},[176,4051,4052],{"class":178,"line":2838},[176,4053,330],{"class":189},[176,4055,4056],{"class":178,"line":2844},[176,4057,470],{"emptyLinePlaceholder":469},[176,4059,4060,4062,4064],{"class":178,"line":2850},[176,4061,2288],{"class":2044},[176,4063,3793],{"class":398},[176,4065,1966],{"class":189},[176,4067,4068,4070,4072,4074,4076],{"class":178,"line":2856},[176,4069,4030],{"class":196},[176,4071,200],{"class":189},[176,4073,2109],{"class":196},[176,4075,1177],{"class":1176},[176,4077,1128],{"class":189},[176,4079,4080,4082,4084,4086],{"class":178,"line":2862},[176,4081,4043],{"class":196},[176,4083,200],{"class":189},[176,4085,1484],{"class":196},[176,4087,1128],{"class":189},[176,4089,4090,4093,4095,4098],{"class":178,"line":2868},[176,4091,4092],{"class":196},"            position",[176,4094,200],{"class":189},[176,4096,4097],{"class":196},"sticky",[176,4099,1128],{"class":189},[176,4101,4102,4105,4107,4109,4111],{"class":178,"line":2874},[176,4103,4104],{"class":196},"            top",[176,4106,200],{"class":189},[176,4108,3763],{"class":196},[176,4110,2008],{"class":1176},[176,4112,1128],{"class":189},[176,4114,4115,4118,4120,4123],{"class":178,"line":2880},[176,4116,4117],{"class":196},"            align-self",[176,4119,200],{"class":189},[176,4121,4122],{"class":196},"flex-start",[176,4124,1128],{"class":189},[176,4126,4127],{"class":178,"line":2885},[176,4128,330],{"class":189},[176,4130,4131],{"class":178,"line":2891},[176,4132,470],{"emptyLinePlaceholder":469},[176,4134,4135,4137,4139],{"class":178,"line":2897},[176,4136,2288],{"class":2044},[176,4138,3832],{"class":398},[176,4140,1966],{"class":189},[176,4142,4143,4146,4148,4150],{"class":178,"line":2903},[176,4144,4145],{"class":196},"            font-size",[176,4147,200],{"class":189},[176,4149,1479],{"class":1119},[176,4151,1128],{"class":189},[176,4153,4154],{"class":178,"line":2909},[176,4155,330],{"class":189},[176,4157,4158],{"class":178,"line":2915},[176,4159,470],{"emptyLinePlaceholder":469},[176,4161,4162,4164,4166],{"class":178,"line":2920},[176,4163,2288],{"class":2044},[176,4165,3871],{"class":398},[176,4167,1966],{"class":189},[176,4169,4170,4173,4175,4177],{"class":178,"line":2925},[176,4171,4172],{"class":196},"            flex-direction",[176,4174,200],{"class":189},[176,4176,3990],{"class":196},[176,4178,1128],{"class":189},[176,4180,4181],{"class":178,"line":3334},[176,4182,330],{"class":189},[176,4184,4185],{"class":178,"line":3340},[176,4186,470],{"emptyLinePlaceholder":469},[176,4188,4189,4191,4193],{"class":178,"line":3345},[176,4190,2288],{"class":2044},[176,4192,3919],{"class":398},[176,4194,1966],{"class":189},[176,4196,4197,4199,4201,4203],{"class":178,"line":3350},[176,4198,4030],{"class":196},[176,4200,200],{"class":189},[176,4202,2073],{"class":196},[176,4204,1128],{"class":189},[176,4206,4207,4210,4212,4215,4217],{"class":178,"line":3355},[176,4208,4209],{"class":196},"            min-width",[176,4211,200],{"class":189},[176,4213,4214],{"class":196},"200",[176,4216,2008],{"class":1176},[176,4218,1128],{"class":189},[176,4220,4221],{"class":178,"line":3360},[176,4222,330],{"class":189},[176,4224,4225],{"class":178,"line":3365},[176,4226,1043],{"class":189},[176,4228,4229],{"class":178,"line":3371},[176,4230,470],{"emptyLinePlaceholder":469},[176,4232,4233],{"class":178,"line":3377},[176,4234,4235],{"class":182},"    \u002F\u002F Desktop\n",[176,4237,4238,4240,4242,4244,4246,4248],{"class":178,"line":3383},[176,4239,3563],{"class":1176},[176,4241,2088],{"class":189},[176,4243,3568],{"class":196},[176,4245,200],{"class":189},[176,4247,3497],{"class":1119},[176,4249,2099],{"class":189},[176,4251,4252,4254,4256],{"class":178,"line":3389},[176,4253,2288],{"class":2044},[176,4255,3752],{"class":398},[176,4257,1966],{"class":189},[176,4259,4260,4262,4264,4266,4268],{"class":178,"line":3395},[176,4261,4030],{"class":196},[176,4263,200],{"class":189},[176,4265,1841],{"class":196},[176,4267,1177],{"class":1176},[176,4269,1128],{"class":189},[176,4271,4272],{"class":178,"line":3401},[176,4273,330],{"class":189},[176,4275,4276],{"class":178,"line":3406},[176,4277,470],{"emptyLinePlaceholder":469},[176,4279,4280,4282,4284],{"class":178,"line":3411},[176,4281,2288],{"class":2044},[176,4283,3793],{"class":398},[176,4285,1966],{"class":189},[176,4287,4288,4290,4292,4295,4297],{"class":178,"line":3416},[176,4289,4030],{"class":196},[176,4291,200],{"class":189},[176,4293,4294],{"class":196},"40",[176,4296,1177],{"class":1176},[176,4298,1128],{"class":189},[176,4300,4302],{"class":178,"line":4301},78,[176,4303,330],{"class":189},[176,4305,4307],{"class":178,"line":4306},79,[176,4308,1043],{"class":189},[176,4310,4312],{"class":178,"line":4311},80,[176,4313,353],{"class":189},[40,4315,4317],{"id":4316},"touch-friendly-elements","Touch-Friendly Elements",[15,4319,4320],{},"Ensure interactive elements meet minimum touch target sizes (44x44px per WCAG guidelines):",[167,4322,4324],{"className":1096,"code":4323,"language":1098,"meta":172,"style":172},"\u002F\u002F Touch target sizing\n.button,\n.nav-link,\n.product-item__quick-add {\n    min-height: 44px;\n    min-width: 44px;\n    \n    @media (min-width: $sc-breakpoint-lg) {\n        min-height: 36px;\n        min-width: auto;\n    }\n}\n\n\u002F\u002F Larger tap targets for mobile navigation\n.mobile-nav {\n    &__item {\n        padding: $sc-spacing-md $sc-spacing-lg;\n        min-height: 48px;\n        display: flex;\n        align-items: center;\n    }\n\n    &__link {\n        width: 100%;\n        font-size: $sc-font-size-md;\n    }\n}\n",[81,4325,4326,4331,4338,4345,4352,4366,4379,4384,4398,4412,4423,4427,4431,4435,4440,4447,4456,4468,4481,4491,4501,4505,4509,4518,4530,4540,4544],{"__ignoreMap":172},[176,4327,4328],{"class":178,"line":179},[176,4329,4330],{"class":182},"\u002F\u002F Touch target sizing\n",[176,4332,4333,4336],{"class":178,"line":186},[176,4334,4335],{"class":398},".button",[176,4337,207],{"class":189},[176,4339,4340,4343],{"class":178,"line":193},[176,4341,4342],{"class":398},".nav-link",[176,4344,207],{"class":189},[176,4346,4347,4350],{"class":178,"line":210},[176,4348,4349],{"class":398},".product-item__quick-add",[176,4351,1966],{"class":189},[176,4353,4354,4357,4359,4362,4364],{"class":178,"line":223},[176,4355,4356],{"class":196},"    min-height",[176,4358,200],{"class":189},[176,4360,4361],{"class":196},"44",[176,4363,2008],{"class":1176},[176,4365,1128],{"class":189},[176,4367,4368,4371,4373,4375,4377],{"class":178,"line":236},[176,4369,4370],{"class":196},"    min-width",[176,4372,200],{"class":189},[176,4374,4361],{"class":196},[176,4376,2008],{"class":1176},[176,4378,1128],{"class":189},[176,4380,4381],{"class":178,"line":249},[176,4382,4383],{"class":189},"    \n",[176,4385,4386,4388,4390,4392,4394,4396],{"class":178,"line":262},[176,4387,3563],{"class":1176},[176,4389,2088],{"class":189},[176,4391,3568],{"class":196},[176,4393,200],{"class":189},[176,4395,3497],{"class":1119},[176,4397,2099],{"class":189},[176,4399,4400,4403,4405,4408,4410],{"class":178,"line":275},[176,4401,4402],{"class":196},"        min-height",[176,4404,200],{"class":189},[176,4406,4407],{"class":196},"36",[176,4409,2008],{"class":1176},[176,4411,1128],{"class":189},[176,4413,4414,4417,4419,4421],{"class":178,"line":288},[176,4415,4416],{"class":196},"        min-width",[176,4418,200],{"class":189},[176,4420,2073],{"class":196},[176,4422,1128],{"class":189},[176,4424,4425],{"class":178,"line":297},[176,4426,1043],{"class":189},[176,4428,4429],{"class":178,"line":303},[176,4430,353],{"class":189},[176,4432,4433],{"class":178,"line":316},[176,4434,470],{"emptyLinePlaceholder":469},[176,4436,4437],{"class":178,"line":327},[176,4438,4439],{"class":182},"\u002F\u002F Larger tap targets for mobile navigation\n",[176,4441,4442,4445],{"class":178,"line":333},[176,4443,4444],{"class":398},".mobile-nav",[176,4446,1966],{"class":189},[176,4448,4449,4451,4454],{"class":178,"line":339},[176,4450,2045],{"class":2044},[176,4452,4453],{"class":398},"__item",[176,4455,1966],{"class":189},[176,4457,4458,4460,4462,4464,4466],{"class":178,"line":350},[176,4459,3938],{"class":196},[176,4461,200],{"class":189},[176,4463,1987],{"class":1119},[176,4465,1990],{"class":1119},[176,4467,1128],{"class":189},[176,4469,4470,4472,4474,4477,4479],{"class":178,"line":877},[176,4471,4402],{"class":196},[176,4473,200],{"class":189},[176,4475,4476],{"class":196},"48",[176,4478,2008],{"class":1176},[176,4480,1128],{"class":189},[176,4482,4483,4485,4487,4489],{"class":178,"line":885},[176,4484,2139],{"class":196},[176,4486,200],{"class":189},[176,4488,2144],{"class":196},[176,4490,1128],{"class":189},[176,4492,4493,4495,4497,4499],{"class":178,"line":898},[176,4494,2151],{"class":196},[176,4496,200],{"class":189},[176,4498,2156],{"class":196},[176,4500,1128],{"class":189},[176,4502,4503],{"class":178,"line":911},[176,4504,1043],{"class":189},[176,4506,4507],{"class":178,"line":922},[176,4508,470],{"emptyLinePlaceholder":469},[176,4510,4511,4513,4516],{"class":178,"line":927},[176,4512,2045],{"class":2044},[176,4514,4515],{"class":398},"__link",[176,4517,1966],{"class":189},[176,4519,4520,4522,4524,4526,4528],{"class":178,"line":932},[176,4521,2068],{"class":196},[176,4523,200],{"class":189},[176,4525,3763],{"class":196},[176,4527,1177],{"class":1176},[176,4529,1128],{"class":189},[176,4531,4532,4534,4536,4538],{"class":178,"line":939},[176,4533,2203],{"class":196},[176,4535,200],{"class":189},[176,4537,1533],{"class":1119},[176,4539,1128],{"class":189},[176,4541,4542],{"class":178,"line":944},[176,4543,1043],{"class":189},[176,4545,4546],{"class":178,"line":955},[176,4547,353],{"class":189},[366,4549],{},[25,4551,4553],{"id":4552},"performance-considerations","Performance Considerations",[15,4555,4556],{},"Theme choices directly impact page speed. Every kilobyte of CSS and every DOM node affects Core Web Vitals.",[40,4558,4560],{"id":4559},"sass-optimization","SASS Optimization",[15,4562,4563],{},[151,4564,4565],{},"Avoid deep nesting:",[167,4567,4569],{"className":1096,"code":4568,"language":1098,"meta":172,"style":172},"\u002F\u002F Bad - compiles to verbose selectors\n.header {\n    .nav {\n        .item {\n            .link {\n                &:hover {\n                    color: red; \u002F\u002F .header .nav .item .link:hover\n                }\n            }\n        }\n    }\n}\n\n\u002F\u002F Good - flat, specific selectors\n.header-nav__link {\n    &:hover {\n        color: $sc-color-primary;\n    }\n}\n",[81,4570,4571,4576,4583,4590,4597,4604,4613,4629,4634,4639,4643,4647,4651,4655,4660,4667,4675,4685,4689],{"__ignoreMap":172},[176,4572,4573],{"class":178,"line":179},[176,4574,4575],{"class":182},"\u002F\u002F Bad - compiles to verbose selectors\n",[176,4577,4578,4581],{"class":178,"line":186},[176,4579,4580],{"class":398},".header",[176,4582,1966],{"class":189},[176,4584,4585,4588],{"class":178,"line":193},[176,4586,4587],{"class":398},"    .nav",[176,4589,1966],{"class":189},[176,4591,4592,4595],{"class":178,"line":210},[176,4593,4594],{"class":398},"        .item",[176,4596,1966],{"class":189},[176,4598,4599,4602],{"class":178,"line":223},[176,4600,4601],{"class":398},"            .link",[176,4603,1966],{"class":189},[176,4605,4606,4609,4611],{"class":178,"line":236},[176,4607,4608],{"class":2044},"                &",[176,4610,2291],{"class":398},[176,4612,1966],{"class":189},[176,4614,4615,4618,4620,4623,4626],{"class":178,"line":249},[176,4616,4617],{"class":196},"                    color",[176,4619,200],{"class":189},[176,4621,4622],{"class":196},"red",[176,4624,4625],{"class":189},"; ",[176,4627,4628],{"class":182},"\u002F\u002F .header .nav .item .link:hover\n",[176,4630,4631],{"class":178,"line":262},[176,4632,4633],{"class":189},"                }\n",[176,4635,4636],{"class":178,"line":275},[176,4637,4638],{"class":189},"            }\n",[176,4640,4641],{"class":178,"line":288},[176,4642,330],{"class":189},[176,4644,4645],{"class":178,"line":297},[176,4646,1043],{"class":189},[176,4648,4649],{"class":178,"line":303},[176,4650,353],{"class":189},[176,4652,4653],{"class":178,"line":316},[176,4654,470],{"emptyLinePlaceholder":469},[176,4656,4657],{"class":178,"line":327},[176,4658,4659],{"class":182},"\u002F\u002F Good - flat, specific selectors\n",[176,4661,4662,4665],{"class":178,"line":333},[176,4663,4664],{"class":398},".header-nav__link",[176,4666,1966],{"class":189},[176,4668,4669,4671,4673],{"class":178,"line":339},[176,4670,2045],{"class":2044},[176,4672,2291],{"class":398},[176,4674,1966],{"class":189},[176,4676,4677,4679,4681,4683],{"class":178,"line":350},[176,4678,2192],{"class":196},[176,4680,200],{"class":189},[176,4682,1230],{"class":1119},[176,4684,1128],{"class":189},[176,4686,4687],{"class":178,"line":877},[176,4688,1043],{"class":189},[176,4690,4691],{"class":178,"line":885},[176,4692,353],{"class":189},[15,4694,4695],{},[151,4696,4697],{},"Use placeholder selectors for shared styles:",[167,4699,4701],{"className":1096,"code":4700,"language":1098,"meta":172,"style":172},"\u002F\u002F Define once\n%button-base {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: $sc-spacing-sm $sc-spacing-md;\n    border-radius: 4px;\n    font-weight: $sc-font-weight-medium;\n    transition: all 0.2s ease;\n    cursor: pointer;\n}\n\n\u002F\u002F Extend everywhere (no duplicate CSS generated)\n.btn-primary {\n    @extend %button-base;\n    background: $sc-color-primary;\n    color: white;\n}\n\n.btn-secondary {\n    @extend %button-base;\n    background: transparent;\n    border: 1px solid $sc-color-secondary;\n    color: $sc-color-secondary;\n}\n",[81,4702,4703,4708,4715,4726,4737,4748,4761,4774,4785,4803,4815,4819,4823,4828,4835,4845,4856,4868,4872,4876,4883,4891,4902,4920,4930],{"__ignoreMap":172},[176,4704,4705],{"class":178,"line":179},[176,4706,4707],{"class":182},"\u002F\u002F Define once\n",[176,4709,4710,4713],{"class":178,"line":186},[176,4711,4712],{"class":398},"%button-base",[176,4714,1966],{"class":189},[176,4716,4717,4719,4721,4724],{"class":178,"line":193},[176,4718,3702],{"class":196},[176,4720,200],{"class":189},[176,4722,4723],{"class":196},"inline-flex",[176,4725,1128],{"class":189},[176,4727,4728,4731,4733,4735],{"class":178,"line":210},[176,4729,4730],{"class":196},"    align-items",[176,4732,200],{"class":189},[176,4734,2156],{"class":196},[176,4736,1128],{"class":189},[176,4738,4739,4742,4744,4746],{"class":178,"line":223},[176,4740,4741],{"class":196},"    justify-content",[176,4743,200],{"class":189},[176,4745,2156],{"class":196},[176,4747,1128],{"class":189},[176,4749,4750,4752,4754,4756,4759],{"class":178,"line":236},[176,4751,1982],{"class":196},[176,4753,200],{"class":189},[176,4755,3854],{"class":1119},[176,4757,4758],{"class":1119}," $sc-spacing-md",[176,4760,1128],{"class":189},[176,4762,4763,4766,4768,4770,4772],{"class":178,"line":249},[176,4764,4765],{"class":196},"    border-radius",[176,4767,200],{"class":189},[176,4769,2371],{"class":196},[176,4771,2008],{"class":1176},[176,4773,1128],{"class":189},[176,4775,4776,4779,4781,4783],{"class":178,"line":262},[176,4777,4778],{"class":196},"    font-weight",[176,4780,200],{"class":189},[176,4782,1661],{"class":1119},[176,4784,1128],{"class":189},[176,4786,4787,4790,4792,4795,4797,4799,4801],{"class":178,"line":275},[176,4788,4789],{"class":196},"    transition",[176,4791,200],{"class":189},[176,4793,4794],{"class":196},"all",[176,4796,2271],{"class":196},[176,4798,2274],{"class":1176},[176,4800,2277],{"class":196},[176,4802,1128],{"class":189},[176,4804,4805,4808,4810,4813],{"class":178,"line":288},[176,4806,4807],{"class":2044},"    cursor",[176,4809,200],{"class":189},[176,4811,4812],{"class":196},"pointer",[176,4814,1128],{"class":189},[176,4816,4817],{"class":178,"line":297},[176,4818,353],{"class":189},[176,4820,4821],{"class":178,"line":303},[176,4822,470],{"emptyLinePlaceholder":469},[176,4824,4825],{"class":178,"line":316},[176,4826,4827],{"class":182},"\u002F\u002F Extend everywhere (no duplicate CSS generated)\n",[176,4829,4830,4833],{"class":178,"line":327},[176,4831,4832],{"class":398},".btn-primary",[176,4834,1966],{"class":189},[176,4836,4837,4840,4843],{"class":178,"line":333},[176,4838,4839],{"class":1176},"    @extend",[176,4841,4842],{"class":398}," %button-base",[176,4844,1128],{"class":189},[176,4846,4847,4850,4852,4854],{"class":178,"line":339},[176,4848,4849],{"class":196},"    background",[176,4851,200],{"class":189},[176,4853,1230],{"class":1119},[176,4855,1128],{"class":189},[176,4857,4858,4861,4863,4866],{"class":178,"line":350},[176,4859,4860],{"class":196},"    color",[176,4862,200],{"class":189},[176,4864,4865],{"class":196},"white",[176,4867,1128],{"class":189},[176,4869,4870],{"class":178,"line":877},[176,4871,353],{"class":189},[176,4873,4874],{"class":178,"line":885},[176,4875,470],{"emptyLinePlaceholder":469},[176,4877,4878,4881],{"class":178,"line":898},[176,4879,4880],{"class":398},".btn-secondary",[176,4882,1966],{"class":189},[176,4884,4885,4887,4889],{"class":178,"line":911},[176,4886,4839],{"class":1176},[176,4888,4842],{"class":398},[176,4890,1128],{"class":189},[176,4892,4893,4895,4897,4900],{"class":178,"line":922},[176,4894,4849],{"class":196},[176,4896,200],{"class":189},[176,4898,4899],{"class":196},"transparent",[176,4901,1128],{"class":189},[176,4903,4904,4907,4909,4911,4913,4915,4918],{"class":178,"line":927},[176,4905,4906],{"class":196},"    border",[176,4908,200],{"class":189},[176,4910,1538],{"class":196},[176,4912,2008],{"class":1176},[176,4914,2355],{"class":196},[176,4916,4917],{"class":1119}," $sc-color-secondary",[176,4919,1128],{"class":189},[176,4921,4922,4924,4926,4928],{"class":178,"line":932},[176,4923,4860],{"class":196},[176,4925,200],{"class":189},[176,4927,1242],{"class":1119},[176,4929,1128],{"class":189},[176,4931,4932],{"class":178,"line":939},[176,4933,353],{"class":189},[40,4935,4937],{"id":4936},"template-performance","Template Performance",[15,4939,4940],{},[151,4941,4942],{},"Minimize DOM depth:",[167,4944,4946],{"className":2613,"code":4945,"language":2615,"meta":172,"style":172},"{{!-- Bad - unnecessary wrapper divs --}}\n\u003Cdiv class=\"wrapper\">\n    \u003Cdiv class=\"container\">\n        \u003Cdiv class=\"row\">\n            \u003Cdiv class=\"col\">\n                \u003Cdiv class=\"product-item\">\n                    \u003Ch3>{{name}}\u003C\u002Fh3>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n{{!-- Good - semantic, minimal --}}\n\u003Carticle class=\"product-item\">\n    \u003Ch3 class=\"product-item__name\">{{name}}\u003C\u002Fh3>\n\u003C\u002Farticle>\n",[81,4947,4948,4953,4958,4963,4968,4973,4978,4983,4988,4992,4996,5000,5004,5008,5013,5018,5023],{"__ignoreMap":172},[176,4949,4950],{"class":178,"line":179},[176,4951,4952],{},"{{!-- Bad - unnecessary wrapper divs --}}\n",[176,4954,4955],{"class":178,"line":186},[176,4956,4957],{},"\u003Cdiv class=\"wrapper\">\n",[176,4959,4960],{"class":178,"line":193},[176,4961,4962],{},"    \u003Cdiv class=\"container\">\n",[176,4964,4965],{"class":178,"line":210},[176,4966,4967],{},"        \u003Cdiv class=\"row\">\n",[176,4969,4970],{"class":178,"line":223},[176,4971,4972],{},"            \u003Cdiv class=\"col\">\n",[176,4974,4975],{"class":178,"line":236},[176,4976,4977],{},"                \u003Cdiv class=\"product-item\">\n",[176,4979,4980],{"class":178,"line":249},[176,4981,4982],{},"                    \u003Ch3>{{name}}\u003C\u002Fh3>\n",[176,4984,4985],{"class":178,"line":262},[176,4986,4987],{},"                \u003C\u002Fdiv>\n",[176,4989,4990],{"class":178,"line":275},[176,4991,2877],{},[176,4993,4994],{"class":178,"line":288},[176,4995,2804],{},[176,4997,4998],{"class":178,"line":297},[176,4999,2681],{},[176,5001,5002],{"class":178,"line":303},[176,5003,2928],{},[176,5005,5006],{"class":178,"line":316},[176,5007,470],{"emptyLinePlaceholder":469},[176,5009,5010],{"class":178,"line":327},[176,5011,5012],{},"{{!-- Good - semantic, minimal --}}\n",[176,5014,5015],{"class":178,"line":333},[176,5016,5017],{},"\u003Carticle class=\"product-item\">\n",[176,5019,5020],{"class":178,"line":339},[176,5021,5022],{},"    \u003Ch3 class=\"product-item__name\">{{name}}\u003C\u002Fh3>\n",[176,5024,5025],{"class":178,"line":350},[176,5026,5027],{},"\u003C\u002Farticle>\n",[15,5029,5030],{},[151,5031,5032],{},"Lazy-load below-the-fold images:",[167,5034,5036],{"className":2613,"code":5035,"language":2615,"meta":172,"style":172},"{{!-- Add loading=\"lazy\" to images below initial viewport --}}\n\u003Cimg src=\"{{resizeImage url 'thumbnail'}}\"\n     alt=\"{{altText}}\"\n     loading=\"lazy\"\n     decoding=\"async\">\n",[81,5037,5038,5043,5048,5053,5058],{"__ignoreMap":172},[176,5039,5040],{"class":178,"line":179},[176,5041,5042],{},"{{!-- Add loading=\"lazy\" to images below initial viewport --}}\n",[176,5044,5045],{"class":178,"line":186},[176,5046,5047],{},"\u003Cimg src=\"{{resizeImage url 'thumbnail'}}\"\n",[176,5049,5050],{"class":178,"line":193},[176,5051,5052],{},"     alt=\"{{altText}}\"\n",[176,5054,5055],{"class":178,"line":210},[176,5056,5057],{},"     loading=\"lazy\"\n",[176,5059,5060],{"class":178,"line":223},[176,5061,5062],{},"     decoding=\"async\">\n",[40,5064,5066],{"id":5065},"critical-css-considerations","Critical CSS Considerations",[15,5068,5069],{},"For maximum LCP performance, inline critical CSS. While SuiteCommerce doesn't support this natively, you can structure your SASS to make critical styles identifiable:",[167,5071,5073],{"className":1096,"code":5072,"language":1098,"meta":172,"style":172},"\u002F\u002F _critical.scss - styles needed for first paint\n\u002F\u002F Header, hero, above-fold product grid\n\n\u002F\u002F _deferred.scss - styles for below-fold and interactive elements\n\u002F\u002F Footer, modals, checkout forms\n",[81,5074,5075,5080,5085,5089,5094],{"__ignoreMap":172},[176,5076,5077],{"class":178,"line":179},[176,5078,5079],{"class":182},"\u002F\u002F _critical.scss - styles needed for first paint\n",[176,5081,5082],{"class":178,"line":186},[176,5083,5084],{"class":182},"\u002F\u002F Header, hero, above-fold product grid\n",[176,5086,5087],{"class":178,"line":193},[176,5088,470],{"emptyLinePlaceholder":469},[176,5090,5091],{"class":178,"line":210},[176,5092,5093],{"class":182},"\u002F\u002F _deferred.scss - styles for below-fold and interactive elements\n",[176,5095,5096],{"class":178,"line":223},[176,5097,5098],{"class":182},"\u002F\u002F Footer, modals, checkout forms\n",[366,5100],{},[25,5102,5104],{"id":5103},"creating-theme-skins","Creating Theme Skins",[15,5106,5107],{},"Skins allow customers to select color variations from Site Management Tools without code changes. This is powerful for A\u002FB testing designs or seasonal themes.",[40,5109,5111],{"id":5110},"skin-configuration-structure","Skin Configuration Structure",[167,5113,5115],{"className":169,"code":5114,"language":171,"meta":172,"style":172},"\u002F\u002F Skins\u002Fdefault.json\n{\n    \"name\": \"Default\",\n    \"group_id\": \"default\",\n    \"properties\": {\n        \"colors\": {\n            \"sc-color-theme\": \"#2D5A27\",\n            \"sc-color-theme-light\": \"#4A8743\",\n            \"sc-color-theme-background\": \"#E8F5E9\",\n            \"sc-color-primary\": \"#DAA520\",\n            \"sc-color-secondary\": \"#8B4513\"\n        },\n        \"typography\": {\n            \"sc-font-family-base\": \"'Lato', sans-serif\",\n            \"sc-font-family-heading\": \"'Playfair Display', serif\"\n        },\n        \"layout\": {\n            \"header-height\": \"80px\",\n            \"container-max-width\": \"1200px\"\n        }\n    }\n}\n",[81,5116,5117,5122,5126,5137,5148,5155,5162,5174,5186,5198,5210,5220,5224,5231,5243,5253,5257,5264,5276,5286,5290,5294],{"__ignoreMap":172},[176,5118,5119],{"class":178,"line":179},[176,5120,5121],{"class":182},"\u002F\u002F Skins\u002Fdefault.json\n",[176,5123,5124],{"class":178,"line":186},[176,5125,190],{"class":189},[176,5127,5128,5130,5132,5135],{"class":178,"line":193},[176,5129,197],{"class":196},[176,5131,200],{"class":189},[176,5133,5134],{"class":203},"\"Default\"",[176,5136,207],{"class":189},[176,5138,5139,5142,5144,5146],{"class":178,"line":210},[176,5140,5141],{"class":196},"    \"group_id\"",[176,5143,200],{"class":189},[176,5145,311],{"class":203},[176,5147,207],{"class":189},[176,5149,5150,5153],{"class":178,"line":223},[176,5151,5152],{"class":196},"    \"properties\"",[176,5154,817],{"class":189},[176,5156,5157,5160],{"class":178,"line":236},[176,5158,5159],{"class":196},"        \"colors\"",[176,5161,817],{"class":189},[176,5163,5164,5167,5169,5172],{"class":178,"line":249},[176,5165,5166],{"class":196},"            \"sc-color-theme\"",[176,5168,200],{"class":189},[176,5170,5171],{"class":203},"\"#2D5A27\"",[176,5173,207],{"class":189},[176,5175,5176,5179,5181,5184],{"class":178,"line":262},[176,5177,5178],{"class":196},"            \"sc-color-theme-light\"",[176,5180,200],{"class":189},[176,5182,5183],{"class":203},"\"#4A8743\"",[176,5185,207],{"class":189},[176,5187,5188,5191,5193,5196],{"class":178,"line":275},[176,5189,5190],{"class":196},"            \"sc-color-theme-background\"",[176,5192,200],{"class":189},[176,5194,5195],{"class":203},"\"#E8F5E9\"",[176,5197,207],{"class":189},[176,5199,5200,5203,5205,5208],{"class":178,"line":288},[176,5201,5202],{"class":196},"            \"sc-color-primary\"",[176,5204,200],{"class":189},[176,5206,5207],{"class":203},"\"#DAA520\"",[176,5209,207],{"class":189},[176,5211,5212,5215,5217],{"class":178,"line":297},[176,5213,5214],{"class":196},"            \"sc-color-secondary\"",[176,5216,200],{"class":189},[176,5218,5219],{"class":203},"\"#8B4513\"\n",[176,5221,5222],{"class":178,"line":303},[176,5223,968],{"class":189},[176,5225,5226,5229],{"class":178,"line":316},[176,5227,5228],{"class":196},"        \"typography\"",[176,5230,817],{"class":189},[176,5232,5233,5236,5238,5241],{"class":178,"line":327},[176,5234,5235],{"class":196},"            \"sc-font-family-base\"",[176,5237,200],{"class":189},[176,5239,5240],{"class":203},"\"'Lato', sans-serif\"",[176,5242,207],{"class":189},[176,5244,5245,5248,5250],{"class":178,"line":333},[176,5246,5247],{"class":196},"            \"sc-font-family-heading\"",[176,5249,200],{"class":189},[176,5251,5252],{"class":203},"\"'Playfair Display', serif\"\n",[176,5254,5255],{"class":178,"line":339},[176,5256,968],{"class":189},[176,5258,5259,5262],{"class":178,"line":350},[176,5260,5261],{"class":196},"        \"layout\"",[176,5263,817],{"class":189},[176,5265,5266,5269,5271,5274],{"class":178,"line":877},[176,5267,5268],{"class":196},"            \"header-height\"",[176,5270,200],{"class":189},[176,5272,5273],{"class":203},"\"80px\"",[176,5275,207],{"class":189},[176,5277,5278,5281,5283],{"class":178,"line":885},[176,5279,5280],{"class":196},"            \"container-max-width\"",[176,5282,200],{"class":189},[176,5284,5285],{"class":203},"\"1200px\"\n",[176,5287,5288],{"class":178,"line":898},[176,5289,330],{"class":189},[176,5291,5292],{"class":178,"line":911},[176,5293,1043],{"class":189},[176,5295,5296],{"class":178,"line":922},[176,5297,353],{"class":189},[40,5299,5301],{"id":5300},"creating-a-dark-mode-skin","Creating a Dark Mode Skin",[167,5303,5305],{"className":169,"code":5304,"language":171,"meta":172,"style":172},"\u002F\u002F Skins\u002Fdark.json\n{\n    \"name\": \"Dark Mode\",\n    \"group_id\": \"dark\",\n    \"properties\": {\n        \"colors\": {\n            \"sc-color-theme\": \"#1A1A2E\",\n            \"sc-color-theme-light\": \"#2D2D44\",\n            \"sc-color-theme-background\": \"#0F0F1A\",\n            \"sc-color-theme-background-light\": \"#1A1A2E\",\n            \"sc-color-theme-border\": \"#3D3D5C\",\n            \n            \"sc-color-primary\": \"#FFD700\",\n            \"sc-color-secondary\": \"#E0E0E0\",\n            \"sc-color-tertiary\": \"#121212\",\n            \n            \"sc-color-text-primary\": \"#FFFFFF\",\n            \"sc-color-text-secondary\": \"#B0B0B0\",\n            \"sc-color-text-muted\": \"#707070\"\n        },\n        \"typography\": {\n            \"sc-font-family-base\": \"'Inter', sans-serif\"\n        }\n    }\n}\n",[81,5306,5307,5312,5316,5327,5337,5343,5349,5360,5371,5382,5393,5405,5410,5421,5432,5444,5448,5460,5472,5482,5486,5492,5501,5505,5509],{"__ignoreMap":172},[176,5308,5309],{"class":178,"line":179},[176,5310,5311],{"class":182},"\u002F\u002F Skins\u002Fdark.json\n",[176,5313,5314],{"class":178,"line":186},[176,5315,190],{"class":189},[176,5317,5318,5320,5322,5325],{"class":178,"line":193},[176,5319,197],{"class":196},[176,5321,200],{"class":189},[176,5323,5324],{"class":203},"\"Dark Mode\"",[176,5326,207],{"class":189},[176,5328,5329,5331,5333,5335],{"class":178,"line":210},[176,5330,5141],{"class":196},[176,5332,200],{"class":189},[176,5334,983],{"class":203},[176,5336,207],{"class":189},[176,5338,5339,5341],{"class":178,"line":223},[176,5340,5152],{"class":196},[176,5342,817],{"class":189},[176,5344,5345,5347],{"class":178,"line":236},[176,5346,5159],{"class":196},[176,5348,817],{"class":189},[176,5350,5351,5353,5355,5358],{"class":178,"line":249},[176,5352,5166],{"class":196},[176,5354,200],{"class":189},[176,5356,5357],{"class":203},"\"#1A1A2E\"",[176,5359,207],{"class":189},[176,5361,5362,5364,5366,5369],{"class":178,"line":262},[176,5363,5178],{"class":196},[176,5365,200],{"class":189},[176,5367,5368],{"class":203},"\"#2D2D44\"",[176,5370,207],{"class":189},[176,5372,5373,5375,5377,5380],{"class":178,"line":275},[176,5374,5190],{"class":196},[176,5376,200],{"class":189},[176,5378,5379],{"class":203},"\"#0F0F1A\"",[176,5381,207],{"class":189},[176,5383,5384,5387,5389,5391],{"class":178,"line":288},[176,5385,5386],{"class":196},"            \"sc-color-theme-background-light\"",[176,5388,200],{"class":189},[176,5390,5357],{"class":203},[176,5392,207],{"class":189},[176,5394,5395,5398,5400,5403],{"class":178,"line":297},[176,5396,5397],{"class":196},"            \"sc-color-theme-border\"",[176,5399,200],{"class":189},[176,5401,5402],{"class":203},"\"#3D3D5C\"",[176,5404,207],{"class":189},[176,5406,5407],{"class":178,"line":303},[176,5408,5409],{"class":189},"            \n",[176,5411,5412,5414,5416,5419],{"class":178,"line":316},[176,5413,5202],{"class":196},[176,5415,200],{"class":189},[176,5417,5418],{"class":203},"\"#FFD700\"",[176,5420,207],{"class":189},[176,5422,5423,5425,5427,5430],{"class":178,"line":327},[176,5424,5214],{"class":196},[176,5426,200],{"class":189},[176,5428,5429],{"class":203},"\"#E0E0E0\"",[176,5431,207],{"class":189},[176,5433,5434,5437,5439,5442],{"class":178,"line":333},[176,5435,5436],{"class":196},"            \"sc-color-tertiary\"",[176,5438,200],{"class":189},[176,5440,5441],{"class":203},"\"#121212\"",[176,5443,207],{"class":189},[176,5445,5446],{"class":178,"line":339},[176,5447,5409],{"class":189},[176,5449,5450,5453,5455,5458],{"class":178,"line":350},[176,5451,5452],{"class":196},"            \"sc-color-text-primary\"",[176,5454,200],{"class":189},[176,5456,5457],{"class":203},"\"#FFFFFF\"",[176,5459,207],{"class":189},[176,5461,5462,5465,5467,5470],{"class":178,"line":877},[176,5463,5464],{"class":196},"            \"sc-color-text-secondary\"",[176,5466,200],{"class":189},[176,5468,5469],{"class":203},"\"#B0B0B0\"",[176,5471,207],{"class":189},[176,5473,5474,5477,5479],{"class":178,"line":885},[176,5475,5476],{"class":196},"            \"sc-color-text-muted\"",[176,5478,200],{"class":189},[176,5480,5481],{"class":203},"\"#707070\"\n",[176,5483,5484],{"class":178,"line":898},[176,5485,968],{"class":189},[176,5487,5488,5490],{"class":178,"line":911},[176,5489,5228],{"class":196},[176,5491,817],{"class":189},[176,5493,5494,5496,5498],{"class":178,"line":922},[176,5495,5235],{"class":196},[176,5497,200],{"class":189},[176,5499,5500],{"class":203},"\"'Inter', sans-serif\"\n",[176,5502,5503],{"class":178,"line":927},[176,5504,330],{"class":189},[176,5506,5507],{"class":178,"line":932},[176,5508,1043],{"class":189},[176,5510,5511],{"class":178,"line":939},[176,5512,353],{"class":189},[40,5514,5516],{"id":5515},"sass-integration-with-skins","SASS Integration with Skins",[15,5518,5519],{},"Your SASS must reference skin-configurable variables correctly:",[167,5521,5523],{"className":1096,"code":5522,"language":1098,"meta":172,"style":172},"\u002F\u002F Use !default flag so skin values take precedence\n$sc-color-theme: #2D5A27 !default;\n$sc-color-primary: #DAA520 !default;\n$header-height: 80px !default;\n\n\u002F\u002F Use variables in your styles\n.header-main {\n    height: $header-height;\n    background-color: $sc-color-theme;\n}\n",[81,5524,5525,5530,5543,5555,5571,5575,5580,5586,5597,5607],{"__ignoreMap":172},[176,5526,5527],{"class":178,"line":179},[176,5528,5529],{"class":182},"\u002F\u002F Use !default flag so skin values take precedence\n",[176,5531,5532,5534,5536,5538,5541],{"class":178,"line":186},[176,5533,1120],{"class":1119},[176,5535,200],{"class":189},[176,5537,1728],{"class":196},[176,5539,5540],{"class":1176}," !default",[176,5542,1128],{"class":189},[176,5544,5545,5547,5549,5551,5553],{"class":178,"line":193},[176,5546,1230],{"class":1119},[176,5548,200],{"class":189},[176,5550,1758],{"class":196},[176,5552,5540],{"class":1176},[176,5554,1128],{"class":189},[176,5556,5557,5560,5562,5565,5567,5569],{"class":178,"line":210},[176,5558,5559],{"class":1119},"$header-height",[176,5561,200],{"class":189},[176,5563,5564],{"class":196},"80",[176,5566,2008],{"class":1176},[176,5568,5540],{"class":1176},[176,5570,1128],{"class":189},[176,5572,5573],{"class":178,"line":223},[176,5574,470],{"emptyLinePlaceholder":469},[176,5576,5577],{"class":178,"line":236},[176,5578,5579],{"class":182},"\u002F\u002F Use variables in your styles\n",[176,5581,5582,5584],{"class":178,"line":249},[176,5583,1963],{"class":398},[176,5585,1966],{"class":189},[176,5587,5588,5591,5593,5595],{"class":178,"line":262},[176,5589,5590],{"class":196},"    height",[176,5592,200],{"class":189},[176,5594,5559],{"class":1119},[176,5596,1128],{"class":189},[176,5598,5599,5601,5603,5605],{"class":178,"line":275},[176,5600,1971],{"class":196},[176,5602,200],{"class":189},[176,5604,1120],{"class":1119},[176,5606,1128],{"class":189},[176,5608,5609],{"class":178,"line":288},[176,5610,353],{"class":189},[366,5612],{},[25,5614,5616],{"id":5615},"local-development-and-testing","Local Development and Testing",[15,5618,5619],{},"Efficient local testing prevents endless deploy cycles. SuiteCommerce provides a local development server.",[40,5621,5623],{"id":5622},"running-the-local-server","Running the Local Server",[167,5625,5627],{"className":384,"code":5626,"language":386,"meta":172,"style":172},"# Start local development server\ngulp theme:local\n\n# With live reload\ngulp theme:local --reload\n\n# Targeting specific theme\ngulp theme:local --theme mycustomtheme\n",[81,5628,5629,5634,5641,5645,5650,5660,5664,5669],{"__ignoreMap":172},[176,5630,5631],{"class":178,"line":179},[176,5632,5633],{"class":182},"# Start local development server\n",[176,5635,5636,5638],{"class":178,"line":186},[176,5637,491],{"class":398},[176,5639,5640],{"class":203}," theme:local\n",[176,5642,5643],{"class":178,"line":193},[176,5644,470],{"emptyLinePlaceholder":469},[176,5646,5647],{"class":178,"line":210},[176,5648,5649],{"class":182},"# With live reload\n",[176,5651,5652,5654,5657],{"class":178,"line":223},[176,5653,491],{"class":398},[176,5655,5656],{"class":203}," theme:local",[176,5658,5659],{"class":196}," --reload\n",[176,5661,5662],{"class":178,"line":236},[176,5663,470],{"emptyLinePlaceholder":469},[176,5665,5666],{"class":178,"line":249},[176,5667,5668],{"class":182},"# Targeting specific theme\n",[176,5670,5671,5673,5675,5678],{"class":178,"line":262},[176,5672,491],{"class":398},[176,5674,5656],{"class":203},[176,5676,5677],{"class":196}," --theme",[176,5679,5680],{"class":203}," mycustomtheme\n",[15,5682,5683],{},"This spins up a local server (typically on port 7777) that proxies your NetSuite site while serving local theme files.",[40,5685,5687],{"id":5686},"testing-workflow","Testing Workflow",[5689,5690,5691,5700,5709,5715,5721],"ol",{},[598,5692,5693,5696,5697],{},[151,5694,5695],{},"Start local server:"," ",[81,5698,5699],{},"gulp theme:local",[598,5701,5702,5705,5706],{},[151,5703,5704],{},"Open browser:"," Navigate to ",[81,5707,5708],{},"https:\u002F\u002Flocalhost:7777",[598,5710,5711,5714],{},[151,5712,5713],{},"Accept certificate warning"," (self-signed cert for local HTTPS)",[598,5716,5717,5720],{},[151,5718,5719],{},"Make changes"," to SASS or templates",[598,5722,5723,5726],{},[151,5724,5725],{},"Refresh browser"," to see changes (or wait for live reload)",[40,5728,5730],{"id":5729},"debugging-tips","Debugging Tips",[15,5732,5733],{},[151,5734,5735],{},"View compiled CSS:",[167,5737,5739],{"className":384,"code":5738,"language":386,"meta":172,"style":172},"# Check LocalDistribution folder for compiled output\nls -la LocalDistribution\u002Fcss\u002F\n",[81,5740,5741,5746],{"__ignoreMap":172},[176,5742,5743],{"class":178,"line":179},[176,5744,5745],{"class":182},"# Check LocalDistribution folder for compiled output\n",[176,5747,5748,5751,5754],{"class":178,"line":186},[176,5749,5750],{"class":398},"ls",[176,5752,5753],{"class":196}," -la",[176,5755,5756],{"class":203}," LocalDistribution\u002Fcss\u002F\n",[15,5758,5759],{},[151,5760,5761],{},"Validate SASS compilation:",[167,5763,5765],{"className":384,"code":5764,"language":386,"meta":172,"style":172},"# Compile only (don't start server)\ngulp sass:compile\n\n# Check for errors in terminal output\n",[81,5766,5767,5772,5779,5783],{"__ignoreMap":172},[176,5768,5769],{"class":178,"line":179},[176,5770,5771],{"class":182},"# Compile only (don't start server)\n",[176,5773,5774,5776],{"class":178,"line":186},[176,5775,491],{"class":398},[176,5777,5778],{"class":203}," sass:compile\n",[176,5780,5781],{"class":178,"line":193},[176,5782,470],{"emptyLinePlaceholder":469},[176,5784,5785],{"class":178,"line":210},[176,5786,5787],{"class":182},"# Check for errors in terminal output\n",[15,5789,5790],{},[151,5791,5792],{},"Template debugging in browser:",[167,5794,5798],{"className":5795,"code":5796,"language":5797,"meta":172,"style":172},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F In browser console, access Backbone views\nSC.ENVIRONMENT.TEMPLATES \u002F\u002F List all templates\nSC.Application.getComponent('PDP').view \u002F\u002F Access product detail view\n","javascript",[81,5799,5800,5805,5823],{"__ignoreMap":172},[176,5801,5802],{"class":178,"line":179},[176,5803,5804],{"class":182},"\u002F\u002F In browser console, access Backbone views\n",[176,5806,5807,5810,5812,5815,5817,5820],{"class":178,"line":186},[176,5808,5809],{"class":196},"SC",[176,5811,364],{"class":189},[176,5813,5814],{"class":196},"ENVIRONMENT",[176,5816,364],{"class":189},[176,5818,5819],{"class":196},"TEMPLATES",[176,5821,5822],{"class":182}," \u002F\u002F List all templates\n",[176,5824,5825,5827,5830,5833,5835,5838,5841],{"class":178,"line":193},[176,5826,5809],{"class":196},[176,5828,5829],{"class":189},".Application.",[176,5831,5832],{"class":398},"getComponent",[176,5834,1165],{"class":189},[176,5836,5837],{"class":203},"'PDP'",[176,5839,5840],{"class":189},").view ",[176,5842,5843],{"class":182},"\u002F\u002F Access product detail view\n",[366,5845],{},[25,5847,5849],{"id":5848},"deployment-process","Deployment Process",[15,5851,5852],{},"When your theme is ready, deploy to your NetSuite account for production use.",[40,5854,5856],{"id":5855},"pre-deployment-checklist","Pre-Deployment Checklist",[15,5858,5859],{},"Before deploying, verify:",[595,5861,5864,5873,5879,5885,5891,5897,5903],{"className":5862},[5863],"contains-task-list",[598,5865,5868,5872],{"className":5866},[5867],"task-list-item",[5869,5870],"input",{"disabled":469,"type":5871},"checkbox"," All SASS compiles without errors",[598,5874,5876,5878],{"className":5875},[5867],[5869,5877],{"disabled":469,"type":5871}," Templates render correctly at all breakpoints",[598,5880,5882,5884],{"className":5881},[5867],[5869,5883],{"disabled":469,"type":5871}," No console errors in browser dev tools",[598,5886,5888,5890],{"className":5887},[5867],[5869,5889],{"disabled":469,"type":5871}," Images optimized (WebP format where possible)",[598,5892,5894,5896],{"className":5893},[5867],[5869,5895],{"disabled":469,"type":5871}," manifest.json version updated",[598,5898,5900,5902],{"className":5899},[5867],[5869,5901],{"disabled":469,"type":5871}," Tested in Safari, Chrome, Firefox, Edge",[598,5904,5906,5908],{"className":5905},[5867],[5869,5907],{"disabled":469,"type":5871}," Mobile testing on real devices",[40,5910,5912],{"id":5911},"deploying-to-sandbox","Deploying to Sandbox",[15,5914,5915],{},"Always deploy to sandbox first:",[167,5917,5919],{"className":384,"code":5918,"language":386,"meta":172,"style":172},"# Deploy theme to sandbox\ngulp theme:deploy\n\n# Select sandbox environment when prompted\n# Or specify in command:\ngulp theme:deploy --to sandbox\n",[81,5920,5921,5926,5933,5937,5942,5947],{"__ignoreMap":172},[176,5922,5923],{"class":178,"line":179},[176,5924,5925],{"class":182},"# Deploy theme to sandbox\n",[176,5927,5928,5930],{"class":178,"line":186},[176,5929,491],{"class":398},[176,5931,5932],{"class":203}," theme:deploy\n",[176,5934,5935],{"class":178,"line":193},[176,5936,470],{"emptyLinePlaceholder":469},[176,5938,5939],{"class":178,"line":210},[176,5940,5941],{"class":182},"# Select sandbox environment when prompted\n",[176,5943,5944],{"class":178,"line":223},[176,5945,5946],{"class":182},"# Or specify in command:\n",[176,5948,5949,5951,5954,5957],{"class":178,"line":236},[176,5950,491],{"class":398},[176,5952,5953],{"class":203}," theme:deploy",[176,5955,5956],{"class":196}," --to",[176,5958,5959],{"class":203}," sandbox\n",[40,5961,5963],{"id":5962},"sandbox-testing","Sandbox Testing",[15,5965,5966],{},"After sandbox deployment:",[5689,5968,5969,5972,5975,5978,5981],{},[598,5970,5971],{},"Navigate to Commerce → Websites → Manage",[598,5973,5974],{},"Select your website",[598,5976,5977],{},"Go to Themes tab",[598,5979,5980],{},"Activate your new theme",[598,5982,5983],{},"Test thoroughly before production deployment",[40,5985,5987],{"id":5986},"production-deployment","Production Deployment",[167,5989,5991],{"className":384,"code":5990,"language":386,"meta":172,"style":172},"# Deploy to production\ngulp theme:deploy --to production\n",[81,5992,5993,5998],{"__ignoreMap":172},[176,5994,5995],{"class":178,"line":179},[176,5996,5997],{"class":182},"# Deploy to production\n",[176,5999,6000,6002,6004,6006],{"class":178,"line":186},[176,6001,491],{"class":398},[176,6003,5953],{"class":203},[176,6005,5956],{"class":196},[176,6007,6008],{"class":203}," production\n",[15,6010,6011],{},[151,6012,6013],{},"Zero-downtime activation:",[5689,6015,6016,6019,6022,6025,6028],{},[598,6017,6018],{},"Deploy theme (doesn't affect live site yet)",[598,6020,6021],{},"Test on a non-published skin variation if possible",[598,6023,6024],{},"Activate theme during low-traffic period",[598,6026,6027],{},"Monitor for issues",[598,6029,6030],{},"Have rollback plan ready (previous theme still available)",[40,6032,6034],{"id":6033},"rollback-procedure","Rollback Procedure",[15,6036,6037],{},"If issues arise post-deployment:",[5689,6039,6040,6043,6046,6049],{},[598,6041,6042],{},"Go to Commerce → Websites → Manage",[598,6044,6045],{},"Select website → Themes tab",[598,6047,6048],{},"Activate previous theme version",[598,6050,6051],{},"Investigate issues in sandbox",[366,6053],{},[25,6055,6057],{"id":6056},"troubleshooting-common-issues","Troubleshooting Common Issues",[40,6059,6061],{"id":6060},"sass-compilation-errors","SASS Compilation Errors",[15,6063,6064],{},[151,6065,6066],{},"\"Undefined variable\" error:",[167,6068,6070],{"className":384,"code":6069,"language":386,"meta":172,"style":172},"Error: Undefined variable: \"$sc-color-theme\"\n",[81,6071,6072],{"__ignoreMap":172},[176,6073,6074,6077,6080,6083,6086,6089],{"class":178,"line":179},[176,6075,6076],{"class":398},"Error:",[176,6078,6079],{"class":203}," Undefined",[176,6081,6082],{"class":203}," variable:",[176,6084,6085],{"class":203}," \"",[176,6087,6088],{"class":189},"$sc",[176,6090,6091],{"class":203},"-color-theme\"\n",[15,6093,6094,6097],{},[151,6095,6096],{},"Fix:"," Ensure variable definition files are imported before usage in entry points.",[40,6099,6101],{"id":6100},"template-not-found","Template Not Found",[15,6103,6104],{},[151,6105,6106],{},"Theme shows base template instead of custom:",[15,6108,6109],{},"Verify:",[5689,6111,6112,6115,6120],{},[598,6113,6114],{},"Template path matches exactly in manifest.json",[598,6116,6117,6118],{},"Template file extension is ",[81,6119,97],{},[598,6121,6122],{},"Module folder uses correct version notation (@1.0.0)",[40,6124,6126],{"id":6125},"styles-not-applying","Styles Not Applying",[15,6128,6129],{},[151,6130,6131],{},"CSS changes not visible:",[5689,6133,6134,6137,6140,6143],{},[598,6135,6136],{},"Clear browser cache (hard refresh)",[598,6138,6139],{},"Check if SASS file is included in entry point",[598,6141,6142],{},"Verify no specificity conflicts with base styles",[598,6144,6145],{},"Check for typos in class names",[40,6147,6149],{"id":6148},"local-server-issues","Local Server Issues",[15,6151,6152],{},[151,6153,6154],{},"\"ECONNREFUSED\" or certificate errors:",[167,6156,6158],{"className":384,"code":6157,"language":386,"meta":172,"style":172},"# Regenerate local certificate\ngulp certificates:generate\n\n# Clear node_modules and reinstall\nrm -rf node_modules\nnpm install\n",[81,6159,6160,6165,6172,6176,6181,6192],{"__ignoreMap":172},[176,6161,6162],{"class":178,"line":179},[176,6163,6164],{"class":182},"# Regenerate local certificate\n",[176,6166,6167,6169],{"class":178,"line":186},[176,6168,491],{"class":398},[176,6170,6171],{"class":203}," certificates:generate\n",[176,6173,6174],{"class":178,"line":193},[176,6175,470],{"emptyLinePlaceholder":469},[176,6177,6178],{"class":178,"line":210},[176,6179,6180],{"class":182},"# Clear node_modules and reinstall\n",[176,6182,6183,6186,6189],{"class":178,"line":223},[176,6184,6185],{"class":398},"rm",[176,6187,6188],{"class":196}," -rf",[176,6190,6191],{"class":203}," node_modules\n",[176,6193,6194,6196],{"class":178,"line":236},[176,6195,475],{"class":398},[176,6197,552],{"class":203},[366,6199],{},[25,6201,6203],{"id":6202},"faq","FAQ",[15,6205,6206],{},[151,6207,6208],{},"Q: How long does a custom theme project typically take?",[15,6210,6211],{},"A: A complete custom theme typically takes 4-8 weeks depending on complexity. Simple color\u002Ftypography changes can be done in days. Full visual redesigns with custom templates take longer.",[15,6213,6214],{},[151,6215,6216],{},"Q: Can I use CSS frameworks like Tailwind with SuiteCommerce?",[15,6218,6219],{},"A: Not recommended. SuiteCommerce's build system expects its SASS architecture. You can incorporate utility-class patterns within the existing structure, but replacing it entirely causes compatibility issues.",[15,6221,6222],{},[151,6223,6224],{},"Q: Should I upgrade to fallback themes if I have an existing full theme?",[15,6226,6227],{},"A: Yes, when you next need significant theme changes. Fallback themes dramatically reduce upgrade maintenance. Plan this as a dedicated project—it's worth the investment.",[15,6229,6230],{},[151,6231,6232],{},"Q: How do I handle custom fonts?",[15,6234,6235],{},"A: Upload fonts to assets\u002Ffonts, reference them in your SASS with @font-face declarations, and use the variable system for font-family assignments. Consider performance impact—each font file adds to page weight.",[15,6237,6238],{},[151,6239,6240],{},"Q: Can multiple skins use different layouts, not just colors?",[15,6242,6243],{},"A: Skins primarily control variables, so layout changes are limited to what can be controlled by CSS values (spacing, widths, heights). For structural layout changes, you need template modifications.",[366,6245],{},[25,6247,6249],{"id":6248},"next-steps","Next Steps",[15,6251,6252],{},"Building a custom SuiteCommerce theme is a significant undertaking, but the results—stronger brand identity, better UX, improved conversions—justify the investment.",[15,6254,6255],{},"If you're starting a theme project and want expert guidance, our team has built custom themes for dozens of SuiteCommerce stores. We can help you avoid common pitfalls and deliver results faster.",[15,6257,6258],{},[6259,6260,6262],"a",{"href":6261},"\u002Fcontact","Get a Free Theme Consultation →",[366,6264],{},[15,6266,6267],{},[6268,6269,6270,6271,6275],"em",{},"Need immediate help with your SuiteCommerce theme? ",[6259,6272,6274],{"href":6273},"\u002Fnetsuite-services\u002Fsuitescript-development","Contact our development team"," for expert assistance.",[6277,6278,6279],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":172,"searchDepth":186,"depth":186,"links":6281},[6282,6286,6292,6296,6303,6308,6313,6318,6323,6328,6335,6341,6342],{"id":27,"depth":186,"text":28,"children":6283},[6284,6285],{"id":42,"depth":193,"text":43},{"id":157,"depth":193,"text":158},{"id":370,"depth":186,"text":371,"children":6287},[6288,6289,6290,6291],{"id":377,"depth":193,"text":378},{"id":501,"depth":193,"text":502},{"id":574,"depth":193,"text":575},{"id":638,"depth":193,"text":639},{"id":655,"depth":186,"text":656,"children":6293},[6294,6295],{"id":662,"depth":193,"text":663},{"id":710,"depth":193,"text":711},{"id":1082,"depth":186,"text":1083,"children":6297},[6298,6299,6300,6301,6302],{"id":1089,"depth":193,"text":1090},{"id":1362,"depth":193,"text":1363},{"id":1695,"depth":193,"text":1696},{"id":1940,"depth":193,"text":1941},{"id":2393,"depth":193,"text":2394},{"id":2599,"depth":186,"text":2600,"children":6304},[6305,6306,6307],{"id":2609,"depth":193,"text":2610},{"id":2931,"depth":193,"text":2932},{"id":3034,"depth":193,"text":3035},{"id":3423,"depth":186,"text":3424,"children":6309},[6310,6311,6312],{"id":3436,"depth":193,"text":3437},{"id":3667,"depth":193,"text":3668},{"id":4316,"depth":193,"text":4317},{"id":4552,"depth":186,"text":4553,"children":6314},[6315,6316,6317],{"id":4559,"depth":193,"text":4560},{"id":4936,"depth":193,"text":4937},{"id":5065,"depth":193,"text":5066},{"id":5103,"depth":186,"text":5104,"children":6319},[6320,6321,6322],{"id":5110,"depth":193,"text":5111},{"id":5300,"depth":193,"text":5301},{"id":5515,"depth":193,"text":5516},{"id":5615,"depth":186,"text":5616,"children":6324},[6325,6326,6327],{"id":5622,"depth":193,"text":5623},{"id":5686,"depth":193,"text":5687},{"id":5729,"depth":193,"text":5730},{"id":5848,"depth":186,"text":5849,"children":6329},[6330,6331,6332,6333,6334],{"id":5855,"depth":193,"text":5856},{"id":5911,"depth":193,"text":5912},{"id":5962,"depth":193,"text":5963},{"id":5986,"depth":193,"text":5987},{"id":6033,"depth":193,"text":6034},{"id":6056,"depth":186,"text":6057,"children":6336},[6337,6338,6339,6340],{"id":6060,"depth":193,"text":6061},{"id":6100,"depth":193,"text":6101},{"id":6125,"depth":193,"text":6126},{"id":6148,"depth":193,"text":6149},{"id":6202,"depth":186,"text":6203},{"id":6248,"depth":186,"text":6249},[6344,6345,6346],"Development","SuiteCommerce","Themes","2026-02-08","Complete developer's guide to building custom SuiteCommerce themes. SASS architecture, template customization, responsive design, performance optimization, and deployment with code examples.","md","\u002Fimages\u002Fblog\u002Fsuitecommerce-theme-hero.webp",{},"\u002Fblog\u002Fsuitecommerce-theme-development-design-to-deployment",null,{"title":5,"description":6348},"blog\u002Fsuitecommerce-theme-development-design-to-deployment",[6357,6358,6359,89,6360,6361],"Theme Development","SASS","CSS","Frontend Development","Customization","ouP_xRqlkR6VMHpmudgbUqI7AVCooWkzxUICu7G0WXQ",[6364,6374,6386,6398,6407,6417,6429,6438,6448,6457,6466,6475,6483,6493,6501,6504,6516,6525,6534,6543,6551],{"path":6365,"title":6366,"categories":6367,"tags":6368,"heroImage":6373},"\u002Fblog\u002Fbuilding-custom-suitecommerce-extensions-developer-guide","Building Custom SuiteCommerce Extensions: A Developer's Start-to-Finish Guide",[6345,6344],[6369,6370,6371,6372,6360],"SuiteCommerce Extensions","Custom Development","Backbone.js","SuiteScript","\u002Fimages\u002Fblog\u002Fextensions-guide-hero.webp",{"path":6375,"title":6376,"categories":6377,"tags":6379,"heroImage":6385},"\u002Fblog\u002Fcore-web-vitals-suitecommerce-optimization-checklist","Core Web Vitals for SuiteCommerce: The Complete 2026 Optimization Checklist",[6378,6345],"Performance",[6380,6381,6382,6383,6384,6345],"Core Web Vitals","LCP","INP","CLS","Performance Optimization","\u002Fimages\u002Fblog\u002Fcore-web-vitals-hero.webp",{"path":6387,"title":6388,"categories":6389,"tags":6391,"heroImage":6397},"\u002Fblog\u002Ffixing-duplicate-content-suitecommerce-faceted-navigation","Fixing Duplicate Content in SuiteCommerce Faceted Navigation",[6390,6345],"SEO",[6392,6393,6394,6395,6345,6396],"Duplicate Content","Faceted Navigation","Canonical Tags","Technical SEO","URL Parameters","\u002Fimages\u002Fblog\u002Fduplicate-content-seo-hero.webp",{"path":6399,"title":6400,"categories":6401,"tags":6402,"heroImage":6406},"\u002Fblog\u002Fheadless-suitecommerce-when-does-it-make-sense","Headless SuiteCommerce: When Does It Make Sense?",[6345,6344],[6345,6403,6404,6405,6378],"Headless Commerce","Architecture","Implementation","\u002Fimages\u002Fblog\u002Fheadless-suitecommerce-hero.webp",{"path":6408,"title":6409,"categories":6410,"tags":6412,"heroImage":6416},"\u002Fblog\u002Fnetsuite-ecommerce-integration-architecture-how-suitecommerce-works","NetSuite E-commerce Integration Architecture: How SuiteCommerce Actually Works",[6345,6344,6411],"Integration",[6404,6411,6372,6413,6414,6415],"API","Backend","Frontend","\u002Fimages\u002Fblog\u002Fnetsuite-ecommerce-integration-hero.webp",{"path":6418,"title":6419,"categories":6420,"tags":6422,"heroImage":6428},"\u002Fblog\u002Fnetsuite-integration-without-celigo-when-custom-beats-off-the-shelf","NetSuite Integration Without Celigo: When Custom Beats Off-the-Shelf",[6421,6411],"NetSuite",[6423,6424,6425,6426,6372,6427],"NetSuite Integration","Celigo","Custom Integration","RESTlet","API Development","\u002Fimages\u002Fblog\u002Fnetsuite-integration-hero.webp",{"path":6430,"title":6431,"categories":6432,"tags":6433,"heroImage":6437},"\u002Fblog\u002Fsuitecommerce-checkout-optimization-fixing-abandonment","SuiteCommerce Checkout Optimization: Fixing Abandonment at the Technical Level",[6345,6378],[6345,6434,6435,6436,6378],"Checkout Optimization","Cart Abandonment","Conversions","\u002Fimages\u002Fblog\u002Fsuitecommerce-checkout-hero.webp",{"path":6439,"title":6440,"categories":6441,"tags":6442,"heroImage":6447},"\u002Fblog\u002Fsuitecommerce-image-optimization-developer-guide","SuiteCommerce Image Optimization: A Developer's Guide",[6378,6345],[6443,6444,6445,6446,6378,6345],"Image Optimization","WebP","Lazy Loading","CDN","\u002Fimages\u002Fblog\u002Fimage-optimization-hero.webp",{"path":6449,"title":6450,"categories":6451,"tags":6452,"heroImage":6456},"\u002Fblog\u002Fsuitecommerce-implementation-cost-guide-2026","SuiteCommerce Implementation Cost Guide: What to Expect in 2026",[6345,6405],[6453,6405,6421,6454,6455],"SuiteCommerce Cost","Budget Planning","E-commerce","\u002Fimages\u002Fblog\u002Fimplementation-cost-hero.webp",{"path":6458,"title":6459,"categories":6460,"tags":6461,"heroImage":6465},"\u002Fblog\u002Fsuitecommerce-migration-checklist-upgrading-without-downtime","The SuiteCommerce Migration Checklist: Upgrading Without Downtime",[6345,6344],[6345,6462,6463,6464,6405],"Migration","Upgrade","Zero Downtime","\u002Fimages\u002Fblog\u002Fmigration-checklist-hero.webp",{"path":6467,"title":6468,"categories":6469,"tags":6470,"heroImage":6474},"\u002Fblog\u002Fsuitecommerce-myaccount-customization-b2b-features","SuiteCommerce MyAccount Customization: 10 Features B2B Customers Need",[6345,6344],[6345,6471,6472,6361,6473],"MyAccount","B2B","Portal","\u002Fimages\u002Fblog\u002Fsuitecommerce-myaccount-hero.webp",{"path":6476,"title":6477,"categories":6478,"tags":6480,"heroImage":6482},"\u002Fblog\u002Fsuitecommerce-performance-audit-286-stores","We Audited 286 Live SuiteCommerce Stores. Here's What We Found",[6378,6479,6345],"Research",[6378,6345,6380,6479,6481],"Benchmarks","\u002Fimages\u002Fblog\u002Fsuitecommerce-audit-hero.webp",{"path":6484,"title":6485,"categories":6486,"tags":6487,"heroImage":6492},"\u002Fblog\u002Fsuitecommerce-product-page-optimization-conversions-seo","How to Optimize SuiteCommerce Product Pages for Conversions and SEO",[6390,6378,6345],[6488,6489,6490,6395,6491],"Product Pages","Conversion Optimization","Schema Markup","CRO","\u002Fimages\u002Fblog\u002Fsuitecommerce-product-page-hero.webp",{"path":6494,"title":6495,"categories":6496,"tags":6497,"heroImage":6500},"\u002Fblog\u002Fsuitecommerce-seo-schema-markup-technical-guide","SuiteCommerce SEO: Schema Markup, Technical SEO, and What Actually Works",[6390,6345],[6490,6395,6498,6499,6345,6421],"JSON-LD","Structured Data","\u002Fimages\u002Fblog\u002Fseo-schema-markup-hero.webp",{"path":6352,"title":5,"categories":6502,"tags":6503,"heroImage":6350},[6344,6345,6346],[6357,6358,6359,89,6360,6361],{"path":6505,"title":6506,"categories":6507,"tags":6510,"heroImage":6515},"\u002Fblog\u002Fsuitecommerce-version-upgrade-guide-2024","SuiteCommerce Version Upgrade Guide: 2023.x to 2024.x",[6345,6508,6509],"Maintenance","Upgrades",[6511,6462,6512,6513,6514],"Version Upgrade","2024 Release","SCA","Deployment","\u002Fimages\u002Fblog\u002Fsuitecommerce-upgrade-hero.webp",{"path":6517,"title":6518,"categories":6519,"tags":6520,"heroImage":6524},"\u002Fblog\u002Fsuitecommerce-vs-bigcommerce-netsuite-users","SuiteCommerce vs. BigCommerce for NetSuite Users: Which Platform Wins?",[6345,6455],[6521,6345,6421,6522,6523,6411],"BigCommerce","Platform Comparison","E-commerce Platform","\u002Fimages\u002Fblog\u002Fsuitecommerce-vs-bigcommerce-hero.webp",{"path":6526,"title":6527,"categories":6528,"tags":6529,"heroImage":6533},"\u002Fblog\u002Fsuitescript-performance-optimization-writing-efficient-scripts","SuiteScript Performance Optimization: Writing Efficient Scripts",[6421,6372],[6372,6384,6530,6531,6532,6413],"Governance","Map\u002FReduce","NetSuite Development","\u002Fimages\u002Fblog\u002Fsuitescript-performance-hero.webp",{"path":6535,"title":6536,"categories":6537,"tags":6538,"heroImage":6542},"\u002Fblog\u002Ftroubleshooting-suitecommerce-15-common-errors-how-to-fix","Troubleshooting SuiteCommerce: 15 Common Errors and How to Fix Them",[6345,6344],[6345,6539,6540,6541,6344],"Troubleshooting","Errors","Debugging","\u002Fimages\u002Fblog\u002Ftroubleshooting-errors-hero.webp",{"path":6544,"title":6545,"categories":6546,"tags":6547,"heroImage":6550},"\u002Fblog\u002Ftrue-cost-suitecommerce-maintenance-annual-budget-guide","The True Cost of SuiteCommerce Maintenance: Annual Budget Planning Guide",[6345,6378],[6345,6508,6454,6548,6549],"TCO","E-commerce Operations","\u002Fimages\u002Fblog\u002Fsuitecommerce-maintenance-cost-hero.webp",{"path":6552,"title":6553,"categories":6554,"tags":6555,"heroImage":6557},"\u002Fblog\u002Fwhy-suitecommerce-site-slow-how-to-fix","Why Your SuiteCommerce Site is Slow (And How to Fix It)",[6378,6345],[6378,6345,6556,6539],"Speed Optimization","\u002Fimages\u002Fblog\u002Fslow-site-fix-hero.webp",1773773966051]