/* Shared "detail page" kit — used by the store page, category page, and any
   future page with a coupon list + sidebar (TOC, stats, trust box,
   collapsibles). Was accidentally page-scoped under 06-pages/store.css
   before; must be global since category-view.php etc. need it too. */

/* The shared .ap-faq (05-components/faq.css) is centered/narrow
   (max-width: 760px) for the homepage's full-width section — inside a
   2-column layout that squeezes it oddly, so let it fill the main column
   instead. */
.ap-store-main .ap-faq {
  max-width: none;
  margin-inline: 0;
}

.ap-table-wrap {
  overflow-x: auto;
}

.ap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ap-fs-sm);
}

.ap-table th,
.ap-table td {
  text-align: left;
  padding: var(--ap-space-sm) var(--ap-space-md);
  border-bottom: 1px solid var(--ap-border);
}

.ap-table thead th {
  background: var(--ap-surface-alt);
  color: var(--ap-text);
  font-weight: 700;
}

.ap-table tbody tr:hover {
  background: var(--ap-surface-alt);
}

/* Every major block in the main column gets consistent spacing from the
   next one — no border/card framing, just gap. */
.ap-store-main .ap-section {
  margin-bottom: var(--ap-space-lg);
}

.ap-store-main .ap-section:last-child {
  margin-bottom: 0;
}

/* Single consolidated content block (About store / About category) — never
   stack multiple content sources; color/heading sizes here override the
   legacy style.css .article/.content-wrapper rules (hardcoded #111 text,
   invisible in dark mode) for any admin-authored HTML dropped in via echo. */
.ap-about-content,
.ap-about-content p,
.ap-about-content span,
.ap-about-content li {
  color: var(--ap-text);
}

.ap-about-content h2,
.ap-about-content h3 {
  font-size: var(--ap-fs-h3);
  margin-top: var(--ap-space-md);
}

.ap-about-content a {
  color: var(--ap-primary);
}

.ap-deal-list {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-md);
}

.ap-deal-row {
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  background: var(--ap-surface);
  box-shadow: var(--ap-shadow-sm);
  padding: var(--ap-space-md) var(--ap-space-lg);
}

.ap-deal-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ap-space-sm);
}

.ap-deal-row__store {
  font-size: var(--ap-fs-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ap-text-muted);
}

/* On listing pages (category, etc.) where each row belongs to a different
   store, the store name doubles as a link back to that store's page. */
a.ap-deal-row__store:hover {
  color: var(--ap-primary);
}

.ap-deal-row__pill {
  border: 1px solid var(--ap-primary);
  color: var(--ap-primary);
  font-size: var(--ap-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 12px;
  border-radius: 999px;
}

.ap-deal-row__main {
  display: flex;
  align-items: center;
  gap: var(--ap-space-lg);
  flex-wrap: wrap;
}

.ap-deal-row__ring {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--ap-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ap-primary);
  font-weight: 700;
  font-size: var(--ap-fs-sm);
  text-align: center;
  line-height: 1.1;
  gap: 2px;
}

.ap-deal-row__ring i {
  font-size: 0.7rem;
  opacity: 0.7;
}

.ap-deal-row__title {
  flex: 1;
  min-width: 200px;
  font-weight: 700;
  color: var(--ap-text);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-xs);
}

.ap-deal-row__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ap-space-xs);
}

.ap-deal-row__cta-sub {
  font-size: var(--ap-fs-sm);
  color: var(--ap-text-muted);
}

.ap-deal-row__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ap-space-sm);
  margin-top: var(--ap-space-md);
  padding-top: var(--ap-space-sm);
  border-top: 1px solid var(--ap-border);
}

.ap-deal-row__stats {
  display: flex;
  gap: var(--ap-space-md);
  font-size: var(--ap-fs-sm);
  font-weight: 700;
  color: var(--ap-text-muted);
}

