/* Shoppi marketplace design system.
   Shared by inc/market-header.html, inc/market-footer.html and the
   marketplace landing pages (/deals-app, /gift-ideas).

   Self-contained on purpose: no Bootstrap, no Font Awesome. These pages ship
   their own header and footer, so nothing from the site-wide Bootstrap shell
   is needed and nothing can bleed in. All icons are inline SVG.

   Decorative glyphs (arrows, check marks, perk symbols) are declared here as
   CSS `content` rather than typed into the page HTML: the page-content
   pipeline HTML-entity-encodes stray Unicode symbols and they reach the
   browser mangled. CSS files are served raw, so they are safe here. */

:root {
    --mk-ink: #0B1B33;
    --mk-red: #E8113C;
    --mk-red-dark: #C40E32;
    --mk-pink: #FDEBEF;
    --mk-pink-text: #FF6B8B;
    --mk-blue: #0B5FD9;
    --mk-amber: #FFB020;
    --mk-border: #ECEFF4;
    --mk-line: #D7DEE8;
    --mk-soft: #F4F6FA;
    --mk-text-2: #46536B;
    --mk-muted: #6B7689;
    --mk-muted-2: #8A93A6;
    --mk-disabled: #C6CEDA;
}

/* ============================ BASE ============================ */

.mk {
    margin: 0;
    background: #fff;
    color: var(--mk-ink);
    font-family: Poppins, Helvetica, Arial, sans-serif;
}

.mk *,
.mk *::before,
.mk *::after {
    box-sizing: border-box;
}

/* Wrapped in :where() so the base link colour carries the specificity of a bare
   element selector (0,0,1). Written as `.mk a` it scores 0,1,1 and silently
   beats every single-class modifier — which is exactly what happened: the hot
   and local category links and "Vedi tutto" all rendered ink instead of the
   design's red and blue. */
:where(.mk) a {
    color: var(--mk-ink);
    text-decoration: none;
}

:where(.mk) a:hover {
    color: var(--mk-red);
}

.mk img {
    max-width: 100%;
}

.mk-wrap {
    /* 1440 content + 2x24 padding: the design's outer width. */
    max-width: 1488px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Image placeholder. The design uses <image-slot>, a canvas-only component
   that renders the caption until someone drops a file on it. On the live site
   there is no drop target, so the slot degrades to the same captioned tile. */
.mk-ph {
    width: 100%;
    height: 100%;
    background: var(--mk-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--mk-muted-2);
}

.mk-ph--r10 {
    border-radius: 10px;
}

/* Catalogue photo. Sized to the slot the placeholder would have filled, so a
   row with a photo and a row without line up in the same grid. */
.mk-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--mk-soft);
}

.mk-img.mk-ph--r10 {
    border-radius: 10px;
}

/* ============================ HEADER ============================ */

.mk-hd {
    position: sticky;
    top: 0;
    z-index: 80;
    background: #fff;
    border-bottom: 1px solid var(--mk-border);
}

.mk-hd-top {
    background: var(--mk-ink);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12.5px;
}

.mk-hd-top a {
    color: rgba(255, 255, 255, 0.85);
}

.mk-hd-top a:hover {
    color: #fff;
}

.mk-hd-topin {
    padding-top: 7px;
    padding-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mk-hd-topl,
.mk-hd-topr {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mk-hd-topl strong {
    color: #fff;
}

.mk-hd-sell {
    color: var(--mk-amber) !important;
    font-weight: 600;
}

.mk-hd-sell:hover {
    color: #FFC85C !important;
}

/* Language switcher */
.mk-lang {
    position: relative;
}

.mk-lang-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    padding: 0;
}

.mk-lang-btn::after {
    content: " \25BE";
}

.mk-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    color: var(--mk-ink);
    border: 1px solid var(--mk-border);
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(11, 27, 51, 0.16);
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-width: 164px;
    text-align: left;
    z-index: 90;
    /* The list grows with every market that gets a translation, and it hangs
       off a bar that is already ~180px down the page; without a ceiling it
       runs off the bottom of a short laptop viewport. */
    max-height: 60vh;
    overflow-y: auto;
}

.mk-lang-menu[hidden] {
    display: none;
}

.mk-lang-menu a {
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--mk-ink);
}

.mk-lang-menu a:hover {
    background: var(--mk-soft);
    color: var(--mk-ink);
}

/* Il mercato in cui si sta: la voce corrente si riconosce senza doverla
   leggere due volte. */
.mk-lang-menu a.is-current {
    font-weight: 800;
    background: var(--mk-soft);
}

/* Il selettore del paese porta dentro "Spedisci in: Italia", quindi e` piu`
   largo di quello della lingua e non deve andare a capo. */
.mk-market .mk-lang-btn {
    gap: 4px;
}

.mk-market .mk-lang-btn strong {
    font-weight: 700;
}

/* Main bar */
.mk-hd-main {
    padding-top: 14px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.mk-hd-logo {
    flex-shrink: 0;
}

.mk-hd-logo img {
    height: 30px;
    width: auto;
    display: block;
}

.mk-search {
    flex: 1 1 340px;
    min-width: 260px;
    position: relative;
}

.mk-search-box {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--mk-red);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.mk-search-box input {
    flex: 1;
    border: none;
    outline: none;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--mk-ink);
    min-width: 0;
}

.mk-search-box button {
    background: var(--mk-red);
    color: #fff;
    border: none;
    padding: 0 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mk-search-box button:hover {
    background: var(--mk-red-dark);
}

.mk-sugg {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 12px;
    box-shadow: 0 20px 44px rgba(11, 27, 51, 0.14);
    padding: 8px;
    z-index: 90;
}

.mk-sugg[hidden] {
    display: none;
}

.mk-sugg a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.mk-sugg a:hover {
    background: var(--mk-soft);
}

.mk-sugg .mk-sugg-hint {
    font-size: 12px;
    color: var(--mk-muted-2);
}

/* Header actions */
.mk-hd-acts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mk-hd-act {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mk-ink);
}

.mk-hd-act:hover {
    background: var(--mk-soft);
}

.mk-hd-act--cart:hover {
    color: var(--mk-ink);
}

.mk-cart-ico {
    position: relative;
    display: inline-flex;
}

