/* --------------------------------------
   Container reset
-------------------------------------- */
.header,
#inner-header {
   width: 100%;
   background: #fff;
   position: relative;
   z-index: 100;
}
.container {
   width: 100%;
   max-width: 1600px;
   margin: 0 auto;
   padding-left: 15px;
   padding-right: 15px;
   box-sizing: border-box;
}

@media (min-width: 1600px) {
   .container {
      max-width: 1600px;
   }
}

@media (max-width: 767px) {
   .popup-content {
      display: block;
      padding: 1rem;
   }
   .popup-content h3 {
      margin-bottom: 0.75rem;
   }
   .upsell-item {
      flex: 1 1 100%;
      margin-bottom: 1rem;
   }

   .upsell-item:last-child {
       display: none;
   }
}

/* --------------------------------------
   OUTER HEADER (logo + social + cart/accounts)
-------------------------------------- */
.outer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 0;
}

.social-nav-container nav ul,
.user-nav-container nav ul {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
}

.social-nav-container nav li,
.user-nav-container nav li {
   margin-right: 20px;
}
.social-nav-container nav li:last-child,
.user-nav-container nav li:last-child {
   margin-right: 0;
}

.social-nav-container a,
.user-nav-container a {
   font-size: 2.2rem;
   color: #000;
   text-decoration: none;
}
.social-nav-container a {
  font-size: 2.2rem;
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* border: 2px solid transparent; */
  transition: all 0.3s ease;
  background-color: #fff; /* fix background to avoid jump */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* FACEBOOK HOVER */
.social-nav-container a.facebook:hover {
  color: #fff;
  background-color: #4267B2;
  border-color: #4267B2;
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(66, 103, 178, 0.4);
  line-height: 2.5;
  padding: 1rem;
}

/* INSTAGRAM HOVER */
.social-nav-container a.instagram:hover {
  color: #fff;
  background: radial-gradient(circle at 30% 107%, 
    #fdf497 0%, #fdf497 5%, 
    #fd5949 45%, #d6249f 60%, 
    #285AEB 90%);
  border-color: transparent;
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(221, 42, 123, 0.4);
  border-radius: 50%;
  padding: 1rem;
}

/* TIKTOK HOVER */
.social-nav-container a.tiktok:hover {
  color: #fff;
  background: linear-gradient(45deg, 
    #69C9D0 0%,    /* TikTok cián */
    #EE1D52 100%   /* TikTok pink */
  );
  border-color: transparent;
  transform: scale(1.1);
  /* kétszínű árnyék a glow-hatásért */
  box-shadow: 
    0 6px 15px rgba(105, 201, 208, 0.4),
    0 6px 15px rgba(238, 29, 82, 0.4);
  border-radius: 50%;
  padding: 1rem;
  line-height: 2.5;
}


/* logo in center of everything */
#logo {
   flex-shrink: 0;
}
#logo img {
   display: block;
   max-height: 140px;
}

#logo {
   margin: auto;
   justify-content: center;
   text-align: center;
}

div#logo a {
   display: flex;
   width: 100%;
   justify-content: center;
}

/* --------------------------------------
   INNER HEADER (main nav + centered logo)
-------------------------------------- */
.header-wrapper {
   max-width: 1600px;
   width: 100%;
}

#inner-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 20px;
}

@media (max-width: 1440px) {
   #inner-header,
   .outer-header.container {
      max-width: 1280px;
   }
}

.mainnav-container {
   flex: 1;
}

/* absolutely center the logo */
#logo {
   /* position: absolute; */
   /* left: 50%; */
   /* transform: translateX(-50%); */
   margin: auto;
   display: flex;
}

/* main menu list styling */
#main-navigation ul {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
}

#main-navigation li {
   margin-right: 40px;
}
#main-navigation li:last-child {
   margin-right: 0;
}

#main-navigation a {
   display: inline-block;
   font-size: 1.5rem;
   font-weight: 500;
   text-transform: uppercase;
   color: #000;
   text-decoration: none;
   padding: 10px 0;
   transition: color 0.2s;
}

/* underline the active/current page */
/* --------------------------------------
   MAIN NAV LINKS: ADD POSITION AND USE PSEUDO-ELEMENT INSTEAD OF FAKE BORDER
-------------------------------------- */
#main-navigation a {
   position: relative;
   display: inline-block;
   text-decoration: none;
   color: #000;
   padding-bottom: 0.25rem;
   transition: color 0.2s ease;
}

#main-navigation a::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   height: 2px;
   width: 0;
   background-color: #000;
   transition: width 0.3s ease;
}

/* 1.2. In hover state, increase the pseudo-element width to 100% */
#main-navigation a:hover::after,
#main-navigation .current-menu-item > a::after {
   width: 100%;
}

/* 1.3. On hover, the link color can also change, if you wish */
#main-navigation a:hover {
   color: #000;
}

/* --------------------------------------
   ICONS ON RIGHT
-------------------------------------- */
.user-nav-container nav ul li a {
   font-weight: 100;
}
.user-nav-container nav ul {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
}
.user-nav-container li {
   margin-left: 20px;
}
.user-nav-container nav li a {
   font-size: 1.5rem;
   font-weight: 100;
}

