/* Design package page — Template Design Package (design update 2026-10-20). Breadcrumb 40/80/0 (13px). Top split
   padding 40/80/76, flex gap 56: cover column 400px fixed (frame 1:1, radius 24, border .14, .06; no switcher), info
   flex 1, min-width 0, max 680 (padding-top 6): kicker 600 12 .07em; H1 700 48/1.08 −.025em (mt 16); price 700 36/1
   (mt 22); short 600 16/1.6 .82 (mt 22) + underlined orange link; CTA row mt 28 gap 16, "About …" 700 15 underline
   offset 4; login note 600 13 .68 (mt 14); facts mt 30, padding-top 22, border-top .14, gap 8, 600 13.5 .82, 16px
   orange checks; license note padding-left 26, 12.5 .68.
   What's included 0/80/76: H2 700 32/1.15 + sub; overview (only without items and devices) mt 28, centred max 960,
   radius 24, border .14, #f7f8f9; devices box (below); contents as a check list mt 22, centred max 960, grid auto-fit
   minmax(200, 1fr), gap 18/28, 16px orange check (mt 2), title 700 14.5/1.35, text 600 13.5/1.5 .82.
   Items 0/80/76, centred max 960, gap 14: kicker + hint 600 13.5 .68 (right); grid gap 10; tile button padding 10,
   radius 4, border .14, .06 (hover: border orange .7, .1), image as background (contain; cover: radius 2);
   "+ N more" 1.5px .4 border, 700 15.
   See it in Moodle 0/80/76: H2 28 + sub 600 13.5 .68 (right); centred max 960 (mt 24), gap 14: orange kicker, frame
   16:10 radius 24, border .14 on white (placeholder: dashed .3 on .06), Screenshot Gallery inside (contain).
   How to integrate 0/80/76, split gap 56: H2 28; steps gap 18 (mt 24), badge 700 13 ink on orange, radius 4, padding
   5/8; title 700 16; text 600 14.5/1.55 .82; video link mt 22, 700 14 orange. Guide card .06, radius 24, padding
   28/30, gap 12; title 700 20/1.3; text 600 14.5/1.55 .82; link 700 14 orange (mt 4).
   Related 0/80/96: H2 28 + "See all ↗" 600 13.5 .68; grid 4 gap 12 (mt 24). */
.bd-ds-pkg__top { padding-top: 40px; padding-bottom: calc(76px * var(--bd-s)); }
.bd-ds-pkg__notices { margin-top: 22px; }
.bd-ds-pkg__notices > * { margin: 0; }
.bd-ds-pkg__split { display: flex; gap: 56px; align-items: flex-start; margin-top: 40px; }
.bd-ds-pkg__gallery { flex: none; width: 400px; min-width: 0; }
.bd-ds-pkg__frame { position: relative; aspect-ratio: 1 / 1; border-radius: var(--bd-r-card); overflow: hidden; border: 1px solid rgba(247,248,249,.14); background: rgba(247,248,249,.06); }
.bd-ds-pkg__view { position: absolute; inset: 0; }
.bd-ds-pkg__cover { position: absolute; inset: 0; aspect-ratio: auto; }
/* Area illustration instead of the cover — #0d0a3f; Update 7: the square version (illuSquare) fills the box
   (template illuImgStyle "center / cover"). */
