/* BXYZ:..:eliot@bosmanxyz.xyz:..:.www.bosmanxyz.xyz */

@layer components {
.handelsvitrin[data-fyll="mork"] {
  background: var(--kalla-sekundar);
  color: var(--kalla-primar);
}

.handelsvitrin[data-yta="fyll"] .handelsvitrin__kalla,
.handelsvitrin[data-yta="fyll"] .handelsvitrin__troskel {
  display: none;
}

@media not (min-width: 64rem) {
  .ram[data-black="hem"] .handelsvitrin-yta[data-kolumner] {
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  }

  .ram:not([data-nav-lage="falt"]) .hem-skrivbord__cell[data-nav-overlay="nej"]:not(.hem-skrivbord__cell--hem):not(.hem-skrivbord__cell--meny) {
    display: none;
  }

  .ram[data-nav-lage="falt"] .hem-skrivbord__cell[data-nav-overlay="nej"]:not(.hem-skrivbord__cell--hem):not(.hem-skrivbord__cell--meny) {
    display: none;
  }
}

@media (min-width: 64rem) {
  .hem-skrivbord__cell[data-nav-skrivbord="nej"] {
    display: none;
  }

  html[data-huvud="skrivbord"] .ram[data-black="hem"] .handelsvitrin-yta[data-kolumner] {
    display: grid;
    position: fixed;
    z-index: var(--lager-innehall);
    inset-block-start: var(--hem-handels-block-start);
    inset-inline-start: var(--margin);
    inset-inline-end: var(--margin);
    block-size: var(--hem-handels-block);
    grid-template-columns: repeat(var(--hem-kolumner, 2), minmax(0, 1fr));
    grid-template-rows: repeat(var(--hem-rader, 1), minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--gutter);
  }

  html[data-huvud="skrivbord"] .ram[data-black="hem"] .handelsvitrin-yta[data-kolumner]:not([data-lage="staende"]) {
    padding-block-start: var(--gutter);
    padding-block-end: var(--gutter);
  }

  html[data-huvud="skrivbord"] .ram[data-black="hem"] .handelsvitrin-yta[data-kolumner] .handelsvitrin {
    position: relative;
    inset: auto;
    inline-size: auto;
    block-size: auto;
    min-block-size: 0;
  }

  html[data-huvud="skrivbord"] .ram:has(.hem-skrivbord__cell--hem[data-nav-mark-stor="ja"])[data-black="hem"] .handelsvitrin-yta[data-kolumner]:not([data-lage="staende"]) .handelsvitrin[data-handels="1"] {
    margin-block-start: var(--hem-handels-mark-luft);
  }

  html[data-huvud="skrivbord"] .ram[data-black="hem"] .handelsvitrin-yta[data-lage="staende"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--staende-gap);
    grid-template-columns: none;
    grid-template-rows: none;
  }

  html[data-huvud="skrivbord"] .ram[data-black="hem"] .handelsvitrin-yta[data-lage="staende"] .handelsvitrin {
    flex: 0 0 auto;
    inline-size: min(var(--staende-inline), calc(var(--staende-max-block) * 4 / 5));
    max-block-size: var(--staende-max-block);
  }

  html[data-huvud="skrivbord"] .ram[data-black="hem"] .handelsvitrin-yta[data-lage="staende"] .handelsvitrin[data-yta="bild"] {
    order: 1;
    aspect-ratio: var(--media-restaurant-ratio-mobil);
    block-size: auto;
    min-block-size: 0;
  }

  html[data-huvud="skrivbord"] .ram[data-black="hem"] .handelsvitrin-yta[data-lage="staende"] .handelsvitrin[data-text="stycke"] {
    order: 2;
    aspect-ratio: auto;
    background: transparent;
    padding: 0;
    overflow: visible;
    max-block-size: none;
    justify-content: center;
    text-align: center;
  }

  html[data-huvud="skrivbord"] .ram[data-black="hem"] .handelsvitrin-yta[data-lage="staende"] .handelsvitrin[data-text="stycke"] .handelsvitrin__stycke {
    font-size: var(--typ-brod);
    line-height: var(--typ-brod-hojd);
    text-align: center;
    overflow: visible;
    max-block-size: none;
  }
}
}