/* Arbicano Hero Banners */
.arb-hb{--lw:300px;--gap:32px;--r:4px;--o:#F7931E;width:100%;margin:0;position:relative}
.arb-hb *{box-sizing:border-box}
.arb-hb a{text-decoration:none!important}
.arb-hb img{display:block;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;object-fit:cover;border-radius:0!important}
.arb-hb button{all:unset;box-sizing:border-box;cursor:pointer}
.arb-hb button:focus-visible,.arb-hb a:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.arb-hb .lay{display:grid;grid-template-columns:var(--lw) minmax(0,1fr);gap:var(--gap);transition:grid-template-columns .45s cubic-bezier(.2,.7,.2,1),gap .45s}
/* left: two small banners (show when the categories menu is closed) */
.arb-hb .left{display:grid;grid-template-rows:1fr 1fr;gap:18px;min-width:0;height:var(--h);transition:opacity .3s}
.arb-hb .left a,.arb-hb .mrow a{display:block;border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s}
.arb-hb .left a:hover,.arb-hb .mrow a:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(17,24,39,.12)}
.arb-hb.menu-open .left{opacity:0;pointer-events:none}
.arb-hb.expand.menu-closed .lay{grid-template-columns:0 minmax(0,1fr);gap:0}
.arb-hb.expand .left{overflow:hidden}
.arb-hb.expand.menu-closed .left{opacity:0;pointer-events:none}
/* slider */
.arb-hb .main{position:relative;min-width:0;height:var(--h);border-radius:var(--r);overflow:hidden;isolation:isolate}
.arb-hb .track{position:relative;display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.arb-hb .track::-webkit-scrollbar{display:none}
.arb-hb .sl{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:block;overflow:hidden}
.arb-hb .dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:6px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.75);backdrop-filter:blur(4px);z-index:2}
.arb-hb .dots button{width:8px;height:8px;border-radius:4px;background:rgba(17,24,39,.25);transition:width .3s,background .3s}
.arb-hb .dots button.on{width:22px;background:var(--dot,#111827)}
.arb-hb .arr{position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#111827;box-shadow:0 4px 14px rgba(17,24,39,.14);z-index:2;opacity:0;transition:opacity .2s,background .15s,color .15s}
.arb-hb .arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.arb-hb .arr.l{left:14px}.arb-hb .arr.r{right:14px}
.arb-hb .main:hover .arr,.arb-hb .arr:focus-visible{opacity:1}
.arb-hb .arr:hover{background:#111827;color:#fff}
/* small banners under the slider on tablets and phones */
.arb-hb .mrow{display:none;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.arb-hb .sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.arb-hb .mrow a{aspect-ratio:600 / 464}
@media (max-width:1024px){
  .arb-hb .lay{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  .arb-hb .left{display:none}
  .arb-hb.sm-tab .mrow{display:grid}
  .arb-hb .arr{display:none}
}
@media (max-width:767px){
  .arb-hb{--r:18px}
  .arb-hb .main{height:auto;border-radius:0;overflow:visible}
  .arb-hb .track{gap:10px;padding:0 7%}
  .arb-hb .sl{flex:0 0 86%;scroll-snap-align:center;aspect-ratio:1080 / 1296;height:auto;border-radius:var(--r);box-shadow:0 8px 22px rgba(17,24,39,.08)}
  .arb-hb.sm-tab .mrow{display:none}
  .arb-hb.sm-phone .mrow{display:grid}
  .arb-hb .dots{position:static;transform:none;justify-content:center;background:none;backdrop-filter:none;margin-top:10px;padding:0}
  .arb-hb .dots button{background:#D6D3CC}
  .arb-hb .dots button.on{background:var(--dotm,var(--o))}
}
@media (prefers-reduced-motion:reduce){.arb-hb *{transition:none!important}.arb-hb .track{scroll-behavior:auto}}
