/* =============================================================================
   VM6 Server Cart - v2
   Pinned to VM6 brand palette: --primary-dark #111827, --primary-accent #6366f1
   ALL surfaces use the exact same shades the main site uses. No off-by-a-pixel
   gradients or alternative dark colours that create visible banding.
   ============================================================================= */

:root {
    --vm6-bg:           #111827;
    --vm6-surface:      #1e293b;
    --vm6-border:       #334155;
    --vm6-border-hi:    #475569;
    --vm6-text:         #f8fafc;
    --vm6-text-dim:     #94a3b8;
    --vm6-text-mute:    #64748b;
    --vm6-accent:       #6366f1;
    --vm6-accent-hi:    #7c83ff;
    --vm6-accent-glow:  rgba(99, 102, 241, 0.35);
    --vm6-success:      #10b981;
    --vm6-danger:       #ef4444;
}

#order-vm6-cart.vm6-cart {
    background: var(--vm6-bg);
    color: var(--vm6-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-variant-numeric: tabular-nums;
    padding: 24px 0 80px;
}

.vm6-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.vm6-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .vm6-grid { grid-template-columns: 1fr; }
}


/* ---------- MAIN CONTENT ---------- */
.vm6-main { min-width: 0; }

.vm6-header { margin-bottom: 32px; }

.vm6-eyebrow {
    color: var(--vm6-accent-hi);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    margin: 0 0 8px;
}

.vm6-title {
    font-size: 34px; font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    color: var(--vm6-text);
    line-height: 1.1;
}

.vm6-desc { color: var(--vm6-text-dim); font-size: 15px; line-height: 1.6; }
.vm6-desc :is(p, ul, li) { margin: 0 0 8px; color: var(--vm6-text-dim); }


/* ---------- Sections ---------- */
.vm6-section { margin-bottom: 32px; }

.vm6-section-title {
    display: flex; align-items: center; gap: 14px;
    font-size: 20px; font-weight: 600;
    margin: 0 0 18px;
    color: var(--vm6-text);
    letter-spacing: -0.01em;
}

.vm6-section-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--vm6-surface);
    color: var(--vm6-accent-hi);
    font-size: 13px; font-weight: 600;
    border: 1px solid var(--vm6-border);
}


/* ---------- Selectable cards ---------- */
.vm6-cards { display: grid; gap: 12px; }
.vm6-cards-cycle   { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.vm6-cards-options { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.vm6-card {
    position: relative; display: block;
    background: var(--vm6-surface);
    border: 1px solid var(--vm6-border);
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    user-select: none;
}
.vm6-card:hover {
    border-color: var(--vm6-border-hi);
    transform: translateY(-1px);
}
.vm6-card.is-selected {
    border-color: var(--vm6-accent);
    box-shadow: 0 0 0 1px var(--vm6-accent), 0 6px 16px -8px var(--vm6-accent-glow);
}
.vm6-card input[type="radio"],
.vm6-card input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
}

.vm6-card-cycle {
    display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.vm6-card-cycle-label { font-size: 13px; color: var(--vm6-text-dim); font-weight: 500; }
.vm6-card-cycle-price { font-size: 18px; font-weight: 600; color: var(--vm6-text); }
.vm6-card-cycle.is-selected .vm6-card-cycle-label { color: var(--vm6-accent-hi); }

.vm6-option-group { margin-bottom: 22px; }
.vm6-option-label {
    display: block;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--vm6-text-mute);
    margin-bottom: 10px;
}

.vm6-card-option {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; min-height: 54px;
}
.vm6-card-option-name {
    font-weight: 500; font-size: 14px; line-height: 1.3;
    color: var(--vm6-text); flex: 1;
}
.vm6-card-option-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--vm6-border-hi);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 150ms ease;
    color: transparent; background: transparent;
}
.vm6-card-option-check svg { width: 12px; height: 12px; }
.vm6-card-option.is-selected .vm6-card-option-check {
    background: var(--vm6-accent);
    border-color: var(--vm6-accent);
    color: white;
}

.vm6-hidden-select { display: none; }


