/* ==========================================================================
   ODIN Works Configurator
   Every rule is scoped under .odin-cfg so a WordPress theme or Elementor global
   style cannot leak in, and this file cannot leak out.
   ========================================================================== */

.odin-cfg {
  /* Override these from the theme to rebrand without touching this file. */
  --ocfg-bg: #0e0f11;
  --ocfg-panel: #17191c;
  --ocfg-panel-2: #1e2125;
  --ocfg-border: #2a2e34;
  --ocfg-border-strong: #3a4048;
  --ocfg-text: #f4f6f8;

  /* Secondary and tertiary text. These were #9aa3ad and #6b747e; the faint one
     measured 3.71:1 against the panel, which is below the 4.5:1 needed for body
     text — and it is used for step values, spec labels and hints, i.e. the
     things people actually read while deciding what to buy. Both are lifted:
     10.84:1 and 6.87:1. */
  --ocfg-text-dim: #c3ccd6;
  --ocfg-text-faint: #98a3ae;

  /* ODIN Works green. Every accented thing in the interface — selected options,
     buttons, focus rings, progress, step numbers — resolves to these three, so
     a rebrand is three values and nothing else. 8.62:1 on panel, and the dark
     on-accent text is 9.28:1 on the green itself. */
  --ocfg-accent: #8dc63f;
  --ocfg-accent-hover: #a3d95a;
  --ocfg-accent-text: #0e1206;

  /* A dimmed accent for large translucent fills — selected-option backgrounds
     and the like — where the full-strength green would shout. */
  --ocfg-accent-soft: rgba(141, 198, 63, 0.14);
  --ocfg-accent-line: rgba(141, 198, 63, 0.45);

  /* Tint / hairline / text for each role's notice surface. These were hardcoded
     rgba() literals down in the rules, which meant they silently kept the OLD
     success and error colours after those were retuned — two colours claiming to
     be the same thing and disagreeing. Everything routes through here now. */
  --ocfg-success-soft: rgba(75, 178, 137, 0.12);
  --ocfg-success-line: rgba(75, 178, 137, 0.5);
  --ocfg-success-text: #8ad9bb;
  --ocfg-warn-soft:    rgba(208, 160, 44, 0.1);
  --ocfg-warn-line:    rgba(208, 160, 44, 0.45);
  --ocfg-warn-text:    #e6c778;
  --ocfg-error-soft:   rgba(224, 115, 106, 0.12);
  --ocfg-error-line:   rgba(224, 115, 106, 0.5);
  --ocfg-error-text:   #f2b0a9;
  --ocfg-success: #4bb289;

  /* Amber is kept for GENUINE warnings — a caution that reads as brand-green
     stops being a caution. Nothing customer-facing uses it today; the two
     places that did were development chrome, which now uses the accent. */
  --ocfg-warn: #d0a02c;
  /* Was #cf5b52, which measured 4.06:1 on panel-2 — below AA body, and error
     text is the last thing that should be hard to read. Now 5.26:1. */
  --ocfg-error: #e0736a;
  --ocfg-radius: 6px;
  --ocfg-radius-sm: 4px;
  --ocfg-gap: 20px;
  /* The preview stage is deliberately LIGHT while the rest of the interface is
     dark. Every part ODIN makes is near-black anodised aluminium, and a black
     rifle on a near-black stage is the one combination guaranteed to hide the
     product. A pale studio sweep is what a product photographer would put behind
     it, and it is what makes the silhouette and the finishes read. */
  --ocfg-stage-bg: radial-gradient(ellipse 90% 120% at 50% 42%, #f4f6f8 0%, #d3d8dd 62%, #bcc3ca 100%);

  box-sizing: border-box;
  color: var(--ocfg-text);
  background: var(--ocfg-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  container-type: inline-size;
}

.odin-cfg *,
.odin-cfg *::before,
.odin-cfg *::after {
  box-sizing: inherit;
}

.odin-cfg [x-cloak] {
  display: none !important;
}

/* --- layout --------------------------------------------------------------- */

.odin-cfg__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  gap: var(--ocfg-gap);
  padding: var(--ocfg-gap);
  align-items: start;
}

@container (max-width: 900px) {
  .odin-cfg__shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fallback for browsers without container queries. */
@media (max-width: 900px) {
  .odin-cfg__shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

.odin-cfg__left {
  display: flex;
  flex-direction: column;
  gap: var(--ocfg-gap);
  position: sticky;
  top: 16px;
}

@media (max-width: 900px) {
  .odin-cfg__left {
    position: static;
  }
}

.odin-cfg__right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* --- stage / layered preview --------------------------------------------- */

/* --- presentation FX -------------------------------------------------------
   Applied to the COMPOSITE, never to individual layers.

   This matters architecturally. Enhancing each layer separately — in Photoshop
   or with an AI upscaler — shifts edges by a few pixels per part, and each part
   drifts differently, which destroys the shared datum the whole system rests on.
   It also gives every part its own interpretation of light, so nine layers stop
   looking like one photograph.

   Applying the effect after compositing avoids both problems by construction:
   the source PNGs are never touched, and every configuration gets exactly the
   same treatment. Toggled from settings.presentation in catalog.json.
   -------------------------------------------------------------------------- */

.odin-cfg__stage-wrap {
  position: relative;
  background: var(--ocfg-stage-bg);
  border: 1px solid var(--ocfg-border);
  border-radius: var(--ocfg-radius);
  overflow: hidden;
  isolation: isolate;
}

/* Vignette. On the old dark stage this ADDED light to the centre; on a light
   stage that reads as a grey smudge, so it darkens the corners instead. Same
   intent either way — pull the eye to the middle — opposite implementation. */
.odin-cfg__stage-wrap.fx-vignette::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 78% 92% at 50% 44%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 55%,
    rgba(22, 30, 38, 0.10) 100%
  );
  pointer-events: none;
}

/* Soft contact shadow so the rifle is grounded, not floating. */
.odin-cfg__stage-wrap.fx-ground::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 14%;
  bottom: 7%;
  height: 5%;
  z-index: 0;
  border-radius: 50%;
  background: rgba(24, 30, 36, 0.28);
  filter: blur(24px);
  pointer-events: none;
}

