/* ==========================================================================
   Hall of Kits Legend Pages: Messi Argentina 2026
   A product page cut from the shirt: celeste and white bands with the knit
   texture, gold numerals with a black keyline, black and gold trims as rules.
   Gold means won, silver means lost. Everything is scoped under .hokl so
   the theme's header, footer and related products stay as they are.
   ========================================================================== */

.hokl {
  --lg-bg: #F4F9FC;
  --lg-surface: #FFFFFF;
  --lg-sunk: #E6F2FA;
  --lg-fg: #0D1B29;
  --lg-muted: #4A5E70;
  --lg-line: #CFE2EF;
  --lg-celeste: #4AAEE3;
  --lg-celeste-ink: #14679A;
  --lg-celeste-soft: #D5ECF8;
  --lg-gold: #C9A13B;
  --lg-gold-ink: #7E5D0E;
  --lg-gold-soft: #F3E6C2;
  --lg-trim: #0B0F14;
  --lg-silver: #8C99A6;
  --lg-silver-ink: #55626E;
  --lg-night: #0A1826;
  --lg-night-2: #112538;
  --lg-night-fg: #E7F1F8;
  --lg-night-muted: #9FB3C4;
  --lg-shadow: 0 18px 40px -24px rgba(13, 40, 66, .35);
  --lg-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --lg-body: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --lg-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --lg-r: 14px;
  --lg-sticky: calc(var(--header-h, 72px) + 20px);

  background: var(--lg-bg);
  color: var(--lg-fg);
  font: 400 16px/1.6 var(--lg-body);
  -webkit-font-smoothing: antialiased;
}

.hokl *, .hokl *::before, .hokl *::after { box-sizing: border-box; }
.hokl img { max-width: 100%; height: auto; display: block; }
.hokl p, .hokl h1, .hokl h2, .hokl h3, .hokl figure, .hokl dl, .hokl dd, .hokl ul { margin: 0; }
.hokl a { color: var(--lg-celeste-ink); }
.hokl :focus-visible { outline: 3px solid var(--lg-celeste); outline-offset: 3px; border-radius: 6px; }

