/*
Theme Name: Polttooljy.net
Theme URI: https://polttoöljy.net/
Description: GeneratePress child theme for polttoöljy.net. Design C "Aurinko": white paper, fresh green, sunny yellow, Outfit headings and Manrope body, all fonts self hosted.
Author: Polttoöljy.net
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: polttooljy-net
*/

/* ==========================================================================
   1. Fonts, self hosted. No request ever leaves the site for a font.
   Outfit 500-700 and Manrope 500-800 are variable woff2 files from Google
   Fonts, both under the SIL Open Font License (assets/fonts/OFL-*.txt).
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design tokens. Defined once, used by every rule below.
   ========================================================================== */

:root {
  --pn-font-head: "Outfit", "Avenir Next", system-ui, sans-serif;
  --pn-font-body: "Manrope", "Helvetica Neue", system-ui, sans-serif;

  --pn-paper: #FFFFFF;
  --pn-paper-2: #F1F7F3;
  --pn-line: #DCE7E0;
  --pn-line-soft: #E3ECE7;

  --pn-green: #1E9E5A;
  --pn-green-hover: #178A4C;
  --pn-green-deep: #15803D;
  --pn-forest: #14312A;
  --pn-pine: #123B2E;
  --pn-moss: #DDF3E6;

  --pn-ink: #22302B;
  --pn-ink-soft: #3E4F49;
  --pn-muted: #5F6E68;

  --pn-sun: #FFD43B;
  --pn-sun-soft: #FFF7D6;
  --pn-sun-line: #FFE58A;
  --pn-sun-ink: #6B4F00;

  --pn-r: 18px;
  --pn-r-s: 12px;
  --pn-wrap: 1180px;
}


/* ==========================================================================
   3. Base typography for the ordinary pages: guides, articles, legal pages.
   The comparison page is excluded here and handled in section 7: the plugin
   renders it inside .entry-content with its own stylesheet, and a stray
   theme rule would repaint its buttons and spacing.
   ========================================================================== */

html body,
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--pn-font-body);
}

body {
  background: var(--pn-paper);
  color: var(--pn-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body:not(.hp-oil-comparator-page) h1,
body:not(.hp-oil-comparator-page) h2,
body:not(.hp-oil-comparator-page) h3,
body:not(.hp-oil-comparator-page) h4,
body:not(.hp-oil-comparator-page) h5,
body:not(.hp-oil-comparator-page) h6,
body:not(.hp-oil-comparator-page) .entry-title,
.widget-title {
  font-family: var(--pn-font-head);
  color: var(--pn-forest);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.14;
  text-wrap: balance;
}

body:not(.hp-oil-comparator-page) h1,
body:not(.hp-oil-comparator-page) .entry-title {
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  font-weight: 700;
}

body:not(.hp-oil-comparator-page) h2 {
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  margin-top: 2.25rem;
}

body:not(.hp-oil-comparator-page) h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  margin-top: 1.75rem;
}

body:not(.hp-oil-comparator-page) h4 {
  font-size: 1.125rem;
  margin-top: 1.5rem;
}

body:not(.hp-oil-comparator-page) a {
  color: var(--pn-green-deep);
  text-underline-offset: .18em;
}

body:not(.hp-oil-comparator-page) a:hover,
body:not(.hp-oil-comparator-page) a:focus {
  color: var(--pn-green-hover);
}

:focus-visible {
  outline: 3px solid var(--pn-green-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* One readable column for prose. */
body:not(.full-width-content) .inside-article {
  max-width: 74ch;
  margin-inline: auto;
}

body:not(.hp-oil-comparator-page) .entry-content > * + * {
  margin-top: 1.1rem;
}

body:not(.hp-oil-comparator-page) .entry-content ul,
body:not(.hp-oil-comparator-page) .entry-content ol {
  padding-left: 1.3rem;
}

body:not(.hp-oil-comparator-page) .entry-content li + li {
  margin-top: .35rem;
}

body:not(.hp-oil-comparator-page) .entry-content strong {
  font-weight: 800;
}

body:not(.hp-oil-comparator-page) .entry-content blockquote {
  border-left: 4px solid var(--pn-green);
  background: var(--pn-paper-2);
  border-radius: 0 var(--pn-r-s) var(--pn-r-s) 0;
  padding: 1rem 1.25rem;
  margin-inline: 0;
  color: var(--pn-ink);
}

body:not(.hp-oil-comparator-page) .entry-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: .9375rem;
}

body:not(.hp-oil-comparator-page) .entry-content th,
body:not(.hp-oil-comparator-page) .entry-content td {
  border: 1px solid var(--pn-line);
  padding: .6rem .8rem;
  text-align: left;
}

body:not(.hp-oil-comparator-page) .entry-content thead th {
  background: var(--pn-paper-2);
  color: var(--pn-forest);
  font-weight: 800;
}

body:not(.hp-oil-comparator-page) .entry-content hr,
body:not(.hp-oil-comparator-page) .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--pn-line);
}

