/* MarketplaceLayout: the public Vendora shopping destination, plus the
   sign-in pages that sit beside it. Uses the tokens and components in
   vendora.css; only arranges them. */

.mk { background: var(--off-white); }

/* --- header ------------------------------------------------------------ */

.mk-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--white); border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.mk-head.is-scrolled { box-shadow: var(--shadow-sm); }
.mk-head__bar { display: flex; align-items: center; gap: var(--s4); min-height: 68px; }
.mk-head__menu { display: none; margin-left: calc(var(--s2) * -1); }
.mk-nav { display: flex; gap: var(--s1); }
.mk-nav a {
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  color: var(--charcoal); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.mk-nav a:hover { color: var(--navy); background: var(--navy-50); }
.mk-nav a.is-active { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--teal); border-radius: 0; }
.mk-head__search { flex: 1; max-width: 420px; margin-left: auto; }
.mk-head__search input { background: var(--off-white); border-color: var(--line); }
.mk-head__search input:focus { background: var(--white); }
.mk-head__actions { display: flex; align-items: center; gap: var(--s1); }
.mk-head__search-btn { display: none; }
.mk-head__cart { position: relative; }
.mk-head__cart.is-active { background: var(--navy-50); }
.mk-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--teal); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  display: inline-grid; place-items: center;
}

@media (max-width: 1100px) { .mk-hide-md { display: none; } }
@media (max-width: 900px) {
  .mk-nav { display: none; }
  .mk-head__menu { display: inline-flex; }
  .mk-head__search { max-width: none; }
}
@media (max-width: 640px) {
  .mk-head__bar { gap: var(--s2); min-height: 60px; }
  .mk-head__search { display: none; }
  .mk-head__search-btn { display: inline-flex; }
  .mk-head__actions { margin-left: auto; }
  .mk-hide-sm { display: none !important; }
  .mk-head .logo img { height: 28px; }
}

/* Phone menu */
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(16, 36, 58, .45); }
.drawer__panel {
  position: absolute; inset: 0 auto 0 0; width: min(340px, 88vw);
  background: var(--white); display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s4); overflow-y: auto; animation: slide-in .22s var(--ease);
}
@keyframes slide-in { from { transform: translateX(-24px); opacity: 0; } }
.drawer__head { display: flex; justify-content: space-between; align-items: center; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s3) var(--s1); border-bottom: 1px solid var(--line);
  color: var(--navy); font-weight: 600; text-decoration: none;
}
.drawer__nav a.is-active { color: var(--teal-700); }
.drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); }

/* --- page scaffolding ----------------------------------------------------- */

.mk-main { min-height: 50vh; }
.page { padding-top: var(--s6); padding-bottom: var(--s16); }
.page--narrow { max-width: 760px; }
.page-section + .page-section { margin-top: var(--s10); }
.section-title { font-size: var(--fs-md); margin-bottom: var(--s4); }
.page-head__search { width: min(360px, 100%); }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s4); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs .ic { width: 14px; height: 14px; }

/* --- hero ------------------------------------------------------------- */

.hero { background: var(--white); border-bottom: 1px solid var(--line); }
.hero__in { display: grid; gap: var(--s10); align-items: center; padding-top: var(--s12); padding-bottom: var(--s12); }
@media (min-width: 900px) { .hero__in { grid-template-columns: 1.05fr .95fr; padding-top: var(--s16); padding-bottom: var(--s16); } }
.hero__kicker { color: var(--teal-700); font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s3); }
.hero h1, .hero__title { font-size: clamp(1.9rem, 4.2vw, 2.75rem); line-height: 1.12; letter-spacing: -.025em; margin-bottom: var(--s4); max-width: 15em; }
.hero__lede { font-size: var(--fs-md); color: #4D5963; max-width: 34em; margin-bottom: var(--s6); }
.hero__search { display: flex; gap: var(--s2); max-width: 560px; }
.hero__search .search { flex: 1; }
.hero__search input { min-height: var(--control-lg); font-size: var(--fs-md); }
.hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s4) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.hero__chips a {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--navy); text-decoration: none; font-weight: 500; background: var(--white);
}
.hero__chips a:hover { border-color: var(--navy); }
.hero__sell {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line);
  color: var(--muted); font-weight: 500; max-width: 560px;
}
@media (max-width: 520px) {
  .hero__search { flex-direction: column; }
}

