/* Full-width footer rail, column settings and responsive accordion.
 * The desktop columns intentionally occupy 85% of the row. */
/* The semantic footer also owns its rail when Porto emits no container-fluid. */
html body #footer .site-footer { --storefront-footer-container-pad: 60px; }
/* Porto block CSS can be printed after theme assets. Match the stable block
 * wrapper, without a database-specific block ID, so the theme rail wins. */
html body #footer .porto-block[data-id] > .container-fluid,
html body #footer .container-fluid {
    --storefront-footer-container-pad: 60px;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 var(--storefront-footer-container-pad) !important;
}
html body #footer .porto-block[data-id] > .container-fluid > .wp-block-group.site-footer,
html body #footer .container-fluid > .wp-block-group.site-footer {
    width: auto !important;
    max-width: none !important;
    margin-right: calc(-1 * var(--storefront-footer-container-pad)) !important;
    margin-left: calc(-1 * var(--storefront-footer-container-pad)) !important;
}
html body #footer .site-footer .footer-top > .wp-block-group__inner-container,
html body #footer .site-footer .footer-bottom > .wp-block-group__inner-container {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--storefront-footer-container-pad);
}
html body #footer .site-footer .wp-block-columns.footer-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    box-sizing: border-box;
    width: calc(100% + 30px) !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 -15px !important;
}
html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column {
    box-sizing: border-box !important;
    flex-grow: 0 !important;
    min-width: 0;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 15px !important;
}
html body #footer .site-footer .footer-grid > .footer-brand { width: 20% !important; max-width: 20% !important; flex: 0 0 20% !important; }
html body #footer .site-footer .footer-grid > .footer-shop { width: 15% !important; max-width: 15% !important; flex: 0 0 15% !important; }
html body #footer .site-footer .footer-grid > .footer-info,
html body #footer .site-footer .footer-grid > .footer-information { width: 20% !important; max-width: 20% !important; flex: 0 0 20% !important; }
html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-newsletter { width: 30% !important; max-width: 30% !important; flex: 0 0 30% !important; margin-bottom: 45px !important; }
@media (max-width:1024px) {
    html body #footer .porto-block[data-id] > .container-fluid,
    html body #footer .container-fluid,
    html body #footer .site-footer { --storefront-footer-container-pad: 15px; }
    html body #footer .site-footer { padding-bottom: 60px; }
    html body #footer .site-footer .wp-block-columns.footer-grid { width: calc(100% + 16px) !important; margin: 0 -8px !important; }
}
@media (max-width:991px) {
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-brand,
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-shop,
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-info,
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-information { width: 33.333333% !important; max-width: 33.333333% !important; flex: 0 0 33.333333% !important; }
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-newsletter { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-top: 20px !important; }
}
@keyframes storefront-footer-appear-down {
    from { opacity: 0; margin-top: -10px; }
    to { opacity: 1; margin-top: 0; }
}
@media (max-width:767px) {
    
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-brand,
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-links,
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-info,
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-shop,
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-information,
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-newsletter { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    html body #footer .site-footer .wp-block-columns.footer-grid > .wp-block-column.footer-brand { margin-bottom: 30px !important; }
    html body #footer .site-footer .footer-links > .footer-title,
    html body #footer .site-footer .footer-links > h4 {
        position: relative;
        width: 100%;
        height: 44px;
        margin: 0 0 12px !important;
        padding: 0 0 13px;
        border-bottom: 1px solid #fff;
        cursor: pointer;
    }
    html body #footer .site-footer .footer-links > .footer-title::before,
    html body #footer .site-footer .footer-links > .footer-title::after,
    html body #footer .site-footer .footer-links > h4::before,
    html body #footer .site-footer .footer-links > h4::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: 15px;
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        background: #fff;
        transition: transform .3s;
    }
    html body #footer .site-footer .footer-links > .footer-title::before,
    html body #footer .site-footer .footer-links > h4::before { right: 5px; width: 2px; height: 12px; transform: translateY(-50%); }
    html body #footer .site-footer .footer-links > .footer-title::after,
    html body #footer .site-footer .footer-links > h4::after { right: 0; width: 12px; height: 2px; transform: translateY(-50%); }
    html body #footer .site-footer .footer-links > .footer-title[aria-expanded="true"]::before,
    html body #footer .site-footer .footer-links > h4[aria-expanded="true"]::before { transform: translateY(-50%) rotate(90deg); }
    html body #footer .site-footer .footer-links > .footer-title[aria-expanded="true"]::after,
    html body #footer .site-footer .footer-links > h4[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }
    html body #footer .site-footer.storefront-footer-mobile-ready .footer-links > .footer-nav[hidden],
    html body #footer .site-footer.storefront-footer-mobile-ready .footer-links > .footer-title[aria-expanded="false"] + .footer-nav { display: none !important; }
    html body #footer .site-footer.storefront-footer-mobile-ready .footer-links > .footer-title[aria-expanded="true"] + .footer-nav {
        display: block !important;
        height: auto;
        padding-bottom: 10px;
        overflow: visible;
        animation: storefront-footer-appear-down .35s ease;
    }
    html body #footer .site-footer .footer-bottom { text-align: center; }
}
/* Server aria state prevents an initial mobile flash; without JavaScript all
 * links stay available. */
@media (max-width:767px) and (scripting:enabled) {
    html body #footer .site-footer .footer-links > .footer-title[aria-expanded="false"] + .footer-nav { display: none !important; }
}
@media (max-width:551px) {
    html body #footer .porto-block[data-id] > .container-fluid,
    html body #footer .container-fluid,
    html body #footer .site-footer { --storefront-footer-container-pad: 10px; }
    html body #footer .site-footer .wp-block-columns.footer-grid { width: calc(100% + 10px) !important; margin: 0 -5px !important; }
}
@media (prefers-reduced-motion:reduce) {
    html body #footer .site-footer .footer-links > .footer-title::before,
    html body #footer .site-footer .footer-links > .footer-title::after { transition-duration: .01ms; }
    html body #footer .site-footer .footer-nav { animation-duration: .01ms !important; }
}