body:not(.hp-oil-comparator-page) .entry-meta {
  color: var(--pn-muted);
  font-size: .9375rem;
}

/* Buttons and fields outside the comparison page. */
body:not(.hp-oil-comparator-page) .button,
body:not(.hp-oil-comparator-page) button:not(.menu-toggle):not(.dropdown-menu-toggle),
body:not(.hp-oil-comparator-page) input[type="button"],
body:not(.hp-oil-comparator-page) input[type="reset"],
body:not(.hp-oil-comparator-page) input[type="submit"],
body:not(.hp-oil-comparator-page) .wp-block-button__link {
  background: var(--pn-green);
  border: 2px solid var(--pn-green);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: var(--pn-font-body);
  font-weight: 800;
  letter-spacing: .01em;
  min-height: 48px;
  padding: .65rem 1.6rem;
  text-decoration: none;
}

body:not(.hp-oil-comparator-page) .button:hover,
body:not(.hp-oil-comparator-page) button:not(.menu-toggle):not(.dropdown-menu-toggle):hover,
body:not(.hp-oil-comparator-page) input[type="submit"]:hover,
body:not(.hp-oil-comparator-page) .wp-block-button__link:hover {
  background: var(--pn-green-hover);
  border-color: var(--pn-green-hover);
  color: #FFFFFF;
}

body:not(.hp-oil-comparator-page) .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--pn-green);
  color: var(--pn-green-deep);
}

body:not(.hp-oil-comparator-page) input[type="text"],
body:not(.hp-oil-comparator-page) input[type="email"],
body:not(.hp-oil-comparator-page) input[type="number"],
body:not(.hp-oil-comparator-page) input[type="search"],
body:not(.hp-oil-comparator-page) input[type="tel"],
body:not(.hp-oil-comparator-page) input[type="url"],
body:not(.hp-oil-comparator-page) select,
body:not(.hp-oil-comparator-page) textarea {
  background: #FFFFFF;
  border: 1.5px solid var(--pn-line);
  border-radius: var(--pn-r-s);
  color: var(--pn-ink);
  font-family: var(--pn-font-body);
  padding: .55rem .8rem;
}

body:not(.hp-oil-comparator-page) input:focus,
body:not(.hp-oil-comparator-page) select:focus,
body:not(.hp-oil-comparator-page) textarea:focus {
  border-color: var(--pn-green-deep);
  box-shadow: 0 0 0 3px rgba(44, 107, 85, .2);
  outline: none;
}

/* ==========================================================================
   4. Header: wordmark, primary navigation, mobile menu.
   ========================================================================== */

.site-header {
  background: var(--pn-paper);
  border-bottom: 1px solid var(--pn-line);
}

.site-header .inside-header {
  max-width: var(--pn-wrap);
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
}

.site-branding {
  display: flex;
  align-items: center;
}

.main-title {
  font-family: var(--pn-font-head);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
}

.main-title a,
.main-title a:hover {
  color: var(--pn-forest);
  text-decoration: none;
}

.pn-brand-tld {
  color: var(--pn-green);
  font-family: var(--pn-font-body);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
  margin-left: .15rem;
  vertical-align: .2em;
}

.main-navigation,
.main-navigation .inside-navigation,
.main-navigation ul ul {
  background: var(--pn-paper);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  color: var(--pn-forest);
  font-family: var(--pn-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a {
  background: transparent;
  color: var(--pn-green-deep);
}

.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
  background: transparent;
  color: var(--pn-forest);
  text-decoration: underline;
  text-decoration-color: var(--pn-sun);
  text-decoration-thickness: 3px;
  text-underline-offset: .45em;
}

.main-navigation ul ul {
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-r-s);
  box-shadow: 0 12px 30px rgba(20, 49, 42, .1);
  overflow: hidden;
}

