/* Venco Marketplace — shared foundation for every screen.
   Screens are 393px-wide mobile frames lifted from the Figma file
   "Venco Marketplace"; values below are the design's own. */

@font-face {
  font-family: "Nohemi";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Nohemi-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Nohemi-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Nohemi-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Nohemi";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Nohemi-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/DMSans-Variable.ttf") format("truetype");
}

:root {
  /* Figma styles */
  --green-500: #11302d;
  --light-purple-500: #b5a0f0;
  --light-purple-950: #311d69;
  --grey-1100: #101828;

  /* Recurring raw colours in the file */
  --ink: #1a1a1a;
  --ink-strong: #0c0c0c;
  --muted: #6e7073;
  --muted-2: #545555;
  --placeholder: #9297a1;
  --lime: #c1f16d;
  --lime-border: #92c33e;
  --teal: #198f84;
  --deep-teal: #0c2c29;
  --blue-link: #22abe4;
  --orange: #e4821c;
  --field-bg: #f9f9f9;
  --field-border: #d0d5dd;
  --chip-bg: #f2f4f7;
  --dot-off: #e0e2e2;

  --font-sora: "Sora", system-ui, sans-serif;
  --font-inter: "Inter", system-ui, sans-serif;
  --font-dm: "DM Sans", system-ui, sans-serif;
  --font-nohemi: "Nohemi", "Sora", system-ui, sans-serif;

  --screen-w: 393px;
  --gutter: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #e9ebee;
  color: var(--ink);
  font-family: var(--font-inter);
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
p,
h1,
h2,
h3,
h4 {
  margin: 0;
}

/* One phone-sized frame, centred on wider viewports. */
.screen {
  position: relative;
  width: var(--screen-w);
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  overflow-x: clip;
}
@media (min-width: 500px) {
  body {
    padding-block: 24px;
  }
  .screen {
    min-height: calc(100vh - 48px);
    box-shadow: 0 10px 40px rgba(16, 24, 40, 0.12);
  }
}

/* Status bar — "Status Bar" instance, 393 × 41.92 */
.status-bar {
  position: relative;
  width: 100%;
  height: 41.92px;
  overflow: clip;
  flex-shrink: 0;
}
.status-bar .sb-time {
  position: absolute;
  left: 18.86px;
  top: 12.58px;
  width: 56.592px;
  height: 22.008px;
  border-radius: 20px;
  overflow: clip;
}
.status-bar .sb-time img {
  position: absolute;
  left: calc(50% + 0.52px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34.584px;
  height: 15.72px;
}
.status-bar .sb-icons {
  position: absolute;
  right: 15.72px;
  top: 16.77px;
  display: flex;
  gap: 4.192px;
  align-items: center;
}
.status-bar .sb-indicator {
  position: absolute;
  right: 74.41px;
  top: 8.38px;
  width: 6.288px;
  height: 6.288px;
}

/* Home indicator — 140.43 × 5.24 bar, 8.38 above the bottom */
.home-indicator {
  position: relative;
  height: 35.632px;
  width: 100%;
  pointer-events: none;
}
.home-indicator::after {
  content: "";
  position: absolute;
  left: calc(50% + 0.52px);
  bottom: 8.38px;
  transform: translateX(-50%);
  width: 140.432px;
  height: 5.24px;
  border-radius: 104.8px;
  background: var(--ink-strong);
}

/* Text boxes trimmed to cap height, as Figma's text-box-trim does. */
.trim {
  text-box: trim-both cap alphabetic;
}

/* Round 36px icon button (bag, menu, back, share…) */
.icon-btn {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 112.5px;
  background: var(--chip-bg);
  display: grid;
  place-items: center;
}
.icon-btn > img {
  width: 20px;
  height: 20px;
}
.badge {
  position: absolute;
  left: 19.13px;
  top: -1.13px;
  min-width: 17px;
  height: 17px;
  padding: 0 3.375px;
  border-radius: 112.5px;
  background: var(--orange);
  color: #fff;
  font: 500 9px/1 var(--font-inter);
  display: grid;
  place-items: center;
}

/* Horizontal scrollers (store rails, chips, ad carousels) */
.rail {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.rail::-webkit-scrollbar {
  display: none;
}
.rail > * {
  scroll-snap-align: start;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}