/* ==========================================================================
   Veralita
   A faithful rebuild of veralita.com: the same 1140px centred column, the same
   Roboto Light typography, the same palette. Every value below was measured on
   the live site rather than invented.
   ========================================================================== */

:root {
  --bg: #f4f4f2;          /* page */
  --text: #222324;        /* body copy and headings */
  --muted: #686b69;       /* categories, inactive filters, footer icons */
  --accent: #6d0000;      /* current page, link hover */
  --dark: #2c3830;        /* submit button, active filter */
  --field: #e5e5e1;       /* form inputs */
  --field-border: #e6e6e6;
  --line: #e0e0dc;

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* One column width, one gutter, everywhere. */
  --container: 1140px;
  --gutter: 15px;

  /* One vertical rhythm. Blocks are separated by --gap; the space between a
     heading and its copy is always 20px, as on the original. */
  --gap: 60px;
  --gap-sm: 30px;

  /* One type scale. Every heading and every run of copy on the site draws on
     these; nothing sets its own size. Page titles used to be 28px/500 on the
     ordinary pages and 38px/300 on product pages — two different voices for
     the same element. They are one voice now. */
  --fs-title: 34px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 18px;
  --lh-body: 1.65;

}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Always reserve room for the scrollbar. A page shorter than the window has
     none, a longer one does, and the centred column jumps sideways by the
     scrollbar's width as you move between them. */
  scrollbar-gutter: stable;
}

/* Browsers without scrollbar-gutter get the older remedy: a track that is
   always there, even when there is nothing to scroll. */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { margin: 0 0 20px; line-height: 1.35; }
h1 { font-size: var(--fs-title); font-weight: 300; line-height: 1.25; }
h2 { font-size: var(--fs-h2); font-weight: 400; }
h3 { font-size: var(--fs-h3); font-weight: 500; }

