.recommendations{margin:20px 0;padding:22px;border:1px solid #b9c2be;background:#f8f7f4;color:#080b0a}.recommendations>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.recommendations h2{margin:8px 0 5px;font:800 28px/.85 var(--display);text-transform:uppercase}.recommendations header p{margin:0;color:#6b7471;font-size:10px}.recommendations>header>span{display:flex;align-items:center;gap:8px;color:#606a67;font-size:9px}.recommendation-grid{margin-top:17px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.recommendation-grid>button{min-width:0;min-height:190px;padding:17px;position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:12px;border:1px solid #c4cac7;background:#fbfbf9;color:#111;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.recommendation-grid>button:hover{border-color:#00a991;transform:translateY(-2px);box-shadow:0 9px 20px rgba(7,15,13,.08)}.recommendation-grid>button:focus-visible{outline:2px solid #008b76;outline-offset:3px}.recommendation-grid>button.selected{border-color:#00a991;background:#e8f7f3;box-shadow:inset 0 0 0 1px #00a991}.recommendation-grid button>small{grid-column:1/-1;width:max-content;padding:5px 12px;border-radius:20px;background:#bcf0e7;color:#0b5247;font:700 7px var(--mono);text-transform:uppercase}.recommendation-grid img{width:72px;height:72px;object-fit:contain}.recommendation-grid button>span{min-width:0;align-self:center}.recommendation-grid button>span b,.recommendation-grid button>span em{display:block}.recommendation-grid button>span b{font:800 16px/.95 var(--display);text-transform:uppercase}.recommendation-grid button>span em{margin-top:8px;color:#68726e;font-size:9px;font-style:normal}.recommendation-grid button>strong{min-height:38px;grid-column:1/-1;padding:0 13px;justify-content:space-between;border:1px solid #7c8581}.recommendation-confirm,.recommendation-grid button>strong{display:flex;align-items:center;font:700 7px var(--mono);text-transform:uppercase}.recommendation-confirm{margin-top:13px;padding:11px 14px;gap:8px;border-left:3px solid #00a991;background:#dff4ef;color:#006f5e}.recommendations-compact{margin:0;padding:20px 24px}.recommendations-compact>header{float:left;width:250px}.recommendations-compact .recommendation-grid{margin:0 0 0 275px;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.recommendations-compact .recommendation-grid>button{min-height:104px;padding:13px;grid-template-columns:54px minmax(0,1fr) 20px;grid-template-rows:1fr;border-color:#70cbbd}.recommendations-compact .recommendation-grid button>small{display:none}.recommendations-compact .recommendation-grid img{width:50px;height:50px}.recommendations-compact .recommendation-grid button>span b{font-size:12px}.recommendations-compact .recommendation-grid button>span em{font-size:8px}.recommendations-compact .recommendation-grid button>i{width:18px;height:18px;display:grid;place-items:center;border:1px solid #7d8783;border-radius:2px;font-style:normal}.recommendations-compact .recommendation-grid button.selected:before{content:"MOST BUNDLED";position:absolute;top:-12px;left:50%;padding:5px 10px;background:#00a991;color:#fff;font:700 6px var(--mono);letter-spacing:.08em;white-space:nowrap;transform:translateX(-50%)}.recommendation-include{margin:12px 0 0 auto;padding:0;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#008b76;cursor:pointer;font:700 8px var(--mono);text-transform:uppercase}.recommendation-include:focus-visible{outline:2px solid #008b76;outline-offset:4px}.recommendations-compact:after{content:"";display:block;clear:both}@media (max-width:1100px){.recommendations-compact>header{float:none;width:auto}.recommendations-compact .recommendation-grid{margin:20px 0 0;grid-template-columns:1fr 1fr}}@media (max-width:820px){.recommendation-grid{grid-template-columns:1fr 1fr}}@media (max-width:560px){.recommendation-grid,.recommendations-compact .recommendation-grid{grid-template-columns:1fr}.recommendation-grid>button{min-height:150px}.recommendations{padding:16px}.recommendations>header{display:block}.recommendations>header>span{margin-top:14px}}@media (prefers-reduced-motion:reduce){.recommendation-grid>button{transition:none}}