.hero__mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s3); aspect-ratio: 1 / .9; }
.hero__tile { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--navy-50); }
.hero__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.hero__tile:hover img { transform: scale(1.03); }
.hero__tile span {
  position: absolute; left: var(--s3); bottom: var(--s3);
  padding: 3px 8px; border-radius: 4px; background: var(--white); color: var(--navy);
  font-size: var(--fs-xs); font-weight: 600;
}
.hero__tile--1 { grid-row: span 2; }
.hero__mosaic:has(.hero__tile--3:last-child) .hero__tile--1 { grid-row: span 2; }
@media (max-width: 899px) { .hero__mosaic { aspect-ratio: 16 / 10; } }

/* The banner's slides: they slide sideways, and each one's words and picture
   come in once it is showing. Without JavaScript only the first is shown. */
.hero { position: relative; }
.hero__viewport { overflow: hidden; }
.hero__track { display: flex; transition: transform .8s var(--ease); will-change: transform; }
.hero__slide { flex: 0 0 100%; min-width: 0; display: grid; align-items: center; }
.hero__slide:nth-child(2) { background: linear-gradient(120deg, var(--teal-50) 0%, var(--white) 62%); }
.hero__slide:nth-child(3) { background: linear-gradient(120deg, var(--gold-50) 0%, var(--white) 62%); }
.js-hero .hero__in { padding-bottom: calc(var(--s8) + 64px); }

