/* SoftMall storefront — polish layer (loaded after product.php's own styles).
   Arabic/RTL support, calmer purposeful motion, press feedback, consistent focus. */

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --sf-ring:0 0 0 3px color-mix(in srgb,var(--purple) 35%,transparent);
}

/* ── Arabic: one Arabic-first face everywhere, no letter-spacing (it breaks joined letters) ── */
html[lang="ar"] body,
html[lang="ar"] body *{font-family:'Cairo','Plus Jakarta Sans',system-ui,sans-serif !important;letter-spacing:0 !important}
html[lang="ar"] .store-hero-name{font-weight:800;line-height:1.3}
html[lang="ar"] .pc-name{line-height:1.45}
html[lang="ar"] .brand{font-family:'Fraunces',serif !important}           /* the logo stays the logo */

/* ── RTL mirroring for things placed with physical left/right ── */
html[dir="rtl"] #cartDrawer{right:auto;left:0;border-left:0;border-right:1px solid var(--border2);transform:translateX(-100%)}
html[dir="rtl"] #cartDrawer.open{transform:translateX(0)}
html[dir="rtl"] .bi-arrow-left,html[dir="rtl"] .bi-arrow-right,
html[dir="rtl"] .bi-chevron-left,html[dir="rtl"] .bi-chevron-right{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .pm-close{right:auto;left:1rem}
html[dir="rtl"] .co-place .bi,html[dir="rtl"] .pc-add .bi{margin-right:0 !important;margin-left:.35rem}
html[dir="rtl"] .co-box,html[dir="rtl"] .cart-foot{text-align:right}

/* ── Language switch (same shape as the theme button) ── */
.sf-lang{font-weight:800;font-size:.9rem;font-family:'Cairo',sans-serif !important}

/* ── Top bar on phones: logo + buttons on one row, search full width below (nothing pokes off-screen) ── */
.gsearch{min-width:0}
@media (max-width:600px){
  nav{flex-wrap:wrap;row-gap:.55rem;gap:.5rem}
  nav .gsearch{order:5;flex:1 0 100%;margin:0}
  nav .theme-btn{width:40px;height:40px}
}

/* ── Press feedback: every button answers the finger immediately ── */
button,.pc-add,.co-place,.sp-cart-btn,.cat-box,.story{-webkit-tap-highlight-color:transparent}
button:not(:disabled),.co-place,.pc-add{transition:transform 140ms var(--ease-out),background-color .2s ease,box-shadow .2s ease,opacity .2s ease}
button:not(:disabled):active,.co-place:active,.pc-add:not(:disabled):active{transform:scale(.97)}
.co-place:hover,.theme-btn:hover{transform:none}
.theme-btn:hover i{transform:none}

/* ── Product cards: calm hover on real pointers only, no 3D tilt or constant pulsing ── */
.pc{transform-style:flat !important;transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s ease,opacity .36s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .pc:hover{transform:translateY(-3px) !important;box-shadow:0 12px 28px rgba(28,22,50,.12);border-color:var(--border2)}
  .pc:hover .pc-img img{transform:scale(1.04)}
}
.pc:active{transform:scale(.985) !important}
.pc-img img{transition:transform .5s var(--ease-out)}
.pc-low{animation:none !important}
.cat-box:hover .cat-ic{transform:none}
.store-hero::after{display:none}                         /* decorative shine sweep */
.store-hero:hover .store-hero-logo{transform:none}

/* Placeholder when a product has no photo: a quiet tile instead of an emoji */
.pc-ph{font-size:1.9rem;color:color-mix(in srgb,var(--purple) 45%,var(--muted));opacity:.75}
.pc-img:has(.pc-ph){background:linear-gradient(145deg,var(--card3),color-mix(in srgb,var(--purple) 7%,var(--card3)))}
.cat-ic .bi,.story-in .bi{font-size:1.35rem;line-height:1}

/* First time a card scrolls into view it rises in once (never on every re-render) */
.sf-rv{animation:none !important}
.sf-rv:not(.sf-in){opacity:0;transform:translateY(10px)}
.sf-rv.sf-in{opacity:1;transition:opacity .36s var(--ease-out),transform .36s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s ease}

/* ── Product sheet + checkout: rise in from slightly below, fade the backdrop ── */
#pmWrap,#coWrap{transition:opacity .2s ease}
#pmWrap .pm,#coWrap .co-box{transition:transform .28s var(--ease-out),opacity .22s var(--ease-out)}
@starting-style{
  #pmWrap,#coWrap{opacity:0}
  #pmWrap .pm,#coWrap .co-box{opacity:0;transform:translateY(14px) scale(.98)}
}
#cartDrawer{transition:transform .42s var(--ease-drawer) !important}

/* ── Cart count bump when something is added (state feedback) ── */
@keyframes sfBump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.sf-bump{display:inline-block;animation:sfBump .32s var(--ease-out)}

/* ── Browser surfaces that carry the brand too ── */
::selection{background:color-mix(in srgb,var(--purple) 26%,transparent)}
:focus-visible{outline:none;box-shadow:var(--sf-ring);border-radius:10px}
input:focus-visible,textarea:focus-visible{box-shadow:var(--sf-ring)}
html{scrollbar-color:color-mix(in srgb,var(--purple) 35%,transparent) transparent}
.pc-price,.cart-tot-v,#coTot,.pm-price{font-variant-numeric:tabular-nums}
/* "USD 25.00" must never split across lines or reorder inside Arabic text */
.pc-price span,.pm-price span{white-space:nowrap;display:inline-block;unicode-bidi:isolate}
.pc-price{unicode-bidi:plaintext}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .sf-rv:not(.sf-in){opacity:1;transform:none}
}