:root {
    /* Hub (blue) palette */
    --mk-bg: #dde5f3;
    --mk-card-bg: #f5f7fb;
    --mk-border-soft: rgba(0, 0, 0, 0.06);
    --mk-text-main: #111827;
    --mk-text-muted: #4b5563;
    --mk-link: #2f5fa8;
    --mk-link-hover: #23457b;
    --mk-btn-bg: #2f5fa8;
    --mk-btn-bg-hover: #23457b;
    --mk-btn-text: #ffffff;
    /* Hub navbar/footer background image (relative to /static/css/style.css) */
    --mk-hub-bg-image: url("../img/bg-blue.9936ff701ea2.webp");

    /* Message colours */
    --mk-success-bg: #e6ffed;
    --mk-success-text: #065f46;
    --mk-info-bg: #e0f2fe;
    --mk-info-text: #075985;
    --mk-error-bg: #fee2e2;
    --mk-error-text: #991b1b;

}

/* ===== Global typography ===== */

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.9);
}

/* Headings use Sora for a premium touch */
h1, h2, h3, h4, h5, h6 {
  font-family: "Sora", "Inter", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

  
/* Basic reset */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--mk-bg);
    color: var(--mk-text-main);
}

a {
    color: var(--mk-link);
    text-decoration: none;
}

a:hover {
    color: var(--mk-link-hover);
    text-decoration: underline;
}

/* ---------------- Navbar ---------------- */

.navbar {
    background-color: #f9fafb;
    border-bottom: 1px solid var(--mk-border-soft);
    padding: 0.6rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.navbar-brand img {
    display: block;
    height: 40px;
}

.navbar-links a {
    margin-right: 0.9rem;
    font-size: 0.95rem;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}


/* ---------------- Navbar + Footer (Hub theme) ---------------- */

/* Push footer to bottom if content is short */
html, body{
  height: 100%;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1 0 auto;
}

.site-footer{
  margin-top: auto;
}

/* Sticky footer + prevent huge empty pages (e.g. Login) */
html, body { height: 100%; }


/* Navbar background image (Hub theme) */
.navbar {
    background-image: linear-gradient(rgba(249, 250, 251, 0.72), rgba(249, 250, 251, 0.72)),
                      var(--mk-hub-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Makes the background pop slightly */
    filter: saturate(1.15) contrast(1.08);

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    /* Allows brand to be centered absolutely on small screens */
    position: relative;
}

/* Keep logo + Hub as ONE brand unit so spacing can't separate them */
.mk-brand-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    text-decoration: none;
}

.mk-brand-logo {
  height: 44px;   /* default for desktop/tablet */
  width: auto;    /* keep aspect ratio */
  display: block;
  margin: 0;
}

@media (max-width: 420px) {
  .mk-brand-logo { height: 34px; }
}


@media (max-width: 1100px) {
  .navbar-right { display: none; }     /* or hide just the links */
  .mk-burger-right { display: inline-flex; }
   /* Collapse account links sooner (prevents username/logout spilling out) */
  .navbar-right .mk-desktop-only { display: none !important; }

  /* Show ONLY the right burger at this breakpoint */
  .mk-burger-right { display: inline-flex; }
}

@media (max-width: 420px) {
  .mk-brand-logo { height: 34px; } /* if you set the img height in CSS */
  .mk-hub-badge  { font-size: 1.05rem; }
}

/* Hub badge: tight to logo + styled */
.mk-hub-badge {
    font-family: "Diplomata", serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.03em;
    margin-left: 2px;
    white-space: nowrap;
    color: var(--mk-btn-bg);
}

/* Navbar links: “tab/block” style (no filled active background) */
.navbar-links a,
.navbar-right a {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    margin: 0 4px;
    border-radius: 0;
    text-decoration: none;
    color: var(--mk-btn-bg);
    font-weight: 550;

    /* underline area reserved (prevents jump) */
    box-shadow: inset 0 -3px 0 transparent;
    transition: color 160ms ease, box-shadow 160ms ease;
}

/* Hover: underline only */
.navbar-links a:hover,
.navbar-right a:hover {
    background: transparent;
    color: var(--mk-link-hover);
    text-decoration: none;
    box-shadow: inset 0 -3px 0 rgba(47, 95, 168, 0.35);
}

/* Active: clean underline + black text */
.navbar-links a.is-active,
.navbar-right a.is-active {
    background: transparent;
    color: rgba(0, 0, 0, 0.92);
    text-decoration: none;
    box-shadow: inset 0 -3px 0 rgba(47, 95, 168, 0.75);
}

/* ====== Burger menus (tablet/mobile) ====== */

/* Hidden by default (desktop) */
.mk-burger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    cursor: pointer;

    align-items: center;
    justify-content: center;

    -webkit-tap-highlight-color: transparent;
}

.mk-burger i {
    font-size: 18px;
    color: var(--mk-btn-bg);
}

.mk-burger:hover {
    background: rgba(255, 255, 255, 0.82);
}

/* Desktop-only elements can be hidden cleanly on small screens */
.mk-desktop-only {
    display: inline-flex;
    align-items: center;
}

/* Mobile dropdown panels (left/right) */
.mk-mobile-menu {
    position: absolute;
    top: calc(100% + 10px);
    z-index: 1000;

    width: min(320px, 92vw);
    padding: 10px;

    background-image: linear-gradient(rgba(249, 250, 251, 0.92), rgba(249, 250, 251, 0.92)),
                      var(--mk-hub-bg-image);
    background-size: cover;
    background-position: center;

    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.mk-mobile-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--mk-btn-bg);
    font-weight: 650;
    text-decoration: none;
}

.mk-mobile-menu a:hover {
    background: rgba(47, 95, 168, 0.08);
    color: var(--mk-link-hover);
}

.mk-mobile-menu .mk-mobile-sep {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 8px 6px;
}

.mk-mobile-menu-left { left: 12px; }
.mk-mobile-menu-right { right: 12px; }

/* Keep navbar visible while scrolling (so burgers stay "in" the navbar) */
/* Make navbar truly persistent */
header.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
}

/* Push page content below the fixed navbar */
body {
    padding-top: var(--mk-nav-h, 72px);
}