.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover {
  background: transparent;
  border: 0;
  padding: .5rem .75rem;
}

.main-navigation .menu-toggle:hover {
  color: var(--pn-green-deep);
}

@media (max-width: 768px) {
  /* A closed mobile menu must not leave a white strip under the header. */
  .main-navigation:not(.toggled),
  .main-navigation:not(.toggled) > .inside-navigation {
    background: transparent;
    min-height: 0;
  }

  .main-navigation.toggled .main-nav > ul {
    border-top: 1px solid var(--pn-line);
  }

  .main-navigation.toggled .main-nav ul li a {
    border-bottom: 1px solid var(--pn-line);
    padding-block: .9rem;
  }

  .main-navigation.toggled .main-nav ul li.current-menu-item > a {
    border-left: 4px solid var(--pn-sun);
    text-decoration: none;
  }
}

/* ==========================================================================
   5. Footer: three columns on a light green band, then the fine print.
   The markup comes from functions.php (generate_before_footer_content and
   the generate_copyright filter).
   ========================================================================== */

.site-footer,
.pn-footer {
  background: var(--pn-paper-2);
  color: var(--pn-ink-soft);
}

.pn-footer {
  border-top: 1px solid var(--pn-line);
}

.pn-footer-inner {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  margin: 0 auto;
  max-width: var(--pn-wrap);
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
}

@media (max-width: 860px) {
  .pn-footer-inner {
    grid-template-columns: 1fr;
  }
}

.pn-footer-brand {
  color: var(--pn-forest);
  font-family: var(--pn-font-head);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
}

.pn-footer-brand span {
  color: var(--pn-green);
  font-family: var(--pn-font-body);
  font-size: 1rem;
  font-weight: 800;
  vertical-align: .2em;
}

.pn-footer h2 {
  color: var(--pn-forest);
  font-family: var(--pn-font-body);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin: 0 0 .75rem;
  text-transform: uppercase;
}

.pn-footer,
.pn-footer p,
.pn-footer li,
.pn-footer a {
  font-family: var(--pn-font-body);
}

.pn-footer p {
  color: var(--pn-ink-soft);
  margin: 0 0 .6rem;
  max-width: 46ch;
}

.pn-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pn-footer li + li {
  margin-top: .45rem;
}

.pn-footer a {
  color: var(--pn-forest);
  text-decoration: underline;
  text-decoration-color: var(--pn-line);
  text-underline-offset: .2em;
}

.pn-footer a:hover {
  color: var(--pn-green-deep);
  text-decoration-color: var(--pn-sun);
}

.site-footer .site-info {
  background: var(--pn-paper-2);
  font-family: var(--pn-font-body);
  border-top: 1px solid var(--pn-line);
  color: var(--pn-muted);
  font-size: .875rem;
  padding-block: 1.1rem;
  text-align: left;
}

