/* ============================================================ */
/* BK Wireless · /header-footer.css                             */
/* The site header, the phone bottom bar and the footer         */
/* (look F2). Written by apply-header-footer.py from            */
/* variants/header-footer/hf.css: change that file, then run    */
/* the script again.                                            */
/* ============================================================ */

/* The v8 pages (blog, compare, IMEI check ...) load v8.css, not global.css, so the
   tokens this file uses are repeated here with global.css's own values, scoped to
   the header and footer only: nothing in a page's body changes. */
.hf-header,.hf-footer{
  --black:#000000;--white:#FFFFFF;--red:#AE0000;--red-dark:#8A0000;--soft-red:#FCE8E8;
  --charcoal:#1D1D1F;--grey:#555555;--grey-light:#888888;--light:#F5F5F5;--porcelain:#FAF7F2;--border:#E5E0D8;
  --font-sans:'DM Sans','DM Sans Fallback',system-ui,-apple-system,sans-serif;
  --font-mono:'DM Mono','DM Mono Fallback',ui-monospace,monospace;
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --container-max:1200px;--container-pad:16px;
  font-family:var(--font-sans)
}
@media(min-width:768px){.hf-header,.hf-footer{--container-pad:32px}}
@media(min-width:1024px){.hf-header,.hf-footer{--container-pad:5%}}

/* The bottom bar replaces the old phone bars (owner, 2026-10-19). Their markup stays in the page. */
body:has(.hf-dock) .mbar,body:has(.hf-dock) .rmf .rmf-bar{display:none!important}

/* ============================================================ */
/* BK Wireless · /variants/header-footer/hf.css                 */
/* MOCKUP ONLY (2026-10-12). Options for a new site header and  */
/* footer: A, B, C (first round) and D, E, F (second round, at  */
/* the end of this file). No live page loads this file.         */
/* a.html to f.html are written by build.py.                    */
/*                                                              */
/* Every class starts with hf-. Colors and fonts are the        */
/* global.css tokens only. No JavaScript: every menu is a       */
/* <details>/<summary>, so it opens by click, tap, Enter or     */
/* Space. Groups that share a name="" close each other.         */
/* ============================================================ */

.hf-header,.hf-footer{font-family:var(--font-sans);font-size:16px;line-height:1.4}
.hf-header a,.hf-footer a{color:inherit;text-decoration:none}
.hf-header p,.hf-footer p{margin:0}
.hf-header summary,.hf-footer summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hf-header summary::-webkit-details-marker,.hf-footer summary::-webkit-details-marker{display:none}
.hf-header :focus-visible,.hf-footer :focus-visible{outline:2px solid var(--hf-focus);outline-offset:2px}


/* ============================================================ */
/* HEADER                                                       */
/* ============================================================ */
.hf-header{
  --hf-h:60px;                 /* bar height */
  --hf-logo:40px;              /* logo size shown */
  --hf-bg:var(--white);
  --hf-ink:var(--charcoal);
  --hf-strong:var(--black);
  --hf-dim:var(--grey);
  --hf-line:var(--border);
  --hf-panel:var(--white);     /* drop-down background */
  --hf-tint:var(--light);      /* link hover background */
  --hf-on:var(--red);          /* open / hovered menu word */
  --hf-focus:var(--red);
  position:sticky;top:0;z-index:100;
  background:var(--hf-bg);color:var(--hf-ink);border-bottom:1px solid var(--hf-line);
}
.hf-header--b{--hf-h:64px;--hf-logo:48px}
.hf-header--c,.hf-header--e{
  --hf-bg:var(--charcoal);--hf-ink:var(--white);--hf-strong:var(--white);--hf-dim:var(--grey-light);
  --hf-line:var(--grey);--hf-panel:var(--charcoal);--hf-tint:var(--black);--hf-on:var(--white);--hf-focus:var(--white);
  border-bottom-color:var(--charcoal);
}

.hf-header__in{display:flex;align-items:center;gap:10px;max-width:var(--container-max);height:var(--hf-h);margin:0 auto;padding:0 var(--container-pad)}

