/* Sound Check Recommendation Engine – frontend styles (RTL-first) */
:root{
  --scre-accent:#ff8a00;
  --scre-accent-dark:#e67a00;
  --scre-ink:#13293d;
  --scre-line:#e8ecf1;
  --scre-bg:#fff;
  --scre-radius:14px;
  --scre-shadow:0 6px 24px rgba(19,41,61,.08);
}
.scre-title{font-size:1.35em;font-weight:800;color:var(--scre-ink);margin:0 0 14px}
section.scre-fbt,section.scre-acc{margin:28px 0;clear:both}

/* ---- Frequently bought together ---- */
.scre-fbt-wrap{background:var(--scre-bg);border:1px solid var(--scre-line);border-radius:var(--scre-radius);box-shadow:var(--scre-shadow);padding:18px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.scre-fbt-items{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.scre-fbt-item{position:relative;width:130px;text-align:center;display:flex;flex-direction:column;gap:6px}
.scre-fbt-item .scre-fbt-thumb img{width:110px;height:110px;object-fit:contain;border:1px solid var(--scre-line);border-radius:10px;background:#fff;margin:0 auto}
.scre-fbt-item.is-anchor .scre-fbt-thumb img{border-color:var(--scre-accent)}
.scre-fbt-name{font-size:.82em;line-height:1.3;color:var(--scre-ink);text-decoration:none;display:block;max-height:3.9em;overflow:hidden}
.scre-fbt-item.is-anchor .scre-fbt-name{font-weight:700}
.scre-fbt-price{font-weight:800;color:var(--scre-ink);font-size:.95em}
.scre-plus{align-self:center;font-size:1.6em;font-weight:800;color:#9db0c2}
.scre-fbt-check{position:absolute;top:-6px;inset-inline-start:-6px;z-index:2;cursor:pointer}
.scre-fbt-check input{position:absolute;opacity:0}
.scre-fbt-check span{display:block;width:22px;height:22px;border-radius:7px;border:2px solid var(--scre-accent);background:#fff;transition:.15s}
.scre-fbt-check input:checked+span{background:var(--scre-accent)}
.scre-fbt-check input:checked+span::after{content:"✓";color:#fff;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;height:100%}
.scre-fbt-item.scre-off .scre-fbt-thumb img,.scre-fbt-item.scre-off .scre-fbt-name,.scre-fbt-item.scre-off .scre-fbt-price{opacity:.35;filter:grayscale(1)}
.scre-fbt-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:210px}
.scre-fbt-total{font-size:1.05em;color:var(--scre-ink)}
.scre-fbt-total-num{font-weight:900;font-size:1.15em}
.scre-btn{background:var(--scre-accent);color:#fff;border:0;border-radius:999px;padding:13px 26px;font-size:1.05em;font-weight:800;cursor:pointer;transition:.15s;text-align:center}
.scre-btn:hover{background:var(--scre-accent-dark);transform:translateY(-1px)}
.scre-btn[disabled]{opacity:.6;cursor:wait;transform:none}
.scre-fbt-note{font-size:.78em;color:#7d8fa1;text-align:center}

/* ---- Accessories strip / cards ---- */
.scre-strip{display:grid;grid-auto-flow:column;grid-auto-columns:172px;gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.scre-card{scroll-snap-align:start;background:#fff;border:1px solid var(--scre-line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;transition:.15s}
.scre-card:hover{box-shadow:var(--scre-shadow);transform:translateY(-2px)}
.scre-card-link{text-decoration:none;display:flex;flex-direction:column;gap:8px}
.scre-card-img img{width:100%;height:120px;object-fit:contain}
.scre-card-name{font-size:.84em;line-height:1.35;color:var(--scre-ink);min-height:3.4em;overflow:hidden}
.scre-card-price{font-weight:800;color:var(--scre-ink)}
.scre-card-price del{color:#9db0c2;font-weight:400;margin-inline-start:6px}
.scre-card-price ins{text-decoration:none}
.scre-mini-add{background:#fff;border:2px solid var(--scre-accent);color:var(--scre-accent-dark);border-radius:999px;padding:8px 12px;font-weight:800;font-size:.88em;cursor:pointer;text-align:center;text-decoration:none;transition:.15s;display:block}
.scre-mini-add:hover{background:var(--scre-accent);color:#fff}
.scre-mini-add.scre-done{background:#1f9d55;border-color:#1f9d55;color:#fff;cursor:default}

/* ---- Checkout bump ---- */
.scre-bump{margin:14px 0;border:2px dashed var(--scre-accent);border-radius:12px;background:#fff8ef;padding:12px}
.scre-bump-label{display:flex;align-items:center;gap:12px;cursor:pointer;margin:0}
.scre-bump-check{position:absolute;opacity:0}
.scre-bump-box{flex:0 0 24px;width:24px;height:24px;border-radius:8px;border:2px solid var(--scre-accent);background:#fff;transition:.15s;position:relative}
.scre-bump-check:checked~.scre-bump-box{background:var(--scre-accent)}
.scre-bump-check:checked~.scre-bump-box::after{content:"✓";color:#fff;font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.scre-bump-thumb img{width:56px;height:56px;object-fit:contain;border-radius:8px;border:1px solid var(--scre-line);background:#fff}
.scre-bump-txt{font-size:.95em;color:var(--scre-ink);line-height:1.45}
.scre-bump-price{color:var(--scre-accent-dark);font-weight:900}
.scre-bump.scre-busy{opacity:.55;pointer-events:none}

/* ---- Popup ---- */
.scre-overlay{position:fixed;inset:0;background:rgba(9,22,34,.55);z-index:99998;opacity:0;transition:.2s;backdrop-filter:blur(2px)}
.scre-modal{position:fixed;z-index:99999;inset-inline:0;margin-inline:auto;top:8vh;width:min(520px,calc(100vw - 28px));background:#fff;border-radius:18px;box-shadow:0 24px 64px rgba(9,22,34,.35);padding:20px;opacity:0;transform:translateY(14px);transition:.22s;direction:rtl;max-height:82vh;overflow:auto}
.scre-show{opacity:1;transform:none}
.scre-close{position:absolute;top:10px;inset-inline-start:10px;border:0;background:#f1f4f8;color:#51677c;width:34px;height:34px;border-radius:50%;font-size:17px;cursor:pointer;line-height:1}
.scre-close:hover{background:#e2e8ef}
.scre-pop-added{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--scre-line)}
.scre-pop-check{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#1f9d55;color:#fff;font-size:20px;font-weight:900;display:flex;align-items:center;justify-content:center}
.scre-pop-added-txt{display:flex;flex-direction:column;font-size:.95em;color:var(--scre-ink)}
.scre-pop-added-txt span{color:#1f9d55;font-weight:700;font-size:.9em}
.scre-freeship{margin-top:10px;background:#eef7ff;border:1px solid #cfe6fb;border-radius:10px;padding:8px 12px;font-size:.88em;color:#1667a8;font-weight:700;text-align:center}
.scre-pop-sub{margin:14px 0 10px;font-weight:800;color:var(--scre-ink)}
.scre-pop-items{display:flex;flex-direction:column;gap:10px}
.scre-pop-item{display:flex;align-items:center;gap:12px;border:1px solid var(--scre-line);border-radius:12px;padding:8px}
.scre-pop-thumb img{width:64px;height:64px;object-fit:contain;border-radius:8px}
.scre-pop-info{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.scre-pop-info a{font-size:.88em;color:var(--scre-ink);text-decoration:none;line-height:1.35}
.scre-pop-price{font-weight:800;font-size:.92em}
.scre-pop-add{flex:0 0 auto;padding:8px 16px}
.scre-pop-actions{display:flex;gap:10px;margin-top:16px}
.scre-pop-actions a{flex:1 1 50%;text-align:center;text-decoration:none;border-radius:999px;padding:12px 10px;font-weight:800;font-size:.95em;transition:.15s}
.scre-pop-go{background:var(--scre-accent);color:#fff}
.scre-pop-go:hover{background:var(--scre-accent-dark);color:#fff}
.scre-pop-stay{background:#f1f4f8;color:var(--scre-ink)}
.scre-pop-stay:hover{background:#e2e8ef}
.scre-toast{position:fixed;bottom:24px;inset-inline:0;margin-inline:auto;width:fit-content;max-width:90vw;background:#13293d;color:#fff;border-radius:999px;padding:11px 22px;font-weight:700;z-index:99999;opacity:0;transform:translateY(8px);transition:.25s}
.scre-toast.scre-show{opacity:1;transform:none}

@media (max-width:768px){
  .scre-fbt-wrap{flex-direction:column;align-items:stretch}
  .scre-fbt-items{justify-content:center}
  .scre-fbt-item{width:104px}
  .scre-fbt-item .scre-fbt-thumb img{width:92px;height:92px}
  .scre-strip{grid-auto-columns:150px}
  .scre-modal{top:auto;bottom:0;border-radius:18px 18px 0 0;width:100vw;max-height:78vh}
  .scre-pop-actions{position:sticky;bottom:0;background:#fff;padding-top:8px}
}

/* ---- Upsell ---- */
section.scre-upsell{margin:22px 0;clear:both}
.scre-upsell-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.scre-up-card{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--scre-line);border-radius:12px;padding:14px;text-decoration:none;transition:.15s}
.scre-up-card:hover{box-shadow:var(--scre-shadow);transform:translateY(-2px)}
.scre-up-img img{width:96px;height:96px;object-fit:contain}
.scre-up-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.scre-up-name{color:var(--scre-ink);font-size:.95em;line-height:1.4;font-weight:600}
.scre-up-price{font-weight:800;color:var(--scre-ink)}
.scre-up-diff{font-style:normal;color:#1f9d55;font-weight:700;font-size:.85em;margin-inline-start:6px}
.scre-up-cta{color:var(--scre-accent-dark);font-weight:800;font-size:.9em}

/* ---- Essential badge ---- */
.scre-ess-badge{display:inline-block;background:#fff3e6;color:#993c1d;border:1px solid #f0c9a8;border-radius:999px;font-size:.72em;font-weight:800;padding:2px 9px;margin-top:3px}

/* ---- Recently viewed ---- */
section.scre-recent{margin:22px 0;clear:both}
section.scre-recent[hidden]{display:none}