/* ==========================================================================
   DataCore — main.css
   Loads after variables.css. Organized by section; see inline comments.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--dc-paper);
  color: var(--dc-text);
  font-family: var(--dc-font-body);
  font-size: var(--dc-fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button, input, select, textarea{ font: inherit; color: inherit; }
table{ border-collapse: collapse; width: 100%; }
h1,h2,h3,h4{ font-family: var(--dc-font-display); font-weight: 600; line-height: 1.2; margin: 0 0 var(--dc-sp-3); }
p{ margin: 0 0 var(--dc-sp-4); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--dc-signal);
  outline-offset: 2px;
  border-radius: var(--dc-radius-sm);
}

.screen-reader-text{
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link{
  position: absolute; left: 8px; top: -48px; z-index: 999;
  background: var(--dc-ink); color: var(--dc-text-on-ink);
  padding: 10px 16px; border-radius: var(--dc-radius-sm);
  transition: top .15s ease;
}
.skip-link:focus{ top: 8px; }

/* ---------- Layout helpers ---------- */
.dc-container{ max-width: var(--dc-container); margin-inline: auto; padding-inline: var(--dc-sp-5); }
.dc-container--narrow{ max-width: var(--dc-container-narrow); }
.dc-section{ padding-block: var(--dc-sp-7); }
.dc-section--tight{ padding-block: var(--dc-sp-6); }
.dc-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: var(--dc-sp-4); margin-bottom: var(--dc-sp-5); }
.dc-section-head h2{ font-size: var(--dc-fs-xl); }
.dc-section-head .dc-eyebrow{ display:block; font-family: var(--dc-font-mono); font-size: var(--dc-fs-xs); letter-spacing:.08em; text-transform:uppercase; color: var(--dc-signal-dim); margin-bottom: 4px; }
.dc-see-all{ font-size: var(--dc-fs-sm); font-weight:600; color: var(--dc-signal-dim); white-space:nowrap; }
.dc-see-all:hover{ text-decoration: underline; }

.dc-grid{ display:grid; gap: var(--dc-sp-5); }
.dc-grid--4{ grid-template-columns: repeat(4, 1fr); }
.dc-grid--3{ grid-template-columns: repeat(3, 1fr); }
.dc-grid--2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px){ .dc-grid--4{ grid-template-columns: repeat(2,1fr);} .dc-grid--3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .dc-grid--4, .dc-grid--3, .dc-grid--2{ grid-template-columns: 1fr; } }

/* ---------- Header ---------- */
.dc-header{
  position: sticky; top:0; z-index: 100;
  background: var(--dc-ink); color: var(--dc-text-on-ink);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dc-header-inner{ position:relative; display:flex; align-items:center; gap: var(--dc-sp-5); min-height: var(--dc-header-h); }
.dc-logo{ display:flex; align-items:center; gap:8px; font-family: var(--dc-font-display); font-weight:700; font-size: var(--dc-fs-md); color: var(--dc-text-on-ink); flex-shrink:0; }
.dc-logo img{ max-height: 32px; width:auto; }
.dc-logo .dc-logo-mark{ width:10px; height:10px; background: var(--dc-signal); border-radius:2px; display:inline-block; }

/* Desktop primary navigation + accessible hover/focus submenus. */
.dc-primary-nav{ display:flex; align-items:center; flex:1; min-width:0; }
.dc-primary-nav > ul{ display:flex; align-items:center; gap: var(--dc-sp-5); }
.dc-primary-nav li{ position:relative; }
.dc-primary-nav a{ display:block; font-size: var(--dc-fs-sm); font-weight:500; color: rgba(243,245,247,.82); padding: 8px 0; border-bottom: 2px solid transparent; }
.dc-primary-nav > ul > li > a:hover,
.dc-primary-nav > ul > li:focus-within > a,
.dc-primary-nav .current-menu-item > a,
.dc-primary-nav .current-menu-ancestor > a{ color: var(--dc-text-on-ink); border-color: var(--dc-signal); }
.dc-primary-nav .menu-item-has-children > a::after{
  content:""; display:inline-block; width:6px; height:6px; margin-left:7px; vertical-align:3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg);
}
.dc-primary-nav .sub-menu{
  position:absolute; top:calc(100% + 8px); left:-14px; z-index:120;
  min-width:220px; padding:8px; display:block;
  background:var(--dc-ink-soft); border:1px solid rgba(255,255,255,.10); border-radius:var(--dc-radius-md);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.dc-primary-nav .sub-menu::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.dc-primary-nav li:hover > .sub-menu,
.dc-primary-nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.dc-primary-nav .sub-menu li + li{ margin-top:2px; }
.dc-primary-nav .sub-menu a{
  padding:9px 10px; border:0; border-radius:var(--dc-radius-sm); color:rgba(243,245,247,.78); white-space:nowrap;
}
.dc-primary-nav .sub-menu a:hover,
.dc-primary-nav .sub-menu a:focus-visible,
.dc-primary-nav .sub-menu .current-menu-item > a{ background:rgba(255,255,255,.07); color:var(--dc-text-on-ink); }
.dc-primary-nav .sub-menu .menu-item-has-children > a::after{ display:none; }

.dc-header-search{ flex-shrink:0; }
.dc-search-form{ position:relative; display:flex; align-items:center; }
.dc-search-form input[type="search"]{
  width: 260px; max-width: 40vw; background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); color: var(--dc-text-on-ink);
  border-radius: var(--dc-radius-md); padding: 9px 36px 9px 36px; font-size: var(--dc-fs-sm);
}
.dc-search-form input[type="search"]::placeholder{ color: rgba(243,245,247,.5); }
.dc-search-form .dc-search-icon{ position:absolute; left:11px; width:16px; height:16px; opacity:.6; pointer-events:none; }
.dc-search-form button{ position:absolute; right:4px; background:none; border:none; padding:6px; cursor:pointer; color: rgba(243,245,247,.7); }