/* logo */
.hf-logo{position:relative;z-index:2;display:flex;flex:0 0 auto;align-items:center;gap:10px;min-height:44px;color:var(--hf-strong)}
.hf-logo img{width:var(--hf-logo);height:var(--hf-logo);max-width:none}
.hf-logo__word{font-size:19px;font-weight:900;line-height:1;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.hf-header .hf-logo:hover{color:var(--hf-strong)}

/* buttons */
.hf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1.5px solid transparent;border-radius:8px;
        font-family:var(--font-sans);font-size:14.5px;font-weight:700;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;
        transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.hf-header .hf-btn--red{background:var(--red);border-color:var(--red);color:var(--white)}
.hf-header .hf-btn--red:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--white)}
.hf-header .hf-btn--line{background:transparent;border-color:var(--hf-strong);color:var(--hf-strong)}
.hf-header .hf-btn--line:hover{border-color:var(--red);color:var(--red)}
:is(.hf-header--c,.hf-header--e) .hf-btn--line:hover{background:var(--white);border-color:var(--white);color:var(--charcoal)}
.hf-cta{display:flex;flex:0 0 auto;align-items:center;gap:8px;margin-left:auto}
.hf-cta__cash,.hf-cta__tel{display:none}

/* ---------- phone / tablet: menu button + fold-open groups ---------- */
.hf-nav{display:none}
.hf-burger{flex:0 0 auto}
.hf-burger > summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;
                     border:1.5px solid var(--hf-line);border-radius:8px}
.hf-burger > summary > span{display:block;width:20px;height:2px;border-radius:1px;background:var(--hf-strong);transition:transform .2s ease,opacity .2s ease}
.hf-burger[open] > summary > span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hf-burger[open] > summary > span:nth-child(2){opacity:0}
.hf-burger[open] > summary > span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* the rest of the page goes dim; a tap on it closes the menu (it is part of the menu button) */
.hf-burger[open] > summary::before{content:"";position:fixed;top:var(--hf-h);right:0;bottom:0;left:0;z-index:1;background:var(--black);opacity:.5;cursor:default}

.hf-mnav{position:absolute;z-index:3;top:100%;left:0;right:0;max-height:calc(100vh - var(--hf-h));max-height:calc(100dvh - var(--hf-h));
         overflow-y:auto;overscroll-behavior:contain;padding:4px var(--container-pad) 20px;border-top:1px solid var(--hf-line);
         background:var(--hf-panel);color:var(--hf-ink);box-shadow:var(--shadow-md)}
.hf-mnav__list > li{border-bottom:1px solid var(--hf-line)}
.hf-mnav__top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;
              font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--hf-strong)}
