/* ═══════════════════════════════════════════════════════════════════════════
   skinrevu-identity.css — SkinRevu identity restyle (package 130, 25 Sep 2026)
   Source: design board 04 "skinrevu.co restyled" (identity review, 20 Sep 2026).

   Loaded LAST on every public page (after skinrevu.css and the page's own
   <style>), so it wins at equal specificity.

   LOOK ONLY. It changes colour, type, borders, corners and spacing. It does NOT
   change the grid: column widths and breakpoints stay exactly as in
   skinrevu.css (desktop 210 / 618 / 260). Anything that sizes the header is
   scoped to the same breakpoints skinrevu.css uses, because a plain rule here
   would override the tablet/phone header rules below 1050px.
   To undo the whole restyle: remove the <link> to this file.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #1C1714;
  --mid: #5E5349;
  --light: #E5DED3;
  --lighter: #F0EAE1;
  --red: #C63F28;          /* vermilion — deepened from #D94F2E for AA contrast */
  --teal: #54687E;         /* slate */
  --teal-lt: #EDF1F5;
  --radius: 4px;
}

/* ── Type: Figtree everywhere; headings 700/800, tight tracking ─────────── */
body {
  font-family: 'Figtree', system-ui, sans-serif;
  background-image: none;              /* flat ground, no dot pattern */
  color: #1C1714;
}
h1, h2, h3, h4, .section-title, .widget-title, .pc-title, .pd-section-title {
  font-family: 'Figtree', system-ui, sans-serif;
}
h1, h2, .section-title { letter-spacing: -0.025em; }
a { text-decoration-thickness: 1px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
#site-header {
  background: #FFFFFF;
  border-bottom: 1px solid #DFD6C8;
  box-shadow: none;
}
.logo { gap: 10px; }
.logo-descriptor {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5E5349;
  line-height: 1.5;
  white-space: nowrap;
}
@media (min-width: 1051px) {
  .header-inner { height: 76px; }
  .logo-img { height: 52px; }
  .logo { padding-right: 18px; margin-right: 14px; border-right: 1px solid #E5DED3; }
}
/* (132) "Skincare reviews" now shows at every desktop width: with five menu
   links the header has room (measured: no overflow from 1051px up; the search
   box narrows to 291px at 1051px, 320px from 1080px). */
@media (max-width: 1050px) {
  .logo-img { height: 46px; }
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #3A322C;
  border-radius: 0;
  letter-spacing: 0;
}
.nav-link:hover { color: #1C1714; background: transparent; }
.nav-link.active { color: #1C1714; box-shadow: inset 0 -2px 0 #C63F28; }

.search-field {
  background: #F9F6F1;
  border: 1px solid #DFD6C8;
  border-radius: 3px;
}
.search-field:focus { border-color: #C63F28; background: #FFFFFF; }

.social-pill { border-radius: 3px; }
.social-pill.patreon {
  background: #C63F28;
  border-color: #C63F28;
  color: #FFFFFF;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
}
.social-pill.patreon:hover { background: #A8341F; border-color: #A8341F; color: #FFFFFF; }

/* ── Live ticker ─────────────────────────────────────────────────────────── */
.live-ticker { background: #F5EFE8; border-bottom: 1px solid #E5DED3; height: 34px; }
.live-ticker-dot {
  width: 5px; height: 5px; min-width: 5px;
  background: #C63F28;
  animation: identityPulse 2s infinite;
}
@keyframes identityPulse {
  0%   { box-shadow: 0 0 0 0 rgba(198,63,40,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(198,63,40,0); }
  100% { box-shadow: 0 0 0 0 rgba(198,63,40,0); }
}
.live-ticker-text { font-size: 12.5px; font-weight: 500; color: #5E5349; }

/* ── Widgets (left and right columns) ───────────────────────────────────── */
.widget {
  background: #FFFFFF;
  border: 1px solid #E5DED3;
  border-radius: 4px;
  box-shadow: none;
}
.widget-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1C1714;
  padding: 12px 14px;
  border-bottom: 1px solid #E5DED3;
}
.widget-title::before { width: 3px; height: 14px; border-radius: 0; background: #C63F28; }
#widget-journal .widget-title::before { background: #54687E; }   /* slate, as on the board */
.widget-more-link { color: #C63F28; font-weight: 600; }

/* Trending brands */
.brand-row { border-bottom-color: #F0EAE1; }
/* (133) square rank badges in the original colours: 1–2 red, the rest ink,
   light numerals on both. `.brand-rank.top` is named explicitly because
   skinrevu.css colours it with a two-class selector, which beats one class. */
.brand-rank, .brand-rank.top {
  width: 22px; height: 22px;
  border-radius: 3px;
  border: 0;
  font-size: 10.5px;
}
.brand-rank     { background: #1C1714; color: #F5EFE8; }
.brand-rank.top { background: #C63F28; color: #FFFFFF; }
.brand-name { font-size: 13px; font-weight: 600; }
.brand-score { color: #C63F28; font-size: 12.5px; }

/* Top ingredients */
.ing-pill {
  border-radius: 0;
  background: #F5EFE8;
  border: 1px solid #E5DED3;
  color: #1C1714;
  font-size: 12px;
  font-weight: 500;
}
.ing-pill:hover, .ing-pill.active { background: #FFFFFF; border-color: #C63F28; color: #1C1714; }

/* (133) Skin Type Quiz banner (index.html): the original teal banner, squared
   and slimmer (chosen by Slav from the 133 mock-up, option C). */
.quiz-cta {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #1A3A3A 0%, #2d5454 100%);
  border: 0;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 22px;
  color: #F5EFE8;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.quiz-cta::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(198,63,40,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.quiz-cta-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  background: #C63F28;
  border-radius: 4px;
  position: relative;
}
.quiz-cta-mark::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #1C1714;
}
.quiz-cta-text { display: block; flex: 1; min-width: 0; position: relative; z-index: 1; }
.quiz-cta-kicker {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,239,232,0.7);
  margin-bottom: 2px;
}
.quiz-cta-title { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; color: #F5EFE8; }
.quiz-cta-sub   { display: block; font-size: 13px; line-height: 1.45; color: rgba(245,239,232,0.85); margin-top: 2px; }
.quiz-cta-btn {
  flex-shrink: 0;
  background: #C63F28; color: #FFFFFF;
  border-radius: 3px;
  padding: 9px 16px;
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  position: relative; z-index: 1;
}
.quiz-cta:hover .quiz-cta-btn { background: #A8341F; }
@media (max-width: 480px) {
  .quiz-cta { gap: 12px; padding: 12px 14px; }
  .quiz-cta-mark { display: none; }
  .quiz-cta-sub { font-size: 12.5px; }
}

/* (133) SkinRx.help card (index.html sidebar): the original purple card and
   red button, with square corners. Two classes so it beats `.widget`. */
.widget.rx-promo {
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #3A2E4F 0%, #5B4A7D 100%);
  border: 1px solid #3A2E4F;
  border-radius: 4px;
  color: #F5EFE8;
  text-decoration: none;
  padding: 15px 16px;
}
.widget.rx-promo::after {
  content: '';
  position: absolute;
  top: -25px; right: -25px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(198,63,40,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.rx-promo-kicker, .rx-promo-title, .rx-promo-text, .rx-promo-foot { display: block; position: relative; z-index: 1; }
.rx-promo-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; margin-bottom: 6px; }
.rx-promo-title  { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 7px; color: #F5EFE8; }
.rx-promo-text   { font-size: 12px; line-height: 1.55; opacity: 0.85; margin-bottom: 12px; }
.rx-promo-btn {
  display: inline-block; position: relative; z-index: 1;
  background: #C63F28; color: #FFFFFF;
  border-radius: 3px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 700;
}
.widget.rx-promo:hover .rx-promo-btn { background: #A8341F; }
.rx-promo-foot   { font-size: 10.5px; opacity: 0.62; margin-top: 10px; }

/* ── Section heads ───────────────────────────────────────────────────────── */
.section-title { font-size: 20px; font-weight: 800; color: #1C1714; }
.section-title::before { display: none; }
.section-link { color: #C63F28; font-weight: 600; }

/* ── Review cards (built by skinrevu.js) ─────────────────────────────────── */
.product-card {
  background: #FFFFFF;
  border: 1px solid #E5DED3;
  border-radius: 4px;
}
.product-card:hover { background: #FFFFFF; border-color: #D6CBBB; }
.pc-divider { background: #F0EAE1; }        /* was a 2px near-black strip; same width, light */
.pc-brand {
  color: #5E5349;
  font-size: 10.5px;
  letter-spacing: 0.12em;
}
.pc-cat {
  background: #EDF1F5;
  color: #54687E;
  border-radius: 0;
  font-weight: 600;
}
.pc-date { color: #8A7D70; }
.pc-verified { background: #E4F0E8; color: #2E6B4F; border-radius: 0; }
.pc-title { font-weight: 700; letter-spacing: -0.015em; color: #1C1714; }
.pc-ing-tag {
  background: #F5EFE8;
  color: #5E5349;
  border-radius: 0;
  font-weight: 500;
  font-size: 10.5px;
  padding: 2px 7px;
}
.pc-excerpt { color: #5E5349; }
.pc-price { color: #1C1714; }
.pc-read-more {
  color: #C63F28;
  border: 0;
  padding: 5px 0;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
}
.product-card:hover .pc-read-more { color: #A8341F; background: transparent; }

/* (133) Product page hero: the photo fills a fixed-height panel instead of
   setting the height itself (tall photos left a large empty area beside it),
   and the space next to it holds an "at a glance" row, jump links and the
   share buttons (built in skinrevu.js). From 769px up — below that the hero
   is stacked and the photo is already 220px high (skinrevu.css). */
@media (min-width: 769px) {
  .pd-hero-img { position: relative; min-height: 300px; }
  .pd-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* the page's second column (280px) is never filled: the card takes the width */
  .product-detail-wrap { grid-template-columns: minmax(0, 1fr); }
  .pd-related .related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 4 related cards on one row */
}
/* text-heavy product sections keep a readable width inside the wide card;
   ingredient tags, photos and related cards use the full width */
.pd-text, #pd-review, #pd-compat-section, #pd-buy, .pd-faq-list, .pd-visitor-rating-widget { max-width: 900px; }
.pd-hero-body > [class^="pd-verdict"] { align-self: flex-start; }   /* a label, not a full-width band */
.pd-glance {
  display: flex; flex-wrap: wrap; gap: 10px 32px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid #F0EAE1;
}
.pd-glance-item  { display: block; min-width: 0; }
.pd-glance-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6F6358; margin-bottom: 2px; }
.pd-glance-value { display: block; font-size: 14px; font-weight: 600; color: #1C1714; }
.pd-jump { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 13px; font-weight: 600; }
.pd-jump a { color: #C63F28; text-decoration: none; }
.pd-jump a:hover { text-decoration: underline; }
.pd-hero-body .pd-share-bar { margin: 12px 0 0; padding: 0; }
#pd-review, #pd-ingredients, #pd-buy { scroll-margin-top: 124px; }  /* clear the sticky header (108px on phones/tablets) */

/* (133) journal/guide newsletter box: identity's slate --teal is too dark on
   the ink box; keep the original light blue for the small kicker text */
.nl-wrap .nl-eyebrow, .nl-wrap .nl-success { color: #4A8FA8; }

/* (133) Follow SkinRevu card: a long handle (@skinrevu.bsky.social) pushed the
   Follow button out of the narrow left column; the handle now truncates */
.social-follow-row > div { flex: 1 1 auto; min-width: 0; }
.sf-handle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-btn { flex-shrink: 0; }
.article-frame .nl-wrap { margin-top: 24px; }   /* question box and newsletter box touched */
/* Compare tool: Product A | VS | Product B side by side. The page's grid had
   two columns for three items, so B dropped under A with VS in an empty half.
   Below 601px the page stacks them itself (compare.html). */
@media (min-width: 601px) {
  .picker-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
  .picker-grid > .vs-divider { align-self: center; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-load-more, .nl-btn, .sf-btn { border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Package 132 — closer to the mock-up (option B)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wide screens only (1,201px and up): the board's full-width frame and columns.
   Everything at 1,200px and below is untouched — same as 130.
   (133) Every page that used the 1,180px frame now uses the 1,440px frame, so
   content lines up with the header. Long reads (journal articles, guides,
   ingredient explainers, best-of) get a white card across the whole frame too,
   with the text kept to a readable 900px inside it. Padding is set left/right
   only where the page has its own top/bottom padding. */
@media (min-width: 1201px) {
  .header-inner { max-width: 1440px; padding: 0 26px; }
  .page-wrap { max-width: 1440px; padding: 0 26px; }            /* home, reviews, product, about, contact, ingredients */
  .blog-wrap, .compare-page, .gallery-page, .testing-wrap, .ad-strip-inner {
    max-width: 1440px; padding-left: 26px; padding-right: 26px;
  }
  .footer-inner { max-width: 1440px; padding-left: 26px; padding-right: 26px; }
  /* the divider line runs the width of the content, not edge to edge */
  .footer-bottom { max-width: 1388px; width: calc(100% - 52px); padding-left: 0; padding-right: 0; }
  /* pages with the short footer (logo + 2 link columns) have no 4th column */
  .footer-inner:not(:has(> :nth-child(4))) { grid-template-columns: 1.8fr 1fr 1fr; }
  .main-grid,
  .page-wrap > .ing-page-grid {                                 /* ingredients.html has its own 210/1fr/260 */
    grid-template-columns: 244px minmax(0, 1fr) 282px;          /* fallback for browsers without clamp() */
    /* side columns grow with the window (180/240 at 1201px -> 244/282 at 1440px),
       so the middle column never gets narrower as the window gets wider
       (fixed 244/282 made it 586px at 1201 against 678px at 1200) */
    /* % = the grid's own width (1149px at a 1201px window, 1388px at 1440px) */
    grid-template-columns: clamp(180px, calc(180px + (100% - 1149px) * 0.2678), 244px)
                           minmax(0, 1fr)
                           clamp(240px, calc(240px + (100% - 1149px) * 0.1757), 282px);
    gap: 18px; grid-gap: 18px; column-gap: 18px;
  }
  /* keep three cards per row: four would leave 9-per-load lists as 4/4/1 */
  .blog-grid, .testing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testing-card-thumb { aspect-ratio: 4 / 3; }    /* square photos were 445px tall at three per row */
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 5 per row left 11 products as 5/5/1 */
  .contact-body > * { max-width: 900px; }        /* form and fields keep a sensible width */
  /* About: text keeps the same readable width as reviews */
  .about-body > * { max-width: 900px; }
  /* long reads */
  .article-wrap { max-width: 1440px; padding-left: 26px; padding-right: 26px; }
  .article-frame > *,
  .article-frame > .bestof-grid { max-width: 900px; margin-left: auto; margin-right: auto; }   /* best-of pages set margin:24px 0 after this file */
  .policy-body, .disclosure-body { max-width: 948px; }
  .article-frame .related-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); }   /* 2 products no longer leave half the row empty */         /* 900px of text + the page's 24px padding */
}

/* Header: five menu links on desktop; Members and Patreon as buttons.
   Contact, App and the Members link stay in the phone/tablet menu. */
@media (min-width: 1051px) {
  .nav-app, .nav-members, #main-nav a.nav-link[href="/contact.html"] { display: none; }
  #main-nav { justify-content: flex-start; }   /* grouped by the logo, as on the board (was space-evenly) */
  /* desktop only — skinrevu.css hides .header-social at 1050px and below; a plain
     display rule here would override that and show the buttons on phones */
  .header-social { display: flex; align-items: center; gap: 8px; }
  .header-search { margin-right: 10px; }       /* the button sat flush against the search box */
}
/* (133) one header button: Members (/members.php shows the tiers and prices,
   "Connect with Patreon" for new members and sign-in for existing ones).
   The separate Patreon button went to the same place in the end. */
@media (min-width: 1051px) {
  .header-social .social-pill.patreon { display: none; }
}
.social-pill.members {
  background: #C63F28;
  border: 1px solid #C63F28;
  color: #FFFFFF;
  border-radius: 3px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
}
.social-pill.members:hover { background: #A8341F; border-color: #A8341F; color: #FFFFFF; }