/* SHOPIFY SEO PAGE — Additional styles
   Only rules not already defined in main.css.
   Loaded exclusively on template-shopify-seo.php.
   Scoped via body class: .is-shopify-seo-page
══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.is-shopify-seo-page #hero {
  background: var(--ink);
  min-height: 90svh;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}

.is-shopify-seo-page .hero-glow {
  position:absolute; top:-80px; right:-60px;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,rgba(240,98,12,.14) 0%,transparent 68%);
  pointer-events:none; z-index:1;
}
.is-shopify-seo-page .hero-glow2 {
  position:absolute; bottom:-60px; left:-80px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(22,43,71,.7) 0%,transparent 70%);
  pointer-events:none; z-index:1;
}

.is-shopify-seo-page .hero-body {
  padding: 80px 0 72px;
  gap: 56px;
  grid-template-columns: 58fr 42fr;
  align-items: center;
}
.admin-bar.is-shopify-seo-page .hero-body { padding-top: 112px; }
@media screen and (max-width: 782px) {
  .admin-bar.is-shopify-seo-page .hero-body { padding-top: 126px; }
}
@media (max-width:960px) {
  .is-shopify-seo-page .hero-body { grid-template-columns:1fr; padding-top:72px; }
  .is-shopify-seo-page .hero-right-col { display:none !important; }
}

.is-shopify-seo-page .hero-right-col {
  position:relative;
  opacity:0; animation:fadeIn .9s .45s var(--ease) forwards;
}

/* Revenue / metrics panel */
.is-shopify-seo-page .revenue-panel {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  overflow: hidden;
}
.is-shopify-seo-page .rp-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
}
.is-shopify-seo-page .rp-dots { display:flex; gap:6px; }
.is-shopify-seo-page .rp-dot  { width:10px; height:10px; border-radius:50%; }
.is-shopify-seo-page .rp-dot.r { background:#ff5f56; }
.is-shopify-seo-page .rp-dot.y { background:#febc2e; }
.is-shopify-seo-page .rp-dot.g { background:#2ac050; }
.is-shopify-seo-page .rp-label { font-size:.78rem; color:rgba(255,255,255,.4); }
.is-shopify-seo-page .rp-body  { padding:20px; }
.is-shopify-seo-page .rp-chart {
  display:flex; align-items:flex-end; gap:10px;
  height:100px; margin-bottom:16px;
}
.is-shopify-seo-page .rp-bar-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.is-shopify-seo-page .rp-bar {
  width:100%; background:rgba(255,255,255,.15); border-radius:4px 4px 0 0;
  height:var(--h,0); transition:height .6s var(--ease);
}
.is-shopify-seo-page .rp-bar.fire { background:var(--fire); }
.is-shopify-seo-page .rp-bar-lbl  { font-size:.65rem; color:rgba(255,255,255,.3); }
.is-shopify-seo-page .rp-metrics  { display:flex; flex-direction:column; gap:10px; }
.is-shopify-seo-page .rp-metric-row { display:flex; align-items:center; justify-content:space-between; }
.is-shopify-seo-page .rp-metric-label { font-size:.72rem; color:rgba(255,255,255,.4); }
.is-shopify-seo-page .rp-metric-val   { font-size:.92rem; font-weight:600; color:#fff; }
.is-shopify-seo-page .rp-badge { font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:20px; }
.is-shopify-seo-page .fire-badge  { background:rgba(240,98,12,.2); color:var(--fire); }
.is-shopify-seo-page .green-badge { background:rgba(42,192,80,.15); color:#2ac050; }

/* Float badge */
.is-shopify-seo-page .float-badge {
  position:absolute; bottom:-18px; left:-18px;
  display:flex; align-items:center; gap:10px;
  background:var(--ink); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:10px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.is-shopify-seo-page .float-icon {
  width:32px; height:32px; border-radius:8px;
  background:rgba(240,98,12,.15); display:flex; align-items:center; justify-content:center;
  color:var(--fire);
}
.is-shopify-seo-page .float-n { font-size:.82rem; font-weight:700; color:#fff; }
.is-shopify-seo-page .float-l { font-size:.7rem; color:rgba(255,255,255,.4); }

/* ═══════════════════════════════════════════════
   PROBLEM GRID
═══════════════════════════════════════════════ */
.is-shopify-seo-page .ec-prob-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px; margin-top:48px;
}
.is-shopify-seo-page .ec-prob-card {
  background:#fff; border:1px solid var(--line2);
  border-radius:var(--r2); padding:28px 24px;
}
.is-shopify-seo-page .ec-prob-card h3 { font-size:1rem; font-weight:700; margin:12px 0 8px; color:var(--ink); }
.is-shopify-seo-page .ec-prob-card p  { font-size:.88rem; color:var(--text2); line-height:1.65; margin:0; }
.is-shopify-seo-page .ec-prob-icon {
  width:40px; height:40px; border-radius:10px;
  background:rgba(240,98,12,.08); display:flex; align-items:center; justify-content:center;
  color:var(--fire);
}

/* ═══════════════════════════════════════════════
   SERVICES GRID
═══════════════════════════════════════════════ */
.is-shopify-seo-page .ec-srv-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px; margin-top:48px;
}
.is-shopify-seo-page .ec-srv-card {
  background:#fff; border:1px solid var(--line2);
  border-radius:var(--r2); padding:24px 20px;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.is-shopify-seo-page .ec-srv-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.07); transform:translateY(-3px); }
.is-shopify-seo-page .ec-srv-card h3 { font-size:.95rem; font-weight:700; margin:12px 0 8px; color:var(--ink); }
.is-shopify-seo-page .ec-srv-card p  { font-size:.85rem; color:var(--text2); line-height:1.65; margin:0; }
.is-shopify-seo-page .ec-srv-icon {
  width:38px; height:38px; border-radius:9px;
  background:rgba(240,98,12,.08); display:flex; align-items:center; justify-content:center;
  color:var(--fire);
}

/* AdSense wrap */
.is-shopify-seo-page .ec-adsense-wrap { padding:0 0 8px; }

/* ═══════════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════════ */
.is-shopify-seo-page .ec-process-grid {
  display:flex; flex-direction:column; gap:0; margin-top:48px;
}
.is-shopify-seo-page .ec-step {
  display:block;
  padding:0 0 32px;
  border-left:2px solid var(--line2); margin-left:32px; padding-left:32px;
  position:relative;
}
.is-shopify-seo-page .ec-step:last-child { border-left:2px solid transparent; }
.is-shopify-seo-page .ec-step-num {
  position:absolute; left:-20px; top:0;
  width:38px; height:38px; border-radius:50%;
  background:var(--fire); color:#fff;
  font-size:.75rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.is-shopify-seo-page .ec-step-card h3 { font-size:1rem; font-weight:700; color:var(--ink); margin:6px 0 8px; }
.is-shopify-seo-page .ec-step-card p  { font-size:.88rem; color:var(--text2); line-height:1.65; margin:0; max-width:560px; }

/* ═══════════════════════════════════════════════
   RESULTS
═══════════════════════════════════════════════ */
.is-shopify-seo-page .ec-results-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px; margin-top:0;
}
.is-shopify-seo-page .ec-result-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r2); padding:32px 24px; text-align:center;
}
.is-shopify-seo-page .ec-result-n     { font-size:2.4rem; font-weight:800; color:var(--fire); line-height:1; margin-bottom:8px; }
.is-shopify-seo-page .ec-result-title { font-size:.88rem; font-weight:700; color:#fff; margin-bottom:8px; }
.is-shopify-seo-page .ec-result-desc  { font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.6; }

/* ═══════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════ */
.is-shopify-seo-page .ec-faq-wrap { max-width:720px; margin:40px auto 0; }
.is-shopify-seo-page .faq-list    { display:flex; flex-direction:column; gap:0; }
.is-shopify-seo-page .fitem       { border-bottom:1px solid var(--line2); }
.is-shopify-seo-page .fq {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 4px; gap:16px;
  font-family:var(--ff-body); font-size:.95rem; font-weight:600; color:var(--ink);
  text-align:left;
}
.is-shopify-seo-page .fq-icon { font-size:1.3rem; color:var(--fire); flex-shrink:0; transition:transform .25s var(--ease); }
.is-shopify-seo-page .fq[aria-expanded="true"] .fq-icon { transform:rotate(45deg); }
.is-shopify-seo-page .fa        { overflow:hidden; }
.is-shopify-seo-page .fa-inner  { padding:0 4px 18px; font-size:.88rem; color:var(--text2); line-height:1.7; }

/* ═══════════════════════════════════════════════
   CTA
═══════════════════════════════════════════════ */
.is-shopify-seo-page #cta {
  background: linear-gradient(135deg, var(--fire) 0%, #c1520a 100%);
  padding: clamp(64px,8vw,96px) 0;
}
.is-shopify-seo-page .cta-inner { text-align:center; max-width:640px; margin:0 auto; padding:0 24px; }
.is-shopify-seo-page .cta-h     { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; color:#fff; margin:16px 0; line-height:1.15; }
.is-shopify-seo-page .cta-h em  { font-style:normal; color:rgba(255,255,255,.85); }
.is-shopify-seo-page .cta-sub   { font-size:1rem; color:rgba(255,255,255,.75); margin:0 0 32px; line-height:1.7; }
.is-shopify-seo-page .cta-btns  { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.is-shopify-seo-page .btn-cta-white {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--fire);
  font-family:var(--ff-body); font-size:.95rem; font-weight:700;
  padding:14px 28px; border-radius:var(--r2); border:none;
  transition:all .25s var(--ease); text-decoration:none;
}
.is-shopify-seo-page .btn-cta-white:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.2); }