/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* The language switch sits inside each page's header, as a flex item beside
   whatever control ends it. On a phone the three of them together — the
   wordmark, the switch and MENU — want more room than a 375px screen has,
   and flex answers that by squeezing the wordmark until "VirJual.shop" runs
   out of its own box and under the switch. The switch is the one of the
   three that can afford to be smaller. */
@media (max-width: 700px) {
  [data-langswitch] { margin-right: 10px; }
  [data-langswitch] a { padding: 5px 7px !important; font-size: 10px !important; }
  /* And the wordmark keeps its own width rather than being squeezed until
     ".shop" is drawn outside its box and under the switch. What gives way
     instead is the button at the other end, which is mostly padding. */
  header > a:first-child,
  header > div > a:first-child { flex-shrink: 0; }
}


/* The hero's sentence carries its own break, after "spaces,". What follows
   is 85 characters in English and 86 in German, so on anything narrower than
   a very wide window it wrapped again and left "for you." / "für Sie."
   stranded on a third line. It is held to one line above 860px — the width
   at which the design itself stops using its break — and below that it
   wraps freely, as it should on a narrow screen. The two numbers have to
   agree: hold the line without the break and the sentence runs off the
   side of the page. */
@media (min-width: 861px) {
  [data-hero] p { white-space: nowrap; }
}


/* The saved-rooms link in the header. Hidden by default and shown only where
   there is room for it: the wordmark, the language switch and MENU already
   fill a 375px header, and the menu carries it on a phone. */
@media (min-width: 760px) {
  [data-savedlink] { display: inline-flex !important; }
  /* Two auto margins would split the free space between them; only the
     first item of the pair should push. */
  [data-savedlink] + [data-langswitch] { margin-left: 0; }
}

/* ---------------------------------------------------------------- phones --
   Four things the design could not have known about, because they are not
   properties of a layout — they are properties of a phone.

   1. 100vh on iOS Safari means the window with the address bar hidden,
      which is a hundred-odd pixels taller than what you can actually see.
      The viewer is exactly 100vh, so the bottom of its dock — the arrows,
      Fit to my plan — sat underneath the browser's own chrome. 100dvh is
      the height that is really there; the line before it is the fallback
      for anything that does not know the unit.

   2. A fixed, full-screen overlay does not scroll unless it is told to.
      The menu is 882px of links in an 812px window, so the last two were
      unreachable: no scroll, no way down, nothing to indicate anything was
      missing.

   3. A notch at the top and a home indicator at the bottom sit *over* the
      page. Anything anchored to an edge has to keep clear of them.

   4. The cookie notice was above everything at z-index 200, including the
      menu, so opening the menu on a first visit gave you both at once. */

[data-viewerroot] { height: 100vh; height: 100dvh; }

[data-menu] {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top);
  padding-bottom: max(env(safe-area-inset-bottom), 20px);
}

