/* ─── SolveItHow v2 — Article Page Stylesheet ──────────────────────────── */
/* Premium editorial design. Paired with main.css.                           */

/* ─── AdSense Units ──────────────────────────────────────────────────────── */
.ad-unit {
  margin: 2rem auto;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.ad-unit--article {
  margin: 2.5rem 0;
}

/* ─── Article Layout ─────────────────────────────────────────────────────── */
.article-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3.5rem;
  padding: 2.5rem 0 5rem;
  align-items: start;
}
.article-main {}
.article-aside {
  position: sticky; top: 86px;
}

/* ─── Article Header ──────────────────────────────────────────────────────── */
.article-header { margin-bottom: 2.5rem }

.article-header__top {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.article-header__cat {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--primary); text-decoration: none;
  transition: color var(--trans);
}
.article-header__cat:hover { color: #fff }

.article-header__title {
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 4vw, 2.9rem);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -.04em;
  margin-bottom: 1.1rem; color: var(--text);
}
.article-header__meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1.25rem; font-size: .83rem; color: var(--text3);
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.article-header__meta-item {
  display: flex; align-items: center; gap: .4rem;
}
.article-header__meta-icon { font-size: .9rem }
.article-header__img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 2.25rem;
  background: var(--bg3);
  border: 1px solid var(--border);
}

/* ─── Quick Answer Box ────────────────────────────────────────────────────── */
.quick-answer {
  position: relative;
  background: linear-gradient(135deg, rgba(91,124,246,.08), rgba(124,92,252,.05));
  border: 1px solid rgba(91,124,246,.25);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem 1.5rem 2rem;
  margin-bottom: 2.25rem;
  overflow: hidden;
}
.quick-answer::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: 4px 0 0 4px;
}
.quick-answer__label {
  font-size: .73rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #93b4ff; margin-bottom: .65rem;
  display: flex; align-items: center; gap: .45rem;
}
.quick-answer__label-icon { font-size: .95rem }
.quick-answer__text {
  font-size: 1.05rem; color: var(--text); line-height: 1.75; font-weight: 500;
}

/* ─── Personal Experience Box ─────────────────────────────────────────────── */
.personal-note {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.25rem;
}
.personal-note__header {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1rem;
}
.personal-note__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(91,124,246,.3);
}
.personal-note__info {}
.personal-note__author { font-weight: 700; font-size: .9rem; color: var(--text); line-height: 1.3 }
.personal-note__role { font-size: .775rem; color: var(--text3) }
.personal-note__text {
  font-size: .95rem; color: var(--text2);
  line-height: 1.8; font-style: italic;
  padding-left: .5rem;
  border-left: 3px solid var(--border2);
  padding-left: 1rem;
}

