/* TEST-ONLY: isolated styles; does not target existing headers */
.hfg-preview{font-family:Manrope,Arial,sans-serif;color:#0a2138;position:relative;isolation:isolate}
.hfg-preview *{box-sizing:border-box}
.hfg-header{height:88px;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px;padding:6px 12px;background:#fff;box-shadow:0 6px 24px #0a234111}
.hfg-menu-button,.hfg-cart{position:relative;display:flex;justify-content:center;align-items:center;width:42px;height:42px;border:1px solid #dce5ef;border-radius:14px;background:#f5f8fc;color:#09233d;box-shadow:0 4px 15px #0b23410b;cursor:pointer;text-decoration:none}
.hfg-menu-button{flex-direction:column;gap:5px}.hfg-menu-button span{width:22px;height:2.5px;border-radius:2px;background:currentColor}
.hfg-logo{display:flex;justify-content:center;align-items:center;min-width:0}.hfg-logo img{display:block;width:min(484px,calc(100vw - 112px));max-width:100%;max-height:124px;height:auto;object-fit:contain}
.hfg-cart svg{width:26px;height:26px}.hfg-cart b{position:absolute;top:-8px;right:-7px;background:#ff8200;color:white;border-radius:99px;min-width:20px;height:20px;text-align:center;font-size:12px;line-height:20px}
.hfg-backdrop{position:fixed;inset:0;background:#0b213b99;opacity:0;visibility:hidden;pointer-events:none;z-index:999990;transition:opacity .25s}
.hfg-drawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,360px);max-width:100%;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:0 24px 24px 0;padding:22px 20px 28px;transform:translateX(-105%);visibility:hidden;z-index:999991;transition:transform .3s ease,visibility .3s}
.hfg-preview.hfg-open .hfg-backdrop{opacity:1;visibility:visible;pointer-events:auto}.hfg-preview.hfg-open .hfg-drawer{transform:translateX(0);visibility:visible}
.hfg-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0 26px;border-bottom:1px solid #e5e9ef;margin-bottom:18px}.hfg-drawer-head a{display:block;max-width:75%}.hfg-drawer-head img{display:block;width:205px;max-width:100%;height:auto}.hfg-drawer-head button{background:#f5f8fc;color:#09233d;border:0;border-radius:14px;width:44px;height:44px;flex-shrink:0;font-size:32px;line-height:1;cursor:pointer;font-weight:700}
.hfg-drawer-nav{display:grid;gap:10px}.hfg-drawer-nav a{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;border-radius:14px;background:#f7f9fd;color:#0a2138;text-decoration:none;font-size:16px;font-weight:800;min-height:56px}.hfg-drawer-nav a span{color:#ff8200;font-size:20px}
.hfg-drawer-actions{margin-top:20px;padding:16px;background:#061f38;border-radius:17px;display:grid;gap:13px}.hfg-drawer-actions a{color:white;text-decoration:none;font-weight:700;font-size:15px}
@media(min-width:641px) and (max-width:1024px){.hfg-header{height:64px;grid-template-columns:48px minmax(0,1fr) 48px;padding:3px 12px}.hfg-menu-button,.hfg-cart{width:40px;height:40px}.hfg-logo img{width:min(440px,calc(100vw - 130px));max-height:108px}}
@media(min-width:1025px){.hfg-preview .hfg-header{display:none}}

/* v0.1.1: lift the three header elements together; preview only */
@media(max-width:1024px){
  .hfg-preview .hfg-header > .hfg-menu-button,
  .hfg-preview .hfg-header > .hfg-logo,
  .hfg-preview .hfg-header > .hfg-cart{transform:translateY(-10px)}
}

/* v0.1.2: keep logo position; lift only menu and cart 10px more */
@media(max-width:1024px){
 .hfg-preview .hfg-header > .hfg-menu-button,
 .hfg-preview .hfg-header > .hfg-cart{transform:translateY(-20px)}
}

/* Integration TEST: legacy mobile/tablet chrome hidden only when the shared header exists.
   Desktop header is preserved. These classes are added only by integration builds. */
@media(max-width:1024px){
 .hf-home-v2.hfg-integrated > .hf-top-strip,
 .hf-home-v2.hfg-integrated > .hf-home-header,
 .hf-home-v2.hfg-integrated > .hf-mobile-drawer,
 .hf-home-v2.hfg-integrated > .hf-mobile-drawer-backdrop,
 .hf-products-v1.hfg-integrated > .hf-products-header,
 .hf-products-v1.hfg-integrated > .hf-products-mobile-drawer,
 .hf-products-v1.hfg-integrated > .hf-products-mobile-drawer-backdrop,
 .hfp.hfg-integrated > .hfp-sitehead,
 .hfp.hfg-integrated > .hfp-drawer,
 .hfp.hfg-integrated > .hfp-drawer-backdrop{display:none!important}
 .hf-home-v2.hfg-integrated > .hfg-preview,
 .hf-products-v1.hfg-integrated > .hfg-preview,
 .hfp.hfg-integrated > .hfg-preview{display:block!important;position:relative!important;z-index:100!important;overflow:visible!important}
}
@media(min-width:1025px){.hfg-integrated > .hfg-preview{display:none!important}}

/* v0.2.1: shared mobile/tablet header follows normal document scrolling.
   Keep the approved layout unchanged; do not alter the WordPress admin toolbar. */
@media (max-width:1024px){
  .hfg-preview,
  .hfg-preview .hfg-header,
  .hfg-integrated > .hfg-preview,
  .hfpromo-shared-header,
  .hfpromo-shared-header .hfg-preview,
  .hfpromo-shared-header .hfg-header{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    margin-top:0!important;
  }
  .hfg-preview .hfg-header{width:100%!important;}
  /* Preserve the approved vertical positioning of menu, logo and cart. */
  .hfg-preview .hfg-header > .hfg-menu-button,
  .hfg-preview .hfg-header > .hfg-logo,
  .hfg-preview .hfg-header > .hfg-cart{transform:translateY(-10px)!important;}
  .hfg-preview .hfg-header > .hfg-menu-button,
  .hfg-preview .hfg-header > .hfg-cart{transform:translateY(-20px)!important;}
}

/* v0.2.2: keep the actual menu/logo/cart bar visible while scrolling.
   The outer shortcode wrapper remains in document flow to reserve its space. */
@media (max-width:1024px){
  .hfg-preview{min-height:88px!important;}
  .hfg-preview > .hfg-header{
    position:fixed!important;top:0!important;left:0!important;right:0!important;
    bottom:auto!important;width:100%!important;z-index:999980!important;
    transform:none!important;margin:0!important;
  }
}
@media (min-width:641px) and (max-width:1024px){
  .hfg-preview{min-height:64px!important;}
}
@media (max-width:1024px){
  body.admin-bar .hfg-preview > .hfg-header{top:46px!important;}
}
@media (min-width:783px) and (max-width:1024px){
  body.admin-bar .hfg-preview > .hfg-header{top:32px!important;}
}

/* v0.2.3 desktop layout. Mobile/tablet rules above are preserved. */
.hfg-desktop{display:none}
@media(min-width:1025px){
  .hfg-preview{min-height:112px;z-index:20}
  .hfg-preview .hfg-header{display:none!important}
  .hfg-preview .hfg-desktop{display:flex!important;align-items:center;gap:clamp(14px,1.7vw,30px);min-height:112px;padding:12px clamp(22px,4vw,80px);background:#f3f4f6;border-bottom:2px solid #dfe3e8;width:100%;}
  .hfg-desktop-logo{display:flex;align-items:center;flex:0 0 clamp(195px,18vw,325px)}
  .hfg-desktop-logo img{display:block;width:100%;height:auto;max-height:92px;object-fit:contain}
  .hfg-desktop-search{display:flex;align-items:center;flex:1 1 190px;min-width:145px;max-width:340px;height:42px;background:white;border:1px solid #d3dce6;border-radius:8px;overflow:hidden}
  .hfg-desktop-search:focus-within{border-color:#ff6a00;box-shadow:0 0 0 2px #ff6a0020}
  .hfg-desktop-search input{min-width:0;width:100%;height:100%;border:0;outline:0;padding:0 10px;background:transparent;color:#061b38;font:500 13px Arial,sans-serif}
  .hfg-desktop-search button{flex:0 0 42px;height:100%;border:0;background:#fff;color:#06264a;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .hfg-desktop-search button svg{width:19px;height:19px}
  .hfg-desktop-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(8px,1.25vw,25px);flex:0 1 auto;min-width:0}
  .hfg-desktop-nav a{display:flex;align-items:center;min-height:60px;white-space:nowrap;position:relative;text-decoration:none;color:#071f3e;font:800 clamp(10px,.85vw,15px)/1.2 Arial,sans-serif;letter-spacing:.05px;text-transform:uppercase}
  .hfg-desktop-nav a:hover{color:#ff6a00}
  .hfg-desktop-nav a.is-active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;background:#ff6a00;border-radius:4px 4px 0 0}
}
@media(min-width:1025px) and (max-width:1280px){
  .hfg-preview .hfg-desktop{padding-left:20px;padding-right:20px;gap:12px}
  .hfg-desktop-logo{flex-basis:190px}
  .hfg-desktop-search{max-width:195px}
  .hfg-desktop-nav{gap:9px}
  .hfg-desktop-nav a{font-size:10px}
}

/* v0.2.4: show one standalone desktop header site-wide; keep integrated mobile header. */
.hfg-sitewide-desktop{display:none!important}
@media(min-width:1025px){
 .hfg-sitewide-desktop{display:block!important;width:100%;position:relative;z-index:9990}
 .hfg-sitewide-desktop > .hfg-preview{display:block!important;min-height:112px}
 .hfg-sitewide-desktop .hfg-desktop{display:flex!important}
}

/* v0.2.5: desktop-only legacy navigation removal, scoped to verified HydroFire components.
   No mobile/tablet rules changed. Do not hide generic theme headers or page content. */
@media (min-width:1025px){
  .hf-home-v2.hfg-integrated > .hf-top-strip,
  .hf-home-v2.hfg-integrated > .hf-home-header,
  .hf-products-v1.hfg-integrated > .hf-products-header,
  .hfp.hfg-integrated > .hfp-sitehead,
  .hfpromo-legacy-header,
  .hf-contact-main-menu {display:none!important;}
  /* Hide only embedded shared headers; sitewide header stays visible. */
  .hfg-integrated > .hfg-preview{display:none!important;}
  .hfg-desktop-search{height:44px!important;min-height:44px!important;margin:0!important;padding:0!important;align-self:center!important;line-height:normal!important;}
  .hfg-desktop-search input[type=search]{display:block!important;box-sizing:border-box!important;flex:1 1 auto!important;width:100%!important;min-width:0!important;height:42px!important;min-height:0!important;max-height:42px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:#061b38!important;font:500 14px/42px Arial,sans-serif!important;letter-spacing:normal!important;text-indent:0!important;}
  .hfg-desktop-search button[type=submit]{display:flex!important;flex:0 0 44px!important;align-items:center!important;justify-content:center!important;width:44px!important;height:42px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:white!important;}
}

/* v0.2.6: HydroFire+ legacy header. Scope to its own component only. */
@media(min-width:1025px){
  .hfp > .hfp-sitehead.hf-home-header,
  .hfp .hfp-sitehead.hf-home-header{display:none!important;}
}

/* v0.2.8: desktop-only vertical centering and larger logo.
   No changes to navigation/search sizing or mobile/tablet layout. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {
    align-items:center!important;
  }
  .hfg-sitewide-desktop .hfg-desktop-logo,
  .hfg-sitewide-desktop .hfg-desktop-search,
  .hfg-sitewide-desktop .hfg-desktop-nav {
    align-self:center!important;
  }
  .hfg-sitewide-desktop .hfg-desktop-logo img {
    transform:scale(1.3);
    transform-origin:center center;
  }
}

/* v0.2.9: equal left/right outer spacing for the desktop content row.
   Keep the background full width; center only the inner row. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {
    box-sizing:border-box!important;
    width:calc(100% - 64px)!important;
    max-width:1480px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    justify-content:space-between!important;
  }
}
@media (min-width:1025px) and (max-width:1280px) {
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {
    width:calc(100% - 40px)!important;
  }
}

/* v0.2.10: center the complete desktop group, not a full-width flex row.
   Equal visible space before logo and after Blog. Mobile remains untouched. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {
    width:max-content!important;
    max-width:calc(100% - 40px)!important;
    margin-inline:auto!important;
    justify-content:center!important;
    gap:clamp(16px,2vw,32px)!important;
  }
  .hfg-sitewide-desktop .hfg-desktop-logo {flex:0 0 clamp(195px,18vw,275px)!important;}
  .hfg-sitewide-desktop .hfg-desktop-search {flex:0 1 340px!important;width:clamp(180px,23vw,340px)!important;}
  .hfg-sitewide-desktop .hfg-desktop-nav {flex:0 0 auto!important;}
}
@media (min-width:1025px) and (max-width:1280px) {
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {gap:12px!important;}
  .hfg-sitewide-desktop .hfg-desktop-logo {flex-basis:190px!important;}
  .hfg-sitewide-desktop .hfg-desktop-search {width:195px!important;}
}

/* v0.2.11: full-width desktop background and true vertical centering. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop,
  .hfg-sitewide-desktop > .hfg-preview {
    background:#f3f4f6!important;
  }
  .hfg-sitewide-desktop > .hfg-preview {
    width:100%!important;
    min-height:112px!important;
    border-bottom:2px solid #dfe3e8;
  }
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {
    height:112px!important;
    min-height:112px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    align-items:center!important;
    border-bottom:0!important;
  }
}

/* v0.2.12: paint the entire viewport width without widening the centered content.
   The preceding v0.2.11 background applied only to the bounded wrapper. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop {
    isolation:isolate!important;
    background:transparent!important;
  }
  .hfg-sitewide-desktop::before {
    content:"";
    position:absolute;
    top:0;bottom:0;left:50%;
    width:100vw;
    transform:translateX(-50%);
    background:#f3f4f6;
    z-index:-1;
    pointer-events:none;
  }
  .hfg-sitewide-desktop > .hfg-preview {background:transparent!important;}
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {
    background:transparent!important;
    transform:translateY(18px);
  }
}

/* v0.2.13: desktop logo only, slightly lower to align visually with search. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-desktop-logo {
    position:relative;
    top:7px;
  }
}

/* v0.2.14: enlarge only the desktop logo; preserve its alignment and all other elements. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-desktop-logo img {
    transform:scale(1.5);
  }
}

/* v0.2.15: make the desktop logo image itself larger, not just a transform.
   Keep its flex column, top offset and all other elements unchanged. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-desktop-logo {overflow:visible!important;}
  .hfg-sitewide-desktop .hfg-desktop-logo img {
    width:calc(100% + 42px)!important;
    max-width:none!important;
    max-height:none!important;
    height:auto!important;
    transform:translateX(-21px)!important;
    object-fit:contain!important;
  }
}

/* v0.2.16: increase desktop logo image width by 15% only. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-desktop-logo img {
    width:calc((100% + 42px) * 1.15)!important;
    transform:translateX(-50%)!important;
    position:relative!important;
    left:50%!important;
  }
}

/* v0.2.17: desktop logo only, another 15% relative to v0.2.16. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-desktop-logo img {
    width:calc((100% + 42px) * 1.3225)!important;
  }
}

/* v0.2.18: reduce desktop logo by 10% compared with v0.2.17 only. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-desktop-logo img {
    width:calc((100% + 42px) * 1.19025)!important;
  }
}

/* v0.2.19: responsive desktop spacing. Reserve the actual logo width in the
   flex layout so it cannot overlap the search; keep existing vertical offsets. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {
    display:flex!important;
    width:max-content!important;
    max-width:calc(100% - 36px)!important;
    gap:clamp(14px,1.65vw,30px)!important;
    justify-content:center!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
  }
  .hfg-sitewide-desktop .hfg-desktop-logo {
    box-sizing:border-box!important;
    flex:0 0 clamp(225px,24vw,345px)!important;
    width:clamp(225px,24vw,345px)!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .hfg-sitewide-desktop .hfg-desktop-logo img {
    display:block!important;
    box-sizing:border-box!important;
    position:static!important;
    left:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    transform:none!important;
  }
  .hfg-sitewide-desktop .hfg-desktop-search {
    box-sizing:border-box!important;
    flex:0 1 clamp(185px,22vw,340px)!important;
    width:clamp(185px,22vw,340px)!important;
    min-width:155px!important;
  }
  .hfg-sitewide-desktop .hfg-desktop-nav {flex:0 0 auto!important;gap:clamp(9px,1.1vw,20px)!important;}
}
@media (min-width:1025px) and (max-width:1390px) {
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {gap:clamp(10px,1vw,16px)!important;}
  .hfg-sitewide-desktop .hfg-desktop-logo {flex-basis:clamp(205px,20vw,275px)!important;width:clamp(205px,20vw,275px)!important;}
  .hfg-sitewide-desktop .hfg-desktop-search {flex-basis:clamp(165px,19vw,255px)!important;width:clamp(165px,19vw,255px)!important;}
  .hfg-sitewide-desktop .hfg-desktop-nav {gap:clamp(7px,.75vw,12px)!important;}
  .hfg-sitewide-desktop .hfg-desktop-nav a {font-size:clamp(10px,.82vw,12px)!important;}
}
@media (min-width:1025px) and (max-width:1120px) {
  .hfg-sitewide-desktop .hfg-desktop-logo {flex-basis:195px!important;width:195px!important;}
  .hfg-sitewide-desktop .hfg-desktop-search {flex-basis:165px!important;width:165px!important;}
  .hfg-sitewide-desktop .hfg-preview .hfg-desktop {gap:10px!important;}
  .hfg-sitewide-desktop .hfg-desktop-nav {gap:7px!important;}
}

/* v0.2.21: retain an accessible real submit control without showing the search icon. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-desktop-search .hfg-search-submit-accessible {
    position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;
    padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;
    clip:rect(0,0,0,0)!important;white-space:nowrap!important;opacity:0!important;pointer-events:none!important;
  }
  .hfg-sitewide-desktop .hfg-desktop-search {position:relative!important;}
}

/* v0.2.22: autocomplete popup; no changes to the header layout. */
@media(min-width:1025px){
 .hfg-sitewide-desktop .hfg-desktop-search{overflow:visible!important;z-index:100!important;}
 .hfg-sitewide-desktop .hfg-live-results{position:absolute;left:0;right:0;top:calc(100% + 7px);max-height:430px;overflow-y:auto;background:#fff;border:1px solid #d9e3ed;border-radius:12px;box-shadow:0 16px 40px #10283e33;z-index:99999;text-align:left;}
 .hfg-sitewide-desktop .hfg-live-results[hidden]{display:none!important;}
 .hfg-sitewide-desktop .hfg-live-item{display:flex;align-items:center;gap:9px;padding:9px 10px;color:#0b2746;text-decoration:none;border-bottom:1px solid #eef2f6;min-width:0;}
 .hfg-sitewide-desktop .hfg-live-item:hover,.hfg-sitewide-desktop .hfg-live-selected{background:#eef6ff;}
 .hfg-sitewide-desktop .hfg-live-thumb{width:42px;height:42px;flex:0 0 42px;object-fit:contain;border-radius:6px;background:#f5f7fa;display:flex;align-items:center;justify-content:center;}
 .hfg-sitewide-desktop .hfg-live-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;}
 .hfg-sitewide-desktop .hfg-live-name{font-size:12px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;}
 .hfg-sitewide-desktop .hfg-live-sku{font-size:10px;color:#6b7787;}
 .hfg-sitewide-desktop .hfg-live-price{font-size:11px;font-weight:700;white-space:normal;text-align:right;max-width:75px;}
 .hfg-sitewide-desktop .hfg-live-all{display:block;padding:11px;text-align:center;color:#0a5da4;font-size:12px;font-weight:700;text-decoration:none;}
 .hfg-sitewide-desktop .hfg-live-empty{padding:14px;color:#526579;font-size:12px;}
}

/* v0.2.27: Widen ONLY the desktop live-results dropdown.
   Keep search input, logo and navigation unchanged. */
@media (min-width:1025px) {
  .hfg-sitewide-desktop .hfg-desktop-search .hfg-live-results {
    right:auto!important;
    width:clamp(420px, 38vw, 560px)!important;
    max-width:calc(100vw - 24px)!important;
    box-sizing:border-box!important;
  }
  .hfg-sitewide-desktop .hfg-live-price {
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-align:right!important;
  }
}

/* v0.2.28: account and cart actions on the shared header, all pages. */
.hfg-preview .hfg-account{position:absolute;right:62px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid #dce5ef;border-radius:12px;background:#f5f8fc;color:#09233d;text-decoration:none;z-index:2}
.hfg-preview .hfg-account svg{width:23px;height:23px}
.hfg-preview .hfg-account:hover,.hfg-preview .hfg-action:hover{color:#ff6b00;border-color:#ff6b00}
.hfg-preview .hfg-header{position:relative}
.hfg-preview .hfg-desktop-actions{display:none}
@media(min-width:1025px){
 .hfg-preview .hfg-account{display:none!important}
 .hfg-preview .hfg-desktop-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
 .hfg-preview .hfg-action{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #d3dce6;border-radius:9px;background:#fff;color:#09233d;text-decoration:none}
 .hfg-preview .hfg-action svg{width:23px;height:23px}
 .hfg-preview .hfg-action b{position:absolute;top:-9px;right:-8px;background:#ff6b00;color:#fff;min-width:19px;height:19px;border-radius:50%;font-size:11px;line-height:19px;text-align:center}
}
@media(max-width:640px){.hfg-preview .hfg-account{right:57px;width:34px;height:34px}.hfg-preview .hfg-account svg{width:21px;height:21px}}

/* v0.2.31: fixed single flex container for mobile account and cart. */
@media(max-width:1024px){
 .hfg-preview .hfg-header{grid-template-columns:48px minmax(0,1fr) 92px!important;gap:8px!important;}
 .hfg-preview .hfg-mobile-actions{grid-column:3;grid-row:1;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;width:92px;position:relative!important;transform:none!important;}
 .hfg-preview .hfg-mobile-actions>.hfg-account,.hfg-preview .hfg-mobile-actions>.hfg-cart{position:relative!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;translate:none!important;margin:0!important;padding:0!important;flex:0 0 42px!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:14px!important;}
 .hfg-preview .hfg-mobile-actions>.hfg-account svg,.hfg-preview .hfg-mobile-actions>.hfg-cart svg{width:24px!important;height:24px!important;display:block!important;}
 .hfg-preview .hfg-mobile-actions>.hfg-cart b{position:absolute!important;top:-8px!important;right:-7px!important;}
 .hfg-preview .hfg-header>.hfg-logo{grid-column:2;grid-row:1;}
}
@media(min-width:1025px){.hfg-preview .hfg-mobile-actions{display:none!important;}}

/* v0.2.32: raise the paired mobile actions to the menu/logo centerline. */
@media (max-width:1024px){
 .hfg-preview .hfg-header > .hfg-mobile-actions{transform:translateY(-30px)!important;align-self:center!important;}
}