/**
 * Happy Cappy — V2 site footer.
 * File: assets/css/hc-footer.css  (CHILD theme)
 *
 * Extracted from the approved v5 design (footer rules only). Loaded ONLY on
 * V2 pages (hc_v2_active), where the new footer renders. Relies on the design
 * tokens (:root vars) from product-v2.css. Dark-mode rules omitted.
 * SVG social icons — no Font Awesome.
 *
 * v0.2.88 — footer rebuild (V2-gated).
 */

html:root footer .foot-col a,html:root footer .foot-col a:visited,html:root footer .foot-contact a,html:root footer .foot-contact a:visited{color:#aec6de}
html:root footer .foot-contact .lab{color:#9cb8d4}
html:root footer .foot-brand p,html:root footer .ftn-text p,html:root footer .foot-bottom{color:#9fb6cc}
html:root footer .foot-col a:hover{color:#fff}
html:root .foot-help p,html:root .foot-help .fs-eyebrow{color:#aec6de}
html:root .foot-help .fs-sub{color:#b8cfe6}
html:root .foot-help .fs-name svg{stroke:#9cb8d4}
html:root .foot-help .foot-sister:hover .fs-name svg{stroke:#fff}
footer{background:var(--ink-surface);color:#bdd9de;font-family:var(--font-body)}
/* Restore v5's global a{color:inherit;text-decoration:none} within the footer so
   links don't fall back to the parent _s style.css link/visited colours (blue ->
   purple) or its underline off product pages. Specific .foot-* colour rules
   (incl. their :visited variants above) still win. */
footer a,footer a:visited{color:inherit;text-decoration:none}
footer .wrap{padding:0 28px 30px}
.foot-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.55fr;gap:34px;padding:40px 0 22px}
.foot-brand .logo{color:#fff}
.foot-brand .logo small{color:#7fd0c4}
.foot-brand .logo-img{height:74px;filter:brightness(0) invert(1)}
.foot-brand p{font-size:13.5px;color:#9cc1c7;margin:14px 0 0;max-width:250px}
.foot-contact{margin-top:15px;font-size:13.5px}
.foot-contact .lab{display:block;color:#7fb3bb;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.foot-contact a{color:#fff;font-weight:600;font-family:var(--font-display);overflow-wrap:anywhere}
.foot-contact a:hover{color:var(--accent)}
.foot-help{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:20px;align-self:start}
.foot-help h2{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-body);font-weight:700;margin-bottom:8px}
.foot-help p{font-size:13px;color:#9cc1c7;margin:0 0 13px}
.foot-retailers{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
/* Retailer chips sit on a hardcoded white pill (background:#fff, both themes),
   so the default text colour is a literal dark value — NOT a token like
   --teal-ink, which flips light in dark mode and would vanish on the white chip.
   :visited is pinned too so the parent theme's a:visited purple can't leak in on
   non-shop pages. Hover (accent bg + white) is unchanged. */
.foot-retailers span,.foot-retailers a,.foot-retailers a:visited{height:25px;padding:0 8px;border-radius:4px;background:#fff;display:flex;align-items:center;font-size:11px;font-weight:700;color:#163e63;text-decoration:none;transition:background .15s,color .15s,transform .15s}
.foot-retailers a:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.foot-col h2{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;font-family:var(--font-body);font-weight:700}
.foot-col a{display:block;font-size:14px;color:#a9cdd3;padding:5px 0;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-sister{display:block;padding:11px 13px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);background:rgba(255,255,255,.04);transition:border-color .16s,background .16s}
.foot-sister:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08)}
.foot-sister .fs-eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#7fb3bb;margin-bottom:3px}
.foot-sister .fs-name{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:15px;color:#fff;padding:0;line-height:1.15}
.foot-sister .fs-name svg{width:14px;height:14px;stroke:#7fb3bb;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s,transform .16s}
.foot-sister:hover .fs-name svg{stroke:#fff;transform:translate(2px,-2px)}
.foot-sister .fs-sub{display:block;font-size:12px;color:#9cc1c7;padding:0;margin-top:2px}
.socials{display:flex;gap:8px;margin-top:16px;flex-wrap:nowrap}
.socials a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#dff0f3;transition:background .15s,color .15s}
.socials a:hover{background:var(--accent);color:#fff}
.socials svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.socials svg.solid{fill:currentColor;stroke:none}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#86aab0}
.foot-bottom a{color:#a9cdd3}
.foot-bottom a:hover{color:#fff}

@media(max-width:1000px){
.foot-grid{grid-template-columns:1fr 1fr;gap:28px 34px}
}
@media(max-width:640px){
.foot-grid{grid-template-columns:1fr;gap:30px}
}
/* WCAG AA contrast fix: side-cart recently-viewed title */
.xoo-wsc-rp-title{color:#727272}
.foot-col h2,.foot-help h2{margin-top:0;line-height:1.55}