/* ─── Article Body Prose ──────────────────────────────────────────────────── */
.prose {
  color: var(--text2);
  font-size: 1.025rem;
  line-height: 1.85;
}
.prose h2 {
  font-family: var(--font-head);
  font-size: 1.55rem; font-weight: 800;
  color: var(--text); letter-spacing: -.03em;
  margin: 2.75rem 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.prose h3 {
  font-family: var(--font-head);
  font-size: 1.15rem; font-weight: 700;
  color: var(--text); margin: 2rem 0 .75rem;
  letter-spacing: -.02em;
}
.prose p { margin-bottom: 1.3rem }
.prose ul, .prose ol { margin-bottom: 1.3rem }
.prose li { margin-bottom: .5rem }
.prose strong { color: var(--text); font-weight: 700 }
.prose em { color: var(--text); font-style: italic }
.prose a {
  color: #93b4ff;
  border-bottom: 1px solid rgba(147,180,255,.3);
  transition: border-color var(--trans), color var(--trans);
}
.prose a:hover { color: #fff; border-color: #fff }
.prose blockquote {
  border-left: 3px solid var(--primary);
  background: var(--bg2);
  padding: 1.1rem 1.5rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.75rem 0;
  color: var(--text2);
  font-style: italic;
}
.prose code {
  background: var(--bg3);
  padding: .15em .45em; border-radius: var(--radius-xs);
  font-size: .875em; color: #93b4ff;
  font-family: var(--font-mono);
  border: 1px solid var(--border2);
}
.prose pre {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  overflow-x: auto; margin: 1.5rem 0;
}
.prose pre code { background: none; border: none; padding: 0; font-size: .875rem }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0 }

/* ─── Solution Cards ──────────────────────────────────────────────────────── */
.solutions-grid {
  display: flex; flex-direction: column;
  gap: 1.25rem; margin: 1.75rem 0;
}
.solution-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.solution-card.open, .solution-card:focus-within {
  border-color: var(--border2);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.solution-card__header {
  padding: 1.25rem 1.5rem;
  display: flex; align-items: flex-start; gap: 1rem;
  cursor: pointer; user-select: none;
  transition: background var(--trans);
}
.solution-card__header:hover { background: rgba(255,255,255,.02) }
.solution-card__num {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; font-weight: 800; font-size: .875rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: .1rem;
  box-shadow: 0 3px 12px rgba(91,124,246,.35);
}
.solution-card__title-wrap { flex: 1 }
.solution-card__title {
  font-family: var(--font-head);
  font-size: 1.05rem; font-weight: 700;
  color: var(--text); line-height: 1.35; margin-bottom: .35rem;
}
.solution-card__meta {
  font-size: .78rem; color: var(--text3);
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.solution-meta-badge {
  padding: .15rem .5rem; border-radius: 4px;
  background: var(--bg4); font-weight: 600; font-size: .73rem;
}
.solution-card__toggle {
  color: var(--text3); font-size: 1rem;
  transition: transform var(--trans), color var(--trans);
  margin-top: .25rem; flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%; background: var(--bg4);
  display: flex; align-items: center; justify-content: center;
}
.solution-card.open .solution-card__toggle {
  transform: rotate(180deg); color: var(--primary);
  background: var(--primary-glow);
}
.solution-card__body {
  padding: 0 1.5rem 1.5rem;
  padding-left: calc(1.5rem + 36px + 1rem);
  display: none;
}
.solution-card.open .solution-card__body { display: block }
.solution-card__summary {
  font-size: .9rem; color: var(--text2);
  margin-bottom: 1.1rem; line-height: 1.7;
}
.solution-steps { list-style: none; padding: 0; margin: .5rem 0 1rem }
.solution-steps li {
  display: flex; gap: .85rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(37,45,61,.7);
  font-size: .935rem; color: var(--text2); line-height: 1.65;
}
.solution-steps li:last-child { border-bottom: none }
.solution-steps__n {
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(91,124,246,.12);
  border: 1px solid rgba(91,124,246,.25);
  color: #93b4ff; font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: .15rem;
}
.solution-steps__content strong { color: var(--text) }
.solution-tip {
  background: rgba(245,158,11,.06);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: var(--radius-sm);
  padding: .875rem 1.1rem;
  font-size: .875rem; color: var(--text2);
  display: flex; gap: .5rem; align-items: flex-start;
}
.solution-tip-icon { font-style: normal; flex-shrink: 0; margin-top: .05rem }

/* ─── Table of Contents ───────────────────────────────────────────────────── */
.toc {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem;
  margin-bottom: 1.5rem;
}
.toc__title {
  font-size: .73rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .4rem;
}
.toc__list { list-style: none; padding: 0 }
.toc__list li { margin-bottom: .2rem }
.toc__list a {
  font-size: .845rem; color: var(--text3);
  padding: .3rem .5rem; border-radius: var(--radius-xs); display: block;
  transition: color var(--trans), background var(--trans);
  line-height: 1.4;
}
.toc__list a:hover, .toc__list a.active {
  color: #93b4ff; background: var(--primary-glow);
}
.toc__list .toc--l2 { padding-left: 1.1rem; font-size: .815rem }
.toc__progress {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.toc__progress-label {
  font-size: .72rem; color: var(--text3);
  display: flex; justify-content: space-between;
  margin-bottom: .4rem;
}
.toc__progress-bar {
  height: 3px; background: var(--border2); border-radius: 99px; overflow: hidden;
}
.toc__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  width: 0%; transition: width .2s;
}

/* ─── Aside: Share + Related ──────────────────────────────────────────────── */
.aside-share {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.aside-share__title {
  font-size: .73rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 1rem;
}
.share-links { display: flex; gap: .5rem; flex-wrap: wrap }
.share-link {
  flex: 1; min-width: 44px;
  height: 38px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  transition: all var(--trans); text-decoration: none;
}
.share-link:hover { background: var(--primary); border-color: var(--primary); color: #fff }

/* ─── FAQ Section ─────────────────────────────────────────────────────────── */
.faq { margin: 3rem 0 }
.faq__title {
  font-family: var(--font-head);
  font-size: 1.5rem; font-weight: 800;
  color: var(--text); margin-bottom: 1.35rem;
  letter-spacing: -.03em;
  display: flex; align-items: center; gap: .5rem;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: .6rem; overflow: hidden;
  transition: border-color var(--trans);
  background: var(--bg2);
}
.faq-item.open { border-color: var(--border2); background: var(--bg2) }
.faq-q {
  padding: 1.1rem 1.35rem;
  display: flex; align-items: flex-start; justify-content: space-between;
  cursor: pointer; gap: 1rem; user-select: none;
}
.faq-q:hover { background: rgba(255,255,255,.02) }
.faq-q__text { font-weight: 600; font-size: .975rem; color: var(--text); line-height: 1.5 }
.faq-q__icon {
  color: var(--text3); font-size: 1.1rem;
  transition: transform var(--trans), color var(--trans);
  flex-shrink: 0; margin-top: .2rem;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.faq-item.open .faq-q__icon { transform: rotate(45deg); color: var(--primary) }
.faq-a {
  padding: 0 1.35rem 1.1rem;
  font-size: .925rem; color: var(--text2);
  line-height: 1.75; display: none;
}
.faq-item.open .faq-a { display: block }

/* ─── Comment Section ─────────────────────────────────────────────────────── */
.comments-section {
  margin: 3.5rem 0;
  padding: 2.25rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.comments-section__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem;
}
.comments-section__info {}
.comments-section__title {
  font-family: var(--font-head);
  font-size: 1.35rem; font-weight: 800;
  color: var(--text); margin-bottom: .35rem;
}
.comments-section__sub { font-size: .875rem; color: var(--text3) }
#disqus_thread { margin-top: 1.5rem }

/* ─── Related Articles ────────────────────────────────────────────────────── */
.related { margin: 3rem 0 }
.related__title {
  font-family: var(--font-head);
  font-size: 1.35rem; font-weight: 800;
  color: var(--text); margin-bottom: 1.35rem;
  letter-spacing: -.03em;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.related-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  text-decoration: none; color: var(--text);
  transition: border-color var(--trans), transform var(--trans-slow);
  display: flex; gap: .75rem; align-items: flex-start;
}
.related-card:hover { border-color: var(--border2); transform: translateY(-2px) }
.related-card__icon {
  font-size: 1.25rem; flex-shrink: 0; margin-top: .1rem;
}
.related-card__content {}
.related-card__cat { font-size: .73rem; color: var(--primary); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .3rem }
.related-card__title { font-size: .875rem; font-weight: 600; line-height: 1.45; color: var(--text2); transition: color var(--trans) }
.related-card:hover .related-card__title { color: var(--text) }

/* ─── Article Tags ────────────────────────────────────────────────────────── */
.article-tags {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 2rem 0;
}
.article-tag {
  padding: .3rem .8rem; border-radius: 99px;
  font-size: .775rem; font-weight: 500;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text3); text-decoration: none;
  transition: all var(--trans);
}
.article-tag:hover { border-color: var(--primary); color: #93b4ff; background: var(--primary-glow) }

/* ─── Problem Context ─────────────────────────────────────────────────────── */
.problem-context {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.25rem;
}
.problem-context__title {
  font-size: .73rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text3); margin-bottom: .65rem;
}
.problem-context__text {
  font-size: .95rem; color: var(--text2); line-height: 1.75;
}

/* ─── When to Seek Help ───────────────────────────────────────────────────── */
.seek-help {
  background: rgba(244,63,94,.05);
  border: 1px solid rgba(244,63,94,.2);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
}
.seek-help__title {
  font-size: .73rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fb7185; margin-bottom: .65rem;
  display: flex; align-items: center; gap: .4rem;
}
.seek-help__text { font-size: .95rem; color: var(--text2); line-height: 1.75 }

/* ─── Reading Progress Bar ────────────────────────────────────────────────── */
.reading-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; background: transparent; z-index: 999;
}
.reading-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent-cyan));
  width: 0%; transition: width .1s linear;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .article-wrap { grid-template-columns: 1fr; gap: 2rem }
  .article-aside { position: static; order: -1 }
  .article-aside .toc { margin-bottom: 0 }
}
@media (max-width: 768px) {
  /* Hide sidebar on mobile — TOC & share moved to mobile bottom bar/drawer */
  .article-aside { display: none }
  .article-wrap { padding: 1.25rem 0 1.5rem }
}
@media (max-width: 600px) {
  .article-header__title { font-size: 1.65rem; letter-spacing: -.03em; line-height: 1.2 }
  .article-header__meta { gap: .625rem; font-size: .79rem }
  .solution-card__header { padding: 1rem 1rem }
  .solution-card__body { padding: 0 1rem 1.25rem }
  .solution-card__num { width: 30px; height: 30px; font-size: .8rem; border-radius: 8px }
  .solution-steps li { gap: .6rem; padding: .625rem 0; font-size: .9rem }
  .solution-steps__n { width: 22px; height: 22px; font-size: .7rem }
  .quick-answer { padding: 1.1rem 1.1rem 1.1rem 1.4rem }
  .quick-answer__text { font-size: .975rem }
  .personal-note { padding: 1.1rem }
  .personal-note__avatar { width: 40px; height: 40px; font-size: 1.1rem }
  .faq-q { padding: .875rem 1rem }
  .faq-q__text { font-size: .925rem }
  .faq-a { padding: 0 1rem .875rem }
  .comments-section { padding: 1.1rem .875rem }
  .comments-section__header { flex-direction: column; align-items: flex-start }
  .article-header__img { border-radius: var(--radius-sm) }
  .prose { font-size: .975rem }
  .related-grid { grid-template-columns: 1fr }
  .problem-context { padding: 1.1rem 1.25rem }
  .seek-help { padding: 1.1rem 1.25rem }
}

/* ─── RTL overrides ───────────────────────────────────────────────────────── */
[dir="rtl"] .quick-answer { padding-left: 1.75rem; padding-right: 2rem }
[dir="rtl"] .quick-answer::before { left: auto; right: 0; border-radius: 0 4px 4px 0 }
[dir="rtl"] .prose blockquote { border-left: none; border-right: 3px solid var(--primary); border-radius: var(--radius-sm) 0 0 var(--radius-sm) }
[dir="rtl"] .solution-card__body { padding-left: 1.5rem; padding-right: calc(1.5rem + 36px + 1rem) }
[dir="rtl"] .toc__list .toc--l2 { padding-left: 0; padding-right: 1.1rem }
[dir="rtl"] .personal-note__text { border-left: none; border-right: 3px solid var(--border2); padding-left: 0; padding-right: 1rem }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM BAR + TOC DRAWER + SCROLL-TO-TOP
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile bottom bar */
.mobile-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(15,15,24,.97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border2);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bar__btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem;
  padding: .65rem .5rem;
  color: var(--text3); font-size: .68rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  background: none; border: none; font-family: inherit;
  min-height: 52px; min-width: 44px;
  transition: color var(--trans);
}
.mobile-bar__btn:hover, .mobile-bar__btn.active { color: var(--primary) }
.mobile-bar__btn svg {
  width: 20px; height: 20px; display: block;
  flex-shrink: 0;
}

