/* ==========================================================================
   WCLOCKS — Header, footer and page chrome
   Header reproduces Focal's header-group; footer ports wcl-footer.liquid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ANNOUNCEMENT BAR — Focal: #000000 ground, #ffffff text, small, non-sticky
   -------------------------------------------------------------------------- */

.wcl-announce {
  background: rgb(var(--announcement-background));
  color: rgb(var(--announcement-text-color));
}
.wcl-announce-inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 9px var(--container-gutter);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   HEADER — logo left, nav centre, icons right; sticky
   -------------------------------------------------------------------------- */

.wcl-hd {
  position: sticky; top: 0; z-index: 90;
  background: rgb(var(--header-background));
  color: rgb(var(--header-text-color));
  border-bottom: 1px solid rgb(var(--border-color));
  transition: box-shadow 0.3s ease;
}
.wcl-hd.is-stuck { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.07); }

.wcl-hd-inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.wcl-hd-brand { justify-self: start; display: flex; align-items: center; }
.wcl-hd-brand img,
.wcl-hd-brand .custom-logo { max-width: 165px; height: auto; display: block; }

.wcl-hd-wordmark {
  font-family: var(--heading-font-family);
  font-size: 20px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  color: rgb(var(--header-text-color));
}

/* ---- primary navigation + mega-menu ---- */

.wcl-hd-nav { justify-self: center; }

.wcl-hd-menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.wcl-hd-menu > li { position: relative; }
.wcl-hd-menu a {
  display: inline-block; padding: 27px 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; text-decoration: none;
  color: rgb(var(--header-text-color));
  white-space: nowrap;
  transition: color 0.2s ease;
}
.wcl-hd-menu a:hover,
.wcl-hd-menu .current-menu-item > a { color: var(--wcl-gold); }

/* Gold underline that grows from the centre on hover */
.wcl-hd-menu > li > a::after {
  content: ''; display: block; height: 1.5px; width: 0;
  background: var(--wcl-gold); margin: 4px auto 0;
  transition: width 0.25s ease;
}
.wcl-hd-menu > li:hover > a::after,
.wcl-hd-menu > li.current-menu-item > a::after { width: 100%; }

.wcl-hd-menu .sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 230px; padding: 14px 0; margin: 0; list-style: none;
  background: rgb(var(--background));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--block-border-radius-reduced);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.10);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 5;
}
.wcl-hd-menu > li:hover > .sub-menu,
.wcl-hd-menu > li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.wcl-hd-menu .sub-menu a {
  display: block; padding: 9px 22px; text-transform: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0;
}
.wcl-hd-menu .sub-menu a::after { display: none; }
.wcl-hd-menu .sub-menu a:hover { background: var(--wcl-cream); color: var(--wcl-gold); }

/* ---- icons ---- */

.wcl-hd-icons { justify-self: end; display: flex; align-items: center; gap: 6px; }

.wcl-hd-icon {
  position: relative;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgb(var(--header-text-color));
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.wcl-hd-icon:hover { background: var(--wcl-cream); color: var(--wcl-gold); }
.wcl-hd-icon svg { width: 21px; height: 21px; stroke-width: var(--icon-stroke-width); }

.wcl-hd-cart-count {
  position: absolute; top: 4px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--wcl-gold); color: #0a0a0a;
  font-size: 10px; font-weight: 700; line-height: 17px;
  text-align: center; border-radius: 999px;
}
.wcl-hd-cart-count.is-empty { display: none; }

/* ---- burger ---- */

