/* ============================================================
   CC Footer — consumes cc_ui tokens (tokens.css must load too).
   Everything scoped under .cc-footer.
   ============================================================ */

/* Hide the theme's residual footer on shop 3 — cc_footer replaces it entirely.
   This file only loads where cc_footer is active (shop 3), so it's safe.
   cc_footer renders via displayFooter inside .footer-container; we neutralise
   the container's own chrome and hide the leftover theme blocks/bars. */
.footer-container { background: none !important; padding: 0 !important; min-height: 0 !important; }
/* {hook displayFooter} (our cc_footer) lives inside .tvfooter-logo-link-wrapper —
   keep it, but strip its container so the navy footer spans full width. */
.footer-container .tvfooter-logo-link-wrapper {
  max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
/* hide the leftover theme footer content (residual columns, store-logo slot,
   go-top button, and the theme copyright/payment bar). */
.footer-container .tvfooter-storelogo-weapper,
.footer-container .tvfooter-storelogo-imformation,
.footer-container .tvbottom-to-top,
.footer-container .tvfooter-copy-payment-icon-wrapper,
.footer-container .block-social {
  display: none !important;
}

.cc-footer {
  background: var(--cc-surface-deep, #0f2440);
  color: #fff;
  width: 100%;
}
.cc-footer .cc-footer-line { width: 100%; height: 5px; border-radius: 0; }
.cc-footer-inner { max-width: 1360px; margin-inline: auto; padding: 52px 28px 30px; }

/* Column count varies by shop: a storefront with no physical store has no
   stores column. The 4-column ratios are El Informal's approved layout; the
   others keep the same rhythm without leaving an empty grid track. */
.cc-footer-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
  gap: 40px;
}
.cc-footer-cols--3 { grid-template-columns: 1fr 1.2fr 1fr; }
.cc-footer-cols--2 { grid-template-columns: 1fr 1fr; }
.cc-footer-cols--1 { grid-template-columns: 1fr; }

.cc-footer-title {
  font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin: 0 0 20px; padding-bottom: 12px; position: relative;
}
.cc-footer-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px;
  background: var(--cc-accent, #1a6fd0);
}

.cc-footer ul { list-style: none; margin: 0; padding: 0; }

/* stores */
.cc-footer-stores li { margin-bottom: 18px; }
/* .cc-footer prefix out-specifies the theme/blob rule `.footer-container li a`
   (inline-block + blue !important hover + translateX) which otherwise collides. */
/* Styled by class, not element: the store block is an <a> only when a stores
   page is configured for the shop, and a <div> otherwise. Both must look the
   same. */
.cc-footer .cc-footer-stores .cc-footer-store-body { text-decoration: none; color: rgba(255,255,255,.78); display: flex; flex-direction: column; gap: 3px; font-size: inherit; transition: color .15s ease; }
.cc-footer .cc-footer-stores a.cc-footer-store-body:hover { color: #fff !important; transform: none !important; }
.cc-footer-stores strong { color: #fff; font-size: .96rem; font-weight: 700; }
.cc-footer-hours { font-size: .8rem; color: rgba(255,255,255,.55); }

/* link lists */
.cc-footer-links li { margin-bottom: 11px; }
.cc-footer .cc-footer-links a { text-decoration: none; color: rgba(255,255,255,.78); font-size: .92rem; display: inline-block; transition: color .15s ease, padding-left .15s ease; }
.cc-footer .cc-footer-links a:hover { color: #fff !important; padding-left: 4px; transform: none !important; }

/* contact — force icon-beside-text row over the theme's stacking rules */
.cc-footer-contact li { margin-bottom: 13px; }
.cc-footer .cc-footer-contact a {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 11px; text-decoration: none; color: rgba(255,255,255,.82); font-size: .92rem; transition: color .15s ease;
}
.cc-footer .cc-footer-contact a > .cc-footer-ico { flex: 0 0 auto !important; float: none !important; margin: 0 !important; }
.cc-footer .cc-footer-contact a > span { flex: 1 1 auto; min-width: 0; width: auto !important; float: none !important; }
.cc-footer .cc-footer-contact a:hover { color: #fff !important; transform: none !important; }
.cc-footer-contact a b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-footer-contact a span { display: flex; flex-direction: column; line-height: 1.25; }
.cc-footer-ico { width: 34px; height: 34px; flex: none; padding: 8px; border-radius: 9px; background: rgba(255,255,255,.09); stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.cc-footer-contact .cc-footer-wa:hover .cc-footer-ico { background: var(--cc-green, #3aa935); }

/* social */
.cc-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.cc-footer-social a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.09); color: #fff; transition: background .15s ease, transform .15s ease; }
.cc-footer-social a:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.cc-footer-social svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* bottom bar */
.cc-footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.cc-footer-copy { margin: 0; font-size: .86rem; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.cc-footer-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-footer-pay .cc-pay { background: #fff; border-radius: 6px; padding: 5px 8px; height: 30px; display: inline-flex; align-items: center; box-sizing: border-box; }
.cc-footer-pay .cc-pay img { height: 18px; width: auto; display: block; }

.cc-footer a:focus-visible { outline: 2px solid var(--cc-accent, #1a6fd0); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .cc-footer * { transition: none !important; } }

@media (max-width: 980px) {
  .cc-footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .cc-footer-cols { grid-template-columns: 1fr; gap: 30px; }
  .cc-footer-inner { padding: 40px 22px 26px; }
  .cc-footer-bottom { flex-direction: column; align-items: flex-start; }
}