* { box-sizing: border-box; } /* The new UAE Dirham currency symbol (U+20C3) — accepted by the Unicode Technical Committee in 2025 and scheduled for Unicode 18.0 (September 2026), but no browser, OS, or system font renders it natively yet. unicode-range restricts this font to that single codepoint, so it never affects any other character on the page — everything else still renders in Plus Jakarta Sans exactly as before. Once operating systems ship native support, this @font-face and its font-family reference below can simply be deleted; every price on the site already uses the correct character (see money() in currency.js), so nothing else needs to change when that day comes. Relative paths, not Url::asset() — this is a static .css file, never parsed by PHP, so a url() here is resolved by the browser relative to this stylesheet's own location, not the page's. */ @font-face { font-family: 'Dirham-Sans'; src: url('../fonts/dirham-sans.woff2') format('woff2'), url('../fonts/dirham-sans.woff') format('woff'), url('../fonts/dirham-sans.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+20C3; /* Matches the digits' visual height, not just their font-size — measured directly, not guessed: the raw glyph rendered at 1.36x the ink height of an adjacent digit at the same font-size, since size-adjust (like font-size itself) scales the em-square, not the visual glyph extent, and this font's own internal proportions are simply larger than Plus Jakarta Sans's digits at the same nominal size. 73% brings the two to a visual match; this scales every use of the symbol everywhere on the site from one place, rather than needing a size override at each of the many call sites that output it. */ size-adjust: 73%; } body { font-family: 'Plus Jakarta Sans', 'Dirham-Sans', sans-serif; background: var(--tc-cream, #FFF9F2); } html, body { overflow-x: clip; } /* Lets a section escape the page's own max-width container and span the full browser width, regardless of how deep it sits in the markup — used by the header, footer, and homepage hero when an admin turns on "Full width" for that section, rather than restructuring every page template's own layout to support it. html/body's own overflow-x:clip above is what keeps this from ever introducing a horizontal scrollbar. */ .tc-full-bleed { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } /* The top bar's own "hide once scrolled" opt-in. A prior version animated max-height/opacity/padding on this same element, which could desync under scroll load: three properties transitioning together on the element that also owns the strip's own padding meant a rapid, repeated toggle (see the rAF-throttled listener below) could catch the bar mid-transition, producing a visible flicker instead of a clean show/hide. Fixed by moving the strip's padding onto a dedicated .tc-topbar-inner wrapper (see header.php) and toggling this outer element's height with no transition at all — an instant, single-frame collapse has no mid-animation state to desync into. */ .tc-topbar-collapsible { height: auto; overflow: hidden; } .tc-topbar-collapsible.tc-topbar-hidden { height: 0; } .tc-topbar-collapsible.tc-topbar-hidden .tc-topbar-inner { display: none; } /* Mobile header search fix: on a narrow screen, the logo plus the account/notification/cart icons alone leave the search box only a sliver of the row to work with — its placeholder text was visibly cut off, and the autocomplete dropdown beneath it (sized to match its own parent, not the viewport) was squeezed right along with it. Wrapping the row and giving the search box a full line of its own fixes both at once, since the dropdown's width already follows its parent's automatically. */ @media (max-width: 639px) { .tc-header-row { flex-wrap: wrap; row-gap: 8px; } .tc-header-search-wrap { flex-basis: 100%; order: 3; } } /* 'Dirham-Sans' has to be repeated here, not just on body — a more specific font-family always wins over the inherited one, so a price shown inside .display loses the fallback chain entirely if it isn't listed again. 'Fraunces' and plain 'serif' both lack a U+20C3 glyph, and neither falls through to 'Dirham-Sans' unless told to here. */ .display { font-family: 'Fraunces', 'Dirham-Sans', serif; } .star { color: var(--tc-accent, #FF6F91); } .starmuted { color: #F0DCC8; } .mesh { background: radial-gradient(circle at 15% 20%, var(--tc-mesh-2, #FFB86B) 0%, transparent 45%), radial-gradient(circle at 85% 15%, var(--tc-mesh-3, #FF6F91) 0%, transparent 50%), radial-gradient(circle at 50% 90%, var(--tc-mesh-1, #7EE8C4) 0%, transparent 55%), var(--tc-cream, #FFF9F2); } /* A lightweight, CSS-only firework-burst effect for the homepage hero when no banner has been configured yet -- keeps that space from reading as broken or forgotten while an admin sets one up, without pulling in any animation library or canvas/JS overhead on the highest-traffic page of the storefront. Each spark is just a small dot that expands outward from the center and fades, staggered across a handful of directions and delays so they read as a continuous, gentle sparkle rather than one obvious repeating loop. */ .hero-spark-field { position: absolute; inset: 0; overflow: hidden; } .hero-spark { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--tc-accent, #FF6F91); opacity: 0; animation: hero-spark-burst 3.2s ease-out infinite; } @keyframes hero-spark-burst { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) translateX(0) scale(0.6); } 15% { opacity: 1; } 75% { opacity: 0.35; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) translateX(70px) scale(0.2); } } @media (prefers-reduced-motion: reduce) { .hero-spark { animation: none; opacity: 0; } } .hover\:bg-\[\#443830\]:hover { background-color: #443830; } /* --- Mini-cart: bounce feedback + mobile layout --- Two visible bounces in one animation cycle (25%/75% keyframes) rather than chaining two separate animation runs — same visual effect, no JS timing logic needed to detect when to fire a second pass. */ @keyframes cart-bounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-7px); } 50% { transform: translateY(0); } 75% { transform: translateY(-7px); } } #cart-trigger.cart-bounce { animation: cart-bounce 0.6s ease; } /* On narrow screens, the panel switches from "anchored to the cart icon's position" (which doesn't leave enough room on a phone-width screen for a fixed 340px panel without overflowing) to a viewport-anchored sheet instead — same content, positioned relative to the screen rather than the button. */ @media (max-width: 480px) { #mini-cart-panel { position: fixed !important; left: 8px !important; right: 8px !important; top: 56px !important; width: auto !important; max-width: none !important; } } /* --- Shared product-filters partial (Shop, category, search, vendor pages) --- */ .pf-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; } @media (max-width: 768px) { .pf-layout { grid-template-columns: 1fr; } } .pf-sidebar { background: white; border: 1px solid #F0DCC8; border-radius: 16px; padding: 16px; align-self: start; } .pf-facet-group { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #F0DCC8; } .pf-facet-group:last-of-type { border-bottom: none; margin-bottom: 8px; } .pf-facet-title { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tc-muted, #8A7D71); margin-bottom: 8px; } .pf-sidebar select, .pf-sidebar input[type="number"] { width: 100%; padding: 7px 9px; border: 1px solid #E5D5C3; border-radius: 8px; font-size: 12px; font-family: inherit; box-sizing: border-box; } .pf-clear-btn { width: 100%; padding: 8px; background: none; border: 1px solid #E5D5C3; border-radius: 8px; font-size: 12px; cursor: pointer; color: var(--tc-dark, #2B2320); } .pf-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 20px; } /* Pager items are real links (so they're crawlable) rather than