.dc-user-menu{ flex-shrink:0; }
.dc-menu-toggle{ display:none; align-items:center; justify-content:center; background:none; border:none; color: var(--dc-text-on-ink); cursor:pointer; padding:8px; border-radius:var(--dc-radius-sm); }
.dc-submenu-toggle{ display:none; }

@media (max-width: 1080px){
  .dc-header-inner{ gap:var(--dc-sp-4); }
  .dc-primary-nav > ul{ gap:var(--dc-sp-4); }
  .dc-search-form input[type="search"]{ width:200px; }
}

@media (max-width: 900px){
  body.dc-nav-open{ overflow:hidden; }
  .dc-header-inner{ gap:var(--dc-sp-3); }
  .dc-menu-toggle{ display:inline-flex; order:-1; }
  .dc-primary-nav{
    display:none; position:fixed; top:var(--dc-header-h); left:0; right:0; bottom:0; z-index:110;
    overflow-y:auto; overscroll-behavior:contain; padding:var(--dc-sp-4) max(var(--dc-sp-5), calc((100vw - var(--dc-container)) / 2 + var(--dc-sp-5))) var(--dc-sp-7);
    background:var(--dc-ink); border-top:1px solid rgba(255,255,255,.08);
  }
  .dc-primary-nav.is-open{ display:block; }
  .dc-primary-nav > ul{ display:block; }
  .dc-primary-nav > ul > li{ border-bottom:1px solid rgba(255,255,255,.08); }
  .dc-primary-nav > ul > li > a{ padding:14px 44px 14px 2px; border:0; font-size:var(--dc-fs-base); }
  .dc-primary-nav > ul > li > a:hover,
  .dc-primary-nav > ul > li:focus-within > a,
  .dc-primary-nav .current-menu-item > a,
  .dc-primary-nav .current-menu-ancestor > a{ border:0; color:var(--dc-text-on-ink); }
  .dc-primary-nav .menu-item-has-children > a::after{ display:none; }
  .dc-submenu-toggle{
    display:inline-flex; position:absolute; top:7px; right:0; align-items:center; justify-content:center;
    width:40px; height:40px; padding:0; border:0; border-radius:var(--dc-radius-sm);
    background:transparent; color:rgba(243,245,247,.78); cursor:pointer;
  }
  .dc-submenu-toggle::before{
    content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px); transition:transform .14s ease;
  }
  .menu-item-has-children.is-submenu-open > .dc-submenu-toggle::before{ transform:rotate(225deg) translate(-1px,-1px); }
  .dc-primary-nav .sub-menu{
    position:static; min-width:0; padding:0 0 10px 14px; margin:0; display:none;
    background:transparent; border:0; border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:none;
  }
  .dc-primary-nav .menu-item-has-children.is-submenu-open > .sub-menu{ display:block; }
  .dc-primary-nav .sub-menu li{ border-left:1px solid rgba(255,255,255,.10); }
  .dc-primary-nav .sub-menu li + li{ margin-top:0; }
  .dc-primary-nav .sub-menu a{ padding:10px 12px; border-radius:0; white-space:normal; font-size:var(--dc-fs-sm); }
  .dc-search-form input[type="search"]{ width:150px; max-width:34vw; }
}

@media (max-width: 620px){
  .dc-container{ padding-inline:var(--dc-sp-4); }
  .dc-header-inner{ gap:var(--dc-sp-2); }
  .dc-logo{ font-size:var(--dc-fs-base); }
  .dc-logo img{ max-width:140px; }
  .dc-user-menu{ display:none; }
  .dc-header-search{ margin-left:auto; }
  .dc-search-form input[type="search"]{ width:132px; max-width:36vw; }
}

@media (max-width: 420px){
  .dc-search-form input[type="search"]{ width:112px; max-width:31vw; padding-left:32px; }
}

