/* Kobicart Social Links */
.kc-social {
  --kc-social-size: 36px;
  --kc-social-gap: 10px;
  box-sizing: border-box;
  margin: 0.75rem 0;
  padding: 0.35rem 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.kc-social *,
.kc-social *::before,
.kc-social *::after {
  box-sizing: border-box;
}

.kc-social__title {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.kc-social__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kc-social-gap);
}

.kc-social--start .kc-social__list { justify-content: flex-start; }
.kc-social--center .kc-social__list { justify-content: center; }
.kc-social--end .kc-social__list { justify-content: flex-end; }

.kc-social__item {
  margin: 0;
  padding: 0;
}

.kc-social__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
}

.kc-social__icon {
  width: var(--kc-social-size);
  height: var(--kc-social-size);
  min-width: var(--kc-social-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kc-social-color, #1f4f4a);
  color: #fff;
  overflow: hidden;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.kc-social--circle .kc-social__icon { border-radius: 50%; }
.kc-social--soft .kc-social__icon { border-radius: 0.55rem; }
.kc-social--square .kc-social__icon { border-radius: 0.2rem; }

.kc-social__link:hover .kc-social__icon {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.kc-social__link:focus-visible .kc-social__icon {
  outline: 2px solid var(--kc-social-color, #1f4f4a);
  outline-offset: 3px;
}

.kc-social__svg {
  width: 58%;
  height: 58%;
  display: block;
}

.kc-social__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kc-social__label {
  font-size: 0.82rem;
  font-weight: 550;
  color: #333;
}

.kc-social--header {
  margin: 0.5rem 0 0;
  padding: 0;
}

.kc-social--footer {
  margin: 0.75rem 0 0.25rem;
  padding: 0.25rem 0;
}

.kc-social-slot--header {
  width: 100%;
  clear: both;
  padding: 0.35rem 0 0.65rem;
}

.kc-social-slot--footer {
  width: 100%;
  clear: both;
  padding: 0.85rem 0 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0.75rem;
}

/*
 * Default OC4 theme: absolute #container/footer + huge #content padding-bottom
 * and #container margin-bottom. Extra footer bars break that layout (overlap or
 * a large white void under the footer). Flatten to normal document flow.
 */
body:has(.kc-social-slot--footer) #container,
html:has(.kc-social-slot--footer) #container {
  position: relative !important;
  height: auto !important;
  min-height: 100%;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  bottom: auto !important;
}

body:has(.kc-social-slot--footer) #content,
body:has(.kc-social-slot--footer) #column-left,
body:has(.kc-social-slot--footer) #column-right,
html:has(.kc-social-slot--footer) #content,
html:has(.kc-social-slot--footer) #column-left,
html:has(.kc-social-slot--footer) #column-right {
  padding-bottom: 0 !important;
}

body:has(.kc-social-slot--footer) footer,
html:has(.kc-social-slot--footer) footer {
  position: relative !important;
  bottom: auto !important;
}

footer .kc-social__label,
.kc-social-slot--footer .kc-social__label {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 575.98px) {
  .kc-social__label {
    display: none;
  }
}