/* =========================================================================
   NTAA Theme — editorial shell.
   Tokens live in style.css (:root). Product card styling comes from the
   NTAAwp plugin (.ntaa-*), whose own CSS defines its own --ntaa-* palette
   (scoped to .ntaa-roundup) rather than reading the theme's tokens — the
   override just below re-points every one of them at the theme's own
   accent/ink/surface/line tokens so the roundup card (rank badge, "top
   pick" ribbon, CTA button, star rating, meta text, borders, backgrounds)
   reads as part of this theme's warm cream/rust palette instead of the
   plugin's default cold blue/amber/slate defaults.
   ========================================================================= */
.ntaa-roundup{
  --ntaa-blue:var(--accent)!important;
  --ntaa-navy:var(--ink)!important;
  --ntaa-orange:var(--accent)!important;
  --ntaa-orange-2:var(--accent-hover)!important;
  --ntaa-border:var(--line)!important;
  --ntaa-ink:var(--ink)!important;
  --ntaa-ink-strong:var(--ink)!important;
  --ntaa-muted:var(--text-secondary)!important;
  --ntaa-subtle:var(--subtle)!important;
  --ntaa-surface:var(--surface)!important;
  --ntaa-surface-soft:var(--bg-soft)!important;
  --ntaa-border-soft:var(--line)!important;
  --ntaa-border-softer:var(--line)!important;
  --ntaa-danger:var(--danger)!important;
  --ntaa-danger-strong:var(--danger)!important;
  --ntaa-success:var(--success)!important;
  --ntaa-success-strong:var(--success)!important;
  --ntaa-score-border:var(--line-strong)!important;
  --ntaa-score-bg:var(--bg-soft)!important;
  --ntaa-score-ink:var(--ink)!important;
  /* Flat, single-color CTA button: cta-1/cta-2 intentionally point at the
     same token (not accent-hover) so the plugin's linear-gradient renders
     as a solid fill instead of a two-tone gradient. Using accent-hover here
     used to blend whatever accent color the Customizer produced with a
     hardcoded old rust-brown hover shade that never changed with it —
     harmless for the original brown default, but any other accent color
     picked in Customize > NTAA Theme produced a muddy, mismatched gradient.
     --accent-ink is now computed per accent color (see
     ntaa_theme_accent_ink() in inc/template-tags.php) instead of being a
     fixed light/dark-mode value, so the button text stays readable no
     matter which accent color is chosen. */
  --ntaa-cta-1:var(--accent)!important;
  --ntaa-cta-2:var(--accent)!important;
  --ntaa-cta-border:var(--accent)!important;
  --ntaa-cta-ink:var(--accent-ink)!important;
}

/* The plugin's own :hover (frontend.css) only dims the button 3% with no
   shadow, which barely reads as a state change now that the button is a
   flat fill instead of a gradient with a visible border ring. Strengthen it
   here rather than in the plugin so it's scoped to this theme's rendering
   of the card; the shadow is neutral black rather than accent-based so it
   sells the lift regardless of which accent color is picked. */
.ntaa-roundup .ntaa-button:hover{
  filter:brightness(.88);
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
/* Form controls never exceed their container (fixes the comment textarea
   overflowing narrow viewports and cutting card buttons). */
input,textarea,select,button{max-width:100%;font:inherit}
textarea{width:100%}
/* Wide tables/embeds inside post content scroll instead of widening the page. */
.entry-content :is(table){display:block;width:100%;overflow-x:auto}
.entry-content :is(iframe,video,pre){max-width:100%}
/* ...except a table that already sits inside its own scroll container (the
   Specifications Comparison table NTAAwp AI writes). Forcing display:block on
   that one did two bad things at once: it collapsed the real table layout so
   columns stopped lining up, and — combined with the container's own
   overflow-x being stripped by kses on save — it left a 700px-wide block with
   nothing to scroll it, so the whole page panned sideways on mobile instead.
   The container's width constraint is repeated here rather than left to the
   plugin's stylesheet because that one is only enqueued once a shortcode
   renders, i.e. potentially in the footer; this rule is in the <head> and so
   applies from first paint. The plugin's own sheet still owns the table's
   min-width, so the number is not duplicated across two projects. */
.entry-content .wp-block-table__scroll-container{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-content .wp-block-table__scroll-container>table{display:table;width:100%;margin:0;overflow:visible}
/* Same fix as the two rules above, for NTAAwp AI's Pros & Cons table
   (custom_section_html) — deliberately its own class rather than reusing
   .wp-block-table__scroll-container, which forces min-width:700px in the
   plugin's own stylesheet (sized for the multi-column Specifications
   Comparison table). This table only ever has 2 columns, so that min-width
   would force an unnecessary horizontal scroll on mobile instead of the
   full-width fit this table can actually achieve. */
.entry-content .ntaa-pc-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-content .ntaa-pc-scroll>table{display:table;width:100%;margin:0;overflow:visible}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;color:var(--ink);margin:0 0 .6em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--surface);padding:8px 16px;z-index:1000}
.skip-link:focus{left:8px}

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--accent);background:var(--surface);position:sticky;top:0;z-index:var(--z-header);
  transition:min-height var(--dur) var(--ease);
}
.site-header__inner{display:flex;align-items:center;gap:16px;min-height:64px;transition:min-height var(--dur) var(--ease)}
/* Sticky-compact state, toggled by JS past a scroll threshold. */
.site-header.is-scrolled .site-header__inner{min-height:52px}
.site-header.is-scrolled .site-branding .custom-logo{max-height:34px}
/* Customizer Display > "Sticky header" off — see inc/customizer.php. */
body.ntaa-static-header .site-header{position:static}
.site-branding .custom-logo{max-height:44px;width:auto;transition:max-height var(--dur) var(--ease)}
.site-title{font-weight:800;font-size:22px;color:var(--ink)}
.site-title:hover{text-decoration:none}

