/* ============================================================
   Dimex — Market store theme
   Scope: /store/home  (layout: site.layouts.front-end.app-market)
   ============================================================ */

:root {
    --mk-ground: #F4F6F8;
    --mk-surface: #FFFFFF;
    --mk-navy: #0F172A;
    --mk-navy-2: #1B2638;
    --mk-orange: #E2561B;
    --mk-orange-dark: #C4440F;
    --mk-border: #E2E8EE;
    --mk-ink: #0F172A;
    --mk-muted: #4A5568;
    --mk-meta: #6B7A8D;
    --mk-green: #1B7A4B;
    --mk-red: #C32B1F;
    --mk-radius: 12px;
    --mk-radius-sm: 9px;
    --mk-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    --mk-shadow-lg: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -8px rgba(15, 23, 42, .16);
}

/* ---------- base ---------- */

.mk {
    background: var(--mk-ground);
    color: var(--mk-ink);
    font-family: 'Almarai', 'Tajawal', 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

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

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--mk-orange);
}

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

.mk-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

.mk-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- utility bar ---------- */

.mk-utility {
    background: var(--mk-navy);
    color: #C7D2E0;
    font-size: 13px;
}

.mk-utility .mk-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 40px;
    flex-wrap: wrap;
}

.mk-utility a {
    color: #C7D2E0;
}

.mk-utility a:hover {
    color: #FFFFFF;
}

.mk-utility-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mk-utility-item svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.mk-utility-spacer {
    margin-inline-start: auto;
}

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

.mk-head {
    background: var(--mk-surface);
    border-bottom: 1px solid var(--mk-border);
}

.mk-head .mk-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.mk-logo {
    flex: 0 0 auto;
    display: block;
}

.mk-logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* scoped search */

.mk-search {
    flex: 999 1 360px;
    min-width: 0;
    position: relative;
}

/* the legacy theme wraps this in a form it paints with a 1px brand border */
.mk-search .search_form {
    border: 0;
    border-radius: 0;
}

.mk-search-row {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--mk-navy);
    border-radius: var(--mk-radius-sm);
    overflow: hidden;
    background: #FFFFFF;
}

.mk-search-scope {
    flex: 0 0 auto;
    max-width: 150px;
    text-overflow: ellipsis;
    border: 0;
    background: #F4F6F8;
    border-inline-end: 1px solid var(--mk-border);
    padding: 0 14px;
    font: inherit;
    font-size: 14px;
    color: var(--mk-ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6B7F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 10px;
    padding-inline-start: 30px;
}

.mk-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: 0 16px;
    height: 44px;
    font: inherit;
    font-size: 15px;
    color: var(--mk-ink);
}

.mk-search-input:focus {
    outline: 0;
}

.mk-search-btn {
    flex: 0 0 auto;
    border: 0;
    background: var(--mk-orange);
    color: #FFFFFF;
    padding: 0 28px;
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

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

.mk-search-btn svg {
    width: 17px;
    height: 17px;
}

.mk-search .search-card {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 6px);
    width: 100%;
    background: #FFFFFF;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    box-shadow: var(--mk-shadow-lg);
    z-index: 1200;
    display: none;
}

.mk-search .search-result-box {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* head tools */

.mk-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mk-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    font-size: 14px;
    color: var(--mk-navy);
    white-space: nowrap;
    position: relative;
}

.mk-tool:hover {
    background: #F4F6F8;
    color: var(--mk-ink);
}

.mk-tool svg {
    width: 19px;
    height: 19px;
}

.mk-tool-count {
    position: absolute;
    top: 2px;
    inset-inline-end: 10px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--mk-orange);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

.mk-tool-cart {
    gap: 10px;
    padding: 11px 18px;
    border: 0;
    background: var(--mk-navy);
    color: #FFFFFF;
    font-weight: 700;
}

.mk-tool-cart:hover {
    background: var(--mk-navy-2);
    color: #FFFFFF;
}

.mk-tool-cart-body {
    text-align: start;
    line-height: 1.3;
}

.mk-tool-cart-body small {
    display: block;
    font-size: 11.5px;
    opacity: .75;
}

.mk-tool-cart-body strong {
    font-size: 14px;
    font-weight: 700;
}

/* ---------- category rail ---------- */

.mk-rail {
    background: var(--mk-navy-2);
}

.mk-rail .mk-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 46px;
}

.mk-rail-link {
    flex: 0 0 auto;
    color: #DBE3EC;
    font-size: 14px;
    padding: 13px 14px;
    white-space: nowrap;
}

.mk-rail-link:hover {
    background: rgba(255, 255, 255, .09);
    color: #FFFFFF;
}

.mk-rail-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    background: var(--mk-orange);
    color: #FFFFFF;
    font-weight: 700;
}

.mk-rail-all:hover {
    background: var(--mk-orange-dark);
    color: #FFFFFF;
}

.mk-rail-all svg {
    width: 17px;
    height: 17px;
}

/* ---------- section shell ---------- */