.odin-cfg__stage-wrap .odin-cfg__stage {
  position: relative;
  z-index: 1;
}

/*
 * ONE drop shadow for the entire assembled silhouette.
 * A CSS filter applies to an element's rendered output including its
 * descendants, so this shadows the composited stack as a single shape. Putting
 * the same filter on each <img> would instead cast every layer's shadow onto
 * the layer in front of it, which looks broken.
 */
.odin-cfg__stage-wrap.fx-shadow .odin-cfg__stage {
  filter: drop-shadow(-4px 10px 14px rgba(20, 26, 32, 0.28));
}

/* Gentle tonal lift. Subtle on purpose — this should read as good lighting,
   not as a filter. */
.odin-cfg__stage-wrap.fx-tone .odin-cfg__stage {
  filter: drop-shadow(-4px 10px 14px rgba(20, 26, 32, 0.28)) saturate(1.04) contrast(1.03);
}

@media (prefers-reduced-motion: no-preference) {
  .odin-cfg__stage-wrap .odin-cfg__stage {
    transition: filter 200ms ease-out;
  }
}

.odin-cfg__stage {
  position: relative;
  width: 100%;
  /* Fallback only. The renderer overrides this at runtime from
     settings.canvas.aspectRatio in catalog.json, so changing the canvas is a
     data edit. Keep this value in sync to avoid a layout jump on first paint. */
  aspect-ratio: 2964 / 572;
  display: block;
}

.odin-cfg__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 140ms ease-out;
  pointer-events: none;
  /* Layers are decorative; the spec table carries the real information. */
  user-select: none;
}

.odin-cfg__layer.is-visible {
  opacity: 1;
}

.odin-cfg__layer.is-missing {
  display: none;
}

.odin-cfg__stage-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  color: var(--ocfg-text-faint);
  font-size: 14px;
  padding: 24px;
}

