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

img,
picture,
figure,
video,
canvas,
svg {
   display: block;
   max-width: 100%;
}

html {
   margin: 0;
   padding: 0;
}

body {
   margin: 0;
   padding: 0;
   line-height: 1.5;
   overflow-wrap: break-word;
}

a {
   text-decoration: none;
}

/* Themes set heading font-size as a clamp with a floor of several rem, so a
   single long word can be wider than a phone. The theme stylesheet loads after
   this one but never declares overflow-wrap, so this survives. */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-heading);
   color: var(--color-heading, var(--color-text));
   overflow-wrap: break-word;
}


p {
   margin: 0;
}

ul {
   margin: 0;
   padding: 0;
}

input,
button,
textarea,
select {
   font: inherit;
}

/* Design tokens not injected from the theme. Colors, fonts and the title and
   paragraph type scale are defined in the layout from theme settings. */
:root {
   /* spacing scale (tailwind-numbered) */
   --space-1: .25rem;
   --space-2: .5rem;
   --space-3: .75rem;
   --space-4: 1rem;
   --space-5: 1.25rem;
   --space-6: 1.5rem;
   --space-8: 2rem;
   --space-12: 3rem;
   --space-16: 4rem;
   /* radius */
   --radius-sm: .375rem;
   --radius-md: .75rem;
   --radius-lg: 1.25rem;
   --radius-full: 999px;
   /* elevation */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px -18px rgba(0, 0, 0, .22);
   --shadow-md: 0 2px 4px rgba(0, 0, 0, .06), 0 20px 44px -20px rgba(0, 0, 0, .42);
   --shadow-hover: 0 1px 2px rgba(0, 0, 0, .05), 0 24px 50px -22px rgba(0, 0, 0, .34);
   /* motion */
   --ease-out: cubic-bezier(.2, .7, .2, 1);
   /* fluid layout rhythm */
   --gutter: clamp(1rem, 4vw, 2rem);
   --container-padding: 1rem;
   --section-py: clamp(var(--space-8), 5vw, var(--space-16));
   --grid-gap: clamp(var(--space-4), 2.5vw, var(--space-8));
   --card-min: 16rem;
}

@media (min-width: 1024px) {
   :root {
      --container-padding: 0;
   }
}

.section-error {
   margin: 0 0 1rem;
   color: var(--color-secondary-700);
}

.domain-preview-banner {
   width: 100%;
   height: 30px;
   background-color: orange;
   color: black;
   font-size: 14px;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
}

.icon-line2-home::before {
   width: 1.5em;
   height: 1.5em;
   display: inline-block;
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 11.2 12 3.4l9.5 7.8'/%3E%3Cpath d='M4.9 10.1v10.5h14.2V10.1'/%3E%3Cpath d='M9.7 20.6v-6.1h4.6v6.1'/%3E%3C/svg%3E");
}

/* Stand-in cover for a sale, lot or news article with no picture. The image itself is a per-site
   value set on .fallback-cover--sale|lot|news in the generated theme CSS. */
.fallback-cover {
   width: 100%;
   height: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.announcement-bar { position: relative; overflow: hidden; width: 100%; min-height: 2.25rem; }
.announcement-bar-track { position: relative; height: 100%; }
.announcement-bar-item {
  position: absolute;
  inset: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--container-padding, var(--gutter));
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.announcement-bar-item[aria-current="true"] { opacity: 1; visibility: visible; }
/* theme.liquid sets font-size directly on the `p` element (not just inherited), which
   otherwise overrides the block's font_size setting applied on this wrapping element.
   Reinstate inheritance with higher specificity. */
.announcement-bar-item p { margin: 0; overflow: hidden; color: inherit; font: inherit; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (min-width: 768px) {
  .announcement-bar-item p { display: block; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-bar-item { transition: none; }
}

/* Three button levels. Visual weight tracks consequence: one primary per
   section, one secondary beside it, tertiary for everything repeated or minor.
   See templates/DESIGN.md sections 0 and 1. */

.button-primary,
.button-secondary,
.button-tertiary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-2);
   min-height: 2.75rem;
   padding: var(--space-3) var(--space-6);
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
   text-align: center;
   cursor: pointer;
   transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
}

.button-primary {
   background: var(--color-primary-500);
   color: var(--color-gray-100);
}

.button-primary:hover {
   background: var(--color-primary-700);
}

.button-secondary {
   background: transparent;
   border-color: var(--color-secondary-300);
   color: var(--color-secondary-900);
}

.button-secondary:hover {
   border-color: var(--color-secondary-900);
}

.button-tertiary {
   min-height: 0;
   padding: 0;
   border: 0;
   background: none;
   color: var(--color-primary-500);
   text-decoration: underline;
   text-underline-offset: .2em;
}

.button-tertiary:hover {
   color: var(--color-primary-700);
}

.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-tertiary:focus-visible {
   outline: 2px solid var(--color-primary-700);
   outline-offset: 2px;
}

.button-primary[disabled] {
   background: var(--color-gray-200);
   border-color: var(--color-gray-200);
   color: var(--color-gray-600);
   cursor: not-allowed;
}

.button-secondary[disabled],
.button-tertiary[disabled] {
   border-color: var(--color-gray-200);
   color: var(--color-gray-600);
   cursor: not-allowed;
}

/* Residual carousel rules that utilities cannot express: structural anchors,
   scroll behavior and JS-driven arrow positioning. Everything else is composed
   from base.css utilities in the markup, cards live in lot_card.css. */

.carousel-section { padding: var(--section-py) var(--container-padding, var(--gutter)); background: var(--carousel-bg, var(--color-bg)); }
.carousel-root { width: 100%; max-width: var(--container-width, 1200px); margin-inline: auto; --carousel-item: 260px; }

.carousel { position: relative; }
.carousel-track { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: var(--space-2) 0 var(--space-5); }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { flex: 0 0 var(--carousel-fit, var(--carousel-item)); scroll-snap-align: start; }
.carousel-track, .carousel-track * { cursor: grab; }
.carousel-track { user-select: none; }
.carousel-track.is-dragging, .carousel-track.is-dragging * { cursor: grabbing; }
.carousel-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }

.carousel-arrow { display: none; cursor: pointer; border: 1px solid color-mix(in srgb, var(--color-gray-900) 12%, transparent); background: var(--color-bg); color: var(--color-gray-900); width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; }
.carousel-arrow:disabled { opacity: 0.3; cursor: default; }
.carousel[data-arrow-position="center"] > .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.carousel-nav { display: none; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }

/* Below tablet the track is swiped, so no arrow row is shown at all. */
@media (min-width: 768px) {
  .carousel-root[data-show-arrows="true"] .carousel-arrow { display: inline-flex; }
  .carousel-root[data-show-arrows="true"] .carousel[data-arrow-position="bottom"] .carousel-nav { display: flex; }
  .carousel[data-arrow-position="center"] > .carousel-prev { left: -0.5rem; }
  .carousel[data-arrow-position="center"] > .carousel-next { right: -0.5rem; }
}
.carousel-dots { display: flex; justify-content: center; margin-top: var(--space-5); }
.carousel-dot { position: relative; width: 2.75rem; height: 2.75rem; background: none; border: none; cursor: pointer; padding: 0; }
.carousel-dot::before { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: .5rem; height: .5rem; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-gray-900) 20%, transparent); }
.carousel-dot[aria-current="true"]::before { background: var(--color-gray-900); }

.cta-card {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   text-align: left;
   gap: var(--space-4);
}

/* Full-width buttons are the small-screen default; they shrink to their content
   once there is room beside them. */
.cta-card .button-primary,
.cta-card .button-secondary {
   width: 100%;
}

@media (min-width: 480px) {
   .cta-card {
      align-items: flex-start;
   }

   .cta-card .button-primary,
   .cta-card .button-secondary {
      width: auto;
   }
}