.mk-section {
    padding: 16px 0 0;
}

.mk-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.mk-section-title {
    font-size: 21px;
    font-weight: 800;
    margin: 0;
    color: var(--mk-ink);
}

.mk-section-sub {
    display: block;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--mk-muted);
    margin-top: 2px;
}

.mk-link-all {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--mk-orange);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mk-link-all svg {
    width: 14px;
    height: 14px;
}

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

.mk-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 20px;
}

.mk-hero-main {
    flex: 999 1 460px;
    min-width: 0;
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}

.mk-hero-copy {
    flex: 999 1 260px;
    min-width: 0;
}

.mk-hero-badge {
    display: inline-block;
    background: #FDEAE0;
    color: #9B3A0E;
    font-size: 13px;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 6px;
}

.mk-hero-copy h1 {
    margin: 18px 0 0;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mk-navy);
}

.mk-hero-copy p {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--mk-muted);
    max-width: 40ch;
}

.mk-hero-cta {
    display: inline-block;
    margin-top: 22px;
    background: var(--mk-orange);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 16px;
    padding: 15px 34px;
    border-radius: var(--mk-radius-sm);
}

.mk-hero-cta:hover {
    background: var(--mk-orange-dark);
    color: #FFFFFF;
}

.mk-hero-img {
    flex: 0 1 220px;
    min-width: 0;
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: var(--mk-ground);
    border-radius: var(--mk-radius);
    padding: 14px;
}

.mk-hero-mid {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mk-pick {
    flex: 1 1 auto;
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mk-pick img {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    object-fit: contain;
    background: var(--mk-ground);
    border-radius: var(--mk-radius-sm);
    padding: 4px;
}

.mk-pick-body {
    display: block;
    min-width: 0;
}

.mk-pick-cat {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--mk-orange);
}

.mk-pick-name {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: var(--mk-navy);
}

.mk-pick-price {
    display: block;
    margin-top: 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--mk-navy);
}

/* ---------- help aside ---------- */

.mk-help {
    flex: 0 1 230px;
    min-width: 0;
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 22px;
}

.mk-help h2 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 800;
    color: var(--mk-navy);
}

.mk-help-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #EEF2F6;
    font-size: 13px;
    line-height: 1.7;
    color: var(--mk-muted);
}

.mk-help-item svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: var(--mk-orange);
}

.mk-help-call {
    display: block;
    margin-top: 18px;
    background: var(--mk-navy);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    padding: 13px;
    border-radius: var(--mk-radius-sm);
    text-align: center;
}

.mk-help-call:hover {
    background: var(--mk-navy-2);
    color: #FFFFFF;
}

/* ---------- flash rail ---------- */

.mk-flash {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 22px;
}

.mk-flash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.mk-flash-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--mk-navy);
}

.mk-count {
    display: flex;
    gap: 6px;
    direction: ltr;
}

.mk-count-cell {
    background: var(--mk-navy);
    color: #FFFFFF;
    border-radius: 6px;
    padding: 6px 11px;
    font-size: 14px;
    font-weight: 800;
}

/* ---------- small tile (flash rail, new arrivals) ---------- */

.mk-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mk-tile {
    flex: 1 1 150px;
    min-width: 0;
    border: 1px solid #EEF2F6;
    border-radius: var(--mk-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mk-tile:hover {
    border-color: var(--mk-border);
    box-shadow: var(--mk-shadow-lg);
}

.mk-tile img {
    display: block;
    width: 100%;
    height: 112px;
    object-fit: contain;
    transition: transform .28s ease;
}

.mk-tile:hover img {
    transform: scale(1.04);
}

.mk-tile-name {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--mk-navy);
    flex-grow: 1;
}

.mk-tile-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--mk-navy);
}

.mk-flash .mk-tile-price {
    color: var(--mk-orange);
}

/* ---------- product card ---------- */

.mk-card {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s ease;
}

.mk-card:hover {
    border-color: #D5DEE8;
    box-shadow: var(--mk-shadow-lg);
}

.mk-card-media {
    display: block;
    position: relative;
    background: var(--mk-ground);
    padding: 20px;
    overflow: hidden;
}

.mk-card-media img {
    display: block;
    width: 100%;
    height: 168px;
    object-fit: contain;
    transition: transform .28s ease;
}

.mk-card:hover .mk-card-media img {
    transform: scale(1.04);
}

.mk-badges {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 2;
}

.mk-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 6px;
    color: #FFFFFF;
    background: var(--mk-orange);
}

.mk-badge-ship {
    background: var(--mk-green);
}

.mk-badge-offer {
    background: var(--mk-navy);
}

.mk-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.mk-card-cat {
    font-size: 12px;
    color: var(--mk-meta);
}

.mk-card-title {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mk-card-title a {
    color: var(--mk-navy);
}

.mk-card-price {
    margin-top: auto;
    padding-top: 2px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.mk-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--mk-navy);
}

.mk-price-was {
    font-size: 13px;
    color: var(--mk-meta);
    text-decoration: line-through;
}

