/* Shared storefront colors always come from Customer Panel theme settings. */
.shop-header { background:var(--primary-color); }
.shop-header .menu-button { color:var(--on-primary-color); }
.shop-search input { color:var(--text-color); }
.shop-search input::placeholder { color:var(--muted-color); }
.shop-header .shop-search button { color:var(--customer-btn-color); }
.shop-header .shop-search button:hover { color:var(--customer-btn-hover-color); }
.shop-actions a, .shop-header .shop-actions a { color:var(--customer-link-color); }
.shop-actions a:hover, .shop-header .shop-actions a:hover { color:var(--customer-link-hover-color); }
.shop-footer { background:var(--text-color); color:var(--on-text-color); }
.footer-intro, .footer-bottom { background:color-mix(in srgb, var(--text-color) 92%, var(--on-text-color)); }
.footer-main h2 { color:var(--on-text-color); }
.footer-main a, .footer-bottom a, .social-links a:last-child { color:var(--secondary-color); }
.footer-main a:hover, .footer-bottom a:hover { color:var(--on-text-color); }

.footer-main > section { min-width:0; }
.footer-main p, .footer-main address { overflow-wrap:anywhere; }
.footer-icon { display:block; flex:0 0 auto; width:20px; height:20px; }
.shop-footer .social-links { align-items:center; gap:12px; }
.shop-footer .social-links a {
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border:1px solid currentColor; border-radius:50%;
    text-decoration:none;
}
.footer-action-wrap { margin-bottom:18px; }
.footer-main .footer-track-order-button {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:44px; max-width:100%; padding:11px 18px;
    border:1px solid var(--customer-btn-color); border-radius:6px;
    background:var(--customer-btn-color); color:var(--on-button-color);
    font-size:13px; font-weight:600; line-height:1.5; text-decoration:none;
    transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.footer-main .footer-track-order-button:hover {
    background:var(--customer-btn-hover-color); border-color:var(--customer-btn-hover-color);
    color:var(--on-button-hover-color);
}
.shop-footer a:focus-visible { outline:2px solid var(--customer-link-hover-color); outline-offset:4px; }
.footer-bottom > div { gap:16px; }
.footer-bottom nav { flex-wrap:wrap; justify-content:flex-end; gap:12px 24px; }
@media (max-width:767.98px) {
    .footer-bottom nav { justify-content:center; }
}