/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
  --m15-accent: #FF5121;

  /* Copyright line shown in the menu (tablet & mobile).
     CSS cannot output the current year dynamically: update the year here.
     The double space after the escape is intentional (the first one
     terminates the \00A9 escape sequence). */
  --m15-copyright: "\00A9  2026 M15 Performance";

  /* Mobile only: space reserved at the bottom of the screen for the fixed
     social row, so the scrollable menu list never overlaps it. Increase
     if the menu list is cut off by the social row. */
  --m15-menu-bottom-reserve: 240px;
}


/* ==========================================================================
   DESKTOP HEADER ACCENT (>= 1025px)
   ========================================================================== */

@media (min-width: 1025px) {

  /* 2.1 Active/hover line of the main menu */
  html body .menu_hover_zoom_line > ul > li > a::before,
  html body .menu_hover_zoom_line > ul > li > a::after,
  html body .menu_hover_zoom_line > ul > li > a > span::before,
  html body .menu_hover_zoom_line > ul > li > a > span::after {
    background-color: var(--m15-accent) !important;
    border-color: var(--m15-accent) !important;
  }

  /* 2.2 Top bar icons: clock, phone, location (burger icon excluded) */
  html body header .sc_layouts_iconed_text_icon:not([class*="icon-menu"]),
  html body header .sc_layouts_iconed_text_icon:not([class*="icon-menu"])::before {
    color: var(--m15-accent) !important;
  }

  /* 2.3 Top bar social icons: accent color on hover only */
  html body header .social_item,
  html body header .social_item .social_icon,
  html body header .social_item [class*="icon-"],
  html body header .social_item [class*="icon-"]::before {
    transition: color .3s ease;
  }
  html body header .social_item:hover,
  html body header .social_item:hover .social_icon,
  html body header .social_item:hover [class*="icon-"],
  html body header .social_item:hover [class*="icon-"]::before {
    color: var(--m15-accent) !important;
  }
}


/* ==========================================================================
   MOBILE & TABLET MENU (<= 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

  /* ------------------------------------------------------------------------
     PANEL & LINKS
     ------------------------------------------------------------------------ */

  /* 3.1 Panel: near-black background with a subtle accent glow (bottom-left) */
  html body .menu_mobile,
  html body .menu_mobile_inner {
    background:
      radial-gradient(120% 55% at 0% 100%, rgba(255, 81, 33, .16), transparent 60%),
      #0a0a0b !important;
  }

  /* 3.2 Menu list spans its full column so divider lines run edge to edge */
  html body .menu_mobile .menu_mobile_nav_area,
  html body .menu_mobile .menu_mobile_nav_area ul {
    width: 100%;
  }
  html body .menu_mobile .menu_mobile_nav_area .menu-item {
    display: block;
    width: 100%;
  }

  /* 3.3 Top-level links: large and bold, thin divider, arrow pushed right */
  html body .menu_mobile .menu_mobile_nav_area .menu-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 !important;
    font-size: clamp(28px, 6vw, 40px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    transition: color .25s ease;
  }
  html body .menu_mobile .menu_mobile_nav_area .menu-item > a:hover,
  html body .menu_mobile .menu_mobile_nav_area .current-menu-item > a,
  html body .menu_mobile .menu_mobile_nav_area .current_page_item > a {
    color: var(--m15-accent) !important;
  }

  /* 3.4 Sub-menu links (Cart, Checkout, Wishlist): smaller and indented */
  html body .menu_mobile .menu_mobile_nav_area .sub-menu .menu-item > a,
  html body .menu_mobile .menu_mobile_nav_area ul ul .menu-item > a {
    padding: 10px 0 10px 16px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  /* ------------------------------------------------------------------------
     CLOSE BUTTON & INFO CARDS
     ------------------------------------------------------------------------ */

  /* 4.1 Close button: outlined pill (no accent effect) */
  html body .menu_mobile_close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
  }

  /* 4.2 Right column (tablet): the column itself is transparent, its
         content is wrapped in a card (rounded corners, border, light fill) */
  html body .menu_mobile_widgets_area {
    background: transparent !important;
    border-left: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  html body .menu_mobile_widgets_area :has(> .extra_item) {
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .05);
  }

  /* 4.3 Card content: blocks separated by dividers, muted labels,
         white links, accent icons */
  html body .menu_mobile_widgets_area .extra_item {
    margin: 0 !important;
    padding: 22px 0;
  }
  html body .menu_mobile_widgets_area .extra_item:first-child {
    padding-top: 0;
  }
  html body .menu_mobile_widgets_area .extra_item:last-child {
    padding-bottom: 0;
  }
  html body .menu_mobile_widgets_area .extra_item + .extra_item {
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  html body .menu_mobile_widgets_area .extra_item h6 {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, .62) !important;
  }
  html body .menu_mobile_widgets_area .extra_item a[href^="mailto"] {
    display: inline-block;
    white-space: nowrap;
    padding-bottom: 4px;
    font-size: clamp(13px, 1.9vw, 20px) !important;
    font-weight: 700;
    color: #ffffff !important;
    border-bottom: 1.5px solid var(--m15-accent) !important;
  }
  html body .menu_mobile_widgets_area .extra_item p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .62);
  }
  html body .menu_mobile_widgets_area .extra_item p:last-child {
    margin-bottom: 0;
  }
  html body .menu_mobile_widgets_area .extra_row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  html body .menu_mobile_widgets_area .extra_row svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    color: var(--m15-accent);
  }

  /* 4.4 Hide the WhatsApp and Shop blocks if they still exist in the
         widget area (the menu already has a Shop item and the floating
         WhatsApp button covers the rest) */
  html body .extra_item:has(a[href*="wa.me"]),
  html body .extra_item:has(a[href*="whatsapp"]),
  html body .extra_item:has(a[href*="/shop"]),
  html body .m15-menu-extra {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     SOCIAL ICONS
     ------------------------------------------------------------------------ */

  /* Outlined circle; accent fill on hover, mouse devices only */
  html body .menu_mobile .social_item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 50%;
    transition: background-color .25s ease, border-color .25s ease;
  }
  @media (hover: hover) {
    html body .menu_mobile .social_item:hover {
      background-color: var(--m15-accent);
      border-color: var(--m15-accent);
    }
  }
}


