/* ==========================================================================
   PCMag-style skin for AffiliateCMS. Mobile-first.
   Breakpoints: 640 / 768 / 1024 (parent theme switches nav at 1024) / 1280
   Layout values measured from pcmag.com (gray #F7F7F7, rule #ECECEC). The accent colour is NEUTRAL by default (near-black) and
   is set per site in Customizer > PCMag Style > Brand colour; pcmag.com red is just one preset,
   Roboto Flex (width axis) for condensed headlines.
   ========================================================================== */

:root {
    /* Accent: overridden at runtime from the Customizer (inc/pcmag-helpers.php prints these). Neutral fallback below. */
    --pc-accent: #1f2937;
    --pc-accent-dark: #111827;
    --pc-accent-shadow: #030712;
    --pc-accent-tint: #f3f4f6;
    --pc-accent-soft: rgba(31, 41, 55, .35);
    --pc-accent-rgb: 31, 41, 55;
    --pc-on-accent: #ffffff;
    --pc-pro: #15803d;
    --pc-ink: #292929;
    --pc-ink-soft: #4a4a4a;
    --pc-muted: #737373;
    --pc-rule: #ececec;
    --pc-rule-strong: #d8d8d8;
    --pc-bg: #ffffff;
    --pc-gray: #f7f7f7;
    --pc-dark: #292929;
    --pc-darker: #111111;
    --pc-font: "Roboto Flex", Helvetica, Arial, sans-serif;
    --pc-max: 88rem; /* 1408px, same as pcmag.com .container */
    --pc-pad: 24px;
}

[data-theme="dark"] {
    --pc-ink: #f2f2f2;
    --pc-ink-soft: #cfcfcf;
    --pc-muted: #a5a5a5;
    --pc-rule: #3a3a3a;
    --pc-rule-strong: #4a4a4a;
    --pc-bg: #1b1b1b;
    --pc-gray: #262626;
    --pc-pro: #4ade80;
}

/* Re-point the parent's brand variables (teal / coral) to the accent so every parent module that stays
   (table of contents, author box, ratings/comments, related posts, buttons, load more) matches. */
:root, [data-theme="light"], [data-theme="dark"] {
    --color-primary: var(--pc-accent);
    --color-primary-hover: var(--pc-accent-dark);
    --color-primary-dark: var(--pc-accent-shadow);
    --color-primary-light: var(--pc-accent-tint);
    --color-primary-rgb: var(--pc-accent-rgb);
    --color-accent: var(--pc-accent);
    --color-accent-hover: var(--pc-accent-dark);
    --color-accent-light: var(--pc-accent-tint);
}

/* ---------- Base (scoped to body.pcmag so parent pages keep working) ---------- */
body.pcmag {
    font-family: var(--pc-font);
    color: var(--pc-ink);
    background: var(--pc-bg);
    line-height: 1.5;
}
.pcmag h1, .pcmag h2, .pcmag h3, .pcmag h4 { font-family: var(--pc-font); letter-spacing: 0; color: var(--pc-ink); }
.pcmag p { color: inherit; }
.pcmag a { color: inherit; }
.pcmag a:hover { color: var(--pc-accent); }
.pcmag ul, .pcmag ol { list-style: none; margin: 0; padding: 0; }
.pcmag :focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }

.pc-container { width: 100%; max-width: var(--pc-max); margin: 0 auto; padding-left: var(--pc-pad); padding-right: var(--pc-pad); }
.pc-main { display: block; }
.pc-section { margin-top: 48px; }
.pc-img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--pc-gray); }
.pc-img--empty { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #ececec, #d8d8d8); }
.pc-by, .pc-ago { display: block; font-size: 12px; line-height: 15px; font-weight: 300; text-transform: uppercase; letter-spacing: .025em; color: var(--pc-muted); margin-top: 6px; }

/* ---------- Header (measured: 48px mobile / 64px desktop, 5px soft shadow) ---------- */
.pcmag .pc-header {
    position: sticky; top: 0; z-index: 200;
    background: var(--pc-bg);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
}
.admin-bar .pc-header { top: 46px; }
.pc-header__inner { display: flex; align-items: center; gap: 12px; height: 48px; max-width: var(--pc-max); }
.pc-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; padding: 0;
    background: none; border: 0; border-radius: 0; cursor: pointer;
    color: var(--pc-ink); font-size: 22px; line-height: 1;
}
.pc-iconbtn:hover { color: var(--pc-accent); background: none; }
.pc-burger { margin-left: -10px; font-size: 26px; }
.pc-burger .icon-close { display: none; }
.pc-burger[aria-expanded="true"] .icon-menu { display: none; }
.pc-burger[aria-expanded="true"] .icon-close { display: block; color: var(--pc-accent); }

