/*
 * THE COOKIE BAR.
 *
 * One question, two answers, at the foot of the viewport. Not a modal, not an
 * overlay and not a preference centre: it covers nothing, blocks no link and
 * leaves the shop entirely usable while it is on screen.
 *
 * The two buttons are the same height, the same width on every mobile width and
 * the same distance from the reader's hand. Decline is the ghost of the same
 * button rather than a grey link under the fold, there is no pre-selected
 * answer, no countdown and no auto-accept. A choice that is harder to make one
 * way than the other is not a choice.
 *
 * Palette, type, radius and easing are the site's own tokens, so this reads as
 * part of Lomond rather than as a compliance widget bolted on afterwards.
 */
.lf-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  background: var(--lf-ivory);
  border-top: 1px solid var(--lf-line);
  box-shadow: 0 -12px 34px rgba(0, 20, 46, .07);
  animation: lf-consent-in .42s var(--lf-ease) both;
}
@keyframes lf-consent-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lf-consent { animation: none; } }

.lf-consent__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: .95rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.lf-consent__copy { flex: 1 1 auto; min-width: 0; }

.lf-consent__title {
  margin: 0 0 .2rem;
  font-family: var(--lf-serif, inherit);
  font-size: .92rem;
  letter-spacing: .01em;
  color: var(--lf-navy);
}

.lf-consent__text {
  margin: 0;
  max-width: 76ch;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--lf-navy-80);
}
.lf-consent__text a { color: var(--lf-navy); text-underline-offset: 3px; }

.lf-consent__actions { display: flex; gap: .6rem; flex: 0 0 auto; }

.lf-consent__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.35rem;
  font-family: var(--lf-sans); font-size: .74rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--lf-navy); cursor: pointer;
  transition: background .3s var(--lf-ease), color .3s var(--lf-ease);
}
.lf-consent__btn--solid { background: var(--lf-navy); color: #fff; }
.lf-consent__btn--solid:hover { background: var(--lf-navy-80); }
.lf-consent__btn--ghost { background: transparent; color: var(--lf-navy); }
.lf-consent__btn--ghost:hover { background: var(--lf-navy); color: #fff; }

/*
 * BOTH BUTTONS ARE THE SAME SIZE, and this rule is the reason.
 *
 * Sized to their labels, "Decline" came out 102px against "Accept cookies" at
 * 161px on every desktop width — a 60% bigger target for the answer that suits
 * the shop. That is a nudge whether or not it was meant as one, so the shorter
 * label is padded to match rather than the longer one truncated.
 *
 * On mobile they already share the row equally through `flex: 1 1 50%`.
 */
@media (min-width: 781px) {
  .lf-consent__btn { min-width: 10.5rem; }
}

/* Narrow phones: the text above, the two buttons side by side and equal, so
   neither is the easier one to reach. */
@media (max-width: 780px) {
  .lf-consent__inner { flex-direction: column; align-items: stretch; gap: .75rem; padding: .85rem 1.1rem 1rem; }
  .lf-consent__text { font-size: .82rem; }
  .lf-consent__actions { gap: .5rem; }
  .lf-consent__btn { flex: 1 1 50%; padding: 0 .5rem; }
}

/* The footer control that reopens the choice. Typographically a footer link,
   because that is what it is. */
.lf-footer__cookiebtn {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}