/* ============================================================
   TELEFYND.SE — "Varm relief"
   Editorial soft-commerce: dammig roséduk, pappersvita kort,
   en enda självsäker brännorange accent (ugglan).
   Display: Instrument Serif · Brödtext/UI: Hanken Grotesk
   ============================================================ */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/telefynd-se/HankenGrotesk-Variable.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/telefynd-se/InstrumentSerif-Regular.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/telefynd-se/InstrumentSerif-Italic.woff2') format('woff2');}

:root{
  --paper:#FBF6F3;
  --paper-2:#FFFFFF;
  --rose:#F2DBD8;
  --rose-soft:#F8E8E5;
  --rose-deep:#E8C6C1;
  --ink:#2A201C;
  --ink-soft:#4A3B34;
  --muted:#8C7A73;
  --line:#ECDAD3;
  --line-2:#E2CBC4;
  --orange:#E8722E;
  --orange-deep:#C9551A;
  --orange-soft:#FCEADD;
  --clay:#B5563A;
  --ok:#2F7D5B;

  --shadow-sm:0 2px 8px -4px rgba(80,45,30,.30);
  --shadow:0 18px 44px -30px rgba(80,45,30,.45);
  --shadow-lift:0 30px 60px -34px rgba(80,45,30,.55);

  --r-card:20px;
  --r-pill:999px;
  --r-btn:12px;

  --maxw:1180px;
  --maxw-narrow:760px;

  --f-disp:'Instrument Serif',Georgia,'Times New Roman',serif;
  --f-body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.62;
  color:var(--ink);
  background-color:var(--paper);
  /* mycket subtil korn-/papperstextur */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange-deep);text-decoration:none}
a:hover{color:var(--orange);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.container.narrow{max-width:var(--maxw-narrow)}

/* ---------- Typografi ---------- */
h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.1;font-weight:400}
h1{font-family:var(--f-disp);font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.5px}
h2{font-family:var(--f-disp);font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.3px}
h3{font-family:var(--f-body);font-weight:700;font-size:1.28rem;letter-spacing:-.2px}
h4{font-family:var(--f-body);font-weight:700;font-size:1.05rem}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.12rem,1.8vw,1.34rem);line-height:1.55;color:var(--ink-soft)}
em,.tf-it{font-family:var(--f-disp);font-style:italic}
strong,b{font-weight:700}

/* orange "öga"-markör som inline-accent */
.tf-eye{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--orange);vertical-align:middle;margin:0 .15em}

