/* cavecuvee.se's own rules, on top of the shared main.css. */

/* The header holds only the logo, where the restaurant's also holds the booking button. */
.site-header .menu-row li {
  width: auto;
}

/* The bottle is wide where the restaurant's glass is tall. */
.site-header .menu-row img#header-logo {
  width: 10rem;
}

/* The logo keeps its size however long the menu beside it gets. */
.site-header .menu-row.w-button > li:first-child {
  flex-shrink: 0;
}

/* The menu sits beside the logo on a laptop, and under it below 800px, where the header is taller. */
.site-header .menu-row.w-button {
  gap: 2rem;
}

.site-header .menu-row .site-menu {
  padding-top: 0;
  margin-bottom: 0;
  gap: 0.4rem;
}

/* The menu marks the page it is on, and on a nested page, such as a wine, the section it is in. */
.site-header .site-menu a[aria-current] {
  color: var(--cc-red);
}

@media screen and (max-width: 800px) {
  .site-header .menu-row.w-button {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 0.5rem;
  }

  .site-header .menu-row.w-button > li:first-child {
    padding-bottom: 0.4rem;
  }
}

/* Four menu items fit a phone's width with the tracking eased. */
@media screen and (max-width: 600px) {
  .site-header .site-menu a {
    letter-spacing: 0.1em;
  }
}

/* At 360px and below, the tracking and the gaps tighten further, so the four items stay inside the screen. */
@media screen and (max-width: 400px) {
  .site-header .menu-row .site-menu {
    gap: 0.2rem;
  }

  .site-header .site-menu a {
    letter-spacing: 0.04em;
  }

  .site-header .site-menu li:not(:first-child)::before {
    letter-spacing: 0.3em;
  }
}

/* The language switch sits at the header's right edge, in the menu's lettering, apart from the menu, since it leads to the other language rather than within this one. */
.site-header .language-switch {
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  margin: 0;
  font-family: NaiveInlineShadowBold, "Special Elite", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16.2px;
  white-space: nowrap;
}

.site-header .language-switch a {
  color: black;
  border-bottom: none;
}

.site-header .language-switch a:hover {
  color: var(--cc-red);
}

/* Where the menu reaches towards the header's edge, the switch moves up into the corner, beside the logo on a phone. */
@media screen and (max-width: 1100px) {
  .site-header .language-switch {
    top: 0.5rem;
    right: 1rem;
    transform: none;
    font-size: 14.4px;
  }
}

@media screen and (max-width: 400px) {
  .site-header .language-switch {
    right: 0.6rem;
    font-size: 12.6px;
    letter-spacing: 0.1em;
  }
}

/* A page's title is set like the restaurant's section headings. */
.page-content h1 {
  font-size: 27px;
  color: var(--cc-red);
  letter-spacing: 0.1rem;
}

/* The footer names who to contact for prices and orders. */
.site-footer .contact-heading {
  font-family: NaiveInlineShadowBold, "Special Elite", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 0.3rem;
}

/* Below 800px the header holds the logo and the menu on two rows, so the page starts lower. */
@media screen and (max-width: 800px) {
  .page-content {
    padding-top: 8rem;
  }
}

/* Tags on a wine in a list, such as Slutsåld or Magnum, are marked in red ink, like the ornaments. */
.tag {
  font-family: NaiveInlineShadowBold, "Special Elite", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--cc-red);
}

.tags .tag + .tag {
  margin-left: 1em;
}

.producer-links {
  margin-top: 0.5rem;
}

/* "Viner ↓" leads to the wines' heading, which lands below the fixed header. */
.wines h2[id] {
  scroll-margin-top: 7rem;
}

@media screen and (max-width: 800px) {
  .wines h2[id] {
    scroll-margin-top: 9rem;
  }
}

/* The wine page widens to the footer's 800px, so the bottle photo fits beside the facts. */
.wrapper.wide {
  max-width: 800px;
}

.wine .back {
  margin-bottom: 0.5rem;
}

.wine-sheet {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: start;
  width: 100%;
  margin-top: 1.5rem;
  text-align: left;
}

/* The product sheet and printing sit under the wine's name, in the same place on every wine page. */
.wine-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.5rem;
  margin: 0 0 1rem;
}

.wine-actions .sheet,
.wine-actions .print-action {
  margin: 0;
}

.wine-actions .sheet .button {
  display: inline-block;
  white-space: nowrap;
  margin-bottom: 0;
}

