/* ============================================================
   AG Plugins Grid — "dossier" edition
   ============================================================ */

.ag-pg{
  --ag-pg-bg:#F5F0E3;
  --ag-pg-bg-2:#EFE8D5;
  --ag-pg-card:#0F0F0E;
  --ag-pg-ink:#2A2A27;
  --ag-pg-muted:#7A7568;
  --ag-pg-gold:#E3C46A;
  --ag-pg-gold-deep:#96690F;
  --ag-pg-cream:#F5F0E3;
  --ag-pg-cols:3;
  --ag-pg-stagger:42px;
  --ag-pg-ease:cubic-bezier(.16,1,.3,1);
  --ag-pg-font:"Dana",system-ui,sans-serif;

  position:relative;isolation:isolate;overflow:hidden;
  direction:rtl;font-family:var(--ag-pg-font);
  background:var(--ag-pg-bg);
  padding:100px 0 118px;
}
.ag-pg *,.ag-pg *::before,.ag-pg *::after{box-sizing:border-box}
.ag-pg a{text-decoration:none}
.ag-pg button{font-family:inherit}
.ag-pg img{max-width:100%;height:auto;display:block}

/* ---------- Ambient ---------- */
.ag-pg__glow{
  position:absolute;inset:-8% -12% auto auto;z-index:-1;
  width:56vw;height:56vw;max-width:720px;max-height:720px;
  background:radial-gradient(circle,rgba(227,196,106,.5),transparent 66%);
  filter:blur(84px);pointer-events:none;
}
.ag-pg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(42,42,39,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(42,42,39,.05) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 0%,#000 6%,transparent 74%);
  mask-image:radial-gradient(ellipse 72% 58% at 50% 0%,#000 6%,transparent 74%);
}
.ag-pg__rule{
  position:absolute;top:0;right:0;left:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,105,15,.4),transparent);
}

.ag-pg__in{position:relative;max-width:1320px;margin:0 auto;padding:0 26px}

