/* Page styles for "FraG Product.dc.html", moved out of the page unchanged (the policy is style-src 'self'). */
:root { --frag-grain: none; --frag-grain-size: auto; }
/* Arabic: monospace micro-labels use wide tracking, which breaks Arabic letter joining; use the Arabic face, no tracking, readable size. */
[dir="rtl"] [style*="IBM Plex Mono"] { font-family: "IBM Plex Sans Arabic", "IBM Plex Mono", monospace !important; letter-spacing: 0 !important; font-size: max(12px, 1em) !important; text-transform: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: #F8F8FA var(--frag-grain); background-size: var(--frag-grain-size); -webkit-font-smoothing: antialiased; scrollbar-width: none; }
body::-webkit-scrollbar, html::-webkit-scrollbar { width: 0; height: 0; }
a { color: #7C3AED; text-decoration: none; }
a:hover { color: #A78BFA; }
::selection { background: #E9D5FF; color: #11131C; }
:focus-visible { outline: 2px solid #7C3AED; outline-offset: 3px; border-radius: 6px; }
@keyframes cartPop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes drawerIn { from { transform: translateX(var(--from, 24px)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuSheetIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes demoPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
#cart-lines::-webkit-scrollbar { width: 8px; }
#cart-lines::-webkit-scrollbar-thumb { background: rgba(17,19,28,.22); border-radius: 999px; }

/* The page settles in on arrival, like the Products page: the cover, the buying
   column, then the feature cards one after another. Nothing loops. */
@keyframes fragRise { from { opacity: 0; transform: translateY(16px); } }
.frag-rise { animation: fragRise .62s cubic-bezier(.16, 1, .3, 1) backwards; }
.frag-buy.frag-rise { animation-delay: .08s; }
.frag-feat { animation: fragRise .62s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: .2s; transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .2s ease, box-shadow .22s ease; }
.frag-feat:nth-child(2) { animation-delay: .26s; }
.frag-feat:nth-child(3) { animation-delay: .32s; }
.frag-feat:nth-child(n+4) { animation-delay: .38s; }
.frag-feat:hover { transform: translateY(-3px); border-color: rgba(124, 58, 237, .22) !important; box-shadow: 0 26px 44px -34px rgba(34, 28, 78, .5); }
/* Buttons in the buying column press in a little. */
.frag-buy button { transition: transform .12s ease, filter .16s ease, border-color .16s ease, color .16s ease; }
.frag-buy button:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .frag-rise, .frag-feat { animation: none; } .frag-feat:hover, .frag-buy button:active { transform: none; } }

/* Cart: a line settles in when it is added, and its picture answers the pointer. */
@keyframes cartLineIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.frag-cart-line { animation: cartLineIn .28s cubic-bezier(.22,1,.36,1) both; transition: border-color .18s ease, box-shadow .18s ease; }
.frag-cart-line:hover { border-color: rgba(17,19,28,.16) !important; box-shadow: 0 10px 24px -20px rgba(17,19,28,.5); }
@media (prefers-reduced-motion: reduce) { .frag-cart-line { animation: none; } }

/* "More from FraG": a card lifts and its cover moves in a little under the pointer or the keyboard. */
.frag-more { transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .2s ease, box-shadow .22s ease; }
.frag-more:hover, .frag-more:focus-within { transform: translateY(-3px); border-color: rgba(124, 58, 237, .22) !important; box-shadow: 0 30px 50px -36px rgba(34, 28, 78, .5); }
.frag-more-cover { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.frag-more:hover .frag-more-cover, .frag-more:focus-within .frag-more-cover { transform: scale(1.035); }
.frag-more a { transition: color .16s ease; }
@media (prefers-reduced-motion: reduce) { .frag-more, .frag-more-cover { transition: none; } .frag-more:hover, .frag-more:focus-within, .frag-more:hover .frag-more-cover, .frag-more:focus-within .frag-more-cover { transform: none; } }