footer  {
        
    padding: 1rem;
    
    }
    
    .footer-bar  {

 display: grid; 
  grid-template-columns: auto auto; 
  grid-template-rows: auto auto auto; 
  padding: 4rem 1rem 2rem 1rem;
  gap: 1rem; 
   grid-template-areas: 
    "customer-support-menu shop-categories"
    "shop-information-menu social-media"
    "footer-subscribe footer-subscribe"; 
}

}
.footer-menu-support { grid-area: customer-support-menu; }
.footer-menu-products { grid-area: shop-categories; }
.footer-menu-info { grid-area: shop-information-menu; }
.footer-menu-support.social-icons { grid-area: social-media; }
.footer-subscribe { grid-area: footer-subscribe; }

@media (min-width: 1024px) {
 


.footer-bar  {

display: grid; 
 
   grid-template-columns: repeat(4,1fr);
  grid-template-rows: auto auto; 
  justify-items: left;
  max-width: 1440px;
  margin: 0 auto;
  gap: 1rem; 
  padding: 6rem 0rem 3rem 0rem;
   grid-template-areas: 
    "customer-support-menu shop-categories shop-information-menu social-media"
    "customer-support-menu shop-categories shop-information-menu footer-subscribe"; 
}
.footer-menu-support { grid-area: customer-support-menu; }
.footer-menu-products { grid-area: shop-categories; }
.footer-menu-info { grid-area: shop-information-menu; }
.footer-menu-support.social-icons { grid-area: social-media; }
.footer-subscribe { grid-area: footer-subscribe; }

}


    
    
    .footer-bar ul   {
        
    padding-left: 0;
    line-height: 1.5;
    display: grid;
    row-gap: 0.5rem;
    
    }
    
    .footer-bar li a {
    
    color: var(--grey-primary);
    text-wrap: balance;
    display: block;
    
    }
    
    .footer-bar li  {
    
    list-style: none;
    
    }
    
    .footer-bar h4  {
    
    color: #3b3b3c;
    margin-bottom: 1rem;
    font-size: 1.15rem;
    
    }
    
    
     .footer-subscribe .woorule-subscribe form {  display: grid;
  grid-template-columns: 2.5fr 1fr;
  grid-template-rows: auto auto auto auto;
  row-gap: 0rem;
  margin-top: 1rem;
  grid-auto-rows: auto 1rem auto 0.5rem auto;
  column-gap: 1rem;
   grid-auto-flow: row;
  grid-template-areas:
    "heading heading"
    "subheading subheading"
    "input submit"
    "checkbox checkbox";
}

.heading { grid-area: heading; }

.woorule-subtitle { grid-area: subheading; }

.input { grid-area: input; }

.submit { grid-area: submit; }
.checkbox { grid-area: checkbox; }

.footer-subscribe label.form_elem  {
    
grid-area:heading;
font-size: 18px;
font-weight: 500;
padding: 0;

}



.footer-subscribe .woorule-subscribe input[type="text"]  {
    
background-color: white;
border-radius: 0.5rem;
border: 1px solid #777;
margin: 0;
}


.footer-subscribe .woorule-subscribe input[type="submit"] {
    
grid-area: submit;
padding: 0.75rem 0.5rem;
border-radius: 0.5rem;
border: 1px solid #777;
background-color: #d8eff6;
margin: 0;
    
}

.woorule-subscribe label {
    
grid-area: checkbox;
font-weight: 400;
display: inline-flex;
place-items: center;
padding: 0.5rem 0;
 gap: 0;
 
}

.footer-subscribe .woorule-subscribe input[type="checkbox"] {
    
width: 1.25rem;
height: 1.25rem;
border-radius: 0.5rem;
accent-color: #47819e;
margin: 0 1rem 0 0;

}

