{"id":104,"date":"2026-04-03T06:52:03","date_gmt":"2026-04-03T06:52:03","guid":{"rendered":"https:\/\/aroka.webdev.is\/?page_id=104"},"modified":"2026-05-07T07:22:56","modified_gmt":"2026-05-07T07:22:56","slug":"products","status":"publish","type":"page","link":"https:\/\/aroka.webdev.is\/?page_id=104","title":{"rendered":"Products"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"104\" class=\"elementor elementor-104\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e3656f e-con-full e-flex e-con e-parent\" data-id=\"7e3656f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f09bf22 elementor-widget elementor-widget-html\" data-id=\"f09bf22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     AROKA LUXURY CATALOG \u2014 WordPress Custom HTML Block\r\n     Paste the entire contents of this file into a WordPress\r\n     \"Custom HTML\" block. No plugins or theme edits needed.\r\n     All CSS, HTML, and JS are fully self-contained and scoped\r\n     to .aroka-wp-catalog to prevent theme conflicts.\r\n============================================================ -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@200;300;400&display=swap');\r\n\r\n\/* ---- RESET (scoped) ---- *\/\r\n.aroka-wp-catalog *,\r\n.aroka-wp-catalog *::before,\r\n.aroka-wp-catalog *::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n\/* ---- TOKENS ---- *\/\r\n.aroka-wp-catalog {\r\n  --bg:          #F5F2ED;\r\n  --bg-card:     #FAF8F5;\r\n  --bg-dark:     #1A1714;\r\n  --ink:         #1A1714;\r\n  --ink-muted:   #6B6259;\r\n  --ink-light:   #A89E94;\r\n  --accent:      #8B6F4E;\r\n  --accent-soft: #D4C4B4;\r\n  --border:      #E0D8CF;\r\n  --white:       #FFFFFF;\r\n  --serif: 'Cormorant Garamond', Georgia, serif;\r\n  --sans:  'Jost', 'Helvetica Neue', sans-serif;\r\n  --transition: 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  --radius: 2px;\r\n  --shadow: 0 4px 28px rgba(26,23,20,0.07);\r\n  --shadow-hover: 0 12px 48px rgba(26,23,20,0.12);\r\n\r\n  background-color: var(--bg);\r\n  color: var(--ink);\r\n  font-family: var(--sans);\r\n  font-weight: 300;\r\n  font-size: 14px;\r\n  line-height: 1.6;\r\n  letter-spacing: 0.02em;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.aroka-wp-catalog h1,\r\n.aroka-wp-catalog h2,\r\n.aroka-wp-catalog h3,\r\n.aroka-wp-catalog h4,\r\n.aroka-wp-catalog h5 {\r\n  font-family: var(--serif);\r\n  font-weight: 400;\r\n  line-height: 1.15;\r\n  letter-spacing: 0.01em;\r\n}\r\n\r\n.aroka-wp-catalog button {\r\n  cursor: pointer;\r\n  border: none;\r\n  background: none;\r\n  font-family: var(--sans);\r\n}\r\n\r\n.aroka-wp-catalog img {\r\n  display: block;\r\n  max-width: 100%;\r\n}\r\n\r\n\/* ---- HERO ---- *\/\r\n.aroka-wp-catalog .aroka-hero {\r\n  padding: 72px 48px 60px;\r\n  border-bottom: 1px solid var(--border);\r\n  display: flex;\r\n  align-items: flex-end;\r\n  justify-content: space-between;\r\n  gap: 40px;\r\n}\r\n\r\n.aroka-wp-catalog .aroka-hero-left { flex: 1; }\r\n\r\n.aroka-wp-catalog .aroka-hero-eyebrow {\r\n  font-size: 10px;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: var(--accent);\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.aroka-wp-catalog .aroka-hero-title {\r\n  font-size: clamp(44px, 6vw, 80px);\r\n  font-weight: 300;\r\n  font-style: italic;\r\n  color: var(--ink);\r\n  line-height: 1.05;\r\n  margin-bottom: 28px;\r\n}\r\n\r\n.aroka-wp-catalog .aroka-hero-desc {\r\n  font-size: 13px;\r\n  color: var(--ink-muted);\r\n  max-width: 420px;\r\n  line-height: 1.8;\r\n  letter-spacing: 0.05em;\r\n}\r\n\r\n.aroka-wp-catalog .aroka-hero-right { text-align: right; }\r\n\r\n.aroka-wp-catalog .aroka-hero-stat {\r\n  font-family: var(--serif);\r\n  font-size: 48px;\r\n  font-weight: 300;\r\n  color: var(--ink);\r\n  line-height: 1;\r\n}\r\n\r\n.aroka-wp-catalog .aroka-hero-stat-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--ink-light);\r\n  margin-top: 6px;\r\n}\r\n\r\n\/* ---- FILTER BAR ---- *\/\r\n.aroka-wp-catalog .aroka-filter-bar {\r\n  padding: 36px 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0;\r\n  border-bottom: 1px solid var(--border);\r\n  overflow-x: auto;\r\n  -webkit-overflow-scrolling: touch;\r\n}\r\n\r\n.aroka-wp-catalog .aroka-filter-bar::-webkit-scrollbar { display: none; }\r\n\r\n.aroka-wp-catalog .filter-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: var(--ink-light);\r\n  padding-right: 28px;\r\n  margin-right: 28px;\r\n  border-right: 1px solid var(--border);\r\n  white-space: nowrap;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.aroka-wp-catalog .filter-tabs {\r\n  display: flex;\r\n  gap: 4px;\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n.aroka-wp-catalog .filter-tab {\r\n  font-family: var(--sans);\r\n  font-size: 11px;\r\n  font-weight: 300;\r\n  letter-spacing: 0.15em;\r\n  text-transform: uppercase;\r\n  color: var(--ink-muted);\r\n  padding: 8px 18px;\r\n  border: 1px solid transparent;\r\n  background: none;\r\n  transition: all var(--transition);\r\n  white-space: nowrap;\r\n}\r\n\r\n.aroka-wp-catalog .filter-tab:hover {\r\n  color: var(--ink);\r\n  border-color: var(--border);\r\n}\r\n\r\n.aroka-wp-catalog .filter-tab.active {\r\n  color: var(--white);\r\n  background: var(--ink);\r\n  border-color: var(--ink);\r\n}\r\n\r\n\/* ---- PRODUCT GRID ---- *\/\r\n.aroka-wp-catalog .aroka-catalog-section {\r\n  padding: 60px 48px 100px;\r\n}\r\n\r\n.aroka-wp-catalog .aroka-results-bar {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  margin-bottom: 48px;\r\n}\r\n\r\n.aroka-wp-catalog .aroka-results-count {\r\n  font-size: 11px;\r\n  letter-spacing: 0.15em;\r\n  text-transform: uppercase;\r\n  color: var(--ink-light);\r\n}\r\n\r\n.aroka-wp-catalog .aroka-divider-line {\r\n  flex: 1;\r\n  height: 1px;\r\n  background: var(--border);\r\n  margin: 0 24px;\r\n}\r\n\r\n.aroka-wp-catalog .aroka-product-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n  gap: 2px;\r\n}\r\n\r\n.aroka-wp-catalog .product-card {\r\n  background: var(--bg-card);\r\n  cursor: pointer;\r\n  transition: box-shadow var(--transition);\r\n  display: flex;\r\n  flex-direction: column;\r\n  border: 1px solid var(--border);\r\n  animation: arokaFadeInCard 0.4s ease both;\r\n}\r\n\r\n.aroka-wp-catalog .product-card:hover {\r\n  box-shadow: var(--shadow-hover);\r\n  z-index: 1;\r\n  position: relative;\r\n}\r\n\r\n.aroka-wp-catalog .product-card-image-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  padding-top: 100%;\r\n  overflow: hidden;\r\n  background: var(--white);\r\n}\r\n\r\n.aroka-wp-catalog .product-card-image-wrap img {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: contain;\r\n  padding: 20px;\r\n  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n}\r\n\r\n.aroka-wp-catalog .product-card:hover .product-card-image-wrap img { transform: scale(1.06); }\r\n\r\n.aroka-wp-catalog .product-card-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: rgba(26,23,20,0.0);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  opacity: 0;\r\n  transition: opacity var(--transition), background var(--transition);\r\n}\r\n\r\n.aroka-wp-catalog .product-card:hover .product-card-overlay {\r\n  background: rgba(26,23,20,0.04);\r\n  opacity: 1;\r\n}\r\n\r\n.aroka-wp-catalog .product-card-quick-view {\r\n  font-family: var(--sans);\r\n  font-size: 10px;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: var(--ink);\r\n  background: rgba(245,242,237,0.95);\r\n  border: 1px solid var(--border);\r\n  padding: 10px 22px;\r\n  transform: translateY(8px);\r\n  transition: transform var(--transition);\r\n}\r\n\r\n.aroka-wp-catalog .product-card:hover .product-card-quick-view { transform: translateY(0); }\r\n\r\n.aroka-wp-catalog .product-card-body {\r\n  padding: 24px 24px 20px;\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.aroka-wp-catalog .product-card-material {\r\n  font-size: 10px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--accent);\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.aroka-wp-catalog .product-card-name {\r\n  font-family: var(--serif);\r\n  font-size: 20px;\r\n  font-weight: 400;\r\n  color: var(--ink);\r\n  margin-bottom: 6px;\r\n  line-height: 1.2;\r\n}\r\n\r\n.aroka-wp-catalog .product-card-id {\r\n  font-size: 10px;\r\n  letter-spacing: 0.15em;\r\n  color: var(--ink-light);\r\n  margin-bottom: 14px;\r\n}\r\n\r\n.aroka-wp-catalog .product-card-desc {\r\n  font-size: 12.5px;\r\n  color: var(--ink-muted);\r\n  line-height: 1.7;\r\n  flex: 1;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.aroka-wp-catalog .product-card-actions {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n\r\n.aroka-wp-catalog .btn-view-details {\r\n  font-family: var(--sans);\r\n  font-size: 10.5px;\r\n  font-weight: 300;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--ink);\r\n  border: 1px solid var(--ink);\r\n  padding: 11px 20px;\r\n  background: none;\r\n  transition: all var(--transition);\r\n  text-align: center;\r\n}\r\n\r\n.aroka-wp-catalog .btn-view-details:hover {\r\n  background: var(--ink);\r\n  color: var(--white);\r\n}\r\n\r\n.aroka-wp-catalog .btn-add-project {\r\n  font-family: var(--sans);\r\n  font-size: 10.5px;\r\n  font-weight: 300;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--accent);\r\n  border: 1px solid var(--accent-soft);\r\n  padding: 11px 20px;\r\n  background: none;\r\n  transition: all var(--transition);\r\n  text-align: center;\r\n}\r\n\r\n.aroka-wp-catalog .btn-add-project:hover {\r\n  background: var(--accent);\r\n  color: var(--white);\r\n  border-color: var(--accent);\r\n}\r\n\r\n.aroka-wp-catalog .btn-add-project.added {\r\n  background: var(--accent-soft);\r\n  color: var(--ink-muted);\r\n  border-color: var(--accent-soft);\r\n}\r\n\r\n.aroka-wp-catalog .no-results {\r\n  text-align: center;\r\n  padding: 80px 20px;\r\n  display: none;\r\n}\r\n\r\n.aroka-wp-catalog .no-results.visible { display: block; }\r\n\r\n.aroka-wp-catalog .no-results-title {\r\n  font-family: var(--serif);\r\n  font-size: 28px;\r\n  font-style: italic;\r\n  color: var(--ink-muted);\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.aroka-wp-catalog .no-results-sub {\r\n  font-size: 12px;\r\n  letter-spacing: 0.1em;\r\n  color: var(--ink-light);\r\n}\r\n\r\n\/* ---- PRODUCT MODAL ---- *\/\r\n.aro-modal-backdrop {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 500;\r\n  background: rgba(26,23,20,0.55);\r\n  backdrop-filter: blur(4px);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 20px;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.aro-modal-backdrop.open {\r\n  opacity: 1;\r\n  pointer-events: all;\r\n}\r\n\r\n.aro-modal {\r\n  background: #F5F2ED;\r\n  width: 100%;\r\n  max-width: 1060px;\r\n  max-height: 90vh;\r\n  overflow-y: auto;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  transform: translateY(20px);\r\n  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  position: relative;\r\n}\r\n\r\n.aro-modal-backdrop.open .aro-modal { transform: translateY(0); }\r\n\r\n.aro-modal::-webkit-scrollbar { width: 4px; }\r\n.aro-modal::-webkit-scrollbar-track { background: #F5F2ED; }\r\n.aro-modal::-webkit-scrollbar-thumb { background: #E0D8CF; }\r\n\r\n.aro-modal-gallery {\r\n  background: #FFFFFF;\r\n  padding: 32px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 16px;\r\n  position: sticky;\r\n  top: 0;\r\n  max-height: 90vh;\r\n}\r\n\r\n.aro-modal-main-image-wrap {\r\n  flex: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 320px;\r\n  overflow: hidden;\r\n  background: #FFFFFF;\r\n}\r\n\r\n.aro-modal-main-image-wrap img {\r\n  max-width: 100%;\r\n  max-height: 420px;\r\n  width: 100%;\r\n  object-fit: contain;\r\n  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n}\r\n\r\n.aro-modal-main-image-wrap img:hover { transform: scale(1.04); }\r\n\r\n.aro-modal-thumbnails {\r\n  display: flex;\r\n  gap: 10px;\r\n  justify-content: center;\r\n}\r\n\r\n.aro-modal-thumb {\r\n  width: 64px;\r\n  height: 64px;\r\n  border: 1px solid #E0D8CF;\r\n  cursor: pointer;\r\n  overflow: hidden;\r\n  transition: border-color 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  background: #FFFFFF;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.aro-modal-thumb img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: contain;\r\n  padding: 4px;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.aro-modal-thumb:hover img { transform: scale(1.08); }\r\n.aro-modal-thumb.active { border-color: #1A1714; }\r\n\r\n.aro-modal-info {\r\n  padding: 40px 44px;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.aro-modal-close-btn {\r\n  position: absolute;\r\n  top: 20px;\r\n  right: 20px;\r\n  width: 36px;\r\n  height: 36px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #F5F2ED;\r\n  border: 1px solid #E0D8CF;\r\n  color: #1A1714;\r\n  font-size: 18px;\r\n  font-weight: 300;\r\n  transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  z-index: 10;\r\n  cursor: pointer;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-modal-close-btn:hover {\r\n  background: #1A1714;\r\n  color: #FFFFFF;\r\n  border-color: #1A1714;\r\n}\r\n\r\n.aro-modal-eyebrow {\r\n  font-size: 10px;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: #8B6F4E;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.aro-modal-product-name {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: clamp(28px, 3vw, 38px);\r\n  font-weight: 400;\r\n  color: #1A1714;\r\n  margin-bottom: 8px;\r\n  line-height: 1.1;\r\n}\r\n\r\n.aro-modal-product-id {\r\n  font-size: 11px;\r\n  letter-spacing: 0.18em;\r\n  color: #A89E94;\r\n  margin-bottom: 32px;\r\n}\r\n\r\n.aro-modal-meta-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 20px;\r\n  margin-bottom: 32px;\r\n  padding: 24px 0;\r\n  border-top: 1px solid #E0D8CF;\r\n  border-bottom: 1px solid #E0D8CF;\r\n}\r\n\r\n.aro-modal-meta-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: #A89E94;\r\n  margin-bottom: 6px;\r\n}\r\n\r\n.aro-modal-meta-value {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: 16px;\r\n  color: #1A1714;\r\n}\r\n\r\n.aro-modal-short-desc {\r\n  font-size: 14px;\r\n  color: #6B6259;\r\n  line-height: 1.75;\r\n  margin-bottom: 20px;\r\n  font-style: italic;\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n}\r\n\r\n.aro-modal-full-desc {\r\n  font-size: 13px;\r\n  color: #6B6259;\r\n  line-height: 1.85;\r\n  margin-bottom: 36px;\r\n}\r\n\r\n.aro-modal-add-project-btn {\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n  font-size: 11px;\r\n  font-weight: 300;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  padding: 16px 32px;\r\n  border: 1px solid #1A1714;\r\n  background: #1A1714;\r\n  color: #FFFFFF;\r\n  transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  margin-top: auto;\r\n  cursor: pointer;\r\n}\r\n\r\n.aro-modal-add-project-btn:hover {\r\n  background: none;\r\n  color: #1A1714;\r\n}\r\n\r\n.aro-modal-add-project-btn.added {\r\n  background: #D4C4B4;\r\n  border-color: #D4C4B4;\r\n  color: #6B6259;\r\n}\r\n\r\n\/* ---- COLOR SELECTOR (modal) ---- *\/\r\n.aro-modal-color-selector {\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.aro-modal-color-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: #A89E94;\r\n  margin-bottom: 10px;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-modal-color-options {\r\n  display: flex;\r\n  gap: 8px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.aro-modal-color-btn {\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n  font-size: 10.5px;\r\n  font-weight: 300;\r\n  letter-spacing: 0.14em;\r\n  text-transform: uppercase;\r\n  color: #6B6259;\r\n  border: 1px solid #E0D8CF;\r\n  padding: 7px 18px;\r\n  background: none;\r\n  transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  cursor: pointer;\r\n}\r\n\r\n.aro-modal-color-btn:hover {\r\n  border-color: #1A1714;\r\n  color: #1A1714;\r\n}\r\n\r\n.aro-modal-color-btn.active {\r\n  border-color: #1A1714;\r\n  background: #1A1714;\r\n  color: #FFFFFF;\r\n}\r\n\r\n\/* ---- CART DRAWER ---- *\/\r\n.aro-cart-backdrop {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 400;\r\n  background: rgba(26,23,20,0.35);\r\n  backdrop-filter: blur(2px);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.aro-cart-backdrop.open {\r\n  opacity: 1;\r\n  pointer-events: all;\r\n}\r\n\r\n.aro-cart-drawer {\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  width: 420px;\r\n  max-width: 100vw;\r\n  height: 100vh;\r\n  background: #F5F2ED;\r\n  z-index: 450;\r\n  display: flex;\r\n  flex-direction: column;\r\n  transform: translateX(100%);\r\n  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  border-left: 1px solid #E0D8CF;\r\n}\r\n\r\n.aro-cart-backdrop.open .aro-cart-drawer { transform: translateX(0); }\r\n\r\n.aro-cart-header {\r\n  padding: 28px 28px 20px;\r\n  border-bottom: 1px solid #E0D8CF;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.aro-cart-title {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: 24px;\r\n  font-weight: 400;\r\n  color: #1A1714;\r\n}\r\n\r\n.aro-cart-subtitle {\r\n  font-size: 11px;\r\n  letter-spacing: 0.15em;\r\n  color: #A89E94;\r\n  margin-top: 4px;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-cart-close {\r\n  width: 32px;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid #E0D8CF;\r\n  color: #1A1714;\r\n  font-size: 16px;\r\n  transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  cursor: pointer;\r\n  background: none;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-cart-close:hover {\r\n  background: #1A1714;\r\n  color: #FFFFFF;\r\n  border-color: #1A1714;\r\n}\r\n\r\n.aro-cart-items-list {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  padding: 12px 0;\r\n}\r\n\r\n.aro-cart-items-list::-webkit-scrollbar { width: 3px; }\r\n.aro-cart-items-list::-webkit-scrollbar-thumb { background: #E0D8CF; }\r\n\r\n.aro-cart-item {\r\n  display: flex;\r\n  gap: 16px;\r\n  padding: 18px 28px;\r\n  border-bottom: 1px solid #E0D8CF;\r\n  align-items: flex-start;\r\n}\r\n\r\n.aro-cart-item-image {\r\n  width: 72px;\r\n  height: 72px;\r\n  object-fit: contain;\r\n  background: #FFFFFF;\r\n  border: 1px solid #E0D8CF;\r\n  flex-shrink: 0;\r\n  padding: 4px;\r\n}\r\n\r\n.aro-cart-item-info { flex: 1; }\r\n\r\n.aro-cart-item-name {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: 16px;\r\n  color: #1A1714;\r\n  margin-bottom: 3px;\r\n}\r\n\r\n.aro-cart-item-id {\r\n  font-size: 10px;\r\n  letter-spacing: 0.15em;\r\n  color: #A89E94;\r\n  margin-bottom: 12px;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-cart-qty-control {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0;\r\n  border: 1px solid #E0D8CF;\r\n  width: fit-content;\r\n}\r\n\r\n.aro-cart-qty-btn {\r\n  width: 28px;\r\n  height: 28px;\r\n  font-size: 16px;\r\n  font-weight: 300;\r\n  color: #1A1714;\r\n  background: none;\r\n  border: none;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: background 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  cursor: pointer;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-cart-qty-btn:hover { background: #E0D8CF; }\r\n\r\n.aro-cart-qty-display {\r\n  width: 32px;\r\n  text-align: center;\r\n  font-size: 12px;\r\n  color: #1A1714;\r\n  border-left: 1px solid #E0D8CF;\r\n  border-right: 1px solid #E0D8CF;\r\n  height: 28px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-cart-item-remove {\r\n  font-size: 10px;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n  color: #A89E94;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: color 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  margin-top: 4px;\r\n  padding: 0;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-cart-item-remove:hover { color: #1A1714; }\r\n\r\n.aro-cart-empty-state {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100%;\r\n  padding: 40px;\r\n  text-align: center;\r\n}\r\n\r\n.aro-cart-empty-icon {\r\n  width: 48px;\r\n  height: 48px;\r\n  margin-bottom: 20px;\r\n  opacity: 0.3;\r\n}\r\n\r\n.aro-cart-empty-title {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: 22px;\r\n  font-style: italic;\r\n  color: #6B6259;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.aro-cart-empty-sub {\r\n  font-size: 12px;\r\n  color: #A89E94;\r\n  letter-spacing: 0.05em;\r\n  line-height: 1.7;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-cart-footer {\r\n  padding: 20px 28px 28px;\r\n  border-top: 1px solid #E0D8CF;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.aro-cart-total-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.aro-cart-total-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: #A89E94;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-cart-total-count {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: 20px;\r\n  color: #1A1714;\r\n}\r\n\r\n.aro-btn-request-quote {\r\n  width: 100%;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n  font-size: 11px;\r\n  font-weight: 300;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  padding: 16px;\r\n  background: #1A1714;\r\n  color: #FFFFFF;\r\n  border: 1px solid #1A1714;\r\n  transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  cursor: pointer;\r\n}\r\n\r\n.aro-btn-request-quote:hover {\r\n  background: none;\r\n  color: #1A1714;\r\n}\r\n\r\n.aro-btn-request-quote:disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n}\r\n\r\n\/* ---- QUOTE MODAL ---- *\/\r\n.aro-quote-backdrop {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 600;\r\n  background: rgba(26,23,20,0.65);\r\n  backdrop-filter: blur(6px);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 20px;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.aro-quote-backdrop.open {\r\n  opacity: 1;\r\n  pointer-events: all;\r\n}\r\n\r\n.aro-quote-modal {\r\n  background: #F5F2ED;\r\n  width: 100%;\r\n  max-width: 680px;\r\n  max-height: 90vh;\r\n  overflow-y: auto;\r\n  transform: translateY(24px);\r\n  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n}\r\n\r\n.aro-quote-backdrop.open .aro-quote-modal { transform: translateY(0); }\r\n\r\n.aro-quote-modal::-webkit-scrollbar { width: 3px; }\r\n.aro-quote-modal::-webkit-scrollbar-thumb { background: #E0D8CF; }\r\n\r\n.aro-quote-modal-header {\r\n  padding: 40px 44px 28px;\r\n  border-bottom: 1px solid #E0D8CF;\r\n  position: relative;\r\n}\r\n\r\n.aro-quote-modal-eyebrow {\r\n  font-size: 10px;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: #8B6F4E;\r\n  margin-bottom: 12px;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-quote-modal-title {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: 34px;\r\n  font-weight: 400;\r\n  font-style: italic;\r\n  color: #1A1714;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.aro-quote-modal-subtitle {\r\n  font-size: 12.5px;\r\n  color: #6B6259;\r\n  line-height: 1.7;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-quote-modal-close {\r\n  position: absolute;\r\n  top: 24px;\r\n  right: 24px;\r\n  width: 32px;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid #E0D8CF;\r\n  color: #1A1714;\r\n  font-size: 16px;\r\n  transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  cursor: pointer;\r\n  background: none;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-quote-modal-close:hover {\r\n  background: #1A1714;\r\n  color: #FFFFFF;\r\n  border-color: #1A1714;\r\n}\r\n\r\n.aro-quote-form { padding: 32px 44px; }\r\n\r\n.aro-quote-form-section-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: #A89E94;\r\n  margin-bottom: 20px;\r\n  padding-bottom: 12px;\r\n  border-bottom: 1px solid #E0D8CF;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-form-row {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 16px;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.aro-form-row.full { grid-template-columns: 1fr; }\r\n\r\n.aro-form-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n}\r\n\r\n.aro-form-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.15em;\r\n  text-transform: uppercase;\r\n  color: #6B6259;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-form-label span.aro-req { color: #8B6F4E; }\r\n\r\n.aro-form-input,\r\n.aro-form-textarea {\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n  font-size: 13px;\r\n  font-weight: 300;\r\n  color: #1A1714;\r\n  background: #FFFFFF;\r\n  border: 1px solid #E0D8CF;\r\n  padding: 12px 14px;\r\n  outline: none;\r\n  transition: border-color 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  width: 100%;\r\n}\r\n\r\n.aro-form-input::placeholder,\r\n.aro-form-textarea::placeholder { color: #A89E94; }\r\n\r\n.aro-form-input:focus,\r\n.aro-form-textarea:focus { border-color: #1A1714; }\r\n\r\n.aro-form-textarea {\r\n  min-height: 100px;\r\n  resize: vertical;\r\n}\r\n\r\n.aro-quote-products-summary {\r\n  background: #FFFFFF;\r\n  border: 1px solid #E0D8CF;\r\n  padding: 20px;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.aro-quote-products-summary-title {\r\n  font-size: 10px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: #A89E94;\r\n  margin-bottom: 14px;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-quote-product-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 10px 0;\r\n  border-bottom: 1px solid #E0D8CF;\r\n}\r\n\r\n.aro-quote-product-row:last-child {\r\n  border-bottom: none;\r\n  padding-bottom: 0;\r\n}\r\n\r\n.aro-quote-product-img {\r\n  width: 44px;\r\n  height: 44px;\r\n  object-fit: contain;\r\n  border: 1px solid #E0D8CF;\r\n  padding: 3px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.aro-quote-product-text { flex: 1; }\r\n\r\n.aro-quote-product-name {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: 15px;\r\n  color: #1A1714;\r\n}\r\n\r\n.aro-quote-product-id {\r\n  font-size: 10px;\r\n  letter-spacing: 0.12em;\r\n  color: #A89E94;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-quote-product-qty {\r\n  font-size: 12px;\r\n  color: #6B6259;\r\n  white-space: nowrap;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.aro-btn-submit-quote {\r\n  width: 100%;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n  font-size: 11px;\r\n  font-weight: 300;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  padding: 17px;\r\n  background: #1A1714;\r\n  color: #FFFFFF;\r\n  border: 1px solid #1A1714;\r\n  margin-top: 8px;\r\n  transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  cursor: pointer;\r\n}\r\n\r\n.aro-btn-submit-quote:hover {\r\n  background: none;\r\n  color: #1A1714;\r\n}\r\n\r\n\/* ---- FLUENT FORMS OVERRIDES ---- *\/\r\n.aro-quote-form .ff-el-group { margin-bottom: 16px; }\r\n.aro-quote-form .ff-el-input--label label {\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n  font-size: 10px;\r\n  letter-spacing: 0.15em;\r\n  text-transform: uppercase;\r\n  color: #6B6259;\r\n  font-weight: 400;\r\n  margin-bottom: 6px;\r\n}\r\n.aro-quote-form .ff-el-form-control,\r\n.aro-quote-form input[type=\"text\"],\r\n.aro-quote-form input[type=\"email\"],\r\n.aro-quote-form input[type=\"tel\"],\r\n.aro-quote-form textarea {\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif !important;\r\n  font-size: 13px !important;\r\n  font-weight: 300 !important;\r\n  color: #1A1714 !important;\r\n  background: #FFFFFF !important;\r\n  border: 1px solid #E0D8CF !important;\r\n  border-radius: 0 !important;\r\n  padding: 12px 14px !important;\r\n  box-shadow: none !important;\r\n  width: 100% !important;\r\n  transition: border-color 0.38s ease !important;\r\n}\r\n.aro-quote-form .ff-el-form-control:focus,\r\n.aro-quote-form input[type=\"text\"]:focus,\r\n.aro-quote-form input[type=\"email\"]:focus,\r\n.aro-quote-form input[type=\"tel\"]:focus,\r\n.aro-quote-form textarea:focus {\r\n  border-color: #1A1714 !important;\r\n  outline: none !important;\r\n  box-shadow: none !important;\r\n}\r\n.aro-quote-form .ff-el-form-control::placeholder,\r\n.aro-quote-form textarea::placeholder { color: #A89E94 !important; }\r\n.aro-quote-form textarea { min-height: 100px; resize: vertical; }\r\n.aro-quote-form .ff-btn-submit,\r\n.aro-quote-form button[type=\"submit\"] {\r\n  width: 100% !important;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif !important;\r\n  font-size: 11px !important;\r\n  font-weight: 300 !important;\r\n  letter-spacing: 0.22em !important;\r\n  text-transform: uppercase !important;\r\n  padding: 17px !important;\r\n  background: #1A1714 !important;\r\n  color: #FFFFFF !important;\r\n  border: 1px solid #1A1714 !important;\r\n  border-radius: 0 !important;\r\n  margin-top: 8px !important;\r\n  transition: all 0.38s ease !important;\r\n  cursor: pointer !important;\r\n  box-shadow: none !important;\r\n}\r\n.aro-quote-form .ff-btn-submit:hover,\r\n.aro-quote-form button[type=\"submit\"]:hover {\r\n  background: transparent !important;\r\n  color: #1A1714 !important;\r\n}\r\n.aro-quote-form .ff-el-is-error .ff-el-form-control { border-color: #c0392b !important; }\r\n.aro-quote-form .error { color: #c0392b; font-size: 11px; margin-top: 4px; font-family: 'Jost', sans-serif; }\r\n.aro-quote-form .ff-message-success {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: 22px;\r\n  font-style: italic;\r\n  color: #1A1714;\r\n  text-align: center;\r\n  padding: 32px 0;\r\n}\r\n.aro-quote-form .ff-el-form-check-label { font-family: 'Jost', 'Helvetica Neue', sans-serif; font-size: 12px; color: #6B6259; }\r\n\/* Hide the Fluent Forms default container padding\/margin resets *\/\r\n.aro-quote-form .fluentform { margin: 0; padding: 0; }\r\n.aro-quote-form .ff-el-section-break h4 {\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n  font-size: 10px;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: #A89E94;\r\n  font-weight: 400;\r\n  border-bottom: 1px solid #E0D8CF;\r\n  padding-bottom: 12px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.aro-quote-success {\r\n  display: none;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 60px 44px;\r\n  text-align: center;\r\n}\r\n\r\n.aro-quote-success.visible { display: flex; }\r\n\r\n.aro-quote-success-icon {\r\n  width: 56px;\r\n  height: 56px;\r\n  border: 1px solid #D4C4B4;\r\n  border-radius: 50%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-bottom: 28px;\r\n  color: #8B6F4E;\r\n}\r\n\r\n.aro-quote-success-title {\r\n  font-family: 'Cormorant Garamond', Georgia, serif;\r\n  font-size: 28px;\r\n  font-style: italic;\r\n  color: #1A1714;\r\n  margin-bottom: 14px;\r\n  line-height: 1.2;\r\n}\r\n\r\n.aro-quote-success-sub {\r\n  font-size: 13px;\r\n  color: #6B6259;\r\n  line-height: 1.75;\r\n  max-width: 360px;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n\/* ---- FLOATING CART ---- *\/\r\n.aro-floating-cart {\r\n  display: flex;\r\n  position: fixed;\r\n  top: 24px;\r\n  right: 24px;\r\n  z-index: 200;\r\n  background: #FAF8F5;\r\n  color: #1A1714;\r\n  padding: 12px 20px;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n  font-size: 10px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  align-items: center;\r\n  gap: 10px;\r\n  box-shadow: 0 4px 24px rgba(26,23,20,0.10);\r\n  border: 1px solid #E0D8CF;\r\n  transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  cursor: pointer;\r\n}\r\n\r\n.aro-floating-cart:hover {\r\n  background: #1A1714;\r\n  color: #FFFFFF;\r\n  border-color: #1A1714;\r\n}\r\n\r\n.aro-floating-cart:hover .aro-float-svg line,\r\n.aro-floating-cart:hover .aro-float-svg path,\r\n.aro-floating-cart:hover .aro-float-svg circle {\r\n  stroke: #FFFFFF;\r\n}\r\n\r\n.aro-floating-cart-badge {\r\n  background: #8B6F4E;\r\n  color: #FFFFFF;\r\n  border-radius: 50%;\r\n  width: 18px;\r\n  height: 18px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 10px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n\/* ---- TOAST ---- *\/\r\n.aro-toast {\r\n  position: fixed;\r\n  bottom: 32px;\r\n  left: 50%;\r\n  transform: translateX(-50%) translateY(20px);\r\n  background: #1A1714;\r\n  color: #FFFFFF;\r\n  font-family: 'Jost', 'Helvetica Neue', sans-serif;\r\n  font-size: 11px;\r\n  letter-spacing: 0.1em;\r\n  padding: 12px 28px;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease, transform 0.3s ease;\r\n  white-space: nowrap;\r\n  z-index: 900;\r\n}\r\n\r\n.aro-toast.show {\r\n  opacity: 1;\r\n  transform: translateX(-50%) translateY(0);\r\n}\r\n\r\n\/* ---- RESPONSIVE ---- *\/\r\n@media (max-width: 900px) {\r\n  .aroka-wp-catalog .aroka-hero {\r\n    padding: 48px 24px 40px;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n  }\r\n  .aroka-wp-catalog .aroka-hero-right { text-align: left; }\r\n  .aroka-wp-catalog .aroka-filter-bar { padding: 24px; }\r\n  .aroka-wp-catalog .aroka-catalog-section { padding: 40px 24px 80px; }\r\n  .aroka-wp-catalog .aroka-product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }\r\n  .aro-modal {\r\n    grid-template-columns: 1fr;\r\n    max-width: 520px;\r\n  }\r\n  .aro-modal-gallery {\r\n    position: static;\r\n    max-height: none;\r\n  }\r\n  .aro-floating-cart {\r\n    top: auto;\r\n    bottom: 90px;\r\n    right: 16px;\r\n  }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .aroka-wp-catalog .aroka-product-grid { grid-template-columns: 1fr; }\r\n  .aro-form-row { grid-template-columns: 1fr; }\r\n  .aro-quote-modal-header,\r\n  .aro-quote-form { padding-left: 24px; padding-right: 24px; }\r\n  .aro-cart-drawer { width: 100vw; }\r\n  .aro-modal-info { padding: 28px 24px; }\r\n}\r\n\r\n@keyframes arokaFadeInCard {\r\n  from { opacity: 0; transform: translateY(12px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     HTML\r\n============================================================ -->\r\n<div class=\"aroka-wp-catalog\">\r\n\r\n  <!-- HERO -->\r\n  <section class=\"aroka-hero\">\r\n    <div class=\"aroka-hero-left\">\r\n      <div class=\"aroka-hero-eyebrow\">Collection \u2014 2026<\/div>\r\n      <h1 class=\"aroka-hero-title\">The Collection<\/h1>\r\n    <\/div>\r\n    <div class=\"aroka-hero-right\">\r\n      <div class=\"aroka-hero-stat\" id=\"aroHeroCount\">0<\/div>\r\n      <div class=\"aroka-hero-stat-label\">Pieces Available<\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- FILTER BAR -->\r\n  <nav class=\"aroka-filter-bar\" aria-label=\"Category filter\">\r\n    <div class=\"filter-label\">Filter<\/div>\r\n    <div class=\"filter-tabs\" id=\"aroFilterTabs\" role=\"tablist\"><\/div>\r\n  <\/nav>\r\n\r\n  <!-- PRODUCT GRID -->\r\n  <main class=\"aroka-catalog-section\">\r\n    <div class=\"aroka-results-bar\">\r\n      <span class=\"aroka-results-count\" id=\"aroResultsCount\">0 pieces<\/span>\r\n      <div class=\"aroka-divider-line\"><\/div>\r\n      <span class=\"aroka-results-count\">Aroka Studio<\/span>\r\n    <\/div>\r\n    <div class=\"aroka-product-grid\" id=\"aroProductGrid\" role=\"list\"><\/div>\r\n    <div class=\"no-results\" id=\"aroNoResults\">\r\n      <div class=\"no-results-title\">No pieces found<\/div>\r\n      <div class=\"no-results-sub\">Try a different category<\/div>\r\n    <\/div>\r\n  <\/main>\r\n\r\n<\/div><!-- \/.aroka-wp-catalog -->\r\n\r\n<!-- PRODUCT MODAL (outside container so it can cover full viewport) -->\r\n<div class=\"aro-modal-backdrop\" id=\"aroProductModal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Product details\">\r\n  <div class=\"aro-modal\" id=\"aroModalInner\">\r\n    <button class=\"aro-modal-close-btn\" id=\"aroModalCloseBtn\" aria-label=\"Close\">&times;<\/button>\r\n    <div class=\"aro-modal-gallery\" id=\"aroModalGallery\">\r\n      <div class=\"aro-modal-main-image-wrap\">\r\n        <img decoding=\"async\" id=\"aroModalMainImage\" src=\"\" alt=\"Product image\" \/>\r\n      <\/div>\r\n      <div class=\"aro-modal-thumbnails\" id=\"aroModalThumbnails\"><\/div>\r\n    <\/div>\r\n    <div class=\"aro-modal-info\">\r\n      <div class=\"aro-modal-eyebrow\" id=\"aroModalEyebrow\">\u2014<\/div>\r\n      <h2 class=\"aro-modal-product-name\" id=\"aroModalProductName\"><\/h2>\r\n      <div class=\"aro-modal-product-id\" id=\"aroModalProductId\"><\/div>\r\n      <div class=\"aro-modal-meta-grid\">\r\n        <div>\r\n          <div class=\"aro-modal-meta-label\">Category<\/div>\r\n          <div class=\"aro-modal-meta-value\" id=\"aroModalCategory\"><\/div>\r\n        <\/div>\r\n        <div>\r\n          <div class=\"aro-modal-meta-label\">Material<\/div>\r\n          <div class=\"aro-modal-meta-value\" id=\"aroModalMaterial\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <p class=\"aro-modal-short-desc\" id=\"aroModalShortDesc\"><\/p>\r\n      <p class=\"aro-modal-full-desc\" id=\"aroModalFullDesc\"><\/p>\r\n      <div class=\"aro-modal-color-selector\" id=\"aroModalColorSelector\" style=\"display:none;\">\r\n        <div class=\"aro-modal-color-label\">Color<\/div>\r\n        <div class=\"aro-modal-color-options\" id=\"aroModalColorOptions\"><\/div>\r\n      <\/div>\r\n      <button class=\"aro-modal-add-project-btn\" id=\"aroModalAddBtn\">Add to Project<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- CART DRAWER -->\r\n<div class=\"aro-cart-backdrop\" id=\"aroCartDrawer\">\r\n  <div class=\"aro-cart-drawer\">\r\n    <div class=\"aro-cart-header\">\r\n      <div>\r\n        <div class=\"aro-cart-title\">Project List<\/div>\r\n        <div class=\"aro-cart-subtitle\">Selected pieces for your project<\/div>\r\n      <\/div>\r\n      <button class=\"aro-cart-close\" id=\"aroCartCloseBtn\" aria-label=\"Close cart\">&times;<\/button>\r\n    <\/div>\r\n    <div class=\"aro-cart-items-list\" id=\"aroCartItemsList\"><\/div>\r\n    <div class=\"aro-cart-footer\">\r\n      <div class=\"aro-cart-total-row\">\r\n        <span class=\"aro-cart-total-label\">Total Items<\/span>\r\n        <span class=\"aro-cart-total-count\" id=\"aroCartTotalCount\">0<\/span>\r\n      <\/div>\r\n      <button class=\"aro-btn-request-quote\" id=\"aroRequestQuoteBtn\" disabled>Request a Quote<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- QUOTE MODAL -->\r\n<div class=\"aro-quote-backdrop\" id=\"aroQuoteModal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Request a quote\">\r\n  <div class=\"aro-quote-modal\">\r\n    <div class=\"aro-quote-modal-header\" id=\"aroQuoteFormHeader\">\r\n      <div class=\"aro-quote-modal-eyebrow\">Project Inquiry<\/div>\r\n      <h2 class=\"aro-quote-modal-title\">Request a Quote<\/h2>\r\n      <p class=\"aro-quote-modal-subtitle\">Share your project details and we will be in touch with a tailored proposal within 48 hours.<\/p>\r\n      <button class=\"aro-quote-modal-close\" id=\"aroCloseQuoteBtn\" aria-label=\"Close\">&times;<\/button>\r\n    <\/div>\r\n    <div id=\"aroQuoteFormBody\">\r\n      <div class=\"aro-quote-form\" id=\"aroQuoteForm\">\r\n        <div class=\"aro-quote-form-section-label\">Selected Pieces<\/div>\r\n        <div class=\"aro-quote-products-summary\" id=\"aroQuoteProductsSummary\"><\/div>\r\n        <div class=\"aro-quote-form-section-label\" style=\"margin-top:28px;\">Your Information<\/div>\r\n        <!-- Hidden products field populated by JS before form renders -->\r\n        <input type=\"hidden\" name=\"products\" id=\"aroFluentProductsField\" value=\"\" \/>\r\n        <!-- Fluent Forms shortcode rendered by WordPress -->\r\n        <div class='fluentform ff-default fluentform_wrapper_3 ffs_default_wrap'><form data-form_id=\"3\" id=\"fluentform_3\" class=\"frm-fluent-form fluent_form_3 ff-el-form-top ff_form_instance_3_1 ff-form-loading ffs_default\" data-form_instance=\"ff_form_instance_3_1\" method=\"POST\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">Blank Form (#3)<\/legend><input type='hidden' name='__fluent_form_embded_post_id' value='104' \/><input type=\"hidden\" id=\"_fluentform_3_fluentformnonce\" name=\"_fluentform_3_fluentformnonce\" value=\"fe173318e2\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F104\" \/><div data-type=\"name-element\" data-name=\"names\" class=\" ff-field_container ff-name-field-wrapper\" ><div class='ff-t-container'><div class='ff-t-cell '><div class='ff-el-group ff-el-form-top'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_names_first_name_' id='label_ff_3_names_first_name_' >First Name<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[first_name]\" id=\"ff_3_names_first_name_\" class=\"ff-el-form-control\" placeholder=\"Enter Your First Name\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><div class='ff-t-cell '><div class='ff-el-group ff-el-form-top'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_names_last_name_' id='label_ff_3_names_last_name_' >Last Name<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[last_name]\" id=\"ff_3_names_last_name_\" class=\"ff-el-form-control\" placeholder=\"Enter Your Last Name\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_email' id='label_ff_3_email' aria-label=\"Email\">Email<\/label><\/div><div class='ff-el-input--content'><input type=\"email\" name=\"email\" id=\"ff_3_email\" class=\"ff-el-form-control\" placeholder=\"Email Address\" data-name=\"email\"  aria-invalid=\"false\" aria-required=false><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_input_text' id='label_ff_3_input_text' aria-label=\"Phone \/ WhatsApp\">Phone \/ WhatsApp<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"input_text\" class=\"ff-el-form-control\" data-name=\"input_text\" id=\"ff_3_input_text\"  aria-invalid=\"false\" aria-required=false><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_description' id='label_ff_3_description' aria-label=\"Message\">Message<\/label><\/div><div class='ff-el-input--content'><textarea aria-required=\"false\" aria-labelledby=\"label_ff_3_description\" name=\"description\" id=\"ff_3_description\" class=\"ff-el-form-control\" rows=\"3\" cols=\"2\" data-name=\"description\" ><\/textarea><\/div><\/div><input type=\"hidden\" name=\"products\" data-name=\"products\" ><div class='ff-el-group ff-text-left ff_submit_btn_wrapper'><button type=\"submit\" class=\"ff-btn ff-btn-submit ff-btn-md ff_btn_style\"  aria-label=\"Submit Form\">Submit Form<\/button><\/div><\/fieldset><\/form><div id='fluentform_3_errors' class='ff-errors-in-stack ff_form_instance_3_1 ff-form-loading_errors ff_form_instance_3_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_3_1 = {\"id\":\"3\",\"ajaxUrl\":\"https:\\\/\\\/aroka.webdev.is\\\/wp-admin\\\/admin-ajax.php\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"asteriskPlacement\":\"asterisk-right\",\"helpMessagePlacement\":\"with_label\",\"errorMessagePlacement\":\"inline\",\"cssClassName\":\"\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_3_1\",\"form_id_selector\":\"fluentform_3\",\"rules\":{\"names[first_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"names[middle_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"names[last_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"email\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true},\"email\":{\"value\":true,\"message\":\"This field must contain a valid email\",\"global_message\":\"This field must contain a valid email\",\"global\":true}},\"input_text\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"description\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}}},\"debounce_time\":300};\n                            <\/script>\n            \r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"aro-quote-success\" id=\"aroQuoteSuccess\">\r\n      <div class=\"aro-quote-success-icon\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <polyline points=\"20 6 9 17 4 12\" stroke=\"#8B6F4E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <h3 class=\"aro-quote-success-title\">Thank you. Your project<br>request has been prepared.<\/h3>\r\n      <p class=\"aro-quote-success-sub\">We have opened your email client with a pre-filled message. Please review and send it to complete your inquiry. We look forward to working with you.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- FLOATING CART -->\r\n<button class=\"aro-floating-cart\" id=\"aroOpenCartBtn\" aria-label=\"Open project cart\">\r\n  <svg class=\"aro-float-svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n    <path d=\"M1 1h2l1.6 8h7.8L14 4H4\" stroke=\"#1A1714\" stroke-width=\"0.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n    <circle cx=\"6.5\" cy=\"12.5\" r=\"1\" stroke=\"#1A1714\" stroke-width=\"0.9\"\/>\r\n    <circle cx=\"11.5\" cy=\"12.5\" r=\"1\" stroke=\"#1A1714\" stroke-width=\"0.9\"\/>\r\n  <\/svg>\r\n  Project\r\n  <span class=\"aro-floating-cart-badge\" id=\"aroCartBadge\">0<\/span>\r\n<\/button>\r\n\r\n<!-- TOAST -->\r\n<div class=\"aro-toast\" id=\"aroToast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n\r\n<!-- ============================================================\r\n     JAVASCRIPT\r\n============================================================ -->\r\n<script>\r\n(function() {\r\n\r\n\/* ============================================================\r\n   PRODUCT DATA\r\n============================================================ *\/\r\nvar aroProducts = [\r\n  {\r\n    id: \"ARO-WR-006-BT\",\r\n    name: \"Burned Teak Wine Rack - 6 Bottles\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Wine rack, burned teak for 6 bottles.\",\r\n    description: \"Handcrafted burned teak wine rack designed to hold 6 bottles. A compact sculptural piece for kitchens, dining spaces, and living rooms.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-WR-006-BT-3.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-WR-006-BT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-WR-006-BT.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"LC-001\",\r\n    name: \"Lounge Chair Black Teak\",\r\n    category: [\"Living Room\"],\r\n    material: \"Burned Teak & Genuine Leather\",\r\n    shortDescription: \"Black burned teak lounge chair with genuine leather seat.\",\r\n    description: \"Solid teak lounge chair with a black burned finish, paired with genuine leather for comfort and durability. Clean, sculptural, and designed for refined interiors.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/LC-001.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/LC-001-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"CT-001\",\r\n    name: \"Black Teak Coffee Table\",\r\n    category: [\"Living Room\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Solid burned teak coffee table with smooth curved design.\",\r\n    description: \"Solid teak coffee table with a black burned finish, featuring a smooth, sculpted form and open storage space. Minimal, durable, and designed to elevate modern living spaces.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/CT-001.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/CT-001-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"LC-002\",\r\n    name: \"Teak Lounge Chair with Footrest\",\r\n    category: [\"Living Room\"],\r\n    material: \"Natural Teak & Woven Seat\",\r\n    shortDescription: \"Solid teak lounge chair with woven seat and matching footrest.\",\r\n    description: \"Solid teak lounge chair with a natural finish, featuring a handwoven seat and backrest for breathable comfort. Comes with a matching footrest, combining relaxed seating with a clean, timeless design.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/LC-002.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/LC-002-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"CT-002\",\r\n    name: \"Solid Hardwood Coffee Table\",\r\n    category: [\"Living Room\"],\r\n    material: \"Natural Hardwood\",\r\n    shortDescription: \"Natural solid hardwood coffee table with organic shape.\",\r\n    description: \"Solid hardwood coffee table with a natural light finish, showcasing unique organic shapes and wood grain. A statement piece that brings warmth and character to any living space.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/CT-002.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/CT-002-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/CT-002-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"DC-001\",\r\n    name: \"Blue Hardwood Bowl\",\r\n    category: [\"Living Room\", \"Kitchen\", \"Decoration\"],\r\n    material: \"Hardwood\",\r\n    shortDescription: \"Handcrafted hardwood bowl with textured blue finish.\",\r\n    description: \"Handcrafted hardwood bowl with a rich blue finish and detailed texture. Perfect as a decorative piece or functional serving bowl, adding color and character to any space.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/DC-001.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/DC-001-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"DC-002\",\r\n    name: \"Tall Green Hardwood Vase\",\r\n    category: [\"Living Room\", \"Bedroom\", \"Bathroom\"],\r\n    material: \"Hardwood\",\r\n    shortDescription: \"Handcrafted hardwood vase with textured green finish.\",\r\n    description: \"Handcrafted hardwood vase with a deep green finish and detailed carved texture. Tall and elegant form, perfect as a decorative statement piece for any interior space.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/DC-002.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/DC-002-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ST-001\",\r\n    name: \"Twisted Teak Side Table\",\r\n    category: [\"Living Room\", \"Bedroom\", \"Outdoor\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Sculpted teak side table with twisted design and burned finish.\",\r\n    description: \"Solid teak side table with a unique twisted form and black burned finish. Compact yet bold, perfect as a side table, nightstand, or accent piece in any space.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ST-001-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ST-001.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-BW-001-IW\",\r\n    name: \"Antique Iron Wood Bowl\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Iron Wood\",\r\n    shortDescription: \"Large antique bowl made from iron wood with a strong handcrafted character.\",\r\n    description: \"Large antique iron wood bowl with a natural aged finish. A strong decorative centerpiece for tables, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BW-001-IW.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BW-001-IW-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-BW-002-BT\",\r\n    name: \"Black Teak Wood Bowl\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Black Teak\",\r\n    shortDescription: \"Black wood bowl in solid teak with a clean handcrafted finish.\",\r\n    description: \"Solid teak wood bowl with a black finish and simple handcrafted design. A versatile decorative piece for tables, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BW-002-BT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BW-002-BT-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-CH-001-BT\",\r\n    name: \"Solid Wood Clothing Hanger\",\r\n    category: [\"Living Room\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Solid burned teak clothing hanger with a natural sculptural shape.\",\r\n    description: \"Handcrafted clothing hanger made from solid burned teak wood. A functional and decorative piece for living rooms, bedrooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-CH-001-BT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-CH-001-BT-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-VS-001-GT\",\r\n    name: \"Green Teak Wood Vase\",\r\n    category: [\"Living Room\"],\r\n    material: \"Green Teak\",\r\n    shortDescription: \"Green wooden vase made from solid hardwood with a natural handcrafted finish.\",\r\n    description: \"Handcrafted green wooden vase made from solid teak wood. A decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-VS-001-GT1.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-VS-001-GT-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ST-002\",\r\n    name: \"Teak Accent Table\",\r\n    category: [\"Living Room\", \"Bedroom\", \"Outdoor\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Sculpted burned teak table.\",\r\n    description: \"Solid teak accent table with a smooth design and burned finish. Strong, compact, and versatile, ideal as a side table or decorative statement in any space.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ST-002.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ST-002-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-TB-001-BT\",\r\n    name: \"Black Teak Wood Bowl Table\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Black Teak\",\r\n    shortDescription: \"Black wood bowl table in solid teak with a sculptural handcrafted design.\",\r\n    description: \"Solid teak wood table with a black finish and rounded sculptural legs. A strong decorative piece for living rooms, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-001-BT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-001-BT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-001-BT-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-TB-002-BT\",\r\n    name: \"Black Teak Wood Side Table\",\r\n    category: [\"Living Room\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Solid burned teak side table with a clean round shape.\",\r\n    description: \"Handcrafted teak wood side table with a black burned finish. A simple decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-002-BT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-002-BT-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-LC-002-TL\",\r\n    name: \"Teak Lounge Chair with Leather Seat\",\r\n    category: [\"Living Room\"],\r\n    material: \"Teak & Leather\",\r\n    shortDescription: \"Solid teak lounge chair with genuine leather seat and backrest.\",\r\n    description: \"Handcrafted teak lounge chair with a natural wood frame and genuine leather seat. A warm decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-002-TL.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-002-TL-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-002-TL-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-TB-003-BT\",\r\n    name: \"Black Teak Wood Dining Table\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Black Teak\",\r\n    shortDescription: \"Black solid teak dining table with a round top and sculptural base.\",\r\n    description: \"Handcrafted teak wood table with a black finish and strong round design. A bold decorative piece for dining rooms, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-003-BT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-003-BT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-003-BT-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-LC-003-TC\",\r\n    name: \"Teak Lounge Chair with Cowhide Seat\",\r\n    category: [\"Living Room\"],\r\n    material: \"Teak & Cowhide\",\r\n    shortDescription: \"Solid teak lounge chair with natural cowhide seat and backrest.\",\r\n    description: \"Handcrafted teak lounge chair with a natural wood frame and cowhide seat. A warm decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-003-TC.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-003-TC-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-003-TC-3.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-003-TC-4.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-ST-001-BT\",\r\n    name: \"Burned Teak Block Stool\",\r\n    category: [\"Living Room\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Solid burned teak stool with a bold handcrafted shape.\",\r\n    description: \"Handcrafted stool made from solid burned teak wood. A functional decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-001-BT1.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-001-BT2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-ST-002-BL\",\r\n    name: \"Blue Wooden Stool\",\r\n    category: [\"Living Room\"],\r\n    material: \"Painted Wood\",\r\n    shortDescription: \"Blue wooden stool with a bold handcrafted finish.\",\r\n    description: \"Handcrafted wooden stool with a bright blue finish. A functional decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-002-BL.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-002-BL-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-002-BL-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-ST-003-WD\",\r\n    name: \"White Carved Wooden Stool\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Carved Wood\",\r\n    shortDescription: \"White wooden stool with a carved geometric handcrafted finish.\",\r\n    description: \"Handcrafted wooden stool with a white carved geometric finish. A functional decorative piece for living rooms, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-003-WD.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-003-WD-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-DC-001-ST\",\r\n    name: \"Stone Chess Set\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Stone\",\r\n    shortDescription: \"Handcrafted stone chess set with black and white pieces.\",\r\n    description: \"Handcrafted stone chess set with a natural carved board and matching pieces. A decorative game piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-DC-001-ST.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-DC-001-ST-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-DC-001-ST-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-SF-001-FB\",\r\n    name: \"Beige Modular Sofa\",\r\n    category: [\"Living Room\"],\r\n    material: \"Fabric\",\r\n    shortDescription: \"Large beige modular sofa with soft fabric upholstery and decorative cushions.\",\r\n    description: \"Large modular sofa with soft beige fabric and relaxed seating. A comfortable statement piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-SF-001-FB.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-SF-001-FB-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-SF-001-FB-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-TB-004-BT\",\r\n    name: \"Black Burned Teak Side Table\",\r\n    category: [\"Living Room\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Solid burned teak side table with a bold handcrafted finish.\",\r\n    description: \"Handcrafted side table made from solid burned teak wood. A strong decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-004-BT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-004-BT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-004-BT-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-TB-005-NT\",\r\n    name: \"Natural Teak Wood Round Table\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Natural Teak\",\r\n    shortDescription: \"Solid teak round table with a natural finish and handcrafted base.\",\r\n    description: \"Handcrafted round teak wood table with a natural finish and sculptural base. A warm decorative piece for living rooms, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-005-NT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-005-NT-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-LC-004-TL\",\r\n    name: \"Tan Leather Lounge Chair\",\r\n    category: [\"Living Room\"],\r\n    material: \"Leather\",\r\n    shortDescription: \"Soft tan leather lounge chair with a relaxed handcrafted design.\",\r\n    description: \"Handcrafted lounge chair upholstered in tan leather with a soft relaxed shape. A comfortable statement piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-004-TL.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-004-TL-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-004-TL-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-LC-005-BC\",\r\n    name: \"Black Teak Lounge Chair with Cowhide Seat\",\r\n    category: [\"Living Room\"],\r\n    material: \"Teak & Cowhide\",\r\n    shortDescription: \"Black teak lounge chair with natural cowhide seat and backrest.\",\r\n    description: \"Handcrafted lounge chair with a black teak wood frame and natural cowhide seat. A bold decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-005-BC.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-005-BC-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-005-BC-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-LC-006-TL\",\r\n    name: \"Teak Lounge Chair with Black Leather Seat\",\r\n    category: [\"Living Room\"],\r\n    material: \"Teak & Black Leather\",\r\n    shortDescription: \"Solid teak lounge chair with black leather seat and backrest.\",\r\n    description: \"Handcrafted teak lounge chair with a natural wood frame and black leather seat. A stylish decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-006-TL-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-006-TL-3.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-006-TL.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-WS-001-BN\",\r\n    name: \"Wooden Wall Display Shelf\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Wood\",\r\n    shortDescription: \"Handcrafted wooden wall display shelf in black and natural finish.\",\r\n    description: \"Handcrafted wooden wall display shelf with a clean geometric design. A practical decorative piece for living rooms, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-WS-001-BN-3.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-WS-001-BN-4.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-WS-001-BN.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-WS-001-BN-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-WS-001-BN-5.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-ST-004-BN\",\r\n    name: \"Carved Wooden Stool Set\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Carved Teak\",\r\n    shortDescription: \"Handcrafted carved wooden stools in black and natural teak finish.\",\r\n    description: \"Handcrafted wooden stool set with sculptural carved sides. A functional decorative piece for living rooms, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    variants: [\r\n      {\r\n        name: \"Black\",\r\n        images: [\r\n          \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-004-BN.png\",\r\n          \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-004-BN-3.png\",\r\n          \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-004-BN-4.png\"\r\n        ]\r\n      },\r\n      {\r\n        name: \"Natural\",\r\n        images: [\r\n          \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-004-BN-2.png\",\r\n          \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-004-BN-5.png\"\r\n        ]\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-LG-001-WN\",\r\n    name: \"Woven Pendant Lamp Set\",\r\n    category: [\"Living Room\"],\r\n    material: \"Woven Natural Material\",\r\n    shortDescription: \"Handcrafted woven pendant lamp set with sculptural organic shapes.\",\r\n    description: \"Handcrafted pendant lamp set in woven natural material with soft organic forms. A decorative lighting piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LG-001-WN-1.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-ST-005-BT\",\r\n    name: \"Black Burned Teak Round Stool\",\r\n    category: [\"Living Room\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Solid burned teak round stool with a simple handcrafted finish.\",\r\n    description: \"Handcrafted round stool made from solid burned teak wood. A functional decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-005-BT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-005-BT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-005-BT-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-SF-040-BM\",\r\n    name: \"Blue Modular Sofa\",\r\n    category: [\"Living Room\"],\r\n    material: \"Blue Fabric\",\r\n    shortDescription: \"Large blue modular sofa with soft fabric upholstery and relaxed seating.\",\r\n    description: \"Large modular sofa in soft blue fabric with deep comfortable seating. A bold statement piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-SF-040-BM.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-SF-040-BM-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-SF-040-BM-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-ST-006-BN\",\r\n    name: \"Black and Natural Teak Side Stool\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Black & Natural Teak\",\r\n    shortDescription: \"Handcrafted teak side stool with black exterior and natural wood interior.\",\r\n    description: \"Handcrafted teak stool with a black outer finish and natural wood interior. A functional decorative piece for living rooms, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-006-BN.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-006-BN-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-ST-006-BN-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-MR-001-NT\",\r\n    name: \"Natural Teak Standing Mirror\",\r\n    category: [\"Living Room\", \"Bedroom\"],\r\n    material: \"Natural Teak & Mirror\",\r\n    shortDescription: \"Standing mirror with a natural teak wood frame and simple handcrafted finish.\",\r\n    description: \"Handcrafted standing mirror with a natural teak wood frame. A warm decorative piece for living rooms, bedrooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-MR-001-NT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-MR-001-NT-3.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-MR-001-NT-4.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-DS-001-NT\",\r\n    name: \"Natural Teak Writing Desk\",\r\n    category: [\"Living Room\", \"Bedroom\"],\r\n    material: \"Natural Teak\",\r\n    shortDescription: \"Handcrafted teak writing desk with a natural wood finish and clean design.\",\r\n    description: \"Handcrafted teak writing desk with a natural finish and simple raised back shelf. A practical decorative piece for living rooms, bedrooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-DS-001-NT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-DS-001-NT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-DS-001-NT-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"AROKA-LR-006\",\r\n    name: \"Mixed Metal Hanging Lamps\",\r\n    category: [\"Living Room\"],\r\n    material: \"Mixed Metal\",\r\n    shortDescription: \"Decorative hanging lamps in mixed black, brass, copper, and silver metal finishes.\",\r\n    description: \"A mixed collection of decorative hanging lamps with elegant metal shapes and warm artisan character. Beautiful for living rooms, dining areas, villas, restaurants, or boutique interiors.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-006-1.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-006-1-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"AR-001\",\r\n    name: \"Red Asian Girl Painting\",\r\n    category: [\"Living Room\", \"Bedroom\"],\r\n    material: \"Canvas Artwork\",\r\n    shortDescription: \"Artistic painting of an Asian girl with bold red background.\",\r\n    description: \"Decorative artwork featuring an Asian girl with a striking red backdrop and collage-style details. A bold statement piece that adds color and character to modern interiors.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AR-001.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AR-001-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"AR-002\",\r\n    name: \"Geisha Portrait Painting \\u2013 Orange Red\",\r\n    category: [\"Living Room\", \"Bedroom\"],\r\n    material: \"Canvas Artwork\",\r\n    shortDescription: \"Detailed geisha portrait with orange-red tones and floral elements.\",\r\n    description: \"Artistic portrait of a geisha with refined facial details, rich orange-red tones, and elegant floral accents. A more classic and composed piece, bringing a sense of culture and sophistication to any interior.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AR-002.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AR-002-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-BS-001-WN\",\r\n    name: \"Woven Storage Basket\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Woven Natural Material\",\r\n    shortDescription: \"Handwoven storage basket with natural and black woven finish.\",\r\n    description: \"Handwoven storage basket with handles and a natural black finish. A practical decorative piece for living rooms, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BS-001-WN.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BS-001-WN-2.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-LC-007-BT\",\r\n    name: \"Black Teak Slatted Lounge Chair\",\r\n    category: [\"Living Room\"],\r\n    material: \"Black Teak\",\r\n    shortDescription: \"Black teak lounge chair with a clean slatted handcrafted design.\",\r\n    description: \"Handcrafted lounge chair made from black teak wood with a slatted seat and backrest. A stylish decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-007-BT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-007-BT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-LC-007-BT-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-TB-006-BT\",\r\n    name: \"Black Teak Bowl Coffee Table\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Black Teak\",\r\n    shortDescription: \"Black solid teak coffee table with a rounded bowl shape and handcrafted finish.\",\r\n    description: \"Handcrafted teak coffee table with a black finish and rounded bowl shape. A bold decorative piece for living rooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-006-BT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-006-BT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-006-BT-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-TB-007-NT\",\r\n    name: \"Natural Teak Wood Round Table\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Natural Teak\",\r\n    shortDescription: \"Solid teak round table with a natural finish and sculptural slatted base.\",\r\n    description: \"Handcrafted round teak wood table with a natural finish and slatted base design. A warm decorative piece for living rooms, kitchens, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-007-NT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-007-NT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-TB-007-NT-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"AROKA-LR-001\",\r\n    name: \"Solid Burned Teak Clothing Hanger\",\r\n    category: [\"Living Room\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Solid burned teak clothing hanger with a dark natural finish and sculptural rounded form.\",\r\n    description: \"A solid burned teak clothing hanger with a rounded sculptural shape and dark natural finish. Simple, strong, and elegant for living room decoration or functional use.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-001.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-001-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-001-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"AROKA-LR-002\",\r\n    name: \"Round Slatted Teak Dining Table\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Burned Teak\",\r\n    shortDescription: \"Round solid teak table with a dark burned finish and sculptural slatted base.\",\r\n    description: \"A round solid teak table with a dark natural finish and elegant slatted base. Strong, minimal, and stylish for dining rooms, living rooms, or boutique interiors.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-002.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-002-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-002-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"AROKA-LR-003\",\r\n    name: \"Large Antique Iron Wood Bowl\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Iron Wood\",\r\n    shortDescription: \"Large antique bowl made from iron wood with a rustic natural texture.\",\r\n    description: \"A large antique iron wood bowl with a raw rustic surface and aged character. Beautiful as a decorative piece for living rooms, kitchens, villas, or boutique interiors.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-003.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-003-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-003-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"AROKA-LR-004\",\r\n    name: \"Minimal Concrete Storage Cube\",\r\n    category: [\"Living Room\", \"Kitchen\", \"Bedroom\"],\r\n    material: \"Concrete Style Finish\",\r\n    shortDescription: \"Minimal concrete-style storage cube with a clean square shape and handle opening.\",\r\n    description: \"A minimal storage cube with a smooth concrete-style finish and practical handle opening. Simple, modern, and versatile for living rooms, kitchens, bedrooms, or boutique interiors.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-004.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-004-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-004-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"AROKA-LR-007\",\r\n    name: \"Red Carved Wooden Vase\",\r\n    category: [\"Living Room\", \"Kitchen\"],\r\n    material: \"Carved Wood\",\r\n    shortDescription: \"Round red wooden vase with a carved textured pattern and antique character.\",\r\n    description: \"A round red wooden vase with detailed carved texture and warm antique character. Beautiful as a decorative piece for living rooms, kitchens, villas, restaurants, or boutique interiors.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-007.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-007-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-007-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"AROKA-LR-009\",\r\n    name: \"Antique Blue Ceramic Vase\",\r\n    category: [\"Living Room\"],\r\n    material: \"Ceramic\",\r\n    shortDescription: \"Antique ceramic vase with a weathered blue finish and rustic character.\",\r\n    description: \"An antique ceramic vase with a weathered blue surface and natural aged texture. Beautiful as a decorative piece for living rooms, villas, restaurants, or boutique interiors.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-009.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-009-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/AROKA-LR-009-3.png\"\r\n    ]\r\n  },\r\n  {\r\n    id: \"ARO-BD-001-NT\",\r\n    name: \"Natural Teak Wood Bed\",\r\n    category: [\"Bedroom\"],\r\n    material: \"Natural Teak\",\r\n    shortDescription: \"Handcrafted teak wood bed with a natural finish and clean timeless design.\",\r\n    description: \"Handcrafted teak wood bed with a natural finish and simple elegant frame. A warm statement piece for bedrooms, villas, hotels, and resort interiors. Each piece is unique.\",\r\n    images: [\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BD-001-NT.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BD-001-NT-2.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BD-001-NT-3.png\",\r\n      \"https:\/\/aroka.webdev.is\/wp-content\/uploads\/2026\/05\/ARO-BD-001-NT-4.png\"\r\n    ]\r\n  }\r\n];\r\n\r\n\/* ============================================================\r\n   CATEGORY FILTER\r\n============================================================ *\/\r\nvar ARO_CATEGORY_ORDER = [\"All\", \"Living Room\", \"Kitchen\", \"Bedroom\", \"Bathroom\", \"Outdoor\", \"Other\"];\r\nvar aroActiveCategory = \"All\";\r\n\r\nfunction aroGetCategories() {\r\n  var used = {};\r\n  aroProducts.forEach(function(p) {\r\n    (Array.isArray(p.category) ? p.category : [p.category]).forEach(function(c) { used[c] = true; });\r\n  });\r\n  return ARO_CATEGORY_ORDER.filter(function(c) { return c === \"All\" || used[c]; });\r\n}\r\n\r\nfunction aroRenderFilterTabs() {\r\n  var container = document.getElementById(\"aroFilterTabs\");\r\n  container.innerHTML = \"\";\r\n  aroGetCategories().forEach(function(cat) {\r\n    var btn = document.createElement(\"button\");\r\n    btn.className = \"filter-tab\" + (cat === aroActiveCategory ? \" active\" : \"\");\r\n    btn.textContent = cat;\r\n    btn.setAttribute(\"role\", \"tab\");\r\n    btn.setAttribute(\"aria-selected\", cat === aroActiveCategory ? \"true\" : \"false\");\r\n    btn.addEventListener(\"click\", function() {\r\n      aroActiveCategory = cat;\r\n      aroRenderFilterTabs();\r\n      aroRenderProductGrid();\r\n    });\r\n    container.appendChild(btn);\r\n  });\r\n}\r\n\r\nfunction aroProductMatchesCategory(p) {\r\n  if (aroActiveCategory === \"All\") return true;\r\n  return Array.isArray(p.category) ? p.category.indexOf(aroActiveCategory) !== -1 : p.category === aroActiveCategory;\r\n}\r\n\r\n\/* ============================================================\r\n   CART\r\n============================================================ *\/\r\nvar aroCart = {};\r\n\r\nfunction aroGetCartTotal() {\r\n  return Object.values(aroCart).reduce(function(s, i) { return s + i.quantity; }, 0);\r\n}\r\n\r\nfunction aroAddToCart(productId) {\r\n  var product = aroProducts.find(function(p) { return p.id === productId; });\r\n  if (!product) return;\r\n\r\n  var selectedColor = null;\r\n  if (Array.isArray(product.variants) && product.variants.length > 0) {\r\n    var modalEl = document.getElementById(\"aroProductModal\");\r\n    var storedPid = modalEl.getAttribute(\"data-product-id\");\r\n    if (storedPid === productId) {\r\n      selectedColor = modalEl.getAttribute(\"data-selected-color\") || product.variants[0].name;\r\n    } else {\r\n      selectedColor = product.variants[0].name;\r\n    }\r\n  }\r\n\r\n  if (aroCart[productId]) {\r\n    aroCart[productId].quantity++;\r\n    if (selectedColor) aroCart[productId].selectedColor = selectedColor;\r\n  } else {\r\n    aroCart[productId] = { product: product, quantity: 1, selectedColor: selectedColor };\r\n  }\r\n  aroUpdateCartUI();\r\n  var displayName = selectedColor ? product.name + \" (\" + selectedColor + \")\" : product.name;\r\n  aroShowToast(displayName + \" added to project\");\r\n}\r\n\r\nfunction aroRemoveFromCart(productId) {\r\n  delete aroCart[productId];\r\n  aroUpdateCartUI();\r\n  aroRenderCartDrawer();\r\n}\r\n\r\nfunction aroChangeQty(productId, delta) {\r\n  if (!aroCart[productId]) return;\r\n  aroCart[productId].quantity = Math.max(1, aroCart[productId].quantity + delta);\r\n  aroUpdateCartUI();\r\n  aroRenderCartDrawer();\r\n}\r\n\r\nfunction aroUpdateCartUI() {\r\n  var total = aroGetCartTotal();\r\n  document.getElementById(\"aroCartBadge\").textContent = total;\r\n\r\n  document.querySelectorAll(\".aro-btn-add-project\").forEach(function(btn) {\r\n    var pid = btn.getAttribute(\"data-id\");\r\n    if (aroCart[pid]) {\r\n      btn.textContent = \"In Project \\u2713\";\r\n      btn.classList.add(\"added\");\r\n    } else {\r\n      btn.textContent = \"Add to Project\";\r\n      btn.classList.remove(\"added\");\r\n    }\r\n  });\r\n\r\n  var modalAddBtn = document.getElementById(\"aroModalAddBtn\");\r\n  var currentModalId = modalAddBtn.getAttribute(\"data-current-id\");\r\n  if (currentModalId) {\r\n    if (aroCart[currentModalId]) {\r\n      modalAddBtn.textContent = \"In Project \\u2713\";\r\n      modalAddBtn.classList.add(\"added\");\r\n    } else {\r\n      modalAddBtn.textContent = \"Add to Project\";\r\n      modalAddBtn.classList.remove(\"added\");\r\n    }\r\n  }\r\n\r\n  document.getElementById(\"aroRequestQuoteBtn\").disabled = total === 0;\r\n  aroRenderCartDrawer();\r\n}\r\n\r\nfunction aroRenderCartDrawer() {\r\n  var list = document.getElementById(\"aroCartItemsList\");\r\n  var cartItems = Object.values(aroCart);\r\n  document.getElementById(\"aroCartTotalCount\").textContent = aroGetCartTotal();\r\n\r\n  if (cartItems.length === 0) {\r\n    list.innerHTML = '<div class=\"aro-cart-empty-state\">' +\r\n      '<svg class=\"aro-cart-empty-icon\" viewBox=\"0 0 48 48\" fill=\"none\">' +\r\n        '<path d=\"M4 4h6l5 24h22L42 12H12\" stroke=\"#1A1714\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>' +\r\n        '<circle cx=\"20\" cy=\"40\" r=\"3\" stroke=\"#1A1714\" stroke-width=\"1.5\"\/>' +\r\n        '<circle cx=\"34\" cy=\"40\" r=\"3\" stroke=\"#1A1714\" stroke-width=\"1.5\"\/>' +\r\n      '<\/svg>' +\r\n      '<div class=\"aro-cart-empty-title\">Your project list is empty<\/div>' +\r\n      '<div class=\"aro-cart-empty-sub\">Browse the collection and add pieces<br>you wish to include in your project.<\/div>' +\r\n    '<\/div>';\r\n    return;\r\n  }\r\n\r\n  list.innerHTML = cartItems.map(function(item) {\r\n    var product = item.product, quantity = item.quantity, selectedColor = item.selectedColor;\r\n    var hasVariants = Array.isArray(product.variants) && product.variants.length > 0;\r\n    var variant = hasVariants\r\n      ? (product.variants.find(function(v) { return v.name === selectedColor; }) || product.variants[0])\r\n      : null;\r\n    var thumbSrc = hasVariants ? variant.images[0] : product.images[0];\r\n    var displayName = selectedColor ? product.name + \" (\" + selectedColor + \")\" : product.name;\r\n    return '<div class=\"aro-cart-item\" data-id=\"' + product.id + '\">' +\r\n      '<img decoding=\"async\" class=\"aro-cart-item-image\" src=\"' + thumbSrc + '\" alt=\"' + product.name + '\" loading=\"lazy\" \/>' +\r\n      '<div class=\"aro-cart-item-info\">' +\r\n        '<div class=\"aro-cart-item-name\">' + displayName + '<\/div>' +\r\n        '<div class=\"aro-cart-item-id\">' + product.id + '<\/div>' +\r\n        '<div class=\"aro-cart-qty-control\">' +\r\n          '<button class=\"aro-cart-qty-btn\" onclick=\"aroChangeQty(\\'' + product.id + '\\', -1)\" aria-label=\"Decrease\">\\u2212<\/button>' +\r\n          '<div class=\"aro-cart-qty-display\">' + quantity + '<\/div>' +\r\n          '<button class=\"aro-cart-qty-btn\" onclick=\"aroChangeQty(\\'' + product.id + '\\', 1)\" aria-label=\"Increase\">+<\/button>' +\r\n        '<\/div>' +\r\n        '<button class=\"aro-cart-item-remove\" onclick=\"aroRemoveFromCart(\\'' + product.id + '\\')\">Remove<\/button>' +\r\n      '<\/div>' +\r\n    '<\/div>';\r\n  }).join(\"\");\r\n}\r\n\r\nfunction aroOpenCart() {\r\n  document.getElementById(\"aroCartDrawer\").classList.add(\"open\");\r\n  document.body.style.overflow = \"hidden\";\r\n}\r\n\r\nfunction aroCloseCart() {\r\n  document.getElementById(\"aroCartDrawer\").classList.remove(\"open\");\r\n  document.body.style.overflow = \"\";\r\n}\r\n\r\ndocument.getElementById(\"aroOpenCartBtn\").addEventListener(\"click\", aroOpenCart);\r\ndocument.getElementById(\"aroCartCloseBtn\").addEventListener(\"click\", aroCloseCart);\r\ndocument.getElementById(\"aroCartDrawer\").addEventListener(\"click\", function(e) {\r\n  if (e.target === this) aroCloseCart();\r\n});\r\n\r\n\/* ============================================================\r\n   PRODUCT MODAL\r\n============================================================ *\/\r\nfunction aroOpenModal(productId) {\r\n  var product = aroProducts.find(function(p) { return p.id === productId; });\r\n  if (!product) return;\r\n\r\n  var hasVariants = Array.isArray(product.variants) && product.variants.length > 0;\r\n  var defaultVariant = hasVariants ? product.variants[0] : null;\r\n  var images = hasVariants ? defaultVariant.images.slice() : product.images.slice();\r\n\r\n  var colorSelector = document.getElementById(\"aroModalColorSelector\");\r\n  var colorOptions = document.getElementById(\"aroModalColorOptions\");\r\n  if (hasVariants) {\r\n    colorSelector.style.display = \"block\";\r\n    colorOptions.innerHTML = product.variants.map(function(v, i) {\r\n      return '<button class=\"aro-modal-color-btn' + (i === 0 ? \" active\" : \"\") + '\" ' +\r\n        'data-variant-index=\"' + i + '\" ' +\r\n        'onclick=\"aroSwitchModalVariant(\\'' + product.id + '\\', ' + i + ')\" ' +\r\n        'aria-label=\"Select color ' + v.name + '\">' + v.name + '<\/button>';\r\n    }).join(\"\");\r\n    document.getElementById(\"aroProductModal\").setAttribute(\"data-selected-color\", defaultVariant.name);\r\n  } else {\r\n    colorSelector.style.display = \"none\";\r\n    colorOptions.innerHTML = \"\";\r\n    document.getElementById(\"aroProductModal\").removeAttribute(\"data-selected-color\");\r\n  }\r\n\r\n  var mainImg = document.getElementById(\"aroModalMainImage\");\r\n  mainImg.src = images[0];\r\n  mainImg.alt = product.name;\r\n\r\n  var thumbsContainer = document.getElementById(\"aroModalThumbnails\");\r\n  if (images.length <= 1) {\r\n    thumbsContainer.innerHTML = \"\";\r\n    thumbsContainer.style.display = \"none\";\r\n  } else {\r\n    thumbsContainer.style.display = \"flex\";\r\n    thumbsContainer.innerHTML = images.map(function(src, i) {\r\n      return '<div class=\"aro-modal-thumb' + (i === 0 ? \" active\" : \"\") + '\" data-index=\"' + i + '\" ' +\r\n        'onclick=\"aroSwitchModalImage(' + i + ')\" role=\"button\" aria-label=\"View image ' + (i+1) + '\">' +\r\n        '<img decoding=\"async\" src=\"' + src + '\" alt=\"' + product.name + ' view ' + (i+1) + '\" loading=\"lazy\" \/><\/div>';\r\n    }).join(\"\");\r\n  }\r\n\r\n  document.getElementById(\"aroProductModal\").setAttribute(\"data-images\", JSON.stringify(images));\r\n  document.getElementById(\"aroProductModal\").setAttribute(\"data-product-id\", product.id);\r\n  document.getElementById(\"aroModalEyebrow\").textContent = Array.isArray(product.category) ? product.category.join(\" \/ \") : product.category;\r\n  document.getElementById(\"aroModalProductName\").textContent = product.name;\r\n  document.getElementById(\"aroModalProductId\").textContent = \"Ref. \" + product.id;\r\n  document.getElementById(\"aroModalCategory\").textContent = Array.isArray(product.category) ? product.category.join(\", \") : product.category;\r\n  document.getElementById(\"aroModalMaterial\").textContent = product.material;\r\n  document.getElementById(\"aroModalShortDesc\").textContent = product.shortDescription;\r\n  document.getElementById(\"aroModalFullDesc\").textContent = product.description;\r\n\r\n  var addBtn = document.getElementById(\"aroModalAddBtn\");\r\n  addBtn.setAttribute(\"data-current-id\", product.id);\r\n  if (aroCart[product.id]) {\r\n    addBtn.textContent = \"In Project \\u2713\";\r\n    addBtn.classList.add(\"added\");\r\n  } else {\r\n    addBtn.textContent = \"Add to Project\";\r\n    addBtn.classList.remove(\"added\");\r\n  }\r\n\r\n  document.getElementById(\"aroProductModal\").classList.add(\"open\");\r\n  document.body.style.overflow = \"hidden\";\r\n}\r\n\r\nfunction aroSwitchModalVariant(productId, variantIndex) {\r\n  var product = aroProducts.find(function(p) { return p.id === productId; });\r\n  if (!product || !product.variants) return;\r\n  var variant = product.variants[variantIndex];\r\n  if (!variant) return;\r\n\r\n  document.getElementById(\"aroProductModal\").setAttribute(\"data-selected-color\", variant.name);\r\n\r\n  document.querySelectorAll(\".aro-modal-color-btn\").forEach(function(btn, i) {\r\n    btn.classList.toggle(\"active\", i === variantIndex);\r\n  });\r\n\r\n  var images = variant.images.slice();\r\n  document.getElementById(\"aroProductModal\").setAttribute(\"data-images\", JSON.stringify(images));\r\n  document.getElementById(\"aroModalMainImage\").src = images[0];\r\n\r\n  var thumbsContainer = document.getElementById(\"aroModalThumbnails\");\r\n  if (images.length <= 1) {\r\n    thumbsContainer.innerHTML = \"\";\r\n    thumbsContainer.style.display = \"none\";\r\n  } else {\r\n    thumbsContainer.style.display = \"flex\";\r\n    thumbsContainer.innerHTML = images.map(function(src, i) {\r\n      return '<div class=\"aro-modal-thumb' + (i === 0 ? \" active\" : \"\") + '\" data-index=\"' + i + '\" ' +\r\n        'onclick=\"aroSwitchModalImage(' + i + ')\" role=\"button\" aria-label=\"View image ' + (i+1) + '\">' +\r\n        '<img decoding=\"async\" src=\"' + src + '\" alt=\"' + product.name + ' ' + variant.name + ' view ' + (i+1) + '\" loading=\"lazy\" \/><\/div>';\r\n    }).join(\"\");\r\n  }\r\n}\r\n\r\nfunction aroSwitchModalImage(index) {\r\n  var images = JSON.parse(document.getElementById(\"aroProductModal\").getAttribute(\"data-images\") || \"[]\");\r\n  if (!images[index]) return;\r\n  document.getElementById(\"aroModalMainImage\").src = images[index];\r\n  document.querySelectorAll(\".aro-modal-thumb\").forEach(function(thumb, i) {\r\n    thumb.classList.toggle(\"active\", i === index);\r\n  });\r\n}\r\n\r\nfunction aroCloseModal() {\r\n  document.getElementById(\"aroProductModal\").classList.remove(\"open\");\r\n  document.body.style.overflow = \"\";\r\n}\r\n\r\ndocument.getElementById(\"aroModalCloseBtn\").addEventListener(\"click\", aroCloseModal);\r\ndocument.getElementById(\"aroProductModal\").addEventListener(\"click\", function(e) {\r\n  if (e.target === this) aroCloseModal();\r\n});\r\ndocument.getElementById(\"aroModalAddBtn\").addEventListener(\"click\", function() {\r\n  var pid = this.getAttribute(\"data-current-id\");\r\n  if (pid) aroAddToCart(pid);\r\n});\r\n\r\n\/* ============================================================\r\n   PRODUCT GRID\r\n============================================================ *\/\r\nfunction aroRenderProductGrid() {\r\n  var grid = document.getElementById(\"aroProductGrid\");\r\n  var noResults = document.getElementById(\"aroNoResults\");\r\n  var filtered = aroProducts.filter(aroProductMatchesCategory);\r\n\r\n  document.getElementById(\"aroResultsCount\").textContent = filtered.length + (filtered.length === 1 ? \" piece\" : \" pieces\");\r\n  document.getElementById(\"aroHeroCount\").textContent = aroProducts.length;\r\n\r\n  if (filtered.length === 0) {\r\n    grid.innerHTML = \"\";\r\n    noResults.classList.add(\"visible\");\r\n    return;\r\n  }\r\n\r\n  noResults.classList.remove(\"visible\");\r\n  grid.innerHTML = filtered.map(function(product) {\r\n    var isInCart = !!aroCart[product.id];\r\n    var hasVariants = Array.isArray(product.variants) && product.variants.length > 0;\r\n    var gridImage = hasVariants ? product.variants[0].images[0] : product.images[0];\r\n    return '<article class=\"product-card\" role=\"listitem\" data-id=\"' + product.id + '\">' +\r\n      '<div class=\"product-card-image-wrap\" onclick=\"aroOpenModal(\\'' + product.id + '\\')\">' +\r\n        '<img decoding=\"async\" src=\"' + gridImage + '\" alt=\"' + product.name + '\" loading=\"lazy\" \/>' +\r\n        '<div class=\"product-card-overlay\">' +\r\n          '<div class=\"product-card-quick-view\">View Details<\/div>' +\r\n        '<\/div>' +\r\n      '<\/div>' +\r\n      '<div class=\"product-card-body\">' +\r\n        '<div class=\"product-card-material\">' + product.material + '<\/div>' +\r\n        '<h3 class=\"product-card-name\">' + product.name + '<\/h3>' +\r\n        '<div class=\"product-card-id\">Ref. ' + product.id + '<\/div>' +\r\n        '<p class=\"product-card-desc\">' + product.shortDescription + '<\/p>' +\r\n        '<div class=\"product-card-actions\">' +\r\n          '<button class=\"btn-view-details\" onclick=\"aroOpenModal(\\'' + product.id + '\\')\" aria-label=\"View details for ' + product.name + '\">View Details<\/button>' +\r\n          '<button class=\"btn-add-project aro-btn-add-project' + (isInCart ? \" added\" : \"\") + '\" data-id=\"' + product.id + '\" onclick=\"aroAddToCart(\\'' + product.id + '\\')\" aria-label=\"Add ' + product.name + ' to project\">' +\r\n            (isInCart ? \"In Project \\u2713\" : \"Add to Project\") +\r\n          '<\/button>' +\r\n        '<\/div>' +\r\n      '<\/div>' +\r\n    '<\/article>';\r\n  }).join(\"\");\r\n}\r\n\r\n\/* ============================================================\r\n   QUOTE MODAL\r\n============================================================ *\/\r\ndocument.getElementById(\"aroRequestQuoteBtn\").addEventListener(\"click\", aroOpenQuoteModal);\r\n\r\nfunction aroOpenQuoteModal() {\r\n  aroCloseCart();\r\n  aroRenderQuoteProducts();\r\n  aroPopulateFluentProductsField();\r\n  document.getElementById(\"aroQuoteFormBody\").style.display = \"block\";\r\n  document.getElementById(\"aroQuoteFormHeader\").style.display = \"block\";\r\n  document.getElementById(\"aroQuoteSuccess\").classList.remove(\"visible\");\r\n  document.getElementById(\"aroQuoteModal\").classList.add(\"open\");\r\n  document.body.style.overflow = \"hidden\";\r\n}\r\n\r\nfunction aroCartProductLines() {\r\n  return Object.values(aroCart).map(function(item) {\r\n    var p = item.product;\r\n    var lines = p.name + \"\\n\";\r\n    lines += \"ID: \" + p.id + \"\\n\";\r\n    if (item.selectedColor) lines += \"Variant: \" + item.selectedColor + \"\\n\";\r\n    lines += \"Qty: \" + item.quantity;\r\n    return lines;\r\n  }).join(\"\\n\\n\");\r\n}\r\n\r\n\/* ---- Vue-compatible value setter ---- *\/\r\n\/* Fluent Forms uses Vue.js internally. Setting el.value directly bypasses\r\n   Vue's reactivity. We must use the native HTMLInputElement\/HTMLTextAreaElement\r\n   prototype setter so Vue's watcher fires and the field value is included\r\n   in the POST payload on submit. *\/\r\nfunction aroSetNativeValue(el, value) {\r\n  var proto = Object.getPrototypeOf(el);\r\n  var descriptor = Object.getOwnPropertyDescriptor(proto, \"value\");\r\n  if (descriptor && descriptor.set) {\r\n    descriptor.set.call(el, value);\r\n  } else {\r\n    el.value = value;\r\n  }\r\n  el.dispatchEvent(new Event(\"input\",  { bubbles: true }));\r\n  el.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n}\r\n\r\nfunction aroFillProductsField() {\r\n  var value = aroCartProductLines();\r\n\r\n  \/\/ 1. Our own wrapper hidden input (belt-and-suspenders fallback)\r\n  var ownInput = document.getElementById(\"aroFluentProductsField\");\r\n  if (ownInput) aroSetNativeValue(ownInput, value);\r\n\r\n  \/\/ 2. Fluent Forms rendered hidden input \u2014 search the entire quote modal\r\n  \/\/    (not just .aro-quote-form) because FF may append its <form> as a sibling\r\n  var modal = document.getElementById(\"aroQuoteModal\");\r\n  var scope = modal || document;\r\n  scope.querySelectorAll(\"input[name='products'], textarea[name='products']\").forEach(function(el) {\r\n    aroSetNativeValue(el, value);\r\n  });\r\n}\r\n\r\n\/* Keep a persistent MutationObserver alive for the lifetime of the page.\r\n   Each time the quote modal opens and Fluent Forms renders (or re-renders)\r\n   its hidden field, we immediately populate it. *\/\r\n(function() {\r\n  var _modalObserver = null;\r\n\r\n  function startObserver() {\r\n    var modal = document.getElementById(\"aroQuoteModal\");\r\n    if (!modal || _modalObserver) return;\r\n    _modalObserver = new MutationObserver(function() {\r\n      \/\/ Re-fill any time the DOM inside the modal changes (FF rendering)\r\n      aroFillProductsField();\r\n    });\r\n    _modalObserver.observe(modal, { childList: true, subtree: true });\r\n  }\r\n\r\n  \/\/ Start as soon as DOM is ready\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", startObserver);\r\n  } else {\r\n    startObserver();\r\n  }\r\n})();\r\n\r\nfunction aroPopulateFluentProductsField() {\r\n  \/\/ Fill immediately\r\n  aroFillProductsField();\r\n  \/\/ Also attempt again after brief delay to catch FF async rendering\r\n  setTimeout(aroFillProductsField, 200);\r\n  setTimeout(aroFillProductsField, 600);\r\n}\r\n\r\n\/\/ Hook into form submit in capture phase so we run before FF validates\/serialises\r\ndocument.addEventListener(\"submit\", function(e) {\r\n  var form = e.target;\r\n  \/\/ Intercept any form inside the quote modal\r\n  var modal = document.getElementById(\"aroQuoteModal\");\r\n  if (modal && modal.contains(form)) {\r\n    aroFillProductsField();\r\n  }\r\n}, true);\r\n\r\n\/\/ jQuery fluentform_before_submit hook (runs if jQuery \/ FF JS is loaded)\r\n(function tryJqueryHook() {\r\n  if (window.jQuery) {\r\n    window.jQuery(document).on(\"fluentform_before_submit\", function() {\r\n      aroFillProductsField();\r\n    });\r\n  } else {\r\n    \/\/ Retry a few times in case jQuery loads late\r\n    var attempts = 0;\r\n    var interval = setInterval(function() {\r\n      attempts++;\r\n      if (window.jQuery) {\r\n        window.jQuery(document).on(\"fluentform_before_submit\", function() {\r\n          aroFillProductsField();\r\n        });\r\n        clearInterval(interval);\r\n      } else if (attempts >= 20) {\r\n        clearInterval(interval);\r\n      }\r\n    }, 500);\r\n  }\r\n})();\r\n\r\nfunction aroCloseQuoteModal() {\r\n  document.getElementById(\"aroQuoteModal\").classList.remove(\"open\");\r\n  document.body.style.overflow = \"\";\r\n}\r\n\r\ndocument.getElementById(\"aroCloseQuoteBtn\").addEventListener(\"click\", aroCloseQuoteModal);\r\ndocument.getElementById(\"aroQuoteModal\").addEventListener(\"click\", function(e) {\r\n  if (e.target === this) aroCloseQuoteModal();\r\n});\r\n\r\nfunction aroRenderQuoteProducts() {\r\n  var container = document.getElementById(\"aroQuoteProductsSummary\");\r\n  var cartItems = Object.values(aroCart);\r\n  container.innerHTML = '<div class=\"aro-quote-products-summary-title\">Items in your project<\/div>' +\r\n    cartItems.map(function(item) {\r\n      var product = item.product, quantity = item.quantity, selectedColor = item.selectedColor;\r\n      var hasVariants = Array.isArray(product.variants) && product.variants.length > 0;\r\n      var variant = hasVariants\r\n        ? (product.variants.find(function(v) { return v.name === selectedColor; }) || product.variants[0])\r\n        : null;\r\n      var thumbSrc = hasVariants ? variant.images[0] : product.images[0];\r\n      var displayName = selectedColor ? product.name + \" (\" + selectedColor + \")\" : product.name;\r\n      return '<div class=\"aro-quote-product-row\">' +\r\n        '<img decoding=\"async\" class=\"aro-quote-product-img\" src=\"' + thumbSrc + '\" alt=\"' + product.name + '\" loading=\"lazy\" \/>' +\r\n        '<div class=\"aro-quote-product-text\">' +\r\n          '<div class=\"aro-quote-product-name\">' + displayName + '<\/div>' +\r\n          '<div class=\"aro-quote-product-id\">' + product.id + '<\/div>' +\r\n        '<\/div>' +\r\n        '<div class=\"aro-quote-product-qty\">Qty: ' + quantity + '<\/div>' +\r\n      '<\/div>';\r\n    }).join(\"\");\r\n}\r\n\r\n\/* Fluent Forms handles form submission \u2014 no custom submit handler needed *\/\r\n\r\n\/* ============================================================\r\n   TOAST\r\n============================================================ *\/\r\nvar aroToastTimer = null;\r\n\r\nfunction aroShowToast(message) {\r\n  var toast = document.getElementById(\"aroToast\");\r\n  toast.textContent = message;\r\n  toast.classList.add(\"show\");\r\n  clearTimeout(aroToastTimer);\r\n  aroToastTimer = setTimeout(function() { toast.classList.remove(\"show\"); }, 2800);\r\n}\r\n\r\n\/* ============================================================\r\n   KEYBOARD ACCESSIBILITY\r\n============================================================ *\/\r\ndocument.addEventListener(\"keydown\", function(e) {\r\n  if (e.key === \"Escape\") { aroCloseModal(); aroCloseCart(); aroCloseQuoteModal(); }\r\n});\r\n\r\n\/* ============================================================\r\n   EXPOSE GLOBALS for inline onclick attributes\r\n============================================================ *\/\r\nwindow.aroOpenModal          = aroOpenModal;\r\nwindow.aroAddToCart          = aroAddToCart;\r\nwindow.aroRemoveFromCart     = aroRemoveFromCart;\r\nwindow.aroChangeQty          = aroChangeQty;\r\nwindow.aroSwitchModalVariant = aroSwitchModalVariant;\r\nwindow.aroSwitchModalImage   = aroSwitchModalImage;\r\n\r\n\/* ============================================================\r\n   INIT\r\n============================================================ *\/\r\naroRenderFilterTabs();\r\naroRenderProductGrid();\r\naroRenderCartDrawer();\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Collection \u2014 2026 The Collection 0 Pieces Available Filter 0 pieces Aroka Studio No pieces found Try a different category &times; \u2014 Category Material Color Add to Project Project List Selected pieces for your project &times; Total Items 0 Request a Quote Project Inquiry Request a Quote Share your project details and we will be [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-104","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/aroka.webdev.is\/index.php?rest_route=\/wp\/v2\/pages\/104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aroka.webdev.is\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aroka.webdev.is\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aroka.webdev.is\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aroka.webdev.is\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=104"}],"version-history":[{"count":106,"href":"https:\/\/aroka.webdev.is\/index.php?rest_route=\/wp\/v2\/pages\/104\/revisions"}],"predecessor-version":[{"id":1525,"href":"https:\/\/aroka.webdev.is\/index.php?rest_route=\/wp\/v2\/pages\/104\/revisions\/1525"}],"wp:attachment":[{"href":"https:\/\/aroka.webdev.is\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}