/* ====== Footer ====== */
.site-footer {
    background-image: linear-gradient(rgba(249, 250, 251, 0.72), rgba(249, 250, 251, 0.72)),
                      var(--mk-hub-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: saturate(1.15) contrast(1.08);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-left a {
    color: var(--mk-btn-bg);
    text-decoration: none;
    font-weight: 400;
    white-space: nowrap;
}

.footer-left a:hover {
    color: rgba(0, 0, 0, 0.85);
    text-decoration: underline;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-social a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--mk-btn-bg);
    text-decoration: none;
    font-weight: 300;
    border-radius: 10px;
}

.footer-social i { font-size: 22px; }

.footer-social a:hover {
    color: rgba(0, 0, 0, 0.85);
    transform: translateY(-1px);
    background: rgba(47, 95, 168, 0.06);
}

.footer-right {
    color: rgba(0, 0, 0, 0.60);
    font-size: 0.95rem;
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 820px) {
    /* Show burgers and hide desktop link rows */
    .mk-burger { display: inline-flex; }

    .navbar-links,
    .navbar-right .mk-desktop-only {
        display: none !important;
    }

    /* Center brand, keep burgers at far left/right */
    .navbar-left,
    .navbar-right { flex: 1 1 0; }

    .navbar-right { justify-content: flex-end; }

    .navbar-brand.mk-brand-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* Slightly smaller brand on small screens */
    .navbar-brand img { height: 34px; }
    .mk-hub-badge { font-size: 1.05rem; }
}

    /* Footer stacks cleanly */
   .site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap; /* key for tablet */
}

.footer-left,
.footer-social,
.footer-right {
  flex: 1 1 220px; /* makes tablet spread instead of collapsing left */
}

.footer-social { justify-content: center; }
.footer-right { text-align: right; }

/* ===== Responsive Footer Layout ===== */
@media (max-width: 520px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-right { text-align: center; }
}

/* Tablet and down – allow wrapping and better spacing */
@media (max-width: 760px) {
  .site-footer-inner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px 24px;
  }

  .footer-left,
  .footer-social,
  .footer-right {
    flex: 1 1 100%;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
}

/* Smaller phones – stack everything nicely */
@media (max-width: 480px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .footer-right {
    margin-top: 4px;
  }
}


/* Restore header flex on tablet after footer media rule */
@media (max-width: 820px) {
  .navbar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Ensure burger menus stay visible */
  .navbar-left,
  .navbar-right {
    display: flex !important;
    align-items: center;
  }

  .navbar .burger-menu {
    display: inline-flex !important;
  }
}

/* ---------------- Page shell ---------------- */

.page-container {
    max-width: 1280px; /* a bit wider so the storefront feels less cramped */
    margin: 1.5rem auto 2.5rem;
    padding: 1.75rem 2.5rem;
    background-color: var(--mk-card-bg);
    border-radius: 12px;
    border: 1px solid var(--mk-border-soft);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

/* Watermark background used on About / Pricing / FAQ pages */
.page-container.mk-watermark{
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* Match About page defaults */
    --mk-watermark-opacity: var(--mk-about-watermark-opacity, 0.10);
    --mk-watermark-size: var(--mk-about-watermark-size, clamp(520px, 80vw, 980px));
    --mk-watermark-position: center 160px;
}

.page-container.mk-watermark::before{
    content: "";
    position: absolute;
    inset: 0;

    /* Use whichever file is actually in /static/img/ */
    background-image: url("../img/card-21.5e23a491d5e2.webp");
    background-repeat: no-repeat;
    background-position: var(--mk-watermark-position);
    background-size: var(--mk-watermark-size);

    opacity: var(--mk-watermark-opacity);
    filter: saturate(0.9) contrast(0.95);

    pointer-events: none;
    z-index: 0;
}

/* Keep content above watermark */
.page-container.mk-watermark > *{
    position: relative;
    z-index: 1;
}


/* Django messages */

ul.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

ul.messages li {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

ul.messages li.success {
    background-color: var(--mk-success-bg);
    color: var(--mk-success-text);
}

ul.messages li.info {
    background-color: var(--mk-info-bg);
    color: var(--mk-info-text);
}

ul.messages li.error,
ul.messages li.danger {
    background-color: var(--mk-error-bg);
    color: var(--mk-error-text);
}

/* Buttons */

.btn {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
}

/* Primary pill button */
.btn-primary {
    background-color: var(--mk-btn-bg);
    color: var(--mk-btn-text);
    border-color: transparent;
}

.btn-primary:hover {
    background-color: var(--mk-btn-bg-hover);
    color: var(--mk-btn-text);
    text-decoration: none;
}

/* Outline / secondary button – unified style */
.btn-secondary {
    background-color: transparent;
    color: var(--mk-btn-bg);
    border-color: rgba(47, 95, 168, 0.3);
}

.btn-secondary:hover {
    background-color: rgba(47, 95, 168, 0.08);
    color: var(--mk-btn-bg-hover);
    text-decoration: none;
}

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

/* Navbar / layout tweaks on smaller screens */

@media (max-width: 800px) {
    .navbar {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .navbar-left {
        flex-wrap: wrap;
    }

    .page-container {
        margin: 1rem 0.75rem 2rem;
        padding: 1.5rem 1.25rem;
    }
}

/* ================= Storefront: dashboard view ================= */

.sf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sf-header-main h1 {
    margin: 0 0 0.35rem;
    font-size: 1.9rem;
}

.sf-header-main p {
    margin: 0;
}

.sf-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sf-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.sf-badge-success {
    background-color: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.sf-badge-muted {
    background-color: rgba(148, 163, 184, 0.15);
    color: #334155;
}

.sf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
    gap: 1.75rem;
    align-items: flex-start;
}

.sf-panel {
    background-color: #f9fafb;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 1.4rem 1.6rem;
}

.sf-panel h2 {
    margin-top: 0;
    margin-bottom: 0.9rem;
    font-size: 1.2rem;
}

/* Preview card */

.sf-preview-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    padding: 1.5rem 1.6rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

/* Logo in the “My storefront” preview card */
.sf-preview-logo img {
    max-width: 260px;
    max-height: 180px;
    width: auto;
    height: auto;
    display: block;
    margin-bottom: 1rem;
    object-fit: contain;
}

.sf-preview-card h3 {
    margin-top: 0;
    margin-bottom: 0.4rem;
    font-size: 1.3rem;
}

.sf-preview-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 1.25rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mk-text-muted);
}

.sf-preview-empty {
    font-style: italic;
    color: var(--mk-text-muted);
}

.sf-preview-url {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.sf-preview-url a {
    word-break: break-all;
}

/* Mobile tweaks for storefront layout */

@media (max-width: 900px) {
    .sf-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .sf-header-actions {
        align-self: stretch;
    }

    .sf-grid {
        grid-template-columns: 1fr;
    }

    .sf-panel {
        padding: 1.25rem 1.25rem;
    }
}

/* Small mobile – stack header actions + reduce padding */
@media (max-width: 520px) {
  .page-container {
    padding: 18px 14px;
  }

  .sf-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sf-header-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
  }

  .sf-header-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Helps long emails/URLs not break layout */
  .sf-panel,
  .sf-panel * {
    overflow-wrap: anywhere;
  }
}


/* My Storefront – logo upload on the right */

.sf-logo-row {
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    padding-bottom: 0.75rem;
    margin-bottom: 1.1rem;
}

.sf-logo-current {
    margin-bottom: 0.5rem;
}

.sf-logo-current img {
    max-width: 140px;
    height: auto;
    display: block;
    margin-bottom: 0.25rem;
}

/* Logo in the "Preview" card + layout editor */
.storefront-logo-large {
    max-width: 120px;      /* controls how big it can get */
    max-height: 220px;
    width: 100%;           /* scale inside that max width */
    height: auto;
    display: block;
    margin: 0 auto 1.5rem; /* center + space below */
    border-radius: 1.25rem;
}

/* Tighter logo size for the dashboard preview + layout editor */
.sf-preview-card .sf-preview-logo img.storefront-logo-large {
    max-width: 140px;   /* shrink overall width */
    max-height: 140px;
    width: auto;        /* override the width:100% from .storefront-logo-large */
    height: auto;
    margin: 0 auto 1.25rem;
}


/* Slightly smaller on mobiles */
@media (max-width: 768px) {
    .storefront-logo-large {
        max-width: 180px;
    }
}

/* Simple form helpers used across storefront */

.sf-form-row {
    margin-bottom: 1rem;
}

.sf-form-row label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.sf-form-row input[type="text"],
.sf-form-row textarea {
    width: 100%;
    max-width: 100%;
}

.sf-form-help {
    font-size: 0.85rem;
    color: var(--mk-text-muted);
    margin-top: 0.25rem;
}

.sf-form-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.sf-checkbox-label input[type="checkbox"] {
    margin: 0;
}

/* ================= Business profile & dashboard ================= */

.business-logo-wrapper {
    margin-bottom: 0.75rem;
}

.business-logo {
    max-width: 160px;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* Dashboard business profile layout */
.dash-business-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.business-logo-wrapper {
    flex: 0 0 auto;
    padding: 0.5rem;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--mk-border-soft);
}

.business-logo {
    display: block;
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.business-details {
    flex: 1 1 auto;
}

/* --- Business profile layout (Edit business profile) --- */

.profile-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 2rem;
    align-items: flex-start;
}

.profile-logo-panel {
    text-align: center;
}

.profile-logo-img {
    max-width: 60%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
    display: block;
    margin: 0 auto 0.75rem;
}

/* Placeholder box if no logo yet */
.profile-logo-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    border: 1px dashed var(--mk-border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mk-text-muted);
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
}