p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 20px; padding-left: 20px; }
li { margin-bottom: 6px; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The single spacing primitive. Every block on every page uses it, which is
   what keeps the pages consistent with one another. */
.block { padding-block: var(--gap); }
.block--tight { padding-block: var(--gap-sm); }
.block--flush-top { padding-top: 0; }

.prose, .product__body {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
}
.prose p, .product__body p { margin-bottom: 20px; }
.prose h2, .prose h3,
.product__body h2, .product__body h3 { margin-top: 40px; margin-bottom: 16px; }
.prose ul, .product__body ul { margin-bottom: 20px; }
.prose__label { margin-bottom: 8px; }
.prose > :first-child, .product__body > :first-child { margin-top: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 100;
  padding: 10px 18px;
  background: var(--text);
  color: var(--bg);
}
.skip-link:focus { top: 10px; color: var(--bg); }

.page-title, .product__title { margin-bottom: 24px; }
.page-title--center { text-align: center; }

/* ==========================================================================
   Header — static, 149px tall, logo left and menu right
   ========================================================================== */
.header { background: var(--bg); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 149px;
}

.logo { flex: none; line-height: 0; }
.logo img { width: 206px; height: auto; }

.menu {
  display: flex;
  align-items: center;
  gap: 44px;
  margin: 0; padding: 0;
  list-style: none;
}
.menu li { margin: 0; }

.menu a {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.menu a.is-current { color: var(--accent); }

.menu-toggle {
  display: none;
  padding: 8px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 26px; height: 2px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s linear;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before { content: ""; position: absolute; top: -8px; }
.menu-toggle__bars::after { content: ""; position: absolute; top: 8px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  /* Padding alone, no min-height. With a fixed height the closed header
     centres the logo inside 90px; once the menu opens the header grows, the
     fixed height stops applying and the logo jumps up by the difference.
     26px top and bottom keeps the closed header at the same 90px it had. */
  .header__inner { min-height: 0; padding-block: 26px; }
  .logo img { width: 160px; }
  .menu-toggle { display: block; }

  .nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .nav.is-open { display: block; }
  .menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 20px;
  }
  .menu li { width: 100%; border-top: 1px solid var(--line); }
  .menu a { display: block; padding: 14px 0; font-size: 20px; }
  .header__inner { flex-wrap: wrap; }
}

/* ==========================================================================
   Slider — sits inside the container, 16:9, one photograph at a time
   ========================================================================== */
.slider { position: relative; }

.slider__viewport {
  position: relative;
  aspect-ratio: 1140 / 636;
  overflow: hidden;
  background: #cfcfca;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* 900ms fade — the speed the original slider is configured with. */
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.slide.is-active { opacity: 1; pointer-events: auto; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

/* The caption is an overlay across the whole photograph, hidden until the
   slide is hovered — the behaviour the original slider has. Colours and
   offsets are the original's: #2F3130 at 69%, white at 80%. */
.slide__overlay {
  position: absolute;
  inset: 0;
  background: rgba(47, 49, 48, 0.69);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slide:hover .slide__overlay,
.slide__overlay:focus-within { opacity: 1; }

.slide__title {
  position: absolute;
  left: 0; right: 0; top: 50%;
  margin: 0;
  transform: translateY(-50%);
  padding-inline: 20px;
  font-size: var(--fs-title);
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.slide__view {
  position: absolute;
  right: 30px; bottom: 20px;
  padding: 2px 8px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.2s ease, color 0.2s ease;
}
.slide__view:hover,
.slide__view:focus-visible { background: #151515; color: #fff; }

/* A touch screen has no hover, so the caption and the link inside it have to
   be visible from the start. Showing the hover state permanently is the wrong
   way round: the 69% wash then sits over the photograph the whole time and the
   slider stops being a slider. Instead the caption drops to a strip along the
   bottom over a short gradient — readable, reachable, and the photograph stays
   a photograph. */
@media (hover: none) {
  .slide__overlay {
    opacity: 1;
    background: linear-gradient(to top,
                rgba(24, 26, 25, 0.62) 0%,
                rgba(24, 26, 25, 0.34) 38%,
                rgba(24, 26, 25, 0) 72%);
  }

  .slide__title {
    top: auto;
    bottom: 16px;
    right: auto;
    transform: none;
    padding-inline: 20px;
    font-size: 20px;
    text-align: left;
    color: #fff;
  }

  .slide__view {
    right: 20px;
    bottom: 18px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
  }
}

/* Narrow screens: the arrows and the caption would otherwise crowd each other. */
@media (hover: none) and (max-width: 520px) {
  .slide__title { bottom: 14px; font-size: 17px; padding-inline: 14px; }
  .slide__view { right: 14px; bottom: 15px; font-size: 14px; }
}

.slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.slider__arrow:hover { background: rgba(255, 255, 255, 0.85); }
.slider__arrow--prev { left: 0; }
.slider__arrow--next { right: 0; }

@media (max-width: 600px) {
  :root { --fs-title: 26px; --fs-h2: 20px; }

  /* The title already follows --fs-title, which this breakpoint changes, so
     repeating it here only overrode the touch caption further up. */
  .slide__view { right: 14px; bottom: 12px; }
}

/* ==========================================================================
   Map
   ========================================================================== */
.map {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f4f4f2;
}
.map img { width: 100%; height: auto; display: block; }
.map__still { display: block; position: relative; }

/* Once Leaflet is in the box it needs a height of its own — the picture that
   gave the box its height has gone. */
.map--live { height: 400px; }

/* Enough colour taken out that the map stops competing with the page, but no
   more. Greyscaling it and flattening the contrast, which is what this did at
   first, left roads, towns and labels indistinguishable — a map has to be
   readable before it has to match anything. */
.map--live .leaflet-tile-pane {
  filter: saturate(0.35);
}
.map--live .leaflet-control-zoom a {
  width: 34px; height: 34px; line-height: 34px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-weight: 300;
}
.map--live .leaflet-control-zoom a:hover { background: var(--dark); color: #fff; }
.map--live .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 300;
}
.map--live .leaflet-container { font-family: var(--font); background: #f4f4f2; }

.map__link { margin: 10px 0 0; font-size: 15px; font-weight: 300; }
.map__link a { border-bottom: 1px solid currentColor; }
.map__open {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  transition: background 0.2s ease, color 0.2s ease;
}
.map:hover .map__open { background: var(--dark); color: #fff; }
.map__credit {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
}
.map__credit a { border-bottom: 1px solid transparent; }
.map__credit a:hover { border-bottom-color: currentColor; }

/* ==========================================================================
   Portfolio grid — image, then name and category beneath it
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 0;
  margin: 0 0 var(--gap-sm);
  padding: 0;
  list-style: none;
  font-size: 18px;
}
.filters li { display: flex; align-items: center; margin: 0; }
.filters li + li::before {
  content: "/";
  margin: 0 12px;
  color: var(--line);
}

.filter {
  padding: 0;
  border: 0;
  background: none;
  font-size: 18px;
  font-weight: 300;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease;
}
.filter:hover { color: var(--text); }
.filter[aria-pressed="true"] { font-weight: 500; color: var(--dark); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-sm);
  margin: 0; padding: 0;
  list-style: none;
}
.grid > li { margin: 0; }
.grid > li[hidden] { display: none; }

.tile { display: block; }
.tile__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
  background: #e3e3df;
}
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tile:hover .tile__media img { transform: scale(1.03); }

.tile__name {
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
}
.tile:hover .tile__name { color: var(--accent); }
.tile__cat {
  display: block;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 860px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Product page — 8/4 split, copy left, gallery right
   ========================================================================== */
.product {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gap-sm);
  align-items: start;
}

  margin-bottom: 2px;
  font-size: 38px;
  font-weight: 300;
  line-height: 44px;
}

/* The body is the original WordPress markup: paragraphs with bold labels and
   plain lists. It is styled here rather than restructured. */

.product__body ul { margin: 0 0 20px; padding-left: 20px; }
.product__body li { margin-bottom: 4px; }
.product__body strong { font-weight: 700; }

/* The original leaves 80px of space above the gallery; kept. */
/* Wooden products are not on sale yet; the status line says so before the
   description does, so nobody reads the page as an offer. */
.product__status {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 12px;
  border: 1px solid currentColor;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.product__gallery { margin: 0; padding: 80px 0 0; list-style: none; }
.product__gallery li { margin: 0 0 30px; }
.product__gallery li:last-child { margin-bottom: 0; }

.product__gallery button {
  display: block;
  width: 100%;
  /* The same 4/3 as the product grid, so a column of photographs lines up
     instead of stepping in and out. The source photographs run from 0.95 to
     1.79, which is what made this the most ragged part of the page. */
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: #e3e3df;
  cursor: pointer;
  overflow: hidden;
}
.product__gallery img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.product__gallery button:hover img { opacity: 0.85; }

@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; }
  .product__gallery { padding-top: var(--gap-sm); }
}

/* Lightbox */
.lightbox {
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  padding: 30px;
  border: 0;
  background: rgba(20, 20, 20, 0.92);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(20, 20, 20, 0.92); }
.lightbox img { max-width: 100%; max-height: 88vh; width: auto; }
.lightbox__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.3); }

/* ==========================================================================
   Contact form
   ========================================================================== */
.form { max-width: 100%; }
.form__row { margin-bottom: 22px; }
.form__row:last-child { margin-bottom: 0; }

.form label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 300;
}

.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--field-border);
  border-radius: 0;
  background: var(--field);
  font-size: 15px;
  font-weight: 300;
  /* Without this the inputs inherit the 27px body line-height and stand 53px
     tall instead of the 43px they are on the original. */
  line-height: 1.15;
  -webkit-appearance: none;
  appearance: none;
}
.form textarea { height: 150px; resize: vertical; line-height: 24px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--dark); outline-offset: -2px; }

