/* Marketplace (+ tutor extras). Builds on css/gigz.css (.gz variables, buttons, panels, modals). Scoped with .mk-* */
.gz-logo em.mk-em{ background: var(--gz-ok); }
.gz-nav .mk-ic, .gz-tools .mk-ic{ position: relative; }
.mk-dot{ position: absolute; top: -4px; right: -4px; margin: 0; }
.mk-hsearch{ position: relative; flex: 1 1 280px; max-width: 460px; display: flex; align-items: center; }
.mk-hsearch > i{ position: absolute; left: 14px; color: var(--gz-mut); pointer-events: none; }
.mk-hsearch input{ width: 100%; height: 42px; border: 1.5px solid var(--gz-line); border-radius: 999px; background: var(--gz-soft); color: var(--gz-ink); padding: 0 16px 0 40px; font-size: .95rem; font-weight: 600; }
.mk-hsearch input:focus{ outline: 0; border-color: var(--gz-p); background: var(--gz-card); }
.mk-suggest{ position: absolute; top: 48px; left: 0; right: 0; background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: 16px; box-shadow: var(--gz-shadow); overflow: hidden; z-index: 70; }
.mk-suggest a{ display: flex; gap: 10px; align-items: center; padding: 10px 14px; font-weight: 700; font-size: .92rem; } .mk-suggest a:hover{ background: var(--gz-soft); }
.mk-suggest a i{ color: var(--gz-mut); width: 16px; } .mk-suggest small{ margin-left: auto; color: var(--gz-mut); text-transform: capitalize; }
.gz-head-in .gz-nav{ flex: 0 1 auto; }
.mk-wrap{ gap: 22px; }
.mk-hero{ background: linear-gradient(120deg, #1fbf8f 0%, #5b8cff 55%, var(--gz-p) 100%); }

/* ---------- categories ---------- */
.mk-cats{ display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.mk-cat{ flex: none; display: grid; justify-items: center; gap: 4px; width: 104px; padding: 12px 8px; border-radius: 18px; background: var(--gz-card); border: 1px solid var(--gz-line); box-shadow: var(--gz-shadow); text-align: center; transition: transform .15s; }
.mk-cat:hover{ transform: translateY(-3px); border-color: var(--gz-p); }
.mk-cat i{ font-size: 22px; color: var(--gz-p); width: 46px; height: 46px; border-radius: 50%; background: var(--gz-soft); display: grid; place-items: center; }
.mk-cat span{ font-weight: 800; font-size: .76rem; line-height: 1.2; } .mk-cat small{ color: var(--gz-mut); font-weight: 700; font-size: .7rem; }

/* ---------- product cards ---------- */
.mk-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.mk-card{ position: relative; display: flex; flex-direction: column; background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: 18px; overflow: hidden; box-shadow: var(--gz-shadow); transition: transform .15s; }
.mk-card:hover{ transform: translateY(-3px); }
.mk-ph{ display: block; aspect-ratio: 1 / 1; background: var(--gz-soft); overflow: hidden; }
.mk-ph img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .mk-card:hover .mk-ph img{ transform: scale(1.05); }
.mk-noimg{ width: 100%; height: 100%; display: grid; place-items: center; color: var(--gz-mut); font-size: 38px; opacity: .55; } .mk-noimg.big{ min-height: 340px; font-size: 80px; }
.mk-rib{ position: absolute; left: 10px; z-index: 2; font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: #fff; }
.mk-rib.feat{ top: 10px; background: linear-gradient(90deg,#ffd75e,#ffb23d); color: #6b4300; box-shadow: 0 4px 12px rgba(245,181,10,.4); }
.mk-rib.new{ top: 10px; background: var(--gz-ok); }
.mk-rib.off{ top: 36px; background: var(--gz-bad); } .mk-rib.feat ~ .mk-rib.off, .mk-rib.new ~ .mk-rib.off{ top: 36px; } .mk-card > .mk-rib.off:first-of-type{ top: 10px; }
.mk-heart{ position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #6b7090; cursor: pointer; display: grid; place-items: center; font-size: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.mk-heart.on, .mk-heart:hover{ color: #ff3d5a; }
.mk-body{ display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.mk-t{ font-weight: 800; font-size: .95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mk-t:hover{ color: var(--gz-p); }
.mk-price{ font-size: .98rem; } .mk-price b{ font-size: 1.12rem; font-weight: 800; color: var(--gz-ink); } .mk-price s{ color: var(--gz-mut); font-weight: 700; font-size: .85rem; } .mk-price em{ font-style: normal; color: var(--gz-bad); font-weight: 800; font-size: .8rem; }
.mk-meta{ color: var(--gz-mut); font-weight: 700; font-size: .78rem; }
.mk-sel{ font-weight: 700; font-size: .8rem; color: var(--gz-mut); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mk-add{ margin-top: auto; width: 100%; } .mk-add.on{ background: var(--gz-soft); color: var(--gz-p); border-color: var(--gz-p); }
.mk-stars{ color: #f5b50a; font-size: .8rem; white-space: nowrap; } .mk-rn{ color: var(--gz-mut); font-weight: 700; }
.mk-gone{ position: relative; } .mk-gone > .mk-card{ opacity: .5; filter: grayscale(.7); }
.mk-gone::after{ content: attr(data-label); position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg); background: var(--gz-ink); color: var(--gz-card); padding: 6px 16px; border-radius: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; z-index: 5; pointer-events: none; }

/* ---------- results layout + filters ---------- */
.mk-layout{ display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; } .mk-layout.solo{ grid-template-columns: 1fr; }
.mk-filters{ position: sticky; top: 84px; display: grid; gap: 12px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.mk-fbox{ background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.mk-fbox h4{ font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gz-mut); }
.mk-fbox select, .mk-range input{ width: 100%; min-height: 40px; border: 1.5px solid var(--gz-line); border-radius: 10px; background: var(--gz-soft); color: var(--gz-ink); padding: 8px 10px; font-weight: 700; font-size: .9rem; }
.mk-range{ display: flex; gap: 6px; align-items: center; } .mk-range span{ color: var(--gz-mut); font-weight: 700; font-size: .8rem; } .mk-range .gz-btn{ padding: 8px 10px; }
.mk-flist{ display: grid; gap: 2px; } .mk-flist a{ display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--gz-ink); } .mk-flist a:hover{ background: var(--gz-soft); }
.mk-flist a.on{ background: var(--gz-p); color: #fff; } .mk-flist small{ opacity: .7; }
.mk-rad{ display: flex; gap: 9px; align-items: center; font-weight: 700; font-size: .9rem; cursor: pointer; } .mk-rad input{ width: 17px; height: 17px; accent-color: var(--gz-p); }
.mk-bar{ display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-bar h2{ font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; } .mk-bar p{ color: var(--gz-mut); font-weight: 600; font-size: .9rem; }
.mk-bar-r{ display: flex; gap: 10px; align-items: center; }
.mk-sort{ display: flex; gap: 8px; align-items: center; font-weight: 800; font-size: .85rem; color: var(--gz-mut); } .mk-sort select{ border: 1.5px solid var(--gz-line); border-radius: 10px; background: var(--gz-card); color: var(--gz-ink); padding: 8px 10px; font-weight: 700; }
.mk-chips{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mk-fchip{ display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--gz-soft); color: var(--gz-p); font-weight: 800; font-size: .8rem; border: 1px solid var(--gz-line); } .mk-fchip:hover{ border-color: var(--gz-p); }
.mk-fchip.clear{ background: transparent; color: var(--gz-mut); }
.mk-fopen, .mk-fclose{ display: none; }
.mk-note{ margin-top: 18px; color: var(--gz-mut); font-weight: 700; font-size: .88rem; } .mk-note a{ color: var(--gz-p); }
.mk-filterbar{ display: flex; flex-wrap: wrap; gap: 10px; align-items: end; background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: 18px; padding: 14px; }
.mk-filterbar label{ display: grid; gap: 4px; font-weight: 800; font-size: .74rem; color: var(--gz-mut); min-width: 130px; flex: 1; }
.mk-filterbar select, .mk-filterbar input[type=number]{ min-height: 40px; border: 1.5px solid var(--gz-line); border-radius: 10px; background: var(--gz-soft); color: var(--gz-ink); padding: 8px 10px; font-weight: 700; }

/* ---------- item page ---------- */
.mk-crumbs{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--gz-mut); font-weight: 700; font-size: .85rem; } .mk-crumbs a:hover{ color: var(--gz-p); } .mk-crumbs span{ color: var(--gz-ink); }
.mk-item{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.mk-main{ position: relative; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: var(--gz-soft); border: 1px solid var(--gz-line); cursor: zoom-in; } .mk-main img{ width: 100%; height: 100%; object-fit: cover; }
.mk-sold{ position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,17,30,.55); color: #fff; font-size: 2.6rem; font-weight: 800; letter-spacing: .15em; }
.mk-thumbs{ display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; } .mk-th{ flex: none; width: 70px; height: 70px; border-radius: 12px; overflow: hidden; border: 2px solid var(--gz-line); padding: 0; background: var(--gz-soft); cursor: pointer; } .mk-th.on{ border-color: var(--gz-p); } .mk-th img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-info{ display: grid; gap: 14px; min-width: 0; } .mk-info h1{ font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.mk-bigprice .mk-price b{ font-size: 2rem; color: var(--gz-a); } .mk-bigprice .mk-price s{ font-size: 1.05rem; }
.mk-facts{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 700; color: var(--gz-mut); } .mk-facts i{ color: var(--gz-p); width: 18px; text-align: center; } .mk-facts b{ color: var(--gz-ink); }
.mk-actions{ display: flex; gap: 10px; flex-wrap: wrap; } .mk-heart-btn.on{ color: #ff3d5a; border-color: #ff3d5a; }
.mk-unlocked{ border-color: var(--gz-ok); background: color-mix(in srgb, var(--gz-ok) 10%, var(--gz-card)); } .mk-contact{ display: grid; gap: 8px; margin-top: 10px; }
.mk-tools{ display: flex; gap: 8px; flex-wrap: wrap; }
.mk-seller-box a:hover{ color: var(--gz-p); }
.mk-spread{ display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.mk-spread .big{ display: grid; justify-items: center; gap: 2px; } .mk-spread .big b{ font-size: 2.8rem; font-weight: 800; line-height: 1; } .mk-spread .big small{ color: var(--gz-mut); font-weight: 700; }
.mk-spread .bars{ flex: 1; min-width: 220px; display: grid; gap: 6px; } .mk-spread .bars > div{ display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: .82rem; } .mk-spread .bars span{ width: 34px; color: var(--gz-mut); } .mk-spread .bars span i{ color: #f5b50a; }
.mk-spread .bar{ flex: 1; height: 8px; border-radius: 99px; background: var(--gz-soft); overflow: hidden; display: block; } .mk-spread .bar i{ display: block; height: 100%; background: #f5b50a; border-radius: 99px; }
.mk-rate-in{ display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; } .mk-rate-in input{ position: absolute; opacity: 0; width: 0; min-height: 0; }
.mk-rate-in label{ font-size: 28px; color: var(--gz-line); cursor: pointer; transition: color .1s; } .mk-rate-in label:hover, .mk-rate-in label:hover ~ label, .mk-rate-in input:checked ~ label{ color: #f5b50a; }
.mk-shophead{ display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

/* ---------- my shop ---------- */
.mk-mine{ display: grid; gap: 14px; } .mk-row{ display: flex; gap: 16px; align-items: flex-start; padding: 14px; }
.mk-rimg{ flex: none; width: 96px; height: 96px; border-radius: 16px; overflow: hidden; background: var(--gz-soft); } .mk-rimg img{ width: 100%; height: 100%; object-fit: cover; }
.mk-rbody{ flex: 1; min-width: 0; display: grid; gap: 8px; } .mk-rmeta{ color: var(--gz-mut); font-weight: 700; font-size: .85rem; } .mk-rmeta .mk-price b{ font-size: 1rem; }
.mk-ract{ display: flex; gap: 8px; flex-wrap: wrap; }
.mk-editimgs{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .mk-eimg{ display: grid; gap: 6px; justify-items: center; } .mk-eimg img{ width: 96px; height: 96px; object-fit: cover; border-radius: 14px; border: 1px solid var(--gz-line); } .mk-eimg > div{ display: flex; gap: 4px; }
.mk-preview{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .mk-preview img{ width: 80px; height: 80px; object-fit: cover; border-radius: 12px; border: 1px solid var(--gz-line); }
.mk-field-file input[type=file], #mk-files{ padding: 10px; background: var(--gz-soft); }

/* ---------- cart ---------- */
.mk-cartgrp{ display: grid; gap: 4px; }
.mk-crow{ display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--gz-line); } .mk-crow.gone{ opacity: .5; }
.mk-cimg{ flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--gz-soft); } .mk-cimg img{ width: 100%; height: 100%; object-fit: cover; }
.mk-cinfo{ flex: 1; min-width: 0; display: grid; gap: 2px; } .mk-cinfo small{ color: var(--gz-mut); font-weight: 700; }
.mk-qty{ display: flex; gap: 6px; align-items: center; font-weight: 800; font-size: .8rem; color: var(--gz-mut); } .mk-qty input{ width: 64px; min-height: 38px; border: 1.5px solid var(--gz-line); border-radius: 10px; background: var(--gz-soft); color: var(--gz-ink); padding: 6px 8px; font-weight: 700; }
.mk-line{ min-width: 76px; text-align: right; }
.mk-csum{ display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--gz-line); font-weight: 700; } .mk-csum b{ font-size: 1.15rem; margin-left: 6px; }
.mk-note-box{ text-align: center; }

/* ---------- inbox ---------- */
.mk-inbox{ display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0; background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: 22px; box-shadow: var(--gz-shadow); overflow: hidden; min-height: 70vh; height: calc(100vh - 150px); }
.mk-tlist{ border-right: 1px solid var(--gz-line); overflow-y: auto; } .mk-th-h{ padding: 16px 18px; border-bottom: 1px solid var(--gz-line); position: sticky; top: 0; background: var(--gz-card); } .mk-th-h h2{ font-size: 1.15rem; font-weight: 800; }
.mk-trow{ display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--gz-line); } .mk-trow:hover, .mk-trow.on{ background: var(--gz-soft); } .mk-trow.unread b{ color: var(--gz-p); }
.mk-tb{ flex: 1; min-width: 0; display: grid; gap: 1px; } .mk-tb b{ font-weight: 800; } .mk-tb small{ color: var(--gz-mut); font-weight: 700; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-tb em{ font-style: normal; color: var(--gz-mut); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tm{ display: grid; justify-items: end; gap: 4px; font-size: .72rem; color: var(--gz-mut); font-weight: 700; white-space: nowrap; } .mk-tm .gz-dot{ margin: 0; }
.mk-chat{ display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mk-chead{ display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--gz-line); } .mk-back{ display: none; font-size: 26px; color: var(--gz-mut); }
.mk-cctx{ display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; } .mk-cctx > div{ display: grid; min-width: 0; } .mk-cctx small{ color: var(--gz-mut); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-cctx small a:hover{ color: var(--gz-p); }
.mk-cthumb{ flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: var(--gz-soft); display: grid; place-items: center; color: var(--gz-mut); } .mk-cthumb img{ width: 100%; height: 100%; object-fit: cover; }
.mk-cbanner{ padding: 10px 16px; border-bottom: 1px solid var(--gz-line); background: color-mix(in srgb, var(--gz-ok) 12%, var(--gz-card)); font-weight: 700; font-size: .88rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mk-cbanner.info{ background: var(--gz-soft); color: var(--gz-mut); } .mk-cbanner.warn{ background: color-mix(in srgb, #f5b50a 16%, var(--gz-card)); } .mk-cbanner .mk-contact{ display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.mk-msgs{ flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--gz-bg); }
.mk-msg{ max-width: 78%; align-self: flex-start; } .mk-msg .b{ background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: 16px 16px 16px 4px; padding: 9px 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; } .mk-msg small{ display: block; margin: 2px 6px; color: var(--gz-mut); font-size: .7rem; font-weight: 700; }
.mk-msg.mine{ align-self: flex-end; } .mk-msg.mine .b{ background: var(--gz-p); color: #fff; border-color: transparent; border-radius: 16px 16px 4px 16px; } .mk-msg.mine small{ text-align: right; }
.mk-send{ display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--gz-line); background: var(--gz-card); } .mk-send textarea{ flex: 1; resize: none; border: 1.5px solid var(--gz-line); border-radius: 18px; background: var(--gz-soft); color: var(--gz-ink); padding: 10px 14px; font-weight: 600; font-size: .95rem; max-height: 140px; } .mk-send textarea:focus{ outline: 0; border-color: var(--gz-p); }
.mk-send .gz-btn{ width: 44px; height: 44px; padding: 0; border-radius: 50%; }

/* ---------- homepage section (view only) ---------- */
.mk-homebody{ padding: 0 1.5rem 3rem; max-width: 1200px; margin: 0 auto; }
.mk-home .mk-hd{ display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin: 24px 0 14px; }
.mk-home .mk-hd h3{ font-size: 1.25rem; font-weight: 800; margin: 0; color: var(--title-color, #1d2b29); } .mk-home .mk-hd p{ color: var(--text-color, #4b5a58); font-weight: 600; margin: 2px 0 0; }
.mk-home .mk-hd a.gz-btn{ background: var(--first-color, #7380ec); color: #fff; border: 0; text-decoration: none; }
.mk-home .mk-cats{ margin-top: 12px; } .mk-home .mk-cat span{ color: var(--title-color, #1d2b29); }
.mk-home .mk-shop-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; } .mk-home .mk-shop-cta .gz-btn{ text-decoration: none; }
.mk-home .mk-searchrow{ display: flex; gap: 8px; max-width: 640px; margin: 14px 0 0; } .mk-home .mk-searchrow input{ flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1.5px solid #dfe3f5; padding: 0 16px; font-weight: 600; font-size: 1rem; } .mk-home .mk-searchrow button{ border: 0; border-radius: 12px; padding: 0 22px; background: var(--first-color, #7380ec); color: #fff; font-weight: 800; cursor: pointer; }
.mk-home .mk-empty{ text-align: center; padding: 40px 16px; border: 1px dashed #cfd5ee; border-radius: 20px; color: var(--text-color, #4b5a58); font-weight: 700; grid-column: 1 / -1; }
.mk-home .gz{ font-family: inherit; }

/* ---------- small screens ---------- */
@media (max-width: 1100px){ .mk-item{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mk-item .gz-side{ grid-column: 1 / -1; position: static; } }
@media (max-width: 900px){
  .mk-layout{ grid-template-columns: 1fr; } .mk-fopen{ display: inline-flex; }
  .mk-filters{ position: fixed; inset: 0; z-index: 85; background: var(--gz-bg); max-height: none; padding: 60px 16px 24px; transform: translateX(-100%); transition: transform .25s; } .mk-filters.open{ transform: none; }
  .mk-fclose{ display: inline-flex; position: absolute; top: 14px; right: 14px; } body.mk-lock{ overflow: hidden; }
  .mk-item{ grid-template-columns: 1fr; }
  .mk-inbox{ grid-template-columns: 1fr; height: calc(100vh - 120px); } .mk-inbox.has-cur .mk-tlist{ display: none; } .mk-inbox:not(.has-cur) .mk-chat{ display: none; } .mk-back{ display: block; }
}
@media (max-width: 720px){
  .mk-hsearch{ display: none; } .gz-nav.open{ z-index: 60; }
  .mk-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mk-body{ padding: 10px 11px 12px; } .mk-t{ font-size: .88rem; }
  .mk-row{ flex-direction: column; } .mk-rimg{ width: 100%; height: 160px; }
  .mk-crow{ flex-wrap: wrap; } .mk-line{ margin-left: auto; }
  .mk-info h1{ font-size: 1.35rem; } .mk-bigprice .mk-price b{ font-size: 1.6rem; } .mk-actions .gz-btn{ flex: 1 1 100%; }
  .mk-msg{ max-width: 90%; }
}

.gz-nav a{ white-space: nowrap; }
.mk-msearch{ display: none; gap: 8px; } .mk-msearch input{ flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--gz-line); border-radius: 999px; background: var(--gz-card); color: var(--gz-ink); padding: 0 16px; font-weight: 600; }
@media (max-width: 1000px){ .mk-hsearch{ display: none; } .mk-msearch{ display: flex; } }

.gz-nav .mk-mobonly{ display: none; }
@media (max-width: 720px){
  .gz-nav.open .mk-mobonly{ display: block; }
  .mk .gz-tools{ gap: 6px; } .mk .gz-tools #gz-theme, .mk .gz-tools > .gz-btn.sm, .mk .gz-tools .mk-ic[href="cart.php"], .mk .gz-tools .mk-ic[href="inbox.php"]{ display: none; }
  .mk .gz-head-in{ gap: 8px; } .mk .gz-logo{ font-size: 1.1rem; margin-right: 0; }
}

.mk-pro{ color: #1f9bff; margin-left: 3px; font-size: .9em; } .on-alert{ color: var(--gz-a); border-color: var(--gz-a); }

/* ---------- inventory ---------- */
.iv-top{ display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.iv-plan{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.iv-stats{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } a.gz-stat{ display: block; } a.gz-stat:hover{ border-color: var(--gz-p); }
.gz-stat.warn{ border-color: var(--gz-a); background: color-mix(in srgb, var(--gz-a) 8%, var(--gz-card)); } .gz-stat small{ font-size: .9rem; color: var(--gz-mut); font-weight: 700; }
.iv-alerts{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .iv-alerts .gz-chips{ margin: 8px 0; }
.iv-link{ color: var(--gz-p); font-weight: 800; font-size: .88rem; } .iv-link:hover{ text-decoration: underline; } .iv-muted{ color: var(--gz-mut); font-weight: 700; }
.iv-chip{ display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.iv-chip.ok{ background: rgba(31,191,143,.18); color: #0b7a58; } .iv-chip.low{ background: rgba(245,165,36,.22); color: #9a6200; } .iv-chip.out{ background: rgba(255,92,108,.18); color: #c43b4b; }
.iv-table tr:hover td{ background: var(--gz-soft); } .iv-done td{ opacity: .5; }
.iv-actions{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; } .iv-actions .gz-form{ grid-template-columns: 1fr 1fr; } .iv-actions .gz-actions{ grid-column: 1 / -1; }
.iv-qty.pos{ color: #0b7a58; font-weight: 800; } .iv-qty.neg{ color: #c43b4b; font-weight: 800; }
.iv-reorder{ border-top: 1px solid var(--gz-line); padding: 14px 0; } .iv-reorder:first-of-type{ border-top: 0; }
.iv-bars{ display: flex; gap: 6px; align-items: flex-end; height: 150px; overflow-x: auto; padding-top: 8px; }
.iv-bars > div{ flex: 1 0 18px; max-width: 46px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .iv-bars i{ display: block; width: 100%; background: linear-gradient(var(--gz-p), color-mix(in srgb, var(--gz-p) 60%, #fff)); border-radius: 6px 6px 2px 2px; } .iv-bars small{ color: var(--gz-mut); font-weight: 700; font-size: .7rem; }
.iv-inv .iv-row{ display: grid; grid-template-columns: 2fr 2fr 90px 120px 150px; gap: 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--gz-line); } .iv-c-total{ display: flex; gap: 8px; align-items: center; justify-content: flex-end; font-weight: 800; padding-bottom: 6px; }
.iv-sum{ display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; margin: 14px 0 4px; font-weight: 800; color: var(--gz-mut); } .iv-sum b{ font-size: 1.8rem; color: var(--gz-ink); }
.iv-paper{ background: #fff; color: #25263a; max-width: 760px; margin: 0 auto; border: 1px solid var(--gz-line, #e6e8f4); border-radius: 18px; padding: 34px 38px; box-shadow: 0 8px 28px rgba(0,0,0,.08); font-family: 'Nunito', system-ui, sans-serif; }
.iv-paper h1{ font-size: 1.9rem; letter-spacing: .08em; color: #7a4cff; margin: 0; } .iv-paper h2{ font-size: 1.3rem; margin: 0; } .iv-paper p{ margin: 4px 0; }
.iv-ph{ display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid #eee; padding-bottom: 16px; margin-bottom: 18px; } .iv-bill{ margin-bottom: 18px; line-height: 1.5; } .iv-bill small{ display: block; text-transform: uppercase; letter-spacing: .06em; color: #8a8da6; font-weight: 800; }
.iv-lines{ width: 100%; border-collapse: collapse; } .iv-lines th{ text-align: left; background: #f4f5fb; padding: 9px 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7090; } .iv-lines td{ padding: 10px; border-bottom: 1px solid #eee; }
.iv-totals{ margin: 16px 0 0 auto; width: min(300px, 100%); display: grid; gap: 6px; } .iv-totals > div{ display: flex; justify-content: space-between; } .iv-totals .big{ border-top: 2px solid #25263a; padding-top: 8px; font-size: 1.25rem; font-weight: 800; }
.iv-status{ text-align: center; margin-top: 18px !important; font-weight: 800; letter-spacing: .12em; padding: 8px; border-radius: 10px; background: #fff4e5; color: #9a6200; } .iv-status.paid{ background: #e0f6e8; color: #0b7a58; } .iv-status.void{ background: #ffe3e3; color: #c43b4b; }
.iv-note{ color: #6b7090; margin-top: 14px !important; } .iv-foot{ text-align: center; color: #8a8da6; margin-top: 22px !important; font-size: .9rem; }
body.iv-printbody{ background: #f4f5fb; padding: 20px; margin: 0; }
@media print{ body.iv-printbody{ background: #fff; padding: 0; } .iv-paper{ border: 0; box-shadow: none; max-width: none; padding: 0; } .iv-noprint{ display: none; } }
@media (max-width: 800px){
  .iv-inv .iv-row{ grid-template-columns: 1fr 1fr; } .iv-inv .iv-c-item, .iv-inv .iv-c-desc{ grid-column: 1 / -1; } .iv-c-total{ grid-column: 1 / -1; }
  .iv-actions .gz-form{ grid-template-columns: 1fr; } .iv-paper{ padding: 22px 18px; }
}

/* ---------- orders ---------- */
.od-card{ display: grid; gap: 10px; transition: transform .12s; } .od-card:hover{ transform: translateY(-2px); border-color: var(--gz-p); } .od-card.needs{ border-color: var(--gz-a); background: color-mix(in srgb, var(--gz-a) 7%, var(--gz-card)); }
.od-items{ display: flex; gap: 6px; flex-wrap: wrap; } .od-items span{ background: var(--gz-soft); border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 700; }
.od-mini{ display: flex; gap: 4px; } .od-mini i{ flex: 1; height: 6px; border-radius: 99px; background: var(--gz-line); } .od-mini i.on{ background: var(--gz-ok); }
.od-steps{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.od-step{ display: grid; justify-items: center; gap: 4px; text-align: center; position: relative; }
.od-step::before{ content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--gz-line); z-index: 0; } .od-step:first-child::before{ display: none; }
.od-step.done::before, .od-step.cur::before{ background: var(--gz-ok); }
.od-step i{ position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gz-card); border: 3px solid var(--gz-line); font-style: normal; font-weight: 800; color: var(--gz-mut); }
.od-step.done i{ background: var(--gz-ok); border-color: var(--gz-ok); color: #fff; } .od-step.cur i{ border-color: var(--gz-p); color: var(--gz-p); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gz-p) 18%, transparent); }
.od-step b{ font-size: .85rem; } .od-step small{ color: var(--gz-mut); font-weight: 700; font-size: .7rem; }
.od-grid{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.od-actions{ display: grid; gap: 10px; } .od-actions .gz-btn{ width: 100%; }
.od-tl{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .od-tl li{ display: flex; gap: 12px; align-items: flex-start; } .od-tl li i{ flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gz-p); margin-top: 6px; } .od-tl li i.completed{ background: var(--gz-ok); } .od-tl li i.cancelled{ background: var(--gz-bad); }
@media (max-width: 800px){ .od-grid{ grid-template-columns: 1fr; } .od-step b{ font-size: .7rem; } .od-step small{ display: none; } }