.site-nav{margin-left:auto}
.site-nav .menu{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.site-nav .menu a{display:flex;align-items:center;gap:5px;padding:10px 12px;color:var(--ink);font-weight:600;font-size:15px;border-radius:8px}
.site-nav .menu a:hover{color:var(--accent);text-decoration:none;background:var(--bg-soft)}
.site-nav .menu .current-menu-item>a{color:var(--accent)}
/* Chevron on top-level items that have a dropdown (WP core adds this class
   automatically to any parent <li>) — a visual hint that it's hoverable. */
.site-nav .menu .menu-item-has-children>a::after{
  content:"";width:7px;height:7px;margin-top:-3px;border:1.5px solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);opacity:.6;transition:transform var(--dur-fast) var(--ease);
}
.site-nav .menu li.is-open>a::after{transform:rotate(-135deg);margin-top:2px}
/* Submenus (depth 2) — opened/closed by JS (hover-intent, with a grace
   period before closing so a diagonal mouse path into the submenu doesn't
   flicker it shut). See assets/js/theme.js. */
.site-nav .menu li{position:relative}
.site-nav .menu .sub-menu{
  list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;min-width:220px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  display:block;opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-fast);
  z-index:var(--z-dropdown);
}
.site-nav .menu li.is-open>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.site-nav .sub-menu li+li{margin-top:1px}
.site-nav .sub-menu a{font-weight:500;font-size:14px;padding:9px 12px}
.site-nav .sub-menu .menu-item-has-children>a::after{margin-left:auto;margin-top:0;transform:rotate(-45deg)}
/* Open a dropdown with the keyboard (Tab), not just mouse hover-intent
   (assets/js/theme.js) — there was previously no way to reach a submenu
   without a mouse. */
.site-nav .menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}

/* ---------- Overflow "More" menu (desktop only) ----------
   When the primary menu has too many top-level items to fit the header's
   width, theme.js moves the trailing ones into a generated "Thêm ▾" item
   instead of letting their link text wrap onto two lines. The move is
   pure arithmetic in JS — nothing here uses overflow:hidden on .site-nav
   or .menu, because that would also clip every OTHER dropdown's
   position:absolute .sub-menu, not just the overflow panel's.

   flex-shrink:0 on every OTHER .site-header__inner child is what makes
   that arithmetic trustworthy: without it, an overflowing .site-nav
   doesn't just get measured, it also drags the row itself into
   negative space, and the flex algorithm's default shrink then takes
   width from every shrinkable sibling — including the logo — to
   compensate. theme.js reads each sibling's width to compute how much
   room the nav actually has; if the logo has already been squeezed by
   the time that read happens, the script credits stolen logo width as
   "available" for the nav, moves too few items into the panel, and
   leaves the logo permanently undersized (nothing ever un-shrinks it
   afterward). Pinning the siblings' width removes that feedback loop
   entirely — only .site-nav is ever allowed to give up space. */
  .site-branding{flex-shrink:0}
@media(min-width:769px){
  .ntaa-nav-fit .site-nav .menu>li>a{white-space:nowrap}
}
.site-nav .menu .nav-more>button{
  display:flex;align-items:center;gap:5px;padding:10px 12px;border:0;background:transparent;
  color:var(--ink);font:inherit;font-weight:600;font-size:15px;border-radius:8px;cursor:pointer;
}
.site-nav .menu .nav-more>button:hover{color:var(--accent);background:var(--bg-soft)}
.site-nav .menu .nav-more>button::after{
  content:"";width:7px;height:7px;margin-top:-3px;border:1.5px solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);opacity:.6;transition:transform var(--dur-fast) var(--ease);
}
.site-nav .menu .nav-more.is-open>button::after,
.site-nav .menu .nav-more:focus-within>button::after{transform:rotate(-135deg);margin-top:2px}
.site-nav .menu .nav-more.has-current>button{color:var(--accent)}
.site-nav .menu .nav-more>.sub-menu{max-height:min(70vh,520px);overflow-y:auto}
/* Accordion (not a flyout): a nested submenu inside the "Thêm" panel is
   always static and indented instead of floating open to the side — so it
   can never be clipped by the panel's own scrollbar and can never run off
   the right edge of the viewport. Same pattern the theme already uses for
   the mobile off-canvas menu below. */
