/* PharmaPlanta catalogue — brand: petrol #1F4D4F, warm grey #8C9193. */

.pp-catalogue{
  --pp-brand:#1F4D4F; --pp-brand-d:#143537; --pp-brand-l:#e6eeee;
  --pp-ink:#12292B; --pp-steel:#3D5A5C; --pp-grey:#8C9193;
  --pp-line:#dce5e5; --pp-line2:#eef3f3; --pp-bg:#f3f7f7;
  --pp-good:#2b6f4c; --pp-good-l:#e6f1ea; --pp-warn:#a8710f; --pp-warn-l:#fbf2e2;
  --pp-crit:#9c3b3b; --pp-crit-l:#f6eaea;
  --pp-r:10px;
  display:grid; grid-template-columns:266px minmax(0,1fr); gap:26px; align-items:start;
}
.pp-catalogue *,
.pp-quote *{box-sizing:border-box}
.pp-catalogue__main{min-width:0}

/* --- buttons ------------------------------------------------------------ */
.pp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--pp-brand,#1F4D4F); color:#fff; border:0; border-radius:8px;
  padding:11px 18px; font-weight:600; font-size:14.5px; line-height:1.2;
  cursor:pointer; text-decoration:none; min-height:44px;
}
.pp-btn:hover, .pp-btn:focus{background:var(--pp-brand-d,#143537); color:#fff; text-decoration:none}
.pp-btn--ghost{background:#fff; color:var(--pp-ink,#12292B); border:1px solid var(--pp-line,#dce5e5)}
.pp-btn--ghost:hover{background:var(--pp-bg,#f3f7f7); color:var(--pp-ink,#12292B)}
.pp-btn--sm{padding:8px 13px; font-size:13.5px; min-height:40px}
.pp-btn--block{width:100%}
.pp-count{background:rgba(31,77,79,.12); border-radius:20px; padding:1px 7px; font-size:12px}

/* --- filters ------------------------------------------------------------ */
.pp-filters{
  background:#fff; border:1px solid var(--pp-line); border-radius:var(--pp-r);
  padding:18px; position:sticky; top:20px;
}
.pp-filters__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.pp-filters__head h2{font-size:16px; margin:0}
.pp-search{
  width:100%; border:1px solid var(--pp-line); border-radius:8px; padding:10px 12px;
  font-size:16px; min-height:44px; margin-bottom:6px;
}
.pp-fg{border:0; border-top:1px solid var(--pp-line); margin:0; padding:12px 0 4px}
.pp-fg legend{
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--pp-grey); padding:0; margin-bottom:6px;
}
.pp-fg select{width:100%; border:1px solid var(--pp-line); border-radius:8px; padding:10px; font-size:15px; min-height:44px}
.pp-check{
  display:flex; align-items:flex-start; gap:9px; padding:6px 0; min-height:40px;
  font-size:13.5px; color:var(--pp-steel); cursor:pointer; line-height:1.35;
}
.pp-check input{width:18px; height:18px; margin:2px 0 0; flex:0 0 18px; accent-color:var(--pp-brand)}
.pp-check__label{flex:1}
.pp-check__count{flex:0 0 auto; padding-left:8px; font-size:12px; color:var(--pp-grey)}
.pp-sheet-handle{display:none}
.pp-applybar{display:none}

/* --- results ------------------------------------------------------------ */
.pp-mobbar{display:none; gap:9px; margin-bottom:14px}
.pp-resulthead{margin-bottom:16px; font-size:14px; color:var(--pp-steel)}
.pp-resulthead b{font-size:17px; color:var(--pp-ink)}
.pp-sort{border:1px solid var(--pp-line); border-radius:8px; padding:9px 12px; font-size:14px; background:#fff; min-height:44px}
.pp-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.pp-card{
  background:#fff; border:1px solid var(--pp-line); border-radius:var(--pp-r);
  overflow:hidden; display:flex; flex-direction:column;
}
.pp-card:hover{box-shadow:0 8px 24px rgba(18,41,43,.08)}
.pp-card__media{position:relative; display:block; aspect-ratio:4/3; background:var(--pp-line2); overflow:hidden}
.pp-card__img, .pp-card__media img{width:100%; height:100%; object-fit:cover; display:block}
.pp-card__placeholder{display:block; width:100%; height:100%; background:linear-gradient(160deg,#e8efef,#cfdcdc)}
.pp-card__ref{
  position:absolute; right:10px; bottom:10px; background:rgba(18,41,43,.8); color:#fff;
  font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:5px;
}
.pp-badge{
  position:absolute; left:10px; top:10px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:5px;
  background:#fff; color:var(--pp-steel);
}
.pp-badge--available{background:var(--pp-good-l); color:var(--pp-good)}
.pp-badge--reserved{background:var(--pp-warn-l); color:var(--pp-warn)}
.pp-badge--sold{background:var(--pp-crit-l); color:var(--pp-crit)}
.pp-card__body{padding:15px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1}
.pp-card__cat{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pp-brand)}
.pp-card__title{font-size:16.5px; margin:0; line-height:1.25}
.pp-card__title a{color:var(--pp-ink); text-decoration:none}
.pp-card__title a:hover{color:var(--pp-brand)}
.pp-card__summary{font-size:13.5px; color:var(--pp-grey); margin:0; flex:1}
.pp-card__meta{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--pp-steel); border-top:1px solid var(--pp-line); padding-top:10px}
.pp-card__actions{display:flex; gap:8px}
.pp-card__actions .pp-btn{flex:1; white-space:nowrap; font-size:13px; padding:9px 8px}
.pp-empty{background:#fff; border:1px dashed var(--pp-line); border-radius:var(--pp-r); padding:44px; text-align:center; color:var(--pp-grey)}
.pp-pagination{display:flex; gap:6px; justify-content:center; margin-top:26px; flex-wrap:wrap}
.pp-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:42px;
  padding:0 10px; border:1px solid var(--pp-line); border-radius:8px; background:#fff;
  color:var(--pp-steel); text-decoration:none; font-size:14px;
}
.pp-pagination .page-numbers.current{background:var(--pp-brand); border-color:var(--pp-brand); color:#fff}
.pp-results.is-loading{opacity:.45; transition:opacity .15s}

/* --- specs, gallery, docs ----------------------------------------------- */
.pp-specs{width:100%; border-collapse:collapse; background:#fff; border:1px solid #dce5e5; border-radius:10px; overflow:hidden}
.pp-specs tr{border-bottom:1px solid #dce5e5}
.pp-specs tr:last-child{border-bottom:0}
.pp-specs th, .pp-specs td{padding:11px 14px; font-size:14.5px; text-align:left; vertical-align:top}
.pp-specs th{width:44%; background:#fafcfc; color:#8C9193; font-weight:500}
.pp-specs td{font-weight:600; color:#12292B}
.pp-docs{margin-top:22px}
.pp-docs h3{font-size:17px; margin:0 0 8px}
.pp-docs__note{font-size:13px; color:#8C9193}
.pp-gal__main{
  position:relative; display:block; width:100%; padding:0; cursor:zoom-in;
  background:#eef3f3; border:1px solid #dce5e5; border-radius:10px; overflow:hidden; aspect-ratio:4/3;
}
.pp-gal__main img{width:100%; height:100%; object-fit:cover; display:block}
.pp-gal__main:focus-visible{outline:3px solid #1F4D4F; outline-offset:2px}
.pp-gal__zoom{
  position:absolute; right:10px; bottom:10px; width:38px; height:38px; border-radius:50%;
  background:rgba(18,41,43,.72); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; pointer-events:none; transition:background .15s;
}
.pp-gal__zoom::before{
  content:''; width:15px; height:15px; border:2px solid #fff; border-radius:50%;
  box-shadow:8px 8px 0 -6px #fff; transform:translate(-2px,-2px);
}
.pp-gal__main:hover .pp-gal__zoom{background:#1F4D4F}
.pp-gal__thumb--hidden{display:none}

/* ------------------------------------------------------------ lightbox */
body.pp-lb-open{overflow:hidden}
.pp-lb{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; gap:8px;
  background:rgba(10,24,25,.94); padding:16px;
}
.pp-lb.is-open{display:flex}
.pp-lb__figure{margin:0; max-width:min(1400px,100%); max-height:100%; display:flex; align-items:center; justify-content:center}
.pp-lb__img{max-width:100%; max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:6px; display:block}
.pp-lb__btn{
  flex:0 0 auto; width:52px; height:52px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.pp-lb__btn:hover{background:rgba(255,255,255,.24)}
.pp-lb__btn:focus-visible{outline:3px solid #fff; outline-offset:2px}
.pp-lb__close{position:absolute; top:16px; right:16px; font-size:20px}
.pp-lb--single .pp-lb__prev,
.pp-lb--single .pp-lb__next{display:none}
.pp-lb__count{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  margin:0; color:#cfdcdc; font-size:14px; letter-spacing:.04em;
}
@media (max-width:640px){
  .pp-lb{padding:8px; gap:2px}
  .pp-lb__btn{width:44px; height:44px; font-size:22px}
  .pp-lb__prev{position:absolute; left:6px; top:50%; transform:translateY(-50%)}
  .pp-lb__next{position:absolute; right:6px; top:50%; transform:translateY(-50%)}
  .pp-lb__img{max-height:78vh}
}
.pp-gal__thumbs{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:9px; margin-top:9px}
.pp-gal__thumb{
  padding:0; border:1px solid #dce5e5; border-radius:7px; overflow:hidden; background:#eef3f3;
  cursor:pointer; aspect-ratio:4/3; min-height:0;
}
.pp-gal__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pp-gal__thumb.is-active{border-color:#1F4D4F; box-shadow:0 0 0 2px #e6eeee}

/* --- quote form --------------------------------------------------------- */
.pp-quote{
  background:#fff; border:1px solid #dce5e5; border-radius:12px; padding:24px; margin-top:30px;
  scroll-margin-top:90px;
}
.pp-quote__title{font-size:20px; margin:0 0 6px}
.pp-quote__lead{color:#8C9193; font-size:14.5px; margin:0 0 18px}
.pp-formgrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-bottom:16px}
.pp-formfield{display:flex; flex-direction:column; gap:5px}
.pp-formfield--wide{grid-column:1 / -1}
.pp-formfield label{font-size:12.5px; font-weight:650; color:#3D5A5C}
.pp-formfield input, .pp-formfield textarea{
  width:100%; border:1px solid #dce5e5; border-radius:8px; padding:11px 12px;
  font-size:16px; min-height:46px; font-family:inherit;
}
.pp-formfield textarea{min-height:96px; line-height:1.5}
.pp-formfield input:focus, .pp-formfield textarea:focus{border-color:#1F4D4F; box-shadow:0 0 0 2px #e6eeee; outline:none}
.pp-req{color:#9c3b3b}
.pp-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.pp-form__legal{font-size:12px; color:#8C9193; margin:12px 0 0; text-align:center}
.pp-note{border-radius:9px; padding:14px 16px; margin-bottom:16px; font-size:14px}
.pp-note--ok{background:#e6f1ea; border:1px solid #c6e0d1; color:#2b6f4c}
.pp-note--ok h3{margin:0 0 4px; font-size:17px}
.pp-note--warn{background:#fbf2e2; border:1px solid #efdfc0; color:#7b520c}

/* --- tablet and phone --------------------------------------------------- */
@media (max-width: 1000px){
  .pp-catalogue{grid-template-columns:230px minmax(0,1fr); gap:18px}
  .pp-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 782px){
  .pp-catalogue{grid-template-columns:1fr; gap:0}
  .pp-mobbar{display:flex}
  .pp-mobbar .pp-btn{flex:1}
  .pp-mobbar .pp-sort{flex:1; min-width:0}
  .pp-resulthead + .pp-grid{margin-top:0}
  .pp-grid{grid-template-columns:1fr}
  .pp-formgrid{grid-template-columns:1fr}

  .pp-filters{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:9999; margin:0;
    max-height:84vh; overflow:auto; border-radius:16px 16px 0 0; border-width:1px 0 0;
    transform:translateY(103%); transition:transform .24s cubic-bezier(.3,.7,.3,1);
    box-shadow:0 -10px 40px rgba(18,41,43,.3); padding-top:8px;
  }
  .pp-filters.is-open{transform:none}
  .pp-sheet-handle{display:block; width:100%; background:none; border:0; padding:2px 0 12px; cursor:pointer}
  .pp-sheet-handle::before{content:""; display:block; width:42px; height:4px; border-radius:3px; background:#dce5e5; margin:0 auto}
  .pp-applybar{
    display:block; position:sticky; bottom:0; background:#fff; padding:12px 0 14px;
    border-top:1px solid #dce5e5; margin-top:14px;
  }
  .pp-applybar .pp-btn{width:100%; padding:13px}
}

.pp-backdrop{
  position:fixed; inset:0; background:rgba(18,41,43,.48); z-index:9998;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.pp-backdrop.is-open{opacity:1; pointer-events:auto}

/* --- WhatsApp button ----------------------------------------------------- */
.pp-btn--wa{background:#1f7a4d}
.pp-btn--wa:hover,.pp-btn--wa:focus{background:#175f3c; color:#fff}

/* --- saved search / alert form ------------------------------------------- */
.pp-alert{
  background:#fff; border:1px solid #dce5e5; border-radius:12px; padding:24px; margin-top:30px;
  scroll-margin-top:90px;
}
.pp-alert__title{font-size:20px; margin:0 0 6px}
.pp-alert__lead{color:#8C9193; font-size:14.5px; margin:0 0 18px}
.pp-alert .pp-fg{border-top:1px solid #dce5e5; margin-top:6px}
.pp-alert__group{
  margin:10px 0 2px; font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#1F4D4F;
}
.pp-alert .pp-check{padding:5px 0}

/* steps */
.pp-alert__step{margin-bottom:22px}
.pp-alert__step:last-child{margin-bottom:0}
.pp-alert__steptitle{
  display:flex; align-items:center; gap:9px; margin:0 0 12px;
  font-size:15px; font-weight:700; color:#12292B;
}
.pp-alert__stepno{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:#1F4D4F; color:#fff;
  font-size:12px; font-weight:700; flex:0 0 22px;
}

/* the two choices */
.pp-choice{
  display:flex; align-items:flex-start; gap:11px; padding:12px 14px; margin-bottom:8px;
  border:1px solid #dce5e5; border-radius:10px; cursor:pointer; background:#fff;
  transition:border-color .15s, background .15s;
}
.pp-choice:hover{border-color:#b9cccc}
.pp-choice input{width:18px; height:18px; margin:2px 0 0; flex:0 0 18px; accent-color:#1F4D4F}
.pp-choice__text{display:flex; flex-direction:column; gap:2px; line-height:1.35}
.pp-choice__text b{font-size:14.5px; color:#12292B}
.pp-choice__text small{font-size:12.5px; color:#8C9193}
.pp-choice:has(input:checked){border-color:#1F4D4F; background:#f3f7f7}

/* category picker */
.pp-alert__cats{
  margin:4px 0 16px; padding:14px 16px; border:1px solid #dce5e5;
  border-radius:10px; background:#fbfdfd;
}
.pp-alert__cats.is-collapsible{display:none}
.pp-alert__cats.is-collapsible.is-open{display:block}
.pp-alert__cats .pp-alert__group:first-child{margin-top:0}
.pp-alert__grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 18px}
.pp-alert__fine{margin:12px 0 0; font-size:12px; color:#8C9193; text-align:center}

.pp-consent{
  align-items:flex-start; margin:14px 0 16px; padding:12px 14px;
  background:#f3f7f7; border:1px solid #dce5e5; border-radius:9px; font-size:13.5px;
}
@media (max-width:782px){
  .pp-alert{padding:18px; border-radius:10px}
  .pp-alert__grid{grid-template-columns:1fr}
  .pp-alert__cats{padding:12px 13px}
}

.pp-formfield__hint{display:block; margin-top:5px; font-size:12.5px; color:#8C9193}

/* A tick box inside the enquiry form. The generic rules above dress every
   input in the form as a full-width text field, and they sit later in this
   file than .pp-check does, so the box needs saying again here. */
.pp-formfield .pp-check--form{
  flex-direction:row; align-items:flex-start; gap:10px;
  font-size:14px; font-weight:400; color:#3D5A5C; cursor:pointer;
  padding:8px 0; margin:0;
}
.pp-formfield .pp-check--form input[type="checkbox"]{
  width:20px; height:20px; min-height:0; flex:0 0 20px; margin:1px 0 0;
  padding:0; border:1px solid var(--pp-line,#dce5e5); border-radius:4px;
  accent-color:var(--pp-brand,#1F4D4F);
}
.pp-formfield .pp-check--form input[type="checkbox"]:focus{
  outline:2px solid #1F4D4F; outline-offset:2px; box-shadow:none;
}
.pp-formfield select{
  width:100%; padding:11px 12px; border:1px solid #dce5e5; border-radius:9px;
  font:inherit; font-size:15px; background:#fff; color:#12292B;
}
.pp-formfield select:focus{outline:2px solid #1F4D4F; outline-offset:1px}
/* Only after the visitor has actually typed something and moved on: an empty
   required field must not greet them in red the moment the page loads. */
.pp-form input:user-invalid,
.pp-form textarea:user-invalid{border-color:#b3563f}

/* --- video --------------------------------------------------------------- */
.pp-video{margin-top:26px}
.pp-video__title{font-size:18px; margin:0 0 12px}
.pp-video__frame{
  position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden;
  background:#12292B; border:1px solid #dce5e5;
}
.pp-video__frame--portrait{padding-top:0; aspect-ratio:9/16; max-width:360px; max-height:70vh}
.pp-video__frame iframe,
.pp-video__frame video,
.pp-video__frame embed,
.pp-video__frame object{position:absolute; inset:0; width:100%; height:100%; border:0}