/************************************************************
 * RosyBox – Styles Front (scoped) — v2.5.1 (sprite + filtres responsive)
 ************************************************************/
.rfbox-wrap{
  --rose: var(--rf-accent, #eab0c0);
  --rose-2:#f7e8ed; --rose-3:#f4c9d3; --rose-dark:#cf8da0;
  --card:#fff; --ink:#221f26; --muted:#6b5a61; --line:#ece7ea; --ok:#2e7d32;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);
}

/* Layout */
.rfbox-grid{display:grid;grid-template-columns:420px 1fr;gap:20px;align-items:start}
@media (max-width: 1100px){ .rfbox-grid{grid-template-columns:1fr} }

.rfbox-left,.rfbox-right{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06); overflow:hidden;
}

/* LEFT (Rosy + Box) */
.rfbox-left{padding:16px}
.rfbox-rosy{display:flex;align-items:center;gap:12px;margin-bottom:12px}

/* Sprite Rosy : fallback local si la variable n'est pas fournie */
.rfbox-rosy-avatar-sprite{
  width:56px;height:56px;border-radius:10px;
  background-image: var(--rosy-sprite, url('rosy-sprite.png'));
  background-size:300% 200%;background-position:0% 0%;
  box-shadow:0 2px 8px rgba(0,0,0,.06)
}
/* États d’humeur (utilisés par le JS) */
.rosy-happy{background-position:0% 0%}
.rosy-love{background-position:50% 0%}
.rosy-wink{background-position:100% 0%}
.rosy-sad{background-position:0% 100%}
.rosy-angry{background-position:50% 100%}
.rosy-joy{background-position:100% 100%}

