/* ============================================================
   HSC রসায়ন Emergency — Stylesheet (offline, no CDN)
   ============================================================ */
:root{
  --bg:#f2f5fa; --bg-soft:#e9eef7; --card:#ffffff; --card2:#f7f9fd;
  --text:#17202e; --muted:#5a6577; --border:#dde4ef;
  --accent:#0e7490; --accent-soft:#e0f2f7; --accent-text:#0b5e75;
  --hint:#dc2626; --hint-soft:#fdeaea;
  --high:#dc2626; --high-soft:#fdeaea;
  --med:#b45309; --med-soft:#fdf0dd;
  --low:#64748b; --low-soft:#eef2f7;
  --ok:#047857; --ok-soft:#e2f5ec;
  --shadow:0 1px 3px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04);
  --radius:14px;
}
[data-theme="dark"]{
  --bg:#0b101d; --bg-soft:#101728; --card:#151d31; --card2:#1a2340;
  --text:#e8edf7; --muted:#9daac2; --border:#28324b;
  --accent:#38bdf8; --accent-soft:#0c2b3d; --accent-text:#7dd3fc;
  --hint:#f87171; --hint-soft:#3a1620;
  --high:#f87171; --high-soft:#3a1620;
  --med:#fbbf24; --med-soft:#3a2c11;
  --low:#94a3b8; --low-soft:#232c3f;
  --ok:#34d399; --ok-soft:#0d2f24;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans Bengali","Hind Siliguri","SolaimanLipi","Kalpurush","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.75;font-size:16px;
}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:1rem;color:var(--text)}
a{color:var(--accent);text-decoration:none}
::selection{background:var(--accent-soft)}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:60px;z-index:60;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  background:var(--card);border-bottom:1px solid var(--border);
}
.brand{font-weight:700;font-size:1.05rem;white-space:nowrap}
.brand-sub{
  font-size:.72rem;font-weight:700;letter-spacing:.5px;
  background:var(--hint);color:#fff;border-radius:6px;padding:2px 7px;vertical-align:middle;
}
.icon-btn{
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text);
  border-radius:10px;width:40px;height:40px;font-size:1.15rem;flex:none;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.icon-btn:hover{background:var(--accent-soft)}
.search-wrap{flex:1;max-width:640px;margin:0 auto;position:relative}
#searchInput{
  width:100%;height:40px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-soft);padding:0 14px;outline:none;transition:.15s;
}
#searchInput:focus{border-color:var(--accent);background:var(--card)}

