/* ---------------------------------------------------------------------------
   Trustel Mobile — the storefront look  (v8.7.0; exact to the preview, v8.7.1)

   The values here are the preview's own: the same sizes, colours, gaps and
   radii, under an `sf-` prefix so nothing on a page can collide with them.
   Loaded on every customer page after the page's own <style>. The header and
   footer are in site.css. The older parts of a page that the storefront
   replaces are switched off at the foot of this file, not deleted, because
   the shop's scripts still read them (the basket, the stock check).
   --------------------------------------------------------------------------- */
*{box-sizing:border-box}
body{background:var(--paper);margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink)}
html,body{overflow-x:hidden}
/* The old fade-in on scroll: off — a section is simply there. */
.reveal{opacity:1!important;transform:none!important}

/* ---- the building blocks ---- */
/* The preview's text sat at the browser's own line height; the pages' older styles set a taller one. */
.sf-hero,.sf-sec,.sf-ph,.sf-filters,.sf-pdp,.sf-crumbs,.sf-steps,.sf-ccy{line-height:normal}
.sf-eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-bright);font-weight:600}
.sf-eyebrow.sf-dark{color:#39405a}
.sf-eyebrow.sf-gold{color:var(--gold)}
.sf-btn{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;margin:0 10px 0 0;border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2}
.sf-b1{background:var(--gold);color:var(--ink);border-color:var(--gold)}.sf-b1:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.sf-b2{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}.sf-b2:hover{border-color:#fff}
.sf-b2.sf-b2d{color:var(--ink);border-color:var(--line)}.sf-b2.sf-b2d:hover{border-color:var(--gold);color:var(--gold-text)}
.sf-tag{display:inline-block;margin-top:22px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(226,197,133,.5);color:var(--gold-bright);border-radius:999px;padding:6px 12px}

/* ---- the home page's top ---- */
.sf-hero{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;padding:76px 48px 72px;background:linear-gradient(165deg,#1c2138,#0e1120);color:#fff;overflow:hidden}
.sf-hero h1{font-family:'Tinos',serif;font-weight:400;font-size:3.2rem;line-height:1.05;margin:14px 0;color:#fff;letter-spacing:0}
.sf-hero p{color:rgba(255,255,255,.78);font-size:1.1rem;max-width:34rem;margin:0 auto 24px;line-height:normal}
.sf-hero .sf-btn{margin:0 5px}

/* ---- a section, its heading, the grid of cards ---- */
.sf-sec{padding:48px 48px 8px}
.sf-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.sf-head h2{font-family:'Tinos',serif;font-weight:500;font-size:1.7rem;margin:0;color:var(--ink)}
.sf-head a{color:var(--gold-text);font-weight:600;font-size:.9rem;text-decoration:none}
.sf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sf-grid:empty{min-height:306px}
.sf-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);text-align:left;padding:0;font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s;width:100%}
.sf-card:hover{border-color:var(--gold);box-shadow:0 18px 40px -28px rgba(16,19,31,.35)}
.sf-card[hidden]{display:none}
.sf-card .im{height:230px;background:linear-gradient(165deg,#fbf8f2,#efe9dc);display:flex;align-items:center;justify-content:center;position:relative}
.sf-card .im img{height:190px;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(16,19,31,.22))}
.sf-card .im svg{width:84px;height:84px;fill:none;stroke:var(--gold-bright);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.sf-card .bd{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.sf-card .nm{font-weight:600;margin-bottom:4px;font-size:1.02rem}
.sf-card .pr{color:var(--slate);font-size:.95rem;margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0}
.sf-card .pr b{color:var(--ink);font-family:'Tinos',serif;font-weight:500;font-size:1.15rem;margin-right:6px}
.sf-card .pr s{color:var(--slate)}
.sf-badge{position:absolute;top:10px;left:10px;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;background:var(--ink);color:#fff;border-radius:999px;padding:5px 10px;z-index:2}
.sf-badge.sale{background:var(--gold);color:var(--ink)}
.sf-badge[hidden]{display:none}
.sf-load{grid-column:1/-1;color:var(--slate);padding:40px 0;text-align:center}
.sf-load a{color:var(--gold-text)}

/* ---- range tiles, the line, the service strip ---- */
.sf-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sf-tile{height:170px;border-radius:14px;background:linear-gradient(165deg,#1c2138,#0e1120);color:#fff;display:flex;align-items:flex-end;padding:18px;font-family:'Tinos',serif;font-size:1.3rem;position:relative;overflow:hidden;text-decoration:none}
.sf-tile img{position:absolute;right:14px;top:10px;height:150px;width:auto;opacity:.9}
.sf-tile span{position:relative}
.sf-tile:hover{outline:2px solid var(--gold);outline-offset:-2px}
.sf-quote{text-align:center;padding:64px 48px;font-family:'Tinos',serif;font-size:2rem;font-weight:400;max-width:40rem;margin:0 auto;line-height:1.25;color:var(--ink)}
.sf-quote span{color:var(--gold-text)}

/* ---- a page's title, the filters, the breadcrumbs ---- */
.sf-ph{padding:40px 48px 10px}
.sf-ph h1{font-family:'Tinos',serif;font-weight:500;font-size:2.2rem;margin:0 0 6px;color:var(--ink);line-height:normal}
.sf-ph p{color:var(--slate);margin:0;max-width:40rem}
.sf-ph p a{color:var(--gold-text)}
.sf-crumbs{font-size:.85rem;color:var(--slate);padding:18px 48px 0}
.sf-crumbs a{color:var(--slate);text-decoration:none}.sf-crumbs a:hover{color:var(--gold-text)}
.sf-filters{display:flex;gap:10px;padding:18px 48px 0;flex-wrap:wrap}
.sf-chip{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.88rem;background:#fff;color:var(--ink);cursor:pointer;font-family:inherit}
.sf-chip.on{background:var(--gold);border-color:var(--gold);font-weight:600}
.sf-chip[hidden]{display:none}
.sf-ccy{padding:10px 48px 0;font-size:.85rem;color:var(--slate);margin:0}
.sf-ccy[hidden]{display:none}

/* ---- one phone's page ---- */
.sf-pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;padding:28px 48px 56px;align-items:start}
.sf-gal{background:linear-gradient(165deg,#fbf8f2,#efe9dc);border-radius:18px;height:520px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.sf-gal img{height:430px;width:auto;max-width:92%;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(16,19,31,.25));display:none}
.sf-gal img.on,.sf-gal img:first-of-type:not(.off){display:block}
.sf-gal .sf-badge{top:16px;left:16px}
.sf-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}.sf-thumbs[hidden]{display:none}
.sf-thumbs button{width:72px;height:72px;border-radius:10px;background:linear-gradient(165deg,#fbf8f2,#efe9dc);display:flex;align-items:center;justify-content:center;border:1px solid var(--line);padding:6px;cursor:pointer}
.sf-thumbs button.on{border-color:var(--gold)}
.sf-thumbs img{height:56px;width:auto;max-width:100%;object-fit:contain}
.sf-det h1{font-family:'Tinos',serif;font-weight:500;font-size:2.6rem;margin:6px 0;color:var(--ink);line-height:normal}
.sf-det .tagline{color:var(--slate);margin:0}
.sf-price{font-family:'Tinos',serif;font-size:2.1rem;margin:14px 0;display:flex;align-items:baseline;gap:12px}
.sf-price .was{font-size:1.1rem;color:var(--slate);text-decoration:line-through}.sf-price .was:empty{display:none}
.sf-optgrp:has(.sf-opts:empty){display:none}
.sf-opts{display:flex;gap:10px;margin:10px 0 18px;flex-wrap:wrap}
.sf-opt{border:1px solid var(--line);border-radius:10px;padding:10px 16px;background:#fff;color:var(--ink);font:inherit;font-size:1rem;cursor:pointer}
.sf-opt.on{border-color:var(--gold);background:var(--paper-card)}
.sf-opt:disabled{opacity:.45;cursor:default}
.sf-det .sf-btn{margin-top:8px}
.sf-det .sf-b1.ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.sf-trust{display:grid;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem;color:#39405a}
.sf-det h3{font-family:'Tinos',serif;font-weight:500;font-size:1.17rem;margin:26px 0 6px;color:var(--ink)}
.sf-det ul{padding-left:18px;color:#39405a;line-height:1.7;margin:0}
.sf-det .ccy-note,.sf-det .vat-line{font-size:.85rem;color:var(--slate);margin:-6px 0 12px}
.sf-det .ccy-note[hidden],.sf-det .vat-line:empty{display:none}

/* ---- two boxes side by side: repairs, contact ---- */
.sf-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.sf-box h2{font-family:'Tinos',serif;font-weight:500;font-size:1.4rem;margin:0 0 6px;color:var(--ink)}
.sf-box>p{color:var(--slate);margin:0 0 14px}
.sf-box p a{color:var(--gold-text)}
.sf-fld{margin:10px 0}
.sf-fld label{display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#39405a;margin-bottom:5px}
.sf-fld input,.sf-fld select,.sf-fld textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--paper);color:var(--ink);font:inherit;font-size:.92rem;box-sizing:border-box}
.sf-fld textarea{min-height:96px;resize:vertical}
.sf-go{display:inline-block;background:var(--gold);border:0;border-radius:999px;padding:12px 26px;font:inherit;font-weight:600;margin-top:8px;color:var(--ink);cursor:pointer}
.sf-go:hover{background:var(--gold-bright)}.sf-go:disabled{opacity:.6;cursor:default}
.sf-msg{min-height:1.2em;margin:10px 0 0;font-size:.9rem;color:#39405a}

/* ---- the cart and the checkout as pages ---- */
.sf-steps{display:flex;gap:18px;padding:22px 48px 0;font-size:.85rem;color:var(--slate)}
.sf-steps b{color:var(--ink)}
body[data-view=cart] .cart-drawer{position:static;transform:none;visibility:visible;transition:none;height:auto;width:auto;max-width:none;margin:0;padding:28px 48px 56px;border:0;border-radius:0;box-shadow:none;background:none;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
body[data-view=cart] .cart-head{display:none}
body[data-view=cart] .cart-items{max-height:none;overflow:visible;padding:0;flex:none}
body[data-view=cart] .cart-item{display:grid;grid-template-columns:80px 1fr auto auto;grid-template-areas:"im nm qt pr" "im rm qt pr";gap:2px 16px;align-items:center;padding:14px 0;border:0;border-bottom:1px solid var(--line);margin:0;background:none;border-radius:0}
body[data-view=cart] .cart-item>div:not(.sf-thumb):not(.ci-price){display:contents}
body[data-view=cart] .cart-item .sf-thumb{grid-area:im;width:80px;height:80px;border-radius:10px;background:linear-gradient(165deg,#fbf8f2,#efe9dc);display:flex;align-items:center;justify-content:center}
body[data-view=cart] .cart-item .sf-thumb img{height:64px;width:auto;max-width:90%;object-fit:contain}
body[data-view=cart] .cart-item .ci-name{grid-area:nm;font-weight:700;font-size:1rem;margin:0}
body[data-view=cart] .cart-item .ci-opt{grid-area:rm;color:var(--slate);font-size:.85rem}
body[data-view=cart] .cart-item .ci-remove{grid-area:rm;justify-self:start;background:none;border:0;padding:0;margin:0;color:var(--slate);font-size:.8rem;text-decoration:underline;cursor:pointer}
body[data-view=cart] .cart-item .qty-step{grid-area:qt;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:#fff;margin:0}
body[data-view=cart] .cart-item .qty-step button{background:none;border:0;font-size:1rem;cursor:pointer;padding:0 2px;color:var(--ink);width:auto;height:auto}
body[data-view=cart] .cart-item .ci-price{grid-area:pr;font-weight:700}
body[data-view=cart] .cart-item.sub{grid-template-columns:80px 1fr auto;grid-template-areas:". nm pr" ". rm pr";padding:2px 0 14px;font-size:.92rem}
body[data-view=cart] .cart-item.sub .ci-name{font-weight:400;font-size:.9rem;color:var(--slate)}
body[data-view=cart] .cart-item.sub .ci-opt{display:none}
body[data-view=cart] .cart-item.sub .ci-price{font-weight:400;color:var(--slate)}
body[data-view=cart] .cart-foot{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;position:static;margin:0}
body[data-view=cart] .cart-foot .sum-total{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);margin:0}
body[data-view=cart] .cart-foot .sum-total .lbl,body[data-view=cart] .cart-foot .sum-total .amt{font-family:inherit;font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:400}
body[data-view=cart] .cart-foot .sum-total.sf-tot{border-bottom:0}
body[data-view=cart] .cart-foot .sum-total.sf-tot .lbl,body[data-view=cart] .cart-foot .sum-total.sf-tot .amt{font-family:'Tinos',serif;font-size:1.3rem}
body[data-view=cart] #cartDelNote{display:none}
body[data-view=cart] .cart-foot .fine{font-size:.85rem;margin-top:10px;color:var(--slate)}
body[data-view=cart] .cart-foot h2{font-family:'Tinos',serif;font-weight:500;font-size:1.4rem;margin:0 0 6px}
body[data-view=cart] #cartCheckout{display:block;width:100%;text-align:center;border-radius:999px;margin-top:8px}
body[data-view=checkout] #orderModal{position:static;display:block;background:none;backdrop-filter:none;padding:0;overflow:visible}
body[data-view=checkout] #orderModal .modal{max-width:none;margin:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
body[data-view=checkout] .modal-head,body[data-view=checkout] .ck-back{display:none}
body[data-view=checkout] .checkout-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;padding:28px 48px 56px;align-items:start}
body[data-view=checkout] .checkout-main,body[data-view=checkout] .checkout-aside{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;margin:0}
body[data-view=checkout] .checkout-main h2,body[data-view=checkout] .checkout-aside .sum-title{font-family:'Tinos',serif;font-weight:500;font-size:1.4rem;margin:0 0 6px;text-transform:none;letter-spacing:0;color:var(--ink)}
body[data-view=checkout] .fld>label,body[data-view=checkout] .fld-lbl{display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#39405a;margin-bottom:5px}
body[data-view=checkout] .fld-lbl.sf-h2{font-family:'Tinos',serif;font-weight:500;font-size:1.4rem;text-transform:none;letter-spacing:0;color:var(--ink);margin:18px 0 0}
body[data-view=checkout] .fld input,body[data-view=checkout] .fld textarea{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--paper)}
body[data-view=checkout] .pay-opts{display:flex!important;gap:10px;margin:8px 0 16px}
body[data-view=checkout] .pay-opt{flex:1;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;background:#fff;cursor:pointer;display:block;margin:0;font-weight:400;position:relative}
body[data-view=checkout] .pay-opt:has(input:checked){border-color:var(--gold);background:var(--paper-card);font-weight:600}
body[data-view=checkout] .pay-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
body[data-view=checkout] .pay-opt:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
body[data-view=checkout] #orderSubmit{width:auto;border-radius:999px;padding:12px 26px;margin-top:8px}

/* ---- what the storefront replaces ---- */
.products,.sf-old{display:none!important}

/* ---- narrower screens ---- */
@media(max-width:1000px){.sf-grid,.sf-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .sf-hero{grid-template-columns:1fr;padding:44px 16px 40px;text-align:center}
  .sf-hero p{margin-inline:auto}.sf-hero h1{font-size:2.4rem}
  .sf-sec,.sf-ph,.sf-filters,.sf-crumbs,.sf-steps,.sf-ccy{padding-left:16px;padding-right:16px}
  .sf-quote{padding:48px 16px;font-size:1.5rem}
  .sf-pdp,body[data-view=checkout] .checkout-grid,body[data-view=cart] .cart-drawer{grid-template-columns:1fr;padding:20px 16px 40px;gap:20px}
  .sf-gal{height:360px}.sf-gal img{height:300px}
}
@media(max-width:520px){
  .sf-grid{grid-template-columns:1fr 1fr;gap:12px}
  .sf-card .im{height:170px}.sf-card .im img{height:140px}
  .sf-card .bd{padding:10px 12px 12px}
  .sf-tiles{grid-template-columns:1fr}
  body[data-view=cart] .cart-item{grid-template-columns:64px 1fr auto;grid-template-areas:"im nm pr" "im rm rm" "im qt qt"}
  body[data-view=cart] .cart-item .sf-thumb{width:64px;height:64px}
  body[data-view=checkout] .pay-opts{flex-wrap:wrap}
}

/* ---- the plainer pages (track, feedback, terms, privacy, 404): their title
   as a plain block on cream, like every other page's ---- */
.page-hero{background:none!important;color:var(--ink)!important;padding:40px 16px 10px!important;text-align:left!important}
.page-hero::after{display:none!important}
.page-hero .inner{width:auto!important;max-width:900px;margin:0 auto!important}
.page-hero .eyebrow{color:var(--gold-text)!important;letter-spacing:.26em!important;font-size:.72rem!important;margin-bottom:8px!important}
.page-hero h1{font-family:'Tinos',serif!important;font-weight:500!important;font-size:2.2rem!important;margin:0 0 6px!important;color:var(--ink)!important;line-height:1.15!important}
.page-hero h1 em{font-style:normal!important;color:inherit!important}
.page-hero p{color:var(--slate)!important;margin:0!important;max-width:40rem;font-size:1rem!important;font-weight:400!important}
.page-hero p a{color:var(--gold-text)!important}

/* ---- the repairs page's booking form, inside its box ---- */
.sf-rep .form-shell{background:none;border:0;box-shadow:none;padding:0;margin:0;max-width:none;width:auto}
.sf-rep .form-intro{margin:0 0 6px;text-align:left}
.sf-rep .form-intro h2{font-family:'Tinos',serif;font-weight:500;font-size:1.4rem;margin:0 0 6px;color:var(--ink)}
.sf-rep .form-intro p{color:var(--slate);margin:0 0 8px;font-size:1rem}
.sf-rep .field-row{display:block}
.sf-rep .field{margin:10px 0}
.sf-rep .field>label{display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#39405a;margin-bottom:5px}
.sf-rep .field input[type=text],.sf-rep .field input[type=tel],.sf-rep .field input[type=email],.sf-rep .field input[type=month],.sf-rep .field input[type=date],.sf-rep .field select,.sf-rep .field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--paper);color:var(--ink);font:inherit;font-size:.92rem;box-shadow:none}
.sf-rep #submitBtn{display:inline-block;width:auto;background:var(--gold);border:0;border-radius:999px;padding:12px 26px;font-weight:600;color:var(--ink);box-shadow:none;margin-top:8px}
.sf-rep .assure{display:none}
.sf-rep>.sf-box:last-child{position:sticky;top:20px}
.sf-det .feats{display:block;list-style:disc;padding-left:18px;margin:0;color:#39405a;line-height:1.7}
.sf-det .feats li{display:list-item;font-size:1rem;gap:0;color:#39405a}
.sf-det .feats li::before{display:none;content:none}
body[data-view=checkout] .pay-opt span{display:inline;background:none;border:0;padding:0;margin:0;box-shadow:none;color:inherit;font:inherit;min-height:0;width:auto}

/* ---- one box to a page (v8.7.5): contact, repairs ---- */
.sf-ph.sf-narrow{max-width:760px;margin:0 auto;padding:40px 16px 10px}
.sf-one{max-width:760px;margin:0 auto;padding:22px 16px 64px}
.sf-one>.sf-box{padding:30px 32px}
@media(max-width:520px){.sf-one>.sf-box{padding:22px 18px}}
.sf-track .track-wrap{width:auto;max-width:none;margin:0;padding:0}
.sf-track .track-card{box-shadow:none;margin:0}
.sf-track .track-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-track label{display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#39405a;margin:10px 0 5px}
.sf-track input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--paper);color:var(--ink);font:inherit;font-size:.92rem;box-shadow:none;box-sizing:border-box}
.sf-track #tGo{display:inline-block;width:auto;background:var(--gold);border:0;border-radius:999px;padding:12px 26px;font:inherit;font-weight:600;color:var(--ink);box-shadow:none;margin-top:16px;cursor:pointer}
.sf-track #tGo:hover{background:var(--gold-bright)}
.sf-track .hint{text-align:left!important;margin:16px 0 0!important}
@media(max-width:520px){.sf-track .track-row{grid-template-columns:1fr}}
.sf-card .fd{font-size:.8rem;color:var(--gold-text);font-weight:600;margin-left:auto;padding-left:8px}

/* ---- the comparison chart, back on the home page (v8.7.7) ---- */
.compare{padding:48px 48px 8px;background:var(--paper)}
.compare .wrap{width:auto;max-width:none;margin:0;padding:0}
.compare .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 22px;text-align:left}
.compare .sec-head .sec-eyebrow,.compare .sec-head p{display:none}
.compare .sec-head h2{font-family:'Tinos',serif;font-weight:500;font-size:1.7rem;margin:0;color:var(--ink);line-height:normal}
.compare .cmp-wrap{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:none}
@media(max-width:860px){.compare{padding:40px 16px 8px}}
/* ---- a case or accessory with no picture of its own shows the shop's mark ---- */
.sf-card .im img.sf-logo{height:96px;width:96px;filter:none;opacity:.95}

/* ---- v8.7.8: everything the old site said, in the storefront's look ---- */
/* A phone's card: its range (and warranty), its line, what it does. */
.sf-card .rg{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-bottom:6px}
.sf-card .tg{color:var(--slate);font-size:.88rem;margin:-2px 0 10px}
.sf-card .sp{list-style:none;padding:0;margin:0 0 14px;font-size:.84rem;color:#39405a;line-height:1.5}
.sf-card .sp li{position:relative;padding-left:15px;margin:2px 0}
.sf-card .sp li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.sf-card .sp+.pr{padding-top:12px;border-top:1px solid var(--line)}
.sf-badge.soon{background:#fff;color:var(--ink);border:1px solid var(--line)}


/* Why Trustel: the four points, then the line. */
.sf-why .sf-head{margin-bottom:24px}
.sf-why .sf-head .sf-eyebrow{margin-bottom:8px}
.sf-four{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sf-four>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px 24px}
.sf-four>div::before{content:"";display:block;width:50px;height:50px;border-radius:50%;border:1px solid var(--gold);background:var(--navy) center/24px 24px no-repeat;margin-bottom:18px}
.sf-four .w1::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2c585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.sf-four .w2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2c585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 01-2.8 0L3 13V3h10l7.6 7.6a2 2 0 010 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E")}
.sf-four .w3::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2c585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='18' cy='17.5' r='1.8'/%3E%3C/svg%3E")}
.sf-four .w4::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2c585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.5c1.8 1.8 5.2 1.8 7 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E")}
.sf-four h3{font-family:'Tinos',serif;font-weight:500;font-size:1.25rem;margin:0 0 6px;color:var(--ink)}
.sf-four p{margin:0;color:var(--slate);font-size:.93rem;line-height:1.5}
.sf-why .sf-quote{padding:60px 0 12px}

/* The questions: the heading on the left, the answers in a box beside it. */
.faq{padding:56px 48px 8px;background:none}
.faq .wrap{width:auto;max-width:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:56px;align-items:start}
.faq .sec-head{text-align:left;margin:0;max-width:none;position:sticky;top:24px}
.faq .sec-eyebrow{margin-bottom:10px}
.faq .sec-head h2{font-size:2.3rem;line-height:1.08;margin:0;color:var(--ink)}
.faq .sec-head p{font-size:.98rem;margin-top:14px;line-height:1.55}
.faq .sec-head p a{color:var(--gold-text);font-weight:600;text-decoration:none;white-space:nowrap}
.faq .faq-list{max-width:none;margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 28px}
.faq-item{border-bottom:1px solid var(--line);padding:2px 0}
.faq-item:last-child{border-bottom:0}
.faq-item summary{cursor:pointer;list-style:none;padding:17px 30px 17px 0;position:relative;font-weight:600;font-size:1rem;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:15px;font-size:1.3rem;color:var(--gold);font-weight:400;line-height:1}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{margin:0 0 18px;font-weight:400;color:#4a5068;line-height:1.7;max-width:66ch}
.faq-item p a{color:var(--gold-text)}

/* Ready for a phone that keeps things simple? — the call-us block, on navy. */
.contact{padding:56px 48px 64px;background:none}
.contact .wrap{width:auto;max-width:none;margin:0;padding:0}
.contact-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;align-items:center;background:linear-gradient(165deg,#1c2138,#0e1120);border:0;border-radius:18px;padding:52px 56px;color:#fff;box-shadow:0 26px 50px -34px rgba(16,19,31,.6)}
.contact-card h2{font-family:'Tinos',serif;font-weight:400;line-height:1.1;color:#fff;font-size:2.4rem;margin:0 0 12px}
.contact-methods{display:flex;flex-direction:column;gap:16px}
.contact .cm{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid;border-radius:14px;transition:border-color .2s}
.contact .cm .ic{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center}
.contact .cm>span:last-child{min-width:0}
.contact .cm .lab{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.contact .cm .val{font-family:'Tinos',serif;font-size:1.2rem;font-weight:500;overflow-wrap:anywhere}
.contact .cm[href^="tel:"] .val{white-space:nowrap}
.contact-card p{color:rgba(255,255,255,.75);margin:0;font-size:1.05rem}
.contact .cm{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.contact .cm:hover{border-color:var(--gold);box-shadow:none}
.contact .cm .ic{background:rgba(226,197,133,.12);color:var(--gold-bright)}
.contact .cm .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact .cm .lab{color:rgba(255,255,255,.6)}
.contact .cm .val{color:#fff}

/* Under a phone, room before the footer. */
.sf-sec:has(>[data-also]),.sf-sec:has(>#phoneGrid),.sf-sec:has(>#sfCases){padding-bottom:64px}

/* The footer's contact column carries the US line and the email too. */
.foot-col a[href^="mailto:"]{overflow-wrap:anywhere}


@media(max-width:860px){
  .sf-why .sf-quote{padding:44px 0 8px}
  .faq{padding:40px 16px 8px}.faq .wrap{grid-template-columns:1fr;gap:22px}.faq .sec-head{position:static}.faq .sec-head h2{font-size:1.9rem}.faq .faq-list{padding:2px 18px}
  .contact{padding:40px 16px 48px}.contact-card{grid-template-columns:minmax(0,1fr);padding:34px 22px;gap:26px}.contact-card h2{font-size:1.9rem}
}
@media(max-width:520px){
  .sf-card .rg{font-size:.6rem;letter-spacing:.12em}
  .sf-card .tg{font-size:.82rem}
  .sf-card .sp{font-size:.78rem}.sf-card .sp li:nth-child(n+5){display:none}
  .sf-four{grid-template-columns:1fr 1fr;gap:12px}.sf-four>div:nth-child(3){grid-column:1/-1}.sf-four>div{padding:18px 14px}.sf-four>div::before{width:42px;height:42px;background-size:20px 20px;margin-bottom:12px}
  .sf-four h3{font-size:1.08rem}.sf-four p{font-size:.85rem}
}
/* A case's card: what it fits, what it is like, the price at the foot (v8.7.8). */
.sf-card .ab{font-size:.86rem;color:#4a5068;line-height:1.5;margin:0 0 14px}
.sf-card .ab+.pr,.sf-card .tg+.pr{padding-top:12px;border-top:1px solid var(--line)}
#sfCases .sf-card .im{height:170px}
@media(max-width:520px){#sfCases .sf-card .im{height:130px}.sf-card .im img.sf-logo{height:72px;width:72px}}
/* a case with its own photo: sized to sit inside the tile, as the phones do in theirs */
#sfCases .sf-card .im img.sf-pic{height:146px}
@media(max-width:520px){#sfCases .sf-card .im img.sf-pic{height:112px}}
.sf-tile img.sf-logo{height:92px;width:92px;top:39px;right:30px;opacity:.95}
@media(max-width:520px){
  .sf-tag{letter-spacing:.08em;font-size:.66rem}
  .sf-tiles{grid-template-columns:1fr 1fr;gap:12px}
  .sf-tile{height:118px;padding:14px;font-size:1.08rem}
  .sf-tile img{height:96px;right:8px;top:8px}
  .sf-tile img.sf-logo{height:58px;width:58px;top:14px;right:14px}
}
@media(max-width:560px){.contact .cm{padding:14px 16px;gap:12px}.contact .cm .val{font-size:1rem}}

/* ---- the Double Line SIM (v8.8.2): the storefront's own panel, like the Fig IV's —
   the picture on navy (the SIM and its two numbers), the words on white ---- */
.dl-strip{padding:48px 48px 8px}
.dl-strip .wrap{width:auto;max-width:none;margin:0;padding:0}
.dl-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dl-art{background:linear-gradient(165deg,#1c2138,#0e1120);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 30px;min-height:320px}
.dl-medallion{width:112px;height:112px;border-radius:50%;border:1px solid var(--gold);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;color:var(--gold-bright)}
.dl-medallion svg{width:50px;height:50px}
.dl-nums{display:flex;justify-content:center;gap:16px;position:relative;padding-top:30px}
/* one SIM, two numbers: a line from the SIM forks to each of them */
.dl-nums::before{content:"";position:absolute;top:0;left:50%;height:15px;border-left:1px solid rgba(226,197,133,.55)}
.dl-nums::after{content:"";position:absolute;top:15px;left:25%;right:25%;height:15px;border:1px solid rgba(226,197,133,.55);border-bottom:0;border-radius:10px 10px 0 0}
.dl-nums span{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px;padding:14px 18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:12px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold-bright)}
.dl-nums b{font-family:'Tinos',serif;font-weight:400;font-size:1.9rem;line-height:1;letter-spacing:0;text-transform:none;color:#fff}
.dl-left{padding:36px 44px;align-self:center}
.dl-card h3{font-family:'Tinos',serif;font-weight:500;font-size:2.1rem;line-height:1.1;color:var(--ink);margin:10px 0}
.dl-lead{color:var(--slate);font-size:1rem;line-height:1.6;margin:0}
.dl-lead b{color:var(--ink);font-weight:600}
.dl-right{display:grid;gap:12px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.dl-feat{display:flex;gap:12px;align-items:flex-start}
.dl-check{flex:0 0 auto;width:26px;height:26px;margin-top:1px;border-radius:50%;border:1px solid var(--gold);background:var(--navy);color:var(--gold-bright);display:flex;align-items:center;justify-content:center}
.dl-check svg{width:13px;height:13px}
.dl-feat h4{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:.95rem;color:var(--ink);margin:0 0 2px}
.dl-feat p{font-size:.88rem;line-height:1.5;color:var(--slate);margin:0}
.dl-pricing{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.dl-plan{font-size:.85rem;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--slate)}
.dl-plan.on{border-color:var(--gold);background:#fbf3e2;color:var(--ink)}
.dl-card .dl-call{display:inline-block;margin-top:20px;padding:13px 26px;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none}
.dl-card .dl-call:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--ink)}
@media(max-width:860px){.dl-strip{padding:40px 16px 8px}.dl-card{grid-template-columns:1fr}.dl-art{min-height:0;padding:30px 20px}.dl-left{padding:24px 20px 26px}.dl-card h3{font-size:1.8rem}}
@media(max-width:520px){.dl-medallion{width:84px;height:84px}.dl-medallion svg{width:40px;height:40px}.dl-nums{width:100%;gap:10px;padding-top:24px}.dl-nums::before{height:12px}.dl-nums::after{top:12px;height:12px}.dl-nums span{min-width:0;padding:12px 10px}.dl-nums b{font-size:1.5rem}}
/* ---- v8.8.3: the home page's two rows are one line each on tablets and
   phones too — the cards slide sideways (the Phones page keeps its grid) ---- */
@media(max-width:1000px){
  .sf-grid[data-models]{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:48px;margin:0 -48px;padding:0 48px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sf-grid[data-models]::-webkit-scrollbar{display:none}
  .sf-grid[data-models] .sf-card{flex:0 0 38%;scroll-snap-align:start}
}
@media(max-width:860px){.sf-grid[data-models]{margin:0 -16px;padding:0 16px 6px;scroll-padding-left:16px}}
@media(max-width:520px){.sf-grid[data-models]{gap:12px}.sf-grid[data-models] .sf-card{flex-basis:64%}}
/* Continue shopping, and "Added to your cart" on a phone's page */
.cart-cont{display:block;text-align:center;margin-top:12px;font-size:.92rem;font-weight:600;color:var(--gold-text);text-decoration:none}
.cart-cont:hover{text-decoration:underline}
.sf-steps .sf-cont{margin-left:auto;color:var(--gold-text);font-weight:600;text-decoration:none}
.sf-steps .sf-cont:hover{text-decoration:underline}
.sf-added{margin:16px 0 6px;padding:14px 16px;border:1px solid var(--gold);border-radius:12px;background:var(--paper-card)}
.sf-added[hidden]{display:none}
.sf-added b{display:block;font-weight:600;margin-bottom:10px}
.sf-added-btns{display:flex;gap:10px;flex-wrap:wrap}
.sf-added-btns .sf-btn{margin:0}
/* ---- v9.0.0: "Tell me when it's back" and "Tell me when it arrives" — the home
   page's box (its rules moved here from index.html), on a phone's own page too.
   The margins are spelled out because the phone page has no margin reset. ---- */
.oos-ask{position:fixed;inset:0;z-index:120;background:rgba(14,17,32,.62);display:flex;align-items:center;justify-content:center;padding:20px}
.oos-ask[hidden]{display:none}
.oos-inner{position:relative;background:var(--paper);color:var(--ink);border-radius:16px;padding:26px 24px;width:min(400px,100%);box-shadow:0 24px 60px -20px rgba(0,0,0,.55);line-height:1.55;text-align:left}
.oos-inner h3{font-family:'Tinos',serif;font-weight:500;font-size:1.3rem;margin:0 0 6px}
.oos-what{color:var(--slate);font-size:.92rem;margin:0 0 16px}
.oos-inner label{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);font-weight:600;margin:0 0 5px}
.oos-inner input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink);margin:0}
.oos-inner input:focus{outline:2px solid var(--gold);outline-offset:1px}
.oos-go{width:100%;margin:12px 0 0;padding:12px;border:0;border-radius:10px;background:var(--gold);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.oos-go:disabled{opacity:.6;cursor:default}
.oos-msg{min-height:1.2em;margin:10px 0 0;font-size:.88rem;color:var(--ink)}
.oos-small{margin:6px 0 0;font-size:.76rem;color:var(--slate)}
.oos-x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--slate);cursor:pointer;padding:4px 8px;margin:0}
.oos-x:hover{color:var(--ink)}
/* ---- v9.0.0 (bug 34): the order system cannot be reached — a calm line at the
   top of the checkout, in the order form's own note colours, never red ---- */
.ck-down{margin:14px 26px 0;padding:12px 14px;border-radius:11px;background:var(--paper-card);border:1px solid var(--line);font-size:.9rem;line-height:1.5;color:var(--ink)}
.ck-down[hidden]{display:none}
.ck-down a{color:var(--gold-text);font-weight:600;white-space:nowrap}
body[data-view=checkout] .ck-down{margin:24px 48px 0;background:#fff}
@media(max-width:860px){body[data-view=checkout] .ck-down{margin:16px 16px 0}}
/* ---- v9.0.0 (bug 35): a cart line with no photo of its own (an add-on) shows
   the shop's mark, as Cases does, rather than an empty dark square ---- */
body[data-view=cart] .cart-item .sf-thumb img.sf-logo{height:40px;width:40px;opacity:.95}

/* v9.2.0: every product photo on a light stage (the dark tiles swallowed the black phones and the cases); the Compare tick, bar and chart. */
.sf-card .im .sf-logo{opacity:1;width:76px;height:76px;padding:14px;background:#fff;border-radius:50%;border:1px solid var(--line);box-shadow:0 8px 18px rgba(16,19,31,.08);filter:none}
.sf-cmp{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.78rem;font-weight:600;color:var(--slate);cursor:pointer;user-select:none}
.sf-cmp::before{content:"";width:16px;height:16px;border:1.5px solid var(--line);border-radius:4px;background:#fff;display:inline-block;box-sizing:border-box}
.sf-cmp[aria-checked=true]{color:var(--ink)}
.sf-cmp[aria-checked=true]::before{background:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 3px #fff}
.sf-cmp:hover::before,.sf-cmp:focus-visible::before{border-color:var(--gold)}
.sf-cmpbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;max-width:min(920px,94vw);padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 12px 32px rgba(16,19,31,.18);font-size:.9rem;color:var(--ink)}
.sf-cmpbar[hidden]{display:none}
.sf-cmpbar .sf-cmpbar-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-cmpbar .sf-btn{padding:8px 16px;font-size:.85rem}
.sf-cmpbar .sf-btn.alt{background:transparent;color:var(--slate);border:1px solid var(--line)}
.sf-cmpbar .sf-btn[disabled]{opacity:.5;cursor:default}
.sf-cmpov{position:fixed;inset:0;z-index:70;background:rgba(16,19,31,.55);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:28px 16px}
.sf-cmpbox{background:var(--paper);border-radius:18px;width:min(1120px,100%);padding:20px 22px 26px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.sf-cmphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sf-cmphead h2{font-family:'Tinos',serif;font-weight:500;font-size:1.6rem;margin:0}
.sf-cmpx{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink)}
.sf-cmpcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.sf-cmpcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.sf-cmpcard .im{height:170px;background:linear-gradient(165deg,#fbf8f2,#efe9dc);border-radius:10px;display:flex;align-items:center;justify-content:center}
.sf-cmpcard .im img{height:140px;width:auto;max-width:88%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(16,19,31,.2))}
.sf-cmpcard .nm{font-weight:600;font-size:1.05rem;margin-top:4px}
.sf-cmpcard .tg{color:var(--slate);font-size:.85rem}
.sf-cmpcard .pr{font-family:'Tinos',serif;font-size:1.3rem}
.sf-cmpcard .pr small{font-family:'Inter',system-ui,sans-serif;font-size:.78rem;color:var(--slate)}
.sf-cmpcard dl{margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:0}
.sf-cmpcard dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:.84rem}
.sf-cmpcard dt{color:var(--slate);margin:0}
.sf-cmpcard dd{margin:0;text-align:right;color:var(--ink)}
.cmp-yes{color:var(--gold);font-weight:700}.cmp-no{color:var(--slate)}
.sf-cmpcard .sf-btn{text-align:center;margin-top:auto;background:var(--gold);color:var(--ink)}
.sf-cmpdrop{background:transparent;border:0;color:var(--slate);font-size:.78rem;cursor:pointer;padding:6px;font-family:inherit}
body.sf-cmpopen{overflow:hidden}
@media(max-width:600px){.sf-cmpcards{grid-template-columns:1fr}.sf-cmpbar{bottom:10px;gap:8px;padding:8px 10px}}