.footer-subscribe .woorule-subtitle  {
    
margin-bottom: 1.5rem;

}   
    
    .footer-last  {
        
    display: grid;
    grid-template-columns: auto;
    gap: 1rem;
    padding: 2rem 0 1rem 0;
    place-items: center;
    
    }
    
        @media (min-width: 800px)  {
        
     .footer-last  {    
        
    display: grid;
    grid-template-columns: 1fr  1fr 1fr;
    grid-template-rows: 1fr 1fr; 
    gap: 1rem;
    place-items: center;
    padding: 2rem 0 1rem 0;
   grid-template-areas: 
    "language-switcher language-switcher language-switcher"
    "copyright trustpilot-footer payment-icons"; 
}

.footer-last .selector-wrapper { grid-area: language-switcher; }
.footer-last .copyright { grid-area: copyright; }
.footer-last .trustpilot-widget { grid-area: trustpilot-footer; }
.footer-last .payment-icons { grid-area: payment-icons; }
  
        
    }   
    
    
.footer-last .selector-wrapper {
      position: relative;
      overflow: visible;
      z-index: 10;
      overflow-anchor: none;
     
    
    
     
      
  /* ADD: stop flex stretching & size to content */
  flex: 0 0 auto;            /* don't grow inside a flex parent */
  width: max-content;        /* shrink to fit the button */
  max-width: 100%;           /* clamp on tiny screens */
  align-self: flex-start;    /* avoid cross-axis stretch if parent is flex */

     
    }
    
  
.footer-last .selector-button {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px !important;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.2s;
      min-width: 160px;
    }

.footer-last .selector-button:hover {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

.footer-last .selector-button svg {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }

.footer-last .selector-button span {
      flex: 1;
      font-size: 15px;
      color: #374151;
      font-weight: 500;
    }

.footer-last .chevron {
      width: 20px;
      height: 20px;
      color: #6b7280;
      transition: transform 0.2s;
    }

.footer-last .selector-button.open .chevron {
      transform: rotate(180deg);
    }

   /* === MENU (in-flow) === */
.footer-last .lang-menu {
  /* display: block; */                 /* keep Bootstrap from hiding it */
  margin-top: 8px;                /* space under the button */
  margin-bottom: 0; 
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
   
  /* in-flow collapse */
  max-height: 0;                  /* collapsed */
  overflow: hidden;               /* clip while collapsed/animating */
  opacity: 0; 
  width: 100%; /* fade in */
  padding-block: 0;               /* no vertical padding when closed */
  pointer-events: none;           /* don’t capture clicks when closed */
  scroll-margin-top: 16px;
  scroll-margin-block-end: 16px;
   --vpad: 8px;

  /* smooth open/close */
 
    transition:
  max-height 250ms ease,
  opacity 200ms ease,
  padding 200ms ease,
  margin-bottom 200ms ease;
  /* helps scrollIntoView not tuck under sticky headers */
  
}

/* when open */
.footer-last .lang-menu.open {
  /* JS will set --menu-h to the exact content height; 400px is a safe fallback */
  max-height: calc(var(--menu-h, 400px) + (var(--vpad) * 2));
  opacity: 1;
  padding-block: var(--vpad);            /* restore vertical padding */
  pointer-events: auto;
  margin-bottom: 16px;  

}


.footer-last .language-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      cursor: pointer;
     transition: background 0.15s;
      text-decoration: none;
      color: inherit;
    }

.footer-last .language-option:first-child {
      border-radius: 8px 8px 0 0;
    }

.footer-last .language-option:last-child {
      border-radius: 0 0 8px 8px;
    }
  
.footer-last  .language-option.is-current::after {
  content: "";
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex: 0 0 24px;

  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f2328'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.9647 14.9617L17.4693 7.44735L18.5307 8.50732L9.96538 17.0837L5.46967 12.588L6.53033 11.5273L9.9647 14.9617Z'/%3E%3C/svg%3E");
}



.footer-last .language-option:hover {
      background: #f3f4f6;
    }

.footer-last .language-option svg {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }

.footer-last .language-option span {
      font-size: 15px;
      color: #374151;
    }