.rfbox-rosy-bubble{flex:1;background:#fff;border:1px solid var(--rose-3);border-radius:12px;padding:10px 12px;color:#444;box-shadow:0 3px 10px rgba(234,176,192,.2)}

.rfbox-counters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
.rfbox-count{font-size:.88rem;background:var(--rose-2);color:#844e60;border:1px dashed var(--rose-3);padding:6px 10px;border-radius:999px}
.rfbox-count.ok{background:#e8f5e9;color:#1b5e20;border-color:#c8e6c9}

.rfbox-box-area{
  position:relative;border:1px solid var(--rose-3);border-radius:14px;min-height:180px;
  background:linear-gradient(180deg,#fff,#faf5f7);padding:14px;overflow:hidden;
  box-shadow:inset 0 -12px 24px rgba(0,0,0,.04)
}
.rfbox-chips{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:2}
.rfbox-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--rose-3);border-radius:999px;padding:6px 10px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.rfbox-chip-img{width:26px;height:26px;border-radius:6px;object-fit:cover}
.rfbox-chip-name{font-size:.9rem}
.rfbox-chip-x{cursor:pointer;border:none;background:transparent;color:#a03c58;font-weight:700;line-height:1;font-size:16px;padding:0 4px}
.rfbox-chip-x:focus{outline:2px solid var(--rose-3);outline-offset:2px}

.rfbox-totals{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.rfbox-totals>div{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.rfbox-discount.hidden{display:none}
.rfbox-add-btn{margin-top:10px;width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--rose-3);background:var(--rose);color:#fff;font-weight:700;cursor:not-allowed;opacity:.65;transition:.2s}
.rfbox-add-btn.enabled{cursor:pointer;opacity:1}
.rfbox-add-btn:hover.enabled{background:var(--rose-dark)}

/* RIGHT (Toolbar + Grid) */
.rfbox-right{display:flex;flex-direction:column}

/* Toolbar : sticky + responsive */
.rfbox-toolbar{
  position:sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid var(--line);
  padding:12px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.rfbox-tabs{display:flex;gap:8px;flex-wrap:wrap}
.rfbox-tab{border:1px solid var(--rose-3);background:#fff;color:#5c4152;border-radius:999px;padding:8px 14px;cursor:pointer}
.rfbox-tab.active{background:var(--rose-2)}

/* Filtres compacts : la zone se replie en chips défilables sur mobile */
.rfbox-filters{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.rfbox-price-filter{display:flex;align-items:center;gap:8px}
.rfbox-price-filter input[type="range"]{appearance:none;height:4px;background:#eee;border-radius:999px;width:140px}
.rfbox-price-filter input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px var(--rose);background:#fff;cursor:pointer
}
.rfbox-price-readout{color:var(--muted);font-size:.9rem;min-width:140px;text-align:right}
.rfbox-sort select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff;color:#3d2b33}

/* Subcats : desktop = grille de chips ; mobile = rail défilable */
.rfbox-subcats{
  display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--line); background:#fff;
}
.rfbox-subcats button{border:1px solid var(--line);background:#fff;color:#523a47;border-radius:999px;padding:6px 10px;cursor:pointer}
.rfbox-subcats button[aria-pressed="true"]{background:var(--rose-2);border-color:var(--rose-3)}

@media (max-width: 680px){
  .rfbox-toolbar{gap:8px}
  .rfbox-filters{width:100%;order:2;justify-content:space-between}
  .rfbox-price-filter{flex:1;min-width:0}
  .rfbox-price-readout{min-width:auto;text-align:left;font-size:.85rem}
  .rfbox-subcats{
    padding:8px 10px; gap:6px; border-top:1px solid var(--line);
    display:flex; flex-wrap:nowrap; overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .rfbox-subcats::-webkit-scrollbar{display:none}
  .rfbox-subcats button{white-space:nowrap}
}

/* Grille produits */
.rfbox-grid-products{padding:14px; display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media(max-width:1200px){.rfbox-grid-products{grid-template-columns:repeat(4,1fr)}}
@media(max-width:980px){.rfbox-grid-products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.rfbox-grid-products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.rfbox-grid-products{grid-template-columns:1fr}}

.rfbox-card{border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;flex-direction:column;overflow:hidden;min-height:100%}
.rfbox-card img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.rfbox-card-body{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1}
.rfbox-name{font-weight:700;font-size:1rem;line-height:1.2}
.rfbox-vars{display:flex;gap:6px;overflow:auto;padding-bottom:4px}
.rfbox-var-btn{border:1px solid var(--rose-3);background:#fff;color:#5a3e4a;border-radius:999px;padding:6px 10px;cursor:pointer;white-space:nowrap;transition:.15s}
.rfbox-var-btn:hover{background:var(--rose-2)}
.rfbox-var-btn.active{background:var(--rose-2);border-color:var(--rose)}
.rfbox-var-btn.disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.rfbox-price{color:#333;margin-top:auto}
.rfbox-cta{margin-top:8px}
.rfbox-add{width:100%;border:1px solid var(--rose-3);border-radius:10px;padding:8px 10px;background:var(--rose);color:#fff;font-weight:700;cursor:pointer;transition:.2s}
.rfbox-add.disabled{opacity:.5;cursor:not-allowed}
.rfbox-add:hover:not(.disabled){background:var(--rose-dark)}

/* Fly-to-box */
.rfbox-fly{position:fixed;left:0;top:0;transform:translate(-9999px,-9999px);width:80px;height:auto;border-radius:10px;z-index:999;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.2)}

/* Modal */
.rfbox-modal{position:fixed;inset:0;background:rgba(10,8,12,.55);display:flex;align-items:center;justify-content:center;z-index:1000}
.rfbox-modal.hidden{display:none}
.rfbox-modal-card{position:relative;background:#fff;border-radius:16px;padding:18px;max-width:480px;width:min(92vw,480px);box-shadow:0 12px 36px rgba(0,0,0,.25);text-align:left}
.rfbox-modal-x{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:18px;line-height:1}
.rfbox-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap}
.rfbox-modal-continue,.rfbox-modal-add{border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}
.rfbox-modal-continue{border:1px solid var(--rose-3);background:#fff;color:#5a3e4a}
.rfbox-modal-continue:hover{background:var(--rose-2)}
.rfbox-modal-add{border:1px solid var(--rose-3);background:var(--rose);color:#fff}
.rfbox-modal-add:hover{background:var(--rose-dark)}

/* Focus */
.rfbox-tab:focus,.rfbox-var-btn:focus,.rfbox-add:focus{outline:2px solid var(--rose-3);outline-offset:2px}

/* Rosy dans la modale (même sprite, format compact) */
.rfbox-modal-rosy {
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.rfbox-modal-rosy .rfbox-rosy-avatar-sprite {
  width:44px; height:44px; border-radius:10px;
  background-image: var(--rosy-sprite, url('rosy-sprite.png'));
  background-size:300% 200%; background-position:0% 0%;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}