:root{
  --gold: #C99E43;
  --gold-dark: #B08A38;
  --green: #1A2E1F;
  --cream: #FFFBF2;
  --cream-2: #FBF4E8;
  --ink: #0F0F0F;
  --ink-soft: #757575;
  --line: #CCCCCC;
  --line-soft: #E9E0D2;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Bricolage Grotesque', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --container: 1280px;
}
.tfw-header, .tfw-header *{ box-sizing:border-box; }
.tfw-header{
  display:block; width:100%; max-width:100%;
  /* Stops mobile Chrome/Safari's automatic "text autosizer" from
     inflating font-size on narrow single-column text blocks (the
     dropdown/mega mobile lists are exactly that shape) — without this,
     some phones boost the font-size of stacked nav links unevenly and
     the lines can end up overlapping/garbled, even though the same
     layout looks fine in desktop responsive-mode testing. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.tfw-header a{ color:inherit; text-decoration:none; }
.tfw-header button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
.tfw-header ul{ margin:0; padding:0; list-style:none; }

.tfw-header .site-header{
  position: sticky; top:0; z-index: 100;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--sans);
  width: 100%;
  max-width: 100%;
}
.tfw-header .header-top{
  background: var(--cream);
  padding: 14px 0; width: 100%;
  box-shadow: 0px 4px 11px 1px rgba(198,167,105,.2);
  position: relative; z-index: 2;
}
.tfw-header .header-nav-row{
  background: var(--cream);
  width: 100%;
  position: relative; z-index: 1;
}
.tfw-header .header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
/* Header icons — Figma: 18px icons (cart 16px), 30px between icons, no
   button chrome. The icon groups are equal-width flex columns so the logo
   stays exactly centred, and the side offset (Style → Header Icons →
   Spacing) pushes each group in from the container edge like Figma. */
.tfw-header .header-icons{ display:flex; align-items:center; gap:30px; flex:1 1 0; min-width:0; padding-left:34px; }
.tfw-header .header-icons--right{ justify-content:flex-end; padding-left:0; padding-right:34px; }
.tfw-header .icon-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  color: var(--ink); line-height:1; text-decoration:none;
  transition: color .2s ease, background-color .2s ease;
}
/* Hello Elementor styles every <button>/[type=button] with padding,
   border, radius and a pink hover background — reset it all so the
   search button looks exactly like the wishlist/account/cart links. */