.hf-header a.hf-mnav__top{color:var(--hf-strong)}
summary.hf-mnav__top::after{content:"+";flex:0 0 24px;font-size:26px;font-weight:400;line-height:1;text-align:center;color:var(--hf-on)}
.hf-fold[open] > summary.hf-mnav__top::after{content:"\2013"}
a.hf-mnav__top::after{content:"\2192";flex:0 0 24px;font-size:18px;font-weight:400;text-align:center;color:var(--hf-dim)}
.hf-fold__body{padding:0 0 14px}
.hf-fold__all{display:flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--hf-strong)}
.hf-fold__all::after{content:"\2192";font-weight:400}
.hf-fold__h{padding:10px 0 2px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hf-dim)}
.hf-fold__body ul{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.hf-fold__body li a{display:flex;align-items:center;min-height:44px;font-size:15.5px;font-weight:500;line-height:1.25}
.hf-mnav__btns{display:grid;gap:8px;padding-top:16px}

@media(max-width:359px){
  .hf-logo__word{display:none}
}

/* ---------- computer: menu bar with drop-downs ---------- */
@media(min-width:1024px){
  .hf-header{--hf-h:72px;--hf-logo:48px}
  .hf-header--b{--hf-h:88px;--hf-logo:64px}
  .hf-burger{display:none}
  .hf-cta__cash{display:inline-flex}

  .hf-nav{display:block;margin-left:12px}
  .hf-nav__list{display:flex;align-items:center;gap:2px}
  .hf-nav__item{position:relative}
  .hf-nav__top{position:relative;z-index:2;display:flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border-radius:8px;
               font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;color:var(--hf-ink)}
  .hf-header .hf-nav__top:hover{color:var(--hf-on)}
  summary.hf-nav__top::after{content:"";width:7px;height:7px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
                             transform:rotate(45deg);transition:transform .15s ease}
  /* open: the word turns red, the arrow flips, and an unseen layer over the page closes the menu on a click outside it */
  .hf-dd[open] > summary.hf-nav__top{position:static;color:var(--hf-on)}
  .hf-dd[open] > summary.hf-nav__top::after{margin-top:4px;transform:rotate(225deg)}
  .hf-dd[open] > summary.hf-nav__top::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;cursor:default}

  /* small drop-down (options A and C) */
  .hf-sub{position:absolute;z-index:3;top:calc(100% + (var(--hf-h) - 44px) / 2 + 8px);left:-6px;width:max-content;max-width:calc(100vw - 32px);
          padding:10px;border:1px solid var(--hf-line);border-radius:12px;background:var(--hf-panel);color:var(--hf-ink);box-shadow:var(--shadow-md)}
  .hf-sub--right{left:auto;right:-6px}
  .hf-sub__all{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:0 12px;border-radius:8px;
               font-size:16px;font-weight:800;letter-spacing:-.02em}
  .hf-header .hf-sub__all{color:var(--hf-strong)}
  .hf-sub__all::after{content:"\2192";font-weight:400}
  .hf-header .hf-sub__all:hover{background:var(--hf-tint)}
  .hf-sub__cols{display:flex;gap:6px}
  .hf-sub__all + .hf-sub__cols{margin-top:6px;padding-top:4px;border-top:1px solid var(--hf-line)}
  .hf-sub__col{min-width:178px}
  .hf-sub__h{padding:10px 12px 4px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hf-dim)}
  .hf-sub__col ul + .hf-sub__h{margin-top:8px}
  .hf-sub__col li a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;font-size:15px;font-weight:500;white-space:nowrap}
  .hf-header .hf-sub__col li a:hover{background:var(--hf-tint);color:var(--hf-strong)}
  .hf-sub__col--split{min-width:372px}
  .hf-sub__col--split ul{columns:2;column-gap:6px}
  .hf-sub__col--split li{break-inside:avoid}

  /* option C: white words on the dark bar; the open word gets a red line under it */
  :is(.hf-header--c,.hf-header--e) .hf-nav__top:hover,
  :is(.hf-header--c,.hf-header--e) .hf-dd[open] > summary.hf-nav__top{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:7px}

  /* option B: one wide panel under the bar, a group's links in columns */
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-nav__item{position:static}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-dd[open] > summary.hf-nav__top::before{top:var(--hf-h);background:var(--black);opacity:.4}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub{top:100%;left:0;right:0;width:auto;max-width:none;padding:0;border:0;border-top:1px solid var(--hf-line);border-radius:0 0 16px 16px}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub__in{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px 40px;max-width:var(--container-max);margin:0 auto;padding:26px var(--container-pad) 30px}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub--nolead .hf-sub__in{grid-template-columns:minmax(0,1fr)}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub__all{align-self:start;justify-content:flex-start;gap:12px;min-height:48px;padding:0;font-size:36px;font-weight:900;line-height:1;letter-spacing:-.045em}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub__all:hover{background:transparent;color:var(--red)}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub__cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:28px;margin:0;padding:0;border:0}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub__col{min-width:0}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub__h{margin-bottom:4px;padding:6px 0 10px;border-bottom:1.5px solid var(--charcoal);color:var(--hf-strong)}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub__col li a{padding:0;font-size:16px;font-weight:600;white-space:normal}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub__col li a:hover{background:transparent;color:var(--red)}
  :is(.hf-header--b,.hf-header--e,.hf-header--f) .hf-sub__col--split ul{columns:3;column-gap:28px}
}


/* ============================================================ */
/* FOOTER                                                       */
/* ============================================================ */
.hf-footer{
  --hf-bg:var(--porcelain);
  --hf-ink:var(--charcoal);
  --hf-strong:var(--black);
  --hf-dim:var(--grey);
  --hf-line:var(--border);
  --hf-rule:var(--charcoal);
  --hf-on:var(--red);
  --hf-focus:var(--red);
  background:var(--hf-bg);color:var(--hf-ink);border-top:1px solid var(--hf-line);font-size:15px;line-height:1.45;
}
.hf-footer--b,.hf-footer--c,.hf-footer--d,.hf-footer--e,.hf-footer--f{
  --hf-bg:var(--black);--hf-ink:var(--porcelain);--hf-strong:var(--white);--hf-dim:var(--grey-light);
  --hf-line:var(--charcoal);--hf-rule:var(--grey);--hf-on:var(--white);--hf-focus:var(--white);
  border-top:0;
}
.hf-footer__in{max-width:var(--container-max);margin:0 auto;padding:28px var(--container-pad) 24px}

