/*! * @file global/tokens.css * @segment global * @extends — * * Digistore24 global CSS: Design tokens * * Single source of truth for all --ds24-* CSS custom properties. * * Notes: * - Never add unprefixed custom properties. * - Segment token overrides live in segments/[x]/tokens.css, scoped to [data-segment="x"]. * */:root{--ds24-color-accent: #63D1DE;--ds24-color-black: #000;--ds24-color-white: #fff;--ds24-color-gray: #828990;--ds24-color-dark-gray: #828990;--ds24-color-light-gray: #E5E5E5;--ds24-color-bg-off: rgba(93, 172, 255, .15);--ds24-color-muted: #9da9b0;--ds24-color-border: rgba(157, 169, 176, .25);--ds24-color-blue: #0288d1;--ds24-gradient-button: linear-gradient(200deg, #3146a0 10%, #0288d1 100%);--ds24-color-pastel-blue-dark: #586B7F;--ds24-color-pastel-blue-light: #6E859E;--ds24-color-pastel-green-dark: #666659;--ds24-color-pastel-green-light: #818170;--ds24-color-pastel-brown-dark: #5B534E;--ds24-color-pastel-brown-light: #726862;--ds24-color-pastel-gray-dark: #4F555A;--ds24-color-pastel-gray-light: #636A71;--ds24-color-pastel-purple-dark: #5E5566;--ds24-color-klarna-pink: #FFA8CD;--ds24-color-black-90: rgba(0, 0, 0, .9);--ds24-color-black-50: rgba(0, 0, 0, .5);--ds24-color-black-30: rgba(0, 0, 0, .3);--ds24-color-black-20: rgba(0, 0, 0, .2);--ds24-color-black-10: rgba(0, 0, 0, .1);--ds24-color-white-90: rgba(255, 255, 255, .9);--ds24-color-white-50: rgba(255, 255, 255, .5);--ds24-color-white-30: rgba(255, 255, 255, .3);--ds24-color-white-20: rgba(255, 255, 255, .2);--ds24-color-white-10: rgba(255, 255, 255, .1);--ds24-font-family: "HelveticaNeuePro", Arial, sans-serif;--ds24-font-light: 300;--ds24-font-medium: 500;--ds24-font-bold: 700;--ds24-container-xl: 1600px;--ds24-container-lg: 1360px;--ds24-container-md: 1200px;--ds24-container-sm: 960px;--ds24-container-xs: 720px;--ds24-container-2xs: 480px;--ds24-container-3xs: 320px;--ds24-space-xl: 120px;--ds24-space-lg: 80px;--ds24-space-md: 40px;--ds24-space-sm: 30px;--ds24-space-xs: 20px;--ds24-space-btn-lg: 24px;--ds24-space-btn-md: 16px;--ds24-space-btn-sm: 12px;--ds24-radius-sm: 8px;--ds24-radius-card: 20px;--ds24-header-height: 70px;--ds24-subnav-height: 0px;--ds24-z-base: 1;--ds24-z-overlay: 10;--ds24-z-header: 100;--ds24-z-modal: 1000;--ds24-z-toast: 2000}@media (min-width: 1024px) and (max-width: 1439px){:root{--ds24-space-xl: 90px;--ds24-space-lg: 60px;--ds24-space-md: 30px;--ds24-space-sm: 20px;--ds24-space-xs: 16px}}@media (max-width: 743px){:root{--ds24-space-xl: 60px;--ds24-space-lg: 40px;--ds24-space-md: 20px;--ds24-space-sm: 18px;--ds24-space-xs: 16px}}/*! * @file global/fonts.css * @segment global * @extends — * * Digistore24 global CSS: Fonts * * @font-face declarations for HelveticaNeuePro (Light 300, Medium 500, Bold 700). * * Notes: * - Font files are subject to the MyFonts EULA. * *//** * @license * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: Neue Helvetica Pro 45 Light by myfonts-production * URL: https://www.myfonts.com/collections/linotype-foundry * Webfont: Neue Helvetica Pro 65 Medium by myfonts-production * URL: https://www.myfonts.com/collections/linotype-foundry * Webfont: Neue Helvetica Pro 75 Bold by myfonts-production * URL: https://www.myfonts.com/collections/linotype-foundry * * © 2025 MyFonts Inc. */@font-face{font-family:HelveticaNeuePro;src:url(/ds24-assets/fonts/NeueHelveticaPro45Light/font.woff2) format("woff2"),url(/ds24-assets/fonts/NeueHelveticaPro45Light/font.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:HelveticaNeuePro;src:url(/ds24-assets/fonts/NeueHelveticaPro65Medium/font.woff2) format("woff2"),url(/ds24-assets/fonts/NeueHelveticaPro65Medium/font.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:HelveticaNeuePro;src:url(/ds24-assets/fonts/NeueHelveticaPro75Bold/font.woff2) format("woff2"),url(/ds24-assets/fonts/NeueHelveticaPro75Bold/font.woff) format("woff");font-weight:700;font-style:normal}/*! * @file global/reset.css * @segment global * @extends — * * Digistore24 global CSS: Reset * * Box-sizing reset and base element normalization. * * Notes: * - No component or utility classes here. * */*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--ds24-font-family);font-weight:var(--ds24-font-medium);line-height:1.4;color:var(--ds24-color-black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:calc(var(--ds24-header-height) + var(--ds24-subnav-height) + var(--ds24-space-md))}body{background:var(--ds24-color-white);min-height:100vh;padding-top:calc(var(--ds24-header-height) + var(--ds24-subnav-height))}img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}button{font-family:inherit}address{font-style:normal}/*! * @file global/typography.css * @segment global * @extends — * * Digistore24 global CSS: Typography * * Full type scale: display (.display-xl → .display-xs), headings (h1–h6), * body paragraph, and text utility classes (.text-xl → .caption). * All sizes are responsive across Desktop, Notebook, Compact, and Mobile. * * Notes: * - Font sizes are NOT tokens — defined directly on semantic selectors per breakpoint. * - Blog segment overrides these via .ds24-segment--blog scoped rules in segments/blog/typography.css. * - Tablet (≤1023px) shares the same text sizes as Notebook and Compact via the ≤1439px query. * */.display-xl,.display-lg,.display-md,.display-sm,.display-xs{line-height:1;font-weight:var(--ds24-font-medium);text-wrap:balance;letter-spacing:-3px}.display-xl{font-size:200px}.display-lg{font-size:160px}.display-md{font-size:144px}.display-sm{font-size:120px}.display-xs{font-size:96px}@media (min-width: 1920px){.display-xl{font-size:240px}.display-lg{font-size:200px}.display-md{font-size:160px}.display-sm{font-size:144px}.display-xs{font-size:120px}}@media (max-width: 1439px){.display-xl,.display-lg,.display-md,.display-sm,.display-xs{letter-spacing:-2px}.display-xl{font-size:clamp(120px,16vw,160px)}.display-lg{font-size:clamp(96px,14vw,144px)}.display-md{font-size:clamp(72px,12vw,120px)}.display-sm{font-size:clamp(60px,10vw,96px)}.display-xs{font-size:clamp(48px,8vw,72px)}}@media (max-width: 1279px) and (min-width: 1024px){.display-xl{font-size:144px}.display-lg{font-size:120px}.display-md{font-size:96px}.display-sm{font-size:72px}.display-xs{font-size:60px}}@media (max-width: 743px){.display-xl,.display-lg,.display-md,.display-sm,.display-xs{letter-spacing:-1px}.display-xl{font-size:120px}.display-lg{font-size:96px}.display-md{font-size:clamp(54px,14vw,72px)}.display-sm{font-size:60px}.display-xs{font-size:48px}}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:var(--ds24-font-medium);line-height:1;letter-spacing:-1px}h1,h2,h3{text-wrap:balance}h1{font-size:72px}h2{font-size:60px}h3{font-size:48px}h4{font-size:42px}h5{font-size:36px}h6,.h6{font-size:30px}@media (min-width: 1920px){h1{font-size:96px}h2{font-size:72px}h3{font-size:60px}h4{font-size:48px}h5{font-size:42px}h6,.h6{font-size:36px}}@media (max-width: 1439px){h1{font-size:60px}h2{font-size:48px}h3{font-size:42px}h4{font-size:36px}h5{font-size:30px}h6,.h6{font-size:26px}}@media (max-width: 1279px) and (min-width: 1024px){h1{font-size:48px}h2{font-size:42px}h3{font-size:36px}h4{font-size:30px}h5{font-size:26px}h6,.h6{font-size:21px}}@media (max-width: 743px){h1{font-size:42px}h2{font-size:36px}h3{font-size:30px}h4{font-size:26px}h5{font-size:24px}h6,.h6{font-size:21px}}body{font-size:18px}.text-xl{font-size:26px}.text-lg{font-size:21px}.text-sm{font-size:16px}.text-xs{font-size:14px}.caption{font-size:12px}@media (min-width: 1920px){body{font-size:21px}.text-xl{font-size:30px}.text-lg{font-size:26px}.text-sm{font-size:18px}.text-xs{font-size:14px}.caption{font-size:12px}}@media (max-width: 1439px){body{font-size:16px}.text-xl{font-size:21px}.text-lg{font-size:18px}.text-sm{font-size:14px}.text-xs{font-size:13px}.caption{font-size:12px}}/*! * @file global/utilities.css * @segment global * @type ds24-layout-- | ds24-element-- * * Digistore24 global CSS: Utilities * * Shared layout containers, accessibility helpers, buttons, and meta elements. * * Notes: * - ds24-element--button variants are scoped under the identity class. * - ds24-element--meta and ds24-element--read-more are shared blog utilities for now. * */.ds24-layout--container{max-width:var(--ds24-container-md);margin:0 auto}@media (min-width: 1920px){.ds24-layout--container{max-width:var(--ds24-container-lg)}}@media (max-width: 1439px){.ds24-layout--container{max-width:var(--ds24-container-sm)}}@media (max-width: 743px){.ds24-layout--container{padding:var(--ds24-space-lg) var(--ds24-space-md)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ds24-element--button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ds24-font-family);font-weight:var(--ds24-font-medium);font-size:16px;line-height:1.4;padding:var(--ds24-space-btn-md) var(--ds24-space-btn-lg) var(--ds24-space-btn-sm);border:none;cursor:pointer;text-decoration:none;text-align:center}.ds24-element--button .ds24-element--icon{display:inline-flex;align-items:center;line-height:0;flex-shrink:0;transition:transform .3s ease}.ds24-element--button .ds24-element--icon svg{width:18px;height:18px}.ds24-element--button.type--primary{background-color:var(--ds24-color-black);border:1px solid var(--ds24-color-black);color:var(--ds24-color-white);transition:all .2s ease-in-out}.ds24-element--button.type--primary:hover{opacity:.8}.ds24-element--button.type--secondary{background:var(--ds24-color-bg-off);color:var(--ds24-color-black);transition:all .2s ease-in-out}.ds24-element--button.type--secondary:hover{background:var(--ds24-color-border);opacity:.8}.ds24-element--button.type--outline{background:transparent;color:var(--ds24-color-black);border:1px solid currentColor;padding:var(--ds24-space-btn-md) var(--ds24-space-btn-lg) var(--ds24-space-btn-sm);transition:all .2s ease-in-out}.ds24-element--button.type--outline:hover{color:var(--ds24-color-blue);opacity:.8}.ds24-element--button.type--primary.is--inverted{background-color:var(--ds24-color-white);border-color:var(--ds24-color-white);color:var(--ds24-color-black)}.ds24-element--button.type--primary.is--inverted:hover{opacity:.85}.ds24-element--button.type--secondary.is--inverted{background-color:#ffffff26;color:var(--ds24-color-white)}.ds24-element--button.type--secondary.is--inverted:hover{background-color:#ffffff40;opacity:1}.ds24-element--button.type--outline.is--inverted{color:var(--ds24-color-white);border-color:var(--ds24-color-white-30)}.ds24-element--button.type--outline.is--inverted:hover{opacity:.75}.ds24-element--button.type--link{padding:0;text-align:left;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px;background:none;border:none;color:var(--ds24-color-black);gap:12px}.ds24-element--button.type--link:hover{opacity:.8}.ds24-element--button.type--link:focus-visible{outline:3px dotted #005fcc;outline-offset:3px}.ds24-element--button.type--link.mode--inverted{color:var(--ds24-color-white)}.ds24-element--button.type--link.size--xl{font-size:30px;text-decoration-thickness:3px;text-underline-offset:3px;gap:10px;letter-spacing:-1px}.ds24-element--button.type--link.size--lg{font-size:21px;text-decoration-thickness:2.5px;text-underline-offset:2.5px;gap:10px}.ds24-element--button.type--link.size--md{font-size:18px;text-decoration-thickness:2px;text-underline-offset:2px;gap:8px}.ds24-element--button.type--link.size--sm{font-size:16px;text-decoration-thickness:2px;text-underline-offset:2px;gap:6px}.ds24-element--button.type--link.size--xs{font-size:14px;text-decoration-thickness:1.5px;text-underline-offset:2px;gap:4px}.ds24-element--button.type--link .ds24-element--icon{display:inline-flex;align-items:center;line-height:0;flex-shrink:0;transition:transform .3s ease;margin-right:0}.ds24-element--button.type--link .ds24-element--icon svg{width:18px;height:18px;stroke-width:2px}.ds24-element--button.type--link.size--xl .ds24-element--icon svg{width:24px;height:24px}.ds24-element--button.type--link:hover .ds24-element--icon:last-child{transform:translate(4px)}@media (min-width: 1920px){.ds24-element--button.type--link.size--xl{font-size:36px}}@media (max-width: 1439px){.ds24-element--button.type--link.size--xl{font-size:26px}}@media (max-width: 1279px) and (min-width: 1024px){.ds24-element--button.type--link.size--xl{font-size:21px}.ds24-element--button.type--link.size--xl .ds24-element--icon svg{width:21px;height:21px}}.ds24-element--read-more{display:inline-flex;font-size:14px;font-weight:var(--ds24-font-medium);color:var(--ds24-color-black);text-decoration:none;position:relative;align-items:center}.ds24-element--read-more:after{content:"";display:inline-flex;position:absolute;bottom:-3px;left:0;width:100%;height:2px;background:var(--ds24-color-accent);transition:.3s}.ds24-element--read-more:hover:after{width:50%}.ds24-element--read-more .chevron{width:6px;height:6px;border-width:1.5px 1.5px 0 0;border-style:solid;border-color:var(--ds24-color-black);transform:rotate(45deg);display:inline-block;top:-1px;position:relative;margin-left:4px}.ds24-element--meta{font-size:14px;font-weight:var(--ds24-font-medium);color:var(--ds24-color-black);display:flex;align-items:center;justify-content:space-between}.ds24-element--meta .meta-item{display:inline-flex;align-items:center;gap:8px}.ds24-element--meta .meta-icon{flex-shrink:0;color:var(--ds24-color-muted);position:relative;top:-2px;width:18px;height:18px;stroke-width:2px}.ds24-element--button-block{margin:1.5em 0;display:flex}.ds24-element--button-block.align--left{justify-content:flex-start}.ds24-element--button-block.align--center{justify-content:center}.ds24-element--button-block.align--right{justify-content:flex-end}.ds24-img-shape,.ds24-img-shape-contra{--ds24-shape-bg: var(--ds24-color-white);position:relative;overflow:hidden}.ds24-img-shape:before,.ds24-img-shape:after,.ds24-img-shape-contra:before,.ds24-img-shape-contra:after{content:"";position:absolute;left:0;width:100%;height:20%;background-color:var(--ds24-shape-bg);pointer-events:none}.ds24-img-shape:before,.ds24-img-shape-contra:before{top:0}.ds24-img-shape:after,.ds24-img-shape-contra:after{bottom:0}.ds24-img-shape:before{clip-path:polygon(105% 0,0 0,0 95%)}.ds24-img-shape:after{clip-path:polygon(100% 0,-5% 100%,100% 100%)}.ds24-img-shape-contra:before{clip-path:polygon(100% 0,-5% 0,100% 95%)}.ds24-img-shape-contra:after{clip-path:polygon(-5% 0,0 100%,105% 100%)}@media (max-width: 743px) and (orientation: portrait){.ds24-element--button:not(.type--link){width:100%;max-width:480px;margin-inline:auto}}/*! * @file global/banner.css * @segment global * @type ds24-component--banner * * Digistore24 component-specific CSS: Banner * * Top-of-page announcement bar. Sits in normal page flow directly below the * header/subnav — not position:fixed. The sticky header overlaps it on scroll. * Sticky variant (.ds24-banners--sticky) is position:fixed at bottom of viewport. * * Notes: * - Default mode: white background, black text, content centred. * - Instance overrides use [data-banner-name=""] for colour/size changes. * - Title: text-lg. Text: text-sm. Both centre-aligned by default. * - Button size mirrors Drupal ds24-btn-default--small. * */.ds24-banners{display:flex;flex-direction:column}.ds24-banners--sticky{display:flex;flex-direction:column;position:fixed;bottom:0;left:0;right:0;z-index:50}.ds24-banners--sticky .ds24-component--banner{border-top:1px solid var(--ds24-color-light-gray)}.ds24-component--banner{display:flex;align-items:center;justify-content:center;gap:var(--ds24-space-md);padding:var(--ds24-space-xs) var(--ds24-space-lg) var(--ds24-space-xs) var(--ds24-space-md);position:relative;min-height:68px;background-color:var(--ds24-color-white);color:var(--ds24-color-black)}.ds24-component--banner[hidden]{display:none}.ds24-component--banner .ds24-logo{flex-shrink:0;max-width:200px;line-height:0}.ds24-component--banner .ds24-logo img{display:block;max-width:100%;height:auto}.ds24-component--banner .ds24-content{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}.ds24-component--banner .ds24-title p{margin:0;font-weight:var(--ds24-font-medium);line-height:var(--ds24-line-height-tight)}.ds24-component--banner .ds24-title a{color:inherit;text-decoration:underline;transition:opacity .3s ease}.ds24-component--banner .ds24-title a:hover{opacity:.7}.ds24-component--banner .ds24-text p{margin:0;color:var(--ds24-color-text-muted);line-height:var(--ds24-line-height-base)}.ds24-component--banner .ds24-text a{color:var(--ds24-color-text);font-weight:var(--ds24-font-medium);text-decoration:underline;text-underline-offset:2px;opacity:.7;transition:opacity .3s ease}.ds24-component--banner .ds24-text a:hover{opacity:1}.ds24-component--banner .ds24-element--button{flex-shrink:0;font-size:14px;line-height:16px;padding:var(--ds24-space-btn-sm);gap:6px}.ds24-component--banner .ds24-close{position:absolute;right:var(--ds24-space-md);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;color:var(--ds24-color-black);opacity:1;transition:opacity .3s ease}.ds24-component--banner .ds24-close:hover{opacity:.75}.ds24-component--banner .ds24-close svg{width:16px;height:16px;stroke-width:2.5}@media (max-width: 1279px){.ds24-component--banner{min-height:58px}.ds24-component--banner .ds24-logo{max-width:160px}}@media (max-width: 1023px){.ds24-component--banner{flex-wrap:wrap;justify-content:center;padding:var(--ds24-space-xs) var(--ds24-space-lg);gap:var(--ds24-space-xs);min-height:unset}.ds24-component--banner .ds24-logo{max-width:200px}}@media (max-width: 743px){.ds24-component--banner{padding:var(--ds24-space-xs) var(--ds24-space-lg)}.ds24-component--banner .ds24-logo{max-width:200px}}[data-banner-name=klarna].ds24-component--banner{background-color:var(--ds24-color-klarna-pink)}[data-banner-name=klarna].ds24-component--banner .ds24-title p{font-size:var(--ds24-text-sm, 14px)}[data-banner-name=klarna].ds24-component--banner .ds24-text p{font-size:var(--ds24-text-caption, 12px);color:var(--ds24-color-black-50)}[data-banner-name=klarna].ds24-component--banner .ds24-content{text-align:left;align-items:start}@media (max-width: 1023px){[data-banner-name=klarna].ds24-component--banner .ds24-content{text-align:center;align-items:center}[data-banner-name=klarna].ds24-component--banner .ds24-close{top:32px;transform:none}}@media (max-width: 743px){[data-banner-name=klarna].ds24-component--banner{padding:var(--ds24-space-md) var(--ds24-space-sm)}[data-banner-name=klarna].ds24-component--banner .ds24-close{top:20px}}[data-banner-name=klarna].ds24-component--banner .ds24-element--button{background-color:var(--ds24-color-white);border-color:var(--ds24-color-white);color:var(--ds24-color-black)}/*! * @file global/video-modal.css * @segment global * @type ds24-component--video-modal * * Digistore24 component-specific CSS: Video Modal * * Full-screen video overlay triggered by buttons with [data-video-src]. * Slides in from the bottom. Contains a header bar (logo + caption + close) * and a 16:9 responsive iframe embed. Matches the live digistore24.com pattern. * * Notes: * - .is--open controls visibility — added/removed by video-modal.js. * - Video stops on close by iframe src reset (not CSS). * - body overflow is locked to hidden while modal is open. * */.ds24-component--video-modal{position:fixed;inset:0;z-index:var(--ds24-z-modal);background:#fff;display:flex;justify-content:center;align-items:center;padding:40px var(--ds24-space-lg);opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .3s ease-out,transform .3s ease-out}.ds24-component--video-modal.is--open{opacity:1;transform:translateY(0);pointer-events:auto}.ds24-video-modal-panel{width:100%;max-width:110vh;display:flex;flex-direction:column;gap:var(--ds24-space-md)}.ds24-video-modal-header{display:flex;align-items:center;gap:var(--ds24-space-sm)}.ds24-video-modal-logo{flex-shrink:0;width:54px;height:54px}.ds24-video-modal-logo img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.ds24-video-modal-caption{flex:1;color:var(--ds24-color-gray);margin:0}.ds24-video-modal-embed{position:relative;width:100%;padding-bottom:56.25%;height:0;border-radius:var(--ds24-radius-md);overflow:hidden}.ds24-video-modal-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none}@media (max-width: 1439px){.ds24-component--video-modal{padding:40px var(--ds24-space-md)}.ds24-video-modal-panel{max-width:100vh}}@media (min-width: 1024px) and (max-width: 1279px){.ds24-component--video-modal{padding:32px var(--ds24-space-md)}.ds24-video-modal-panel{gap:var(--ds24-space-sm)}}@media (max-width: 1023px){.ds24-component--video-modal{padding:var(--ds24-space-md) var(--ds24-space-sm);align-items:center}.ds24-video-modal-panel{gap:var(--ds24-space-sm)}}@media (max-width: 743px){.ds24-component--video-modal{padding:0;align-items:stretch}.ds24-video-modal-panel{max-width:100%;height:100%;display:flex;flex-direction:column;gap:0;padding:0 var(--ds24-space-xs) 88px}.ds24-video-modal-header{flex-shrink:0;flex-direction:column;align-items:center;text-align:center;gap:var(--ds24-space-xs);padding:var(--ds24-space-sm) 0}.ds24-video-modal-logo{width:40px;height:40px}.ds24-video-modal-embed{flex-shrink:0;margin-top:auto;margin-bottom:auto}.ds24-video-modal-close{position:absolute;bottom:var(--ds24-space-xs);left:var(--ds24-space-xs);width:calc(100vw - 2 * var(--ds24-space-xs))}.ds24-video-modal-close .ds24-element--button{width:100%;height:100%}}/*! * @file styles/sections.css * @segment global * * Digistore24 CSS: Section entry point * * Collects all page-builder section CSS. Imported once in Layout.astro so selectors * are never scoped by Astro's component hash. * *//*! * @file sections/brands.css * @segment global * @type ds24-section--brands * * Digistore24 section-specific CSS: Brands * * Brand logo bar. Displays brand logos in a horizontal row on a black background. * * Notes: * - No container max-width — logos span the full content width. * - Logo height fixed; width scales automatically. * */.ds24-section--brands{background-color:var(--ds24-color-black);padding-block:var(--ds24-space-lg);padding-inline:var(--ds24-space-md)}.ds24-section--brands .ds24-items{display:flex;align-items:center;justify-content:space-around;gap:var(--ds24-space-md);list-style:none;margin:0;padding:0}.ds24-section--brands .ds24-item img{display:block;height:80px;width:auto}@media (max-width: 1439px){.ds24-section--brands .ds24-item img{height:60px}}@media (max-width: 1023px){.ds24-section--brands .ds24-items{flex-wrap:wrap;justify-content:center;gap:var(--ds24-space-sm)}.ds24-section--brands .ds24-item img{height:46px}}@media (max-width: 743px){.ds24-section--brands .ds24-item img{height:36px}}@media (max-width: 743px){.ds24-section--brands .ds24-slider{overflow:hidden;touch-action:pan-y;margin-inline:calc(-1 * var(--ds24-space-md));mask-image:linear-gradient(to right,transparent 0px,black var(--ds24-space-md),black calc(100% - var(--ds24-space-md)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0px,black var(--ds24-space-md),black calc(100% - var(--ds24-space-md)),transparent 100%)}.ds24-section--brands .ds24-track{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;width:100%;transition:transform .4s ease;will-change:transform}.ds24-section--brands .ds24-track.is--no-transition{transition:none}.ds24-section--brands .ds24-item{flex:0 0 100%;width:100%;display:flex;align-items:center;justify-content:center;padding-inline:var(--ds24-space-md)}.ds24-section--brands .ds24-item img{height:auto;width:auto;max-width:80%}}/*! * @file sections/cta.css * @segment global * @type ds24-section--cta * * Digistore24 section-specific CSS: CTA * * Full-bleed call-to-action band — black background, white text. Inner content * column is constrained to --ds24-container-md (→ sm on Notebook → 2xs on Mobile), * always 100% of that constraint. Layout (left / centered / right) only changes * horizontal alignment of the column inside the section and of the text inside * the column. * */.ds24-section--cta{display:flex;padding:var(--ds24-space-lg) var(--ds24-space-md);background-color:var(--ds24-color-black);color:var(--ds24-color-white);justify-content:center}.ds24-section--cta .ds24-content{display:flex;flex-direction:column;gap:var(--ds24-space-md);width:100%;max-width:var(--ds24-container-md)}.ds24-section--cta .ds24-title,.ds24-section--cta .ds24-headline,.ds24-section--cta .ds24-subtitle,.ds24-section--cta .ds24-text{margin:0;color:var(--ds24-color-white)}.ds24-section--cta .ds24-actions{display:flex;flex-wrap:wrap;gap:var(--ds24-space-sm)}.ds24-section--cta.layout--centered .ds24-content{text-align:center;align-items:center}.ds24-section--cta.layout--centered .ds24-actions{justify-content:center}.ds24-section--cta.layout--right .ds24-content{text-align:right;align-items:flex-end}.ds24-section--cta.layout--right .ds24-actions{justify-content:flex-end}@media (max-width: 1439px){.ds24-section--cta .ds24-content{max-width:var(--ds24-container-sm)}}@media (max-width: 743px){.ds24-section--cta .ds24-content{max-width:var(--ds24-container-2xs)}}/*! * @file global/section-faq.css * @segment global * @type ds24-section--faq * * Digistore24 section-specific CSS: FAQ * * Accordion FAQ section — items collapsed by default, each toggles independently. * * Notes: * - .ds24-title is the interactive toggle (role=button, aria-expanded). * - JS in faq-section.js sets max-height via scrollHeight for proportional animation. * - Toggle icon is a CSS ::after pseudo-element: + collapsed, − expanded. * - No auto-close: multiple items can be open simultaneously. * */.ds24-section--faq{padding:var(--ds24-space-lg) var(--ds24-space-md);display:flex;gap:var(--ds24-space-xl)}.ds24-section--faq .ds24-headline{width:var(--ds24-container-2xs);flex-shrink:0;margin:0}.ds24-section--faq .ds24-items{flex:1}.ds24-section--faq .ds24-item{border-bottom:1px solid var(--ds24-color-border)}.ds24-section--faq .ds24-item:last-child{border-bottom:none}.ds24-section--faq .ds24-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0;padding:var(--ds24-space-sm) 0;color:var(--ds24-color-text);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:opacity .2s}.ds24-section--faq .ds24-title:hover{opacity:.75}.ds24-section--faq .ds24-title:after{content:"+";flex-shrink:0;width:1.25em;text-align:center;font-size:1.25em;font-weight:300;line-height:1}.ds24-section--faq .ds24-title[aria-expanded=true]:after{content:"−"}.ds24-section--faq .ds24-text{max-height:0;overflow:hidden;margin:0;color:var(--ds24-color-black-50);transition:max-height .3s ease}.ds24-section--faq .ds24-text-inner{padding-bottom:1.25em}.ds24-section--faq .ds24-text-inner p:first-child,.ds24-section--faq .ds24-text-inner ul:first-child,.ds24-section--faq .ds24-text-inner ol:first-child{margin-top:0}.ds24-section--faq .ds24-text-inner p:last-child,.ds24-section--faq .ds24-text-inner ul:last-child,.ds24-section--faq .ds24-text-inner ol:last-child{margin-bottom:0}@media (max-width: 743px){.ds24-section--faq{flex-direction:column;gap:var(--ds24-space-md)}.ds24-section--faq .ds24-headline{width:100%}.ds24-section--faq .ds24-title{padding:var(--ds24-space-xs) 0}}/*! * @file sections/feature.css * @segment global * @type ds24-section--feature * * Digistore24 section-specific CSS: Feature * * Chess-layout rows: content column + image, stacked vertically. Image position * (left/right) is set per item. Image max-width is derived from orientation (portrait/landscape). * * Notes: * - No container wrapper — items are centred via max-width on each item. * - layout--image-left reverses the flex row so image appears on the left. * - is--portrait / is--landscape classes are set in Astro from Sanity asset dimensions. * */.ds24-section--feature{display:flex;flex-direction:column;align-items:center;gap:var(--ds24-space-xl);padding:var(--ds24-space-lg) var(--ds24-space-md)}.ds24-section--feature .ds24-item{display:flex;align-items:center;gap:var(--ds24-space-xl);max-width:var(--ds24-container-md);width:100%}.ds24-section--feature .ds24-item.layout--image-left{flex-direction:row-reverse}.ds24-section--feature .ds24-item.has--outside-headline{flex-wrap:wrap;gap:var(--ds24-space-lg)}.ds24-section--feature .ds24-item .ds24-headline.is--outside{width:100%;flex-shrink:0}.ds24-section--feature .ds24-item .ds24-content{display:flex;flex-direction:column;align-items:start;gap:var(--ds24-space-md);flex:1}.ds24-section--feature .ds24-item .ds24-headline,.ds24-section--feature .ds24-item .ds24-subtitle{margin:0}.ds24-section--feature .ds24-item .ds24-blocks{display:flex;flex-direction:column;gap:var(--ds24-space-md)}.ds24-section--feature .ds24-item .ds24-label{margin:0 0 var(--ds24-space-xs)}.ds24-section--feature .ds24-item .ds24-text{margin:0;color:var(--ds24-color-text-muted)}.ds24-section--feature .ds24-item .ds24-image img{display:block;width:100%;height:auto}.ds24-section--feature .ds24-item .ds24-image.is--portrait{max-width:420px}.ds24-section--feature .ds24-item .ds24-image.is--landscape{max-width:700px}@media (min-width: 1920px){.ds24-section--feature .ds24-item{max-width:var(--ds24-container-lg)}.ds24-section--feature .ds24-item .ds24-image.is--portrait{max-width:480px}.ds24-section--feature .ds24-item .ds24-image.is--landscape{max-width:800px}}@media (max-width: 1439px){.ds24-section--feature .ds24-item{max-width:var(--ds24-container-sm)}.ds24-section--feature .ds24-item .ds24-image.is--portrait{max-width:360px}.ds24-section--feature .ds24-item .ds24-image.is--landscape{max-width:560px}}@media (max-width: 1279px) and (min-width: 1024px){.ds24-section--feature .ds24-item .ds24-image.is--portrait{max-width:320px}.ds24-section--feature .ds24-item .ds24-image.is--landscape{max-width:480px}}@media (max-width: 1023px){.ds24-section--feature .ds24-item,.ds24-section--feature .ds24-item.has--outside-headline{gap:var(--ds24-space-md)}.ds24-section--feature .ds24-item.has--outside-headline .ds24-headline.is--outside{order:1}.ds24-section--feature .ds24-item .ds24-content{gap:var(--ds24-space-sm)}.ds24-section--feature .ds24-item.has--outside-headline .ds24-content{order:3}.ds24-section--feature .ds24-item .ds24-label{margin-bottom:10px}.ds24-section--feature .ds24-item .ds24-image.is--portrait{max-width:320px}.ds24-section--feature .ds24-item .ds24-image.is--landscape{max-width:100%}}@media (max-width: 743px){.ds24-section--feature .ds24-item,.ds24-section--feature .ds24-item.layout--image-left{flex-direction:column;gap:var(--ds24-space-lg);max-width:var(--ds24-container-2xs);margin-inline:auto}.ds24-section--feature .ds24-item .ds24-image{max-width:100%;width:100%}.ds24-section--feature .ds24-item .ds24-image.is--portrait{max-width:335px}.ds24-section--feature .ds24-item .ds24-image.is--landscape{max-width:100%}}/*! * @file sections/headline.css * @segment global * @type ds24-section--headline * * Digistore24 section-specific CSS: Headline * * Text-only section. Two orthogonal axes: * orientation--vertical → single column, items stacked * orientation--horizontal → two columns side-by-side (headline | body) * layout--left | centered | right → horizontal placement of the column(s) * * Notes: * - White background always — no mode modifier on this section. * - All sub-element typography classes are set on the elements themselves * (display-md / display-xs / text-lg) per the size mapping in Astro. * */.ds24-section--headline{background-color:var(--ds24-color-white);color:var(--ds24-color-black);padding:var(--ds24-space-lg) var(--ds24-space-md);display:flex;gap:var(--ds24-space-xl)}.ds24-section--headline .ds24-content{display:flex;flex-direction:column;gap:var(--ds24-space-sm)}.ds24-section--headline .ds24-headline,.ds24-section--headline .ds24-subtitle,.ds24-section--headline .ds24-text{margin:0}.ds24-section--headline.orientation--vertical .ds24-content{width:50%}.ds24-section--headline.orientation--vertical.layout--left{justify-content:flex-start}.ds24-section--headline.orientation--vertical.layout--right{justify-content:flex-end}.ds24-section--headline.orientation--vertical.layout--centered{justify-content:center}.ds24-section--headline.orientation--vertical.layout--centered .ds24-content{width:100%;max-width:var(--ds24-container-md);text-align:center;align-items:center}.ds24-section--headline.orientation--horizontal .ds24-content{width:50%}.ds24-section--headline.orientation--horizontal.layout--left{justify-content:space-between}.ds24-section--headline.orientation--horizontal.layout--right{flex-direction:row-reverse;justify-content:space-between}.ds24-section--headline.orientation--horizontal.layout--centered{justify-content:center}.ds24-section--headline.orientation--horizontal.layout--centered .ds24-content{max-width:calc(var(--ds24-container-md) / 2)}@media (max-width: 1439px){.ds24-section--headline.orientation--vertical.layout--centered .ds24-content{max-width:var(--ds24-container-sm)}}@media (max-width: 1023px) and (orientation: portrait){.ds24-section--headline.orientation--horizontal{flex-direction:column;gap:var(--ds24-space-md)}.ds24-section--headline.orientation--horizontal .ds24-content{width:100%}}@media (max-width: 743px){.ds24-section--headline{gap:var(--ds24-space-md)}.ds24-section--headline.orientation--horizontal{flex-direction:column}.ds24-section--headline .ds24-content{width:100%;max-width:var(--ds24-container-2xs);margin-inline:auto}}/*! * @file global/hero-affiliates.css * @segment global * @type ds24-section--hero-affiliates * * Digistore24 section-specific CSS: Hero — Affiliates * * Full-bleed hero with background media, headline + text on the left, * and a CTA box on the right containing a main button and a featured button panel. * * Notes: * - Background media is absolutely positioned and covers the section. * - Two-column layout: content left, CTA box right. Stacks on tablet. * - CTA box stacks main button above the featured panel (separated by a border). * */.ds24-section--hero-affiliates{position:relative;overflow:hidden;min-height:600px;display:flex;align-items:center;background-color:var(--ds24-color-surface)}.ds24-section--hero-affiliates .ds24-bg{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:0}.ds24-section--hero-affiliates .ds24-layout--container{position:relative;z-index:1;max-width:var(--ds24-container-lg);display:grid;grid-template-columns:1fr 360px;align-items:center;gap:var(--ds24-space-xl);padding-block:var(--ds24-space-xl)}.ds24-section--hero-affiliates .ds24-content{display:flex;flex-direction:column;gap:var(--ds24-space-md)}.ds24-section--hero-affiliates .ds24-content .ds24-headline,.ds24-section--hero-affiliates .ds24-content .ds24-text{margin:0}.ds24-section--hero-affiliates .ds24-component--cta-box{display:flex;flex-direction:column;gap:0;background-color:var(--ds24-color-surface);border-radius:var(--ds24-radius-lg);padding:var(--ds24-space-lg);box-shadow:var(--ds24-shadow-md)}.ds24-section--hero-affiliates .ds24-cta-main{display:flex;flex-direction:column;padding-bottom:var(--ds24-space-md)}.ds24-section--hero-affiliates .ds24-cta-main .ds24-element--button{width:100%;text-align:center}.ds24-section--hero-affiliates .ds24-cta-featured{display:flex;flex-direction:column;gap:var(--ds24-space-sm);padding-top:var(--ds24-space-md);border-top:1px solid var(--ds24-color-border)}.ds24-section--hero-affiliates .ds24-cta-featured.is--first{padding-top:0;border-top:none}.ds24-section--hero-affiliates .ds24-cta-featured .ds24-headline{margin:0;font-weight:var(--ds24-font-weight-bold)}.ds24-section--hero-affiliates .ds24-cta-featured .ds24-text{margin:0}.ds24-section--hero-affiliates .ds24-cta-featured .ds24-element--button{width:100%;text-align:center}@media (max-width: 1439px){.ds24-section--hero-affiliates .ds24-layout--container{grid-template-columns:1fr 320px}}@media (max-width: 1023px){.ds24-section--hero-affiliates .ds24-layout--container{grid-template-columns:1fr}.ds24-section--hero-affiliates .ds24-component--cta-box{max-width:480px}}@media (max-width: 743px){.ds24-section--hero-affiliates{min-height:unset}.ds24-section--hero-affiliates .ds24-component--cta-box{max-width:100%}}/*! * @file sections/hero-homepage.css * @segment global * @type ds24-section--hero-homepage * * Digistore24 section-specific CSS: Hero — Homepage * * Full-bleed hero covering full viewport height. Background image covers the section. * Left column (50%) holds the headline+text group (flex-grow) and the CTA box at the bottom. * CTA box contains the "choose your model" label, 2×3 link grid, and a desktop button. * On mobile the CTA box remains visible but the link list stacks to a single column. * An additional inline button (.is--mobile-cta) is shown above the CTA box on mobile. * * Notes: * - .ds24-text-group has flex-grow: 1 — pushes .ds24-cta to the bottom of the column. * - .is--mobile-cta is shown only on mobile; sits inline in the text group. * */.ds24-section--hero-homepage{position:relative;overflow:hidden;height:calc(100vh - var(--ds24-header-height));min-height:800px;max-height:900px;display:flex;flex-direction:column;align-items:start;padding:var(--ds24-space-lg) var(--ds24-space-md) var(--ds24-space-md)}.ds24-section--hero-homepage picture{position:absolute;inset:0;z-index:-1}.ds24-section--hero-homepage .ds24-bg{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;z-index:-1}.ds24-section--hero-homepage .ds24-content{position:relative;z-index:1;width:50%;color:var(--ds24-color-white);display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds24-space-md);flex-grow:1}.ds24-section--hero-homepage .ds24-text-group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds24-space-xs);flex-grow:1}.ds24-section--hero-homepage .ds24-headline,.ds24-section--hero-homepage .ds24-text{margin:0;color:var(--ds24-color-white)}.ds24-section--hero-homepage .is--mobile-cta{display:none}.ds24-section--hero-homepage .ds24-cta{background-color:var(--ds24-color-black);padding:var(--ds24-space-xs);display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds24-space-sm)}.ds24-section--hero-homepage .ds24-label{margin:0;color:var(--ds24-color-white)}.ds24-section--hero-homepage .ds24-items{display:grid;grid-template-columns:max-content max-content;grid-template-rows:repeat(3,min-content);grid-auto-flow:column;gap:var(--ds24-space-xs);list-style:none;margin:0;padding:0}.ds24-section--hero-homepage .ds24-items li{justify-content:start;display:flex}.ds24-section--hero-homepage .ds24-cta .ds24-element--button.type--link{color:var(--ds24-color-white);white-space:nowrap}@media (min-width: 1920px){.ds24-section--hero-homepage{min-height:900px;max-height:1000px}.ds24-section--hero-homepage .ds24-text{max-width:var(--ds24-container-xs)}}@media (max-width: 1439px){.ds24-section--hero-homepage{min-height:660px}}@media (max-width: 1279px) and (min-width: 600px) and (orientation: landscape){.ds24-section--hero-homepage{min-height:620px}.ds24-section--hero-homepage .ds24-content{width:480px}}@media (max-width: 1023px) and (min-width: 744px) and (orientation: portrait){.ds24-section--hero-homepage{min-height:720px;max-height:1200px;aspect-ratio:744 / 970;width:100%;height:auto}.ds24-section--hero-homepage .ds24-content{width:100%;max-width:400px}}@media (max-width: 743px) and (orientation: portrait),(max-width: 666px) and (orientation: landscape){.ds24-section--hero-homepage{min-height:970px;max-height:none;height:auto;align-items:center;padding-block:var(--ds24-space-lg)}.ds24-section--hero-homepage .ds24-content{max-width:var(--ds24-container-2xs);width:100%}.ds24-section--hero-homepage .ds24-text-group{align-items:center;text-align:center}.ds24-section--hero-homepage .is--mobile-cta{display:inline-flex}.ds24-section--hero-homepage .ds24-cta .ds24-element--button:not(.type--link){display:none}.ds24-section--hero-homepage .ds24-items{display:flex;flex-direction:column}}@media (max-width: 1023px) and (min-width: 744px) and (orientation: landscape){.ds24-section--hero-homepage{min-height:680px;max-height:680px;height:auto}}@media (max-width: 743px) and (min-width: 667px) and (orientation: landscape){.ds24-section--hero-homepage{min-height:520px;height:auto}}/*! * @file sections/hero-vendors.css * @segment global * @type ds24-section--hero-vendors * * Digistore24 section-specific CSS: Hero — Vendors * * Full-bleed hero covering full viewport height. Background image or video covers the section. * Left column (50%) holds the headline+text group (flex-grow) and a single CTA button at the bottom. * * Notes: * - .ds24-text-group has flex-grow: 1 — pushes the CTA button to the bottom of the column. * - Background /