.profile-form-panel h1 {
    margin-top: 0;
}

/* Form layout tweaks used here (but safe globally) */
.form-stacked .form-row {
    margin-bottom: 1.25rem;
}

.form-stacked label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.form-stacked input[type="text"],
.form-stacked input[type="email"],
.form-stacked input[type="file"],
.form-stacked textarea {
    width: 100%;
    max-width: 480px;
}

.form-error {
    color: #b91c1c;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.link-back {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* --- File/image “Clear” checkbox tidy-up --- */

/* Keep checkbox and its label on one line */
.profile-logo-field input[type="checkbox"],
.storefront-logo-field input[type="checkbox"] {
    margin-left: 0.4rem;
    vertical-align: middle;
}

.profile-logo-field label[for$="_clear"],
.storefront-logo-field label[for$="_clear"] {
    display: inline-block;
    margin-left: 0.25rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Optional: slightly de-emphasise the tiny “Currently:” line */
.profile-logo-field,
.storefront-logo-field {
    font-size: 0.9rem;
}

/* ================= Public storefront ================= */

/* Wrapper card for the whole public storefront */
.storefront-public-card {
    max-width: 960px;
    margin: 2.5rem auto 3rem;
    padding: 2.5rem 3rem;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

/* Logo area */
.storefront-public-logo {
    text-align: center;
    margin: 1.5rem 0 1.75rem;
}

.storefront-public-logo img {
    max-width: 420px;
    max-height: 260px;
    width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 1.25rem;
    object-fit: contain;
}

.storefront-public-title {
    font-size: 2.1rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.25rem;
}

.storefront-public-section {
    margin-top: 2rem;
}

.storefront-public-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.storefront-public-body {
    font-size: 1rem;
    line-height: 1.6;
    color: #1f2937;
}

/* Public card grid (and preview grid uses same look) */

.storefront-card-public-grid,
.storefront-card-preview-grid,
.sf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

/* Public card grid (and preview grid uses same look) */

/* Cards stay between 220–330px wide and are centred (public + preview grids).
   - 1 card  ->centred, not full-width
   - 2–3 cards -> sit side by side at a comfortable size
*/
.storefront-card-public-grid,
.storefront-card-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 330px));
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.storefront-public-card-item,
.storefront-preview-card,
.sf-card {
    background: rgba(243, 244, 255, 0.40);
    border-radius: 16px;
    padding: 1rem 1.15rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
}

/* Resize Buy now button in linked cards to fit content */
.sf-card .storefront-preview-card-button {
    display: inline-block !important;
    width: auto !important;            /* stop width:100% overrides */
    max-width: none !important;        /* prevent arbitrary max-widths */
    align-self: flex-start !important; /* escape flexbox stretching */
    white-space: nowrap;               /* prevent wrapping that increases width */
    padding: 0.25rem 0.5rem !important;/* tighter horizontal padding */
    font-size: 0.9rem;                 /* optional: slightly smaller text */
}

.storefront-public-card-image,
.storefront-preview-card-image,
.sf-card-image-wrap img {
    width: 90%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    display: block;
    object-fit: cover;
}

/* separate wrapper so preview can crop images if needed */
.sf-card-image-wrap {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.storefront-public-card-title,
.storefront-preview-card-title,
.sf-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.storefront-public-card-price,
.storefront-preview-card-price,
.sf-card-price {
    font-size: 0.9rem;
    font-weight: 500;
    color: #2563eb;
    margin-bottom: 0.45rem;
}

.storefront-public-card-text,
.storefront-preview-card-text,
.sf-card-desc {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* Section heading used above card grids */
.storefront-section-heading {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}

.sf-public-link{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.sf-link-action{
  border: 1px solid rgba(47, 95, 168, 0.35);
  background: rgba(47, 95, 168, 0.06);
  color: var(--mk-btn-bg);
  padding: 0.25rem 0.55rem;
  border-radius: 10px;
  font-size: 0.9rem;
  cursor: pointer;
}

.sf-link-action:hover{
  background: rgba(47, 95, 168, 0.12);
  color: rgba(0, 0, 0, 0.85);
}

.sf-link-status{
  color: rgba(0, 0, 0, 0.65);
  font-size: 0.9rem;
}

/* ================= Storefront card EDIT form ================= */

.sf-card-formset {
    border-top: 1px solid #e1e6f2;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    display: grid;
    gap: 1rem;
}

.sf-card-form {
    background: #f9fbff;
    border-radius: 0.75rem;
    border: 1px solid #dde3f0;
    padding: 0.75rem 0.9rem;
}

.sf-card-form-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.6rem;
}

.sf-card-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .sf-card-two-col {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .mk-how-media-img {
        margin-left: 20px;
        margin-top: 45px;
    }
}

.sf-card-delete-row {
    margin-top: 0.5rem;
}

/* Extra room before Save/Cancel on My storefront form */
.sf-panel form .form-actions {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e1e6f2;
}

/* Highlight the public storefront toggle block */
.sf-form-row-public {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top: 1px solid #e1e6f2;
    border-bottom: 1px solid #e1e6f2;
}

/* ================= Explore storefronts ================= */

.explore-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.explore-title {
    margin: 0 0 0.25rem;
    font-size: 1.7rem;
}

.explore-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--mk-text-muted);
}

.explore-count {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mk-text-muted);
}

