/* =====================================================================
   Alhassani Home Banners  (horizontal offers row on the homepage)
   Shared by the WordPress site and the Alhassani CMS preview.
   Motion = same as the old theme banners:
     - hover: background zooms to 1.05 (0.3s)
     - entrance: text fades in from the left (1s) when scrolled into view
   ===================================================================== */

.ahb-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  width:100%;
  margin:0;
}
@media (max-width:639px){
  .ahb-row{grid-template-columns:1fr;gap:12px}
}

.ahb-card{
  --ahb-c1:#0b1033;
  --ahb-c2:#2b2fd8;
  --ahb-accent:#ef233c;
  --ahb-txt:#ffffff;
  --ahb-btn-txt:#ffffff;
  --ahb-ov:.55;
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:10/3;
  border-radius:8px;
  color:var(--ahb-txt) !important;
  text-decoration:none !important;
  background:var(--ahb-c1);
  isolation:isolate;
  container-type:inline-size;
  -webkit-tap-highlight-color:transparent;
}
a.ahb-card{cursor:pointer}
.ahb-card *{box-sizing:border-box}

/* ---------- background (zoom layer) ---------- */
.ahb-zoom{
  position:absolute;inset:0;z-index:0;
  transition:transform .3s cubic-bezier(.3,.1,.58,1);
  backface-visibility:hidden;
  will-change:transform;
}
.ahb-card:hover .ahb-zoom,
.ahb-card:focus-visible .ahb-zoom{transform:scale(1.05)}

.ahb-bg{
  position:absolute;inset:0;
  background:linear-gradient(115deg,var(--ahb-c1) 0%,var(--ahb-c2) 100%);
}
.ahb-a-right .ahb-bg{background:linear-gradient(245deg,var(--ahb-c1) 0%,var(--ahb-c2) 100%)}
.ahb-bg::after{ /* soft accent glow on the decoration side */
  content:"";position:absolute;width:60%;height:160%;top:-30%;right:-12%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ahb-accent) 45%,transparent),transparent);
  opacity:.55;
}
.ahb-a-right .ahb-bg::after{right:auto;left:-12%}
.ahb-a-center .ahb-bg::after{right:20%;width:60%;opacity:.35}

