/* theme: default */
/*
 * Default theme. It uses the design tokens from Provomatic's core stylesheet as they are;
 * accent colour, font and corners come from the theme settings in the admin panel.
 * Other themes extend this one and override only what they change.
 */

/* theme: provomatic */
/*
 * Provomatic theme: the look of the former static website provomatic.de ("Automat": keycaps, warm grey, orange accent).
 * The --pm-* tokens below dress the shop, checkout and customer area of the default theme; the .pv-* classes are used by
 * this theme's own layout and block views. Fonts come from this theme's assets (SIL OFL, see fonts/LICENSE.txt).
 */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/theme-assets/provomatic/fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/theme-assets/provomatic/fonts/bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --pm-canvas: #ECECE7;
    --pm-surface: #F7F7F3;
    --pm-surface-muted: #E2E2DC;
    --pm-border: #D3D3CC;
    --pm-text: #1E1F22;
    --pm-muted: #4E4F56;
    --pm-on-primary: #1E1F22;
    --pm-primary-700: #A33600;
    --pm-success: #16833F;
    --pm-warning: #A15C00;

    --pv-key: #F7F7F3;
    --pv-key-edge: #C9C9C2;
    --pv-key-drop: #A9A9A2;
    --pv-link: #A33600;
    --pv-panel: #26282C;
    --pv-shadow: 0 1px 0 #C9C9C2, 0 18px 40px rgba(30, 31, 34, .10);
    --pv-radius: 16px;
}

:root.dark {
    --pm-canvas: #151619;
    --pm-surface: #1F2024;
    --pm-surface-muted: #26282C;
    --pm-border: #34363C;
    --pm-text: #ECECE7;
    --pm-muted: #AEAFB6;
    --pm-primary: #FF7A2E;
    --pm-on-primary: #1E1F22;
    --pm-primary-700: #FF9C61;
    --pm-success: #4ADE80;
    --pm-warning: #FBBF24;

    --pv-key: #2C2E33;
    --pv-key-edge: #17181B;
    --pv-key-drop: #0E0F11;
    --pv-link: #FF9C61;
    --pv-shadow: 0 1px 0 #0E0F11, 0 18px 40px rgba(0, 0, 0, .35);
}

html[data-theme="provomatic"] body {
    font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.62;
    background: var(--pm-canvas);
    color: var(--pm-text);
}

[data-theme="provomatic"] h1, [data-theme="provomatic"] h2, [data-theme="provomatic"] h3 { font-weight: 800; letter-spacing: -.03em; line-height: 1.08; hyphens: auto; overflow-wrap: break-word; }
[data-theme="provomatic"] :focus-visible { outline: 3px solid var(--pm-primary); outline-offset: 3px; }

/* Layout */
/* In rem and em: 1180 px and 1240 px at the usual font size; with a larger default font the page grows along or the menu button takes over earlier */
.pv-wrap { width: 100%; max-width: 73.75rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .pv-wrap { padding: 0 28px; } }
.pv-band { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }

/* Header */
.pv-top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--pm-canvas) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--pm-border); }
.pv-top-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.pv-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--pm-text); font-weight: 800; letter-spacing: -.045em; font-size: 1.35rem; }
/* The logo never shrinks: a percentage max-width inside a shrinking flex item let it collapse to 0 px when the menu was wide */
.pv-brand { flex-shrink: 0; }
.pv-brand img { height: 34px; width: auto; max-width: none; }
.pv-brand .pv-logo-dark { display: none; }
.dark .pv-brand .pv-logo-light { display: none; }
.dark .pv-brand .pv-logo-dark { display: block; }
.pv-nav { margin-left: auto; display: flex; align-items: center; gap: .1rem; flex-wrap: nowrap; }
.pv-nav form { margin-left: .4rem; }
.pv-navlink { color: var(--pm-text); text-decoration: none; padding: .45rem .55rem; border-radius: 10px; font-weight: 600; font-size: .95rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.pv-navlink:hover, .pv-navlink[aria-current="page"] { background: var(--pv-key); box-shadow: inset 0 -3px 0 var(--pv-key-edge); color: var(--pm-text); }
.pv-count { border-radius: 999px; background: var(--pm-primary); color: var(--pm-on-primary); font-size: .75rem; padding: .05rem .45rem; font-weight: 800; }
.pv-menu { display: none; margin-left: auto; }
.pv-menu > summary { list-style: none; cursor: pointer; background: var(--pv-key); border-radius: 12px; width: 46px; height: 46px; display: grid; place-items: center; box-shadow: inset 0 -4px 0 var(--pv-key-edge); }
.pv-menu > summary::-webkit-details-marker { display: none; }
.pv-menu > summary svg { width: 22px; height: 22px; }
.pv-menu[open] .pv-nav { display: flex; }
/* Should the menu still not fit (other font metrics), it wraps onto a second line instead of pushing the logo out */
.pv-top-inner > .pv-nav { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: .15rem; }
@media (max-width: 77.5em) {
    .pv-top-inner { position: relative; }
    .pv-menu { display: block; }
    .pv-top-inner > .pv-nav { display: none; }
    .pv-menu .pv-nav { position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; background: var(--pm-surface); border-bottom: 1px solid var(--pm-border); padding: .75rem 16px 1.25rem; box-shadow: var(--pv-shadow); }
    .pv-menu .pv-navlink { padding: .75rem .8rem; }
}
@media (min-width: 77.5625em) { .pv-menu .pv-nav { display: none !important; } }

/* Main and footer */
.pv-main { padding: 32px 0 48px; }
.pv-footer { padding: 8px 0 36px; font-size: .96rem; }

/* Keycap buttons */
.pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: 0 1.4rem; border-radius: 12px; background: var(--pm-primary); color: var(--pm-on-primary); font-weight: 800; text-decoration: none; border: 0; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22), 0 2px 0 rgba(0, 0, 0, .18); transition: transform .08s ease; }
.pv-btn:hover { color: var(--pm-on-primary); transform: translateY(-1px); }
.pv-btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.pv-btn-ghost { background: var(--pv-key); color: var(--pm-text); box-shadow: inset 0 -5px 0 var(--pv-key-edge), 0 2px 0 var(--pv-key-drop); }
.pv-btn-ghost:hover { color: var(--pm-text); }
.pv-btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
@media (prefers-reduced-motion: reduce) { .pv-btn { transition: none; } }

/* Blocks */
.pv-block { padding: 20px 0; }
.pv-hero { display: grid; gap: 2.5rem; align-items: center; padding: 24px 0 56px; }
@media (min-width: 1000px) { .pv-hero.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 3.5rem; } }
.pv-hero h1, .pv-hero h2 { font-size: clamp(2.2rem, 1.3rem + 2.4vw, 3.5rem); margin: 0 0 .55em; text-wrap: balance; }
.pv-lead { font-size: 1.2rem; color: var(--pm-muted); max-width: 40rem; }
.pv-shot { border-radius: 14px; overflow: hidden; background: var(--pv-panel); padding: 8px; box-shadow: var(--pv-shadow); }
.pv-shot img { display: block; width: 100%; height: auto; border-radius: 8px; }
.pv-h2 { font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.6rem); margin: 0 0 1.4rem; }
.pv-prose { max-width: 50rem; overflow-wrap: break-word; }
.pv-prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin: 2.4rem 0 .8rem; }
.pv-prose h2:first-child { margin-top: 0; }
.pv-prose h3 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; }
.pv-prose p { margin: 0 0 1em; }
.pv-prose ul, .pv-prose ol { padding-left: 1.3rem; margin: 0 0 1em; }
.pv-prose ul { list-style: disc; }
.pv-prose ol { list-style: decimal; }
.pv-prose li + li { margin-top: .35rem; }
.pv-prose a { color: var(--pv-link); text-decoration: underline; text-underline-offset: 3px; }
.pv-prose a:hover { color: var(--pm-text); }
.pv-prose blockquote { margin: 1.2rem 0; padding: 1rem 1.2rem; background: var(--pm-surface); border-radius: 14px; box-shadow: var(--pv-shadow); }
.pv-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .pv-grid-2, .pv-grid-3, .pv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .pv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pv-card { background: var(--pm-surface); border-radius: var(--pv-radius); padding: 1.5rem; box-shadow: var(--pv-shadow); }
.pv-card h3 { font-size: 1.2rem; margin: 0 0 .45rem; }
.pv-card p { color: var(--pm-muted); margin: 0; }
.pv-key { width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--pv-key); color: var(--pm-text); display: grid; place-items: center; font-weight: 800; margin-bottom: .9rem; box-shadow: inset 0 -4px 0 var(--pv-key-edge), 0 2px 0 var(--pv-key-drop); }
.pv-card:last-child .pv-key { background: var(--pm-primary); color: var(--pm-on-primary); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
.pv-faq { max-width: 50rem; display: grid; gap: .7rem; }
.pv-faq details { background: var(--pm-surface); border-radius: 14px; box-shadow: var(--pv-shadow); }
.pv-faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; list-style: none; }
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary::after { content: "+"; float: right; font-weight: 800; color: var(--pm-muted); }
.pv-faq details[open] summary::after { content: "–"; }
.pv-faq details p { padding: 0 1.2rem 1.1rem; margin: 0; color: var(--pm-muted); white-space: pre-line; }
.pv-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; background: var(--pv-panel); color: #ECECE7; border-radius: 20px; padding: 2rem 2.2rem; margin: 40px 0; box-shadow: var(--pv-shadow); }
.pv-cta h2 { color: #ECECE7; margin: 0 0 .3rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
.pv-cta p { color: #AEAFB6; margin: 0; }
.pv-figure { margin: 0; padding: 24px 0; }
.pv-figure figcaption { margin-top: .75rem; color: var(--pm-muted); font-size: .96rem; }
.pv-split { display: grid; gap: 2rem; align-items: center; padding: 40px 0; }
@media (min-width: 860px) { .pv-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-split.is-right .pv-shot { order: 2; } }

/* Blocks from TASK-054 in the look of the website: tables, code, table of contents, gallery */
[data-theme="provomatic"] .pm-table { overflow-x: auto; margin: 1rem 0 1.6rem; background: var(--pm-surface); border-radius: 12px; box-shadow: var(--pv-shadow); }
[data-theme="provomatic"] .pm-table table { width: 100%; border-collapse: collapse; font-size: .96rem; }
[data-theme="provomatic"] .pm-table th, [data-theme="provomatic"] .pm-table td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--pm-border); vertical-align: top; }
[data-theme="provomatic"] .pm-table thead th { background: var(--pm-surface-muted); font-weight: 700; }
/* Tables in legal texts come without the .pm-table wrapper: they fit the width and their words break, instead of widening the
   page or scrolling on their own (a scrolling box would need to be reachable by keyboard, axe scrollable-region-focusable) */