.mk-card-note {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--mk-green);
}

.mk-card-cta {
    width: 100%;
    border: 0;
    background: var(--mk-orange);
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    padding: 12px;
    border-radius: var(--mk-radius-sm);
    cursor: pointer;
    text-align: center;
    display: block;
}

.mk-card-cta:hover {
    background: var(--mk-orange-dark);
    color: #FFFFFF;
}

/* ---------- pagination ---------- */

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

.mk-pager a {
    min-width: 42px;
    padding: 11px 0;
    text-align: center;
    border: 1px solid #DDE4EB;
    border-radius: var(--mk-radius-sm);
    background: #FFFFFF;
    color: var(--mk-navy);
    font-size: 14px;
    font-weight: 700;
}

.mk-pager a:hover {
    border-color: var(--mk-navy);
    color: var(--mk-navy);
}

.mk-pager a.is-current {
    background: var(--mk-navy);
    border-color: var(--mk-navy);
    color: #FFFFFF;
}

/* ---------- listing page ---------- */

.mk-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px 0 0;
    font-size: 13px;
    color: var(--mk-meta);
}

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

.mk-sortbar-count {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--mk-meta);
}

.mk-empty {
    margin: 0;
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 28px 22px;
    text-align: center;
    color: var(--mk-muted);
}

.mk-brand-list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
}

.mk-brand-list a {
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--mk-muted);
}

.mk-brand-list a.is-current {
    color: var(--mk-orange);
    font-weight: 700;
}

.mk-pager a.mk-pager-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
}

.mk-pager a.mk-pager-step svg {
    width: 14px;
    height: 14px;
}

/* ---------- category circles ---------- */

.mk-cats {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 10px;
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 20px;
}

.mk-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 8px 4px;
    border-radius: var(--mk-radius-sm);
}

.mk-cat:hover {
    background: #F7F9FB;
}

.mk-cat-ring {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: var(--mk-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* the glyph is the fallback: a category whose image is missing drops its <img> */
.mk-cat-ring svg {
    width: 26px;
    height: 26px;
    color: var(--mk-meta);
}

.mk-cat-ring img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    object-fit: contain;
    background: var(--mk-ground);
}

.mk-cat span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--mk-navy);
}

/* ---------- catalog: sidebar + grid ---------- */

.mk-catalog {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.mk-aside {
    flex: 0 1 240px;
    min-width: 0;
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 22px;
    align-self: flex-start;
}

.mk-aside-head {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 800;
    color: var(--mk-navy);
}

.mk-filter-group {
    border: 0;
    margin: 0;
    padding: 0;
}

.mk-filter-group + .mk-filter-group {
    margin-top: 22px;
}

.mk-filter-legend {
    padding: 0;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 800;
    color: var(--mk-navy);
}

.mk-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--mk-muted);
    cursor: pointer;
}

.mk-check input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--mk-orange);
}

.mk-price-row {
    display: flex;
    gap: 8px;
}

.mk-price-row input {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #DDE4EB;
    border-radius: var(--mk-radius-sm);
    padding: 10px;
    font: inherit;
    font-size: 13px;
    color: var(--mk-navy);
}

.mk-price-row input:focus {
    outline: 2px solid var(--mk-orange);
    outline-offset: -1px;
}

.mk-filter-apply {
    width: 100%;
    margin-top: 22px;
    border: 0;
    background: var(--mk-navy);
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 13px;
    border-radius: var(--mk-radius-sm);
    cursor: pointer;
}

.mk-filter-apply:hover {
    background: var(--mk-navy-2);
}

.mk-main {
    flex: 999 1 560px;
    min-width: 0;
}

.mk-sortbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 14px 20px;
    margin-bottom: 16px;
}

.mk-sortbar h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--mk-navy);
}

.mk-sort {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--mk-muted);
}

.mk-sort select {
    border: 1px solid #DDE4EB;
    border-radius: var(--mk-radius-sm);
    padding: 9px 12px;
    background: #FFFFFF;
    font: inherit;
    font-size: 13.5px;
    color: var(--mk-navy);
    cursor: pointer;
}

.mk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* ---------- plain section card ---------- */

.mk-block {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 22px;
}

.mk-block h2 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 800;
    color: var(--mk-navy);
}

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

.mk-foot {
    margin-top: 28px;
    background: var(--mk-navy);
    color: #A8B5C4;
}

.mk-foot-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 44px 0;
}

.mk-foot-brand {
    min-width: 0;
}

.mk-foot-brand img {
    height: 44px;
    width: auto;
    object-fit: contain;
    margin-bottom: 18px;
}

.mk-foot-brand p {
    font-size: 14px;
    line-height: 1.9;
    max-width: 32ch;
    margin: 0 0 16px;
}

.mk-foot-col {
    min-width: 0;
}

.mk-foot-col h3 {
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 16px;
}

.mk-foot-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-foot-col li {
    margin-bottom: 11px;
}

.mk-foot-col a {
    font-size: 14px;
    color: #A8B5C4;
}