/* Without a photo, which is most wines, the facts become a spec sheet across the page:
   labels in Bordeaux right-aligned against a gutter, values to the right of it. */
.wine-sheet.no-photo {
  --fact-labels: 13rem;
  display: block;
}

.wine-sheet.no-photo .wine-facts {
  display: grid;
  grid-template-columns: var(--fact-labels) 1fr;
  column-gap: 2rem;
  row-gap: 0.8rem;
}

.wine-sheet.no-photo .wine-facts dt {
  grid-column: 1;
  margin-top: 0;
  text-align: right;
}

.wine-sheet.no-photo .wine-facts dd {
  grid-column: 2;
}

/* On a phone the labels go back above their values. */
@media screen and (max-width: 600px) {
  .wine-sheet.no-photo .wine-facts {
    display: block;
  }

  .wine-sheet.no-photo .wine-facts dt {
    margin-top: 0.8rem;
    text-align: left;
  }

  .wine-sheet.no-photo .wine-facts dt:first-child {
    margin-top: 0;
  }
}

/* Multiply lays the photo's pale studio background into the paper, so the bottle stands on the page.
   It goes on the aside, since the aside is the layer the photo is drawn in once it sticks. */
.wine-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  mix-blend-mode: multiply;
}

.wine-photo {
  margin: 0;
}

/* The bottle fits the window under the header, however tall the photo. */
.wine-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 9rem);
  margin: 0 auto;
}

/* On a laptop the bottle stays in view while the buyer reads down the facts. */
@media screen and (min-width: 801px) {
  .wine-aside {
    position: sticky;
    top: 7rem;
  }
}

/* The facts are read like an article: left-aligned, less tracking, hyphenated. */
.wine-facts,
.wine-facts * {
  letter-spacing: 0.1rem;
}

.wine-facts {
  margin: 0;
  hyphens: auto;
}

.wine-facts dt {
  color: var(--cc-red);
  margin-top: 0.8rem;
}

.wine-facts dt:first-child {
  margin-top: 0;
}

.wine-facts dd {
  margin: 0;
}

.wine-text {
  max-width: 600px;
  margin-top: 2rem;
}

/* The producer's story and the wine's text are read like an article: left-aligned, less tracking, hyphenated. */
.producer-text,
.wine-text {
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.producer-text *,
.wine-text * {
  text-align: left;
  letter-spacing: 0.1rem;
}

/* Below 800px, and on paper, the photo goes above the facts. */
@media print, screen and (max-width: 800px) {
  .wine-sheet {
    grid-template-columns: 1fr;
  }

  .wine-photo {
    width: 60%;
    max-width: 16rem;
  }
}

/* The wine list: one table, typed like the facts, on the paper, with no cells drawn.
   Column headings in Bordeaux over an inked rule, a group heading across the table, and a dotted line between wines, like a price list. */
.wine-table-frame {
  align-self: stretch;
  overflow-x: auto;
}

.wine-table {
  width: 100%;
  margin: 0 0 2rem;
  border: 0;
  border-collapse: collapse;
  color: #111111;
  font-size: 16px;
  text-align: left;
}

.wine-table,
.wine-table * {
  letter-spacing: 0.05rem;
}

.wine-table tr:nth-child(even) {
  background: none;
}

.wine-table th,
.wine-table td {
  padding: 0.5rem 0.9rem 0.5rem 0;
  border: 0;
  background: none;
  vertical-align: top;
}

.wine-table th:last-child,
.wine-table td:last-child {
  padding-right: 0;
}

.wine-table thead th {
  font-family: NaiveInlineShadowBold, "Special Elite", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--cc-red);
  border-bottom: 1px solid black;
}

.wine-table .group-heading th {
  padding: 2.5rem 0 0.5rem;
  text-align: center;
}

.wine-table .group-heading h2 {
  margin: 0;
  letter-spacing: 0.1rem;
}

.wine-table tbody tr:not(.group-heading) + tr td {
  border-top: 1px dotted rgba(0, 0, 0, 0.4);
}

.wine-table td.vintage {
  white-space: nowrap;
}

/* A long word in the type or grapes, such as Gewurztraminer, breaks at a syllable, so the table keeps inside its column.
   Names, of wines, producers and places, aren't hyphenated. */
.wine-table td {
  overflow-wrap: break-word;
}