/* ---------- Breadcrumbs ---------- */
.dc-breadcrumbs{ font-size: var(--dc-fs-xs); color: var(--dc-text-faint); margin-bottom: var(--dc-sp-4); font-family: var(--dc-font-mono); }
.dc-breadcrumbs a{ color: var(--dc-text-soft); }
.dc-breadcrumbs a:hover{ color: var(--dc-signal-dim); }
.dc-breadcrumbs .sep{ margin: 0 6px; opacity:.5; }

/* ---------- Buttons ---------- */
.dc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding: 10px 18px; border-radius: var(--dc-radius-md); font-size: var(--dc-fs-sm); font-weight:600;
  border: 1px solid transparent; cursor:pointer; transition: background .12s ease, border-color .12s ease;
}
.dc-btn--primary{ background: var(--dc-ink); color: var(--dc-text-on-ink); }
.dc-btn--primary:hover{ background: var(--dc-ink-soft); }
.dc-btn--signal{ background: var(--dc-signal); color:#fff; }
.dc-btn--signal:hover{ background: var(--dc-signal-dim); }
.dc-btn--outline{ background: transparent; color: var(--dc-text); border-color: var(--dc-line); }
.dc-btn--outline:hover{ border-color: var(--dc-signal); color: var(--dc-signal-dim); }
.dc-btn--sm{ padding: 6px 12px; font-size: var(--dc-fs-xs); }
.dc-btn[data-dc-compare-add].is-added{ background:var(--dc-signal-tint); border-color:var(--dc-signal); color:var(--dc-signal-dim); }

/* ---------- Card: entity teaser (grid card) ---------- */
.dc-card{
  background: var(--dc-surface); border:1px solid var(--dc-line); border-radius: var(--dc-radius-lg);
  overflow:hidden; display:flex; flex-direction:column; transition: border-color .12s ease, box-shadow .12s ease;
}
.dc-card:hover{ border-color: var(--dc-signal); box-shadow: var(--dc-shadow-md); }
.dc-card-media{ position:relative; aspect-ratio: 4/3; background: var(--dc-line-soft); display:flex; align-items:center; justify-content:center; }
.dc-card-media img{ width:100%; height:100%; object-fit: contain; padding: var(--dc-sp-3); }
.dc-card-badge{
  position:absolute; top:10px; left:10px; background: var(--dc-ink); color:#fff;
  font-family: var(--dc-font-mono); font-size: 11px; padding: 3px 8px; border-radius: var(--dc-radius-sm); letter-spacing:.02em;
}
.dc-card-body{ padding: var(--dc-sp-4); display:flex; flex-direction:column; gap:6px; flex:1; }
.dc-card-eyebrow{ font-size: 11px; text-transform:uppercase; letter-spacing:.06em; color: var(--dc-text-faint); font-weight:600; }
.dc-card-title{ font-family: var(--dc-font-display); font-size: var(--dc-fs-md); font-weight:600; margin:0; }
.dc-card-title a::after{ content:""; position:absolute; inset:0; } /* full-card click target */
.dc-card{ position:relative; }
.dc-card-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top: var(--dc-sp-2); font-size: var(--dc-fs-sm); }
.dc-card-price{ font-family: var(--dc-font-mono); font-weight:600; color: var(--dc-text); }

/* ---------- Rating ring (signature) ---------- */
.dc-rating-ring{
  --pct: 0%;
  position:relative; width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background: conic-gradient(var(--dc-signal) var(--pct), var(--dc-line) 0);
  display:flex; align-items:center; justify-content:center;
}
.dc-rating-ring::before{ content:""; position:absolute; inset:4px; background: var(--dc-surface); border-radius:50%; }
.dc-rating-ring span{ position:relative; font-family: var(--dc-font-mono); font-size:12px; font-weight:700; }
.dc-rating-ring--lg{ width:76px; height:76px; }
.dc-rating-ring--lg span{ font-size: var(--dc-fs-md); }

