/* One glass header for every customer page on tablet and desktop (header-glass.js).
   The desktop home header (desktop-hero.css, review round 4) is the reference: the same floating
   glass frame, frost on scroll, veil above, logo size, height and button rhythm are applied here
   to the request, notification, account, trust, importer and trader headers, and to the home
   header on tablets. Each header keeps its own links, buttons and behaviour; only the frame,
   the logo size and the spacing change.
   Breakpoints: phone below 700px (nothing here applies, the phone header is unchanged);
   tablet 700px and up, or any touch screen; desktop 1024px and up with a fine pointer and hover.
   Colours are the SOVANOR tokens of styles.css. */
.sv-hg-frost{display:none}

@media(min-width:700px){
  /* ---------- Shared frame, on every header except the desktop home (desktop-hero.css) ---------- */
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg){
    --sv-f:0;--hg-iy:4px;--hg-ix:0px;--hg-iy1:8px;--hg-ix1:16px;--hg-pad:16px;--hg-shift:10px;
    position:sticky;isolation:isolate;overflow:visible;
    inset-block-start:calc(24px + env(safe-area-inset-top,0px));
    padding-inline:var(--hg-pad);
    border-color:transparent;border-radius:26px;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none;
    transition:inset-block-start .6s cubic-bezier(.2,.8,.2,1),padding-inline .6s cubic-bezier(.2,.8,.2,1)}
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg).sovanor-header-scrolled{
    inset-block-start:calc(12px + env(safe-area-inset-top,0px));padding-inline:calc(var(--hg-pad) + var(--hg-shift));
    border-color:transparent;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* The glass frame: identical values to the desktop home frame. */
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg)::after{
    content:"";position:absolute;z-index:0;pointer-events:none;inset:var(--hg-iy) var(--hg-ix);opacity:1;
    border:1px solid rgba(255,255,255,calc(.11 - var(--sv-f) * .02));border-radius:26px;
    background-image:linear-gradient(90deg,transparent,rgba(128,242,209,.4) 30%,rgba(99,196,239,.4) 70%,transparent),
      linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 48%,rgba(128,242,209,.03));
    background-size:76% 1px,auto;background-position:top,0 0;background-repeat:no-repeat;
    background-color:rgba(7,22,32,calc(.5 + var(--sv-f) * .3));
    box-shadow:0 22px 50px rgba(0,0,0,calc(.3 + var(--sv-f) * .15)),0 2px 6px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.12),inset 0 -1px rgba(255,255,255,calc(var(--sv-f) * .04));
    -webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);
    transition:inset .6s cubic-bezier(.2,.8,.2,1),background-color .35s ease,box-shadow .45s ease,border-color .45s ease}
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg).sovanor-header-scrolled::after{
    inset:var(--hg-iy1) var(--hg-ix1);background-size:70% 1px,auto;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Veil around the floating header (same layout as desktop-hero.css): a band over the whole width down
     to the frame's top edge and two side bands down to its bottom edge; clear under the glass. */
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg)::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    --hg-vt:calc(24px + env(safe-area-inset-top,0px) + var(--hg-iy1));--hg-vx:calc(18px + var(--hg-ix1) + 8px);
    inset-block:calc(-1 * (24px + env(safe-area-inset-top,0px))) -10px;inset-inline:-18px;opacity:0;border-radius:0;
    background:
      linear-gradient(180deg,rgba(5,17,26,.99) calc(var(--hg-vt) - 4px),rgba(5,17,26,0) calc(var(--hg-vt) + 10px)) 0 0/100% 100% no-repeat,
      linear-gradient(180deg,rgba(5,17,26,.99) calc(100% - 30px),rgba(5,17,26,0) 100%) left top/var(--hg-vx) 100% no-repeat,
      linear-gradient(180deg,rgba(5,17,26,.99) calc(100% - 30px),rgba(5,17,26,0) 100%) right top/var(--hg-vx) 100% no-repeat;-webkit-backdrop-filter:none;backdrop-filter:none;
    transition:opacity .6s ease}
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg).sovanor-header-scrolled::before{opacity:1}
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg)>*{z-index:1}
  /* Frost under the frame (a fixed element placed by header-glass.js on the frame's box). */
  .sv-hg-frost{display:block;position:fixed;z-index:71;left:0;top:0;width:0;height:0;border-radius:26px;pointer-events:none;
    opacity:var(--sv-f,0);background-color:rgba(7,22,32,.42);
    -webkit-backdrop-filter:blur(36px) saturate(1.25) brightness(.78);backdrop-filter:blur(36px) saturate(1.25) brightness(.78);
    transition:opacity .35s ease}

  /* ---------- Height: the same on every header ---------- */
  body[data-sovanor-surface="customer"] .screen.active .trust-header{height:76px;min-height:76px;border-bottom:0}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header{border:0;border-radius:26px}

  /* ---------- Logo: the home lockup (29px mark, 15px name, 9px role) everywhere ---------- */
  body[data-sovanor-surface="customer"] .screen.active>.compact-header .brand-mini{gap:8px}
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header .brand-mini>.brand-mark,.screen.active .trust-header .brand-mark,#importer-experience .ix-logo){
    flex:0 0 29px;width:29px;height:29px;border-radius:10px;box-shadow:none}
  body[data-sovanor-surface="customer"] #importer-experience .ix-logo{display:grid;place-items:center;padding:0}
  body[data-sovanor-surface="customer"] #importer-experience .ix-logo img{display:block;width:auto!important;height:13px!important;max-width:none;object-fit:contain}
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header .sv-compact-brand-copy b,#importer-experience .ix-brand>span){font-size:15px;line-height:1.05;letter-spacing:normal}
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header .sv-compact-brand-copy small,#importer-experience .ix-brand>span small){margin-top:1px;font-size:9px;line-height:1.2;letter-spacing:0}
  body[data-sovanor-surface="customer"] #importer-experience .ix-brand{gap:8px}
}