.section.error-section { padding: clamp(var(--space-12), 10vw, 6rem) var(--container-padding, var(--gutter)); }
.error-inner { width: 100%; max-width: 40rem; margin-inline: auto; text-align: center; }
.error-title { margin: 0 0 var(--space-6); }
.error-home { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: var(--space-8); padding: var(--space-3) var(--space-8); background: var(--color-primary-500); color: var(--color-gray-100); border-radius: var(--radius-md); }

/* Estimation form: 3-step wizard (objects / contact / recap). Selectors are
   scoped under .estim (or prefixed estim- for the section that wraps it) so the
   other form blocks keep the generic forms.css look. Colors read theme tokens
   with the design value as a concrete fallback. */

/* ---------- section layout ---------- */
/* The estimation_form section pairs the form with a portrait image on its left,
   both aligned to the top. The image takes the design's ~32% of the content width
   (219/688 at md, 304/944 at lg, 415/1310 at xl) and is dropped below the
   tablet breakpoint, where the design has no image at all. */
.estim-layout { display: grid; align-items: start; }
.estim-layout-image { display: none; }
@media (min-width: 768px) {
  .estim-layout--image { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); gap: 1rem; }
  .estim-layout-image { display: block; width: 100%; aspect-ratio: 304 / 503; object-fit: cover; }
  /* once sent, the side image goes too, so the message centres on the page rather
     than sitting in a column beside a much taller image */
  .estim-layout:has(> .form.estim[data-sent]) { grid-template-columns: minmax(0, 1fr); }
  .estim-layout:has(> .form.estim[data-sent]) .estim-layout-image { display: none; }
}
@media (min-width: 1280px) {
  .estim-layout--image { gap: 2rem; }
}

