@charset "utf-8";
/* ==========================================================================
   sg/home.css — home page additions on top of the coder's top.css.
   Brands without a logo in Admin (and no coder photo) show their initial.
   ========================================================================== */
.sg-brand-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--c-warm);
    border: 1px solid var(--c-line);
    border-radius: 50%;
    color: var(--c-ink);
    font-size: .32rem;
    font-weight: 500;
    letter-spacing: .02em;
}

/* Hero slides now carry event names (one long line, not the coder's <br> lines): slick sizes the
   slide a little wider than the viewport on SP, so keep the title inside the screen. */
.top-hero_title { max-width: calc(100vw - 2 * var(--side)); overflow-wrap: break-word; }
/* PC: the title sits over the left of the slide image — keep a long event name to that half so it wraps instead
   of running across the picture (2026-10-28). */
@media (min-width: 768px) { .top-hero_title { max-width: 50%; } }

/* Ranking / New Arrivals: slick's own CSS centres .slick-track (margin: 0 auto), so a row with fewer cards
   than slots (e.g. 2 new arrivals on PC's 4) sat in the middle. Keep the cards left-aligned. */
.top-products_slider .slick-track { margin-left: 0; margin-right: 0; }