.pc-logo-wrap { margin: 0; flex: 1; display: flex; justify-content: center; font-size: inherit; line-height: 1; }
.pc-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* The red square with a hard darker-red offset shadow, like the pcmag.com mark */
.pc-logo__mark {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 7px;
    background: var(--pc-accent); color: var(--pc-on-accent); border-radius: 3px;
    box-shadow: 3px 3px 0 var(--pc-accent-shadow);
    font-size: 22px; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-stretch: 85%;
}
.pc-logo__name { display: none; font-size: 20px; font-weight: 700; font-stretch: 60%; color: var(--pc-ink); }
.pc-logo-wrap .custom-logo-link img, .pc-logo-wrap img.custom-logo { display: block; height: 32px !important; width: auto !important; max-width: 180px !important; }

.pc-nav { display: none; }
.pc-actions { display: flex; align-items: center; gap: 0; margin-right: -10px; }
.pc-actions__cta { display: none; }
.pc-theme-toggle { position: relative; font-size: 18px; }
.pc-theme-toggle__sun { position: absolute; opacity: 0; }
[data-theme="dark"] .pc-theme-toggle__sun { opacity: 1; }
[data-theme="dark"] .pc-theme-toggle__moon { opacity: 0; }
.pc-header [data-theme-toggle][style*="display: none"] { display: none !important; }

/* Parent's mobile drawer, restyled and moved to the left like pcmag.com */
.pcmag .mobile-nav { right: auto; left: 0; transform: translateX(-100%); max-width: 24rem; width: 88vw; background: var(--pc-bg); }
.pcmag .mobile-nav.is-open { transform: translateX(0); }
.pcmag .mobile-nav-overlay.is-visible { opacity: 1; visibility: visible; }
.pcmag .mobile-nav__link { font-weight: 700; color: var(--pc-ink); }
.pcmag .mobile-nav__link:hover { color: var(--pc-accent); }
.pcmag .mobile-nav .btn--primary { background: var(--pc-accent); border-color: var(--pc-accent); }

/* Priority+ menu ("More") */
/* Spacing uses li margins, not flex gap: the parent's priority-nav JS measures offsetWidth + margins only. */
.pc-nav__list { display: flex; align-items: center; flex-wrap: nowrap; }
.pc-nav__list > li { margin: 0 2px; }
.pc-nav__list > li > a {
    display: block; padding: 20px 10px; font-size: 14px; font-weight: 700; line-height: 1.2;
    white-space: nowrap; text-decoration: none; border-bottom: 3px solid transparent; color: var(--pc-ink);
}
.pc-nav__list > li > a:hover, .pc-nav__list > li.current-menu-item > a { color: var(--pc-accent); border-bottom-color: var(--pc-accent); }
.pc-nav__list > li.is-hidden { display: none !important; }
.pc-nav__list > .menu-item--more { display: none; position: relative; }
.pc-nav__list > .menu-item--more.is-visible { display: block; }
.pc-nav__list > .menu-item--more > button { background: none; border: 0; padding: 20px 10px; font-size: 18px; color: var(--pc-ink); cursor: pointer; }
.pc-nav__list > .menu-item--more > button:hover { color: var(--pc-accent); }
.pc-nav__list .more-menu__dropdown {
    position: absolute; right: 0; top: 100%; min-width: 200px; padding: 8px 0;
    background: var(--pc-bg); border: 1px solid var(--pc-rule); box-shadow: 0 8px 24px rgba(0,0,0,.15);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.pc-nav__list > .menu-item--more:hover .more-menu__dropdown,
.pc-nav__list > .menu-item--more.is-open .more-menu__dropdown { opacity: 1; visibility: visible; transform: none; }
.pc-nav__list .more-menu__dropdown a { display: block; padding: 10px 16px; font-size: 14px; font-weight: 640; text-decoration: none; }
.pc-nav__list .more-menu__dropdown a:hover { background: var(--pc-gray); }

.pc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 22px; border: 0; border-radius: 6px;
    background: var(--pc-accent); color: var(--pc-on-accent) !important; font: inherit; font-weight: 700; font-size: 16px;
    text-decoration: none; cursor: pointer; transition: background .15s;
}
.pc-btn:hover { background: var(--pc-accent-dark); color: var(--pc-on-accent); }
.pc-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* ---------- Top block (measured: Latest 272px | feature 1056px at 1440; cover image 60%) ---------- */
.pc-top { margin-top: 0; padding-top: 16px; display: flex; flex-direction: column; gap: 0; }
.pc-top__feature { order: 1; min-width: 0; }
.pc-cover { display: flex; flex-direction: column; margin-bottom: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--pc-rule); }
.pc-cover__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin: 0 calc(var(--pc-pad) * -1); }
.pc-cover__body { margin: 0; }
.pc-cover__title { margin: 16px 0 0; font-size: 24px; font-weight: 640; font-stretch: 50%; line-height: 1.125; }
.pc-cover__title a { text-decoration: none; color: var(--pc-accent); }
.pc-cover__title a:hover { color: var(--pc-accent-dark); }
.pc-cover__dek { margin: 8px 0 0; font-size: 18px; line-height: 1.4; }
.pc-cover .pc-by { font-size: 14px; letter-spacing: .025em; margin-top: 8px; }

