/* ============================================================
   pricelist.css — Pricelist page
   Load AFTER css/style.css. Everything is scoped to .pl-* / body.pl-page
   (own prefix, so it can never collide with classes in style.css).
   Mobile-first; tablet >=768px; desktop >=1024px.
   No <header>/<section>/<footer> elements are used in the page (style.css styles those tags globally).
   ============================================================ */

body.pl-page{
  --pl-grey:#F5F5F5;
  --pl-muted:#7F7F78;
  --pl-line:#E9E9E6;
  --pl-header-h:70px;
  background:#ECECEC;
  padding-bottom:0;
}
.pl-page [hidden]{display:none !important;}
.pl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
body.pl-modal-open{overflow:hidden;}

/* ---------- Header: same .header-v2-overlay as every page + a dark band behind it ---------- */
.pl-main{position:relative;padding:calc(var(--pl-header-h) + 26px) 16px 56px;}
.pl-main::before{content:'';position:absolute;top:0;left:0;right:0;height:var(--pl-header-h);background:var(--green-dark,#0A2318);}
.pl-wrap{max-width:1280px;margin:0 auto;}

.pl-title{margin:0;font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1.05;color:#16181B;}
.pl-sub{margin:10px 0 0;font-size:1rem;color:var(--pl-muted);}

/* ---------- Hero ---------- */
.pl-hero{
  position:relative;overflow:hidden;margin-top:26px;border-radius:22px;min-height:230px;
  background:#1B1F1D;color:#fff;display:flex;align-items:flex-end;
}
.pl-hero-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;}
.pl-hero::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(18,20,19,.94) 0%,rgba(18,20,19,.7) 42%,rgba(18,20,19,0) 85%);}
.pl-hero-copy{position:relative;z-index:2;padding:22px 20px;}
.pl-hero-copy h2{margin:0;font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.05;text-transform:uppercase;}
.pl-hero-copy p{margin:8px 0 0;font-size:.95rem;}

