/* Shop By Category v4.0 – Full Image Circular Cards */
.sbc-wrap{box-sizing:border-box;padding:24px 0 16px}
.sbc-wrap *,.sbc-wrap *::before,.sbc-wrap *::after{box-sizing:inherit}

/* Header */
.sbc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px}
.sbc-title{margin:0;font-size:22px;font-weight:600;color:#111;line-height:1.2;word-break:break-word}
.sbc-showall{font-size:14px;color:#666;text-decoration:none;white-space:nowrap;transition:color .2s;font-weight:400}
.sbc-showall:hover{color:#111}

/* Scroll row */
.sbc-scroll{display:flex;gap:16px;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;scrollbar-width:none;-ms-overflow-style:none}
.sbc-scroll::-webkit-scrollbar{display:none}

/* Card wrapper */
.sbc-card-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none;cursor:pointer;touch-action:manipulation}

/* ── THE CARD – FULL IMAGE COVER ONLY ── */
.sbc-card{
  width:144px;
  height:144px;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease;
  will-change:transform;
  background:#f0f0f0;
  flex-shrink:0;
}

/* Full-cover image */
.sbc-card__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  transition:transform .4s ease;
  will-change:transform;
}

/* Overlay layer */
.sbc-card__overlay{
  position:absolute;
  inset:0;
  background:transparent;
  pointer-events:none;
  z-index:1;
  transition:background .3s ease;
}

/* Hover effects */
.sbc-card:hover{transform:translateY(-5px)}
.sbc-card:hover .sbc-card__img{transform:scale(1.1)}

/* Badge */
.sbc-badge{
  position:absolute;
  top:10px;
  right:-5px;
  z-index:3;
  background:#e84040;
  color:#fff;
  font-size:9px;
  font-weight:700;
  padding:3px 8px;
  border-radius:4px;
  transform:rotate(12deg);
  letter-spacing:.05em;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  pointer-events:none;
  line-height:1.4;
  white-space:nowrap;
}

/* Label under card */
.sbc-label{
  font-size:14px;
  font-weight:400;
  color:#222;
  text-align:center;
  line-height:1.35;
  max-width:152px;
  transition:color .2s ease;
  word-break:break-word;
}

/* Progress bar */
.sbc-progress{height:3px;background:#e5e5e5;border-radius:99px;margin-top:4px;position:relative;overflow:hidden}
.sbc-progress__fill{position:absolute;inset:0 auto 0 0;width:30%;background:#111;border-radius:99px;transition:width .12s linear}

/* ── Tablet ≤ 1024px ── */
@media(max-width:1024px){
  .sbc-wrap{padding:20px 0 12px}
  .sbc-card{width:130px;height:130px}
  .sbc-label{font-size:13px;max-width:138px}
  .sbc-title{font-size:20px}
  .sbc-scroll{gap:14px}
  .sbc-badge{font-size:8px;padding:2px 7px}
}

/* ── Tablet ≤ 768px ── */
@media(max-width:768px){
  .sbc-wrap{padding:18px 0 10px}
  .sbc-card{width:110px;height:110px}
  .sbc-label{font-size:12px;max-width:118px}
  .sbc-title{font-size:18px}
  .sbc-scroll{gap:12px}
  .sbc-badge{font-size:7px;padding:2px 6px;top:8px;right:-3px}
}

/* ── Mobile ≤ 480px ── */
@media(max-width:480px){
  .sbc-wrap{padding:14px 0 8px}
  .sbc-card{width:90px;height:90px}
  .sbc-label{font-size:11px;max-width:96px}
  .sbc-title{font-size:16px}
  .sbc-scroll{gap:10px}
  .sbc-badge{font-size:7px;padding:2px 5px;top:6px;right:-2px}
  .sbc-showall{font-size:12px}
}

/* ── Small Mobile ≤ 360px ── */
@media(max-width:360px){
  .sbc-card{width:78px;height:78px}
  .sbc-label{font-size:10px;max-width:84px}
  .sbc-title{font-size:15px}
  .sbc-scroll{gap:8px}
  .sbc-badge{font-size:6px;padding:1px 4px}
}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){
  .sbc-card,.sbc-card__img,.sbc-progress__fill,.sbc-showall,.sbc-label{transition:none!important}
  .sbc-card:hover{transform:none}
  .sbc-card:hover .sbc-card__img{transform:none}
}