footer{background-color: #16181d; color: var(--Lgray); font-family: "Poppins", sans-serif; font-weight: 300;}
.footer-cnt{
    display: flex;
    align-items: start;
    column-gap: 48px;
    padding-top: 40px !important;
}
.footer-nav ul li{list-style: none;margin-bottom: 0px;}
.footer-nav ul li a{font-size: 15px;color: var(--Lgray); text-decoration: none;}
.footer-nav ul li a:hover{color: var(--secondary);}
.footer-brands{text-align: center; padding-bottom: 88px;}
.footer-brands h4{font-size: 27px; margin-bottom: 24px; color: var(--primary-p2);}
.footer-nav .title{    margin-bottom: 16px;
    font-weight: 400;
    font-size: 18px;color: var(--white);}
.ftbrands div{display: flex;justify-content: center;align-items: center;gap: 48px;}
.ftbrands a{opacity: 0.7;  transition: all 0.1s ease;}
.ftbrands a:hover{opacity: 1;  transition: all 0.2s ease;}
.ftbrands img{width: auto;}
.footer-bloginfo{display: flex;justify-content: space-between;align-items: center;gap: 24px;color: var(--Lgray);}
.ftpolicy ul{display: flex;justify-content: right;align-items: center;gap: 24px;}
.ftpolicy ul li a,.ftpolicy ul li{font-size: 14px; color: var(--primary); cursor: pointer;}
.ftpolicy ul li a:hover,.ftpolicy ul li:hover{color: var(--secondary);}
.footer-bloginfo-section{border-top: 1px solid var(--Dgray); padding-top:12px; padding-bottom:12px;}
.footer-animate{max-width: 280px;right: 10%;top: -1px;}
.ft-social{display: flex; gap: 16px; padding: 0px; margin-top: 8px;}
.ft-social li {list-style: none; margin: 0px;}
.ft-social li a{text-decoration: none; }
.ft-social li a:hover span::before{ color:var(--secondary);}
.ft-social li span::before{color: var(--Lgray); transition: color 0.3s ease;font-size: 22px;}
.ft-social li .icon-x:before{font-size: 17px;}
.ft-contact{display: grid; gap: 16px;font-size: 15px;}
.ft-contact div{display: flex; gap: 12px; color: var(--Lgray);}
.ft-contact div span{font-size: 18px; position: relative; top: 4px;}
.ft-contact div span::before{color: var(--white);}
.ft-logo .logo{max-width: 150px; margin-top: 0px; margin-bottom: 24px;}
.ft-logo .title{font-weight: 300; color: var(--white); font-size: 16px; margin-bottom: 12px;}

@media(min-width: 768px) {
    .footer-nav ul li a{position: relative;}
    .footer-nav ul li a::after {content: "";  position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background-color:var(--Lgray); transition: width 0.3s ease;opacity: 0.5;}
    .footer-nav ul li a:hover:after { width: 100%;}
    .ft-contact{max-width: 340px;}
}

@media (min-width:1900px){
    .footer-animate {right: 21%;}
}

@media only screen and (max-width: 1180px) {
    .footer-animate{
        right: -10%;
    }
    .ft-logo{
        display: flex;
        align-items: center;
        gap: 48px;
    }
    .footer-cnt{
        flex-direction: column;
        padding-top: 24px;
    }
    .footer-grid-list{
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width:1024px) {
    .footer-animate {right: -10%;}    
}

@media only screen and (max-width: 767px) {
    .footer-nav ul {gap: 8px; margin-bottom: 16px;}
    .ftbrands div{gap: 16px;}
    .footer-bloginfo{flex-wrap: wrap; justify-content: left; gap: 16px; padding-bottom: 12px;}
    .ftpolicy ul{flex-wrap: wrap; justify-content: left; column-gap: 24px; row-gap: 8px;}
    .footer-cnt{flex-direction: column; padding-top: 12px !important; padding-bottom: 32px; row-gap: 12px;}
    .footer-nav{display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; gap: 8px; margin-bottom: 0px;}
    .footer-cnt>div svg{width: 98px;}
    .footer-animate{display: none;}
}

@media only screen and (max-width: 600px) {
    .footer-nav{
        grid-template-columns: 1fr;
    }
    .footer-grid-list{
        grid-template-columns: 1fr;
    }
    .ft-logo{
        align-items: start;
        gap: 12px;
        flex-direction: column;
    }
    .ft-social{
        margin-top: 0;
        margin-bottom: 0;
    }
}

.footer-nav{
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 32px;
    width: 100%;
    align-items: start;
}

.footer-grid-list{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    column-gap: 20px;
    row-gap: 12px;
    padding-left: 0;
}

.footer-grid-list li{
    margin: 0;
}

.footer-grid-list a{
    display: inline-block;
}

@media(max-width: 991px){
    .footer-nav{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .footer-grid-list{
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 575px){
    .footer-grid-list{
        grid-template-columns: 1fr;
    }
}

.footer-company-grid{
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 48px;
    align-items: start;
}

.footer-company-grid .footer-col-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-company-grid .footer-col-list li{
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════
   FOOTER SECTION STYLING
═══════════════════════════════════════════════ */
.site-footer {
    background-color: #000000;
    color: #ffffff;
    padding: 60px 0 20px;
    font-family: "Poppins", sans-serif;
}

.footer-widget {
    margin-bottom: 30px;
}

.footer-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--secondary);
}

.popular-links-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.footer-product-link {
    color: #bbbbbb;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
    display: inline-block;
    position: relative;
}

.footer-product-link:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -12px;
    color: #444;
    pointer-events: none;
}

.footer-product-link:hover {
    color: var(--secondary);
    text-decoration: none;
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #222;
    text-align: center;
}

.footer-bottom p {
    font-size: 12px;
    color: #777;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 20px;
        text-align: center;
    }
    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .popular-links-wrap {
        justify-content: center;
    }
    .footer-product-link::after {
        display: none;
    }
}

/* =============================================================
   OLSON FOOTER — "Premium Dark Close" (.ft2-*)
   Mirrors .stats-strip / .prm-stats: #16181d + 3px amber top accent.
   footer.css loads LAST so these win the cascade; the shared legacy
   selectors (.footer-bloginfo[-section], .footer-company-grid) are
   overridden here (later = wins). The old .footer-cnt/.footer-nav/.ft-*
   rules above are now dead (their markup was replaced) — harmless.
   ============================================================= */
footer.ft2-footer {
    position: relative;
    background: #16181d;
    color: var(--Lgray);
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    padding-top: 48px;          /* top breathing room; the 3px amber ::before accent sits above it */
}
.ft2-footer::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--secondary), #f4b743);
}

