/* kongi.co's design system. Every page loads this first, then its own sheet (styles.css, doc.css or careers.css).
   One white page; one grey for every fill (the app's DS.well); ink for words, Kongi green for the main button.
   Borderless (CLAUDE.md): a card, tile, field or chip is set apart by its fill, never an outline; an ink ring shows only
   while a field is in use. The header and footer are web.HEADER and web.FOOTER (the shop's own header has Browse and search,
   web.SHOP_HEADER; the logo alone and a line of links, web.FOCUSED and web.MINI, where there's one thing to do); scripts/site_chrome.py copies them onto
   the static pages, and tests/test_site.py fails if a page drifts. */
@font-face { font-family: "GT Standard"; src: url(/fonts/GTStandard-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GT Standard"; src: url(/fonts/GTStandard-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "GT Standard"; src: url(/fonts/GTStandard-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --forest: #0e5b3f;              /* Kongi green: the main button */
  --forest-deep: #0b4c34;
  --ink: #0d0d0d;
  --paper: #ffffff;               /* every page */
  --tile: #f2f2f7;                /* every fill: fields, chips, cards, boxes, photo tiles */
  --tile-deep: #e5e5ea;           /* a fill under the pointer, a box not yet ticked */
  --muted: rgba(13, 13, 13, .64); /* secondary words */
  --faint: rgba(13, 13, 13, .5);  /* placeholders, small print */
  --line: rgba(13, 13, 13, .1);   /* hairlines between rows and under the header, nothing else */
  --sale: #cc0d38;                /* deals only */
  --danger: #d70015;              /* the last button of something that can't be undone, nothing else */
  --star: #f5b017;                /* rating stars only */
  --night: #111111;               /* the footer, dark sheets */
  --muted-dark: rgba(255, 255, 255, .72);
  --reveal: cubic-bezier(.58, 0, .2, 1);
  --press: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scrollbar-gutter: stable; }
/* the footer sits at the bottom of the screen even when the page is shorter */
body { min-height: 100svh; display: flex; flex-direction: column; font-family: "GT Standard", system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
body > main { flex: 1 0 auto; width: 100%; }
/* a short page (no orders yet, a 404) still takes most of the screen, so the footer shows under it without filling half */
body:has(> footer:not(.mini)) > main { min-height: 70svh; }
a { color: inherit; text-decoration: none; }
.logo { font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -.045em; }
.badge img { display: block; height: 44px; width: auto; }

/* buttons: green for the one thing to do, grey for the rest, no outlines */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0;
  border-radius: 999px; background: none; color: inherit; font: 500 16px/1 "GT Standard", system-ui, sans-serif; cursor: pointer;
  white-space: nowrap; transition: transform .2s var(--press), opacity .16s, background-color .2s, color .2s; }
.btn.solid { background: var(--forest); color: var(--paper); }
.btn.gray { background: var(--tile); color: var(--ink); }
.btn.light { background: var(--paper); color: var(--ink); }  /* on a dark sheet */
.btn.danger { background: var(--danger); color: var(--paper); }
.btn.big { height: 56px; padding: 0 30px; font-size: 18px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn.solid:hover { background: var(--forest-deep); }
  .btn.gray:hover, .btn.text:hover { background: var(--tile-deep); }
  .btn.light:hover { background: var(--tile-deep); }  /* not the tile's own grey: it sits on tiles */
  .btn.danger:hover { background: #b80012; }
  .badge img { transition: transform .2s var(--press), opacity .2s; }
  .badge:hover img { transform: translateY(-1px); opacity: .85; }
}
.btn:active { transform: scale(.96); }
@media (max-width: 760px) {
  .btn { height: 38px; padding: 0 14px; font-size: 14px; }
  .btn.big { height: 44px; padding: 0 24px; font-size: 15px; }
}

/* --- the site's header (the homepage's): the logo, then For brands, Log in and Sign up, full width --- */
.site-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 3vw, 28px); background: var(--paper); }
.site-bar .actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .site-bar .btn.text { display: none; } }

/* --- the shop's header (Whatnot's /browse, measured at 1440 wide: 64px tall, sticky, a hairline under it; the logo, Browse,
   the search bar taking the room left, then Log in and the main button, on a 1240px row) --- */
.shop-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; height: 64px;
  padding: 0 max(clamp(16px, 3vw, 32px), calc((100% - 1240px) / 2)); background: var(--paper); border-bottom: 1px solid var(--line); }