.mk-cart-count {
    position: absolute;
    top: -7px;
    right: -9px;
    background: var(--mk-red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    /* 17 + 2x4 padding: the design's pill, not a circle */
    min-width: 25px;
    height: 17px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.mk-cart-count[hidden] {
    display: none;
}

.mk-hd-login {
    font-size: 14px;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 10px;
}

.mk-hd-login:hover {
    background: var(--mk-soft);
}

.mk-hd-signup {
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    background: var(--mk-ink);
    padding: 10px 18px;
    border-radius: 10px;
}

.mk-hd-signup:hover {
    background: var(--mk-red);
}

/* Category strip + mega menu */
.mk-hd-cats {
    border-top: 1px solid var(--mk-border);
}

.mk-hd-catsrow {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Must NOT scroll: it holds the mega-menu button, and a scroll container
       clips its absolutely positioned panel (overflow-x:auto forces overflow-y
       to auto as well). That is why "Tutte le categorie" opened onto nothing. */
    overflow: visible;
}

.mk-hd-catsin {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    min-width: 0;
    flex: 1;
    scrollbar-width: thin;
}

.mk-mega-holder {
    position: relative;
    flex-shrink: 0;
}

.mk-mega-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    background: transparent;
    color: var(--mk-ink);
}

.mk-mega-btn[aria-expanded="true"] {
    background: var(--mk-ink);
    color: #fff;
}

.mk-mega {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 26px 54px rgba(11, 27, 51, 0.16);
    padding: 22px;
    z-index: 90;
    flex-wrap: wrap;
    /* An absolutely positioned flex box shrink-to-fits, so max-width alone let
       the four groups collapse into one narrow column. The design wants them
       side by side: give it a real width. */
    /* 760 content + 2x22 padding + 2x1 border */
    width: min(806px, 92vw);
    max-width: min(806px, 92vw);
}

.mk-mega[hidden] {
    display: none;
}

.mk-mega-col {
    min-width: 160px;
    flex: 1;
}

.mk-mega-col > strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--mk-ink);
    padding: 0 10px 6px;
}

.mk-mega-col a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--mk-text-2);
}

.mk-mega-col a:hover {
    background: var(--mk-soft);
    color: var(--mk-red);
}

.mk-cat {
    flex-shrink: 0;
    padding: 12px 13px;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--mk-text-2);
}

.mk-cat--hot {
    color: var(--mk-red);
    font-weight: 600;
}

.mk-cat--local {
    color: var(--mk-blue);
    font-weight: 600;
}

/* ============================ HERO ============================ */

.mk-sec-hero {
    padding-top: 28px;
}

.mk-hero {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    background: var(--mk-ink);
    border-radius: 20px;
    padding: 40px 44px;
    color: #fff;
}

.mk-hero-copy {
    flex: 1 1 380px;
    min-width: 280px;
}

.mk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 17, 60, 0.18);
    color: var(--mk-pink-text);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.mk-hero h1 {
    margin: 16px 0 0;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.mk-hero-sub {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 46ch;
}

.mk-hero-chips {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.mk-hero-chips a {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
}

.mk-hero-chips a:hover {
    background: var(--mk-red);
    color: #fff;
}

/* Two tilted product cards stacked in the hero */
.mk-hero-art {
    flex: 1 1 340px;
    min-width: 280px;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.mk-hero-stack {
    position: relative;
    width: 100%;
    max-width: 430px;
    height: 300px;
}

.mk-hcard {
    position: absolute;
    /* 232 content + 2x10 padding */
    width: 252px;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.mk-hcard--b {
    top: 0;
    right: 0;
    transform: rotate(3deg);
}

.mk-hcard--a {
    top: 30px;
    left: 8px;
    transform: rotate(-4deg);
}

.mk-hcard-img {
    height: 138px;
    border-radius: 10px;
    overflow: hidden;
}

.mk-hcard-body {
    padding: 10px 6px 6px;
}

.mk-hcard-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--mk-ink);
    line-height: 1.3;
}

.mk-hcard-seller {
    font-size: 11.5px;
    color: var(--mk-muted-2);
    margin-top: 2px;
}

.mk-hcard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.mk-hcard-price {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--mk-ink);
}

.mk-hcard-add {
    background: var(--mk-red);
    color: #fff;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
}

/* ============================ SECTION HEADS ============================ */

.mk-sec {
    padding-top: 56px;
}

.mk-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mk-sec-head h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mk-sec-head p {
    margin: 6px 0 0;
    font-size: 14.5px;
    color: var(--mk-muted);
}

.mk-sec-head-c {
    text-align: center;
}

.mk-sec-head-c h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mk-sec-head-c p {
    margin: 6px 0 0;
    font-size: 14.5px;
    color: var(--mk-muted);
}

.mk-link-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--mk-red);
}

.mk-link-all::after {
    content: " \2192";
}

.mk-linkbtn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--mk-red);
    padding: 0;
}

/* ============================ PRODUCT CARDS ============================ */

/* /deals-app: a single horizontally scrollable row, paged 4 at a time. */
.mk-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 18px;
    margin-top: 24px;
    overflow-x: auto;
    padding-bottom: 8px;
}

/* /gift-ideas: a wrapping grid, filtered client-side. */
.mk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.mk-card {
    display: block;
    border: 1px solid var(--mk-border);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.mk-card:hover {
    border-color: var(--mk-red);
}

.mk-card[hidden] {
    display: none;
}

.mk-card-img {
    height: 190px;
    position: relative;
}

.mk-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--mk-red);
    color: #fff;
}

.mk-card-badge--near {
    background: var(--mk-blue);
}

.mk-card-badge--tag {
    background: var(--mk-ink);
}

.mk-card-badge--exp {
    background: var(--mk-blue);
}

.mk-card-body {
    padding: 13px 15px 15px;
}

.mk-card-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mk-ink);
    line-height: 1.35;
}

.mk-card-meta {
    font-size: 12.5px;
    color: var(--mk-muted-2);
    margin-top: 4px;
}

.mk-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.mk-card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--mk-ink);
}

.mk-card-price--solo {
    font-size: 16px;
    font-weight: 700;
    color: var(--mk-ink);
    margin-top: 9px;
}

.mk-add {
    border: none;
    border-radius: 9px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: var(--mk-red);
}

.mk-add.is-added {
    background: var(--mk-ink);
}

.mk-add.is-added::before {
    content: "\2713 ";
}

/* ============================ PAGER ============================ */

.mk-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
}

.mk-pager[hidden] {
    display: none;
}