/* main grid: Brand 1.6 | Categories 1 | Company 1 | Contact 1.3 */
.ft2-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 48px;
    align-items: start;
    padding-bottom: 44px;       /* gap before the bottom bar (top padding lives on .ft2-footer) */
}

/* brand column */
.ft2-logo-link { display: inline-block; }
.ft2-logo  { max-width: 150px; height: auto; display: block; margin-bottom: 18px; }
.ft2-blurb { color: var(--Lgray); font-size: 14px; line-height: 1.6; max-width: 32ch; margin: 0 0 22px; }
.ft2-follow{ color: var(--Lgray); font-size: 14px; font-weight: 400; letter-spacing: .3px; margin: 0 0 10px; }

/* column titles + quiet amber underline accent */
.ft2-col-title {
    color: var(--white);
    font-size: 15px; font-weight: 600;
    margin: 0 0 20px;
    position: relative; padding-bottom: 10px;
}
.ft2-col-title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 28px; height: 2px; background: var(--secondary);
}

/* re-skin the component-emitted link lists (categories + company) — NOT contact */
/* category list: beat legacy .footer-grid-list{display:grid!important} -> single column */
.ft2-list--cats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 12px;
    padding-left: 0;
}
.footer-company-grid { column-gap: 40px; align-items: start; }
.footer-company-grid .footer-col-list li { margin-bottom: 12px; }

