/*
 * Lydore components.
 * Built mobile-first: the base rules are the phone layout, and media
 * queries only ever add. No inline styles anywhere, per R4.
 * Every colour, size and space comes from tokens.css.
 */

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

body {
  margin: 0;
  background: var(--lyd-bg);
  color: var(--lyd-text);
  font-family: var(--lyd-font-body);
  font-size: var(--lyd-step-0);
  line-height: var(--lyd-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .lyd-display {
  font-family: var(--lyd-font-display);
  font-weight: 400;
  line-height: var(--lyd-leading-tight);
  margin: 0;
}

p { margin: 0 0 var(--lyd-space-m); max-width: var(--lyd-measure); }
img { max-width: 100%; height: auto; display: block; }

/* Keyboard users must always be able to see where they are. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--lyd-accent-text);
  outline-offset: 3px;
}

/* ---------- layout ---------- */
.lyd-container {
  width: 100%;
  max-width: var(--lyd-container);
  margin-inline: auto;
  padding-inline: var(--lyd-gutter);
}
.lyd-section { padding-block: var(--lyd-space-section); }
.lyd-section--alt { background: var(--lyd-bg-alt); }
.lyd-section--dark { background: var(--lyd-bg-dark); color: var(--lyd-text-on-dark); }
.lyd-section--dark .lyd-eyebrow { color: var(--lyd-accent); }

/* ---------- small shared pieces ---------- */
.lyd-eyebrow {
  font-size: var(--lyd-step--1);
  letter-spacing: var(--lyd-tracking-wide);
  text-transform: uppercase;
  color: var(--lyd-accent-text);
  margin: 0 0 var(--lyd-space-s);
}
.lyd-rule {
  width: 56px; height: 1px; border: 0;
  background: var(--lyd-accent);
  margin: var(--lyd-space-m) 0;
}
.lyd-lede { font-size: var(--lyd-step-1); color: var(--lyd-text-muted); }

/* ---------- buttons ---------- */
.lyd-btn {
  display: inline-block;
  font-family: var(--lyd-font-body);
  font-size: var(--lyd-step--1);
  letter-spacing: var(--lyd-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.25rem;
  border: 1px solid var(--lyd-button-bg);
  border-radius: var(--lyd-radius);
  background: var(--lyd-button-bg);
  color: var(--lyd-button-text);
  cursor: pointer;
  transition: background var(--lyd-transition), color var(--lyd-transition);
  min-height: 48px; /* touch target */
}
.lyd-btn:hover { background: transparent; color: var(--lyd-button-bg); }
.lyd-btn--ghost { background: transparent; color: var(--lyd-text); }
.lyd-btn--ghost:hover { background: var(--lyd-button-bg); color: var(--lyd-button-text); }
.lyd-btn--on-dark { background: var(--lyd-ivory); color: var(--lyd-ink); border-color: var(--lyd-ivory); }
.lyd-btn--on-dark:hover { background: transparent; color: var(--lyd-ivory); }

/* ---------- header and navigation ---------- */
.lyd-announce {
  background: var(--lyd-ink);
  color: var(--lyd-ivory);
  text-align: center;
  font-size: var(--lyd-step--1);
  letter-spacing: 0.08em;
  padding: var(--lyd-space-xs) var(--lyd-space-m);
}
.lyd-header { border-bottom: var(--lyd-border); background: var(--lyd-bg); }
.lyd-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lyd-space-m);
  padding-block: var(--lyd-space-m);
}
/* The real artwork, used as supplied. The logo file is a stacked lockup,
   emblem above wordmark, which is too tall for a header, so the two elements
   are set side by side here. Neither element is redrawn or recoloured.
   The emblem carries an empty alt because the wordmark beside it already
   provides the name: announcing it twice is noise for a screen reader. */
.lyd-logo {
  display: inline-flex; align-items: center; gap: var(--lyd-space-s);
  text-decoration: none; line-height: 0;
  flex-shrink: 0;   /* never squashed: a compressed logo overlaps the nav */
}
.lyd-logo img { flex-shrink: 0; }
/* Scoped to the header so WooCommerce's own `img` rules, which set width
   to 100% on shop pages, cannot blow the logo up to full size. */
.lyd-header .lyd-logo__emblem { height: 34px; width: auto; max-width: none; }
.lyd-header .lyd-logo__word { height: 15px; width: auto; max-width: none; }
@media (min-width: 900px) {
  .lyd-header .lyd-logo__emblem { height: 42px; }
  .lyd-header .lyd-logo__word { height: 18px; }
}
.lyd-nav { display: none; }
/* Nav items never wrap: a two-word link breaking across lines makes the
   header ragged. The gap tightens on narrower desktops instead. */
.lyd-nav__list { display: flex; gap: var(--lyd-space-m); list-style: none; margin: 0; padding: 0; }
@media (min-width: 1200px) { .lyd-nav__list { gap: var(--lyd-space-l); } }
.lyd-nav__link {
  font-size: var(--lyd-step--1);
  letter-spacing: var(--lyd-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lyd-text);
  padding-block: var(--lyd-space-xs);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--lyd-transition);
}
.lyd-nav__link:hover { border-bottom-color: var(--lyd-accent); }
.lyd-utils { display: flex; gap: var(--lyd-space-m); align-items: center; flex-shrink: 0; }
.lyd-utils__item { white-space: nowrap; }
/* On a phone the header carries only the bag and the menu. Search and account
   live inside the menu panel, so nothing wraps or falls off the edge. */