.mk-pg {
    /* 38 content + 2x1.5 border */
    min-width: 41px;
    height: 41px;
    border-radius: 10px;
    border: 1.5px solid var(--mk-line);
    background: #fff;
    color: var(--mk-text-2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.mk-pg.is-active {
    border-color: var(--mk-red);
    background: var(--mk-red);
    color: #fff;
}

.mk-nav {
    min-width: 41px;
    height: 41px;
    border-radius: 10px;
    border: 1.5px solid var(--mk-line);
    background: #fff;
    color: var(--mk-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mk-nav:disabled {
    color: var(--mk-disabled);
    cursor: default;
}

.mk-nav--prev::before {
    content: "\2190";
}

.mk-nav--next::before {
    content: "\2192";
}

/* ============================ PERK CARDS ============================ */

.mk-sec-perks {
    padding-top: 64px;
}

.mk-perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.mk-perks--spaced {
    margin-top: 28px;
}

.mk-perk {
    border: 1px solid var(--mk-border);
    border-radius: 16px;
    padding: 28px 26px;
    text-align: center;
}

.mk-perk-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--mk-pink);
    color: var(--mk-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
}

/* Perk glyphs live here, not in the page HTML — see the note at the top. */
.mk-perk-ico--x::before { content: "\2715"; }
.mk-perk-ico--eur::before { content: "\20AC"; }
.mk-perk-ico--down::before { content: "\25BC"; }
.mk-perk-ico--star::before { content: "\2726"; }
.mk-perk-ico--leaf::before { content: "\2766"; }
.mk-perk-ico--swap::before { content: "\21C4"; }

.mk-perk-title {
    font-size: 16.5px;
    font-weight: 700;
    margin-top: 14px;
}

.mk-perk p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mk-muted);
}

/* ============================ FILTERS (/gift-ideas) ============================ */

.mk-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.mk-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mk-filter-lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--mk-muted-2);
    width: 68px;
}

.mk-chip {
    border: 1.5px solid var(--mk-line);
    background: #fff;
    color: var(--mk-text-2);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.mk-chip.is-active {
    border-color: var(--mk-red);
    background: var(--mk-pink);
    color: var(--mk-red);
}

.mk-empty {
    border: 1px dashed var(--mk-line);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    margin-top: 26px;
    color: var(--mk-muted);
    font-size: 14.5px;
}

.mk-empty[hidden] {
    display: none;
}

.mk-empty .mk-linkbtn {
    font-size: 14.5px;
}

/* ============================ BANDS ============================ */

.mk-sec-band {
    margin-top: 64px;
    padding-bottom: 64px;
}

.mk-sec-band--mid {
    margin-top: 56px;
    padding-bottom: 0;
}

/* App download band (/deals-app) */
.mk-appband {
    background: var(--mk-soft);
    border: 1px solid var(--mk-border);
    border-radius: 20px;
    padding: 44px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.mk-appband-copy {
    flex: 1 1 360px;
    min-width: 280px;
}

.mk-appband-copy h2 {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mk-appband-copy p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mk-muted);
    max-width: 48ch;
}

.mk-stores {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.mk-stores img {
    height: 44px;
    width: auto;
    display: block;
}

.mk-appband-grid {
    flex: 1 1 400px;
    min-width: 280px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.mk-mini {
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 14px;
    padding: 18px;
}

.mk-mini strong {
    font-size: 14px;
    font-weight: 700;
}

.mk-mini p {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--mk-muted);
}

/* Gift wrapping band (/gift-ideas) */
.mk-wrapband {
    background: var(--mk-pink);
    border-radius: 20px;
    padding: 36px 44px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.mk-wrapband-copy {
    flex: 1 1 360px;
    min-width: 280px;
}

.mk-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--mk-red);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mk-wrapband-copy h2 {
    margin: 10px 0 0;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.mk-wrapband-copy p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mk-muted);
    max-width: 52ch;
}

.mk-btn-red {
    background: var(--mk-red);
    color: #fff !important;
    border-radius: 11px;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
}

.mk-btn-red:hover {
    background: var(--mk-red-dark);
}

.mk-btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
    border-radius: 11px;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
}

.mk-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Secondary button for a white background. .mk-btn-ghost is the counterpart
   used inside the dark bands, where a border would disappear. */
.mk-btn-line {
    border: 1.5px solid var(--mk-line);
    border-radius: 11px;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
}

.mk-btn-line:hover {
    border-color: var(--mk-red);
    color: var(--mk-red);
}

/* Gift card band (/gift-ideas) */
.mk-gcband {
    background: var(--mk-ink);
    border-radius: 20px;
    padding: 44px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    color: #fff;
}

.mk-gcband-copy {
    flex: 1 1 360px;
    min-width: 280px;
}

.mk-gcband-copy h2 {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mk-gcband-copy p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 50ch;
}