/* ---------- Header ---------- */
.ag-pg__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:38px;
  margin-bottom:40px;
}
.ag-pg__headMain{max-width:640px}
.ag-pg__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;border-radius:999px;
  border:1px solid rgba(42,42,39,.14);background:rgba(255,255,255,.55);
  font-size:12.5px;font-weight:700;color:var(--ag-pg-ink);
}
.ag-pg__eyebrow i{
  width:6px;height:6px;border-radius:50%;background:var(--ag-pg-gold-deep);
  box-shadow:0 0 0 0 rgba(150,105,15,.5);animation:agPgPulse 2.2s infinite;
}
@keyframes agPgPulse{
  70%{box-shadow:0 0 0 8px rgba(150,105,15,0)}
  100%{box-shadow:0 0 0 0 rgba(150,105,15,0)}
}
.ag-pg__title{
  margin:18px 0 0;padding:0;
  font-size:clamp(27px,3.4vw,42px);line-height:1.45;font-weight:800;
  color:var(--ag-pg-ink);letter-spacing:-.3px;
}
.ag-pg__hl{position:relative;isolation:isolate;color:#0F0F0E}
.ag-pg__hl::before{
  content:"";position:absolute;z-index:-1;
  inset:auto -6px .1em -6px;height:34%;
  background:var(--ag-pg-gold);border-radius:5px;
  transform:scaleX(0) skewX(-6deg);transform-origin:right center;
  transition:transform .85s var(--ag-pg-ease) .2s;
}
.ag-pg.is-in .ag-pg__hl::before{transform:scaleX(1) skewX(-6deg)}
.ag-pg__sub{margin:16px 0 0;font-size:15px;line-height:2.05;color:var(--ag-pg-muted)}

.ag-pg__count{
  flex:none;display:flex;align-items:flex-end;gap:12px;
  padding-bottom:6px;
}
.ag-pg__count b{
  font-size:clamp(40px,5vw,62px);font-weight:900;line-height:.85;
  color:transparent;-webkit-text-stroke:1.5px rgba(42,42,39,.28);
  direction:rtl;
}
.ag-pg__count span{
  font-size:11.5px;line-height:1.7;font-weight:700;
  color:var(--ag-pg-muted);padding-bottom:3px;
}

/* ---------- Filter ---------- */
.ag-pg__filter{margin-bottom:40px}
.ag-pg__filterBox{
  display:inline-flex;flex-wrap:wrap;gap:4px;
  padding:5px;border-radius:999px;
  background:var(--ag-pg-card);
  border:1px solid rgba(227,196,106,.2);
  box-shadow:0 16px 34px -22px rgba(15,15,14,.7);
}
.ag-pg__tab{
  position:relative;isolation:isolate;
  padding:10px 20px;border-radius:999px;cursor:pointer;
  border:0;background:transparent;
  font-size:13.5px;font-weight:700;color:rgba(245,240,227,.62);
  transition:color .35s var(--ag-pg-ease);
}
.ag-pg__tab::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--ag-pg-gold);
  transform:scale(.55);opacity:0;
  transition:transform .45s var(--ag-pg-ease),opacity .3s;
}
.ag-pg__tab:hover{color:var(--ag-pg-gold)}
.ag-pg__tab.is-on{color:#0F0F0E}
.ag-pg__tab.is-on::before{transform:scale(1);opacity:1}

/* ---------- Grid ---------- */
.ag-pg__grid{
  display:grid;
  grid-template-columns:repeat(var(--ag-pg-cols),minmax(0,1fr));
  gap:26px;
  align-items:start;
}

/* ---------- Card ---------- */
.ag-pg__card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  padding:14px;
  background:var(--ag-pg-card);
  border:1px solid rgba(227,196,106,.16);
  border-radius:24px 4px 24px 4px;
  margin-top:calc(var(--st,0) * var(--ag-pg-stagger));
  opacity:0;transform:translateY(34px);
  transition:transform .55s var(--ag-pg-ease),
             box-shadow .5s var(--ag-pg-ease),
             border-color .5s,opacity .55s;
}
.ag-pg.is-in .ag-pg__card{
  animation:agPgUp .85s var(--ag-pg-ease) forwards;
  animation-delay:calc(.12s + var(--d) * .11s);
}
@keyframes agPgUp{to{opacity:1;transform:translateY(0)}}

.ag-pg__card:hover{
  transform:translateY(-9px);
  border-color:rgba(227,196,106,.44);
  box-shadow:0 40px 70px -38px rgba(15,15,14,.85);
}

/* Light sweep */
.ag-pg__card::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border-radius:inherit;overflow:hidden;
  background:linear-gradient(115deg,transparent 38%,rgba(227,196,106,.16) 50%,transparent 62%);
  background-size:280% 100%;background-position:120% 0;
  opacity:0;transition:opacity .3s;
}
.ag-pg__card:hover::before{
  opacity:1;
  animation:agPgSweep 1.1s var(--ag-pg-ease) forwards;
}
@keyframes agPgSweep{
  from{background-position:120% 0}
  to{background-position:-60% 0}
}

/* Cursor spotlight */
.ag-pg__card::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
             rgba(227,196,106,.14),transparent 60%);
  opacity:0;transition:opacity .4s;
}
.ag-pg__card:hover::after{opacity:1}

.ag-pg__card.is-hide{display:none}

/* ---------- Corner brackets ---------- */
.ag-pg__bracket{
  position:absolute;z-index:6;width:26px;height:26px;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ag-pg-ease),transform .5s var(--ag-pg-ease);
}
.ag-pg__bracket--tr{
  top:-1px;right:-1px;
  border-top:2px solid var(--ag-pg-gold);
  border-right:2px solid var(--ag-pg-gold);
  border-radius:0 4px 0 0;
  transform:translate(-8px,8px);
}
.ag-pg__bracket--bl{
  bottom:-1px;left:-1px;
  border-bottom:2px solid var(--ag-pg-gold);
  border-left:2px solid var(--ag-pg-gold);
  border-radius:0 0 0 4px;
  transform:translate(8px,-8px);
}
.ag-pg__card:hover .ag-pg__bracket{opacity:1;transform:translate(0,0)}