.lyd-utils__item--wide { display: none; }
.lyd-utils__item { white-space: nowrap; }
.lyd-utils__item {
  background: none; border: 0; padding: var(--lyd-space-2xs);
  font: inherit; font-size: var(--lyd-step--1); color: var(--lyd-text);
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
@media (min-width: 900px) {
  .lyd-nav { display: block; }
  .lyd-menu-toggle { display: none; }
  .lyd-utils__item--wide { display: inline-block; }
}


/* Media frames crop rather than letterbox, so a photograph fills its shape
   at every screen size. Focal point sits slightly high on portraits. */
.lyd-hero__media img,
.lyd-feature__media img,
.lyd-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.lyd-hero__media, .lyd-feature__media, .lyd-card__media { overflow: hidden; }

/* ---------- hero ---------- */
.lyd-hero { position: relative; background: var(--lyd-cream); }
.lyd-hero__media {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(255,255,255,0.55), transparent 60%),
    linear-gradient(160deg, var(--lyd-blue) 0%, #5d7f9f 100%);
  display: grid; place-items: center;
}
.lyd-hero__placeholder {
  font-size: var(--lyd-step--1); letter-spacing: var(--lyd-tracking-wide);
  text-transform: uppercase; color: rgba(255,255,255,0.85); text-align: center;
  padding: var(--lyd-space-m);
}
.lyd-hero__body { padding: var(--lyd-space-xl) 0; }
.lyd-hero__title { font-size: var(--lyd-step-4); }
.lyd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--lyd-space-s); margin-top: var(--lyd-space-l); }
@media (min-width: 900px) {
  .lyd-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--lyd-space-2xl); }
  .lyd-hero__media { aspect-ratio: 3 / 4; }
}

/* Left-aligned variant of a section title, for sections that are not centred. */
.lyd-title--left { text-align: left; }

/* Visible to screen readers, not on screen. Used for labels that the design
   expresses through a placeholder. */
.lyd-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- editorial intro ---------- */
.lyd-intro { text-align: center; }
.lyd-intro__title { font-size: var(--lyd-step-3); }
.lyd-intro p { margin-inline: auto; }
.lyd-intro .lyd-rule { margin-inline: auto; }

/* ---------- feature block (the Box, the Watch Set) ---------- */
.lyd-feature__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, var(--lyd-stone), var(--lyd-cream));
  display: grid; place-items: center;
  border: 1px solid rgba(0,0,0,0.05);
}
.lyd-feature__body { padding-top: var(--lyd-space-l); }
.lyd-feature__title { font-size: var(--lyd-step-3); }
@media (min-width: 900px) {
  .lyd-feature { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--lyd-space-2xl); align-items: center; }
  .lyd-feature--reverse .lyd-feature__media { order: 2; }
  .lyd-feature__body { padding-top: 0; }
  .lyd-feature__media { aspect-ratio: 5 / 4; }
}