.mk-amounts {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.mk-amount {
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #fff;
    border-radius: 999px;
    padding: 9px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mk-amount.is-active {
    border-color: var(--mk-red);
    background: var(--mk-red);
}

.mk-gcband-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.mk-gc-art {
    flex: 0 1 340px;
    min-width: 260px;
}

.mk-gc {
    background: linear-gradient(135deg, #E8113C, #8F0A24);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 24px 50px rgba(232, 17, 60, 0.35);
    transform: rotate(-2deg);
}

.mk-gc img {
    height: 22px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.mk-gc-amount {
    font-size: 30px;
    font-weight: 800;
    margin-top: 34px;
}

.mk-gc-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.8);
}

.mk-gc-to::after {
    content: " \1F381";
}

/* ============================ FOOTER ============================ */

.mk-ft {
    background: var(--mk-ink);
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
}

.mk-ft a {
    color: rgba(255, 255, 255, 0.65);
}

.mk-ft a:hover {
    color: #fff;
}

.mk-ft-cols {
    padding-top: 56px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.mk-ft-brand {
    grid-column: span 1;
    min-width: 220px;
}

.mk-ft-brand img {
    height: 26px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.mk-ft-brand p {
    margin: 14px 0 0;
    max-width: 30ch;
    line-height: 1.65;
    font-size: 13.5px;
}

.mk-socials {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.mk-socials a {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 700;
}

.mk-socials a:hover {
    background: var(--mk-red);
    color: #fff;
}

.mk-ft-col > strong {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.mk-ft-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
}

.mk-ft-links a {
    font-size: 13.5px;
}

.mk-ft-pay {
    padding-top: 34px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mk-ft-pay span {
    background: #fff;
    color: var(--mk-ink);
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mk-ft-legal {
    margin-top: 24px;
    padding-top: 22px;
    padding-bottom: 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 12.5px;
    line-height: 1.7;
}

.mk-ft-legal-r {
    text-align: right;
}

.mk-ft-legal-links {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    margin-top: 4px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .mk-hero {
        padding: 28px 22px;
    }

    .mk-appband,
    .mk-gcband {
        padding: 28px 22px;
    }

    .mk-wrapband {
        padding: 28px 22px;
    }

    .mk-ft-legal-r {
        text-align: left;
    }

    .mk-ft-legal-links {
        justify-content: flex-start;
    }
}

/* ============================ 404 (/not-found) ============================ */

/* The 404 carries the header and the footer but almost nothing in between, so
   the page is a column: the panel takes the leftover height and the footer
   stays at the bottom instead of floating halfway up a tall viewport. */
.mk-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mk-nf {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 24px;
}

.mk-nf-in {
    max-width: 560px;
    text-align: center;
}

.mk-nf-code {
    font-size: clamp(80px, 12vw, 140px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

/* the middle zero */
.mk-nf-code span {
    color: var(--mk-red);
}

.mk-nf-in h1 {
    margin: 18px 0 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mk-nf-in p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mk-muted);
}

.mk-nf-acts {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px;
}

.mk-nf-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.mk-nf-pill {
    border: 1px solid var(--mk-border);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mk-text-2);
}

.mk-nf-pill:hover {
    border-color: var(--mk-red);
    color: var(--mk-red);
}

/* Perk glyphs for the remaining category pages. */
.mk-perk-ico--check::before { content: "\2713"; }
.mk-perk-ico--hash::before { content: "\0023"; }
.mk-perk-ico--shield::before { content: "\26E8"; }
.mk-perk-ico--near::before { content: "\25C9"; }
.mk-perk-ico--gear::before { content: "\2699"; }
.mk-perk-ico--heart::before { content: "\2665"; }
.mk-perk-ico--pen::before { content: "\270E"; }

/* ============================ REAL-DATA FITTING ============================
   The design was drawn with short invented names ("Cuffie wireless ANC").
   Live feed titles run long ("Sandalo con zeppa camoscio beige Carmensita
   Francy - Beige / 35"), which pushed the price rows out of alignment and made
   the two tilted hero cards different heights, so the stack read as broken.
   Clamping restores the design's fixed card geometry. */

.mk-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.mk-card-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-hcard-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.mk-hcard-seller {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The rail is paged four at a time, so the row must not also stretch: without
   this a two-line title on one card lifted its neighbours' prices. */
.mk-rail .mk-card,
.mk-grid .mk-card {
    align-self: start;
}

/* Currency glyph for the "best price guaranteed" perk. The market decides which
   one, so an en_US page never shows a euro sign. */
.mk-perk-ico--usd::before { content: "\0024"; }
.mk-perk-ico--gbp::before { content: "\00A3"; }

/* Category strip keeps its colour on hover: in the design these are inline
   styles, which a:hover cannot override. Only the background may change. */
.mk-cat:hover { color: var(--mk-text-2); }
.mk-cat--hot:hover { color: var(--mk-red); }
.mk-cat--local:hover { color: var(--mk-blue); }

/* ============================ SITE TYPEFACE ============================
   Poppins for the whole page, not just the marketplace chrome. Before this the
   shell was Poppins while bodies kept 'Inter' (dist/css/home.css) or 'Outfit'
   (page/css/business-modern.css, on h1–h6), so the harmonised header read as
   pasted on. market.css is linked last in every shell that uses it, so these
   win on order at equal specificity; the headings rule is a class-free element
   list to match how business-modern.css declares its own. */

body {
    font-family: Poppins, Helvetica, Arial, sans-serif;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: Poppins, Helvetica, Arial, sans-serif;
}

/* Current category. The design canvas has no such state — it is a static
   screen — but on a live site the strip is navigation, and navigation has to
   say where you are. A red underline reads as "selected" without competing
   with the hot/local colours the design already assigns. */
.mk-cat.is-current {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 0 var(--mk-red);
}

.mk-cat:active,
.mk-hero-chips a:active,
.mk-mega-col a:active {
    opacity: 0.7;
}

/* ============================ SHOPPING APP (/shopping-app) ============================
   Its own layout: a full-bleed dark hero with a phone mockup, not the rounded
   hero card the category pages share. Glyphs live here as CSS content because
   the page-content pipeline entity-encodes stray Unicode — emoji included. */

.mk-sa-hero {
    background: var(--mk-ink);
    color: #fff;
}

.mk-sa-heroin {
    padding-top: 64px;
    padding-bottom: 72px;
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.mk-sa-copy {
    flex: 1 1 440px;
    min-width: 300px;
}

.mk-sa-copy h1 {
    margin: 18px 0 0;
    font-size: clamp(30px, 3.8vw, 50px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: pretty;
}

.mk-sa-sub {
    margin: 16px 0 0;
    font-size: 16.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    max-width: 52ch;
}

.mk-sa-stores {
    display: flex;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
    align-items: center;
}

.mk-sa-stores img {
    height: 46px;
    width: auto;
    display: block;
}

.mk-sa-qr {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 16px;
}

.mk-sa-qr img {
    width: 74px;
    height: 74px;
    border-radius: 8px;
    background: #fff;
    display: block;
}

.mk-sa-qr span {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    max-width: 20ch;
}

.mk-sa-phone-wrap {
    flex: 0 1 380px;
    min-width: 280px;
    display: flex;
    justify-content: center;
}

.mk-sa-phone {
    width: 300px;
    height: 600px;
    background: #10254a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 38px;
    padding: 12px;
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.4);
}

.mk-sa-phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
}

.mk-sa-phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mk-sa-sec {
    padding-top: 72px;
}

.mk-sa-split {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.mk-sa-split-copy {
    flex: 1 1 420px;
    min-width: 300px;
}

.mk-sa-split-copy h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.mk-sa-split-copy p {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mk-text-2);
    max-width: 56ch;
}

.mk-sa-split-copy p + p {
    margin-top: 12px;
}

.mk-sa-split-copy strong {
    color: var(--mk-ink);
}

/* The only app screenshots on disk are portrait phone captures, so this
   landscape slot contains rather than covers: cropping a 700x1517 shot to
   460x320 would show a sliver of chrome and nothing legible. */
.mk-sa-split-art {
    flex: 0 1 460px;
    min-width: 300px;
    height: 320px;
    background: var(--mk-soft);
    border-radius: 20px;
    overflow: hidden;
}

.mk-sa-split-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mk-sa-intro {
    max-width: 720px;
}

.mk-sa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mk-pink);
    color: var(--mk-red);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.mk-sa-intro h2 {
    margin: 16px 0 0;
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 800;
    letter-spacing: -0.015em;
    text-wrap: pretty;
}

.mk-sa-intro p {
    margin: 14px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--mk-text-2);
}

.mk-sa-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.mk-sa-cards--stories {
    margin-top: 36px;
}

.mk-sa-story {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 28px 26px;
}

.mk-sa-feature {
    border: 1px solid var(--mk-border);
    border-radius: 16px;
    padding: 30px 28px;
}

.mk-sa-ico {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    color: var(--mk-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}

.mk-sa-story .mk-sa-ico {
    background: #fff;
    border: 1px solid var(--mk-border);
}

.mk-sa-feature .mk-sa-ico {
    background: var(--mk-pink);
}

.mk-sa-ico--mail::before { content: "\2709"; }
.mk-sa-ico--bolt::before { content: "\26A1"; }
.mk-sa-ico--city::before { content: "\1F306"; }
.mk-sa-ico--passport::before { content: "\1F6C2"; }
.mk-sa-ico--star::before { content: "\2726"; }
.mk-sa-ico--chat::before { content: "\1F4AC"; }

.mk-sa-story-title,
.mk-sa-feature-title {
    font-size: 16.5px;
    font-weight: 700;
    margin-top: 14px;
}

.mk-sa-feature-title {
    font-size: 17px;
}

.mk-sa-story p,
.mk-sa-feature p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--mk-muted);
    text-wrap: pretty;
}

.mk-sa-band {
    margin-top: 72px;
    padding-bottom: 64px;
}

.mk-sa-biz {
    background: #F8FAFC;
    border-radius: 20px;
    padding: 48px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.mk-sa-biz-copy {
    flex: 1 1 380px;
    min-width: 280px;
}

.mk-sa-biz-copy h2 {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mk-sa-biz-copy p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mk-muted);
    max-width: 56ch;
}

@media (max-width: 640px) {
    .mk-sa-heroin { padding-top: 40px; padding-bottom: 48px; }
    .mk-sa-biz { padding: 28px 22px; }
}

/* ============================ SEARCH RESULTS ============================
   /search. Same design system as the landing pages — the cards, the pager and
   the badges below are the shared .mk-card / .mk-pager components — plus the
   filter rail and the result header this screen needs.

   Everything a visitor can click here is a <button>, never a styled <div>:
   the filters are controls, so they must be reachable by keyboard and
   announced as pressable. Glyphs are declared as CSS `content` for the reason
   given at the top of this file. */

.mk-sr-top {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mk-sr-crumb {
    font-size: 13px;
    color: var(--mk-muted-2);
}

.mk-sr-crumb a {
    color: var(--mk-muted-2);
}

.mk-sr-crumb-sep::before {
    content: "\203A";
    margin: 0 6px;
}

.mk-sr-crumb-now {
    color: var(--mk-ink);
    font-weight: 600;
}

.mk-sr-popular {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mk-sr-popular-lbl {
    font-size: 12.5px;
    color: var(--mk-muted-2);
}

.mk-sr-pop {
    background: #F1F4F8;
    color: var(--mk-text-2);
    border: none;
    border-radius: 999px;
    padding: 6px 13px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.mk-sr-pop:hover {
    background: var(--mk-pink);
    color: var(--mk-red);
}

/* ---------------------------- TABS ---------------------------- */

.mk-sr-tabsec {
    padding-top: 14px;
}

.mk-sr-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--mk-border);
    overflow-x: auto;
}

.mk-sr-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    padding: 11px 15px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mk-muted);
    margin-bottom: -1px;
    border-bottom: 2.5px solid transparent;
}

.mk-sr-tab.is-active {
    color: var(--mk-ink);
    font-weight: 700;
    border-bottom-color: var(--mk-red);
}

/* An empty collection keeps its tab — removing it would make the row jump
   between searches — but stops competing for attention and moves to the end. */
.mk-sr-tab.is-empty {
    opacity: 0.45;
    order: 9;
}

.mk-sr-tabn {
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
    background: #F1F4F8;
    color: var(--mk-muted-2);
}

.mk-sr-tabn[hidden] {
    display: none;
}

/* ---------------------------- LAYOUT ---------------------------- */

.mk-sr-body {
    padding-top: 24px;
    padding-bottom: 64px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
    min-height: 480px;
}

.mk-sr-side {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    /* clears the sticky header */
    top: 150px;
}

.mk-sr-side[hidden] {
    display: none;
}

.mk-sr-main {
    flex: 1 1 480px;
    min-width: 0;
}

/* ---------------------------- FILTER RAIL ---------------------------- */

.mk-sr-group[hidden] {
    display: none;
}

.mk-sr-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.mk-sr-group-lbl {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mk-ink);
}

.mk-sr-reset {
    border: none;
    background: none;
    color: var(--mk-red);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.mk-sr-reset::after {
    content: " \2715";
}

.mk-sr-reset[hidden] {
    display: none;
}

.mk-sr-opts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.mk-sr-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 9px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mk-text-2);
    background: transparent;
    cursor: pointer;
}

.mk-sr-opt:hover {
    background: var(--mk-soft);
}

.mk-sr-opt.is-active {
    background: var(--mk-pink);
    color: var(--mk-red);
    font-weight: 700;
}

.mk-sr-opt-lbl {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-sr-opt-n {
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
    background: #F1F4F8;
    color: var(--mk-muted-2);
    flex-shrink: 0;
}

.mk-sr-opt.is-active .mk-sr-opt-n {
    background: var(--mk-red);
    color: #fff;
}

/* Radio dot for the price bands: they are mutually exclusive, and the design
   marks that with a dot rather than the plain highlight the other groups use. */
.mk-sr-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid var(--mk-disabled);
    background: #fff;
}

.mk-sr-opt.is-active .mk-sr-dot {
    border-color: var(--mk-red);
    background: radial-gradient(circle, var(--mk-red) 42%, #fff 46%);
}

.mk-sr-toggle {
    width: 100%;
    text-align: left;
    border: 1.5px solid var(--mk-line);
    background: #fff;
    color: var(--mk-text-2);
    border-radius: 10px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.mk-sr-toggle--near::before {
    content: "\25C9  ";
}

.mk-sr-toggle--exp::before {
    content: "\26A1  ";
}

.mk-sr-toggle--near.is-active {
    border-color: var(--mk-blue);
    background: var(--mk-blue);
    color: #fff;
}

.mk-sr-toggle--exp.is-active {
    border-color: var(--mk-ink);
    background: var(--mk-ink);
    color: #fff;
}

/* ---------------------------- RESULT HEADER ---------------------------- */

.mk-sr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--mk-border);
    padding-bottom: 14px;
}

.mk-sr-h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mk-sr-count {
    font-size: 13px;
    color: var(--mk-muted-2);
}

.mk-sr-head-r {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mk-sr-filtbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--mk-line);
    background: #fff;
    color: var(--mk-text-2);
    border-radius: 9px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.mk-sr-filtbtn::before {
    content: "\2699  ";
}

/* Pressed state means "the rail is hidden", i.e. the button is the only way
   back to the filters — so it is the one that has to stand out. */
.mk-sr-filtbtn[aria-expanded="false"] {
    border-color: var(--mk-red);
    background: var(--mk-pink);
    color: var(--mk-red);
}

.mk-sr-views {
    display: flex;
    gap: 3px;
    border: 1.5px solid var(--mk-line);
    border-radius: 10px;
    padding: 3px;
}

.mk-sr-view {
    width: 32px;
    height: 28px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mk-muted-2);
}

.mk-sr-view.is-active {
    background: var(--mk-ink);
    color: #fff;
}

.mk-sr-view--grid::before {
    content: "\229E";
}

.mk-sr-view--list::before {
    content: "\2630";
}

.mk-sr-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mk-sr-sort-lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--mk-muted);
}

