/* ============================================================
   Plastic Footprint Directory — front-end styles
   Colors, type, and the score ramp come from tokens.css.
   Matches the approved Claude Design look (cream surface,
   brand teal, segmented 1-10 score meter).
   ============================================================ */

.pfd-app{font-family:var(--pfd-font-sans);color:var(--pfd-ink);max-width:1040px;margin:0 auto;padding:8px 18px 56px;line-height:var(--pfd-leading);}
.pfd-app *{box-sizing:border-box;}
.pfd-app h1,.pfd-app h2{color:var(--pfd-charcoal);}
.pfd-app a{color:var(--pfd-teal);}

/* ---- Hero ---- */
.pfd-hero{padding:18px 0 8px;}
.pfd-hero__title{font-family:var(--pfd-font-display);font-weight:400;font-size:var(--pfd-text-2xl);line-height:1.1;margin:0 0 8px;}
.pfd-hero__sub{color:var(--pfd-slate);max-width:60ch;margin:0;font-size:var(--pfd-text-lg);}

/* ---- Controls ---- */
.pfd-controls{display:flex;flex-direction:column;gap:12px;margin:22px 0 8px;padding:16px;background:var(--pfd-paper);border:1px solid var(--pfd-line);border-radius:var(--pfd-radius-lg);}
.pfd-search{width:100%;padding:11px 14px;border:1px solid var(--pfd-line);border-radius:var(--pfd-radius-md);font-size:var(--pfd-text-base);font-family:inherit;background:var(--pfd-cream);}
.pfd-search:focus{outline:2px solid var(--pfd-teal);outline-offset:1px;}
.pfd-chips{display:flex;flex-wrap:wrap;gap:8px;}
.pfd-chip{border:1px solid var(--pfd-line);background:var(--pfd-cream);color:var(--pfd-ink);border-radius:var(--pfd-radius-pill);padding:7px 14px;font:inherit;font-size:var(--pfd-text-sm);cursor:pointer;transition:.15s;}
.pfd-chip:hover{border-color:var(--pfd-teal);}
.pfd-chip.is-active{background:var(--pfd-teal);color:#fff;border-color:var(--pfd-teal);}
.pfd-toggle{display:inline-flex;align-items:center;gap:8px;font-size:var(--pfd-text-sm);color:var(--pfd-slate);cursor:pointer;}
.pfd-count{color:var(--pfd-slate);font-size:var(--pfd-text-sm);margin:14px 2px 6px;}

/* ---- Grid + cards ---- */
.pfd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;}
.pfd-card{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--pfd-paper);border:1px solid var(--pfd-line);border-radius:var(--pfd-radius-lg);padding:18px;text-decoration:none;color:var(--pfd-ink);transition:.15s;}
.pfd-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(36,36,36,.08);border-color:var(--pfd-clay);}
.pfd-card.is-hidden{display:none;}
.pfd-card__cat{font-size:var(--pfd-text-xs);color:var(--pfd-slate);text-transform:uppercase;letter-spacing:.08em;}
.pfd-card__brand{font-weight:var(--pfd-weight-bold);font-size:var(--pfd-text-lg);line-height:1.2;}
.pfd-card__product{color:var(--pfd-slate);font-size:var(--pfd-text-sm);flex:1;}
.pfd-card__score{display:flex;align-items:baseline;gap:5px;margin-top:8px;}
.pfd-card__n{font-size:32px;font-weight:var(--pfd-weight-bold);line-height:1;color:var(--pfd-score);}
.pfd-card__d{color:var(--pfd-slate);font-size:var(--pfd-text-sm);}
.pfd-card__band{margin-left:auto;align-self:center;font-size:var(--pfd-text-xs);font-weight:var(--pfd-weight-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--pfd-score);}