/* ---------- Media ---------- */
.ag-pg__media{position:relative;padding:0 0 8px 8px}
.ag-pg__frame{
  position:absolute;inset:8px 8px 0 0;
  border:1px solid rgba(227,196,106,.42);
  border-radius:18px 3px 18px 3px;
  transition:inset .55s var(--ag-pg-ease),border-color .45s;
}
.ag-pg__card:hover .ag-pg__frame{
  inset:14px 14px -6px -6px;
  border-color:var(--ag-pg-gold-deep);
}
.ag-pg__shot{
  position:relative;z-index:2;overflow:hidden;
  aspect-ratio:1/1;
  border-radius:18px 3px 18px 3px;
  background:var(--ag-pg-bg-2);
}
.ag-pg__shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .95s var(--ag-pg-ease);
}
.ag-pg__card:hover .ag-pg__shot img{transform:scale(1.06)}
.ag-pg__scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(15,15,14,.055) 0 1px,
    transparent 1px 3px
  );
  opacity:.75;mix-blend-mode:multiply;
  transition:opacity .5s;
}
.ag-pg__card:hover .ag-pg__scan{opacity:0}

.ag-pg__badge{
  position:absolute;z-index:3;top:18px;right:10px;
  padding:6px 13px;border-radius:999px 4px 999px 4px;
  background:rgba(15,15,14,.86);color:var(--ag-pg-gold);
  border:1px solid rgba(227,196,106,.34);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  font-size:11.5px;font-weight:700;
}

/* ---------- Body ---------- */
.ag-pg__body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;flex:1;
  padding:16px 8px 4px;
}

/* Meta row */
.ag-pg__meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ag-pg__idx{
  flex:none;font-size:12px;font-weight:800;
  color:var(--ag-pg-gold);letter-spacing:.5px;
}
.ag-pg__leader{
  flex:1;height:1px;min-width:14px;
  background-image:linear-gradient(90deg,rgba(245,240,227,.3) 40%,transparent 0);
  background-size:5px 1px;background-repeat:repeat-x;
}
.ag-pg__price{
  flex:none;font-size:13px;font-weight:800;color:var(--ag-pg-cream);
}
.ag-pg__price--empty{font-size:11.5px;font-weight:600;color:rgba(245,240,227,.4)}

/* Name */
.ag-pg__name{margin:0;padding:0;font-size:18px;font-weight:800;line-height:1.6}
.ag-pg__name span{
  position:relative;isolation:isolate;display:inline;
  padding:2px 5px;color:var(--ag-pg-cream);
  transition:color .25s var(--ag-pg-ease) 0s;
}
.ag-pg__name span::before{
  content:"";position:absolute;z-index:-1;
  inset:0 -2px 0 -2px;
  background:var(--ag-pg-gold);border-radius:5px;
  transform:scaleX(0) skewX(-6deg);transform-origin:right center;
  transition:transform .45s var(--ag-pg-ease);
}
.ag-pg__card:hover .ag-pg__name span{
  color:#0F0F0E;
  transition-delay:.22s;
}
.ag-pg__card:hover .ag-pg__name span::before{transform:scaleX(1) skewX(-6deg)}

.ag-pg__ex{
  margin:11px 0 0;flex:1;
  font-size:13.5px;line-height:2;color:rgba(245,240,227,.56);
}

/* ---------- Persistent split action bar ---------- */
.ag-pg__acts{
  display:flex;align-items:stretch;
  margin-top:20px;
  border-radius:999px;
  border:1px solid rgba(227,196,106,.28);
  background:rgba(245,240,227,.045);
  overflow:hidden;
  transition:border-color .45s;
}
.ag-pg__card:hover .ag-pg__acts{border-color:rgba(227,196,106,.5)}
.ag-pg__split{
  flex:none;width:1px;align-self:stretch;
  background:rgba(227,196,106,.28);
}
.ag-pg__btn{
  position:relative;isolation:isolate;overflow:hidden;
  flex:1 1 50%;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 10px;
  font-size:13px;font-weight:700;white-space:nowrap;
  transition:color .35s var(--ag-pg-ease);
}
.ag-pg__acts--solo .ag-pg__btn{flex:1 1 100%}
.ag-pg__btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);
  transition:transform .45s var(--ag-pg-ease);
}
.ag-pg__btn:hover::before{transform:translateY(0)}
.ag-pg__btnIc{display:flex;transition:transform .4s var(--ag-pg-ease)}
.ag-pg__btnIc svg{width:16px;height:16px}
.ag-pg__btn:hover .ag-pg__btnIc{transform:scale(1.14)}