.mk-sr-sortbtn {
    border: 1.5px solid var(--mk-line);
    background: #fff;
    color: var(--mk-text-2);
    border-radius: 9px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.mk-sr-sortbtn.is-active {
    border-color: var(--mk-ink);
    background: var(--mk-ink);
    color: #fff;
}

.mk-sr-sortbtn--asc::after {
    content: " \2191";
}

.mk-sr-sortbtn--desc::after {
    content: " \2193";
}

/* ---------------------------- ACTIVE FILTERS ---------------------------- */

.mk-sr-active {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.mk-sr-active[hidden] {
    display: none;
}

.mk-sr-active-lbl {
    font-size: 12.5px;
    color: var(--mk-muted-2);
}

.mk-sr-active-chips {
    display: contents;
}

.mk-sr-fchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--mk-pink);
    color: var(--mk-red);
    border: none;
    border-radius: 999px;
    padding: 6px 13px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.mk-sr-fchip::after {
    content: "\2715";
}

.mk-sr-clear {
    border: none;
    background: none;
    color: var(--mk-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* ---------------------------- NOTES ---------------------------- */

.mk-sr-note {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--mk-muted);
}

.mk-sr-note[hidden] {
    display: none;
}

.mk-sr-note b {
    color: var(--mk-ink);
}

.mk-sr-link {
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: var(--mk-red);
    cursor: pointer;
}

.mk-sr-related {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ---------------------------- GRID ---------------------------- */

.mk-sr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

/* Loading placeholders. Shaped and sized like the cards they stand in for, so
   the grid does not jump when the results arrive. A bare search over this
   catalogue can take a few seconds the first time it is asked, and a blank
   panel for those seconds is read as a broken page, not a busy one. */
.mk-sr-skel {
    height: 302px;
    border: 1px solid var(--mk-border);
    border-radius: 16px;
    background: linear-gradient(100deg, var(--mk-soft) 30%, #FBFCFE 50%, var(--mk-soft) 70%);
    background-size: 300% 100%;
    animation: mk-sr-shimmer 1.3s ease-in-out infinite;
}

.mk-sr-grid.is-list .mk-sr-skel {
    height: 150px;
}

@keyframes mk-sr-shimmer {
    from { background-position: 150% 0; }
    to { background-position: -150% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-sr-skel {
        animation: none;
    }
}

.mk-sr-grid.is-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mk-sr-grid.is-list .mk-card {
    display: flex;
    align-items: stretch;
}

.mk-sr-grid.is-list .mk-card-img {
    width: 200px;
    min-height: 148px;
    height: auto;
    flex-shrink: 0;
}

.mk-sr-grid.is-list .mk-card-body {
    padding: 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* The tag sits at the bottom of the thumbnail so it never collides with the
   "near you" badge, which the design keeps in the top-left corner. */
.mk-card-badge--btm {
    top: auto;
    bottom: 10px;
    font-weight: 600;
    letter-spacing: 0;
    background: rgba(11, 27, 51, 0.75);
}

.mk-sr-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mk-sr-play::before {
    content: "\25B6";
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(11, 27, 51, 0.72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding-left: 3px;
}

.mk-sr-acts {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mk-sr-fav {
    background: #fff;
    border: 1.5px solid var(--mk-line);
    border-radius: 9px;
    width: 34px;
    height: 32px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: var(--mk-muted-2);
    padding: 0;
}

.mk-sr-fav::before {
    content: "\2661";
}

.mk-sr-fav.is-on {
    border-color: var(--mk-red);
    color: var(--mk-red);
}

.mk-sr-fav.is-on::before {
    content: "\2665";
}

/* Stores, videos and news are not bought, so their button is an outline: the
   red pill is reserved for the one action that spends money. */
.mk-sr-go {
    border: 1.5px solid var(--mk-ink);
    background: #fff;
    color: var(--mk-ink);
    border-radius: 9px;
    padding: 0 14px;
    height: 32px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.mk-sr-grid .mk-add {
    height: 32px;
    padding: 0 14px;
}

/* ---------------------------- STATES ---------------------------- */

.mk-sr-state {
    text-align: center;
    padding: 64px 24px;
    border: 1px dashed var(--mk-line);
    border-radius: 20px;
    margin-top: 20px;
}

.mk-sr-state[hidden] {
    display: none;
}

.mk-sr-state-ico {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #F1F4F8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.mk-sr-state-ico::before {
    content: "\1F50D";
}

.mk-sr-state h2 {
    margin: 18px 0 0;
    font-size: 20px;
    font-weight: 700;
}

.mk-sr-state p {
    margin: 10px auto 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--mk-muted);
    max-width: 46ch;
}

.mk-sr-state .mk-btn-red {
    margin-top: 20px;
}

.mk-sr-pager {
    margin-top: 28px;
}

.mk-sr-pgnums {
    display: contents;
}

/* ---------------------------- NARROW ---------------------------- */

@media (max-width: 900px) {
    .mk-sr-body {
        flex-direction: column;
    }

    .mk-sr-side {
        position: static;
        flex-basis: auto;
        width: 100%;
        order: 2;
    }

    .mk-sr-main {
        order: 1;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .mk-sr-popular {
        display: none;
    }

    .mk-sr-head-r {
        gap: 10px;
    }

    .mk-sr-sort-lbl {
        display: none;
    }

    .mk-sr-grid.is-list .mk-card-img {
        width: 120px;
        min-height: 120px;
    }
}

/* ============================ STORE (shoppi.app/<slug>) ============================

   The merchant storefront. Rendered by content.html, which is the template the
   framework picks for a `contents` document, so every one of the ~48k store
   slugs gets this screen.

   Same rule as the rest of this file: decorative glyphs are declared here as
   CSS `content`, never typed into the template. The renderer entity-encodes
   stray Unicode on its way out and they arrive mangled; CSS is served raw. */

.mk-st-top {
    padding-top: 24px;
}

.mk-st-cover {
    position: relative;
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--mk-ink);
}

.mk-st-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mk-st-idbar {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    padding: 0 24px;
    /* Pulls the avatar up over the cover, as in the design. */
    margin-top: -52px;
    position: relative;
}

.mk-st-avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    background: var(--mk-soft);
    flex-shrink: 0;
    box-shadow: 0 4px 18px rgba(11, 27, 51, 0.12);
}

.mk-st-avatar img {
    width: 100%;
    height: 100%;
    /* Contain, not cover: this is the merchant's logo, and most of them are
       wide wordmarks. Cropping one to a circle cuts the name in half — the
       Cagliostro logo came out reading "OSTRO S". */
    object-fit: contain;
    background: #fff;
    display: block;
}

.mk-st-id {
    flex: 1 1 320px;
    min-width: 260px;
    padding-bottom: 6px;
}

.mk-st-namerow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mk-st-h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mk-st-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--mk-pink);
    color: var(--mk-red);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
}

.mk-st-badge::before {
    content: "\2713";
}

.mk-st-chip {
    display: inline-flex;
    align-items: center;
    background: #F1F4F8;
    color: var(--mk-text-2);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 600;
}

.mk-st-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--mk-muted);
}

.mk-st-meta strong {
    color: var(--mk-ink);
}

.mk-st-place::before {
    content: "\25C9\00A0";
    color: var(--mk-red);
}

.mk-st-acts {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
}

.mk-st-follow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 11px;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: var(--mk-red);
}

.mk-st-follow::before {
    content: "+\00A0";
}

.mk-st-follow:hover {
    background: var(--mk-red-dark);
}

.mk-st-follow.is-on {
    background: var(--mk-ink);
}

.mk-st-follow.is-on::before {
    content: "\2713\00A0";
}

/* The label swaps with the state, so both strings ship in the button and only
   one is ever shown. Writing it from JavaScript would need the translation in
   the script, which the language layer cannot reach. */
.mk-st-follow .mk-st-off,
.mk-st-follow.is-on .mk-st-on {
    display: inline;
}

.mk-st-follow .mk-st-on,
.mk-st-follow.is-on .mk-st-off {
    display: none;
}

.mk-st-follow[disabled] {
    opacity: 0.6;
    cursor: default;
}

.mk-st-msg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid var(--mk-ink);
    background: #fff;
    color: var(--mk-ink);
    border-radius: 11px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
}

.mk-st-msg::before {
    content: "\2709";
}

.mk-st-msg:hover {
    background: var(--mk-ink);
    color: #fff;
}

.mk-st-note {
    margin-top: 10px;
    font-size: 13px;
    color: var(--mk-muted);
    flex-basis: 100%;
}

.mk-st-note a {
    color: var(--mk-red);
    font-weight: 700;
    text-decoration: underline;
}

.mk-st-bio {
    margin: 18px 24px 0;
    max-width: 72ch;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--mk-text-2);
}

