/* Review controls stay separate from the website's primary navigation. */
#review .review-bar{gap:12px;padding:6px 16px}
#review .review-options{display:block}
#review .review-options>div{display:flex;align-items:center;gap:10px}
#review .review-options>summary{display:none}
#review .review-page-label{gap:6px}
#review .review-page-label select{width:170px;min-width:0}
#review .palette-form select{width:130px;min-width:0}
@media(max-width:760px){
 #review .review-bar{gap:0 12px;padding:4px 12px}
 #review .review-options{display:block;grid-column:2;grid-row:2;position:relative;justify-self:end}
 #review .review-options>summary{display:flex;align-items:center;justify-content:center;list-style:none;min-height:44px;padding:8px 10px;border:1px solid #b7bec8;font-size:11px;cursor:pointer}
 #review .review-options>summary::-webkit-details-marker{display:none}
 #review .review-options>div{display:grid;gap:12px;position:absolute;right:0;top:calc(100% + 5px);width:290px;max-width:calc(100vw - 24px);padding:16px;background:#fff;color:#1b1b1b;border:1px solid #b7bec8;box-shadow:0 8px 24px #0002}
 #review .review-options .palette-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0}
 #review .review-options .palette-form label{grid-column:1/-1;min-height:0}
 #review .review-options .palette-form select{max-width:none;width:100%}
 #review .review-options .palette-swatches{grid-column:1/-1}
 #review .review-options .review-greyscale{grid-column:auto;grid-row:auto;justify-self:start;min-height:44px}
}

/* Keep the page selector usable at 320px instead of squeezing its label away. */
@media(max-width:370px){
 #review .review-bar{grid-template-columns:1fr auto}
 #review .review-page-label{grid-column:1/-1;grid-row:2;justify-content:flex-start}
 #review .review-page-label select{flex:1;min-width:0;max-width:none;width:auto}
 #review .review-options{grid-column:1/-1;grid-row:3;justify-self:end}
}