/* Display one product per row on mobile */
@media only screen and (max-width: 768px){
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product{
        width: 100% !important;
        clear: none!important;
    }    
}
/* ================================
   FINAL POLISHED MOBILE NAVIGATION ACCORDION
   Works with wp-block-navigation
   ================================ */
@media (max-width: 500px) {

  /* -------------------------------
     Mobile menu container
  ---------------------------------*/
  .wp-block-navigation__responsive-container {
    background: #ffffff;
    padding: 0 0 1rem 0; /* top spacing handled by first item */
    overflow: visible;
  }

  /* -------------------------------
     Push first top-level item down below close button
  ---------------------------------*/
  .wp-block-navigation__container > li:first-child {
    padding-top: 2rem; /* reliable spacing for first item */
  }

  /* -------------------------------
     Top-level menu items
  ---------------------------------*/
  .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    justify-content: flex-start;       /* text left */
    padding: 1.2rem 1.5rem;            /* consistent vertical spacing */
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    position: relative;                /* for absolute arrow */
    transition: background 0.2s ease;
  }

  .wp-block-navigation-item__content:hover {
    background: #f8f8f8;
  }

  /* Add right padding for arrow space */
  .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
    padding-right: 2.5rem;
  }

  /* Add border between top-level items except last one */
  .wp-block-navigation__container > li > .wp-block-navigation-item__content {
    border-bottom: 1px solid #e0e0e0;
  }
  .wp-block-navigation__container > li:last-child > .wp-block-navigation-item__content {
    border-bottom: none;
  }

  /* Make top-level menu text bigger */
  .wp-block-navigation__container > li > .wp-block-navigation-item__content > .wp-block-navigation-item__label {
    font-size: 1.4rem;   /* bigger main text */
    font-weight: 400;    /* slightly bold */
    line-height: 1.2;
  }

  /* -------------------------------
     Submenu items
  ---------------------------------*/
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.2rem 1.5rem;            /* consistent vertical spacing */
    font-size: 1.05rem;                /* smaller than main text */
    line-height: 1.3;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #f9f9f9;
    cursor: pointer;
    position: relative;                /* for arrow */
    transition: background 0.2s ease;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: #f0f0f0;
  }

  /* Add padding for arrow in submenu items */
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
    padding-right: 2.5rem;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item__content > span {
    display: block;
  }

  /* -------------------------------
     Submenu accordion toggle
  ---------------------------------*/
  .wp-block-navigation-item.wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
    display: none;
    padding-left: 0;
    margin-top: 0.25rem;
  }

  .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    display: block;
  }

  /* -------------------------------
     Arrows for top-level and submenu items
  ---------------------------------*/
  .wp-block-navigation-submenu__toggle::after,
  .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle::after {
    content: "▾";                        /* down arrow */
    position: absolute;                  /* absolute positioning */
    right: 1rem;                         /* align to right */
    top: 50%;                            /* vertically center */
    transform: translateY(-50%);
    font-size: 1.6rem;                   /* bigger arrow */
    color: #066ec9;
    pointer-events: none;                /* arrow does not block clicks */
    transition: transform 0.3s ease;
  }

  /* Rotate arrow when submenu opens */
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after,
  .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* -------------------------------
     Touch-friendly tap areas
  ---------------------------------*/
  .wp-block-navigation-item {
    min-height: 48px;
  }

  /* Remove hover effect on mobile submenus */
  .wp-block-navigation__container li:hover > ul {
    display: none;
  }

  /* -------------------------------
     Sticky close button
  ---------------------------------*/
  .wp-block-navigation__responsive-close {
    top: 0;
    z-index: 20;
    background: #ffffff;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
  }

  .wp-block-navigation__responsive-container-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #c62828;
    border: none;
    cursor: pointer;
  }

  .wp-block-navigation__responsive-container-close svg {
    fill: #ffffff;
    width: 20px;
    height: 20px;
  }

  .wp-block-navigation__responsive-container-close:hover {
    background: #b71c1c;
  }

  .wp-block-navigation__responsive-container-close:active {
    transform: scale(0.95);
  }

}