/* ---------------------------- TAB BAR ---------------------------- */

.mk-st-nav {
    border-bottom: 1px solid var(--mk-border);
    margin-top: 22px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}

.mk-st-navin {
    display: flex;
    gap: 2px;
    overflow-x: auto;
}

.mk-st-tab {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 14px 15px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mk-text-2);
    border-bottom: 2.5px solid transparent;
}

.mk-st-tab.is-active {
    color: var(--mk-red);
    font-weight: 700;
    border-bottom-color: var(--mk-red);
}

.mk-st-tabn {
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
    background: #F1F4F8;
    color: var(--mk-muted-2);
    margin-left: 8px;
}

.mk-st-navgap {
    flex: 1;
}

.mk-st-find {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    flex-shrink: 0;
}

.mk-st-findbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--mk-line);
    border-radius: 999px;
    padding: 7px 14px;
    background: #F8FAFC;
}

.mk-st-findbox::before {
    content: "\1F50D";
    color: var(--mk-muted-2);
    font-size: 13px;
}

.mk-st-findbox input {
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    width: 200px;
    color: var(--mk-ink);
}

.mk-st-findclear {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--mk-muted-2);
    font-size: 12px;
    padding: 0;
    font-family: inherit;
    line-height: 1;
}

.mk-st-findclear::before {
    content: "\2715";
}

