{"id":1077,"date":"2025-04-24T15:39:53","date_gmt":"2025-04-24T15:39:53","guid":{"rendered":"http:\/\/ugcegypt.infy.uk\/?page_id=1077"},"modified":"2025-07-01T00:41:05","modified_gmt":"2025-06-30T21:41:05","slug":"products","status":"publish","type":"page","link":"https:\/\/ugcegypt.com\/ar\/products\/","title":{"rendered":"\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1077\" class=\"elementor elementor-1077\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd0bb16 e-flex e-con-boxed e-con e-parent\" data-id=\"bd0bb16\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-925dc34 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"925dc34\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:200}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">\u0627\u0643\u062a\u0634\u0641 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646\u062a\u062c\u0627\u062a\u0646\u0627 \u0627\u0644\u0645\u0645\u064a\u0632\u0629 <\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5ae1fba e-flex e-con-boxed e-con e-parent\" data-id=\"5ae1fba\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48f9258 elementor-widget elementor-widget-spacer\" data-id=\"48f9258\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4c86ede e-flex e-con-boxed e-con e-parent\" data-id=\"4c86ede\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-96c1f8a e-con-full e-flex e-con e-child\" data-id=\"96c1f8a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_bottom&quot;:&quot;triangle&quot;}\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 100\" preserveaspectratio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M500,98.9L0,6.1V0h1000v6.1L500,98.9z\"\/>\n<\/svg>\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1dd6e7d e-con-full e-flex e-con e-child\" data-id=\"1dd6e7d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab268b8 elementor-widget elementor-widget-image\" data-id=\"ab268b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/ugcegypt.com\/wp-content\/uploads\/elementor\/thumbs\/logo_png-removebg-preview-r7cnxevr2mqpmlggww8pn39fqk5dqeskt5x9b3igvc.png\" title=\"logo_png-removebg-preview\" alt=\"logo_png-removebg-preview\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-402cb15 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"402cb15\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInRight&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e805adc e-flex e-con-boxed e-con e-parent\" data-id=\"e805adc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-736c9e4 elementor-widget elementor-widget-text-editor\" data-id=\"736c9e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0641\u064a \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0645\u062a\u062d\u062f\u0629 \u0644\u0645\u0633\u062a\u062d\u0636\u0631\u0627\u062a \u0627\u0644\u062a\u062c\u0645\u064a\u0644 (\u064a\u0648 \u062c\u0649 \u0633\u0649)\u060c \u0646\u064f\u062f\u0631\u0643 \u0623\u0646 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0645\u0646\u062a\u062c \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0635\u0646\u0639 \u0641\u0631\u0642\u064b\u0627 \u062d\u0642\u064a\u0642\u064a\u064b\u0627. \u0644\u0630\u0644\u0643 \u0635\u0645\u0645\u0646\u0627 \u0644\u0643 \u0648\u0627\u062c\u0647\u0629 \u0633\u0647\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062a\u062a\u064a\u062d \u0644\u0643 \u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0645\u062c\u0645\u0648\u0639\u062a\u0646\u0627 \u0627\u0644\u0648\u0627\u0633\u0639\u0629 \u0645\u0646 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u062d\u0633\u0628 \u0627\u0644\u0641\u0626\u0629 \u0648\u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645. \u0643\u0644 \u0645\u0627 \u0639\u0644\u064a\u0643 \u0647\u0648 \u0627\u062e\u062a\u064a\u0627\u0631 \u0646\u0648\u0639 \u0627\u0644\u0645\u0646\u062a\u062c \u0645\u0646 \u0627\u0644\u0642\u0627\u0626\u0645\u0629\u060c \u062b\u0645 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0641\u0631\u0639\u064a\u0629 \u0627\u0644\u0645\u0641\u0636\u0644\u0629\u060c \u0644\u062a\u0635\u0641\u062d \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u064b\u0627 \u0644\u062a\u0644\u0628\u064a\u0629 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643. \u0633\u0648\u0627\u0621 \u0643\u0646\u062a \u062a\u0628\u062d\u062b \u0639\u0646 \u0645\u0646\u062a\u062c\u0627\u062a \u0644\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0628\u0634\u0631\u0629\u060c \u0623\u0648 \u0627\u0644\u0634\u0639\u0631\u060c \u0623\u0648 \u0627\u0644\u062c\u0633\u0645 \u2014 \u0633\u062a\u062c\u062f \u0645\u0627 \u062a\u0628\u062d\u062b \u0639\u0646\u0647 \u0628\u0643\u0644 \u0633\u0647\u0648\u0644\u0629 \u0648\u0628\u0636\u063a\u0637\u0629 \u0648\u0627\u062d\u062f\u0629<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e1b6ad elementor-widget elementor-widget-html\" data-id=\"5e1b6ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t  <div class=\"custom-interface-wrapper\">\n    <style>\n    .custom-interface-wrapper {\n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n      color: #fff;\n      padding: 40px 20px;\n      background-color: #92278f;\n    }\n\n    .custom-interface-wrapper .container {\n      max-width: 1400px;\n      margin: auto;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 30px;\n      background: white;\n      padding: 30px;\n      border-radius: 15px;\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      color: #333;\n    }\n\n    .custom-interface-wrapper .left-section {\n      flex: 3;\n      max-height: 70vh;\n      overflow-y: auto;\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n      gap: 15px;\n    }\n\n    .custom-interface-wrapper .category-box {\n      background: linear-gradient(to bottom right, #d6ecfa, #e6f7ff);\n      padding: 15px;\n      border-radius: 12px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      transition: all 0.3s ease-in-out;\n      font-size: 14px;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .custom-interface-wrapper .category-box:hover {\n      transform: translateY(-6px);\n      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);\n      background: linear-gradient(to bottom right, #c2defa, #d6ecfa);\n    }\n\n    .custom-interface-wrapper .category-box::before {\n      content: '';\n      position: absolute;\n      top: -50%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      background: rgba(255, 255, 255, 0.1);\n      transform: rotate(25deg);\n      pointer-events: none;\n      animation: moveShine 6s infinite;\n    }\n\n    @keyframes moveShine {\n      0% {\n        transform: rotate(25deg) translate(-100%, -100%);\n      }\n\n      100% {\n        transform: rotate(25deg) translate(100%, 100%);\n      }\n    }\n\n    .custom-interface-wrapper .category-box label {\n      font-weight: bold;\n      margin-bottom: 5px;\n      display: block;\n      color: #333;\n      font-size: 16px;\n    }\n\n    .custom-interface-wrapper .category-box select {\n      width: 100%;\n      padding: 8px;\n      border: 1px solid #ccc;\n      border-radius: 6px;\n      font-size: 14px;\n      background: #ffffffcc;\n    }\n\n    .custom-interface-wrapper .right-section {\n      flex: 2;\n      display: flex;\n      flex-direction: column;\n      height: 70vh;\n      padding: 20px;\n      background: #fff;\n      border-radius: 10px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n      overflow-y: auto;\n    }\n\n    .custom-interface-wrapper .right-section h2 {\n      margin-bottom: 15px;\n      font-size: 20px;\n      color: #333;\n      text-align: center;\n      position: relative;\n    }\n\n    .custom-interface-wrapper .right-section h2::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      width: 100%;\n      height: 2px;\n      background: linear-gradient(to right, #92278f, #c23baf);\n    }\n\n    .custom-interface-wrapper #selected-products {\n      font-size: 16px;\n      line-height: 1.6;\n      color: #333;\n      flex: 1;\n    }\n\n    .custom-interface-wrapper ul {\n      list-style-type: disc;\n      padding-left: 20px;\n      margin-top: 10px;\n    }\n\n    .custom-interface-wrapper .reset-container {\n      display: flex;\n      justify-content: center;\n      margin-top: auto;\n    }\n\n    .custom-interface-wrapper button#resetBtn {\n      padding: 10px 20px;\n      background-color: #92278f;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 15px;\n      transition: background 0.3s, transform 0.2s;\n    }\n\n    .custom-interface-wrapper button#resetBtn:hover {\n      background-color: #7a1f7d;\n      transform: scale(1.05);\n    }\n\n    @media (max-width: 1024px) {\n      .custom-interface-wrapper .container {\n        flex-direction: column;\n      }\n\n      .custom-interface-wrapper .right-section,\n      .custom-interface-wrapper .left-section {\n        max-height: 50vh;\n      }\n    }\n  <\/style>\n\n<div class=\"container\">\n\n    <!-- \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u064a\u0633\u0631: \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a -->\n    <div class=\"left-section\" id=\"productSelectors\"><\/div>\n\n    <!-- \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u064a\u0645\u0646: \u0639\u0631\u0636 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 -->\n    <div class=\"right-section\">\n      <h2>\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0646\u062a\u062c<\/h2>\n      <div id=\"selected-products\">\u0644\u0645 \u064a\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0623\u064a \u0645\u0646\u062a\u062c\u0627\u062a.<\/div>\n      <div class=\"reset-container\">\n        <button id=\"resetBtn\">\u0627\u0644\u063a\u0627\u0621 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631\u0627\u062a<\/button>\n      <\/div>\n    <\/div>\n\n  <\/div>\n  \n     <script>\n    \/\/ \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a - \u0643\u0645\u0627 \u0641\u064a \u0645\u0644\u0641 Excel Sheet1\n    const productCategories = [\n      {\n        name: \"Creams\",\n        subcategories: [\n          { main: \"Skincare creams\", items: [\"Moisturizing cream\", \"Brightening cream\", \"Anti-aging cream\", \"Sunscreen cream\"] },\n          { main: \"Therapeutic medical creams\", items: [\"Anti-inflammatory cream\", \"Antifungal cream\", \"Acne treatment cream\", \"Soothing cream for burns and wounds\"] },\n          { main: \"Hair creams\", items: [\"Hair styling cream: for moisturizing and holding hair\", \"Split end treatment cream\"] },\n          { main: \"Body creams\", items: [\"Firming cream and anti-cellulite cream\", \"Body brightening cream\"] },\n          { main: \"Creams for sensitive areas\", items: [\"Sensitive area brightening cream\", \"Post-hair removal soothing cream\"] }\n        ]\n      },\n      {\n        name: \"Shampoo\",\n        subcategories: [\n          { main: \"Shampoo by hair type\", items: [\"Shampoo for dry hair\", \"Shampoo for oily hair\", \"Shampoo for normal hair\", \"Shampoo for colored hair\", \"Shampoo for damaged hair\"] },\n          { main: \"Therapeutic shampoo\", items: [\"Anti-dandruff shampoo\", \"Antifungal shampoo\", \"Hair loss shampoo\", \"Hair growth shampoo\"] },\n          { main: \"Natural or organic shampoo\", items: [\"Herbal shampoo\", \"Organic shampoo\"] },\n          { main: \"Specialized shampoos\", items: [\"Shampoo for children\", \"Shampoo for men\", \"Volumizing shampoo\", \"Smoothing shampoo for curly hair\"] }\n        ]\n      },\n      {\n        name: \"Serum\",\n        subcategories: [\n          { main: \"Facial serum\", items: [\"Hydrating serum\", \"Skin brightening serum\", \"Anti-wrinkle serum\", \"Pigmentation treatment serum\", \"Soothing serum\", \"Exfoliating serum\"] },\n          { main: \"Hair serum\", items: [\"Split end treatment serum\", \"Hair smoothing serum\", \"Hair growth stimulating serum\", \"Eyebrow and eyelash serum\"] },\n          { main: \"Serum for sensitive areas\", items: [\"Sensitive area brightening serum\"] },\n          { main: \"Body serum\", items: [\"Body moisturizing serum\", \"Cellulite treatment serum\", \"Nail serum\"] }\n        ]\n      },\n      {\n        name: \"Cleanser\",\n        subcategories: [\n          { main: \"Facial cleanser (according to skin type)\", items: [\"Cleanser for dry skin\", \"Cleanser for oily skin\", \"Cleanser for combination skin\", \"Cleanser for sensitive skin\", \"Cleanser for acne-prone skin\"] },\n          { main: \"Therapeutic facial cleanser\", items: [\"Exfoliating cleanser\", \"Skin brightening cleanser\", \"Dark spot treatment cleanser\"] },\n          { main: \"Body wash \/ Body cleanser\", items: [\"Moisturizing body wash\", \"Refreshing body wash\", \"Antibacterial body wash\", \"Vaginal wash\", \"Brightening cleanser for sensitive areas\"] },\n          { main: \"Hair and scalp cleanser\", items: [\"Foaming cleanser\", \"Cream cleanser\", \"Gel cleanser\", \"Cleanser with natural oil\"] }\n        ]\n      },\n      {\n        name: \"Hair mask\",\n        subcategories: [\n          { main: \"According to the function of the mask\", items: [\"Moisturizing mask for dry hair\", \"Strengthening mask for weak hair\", \"Anti-hair loss mask\", \"Mask for colored hair\", \"Smoothing and detangling mask\", \"Mask for curly hair\"] },\n          { main: \"Additional specialized masks\", items: [\"Pre-shower mask\", \"Overnight mask\"] }\n        ]\n      },\n      {\n        name: \"Sunscreen\",\n        subcategories: [\n          { main: \"Types of sunscreen based on formulation\", items: [\"Chemical sunscreen\", \"Physical sunscreen\", \"Hybrid sunscreen\"] }\n        ]\n      },\n      {\n        name: \"Scrub\",\n        subcategories: [\n          { main: \"Face scrub\", items: [] },\n          { main: \"Body scrub\", items: [] },\n          { main: \"Lip scrub\", items: [] },\n          { main: \"Scalp scrub\", items: [] },\n          { main: \"Foot scrub\", items: [] }\n        ]\n      },\n      {\n        name: \"Dry Oils\",\n        subcategories: [\n          { main: \"Types of dry oils\", items: [] },\n          { main: \"According to product type\", items: [\"Natural dry oils\", \"Dry oils infused with light fragrances\", \"Dry oils with a golden shimmer\"] }\n        ]\n      },\n      {\n        name: \"Body Lotion\",\n        subcategories: [\n          { main: \"Regular moisturizing lotion\", items: [] },\n          { main: \"Lotion for very dry skin\", items: [] },\n          { main: \"Skin brightening lotion\", items: [] },\n          { main: \"Lotion for sensitive skin\", items: [] },\n          { main: \"Fragranced lotion\", items: [] },\n          { main: \"After-sun lotion\", items: [] },\n          { main: \"Sunscreen lotion\", items: [] },\n          { main: \"Lotion with therapeutic ingredients\", items: [] }\n        ]\n      },\n      {\n        name: \"Hair Lotion Spray\",\n        subcategories: [\n          { main: \"Moisturizing hair spray\", items: [] },\n          { main: \"Detangling hair spray\", items: [] },\n          { main: \"Curl hair lotion spray\", items: [] },\n          { main: \"Heat protection spray\", items: [] },\n          { main: \"Nourishing spray for split or damaged hair\", items: [] },\n          { main: \"Hair growth stimulating spray\", items: [] },\n          { main: \"Anti-frizz and flyaway spray\", items: [] }\n        ]\n      },\n      {\n        name: \"Face Mask\",\n        subcategories: [\n          { main: \"Hydrating mask\", items: [] },\n          { main: \"Exfoliating mask\", items: [] },\n          { main: \"Skin brightening mask\", items: [] },\n          { main: \"Firming mask\", items: [] },\n          { main: \"Blackhead removal mask\", items: [] },\n          { main: \"Overnight mask\", items: [] }\n        ]\n      },\n      {\n        name: \"Hair Wax\",\n        subcategories: [\n          { main: \"Strong hold wax\", items: [] },\n          { main: \"Medium hold wax\", items: [] },\n          { main: \"Light hold wax\", items: [] },\n          { main: \"Shiny wax\", items: [] },\n          { main: \"Matte wax\", items: [] },\n          { main: \"Soft or creamy wax\", items: [] },\n          { main: \"Natural or organic wax\", items: [] }\n        ]\n      },\n      {\n        name: \"Shower Gel\",\n        subcategories: [\n          { main: \"According to skin type\", items: [\"For dry skin\", \"For oily skin\", \"For sensitive skin\", \"For normal\/combination skin\"] },\n          { main: \"According to purpose or effect\", items: [\"Moisturizing\", \"Refreshing\", \"Antibacterial\", \"Fragranced\", \"Post-workout\"] }\n        ]\n      },\n      {\n        name: \"Conditioner\",\n        subcategories: [\n          { main: \"Types of conditioners based on primary function\", items: [] },\n          { main: \"Types of conditioners based on usage method\", items: [] },\n          { main: \"Types of conditioners based on hair type\", items: [] }\n        ]\n      },\n      {\n        name: \"Body Splash\",\n        subcategories: [\n          { main: \"Body splash\", items: [] },\n          { main: \"Body mist\", items: [] },\n          { main: \"Hair mist\", items: [] }\n        ]\n      }\n    ];\n\n    const selectorsContainer = document.getElementById('productSelectors');\n    const selectedProductsContainer = document.getElementById('selected-products');\n\n    \/\/ \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0642\u0648\u0627\u0626\u0645\n    productCategories.forEach(category => {\n      const div = document.createElement('div');\n      div.className = 'category-box';\n\n      const optionsHTML = category.subcategories.map(sub => `<option value='${sub.main}'>${sub.main}<\/option>`).join('');\n      div.innerHTML = `\n        <label>${category.name}<\/label>\n        <select data-category=\"${category.name}\">\n          <option value=\"\">-- Select --<\/option>\n          ${optionsHTML}\n        <\/select>\n      `;\n      selectorsContainer.appendChild(div);\n    });\n\n    \/\/ \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631\n    document.querySelectorAll('select').forEach(select => {\n      select.addEventListener('change', function () {\n        const selectedMainCategory = this.value;\n\n        if (!selectedMainCategory) {\n          selectedProductsContainer.innerHTML = 'No products selected.';\n          return;\n        }\n\n        const categoryName = this.closest('.category-box')?.querySelector('label')?.textContent;\n        const categoryGroup = productCategories.find(cat => cat.name === categoryName);\n        const subCategory = categoryGroup?.subcategories.find(sub => sub.main === selectedMainCategory);\n\n        if (subCategory && subCategory.items.length > 0) {\n          let html = `\n            <strong style=\"color: #92278f; display: block; margin-bottom: 10px;\">Category: ${categoryName}<\/strong>\n            <strong>Subcategory: ${selectedMainCategory}<\/strong><ul>`;\n          subCategory.items.forEach(item => {\n            html += `<li style=\"color: #333;\">${item}<\/li>`;\n          });\n          html += `<\/ul>`;\n          selectedProductsContainer.innerHTML = html;\n        } else {\n          selectedProductsContainer.innerHTML = `\n            <strong style=\"color: #92278f;\">Category: ${categoryName}<\/strong><br>\n            <strong>Subcategory: ${selectedMainCategory}<\/strong><br><br>\n            <p style=\"color: #333; margin: 0;\">No subproducts found for \"${selectedMainCategory}\".<\/p>\n          `;\n        }\n      });\n    });\n\n    \/\/ \u0632\u0631 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u0639\u064a\u064a\u0646\n    document.getElementById('resetBtn').addEventListener('click', () => {\n      selectedProductsContainer.innerHTML = 'No products selected.';\n      document.querySelectorAll('select').forEach(select => {\n        select.selectedIndex = 0;\n      });\n    });\n  <\/script>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Explore UGC Premium Products Products At United Group Cosmetics (UGC), we understand that choosing the right product can make all the difference. That\u2019s why we\u2019ve designed this easy-to-use interface to help you explore our wide range of products by category and purpose. Simply select a product type from the menu, choose your preferred subcategory, and [&hellip;]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1077","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ugcegypt.com\/ar\/wp-json\/wp\/v2\/pages\/1077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ugcegypt.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ugcegypt.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ugcegypt.com\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ugcegypt.com\/ar\/wp-json\/wp\/v2\/comments?post=1077"}],"version-history":[{"count":62,"href":"https:\/\/ugcegypt.com\/ar\/wp-json\/wp\/v2\/pages\/1077\/revisions"}],"predecessor-version":[{"id":3315,"href":"https:\/\/ugcegypt.com\/ar\/wp-json\/wp\/v2\/pages\/1077\/revisions\/3315"}],"wp:attachment":[{"href":"https:\/\/ugcegypt.com\/ar\/wp-json\/wp\/v2\/media?parent=1077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}