.fabric-hero{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center;margin:26px 0}.fabric-hero button{padding:0;border:1px solid #cbbeb0;background:#fff;border-radius:20px;overflow:hidden;cursor:pointer;font:inherit;text-align:left;color:#245e50;font-weight:700}.fabric-hero #fabric-photo-open>img{width:100%;height:260px;object-fit:cover;display:block}.fabric-hero button span{display:block;padding:12px 16px}.fabric-hero h2{font-family:Georgia,serif;font-size:28px}.difficulty{background:#f7ead2;padding:12px 16px;border-radius:14px}#fabric-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}#fabric-cards .comparison-row{height:100%;margin:0}#fabric-cards p{margin:0}.recognition-card{grid-column:1/-1}.recognition-card ul{margin:0;padding-left:24px}.recognition-card li+li{margin-top:10px}#fabric-photo-dialog{max-width:94vw;max-height:94vh;border:0;border-radius:16px;padding:16px;background:#fff8ef}#fabric-photo-dialog::backdrop{background:#000a}#fabric-photo-dialog img{display:block;max-width:100%;height:auto}#fabric-photo-close{position:sticky;top:0;float:right;background:#245e50;color:white;border:0;border-radius:10px;padding:12px;font:inherit;cursor:pointer}@media(max-width:560px){.fabric-hero{grid-template-columns:1fr;gap:10px}.fabric-hero #fabric-photo-open>img{height:260px}.fabric-hero h2{font-size:26px}#fabric-cards{grid-template-columns:1fr}}
.comparison-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.fabric-hero{background:linear-gradient(135deg,#74346f,#542451);padding:22px;border-radius:20px;color:#fff8ed}.fabric-hero h2{display:none}.fabric-hero .difficulty{color:#302c32}.fabric-hero button{max-width:280px}.impact-intro{grid-column:1/-1}.impact-score .impact-number{display:block;font-size:36px;margin:12px 0}.impact-score meter{display:block;width:100%;height:24px;margin-bottom:12px}.impact-score .impact-range{font-size:16px;margin-top:12px!important;color:#655f59}.impact-lifecycle{display:block;width:100%;max-width:720px;margin:20px auto 0}.impact-intro summary{font-weight:800;cursor:pointer;color:#386153}@media(max-width:560px){.comparison-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.fabric-hero{grid-template-columns:145px 1fr;padding:14px;gap:14px}.fabric-hero #fabric-photo-open>img{height:150px}.fabric-hero button span{font-size:14px;padding:10px}.fabric-hero p{font-size:16px}.fabric-hero .difficulty{padding:10px}.fabric-hero button{width:100%}}
.comparison-tabs{position:sticky;top:0;z-index:2;background:#fff8ef;padding:8px 0;margin:14px 0}.comparison-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 8px;font-size:18px}.comparison-tabs button img{width:30px;height:30px;margin:0}.comparison-tabs small{display:none}@media(max-width:560px){.comparison-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.comparison-tabs button{flex-direction:column;font-size:14px;padding:8px 3px;gap:4px}.comparison-tabs button img{width:26px;height:26px}}
/* Match the installed fabric page: purple bar, segmented tabs and setup card. */
.native-fabric-screen{max-width:1120px;padding:0 24px 24px}.native-fabric-screen h1{font-family:system-ui,-apple-system,sans-serif;font-size:24px;margin:12px 0}.fabric-topbar{display:flex;justify-content:space-between;align-items:center;background:#794bbb;padding:14px 20px;color:white;margin:0 -24px}.fabric-topbar a,.fabric-topbar button{color:white;font:inherit;font-weight:800;border:1px solid #b99bcf;padding:10px 14px;border-radius:14px;background:#654194;text-decoration:none}.fabric-topbar button{font-size:25px}.native-fabric-screen .comparison-tabs{display:flex;border:1px solid #c4bbaf;border-radius:30px;padding:3px;background:#fffdf8;gap:0}.native-fabric-screen .comparison-tabs button{flex:1;min-width:0;border:0;border-radius:24px;padding:12px 4px;background:transparent;color:#302932;font-size:16px;font-weight:800}.native-fabric-screen .comparison-tabs button[aria-selected=true]{background:#b75b40;color:white}.native-fabric-screen .fabric-hero{display:flex;gap:20px;padding:20px;margin:14px -24px 20px;border-radius:0;background:linear-gradient(135deg,#224679,#67437f,#774534)}.native-fabric-screen .fabric-hero button{width:140px;flex:none;border:2px solid #d4cdbd;border-radius:14px}.native-fabric-screen .fabric-hero #fabric-photo-open>img{height:140px;width:100%}.native-fabric-screen .difficulty{font-size:14px;font-weight:800;border:1px solid #a96f82;border-radius:25px;background:#f9e6e1;color:#38222f;padding:10px 14px;line-height:1.4}.native-fabric-screen .difficulty strong{display:block;font-size:18px}.native-fabric-screen #fabric-cards{display:block}.native-fabric-screen #fabric-cards .comparison-row{margin:18px 0;padding:22px;border-radius:20px;background:#fffdf8}.native-fabric-screen #fabric-cards .comparison-row h3{font-size:21px;color:#302932}.native-fabric-screen #fabric-cards p{line-height:1.55}.fabric-concise-toggle{width:100%;background:#fffdf8;color:#794795;border:1.5px solid #794795;border-radius:14px;min-height:48px;text-align:left;padding:12px 16px;font:inherit;font-weight:800}.native-fabric-screen #fabric-cards .fabric-setup{box-shadow:0 0 0 12px #efe8dc;margin:30px 12px}.native-fabric-screen #fabric-cards .fabric-setup p{margin:8px 0}.fabric-copy-settings{width:100%;min-height:48px;margin-top:12px;background:#e4f0ee;border:1px solid #91a9a1;border-radius:14px;font:inherit;font-weight:800;color:#27594e}@media(max-width:560px){.native-fabric-screen{padding:0 24px 24px}.native-fabric-screen .fabric-hero{gap:16px;padding:18px 24px}.native-fabric-screen .fabric-hero button{width:110px}.native-fabric-screen .fabric-hero #fabric-photo-open>img{height:110px}.native-fabric-screen .difficulty{font-size:12px;padding:8px 12px}.native-fabric-screen .comparison-tabs button{font-size:15px;padding:12px 2px}}
/* Fabric Detail contracts: 17/21 headings, 15/21 supporting copy, 58-point artwork. */
.native-fabric-screen{font-family:system-ui,-apple-system,sans-serif;background:#FFF7EF;color:#302730}
.native-fabric-screen #fabric-panel-title{display:none}
.native-fabric-screen #fabric-cards .comparison-row{height:auto;padding:12px;margin:10px 0;border:1px solid #E1D4C4;border-radius:11px;background:#FFFDF8}
.native-fabric-screen #fabric-cards .comparison-row h3{display:flex;align-items:center;gap:9px;font-size:17px;line-height:21px;font-weight:900;margin:0 0 6px}
.illustrated-card h3 .detail-art{width:58px;height:58px;flex-shrink:0;object-fit:contain}
.native-fabric-screen #fabric-cards p,.native-fabric-screen #fabric-cards li{font-size:15px;line-height:21px;margin:7px 0;white-space:pre-line}
.native-fabric-screen #fabric-cards .tone-peach{background:#F5E8DF;border-color:#E5C8B4}
.native-fabric-screen #fabric-cards .tone-blue{background:#E6EEF4;border-color:#C3D6E0}
.native-fabric-screen #fabric-cards .tone-purple{background:#EEE7F4;border-color:#D6C5E0}
.native-fabric-screen #fabric-cards .tone-sand{background:#F4E9DA;border-color:#E5CCAB}
.native-fabric-screen #fabric-cards .tone-green{background:#EAF0E5;border-color:#C5D6B7}
.native-fabric-screen #fabric-cards .tone-aqua{background:#EAF5F2;border-color:#B6D3CA}
.native-fabric-screen #fabric-cards .fabric-setup{padding:16px;border-radius:16px;margin:30px 14px;box-shadow:0 0 0 14px #EFE8DC}
.native-fabric-screen #fabric-cards .fabric-setup h3{font-size:20px;line-height:25px;margin-bottom:16px}
.fabric-copy-settings{font-size:15px;line-height:21px}
.handling-fact{display:block;width:100%;padding:7px 8px 7px 0;border:0;border-radius:12px;margin:5px 0;text-align:left;color:inherit;font:inherit;background:#EDF6F3}
.handling-fact-heading{display:flex;align-items:center;gap:8px;font-size:15px;line-height:21px}
.handling-fact-heading img{width:56px;height:48px;object-fit:contain;flex-shrink:0}
.handling-fact-heading strong{flex:1;font-weight:900}.handling-info{color:#287C70}
.handling-fact-value{display:block;padding-left:8px;text-align:right;font-size:15px;line-height:21px}
.wash-1{background:#FAF3E8}.wash-2{background:#F6EFF7}.wash-3{background:#EEF4F8}
.illustrated-card summary{cursor:pointer;font-size:15px;line-height:21px;font-weight:800;min-height:44px;align-content:center}
.illustrated-card ul{padding-left:20px}.fabric-banner{font-weight:700}
.impact-meter{display:block;width:220px;height:116px;margin:12px auto 6px;object-fit:contain}
.impact-meter-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.impact-chip{border-radius:14px;padding:7px 12px;background:#F9E2D6;border:1px solid #EDB79E;text-align:center;color:#D8673F}
.impact-chip.sus{background:#DCEAF3;border-color:#AAC9DC;color:#3E789B}
.impact-chip>span{display:flex;align-items:center;gap:5px;font-size:13px}.impact-chip img{width:26px;height:26px}
.impact-chip small{display:block;font-size:10px;font-weight:700;color:#6D4A3B}.impact-chip.sus small{color:#38576B}
.impact-score-line{display:flex;flex-direction:column;gap:8px;margin:14px 0}.impact-score-heading{display:flex;align-items:center;gap:8px;font-size:15px;line-height:21px}
.impact-score-heading img{width:38px;height:38px}.impact-score-heading>strong:last-child{margin-left:auto}
.impact-segments{display:flex;gap:4px}.impact-segments span{flex:1;height:6px;border-radius:3px;background:rgba(45,39,48,.12)}
.impact-segments.eco .filled{background:#D8673F}.impact-segments.sus .filled{background:#3E789B}
.impact-score-range{display:flex;justify-content:space-between;gap:12px;font-size:15px;line-height:21px}
.illustrated-card h4{display:flex;align-items:center;gap:8px;font-size:15px;line-height:21px;margin:12px 0 6px}.illustrated-card h4 img{width:38px;height:38px}
.native-fabric-screen .comparison-tabs{position:static;margin:14px 0 8px}.native-fabric-screen .comparison-tabs button{font-size:13px;padding:11px 4px}
.native-fabric-screen .comparison-tabs button+button{border-left:1px solid #C4BBAF;border-radius:0}.native-fabric-screen .comparison-tabs button[aria-selected=true]{border-radius:24px}
.native-fabric-screen .fabric-hero{margin-top:0;padding:12px 24px;gap:14px;background:linear-gradient(135deg,#4C387E,#6C3E68,#743D41)}
.native-fabric-screen .fabric-hero button{width:104px;border-radius:14px}.native-fabric-screen .fabric-hero #fabric-photo-open>img{height:104px}
.native-fabric-screen .difficulty{font-size:10px;line-height:12px;padding:6px 12px;border-radius:24px}.native-fabric-screen .difficulty strong{font-size:14px;line-height:17px}
#fabric-fact-dialog{max-width:430px;width:94vw;border:2px solid #EDF6F3;border-radius:24px;background:#FFF9F1;padding:22px;color:#302730}#fabric-fact-dialog::backdrop{background:#0009}#fabric-fact-dialog p{font-size:15px;line-height:21px}#fabric-fact-dialog button{width:100%;min-height:48px;border:1px solid #794795;border-radius:14px;background:#fff9f1;color:#794795;font:inherit;font-weight:800}
.fabric-topbar{justify-content:flex-start;gap:12px}.fabric-topbar>a{margin-right:auto}#fabric-top-zoom{padding:10px;line-height:0}#fabric-top-zoom img{width:24px;height:24px}
.native-fabric-screen .difficulty{display:flex;align-items:center;gap:8px}.native-fabric-screen .difficulty>img{width:50px;height:20px}.native-fabric-screen .difficulty p{margin:0;font-size:10px;line-height:12px;font-weight:900;letter-spacing:.5px}
.fabric-copy-settings{display:flex;align-items:center;justify-content:center;gap:8px}.fabric-copy-settings img{width:20px;height:20px}
@media(min-width:600px){.native-fabric-screen .fabric-hero button{width:176px}.native-fabric-screen .fabric-hero #fabric-photo-open>img{height:144px}}
@media(min-width:1100px){.native-fabric-screen .fabric-hero button{width:250px}.native-fabric-screen .fabric-hero #fabric-photo-open>img{height:230px}}
@media(max-width:599px){.native-fabric-screen .fabric-hero button{width:104px}.native-fabric-screen .fabric-hero #fabric-photo-open>img{height:85px}}
