/* Footer (.ftr-*). Needs shop-base.css, which the header loads first on every page.
   Links that shouldn't be accent-colored have an inner .sk-t-* span (the brand CSS colors links with !important).
   Heading and paragraph margins use .ftr .ftr-* (two classes) to beat theme.css's h3/p margins.
   Payment and shipping icons are raw HTML from translation keys; style.css's .payment-icon frame is removed. */

.ftr { margin-top: 56px; background: #fff; }
.ftr-wrap { max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr-ic { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ftr-ic--fill { fill: currentColor; stroke: none; }
.ftr-ic--sm { width: 16px; height: 16px; }
.ftr-stars { display: inline-flex; gap: 2px; }
.ftr-stars svg { width: 22px; height: 22px; fill: var(--sk-green); }

/* Review band */
.ftr-band { background: var(--sk-soft); border-top: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); }
.ftr-band-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 15px 30px; }
.ftr-score { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px 12px 16px; background: #fff; border: 1px solid var(--sk-line); border-radius: var(--sk-radius); }
.ftr-score-n { font-size: 44px; font-weight: 500; line-height: 1; color: var(--sk-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ftr-score-side { display: flex; flex-direction: column; gap: 4px; }
.ftr-score-l { font-size: 13px; color: var(--sk-text); white-space: nowrap; }
.ftr-band-text { display: flex; flex-direction: column; gap: 4px; }
.ftr .ftr-band-h { margin: 0; font-size: 24px; font-weight: 500; color: var(--sk-ink); letter-spacing: -.01em; line-height: 1.15; }
.ftr .ftr-band-p { margin: 0; font-size: 15px; color: var(--sk-text); }
/* Secondary button: the footer is never the main action on the page,
   so it must not use the filled "Add to basket" style */
.ftr-band-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 17px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); background: #fff; color: var(--sk-ink); font-size: 14px; font-weight: 500; white-space: nowrap; -webkit-text-fill-color: var(--sk-ink); }
.ftr-band-btn:hover { border-color: var(--sk-ink); background: #fff; color: var(--sk-ink); text-decoration: none; }
.ftr-band-btn .ftr-ic { color: var(--sk-ink); }

/* Logo + columns */
.ftr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 32px 0 28px; }
.ftr-col { min-width: 0; }
.ftr-col--brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ftr-logo { display: block; }
.ftr-logo img { width: 150px; height: auto; display: block; }
.ftr .ftr-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sk-text); max-width: 42ch; text-wrap: pretty; }
.ftr-social { display: flex; gap: 8px; flex-wrap: wrap; }
.ftr-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--sk-line-strong); color: var(--sk-ink); transition: border-color .15s, color .15s; }
.ftr-social a:hover { border-color: var(--sk-accent); color: var(--sk-accent); text-decoration: none; }
.ftr .ftr-h { margin: 0 0 12px; font-size: 15px; font-weight: 500; color: var(--sk-ink); line-height: 1.3; }
.ftr-links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ftr-links a { display: inline-flex; align-items: center; gap: 6px; }

/* Contact */
.ftr-contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ftr-contact-line { display: inline-flex; align-items: center; gap: 8px; }
.ftr-contact-line .ftr-ic { color: var(--sk-accent); }
.ftr-hours { display: flex; align-items: flex-start; gap: 8px; color: var(--sk-text); line-height: 1.5; margin-top: 2px; }
.ftr-hours .ftr-ic { color: var(--sk-accent); margin-top: 3px; }
.ftr-hours-h { display: block; font-weight: 500; color: var(--sk-ink); }

/* Last column: pickup in Hammel (DK) or team photo + delivery (other countries) */
.ftr-hq { display: block; width: 100%; height: 88px; object-fit: cover; border-radius: var(--sk-radius); margin-bottom: 10px; }
.ftr .ftr-hq-text { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--sk-text); }
.ftr-hq-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sk-text); }
.ftr-hq-list li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.ftr-hq-list .ftr-ic { color: var(--sk-accent); margin-top: 1px; }