.hokl .lg-h1, .hokl .lg-h2, .hokl h3 {
  font-family: var(--lg-display);
  text-transform: none;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hokl .lg-wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.hokl .lg-eyebrow { font: 600 12px/1.2 var(--lg-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-celeste-ink); }

/* Jersey numeral: gold fill, black keyline, like the printed 10 */
.hokl .lg-gold-num {
  font-family: var(--lg-display);
  font-weight: 900;
  color: var(--lg-gold);
  -webkit-text-stroke: 2px var(--lg-trim);
  paint-order: stroke fill;
  letter-spacing: -.02em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}

/* Trim rule: black / gold / black, from the collar */
.hokl .lg-trim {
  height: 9px;
  border: 0;
  margin: 0;
  background: linear-gradient(var(--lg-trim) 0 3px, var(--lg-gold) 3px 6px, var(--lg-trim) 6px 9px);
}

.hokl .lg-chip {
  display: inline-block;
  font: 600 11px/1 var(--lg-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--lg-trim);
  color: #F4E2A8;
  border: 1px solid var(--lg-gold);
}
.hokl .lg-chip--light { background: var(--lg-surface); color: var(--lg-fg); border-color: var(--lg-line); }
.hokl .lg-chip--silver { background: transparent; color: #D3DCE4; border-color: #6E7C8A; justify-self: start; }

/* ---------- Buttons (ours and WooCommerce's) ---------- */
.hokl .lg-btn,
.hokl .lg-cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 14px 22px;
  border-radius: 12px;
  font: 700 15px/1 var(--lg-display);
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  touch-action: manipulation;
}
.hokl .lg-btn:active,
.hokl .lg-cart .single_add_to_cart_button:active { transform: scale(.98); }
.hokl .lg-btn--primary,
.hokl .lg-cart .single_add_to_cart_button {
  background: var(--lg-trim);
  color: #F6E5B0;
  border-color: var(--lg-gold);
  box-shadow: inset 0 -3px 0 var(--lg-gold);
}
.hokl .lg-btn--primary:hover,
.hokl .lg-cart .single_add_to_cart_button:hover { background: #1A2430; color: #F6E5B0; }
.hokl .lg-btn--ghost { background: transparent; color: var(--lg-fg); border-color: var(--lg-line); font-family: var(--lg-body); font-weight: 600; }
.hokl .lg-btn--ghost:hover { border-color: var(--lg-celeste); }

.hokl .lg-cart form.cart { display: grid; gap: 12px; margin: 0; }
.hokl .lg-cart .quantity,
.hokl .lg-cart .stock { display: none; }
.hokl .lg-cart .single_add_to_cart_button.loading { opacity: .7; }

/* WooCommerce paints .button.alt in its own colour; keep the shirt's black and gold. */
body .hokl .lg-cart form.cart button.single_add_to_cart_button.button.alt {
  background: var(--lg-trim);
  color: #F6E5B0;
  border: 2px solid var(--lg-gold);
  box-shadow: inset 0 -3px 0 var(--lg-gold);
  border-radius: 12px;
  font: 700 15px/1 var(--lg-display);
  text-transform: none;
  width: 100%;
  min-height: 54px;
  padding: 14px 22px;
}
body .hokl .lg-cart form.cart button.single_add_to_cart_button.button.alt:hover,
body .hokl .lg-cart form.cart button.single_add_to_cart_button.button.alt:focus-visible {
  background: #1A2430;
  color: #F6E5B0;
}

/* ---------- Product hero ---------- */
.hokl .lg-product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(20px, 3vw, 40px) clamp(40px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .hokl .lg-product { grid-template-columns: 1fr; } }

.hokl .lg-gallery { display: grid; gap: 12px; min-width: 0; }
.hokl .lg-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--lg-r);
  overflow: hidden;
  border: 1px solid var(--lg-line);
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(74, 174, 227, .1) 7px 9px),
    linear-gradient(90deg, var(--lg-celeste-soft) 0 33%, var(--lg-surface) 33% 67%, var(--lg-celeste-soft) 67%);
}
.hokl .lg-stage img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease; }
.hokl .lg-stage img.is-cover { object-fit: cover; }
.hokl .lg-tag { position: absolute; left: 14px; top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

.hokl .lg-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.hokl .lg-thumbs button {
  padding: 0;
  margin: 0;
  cursor: pointer;
  aspect-ratio: 1;
  min-height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--lg-sunk);
  transition: border-color .2s ease, transform .2s ease;
}
.hokl .lg-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.hokl .lg-thumbs button[aria-pressed="true"] { border-color: var(--lg-gold); }
.hokl .lg-thumbs button:hover { transform: translateY(-2px); }

.hokl .lg-buy { position: sticky; top: var(--lg-sticky); display: grid; gap: 22px; min-width: 0; }
@media (max-width: 900px) { .hokl .lg-buy { position: static; } }

.hokl .lg-kicker { display: flex; flex-wrap: wrap; gap: 8px 14px; font: 600 12px/1.3 var(--lg-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lg-gold-ink); }
.hokl .lg-kicker span + span::before { content: "·"; margin-right: 14px; color: var(--lg-muted); }
.hokl .lg-h1 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; }
.hokl .lg-h1 em { font-style: normal; color: var(--lg-celeste-ink); }
.hokl .lg-lede, .hokl .lg-lede p { font-size: 18px; color: var(--lg-muted); max-width: 52ch; }

.hokl .lg-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; border-block: 1px solid var(--lg-line); }
.hokl .lg-price { font: 700 26px/1 var(--lg-display); font-variant-numeric: tabular-nums; }
.hokl .lg-price del { opacity: .5; font-size: .7em; margin-right: 8px; }
.hokl .lg-price ins { text-decoration: none; }
.hokl .lg-stock { font: 600 13px/1.3 var(--lg-mono); color: var(--lg-gold-ink); display: flex; align-items: center; gap: 8px; }
.hokl .lg-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lg-gold); box-shadow: 0 0 0 4px var(--lg-gold-soft); }
.hokl .lg-stock--sold { color: var(--lg-silver-ink); }
.hokl .lg-stock--sold::before { background: var(--lg-silver); box-shadow: none; }

.hokl .lg-cta { display: grid; gap: 10px; scroll-margin-top: var(--lg-sticky); }

.hokl .lg-auth-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: var(--lg-r); background: var(--lg-surface); border: 1px solid var(--lg-line); }
.hokl .lg-auth-card img { width: 62px; }
.hokl .lg-auth-card strong { display: block; font: 700 15px/1.3 var(--lg-display); margin-bottom: 4px; }
.hokl .lg-auth-card p { font-size: 14px; color: var(--lg-muted); }

