/* Catalog of 3D-product SKUs — technology preview (3 cards). */

.strateg-convert-catalog-wizard-page .strateg-convert-catalog-page {
  margin: 0;
  max-width: none;
  padding: 0;
}

.strateg-convert-catalog__search {
  position: relative;
  margin: 0 0 1.25rem 0;
  width: 100%;
  max-width: none;
}

.strateg-convert-catalog__search-row {
  display: flex;
  gap: 0;
  border: 1px solid #d2d6e2;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(31, 42, 68, 0.05);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.strateg-convert-catalog__search-row:focus-within {
  border-color: #1f6feb;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.18);
}

.strateg-convert-catalog__search-field {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

.strateg-convert-catalog__search-input {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0.55rem 2.25rem 0.55rem 0.75rem;
  font-size: 0.95rem;
  background: transparent;
  color: #1f2a44;
}

/* Hide native type=search clear — we render our own × (#262). */
.strateg-convert-catalog__search-input::-webkit-search-cancel-button,
.strateg-convert-catalog__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.strateg-convert-catalog__search-input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.strateg-convert-catalog__search-clear {
  position: absolute;
  right: 0.25rem;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 0.15rem 0.35rem;
}

.strateg-convert-catalog__search-clear:hover,
.strateg-convert-catalog__search-clear:focus {
  color: #1f2a44;
}

.strateg-convert-catalog__search-clear[hidden] {
  display: none !important;
}

.strateg-convert-catalog__search-submit {
  border: 0;
  background: #f5f7fb;
  color: #1f2a44;
  padding: 0 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}

.strateg-convert-catalog__search-submit:hover,
.strateg-convert-catalog__search-submit:focus {
  background: #1f6feb;
  color: #ffffff;
}

.strateg-convert-catalog__filter-empty {
  margin: 0 0 1rem;
  color: #5b6480;
  font-style: italic;
}

/* Align catalog cards with the top of the side rail — DEC-2026-05-29-032 rev4.
   Default `.strateg-convert-catalog__grid` has margin-top: 1.5rem assuming a
   page header above; inside `.strateg-convert-wizard__main` there is no header,
   so the cards sit ~24px below the side rail. Zero it out in wizard layout. */
.strateg-convert-catalog-wizard-page .strateg-convert-catalog__grid {
  margin-top: 0;
}

.strateg-convert-catalog-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem 1rem;
}

.strateg-convert-catalog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  /* Natural heights + JS row equalize (catalog.js) so closed cards stay flush;
     keep align-items:start so an expanded stem can hang below neighbours (#262). */
  align-items: start;
  list-style: none;
  margin: 1.5rem 0 0 0;
  padding: 0;
}

@media (min-width: 720px) {
  .strateg-convert-catalog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.strateg-convert-catalog__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: start;
}

.strateg-convert-catalog__cell[hidden] {
  display: none !important;
}

.strateg-convert-catalog__card {
  /* Pastel resting like directories / printers·AMS hub cards (#262). */
  --sku-card-bg: #d9ebff;
  --sku-card-border: #9fc0ea;
  --sku-card-bg-hover: #c4e0ff;
  --sku-card-border-hover: #7eacdf;
  align-items: stretch;
  background: var(--sku-card-bg);
  border: 1px solid var(--sku-card-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(31, 42, 68, 0.04);
  color: #1f2a44;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease;
  width: 100%;
  cursor: pointer;
  /* Stay in own grid cell when expanded — panel is parked as full-width sibling. */
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  /* Kill UA focus ring — sharp rect outside rounded card (#262). */
  outline: none;
}

/* Per-SKU pastel variants (same family as directories tiles). */
.strateg-convert-catalog__card--a5-emboss {
  --sku-card-bg: #d9ebff;
  --sku-card-border: #9fc0ea;
  --sku-card-bg-hover: #c4e0ff;
  --sku-card-border-hover: #7eacdf;
}

.strateg-convert-catalog__card--a4-emboss {
  --sku-card-bg: #d8f3e4;
  --sku-card-border: #9fd4b8;
  --sku-card-bg-hover: #c2ebd4;
  --sku-card-border-hover: #7fc4a0;
}

.strateg-convert-catalog__card--own-3mf {
  --sku-card-bg: #ffe9cf;
  --sku-card-border: #e0bc8a;
  --sku-card-bg-hover: #ffdcb0;
  --sku-card-border-hover: #d0a66e;
}

.strateg-convert-catalog__card--teaching-model-184 {
  --sku-card-bg: #eedff7;
  --sku-card-border: #c9aedb;
  --sku-card-bg-hover: #e2cff2;
  --sku-card-border-hover: #b895d0;
}

.strateg-convert-catalog__card-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem 1.25rem;
}

/* Hover like printers/AMS: soft rim + lift, deepen pastel (#262). */
.strateg-convert-catalog__card:hover:not(.is-expanded),
.strateg-convert-catalog__card:focus-visible:not(.is-expanded) {
  background: var(--sku-card-bg-hover);
  border-color: var(--sku-card-border-hover);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.14);
  color: #1f2a44;
  outline: none;
  text-decoration: none;
  transform: translateY(-1px);
}

.strateg-convert-catalog__card:focus,
.strateg-convert-catalog__card:focus-visible {
  outline: none;
}