.ft2-list--cats a,
.footer-company-grid .footer-col-list a {
    color: var(--Lgray); font-size: 14px; text-decoration: none;
    position: relative; display: inline-block;
    transition: color .25s ease;
}
.ft2-list--cats a::after,
.footer-company-grid .footer-col-list a::after {
    content: ""; position: absolute; left: 0; bottom: -3px;
    width: 0; height: 2px; background: var(--secondary);
    transition: width .25s ease;
}
.ft2-list--cats a:hover,
.footer-company-grid .footer-col-list a:hover { color: var(--white); }
.ft2-list--cats a:hover::after,
.footer-company-grid .footer-col-list a:hover::after { width: 100%; }

/* amber icon chips — social */
.ft2-social { display: flex; gap: 12px; padding: 0; margin: 0; list-style: none; }
.ft2-social li { list-style: none; margin: 0; }
.ft2-social li a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(232,154,14,.12); text-decoration: none;
    transition: background .25s ease;
}
.ft2-social li a:hover { background: rgba(232,154,14,.20); }
.ft2-social li span::before { color: var(--secondary); font-size: 18px; }

/* contact — actionable, colour-only hover (no underline) */
.ft2-contact { display: grid; row-gap: 16px; max-width: 320px; font-style: normal; }
.ft2-contact-row { display: flex; align-items: center; gap: 12px; }
.ft2-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: 9px; background: rgba(232,154,14,.12); font-size: 15px;
}
.ft2-chip::before { color: var(--secondary); }
.ft2-contact a {
    color: var(--Lgray); font-size: 14px; text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .25s ease;
}
.ft2-contact a:hover { color: var(--secondary); }
.ft2-addr { color: var(--Lgray); font-size: 14px; line-height: 1.5; }

/* bottom bar — overrides the legacy .footer-bloginfo[-section] (later = wins) */
.footer-bloginfo-section {
    border-top: 1px solid rgba(232,154,14,.22);
    padding-top: 18px; padding-bottom: 18px;
    background: #16181d;
}
.footer-bloginfo {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; color: var(--Lgray); font-size: 13px;
}
.footer-bloginfo p { margin: 0; color: #8b8f96; }   /* lifted off --Dgray for AA on #16181d */
.ft2-bottom-right { display: flex; align-items: center; gap: 24px; }
.ft2-legal { display: flex; gap: 18px; }
.ft2-legal a { color: var(--Lgray); text-decoration: none; font-size: 13px; transition: color .25s ease; }
.ft2-legal a:hover { color: var(--secondary); }
.ft2-trust { color: var(--Lgray); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.ft2-trust::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); display: inline-block; }

/* focus rings — !important beats global *:focus{outline:none!important} */
.ft2-footer a:focus-visible {
    outline: 2px solid var(--secondary) !important;
    outline-offset: 3px;
    border-radius: 4px;
}

/* responsive */
@media (max-width: 991px) {
    .ft2-footer { padding-top: 40px; }
    .ft2-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 32px; }
    .ft2-brand { grid-column: 1 / -1; }
    .ft2-contact-col { grid-column: 1 / -1; }
    .ft2-contact { max-width: none; }
    .footer-company-grid { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 575px) {
    .ft2-footer { padding-top: 32px; }
    .ft2-grid { grid-template-columns: 1fr; row-gap: 28px; }
    .footer-company-grid { grid-template-columns: 1fr; }
    .footer-bloginfo { flex-wrap: wrap; justify-content: flex-start; gap: 12px 24px; }
    .ft2-bottom-right { flex-wrap: wrap; gap: 12px 18px; }
}

/* ── Floating back-to-top (markup after the footer in main.blade.php; shown by
   custom-script.js once the page is scrolled). Amber like the site CTAs; the
   hover is colour-only (no lift). z-index sits under the sticky header (990),
   drawers and modals. ── */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 980;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), #f4b743);
    color: #16181d;
    box-shadow: 0 10px 24px -8px rgba(232, 154, 14, 0.6), 0 2px 6px rgba(22, 24, 29, 0.18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.25s ease, color 0.25s ease;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: #16181d;
    color: var(--secondary);
}
.back-to-top:focus-visible {
    outline: 2px solid #16181d !important;   /* beats the global *:focus{outline:none!important} */
    outline-offset: 3px;
}
.back-to-top svg { display: block; }
@media (max-width: 767px) {
    .back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: none; }
    .ft2-footer * { transition: none !important; }
}