.site-nav .menu .nav-more .sub-menu .sub-menu{
  position:static;opacity:1;visibility:visible;transform:none;
  border:0;box-shadow:none;padding:2px 0 6px 14px;min-width:0;background:transparent;
}
.site-nav .menu .nav-more .sub-menu .menu-item-has-children>a::after{display:none}
.site-nav .menu .nav-more .sub-menu>li.menu-item-has-children>a{color:var(--muted);font-weight:600}

.nav-toggle{display:none;flex-direction:column;gap:5px;width:40px;height:40px;border:0;background:transparent;cursor:pointer;padding:8px}
.nav-toggle span{height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav-overlay{display:none} /* only used for the off-canvas mobile menu, see the max-width:768px block */

/* ---------- Dark mode toggle ---------- */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);cursor:pointer;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* ---------- Affiliate disclaimer ---------- */
.ntaa-post-disclosure{background:transparent;padding:8px 0;font-size:12px;line-height:1.5}
.ntaa-post-disclosure__text{margin:0;color:var(--muted)}
.ntaa-post-disclosure__link{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}
.ntaa-post-disclosure__link:hover{text-decoration:underline}
.ntaa-post-disclosure__promo{margin:4px 0 0;color:var(--muted);font-size:12px}
.ntaa-post-disclosure__promo a{color:var(--accent);text-decoration:none;font-weight:600}
.ntaa-post-disclosure__promo a:hover{text-decoration:underline}

/* ---------- Layout ---------- */
.site-main{display:block}
.content-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;padding-top:28px;padding-bottom:48px}
.content-layout--full{grid-template-columns:1fr}
.content-main{min-width:0}
.sidebar{min-width:0}

/* Customizer: sidebar position */
.ntaa-sidebar-left .content-layout{grid-template-columns:340px 1fr}
.ntaa-sidebar-left .content-main{order:2}
.ntaa-sidebar-left .sidebar{order:1}
.ntaa-sidebar-none .content-layout{grid-template-columns:1fr}

/* Customizer: archive/list layout — grid variant (image-on-top cards) */
.ntaa-layout-grid .review-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ntaa-layout-grid .review-item{grid-template-columns:1fr;padding:0;overflow:hidden}
.ntaa-layout-grid .review-thumb{border-radius:0;background:var(--bg-soft)}
.ntaa-layout-grid .review-img{height:190px;object-fit:contain}
.ntaa-layout-grid .review-body{padding:14px 16px 18px}
.ntaa-layout-grid .review-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ntaa-sidebar-none.ntaa-layout-grid .review-list{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){
  .ntaa-layout-grid .review-list{grid-template-columns:1fr}
}

.section-title{font-size:22px;font-weight:700;margin:8px 0 18px;position:relative;padding-bottom:8px}
.section-title::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;background:var(--accent);border-radius:3px}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:#c4c8cf}
.breadcrumb .current{color:var(--ink)}

