.mellow-pair,.mellow-build-hero,.mellow-builder{--m-cream:#fbf6ee;--m-clay:#b98d78;--m-ink:#231b17;color:var(--m-ink)}
.mellow-pair,.mellow-builder{background:var(--m-cream);border:1px solid #d6b7a6;border-radius:18px;padding:clamp(16px,3vw,26px)}
.mellow-pair{margin:16px 0}.mellow-pair p,.mellow-build-hero p,.mellow-builder p{margin:0 0 10px}
.mellow-kicker{color:#754b3a;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.mellow-pair h2,.mellow-build-hero h2,.mellow-builder h1{font-family:Georgia,serif;font-weight:500;line-height:1.1;margin:6px 0 12px;color:var(--m-ink)}
.mellow-pair h2,.mellow-builder h1{font-size:clamp(26px,4vw,38px)}.mellow-build-hero h2{font-size:clamp(36px,5vw,66px)}
.mellow-pair-grid,.mellow-builder-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.mellow-box-tile{background:#fffaf4;border:1px solid #e0cfc4;border-radius:12px;padding:10px;text-align:center;min-width:0}
.mellow-box-tile img,.mellow-build-photos img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.mellow-box-tile img{max-width:210px;margin:auto auto 8px}
.mellow-box-tile small,.mellow-box-tile strong,.mellow-box-tile span{display:block;line-height:1.35;overflow-wrap:break-word}.mellow-box-tile small{font-size:12px;color:#754b3a;font-weight:700}
.mellow-action{display:inline-block;background:#211b18;color:#fffaf4;border-radius:6px;padding:12px 18px;font-weight:700;text-decoration:none;min-height:44px}
.mellow-action:hover{background:#4b3127;color:#fffaf4}.mellow-action:disabled{opacity:.65}.mellow-text-link{text-decoration:underline;text-underline-offset:4px;font-weight:700}
.mellow-total{font-size:20px;font-weight:700}
.mellow-pair [role=status]:empty,.mellow-builder [role=status]:empty{display:none}
.mellow-build-hero{background:#f3e5d8;padding:clamp(28px,5vw,66px) clamp(20px,6vw,96px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(18px,4vw,48px)}
.mellow-build-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:center}
.mellow-build-photos img{background:#fff8f0;border-radius:12px}
.mellow-builder{max-width:950px;margin:0 auto 40px}.mellow-builder-fields label{display:block;font-weight:700;margin-bottom:5px}
.mellow-builder-fields select{width:100%;padding:10px;background:#fff;color:#211b18;border:1px solid #ad8c7a;border-radius:6px;min-height:44px}
.mellow-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.mellow-picker-grid button{color:var(--m-ink);cursor:pointer;height:100%}.mellow-picker-grid button:hover,.mellow-picker-grid button:focus-visible{border-color:#754b3a;background:#f5e4d7}
.mellow-picker-grid button[aria-pressed=true]{outline:2px solid #754b3a;outline-offset:-2px;background:#f5e4d7}
@media(max-width:700px){.mellow-build-hero{grid-template-columns:1fr}.mellow-builder{margin:0 14px 32px}.mellow-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mellow-pair--compact{padding:14px 16px;margin:10px 0;border-radius:12px}
.mellow-pair--compact h2{font-size:clamp(21px,3vw,29px);margin:4px 0 8px}
.mellow-pair--compact p{margin-bottom:6px}
.mellow-pair--compact .mellow-pair-grid{gap:6px;margin:8px 0}
.mellow-pair--compact .mellow-box-tile{display:grid;grid-template-columns:clamp(30px,7vw,54px) minmax(0,1fr);column-gap:6px;align-items:center;align-content:center;text-align:left;padding:5px}
.mellow-pair--compact .mellow-box-tile img{grid-row:span 2;margin:0}
.mellow-pair--compact .mellow-box-tile small{font-size:11px}
.mellow-pair--compact .mellow-box-tile strong{font-size:13px}
.mellow-pair--compact .mellow-total{font-size:16px}
.mellow-pair--compact .mellow-action{padding:9px 13px}