@import url('/assets/css/store-ui.css');

/* Public storefront only. Admin and email templates do not load this sheet. */
body:has(> .site-header) { grid-template-rows: max-content max-content 4px 1fr 4px max-content; }
.store-front h1 { margin: 0 0 24px; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.25; letter-spacing: -.025em; }
.store-front h2 { margin: 28px 0 16px; font-size: 23px; line-height: 1.35; }
.store-front h3, .store-front h4 { margin: 24px 0 12px; font-size: 18px; line-height: 1.45; }
.store-front p { margin: 0 0 16px; }
.store-front :is(ul, ol) { padding-left: 24px; margin: 16px 0 24px; }
.store-front li { margin-bottom: 12px; }
.store-front a:not(.ui-button) { color: var(--ui-accent-hover); text-underline-offset: 3px; }
.store-front label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.store-front .ui-input { margin-bottom: 18px; }
.store-front .ui-input[type=number] { width: 100px; }
.store-front .ui-panel > :last-child { margin-bottom: 0; }
.store-front :is(.form-actions, .account-actions, .actions) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.store-front :is(.form-actions, .account-actions, .actions) .ui-button { flex: 0 1 auto; }
.store-front :is(.error-message, .success-message) p { margin: 0; }
.store-front .required { color: #a32929; }
.store-front .about-us { max-width: 960px; margin-inline: auto; line-height: 1.8; }
.store-front .about-us h1 { padding-bottom: 24px; border-bottom: 1px solid var(--ui-line); }
.store-front .about-us li::marker { color: var(--ui-accent); }
.store-front .about-us strong { color: var(--ui-ink); }
.store-front :is(.successful-container, .error-container, .account-container) { max-width: 900px; margin-inline: auto; }
.store-front .account-details { padding: 4px 0 12px; border-bottom: 1px solid var(--ui-line); }
.store-front .account-details h2 { margin-top: 0; }
.store-front .account-details p { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.store-front .account-details strong { min-width: 140px; }
.store-front .ui-error-panel { max-width: 720px; margin: 24px auto; text-align: center; }
.store-error-document { margin: 0; background: #f6f8f4; }
.store-front .slaider-container { display: grid; gap: 20px; }
.store-front .slaider-card { padding: 20px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.store-front .slaider-title { margin-top: 0; }
.store-front :is(.new-items, .popular-items) { padding: 24px 0; }
@media (min-width: 768px) {
    .store-front .slaider-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep notification placement and timing; constrain long translations. */
.main-content > :is(.modal-success, .modal-error) { max-width: calc(100vw - 32px); border-radius: 12px; padding: 24px 60px 24px 24px; box-shadow: 0 8px 32px #24332926; overflow-wrap: anywhere; }
.main-content > :is(.modal-success, .modal-error) .modal-close { width: 44px; height: 44px; top: 8px; right: 8px; border-radius: 8px; color: inherit; }
.main-content > :is(.modal-success, .modal-error) .modal-close:focus-visible { outline: 3px solid #638634; }

/* Footer keeps the existing links, translations and logout POST. */
footer.site-footer { padding: 32px 0 24px; border-top: 1px solid var(--ui-line); background: #fff; color: var(--ui-ink); font-size: 14px; }
.site-footer .footer-wrapper { max-width: 1280px; padding-inline: var(--ui-gutter); gap: 24px; }
.site-footer .footer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.site-footer .footer-column { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 0; min-width: 0; }
.site-footer .footer-column a::before { content: none; }
.site-footer .fa-link { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--ui-muted); font: inherit; font-size: 14px; line-height: 1.5; text-decoration: none; border: 0; background: none; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.site-footer .fa-link:hover { color: var(--ui-accent-hover); text-decoration: underline; }
.site-footer .footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 24px; border-top: 1px solid var(--ui-line); }
.site-footer .footer-social a { width: auto; height: auto; min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: #f5f8f1; color: var(--ui-accent-hover); font-size: 13px; text-decoration: none; }
.site-footer .footer-social a:hover { background: #e7efdd; }
.site-footer .copyright { margin: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.6; }
@media (min-width: 768px) {
    .site-footer .footer-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}