/* PackForge - footer layout for every screen size + social icons (SAMPLE v300, 24 Oct 2026).
   Design only: no link, text or icon changed. The site's own footer CSS has many !important rules,
   so some of these need !important too. */

/* ---- social icons: same size circles, logos centred ---- */
.ftr .socs{display:flex!important;flex-wrap:nowrap;gap:10px!important;align-items:center;margin-top:0!important}
.ftr .socs a{width:42px!important;height:42px!important;flex:0 0 42px!important;box-shadow:0 2px 7px rgba(11,26,43,.2)}
.ftr .socs a svg{width:21px!important;height:21px!important}
.ftr .socs .s-yt svg{width:23px!important;height:23px!important}
.ftr .socs .s-fb svg{width:25px!important;height:25px!important;transform:translateY(-2px)}
.ftr .ftop>div:last-child>.ft-h{margin:0 0 14px!important}
.ftr .ftop>div:last-child>.fapp{margin-bottom:22px}

/* ---- big desktop (5 columns): the last column is 240px, so 5 icons of 40px fit on one line ---- */
@media (min-width:1181px){
 .ftr .socs{gap:8px!important}
 .ftr .socs a{width:40px!important;height:40px!important;flex-basis:40px!important}
 .ftr .socs a svg{width:20px!important;height:20px!important}
 .ftr .socs .s-fb svg{width:24px!important;height:24px!important}
}

/* ---- laptop / tablet (601-1180px): link lists in columns, then Downloads and Follow Us side by side ---- */
@media (max-width:1180px){
 .ftr .ftop>div:last-child{grid-column:1/-1;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:56px;row-gap:0;align-items:start;padding-top:22px;border-top:1px solid #dfdfdf}
 .ftr .ftop>div:last-child>.ft-h:first-child{grid-column:1;grid-row:1}
 .ftr .ftop>div:last-child>.fapp{grid-column:1;grid-row:2;margin-bottom:0}
 .ftr .ftop>div:last-child>.ft-h:not(:first-child){grid-column:2;grid-row:1}
 .ftr .ftop>div:last-child>.socs{grid-column:2;grid-row:2}
}
@media (min-width:901px) and (max-width:1180px){
 .ftr .ftop{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .ftr .ftop>div:last-child{justify-content:start}
}
/* centred from here down, like the address block under it */
@media (max-width:900px){
 .ftr .ftop>div:last-child{justify-content:center;text-align:center}
 .ftr .ftop>div:last-child .fapp{justify-content:center;justify-items:center}
 .ftr .ftop>div:last-child .socs{justify-content:center}
 .ftr .fbtm ul{justify-content:center;gap:8px}
 .ftr .fbtm li{border-left:0;padding:0}
 .ftr .fbtm li a{display:inline-block;padding:5px 12px;border:1px solid #cfcfcf;border-radius:16px;background:#fff;font-size:13px}
}

/* ---- phones (up to 600px): two short link columns, then Downloads and Follow Us one under the other ---- */
@media (max-width:600px){
 .ftr .ftop{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
 .ftr .ftop>div:last-child{grid-template-columns:auto;column-gap:0}
 .ftr .ftop>div:last-child>.ft-h:not(:first-child){grid-column:1;grid-row:3;margin-top:24px!important}
 .ftr .ftop>div:last-child>.socs{grid-column:1;grid-row:4}
 .ftr .socs{gap:14px!important}
 .ftr .socs a{width:48px!important;height:48px!important;flex-basis:48px!important}
 .ftr .socs a svg{width:24px!important;height:24px!important}
 .ftr .socs .s-yt svg{width:26px!important;height:26px!important}
 .ftr .socs .s-fb svg{width:28px!important;height:28px!important}
}
@media (max-width:359px){
 .ftr .ftop{grid-template-columns:1fr!important}
 .ftr .socs{gap:10px!important}
 .ftr .socs a{width:44px!important;height:44px!important;flex-basis:44px!important}
}