.odin-cfg__stage-empty strong {
  color: var(--ocfg-text-dim);
  font-weight: 600;
}

/* --- progress ------------------------------------------------------------- */

.odin-cfg__progress {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ocfg-text-dim);
}

.odin-cfg__progress-track {
  flex: 1;
  height: 4px;
  background: var(--ocfg-border);
  border-radius: 999px;
  overflow: hidden;
}

.odin-cfg__progress-fill {
  height: 100%;
  background: var(--ocfg-accent);
  transition: width 200ms ease-out;
}

/* --- steps (accordion) ---------------------------------------------------- */

.odin-cfg__step {
  border: 1px solid var(--ocfg-border);
  border-radius: var(--ocfg-radius);
  background: var(--ocfg-panel);
  overflow: hidden;
}

.odin-cfg__step.is-open {
  border-color: var(--ocfg-border-strong);
}

.odin-cfg__step.is-locked {
  opacity: 0.5;
}

.odin-cfg__step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.odin-cfg__step.is-locked .odin-cfg__step-header {
  cursor: not-allowed;
}

.odin-cfg__step-header:hover:not(:disabled) {
  background: var(--ocfg-panel-2);
}

.odin-cfg__step-index {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--ocfg-border-strong);
  display: grid;
  place-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ocfg-text-faint);
}

.odin-cfg__step.is-done .odin-cfg__step-index {
  background: var(--ocfg-accent);
  border-color: var(--ocfg-accent);
  color: var(--ocfg-accent-text);
}

.odin-cfg__step-titles {
  flex: 1;
  min-width: 0;
}

.odin-cfg__step-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ocfg-text-faint);
  font-weight: 700;
}

.odin-cfg__step-value {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ocfg-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.odin-cfg__step-value.is-empty {
  color: var(--ocfg-text-faint);
  font-weight: 400;
}

.odin-cfg__step-caret {
  flex: 0 0 auto;
  color: var(--ocfg-text-faint);
  transition: transform 160ms ease;
}

.odin-cfg__step.is-open .odin-cfg__step-caret {
  transform: rotate(180deg);
}

.odin-cfg__step-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--ocfg-border);
}

.odin-cfg__step-help {
  font-size: 13px;
  color: var(--ocfg-text-dim);
  margin: 10px 0 12px;
}

/* --- options -------------------------------------------------------------- */

.odin-cfg__options {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.odin-cfg__options.is-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.odin-cfg__options.is-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.odin-cfg__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--ocfg-panel-2);
  border: 1px solid var(--ocfg-border);
  border-radius: var(--ocfg-radius-sm);
  color: var(--ocfg-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.odin-cfg__option:hover {
  border-color: var(--ocfg-border-strong);
  background: #232730;
}

.odin-cfg__option[aria-checked="true"],
.odin-cfg__option[aria-pressed="true"] {
  border-color: var(--ocfg-accent);
  background: var(--ocfg-accent-soft);
}

.odin-cfg__option-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.odin-cfg__option-price {
  font-size: 13px;
  color: var(--ocfg-text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.odin-cfg__option[aria-checked="true"] .odin-cfg__option-price {
  color: var(--ocfg-text);
}

/* Compact centred variant for facets like lengths and calibers. */
.odin-cfg__options.is-grid .odin-cfg__option {
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
}

.odin-cfg__options.is-grid .odin-cfg__option-name {
  flex: none;
  font-weight: 600;
}

/* Colour swatches */
.odin-cfg__swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--ocfg-radius-sm);
  color: var(--ocfg-text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  min-width: 68px;
}

.odin-cfg__swatch:hover {
  border-color: var(--ocfg-border-strong);
  color: var(--ocfg-text);
}

.odin-cfg__swatch[aria-checked="true"] {
  border-color: var(--ocfg-accent);
  color: var(--ocfg-text);
}

.odin-cfg__swatch-chip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ocfg-border-strong);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.odin-cfg__swatch[aria-checked="true"] .odin-cfg__swatch-chip {
  border-color: var(--ocfg-accent);
}

/* Focus: visible on keyboard, quiet on mouse. */
.odin-cfg :is(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--ocfg-accent-hover);
  outline-offset: 2px;
}