/* ---------- Layout / Sidebar ---------- */
.layout{display:flex;padding-top:60px;min-height:100vh}
#sidebar{
  width:264px;flex:none;background:var(--card);border-right:1px solid var(--border);
  position:fixed;top:60px;bottom:0;left:0;overflow-y:auto;padding:12px 10px 30px;z-index:55;
}
#main{flex:1;margin-left:264px;padding:22px 26px 40px;max-width:100%;min-width:0}
.nav-group{margin-bottom:6px}
.nav-group-title{
  font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.6px;
  padding:10px 12px 4px;text-transform:uppercase;
}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:right;
  padding:9px 12px;border-radius:10px;border:none;background:transparent;
  color:var(--text);font-size:.95rem;transition:.13s;margin-bottom:2px;line-height:1.45;
}
.nav-item > span:nth-child(2){flex:1;min-width:0}
.nav-item:hover{background:var(--bg-soft)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.nav-item .ni{width:22px;text-align:center;flex:none}
.nav-item .cnt{
  margin-left:auto;background:var(--bg-soft);border:1px solid var(--border);
  border-radius:20px;font-size:.7rem;padding:0 8px;color:var(--muted);font-weight:700;
}
.nav-item.hintzone .ni{color:var(--hint)}
.nav-sub{padding-left:14px}
.nav-sub .nav-item{font-size:.88rem;padding:7px 12px}

#overlay{position:fixed;inset:0;background:rgba(5,10,20,.5);z-index:54;display:none}

/* ---------- Generic components ---------- */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px;
}
.card h2{font-size:1.35rem;margin-bottom:10px}
.card h3{font-size:1.1rem;margin-bottom:8px}
.page-title{font-size:1.5rem;font-weight:800;margin:4px 0 4px}
.page-sub{color:var(--muted);margin-bottom:18px;font-size:.95rem}
.btn{
  display:inline-flex;align-items:center;gap:7px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);color:var(--text);padding:9px 16px;font-size:.95rem;font-weight:600;transition:.15s;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme="dark"] .btn.primary{color:#06131c}
.btn.danger{background:var(--hint);border-color:var(--hint);color:#fff}
[data-theme="dark"] .btn.danger{color:#25080a}
.btn.small{padding:5px 12px;font-size:.85rem;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chip{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  font-size:.72rem;font-weight:700;padding:2px 10px;vertical-align:middle;
}
.chip.high{background:var(--high-soft);color:var(--high)}
.chip.med{background:var(--med-soft);color:var(--med)}
.chip.low{background:var(--low-soft);color:var(--low)}
.chip.hint{background:var(--hint-soft);color:var(--hint)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.acc{background:var(--accent-soft);color:var(--accent-text)}
.chip.gray{background:var(--bg-soft);color:var(--muted)}
.tbl-wrap{overflow-x:auto;margin:10px 0;border:1px solid var(--border);border-radius:12px}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.tbl th{
  background:var(--bg-soft);text-align:right;padding:9px 12px;font-weight:700;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:nth-child(even) td{background:var(--card2)}
.formula{
  background:var(--bg-soft);border:1px dashed var(--accent);border-radius:10px;
  padding:10px 14px;margin:8px 0;font-weight:700;color:var(--accent-text);
  direction:ltr;text-align:center;font-size:1.02rem;
}
ul.clean{list-style:none;padding:0}
ul.clean li{padding:4px 0 4px 2px}
ul.dots{padding-right:20px;padding-left:0}
ul.dots li{padding:3px 0}
.reveal-btn{
  background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent);
  border-radius:8px;padding:5px 14px;font-size:.85rem;font-weight:700;
}
.hidden-ans{display:none;margin-top:8px}
.hidden-ans.show{display:block}
.warn{
  background:var(--med-soft);border-right:4px solid var(--med);border-radius:10px;
  padding:10px 14px;margin:10px 0;font-size:.92rem;
}
.note{
  background:var(--accent-soft);border-right:4px solid var(--accent);border-radius:10px;
  padding:10px 14px;margin:10px 0;font-size:.92rem;
}
.verify-tag{
  display:inline-block;background:var(--med-soft);color:var(--med);
  border-radius:6px;font-size:.7rem;font-weight:700;padding:1px 8px;
}

/* ---------- Home ---------- */
.hero{
  background:linear-gradient(135deg,var(--accent),#155e75);color:#fff;
  border-radius:18px;padding:26px 24px;margin-bottom:18px;
}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#0c4a6e,#155e75)}
.hero h1{font-size:1.55rem;line-height:1.4;margin-bottom:8px}
.hero p{opacity:.94;font-size:.98rem;max-width:760px}
.hero .btn{background:#fff;color:#0e7490;border-color:#fff;margin-top:14px;font-weight:800}
[data-theme="dark"] .hero .btn{background:#e8edf7}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.stat{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px;text-align:center;box-shadow:var(--shadow);
}
.stat .num{font-size:1.5rem;font-weight:800;color:var(--accent)}
.stat .lbl{font-size:.82rem;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.quick-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.qlink{
  display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:14px;transition:.15s;box-shadow:var(--shadow);color:var(--text);
}
.qlink:hover{border-color:var(--accent);transform:translateY(-2px)}
.qlink .t{font-weight:700}
.qlink .d{font-size:.8rem;color:var(--muted)}

/* ---------- Lesson list & detail ---------- */
.lesson-item{
  display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:13px;padding:12px 14px;margin-bottom:10px;cursor:pointer;transition:.14s;
  box-shadow:var(--shadow);width:100%;text-align:right;
}
.lesson-item:hover{border-color:var(--accent)}
.lesson-item .li-num{
  width:34px;height:34px;flex:none;border-radius:10px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:var(--muted);
}
.lesson-item.done .li-num{background:var(--ok-soft);color:var(--ok)}
.lesson-item .li-t{font-weight:700;font-size:.97rem}
.lesson-item .li-m{font-size:.78rem;color:var(--muted)}
.lesson-item .li-right{margin-right:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.lbox{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow);margin-bottom:16px;
}
.lbox .box-title{
  display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.02rem;
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);
}
.oneline{
  background:linear-gradient(135deg,var(--hint-soft),var(--card));
  border:1.5px solid var(--hint);border-radius:14px;padding:14px 16px;margin-bottom:16px;
  font-weight:700;font-size:1.06rem;
}
.oneline .ol-tag{
  display:block;font-size:.7rem;color:var(--hint);font-weight:800;margin-bottom:4px;letter-spacing:.5px;
}
.defbox{border-right:4px solid var(--accent);background:var(--accent-soft);border-radius:10px;padding:12px 16px;margin:12px 0}
.defbox .dtag{font-size:.72rem;font-weight:800;color:var(--accent-text);letter-spacing:.5px}
.trick{
  background:var(--ok-soft);border:1px dashed var(--ok);border-radius:12px;
  padding:12px 16px;margin:10px 0;
}
.trick .ttag{font-weight:800;color:var(--ok);font-size:.85rem}
.mist{background:var(--hint-soft);border:1px dashed var(--hint);border-radius:12px;padding:12px 16px;margin:10px 0}
.mist .mtag{font-weight:800;color:var(--hint);font-size:.85rem}
.qpart{
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--card2);
}
.qpart .qp-label{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  background:var(--accent);color:#fff;font-weight:800;font-size:.85rem;margin-left:8px;
}
[data-theme="dark"] .qpart .qp-label{color:#06131c}
.qpart .qp-q{font-weight:600;margin:6px 0;display:inline}
.qpart .qp-marks{color:var(--muted);font-size:.78rem;font-weight:700}
.lesson-foot{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--border);
}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.breadcrumb a{color:var(--accent)}
.related-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* ---------- MCQ / Quiz ---------- */
.mode-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mode-tab{
  border:1px solid var(--border);background:var(--card);border-radius:10px;
  padding:7px 16px;font-weight:700;font-size:.88rem;color:var(--muted);
}
.mode-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme="dark"] .mode-tab.active{color:#06131c}
.mcq-q{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow);
}
.mcq-q .qtext{font-weight:700;font-size:1.02rem;margin-bottom:12px}
.opts{display:grid;gap:8px}
.opt{
  display:flex;align-items:flex-start;gap:10px;text-align:right;width:100%;
  border:1.5px solid var(--border);background:var(--card2);border-radius:11px;
  padding:10px 13px;font-size:.95rem;transition:.13s;color:var(--text);
}
.opt:hover{border-color:var(--accent)}
.opt .ol{
  width:26px;height:26px;flex:none;border-radius:8px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;
}
.opt.correct{border-color:var(--ok);background:var(--ok-soft)}
.opt.correct .ol{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--high);background:var(--high-soft)}
.opt.wrong .ol{background:var(--high);color:#fff}
.opt.dim{opacity:.55}
.expl{
  margin-top:10px;background:var(--card2);border-right:3px solid var(--accent);
  border-radius:10px;padding:10px 13px;font-size:.9rem;
}
.timer-chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--hint);
  color:var(--hint);border-radius:999px;padding:4px 16px;font-weight:800;font-size:1.05rem;
}
.timer-chip.low{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}
.result-hero{
  text-align:center;padding:26px 16px;border-radius:16px;margin-bottom:16px;
  background:var(--accent-soft);border:1px solid var(--accent);
}
.result-hero .score{font-size:2.6rem;font-weight:800;color:var(--accent)}
.progressbar{height:9px;background:var(--bg-soft);border-radius:99px;overflow:hidden;border:1px solid var(--border)}
.progressbar > div{height:100%;background:var(--accent);border-radius:99px;transition:width .3s}

/* ---------- Periodic table ---------- */
.pt-scroll{overflow-x:auto;padding-bottom:10px}
.pt-grid{display:grid;grid-template-columns:repeat(18,54px);gap:3px;direction:ltr;width:max-content;margin:0 auto}
.pt-cell{
  border-radius:7px;padding:2px 2px;text-align:center;cursor:pointer;border:1px solid transparent;
  min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:.12s;position:relative;
}
.pt-cell:hover{transform:scale(1.08);z-index:5;border-color:var(--text)}
.pt-cell .z{font-size:.6rem;opacity:.75;align-self:flex-start;padding-left:3px}
.pt-cell .sym{font-weight:800;font-size:1rem;line-height:1.15}
.pt-cell .nm{font-size:.55rem;opacity:.85;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-cell.cat-alkali{background:#fecaca}[data-theme="dark"] .pt-cell.cat-alkali{background:#7f1d1d}
.pt-cell.cat-alkaline{background:#fed7aa}[data-theme="dark"] .pt-cell.cat-alkaline{background:#7c2d12}
.pt-cell.cat-transition{background:#bfdbfe}[data-theme="dark"] .pt-cell.cat-transition{background:#1e3a8a}
.pt-cell.cat-post{background:#e9d5ff}[data-theme="dark"] .pt-cell.cat-post{background:#4c1d95}
.pt-cell.cat-metalloid{background:#d9f99d}[data-theme="dark"] .pt-cell.cat-metalloid{background:#365314}
.pt-cell.cat-nonmetal{background:#a7f3d0}[data-theme="dark"] .pt-cell.cat-nonmetal{background:#065f46}
.pt-cell.cat-halogen{background:#bae6fd}[data-theme="dark"] .pt-cell.cat-halogen{background:#075985}
.pt-cell.cat-noble{background:#fbcfe8}[data-theme="dark"] .pt-cell.cat-noble{background:#831843}
.pt-cell.cat-lanth{background:#fde68a}[data-theme="dark"] .pt-cell.cat-lanth{background:#713f12}
.pt-cell.cat-actin{background:#fda4af}[data-theme="dark"] .pt-cell.cat-actin{background:#881337}
.pt-cell.gap{visibility:hidden}
.pt-cell.marker{
  background:var(--bg-soft);color:var(--muted);font-size:.6rem;font-weight:700;
  border:1px dashed var(--border);cursor:default;
}
.pt-cell .marker-txt{font-size:.55rem;line-height:1.3}
.pt-legend{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;justify-content:center}
.pt-legend .lg{
  display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted);
  background:var(--card);border:1px solid var(--border);border-radius:8px;padding:3px 9px;
}
.pt-legend .sw{width:13px;height:13px;border-radius:4px}
.el-detail{
  position:sticky;top:70px;background:var(--card);border:1.5px solid var(--accent);border-radius:14px;
  padding:16px 18px;margin-top:14px;box-shadow:var(--shadow);
}
.el-detail .el-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.el-detail .el-sym{font-size:2rem;font-weight:800;color:var(--accent)}
.pt-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}

/* ---------- Trend chart ---------- */
.trend-svg{width:100%;max-width:680px;display:block;margin:0 auto}
.trend-card{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--card)}
.trend-card h4{margin-bottom:6px}
.trend-card .arr{font-size:1.3rem;color:var(--accent);font-weight:800}

/* ---------- Calculators ---------- */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.calc{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:18px;box-shadow:var(--shadow);
}
.calc h3{display:flex;align-items:center;gap:8px}
.calc label{display:block;font-size:.85rem;font-weight:700;margin:10px 0 4px;color:var(--muted)}
.calc input,.calc select{
  width:100%;height:42px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-soft);padding:0 12px;outline:none;
}
.calc input:focus,.calc select:focus{border-color:var(--accent)}
.calc-steps{
  margin-top:12px;background:var(--card2);border:1px dashed var(--accent);border-radius:12px;
  padding:12px 14px;font-size:.92rem;
}
.calc-steps .step{padding:4px 0;border-bottom:1px dashed var(--border)}
.calc-steps .step:last-child{border-bottom:none}
.calc-steps .final{
  font-weight:800;color:var(--accent-text);background:var(--accent-soft);
  border-radius:8px;padding:6px 10px;margin-top:6px;display:inline-block;
}

/* ---------- Study plan ---------- */
.plan-block{
  border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:14px;background:var(--card);
}
.plan-block .pb-head{
  display:flex;align-items:center;gap:10px;padding:12px 16px;font-weight:800;
  background:var(--bg-soft);border-bottom:1px solid var(--border);
}
.plan-item{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--border)}
.plan-item:last-child{border-bottom:none}
.plan-item input[type="checkbox"]{
  width:21px;height:21px;margin-top:5px;accent-color:var(--accent);flex:none;cursor:pointer;
}
.plan-item.checked .pt-task{opacity:.55;text-decoration:line-through}
.plan-item .pt-time{
  flex:none;font-size:.75rem;font-weight:800;color:var(--accent-text);background:var(--accent-soft);
  border-radius:7px;padding:2px 9px;margin-top:3px;white-space:nowrap;
}
.plan-item .pt-task{font-weight:600}
.plan-item .pt-note{font-size:.82rem;color:var(--muted)}

/* ---------- Progress ---------- */
.prog-row{margin-bottom:14px}
.prog-row .pr-top{display:flex;justify-content:space-between;font-size:.9rem;font-weight:700;margin-bottom:5px}
.weak-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--border);border-radius:11px;padding:9px 13px;margin-bottom:8px;background:var(--card2);
}
.weak-item a{font-weight:700}

/* ---------- Cheat sheet ---------- */
.cheat-sec{margin-bottom:18px}
.cheat-sec h3{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mini-def{
  border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin-bottom:7px;background:var(--card2);
  font-size:.9rem;
}
.mini-def b{color:var(--accent-text)}

/* ---------- Toast ---------- */
#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--text);color:var(--bg);border-radius:12px;padding:10px 22px;font-weight:700;
  z-index:99;transition:.25s;font-size:.9rem;max-width:88vw;text-align:center;
}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- Search results ---------- */
.search-res{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  border:1px solid var(--border);border-radius:11px;padding:10px 14px;margin-bottom:8px;
  background:var(--card);cursor:pointer;
}
.search-res:hover{border-color:var(--accent)}
.search-res .where{font-size:.72rem;color:var(--muted);font-weight:700}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:30px;padding:16px;border-top:1px solid var(--border);
  font-size:.78rem;color:var(--muted);text-align:center;
}

/* ---------- Print (Cheat Sheet) ---------- */
@media print{
  .topbar,#sidebar,.site-footer,#toast,.no-print{display:none!important}
  #main{margin:0;padding:0}
  body{background:#fff;color:#000}
  .card,.lbox{box-shadow:none;border:1px solid #bbb;page-break-inside:avoid}
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  #sidebar{transform:translateX(-105%);transition:.25s;box-shadow:0 0 40px rgba(0,0,0,.25)}
  #sidebar.open{transform:translateX(0)}
  #overlay.show{display:block}
  #main{margin-left:0;padding:16px 14px 32px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .search-wrap{max-width:none}
  .brand{display:none}
  .pt-grid{grid-template-columns:repeat(18,54px)}
  .pt-cell{min-height:50px}
}
@media (max-width:520px){
  body{font-size:15px}
  .hero h1{font-size:1.25rem}
  .page-title{font-size:1.25rem}
  .search-wrap{max-width:none}
  #searchInput{padding:0 10px}
}