.form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  font-weight: 300;
}
.form__consent input { margin-top: 5px; width: 15px; height: 15px; flex: none; }

.btn-submit {
  padding: 14px 28px;
  border: 0;
  background: var(--dark);
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.btn-submit:hover { opacity: 0.88; }
.btn-submit:disabled { opacity: 0.5; cursor: wait; }

/* Honeypot — off-screen for people, reachable by naive bots. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-bottom: 22px;
  padding: 12px 15px;
  border: 1px solid var(--field-border);
  background: var(--field);
  font-size: 15px;
}
.form-status[data-state="ok"] { border-color: var(--dark); }
.form-status[data-state="error"] { border-color: var(--accent); color: var(--accent); }

.contact-address {
  font-style: normal;
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  text-align: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  padding: 35px 0 34px;
  background: var(--bg);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer p { margin: 0; font-size: 15px; }

.social {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0; padding: 0;
  list-style: none;
}
.social li { margin: 0; }
.social a { display: block; color: var(--muted); }
.social a:hover { color: var(--accent); }
.social svg { height: 16px; width: auto; fill: currentColor; display: block; }

@media (max-width: 520px) {
  .footer__inner { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Language switcher
   ========================================================================== */
.menu__lang { position: relative; }

.langs summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.5px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after {
  content: "";
  width: 6px; height: 6px;
  margin-left: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.langs[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.langs summary:hover { color: var(--accent); }

.langs__list {
  position: absolute;
  right: 0; top: calc(100% + 10px);
  z-index: 60;
  min-width: 190px;
  margin: 0; padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--field-border);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.4);
}
.langs__list li { margin: 0; }
.langs__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 300;
}
.langs__list a:hover { background: var(--bg); }
.langs__list a.is-current { color: var(--accent); }

@media (max-width: 860px) {
  .menu__lang { width: 100%; border-top: 1px solid var(--line); }
  .langs summary { padding: 14px 0; font-size: 20px; }
  .langs__list {
    position: static;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0 0 12px 12px;
  }
  .langs__list a { padding: 8px 0; }
}

/* ==========================================================================
   Language hint — suggests, never redirects
   ========================================================================== */
.lang-hint {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 300;
}
.lang-hint[hidden] { display: none; }
.lang-hint__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding-block: 12px;
}
.lang-hint p { margin: 0; }
.lang-hint__actions { display: flex; align-items: center; gap: 20px; }
.lang-hint__go {
  padding: 5px 14px;
  background: var(--dark);
  color: #fff;
  font-weight: 400;
  transition: background 0.2s ease;
}
.lang-hint__go:hover { background: var(--text); color: #fff; }
.lang-hint__no {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
}
.lang-hint__no:hover { color: var(--text); border-bottom-color: currentColor; }
.lang-hint__no:hover { color: var(--text); }