/* Attar Almadinah — shop page UI/UX fixes (loaded only by pages/shop.blade.php) */

/* LTR: the hero shade sits behind the text (RTL keeps the original 270deg) */
[dir=ltr] .page-hero::before{background:linear-gradient(90deg,rgba(29,51,36,.98) 0%,rgba(29,51,36,.9) 34%,rgba(29,51,36,.45) 68%,rgba(29,51,36,.15) 100%)}
@media(max-width:760px){.page-hero::before,[dir=ltr] .page-hero::before{background:linear-gradient(180deg,rgba(29,51,36,.45) 0%,rgba(29,51,36,.85) 100%)}}

/* results anchor clears the header when we scroll back to the top of the list */
.shop-results-anchor{display:block;height:0;scroll-margin-top:120px}

/* loading feedback while filters/sort/search fetch */
.shop-layout .products{transition:opacity .2s}
.shop-layout .products[aria-busy="true"]{opacity:.5;pointer-events:none}

/* product card: cleaner, consistent rows */
.shop-layout .product{display:flex;flex-direction:column}
.shop-layout .product .quick{display:none}
@media(hover:hover) and (min-width:761px){
  .shop-layout .product .quick{display:block;opacity:0;transition:opacity .2s}
  .shop-layout .product:hover .quick,.shop-layout .product:focus-within .quick{opacity:1}
}
.shop-layout .product .photo img{width:100%;object-fit:contain}
.shop-layout .product .photo img.is-placeholder{object-fit:contain;padding:18% 22%;opacity:.35;filter:grayscale(1);mix-blend-mode:normal}
.shop-layout .product-meta{min-width:0}
.shop-layout .product-meta .cat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.shop-layout .product-title{line-height:1.45}
.shop-layout .product-title .title-button{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.9em;text-decoration:none}
.shop-layout .product-title .title-button:hover{text-decoration:underline;text-underline-offset:4px}
.shop-layout .product-bottom{margin-top:auto}
.shop-layout .price{display:inline-flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.shop-layout .price-was{font-size:14px;color:var(--muted);margin-inline-start:6px}
.shop-layout .add.is-added{background:#3f6435;border-color:#3f6435;color:#fcf7e9}
.shop-layout .add[disabled]{background:transparent;border-color:#cbd0ba;color:var(--muted);cursor:not-allowed}
.shop-layout .product.is-out .photo img{opacity:.55;filter:grayscale(.6)}
.shop-layout .badge-off{font-weight:600}

/* filters: comfortable tap targets + visible state */
.price-chips button{min-height:40px;padding-inline:12px}
.price-chips button:hover{background:var(--surface)}
.f-cats button{text-align:start}
.f-cats button small{font-variant-numeric:tabular-nums}
.filter-btn .n{display:inline-block;line-height:20px}
.active-filters button{min-height:40px}
.active-filters button:hover{background:#d6e0c3}
.text-link{cursor:pointer}

/* mobile: 2-col cards stay readable and even */
@media(max-width:760px){
  .shop-layout .product-title{font-size:15px;margin-block:4px 10px}
  .shop-layout .product-meta{font-size:11px}
  .shop-layout .product-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shop-layout .price{font-size:21px}
  .shop-layout .price-was{font-size:12px;margin-inline-start:4px}
  .shop-layout .add{font-size:13px}
  .shop-bar{gap:8px}
  .sort-mini{font-size:12px}
  .sort-mini select{max-width:160px}
  .cat-strip{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
  [dir=rtl] .cat-strip{-webkit-mask-image:linear-gradient(to left,#000 88%,transparent);mask-image:linear-gradient(to left,#000 88%,transparent)}
  .cat-strip button{scroll-snap-align:start}
}
@media(min-width:761px) and (max-width:1099px){
  .shop-layout .product-title{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.shop-layout .products{transition:none}}