.wine-table td.type,
.wine-table td.grapes {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* On a laptop the column headings stay under the site header while the list scrolls,
   so Region and Område don't get mixed up further down. The frame lets the table out, since a frame that scrolls holds the headings in. */
@media screen and (min-width: 801px) {
  .wine-table-frame {
    overflow-x: visible;
  }

  .wine-table thead th {
    position: sticky;
    top: 5.6rem;
    z-index: 2;
    background: #fcf1db url("/assets/images/bg-pattern.jpg");
  }
}

.wine-table .name .tags {
  display: block;
}

/* The grouping buttons, in the restaurant's button style. The chosen one is marked in red ink, not filled. */
.wine-grouping {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.wine-grouping[hidden] {
  display: none;
}

.wine-grouping-label {
  margin-right: 0.4rem;
}

.wine-grouping .button {
  margin-bottom: 0;
  cursor: pointer;
}

.wine-grouping .button[aria-pressed="true"] {
  color: var(--cc-red);
  border-color: var(--cc-red);
}

/* The column of the current grouping says what its heading already says. */
.wine-table[data-group="region"] .region,
.wine-table[data-group="type"] .type,
.wine-table[data-group="producer"] .producer {
  display: none;
}

/* The vintage in the name cell is for a phone, where the vintage column goes. */
.wine-table .list-vintage {
  display: none;
}

/* On a phone each wine is a short block: the vintage and name, the producer, then the region, type, area and grapes on one line,
   without what the group's heading already says. The column headings go, since each line says what it is. */
@media screen and (max-width: 600px) {
  .wine-table-frame {
    overflow-x: visible;
  }

  .wine-table,
  .wine-table tbody,
  .wine-table tr,
  .wine-table th {
    display: block;
  }

  .wine-table thead {
    display: none;
  }

  .wine-table tbody tr:not(.group-heading) {
    padding: 0.7rem 0;
  }

  .wine-table tbody tr:not(.group-heading) + tr td {
    border-top: 0;
  }

  .wine-table tbody tr:not(.group-heading) + tr:not(.group-heading) {
    border-top: 1px dotted rgba(0, 0, 0, 0.4);
  }

  .wine-table td {
    display: inline;
    padding: 0;
    hyphens: manual;
    -webkit-hyphens: manual;
  }

  .wine-table td.name,
  .wine-table td.producer {
    display: block;
  }

  .wine-table td:empty,
  .wine-table td.vintage {
    display: none;
  }

  .wine-table .list-vintage {
    display: inline;
  }

  .wine-table td.type::before,
  .wine-table td.appellation::before,
  .wine-table td.grapes::before {
    content: " · ";
  }

  .wine-table[data-group="region"] td.type::before {
    content: none;
  }

  .wine-grouping-label {
    flex-basis: 100%;
    margin-right: 0;
    text-align: center;
  }
}

/* "Skriv ut" is an action, so a button, drawn as a link. */
.print-action {
  margin: 0 0 1rem;
}

.link-button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid black;
  background: none;
  color: black;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.link-button:hover {
  color: var(--cc-red);
  border-bottom-color: var(--cc-red);
}

/* The editors at /redigera/: one producer or wine at a time, its form beside its page as a preview, on the paper,
   typed like the wine list. A changed field gets a Sage rule at its left, and a problem is written under it in Bordeaux.
   Fields are in the typewriter face, since the display face has capitals only and the content has both. */
.editor-wrapper {
  margin: 0 1rem;
  padding-top: 2rem;
  text-align: left;
}

.editor-wrapper h1 {
  text-align: center;
}

.editor-account {
  margin: 0 0 1rem;
  font-size: 14px;
  text-align: right;
}

/* How to log in on the Mac is guidance, under the heading like the note below it, not an account line at the edge. */
.editor-account.local-login {
  text-align: center;
}

.editor-note {
  text-align: center;
}

/* The editors are made for a computer. On a phone the page says so. */
.editor-phone-note {
  display: none;
}

@media screen and (max-width: 600px) {
  .editor-phone-note {
    display: block;
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--cc-red);
    border-radius: 0.3rem;
    font-size: 14px;
    text-align: left;
  }
}

.editor-note.error,
.save-status.error,
.editor .problem {
  color: var(--cc-red);
}

/* The bar: Viner, Producenter, Behöver granskas, Spara, what the last save said, and what Spara saves.
   It stays under the site header, so Spara is at hand however far down the form the editor is. */
.editor-bar {
  position: sticky;
  top: 5.6rem;
  z-index: 5;
  margin: 0 -1rem;
  padding: 0.6rem 1rem 0;
  background: #fcf1db url("/assets/images/bg-pattern.jpg");
}

@media screen and (max-width: 800px) {
  .editor-bar {
    top: 7.6rem;
  }
}

.sheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.2rem;
  margin: 0 0 1rem;
}