/* ---------- Filters ---------- */
.pl-bar{margin-top:22px;}
.pl-chips{display:flex;flex-wrap:wrap;margin:0 -4px;}
.pl-chip{
  margin:0 4px 8px;padding:13px 22px;border-radius:14px;background:var(--pl-grey);
  font-weight:700;font-size:.95rem;color:#16181B;
}
.pl-chip.is-active{background:var(--yellow);}
.pl-tools{display:flex;flex-wrap:wrap;align-items:center;margin-top:6px;}
.pl-select{position:relative;flex:1 1 180px;min-width:0;margin:0 10px 8px 0;}
.pl-select select{
  display:block;width:100%;height:50px;padding:0 44px 0 18px;border:0;border-radius:14px;background:var(--pl-grey);
  font-family:inherit;font-weight:700;font-size:.95rem;color:#16181B;-webkit-appearance:none;appearance:none;cursor:pointer;
}
.pl-select::after{content:'';position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;pointer-events:none;
  border-right:2px solid #16181B;border-bottom:2px solid #16181B;transform:rotate(45deg);}
.pl-toggle{display:flex;flex:1 1 220px;margin:0 0 8px;padding:4px;border-radius:16px;background:var(--pl-grey);}
.pl-tog{flex:1 1 auto;padding:12px 14px;border-radius:12px;font-weight:700;font-size:.9rem;color:#85857E;text-align:center;white-space:nowrap;}
.pl-tog.is-active{background:var(--yellow);color:#16181B;}
.pl-chip:focus-visible,.pl-tog:focus-visible,.pl-select select:focus-visible,.pl-quote:focus-visible,.pl-pdf:focus-visible{outline:2.5px solid #16181B;outline-offset:2px;}

/* ---------- Table (becomes cards on phones) ---------- */
.pl-card{margin-top:12px;background:#fff;border-radius:26px;padding:14px;}
.pl-table{width:100%;border-collapse:separate;border-spacing:0;}
.pl-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);}   /* phones: hidden, cells carry their own labels */
.pl-table th{
  padding:16px 14px;background:#EDEDED;text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pl-muted);
}
.pl-table th:first-child{border-radius:14px 0 0 14px;}
.pl-table th:last-child{border-radius:0 14px 14px 0;}
.pl-table td{padding:0;font-size:.95rem;color:#16181B;vertical-align:middle;}

/* card layout (phones): name / specs / prices / button, each on its own row (floats + clears: same in every browser) */
.pl-table,.pl-table tbody{display:block;}
.pl-row{display:block;padding:16px 16px 14px;margin-bottom:10px;border-radius:16px;background:#fff;border:1px solid var(--pl-line);}
.pl-row.is-alt{background:var(--pl-grey);border-color:var(--pl-grey);}
.pl-row::after{content:'';display:block;clear:both;}
.pl-row td{display:block;}
.pl-c-model{float:left;font-weight:800;font-size:1.1rem;line-height:1.3;}
.pl-row .pl-c-variant{overflow:hidden;padding-left:8px;font-size:1.05rem;line-height:1.3;}      /* overflow:hidden lets it sit beside the floated model name */
.pl-c-fuel,.pl-c-trans{float:left;clear:none;margin-top:4px;font-size:.85rem;color:var(--pl-muted);}
.pl-c-fuel{clear:left;}
.pl-c-trans::before{content:'\00B7';margin:0 7px;}
.pl-c-ex,.pl-c-on{float:left;width:49%;margin-top:12px;}
.pl-c-ex{clear:left;}
.pl-c-ex::before,.pl-c-on::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pl-muted);}
.pl-price{font-size:.95rem;color:#55554F;}
.pl-table[data-price="ex"] .pl-c-ex .pl-price,
.pl-table[data-price="onroad"] .pl-c-on .pl-price{font-weight:800;font-size:1.3rem;color:#16181B;}
.pl-table[data-price="ex"] .pl-c-on .pl-price,
.pl-table[data-price="onroad"] .pl-c-ex .pl-price{font-weight:600;}
.pl-row .pl-c-act{clear:both;padding-top:14px;}
.pl-quote{display:block;width:100%;padding:13px 22px;border-radius:14px;background:var(--yellow);font-weight:700;font-size:.9rem;color:#16181B;text-align:center;white-space:nowrap;}
.pl-quote:hover{filter:brightness(.97);}

.pl-pdf{
  display:block;margin-top:22px;padding:19px 24px;border-radius:16px;background:var(--yellow);
  font-weight:700;font-size:1.02rem;color:#16181B;text-align:center;
}
.pl-pdf:hover{filter:brightness(.97);}
.pl-note{margin:18px 0 0;font-size:.85rem;color:var(--pl-muted);}

/* ---------- Get Quote dialog ---------- */
.pl-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;}
.pl-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(14,16,15,.6);}
.pl-dialog{
  position:relative;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow-y:auto;
  padding:28px 22px 22px;border-radius:24px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.pl-dialog:focus{outline:none;}
.pl-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;background:var(--pl-grey);font-size:1.5rem;line-height:1;color:#16181B;}
.pl-x:hover{filter:brightness(.95);}
.pl-dtitle{margin:0 44px 6px 0;font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.2;color:#16181B;}
.pl-qcar{margin:0 0 12px;font-size:.95rem;font-weight:600;color:#3A3A36;}
.pl-qprices{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:var(--pl-grey);}
.pl-qprices > div{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:.88rem;}
.pl-qprices dt{margin:0;color:var(--pl-muted);}
.pl-qprices dd{margin:0 0 0 12px;font-weight:700;color:#16181B;}
.pl-field{margin-bottom:14px;}
.pl-field label{display:block;margin:0 0 6px 2px;font-size:.78rem;font-weight:600;color:var(--pl-muted);}
.pl-opt{font-weight:400;}
.pl-field input{
  display:block;width:100%;height:50px;padding:0 16px;border:0;border-radius:12px;background:var(--pl-grey);
  font-family:inherit;font-size:.95rem;color:#16181B;-webkit-appearance:none;appearance:none;
}
.pl-field input::placeholder{color:#8F8F88;}
.pl-field input:focus{outline:2.5px solid #16181B;outline-offset:2px;}
.pl-field input.is-invalid{outline:2px solid #B3261E;}
.pl-error{margin:6px 0 0 4px;font-size:.78rem;line-height:1.3;color:#B3261E;}
.pl-error a{text-decoration:underline;}
.pl-error-form{margin:4px 0 12px;padding:10px 12px;background:#FBEAE8;border-radius:10px;}
.pl-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.pl-submit{display:block;width:100%;height:54px;line-height:54px;border-radius:14px;background:var(--yellow);font-weight:700;font-size:1rem;color:#16181B;text-align:center;cursor:pointer;}
.pl-submit:hover{filter:brightness(.97);}
.pl-submit[disabled]{opacity:.6;cursor:wait;}
#plDone p{margin:0 0 18px;font-size:.98rem;line-height:1.5;color:#3A3A36;}

/* ============================================================
   TABLET (>=768px)
   ============================================================ */
@media (min-width:768px){
  .pl-main{padding-left:32px;padding-right:32px;}
  .pl-title{font-size:3rem;}
  .pl-sub{font-size:1.1rem;}
  .pl-hero{min-height:230px;border-radius:26px;align-items:center;}
  .pl-hero-img{left:auto;right:0;width:auto;height:100%;max-width:none;object-fit:fill;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%);}
  .pl-hero::after{background:linear-gradient(90deg,rgba(18,20,19,.94) 0%,rgba(18,20,19,.72) 38%,rgba(18,20,19,0) 78%);}
  .pl-hero-copy{padding:34px 44px;}
  .pl-hero-copy h2{font-size:2.4rem;}
  .pl-hero-copy p{font-size:1.1rem;}
  .pl-bar{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;}
  .pl-tools{margin-top:0;flex-wrap:nowrap;}
  .pl-select{flex:0 0 220px;width:220px;margin:0 10px 8px 0;}
  .pl-toggle{display:block;flex:0 0 auto;white-space:nowrap;}                 /* plain inline buttons: no nested flex to mis-size */
  .pl-tog{display:inline-block;flex:none;padding:12px 22px;}

  /* real table */
  .pl-card{padding:20px 22px 12px;border-radius:30px;}
  .pl-table{display:table;}
  .pl-table thead{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;display:table-header-group;}
  .pl-table tbody{display:table-row-group;}
  .pl-table tr,.pl-table thead tr{display:table-row;}
  .pl-table td,.pl-table th{display:table-cell;}
  .pl-row{display:table-row;margin:0;padding:0;border:0;border-radius:0;background:transparent;}
  .pl-row::after{content:none;display:none;}
  .pl-c-model,.pl-c-variant,.pl-c-fuel,.pl-c-trans,.pl-c-ex,.pl-c-on,.pl-c-act{float:none;clear:none;width:auto;overflow:visible;}
  .pl-row.is-alt{background:transparent;}
  .pl-row td{padding:16px 14px;}
  .pl-row.is-alt td{background:var(--pl-grey);}
  .pl-row.is-alt td:first-child{border-radius:14px 0 0 14px;}
  .pl-row.is-alt td:last-child{border-radius:0 14px 14px 0;}
  .pl-c-model,.pl-c-variant,.pl-c-fuel,.pl-c-trans,.pl-c-ex,.pl-c-on{display:table-cell !important;width:auto;margin:0;vertical-align:middle;}
  .pl-c-model{font-size:.98rem;}
  .pl-c-variant{margin:0;font-size:.98rem;}
  .pl-c-fuel,.pl-c-trans{margin:0;font-size:.98rem;color:var(--pl-muted);}
  .pl-c-trans::before{content:none;}
  .pl-c-ex::before,.pl-c-on::before{content:none;}
  .pl-price{font-size:.98rem;}
  .pl-table[data-price="ex"] .pl-c-ex .pl-price,
  .pl-table[data-price="onroad"] .pl-c-on .pl-price{font-size:1rem;}
  .pl-row .pl-c-variant{padding-left:14px;font-size:.98rem;}
  .pl-row .pl-c-act{padding-top:16px;margin:0;text-align:right;}
  .pl-quote{display:inline-block;width:auto;padding:11px 22px;border-radius:16px;font-size:.88rem;}
  .pl-table th:nth-child(1){width:10%;} .pl-table th:nth-child(2){width:15%;} .pl-table th:nth-child(3){width:15%;}
  .pl-table th:nth-child(4){width:14%;} .pl-table th:nth-child(5){width:17%;} .pl-table th:nth-child(6){width:17%;}
  .pl-pdf{display:inline-block;padding:20px 62px;font-size:1.05rem;}
  .pl-dialog{padding:32px 30px 28px;}
}

/* ============================================================
   DESKTOP (>=1024px)
   ============================================================ */
@media (min-width:1024px){
  body.pl-page{--pl-header-h:132px;}
  .pl-main{padding:calc(var(--pl-header-h) + 34px) 40px 80px;}
  .pl-title{font-size:3.5rem;}
  .pl-hero{min-height:297px;border-radius:28px;margin-top:40px;}
  .pl-hero-copy{padding:40px 48px;}
  .pl-hero-copy h2{font-size:3rem;}
  .pl-hero-copy p{font-size:1.25rem;}
  .pl-bar{margin-top:28px;align-items:center;}
  .pl-card{padding:22px 26px 14px;border-radius:34px;}
  .pl-row td{padding:17px 16px;}
  .pl-table th{padding:18px 16px;}
}