/* ---------- product grid and cards ---------- */
.lyd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lyd-space-m);
}
@media (min-width: 900px) {
  .lyd-grid { grid-template-columns: repeat(4, 1fr); gap: var(--lyd-space-l); }
}
.lyd-card { display: flex; flex-direction: column; }
.lyd-card__media {
  aspect-ratio: 1 / 1;
  background: var(--lyd-white);
  border: 1px solid rgba(0,0,0,0.04);
  display: grid; place-items: center;
  overflow: hidden;
}
.lyd-card__media img { transition: transform var(--lyd-transition); }
.lyd-card:hover .lyd-card__media img { transform: scale(1.03); }
.lyd-card__name {
  font-family: var(--lyd-font-display);
  font-size: var(--lyd-step-1);
  margin: var(--lyd-space-s) 0 var(--lyd-space-2xs);
}
.lyd-card__meta { font-size: var(--lyd-step--1); color: var(--lyd-text-muted); margin: 0 0 var(--lyd-space-2xs); }
.lyd-card__price { font-size: var(--lyd-step-0); margin: 0; }
.lyd-card__link { text-decoration: none; color: inherit; }

/* ---------- category tiles ---------- */
.lyd-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lyd-space-m); }
@media (min-width: 900px) { .lyd-tiles { grid-template-columns: repeat(3, 1fr); } }
/* A category tile is a photograph with its name over the lower edge. The
   gradient exists only so white type stays readable whatever the picture
   does underneath it. */
.lyd-tile {
  position: relative; aspect-ratio: 3 / 4;
  display: grid; place-items: end start;
  padding: var(--lyd-space-m); text-decoration: none; overflow: hidden;
  background: var(--lyd-stone);
}
.lyd-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--lyd-transition);
}
.lyd-tile:hover img { transform: scale(1.04); }
.lyd-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,26,24,0) 45%, rgba(28,26,24,0.78));
}
.lyd-tile__label {
  position: relative; z-index: 1;   /* above the gradient */
  color: var(--lyd-white);
  font-family: var(--lyd-font-display);
  font-size: var(--lyd-step-1);
}

/* ---------- gifting band ---------- */
.lyd-gift__links { display: flex; flex-wrap: wrap; gap: var(--lyd-space-s) var(--lyd-space-l); list-style: none; padding: 0; margin: var(--lyd-space-l) 0 0; }
.lyd-gift__links a {
  color: inherit; text-decoration: none;
  font-size: var(--lyd-step--1); letter-spacing: var(--lyd-tracking-wide); text-transform: uppercase;
  border-bottom: 1px solid var(--lyd-accent); padding-bottom: 2px;
}

/* ---------- footer ---------- */
.lyd-footer { background: var(--lyd-bg-dark); color: var(--lyd-text-on-dark); padding-block: var(--lyd-space-xl); }
.lyd-footer a { color: var(--lyd-text-on-dark); text-decoration: none; font-size: var(--lyd-step--1); }
.lyd-footer a:hover { color: var(--lyd-accent); }
.lyd-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lyd-space-l); }
@media (min-width: 900px) { .lyd-footer__cols { grid-template-columns: repeat(4, 1fr) 1.2fr; } }
.lyd-footer__heading {
  font-size: var(--lyd-step--1); letter-spacing: var(--lyd-tracking-wide);
  text-transform: uppercase; color: var(--lyd-accent); margin: 0 0 var(--lyd-space-s);
}
.lyd-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lyd-space-xs); }
.lyd-signup { display: flex; gap: var(--lyd-space-xs); margin-top: var(--lyd-space-s); flex-wrap: wrap; }
.lyd-signup input {
  flex: 1 1 12rem; min-height: 48px; padding: 0 var(--lyd-space-s);
  background: transparent; border: 1px solid rgba(247,244,238,0.35);
  color: var(--lyd-text-on-dark); font: inherit; font-size: var(--lyd-step--1);
}
.lyd-footer__note { font-size: var(--lyd-step--1); }
.lyd-footer__base {
  margin-top: var(--lyd-space-xl); padding-top: var(--lyd-space-m);
  border-top: 1px solid rgba(247,244,238,0.18);
  font-size: var(--lyd-step--1); color: rgba(247,244,238,0.7);
}

/* ---------- product page ---------- */
/* Gallery left, purchase right on desktop. On a phone the gallery leads and
   the purchase panel follows, because the photograph is what sells a gift. */
.lyd-product { display: grid; gap: var(--lyd-space-l); }
@media (min-width: 900px) {
  .lyd-product { grid-template-columns: 1.15fr 0.85fr; gap: var(--lyd-space-2xl); align-items: start; }
  .lyd-product__buy { position: sticky; top: var(--lyd-space-m); }
}
.lyd-gallery { display: grid; gap: var(--lyd-space-s); }
.lyd-gallery__main {
  aspect-ratio: 4 / 5; background: var(--lyd-white);
  border: 1px solid rgba(0,0,0,0.05); overflow: hidden;
}
.lyd-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.lyd-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lyd-space-xs); }
@media (min-width: 900px) { .lyd-gallery__thumbs { grid-template-columns: repeat(5, 1fr); } }
.lyd-gallery__thumb {
  aspect-ratio: 1 / 1; background: var(--lyd-white);
  border: 1px solid rgba(0,0,0,0.06); padding: 0; cursor: pointer; overflow: hidden;
}
.lyd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lyd-gallery__thumb[aria-current="true"] { border-color: var(--lyd-accent-text); }