.sheet-toolbar .button {
  margin: 0;
  cursor: pointer;
}

.sheet-toolbar .button[aria-pressed="true"] {
  color: var(--cc-red);
  border-color: var(--cc-red);
}

.sheet-toolbar .button:disabled {
  color: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.4);
  background: none;
  cursor: default;
}

.save-status {
  margin: 0;
  font-size: 14px;
}

/* What Spara saves, each a way to the item. */
.changed-items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  min-height: 1.6rem;
  margin: -0.4rem 0 0.4rem;
  font-size: 14px;
}

.changed-items .has-problem {
  color: var(--cc-red);
  border-bottom-color: var(--cc-red);
}

.finder input,
.finder select,
.item-form input,
.item-form textarea,
.item-form select {
  box-sizing: border-box;
  padding: 0.25rem 0.35rem;
  border: 0.07rem solid black;
  border-radius: 0.3rem;
  background: #ffffff;
  color: #111111;
  font: 14px "Special Elite", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.03rem;
}

/* The finder: search, and the selects of the view. What the search finds is listed under it. */
.finder {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0.8rem 0;
  border-top: 1px solid black;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.4);
  font-size: 14px;
}

.finder .search {
  margin: 0;
}

.finder .search input {
  width: 18rem;
}

.finder-choice select {
  max-width: 24rem;
  margin-left: 0.3rem;
}

.new-producer {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.new-producer input {
  width: 16rem;
}

.new-producer .button {
  margin: 0;
  cursor: pointer;
}

.search-results {
  display: block;
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.search-results li,
.folder-list li {
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  padding: 0.2rem 0;
}

.found-kind,
.list-hint,
.preview-label {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
}

.list-hint {
  font-size: 14px;
}

.folder-list {
  display: block;
  text-align: left;
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 22rem;
  column-gap: 2.5rem;
  font-size: 14px;
}

.folder-list li {
  break-inside: avoid;
}

.folder-list.review-list {
  columns: 1;
}

.review-note {
  flex-basis: 100%;
  margin: 0.1rem 0 0.5rem;
  font-size: 14px;
}

.sheet-heading {
  margin: 1.5rem 0 0.5rem;
  text-align: left;
}

/* One item: the form, and its page beside it, which goes under it on a narrower screen. */
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media screen and (max-width: 800px) {
  .item {
    grid-template-columns: minmax(0, 1fr);
  }
}

.item-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  font-size: 14px;
}

.item-head .item-title {
  margin: 0;
  text-align: left;
}

/* The heading takes the keyboard when the item opens, so the next Tab is inside it. It isn't a control, so it has no ring. */
.item-head .item-title:focus {
  outline: none;
}

.item-head p {
  margin: 0;
}

.item-head .folder-producer,
.item-head .tags {
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
}

.item-head .problem {
  font-size: 14px;
}

.item-head .folder-actions {
  display: flex;
  gap: 0.2rem 1rem;
  margin: 0.5rem 0 1rem;
  font-size: 14px;
}

.review-note-box {
  margin: 0 0 1rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--cc-red);
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* While a save runs, and the content is read again after it, the fields are locked. */
.sheet-fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sheet-fields:disabled input,
.sheet-fields:disabled textarea,
.sheet-fields:disabled select {
  opacity: 0.6;
}

.item-facts,
.item-files {
  border-top: 1px solid black;
}

.item-fact,
.item-files .file {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.35rem 0 0.35rem 0.4rem;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.4);
  font-size: 14px;
}

.fact-name {
  padding-top: 0.3rem;
  color: var(--cc-red);
}