/* ---------- Toggles / Quantity ---------- */
.vm6-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px 0; }
.vm6-toggle input { display: none; }
.vm6-toggle-slider {
    width: 44px; height: 24px; border-radius: 12px;
    background: var(--vm6-surface);
    border: 1px solid var(--vm6-border);
    position: relative; transition: all 150ms ease;
}
.vm6-toggle-slider::after {
    content: ''; position: absolute;
    width: 18px; height: 18px;
    background: var(--vm6-text-dim);
    border-radius: 50%; top: 2px; left: 2px;
    transition: all 150ms ease;
}
.vm6-toggle input:checked + .vm6-toggle-slider {
    background: var(--vm6-accent);
    border-color: var(--vm6-accent);
}
.vm6-toggle input:checked + .vm6-toggle-slider::after {
    background: white; transform: translateX(20px);
}
.vm6-toggle-text { color: var(--vm6-text); font-size: 14px; }

.vm6-qty { display: inline-flex; align-items: center; gap: 12px; }
.form-control-qty {
    background: var(--vm6-bg);
    border: 1px solid var(--vm6-border);
    color: var(--vm6-text);
    border-radius: 8px;
    padding: 8px 12px; width: 100px;
}
.vm6-qty-unit { color: var(--vm6-text-dim); font-size: 14px; }


/* ---------- Addons ---------- */
.vm6-addons { display: grid; gap: 10px; }
.vm6-addon {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px;
    background: var(--vm6-surface);
    border: 1px solid var(--vm6-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
}
.vm6-addon:hover {
    border-color: var(--vm6-border-hi);
    transform: translateY(-1px);
}
.vm6-addon.is-selected {
    border-color: var(--vm6-accent);
    box-shadow: 0 0 0 1px var(--vm6-accent);
}
.vm6-addon input { margin-top: 2px; accent-color: var(--vm6-accent); }
.vm6-addon-body { flex: 1; }
.vm6-addon-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vm6-addon-name { font-weight: 600; color: var(--vm6-text); font-size: 15px; }
.vm6-addon-price { color: var(--vm6-accent-hi); font-weight: 600; font-size: 14px; white-space: nowrap; }
.vm6-addon-desc { margin: 6px 0 0; font-size: 13px; color: var(--vm6-text-dim); line-height: 1.4; }


/* ---------- Custom fields ---------- */
.vm6-fields .form-group { margin-bottom: 16px; }
.vm6-fields label {
    color: var(--vm6-text-dim);
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    display: block; margin-bottom: 6px;
}
.vm6-fields input[type="text"],
.vm6-fields input[type="email"],
.vm6-fields input[type="number"],
.vm6-fields select,
.vm6-fields textarea {
    background: var(--vm6-bg);
    border: 1px solid var(--vm6-border);
    color: var(--vm6-text);
    border-radius: 8px;
    padding: 10px 14px; width: 100%; font-size: 14px;
}
.vm6-fields input:focus,
.vm6-fields select:focus,
.vm6-fields textarea:focus {
    outline: none;
    border-color: var(--vm6-accent);
    box-shadow: 0 0 0 3px var(--vm6-accent-glow);
}
.field-help-text { color: var(--vm6-text-mute); font-size: 12px; margin-top: 4px; display: inline-block; }


/* ---------- Help text ---------- */
.vm6-help {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-radius: 12px;
    background: var(--vm6-surface);
    border: 1px solid var(--vm6-border);
    color: var(--vm6-text-dim);
    font-size: 14px; margin-top: 12px;
}
.vm6-help svg { width: 18px; height: 18px; color: var(--vm6-accent-hi); flex-shrink: 0; }
.vm6-help a { color: var(--vm6-accent-hi); text-decoration: none; font-weight: 600; }
.vm6-help a:hover { text-decoration: underline; }


/* ---------- RIGHT SIDEBAR: Order Summary ---------- */
.vm6-sidebar { position: sticky; top: 130px; }

.vm6-summary-card {
    background: var(--vm6-surface);
    border: 1px solid var(--vm6-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.4);
    font-size: 13px;
}
.vm6-summary-title {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--vm6-text-mute);
    margin: 0 0 12px;
}