.lyd-product__title { font-size: var(--lyd-step-3); margin-bottom: var(--lyd-space-xs); }
.lyd-product__short { color: var(--lyd-text-muted); }
/* Price is deliberately absent until one is supplied. The element is left in
   the markup, empty and hidden, so adding a price is a data change rather
   than a template change. */
.lyd-product__price:empty { display: none; }
.lyd-product__price { font-size: var(--lyd-step-1); margin: var(--lyd-space-s) 0; }
.lyd-product__ship {
  font-size: var(--lyd-step--1); color: var(--lyd-text-muted);
  margin: calc(var(--lyd-space-s) * -1) 0 var(--lyd-space-s);
}
.lyd-product__pending {
  font-size: var(--lyd-step--1); letter-spacing: var(--lyd-tracking-wide);
  text-transform: uppercase; color: var(--lyd-text-muted);
  border: 1px dashed var(--lyd-rule); padding: var(--lyd-space-s); margin: var(--lyd-space-s) 0;
}
.lyd-product__actions { margin: var(--lyd-space-m) 0; }
.lyd-product__actions .lyd-btn { width: 100%; text-align: center; }

/* Inside your box: a visual breakdown, never a paragraph. */
.lyd-contents { margin-top: var(--lyd-space-l); }
.lyd-contents__list {
  list-style: none; margin: var(--lyd-space-m) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lyd-space-s) var(--lyd-space-m);
}
@media (min-width: 900px) { .lyd-contents__list { grid-template-columns: repeat(3, 1fr); } }
.lyd-contents__item {
  font-size: var(--lyd-step-0);
  padding-left: var(--lyd-space-m); position: relative;
}
.lyd-contents__item::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 10px; height: 1px; background: var(--lyd-accent);
}

/* Collapsible detail sections. A section with nothing confirmed in it is
   simply not rendered, rather than shown with a placeholder. */
.lyd-details { margin-top: var(--lyd-space-l); border-top: var(--lyd-border); }
.lyd-details details { border-bottom: var(--lyd-border); }
.lyd-details summary {
  cursor: pointer; padding: var(--lyd-space-m) 0; list-style: none;
  font-size: var(--lyd-step--1); letter-spacing: var(--lyd-tracking-wide);
  text-transform: uppercase; display: flex; justify-content: space-between; align-items: center;
}
.lyd-details summary::-webkit-details-marker { display: none; }
.lyd-details summary::after { content: "+"; color: var(--lyd-accent-text); font-size: var(--lyd-step-1); }
.lyd-details details[open] summary::after { content: "\2212"; }
.lyd-details__body { padding-bottom: var(--lyd-space-m); }

/* ---------- editions strip, for the collection and the homepage ---------- */
.lyd-editions { display: grid; gap: var(--lyd-space-l); }
@media (min-width: 900px) { .lyd-editions { grid-template-columns: repeat(3, 1fr); } }
/* An overhead flat lay has to be seen WHOLE: cropping it to a tile shape
   throws away most of the collection, which is the thing being sold. So the
   edition tiles contain rather than cover, on a neutral ground. */
.lyd-edition__media {
  aspect-ratio: 3 / 4; background: var(--lyd-white);
  border: 1px solid rgba(0,0,0,0.05); overflow: hidden;
  display: grid; place-items: center; padding: var(--lyd-space-xs);
}
.lyd-edition__media img { width: 100%; height: 100%; object-fit: contain; }
.lyd-edition__name { font-family: var(--lyd-font-display); font-size: var(--lyd-step-2); margin: var(--lyd-space-s) 0 var(--lyd-space-2xs); }
.lyd-edition__note { color: var(--lyd-text-muted); font-size: var(--lyd-step-0); margin-bottom: var(--lyd-space-s); }
.lyd-edition a.lyd-card__link:hover .lyd-edition__name { color: var(--lyd-accent-text); }

/* ---------- mobile menu panel ---------- */
/* Slides in from the right, over a dimmed page. Hidden from assistive tech
   and from tab order while closed, because a link nobody can see should not
   be reachable by keyboard either. */
