/* Wood Echome — motion & showcase layer
   Scroll reveal, centered real-photo showcase, product image micro-animations. */

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px) scale(.985);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s ease;
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

/* ---------- Centered showcase ---------- */
.we-showcase{
  max-width:900px;
  margin:34px auto 10px;
  padding:0 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
}
.we-showcase-head{text-align:center;max-width:640px}
.we-showcase-eyebrow{
  font-family:'El Messiri',sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.16em;
  color:#a5763f;text-transform:uppercase;
}
.we-showcase-title{
  font-family:'Marcellus','El Messiri',serif;
  font-size:clamp(1.5rem,4.6vw,2.3rem);
  margin:6px 0 8px;color:#261f1a;font-weight:700;
}
.we-showcase-sub{
  font-family:'El Messiri',sans-serif;font-size:.92rem;line-height:1.9;
  color:rgba(38,31,26,.68);margin:0;
}
.we-shot{
  margin:0;width:100%;max-width:760px;
  border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid rgba(38,31,26,.08);
  box-shadow:0 26px 60px -34px rgba(38,31,26,.55);
}
.we-shot img{
  display:block;width:100%;height:auto;max-height:min(78vh,620px);object-fit:cover;
  transform:scale(1.05);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1);
}
.we-shot.in img{transform:scale(1)}
.we-shot:hover img{transform:scale(1.04)}
.we-shot figcaption{
  font-family:'El Messiri',sans-serif;font-size:.82rem;font-weight:700;
  color:rgba(38,31,26,.7);text-align:center;padding:12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(232,220,200,.28));
}

/* ---------- Product cards ---------- */
.product-card{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}
@media(hover:hover){
  .product-card:hover{transform:translateY(-6px);box-shadow:0 26px 46px -28px rgba(38,31,26,.5)}
  .product-card:hover .p-slider-img.active{transform:scale(1.06)}
}
.product-card .p-slider-img{transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .6s ease}

/* ---------- Detail gallery swap (size change) ---------- */
@keyframes weGallerySwap{
  from{opacity:0;transform:scale(1.03)}
  to{opacity:1;transform:scale(1)}
}
.gallery-swap{animation:weGallerySwap .55s cubic-bezier(.22,1,.36,1)}

/* ---------- Size options ---------- */
.size-opt:active{transform:scale(.99)}

@media (prefers-reduced-motion:reduce){
  .reveal,.we-shot img,.product-card,.gallery-swap{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none;filter:none}
  .we-shot img{transform:none}
}

/* ---------- Showcase placement (split top/bottom) ---------- */
.we-showcase-top{margin:34px auto 26px}
.we-showcase-bottom{margin:8px auto 34px;gap:22px}

/* ---------- Tablet / iPad grids ---------- */
@media (min-width:700px) and (max-width:1180px){
  .cats-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
  }
  .cats-grid > .cat-card{flex:unset !important;width:auto !important;min-width:0 !important}
  .products-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px !important;
  }
  .products-grid > *{min-width:0}
  .we-showcase{max-width:760px}
}
@media (min-width:700px) and (max-width:900px){
  .cats-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* ---------- Sensible hover for cards ---------- */
@media(hover:hover) and (pointer:fine){
  .cat-card{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-color .35s ease}
  .cat-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -26px rgba(38,31,26,.5)}
  .cat-card:hover img{transform:scale(1.06)}
  .cat-card img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
  .product-card:hover{transform:translateY(-5px)}
}
@media(hover:none){
  .product-card:hover,.cat-card:hover{transform:none !important}
  .cat-card:active,.product-card:active{transform:scale(.985)}
}

/* Mobile categories: square cards, two per row. */
@media (max-width:699px){
  .cats-showcase-wrap{margin:16px 0 6px !important;padding:16px 12px 18px !important;border-radius:18px !important}
  .cats-showcase-title{font-size:1.15rem !important;margin-bottom:14px !important}
  .cats-showcase-title.fancy-under::after{width:72px !important;height:2px !important;margin-top:7px !important}
  .cats-grid,#catsGrid,#subCatsGrid{
    display:grid !important;direction:rtl !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;overflow:visible !important;
    padding:2px 0 4px !important;margin:0 !important;
  }
  .cats-grid > .cat-card,#catsGrid > .cat-card,#subCatsGrid > .cat-card{
    direction:rtl !important;flex:unset !important;width:auto !important;min-width:0 !important;max-width:none !important;
    border-radius:16px !important;
  }
  .cat-card-img{aspect-ratio:1/1 !important}
  .cat-card-name,.cat-card .cat-name{
    inset-inline:6px !important;bottom:6px !important;font-size:.78rem !important;line-height:1.4 !important;
    padding:8px 6px !important;border-radius:12px !important;white-space:normal !important;
  }
}

/* ---------- Showcase slider (صورة واحدة تتبدّل) ---------- */
.we-slider{
  position:relative;width:100%;max-width:760px;margin:0 auto;
  border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid rgba(38,31,26,.08);
  box-shadow:0 26px 60px -34px rgba(38,31,26,.55);
  touch-action:pan-y;
}
.we-slider-track{position:relative;width:100%;aspect-ratio:4/3;max-height:min(78vh,620px)}
@media(min-width:700px){.we-slider-track{aspect-ratio:16/10}}
.we-slide{
  position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transform:translateX(0);
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .7s ease;
}
.we-slide img{width:100%;height:100%;object-fit:cover;display:block}
.we-slide figcaption{
  position:absolute;inset:auto 0 0 0;
  font-family:'El Messiri',sans-serif;font-size:.85rem;font-weight:700;color:#fff;
  text-align:center;padding:26px 16px 14px;
  background:linear-gradient(180deg,rgba(38,31,26,0),rgba(38,31,26,.72));
}
.we-slide.on{opacity:1;visibility:visible;transform:translateX(0);z-index:2}
.we-slide.from-right{opacity:0;visibility:visible;transform:translateX(100%);transition:none}
.we-slide.from-left{opacity:0;visibility:visible;transform:translateX(-100%);transition:none}
.we-slide.out-left{opacity:0;visibility:visible;transform:translateX(-100%);z-index:1}
.we-slide.out-right{opacity:0;visibility:visible;transform:translateX(100%);z-index:1}
.we-slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.82);color:#261f1a;font-size:1.5rem;line-height:1;
  box-shadow:0 6px 18px rgba(38,31,26,.28);transition:background .25s,transform .25s;
}
.we-slider-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.we-prev{right:12px}
.we-next{left:12px}
.we-slider-dots{
  position:absolute;bottom:12px;left:0;right:0;z-index:4;
  display:flex;justify-content:center;gap:7px;
}
.we-slider-dots span{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);
  cursor:pointer;transition:width .3s,background .3s;
}
.we-slider-dots span.on{width:22px;border-radius:6px;background:#e8dcc8}
@media (prefers-reduced-motion:reduce){
  .we-slide{transition:opacity .3s ease!important;transform:none!important}
}