/* Product page of a speaking deck (Shturko_Product_Showcase): light, folded sections. */
.sps {
  --sps-ink: #1f3a52;
  --sps-text: #33475b;
  --sps-muted: #6b7a89;
  --sps-line: #e6e9ee;
  --sps-soft: #f7f8fa;
  clear: both;
  margin: 2.5rem 0 1.5rem;
  color: var(--sps-text);
  line-height: 1.6;
}
.sps h2, .sps h3, .sps h4 {  letter-spacing: 0; text-transform: none; }
.sps__head { margin: 0 0 1rem; }
.sps__kicker { margin: 0; color: var(--sps-muted); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.sps__title { margin: 0.2rem 0 0; color: var(--sps-ink); font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 400 !important; line-height: 1.3; }
.sps__h3 { margin: 0 0 0.4rem; color: var(--sps-ink); font-size: 1.15rem; font-weight: 400 !important; }
.sps__note { margin: 0.6rem 0 0; color: var(--sps-muted); font-size: 0.88rem; }
.sps__note a { color: inherit; text-decoration: underline; }
.sps p { margin: 0 0 0.75rem; }

/* Folded sections. */
.sps-sec { margin: 0 0 0.6rem; border: 1px solid var(--sps-line); border-radius: 16px; background: #fff; }
.sps-sec__summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
}
.sps-sec__summary::-webkit-details-marker { display: none; }
.sps-sec__summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-left: auto; border-right: 1.5px solid var(--sps-muted); border-bottom: 1.5px solid var(--sps-muted); transform: rotate(45deg); transition: transform 0.2s ease; }
.sps-sec[open] > .sps-sec__summary::after { transform: rotate(-135deg); }
.sps-sec__summary:hover { background: var(--sps-soft); border-radius: 16px; }
.sps-sec__summary:focus-visible { outline: 2px solid #287b9b; outline-offset: 2px; border-radius: 16px; }
.sps-sec__icon { flex: 0 0 auto; font-size: 1.35rem; line-height: 1; }
.sps-sec__text { display: flex; flex-direction: column; min-width: 0; }
.sps-sec__title { color: var(--sps-ink); font-size: 1.05rem; font-weight: 400; }
.sps-sec__sub { color: var(--sps-muted); font-size: 0.9rem; }
.sps-sec__body { padding: 0.2rem 1.1rem 1.2rem; }
.sps-sec--pro { border-color: #d9d0f1; background: #faf8ff; }
.sps-sec--pro .sps-sec__title { color: #4a3891; }
.sps-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1rem, 3vw, 1.75rem); align-items: start; }
.sps-split__copy > :last-child { margin-bottom: 0; }

/* Cards that flip. */
.sps-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); margin: 0.5rem 0 0; padding: 0; list-style: none; }
.sps-card__flip {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
  perspective: 1200px;
}
.sps-card__flip:focus-visible { outline: 2px solid #287b9b; outline-offset: 4px; border-radius: 14px; }
.sps-card__inner { position: relative; display: block; aspect-ratio: 560 / 684; transform-style: preserve-3d; transition: transform 0.6s ease; }
.sps-card__flip[aria-pressed="true"] .sps-card__inner { transform: rotateY(180deg); }
.sps-card__side {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  backface-visibility: hidden;
  box-shadow: 0 4px 14px rgba(31, 51, 67, 0.1);
  object-fit: cover;
}
.sps-card__side--back { transform: rotateY(180deg); }
.sps-card__hint {
  position: absolute;
  right: 0.5rem;
  bottom: 0.8rem;
  z-index: 2;
  padding: 0.2em 0.65em;
  border: 1px solid var(--sps-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sps-ink);
  font-size: 0.78rem;
}
.sps-card__kind { margin: 0.7rem 0 0.15rem !important; color: var(--sps-ink); font-weight: 400; }
.sps-card__txt { margin: 0 0 0.2rem !important; font-size: 0.88rem; color: var(--sps-muted); }

/* Lists, steps, games. */
.sps-list { margin: 0 0 0.75rem; padding: 0; list-style: none; }
.sps-list li { position: relative; margin: 0 0 0.4rem; padding-left: 1.4rem; }
.sps-list li::before { content: "·"; position: absolute; left: 0.35rem; color: var(--sps-muted); font-weight: 400; }
.sps-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.sps-steps li { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem; border-radius: 12px; background: var(--sps-soft); font-size: 0.92rem; }
.sps-steps__icon { font-size: 1.4rem; line-height: 1; }
.sps-steps__head { color: var(--sps-ink); font-weight: 400; }
.sps-games { margin: 0 0 0.75rem; padding: 0; list-style: none; }
.sps-games li { display: flex; gap: 0.7rem; margin: 0 0 0.5rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--sps-soft); font-size: 0.93rem; }
.sps-games__icon { font-size: 1.25rem; line-height: 1.3; }
.sps-games__name { display: block; color: var(--sps-ink); font-weight: 400; }
.sps-mission { margin: 0 0 0.75rem; padding: 0.8rem 0.95rem; border-left: 3px solid #e3b98f; border-radius: 0 12px 12px 0; background: #fdf8f2; }
.sps-mission__title { margin: 0 0 0.25rem !important; color: var(--sps-ink); font-weight: 400; }
.sps-mission p:last-child { margin: 0; }
.sps-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.sps-chips li { padding: 0.3em 0.75em; border: 1px solid var(--sps-line); border-radius: 999px; background: #fff; font-size: 0.86rem; }

/* Кръгове на доверие: the four circles, the four play steps in a 2×2 grid. */
.sps-rings { margin: 0 0 0.75rem; padding: 0; list-style: none; }
.sps-rings li { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 0.5rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--sps-soft); font-size: 0.93rem; }
.sps-rings__dot { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; border: 3px solid var(--ring); border-radius: 50%; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--ring); }
@media (min-width: 861px) {
  .sps--circles .sps-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Clips. */
.sps-clip { margin: 0; }
.sps-clip__video { display: block; width: 100%; max-height: 560px; border-radius: 14px; background: var(--sps-soft); object-fit: contain; }
.sps-sec__body > .sps-clip { max-width: 640px; margin: 0 auto 0.5rem; }

@media (max-width: 860px) {
  .sps-split { grid-template-columns: 1fr; }
  .sps-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sps-cards { grid-template-columns: 1fr 1fr; }
  .sps-cards li:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
  .sps-sec__summary { padding: 0.8rem 0.9rem; }
  .sps-sec__body { padding: 0.2rem 0.9rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sps-card__inner, .sps-sec__summary::after { transition: none; }
}

/* Sections the gallery jumps to stay clear of the fixed header. */
.sps-sec { scroll-margin-top: 130px; }

/* Tiles under the main product image: the cards, then the bonus extras; one row that slides. */
.spg-slider { position: relative; margin: 0.75rem 0 0; }
.spg-strip { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; }
.spg-strip::-webkit-scrollbar { display: none; }
.spg-slider .spg-tile { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.3rem; width: 116px; padding: 0.35rem; border: 1px solid #e6e9ee !important; border-radius: 12px; background: #fff !important; background-image: none !important; box-shadow: none; color: #1f3a52 !important; font-size:inherit;font-weight:inherit;line-height:inherit; font-size: 0.76rem; line-height: 1.25; text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; scroll-snap-align: start; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.spg-slider .spg-tile:hover, .spg-slider .spg-tile:focus, .spg-slider .spg-tile:active { border-color: #f3c3ab !important; background: #fff !important; color: #1f3a52 !important; box-shadow: 0 3px 12px rgba(31, 58, 82, 0.1); transform: translateY(-1px); }
.spg-slider .spg-tile:focus-visible { outline: 2px solid #287b9b; outline-offset: 2px; }
.spg-tile img { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; background: #f7f8fa; object-fit: cover; object-position: top; }
.spg-tile__label { overflow: hidden; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.spg-tile__tag { position: absolute; top: 0.55rem; left: 0.55rem; padding: 0.1em 0.5em; border-radius: 999px; background: #f05a28; color: #fff; font-size: 0.66rem; font-weight: 400; }
.spg-slider .spg-slider__arrow { position: absolute; top: 38%; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 1px solid #e6e9ee !important; border-radius: 50%; background: rgba(255, 255, 255, 0.95) !important; background-image: none !important; color: #1f3a52 !important; box-shadow: 0 2px 8px rgba(31, 58, 82, 0.15); font-size:inherit;font-weight:inherit;line-height:inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.spg-slider .spg-slider__arrow:hover, .spg-slider .spg-slider__arrow:focus { background: #fff !important; color: #f05a28 !important; }
.spg-slider__arrow--prev { left: -10px; }
.spg-slider__arrow--next { right: -10px; }
.spg-slider__arrow[hidden] { display: none !important; }

/* Gallery dialog. The theme paints buttons on hover; here they stay quiet. */
html.spg-open { overflow: hidden; }
.spg { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; background: rgba(20, 28, 38, 0.96); color: #fff; }
.spg[hidden] { display: none; }
.spg button { text-transform: none; letter-spacing: 0; box-shadow: none; background-image: none !important; }
.spg__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; }
.spg__count { margin-right: auto; font-size: 0.9rem; opacity: 0.8; }
.spg .spg__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; font-size:inherit;font-weight:inherit;line-height:inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.spg .spg__btn:hover, .spg .spg__btn:focus { background: rgba(255, 255, 255, 0.26) !important; color: #fff !important; }
.spg .spg__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.spg__btn[hidden] { display: none !important; }
.spg__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 0.5rem; }
.spg__view { display: flex; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y pinch-zoom; }
.spg__frame { position: relative; display: block; max-width: 100%; max-height: 100%; margin: auto; align-self: center; }
.spg__img, .spg__video { display: block; flex: 0 0 auto; align-self: center; max-width: 100%; max-height: 100%; margin: auto; border-radius: 10px; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.spg__frame .spg__img { max-width: 100%; max-height: 100%; margin: 0; }
.spg__frame[hidden], .spg__img[hidden], .spg__video[hidden] { display: none; }
.spg__img.is-zoomable { cursor: zoom-in; }
.spg.is-zoomed .spg__view { overflow: auto; scrollbar-width: none; touch-action: auto; cursor: grab; }
.spg.is-zoomed .spg__view::-webkit-scrollbar { display: none; }
.spg.is-zoomed .spg__view.is-dragging { cursor: grabbing; }
/* Zoomed: the card keeps its own height (a stretched flex item stays fitted and never grows). */
.spg.is-zoomed .spg__img { align-self: flex-start; height: auto; margin: 0 auto; border-radius: 10px; cursor: zoom-out; }
.spg__nav { position: absolute; top: 50%; z-index: 1; width: 48px; height: 48px; margin-top: -24px; font-size: 2rem; }
/* Prev / next must be easy to find on the dark backdrop (owner, 2026-10-28). */
.spg .spg__btn.spg__nav { width: 52px; height: 52px; margin-top: -26px; background: rgba(255, 255, 255, 0.9) !important; color: #1f3a52 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.spg .spg__btn.spg__nav:hover, .spg .spg__btn.spg__nav:focus { background: #fff !important; color: #1f3a52 !important; }
.spg__nav--prev { left: 0.6rem; }
.spg__nav--next { right: 0.6rem; }
.spg.is-zoomed .spg__nav { display: none; }
.spg__info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; max-width: 720px; width: 100%; margin: 0 auto; padding: 0.7rem 1rem 0.2rem; }
.spg__caption { flex: 1 1 100%; margin: 0; font-size: 1rem; font-weight: 400; text-align: center; }
.spg__caption[hidden] { display: none; }
.spg__tag { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; background: #f05a28; font-size: 0.75rem; font-weight: 400; }
.spg__tag[hidden] { display: none; }
.spg .spg__more { margin: 0; padding: 0.55em 1.2em; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 999px; background: transparent !important; color: #fff !important; font-size:inherit;font-weight:inherit;line-height:inherit; font-size: 0.95rem; font-weight: 400; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.spg .spg__more:hover, .spg .spg__more:focus, .spg .spg__more[aria-expanded="true"] { border-color: #fff !important; background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
.spg__more[hidden] { display: none !important; }
.spg__pick {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 0.35rem;
	color: #fff;
	font-size:inherit;font-weight:inherit;line-height:inherit;
	font-size: 0.95rem;
	font-weight: 400;
	cursor: pointer;
}
.spg__pick input {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	flex: none;
	border: 2px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: 8px !important;
	background: transparent !important;
	cursor: pointer;
}
.spg__pick input:checked {
	border-color: #f04d23 !important;
	background-color: #f04d23 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.2l3 3 6.2-6.4'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 12px !important;
}
.spg__pick input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.spg__pick[hidden] { display: none !important; }
.spg a.spg__download {
	text-decoration: none;
}
.spg .spg__download svg,
.spg .spg__dl svg { display: block; }
.spg__download[hidden],
.spg__dl[hidden] { display: none !important; }
.spg__dl {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: #f04d23;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
	text-decoration: none;
}
.spg__dl:hover,
.spg__dl:focus-visible {
	background: #f04d23;
	color: #fff;
	outline: none;
}
.spg.is-zoomed .spg__dl { display: none !important; }
.spg__thumbs { display: flex; gap: 0.4rem; justify-content: safe center; overflow-x: auto; padding: 0.5rem 0.8rem 0.9rem; }
.spg .spg__thumb { flex: 0 0 auto; width: 52px; height: 60px; padding: 0; border: 2px solid transparent !important; border-radius: 8px; background: rgba(255, 255, 255, 0.1) !important; cursor: pointer; overflow: hidden; opacity: 0.6; transition: opacity 0.2s; }
.spg__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.spg .spg__thumb:hover, .spg .spg__thumb:focus { opacity: 0.9; background: rgba(255, 255, 255, 0.1) !important; }
.spg .spg__thumb.is-active { border-color: rgba(255, 255, 255, 0.85) !important; opacity: 1; }

/* «See more» panel: on the right on wide screens, a sheet from the bottom on phones. */
.spg__panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; width: min(440px, 42vw); background: #fff; color: #33475b; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25); }
.spg__panel[hidden] { display: none; }
.spg.has-panel { padding-right: min(440px, 42vw); }
.spg__panel-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem 0.7rem 1.1rem; border-bottom: 1px solid #e6e9ee; }
.spg__panel-title { flex: 1; margin: 0 !important; color: #1f3a52; font-size: 1.05rem; font-weight: 400; text-align: left !important; }
.spg .spg__panel-close { flex: 0 0 auto; width: 40px; height: 40px; background: #f1f3f6 !important; color: #1f3a52 !important; font-size: 1.1rem; }
.spg .spg__panel-close:hover, .spg .spg__panel-close:focus { background: #e6e9ee !important; color: #1f3a52 !important; }
.spg .spg__panel-close:focus-visible { outline-color: #287b9b; }
.spg__panel-body { flex: 1; min-height: 0; margin: 0 !important; padding: 1rem 1.1rem 1.4rem; overflow-y: auto; overscroll-behavior: contain; font-size: 0.95rem; text-align: left; }
.spg__panel-body p { color: inherit; text-align: left !important; }
.spg__panel-body .sps-split, .spg__panel-body .sps-steps { grid-template-columns: 1fr; }
.spg__panel-body .sps-cards { grid-template-columns: 1fr 1fr; }
.spg__panel-body .sps-cards li:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
@media (max-width: 760px) {
  .spg.has-panel { padding-right: 0; padding-bottom: 60vh; }
  .spg.has-panel .spg__info, .spg.has-panel .spg__thumbs { display: none; }
  .spg__panel { top: auto; left: 0; width: auto; max-height: 60vh; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3); }
}
@media (max-width: 560px) {
  .spg .spg__btn.spg__nav { width: 42px; height: 42px; margin-top: -21px; font-size: 1.6rem; }
  .spg__info { padding-top: 0.4rem; }
  .spg-slider .spg-tile { width: 104px; }
  .spg-slider__arrow--prev { left: -4px; }
  .spg-slider__arrow--next { right: -4px; }
}