/* ---- Badges ---- */
.pfd-badge{display:inline-flex;align-items:center;gap:6px;background:var(--pfd-teal);color:#fff;border-radius:var(--pfd-radius-pill);padding:5px 13px;font-size:var(--pfd-text-sm);font-weight:var(--pfd-weight-bold);}
.pfd-badge--sm{margin-top:4px;align-self:flex-start;padding:3px 10px;font-size:var(--pfd-text-xs);}

/* ---- Score meter (segmented 1-10) ---- */
.pfd-meter{margin:18px 0;}
.pfd-meter__track{display:flex;border-radius:var(--pfd-radius-md);overflow:hidden;border:1px solid var(--pfd-line);}
.pfd-meter__seg{flex:1;text-align:center;padding:13px 0;font-weight:var(--pfd-weight-bold);color:#fff;font-size:var(--pfd-text-sm);opacity:.5;}
.pfd-meter__seg[data-score="1"]{background:var(--pfd-score-1);}
.pfd-meter__seg[data-score="2"]{background:var(--pfd-score-2);}
.pfd-meter__seg[data-score="3"]{background:var(--pfd-score-3);color:var(--pfd-charcoal);}
.pfd-meter__seg[data-score="4"]{background:var(--pfd-score-4);color:var(--pfd-charcoal);}
.pfd-meter__seg[data-score="5"]{background:var(--pfd-score-5);color:var(--pfd-charcoal);}
.pfd-meter__seg[data-score="6"]{background:var(--pfd-score-6);color:var(--pfd-charcoal);}
.pfd-meter__seg[data-score="7"]{background:var(--pfd-score-7);}
.pfd-meter__seg[data-score="8"]{background:var(--pfd-score-8);}
.pfd-meter__seg[data-score="9"]{background:var(--pfd-score-9);}
.pfd-meter__seg[data-score="10"]{background:var(--pfd-score-10);}
.pfd-meter__seg.is-active{opacity:1;outline:3px solid var(--pfd-ink);outline-offset:-3px;}

/* ---- Product page ---- */
.pfd-breadcrumb{font-size:var(--pfd-text-sm);margin:6px 0 14px;}
.pfd-product__head{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid var(--pfd-line);padding-bottom:18px;}
.pfd-product__brand{font-family:var(--pfd-font-display);font-weight:400;font-size:var(--pfd-text-2xl);line-height:1.05;margin:0;}
.pfd-product__name{color:var(--pfd-slate);font-size:var(--pfd-text-lg);margin:4px 0 10px;}
.pfd-product__scorebox{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--pfd-cream);border:1px solid var(--pfd-line);border-radius:var(--pfd-radius-lg);padding:14px 22px;min-width:130px;}
.pfd-product__n{font-size:56px;font-weight:var(--pfd-weight-bold);line-height:1;color:var(--pfd-score);}
.pfd-product__d{color:var(--pfd-slate);}
.pfd-product__band{margin-top:6px;font-size:var(--pfd-text-xs);font-weight:var(--pfd-weight-bold);text-transform:uppercase;letter-spacing:.06em;text-align:center;}
.pfd-band--low{color:var(--pfd-band-low);}
.pfd-band--moderate{color:var(--pfd-band-moderate);}
.pfd-band--high{color:var(--pfd-band-high);}
.pfd-product__summary{font-size:var(--pfd-text-lg);max-width:65ch;}

.pfd-section{margin:26px 0;}
.pfd-section h2{font-size:var(--pfd-text-xl);margin:0 0 12px;}
.pfd-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;}

.pfd-factors{display:flex;flex-direction:column;gap:14px;}
.pfd-factor__row{display:flex;justify-content:space-between;font-weight:var(--pfd-weight-bold);}
.pfd-factor__val{color:var(--pfd-slate);}
.pfd-factor__bar{height:8px;background:var(--pfd-line);border-radius:var(--pfd-radius-pill);overflow:hidden;margin:6px 0 4px;}
.pfd-factor__bar>span{display:block;height:100%;background:var(--pfd-clay);}
.pfd-factor__cite{font-size:var(--pfd-text-xs);color:var(--pfd-slate);}
.pfd-confidence{font-size:var(--pfd-text-sm);color:var(--pfd-slate);background:var(--pfd-cream);border-radius:var(--pfd-radius-md);padding:10px 14px;}

.pfd-list{margin:0;padding-left:0;list-style:none;}
.pfd-list li{position:relative;padding-left:24px;margin-bottom:8px;}
.pfd-list--good li:before{content:"\2713";position:absolute;left:0;color:var(--pfd-teal);font-weight:700;}
.pfd-list--watch li:before{content:"\2022";position:absolute;left:4px;color:var(--pfd-clay);font-weight:700;}

.pfd-facts dl{display:grid;grid-template-columns:1fr;gap:0;margin:0;}
.pfd-facts dl>div{display:flex;gap:14px;border-bottom:1px solid var(--pfd-line);padding:10px 0;}
.pfd-facts dt{flex:0 0 130px;font-weight:var(--pfd-weight-bold);}
.pfd-facts dd{margin:0;color:var(--pfd-ink);}

