/* 16.11.0: the storefront. One set of parts; three themes, each light and dark. */

:root {
    /* 16.11.19: Harbour in the brand's green and cream, the same as the logo, the icons and the beaver */
    --bg: #f4f3ea; --surface: #fffefa; --text: #1b2615; --muted: #55604c; --line: #dedcca; --soft: #ebeadc;
    --brand: #2f4f1e; --accent: #2f4f1e; --accent-2: #24401a; --accent-text: #f6f4e9; --eye: #4b6b35;
    --deep: #24391a; --deep-2: #2f4a23; --deep-line: #405d31; --deep-text: #f6f4e9; --deep-muted: #cfd9c3; --eye-deep: #bcd6a0;
    --ok-bg: #e4efd9; --ok-text: #2a4a1a; --err-bg: #fde2e0; --err-text: #9b1c14;
    --radius: 18px; --radius-sm: 10px; --shadow: 0 14px 44px rgba(36, 57, 26, .10);
    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: var(--font);
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="harbour"][data-mode="dark"] { --bg: #10180c; --surface: #18241a; --text: #ecefe4; --muted: #b0bba4; --line: #2e3d26; --soft: #141f10;
    --accent: #a9cc87; --accent-2: #bcd9a0; --accent-text: #10180c; --eye: #bcd9a0; --deep: #0b1208; --deep-2: #1a2814; --deep-line: #2c3d22;
    --ok-bg: #1c3014; --ok-text: #bfe3a0; --err-bg: #3a1a1b; --err-text: #ffaaa3; --shadow: 0 14px 44px rgba(0, 0, 0, .35); }
@media (prefers-color-scheme: dark) {
    :root[data-theme="harbour"][data-mode="auto"] { --bg: #10180c; --surface: #18241a; --text: #ecefe4; --muted: #b0bba4; --line: #2e3d26; --soft: #141f10;
        --accent: #a9cc87; --accent-2: #bcd9a0; --accent-text: #10180c; --eye: #bcd9a0; --deep: #0b1208; --deep-2: #1a2814; --deep-line: #2c3d22;
        --ok-bg: #1c3014; --ok-text: #bfe3a0; --err-bg: #3a1a1b; --err-text: #ffaaa3; --shadow: 0 14px 44px rgba(0, 0, 0, .35); }
}

/* Minimal: the same design as the admin. */
:root[data-theme="minimal"] { --bg: #f1f1ef; --surface: #fafaf9; --text: #2b2e33; --muted: #5e636a; --line: #dcdcd8; --soft: #ececea;
    --accent: #4f6678; --accent-2: #425666; --accent-text: #ffffff; --eye: #4f6678; --deep: #fafaf9; --deep-2: #f1f1ef; --deep-line: #dcdcd8;
    --deep-text: #2b2e33; --deep-muted: #5e636a; --eye-deep: #4f6678; --radius: 12px; --radius-sm: 8px; --shadow: none;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: var(--font); }
:root[data-theme="minimal"][data-mode="dark"] { --bg: #1b1d21; --surface: #212429; --text: #d3d6db; --muted: #8f959e; --line: #31353c; --soft: #272a30;
    --accent: #93aabb; --accent-2: #a9bccb; --accent-text: #12161a; --eye: #a9bccb; --deep: #212429; --deep-2: #1b1d21; --deep-line: #31353c;
    --deep-text: #d3d6db; --deep-muted: #8f959e; --eye-deep: #a9bccb; --ok-bg: #233029; --ok-text: #9fc6ae; --err-bg: #352526; --err-text: #d9a09d; }
@media (prefers-color-scheme: dark) {
    :root[data-theme="minimal"][data-mode="auto"] { --bg: #1b1d21; --surface: #212429; --text: #d3d6db; --muted: #8f959e; --line: #31353c; --soft: #272a30;
        --accent: #93aabb; --accent-2: #a9bccb; --accent-text: #12161a; --eye: #a9bccb; --deep: #212429; --deep-2: #1b1d21; --deep-line: #31353c;
        --deep-text: #d3d6db; --deep-muted: #8f959e; --eye-deep: #a9bccb; --ok-bg: #233029; --ok-text: #9fc6ae; --err-bg: #352526; --err-text: #d9a09d; }
}

/* Showcase: big type and dark cards. */
:root[data-theme="showcase"] { --bg: #f6f6f3; --surface: #ffffff; --text: #16191d; --muted: #50575f; --line: #e3e3de; --soft: #ececE7;
    --accent: #1d5866; --accent-2: #174a56; --accent-text: #ffffff; --eye: #1d5866; --deep: #16191d; --deep-2: #22262b; --deep-line: #343940;
    --deep-text: #f2f2ee; --deep-muted: #b9bcb4; --eye-deep: #e9c46a; --radius: 16px; --font-head: Manrope, system-ui, sans-serif; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:root[data-theme="showcase"][data-mode="dark"] { --bg: #101214; --surface: #1a1d21; --text: #ecede8; --muted: #a3a8ae; --line: #2c3036; --soft: #202429;
    --accent: #e9c46a; --accent-2: #f1d38c; --accent-text: #16191d; --eye: #e9c46a; --deep: #000000; --deep-2: #16191d; --deep-line: #2c3036;
    --ok-bg: #1d3328; --ok-text: #9fd8b5; --err-bg: #3a1a1b; --err-text: #ffaaa3; --shadow: none; }
@media (prefers-color-scheme: dark) {
    :root[data-theme="showcase"][data-mode="auto"] { --bg: #101214; --surface: #1a1d21; --text: #ecede8; --muted: #a3a8ae; --line: #2c3036; --soft: #202429;
        --accent: #e9c46a; --accent-2: #f1d38c; --accent-text: #16191d; --eye: #e9c46a; --deep: #000000; --deep-2: #16191d; --deep-line: #2c3036;
        --ok-bg: #1d3328; --ok-text: #9fd8b5; --err-bg: #3a1a1b; --err-text: #ffaaa3; --shadow: none; }
}

/* BEGIN palettes (16.11.21, generated): the storefront colours. Harbour takes the whole palette; Minimal and Showcase take its accent. */
/* Forest green */
:root[data-theme="showcase"][data-pal="forest"], :root[data-theme="minimal"][data-pal="forest"] { --brand: #2f4f1e; --accent: #2f4f1e; --accent-2: #24401a; --accent-text: #f6f4e9; --eye: #4b6b35; }
:root[data-theme="showcase"][data-pal="forest"][data-mode="dark"], :root[data-theme="minimal"][data-pal="forest"][data-mode="dark"] { --accent: #a9cc87; --accent-2: #bcd9a0; --accent-text: #10180c; --eye: #bcd9a0; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="forest"][data-mode="auto"], :root[data-theme="minimal"][data-pal="forest"][data-mode="auto"] { --accent: #a9cc87; --accent-2: #bcd9a0; --accent-text: #10180c; --eye: #bcd9a0; } }
/* Maple syrup */
:root[data-theme="harbour"][data-pal="syrup"] { --bg: #f4eee4; --surface: #fefdfb; --text: #3e2107; --muted: #685642; --line: #dfd6c3; --soft: #ebe5d6;
    --accent: #8a4a10; --accent-2: #713d0d; --accent-text: #f6f4e9; --eye: #9a5a1a; --deep: #3e230b; --deep-2: #4f2f11; --deep-line: #613d17;
    --ok-bg: #f6ecdf; --ok-text: #753f0e; --brand: #8a4a10; --deep-text: #f6f4e9; --deep-muted: #ecddc2; --eye-deep: #f0c27a; --shadow: 0 14px 44px rgba(62, 35, 11, .10); }
:root[data-theme="harbour"][data-pal="syrup"][data-mode="dark"] { --bg: #231507; --surface: #2d1c0a; --text: #eceee6; --muted: #b8b099; --line: #422b11; --soft: #281909;
    --accent: #e8b06a; --accent-2: #edc088; --accent-text: #160d04; --eye: #ebbc80; --deep: #120a03; --deep-2: #34210c; --deep-line: #462d12;
    --ok-bg: #3f2810; --ok-text: #efc897; }
@media (prefers-color-scheme: dark) { :root[data-theme="harbour"][data-pal="syrup"][data-mode="auto"] { --bg: #231507; --surface: #2d1c0a; --text: #eceee6; --muted: #b8b099; --line: #422b11; --soft: #281909;
    --accent: #e8b06a; --accent-2: #edc088; --accent-text: #160d04; --eye: #ebbc80; --deep: #120a03; --deep-2: #34210c; --deep-line: #462d12;
    --ok-bg: #3f2810; --ok-text: #efc897; } }
:root[data-theme="showcase"][data-pal="syrup"], :root[data-theme="minimal"][data-pal="syrup"] { --brand: #8a4a10; --accent: #8a4a10; --accent-2: #713d0d; --accent-text: #f6f4e9; --eye: #9a5a1a; }
:root[data-theme="showcase"][data-pal="syrup"][data-mode="dark"], :root[data-theme="minimal"][data-pal="syrup"][data-mode="dark"] { --accent: #e8b06a; --accent-2: #edc088; --accent-text: #160d04; --eye: #ebbc80; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="syrup"][data-mode="auto"], :root[data-theme="minimal"][data-pal="syrup"][data-mode="auto"] { --accent: #e8b06a; --accent-2: #edc088; --accent-text: #160d04; --eye: #ebbc80; } }
/* Maple red */
:root[data-theme="harbour"][data-pal="maple"] { --bg: #f4eae4; --surface: #fefbfb; --text: #500d0d; --muted: #734a45; --line: #e0cec3; --soft: #ece0d6;
    --accent: #b11d1d; --accent-2: #911818; --accent-text: #f6f4e9; --eye: #b92824; --deep: #4a0f12; --deep-2: #5a1617; --deep-line: #6c1e1c;
    --ok-bg: #f8e2df; --ok-text: #961919; --brand: #b11d1d; --deep-text: #f6f4e9; --deep-muted: #eecfc2; --eye-deep: #ffb3a8; --shadow: 0 14px 44px rgba(74, 15, 18, .10); }
:root[data-theme="harbour"][data-pal="maple"][data-mode="dark"] { --bg: #280a0a; --surface: #330e0d; --text: #eceee6; --muted: #b9a499; --line: #481613; --soft: #2d0c0c;
    --accent: #ff8f86; --accent-2: #ffa59e; --accent-text: #1a0606; --eye: #ffa098; --deep: #150505; --deep-2: #3a100f; --deep-line: #4b1714;
    --ok-bg: #441412; --ok-text: #ffb1aa; }
@media (prefers-color-scheme: dark) { :root[data-theme="harbour"][data-pal="maple"][data-mode="auto"] { --bg: #280a0a; --surface: #330e0d; --text: #eceee6; --muted: #b9a499; --line: #481613; --soft: #2d0c0c;
    --accent: #ff8f86; --accent-2: #ffa59e; --accent-text: #1a0606; --eye: #ffa098; --deep: #150505; --deep-2: #3a100f; --deep-line: #4b1714;
    --ok-bg: #441412; --ok-text: #ffb1aa; } }
:root[data-theme="showcase"][data-pal="maple"], :root[data-theme="minimal"][data-pal="maple"] { --brand: #b11d1d; --accent: #b11d1d; --accent-2: #911818; --accent-text: #f6f4e9; --eye: #b92824; }
:root[data-theme="showcase"][data-pal="maple"][data-mode="dark"], :root[data-theme="minimal"][data-pal="maple"][data-mode="dark"] { --accent: #ff8f86; --accent-2: #ffa59e; --accent-text: #1a0606; --eye: #ffa098; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="maple"][data-mode="auto"], :root[data-theme="minimal"][data-pal="maple"][data-mode="auto"] { --accent: #ff8f86; --accent-2: #ffa59e; --accent-text: #1a0606; --eye: #ffa098; } }
/* Lake teal */
:root[data-theme="harbour"][data-pal="lake"] { --bg: #eaf0ea; --surface: #fbfdfd; --text: #07302d; --muted: #465f59; --line: #ced8cd; --soft: #e0e6dd;
    --accent: #0f6b63; --accent-2: #0c5851; --accent-text: #f6f4e9; --eye: #1a776e; --deep: #0c3b37; --deep-2: #124742; --deep-line: #18534d;
    --ok-bg: #dfefed; --ok-text: #0d5b54; --brand: #0f6b63; --deep-text: #f6f4e9; --deep-muted: #cde0d5; --eye-deep: #9fe6da; --shadow: 0 14px 44px rgba(12, 59, 55, .10); }
:root[data-theme="harbour"][data-pal="lake"][data-mode="dark"] { --bg: #07201e; --surface: #0a2825; --text: #eceee6; --muted: #9eb3a8; --line: #113733; --soft: #092421;
    --accent: #6fd3c4; --accent-2: #8cdcd0; --accent-text: #041614; --eye: #85dacd; --deep: #031210; --deep-2: #0c2d2a; --deep-line: #123a35;
    --ok-bg: #103531; --ok-text: #9ae0d6; }
@media (prefers-color-scheme: dark) { :root[data-theme="harbour"][data-pal="lake"][data-mode="auto"] { --bg: #07201e; --surface: #0a2825; --text: #eceee6; --muted: #9eb3a8; --line: #113733; --soft: #092421;
    --accent: #6fd3c4; --accent-2: #8cdcd0; --accent-text: #041614; --eye: #85dacd; --deep: #031210; --deep-2: #0c2d2a; --deep-line: #123a35;
    --ok-bg: #103531; --ok-text: #9ae0d6; } }
:root[data-theme="showcase"][data-pal="lake"], :root[data-theme="minimal"][data-pal="lake"] { --brand: #0f6b63; --accent: #0f6b63; --accent-2: #0c5851; --accent-text: #f6f4e9; --eye: #1a776e; }
:root[data-theme="showcase"][data-pal="lake"][data-mode="dark"], :root[data-theme="minimal"][data-pal="lake"][data-mode="dark"] { --accent: #6fd3c4; --accent-2: #8cdcd0; --accent-text: #041614; --eye: #85dacd; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="lake"][data-mode="auto"], :root[data-theme="minimal"][data-pal="lake"][data-mode="auto"] { --accent: #6fd3c4; --accent-2: #8cdcd0; --accent-text: #041614; --eye: #85dacd; } }
/* Hockey blue */
:root[data-theme="harbour"][data-pal="hockey"] { --bg: #ebeded; --surface: #fbfcfe; --text: #000e29; --muted: #424a57; --line: #d0d2d2; --soft: #e1e3e0;
    --accent: #00205b; --accent-2: #001a4b; --accent-text: #f6f4e9; --eye: #123472; --deep: #001a4a; --deep-2: #092457; --deep-line: #122f65;
    --ok-bg: #e2e8f3; --ok-text: #001b4d; --brand: #00205b; --deep-text: #f6f4e9; --deep-muted: #d0d7de; --eye-deep: #b8cdfc; --shadow: 0 14px 44px rgba(0, 26, 74, .10); }
:root[data-theme="harbour"][data-pal="hockey"][data-mode="dark"] { --bg: #031027; --surface: #071630; --text: #eceee6; --muted: #a1abaf; --line: #102242; --soft: #05132b;
    --accent: #8fb0ff; --accent-2: #a5c0ff; --accent-text: #000a1a; --eye: #a0bcff; --deep: #000815; --deep-2: #0a1a36; --deep-line: #122445;
    --ok-bg: #0f203f; --ok-text: #b1c8ff; }
@media (prefers-color-scheme: dark) { :root[data-theme="harbour"][data-pal="hockey"][data-mode="auto"] { --bg: #031027; --surface: #071630; --text: #eceee6; --muted: #a1abaf; --line: #102242; --soft: #05132b;
    --accent: #8fb0ff; --accent-2: #a5c0ff; --accent-text: #000a1a; --eye: #a0bcff; --deep: #000815; --deep-2: #0a1a36; --deep-line: #122445;
    --ok-bg: #0f203f; --ok-text: #b1c8ff; } }
:root[data-theme="showcase"][data-pal="hockey"], :root[data-theme="minimal"][data-pal="hockey"] { --brand: #00205b; --accent: #00205b; --accent-2: #001a4b; --accent-text: #f6f4e9; --eye: #123472; }
:root[data-theme="showcase"][data-pal="hockey"][data-mode="dark"], :root[data-theme="minimal"][data-pal="hockey"][data-mode="dark"] { --accent: #8fb0ff; --accent-2: #a5c0ff; --accent-text: #000a1a; --eye: #a0bcff; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="hockey"][data-mode="auto"], :root[data-theme="minimal"][data-pal="hockey"][data-mode="auto"] { --accent: #8fb0ff; --accent-2: #a5c0ff; --accent-text: #000a1a; --eye: #a0bcff; } }
/* Northern lights */
:root[data-theme="harbour"][data-pal="northern"] { --bg: #edebef; --surface: #fcfcfe; --text: #1b1540; --muted: #524f65; --line: #d4d1d5; --soft: #e4e2e2;
    --accent: #3b2f8f; --accent-2: #302775; --accent-text: #f6f4e9; --eye: #483b9f; --deep: #1a1640; --deep-2: #241f51; --deep-line: #2f2864;
    --ok-bg: #e8e5f7; --ok-text: #32287a; --brand: #3b2f8f; --deep-text: #f6f4e9; --deep-muted: #d8d3e4; --eye-deep: #7ff0bd; --shadow: 0 14px 44px rgba(26, 22, 64, .10); }
:root[data-theme="harbour"][data-pal="northern"][data-mode="dark"] { --bg: #100d24; --surface: #16122f; --text: #eceee6; --muted: #a8a8b4; --line: #221d44; --soft: #13102a;
    --accent: #9ee6c2; --accent-2: #b1ebce; --accent-text: #0a0817; --eye: #adeacb; --deep: #080613; --deep-2: #1a1636; --deep-line: #241e48;
    --ok-bg: #201b41; --ok-text: #bbeed4; }
@media (prefers-color-scheme: dark) { :root[data-theme="harbour"][data-pal="northern"][data-mode="auto"] { --bg: #100d24; --surface: #16122f; --text: #eceee6; --muted: #a8a8b4; --line: #221d44; --soft: #13102a;
    --accent: #9ee6c2; --accent-2: #b1ebce; --accent-text: #0a0817; --eye: #adeacb; --deep: #080613; --deep-2: #1a1636; --deep-line: #241e48;
    --ok-bg: #201b41; --ok-text: #bbeed4; } }
:root[data-theme="showcase"][data-pal="northern"], :root[data-theme="minimal"][data-pal="northern"] { --brand: #3b2f8f; --accent: #3b2f8f; --accent-2: #302775; --accent-text: #f6f4e9; --eye: #483b9f; }
:root[data-theme="showcase"][data-pal="northern"][data-mode="dark"], :root[data-theme="minimal"][data-pal="northern"][data-mode="dark"] { --accent: #9ee6c2; --accent-2: #b1ebce; --accent-text: #0a0817; --eye: #adeacb; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="northern"][data-mode="auto"], :root[data-theme="minimal"][data-pal="northern"][data-mode="auto"] { --accent: #9ee6c2; --accent-2: #b1ebce; --accent-text: #0a0817; --eye: #adeacb; } }
/* Prairie gold */
:root[data-theme="harbour"][data-pal="prairie"] { --bg: #f4f0e5; --surface: #fefdfb; --text: #372803; --muted: #645b3f; --line: #e0d9c4; --soft: #ece7d7;
    --accent: #7a5a06; --accent-2: #644a05; --accent-text: #f6f4e9; --eye: #876613; --deep: #3a2c08; --deep-2: #4c3b0f; --deep-line: #604b16;
    --ok-bg: #f8f1e0; --ok-text: #684c05; --brand: #7a5a06; --deep-text: #f6f4e9; --deep-muted: #eee3c4; --eye-deep: #f2d88a; --shadow: 0 14px 44px rgba(58, 44, 8, .10); }
:root[data-theme="harbour"][data-pal="prairie"][data-mode="dark"] { --bg: #211a06; --surface: #2c230a; --text: #eceee6; --muted: #b9b59a; --line: #423411; --soft: #271e08;
    --accent: #e9c46a; --accent-2: #edd088; --accent-text: #151003; --eye: #eccd80; --deep: #110d03; --deep-2: #34290c; --deep-line: #463712;
    --ok-bg: #3f3110; --ok-text: #f0d697; }
@media (prefers-color-scheme: dark) { :root[data-theme="harbour"][data-pal="prairie"][data-mode="auto"] { --bg: #211a06; --surface: #2c230a; --text: #eceee6; --muted: #b9b59a; --line: #423411; --soft: #271e08;
    --accent: #e9c46a; --accent-2: #edd088; --accent-text: #151003; --eye: #eccd80; --deep: #110d03; --deep-2: #34290c; --deep-line: #463712;
    --ok-bg: #3f3110; --ok-text: #f0d697; } }
:root[data-theme="showcase"][data-pal="prairie"], :root[data-theme="minimal"][data-pal="prairie"] { --brand: #7a5a06; --accent: #7a5a06; --accent-2: #644a05; --accent-text: #f6f4e9; --eye: #876613; }
:root[data-theme="showcase"][data-pal="prairie"][data-mode="dark"], :root[data-theme="minimal"][data-pal="prairie"][data-mode="dark"] { --accent: #e9c46a; --accent-2: #edd088; --accent-text: #151003; --eye: #eccd80; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="prairie"][data-mode="auto"], :root[data-theme="minimal"][data-pal="prairie"][data-mode="auto"] { --accent: #e9c46a; --accent-2: #edd088; --accent-text: #151003; --eye: #eccd80; } }
/* Glacier blue */
:root[data-theme="harbour"][data-pal="glacier"] { --bg: #edf0ee; --surface: #fcfdfe; --text: #0e2b3c; --muted: #4a5c63; --line: #d4d9d4; --soft: #e3e7e2;
    --accent: #1f5f86; --accent-2: #194e6e; --accent-text: #f6f4e9; --eye: #327096; --deep: #12344a; --deep-2: #1d4259; --deep-line: #28506a;
    --ok-bg: #e7f1f6; --ok-text: #1a5172; --brand: #1f5f86; --deep-text: #f6f4e9; --deep-muted: #d7e3e2; --eye-deep: #bfe3f7; --shadow: 0 14px 44px rgba(18, 52, 74, .10); }
:root[data-theme="harbour"][data-pal="glacier"][data-mode="dark"] { --bg: #0c1d28; --surface: #122532; --text: #eceee6; --muted: #a7b5b3; --line: #1e3646; --soft: #0f212d;
    --accent: #8fcbee; --accent-2: #a5d5f1; --accent-text: #06121a; --eye: #a0d3f1; --deep: #050f15; --deep-2: #162b38; --deep-line: #203949;
    --ok-bg: #1c3342; --ok-text: #b1dbf3; }
@media (prefers-color-scheme: dark) { :root[data-theme="harbour"][data-pal="glacier"][data-mode="auto"] { --bg: #0c1d28; --surface: #122532; --text: #eceee6; --muted: #a7b5b3; --line: #1e3646; --soft: #0f212d;
    --accent: #8fcbee; --accent-2: #a5d5f1; --accent-text: #06121a; --eye: #a0d3f1; --deep: #050f15; --deep-2: #162b38; --deep-line: #203949;
    --ok-bg: #1c3342; --ok-text: #b1dbf3; } }
:root[data-theme="showcase"][data-pal="glacier"], :root[data-theme="minimal"][data-pal="glacier"] { --brand: #1f5f86; --accent: #1f5f86; --accent-2: #194e6e; --accent-text: #f6f4e9; --eye: #327096; }
:root[data-theme="showcase"][data-pal="glacier"][data-mode="dark"], :root[data-theme="minimal"][data-pal="glacier"][data-mode="dark"] { --accent: #8fcbee; --accent-2: #a5d5f1; --accent-text: #06121a; --eye: #a0d3f1; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="glacier"][data-mode="auto"], :root[data-theme="minimal"][data-pal="glacier"][data-mode="auto"] { --accent: #8fcbee; --accent-2: #a5d5f1; --accent-text: #06121a; --eye: #a0d3f1; } }
/* Birch */
:root[data-theme="harbour"][data-pal="birch"] { --bg: #f1f0ea; --surface: #fdfdfd; --text: #151719; --muted: #4f504d; --line: #dbd9ce; --soft: #e8e7de;
    --accent: #2f3437; --accent-2: #272b2d; --accent-text: #f6f4e9; --eye: #4d504e; --deep: #1f2326; --deep-2: #2f3233; --deep-line: #414342;
    --ok-bg: #f1f0ee; --ok-text: #282c2f; --brand: #2f3437; --deep-text: #f6f4e9; --deep-muted: #e5e2d6; --eye-deep: #d8cdb4; --shadow: 0 14px 44px rgba(31, 35, 38, .10); }
:root[data-theme="harbour"][data-pal="birch"][data-mode="dark"] { --bg: #141616; --surface: #1d1f1e; --text: #eceee6; --muted: #b2b4a9; --line: #30302e; --soft: #191a1a;
    --accent: #e3ddd0; --accent-2: #e9e4d9; --accent-text: #0b0d0e; --eye: #e7e2d7; --deep: #090a0b; --deep-2: #242423; --deep-line: #333330;
    --ok-bg: #2d2d2b; --ok-text: #ebe7de; }
@media (prefers-color-scheme: dark) { :root[data-theme="harbour"][data-pal="birch"][data-mode="auto"] { --bg: #141616; --surface: #1d1f1e; --text: #eceee6; --muted: #b2b4a9; --line: #30302e; --soft: #191a1a;
    --accent: #e3ddd0; --accent-2: #e9e4d9; --accent-text: #0b0d0e; --eye: #e7e2d7; --deep: #090a0b; --deep-2: #242423; --deep-line: #333330;
    --ok-bg: #2d2d2b; --ok-text: #ebe7de; } }
:root[data-theme="showcase"][data-pal="birch"], :root[data-theme="minimal"][data-pal="birch"] { --brand: #2f3437; --accent: #2f3437; --accent-2: #272b2d; --accent-text: #f6f4e9; --eye: #4d504e; }
:root[data-theme="showcase"][data-pal="birch"][data-mode="dark"], :root[data-theme="minimal"][data-pal="birch"][data-mode="dark"] { --accent: #e3ddd0; --accent-2: #e9e4d9; --accent-text: #0b0d0e; --eye: #e7e2d7; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="birch"][data-mode="auto"], :root[data-theme="minimal"][data-pal="birch"][data-mode="auto"] { --accent: #e3ddd0; --accent-2: #e9e4d9; --accent-text: #0b0d0e; --eye: #e7e2d7; } }
/* Cranberry */
:root[data-theme="harbour"][data-pal="cranberry"] { --bg: #f3eae8; --surface: #fefbfc; --text: #380d1c; --muted: #654a4f; --line: #ddceca; --soft: #eae0db;
    --accent: #7d1d3f; --accent-2: #671834; --accent-text: #f6f4e9; --eye: #8c284b; --deep: #3d0e20; --deep-2: #4c1529; --deep-line: #5c1d34;
    --ok-bg: #f4e2e8; --ok-text: #6a1936; --brand: #7d1d3f; --deep-text: #f6f4e9; --deep-muted: #e8cfce; --eye-deep: #f7b9cf; --shadow: 0 14px 44px rgba(61, 14, 32, .10); }
:root[data-theme="harbour"][data-pal="cranberry"][data-mode="dark"] { --bg: #210912; --surface: #2b0d18; --text: #eceee6; --muted: #b5a4a3; --line: #3e1523; --soft: #260b15;
    --accent: #f39bbb; --accent-2: #f5afc9; --accent-text: #16050b; --eye: #f5aac5; --deep: #120409; --deep-2: #31101c; --deep-line: #411625;
    --ok-bg: #3a1421; --ok-text: #f7b9cf; }
@media (prefers-color-scheme: dark) { :root[data-theme="harbour"][data-pal="cranberry"][data-mode="auto"] { --bg: #210912; --surface: #2b0d18; --text: #eceee6; --muted: #b5a4a3; --line: #3e1523; --soft: #260b15;
    --accent: #f39bbb; --accent-2: #f5afc9; --accent-text: #16050b; --eye: #f5aac5; --deep: #120409; --deep-2: #31101c; --deep-line: #411625;
    --ok-bg: #3a1421; --ok-text: #f7b9cf; } }
:root[data-theme="showcase"][data-pal="cranberry"], :root[data-theme="minimal"][data-pal="cranberry"] { --brand: #7d1d3f; --accent: #7d1d3f; --accent-2: #671834; --accent-text: #f6f4e9; --eye: #8c284b; }
:root[data-theme="showcase"][data-pal="cranberry"][data-mode="dark"], :root[data-theme="minimal"][data-pal="cranberry"][data-mode="dark"] { --accent: #f39bbb; --accent-2: #f5afc9; --accent-text: #16050b; --eye: #f5aac5; }
@media (prefers-color-scheme: dark) { :root[data-theme="showcase"][data-pal="cranberry"][data-mode="auto"], :root[data-theme="minimal"][data-pal="cranberry"][data-mode="auto"] { --accent: #f39bbb; --accent-2: #f5afc9; --accent-text: #16050b; --eye: #f5aac5; } }
/* END palettes */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent); }
a:hover { color: var(--accent-2); }
img { max-width: 100%; }
.st-in { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.st-sr, .st-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-muted { color: var(--muted); }
.st-small { font-size: 13px; }
.st-preview { background: #fff4d6; color: #5a4100; text-align: center; font-size: 14px; padding: 8px 12px; }
.st-preview a { color: #5a4100; font-weight: 600; }

/* bar */
.st-bar { background: var(--bg); }
.st-barin { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.st-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; font-family: var(--font-head); }
.st-logoimg { height: 36px; width: auto; }
.st-nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 15px; }
.st-nav a { color: var(--text); text-decoration: none; font-weight: 500; opacity: .85; }
.st-nav a:hover { opacity: 1; }

/* type and buttons */
.st-eye { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--eye); }
.st-h1 { margin: 0; font-family: var(--font-head); font-size: clamp(34px, 5vw, 54px); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; max-width: 600px; }
.st-h2 { margin: 6px 0 0; font-family: var(--font-head); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.st-h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: 19px; font-weight: 700; }
.st-lead { margin: 0; font-size: 17px; color: var(--muted); max-width: 520px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: var(--radius-sm); border: 1px solid var(--accent);
    background: var(--accent); color: var(--accent-text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.st-btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-text); }
.st-btn-line { background: transparent; color: var(--text); border-color: var(--line); }
.st-btn-line:hover { background: var(--soft); color: var(--text); border-color: var(--line); }
.st-btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.st-btn-lg { min-height: 52px; font-size: 16px; width: 100%; }
.st-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 36px); }
.st-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.st-sec { padding-top: 70px; display: flex; flex-direction: column; gap: 22px; }
.st-narrow { max-width: 640px; margin: 0 auto; }

/* hero */
.st-hero { position: relative; overflow: hidden; }
.st-heroin { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding-top: 40px; padding-bottom: 110px; position: relative; }
.st-hero::before { content: ""; position: absolute; right: -120px; top: -60px; width: 520px; height: 640px; background: var(--soft); transform: skewX(-18deg); border-radius: 30px; }
.st-herol { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; position: relative; }
.st-heror { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; position: relative; }
.st-search { display: flex; gap: 8px; flex-wrap: wrap; max-width: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; }
.st-search input { flex: 1 1 200px; min-height: 46px; border: 0; background: transparent; padding: 0 12px; font: inherit; font-size: 15.5px; color: var(--text); outline: none; }
.st-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--muted); }
.st-meta b { color: var(--text); }
.st-ncard { width: 340px; max-width: 100%; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; gap: 14px; position: relative; border: 1px solid var(--line); }
.st-ncardtop { display: flex; gap: 10px; align-items: center; }
.st-dn { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -.01em; word-break: break-all; }
.st-bigprice { font-family: var(--font-head); font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.st-opt { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.st-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.st-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); }
.st-opt.on .st-dot { border: 4px solid var(--accent); }
.st-pay { min-height: 44px; border-radius: 10px; background: var(--deep); color: var(--deep-text); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14.5px; }
.st-tagc { position: absolute; right: -24px; bottom: calc(100% - 14px);   /* 16.11.5: sits above the card, clear of the name */ background: var(--accent); color: var(--accent-text); border-radius: 14px; padding: 12px 14px; font-size: 12.5px; line-height: 1.35; max-width: 160px; box-shadow: var(--shadow); }
.st-tagc b { display: block; font-size: 14px; }
.st-ncard.st-hasbadge { margin-top: 64px; }
a.st-pay { text-decoration: none; }
a.st-pay:hover { filter: brightness(1.15); }
.st-ncard a.st-dn { color: inherit; text-decoration: none; }
.st-ncard a.st-dn:hover { text-decoration: underline; }

/* why */
.st-why { position: relative; z-index: 2; margin-top: -70px; }
.st-whycard { display: flex; flex-direction: column; gap: 26px; }
.st-whyh { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.st-whyh p { margin: 0; max-width: 400px; }
.st-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.st-three h3 { margin: 12px 0 6px; font-size: 17px; }
.st-three p { margin: 0; font-size: 14.5px; }
.st-ico { color: var(--accent); }

/* featured */
.st-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.st-fc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 18px; justify-content: space-between;
    min-height: 170px; text-decoration: none; color: var(--text); }
.st-fc:hover { color: var(--text); border-color: var(--accent); }
.st-fc .st-dn { font-size: 23px; }
.st-fc-dark { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.st-fc-dark:hover { color: var(--accent-text); }
.st-fc-dark .st-cat { color: inherit; opacity: .8; }
.st-cat { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-fcrow { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 700; }

/* band */
.st-band { margin-top: 80px; background: var(--deep); color: var(--deep-text); padding: 70px 0; }
.st-band .st-eye { color: var(--eye-deep); }
.st-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.st-step { background: var(--deep-2); border: 1px solid var(--deep-line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.st-n { font-size: 40px; font-weight: 700; color: var(--eye-deep); line-height: 1; font-family: var(--font-head); }
.st-step h3 { margin: 6px 0 0; font-size: 17px; }
.st-step p { margin: 0; font-size: 14px; color: var(--deep-muted); }

/* counts */
.st-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; text-align: center; }
.st-counts strong { display: block; font-family: var(--font-head); font-size: 42px; font-weight: 700; letter-spacing: -.02em; }
.st-counts span { font-size: 14.5px; color: var(--muted); }

/* names list */
.st-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; }
.st-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }
.st-row:first-child { border-top: 0; }
.st-row .st-dn { flex: 1 1 220px; color: var(--text); text-decoration: none; font-size: 16.5px; }
.st-row .st-dn:hover { color: var(--accent); }
.st-row .st-cat { flex: 0 0 140px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }
/* 16.11.9: fixed columns, so prices line up down the list whatever buttons a row has */
.st-price { font-weight: 700; flex: 0 0 150px; text-align: right; font-variant-numeric: tabular-nums; }
.st-row .st-price.st-muted { font-weight: 500; }
.st-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.st-row .st-acts { flex: 0 0 220px; justify-content: flex-end; }
.st-row .st-via { flex-basis: 100%; }
.st-via { flex-basis: 100%; font-size: 12.5px; color: var(--muted); margin: -6px 0 0; }

/* contact */
.st-contact { background: var(--deep); color: var(--deep-text); border-radius: 24px; padding: clamp(24px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 36px; border: 1px solid var(--deep-line); }
.st-contactl { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.st-contactl .st-eye { color: var(--eye-deep); }
.st-contactl p { margin: 0; color: var(--deep-muted); font-size: 15.5px; }
.st-contactr { flex: 1 1 420px; min-width: 0; }
.st-contact .st-form label { color: var(--deep-text); }
.st-contact .st-form input, .st-contact .st-form select, .st-contact .st-form textarea { background: var(--deep-2); border-color: var(--deep-line); color: var(--deep-text); }
.st-contact .st-btn { background: var(--surface); color: var(--deep); border-color: var(--surface); }
/* 16.11.7: in dark mode the surface and the band are both dark, so the button takes the accent instead */
:root[data-mode="dark"] .st-contact .st-btn { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
@media (prefers-color-scheme: dark) { :root[data-mode="auto"] .st-contact .st-btn { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } }
/* 16.11.6: the home band only has a button; the contact page has the form */
.st-contactband { align-items: center; }
.st-contactband .st-contactr { flex: 0 0 auto; display: flex; align-items: center; }
#contact > .st-back { display: inline-block; margin: 0 0 14px; max-width: none; }
.st-aboutname { margin: 4px 0 0; color: var(--deep-text) !important; }
.st-askline { margin: 4px 0 0; }
:root[data-theme="minimal"] .st-contact .st-btn { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* forms */
.st-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.st-form .st-full { grid-column: 1 / -1; }
.st-form input, .st-form select, .st-form textarea { min-height: 46px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 0 14px; font: inherit; font-size: 15.5px; width: 100%; }
.st-form textarea { padding: 12px 14px; min-height: 100px; resize: vertical; }
.st-ok, .st-err { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.st-ok { background: var(--ok-bg); color: var(--ok-text); }
.st-err { background: var(--err-bg); color: var(--err-text); }

/* all names page */
.st-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.st-filters input, .st-filters select { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 0 12px; font: inherit; font-size: 15px; }
.st-filters input { flex: 1 1 240px; }
.st-filters label { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chips a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; }
.st-chips a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.st-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.st-pager a, .st-pager b { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; }
.st-pager b { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* a name's page */
.st-namewrap { padding-top: 20px; padding-bottom: 60px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.st-back { align-self: flex-start; max-width: 640px; width: 100%; margin: 0 auto; text-decoration: none; font-size: 14.5px; }
.st-namecard { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.st-namedn { margin: 0; font-family: var(--mono); font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: -.03em; word-break: break-all; line-height: 1.1; }
.st-namecard > .st-muted { margin: 0; }
.st-buy { display: flex; flex-direction: column; gap: 10px; }
.st-buy .st-via { margin: 0; }
.st-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.st-facts span { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--text); }
.st-howmini ol { margin: 0; padding-left: 20px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.st-hr { border: 0; height: 1px; background: var(--line); margin: 4px 0; }
.st-sim { width: 100%; max-width: 640px; }
.st-simgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-simgrid a { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 4px; }
.st-simgrid b { font-family: var(--mono); font-size: 15px; word-break: break-all; }
.st-simgrid span { color: var(--muted); font-size: 14px; }

/* footer */
.st-foot { margin-top: 70px; border-top: 1px solid var(--line); }
.st-footin { padding-top: 30px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.st-footin p { margin: 0; }

/* Minimal: plain, quiet, list-like */
:root[data-theme="minimal"] .st-hero::before, :root[data-theme="minimal"] .st-heror { display: none; }
:root[data-theme="minimal"] .st-heroin { padding-top: 20px; padding-bottom: 20px; }
:root[data-theme="minimal"] .st-h1 { font-size: 30px; font-weight: 650; letter-spacing: -.01em; }
:root[data-theme="minimal"] .st-why { margin-top: 20px; }
:root[data-theme="minimal"] .st-band { margin-top: 40px; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:root[data-theme="minimal"] .st-sec { padding-top: 40px; }
:root[data-theme="minimal"] .st-fc-dark { background: var(--surface); border-color: var(--line); color: var(--text); }
:root[data-theme="minimal"] .st-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
:root[data-theme="minimal"] .st-counts strong { font-size: 30px; }

/* Showcase: big type, dark feature cards, names as cards */
:root[data-theme="showcase"] .st-hero::before { display: none; }
:root[data-theme="showcase"] .st-h1 { font-weight: 800; font-size: clamp(36px, 5.4vw, 58px); }
:root[data-theme="showcase"] .st-fc { background: var(--deep); border-color: var(--deep); color: var(--deep-text); }
:root[data-theme="showcase"] .st-fc .st-cat { color: var(--deep-muted); }
:root[data-theme="showcase"] .st-fc-dark { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
:root[data-theme="showcase"] .st-list { background: transparent; border: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
:root[data-theme="showcase"] .st-row { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; flex-direction: column; align-items: flex-start; gap: 10px; }
:root[data-theme="showcase"] .st-row .st-dn, :root[data-theme="showcase"] .st-row .st-cat, :root[data-theme="showcase"] .st-price { flex: 0 0 auto; text-align: left; }
:root[data-theme="showcase"] .st-price { font-size: 20px; }
:root[data-theme="showcase"] .st-row .st-acts { flex: 0 0 auto; justify-content: flex-start; }
:root[data-theme="showcase"] .st-row .st-cat:empty { display: none; }
:root[data-theme="showcase"] .st-via { margin: 0; }

@media (max-width: 860px) {
    .st-three, .st-feat, .st-steps, .st-simgrid { grid-template-columns: 1fr; }
    .st-form { grid-template-columns: 1fr; }
    /* 16.11.5: on narrow screens the badge sits inside the card, under the button, instead of over the name */
    .st-tagc { position: static; max-width: none; box-shadow: none; font-size: 13px; }
    .st-ncard.st-hasbadge { margin-top: 0; }
    .st-tagc b { display: inline; margin-right: 6px; font-size: 13px; }
    .st-why { margin-top: -50px; }
    .st-price { text-align: left; }
    /* 16.11.9: name on top, then category and price at the left edge, then the buttons */
    .st-row .st-dn { flex-basis: 100%; }
    .st-row .st-cat { flex: 0 0 auto; }
    .st-row .st-cat:empty { display: none; }
    .st-row .st-price { flex: 0 0 auto; }
    .st-row .st-acts { flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 520px) {
    .st-nav { gap: 14px; font-size: 14px; }
    .st-row .st-dn { flex-basis: 100%; }
    .st-heroin { padding-bottom: 80px; }
}
:root[data-theme="showcase"] .st-row .st-via { flex-basis: auto; order: 9; }

/* 16.11.15: the beaver */
.st-beaver { display: block; height: auto; max-width: 100%; aspect-ratio: 1320 / 1380; }
/* 16.11.21: the symbol and the beaver are SVG in the page, painted in the palette's colours. 16.11.22: always the
   palette's own colour on cream, as drawn, on light and dark backgrounds and in dark mode (--brand stays the light
   mode accent in dark mode); a cream edge keeps the beaver clear on a dark band. */
body { --mk-bg: var(--brand); --mk-fg: #f6f4e9; --bv-ink: var(--brand); --bv-paper: #f6f4e9; }
.st-mark { display: block; width: 30px; height: 30px; flex: 0 0 auto; }
.st-logo-sm .st-mark { width: 24px; height: 24px; }
.st-mark-card { width: 38px; height: 38px; }
.st-beaverhero { align-items: center; }
.st-beaver-hero { width: min(340px, 80vw); filter: drop-shadow(0 18px 30px rgba(0,0,0,.12)); animation: st-bob 4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes st-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .st-beaver-hero { animation: none; } }
.st-contactband .st-beaver-band { width: 120px; flex: 0 0 auto; align-self: flex-end; margin: -10px 0 -18px; }
.st-beaver-contact { width: 150px; margin: -6px 0 4px -8px; }
.st-errorcard { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.st-beaver-error { width: 220px; margin: -8px auto 4px; }
@media (max-width: 860px) {
    .st-beaverhero { justify-content: center; }
    .st-beaver-hero { width: min(260px, 70vw); }
    .st-contactband .st-beaver-band { width: 96px; margin: 0; }
}

/* 16.11.28: the currency beside each price, and the price inside the big Buy now */
.st-cur { font-size: .62em; font-weight: 600; letter-spacing: .04em; opacity: .7; margin-left: 1px; }
.st-bigprice .st-cur { font-size: .45em; vertical-align: .35em; }
.st-btnprice { font-weight: 600; opacity: .92; }
.st-btnprice .st-cur { opacity: .85; }

/* 16.11.44: pages (About us, the policies) */
.st-pagecard { max-width: 760px; }
.st-prose { font-size: 16px; line-height: 1.7; }
.st-prose h2 { font-family: var(--font-head); font-size: 20px; margin: 30px 0 8px; letter-spacing: -.01em; }
.st-prose h3 { font-size: 17px; margin: 22px 0 6px; }
.st-prose p, .st-prose ul, .st-prose ol { margin: 0 0 14px; }
.st-prose ul, .st-prose ol { padding-left: 22px; }
.st-prose li { margin: 0 0 6px; }
.st-prose > :first-child { margin-top: 0; }
.st-footlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.st-pagecard { margin-left: auto; margin-right: auto; } .st-pagecard > h1 { margin: 0 0 18px; }

/* 16.11.50: theme options (Storefront, Themes, Customize). Page width, the names as cards, a centred headline. */
.st-in { max-width: var(--th-width, 1160px); }
:root[data-th-names="cards"] .st-list { background: none; border: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
:root[data-th-names="cards"] .st-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
:root[data-th-names="cards"] .st-row:first-child { border-top: 1px solid var(--line); }
:root[data-th-names="cards"] .st-row .st-dn { flex: 0 0 auto; font-size: 18px; }
:root[data-th-names="cards"] .st-row .st-cat, :root[data-th-names="cards"] .st-row .st-acts { flex: 0 0 auto; }
:root[data-th-names="cards"] .st-row .st-acts { justify-content: flex-start; width: 100%; }
:root[data-th-hero="center"] .st-heroin { flex-direction: column; text-align: center; }
:root[data-th-hero="center"] .st-herol { flex: 0 1 auto; align-items: center; width: 100%; }
:root[data-th-hero="center"] .st-h1, :root[data-th-hero="center"] .st-lead { margin-left: auto; margin-right: auto; max-width: 760px; }
:root[data-th-hero="center"] .st-search { width: 100%; margin: 0 auto; }
:root[data-th-hero="center"] .st-meta { justify-content: center; }
:root[data-th-hero="center"] .st-heror { flex: 0 1 auto; }
:root[data-th-hero="center"] .st-hero::before { right: 50%; transform: translateX(50%) skewX(-18deg); opacity: .6; }
:root[data-th-hero="center"] .st-beaver-hero { max-width: 220px; }

/* 16.11.56: phone fixes. The "Checkout by" line stays inside its card; the search keeps its button on the same line;
   the counts sit side by side; the menu under the logo gets room. */
:root[data-th-names="cards"] .st-row .st-via { flex: 0 0 auto; width: 100%; margin: 0; order: 20; }
.st-search input { flex: 1 1 140px; min-width: 0; }
@media (max-width: 600px) {
    .st-barin { gap: 10px; padding-top: 14px; padding-bottom: 14px; }
    .st-nav { width: 100%; gap: 6px 18px; font-size: 14.5px; }
    .st-counts { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; }
    .st-counts strong { font-size: 32px; }
}
.st-h1, .st-h2 { text-wrap: balance; }