/*! MobileRanks — Phone Frontend v3.0 (Ultimate Premium)
* Scoped to .pv2-page. Uses locally-declared design tokens so it never
* fights the surrounding theme. WCAG AA contrast, zero CLS targets,
* desktop-first with a strong mobile experience.
*/
/* =========================================================
* 0. DESIGN TOKENS (scoped)
* ========================================================= */
.pv2-page {
/* Palette (v3.0) */
--pv-primary: #0F172A; /* dark navy */
--pv-secondary: #1E3A8A; /* royal blue */
--pv-accent: #2563EB; /* bright blue */
--pv-accent-600: #1D4ED8;
--pv-accent-050: #EFF6FF;
--pv-bg: #F8FAFC;
--pv-card: #FFFFFF;
--pv-border: #E5E7EB;
--pv-border-2: #EEF2F6;
--pv-text: #111827;
--pv-text-2: #6B7280;
--pv-text-3: #9CA3AF;
--pv-success: #16A34A;
--pv-warning: #F59E0B;
--pv-danger: #DC2626;
/* Shape + shadow */
--pv-radius: 18px;
--pv-radius-sm: 12px;
--pv-radius-xs: 8px;
--pv-shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--pv-shadow-2: 0 6px 20px -8px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.05);
--pv-shadow-3: 0 24px 60px -24px rgba(15,23,42,.25);
/* Typography */
--pv-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: var(--pv-bg);
color: var(--pv-text);
font-family: var(--pv-font);
font-feature-settings: "cv02","cv03","cv04","cv11";
-webkit-font-smoothing: antialiased;
padding-bottom: 96px; /* mobile bar clearance */
}
/* Wrap and layout */
.pv2-wrap { max-width: 1240px; margin: 0 auto; padding: 20px clamp(12px, 3vw, 28px); }
.pv2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.pv2-main { min-width: 0; display: grid; gap: 20px; }
.pv2-aside { min-width: 0; position: sticky; top: 96px; display: grid; gap: 20px; }
@media (max-width: 980px) { .pv2-grid { grid-template-columns: 1fr; } .pv2-aside { position: static; } }
/* Breadcrumb */
.pv2-crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--pv-text-2); margin-bottom: 14px; }
.pv2-crumb a { color: var(--pv-text-2); text-decoration: none; }
.pv2-crumb a:hover { color: var(--pv-accent); }
.pv2-crumb .sep { color: var(--pv-text-3); }
/* =========================================================
* 1. CARD PRIMITIVE + TYPOGRAPHY
* ========================================================= */
.pv2-card {
background: var(--pv-card);
border: 1px solid var(--pv-border);
border-radius: var(--pv-radius);
box-shadow: var(--pv-shadow-1);
padding: clamp(18px, 2.4vw, 28px);
}
.pv2-h2 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--pv-primary); font-weight: 700; }
.pv2-h3 { font-size: 16px; margin: 0 0 10px; color: var(--pv-primary); font-weight: 700; letter-spacing: -0.005em; }
.pv2-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pv-accent); margin: 0 0 12px; }
.pv2-prose { color: var(--pv-text); line-height: 1.7; font-size: 15.5px; }
.pv2-prose p { margin: 0 0 14px; }
.pv2-prose a { color: var(--pv-accent); text-decoration: none; border-bottom: 1px solid rgba(37,99,235,.25); }
.pv2-prose a:hover { border-bottom-color: var(--pv-accent); }
/* =========================================================
* 2. HERO
* ========================================================= */
.pv2-hero {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 32px;
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
border: 1px solid var(--pv-border);
border-radius: var(--pv-radius);
padding: clamp(20px, 3vw, 36px);
box-shadow: var(--pv-shadow-2);
}
@media (max-width: 900px) { .pv2-hero { grid-template-columns: 1fr; gap: 20px; } }
.pv2-hero-media { position: relative; }
.pv2-hero-main {
position: relative;
aspect-ratio: 4/5;
background: radial-gradient(80% 60% at 50% 40%, #FFFFFF 0%, #EEF2F6 100%);
border-radius: var(--pv-radius);
overflow: hidden;
display: grid; place-items: center;
}
.pv2-hero-main img { max-width: 88%; max-height: 88%; object-fit: contain; }
.pv2-hero-noimg { min-height: 320px; }
.pv2-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 40px; height: 40px; border-radius: 999px;
background: var(--pv-card); border: 1px solid var(--pv-border); color: var(--pv-primary);
font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--pv-shadow-2);
display: grid; place-items: center;
}
.pv2-nav-prev { left: 8px; } .pv2-nav-next { right: 8px; }
.pv2-nav:hover { color: var(--pv-accent); border-color: var(--pv-accent); }
/* v10.4.5 — Hero thumbnail carousel (4/3/2 visible responsive) */
.pv2-thumbs-wrap { position: relative; margin-top: 12px; display: flex; align-items: center; gap: 6px; }
.pv2-thumbs-nav {
flex: 0 0 auto; width: 28px; height: 68px; border-radius: 8px;
background: var(--pv-card); border: 1px solid var(--pv-border); color: var(--pv-primary);
font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center;
transition: color .15s, border-color .15s, background .15s, opacity .15s;
}
.pv2-thumbs-nav:hover:not(:disabled) { color: var(--pv-accent); border-color: var(--pv-accent); background: #fff; }
.pv2-thumbs-nav:disabled { opacity: .35; cursor: default; }
/* v10.4.7 — TRUE horizontal filmstrip (flex, no grid, no wrap) */
.pv2-thumbs {
--pv-thumbs-visible: 4; --pv-thumbs-gap: 8px;
flex: 1 1 auto; min-width: 0;
display: flex; flex-wrap: nowrap; align-items: stretch;
gap: var(--pv-thumbs-gap);
overflow-x: auto; overflow-y: hidden;
scroll-behavior: smooth; scroll-snap-type: x mandatory;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.pv2-thumbs::-webkit-scrollbar { display: none; }
.pv2-thumb {
scroll-snap-align: start;
flex: 0 0 calc((100% - (var(--pv-thumbs-visible) - 1) * var(--pv-thumbs-gap)) / var(--pv-thumbs-visible));
height: 68px; padding: 4px; cursor: pointer;
background: var(--pv-card); border: 1.5px solid var(--pv-border); border-radius: var(--pv-radius-sm);
display: flex; align-items: center; justify-content: center;
box-sizing: border-box;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pv2-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pv2-thumb:hover { border-color: var(--pv-accent); }
.pv2-thumb.is-active {
border-color: #2271b1;
box-shadow: 0 4px 12px rgba(34,113,177,.22), 0 0 0 2px rgba(34,113,177,.15);
}
@media (max-width: 900px) { .pv2-thumbs { --pv-thumbs-visible: 3; } }
@media (max-width: 560px) { .pv2-thumbs { --pv-thumbs-visible: 2; } }
/* Hero info */
.pv2-hero-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pv2-hero-eyebrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pv2-brand { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pv-accent); }
.pv2-chip {
font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--pv-secondary); background: var(--pv-accent-050);
padding: 4px 10px; border-radius: 999px;
}
.pv2-title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.02em; color: var(--pv-primary); margin: 0; font-weight: 800; }
.pv2-tagline { color: var(--pv-text-2); font-size: 15px; margin: 0; }
.pv2-meta { color: var(--pv-text-3); font-size: 13px; }
.pv2-metrics { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin: 4px 0 2px; }
.pv2-score {
display: inline-flex; align-items: baseline; gap: 4px;
background: var(--pv-primary); color: #fff;
border-radius: var(--pv-radius-sm); padding: 10px 14px;
box-shadow: var(--pv-shadow-1);
}
.pv2-star { color: #FBBF24; font-size: 16px; margin-right: 4px; }
.pv2-score-n { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pv2-score-d { font-size: 12px; opacity: .7; }
.pv2-metric-mini { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 14px; border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); background: var(--pv-card); }
.pv2-metric-mini strong { font-size: 18px; font-weight: 700; color: var(--pv-primary); }
.pv2-metric-mini span { color: var(--pv-text-2); font-size: 13px; }
.pv2-fromprice {
display: inline-flex; flex-direction: column; padding: 8px 14px;
border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); background: var(--pv-card);
}
.pv2-fromprice span { color: var(--pv-text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.pv2-fromprice strong { font-size: 20px; color: var(--pv-primary); font-weight: 800; letter-spacing: -.01em; }
.pv2-verdict { color: var(--pv-text); font-size: 15px; line-height: 1.6; margin: 0; }
.pv2-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pv2-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 18px; min-height: 44px;
border-radius: var(--pv-radius-sm); font-weight: 600; font-size: 14.5px;
text-decoration: none; cursor: pointer; border: 1px solid transparent;
transition: transform .1s ease, background .15s, color .15s, border-color .15s;
}
.pv2-btn:active { transform: translateY(1px); }
.pv2-btn-primary { background: var(--pv-accent); color: #fff; }
.pv2-btn-primary:hover { background: var(--pv-accent-600); }
.pv2-btn-primary em { font-style: normal; opacity: .85; font-weight: 500; margin-left: 4px; }
.pv2-btn-ghost { background: transparent; color: var(--pv-primary); border-color: var(--pv-border); }
.pv2-btn-ghost:hover { border-color: var(--pv-accent); color: var(--pv-accent); }
.pv2-btn-icon { background: transparent; color: var(--pv-text-2); border-color: var(--pv-border); padding: 12px 14px; }
.pv2-btn-icon:hover { color: var(--pv-accent); border-color: var(--pv-accent); }
.pv2-btn-mini { padding: 8px 14px; min-height: 36px; font-size: 13px; }
.pv2-cta-alt { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 6px; color: var(--pv-text-2); font-size: 13px; }
.pv2-cta-alt a { color: var(--pv-accent); text-decoration: none; font-weight: 600; }
.pv2-cta-alt a:hover { color: var(--pv-accent-600); }
/* =========================================================
* 3. QUICK SPECS
* ========================================================= */
.pv2-qs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}
.pv2-qs-cell {
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
border: 1px solid var(--pv-border);
border-radius: var(--pv-radius-sm);
padding: 14px 16px;
transition: border-color .15s, transform .15s;
}
.pv2-qs-cell:hover { border-color: var(--pv-accent); transform: translateY(-1px); }
.pv2-qs-cell::before {
content: ""; display: block; width: 28px; height: 28px; border-radius: 8px;
background: var(--pv-accent-050); margin-bottom: 8px;
-webkit-mask: var(--pv-icon, none) center/60% no-repeat; mask: var(--pv-icon, none) center/60% no-repeat;
background-color: var(--pv-accent);
}
.pv2-qs-cell[data-icon="display"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="chipset"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="ram"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="storage"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="camera"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="front"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="battery"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="charging"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="os"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="weight"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-cell[data-icon="shield"] { --pv-icon: url("data:image/svg+xml;utf8,"); }
.pv2-qs-lab { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-text-2); }
.pv2-qs-val { font-size: 15px; color: var(--pv-primary); font-weight: 700; margin-top: 2px; letter-spacing: -.005em; }
/* =========================================================
* 4. HIGHLIGHTS (reuses icon set via same tokens)
* ========================================================= */
.pv2-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pv2-hl-cell {
border: 1px solid var(--pv-border-2); border-radius: var(--pv-radius-sm);
padding: 16px; background: #fff;
}
.pv2-hl-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-accent); }
.pv2-hl-body { font-size: 15px; color: var(--pv-primary); margin-top: 4px; line-height: 1.4; font-weight: 500; }
/* =========================================================
* 5. RATINGS BREAKDOWN
* ========================================================= */
.pv2-ratings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; }
.pv2-rating { display: grid; gap: 6px; }
.pv2-rating-top { display: flex; justify-content: space-between; align-items: baseline; }
.pv2-rating-lab { font-size: 13.5px; color: var(--pv-text); font-weight: 600; }
.pv2-rating-num { font-size: 13px; color: var(--pv-text-2); font-variant-numeric: tabular-nums; }
.pv2-rating-num strong { color: var(--pv-primary); font-size: 15px; font-weight: 700; }
.pv2-bar { position: relative; height: 8px; background: var(--pv-border-2); border-radius: 999px; overflow: hidden; }
.pv2-bar > i { position: absolute; inset: 0; width: var(--pv-w, 0%); background: linear-gradient(90deg, var(--pv-secondary), var(--pv-accent)); border-radius: 999px; }
.pv2-rating.is-hi .pv2-bar > i { background: linear-gradient(90deg, #059669, var(--pv-success)); }
.pv2-rating.is-mid .pv2-bar > i { background: linear-gradient(90deg, #D97706, var(--pv-warning)); }
.pv2-rating.is-low .pv2-bar > i { background: linear-gradient(90deg, #B91C1C, var(--pv-danger)); }
.pv2-ratings-overall {
margin-top: 18px; padding: 14px 18px; border-radius: var(--pv-radius-sm);
background: var(--pv-primary); color: #fff; display: flex; justify-content: space-between; align-items: center;
}
.pv2-ratings-overall strong { font-size: 24px; letter-spacing: -.01em; }
/* =========================================================
* 6. STICKY TABS
* ========================================================= */
.pv2-tabs {
position: sticky; top: 0; z-index: 30;
background: var(--pv-card); border: 1px solid var(--pv-border);
border-radius: var(--pv-radius-sm); box-shadow: var(--pv-shadow-1);
}
.pv2-tabs.is-stuck { border-radius: 0; border-left: 0; border-right: 0; box-shadow: var(--pv-shadow-2); }
.pv2-tabs-inner { display: flex; gap: 4px; overflow-x: auto; padding: 6px; scrollbar-width: none; }
.pv2-tabs-inner::-webkit-scrollbar { display: none; }
.pv2-tab {
flex: 0 0 auto; padding: 10px 14px; min-height: 40px;
background: transparent; border: 0; border-radius: var(--pv-radius-xs);
font-size: 13.5px; font-weight: 600; color: var(--pv-text-2); cursor: pointer;
transition: background .15s, color .15s;
}
.pv2-tab:hover { color: var(--pv-primary); background: var(--pv-accent-050); }
.pv2-tab.is-active { color: #fff; background: var(--pv-primary); }
/* =========================================================
* 7. EDITORIAL
* ========================================================= */
.pv2-editorial { display: grid; gap: 18px; }
.pv2-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .pv2-proscons { grid-template-columns: 1fr; } }
.pv2-pc { border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); padding: 16px 18px; background: #fff; }
.pv2-pc h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 10px; }
.pv2-pros h3 { color: var(--pv-success); }
.pv2-cons h3 { color: var(--pv-danger); }
.pv2-pc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pv2-pc li { padding-left: 22px; position: relative; color: var(--pv-text); font-size: 14.5px; line-height: 1.5; }
.pv2-pros li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--pv-success); font-weight: 700; }
.pv2-cons li::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--pv-danger); font-weight: 700; }
.pv2-details { border-top: 1px solid var(--pv-border-2); padding-top: 12px; }
.pv2-details > summary { cursor: pointer; font-weight: 700; color: var(--pv-primary); font-size: 14.5px; padding: 6px 0; list-style: none; }
.pv2-details > summary::-webkit-details-marker { display: none; }
.pv2-details > summary::after { content: "▾"; float: right; color: var(--pv-text-2); }
.pv2-details[open] > summary::after { content: "▴"; }
.pv2-audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pv2-aud { border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); padding: 14px 16px; background: #fff; }
.pv2-aud h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--pv-accent); margin: 0 0 6px; }
.pv2-aud p { margin: 0; color: var(--pv-text); font-size: 14.5px; line-height: 1.55; }
.pv2-tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-taglet { background: var(--pv-accent-050); color: var(--pv-secondary); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
/* Verdict */
.pv2-verdictcard { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); }
.pv2-verdict-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pv2-verdict-score { display: inline-flex; align-items: baseline; gap: 4px; color: var(--pv-primary); }
.pv2-verdict-score strong { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.pv2-verdict-score span { color: var(--pv-text-2); font-size: 14px; }
/* =========================================================
* 8. SPECS
* ========================================================= */
.pv2-specs-toolbar { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.pv2-specs-search {
min-width: 220px; padding: 10px 14px; height: 40px; font-size: 14px;
border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); background: #fff; color: var(--pv-text);
}
.pv2-specs-search:focus { outline: none; border-color: var(--pv-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.pv2-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
@media (max-width: 820px) { .pv2-specs-grid { grid-template-columns: 1fr; } }
.pv2-spec-sec { min-width: 0; }
.pv2-spec-sec h3 {
font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--pv-accent);
border-bottom: 1px solid var(--pv-border); padding: 0 0 8px; margin: 0 0 10px;
}
.pv2-rows { display: grid; gap: 0; }
.pv2-row {
display: grid; grid-template-columns: 42% 1fr;
gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--pv-border-2);
align-items: baseline; position: relative;
}
.pv2-row:last-child { border-bottom: 0; }
.pv2-row-k { color: var(--pv-text-2); font-size: 13.5px; }
.pv2-row-v { color: var(--pv-text); font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.pv2-row .pv2-copy {
position: absolute; right: 0; top: 8px; opacity: 0;
background: transparent; border: 0; padding: 4px 6px; cursor: pointer;
color: var(--pv-text-3); font-size: 11px; border-radius: 6px;
transition: opacity .12s, color .12s, background .12s;
}
.pv2-row:hover .pv2-copy { opacity: 1; }
.pv2-copy:hover { color: var(--pv-accent); background: var(--pv-accent-050); }
.pv2-copy.is-copied { color: var(--pv-success); opacity: 1; }
.pv2-row.pv2-hidden { display: none; }
.pv2-spec-sec.pv2-hidden { display: none; }
.pv2-row mark { background: #FEF9C3; padding: 0 2px; border-radius: 3px; }
.pv2-row.is-recent .pv2-row-v::after {
content: "Updated"; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
background: var(--pv-accent-050); color: var(--pv-secondary); vertical-align: middle;
}
.pv2-inline-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-inline-list li { background: var(--pv-bg); border: 1px solid var(--pv-border-2); border-radius: 6px; padding: 3px 8px; font-size: 13px; color: var(--pv-text); }
/* =========================================================
* 9. PRICES
* ========================================================= */
.pv2-official { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.pv2-official > div { border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); padding: 10px 16px; background: #fff; display: flex; flex-direction: column; }
.pv2-official span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--pv-text-2); }
.pv2-official strong { font-size: 20px; color: var(--pv-primary); font-weight: 800; letter-spacing: -.01em; }
.pv2-store-tbl { display: grid; gap: 0; border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); overflow: hidden; }
.pv2-store-th, .pv2-store-tr {
display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; align-items: center;
padding: 12px 16px;
}
.pv2-store-th { background: var(--pv-bg); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--pv-text-2); font-weight: 700; }
.pv2-store-tr { border-top: 1px solid var(--pv-border-2); background: #fff; }
.pv2-store-tr:hover { background: var(--pv-accent-050); }
.pv2-store-name { font-weight: 600; color: var(--pv-primary); }
.pv2-store-price { font-weight: 700; color: var(--pv-primary); font-variant-numeric: tabular-nums; }
.pv2-store-cta { text-align: right; }
.pv2-price-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--pv-text-2); }
.pv2-price-meta strong { color: var(--pv-primary); font-weight: 700; }
.pv2-price-history { margin-top: 20px; }
.pv2-price-history .pv2-store-th, .pv2-price-history .pv2-store-tr { grid-template-columns: 1.2fr 1fr 1fr 60px; }
.pv2-trend { text-align: right; font-weight: 700; font-size: 15px; }
.pv2-trend-up { color: var(--pv-danger); }
.pv2-trend-down { color: var(--pv-success); }
.pv2-trend-flat { color: var(--pv-text-3); }
/* =========================================================
* 10. MEDIA
* ========================================================= */
.pv2-video { position: relative; aspect-ratio: 16/9; border-radius: var(--pv-radius-sm); overflow: hidden; background: #000; margin-bottom: 14px; }
.pv2-video-lite { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.pv2-video-lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv2-video-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 68px; height: 68px; border-radius: 999px; background: rgba(15,23,42,.85); color: #fff;
display: grid; place-items: center; font-size: 22px; padding-left: 4px;
box-shadow: var(--pv-shadow-3);
}
.pv2-gallery-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pv2-gs-item { display: block; aspect-ratio: 1; background: var(--pv-bg); border: 1px solid var(--pv-border-2); border-radius: var(--pv-radius-sm); overflow: hidden; }
.pv2-gs-item img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.pv2-gs-item:hover { border-color: var(--pv-accent); }
/* =========================================================
* 11. COMPARE CTA + SIMILAR RAILS
* ========================================================= */
.pv2-comparecta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
@media (max-width: 700px) { .pv2-comparecta { grid-template-columns: 1fr; } }
.pv2-comparecta p { color: var(--pv-text-2); margin: 4px 0 0; }
.pv2-comp-list { grid-column: 1 / -1; margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pv2-comp-list a { display: inline-block; padding: 6px 12px; background: var(--pv-accent-050); color: var(--pv-secondary); border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; }
.pv2-comp-list a:hover { background: var(--pv-accent); color: #fff; }
.pv2-similar { display: grid; gap: 22px; }
.pv2-rail-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.pv2-rail-card { scroll-snap-align: start; background: #fff; border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); text-decoration: none; color: inherit; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, border-color .15s; }
.pv2-rail-card:hover { transform: translateY(-2px); box-shadow: var(--pv-shadow-2); border-color: var(--pv-accent); }
.pv2-rail-img { aspect-ratio: 4/5; display: grid; place-items: center; background: var(--pv-bg); }
.pv2-rail-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.pv2-rail-body { padding: 10px 12px; display: grid; gap: 4px; }
.pv2-rail-name { font-weight: 700; font-size: 13.5px; color: var(--pv-primary); line-height: 1.3; }
.pv2-rail-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; }
.pv2-rail-score { color: var(--pv-primary); font-weight: 700; }
.pv2-rail-price { color: var(--pv-accent); font-weight: 700; }
/* =========================================================
* 12. FAQ
* ========================================================= */
.pv2-faq-list { display: grid; gap: 6px; }
.pv2-faq-list details { border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm); background: #fff; padding: 0; }
.pv2-faq-list summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--pv-primary); font-size: 15px; position: relative; padding-right: 40px; }
.pv2-faq-list summary::-webkit-details-marker { display: none; }
.pv2-faq-list summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--pv-text-2); font-weight: 400; line-height: 1; }
.pv2-faq-list details[open] summary::after { content: "–"; }
.pv2-faq-list details > div { padding: 0 16px 14px; color: var(--pv-text); font-size: 14.5px; line-height: 1.6; }
/* =========================================================
* 13. AI SUMMARY CARD
* ========================================================= */
.pv2-ai {
background: linear-gradient(135deg, var(--pv-primary) 0%, var(--pv-secondary) 100%);
color: #fff; border: 0;
}
.pv2-ai .pv2-h2 { color: #fff; }
.pv2-ai-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,255,255,.85); background: rgba(255,255,255,.1);
padding: 5px 10px; border-radius: 999px; margin-bottom: 10px;
}
.pv2-ai-eyebrow::before { content: "✦"; color: #FBBF24; }
.pv2-ai-summary { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.94); margin-bottom: 18px; }
.pv2-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pv2-ai-cell { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--pv-radius-sm); padding: 14px 16px; }
.pv2-ai-cell h3 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FBBF24; margin: 0 0 8px; }
.pv2-ai-cell ul { margin: 0; padding: 0 0 0 18px; color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.55; }
.pv2-ai-cell p { margin: 0; color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.55; }
/* =========================================================
* 14. REFERENCES + MOBILE BAR + COMPARE BAR
* ========================================================= */
.pv2-refs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pv2-refs li { font-size: 14px; color: var(--pv-text-2); }
.pv2-refs a { color: var(--pv-accent); text-decoration: none; font-weight: 600; }
.pv2-refs a:hover { color: var(--pv-accent-600); }
.pv2-mbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.97); border-top: 1px solid var(--pv-border);
backdrop-filter: saturate(150%) blur(8px);
}
.pv2-mbar-btn {
flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--pv-radius-sm); font-weight: 600; font-size: 14px;
color: var(--pv-primary); background: var(--pv-card); border: 1px solid var(--pv-border);
text-decoration: none; cursor: pointer;
}
.pv2-mbar-primary { background: var(--pv-accent); color: #fff; border-color: var(--pv-accent); }
@media (max-width: 760px) { .pv2-mbar { display: flex; } }
/* Sticky compare bar (up to 4) */
.pv2-cmpbar {
position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
z-index: 39; display: none; gap: 8px; align-items: center;
background: var(--pv-primary); color: #fff;
padding: 10px 12px; border-radius: 999px; box-shadow: var(--pv-shadow-3);
}
.pv2-cmpbar.is-visible { display: inline-flex; }
.pv2-cmpbar-slots { display: inline-flex; gap: 6px; }
.pv2-cmpbar-slot { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.1); display: grid; place-items: center; font-size: 11px; color: rgba(255,255,255,.7); overflow: hidden; }
.pv2-cmpbar-slot img { width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; border-radius: 6px; }
.pv2-cmpbar-btn { background: var(--pv-accent); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; min-height: 36px; }
.pv2-cmpbar-clear { background: transparent; color: rgba(255,255,255,.7); border: 0; padding: 6px 10px; cursor: pointer; font-size: 12px; }
@media (max-width: 760px) { .pv2-cmpbar { bottom: 76px; } }
/* Accessibility helpers */
.pv2-page :focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .pv2-page * { animation: none !important; transition: none !important; } }
/* =========================================================
* v3.1 — Buyer Decision, spec badges, price status, region
* ========================================================= */
/* Buyer Decision card */
.pv2-decision { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); }
.pv2-decision-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.pv2-decision-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.pv2-dec {
border: 1px solid var(--pv-border);
border-radius: var(--pv-radius-sm);
padding: 14px 16px;
background: var(--pv-card);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pv2-dec:hover { transform: translateY(-2px); box-shadow: var(--pv-shadow-2); border-color: #D6DEE8; }
.pv2-dec h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--pv-text-2); display: flex; gap: 6px; align-items: center; }
.pv2-dec p, .pv2-dec ul { margin: 0; font-size: 14px; color: var(--pv-text); }
.pv2-dec ul { padding-left: 18px; }
.pv2-dec ul li + li { margin-top: 4px; }
.pv2-dec-buy h3 { color: var(--pv-success); }
.pv2-dec-avoid h3 { color: var(--pv-danger); }
.pv2-decision-rec {
margin-top: 14px;
padding: 12px 14px;
background: var(--pv-accent-050);
border: 1px solid #DBE7FF;
border-radius: var(--pv-radius-sm);
}
.pv2-decision-rec p { margin: 4px 0 0; color: var(--pv-primary); font-size: 14px; }
/* Spec highlight badge */
.pv2-hlbadge {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--pv-accent) 0%, var(--pv-secondary) 100%);
border-radius: 999px;
letter-spacing: .02em;
vertical-align: middle;
}
.pv2-row-hl .pv2-row-v { font-weight: 600; }
/* Price status badge */
.pv2-prices-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pv2-pricebadge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; font-size: 13px; font-weight: 600;
border-radius: 999px; border: 1px solid transparent;
transition: transform .18s ease;
}
.pv2-pricebadge:hover { transform: translateY(-1px); }
.pv2-pricebadge-down { color: #065F46; background: #ECFDF5; border-color: #A7F3D0; }
.pv2-pricebadge-up { color: #991B1B; background: #FEF2F2; border-color: #FECACA; }
.pv2-pricebadge-flat { color: #374151; background: #F3F4F6; border-color: #E5E7EB; }
/* Region gating (driven by html[data-mr-currency]) */
html[data-mr-currency="USD"] [data-pv2-region="IN"] { display: none !important; }
html[data-mr-currency="INR"] [data-pv2-region="US"] { display: none !important; }
.pv2-region-empty { color: var(--pv-text-2); font-style: italic; }
.pv2-region-empty em { font-style: normal; color: var(--pv-text-2); }
/* Micro-interactions */
.pv2-card { transition: box-shadow .22s ease, transform .22s ease; }
.pv2-card:hover { box-shadow: var(--pv-shadow-2); }
.pv2-btn { transition: transform .15s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.pv2-btn:hover { transform: translateY(-1px); }
.pv2-btn:active { transform: translateY(0); }
.pv2-rail-card { transition: transform .22s ease, box-shadow .22s ease; }
.pv2-rail-card:hover { transform: translateY(-3px); box-shadow: var(--pv-shadow-2); }
.pv2-faq details[open] > div { animation: pv2fadein .22s ease-out; }
.pv2-bar > i { transition: width 1s cubic-bezier(.2,.7,.2,1); }
@keyframes pv2fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.pv2-card, .pv2-btn, .pv2-rail-card, .pv2-dec, .pv2-pricebadge { transition: none; }
.pv2-faq details[open] > div { animation: none; }
}
/* Active tab highlight (already handled by JS via .is-active, ensure style) */
.pv2-tab.is-active { color: var(--pv-accent); border-bottom-color: var(--pv-accent); }