/* ---------------------------------------------------------------------------
   Trustel Mobile — the frame every customer page shares  (v6.5.0)

   The header, the footer and the colours used to be copied into each page.
   There were two copies (Home/Repairs/Track and Cases/Feedback/Privacy/Terms),
   and over time they drifted: four pages lost their footer, the cart icon
   vanished on phones on those four, "Get a Phone" turned bold on two of them,
   and Cases and Feedback ended up with their own grey.

   Now there is one copy, here. Every customer page links this file before its
   own <style>, so a page can still style its own content, but nothing in a
   page may style the header or footer — check.sh refuses a page that tries.

   The header and footer MARKUP is repeated in each page (static pages, no
   build step). check.sh compares the eight copies, so they cannot drift
   either.
   --------------------------------------------------------------------------- */

:root{
  --ink:#10131f;
  --navy:#161a2e;
  --navy-soft:#222848;
  --gold:#c9a55c;          /* buttons, marks, anything on a dark background */
  --gold-bright:#e2c585;   /* gold text on the dark header, hero and footer */
  --gold-text:#85652a;     /* gold TEXT on cream: #c9a55c there is ~2:1, this is ~5:1 */
  --paper:#faf7f1;
  --paper-card:#f3eee3;
  --slate:#6a7088;
  --line:rgba(201,165,92,.28);
}

/* Form controls take the page's font. Browsers default them to their own
   (Arial on most), which is why the cart count on the home page and the
   close buttons looked different from everything around them. */
button,input,select,textarea{font-family:inherit}

.nav,.nav *,.site-foot,.site-foot *{box-sizing:border-box}

/* ---- skip link (keyboard users) ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ---- header ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(20,24,42,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,165,92,.22);margin:0}
.nav-inner{width:min(1140px,92vw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex:0 0 auto;margin:0 20px 0 0;padding:0}
.nav .brand img{width:42px;height:42px;display:block;max-width:none}
.nav .brand .name{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.18rem;letter-spacing:.01em;white-space:nowrap;color:#fff}
.nav .brand .name .accent{color:var(--gold-bright)}
.nav-links{display:flex;gap:34px;align-items:center;margin:0;padding:0}
.nav-links a{color:rgba(255,255,255,.78);font-size:.92rem;font-weight:400;letter-spacing:normal;white-space:nowrap;text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold-bright)}
.nav-links a.nav-cta{color:var(--ink);background:var(--gold);padding:9px 18px;border-radius:999px;transition:background .2s,transform .2s}
.nav-links a.nav-cta:hover{color:var(--ink);background:var(--gold-bright);transform:translateY(-1px)}

/* The cart: a button on the home page (it opens the drawer there), a link to
   it everywhere else. Same look either way, with a 44px tap area. */
.nav .cart-link,.nav .cart-btn{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:44px;min-height:44px;margin:0 0 0 6px;padding:6px;border:0;border-radius:0;background:none;box-shadow:none;color:rgba(255,255,255,.85);text-decoration:none;cursor:pointer;width:auto}
.nav .cart-link:hover,.nav .cart-btn:hover{color:var(--gold-bright);background:none;transform:none}
.nav .cart-count{position:absolute;top:3px;right:1px;background:var(--gold);color:var(--ink);font-size:.62rem;font-weight:700;line-height:1;border-radius:999px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.nav .cart-count[hidden]{display:none}

.nav .nav-toggle{display:none;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;margin:0 -10px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;cursor:pointer}
.nav .nav-toggle:hover{color:var(--gold-bright);background:none;transform:none}
.nav .nav-toggle svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

@media(min-width:861px) and (max-width:1180px){.nav-links{gap:20px}}
@media(min-width:861px) and (max-width:1000px){.nav-links{gap:13px}.nav-links a{font-size:.86rem}.nav .brand{margin-right:12px}}

/* Phones and small tablets: the links fold into a menu. */
@media(max-width:860px){
  .nav-inner{position:relative;flex-wrap:nowrap}
  .nav .brand{margin-right:auto}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;width:auto;background:rgba(14,17,32,.98);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);max-height:0;overflow:hidden;transition:max-height .3s ease;border-bottom:1px solid rgba(201,165,92,.2)}
  .nav-links.open{max-height:460px}
  .nav-links a{padding:15px 24px;font-size:.95rem;white-space:normal;border-top:1px solid rgba(255,255,255,.06)}
  .nav-links a.nav-cta{margin:14px 24px;text-align:center;padding:11px 18px}
  .nav .nav-toggle{display:flex}
  .ccy-btn{margin:0 24px 14px;display:block;width:calc(100% - 48px)}
}

/* The smallest phones (320px): everything still fits on one line. */
@media(max-width:340px){
  .nav-inner{padding:10px 0}
  .nav .brand{gap:8px}
  .nav .brand img{width:34px;height:34px}
  .nav .brand .name{font-size:1.02rem}
  .nav .cart-link,.nav .cart-btn{margin-left:0}
}

/* ---- footer ---- */
.site-foot{background:var(--ink);color:rgba(255,255,255,.6);padding:40px 0;margin:0}
.site-foot .foot-inner{width:min(1140px,92vw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.site-foot .foot-brand{display:flex;align-items:center;gap:11px;color:#fff}
.site-foot .foot-brand img{width:36px;height:36px;display:block;max-width:none}
.site-foot .foot-brand .name{font-family:'Fraunces',Georgia,serif;font-size:1.05rem}
.site-foot small{font-size:.84rem;line-height:1.9}
/* Links get a taller tap area without moving anything: padding outside,
   the same amount of negative margin back. */
.site-foot a{color:rgba(255,255,255,.72);text-decoration:none;display:inline-block;padding-block:10px;margin-block:-10px}
.site-foot a:hover{color:var(--gold-bright)}
.site-foot .ver{color:var(--slate);opacity:.32;font-size:.68rem;letter-spacing:.04em;margin-left:8px;user-select:all}