/* Compact line items. WHMCS injects each addon as its own <p> or <div>;
   we tighten line-height + spacing so the column doesn't feel sparse. */
.vm6-summary-body {
    color: var(--vm6-text);
    font-size: 13px;
    line-height: 1.4;
}
.vm6-summary-body :is(p, div) {
    color: var(--vm6-text-dim);
    margin-bottom: 2px;
    line-height: 1.4;
}
.vm6-summary-body strong, .vm6-summary-body b {
    color: var(--vm6-text);
    font-weight: 600;
}
.vm6-summary-body .price,
.vm6-summary-body .product-amount,
.vm6-summary-body .summary-total {
    color: var(--vm6-text) !important; font-weight: 600;
}

/* The "Setup Fees / Monthly / Total Due Today" block - smaller, tidier */
.vm6-summary-body .summary-totals,
.vm6-summary-body .total {
    border-top: 1px solid var(--vm6-border);
    margin-top: 10px;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vm6-text);
}

.vm6-summary-loader { text-align: center; color: var(--vm6-accent-hi); }
.vm6-spin { width: 20px; height: 20px; animation: vm6-spin 1s linear infinite; }
@keyframes vm6-spin { to { transform: rotate(360deg); } }

.vm6-btn-continue {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    background: var(--vm6-accent);
    color: white;
    border: 0; border-radius: 10px;
    padding: 11px 16px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    margin: 14px 0 10px;
    box-shadow: 0 6px 20px -6px var(--vm6-accent-glow);
    transition: all 150ms ease;
    letter-spacing: -0.01em;
}
.vm6-btn-continue:hover {
    background: var(--vm6-accent-hi);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -6px var(--vm6-accent-glow);
}
.vm6-btn-continue svg { width: 16px; height: 16px; }

.vm6-summary-foot {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--vm6-text-mute);
    font-size: 11px; margin: 0;
}
.vm6-summary-foot svg { width: 12px; height: 12px; }


/* ---------- Validation error block ---------- */
.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--vm6-danger);
    color: var(--vm6-text);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.alert-danger ul { margin: 8px 0 0; padding-left: 20px; color: var(--vm6-danger); }


/* ---------- Hide legacy server fields ---------- */
input[name="hostname"],
input[name="rootpw"],
input[name="ns1prefix"],
input[name="ns2prefix"],
label[for="inputHostname"],
label[for="inputRootpw"],
label[for="inputNs1prefix"],
label[for="inputNs2prefix"] { display: none !important; }


/* =============================================================================
   BROWSE PAGE - product list (renders via products.tpl)
   2-column: left sidebar (Categories + Actions) + main grid of cards
   Loaded for /store/{group-slug}/ when this order form template is assigned
   ============================================================================= */

.vm6-cart.vm6-browse {
    padding: 24px 0 80px;
}

.vm6-browse-layout {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    /* on laptops: narrower sidebar so cards have room to breathe */
    .vm6-browse-layout {
        grid-template-columns: 210px 1fr;
        gap: 16px;
    }
}

@media (max-width: 850px) {
    .vm6-browse-layout {
        grid-template-columns: 1fr;
    }
    .vm6-browse-sidebar {
        display: none;
    }
}

.vm6-browse-main {
    min-width: 0;
}

.vm6-browse-header {
    margin-bottom: 24px;
}

.vm6-mobile-categories {
    display: none;
}
@media (max-width: 850px) {
    .vm6-mobile-categories {
        display: block;
        margin-bottom: 16px;
    }
}


/* ---- SIDEBAR styling - works with whatever sidebar-categories.tpl outputs ----
   Merge Categories + Actions cards into one continuous visual panel
   by removing the gap between them and joining borders. */
/* SIDEBAR CARD MERGE - target ALL direct children (not just .card or .panel)
   so this works regardless of which wrapper WHMCS uses */