/* ---------- Header ---------- */
.tf-top{position:sticky;top:0;z-index:50;background:rgba(251,246,243,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.tf-nav{display:flex;align-items:center;gap:18px;min-height:74px}
.tf-brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.tf-brand:hover{text-decoration:none}
.tf-brand img{height:42px;width:auto}
.tf-brand-text{display:flex;flex-direction:column;line-height:1}
.tf-brand-name{font-family:var(--f-body);font-weight:800;letter-spacing:.18em;font-size:1.04rem;color:var(--ink);text-transform:uppercase}
.tf-brand-tag{font-family:var(--f-disp);font-style:italic;font-size:.95rem;color:var(--muted);letter-spacing:0}
.tf-menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.tf-menu a{display:inline-block;padding:9px 14px;border-radius:var(--r-pill);color:var(--ink-soft);font-weight:600;font-size:.97rem}
.tf-menu a:hover{background:var(--rose-soft);color:var(--ink);text-decoration:none}
.tf-menu a.active{background:var(--ink);color:#fff}
.tf-burger{display:none;border:1px solid var(--line-2);background:#fff;border-radius:var(--r-btn);padding:8px 14px;font-family:var(--f-body);font-weight:700;color:var(--ink);cursor:pointer}

/* ---------- Annons-/affiliate-upplysning ---------- */
.tf-disclosure{background:var(--rose-soft);border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted);line-height:1.5}
.tf-disclosure .container{padding-top:8px;padding-bottom:8px}
.tf-disclosure-tag{display:inline-block;background:var(--ink);color:#fff;font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:6px;margin-right:8px;vertical-align:middle}

/* ---------- Brödsmulor ---------- */
.tf-crumbs{font-size:.86rem;color:var(--muted);padding:16px 0 0}
.tf-crumbs a{color:var(--muted)}
.tf-crumbs a:hover{color:var(--orange-deep)}
.tf-crumbs .sep{margin:0 7px;color:var(--rose-deep)}

/* ---------- Hero ---------- */
.tf-hero{position:relative;overflow:hidden;background:var(--rose);border-bottom:1px solid var(--rose-deep)}
.tf-hero::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");pointer-events:none}
.tf-hero .container{position:relative;z-index:1;padding-top:54px;padding-bottom:54px}
.tf-hero h1{margin-bottom:.2em}
.tf-hero .lead{max-width:60ch}
.tf-hero-split{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center}
.tf-updated{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--clay);letter-spacing:.02em;margin-top:8px}
.tf-updated::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}

/* punktlista med orange ögon */
.tf-check{list-style:none;margin:18px 0 0;padding:0}
.tf-check li{position:relative;padding:6px 0 6px 34px;font-weight:500;color:var(--ink-soft)}
.tf-check li::before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;border-radius:50%;background:var(--orange);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------- Sektioner ---------- */
.tf-section{padding:54px 0}
.tf-section.alt{background:var(--rose-soft);border-block:1px solid var(--line)}
.tf-section.tight{padding:34px 0}
.tf-section-head{max-width:64ch;margin-bottom:26px}
.tf-section-head p{color:var(--muted);margin:0}

/* ---------- Knappar / CTA ---------- */
.tf-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-body);font-weight:700;font-size:1rem;line-height:1;
  padding:14px 22px;border-radius:var(--r-btn);border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.tf-btn.primary{background:var(--orange);color:#fff;box-shadow:0 10px 22px -12px rgba(232,114,46,.9)}
.tf-btn.primary:hover{background:var(--orange-deep);color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(201,85,26,.9)}
.tf-btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.tf-btn.ghost:hover{background:var(--ink);color:#fff;text-decoration:none;border-color:var(--ink)}
.tf-btn .arr{transition:transform .15s ease}
.tf-btn:hover .arr{transform:translateX(3px)}

/* ---------- Telefon-galleri (startsida) ---------- */
.tf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tf-phone{position:relative;display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 22px 22px;text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;box-shadow:var(--shadow-sm)}
.tf-phone:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--rose-deep);text-decoration:none}
.tf-phone-name{font-family:var(--f-body);font-weight:700;font-size:1.16rem;color:var(--ink);margin:0}
.tf-phone-from{font-size:.92rem;color:var(--muted);margin:4px 0 0;font-weight:500}
.tf-phone-from b{color:var(--clay);font-weight:700}
.tf-phone-img{position:relative;margin:18px auto 6px;height:230px;display:flex;align-items:center;justify-content:center}
.tf-phone-img::before{content:"";position:absolute;inset:auto;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,var(--rose-soft) 0%,rgba(248,232,229,0) 70%);z-index:0}
.tf-phone-img img{position:relative;z-index:1;max-height:230px;width:auto;object-fit:contain}
.tf-phone-go{margin-top:auto;padding-top:14px;font-weight:700;color:var(--orange-deep);font-size:.95rem;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.tf-phone:hover .tf-phone-go{color:var(--orange)}

/* ---------- Deal-lista ---------- */
.tf-deals{display:flex;flex-direction:column;gap:16px;margin:8px 0 0}
.tf-deal{position:relative;display:grid;grid-template-columns:62px 1fr auto;gap:20px;align-items:center;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px;box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,transform .18s ease}
.tf-deal:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.tf-deal-rank{position:absolute;top:-11px;left:22px;background:#fff;border:1px solid var(--line-2);color:var(--muted);
  font-weight:700;font-size:.74rem;border-radius:var(--r-pill);padding:3px 11px;letter-spacing:.02em}
.tf-deal-rank.top{background:var(--orange);border-color:var(--orange);color:#fff}
.tf-deal-logo{width:62px;height:62px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:8px}
.tf-deal-logo img{max-height:42px;max-width:52px;object-fit:contain}
.tf-deal-name{font-family:var(--f-body);font-weight:700;font-size:1.14rem;margin:0 0 8px;color:var(--ink)}
.tf-pills{display:flex;flex-wrap:wrap;gap:6px}
.tf-pill{font-size:.78rem;font-weight:600;padding:4px 11px;border-radius:var(--r-pill);background:var(--rose-soft);color:var(--ink-soft);border:1px solid var(--rose-deep)}
.tf-pill.orange{background:var(--orange-soft);color:var(--orange-deep);border-color:#F3CBA6}
.tf-pill.dark{background:#fff;color:var(--muted);border-color:var(--line-2)}
.tf-deal-price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:150px}
.tf-price-big{font-family:var(--f-disp);font-size:2rem;line-height:1;color:var(--ink)}
.tf-price-sub{font-size:.82rem;color:var(--muted)}
.tf-deal-cta{margin-top:8px}
.tf-stars{display:inline-flex;gap:2px;margin-top:8px}
.tf-stars svg{width:16px;height:16px}

/* Jämförpris-badge (mitten på desktop, höger på mobil) */
.tf-jmf{justify-self:center;align-self:center;background:var(--ink);color:#fff;font-weight:700;font-size:.82rem;
  padding:7px 13px;border-radius:var(--r-pill);white-space:nowrap;cursor:help;display:inline-flex;align-items:center;gap:7px}
.tf-jmf::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.tf-deal.has-jmf{grid-template-columns:62px 1fr auto auto}

/* ---------- Prosa ---------- */
.tf-prose{font-size:1.06rem}
.tf-prose h2{margin-top:1.6em}
.tf-prose h3{margin-top:1.5em;color:var(--ink)}
.tf-prose ul,.tf-prose ol{padding-left:1.3em;margin:0 0 1.2em}
.tf-prose li{margin-bottom:.5em}
.tf-prose a{font-weight:600;border-bottom:1px solid var(--rose-deep)}
.tf-prose a:hover{border-color:var(--orange)}
.tf-prose blockquote{margin:1.4em 0;padding:6px 0 6px 22px;border-left:3px solid var(--orange);
  font-family:var(--f-disp);font-style:italic;font-size:1.3rem;color:var(--ink-soft)}

/* fig */
.tf-figure{margin:0 0 28px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.tf-figure img{width:100%}
.tf-figure figcaption{font-size:.86rem;color:var(--muted);padding:11px 16px;background:var(--paper-2)}
.tf-figure figcaption em{font-family:var(--f-disp)}

/* faktatabell */
.tf-facts{width:100%;border-collapse:collapse;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin:6px 0 24px}
.tf-facts th,.tf-facts td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.97rem}
.tf-facts tr:last-child th,.tf-facts tr:last-child td{border-bottom:0}
.tf-facts th{width:38%;color:var(--muted);font-weight:600;background:var(--rose-soft)}
/* Behåll telefynd-design även med Bootstrap .table */
.tf-facts.table{--bs-table-bg:transparent;background:var(--paper-2);margin:6px 0 24px;color:var(--ink);vertical-align:top}
.tf-facts.table>:not(caption)>*>*{padding:13px 18px;box-shadow:none;background:transparent}
.tf-facts.table th[scope=row]{background:var(--rose-soft)}
.table-responsive{border-radius:var(--r-card);margin:6px 0 24px}
.table-responsive .tf-facts{margin:0}

/* ---------- FAQ ---------- */
.tf-faq{display:flex;flex-direction:column;gap:10px}
.tf-faq details{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:0 20px;box-shadow:var(--shadow-sm)}
.tf-faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
.tf-faq summary::-webkit-details-marker{display:none}
.tf-faq summary::after{content:"+";font-family:var(--f-disp);font-size:1.6rem;color:var(--orange);line-height:1;transition:transform .2s ease}
.tf-faq details[open] summary::after{transform:rotate(45deg)}
.tf-faq details[open]{border-color:var(--rose-deep)}
.tf-faq-a{padding:0 0 18px;color:var(--ink-soft)}
.tf-faq-a p:last-child{margin-bottom:0}

/* ---------- CTA-box ---------- */
.tf-ctabox{background:var(--ink);color:#F6ECE6;border-radius:var(--r-card);padding:30px 32px;margin:28px 0;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.tf-ctabox h3{color:#fff;margin:0 0 6px}
.tf-ctabox p{margin:0;color:#D8C4BB}
.tf-ctabox .tf-it{color:var(--orange)}

/* ---------- Ämnesrutnät ---------- */
.tf-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tf-topic{display:block;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s,border-color .16s}
.tf-topic:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--rose-deep);text-decoration:none}
.tf-topic h4{margin:0 0 5px;color:var(--ink)}
.tf-topic p{margin:0;color:var(--muted);font-size:.9rem}
.tf-topic .arr{color:var(--orange-deep);font-weight:700}

/* ---------- Rekommendationer efter surfmängd (produktsida) ---------- */
.tf-reco{display:flex;flex-direction:column;gap:10px}
.tf-reco-row{display:grid;grid-template-columns:140px 1fr auto auto;gap:18px;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow-sm)}
.tf-reco-label{font-family:var(--f-body);font-weight:800;font-size:.78rem;letter-spacing:.03em;color:var(--clay);text-transform:uppercase}
.tf-reco-mid{color:var(--ink-soft);font-size:.95rem}
.tf-reco-price{font-family:var(--f-disp);font-size:1.2rem;color:var(--ink);white-space:nowrap}
.tf-reco-cta{white-space:nowrap}
@media(max-width:680px){.tf-reco-row{grid-template-columns:1fr;gap:6px}.tf-reco-cta{justify-self:start;margin-top:8px}}

/* ---------- Affiliate-info ---------- */
.tf-aff{font-size:.82rem;color:var(--muted);background:var(--rose-soft);border:1px solid var(--line);border-radius:12px;padding:11px 16px;margin:0 0 24px}

/* ---------- Footer ---------- */
.tf-foot{background:var(--ink);color:#CDB9AF;padding:54px 0 30px;margin-top:20px}
.tf-foot h5{font-family:var(--f-body);font-weight:700;color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.tf-foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.tf-foot a{display:block;color:#CDB9AF;padding:4px 0;font-size:.93rem}
.tf-foot a:hover{color:var(--orange);text-decoration:none}
.tf-foot-logos{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:36px 0 24px;padding:24px 0;border-block:1px solid rgba(255,255,255,.12)}
.tf-foot-logos a{background:#fff;border-radius:10px;padding:8px 12px;display:flex;align-items:center;justify-content:center;height:46px}
.tf-foot-logos img{max-height:26px;max-width:80px;object-fit:contain}
.tf-foot .small{font-size:.82rem;color:#9C8278;margin:6px 0}
.tf-foot-bottom{margin-bottom:14px!important}
.tf-foot-bottom a{display:inline!important;color:#E7D4CB;font-weight:600;padding:0}
.tf-foot-bottom a:hover{color:var(--orange)}
.tf-foot-bottom span{margin:0 8px;color:#6f5a51}

/* ---------- Responsivt ---------- */
@media(max-width:900px){
  .tf-grid{grid-template-columns:repeat(2,1fr)}
  .tf-topics{grid-template-columns:repeat(2,1fr)}
  .tf-foot-grid{grid-template-columns:repeat(2,1fr)}
  .tf-hero-split{grid-template-columns:1fr;gap:20px}
}
@media(max-width:680px){
  body{font-size:17px}
  .tf-menu{position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 16px 14px;display:none;box-shadow:var(--shadow)}
  .tf-menu.show{display:flex}
  .tf-menu a{padding:12px 10px;border-radius:10px}
  .tf-burger{display:inline-block}
  .tf-grid{grid-template-columns:1fr 1fr;gap:14px}
  .tf-phone-img{height:170px}
  .tf-phone-img img{max-height:170px}
  /* deal: staplat med jämförpris till höger */
  .tf-deal,.tf-deal.has-jmf{grid-template-columns:48px 1fr;grid-template-areas:"logo info" "jmf jmf" "price price";gap:12px 14px;padding:22px 18px 18px}
  .tf-deal-logo{grid-area:logo;width:48px;height:48px}
  .tf-deal-info{grid-area:info}
  .tf-jmf{grid-area:jmf;justify-self:end}
  .tf-deal-price{grid-area:price;text-align:left;align-items:flex-start;flex-direction:row;flex-wrap:wrap;justify-content:space-between;width:100%;border-top:1px solid var(--line);padding-top:14px}
  .tf-deal-cta{margin-top:0}
  .tf-ctabox{grid-template-columns:1fr}
  .tf-topics{grid-template-columns:1fr}
}
@media(max-width:380px){.tf-grid{grid-template-columns:1fr}}

/* Bootstrap tooltip — varm ton */
.tooltip.tf-tt .tooltip-inner{background:var(--ink);color:#F6ECE6;font-family:var(--f-body);font-size:.86rem;max-width:280px;padding:10px 14px;border-radius:10px;text-align:left;line-height:1.5}
.tooltip.tf-tt .tooltip-arrow::before{border-top-color:var(--ink);border-bottom-color:var(--ink)}