/* Mobile TOC drawer — bottom sheet */
.mobile-toc-drawer__overlay {
  display: none;
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.mobile-toc-drawer__overlay.open { display: block }

.mobile-toc-drawer {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 2px solid var(--border2);
  border-radius: 18px 18px 0 0;
  z-index: 60;
  max-height: 72vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-toc-drawer.open { transform: translateY(0) }

.mobile-toc-drawer__handle {
  display: block;
  width: 38px; height: 4px; border-radius: 99px;
  background: var(--border2); margin: .75rem auto .25rem;
}
.mobile-toc-drawer__title {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3); padding: .5rem 1.25rem .875rem;
  display: flex; align-items: center; gap: .4rem;
}
.mobile-toc-drawer__list { list-style: none; padding: 0 .875rem 1.5rem }
.mobile-toc-drawer__list li { margin-bottom: .15rem }
.mobile-toc-drawer__list a {
  display: flex; align-items: center;
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  font-size: .9rem; color: var(--text2); font-weight: 500;
  text-decoration: none; min-height: 44px; line-height: 1.4;
  transition: background var(--trans), color var(--trans);
}
.mobile-toc-drawer__list a:hover,
.mobile-toc-drawer__list a.active {
  background: var(--primary-glow); color: #93b4ff;
}

/* Scroll-to-top button */
.scroll-top-btn {
  display: none;
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px) + .875rem);
  right: 1rem;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 4px 16px rgba(99,102,241,.45);
  color: #fff; border: none; cursor: pointer;
  align-items: center; justify-content: center;
  z-index: 40; font-family: inherit;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background var(--trans);
}
.scroll-top-btn.visible { opacity: 1; pointer-events: all }
.scroll-top-btn:hover { background: var(--primary-h); transform: translateY(-2px) }
.scroll-top-btn svg { width: 18px; height: 18px; display: block }