.mk-foot-col a:hover {
    color: #FFFFFF;
}

.mk-foot-contact {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.mk-foot-contact svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--mk-orange);
}

.mk-social {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.mk-social a {
    width: 38px;
    height: 38px;
    border-radius: var(--mk-radius-sm);
    background: #1B2638;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #D4DDE8;
    font-size: 16px;
}

.mk-social a:hover {
    background: var(--mk-orange);
    color: #FFFFFF;
}

.mk-foot-apps {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.mk-foot-apps img {
    height: 42px;
    width: auto;
}

.mk-foot-bottom {
    border-top: 1px solid #22304A;
    padding: 18px 0;
    font-size: 13px;
    text-align: center;
}

/* ---------- mobile shell ---------- */

.mk-mobile-head {
    display: none;
    background: var(--mk-navy);
    padding: 10px 0 12px;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.mk-mobile-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.mk-mobile-burger {
    width: 42px;
    height: 42px;
    border: 0;
    background: #1B2638;
    border-radius: var(--mk-radius-sm);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.mk-mobile-burger svg {
    width: 21px;
    height: 21px;
}

.mk-mobile-logo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.mk-mobile-logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mk-mobile-call {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background: var(--mk-orange);
    border-radius: var(--mk-radius-sm);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mk-mobile-call:hover {
    color: #FFFFFF;
}

.mk-mobile-call svg {
    width: 19px;
    height: 19px;
}

.mk-mobile-drawer {
    display: none;
    padding: 4px 0 2px;
}

.mk-mobile-drawer.is-open {
    display: block;
}

.mk-mobile-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.mk-mobile-drawer li a {
    display: block;
    padding: 12px 4px;
    color: #D4DDE8;
    font-size: 14.5px;
    border-bottom: 1px solid #22304A;
}

.mk-tabbar {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1040;
    background: #FFFFFF;
    border-top: 1px solid var(--mk-border);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .08);
}

.mk-tabbar-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.mk-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    font-size: 11px;
    color: var(--mk-muted);
    position: relative;
}

.mk-tab.is-active {
    color: var(--mk-orange);
}

.mk-tab svg {
    width: 21px;
    height: 21px;
}

.mk-tab-icon {
    position: relative;
    display: inline-flex;
}

.mk-tab-count {
    position: absolute;
    top: -6px;
    inset-inline-end: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mk-orange);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.mk-filter-toggle {
    display: none;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    background: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--mk-ink);
    cursor: pointer;
    align-items: center;
    gap: 8px;
}

.mk-filter-toggle svg {
    width: 16px;
    height: 16px;
}

/* ---------- cart / checkout page ----------
   This page keeps its original markup and scripts; the rules below restyle the
   legacy bootstrap classes so it reads as part of the Market storefront. */

.mk-cartpage {
    padding: 16px 0 0;
}

.mk-cartpage .feature_header {
    margin-bottom: 14px;
}

.mk-cartpage .feature_header span {
    font-size: 22px;
    font-weight: 800;
    color: var(--mk-navy);
}

.mk-cartpage .view_border {
    display: none;
}

.mk-cartpage .box-style,
.mk-cartpage .cart_total {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    box-shadow: none;
    padding: 22px;
    margin-bottom: 16px;
}

.mk-cartpage h3,
.mk-cartpage h4,
.mk-cartpage h5 {
    font-size: 16px;
    font-weight: 800;
    color: var(--mk-navy);
}

/* every cart row repeats the same header; only the first one needs to show it */
.mk-cartpage .cart_item + .cart_item thead {
    display: none;
}

.mk-cartpage .cart_item table {
    margin-bottom: 0;
    border: 0;
}

.mk-cartpage .cart_item + .cart_item table {
    border-top: 1px solid var(--mk-border);
}

/* custom.css paints every bordered table head white with !important */
.mk-cartpage .cart_item th {
    border: 0;
    background: transparent;
    padding: 0 10px 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mk-meta) !important;
    text-align: start;
}

.mk-cartpage .cart_item td {
    border: 0;
    padding: 14px 10px;
    vertical-align: middle;
    font-size: 14px;
    color: var(--mk-navy);
}

.mk-cartpage .cart_item td img {
    height: 64px;
    width: 64px;
    object-fit: contain;
    background: var(--mk-ground);
    border-radius: var(--mk-radius-sm);
    padding: 4px;
}

.mk-cartpage .cart_item td p {
    margin: 0;
    font-size: 13px;
    color: var(--mk-muted);
}

.mk-cartpage label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mk-navy) !important;
    margin-bottom: 6px;
}

.mk-cartpage .form-control,
.mk-cartpage .custom-select,
.mk-cartpage .select2-container--default .select2-selection--single {
    min-height: 44px;
    height: auto;
    border: 1px solid #DDE4EB;
    border-radius: var(--mk-radius-sm);
    background-color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    color: var(--mk-navy);
    box-shadow: none;
}

.mk-cartpage .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    color: var(--mk-navy);
}

.mk-cartpage .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

