Smile Shop

Shop with
Heart,
Make a Difference

Every purchase helps support the work of Smile Foundation. Explore a range of meaningful products and gifts that make a difference while helping bring smiles to children across South Africa.

Shop NOW

Loading products…

/* —- everything scoped to #sfs-shop —- */
#sfs-shop {
/* Smile Foundation brand palette (from the site’s illustrations) */
–sfs-orange:#F47D25; –sfs-cyan:#1DCBF2; –sfs-magenta:#BB3D95;
–sfs-pink:#F28CB3; –sfs-yellow:#FFE000; –sfs-coral:#FF8080;
–sfs-cream:#FDF6E3; –sfs-ink:#333; –sfs-line:#e3e3e3;
/* Distance from top of viewport for the sticky nav + scroll anchoring.
Set this to roughly your site header’s height. */
–sfs-top:110px;
font-family:”Montserrat”,”Helvetica Neue”,Arial,sans-serif; color:var(–sfs-ink);
}
#sfs-shop .sfs-body { display:flex; align-items:flex-start; gap:2rem; }
#sfs-shop .sfs-status { padding:2rem 0; text-align:center; opacity:.7; }
/* —- sticker group (top) —- */
/* Three transform layers so nothing conflicts:
.sfs-arch__item = bounce-in entrance, .sfs-arch__pose = resting tilt,
img = continuous float. */
#sfs-shop .sfs-header { display:flex; justify-content:center; align-items:center;
gap:0; margin:0 0 1.75rem; padding-left:calc(190px + 2rem); }
#sfs-shop .sfs-arch__item { flex:0 0 auto; margin-left:-14px;
animation:sfs-pop .6s ease-out backwards; }
#sfs-shop .sfs-arch__item:first-child { margin-left:0; }
#sfs-shop .sfs-arch__pose { display:block; }
#sfs-shop .sfs-arch__item img { width:62px; height:62px; object-fit:contain; display:block;
animation:sfs-bob 4s ease-in-out 1.1s infinite; }
/* resting scatter: alternating tilt + slight up/down (on the pose layer) */
#sfs-shop .sfs-arch__item:nth-child(1) .sfs-arch__pose{ transform:rotate(-8deg) translateY(4px); }
#sfs-shop .sfs-arch__item:nth-child(2) .sfs-arch__pose{ transform:rotate(5deg) translateY(-8px); }
#sfs-shop .sfs-arch__item:nth-child(3) .sfs-arch__pose{ transform:rotate(-6deg) translateY(2px); }
#sfs-shop .sfs-arch__item:nth-child(4) .sfs-arch__pose{ transform:rotate(7deg) translateY(-6px); }
#sfs-shop .sfs-arch__item:nth-child(5) .sfs-arch__pose{ transform:rotate(-5deg) translateY(-6px); }
#sfs-shop .sfs-arch__item:nth-child(6) .sfs-arch__pose{ transform:rotate(6deg) translateY(2px); }
#sfs-shop .sfs-arch__item:nth-child(7) .sfs-arch__pose{ transform:rotate(-7deg) translateY(-8px); }
#sfs-shop .sfs-arch__item:nth-child(8) .sfs-arch__pose{ transform:rotate(8deg) translateY(4px); }
/* staggered entrance — each pops a beat after the last */
#sfs-shop .sfs-arch__item:nth-child(1){ animation-delay:0s; }
#sfs-shop .sfs-arch__item:nth-child(2){ animation-delay:.07s; }
#sfs-shop .sfs-arch__item:nth-child(3){ animation-delay:.14s; }
#sfs-shop .sfs-arch__item:nth-child(4){ animation-delay:.21s; }
#sfs-shop .sfs-arch__item:nth-child(5){ animation-delay:.28s; }
#sfs-shop .sfs-arch__item:nth-child(6){ animation-delay:.35s; }
#sfs-shop .sfs-arch__item:nth-child(7){ animation-delay:.42s; }
#sfs-shop .sfs-arch__item:nth-child(8){ animation-delay:.49s; }
#sfs-shop .sfs-arch__item:nth-child(even) img { animation-delay:1.5s; }
@keyframes sfs-pop {
0% { opacity:0; transform:scale(.3) translateY(-26px); }
60% { opacity:1; transform:scale(1.12) translateY(6px); }
80% { transform:scale(.97) translateY(-2px); }
100% { opacity:1; transform:scale(1) translateY(0); }
}
/* —- skeleton (while products load) —- */
#sfs-shop .sfs-skel { background:linear-gradient(90deg,#ececec 25%,#f6f6f6 37%,#ececec 63%);
background-size:400% 100%; animation:sfs-shimmer 1.4s ease infinite; }
#sfs-shop .sfs-skel-dot { width:15px; height:15px; border-radius:50%; background:#e2e2e2;
animation:sfs-pulse 1.4s ease infinite; }
#sfs-shop .sfs-card–skel { pointer-events:none; }
@keyframes sfs-shimmer { 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@keyframes sfs-pulse { 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
/* —- section navigator (left rail on desktop) —- */
#sfs-shop .sfs-nav {
position:sticky; top:var(–sfs-top); flex:0 0 190px; width:190px;
display:flex; flex-direction:column; gap:.4rem;
}
#sfs-shop .sfs-nav__link {
display:flex; align-items:center; gap:.6rem; text-align:left; width:100%;
border:0; background:transparent; font:inherit; font-size:.95rem; color:var(–sfs-ink);
padding:.55rem .7rem; border-radius:10px; cursor:pointer; transition:background .15s ease;
border-left:3px solid transparent;
}
#sfs-shop .sfs-nav__link:hover { background:rgba(0,0,0,.04); }
#sfs-shop .sfs-nav__dot { width:11px; height:11px; border-radius:50%; flex:0 0 11px;
background:var(–accent,var(–sfs-orange)); }
#sfs-shop .sfs-nav__link.is-active {
background:rgba(0,0,0,.04); border-left-color:var(–accent,var(–sfs-orange));
font-weight:700; color:var(–accent,var(–sfs-orange));
}
/* —- logo above the categories —- */
#sfs-shop .sfs-logo { width:100%; max-width:150px; margin:0 auto 1.25rem; }
#sfs-shop .sfs-logo img { width:100%; height:auto; display:block;
animation:sfs-float 5s ease-in-out infinite; }
/* —- sections column —- */
#sfs-shop .sfs-sections { flex:1 1 auto; min-width:0; }
#sfs-shop .sfs-section { margin:0 0 2.5rem; scroll-margin-top:var(–sfs-top); }
#sfs-shop .sfs-section__title { text-align:center; font-size:1.9rem; font-weight:700;
text-transform:uppercase; margin:0 0 .35rem; }
#sfs-shop .sfs-section__title::after { content:””; display:block; width:56px; height:4px;
border-radius:4px; margin:.5rem auto 0; background:var(–accent,var(–sfs-orange)); }
#sfs-shop .sfs-section__sub { text-align:center; font-size:1.1rem; opacity:.75; margin:.4rem 0 1.5rem; }
/* —- smiley sticker dividers between sections —- */
#sfs-shop .sfs-divider { display:flex; justify-content:center; align-items:center;
gap:1.75rem; margin:0 0 2.5rem; }
#sfs-shop .sfs-face { display:inline-block; animation:sfs-bob 4s ease-in-out infinite; }
#sfs-shop .sfs-face img { display:block; width:70px; height:70px; object-fit:contain; }
#sfs-shop .sfs-face–0 img { transform:rotate(-10deg); }
#sfs-shop .sfs-face–1 img { width:90px; height:90px; transform:rotate(4deg); }
#sfs-shop .sfs-face–2 img { transform:rotate(9deg); }
#sfs-shop .sfs-face–0 { animation-delay:0s; }
#sfs-shop .sfs-face–1 { animation-delay:.5s; }
#sfs-shop .sfs-face–2 { animation-delay:1s; }
@keyframes sfs-bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes sfs-float { 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-10px) rotate(-2deg); } }
/* —- filter chips —- */
#sfs-shop .sfs-filters { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:0 0 1.75rem; }
#sfs-shop .sfs-chip { border:1px solid var(–sfs-line); background:#fff; color:var(–sfs-ink);
border-radius:999px; padding:.45rem 1.05rem; font:inherit; font-size:.9rem; cursor:pointer;
transition:all .15s ease; line-height:1; }
#sfs-shop .sfs-chip:hover { border-color:var(–accent,var(–sfs-orange)); color:var(–accent,var(–sfs-orange)); }
#sfs-shop .sfs-chip.is-active { background:var(–accent,var(–sfs-orange));
border-color:var(–accent,var(–sfs-orange)); color:#fff; }
#sfs-shop .sfs-chip__count { opacity:.7; font-size:.8em; margin-left:.35em; }
/* —- product grid —- */
#sfs-shop .sfs-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
@media (min-width:1500px){ #sfs-shop .sfs-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
#sfs-shop .sfs-card { display:flex; flex-direction:column; background:#fff;
border-radius:16px; box-shadow:0 0 20px rgba(0,0,0,.15); overflow:hidden; }
#sfs-shop .sfs-card__title { text-align:center; font-size:1.05rem; font-weight:600;
line-height:1.3; padding:1.1rem 1rem .4rem; margin:0; min-height:4.2rem;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#sfs-shop .sfs-card__title a { color:inherit; text-decoration:none; }
#sfs-shop .sfs-card__title a:hover { color:var(–accent,var(–sfs-orange)); }
#sfs-shop .sfs-card__imgwrap { width:80%; margin:0 auto; aspect-ratio:1/1;
border:1px solid #707070; border-radius:14px; display:block; overflow:hidden; }
#sfs-shop .sfs-card__imgwrap img { width:100%; height:100%; object-fit:contain; display:block; }
#sfs-shop .sfs-card__price { text-align:center; color:var(–accent,var(–sfs-orange));
font-weight:700; font-size:1.15rem; margin:1rem 0; }
#sfs-shop .sfs-card__price .from { font-weight:400; font-size:.75em; opacity:.7; }
#sfs-shop .sfs-card__btn { margin-top:auto; background:var(–sfs-orange); color:#fff;
text-align:center; text-decoration:none; font-weight:500; padding:1rem; display:block;
transition:filter .15s ease; }
#sfs-shop .sfs-card__btn:hover { filter:brightness(.92); }
#sfs-shop .sfs-card.is-hidden { display:none; }
#sfs-shop .sfs-empty { grid-column:1/-1; text-align:center; opacity:.6; padding:1.5rem 0; }
/* ================= MOBILE / TABLET ================= */
@media (max-width:1024px){
/* keep the two-column row; the nav becomes a thin dot rail on the left */
#sfs-shop .sfs-body { gap:.85rem; padding-right:.85rem; }
#sfs-shop .sfs-header { padding-left:calc(46px + .85rem); }
#sfs-shop .sfs-nav { flex:0 0 46px; width:46px; align-items:center; gap:.9rem; }
#sfs-shop .sfs-logo { max-width:40px; margin:0 auto 1rem; }
#sfs-shop .sfs-nav__link { position:relative; width:40px; min-height:40px; padding:0;
border-left:0; background:transparent; justify-content:center; }
#sfs-shop .sfs-nav__link:hover { background:transparent; }
#sfs-shop .sfs-nav__dot { width:15px; height:15px; }
#sfs-shop .sfs-nav__label { display:none; }
#sfs-shop .sfs-nav__link.is-active .sfs-nav__dot { box-shadow:0 0 0 4px rgba(0,0,0,.08); }
/* active section reveals its name as a pill next to the dot */
#sfs-shop .sfs-nav__link.is-active .sfs-nav__label {
display:block; position:absolute; left:28px; top:50%; transform:translateY(-50%);
white-space:nowrap; background:var(–accent,var(–sfs-orange)); color:#fff;
padding:.3rem .65rem; border-radius:999px; font-size:.72rem; font-weight:700;
z-index:6; pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,.18); }
#sfs-shop .sfs-grid { grid-template-columns:1fr; gap:1rem; }
#sfs-shop .sfs-section__title { font-size:1.4rem; }
#sfs-shop .sfs-section__sub { font-size:1rem; }
}
@media (max-width:560px){
#sfs-shop .sfs-grid { grid-template-columns:1fr; }
#sfs-shop .sfs-card__imgwrap { width:70%; }
#sfs-shop .sfs-divider { gap:1rem; }
#sfs-shop .sfs-face img { width:46px; height:46px; }
#sfs-shop .sfs-face–1 img { width:58px; height:58px; }
/* scale the sticker group down on phones */
#sfs-shop .sfs-arch__item img { width:40px; height:40px; }
#sfs-shop .sfs-arch__item { margin-left:-10px; }
}
@media (prefers-reduced-motion:reduce){
#sfs-shop .sfs-face, #sfs-shop .sfs-logo img, #sfs-shop .sfs-arch__item,
#sfs-shop .sfs-arch__item img, #sfs-shop .sfs-skel, #sfs-shop .sfs-skel-dot { animation:none; }
}

DONATE

Help Create More Smiles

Every contribution helps strengthen our ability to deliver care, support families, and expand access to treatment across South Africa.

Donate Today