.ap-deal-row__ending {
  color: var(--ap-error);
}

.ap-deal-row__details summary {
  cursor: pointer;
  font-size: var(--ap-fs-sm);
  color: var(--ap-text-muted);
  font-weight: 600;
}

.ap-deal-row__details summary:focus-visible { outline: none; box-shadow: var(--ap-focus-ring); }

/* ---------- Sidebar ---------- */

.ap-sidebar-card {
  background: var(--ap-surface-alt);
  border-radius: var(--ap-radius-lg);
  padding: var(--ap-space-lg);
}

/* h3, not h2 — these are widget-card titles inside an <aside>, one level
   below the main content's own h2 sections, not page-level sections
   themselves (matches model-single.php's equivalent sidebar widgets). */
.ap-sidebar-card h3 {
  font-size: var(--ap-fs-body);
  margin-bottom: var(--ap-space-sm);
}

.ap-trust-box__icon {
  color: var(--ap-success);
  font-size: 1.5rem;
  margin-bottom: var(--ap-space-xs);
}

.ap-sidebar-card p {
  margin-bottom: var(--ap-space-sm);
}

.ap-sidebar-card > a {
  font-weight: 600;
  text-decoration: underline;
}

.ap-reviewer {
  display: flex;
  align-items: center;
  gap: var(--ap-space-sm);
  margin-top: var(--ap-space-sm);
}

.ap-reviewer__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ap-primary);
  color: var(--ap-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* Sidebar "Contents" (TOC) — vertical link list. */
.ap-toc {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-xs);
}

.ap-toc a {
  font-size: var(--ap-fs-sm);
  font-weight: 600;
  color: var(--ap-primary);
  padding: 2px 0;
}

.ap-toc a:hover { text-decoration: underline; }

.ap-toc a.ap-toc__sub {
  padding-left: var(--ap-space-md);
  font-weight: 400;
  color: var(--ap-text-muted);
}

/* Sidebar recently-added activity list */
.ap-recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-sm);
}

.ap-recent-list__item {
  display: flex;
  gap: var(--ap-space-sm);
  align-items: flex-start;
}

.ap-recent-list__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ap-surface);
  color: var(--ap-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--ap-fs-sm);
}

.ap-recent-list__text {
  font-size: var(--ap-fs-sm);
  line-height: 1.35;
}

.ap-recent-list__time {
  display: block;
  color: var(--ap-text-muted);
  font-size: 0.75rem;
}

/* Sidebar stats grid */
.ap-stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-xs);
}

.ap-stats-list__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--ap-fs-sm);
  padding-block: var(--ap-space-xs);
  border-bottom: 1px solid var(--ap-border);
}

.ap-stats-list__row:last-child { border-bottom: none; }
.ap-stats-list__row strong { color: var(--ap-text); }

/* Sidebar collapsible sections (Similar Stores, Related Categories) */
.ap-sidebar-collapsible summary {
  cursor: pointer;
  font-size: var(--ap-fs-body);
  font-weight: 700;
  color: var(--ap-text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ap-sidebar-collapsible summary::-webkit-details-marker { display: none; }
.ap-sidebar-collapsible summary::after {
  content: "\25BC";
  font-size: 0.7rem;
  color: var(--ap-text-muted);
}
.ap-sidebar-collapsible[open] summary::after { content: "\25B2"; }
.ap-sidebar-collapsible summary:focus-visible { outline: none; box-shadow: var(--ap-focus-ring); }

.ap-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ap-space-sm);
  margin-top: var(--ap-space-md);
}

.ap-mini-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ap-text-muted);
}

.ap-mini-grid .ap-logo-badge { margin-bottom: 2px; }

.ap-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-xs);
  margin-top: var(--ap-space-md);
}

.ap-sidebar-list a {
  font-size: var(--ap-fs-sm);
  color: var(--ap-primary);
}

.ap-sidebar-list a:hover { text-decoration: underline; }