/* The overlay is the whole screen, so its own edges are the page's edges. */
[data-menu] > * { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

@media (max-width: 560px) {
  /* The dock sits on the bottom edge on a phone, which is where the home
     indicator is. */
  [data-dock] { padding-bottom: max(env(safe-area-inset-bottom), 16px) !important; }
  .cookie-banner { bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------- the viewer on a phone --
   The design hides the category picker below 820px, because six words do not
   fit across a phone, and nothing takes its place — so inside the viewer on
   a phone there was no way at all to reach another category. You could step
   through 44 kitchens with the arrows and that was the whole of it.

   The same six buttons come back as one line that scrolls sideways under the
   header: about forty pixels of height, which is what a phone can afford,
   and the gesture people already use for a row of chips. */
@media (max-width: 820px) {
  [data-catrail][data-catnav] {
    display: flex !important;
    position: absolute; left: 0; right: 0; top: 52px; z-index: 31;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 8px max(12px, env(safe-area-inset-left)) 10px;
  }
  [data-catrail][data-catnav]::-webkit-scrollbar { display: none; }
  [data-catrail][data-catnav] > button {
    flex: 0 0 auto;
    padding: 8px 13px !important;
    font-size: 11px !important;
    border: 2px solid rgba(243,242,242,0.28) !important;
    margin-right: 7px;
    background: rgba(32,30,29,0.55) !important;
    border-radius: 0;
  }
  /* The one you are on is filled rather than merely brighter, because over a
     photograph a change of opacity alone does not read. */
  [data-catrail][data-catnav] > button[data-here="1"] {
    background: rgba(243,242,242,0.92) !important;
    color: #201e1d !important;
    border-color: rgba(243,242,242,0.92) !important;
  }
}

/* The deck is `position: fixed; inset: 0; overflow: hidden`, which on a phone
   means 842px of slide inside an 812px window and no way to see the rest. */
@media (max-width: 820px) {
  [data-deckroot] { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ----------------------------------------------- which dock a screen gets --
   The design's dock is a column down the right-hand side. That is right
   standing up and wrong lying across the bottom of a phone, so a phone gets
   one built for it instead. Only ever one of the two is on screen.

   Everything a phone pins to the bottom is `fixed`, not `absolute`. The
   viewer's box is 100dvh, and on an iPhone whose Safari predates that unit
   it falls back to 100vh — which counts the strip behind the address bar,
   so an absolutely positioned dock sat below the glass and was simply not
   there. A fixed element is measured against what you can actually see, on
   every phone, whatever it knows about units. */
@media (max-width: 560px) {
  [data-dock] { display: none !important; }

  /* The categories sit along the bottom edge, as plain words rather than a
     row of dark boxes, and the panel sits directly above them. */
  [data-catrail][data-catnav] {
    position: fixed !important;
    left: 0; right: 0; top: auto !important; bottom: 0;
    z-index: 28;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: rgba(32,30,29,0.94);
    padding: 11px max(12px, env(safe-area-inset-left))
             calc(11px + env(safe-area-inset-bottom));
  }
  [data-catrail][data-catnav]::-webkit-scrollbar { display: none; }
  [data-catrail][data-catnav] > button {
    flex: 0 0 auto;
    background: transparent !important;
    border: 0 !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    opacity: 0.62;
  }
  [data-catrail][data-catnav] > button[data-here="1"] {
    opacity: 1;
    /* Beating the filled chip the wider-screen rule draws: down here the
       words are the navigation, and a box round one of them is clutter. */
    background: transparent !important;
    color: #f3f2f2 !important;
    border-color: transparent !important;
    font-weight: 700 !important;
    box-shadow: inset 0 -2px 0 currentColor;
  }

  [data-phonedock] {
    display: block !important;
    position: fixed !important;
    bottom: 0;
    /* The rail is the last 40-odd pixels of the screen and overlays this
       padding; the panel's own content stops above it. Expressed as room
       left for the rail rather than as a distance from the bottom, so the
       two cannot drift apart. */
    padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;
  }

  /* Next and previous belong on the picture, not tucked into a row of
     buttons. Halfway down each edge is where a thumb already rests. */
  [data-edgearrow] { display: flex !important; position: fixed !important; }

  /* In here the language switch is one control too many on a 375px header,
     and the wordmark only has to be a mark. */
  [data-viewerroot] [data-langswitch] { display: none !important; }
  [data-viewerroot] header > div > a:first-child,
  [data-viewerroot] header > a:first-child { font-size: 14px !important; }
  [data-viewerroot] header { padding-top: max(10px, env(safe-area-inset-top)) !important; }
}

/* ------------------------------------------- "Enter 360° showrooms" ------
   The design's own behaviour, kept: it fades up on hover and its rule draws
   in under it. Only the size is changed — it was small enough to read as a
   caption rather than as the way in. */
[data-tile] [data-enter] {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
}
[data-tile] [data-entermark] { font-size: 17px !important; }

/* ------------------------------------------------- saving a room --------
   Saved is red and filled. An outline that becomes a slightly different
   outline is not an answer to "did that work?" — the heart fills and changes
   colour, which is the one signal on a phone everybody already reads.

   (These went missing when the phone rules above were rewritten; the icons
   are drawn only where the words are not.) */
[data-favicon], [data-shareicon] { display: none; }
[data-phonedock] [data-favicon],
[data-phonedock] [data-shareicon] { display: block; }

[data-favicon] {
  transition: fill 220ms ease, stroke 220ms ease,
              transform 240ms cubic-bezier(.22,.61,.36,1);
}
[data-favbtn][aria-pressed="true"] [data-favicon] {
  fill: #E4443B;
  stroke: #E4443B;
  transform: scale(1.08);
}
[data-phonedock] [data-favbtn][aria-pressed="true"] {
  border-color: rgba(228,68,59,0.8) !important;
  background: rgba(228,68,59,0.18) !important;
}