/* On a phone each label goes above its field. */
@media screen and (max-width: 600px) {
  .item-fact,
  .item-files .file {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

.fact-name .unit {
  color: rgba(0, 0, 0, 0.6);
}

.item-fact.changed,
.text-column.changed {
  box-shadow: inset 3px 0 0 var(--cc-green-dark);
}

.item-form .problem {
  display: block;
  margin-top: 0.2rem;
  font-size: 12px;
}

.item-fact.has-problem input,
.item-fact.has-problem textarea,
.item-fact.has-problem select {
  border-color: var(--cc-red);
  outline: 1px solid var(--cc-red);
}

.item-fact input[type="text"],
.item-fact input[type="date"],
.item-fact textarea,
.item-fact select {
  width: 100%;
}

.item-fact textarea {
  display: block;
  field-sizing: content;
  max-height: 9rem;
  resize: vertical;
}

.item-fact .number {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.item-fact .number input {
  width: 7rem;
}

.item-fact .unit {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
}

.item-fact .texts .text {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
}

.item-fact .texts .text + .text {
  margin-top: 0.25rem;
}

.item-fact .lang {
  width: 1.4rem;
  padding-top: 0.3rem;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  text-transform: uppercase;
}

.item-fact input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3rem;
  accent-color: var(--cc-green-dark);
}

.item-part {
  margin: 1.5rem 0 0.5rem;
  font-size: 18px;
  text-align: left;
}

/* The texts in Markdown, Swedish and English side by side when there is room. */
.text-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.text-column.changed {
  padding-left: 0.6rem;
}

.text-label span {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 14px;
}

.text-column textarea.markdown {
  width: 100%;
  min-height: 12rem;
  padding: 0.4rem;
  font: 14px/1.5 "Special Elite", "Helvetica Neue", Helvetica, Arial, sans-serif;
  resize: vertical;
}

/* A photo, product sheet or logo: shown, opened, or a new one chosen, dropped or pasted. */
.item-files .file-note {
  display: block;
  margin-bottom: 0.3rem;
}

.file-preview {
  display: block;
  max-width: 10rem;
  max-height: 14rem;
  margin-bottom: 0.3rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* The browser's own file field, in its own language, is hidden: the box around it is the button, and the field still takes the keyboard. */
.item-files .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.item-files .drop {
  position: relative;
  display: block;
  margin: 0.3rem 0;
  padding: 0.6rem 0.4rem;
  border: 1px dashed rgba(0, 0, 0, 0.5);
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  cursor: pointer;
}

.item-files .drop:hover {
  border-color: var(--cc-red);
}

.item-files .drop:has(.file-input:focus-visible) {
  outline: 2px solid var(--cc-red);
  outline-offset: 3px;
}

/* The preview: the item's page as the site shows it, in view while the form scrolls. */
.item-preview {
  position: sticky;
  top: 12rem;
  max-height: calc(100vh - 13rem);
  overflow: auto;
  padding: 0 0.5rem 1rem 1.5rem;
  border-left: 1px solid black;
}

@media screen and (max-width: 800px) {
  .item-preview {
    position: static;
    max-height: none;
    padding: 1rem 0 0;
    border-top: 1px solid black;
    border-left: 0;
  }
}

.preview-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 14px;
}

.preview-head p {
  margin: 0;
}

.preview-langs {
  display: flex;
  gap: 0.8rem;
}

.preview-langs [aria-pressed="true"] {
  color: var(--cc-red);
  border-bottom-color: var(--cc-red);
}

.preview-page {
  text-align: center;
}

.preview-title {
  margin: 0.5rem 0;
  color: var(--cc-red);
  font-family: NaiveInlineShadowBold, "Special Elite", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 27px;
  letter-spacing: 0.1rem;
}

.preview-page .wine-aside {
  position: static;
}

.preview-page .wine-sheet.no-photo {
  --fact-labels: 9rem;
}

.preview-page .wine-photo img {
  max-height: 24rem;
}

.preview-page .wine-actions .button {
  display: inline-block;
  margin: 0;
  cursor: pointer;
}

/* What only the page does, going back and printing, is shown faded, since it does nothing here. */
.preview-page .back,
.preview-page .print-action {
  opacity: 0.55;
}

.preview-page .wine-actions .link-button {
  cursor: default;
}

.preview-logo {
  display: block;
  max-width: 8rem;
  margin: 0.5rem auto 0;
}

/* Asking before a delete, with hiding offered beside it. */
.delete-dialog {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--cc-red);
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.6);
}

.delete-dialog p {
  margin: 0 0 0.5rem;
}

.delete-dialog .note {
  font-size: 14px;
}

.dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.2rem;
}

.dialog-buttons .button {
  margin: 0;
  cursor: pointer;
}

.dialog-buttons .button.danger {
  color: var(--cc-red);
  border-color: var(--cc-red);
}

/* What only paper needs: the site's address, the product sheet's address, and the date of a printed list. */
.print-only {
  display: none;
}

/* The browser's own focus ring and selection, in the site's inks. */
:focus-visible {
  outline: 2px solid var(--cc-red);
  outline-offset: 3px;
}

::selection {
  background-color: var(--cc-green-light);
  color: black;
}