.explore-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.explore-filters-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.explore-filters-right {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.9rem;
}

.explore-sort-label {
    font-weight: 500;
}

.explore-sort-select {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--mk-border-soft);
    background-color: #fff;
    font-size: 0.9rem;
}

/* Grid / list toggle buttons */

.explore-view-toggle {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.1rem;
    background-color: rgba(148, 163, 184, 0.18);
}

.view-toggle-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    color: #374151;
}

.view-toggle-btn.is-active {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
    font-weight: 600;
}

/* List view */

.explore-list {
    display: grid;
    gap: 1rem;
}

.explore-list-item {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background-color: #f9fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.explore-list-logo img {
    width: 60%;
    height: auto;
    border-radius: 12px;
    display: block;
    object-fit: contain;
    background-color: #fff;
}

.explore-list-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.explore-list-title {
    margin: 0;
    font-size: 1.1rem;
}

.explore-list-title a {
    text-decoration: none;
}

.explore-list-title a:hover {
    text-decoration: underline;
}

.explore-list-desc {
    margin: 0;
    font-size: 0.9rem;
    color: #4b5563;
}

.explore-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.explore-meta-pill {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background-color: rgba(148, 163, 184, 0.18);
    font-size: 0.8rem;
}

.explore-list-cta {
    align-self: flex-start;
    margin-top: 0.3rem;
}

/* Shared placeholder for when no storefront logo is set */
.explore-logo-placeholder {
    width: 50%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    border: 1px dashed var(--mk-border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--mk-text-muted);
    background: rgba(255, 255, 255, 0.7);
}

/* Explore – responsive tweaks */

@media (max-width: 800px) {
    .explore-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .explore-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .explore-list-item {
        grid-template-columns: 1fr;
    }

    .explore-list-logo {
        max-width: 260px;
    }
}

/* Explore – filter row layout (prevents overflow on tablet/mobile) */
.explore-filters-row-2 {
  display: flex;
  align-items: center;
  gap: 0.85rem;      /* wider spacing */
  flex-wrap: wrap;   /* allows wrap on tablet */
}

.explore-filters-row-2 label {
  margin: 0;
  font-weight: 500;
}

.explore-filters-row-2 select {
  min-width: 160px;  /* prevents tiny selects */
}

/* Tablet: allow right-side filters to wrap cleanly */
@media (max-width: 800px) {
  .explore-filters-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.85rem;
  }

  .explore-sort-select {
    max-width: 100%;
  }
}

/* Small mobile: stack filters vertically */
@media (max-width: 520px) {
  .explore-filters-right {
    flex-direction: column;
    align-items: stretch;
  }

  .explore-filters-row-2 {
    flex-direction: column;
    align-items: stretch;
  }

  .explore-filters-row-2 select,
  .explore-sort-select {
    width: 100%;
  }
}

.explore-filters-row-1,
.explore-filters-row-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px; /* bigger spacing */
  align-items: center;
}

@media (max-width: 520px) {
  .explore-filters-row-1,
  .explore-filters-row-2 {
    flex-direction: column;
    align-items: stretch;
  }

  .explore-filters-row-1 select,
  .explore-filters-row-2 select {
    width: 100%;
  }
}


/* Subtle divider line for form sections */
.sf-form-divider {
  border: 0;
  border-top: 1px solid #e0e4ea; /* soft grey */
  margin: 1.25rem 0;             /* breathing room */
}

/* =======  My Storefront – layout editor overlay ======== */

/* Preview header with small "Edit layout" action */
.sf-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sf-preview-edit-btn {
    border: none;
    background: transparent;
    padding: 0.15rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mk-link);
    cursor: pointer;
}

.sf-preview-edit-btn:hover,
.sf-preview-edit-btn:focus {
    color: var(--mk-link-hover);
    text-decoration: underline;
}

/* Full-screen layout editor overlay */
.sf-layout-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
}

.sf-layout-editor-overlay.is-open {
    display: block;
}

.sf-layout-editor-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.sf-layout-editor-dialog {
    position: relative;
    max-width: 1100px;
    margin: 3rem auto;
    background: var(--mk-card-bg);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
    padding: 1.5rem 1.75rem 1.75rem;
}

.sf-layout-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sf-layout-editor-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.sf-layout-editor-close {
    border: none;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--mk-text-muted);
}

.sf-layout-editor-close:hover {
    color: var(--mk-link-hover);
}

.sf-layout-editor-body {
    background: #e4ecf7;
    border-radius: 14px;
    padding: 1.5rem;
}

.sf-layout-editor-canvas {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 1.5rem;
    max-height: 70vh;
    overflow: auto;
}

.sf-layout-editor-surface {
    max-width: 960px;
    margin: 0 auto;
}

.sf-preview-card--editor {
    max-width: 100%;
    margin: 0 auto;
}

.sf-layout-editor-hint {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

/* Wider "Customize storefront layout" editor on desktop */
@media (min-width: 992px) {
  .sf-layout-editor-dialog {
    max-width: none;                 /* remove old 1100px cap */
    width: min(96vw, 1400px);        /* use up to ~96% of the screen, but cap at 1400px */
  }

  .sf-layout-editor-surface {
    max-width: 1120px;               /* let the preview breathe a bit more */
  }
}

/* === Storefront layout editor – draggable blocks === */

.sf-layout-editor-surface {
    position: relative;
    min-height: 420px;
}

/* Any block we mark as draggable gets this outline */
.sf-layout-draggable {
    position: relative;
    cursor: move;
    outline: 2px dashed rgba(59, 130, 246, 0.45); /* soft blue */
    outline-offset: 6px;
    border-radius: 0.75rem;
    padding: 0.35rem; /* small padding so outline doesn’t touch content */
    touch-action: none; /* required for interact.js on touch devices */
}

.sf-layout-draggable:hover {
    outline-color: rgba(37, 99, 235, 0.85);
}

/* Storefront layout editor – text styling toolbar */
.sf-layout-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.5);
    font-size: 0.875rem;
}

