/* ══════════════════════════════════════════
   Infinity Digital — storefront UX layer
   Loaded last in <head> (inc/ux.php) so it wins over main-min.css.
   Breakpoint: drawer navigation below 1100px, inline navigation above.
═══════════════════════════════════════════ */
:root{
  --ux-surface:#111827;
  --ux-elevated:#182235;
  --ux-line:rgba(255,255,255,.10);
  --ux-line-strong:rgba(255,255,255,.18);
  --ux-text:#F8FAFC;
  --ux-text-2:#B8C2D1;
  --ux-accent:#6D4AFF;
  --ux-accent-soft:#A99BFF;
  --ux-ease:cubic-bezier(.22,1,.36,1);
}

/* ── Header row ───────────────────────────── */
.ids-header{will-change:auto}
.ids-header__inner{gap:12px;min-width:0}
.ids-logo{min-width:0}
.ids-header__actions{gap:8px}
.ids-currency[hidden],
.ids-drawer__currency[hidden]{display:none!important}

/* Nav labels: sentence case, readable */
.ids-nav__menu a{text-transform:none;letter-spacing:0;font-size:15px}

/* Menu button (replaces .ids-hamburger) */
.ids-menu-btn{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;flex-shrink:0;padding:0;
  background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;color:var(--text-primary);
  transition:background .15s var(--ux-ease),border-color .15s var(--ux-ease);
}
.ids-menu-btn:hover{background:rgba(255,255,255,.09);border-color:var(--ux-line-strong)}
.ids-menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .22s var(--ux-ease),opacity .18s}
.ids-menu-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ids-menu-btn.is-open span:nth-child(2){opacity:0}
.ids-menu-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ids-menu-btn:focus-visible,.ids-drawer__close:focus-visible,.ids-submenu-toggle:focus-visible,
.ids-currency button:focus-visible,.ids-drawer__currency button:focus-visible{outline:2px solid var(--ux-accent-soft);outline-offset:2px}

/* Currency switcher (desktop header + drawer) */
.ids-currency__group{
  display:inline-flex;gap:2px;padding:3px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;
}
.ids-currency__group button{
  min-width:48px;height:36px;padding:0 10px;border:0;border-radius:9px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;
  background:transparent;color:var(--ux-text-2);
  transition:background .15s var(--ux-ease),color .15s var(--ux-ease);
}
.ids-currency__group button:hover{color:var(--ux-text);background:rgba(255,255,255,.06)}
.ids-currency__group button[aria-pressed="true"]{background:var(--ux-accent);color:#fff;cursor:default}
/* The plugin's floating side tab is replaced by the header/drawer switcher once that switcher exists */
.ids-cur-ready .woocommerce-multi-currency.wmc-sidebar{display:none!important}

/* ── Desktop: inline nav with dropdowns ───── */
@media (min-width:1100px){
  .ids-drawer__head,.ids-drawer__extra,.ids-submenu-toggle{display:none!important}
  .ids-nav__menu>li{position:relative}
  .ids-nav__menu .menu-item-has-children>a{display:flex;align-items:center;gap:7px}
  .ids-nav__menu .menu-item-has-children>a::after{
    content:"";width:6px;height:6px;margin-top:-3px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);opacity:.65;transition:transform .18s var(--ux-ease);
  }
  .ids-nav__menu .sub-menu{
    position:absolute;top:calc(100% + 8px);left:0;z-index:60;
    min-width:230px;margin:0;padding:8px;list-style:none;
    background:var(--ux-elevated);border:1px solid var(--ux-line);border-radius:14px;
    box-shadow:0 18px 44px -14px rgba(0,0,0,.75);
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .16s var(--ux-ease),transform .16s var(--ux-ease),visibility 0s linear .16s;
  }
  /* hover bridge across the 8px gap */
  .ids-nav__menu .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
  .ids-nav__menu li:hover>.sub-menu,
  .ids-nav__menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .ids-nav__menu li:hover>a::after,
  .ids-nav__menu li:focus-within>a::after{transform:rotate(225deg) translate(-2px,-2px)}
  .ids-nav__menu .sub-menu a{padding:9px 12px;font-size:14px;color:var(--ux-text-2);border-radius:9px}
  .ids-nav__menu .sub-menu a:hover{color:var(--ux-text);background:rgba(255,255,255,.06)}
}

