<header id="header" class="fixed top-0 w-full z-[1000001] bg-white"> {% if is_active_sidebar( 'header-top' ) %} <section id="header-top"> {{ dynamic_sidebar('header-top') }} </section> {% endif %} <div class="flex flex-row justify-between items-center max-w-screen-2xl mx-auto lg:px-20 px-5 py-4"> <a href="{{ home_url }}" class="max-w-7xl" aria-label="{{ bloginfo.name }}"> <img src="{{ asset('build/img/logo.png') }}" alt="Logo {{ bloginfo.name }}" loading="lazy" class="w-64 h-auto"> </a> <div class="flex flex-row items-center gap-4 lg:gap-10 xl:gap-20"> {% if menu.header|default() and menu.header.items|length %} <div class="lg:flex flex-row gap-7 hidden"> {% for item in menu.header.items|default() %} <div class="group relative {{ item.class }}"> <a href="{{ item.link }}" target="{{ item.target }}" {% if item.xfn|default %}rel="{{ item.xfn }}"{% endif %} class="{% if item.children|length %} flex flex-row items-center gap-2 {% endif %} text-black block text-sm group transition-all duration-300 ease-in-out uppercase"> <span class="{% if not item.children|length %} pb-[2px] {% endif %} bg-left-bottom bg-gradient-to-r from-primary to-primary bg-[length:0%_1px] bg-no-repeat group-hover:bg-[length:100%_1px] transition-all duration-500 ease-out">{{ item.title }}</span> {% if item.children|length %} <div class="group-hover:rotate-180 transition-all duration-500 ease-in-out"> {% include 'assets/arrow-down.svg' %} </div> {% endif %} </a> {% if item.children|length %} <div class="pt-5 absolute w-max"> <div class="group-hover:flex flex-col gap-4 hidden bg-white py-4 px-2 rounded-2xl -translate-x-6"> {% for children in item.children|default() %} <div class="group/item relative {{ children.class }}"> <a href="{{ children.link }}" target="{{ children.target }}" {% if item.xfn|default %}rel="{{ item.xfn }}"{% endif %} class="flex flex-col justify-between px-4 space-y-3.5 h-full rounded-2xl text-black text-sm group transition-all duration-300 ease-in-out group-[.current_page_item]/item:font-bold uppercase"> <span>{{ children.title }}</span> </a> </div> {% endfor %} </div> </div> {% endif %} </div> {% endfor %} </div> {% endif %} <div class="flex justify-end"> <div class="group"> <a rel="nofollow" href="{{ fn('wc_get_cart_url') }}" class="relative flex flex-row items-center justify-center w-[50px] h-[40px]"> {% include 'assets/menu-cart.svg' %} <span id="cartContentsCount" class="bg-primary text-[10px] text-white absolute h-4 block top-0 right-[4px] min-w-[15px] text-center rounded-full z-[-1]"></span> </a> </div> <button data-modal-target="searchModal" class="px-3"> {% include 'assets/search.svg' %} <span class="sr-only">Abrir buscador</span> </button> </div> <button id="moreInfo" class="block lg:hidden"> {% include 'assets/menu.svg' %} <span class="sr-only">Abrir menú</span> </button> </div> </div> <div id="menuOpen" class="hidden fixed xl:absolute xl:hidden top-0 w-screen h-screen bg-[#00000060] z-10"> <div class="bg-white w-full xl:w-fit"> <div class="max-w-screen-2xl mx-auto h-screen px-5 lg:px-20 py-4 flex flex-col gap-16 lg:gap-32"> <div class="flex flex-row justify-between items-center"> <a href="{{ home_url }}"> <img src="{{ asset('build/img/logo.png') }}" alt="Logo mobile {{ bloginfo.name }}" loading="lazy" class="w-64 h-auto"> </a> <button id="menuClose"> {% include 'assets/close.svg' %} <span class="sr-only">Cerrar menú</span> </button> </div> {% if menu.header|default() and menu.header.items|length %} <div class="flex flex-col gap-10 overflow-auto max-h-[60vh]"> <div class="flex flex-col pb-52"> {% for item in menu.header.items|default() %} <div class="flex flex-col gap-3 justify-between border-b border-background py-4"> <div class="flex flex-row items-center gap-3 justify-between"> <a href="{{ item.link }}" target="{{ item.target }}" {% if item.xfn|default %}rel="{{ item.xfn }}"{% endif %} {% if item.children|length %} id="submenuChildrenOpen" {% endif %} class="text-black block text-base group uppercase w-full">{{ item.title }}</a> {% if item.children|length %} <a href="#" class="submenuOpen px-4 flex"> <i class="arrow-icon">{% include 'assets/arrow-down-mobile.svg' %}</i> </a> {% endif %} </div> {% if item.children|length %} <div class="submenu hidden flex flex-col gap-2 ps-4"> {% for item_children in item.children|default() %} <a href="{{ item_children.link }}" target="{{ item_children.target }}" {% if item.xfn|default %}rel="{{ item.xfn }}"{% endif %} class="text-black block text-sm group uppercase w-full">{{ item_children.title|raw }}</a> {% endfor %} </div> {% endif %} </div> {% endfor %} </div> </div> {% endif %} {% if is_active_sidebar( 'sidebar-mobile' ) %} <div class="absolute bottom-0 left-0 right-0 px-5 bg-white py-4 flex flex-col justify-between gap-2 pb-4 text-black z-100"> {{ dynamic_sidebar('sidebar-mobile') }} </div> {% endif %} </div> </div> </div> <div id="searchModal" tabindex="-1" style="margin:0;" aria-hidden="true" class="hidden fixed inset-0 z-50 w-full overflow-x-hidden overflow-y-auto h-[100dvh] justify-start items-start"> <div class="relative w-full h-auto z-50"> <button type="button" data-modal-hide="searchModal" class="fixed top-5 z-50 right-5 text-black bg-transparent text-sm p-1.5 ml-auto inline-flex items-center"> {% include 'assets/close.svg' %} <span class="sr-only">Cerrar modal</span> </button> <div class="relative bg-white shadow overflow-hidden max-h-full max-w-full m-auto p-6 2xl:px-20 space-y-6"> <span class="uppercase text-xl block text-center text-black">Encuentra tu producto</span> <div class="bg-gray-100 max-w-2xl m-auto rounded-lg border border-gray-100"> {{ shortcode('[aws_search_form id="1"]')|raw }} </div> </div> </div> <div class="hidden bg-gray-900 bg-opacity-90 fixed inset-0 z-40 overflow-hidden cursor-pointer" style="margin: 0;" data-modal-backdrop="searchModal"></div> </div></header>