/* ============================================================
   shopifyrate.com — Soledad Daily News 版式（全站公共样式）
   覆盖 main.css 中的旧版现代 SaaS 样式；请在本文件之后引入。
   ============================================================ */

:root {
  --c-navy: #14243e;
  --c-navy-2: #1b3155;
  --c-sky: #2e7cf6;
  --c-sky-soft: #eaf2fe;
  --c-ink: #1b2430;
  --c-muted: #6b7683;
  --c-line: #e4e7ec;
  --c-bg-soft: #f6f7f9;
  --c-red: #e0323f;
  --font-serif: 'Baloo 2', 'Segoe UI', Arial, sans-serif;
  --font-sans: 'Quicksand', -apple-system, 'Segoe UI', Arial, sans-serif;
  --w-max: 1180px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans) !important;
  color: var(--c-ink) !important;
  background: #fff !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container-site,
.container { max-width: var(--w-max); margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ================= 报头 Top Bar ================= */
.topbar { background: var(--c-navy); color: #cdd6e4; font-size: .78rem; }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 34px; gap: 12px; flex-wrap: wrap;
}
.topbar-date { letter-spacing: .03em; text-transform: capitalize; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-latest { color: #fff; font-weight: 700; letter-spacing: .08em; text-transform: capitalize; }
.topbar-social { display: flex; gap: 2px; }
.topbar-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; color: #cdd6e4; transition: color .2s, background .2s;
}
.topbar-social a:hover { color: #fff; background: var(--c-sky); }
.topbar-search {
  display: inline-flex; align-items: center; gap: 6px; color: #cdd6e4;
  border: 1px solid #33456a; padding: 2px 10px; cursor: pointer; background: none;
  font-family: var(--font-sans); font-size: .78rem; transition: border-color .2s;
}
.topbar-search:hover { border-color: var(--c-sky); color: #fff; }

/* ================= 主报头 Masthead ================= */
.masthead { border-bottom: 3px double var(--c-navy); background: #fff; }
.masthead-inner { padding: 26px 0 22px; text-align: center; }
.masthead-logo {
  font-family: var(--font-serif); font-weight: 800; font-size: 2.6rem;
  letter-spacing: .01em; color: var(--c-navy); line-height: 1;
}
.masthead-logo em { font-style: normal; color: var(--c-sky); }
.masthead-tagline {
  margin-top: 8px; font-size: .8rem; color: var(--c-muted);
  letter-spacing: .16em; text-transform: capitalize;
}

/* ================= 主导航 Nav ================= */
.nav-primary { background: #fff; border-bottom: 1px solid var(--c-line); position: sticky; top: 0; z-index: 50; }
.nav-inner { display: flex; align-items: center; min-height: 46px; overflow: visible; }
.nav-inner::-webkit-scrollbar { display: none; }
.nav-link {
  display: inline-flex; align-items: center; padding: 0 14px; height: 46px;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: capitalize;
  color: var(--c-navy); border-bottom: 3px solid transparent; white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--c-sky); border-bottom-color: var(--c-sky); }
.nav-cat-host { display: inline-flex; }
.nav-cat-host .nav-link { color: var(--c-navy-2); }
/* All reviews 下拉菜单 */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-trigger { cursor: pointer; border: 0; background: none; gap: 6px; }
.nav-dropdown-trigger svg { transition: transform .15s ease; }
.nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 230px; z-index: 60;
  background: #fff; border: 1px solid var(--c-line); border-top: 2px solid var(--c-sky);
  box-shadow: 0 12px 30px rgba(20, 36, 62, .14); padding: 6px 0; display: none;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
  display: block; padding: 9px 18px; font-size: .82rem; font-weight: 600;
  color: var(--c-navy-2); white-space: nowrap;
}
.nav-dropdown-item:hover { color: var(--c-sky); background: var(--c-sky-soft); }
.nav-dropdown-item:first-child {
  font-weight: 700; color: var(--c-navy);
  border-bottom: 1px solid var(--c-line); margin-bottom: 4px;
}
.nav-toggle {
  margin-left: auto; border: 0; background: none; cursor: pointer; padding: 0 10px;
  color: var(--c-navy); display: none;
}
.nav-mobile { display: none; background: #fff; border-bottom: 1px solid var(--c-line); padding: 8px 0; }
.nav-mobile.open { display: block; }
.nav-mobile a { display: block; padding: 9px 20px; font-size: .85rem; font-weight: 600; color: var(--c-navy); }

/* ================= 面包屑 ================= */
.breadcrumb {
  font-size: .78rem; color: var(--c-muted); text-transform: capitalize; letter-spacing: .05em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 18px 0 4px;
}
.breadcrumb a:hover { color: var(--c-sky); }
.breadcrumb .sep { color: #b9c2cd; }

/* ================= 区块头 ================= */
.section-head, .block-head {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 2px solid var(--c-navy); padding-bottom: 8px; margin: 26px 0 16px;
}
.section-kicker {
  font-size: .72rem; color: var(--c-muted); text-transform: capitalize; letter-spacing: .12em;
}
.section-title, .block-head h2 {
  font-family: var(--font-serif); font-weight: 800; font-size: 1.35rem;
  color: var(--c-navy); text-transform: capitalize; letter-spacing: .02em;
}
.section-more, .block-head .more {
  margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--c-sky);
  text-transform: capitalize; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 5px;
}
.section-more:hover, .block-head .more:hover { text-decoration: underline; }
.section { margin: 0; }

/* ================= 卡片（列表网格） ================= */
.grid-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card {
  display: block; background: #fff; border: 1px solid var(--c-line);
  transition: box-shadow .2s, border-color .2s; overflow: hidden;
}
.card:hover { border-color: var(--c-sky); box-shadow: 0 6px 18px rgba(20, 36, 62, .08); }
.card-media { position: relative; overflow: hidden; }
.card-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card-badge {
  position: absolute; top: 10px; left: 10px; background: var(--c-sky); color: #fff;
  font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: capitalize;
  padding: 3px 8px; z-index: 2;
}
.card-body { padding: 14px 15px 15px; }
.card-meta { font-size: .72rem; color: var(--c-muted); text-transform: capitalize; letter-spacing: .05em; margin-bottom: 7px; }
.card-title {
  font-family: var(--font-serif); font-weight: 800; font-size: 1.05rem; line-height: 1.3;
  color: var(--c-ink); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card:hover .card-title { color: var(--c-sky); }
.card-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.rating-value { font-weight: 700; color: var(--c-navy); font-size: .78rem; }
.card-summary { font-size: .82rem; color: var(--c-muted); line-height: 1.5; margin-bottom: 8px; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-link { font-size: .74rem; font-weight: 700; color: var(--c-sky); text-transform: capitalize; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 5px; }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars .star { color: #d8dde3; }
.stars .star.filled { color: #ffb400; }

/* ================= 按钮 / 输入 ================= */
.btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--c-sky); color: #fff;
  border: 1px solid var(--c-sky); padding: 10px 18px; font-family: var(--font-sans);
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background .2s;
}
.btn:hover { background: var(--c-navy-2); border-color: var(--c-navy-2); }
.btn-sm { padding: 7px 13px; font-size: .76rem; }
.btn-dark { background: var(--c-navy); border-color: var(--c-navy); }
.btn-dark:hover { background: var(--c-sky); border-color: var(--c-sky); }
.btn-outline { background: #fff; color: var(--c-navy); border-color: var(--c-line); }
.btn-outline:hover { background: var(--c-sky-soft); border-color: var(--c-sky); color: var(--c-sky); }

.input, .form-input {
  width: 100%; border: 1px solid var(--c-line); padding: 10px 12px; font-size: .85rem;
  font-family: var(--font-sans); background: #fff; outline: none; color: var(--c-ink);
}
.input:focus, .form-input:focus { border-color: var(--c-sky); }
.input.invalid { border-color: var(--c-red); }
.label { display: block; font-size: .76rem; font-weight: 700; color: var(--c-navy); margin-bottom: 6px; text-transform: capitalize; letter-spacing: .05em; }
.field-error { font-size: .75rem; color: var(--c-red); margin-top: 5px; min-height: 0; display: none; }
.field-error.show { display: block; }
.required-note { font-size: .74rem; color: var(--c-muted); margin-top: 12px; }

/* ================= 状态 / 骨架 / Toast ================= */
.state-box { text-align: center; padding: 46px 20px; color: var(--c-muted); }
.state-box .state-icon { margin-bottom: 10px; color: var(--c-sky); }
.state-title, .state-box h3 { color: var(--c-navy); margin-bottom: 8px; font-family: var(--font-serif); }
.state-msg { font-size: .86rem; }
.btn-state { margin-top: 6px; }
.skeleton {
  background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%);
  background-size: 200% 100%; animation: sk 1.2s infinite;
}
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.toast-box { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--c-navy); color: #fff; padding: 12px 16px; font-size: .84rem; box-shadow: 0 6px 18px rgba(20,36,62,.2); }
.toast.success { background: #2e9e5b; }
.toast-icon { display: inline-flex; }

/* ================= 分页 ================= */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 26px 0 6px; flex-wrap: wrap; }
.pagination button, .pg-num, .pg-prev, .pg-next {
  border: 1px solid var(--c-line); background: #fff; color: var(--c-navy);
  padding: 7px 12px; font-size: .8rem; font-family: var(--font-sans); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.pagination button:hover, .pg-num:hover { border-color: var(--c-sky); color: var(--c-sky); }
.pg-num.active { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.pg-ellipsis { color: var(--c-muted); padding: 0 3px; }

/* ================= 分类页 ================= */
.cat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 34px; padding: 10px 0 16px; }
.cat-sidebar { align-self: start; position: sticky; top: 62px; background: var(--c-bg-soft); border-top: 3px solid var(--c-navy); }
.cat-sidebar-title {
  padding: 14px 16px 12px; font-family: var(--font-serif); font-weight: 800;
  font-size: 1.05rem; color: var(--c-navy); text-transform: capitalize; border-bottom: 1px solid var(--c-line);
}
.cat-list { padding: 6px 0; }
.cat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; font-size: .84rem; font-weight: 600; color: var(--c-ink);
  border-bottom: 1px dashed var(--c-line);
}
.cat-item:last-child { border-bottom: 0; }
.cat-item:hover { color: var(--c-sky); }
.cat-item.active { color: var(--c-sky); background: var(--c-sky-soft); }
.cat-count { font-size: .72rem; color: var(--c-muted); background: #fff; border: 1px solid var(--c-line); padding: 1px 7px; }
.list-toolbar { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--c-navy); padding-bottom: 8px; margin-bottom: 18px; }
.list-toolbar h1 { font-family: var(--font-serif); font-weight: 800; font-size: 1.5rem; color: var(--c-navy); text-transform: capitalize; }
.list-count { font-size: .76rem; color: var(--c-muted); }
.search-note { font-size: .8rem; color: var(--c-muted); margin: -10px 0 14px; }
.search-note .search-clear { color: var(--c-sky); font-weight: 600; }
.search-note .search-clear:hover { text-decoration: underline; }

/* ================= 详情页 ================= */
.detail-head { margin: 10px 0 18px; }
.detail-title { font-family: var(--font-serif); font-weight: 800; font-size: 2rem; line-height: 1.18; color: var(--c-navy); margin: 12px 0 10px; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: .82rem; color: var(--c-muted); }
.detail-meta .sep-dot { color: #b9c2cd; }
.detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 30px; padding-bottom: 12px; }
.detail-image { margin-bottom: 20px; }
.detail-image img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.review-content { font-size: .98rem; line-height: 1.8; color: var(--c-ink); }
.review-content h2, .review-content h3, .review-content h4 { font-family: var(--font-serif); font-weight: 800; color: var(--c-navy); margin: 26px 0 12px; line-height: 1.3; }
.review-content h2 { font-size: 1.45rem; border-bottom: 1px solid var(--c-line); padding-bottom: 8px; }
.review-content h3 { font-size: 1.2rem; }
.review-content p { margin-bottom: 14px; }
.review-content ul, .review-content ol { margin: 0 0 16px 22px; }
.review-content li { margin-bottom: 6px; }
.review-content strong { color: var(--c-navy); }
.review-content a { color: var(--c-sky); text-decoration: underline; }
.review-content img { margin: 14px 0; }

.detail-side { align-self: start; position: sticky; top: 62px; display: flex; flex-direction: column; gap: 18px; }
.pc-box { background: var(--c-bg-soft); border-top: 3px solid var(--c-navy); padding: 16px; }
.pc-title { font-family: var(--font-serif); font-weight: 800; font-size: 1rem; color: var(--c-navy); text-transform: capitalize; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pc-box.pros { border-top-color: #2e9e5b; }
.pc-box.pros .pc-title { color: #2e9e5b; }
.pc-box.cons { border-top-color: var(--c-red); }
.pc-box.cons .pc-title { color: var(--c-red); }
.pc-list { list-style: none; margin: 0; padding: 0; }
.pc-list li { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; margin-bottom: 9px; color: var(--c-ink); }
.pc-list li svg { margin-top: 2px; flex-shrink: 0; }
.pc-box.pros .pc-list li svg { color: #2e9e5b; }
.pc-box.cons .pc-list li svg { color: var(--c-red); }

.summary-card { background: var(--c-sky-soft); border: 1px solid #d5e5fd; padding: 18px 16px; text-align: center; }
.sc-label { font-size: .72rem; color: var(--c-muted); text-transform: capitalize; letter-spacing: .12em; margin-bottom: 8px; }
.sc-rating { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.sc-score { font-family: var(--font-serif); font-weight: 800; font-size: 2.6rem; color: var(--c-navy); line-height: 1; }
.sc-outof { color: var(--c-muted); font-size: .9rem; }
.sc-stars { margin: 8px 0 10px; }
.sc-verdict { font-size: .84rem; color: var(--c-navy); font-weight: 600; margin-bottom: 12px; }

/* ================= 联系页 ================= */
.contact-layout { display: grid; grid-template-columns: 1fr 300px; gap: 34px; padding: 10px 0 16px; }
.contact-card { padding: 4px 0; }
.contact-card h2 { font-family: var(--font-serif); font-weight: 800; font-size: 1.6rem; color: var(--c-navy); margin-bottom: 10px; }
.contact-card .lead { color: var(--c-muted); font-size: .92rem; margin-bottom: 22px; }
.sm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-list { display: flex; flex-direction: column; }
.info-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.info-item:last-child { border-bottom: 0; }
.info-icon { color: var(--c-sky); margin-top: 2px; }
.info-item h3 { font-family: var(--font-serif); font-weight: 800; font-size: .95rem; color: var(--c-navy); margin-bottom: 4px; }
.info-item p { font-size: .84rem; color: var(--c-muted); line-height: 1.5; }
.info-item a { color: var(--c-sky); }
.success-panel { text-align: center; padding: 30px 16px; background: var(--c-bg-soft); border-top: 3px solid #2e9e5b; }
.sp-icon { display: inline-flex; color: #2e9e5b; margin-bottom: 12px; }
.success-panel h2 { font-family: var(--font-serif); color: var(--c-navy); margin-bottom: 8px; }
.success-panel p { color: var(--c-muted); font-size: .88rem; margin-bottom: 18px; }

/* ================= 页脚 ================= */
.site-footer { background: var(--c-navy); color: #c3cede; margin-top: 40px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px;
  max-width: var(--w-max); margin: 0 auto; padding: 38px 20px 30px;
}
.footer-grid h4 { color: #fff; font-size: .8rem; text-transform: capitalize; letter-spacing: .1em; margin-bottom: 14px; }
.footer-grid a { display: block; font-size: .84rem; margin-bottom: 9px; color: #c3cede; }
.footer-grid a:hover { color: var(--c-sky); }
.footer-grid p { font-size: .84rem; line-height: 1.6; }
.footer-logo { font-family: var(--font-serif); font-weight: 800; font-size: 1.6rem; color: #fff; margin-bottom: 10px; }
.footer-logo em { font-style: normal; color: var(--c-sky); }
.footer-bottom { border-top: 1px solid #2c4066; }
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  max-width: var(--w-max); margin: 0 auto; padding: 14px 20px; font-size: .76rem; color: #8b99b2;
}

/* ================= 响应式 ================= */
@media (max-width: 960px) {
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-layout, .detail-grid, .contact-layout { grid-template-columns: 1fr; }
  .cat-sidebar, .detail-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .masthead-logo { font-size: 2rem; }
  .detail-title { font-size: 1.6rem; }
}
@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; }
  .grid-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .sm-grid2 { grid-template-columns: 1fr; }
  .detail-title { font-size: 1.4rem; }
}

/* ================= 搜索栏（顶栏 Search 展开） ================= */
.search-bar { display: none; background: var(--c-navy); border-top: 1px solid #2c4066; }
.search-bar.open { display: block; }
.search-bar-inner { padding: 12px 0; }
.search-form { display: flex; align-items: center; gap: 10px; }
.search-input {
  flex: 1; min-width: 0; border: 1px solid #33456a; background: #fff; color: var(--c-ink);
  padding: 9px 14px; font-size: .9rem; font-family: var(--font-sans); outline: none;
}
.search-input:focus { border-color: var(--c-sky); }
.search-submit { flex-shrink: 0; }
.search-close {
  flex-shrink: 0; width: 38px; height: 38px; border: 1px solid #33456a; background: none;
  color: #cdd6e4; font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.search-close:hover { border-color: var(--c-sky); color: #fff; }

/* ================= Sentence case ================= */
/* 菜单/标题仅第一个单词首字母大写（文本源已转换），禁用 capitalize */
.topbar-date, .topbar-latest, .masthead-tagline, .nav-link, .breadcrumb,
.section-kicker, .section-title, .block-head h2, .section-more, .block-head .more,
.card-badge, .card-meta, .card-link, .label, .cat-sidebar-title, .list-toolbar h1,
.pc-title, .sc-label, .footer-grid h4 { text-transform: none; }

/* 移动端导航：隐藏横向滚动链接，保留汉堡按钮 + 分类菜单 */
@media (max-width: 640px) {
  .nav-inner .nav-link, .nav-inner .nav-cat-host, .nav-inner .nav-dropdown { display: none; }
  .nav-mobile-cats { border-top: 1px solid var(--c-line); margin-top: 6px; }
  .search-submit { font-size: .74rem; padding: 9px 12px; }
}