.bd-ds-pkg__illu { display: flex; align-items: center; justify-content: center; background: #0d0a3f; }
.bd-ds-pkg__illu-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-ds-pkg__info { flex: 1; min-width: 0; max-width: 680px; padding-top: 6px; }
.bd-ds-pkg__kicker { font-size: 12px; margin: 0; }
.bd-ds-pkg__title { margin: 16px 0 0; font: 700 48px/1.08 var(--wp--preset--font-family--montserrat); letter-spacing: -.025em; color: var(--bd-haze); }
/* Price row (Update 7): price, then the "Animated" chip, centred on the line. */
.bd-ds-pkg__price-row { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.bd-ds-pkg__price { margin: 0; font: 700 36px/1 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-pkg__short { margin: 22px 0 0; font: 600 16px/1.6 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-ds-pkg__short a { color: var(--bd-sun); text-decoration: underline; text-underline-offset: 3px; }
.bd-ds-pkg__short a:hover { color: var(--bd-haze); }
.bd-ds-pkg__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.bd-ds-pkg__cta form, .bd-ds-pkg__cta .bd-free-dl, .bd-ds-pkg__cta .bd-free-dl form { margin: 0; }
.bd-ds-pkg__about { font: 700 15px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); text-decoration: underline; text-underline-offset: 4px; }
.bd-ds-pkg__about:hover { color: var(--bd-haze); }
.bd-ds-pkg__login { margin: 14px 0 0; font: 600 13px/1.5 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
.bd-ds-pkg__facts { display: flex; flex-direction: column; gap: 8px; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(247,248,249,.14); list-style: none; font: 600 13.5px/1.4 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-ds-pkg__facts li { display: flex; gap: 10px; align-items: center; }
.bd-ds-pkg__facts svg { flex: none; color: var(--bd-sun); }
.bd-ds-pkg__facts li.is-note { padding-left: 26px; font-size: 12.5px; color: var(--bd-meta); }

.bd-ds-pkg__h2 { margin: 0; font: 700 32px/1.15 var(--wp--preset--font-family--montserrat); letter-spacing: -.02em; color: var(--bd-haze); }
.bd-ds-pkg__h2.is-small { font-size: var(--wp--preset--font-size--section-small); }
.bd-ds-pkg .bd-section-head { margin-bottom: 0; }
.bd-ds-pkg__included { padding-bottom: calc(76px * var(--bd-s)); }
.bd-ds-pkg__media { box-sizing: border-box; max-width: 960px; margin: 28px auto 0; border-radius: var(--bd-r-card); overflow: hidden; border: 1px solid rgba(247,248,249,.14); background: #f7f8f9; }
.bd-ds-pkg__media img, .bd-ds-pkg__media video { display: block; width: 100%; height: auto; margin: 0 auto; }
.bd-ds-pkg__checks { box-sizing: border-box; max-width: 960px; margin: 22px auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 28px; }
.bd-ds-pkg__checks li { display: flex; gap: 10px; align-items: flex-start; }
.bd-ds-pkg__checks svg { flex: none; margin-top: 2px; color: var(--bd-sun); }
.bd-ds-pkg__checks li > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bd-ds-pkg__checks h3 { margin: 0; font: 700 14.5px/1.35 var(--wp--preset--font-family--montserrat); letter-spacing: 0; color: var(--bd-haze); }
.bd-ds-pkg__checks p { margin: 0; font: 600 13.5px/1.5 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-ds-pkg__desc { max-width: 960px; margin: 22px auto 0; }
.bd-ds-pkg__desc p { margin: 0 0 14px; font: 600 var(--wp--preset--font-size--body)/1.6 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }

/* Devices (learning paths): box mt 28, centred max 960, radius 24, .06 + border .14, padding 44/40/30, gap 22. Frames:
   gradient 150° #3b3966 → #1a1746 62%, border .18, drop shadow 0 30 40 .5; desktop padding 12/12/14, radius 24/24/4/4,
   no bottom border, base 100% + 54 × 14 (radius 0 0 24 24, notch 84 × 5); tablet padding 13, mobile 8, radius 24.
   Screens: height 260 / 230 / 214, aspect = the background's ratio, radius 4, thumb as cover background, hatched
   without an image. Labels 600 12 .07em uppercase .68 (gap 12), note 600 13.5 .68.
   Scaling: everything in --u (1px at most), the container width over the set's natural width (--vp-w1 in one row,
   --vp-w2 stacked; from render.php), so frames shrink in proportion and never overflow. Stacked (desktop on its own
   row, tablet + mobile below): very wide sets (.is-stacked) and every set under 640px. */
.bd-ds-pkg__devices { box-sizing: border-box; max-width: 960px; margin: 28px auto 0; padding: calc(44px * var(--bd-s)) calc(40px * var(--bd-s)) calc(30px * var(--bd-s)); border-radius: var(--bd-r-card); background: rgba(247,248,249,.06); border: 1px solid rgba(247,248,249,.14); display: flex; flex-direction: column; align-items: center; gap: 22px; container-type: inline-size; }
.bd-ds-pkg__vp-row { --u: min(1px, 100cqi / var(--vp-w1)); width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: calc(36 * var(--u)); }
.bd-ds-pkg__vp-break { display: none; }
.bd-ds-pkg__vp { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--bd-haze); font: inherit; -webkit-tap-highlight-color: transparent; }
button.bd-ds-pkg__vp { cursor: zoom-in; }
.bd-ds-pkg__vp-dev { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 calc(30 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.5)); }
.bd-ds-pkg__vp-body { display: block; padding: calc(13 * var(--u)); border-radius: calc(24 * var(--u)); background: linear-gradient(150deg, #3b3966, #1a1746 62%); border: 1px solid rgba(247,248,249,.18); }
.bd-ds-pkg__vp.is-desktop .bd-ds-pkg__vp-body { padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(24 * var(--u)) calc(24 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); border-bottom: 0; }
.bd-ds-pkg__vp.is-mobile .bd-ds-pkg__vp-body { padding: calc(8 * var(--u)); }
.bd-ds-pkg__vp-screen { display: block; height: calc(var(--h) * var(--u)); aspect-ratio: var(--r); border-radius: 4px; background-color: #050134; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; pointer-events: none; }
.bd-ds-pkg__vp.is-empty .bd-ds-pkg__vp-screen { background: repeating-linear-gradient(135deg, rgba(247,248,249,.07) 0 10px, rgba(247,248,249,.03) 10px 20px); }
.bd-ds-pkg__vp-base { display: flex; justify-content: center; width: calc(100% + 54 * var(--u)); height: calc(14 * var(--u)); border-radius: 0 0 calc(24 * var(--u)) calc(24 * var(--u)); background: linear-gradient(180deg, #4a4878, #23204f); box-shadow: inset 0 1px 0 rgba(247,248,249,.28); }
.bd-ds-pkg__vp-base::before { content: ""; width: calc(84 * var(--u)); height: calc(5 * var(--u)); border-radius: 0 0 4px 4px; background: rgba(5,1,52,.55); }
.bd-ds-pkg__vp-label { font: 600 12px/1.2 var(--wp--preset--font-family--montserrat); letter-spacing: .07em; text-transform: uppercase; color: var(--bd-meta); transition: color 180ms ease-out; }
button.bd-ds-pkg__vp:hover .bd-ds-pkg__vp-label { color: var(--bd-haze); }
.bd-ds-pkg__vp-note { margin: 0; text-align: center; font: 600 13.5px/1.5 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
.bd-ds-pkg__devices.is-stacked .bd-ds-pkg__vp-row { --u: min(1px, 100cqi / var(--vp-w2)); flex-wrap: wrap; row-gap: 0; }
.bd-ds-pkg__devices.is-stacked .bd-ds-pkg__vp-break { display: block; flex: 0 0 100%; height: calc(28 * var(--u)); }

/* Items (single assets): columns and tile ratio from render.php (--cols, --cols-m, --ratio). */
.bd-ds-pkg__items { padding-bottom: calc(76px * var(--bd-s)); }
.bd-ds-pkg__items-in { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.bd-ds-pkg__items-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.bd-ds-pkg__items-head .bd-kicker { margin: 0; }
.bd-ds-pkg__hint { margin: 0; font: 600 13.5px/1.5 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
.bd-ds-pkg__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.bd-ds-pkg__tile { position: relative; display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 10px; border-radius: var(--bd-r-sm); border: 1px solid rgba(247,248,249,.14); background: rgba(247,248,249,.06); color: inherit; font: inherit; cursor: zoom-in; transition: border-color 180ms ease-out, background-color 180ms ease-out; -webkit-tap-highlight-color: transparent; }
.bd-ds-pkg__tile:hover { border-color: rgba(250,154,66,.7); background: rgba(247,248,249,.1); }
.bd-ds-pkg__tile-img { display: block; width: 100%; aspect-ratio: var(--ratio); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; pointer-events: none; }
.bd-ds-pkg__grid.is-cover .bd-ds-pkg__tile-img { background-size: cover; border-radius: 2px; }
/* "+ N more": the tile at the cap shows the label instead of its image (desktop/tablet .is-more-d, mobile .is-more-m);
   tiles past the cap are hidden (.is-xd / .is-xm) but stay in the lightbox sequence. */
.bd-ds-pkg__more-label { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 10px; text-align: center; font: 700 15px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-pkg__tile.is-xd { display: none; }
.bd-ds-pkg__tile.is-more-d { border: 1.5px solid rgba(255,255,255,.4); background: transparent; }
.bd-ds-pkg__tile.is-more-d:hover { border-color: rgba(255,255,255,.85); background: transparent; }
.bd-ds-pkg__tile.is-more-d .bd-ds-pkg__tile-img { visibility: hidden; }
.bd-ds-pkg__more-label.is-d { display: flex; }

/* See it in Moodle (scene). */
.bd-ds-pkg__scene { padding-bottom: calc(76px * var(--bd-s)); }
.bd-ds-pkg__scene-in { max-width: 960px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 14px; }
.bd-ds-pkg__scene-in .bd-kicker { margin: 0; }
.bd-ds-pkg__scene-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--bd-r-card); overflow: hidden; border: 1px solid rgba(247,248,249,.14); background: #fff; }
.bd-ds-pkg__scene-frame.is-empty { border: 1px dashed rgba(247,248,249,.3); background: rgba(247,248,249,.06); }
.bd-ds-pkg__scene-frame > .bd-gallery { position: absolute; inset: 0; border-radius: 0; }
.bd-ds-pkg__scene-frame > .bd-gallery.is-empty { background: none; }
.bd-ds-pkg__scene-frame .bd-gallery__ph { padding: 18px 22px; box-shadow: none; }

.bd-ds-pkg__howto { display: flex; gap: 56px; align-items: flex-start; padding-bottom: calc(76px * var(--bd-s)); }
.bd-ds-pkg__steps-col { flex: 1.05; min-width: 0; }
.bd-ds-pkg__steps { display: flex; flex-direction: column; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.bd-ds-pkg__steps li { display: flex; gap: 18px; align-items: flex-start; }
.bd-ds-pkg__steps li > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.bd-ds-pkg__n { flex: none; font: 700 13px/1.2 var(--wp--preset--font-family--montserrat); color: var(--bd-ink); background: var(--bd-sun); border-radius: var(--bd-r-sm); padding: 5px 8px; }
.bd-ds-pkg__st { font: 700 16px/1.35 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-pkg__sb { font: 600 14.5px/1.55 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-ds-pkg__video { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font: 700 14px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); }
.bd-ds-pkg__video:hover { color: var(--bd-haze); }
.bd-ds-pkg__guide { flex: .95; min-width: 0; padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; }
.bd-ds-pkg__guide p { margin: 0; }
.bd-ds-pkg__guide-title { font: 700 20px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-pkg__guide-text { font: 600 14.5px/1.55 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-ds-pkg__guide-link { margin-top: 4px; font: 700 14px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); align-self: flex-start; }
.bd-ds-pkg__guide-link:hover { color: var(--bd-haze); }

.bd-ds-pkg__related { padding-bottom: calc(96px * var(--bd-s)); }
.bd-ds-pkg__all { font: 600 13.5px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
.bd-ds-pkg__all:hover { color: var(--bd-haze); }
.bd-ds-pkg__rel-grid { margin-top: 24px; }

/* Tablet: the split stacks below 1024 (docs/responsive.md §3), cover above the text (§5 Design Package). */
@media (max-width: 1023px) {
	.bd-ds-pkg__split, .bd-ds-pkg__howto { flex-direction: column; align-items: stretch; gap: 32px; }
	.bd-ds-pkg__split { margin-top: 28px; }
	.bd-ds-pkg__gallery { width: 100%; max-width: 400px; }
	.bd-ds-pkg__info, .bd-ds-pkg__steps-col, .bd-ds-pkg__guide { flex: none; max-width: none; }
	.bd-ds-pkg__title { font-size: calc(48px * var(--bd-s)); }
	.bd-ds-pkg__h2 { font-size: 27px; }
	.bd-ds-pkg .bd-section-head { flex-direction: row; align-items: baseline; flex-wrap: wrap; }
	.bd-ds-pkg__about, .bd-ds-pkg__guide-link, .bd-ds-pkg__all { display: inline-flex; align-items: center; min-height: 44px; }
	.bd-ds-pkg__guide-link { margin-top: 0; }
}
/* Mobile (docs/responsive.md §5 Design Package): cover above the text at full content width (max 400); the buy /
   download box under the text, button full width; devices one per row, the mobile device first; items grid with
   --cols-m columns, at most three rows (render.php); "See it in Moodle" at the full content width. */
@media (max-width: 767px) {
	.bd-ds-pkg__top { padding-top: 24px; }
	.bd-ds-pkg__gallery { max-width: none; }
	.bd-ds-pkg__frame { max-width: 400px; margin-inline: auto; }
	.bd-ds-pkg__title { font-size: 34px; }
	.bd-ds-pkg__price { font-size: 30px; }
	.bd-ds-pkg__cta { flex-direction: column; align-items: stretch; gap: 8px; }
	.bd-ds-pkg__cta > .bd-btn, .bd-ds-pkg__cta form, .bd-ds-pkg__cta .bd-free-dl, .bd-ds-pkg__cta .bd-btn { width: 100%; }
	.bd-ds-pkg__about { align-self: flex-start; }
	.bd-ds-pkg .bd-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.bd-ds-pkg__guide { padding: 24px 20px; }
	/* Devices: one per row, mobile first, slimmer box padding so the frames stay as large as possible. */
	.bd-ds-pkg__devices { padding: 28px 16px 20px; gap: 18px; }
	.bd-ds-pkg__devices .bd-ds-pkg__vp-row, .bd-ds-pkg__devices.is-stacked .bd-ds-pkg__vp-row { --u: min(1px, 100cqi / var(--vp-w3, var(--vp-w2))); flex-direction: column; align-items: center; flex-wrap: nowrap; gap: 28px; }
	.bd-ds-pkg__devices .bd-ds-pkg__vp-break, .bd-ds-pkg__devices.is-stacked .bd-ds-pkg__vp-break { display: none; }
	.bd-ds-pkg__vp.is-mobile { order: -1; }
	.bd-ds-pkg__vp.is-tablet { order: 0; }
	.bd-ds-pkg__vp.is-desktop { order: 1; }
	.bd-ds-pkg__grid { grid-template-columns: repeat(var(--cols-m), minmax(0, 1fr)); gap: 8px; }
	.bd-ds-pkg__tile { padding: 6px; }
	.bd-ds-pkg__tile.is-xd { display: block; }
	.bd-ds-pkg__tile.is-xm { display: none; }
	.bd-ds-pkg__tile.is-more-d { border: 1px solid rgba(247,248,249,.14); background: rgba(247,248,249,.06); }
	.bd-ds-pkg__tile.is-more-d .bd-ds-pkg__tile-img { visibility: visible; }
	.bd-ds-pkg__more-label.is-d { display: none; }
	.bd-ds-pkg__tile.is-more-m { border: 1.5px solid rgba(255,255,255,.4); background: transparent; }
	.bd-ds-pkg__tile.is-more-m .bd-ds-pkg__tile-img { visibility: hidden; }
	.bd-ds-pkg__more-label.is-m { display: flex; }
	.bd-ds-pkg__scene-in { margin-top: 18px; }
	.bd-ds-pkg__scene-frame .bd-gallery__ph { padding: 12px 14px; }
}