/* Payment / delivery / secure shopping */
.ftr-chips { display: flex; flex-wrap: wrap; gap: 18px 44px; padding: 24px 0 30px; border-top: 1px solid var(--sk-line); }
.ftr-chipgroup { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ftr-chiplabel { font-size: 13px; color: var(--sk-muted); }
.ftr-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ftr-cards img { height: 30px; width: auto; display: block; margin: 0; box-sizing: border-box; }
.ftr-cards .payment-icon { border: 0; background: none; padding: 0; border-radius: 0; }

/* Logos that need a light frame so they don't blend into the background */
.ftr-cards img[src*="/paypal"],
.ftr-cards img[src*="/bancontact"],
.ftr-cards img[src*="/trustly"],
.ftr-cards img[src*="/mobilepay"],
.ftr-cards img[src*="/swish"],
.ftr-cards img[src*="/vipps"],
.ftr-cards img[src*="/przelewy24"],
.ftr-cards img[src*="/postnord"],
.ftr-cards img[src*="/gls."],
.ftr-cards img[src*="/brt."],
.ftr-cards img[src*="/seur."],
.ftr-cards img[src*="/chronopost"],
.ftr-cards img[src*="/db-schenker"],
.ftr-cards img[src*="/dpd."] { border: 1px solid #ececec; border-radius: 5px; padding: 3px; background: #fff; }

/* Payconiq fills its own area: frame without padding */
.ftr-cards img[src*="/payconiq"] { border: 1px solid #ececec; border-radius: 5px; background: #fff; }

/* Twint is white text and only shows on black */
.ftr-cards img[src*="/twint"] { border-radius: 5px; padding: 3px; background: #000; }

/* Logos with their own background color: rounded corners only */
.ftr-cards img[src*="/swiss-post"],
.ftr-cards img[src*="/royalmail"] { border-radius: 5px; }

/* Bottom bar */
.ftr-foot { background: var(--sk-soft); border-top: 1px solid var(--sk-line); }
.ftr-foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 15px 24px; font-size: 13px; line-height: 1.6; color: var(--sk-text); }
.ftr-company { min-width: 0; }
.ftr-foot-right { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ftr-owned { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sk-ink); font-weight: 500; }
.ftr-owned img, .ftr-shops-btn img, .ftr-shop img { border-radius: 2px; flex: 0 0 auto; }
.ftr-shops-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); background: #fff; color: var(--sk-ink); font-size: 13px; font-weight: 500; }
.ftr-shops-btn:hover { border-color: var(--sk-accent); }
.ftr-shops-btn .ftr-ic { color: var(--sk-muted); }
.ftr-cur { color: var(--sk-muted); font-weight: 400; }

/* Dialog: all shops */
.ftr-dialog { width: min(92vw, 720px); max-height: 88vh; border: 0; border-radius: var(--sk-radius); padding: 24px; background: #fff; color: var(--sk-text); box-shadow: 0 24px 60px rgba(42, 49, 64, .25); font-size: 14px; line-height: 1.5; }
.ftr-dialog::backdrop { background: rgba(42, 49, 64, .45); }
.ftr-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ftr .ftr-dialog-head h3 { margin: 0; font-size: 20px; font-weight: 500; color: var(--sk-ink); }
.ftr-dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--sk-ink); }
.ftr-dialog-close:hover { background: var(--sk-soft); }
.ftr-shoplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; }
.ftr-shop a, .ftr-shop--here { display: grid; grid-template-columns: 20px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--sk-radius-sm); }
.ftr-shop a:hover { background: var(--sk-soft); text-decoration: none; }
.ftr-shop--here { background: var(--sk-soft); color: var(--sk-ink); }
.ftr-shop--here .ftr-ic { color: var(--sk-green); grid-column: 3; grid-row: 1 / span 2; }
.ftr-shop img { grid-row: 1 / span 2; }
.ftr-shop-name { grid-column: 2; font-weight: 500; color: var(--sk-ink); line-height: 1.2; }
.ftr-shop-meta { grid-column: 2; font-size: 12px; color: var(--sk-muted); line-height: 1.3; }

/* Tablet and desktop */
@media (min-width: 768px) {
	.ftr-band-inner { flex-direction: row; align-items: center; gap: 32px; padding: 26px 15px; }
	.ftr-band-text { flex: 1 1 auto; }
	.ftr .ftr-band-h { font-size: 26px; }
	.ftr-cols { grid-template-columns: 4fr 3fr 3fr 3.4fr; gap: 40px; padding: 44px 0 36px; }
	.ftr-col--brand { grid-column: auto; }
	.ftr-chips { padding: 28px 0 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.ftr-social a { transition: none; }
}

/* Mobile: fourth column full width, moved up
   Two columns left an empty cell beside it, so it spans the width (image on the left) and sits under the logo. */
@media (max-width: 767px) {
	.ftr .ftr-col--brand { order: -2; }
	.ftr .ftr-col--pickup, .ftr .ftr-col--team, .ftr .ftr-col--contact { order: -1; grid-column: 1 / -1; }
	.ftr .ftr-col--pickup, .ftr .ftr-col--team { display: grid; grid-template-columns: 132px 1fr; column-gap: 14px; align-items: start; }
	.ftr .ftr-col--pickup .ftr-h, .ftr .ftr-col--team .ftr-h { grid-column: 1 / -1; }
	/* Fixed height and align-self: start instead of height: 100%: on a grid item spanning rows,
	   iOS Safari resolves the percentage against the whole column and the image overflows */
	.ftr .ftr-hq { grid-column: 1; align-self: start; height: 118px; margin-bottom: 0; }
	.ftr .ftr-col--pickup .ftr-hq { grid-row: 2 / span 2; }
	.ftr .ftr-col--team .ftr-hq { grid-row: 2; }
	.ftr .ftr-hq-text { grid-column: 2; grid-row: 2; margin-bottom: 8px; }
	.ftr .ftr-col--pickup .ftr-hq-list { grid-column: 2; grid-row: 3; }
	.ftr .ftr-col--team .ftr-hq-list { grid-column: 2; grid-row: 2; }
}

/* Cartzilla's handheld toolbar is gone, but body.toolbar-enabled still reserves 3.5rem for it in theme.css
   below 992px, which shows as white space under the footer on mobile. The real fix is dropping the class from <body>. */
@media (max-width: 991.98px) {
	body.toolbar-enabled { padding-bottom: 0; }
}