body {margin: 0}
a {color: black; text-decoration: none;}
img {max-width: 80%; object-fit: contain;}
body.collapse table.wines {display: none;}

#back {position: fixed; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; z-index: 100; background-image: linear-gradient(var(--body-color) 0%, var(--body-color) calc(100% - 11.3px), rgba(255,255,255,0) 100%);} /* sits in left gutter; 40px box matches gutter width; grid+place-items centers the svg */
#back > svg {width: 20px; height: 20px; transform: rotate(180deg);}

/* Detail */

html, body {height: 100%; width: 100%; margin: 0px; padding: 0px;}
 
main[wine_id] {padding: 0 40px; box-sizing: border-box; min-height: 100vh;} /* uniform 40px left/right gutters at every width; min-height ensures any background covers the viewport when content is short, and grows to fit when long */
#content {padding-bottom: 30px; display: flow-root;} /* leave space for fixed #nextprev so content tail isn't hidden behind it; flow-root contains floated #label at wide so main grows to match label height (otherwise main stops at non-float content height and a translucent main bg won't extend past the label) */
#label {padding: 10px; text-align: center;}

@media (min-width:801px) {#label {float: right; width: 40%;}} /* #label is inside #content; floats right at wide so stories wrap left of it */

#price {justify-self: end;}
#producer {font-size: 150%; text-transform: uppercase; border-bottom: 1px solid rgb(143,159,149); }
#origin {font-size: 100%; margin-top: 10px;}
#vintage {font-size: 233%; margin-top: 20px;}
#type {font-size: 233%;}
#varietals {display: flex; flex-wrap: wrap; gap: 0.4em; line-height: 0.8;}
.varcomp {white-space: nowrap;}
.varcomp:not(:last-child)::after {content: ", ";}
.stories {padding-right: 0px; font-size: 117%; margin-top: 10px;}
.stories.heading {font-weight: bold; text-transform: uppercase; padding-top: 20px;}
#ws {font-size: 150%; text-transform: uppercase; padding-left: 50px;}
#score {font-size: 167%; text-transform: none; margin-top: 25px; margin-left: 5px;}
#label img {max-width: 100%; max-height: calc(100vh - 70px);}
#winesheet {width: 100%; margin-bottom: 44px;}
#nextprev {position: fixed; bottom: 0; left: 10px; right: 10px; height: 30px; z-index: 100;} /* fixed so prev/next stay visible while content scrolls; prev sits in the left back-arrow column at bottom-left, next at bottom-right */
.prevbutton {float: left;}
.nextbutton {float: right;}
.prevbutton img {height: 24px;}
.nextbutton img {height: 24px;}
.prevbutton svg {transform: rotate(-90deg); height: 20px; width: 20px;}
.nextbutton svg {transform: rotate(90deg); height: 20px; width: 20px;}

/* Index page */
div.winename[href] {cursor: pointer;}
.pwlheadrow[data-toggle] {cursor: pointer;}
.toggle {display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.4em; vertical-align: 0.05em; background: linear-gradient(currentColor, currentColor) center / 100% 0.1em no-repeat, linear-gradient(currentColor, currentColor) center / 0.1em 100% no-repeat;} /* + from two bars so rotate(45deg) is a true × */
.pwlheadrow[data-toggle="animate"] .toggle {transition: transform 0.25s ease;}
.pwlheadrow:is([data-toggle="x"], [data-toggle="animate"])[aria-expanded="true"] .toggle {transform: rotate(45deg);}