.vm6-browse-sidebar > * {
    background: var(--vm6-surface) !important;
    border: 1px solid var(--vm6-border) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    box-shadow: none !important;
}
.vm6-browse-sidebar > *:first-child {
    border-radius: 12px 12px 0 0 !important;
}
.vm6-browse-sidebar > *:last-child {
    border-radius: 0 0 12px 12px !important;
}
.vm6-browse-sidebar > *:only-child {
    border-radius: 12px !important;
}
/* Kill double border between stacked cards */
.vm6-browse-sidebar > * + * {
    border-top: 0 !important;
}

/* Old class-based rules kept for the inner card-header / panel-heading styling */
.vm6-browse-sidebar .panel,
.vm6-browse-sidebar .card,
.vm6-browse-sidebar .card-sidebar,
.vm6-browse-sidebar .panel-sidebar,
.vm6-browse-sidebar .mb-3 {
    background: var(--vm6-surface) !important;
    border: 1px solid var(--vm6-border) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    box-shadow: none !important;
}
.vm6-browse-sidebar .panel:first-child,
.vm6-browse-sidebar .card:first-child {
    border-radius: 12px 12px 0 0 !important;
}
.vm6-browse-sidebar .panel:last-child,
.vm6-browse-sidebar .card:last-child {
    border-radius: 0 0 12px 12px !important;
}
.vm6-browse-sidebar .panel:only-child,
.vm6-browse-sidebar .card:only-child {
    border-radius: 12px !important;
}
/* No double border between stacked cards */
.vm6-browse-sidebar .panel + .panel,
.vm6-browse-sidebar .card + .card,
.vm6-browse-sidebar .panel-sidebar + .panel-sidebar,
.vm6-browse-sidebar .card-sidebar + .card-sidebar {
    border-top: 0 !important;
}

.vm6-browse-sidebar .panel-heading,
.vm6-browse-sidebar .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--vm6-border) !important;
    color: var(--vm6-text) !important;
    padding: 10px 14px !important;
    border-radius: 0 !important;
}
.vm6-browse-sidebar .panel-title,
.vm6-browse-sidebar .card-header h3,
.vm6-browse-sidebar .card-header .panel-title {
    color: var(--vm6-text) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    padding: 0;
}
.vm6-browse-sidebar .panel-title i,
.vm6-browse-sidebar .card-header h3 i {
    color: var(--vm6-accent) !important;
    margin-right: 6px;
}

.vm6-browse-sidebar .panel-body,
.vm6-browse-sidebar .card-body,
.vm6-browse-sidebar .collapsable-card-body,
.vm6-browse-sidebar .panel-collapse {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

.vm6-browse-sidebar .list-group {
    background: transparent;
    margin: 0;
    padding: 4px 0;
    border: 0;
}
.vm6-browse-sidebar .list-group-item {
    background: transparent !important;
    border: 0 !important;
    color: var(--vm6-text-dim) !important;
    padding: 8px 14px !important;
    border-left: 3px solid transparent !important;
    font-size: 13px;
    text-decoration: none;
    transition: all 150ms ease;
    line-height: 1.35;
}
.vm6-browse-sidebar .list-group-item:hover {
    background: rgba(99, 102, 241, 0.08) !important;
    color: var(--vm6-text) !important;
    border-left-color: transparent !important;
}
.vm6-browse-sidebar .list-group-item.active,
.vm6-browse-sidebar .list-group-item.active:focus,
.vm6-browse-sidebar .list-group-item.active:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    color: var(--vm6-accent-hi) !important;
    border-left-color: var(--vm6-accent) !important;
    font-weight: 500;
}
.vm6-browse-sidebar .list-group-item i {
    color: var(--vm6-text-mute);
    width: 16px;
    text-align: center;
    margin-right: 4px;
}
.vm6-browse-sidebar .list-group-item:hover i,
.vm6-browse-sidebar .list-group-item.active i {
    color: var(--vm6-accent);
}

.vm6-browse-sidebar .card-minimise,
.vm6-browse-sidebar .panel-minimise {
    color: var(--vm6-text-mute);
}


/* THE PRODUCT CARD GRID
   Breakpoints tuned for laptop screens - 3-up should trigger by 1000px viewport
   minmax(0, 1fr) prevents long unbreakable content (eg long Location lists)
   from expanding a column and collapsing the grid to 1-up */