/* ---------- Entity hero ---------- */
.dc-entity-hero{ display:grid; grid-template-columns:minmax(240px,320px) minmax(0,1fr) auto; gap:var(--dc-sp-6); align-items:start; padding-block:var(--dc-sp-6); border-bottom:1px solid var(--dc-line); }
.dc-entity-hero > *{ min-width:0; }
.dc-entity-hero-media{ background:var(--dc-surface); border:1px solid var(--dc-line); border-radius:var(--dc-radius-lg); aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dc-entity-hero-media img{ width:100%; height:100%; max-height:none; object-fit:contain; padding:var(--dc-sp-4); }
.dc-entity-hero-main .dc-eyebrow{ font-family:var(--dc-font-mono); font-size:var(--dc-fs-xs); color:var(--dc-signal-dim); text-transform:uppercase; letter-spacing:.06em; }
.dc-entity-hero-main h1{ font-size:clamp(var(--dc-fs-xl),3vw,var(--dc-fs-2xl)); overflow-wrap:anywhere; margin:4px 0 var(--dc-sp-3); }

.dc-status-badge{
  display:inline-flex; align-items:center; width:max-content; max-width:100%;
  margin-top:2px; padding:5px 9px; border-radius:999px;
  background:var(--dc-line-soft); color:var(--dc-text-soft);
  font-family:var(--dc-font-mono); font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.dc-status-badge--announced,
.dc-status-badge--rumored{ background:#fff4d6; color:#805b00; }
.dc-status-badge--discontinued,
.dc-status-badge--out-of-stock,
.dc-status-badge--out_of_stock{ background:var(--dc-negative-tint); color:var(--dc-negative); }
.dc-status-badge--available{ background:var(--dc-positive-tint); color:var(--dc-positive); }

.dc-quick-facts{ display:flex; flex-wrap:wrap; gap:var(--dc-sp-3) var(--dc-sp-5); margin-top:var(--dc-sp-4); }
.dc-quick-fact{ display:flex; flex-direction:column; gap:2px; min-width:110px; }
.dc-quick-fact .label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dc-text-faint); }
.dc-quick-fact .value{ font-family:var(--dc-font-mono); font-weight:600; font-size:var(--dc-fs-sm); overflow-wrap:anywhere; }
.dc-entity-hero-side{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--dc-sp-3); min-width:132px; }
.dc-entity-hero-side .dc-price{ font-family:var(--dc-font-mono); font-size:var(--dc-fs-lg); font-weight:700; text-align:right; }

@media (max-width: 1040px){
  .dc-entity-hero{ grid-template-columns:minmax(210px,260px) minmax(0,1fr); gap:var(--dc-sp-5); }
  .dc-entity-hero-side{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; }
  .dc-entity-hero-side .dc-price{ text-align:left; }
}

@media (max-width: 680px){
  .dc-entity-hero{ grid-template-columns:minmax(0,1fr); gap:var(--dc-sp-4); padding-block:var(--dc-sp-5); }
  .dc-entity-hero-media{ width:min(100%,320px); justify-self:center; }
  .dc-entity-hero-main{ text-align:left; }
  .dc-quick-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--dc-sp-3); }
  .dc-quick-fact{ min-width:0; padding:10px 12px; background:var(--dc-surface); border:1px solid var(--dc-line-soft); border-radius:var(--dc-radius-md); }
  .dc-entity-hero-side{ grid-column:auto; align-items:center; }
  .dc-entity-hero-side .dc-btn{ flex:1 1 150px; }
}

@media (max-width: 420px){
  .dc-quick-facts{ grid-template-columns:1fr; }
  .dc-entity-hero-side{ align-items:stretch; }
  .dc-entity-hero-side .dc-rating-ring{ align-self:flex-start; }
  .dc-entity-hero-side .dc-price{ width:100%; }
  .dc-entity-hero-side .dc-btn{ width:100%; }
}

/* ---------- Layout: entity page main + sidebar ---------- */
.dc-entity-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--dc-sp-7); align-items:start; padding-top:var(--dc-sp-6); }
.dc-entity-main{ min-width:0; }
@media (max-width: 960px){ .dc-entity-layout{ grid-template-columns:1fr; } }

/* Sticky local section navigation remains presentation-only. */
.dc-entity-nav{
  position:sticky; top:var(--dc-header-h); z-index:70; display:flex; gap:var(--dc-sp-5);
  min-height:var(--dc-entity-nav-h); margin-bottom:var(--dc-sp-6); overflow-x:auto; scrollbar-width:thin;
  background:rgba(250,250,250,.97); border-bottom:1px solid var(--dc-line); box-shadow:0 1px 0 rgba(16,19,26,.02);
  -webkit-overflow-scrolling:touch;
}
.dc-entity-nav a{ flex:0 0 auto; font-size:var(--dc-fs-sm); font-weight:600; color:var(--dc-text-soft); padding:12px 2px 10px; border-bottom:2px solid transparent; white-space:nowrap; }
.dc-entity-nav a:hover,
.dc-entity-nav a.is-active,
.dc-entity-nav a[aria-current="location"]{ color:var(--dc-text); border-color:var(--dc-signal); }

.dc-block{ margin-bottom:var(--dc-sp-7); scroll-margin-top:calc(var(--dc-header-h) + var(--dc-entity-nav-h) + 18px); }
.dc-block h2{ font-size:var(--dc-fs-lg); padding-bottom:var(--dc-sp-3); border-bottom:1px solid var(--dc-line); margin-bottom:var(--dc-sp-4); }