.lyd-overlay {
  position: fixed; inset: 0; background: rgba(28,26,24,0.45);
  opacity: 0; visibility: hidden; transition: opacity var(--lyd-transition), visibility var(--lyd-transition);
  z-index: 40;
}
.lyd-overlay[data-open="true"] { opacity: 1; visibility: visible; }

.lyd-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: var(--lyd-bg);
  border-left: var(--lyd-border);
  transform: translateX(100%);
  transition: transform var(--lyd-transition);
  z-index: 50;
  display: flex; flex-direction: column;
  padding: var(--lyd-space-m) var(--lyd-gutter) var(--lyd-space-xl);
  overflow-y: auto;
}
.lyd-panel[data-open="true"] { transform: translateX(0); }
.lyd-panel__head { display: flex; justify-content: flex-end; margin-bottom: var(--lyd-space-l); }
.lyd-panel__close {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: var(--lyd-step--1); letter-spacing: var(--lyd-tracking-wide);
  text-transform: uppercase; color: var(--lyd-text);
  min-height: 48px; min-width: 48px;
}
.lyd-panel__list { list-style: none; margin: 0; padding: 0; display: grid; }
.lyd-panel__list a {
  display: block; padding: var(--lyd-space-m) 0;
  border-bottom: var(--lyd-border);
  font-family: var(--lyd-font-display); font-size: var(--lyd-step-2);
  color: var(--lyd-text); text-decoration: none;
}
.lyd-panel__list--utils a {
  font-family: var(--lyd-font-body); font-size: var(--lyd-step--1);
  letter-spacing: var(--lyd-tracking-wide); text-transform: uppercase;
  border-bottom: 0; padding: var(--lyd-space-s) 0;
}
.lyd-panel__utils { margin-top: var(--lyd-space-l); }
/* While the panel is open the page behind it must not scroll. */
body[data-menu-open="true"] { overflow: hidden; }
@media (min-width: 900px) {
  .lyd-panel, .lyd-overlay { display: none; }
}

/* ---------- archive pagination ---------- */
/* WordPress supplies the markup, so these rules target its own classes. */
.lyd-pagination { margin-top: var(--lyd-space-xl); }
.lyd-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lyd-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--lyd-space-xs); align-items: center; }
.lyd-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; padding: 0 var(--lyd-space-s);
  border: var(--lyd-border); text-decoration: none; color: var(--lyd-text);
  font-size: var(--lyd-step--1); letter-spacing: var(--lyd-tracking-wide); text-transform: uppercase;
  transition: background var(--lyd-transition), color var(--lyd-transition);
}
.lyd-pagination .page-numbers:hover { background: var(--lyd-button-bg); color: var(--lyd-button-text); }
.lyd-pagination .page-numbers.current { background: var(--lyd-button-bg); color: var(--lyd-button-text); border-color: var(--lyd-button-bg); }

/* A product card on an archive is a WooCommerce element too, so its own
   classes come along. Keep our card rules winning over the plugin's. */
.lyd-grid .lyd-card { margin: 0; padding: 0; border: 0; text-align: left; width: auto; float: none; }
.lyd-grid .lyd-card .lyd-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- editorial lifestyle banner ---------- */
/* One photograph, full width, with a single line over its lower half. The
   gradient exists only so the type stays readable over any image. */
.lyd-banner { position: relative; overflow: hidden; }
.lyd-banner__media {
  width: 100%; height: clamp(320px, 62vh, 680px);
  object-fit: cover; object-position: 50% 35%; display: block;
}
.lyd-banner__body {
  position: absolute; inset: auto 0 0 0;
  padding-block: var(--lyd-space-2xl) var(--lyd-space-l);
  /* Deep enough at the foot that type stays readable over a bright
     photograph. A light image underneath is the case this has to survive. */
  background: linear-gradient(180deg, rgba(28,26,24,0) 0%, rgba(28,26,24,0.55) 45%, rgba(28,26,24,0.88) 100%);
  color: var(--lyd-ivory);
}
/* Scoped so the parent theme's own heading colours cannot win. */
.lyd-banner .lyd-banner__body .lyd-eyebrow { color: var(--lyd-accent); }
.lyd-banner .lyd-banner__title {
  font-family: var(--lyd-font-display);
  font-size: var(--lyd-step-3);
  color: var(--lyd-ivory);
  margin: 0;
}

/* ---------- contact page ---------- */
/* Contact routes lead, the form follows, because a reader who already knows
   what they want should not have to scroll past a form to find the address. */