.wcl-hd-burger {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 0; padding: 10px; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.wcl-hd-burger span {
  display: block; height: 1.5px; width: 100%;
  background: rgb(var(--header-text-color));
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.wcl-hd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.wcl-hd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wcl-hd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* ---- search drawer ---- */

.wcl-search { border-top: 1px solid rgb(var(--border-color)); background: rgb(var(--background)); }
.wcl-search-form {
  max-width: 720px; margin: 0 auto;
  padding: 22px var(--container-gutter);
  display: flex; gap: 10px;
}
.wcl-search-form input[type="search"] { flex: 1; }

/* ---- mobile nav drawer ----
   Port of `snippets/mobile-menu.liquid`. Not Focal's stock drawer: wclocks.com
   overrides it with this dark panel, and the overrides are what ships.
   -------------------------------------------------------------------------- */

.wcl-mnav { --mnav-gold: #C4A055; position: fixed; inset: 0; z-index: 190; }
.wcl-mnav[hidden] { display: none; }

.wcl-mnav-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
  opacity: 0; transition: opacity 0.3s ease;
}
.wcl-mnav.is-open .wcl-mnav-overlay { opacity: 1; }

.wcl-mnav-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(400px, 88vw);
  /* dvh so the panel ends at the visible bottom on mobile, not underneath the
     browser's collapsing address bar — where the footer row was landing. */
  height: 100%; height: 100dvh; max-height: 100%; max-height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #0B0B0B; color: #f3f1ec;
  transform: translateX(-100%); transition: transform 0.34s cubic-bezier(0.3, 0.8, 0.3, 1);
  box-shadow: 12px 0 44px rgba(0,0,0,0.4);
}
.wcl-mnav.is-open .wcl-mnav-panel { transform: none; }

/* ---- header ---- */

.wcl-mnav-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wcl-mnav-logo { display: flex; align-items: center; min-width: 0; }
.wcl-mnav-logo img {
  display: block; width: auto; max-width: 150px; height: auto; max-height: 34px; object-fit: contain;
  /*
   * The dark-surface logo is a JPEG — solid black behind the gold, no alpha.
   * The panel is #0B0B0B, so that black would read as a visible box. `screen`
   * blending maps black to the backdrop and leaves the gold alone. Browsers
   * without it show a near-black rectangle on near-black: barely a seam.
   */
  mix-blend-mode: screen;
}

.wcl-mnav-brand {
  font-size: 20px; font-weight: 900; letter-spacing: 0.18em; line-height: 1; text-decoration: none;
  /* Solid gold first: if background-clip:text is unavailable the wordmark is
     still legible instead of transparent-on-black. */
  color: #E3C77E;
  background: linear-gradient(180deg, #F0DFA8 0%, #C9A04E 55%, #9C7A33 100%);
  -webkit-background-clip: text; background-clip: text;
}
@supports (-webkit-text-fill-color: transparent) {
  .wcl-mnav-brand { -webkit-text-fill-color: transparent; }
}
.wcl-mnav-close {
  width: 40px; height: 40px; min-width: 40px; margin: 0; padding: 0; cursor: pointer;
  color: #fff; background: none; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s, color 0.25s;
}
.wcl-mnav-close:hover { border-color: var(--mnav-gold); color: var(--mnav-gold); }

/* ---- scrolling body ---- */

.wcl-mnav-content {
  /*
   * min-height: 0 is load-bearing. A flex item defaults to min-height:auto,
   * which refuses to shrink below its content — so this box grew to the full
   * height of the menu, pushed the CTA, social row, contact line and footer
   * past the bottom of the screen, and never scrolled, because it was never
   * shorter than what was inside it. That is why they looked "missing".
   */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0 0;
  scrollbar-width: thin; scrollbar-color: #C4A055 rgba(255,255,255,0.06);
  -webkit-overflow-scrolling: touch;
}
.wcl-mnav-content::-webkit-scrollbar { width: 6px; }
.wcl-mnav-content::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; margin: 6px 0; }
.wcl-mnav-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(180deg, #EBD79C 0%, #C4A055 50%, #9C7A33 100%);
}
.wcl-mnav-content::-webkit-scrollbar-thumb:hover { background: #d0ac5f; }

/* ---- items ---- */

.wcl-mnav-list { list-style: none; margin: 0; padding: 0; }
.wcl-mnav-item[data-level="1"] { border-bottom: 1px solid rgba(255,255,255,0.06); }
.wcl-mnav-item[data-level="2"],
.wcl-mnav-item[data-level="3"] { border: 0; }

.wcl-mnav-item[data-level="1"] > .wcl-mnav-link {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0;
  padding: 14px 20px; cursor: pointer; text-align: left; text-decoration: none;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
  color: #f3f1ec; background: transparent; border: 0;
  transition: background 0.2s, color 0.2s;
}
.wcl-mnav-item[data-level="1"] > .wcl-mnav-link:hover,
.wcl-mnav-item[data-level="1"] > .wcl-mnav-link[aria-expanded="true"] {
  background: rgba(196,160,85,0.08); color: var(--mnav-gold);
}

.wcl-mnav-ic {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  background: rgba(196,160,85,0.1); border: 1px solid rgba(196,160,85,0.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--mnav-gold); transition: background 0.2s, transform 0.2s;
}
.wcl-mnav-item[data-level="1"] > .wcl-mnav-link:hover .wcl-mnav-ic {
  background: rgba(196,160,85,0.2); transform: translateY(-1px);
}
.wcl-mnav-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.wcl-mnav-label { flex: 1 1 auto; text-align: left; }

.wcl-mnav-chev {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  color: rgba(255,255,255,0.5); transition: transform 0.3s ease, color 0.25s;
}
.wcl-mnav-chev svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wcl-mnav-link[aria-expanded="true"] .wcl-mnav-chev { transform: rotate(180deg); color: var(--mnav-gold); }

/* Sub-levels. The gold hairline is the left border on the nested list. */
.wcl-mnav-collapse { background: rgba(255,255,255,0.02); overflow: hidden; }
.wcl-mnav-collapse[hidden] { display: none; }
.wcl-mnav-collapse > .wcl-mnav-list {
  padding: 4px 0 8px 30px; margin-left: 36px;
  border-left: 1px solid rgba(196,160,85,0.22);
}
.wcl-mnav-item[data-level="2"] > .wcl-mnav-link,
.wcl-mnav-item[data-level="3"] > .wcl-mnav-link {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0;
  padding: 11px 16px; cursor: pointer; text-align: left; text-decoration: none;
  font-family: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: rgba(255,255,255,0.72); background: transparent; border: 0;
  transition: color 0.2s;
}
.wcl-mnav-item[data-level="2"] > .wcl-mnav-link:hover,
.wcl-mnav-item[data-level="3"] > .wcl-mnav-link:hover { color: var(--mnav-gold); }

/* ---- CTA, socials, contact ---- */

.wcl-mnav-extra { padding: 20px 20px 24px; }
.wcl-mnav-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; background: var(--mnav-gold); color: #0a0a0a; border-radius: 4px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: background 0.25s;
}
.wcl-mnav-cta:hover { background: #d0ac5f; }
.wcl-mnav-cta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.wcl-mnav-social { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.wcl-mnav-soc {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.72);
  transition: color 0.25s, border-color 0.25s, transform 0.25s;
}
.wcl-mnav-soc:hover { color: var(--mnav-gold); border-color: var(--mnav-gold); transform: translateY(-2px); }
.wcl-mnav-soc svg { width: 16px; height: 16px; fill: currentColor; }

.wcl-mnav-contact {
  display: block; text-align: center; margin-top: 15px;
  color: rgba(255,255,255,0.5); font-size: 12.5px; text-decoration: none;
}
.wcl-mnav-contact:hover { color: var(--mnav-gold); }

/* ---- footer ---- */

.wcl-mnav-foot {
  flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 18px 13px;
}
.wcl-mnav-foot-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: rgba(255,255,255,0.82); text-decoration: none;
}
.wcl-mnav-foot-link:hover { color: var(--mnav-gold); }
.wcl-mnav-lang select {
  padding: 8px 12px; font-family: inherit; font-size: 12.5px;
  color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 8px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.wcl-mnav-lang select:hover { border-color: var(--mnav-gold); color: var(--mnav-gold); }

@media (max-width: 1100px) {
  .wcl-hd-nav { display: none; }
  .wcl-hd-burger { display: flex; }
  .wcl-hd-inner { grid-template-columns: auto 1fr auto; height: 66px; }
  .wcl-hd-brand { justify-self: center; }
  .wcl-hd-brand img, .wcl-hd-brand .custom-logo { max-width: 115px; }  /* Focal mobile_logo_max_width */
}
@media (min-width: 1101px) {
  .wcl-mnav { display: none !important; }
}

/* ---- small phones ----
   Below ~400px the icon + label + chevron row runs out of width, so the
   gutters, icon and type all step down together rather than wrapping. */
@media (max-width: 420px) {
  .wcl-mnav-panel { width: 90vw; }
  .wcl-mnav-head { padding: 13px 16px; }
  .wcl-mnav-logo img { max-width: 128px; max-height: 30px; }
  .wcl-mnav-brand { font-size: 17px; letter-spacing: 0.15em; }
  .wcl-mnav-close { width: 36px; height: 36px; min-width: 36px; }

  .wcl-mnav-item[data-level="1"] > .wcl-mnav-link { padding: 13px 16px; gap: 11px; font-size: 14.5px; }
  .wcl-mnav-ic { width: 32px; height: 32px; }
  .wcl-mnav-ic svg { width: 15px; height: 15px; }
  .wcl-mnav-collapse > .wcl-mnav-list { padding-left: 20px; margin-left: 26px; }
  .wcl-mnav-item[data-level="2"] > .wcl-mnav-link,
  .wcl-mnav-item[data-level="3"] > .wcl-mnav-link { padding: 10px 12px; font-size: 13px; }

  .wcl-mnav-extra { padding: 16px 16px 20px; }
  .wcl-mnav-cta { padding: 13px 16px; font-size: 11.5px; letter-spacing: 0.1em; }
  .wcl-mnav-social { gap: 8px; }
  .wcl-mnav-soc { width: 34px; height: 34px; }
  .wcl-mnav-foot { padding: 10px 14px 12px; }
}

/* Long labels must never widen the panel into a horizontal scroll. */
.wcl-mnav-label { min-width: 0; overflow-wrap: break-word; }

/* Landscape phones: the header and footer stay put, the list scrolls. */
@media (max-height: 480px) {
  .wcl-mnav-item[data-level="1"] > .wcl-mnav-link { padding-top: 11px; padding-bottom: 11px; }
  .wcl-mnav-extra { padding-top: 14px; }
  .wcl-mnav-social { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wcl-mnav-panel, .wcl-mnav-overlay { transition: none; }
}

/* --------------------------------------------------------------------------
   FOOTER  (wcl-footer.liquid)
   -------------------------------------------------------------------------- */

.wcl-ft { background: #070707; color: #fff; padding: 74px 24px 0; }

.wcl-ft-top {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 50px;
  padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,0.09);
}

/* Dark-surface logo. Same `screen` blend as the drawer — see the note there. */
.wcl-ft-logo { display: inline-block; margin: 0 0 18px; line-height: 0; }
.wcl-ft-logo img {
  display: block; width: auto; max-width: 190px; height: auto; max-height: 44px;
  object-fit: contain; mix-blend-mode: screen;
}

/* Fallback gold-gradient wordmark, used when no logo is uploaded */
.wcl-ft-logo-text {
  font-size: 30px; font-weight: 900; letter-spacing: 0.16em;
  background: linear-gradient(180deg, #F0DFA8 0%, #C9A04E 46%, #9C7A33 72%, #E6CE84 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-decoration: none; display: inline-block; margin: 0 0 18px; line-height: 1;
  font-family: var(--heading-font-family);
}

.wcl-ft-tagline { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.55); margin: 0 0 22px; max-width: 330px; }

.wcl-ft-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.wcl-ft-soc {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.72);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.wcl-ft-soc:hover { color: var(--wcl-gold); border-color: var(--wcl-gold); transform: translateY(-2px); }
.wcl-ft-soc svg { width: 17px; height: 17px; fill: currentColor; }

.wcl-ft-trust { margin-top: 4px; }
.wcl-ft-trust img { max-width: 125px; height: auto; }

.wcl-ft-col-title {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wcl-gold); font-weight: 700; margin: 0 0 20px;
}

.wcl-ft-links { list-style: none; margin: 0; padding: 0; }
.wcl-ft-links li { margin-bottom: 12px; }
.wcl-ft-links a {
  color: rgba(255,255,255,0.62); text-decoration: none; font-size: 14px;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.wcl-ft-links a:hover { color: var(--wcl-gold); padding-left: 5px; }

.wcl-ft-contact p { font-size: 14px; color: rgba(255,255,255,0.62); margin: 0 0 9px; line-height: 1.6; }
.wcl-ft-contact a {
  color: rgba(255,255,255,0.85); text-decoration: none;
  border-bottom: 1px solid rgba(196,160,85,0.45);
  transition: color 0.2s ease;
}
.wcl-ft-contact a:hover { color: var(--wcl-gold); }

.wcl-ft-news-text { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0 0 14px; }
.wcl-ft-news { display: flex; max-width: 360px; }
.wcl-ft-news input {
  flex: 1; min-width: 0; height: 50px; padding: 0 15px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16); border-right: 0;
  color: #fff; font-size: 14px; border-radius: 4px 0 0 4px; outline: none;
  transition: border-color 0.2s ease;
}
.wcl-ft-news input:focus { border-color: var(--wcl-gold); }
.wcl-ft-news input::placeholder { color: rgba(255,255,255,0.4); }
.wcl-ft-news button {
  height: 50px; padding: 0 24px; border: 0; cursor: pointer;
  background: var(--wcl-gold); color: #0a0a0a;
  font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 0 4px 4px 0; transition: background 0.25s ease;
}
.wcl-ft-news button:hover { background: var(--wcl-gold-hover); }

.wcl-ft-bottom {
  max-width: 1240px; margin: 0 auto; padding: 22px 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 22px; flex-wrap: wrap;
}
.wcl-ft-copy { font-size: 12.5px; color: rgba(255,255,255,0.55); }
.wcl-ft-pay  { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.wcl-ft-pay-name { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); }

@media (max-width: 900px) {
  .wcl-ft-top { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .wcl-ft-brandcol, .wcl-ft-newscol { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wcl-ft { padding: 54px 20px 0; }
  .wcl-ft-top { grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
  .wcl-ft-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .wcl-ft-news { max-width: none; }
}

/* --------------------------------------------------------------------------
   PAGES, POSTS, 404
   -------------------------------------------------------------------------- */

.wcl-page { max-width: 860px; }
.wcl-page-head { margin-bottom: 34px; }
.wcl-page-title { font-size: var(--heading-h2-font-size); margin: 0 0 10px; }
.wcl-page-hero { margin-bottom: 32px; border-radius: var(--block-border-radius); overflow: hidden; }
.wcl-page-body { font-size: 15px; line-height: 1.8; }
.wcl-page-body h2 { font-size: var(--heading-h4-font-size); margin-top: 38px; }
.wcl-page-body h3, .wcl-page-body h4 { font-size: var(--heading-h6-font-size); margin-top: 28px; }
.wcl-page-body ul, .wcl-page-body ol { padding-left: 22px; }
.wcl-page-body li { margin-bottom: 8px; }
.wcl-page-body a { color: var(--wcl-gold); }

.wcl-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 24px; margin-top: 34px; }
.wcl-post-card-link { text-decoration: none; display: block; }
.wcl-post-card-media { aspect-ratio: 3 / 2; border-radius: var(--block-border-radius); overflow: hidden; background: var(--wcl-cream); }
.wcl-post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.wcl-post-card:hover .wcl-post-card-media img { transform: scale(1.05); }
.wcl-post-card-body { padding-top: 16px; }
.wcl-post-card-date { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wcl-ink-soft); }
.wcl-post-card-title { font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; margin: 8px 0; color: var(--wcl-ink); line-height: 1.35; }
.wcl-post-card:hover .wcl-post-card-title { color: var(--wcl-gold); }
.wcl-post-card-excerpt { font-size: 13.5px; color: var(--wcl-ink-soft); margin: 0; }

.wcl-pagination { margin-top: 48px; }
.wcl-pagination .page-numbers { display: inline-block; padding: 8px 14px; text-decoration: none; font-size: 13px; }
.wcl-pagination .page-numbers.current { color: var(--wcl-gold); font-weight: 700; }

.wcl-404 { max-width: 620px; text-align: center; margin: 0 auto; padding-block: 120px; }
.wcl-404 .wcl-search-form { padding-inline: 0; }

@media (max-width: 900px) { .wcl-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wcl-post-grid { grid-template-columns: 1fr; } }