[dir="rtl"] .scroll-top-btn { right: auto; left: 1rem }

/* ─── Amazon Product Recommendation ──────────────────────────────────────── */
.product-pick {
  margin-top: 1.25rem;
  background: linear-gradient(135deg, rgba(255,153,0,.06) 0%, rgba(255,153,0,.02) 100%);
  border: 1px solid rgba(255,153,0,.18);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.product-pick:hover {
  border-color: rgba(255,153,0,.35);
  box-shadow: 0 2px 12px rgba(255,153,0,.08);
}
.product-pick__badge {
  display: inline-block;
  padding: .3rem .75rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(255,153,0,.1);
  border-bottom: 1px solid rgba(255,153,0,.12);
}
.product-pick__body {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
}
.product-pick__info {
  flex: 1;
  min-width: 0;
}
.product-pick__name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
  line-height: 1.3;
}
.product-pick__why {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.5;
}
.product-pick__why-label {
  font-weight: 600;
  color: var(--text3);
}
.product-pick__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: #ff9900;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--trans), transform .15s;
  flex-shrink: 0;
}
.product-pick__cta:hover {
  background: #e68a00;
  transform: translateY(-1px);
}
.product-pick__amazon-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.product-pick__arrow {
  font-size: .9rem;
  transition: transform .2s;
}
.product-pick__cta:hover .product-pick__arrow {
  transform: translateX(3px);
}
.product-pick__note {
  padding: .35rem 1.15rem .5rem;
  font-size: .68rem;
  color: var(--text3);
  opacity: .7;
}

/* RTL adjustments */
[dir="rtl"] .product-pick__cta:hover .product-pick__arrow {
  transform: translateX(-3px);
}
[dir="rtl"] .product-pick__arrow {
  transform: scaleX(-1);
}

/* Mobile */
@media (max-width: 600px) {
  .product-pick__body {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .product-pick__cta {
    justify-content: center;
    padding: .65rem;
  }
}

/* Push footer up so mobile bar doesn't cover content */
@media (max-width: 768px) {
  .mobile-bar { display: flex }
  .mobile-toc-drawer { display: block }
  .scroll-top-btn { display: flex }
  main { padding-bottom: 64px }
  .site-footer { margin-bottom: 60px }
}