.lyd-contact__lede { max-width: var(--lyd-measure); }
.lyd-contact { display: grid; gap: var(--lyd-space-xl); margin-top: var(--lyd-space-xl); }
@media (min-width: 900px) {
  .lyd-contact { grid-template-columns: 0.85fr 1.15fr; gap: var(--lyd-space-2xl); align-items: start; }
}
.lyd-contact__block + .lyd-contact__block { margin-top: var(--lyd-space-l); }
/* Scoped to .lyd-contact so it outranks the parent theme's own h2 rules,
   which otherwise set the display face and size on every heading. */
.lyd-contact .lyd-contact__heading {
  font-family: var(--lyd-font-body); font-weight: 500;
  font-size: var(--lyd-step--1); line-height: var(--lyd-leading-body);
  letter-spacing: var(--lyd-tracking-wide);
  text-transform: uppercase; color: var(--lyd-text-muted);
  margin: 0 0 var(--lyd-space-s);
}
.lyd-contact__email {
  font-family: var(--lyd-font-display); font-size: var(--lyd-step-1);
  color: var(--lyd-text); text-decoration: none; border-bottom: 1px solid var(--lyd-accent);
  transition: var(--lyd-transition);
}
.lyd-contact__email:hover { color: var(--lyd-accent); }
.lyd-contact__note { font-size: var(--lyd-step--1); color: var(--lyd-text-muted); max-width: var(--lyd-measure); }
.lyd-contact__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lyd-space-xs); }
.lyd-contact__links a { color: var(--lyd-text); text-decoration: none; border-bottom: 1px solid var(--lyd-border); }
.lyd-contact__links a:hover { border-bottom-color: var(--lyd-accent); color: var(--lyd-accent); }

/* Contact Form 7 fields, styled to the design system rather than left to the
   plugin's own defaults. Scoped to this page so no other form is affected. */
.lyd-contact__form .wpcf7-form p { margin: 0 0 var(--lyd-space-s); }
.lyd-contact__form input[type="text"],
.lyd-contact__form input[type="email"],
.lyd-contact__form input[type="tel"],
.lyd-contact__form textarea {
  width: 100%; min-height: 48px; padding: var(--lyd-space-xs) var(--lyd-space-s);
  background: var(--lyd-white); border: 1px solid var(--lyd-border);
  color: var(--lyd-text); font: inherit; font-size: var(--lyd-step-0);
  border-radius: var(--lyd-radius);
}
.lyd-contact__form textarea { min-height: 10rem; resize: vertical; }
.lyd-contact__form input:focus, .lyd-contact__form textarea:focus { border-color: var(--lyd-accent); outline: none; }
.lyd-contact__form input[type="submit"] {
  display: inline-block; min-height: 48px; padding: 0 var(--lyd-space-l);
  border: 1px solid var(--lyd-button-bg); background: var(--lyd-button-bg);
  color: var(--lyd-button-text); font: inherit; font-size: var(--lyd-step--1);
  letter-spacing: var(--lyd-tracking-wide); text-transform: uppercase;
  cursor: pointer; transition: var(--lyd-transition);
}
.lyd-contact__form input[type="submit"]:hover { background: transparent; color: var(--lyd-button-bg); }
.lyd-contact__form .wpcf7-list-item { margin: 0; }
.lyd-contact__form .wpcf7-not-valid-tip { font-size: var(--lyd-step--1); color: var(--lyd-brown); }
.lyd-contact__form .wpcf7-response-output {
  margin: var(--lyd-space-s) 0 0; padding: var(--lyd-space-s);
  border: 1px solid var(--lyd-border); font-size: var(--lyd-step--1);
}

/* ---------- faq page ---------- */
/* Grouped accordions. The group heading is scoped the same way as the contact
   headings so the parent theme's h2 rules do not take it over. */
.lyd-faq { margin-top: var(--lyd-space-xl); max-width: 52rem; }
.lyd-faq .lyd-faq__group {
  font-family: var(--lyd-font-body); font-weight: 500;
  font-size: var(--lyd-step--1); line-height: var(--lyd-leading-body);
  letter-spacing: var(--lyd-tracking-wide); text-transform: uppercase;
  color: var(--lyd-text-muted); margin: var(--lyd-space-xl) 0 0;
}
.lyd-faq .lyd-faq__group:first-child { margin-top: 0; }
.lyd-faq .lyd-details { margin-top: var(--lyd-space-s); }