.hero__copy > *, .hero__art { transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js-hero .hero__slide:not(.is-active) .hero__copy > * { opacity: 0; transform: translateY(16px); }
.js-hero .hero__slide:not(.is-active) .hero__art { opacity: 0; transform: translateX(28px) scale(.97); }
.hero__slide.is-active .hero__copy > :nth-child(2) { transition-delay: .08s; }
.hero__slide.is-active .hero__copy > :nth-child(3) { transition-delay: .16s; }
.hero__slide.is-active .hero__copy > :nth-child(4) { transition-delay: .24s; }
.hero__slide.is-active .hero__copy > :nth-child(5) { transition-delay: .32s; }
.hero__slide.is-active .hero__art { transition-delay: .2s; }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__lede b { color: var(--navy); font-weight: 600; }

/* The three apps, in each one's own colours with a white mark. */
.hero__chan {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%; color: #fff;
}
.hero__chan .ic { width: 18px; height: 18px; }
.hero__chan--tiktok { background: #000; }
.hero__chan--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.hero__chan--whatsapp { background: #25D366; }
.hero__channels { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); font-weight: 500; color: var(--charcoal); }
.hero__channels li { display: flex; align-items: center; gap: var(--s3); }

/* Slide 1, before there are product photos to show: shops side by side. */
.market { position: relative; width: 100%; max-width: 500px; justify-self: center; aspect-ratio: 1 / 1.04; }
.market__shop {
  --c: #087E83; position: absolute; width: 50%; padding: 12px; display: grid; gap: 10px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-md);
  animation: market-float 6s ease-in-out infinite;
}
.market__shop--1 { left: 0; top: 7%; rotate: -5deg; }
.market__shop--2 { --c: #B8862F; right: 0; top: 0; rotate: 4deg; animation-delay: -2s; }
.market__shop--3 { --c: #7B3F61; left: 25%; top: 30%; z-index: 1; animation-delay: -4s; }
@keyframes market-float { 50% { translate: 0 -8px; } }
.market__top { display: flex; align-items: center; gap: 8px; }
.market__logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--c); color: #fff; }
.market__logo .ic { width: 16px; height: 16px; }
.market__line { height: 8px; flex: 1; max-width: 60%; border-radius: 4px; background: var(--navy-50); }
.market__items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.market__items i { aspect-ratio: 1; border-radius: 8px; background: color-mix(in srgb, var(--c) 12%, var(--off-white)); }
.market__btn { height: 20px; width: 45%; border-radius: 6px; background: var(--c); }
/* A real shop: its banner across the top, its logo and name, two products. */
.market__shop--real { padding: 0 0 12px; gap: 10px; overflow: hidden; text-decoration: none; color: var(--navy); }
.market__shop--real > :not(.market__banner) { margin: 0 12px; }
.market__banner { display: block; aspect-ratio: 16 / 7; background: color-mix(in srgb, var(--c) 14%, var(--off-white)); }
.market__banner img { width: 100%; height: 100%; object-fit: cover; }
.market__shop--real .market__top { align-items: flex-start; }
.market__shop--real .market__logo { margin-top: -28px; }
.market__shop--real .market__logo {
  width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: none;
  border: 3px solid var(--white); box-shadow: var(--shadow-sm); font-weight: 700; font-size: 1.1rem;
}
.market__logo img { width: 100%; height: 100%; object-fit: contain; background: var(--c); }
.market__id { display: grid; min-width: 0; line-height: 1.25; }
.market__id b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market__id small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market__items i { overflow: hidden; }
.market__items img { width: 100%; height: 100%; object-fit: cover; }
.market__items--one { grid-template-columns: 1fr; }
.market__items--one i { aspect-ratio: 2 / 1; }
.market__shop--real .market__btn {
  display: grid; place-items: center; width: auto; height: 30px; color: #fff;
  font-size: var(--fs-xs); font-weight: 600; justify-self: start; padding: 0 14px;
}
.market__shop--real:hover { border-color: var(--c); }

.market__badge {
  position: absolute; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 99px; background: var(--white); box-shadow: var(--shadow-md);
  font-size: var(--fs-sm); font-weight: 600; color: var(--navy); white-space: nowrap;
}
.market__badge .ic { color: var(--success); }

/* Slide 2: the apps feeding one store. */
.hub { position: relative; width: 100%; max-width: 520px; justify-self: center; aspect-ratio: 1 / .9; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__lines path {
  fill: none; stroke: var(--teal); stroke-width: .7; stroke-linecap: round;
  stroke-dasharray: 1.4 2.4; opacity: .75; animation: hub-flow 1.4s linear infinite;
}
.hub__lines path:nth-child(2) { animation-delay: -.45s; }
.hub__lines path:nth-child(3) { animation-delay: -.9s; }
@keyframes hub-flow { to { stroke-dashoffset: -7.6; } }
.hub__node {
  position: absolute; width: clamp(48px, 13%, 66px); height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%); box-shadow: var(--shadow-md);
}
.hub__node .ic { width: 46%; height: 46%; }
.hub__node::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0; animation: hub-ping 3s var(--ease) infinite;
}
.hub__node--1 { left: 18%; top: 18%; }
.hub__node--2 { left: 13%; top: 50%; }
.hub__node--3 { left: 18%; top: 82%; }
.hub__node--1::after { color: #000; }
.hub__node--2::after { color: #D6249F; animation-delay: 1s; }
.hub__node--3::after { color: #25D366; animation-delay: 2s; }
@keyframes hub-ping { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.6); } }

.hub__phone {
  position: absolute; left: 52%; top: 6%; width: 40%; height: 88%;
  padding: 7px; border-radius: 26px; background: var(--navy); box-shadow: 0 24px 48px -18px rgba(16, 36, 58, .45);
}
.hub__screen { height: 100%; border-radius: 20px; background: var(--white); overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; }
.hub__url {
  display: block; padding: 4px 8px; border-radius: 99px; background: var(--off-white);
  font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.hub__shop { display: flex; align-items: center; gap: 6px; }
.hub__logo { width: 20px; height: 20px; border-radius: 50%; background: var(--teal); }
.hub__name { height: 7px; width: 55%; border-radius: 4px; background: var(--navy-50); }
.hub__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hub__item { aspect-ratio: 1; border-radius: 8px; background: var(--navy-50); overflow: hidden; }
.hub__item img { width: 100%; height: 100%; object-fit: cover; }
.hub__order {
  white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: auto;
  padding: 7px; border-radius: 8px; background: var(--whatsapp); color: #fff; font-size: 10px; font-weight: 600;
}
.hub__order .ic { width: 12px; height: 12px; }
.hero__slide.is-active .hub__item { animation: hub-pop .5s var(--ease) both; }
.hero__slide.is-active .hub__item:nth-child(1) { animation-delay: .45s; }
.hero__slide.is-active .hub__item:nth-child(2) { animation-delay: .55s; }
.hero__slide.is-active .hub__item:nth-child(3) { animation-delay: .65s; }
.hero__slide.is-active .hub__item:nth-child(4) { animation-delay: .75s; }
@keyframes hub-pop { from { opacity: 0; transform: scale(.85); } }
.hub__toast {
  position: absolute; left: 34%; bottom: 3%; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-md);
  font-size: var(--fs-sm); color: var(--charcoal); white-space: nowrap; opacity: 0;
}
.hub__toast .ic { color: #fff; background: var(--whatsapp); border-radius: 50%; padding: 2px; }
.hero__slide.is-active .hub__toast { animation: hub-toast 5s var(--ease) 1.4s infinite; }
@keyframes hub-toast {
  0% { opacity: 0; transform: translateY(12px); }
  10%, 75% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* Slide 3: a store whose colour changes, as each seller picks their own. */
@property --demo { syntax: "<color>"; inherits: true; initial-value: #087E83; }
.browser {
  --demo: #087E83; position: relative; width: 100%; max-width: 540px; justify-self: center;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow-md);
}
.hero__slide.is-active .browser { animation: demo-colours 12s steps(1) infinite; }
@keyframes demo-colours { 0% { --demo: #087E83; } 25% { --demo: #10243A; } 50% { --demo: #B8862F; } 75% { --demo: #7B3F61; } }
.browser * { transition: background-color .6s var(--ease); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: 12px 12px 0 0; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.browser__bar span {
  flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: 99px; background: var(--white); border: 1px solid var(--line);
  font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser__page { padding: 14px; display: grid; gap: 12px; }
.browser__head { display: flex; align-items: center; gap: 10px; }
.browser__logo { width: 28px; height: 28px; border-radius: 8px; background: var(--demo); }
.browser__line { display: block; height: 8px; width: 34%; border-radius: 4px; background: var(--navy-50); }
.browser__line--lg { height: 14px; width: 62%; background: color-mix(in srgb, var(--demo) 70%, #fff); }
.browser__btn { display: block; width: 64px; height: 22px; border-radius: 6px; background: var(--demo); margin-left: auto; }
.browser__banner {
  display: grid; gap: 10px; padding: 22px 18px; border-radius: 10px;
  background: color-mix(in srgb, var(--demo) 13%, #fff);
}
.browser__banner .browser__btn { margin: 6px 0 0; }
.browser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.browser__grid span { display: grid; gap: 6px; }
.browser__grid i { aspect-ratio: 1; border-radius: 8px; background: color-mix(in srgb, var(--demo) 9%, var(--off-white)); }
.browser__grid b { height: 6px; width: 80%; border-radius: 3px; background: var(--navy-50); }
.browser__grid b + b { width: 45%; background: color-mix(in srgb, var(--demo) 45%, #fff); }
.browser__swatches {
  position: absolute; right: 14px; bottom: -18px; display: flex; gap: 8px; margin: 0; padding: 7px 10px;
  list-style: none; border-radius: 99px; background: var(--white); box-shadow: var(--shadow-md);
}
.browser__swatches li { width: 18px; height: 18px; border-radius: 50%; }
.browser__swatches li:nth-child(1) { background: #087E83; }
.browser__swatches li:nth-child(2) { background: #10243A; }
.browser__swatches li:nth-child(3) { background: #B8862F; }
.browser__swatches li:nth-child(4) { background: #7B3F61; }
.hero__slide.is-active .browser__swatches li { animation: demo-pick 12s steps(1) infinite; }
.hero__slide.is-active .browser__swatches li:nth-child(2) { animation-delay: 3s; }
.hero__slide.is-active .browser__swatches li:nth-child(3) { animation-delay: 6s; }
.hero__slide.is-active .browser__swatches li:nth-child(4) { animation-delay: 9s; }
@keyframes demo-pick { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); } 25%, 100% { box-shadow: none; } }

/* Progress bars that fill while a slide shows; each one also picks its slide. */
.hero__nav {
  position: absolute; left: 0; right: 0; bottom: var(--s6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.hero__nav[hidden] { display: none; }
.hero__dots { display: flex; gap: var(--s2); }
.hero__dot { padding: 10px 0; border: 0; background: none; cursor: pointer; }
.hero__dot span { display: block; position: relative; width: 28px; height: 4px; border-radius: 2px; background: var(--line-strong); overflow: hidden; transition: width .4s var(--ease); }
.hero__dot.is-active span { width: 56px; }
.hero__dot span::after { content: ""; position: absolute; inset: 0; background: var(--navy); transform: scaleX(0); transform-origin: left; }
.hero__dot.is-active span::after { transform: scaleX(1); }
.hero.is-playing .hero__dot.is-active span::after { animation: hero-fill var(--hero-delay, 7s) linear both; }
@keyframes hero-fill { from { transform: scaleX(0); } }
.hero__dot:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }

@media (max-width: 899px) {
  .hero__art { max-width: 420px; }
  .hero__channels { display: none; }
  .hub { max-width: 360px; }
}
@media (max-width: 520px) {
  .hero__dot span { width: 20px; }
  .hero__dot.is-active span { width: 40px; }
  .browser__swatches { right: 8px; }
  .market__badge { display: none; }
}

/* The site cuts motion short for people who turn animations off. The banner
   is meant to move, so it keeps its own timings here. */
@media (prefers-reduced-motion: reduce) {
  .hero__track { transition-duration: .8s !important; }
  .hero__copy > * { transition-duration: .6s !important; }
  .hero__art { transition-duration: .7s !important; }
  .browser * { transition-duration: .6s !important; }
  .hub__lines path { animation-duration: 1.4s !important; }
  .hub__node::after { animation-duration: 3s !important; }
  .hero__slide.is-active .hub__item { animation-duration: .5s !important; }
  .hero__slide.is-active .hub__toast { animation-duration: 5s !important; }
  .hero__slide.is-active .browser, .hero__slide.is-active .browser__swatches li { animation-duration: 12s !important; }
  .market__shop { animation-duration: 6s !important; }
  .hero.is-playing .hero__dot.is-active span::after { animation-duration: var(--hero-delay, 7s) !important; }
}

/* --- trust strip ------------------------------------------------------ */

.trust { background: var(--white); border-bottom: 1px solid var(--line); }
.trust__in { display: grid; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s5); }
@media (min-width: 760px) { .trust__in { grid-template-columns: repeat(3, 1fr); } }
.trust__item { display: flex; gap: var(--s3); align-items: flex-start; }
.trust__item .ic { width: 22px; height: 22px; color: var(--teal); margin-top: 2px; }
.trust__item b { display: block; color: var(--navy); font-size: var(--fs-base); }
.trust__item span { color: var(--muted); font-size: var(--fs-sm); }

/* --- bands (homepage sections) ------------------------------------------- */

.band { padding: var(--s12) 0; }
.band--white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--offers { background: var(--gold-50); border-top: 1px solid #F0E2C6; border-bottom: 1px solid #F0E2C6; }
.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.band__head h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin: 0; }
.band__head p { color: var(--muted); margin: var(--s1) 0 0; }
.band__kicker { font-size: var(--fs-sm); font-weight: 600; color: var(--teal-700); margin-bottom: var(--s1); }
.band--offers .band__kicker { color: #8A6420; }
.band__kicker--light { color: #8FD3CC; }
.band__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }

/* --- product tiles ------------------------------------------------------ */

.ptiles { display: grid; gap: var(--s6) var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ptiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8) var(--s5); } }
.ptile { display: flex; flex-direction: column; min-width: 0; }
.ptile__media { border-radius: var(--r-md); }
.ptile:hover .ptile__media img { transform: scale(1.03); }
.ptile__flag {
  position: absolute; top: var(--s2); left: var(--s2);
  padding: 2px 8px; border-radius: 4px; background: var(--gold); color: var(--navy);
  font-size: var(--fs-xs); font-weight: 700;
}
.ptile__flag--muted { background: var(--white); color: var(--muted); }
.ptile__body { padding-top: var(--s3); display: flex; flex-direction: column; gap: 2px; }
.ptile__shop { font-size: var(--fs-xs); font-weight: 600; color: var(--teal-700); text-decoration: none; text-transform: none; }
.ptile__shop:hover { text-decoration: underline; }
.ptile__name { font-size: var(--fs-base); font-weight: 600; margin: 0; line-height: 1.35; }
.ptile__name a { color: var(--navy); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ptile__name a:hover { color: var(--teal-700); }
.ptile__meta { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.ptile__price { margin: 2px 0 0; font-weight: 700; color: var(--navy); display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ptile__price s { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }

/* --- store tiles --------------------------------------------------------- */

.stiles { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.stiles--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.stile {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s;
}
.stile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); color: inherit; }
.stile:hover .stile__cover img { transform: scale(1.03); }
.stile__cover { aspect-ratio: 16 / 8; border-radius: 0; }
.stile__body { display: flex; gap: var(--s3); align-items: center; padding: var(--s4) var(--s4) var(--s1); margin-top: -28px; position: relative; }
.stile__logo {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-md);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: grid; place-items: center; overflow: hidden;
  font-weight: 700; color: var(--navy); font-size: 1.25rem;
}
.stile__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.stile__text { min-width: 0; padding-top: 26px; }
.stile__text b { display: block; color: var(--navy); font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stile__text span { display: block; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stile__meta { padding: var(--s1) var(--s4) var(--s4); font-size: var(--fs-xs); color: var(--muted); }

/* --- category tiles ------------------------------------------------------- */

.ctiles { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ctiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ctiles:not(.ctiles--all) { grid-template-columns: repeat(8, minmax(0, 1fr)); } .ctiles--all { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ctile { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; min-width: 0; }
.ctile__media { margin-bottom: var(--s2); border-radius: var(--r-md); }
.ctile:hover img { transform: scale(1.04); }
.ctile b { color: var(--navy); font-size: var(--fs-base); }
.ctile span:not(.media):not(.media__none) { color: var(--muted); font-size: var(--fs-xs); }
.ctile:hover b { color: var(--teal-700); }

/* --- seller acquisition ---------------------------------------------------- */

.sell { background: var(--navy); color: #D5DEE6; padding: var(--s16) 0; }
.sell__in { display: grid; gap: var(--s10); align-items: start; }
@media (min-width: 960px) { .sell__in { grid-template-columns: 1fr 1fr; gap: var(--s16); } }
.sell h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; max-width: 14em; }
.sell__lede { font-size: var(--fs-md); margin: var(--s3) 0 var(--s6); max-width: 32em; }
.sell__points { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s8); }
.sell__points li { display: flex; gap: var(--s3); align-items: flex-start; }
.sell__points .ic { color: #8FD3CC; margin-top: 2px; }
.sell__points b { color: #fff; font-weight: 600; }
.sell__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.sell__cta p { margin: 0; font-size: var(--fs-sm); color: #AFC0CE; }
.sell__form { color: var(--charcoal); }
.sell__form h3 { margin-bottom: var(--s1); }
.sell__form > p { margin-bottom: var(--s5); }
.rent-form__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); margin-top: var(--s5); }

.opening { text-align: center; max-width: 640px; margin: 0 auto; }

/* --- Rent a Shop page ------------------------------------------------------- */

.rent { display: grid; gap: var(--s10); align-items: start; }
@media (min-width: 960px) { .rent { grid-template-columns: 1fr 1fr; gap: var(--s12); } }
.rent h1 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; }
.rent__steps { padding: 0; margin: 0 0 var(--s8); list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--s4); }
.rent__steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); color: var(--muted); }
.rent__steps li::before {
  content: counter(step); width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--teal-50); color: var(--teal-700); font-weight: 700;
}
.rent__steps b { display: block; color: var(--navy); }
.rent__direct { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s5); }
.rent__self { color: var(--muted); }
.rent__message { margin-top: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s4); }
.rent__message summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.rent__message p { margin-top: var(--s3); padding: var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.rent__form h2 { font-size: var(--fs-lg); }

/* --- filters --------------------------------------------------------------- */

.filters {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  padding: var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: var(--s8);
}
.filters__q { flex: 1 1 260px; }
.filters select { width: auto; flex: 0 1 220px; }
.filters__check { padding: 0 var(--s2); white-space: nowrap; align-items: center; }
.filters__check input { margin: 0; }
@media (max-width: 640px) { .filters select { flex: 1 1 45%; } }

.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5);
  margin-top: var(--s12); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white);
}
.cta-strip h2 { margin: 0 0 var(--s1); font-size: var(--fs-lg); }
.cta-strip p { margin: 0; color: var(--muted); }

/* --- carts page ------------------------------------------------------------ */

.cart-shops { display: flex; flex-direction: column; gap: var(--s3); }
.cart-shop { display: flex; align-items: center; gap: var(--s4); text-decoration: none; color: inherit; padding: var(--s4); }
.cart-shop:hover { border-color: var(--line-strong); color: inherit; }
.cart-shop__logo { width: 48px; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; font-weight: 700; color: var(--navy); flex: none; }
.cart-shop__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.cart-shop__text { flex: 1; min-width: 0; }
.cart-shop__text b { display: block; color: var(--navy); }
.cart-shop__text span { color: var(--muted); font-size: var(--fs-sm); }

/* --- footer -------------------------------------------------------------- */

.mk-foot { background: var(--navy); color: #AFC0CE; padding: var(--s12) 0 var(--s6); font-size: var(--fs-sm); }
.sell + .mk-foot, .mk-main:has(.sell:last-child) + .mk-foot { border-top: 1px solid rgba(255, 255, 255, .08); }
.mk-foot__grid { display: grid; gap: var(--s8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .mk-foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.mk-foot__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .mk-foot__brand { grid-column: auto; } }
.mk-foot__brand img { margin-bottom: var(--s4); }
.mk-foot__brand p { max-width: 30em; }
.mk-foot h2 { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--s3); }
.mk-foot nav, .mk-foot__grid > div:last-child { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.mk-foot a:not(.btn) { color: #D5DEE6; text-decoration: none; }
.mk-foot a:not(.btn):hover { color: #fff; text-decoration: underline; }
.mk-foot__cta { margin-top: var(--s2); }
.mk-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-top: var(--s10); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-xs); }

/* --- sign-in pages ------------------------------------------------------------ */

.auth { min-height: 100vh; display: flex; flex-direction: column; }
.auth-head { background: var(--white); border-bottom: 1px solid var(--line); }
.auth-head__bar { display: flex; justify-content: space-between; align-items: center; min-height: 64px; }
.auth-main { flex: 1; display: grid; place-items: start center; padding: var(--s12) var(--s4); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card--wide { max-width: 480px; }
.auth-card h1 { font-size: var(--fs-xl); }
.auth-lede { color: var(--muted); margin-bottom: var(--s6); }
.auth-form { display: flex; flex-direction: column; }
.auth-form .btn--block { margin-top: var(--s2); }
.auth-alt { color: var(--muted); font-size: var(--fs-sm); margin: var(--s4) 0 0; text-align: center; }
.auth-note { margin-top: var(--s3); }
.auth-perks { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: center; color: var(--muted); font-size: var(--fs-sm); }
.auth-perks li { display: flex; align-items: center; gap: 6px; }
.auth-perks .ic { width: 18px; height: 18px; color: var(--teal); }
.auth-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--navy); background: var(--navy-50); padding: 4px 8px; border-radius: 4px; }
.auth-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: var(--s5); font-size: var(--fs-xs); color: var(--muted); }
.link-status.is-ok { color: var(--success); }
.link-status.is-bad { color: var(--danger); }
.link-status:empty { display: none; }

/* On phones the homepage's shops scroll sideways instead of stacking. */
@media (max-width: 640px) {
  .stiles--rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4) var(--s1);
  }
  .stiles--rail::-webkit-scrollbar { display: none; }
  .stiles--rail > * { scroll-snap-align: start; }
}

/* --- for businesses: the homepage band and plans preview, and /pricing --- */
.sell__offer { display: flex; flex-direction: column; gap: var(--s4); align-self: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-md); padding: var(--s6); }
.sell__price { margin: 0; color: #D5DEE6; font-size: var(--fs-md); }
.sell__price b { color: #fff; font-size: var(--fs-xl); }
.sell__cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
.sell__ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .35); background: transparent; }
.sell__ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sell__trial { margin: 0; display: flex; gap: var(--s2); align-items: center; font-size: var(--fs-sm); color: #AFC0CE; }
.sell__trial .ic { color: #8FD3CC; }
.plans-preview .plan-card__desc { min-height: 0; }

.pricing__hero { text-align: center; padding: var(--s12) 0 var(--s8); }
.pricing__hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); line-height: 1.1; color: var(--navy); margin: var(--s2) 0 var(--s3); letter-spacing: -.02em; }
.pricing__lede { max-width: 34em; margin: 0 auto var(--s6); color: var(--muted); font-size: var(--fs-md); }
.pricing__switch { display: flex; justify-content: center; }
.pricing__trial { display: inline-flex; gap: var(--s2); align-items: center; margin: var(--s4) 0 0; font-weight: 600; color: var(--teal-700); font-size: var(--fs-sm); }
.pricing__plans .plan-grid { max-width: 1040px; margin: 0 auto; }
.pricing__cta { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin: var(--s8) 0 0; }
.pricing__section { padding-top: var(--s12); max-width: 1040px; }
.pricing__section h2 { font-size: var(--fs-xl); color: var(--navy); margin-bottom: var(--s5); }
.pricing__included { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3) var(--s6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pricing__included li { display: flex; gap: var(--s2); align-items: flex-start; }
.pricing__included .ic { color: var(--teal); margin-top: 3px; flex: none; }
.pricing__table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); }
.pricing__table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--fs-sm); }
.pricing__table th, .pricing__table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); text-align: center; }
.pricing__table tbody tr:last-child > * { border-bottom: 0; }
.pricing__table thead th { color: var(--navy); font-size: var(--fs-base); background: var(--surface-2); }
.pricing__table tbody th { text-align: left; font-weight: 500; color: var(--charcoal); }
.pricing__table .ic { color: var(--teal); }
.pricing__extras { font-size: var(--fs-xs); color: var(--muted); }
.pricing__faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4) var(--s5); margin-bottom: var(--s3); }
.pricing__faq summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.pricing__faq p { margin: var(--s3) 0 0; color: var(--charcoal); }
.pricing__band { background: var(--navy); color: #D5DEE6; margin-top: var(--s16); padding: var(--s12) 0; }
.pricing__band-in { display: flex; flex-wrap: wrap; gap: var(--s6); align-items: center; justify-content: space-between; }
.pricing__band h2 { color: #fff; margin: 0 0 var(--s2); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.pricing__band p { margin: 0; }
.pricing__table td .ic { display: inline-block; vertical-align: middle; }



.hero__sell { margin: var(--s4) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.hero__sell a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--teal-700, #0B6E6E); text-decoration: underline; text-underline-offset: 3px; }

/* Drawn products in the homepage illustrations, until real shops fill them */
.mock-art { display: block; width: 100%; height: 100%; padding: 12%; }
.browser__grid i { color: var(--demo); }
.hub__item .mock-art { padding: 14%; }
.browser__grid i { overflow: hidden; }
.browser__grid i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Example shop cards: a patterned banner in the card colour, a solid logo tile */
.market__banner--example { background:
  radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--c) 35%, transparent) 0 18%, transparent 19%),
  radial-gradient(circle at 70% 90%, color-mix(in srgb, var(--c) 22%, transparent) 0 22%, transparent 23%),
  linear-gradient(120deg, color-mix(in srgb, var(--c) 18%, #fff), color-mix(in srgb, var(--c) 42%, #fff)); }
.market__shop--example .market__logo { background: var(--c); color: #fff; display: grid; place-items: center; }
.market__shop--example .market__logo .ic { width: 22px; height: 22px; }