.odin-cfg__empty-options {
  font-size: 13px;
  /* "No options available for this step" is information, not a caution. It was
     amber, which is the last visible orange in the interface — but green would
     be worse, since an accent that means "good" sitting on a dead end reads as
     encouragement. Neutral is the honest colour for it. */
  color: var(--ocfg-text-dim);
  padding: 10px 0 2px;
}

/* --- panels --------------------------------------------------------------- */

.odin-cfg__panel {
  border: 1px solid var(--ocfg-border);
  border-radius: var(--ocfg-radius);
  background: var(--ocfg-panel);
  padding: 14px;
}

.odin-cfg__panel-title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ocfg-text-faint);
  font-weight: 700;
}

/* --- spec table ----------------------------------------------------------- */

.odin-cfg__specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.odin-cfg__specs th,
.odin-cfg__specs td {
  padding: 6px 0;
  text-align: left;
  border-bottom: 1px solid var(--ocfg-border);
  vertical-align: top;
}

.odin-cfg__specs tr:last-child th,
.odin-cfg__specs tr:last-child td {
  border-bottom: 0;
}

.odin-cfg__specs th {
  color: var(--ocfg-text-dim);
  font-weight: 400;
  width: 52%;
}

.odin-cfg__specs td {
  color: var(--ocfg-text);
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.odin-cfg__specs tr.is-pending td {
  color: var(--ocfg-text-faint);
  font-weight: 400;
}

/* --- summary / totals ----------------------------------------------------- */

.odin-cfg__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.odin-cfg__line {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ocfg-border);
}

.odin-cfg__line:last-child {
  border-bottom: 0;
}

.odin-cfg__line-body {
  flex: 1;
  min-width: 0;
}

.odin-cfg__line-name {
  display: block;
  color: var(--ocfg-text);
}

.odin-cfg__line-meta {
  display: block;
  font-size: 11px;
  color: var(--ocfg-text-faint);
}

.odin-cfg__line-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ocfg-text);
}

.odin-cfg__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ocfg-border-strong);
}

.odin-cfg__total-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ocfg-text-dim);
  font-weight: 700;
}

.odin-cfg__total-value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.odin-cfg__total-note {
  font-size: 11px;
  color: var(--ocfg-text-faint);
  margin-top: 4px;
}

/* --- buttons -------------------------------------------------------------- */

.odin-cfg__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.odin-cfg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--ocfg-radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.odin-cfg__btn--primary {
  background: var(--ocfg-accent);
  color: var(--ocfg-accent-text);
}

.odin-cfg__btn--primary:hover:not(:disabled) {
  background: var(--ocfg-accent-hover);
}

.odin-cfg__btn--ghost {
  background: transparent;
  border-color: var(--ocfg-border-strong);
  color: var(--ocfg-text-dim);
  font-weight: 500;
  padding: 9px 14px;
  font-size: 13px;
}

.odin-cfg__btn--ghost:hover:not(:disabled) {
  color: var(--ocfg-text);
  border-color: var(--ocfg-text-faint);
}

.odin-cfg__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.odin-cfg__btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.odin-cfg__btn-row .odin-cfg__btn {
  flex: 1 1 auto;
}

/* --- notices -------------------------------------------------------------- */

.odin-cfg__notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--ocfg-radius-sm);
  font-size: 13px;
  border: 1px solid;
}

.odin-cfg__notice--info {
  background: rgba(154, 163, 173, 0.08);
  border-color: var(--ocfg-border-strong);
  color: var(--ocfg-text-dim);
}

.odin-cfg__notice--success {
  background: var(--ocfg-success-soft);
  border-color: var(--ocfg-success-line);
  color: var(--ocfg-success-text);
}

.odin-cfg__notice--warn {
  background: var(--ocfg-warn-soft);
  border-color: var(--ocfg-warn-line);
  color: var(--ocfg-warn-text);
}

