/* ==========================================================
   THEA Oscar OrderLive — bandeau commercial vivant
   ========================================================== */
.too-orderlive {
    --too-primary:#ff2f87;
    --too-secondary:#ffbf00;
    --too-button:#e6e6e6;
    --too-button-text:#111111;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    width:100%;
    box-sizing:border-box;
    margin:22px 0;
    padding:12px;
    border:2px solid var(--too-primary);
    border-color:color-mix(in srgb, var(--too-primary) 70%, #fff);
    border-radius:20px;
    background:#fff8fc;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--too-secondary) 25%, transparent), transparent 28%),
        linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--too-primary) 7%, #fff) 52%, #fff 100%);
    box-shadow:0 14px 34px rgba(35,20,30,.13);
}
.too-orderlive::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:.28;
    background:repeating-linear-gradient(-45deg, transparent 0 16px, color-mix(in srgb, var(--too-secondary) 18%, transparent) 16px 18px);
}
.too-orderlive__topline {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:10px;
    padding:0 2px;
}
.too-orderlive__heading { display:flex; align-items:center; gap:10px; min-width:0; }
.too-orderlive__title { margin:0; font-size:clamp(18px,2vw,29px); line-height:1.05; color:#171116; letter-spacing:-.02em; }
.too-live-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
    padding:6px 9px;
    border-radius:999px;
    color:#fff;
    background:var(--too-primary);
    box-shadow:0 7px 18px color-mix(in srgb, var(--too-primary) 35%, transparent);
    font-size:11px;
    letter-spacing:.08em;
}
.too-live-dot { width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.2); }
.too-countdown { flex:0 0 auto; display:flex; align-items:center; gap:8px; font-size:11px; color:#51464d; }
.too-countdown strong { min-width:48px; padding:5px 8px; border-radius:8px; color:#111; background:var(--too-secondary); text-align:center; font-variant-numeric:tabular-nums; }
.too-orderlive__rail {
    display:grid;
    grid-template-columns:repeat(var(--too-columns,10), minmax(0,1fr));
    gap:7px;
    min-width:0;
}
.too-card {
    position:relative;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:7px 6px 8px;
    border:1px solid rgba(20,20,20,.09);
    border-radius:13px;
    background:rgba(255,255,255,.95);
    box-shadow:0 7px 18px rgba(35,20,30,.08);
    text-align:center;
}
.too-card__customer {
    width:100%;
    min-height:42px;
    max-height:42px;
    display:-webkit-box;
    overflow:hidden;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    font-size:10px;
    line-height:1.25;
    color:#372832;
}
.too-card__name { font-weight:500; }
.too-card__name--1 { color:#ff2f87; }
.too-card__name--2 { color:#8e44ad; }
.too-card__name--3 { color:#ff7a00; }
.too-card__name--4 { color:#0099cc; }
.too-card__name--5 { color:#2d9b5f; }
.too-card__action { font-weight:700; color:#261d24; }
.too-card__image-link { position:relative; display:block; width:100%; max-width:78px; aspect-ratio:1/1; }
.too-card__image { display:block; width:100%; height:100%; object-fit:cover; border-radius:10px; background:#f2f2f2; }
.too-card__flash {
    position:absolute;
    top:-5px;
    right:-7px;
    padding:3px 5px;
    border-radius:6px;
    color:#111;
    background:var(--too-secondary);
    font-size:8px;
    letter-spacing:.05em;
    transform:rotate(7deg);
    box-shadow:0 4px 10px rgba(0,0,0,.14);
}
.too-card__title {
    width:100%;
    min-height:28px;
    max-height:28px;
    display:-webkit-box;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    font-size:10px;
    line-height:1.35;
    color:#2f2830;
}
.too-card__price {
    width:100%;
    min-height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    line-height:1.2;
    color:var(--too-primary);
}
.too-card__price del { opacity:.45; font-size:.88em; }
.too-card__price ins { text-decoration:none; }
.too-card__button {
    width:100%;
    box-sizing:border-box;
    margin-top:auto;
    padding:7px 5px;
    border:1px solid rgba(17,17,17,.12);
    border-radius:9px;
    color:var(--too-button-text) !important;
    background:var(--too-button);
    text-decoration:none !important;
    font-size:11px;
    line-height:1.2;
    transition:transform .18s ease, box-shadow .18s ease;
}
.too-card__button:hover { transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.10); }
.too-orderlive--animated .too-live-dot { animation:tooPulse 1.25s infinite; }
.too-orderlive--animated::after {
    content:"";
    position:absolute;
    top:-50%;
    left:-35%;
    width:20%;
    height:200%;
    pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
    transform:rotate(18deg);
    animation:tooShine 7s infinite;
}
.too-orderlive.is-refreshing { opacity:.88; }
@keyframes tooPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.7);opacity:.45} }
@keyframes tooShine { 0%,68%{left:-35%} 86%,100%{left:125%} }
@media (max-width: 1280px) {
    .too-orderlive__rail {
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:minmax(130px, 16vw);
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scroll-snap-type:inline proximity;
        padding-bottom:5px;
    }
    .too-card { scroll-snap-align:start; }
}
@media (max-width: 700px) {
    .too-orderlive { padding:10px; border-radius:16px; }
    .too-orderlive__topline { align-items:flex-start; flex-direction:column; }
    .too-orderlive__heading { align-items:flex-start; flex-direction:column; gap:6px; }
    .too-orderlive__title { font-size:20px; }
    .too-countdown { width:100%; justify-content:space-between; }
    .too-orderlive__rail { grid-auto-columns:minmax(135px, 48vw); }
}
@media (prefers-reduced-motion: reduce) {
    .too-orderlive--animated .too-live-dot,
    .too-orderlive--animated::after { animation:none; }
}