/* =========================================================
   SHC UI CLEAN FIX v1851
   Fixes:
   - oversized desktop navigation icons
   - mobile drawer layout
   - flag language selector
   - oversized mobile product CTA icons/text
   - overlap between CTA / chat bubble / bottom navigation
   ========================================================= */

/* ---------- HEADER: SHARED ---------- */
.site-header{
  position:relative;
  z-index:120;
  background:rgba(248,250,254,.96);
  border-bottom:1px solid #e6ecf4;
}

.site-header .nav-wrap{
  width:min(1460px,calc(100% - 36px));
  min-height:76px;
  margin:0 auto;
  padding:8px 0;
  display:flex;
  align-items:center;
  gap:22px;
}

.site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  text-decoration:none;
  color:#111a2b;
  font-size:22px;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
}

.site-header .brand img{
  width:46px!important;
  height:46px!important;
  object-fit:contain;
}

.site-header .brand b{color:#0876f9}

.shc-drawer-head,
.shc-mobile-quick,
.shc-mobile-languages,
.shc-menu-backdrop{
  display:none;
}

.shc-nav-icon{
  display:none!important;
}

.shc-flag-switch{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:38px;
  padding:4px 5px;
  border:1px solid #dfe6ef;
  border-radius:999px;
  background:#fff;
}

.shc-flag-switch a{
  width:29px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-size:17px;
  text-decoration:none;
  opacity:.6;
}

.shc-flag-switch a.active{
  opacity:1;
  background:#edf5ff;
  box-shadow:inset 0 0 0 1px #d1e4ff;
}

/* ---------- DESKTOP HEADER ---------- */
@media (min-width:981px){
  .shc-menu-btn{display:none!important}

  .site-header .nav-links{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    flex:1 1 auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:22px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }

  .site-header .nav-links > a{
    position:relative;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:52px!important;
    padding:0 2px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#435069!important;
    text-decoration:none!important;
    font-size:14px!important;
    line-height:1!important;
    font-weight:750!important;
    white-space:nowrap!important;
  }

  .site-header .nav-links > a:hover,
  .site-header .nav-links > a.active{
    color:#0f1728!important;
  }

  .site-header .nav-links > a.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    border-radius:2px;
    background:#0876f9;
  }

  .site-header .nav-actions{
    display:flex!important;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
  }

  .site-header .search-chip,
  .site-header .contact-btn{
    min-height:40px!important;
    padding:0 16px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    font-size:13px!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
}

/* ---------- MOBILE DRAWER ---------- */
@media (max-width:980px){
  body.shc-menu-open{overflow:hidden!important}

  .site-header .nav-wrap{
    width:100%!important;
    min-height:76px!important;
    padding:10px 20px!important;
    gap:12px!important;
  }

  .site-header .brand{
    font-size:21px!important;
  }

  .site-header .brand img{
    width:48px!important;
    height:48px!important;
  }

  .site-header .nav-actions{display:none!important}

  .shc-menu-btn{
    position:relative!important;
    margin-left:auto!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    border:0!important;
    border-radius:13px!important;
    background:#edf5ff!important;
    color:#0876f9!important;
    box-shadow:none!important;
    z-index:132!important;
  }

  .shc-menu-btn span{
    display:block!important;
    width:20px!important;
    height:2px!important;
    border-radius:999px!important;
    background:currentColor!important;
    transition:.2s ease!important;
  }

  .shc-menu-btn[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .shc-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .shc-menu-btn[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .shc-menu-backdrop{
    position:fixed;
    inset:0;
    /* IMPORTANT: below .site-header (z-index:120).
       The old 125 value covered the drawer because the drawer lives
       inside the header stacking context. That made the menu itself blurry. */
    z-index:119;
    display:block;
    background:rgba(11,22,39,.28);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease;
  }

  body.shc-menu-open .shc-menu-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .site-header .shc-nav-drawer{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(84vw,330px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:16px 14px calc(18px + env(safe-area-inset-bottom))!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:7px!important;
    overflow-y:auto!important;
    border:0!important;
    border-left:1px solid #e4eaf2!important;
    border-radius:22px 0 0 22px!important;
    background:rgba(255,255,255,.99)!important;
    box-shadow:-22px 0 60px rgba(15,31,56,.18)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateX(104%)!important;
    transition:transform .23s ease,opacity .18s ease,visibility .18s ease!important;
    z-index:130!important;
  }

  .site-header .shc-nav-drawer.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateX(0)!important;
  }

  .shc-drawer-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:56px!important;
    margin-bottom:5px!important;
    padding:0 4px 11px!important;
    border-bottom:1px solid #e8edf5!important;
  }

  .shc-drawer-brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
  }

  .shc-drawer-brand img{
    width:38px!important;
    height:38px!important;
    object-fit:contain;
  }

  .shc-drawer-brand strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#111a2b;
    font-size:16px;
    font-weight:900;
  }

  .shc-drawer-close{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:12px!important;
    background:#edf5ff!important;
    color:#0876f9!important;
    font-size:29px!important;
    line-height:1!important;
    font-weight:400!important;
  }

  .site-header .shc-nav-drawer > a{
    width:100%!important;
    min-height:47px!important;
    padding:9px 11px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:11px!important;
    border:1px solid #e6ecf4!important;
    border-radius:13px!important;
    background:#fafcff!important;
    color:#46546b!important;
    text-decoration:none!important;
    font-size:14px!important;
    line-height:1.2!important;
    font-weight:750!important;
    text-align:left!important;
  }

  .site-header .shc-nav-drawer > a.active,
  .site-header .shc-nav-drawer > a:active{
    color:#0876f9!important;
    background:#edf5ff!important;
    border-color:#d2e5ff!important;
  }

  .site-header .shc-nav-drawer > a::after{
    display:none!important;
  }

  .shc-nav-icon{
    display:block!important;
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    max-height:20px!important;
  }

  .shc-mobile-quick{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    margin-top:4px!important;
  }

  .shc-mobile-quick a{
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px!important;
    border-radius:13px!important;
    text-decoration:none!important;
    font-size:12px!important;
    font-weight:850!important;
  }

  .shc-mobile-search{
    color:#0876f9!important;
    background:#edf5ff!important;
    border:1px solid #d2e5ff!important;
  }

  .shc-mobile-contact{
    color:#fff!important;
    background:#0876f9!important;
    border:1px solid #0876f9!important;
  }

  .shc-mobile-languages{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:auto!important;
    padding-top:12px!important;
    border-top:1px solid #e8edf5!important;
  }

  .shc-mobile-languages a{
    min-height:48px!important;
    padding:8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border:1px solid #dfe6ef!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#526078!important;
    text-decoration:none!important;
    font-size:12px!important;
    font-weight:800!important;
  }

  .shc-mobile-languages a.active{
    color:#0876f9!important;
    background:#edf5ff!important;
    border-color:#cee2ff!important;
  }

  .shc-mobile-languages .flag{
    font-size:20px!important;
    line-height:1!important;
  }

  /* Fixed UI should not compete with an open navigation drawer. */
  body.shc-menu-open .mobile-bottom,
  body.shc-menu-open .floating-contact,
  body.shc-menu-open .mobile-product-cta{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

/* ---------- PRODUCT DETAIL MOBILE CTA ---------- */
@media (max-width:620px){
  body.has-product-cta .product-detail-page,
  .product-detail-page{
    padding-bottom:205px!important;
  }

  /* Product CTA already contains contact actions; keep the round chat bubble away. */
  body.has-product-cta .floating-contact{
    display:none!important;
  }

  .mobile-product-cta,
  .mobile-product-cta.mobile-product-cta-v13{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(88px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    min-height:66px!important;
    height:auto!important;
    padding:9px 10px 9px 13px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:minmax(72px,auto) minmax(0,1fr)!important;
    align-items:center!important;
    gap:9px!important;
    overflow:hidden!important;
    border:1px solid #dfe7f1!important;
    border-radius:19px!important;
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 14px 36px rgba(18,38,67,.15)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    backdrop-filter:blur(16px)!important;
    z-index:84!important;
  }

  .mobile-product-cta .mobile-cta-price{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:1px!important;
  }

  .mobile-product-cta .mobile-cta-price small{
    display:block!important;
    max-width:92px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    color:#6b788c!important;
    font-size:9px!important;
    line-height:1.2!important;
    font-weight:700!important;
  }

  .mobile-product-cta .mobile-cta-price strong{
    display:block!important;
    color:#101827!important;
    font-size:21px!important;
    line-height:1.05!important;
    font-weight:900!important;
    letter-spacing:-.35px!important;
  }

  .mobile-product-cta .mobile-cta-actions{
    min-width:0!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:42px 42px minmax(95px,1fr)!important;
    align-items:center!important;
    justify-content:end!important;
    gap:6px!important;
  }

  .mobile-product-cta .mobile-cta-secondary,
  .mobile-product-cta button.mobile-cta-secondary{
    position:relative!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    max-width:42px!important;
    max-height:42px!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    border:1px solid #dbe5f0!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#243b59!important;
    box-shadow:none!important;
    font-size:0!important;
    line-height:0!important;
  }

  .mobile-product-cta .mobile-cta-secondary svg,
  .mobile-product-cta .mobile-cta-icon{
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    min-height:20px!important;
    max-width:20px!important;
    max-height:20px!important;
    display:block!important;
  }

  /* Hide the accessible labels visually even if an older stylesheet overrides sr-only. */
  .mobile-product-cta .mobile-cta-secondary .mobile-cta-sr,
  .mobile-product-cta .mobile-cta-sr{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
    font-size:1px!important;
    line-height:1px!important;
  }

  .mobile-product-cta .mobile-cta-primary{
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 10px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:12px!important;
    background:#0876f9!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(8,118,249,.20)!important;
    text-decoration:none!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }

  .mobile-product-cta .mobile-cta-primary svg{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    max-width:18px!important;
    max-height:18px!important;
  }

  .mobile-product-cta .mobile-cta-primary span:not(.mobile-cta-sr){
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
    line-height:1!important;
  }

  /* Safety override for old emoji/text call/copy variants. */
  .mobile-product-cta .mobile-cta-secondary{
    text-indent:0!important;
  }
}

@media (max-width:380px){
  .mobile-product-cta,
  .mobile-product-cta.mobile-product-cta-v13{
    left:8px!important;
    right:8px!important;
    grid-template-columns:minmax(62px,auto) minmax(0,1fr)!important;
    gap:6px!important;
    padding-left:10px!important;
    padding-right:8px!important;
  }

  .mobile-product-cta .mobile-cta-actions{
    grid-template-columns:39px 39px minmax(86px,1fr)!important;
    gap:5px!important;
  }

  .mobile-product-cta .mobile-cta-secondary,
  .mobile-product-cta button.mobile-cta-secondary{
    width:39px!important;
    height:39px!important;
    min-width:39px!important;
    min-height:39px!important;
  }

  .mobile-product-cta .mobile-cta-primary{
    height:39px!important;
    min-height:39px!important;
    padding:0 8px!important;
    font-size:11px!important;
  }

  .mobile-product-cta .mobile-cta-primary span:not(.mobile-cta-sr){
    font-size:11px!important;
  }

  .mobile-product-cta .mobile-cta-price strong{
    font-size:19px!important;
  }
}


/* =========================================================
   v1852 - iPhone drawer blur/overlay bug fix
   ========================================================= */
@media (max-width:980px){
  .site-header{
    position:relative!important;
    z-index:120!important;
    isolation:isolate;
  }

  .site-header .shc-nav-drawer{
    z-index:140!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
  }

  .shc-drawer-head,
  .site-header .shc-nav-drawer > a,
  .shc-mobile-quick,
  .shc-mobile-languages{
    filter:none!important;
    opacity:1;
  }

  .shc-menu-backdrop{
    z-index:119!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  body.shc-menu-open .shc-menu-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Keep the top header and open drawer crisp above the dim overlay. */
  body.shc-menu-open .site-header{
    filter:none!important;
    opacity:1!important;
  }

  body.shc-menu-open .shc-nav-drawer.open{
    filter:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}


/* v1853 — Remove legacy floating chat/contact widget everywhere.
   This is a failsafe in case an older cached page still contains the HTML. */
html body .floating-contact,
html body .floating-contact.open,
html body .floating-contact-menu,
html body .floating-contact-toggle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}