.sf-layout-editor-toolbar label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.15rem;
}

.sf-layout-editor-toolbar select {
    min-width: 8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
}

/* Small pill-style buttons */
.sf-layout-editor-toolbar .sf-toolbar-button {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #cbd5f5;
    background: #e5edff;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.sf-layout-editor-toolbar .sf-toolbar-button[disabled] {
    opacity: 0.45;
    cursor: default;
}

.sf-layout-editor-toolbar .sf-toolbar-button-danger {
    border-color: #fecaca;
    background: #fee2e2;
    color: #b91c1c;
}

/* Selected + hidden states for blocks inside the editor */
.sf-layout-block--selected {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.55);
}

.sf-layout-block--hidden {
    opacity: 0.25;
    filter: grayscale(0.6);
}

/* Layout editor tweaks – selection + scrolling */

/* Make the selected block clearly stand out */
.sf-layout-editor-overlay .sf-layout-block--selected {
    box-shadow:
        0 0 0 2px rgba(59, 130, 246, 0.9),
        0 18px 55px rgba(15, 23, 42, 0.35);
}

/* Let the whole modal body scroll, not the inner canvas box */
.sf-layout-editor-body {
    max-height: 80vh;          /* the dialog can scroll vertically */
    overflow: auto;
}

/* The preview canvas itself no longer has its own scrollbar */
.sf-layout-editor-canvas {
    max-height: none;
    overflow: visible;
}

/* ======== Storefront Layout Editor (overlay + blocks)
 Notes: This is purely for the editor UI (does not affect public page).======== */


.sf-layout-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(2px);
}

.sf-layout-editor-dialog {
  position: relative;
  width: min(1400px, calc(100% - 48px));
  height: min(900px, calc(100% - 48px));
  margin: 24px auto;
  background: #f8fafc;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.35);
  display: flex;
  flex-direction: column;
}

.sf-layout-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
}

.sf-layout-editor-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.sf-layout-editor-close:hover {
  opacity: 1;
}

.sf-layout-editor-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0; /* allows canvas scrolling */
}

/* Toolbar */
.sf-layout-editor-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 14px;
  background: #f1f5f9;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
}

.sf-toolbar-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.sf-toolbar-group select,
.sf-toolbar-group input[type="number"],
.sf-toolbar-group input[type="color"] {
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: #ffffff;
  padding: 0 10px;
}

.sf-toolbar-inline-buttons {
  display: flex;
  gap: 8px;
}

.sf-toolbar-button {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  background: #eef2ff;
  cursor: pointer;
}

.sf-toolbar-button:hover {
  border-color: rgba(99, 102, 241, 0.45);
}

.sf-toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sf-toolbar-button-toggle.is-active {
  border-color: rgba(79, 70, 229, 0.9);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.sf-toolbar-button-danger {
  background: #fff1f2;
  border-color: rgba(244, 63, 94, 0.35);
}

/* Canvas + surface
   - Canvas is scrollable
   - Surface is the “page” (background colour applies here)
   - Surface is constrained to editor width (no over-wide layer) */
.sf-layout-editor-canvas {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #e9eff7;
  border-radius: 16px;
  padding: 18px;
}

.sf-layout-editor-surface {
  position: relative;
  min-height: 720px;
  width: 100%;
  max-width: 100%;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 22px;
  overflow: hidden; /* prevents blocks creating “ghost width” */
}

.sf-layout-editor-surface.sf-surface-fit {
  transform-origin: top left;
  transform: scale(0.85);
}

/* Lock body scroll when editor open */
body.sf-editor-lock {
  overflow: hidden;
}

/* Blocks */
.sf-layout-block {
  position: absolute;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px dashed rgba(129, 140, 248, 0.95);
  padding: 12px 16px 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  cursor: grab;
  user-select: none;
  max-width: 100%;
}

.sf-layout-block--dragging,
.sf-layout-block--resizing {
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.28);
}

.sf-layout-block-selected {
  border-style: solid;
  border-color: rgba(79, 70, 229, 0.95);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18), 0 18px 54px rgba(15, 23, 42, 0.22);
}

.sf-layout-block-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 8px;
}

.sf-layout-block-content {
  display: inline-block;
  max-width: 100%;
}

/* Resize handle */
.sf-layout-resize-handle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #4f46e5;
  background: #eef2ff;
  cursor: se-resize;
}

.sf-layout-block-hidden {
  opacity: 0.28;
  filter: grayscale(0.7);
}

/* ====== Edit business profile layout  ====== */
.profile-layout{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

.profile-form-panel{
  min-width: 0; /* prevents overflow squeezing */
}

@media (max-width: 700px){
  .profile-layout{
    grid-template-columns: 1fr; /* stack */
  }

  .profile-logo-panel{
    justify-self: center;
    text-align: center;
  }

  .profile-logo-img{
    width: 100%;
    max-width: 240px;
    height: auto;
  }

  .profile-logo-placeholder{
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
  }
}

/* Explore grid: keep image area consistent (prevents giant logos) */
.explore-grid .sf-card-image-wrap{
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.explore-grid .sf-card-image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.explore-grid .explore-logo-placeholder{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.explore-card-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.4rem 0 0.6rem;
}

/* Pagination */
.explore-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.is-disabled{
  opacity: 0.45;
  pointer-events: none;
}

.explore-page-indicator{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(47, 95, 168, 0.25);
  color: rgba(0,0,0,0.75);
  background: rgba(255,255,255,0.7);
}

/* Explore LIST thumbnails: center, consistent size */
.explore-list-logo{
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
}

.explore-list-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* removes awkward top alignment */
  object-position: center;
  display: block;
}

/* Explore GRID thumbnails: avoid white bars */
.explore-grid .sf-card-image-wrap{
  height: 160px; /* slightly smaller than before */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
}

.explore-grid .sf-card-image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* removes top/bottom letterboxing */
  object-position: center;
  display: block;
}

/* Clamp descriptions so cards feel balanced */
.explore-grid .sf-card-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 3.9em; /* keeps cards aligned */
}

.explore-list-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.explore-logo-placeholder{
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(47,95,168,0.12);
}

.dashboard-profile-logo{
  width: 96px;
  height: 96px;
  border-radius: 18px;
  overflow: hidden;
  margin: 0 0 12px;

  /* Keeps wide logos looking “normal” inside a square box */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 247, 251, 0.6);
}