.hokl .lg-specs { display: grid; border-top: 1px solid var(--lg-line); }
.hokl .lg-specs div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--lg-line); }
.hokl .lg-specs dt { font: 600 12px/1.5 var(--lg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lg-muted); }
.hokl .lg-specs dd { font-weight: 500; }
@media (max-width: 420px) { .hokl .lg-specs div { grid-template-columns: 1fr; gap: 2px; } }

.hokl .lg-assure { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: var(--lg-muted); }
.hokl .lg-assure span { display: inline-flex; align-items: center; gap: 6px; }
.hokl .lg-assure svg { width: 16px; height: 16px; color: var(--lg-celeste-ink); flex: none; display: inline-block; }

/* ---------- Story band (the shirt pattern) ---------- */
.hokl .lg-band {
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(74, 174, 227, .22) 10px 12px),
    linear-gradient(90deg, var(--lg-celeste) 0 34%, var(--lg-surface) 34% 66%, var(--lg-celeste) 66%);
}
.hokl .lg-band .lg-wrap { padding-block: clamp(56px, 9vw, 110px); }
.hokl .lg-story { max-width: 760px; margin-inline: auto; background: var(--lg-surface); border: 1px solid var(--lg-line); border-radius: 20px; padding: clamp(24px, 5vw, 56px); box-shadow: var(--lg-shadow); }
.hokl .lg-sun { width: 64px; height: 64px; color: var(--lg-gold); margin-bottom: 18px; }
.hokl .lg-story .lg-h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; margin-block: 10px 18px; }
.hokl .lg-story > p:not(.lg-eyebrow) { font-size: 18px; line-height: 1.7; max-width: 62ch; }
.hokl .lg-story > p + p:not(.lg-eyebrow) { margin-top: 16px; }
.hokl .lg-dates { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--lg-line); padding-top: 22px; }
.hokl .lg-dates b { display: block; font: 600 15px/1.3 var(--lg-mono); font-variant-numeric: tabular-nums; }
.hokl .lg-dates small { font: 600 11px/1.3 var(--lg-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lg-muted); }
@media (max-width: 560px) { .hokl .lg-dates { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */
.hokl .lg-section { padding-block: clamp(56px, 8vw, 104px); }
.hokl .lg-sec-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 720px; }
.hokl .lg-sec-head .lg-h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; }
.hokl .lg-sec-head p:not(.lg-eyebrow) { color: var(--lg-muted); font-size: 17px; }

/* ---------- Numbers ---------- */
.hokl .lg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lg-line); }
.hokl .lg-stat { padding: 28px 22px 30px 0; border-bottom: 1px solid var(--lg-line); min-width: 0; }
.hokl .lg-stat .lg-gold-num { font-size: clamp(56px, 8vw, 96px); }
.hokl .lg-stat h3 { font-size: 15px; font-weight: 700; margin-top: 14px; }
.hokl .lg-stat p { font-size: 14px; color: var(--lg-muted); margin-top: 6px; max-width: 34ch; }
@media (max-width: 820px) { .hokl .lg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .hokl .lg-stats { grid-template-columns: 1fr; } }

/* ---------- Finals timeline ---------- */
.hokl .lg-timeline { margin-top: clamp(40px, 6vw, 64px); background: var(--lg-surface); border: 1px solid var(--lg-line); border-radius: var(--lg-r); padding: 22px 22px 18px; }
.hokl .lg-tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hokl .lg-tl-head h3 { font-size: 16px; font-weight: 700; }
.hokl .lg-legend { display: flex; gap: 16px; font: 600 12px/1 var(--lg-mono); color: var(--lg-muted); }
.hokl .lg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hokl .lg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.hokl .lg-dot--won { background: var(--lg-gold); box-shadow: 0 0 0 2px var(--lg-trim); }
.hokl .lg-dot--lost { border: 2px solid var(--lg-silver); }
.hokl .lg-tl-scroll { overflow-x: auto; }
.hokl .lg-tl-scroll svg { width: 100%; height: auto; display: block; max-width: none; }
@media (max-width: 760px) { .hokl .lg-tl-scroll svg { width: 760px; } }