/* logo, address, phone, email, hours */
.hf-ftop{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hf-flogo{display:block;flex:0 0 auto}
.hf-flogo img{max-width:none}
.hf-nap{font-style:normal}
.hf-nap__row{display:flex;flex-wrap:wrap;align-items:center;min-height:26px}
.hf-nap__row > * + *::before{content:"\00B7";margin:0 10px;color:var(--hf-dim)}
.hf-nap__addr > span{display:inline-block}
.hf-nap a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--hf-strong)}
.hf-footer .hf-nap a:hover{text-decoration:underline}
/* hours: one line per span, unless a wider rule below puts them side by side */
.hf-nap__hours{display:block;padding:2px 0;color:var(--hf-dim)}
.hf-nap__hours > span{display:block}
.hf-nap__hours > * + *::before{content:none}
.hf-social{display:flex;flex-wrap:wrap;gap:0 20px}
.hf-social a,.hf-legal a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}
.hf-footer .hf-social a:hover,.hf-footer .hf-legal a:hover{text-decoration:underline}

/* fold-open link groups (options A and C) */
.hf-fgroups{margin-top:16px;border-top:1.5px solid var(--hf-rule)}
.hf-fg{border-bottom:1px solid var(--hf-line);background:var(--hf-bg)}
.hf-fg > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;
                 font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--hf-strong)}
.hf-fg > summary::after{content:"+";flex:0 0 22px;font-size:24px;font-weight:400;line-height:1;text-align:center;color:var(--hf-on)}
.hf-fg[open] > summary::after{content:"\2013"}
.hf-fg__panel{background:var(--hf-bg)}
.hf-fg__panel ul{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding:0 0 12px}
.hf-fg__panel a{display:flex;align-items:center;min-height:44px;font-size:15px;line-height:1.25}
.hf-footer .hf-fg__panel a:hover{text-decoration:underline}

/* copyright, legal links, notice */
.hf-fbottom{display:flex;flex-direction:column;align-items:flex-start;margin-top:16px}
.hf-copy{font-size:13px;color:var(--hf-dim)}
.hf-legal{display:flex;flex-wrap:wrap;gap:0 20px}
.hf-marks{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--hf-dim)}

@media(min-width:760px){
  .hf-footer__in{padding-top:32px}
  .hf-fbottom{flex-direction:row;align-items:center;justify-content:space-between;gap:8px 24px}
  .hf-fg__panel ul{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}

  /* option A: logo, contact lines and social links on one line; the five groups side by side.
     An open group's links run the full width under the row (each panel is 5 groups wide, pulled back to the left edge). */
  :is(.hf-footer--a,.hf-footer--e) .hf-ftop{flex-direction:row;align-items:center;gap:18px}
  :is(.hf-footer--a,.hf-footer--e) .hf-nap{flex:1 1 auto;min-width:0}
  :is(.hf-footer--a,.hf-footer--e) .hf-social{flex:0 0 auto;flex-wrap:nowrap;margin-left:auto}
  :is(.hf-footer--a,.hf-footer--e) .hf-fgroups{display:flex;align-items:flex-start}
  :is(.hf-footer--a,.hf-footer--e) .hf-fg{flex:0 0 20%;min-width:0;border-bottom:0;background:transparent}
  :is(.hf-footer--a,.hf-footer--e) .hf-fg > summary{justify-content:flex-start;gap:6px;padding:0 12px 0 2px;border-bottom:1px solid var(--hf-line)}
  :is(.hf-footer--a,.hf-footer--e) .hf-fg[open] > summary{border-bottom-color:var(--hf-on);color:var(--hf-on);box-shadow:inset 0 -1px 0 var(--hf-on)}
  :is(.hf-footer--a,.hf-footer--e) .hf-fg__panel{position:relative;width:500%;padding:6px 2px 0;border-bottom:1px solid var(--hf-line)}
  :is(.hf-footer--a,.hf-footer--e) .hf-fg:nth-child(2) .hf-fg__panel{margin-left:-100%}
  :is(.hf-footer--a,.hf-footer--e) .hf-fg:nth-child(3) .hf-fg__panel{margin-left:-200%}
  :is(.hf-footer--a,.hf-footer--e) .hf-fg:nth-child(4) .hf-fg__panel{margin-left:-300%}
  :is(.hf-footer--a,.hf-footer--e) .hf-fg:nth-child(5) .hf-fg__panel{margin-left:-400%}
  :is(.hf-footer--a,.hf-footer--e) .hf-fg__panel ul{padding-bottom:6px}
}

/* option B: short and centered */
.hf-footer--b .hf-footer__in{padding-top:32px}
.hf-footer--b .hf-ftop,.hf-footer--b .hf-fbottom{align-items:center;text-align:center}
.hf-footer--b .hf-nap__row{justify-content:center}
.hf-footer--b .hf-fbottom{flex-direction:column;gap:0;margin-top:6px}
.hf-footer--b .hf-legal,.hf-footer--b .hf-social{justify-content:center}
.hf-footer--b .hf-copy{order:3;margin-top:6px}
.hf-footer--b .hf-marks{max-width:860px;margin-left:auto;margin-right:auto;text-align:center}
@media(min-width:760px){
  .hf-footer--b .hf-fbottom{flex-flow:row wrap;justify-content:center;gap:0 20px}
  .hf-footer--b .hf-copy{flex:0 0 100%}
}

