/* Page styles for "FraG Products.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; }
input::placeholder { color: #5D6173; }
::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); } }
#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: headline, search, the "runs on" row, then the
   cards one after another. It tells the eye where to start; nothing loops. */
@keyframes fragRise { from { opacity: 0; transform: translateY(16px); } }
.frag-rise { animation: fragRise .62s cubic-bezier(.16, 1, .3, 1) backwards; }
.frag-rise:nth-of-type(1) { animation-delay: .04s; }
.frag-search.frag-rise { animation-delay: .12s; }
.frag-search + .frag-rise { animation-delay: .18s; }
.frag-card { animation: fragRise .66s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: .24s; }
.frag-card:nth-child(2) { animation-delay: .31s; }
.frag-card:nth-child(3) { animation-delay: .38s; }
.frag-card:nth-child(4) { animation-delay: .45s; }
.frag-card:nth-child(n+5) { animation-delay: .52s; }
/* The search box shows where the keyboard is: the field inside has no outline of its own. */
.frag-search { transition: border-color .18s ease, box-shadow .18s ease; }
.frag-search:focus-within { border-color: rgba(124, 58, 237, .55) !important; box-shadow: 0 0 0 4px rgba(124, 58, 237, .14), 0 18px 40px -30px rgba(17, 19, 28, .5) !important; }
@media (prefers-reduced-motion: reduce) { .frag-rise, .frag-card { animation: none; } }

/* With few or no results the footer stays at the bottom of the window instead of riding up the page. */
.frag-catalog { min-height: calc(100vh - 372px); min-height: calc(100dvh - 372px); }
/* The empty result settles in like the cards do, under the same search mark as the box above. */
.frag-empty { animation: fragRise .5s cubic-bezier(.16, 1, .3, 1) backwards; }
.frag-empty-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; background: #FFFFFF; border: 1px solid rgba(17,19,28,.08); color: #7C3AED; }
/* Cards: buttons and links press in a little, and a card reached by keyboard is as clear as one under the pointer. */
.frag-card button, .frag-card a { transition: transform .12s ease, filter .16s ease, border-color .16s ease, color .16s ease; }
.frag-card button:active, .frag-card a:not([aria-label]):active { transform: scale(.975); }
.frag-card:focus-within { border-color: rgba(124, 58, 237, .28) !important; }
@media (prefers-reduced-motion: reduce) { .frag-empty { animation: none; } .frag-card button:active, .frag-card a: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; } }