/* Typography, iconography and copy-refinement layer.
   Intentionally preserves the existing palette and application structure. */
:root{
  --font-ui:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
  --type-regular:400;
  --type-medium:500;
  --type-semibold:600;
  --type-bold:700;
  --type-extrabold:800;
}
html{font-size:16px;text-rendering:optimizeLegibility}
body,button,input,select,textarea{font-family:var(--font-ui)}
body{font-weight:var(--type-regular);line-height:1.72;letter-spacing:0;font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased}
:lang(ar) body,:lang(ar) button,:lang(ar) input,:lang(ar) select,:lang(ar) textarea{letter-spacing:0}
h1,h2,h3,h4,h5,h6,.brand b,.btn,.nav-scroll,.eyebrow,strong,b{font-family:var(--font-ui)}
h1,h2,h3{letter-spacing:-.018em;text-wrap:balance}
p{ text-wrap:pretty }
.ui-icon{width:1.25rem;height:1.25rem;display:block;flex:none;overflow:visible}
.ui-icon.sm{width:1rem;height:1rem}.ui-icon.lg{width:1.55rem;height:1.55rem}.ui-icon.xl{width:1.9rem;height:1.9rem}
.icon-btn{font-weight:var(--type-semibold)}
.icon-btn .ui-icon{width:1.2rem;height:1.2rem}
.announcement{font-weight:var(--type-medium);letter-spacing:0}
.announcement .container{gap:clamp(18px,3vw,42px)}
.brand{gap:12px}.brand b{font-size:19px;font-weight:var(--type-extrabold);letter-spacing:-.02em}.brand small{font-size:11px;font-weight:var(--type-medium);letter-spacing:0;line-height:1.45}
.brand-mark{font-family:var(--font-ui);font-weight:var(--type-extrabold)}
.global-search input{font-size:14px;font-weight:var(--type-medium);letter-spacing:0}
.global-search button{display:grid;place-items:center;font-size:inherit}
.nav-scroll{font-size:14px;font-weight:var(--type-bold);letter-spacing:0}
.nav-scroll a{letter-spacing:0}
.eyebrow{font-size:12px;font-weight:var(--type-bold);letter-spacing:.02em;text-transform:none}
.hero-copy h1{font-weight:var(--type-extrabold);line-height:1.2;letter-spacing:-.035em}
.hero-copy p,.page-hero p,.lead{font-weight:var(--type-regular);line-height:1.85}
.hero-metrics b{font-family:var(--font-ui);font-weight:var(--type-extrabold)}
.hero-metrics span{font-weight:var(--type-medium)}
.floating-card b{font-weight:var(--type-bold)}
.section-head h2,.market-banner h2,.newsletter h2,.store-cta h2{font-weight:var(--type-extrabold);letter-spacing:-.025em}
.section-head>a{font-weight:var(--type-semibold)}
.btn{font-weight:var(--type-bold);letter-spacing:0;gap:8px}
.btn .ui-icon{width:1.05rem;height:1.05rem}
.trust-grid>div,.category-cards>a{align-items:center}
.trust-grid>div>b,.category-cards>a>b,.assurances>div>b{display:grid;place-items:center}
.trust-grid strong,.category-cards span,.assurances strong{font-weight:var(--type-bold)}
.trust-grid small,.assurances small{font-weight:var(--type-regular);line-height:1.55}
.product-card h3{font-size:18px;font-weight:var(--type-bold);line-height:1.55;letter-spacing:-.015em}
.product-body>small{font-size:12px;font-weight:var(--type-medium);letter-spacing:0;text-transform:none}
.rating{display:flex;align-items:center;gap:5px;font-weight:var(--type-semibold)}
.rating .ui-icon{color:var(--amber);width:16px;height:16px}
.price-row strong,.price-box strong{font-family:var(--font-ui);font-weight:var(--type-extrabold);letter-spacing:-.02em}
.stock{font-weight:var(--type-semibold)}
.badge,.discount,.ksa-badge{font-family:var(--font-ui);font-weight:var(--type-bold);letter-spacing:0}
.card-actions .btn{min-height:42px}
.breadcrumbs{font-size:13px;font-weight:var(--type-medium)}
.page-hero h1,.product-info h1{font-weight:var(--type-extrabold);letter-spacing:-.03em}
.filters h3,.catalog-toolbar b,.form-card h2,.order-summary h2,.footer h3{font-weight:var(--type-bold)}
.filters label,.form-card label{font-weight:var(--type-semibold)}
input,select,textarea{letter-spacing:0}
.price-box>span{font-weight:var(--type-medium)}
.assurances .ui-icon{width:24px;height:24px}
.secure-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:13px;color:var(--muted);font-size:12px;line-height:1.6}
.secure-note .ui-icon{width:15px;height:15px}
.footer{font-size:14px}.footer p{line-height:1.85}.footer a{font-weight:var(--type-medium)}
.footer-bottom{font-size:12px;line-height:1.6}
.payment-marks .service-chip{font-family:var(--font-ui);font-weight:var(--type-semibold)}
.store-cta{padding:16px 0 68px}
.store-cta .container{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px 38px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.store-cta h2{margin:.25rem 0 .55rem;font-size:clamp(26px,3vw,40px)}
.store-cta p{margin:0;color:var(--muted);max-width:720px}
.store-cta-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.seller-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.seller-benefits span{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:14px;font-weight:var(--type-semibold)}
.seller-benefits .ui-icon{width:18px;height:18px}
.icon-circle{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(92,74,185,.08);color:var(--purple)}
.empty-state>.ui-icon{width:38px;height:38px;margin-inline:auto;color:var(--muted)}
.product-info .image-provenance{display:none}
.specs-grid table th{font-weight:var(--type-semibold)}
.review-summary small{font-weight:var(--type-medium)}
[dir="ltr"] body{font-family:"Cairo","Segoe UI",Arial,sans-serif}
@media(max-width:900px){
  .brand b{font-size:17px}.brand small{display:none}
  .store-cta .container{align-items:flex-start;flex-direction:column;padding:28px}
  .seller-benefits{grid-template-columns:1fr}
}
@media(max-width:600px){
  body{font-size:15px}.announcement .container{justify-content:flex-start;overflow:auto;white-space:nowrap}
  .hero-copy h1{font-size:clamp(34px,10vw,48px)}
  .section-head h2{font-size:26px}
  .store-cta{padding-bottom:44px}.store-cta .container{padding:24px 20px}.store-cta-actions{width:100%}.store-cta-actions .btn{flex:1}
}
.filters h3,.section-head>a,.floating-card>span{display:flex;align-items:center;gap:7px}
.hero-metrics{flex-wrap:wrap}
.market-banner .hero-actions{margin-top:22px}
.market-banner .btn.secondary{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.payment-marks .service-chip{border-color:rgba(255,255,255,.25);font-size:11px;padding:7px 10px}