.site-footer .inside-site-info {
  max-width: var(--pn-wrap);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.pn-fineprint {
  display: grid;
  font-family: var(--pn-font-body);
  text-align: left;
  gap: .35rem;
  max-width: 90ch;
}

.pn-fineprint p {
  margin: 0;
}

.pn-fineprint a {
  color: var(--pn-forest);
}

/* ==========================================================================
   6. The comparison page.

   The plugin renders the comparison inside .hp-claude-comparator and ships
   three stylesheets for it: comparator-page.css and heating-oil-comparator.css
   are written inside @scope (.hp-claude-comparator), and
   heating-oil-comparator-shell.css repeats a few values as plain rules under
   .hp-oil-comparator-page with a specificity of (0,3,1). This theme's rules
   are therefore written with the body element in front, which puts them at
   (0,3,2) or higher, and they are loaded after the plugin (functions.php
   declares the plugin handles as dependencies). !important appears only where
   the plugin or GeneratePress declares the same property !important.

   Nothing here hides anything the plugin renders. The supplier link in every
   offer row is how a reader orders, and it stays.
   ========================================================================== */

body.hp-oil-comparator-page {
  background: var(--pn-paper);
}

/* --- the palette swap: the plugin reads all of these through var() --- */
body.hp-oil-comparator-page .hp-claude-comparator {
  --font-head: var(--pn-font-head);
  --font-body: var(--pn-font-body);

  --ink: #22302B;
  --head: #14312A;
  --muted: #5F6E68;

  --teal: #2C6B55;
  --teal-dark: #123B2E;
  --navy: #123B2E;
  --blue: #1C5241;
  --mint: #DDF3E6;

  --amber: #FFD43B;
  --amber-deep: #6B4F00;
  --warn-bg: #FBF1CF;
  --warn-ink: #6B4F00;

  --hero1: #FFFFFF;
  --hero2: #FFFFFF;
  --surface: #F1F7F3;
  --card: #FFFFFF;
  --line: #DCE7E0;
  --focus: #2C6B55;

  --r: 18px;
  --r-s: 12px;

  color: var(--ink);
  font-family: var(--font-body);
}

/* --- headings (GeneratePress and the plugin shell both force these) --- */
body.hp-oil-comparator-page .hp-claude-comparator h1,
body.hp-oil-comparator-page .hp-claude-comparator h2,
body.hp-oil-comparator-page .hp-claude-comparator h3,
body.hp-oil-comparator-page .hp-claude-comparator h4 {
  color: var(--head) !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}

body.hp-oil-comparator-page .hp-claude-comparator .hero h1 {
  color: var(--head) !important;
  font-size: clamp(2.75rem, 5.2vw, 4.5rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
  line-height: 1.02 !important;
  max-width: 15ch;
}

body.hp-oil-comparator-page .hp-claude-comparator .faq-item summary h3 {
  color: var(--head) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}

body.hp-oil-comparator-page .hp-claude-comparator h3.offer-name {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* --- hero: white paper, green light from the top, sun in the corner --- */
body.hp-oil-comparator-page .hp-claude-comparator .hero {
  background: var(--card);
  border-bottom: 0;
  color: var(--ink);
}

body.hp-oil-comparator-page .hp-claude-comparator .hero > svg {
  display: none;
}

body.hp-oil-comparator-page .hp-claude-comparator .hero::before {
  background: linear-gradient(180deg, #F3FBF6 0%, #FFFFFF 60%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

body.hp-oil-comparator-page .hp-claude-comparator .hero::after {
  aspect-ratio: 1;
  background: radial-gradient(circle at 40% 40%, rgba(255, 212, 59, .55), rgba(255, 212, 59, 0) 62%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  position: absolute;
  right: -8%;
  top: -30%;
  width: 52%;
}

body.hp-oil-comparator-page .hp-claude-comparator .hero .eyebrow {
  color: var(--pn-green-deep);
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: .16em;
}

body.hp-oil-comparator-page .hp-claude-comparator .hero .eyebrow::before {
  background: var(--pn-sun);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 10px;
  margin-right: .55rem;
  vertical-align: baseline;
  width: 10px;
}

body.hp-oil-comparator-page .hp-claude-comparator .hero-lead {
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 56ch;
}

body.hp-oil-comparator-page .hp-claude-comparator .hero-safety {
  color: var(--muted);
}

body.hp-oil-comparator-page .hp-claude-comparator .hero-partners {
  border-top-color: var(--line);
}

body.hp-oil-comparator-page .hp-claude-comparator .hero-partners p {
  color: var(--muted);
}

body.hp-oil-comparator-page .hp-claude-comparator .hero-partners li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--head);
  font-size: .8125rem;
  font-weight: 600;
  padding: .25rem .7rem;
}

body.hp-oil-comparator-page .hp-claude-comparator .hero-preview::before {
  background: radial-gradient(closest-side, rgba(30, 158, 90, .12), transparent 75%);
}

/* --- the two floating price cards in the hero --- */
body.hp-oil-comparator-page .hp-claude-comparator .mini-card {
  background: var(--pn-green);
  border-radius: var(--r);
  box-shadow: 0 24px 50px rgba(30, 158, 90, .28);
  color: #FFFFFF;
}

body.hp-oil-comparator-page .hp-claude-comparator .mini-card .mini-name,
body.hp-oil-comparator-page .hp-claude-comparator .mini-card .mini-price,
body.hp-oil-comparator-page .hp-claude-comparator .mini-card .mini-price small,
body.hp-oil-comparator-page .hp-claude-comparator .mini-card .mini-meta,
body.hp-oil-comparator-page .hp-claude-comparator .mini-card .offer-mark {
  color: #FFFFFF;
}

body.hp-oil-comparator-page .hp-claude-comparator .mini-card .offer-mark {
  background: rgba(255, 255, 255, .22);
}

body.hp-oil-comparator-page .hp-claude-comparator .mini-card + .mini-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  box-shadow: 0 18px 40px rgba(20, 49, 42, .1);
}

body.hp-oil-comparator-page .hp-claude-comparator .mini-card + .mini-card .mini-name,
body.hp-oil-comparator-page .hp-claude-comparator .mini-card + .mini-card .mini-price {
  color: var(--head);
}

body.hp-oil-comparator-page .hp-claude-comparator .mini-card + .mini-card .mini-price small,
body.hp-oil-comparator-page .hp-claude-comparator .mini-card + .mini-card .mini-meta {
  color: var(--muted);
}

body.hp-oil-comparator-page .hp-claude-comparator .mini-card + .mini-card .offer-mark {
  background: var(--mint);
  color: var(--pn-green-deep);
}

/* --- links and buttons --- */
body.hp-oil-comparator-page .hp-claude-comparator [class~="link-plain"],
body.hp-oil-comparator-page .hp-claude-comparator a[class~="link-plain"] {
  color: var(--pn-green-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="link-plain"]:hover,
body.hp-oil-comparator-page .hp-claude-comparator a[class~="link-plain"]:hover {
  color: var(--pn-green-hover);
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="btn"] {
  border-radius: 999px;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="btn-cta"],
body.hp-oil-comparator-page .hp-claude-comparator a[class~="btn-cta"],
body.hp-oil-comparator-page .hp-claude-comparator button[class~="btn-cta"] {
  background: var(--pn-green);
  border-color: var(--pn-green);
  box-shadow: 0 8px 22px rgba(18, 59, 46, .28);
  color: #FFFFFF;
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="btn-cta"]:hover,
body.hp-oil-comparator-page .hp-claude-comparator a[class~="btn-cta"]:hover,
body.hp-oil-comparator-page .hp-claude-comparator button[class~="btn-cta"]:hover {
  background: var(--pn-green-hover);
  border-color: var(--pn-green-hover);
  color: #FFFFFF;
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="btn-cta"][aria-disabled="true"],
body.hp-oil-comparator-page .hp-claude-comparator a[class~="btn-cta"][aria-disabled="true"],
body.hp-oil-comparator-page .hp-claude-comparator [class~="btn-cta"][aria-disabled="true"]:hover {
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: none;
  color: var(--muted);
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="btn-outline"],
body.hp-oil-comparator-page .hp-claude-comparator button[class~="btn-outline"] {
  background: transparent;
  border-color: var(--pn-green);
  color: var(--pn-green-deep);
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="btn-outline"]:hover,
body.hp-oil-comparator-page .hp-claude-comparator button[class~="btn-outline"]:hover {
  border-color: var(--pn-green-hover);
  color: var(--pn-green-hover);
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="btn-primary"] {
  background: var(--pn-green);
  border-color: var(--pn-green);
  color: #FFFFFF;
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="mini-cta"],
body.hp-oil-comparator-page .hp-claude-comparator a[class~="mini-cta"] {
  background: var(--pn-green);
  border-radius: 999px;
  color: #FFFFFF;
}

body.hp-oil-comparator-page .hp-claude-comparator [class~="mini-cta"]:hover,
body.hp-oil-comparator-page .hp-claude-comparator a[class~="mini-cta"]:hover {
  background: var(--pn-green-hover);
  color: #FFFFFF;
}

body.hp-oil-comparator-page .hp-claude-comparator .mini-card + .mini-card [class~="mini-cta"] {
  background: var(--pn-green);
  color: #FFFFFF;
}

body.hp-oil-comparator-page .hp-claude-comparator .step-btn {
  background: var(--pn-green);
  color: #FFFFFF;
}

body.hp-oil-comparator-page .hp-claude-comparator .step-btn:hover {
  background: var(--pn-green-hover);
}

body.hp-oil-comparator-page .hp-claude-comparator .preset:hover {
  border-color: var(--pn-sun);
}

body.hp-oil-comparator-page .hp-claude-comparator .link-btn {
  color: var(--pn-green-deep);
}

body.hp-oil-comparator-page .hp-claude-comparator .link-btn:hover {
  color: var(--pn-green-hover);
}

/* --- trust strip --- */
body.hp-oil-comparator-page .hp-claude-comparator .trust {
  color: var(--muted);
}

body.hp-oil-comparator-page .hp-claude-comparator .trust ul {
  box-shadow: 0 10px 28px rgba(20, 49, 42, .08);
}

body.hp-oil-comparator-page .hp-claude-comparator .trust .t-num {
  color: var(--head);
  font-size: 1.5rem;
}

/* --- form controls --- */
body.hp-oil-comparator-page .hp-claude-comparator input,
body.hp-oil-comparator-page .hp-claude-comparator select {
  background: #FFFFFF;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--font-body);
}

body.hp-oil-comparator-page .hp-claude-comparator input:focus,
body.hp-oil-comparator-page .hp-claude-comparator select:focus {
  border-color: var(--pn-green-deep);
  box-shadow: 0 0 0 3px rgba(44, 107, 85, .2);
}

body.hp-oil-comparator-page .hp-claude-comparator label,
body.hp-oil-comparator-page .hp-claude-comparator .field-label {
  color: var(--head);
  font-weight: 700;
}

body.hp-oil-comparator-page .hp-claude-comparator .side-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: none;
}

/* --- offer rows --- */
body.hp-oil-comparator-page .hp-claude-comparator .offer {
  background: var(--card);
  border: 1.5px solid var(--pn-line-soft);
  border-radius: var(--r);
  box-shadow: 0 4px 16px rgba(20, 49, 42, .05);
  position: relative;
}

body.hp-oil-comparator-page .hp-claude-comparator .offer:hover {
  border-color: var(--pn-green);
  box-shadow: 0 10px 26px rgba(20, 49, 42, .1);
}

body.hp-oil-comparator-page .hp-claude-comparator .offer[data-cheapest="1"] {
  border-color: var(--pn-green);
  box-shadow: 0 12px 32px rgba(30, 158, 90, .16);
}

/* The "cheapest" badge is the plugin's own chip, moved to the corner of the
   card. Keeping the real element keeps the Swedish page in Swedish. */
body.hp-oil-comparator-page .hp-claude-comparator .offer[data-cheapest="1"] .offer-highlight.offer-cheapest {
  background: var(--pn-sun);
  border: 0;
  color: var(--head);
  font-size: .72rem;
  font-weight: 800;
  left: 1.25rem;
  letter-spacing: .08em;
  padding: .25rem .65rem;
  position: absolute;
  text-transform: uppercase;
  top: -.7rem;
}

body.hp-oil-comparator-page .hp-claude-comparator .offer-mark {
  background: var(--mint);
  color: var(--pn-green-deep);
  font-family: var(--font-body);
  font-weight: 800;
}

body.hp-oil-comparator-page .hp-claude-comparator .offer-specs dt {
  color: var(--muted);
}

body.hp-oil-comparator-page .hp-claude-comparator .offer-specs dd {
  color: var(--ink);
  font-weight: 700;
}

body.hp-oil-comparator-page .hp-claude-comparator .offer-est-num {
  color: var(--head);
  font-family: var(--font-head);
  font-weight: 600;
}

body.hp-oil-comparator-page .hp-claude-comparator .offer-est-label {
  color: var(--muted);
}

body.hp-oil-comparator-page .hp-claude-comparator .offer-volume-prices {
  background: var(--surface);
  border-radius: 12px;
  padding: .5rem .75rem;
}

body.hp-oil-comparator-page .hp-claude-comparator .offer-volume-prices dt {
  color: var(--muted);
}

body.hp-oil-comparator-page .hp-claude-comparator .offer-volume-prices dd {
  color: var(--pn-green-deep);
  font-weight: 700;
}

body.hp-oil-comparator-page .hp-claude-comparator .group-divider {
  color: var(--pn-green-deep);
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- cards, notes, FAQ --- */
body.hp-oil-comparator-page .hp-claude-comparator .type-card,
body.hp-oil-comparator-page .hp-claude-comparator .faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

body.hp-oil-comparator-page .hp-claude-comparator .coverage-more {
  background: var(--pn-sun-soft);
  border-color: var(--pn-sun-line);
  color: var(--ink);
}

/* --- sticky compare tray --- */
body.hp-oil-comparator-page .hp-claude-comparator .compare-tray {
  background: var(--head);
  color: #FFFFFF;
}

/* ==========================================================================
   9. Phone first screen: the two cheapest offers directly under the title.
   The shared comparator stylesheet hides .hero-preview below 1000px and
   stacks the trust boxes, the notes and the form before the first offer
   row, which put the first price about three screens down on a phone.
   Here the hero text block is flattened (display: contents) so its children
   and the preview cards can be ordered in one column, the supplier chips
   are dropped (the coverage list below has all of them), the comparison
   moves ahead of the trust strip, and the offer list ahead of the notes.
   ========================================================================== */

@media (max-width: 1000px) {
  body.hp-oil-comparator-page .hp-claude-comparator .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: 1.25rem 1.75rem;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .hero-grid > div:first-child {
    display: contents;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .hero .eyebrow {
    order: 1;
  }

  body.hp-oil-comparator-page .hp-claude-comparator #hero-title {
    font-size: clamp(1.85rem, 7.5vw, 2.6rem);
    margin: .4rem 0 .9rem;
    order: 2;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .hero-preview {
    display: grid;
    margin: 0 0 1rem;
    order: 3;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .hero-preview::before {
    display: none;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .mini-card + .mini-card {
    margin: 0;
    transform: none;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .hero-ctas {
    order: 4;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .hero-lead {
    margin-top: 1.25rem;
    order: 5;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .hero-safety {
    order: 6;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .hero-partners {
    display: none;
  }

  /* The comparison comes right after the hero; the trust strip follows it. */
  body.hp-oil-comparator-page .hp-claude-comparator {
    display: flex;
    flex-direction: column;
  }

  body.hp-oil-comparator-page .hp-claude-comparator > .hero {
    order: -2;
  }

  body.hp-oil-comparator-page .hp-claude-comparator > .compare-section {
    order: -1;
  }

  body.hp-oil-comparator-page .hp-claude-comparator > .trust {
    margin-top: 1.5rem;
  }

  /* Inside the comparison the offer list leads and the notes follow it. */
  body.hp-oil-comparator-page .hp-claude-comparator .compare-section {
    display: flex;
    flex-direction: column;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .compare-section > .compare-layout {
    margin-top: 0;
    order: -1;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .compare-section > .coverage-more {
    margin-top: 1rem;
  }
}

/* ==========================================================================
   10. Internal navigation blocks: breadcrumb, language link, family links,
   related guides and the supplier lists in the guide articles.

   The breadcrumb and the language link are rendered by the plugin inside the
   comparison hero and by this theme's functions.php on the ordinary pages, so
   the base rules are written without the comparator body class and only the
   hero placement is scoped to it.
   ========================================================================== */

/* --- breadcrumb ---------------------------------------------------------- */

.hp-breadcrumb {
  font-family: var(--pn-font-body);
  font-size: .8125rem;
  line-height: 1.5;
  margin: 0 0 .75rem;
}

.hp-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hp-breadcrumb li {
  color: var(--pn-muted);
  margin: 0;
  padding: 0;
}

.hp-breadcrumb li::marker {
  content: "";
}

.hp-breadcrumb li + li::before {
  color: var(--pn-line);
  content: "\203A";
  margin-right: .45rem;
}

.hp-breadcrumb a {
  color: var(--pn-green-deep);
  text-decoration: none;
}

.hp-breadcrumb a:hover,
.hp-breadcrumb a:focus-visible {
  color: var(--pn-green-hover);
  text-decoration: underline;
}

.hp-breadcrumb [aria-current="page"] {
  color: var(--pn-ink-soft);
  font-weight: 700;
}

/* On the comparison page the breadcrumb sits between the eyebrow and the h1. */
body.hp-oil-comparator-page .hp-claude-comparator .hp-breadcrumb {
  margin: .6rem 0 .9rem;
}

/* --- language link ------------------------------------------------------- */

.hp-lang-switch {
  color: var(--pn-green-deep);
  font-family: var(--pn-font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}

.hp-lang-switch:hover,
.hp-lang-switch:focus-visible {
  color: var(--pn-green-hover);
  text-decoration: underline;
}

/* Desktop: top right corner of the hero, out of the eyebrow's reading line. */
body.hp-oil-comparator-page .hp-claude-comparator .hero {
  position: relative;
}

@media (min-width: 768px) {
  body.hp-oil-comparator-page .hp-claude-comparator .hero .hp-lang-switch {
    background: var(--pn-moss);
    border-radius: 999px;
    padding: .3rem .8rem;
    position: absolute;
    right: 1.5rem;
    top: 1.25rem;
    z-index: 2;
  }
}

/* Phones: inline on its own line under the eyebrow. */
@media (max-width: 767px) {
  .hp-lang-switch {
    display: inline-block;
    margin-top: .35rem;
  }

  body.hp-oil-comparator-page .hp-claude-comparator .hero .eyebrow .hp-lang-switch {
    display: block;
  }
}

/* --- "Katso myös" family links, pill row under the hero ------------------ */

.hp-oil-family-links {
  margin: 1.25rem 0 0;
}

/* The strip sits between the hero and the trust strip. The hero keeps a deep
   bottom padding for the trust boxes to overlap, so the strip is pulled up
   into that padding and the trust strip drops its negative margin. */
body.hp-oil-comparator-page .hp-claude-comparator.hp-oil-comparator > nav.wrap.hp-oil-family-links {
  margin-top: -4.25rem;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  position: relative;
  z-index: 6;
}

body.hp-oil-comparator-page .hp-claude-comparator > .hp-oil-family-links + .trust {
  margin-top: 1rem;
}

@media (max-width: 1000px) {
  /* Phone order: hero, family links, comparison, trust. */
  body.hp-oil-comparator-page .hp-claude-comparator > .hero {
    order: -3;
  }

  body.hp-oil-comparator-page .hp-claude-comparator > .hp-oil-family-links {
    margin-top: 0;
    order: -2;
  }

  body.hp-oil-comparator-page .hp-claude-comparator > .hp-oil-family-links + .trust {
    margin-top: 1.5rem;
  }
}

.hp-oil-family-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hp-oil-family-links li {
  margin: 0;
  padding: 0;
}

.hp-oil-family-links li::marker {
  content: "";
}

.hp-oil-family-links a {
  background: var(--pn-moss);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--pn-pine);
  display: inline-block;
  font-family: var(--pn-font-body);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  padding: .4rem .9rem;
  text-decoration: none;
}

.hp-oil-family-links a:hover,
.hp-oil-family-links a:focus-visible {
  background: var(--pn-sun-soft);
  border-color: var(--pn-sun-line);
  color: var(--pn-forest);
}

/* Only a strip that sits directly under .hp-claude-comparator needs its own
   page gutter; one rendered inside a .wrap already has it. */
body.hp-oil-comparator-page .hp-claude-comparator > .hp-oil-family-links {
  margin: 0 auto;
  max-width: var(--pn-wrap);
  padding: 1.25rem 1.5rem 0;
}

@media (max-width: 600px) {
  body.hp-oil-comparator-page .hp-claude-comparator > .hp-oil-family-links {
    padding: 1rem 1rem 0;
  }
}

/* --- "Aiheeseen liittyvät oppaat" at the end of every guide -------------- */

.hp-ds-prose .hp-oil-related-guides {
  background: var(--pn-paper-2);
  border: 1px solid var(--pn-line-soft);
  border-radius: var(--pn-r-s);
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.5rem 1.4rem;
}

.hp-ds-prose .hp-oil-related-guides h2 {
  font-size: 1.125rem;
  margin: 0 0 .75rem;
}

.hp-ds-prose .hp-oil-related-guides ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hp-ds-prose .hp-oil-related-guides li {
  border-top: 1px solid var(--pn-line-soft);
  margin: 0;
  padding: .5rem 0;
}

.hp-ds-prose .hp-oil-related-guides li:first-child {
  border-top: 0;
  padding-top: 0;
}

.hp-ds-prose .hp-oil-related-guides a {
  font-weight: 700;
}

.hp-ds-prose .hp-oil-related-guides > p {
  margin: .9rem 0 0;
}

.hp-ds-prose .hp-oil-related-guides > p a {
  font-size: .875rem;
  font-weight: 600;
}

/* --- supplier lists in the seller guide ---------------------------------- */

.hp-ds-prose .hp-oil-supplier-list {
  display: grid;
  gap: .35rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  list-style: none;
  margin: .75rem 0 1.25rem;
  padding: 0;
}

.hp-ds-prose .hp-oil-supplier-list li {
  border-bottom: 1px solid var(--pn-line-soft);
  margin: 0;
  padding: .35rem 0;
}

.hp-ds-prose .hp-oil-supplier-list a {
  font-weight: 600;
}