/** WARES HUB **/

:root {
  --top-link-w: clamp(72px, calc(209.6 / 1920 * 100vw), 209.6px);
  --top-links-gap: clamp(12px, calc(34 / 1920 * 100vw), 34px);
  --top-links-shift-y: clamp(-83px, calc(var(--content-pad) * -0.8), -10px);

  /* Keep the outer tile corners on 45-degree lines from the page corners. */
  --wares-grid-span: calc(var(--frame-w) + var(--frame-w) + var(--frame-gap));
  --wares-diagonal-clearance: max(0px, calc((100vw - var(--wares-grid-span)) / 2));
  --wares-nav-ratio: calc(232 / 524);
  --wares-nav-h: calc(var(--top-link-w) * var(--wares-nav-ratio));
  --wares-mobile-nav-label-gap: 45px;
  --wares-grid-top-gap: max(
    0px,
    calc(var(--wares-diagonal-clearance) - var(--content-pad) - var(--wares-nav-h))
  );
  --wares-footer-space: clamp(
    63px,
    calc(69 / 1920 * 100vw),
    calc(69px * var(--wide-scale))
  );
  --page-bottom-clearance: max(
    0px,
    calc(var(--wares-diagonal-clearance) - var(--content-pad) - var(--wares-footer-space))
  );

  --top-left: url("/static/site_imgs/rau.png");
  --top-left: image-set(url("/static/site_imgs/generated/rau-320.png") type("image/png"), url("/static/site_imgs/rau.png") type("image/png"));
  --top-right: url("/static/site_imgs/can.png");
  --top-right: image-set(url("/static/site_imgs/generated/can-320.png") type("image/png"), url("/static/site_imgs/can.png") type("image/png"));
}

@media (min-width: 1920px) {
  :root {
    --top-link-w: clamp(209.6px, calc(209.6 / 1920 * 100vw), calc(209.6px * var(--wide-scale)));
    --top-links-gap: clamp(34px, calc(34 / 1920 * 100vw), calc(34px * var(--wide-scale)));
    --top-links-shift-y: clamp(calc(-83px * var(--wide-scale)), calc(-83 / 1920 * 100vw), -83px);
  }
}

.top-links,
.wares-page {
  position: relative;
  z-index: 12;
}

.wares-page {
  margin-top: var(--wares-grid-top-gap);
}

.wares-page .frame--left {
  background-image: url("/static/site_imgs/l_box_rau.webp");
  background-image: image-set(
    url("/static/site_imgs/generated/l_box_rau-1000.webp") type("image/webp"),
    url("/static/site_imgs/l_box_rau.webp") type("image/webp")
  );
}

.top-links {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--top-links-gap);
  margin: 0;
  transform: translateY(var(--top-links-shift-y));
}

.top-links__home,
.top-links__archive {
  display: inline-block;
  width: var(--top-link-w);
  flex: 0 0 var(--top-link-w);
  line-height: 0;
  text-decoration: none;
  filter: var(--button-shadow);
  transition: filter 160ms ease;
}

.top-links__home img,
.top-links__archive img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.top-links__home:hover,
.top-links__archive:hover {
  filter:
    drop-shadow(0 0 10px var(--hover-glow))
    drop-shadow(0 0 22px var(--hover-glow));
}

@media (max-width: 500px) {
  :root {
    --top-links-shift-y: 34px;
  }

  .top-links {
    margin-bottom: calc(
      34px + var(--wares-mobile-nav-label-gap) - var(--wares-grid-top-gap)
    );
  }
}

@media (max-width: 600px) {
  .wares-page .frame--left {
    background-image: url("/static/site_imgs/generated/l_box_rau-320.webp");
    background-image: image-set(
      url("/static/site_imgs/generated/l_box_rau-320.webp") 2x,
      url("/static/site_imgs/generated/l_box_rau-640.webp") 4x,
      url("/static/site_imgs/generated/l_box_rau-1000.webp") 6.2x,
      url("/static/site_imgs/l_box_rau.webp") 6.4x
    );
  }
}