.mk-cartpage .form-control:focus {
    border-color: var(--mk-orange);
    box-shadow: none;
}

.mk-cartpage input[type="number"].qty {
    text-align: center;
    min-height: 38px;
    font-weight: 700;
}

.mk-cartpage .btn-primary,
.mk-cartpage .modern-submit-btn {
    background: var(--mk-orange);
    border: 0;
    border-radius: var(--mk-radius-sm);
    min-height: 50px;
    padding: 0 34px;
    font-weight: 800;
    font-size: 16px;
    color: #FFFFFF;
    box-shadow: none;
}

.mk-cartpage .btn-primary:hover,
.mk-cartpage .modern-submit-btn:hover {
    background: var(--mk-orange-dark);
    color: #FFFFFF;
}

.mk-cartpage .cart_title {
    color: var(--mk-muted);
}

.mk-cartpage .cart_value {
    color: var(--mk-navy);
}

.mk-cartpage .cart_total_value {
    color: var(--mk-orange) !important;
}

.mk-cartpage .cart_total {
    position: sticky;
    top: 12px;
}

/* ---------- product page ----------
   The page keeps its own markup, scripts and offer block; these rules only bring
   its surfaces in line with the Market storefront. */

.mk-productpage > .container {
    padding-top: 16px;
}

.mk-productpage .product-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--mk-navy);
}

/* the price pill carries inline colours from the original page */
.mk-productpage .product-price {
    background: #FDEAE0 !important;
    color: var(--mk-orange-dark) !important;
    border-radius: var(--mk-radius-sm) !important;
    font-size: 22px !important;
}

/* .btn-secondary is painted with !important in the layout's style block */
.mk-productpage .buy-now-btn,
.mk-productpage .buy_now_button {
    background-color: var(--mk-orange) !important;
    border-color: var(--mk-orange) !important;
    border-radius: var(--mk-radius-sm);
    min-height: 52px;
    font-weight: 800;
    font-size: 16px;
    color: #FFFFFF;
    box-shadow: none;
}

.mk-productpage .buy-now-btn:hover,
.mk-productpage .buy_now_button:hover {
    background-color: var(--mk-orange-dark) !important;
    border-color: var(--mk-orange-dark) !important;
}

.mk-productpage .details {
    border-radius: var(--mk-radius);
}

.mk-productpage .form-control,
.mk-productpage .custom-select {
    border-radius: var(--mk-radius-sm);
    border-color: #DDE4EB;
    font-family: inherit;
}

.mk-productpage .form-control:focus {
    border-color: var(--mk-orange);
    box-shadow: none;
}

/* ---------- all categories page ---------- */

.mk-catgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mk-catcard {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.mk-catcard-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #EEF2F6;
}

.mk-catcard-head strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--mk-navy);
}

.mk-catcard-head small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--mk-meta);
}

.mk-catcard-list {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
    flex-grow: 1;
}

.mk-catcard-list li {
    margin-bottom: 8px;
}

.mk-catcard-list a {
    font-size: 13.5px;
    color: var(--mk-muted);
}

.mk-catcard-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mk-orange);
}

.mk-catcard-all svg {
    width: 14px;
    height: 14px;
}

/* ---------- thank-you page ---------- */

.mk-thankspage .card,
.mk-thankspage .card.shadow-lg {
    border: 1px solid var(--mk-border) !important;
    border-radius: var(--mk-radius) !important;
    box-shadow: none !important;
}

.mk-thankspage h2,
.mk-thankspage h3 {
    color: var(--mk-navy);
}

.mk-thankspage .text-primary {
    color: var(--mk-orange) !important;
}

.mk-thankspage .btn {
    border-radius: var(--mk-radius-sm);
    min-height: 48px;
    font-weight: 700;
}

/* ---------- plain content pages ----------
   about, terms, privacy, help, contacts, brands, track-order and the rest keep
   their own markup; these rules put them on the Market surface. */

.mk-contentpage > .container,
.mk-contentpage > div > .container {
    padding-top: 20px;
    padding-bottom: 28px;
}

.mk-contentpage h1,
.mk-contentpage h2,
.mk-contentpage h3,
.mk-contentpage h4,
.mk-contentpage h5,
.mk-contentpage .headerTitle {
    color: var(--mk-navy);
    font-weight: 800;
}

.mk-contentpage h2,
.mk-contentpage .headerTitle {
    font-size: 24px;
    margin-bottom: 16px;
}

.mk-contentpage h4 {
    font-size: 20px;
}

.mk-contentpage .for-padding,
.mk-contentpage .card,
.mk-contentpage .accordion .card {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    box-shadow: none;
}

.mk-contentpage .for-padding {
    padding: 24px;
    line-height: 2;
    color: var(--mk-muted);
}

.mk-contentpage .for-padding h1,
.mk-contentpage .for-padding h2,
.mk-contentpage .for-padding h3,
.mk-contentpage .for-padding strong {
    color: var(--mk-navy);
}

