/* ══════════════════════════════════════════════════════════════════
   MOBILE MENU REDESIGN — minimal, premium, conversion-focused

   Loaded in wp_head AFTER header.css and all enqueued styles
   (incl. redesign-v2*.css) so it overrides both the base and the
   body.v2-active variants. Everything is scoped to #mobile-header;
   the <link> tag is served with media="(max-width: 991px)".

   Rows are flex: [optional circle image] [title] [Soon badge → right].
   The circle image comes from the per-item "Menu image" field in
   Appearance > Menus (meta: _dt_menu_item_image).
   ══════════════════════════════════════════════════════════════════ */


/* ── Panel ── */
#mobile-header {
   border-radius: 0 22px 22px 0;
   overflow: hidden;
   box-shadow: 16px 0 44px rgba(0, 0, 0, 0.14);
}

#mobile-header .close-menu {
   width: 34px;
   height: 34px;
   top: 15px;
   right: 15px;
   z-index: 5;
   cursor: pointer;
}

#mobile-header .inner,
body.v2-active #mobile-header .inner {
   padding: 25px 25px 50px;
}

#mobile-header .inner .menu {
   margin-bottom: 22px;
}


/* ── Menu rows ── */
#mobile-header li,
body.v2-active #mobile-header li {
   margin-bottom: 0;
   line-height: 1.3;
}

#mobile-header li a,
body.v2-active #mobile-header li a {
   display: flex;
   align-items: center;
   gap: 14px;
   min-height: 45px;
   padding: 8px 0;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 1.1px;
   line-height: 1.35;
   color: #111;
   transition: opacity 0.15s;
}

#mobile-header li a:active {
   opacity: 0.5;
}

/* Hairline dividers between top-level rows */
#mobile-header .header-mobile-menu>.menu>li {
   border-bottom: 1px solid #f1f1f1;
}

#mobile-header .header-mobile-menu>.menu>li:last-child {
   border-bottom: none;
}

/* Neutralise the old special separators around Home / Collections */
#mobile-header .menu li.home-item,
body.v2-active #mobile-header .menu li.home-item {
   margin-bottom: 0;
   padding-bottom: 0;
   border-bottom: 1px solid #f1f1f1;
}

#mobile-header .menu li.collections-item,
body.v2-active #mobile-header .menu li.collections-item {
   margin-top: 0;
   padding-top: 0;
   border-top: none;
}

/* Kill the desktop hover-underline animation (irrelevant on touch) */
#mobile-header li a:hover:before,
#mobile-header li a:hover:after {
   width: 0;
}


/* ── Circle images (per-item "Menu image" field) ── */
#mobile-header .menu-item-circle {
   flex: 0 0 auto;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   overflow: hidden;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
   background: #f5f5f5;
}

#mobile-header .menu-item-circle img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

#mobile-header .sub-menu .menu-item-circle {
   width: 36px;
   height: 36px;
}


/* ── "Soon" badge — sits at the right edge of its flex row ── */
#mobile-header li.sold-out .menu-item-sold-out {
   position: static;
   margin-left: auto;
   font-size: 9px;
   letter-spacing: 0.5px;
   background: #111;
   color: #fff;
   border-radius: 20px;
   padding: 3px 10px;
}


/* ── Conversion highlights ── */

/* Bestsellers — bolder, no extra decoration */
#mobile-header .header-mobile-menu li.bestseller-item>a,
body.v2-active #mobile-header .header-mobile-menu li.bestseller-item>a {
   font-weight: 700;
}

/* "3 for 69€" bundle offer — soft blush card */
#mobile-header li.bundle-offer-menu,
#mobile-header li.bundle-offer-menu.three,
body.v2-active #mobile-header li.bundle-offer-menu {
   background: none;
   padding: 0;
   margin: 10px 0;
   border-radius: 0;
   border-bottom: none;
}

#mobile-header li.bundle-offer-menu>a,
body.v2-active #mobile-header li.bundle-offer-menu>a {
   background: #fdeef5;
   border: 1px solid rgba(176, 42, 99, 0.16);
   border-radius: 14px;
   padding: 8px 16px;
   min-height: 40px;
   color: #b02a63;
   font-weight: 700;
   letter-spacing: 1px;
}