/* ---------- Trophy cabinet ---------- */
.hokl .lg-cabinet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 900px) { .hokl .lg-cabinet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hokl .lg-cabinet { grid-template-columns: 1fr; } }
.hokl .lg-trophy { display: grid; grid-template-rows: auto 1fr; background: var(--lg-surface); border: 1px solid var(--lg-line); border-radius: var(--lg-r); overflow: hidden; min-width: 0; }
.hokl .lg-trophy figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lg-sunk); }
.hokl .lg-trophy figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.hokl .lg-trophy:hover figure img { transform: scale(1.04); }
.hokl .lg-trophy figure::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(transparent, rgba(5, 12, 20, .85)); pointer-events: none; }
.hokl .lg-trophy .lg-year { position: absolute; left: 16px; bottom: 12px; z-index: 1; font-size: clamp(48px, 6vw, 68px); }
.hokl .lg-trophy .lg-won { position: absolute; right: 14px; top: 14px; z-index: 1; }

.hokl .lg-card-body { padding: 18px 18px 20px; display: grid; gap: 10px; align-content: start; }
.hokl .lg-card-body h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
.hokl .lg-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font: 600 14px/1.4 var(--lg-mono); font-variant-numeric: tabular-nums; }
.hokl .lg-score b { font-size: 17px; }
.hokl .lg-meta { font: 500 12px/1.5 var(--lg-mono); color: var(--lg-muted); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hokl .lg-note { font-size: 15px; }

/* ---------- Lost finals: night section, silver ---------- */
.hokl .lg-night { background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 255, 255, .025) 10px 12px), var(--lg-night); color: var(--lg-night-fg); }
.hokl .lg-night .lg-eyebrow { color: var(--lg-silver); }
.hokl .lg-night .lg-sec-head p:not(.lg-eyebrow) { color: var(--lg-night-muted); }
.hokl .lg-losses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.hokl .lg-loss { grid-column: span 2; background: var(--lg-night-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--lg-r); overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.hokl .lg-loss--wide { grid-column: span 3; }
@media (max-width: 900px) {
  .hokl .lg-losses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hokl .lg-loss, .hokl .lg-loss--wide { grid-column: span 1; }
}
@media (max-width: 560px) { .hokl .lg-losses { grid-template-columns: 1fr; } }
.hokl .lg-loss figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0d1a27; }
.hokl .lg-loss--wide figure { aspect-ratio: 16 / 11; }
.hokl .lg-loss figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.05) brightness(.9); transition: filter .5s ease; }
.hokl .lg-loss:hover figure img { filter: grayscale(.2) contrast(1.05); }
.hokl .lg-loss figure::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(3, 8, 14, .8)); pointer-events: none; }
.hokl .lg-loss figure.lg-type { display: grid; place-items: center; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 255, 255, .04) 9px 11px), linear-gradient(90deg, #132a3e 0 33%, #18324a 33% 67%, #132a3e 67%); }
.hokl .lg-loss figure.lg-type::after { display: none; }
.hokl .lg-big { font: 900 clamp(64px, 9vw, 110px)/.9 var(--lg-display); color: transparent; -webkit-text-stroke: 2px var(--lg-silver); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hokl .lg-loss-year { position: absolute; left: 16px; bottom: 12px; z-index: 1; font: 900 clamp(40px, 5vw, 56px)/.9 var(--lg-display); color: #D7DEE5; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.hokl .lg-loss .lg-meta { color: var(--lg-night-muted); }
.hokl .lg-loss .lg-card-body p { font-size: 15px; color: #CBD7E1; }
.hokl .lg-night .lg-score { color: #E3EAF0; }
.hokl .lg-coda { margin-top: clamp(32px, 5vw, 52px); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; max-width: 820px; }
.hokl .lg-coda .lg-gold-num { font-size: clamp(56px, 8vw, 88px); -webkit-text-stroke-color: #000; }
.hokl .lg-coda p { font-size: 18px; line-height: 1.6; color: var(--lg-night-fg); }

/* ---------- Details ---------- */
.hokl .lg-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 700px) { .hokl .lg-details { grid-template-columns: 1fr; } }
.hokl .lg-detail { border-radius: var(--lg-r); overflow: hidden; background: var(--lg-surface); border: 1px solid var(--lg-line); }
.hokl .lg-detail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hokl .lg-detail figcaption { padding: 14px 16px; display: grid; gap: 4px; }
.hokl .lg-detail figcaption b { font: 700 15px/1.3 var(--lg-display); }
.hokl .lg-detail figcaption span { font-size: 14px; color: var(--lg-muted); }

/* ---------- Authentication ---------- */
.hokl .lg-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .hokl .lg-auth { grid-template-columns: 1fr; } }
.hokl #lg-authentication { scroll-margin-top: var(--lg-sticky); }
.hokl .lg-auth-copy { display: grid; gap: 18px; }
.hokl .lg-badge-row { display: flex; gap: 16px; align-items: center; }
.hokl .lg-badge-row img { width: 84px; }
.hokl .lg-auth-copy .lg-h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; }
.hokl .lg-auth-copy > p { color: var(--lg-muted); font-size: 17px; }
.hokl .lg-checks { list-style: none; padding: 0; display: grid; gap: 12px; }
.hokl .lg-checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.hokl .lg-checks svg { width: 22px; height: 22px; color: var(--lg-gold-ink); margin-top: 2px; }
.hokl .lg-notice { border: 1px dashed var(--lg-gold); background: var(--lg-gold-soft); border-radius: 12px; padding: 16px 18px; font-size: 14px; }
.hokl .lg-notice b { font: 600 12px/1.4 var(--lg-mono); letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 6px; color: var(--lg-gold-ink); }
.hokl .lg-notice a { text-decoration: underline; }
.hokl .lg-auth-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hokl .lg-auth-photos figure { border-radius: var(--lg-r); overflow: hidden; border: 1px solid var(--lg-line); background: var(--lg-surface); }
.hokl .lg-auth-photos figure:first-child { grid-column: 1 / -1; }
.hokl .lg-auth-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hokl .lg-auth-photos img.lg-contain { object-fit: contain; background: var(--lg-sunk); }
.hokl .lg-auth-photos figure:first-child img { aspect-ratio: 16 / 11; object-position: 50% 70%; }
.hokl .lg-auth-photos figcaption { font: 500 12px/1.4 var(--lg-mono); color: var(--lg-muted); padding: 10px 12px; }

/* ---------- Service + closing ---------- */
.hokl .lg-service-wrap { padding-bottom: 8px; }
.hokl .lg-service { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lg-line); }
.hokl .lg-service > div { padding: 24px 24px 24px 0; min-width: 0; }
.hokl .lg-service > div + div { padding-left: 24px; border-left: 1px solid var(--lg-line); }
.hokl .lg-service h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.hokl .lg-service p { font-size: 15px; color: var(--lg-muted); }
@media (max-width: 760px) {
  .hokl .lg-service { grid-template-columns: 1fr; }
  .hokl .lg-service > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--lg-line); }
}
.hokl .lg-email { font-family: var(--lg-mono); color: var(--lg-fg); user-select: all; overflow-wrap: anywhere; }
.hokl .lg-closing { text-align: center; display: grid; gap: 18px; justify-items: center; padding-block: clamp(56px, 8vw, 96px); }
.hokl .lg-closing .lg-gold-num { font-size: clamp(88px, 16vw, 180px); }
.hokl .lg-closing .lg-h2 { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; max-width: 20ch; }
.hokl .lg-closing p { color: var(--lg-muted); max-width: 52ch; }
.hokl .lg-closing .lg-btn { width: auto; }

/* ---------- Mobile buy bar ---------- */
.hokl .lg-mbar { display: none; }
@media (max-width: 900px) {
  .hokl .lg-mbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--lg-surface);
    border-top: 1px solid var(--lg-line);
    box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .4);
    transform: translateY(0);
    transition: transform .25s ease;
  }
  .hokl .lg-mbar.is-hidden { transform: translateY(110%); }
  .hokl .lg-mbar-t { font: 700 13px/1.25 var(--lg-display); min-width: 0; }
  .hokl .lg-mbar-t small { display: block; font: 500 12px/1.3 var(--lg-mono); color: var(--lg-muted); }
  .hokl .lg-mbar .lg-btn { width: auto; min-height: 48px; padding: 12px 18px; flex: none; }
  body.hokl-page { padding-bottom: 84px; }
}

/* Entrance lift: content is visible at rest, motion only adds a lift */
@media (prefers-reduced-motion: no-preference) {
  .hokl .lg-rise { animation: hokl-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hokl .lg-d1 { animation-delay: .08s; }
  @keyframes hokl-rise { from { transform: translateY(14px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .hokl *, .hokl *::before, .hokl *::after { transition: none !important; animation: none !important; }
}