:root{
  --rec-navy:#071d37;
  --rec-blue:#1769e8;
  --rec-cyan:#29c3d5;
  --rec-ink:#10233f;
  --rec-muted:#536b83;
  --rec-line:#d8e3ee;
  --rec-soft:#f3f7fc;
  --rec-max:1320px;
}
.mppm-rec-wrap{width:min(calc(100% - var(--mppm-page-gutter,48px)),var(--rec-max));margin:0 auto}
.mppm-recommendations-page,.mppm-recommendation-single{background:#fff;color:var(--rec-ink)}
.mppm-rec-hero{padding:66px 0;background:linear-gradient(118deg,#071a35 0%,#0b3159 58%,#0d4d6c 100%);color:#fff}
.mppm-rec-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:42px;align-items:center}
.mppm-rec-eyebrow{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;border:1px solid rgba(125,199,255,.32);background:rgba(255,255,255,.06);color:#9ed8ff;font-size:10px;font-weight:800;letter-spacing:.05em}
.mppm-rec-eyebrow.is-light{background:#edf5ff;border-color:#d8e8fa;color:#1769e8}
.mppm-rec-hero h1{max-width:820px;margin:15px 0 12px;color:#fff;font-size:clamp(42px,5vw,64px);line-height:1.02;letter-spacing:-2px}
.mppm-rec-hero p{max-width:760px;margin:0;color:#d0ddea;font-size:15px;line-height:1.7}
.mppm-rec-hero-points{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.mppm-rec-hero-points span{padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:#e3eef6;font-size:11px;font-weight:700}

.mppm-rec-market-card{padding:22px;border-radius:18px;background:#fff;color:var(--rec-ink);box-shadow:0 22px 60px rgba(0,0,0,.2)}
.mppm-rec-market-card>span{color:var(--rec-blue);font-size:10px;font-weight:800;letter-spacing:.05em}
.mppm-rec-market-card h2{margin:7px 0 12px;font-size:22px;line-height:1.15}
.mppm-rec-market-card select{width:100%;height:50px;border:1px solid #cfdbe7;border-radius:11px;background-color:#f9fbfe}
.mppm-rec-market-card p{margin:8px 0 0;color:#61778e;font-size:12px;line-height:1.5}

.mppm-rec-controls-section{padding:22px 0;border-bottom:1px solid #e3e9f0;background:#fff;position:sticky;top:72px;z-index:40}
.mppm-rec-controls{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px;align-items:end}
.mppm-rec-search label,.mppm-rec-market-inline label{display:block;margin-bottom:6px;color:#173653;font-size:12px;font-weight:800}
.mppm-rec-search input,.mppm-rec-market-inline select{width:100%;height:46px;border:1px solid #cfdbe7;border-radius:10px;background:#fbfcfe;outline:0}
.mppm-rec-search input{padding:0 13px}
.mppm-rec-search input:focus,.mppm-rec-market-inline select:focus{border-color:#83afe1;box-shadow:0 0 0 3px rgba(23,105,232,.08);background:#fff}
.mppm-rec-categories{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mppm-rec-categories button{min-height:34px;padding:0 11px;border:1px solid #d5e1ec;border-radius:999px;background:#fff;color:#405b75;font-size:12px;font-weight:700;cursor:pointer}
.mppm-rec-categories button:hover,.mppm-rec-categories button.is-active{border-color:#abc8e8;background:#eef5ff;color:#1769e8}

.mppm-rec-catalogue{padding:56px 0 70px;background:#f4f8fc}
.mppm-rec-catalogue-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:24px}
.mppm-rec-catalogue-head h2{max-width:760px;margin:11px 0 0;color:var(--rec-navy);font-size:36px;line-height:1.08;letter-spacing:-1.2px}
.mppm-rec-catalogue-head>p{margin:0;color:#61778e;font-size:12px;font-weight:700}
.mppm-rec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mppm-rec-card{min-width:0;padding:19px;border:1px solid #d7e2ed;border-radius:18px;background:#fff;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(17,50,84,.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.mppm-rec-card:hover{transform:translateY(-3px);border-color:#b3cae2;box-shadow:0 16px 34px rgba(17,50,84,.09)}
.mppm-rec-card.is-featured{border-color:#a9c9ee;box-shadow:0 10px 28px rgba(23,105,232,.07)}
.mppm-rec-card[hidden]{display:none!important}
.mppm-rec-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.mppm-rec-logo{width:54px;height:54px;border:1px solid #e0e8f0;border-radius:13px;background:#f8fbff;display:grid;place-items:center;overflow:hidden}
.mppm-rec-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.mppm-rec-logo>span{font-size:20px;font-weight:800;color:#1769e8}
.mppm-rec-badges{display:flex;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.mppm-rec-badges span{padding:5px 7px;border-radius:999px;background:#eef3f8;color:#5d7288;font-size:9px;font-weight:800}
.mppm-rec-badges .is-pick{background:#eaf3ff;color:#1769e8}
.mppm-rec-market-badge{background:#e9f7f2!important;color:#13755d!important}
.mppm-rec-card-copy{margin-top:14px}
.mppm-rec-merchant{display:block;color:#71859a;font-size:11px;font-weight:700}
.mppm-rec-card-copy h3{margin:3px 0 6px;font-size:20px;line-height:1.18}
.mppm-rec-card-copy h3 a{text-decoration:none;color:#081f3a}
.mppm-rec-card-copy p{min-height:43px;margin:0;color:#536b83;font-size:13px;line-height:1.6}
.mppm-rec-best-for{margin-top:12px;padding:11px;border-radius:11px;background:#f7faff}
.mppm-rec-best-for b,.mppm-rec-best-for span{display:block}
.mppm-rec-best-for b{color:#1769e8;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.mppm-rec-best-for span{margin-top:3px;color:#405a73;font-size:12px;line-height:1.5}
.mppm-rec-offer{margin-top:14px;padding:13px;border:1px solid #e0e8f0;border-radius:12px;background:#fbfcfe}
.mppm-rec-price-row{display:flex;align-items:baseline;gap:8px}
.mppm-rec-price-row strong{color:#0a2847;font-size:22px}
.mppm-rec-price-row del{color:#8394a6;font-size:12px}
.mppm-rec-offer-text{display:block;margin-top:4px;color:#2d6d55;font-size:12px;font-weight:700}
.mppm-rec-coupon{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:9px;border-top:1px solid #e2e8ef}
.mppm-rec-coupon>span{color:#6c8094;font-size:10px;font-weight:700}
.mppm-rec-coupon code{padding:4px 7px;border-radius:7px;background:#eef5ff;color:#1769e8;font-size:12px;font-weight:800}
.mppm-rec-coupon button{margin-left:auto;border:0;background:transparent;color:#1769e8;font-size:11px;font-weight:800;cursor:pointer}
.mppm-rec-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:15px}
.mppm-rec-card-actions a{min-height:40px;padding:0 11px;border-radius:9px;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-size:12px;font-weight:800}
.mppm-rec-details{border:1px solid #cfdae5;background:#fff;color:#26445f}
.mppm-rec-details:hover{background:#f5f9fd;border-color:#afc7df}
.mppm-rec-outbound{border:1px solid #1769e8;background:#1769e8;color:#fff}
.mppm-rec-outbound:hover{background:#0e5fd2}
.mppm-rec-affiliate-note{display:block;margin-top:9px;color:#7a8c9e;font-size:10px;line-height:1.45}
.mppm-rec-empty{padding:34px;border:1px dashed #c8d7e5;border-radius:16px;background:#fff;text-align:center}
.mppm-rec-empty h3{margin:0;font-size:21px}
.mppm-rec-empty p{max-width:680px;margin:7px auto 0;color:#62788d;font-size:13px;line-height:1.6}
.mppm-rec-disclosure{margin-top:28px;padding:19px;border:1px solid #d8e3ee;border-radius:15px;background:#fff}
.mppm-rec-disclosure strong{font-size:14px}
.mppm-rec-disclosure p{margin:6px 0;color:#536b83;font-size:12.5px;line-height:1.65}
.mppm-rec-disclosure a{color:#1769e8;font-size:12px;font-weight:800;text-decoration:none}

/* Single recommendation page */
.mppm-rec-single-hero{padding:52px 0;background:linear-gradient(180deg,#f6f9fd,#fff)}
.mppm-rec-single-grid{display:grid;grid-template-columns:180px minmax(0,1fr) 350px;gap:28px;align-items:center}
.mppm-rec-single-logo{height:180px;border:1px solid #dce5ee;border-radius:20px;background:#fff;display:grid;place-items:center;overflow:hidden}
.mppm-rec-single-logo img{width:100%;height:100%;object-fit:contain;padding:14px}
.mppm-rec-single-logo>span{font-size:54px;color:#1769e8;font-weight:800}
.mppm-rec-single-meta{display:flex;gap:7px;flex-wrap:wrap}
.mppm-rec-single-meta span{padding:5px 8px;border-radius:999px;background:#eef5ff;color:#1769e8;font-size:10px;font-weight:800}
.mppm-rec-single-merchant{margin:12px 0 2px;color:#6c8196;font-size:12px;font-weight:700}
.mppm-rec-single-copy h1{margin:0;color:#071d37;font-size:44px;line-height:1.05;letter-spacing:-1.5px}
.mppm-rec-single-subtitle{max-width:700px;margin:10px 0 0;color:#50677f;font-size:15px;line-height:1.65}
.mppm-rec-single-offer{padding:19px;border:1px solid #d6e2ee;border-radius:17px;background:#fff;box-shadow:0 14px 34px rgba(17,50,84,.07)}
.mppm-rec-single-offer>label{display:block;margin-bottom:6px;color:#173653;font-size:12px;font-weight:800}
.mppm-rec-single-offer>select{width:100%;height:46px;border:1px solid #cfdbe7;border-radius:10px;background:#fbfcfe}
.mppm-rec-single-offer-state{margin-top:13px;padding-top:13px;border-top:1px solid #e4eaf0}
.mppm-rec-single-offer-state>span{color:#1769e8;font-size:10px;font-weight:800;text-transform:uppercase}
.mppm-rec-single-price{display:flex;align-items:baseline;gap:9px;margin-top:6px}
.mppm-rec-single-price strong{font-size:29px;color:#081f3a}
.mppm-rec-single-price del{color:#8091a3;font-size:13px}
.mppm-rec-single-offer-state>p{margin:5px 0;color:#3c5c75;font-size:12.5px;line-height:1.55}
.mppm-rec-single-coupon{margin:12px 0;padding:11px;border-radius:10px;background:#f4f8fd}
.mppm-rec-single-coupon>span{display:block;color:#6b7f92;font-size:10px;font-weight:700}
.mppm-rec-single-coupon>div{display:flex;align-items:center;gap:8px;margin-top:6px}
.mppm-rec-single-coupon code{padding:5px 8px;border-radius:7px;background:#fff;color:#1769e8;font-size:13px;font-weight:800}
.mppm-rec-single-coupon button{border:0;background:none;color:#1769e8;font-size:11px;font-weight:800;cursor:pointer}
.mppm-rec-single-outbound{width:100%;min-height:43px;margin-top:7px;border-radius:9px;background:#1769e8;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:13px;font-weight:800}
.mppm-rec-single-offer>small{display:block;margin-top:10px;color:#7b8d9f;font-size:10px;line-height:1.45}
.mppm-rec-unavailable{padding:10px;border-radius:9px;background:#fff5f6;color:#9e4252!important}
.mppm-rec-single-content{padding:56px 0 72px;background:#f4f8fc}
.mppm-rec-single-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.mppm-rec-editorial{display:grid;gap:14px}
.mppm-rec-editorial section{padding:22px;border:1px solid #d9e3ed;border-radius:16px;background:#fff}
.mppm-rec-editorial section.is-watchout{background:#fffdf8;border-color:#eadfc8}
.mppm-rec-editorial h2{margin:11px 0 7px;color:#071d37;font-size:27px;line-height:1.15}
.mppm-rec-editorial p,.mppm-rec-content-body{margin:0;color:#50677f;font-size:14px;line-height:1.75}
.mppm-rec-content-body p{margin:0 0 15px}
.mppm-rec-single-side{display:grid;gap:12px;position:sticky;top:112px}
.mppm-rec-single-side>div{padding:17px;border:1px solid #d8e3ed;border-radius:14px;background:#fff}
.mppm-rec-single-side strong{font-size:13px}
.mppm-rec-single-side p{margin:5px 0 0;color:#5c7287;font-size:12px;line-height:1.6}
.mppm-rec-single-side a{display:inline-block;margin-top:8px;color:#1769e8;font-size:12px;font-weight:800;text-decoration:none}

@media(max-width:1040px){
  .mppm-rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mppm-rec-single-grid{grid-template-columns:150px minmax(0,1fr)}
  .mppm-rec-single-offer{grid-column:1/-1}
}
@media(max-width:850px){
  .mppm-rec-hero-grid,.mppm-rec-single-content-grid{grid-template-columns:1fr}
  .mppm-rec-single-side{position:static}
  .mppm-rec-controls-section{position:static}
}
@media(max-width:700px){
  .mppm-rec-wrap{width:min(calc(100% - var(--mppm-page-gutter-mobile,24px)),var(--rec-max))}
  .mppm-rec-hero{padding:48px 0}
  .mppm-rec-hero h1{font-size:42px}
  .mppm-rec-controls{grid-template-columns:1fr}
  .mppm-rec-grid{grid-template-columns:1fr}
  .mppm-rec-catalogue-head{display:block}
  .mppm-rec-catalogue-head>p{margin-top:10px}
  .mppm-rec-single-grid{grid-template-columns:1fr}
  .mppm-rec-single-logo{width:140px;height:140px}
  .mppm-rec-single-copy h1{font-size:36px}
  .mppm-rec-card-actions{grid-template-columns:1fr}
}


/* =========================================================
   RECOMMENDATIONS READABILITY + ALIGNMENT PASS
   Keep market/search controls crisp and aligned with sitewide UI rules.
   ========================================================= */
.mppm-rec-market-card{
  padding:24px;
}
.mppm-rec-market-card>span{
  font-size:11px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.04em;
}
.mppm-rec-market-card h2{
  margin:8px 0 13px;
  font-size:24px;
  line-height:1.18;
  font-weight:800;
}
.mppm-rec-market-card select{
  height:52px;
  font-size:14px!important;
  font-weight:600!important;
}
.mppm-rec-market-card p{
  margin:9px 0 0;
  font-size:12.5px;
  line-height:1.55;
  font-weight:500;
}

.mppm-rec-controls-section{
  padding:24px 0;
}
.mppm-rec-controls{
  grid-template-columns:minmax(0,1fr) 280px;
  gap:16px;
  align-items:start;
}
.mppm-rec-search,
.mppm-rec-market-inline{
  display:grid;
  grid-template-rows:20px 48px;
  gap:7px;
  min-width:0;
}
.mppm-rec-search label,
.mppm-rec-market-inline label{
  margin:0;
  display:flex;
  align-items:center;
  color:#102f4e;
  font-size:13px;
  line-height:1.25;
  font-weight:800;
}
.mppm-rec-search input,
.mppm-rec-market-inline select{
  height:48px;
  font-size:14px!important;
  font-weight:500!important;
}
.mppm-rec-search input{
  padding:0 14px;
}
.mppm-rec-categories{
  margin-top:16px;
}
.mppm-rec-categories button{
  min-height:36px;
  padding:0 12px;
  font-size:12.5px;
  font-weight:700;
}

.mppm-rec-card-copy p,
.mppm-rec-best-for span,
.mppm-rec-disclosure p{
  color:#4c657d;
  font-weight:500;
}
.mppm-rec-card-actions a{
  font-size:13px;
  font-weight:700;
}
.mppm-rec-affiliate-note{
  color:#647a90;
  font-size:11px;
  font-weight:500;
}
@media(max-width:700px){
  .mppm-rec-controls{
    grid-template-columns:1fr;
    gap:14px;
  }
  .mppm-rec-search,
  .mppm-rec-market-inline{
    grid-template-rows:auto 48px;
  }
}


/* =========================================================
   SHARED HOMEPAGE RECOMMENDATIONS
   Homepage and /recommendations/ use the same catalogue data,
   category taxonomy, market state and recommendation cards.
   ========================================================= */
.mppm-home-rec-toolbar{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.mppm-home-rec-toolbar .mppm-rec-categories{
  margin-top:0;
}
.mppm-home-rec-market{
  flex:0 0 230px;
}
.mppm-home-rec-market label{
  display:block;
  margin-bottom:6px;
  color:#102f4e;
  font-size:13px;
  line-height:1.3;
  font-weight:800;
}
.mppm-home-rec-market select{
  width:100%;
  height:44px;
  border:1px solid #cfdbe7;
  border-radius:10px;
  background-color:#fff;
  color:#10233f;
  font-size:13px;
  font-weight:600;
}
.mppm-home-rec-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.mppm-home-rec-grid .mppm-rec-card{
  padding:17px;
}
.mppm-home-rec-grid .mppm-rec-card-copy h3{
  font-size:18px;
}
.mppm-home-rec-grid .mppm-rec-card-copy p{
  min-height:42px;
  font-size:12.5px;
}
.mppm-home-rec-grid .mppm-rec-best-for span{
  font-size:11.5px;
}
.mppm-home-rec-grid .mppm-rec-price-row strong{
  font-size:20px;
}
.mppm-home-rec-more{
  margin-top:20px;
  display:flex;
  justify-content:center;
}

/* Hidden offer controls must stay hidden even when component CSS uses flex. */
.mppm-rec-coupon[hidden],
.mppm-rec-outbound[hidden],
.mppm-rec-single-coupon[hidden],
.mppm-rec-single-outbound[hidden],
.mppm-rec-unavailable[hidden]{
  display:none!important;
}

@media(max-width:1120px){
  .mppm-home-rec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .mppm-home-rec-toolbar{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
  }
  .mppm-home-rec-market{
    width:100%;
    max-width:none;
    flex:none;
  }
  .mppm-home-rec-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   COMPACT RECOMMENDATION CARDS
   Keep catalogue density high: detailed fit guidance lives on the single page,
   while cards use one primary CTA whenever an external offer is available.
   ========================================================= */
.mppm-rec-best-for{
  display:none!important;
}
.mppm-rec-card-copy{
  margin-top:11px;
}
.mppm-rec-card-copy p{
  min-height:auto;
}
.mppm-rec-offer{
  margin-top:11px;
}
.mppm-rec-card-actions{
  display:block;
  margin-top:auto;
  padding-top:12px;
}
.mppm-rec-card-actions a{
  width:100%;
  min-height:38px;
}
.mppm-rec-card-actions a[hidden]{
  display:none!important;
}