/* ==========================================================================
   TABLET ONLY (768px - 1024px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  html body .menu_mobile .socials_mobile {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  html body .menu_mobile .socials_mobile::after {
    content: var(--m15-copyright);
    margin-left: auto;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
  }
}


/* ==========================================================================
   MOBILE ONLY (<= 767px)
   ========================================================================== */

@media (max-width: 767px) {

  /* 7.1 The menu list scrolls above the social row, so an open Shop
         dropdown is never covered. Tune the reserved space in section 1. */
  html body .menu_mobile .menu_mobile_nav_area {
    max-height: calc(100vh - var(--m15-menu-bottom-reserve));
    max-height: calc(100dvh - var(--m15-menu-bottom-reserve));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 7.2 Social row pinned to the bottom (respects the iOS home indicator) */
  html body .menu_mobile .socials_mobile {
    position: fixed;
    left: 30px;
    right: auto;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 60px);
    box-sizing: border-box;
    margin: 0;
    padding: 16px 0 0;
    border-top: 0 !important;
  }

  /* 7.3 Divider above the social row: short and centered
         (replaces the theme's full-width border) */
  html body .menu_mobile .socials_mobile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 56%;
    height: 1px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .14);
  }

  /* 7.4 Copyright on the right, vertically aligned with the icons */
  html body .menu_mobile .socials_mobile::after {
    content: var(--m15-copyright);
    position: absolute;
    right: 0;
    top: 16px;
    line-height: 44px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
  }
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* 8.1 Visible keyboard focus inside the mobile/tablet menu */
@media (max-width: 1024px) {
  html body .menu_mobile a:focus-visible,
  html body .menu_mobile_close:focus-visible {
    outline: 2px solid var(--m15-accent);
    outline-offset: 3px;
  }
}

/* 8.2 Respect the "reduce motion" system setting */
@media (prefers-reduced-motion: reduce) {
  html body header .social_item,
  html body header .social_item .social_icon,
  html body header .social_item [class*="icon-"],
  html body header .social_item [class*="icon-"]::before,
  html body .menu_mobile .menu_mobile_nav_area .menu-item > a,
  html body .menu_mobile .social_item {
    transition: none !important;
  }
}