diff --git a/vendor/magento/module-catalog/Plugin/Block/Topmenu.php b/vendor/magento/module-catalog/Plugin/Block/Topmenu.php
index b4aa5bd960b0..3a76c554aa08 100644
--- a/vendor/magento/module-catalog/Plugin/Block/Topmenu.php
+++ b/vendor/magento/module-catalog/Plugin/Block/Topmenu.php
@@ -12,13 +12,12 @@
 use Magento\Framework\Data\Tree\Node;
 
 /**
- * Plugin for top menu block
+ * Plugin that enhances the top menu block by building and managing the category tree
+ * for menu rendering in a storefront.
  */
 class Topmenu
 {
     /**
-     * Catalog category
-     *
      * @var \Magento\Catalog\Helper\Category
      */
     protected $catalogCategory;
@@ -33,29 +32,21 @@ class Topmenu
      */
     private $storeManager;
 
-    /**
-     * @var \Magento\Catalog\Model\Layer\Resolver
-     */
-    private $layerResolver;
-
     /**
      * Initialize dependencies.
      *
      * @param \Magento\Catalog\Helper\Category $catalogCategory
      * @param \Magento\Catalog\Model\ResourceModel\Category\StateDependentCollectionFactory $categoryCollectionFactory
      * @param \Magento\Store\Model\StoreManagerInterface $storeManager
-     * @param \Magento\Catalog\Model\Layer\Resolver $layerResolver
      */
     public function __construct(
         \Magento\Catalog\Helper\Category $catalogCategory,
         \Magento\Catalog\Model\ResourceModel\Category\StateDependentCollectionFactory $categoryCollectionFactory,
-        \Magento\Store\Model\StoreManagerInterface $storeManager,
-        \Magento\Catalog\Model\Layer\Resolver $layerResolver
+        \Magento\Store\Model\StoreManagerInterface $storeManager
     ) {
         $this->catalogCategory = $catalogCategory;
         $this->collectionFactory = $categoryCollectionFactory;
         $this->storeManager = $storeManager;
-        $this->layerResolver = $layerResolver;
     }
 
     /**
@@ -78,7 +69,6 @@ public function beforeGetHtml(
         $storeId = $this->storeManager->getStore()->getId();
         /** @var \Magento\Catalog\Model\ResourceModel\Category\Collection $collection */
         $collection = $this->getCategoryTree($storeId, $rootId);
-        $currentCategory = $this->getCurrentCategory();
         $mapping = [$rootId => $subject->getMenu()];  // use nodes stack to avoid recursion
         foreach ($collection as $category) {
             $categoryParentId = $category->getParentId();
@@ -97,7 +87,6 @@ public function beforeGetHtml(
             $categoryNode = new Node(
                 $this->getCategoryAsArray(
                     $category,
-                    $currentCategory,
                     $category->getParentId() == $categoryParentId
                 ),
                 'id',
@@ -132,39 +121,20 @@ public function beforeGetIdentities(\Magento\Theme\Block\Html\Topmenu $subject)
         }
     }
 
-    /**
-     * Get current Category from catalog layer
-     *
-     * @return \Magento\Catalog\Model\Category
-     */
-    private function getCurrentCategory()
-    {
-        $catalogLayer = $this->layerResolver->get();
-
-        if (!$catalogLayer) {
-            return null;
-        }
-
-        return $catalogLayer->getCurrentCategory();
-    }
-
     /**
      * Convert category to array
      *
-     * @param \Magento\Catalog\Model\Category $category
-     * @param \Magento\Catalog\Model\Category $currentCategory
+     * @param Category $category
      * @param bool $isParentActive
      * @return array
      */
-    private function getCategoryAsArray($category, $currentCategory, $isParentActive)
+    private function getCategoryAsArray($category, $isParentActive): array
     {
         $categoryId = $category->getId();
         return [
             'name' => $category->getName(),
             'id' => 'category-node-' . $categoryId,
             'url' => $this->catalogCategory->getCategoryUrl($category),
-            'has_active' => in_array((string)$categoryId, explode('/', (string)$currentCategory->getPath()), true),
-            'is_active' => $categoryId == $currentCategory->getId(),
             'is_category' => true,
             'is_parent_active' => $isParentActive
         ];
@@ -196,22 +166,4 @@ protected function getCategoryTree($storeId, $rootId)
 
         return $collection;
     }
-
-    /**
-     * Add active
-     *
-     * @param \Magento\Theme\Block\Html\Topmenu $subject
-     * @param string[] $result
-     * @return string[]
-     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
-     */
-    public function afterGetCacheKeyInfo(\Magento\Theme\Block\Html\Topmenu $subject, array $result)
-    {
-        $activeCategory = $this->getCurrentCategory();
-        if ($activeCategory) {
-            $result[] = Category::CACHE_TAG . '_' . $activeCategory->getId();
-        }
-
-        return $result;
-    }
 }
diff --git a/vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js b/vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js
index 670d91febe9f..2198549b2a1a 100644
--- a/vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js
+++ b/vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js
@@ -122,7 +122,7 @@ define([
         isFullscreen: false,
         FTCF: '[data-gallery-role="fotorama__fullscreen-icon"]',
         Base: 0, //on check for video is base this setting become true if there is any video with base role
-        MobileMaxWidth: 768,
+        MobileMaxWidth: 767,
         GP: 'gallery-placeholder', //gallery placeholder class is needed to find and erase <script> tag
         videoData: null,
         videoDataPlaceholder: [{
diff --git a/vendor/magento/module-theme/Block/Html/Topmenu.php b/vendor/magento/module-theme/Block/Html/Topmenu.php
index f8460b43ba2f..37a2149d2980 100644
--- a/vendor/magento/module-theme/Block/Html/Topmenu.php
+++ b/vendor/magento/module-theme/Block/Html/Topmenu.php
@@ -312,12 +312,6 @@ protected function _getMenuItemClasses(Node $item)
             $classes[] = 'first';
         }
 
-        if ($item->getIsActive()) {
-            $classes[] = 'active';
-        } elseif ($item->getHasActive()) {
-            $classes[] = 'has-active';
-        }
-
         if ($item->getIsLast()) {
             $classes[] = 'last';
         }
diff --git a/vendor/magento/theme-frontend-blank/etc/view.xml b/vendor/magento/theme-frontend-blank/etc/view.xml
index 726d21af9d4c..918931ade9ae 100644
--- a/vendor/magento/theme-frontend-blank/etc/view.xml
+++ b/vendor/magento/theme-frontend-blank/etc/view.xml
@@ -232,7 +232,7 @@
         <var name="breakpoints">
             <var name="mobile">
                 <var name="conditions">
-                    <var name="max-width">768px</var>
+                    <var name="max-width">767px</var>
                 </var>
                 <var name="options">
                     <var name="options">
diff --git a/vendor/magento/theme-frontend-luma/etc/view.xml b/vendor/magento/theme-frontend-luma/etc/view.xml
index 64a6993f9c57..9b9e34b3d054 100644
--- a/vendor/magento/theme-frontend-luma/etc/view.xml
+++ b/vendor/magento/theme-frontend-luma/etc/view.xml
@@ -238,7 +238,7 @@
         <var name="breakpoints">
             <var name="mobile">
                 <var name="conditions">
-                    <var name="max-width">768px</var>
+                    <var name="max-width">767px</var>
                 </var>
                 <var name="options">
                     <var name="options">
diff --git a/lib/web/css/source/lib/_responsive.less b/lib/web/css/source/lib/_responsive.less
index 32c9e257307a..efb706f85eac 100644
--- a/lib/web/css/source/lib/_responsive.less
+++ b/lib/web/css/source/lib/_responsive.less
@@ -27,11 +27,11 @@
 
 & when (@media-target = 'mobile'), (@media-target = 'all') {
 
-    @media only screen and (max-width: (@screen__m + 1)) {
+    @media only screen and (max-width: @screen__m) {
         .media-width('max', (@screen__m + 1));
     }
 
-    @media only screen and (max-width: @screen__m) {
+    @media only screen and (max-width: (@screen__m - 1)) {
         .media-width('max', @screen__m);
     }
 
@@ -59,14 +59,14 @@
 
 & when (@media-target = 'desktop'), (@media-target = 'all') {
 
-    @media all and (min-width: (@screen__m + 1)),
+    @media all and (min-width: @screen__m),
     print {
-        .media-width('min', (@screen__m + 1));
+        .media-width('min', @screen__m);
     }
 
     @media all and (min-width: (@screen__m + 1)),
     print {
-        .media-width('min', (@screen__m));
+        .media-width('min', (@screen__m + 1));
     }
 
     @media all and (min-width: @screen__l),
diff --git a/lib/web/mage/menu.js b/lib/web/mage/menu.js
index ed958adf3364..65cd26a13332 100644
--- a/lib/web/mage/menu.js
+++ b/lib/web/mage/menu.js
@@ -16,12 +16,13 @@ define([
      */
     $.widget('mage.menu', $.ui.menu, {
         options: {
+            categoryLayoutClass: 'catalog-product-view',
             responsive: false,
             expanded: false,
             showDelay: 42,
             hideDelay: 300,
             delay: 0,
-            mediaBreakpoint: '(max-width: 768px)'
+            mediaBreakpoint: '(max-width: 767px)'
         },
 
         /**
@@ -146,7 +147,7 @@ define([
             } else if (!activeCategoryLink.parent().hasClass('active')) {
                 activeCategoryLink.parent().addClass('active');
                 classes = activeCategoryLink.parent().attr('class');
-                classNav = classes.match(/(nav\-)[0-9]+(\-[0-9]+)+/gi);
+                classNav = classes.match(/(nav-)[0-9]+(-[0-9]+)+/gi);
 
                 if (classNav) {
                     this._setActiveParent(classNav[0]);
@@ -182,35 +183,84 @@ define([
         },
 
         /**
-         * Tries to retrieve category URL from current URL and mark this category as active
-         * @see _setActiveMenuForCategory(url)
+         * Extracts the URL extension from the given URL.
+         * It identifies the last segment of the URL after the last slash ('/')
+         * and returns the substring after the last dot ('.')
+         * If there's no dot in the last segment, it returns an empty string.
          *
-         * @example
-         *  currentUrl - http://magento.com/category1/category12/product.html,
-         *  category URLs has extensions .phtml - http://magento.com/category1.phtml
-         *  method sets active category which has URL http://magento.com/category1/category12.phtml
+         * @param {String} url - The URL from which to extract the extension.
+         * @return {String} The extracted URL extension or an empty string if no extension is found.
+         * @private
+         */
+        _getUrlExtension: function (url) {
+            var lastSegment = url.slice(url.lastIndexOf('/') + 1);
+
+            return lastSegment.includes('.') ? lastSegment.slice(lastSegment.lastIndexOf('.')) : '';
+        },
+
+        /**
+         * Determines if the current page is a product page.
+         * It checks the catalog product view related class in the body tag of the document.
+         *
+         * @return {Boolean} True if the current page is a product page, false otherwise.
+         * @private
+         */
+        _isProductPage: function () {
+            return document.body.classList.contains(this.options.categoryLayoutClass);
+        },
+
+        /**
+         * Sets the active state in the menu for a product page. Determines the category URL from either
+         * the referrer URL or the current URL, using the URL extension to identify the category.
+         * Sets the corresponding category as active in the menu if a valid category URL is found.
+         * Clears the active state if no valid category URL is found or if it's not a product page.
          *
-         * @param {String} currentUrl - current page URL without parameters
+         * @param {String} currentUrl - The current page URL without parameters.
          * @return void
          * @private
          */
         _setActiveMenuForProduct: function (currentUrl) {
-            var categoryUrlExtension,
-                lastUrlSection,
-                possibleCategoryUrl,
-                //retrieve first category URL to know what extension is used for category URLs
-                firstCategoryUrl = this.element.find('> li a').attr('href');
-
-            if (firstCategoryUrl) {
-                lastUrlSection = firstCategoryUrl.substr(firstCategoryUrl.lastIndexOf('/'));
-                categoryUrlExtension = lastUrlSection.lastIndexOf('.') !== -1 ?
-                    lastUrlSection.substr(lastUrlSection.lastIndexOf('.')) : '';
-
-                possibleCategoryUrl = currentUrl.substr(0, currentUrl.lastIndexOf('/')) + categoryUrlExtension;
-                this._setActiveMenuForCategory(possibleCategoryUrl);
+            var firstCategoryUrl = this.element.find('> li a').attr('href'),
+                categoryUrlExtension,
+                categoryUrl,
+                isProductPage,
+                currentHostname;
+
+            if (!firstCategoryUrl) {
+                this._clearActiveState();
+                return;
+            }
+
+            categoryUrlExtension = this._getUrlExtension(firstCategoryUrl);
+            isProductPage = this._isProductPage();
+
+            if (isProductPage) {
+                currentHostname = window.location.hostname;
+
+                if (document.referrer.includes(currentHostname) && document.referrer.endsWith(categoryUrlExtension)) {
+                    categoryUrl = document.referrer.split('?')[0];
+                } else {
+                    categoryUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/')) + categoryUrlExtension;
+                }
+
+                this._setActiveMenuForCategory(categoryUrl);
+            } else {
+                this._clearActiveState();
             }
         },
 
+        /**
+         * Clears the active state from all menu items within the navigation element.
+         * It removes 'active' and 'has-active' classes from all list items (li elements),
+         * which are used to indicate the currently selected or parent of a selected item.
+         *
+         * @return void
+         * @private
+         */
+        _clearActiveState: function () {
+            this.element.find('li').removeClass('active has-active');
+        },
+
         /**
          * Add class for expanded option.
          */
@@ -243,172 +293,172 @@ define([
              * @param {String} value
              */
             function escape(value) {
-                return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
+                return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
             }
 
             if (this.active.closest(this.options.menus).attr('aria-expanded') != 'true') { //eslint-disable-line eqeqeq
 
                 switch (event.keyCode) {
-                    case $.ui.keyCode.PAGE_UP:
-                        this.previousPage(event);
-                        break;
-
-                    case $.ui.keyCode.PAGE_DOWN:
-                        this.nextPage(event);
-                        break;
+                case $.ui.keyCode.PAGE_UP:
+                    this.previousPage(event);
+                    break;
 
-                    case $.ui.keyCode.HOME:
-                        this._move('first', 'first', event);
-                        break;
+                case $.ui.keyCode.PAGE_DOWN:
+                    this.nextPage(event);
+                    break;
 
-                    case $.ui.keyCode.END:
-                        this._move('last', 'last', event);
-                        break;
+                case $.ui.keyCode.HOME:
+                    this._move('first', 'first', event);
+                    break;
 
-                    case $.ui.keyCode.UP:
-                        this.previous(event);
-                        break;
+                case $.ui.keyCode.END:
+                    this._move('last', 'last', event);
+                    break;
 
-                    case $.ui.keyCode.DOWN:
-                        if (this.active && !this.active.is('.ui-state-disabled')) {
-                            this.expand(event);
-                        }
-                        break;
-
-                    case $.ui.keyCode.LEFT:
-                        this.previous(event);
-                        break;
-
-                    case $.ui.keyCode.RIGHT:
-                        this.next(event);
-                        break;
-
-                    case $.ui.keyCode.ENTER:
-                    case $.ui.keyCode.SPACE:
-                        this._activate(event);
-                        break;
-
-                    case $.ui.keyCode.ESCAPE:
-                        this.collapse(event);
-                        break;
-                    default:
-                        preventDefault = false;
-                        prev = this.previousFilter || '';
-                        character = String.fromCharCode(event.keyCode);
-                        skip = false;
+                case $.ui.keyCode.UP:
+                    this.previous(event);
+                    break;
 
-                        clearTimeout(this.filterTimer);
+                case $.ui.keyCode.DOWN:
+                    if (this.active && !this.active.is('.ui-state-disabled')) {
+                        this.expand(event);
+                    }
+                    break;
+
+                case $.ui.keyCode.LEFT:
+                    this.previous(event);
+                    break;
+
+                case $.ui.keyCode.RIGHT:
+                    this.next(event);
+                    break;
+
+                case $.ui.keyCode.ENTER:
+                case $.ui.keyCode.SPACE:
+                    this._activate(event);
+                    break;
+
+                case $.ui.keyCode.ESCAPE:
+                    this.collapse(event);
+                    break;
+                default:
+                    preventDefault = false;
+                    prev = this.previousFilter || '';
+                    character = String.fromCharCode(event.keyCode);
+                    skip = false;
+
+                    clearTimeout(this.filterTimer);
+
+                    if (character === prev) {
+                        skip = true;
+                    } else {
+                        character = prev + character;
+                    }
 
-                        if (character === prev) {
-                            skip = true;
-                        } else {
-                            character = prev + character;
-                        }
+                    regex = new RegExp('^' + escape(character), 'i');
+                    match = this.activeMenu.children('.ui-menu-item').filter(function () {
+                        return regex.test($(this).children('a').text());
+                    });
+                    match = skip && match.index(this.active.next()) !== -1 ?
+                        this.active.nextAll('.ui-menu-item') :
+                        match;
 
+                    // If no matches on the current filter, reset to the last character pressed
+                    // to move down the menu to the first item that starts with that character
+                    if (!match.length) {
+                        character = String.fromCharCode(event.keyCode);
                         regex = new RegExp('^' + escape(character), 'i');
                         match = this.activeMenu.children('.ui-menu-item').filter(function () {
                             return regex.test($(this).children('a').text());
                         });
-                        match = skip && match.index(this.active.next()) !== -1 ?
-                            this.active.nextAll('.ui-menu-item') :
-                            match;
-
-                        // If no matches on the current filter, reset to the last character pressed
-                        // to move down the menu to the first item that starts with that character
-                        if (!match.length) {
-                            character = String.fromCharCode(event.keyCode);
-                            regex = new RegExp('^' + escape(character), 'i');
-                            match = this.activeMenu.children('.ui-menu-item').filter(function () {
-                                return regex.test($(this).children('a').text());
-                            });
-                        }
+                    }
 
-                        if (match.length) {
-                            this.focus(event, match);
+                    if (match.length) {
+                        this.focus(event, match);
 
-                            if (match.length > 1) {
-                                this.previousFilter = character;
-                                this.filterTimer = this._delay(function () {
-                                    delete this.previousFilter;
-                                }, 1000);
-                            } else {
+                        if (match.length > 1) {
+                            this.previousFilter = character;
+                            this.filterTimer = this._delay(function () {
                                 delete this.previousFilter;
-                            }
+                            }, 1000);
                         } else {
                             delete this.previousFilter;
                         }
+                    } else {
+                        delete this.previousFilter;
+                    }
                 }
             } else {
                 switch (event.keyCode) {
-                    case $.ui.keyCode.DOWN:
-                        this.next(event);
-                        break;
-
-                    case $.ui.keyCode.UP:
-                        this.previous(event);
-                        break;
+                case $.ui.keyCode.DOWN:
+                    this.next(event);
+                    break;
 
-                    case $.ui.keyCode.RIGHT:
-                        if (this.active && !this.active.is('.ui-state-disabled')) {
-                            this.expand(event);
-                        }
-                        break;
-
-                    case $.ui.keyCode.ENTER:
-                    case $.ui.keyCode.SPACE:
-                        this._activate(event);
-                        break;
-
-                    case $.ui.keyCode.LEFT:
-                    case $.ui.keyCode.ESCAPE:
-                        this.collapse(event);
-                        break;
-                    default:
-                        preventDefault = false;
-                        prev = this.previousFilter || '';
-                        character = String.fromCharCode(event.keyCode);
-                        skip = false;
+                case $.ui.keyCode.UP:
+                    this.previous(event);
+                    break;
 
-                        clearTimeout(this.filterTimer);
+                case $.ui.keyCode.RIGHT:
+                    if (this.active && !this.active.is('.ui-state-disabled')) {
+                        this.expand(event);
+                    }
+                    break;
+
+                case $.ui.keyCode.ENTER:
+                case $.ui.keyCode.SPACE:
+                    this._activate(event);
+                    break;
+
+                case $.ui.keyCode.LEFT:
+                case $.ui.keyCode.ESCAPE:
+                    this.collapse(event);
+                    break;
+                default:
+                    preventDefault = false;
+                    prev = this.previousFilter || '';
+                    character = String.fromCharCode(event.keyCode);
+                    skip = false;
+
+                    clearTimeout(this.filterTimer);
+
+                    if (character === prev) {
+                        skip = true;
+                    } else {
+                        character = prev + character;
+                    }
 
-                        if (character === prev) {
-                            skip = true;
-                        } else {
-                            character = prev + character;
-                        }
+                    regex = new RegExp('^' + escape(character), 'i');
+                    match = this.activeMenu.children('.ui-menu-item').filter(function () {
+                        return regex.test($(this).children('a').text());
+                    });
+                    match = skip && match.index(this.active.next()) !== -1 ?
+                        this.active.nextAll('.ui-menu-item') :
+                        match;
 
+                    // If no matches on the current filter, reset to the last character pressed
+                    // to move down the menu to the first item that starts with that character
+                    if (!match.length) {
+                        character = String.fromCharCode(event.keyCode);
                         regex = new RegExp('^' + escape(character), 'i');
                         match = this.activeMenu.children('.ui-menu-item').filter(function () {
                             return regex.test($(this).children('a').text());
                         });
-                        match = skip && match.index(this.active.next()) !== -1 ?
-                            this.active.nextAll('.ui-menu-item') :
-                            match;
-
-                        // If no matches on the current filter, reset to the last character pressed
-                        // to move down the menu to the first item that starts with that character
-                        if (!match.length) {
-                            character = String.fromCharCode(event.keyCode);
-                            regex = new RegExp('^' + escape(character), 'i');
-                            match = this.activeMenu.children('.ui-menu-item').filter(function () {
-                                return regex.test($(this).children('a').text());
-                            });
-                        }
+                    }
 
-                        if (match.length) {
-                            this.focus(event, match);
+                    if (match.length) {
+                        this.focus(event, match);
 
-                            if (match.length > 1) {
-                                this.previousFilter = character;
-                                this.filterTimer = this._delay(function () {
-                                    delete this.previousFilter;
-                                }, 1000);
-                            } else {
+                        if (match.length > 1) {
+                            this.previousFilter = character;
+                            this.filterTimer = this._delay(function () {
                                 delete this.previousFilter;
-                            }
+                            }, 1000);
                         } else {
                             delete this.previousFilter;
                         }
+                    } else {
+                        delete this.previousFilter;
+                    }
                 }
             }