/* ── Below 1100px: logo · search · cart · menu, with a drawer ── */
@media (max-width:1099px){
  /* backdrop-filter/will-change on the sticky header would make it the containing block
     for the fixed drawer; use an opaque bar instead */
  .ids-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(8,10,18,.97)}
  .ids-header__inner{gap:8px}
  .ids-header__actions{gap:6px;margin-left:auto}
  .ids-menu-btn{display:flex}
  .ids-account-menu,
  .ids-header__actions>.ids-currency{display:none!important}

  /* !important + extra specificity: ids-overrides-min.css (edge-cached) still carries
     !important full-screen overlay rules for .ids-nav below 900px */
  html body .ids-header .ids-nav{
    display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;
    position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;
    width:min(88vw,380px)!important;height:100vh!important;height:100dvh!important;
    margin:0!important;padding:0 0 calc(24px + env(safe-area-inset-bottom))!important;gap:0!important;
    background:var(--ux-surface)!important;border-left:1px solid var(--ux-line);
    box-shadow:-24px 0 60px rgba(0,0,0,.55);
    overflow-y:auto!important;overscroll-behavior:contain;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    transform:translateX(100%);visibility:hidden;
    transition:transform .26s var(--ux-ease),visibility 0s linear .26s;
    z-index:2!important;
  }
  html body .ids-header .ids-nav.is-open{transform:none;visibility:visible;transition:transform .26s var(--ux-ease),visibility 0s}

  .ids-drawer__head{
    position:sticky;top:0;z-index:1;
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 10px 10px 20px;min-height:64px;
    background:var(--ux-surface);border-bottom:1px solid var(--ux-line);
  }
  .ids-drawer__title{font-size:17px;font-weight:700;color:var(--ux-text)}
  .ids-drawer__close{
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    background:rgba(255,255,255,.05);border:1px solid var(--ux-line);border-radius:12px;
    color:var(--ux-text);cursor:pointer;
  }
  .ids-drawer__close:hover{background:rgba(255,255,255,.1)}

  html body .ids-header .ids-nav__menu{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    width:100%!important;max-width:none!important;
    gap:2px!important;margin:0!important;padding:12px!important;
  }
  html body .ids-header .ids-nav__menu>li{position:relative}
  html body .ids-header .ids-nav__menu a{
    display:block!important;padding:12px 14px!important;
    font-family:inherit!important;font-size:16px!important;font-weight:600!important;line-height:1.35!important;letter-spacing:0!important;
    background:transparent!important;border:0!important;border-radius:10px!important;box-shadow:none!important;
    color:var(--ux-text)!important;text-transform:none;white-space:normal;
  }
  html body .ids-header .ids-nav__menu a::after{content:none!important;display:none!important}
  html body .ids-header .ids-nav__menu a:hover,
  html body .ids-header .ids-nav__menu a:focus-visible{background:rgba(255,255,255,.06)!important;color:#fff!important}
  html body .ids-header .ids-nav__menu .menu-item-has-children>a{padding-right:56px!important}
  .ids-submenu-toggle{
    position:absolute;top:0;right:4px;width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:0;border-radius:10px;color:var(--ux-text-2);cursor:pointer;
  }
  .ids-submenu-toggle:hover{background:rgba(255,255,255,.06);color:var(--ux-text)}
  .ids-submenu-toggle::before{
    content:"";width:8px;height:8px;margin-top:-4px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .2s var(--ux-ease);
  }
  .ids-submenu-toggle[aria-expanded="true"]::before{transform:rotate(225deg);margin-top:4px}
  body .ids-header .ids-nav__menu .sub-menu{
    display:none;list-style:none;margin:0 0 6px 14px;padding:0 0 0 10px;
    border-left:1px solid var(--ux-line);
  }
  body .ids-header .ids-nav__menu li.is-expanded>.sub-menu{display:block}
  html body .ids-header .ids-nav__menu .sub-menu a{font-size:15px!important;font-weight:500!important;padding:10px 12px!important;color:var(--ux-text-2)!important}
  html body .ids-header .ids-nav__menu .sub-menu a:hover{color:var(--ux-text)!important}

  .ids-drawer__extra{margin:6px 12px 0;padding:14px 2px 0;border-top:1px solid var(--ux-line)}
  .ids-drawer__label{margin:0 0 6px 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94A3B8}
  .ids-drawer__links{list-style:none;margin:0 0 14px;padding:0}
  .ids-drawer__links a{display:block;padding:11px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ux-text-2)}
  .ids-drawer__links a:hover{color:var(--ux-text);background:rgba(255,255,255,.06)}
  .ids-drawer__currency{margin:0 0 16px}
  .ids-drawer__currency .ids-currency__group{margin-left:10px}
  .ids-drawer__support{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin:4px 10px 0;padding:13px 16px;border-radius:12px;
    background:#22c88e;color:#04140d;font-weight:700;font-size:15px;
  }
  .ids-drawer__support:hover{filter:brightness(1.06)}

  /* Open state: lift the header above everything, dim the page, lock scroll */
  html.ids-drawer-open{overflow:hidden}
  html.ids-drawer-open body{overflow:hidden}
  html.ids-drawer-open .ids-header{z-index:2147483000!important}
  .ids-drawer-backdrop{
    position:fixed;inset:0;z-index:2147482999;
    background:rgba(3,5,10,.62);opacity:0;visibility:hidden;
    transition:opacity .24s var(--ux-ease),visibility 0s linear .24s;
  }
  html.ids-drawer-open .ids-drawer-backdrop{opacity:1;visibility:visible;transition:opacity .24s var(--ux-ease),visibility 0s}
  /* Floating chat / currency widgets stay beneath the open menu */
  html.ids-drawer-open [id^="chaty-widget"],
  html.ids-drawer-open .chaty-widget,
  html.ids-drawer-open [id^="chatway"]:not(script),
  html.ids-drawer-open [class*="chatway-"]:not(script),
  html.ids-drawer-open .woocommerce-multi-currency.wmc-sidebar{visibility:hidden!important}
}

/* Small phones: keep logo · search · cart · menu inside 320px */
@media (max-width:480px){
  body .ids-header .ids-header__inner{padding:0 12px;gap:6px}
  /* header.php nests the_custom_logo()'s <a> inside a.ids-logo; the parser splits them, leaving
     an empty .ids-logo before the real .custom-logo-link — so size the real link, not the wrapper */
  .ids-header__inner>.ids-logo{flex:0 0 0;min-width:0;gap:0}
  .ids-header__inner>.custom-logo-link{flex:0 1 auto;min-width:0}
  .ids-header .custom-logo{height:auto;max-height:30px;width:auto;max-width:100%}
  .ids-header .ids-action-btn,.ids-menu-btn{width:42px;height:42px}
}

/* ── Product page: short description flows with the page (no nested 220px scroll box) ── */
.ids-product-summary__short-desc{max-height:none;overflow:visible}

@media (prefers-reduced-motion:reduce){
  body .ids-header .ids-nav,
  body .ids-header .ids-nav.is-open,
  .ids-drawer-backdrop,
  .ids-nav__menu .sub-menu,
  .ids-menu-btn span{transition:none!important}
}