/* ---------- Cards / list ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-header{padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;margin:0}

/* ---------- Plain editorial list (front page "Latest") ---------- */
.plain-list{border-top:2px solid var(--ink)}
.plain-item{padding:18px 0;border-bottom:1px solid var(--line)}
.plain-date{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.plain-title{margin:0;font-size:19px;font-weight:700;line-height:1.4}
.plain-title a{color:var(--ink)}
.plain-title a:hover{color:var(--accent);text-decoration:none}
/* Compact variant used in the 3-up homepage columns and category lists —
   same idea, smaller type so three columns of it fit side by side. */
.plain-list--compact .plain-item{padding:13px 0}
.plain-list--compact .plain-title{font-size:15.5px}
/* Optional short description (card-plain.php's excerpt_words arg) — only
   the front page's image-less 2-column category layout turns it on. */
.plain-excerpt{margin:6px 0 0;color:var(--text-secondary);font-size:14px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Homepage: top 3-column (Latest / Featured / Trending) ---------- */
.home-top-grid{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:36px;padding:32px 0 44px}
.section-title-alt{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;color:var(--ink)}

/* ---------- Magazine card (image + date + title + excerpt + byline) ---------- */
/* object-fit:contain (not cover) on purpose — these thumbnails often come
   from the linked product's own photo (a closeup on white, not a wide
   lifestyle shot), and cropping that with `cover` cuts products off
   awkwardly. Letterboxing on the soft background looks cleaner for
   whatever aspect ratio the source image happens to be. */
/* White, not --bg-soft, in both color modes: product photos are shot on
   white, so the letterbox bands either side of a narrow product disappear
   into the frame instead of reading as empty beige strips. */
.mag-card__media{display:block;border-radius:var(--radius);overflow:hidden;background:#fff;margin-bottom:14px}
.mag-card__img{width:100%;height:220px;object-fit:contain}
.mag-card__date{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.mag-card__title{margin:0 0 8px;font-size:20px;font-weight:700;line-height:1.3}
.mag-card__title a{color:var(--ink)}
.mag-card__title a:hover{color:var(--accent);text-decoration:none}
.mag-card__excerpt{margin:0 0 10px;color:var(--text-secondary);font-size:15px;line-height:1.55}
.mag-card__byline{margin:0;font-size:13px;color:var(--muted)}
.mag-card__byline strong{color:var(--ink)}
/* The single featured card in the homepage top section runs a bit larger. */
.home-featured-col .mag-card__img{height:260px}
.home-featured-col .mag-card__title{font-size:24px}

/* ---------- Category magazine sections ---------- */
/* Each category section opens with a heavy ink rule (editorial-magazine
   style) — the one above the first section is also what separates it from
   the 3-column top block. --ink rather than --accent on purpose: the accent
   is kept for things that can be clicked (buttons, CTAs), and --ink flips
   with dark mode on its own. The rule sits on the .container so it spans
   the content width, not the full viewport. */
.cat-section{padding:0 0 44px}
/* Drawn by a ::before inside the container's padding, not a border on the
   container itself, so the rule lines up with the content edge instead of
   overhanging it by the container's 16px side padding. */
.cat-section>.container::before{content:"";display:block;border-top:3px solid var(--ink);margin-bottom:22px}
.cat-section__title{font-size:30px;font-weight:800;margin:0 0 8px;letter-spacing:-.01em}
.cat-section__subcats{margin:0 0 24px;font-size:14px;color:var(--muted)}
.cat-section__subcats a{color:var(--muted);text-decoration:underline}
.cat-section__subcats a:hover{color:var(--accent)}
.cat-section__subcats strong{color:var(--ink)}

.cat-grid{display:grid;gap:28px}
.cat-grid--3{grid-template-columns:repeat(3,1fr)}
.cat-grid--4{grid-template-columns:repeat(4,1fr)}
.cat-grid .mag-card__img{height:170px}

.cat-variant-a{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start}
.cat-feature-list .plain-list{border-top:0}
/* Hairline under the section's 3px rule — same reason as .cat-list-2col below. */
.cat-variant-a .cat-feature-list{border-top:1px solid var(--line)}
.cat-feature-list .plain-item:first-child{padding-top:0}

.cat-list-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
/* A hairline, not the 2px ink rule the Latest list uses — right under the
   section's own 3px rule a second heavy line read as a double border. */
.cat-list-2col .plain-list{border-top:1px solid var(--line)}

@media(max-width:991px){
  .home-top-grid{grid-template-columns:1fr;gap:32px}
  .cat-grid--3,.cat-grid--4{grid-template-columns:repeat(2,1fr)}
  .cat-variant-a{grid-template-columns:1fr;gap:28px}
}
@media(max-width:600px){
  .cat-grid--3,.cat-grid--4{grid-template-columns:1fr}
  .cat-list-2col{grid-template-columns:1fr}
  .cat-section__title{font-size:24px}
}

.review-list{display:flex;flex-direction:column;gap:18px}
.review-item{position:relative;display:grid;grid-template-columns:200px 1fr;gap:18px;padding:16px;overflow:hidden}
.review-thumb{display:block;border-radius:8px;overflow:hidden;background:var(--bg-soft)}
.review-img{width:100%;height:160px;object-fit:contain}
.review-body{display:flex;flex-direction:column;gap:8px}
.review-title{font-size:20px;font-weight:700;margin:0}
.review-title a{color:var(--ink)}
.review-title a:hover{color:var(--accent);text-decoration:none}
.review-meta{font-size:13px;color:var(--muted);display:flex;gap:12px}
.review-desc{margin:0;color:var(--text-secondary);font-size:15px}
.ribbon{position:absolute;top:12px;left:0;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;padding:4px 12px 4px 10px;border-radius:0 4px 4px 0;z-index:2}
.ribbon:hover{text-decoration:none;color:#fff}

.badge{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.badge:hover{text-decoration:none;color:#fff}

/* ---------- Single ---------- */
.single-article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.article-title{font-size:34px;margin:6px 0 12px;text-transform:capitalize}
.article-meta{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px;align-items:center}
.article-meta .author-name{color:var(--accent)}
/* Rank Math breadcrumb adopts the theme breadcrumb styling */
.breadcrumb-rankmath{font-size:13px;color:var(--muted);margin-bottom:14px}
.breadcrumb-rankmath a{color:var(--muted)}
.breadcrumb-rankmath a:hover{color:var(--accent)}
.breadcrumb-rankmath .separator{color:#c4c8cf;margin:0 6px}
.article-featured{margin:0 0 24px}
.article-featured img{border-radius:10px;width:100%;object-fit:cover}

/* Long-form content typography */
.entry-content{font-size:17px}
.entry-content p{margin:0 0 1.1em}
.entry-content h2{font-size:26px;margin:1.6em 0 .6em}
.entry-content h3{font-size:21px;margin:1.4em 0 .5em}
.entry-content img{border-radius:8px;margin:1em auto}
.entry-content a{color:var(--accent)}
.entry-content ul,.entry-content ol{padding-left:1.4em;margin:0 0 1.1em}
.entry-content li{margin-bottom:.4em}
.entry-content blockquote{margin:1.4em 0;padding:.4em 0 .4em 20px;border-left:5px solid var(--accent);font-style:italic;color:var(--text-secondary)}
.entry-content table{width:100%;border-collapse:collapse;margin:1.2em 0}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px;text-align:left}
.page-links{margin-top:1.2em;font-weight:600}

/* ---------- Editorial callouts ----------
   Add ntaa-callout + a variant class to any block in the editor (e.g. a
   Group block's "Additional CSS class(es)" field): ntaa-callout--info,
   --tip, --warning, or --disclosure. */
.ntaa-callout{border-radius:var(--radius-sm);padding:14px 18px;margin:1.2em 0;font-size:15px;line-height:1.6;border:1px solid transparent}
.ntaa-callout p:last-child{margin-bottom:0}
.ntaa-callout--info{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.ntaa-callout--tip{background:var(--success-bg);color:var(--success);border-color:color-mix(in srgb,var(--success) 25%,transparent)}
.ntaa-callout--warning{background:var(--warning-bg);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 25%,transparent)}
.ntaa-callout--disclosure{background:var(--bg-soft);color:var(--muted);border-color:var(--line);font-size:13px}

/* Spec table: add class "ntaa-specs" (or the Gutenberg table block style
   "is-style-specs") to a table for a compact label/value layout instead of
   the default full-width striped table. */
.entry-content table.ntaa-specs,.entry-content table.is-style-specs{width:auto;min-width:280px}
.entry-content table.ntaa-specs th,.entry-content table.is-style-specs th{background:var(--bg-soft);text-align:left;width:35%;font-weight:700;color:var(--ink)}
.entry-content table.ntaa-specs td,.entry-content table.is-style-specs td{color:var(--text-secondary)}

/* ---------- Table of Contents (posts only) — compact ---------- */
.ntaa-toc{
  border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:0 0 22px;
  background:linear-gradient(180deg,var(--bg-soft) 0%,var(--surface) 55%);box-shadow:var(--shadow);
}
.toc-head{display:flex;align-items:center;gap:12px;padding:11px 14px}
.toc-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--surface);
}
.toc-icon svg{width:19px;height:19px}
.toc-title{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.2}
.toc-stats{display:flex;gap:13px;margin-top:2px;font-size:12.5px;color:var(--muted)}
.toc-stat{display:inline-flex;align-items:center;gap:5px}
.toc-stat svg{width:13px;height:13px;opacity:.7}
.toc-progress{height:3px;background:var(--line)}
.toc-progress span{display:block;height:100%;width:18%;background:var(--ink);transition:width .2s}

.toc-list{list-style:none;margin:0;padding:6px}
.toc-item a{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:7px;color:var(--ink);text-decoration:none}
.toc-item a:hover{background:var(--bg-soft)}
.toc-num{
  flex:0 0 auto;min-width:25px;height:23px;padding:0 5px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:var(--bg-soft);color:var(--muted);
}
.toc-text{font-size:14.5px;line-height:1.35}
/* top-level rows */
.toc-top>a{font-weight:600}
.toc-top .toc-num{background:var(--ink);color:var(--surface)}
.toc-top .toc-text{color:var(--ink)}
/* sub rows */
.toc-sub>a{padding-left:14px}
.toc-sub .toc-text{color:var(--text-secondary);font-size:13.5px}
/* active (scrollspy) + first lead */
.toc-top.is-active>a,.ntaa-toc:not(.is-active-set) .toc-top:first-of-type>a{
  background:var(--bg-soft);
}
/* collapsed state */
.is-collapsed .toc-extra{display:none}

.toc-footer{display:flex;justify-content:center;padding:2px 10px 8px}
.toc-toggle{
  border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:13px;
  padding:6px 4px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.toc-toggle svg{width:16px;height:16px;transition:transform .2s}
.toc-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

@media(max-width:768px){
  .toc-icon{width:34px;height:34px;border-radius:9px}
  .toc-title{font-size:16px}
  .toc-text{font-size:14px}
}

/* ---------- Author box ---------- */
/* .author-avatar/.author-info have no explicit sizing, so a long bio's
   preferred (unwrapped) width overflows the row and the default
   flex-shrink:1 on every item — including the <img>, a replaced element
   that can shrink below its own intrinsic size — squeezes the avatar down
   to compensate, worse the longer the bio runs. flex-shrink:0 + a fixed
   width/height on the avatar removes it from that negative-space split
   entirely; min-width:0 on .author-info is the standard fix that lets a
   flex item's text wrap instead of forcing the row to overflow/shrink. */
.author-box{display:flex;gap:18px;align-items:flex-start;padding:20px;margin-top:28px}
.author-avatar{flex-shrink:0}
.author-box .rounded{display:block;width:80px;height:80px;border-radius:50%}
.author-info{flex:1 1 auto;min-width:0}
.author-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.author-box .author-name{font-size:18px;font-weight:700;color:var(--ink)}
.author-bio{margin:.4em 0 0;color:var(--text-secondary);font-size:15px}
.author-expertise{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.author-socials{display:flex;gap:14px;margin-top:10px;font-size:13px}
.author-socials a{color:var(--muted);font-weight:600}
.author-socials a:hover{color:var(--accent)}

/* Stacked and centered below the tablet breakpoint — a side-by-side row
   has less width to work with here, so the card reads as a compact,
   centered identity block instead. Placed AFTER the base rules above
   (not folded into the earlier shared 768px query near the TOC section)
   so these overrides actually win the cascade — same selector + same
   specificity resolves by source order, and a media query being "true"
   does not move its rules ahead of an unconditional rule that comes
   later in the file. The kicker becomes a small accent pill (reusing the
   site's existing badge look, via tokens so it still inverts correctly
   in dark mode) to anchor the centered header. The bio stays LEFT-aligned
   on purpose — multiple lines of centered prose are harder to read
   line-by-line than one left-aligned block — and the expertise/social
   rows are flex containers of their own, so the inherited text-align has
   no effect on them and they naturally stay left-starting too. */
@media(max-width:768px){
  .author-box{flex-direction:column;align-items:center;text-align:center}
  .author-box .rounded{width:72px;height:72px;border:3px solid var(--surface);box-shadow:var(--shadow-sm)}
  .author-info{width:100%}
  .author-kicker{display:inline-block;margin-bottom:6px;padding:4px 12px;color:var(--accent-ink);background:var(--accent);border-radius:999px}
  .author-box .author-name{display:block}
  .author-bio{text-align:left;margin-top:.5em}
}

/* ---------- Related ---------- */
.related{margin-top:36px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.related-thumb{display:block;background:var(--bg-soft)}
.related-thumb img{width:100%;height:170px;object-fit:contain}
.related-title{font-size:16px;font-weight:700;margin:0;padding:12px 14px}
.related-title a{color:var(--ink)}
.related-title a:hover{color:var(--accent);text-decoration:none}

/* ---------- Sidebar widgets ---------- */
.widget{margin-bottom:24px}
.widget-search{padding:14px}
.sidebar-search{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.sidebar-search input{flex:1;border:0;padding:10px 16px;font:inherit;font-size:14px;outline:none;background:transparent}
.sidebar-search button{border:0;background:transparent;color:var(--muted);padding:0 14px;cursor:pointer;display:flex;align-items:center}
.sidebar-search button:hover{color:var(--accent)}
.widget-title{margin:0}
.picks-list{list-style:none;margin:0;padding:10px}
.picks-item{display:flex;gap:14px;padding:12px 10px;border-radius:8px}
.picks-item+.picks-item{border-top:1px solid var(--line)}
.picks-item:hover{background:var(--bg-soft)}
.picks-thumb{flex:0 0 96px}
.picks-img{width:96px;height:76px;object-fit:contain;border-radius:8px;background:var(--surface)}
.picks-title{font-weight:600;color:var(--ink);font-size:16px;line-height:1.4;display:block}
.picks-title:hover{color:var(--accent);text-decoration:none}
.picks-meta{font-size:13px;color:var(--muted)}

/* ---------- Archive / empty ---------- */
.archive-head{margin-bottom:20px}
.archive-title{font-size:28px;margin:6px 0}
.archive-desc{color:var(--text-secondary)}
.content-none{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-soft);margin-top:48px;font-size:14px;color:var(--muted)}
.footer-top{display:grid;grid-template-columns:1.2fr 2fr;gap:40px;padding:48px 16px}
.footer-brand{max-width:320px}
.footer-logo .custom-logo{max-height:36px;width:auto}
.footer-logo-text{display:block;font-size:20px;font-weight:800;color:var(--ink)}
.footer-desc{margin:14px 0 0;line-height:1.6}
.footer-brand .social-links{margin-top:18px}
.social-links{display:flex;gap:10px}
.social-links a{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.social-links a:hover{color:var(--accent);border-color:var(--accent)}

.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer-col__title{margin:0 0 14px;font-size:14px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.03em}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--muted)}
.footer-col a:hover{color:var(--accent)}
.footer-menu .menu{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.footer-menu a{color:var(--muted)}
.footer-menu a:hover{color:var(--accent)}

.footer-bottom{border-top:1px solid var(--line)}
.footer-bottom__inner{padding:18px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.copyright{margin:0;font-size:13px}
.footer-credit{margin:0;font-size:13px}
.footer-credit a{color:var(--muted)}
.footer-credit a:hover{color:var(--accent)}

@media(max-width:900px){
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .footer-cols{grid-template-columns:1fr;gap:28px}
}

/* ---------- Responsive ---------- */
@media(max-width:991px){
  .content-layout{grid-template-columns:1fr;gap:28px}
  /* The left-sidebar variant needs its own reset here: `.ntaa-sidebar-left
     .content-layout` is a more specific selector than the plain
     `.content-layout` above, so it kept winning inside this media query and
     the layout stayed two-column on phones — the 340px sidebar track held
     its full width while the content track was squeezed to 0px, pushing the
     whole page sideways by ~270px at 320px wide, with or without any wide
     content in the article. The order reset puts the article above the
     sidebar, matching what the right-sidebar layout already does on mobile. */
  .ntaa-sidebar-left .content-layout{grid-template-columns:1fr}
  .ntaa-sidebar-left .content-main{order:0}
  .ntaa-sidebar-left .sidebar{order:0}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  body{font-size:16px}
  .nav-toggle{display:flex;order:-1}
  /* True off-canvas panel sliding in from the right, above a dimmed overlay. */
  .site-nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:var(--surface);
    transform:translateX(100%);transition:transform var(--dur) var(--ease);
    overflow:auto;margin:0;padding-top:64px;box-shadow:var(--shadow-lg);z-index:var(--z-mobile-nav);
  }
  .nav-open .site-nav{transform:translateX(0)}
  .nav-overlay{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:calc(var(--z-mobile-nav) - 1);
    opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease);
  }
  .nav-open .nav-overlay{opacity:1;visibility:visible}
  .site-nav .menu{flex-direction:column;gap:0;padding:8px}
  .site-nav .menu .sub-menu{
    position:static;display:block;border:0;box-shadow:none;padding-left:14px;
    opacity:1;visibility:visible;transform:none;
  }
  .site-nav .menu .menu-item-has-children>a::after{display:none} /* no hover state to hint at on mobile — submenus are always expanded */
  .site-nav{margin-left:0}
  body.nav-open{overflow:hidden}
  .article-title{font-size:26px}
  .review-item{grid-template-columns:120px 1fr;gap:12px}
  .review-img{height:110px}
  .review-title{font-size:17px}
  .related-grid{grid-template-columns:1fr}
}

/* ---------- Scroll-reveal ---------- */
[data-animate]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-animate].is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-animate]{opacity:1;transform:none;transition:none}
}

/* ---------- Ratings ---------- */
.ntaa-stars{display:inline-flex;gap:1px;color:var(--accent);font-size:16px;line-height:1}
.ntaa-stars .star-empty{color:var(--line-strong)}
.ntaa-rating-count{margin-left:6px;font-size:13px;color:var(--muted)}
.ntaa-comment-rating{margin-bottom:6px}
.comment-form-rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ntaa-rating-input{display:inline-flex;flex-direction:row-reverse;gap:2px}
.ntaa-rating-input input{position:absolute;opacity:0;width:1px;height:1px}
.ntaa-rating-input label{cursor:pointer;font-size:22px;color:var(--line-strong);padding:0 1px}
.ntaa-rating-input input:checked ~ label,
.ntaa-rating-input label:hover,
.ntaa-rating-input label:hover ~ label{color:var(--accent)}
.ntaa-rating-input label::before{content:"★"}

/* ---------- Post hero rating summary ---------- */
.post-rating-summary{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-left:8px}

/* ---------- Widgets ---------- */
.ntaa-widget-categories{list-style:none;margin:0;padding:8px}
.ntaa-widget-categories li a{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;color:var(--ink)}
.ntaa-widget-categories li a:hover{background:var(--bg-soft);text-decoration:none}
.ntaa-cat-icon{flex:0 0 auto}
.ntaa-cat-name{flex:1}
.ntaa-cat-count{color:var(--muted);font-size:13px}

.ntaa-widget-tags{display:flex;flex-wrap:wrap;gap:8px;padding:14px}
.ntaa-tag-pill{background:var(--bg-soft);color:var(--text-secondary);font-size:13px;padding:5px 12px;border-radius:999px}
.ntaa-tag-pill:hover{background:var(--accent);color:#fff;text-decoration:none}

.ntaa-widget-popular{list-style:none;margin:0;padding:8px}
.ntaa-widget-popular li{display:flex;gap:12px;padding:10px;border-radius:8px}
.ntaa-widget-popular li:hover{background:var(--bg-soft)}
.ntaa-popular-thumb{flex:0 0 64px;border-radius:6px;overflow:hidden;background:var(--surface)}
.ntaa-popular-thumb img{width:64px;height:48px;object-fit:contain}
.ntaa-popular-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.ntaa-popular-title{font-weight:600;color:var(--ink);font-size:14px;line-height:1.35}
.ntaa-popular-title:hover{color:var(--accent);text-decoration:none}
.ntaa-popular-meta{font-size:12px;color:var(--muted)}

.ntaa-widget-cta{padding:16px}
.ntaa-cta-title{margin:0 0 6px;font-size:16px}
.ntaa-cta-desc{margin:0 0 12px;color:var(--text-secondary);font-size:14px}
.btn-cta{display:block;width:100%;box-sizing:border-box;text-align:center;background:var(--accent);color:#fff;padding:14px 18px;border-radius:8px;font-weight:600;font-size:15px}
.btn-cta:hover{background:var(--accent-hover);color:#fff;text-decoration:none}
.ntaa-widget-cta--center{text-align:center}
.ntaa-widget-cta--right{text-align:right}

.ntaa-widget-newsletter{padding:16px}
.ntaa-newsletter-title{margin:0 0 6px;font-size:16px}
.ntaa-newsletter-desc{margin:0 0 12px;color:var(--text-secondary);font-size:14px}
.ntaa-newsletter-form{display:flex;flex-direction:column;gap:8px}
.ntaa-newsletter-form input{border:1px solid var(--line);border-radius:8px;padding:9px 12px;font:inherit;font-size:14px}
.ntaa-newsletter-form button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px;font-weight:600;font-size:14px;cursor:pointer}
.ntaa-newsletter-form button:hover{background:var(--accent-hover)}

/* ---------- Deals page ---------- */
.ntaa-deals-list{display:flex;flex-direction:column;gap:22px;margin-top:26px}

/* Every card used to sit on --surface (#fff) over a --bg of #faf6ef — about a
   2% difference — with a --line border and a cold blue-grey shadow, none of
   which register on a warm cream page. The result was a stack of cards with no
   edge and nothing separating one product from the next. The wrapper now draws
   the edge itself: a real border, a warm shadow, and a coloured left rail whose
   weight follows the discount, which is what this page is ordered by. */
.ntaa-deal-item{
  display:flex;flex-direction:column;
  border:1px solid var(--line-strong);
  border-left:5px solid var(--line-strong);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 2px 10px rgba(127,75,48,.07);
  overflow:hidden;
  transition:box-shadow .18s ease,border-color .18s ease;
}
.ntaa-deal-item:hover{box-shadow:0 6px 20px rgba(127,75,48,.13)}

/* The card inside already draws its own border/radius/shadow; with the wrapper
   now drawing those, a second set reads as a box inside a box. The class is
   .ntaa-product-card — .ntaa-product on its own does not exist in the plugin's
   markup, so a rule written against it silently matched nothing. */
.ntaa-deal-item .ntaa-product-card{
  border:0;border-radius:0;box-shadow:none;background:transparent;
}
.ntaa-deal-item .ntaa-roundup-single{margin:0}

/* Discount tiers, set by ntaa_deal_tier() — 30%+, 15-29%, under 15%. */
.ntaa-deal-item.is-strong{border-left-color:var(--accent);border-color:var(--accent)}
.ntaa-deal-item.is-good{border-left-color:var(--accent-hover)}
.ntaa-deal-item.is-mild{border-left-color:var(--line-strong)}
.ntaa-deal-item.is-strong{box-shadow:0 3px 14px rgba(127,75,48,.14)}

@media (prefers-reduced-motion:reduce){.ntaa-deal-item{transition:none}}

/* "See More Deals" — appends the next batch in place, see assets/js/theme.js
   and inc/deals.php; replaces the old /deals/2/ pagination links. */
.ntaa-deals-more-wrap{margin-top:28px;text-align:center}
.ntaa-deals-more{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:220px;height:46px;padding:0 24px;
  border:0;border-radius:8px;
  background:var(--accent);color:#fff;
  font-weight:600;font-size:15px;cursor:pointer;
  transition:background .15s ease,opacity .15s ease;
}
.ntaa-deals-more:hover{background:var(--accent-hover)}
.ntaa-deals-more:disabled,.ntaa-deals-more.is-loading{opacity:.65;cursor:default}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));width:44px;height:44px;border:0;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-lg);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:var(--z-toast);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{color:var(--accent)}
@media(max-width:768px){.back-to-top{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:40px;height:40px}}