/* ---------- Header buttons and icons: the desktop home rhythm (42px, 14px radius, bell icon) ---------- */
@media(min-width:700px){
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header :is(.back-button,.sv-header-menu-trigger),.screen.active .trust-header>button,#importer-experience .ix-header :is(.ix-cart-button,.ix-profile),#home.active .home-header.sv-hg :is(.icon-button,.avatar)){
    width:42px;height:42px;min-width:42px;border-radius:14px}
  /* The home notification button shows the same bell as the desktop header (its text glyph is hidden). */
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg .icon-button{position:relative;display:inline-block;padding:0;font-size:0}
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg .icon-button::before{content:"";position:absolute;inset:0;margin:auto;width:19px;height:19px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E") center/contain no-repeat}
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg .icon-button i{position:absolute;top:9px;right:10px;margin:0}
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg :is(.icon-button,.avatar,.brand-lockup):focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
  /* Page links on touch screens wide enough to show them: the desktop track, the current page lit. */
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg .desktop-customer-nav{border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(3,14,22,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg .desktop-customer-nav button{border:1px solid transparent;border-radius:999px;background:transparent;box-shadow:none;white-space:nowrap}
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg .desktop-customer-nav button:first-of-type{border-color:rgba(128,242,209,.24);background:linear-gradient(180deg,rgba(128,242,209,.15),rgba(99,196,239,.06));color:var(--paper)}
}

/* ---------- Desktop: the importer header follows the consumer header exactly ----------
   Same brand lockup (logo, name, role label under it), same page-link track with the sliding light
   under the current page (header-glass.js), same button sizes and colours. Only the importer's own
   links and buttons differ. Values copied from the consumer header (desktop-hero.css, account-center.css). */
@media(min-width:1024px){
  /* Same 1px transparent border as the consumer header, so the logo sits at the same place. */
  body[data-sovanor-surface="customer"] #importer-experience .ix-header{border:1px solid transparent}
  body[data-sovanor-surface="customer"] #importer-experience .ix-brand{gap:8px;padding-inline:8px}
  body[data-sovanor-surface="customer"] #importer-experience .ix-brand>span{display:grid;gap:1px;font-size:15px;font-weight:700;line-height:15px;color:var(--paper);text-align:center;letter-spacing:normal}
  body[data-sovanor-surface="customer"] #importer-experience .ix-brand>span small{margin:0;font-size:9px;font-weight:600;line-height:10.8px;color:var(--mist);letter-spacing:0}
  #importer-experience .ix-header .sv-header-menu-panel{position:relative;align-items:center;gap:5px;padding:5px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(3,14,22,.3)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
  #importer-experience .ix-header .sv-header-menu-panel button{position:relative;z-index:1;min-height:42px;padding:0 15px;border:0;border-radius:999px;background:transparent;box-shadow:none;transform:none;
    color:var(--mist);font-size:.78rem;font-weight:400;white-space:nowrap;transition:color .2s ease}
  #importer-experience .ix-header .sv-header-menu-panel button:is(:hover,[aria-current="page"]){color:var(--paper);background:transparent;transform:none}
  #importer-experience .ix-header .sv-header-menu-panel button:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
  #importer-experience .ix-header .sv-nav-ind{position:absolute;top:0;left:0;width:0;height:0;border-radius:999px;pointer-events:none;opacity:0;
    background:linear-gradient(180deg,rgba(128,242,209,.11),rgba(99,196,239,.04));border:1px solid rgba(128,242,209,.18);box-shadow:inset 0 1px rgba(255,255,255,.1);
    transition:transform .38s cubic-bezier(.2,.8,.2,1),width .38s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
  #importer-experience .ix-header .sv-nav-ind.on{opacity:1}
  #importer-experience .ix-header-actions{gap:8px}
  #importer-experience .ix-header-actions>span{color:var(--mist);font-size:.76rem}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header :is(.ix-cart-button,.ix-profile){border:1px solid var(--line);border-radius:14px;color:var(--paper)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header .ix-cart-button{background:rgba(255,255,255,.03)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header .ix-profile{background:linear-gradient(145deg,#29475b,#162c3a);font-size:16px;font-weight:700}
  /* Calm interaction, as in the consumer header (desktop-hero.css). */
  body[data-sovanor-surface="customer"] #importer-experience .ix-header :is(.ix-cart-button,.ix-profile){transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s cubic-bezier(.2,.7,.2,1),background-color .22s cubic-bezier(.2,.7,.2,1),filter .22s cubic-bezier(.2,.7,.2,1)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header .ix-cart-button:hover{transform:none;border-color:rgba(255,255,255,.16);background-color:rgba(255,255,255,.06)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header .ix-profile:hover{transform:none;border-color:rgba(255,255,255,.16);filter:brightness(1.08)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header :is(.ix-cart-button,.ix-profile):active{transform:scale(.97);transition-duration:.1s}
  #importer-experience .ix-header .sv-header-menu-panel button:active{color:var(--paper);transform:scale(.98)}
}
@media(min-width:1400px){
  #importer-experience .ix-header .sv-header-menu-panel button{min-height:44px;padding-inline:18px;font-size:.86rem}
}

/* Tablets and touch screens: the home header gets the same frame (on desktop desktop-hero.css draws it). */
@media(min-width:700px) and (max-width:1023px),(min-width:1024px) and (hover:none),(min-width:1024px) and (pointer:coarse){
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg{height:76px;min-height:76px;max-height:76px;flex-basis:76px}
}
@media(min-width:1024px){
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg){--hg-iy1:12px;--hg-ix1:30px;--hg-pad:24px;--hg-shift:20px}
  body[data-sovanor-surface="customer"] .screen.active .trust-header{height:94px;min-height:94px}
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg{height:94px;min-height:94px;max-height:94px;flex-basis:94px}
}
@media(min-width:1400px){
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg){--hg-pad:28px}
  body[data-sovanor-surface="customer"] .screen.active .trust-header{height:102px;min-height:102px}
  body[data-sovanor-surface="customer"] #home.active .home-header.sv-hg{height:102px;min-height:102px;max-height:102px;flex-basis:102px}
}
@media(min-width:700px) and (prefers-reduced-motion:reduce){
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg),
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg)::after,
  .sv-hg-frost{transition:none}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header :is(.ix-cart-button,.ix-profile,.sv-header-menu-panel button):active{transform:none}
}
@media(min-width:700px) and (prefers-reduced-transparency:reduce){
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header,#home.active .home-header.sv-hg)::after{background-color:#0c2232;-webkit-backdrop-filter:none;backdrop-filter:none}
  .sv-hg-frost{display:none!important}
}
/* Importer language button (header-glass.js, shared menu of language-menu.js): the consumer header's, at every size. */
body[data-sovanor-surface="customer"] #importer-experience .ix-header .sv-lang-pill{display:inline-flex;align-items:center;gap:7px;height:42px;padding-inline:13px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.035);color:var(--paper);font:600 .76rem/1 Manrope,var(--font);letter-spacing:.08em;cursor:pointer;transition:border-color .22s cubic-bezier(.2,.7,.2,1),background-color .22s cubic-bezier(.2,.7,.2,1)}
body[data-sovanor-surface="customer"] #importer-experience .ix-header .sv-lang-pill svg{width:17px;height:17px;opacity:.85}
body[data-sovanor-surface="customer"] #importer-experience .ix-header .sv-lang-pill:hover{border-color:rgba(255,255,255,.16);background-color:rgba(255,255,255,.06)}
body[data-sovanor-surface="customer"] #importer-experience .ix-header .sv-lang-pill:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
@media(max-width:699px){body[data-sovanor-surface="customer"] #importer-experience .ix-header .sv-lang-pill{height:38px;padding-inline:10px;gap:6px;border-radius:13px}}