/* Shop UI on top of the site theme (or shop.css): only what a site theme has no classes for. Every colour
   comes from the theme tokens with a fallback, so the shop looks native under any engine theme. */
.shop-main { max-width: 52rem; }
.banner { background: #ffe9a8; color: #5a4300; text-align: center; padding: 6px 16px; font-size: .9rem; }
.muted, small { color: var(--muted, #666); }
.notice { background: var(--surface, #fff); border-left: 4px solid var(--accent, #1f3a5f); padding: 12px 16px !important; margin: 0 0 1rem; border-radius: var(--radius-sm, 4px); }
.notice.err { border-color: #b00020; display: flex; gap: 10px; align-items: flex-start; }
.notice.err .err-icon { flex: none; margin-top: 3px; color: #b00020; }
/* field errors: icon + text under the field, the field itself gets a red border via aria-invalid */
.err { display: flex; gap: 6px; align-items: flex-start; color: #b00020; font-size: .9rem; line-height: 1.35; margin-top: 6px; font-weight: 500; }
.err-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
input[aria-invalid="true"], select[aria-invalid="true"], .country-picker input[aria-invalid="true"] { border-color: #b00020 !important; box-shadow: 0 0 0 3px rgba(176, 0, 32, .12); }
input[aria-invalid="true"]:focus, .country-picker input[aria-invalid="true"]:focus { outline: 2px solid #b00020; outline-offset: 1px; box-shadow: none; }
fieldset[aria-invalid="true"] { border-color: #b00020 !important; }
label.check .err { flex-basis: 100%; margin-top: 0; }
label.check input[type=checkbox][aria-invalid="true"] { outline: 2px solid #b00020; outline-offset: 2px; }
.products { list-style: none; padding: 0; margin: 1.5rem 0 2.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.product { display: flex; flex-direction: column; gap: .5rem; background: var(--surface, #fff); border: 1px solid var(--line, #ddd);
  border-radius: var(--radius, 8px); padding: 1.2rem 1.25rem; }
/* on the checkout the product card stands alone above the form: room between the two (Madà 26-10-2026) */
section.product { margin: 0 0 1.75rem; }
.product h2, .product h3 { margin: 0; font-size: 1.15rem; }
.product p { margin: 0; color: var(--ink-2, #333); }
.product .price { margin-top: auto; padding-top: .5rem; font-weight: 700; color: var(--ink, #1b1b1b); }
.product .price small { display: block; font-weight: 500; font-size: .85rem; color: var(--muted, #666); }
.product .actions { margin: .25rem 0 0; }
.btn, button.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; border: 0; border-radius: var(--radius-sm, 6px);
  background: var(--accent, #1f3a5f); color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--accent-hover, #16304d); color: #fff; }
.btn--ghost { background: var(--surface, #fff); color: var(--accent, #1f3a5f); border: 1px solid var(--line, #ddd); }
.btn--ghost:hover { background: var(--accent-soft, #e7edf5); color: var(--accent-hover, #16304d); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
form.checkout label, form.checkout fieldset { display: block; margin: 0 0 14px; }
/* !important: a site theme's form reset (fieldset { padding: 0 }) must not strip the box (seen 26-10-2026) */
form.checkout fieldset { border: 1px solid var(--line, #ddd); border-radius: var(--radius-sm, 6px); padding: 14px 16px 8px !important; margin: 0 0 14px !important; background: var(--surface, #fff); min-width: 0; }
/* the legend sits inside the box as a heading line (float + full width takes it off the border), so its spacing
   is the same in every browser and under every theme */
form.checkout legend { float: left; width: 100%; padding: 0 !important; margin: 0 0 10px !important; color: var(--muted, #666); font-weight: 600; }
form.checkout fieldset > :not(legend) { clear: both; }
form.checkout fieldset label { margin: 0 0 8px; }
label.radio { display: inline-block; margin-right: 18px; }
input[type=text], input[type=email], select { display: block; width: 100%; padding: 9px 10px; margin-top: 4px; border: 1px solid var(--line, #bbb);
  border-radius: var(--radius-sm, 6px); font: inherit; background: var(--surface, #fff); color: var(--ink, #1b1b1b); }
.country-picker { position: relative; }
.country-picker input { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted, #666) 50%), linear-gradient(135deg, var(--muted, #666) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.country-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none; max-height: 16rem; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--line, #bbb); border-radius: var(--radius-sm, 6px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.country-picker input.has-flag { padding-left: 40px; background-image: var(--flag), linear-gradient(45deg, transparent 50%, var(--muted, #666) 50%), linear-gradient(135deg, var(--muted, #666) 50%, transparent 50%);
  background-size: 20px 15px, 5px 5px, 5px 5px; background-position: 12px 50%, calc(100% - 18px) 55%, calc(100% - 13px) 55%; }
.country-list li { padding: 8px 12px; cursor: pointer; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.country-list img.flag { width: 20px; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.country-list li.country-group { padding: 8px 12px 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #666); cursor: default; }
.country-list li.is-current { font-weight: 700; }
.country-list li.is-active, .country-list li[role=option]:hover { background: var(--accent-soft, #e7edf5); color: var(--accent-hover, #16304d); }
.row { display: flex; gap: 12px; }
.row label { flex: 1; }
.row.address-lookup .lookup-note { flex-basis: 100%; margin-top: -8px; }
.row.address-lookup { flex-wrap: wrap; }
/* customer type: without JS everything shows; with it only the chosen type's price line and checkboxes */
html.ct-consumer .business-only, html.ct-business .consumer-only { display: none; }
.pay-hint { display: block; margin-top: 6px; }
/* "Secure payment via Mollie" + method marks (settings trust.*): under the pay button and above the footer */
.pay-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.pay-trust-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink, #1b1b1b); }
.pay-trust-line svg { color: #1a7f37; flex: none; }
.pay-marks { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pay-mark { display: inline-flex; border-radius: 4px; line-height: 0; }
.pay-mark svg { display: block; }
.pay-mark--logo { padding: 0; background: transparent; }
.pay-mark--logo img { display: block; height: 24px; width: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pay-footer { margin: 2rem auto 1rem; padding-top: 1rem; border-top: 1px solid var(--line, #ddd); max-width: 52rem; }
.pay-footer .pay-trust { margin-top: 0; justify-content: center; font-size: .9rem; }
.shop-withdraw { text-align: center; font-size: .85rem; margin: 0 0 1rem; }
.product .spec { font-size: .95rem; }
[hidden] { display: none !important; }
label.check { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; }
label.check input { margin-top: 5px; }
table.lines { width: 100%; border-collapse: collapse; background: var(--surface, #fff); border: 1px solid var(--line, #ddd); border-radius: var(--radius, 8px); font-size: 1rem; }
table.lines td { padding: 10px 12px; border-top: 1px solid var(--line, #ddd); white-space: normal; }
table.lines tr:first-child td { border-top: 0; }
table.lines .num { text-align: right; white-space: nowrap; }
table.lines .total td { font-weight: 700; }
.status { font-weight: 600; }
.status-fulfilled, .status-paid { color: #0a6b2d; }
.status-expired, .status-canceled, .status-failed, .status-refunded { color: #b00020; }
table.downloads { margin: 0 0 .75rem; }
p.actions { margin: .5rem 0 1rem; }
form.renew { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line, #ddd); }
form.renew .renew__note { margin: 0 0 .5rem; }
@media (max-width: 480px) { .row { display: block; } }