.ahb-photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.ahb-photo::after{ /* readability overlay toward the text side */
  content:"";position:absolute;inset:0;
  background:var(--ahb-c1);
  opacity:var(--ahb-ov);
  -webkit-mask-image:linear-gradient(90deg,#000 25%,rgba(0,0,0,.35) 75%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 25%,rgba(0,0,0,.35) 75%,transparent 100%);
}
.ahb-a-right .ahb-photo::after{
  -webkit-mask-image:linear-gradient(270deg,#000 25%,rgba(0,0,0,.35) 75%,transparent 100%);
          mask-image:linear-gradient(270deg,#000 25%,rgba(0,0,0,.35) 75%,transparent 100%);
}
.ahb-a-center .ahb-photo::after{-webkit-mask-image:none;mask-image:none}

.ahb-deco{position:absolute;inset:0;pointer-events:none}

/* product picture (optional) - sits opposite the text */
.ahb-side{
  position:absolute;z-index:1;
  top:8%;bottom:8%;right:4%;
  height:84%;width:auto;max-width:42%;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.ahb-a-right .ahb-side{right:auto;left:4%}
.ahb-a-center .ahb-side{right:3%;max-width:26%;opacity:.95}

/* ---------- style: Neon Shapes ---------- */
.ahb-shapes{
  position:absolute;top:0;bottom:0;right:2%;
  width:40%;height:100%;
  color:#fff;opacity:.6;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ahb-accent) 80%,#fff));
}
.ahb-a-right .ahb-shapes{right:auto;left:2%;transform:scaleX(-1)}
.ahb-a-center .ahb-shapes{right:-10%;width:36%;opacity:.28}
.ahb-a-center .ahb-shapes + .ahb-shapes{right:auto;left:-10%;transform:scaleX(-1)}
.ahb-shapes + .ahb-shapes{display:none}
.ahb-a-center .ahb-shapes + .ahb-shapes{display:block}
.ahb-s-neon .ahb-deco::before{ /* light beams */
  content:"";position:absolute;inset:-20% -10%;
  background:repeating-linear-gradient(115deg,transparent 0 14%,rgba(255,255,255,.05) 14% 15.5%,transparent 15.5% 30%);
}

/* ---------- style: Retro Grid ---------- */
.ahb-s-grid .ahb-deco::before{ /* sun */
  content:"";position:absolute;
  width:30cqw;height:30cqw;max-height:none;
  right:9%;top:50%;transform:translateY(-62%);
  border-radius:50%;
  background:linear-gradient(180deg,#ffd166 0%,var(--ahb-accent) 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 52%),repeating-linear-gradient(180deg,#000 0 6%,transparent 6% 9.5%);
          mask-image:linear-gradient(180deg,#000 52%,transparent 52%),repeating-linear-gradient(180deg,#000 0 6%,transparent 6% 9.5%);
  opacity:.92;
}
.ahb-a-right.ahb-s-grid .ahb-deco::before{right:auto;left:9%}
.ahb-a-center.ahb-s-grid .ahb-deco::before{right:50%;transform:translate(50%,-62%);opacity:.35}
.ahb-s-grid .ahb-deco::after{ /* perspective floor grid */
  content:"";position:absolute;left:-50%;right:-50%;bottom:-2%;height:48%;
  background-image:
    linear-gradient(color-mix(in srgb,var(--ahb-accent) 70%,#fff) 1.5px,transparent 1.5px),
    linear-gradient(90deg,color-mix(in srgb,var(--ahb-accent) 70%,#fff) 1.5px,transparent 1.5px);
  background-size:4% 20%;
  transform:perspective(160px) rotateX(55deg);
  transform-origin:50% 100%;
  opacity:.6;
  -webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 95%);
          mask-image:linear-gradient(0deg,#000 10%,transparent 95%);
}

/* ---------- style: Sale Stripes ---------- */
.ahb-s-stripes .ahb-deco::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 12px,transparent 12px 26px);
}
.ahb-s-stripes .ahb-deco::after{ /* accent slab */
  content:"";position:absolute;top:-10%;bottom:-10%;right:-8%;width:36%;
  background:linear-gradient(180deg,var(--ahb-accent),color-mix(in srgb,var(--ahb-accent) 60%,#000));
  transform:skewX(-16deg);
  box-shadow:-10px 0 0 rgba(255,255,255,.12),-20px 0 0 rgba(255,255,255,.06);
  opacity:.95;
}
.ahb-a-right.ahb-s-stripes .ahb-deco::after{right:auto;left:-8%;transform:skewX(16deg);box-shadow:10px 0 0 rgba(255,255,255,.12),20px 0 0 rgba(255,255,255,.06)}
.ahb-a-center.ahb-s-stripes .ahb-deco::after{right:-22%;width:30%;opacity:.7}
.ahb-big{
  position:absolute;z-index:2;right:8%;top:50%;transform:translateY(-50%) rotate(-8deg);
  font-size:70px;font-size:20cqw;line-height:1;font-weight:900;
  color:rgba(255,255,255,.92);
  text-shadow:0 6px 0 rgba(0,0,0,.18);
  font-family:inherit;
  display:none;
}
.ahb-s-stripes .ahb-big{display:block}
.ahb-a-right .ahb-big{right:auto;left:8%;transform:translateY(-50%) rotate(8deg)}
.ahb-a-center .ahb-big{display:none !important}

/* ---------- style: Halftone Dots ---------- */
.ahb-s-dots .ahb-deco::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.32) 1.3px,transparent 1.7px);
  background-size:12px 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 30%,#000 100%);
}
.ahb-a-right.ahb-s-dots .ahb-deco::before{
  -webkit-mask-image:linear-gradient(270deg,transparent 30%,#000 100%);
          mask-image:linear-gradient(270deg,transparent 30%,#000 100%);
}
.ahb-a-center.ahb-s-dots .ahb-deco::before{
  -webkit-mask-image:radial-gradient(ellipse at center,transparent 35%,#000 90%);
          mask-image:radial-gradient(ellipse at center,transparent 35%,#000 90%);
}
.ahb-s-dots .ahb-deco::after{
  content:"";position:absolute;width:34cqw;height:34cqw;right:-6%;bottom:-40%;
  border-radius:50%;
  border:3cqw solid color-mix(in srgb,var(--ahb-accent) 85%,transparent);
  opacity:.75;
}
.ahb-a-right.ahb-s-dots .ahb-deco::after{right:auto;left:-6%}

/* ---------- style: Plain ---------- */
.ahb-s-plain .ahb-deco::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 55%);
}

/* ---------- text ---------- */
.ahb-content{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 6%;
  text-align:left;
  max-width:62%;
}
.ahb-has-side .ahb-content{max-width:60%}
.ahb-a-right .ahb-content{left:auto;right:0;align-items:flex-end;text-align:right}
.ahb-a-center .ahb-content{max-width:none;align-items:center;text-align:center;padding:0 12%}

.ahb-label,.ahb-title,.ahb-sub,.ahb-btn{display:block;font-family:inherit;margin:0}
.ahb-label{
  font-size:11px;font-size:max(10px,2.6cqw);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  color:var(--ahb-accent);
  margin-bottom:.8cqw;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.ahb-title{
  font-size:21px;font-size:5cqw;
  font-weight:800;line-height:1.05;text-transform:uppercase;letter-spacing:.005em;
  color:var(--ahb-txt);
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.ahb-sub{
  font-size:11px;font-size:max(10px,2.6cqw);
  font-weight:400;line-height:1.3;opacity:.88;
  margin-top:.8cqw;
  color:var(--ahb-txt);
}
.ahb-btn{
  display:inline-flex;align-items:center;gap:.8cqw;
  margin-top:1.8cqw;
  font-size:10px;font-size:max(9px,2.3cqw);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  padding:1.1cqw 2.4cqw;
  border-radius:999px;
  background:var(--ahb-accent);
  color:var(--ahb-btn-txt);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:filter .3s ease;
  white-space:nowrap;
}
.ahb-btn svg{width:1.1em;height:1.1em;flex:none;transition:transform .3s ease}
.ahb-card:hover .ahb-btn{filter:brightness(1.1)}
.ahb-card:hover .ahb-btn svg{transform:translateX(3px)}
.ahb-btn:dir(rtl) svg{transform:scaleX(-1)}
.ahb-card:hover .ahb-btn:dir(rtl) svg{transform:scaleX(-1) translateX(3px)}

/* ---------- entrance: fadeInLeft (same as theme / animate.css) ---------- */
@keyframes ahbFadeInLeft{
  from{opacity:0;transform:translate3d(-100%,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.ahb-js .ahb-content{opacity:0}
.ahb-js .ahb-card.ahb-in .ahb-content{animation:ahbFadeInLeft 1s ease both}

@media (prefers-reduced-motion:reduce){
  .ahb-zoom,.ahb-btn,.ahb-btn svg{transition:none}
  .ahb-card:hover .ahb-zoom{transform:none}
  .ahb-js .ahb-content{opacity:1}
  .ahb-js .ahb-card.ahb-in .ahb-content{animation:none}
}

/* RTL sites: keep the banner layout as designed */
.ahb-row,.ahb-card{direction:ltr}
.ahb-content [dir="rtl"],.ahb-rtl{direction:rtl}