.mk-st-findclear[hidden] {
    display: none;
}

/* ---------------------------- BODY ---------------------------- */

.mk-st-body {
    background: #F8FAFC;
}

.mk-st-bodyin {
    padding-top: 28px;
    padding-bottom: 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.mk-st-sec[hidden] {
    display: none;
}

.mk-st-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mk-st-h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
}

.mk-st-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--mk-muted-2);
    margin-left: 8px;
}

/* Reveals the rows held back below the fold. It is a button, not a link to a
   listing that does not exist: every row is already in this document. */
.mk-st-more {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mk-red);
    padding: 0;
}

.mk-st-more::after {
    content: " \2192";
}

.mk-st-more:hover {
    color: var(--mk-red-dark);
}

.mk-st-more[hidden] {
    display: none;
}

/* ---------------------------- PRODUCTS ---------------------------- */

.mk-st-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.mk-st-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mk-border);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.mk-st-card[hidden] {
    display: none;
}

.mk-st-card:hover {
    border-color: var(--mk-red);
}

.mk-st-cimg {
    height: 200px;
    position: relative;
    flex-shrink: 0;
}

.mk-st-cimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mk-st-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(11, 27, 51, 0.14);
    background: #fff;
    color: var(--mk-muted-2);
    padding: 0;
}

.mk-st-fav::before {
    content: "\2661";
}

.mk-st-fav.is-on {
    color: var(--mk-red);
}

.mk-st-fav.is-on::before {
    content: "\2665";
}

.mk-st-cbody {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mk-st-cname {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--mk-ink);
    line-height: 1.45;
}

.mk-st-cname:hover {
    color: var(--mk-red);
}

.mk-st-cfoot {
    margin-top: auto;
    padding-top: 12px;
}

.mk-st-price {
    font-size: 19px;
    font-weight: 800;
    color: var(--mk-red);
}

.mk-st-buyrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.mk-st-buy {
    /* Alone in its row: the storefront card has no add-to-cart button, so the
       primary action takes the full width instead of leaving a gap where one
       used to sit. */
    flex: 1;
    display: block;
    border: none;
    border-radius: 11px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: var(--mk-red);
    text-align: center;
}

.mk-st-buy:hover {
    background: var(--mk-red-dark);
    color: #fff;
}

/* ---------------------------- VIDEOS ---------------------------- */

.mk-st-vgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.mk-st-vcard {
    display: block;
    border: 1px solid var(--mk-border);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.mk-st-vcard[hidden] {
    display: none;
}

.mk-st-vcard:hover {
    border-color: var(--mk-red);
}

.mk-st-vimg {
    height: 170px;
    position: relative;
}

.mk-st-vimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mk-st-vbody {
    padding: 14px 16px;
}

.mk-st-vname {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--mk-ink);
}

