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

.flowsectionheader {
	position: -webkit-sticky;
	position: sticky;
	z-index: 98;
}
.sectionsheader {
	position: -webkit-sticky;
	position: sticky;
	z-index: 98;
}
.pwlheadrow {
	position: -webkit-sticky;
	position: sticky;
	z-index: 96;
	top: 0px; /* I don't know why, but the first one doesn't stick unless this is set */
}
.pwlheadrow.level2 {
	position: -webkit-sticky;
	position: sticky;
	z-index: 95;
}
.pwlheadrow.level3 {
	position: -webkit-sticky;
	position: sticky;
	z-index: 94;
}
.pwlheadrow.level4 {
	position: -webkit-sticky;
	position: sticky;
	z-index: 93;
}
div[style*="column-count"]:not([style*="column-count: 1"]) .pwlheadrow { /* Multi-column doesn't work, so disable */
	position: static;
}
#back {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100; 
	background-image: linear-gradient(var(--body-color) 0%, var(--body-color) calc(100% - 11.3px), rgba(255,255,255,0) 100%);
	padding: 8px 5px 5px 10px;
	height: 35px;
}
.pwlhead {padding-top: 5px;}
.attop {
/* 	background-color: var(--body-color); */
}
div {background-color: inherit;} /* so it cascaded to the sticky headers */

.attop.notlast {
	padding-bottom: 0px;
	margin-bottom: 0px;
	background-image: none;
/* 	background-color: var(--body-color); */
}

/* Detail */

html, body {height: 100%; width: 100%; margin: 0px; padding: 0px;}
 
@media (min-width:320px)  { 
	main[wine_id] {
		display: flex;
		flex-direction: column;
/* 		width: calc(100vw - 20px); */
		margin: auto;
	}
	#label {padding: 10px; text-align: center;}
}

@media (min-width:801px)  { 
	main[wine_id] {
		display: grid;
		grid-template-columns: 1.17in auto 40%;
		grid-template-rows: auto 30px;
		grid-template-areas: 
			"left content label"
			"left content nextprev";
/* 		position: fixed; */
	}
	#content {grid-area: content; height: 100vh; overflow: scroll; -webkit-overflow-scrolling: touch;}
	#label {grid-area: label; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
}

#back {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100; 
	background-image: linear-gradient(var(--body-color) 0%, var(--body-color) calc(100% - 11.3px), rgba(255,255,255,0) 100%);
	padding: 8px 5px 5px 10px;
	height: 35px;
}

/* New */
#back > svg {
	width: 20px;
	height: 20px;
	margin: 5px 0;
	transform: rotate(180deg);
}

#left {grid-area: left;}
#price, #nameheader, .stories {}
#nextprev {grid-area: nextprev;}

#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 {grid-area: nextprev; margin: 0px 10px;}
.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;}