/* System stories: routes from shop pages to landing pages (assets/helpers/system-stories.php). */
.ss-kicker{display:block;color:#c74b00;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.4}
.ss-play{display:inline-block;flex:none;width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent currentColor}

/* Family category banner: motion left, story right. */
.ss-banner{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);align-items:stretch;margin:0 0 26px;border:1px solid #e1dfda;background:#f8f7f4;color:#292929;text-decoration:none;font-family:Montserrat,Arial,sans-serif;overflow:hidden;transition:border-color .2s ease,background-color .2s ease}
.ss-banner__media{position:relative;display:block;min-height:188px;background:#fff;overflow:hidden}
.ss-banner__media video,.ss-banner__media img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .5s ease}
.ss-banner__copy{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px 30px}
.ss-banner .ss-title{font-size:26px;font-weight:700;letter-spacing:-.045em;line-height:1.12;color:#292929}
.ss-banner .ss-pitch{font-size:13px;line-height:1.6;color:#626262;max-width:560px}
.ss-banner .ss-cta{display:inline-flex;align-items:center;gap:10px;margin-top:4px;font-size:12px;font-weight:700;color:#c74b00}
.ss-banner .ss-cta span{display:flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;background:#f9ede5;font-size:17px;font-weight:400;transition:background-color .2s ease,color .2s ease}
.ss-banner:hover{border-color:#c74b00;background:#faf7f1;color:#292929;text-decoration:none}
.ss-banner:hover .ss-cta span{background:#c74b00;color:#fff}
.ss-banner:hover .ss-banner__media video,.ss-banner:hover .ss-banner__media img{transform:scale(1.03)}
.ss-banner:focus-visible,.ss-card:focus-visible{outline:3px solid #c74b00;outline-offset:4px}

/* Product page card under the buying actions. */
.ss-card{display:flex;align-items:center;gap:14px;max-width:440px;margin:16px 0 4px;padding:8px 14px 8px 8px;border:1px solid #e1dfda;background:#f8f7f4;color:#292929;text-decoration:none;font-family:Montserrat,Arial,sans-serif;transition:border-color .2s ease,background-color .2s ease}
.ss-card__thumb{position:relative;flex:none;width:92px;height:68px;overflow:hidden;background:#fff}
.ss-card__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ss-card__thumb .ss-play{position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);color:#fff;border-width:7px 0 7px 11px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.ss-card__copy{flex:1;min-width:0}
.ss-card__copy strong{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin-top:2px}
.ss-card__copy small{display:block;font-size:11px;color:#777;line-height:1.4;margin-top:2px}
.ss-card__arrow{display:flex;align-items:center;justify-content:center;flex:none;width:27px;height:27px;border-radius:50%;background:#f9ede5;color:#c74b00;font-size:16px;transition:background-color .2s ease,color .2s ease}
.ss-card:hover{border-color:#c74b00;background:#faf7f1;color:#292929;text-decoration:none}
.ss-card:hover .ss-card__arrow{background:#c74b00;color:#fff}

/* Inline link inside category cards (sits above a stretched card link). */
.ss-inline{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#c74b00;text-decoration:none}
.ss-inline .ss-play{border-width:4px 0 4px 6px}
.ss-inline:hover,.ss-inline:focus-visible{color:#8f3500;text-decoration:underline}

@media(max-width:767px){
 .ss-banner{grid-template-columns:1fr}
 .ss-banner__media{min-height:0;aspect-ratio:2/1}
 .ss-banner__copy{padding:16px 16px 18px}
 .ss-banner .ss-title{font-size:21px}
 .ss-banner .ss-pitch{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.ss-banner,.ss-card,.ss-banner__media video,.ss-banner__media img{transition:none}.ss-banner:hover .ss-banner__media video,.ss-banner:hover .ss-banner__media img{transform:none}}