/*
Theme Name: PharmaPlanta
Theme URI: https://pharmaplanta.hu
Author: PharmaPlanta
Description: Catalogue theme for a used pharmaceutical machinery dealer. Built around the PharmaPlanta Core plugin: a search-friendly item page, a filterable catalogue and a quote-first sales flow, in the PharmaPlanta petrol and warm grey identity.
Version: 1.11.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pharmaplanta-theme
Tags: business, custom-logo, custom-menu, translation-ready, two-columns
*/

:root{
  --ppt-brand:#1F4D4F; --ppt-brand-d:#143537; --ppt-brand-l:#e6eeee; --ppt-brand-soft:#3E7B7D;
  --ppt-ink:#12292B; --ppt-steel:#3D5A5C; --ppt-grey:#8C9193;
  --ppt-line:#dce5e5; --ppt-line2:#eef3f3; --ppt-bg:#f3f7f7;
  --ppt-r:10px;
  --ppt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ppt-bg); color:var(--ppt-ink);
  font-family:var(--ppt-font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
body.ppt-nav-open{overflow:hidden}
img{max-width:100%; height:auto; display:block}
a{color:var(--ppt-brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4em; line-height:1.2; font-weight:650; letter-spacing:-.02em}
h1{font-size:clamp(26px, 3.4vw, 38px)}
h2{font-size:clamp(21px, 2.4vw, 26px)}
p{margin:0 0 1em}
button{font:inherit}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; padding:0; margin:-1px; border:0;
}
.ppt-skip{
  position:absolute; left:-9999px; z-index:999; padding:12px 18px; background:var(--ppt-brand); color:#fff;
}
.ppt-skip:focus{left:12px; top:12px}
.ppt-wrap{max-width:1240px; margin:0 auto; padding:0 22px}
.ppt-muted{color:var(--ppt-grey)}
.ppt-kicker{
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#7fc4c2; margin:0 0 10px; display:inline-block;
}
.ppt-kicker--dark{color:var(--ppt-brand); margin:0}
a.ppt-kicker:hover{text-decoration:none; opacity:.8}

/* ---------------------------------------------------------------- header */
.ppt-header{background:#fff; border-bottom:1px solid var(--ppt-line); position:sticky; top:0; z-index:60}
.ppt-topbar{background:var(--ppt-ink); color:#c3d3d2; font-size:12.5px}
.ppt-topbar .ppt-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:34px; flex-wrap:wrap}
.ppt-topbar__contact{margin:0; display:flex; gap:10px; flex-wrap:wrap}
.ppt-topbar a{color:#c3d3d2}
.ppt-topbar a:hover{color:#fff}
.ppt-langs{display:flex; gap:2px}
.ppt-langs a{
  padding:3px 8px; border-radius:5px; font-size:12px; font-weight:700; letter-spacing:.04em; color:#93a9a8;
}
.ppt-langs a:hover{background:rgba(255,255,255,.09); color:#fff; text-decoration:none}
.ppt-langs a.is-current{background:var(--ppt-brand); color:#fff}
.ppt-bar{display:flex; align-items:center; gap:26px; min-height:70px}
.ppt-logo img, .custom-logo{height:44px; width:auto}
.ppt-nav{margin-left:auto}
.ppt-nav__list{display:flex; gap:4px; list-style:none; margin:0; padding:0}
.ppt-nav__list a{
  display:block; padding:9px 13px; border-radius:7px; color:var(--ppt-steel);
  font-weight:550; font-size:14.5px;
}
.ppt-nav__list a:hover{background:var(--ppt-bg); color:var(--ppt-ink); text-decoration:none}
.ppt-nav__list .current-menu-item > a,
.ppt-nav__list .current_page_item > a{color:var(--ppt-brand); background:var(--ppt-brand-l)}
.ppt-burger{
  display:none; margin-left:auto; width:46px; height:46px; border:1px solid var(--ppt-line);
  border-radius:8px; background:#fff; position:relative; cursor:pointer;
}
.ppt-burger__bars,
.ppt-burger__bars::before,
.ppt-burger__bars::after{
  position:absolute; left:13px; width:18px; height:2px; background:var(--ppt-ink); border-radius:2px; content:"";
}
.ppt-burger__bars{top:22px}
.ppt-burger__bars::before{top:-6px; left:0}
.ppt-burger__bars::after{top:6px; left:0}
.ppt-mobnav{display:none; padding:10px 22px 20px; border-top:1px solid var(--ppt-line); background:#fff}
.ppt-mobnav__list{list-style:none; margin:0 0 12px; padding:0}
.ppt-mobnav__list a{
  display:block; padding:13px 4px; font-size:16.5px; font-weight:600; color:var(--ppt-ink);
  border-bottom:1px solid var(--ppt-line2);
}

/* ------------------------------------------------------------------ hero */
.ppt-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(155deg,#0f2325 0%, var(--ppt-brand) 55%, #2c6a6c 100%);
  color:#fff; padding:62px 0 58px;
}
.ppt-hero--media{padding:86px 0 78px}
.ppt-hero__bg{position:absolute; inset:0; z-index:-1}
.ppt-hero__video,
.ppt-hero__slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.ppt-hero__slide{opacity:0; transition:opacity 1.6s ease-in-out; will-change:opacity, transform}
.ppt-hero__slide.is-active{opacity:1; animation:ppt-drift 14s ease-in-out forwards}
@keyframes ppt-drift{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.2%, -1.4%, 0)}
}
/* The veil keeps the headline readable whatever the photo behind it. */
.ppt-hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(11,28,29,.94) 0%, rgba(11,28,29,.82) 38%, rgba(15,40,42,.55) 70%, rgba(20,54,56,.45) 100%),
    linear-gradient(180deg, rgba(11,28,29,.35) 0%, rgba(11,28,29,0) 30%);
}
.ppt-hero--media .ppt-hero__stats .ppt-stat{
  background:rgba(9,26,27,.55); backdrop-filter:blur(6px); border-color:rgba(255,255,255,.16);
}
@media (prefers-reduced-motion: reduce){
  .ppt-hero__slide.is-active{animation:none}
  .ppt-hero__slide{transition:none}
}
@media (max-width:820px){
  .ppt-hero--media{padding:56px 0 48px}
  .ppt-hero__veil{
    background:linear-gradient(180deg, rgba(11,28,29,.90) 0%, rgba(11,28,29,.80) 55%, rgba(15,40,42,.72) 100%);
  }
}
.ppt-hero__inner{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.ppt-hero h1{margin:0 0 16px; letter-spacing:-.03em}
.ppt-hero__intro{color:#b7cccb; font-size:16.5px; max-width:640px; margin:0 0 26px}
.ppt-hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.ppt-hero .pp-btn--ghost{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25)}
.ppt-hero .pp-btn--ghost:hover{background:rgba(255,255,255,.18); color:#fff}
.ppt-hero__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.ppt-stat{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--ppt-r); padding:18px 16px;
}
.ppt-stat b{display:block; font-size:27px; letter-spacing:-.03em; line-height:1.15}
.ppt-stat span{font-size:12.5px; color:#a8c1c0}

/* -------------------------------------------------------------- sections */
.ppt-section{padding:52px 0}
.ppt-section__title{font-size:24px; margin:0}
.ppt-section__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.ppt-pagehead{padding:26px 0 20px}
.ppt-pagehead h1{margin:0 0 8px}
.ppt-pagehead__intro{color:var(--ppt-steel); max-width:760px}
.ppt-crumbs{font-size:13.5px; color:var(--ppt-grey); padding:16px 0 0}
.ppt-crumbs a{color:var(--ppt-steel)}

/* ------------------------------------------------------- category tiles */
.ppt-famblock{margin-bottom:26px}
.ppt-famblock__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 11px; padding-bottom:8px; border-bottom:1px solid var(--ppt-line);
}
.ppt-famblock__head .ppt-muted{font-size:12.5px}
.ppt-tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
.ppt-tile{
  display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--ppt-line);
  border-radius:var(--ppt-r); padding:15px 16px; color:inherit;
}
.ppt-tile:hover{border-color:var(--ppt-brand); text-decoration:none; box-shadow:0 6px 18px rgba(18,41,43,.07)}
.ppt-tile__icon{
  width:36px; height:36px; flex:0 0 36px; border-radius:8px; background:var(--ppt-brand-l);
  display:grid; place-items:center; color:var(--ppt-brand);
}
.ppt-tile__name{display:block; font-weight:600; font-size:14px; line-height:1.25}
.ppt-tile__count{display:block; font-size:12px; color:var(--ppt-grey)}

/* ------------------------------------------------------------ item page */
.ppt-item__top{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; padding:18px 0 10px; align-items:start}
.ppt-item__top--nomedia{grid-template-columns:minmax(0,760px)}
.ppt-item__flags{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.ppt-item__flags .pp-badge{position:static}
.ppt-item__title{margin:0 0 6px}
.ppt-item__sub{color:var(--ppt-grey); font-size:14.5px; margin:0 0 18px}
.ppt-pricebox{
  background:#fff; border:1px solid var(--ppt-line); border-radius:var(--ppt-r);
  padding:18px; margin-bottom:22px;
}
.ppt-pricebox__price{font-size:20px; font-weight:700; letter-spacing:-.02em; margin:0}
.ppt-pricebox__note{font-size:13.5px; color:var(--ppt-grey); margin:4px 0 14px}
/* The box held one button when it was written; it now holds up to four. They
   stack full width so the first one still reads as the main offer and the
   quieter ones line up under it rather than wrapping raggedly beside it. */
.ppt-pricebox .pp-btn{display:flex; width:100%}
.ppt-pricebox .pp-btn + .pp-btn{margin-top:8px}
.ppt-item__block{padding:26px 0}
.ppt-item__block h2{font-size:20px}

.ppt-stickybuy{display:none}

/* --------------------------------------------------------------- prose */
.ppt-footer__legalnav{margin-left:auto}
.ppt-footer__legallist{display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:0; padding:0}
/* Tall enough to hit with a thumb: Google asks for 24px, these were 18. */
.ppt-footer__legallist a{color:inherit; text-decoration:none; display:inline-block; padding:6px 0; min-height:28px}
.ppt-footer__legallist a:hover{text-decoration:underline}
@media (max-width:782px){
  .ppt-footer__legalnav{margin-left:0}
  .ppt-footer__legallist{gap:14px}
}

.ppt-prose{max-width:760px}

/* One house style for pasted text.
   Whatever a description arrives wearing — a font from a Word file, a size
   from a PDF, a colour from a portal listing — the page decides how it looks.
   The plugin strips this on save; these rules cover anything already stored. */
.ppt-prose [style],
.ppt-prose font,
.ppt-prose span{
  font-family:inherit !important; font-size:inherit !important; font-weight:inherit !important;
  color:inherit !important; background:none !important; letter-spacing:inherit !important;
  line-height:inherit !important;
}
.ppt-prose strong, .ppt-prose b{font-weight:700 !important}
.ppt-prose em, .ppt-prose i{font-style:italic !important}
.ppt-prose pre{
  white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; color:inherit;
  background:none; border:0; padding:0; margin:0 0 1em;
}
.ppt-prose h1,.ppt-prose h2,.ppt-prose h3{font-size:1.25rem; margin:1.6em 0 .5em}
.ppt-prose h4{font-size:1.08rem; margin:1.4em 0 .4em}
.ppt-prose table{width:100%; border-collapse:collapse; font-size:.95em}
.ppt-prose th,.ppt-prose td{border:1px solid var(--ppt-line,#dce5e5); padding:8px 10px; text-align:left}
.ppt-prose h2{margin-top:1.4em}
.ppt-prose ul,.ppt-prose ol{padding-left:1.3em}
.ppt-prose img{border-radius:var(--ppt-r); margin:1.2em 0}
.ppt-prose blockquote{
  margin:1.4em 0; padding:2px 0 2px 18px; border-left:3px solid var(--ppt-brand); color:var(--ppt-steel);
}
.ppt-page{background:#fff; border:1px solid var(--ppt-line); border-radius:var(--ppt-r); padding:26px; max-width:none}

/* Give the words back their reading measure.
   The card is meant to be wide and the text inside it narrow, but both classes
   sit on the same element — so .ppt-page's max-width:none was switching off
   .ppt-prose's 760px as well. Measured on the About us page: 1188px of text
   box, 110 characters to the line, where 65 to 75 is what people read without
   losing their place on the way back to the left margin.
   The card keeps its width. Only what is read inside it is narrowed, and the
   things that genuinely want the room — tables, images, embeds — are let out
   of it again. */
.ppt-page > *{max-width:72ch}
.ppt-page > table,
.ppt-page > figure,
.ppt-page > img,
.ppt-page > iframe,
.ppt-page > .wp-block-table,
.ppt-page > .wp-block-image,
.ppt-page > .wp-block-embed,
.ppt-page > .wp-block-columns{max-width:none}
/* ---------------------------------------------------- service pictograms */
/*
   One tinted tile and one line drawing per section of the services page.
   The drawings live here rather than in the page, and the page carries only a
   class name. Three reasons, all really the same reason: the German and the
   Spanish pages get the icons without anybody adding them, WPML's translation
   editor cannot delete or translate a picture it never sees, and changing one
   later is a single edit here rather than six across three languages.

   The tile is the pseudo-element's own background colour; the drawing sits on
   top of it as a background image. A data URI cannot read a custom property, so
   the stroke colour is written out here — if --ppt-brand ever changes, these
   change with it. Single quotes inside the SVG on purpose: a double quote would
   close the url("...") and take the rest of the rule with it.
*/
.ppt-svc{display:flex; align-items:center; gap:11px}
.ppt-svc::before{
  content:""; flex:0 0 auto; width:38px; height:38px; border-radius:9px;
  background-color:var(--ppt-brand-l);
  background-repeat:no-repeat; background-position:center; background-size:22px 22px;
}
.ppt-prose .ppt-svc{margin-top:1.8em}
.ppt-prose .ppt-svc + p{margin-top:0}
@media (max-width:520px){
  .ppt-svc{gap:9px}
  .ppt-svc::before{width:32px; height:32px; background-size:19px 19px}
}

.ppt-svc--search::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l4.5 4.5'/%3E%3Cpath d='M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E")}
.ppt-svc--value::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15.5'/%3E%3Cpath d='M8 20h8'/%3E%3Cpath d='M3.5 8h17'/%3E%3Cpath d='M6.6 8l-3 6.2h6z'/%3E%3Cpath d='M17.4 8l-3 6.2h6z'/%3E%3C/svg%3E")}
.ppt-svc--consign::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.8V4.6a1 1 0 011-1h7.2l8.2 8.2a1.4 1.4 0 010 2l-6.2 6.2a1.4 1.4 0 01-2 0z'/%3E%3Ccircle cx='7.6' cy='7.7' r='1.35'/%3E%3C/svg%3E")}
.ppt-svc--transport::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.2v3'/%3E%3Cpath d='M9.6 5.2h4.8l-1 2.6h-2.8z'/%3E%3Cpath d='M12 7.8v2.4'/%3E%3Crect x='3.6' y='10.2' width='16.8' height='9.6' rx='1.4'/%3E%3Cpath d='M3.6 14.4h16.8'/%3E%3C/svg%3E")}
.ppt-svc--viewing::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='5' width='19.2' height='14' rx='2.2'/%3E%3Cpath d='M10 9.6l5 2.4-5 2.4z'/%3E%3C/svg%3E")}
.ppt-svc--market::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.6 2.6 4 5.6 4 9s-1.4 6.4-4 9c-2.6-2.6-4-5.6-4-9s1.4-6.4 4-9z'/%3E%3C/svg%3E")}


/* -------------------------------------------------------- generic lists */
.ppt-postlist{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.ppt-postcard{background:#fff; border:1px solid var(--ppt-line); border-radius:var(--ppt-r); overflow:hidden; padding-bottom:16px}
.ppt-postcard__media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.ppt-postcard h2{font-size:18px; margin:14px 16px 6px}
.ppt-postcard p{margin:0 16px; color:var(--ppt-grey); font-size:14px}
.ppt-searchform{display:flex; gap:9px; max-width:520px; margin:16px 0}
.ppt-searchform input{
  flex:1; min-width:0; border:1px solid var(--ppt-line); border-radius:8px; padding:11px 13px; font-size:16px;
}
.ppt-404{text-align:center; padding:70px 0}
.ppt-404 .ppt-searchform{margin:20px auto}

/* ---------------------------------------------------------- sell banner */
.ppt-sell{
  background:var(--ppt-ink); color:#fff; border-radius:14px; padding:34px 38px;
  display:flex; gap:30px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.ppt-sell h2{margin:0 0 8px; font-size:23px}
.ppt-sell p{color:#a8c1c0; margin:0; max-width:660px; font-size:14.5px}

/* --------------------------------------------------------------- footer */
.ppt-footer{background:#0f2224; color:#9db1b0; margin-top:56px; padding:38px 0 0; font-size:14px}
.ppt-footer a{color:#c3d3d2}
.ppt-footer__inner{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:30px; padding-bottom:28px}
.ppt-footer__brand img{height:34px; width:auto; margin-bottom:12px}
.ppt-footer__list{list-style:none; margin:0; padding:0}
.ppt-footer__list a{display:block; padding:7px 0; min-height:28px}
.ppt-footer__legal{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.09); padding-top:18px; padding-bottom:26px; font-size:13px;
}

/* ------------------------------------------------------------- tablet */
@media (max-width:1000px){
  .ppt-nav{display:none}
  .ppt-burger{display:block}
  body.ppt-nav-open .ppt-mobnav{display:block}
  .ppt-hero__inner{grid-template-columns:1fr; gap:32px}
  .ppt-tiles{grid-template-columns:repeat(3, minmax(0,1fr))}
  .ppt-item__top{grid-template-columns:1fr; gap:26px}
  .ppt-postlist{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ppt-footer__inner{grid-template-columns:1fr 1fr}
}

/* -------------------------------------------------------------- phone */
@media (max-width:782px){
  .ppt-section{padding:36px 0}
  .ppt-hero{padding:40px 0 38px}
  .ppt-tiles{grid-template-columns:1fr}
  .ppt-postlist{grid-template-columns:1fr}
  .ppt-footer__inner{grid-template-columns:1fr}
  .ppt-sell{padding:24px}
  .ppt-page{padding:18px}

  .ppt-main{padding-bottom:78px}
  .ppt-stickybuy{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; gap:12px; align-items:center;
    background:#fff; border-top:1px solid var(--ppt-line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 22px rgba(18,41,43,.12); transition:transform .2s;
  }
  .ppt-stickybuy.is-hidden{transform:translateY(110%)}
  .ppt-stickybuy__text{flex:1; min-width:0; line-height:1.25}
  .ppt-stickybuy__text b{display:block; font-size:13.5px}
  .ppt-stickybuy__text span{
    display:block; font-size:11.5px; color:var(--ppt-grey);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .ppt-stickybuy .pp-btn{white-space:nowrap}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ------------------------------------------------- hero search & sections */
.ppt-hunt{
  display:flex; max-width:720px; margin:6px 0 14px; background:#fff;
  border-radius:12px; overflow:hidden; box-shadow:0 12px 34px rgba(0,0,0,.28);
}
.ppt-hunt select{
  border:0; border-right:1px solid var(--ppt-line,#dce5e5); background:#f2f6f6;
  padding:0 14px; font:inherit; font-size:14px; color:var(--ppt-ink,#12292B); max-width:220px;
}
.ppt-hunt input{flex:1; min-width:0; border:0; padding:16px; font:inherit; font-size:15px; outline:0}
.ppt-hunt button{
  border:0; background:var(--ppt-brand,#1F4D4F); color:#fff; font:inherit; font-weight:650;
  padding:0 26px; cursor:pointer;
}
.ppt-hunt button:hover{background:#164042}
.ppt-hunt__quick{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px; font-size:13px}
.ppt-hunt__quick a{
  color:#cfe3e2; text-decoration:none; background:rgba(255,255,255,.1);
  padding:6px 12px; border-radius:99px;
}
.ppt-hunt__quick a:hover{background:rgba(255,255,255,.2); color:#fff}

.ppt-badge{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ppt-brand,#1F4D4F); background:#e6eeee; padding:5px 10px; border-radius:99px; margin:0 0 14px;
}
.ppt-lead{color:#5d6b6c; margin:0 0 26px; max-width:660px}
.ppt-section--tint{background:#fff}
.ppt-section--tight{padding-top:44px; padding-bottom:10px}

.ppt-trust{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.ppt-trust__item{background:#fff; border:1px solid var(--ppt-line,#dce5e5); border-radius:12px; padding:20px}
.ppt-trust__num{
  width:34px; height:34px; border-radius:9px; background:#e6eeee; color:var(--ppt-brand,#1F4D4F);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; margin-bottom:12px;
}
.ppt-trust__item b{display:block; font-size:15px; margin-bottom:4px}
.ppt-trust__item p{margin:0; font-size:13.5px; color:#5d6b6c}

.ppt-cats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.ppt-cat{
  background:#fff; border:1px solid var(--ppt-line,#dce5e5); border-radius:12px; padding:16px 18px;
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  text-decoration:none; color:var(--ppt-ink,#12292B); font-size:14.5px;
}
.ppt-cat span{color:#8C9193; font-size:13px}
.ppt-cat:hover{border-color:var(--ppt-brand,#1F4D4F); box-shadow:0 4px 14px rgba(31,77,79,.08)}

.ppt-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:ppt-step}
.ppt-step{
  background:#fff; border:1px solid var(--ppt-line,#dce5e5); border-radius:12px;
  padding:24px 20px 22px; position:relative;
}
.ppt-step::before{
  counter-increment:ppt-step; content:counter(ppt-step);
  position:absolute; top:-14px; left:20px; width:28px; height:28px; border-radius:50%;
  background:var(--ppt-brand,#1F4D4F); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.ppt-step b{display:block; margin-bottom:6px; font-size:15px}
.ppt-step p{margin:0; font-size:13.5px; color:#5d6b6c}

.ppt-makers{display:flex; flex-wrap:wrap; gap:10px}
.ppt-makers a{
  background:#fff; border:1px solid var(--ppt-line,#dce5e5); border-radius:99px; padding:9px 16px;
  font-size:14px; color:var(--ppt-ink,#12292B); text-decoration:none; display:flex; gap:8px; align-items:center;
}
.ppt-makers a span{color:#8C9193; font-size:12.5px}
.ppt-makers a:hover{border-color:var(--ppt-brand,#1F4D4F)}

.ppt-split{display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:stretch}
.ppt-panel{background:var(--ppt-brand,#1F4D4F); color:#fff; border-radius:16px; padding:34px}
.ppt-panel h2{color:#fff; margin-top:0}
.ppt-panel p{color:#c3d6d5}
.ppt-panel .pp-btn{background:#fff; color:var(--ppt-brand,#1F4D4F)}
.ppt-alerts{background:#fff; border:1px solid var(--ppt-line,#dce5e5); border-radius:16px; padding:28px}

@media (max-width:1000px){
  .ppt-trust,.ppt-cats,.ppt-steps{grid-template-columns:repeat(2,1fr)}
  .ppt-split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ppt-trust,.ppt-cats,.ppt-steps{grid-template-columns:1fr}
  .ppt-hunt{flex-wrap:wrap; box-shadow:0 8px 22px rgba(0,0,0,.24)}
  .ppt-hunt select,.ppt-hunt input{width:100%; max-width:none; border-right:0}
  .ppt-hunt select{border-bottom:1px solid var(--ppt-line,#dce5e5); padding:14px}
  .ppt-hunt button{width:100%; padding:15px}
}

/* ----------------------------------------------------- the category strip
   Every category, once, on the catalogue, on each category page and at the
   foot of every machine page. Its job is as much to be followed as to be
   read: nineteen category pages sat in Search Console as "discovered, not
   indexed", which is what happens to a page nothing links to. */
.ppt-strip{margin:40px 0 8px; padding-top:22px; border-top:1px solid var(--ppt-line)}
.ppt-strip__title{margin:0 0 12px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ppt-grey)}
.ppt-strip__links{display:flex; flex-wrap:wrap; gap:8px}
.ppt-strip__link{
  display:inline-flex; align-items:baseline; gap:7px; padding:7px 13px;
  background:#fff; border:1px solid var(--ppt-line); border-radius:999px;
  font-size:14.5px; text-decoration:none; color:var(--ppt-ink);
}
.ppt-strip__link:hover,.ppt-strip__link:focus{border-color:var(--ppt-brand-soft); color:var(--ppt-brand)}
.ppt-strip__count{font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ppt-grey)}