/* ==========================================================================
   OnShopify — modern UI layer (2026-10)
   Loaded after style.css; overrides typography, nav, cards, forms, footer.
   ========================================================================== */

:root{
  --ink:#0b1220;
  --body:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --accent:#2563eb;
  --accent-2:#1d4ed8;
  --soft:#f6f8fb;
  --radius:14px;
  --shadow:0 6px 24px rgba(15,23,42,.08);
}

/* ---- Fonts (self-hosted, latin) ---------------------------------------- */
@font-face{font-family:Inter;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.65;color:var(--body);background:#fff;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{
  font-family:Manrope,Inter,sans-serif;color:var(--ink);
  letter-spacing:-.02em;line-height:1.2;margin-top:1.3em;margin-bottom:.55em;
}
h1{font-size:clamp(30px,4.2vw,44px);font-weight:800}
h2{font-size:clamp(24px,3.2vw,32px);font-weight:700}
h3{font-size:22px;font-weight:700}
h4{font-size:18px;font-weight:700}
p{font-family:inherit;color:var(--body);font-size:16px;line-height:1.7}
.lead{font-size:18px;line-height:1.7;color:#475569;font-weight:400}
small,.small{color:var(--muted)}
a{color:var(--accent);transition:color .15s ease}
a:hover,a:focus{color:var(--accent-2);text-decoration:none}
strong,b{font-weight:700;color:var(--ink)}
hr{border-top:1px solid var(--line)}

/* ---- Navbar ------------------------------------------------------------ */
.navbar,.navbar-inverse{
  background:rgba(11,18,32,.98)!important;border:0!important;border-radius:0;
  min-height:64px;margin:0;padding-top:0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(2,6,23,.16);
  position:sticky;top:0;z-index:1030;
}
.navbar-inverse .navbar-brand{
  color:#fff!important;font-family:Manrope,Inter,sans-serif;font-weight:800;
  font-size:19px;letter-spacing:-.02em;height:64px;padding:20px 15px;
}
.navbar-inverse .navbar-nav>li>a{
  color:#cbd5e1!important;font-weight:500;font-size:14px;
  padding:21px 16px;letter-spacing:.01em;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus{color:#fff!important}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus{
  color:#fff!important;background:transparent!important;box-shadow:inset 0 -2px 0 #3b82f6;
}
.navbar-inverse .navbar-toggle{border-color:rgba(255,255,255,.25)}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background:rgba(255,255,255,.08)}

/* ---- Layout rhythm ----------------------------------------------------- */
.container{max-width:1200px}
.mtb{margin-top:64px;margin-bottom:64px}
section{scroll-margin-top:80px}

/* ---- Cards (theme / site screenshots) ---------------------------------- */
.theme-name{margin:18px 0 10px}
.theme-name a{font-family:Manrope,Inter,sans-serif!important;font-size:19px!important;font-weight:700;color:var(--ink)}
.theme-name a:hover{color:var(--accent)}
.price-info{font-weight:700;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px}
div[style*="background-image"]{
  border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
  background-color:var(--soft);
}
div[style*="background-image"]:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,23,42,.14)}

/* ---- Buttons, labels, badges ------------------------------------------- */
.btn{border-radius:10px;font-family:Inter,sans-serif;font-weight:600;font-size:14px;
  padding:9px 16px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn-primary{background:var(--accent);border-color:var(--accent)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  background:var(--accent-2)!important;border-color:var(--accent-2)!important;box-shadow:0 8px 18px rgba(37,99,235,.25)}
.btn-success{background:#10b981;border-color:#10b981}
.btn .badge{background:rgba(255,255,255,.22);border-radius:999px;font-weight:600;margin-left:6px}
.badge{border-radius:999px}
.label{border-radius:999px;font-weight:600;padding:.3em .65em;font-size:12px}
.label-success{background:#059669}
.label-warning{background:#d97706}

/* ---- Forms ------------------------------------------------------------- */
.form-control{
  height:44px;border-radius:10px;border:1px solid var(--line);
  box-shadow:none;font-size:15px;color:var(--ink);background:#fff;
}
.form-control:focus{border-color:#93b4f8;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.form-label,.control-label{font-weight:600;color:var(--ink);font-size:14px;margin-bottom:6px}

/* ---- Alerts / callouts ------------------------------------------------- */
.alert{border-radius:12px;border-width:1px;font-size:15px}
.alert-info{background:#eff6ff;border-color:#dbeafe;color:#1e3a8a}
.alert-info h3{color:#1e3a8a;margin-top:.2em}

/* ---- Tables ------------------------------------------------------------ */
.table>thead>tr>th{border-bottom:2px solid var(--line);color:var(--ink);font-weight:600;font-size:14px}
.table>tbody>tr>td,.table>tbody>tr>th{border-top:1px solid var(--line);padding:10px 12px;vertical-align:middle}
.table-striped>tbody>tr:nth-of-type(odd){background:#fafbfd}

/* ---- Pagination -------------------------------------------------------- */
.pagination>li>a,.pagination>li>span{
  border:1px solid var(--line);border-radius:9px!important;margin:0 3px;
  color:var(--ink);font-weight:500;padding:7px 12px;
}
.pagination>li>a:hover{background:var(--soft);border-color:#cbd5e1}
.pagination>.active>a,.pagination>.active>span{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;
}

/* ---- Footer ------------------------------------------------------------ */
#footerwrap{background:var(--ink);color:#94a3b8;padding:56px 0 44px;margin-top:80px}
#footerwrap h4{color:#fff;font-family:Manrope,Inter,sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin-top:0}
#footerwrap p{color:#94a3b8;font-size:14px;line-height:1.7}
#footerwrap a{color:#cbd5e1}
#footerwrap a:hover,#footerwrap a:focus{color:#fff}
.hline-w{background:#334155;height:2px;width:44px;margin:10px 0 18px;border-radius:2px}

/* ---- Images ------------------------------------------------------------ */
img{max-width:100%;height:auto}
.thumb,.thumbnail{border-radius:12px;border:1px solid var(--line)}

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width:767px){
  h1{font-size:30px}
  h2{font-size:24px}
  .mtb{margin-top:40px;margin-bottom:40px}
  .navbar-inverse .navbar-nav>li>a{padding:12px 16px}
  #footerwrap{margin-top:56px;padding:40px 0 28px}
}