.pc-stories { display: block; }
.pc-story { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; }
.pc-story__text { flex: 1; min-width: 0; text-decoration: none; }
.pc-story__title { display: block; font-size: 18px; font-weight: 640; font-stretch: 50%; line-height: 1.25; }
.pc-story__text:hover .pc-story__title { color: var(--pc-accent); }
/* Square thumb with the hard red offset, only from tablet up (as on pcmag.com) */
.pc-story__media { display: none; }

.pc-latest { order: 2; margin-top: 32px; }
.pc-latest__title { margin: 0 8px 0 0; font-size: 20px; font-weight: 640; font-stretch: 75%; text-transform: uppercase; line-height: 1.125; }
.pc-latest__list li { padding: 16px 0; border-bottom: 1px solid var(--pc-rule); }
.pc-latest__link { font-size: 16px; font-weight: 640; font-stretch: 50%; text-decoration: none; line-height: 1.5; }
.pc-latest__list .pc-ago { display: inline; margin-left: 4px; white-space: nowrap; font-size: 12px; font-weight: 300; }
.pc-latest__more { display: inline-flex; align-items: center; gap: 4px; padding: 16px 0; font-size: 14px; color: var(--pc-accent) !important; text-decoration: none; }

/* ---------- Ask box (measured: gray band, white card 828px, input/button 64px high) ---------- */
.pc-ask { margin-top: 48px; padding: 48px 16px; background: var(--pc-gray); }
.pc-ask__box { max-width: 828px; margin: 0 auto; padding: 16px; background: var(--pc-bg); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.pc-ask__title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.3; background: linear-gradient(90deg, var(--pc-accent-dark), var(--pc-accent)); -webkit-background-clip: text; background-clip: text; color: transparent !important; width: fit-content; }
.pc-ask__text { margin: 24px 0 0; padding: 0 16px; text-align: center; font-size: 14px; font-weight: 700; }
.pc-ask__form { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
.pc-ask__form input {
    width: 100%; min-height: 64px; padding: 0 16px; font: inherit; font-size: 18px; /* >=16px stops iOS zoom */
    color: var(--pc-ink); background: #f6f7ff; border: 1px solid #737373; border-radius: 8px;
}
[data-theme="dark"] .pc-ask__form input { background: #1f2030; }
.pc-ask__examples { margin: 0 auto 12px; max-width: 28rem; text-align: center; font-size: 12px; }
.pc-ask__examples ul { margin: 8px auto 0; text-align: left; width: fit-content; max-width: 175px; }
.pc-ask__examples li { margin-top: 4px; }
.pc-ask__form .pc-btn { min-height: 64px; background: linear-gradient(90deg, var(--pc-accent-dark), var(--pc-accent)); border-radius: 8px; font-weight: 640; }

/* ---------- Ruled section title (measured: one 2px black rule each side, 30px uppercase condensed) ---------- */
.pc-ruled { display: flex; align-items: center; justify-content: center; padding: 24px 0 20px; }
.pc-ruled::before, .pc-ruled::after { content: ""; flex: 1 1 0; border-top: 2px solid var(--pc-ink); }
.pc-ruled__title { margin: 0; padding: 0 32px; font-size: 24px; font-weight: 700; font-stretch: 50%; text-transform: uppercase; line-height: 36px; white-space: nowrap; }
.pc-ruled__link { margin: 0; padding: 0 0 28px; min-height: 52px; text-align: center; font-size: 14px; line-height: 20px; }
.pc-ruled__link--empty { visibility: hidden; }
.pc-ruled__link a { text-decoration: underline; }

/* ---------- Carousel (measured: 256px cards, 16px gap on mobile; 25% on desktop; 16:9 image) ---------- */
.pc-carousel { position: relative; }
.pc-carousel__track {
    display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.pc-carousel__track::-webkit-scrollbar { display: none; }
.pc-slide { flex: 0 0 256px; min-width: 0; padding: 8px 0; scroll-snap-align: start; }
.pc-carousel--deals .pc-slide { flex: 0 0 256px; }  /* same fixed card as pcmag.com on every width */
.pc-slide__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 8px; }
.pc-slide__title { margin: 20px 0 0; font-size: 18px; font-weight: 640; font-stretch: 50%; line-height: 1.25; }
.pc-slide__title a { text-decoration: none; }
.pc-slide .pc-by { margin-top: 11px; }
.pc-carousel__btn {
    display: none; position: absolute; top: 35%; z-index: 5; width: 64px; height: 64px;
    align-items: center; justify-content: center; border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; color: var(--pc-muted); font-size: 22px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.12), 0 2px 4px -2px rgba(0,0,0,.12);
}
.pc-carousel__btn:hover { color: var(--pc-accent); box-shadow: 0 10px 15px -3px rgba(0,0,0,.15); }
.pc-carousel__btn:disabled { opacity: 0; pointer-events: none; }
.pc-carousel__btn--prev { left: -24px; }
.pc-carousel__btn--next { right: -24px; }

/* ---------- Rivers (measured: 3 columns ~453px, 48px right gap, 30px titles, 1px #292929 rules) ---------- */
.pc-rivers { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.pc-river__title { margin: 0 0 20px; font-size: 30px; font-weight: 640; font-stretch: 50%; line-height: 1.125; }
.pc-river__intro { margin: -8px 0 20px; font-weight: 300; }
.pc-river__lead { margin-top: 0; }
.pc-river__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 12px; }
.pc-river__lead-title { margin: 0; font-size: 20px; font-weight: 640; font-stretch: 50%; line-height: 1.25; }
.pc-river__lead-title a, .pc-river__item-title a { text-decoration: none; }
.pc-river__lead::after, .pc-river__item::after { content: ""; display: block; width: 66.666%; margin-top: 16px; border-bottom: 1px solid var(--pc-ink); }
.pc-river__item { margin-top: 16px; }
.pc-river__item-title { margin: 0; font-size: 20px; font-weight: 640; font-stretch: 50%; line-height: 1.25; }
.pc-river__all { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; font-size: 16px; color: var(--pc-accent) !important; text-decoration: none; }
.pc-river__all:hover { color: var(--pc-accent-dark) !important; text-decoration: underline; }

/* ---------- Category circles / "Labs" (measured: 541px tall at 1440, 96px circles, items 1/5 wide, 2 rows) ---------- */
.pc-labs { margin-top: 64px; }
.pc-labs__head { display: flex; align-items: center; gap: 12px; margin: 32px 0; font-size: 30px; font-weight: 640; font-stretch: 50%; text-transform: uppercase; line-height: 1.2; }
.pc-labs__mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--pc-ink); color: var(--pc-bg); font-size: 18px; font-weight: 800; }
.pc-labs__body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }
.pc-labs__text { flex: 0 0 100%; margin: 0; font-size: 20px; font-weight: 640; font-stretch: 50%; line-height: 1.25; }
.pc-labs__list { display: flex; flex-wrap: wrap; flex: 0 0 100%; }
.pc-labs__list li { flex: 0 0 50%; padding-top: 48px; }
.pc-labs__list a { display: flex; flex-direction: column; align-items: center; gap: 16px; text-decoration: none; text-align: center; font-weight: 700; }
.pc-labs__circle {
    display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
    background: var(--pc-gray); color: var(--pc-ink); font-size: 36px; transition: background .2s, color .2s;
}
.pc-labs__list a:hover .pc-labs__circle { background: var(--pc-accent); color: var(--pc-on-accent); }