@media (max-width: 680px){
  .dc-entity-layout{ padding-top:var(--dc-sp-4); }
  .dc-entity-nav{ gap:var(--dc-sp-4); margin-inline:calc(var(--dc-sp-4) * -1); padding-inline:var(--dc-sp-4); margin-bottom:var(--dc-sp-5); }
}

/* ---------- Spec table + spec-bar (signature) ---------- */
.dc-spec-group{ margin-bottom: var(--dc-sp-5); }
.dc-spec-group h3{ font-size: var(--dc-fs-sm); text-transform:uppercase; letter-spacing:.05em; color: var(--dc-text-faint); font-family: var(--dc-font-body); font-weight:700; margin-bottom: var(--dc-sp-2); }
.dc-spec-table{ width:100%; font-size: var(--dc-fs-sm); }
.dc-spec-table tr{ border-bottom:1px solid var(--dc-line-soft); }
.dc-spec-table tr:last-child{ border-bottom:none; }
.dc-spec-table th{ text-align:left; font-weight:500; color: var(--dc-text-soft); padding: 10px 12px 10px 0; width: 38%; vertical-align:top; }
.dc-spec-table td{ padding: 10px 0; font-family: var(--dc-font-mono); vertical-align:top; }

.dc-spec-bar-row{ display:flex; align-items:center; gap: var(--dc-sp-3); padding: 8px 0; border-bottom:1px solid var(--dc-line-soft); }
.dc-spec-bar-row:last-child{ border-bottom:none; }
.dc-spec-bar-label{ width: 38%; font-size: var(--dc-fs-sm); color: var(--dc-text-soft); flex-shrink:0; }
.dc-spec-bar-track{ flex:1; height:8px; background: var(--dc-line-soft); border-radius:4px; overflow:hidden; }
.dc-spec-bar-fill{ height:100%; background: var(--dc-signal); border-radius:4px; }
.dc-spec-bar-value{ font-family: var(--dc-font-mono); font-size: var(--dc-fs-sm); font-weight:600; width:64px; text-align:right; flex-shrink:0; }

/* ---------- Pros & cons ---------- */
.dc-pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap: var(--dc-sp-5); }
@media (max-width:640px){ .dc-pros-cons{ grid-template-columns:1fr; } }
.dc-pros-cons > div{ border-radius: var(--dc-radius-lg); padding: var(--dc-sp-4); }
.dc-pros{ background: var(--dc-positive-tint); }
.dc-cons{ background: var(--dc-negative-tint); }
.dc-pros h3{ color: var(--dc-positive); font-size: var(--dc-fs-sm); }
.dc-cons h3{ color: var(--dc-negative); font-size: var(--dc-fs-sm); }
.dc-pros li, .dc-cons li{ position:relative; padding-left: 20px; margin-bottom: 8px; font-size: var(--dc-fs-sm); }
.dc-pros li::before{ content:"+"; position:absolute; left:0; color: var(--dc-positive); font-weight:700; font-family: var(--dc-font-mono); }
.dc-cons li::before{ content:"–"; position:absolute; left:0; color: var(--dc-negative); font-weight:700; font-family: var(--dc-font-mono); }