.mk-contentpage .btn-primary,
.mk-contentpage .btn-secondary {
    border-radius: var(--mk-radius-sm);
    min-height: 48px;
    padding: 0 28px;
    font-weight: 700;
    box-shadow: none;
}

.mk-contentpage .form-control,
.mk-contentpage .custom-select,
.mk-contentpage textarea.form-control {
    min-height: 44px;
    border: 1px solid #DDE4EB;
    border-radius: var(--mk-radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--mk-navy);
    box-shadow: none;
}

.mk-contentpage .form-control:focus {
    border-color: var(--mk-orange);
    box-shadow: none;
}

.mk-contentpage label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mk-navy);
}

/* brands grid */
.mk-brandspage .brand_div {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 16px;
}

.mk-brandspage .brand_div img {
    max-height: 100%;
    object-fit: contain;
}

/* ---------- shared across every Market page ---------- */

/* legacy bootstrap pagination, matched to .mk-pager */
.mk-page .pagination {
    gap: 8px;
    margin: 0;
}

.mk-page .pagination .page-item {
    margin: 0;
}

.mk-page .pagination .page-link {
    min-width: 42px;
    padding: 11px 10px;
    text-align: center;
    border: 1px solid #DDE4EB;
    border-radius: var(--mk-radius-sm);
    background: #FFFFFF;
    color: var(--mk-navy);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}

.mk-page .pagination .page-link:hover {
    border-color: var(--mk-navy);
    color: var(--mk-navy);
}

.mk-page .pagination .page-item.active .page-link {
    background: var(--mk-navy) !important;
    border-color: var(--mk-navy) !important;
    color: #FFFFFF;
}

/* one field, one border */
.mk-trackpage .input-group {
    border: 1px solid #DDE4EB;
    border-radius: var(--mk-radius-sm);
    overflow: hidden;
    background: #FFFFFF;
}

.mk-trackpage .input-group .form-control {
    border: 0;
    background: #FFFFFF !important;
    min-height: 50px;
}

.mk-trackpage .input-group .btn {
    border-radius: 0;
    min-height: 50px;
    background: var(--mk-orange) !important;
    border-color: var(--mk-orange) !important;
    font-weight: 800;
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
    .mk-cats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .mk-tile {
        flex-basis: 20%;
    }

    .mk-hero-copy h1 {
        font-size: 34px;
    }
}

@media (max-width: 991px) {
    .mk-head .mk-wrap {
        flex-wrap: wrap;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .mk-search {
        order: 3;
        flex: 1 1 100%;
    }

    .mk-hero-main {
        padding: 26px;
    }

    .mk-help {
        flex: 1 1 100%;
    }

    .mk-aside {
        flex: 1 1 100%;
    }

    .mk-foot-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mk-foot-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .mk {
        font-size: 14.5px;
    }

    .mk-utility,
    .mk-head,
    .mk-rail {
        display: none;
    }

    .mk-mobile-head {
        display: block;
    }

    .mk-tabbar {
        display: block;
    }

    /* clear the fixed tab bar — the footer is the last thing on the page */
    .mk-foot-bottom {
        padding-bottom: 74px;
    }

    .mk-wrap {
        padding: 0 14px;
    }

    .mk-hero {
        padding-top: 14px;
    }

    .mk-hero-main {
        padding: 22px;
    }

    .mk-hero-copy h1 {
        font-size: 28px;
    }

    .mk-hero-copy p {
        font-size: 14.5px;
    }

    .mk-hero-img {
        height: 180px;
    }

    .mk-flash,
    .mk-block {
        padding: 16px;
    }

    .mk-flash-title {
        font-size: 18px;
        gap: 10px;
    }

    .mk-tiles {
        gap: 10px;
    }

    .mk-tile {
        flex-basis: 40%;
    }

    .mk-cats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 14px 10px;
        gap: 6px;
    }

    .mk-cat-ring {
        width: 58px;
        height: 58px;
    }

    .mk-cat-ring img {
        width: 36px;
        height: 36px;
    }

    .mk-cat span {
        font-size: 11.5px;
    }

    .mk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mk-card-media {
        padding: 12px;
    }

    .mk-card-media img {
        height: 142px;
    }

    .mk-card-body {
        padding: 12px;
        gap: 8px;
    }

    .mk-card-title {
        font-size: 13px;
    }

    .mk-price {
        font-size: 17px;
    }

    .mk-sortbar {
        padding: 12px 14px;
        gap: 10px;
    }

    .mk-sortbar h2 {
        font-size: 16px;
    }

    .mk-filter-toggle {
        display: inline-flex;
    }

    .mk-aside {
        display: none;
    }

    .mk-aside.is-open {
        display: block;
    }

    .mk-foot-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        padding: 28px 0 22px;
    }

    .mk-foot-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 479px) {
    .mk-cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .mk-catgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .mk-catgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mk-cartpage .cart_item {
        overflow-x: auto;
    }

    .mk-productpage .product-title {
        font-size: 19px;
    }
}

/* ---------- mobile corrections for the Market pages ---------- */

