/*
Theme Name: Satellite Radio SM
Theme URI: https://radiocarssm.online/
Author: Satellite Radio SM
Description: Editorial storefront theme for satellite and car radio hardware. Products,
shop filtering, basket and order flow are built in. Colours, type and spacing all come
from the custom properties at the top of this file.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: srsm
*/


:root{
  --paper:#FBF8F3; --card:#FFFFFF; --ink:#16131A; --mut:#5F5862; --fade:#8A8289;
  --line:#E7DFD3; --line2:#D8CDBC; --sand:#F3EADB;
  --pet:#0F3D56; --pet2:#155672; --ember:#D95A16; --ember2:#B94A0F;
  --ok:#1E6B45; --warn:#8A5B00;
  --ser:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --san:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --wrap:1140px; --r:14px;
}
*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--san);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--pet);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--ser);font-weight:600;line-height:1.14;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2.05rem,5.2vw,3.5rem)}
h2,h1.as-h2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
h3{font-size:1.22rem;line-height:1.3}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:22px;padding-right:22px}
.eyebrow{font-family:var(--san);font-size:.735rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ember);margin:0 0 .85rem}
.lede{font-size:1.12rem;color:var(--mut);max-width:64ch}
.sec{padding-block:clamp(52px,7vw,88px)}
.sec.alt{background:var(--sand);border-block:1px solid var(--line)}
.sec.deep{background:var(--pet);color:#EDF3F6;border-block:1px solid #0B2E42}
.sec.deep h2,.sec.deep h3{color:#fff}
.sec.deep .lede,.sec.deep p{color:#C3D6E0}
.sec.deep .eyebrow{color:#F0A86E}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:60;background:rgba(251,248,243,.94);
  backdrop-filter:saturate(1.4) blur(9px);border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:center;gap:18px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  flex:0 0 auto;min-width:0;min-height:44px;padding-right:4px}
.logo>span{min-width:0;overflow:hidden}
.logo .mk{width:34px;height:34px;flex:0 0 auto}
.logo b{font-family:var(--ser);font-size:1.1rem;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
.logo s{display:block;font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fade);text-decoration:none;font-family:var(--san);font-weight:600;margin-top:-2px;
  white-space:nowrap}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{font-size:.9rem;color:var(--ink);text-decoration:none;padding:10px 11px;border-radius:9px;
  min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.nav a:hover{background:var(--sand)}
.nav a.on{color:var(--pet);font-weight:650;background:var(--sand)}
.tools{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.cartb{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line2);border-radius:11px;background:var(--card);
  color:var(--ink);text-decoration:none}
.cartb .n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  background:var(--ember);color:#fff;border-radius:10px;font-size:.68rem;font-weight:800;
  display:none;align-items:center;justify-content:center;line-height:1}
.cartb .n.show{display:flex}
.burg{display:none;width:44px;height:44px;border:1px solid var(--line2);border-radius:11px;
  background:var(--card);align-items:center;justify-content:center;cursor:pointer}
.mob{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mob.open{display:block}
.mob a{display:block;padding:14px 22px;border-bottom:1px solid var(--line);color:var(--ink);
  text-decoration:none;font-size:1rem}
.mob a:last-child{border-bottom:0}

/* WordPress menus arrive as <ul><li><a>; strip the list so the flex row still works */
.nav ul,.mob ul,.foot ul{list-style:none;margin:0;padding:0}
.nav ul{display:flex;gap:0;align-items:center;flex-wrap:nowrap}
.nav li,.mob li,.foot li{list-style:none;margin:0}
.nav li::marker,.mob li::marker,.foot li::marker{content:''}
.nav .current-menu-item>a,.nav .current_page_item>a{color:var(--pet);font-weight:650;background:var(--sand)}
.mob li>a{display:block}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
  padding:0 22px;border-radius:11px;font:inherit;font-size:.97rem;font-weight:650;
  text-decoration:none;cursor:pointer;border:1px solid transparent;transition:.16s}
.btn.pri{background:var(--ember);color:#fff;box-shadow:0 1px 0 var(--ember2)}
.btn.pri:hover{background:var(--ember2)}
.btn.sec{background:var(--card);color:var(--ink);border-color:var(--line2)}
.btn.sec:hover{border-color:var(--pet);color:var(--pet)}
.btn.ghost{background:transparent;color:#EDF3F6;border-color:rgba(255,255,255,.4)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.6rem}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;background:#0C2B3C;isolation:isolate}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 58%;z-index:-3}
.hero .scrim{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(94deg,rgba(9,32,45,.95) 0%,rgba(9,32,45,.84) 26%,rgba(9,32,45,.44) 48%,rgba(9,32,45,.06) 68%,rgba(9,32,45,0) 82%),
  linear-gradient(0deg,rgba(9,32,45,.55) 0%,rgba(9,32,45,0) 42%)}
.hero .in{padding-block:clamp(56px,8vw,104px) clamp(40px,5vw,68px);max-width:690px;color:#fff}
.hero h1{color:#fff;font-size:clamp(2.1rem,5.4vw,3.7rem)}
.hero .sub{color:#CBDCE5;font-size:clamp(1.02rem,1.6vw,1.16rem);max-width:56ch;margin-top:1.1rem}
.hero .eyebrow{color:#F5B77F}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.18)}
.trust span{display:flex;align-items:center;gap:8px;font-size:.86rem;color:#A9C3D0}
.trust svg{flex:0 0 auto}

@media(max-width:900px){
  .hero .bg{object-position:64% 54%}
  .hero .scrim{background:
    linear-gradient(180deg,rgba(9,32,45,.88) 0%,rgba(9,32,45,.68) 48%,rgba(9,32,45,.84) 100%)}
}

/* ---- grid + cards ---- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card h3{margin-bottom:.5rem}
.card p{color:var(--mut);font-size:.95rem;margin-bottom:0}
.ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--sand);border-radius:10px;color:var(--pet);margin-bottom:16px}
.sec.deep .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.sec.deep .card p{color:#B6CCD8}
.sec.deep .ic{background:rgba(255,255,255,.1);color:#F0A86E}

/* ---- product ---- */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.pcard .ph{background:linear-gradient(160deg,#F4EFE6,#E9E0D2);border-bottom:1px solid var(--line);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:2px}
.pcard .ph img,.pcard .ph svg{width:100%;height:100%;object-fit:contain}
.pcard .bd{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.pcard .sku{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fade);font-weight:700}
.pcard .hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pcard h3{font-size:1.05rem;margin:.35rem 0 .45rem}
.pcard h3 a{color:var(--ink);text-decoration:none}
.pcard h3 a:hover{color:var(--pet)}
.pcard .bl{font-size:.88rem;color:var(--mut);margin:0 0 14px;flex:1}
.pcard .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-family:var(--ser);font-size:1.32rem;font-weight:600}
.price s{color:var(--fade);font-size:.86rem;font-weight:400;margin-right:7px}
.stk{font-size:.78rem;font-weight:700;color:var(--ok)}
.stk.low{color:var(--warn)}
.tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;background:var(--sand);color:var(--pet);border:1px solid var(--line2)}

/* ---- shop layout ---- */
.shoplay{display:grid;grid-template-columns:236px 1fr;gap:30px;align-items:start}
.filt{position:sticky;top:88px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px}
.filt h4{font-family:var(--san);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fade);margin:0 0 10px}
.filt button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;
  font-size:.93rem;color:var(--ink);padding:9px 11px;border-radius:8px;cursor:pointer;min-height:40px}
.filt button:hover{background:var(--sand)}
.filt button.on{background:var(--pet);color:#fff;font-weight:650}
.filt .sep{height:1px;background:var(--line);margin:16px 0}
.shophead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:18px;flex-wrap:wrap}
.count{font-size:.9rem;color:var(--mut)}

/* ---- product detail ---- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.pdp .gal{background:linear-gradient(160deg,#F4EFE6,#E9E0D2);border:1px solid var(--line);
  border-radius:var(--r);padding:26px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.pdp .gal img,.pdp .gal svg{width:100%;height:100%;object-fit:contain}
.spec{width:100%;border-collapse:collapse;font-size:.93rem;margin:1.2rem 0}
.spec th,.spec td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:40%;color:var(--mut);font-weight:600}
.buybox{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:22px;margin:1.4rem 0}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line2);border-radius:10px;overflow:hidden;width:fit-content}
.qty button{width:46px;height:46px;border:0;background:var(--card);font-size:1.2rem;cursor:pointer;color:var(--ink)}
.qty button:hover{background:var(--sand)}
.qty input{width:56px;height:46px;border:0;border-inline:1px solid var(--line2);text-align:center;
  font:inherit;font-weight:650;background:var(--card);color:var(--ink)}

/* ---- prose / guide ---- */
.prose{max-width:74ch}
.prose h2{margin:2.4rem 0 .9rem}
.prose h3{margin:1.9rem 0 .55rem}
.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:1.25rem;color:var(--mut)}
.prose li{margin-bottom:.42rem}
.prose p{color:var(--mut)}
.prose strong{color:var(--ink)}
.note{background:var(--sand);border-left:3px solid var(--ember);border-radius:0 10px 10px 0;
  padding:18px 20px;margin:1.5rem 0}
.note p:last-child{margin-bottom:0}
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:2rem}
.toc h4{font-family:var(--san);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fade);margin:0 0 12px}
.toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:30px}
.toc li{margin-bottom:.4rem;font-size:.93rem}

/* ---- faq ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 44px 20px 0;position:relative;list-style:none;
  font-family:var(--ser);font-size:1.1rem;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--ember);font-family:var(--san);line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq .a{padding:0 0 20px;color:var(--mut);max-width:74ch}
.faq .a p:last-child{margin-bottom:0}

/* ---- forms ---- */
.form{display:grid;gap:16px}
.fr{display:grid;gap:6px}
.fr label{font-size:.86rem;font-weight:650}
.fr .hint{font-size:.79rem;color:var(--fade)}
input,select,textarea{font:inherit;font-size:1rem;padding:13px 14px;border:1px solid var(--line2);
  border-radius:10px;background:var(--card);color:var(--ink);width:100%;min-height:50px}
textarea{min-height:130px;resize:vertical}
input:focus,select,textarea:focus{outline:2px solid var(--pet);outline-offset:1px}
select{outline:none}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.okmsg{background:#E9F4EE;border:1px solid #B6DCC6;color:#14502F;border-radius:10px;padding:16px 18px;
  margin-bottom:1rem}
.errmsg{background:#FBEBE5;border:1px solid #E9C0AC;color:#8A3410;border-radius:10px;padding:12px 15px;
  font-size:.9rem}

/* ---- cart ---- */
.crow{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.crow .th{background:linear-gradient(160deg,#F4EFE6,#E9E0D2);border:1px solid var(--line);
  border-radius:10px;aspect-ratio:1/1;padding:8px;display:flex;align-items:center;justify-content:center}
.crow .th img,.crow .th svg{width:100%;height:100%;object-fit:contain}
.crow .nm{font-weight:650;font-size:.98rem}
.crow .mt{font-size:.83rem;color:var(--fade)}
.crow .rm{background:none;border:0;color:var(--ember);font:inherit;font-size:.83rem;cursor:pointer;
  padding:6px 0;text-decoration:underline;min-height:34px}
.sum{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:24px;
  position:sticky;top:88px}
.sum .l{display:flex;justify-content:space-between;padding:9px 0;font-size:.95rem;color:var(--mut)}
.sum .l.tot{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;
  font-family:var(--ser);font-size:1.34rem;color:var(--ink);font-weight:600}
.empty{text-align:center;padding:70px 20px;color:var(--mut)}

/* ---- steps / stats ---- */
.steps{counter-reset:s;display:grid;gap:20px}
.step{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.step .n{counter-increment:s;width:52px;height:52px;border-radius:50%;background:var(--sand);
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-family:var(--ser);font-size:1.3rem;font-weight:600;color:var(--pet)}
.step .n::before{content:counter(s)}
.step h3{margin-bottom:.35rem}
.step p{color:var(--mut);font-size:.95rem;margin:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--card);padding:26px 22px}
.stat b{display:block;font-family:var(--ser);font-size:2rem;font-weight:600;color:var(--pet);line-height:1}
.stat span{display:block;font-size:.85rem;color:var(--mut);margin-top:8px}

/* ---- split ---- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.split .art{background:linear-gradient(160deg,#F4EFE6,#E9E0D2);border:1px solid var(--line);
  border-radius:var(--r);padding:30px}
.split .art svg{width:100%;height:auto}

/* ---- notice ---- */
.ordnote{display:flex;gap:16px;background:var(--sand);border:1px solid var(--line2);
  border-radius:var(--r);padding:20px 22px;margin:1.5rem 0}
.ordnote .ic{margin:0;flex:0 0 auto}
.ordnote b{display:block;margin-bottom:.35rem}
.ordnote p{margin:0;font-size:.92rem;color:var(--mut)}

/* ---- footer ---- */
.foot{background:#12141A;color:#A9A3AC;border-top:1px solid #23262E;padding-block:56px 32px;font-size:.9rem}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px}
.foot h5{font-family:var(--san);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#6E6873;margin:0 0 14px;font-weight:700}
.foot a{color:#C9C3CC;text-decoration:none;display:block;padding:5px 0}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .brand b{font-family:var(--ser);color:#fff;font-size:1.1rem;display:block;margin-bottom:10px}
.foot .brand p{color:#8C868F;font-size:.88rem;max-width:38ch}
.foot .contact{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.foot .contact li{display:flex;gap:10px;align-items:center;font-size:.88rem;color:#A9A3AC}
.foot .contact li svg{flex:0 0 auto;color:#6E6873}
.foot .contact a{display:inline;padding:0;color:#C9C3CC}
.foot .contact a:hover{color:#fff}
.disc{border-top:1px solid #23262E;padding-top:24px;font-size:.79rem;color:#7A747F;line-height:1.66}
.disc p{margin-bottom:.7rem}
.disc b{color:#A9A3AC}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid #23262E;margin-top:22px;padding-top:20px;font-size:.8rem;color:#6E6873}

/* a long menu label (eight items) needs the bar tightened before the burger appears */
@media(max-width:1240px){
  .nav a{font-size:.855rem;padding:10px 8px}
  .logo s{display:none}
  .top .bar{gap:12px}
  .top .tools .btn.pri{padding:0 13px}
}

/* ---- responsive ---- */
@media(max-width:1000px){
  .g4{grid-template-columns:repeat(3,1fr)}
  .foot .cols{grid-template-columns:1fr 1fr 1fr}
  .foot .brand{grid-column:1/-1}
  .split{grid-template-columns:1fr;gap:32px}
  .shoplay{grid-template-columns:1fr}
  .filt{position:static}
  .filt .fl{display:flex;flex-wrap:wrap;gap:8px}
  .filt button{width:auto;border:1px solid var(--line2)}
  .pdp{grid-template-columns:1fr;gap:28px}
}
@media(max-width:1080px){
  .nav{display:none}
  .burg{display:flex}
}
@media(max-width:820px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .toc ol{columns:1}
}
@media(max-width:620px){
  /* header call button collapses to its icon so the bar never overflows */
  .top .tools .btn.pri span{display:none}
  .top .tools .btn.pri{width:44px;padding:0;justify-content:center}
  .top .bar{gap:10px}
}
@media(max-width:560px){
  body{font-size:16px}
  .wrap{padding-left:18px;padding-right:18px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
  .cta .btn{width:100%}
  .logo{flex:0 1 auto}
  .crow{grid-template-columns:64px 1fr;row-gap:10px}
  .crow .rt{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
  .logo s{display:none}
}

/* ---- WordPress core classes ---- */
.alignleft{float:left;margin:.4rem 1.4rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.4rem}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:.85rem;color:var(--fade);margin-top:.5rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.admin-bar .top{top:32px}
@media(max-width:782px){.admin-bar .top{top:46px}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:999;background:#fff;padding:10px 14px;border-radius:8px}