/* Preview footer (2026-11-04). Markup: includes/footer_preview.php. Loaded only by the preview pages.
   Same look as the new header: Roboto, dark #1b1b1b / #232323, accent #1fbbe7, glass boxes, small uppercase labels. */

.cdFoot { font-family: var(--main-font, 'Roboto', sans-serif); color: #e9e9e9; background: #1b1b1b; border-top: 3px solid #1fbbe7; }
.cdFoot a { color: #fff; text-decoration: none; }
.cdFoot a:hover { color: #1fbbe7; }
.cdFootInner { max-width: var(--con-width, 1600px); margin: 0 auto; padding: 0 40px; box-sizing: border-box; }

/* ---- Stores ---- */
.cdFootStores {
    padding: 48px 0 44px;
    background:
        linear-gradient(180deg, rgba(14,14,14,.9), rgba(14,14,14,.82)),
        url(../images/record-display-wall-from-side.jpg) center 60% / cover no-repeat,
        #1b1b1b;
}
.cdFootStoresHead { text-align: center; margin: 0 0 26px; }
.cdFootEyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1fbbe7; margin: 0 0 6px; }
.cdFootStoresHead h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; color: #fff; margin: 0; line-height: 1.1; }
.cdFootStoreGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.cdFootStore {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding: 20px 22px 22px;
}
.cdFootStoreTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.cdFootStore h3 {
    font-size: 22px; font-weight: 700; color: #fff; margin: 0; padding: 0 0 10px;
    border-bottom: 2px solid #1fbbe7; display: inline-block;
}
/* per-store Instagram, beside the store name */
.cdFoot .cdFootIg {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 19px; background: rgba(255,255,255,.06);
    font-size: 14px; font-weight: 700; color: #fff; transition: border-color .15s, background .15s, color .15s;
}
.cdFoot .cdFootIg:hover { border-color: #1fbbe7; background: rgba(31,187,231,.15); color: #fff; }
.cdFootIg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.cdFootIg svg .cdIgDot { fill: currentColor; stroke: none; }
.cdFootStoreCols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px; }
.cdFootStoreCols .cdFootHours { grid-column: 2; grid-row: 1 / span 2; }  /* hours get the wide column; address + contact stack on the left */
.cdFootBox {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.5;
    min-width: 0;
    overflow-wrap: anywhere;
}
.cdFootLabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1fbbe7; margin: 0 0 4px; }
.cdFootHours p { margin: 0; color: #e9e9e9; font-size: 15px; line-height: 1.5; }
.cdHrs { list-style: none; margin: 4px 0 0; padding: 0; }
.cdHrs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.cdHrs li:last-child { border-bottom: 0; }
.cdHrsDay { white-space: nowrap; color: #e9e9e9; }
.cdHrsTime { white-space: nowrap; color: #fff; font-weight: 700; }
.cdFoot .cdFootMap { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: #1fbbe7; }
.cdFoot .cdFootMap:hover { color: #fff; }

/* ---- Brand / links / newsletter ---- */
.cdFootMain { padding: 44px 0 36px; background: #232323; }
.cdFootCols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 40px; }
.cdFootLogo { display: block; width: 210px; max-width: 100%; height: auto; margin: 0 0 12px; }
.cdFootTagline { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 0 14px; }
.cdFootBrand p, .cdFootNews p { font-size: 15px; line-height: 1.55; color: #bdbdbd; margin: 0 0 12px; }
.cdFootHead { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.cdFootLinks ul { list-style: none; margin: 0; padding: 0; }
.cdFootLinks li { margin: 0 0 9px; }
.cdFootLinks a { font-size: 15px; color: #d6d6d6; }
.cdFootFollow { margin-top: 18px; }
.cdFootFollow .cdFootHead { margin-bottom: 10px; }
.cdFoot .cdFootLinktree {
    display: inline-block; padding: 10px 18px; border-radius: 6px; background: #1fbbe7; color: #fff;
    font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background .15s;
}
.cdFoot .cdFootLinktree:hover { background: #1599bf; color: #fff; }
/* the old .fsec5 flex-basis/width rules (it's a grid cell here) */
.cdFoot .cdFootNews.fsec5 { flex: none; max-width: none; padding: 0; }

/* ---- Bottom bar ---- */
.cdFootBottom { background: #141414; padding: 14px 0; }
.cdFootBottom .cdFootInner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cdFootBottom p { margin: 0; font-size: 13px; color: #9a9a9a; }
.cdFootCanada { display: inline-flex; align-items: center; gap: 6px; }
.cdFootCanada svg { width: 14px; height: 14px; }

/* ---- Responsive ---- */
@media screen and (max-width: 1100px) {
    .cdFootCols { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 1250px) {
    .cdFootStoreGrid { grid-template-columns: 1fr; }  /* stack the stores so each hours line fits on one line */
}
@media screen and (max-width: 600px) {
    .cdFootInner { padding: 0 16px; }
    .cdFootStores { padding: 36px 0 32px; }
    .cdFootStoreCols { grid-template-columns: 1fr; }
    .cdFootStoreCols .cdFootHours { grid-column: auto; grid-row: auto; }
    .cdFootCols { grid-template-columns: 1fr; gap: 28px; }
    .cdFootBottom .cdFootInner { justify-content: center; text-align: center; }
}