/* ══════════════════════════════════════════════════════════════════
   AUTHLETICWEAR V2 — HEADER REORDER + MOBILE MENU REVERT + FOOTER WORDMARK
   
   Loaded after redesign-v2.css AND redesign-v2-additions.css so it
   can override both the original dark header AND the previous light
   override that was also in the additions file.
   
   Everything scoped to `body.v2-active`. Non-V2 sites are untouched.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   DESKTOP HEADER (≥ 992 px) — Carpatree / Stronger layout:
   Logo LEFT  •  Menu CENTER  •  Icons (search, wishlist, cart) RIGHT
   
   The existing grid on .header-general uses 3 tracks; we place each
   column explicitly with grid-column so DOM order doesn't matter.
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {

   /* Widen the centre track so the menu has room; narrow the sides */
   body.v2-active .header-general {
      grid-template-columns: 22% 56% 22%;
      padding: 0 28px;
      padding-right: 28px;
   }

   /* ── Column 1: LOGO ── */
   body.v2-active .header-general .logo.column-header {
      grid-column: 1;
      justify-content: flex-start;
      order: -1;
   }

   body.v2-active .header-general .logo.column-header a {
      display: inline-flex;
   }

   body.v2-active .logo-general {
      max-width: 140px;
   }

   /* ── Column 2: MENU (centered) ── */
   body.v2-active .header-general .search-header.column-header {
      grid-column: 2;
      justify-content: center;
   }

   /* On desktop this column only shows .menu-items (mobile trigger/search
      are hidden via d-none d-md-flex / d-block d-md-none) */
   body.v2-active .header-general .search-header .menu-items {
      width: 100%;
      display: flex;
      justify-content: center;
   }

   body.v2-active .header-general .search-header .menu-items .header-menu {
      width: auto;
   }

   body.v2-active .header-general .search-header .menu-items ul,
   body.v2-active .header-general .search-header .menu-items .menu {
      display: flex;
      justify-content: center;
      gap: 36px;
      margin: 0 auto;
   }

   /* ── Column 3: ICONS (right-aligned) ── */
   body.v2-active .header-general .menu-wrapper.column-header {
      grid-column: 3;
      justify-content: flex-end;
      gap: 18px;
   }

   /* Menu links — slightly tighter spacing since they are in a narrow
      centre column now */
   body.v2-active .header-general ul a {
      font-size: 13px;
      letter-spacing: 0.18em;
      font-weight: 600;
      color: #0a0a0a;
      padding: 24px 0;
   }

}


/* ══════════════════════════════════════════════════════════════
   MOBILE MENU (slide-out #mobile-header) — REVERT TO LIGHT
   
   The prior V2 rules turned this dark. The user wants it back to the
   original (light). Every dark rule in redesign-v2.css is explicitly
   overridden here.
   ══════════════════════════════════════════════════════════════ */

body.v2-active #mobile-header {
   background: #ffffff;
   color: #000;
}

body.v2-active #mobile-header li a {
   color: #000;
}

body.v2-active #mobile-header .inner .bottom {
   background: rgba(0, 0, 0, 0.03);
}

body.v2-active #mobile-header .booster-icons .icon-wrapper {
   color: rgba(0, 0, 0, 0.55);
}

body.v2-active #mobile-header .booster-icons svg path {
   fill: #000;
}

body.v2-active #mobile-header .menu li.home-item,
body.v2-active #mobile-header .menu li.collections-item {
   border-color: rgba(0, 0, 0, 0.08);
}

body.v2-active #mobile-header li a:after,
body.v2-active #mobile-header li a:before {
   background-color: #000;
}

body.v2-active #mobile-header .close-menu svg path {
   stroke: #000;
}

body.v2-active #mobile-header .header-social-icons a {
   background: rgba(0, 0, 0, 0.04);
}

body.v2-active #mobile-header .header-social-icons a svg path {
   fill: #000;
}

body.v2-active #mobile-header .menu li.menu-item-has-children a[href="#"]::after {
   filter: none;
}