.mk-st-vcard:hover .mk-st-vname {
    color: var(--mk-red);
}

.mk-st-vviews {
    font-size: 12.5px;
    color: var(--mk-muted-2);
    margin-top: 5px;
}

.mk-st-vviews::before {
    content: "\1F441\00A0";
}

/* ---------------------------- PHOTOS ---------------------------- */

.mk-st-pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.mk-st-photo {
    display: block;
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--mk-border);
    background: #fff;
}

.mk-st-photo[hidden] {
    display: none;
}

.mk-st-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------- STORIES ---------------------------- */

.mk-st-ngrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.mk-st-ncard {
    display: flex;
    gap: 16px;
    border: 1px solid var(--mk-border);
    border-radius: 18px;
    background: #fff;
    padding: 16px;
    align-items: center;
}

.mk-st-ncard[hidden] {
    display: none;
}

.mk-st-ncard:hover {
    border-color: var(--mk-red);
}

.mk-st-nimg {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.mk-st-nimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mk-st-nbody {
    min-width: 0;
}

.mk-st-nname {
    font-size: 15px;
    font-weight: 700;
    color: var(--mk-ink);
    line-height: 1.45;
}

.mk-st-ncard:hover .mk-st-nname {
    color: var(--mk-red);
}

.mk-st-ndate {
    font-size: 12.5px;
    color: var(--mk-muted-2);
    margin-top: 6px;
}

/* ---------------------------- INFO + CONTACT ---------------------------- */

.mk-st-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.mk-st-panel {
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 18px;
    padding: 26px;
}

.mk-st-panel h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.mk-st-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--mk-text-2);
}

.mk-st-row {
    display: flex;
    gap: 10px;
}

.mk-st-row strong {
    color: var(--mk-ink);
}

.mk-st-row::before {
    color: var(--mk-red);
    flex-shrink: 0;
}

.mk-st-row--cat::before {
    content: "\2630";
}

.mk-st-row--place::before {
    content: "\25C9";
}

.mk-st-row--web::before {
    content: "\1F517";
}

.mk-st-row--tel::before {
    content: "\260E";
}

.mk-st-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.mk-st-form input,
.mk-st-form textarea {
    border: 1.5px solid var(--mk-line);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 13.5px;
    outline-color: var(--mk-red);
    color: var(--mk-ink);
    background: #fff;
    width: 100%;
}

.mk-st-form textarea {
    resize: vertical;
    min-height: 96px;
}

.mk-st-send {
    align-self: flex-start;
    border: none;
    background: var(--mk-red);
    color: #fff;
    border-radius: 11px;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.mk-st-send:hover {
    background: var(--mk-red-dark);
}

.mk-st-send[disabled] {
    background: var(--mk-disabled);
    cursor: default;
}

.mk-st-ok,
.mk-st-ko {
    margin-top: 16px;
    border-radius: 12px;
    padding: 16px;
    font-size: 13.5px;
    font-weight: 600;
}

.mk-st-ok {
    background: #EFFAF3;
    border: 1px solid #BBE7CC;
    color: #157A3C;
}

.mk-st-ok::before {
    content: "\2713\00A0";
}

.mk-st-ko {
    background: var(--mk-pink);
    border: 1px solid #F6C6D2;
    color: var(--mk-red-dark);
}

.mk-st-ok[hidden],
.mk-st-ko[hidden] {
    display: none;
}

/* ---------------------------- EMPTY STATES ---------------------------- */

.mk-st-empty {
    text-align: center;
    padding: 72px 24px;
    background: #fff;
    border: 1px dashed var(--mk-line);
    border-radius: 20px;
}

.mk-st-empty[hidden] {
    display: none;
}

.mk-st-empty-ico {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #F1F4F8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.mk-st-empty-ico::before {
    content: "\1F3EC";
}

.mk-st-empty h3 {
    margin: 18px 0 0;
    font-size: 20px;
    font-weight: 700;
}

.mk-st-empty p {
    margin: 10px auto 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--mk-muted);
    max-width: 48ch;
}

.mk-st-empty .mk-st-follow {
    margin-top: 20px;
}

/* Narrower variant used when a search inside the store matches nothing. */
.mk-st-nores {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border: 1px dashed var(--mk-line);
    border-radius: 20px;
    margin-top: 16px;
}

.mk-st-nores[hidden] {
    display: none;
}

.mk-st-nores h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.mk-st-nores p {
    margin: 8px auto 0;
    font-size: 13.5px;
    color: var(--mk-muted);
}

.mk-st-nores button,
.mk-st-nores-cta {
    display: inline-block;
    margin-top: 16px;
    border: none;
    background: var(--mk-red);
    color: #fff;
    border-radius: 11px;
    padding: 11px 22px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.mk-st-nores-cta:hover {
    background: var(--mk-red-dark);
    color: #fff;
}

/* The store pager is built from links, not buttons: page 2 of a store has to
   be a URL a crawler can follow and a visitor can bookmark. The shared
   component was written for <button>, which centres its own label and carries
   no link colour; an anchor does neither. */
.mk-st-sec .mk-pg,
.mk-st-sec .mk-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mk-st-sec .mk-pg:hover,
.mk-st-sec .mk-nav:hover {
    border-color: var(--mk-red);
    color: var(--mk-red);
}

.mk-st-sec .mk-pg.is-active,
.mk-st-sec .mk-pg.is-active:hover {
    color: #fff;
}

.mk-pg-gap {
    color: var(--mk-muted-2);
    font-size: 13.5px;
    padding: 0 2px;
}

/* ---------------------------- RESPONSIVE ---------------------------- */

@media (max-width: 900px) {
    .mk-st-cover {
        height: 180px;
    }

    .mk-st-idbar {
        padding: 0;
        gap: 16px;
    }

    .mk-st-avatar {
        width: 96px;
        height: 96px;
    }

    .mk-st-h1 {
        font-size: 24px;
    }

    .mk-st-bio {
        margin-left: 0;
        margin-right: 0;
    }

    .mk-st-acts {
        width: 100%;
        padding-bottom: 0;
    }

    .mk-st-follow,
    .mk-st-msg {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    /* The tab row and the in-store search box cannot share a line on a phone:
       side by side the box squeezes the tabs down to a couple of characters. */
    .mk-st-navin {
        flex-wrap: wrap;
    }

    .mk-st-navgap {
        display: none;
    }

    .mk-st-find {
        order: -1;
        width: 100%;
        padding-bottom: 0;
    }

    .mk-st-findbox {
        width: 100%;
    }

    .mk-st-findbox input {
        width: 100%;
    }

    .mk-st-ncard {
        align-items: flex-start;
    }
}