/* Print: A4, black on white with Bordeaux headings, as a menu card prints. No paper texture, no menu, no buttons.
   The header shrinks to the logo, and the footer keeps who to contact, without its bands. */
@page {
  size: A4;
  margin: 12mm 14mm;
}

@media print {
  html,
  body,
  .site-header,
  .page-content,
  .site-footer {
    background: none;
  }

  body {
    color: black;
    font-size: 10pt;
  }

  .site-header {
    position: static;
    height: auto;
    padding: 0 0 3mm;
    box-shadow: none;
  }

  .site-header .menu-row.w-button > li:last-child,
  .site-header .language-switch,
  .print-action,
  .wine-grouping,
  .wine-actions,
  .back-arrow {
    display: none;
  }

  .site-header .menu-row img#header-logo {
    width: 32mm;
  }

  .page-content {
    padding-top: 0;
  }

  .wrapper,
  .wrapper.wide {
    max-width: none;
    padding: 0;
  }

  .page-content .page section {
    margin: 0;
    padding: 0;
  }

  .page-content a,
  .site-footer a {
    border-bottom: 0;
    text-decoration: none;
    color: black;
  }

  .page-content h1 {
    margin: 0 0 2mm;
    font-size: 16pt;
  }

  .print-only {
    display: block;
  }

  .print-only[hidden] {
    display: none;
  }

  .site-footer {
    margin-top: 4mm;
    padding: 3mm 0 0;
    border: 0;
    border-top: 0.3mm solid black;
    font-size: 9pt;
    break-inside: avoid;
  }

  /* On paper the footer is who to contact on one line, and the site's address under it. */
  .site-footer .footer-col-1,
  .site-footer .footer-col-2 > p:not(.site-address) {
    display: none;
  }

  .site-footer .footer-col-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }

  .site-footer .footer-col {
    width: auto;
    float: none;
    padding: 0;
    text-align: center;
  }

  .site-footer p,
  .site-footer li {
    margin: 0;
  }

  .site-footer .contact-heading,
  .site-footer .contact-list,
  .site-footer .contact-list li {
    display: inline;
    padding: 0;
  }

  .site-footer .contact-heading::after,
  .site-footer .contact-list li + li::before {
    content: " · ";
  }

  /* The wine list: the whole table across the page, its column headings on every page, and each wine's row whole.
     A group's heading stays with its first wines, and a long group runs on to the next page, so no page is left near empty. */
  .wine-table-frame {
    overflow: visible;
  }

  .wine-table {
    min-width: 0;
    margin-bottom: 4mm;
    font-size: 8.5pt;
  }

  .wine-table thead {
    display: table-header-group;
  }

  .wine-table tr {
    break-inside: avoid;
  }

  .wine-table .group-heading {
    break-after: avoid;
  }

  .wine-table th,
  .wine-table td {
    padding: 1.2mm 3mm 1.2mm 0;
  }

  .wine-table .group-heading th {
    padding: 4mm 0 1mm;
    text-align: center;
  }

  .wine-table .group-heading h2 {
    position: static;
    font-size: 13pt;
  }

  .print-date {
    text-align: center;
  }

  /* The wine page: one sheet, with the photo above the facts at a height that leaves them room,
     and the facts as a spec sheet, labels beside their values. */
  .wine-sheet,
  .wine-sheet.no-photo {
    display: block;
    margin-top: 3mm;
  }

  .wine-aside {
    position: static;
    margin: 0 0 3mm;
    align-items: center;
  }

  .wine-photo {
    width: auto;
    max-width: none;
  }

  .wine-photo img {
    width: auto;
    max-height: 42mm;
  }

  .wine-facts,
  .wine-sheet.no-photo .wine-facts {
    display: grid;
    grid-template-columns: 42mm 1fr;
    column-gap: 5mm;
    row-gap: 0.8mm;
    font-size: 8.5pt;
    line-height: 1.3;
  }

  .wine-facts dt,
  .wine-sheet.no-photo .wine-facts dt {
    grid-column: 1;
    margin-top: 0;
    text-align: right;
  }

  .wine-facts dd {
    grid-column: 2;
  }

  .sheet-url {
    margin: 0;
    font-size: 8pt;
    letter-spacing: 0.05rem;
    text-align: center;
  }

  .wine-text {
    max-width: none;
    margin-top: 3mm;
    font-size: 9pt;
  }

  .wine-text,
  .wine-text * {
    letter-spacing: 0.08rem;
  }

  .wine-text p {
    margin-bottom: 2mm;
  }
}