/* gs-cro.css — cross-sell strip + checkout order bump (2026-09-03).
   The one recommendation component, shared by the course landing ("Learners
   also bought"), the cart ("Students also enrolled in") and the checkout order
   bump. Loaded on those three pages. Uses only global brand tokens
   (gs-brand.css), so it renders the same everywhere. All selectors are scoped
   under .gsx so nothing leaks into unstyled chrome. */

.gsx .gsx-xsell{margin:28px 0 0}
.gsx .gsx-xsell-h{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.gsx .gsx-xsell-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.gsx .gsx-xsell-card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.gsx .gsx-xsell-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--line-strong)}
.gsx .gsx-xsell-art{display:block;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.gsx .gsx-xsell-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.gsx .gsx-xsell-card:hover .gsx-xsell-art img{transform:scale(1.04)}
.gsx .gsx-xsell-b{padding:12px 14px 0;flex:1}
.gsx .gsx-xsell-t{font-family:var(--display);font-weight:800;font-size:15px;line-height:1.28;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gsx .gsx-xsell-t:hover{color:var(--indigo)}
.gsx .gsx-xsell-price{margin-top:8px;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.03em;color:var(--ink)}
.gsx .gsx-xsell-price s{font-family:var(--body);font-size:13px;font-weight:600;opacity:.45;margin-left:6px}
.gsx .gsx-xsell-act{display:flex;align-items:center;gap:10px;padding:12px 14px 14px}
.gsx .gsx-xsell-act .btn{flex:1;text-align:center}
.gsx .gsx-xsell-act .btn.d-hidden{display:none}
.gsx .gsx-xsell-view{flex:none;font-size:13px;font-weight:700;color:var(--indigo);text-decoration:none;white-space:nowrap}
.gsx .gsx-xsell-view:hover{text-decoration:underline}

/* ---- checkout order bump: compact, one row, high-intent slot ---- */
.gsx .gsx-xsell-bump{margin:0 0 4px;background:var(--haldi-wash);border:1px solid rgba(245,179,1,.5);border-radius:14px;padding:16px}
.gsx .gsx-xsell-bump .gsx-xsell-grid{grid-template-columns:1fr;gap:10px}
.gsx .gsx-xsell-bump .gsx-xsell-card{flex-direction:row;align-items:center;background:var(--white);border-radius:12px;padding:8px}
.gsx .gsx-xsell-bump .gsx-xsell-art{width:64px;height:64px;aspect-ratio:1;border-radius:8px;flex:none}
.gsx .gsx-xsell-bump .gsx-xsell-b{padding:0 12px}
.gsx .gsx-xsell-bump .gsx-xsell-t{font-size:14px;-webkit-line-clamp:2}
.gsx .gsx-xsell-bump .gsx-xsell-price{margin-top:3px;font-size:15px}
.gsx .gsx-xsell-bump .gsx-xsell-act{padding:0;flex:none}
.gsx .gsx-xsell-bump .gsx-bump-add{white-space:nowrap;text-decoration:none}
.gsx .gsx-bump-head{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:-.02em;color:#6E5100;margin:0 0 12px}
.gsx .gsx-bump-head::before{content:"＋";font-size:18px;line-height:1}
.gsx .gsx-bump-busy{opacity:.55;pointer-events:none}

@media(max-width:560px){
  .gsx .gsx-xsell-grid{grid-template-columns:1fr}
  .gsx .gsx-xsell-bump .gsx-xsell-card{flex-wrap:wrap}
  .gsx .gsx-xsell-bump .gsx-xsell-act{width:100%}
  .gsx .gsx-xsell-bump .gsx-bump-add{width:100%;text-align:center}
}