/* DeckLearn · cultural neon actions · 2026-11-06.
 * Presentation only: no checkout, tracking, price or Anki-card changes.
 * Keep the established layout and touch-target sizing from the base sheet.
 */
@import url("/assets/storefront-neon.css?v=20261106-neon-v2");

:root body[data-dl-visual] {
  --dl-action-build: "20261106-language-fx-v1";
  --dl-language-main: var(--deck-a, var(--c, #174588));
  --dl-language-detail: var(--deck-b, var(--c2, #8bbce8));
  --dl-language-ink: #fff;
}
/* Read the original product's CSS palette; never use the buyer's country flag. */
:root body[data-dl-visual]:is(.it-en-site, :has(#dl-english)) {
  --dl-en-buy: var(--deck-a, #012169);
  --dl-en-edge: var(--deck-b, #c8102e);
  --dl-language-main: var(--dl-en-buy);
  --dl-language-detail: var(--dl-en-edge);
}
:root body[data-dl-visual]:is(.it-es-site, :has(#dl-es)) {
  --dl-es-buy: var(--deck-a, var(--c, #c60b1e));
  --dl-es-edge: var(--gold, #ffc400);
  --dl-language-main: var(--dl-es-buy);
  --dl-language-detail: var(--dl-es-edge);
}
:root body[data-dl-visual]:is(.it-de-site, :has(#dl-de)) {
  --dl-de-buy: var(--gold, #ffce00);
  --dl-de-edge: var(--deck-a, #dd0000);
  --dl-language-main: var(--dl-de-buy);
  --dl-language-detail: var(--dl-de-edge);
  --dl-language-ink: #171102;
}
:root body[data-dl-visual]:is(.it-ja-site, :has(#dl-jp)) {
  --dl-ja-buy: var(--jp1, var(--deck-a, #e60012));
  --dl-ja-edge: var(--jp2, var(--deck-line, #00c8ff));
  --dl-language-main: var(--dl-ja-buy);
  --dl-language-detail: var(--dl-ja-edge);
}
:root body[data-dl-visual]:is(.it-ko-site, :has(#dl-ko)) {
  --dl-ko-buy: var(--c, #cd2e3a);
  --dl-ko-edge: var(--c2, #0047a0);
  --dl-language-main: var(--dl-ko-buy);
  --dl-language-detail: var(--dl-ko-edge);
}
/* Catalogue and mixed-language docks: resolve the destination, not the locale.
 * These properties alone never change navigation or ordinary text links. */
body[data-dl-visual] :where([data-lang="en"], [data-lang="english"], [data-lang="ingles"], [href*="/english-"], [href*="/ingles-"], [href*="/anglais-"], [href*="/englisch-"], [href*="/engels-"], [href*="/angielski-"]) {
  --dl-button-main: var(--dl-en-buy, #012169);
  --dl-button-detail: var(--dl-en-edge, #c8102e);
  --dl-button-ink: #fff;
}
body[data-dl-visual] :where([data-lang="es"], [data-lang="spanish"], [data-lang="espanhol"], [href*="/spanish-"], [href*="/espanhol-"], [href*="/espanol-"], [href*="/espagnol-"], [href*="/spanisch-"], [href*="/spaans-"], [href*="/hiszpanski-"]) {
  --dl-button-main: var(--dl-es-buy, #c60b1e);
  --dl-button-detail: var(--dl-es-edge, #ffc400);
  --dl-button-ink: #fff;
}
body[data-dl-visual] :where([data-lang="de"], [data-lang="german"], [data-lang="alemao"], [href*="/german-"], [href*="/alemao-"], [href*="/aleman-"], [href*="/allemand-"], [href*="/deutsch-"], [href*="/duits-"], [href*="/niemiecki-"]) {
  --dl-button-main: var(--dl-de-buy, #ffce00);
  --dl-button-detail: var(--dl-de-edge, #dd0000);
  --dl-button-ink: #171102;
}
body[data-dl-visual] :where([data-lang="ja"], [data-lang="jp"], [data-lang="japanese"], [data-lang="japones"], [href*="/japanese-"], [href*="/japones-"], [href*="/japonais-"], [href*="/japanisch-"], [href*="/japans-"], [href*="/japonski-"]) {
  --dl-button-main: var(--dl-ja-buy, #e60012);
  --dl-button-detail: var(--dl-ja-edge, #00c8ff);
  --dl-button-ink: #fff;
}
body[data-dl-visual] :where([data-lang="ko"], [data-lang="korean"], [data-lang="coreano"], [href*="/korean-"], [href*="/coreano-"], [href*="/coreen-"], [href*="/koreanisch-"], [href*="/koreaans-"], [href*="/koreanski-"]) {
  --dl-button-main: var(--dl-ko-buy, #cd2e3a);
  --dl-button-detail: var(--dl-ko-edge, #0047a0);
  --dl-button-ink: #fff;
}

/* Match the base sheet's specificity, plus :root, including the inline KO hero.
 * A single shape and finish, with the language's own color and readable center. */
:root body[data-dl-visual] :is(
  :is(#dl-english, #dl-es, #dl-de, #dl-jp, #dl-ko) .hero .cta-row > .btn:not(.ghost),
  .itc-cultural-hero .cta-row > .btn:not(.ghost),
  .product-hero__copy .hero-actions > .btn:not(.secondary),
  .poster-body > .btn,
  .lang-card .btn:not(.secondary):not(.dark),
  .itc-cta:not(.itc-cta--ghost):not([data-dl-buy="secondary"]),
  .product-intro .actions > .btn:not(.secondary),
  .collection-offer .purchase-box > .btn:not(.secondary),
  .purchase-box > .btn:not(.secondary),
  .dl-collection-offer__cta,
  [data-dl-buy="primary"],
  .itc-dock__buy,
  .dock-main,
  [data-dl-dock-role="primary"]
) {
  --dl-fx-main: var(--dl-button-main, var(--dl-language-main, #174588));
  --dl-fx-detail: var(--dl-button-detail, var(--dl-language-detail, #8bbce8));
  --dl-fx-ink: var(--dl-button-ink, var(--dl-language-ink, #fff));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dl-fx-main) 55%, white) !important;
  border-radius: 7px 17px 7px 17px !important;
  background:
    linear-gradient(112deg, transparent 38%, #ffffff12 49%, transparent 60%) 170% 0 / 240% 100% no-repeat,
    linear-gradient(180deg, #ffffff0b, transparent 44%, #00000026),
    linear-gradient(115deg, color-mix(in srgb, var(--dl-fx-main) 86%, #080b13), color-mix(in srgb, var(--dl-fx-main) 72%, #080b13)) !important;
  color: var(--dl-fx-ink) !important;
  -webkit-text-fill-color: currentColor;
  box-shadow: inset 0 1px 0 #ffffff4a, inset 0 -3px 0 #00000026,
    0 6px 0 #02040c66, 0 10px 25px color-mix(in srgb, var(--dl-fx-main) 28%, transparent),
    0 0 18px color-mix(in srgb, var(--dl-fx-detail) 16%, transparent) !important;
  text-shadow: none !important;
  font-weight: 850;
  text-decoration: none !important;
  opacity: 1;
  filter: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms ease, box-shadow 160ms ease, background-position 420ms ease;
}
:root body[data-dl-visual] :is([data-dl-buy="primary"], [data-dl-dock-role="primary"])::before {
  content: "";
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 7px;
  width: 13px;
  height: 6px;
  border-block-start: 1px solid #ffffffa6;
  border-inline-start: 1px solid #ffffff70;
  background: none;
  transform: none;
  animation: none;
  opacity: .7;
  pointer-events: none;
}
:root body[data-dl-visual] :is([data-dl-buy="primary"], [data-dl-dock-role="primary"])::after {
  content: "";
  position: absolute;
  inset: auto 18% 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dl-fx-detail) 60%, white), transparent);
  box-shadow: 0 0 10px var(--dl-fx-detail);
  transform: none;
  animation: none;
  opacity: .9;
  pointer-events: none;
}
:root body[data-dl-visual] :is([data-dl-buy="primary"], [data-dl-dock-role="primary"]) :where(b, strong, span, small) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
  text-shadow: none !important;
}
:root body[data-dl-visual] :is([data-dl-dock-role="primary"], .itc-dock__buy) b {
  background: #ffffff22 !important;
  border: 1px solid #ffffff33;
  box-shadow: inset 0 1px 0 #ffffff20;
}

/* Secondary remains a quiet dark surface; KO uses its original blue. */
:root body[data-dl-visual] :is(
  :is(#dl-english, #dl-es, #dl-de, #dl-jp, #dl-ko) .hero .cta-row > .btn.ghost,
  .itc-cultural-hero .cta-row > .btn.ghost,
  .product-hero__copy .hero-actions > .btn.secondary,
  .itc-cta--ghost,
  .product-intro .actions > .btn.secondary,
  .lang-card .btn.secondary,
  [data-dl-buy="secondary"],
  [data-dl-dock-role="secondary"]
) {
  --dl-fx-secondary: var(--dl-button-detail, var(--dl-language-detail, #174588));
  position: relative;
  border: 1px solid color-mix(in srgb, var(--dl-fx-secondary) 52%, #b8d3e8) !important;
  border-radius: 7px 17px 7px 17px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--dl-fx-secondary) 22%, #08101e), #070d18) !important;
  color: #f1f6ff !important;
  box-shadow: inset 0 1px 0 #ffffff13, 0 0 14px color-mix(in srgb, var(--dl-fx-secondary) 12%, transparent) !important;
  text-shadow: none !important;
  filter: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root body[data-dl-visual] :is(
  :is(#dl-english, #dl-es, #dl-de, #dl-jp, #dl-ko) .hero .cta-row > .btn:not(.ghost),
  .itc-cultural-hero .cta-row > .btn:not(.ghost),
  .product-hero__copy .hero-actions > .btn:not(.secondary),
  .poster-body > .btn,
  .lang-card .btn:not(.secondary):not(.dark),
  .itc-cta:not(.itc-cta--ghost):not([data-dl-buy="secondary"]),
  .product-intro .actions > .btn:not(.secondary),
  .collection-offer .purchase-box > .btn:not(.secondary),
  .purchase-box > .btn:not(.secondary),
  .dl-collection-offer__cta,
  [data-dl-buy="primary"],
  .itc-dock__buy,
  .dock-main,
  [data-dl-dock-role="primary"]
):hover {
    transform: translateY(-2px);
    background-position: -70% 0, 0 0, 0 0 !important;
    filter: none;
    box-shadow: inset 0 1px 0 #ffffff66, inset 0 -3px 0 #00000026,
      0 8px 0 #02040c55, 0 13px 30px color-mix(in srgb, var(--dl-fx-main) 36%, transparent),
      0 0 25px color-mix(in srgb, var(--dl-fx-detail) 23%, transparent) !important;
  }
}
:root body[data-dl-visual] :is([data-dl-buy], [data-dl-dock-role]):active {
  transform: translateY(1px) !important;
}
:root body[data-dl-visual] :is([data-dl-buy], [data-dl-dock-role]):focus-visible {
  outline: 3px solid #f4faff !important;
  outline-offset: 4px;
}
@media (max-width: 640px) {
  :root body[data-dl-visual] :is([data-dl-buy="primary"], [data-dl-dock-role="primary"]) {
    min-height: 48px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root body[data-dl-visual] :is([data-dl-buy], [data-dl-dock-role], .cta-row > .btn, .itc-cta) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}
@media (forced-colors: active) {
  :root body[data-dl-visual] :is([data-dl-buy], [data-dl-dock-role], .cta-row > .btn, .itc-cta) {
    background: ButtonFace !important;
    color: ButtonText !important;
    border: 2px solid ButtonText !important;
    box-shadow: none !important;
    forced-color-adjust: auto;
  }
  :root body[data-dl-visual] :is([data-dl-buy], [data-dl-dock-role])::before,
  :root body[data-dl-visual] :is([data-dl-buy], [data-dl-dock-role])::after { display: none; }
}