.elementor-9 .elementor-element.elementor-element-4c58b2c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-4a344e9 *//* =====================================================
SHOPUP — Additional CSS (FINAL) v10.2 (NO WARNINGS)
- No color-mix()
- Desktop: header + mega only
- Mobile: TOP pill (logo + switch) + BOTTOM tabs
- Mobile burger + sheet removed
- iOS Safari safe switch style (grey OFF / green ON)
===================================================== */

/* =========================
0) TOKENS
========================= */
:root{
  --cloud:#F6F7F9;
  --paper:#FFFFFF;
  --smoky:#0B0C10;

  --bg: var(--cloud);
  --surface: rgba(255,255,255,.72);
  --surfaceStrong: rgba(255,255,255,.88);

  --text:#0E0F12;
  --muted: rgba(14,15,18,.66);

  /* crisp strokes */
  --border: rgba(14,15,18,.16);
  --borderSoft: rgba(14,15,18,.10);

  --blur: 18px;
  --shadow: 0 18px 55px rgba(0,0,0,.10);
  --shadowStrong: 0 26px 85px rgba(0,0,0,.16);

  --R: 28px;
  --pad: 18px;
  --gap: 16px;

  --deskH: 64px;
  --deskHS: 56px;

  --safeB: env(safe-area-inset-bottom, 0px);
  --safeL: env(safe-area-inset-left, 0px);
  --safeR: env(safe-area-inset-right, 0px);

  --zHeader: 10000050;
  --zMega: 10000040;
  --zMobileTop: 10000080;
  --zTabs: 10000070;

  /* switch colors (light) */
  --swOffTrack: #77787B;
  --swOffRing:  #6F7074;
  --swOnTrack:  #2F7D32;
  --swOnRing:   #2F7D32;
}

@media (max-width: 768px){
  :root{ --R: 24px; --pad: 14px; --gap: 14px; }
}

/* DARK */
body.theme-dark{
  --bg: var(--smoky);
  --surface: rgba(14,14,18,.62);
  --surfaceStrong: rgba(10,10,14,.92);
  --text:#F7F7FA;
  --muted: rgba(247,247,250,.74);

  --border: rgba(255,255,255,.18);
  --borderSoft: rgba(255,255,255,.10);

  --blur: 20px;
  --shadow: 0 26px 95px rgba(0,0,0,.58);
  --shadowStrong: 0 34px 120px rgba(0,0,0,.72);

  /* switch colors (dark) */
  --swOffTrack: #5F6064;
  --swOffRing:  #505155;
  --swOnTrack:  #22C55E;
  --swOnRing:   #22C55E;
}

/* =========================
1) BASE
========================= */
*{ box-sizing:border-box; }
html,body{
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-text-size-adjust: 100%;
}
a{ color: inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
:focus{ outline:none; }
a,button{ -webkit-tap-highlight-color: transparent; }

/* =========================
2) ASTRA HEADER OFF
========================= */
.site-header,
.ast-primary-header-bar,
.ast-desktop-header,
.ast-mobile-header,
.main-header-bar{ display:none !important; }

/* =========================
3) SINGLE GLASS MAIN
========================= */
.site-content{ padding: var(--pad) !important; }

#main{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--R) !important;
  box-shadow: var(--shadow) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%) !important;
  backdrop-filter: blur(var(--blur)) saturate(160%) !important;
  overflow: hidden !important;
  padding: calc(var(--pad) + 2px) !important;
}
.entry-content > *{ margin-block: var(--gap) !important; }

/* =========================
4) WRAP (Desktop fixed)
========================= */
.shu-wrap{
  position: fixed !important;
  top: 0 !important; left:0 !important; right:0 !important;
  z-index: var(--zHeader) !important;
}