body.v2-active #mobile-header a.btn-primary {
   background: #0a0a0a;
   color: #fff;
   border-color: #0a0a0a;
}

body.v2-active #mobile-header a.btn-primary:hover {
   background: #fff;
   color: #0a0a0a;
}

body.v2-active #mobile-header .credit-cards-header svg {
   filter: none;
}

body.v2-active #mobile-header .dropdown .dropbtn {
   background: #fff;
   color: #000;
   border-color: rgba(0, 0, 0, 0.12);
}


/* ══════════════════════════════════════════════════════════════
   FOOTER — AUTHLETIC WORDMARK (Stronger-style)
   
   Injected after the footer columns by inc/redesign-v2.php via the
   generate_after_footer_content action. The SVG uses textLength +
   lengthAdjust so the 9 letters always span exactly the container
   width on a single line — never breaks, never overflows.
   ══════════════════════════════════════════════════════════════ */

body.v2-active .v2-footer-wordmark {
   background: #f4f4f2;
   /* matches the light V2 footer bg */
   width: 100%;
   padding: 40px 0 0;
   margin-top: -10px;
   /* seamlessly merges with footer above */
   overflow: hidden;
   line-height: 0;
   border-bottom: 50px solid black;
   z-index: 101;
   position: relative;
}

body.v2-active .v2-footer-wordmark__svg {
   display: block;
   width: 100%;
   height: auto;
   /* Pulls the letters' bottom rim right against the page bottom,
      matching the Stronger flush-to-edge aesthetic. */
   max-height: 280px;
   margin-top: -100px;
   margin-bottom: -40px;
}

body.v2-active .v2-footer-wordmark__text {
   font-weight: 900;
   font-size: 100px;
   fill: #0a0a0a;
}

.header-general {
   gap: 0% !important;
}

/* Slightly smaller on mobile so it doesn't overwhelm smaller viewports,
   but keep the same fill-the-width effect. */
@media (max-width: 991px) {
   body.v2-active .v2-footer-wordmark {
      border-bottom: 15px solid black;
   }

   body.v2-active .v2-footer-wordmark__svg {
      max-height: auto;
      margin-top: 0;
      margin-bottom: -20px;
   }
}

@media (max-width: 575px) {
   body.v2-active .v2-footer-wordmark {
      padding-top: 28px;
   }

   body.v2-active .v2-footer-wordmark__text {
      font-size: 100px;
      /* SVG scales proportionally via viewBox */
   }

   body.v2-active .v2-footer-wordmark__svg {
      margin-bottom: -10px;
      margin-top: -40px;
   }
}

body.v2-active .top-bar-wrapper {
   background: rgb(222, 76, 123) !important;
   border-bottom: 4px solid #000;
}

.top-bar-wrapper #offer-message {
   background: none !important;
   padding: 0 !important;
   font-weight: 900 !important;
   color: #fff !important
}

.top-bar-xmas .top-bar-countdown {
   color: #fff1ff;
   background: rgb(191 66 127) !important;
   border-radius: 5px !important;
   padding: 1px 7px !important;
   font-weight: 600 !important;
}

.top-bar-xmas .top-bar-countdown-value {
   background: none !important;
   padding: 0 !important;
   border-radius: 0 !important;
   white-space: nowrap;
}

body.v2-active .v2-footer-wordmark .logo-general {
   max-width: 800px;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 5px;
}

/*Mobile menu*/
.v2-shop-hero.mobile-menu {
   margin-top: 20px;
   margin-left: -25px;
   margin-right: -25px;
   width: calc(100% + 50px);
   height: 400px;
   max-height: 400px;
   min-height: 400px;
}

.v2-shop-hero.mobile-menu .v2-shop-hero__title-discount {
   font-size: 50px;
}

@media (max-width: 992px) {
   body.v2-active .sub-header-info {
      padding-left: 25px !important;
      padding-right: 25px !important;
      justify-content: center !important;
   }

   .sub-header-info div {
      font-size: 10px !important
   }

   .sub-header-info div.responsible {
      display: none !important
   }
}