/* contact lines side by side from 1024 up (A and B) */
@media(min-width:1024px){
  :is(.hf-footer--a,.hf-footer--e) .hf-nap,.hf-footer--b .hf-nap{display:flex;flex-wrap:wrap;align-items:center}
  :is(.hf-footer--a,.hf-footer--e) .hf-nap__row + .hf-nap__row:not(.hf-nap__hours)::before,
  .hf-footer--b .hf-nap__row + .hf-nap__row:not(.hf-nap__hours)::before{content:"\00B7";margin:0 10px;color:var(--hf-dim)}
  :is(.hf-footer--a,.hf-footer--e) .hf-nap__hours,.hf-footer--b .hf-nap__hours{display:flex;flex:0 0 100%;padding:0}
  :is(.hf-footer--a,.hf-footer--e) .hf-nap__hours > span,.hf-footer--b .hf-nap__hours > span{display:inline}
  :is(.hf-footer--a,.hf-footer--e) .hf-nap__hours > * + *::before,.hf-footer--b .hf-nap__hours > * + *::before{content:"\00B7"}
  .hf-footer--b .hf-nap{justify-content:center}
}

/* option C: contact block on the left, the fold-open list on the right */
@media(min-width:900px){
  .hf-footer--c .hf-fmain{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:48px;align-items:start}
  .hf-footer--c .hf-fgroups{margin-top:0}
  .hf-footer--c .hf-fg__panel ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ============================================================ */
/* SECOND ROUND: OPTIONS D, E, F                                */
/* E shares rules with B (wide menu panel), C (dark colors) and */
/* A (footer groups in one row): see the :is(...) rules above.  */
/* F uses the same wide menu panel, in white, with E's pictures. */
/* ============================================================ */

/* ---------- D header: a strip with address, hours and phone above the bar ---------- */
/* The strip scrolls away with the page; only the bar stays stuck to the top. */
.hf-header--d{--hf-strip:44px;top:calc(-1 * var(--hf-strip))}
.hf-strip{background:var(--black);color:var(--white);font-family:var(--font-mono);font-size:12.5px;line-height:1.2;letter-spacing:-.01em}
.hf-strip__in{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--container-max);height:var(--hf-strip);margin:0 auto;padding:0 var(--container-pad)}
.hf-strip__addr{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-strip__addr > span + span,.hf-strip__hours{display:none}      /* phone: street and phone number only */
.hf-strip a{display:inline-flex;flex:0 0 auto;align-items:center;min-height:var(--hf-strip);font-weight:500}
.hf-header .hf-strip a:hover{text-decoration:underline}
.hf-header--d .hf-burger[open] > summary::before{top:calc(var(--hf-h) + var(--hf-strip))}
.hf-header--d .hf-mnav{max-height:calc(100vh - var(--hf-h) - var(--hf-strip));max-height:calc(100dvh - var(--hf-h) - var(--hf-strip))}
@media(min-width:1024px){
  .hf-header--d{--hf-strip:36px}
  .hf-strip__addr > span + span{display:inline}
  .hf-strip__hours{display:flex;flex:0 0 auto;margin-left:auto;color:var(--grey-light)}
  .hf-strip__hours > span + span::before{content:"\00B7";margin:0 10px}
}

/* ---------- E and F headers: picture cards in the Repairs menu ---------- */
.hf-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:6px 0 4px}
.hf-pic{display:block;overflow:hidden;border-radius:10px;background:var(--hf-tint)}
.hf-pic img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.hf-pic span{display:flex;align-items:center;min-height:44px;padding:4px 10px;font-size:13.5px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--hf-strong)}
.hf-header .hf-pic:hover span{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
@media(min-width:1024px){
  .hf-header--e .hf-sub__h{border-bottom-color:var(--hf-line)}
  .hf-header--e .hf-sub__all:hover,
  .hf-header--e .hf-sub__col li a:hover{color:var(--hf-strong);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
  /* Repairs: brand list in a narrow column, pictures and the other repair types in the wide one */
  :is(.hf-header--e,.hf-header--f) .hf-sub--pics .hf-sub__cols{grid-auto-flow:row;grid-template-columns:170px minmax(0,1fr)}
  :is(.hf-header--e,.hf-header--f) .hf-pics{gap:12px;padding:12px 0 6px}
  :is(.hf-header--e,.hf-header--f) .hf-pic span{font-size:15px}
  :is(.hf-header--e,.hf-header--f) .hf-sub__col--pics ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
}

/* ---------- F header: logo in the middle, hanging below the bar ---------- */
.hf-header--f{--hf-logo:60px}
.hf-header--f .hf-header__in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.hf-header--f .hf-burger{justify-self:start}
.hf-header--f .hf-cta{justify-self:end;margin-left:0}
.hf-header--f .hf-logo{z-index:4;align-self:start;min-height:0;margin-top:10px;border-radius:50%;box-shadow:0 0 0 4px var(--hf-bg),var(--shadow-md)}
/* phone menu: fills the screen, big words */
.hf-header--f .hf-mnav{min-height:calc(100vh - var(--hf-h));min-height:calc(100dvh - var(--hf-h));padding-top:24px}
.hf-header--f .hf-mnav__top{min-height:62px;font-size:27px;font-weight:900;letter-spacing:-.045em}
@media(min-width:1024px){
  .hf-header--f{--hf-logo:80px}
  .hf-header--f .hf-logo{margin-top:8px}
  .hf-header--f .hf-nav{justify-self:start;margin-left:-7px}
  .hf-header--f .hf-nav__list{gap:0}
  .hf-header--f .hf-nav__top{padding:0 7px;font-size:14.5px}
  .hf-header--f .hf-sub__in{padding-top:42px}        /* the logo hangs over the top of the open panel */
}
@media(min-width:1200px){
  .hf-header--f .hf-nav{margin-left:-10px}
  .hf-header--f .hf-nav__list{gap:2px}
  .hf-header--f .hf-nav__top{padding:0 10px;font-size:15px}
}

/* ---------- D and F footers: a red band on top of the black part ---------- */
.hf-fband{background:var(--red);color:var(--white)}
.hf-fband__in{max-width:var(--container-max);margin:0 auto;padding:24px var(--container-pad)}
.hf-footer .hf-fband :focus-visible{outline-color:var(--white)}

/* D: logo, then three blocks (Contact, Hours, Find us) */
.hf-footer--d .hf-fband__in{display:grid;gap:16px}
.hf-footer--d .hf-flogo{justify-self:start;border-radius:50%;box-shadow:0 0 0 3px var(--white)}
.hf-blocks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 20px;font-style:normal}
.hf-block--find{grid-column:1 / -1}
.hf-block__h{margin-bottom:2px;font-size:21px;font-weight:900;line-height:1.1;letter-spacing:-.035em;text-transform:uppercase}
.hf-block a{display:inline-flex;align-items:center;min-height:44px;font-size:15.5px;font-weight:700;overflow-wrap:anywhere}
.hf-footer .hf-block a:hover{text-decoration:underline}
.hf-block__line{padding:4px 0;font-size:15px;font-weight:500;line-height:1.4}
.hf-block__links{display:flex;flex-wrap:wrap;gap:0 18px}
.hf-footer--d .hf-footer__in{padding-top:4px}
.hf-fgroups--one{margin-top:0;border-top:0}
.hf-fgroups--one .hf-fg__panel{padding:0 0 8px;columns:2;column-gap:16px}
.hf-fgroups--one .hf-fg__panel ul{display:block;padding:0}
.hf-allcol{padding-bottom:10px;break-inside:avoid}
.hf-allcol__h{padding:10px 0 2px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hf-dim)}
.hf-footer--d .hf-fbottom{margin-top:8px}
@media(min-width:760px){
  .hf-footer--d .hf-fband__in{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:36px}
  .hf-blocks{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .hf-block--find{grid-column:auto}
  .hf-fgroups--one .hf-fg__panel{columns:4;column-gap:28px}
}

/* F: "Visit BK Wireless" with the two main buttons, then a short black part */
.hf-fband--cta .hf-fband__in{display:flex;flex-direction:column;gap:16px}
.hf-visit__h{font-size:30px;font-weight:900;line-height:1;letter-spacing:-.045em;text-transform:uppercase}
.hf-visit__nap{margin-top:8px;font-size:15px;font-style:normal;font-weight:500;line-height:1.5}
.hf-visit__nap > span{display:block}
.hf-visit__btns{display:flex;flex-wrap:wrap;gap:8px}
.hf-footer .hf-btn--white{background:var(--white);border-color:var(--white);color:var(--red)}
.hf-footer .hf-btn--white:hover{background:var(--soft-red);border-color:var(--soft-red);color:var(--red-dark)}
.hf-footer .hf-btn--ghost{border-color:var(--white);color:var(--white)}
.hf-footer .hf-btn--ghost:hover{background:var(--white);color:var(--red)}
.hf-footer--f .hf-footer__in{padding-top:10px}
.hf-frow{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.hf-frow > a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:var(--hf-strong)}
.hf-footer .hf-frow > a:hover{text-decoration:underline}
.hf-footer--f .hf-fbottom{margin-top:0}
@media(min-width:760px){
  .hf-fband--cta .hf-fband__in{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
  .hf-visit__h{font-size:36px}
  .hf-visit__nap > span + span{display:inline}
  .hf-visit__nap > span + span + span::before{content:"\00B7";margin:0 10px}
  .hf-visit__btns{flex:0 0 auto;flex-wrap:nowrap}
  .hf-frow .hf-legal{margin-left:auto}
}

/* ---------- E footer on a phone: the five groups in two columns, an open group's links run the full width ---------- */
@media(max-width:759px){
  .hf-footer--e .hf-fgroups{display:flex;flex-wrap:wrap;align-items:flex-start;border-bottom:1px solid var(--hf-line)}
  .hf-footer--e .hf-fg{flex:0 0 50%;min-width:0;border-bottom:0}
  .hf-footer--e .hf-fg > summary{padding-right:16px}
  .hf-footer--e .hf-fg__panel{width:200%;border-top:1px solid var(--hf-line)}
  .hf-footer--e .hf-fg:nth-child(even) .hf-fg__panel{margin-left:-100%}
}


/* ============================================================ */
/* THIRD ROUND: F1, F2, F3                                      */
/* Same look as F. "Book repair" leaves the top bar and sits in */
/* a bar fixed to the bottom of the screen (.hf-dock).          */
/* F1 two buttons, F2 tab bar, F3 floating pill. On a computer  */
/* all three are one small pill at the bottom right.            */
/* .hf-dock__main is the red button of the bar: Book repair in  */
/* F1 and F3, Get cash today in F2 (cash first).                 */
/* ============================================================ */

/* F look: each part keeps its place when the one before it is not there */
.hf-header--f .hf-header__in > .hf-burger,.hf-header--f .hf-nav{grid-column:1;grid-row:1}
.hf-header--f .hf-logo{grid-column:2;grid-row:1}
.hf-header--f .hf-cta{grid-column:3;grid-row:1}

/* MOCKUP ONLY: the repair pages have their own phone price bar; it is hidden here so two bars do not stack */
body:has(.hf-dock) .rmf .rmf-bar{display:none}

/* Layers inside the bar: 1 the dim layer over the page (menu open), 2 the bar's background, 3 its buttons, 4 the menu sheet */
.hf-dock{position:fixed;z-index:5;right:0;bottom:0;left:0;color:var(--hf-ink)}
.hf-dock::before{content:"";position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;border-top:1px solid var(--hf-line);background:var(--hf-bg)}
.hf-dock > a,.hf-dock__hit{position:relative;z-index:3}
.hf-dock__hit{font-style:normal}
.hf-dock__t{white-space:nowrap}
.hf-dock svg{display:block;flex:0 0 auto;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hf-dock :focus-visible{outline-offset:-2px}

/* the menu that opens from the bottom (F2, F3) */
.hf-header .hf-dock .hf-burger{justify-self:stretch}
.hf-dock .hf-burger > summary{position:static;display:block;width:auto;height:auto;border:0;border-radius:0}
.hf-header .hf-dock .hf-mnav{top:auto;bottom:100%;z-index:4;min-height:0;max-height:calc(100vh - var(--hf-h) - 120px);max-height:calc(100dvh - var(--hf-h) - 120px);
                             padding-top:0;border-top:0;border-radius:18px 18px 0 0}
.hf-dock .hf-mnav::before{content:"";display:block;width:40px;height:4px;margin:10px auto 2px;border-radius:2px;background:var(--hf-line)}
.hf-header .hf-dock .hf-mnav__top{min-height:54px;font-size:19px;font-weight:800;letter-spacing:-.03em}

@media(max-width:1023px){
  /* room at the end of the page, so the bar never covers the last lines */
  .hf-footer--f1,.hf-footer--f2{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .hf-footer--f3{padding-bottom:calc(76px + env(safe-area-inset-bottom))}

  /* ---------- F1: two buttons ---------- */
  /* the menu opens from the top and fills the screen: room at its end, so its last button scrolls clear of the bar */
  .hf-header--f1 .hf-mnav{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .hf-dock--bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px var(--container-pad) calc(10px + env(safe-area-inset-bottom))}
  .hf-dock--bar > a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;border:1.5px solid var(--hf-strong);border-radius:8px;
                    font-size:14.5px;font-weight:700;letter-spacing:-.01em}
  .hf-dock--bar svg{display:none}
  .hf-header .hf-dock--bar .hf-dock__call{color:var(--hf-strong)}
  .hf-header .hf-dock--bar .hf-dock__main{border-color:var(--red);background:var(--red);color:var(--white)}

  /* ---------- F2: tab bar, the red button raised in the middle ---------- */
  .hf-header .hf-dock .hf-dock__alt{display:none}       /* "Book repair" is in this bar on computers only */
  .hf-dock--tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;padding:0 4px env(safe-area-inset-bottom)}
  .hf-dock--tabs > a,.hf-dock--tabs .hf-dock__hit{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-height:58px;padding:0 2px 8px;
                                                font-size:11px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
  .hf-dock--tabs .hf-dock__num{display:none}
  .hf-header .hf-dock--tabs .hf-dock__main{color:var(--red)}
  .hf-dock--tabs .hf-dock__main svg{box-sizing:content-box;width:26px;height:26px;margin-top:-22px;padding:13px;border-radius:50%;background:var(--red);color:var(--white);
                                    box-shadow:0 0 0 4px var(--hf-bg),var(--shadow-md)}
  .hf-dock--tabs .hf-burger[open] .hf-dock__hit{color:var(--red)}
  /* menu open: the raised red button stays whole, on top of the sheet's bottom edge (it was cut in half by the sheet);
     the sheet keeps room at its end so the button never covers its last row */
  .hf-dock--tabs > .hf-dock__main{z-index:5}
  .hf-header .hf-dock--tabs .hf-mnav{padding-bottom:44px}

  /* ---------- F3: floating pill ---------- */
  .hf-dock--pill{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;display:flex;align-items:center;gap:2px;padding:6px;color:var(--white)}
  .hf-dock--pill::before{border:0;border-radius:16px;background:var(--charcoal);box-shadow:var(--shadow-md)}
  .hf-dock--pill > a,.hf-dock--pill .hf-dock__hit{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:0 12px;border-radius:11px;
                                                font-size:14.5px;font-weight:700;letter-spacing:-.01em}
  .hf-dock--pill .hf-dock__num,.hf-dock--pill .hf-dock__main svg{display:none}
  .hf-header .hf-dock--pill > a{color:var(--white)}
  .hf-dock--pill .hf-dock__main{flex:1 1 auto;background:var(--red)}
  .hf-dock--pill .hf-burger[open] .hf-dock__hit{background:var(--black)}
  .hf-header .hf-dock--pill .hf-mnav{bottom:calc(100% + 8px);border-radius:18px;color:var(--hf-ink)}
}
@media(max-width:359px){
  .hf-dock--bar .hf-dock__num{display:none}
  .hf-dock--pill > a,.hf-dock--pill .hf-dock__hit{padding:0 9px}
  .hf-dock--pill .hf-dock__call .hf-dock__t{display:none}
}

/* ---------- computer: one small pill at the bottom right, the same for F1, F2 and F3 ---------- */
@media(min-width:1024px){
  .hf-dock{right:24px;bottom:24px;left:auto;display:flex;align-items:center;gap:4px;padding:6px;color:var(--white)}
  .hf-dock::before{border:1px solid var(--grey);border-radius:14px;background:var(--charcoal);box-shadow:var(--shadow-md)}
  .hf-header .hf-dock .hf-dock__nav{display:none}
  .hf-dock > a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:9px;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
  .hf-header .hf-dock > a{color:var(--white)}
  .hf-dock svg{width:20px;height:20px}
  .hf-dock__call{order:1}
  .hf-dock__main{order:2;background:var(--red)}
  .hf-dock__main svg{display:none}
  .hf-header .hf-dock__call:hover{text-decoration:underline}
  .hf-header .hf-dock__main:hover{background:var(--red-dark)}
  .hf-footer--f1 .hf-footer__in,.hf-footer--f2 .hf-footer__in,.hf-footer--f3 .hf-footer__in{padding-bottom:88px}
  /* F2, cash first: the pill is Book repair + Get cash today; the phone number is in the top bar */
  .hf-header .hf-dock--tabs .hf-dock__call{display:none}
  .hf-dock__alt{order:1}
  .hf-dock__alt svg{display:none}
  .hf-header .hf-dock__alt:hover{text-decoration:underline}
  .hf-cta__tel{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-mono);font-size:15px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
  .hf-header .hf-cta__tel{color:var(--hf-strong)}
  .hf-header .hf-cta__tel:hover{color:var(--red)}
}