/* AXECAT Shop by Need - front styles. Responsive via container queries (works in any theme column / page builder). */
.axsbn-c{container-type:inline-size;container-name:axsbn;width:100%}
.axsbn,.axsbn *{box-sizing:border-box}
.axsbn{display:flex;align-items:center;gap:20px;width:100%;max-width:var(--axsbn-maxw,1200px);margin:var(--axsbn-mt,30px) auto var(--axsbn-mb,30px);padding:20px;background:var(--axsbn-bg)!important;border:1px solid var(--axsbn-border)!important;border-radius:var(--axsbn-r)}
.axsbn--hdr-top{flex-direction:column;align-items:stretch}
.axsbn--hdr-top .axsbn-head{flex:none}
.axsbn-head{flex:0 0 200px;max-width:100%}
.axsbn-title{margin:0 0 6px;padding:0;font-size:var(--axsbn-fst);font-weight:700;line-height:1.2;color:var(--axsbn-title)!important}
.axsbn-sub{margin:0 0 14px;padding:0;font-size:var(--axsbn-fss);line-height:1.4;color:var(--axsbn-sub)!important}
.axsbn-view{display:inline-flex;align-items:center;gap:6px;font-size:calc(var(--axsbn-fss) + 1px);font-weight:600;color:var(--axsbn-view)!important;text-decoration:none;box-shadow:none}
.axsbn-view:hover{opacity:.8}

.axsbn-body{position:relative;flex:1;min-width:0}
.axsbn-list{display:flex;gap:var(--axsbn-gap);padding:6px 2px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.axsbn-list::-webkit-scrollbar{display:none}
.axsbn-list.is-dragging{scroll-behavior:auto;scroll-snap-type:none;cursor:grabbing}
.axsbn-list.is-dragging a{pointer-events:none}

.axsbn-card{position:relative;flex:0 0 calc((100% - (var(--axsbn-n) - 1) * var(--axsbn-gap)) / var(--axsbn-n));min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 8px 14px;border:1px solid var(--axsbn-cbdr);border-radius:var(--axsbn-r);text-align:center;text-decoration:none;color:var(--axsbn-text)!important;scroll-snap-align:start;transition:transform .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent;box-shadow:none}
.axsbn-img{display:block;width:min(var(--axsbn-is),100%);aspect-ratio:1/1;background:var(--axsbn-imgbg);border-radius:var(--axsbn-ir);overflow:hidden;flex:none}
.axsbn-img img{display:block;width:100%;height:100%;margin:0;object-fit:cover;transition:transform .35s ease}
.axsbn-name{font-size:var(--axsbn-fsn);font-weight:600;line-height:1.3;color:var(--axsbn-text)!important;word-break:break-word}
.axsbn-badge{position:absolute;top:8px;right:8px;z-index:2;padding:2px 7px;font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.3px;border-radius:20px;background:var(--axsbn-badgebg);color:var(--axsbn-badgetx)}

.axsbn--hover-lift .axsbn-card:hover{transform:translateY(-4px)}
.axsbn--hover-zoom .axsbn-card:hover .axsbn-img img{transform:scale(1.12)}
.axsbn--shadow .axsbn-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.10)}
.axsbn-card:focus-visible,.axsbn-view:focus-visible,.axsbn-arrow:focus-visible{outline:2px solid var(--axsbn-view);outline-offset:2px}

/* grid layout */
.axsbn--grid .axsbn-list{display:grid;grid-template-columns:repeat(var(--axsbn-n),minmax(0,1fr));overflow:visible;padding:0}
.axsbn--grid .axsbn-card{flex:none}

/* arrows (PC only) */
.axsbn-arrow{position:absolute;top:50%;z-index:3;width:34px;height:34px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--axsbn-arrbg);color:var(--axsbn-arric);box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer;transform:translateY(-50%);opacity:0;transition:opacity .2s}
.axsbn-prev{left:-10px}
.axsbn-next{right:-10px}
.axsbn-body:hover .axsbn-arrow{opacity:1}
.axsbn-arrow[disabled]{opacity:0!important;pointer-events:none}
.axsbn--noscroll .axsbn-arrow{display:none}
@media (hover:none){.axsbn-arrow{display:none}}

/* tablet */
@container axsbn (max-width:900px){
  .axsbn{padding:18px;gap:16px}
  .axsbn-head{flex-basis:170px}
}
/* mobile: heading on top, tidy header row */
@container axsbn (max-width:600px){
  .axsbn{flex-direction:column;align-items:stretch;padding:14px;gap:10px}
  .axsbn-head{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px}
  .axsbn-title{margin:0}
  .axsbn-sub{order:3;width:100%;margin:0}
  .axsbn-card{padding:14px 6px 12px}
  .axsbn-prev{left:-6px}
  .axsbn-next{right:-6px}
}
@media (prefers-reduced-motion:reduce){.axsbn *{transition:none!important;scroll-behavior:auto!important}}