/* ---------- Footer (measured: tiles 192px high on desktop, brand band #292929, link block #111, legal #292929) ---------- */
.pcmag .pc-footer { margin-top: 48px; background: var(--pc-bg); color: #fff; border: 0; padding: 0; }
.pc-footer a { color: inherit; text-decoration: none; }
.pc-footer__cta { display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; color: var(--pc-ink); }
.pc-footer__tile {
    display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 8px; min-height: 128px; padding: 16px;
    border: 1px solid var(--pc-rule); color: var(--pc-ink) !important; transition: background .2s, color .2s;
}
a.pc-footer__tile:hover, .pc-footer__tile--social:hover { background: var(--pc-accent); border-color: var(--pc-accent); color: var(--pc-on-accent) !important; }
.pc-footer__tile--social:hover .pc-footer__social a { color: var(--pc-on-accent); }
.pc-footer__tile-title { width: 100%; font-size: 24px; font-weight: 700; font-stretch: 50%; line-height: 1.25; }
.pc-footer__tile-text { font-size: 16px; font-weight: 640; }
.pc-footer__social { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 16px; }
.pc-footer__social a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; font-size: 18px; color: var(--pc-ink); }
.pc-footer__social a:hover { color: var(--pc-accent); }

.pc-footer__brand { background: var(--pc-dark); padding: 32px 0; color: #fff; }
.pc-footer__brand-inner { display: flex; flex-direction: column; gap: 32px; }
.pc-footer__brand h2 { margin: 0 0 16px; color: #fff; font-size: 20px; font-weight: 640; font-stretch: 50%; line-height: 1.125; }
.pc-footer__brand p { margin: 0; font-size: 14px; line-height: 1.6; color: #fff; }
.pc-footer__brand-links { display: flex; gap: 24px; margin-top: 16px; font-size: 12px; font-weight: 640; }
.pc-footer__brand-links a { border-bottom: 1px solid transparent; }
.pc-footer__brand-links a:hover { border-bottom-color: var(--pc-accent); }
.pc-footer__stats { display: flex; }
.pc-footer__stats li { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 20px; border-left: 1px solid var(--pc-accent); }
.pc-footer__stats li:first-child { padding-left: 0; border-left: 0; }
.pc-footer__stats strong { font-size: 24px; font-weight: 640; line-height: 1; }
.pc-footer__stats span { font-size: 12px; font-weight: 300; letter-spacing: .05em; color: #fff; }

/* Big link directory (Best Products / Popular Reviews / Comparisons / Explainers / Brands / Series / Events) */
.pc-footer__dir { background: var(--pc-darker); border-top: 1px solid #4a4a4a; border-bottom: 1px solid #4a4a4a; padding: 48px 0; color: #fff; }
.pc-footer__dir .pc-container { display: flex; flex-direction: column; gap: 40px; }
.pc-dir__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; width: 100%; background: none; border: 0; padding: 0; color: #fff; text-align: left; cursor: pointer; font: inherit; }
.pc-dir__head:hover .pc-dir__chev { color: var(--pc-accent); }
.pcmag .pc-footer .pc-dir__title, .pcmag .pc-footer__brand h2 { color: #fff; }
.pc-dir__title { margin: 0; font-size: 20px; font-weight: 640; font-stretch: 50%; text-transform: uppercase; }
.pc-dir__title-link { display: block; text-decoration: none; }
.pc-dir__chev { font-size: 16px; transition: transform .2s; }
.pc-dir__group[data-open="false"] .pc-dir__chev { transform: rotate(180deg); }
.pc-dir__group[data-open="false"] .pc-dir__cols { display: none; }
.pc-dir__rule { display: none; flex: 1; border-top: 1px solid #292929; }
.pc-dir__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.pc-dir__cols ul { display: flex; flex-direction: column; gap: 20px; }
.pc-dir__cols a { font-size: 16px; line-height: 1.5; color: #fff; }
.pc-dir__cols a:hover { color: var(--pc-accent); }
.pc-dir__pair { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }

.pc-footer__links { background: var(--pc-dark); padding: 40px 0 8px; }
.pc-footer__menu { display: flex; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid #4a4a4a; padding-bottom: 32px; }
.pc-footer__menu li { width: 50%; padding: 8px 0; text-align: center; }
.pc-footer__menu a { font-size: 14px; font-weight: 700; color: #fff; }
.pc-footer__menu a:hover, .pc-footer__policy a:hover { color: var(--pc-accent); }
.pc-footer__legal { background: var(--pc-dark); padding: 24px 0 80px; text-align: center; font-size: 14px; line-height: 1.25; color: #a5a5a5; }
.pc-footer__copy { margin: 0; font-weight: 700; text-transform: uppercase; }
.pc-footer__disclosure { margin: 8px auto 0; max-width: 60rem; }
.pc-footer__disclosure a { text-decoration: underline; }
.pc-footer__policy-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin-top: 24px; }
.pc-footer__policy-list li { width: 50%; margin-top: 8px; }
.pc-footer__policy a { display: block; padding: 4px 0; }

/* ==========================================================================
   >= 640px (large phones / small tablets)
   ========================================================================== */
@media (min-width: 640px) {
    .admin-bar .pc-header { top: 32px; }
    .pc-logo__name { display: inline; }
    .pc-cover__media { margin: 0; }
    .pc-cover__body { margin: 0; }
    .pc-cover__title { font-size: 30px; }
    .pc-slide { flex-basis: 256px; }
    .pc-carousel--deals .pc-slide { flex-basis: 256px; }
    .pc-ask__form { flex-direction: row; gap: 16px; }
    .pc-ask__form .pc-btn { flex: none; width: 120px; }
    .pc-ask__box { padding: 32px; }
    .pc-ruled__title { font-size: 28px; line-height: 42px; }
    .pc-labs__list li { flex-basis: 33.333%; }
    .pc-footer__cta { flex-direction: row; }
    .pc-footer__cta > * { flex: 1; }
    .pc-dir__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pc-footer__menu li, .pc-footer__policy-list li { width: auto; padding-left: 12px; padding-right: 12px; }
    .pc-footer__policy-list li { margin-top: 8px; }
}

/* ==========================================================================
   >= 768px
   ========================================================================== */
@media (min-width: 768px) {
    .pc-header__inner { height: 64px; }
    .pc-rivers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
    .pc-rivers > :nth-child(3):last-child { grid-column: 1 / -1; }
    .pc-cover { flex-direction: row; margin-top: 8px; padding-bottom: 16px; }
    .pc-cover__media { flex: 0 0 60%; max-width: 60%; margin: 0; }
    .pc-cover__body { flex: 1; align-self: center; padding-left: 32px; }
    .pc-cover__title { margin-top: 0; font-size: 30px; }
    .pc-cover__dek { font-size: 16px; }
    .pc-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-story { padding: 32px 0; justify-content: space-around; }
    .pc-story__text { flex: 0 1 60%; min-width: 0; }  /* may shrink so the thumbnail never overlaps the next column */
    .pc-story__title { font-size: 20px; }
    .pc-story__media {
        display: block; flex: none; width: 96px; height: 96px; margin-left: 32px; overflow: hidden; position: relative;
        box-shadow: -7px 7px 0 var(--pc-accent); transition: transform .2s, box-shadow .2s;
    }
    .pc-story:hover .pc-story__media { transform: translate(-4px, -4px); box-shadow: -10px 10px 0 var(--pc-accent-dark); }
    .pc-ruled__title { font-size: 30px; line-height: 45px; }
    .pc-footer__brand-inner { flex-direction: row; align-items: center; gap: 64px; }
    .pc-footer__brand-text { flex: 3; }
    .pc-footer__stats { flex: 1; justify-content: flex-end; }
    .pc-footer__stats li { flex: none; padding: 0 32px; }
    .pc-footer__stats li:last-child { padding-right: 0; }
    .pc-footer__stats strong { font-size: 30px; }
    .pc-dir__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
    .pc-dir__rule { display: block; }
    .pc-dir__head { justify-content: flex-start; cursor: default; }
    .pc-dir__title { font-size: 30px; }
    .pcmag .pc-footer .pc-dir__chev { display: none; }
    .pc-dir__head .pc-dir__rule { margin-left: 16px; }
}

/* ==========================================================================
   >= 1024px (desktop: 64px header; The Latest 272px | feature column)
   ========================================================================== */
@media (min-width: 1024px) {
    .pc-logo-wrap { flex: none; justify-content: flex-start; }
    .pc-logo__mark { min-width: 48px; height: 48px; font-size: 26px; }
    /* overflow-x: clip (unlike hidden) leaves overflow-y visible so the "More" dropdown still shows, and
       it guarantees the menu can never run into the header icons before the priority-nav JS has run. */
    .pc-nav { display: block; flex: 1; min-width: 0; overflow-x: clip; }
    .pc-actions { gap: 4px; }
    .pc-actions__cta { display: inline-flex; margin-right: 8px; }

    .pc-top { flex-direction: row; align-items: flex-start; padding-top: 32px; }
    .pc-top__feature { order: 2; flex: 1; min-width: 0; padding-left: 32px; }
    .pc-latest { order: 1; flex: 0 0 272px; margin-top: 0; }
    .pc-cover { margin-top: 0; }
    .pc-cover__title { font-size: 36px; }

    .pc-slide, .pc-carousel--deals .pc-slide { flex: 0 0 256px; }
    .pc-carousel__btn { display: inline-flex; }
    .pc-carousel__track { overflow-x: hidden; scroll-snap-type: none; }

    .pc-rivers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 0; }
    .pc-rivers > :nth-child(3):last-child { grid-column: auto; }
    .pc-river { min-width: 0; padding-right: 48px; }

    /* PCMag: a 5-column grid, the intro text spans the first two cells of row 1, links are left-aligned in their cell */
    .pc-labs { overflow: hidden; }
    .pc-labs__body { align-items: flex-end; justify-content: flex-start; margin-left: 64px; }
    .pc-labs__list { display: contents; }
    .pc-labs__text { flex: 0 0 40%; max-width: 40%; padding: 64px 24px 0 0; }
    .pc-labs__list li { flex: 0 0 20%; padding-top: 64px; }
    .pc-labs__list a { align-items: flex-start; }

    .pc-footer__tile { min-height: 192px; padding: 32px; }
    .pc-footer__tile-title { font-size: 24px; }
    .pc-footer__tile-text { font-size: 18px; }
    .pc-dir__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 40px; }
    .pc-dir__pair .pc-dir__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-footer__menu { flex-wrap: nowrap; justify-content: flex-start; }
    .pc-footer__menu li { padding-left: 0; padding-right: 32px; text-align: left; }
}

/* ==========================================================================
   >= 1280px
   ========================================================================== */
@media (min-width: 1280px) {
    .pc-nav__list > li { margin: 0 5px; }
    .pc-nav__list > li > a { font-size: 14px; }
    .pc-cover__title { font-size: 36px; }
    .pc-story__title { font-size: 24px; }
    .pc-slide__title { font-size: 18px; }
}

@media (hover: none) {
    .pc-story:hover .pc-story__media { transform: none; box-shadow: -7px 7px 0 var(--pc-accent); }
}

@media (prefers-reduced-motion: reduce) {
    .pcmag * { transition: none !important; scroll-behavior: auto !important; }
}

/* Print: drop chrome */
@media print {
    .pc-header, .pc-footer, .pc-ask, .pc-carousel__btn { display: none !important; }
}

/* Drawer header: parent uses a teal gradient icon; use brand red instead */
.pcmag .mobile-nav__icon { background: var(--pc-accent); box-shadow: none; }
.pcmag .mobile-nav__header { background: var(--pc-bg); }
.pcmag .mobile-nav__title { font-weight: 800; color: var(--pc-ink); }
.pcmag .mobile-nav__footer { background: var(--pc-gray); }
.pcmag .mobile-nav__ai-btn i, .pcmag .mobile-nav__theme-toggle i { color: var(--pc-accent); }

@media (min-width: 1280px) {
    .pc-labs__body { width: 1360px; max-width: none; }
    .pc-labs__text { flex-basis: 544px; max-width: 544px; }
    .pc-labs__list li { flex-basis: 272px; }
}

/* Closed drawer must not leak its parent box-shadow into the viewport edge */
.pcmag .mobile-nav:not(.is-open) { box-shadow: none; visibility: hidden; }
.pcmag .mobile-nav.is-open { visibility: visible; }

/* Section heading -> content spacing (a little looser than pcmag.com so titles never touch the images) */
.pc-section .pc-ruled + .pc-carousel, .pc-section .pc-ruled + .pc-rivers { margin-top: 12px; }
.pc-rivers--explore { margin-top: 28px; }
@media (max-width: 1023px) {
    .pc-rivers { gap: 48px; }
    .pc-river__title { margin-bottom: 16px; }
}

/* Block rhythm: pcmag.com puts 64px between large blocks (48px on phones). */
@media (min-width: 640px) {
    .pc-section { margin-top: 64px; }
}
/* The heading already has 24px above it; the first block after the Ask box needs no extra gap */
.pc-section .pc-ruled { padding-top: 0; }
.pc-section .pc-ruled + .pc-carousel, .pc-section .pc-ruled + .pc-rivers { margin-top: 0; }
.pc-rivers--explore { margin-top: 24px; }

/* pcmag.com closes the carousel with a 2px black rule, 32px below the cards */
.pc-carousel__rule { display: block; box-sizing: border-box; height: 22px; margin: 43px 0 0; padding: 0; border: 0; border-top: 2px solid var(--pc-ink); background: none; }

/* ---------- Round 4: links, Labs as on pcmag.com, product shots shown whole ---------- */
/* Near-square product photos are shown whole on white (the page colour) instead of being cropped to 16:9 */
.pc-img--contain { object-fit: contain; background: #fff; }

/* Column items: the lead story is 20px, the rest are smaller and bolder, as on pcmag.com */
.pc-river__item-title { font-size: 16px; font-weight: 700; line-height: 1.25; }
.pc-river__intro { margin: -8px 0 16px; font-size: 16px; line-height: 24px; font-weight: 300; }

/* Labs: centred ruled title with a square mark, then description + circles */
.pc-labs { margin-top: 48px; }
.pc-ruled--labs { padding: 0 0 8px; }
.pc-labs__head { display: inline-flex; align-items: center; gap: 12px; }
.pc-labs__mark { width: 36px; height: 36px; font-size: 18px; flex: none; }
.pc-labs__body { align-items: flex-start; margin-bottom: 0; }
.pc-labs__circle { overflow: hidden; }
.pc-labs__circle img { width: 100%; height: 100%; object-fit: cover; }
.pc-labs__list li:last-child .pc-labs__circle { background: var(--pc-gray); }
@media (min-width: 1024px) {
    .pc-labs__body { margin-left: 0; }
    .pc-labs__text { padding-top: 64px; align-self: flex-start; }
    .pc-labs__list a { align-items: center; }
}

/* ---------- Drawer (hamburger): works on every screen size, laid out like pcmag.com's menu ---------- */
/* The parent hides the drawer from 1024px up, which made the hamburger do nothing on desktop. */
@media (min-width: 1024px) {
    .pcmag .mobile-nav { display: flex; }
    .pcmag .pc-burger { display: inline-flex; }
}
.pcmag .mobile-nav { width: min(92vw, 22rem); max-width: none; z-index: 1000; box-shadow: 8px 0 32px rgba(0, 0, 0, .18); }
.pcmag .mobile-nav-overlay { z-index: 999; background: rgba(0, 0, 0, .5); backdrop-filter: none; -webkit-backdrop-filter: none; }

.pcmag .mobile-nav__header { min-height: 64px; padding: 0 8px 0 16px; background: var(--pc-bg); border-bottom: 1px solid var(--pc-rule-strong); }
.pcmag .mobile-nav__brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.pcmag .mobile-nav__mark {
    display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 36px; height: 36px; padding: 0 6px;
    background: var(--pc-accent); color: var(--pc-on-accent); border-radius: 3px; box-shadow: 3px 3px 0 var(--pc-accent-shadow);
    font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
}
.pcmag .mobile-nav__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 700; font-stretch: 60%; }
.pcmag .mobile-nav__logo { display: block; width: auto; height: 32px; max-width: 160px; object-fit: contain; }
.pcmag .mobile-nav__close { width: 44px; height: 44px; justify-content: center; padding: 0; color: var(--pc-ink); }
.pcmag .mobile-nav__close i { margin: 0; font-size: 22px; width: auto; height: auto; }
.pcmag .mobile-nav__close:hover { color: var(--pc-accent); }

.pcmag .mobile-nav__content { padding: 0 0 16px; }
.pcmag .mobile-nav__search { position: relative; margin: 16px; }
.pcmag .mobile-nav__search input {
    box-sizing: border-box; width: 100%; height: 48px; padding: 0 48px 0 16px; font: inherit; font-size: 16px;
    color: var(--pc-ink); background: var(--pc-gray); border: 1px solid transparent; border-radius: 8px;
}
.pcmag .mobile-nav__search input:focus { outline: 0; border-color: var(--pc-ink); background: var(--pc-bg); }
.pcmag .mobile-nav__search button { position: absolute; top: 0; right: 0; width: 48px; height: 48px; color: var(--pc-ink); background: none; border: 0; cursor: pointer; font-size: 18px; }
.pcmag .mobile-nav__search button:hover { color: var(--pc-accent); }

.pcmag .mobile-nav__link { min-height: 52px; padding: 0 16px; font-size: 18px; font-weight: 640; font-stretch: 75%; }
.pcmag .mobile-nav__item { border-bottom: 1px solid var(--pc-rule-strong); }
.pcmag .mobile-nav__item:last-child { border-bottom: 0; }
.pcmag .mobile-nav__heading { margin: 24px 16px 4px; font-size: 14px; font-weight: 700; font-stretch: 75%; letter-spacing: .04em; text-transform: uppercase; color: var(--pc-muted); }
.pcmag .mobile-nav__menu--topics .mobile-nav__link { min-height: 44px; font-size: 16px; font-weight: 500; font-stretch: 100%; }

.pcmag .mobile-nav__footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--pc-bg); border-top: 1px solid var(--pc-rule-strong); }
.pcmag .mobile-nav__theme-toggle {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; font: inherit; font-size: 15px; font-weight: 600;
    color: var(--pc-ink); background: var(--pc-gray); border: 0; border-radius: 8px; cursor: pointer;
}
.pcmag .mobile-nav__cta { min-height: 48px; font-weight: 700; background: var(--pc-accent); border-color: var(--pc-accent); color: var(--pc-on-accent); }