/* =========================================================
DESKTOP (>=993)
========================================================= */
@media (min-width: 993px){

  body{ padding-top: var(--deskH) !important; }

  .shu-mtop, .shu-tabs{ display:none !important; }

  .shu-header{
    height: var(--deskH);
    background: var(--surfaceStrong);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadowStrong);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
    backdrop-filter: blur(var(--blur)) saturate(160%);
    transition: height .18s ease;
    position: relative;
  }
  .shu-header.is-scrolled{ height: var(--deskHS); }

  .shu-inner{
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    padding: 10px 18px;
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    gap: 14px;
  }

  .shu-logo a{
    font-weight: 950;
    letter-spacing: .10em;
    font-size: 18px;
    white-space: nowrap;
    color: var(--text) !important;
  }
  .shu-logo span{ opacity:.72; }

  .shu-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
  }
  .shu-nav a,
  .shu-nav button{
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    padding: 10px 10px;
    border-radius: 999px;
    color: var(--muted) !important;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    display:inline-flex;
    align-items:center;
    gap: 8px;
    flex: 0 0 auto;
    position:relative;
  }
  .shu-nav a:hover,
  .shu-nav button:hover{
    border-color: var(--borderSoft);
    background: rgba(255,255,255,.35);
  }
  body.theme-dark .shu-nav a:hover,
  body.theme-dark .shu-nav button:hover{
    background: rgba(255,255,255,.08);
  }

  .shu-nav .is-active{ color: var(--text) !important; }
  .shu-nav a.is-active::after,
  .shu-nav button.is-active::after{
    content:"";
    position:absolute;
    left: 12px; right: 12px;
    bottom: -8px;
    height: 3px;
    border-radius: 999px;
    background: var(--text) !important;
    opacity: .92;
  }

  .shu-tools{ display:flex; align-items:center; gap: 10px; justify-content:flex-end; }

  .shu-search input[type="search"]{
    width: 320px;
    max-width: 34vw;
    border-radius: 999px;
    border: 1px solid var(--border) !important;
    padding: 9px 14px;
    font-size: 13px;
    background: rgba(255,255,255,.45) !important;
  }
  body.theme-dark .shu-search input[type="search"]{
    background: rgba(255,255,255,.08) !important;
  }

  .shu-aipill{
    border-radius: 999px;
    border: 1px solid var(--border) !important;
    padding: 9px 14px;
    font-weight: 950;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255,255,255,.35) !important;
    white-space: nowrap;
  }
  body.theme-dark .shu-aipill{ background: rgba(255,255,255,.08) !important; }

  /* Mega */
  .shu-mega{ display:none; position:absolute; left:0; right:0; top: calc(100% + 1px); z-index: var(--zMega); }
  .shu-wrap.is-mega-open .shu-mega{ display:block; }
  .shu-mega-backdrop{
    padding: 18px 0 22px;
    border-top: 1px solid var(--border);
    background: var(--surfaceStrong);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
  .shu-mega-inner{ max-width: 1400px; margin: 0 auto; padding: 0 18px; }
  .shu-mega-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
  .shu-mega-col{
    border-radius: 22px;
    padding: 18px 18px 14px;
    background: rgba(255,255,255,.48) !important;
    border: 1px solid var(--border) !important;
  }
  body.theme-dark .shu-mega-col{ background: rgba(255,255,255,.06) !important; }

  .shu-mega-col h3{
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .shu-mega-col a{ display:block; padding: 9px 0; font-weight: 900; opacity: .88; }
  .shu-mega-col a:hover{ opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
}

/* =========================================================
MOBILE (<=992): TOP PILL + BOTTOM TABS ONLY
========================================================= */
@media (max-width: 992px){

  /* hide desktop header/mega */
  .shu-header, .shu-mega{ display:none !important; }

  /* iOS FIX: do not keep parent fixed */
  .shu-wrap{
    position: static !important;
    top:auto !important; left:auto !important; right:auto !important;
  }

  /* kill any old burger/menu elements if exist */
  .shu-mburger, .shu-burger-ico,
  .shu-menu-sheet, .shu-menu-backdrop, .shu-menu-panel,
  .shu-menu-head, .shu-menu-body, .shu-menu-x, .shu-menu-handle{
    display:none !important;
  }

  /* TOPBAR */
  .shu-mtop{ display:block !important; }
  .shu-mtop{
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: var(--zMobileTop) !important;
    width: min(560px, calc(100vw - 20px)) !important;
    background: transparent !important;
    padding: 0 !important;
  }
  .shu-mtop-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surfaceStrong);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--shadowStrong);
    padding: 10px 12px;
  }

  .shu-mlogo{
    font-weight: 950;
    letter-spacing: .08em;
    font-size: 13px;
    white-space: nowrap;
  }
  .shu-mlogo span{ opacity:.75; }

  .shu-mtop-actions{ display:flex; align-items:center; gap:10px; }

  /* TABS */
  .shu-tabs{ display:flex !important; }
  .shu-tabs{
    position: fixed !important;
    left: max(10px, var(--safeL)) !important;
    right: max(10px, var(--safeR)) !important;
    bottom: calc(10px + var(--safeB)) !important;
    z-index: var(--zTabs) !important;

    max-width: 560px !important;
    margin: 0 auto !important;

    border-radius: 999px !important;
    padding: 8px !important;

    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap: 2px;

    background: var(--surfaceStrong) !important;
    border: 1px solid var(--border) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow: var(--shadowStrong) !important;
  }

  .shu-tab{
    flex:1; min-width:0;
    height:48px;
    border-radius:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    color: rgba(14,15,18,.55);
    font-weight: 900;
    letter-spacing: .10em;
    font-size: 10px;
    text-transform: uppercase;
  }
  body.theme-dark .shu-tab{ color: rgba(255,255,255,.68); }

  .shu-ico{
    width: 20px; height: 20px; display:block;
    background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
            mask: var(--ico) center / contain no-repeat;
  }

  .shu-tab.is-active{
    color: var(--text);
    background: rgba(255,255,255,.55);
    border: 1px solid var(--borderSoft);
  }
  body.theme-dark .shu-tab.is-active{
    background: rgba(255,255,255,.10);
    border: 1px solid var(--borderSoft);
  }

  /* spacing so content doesn't hide behind top & bottom fixed UI */
  body{
    padding-top: 74px !important;
    padding-bottom: calc(92px + var(--safeB)) !important;
  }
}