/* "Bundle Up & Save" — quieter outline sibling of the blush card */
#mobile-header .header-mobile-menu li.bundle-item,
body.v2-active #mobile-header .header-mobile-menu li.bundle-item {
   margin: 10px 0;
   border-bottom: none;
}

#mobile-header .header-mobile-menu li.bundle-item>a,
body.v2-active #mobile-header .header-mobile-menu li.bundle-item>a {
   display: flex;
   width: 100%;
   max-width: 100%;
   background: #fff3f5;
   border: 1px solid rgba(212, 50, 80, 0.15);
   border-radius: 14px;
   padding: 8px 16px;
   min-height: 40px;
   color: #d43250;
   box-shadow: 0 8px 18px rgba(212, 50, 80, 0.1);
   font-weight: 700;
   letter-spacing: 1px;
   box-shadow: none;
}


/* ── Collections accordion ── */
#mobile-header .menu li.menu-item-has-children a[href="#"]::after {
   top: 50%;
   bottom: auto;
   transform: translateY(-50%);
   width: 14px;
   height: 14px;
   opacity: 0.55;
}

#mobile-header li.menu-item-has-children.active a[href="#"]::after {
   transform: translateY(-50%) rotate(180deg);
}

#mobile-header .menu li.menu-item-has-children .sub-menu,
body.v2-active #mobile-header .menu li.menu-item-has-children .sub-menu {
   padding: 2px 0 12px 16px;
   margin-left: 2px;
   border-left: 1px solid #ececec;
}

#mobile-header .menu li.menu-item-has-children .sub-menu li,
body.v2-active #mobile-header .menu li.menu-item-has-children .sub-menu li {
   margin-top: 0;
   font-size: 13px;
   border-bottom: none;
}

#mobile-header .menu li.menu-item-has-children .sub-menu li a {
   min-height: 44px;
   padding: 5px 0;
   font-size: 13px;
   letter-spacing: 1px;
}


/* ── Shop now CTA ── */
#mobile-header a.btn-primary.cta,
body.v2-active #mobile-header a.btn-primary {
   width: 100%;
   max-width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background: #0a0a0a;
   color: #fff;
   border: 2px solid #0a0a0a;
   border-radius: 14px;
   padding: 15px 20px;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 2.4px;
   margin-top: 4px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}


/* ── Sale hero banner — inset rounded card instead of full-bleed ── */
#mobile-header .v2-shop-hero.mobile-menu {
   margin: 24px 0 0;
   width: 100%;
   height: 300px;
   min-height: 300px;
   max-height: 300px;
   border-radius: 16px;
   overflow: hidden;
}

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

/* Fallback (non-v2) offer blocks: keep them inset too */
#mobile-header .mobile-offer-wrapper {
   margin-left: 0;
   margin-right: 0;
}

#mobile-header .mobile-offer-wrapper .offer-banner,
#mobile-header .mobile-offer-wrapper .td-banner {
   border-radius: 16px;
   overflow: hidden;
}


/* ── Bottom trust section ── */
#mobile-header .inner .bottom,
body.v2-active #mobile-header .inner .bottom {
   background: #fafafa;
   border-top: 1px solid #eee;
   padding: 22px 25px 14px;
   width: calc(100% + 50px);
   margin-left: -25px;
   margin-bottom: -50px;
   margin-top: 10px;
}

#mobile-header .booster-icons .icon-wrapper,
body.v2-active #mobile-header .booster-icons .icon-wrapper {
   color: #666;
}

#mobile-header .dropdown {
   display: block;
   width: 100%;
}

#mobile-header .dropdown .dropbtn,
body.v2-active #mobile-header .dropdown .dropbtn {
   width: 100%;
   text-align: left;
   background: #fff;
   border: 1px solid #e7e7e7;
   border-radius: 12px;
   padding: 11px 14px;
   font-size: 13px;
}

#mobile-header .credit-cards-header {
   margin-top: 18px;
}

#mobile-header .credit-cards-header ul {
   gap: 6px;
}

#mobile-header .credit-cards-header svg {
   height: 22px;
   border-radius: 4px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}