/* Smiles Gift Shop - homepage: trust bar, 3D toy slider, age tiles */

/* ---------- Trust bar ---------- */
.s-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 12px;padding:12px 16px;background:#1f2a44;color:#fff;font-size:.9rem;line-height:1.3}
.s-trust div{text-align:center}
.s-trust strong{display:block;color:#ffd43b}
.s-trust a{color:#fff;text-decoration:underline}
@media (max-width:767px){.s-trust{grid-template-columns:1fr 1fr;font-size:.8rem;padding:10px 12px}}

/* ---------- 3D toy slider ---------- */
.s3d{--r:230px;--cw:210px;position:relative;padding:36px 0 26px;background:radial-gradient(ellipse at 50% 0%,#fff3bf 0%,#ffe8cc 38%,#ffffff 78%);overflow:hidden;text-align:center}
.s3d-head{padding:0 16px}
.s3d-eyebrow{display:inline-block;background:#ff6b6b;color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:8px}
.s3d-head h2{margin:0 0 4px;font-size:clamp(1.6rem,4.5vw,2.6rem);font-weight:800;color:#1f2a44}
.s3d-head p{margin:0 0 6px;color:#495057}

/* Base (no JS / reduced motion): swipeable row of cards */
.s3d-stage{position:relative;margin:10px auto 0;max-width:1100px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.s3d-ring{display:flex;gap:16px;padding:10px 16px 18px;width:max-content}
.s3d-card{flex:0 0 220px;scroll-snap-align:center;text-align:center}
.s3d-card a{display:block;height:100%;padding:16px 14px 16px;border-radius:22px;text-decoration:none;color:#1f2a44;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 14px 28px rgba(31,42,68,.2)}
.s3d-card svg{width:100%;height:160px;display:block}
.s3d-card h3{margin:6px 0 4px;font-size:1.15rem;font-weight:800;color:#1f2a44}
.s3d-age{display:inline-block;font-size:.75rem;font-weight:700;background:#fff;color:#1f2a44;padding:2px 10px;border-radius:999px}
.s3d-go{display:inline-block;margin-top:10px;background:#1f2a44;color:#fff;border-radius:999px;padding:8px 18px;font-weight:700;font-size:.9rem}
.s3d-ctrl{display:none}

/* 3D mode (added by JS) */
.s3d-3d .s3d-stage{perspective:1200px;overflow:visible;height:380px;scroll-snap-type:none;touch-action:pan-y;cursor:grab}
.s3d-3d .s3d-ring{position:relative;display:block;width:100%;height:100%;padding:0;transform-style:preserve-3d;transform:translateZ(calc(var(--r) * -1)) rotateY(var(--a,0deg));will-change:transform}
.s3d-3d .s3d-card{position:absolute;left:50%;top:50%;width:var(--cw);height:310px;margin:-155px 0 0 calc(var(--cw) / -2);flex:none;transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--r));backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:filter .3s}
.s3d-3d .s3d-card:not(.is-front){filter:saturate(.8) brightness(.97)}
.s3d-3d .s3d-ctrl{display:flex;gap:12px;justify-content:center;margin-top:8px}
.s3d-ctrl button{width:44px;height:44px;border-radius:50%;border:0;background:#1f2a44;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.s3d-ctrl button:focus-visible,.s3d-card a:focus-visible{outline:3px solid #ff6b6b;outline-offset:3px}
@media (max-width:767px){
  .s3d{--r:175px;--cw:165px;padding:24px 0 16px}
  .s3d-card{flex-basis:170px}
  .s3d-card svg{height:130px}
  .s3d-3d .s3d-stage{height:320px}
  .s3d-3d .s3d-card{height:285px;margin-top:-142px}
}

/* ---------- Shop by age tiles ---------- */
.s-age{padding:26px 16px}
.s-age h2{text-align:center;font-weight:800;color:#1f2a44;margin:0 0 4px}
.s-age p{text-align:center;margin:0;color:#495057}
.s-age-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;max-width:1100px;margin:18px auto 0}
.s-age-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:20px 10px;border-radius:20px;text-decoration:none;color:#1f2a44;font-weight:800;background:var(--bg);box-shadow:0 6px 16px rgba(31,42,68,.12);transition:transform .2s ease}
.s-age-tile:hover{transform:translateY(-4px)}
.s-age-num{font-size:1.8rem;line-height:1.1}
.s-age-lbl{font-size:.8rem;font-weight:600}
@media (max-width:767px){.s-age-grid{grid-template-columns:repeat(2,1fr)}}

@media (prefers-reduced-motion:reduce){.s-age-tile{transition:none}}