.shocx-cathub{ display:none; }

@media (max-width:720px){
  body.shocx-cathub-open{ overflow:hidden; }

  .shocx-cathub{
    display:flex; flex-direction:column; position:fixed; inset:0; z-index:9000;
    background:var(--c-surface);
    transform:translateY(100%); opacity:0; visibility:hidden; will-change:transform;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .shocx-cathub.shocx-anim-ready{
    transition:transform .34s cubic-bezier(.4,0,.2,1), opacity .26s ease, visibility 0s linear .34s;
  }
  .shocx-cathub.is-open{
    transform:none; opacity:1; visibility:visible;
  }
  .shocx-cathub.shocx-anim-ready.is-open{
    transition:transform .44s var(--ease-bouncy), opacity .3s ease, visibility 0s;
  }
  .shocx-cathub.is-dragging,
  .shocx-cathub.shocx-anim-ready.is-dragging,
  .shocx-cathub.shocx-anim-ready.is-open.is-dragging{ transition:none; }
  .shocx-cathub__top{ flex:none; height:56px; display:flex; align-items:center; gap:var(--space-2);
    padding:0 var(--space-3) 0 var(--space-2); border-bottom:1px solid var(--c-line); background:var(--c-surface); }
  .shocx-cathub__ib{ width:44px; height:44px; border:none; background:transparent; display:flex; align-items:center; justify-content:center;
    color:var(--c-ink); border-radius:var(--r-pill); cursor:pointer; transition:transform .14s var(--ease), background .16s var(--ease); }
  .shocx-cathub__ib:active{ transform:scale(.92); }
  .shocx-cathub__ib svg{ width:22px; height:22px; }
  .shocx-cathub__t{ flex:1; font-family:var(--font-display); font-weight:var(--fw-bold); text-transform:uppercase;
    letter-spacing:.05em; font-size:var(--text-lg); color:var(--c-ink); }

  .shocx-cathub__body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--space-4) var(--space-4) var(--space-5); }
  .shocx-cathub__eyebrow{ font-family:var(--font-display); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.12em;
    font-size:var(--text-xs); color:var(--c-muted); margin:var(--space-5) 2px var(--space-3); }
  .shocx-cathub__ic{ stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; }
  .shocx-cathub__hero{ position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/0.82;
    text-decoration:none; background:var(--c-warm); transition:transform .2s var(--ease); }
  .shocx-cathub__hero:active{ transform:scale(.985); }
  .shocx-cathub__hero .ph{ position:absolute; inset:0; background:url(../images/6b72d6152f45c978.webp) center 60%/cover no-repeat; }
  .shocx-cathub__hero .scr{ position:absolute; inset:0; background:linear-gradient(to top,rgba(14,14,16,.6),rgba(14,14,16,0) 56%); }
  .shocx-cathub__hero .eb{ position:absolute; top:14px; left:14px; font-family:var(--font-display); font-weight:var(--fw-medium);
    text-transform:uppercase; letter-spacing:.1em; font-size:var(--text-xs); color:#fff; background:rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:5px 10px; border-radius:var(--r-pill); }
  .shocx-cathub__hero .hn{ position:absolute; left:16px; bottom:15px; font-family:var(--font-display); font-weight:var(--fw-black);
    text-transform:uppercase; letter-spacing:.01em; font-size:var(--text-2xl); color:#fff; z-index:2; text-shadow:0 1px 12px rgba(0,0,0,.4); line-height:.95; }
  .shocx-cathub__hero .harr{ position:absolute; right:14px; bottom:16px; color:#fff; z-index:2; opacity:.85; }
  .shocx-cathub__hero .harr svg{ width:22px; height:22px; }
  .shocx-cathub__sale{ display:flex; align-items:center; justify-content:space-between; padding:0 18px; height:76px; border-radius:var(--r-lg);
    text-decoration:none; position:relative; overflow:hidden; margin-top:var(--space-2);
    background:linear-gradient(110deg,var(--c-accent),var(--c-accent-dark)); transition:transform .16s var(--ease); }
  .shocx-cathub__sale:active{ transform:scale(.985); }
  .shocx-cathub__sale .st{ font-family:var(--font-display); font-weight:var(--fw-black); text-transform:uppercase; letter-spacing:.04em;
    font-size:var(--text-2xl); color:#fff; line-height:1; z-index:2; position:relative; }
  .shocx-cathub__sale .ss{ font-family:var(--font-ui); font-size:var(--text-sm); color:rgba(255,255,255,.85); margin-top:3px; z-index:2; position:relative; display:block; }
  .shocx-cathub__sale .ph{ position:absolute; inset:0; left:auto; right:0; width:54%;
    background:url(../images/8628ab02c5f72244.webp) center/cover no-repeat; opacity:.5; mix-blend-mode:screen; }
  .shocx-cathub__sale .arr{ color:rgba(255,255,255,.85); z-index:2; } .shocx-cathub__sale .arr svg{ width:20px; height:20px; }
  .shocx-cathub__row{ display:flex; align-items:center; gap:var(--space-4); padding:11px 2px; border-bottom:1px solid var(--c-line);
    text-decoration:none; border-radius:10px; transition:transform .14s var(--ease); }
  .shocx-cathub__row:active{ transform:scale(.99); }
  .shocx-cathub__row .thumb{ width:58px; height:46px; border-radius:10px; background:var(--c-warm) center/cover no-repeat; flex:none; }
  .shocx-cathub__row .rn{ flex:1; font-family:var(--font-display); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.01em;
    font-size:var(--text-lg); color:var(--c-ink); }
  .shocx-cathub__row .chev,.shocx-cathub__srv .chev{ color:var(--c-muted); }
  .shocx-cathub__row .chev svg,.shocx-cathub__srv .chev svg{ width:18px; height:18px; }
  .shocx-cathub__srv{ display:flex; align-items:center; gap:var(--space-4); padding:12px 2px; border-bottom:1px solid var(--c-line);
    text-decoration:none; border-radius:10px; transition:transform .14s var(--ease); }
  .shocx-cathub__srv:active{ transform:scale(.99); }
  .shocx-cathub__srv .box{ width:40px; height:40px; border-radius:11px; background:var(--c-warm); display:flex; align-items:center; justify-content:center; flex:none; color:var(--c-ink); }
  .shocx-cathub__srv .box svg{ width:19px; height:19px; }
  .shocx-cathub__srv .nm{ font-family:var(--font-display); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.01em; font-size:var(--text-md); color:var(--c-ink); }
  .shocx-cathub__srv .sub{ font-family:var(--font-ui); font-weight:var(--fw-regular); color:var(--c-muted); font-size:var(--text-xs); margin-top:2px; display:flex; align-items:center; gap:6px; }
  .shocx-cathub__srv--show .box{ background:#fbf0f2; color:var(--c-accent); }
  .shocx-cathub__live{ width:7px; height:7px; border-radius:50%; background:#1e9e5a; box-shadow:0 0 0 3px rgba(30,158,90,.16); flex:none; }

  @media (hover:hover) and (pointer:fine){
    .shocx-cathub__row:hover,.shocx-cathub__srv:hover{ background:#fafafa; }
    .shocx-cathub__hero:hover,.shocx-cathub__sale:hover{ box-shadow:0 12px 30px rgba(0,0,0,.16); }
  }
  @media (prefers-reduced-motion:reduce){
    .shocx-cathub,.shocx-cathub.shocx-anim-ready,.shocx-cathub.shocx-anim-ready.is-open{ transition:visibility .01s linear; }
    .shocx-cathub__hero:active,.shocx-cathub__sale:active,.shocx-cathub__row:active,.shocx-cathub__srv:active,.shocx-cathub__ib:active{ transform:none; }
  }
}