Use CustomSelect for checkout's country pickers too

Promoted CustomSelect from konto/bestellungen/components/ to a shared
app/components/ location. New includeAllOption (checkout doesn't want
a "clear" pseudo-option — a country is always genuinely selected) and
fullWidth (matches the other w-full form fields, no sm: shrink) props.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/checkout/components/CheckoutContent.tsx

@@ -11,6 +11,7 @@ import { computeSubtotal, computeCartTotals, effectivePrice, effectiveTaxRate, c
 import { computeTaxBreakdown } from "@einfach-produktiv/invoicing";
 import { formatPrice } from "../../lib/format";
 import { Reveal } from "../../components/Reveal";
+import { CustomSelect } from "../../components/CustomSelect";
 import { VersandModal } from "../../components/VersandModal";
 import { VatBreakdown } from "../../components/VatBreakdown";
 import { CheckoutSteps } from "../../components/CheckoutSteps";
@@ -1021,17 +1022,19 @@ export function CheckoutContent({
             </div>
             <label className="flex flex-col gap-2 items-start w-full">
               <span className="text-label text-text-muted">Land</span>
-              <select
-                name="country"
+              {/* CustomSelect, not a native <select> — consistent with the
+                  filter dropdowns elsewhere (native options popups can't be
+                  styled at all). includeAllOption={false}: every country is
+                  a real, selectable choice, there's no "clear" concept
+                  here — "country" is always genuinely set to something. */}
+              <CustomSelect
+                label="Land wählen"
+                includeAllOption={false}
+                fullWidth
+                options={shippingCountries.map((c) => ({ value: c.name, label: c.name }))}
                 value={country}
-                onChange={(e) => setCountry(e.target.value)}
-                required
-                className="w-full border border-border rounded-sm px-4 py-3 text-body-sm text-text-primary outline-none focus:border-brand transition-colors bg-bg-base"
-              >
-                {shippingCountries.map((c) => (
-                  <option key={c.name}>{c.name}</option>
-                ))}
-              </select>
+                onChange={setCountry}
+              />
             </label>
 
             <div className="h-px bg-border w-full" />
@@ -1188,16 +1191,14 @@ export function CheckoutContent({
                 </div>
                 <label className="flex flex-col gap-2 items-start w-full">
                   <span className="text-label text-text-muted">Land</span>
-                  <select
+                  <CustomSelect
+                    label="Land wählen"
+                    includeAllOption={false}
+                    fullWidth
+                    options={shippingCountries.map((c) => ({ value: c.name, label: c.name }))}
                     value={shippingCountry}
-                    onChange={(e) => setShippingCountry(e.target.value)}
-                    required
-                    className="w-full border border-border rounded-sm px-4 py-3 text-body-sm text-text-primary outline-none focus:border-brand transition-colors bg-bg-base"
-                  >
-                    {shippingCountries.map((c) => (
-                      <option key={c.name}>{c.name}</option>
-                    ))}
-                  </select>
+                    onChange={setShippingCountry}
+                  />
                 </label>
                 {/* Both optional and independent — handed to the shipping
                     carrier, not used for any customer communication (that