.pfd-cta{background:var(--pfd-cream);border:1px solid var(--pfd-line);border-radius:var(--pfd-radius-md);padding:12px 16px;font-size:var(--pfd-text-sm);}
.pfd-cta--swap{border-left:4px solid var(--pfd-clay);}
.pfd-cta__note{color:var(--pfd-slate);}
.pfd-sources ul{margin:0;padding-left:18px;}
.pfd-sources li{margin-bottom:6px;font-size:var(--pfd-text-sm);}
.pfd-method-link{margin-top:30px;font-weight:var(--pfd-weight-bold);}

@media (max-width:640px){
	.pfd-cols{grid-template-columns:1fr;}
	.pfd-product__head{flex-direction:column;}
	.pfd-meter__seg{padding:9px 0;font-size:var(--pfd-text-xs);}
	.pfd-hero__title,.pfd-product__brand{font-size:34px;}
}

/* ===== images, badges, action buttons, compare ===== */
[hidden]{display:none !important;}
.pfd-card{padding:0;overflow:hidden;}
.pfd-card__link{display:flex;flex-direction:column;gap:6px;padding:16px;text-decoration:none;color:var(--pfd-ink);height:100%;}
.pfd-card__img{width:100%;height:150px;object-fit:contain;background:var(--pfd-cream);border-radius:var(--pfd-radius-md);margin-bottom:4px;}
span.pfd-card__img.pfd-img--ph{display:flex;align-items:center;justify-content:center;font-family:var(--pfd-font-display);font-size:42px;color:#fff;background:var(--pfd-score,var(--pfd-teal));}
.pfd-compare-check{position:absolute;top:8px;right:8px;z-index:2;background:rgba(255,255,255,.94);border:1px solid var(--pfd-line);border-radius:var(--pfd-radius-pill);padding:3px 9px;font-size:11px;color:var(--pfd-slate);display:inline-flex;gap:5px;align-items:center;cursor:pointer;}
.pfd-compare-check input{margin:0;cursor:pointer;}
.pfd-card.is-selected{outline:2px solid var(--pfd-teal);outline-offset:-2px;}
.pfd-badges{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px;}
.pfd-chipbadge{font-size:var(--pfd-text-xs);padding:4px 11px;border-radius:var(--pfd-radius-pill);background:var(--pfd-cream);border:1px solid var(--pfd-line);color:var(--pfd-ink);}
.pfd-chipbadge--cert{background:#eef4f2;border-color:#cfe5df;color:var(--pfd-teal);font-weight:var(--pfd-weight-bold);}
.pfd-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px;}
.pfd-btn{display:inline-flex;align-items:center;gap:6px;padding:11px 20px;border-radius:var(--pfd-radius-pill);font-weight:var(--pfd-weight-bold);font-size:var(--pfd-text-sm);font-family:inherit;text-decoration:none;cursor:pointer;border:1px solid transparent;line-height:1;}
.pfd-btn--shop{background:var(--pfd-teal);color:#fff;}
.pfd-btn--review{background:var(--pfd-clay);color:#fff;}
.pfd-btn--swap{background:var(--pfd-cream);border-color:var(--pfd-clay);color:var(--pfd-brown);}
.pfd-btn--ghost{background:transparent;border-color:var(--pfd-line);color:var(--pfd-slate);}
.pfd-btn:hover{filter:brightness(1.05);}
.pfd-product__img{width:128px;height:128px;object-fit:contain;background:var(--pfd-cream);border-radius:var(--pfd-radius-lg);flex:0 0 auto;}
span.pfd-product__img.pfd-img--ph{display:flex;align-items:center;justify-content:center;font-family:var(--pfd-font-display);font-size:52px;color:#fff;background:var(--pfd-score,var(--pfd-teal));}
.pfd-compare-bar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--pfd-charcoal);color:#fff;border-radius:var(--pfd-radius-pill);padding:9px 12px 9px 18px;display:flex;gap:12px;align-items:center;z-index:50;box-shadow:0 6px 24px rgba(0,0,0,.22);}
.pfd-compare-bar__count{font-size:var(--pfd-text-sm);}
.pfd-compare-bar button{border:none;border-radius:var(--pfd-radius-pill);padding:8px 16px;font-weight:var(--pfd-weight-bold);cursor:pointer;font-family:inherit;font-size:var(--pfd-text-sm);}
.pfd-compare-open{background:var(--pfd-teal);color:#fff;}
.pfd-compare-clear{background:transparent;color:#fff;text-decoration:underline;}
.pfd-compare-modal{position:fixed;inset:0;background:rgba(36,36,36,.55);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;}
.pfd-compare-modal__inner{background:var(--pfd-paper);border-radius:var(--pfd-radius-lg);max-width:920px;width:100%;max-height:88vh;overflow:auto;padding:26px;position:relative;}
.pfd-compare-modal__close{position:absolute;top:10px;right:14px;border:none;background:none;font-size:30px;line-height:1;cursor:pointer;color:var(--pfd-slate);}
.pfd-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:12px;}
.pfd-cmp{border:1px solid var(--pfd-line);border-radius:var(--pfd-radius-md);padding:14px;text-align:center;display:flex;flex-direction:column;gap:5px;align-items:center;}
.pfd-cmp__img{width:88px;height:88px;object-fit:contain;background:var(--pfd-cream);border-radius:var(--pfd-radius-md);}
span.pfd-cmp__img.pfd-img--ph{display:flex;align-items:center;justify-content:center;font-family:var(--pfd-font-display);font-size:32px;color:#fff;background:var(--pfd-score,var(--pfd-teal));}
.pfd-cmp__score{font-size:34px;font-weight:var(--pfd-weight-bold);color:var(--pfd-score);line-height:1;}
.pfd-cmp__score small{font-size:14px;color:var(--pfd-slate);font-weight:400;}
.pfd-cmp__band{font-size:var(--pfd-text-xs);font-weight:var(--pfd-weight-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--pfd-score);}
.pfd-cmp__brand{font-weight:var(--pfd-weight-bold);}
.pfd-cmp__product,.pfd-cmp__cat{font-size:var(--pfd-text-xs);color:var(--pfd-slate);}
.pfd-cmp__certs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:4px 0;}
.pfd-cmp .pfd-btn{margin-top:6px;padding:8px 14px;}

/* ===== feedback round 2: buttons, lists, verdict, factor levels, cert popover ===== */
.pfd-app .pfd-list{list-style:none !important;padding-left:0 !important;}
.pfd-app .pfd-list li{list-style:none !important;}
.pfd-app .pfd-list li::marker{content:"" !important;}

.pfd-app .pfd-btn--shop{background:var(--pfd-cream);color:var(--pfd-teal) !important;border:2px solid var(--pfd-teal);}
.pfd-app .pfd-btn--review{background:var(--pfd-clay);color:#fff !important;}
.pfd-app .pfd-btn--swap{background:var(--pfd-cream);color:var(--pfd-brown) !important;border-color:var(--pfd-clay);}
.pfd-app .pfd-btn--ghost{color:var(--pfd-slate) !important;}

.pfd-product__verdict{font-weight:var(--pfd-weight-bold);margin:6px 0 10px;font-size:var(--pfd-text-base);}
.pfd-product__verdict.pfd-band--low{color:var(--pfd-band-low);}
.pfd-product__verdict.pfd-band--moderate{color:var(--pfd-band-moderate);}
.pfd-product__verdict.pfd-band--high{color:var(--pfd-band-high);}

.pfd-factor__status{font-weight:var(--pfd-weight-bold);font-size:var(--pfd-text-sm);padding:2px 11px;border-radius:var(--pfd-radius-pill);white-space:nowrap;}
.pfd-lvl--none{background:#eef4f2;color:var(--pfd-teal);}
.pfd-lvl--low{background:#eef4f2;color:#3f8478;}
.pfd-lvl--mod{background:#f6ecdd;color:#a67763;}
.pfd-lvl--high{background:#f3e2dd;color:#7e3328;}
.pfd-factor__desc{display:block;font-size:var(--pfd-text-xs);color:var(--pfd-slate);margin-top:5px;}
.pfd-bar--none>span,.pfd-bar--low>span{background:var(--pfd-teal);}
.pfd-bar--mod>span{background:var(--pfd-clay);}
.pfd-bar--high>span{background:var(--pfd-band-high);}

.pfd-cert-btn{cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;}
.pfd-cert-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--pfd-teal);color:#fff;font-size:10px;font-style:italic;font-weight:700;}
.pfd-cert-pop{position:fixed;z-index:70;max-width:300px;background:var(--pfd-charcoal);color:#fff;border-radius:var(--pfd-radius-md);padding:14px 16px;box-shadow:0 8px 28px rgba(0,0,0,.28);font-size:var(--pfd-text-sm);line-height:1.5;}
.pfd-cert-pop__t{display:block;margin-bottom:5px;color:#fff;padding-right:16px;}
.pfd-cert-pop__d{color:#e8e6df;}
.pfd-cert-pop__x{position:absolute;top:6px;right:9px;background:none;border:none;color:#fff;font-size:19px;cursor:pointer;line-height:1;}