/* ---------- Price section ---------- */
.dc-price-table{ width:100%; border:1px solid var(--dc-line); border-radius: var(--dc-radius-lg); overflow:hidden; }
.dc-price-row{ display:flex; align-items:center; justify-content:space-between; padding: var(--dc-sp-3) var(--dc-sp-4); border-bottom:1px solid var(--dc-line); font-size: var(--dc-fs-sm); }
.dc-price-row:last-child{ border-bottom:none; }
.dc-price-row .dc-price{ font-family: var(--dc-font-mono); font-weight:700; }
.dc-price,.dc-card-price{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.dc-price-row > :first-child{ min-width:0; }
@media (max-width:560px){
  .dc-price-row{ align-items:flex-start; flex-wrap:wrap; gap:var(--dc-sp-2) var(--dc-sp-3); }
  .dc-price-row .dc-price{ margin-left:auto; }
  .dc-price-row .dc-btn{ width:100%; justify-content:center; }
}

/* ---------- FAQ ---------- */
.dc-faq-item{ border-bottom:1px solid var(--dc-line); }
.dc-faq-item summary{ cursor:pointer; padding: var(--dc-sp-3) 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.dc-faq-item summary::-webkit-details-marker{ display:none; }
.dc-faq-item summary::after{ content:"+"; font-family: var(--dc-font-mono); color: var(--dc-signal-dim); flex-shrink:0; }
.dc-faq-item[open] summary::after{ content:"–"; }
.dc-faq-item p{ padding-bottom: var(--dc-sp-3); color: var(--dc-text-soft); }

/* ---------- Alternatives / related cards row ---------- */
.dc-related-list{ display:flex; flex-direction:column; gap: var(--dc-sp-3); }
.dc-related-item{ display:flex; gap: var(--dc-sp-3); align-items:center; padding: var(--dc-sp-2); border-radius: var(--dc-radius-md); border:1px solid var(--dc-line); }
.dc-related-item:hover{ border-color: var(--dc-signal); }
.dc-related-item img{ width:48px; height:48px; object-fit:contain; background: var(--dc-line-soft); border-radius: var(--dc-radius-sm); }
.dc-related-item .title{ font-size: var(--dc-fs-sm); font-weight:600; }
.dc-related-item .sub{ font-size: var(--dc-fs-xs); color: var(--dc-text-faint); font-family: var(--dc-font-mono); }

/* ---------- Sidebar widgets / ad slot ---------- */
.dc-sidebar > * + *{ margin-top: var(--dc-sp-6); }
.dc-widget h3{ font-size: var(--dc-fs-sm); text-transform:uppercase; letter-spacing:.05em; color: var(--dc-text-faint); margin-bottom: var(--dc-sp-3); }
.dc-ad-slot{ border:1px dashed var(--dc-line); border-radius: var(--dc-radius-md); padding: var(--dc-sp-5); text-align:center; color: var(--dc-text-faint); font-size: var(--dc-fs-xs); font-family: var(--dc-font-mono); }

/* ---------- Comparison page ---------- */
.dc-comparison-title{ padding-top:var(--dc-sp-5); }
.dc-comparison-title h1{ font-size:var(--dc-fs-2xl); margin-top:4px; }
.dc-vs-shell,
.dc-compare-scroll{ overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.dc-vs-shell:focus-visible,
.dc-compare-scroll:focus-visible{ outline:2px solid var(--dc-signal); outline-offset:3px; border-radius:var(--dc-radius-md); }
.dc-vs-header{ --dc-compare-count:2; display:grid; grid-template-columns:repeat(var(--dc-compare-count),minmax(170px,1fr)); gap:var(--dc-sp-4); min-width:calc(var(--dc-compare-count) * 180px); padding-block:var(--dc-sp-6); align-items:stretch; }
.dc-vs-entity{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--dc-sp-2); min-width:0; padding:var(--dc-sp-4); border:1px solid var(--dc-line); border-radius:var(--dc-radius-lg); background:var(--dc-paper); }
.dc-vs-image{ width:100%; min-height:124px; display:flex; align-items:center; justify-content:center; }
.dc-vs-entity img{ width:100%; max-width:150px; height:120px; object-fit:contain; }
.dc-vs-entity h2{ font-size:var(--dc-fs-sm); overflow-wrap:anywhere; }
.dc-comparison-intro{ margin-inline:auto; }
.dc-compare-group{ min-width:0; }
.dc-compare-table{ --dc-compare-count:2; width:100%; min-width:calc(180px + (var(--dc-compare-count) * 190px)); border:1px solid var(--dc-line); border-collapse:separate; border-spacing:0; border-radius:var(--dc-radius-lg); overflow:visible; background:var(--dc-paper); }
.dc-compare-table tr{ border-bottom:1px solid var(--dc-line-soft); }
.dc-compare-table th, .dc-compare-table td{ min-width:190px; padding:12px 16px; font-size:var(--dc-fs-sm); text-align:center; border-bottom:1px solid var(--dc-line-soft); }
.dc-compare-table th:first-child{ position:sticky; left:0; z-index:2; min-width:180px; width:180px; text-align:left; color:var(--dc-text-soft); background:var(--dc-paper); box-shadow:1px 0 0 var(--dc-line-soft); }
.dc-compare-table thead th{ position:sticky; top:var(--dc-header-h); z-index:3; background:var(--dc-surface); font-family:var(--dc-font-display); font-weight:700; }
.dc-compare-table thead th:first-child{ z-index:4; background:var(--dc-surface); }
.dc-compare-table tbody tr:last-child th,
.dc-compare-table tbody tr:last-child td{ border-bottom:none; }
.dc-compare-table td{ font-family:var(--dc-font-mono); }
.dc-compare-table td.is-winner{ background:var(--dc-signal-tint); color:var(--dc-signal-dim); font-weight:700; }
.dc-compare-verdict{ background:var(--dc-ink); color:var(--dc-text-on-ink); border-radius:var(--dc-radius-lg); padding:var(--dc-sp-5); margin-top:var(--dc-sp-6); }
.dc-compare-verdict h3{ color:var(--dc-signal); font-size:var(--dc-fs-sm); text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:720px){
  .dc-vs-header{ grid-template-columns:repeat(var(--dc-compare-count),minmax(150px,1fr)); min-width:calc(var(--dc-compare-count) * 160px); gap:var(--dc-sp-3); }
  .dc-vs-entity{ padding:var(--dc-sp-3); }
  .dc-vs-entity img{ height:100px; }
  .dc-compare-table{ min-width:calc(138px + (var(--dc-compare-count) * 164px)); }
  .dc-compare-table th, .dc-compare-table td{ min-width:164px; padding:10px 12px; }
  .dc-compare-table th:first-child{ min-width:138px; width:138px; }
}

/* ---------- Homepage sections ---------- */
.dc-hero{ background: var(--dc-ink); color: var(--dc-text-on-ink); padding-block: var(--dc-sp-8); }
.dc-hero h1{ font-size: var(--dc-fs-3xl); max-width: 18ch; }
.dc-hero p{ color: rgba(243,245,247,.75); max-width:56ch; font-size: var(--dc-fs-md); }
.dc-hero .dc-search-form input[type="search"]{ width: 100%; max-width: 480px; }

.dc-category-pill{ display:inline-flex; align-items:center; gap:8px; padding: 8px 16px; border:1px solid var(--dc-line); border-radius: var(--dc-radius-md); font-size: var(--dc-fs-sm); font-weight:600; }
.dc-category-pill:hover{ border-color: var(--dc-signal); color: var(--dc-signal-dim); }
.dc-category-row{ display:flex; flex-wrap:wrap; gap: var(--dc-sp-3); }

.dc-article-card{ display:flex; flex-direction:column; gap:6px; }
.dc-article-card img{ border-radius: var(--dc-radius-md); aspect-ratio: 16/9; object-fit:cover; margin-bottom:8px; }
.dc-article-card .dc-eyebrow{ font-size:11px; text-transform:uppercase; color: var(--dc-text-faint); font-weight:700; }
.dc-article-card h3{ font-size: var(--dc-fs-md); }


/* Smartphone-specific homepage discovery surfaces. */
.dc-discovery-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--dc-sp-3); }
.dc-discovery-card{ min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:76px; padding:var(--dc-sp-4); border:1px solid var(--dc-line); border-radius:var(--dc-radius-md); background:var(--dc-paper); }
.dc-discovery-card:hover{ border-color:var(--dc-signal); transform:translateY(-1px); }
.dc-discovery-card--accent{ background:var(--dc-signal-tint); border-color:transparent; }
.dc-discovery-label{ font-family:var(--dc-font-display); font-weight:700; overflow-wrap:anywhere; }
.dc-discovery-meta,.dc-feature-meta{ color:var(--dc-text-faint); font-size:var(--dc-fs-xs); font-family:var(--dc-font-mono); }
.dc-feature-pill{ flex-direction:column; align-items:flex-start; gap:2px; }
@media (max-width:900px){ .dc-discovery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .dc-discovery-grid{ grid-template-columns:1fr 1fr; gap:var(--dc-sp-2); } .dc-discovery-card{ padding:var(--dc-sp-3); min-height:68px; } }