/* The placeholder-catalog banner is informational development chrome, not a
   caution, and it is the most prominent coloured thing on the page while the
   catalog is still stand-in data. Accent, not amber. It disappears by itself
   once meta.placeholderData goes false. */
.odin-cfg__notice--placeholder {
  background: var(--ocfg-accent-soft);
  border-color: var(--ocfg-accent-line);
  color: var(--ocfg-accent);
}

.odin-cfg__notice--error {
  background: var(--ocfg-error-soft);
  border-color: var(--ocfg-error-line);
  color: var(--ocfg-error-text);
}

.odin-cfg__notice button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  padding: 0;
  opacity: 0.8;
}

/* --- dev / data health panel --------------------------------------------- */

.odin-cfg__dev {
  border: 1px dashed var(--ocfg-accent-line);
  border-radius: var(--ocfg-radius);
  padding: 12px;
  font-size: 12px;
  color: var(--ocfg-text-dim);
  background: var(--ocfg-accent-soft);
}

.odin-cfg__dev summary {
  cursor: pointer;
  color: var(--ocfg-accent);
  font-weight: 700;
}

.odin-cfg__dev ul {
  margin: 8px 0 0;
  padding-left: 18px;
  max-height: 220px;
  overflow: auto;
}

.odin-cfg__dev li {
  margin-bottom: 4px;
  line-height: 1.35;
}

.odin-cfg__dev code {
  font-size: 11px;
  color: var(--ocfg-text);
}

/* --- loading / error states ---------------------------------------------- */

.odin-cfg__state {
  padding: 48px 24px;
  text-align: center;
  color: var(--ocfg-text-dim);
}

.odin-cfg__spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto 14px;
  border: 2px solid var(--ocfg-border-strong);
  border-top-color: var(--ocfg-accent);
  border-radius: 50%;
  animation: odin-cfg-spin 700ms linear infinite;
}

@keyframes odin-cfg-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .odin-cfg *,
  .odin-cfg *::before,
  .odin-cfg *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- screen-reader only --------------------------------------------------- */

.odin-cfg__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   FULL-SIZE PREVIEW
   The canvas is 2964px wide and the page shows it at roughly a third of that,
   so the surface detail people want to judge simply is not on screen at rest.

   The overlay deliberately does NOT scale the image to fit. Fitting a 2964px
   image onto a phone is exactly what made it unreadable; instead it renders at
   natural width and pans sideways, which is how you look at something long and
   thin. On a wide desktop it just fits and there is nothing to pan.
   -------------------------------------------------------------------------- */

.odin-cfg [x-cloak] { display: none !important; }

.odin-cfg__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ocfg-text);
  background: rgba(14, 15, 17, 0.72);
  border: 1px solid var(--ocfg-border-strong);
  border-radius: var(--ocfg-radius);
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.odin-cfg__zoom:hover { background: rgba(14, 15, 17, 0.9); }
.odin-cfg__zoom:focus-visible { outline: 2px solid var(--ocfg-accent); outline-offset: 2px; }

.odin-cfg__lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(8, 9, 10, 0.94);
  overflow-x: auto;
  overflow-y: hidden;
  cursor: zoom-out;
}

.odin-cfg__lightbox-inner {
  margin: auto;
  padding: 0 24px;
  cursor: default;
}

/* Natural size, not fitted. min-width keeps it from shrinking on narrow screens,
   which is what forces the horizontal scroll that makes detail legible. */
.odin-cfg__stage--full {
  width: 2964px;
  max-width: none;
  min-width: 2964px;
  aspect-ratio: 2964 / 572;
}

@media (max-width: 3100px) {
  .odin-cfg__lightbox { align-items: center; }
}

.odin-cfg__lightbox-close {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ocfg-text);
  background: rgba(14, 15, 17, 0.8);
  border: 1px solid var(--ocfg-border-strong);
  border-radius: var(--ocfg-radius);
  cursor: pointer;
}

.odin-cfg__lightbox-close:focus-visible { outline: 2px solid var(--ocfg-accent); outline-offset: 2px; }

.odin-cfg__lightbox-hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ocfg-text-faint);
  pointer-events: none;
}