[data-theme="provomatic"] .legal-text table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .94rem; }
[data-theme="provomatic"] .legal-text th, [data-theme="provomatic"] .legal-text td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--pm-border); vertical-align: top; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) { [data-theme="provomatic"] .legal-text th, [data-theme="provomatic"] .legal-text td { padding: .45rem .5rem; } }
[data-theme="provomatic"] .pm-code { max-width: 50rem; }
[data-theme="provomatic"] .pm-code-head { border-color: var(--pm-border); border-radius: 12px 12px 0 0; background: var(--pm-surface); }
[data-theme="provomatic"] .pm-code-body { background: var(--pv-panel); color: #E8E8E3; border-color: var(--pv-panel); border-radius: 0 0 12px 12px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35); }
[data-theme="provomatic"] .pm-toc { max-width: 50rem; background: var(--pm-surface); border-radius: var(--pv-radius); padding: 1.1rem 1.3rem; box-shadow: var(--pv-shadow); margin: 8px 0 16px; }
[data-theme="provomatic"] .pm-toc p { color: var(--pm-muted); font-weight: 700; }
[data-theme="provomatic"] .pm-toc a { color: var(--pm-text); text-decoration: none; display: inline-block; padding: .15rem .5rem; border-radius: 8px; }
[data-theme="provomatic"] .pm-toc a:hover { background: var(--pv-key); box-shadow: inset 0 -3px 0 var(--pv-key-edge); }
[data-theme="provomatic"] [data-gallery] button[data-lightbox-open] { background: var(--pv-panel); padding: 8px; border-radius: 14px; box-shadow: var(--pv-shadow); }
[data-theme="provomatic"] [data-gallery] button[data-lightbox-open] img { aspect-ratio: 16 / 10; object-position: top; border-radius: 8px; }
[data-theme="provomatic"] [data-gallery] figcaption { color: var(--pm-muted); }
[data-theme="provomatic"] .pm-lightbox figcaption, [data-theme="provomatic"] [data-lightbox-caption] { color: #ECECE7; }

/* The light look of the former website (assets/site.css there): headings, page heads, check list, contents at the side, the
   footer as a rating plate and its switches. The theme is light unless the visitor switches to dark (assets/scheme.js). */
[data-theme="provomatic"] h1, [data-theme="provomatic"] h2, [data-theme="provomatic"] h3 { line-height: 1.05; }
[data-theme="provomatic"] h1 { letter-spacing: -.04em; }
[data-theme="provomatic"] h3 { letter-spacing: -.015em; line-height: 1.2; }
.pv-hero { padding: 24px 0 24px; }
.pv-hero h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.3rem); }
.pv-hero.has-image { padding: 16px 0 72px; }
.pv-hero.has-image h1, .pv-hero.has-image h2 { font-size: clamp(2.2rem, 1.3rem + 2.4vw, 3.5rem); }
.pv-lead { font-size: 1.17rem; margin: 0; }
.pv-hero.has-image .pv-lead { font-size: 1.22rem; }
.pv-prose h2, .pv-h2 { font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.6rem); margin: 2.6rem 0 .55em; padding-top: .3rem; }
.pv-prose h2:first-child { margin-top: 0; }
.pv-prose h3 { margin: 1.8rem 0 .55em; }
.pv-checks { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .5rem; }
.pv-checks li { padding-left: 1.9rem; position: relative; }
.pv-checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.15rem; height: 1.15rem; border-radius: 5px; background: var(--pm-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23ECECE7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
.dark .pv-checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23151619' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Contents of the page at the side on wide screens, as on the former website; on narrow screens a box at the top */
@media (min-width: 1020px) {
    [data-theme="provomatic"] .pm-blocks:has(> .pm-toc) { display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: 2.5rem; row-gap: 0; }
    [data-theme="provomatic"] .pm-blocks:has(> .pm-toc) > * { grid-column: 2; }
    [data-theme="provomatic"] .pm-blocks:has(> .pm-toc) > .pm-toc { grid-column: 1; grid-row: 1 / span 400; align-self: start; position: sticky; top: 96px; max-width: none; margin: 0; padding: 56px 0 0; background: none; box-shadow: none; border-radius: 0; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    [data-theme="provomatic"] .pm-blocks:has(> .pm-toc) > .pm-toc p { font-size: .95rem; margin-bottom: .6rem; }
    [data-theme="provomatic"] .pm-blocks:has(> .pm-toc) > .pm-toc ol { display: grid; gap: .25rem; }
    [data-theme="provomatic"] .pm-blocks:has(> .pm-toc) > .pm-toc li { padding-left: 0; }
    [data-theme="provomatic"] .pm-blocks:has(> .pm-toc) > .pm-toc a { display: block; padding: .35rem .8rem; color: var(--pm-muted); font-size: .95rem; border-radius: 10px; }
    [data-theme="provomatic"] .pm-blocks:has(> .pm-toc) > .pm-toc a:hover { color: var(--pm-text); }
}

/* Footer as the rating plate: light metal with screws, in dark mode too */
.pv-plate { position: relative; background: linear-gradient(135deg, #C9CAC4, #E4E4DF 45%, #C2C3BD); color: #1E1F22; border-radius: 18px; padding: 2.2rem 2.2rem 1.6rem; box-shadow: inset 0 1px 0 #F3F3EE, inset 0 -2px 0 #A6A7A0, 0 10px 24px rgba(30, 31, 34, .14); }
.pv-screw { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F3F3EE, #A3A39C); box-shadow: inset 0 0 0 1px #8E8E87; }
.pv-screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #7C7C75; transform: rotate(35deg); }
.pv-screw.tl { left: 12px; top: 12px; } .pv-screw.tr { right: 12px; top: 12px; } .pv-screw.bl { left: 12px; bottom: 12px; } .pv-screw.br { right: 12px; bottom: 12px; }
.pv-footer-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .pv-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.pv-plate h2 { font-size: 1rem; letter-spacing: 0; line-height: 1.3; margin: 0 0 .7rem; color: #1E1F22; }
.pv-plate ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.pv-plate a { color: #1E1F22; text-decoration: none; }
.pv-plate a:hover { color: #1E1F22; text-decoration: underline; }
.pv-footer-about p { color: #3A3B40; max-width: 26rem; margin: .9rem 0 0; }
.pv-plate .pv-brand .pv-logo-light { display: block; }
.pv-plate .pv-brand .pv-logo-dark { display: none; }
.pv-footer-bottom { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid rgba(30, 31, 34, .18); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; color: #3A3B40; font-size: .86rem; }
.pv-footer-bottom p { margin: 0; max-width: 46rem; }
.pv-footer-bottom .pv-cancel { margin-bottom: .4rem; font-size: .94rem; font-weight: 700; }
.pv-footer-bottom .pv-cancel a { text-decoration: underline; text-underline-offset: 3px; }

/* Switches: segments as on the former website (language form of the shop and the light/dark buttons of this theme) */
.pv-switches { display: flex; flex-wrap: wrap; gap: .6rem; }
.pv-seg, .pv-seg form { display: inline-flex; background: rgba(30, 31, 34, .08); border-radius: 10px; padding: 3px; gap: 2px; }
.pv-seg form { background: none; padding: 0; }
.pv-seg button { font: inherit; font-size: .86rem; font-weight: 400; padding: .35rem .7rem; border-radius: 8px; border: 0; background: none; color: #3A3B40; cursor: pointer; min-height: 34px; display: inline-flex; align-items: center; }
.pv-seg button:hover { color: #1E1F22; }
.pv-seg button[aria-pressed="true"] { background: #F7F7F3; color: #1E1F22; font-weight: 700; box-shadow: inset 0 -2px 0 #C9C9C2; }
.dark .pv-seg:not(.pv-plate .pv-seg) { background: rgba(255, 255, 255, .08); }
.dark .pv-seg:not(.pv-plate .pv-seg) button { color: var(--pm-muted); }
.dark .pv-seg:not(.pv-plate .pv-seg) button[aria-pressed="true"] { background: var(--pv-key); color: var(--pm-text); box-shadow: inset 0 -2px 0 var(--pv-key-edge); }

/* Features to try on the start page, each in the section of its topic (views/partials/pv-demo.blade.php, placed by spacer blocks;
   assets/demos.js): price calculator, the steps after an order and the theme comparison, as on the former website */
.pv-demo { margin: 1.4rem 0 2.6rem; }
.pv-demo-calc .pv-calc { max-width: 44rem; }
.pv-demo-ticker .pv-ticker { max-width: 50rem; }
.pv-demo-compare h3 { font-size: 1.2rem; margin: 0 0 .45rem; }
.pv-demo-lead { max-width: 46rem; color: var(--pm-muted); margin: 0 0 1rem; }
.pv-tag { display: inline-block; vertical-align: middle; margin-left: .4rem; padding: .1rem .55rem; border-radius: 999px; background: var(--pm-surface-muted); color: var(--pm-muted); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.pv-calc { display: grid; gap: .6rem; }
.pv-calc h3, .pv-ticker h3 { font-size: 1.2rem; margin: 0 0 .45rem; }
.pv-calc > label, .pv-calc legend { font-weight: 700; }
.pv-calc fieldset { border: 0; margin: .3rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pv-calc legend { padding: 0; margin-bottom: .4rem; float: left; width: 100%; }
.pv-calc input[type=range] { width: 100%; accent-color: var(--pm-primary); min-height: 32px; }
.pv-calc select, .pv-compare-pick select { min-height: 44px; padding: 0 .7rem; border-radius: 10px; border: 1px solid var(--pm-border); background: var(--pm-canvas); color: var(--pm-text); font: inherit; }
.pv-pill { position: relative; font-weight: 700; }
.pv-pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pv-pill span { display: block; padding: .5rem 1rem; border-radius: 10px; border: 2px solid var(--pm-border); background: var(--pm-canvas); }
.pv-pill input:checked + span { border-color: var(--pm-primary); background: var(--pm-surface); }
.pv-pill input:focus-visible + span { outline: 3px solid var(--pm-primary); outline-offset: 2px; }
.pv-calc-result { margin: .8rem 0 0; color: var(--pm-muted); }
.pv-calc-result output { font-size: 2.1rem; font-weight: 800; color: var(--pm-text); font-variant-numeric: tabular-nums; display: inline-block; min-width: 6.5ch; }
.pv-calc-net { margin: 0; color: var(--pm-muted); font-variant-numeric: tabular-nums; }
.pv-calc-note { margin: .4rem 0 0; font-size: .9rem; color: var(--pm-muted); }
.pv-ticker ol { list-style: none; margin: 1rem 0 0 .6rem; padding: 0; display: grid; gap: 1rem; border-left: 3px solid var(--pm-border); }
.pv-ticker li { position: relative; padding-left: 1.3rem; display: grid; gap: .15rem; }
.pv-ticker li::before { content: ""; position: absolute; left: -.6rem; top: .35em; width: .9rem; height: .9rem; border-radius: 50%; background: var(--pm-success); box-shadow: 0 0 0 3px var(--pm-surface); }
.pv-ticker li span { color: var(--pm-muted); }
.pv-ticker.is-waiting li { opacity: 0; transform: translateY(8px); }
.pv-ticker.is-waiting.is-running li { animation: pv-tick-in .5s ease forwards; }
.pv-ticker.is-running li:nth-child(1) { animation-delay: .2s; } .pv-ticker.is-running li:nth-child(2) { animation-delay: 1.3s; }
.pv-ticker.is-running li:nth-child(3) { animation-delay: 2.4s; } .pv-ticker.is-running li:nth-child(4) { animation-delay: 3.5s; }
@keyframes pv-tick-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pv-ticker.is-waiting li { opacity: 1; transform: none; animation: none; } }
.pv-compare-pick { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .8rem; }
.pv-compare-pick label { font-weight: 700; display: flex; gap: .5rem; align-items: center; }
.pv-compare-stage { --pos: 50%; position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--pv-panel); box-shadow: var(--pv-shadow); }
.pv-compare-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pv-compare-left { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pv-compare-stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; background: var(--pm-primary); transform: translateX(-50%); box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); pointer-events: none; }
.pv-compare-stage input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.pv-compare-stage:has(input:focus-visible) { outline: 3px solid var(--pm-primary); outline-offset: 3px; }

/* The animated Provomatic machine in the head of the start page (views/partials/pv-device.blade.php, assets/device.js), taken
   from the former website; every rule sits under .dev-wrap, the keyframes are called dev-*. Part of this file, not a stylesheet
   of its own: one render-blocking request less on the start page, and the machine has its size before the first paint. */
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url("/theme-assets/provomatic/fonts/vt323-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url("/theme-assets/provomatic/fonts/vt323-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
.dev-wrap .screw{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F3F3EE,#A3A39C);box-shadow:inset 0 0 0 1px #8E8E87}
.dev-wrap .screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:#7C7C75;transform:rotate(35deg)}
.dev-wrap .row-gap{flex:1}
.dev-wrap .screw.tl{left:14px;top:14px}.dev-wrap .screw.tr{right:14px;top:14px}.dev-wrap .screw.bl{left:14px;bottom:14px}.dev-wrap .screw.br{right:14px;bottom:14px}
.dev-wrap .dev .key{display:grid;place-items:center;border-radius:12px;background:#F7F7F3;box-shadow:inset 0 -5px 0 #C9C9C2,0 2px 0 #A9A9A2,0 6px 12px rgba(30,31,34,.18);font-weight:700;font-size:13px;color:#1E1F22;height:64px}
.dev-wrap .dev{position:relative;z-index:2;background:linear-gradient(180deg,#E2E2DC,#CFCFC8);border-radius:28px;padding:30px;box-shadow:inset 0 2px 0 #F5F5F0,inset 0 -3px 0 #B4B4AD,0 30px 50px rgba(30,31,34,.22),0 4px 8px rgba(30,31,34,.12)}
.dev-wrap .panel{background:#26282C;border-radius:16px;padding:18px}
.dev-wrap .lcd{position:relative;overflow:hidden;background:#B6C59E;border-radius:8px;padding:14px 18px;min-height:calc(4 * 1.12em + 28px);box-shadow:inset 0 3px 10px rgba(0,0,0,.35);font-family:'VT323',monospace;color:#1F2B17;font-size:26px;line-height:1.12;text-shadow:1.5px 1.5px 0 rgba(31,43,23,.16)}
.dev-wrap .lcd::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px);pointer-events:none}
.dev-wrap .lcd::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.22),transparent 60%);pointer-events:none}
.dev-wrap .lcd.boot{animation:dev-boot .9s steps(6) both}
@keyframes dev-boot{0%{filter:brightness(.55)}30%{filter:brightness(1.12)}45%{filter:brightness(.8)}100%{filter:none}}
.dev-wrap .ln{display:flex;justify-content:space-between;gap:12px;min-height:1.12em;white-space:pre}
.dev-wrap .cur{display:inline-block;width:.55em;height:.95em;margin-left:1px;vertical-align:-.12em;background:#1F2B17;animation:dev-blink 1s steps(1) infinite}
@keyframes dev-blink{50%{opacity:0}}
.dev-wrap .keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.dev-wrap .keys .key{font:inherit;font-weight:700;font-size:13px;border:0;cursor:pointer;position:relative;transition:transform .08s ease,box-shadow .08s ease,background .2s}
.dev-wrap .keys .key.active{background:#FF6A13;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 2px 0 rgba(0,0,0,.3),0 6px 12px rgba(30,31,34,.25)}
.dev-wrap .keys .key::after{content:"";position:absolute;top:9px;left:10px;width:6px;height:6px;border-radius:50%;background:#C9C9C2;transition:background .3s,box-shadow .3s}
.dev-wrap .keys .key.done::after{background:#3BD16F;box-shadow:0 0 6px #3BD16F}
.dev-wrap .keys .key.active::after{background:#FFF3E6;box-shadow:0 0 6px #FFF3E6}
.dev-wrap .keys .key.pressed{transform:translateY(4px);box-shadow:inset 0 -1px 0 #C9C9C2,0 0 0 #A9A9A2,0 1px 2px rgba(30,31,34,.2)}
.dev-wrap .keys .key.active.pressed{box-shadow:inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 rgba(0,0,0,.3),0 1px 2px rgba(30,31,34,.2)}
.dev-wrap .keys .key:focus-visible,.dev-wrap .knob:focus-visible,.dev-wrap .dev-pause:focus-visible{outline:3px solid #FF6A13;outline-offset:3px}
.dev-wrap .row{display:flex;align-items:center;gap:16px;margin-top:18px}
.dev-wrap .knob{--rot:30deg;width:54px;height:54px;border-radius:50%;border:0;padding:0;cursor:pointer;background:conic-gradient(from 210deg,#3A3C41,#5B5D63,#3A3C41);box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 0 0 4px #2F3135;position:relative;transform:rotate(var(--rot));transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.dev-wrap .knob-mark{position:absolute;left:50%;top:6px;width:4px;height:14px;background:#FF6A13;border-radius:2px;transform:translateX(-50%)}
.dev-wrap .knob-l [data-lang]{transition:color .2s}
.dev-wrap .knob-l [data-lang].on{color:#FFFFFF;font-weight:700}
.dev-wrap .led{width:10px;height:10px;border-radius:50%;background:#3BD16F;box-shadow:0 0 10px #3BD16F;transition:background .2s,box-shadow .2s}
.dev-wrap .led.busy{background:#F5B841;box-shadow:0 0 12px #F5B841;animation:dev-pulse .7s ease-in-out infinite}
@keyframes dev-pulse{50%{opacity:.35}}
.dev-wrap .slot{position:relative;margin:22px auto 0;width:62%;height:14px;border-radius:7px;background:#26282C;box-shadow:inset 0 3px 4px rgba(0,0,0,.6);overflow:hidden}
.dev-wrap .slot-light{position:absolute;left:8%;right:8%;top:50%;height:2px;border-radius:2px;background:#FF6A13;opacity:0;transform:translateY(-50%);box-shadow:0 0 12px 3px rgba(255,106,19,.65);transition:opacity .4s}
.dev-wrap .slot.on .slot-light{opacity:1;animation:dev-scan 1.1s ease-in-out infinite alternate}
@keyframes dev-scan{from{left:8%;right:60%}to{left:60%;right:8%}}
.dev-wrap .dev-pause{position:absolute;right:0;top:-46px;font:inherit;font-size:13px;font-weight:600;color:#46474D;background:transparent;border:1.5px solid #B4B4AD;border-radius:999px;min-height:36px;padding:0 14px;cursor:pointer}
.dev-wrap .dev-pause:hover{border-color:#46474D}
.dev-wrap .machine{margin-top:14px;height:74px}
.dev-wrap .gears{display:block;width:100%;height:100%;overflow:visible}
.dev-wrap .gear-wrap{opacity:.32;transform:translateY(-10px);transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .45s}
.dev-wrap .gear-wrap.on{opacity:1;transform:none}
.dev-wrap .gear-wrap .tooth{fill:none;stroke:#5A5D66;stroke-width:1.2;stroke-dasharray:3 3}
.dev-wrap .gear-wrap.on .tooth{fill:url(#metal);stroke:#15161A;stroke-width:1.2;stroke-dasharray:none}
.dev-wrap .gear-wrap .hub{fill:#26282C;stroke:#5A5D66;stroke-width:1.2}
.dev-wrap .gear-wrap .core{fill:#3A3C42}
.dev-wrap .gear-wrap.busy .core{fill:#F5B841;filter:drop-shadow(0 0 4px #F5B841)}
.dev-wrap .gear-wrap.ok .core{fill:#3BD16F;filter:drop-shadow(0 0 4px #3BD16F)}
.dev-wrap .paper{position:absolute;z-index:3;left:50%;width:50%;transform:translateX(-50%);clip-path:inset(0 -40px -800px -40px);pointer-events:none}
.dev-wrap .ticket{position:relative;background:#FFFFFF;padding:16px 16px 24px;font-size:14px;line-height:1.45;display:grid;gap:3px;box-shadow:0 12px 22px rgba(30,31,34,.2);transform:translateY(-101%);transform-origin:50% 0}
.dev-wrap .ticket .t-title{font-size:16px}
.dev-wrap .ticket .t-sub{color:#55565C}
.dev-wrap .ticket .t-rule{border-top:1.5px dashed #C9C9C2;margin:8px 0}
.dev-wrap .ticket .t-row{display:flex;justify-content:space-between;gap:10px;font-family:'VT323',monospace;font-size:17px;line-height:1.2}
.dev-wrap .ticket .t-k{color:#6B6C72}
.dev-wrap .ticket .t-sum{font-size:21px}
.dev-wrap .ticket .t-thanks{margin-top:10px;text-align:center;font-size:13px;color:#6B6C72}
.dev-wrap .ticket .t-perf{position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(-45deg,transparent 3px,#FFFFFF 0) 0 0/6px 6px repeat-x,linear-gradient(45deg,transparent 3px,#FFFFFF 0) 0 0/6px 6px repeat-x}
.dev-wrap .ticket{visibility:hidden}
.dev-wrap .ticket.print,.dev-wrap .ticket.out,.dev-wrap .ticket.tear{visibility:visible}
.dev-wrap .ticket.print{animation:dev-feed 3.2s steps(32) forwards}
@keyframes dev-feed{from{transform:translateY(-101%)}to{transform:translateY(0)}}
.dev-wrap .ticket.out{transform:translateY(0) rotate(-1.2deg);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.dev-wrap .ticket.tear{animation:dev-tear .7s ease-in forwards}
@keyframes dev-tear{from{transform:translateY(0) rotate(-1.2deg);opacity:1}to{transform:translate(30px,90px) rotate(-12deg);opacity:0}}
@media (prefers-reduced-motion: reduce){.dev-wrap .gear-wrap{transition:none}.dev-wrap .ticket.print,.dev-wrap .ticket.out{animation:none;transform:none}}
.dev-wrap .ripple{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid rgba(255,255,255,.9);pointer-events:none;animation:dev-ripple .55s ease-out forwards}
.dev-wrap .keys .key:not(.active) .ripple{border-color:rgba(255,106,19,.8)}
@keyframes dev-ripple{from{transform:scale(.4);opacity:1}to{transform:scale(5);opacity:0}}
@media (prefers-reduced-motion: reduce){.dev-wrap .lcd.boot,.dev-wrap .cur,.dev-wrap .led.busy,.dev-wrap .slot.on .slot-light{animation:none}.dev-wrap .knob,.dev-wrap .keys .key{transition:none}.dev-wrap .ticket.print,.dev-wrap .ticket.settled{animation:none;opacity:1;transform:translate(-50%,30px) rotate(-2deg)}.dev-wrap .dev-pause{display:none}}
@media (max-width:560px){.dev-wrap .lcd{font-size:19px;padding:12px 14px}.dev-wrap .paper{width:80%}.dev-wrap .keys{gap:8px}.dev-wrap .keys .key{font-size:12px}}

.dev-wrap{margin:0;position:relative;padding-bottom:230px;padding-top:46px}
.dev-wrap .dev{color:#1E1F22}
.dev-wrap .dev-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;padding:0 6px}
.dev-wrap .dev-name{font-weight:800;font-size:17px;letter-spacing:-.01em}
.dev-wrap .dev-model{font-size:13px;color:#55565C}
.dev-wrap .knob-l,.dev-wrap .led-l{font-size:12px;color:#B8BAC0;line-height:1.4}
.dev-wrap .ticket{color:#1E1F22}
.dev-wrap .dev-pause{top:0!important;color:var(--pm-muted)!important;border-color:var(--pm-border)!important}

/* settings */
:root {
    --pm-primary: #ff6a13;
    --pm-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pm-radius: 1.25rem;
}