/* Plugin-fed phone-page presentation slots. */
.dc-entity-slot--gallery{ margin-top:var(--dc-sp-5); }
.dc-phone-gallery{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--dc-sp-3); }
.dc-phone-gallery-item{ margin:0; border:1px solid var(--dc-line); border-radius:var(--dc-radius-md); background:var(--dc-surface); overflow:hidden; }
.dc-phone-gallery-item.is-primary{ grid-column:span 2; grid-row:span 2; }
.dc-phone-gallery-item img{ width:100%; aspect-ratio:1; object-fit:contain; padding:var(--dc-sp-3); }
.dc-phone-gallery-item figcaption{ padding:0 var(--dc-sp-3) var(--dc-sp-3); color:var(--dc-text-faint); font-size:var(--dc-fs-xs); }
.dc-price-variants{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--dc-sp-3); margin-bottom:var(--dc-sp-4); }
.dc-price-variant{ display:flex; justify-content:space-between; align-items:center; gap:var(--dc-sp-3); padding:var(--dc-sp-4); border:1px solid var(--dc-line); border-radius:var(--dc-radius-md); }
.dc-price-variant-meta{ display:block; margin-top:2px; color:var(--dc-text-faint); font-size:var(--dc-fs-xs); }
.dc-model-nav{ display:grid; grid-template-columns:1fr 1fr; gap:var(--dc-sp-4); margin-top:var(--dc-sp-6); padding-top:var(--dc-sp-5); border-top:1px solid var(--dc-line); }
.dc-model-nav-item{ display:flex; flex-direction:column; gap:4px; min-width:0; padding:var(--dc-sp-4); border:1px solid var(--dc-line); border-radius:var(--dc-radius-md); }
.dc-model-nav-item--next{ text-align:right; }
.dc-link-card-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--dc-sp-3); }
.dc-link-card{ display:flex; flex-direction:column; gap:6px; padding:var(--dc-sp-4); border:1px solid var(--dc-line); border-radius:var(--dc-radius-md); }
.dc-review-list{ display:grid; gap:var(--dc-sp-3); }
.dc-review-summary{ padding:var(--dc-sp-4); border:1px solid var(--dc-line); border-radius:var(--dc-radius-md); }
.dc-review-summary-head{ display:flex; justify-content:space-between; gap:var(--dc-sp-3); }
.dc-review-score{ flex:0 0 auto; font-family:var(--dc-font-mono); font-weight:700; color:var(--dc-signal-dim); }
.dc-update-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:0; }
.dc-update-timeline li{ display:grid; grid-template-columns:minmax(92px,auto) 1fr; gap:var(--dc-sp-4); padding:var(--dc-sp-4) 0; border-bottom:1px solid var(--dc-line-soft); }
.dc-update-timeline p{ margin:4px 0 0; color:var(--dc-text-soft); }
.dc-news-list{ display:grid; }
.dc-news-item{ display:flex; align-items:center; justify-content:space-between; gap:var(--dc-sp-4); padding:var(--dc-sp-4) 0; border-bottom:1px solid var(--dc-line-soft); }
.dc-news-item strong{ display:block; margin-top:3px; }
@media (max-width:720px){
  .dc-phone-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dc-phone-gallery-item.is-primary{ grid-column:span 2; grid-row:auto; }
  .dc-price-variants,.dc-link-card-grid,.dc-model-nav{ grid-template-columns:1fr; }
  .dc-model-nav-item--next{ text-align:left; }
  .dc-update-timeline li{ grid-template-columns:1fr; gap:6px; }
}