/* =====================================================
SWITCH (matches your screenshots)
OFF: grey track + white knob + grey ring
ON : green track + white knob + green ring
Works on iOS Safari
===================================================== */
.shu-switch{
  --w: 56px;
  --h: 32px;
  --pad2: 4px;
  --kn: calc(var(--h) - (var(--pad2) * 2));

  width: var(--w) !important;
  height: var(--h) !important;
  border-radius: 999px !important;

  border: 0 !important;
  position: relative !important;
  padding: 0 !important;
  cursor: pointer !important;

  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  background: var(--swOffTrack) !important; /* OFF */
}

.shu-switch .knob{
  position: absolute !important;
  top: 50% !important;
  left: var(--pad2) !important;
  transform: translateY(-50%) !important;

  width: var(--kn) !important;
  height: var(--kn) !important;
  border-radius: 999px !important;

  background: #FFFFFF !important;
  border: 3px solid var(--swOffRing) !important;
  box-shadow: none !important;

  transition: left .18s ease !important;
  -webkit-transform: translateY(-50%) translateZ(0) !important;
}

.shu-switch.is-on .knob{
  left: calc(var(--w) - var(--kn) - var(--pad2)) !important;
}

.shu-switch.is-on{
  background: var(--swOnTrack) !important; /* ON */
}
.shu-switch.is-on .knob{
  border-color: var(--swOnRing) !important;
}

/* Mobile switch sizing */
@media (max-width: 992px){
  .shu-mswitch.shu-switch{
    --w: 50px;
    --h: 30px;
  }
  .shu-mswitch.shu-switch .knob{
    border-width: 3px !important;
  }
}

/* =====================================================
Scroll-to-top ABOVE mobile tabs
===================================================== */
@media (max-width: 992px){
  #ast-scroll-top{
    bottom: calc(10px + var(--safeB) + 92px) !important;
    right: 14px !important;
    z-index: 10000110 !important;
  }
}

/* =====================================================
Footer sync
===================================================== */
footer, .site-footer, #colophon, .sm-footer{
  background: var(--surfaceStrong) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text) !important;
}
#ast-scroll-top{
  background: var(--surfaceStrong) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}/* End custom CSS */