/* --------------------------------------
   HIDE DESKTOP HAMBURGER
-------------------------------------- */

.mobile-navigation {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background: #fff;
   overflow: hidden;
   transform-origin: top center;
   transform: scaleY(0);
   transition: transform 0.4s ease;
   z-index: 90;
}

/* desktop hamburger hidden */
.hamburger-container {
   display: none;
   cursor: pointer;
   z-index: 100;
}

/* --------------------------------------
   OPTIONAL: simple responsive fallback
-------------------------------------- */

@media (max-width: 991px) {
   /* hide the desktop navigation */
   #inner-header .mainnav-container,
   .social-nav-container {
      display: none;
   }
   /* show the hamburger icon */
   .hamburger-container {
      display: block;
   }
}

.mobile-navigation.open {
   transform: scaleY(1);
}

.hamburger-logo .line {
   display: block;
   width: 25px;
   height: 3px;
   margin: 5px 0;
   background: #000;
   transition: transform 0.3s ease, opacity 0.3s ease;
}

/* cross animation: move the first and third lines, hide the second line */
.hamburger-logo.is-active .line:nth-child(1) {
   transform: translateY(8px) rotate(45deg);
}
.hamburger-logo.is-active .line:nth-child(2) {
   opacity: 0;
}
.hamburger-logo.is-active .line:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg);
}

/* ==============================
   1. CART-CONTENTS Base style
   ============================== */
a.cart-contents {
   position: relative;
   display: inline-flex;
   align-items: center;
   color: inherit;
   text-decoration: none;
   transition: color 0.2s ease;
}

a.cart-contents:hover {
   color: #3498db;
}

.cart-count {
   display: inline-block;
   margin-left: 0.25rem;
   font-weight: 200;
   transition: transform 0.3s ease;
}

/* ==============================
   2. ANIMATION (bounce effect)
   ============================== */
.cart-contents.updated .cart-count {
   animation: ciyo-cart-bounce 0.4s ease forwards;
}

@keyframes ciyo-cart-bounce {
   0% {
      transform: scale(1);
   }
   30% {
      transform: scale(1.3);
   }
   60% {
      transform: scale(0.9);
   }
   100% {
      transform: scale(1);
   }
}

/* ==============================
   3. Responsive adjustment
   ============================== */
@media (max-width: 768px) {
   a.cart-contents {
      font-size: 1.1rem;
   }
   .cart-count {
      margin-left: 0.15rem;
   }
}

/* --------------------------------------
   MOBILE NAVIGATION (mobile menu display styles)
-------------------------------------- */

/* 2.1. Base element of the .mobile-navigation container: padding for menu items */
.mobile-navigation ul {
   list-style: none;
   margin: 0;
   padding: 1rem 0;
}

.mobile-navigation li {
   margin: 0;
}

.mobile-navigation li a {
   display: block;
   padding: 0.75rem 1.5rem;
   color: #000;
   text-decoration: none;
   font-size: 1.25rem;
   transition: background-color 0.2s ease, color 0.2s ease;
   font-weight: 500!important;
}

.mobile-navigation li a:hover {
   background-color: #f2f2f2;
   color: #000;
}

.mobile-navigation .current-menu-item > a {
   background-color: #e6e6e6;
   color: #000;
}

.mobile-navigation {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background: #fff;
   overflow: hidden;
   transform-origin: top center;
   transform: scaleY(0);
   transition: transform 0.4s ease;
   z-index: 90;
}

.mobile-navigation.open {
   transform: scaleY(1);
}

@media (max-width: 480px) {
   .mobile-navigation li a {
      font-size: 1.1rem;
      padding: 0.6rem 1.2rem;
   }
}

.outer-header.container {
   position: relative;
}

.header-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
}

.outer-header .social-nav-container {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
}

@media (max-width: 991px) {
   .outer-header .social-nav-container {
      right: 10px;
      font-size: 2rem;
   }
}

/* --------------------------------------
   MOBILE-SPECIFIC ADJUSTMENTS FOR #inner-header AND USER ICONS
-------------------------------------- */
@media (max-width: 991px) {
   #inner-header.container {
      padding-left: 15px;
      padding-right: 15px;
   }

   .user-nav-container nav ul li a {
      font-size: 1.2rem;
      padding: 0.3rem 0;
   }
   .user-nav-container li {
      margin-left: 12px;
   }

   a.cart-contents {
      font-size: 1rem;
   }
   .cart-count {
      margin-left: 0.15rem;
      font-size: 0.9rem;
   }

   .hamburger-container {
      margin-right: 15px;
   }
}

@media (max-width: 768px) {
   #inner-header.container {
      padding-left: 10px;
      padding-right: 10px;
   }
   .user-nav-container nav ul li a {
      font-size: 1.1rem;
   }
   a.cart-contents {
      font-size: 0.95rem;
   }
   .cart-count {
      font-size: 0.8rem;
   }
   .hamburger-container {
      margin-right: 10px;
   }
}

#main-navigation a::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   height: 2px;
   width: 0;
   background-color: #000;
   transition: width 0.3s ease;
}