.ag-pg__btn--demo{color:rgba(245,240,227,.82)}
.ag-pg__btn--demo::before{background:rgba(245,240,227,.14)}
.ag-pg__btn--demo:hover{color:var(--ag-pg-cream)}

.ag-pg__btn--buy{color:var(--ag-pg-gold)}
.ag-pg__btn--buy::before{background:var(--ag-pg-gold)}
.ag-pg__btn--buy:hover{color:#0F0F0E}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .ag-pg{--ag-pg-stagger:0px}
  .ag-pg__head{align-items:flex-start;flex-direction:column;gap:24px}
  .ag-pg__count{padding-bottom:0}
}
@media (max-width:900px){
  .ag-pg{padding:74px 0 84px}
  .ag-pg__grid{gap:20px}
  .ag-pg__btn{font-size:12.5px;padding:12px 8px}
}
/* ---------- Progress bar + hint (desktop: hidden) ---------- */
.ag-pg__bar,
.ag-pg__hint{display:none}

/* ---------- Mobile: horizontal snap carousel ---------- */
@media (max-width:680px){
  .ag-pg__in{padding:0 18px}
  .ag-pg__ex{font-size:13px}

  .ag-pg__filterBox{
    display:flex;flex-wrap:nowrap;width:100%;
    overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;
  }
  .ag-pg__filterBox::-webkit-scrollbar{display:none}
  .ag-pg__tab{flex:none}

  /* Rail */
  .ag-pg__grid{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    /* Bleed to the screen edges so cards can peek. */
    margin:0 -18px;
    padding:4px 18px 6px;
  }
  .ag-pg__grid::-webkit-scrollbar{display:none}

  /* Card */
  .ag-pg__card{
    flex:0 0 78%;max-width:320px;
    margin-top:0;
    padding:12px;
    scroll-snap-align:center;
    opacity:1;transform:none;
  }
  .ag-pg__card:hover{transform:none}
  .ag-pg__card:hover .ag-pg__frame{inset:8px 8px 0 0}

  /* Trim the body so cards stay short. */
  .ag-pg__ex{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.9;
  }
  .ag-pg__body{padding:14px 6px 2px}
  .ag-pg__name{font-size:16.5px}
  .ag-pg__acts{margin-top:16px}

  /* Buttons always visible on touch. */
  .ag-pg__btn{padding:12px 8px;font-size:12.5px}

  /* Progress bar */
  .ag-pg__bar{
    display:block;position:relative;
    height:3px;margin:18px auto 0;width:64%;
    border-radius:99px;
    background:rgba(42,42,39,.12);
    overflow:hidden;
  }
  .ag-pg__bar i{
    position:absolute;top:0;right:0;height:100%;width:30%;
    border-radius:99px;
    background:linear-gradient(90deg,var(--ag-pg-gold-deep),var(--ag-pg-gold));
    transition:transform .18s linear,width .3s var(--ag-pg-ease);
  }

  /* Swipe hint */
  .ag-pg__hint{
    display:block;text-align:center;margin-top:10px;
    font-size:11.5px;font-weight:600;color:var(--ag-pg-muted);
    opacity:1;transition:opacity .5s var(--ag-pg-ease);
  }
  .ag-pg.has-scrolled .ag-pg__hint{opacity:0}
}

@media (max-width:400px){
  .ag-pg__card{flex:0 0 86%}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ag-pg *{animation:none !important;transition-duration:.01ms !important}
  .ag-pg__card{opacity:1;transform:none}
  .ag-pg__hl::before{transform:scaleX(1) skewX(-6deg)}
  .ag-pg__bracket{opacity:1;transform:none}
  .ag-pg__scan{display:none}
}