@media (max-width: 768px) {
    /* custom.css pads the body for the legacy fixed topbar; the Market header
       is sticky and needs no room reserved above it */
    body.mk {
        padding-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /* custom.css hides the cart table below 768px and expects the server to have
       rendered card markup instead, which only happens for a mobile user agent.
       Keep the table visible and let it scroll so the cart is never empty. */
    .mk-cartpage .cart_item > table {
        display: table;
    }

    .mk-cartpage .cart_item {
        overflow-x: auto;
    }

    /* the card markup a phone does get */
    .mk-cartpage .item-card {
        border: 1px solid var(--mk-border);
        border-radius: var(--mk-radius);
        box-shadow: none;
        background: var(--mk-surface);
        padding: 12px;
        gap: 12px;
    }

    .mk-cartpage .item-card .img-container img {
        border-radius: var(--mk-radius-sm);
        background: var(--mk-ground);
    }

    .mk-cartpage .item-card .header-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--mk-navy);
    }
}

/* ---------- shared overlays: search results, modals ---------- */

.mk .search-card {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    overflow: hidden;
}

.mk .search-result-box {
    padding: 8px;
}

.mk-page .modal-content,
.mk .modal-content {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    box-shadow: 0 16px 48px rgba(15, 23, 42, .18);
}

.mk .modal-header,
.mk .modal-footer {
    border-color: var(--mk-border);
}

.mk .modal-title {
    font-weight: 800;
    color: var(--mk-navy);
}

.mk .modal-body .btn-primary,
.mk .modal-footer .btn-primary {
    border-radius: var(--mk-radius-sm);
    min-height: 46px;
    font-weight: 700;
}

/* ---------- interaction polish ---------- */

.mk a,
.mk button,
.mk-card,
.mk-tile,
.mk-pick,
.mk-catcard {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease,
        box-shadow .22s ease, transform .22s ease;
}

.mk-pick:hover,
.mk-catcard:hover {
    border-color: #D5DEE8;
    box-shadow: var(--mk-shadow-lg);
}

/* keyboard users get a visible ring on every control */
.mk a:focus-visible,
.mk button:focus-visible,
.mk input:focus-visible,
.mk select:focus-visible,
.mk textarea:focus-visible {
    outline: 2px solid var(--mk-orange);
    outline-offset: 2px;
}

/* prices read as a column, not as ragged glyphs */
.mk-price,
.mk-price-was,
.mk-tile-price,
.mk-pick-price,
.mk-count-cell,
.mk-tool-cart-body strong {
    font-variant-numeric: tabular-nums;
}

.mk-card-cta:active,
.mk-hero-cta:active,
.mk-search-btn:active,
.mk-filter-apply:active,
.mk-help-call:active {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .mk a,
    .mk button,
    .mk-card,
    .mk-tile,
    .mk-pick,
    .mk-catcard,
    .mk-card-media img,
    .mk-tile img {
        transition: none;
    }

    .mk-card:hover .mk-card-media img,
    .mk-tile:hover img {
        transform: none;
    }
}

/* a category whose image is missing shows its initial, not a stand-in glyph */
.mk-cat-letter {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: var(--mk-orange);
}

.mk-catcard-head .mk-cat-letter {
    font-size: 18px;
}

/* long names wrap to two lines and stop, instead of running the card tall */
.mk-pick-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mk-cat span:last-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mk-tile-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mk ::selection {
    background: #FDEAE0;
    color: var(--mk-orange-dark);
}

/* ---------- quick view ---------- */

.mk .modal-quick-view .modal-dialog {
    max-width: 980px;
}

.mk .modal-quick-view .modal-content {
    border: 0;
    overflow: hidden;
}

.mk-qv {
    position: relative;
    background: var(--mk-surface);
    color: var(--mk-ink);
    text-align: start;
}

.mk-qv-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mk-border);
    border-radius: 999px;
    background: var(--mk-surface);
    color: var(--mk-navy);
    cursor: pointer;
    padding: 0;
}

.mk-qv-close:hover {
    background: var(--mk-navy);
    border-color: var(--mk-navy);
    color: #FFFFFF;
}

.mk-qv-close svg {
    width: 14px;
    height: 14px;
}

.mk-qv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 28px;
}

.mk-qv-gallery {
    flex: 1 1 320px;
    min-width: 0;
}

.mk-qv-stage {
    background: var(--mk-ground);
    border-radius: var(--mk-radius);
    padding: 24px;
}

.mk-qv-stage img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: contain;
}

.mk-qv-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.mk-qv-thumb {
    width: 64px;
    height: 64px;
    padding: 6px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    background: var(--mk-surface);
    cursor: pointer;
}

.mk-qv-thumb.is-active {
    border-color: var(--mk-orange);
    box-shadow: 0 0 0 1px var(--mk-orange) inset;
}

.mk-qv-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mk-qv-info {
    flex: 1 1 340px;
    min-width: 0;
}

.mk-qv-cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--mk-meta);
    margin-bottom: 6px;
}

