/* =========================================================
   BB Shop List — [bb_shop_list] | benaiabarabi.com
   Standalone. Prefix: .bbsp | RTL | black · white · #00FFE9
   Font: inherited from the site's Elementor Kit
   ========================================================= */

.bbsp{
  --bbsp-black:#000000;
  --bbsp-ink:#06121f;
  --bbsp-white:#ffffff;
  --bbsp-accent:#00FFE9;
  --bbsp-muted:rgba(255,255,255,.62);
  --bbsp-dim:rgba(255,255,255,.4);
  --bbsp-line:rgba(255,255,255,.14);
  --bbsp-line-strong:rgba(255,255,255,.32);
  --bbsp-font:'Hammer Pro GX','hammerprogx',Heebo,sans-serif;
  --bbsp-ease:cubic-bezier(.16,1,.3,1);

  font-family:var(--bbsp-font);
  background:var(--bbsp-black);
  color:var(--bbsp-white);
  direction:rtl;
  width:100vw;
  margin-inline:calc(50% - 50vw) !important;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
.bbsp *,.bbsp *::before,.bbsp *::after{box-sizing:border-box}
.bbsp img{display:block;max-width:100%}
.bbsp a{text-decoration:none !important}

.bbsp-wrap{width:min(1240px,100% - clamp(40px,8vw,128px));margin-inline:auto}
.bbsp-list{padding:clamp(24px,3.5vw,48px) 0 clamp(72px,9vw,140px)}
.bbsp-rows{list-style:none !important;margin:0 !important;padding:0 !important}

/* reveal */
.bbsp-rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--bbsp-ease),transform .8s var(--bbsp-ease)}
.bbsp-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .bbsp-rv{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ---------- row ---------- */
.bbsp-row{
  display:grid;
  grid-template-columns:clamp(120px,12vw,160px) 1fr auto auto;
  grid-template-areas:"media main price cta";
  align-items:center;
  gap:clamp(20px,3vw,48px);
  padding:clamp(26px,3vw,38px) 4px;
  border-bottom:1px solid var(--bbsp-line);
  transition:border-color .4s var(--bbsp-ease);
}
.bbsp-row:first-child{border-top:1px solid var(--bbsp-line)}
@media (hover:hover) and (pointer:fine){
  .bbsp-row:hover{border-color:var(--bbsp-line-strong)}
}

/* media */
.bbsp-media{
  grid-area:media;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:4px;
  contain:layout paint;
  background:#0a0a0a;
}
.bbsp-media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:grayscale(20%) brightness(.92);
  transform:translateZ(0);
  transition:filter .5s var(--bbsp-ease),transform .6s var(--bbsp-ease);
}
@media (hover:hover) and (pointer:fine){
  .bbsp-row:hover .bbsp-media img{filter:none;transform:scale(1.05) translateZ(0)}
}

/* main */
.bbsp-main{grid-area:main;min-width:0}
.bbsp-kicker{
  display:block;
  color:var(--bbsp-dim);
  font-size:.82rem;font-weight:600;letter-spacing:.2em;
  margin-bottom:8px;
}
.bbsp .bbsp-name{
  font-family:var(--bbsp-font) !important;
  color:var(--bbsp-white) !important;
  font-size:clamp(1.2rem,2.2vw,1.8rem) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  margin:0 !important;padding:0 !important;
  transition:color .35s var(--bbsp-ease);
}
.bbsp .bbsp-name a{color:inherit !important;text-decoration:none !important}
@media (hover:hover) and (pointer:fine){
  .bbsp-row:hover .bbsp-name{color:var(--bbsp-accent) !important}
}
.bbsp-desc{
  color:var(--bbsp-dim) !important;
  font-size:.95rem;line-height:1.7;
  margin:10px 0 0;max-width:520px;
}

/* price */
.bbsp-price{
  grid-area:price;
  color:var(--bbsp-accent);
  font-size:clamp(1.25rem,2vw,1.7rem);
  font-weight:800;
  white-space:nowrap;
  text-align:left;
}
.bbsp-price del{
  color:var(--bbsp-dim);
  font-weight:500;
  font-size:.72em;
  margin-inline-start:10px;
}
.bbsp-price ins{text-decoration:none}

/* ---------- button ---------- */
.bbsp-cta{grid-area:cta}
.bbsp .bbsp-btn{
  display:inline-flex !important;
  align-items:center;
  gap:12px;
  background:transparent !important;
  border:1px solid var(--bbsp-white) !important;
  border-radius:999px !important;
  color:var(--bbsp-white) !important;
  font-family:var(--bbsp-font) !important;
  font-size:.98rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  padding:16px 30px !important;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:none !important;
  transition:background .35s var(--bbsp-ease),border-color .35s var(--bbsp-ease),color .35s var(--bbsp-ease);
}
.bbsp .bbsp-btn:hover,
.bbsp .bbsp-btn:focus-visible{
  background:var(--bbsp-accent) !important;
  border-color:var(--bbsp-accent) !important;
  color:var(--bbsp-ink) !important;
}
.bbsp .bbsp-btn:focus-visible{outline:2px solid var(--bbsp-accent) !important;outline-offset:3px}
.bbsp-arr{width:17px;height:17px;flex:none;transition:transform .35s var(--bbsp-ease)}
.bbsp .bbsp-btn:hover .bbsp-arr{transform:translateX(-5px)}

/* status */
.bbsp-status{
  display:inline-block;
  color:var(--bbsp-accent);
  font-size:.92rem;font-weight:800;letter-spacing:.16em;
  padding:16px 6px;white-space:nowrap;
}

/* add-to-cart states */
.bbsp .added_to_cart{display:none !important}
.bbsp .bbsp-btn.is-loading{opacity:.6;pointer-events:none}
.bbsp .bbsp-btn.is-added{
  background:var(--bbsp-accent) !important;
  border-color:var(--bbsp-accent) !important;
  color:var(--bbsp-ink) !important;
}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .bbsp-row{
    grid-template-columns:110px 1fr auto;
    grid-template-areas:"media main main" "media price cta";
    row-gap:12px;
  }
  .bbsp-price{text-align:right;align-self:center}
}

/* ---------- mobile ---------- */
@media (max-width:767px){
  .bbsp{width:100% !important;margin-inline:0 !important}
  .bbsp-row{
    grid-template-columns:96px 1fr;
    grid-template-areas:"media main" "media price" "cta cta";
    gap:10px 16px;
    padding:26px 0;
    text-align:right;
  }
  .bbsp-media{border-radius:6px}
  .bbsp-media img{filter:none}
  .bbsp-desc{display:none}
  .bbsp-price{align-self:start}
  .bbsp-cta{margin-top:4px}
  .bbsp .bbsp-btn{width:100%;justify-content:center;padding:17px 24px !important;font-size:1.02rem !important}
  .bbsp-status{padding:6px 0}
}