/* Add custom CSS styles below */ 
/* Let each slide/card be auto-height (not equalized) */






/* Product cards: add border with #732b20 */
.s-products-slider-card custom-salla-product-card.s-product-card-entry,
custom-salla-product-card.s-product-card-entry.s-product-card-vertical,
custom-salla-product-card.s-product-card-entry.s-product-card-fit-height {
  border: 2px solid #732b20 !important;
  border-radius: 16px;
  overflow: hidden;              /* keep image corners clipped */
  background-clip: padding-box;
}

/* (optional) a tiny hover emphasis — remove if you don't want it */
.s-products-slider-card custom-salla-product-card.s-product-card-entry:hover {
  box-shadow: 0 0 0 3px rgba(115, 43, 32, 0.06);
}


/* ================================
   FOOTER — CONTACTS (Salla block)
   ================================ */
footer.store-footer salla-contacts .s-contacts-item {
  display: flex;
  align-items: center;
  gap: 8px;                 /* space between icon + text */
  text-decoration: none;
}

/* Outer circle */
footer.store-footer salla-contacts .s-contacts-icon {
  position: relative;
  flex: 0 0 36px;           /* smaller size */
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #b59353;      /* outer ring color */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .15s ease;
}

/* Inner circle */
footer.store-footer salla-contacts .s-contacts-icon::before {
  content: "";
  position: absolute;
  inset: 3px;               /* ring thickness */
  border-radius: inherit;
  background: #732b20;      /* inner container color */
}

/* SVG (icon) */
footer.store-footer salla-contacts .s-contacts-icon svg {
  position: relative;       /* above ::before */
  z-index: 1;
  width: 16px;              /* smaller icon inside */
  height: 16px;
  display: block;
  fill: #b59353 !important; /* icon color */
}

/* Keep existing text color */
footer.store-footer salla-contacts .s-contacts-item .unicode {
  font-weight: 600;         /* remove if not desired */
  direction: ltr;           /* numbers/emails flow correctly */
  unicode-bidi: plaintext;
}

/* Hover micro-interaction */
footer.store-footer salla-contacts .s-contacts-item:hover .s-contacts-icon {
  transform: translateY(-1px);
}

/* ================================
   FOOTER — SOCIAL ICONS (ul.s-social-list)
   ================================ */
footer.store-footer .s-social-list {
  display: flex;
  gap: 8px;                 /* spacing between social buttons */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Outer circle (anchor) */
footer.store-footer .s-social-link > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;              /* smaller size */
  height: 36px;
  border-radius: 9999px;
  background: #b59353;      /* outer ring color */
  padding: 3px;             /* ring thickness */
  text-decoration: none;
  transition: transform .15s ease;
}

/* Inner circle */
footer.store-footer .s-social-link > a .s-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: #732b20;      /* inner container color */
  overflow: hidden;
}

/* SVG (icon) */
footer.store-footer .s-social-link > a .s-social-icon svg {
  width: 16px;              /* smaller icon */
  height: 16px;
  display: block;
  fill: #b59353 !important; /* icon color (fixed bad '##' typo) */
}

/* Hover micro-interaction */
footer.store-footer .s-social-link > a:hover .s-social-icon,
footer.store-footer .s-social-link > a:hover {
  transform: translateY(-1px);
}

/* Optional: extra small on very small screens */
@media (max-width: 480px) {
  footer.store-footer salla-contacts .s-contacts-icon,
  footer.store-footer .s-social-link > a {
    width: 32px;
    height: 32px;
  }
  footer.store-footer salla-contacts .s-contacts-icon::before {
    inset: 3px;
  }
  footer.store-footer salla-contacts .s-contacts-icon svg,
  footer.store-footer .s-social-link > a .s-social-icon svg {
    width: 14px;
    height: 14px;
  }
}