/* Global UI contract. Load after component styles; keep new shared sizing here.
   Material 3 baseline type scale, adapted to rem and responsive web layouts. */
:root {
  --app-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-font-sans-serif: var(--app-font);
  --bs-body-font-family: var(--app-font);
  --type-body: 1rem;
  --type-label: .875rem;
  --type-caption: .75rem;
  --type-title: 2rem;
  --type-display: 3.5625rem;
  --type-headline-medium: 1.75rem;
  --type-headline-small: 1.5rem;
  --type-title-large: 1.375rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --page-gutter: 2rem;
  --sidebar-width: 17.5rem;
  --content-width: 100rem;
  --control-height: 3rem;
  --field-height: 3.5rem;
  --radius-small: .5rem;
  --radius-medium: .75rem;
  --radius-large: 1rem;
  --radius-extra-large: 1.75rem;
  --surface: #fff;
  --on-surface-muted: #53635a;
  --outline: #a8b6ac;
  --elevation-1: 0 1px 3px #183c2514, 0 1px 2px #183c2510;
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { font-family: var(--app-font); font-size: var(--type-body); line-height: 1.5; letter-spacing: .03125rem; color: var(--text); }
button, input, select, textarea { font-family: inherit; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--app-font); font-weight: 500; letter-spacing: 0; overflow-wrap: anywhere; }
h1,.h1,.main h1,.main .market-title { font-size: var(--type-title); line-height: 1.25; }
h2,.h2,.main h2 { font-size: var(--type-headline-medium); line-height: 1.285714; }
h3,.h3 { font-size: var(--type-headline-small); line-height: 1.333333; }
h4,.h4,.main .section-title,.main .market-section-title,.main .card-soft h2,.main .checkout-card h2,.tracking-banner h2 { font-size: var(--type-title-large); line-height: 1.272727; }
h5,.h5,h6,.h6,.product-name,.category-copy h3,.quick-card h6 { font-size: 1rem; line-height: 1.5; font-weight: 500; }
.hero h1,.main .hero h1,.landing-hero h1 { font-size: var(--type-display); line-height: 1.122807; letter-spacing: -.015625rem; font-weight: 500; }
.product-detail-copy h1,.main .product-detail-copy h1,.store-hero h1 { font-size: var(--type-title); line-height: 1.25; }
p,.task-instructions,.detail-description { line-height: 1.5; }
small,.small,.form-text,.product-store,.category-footer,.site-footer-bottom { font-size: var(--type-caption); line-height: 1.333333; }
.form-label,.ui-label,.side-link,.btn,.btn-sm,.btn-lg,.table th,.table,.market-tagline,.market-inline-tag,.top-welcome,.product-store,.category-copy p,.market-explore,.site-footer p,.site-footer nav>a { font-size: var(--type-label); line-height: 1.428571; }
.form-label { display: block; font-weight: 500; letter-spacing: .00625rem; }
.ui-label,.top-welcome,.market-tagline,.category-copy p,.product-store { color: var(--on-surface-muted); }
.eyebrow,.step-kicker,.side-label,.workspace-heading>.ui-label,.platform-badge,.badge,.status-pill,.category-label,.sale-pill { font-size: var(--type-caption); line-height: 1.333333; letter-spacing: .03125rem; font-weight: 500; }
.ui-stat,.stat-card h3,.detail-price { font-size: var(--type-title); line-height: 1.25; font-weight: 500; font-variant-numeric: tabular-nums; }
.wallet-card .balance { font-size: 2.25rem; line-height: 1.222222; font-weight: 500; overflow-wrap: anywhere; }
.ui-value,.product-price,.task-reward { font-size: 1rem; line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; }
.form-control,.form-select,.form-control-sm,.form-select-sm,.form-control-lg,.form-select-lg,.input-group-text {
  font-family: var(--app-font); font-size: 1rem; line-height: 1.5; min-height: var(--field-height);
  border-radius: var(--radius-small); border-color: var(--outline); padding: .9375rem 1rem;
}
.form-select,.form-select-sm,.form-select-lg { padding-right: 2.75rem; }
textarea.form-control { min-height: 7rem; resize: vertical; }
.form-control::placeholder { color: var(--on-surface-muted); }
.form-control:focus,.form-select:focus { border-color: var(--forest); box-shadow: 0 0 0 2px var(--forest); }
.form-check { min-height: var(--control-height); padding-top: .75rem; padding-bottom: .75rem; }
.form-check-input { width: 1.25rem; height: 1.25rem; accent-color: var(--forest); }
.form-check-input:checked { background-color: var(--forest); border-color: var(--forest); }
.btn,.btn-sm,.btn-lg { min-height: var(--control-height); min-width: var(--control-height); padding: .75rem 1.5rem; border-radius: 999px; font-weight: 500; letter-spacing: .00625rem; gap: .5rem; }
.btn-forest,.btn-outline-forest { border: 1px solid var(--forest); }
.btn-forest:hover { box-shadow: var(--elevation-1); }
.btn:disabled,.btn.disabled { opacity: .55; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.wallet-card :focus-visible,.wallet-dark :focus-visible,.site-footer :focus-visible { outline-color: #fff; }
.mobile-menu,.product-wish,.add-cart,.site-socials a,.newsletter-input button { min-width: var(--control-height); min-height: var(--control-height); }
.product-wish button { min-width: var(--control-height); min-height: var(--control-height); }
.workspace-switch,.site-footer nav>a,.footer-whatsapp { min-height: var(--control-height); display: flex; align-items: center; }
.newsletter-input input { font-size: 1rem; min-height: var(--field-height); }
.newsletter-consent { min-height: var(--control-height); font-size: var(--type-caption); line-height: 1.5; }
.newsletter-consent input { width: 1.25rem; height: 1.25rem; }
.card-soft,.quick-card,.stat-card,.table-card,.task-card,.product-card,.category-card,.checkout-card,.vendor-order-card,.order-head,.order-summary {
  border-radius: var(--radius-large); border-color: var(--border); box-shadow: var(--elevation-1);
}
.hero,.wallet-card,.wallet-dark,.landing-hero,.auth-card,.success-panel { border-radius: var(--radius-extra-large); }
.quick-card,.stat-card,.task-card,.checkout-card,.order-summary { padding: var(--space-6); }
.mini-info,.proof-note { border-radius: var(--radius-medium); padding: var(--space-4); }
.hero,.wallet-card { padding: var(--space-8); min-height: 0; height: 100%; }
.hero { isolation: isolate; }
.hero-visual { z-index: -1; opacity: .18; pointer-events: none; }
.hero p { max-width: 60ch; }
.sidebar { width: var(--sidebar-width); padding: var(--space-6) var(--space-4); }
.side-link { min-height: var(--control-height); padding: .75rem 1rem; border-radius: 999px; }
.side-link i { font-size: 1.5rem; flex-shrink: 0; }
.sidebar .brand small,.site-footer .brand small { font-size: var(--type-caption); line-height: 1.333333; letter-spacing: .0625rem; }
.main { margin-left: var(--sidebar-width); max-width: var(--content-width); min-width: 0; padding: var(--space-6) var(--page-gutter) 4rem; }
body:has(.sidebar) .account-topbar,body:has(.sidebar) .site-footer,body:has(.sidebar) .site-page-copy { margin-left: var(--sidebar-width); }
.account-topbar { padding: var(--space-4) var(--page-gutter); min-height: 5rem; }
.app { min-height: calc(100dvh - 5rem); }
.row>*:not(.table-responsive),.d-flex>*,.site-footer-grid>*,.landing-hero>*,.product-detail>* { min-width: 0; }
.main p,.alert,.task-instructions,.proof-note,.product-name,.site-page-copy { overflow-wrap: anywhere; }
.table-responsive { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table th { white-space: nowrap; color: var(--on-surface-muted); font-weight: 500; }
.table td { overflow-wrap: anywhere; min-width: 7rem; }
.table-card .table>:not(caption)>*>*,.table>:not(caption)>*>* { padding: 1rem; vertical-align: middle; }
.table td .btn { margin-block: .125rem; }
.table td form { flex-wrap: wrap; }
.input-group { min-width: 0; }
.input-group>.form-control { min-width: 0; }
img,video,iframe { max-width: 100%; }
.auth-wrap { padding: var(--space-6) var(--space-4); min-height: 100dvh; }
.auth-card { width: min(100%,30rem); padding: var(--space-8); }
.site-footer { padding-inline: var(--page-gutter); }
.site-footer-grid { gap: var(--space-8); }
.site-footer nav>a { margin: 0; }
.mobile-menu { display: none; top: 1rem; left: 1rem; padding: .75rem; z-index: 1040; }
.nav-scrim { display: none; }
@media (max-width: 1199.98px) {
  :root { --page-gutter: 1.5rem; --type-display: 2.8125rem; }
  .hero h1,.main .hero h1,.landing-hero h1 { line-height: 1.155556; }
  .market-topbar,.tracking-heading,.order-head,.vendor-order-top { flex-wrap: wrap; }
  .site-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Retain Bootstrap's drawer breakpoint so every existing page shares it. */
@media (max-width: 991.98px) {
  .sidebar { width: min(var(--sidebar-width),calc(100vw - 4rem)); visibility: hidden; transform: translateX(-100%); z-index: 1035; }
  .sidebar.show { visibility: visible; transform: translateX(0); box-shadow: 0 8px 32px #0003; }
  .main { margin-left: 0; padding-top: 5.5rem; }
  body:has(.sidebar) .account-topbar,body:has(.sidebar) .site-footer,body:has(.sidebar) .site-page-copy { margin-left: 0; }
  .account-topbar { padding-left: 5rem; }
  body:has(.account-topbar) .main { padding-top: var(--space-4); }
  .mobile-menu { display: inline-flex; }
  body.nav-open { overflow: hidden; }
  .nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; background: #10251d66; border: 0; z-index: 1034; }
  .order-summary { position: static; }
}
@media (max-width: 599.98px) {
  :root { --page-gutter: 1rem; --type-title: 1.75rem; --type-headline-medium: 1.5rem; --type-display: 2.25rem; }
  .hero h1,.main .hero h1,.landing-hero h1 { line-height: 1.222222; }
  .main h1 { line-height: 1.285714; }
  .main h2 { line-height: 1.333333; }
  .main { padding-bottom: 2rem; }
  .hero,.wallet-card,.auth-card,.landing-hero,.landing-preview,.success-panel { padding: var(--space-6); }
  .main .card-soft.p-4,.main .card-soft.p-5,.main .wallet-dark.p-4,#campaignForm { padding: var(--space-4)!important; }
  .main>.d-flex,.main>form.d-flex,.main article>form.d-flex,.main .card-soft>form.d-flex { flex-wrap: wrap; gap: var(--space-3); }
  .hero .d-flex,.wallet-card .d-flex,.landing-actions { flex-wrap: wrap; }
  .hero .btn,.wallet-card .btn { flex: 1 1 auto; }
  .input-group>.btn { flex: 1 1 100%; margin: .5rem 0 0!important; border-radius: 999px!important; }
  .input-group>.form-control { border-radius: var(--radius-small)!important; }
  .site-footer-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }
  .site-footer { padding-block: 2rem; }
  .site-footer-bottom { padding-bottom: 4rem; }
  .market-search { grid-template-columns: auto minmax(0,1fr); }
  .product-detail-media,.product-detail-media img { min-height: 0; }
  .product-detail-media img { aspect-ratio: 1; object-fit: contain; }
  .payment-option { grid-template-columns: auto minmax(0,1fr); }
  .payment-option .payment-icon { display: none; }
  .table-card .table>:not(caption)>*>* { padding: .75rem; }
  .account-topbar-name { max-width: min(9rem,35vw); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition: none!important; animation: none!important; scroll-behavior: auto!important; }
}
@media print {
  .nav-scrim,.sidebar,.mobile-menu,.account-topbar { display: none!important; }
  .main { margin: 0; max-width: none; padding: 0; }
  .table-responsive { overflow: visible; }
}

.community-channels { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; padding:.75rem 1rem; background:var(--bg); }
body:has(.sidebar) .community-channels { margin-left:var(--sidebar-width); }
@media(max-width:991.98px) { body:has(.sidebar) .community-channels { margin-left:0; padding-left:5rem; } }