.dashboard-profile-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* key change: prevents cropping */
  object-position: center;
  display: block;
}


/* ===== Explore: consistent thumbnails + nicer card proportions ===== */

/* Make list rows feel aligned */
.explore-list-item {
  align-items: center;
}

/* LIST thumb: slightly bigger + centered crop */
.explore-list-logo {
  width: 110px;
  height: 110px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 520px) {
  .explore-list-logo {
    width: 86px;
    height: 86px;
  }
}

/* Ensure link fills the thumb box */
.explore-logo-link {
  width: 100%;
  height: 100%;
  display: block;
}

/* Image fills box; no “top bias” */
.explore-list-logo img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Placeholder fills the same space */
.explore-logo-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* GRID: stop images from becoming huge / showing bars */
.explore-grid .sf-card-image-wrap {
  height: 155px;
  overflow: hidden;
  border-radius: 18px;
}

.explore-grid .sf-card-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  object-position: center;
}

/* Explore GRID: fill available width inside .page-container */
.explore-grid.sf-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* allows stretching */
  justify-content: stretch; /* remove centering “narrow grid” effect */
}

/* Make description feel less “plain” via tighter clamp */
.explore-list-desc,
.explore-grid .sf-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.explore-list-desc { -webkit-line-clamp: 3; }
.explore-grid .sf-card-desc { -webkit-line-clamp: 3; }

/* ====== Explore: image fit + nicer text ====== */

/* LIST: bigger logo box + no cropping */
.explore-list-logo {
  width: 150px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
}

.explore-list-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* key: no cropping */
  display: block;
}

/* Placeholder should match the image box size */
.explore-logo-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* GRID: force consistent image area + no cropping */
.explore-grid .sf-card-image-wrap {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
}

.explore-grid .sf-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* key: no cropping */
  display: block;
}

/* GRID: make description feel less “plain” */
.explore-grid .sf-card-desc {
  color: rgba(0, 0, 0, 0.72);
  line-height: 1.45;
  margin-top: 10px;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Keep button aligned even if descriptions vary */
.explore-grid .sf-card {
  display: flex;
  flex-direction: column;
}

.explore-grid .sf-card .btn {
  margin-top: auto;
}


/* ======= Featured cards summary styling ======= */

/* Hide the default <details>/<summary> marker (custom chevron is used instead) */
.sf-card-formset-wrapper summary {
    list-style: none;
}

.sf-card-formset-wrapper summary::-webkit-details-marker {
    display: none;
}

.sf-card-summary {
    padding: 0.5rem 1rem;
    cursor: pointer; /* makes it clear it is clickable */
}

.sf-card-summary-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sf-card-summary-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sf-card-summary-left label {
    position: relative;
    padding-left: 1.2rem;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.85);
}

.sf-card-summary-left label::before {
    content: '▸'; /* chevron */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #2f5fa8;
    transition: transform 0.2s ease;
}

/* Rotate chevron when <details> is open */
.sf-card-formset-wrapper[open] .sf-card-summary-left label::before {
    transform: translateY(-50%) rotate(90deg);
}

.sf-card-summary:hover .sf-card-summary-left label {
    color: #1a3f7c;
}

.sf-card-summary-right {
    margin-left: auto; /* pushes the thumbnail to the far right */
    display: flex;
    align-items: center;
    padding-right: 0.5rem; /* keeps it off the hard edge */
}

.sf-card-summary-thumb {
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(47, 95, 168, 0.25);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

/* Softer “glass” background so bright page backgrounds don’t overpower cards */
.sf-card-grid[data-sf-block="cards_grid"]{
  justify-content: center;
  justify-items: center;
}

.sf-card-grid[data-sf-block="cards_grid"] .sf-card{
  width: 100%;
  max-width: 420px;
  background: rgba(243, 244, 255, 0.40) !important; /* overrides the solid background */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(47, 95, 168, 0.18);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

/* Add a clean divider before the description */
.sf-card-grid[data-sf-block="cards_grid"] .sf-card-text{
  margin-top: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(47, 95, 168, 0.14);
  color: rgba(0, 0, 0, 0.75);
}

/* Featured cards: add a subtle separator so the card feels less "one-block" */
.sf-card-desc,
.sf-card-text {
  border-top: 1px solid rgba(47, 95, 168, 0.18);
  border-bottom: 1px solid rgba(47, 95, 168, 0.18);
  margin-top: 0.65rem;
  padding-top: 0.75rem;
}

/* Preview card: keep it centered inside its resizable block */
.storefront-preview-card {
  margin-left: auto;
  margin-right: auto;
}

/* Prevent cards grid from stretching cards vertically when the block is tall */
.sf-card-grid[data-sf-block="cards_grid"] {
  align-content: start;
  align-items: start;
  justify-items: center;
  justify-content: center;
}

.sf-card .storefront-preview-card-button,
.sf-card .storefront-public-card-button {
  margin-top: auto !important;
}

/* ---------------- About page watermark background ---------------- */

.about-page {
    position: relative;
    z-index: 0;

    /* Slight translucency so the watermark shows through the card container */
    background: rgba(249, 250, 251, 0.92);
}

/* Watermark spans the whole page (outside + through the About container) */
.about-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    /* Image URL is injected from the About template via data attribute */
    background-repeat: no-repeat;
    background-position: center 160px;
    background-size: var(--mk-about-watermark-size) auto;
    opacity: var(--mk-about-watermark-opacity);
    filter: saturate(1.05) contrast(1.05);
}

/* ========== Pricing page ========== */

.mk-page-head {
  margin-bottom: 1.25rem;
}

.mk-page-title {
  margin: 0 0 0.5rem 0;
}

.mk-page-lead {
  margin: 0;
  max-width: 70ch;
}

.mk-pricing {
  margin-top: 1.25rem;
}

.mk-billing-toggle {
  /* Hidden control for CSS-only toggle */
  position: absolute;
  left: -9999px;
}

.mk-billing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 1.25rem 0;
}

.mk-billing-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mk-billing-label {
  font-weight: 600;
}

.mk-save-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  background: rgba(47, 95, 168, 0.10);
  border: 1px solid rgba(47, 95, 168, 0.18);
}

/* Toggle switch */
.mk-switch {
  position: relative;
  width: 48px;
  height: 24px;
  cursor: pointer;
  flex: 0 0 auto;
}

.mk-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(47, 95, 168, 0.14);
  border: 1px solid rgba(47, 95, 168, 0.22);
}

.mk-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
  transition: transform 160ms ease;
}

.mk-billing-toggle:checked ~ .mk-billing-row .mk-switch-thumb {
  transform: translateX(24px);
}