.vm6-products-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
@media (min-width: 600px) {
    .vm6-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
    .vm6-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* PRODUCT CARD */
.vm6-product-card {
    background: var(--vm6-surface);
    border: 1px solid var(--vm6-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;     /* allow shrinking inside grid track */
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.vm6-product-card:hover {
    border-color: var(--vm6-accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -10px var(--vm6-accent-glow);
}

/* Card header */
.vm6-product-head {
    padding: 14px 18px;
    background: rgba(99, 102, 241, 0.08);
    border-bottom: 1px solid var(--vm6-border);
}
.vm6-product-name {
    color: var(--vm6-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}

/* Card body */
.vm6-product-body {
    padding: 14px 18px;
    flex: 1;
    color: var(--vm6-text-dim);
    font-size: 13px;
    line-height: 1.5;
}
.vm6-product-desc {
    color: var(--vm6-text-dim);
}
.vm6-product-desc p {
    margin: 0 0 6px;
    color: var(--vm6-text-dim);
    font-size: 13px;
    line-height: 1.5;
}
.vm6-product-desc p:last-child {
    margin-bottom: 0;
}
.vm6-product-desc strong,
.vm6-product-desc b {
    color: var(--vm6-accent);
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline;
    margin-right: 4px;
}
.vm6-product-desc em,
.vm6-product-desc i {
    color: var(--vm6-text);
    font-style: normal;
    opacity: 0.55;
    font-size: 11px;
}
/* Hide the WHMCS HTML-leak that has shown up before */
.vm6-product-desc .ovh-server-spec,
.vm6-product-body .ovh-server-spec {
    display: none;
}

.vm6-product-feats {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    font-size: 13px;
}
.vm6-product-feats li {
    padding: 0;
    margin: 0;
    border: 0;
    color: var(--vm6-text-dim);
}
.vm6-product-feats li .vm6-feat-val {
    color: var(--vm6-text-dim);
    display: block;
}
.vm6-product-feats li .vm6-feat-val p {
    margin: 0 0 6px;
    color: var(--vm6-text-dim);
    font-size: 13px;
    line-height: 1.5;
}
.vm6-product-feats li .vm6-feat-val p:last-child {
    margin-bottom: 0;
}
.vm6-product-feats li .vm6-feat-val strong,
.vm6-product-feats li .vm6-feat-val b {
    color: var(--vm6-accent);
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}
.vm6-product-feats li .vm6-feat-val em,
.vm6-product-feats li .vm6-feat-val i {
    color: var(--vm6-text);
    font-style: normal;
    opacity: 0.55;
    font-size: 11px;
}
/* Hide the WHMCS HTML-leak <div class="ovh-server-spec"> at the end of each value */
.vm6-product-feats li .vm6-feat-val .ovh-server-spec {
    display: none;
}
.vm6-feat-key {
    display: none;  /* keys are empty in OVH-style products - hide them */
}

/* Card footer */
.vm6-product-foot {
    padding: 12px 18px;
    background: var(--vm6-bg);
    border-top: 1px solid var(--vm6-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.vm6-product-price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}
.vm6-price-label {
    color: var(--vm6-text-mute);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}
.vm6-price-amount {
    color: var(--vm6-accent);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.vm6-price-setup {
    color: var(--vm6-text-mute);
    font-size: 10.5px;
    margin-top: 2px;
}

.vm6-product-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--vm6-accent);
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 150ms ease;
    box-shadow: 0 4px 12px -4px var(--vm6-accent-glow);
    white-space: nowrap;
}
.vm6-product-btn:hover {
    background: var(--vm6-accent-hi);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px var(--vm6-accent-glow);
    color: white;
    text-decoration: none;
}
.vm6-product-btn svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 600px) {
    .vm6-products-grid {
        grid-template-columns: 1fr;
    }
    .vm6-product-foot {
        flex-direction: column;
        align-items: stretch;
    }
    .vm6-product-btn {
        justify-content: center;
    }
}