.shop-bar .logo { margin-right: 76px; }
.shop-nav { display: flex; gap: 12px; }
.shop-nav a, .shop-bar .btn { height: 34px; padding: 0 24px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.shop-nav a { display: inline-flex; align-items: center; transition: background-color .2s; }
.shop-nav a:hover, .shop-nav a[aria-current=page], .shop-bar .btn.text { background: var(--tile); }
.shop-bar .actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* signed in (Depop's, Whatnot's): their photo or initial instead of Log in and Start earning, opening a small menu */
.signed-in .shop-bar .actions > :is(.login, .join) { display: none; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; overflow: hidden; border: 0; border-radius: 50%;
  background: var(--forest); color: var(--paper); font: 600 15px "GT Standard", system-ui, sans-serif; cursor: pointer; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.avatar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.account-menu { position: absolute; top: 58px; right: max(clamp(16px, 3vw, 32px), calc((100% - 1240px) / 2)); z-index: 20;
  width: 280px; padding: 6px; border-radius: 16px; background: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.account-menu .who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line); min-width: 0; }
.account-menu .who > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.account-menu .who b { font-weight: 600; }
.account-menu .who b + span { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu .who .avatar { flex: none; width: 40px; height: 40px; cursor: default; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); text-align: left; font: 400 15px "GT Standard", system-ui, sans-serif; cursor: pointer; }
.menu-item svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-item:hover { background: var(--tile); }
.menu-note { margin-left: auto; color: var(--muted); font-size: 14px; }
/* the app at the end (Uber Eats' "There's more to love in the app") */
.menu-app { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 12px 10px; border-radius: 10px; background: var(--tile); }
.menu-app span { color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
/* the search bar: a grey field, ringed in ink while in use */
.shop-search { flex: 1; min-width: 0; position: relative; }
.shop-search input { width: 100%; height: 40px; padding: 0 16px 0 52px; border: 0; border-radius: 16px; color: var(--ink);
  background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f7f7f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px 50% / 20px no-repeat;
  font: 400 14px "GT Standard", system-ui, sans-serif; -webkit-appearance: none; appearance: none;
  box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .25s var(--press); }
.shop-search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.shop-search input::-webkit-search-cancel-button { display: none; }
/* "Search for" and an idea that rolls up out of sight as the next rolls in (the app's), gone once they type */
.shop-hint { position: absolute; inset: 0 auto 0 53px; display: flex; align-items: center; gap: .3em; color: var(--faint);
  font-size: 14px; white-space: nowrap; pointer-events: none; }
.shop-hint span { position: relative; height: 20px; overflow: hidden; }
.shop-hint b { display: block; font-weight: 400; line-height: 20px; }
.shop-hint b + b { animation: hint-in .45s var(--press) both; }
.shop-hint b.out { position: absolute; top: 0; animation: hint-out .45s var(--press) both; }
@keyframes hint-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes hint-out { to { transform: translateY(-100%); opacity: 0; } }
.shop-search input:not(:placeholder-shown) + .shop-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .shop-hint b + b, .shop-hint b.out { animation-name: none; } .shop-hint b.out { display: none; } }
/* where there's one thing to do (logging in, checking out): the logo alone, in the middle */
.shop-bar.bare { justify-content: center; }
.shop-bar.bare .logo { margin: 0 auto; }
/* phones (Whatnot's: the logo row, 16px in); the search bar gets a row of its own under it */
@media (max-width: 760px) {
  .shop-bar { height: auto; flex-wrap: wrap; row-gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .shop-bar .logo { margin-right: auto; }
  .shop-nav, .shop-bar .btn.text { display: none; }
  .shop-search { order: 3; flex-basis: 100%; }
  .shop-search input, .shop-hint { font-size: 16px; } /* under 16px, iOS Safari zooms in on focus */
}

/* --- the footer: the app to get, then Kongi, Brands, Help and Legal, then the year and @shopkongi --- */
footer { --pad: clamp(16px, 5vw, 64px); background: var(--night); color: var(--muted-dark); padding: 64px var(--pad) 28px; font-size: 15px; }
footer .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
footer .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
footer .brand .logo { color: var(--paper); font-size: 32px; }
footer .cols { display: grid; grid-template-columns: repeat(4, minmax(120px, auto)); gap: 32px clamp(32px, 6vw, 96px); }
footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
footer h4 { color: var(--paper); font-size: 15px; font-weight: 500; margin-bottom: 4px; }
footer nav a:hover { color: var(--paper); }
footer .base { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px;
  margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
/* @shopkongi on each network, as icons (Depop, Whatnot, Vinted) */
footer .social { display: flex; gap: 20px; }
footer .social a { display: flex; }
footer .social a:hover { color: var(--paper); }
footer .social svg { width: 20px; height: 20px; fill: currentColor; }
/* desktop: scan to get the app (Depop); phones get the App Store badge instead */
footer .get-app { display: flex; align-items: center; gap: 16px; }
footer .get-app img { width: 72px; height: 72px; padding: 8px; background: var(--paper); border-radius: 14px; box-sizing: content-box; }
footer .get-app b { display: block; color: var(--paper); font-size: 16px; font-weight: 500; }
footer .get-app span { display: block; margin-top: 4px; max-width: 220px; line-height: 1.4; }
@media (min-width: 761px) { footer .brand .badge { display: none; } }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr 1fr; } footer .get-app { display: none; } }
/* under the logo-alone header: a line of links (Shopify's checkout) */
footer.mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 24px 16px; border-top: 1px solid var(--line);
  background: var(--paper); color: var(--muted); font-size: 13px; }
footer.mini a:hover { color: var(--ink); text-decoration: underline; }