.mk-qv-title {
    margin: 0 0 8px;
    font-size: 21px;
    line-height: 1.5;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mk-qv-title a {
    color: var(--mk-navy);
}

.mk-qv-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--mk-meta);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mk-border);
}

.mk-qv-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 12px;
    color: #CBD5E1;
}

.mk-qv-stars .is-on {
    color: #F5A524;
}

.mk-qv-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 16px;
}

.mk-qv-price strong {
    font-size: 28px;
    font-weight: 800;
    color: var(--mk-navy);
    font-variant-numeric: tabular-nums;
}

.mk-qv-price s {
    font-size: 14px;
    color: var(--mk-meta);
}

.mk-qv-stock {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mk-green);
}

.mk-qv-stock.is-out {
    color: var(--mk-red);
}

.mk-qv-cod {
    margin: 4px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mk-meta);
}

.mk-qv-field {
    margin-top: 18px;
}

.mk-qv-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--mk-navy);
    margin-bottom: 9px;
}

.mk-qv-swatches,
.mk-qv-opts,
.mk-qv-offers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mk-qv-swatch {
    margin: 0;
    cursor: pointer;
}

/* the native control still paints its dot at 0x0, so take its appearance away too */
.mk-qv-swatch input,
.mk-qv-opt input,
.mk-qv input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
    clip-path: inset(50%);
    pointer-events: none;
}

.mk-qv-swatch span {
    display: block;
    width: 28px;
    height: 28px;
    margin: 2px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--mk-border);
}

.mk-qv-swatch input:checked + span {
    box-shadow: 0 0 0 2px var(--mk-orange);
}

.mk-qv-opt {
    margin: 0;
    cursor: pointer;
}

.mk-qv-opt span {
    display: block;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mk-navy);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    background: var(--mk-surface);
}

.mk-qv-opt input:checked + span {
    border-color: var(--mk-navy);
    background: var(--mk-navy);
    color: #FFFFFF;
}

.mk-qv-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    overflow: hidden;
}

.mk-qv .mk-qv-step {
    width: 42px;
    border: 0;
    border-radius: 0;
    background: var(--mk-ground);
    color: var(--mk-navy);
    font-size: 11px;
    padding: 0;
    box-shadow: none;
}

.mk-qv .mk-qv-step:hover:not([disabled]) {
    background: var(--mk-navy);
    color: #FFFFFF;
}

.mk-qv .mk-qv-step[disabled] {
    opacity: .45;
}

.mk-qv-qty input {
    width: 58px;
    border: 0;
    border-inline: 1px solid var(--mk-border);
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--mk-navy);
    background: var(--mk-surface);
    padding: 10px 0;
}

.mk-qv-offer {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    background: #FDEAE0;
    color: #9B3A0E;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 16px;
    cursor: pointer;
}

.mk-qv-offer:hover {
    background: var(--mk-orange);
    border-color: var(--mk-orange);
    color: #FFFFFF;
}

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

.mk-qv .mk-qv-buy,
.mk-qv .mk-qv-add {
    flex: 1 1 170px;
    border: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    padding: 14px 20px;
    border-radius: var(--mk-radius-sm);
    cursor: pointer;
}

.mk-qv .mk-qv-buy {
    background: var(--mk-orange);
    color: #FFFFFF;
}

.mk-qv .mk-qv-buy:hover {
    background: var(--mk-orange-dark);
    color: #FFFFFF;
}

.mk-qv .mk-qv-add {
    background: var(--mk-surface);
    color: var(--mk-navy);
    border: 1px solid var(--mk-navy);
}

.mk-qv .mk-qv-add:hover {
    background: var(--mk-navy);
    color: #FFFFFF;
}

.mk-qv-buy:active,
.mk-qv-add:active {
    transform: translateY(1px);
}

.mk-qv-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 800;
    color: var(--mk-orange);
}

.mk-qv-more svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 767px) {
    .mk-qv-grid {
        padding: 20px 16px 24px;
        gap: 20px;
    }

    .mk-qv-stage {
        padding: 16px;
    }

    .mk-qv-stage img {
        height: 230px;
    }

    .mk-qv-title {
        font-size: 18px;
    }

    .mk-qv-price strong {
        font-size: 24px;
    }
}

/* The layout paints a fake radio dot on every `input[type=radio] + span` pair.
   The quick view draws its own selected state, so that dot has to go. */
.mk-qv input[type="radio"] + span::after,
.mk-qv input[type="radio"]:checked + span::after,
.mk-qv input[type="radio"]:focus + span::before {
    content: none;
}

/* ---------- related products ---------- */

.mk-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mk-related {
    padding: 28px 0 8px;
}

@media (max-width: 1100px) {
    .mk-grid-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .mk-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* the WhatsApp shortcut carries its own brand green so it reads at a glance */
.mk-tool-wa svg,
.mk-tab-wa svg {
    color: #25D366;
}

.mk-tool-wa:hover {
    border-color: #25D366;
    color: #128C4A;
}