.strateg-convert-catalog__card.is-expanded,
.strateg-convert-catalog__card[aria-current="true"] {
  /* T/Г join: 2px in the card's own pastel rim (--sku-card-border), not primary blue.
     Rounded stem↔panel corners are drawn as SVG fillets by catalog.js, not with
     ::before/::after pseudos (those left asymmetric subpixel seams) (#262). */
  border: 2px solid var(--sku-card-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: none;
  overflow: visible;
  z-index: 4;
  transform: none;
  background: var(--sku-card-bg);
  color: #1f2a44;
  outline: none;
  text-decoration: none;
  align-self: start;
  height: auto;
  /* Opaque stem continues side borders and overlaps the panel top rim so there
     is no filled seam / disconnected leg (#262). 1.5rem keeps hang ≥8px when
     closed neighbours are nearly as tall (photo cards vs own_3mf). */
  padding-bottom: 1.5rem;
}

/* Expanded: keep pastel T/Г join; no lift or alternate hover rim. */
.strateg-convert-catalog__card.is-expanded:hover,
.strateg-convert-catalog__card.is-expanded:focus,
.strateg-convert-catalog__card.is-expanded:focus-visible {
  border-color: var(--sku-card-border);
  border-bottom-color: transparent;
  box-shadow: none;
  transform: none;
  outline: none;
  background: var(--sku-card-bg);
  color: #1f2a44;
  padding-bottom: 1.5rem;
}

/* Dim icon + titles of the selected card while detail is open (printers/AMS). */
.strateg-convert-catalog__card.is-expanded .strateg-convert-catalog__card-main {
  filter: grayscale(0.92);
  opacity: 0.45;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

/* #362 WS2 — front hub: selected stays pastel; closed siblings recede.
   Stem↔panel join is the classic tab recipe (SO 24823825 / DaniWeb tabbed menu):
   active tab overlaps the panel, same fill, no downward shadow (a bottom
   halo reads as a seam). Lift lives on the panel. Upward shadow keeps the
   gate selected_state boxShadow != none without painting a gap. */
.strateg-front-hub .strateg-convert-catalog__card.is-expanded {
  box-shadow: 0 -8px 18px rgba(27, 26, 46, 0.1);
  opacity: 1;
  background: var(--sku-card-bg);
  margin-bottom: -2px;
}
.strateg-front-hub .strateg-convert-catalog__card.is-expanded::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -6px;
  height: 12px;
  background: var(--sku-card-bg);
  pointer-events: none;
  z-index: 1;
}
.strateg-front-hub .strateg-convert-catalog__card.is-expanded .strateg-convert-catalog__card-main {
  filter: none;
  opacity: 1;
}
.strateg-front-hub .strateg-convert-catalog__grid:has(.is-expanded) .strateg-convert-catalog__card:not(.is-expanded) {
  opacity: 0.85;
}
.strateg-front-hub .strateg-convert-catalog__expand.is-grid-expand {
  background: var(--sku-expand-bg, var(--sku-card-bg));
  box-shadow: 0 10px 24px rgba(27, 26, 46, 0.14);
  /* Straight panel top — SVG fillets (#262) draw the stem shoulders.
     Rounded top-left/right left a white notch at the stem↔panel step. */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.strateg-front-hub__link-price {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--strateg-color-ink);
}

/* #362 WS4 — how-to value-chain (PowerPoint chevrons) + layer_lines */
.strateg-front-hub__howto,
.strateg-front-hub__footer {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 3px solid transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(27, 26, 46, 0.12) 0 1px,
    transparent 1px 7px
  );
  background-size: 100% 7px;
  background-repeat: repeat-x;
  background-position: top left;
}
.strateg-front-hub__howto-title {
  font-size: var(--strateg-type-h2-group-size);
  font-weight: var(--strateg-type-h2-group-weight);
  color: var(--strateg-color-ink);
  margin: 0 0 1rem;
}
.strateg-front-hub__howto-track {
  position: relative;
  z-index: 0;
  overflow: visible;
  padding-bottom: 0.95rem;
}
.strateg-front-hub__howto-steps {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.strateg-front-hub {
  --strateg-hub-mark-ink: #fff;
}
.strateg-front-hub__howto-step {
  --howto-notch: 1.15rem;
  --howto-idle-bg: var(--strateg-pastel-for-kids-bg);
  --howto-active-bg: color-mix(in srgb, var(--strateg-pastel-for-kids-icon) 78%, #1b1a2e);
  --howto-z: 4;
  position: relative;
  z-index: var(--howto-z);
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  margin-right: calc(var(--howto-notch) * -0.55);
  min-height: 5.1rem;
  padding: 0.65rem calc(var(--howto-notch) + 0.55rem) 0.65rem calc(var(--howto-notch) + 0.35rem);
  color: var(--strateg-color-ink);
  background: var(--howto-idle-bg);
  clip-path: polygon(
    0 0,
    calc(100% - var(--howto-notch)) 0,
    100% 50%,
    calc(100% - var(--howto-notch)) 100%,
    0 100%,
    var(--howto-notch) 50%
  );
  animation: strateg-howto-conveyor 12s ease-in-out infinite;
}
.strateg-front-hub__howto-step:nth-child(1) {
  --howto-idle-bg: var(--strateg-pastel-for-kids-bg);
  --howto-active-bg: color-mix(in srgb, var(--strateg-pastel-for-kids-icon) 78%, #1b1a2e);
  --howto-z: 4;
  padding-left: 0.85rem;
  clip-path: polygon(
    0 0,
    calc(100% - var(--howto-notch)) 0,
    100% 50%,
    calc(100% - var(--howto-notch)) 100%,
    0 100%
  );
  animation-delay: 0s;
}
.strateg-front-hub__howto-step:nth-child(2) {
  --howto-idle-bg: var(--strateg-pastel-for-adults-bg);
  --howto-active-bg: color-mix(in srgb, var(--strateg-pastel-for-adults-icon) 74%, #1b1a2e);
  --howto-z: 3;
  animation-delay: 3s;
}
.strateg-front-hub__howto-step:nth-child(3) {
  --howto-idle-bg: var(--strateg-pastel-talks-bg);
  --howto-active-bg: color-mix(in srgb, var(--strateg-pastel-talks-icon) 78%, #1b1a2e);
  --howto-z: 2;
  animation-delay: 6s;
}
.strateg-front-hub__howto-step:nth-child(4) {
  --howto-idle-bg: color-mix(in srgb, var(--strateg-pastel-talks-bg) 45%, var(--strateg-pastel-talks-border));
  --howto-active-bg: color-mix(in srgb, var(--strateg-pastel-talks-icon) 58%, #1b1a2e);
  --howto-z: 1;
  margin-right: 0;
  animation-delay: 9s;
}
@keyframes strateg-howto-conveyor {
  0%,
  18% {
    color: var(--strateg-hub-mark-ink);
    background: var(--howto-active-bg);
    z-index: 6;
  }
  25%,
  100% {
    color: var(--strateg-color-ink);
    background: var(--howto-idle-bg);
    z-index: var(--howto-z);
  }
}
@media (prefers-reduced-motion: reduce) {
  .strateg-front-hub__howto-step {
    animation: none;
    color: var(--strateg-color-ink);
    background: var(--howto-idle-bg);
  }
  .strateg-front-hub__howto-step:nth-child(1) {
    color: var(--strateg-hub-mark-ink);
    background: var(--howto-active-bg);
  }
  .strateg-front-hub__howto-spark {
    animation: none;
    opacity: 0;
  }
}
.strateg-front-hub__howto-spark {
  position: absolute;
  z-index: -1;
  left: 100%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin: 0;
  border-radius: 50%;
  pointer-events: none;
  background: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff 40%, #f4c95d),
    0 0 8px 2px rgba(255, 214, 110, 0.9),
    0 0 16px 5px rgba(255, 176, 64, 0.45);
  opacity: 0;
  animation: strateg-howto-spark-row 12s linear infinite;
}
@keyframes strateg-howto-spark-row {
  0%,
  84% {
    left: 100%;
    top: 50%;
    opacity: 0;
    transform: translate(35%, -50%) scale(0.35);
  }
  86% {
    left: 100%;
    top: 50%;
    opacity: 1;
    transform: translate(40%, -50%) scale(1);
  }
  89% {
    left: 100%;
    top: calc(100% - 0.42rem);
    opacity: 1;
    transform: translate(-10%, -50%) scale(1);
  }
  96% {
    left: 0;
    top: calc(100% - 0.42rem);
    opacity: 1;
    transform: translate(10%, -50%) scale(1);
  }
  99% {
    left: 0;
    top: 50%;
    opacity: 1;
    transform: translate(35%, -50%) scale(0.85);
  }
  100% {
    left: 0;
    top: 50%;
    opacity: 0;
    transform: translate(55%, -50%) scale(0.2);
  }
}
.strateg-front-hub__howto-icon {
  display: flex;
  color: inherit;
}
.strateg-front-hub__howto-icon svg {
  display: block;
}
.strateg-front-hub__howto-label {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: inherit;
}
.strateg-front-hub__maker,
.strateg-front-hub__age {
  margin: 0 0 0.4rem;
  color: var(--strateg-color-ink);
}
.strateg-front-hub__maker {
  font-size: 0.95rem;
  line-height: 1.4;
}
.strateg-front-hub__maker-city::before {
  content: " · ";
}
.strateg-front-hub__age {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.strateg-front-hub__age-mark {
  display: inline-block;
  min-width: 2.1em;
  padding: 0.18em 0.42em;
  border-radius: 6px;
  background: #5c5c5c;
  color: var(--strateg-hub-mark-ink, #fff);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;
}
.strateg-front-hub__age-law {
  font-size: 0.85rem;
  color: #6b6b6b;
}

/* #362 WS3 — compact closed groups + hide guest rail on narrow */
@media (max-width: 720px) {
  .strateg-front-hub-page .strateg-convert-wizard__rail-col {
    display: none;
  }
  .strateg-front-hub .strateg-convert-catalog__card:not(.is-expanded) .strateg-convert-catalog__card-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    max-height: 96px;
    padding: 0.45rem 0.7rem;
    overflow: hidden;
  }
  .strateg-front-hub .strateg-convert-catalog__card:not(.is-expanded) .strateg-convert-catalog__icon svg {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 720px) {
  .strateg-front-hub__howto-track {
    padding-bottom: 0;
    padding-left: 0.85rem;
  }
  .strateg-front-hub__howto-steps {
    flex-direction: column;
  }
  .strateg-front-hub__howto-step {
    margin-right: 0;
    margin-bottom: calc(var(--howto-notch) * -0.45);
    min-height: 3.25rem;
    padding: 0.7rem 0.9rem calc(var(--howto-notch) + 0.45rem);
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--howto-notch)),
      50% 100%,
      0 calc(100% - var(--howto-notch))
    );
  }
  .strateg-front-hub__howto-step:nth-child(1) {
    padding-left: 0.9rem;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--howto-notch)),
      50% 100%,
      0 calc(100% - var(--howto-notch))
    );
  }
  .strateg-front-hub__howto-step:nth-child(4) {
    margin-bottom: 0;
  }
  .strateg-front-hub__howto-spark {
    animation-name: strateg-howto-spark-col;
  }
  @keyframes strateg-howto-spark-col {
    0%,
    84% {
      left: 50%;
      top: 100%;
      opacity: 0;
      transform: translate(-50%, 20%) scale(0.35);
    }
    86% {
      left: 50%;
      top: 100%;
      opacity: 1;
      transform: translate(-50%, 35%) scale(1);
    }
    89% {
      left: 0.42rem;
      top: 100%;
      opacity: 1;
      transform: translate(-50%, -10%) scale(1);
    }
    96% {
      left: 0.42rem;
      top: 0;
      opacity: 1;
      transform: translate(-50%, 10%) scale(1);
    }
    99% {
      left: 0;
      top: 12%;
      opacity: 1;
      transform: translate(40%, 0) scale(0.85);
    }
    100% {
      left: 0;
      top: 12%;
      opacity: 0;
      transform: translate(70%, 0) scale(0.2);
    }
  }
}

.strateg-convert-catalog__cell.is-expanded {
  align-self: start;
  display: flex;
  flex-direction: column;
}

.strateg-convert-catalog__expand[hidden] {
  display: none !important;
}

.strateg-convert-catalog__expand:not([hidden]) {
  display: block;
}

/* Full-width detail row joined to selected card as T / Г (#262 / printers #259). */
.strateg-convert-catalog__expand.is-grid-expand {
  grid-column: 1 / -1;
  /* Same rim as the stem card pastel border (JS sets --sku-expand-border). */
  border: 2px solid var(--sku-expand-border, var(--sku-card-border, #9fc0ea));
  /* Keep outer frame rounded (14px) to match card; stem classes square only the join. */
  border-radius: 14px;
  /* Same pastel as the stem card — continuous expand surface (#262). */
  background: var(--sku-expand-bg, var(--sku-card-bg, #f8fbff));
  box-shadow: 0 8px 22px rgba(31, 42, 68, 0.10);
  position: relative;
  z-index: 2;
  overflow: visible;
  /* Cancel grid row-gap AND tuck ≥2px under the opaque card so the panel top
     border is covered across the stem — no filled seam (#259/#262). */
  margin-top: calc(-1.25rem - 3px);
  --t-stem-left: 0px;
  --t-stem-width: 0px;
  list-style: none;
  box-sizing: border-box;
  outline: none;
}

.strateg-convert-catalog__expand.is-grid-expand.is-stem-start {
  border-top-left-radius: 0;
}

.strateg-convert-catalog__expand.is-grid-expand.is-stem-end {
  border-top-right-radius: 0;
}

/* Stem↔panel join fillet (#262). The concave corner where each vertical stem
   border meets the horizontal panel top is the only sharp inner angle in an
   otherwise rounded UI. It is drawn by catalog.js as an SVG arc (`[data-sku-fillet]`)
   on the card — an arc plus straight lead-ins that overlap the real 2px borders,
   so the join is smooth (no floating hook) and left/right are exact mirrors.
   CSS pseudo-element / radial-gradient fillets were tried and reverted: they
   left subpixel seams and rendered asymmetrically left vs right. */
.strateg-convert-catalog__card [data-sku-fillet] {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  z-index: 7;
}

.strateg-convert-catalog__expand-card {
  padding: 1rem 1.15rem 1.25rem;
  text-align: left;
}

.strateg-convert-catalog__detail-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.strateg-convert-catalog__detail-description {
  color: #4a5568;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

/* Adaptive media flow: left→right wrap; photo+video share one tile height. */
.strateg-convert-catalog__gallery {
  --strateg-catalog-media-tile-min: 168px;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--strateg-catalog-media-tile-min), 1fr));
  gap: 0.75rem;
  justify-content: flex-start;
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.strateg-convert-catalog__gallery-tile {
  align-items: stretch;
  border-radius: 12px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}

.strateg-convert-catalog__gallery-tile--violet {
  background: linear-gradient(145deg, #7c4dff 0%, #5b34e0 100%);
}

.strateg-convert-catalog__gallery-tile--teal {
  background: linear-gradient(145deg, #26a69a 0%, #00897b 100%);
}

.strateg-convert-catalog__gallery-tile--orange {
  background: linear-gradient(145deg, #ff9800 0%, #f57c00 100%);
}

.strateg-convert-catalog__gallery-tile--photo,
.strateg-convert-catalog__gallery-tile--video {
  background: transparent;
  height: auto;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* Same frame for photo thumbs and inline video (no taller video cell). */
.strateg-convert-catalog__gallery-tile--photo .strateg-convert-media-thumb,
.strateg-convert-catalog__gallery-tile--video .strateg-convert-catalog__video-ratio {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
}

.strateg-convert-catalog__gallery-tile--photo .strateg-convert-media-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strateg-convert-catalog__video-ratio {
  background: #111;
  height: auto;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.strateg-convert-catalog__video-embed {
  border: 0;
  border-radius: 12px;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

.strateg-convert-catalog__icon {
  align-items: center;
  background: linear-gradient(140deg, #f4f0ff 0%, #ece5ff 100%);
  border-radius: 12px;
  color: #5b34e0;
  display: flex;
  height: 110px;
  justify-content: center;
  margin: 0 auto 0.5rem auto;
  overflow: hidden;
  width: 110px;
}

.strateg-convert-catalog__icon--photo {
  background: transparent;
  padding: 0;
}

/* #362 WS5 — /products tiles share hub photo language (4:5 cover, no gray plate). */
body.path-products .strateg-convert-catalog-page:not(.strateg-front-hub) .strateg-convert-tile-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 0 0 0.5rem;
  border-radius: 12px;
}
body.path-products .strateg-convert-catalog-page:not(.strateg-front-hub) .strateg-convert-tile-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strateg-convert-catalog__icon-photo {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}


.strateg-convert-catalog__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.strateg-convert-catalog__title {
  color: #1f2a44;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  /* Reserve 2 lines so «своя модель» / long titles do not stick out (#262). */
  min-height: calc(1.05rem * 1.3 * 2);
}

.strateg-convert-catalog__subtitle {
  color: #4a5474;
  font-size: 0.9rem;
  line-height: 1.45;
  min-height: 3.5em;
}

.strateg-convert-catalog__price {
  color: #1f2a44;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.15rem;
  /* Reserve one price line even when empty — mixed price/no-price used to
     leave shorter stems and misjoin the full-width expand panel (#262). */
  min-height: calc(1.05rem * 1.3);
}

.strateg-convert-catalog__price--empty {
  visibility: hidden;
}

/* Non-₽ copy (own upload «Узнать стоимость») — reserved one line, softer weight. */
.strateg-convert-catalog__price:not([data-price-minor]):not(.strateg-convert-catalog__price--empty) {
  font-size: 0.95rem;
  font-weight: 600;
}

.strateg-convert-catalog__detail-price {
  color: #1f2a44;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

/* Non-₽ expand note (own_3mf): quieter than bold list price. */
.strateg-convert-catalog__detail-price--muted,
.strateg-convert-catalog__detail-price:not([data-price-minor]) {
  color: #6b7280;
  font-size: 0.98rem;
  font-weight: 500;
}

.strateg-convert-catalog__status {
  align-self: center;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
  padding: 0.25rem 0.7rem;
  text-transform: uppercase;
}

.strateg-convert-catalog__status--live {
  background: #ddf7e3;
  color: #186430;
}

.strateg-convert-catalog__status--preview {
  background: #fff3d6;
  color: #84580c;
}

/* Stub page (A4 preview). */

.strateg-convert-catalog-stub {
  background: #ffffff;
  border: 1px solid #e6e8f1;
  border-radius: 14px;
  margin: 1.5rem auto 0 auto;
  max-width: 720px;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.strateg-convert-catalog-stub__hint {
  color: #4a5474;
  margin-bottom: 1.25rem;
}

.strateg-convert-catalog-stub__actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.strateg-convert-catalog-stub__cta {
  background: #7c4dff;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background 0.16s ease, transform 0.16s ease;
}

.strateg-convert-catalog-stub__cta:hover,
.strateg-convert-catalog-stub__cta:focus-visible {
  background: #5b34e0;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}

.strateg-convert-catalog-stub__back {
  color: #5b34e0;
  font-weight: 500;
  text-decoration: none;
}

.strateg-convert-catalog-stub__back:hover {
  text-decoration: underline;
}

/* Own-3MF page. */

.strateg-convert-own-3mf {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem auto 0 auto;
  max-width: 960px;
}

@media (min-width: 900px) {
  .strateg-convert-own-3mf {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
      "picker next"
      "viewer next"
      "error next";
  }
  .strateg-convert-own-3mf__picker { grid-area: picker; }
  .strateg-convert-own-3mf__viewer { grid-area: viewer; }
  .strateg-convert-own-3mf__error  { grid-area: error;  }
  .strateg-convert-own-3mf__next   { grid-area: next;   }
}

.strateg-convert-own-3mf__picker {
  background: #ffffff;
  border: 1px solid #e6e8f1;
  border-radius: 14px;
  padding: 1.25rem;
}

.strateg-convert-own-3mf__label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.strateg-convert-own-3mf__input {
  display: block;
  width: 100%;
  margin: 0.3rem 0 0.5rem 0;
}

.strateg-convert-own-3mf__upload-status {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: #c8c8d0;
}
.strateg-convert-own-3mf__upload-status[data-upload-state="ok"] {
  color: #8fd19e;
}
.strateg-convert-own-3mf__upload-status[data-upload-state="error"] {
  color: #f0a0a0;
}
.strateg-convert-own-3mf__upload-status[data-upload-state="need-login"] {
  color: #e0d090;
}

.strateg-convert-own-3mf__ws2 {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.strateg-convert-own-3mf__ws2-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.75rem 0;
}
.strateg-convert-own-3mf__ws2-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.strateg-convert-own-3mf__ws2-controls select {
  min-width: 8rem;
}
.strateg-convert-own-3mf__ws2-price {
  font-weight: 600;
  margin: 0.35rem 0 0.75rem;
}
.strateg-convert-own-3mf__ws2-partners ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}
.strateg-convert-own-3mf__ws2-partners-empty {
  opacity: 0.75;
  font-size: 0.9rem;
}

.strateg-convert-own-3mf__hint {
  color: #4a5474;
  font-size: 0.85rem;
  margin: 0;
}

.strateg-convert-own-3mf__viewer {
  background: #1f2235;
  border-radius: 14px;
  color: #f5f6fb;
  padding: 1rem;
}

.strateg-convert-own-3mf__canvas-wrap {
  aspect-ratio: 4 / 3;
  background: #353540;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.strateg-convert-own-3mf__canvas {
  display: block;
  height: 100%;
  width: 100%;
}

.strateg-convert-own-3mf__meta {
  display: grid;
  gap: 0.4rem 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1rem 0 0 0;
}

.strateg-convert-own-3mf__meta dt {
  color: #b3b6c9;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.strateg-convert-own-3mf__meta dd {
  color: #f5f6fb;
  font-size: 0.95rem;
  margin: 0;
}

.strateg-convert-own-3mf__error {
  background: #fdecec;
  border: 1px solid #f1b5b5;
  border-radius: 10px;
  color: #841414;
  padding: 0.75rem 1rem;
}

.strateg-convert-own-3mf__next {
  background: #ffffff;
  border: 1px solid #e6e8f1;
  border-radius: 14px;
  color: #4a5474;
  padding: 1.25rem;
}

.strateg-convert-own-3mf__next h2 {
  color: #1f2a44;
  margin-bottom: 0.5rem;
}

/* Catalog + SKU pill rules moved to css/style.css (global-styling) so they
   apply on both /products and /convert/wizard/* without depending on
   catalog.css being attached on wizard (UX 2026-05-27). */

/* Page title block is the single H1 on catalog paths (DEC-2026-05-29-031). */

body.path-products main .block-page-title-block,
body.path-products main .region-page-title .block-page-title-block {
  text-align: center;
  padding-top: 1em;
  margin-bottom: 0.35rem;
}

body.path-products main .block-page-title-block h1,
body.path-products main .region-page-title h1.page-title {
  font-size: var(--strateg-type-h1-inner-size);
  font-weight: var(--strateg-type-h1-inner-weight);
  color: var(--strateg-color-ink);
  margin: 0 0 0.35rem 0;
  text-align: center;
}

body.path-products #header,
body.path-products header.header {
  display: none !important;
}

body.path-products .strateg2026-convert-masthead {
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

/* Directories hub: H1 is in-column masthead (wizardLayout); hide Drupal page-title
   duplicate. path-lk already handled in funnel-report / convert-wizard — directories
   is /products/directories (path-products), so it needs its own hide. */
body.strateg-operator-directories-page.path-products main .block-page-title-block,
body.strateg-operator-directories-page.path-products main .region-page-title .block-page-title-block,
body.strateg-operator-directories-page.path-products main .region-content > .block-page-title-block:first-child,
body.strateg-operator-catalog-page.path-products main .block-page-title-block,
body.strateg-operator-catalog-page.path-products main .region-page-title .block-page-title-block,
body.strateg-operator-catalog-page.path-products main .region-content > .block-page-title-block:first-child {
  display: none !important;
}
body.strateg-operator-directories-page.path-products .strateg2026-convert-masthead,
body.strateg-operator-directories-page.path-products .strateg2026-convert-masthead--in-main,
body.strateg-operator-catalog-page.path-products .strateg2026-convert-masthead,
body.strateg-operator-catalog-page.path-products .strateg2026-convert-masthead--in-main {
  text-align: left;
  /* Match hub/OMS masthead air under breadcrumbs (was 1.35rem; rail already 2.25rem). */
  margin: 2.25rem 0 1rem;
  padding: 0.35rem 0 0;
  background: transparent;
}

/* Catalog hub H1 (#362 WS1): inner scale, ink — not purple. */
body.strateg-operator-catalog-page.path-products .strateg-operator-hub-page__title {
  font-size: var(--strateg-type-h1-inner-size);
  font-weight: var(--strateg-type-h1-inner-weight);
  color: var(--strateg-color-ink);
  margin: 0 0 0.35rem 0;
  padding: 0;
  text-align: left;
}
body.strateg-operator-catalog-page.path-products .strateg2026-convert-masthead--in-main .strateg2026-convert-subtitle {
  margin: 0;
  max-width: none;
  text-align: left;
}
@media (min-width: 992px) {
  /* Extra right air for «Профиль» on directories (path-products hub). */
  body.strateg-operator-directories-page.path-products .strateg-convert-wizard__rail-col {
    padding-right: 1.25rem;
  }
}

.strateg-operator-directories__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.strateg-operator-directories__card {
  /* Resting = former hover brightness (#258); hover one step more saturated. */
  --dir-card-bg: #e4eaf6;
  --dir-card-border: #b8c4db;
  --dir-card-bg-hover: #d0daf0;
  --dir-card-border-hover: #9aabca;
  background: var(--dir-card-bg);
  border: 1px solid var(--dir-card-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(31, 42, 68, 0.04);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.strateg-operator-directories__card:hover,
.strateg-operator-directories__card:focus-visible {
  background: var(--dir-card-bg-hover);
  border-color: var(--dir-card-border-hover);
  box-shadow: 0 4px 14px rgba(31, 42, 68, 0.12);
  outline: none;
  text-decoration: none;
  transform: translateY(-1px);
}

.strateg-operator-directories__card--sku {
  --dir-card-bg: #d9ebff;
  --dir-card-border: #9fc0ea;
  --dir-card-bg-hover: #c4e0ff;
  --dir-card-border-hover: #7eacdf;
}

.strateg-operator-directories__card--partner-pickup {
  --dir-card-bg: #d8f3e4;
  --dir-card-border: #9fd4b8;
  --dir-card-bg-hover: #c2ebd4;
  --dir-card-border-hover: #7fc4a0;
}

.strateg-operator-directories__card--stock-3mf {
  --dir-card-bg: #ffe9cf;
  --dir-card-border: #e0bc8a;
  --dir-card-bg-hover: #ffdcb0;
  --dir-card-border-hover: #d0a66e;
}

.strateg-operator-directories__card--stock-2d {
  --dir-card-bg: #eedff7;
  --dir-card-border: #c9aedb;
  --dir-card-bg-hover: #e2cff2;
  --dir-card-border-hover: #b895d0;
}

.strateg-operator-directories__card--filaments {
  --dir-card-bg: #d7f1f6;
  --dir-card-border: #9dced8;
  --dir-card-bg-hover: #c2e8ef;
  --dir-card-border-hover: #7cbac8;
}

.strateg-operator-directories__card--printers {
  --dir-card-bg: #f0e2dd;
  --dir-card-border: #d4b3a8;
  --dir-card-bg-hover: #e6d3cc;
  --dir-card-border-hover: #c49a8c;
}

.strateg-operator-directories__card--media-storage {
  --dir-card-bg: #e0e7ff;
  --dir-card-border: #a5b4fc;
  --dir-card-bg-hover: #c7d2fe;
  --dir-card-border-hover: #818cf8;
}

.strateg-operator-directories__title {
  color: #1f2a44;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

.strateg-operator-directories__description {
  color: #4a5474;
  flex: 1 1 auto;
  font-size: 0.9rem;
  margin: 0;
}

/* /products/2d-examples — curated 2D preset gallery (MVP). */
.strateg-convert-2d-examples {
  margin: 0;
  max-width: none;
}

.strateg-convert-2d-examples__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: 0.65rem 0.85rem;
  list-style: none;
  counter-reset: sc2e-step;
  border: 1px solid #d8e2ff;
  border-radius: 0.65rem;
  background: linear-gradient(135deg, #f4f8ff 0%, #f8f4ff 100%);
  font-size: 0.88rem;
  color: #334155;
}

.strateg-convert-2d-examples__steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  counter-increment: sc2e-step;
}

.strateg-convert-2d-examples__steps li::before {
  content: counter(sc2e-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #7c4dff;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.strateg-convert-2d-examples__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.strateg-convert-2d-examples__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #dee2e6;
  border-radius: 0.65rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.strateg-convert-2d-examples__card:hover {
  border-color: #7c4dff;
  box-shadow: 0 4px 14px rgba(124, 77, 255, 0.12);
}

.strateg-convert-2d-examples__thumb-wrap {
  aspect-ratio: 4 / 3;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.strateg-convert-2d-examples__thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.35rem;
}

.strateg-convert-2d-examples__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem 1rem;
  flex: 1 1 auto;
}

.strateg-convert-2d-examples__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.strateg-convert-2d-examples__hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6c757d;
  flex: 1 1 auto;
}

.strateg-convert-2d-examples__cta {
  align-self: flex-start;
}

.strateg-convert-2d-examples__alt {
  border-top: 1px dashed #dee2e6;
  padding-top: 0.85rem;
}

.strateg-convert-2d-examples__alt-lead {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: #495057;
}

.strateg-convert-2d-examples__alt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  font-size: 0.85rem;
}

.strateg-convert-2d-examples__alt-link {
  color: #0d6efd;
  text-decoration: underline;
}

.strateg-convert-2d-examples__alt-link:hover,
.strateg-convert-2d-examples__alt-link:focus-visible {
  color: #0a58ca;
}

.strateg-convert-catalog-stub__cta--secondary {
  background: #fff;
  color: #0d6efd;
  border: 1px solid #0d6efd;
}

.strateg-convert-catalog-stub__cta--secondary:hover,
.strateg-convert-catalog-stub__cta--secondary:focus-visible {
  background: #eef5ff;
  color: #0a58ca;
}

/* Kanban #184 — /products/teaching-model-184 */

.strateg-convert-teaching-model-184 {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem auto 0 auto;
  max-width: 960px;
}

@media (min-width: 900px) {
  .strateg-convert-teaching-model-184 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

.strateg-convert-teaching-model-184__still img {
  display: block;
  max-width: 100%;
  border: 1px solid #e6e8f1;
  border-radius: 8px;
  background: #353540;
}

.strateg-convert-teaching-model-184__still figcaption {
  margin-top: 0.5rem;
  color: #5c6370;
  font-size: 0.9rem;
}


/* Full kit SKU — /products/teaching-model-184 (compact thumbs + lightbox) */

.strateg-convert-teaching-model-184-kit {
  display: grid;
  gap: 1.25rem;
  margin: 1.25rem auto 0 auto;
  max-width: 960px;
}

.strateg-convert-teaching-model-184-kit__gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 0.75rem 0.85rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.strateg-convert-teaching-model-184-kit__gallery > li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}

.strateg-convert-teaching-model-184-kit__gallery span {
  display: block;
  margin: 0;
  color: #5c6370;
  font-size: 0.78rem;
  line-height: 1.3;
  min-width: 0;
}

.strateg-convert-media-thumb {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid #e6e8f1;
  border-radius: 8px;
  background: #f4f5f7;
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.strateg-convert-media-thumb img,
.strateg-convert-media-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.strateg-convert-media-thumb--catalog {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 100%;
}

.strateg-convert-media-thumb--video {
  background: #111;
  cursor: pointer;
}

.strateg-convert-media-thumb__badge {
  position: absolute;
  inset: auto auto 0.4rem 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
}

.strateg-convert-media-thumb:focus-visible {
  outline: 2px solid #7c4dff;
  outline-offset: 2px;
}

.strateg-convert-catalog__gallery-tile--photo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.strateg-convert-media-lightbox {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: min(960px, 96vw);
  max-height: 92vh;
  width: auto;
  background: #0f1115;
  color: #f5f6f8;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.strateg-convert-media-lightbox::backdrop {
  background: rgba(12, 14, 20, 0.72);
}

.strateg-convert-media-lightbox__chrome {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0.35rem 0.35rem 0 0;
}

.strateg-convert-media-lightbox__close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  border-radius: 8px;
}

.strateg-convert-media-lightbox__close:hover,
.strateg-convert-media-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.strateg-convert-media-lightbox__stage {
  padding: 0 0.75rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.strateg-convert-media-lightbox__stage img,
.strateg-convert-media-lightbox__stage video {
  display: block;
  max-width: min(900px, 90vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
}

.strateg-convert-media-lightbox__caption {
  margin: 0;
  padding: 0 0.9rem 0.9rem;
  color: #c9ced8;
  font-size: 0.9rem;
}

.strateg-convert-teaching-model-184-kit__meta {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.strateg-convert-teaching-model-184-kit__meta dt {
  font-weight: 600;
  color: #1a1d26;
}

.strateg-convert-teaching-model-184-kit__meta dd {
  margin: 0.15rem 0 0 0;
  color: #5c6370;
}

.strateg-convert-catalog-page__price {
  margin: 0.5rem 0 0 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Kanban #355 — distinct pastel fills for the three front-hub groups
   (Детям / Взрослым / Доклады). Same token family as product SKU tiles. */
.strateg-front-hub .strateg-convert-catalog__card--for-kids {
  --sku-card-bg: var(--strateg-pastel-for-kids-bg);
  --sku-card-border: var(--strateg-pastel-for-kids-border);
  --sku-card-bg-hover: #c2ebd4;
  --sku-card-border-hover: #7fc4a0;
}

.strateg-front-hub .strateg-convert-catalog__card--for-adults {
  --sku-card-bg: var(--strateg-pastel-for-adults-bg);
  --sku-card-border: var(--strateg-pastel-for-adults-border);
  --sku-card-bg-hover: #ffdcb0;
  --sku-card-border-hover: #d0a66e;
}

.strateg-front-hub .strateg-convert-catalog__card--talks {
  --sku-card-bg: var(--strateg-pastel-talks-bg);
  --sku-card-border: var(--strateg-pastel-talks-border);
  --sku-card-bg-hover: #e2cff2;
  --sku-card-border-hover: #b895d0;
}

/* Kanban #355 — front hub link list inside expand panel */
.strateg-front-hub__links {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.strateg-front-hub__links--cards {
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.strateg-front-hub__link-item {
  margin: 0;
}

.strateg-front-hub__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: #3d2bb5;
  font-weight: 600;
  text-decoration: none;
}

.strateg-front-hub__link:hover {
  text-decoration: underline;
}

.strateg-front-hub__link--site {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sku-card-border, var(--sku-expand-border));
  border-radius: var(--strateg-radius);
  /* Paper surface + lift: photo, title and description share one raised card.
     Group pastel stays on the border only — fill used to match the expand panel
     so only the photo read as a card (#362). */
  background: #fff;
  box-shadow: 0 8px 20px rgba(27, 26, 46, 0.12);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.strateg-front-hub [data-expand-panel="for_kids"] .strateg-front-hub__link--site,
.strateg-front-hub .strateg-convert-catalog__card--for-kids .strateg-front-hub__link--site {
  background: #fff;
  border-color: var(--strateg-pastel-for-kids-border);
}

.strateg-front-hub [data-expand-panel="for_adults"] .strateg-front-hub__link--site,
.strateg-front-hub .strateg-convert-catalog__card--for-adults .strateg-front-hub__link--site {
  background: #fff;
  border-color: var(--strateg-pastel-for-adults-border);
}

.strateg-front-hub [data-expand-panel="talks"] .strateg-front-hub__link--site,
.strateg-front-hub .strateg-convert-catalog__card--talks .strateg-front-hub__link--site {
  background: #fff;
  border-color: var(--strateg-pastel-talks-border);
}

.strateg-front-hub__link--site:hover,
.strateg-front-hub__link--site:focus-visible {
  text-decoration: none;
  filter: brightness(0.97);
}

.strateg-front-hub__link--site:hover .strateg-front-hub__link-title {
  text-decoration: underline;
}

.strateg-front-hub .strateg-convert-catalog__title,
.strateg-front-hub__link-title {
  font-size: var(--strateg-type-card-title-size);
  font-weight: var(--strateg-type-card-title-weight);
  color: var(--strateg-color-ink);
}

.strateg-front-hub .strateg-convert-catalog__subtitle,
.strateg-front-hub__link-desc {
  font-size: var(--strateg-type-teaser-size);
  font-weight: var(--strateg-type-teaser-weight);
  color: var(--strateg-color-ink);
}

.strateg-front-hub .strateg-convert-catalog__detail-title {
  font-size: var(--strateg-type-h2-group-size);
  font-weight: var(--strateg-type-h2-group-weight);
  color: var(--strateg-color-ink);
}

.strateg-front-hub__link--mifograd {
  --hub-site-icon-bg: linear-gradient(140deg, #e7f6ee 0%, #d8f3e4 100%);
  --hub-site-icon-fg: #1f7a4d;
}

.strateg-front-hub__link--kuryan-kids {
  --hub-site-icon-bg: linear-gradient(140deg, #fff3dc 0%, #ffe9cf 100%);
  --hub-site-icon-fg: #9a5b12;
}

.strateg-front-hub .strateg-convert-catalog__icon {
  background: transparent;
}

.strateg-front-hub .strateg-convert-catalog__icon svg {
  height: 88px;
  width: 88px;
}

.strateg-front-hub .strateg-convert-catalog__card--for-kids .strateg-convert-catalog__icon {
  color: var(--strateg-pastel-for-kids-icon);
}

.strateg-front-hub .strateg-convert-catalog__card--for-adults .strateg-convert-catalog__icon {
  color: var(--strateg-pastel-for-adults-icon);
}

.strateg-front-hub .strateg-convert-catalog__card--talks .strateg-convert-catalog__icon {
  color: var(--strateg-pastel-talks-icon);
}

.strateg-front-hub__link-icon {
  align-items: center;
  background: transparent;
  border-radius: 0;
  color: var(--hub-site-icon-fg, #5b34e0);
  display: flex;
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 1 / 1;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

.strateg-front-hub__link-icon--photo {
  background: transparent;
  padding: 0;
}

.strateg-front-hub__link-icon img,
.strateg-front-hub__link-icon .strateg-convert-catalog__icon-photo {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.strateg-front-hub__link-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem 0.9rem 1rem;
  background: #fff;
}

.strateg-front-hub__link-title {
  color: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.strateg-front-hub__link-desc {
  color: #5c6370;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.strateg-front-hub__link--pending {
  color: #5c6370;
  font-weight: 500;
  cursor: default;
}

.strateg-front-hub__link--pending[data-hub-sku-trigger] {
  cursor: pointer;
}

.strateg-front-hub__link--pending.strateg-front-hub__link--site {
  background: #f4f5f7;
  border-color: #e2e5ea;
}

.strateg-front-hub__badge {
  font-size: 0.85em;
  font-weight: 500;
  color: #8a9099;
}

/* Kanban #359 — in-page SKU copy under hub group expand (no /convert/start navigation). */
.strateg-front-hub__sku-panel {
  margin-top: 1rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid #e4dff6;
  border-radius: 14px;
  background: #fbf8ff;
}

.strateg-front-hub__sku-panel[hidden] {
  display: none;
}

.strateg-front-hub__link.is-sku-open {
  border-color: #cfc4ef;
  background: #efeaff;
}

/* Unselected hub SKU tiles: same grayscale/opacity as expanded group stem. */
.strateg-front-hub__link-item.is-sku-dimmed {
  filter: grayscale(0.92);
  opacity: 0.45;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

/* Kanban #359 — in-page wizard mount on `/` (catalog hidden, pathname stays). */
.strateg-front-hub-wizard-mount[hidden] {
  display: none;
}

.strateg-front-hub-page.is-hub-wizard-open .strateg-convert-wizard__main > .strateg2026-convert-masthead--in-main,
.strateg-front-hub-page.is-hub-wizard-open .strateg-front-hub-wizard-mount .strateg2026-convert-masthead--in-main {
  display: none;
}

.strateg-front-hub-page.is-hub-wizard-open [data-strateg-convert-catalog] {
  display: none;
}

/* Embed fragment is already inside hub `__main` — fill that column, do not nest 66%. */
.strateg-front-hub-wizard-mount .strateg-convert-wizard__main,
.strateg-front-hub-wizard-mount .strateg-front-hub-embed-shell {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}