/* ---------- Archive / search filter bar ---------- */
.dc-archive-head{ padding-block: var(--dc-sp-6); border-bottom:1px solid var(--dc-line); }
.dc-archive-head h1{ font-size: var(--dc-fs-2xl); }
.dc-archive-layout{ display:grid; grid-template-columns: 260px 1fr; gap: var(--dc-sp-6); padding-top: var(--dc-sp-6); }
@media (max-width: 900px){ .dc-archive-layout{ grid-template-columns:1fr; } }
.dc-filters{ display:flex; flex-direction:column; gap: var(--dc-sp-5); }
.dc-filter-group h3{ font-size: var(--dc-fs-sm); margin-bottom: var(--dc-sp-2); }
.dc-filter-group label{ display:flex; align-items:center; gap:8px; font-size: var(--dc-fs-sm); padding: 4px 0; color: var(--dc-text-soft); }
.dc-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--dc-sp-4); font-size: var(--dc-fs-sm); color: var(--dc-text-soft); }
.dc-sort select{ border:1px solid var(--dc-line); border-radius: var(--dc-radius-sm); padding:6px 10px; }

/* ---------- Pagination ---------- */
.dc-pagination{ display:flex; justify-content:center; gap:6px; margin-top: var(--dc-sp-7); }
.dc-pagination a, .dc-pagination span{ min-width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--dc-line); border-radius: var(--dc-radius-sm); font-size: var(--dc-fs-sm); font-family: var(--dc-font-mono); }
.dc-pagination .current{ background: var(--dc-ink); color:#fff; border-color: var(--dc-ink); }
.dc-pagination a:hover{ border-color: var(--dc-signal); }

/* ---------- Footer ---------- */
.dc-footer{ background: var(--dc-ink); color: rgba(243,245,247,.7); margin-top: var(--dc-sp-8); }
.dc-footer-grid{ display:grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--dc-sp-6); padding-block: var(--dc-sp-7); }
@media (max-width: 780px){ .dc-footer-grid{ grid-template-columns: 1fr 1fr; } }
.dc-footer h4{ color: var(--dc-text-on-ink); font-size: var(--dc-fs-sm); margin-bottom: var(--dc-sp-3); }
.dc-footer a{ display:block; font-size: var(--dc-fs-sm); padding: 4px 0; color: rgba(243,245,247,.65); }
.dc-footer a:hover{ color: var(--dc-signal); }
.dc-footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-block: var(--dc-sp-4); font-size: var(--dc-fs-xs); display:flex; justify-content:space-between; }

/* ---------- 404 / empty states ---------- */
.dc-empty-state{ text-align:center; padding-block: var(--dc-sp-9); }
.dc-empty-state .dc-code{ font-family: var(--dc-font-mono); font-size: var(--dc-fs-3xl); color: var(--dc-line); font-weight:700; }
.dc-empty-state h1{ font-size: var(--dc-fs-xl); }
.dc-empty-state p{ color: var(--dc-text-soft); max-width:48ch; margin-inline:auto; }

/* ---------- Utility ---------- */
.dc-mono{ font-family: var(--dc-font-mono); }
.dc-text-soft{ color: var(--dc-text-soft); }
.dc-text-faint{ color: var(--dc-text-faint); }
.dc-mt-0{ margin-top:0; }
.dc-lazy{ background: var(--dc-line-soft); }

/* Plugin-driven archive shell: no empty filter rail when Plugin 3 has no controls. */
.dc-archive-layout--no-filters {
	grid-template-columns: minmax(0, 1fr);
}