.estim {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  min-width: 0;
}
.estim .form-title { margin: 0; }
.estim .form-fields { gap: 3rem; }
.estim .form-fieldset { gap: 2rem; }
.estim .form-legal { color: var(--color-gray-400, #737373); opacity: 1; }

/* headings */
.estim-heading { margin: 0; }
.estim-subheading { margin: 0; }

/* ---------- stepper ---------- */
/* Each step is [dot][connector]; the label is centered under the dot and, as in
   the design, is wider than the dot it sits under. The row's inline padding is
   exactly that overhang, so the first and last labels never spill out of the
   form no matter how narrow the column gets. */
.estim-steps-dots { display: none; justify-content: center; list-style: none; margin: 0; padding: 0 3.75rem; }
/* 10.5rem is the design's step width; the steps shrink rather than stretch, so
   a wide column keeps them grouped in the middle instead of spread apart. */
.estim-step { display: flex; align-items: flex-start; gap: 0.5rem; flex: 0 1 10.5rem; min-width: 0; }
/* The last step has no connector, so it must not keep a step-wide box: the empty
   tail would sit inside the centered row and push the dots off centre. */
.estim-step:last-child { flex: 0 0 auto; }
.estim-step-dot { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 1.6px solid var(--color-gray-400); border-radius: 999px; background: transparent; color: var(--color-gray-400); cursor: default; }
/* min-width:0 keeps the column the width of the dot: the wider label overflows
   it evenly on both sides instead of stretching the step and pushing the dots apart. */
.estim-step-head { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: 0 0 2.5rem; min-width: 0; }
.estim-step-label { width: 7.5rem; color: var(--color-gray-600); text-align: center; }
@media (min-width: 1024px) {
  .estim-steps-dots { padding: 0 3.75rem; }
  .estim-step-label { width: 10rem; }
}
.estim-step-line { flex: 1 1 0; min-width: 0.5rem; height: 1px; margin: 1.25rem 0.5rem 0 0; background: var(--color-gray-200); }
.estim-step[data-state="done"] .estim-step-dot,
.estim-step[data-state="current"] .estim-step-dot { background: var(--color-gray-400); border-color: var(--color-gray-400); color: var(--color-gray-900); }
.estim-step[data-state="done"] .estim-step-dot { cursor: pointer; }

.estim-steps-compact { display: flex; flex-direction: column; gap: 0.5rem; }
.estim-steps-compact-row { display: flex; align-items: center; gap: 0.8125rem; }
.estim-steps-text { display: flex; flex-direction: column; justify-content: space-between; gap: 0.25rem; }
.estim-steps-count { color: var(--color-gray-400, #a8aabc); }
.estim-steps-compact .estim-step-dot { background: var(--color-gray-400); border-color: var(--color-gray-400); color: var(--color-gray-900); }
.estim-steps-track { position: relative; height: 2px; border-radius: 100px; background: var(--color-gray-200, #d9d9d9); }
.estim-steps-bar { position: absolute; inset: 0 auto 0 0; width: 33.333%; border-radius: 100px; background: var(--color-primary-500); transition: width 0.25s var(--ease-out); }

.estim-steps { container-type: inline-size; }

@container (min-width: 768px) {
  .estim-steps-dots { display: flex; }
  .estim-steps-compact { display: none; }
}

/* ---------- fields ---------- */
.estim .form-field { gap: 0.5rem; }
.estim .form-required { color: red; }
.estim textarea.form-input { min-height: 9.5rem; }
.estim .form-input::placeholder { color: var(--color-gray-600); opacity: 1; }
.estim .form-error { color: var(--color-error, #c0392b); }

/* Paired fields sit side by side (Poids / Metal, Ville / Code postal). auto-fit
   collapses the empty track, so a category that declares a single conditional
   field gets the design's full-width control instead of a half-width one. */
.estim-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1rem; align-items: start; }
.estim-group { display: flex; flex-direction: column; gap: 1rem; }

/* select: native control plus the design's chevron */
.estim-select { position: relative; display: flex; }
.estim-select select.form-input { appearance: none; width: 100%; padding-right: 3rem; }
.estim-select-icon { position: absolute; top: 50%; right: 1rem; width: 13px; height: 8px; transform: translateY(-50%); pointer-events: none; }

/* suffixed field (Poids / Grammes, Dimensions / cm) */
.estim-suffixed { position: relative; display: flex; }
.estim-suffixed .form-input { padding-right: 6rem; }
.estim-suffixed-unit { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); color: var(--color-gray-600); pointer-events: none; }

/* phone with country dial code */
.estim-phone { display: flex; align-items: stretch; background: var(--color-gray-100, rgba(0,0,0,0.02)); border: 1px solid var(--color-gray-300, rgba(0,0,0,0.15)); border-radius: 0.5rem; }
.estim-phone:focus-within { border-color: var(--color-primary-500); }
.estim-phone .estim-select { flex: 0 0 auto; width: 7.125rem; }
.estim-phone .estim-select select.form-input { background: transparent; border: 0; padding: 0.75rem 2.25rem 0.75rem 0.625rem; }
.estim-phone .estim-select-icon { right: 0.75rem; }
.estim-phone-sep { flex: 0 0 1px; align-self: center; width: 1px; height: 2.625rem; background: var(--color-gray-200, #dcd9d5); }
.estim-phone .form-input[type="tel"] { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; }

/* ---------- photos ---------- */
.estim-photos { display: flex; flex-direction: column; gap: 0.5rem; }
.estim-photos-head { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.estim-photos-hint { color: var(--color-gray-400, #9aa0ae); }
.estim-dropzone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 90px; padding: 1rem; background: var(--color-gray-100, #f3f4f6); border: 1px dashed var(--color-gray-200, #dcd9d5); text-align: center; }
.estim-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.estim-dropzone-text { color: var(--color-gray-600); }
.estim-dropzone[data-dragover] { border-color: var(--color-primary-500); background: var(--color-gray-100); }

.estim-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.estim-thumbs:empty { display: none; }
.estim-thumb { position: relative; width: clamp(5.5rem, 28vw, 121px); aspect-ratio: 1; background: color-mix(in srgb, var(--color-gray-400) 20%, transparent); }
.estim-thumb img { width: 100%; height: 100%; object-fit: cover; }
.estim-thumb-remove { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: var(--color-bg); border: 2px solid var(--color-primary-500); cursor: pointer; }
.estim-thumb-remove::after { content: ""; position: absolute; inset: -9px; }
.estim-thumb-remove img { width: 20px; height: 20px; object-fit: contain; }

/* ---------- alerts ---------- */
.estim-alert { display: flex; align-items: flex-start; gap: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm, 4px); }
.estim-alert-icon { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 0.25rem; }
.estim-alert-text { flex: 1 1 auto; min-width: 0; margin: 0; }
.estim-alert-strong { font-weight: 600; }
.estim-alert-close { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin-top: 0.25rem; padding: 0; background: none; border: 0; cursor: pointer; }
.estim-alert-close img { width: 10px; height: 10px; }
.estim-alert--success { background: color-mix(in srgb, var(--color-success) 18%, var(--color-bg)); color: var(--color-gray-900); }

/* ---------- objects ---------- */
.estim-objects { display: flex; flex-direction: column; gap: 2rem; }
.estim-object { display: flex; flex-direction: column; gap: 1rem; }
.estim-object-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.estim-object-head .estim-heading { flex: 1 1 12rem; }

/* ---------- recap ---------- */
.estim-recap { display: flex; flex-direction: column; gap: 2rem; }
.estim-recap-objects { display: flex; flex-direction: column; gap: 2rem; }
.estim-recap-objects:empty { display: none; }
.estim-recap-block { display: flex; flex-direction: column; gap: 1rem; }
.estim-recap-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.estim-recap-head .estim-subheading { flex: 1 1 12rem; }
.estim-recap-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; }
.estim-recap-item { display: flex; flex-direction: column; gap: 0.5rem; }
.estim-recap-item--wide { grid-column: 1 / -1; }
.estim-recap-term { font-weight: 500; margin: 0; }
.estim-recap-value { margin: 0; white-space: pre-line; }

/* ---------- sent ---------- */
/* The accepted state: forms.js sets [data-sent] on the wrapper, which takes the
   form - steps, objects, summary - and the legal note out, leaving this panel
   centered on its own. */
.form.estim[data-sending] > form { opacity: 0; transition: opacity 0.18s ease-out; }
.form.estim[data-sent] > form,
.form.estim[data-sent] .form-legal { display: none; }
/* the panel brings its own vertical space, so drop the wrapper's */
.form.estim[data-sent] { gap: 0; }

/* The panel rises in via a transition, not an animation: its resting state is the
   visible one, so a browser that never runs the transition still shows it. Only
   [data-revealing], which forms.js drops on the next frame, is the offset state. */
.estim-sent { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 4rem 1.5rem; text-align: center; opacity: 1; transform: none; transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.form.estim[data-revealing] .estim-sent { opacity: 0; transform: translateY(0.75rem); }
.estim-sent-icon { width: 48px; height: 48px; }
.estim-sent-title { margin: 0; }
.estim-sent-body { max-width: 32rem; color: var(--color-gray-600); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .form.estim[data-sending] > form { transition: none; }
  .estim-sent { transition: none; }
}

/* ---------- controls ---------- */
.estim-divider { width: 100%; height: 0; margin: 0; border: 0; border-top: 2px solid var(--color-gray-200); }
.estim-check { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.estim-check input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0.125rem 0.125rem 0; accent-color: var(--color-primary-500); }

.estim-actions { display: flex; }
.form-button img { flex: 0 0 auto; }

.estim-nav { display: flex; flex-direction: column; gap: 2rem; }
.estim-nav-row { display: flex; gap: 1rem; }

.estim-nav { position: sticky; bottom: 0; z-index: 1; gap: var(--space-4); padding: var(--space-4) 0; background: var(--color-bg, #fff); border-top: 1px solid var(--color-gray-200); }
@media (min-width: 768px) {
  .estim-nav { position: static; gap: var(--space-8); padding: 0; background: none; border-top: 0; }
  .estim-recap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.footer .footer-wrap { width: 100%; max-width: var(--container-width, 1200px); margin-inline: auto; }
.footer .footer-grid { display: grid; gap: var(--footer-gap, var(--grid-gap)); grid-template-columns: minmax(0, 1fr); align-items: start; }
/* Two columns is the intermediate step; six at once on a tablet is unreadable. */
@media (min-width: 480px) { .footer .footer-grid { grid-template-columns: repeat(min(var(--footer-cols, 4), 2), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer .footer-grid { grid-template-columns: repeat(var(--footer-cols, 4), minmax(0, 1fr)); } }
.footer .footer-col-title, .footer .col-title { letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--space-5); }
.footer .footer-col h1, .footer .footer-col h2, .footer .footer-col h3, .footer .footer-col h4, .footer .footer-col h5, .footer .footer-col h6 { margin: 0 0 1rem; }
.footer .footer-col h2:not(:first-child), .footer .footer-col h3:not(:first-child), .footer .footer-col h4:not(:first-child), .footer .footer-col h5:not(:first-child) { margin-top: 1.75rem; }
.footer .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer .footer-col a { text-decoration: none; }
.footer .footer-col a:hover { opacity: 0.85; }
.footer .social { margin-inline: auto; }
.footer .social-items { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.footer .social--icons .social-item { display: inline-flex; align-items: center; justify-content: center; color: var(--social-icon-color, var(--color-text)); }
.footer .social-item svg { width: var(--social-icon-size, 18px); height: var(--social-icon-size, 18px); }
.footer .social--icons.social--circle .social-item { width: calc(var(--social-icon-size, 18px) + 1.1rem); height: calc(var(--social-icon-size, 18px) + 1.1rem); border-radius: 50%; background: var(--social-icon-bg, var(--color-primary-500, currentColor)); color: var(--social-icon-color, var(--color-bg)); }
.footer .social-item:hover { opacity: 0.85; }
.footer .footer-col--full { grid-column: 1 / -1; justify-self: stretch; width: 100%; }

.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); }
.legal-links-item { min-width: 0; }
.footer .legal-links--split { justify-content: flex-start; }
@media (min-width: 768px) {
  .footer .legal-links--split { justify-content: space-between; }
}
.footer .legal-links--center { justify-content: center; text-align: center; }
.legal-links p { margin: 0; }
.legal-links a { text-decoration: none; }
.legal-links a:hover { opacity: 0.85; }

.form-title { letter-spacing: -0.02em; margin: 0 0 clamp(var(--space-5), 4vw, var(--space-8)); }
.form-fields { display: flex; flex-direction: column; gap: var(--space-6); }
.form-fieldset { display: flex; flex-direction: column; gap: var(--space-6); border: 0; padding: 0; margin: 0; }
.form-step { margin: 0 0 0.5rem; padding: 0; }
.form-step-index { color: var(--color-primary-500, #8a6d3b); }
.form-field { display: flex; flex-direction: column; min-width: 0; gap: var(--space-2); }
.form-required { color: var(--color-primary-500, #8a6d3b); }
.form-input { color: inherit; background: var(--color-gray-100, rgba(0,0,0,0.02)); border: 1px solid var(--color-gray-300, rgba(0,0,0,0.15)); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); width: 100%; min-height: 2.75rem; font-size: 1rem; outline: none; }
.form-input:focus { border-color: var(--color-primary-500, #1a1a1a); }
textarea.form-input { min-height: 8rem; resize: vertical; }
.form-input-suffix { position: relative; }
.form-suffix { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); opacity: 0.6; }
.form-button { align-self: flex-start; }
.form-button--block { flex: 1 1 auto; align-self: stretch; }
.form-button--compact { flex: 0 0 auto; align-self: stretch; min-width: min(100%, 10.5rem); }
@media (min-width: 480px) {
  .form-button--compact { align-self: flex-start; }
}
.form-legal { opacity: 0.6; display: flex; flex-direction: column; gap: var(--space-3); }
.form-note { background: var(--color-gray-100, rgba(0,0,0,0.03)); border-left: 3px solid var(--color-primary-500, #8a6d3b); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: 0; }
.form-status { margin: 0 0 var(--space-4); }
.form-status[data-kind="success"] { color: var(--color-success, #1e7e34); }
.form-status[data-kind="error"] { color: var(--color-error, #c0392b); }
.form-error { color: var(--color-error, #c0392b); margin: 0; }
.form-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form-nav > * { flex: 1 1 12rem; }
@media (min-width: 480px) {
  .form-nav > * { flex: 0 0 auto; }
}
.payform .form-button { width: 100%; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; }
.form-spinner { display: inline-block; width: 1.15em; height: 1.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: form-spin 0.6s linear infinite; }
@keyframes form-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .form-spinner { animation-duration: 2s; }
}
/* Google allows hiding the v3 badge only if the notice below is shown instead
   (rendered by snippets/recaptcha_notice.liquid next to every protected form). */
.grecaptcha-badge { visibility: hidden; }
.form-recaptcha { opacity: 0.6; margin: 0; }
[hidden] { display: none !important; }

/* Editor content, not section layout: .rich-grid / .rich-column are emitted by
   the richtext migration (pkg/cpg/migration/richtext), so the class names are
   fixed. Section layout uses .grid-auto / .grid-cols in sections_common.css. */
.rich-grid {
    display: grid;
    gap: var(--grid-gap);
    margin: var(--space-4) 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rich-column {
    min-width: 0;
    grid-column: span 12;
}

@media (min-width: 768px) {
    .rich-column[span="1"] {
        grid-column: span 1;
    }

    .rich-column[span="2"] {
        grid-column: span 2;
    }

    .rich-column[span="3"] {
        grid-column: span 3;
    }

    .rich-column[span="4"] {
        grid-column: span 4;
    }

    .rich-column[span="5"] {
        grid-column: span 5;
    }

    .rich-column[span="6"] {
        grid-column: span 6;
    }

    .rich-column[span="7"] {
        grid-column: span 7;
    }

    .rich-column[span="8"] {
        grid-column: span 8;
    }

    .rich-column[span="9"] {
        grid-column: span 9;
    }

    .rich-column[span="10"] {
        grid-column: span 10;
    }

    .rich-column[span="11"] {
        grid-column: span 11;
    }

    .rich-column[span="12"] {
        grid-column: span 12;
    }
}

div[data-section-type="header"] {
   display: contents;
}

.site-header {
   position: relative;
   z-index: 40;
   background: var(--header-bg, var(--color-bg));
   padding: var(--space-4, 1rem) var(--container-padding, var(--space-6, 1.5rem));
}

.site-header[data-sticky="true"] {
   position: sticky;
   top: 0;
}

.site-header.is-scrolled {
   box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px -18px rgba(0, 0, 0, .22));
}

/* Mobile first: the header is a flex row with a burger, and the nav is a
   drawer. The horizontal bar and the centered-logo variant are the enhancement,
   from the desktop breakpoint up. */
.site-header-inner {
   position: relative;
   width: 100%;
   max-width: var(--container-width, 1200px);
   margin-inline: auto;
   display: flex;
   align-items: center;
   gap: var(--space-4, 1rem);
}

.site-header-nav-area {
   height: 100%;
   flex: 0 0 auto;
   min-width: 0;
   margin-left: auto;
   display: flex;
   align-items: center;
}

/* The controls keep their tap size and the logo gives up the width instead:
   a tall logo_height setting made the row wider than a phone, and flex-shrink
   was silently squeezing the burger and the icons to fit. */
.site-header-actions {
   display: flex;
   align-items: center;
   gap: var(--space-2, .5rem);
   flex-shrink: 0;
}

.site-header-actions>* {
   flex-shrink: 0;
}

.site-header-logo-area {
   display: flex;
   align-items: stretch;
   min-width: 0;
   flex: 0 1 auto;
}

.site-header-logo {
   min-width: 0;
}

.site-header-logo img {
   min-width: 0;
   max-width: 100%;
   object-fit: contain;
   object-position: left center;
}

.site-header-burger {
   display: flex;
}

.site-header-nav {
   height: auto;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   display: none;
   max-height: 80vh;
   overflow-y: auto;
   background: var(--nav-bg, var(--color-bg));
   box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, .06), 0 20px 44px -20px rgba(0, 0, 0, .42));
   padding: var(--space-2, .5rem) var(--space-4, 1rem);
}

.site-header-nav[data-open="true"] {
   display: block;
}

.site-header-nav>ul {
   flex-direction: column;
   align-items: stretch;
   gap: 0;
}

.site-header-nav>ul>li>.site-header-nav-row>a {
   padding: var(--space-2, .5rem) 0;
}

.site-header-nav ul ul {
   position: static;
   box-shadow: none;
   padding: 0 0 0 var(--space-4, 1rem);
}

.site-header-nav>ul>li.sub-menu::after {
   display: none;
}

.site-header[data-search-open="true"] .site-header-nav-area {
   flex: 1 1 auto;
   padding: 0;
}

.site-header[data-search-open="true"] .site-header-nav[data-open="true"] {
   display: block;
}

.site-header-logo {
   display: flex;
   align-items: center;
}

.site-header-logo img {
   display: block;
   width: auto;
}

/* A site with no logo image shows its name here. nowrap alone let it run
   straight through the search and account icons on a phone. */
.site-header-wordmark {
   letter-spacing: .04em;
   white-space: nowrap;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
}

.site-header-logo-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1;
   border: 1px dashed var(--color-gray-300, #d4d4d4);
   border-radius: 4px;
   color: var(--color-gray-300, #d4d4d4);
}

.site-header-search {
   display: inline-flex;
   border: none;
   background: none;
   padding: 0;
   cursor: pointer;
   color: var(--nav-link-color, currentColor);
}

.site-header-search:hover {
   opacity: 0.85;
}

.site-header-ordre {
   display: inline-flex;
   color: var(--nav-link-color, currentColor);
}

.site-header-ordre:hover {
   color: var(--nav-link-color, currentColor);
   opacity: 0.85;
}

.site-header[data-search-open="true"] .site-header-nav {
   display: none;
}

.site-header[data-search-open="true"] .site-header-inner {
   grid-template-columns: auto minmax(0, 1fr) auto;
}

.site-header[data-search-open="true"] .site-header-nav-area {
   justify-self: stretch;
}

.site-header-search-form {
   display: none;
   align-items: center;
   gap: var(--space-2, .5rem);
   width: 100%;
   min-width: 0;
}

.site-header[data-search-open="true"] .site-header-search-form {
   display: flex;
}

.site-header-search-input {
   flex: 1;
   min-width: 0;
   border: none;
   border-bottom: 1px solid var(--color-gray-300, #d4d4d4);
   background: none;
   padding: var(--space-1, .25rem) 0;
   font: inherit;
   color: inherit;
}

.site-header-search-input:focus {
   outline: none;
   border-bottom-color: var(--nav-link-hover-color, var(--color-primary-500));
}

.site-header-search-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
   border: none;
   background: none;
   padding: 0;
   cursor: pointer;
   color: var(--nav-link-color, currentColor);
}

.site-header-search-close:hover {
   opacity: 0.85;
}

.site-header-nav {
   min-width: 0;
}

.site-header-nav>ul {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.site-header-nav>ul>li {
   padding: var(--space-3, 0.75rem) var(--space-2, .5rem);
}

.site-header-nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.site-header-nav li {
   position: relative;
   margin: 0;
}

.site-header-nav-row {
   display: flex;
   align-items: center;
   min-height: 2.75rem;
}

.site-header-nav>ul>li>.site-header-nav-row>a {
   display: flex;
   align-items: center;
   color: var(--nav-link-color, inherit);
   white-space: nowrap;
}

.site-header-nav>ul>li>.site-header-nav-row>a:hover {
   opacity: 0.85;
}

.site-header-caret {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
   margin-left: var(--space-1, .25rem);
   border: none;
   background: none;
   color: var(--nav-link-color, currentColor);
   cursor: pointer;
   padding: 0;
}

.site-header-caret::after {
   content: "";
   position: absolute;
   inset: -0.75rem;
}

.site-header-nav-row:hover .site-header-caret {
   opacity: 0.85;
}

.site-header-nav>ul>li.sub-menu::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   height: var(--space-2, .5rem);
}

.site-header-nav ul ul {
   display: none;
   position: absolute;
   top: calc(100% + var(--space-2, .5rem));
   left: 0;
   min-width: 220px;
   flex-direction: column;
   align-items: stretch;
   gap: 0;
   background: var(--nav-bg, var(--color-bg));
   box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, .06), 0 20px 44px -20px rgba(0, 0, 0, .42));
   padding: var(--space-2, .5rem);
   z-index: 10;
}

.site-header-nav ul ul ul {
   top: 0;
   left: 100%;
}

.site-header-nav li.sub-menu:hover>ul,
.site-header-nav li.sub-menu.is-open>ul {
   display: flex;
}

.site-header-nav ul ul li {
   width: 100%;
}

.site-header-nav ul ul .site-header-nav-row>a {
   width: 100%;
   padding: var(--space-2, .5rem) var(--space-3, .75rem);
}

.site-header-nav ul ul .site-header-nav-row>a:hover {
   opacity: 0.85;
}

/* First child of the header row, so the menu control sits on the left. */
.site-header-burger {
   flex-shrink: 0;
   margin-left: calc(-1 * var(--space-2, .5rem));
   align-items: center;
   justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
   border: none;
   background: none;
   color: var(--nav-link-color, currentColor);
   cursor: pointer;
   padding: 0;
}

.site-header-burger:hover {
   opacity: 0.85;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
   outline: 2px solid var(--nav-link-hover-color, var(--color-primary-500));
   outline-offset: 2px;
}

/* The bar needs room for a full menu on one line, so it starts a step above the
   desktop layout; narrower than that the drawer above stays in charge. */
@media (min-width: 1280px) {
   .site-header-inner {
      max-width: var(--container-width, 1200px);
      margin: 0 auto;
      position: relative;
      display: grid;
      align-items: stretch;
      gap: var(--space-4, 1rem) var(--space-6, 1.5rem);
      grid-template-areas: "logo nav .";
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   }

   .site-header-logo-area {
      grid-area: logo;
      display: flex;
      align-items: stretch;
      justify-self: start;
   }

   .site-header-nav-area {
      grid-area: nav;
      display: flex;
      align-items: center;
      gap: var(--space-4, 1rem);
      min-width: 0;
      margin-left: 0;
      justify-self: center;
   }

   .site-header-actions {
      display: flex;
      align-items: center;
      gap: var(--space-4, 1rem);
   }

   .site-header--logo-center_top {
      padding: var(--space-4, 1rem) 0 0 0;
   }

   .site-header--logo-center_top .site-header-inner {
      max-width: none;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "logo" "nav";
      column-gap: 0;
   }

   .site-header--logo-center_top .site-header-logo-area {
      width: 100%;
      max-width: var(--container-width, 1200px);
      grid-area: logo;
      display: flex;
      align-items: center;
      justify-content: center;
      justify-self: center;
   }

   .site-header--logo-center_top .site-header-nav-area {
      background: var(--nav-bg);
      grid-area: nav;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      width: 100%;
      min-width: 0;
      padding-inline: max(0px, calc(50% - var(--container-width, 1200px) / 2));
   }

   .site-header--logo-center_top .site-header-nav {
      grid-column: 1;
      background: var(--nav-bg);
      color: var(--nav-text-color);
      max-width: none;
      width: 100%;
   }

   .site-header--logo-center_top .site-header-nav>ul {
      background: var(--nav-bg);
      color: var(--nav-text-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
   }

   .site-header--logo-center_top .site-header-nav>ul ul {
      background: var(--nav-bg);
   }

   .site-header--logo-center_top .site-header-nav>ul ul a {
      color: var(--nav-text-color);
   }

   /* The menu spreads over the container and the icons close the row, so the
     whole bar reads with even gutters instead of a block pushed to one side. */
   .site-header--logo-center_top .site-header-actions {
      grid-column: 2;
      justify-self: end;
      color: var(--nav-text-color);
      display: flex;
      align-items: center;
      gap: var(--space-4, 1rem);
   }

   .site-header--logo-center_top[data-search-open="true"] .site-header-inner {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "logo" "nav";
   }

   .site-header--logo-center_top[data-search-open="true"] .site-header-logo-area {
      grid-area: logo;
      position: static;
      transform: none;
      justify-self: center;
   }

   .site-header--logo-center_top[data-search-open="true"] .site-header-nav-area {
      grid-area: nav;
      grid-template-columns: minmax(0, 1fr) auto;
      width: 100%;
      min-width: 0;
      justify-self: stretch;
      padding: var(--space-2, .5rem) max(0px, calc(50% - var(--container-width, 1200px) / 2));
   }

   .site-header--logo-center_top[data-search-open="true"] .site-header-search-form {
      grid-column: 1;
      color: var(--nav-text-color);
      display: flex;
      width: 100%;
      min-width: 0;
   }

   .site-header--logo-center_top[data-search-open="true"] .site-header-actions {
      grid-column: 2;
      margin: 0;
   }

   .site-header--logo-center_top[data-search-open="true"] .site-header-nav {
      display: none;
      width: 100%;
   }

   .site-header-burger {
      display: none;
   }

   .site-header-actions {
      gap: var(--space-4, 1rem);
   }

   .site-header-nav {
      height: 100%;
   }

   .site-header-nav>ul {
      min-height: 100%;
   }

   .site-header-nav>ul>li {
      align-self: stretch;
   }

   .site-header-nav-row {
      height: 100%;
      min-height: 0;
   }

   .site-header-nav {
      position: static;
      display: block;
      max-height: none;
      overflow: visible;
      background: none;
      box-shadow: none;
      padding: 0;
   }

   .site-header-nav>ul {
      flex-direction: row;
      align-items: center;
   }

   .site-header-nav>ul>li>.site-header-nav-row>a {
      padding: 0;
   }

   .site-header-nav ul ul {
      position: absolute;
      box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, .06), 0 20px 44px -20px rgba(0, 0, 0, .42));
      padding: var(--space-2, .5rem);
   }

   .site-header-nav>ul>li.sub-menu::after {
      display: block;
   }
}


/* Same colour tokens as the other header actions so the skin's nav colour
     applies. The <select> resets to the page font since browsers give it their own. */
.lang-select,
.lang-links {
   font: inherit;
   color: var(--nav-link-color, currentColor);
}

.lang-select {
   background: var(--nav-bg, var(--color-bg));
   border: 0px;
   padding: 2px 6px;
   cursor: pointer;
   text-transform: uppercase;
}

.lang-links {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
   text-transform: uppercase;
}

.lang-links a,
.lang-links a:visited {
   color: inherit;
   opacity: 0.6;
}

.lang-links a:hover,
.lang-links a:focus-visible {
   opacity: 1;
   color: var(--nav-link-hover-color, inherit);
}

.lang-links [aria-current] {
   font-weight: 700;
   text-decoration: underline;
   text-underline-offset: 0.2em;
}

.img-figure {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 50rem;
}

.img-figure--narrow { max-width: 40rem; }
.img-figure--wide { max-width: var(--container-width, 1200px); }
@media (min-width: 768px) {
    .img-figure--legend-left,
    .img-figure--legend-right { flex-direction: row; }
}
.img-figure--legend-top .img-link,
.img-figure--legend-top .img-media,
.img-figure--legend-left .img-link,
.img-figure--legend-left .img-media { order: 1; }
.img-figure--align-left { align-items: flex-start; }
.img-figure--align-right { align-items: flex-end; }
.img-figure--align-left .img-caption { text-align: left; }
.img-figure--align-center .img-caption { text-align: center; }
.img-figure--align-right .img-caption { text-align: right; }

.img-link {
    display: block;
    max-width: 100%;
}

.img-media {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-media--fit-cover,
.img-media--fit-contain,
.img-media--fit-fill,
.img-media--fit-scale-down {
    width: 100%;
    aspect-ratio: 1;
}
.img-media--fit-cover { object-fit: cover; }
.img-media--fit-contain { object-fit: contain; }
.img-media--fit-fill { object-fit: fill; }
.img-media--fit-scale-down { object-fit: scale-down; }

.img-caption {
    color: var(--color-secondary-700);
}

/* Shared lot card, rendered by the carousel track and by the lot list layouts.
   Mirrors the sale/news card structure: flat surface, same body padding and
   title type scale. */

.lot-card {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   color: inherit;
}

.lot-card-media {
   position: relative;
   overflow: hidden;
   aspect-ratio: var(--lot-card-ratio, 1);
   background: var(--color-gray-100, #f0f0f0);
}

.lot-card-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.lot-card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: var(--space-2) 0;
   gap: var(--space-2);
}

.lot-card-title {
   margin: 0;
   line-height: 1.25;
   min-height: calc(1.25em * 2);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.lot-card-price-wrap {
   margin-top: auto;
}

.lot-card-price-label,
.lot-card-price {
   display: block;
}

.lot-card-price-label {
   color: var(--color-secondary-700);
}
/* Lot browsing is image led and the waterfall mode is already two up on a
   phone, so the grid matches it. From tablet the shared floor takes over. */
.lot-list-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr)); align-items: stretch; --card-min: 9rem; }
@media (min-width: 768px) {
  .lot-list-grid { --card-min: inherit; }
}
.lot-list-waterfall { columns: 2; gap: var(--grid-gap); }
.lot-list-waterfall > * { margin-bottom: var(--grid-gap); break-inside: avoid; }
/* Photos keep their own ratio inside the card, which is what staggers the columns.
   Cards without a photo show the fallback image, which keeps the square ratio. */
.lot-list-waterfall .lot-card-media:has(.lot-card-img) { aspect-ratio: auto; }
.lot-list-waterfall .lot-card-img { height: auto; }
/* 2 -> 4 in one step put four ~190px columns on a tablet. */
@media (min-width: 768px) {
  .lot-list-waterfall { columns: 3; }
}
@media (min-width: 1024px) {
  .lot-list-waterfall { columns: 4; }
}
.lot-list-empty { color: var(--color-secondary-700); }

.news-years {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.news-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  border: 0;
  border-radius: 0.625rem;
  background: var(--color-bg);
  padding: 0.1875rem 0.625rem;
  color: var(--color-secondary-700);
  cursor: pointer;
}

.news-year.is-active {
  background: var(--color-primary-500);
  color: var(--color-gray-100);
  text-decoration: underline;
}

.news-card[hidden],
.news-month-heading[hidden] {
  display: none;
}

.news-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr));
  align-items: start;
}

.news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
}

.news-card-img {
  aspect-ratio: var(--news-card-ratio, 1);
  background: var(--color-gray-100, #f0f0f0);
  overflow: hidden;
}

.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-body {
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.news-card-title {
  margin: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2lh;
}

.news-month-heading {
  margin: 1.5rem 0 0.25rem;
  text-transform: capitalize;
}

.news-month-heading:first-child {
  margin-top: 0;
}

/* A month heading inside the grid spans every column so the next month starts on a new row. */
.news-grid .news-month-heading {
  grid-column: 1 / -1;
}

.news {
  padding: var(--section-py) var(--container-padding, var(--gutter));
}

.news .news-container {
  width: 100%;
  max-width: var(--container-width, 1200px);
  margin-inline: auto;
}

.news .news-col {
  max-width: 70ch;
  margin: 0 auto;
}

.news .news-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.news .news-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.news .news-category {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-500);
}

.news .news-date {
  letter-spacing: 0.04em;
  text-transform: capitalize;
  opacity: 0.65;
}

.news .news-title {
  margin: 0;
}

.news .news-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.news .news-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news .news-cover--wide {
  aspect-ratio: 16/9;
}

.news .news-content {
  margin-top: 2.5rem;
}

.news .news-body {
  margin-top: 1.75rem;
  opacity: 0.92;
}

.news .news-body>*+* {
  margin-top: 1rem;
}

.news .news-body h2,
.news .news-body h3,
.news .news-body h4 {
  margin-top: 2.25rem;
}

/* hero split (classic / mirror) */
.news .news-hero {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  grid-template-columns: 1fr;
  align-items: center;
}

.news .news-hero .news-cover {
  aspect-ratio: 4/3;
}

.news--classic .news-hero .news-header,
.news--mirror .news-hero .news-header {
  text-align: left;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .news .news-hero {
    grid-template-columns: 1fr 1fr;
  }

  .news--mirror .news-hero .news-header {
    text-align: right;
    align-items: flex-end;
  }

  .news--mirror .news-hero .news-categories {
    justify-content: flex-end;
  }

  .news--mirror .news-hero .news-cover {
    order: 2;
  }
}

/* centered */
.news--centered .news-header {
  text-align: center;
  align-items: center;
}

/* banner / immersive full-bleed cover */
.news--banner,
.news--immersive {
  padding-top: 0;
}

.news .news-banner {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 2.5rem;
}

.news .news-banner .news-cover {
  border-radius: 0;
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .news .news-banner .news-cover {
    aspect-ratio: 21 / 7;
  }
}

.news .news-banner-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(var(--space-5), 5vw, var(--space-12)) var(--container-padding, var(--gutter));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

.news .news-banner-overlay .news-title {
  color: #fff;
}

.news .news-banner-overlay .news-date {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

.news .news-banner-overlay .news-container .news-header {
  background: none;
}

.news .news-content--split {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .news .news-content--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    align-items: start;
  }

  .news .news-content--split .news-col-main {
    max-width: 70ch;
  }

  .news .news-related--column {
    margin-top: 1.75rem;
  }
}

.news .news-related-bottom {
  max-width: var(--container-width, 1200px);
  margin: 3rem auto 0;
}

.news .news-related-title {
  margin: 0 0 1.25rem;
}

.news .news-related-cards {
  display: grid;
  gap: var(--grid-gap);
}

.news .news-related--row .news-related-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.news .news-related-card {
  display: flex;
  color: inherit;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--color-gray-100, #faf6ef);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.news .news-related-date {
  margin: 0;
  letter-spacing: 0.04em;
  opacity: 0.65;
  text-transform: capitalize;
}

.news .news-related-card-title {
  margin: 0;
}

.news-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  color: inherit;
}

.news-hero-link {
  color: inherit;
  text-decoration: none;
}

.news-hero-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (min-width: 768px) {
  .news-hero {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .news-hero-media {
    grid-row: 1;
    grid-column: 1;
  }

  .news-hero-body {
    grid-row: 1;
    grid-column: 2;
  }

  .news-hero--reverse .news-hero-media {
    grid-column: 2;
  }

  .news-hero--reverse .news-hero-body {
    grid-column: 1;
  }
}

.news-hero-media {
  aspect-ratio: 4 / 3;
  background: var(--color-gray-100, #f0f0f0);
}

.news-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-hero-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 5vw, var(--space-8));
}

.news-hero-title {
  margin: 0;
}

.news-hero-text {
  margin: 0;
  color: var(--color-secondary-700);
}

.news-card-text {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1rem;
}
.raw-html {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.raw-html--constrained {
    padding: var(--section-py) var(--container-padding)
}
/*
  * Used with a --flex-basis set inline by the host section, e.g.
  * style="--flex-basis: calc((100% - gap * (columns - 1)) / columns);"
  * Full width on phones, at most two per row on tablets, the owner's basis from
  * desktop up.
 */
.flex-resizeable {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .flex-resizeable {
        flex-basis: max(var(--flex-basis), 45%);
    }
}

@media (min-width: 1024px) {
    .flex-resizeable {
        flex-basis: var(--flex-basis);
    }
}

.rich-text-title { margin: 0 0 var(--space-4); }
.rich-text-inner { width: 100%; max-width: 50rem; margin-inline: auto; }
.rich-text-inner--narrow { max-width: 40rem; }
.rich-text-inner--wide { max-width: var(--container-width, 1200px); }
.rich-text-block--align-left { text-align: left; }
.rich-text-block--align-center { text-align: center; }
.rich-text-block--align-right { text-align: right; }
.rich-text-block--bg { padding: clamp(var(--space-4), 4vw, var(--space-6)); border-radius: var(--radius-md); }

.sale-type {
   color: var(--color-primary-500);
   text-transform: lowercase;
   letter-spacing: 0.05em;
}

.sale-type::first-letter {
   text-transform: uppercase;
}

.sale-card-date::first-letter,
.sale-hero-date::first-letter {
   text-transform: uppercase;
}

.sale-tags {
   display: flex;
   gap: var(--space-3);
   flex-wrap: wrap;
}

.sale-tag {
   color: var(--color-secondary-700);
   opacity: 0.75;
}

.sale-year,
.sale-year:visited {
   display: inline-flex;
   align-items: center;
   min-height: 2.75rem;
   border-radius: var(--radius-md);
   background: var(--color-bg);
   padding: var(--space-1) 0;
   color: var(--color-secondary-700);
}

.sale-year.is-active,
.sale-year.is-active:visited {
   color: var(--color-gray-100);
   text-decoration: underline;
}

.sale-next {
   display: inline-flex;
   align-items: center;
   min-height: 2.75rem;
   border: 1px solid var(--color-secondary-300);
   padding: var(--space-3) var(--space-6);
   color: var(--color-secondary-900);
}

.sale-empty {
   color: var(--color-secondary-700);
}

.sale-hero,
.sale-card {
   overflow: hidden;
   color: inherit;
}

.sale-hero {
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
}

.sale-hero-link {
   color: inherit;
   text-decoration: none;
}

.sale-hero-link::after {
   content: "";
   position: absolute;
   inset: 0;
}

@media (min-width: 768px) {
   .sale-hero {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
   }

   .sale-year {
      padding: var(--space-1) var(--space-2);
   }

   .sale-hero-media {
      grid-row: 1;
      grid-column: 1;
   }

   .sale-hero-body {
      grid-row: 1;
      grid-column: 2;
   }

   .sale-hero--reverse .sale-hero-media {
      grid-column: 2;
   }

   .sale-hero--reverse .sale-hero-body {
      grid-column: 1;
   }
}

.sale-card {
   display: flex;
   flex-direction: column;
}

.sale-card:focus-visible {
   outline: 2px solid var(--color-primary-500);
   outline-offset: 2px;
}

.sale-hero-media img,
.sale-card-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.sale-hero-media {
   aspect-ratio: 4 / 3;
}

.sale-card-media {
   position: relative;
   overflow: hidden;
   aspect-ratio: var(--sale-card-ratio, 1);
   background: var(--color-gray-100, #f0f0f0);
}

.sale-hero-body,
.sale-card-body {
   display: flex;
   flex-direction: column;
}

.sale-hero-body {
   padding: clamp(var(--space-5), 5vw, var(--space-12));
   gap: var(--space-3);
   justify-content: center;
}

.sale-card-body {
   flex: 1;
   min-width: 0;
   padding: var(--space-2) 0;
   gap: var(--space-2);
}

.sale-hero-title,
.sale-card-title {
   margin: 0;
   overflow-wrap: anywhere;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.sale-hero-title {
   -webkit-line-clamp: 3;
}

/* Every row of a card keeps its space whatever the sale carries, so cards stay
   the same height with or without an address or a tag. */
.sale-card-title {
   -webkit-line-clamp: 2;
   min-height: 2lh;
}

.sale-card .section-error {
   margin: 0;
}

.sale-hero-date {
   margin: 0;
}

.sale-hero-place {
   margin: 0;
   color: var(--color-secondary-700);
}

.sale-card-date {
   color: var(--color-gray-700);
}

.sale-card-place {
   margin: 0;
   color: var(--color-gray-600);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   min-height: 2lh;
}

.sale-hero-text {
   margin: 0;
}

.sale-card-text {
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* Type and date share one line under the title, and wrap when narrow. */
.sale-card-meta {
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: var(--space-1) var(--space-3);
}

.sale-card .sale-tags {
   margin-top: auto;
   padding-top: var(--space-2);
   min-height: calc(1lh + var(--space-2));
}

/* One row that scrolls sideways on a phone, so the filter costs the same height
   whatever the number of years. It wraps once there is room for it. The arrows
   sit over the faded edges and are only shown by sale_calendar.js when the row
   actually overflows. */
.sale-years-strip {
   position: relative;
   margin-bottom: var(--space-6);
}

.sale-years {
   display: flex;
   gap: var(--space-3);
   overflow-x: auto;
   scroll-snap-type: x proximity;
   scrollbar-width: none;
}

.sale-years::-webkit-scrollbar {
   display: none;
}

.sale-years-strip[data-scroll="start"] .sale-years,
.sale-years-strip[data-scroll="middle"] .sale-years {
   mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
}

.sale-years-strip[data-scroll="middle"] .sale-years {
   mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
}

.sale-years-strip[data-scroll="end"] .sale-years {
   mask-image: linear-gradient(to right, transparent, #000 3.5rem);
}

.sale-year {
   flex: 0 0 auto;
   scroll-snap-align: start;
   justify-content: center;
}

/* A small painted disc with a CSS chevron so the glyph is truly centered; the
   ::before keeps the 44px tap target the disc itself no longer fills. */
.sale-years-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2rem;
   height: 2rem;
   padding: 0;
   border: 1px solid color-mix(in srgb, var(--color-gray-900) 12%, transparent);
   border-radius: var(--radius-full);
   background: var(--color-bg);
   color: var(--color-gray-900);
   cursor: pointer;
}

.sale-years-arrow::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
   width: 2.75rem;
   height: 2.75rem;
   translate: -50% -50%;
}

.sale-years-arrow::after {
   content: "";
   width: .5rem;
   height: .5rem;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
}

.sale-years-prev::after {
   transform: translateX(15%) rotate(135deg);
}

.sale-years-next::after {
   transform: translateX(-15%) rotate(-45deg);
}

.sale-years-prev {
   left: 0;
}

.sale-years-next {
   right: 0;
}

@media (min-width: 768px) {
   .sale-years {
      flex-wrap: wrap;
      gap: var(--space-2);
      overflow: visible;
   }

   .sale-years-arrow {
      display: none;
   }
}

.sale-pagination {
   display: flex;
   justify-content: center;
   margin-top: var(--space-8);
}

/* Grid cards are rows: square media on the left, text column on the right, two
   per line on desktop. The carousel keeps the vertical tile. */
.sale-grid {
   display: grid;
   gap: var(--grid-gap) clamp(var(--space-6), 4vw, var(--space-12));
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
   align-items: stretch;
}

.carousel-root.sale-carousel {
   --carousel-item: 360px;
}

/* Only a phone stacks the card. From the mobile step up there is room for the
   row, and the media fills the row height and takes its width from that height,
   so it stays square with no gap under the image whatever the card holds. */
@media (min-width: 480px) {
   .sale-grid .sale-card {
      flex-direction: row;
   }

   .sale-grid .sale-card-body {
      padding: 0 var(--space-2);
   }

   .sale-grid .sale-card-media {
      flex: 0 0 auto;
      width: auto;
      max-width: 45%;
   }

   .sale-grid .sale-card-media:not(:has(img)) {
      width: 45%;
   }
}

.sale-month-heading {
   margin: var(--space-6) 0 var(--space-1);
   text-transform: capitalize;
}

.sale-month-heading:first-child {
   margin-top: 0;
}

/* A month heading inside the grid spans every column so the next month starts on a new row. */
.sale-grid .sale-month-heading {
   grid-column: 1 / -1;
}
/* The only definition of the page container. No other stylesheet and no inline
   <style> re-declares max-width: var(--container-width).
   .grid-auto / .grid-cols are section layout; .rich-grid in grid.css is editor
   content coming out of the richtext migration. They are not interchangeable. */
.section { background: var(--color-bg); padding: var(--section-py) var(--container-padding, var(--gutter)); }
/* Legacy sites load static-legacy-css/style.css after this bundle, and it owns
   the same class name with `padding: 60px 0`, which left theme sections flush
   to the screen edge. Only theme sections carry the data-section-id wrapper. */
[data-section-id] > .section { padding: var(--section-py) var(--container-padding, var(--gutter)); }
.section--flush { padding-inline: 0; }
.section--tight { padding-block: clamp(var(--space-6), 4vw, var(--space-12)); }
.section-inner { width: 100%; max-width: var(--container-width, 1200px); margin-inline: auto; }

/* min() keeps the floor from overflowing a 375px viewport. */
.grid-auto { display: grid; gap: var(--grid-gap); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr)); }

.grid-cols { display: grid; gap: var(--grid-gap); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) {
  .grid-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar--sm { width: 32px; height: 32px; }
.embed-frame { display: block; width: 100%; border: 0; }
.embed-frame--centered { margin: 0 auto; }
.embed-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; }

/* Arrow glyph font shared with the navigation skins. The url is relative on
   purpose: this file is concatenated into main.css and served raw, so the
   asset_url filter is not available, while a relative path resolves against
   /theme-assets/ in both the published and the editor-preview contexts. */
@font-face {
  font-family: "revicons";
  src: url("revicons.woff") format("woff"), url("revicons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.slider { position: relative; overflow: hidden; width: 100%; max-width: min(100%, var(--slider-max-width, 100%)); margin-inline: auto; height: min(var(--slider-height, 500px), 70vh); }
@media (min-width: 768px) {
  .slider { height: var(--slider-height, 500px); }
}
.slider-track { display: flex; height: 100%; transition: transform 0.4s ease; will-change: transform; }
.slide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide > a { display: block; height: 100%; }
.slide-caption { position: absolute; bottom: 0; left: 0; right: 0; max-height: 100%; overflow: hidden; padding: clamp(var(--space-3), 3vw, var(--space-4)) clamp(var(--space-4), 4vw, var(--space-6)); color: var(--color-gray-100); pointer-events: none; }
/* The arrows and the dots float over the caption, so the caption reserves their
   footprint instead of letting the text run under them. --slider-control is the
   base hit area of .slider-btn and .slider-dot; the navigation skins override
   --slider-arrow-w and --slider-dots-h with their own geometry. */
.slider { --slider-control: 1.75rem; --slider-arrow-w: var(--slider-control); --slider-dots-h: var(--slider-control); }
/* 44px targets are a touch rule: on a coarse pointer the controls grow, on a
   mouse they stay tight so the dot row does not read as a row of big buttons. */
@media (pointer: coarse) {
  .slider { --slider-control: 2.75rem; }
}
.slider:not(.slider--vertical):has(.slider-dots) .slide-caption { padding-bottom: calc(var(--slider-dots-h) + var(--space-2)); }
.slider:not(.slider--vertical):has(.slider-btn) .slide-caption { padding-inline: calc(var(--slider-arrow-w) + 0.75rem + var(--space-2)); }
.slider--vertical:has(.slider-dots) .slide-caption { padding-inline-end: calc(var(--slider-control) + var(--space-2)); }
.slider--vertical:has(.slider-btn) .slide-caption { padding-bottom: calc(var(--slider-control) + 0.75rem + var(--space-2)); }
.slide-caption p { margin: 0; }
.slide-caption--shaded { background: linear-gradient(to top, color-mix(in srgb, var(--color-gray-900) 50%, transparent) 0%, color-mix(in srgb, var(--color-gray-900) 25%, transparent) 45%, transparent 100%); text-shadow: 0 1px 3px color-mix(in srgb, var(--color-gray-900) 30%, transparent); }
.slider--none .slider-track { transition: none; }
.slider--fade .slider-track { position: relative; transform: none !important; }
.slider--fade .slide { position: absolute; inset: 0; opacity: 0; }
.slider--fade .slide.is-active { opacity: 1; z-index: 1; transition: opacity 1s ease-in-out; }
.slider--fade .slide.is-leaving { opacity: 1; z-index: 0; }

.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: var(--color-gray-100); border: 1px solid var(--color-gray-300); color: var(--color-gray-800); width: var(--slider-control); height: var(--slider-control); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, color 0.2s; padding: 0; }
.slider-btn:hover { background: var(--color-primary-100); border-color: var(--color-primary-300); color: var(--color-primary-700); }
.slider-btn:disabled { opacity: 0.3; cursor: default; }
.slider-btn::before { font-family: "revicons"; font-size: 15px; line-height: 1; display: block; }
.slider-prev::before { content: "\e824"; }
.slider-next::before { content: "\e825"; }
.slider-prev { left: 0.75rem; }
.slider-next { right: 0.75rem; }

.slider-dots { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; max-width: 100%; }
.slider-dot { position: relative; flex: 0 1 var(--slider-control); width: var(--slider-control); height: var(--slider-control); min-width: 1.25rem; border: none; background: none; cursor: pointer; padding: 0; }
.slider-dot::before { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--color-gray-100) 50%, transparent); transition: background 0.2s; }
.slider-dot[aria-current="true"]::before { background: var(--color-primary-500); }

.slider--vertical .slider-track { flex-direction: column; }
.slider--vertical .slider-btn { top: unset; left: 50%; transform: translateX(-50%); }
.slider--vertical .slider-prev { top: 0.75rem; }
.slider--vertical .slider-next { bottom: 0.75rem; right: unset; }
.slider--vertical .slider-btn::before { transform: rotate(90deg); }
.slider--vertical .slider-dots { bottom: unset; left: unset; transform: translateY(-50%); right: 0; top: 50%; flex-direction: column; }

/* DESIGN.md S9: no slide transition and no fade under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .slider-track,
  .slider--fade .slide.is-active { transition: none; }
}

/* Navigation skins set an explicit width/height on these controls and load
   after this file; min-* still clamps them. DESIGN.md S3.
   The dots are not fixed here: the skins paint them with a border, so growing
   the button grows the visible circle too. That needs a change in the fourteen
   navigation-skins stylesheets, not in this one. */
.slider-btn { min-width: var(--slider-control); min-height: var(--slider-control); }

.top-bar {
    padding: var(--space-2) var(--container-padding, var(--gutter));
}

.top-bar .top-bar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-inline: auto;
    max-width: var(--container-width, 1200px);
}

.top-bar .top-bar-inner .top-bar-content p {
    margin: 0;
}

.top-bar .social-items { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.top-bar .social--icons .social-item { display: inline-flex; align-items: center; justify-content: center; color: var(--social-icon-color, var(--color-text)); }
.top-bar .social-item svg { width: var(--social-icon-size); height: var(--social-icon-size); }
.top-bar .social--icons.social--circle .social-item { width: calc(var(--social-icon-size) + 0.7rem); height: calc(var(--social-icon-size) + 0.7rem); border-radius: 50%; background: var(--social-icon-bg, var(--color-primary-500, currentColor)); color: var(--social-icon-color, var(--color-bg)); }
.top-bar .social-item:hover { opacity: 0.85; }