.tfw-header .icon-btn,
.tfw-header button.icon-btn,
.tfw-header a.icon-btn{
  padding:0; margin:0; min-width:0; min-height:0;
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
.tfw-header .icon-btn:hover,
.tfw-header .icon-btn:focus,
.tfw-header .icon-btn:active,
.tfw-header button.icon-btn:hover,
.tfw-header button.icon-btn:focus,
.tfw-header button.icon-btn:active{
  background:transparent; border:0; box-shadow:none; text-decoration:none; outline:0;
}
.tfw-header .icon-btn:hover,
.tfw-header button.icon-btn:hover,
.tfw-header a.icon-btn:hover{ color: var(--gold-dark); }
.tfw-header .icon-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.tfw-header .icon-btn svg{ width:18px; height:18px; display:block; }
.tfw-header .icon-btn.js-cart-icon svg{ width:16px; height:16px; }
.tfw-header .icon-btn i{ font-size:18px; line-height:1; display:block; }
.tfw-header .icon-btn.js-cart-icon i{ font-size:16px; }
.tfw-header .hamburger{ display:none; }
.tfw-header .cart-count,
.tfw-header .wishlist-count{
  position:absolute; top:-7px; right:-8px;
  background: var(--gold); color:#fff;
  font-size:9px; font-family: var(--sans); font-weight:600;
  width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.tfw-header .logo{ display:flex; flex-direction:column; align-items:center; gap:0; color: var(--gold); line-height: .8;}
.tfw-header .logo-mark{ display:block; }
.tfw-header .logo-image{ width:130px; height:auto; display:block; }
.tfw-header .logo-word{
  font-family: var(--serif); font-size: 11px; letter-spacing: .2em;
  color: var(--ink); margin-top:4px;
}
.tfw-header .header-nav{
  display:flex; align-items:center; justify-content:center; gap:34px;
  padding: 15px 0;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}
.tfw-header .nav-link{
  font-size: 14.5px; color: var(--ink);
  display:flex; align-items:center; gap:5px;
  transition: color .2s ease;
}
.tfw-header .nav-link:hover, .tfw-header .nav-link.active{ color: var(--gold); }
.tfw-header .nav-caret svg{ margin-top:1px; opacity:.7; }
.tfw-header .nav-dropdown{ position:relative; }
.tfw-header .dropdown-panel{
  position:absolute; top: 100%; left:50%; transform: translateX(-50%) translateY(6px);
  background:#fff; border:1px solid var(--line-soft); border-radius: 6px;
  padding:10px 0; min-width:200px;
  box-shadow: 0 18px 40px rgba(30,20,10,.12);
  opacity:0; visibility:hidden; transition: all .2s ease;
}
.tfw-header .nav-dropdown:hover .dropdown-panel{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.tfw-header .dropdown-panel a{
  display:block; padding: 9px 20px; font-size:13.5px; color: var(--ink-soft); white-space:nowrap;
}
.tfw-header .dropdown-panel a:hover{ background: var(--cream-2); color: var(--ink); }
/* Whichever dropdown link's own page is currently open — see
   is_current_link()/tree_node_has_active() in class-tf-header-widget.php. */
.tfw-header .dropdown-panel a.active{ color: var(--gold); font-weight:500; }

/* Mega menu */
.tfw-header .mega-trigger{ position: static; }
.tfw-header .mega-menu{
  position:absolute; top:100%; left:0; right:0; z-index:150;
  background:#FFFEFB; box-shadow: 0 4px 11px 1px rgba(198,167,105,.2);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: all .22s ease;
}
.tfw-header .mega-trigger:hover .mega-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.tfw-header .mega-menu-inner{
  max-width: var(--container); margin:0 auto; padding: 40px;
  display:grid; grid-template-columns: 200px 1fr 260px; gap:40px;
}
.tfw-header .mega-cats{ display:flex; flex-direction:column; border-right:1px solid var(--line-soft); padding-right:24px; }
.tfw-header .mega-cat{
  text-align:left; padding:10px 12px; font-size:16px; font-family:var(--sans); font-weight:500;
  color: var(--ink); border-radius:4px; display:flex; align-items:center; gap:8px; justify-content:space-between;
  transition: all .15s ease;
}
.tfw-header .mega-cat .arrow{ opacity:0; transition: opacity .15s ease; display:inline-block; }
.tfw-header .mega-cat:hover{ background: rgba(201,158,67,.12); color: var(--gold); }
.tfw-header .mega-cat.active{ background: rgba(201,158,67,.2); color: var(--gold); }
.tfw-header .mega-cat.active .arrow{ opacity:1; }
.tfw-header .mega-cat-label{ flex:1 1 auto; }
.tfw-header .mega-cat-icon{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.tfw-header .mega-cat-icon svg{ width:16px; height:16px; display:block; }
.tfw-header .mega-cat-icon i{ font-size:.95em; }
.tfw-header .mega-browse-all{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft);
  font-size:14px; color: var(--ink); display:flex; align-items:center; gap:6px;
}
.tfw-header .mega-browse-all:hover{ color: var(--gold-dark); }
.tfw-header .mega-cols{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.tfw-header .mega-col{ display:flex; flex-direction:column; gap:21px; }
.tfw-header .mega-col a{ font-size:14px; color: var(--ink); font-weight:300; transition: color .15s ease; display:flex; align-items:center; gap:8px; }
.tfw-header .mega-col a:hover{ color: var(--gold-dark); }
.tfw-header .mega-col a.mega-link-active{ font-weight:500; text-decoration: underline; text-underline-offset:3px; }
.tfw-header .mega-image{ border-radius:10px; overflow:hidden; aspect-ratio: 260/300; }
.tfw-header .mega-image img{ width:100%; height:100%; object-fit:cover; }

/* Only the active Left Category tab's own column group is shown at a
   time — see header.js. Applies in both WordPress-menu and manual nav
   modes, since both now render one .mega-cols-group per tab. */
.tfw-header .mega-cols-groups{ position:relative; }
.tfw-header .mega-cols-group{ display:none; }
.tfw-header .mega-cols-group.active{ display:block; }
.tfw-header .mega-cat i,
.tfw-header .nav-link i,
.tfw-header .mega-col a i{ font-size:.95em; }

@media (max-width: 720px){
  /* Mega menu becomes a simple stacked list, expanding under its nav item.
     Same reasoning as the dropdown-panel reset above: the desktop rule is
     position:absolute + a fixed left/right/z-index, so this mobile reset
     needs !important to unconditionally win rather than risk the mega
     panel staying absolutely positioned (and effectively invisible or
     misaligned) inside the mobile menu list. */
  .tfw-header .nav-dropdown.mega-trigger .mega-menu{
    display:none; position:static !important; top:auto !important; left:auto !important; right:auto !important;
    box-shadow:none !important; background:transparent !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
  }
  .tfw-header .nav-dropdown.mega-trigger.open .mega-menu{ display:block !important; }
  .tfw-header .mega-menu-inner{ display:block; max-width:none; padding:4px 0 16px 16px; }
  .tfw-header .mega-cats{ flex-direction:column; border-right:none; padding-right:0; gap:0; }
  .tfw-header .mega-cat{ padding:8px 0; font-size:14px; }
  .tfw-header .mega-browse-all{ margin-top:8px; padding-top:8px; font-size:13px; }
  .tfw-header .mega-cols{ display:block; margin-top:8px; }
  .tfw-header .mega-col{ gap:0; margin-bottom:4px; }
  .tfw-header .mega-col a{ display:block; padding:7px 0; font-size:13.5px; border-bottom:1px solid var(--line-soft); }
  .tfw-header .mega-col a:last-child{ border-bottom:none; }
  .tfw-header .mega-image{ display:none; }
}

/* Search — full-width panel that slides DOWN from the top of the header
   (search icon opens it; typing and/or picking a category on the left
   both trigger an AJAX product query from header.js, rendered on the
   right). Own design, per the client's own description — not a Figma
   pattern. */
.tfw-header .tf-search-drawer{
  position:fixed; inset:0; z-index:300;
  visibility:hidden; opacity:0;
  transition: opacity .25s ease, visibility .25s ease;
}
.tfw-header .tf-search-drawer.open{ visibility:visible; opacity:1; }
.tfw-header .tf-search-backdrop{ position:absolute; inset:0; background: rgba(15,15,15,.45); }
.tfw-header .tf-search-panel{
  position:absolute; top:0; left:0; right:0;
  background:#fff; max-height:88vh; display:flex; flex-direction:column;
  box-shadow: 0 24px 60px rgba(15,15,15,.25);
  transform: translateY(-100%); transition: transform .3s ease;
}
.tfw-header .tf-search-drawer.open .tf-search-panel{ transform: translateY(0); }
.tfw-header .tf-search-top{
  display:flex; align-items:center; gap:14px; padding:22px 40px;
  border-bottom:1px solid var(--line-soft); flex-shrink:0;
}
.tfw-header .tf-search-top-icon{ flex-shrink:0; color: var(--ink-soft); }
.tfw-header .tf-search-top input{
  flex:1; border:none; outline:none; background:transparent; font-family:var(--sans); font-size:18px; color: var(--ink);
}
.tfw-header .tf-search-close-btn{ font-size:26px; color: var(--ink-soft); line-height:1; flex-shrink:0; }
.tfw-header .tf-search-body{ display:flex; overflow:hidden; flex:1; }
.tfw-header .tf-search-cats{
  flex:0 0 220px; border-right:1px solid var(--line-soft);
  overflow-y:auto; padding:18px 0;
}
.tfw-header .tf-search-cat{
  display:block; width:100%; text-align:left; padding:9px 24px; font-size:14px;
  color: var(--ink-soft); transition: color .15s ease, background .15s ease;
}
.tfw-header .tf-search-cat:hover{ background: var(--cream-2); color: var(--ink); }
.tfw-header .tf-search-cat.active{ color: var(--gold-dark); font-weight:500; background: var(--cream-2); }
.tfw-header .tf-search-products{ flex:1; overflow-y:auto; padding:18px 40px; }
.tfw-header .tf-search-products-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap:6px 18px; }
.tfw-header .tf-search-result{
  display:flex; align-items:center; gap:14px; padding:10px 8px;
  color: var(--ink); border-radius:6px; transition: background .15s ease;
}
.tfw-header .tf-search-result:hover{ background: var(--cream-2); }
.tfw-header .tf-search-result-image{
  flex-shrink:0; width:52px; height:52px; border-radius:6px; overflow:hidden; background: var(--cream-2);
}
.tfw-header .tf-search-result-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.tfw-header .tf-search-result-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tfw-header .tf-search-result-name{
  font-size:14.5px; font-weight:500; color: var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tfw-header .tf-search-result-cat{ font-size:12px; color: var(--ink-soft); }
.tfw-header .tf-search-result-price{
  flex-shrink:0; font-size:14px; font-weight:600; color: var(--ink); white-space:nowrap;
}
.tfw-header .tf-search-result-price .amount{ color: inherit; }
.tfw-header .tf-search-state{
  grid-column: 1 / -1; padding: 22px; text-align:center; font-size:14px; color: var(--ink-soft);
}
.tfw-header .tf-search-state.is-loading::after{
  content:''; display:inline-block; width:14px; height:14px; margin-left:8px;
  border:2px solid var(--line-soft); border-top-color: var(--gold); border-radius:50%;
  vertical-align:middle; animation: tfw-spin .6s linear infinite;
}
@keyframes tfw-spin{ to{ transform: rotate(360deg); } }

@media (max-width:780px){
  .tfw-header .tf-search-body{ flex-direction:column; }
  .tfw-header .tf-search-cats{
    flex:0 0 auto; display:flex; overflow-x:auto; border-right:none;
    border-bottom:1px solid var(--line-soft); padding:12px 16px; gap:6px; white-space:nowrap;
  }
  .tfw-header .tf-search-cat{ width:auto; padding:6px 14px; border-radius:999px; background: var(--cream-2); }
  .tfw-header .tf-search-panel{ max-height:92vh; }
}
@media (max-width:640px){
  .tfw-header .tf-search-top{ padding: 16px 20px; }
  .tfw-header .tf-search-products{ padding:14px 20px; }
}

/* Cart — "Your Bag" panel that slides in from the right (cart icon
   click opens it instead of navigating away; +/- and the trash icon
   update the real WooCommerce cart live via AJAX from header.js). */
.tfw-header .tf-cart-drawer{
  position:fixed; inset:0; z-index:310;
  visibility:hidden; opacity:0;
  transition: opacity .25s ease, visibility .25s ease;
}
.tfw-header .tf-cart-drawer.open{ visibility:visible; opacity:1; }
.tfw-header .tf-cart-backdrop{ position:absolute; inset:0; background: rgba(15,15,15,.45); }
.tfw-header .tf-cart-panel{
  position:absolute; top:0; right:0; bottom:0; width:100%; max-width:420px;
  background: var(--cream); display:flex; flex-direction:column;
  box-shadow: -24px 0 60px rgba(15,15,15,.2);
  transform: translateX(100%); transition: transform .3s ease;
}
.tfw-header .tf-cart-drawer.open .tf-cart-panel{ transform: translateX(0); }
.tfw-header .tf-cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--line-soft); flex-shrink:0;
}
.tfw-header .tf-cart-head h3{ font-family: var(--serif); font-weight:400; font-size:19px; margin:0; display:flex; align-items:center; gap:6px; }
.tfw-header .tf-cart-head-count{ font-family: var(--sans); font-size:13px; color: var(--ink-soft); }
.tfw-header .tf-cart-close-btn{ font-size:24px; color: var(--ink-soft); line-height:1; }
.tfw-header .tf-cart-shipping{ padding:14px 24px; border-bottom:1px solid var(--line-soft); flex-shrink:0; }
.tfw-header .tf-cart-shipping-text{ font-size:12.5px; color: var(--ink); margin:0 0 8px; }
.tfw-header .tf-cart-shipping-bar{ height:4px; background: var(--line-soft); border-radius:99px; overflow:hidden; }
.tfw-header .tf-cart-shipping-bar span{ display:block; height:100%; background: var(--gold); border-radius:inherit; transition: width .3s ease; }
.tfw-header .tf-cart-items{ flex:1; overflow-y:auto; padding:10px 24px; }
.tfw-header .tf-cart-empty{ padding:40px 0; text-align:center; color: var(--ink-soft); font-size:14px; }
.tfw-header .tf-cart-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.tfw-header .tf-cart-item-image{ flex-shrink:0; width:64px; height:64px; border-radius:6px; overflow:hidden; background:#fff; }
.tfw-header .tf-cart-item-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.tfw-header .tf-cart-item-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tfw-header .tf-cart-item-cat{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); }
.tfw-header .tf-cart-item-name{ font-size:14px; font-weight:500; color: var(--ink); }
.tfw-header .tf-cart-item-variation{ font-size:12px; color: var(--ink-soft); }
.tfw-header .tf-cart-item-qty{
  display:inline-flex; align-items:center; gap:10px; margin-top:6px;
  border:1px solid var(--line-soft); border-radius:4px; padding:3px 10px; width:fit-content;
}
.tfw-header .tf-cart-item-qty button{ font-size:15px; color: var(--ink); line-height:1; }
.tfw-header .tf-cart-item-qty span{ font-size:13px; min-width:14px; text-align:center; }
.tfw-header .tf-cart-item-right{ flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; }
.tfw-header .tf-cart-item-remove{ color: var(--ink-soft); transition: color .15s ease; }
.tfw-header .tf-cart-item-remove:hover{ color:#C9504A; }
.tfw-header .tf-cart-item-price{ font-size:13.5px; font-weight:600; color: var(--ink); white-space:nowrap; }
.tfw-header .tf-cart-footer{ padding:18px 24px 22px; border-top:1px solid var(--line-soft); flex-shrink:0; }
.tfw-header .tf-cart-row{ display:flex; align-items:center; justify-content:space-between; font-size:14px; color: var(--ink); margin-bottom:8px; }
.tfw-header .tf-cart-row-muted{ color: var(--ink-soft); font-size:13px; }
.tfw-header .tf-cart-checkout-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background: var(--gold); color:#fff; font-size:15px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  padding:15px; border-radius:3px; margin:12px 0 10px; transition: background .2s ease;
}
.tfw-header .tf-cart-checkout-btn:hover{ background: var(--gold-dark); }
.tfw-header .tf-cart-payment-line{ text-align:center; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); margin:0; }
@media (max-width:480px){ .tfw-header .tf-cart-panel{ max-width:100%; } }

@media (max-width: 980px){
  .tfw-header .header-inner{ padding: 0 20px; }
}

@media (max-width: 720px){
  .tfw-header .header-nav{ display:none; flex-direction:column; align-items:flex-start; gap:0; padding:0; }
  .tfw-header .header-nav.open{
    display:flex; position:fixed; inset: 0 20% 0 0; top:0; background:#fff; z-index:200;
    padding: 90px 24px 24px; box-shadow: 20px 0 50px rgba(0,0,0,.2);
    overflow-y:auto;
  }
  .tfw-header .header-nav .nav-link{ padding:14px 0; width:100%; border-bottom:1px solid var(--line-soft); font-size:16px; }
  /* !important on this whole dropdown-panel/nav-dropdown reset: the
     desktop rule positions the panel with position:absolute; left:50%;
     transform:translateX(-50%), floating and centered under the trigger.
     That combination is exactly what produced the "Subscription" submenu
     rendering cut off/garbled on mobile that was reported — if this
     mobile reset loses the cascade for any reason (a higher-specificity
     rule from elsewhere on the page, or Elementor's own editor preview
     context), the panel silently stays absolutely positioned and
     center-transformed inside a narrow mobile list item, which pushes
     most of its width off-screen and leaves only a sliver of each link's
     text visible. !important makes this reset unconditional instead of
     depending on winning a specificity fight. */
  .tfw-header .nav-dropdown{ width:100% !important; }
  .tfw-header .dropdown-panel{
    position:static !important; top:auto !important; left:auto !important; right:auto !important;
    transform:none !important; opacity:1 !important; visibility:visible !important;
    box-shadow:none !important; border:none !important; display:none; width:100% !important;
    min-width:0 !important; padding:0 0 0 12px !important; margin:0 !important;
  }
  .tfw-header .nav-dropdown.open .dropdown-panel{ display:block !important; }
  /* The desktop rule sets white-space:nowrap on these links so the
     floating panel can size itself to the longest label — on mobile the
     panel is full-width and static instead, so nowrap only risks text
     overflowing/clipping past the edge of the screen on a long label or
     a device with boosted font size. Let it wrap normally here. */
  .tfw-header .dropdown-panel a{ white-space:normal !important; word-break:break-word; line-height:1.35; }
  .tfw-header .hamburger{ display:flex; }
  .tfw-header .header-icons{ width:auto; flex:0 0 auto; padding-left:0; padding-right:0; gap:18px; }
  .tfw-header .header-icons--left .icon-btn:nth-child(1),
  .tfw-header .header-icons--left .icon-btn:nth-child(2){ display:none; }
  .tfw-header .header-icons--right{ display:none; }
  .tfw-header .header-top{ padding: 10px 0; }
  .tfw-header .logo{ position:static; order:-1; }
  .tfw-header .header-icons--left{ order:1; }
  .tfw-header .header-inner{ justify-content:space-between; }
}

/* =========================================================================
   Mobile Bottom Bar — fixed 5-icon tab bar (Home / Search / Categories /
   Wishlist / Cart), mobile only, per Figma. Hidden completely above the
   720px breakpoint; on mobile it's fixed to the viewport bottom, above
   page content — header.js adds matching padding-bottom to <body> so the
   bar never covers the last bit of a page's content or the footer.
   ========================================================================= */
.tfw-header .mobile-tabbar{ display:none; }
@media (max-width:720px){
  .tfw-header .mobile-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:210;
    background:#FFFEFB; border-top:1px solid var(--line-soft);
    box-shadow: 0 -6px 20px rgba(30,20,10,.08);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .tfw-header .mobile-tab{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color: var(--ink-soft); font-size:10.5px; font-weight:500; padding:4px 2px; text-align:center;
    transition: color .15s ease;
  }
  .tfw-header .mobile-tab svg{ width:21px; height:21px; }
  .tfw-header .mobile-tab.active{ color: var(--gold); }
  .tfw-header .mobile-tab-icon-wrap{ position:relative; display:inline-flex; }
  .tfw-header .mobile-tab-badge{
    position:absolute; top:-6px; right:-8px;
    background: var(--gold); color:#fff; font-size:9px; font-weight:600;
    width:15px; height:15px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
}