.mk-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* Medium screens: show 2 cards on first row, 3rd card centered on its own row */
@media (max-width: 992px) {
  .mk-pricing-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  /* 3rd plan (Pro) goes full row and centers */
  .mk-pricing-grid > .mk-plan-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 560px;
    justify-self: center;
  }
}

/* Small screens: single column, keep cards centered */
@media (max-width: 576px) {
  .mk-pricing-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .mk-plan-card {
    width: 100%;
    max-width: 360px;
    border-radius: 18px;
    padding: 1.25rem 1.25rem 1.1rem 1.25rem;
    border: 1px solid rgba(47, 95, 168, 0.18);
  }

  .mk-pricing-grid > .mk-plan-card:nth-child(3) {
    grid-column: auto;
    max-width: 560px;
  }
}

.mk-plan-card--recommended {
  border: 2px solid rgba(47, 95, 168, 0.45);
  transform: translateY(-4px);
}

.mk-plan-card--muted {
  opacity: 0.92;
}

.mk-reco-pill {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(47, 95, 168, 0.10);
  border: 1px solid rgba(47, 95, 168, 0.30);
}

.mk-plan-name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 750;
}

.mk-plan-sub {
  margin: 0.4rem 0 1rem 0;
  color: rgba(15, 23, 42, 0.75);
}

.mk-price {
  margin: 0.25rem 0 1rem 0;
  line-height: 1.05;
}

.mk-price-amount {
  font-size: 2rem;
  font-weight: 650;
}

.mk-price-term {
  margin-left: 0.35rem;
  color: rgba(15, 23, 42, 0.72);
  font-weight: 600;
}

.mk-price--dual .mk-price-annual {
  display: none;
}

.mk-price-meta {
  display: block;
  margin-top: 0.35rem;
  color: rgba(15, 23, 42, 0.65);
}

/* Toggle annual pricing display */
.mk-billing-toggle:checked ~ .mk-pricing-grid .mk-price--dual .mk-price-monthly {
  display: none;
}

.mk-billing-toggle:checked ~ .mk-pricing-grid .mk-price--dual .mk-price-annual {
  display: inline;
}

.mk-plan-btn {
  width: 100%;
  border-radius: 12px;
  margin: 0.25rem 0 1rem 0;
  text-align: center;
}

.mk-feature-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0 0;
  display: grid;
  gap: 0.7rem;
}

.mk-feature {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.mk-feature::before {
  content: "✓";
  font-weight: 900;
  margin-top: 0.05rem;
}

.mk-plan-footnote {
  margin: 0.95rem 0 0 0;
  font-size: 0.9rem;
  color: rgba(15, 23, 42, 0.65);
}

.mk-pricing-notes {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(47, 95, 168, 0.16);
}

.mk-section-title {
  margin: 0 0 0.5rem 0;
}

.mk-muted {
  color: rgba(15, 23, 42, 0.72);
}

.mk-bullet {
  margin: 0.75rem 0 0 1.1rem;
}

/* Pricing: prevent justified spacing inside plan cards */
.mk-plan-card,
.mk-feature-list,
.mk-feature {
  text-align: left;
  text-justify: auto;
}

.mk-feature {
  justify-content: flex-start; /* ensures no spacing tricks in flex */
}

.mk-feature > * {
  max-width: 100%;
}

/* ========== Pricing page (responsive cards) ========== */

.mk-pricing-grid {
  display: grid;
  gap: 1.25rem;

  /* Prevent “too wide” cards (keeps the tall feel) */
  grid-template-columns: repeat(3, minmax(260px, 340px));
  justify-content: center;
  align-items: stretch;
}

/* 2 cards per row on tablets */
@media (max-width: 992px) {
  .mk-pricing-grid {
    grid-template-columns: repeat(2, minmax(260px, 360px));
  }

  /* 3rd plan centered under the first two */
  .mk-pricing-grid > .mk-plan-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 420px;
    width: 100%;
  }
}

/* 1 card per row on mobile + centered */
@media (max-width: 640px) {
  .mk-pricing-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .mk-pricing-grid > .mk-plan-card {
    width: 100%;
    max-width: 420px;
  }
}

.mk-plan-card {
  border-radius: 18px;
  padding: 1.25rem;
  border: 1px solid rgba(47, 95, 168, 0.20);

  /* Lets watermark show through slightly without killing readability */
  background: rgba(245, 247, 251, 0.05);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(1px);

  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);

  /* Keeps cards feeling “tall” and consistent */
  display: flex;
  flex-direction: column;
  min-height: 560px;
}

@media (max-width: 640px) {
  .mk-plan-card {
    min-height: 0; /* Avoid huge empty space on mobile */
  }
}

/* Slightly lighter typography (less “heavy”) */
.mk-plan-name { font-weight: 650; }
.mk-price-amount { font-size: 1.85rem; font-weight: 650; }

/* Keeps the bottom note pinned nicely if it exists */
.mk-plan-card .mk-plan-footnote {
  margin-top: auto;
}

/* Make sure feature rows wrap nicely */
.mk-feature {
  align-items: flex-start;
}

/* ======= FAQ page (two-column layout + accordion + technical panel) ======== */

.mk-faq-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 992px){
  .mk-faq-layout{ grid-template-columns: 1fr; }
}

/* Left column sections */
.mk-faq-section{
  margin-top: 1.25rem;
}

.mk-faq-section:first-child{
  margin-top: 0;
}

/* FAQ accordion cards */
.mk-faq-item{
  border: 1px solid rgba(168, 47, 47, 0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.60);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
  overflow: hidden;
  margin: 0.75rem 0;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.mk-faq-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
  border-color: rgba(47, 95, 168, 0.22);
}

.mk-faq-item[open]{
  border-color: rgba(47, 95, 168, 0.30);
}

.mk-faq-q{
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1.1rem;
  font-weight: 650;
  position: relative;
}

.mk-faq-q::-webkit-details-marker{ display: none; }

/* Chevron */
.mk-faq-q::after{
  content: "▸";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
  transition: transform 140ms ease, opacity 140ms ease;
}

.mk-faq-item[open] .mk-faq-q::after{
  transform: translateY(-50%) rotate(90deg);
  opacity: 1;
}

.mk-faq-a{
  padding: 0 1.1rem 1rem 1.1rem;
  border-top: 1px solid rgba(168, 47, 106, 0.12);
  color: rgba(42, 15, 15, 0.86);
}

.mk-faq-muted{
  margin-top: 0.5rem;
  color: rgba(15, 23, 42, 0.65);
  font-size: 0.95rem;
}

