<style>
:root {
  --paper:#f6f1e6;--paper-2:#efe7d4;--ink:#1a1714;--ink-2:#3b342b;--ink-3:#6e6354;--ink-4:#a89a82;
  --line:#d9cfb8;--line-2:#ebe2cd;--gold:#c89331;--gold-2:#a87617;--gold-soft:#f0d99a;
  --teal:#1b6e6a;--teal-2:#0f4c49;--teal-soft:#cde6e2;--up:#2f7d3d;--down:#b3271d;
  --shadow-sm:0 1px 0 rgba(255,255,255,.5) inset,0 1px 2px rgba(60,40,20,.06);
  --shadow-md:0 1px 0 rgba(255,255,255,.5) inset,0 6px 18px rgba(60,40,20,.08);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
body{font-family:'Cairo','Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.latin{font-family:'Inter',system-ui,sans-serif}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--gold-soft);color:var(--ink)}

/* Ticker */
@keyframes tickerRTL{from{transform:translateX(0)}to{transform:translateX(50%)}}
.ticker-track{animation:tickerRTL 90s linear infinite;display:flex;white-space:nowrap;will-change:transform}
.ticker-track:hover{animation-play-state:paused}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.35}}
.live-dot{animation:pulseDot 1.6s ease-in-out infinite}
@keyframes flash-up{0%{background:rgba(47,125,61,.18)}100%{background:transparent}}
@keyframes flash-down{0%{background:rgba(179,39,29,.18)}100%{background:transparent}}

/* Card hover */
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--gold)}

/* Listing image placeholder */
.ph-stripe{background:repeating-linear-gradient(135deg,rgba(0,0,0,.03) 0 8px,rgba(0,0,0,0) 8px 16px),linear-gradient(180deg,#ece2c9,#e4d8b9);color:var(--ink-3)}

/* Layout containers */
.container{max-width:1280px;margin:0 auto;padding:0 28px}
.container-lg{max-width:1320px;margin:0 auto;padding:0 24px}

/* Nav pills */
.nav-pill{padding:10px 16px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--ink-2);background:transparent;display:inline-block}
.nav-pill[aria-current="page"]{font-weight:700;color:var(--ink);background:var(--paper-2)}

/* Tab buttons */
.tab-btn{height:40px;padding:0 18px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font-size:14px;font-weight:500}
.tab-btn[aria-selected="true"]{border:0;background:var(--ink);color:var(--paper);font-weight:700}

/* Category tile */
.cat-tile{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:32px 24px;text-align:center;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:16}

/* SVG icons inline */
.icon{display:inline-block;vertical-align:middle;flex-shrink:0}

/* Responsive */
@media(max-width:767px){
  .hide-m{display:none!important}
  .container{padding:0 16px}
  .cat-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  .listings-grid{grid-template-columns:1fr!important}
  .suppliers-layout{grid-template-columns:1fr!important}
  .suppliers-cards{grid-template-columns:1fr!important}
  .footer-cols{grid-template-columns:1fr!important}
  .hero-search{flex-direction:column!important}
  .hero-search>*{width:100%!important;flex:none!important}
  .hero-divider{display:none!important}
  .hero-h1{font-size:36px!important}
  .hero-inner{padding:56px 16px 64px!important}
  .tabs-wrap{flex-wrap:wrap}
  .header-nav{display:none!important}
}
@media(min-width:768px) and (max-width:1023px){
  .cat-grid{grid-template-columns:repeat(3,1fr)!important}
  .listings-grid{grid-template-columns:repeat(2,1fr)!important}
}
</style>