/* Right column technical panel */
.mk-tech-panel{
  border: 1px solid rgba(168, 47, 97, 0.08);
  border-radius: 18px;
  padding: 1.15rem 1.15rem 1.25rem;
  background: rgba(245, 247, 251, 0.15);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(2px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/* Optional sticky feel on desktop (keeps panel visible while scrolling) */
@media (min-width: 993px){
  .mk-tech-panel{
    position: sticky;
    top: calc(var(--mk-nav-h, 72px) + 18px);
  }
}

.mk-tech-title{
  margin: 0 0 0.4rem 0;
  font-size: 1.2rem;
  font-weight: 650;
}

.mk-tech-lead{
  margin: 0 0 0.9rem 0;
  color: rgba(15, 23, 42, 0.72);
}

.mk-tech-block{
  border: 1px solid rgba(47, 95, 168, 0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  margin: 0.65rem 0;
  overflow: hidden;
}

.mk-tech-q{
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 0.9rem;
  font-weight: 650;
  position: relative;
}

.mk-tech-q::-webkit-details-marker{ display: none; }

.mk-tech-q::after{
  content: "▾";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.75;
}

.mk-tech-a{
  padding: 0 0.9rem 0.85rem;
  border-top: 1px solid rgba(47, 95, 168, 0.10);
  color: rgba(15, 23, 42, 0.84);
}

.mk-tech-list{
  margin: 0.65rem 0 0 1.1rem;
}

.mk-tech-foot{
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(47, 95, 168, 0.12);
}

.mk-tech-subtitle{
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  font-weight: 650;
}

.mk-tech-muted{
  margin: 0;
  color: rgba(15, 23, 42, 0.70);
  font-size: 0.95rem;
}

/* ======= Home page (hero + features + CTA) ======= */

.mk-home-hero{
  padding: 1.75rem 0 1.25rem;
}

.mk-hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 992px){
  .mk-hero-grid{ grid-template-columns: 1fr; }

  /* Keep text first, media second */
  .mk-hero-copy{ order: 1; }
  .mk-hero-media{ order: 2; margin-top: 1.25rem; }
}

.mk-hero-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 650;
  background: rgba(47, 95, 168, 0.10);
  border: 1px solid rgba(47, 95, 168, 0.18);
  color: rgba(15, 23, 42, 0.82);
  margin-bottom: 20px;
}

.mk-hero-title{
  margin: 0.75rem 0 0.75rem;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
}

.mk-hero-lead{
  margin: 0;
  max-width: 65ch;
  font-size: 1.08rem;
  color: rgba(15, 23, 42, 0.72);
}

.mk-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.15rem;
}

.mk-hero-trust{
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: rgba(15, 23, 42, 0.66);
  font-size: 0.95rem;
}

.mk-hero-trust li{
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.mk-hero-trust li::before{
  content: "✓";
  font-weight: 900;
  color: rgba(47, 95, 168, 0.85);
}

.mk-media-card{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(47, 95, 168, 0.18);
  background: rgba(245, 247, 251, 0.35);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
}

.mk-media-img{
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

.mk-media-overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  color: #fff;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0));
}

.mk-media-kicker{
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.92;
}

.mk-media-btn{
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}

.mk-media-btn:hover{
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.mk-home-section{
  padding: 2.25rem 0;
}

.mk-section-title-center{
  text-align: center;
  margin: 0 0 0.35rem;
}

@media (min-width: 769px){
  .mk-section-title-center {
    padding-top: 2rem;
  }
}


.mk-section-lead-center{
  text-align: center;
  margin: 0 auto 1.5rem;
  max-width: 72ch;
  color: rgba(15, 23, 42, 0.72);
}

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

@media (max-width: 992px){
  .mk-feature-grid{ grid-template-columns: 1fr; }
}

.mk-feature-card{
  padding: 1.35rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(47, 95, 168, 0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(3px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.mk-feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.10);
  border-color: rgba(47, 95, 168, 0.24);
}

.mk-feature-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 0.8rem;
  background: rgba(47, 95, 168, 0.10);
  border: 1px solid rgba(47, 95, 168, 0.18);
  font-size: 1.1rem;
}

.mk-feature-card h3{
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
}

.mk-feature-card p{
  margin: 0;
  color: rgba(15, 23, 42, 0.72);
}

.mk-steps-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 992px){
  .mk-steps-grid{ grid-template-columns: 1fr; }
}

.mk-step-list{
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.9rem;
}

.mk-step{
  display: flex;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(47, 95, 168, 0.12);
  background: rgba(255,255,255,0.05);
}

.mk-step::before{
  counter-increment: step;
  content: counter(step);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(47, 95, 168, 0.12);
  border: 1px solid rgba(47, 95, 168, 0.20);
}

.mk-home-cta{
  padding: 2.75rem 0 2.25rem;
}

.mk-cta-inner{
  border-radius: 22px;
  padding: 2.4rem 1.8rem;
  text-align: center;
  color: #fff;

  /* green CTA using existing static image */
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(47, 95, 168, 0.58)),
    url("../img/bg-green.9550190bb0dd.webp") center / cover no-repeat;

  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}


.mk-cta-inner p{
  margin: 0.55rem auto 1.25rem;
  max-width: 70ch;
  opacity: 0.92;
}

.mk-cta-inner .btn{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.85);
  color: rgba(15, 23, 42, 0.88);
}

.mk-cta-inner .btn:hover{
  background: #ffffff;
}

.mk-feature-thumb{
  width: 72px;
  height: 38px;
  border-radius: 4px;
  display: block;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(47, 95, 168, 0.18);
  background: rgba(245, 247, 251, 0.35);
}

.mk-home-section .col-lg-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* ===== Home: "How it works" split layout (no Bootstrap dependency) ===== */

.mk-how-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;

  /* Desktop: media left, copy right */
  grid-template-areas: "media copy";
}

.mk-how-copy{ grid-area: copy; }
.mk-how-media{ grid-area: media; }

@media (max-width: 992px){
  .mk-how-grid{
    grid-template-columns: 1fr;

    /* Mobile: copy first, media second */
    grid-template-areas:
      "copy"
      "media";
  }
}

.mk-how-media-img{
  width: 90%;
  display: block;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast; /* slightly crisper in Chrome */


}
.mk-how-media-caption{
  margin: 0;
  padding: 0.75rem 0.95rem;
  font-size: 0.95rem;
  color: rgba(15, 23, 42, 0.68);
  border-top: 1px solid rgba(47, 95, 168, 0.10);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(2px);
}

/* Home hero video footer (CTA separate from video) */
.mk-media-footer{
  display: flex;
  justify-content: flex-end;
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(47, 168, 144, 0.1);
  background: rgba(61, 122, 120, 0.28);
  backdrop-filter: blur(4px);
}

.mk-media-cta{
  border-radius: 999px;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}

.mk-media-video{
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ===== Logout button ===== */
.mk-link-button{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}