/* ======================================================================= */
/* SBG.Majer - grouped product variation selector                          */
/* Tokens fall back to hardcoded values so the component also looks right   */
/* outside the Element theme (preset.less exposes --el-accent).             */
/* ======================================================================= */

/* ----------------------------------------------------------------------- */
/* "V kosarico" button. Kept at the very top of the file and flagged        */
/* !important on purpose: this is the one control that must never lose to   */
/* a theme rule, and it must look identical to the simple-product button.   */
/* ----------------------------------------------------------------------- */

.majer-variation-selector button.mvs-buy__submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    height: 56px !important;
    margin: 0;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background-color: #007c5a !important;
    background-color: var(--mvs-accent, #007c5a) !important;
    background-image: none !important;
    box-shadow: none;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.majer-variation-selector button.mvs-buy__submit span {
    margin: 0 !important;
    color: #fff !important;
    vertical-align: baseline;
}

.majer-variation-selector button.mvs-buy__submit svg {
    width: 22px !important;
    height: 22px !important;
    color: #fff;
}

.majer-variation-selector button.mvs-buy__submit:before,
.majer-variation-selector button.mvs-buy__submit:after {
    content: none !important;
    display: none !important;
}

.majer-variation-selector button.mvs-buy__submit:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    opacity: 1 !important;
}

.majer-variation-selector button.mvs-buy__submit:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.majer-variation-selector {
    --mvs-accent: var(--pd-accent, #007c5a);
    --mvs-accent-soft: var(--pd-accent-soft, #eef8f1);
    --mvs-ink: var(--pd-ink, #111827);
    --mvs-ink-2: var(--pd-ink-2, #4b5563);
    --mvs-ink-3: var(--pd-ink-3, #6b7684);
    --mvs-line: var(--pd-line, #e3e7ec);
    --mvs-line-strong: var(--pd-line-strong, #cfd7e2);
    --mvs-surface: var(--pd-surface, #fff);
    --mvs-surface-2: var(--pd-surface-2, #f8fafc);
    --mvs-radius: var(--pd-radius, 12px);
    --mvs-radius-sm: var(--pd-radius-sm, 8px);
    --mvs-shadow: var(--pd-shadow, 0 6px 20px rgba(22, 32, 51, 0.07));
    --mvs-shadow-lift: var(--pd-shadow-lift, 0 14px 34px rgba(22, 32, 51, 0.12));
    --mvs-danger: var(--pd-danger, #d0342c);
    --mvs-card-width: 210px;

    margin: 0;
    color: var(--mvs-ink-2);
    font-size: 14px;
    line-height: 1.5;
}

.majer-variation-selector *,
.majer-variation-selector *::before,
.majer-variation-selector *::after {
    box-sizing: border-box;
}

.majer-variation-selector .majer-is-hidden,
.majer-variation-selector [hidden] {
    display: none !important;
}

.majer-variation-selector .mvs__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.majer-variation-selector .mvs__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* --- step shell -------------------------------------------------------- */

.majer-variation-selector .mvs__step {
    margin: 0 0 18px;
    border: 1px solid var(--mvs-line);
    border-radius: var(--mvs-radius);
    background-color: var(--mvs-surface);
    box-shadow: var(--mvs-shadow);
    overflow: hidden;
}

.majer-variation-selector .mvs__step:last-of-type {
    margin-bottom: 0;
}

.majer-variation-selector .mvs__step-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mvs-line);
    background-color: var(--mvs-surface-2);
}

.majer-variation-selector .mvs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--mvs-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.majer-variation-selector .mvs__title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--mvs-ink);
}

.majer-variation-selector .mvs__count {
    font-size: 13px;
    color: var(--mvs-ink-3);
}

.majer-variation-selector .mvs__selected-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--mvs-ink);
}

.majer-variation-selector .mvs__tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

/* --- search ------------------------------------------------------------ */

.majer-variation-selector .mvs__search {
    position: relative;
    display: flex;
    align-items: center;
    width: 280px;
    max-width: 100%;
}

.majer-variation-selector .mvs__search .mvs__icon {
    position: absolute;
    left: 12px;
    color: var(--mvs-ink-3);
    pointer-events: none;
}

.majer-variation-selector .mvs__search input {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--mvs-line-strong);
    border-radius: var(--mvs-radius-sm);
    background-color: var(--mvs-surface);
    color: var(--mvs-ink);
    font-size: 14px;
}

.majer-variation-selector .mvs__search input::-webkit-search-cancel-button {
    cursor: pointer;
}

.majer-variation-selector .mvs__search input:focus {
    outline: 0;
    border-color: var(--mvs-accent);
    box-shadow: 0 0 0 3px var(--mvs-accent-soft);
}

/* --- grid / list toggle ------------------------------------------------ */

.majer-variation-selector .mvs__view-toggle {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--mvs-line-strong);
    border-radius: var(--mvs-radius-sm);
    background-color: var(--mvs-surface);
}

.majer-variation-selector .mvs__view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mvs-ink-3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.majer-variation-selector .mvs__view:hover {
    color: var(--mvs-ink);
}

.majer-variation-selector .mvs__view.is-active {
    background-color: var(--mvs-accent);
    color: #fff;
}

/* --- step body / two column split ------------------------------------- */

.majer-variation-selector .mvs__step-body {
    padding: 18px 20px 20px;
}

/* --- filters ---------------------------------------------------------- */

.majer-variation-selector .mvs__filters {
    border: 1px solid var(--mvs-line);
    border-radius: var(--mvs-radius-sm);
    background-color: var(--mvs-surface);
    padding: 16px;
}

.majer-variation-selector .mvs__filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.majer-variation-selector .mvs__filters-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--mvs-ink);
}

.majer-variation-selector .mvs__filters-reset {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--mvs-accent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.majer-variation-selector .mvs__filters-reset:hover {
    text-decoration: underline;
}

.majer-variation-selector .mvs-filter {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.majer-variation-selector .mvs-filter:last-child {
    margin-bottom: 0;
}

.majer-variation-selector .mvs-filter legend {
    margin-bottom: 9px;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--mvs-ink);
}

.majer-variation-selector .mvs-filter__values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.majer-variation-selector .mvs-filter__value {
    min-height: 30px;
    padding: 4px 11px;
    border: 1px solid var(--mvs-line-strong);
    border-radius: 999px;
    background-color: var(--mvs-surface);
    color: var(--mvs-ink-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.majer-variation-selector .mvs-filter__value:hover {
    border-color: var(--mvs-accent);
    color: var(--mvs-accent);
}

.majer-variation-selector .mvs-filter__value.is-active {
    border-color: var(--mvs-accent);
    background-color: var(--mvs-accent);
    color: #fff;
}

.majer-variation-selector .mvs-filter__value.is-empty {
    opacity: 0.4;
    cursor: default;
}

.majer-variation-selector .mvs-filter__value.is-empty:hover {
    border-color: var(--mvs-line-strong);
    color: var(--mvs-ink-2);
}

/* --- dual range slider ------------------------------------------------ */

.majer-variation-selector .mvs-filter__range {
    margin: 0 0 12px;
    padding: 0 2px;
}

.majer-variation-selector .mvs-filter__range-track {
    position: relative;
    height: 22px;
}

.majer-variation-selector .mvs-filter__range-track::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    background-color: var(--mvs-line);
}

.majer-variation-selector .mvs-filter__range-fill {
    position: absolute;
    top: 9px;
    height: 4px;
    border-radius: 999px;
    background-color: var(--mvs-accent);
}

.majer-variation-selector .mvs-filter__range-track input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.majer-variation-selector .mvs-filter__range-track input[type="range"]:focus {
    outline: 0;
}

.majer-variation-selector .mvs-filter__range-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--mvs-accent);
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25);
    cursor: pointer;
    pointer-events: auto;
}

.majer-variation-selector .mvs-filter__range-track input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--mvs-accent);
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25);
    cursor: pointer;
    pointer-events: auto;
}

.majer-variation-selector .mvs-filter__range-track input[type="range"]::-moz-range-track {
    background: transparent;
}

.majer-variation-selector .mvs-filter__range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mvs-ink-3);
}

/* --- results / card track --------------------------------------------- */

.majer-variation-selector .mvs__results {
    min-width: 0;
}

.majer-variation-selector .mvs__viewport {
    position: relative;
}

.majer-variation-selector .mvs__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--mvs-card-width);
    gap: 12px;
    padding: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    /* deliberately no scroll-snap: mandatory snapping forces the track to rest on
       a card boundary, which cancels the small corrective scroll that reveals a
       partially clipped card in the middle of the row */
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.majer-variation-selector .mvs__track::-webkit-scrollbar {
    height: 6px;
}

.majer-variation-selector .mvs__track::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: var(--mvs-line-strong);
}

.majer-variation-selector.is-view-list .mvs__track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 10px;
    overflow: visible;
}

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

.majer-variation-selector .mvs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--mvs-line);
    border-radius: var(--mvs-radius-sm);
    background-color: var(--mvs-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.majer-variation-selector .mvs-card:hover {
    border-color: var(--mvs-accent);
    box-shadow: var(--mvs-shadow);
    transform: translateY(-2px);
}

/* no outline ring here: clicking a card also selects it, and .is-selected already
   draws an accent border plus a 1px ring - an outline on top of that reads as a
   double border. Tinting the border instead still marks keyboard focus on an
   unselected card, and is a no-op once the card is selected. */
.majer-variation-selector .mvs-card:focus {
    outline: 0;
    border-color: var(--mvs-accent);
}

.majer-variation-selector .mvs-card.is-selected {
    border-color: var(--mvs-accent);
    box-shadow: 0 0 0 1px var(--mvs-accent), var(--mvs-shadow);
}

.majer-variation-selector .mvs-card__check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--mvs-accent);
    color: #fff;
}

.majer-variation-selector .mvs-card__check svg {
    width: 14px;
    height: 14px;
}

.majer-variation-selector .mvs-card.is-selected .mvs-card__check {
    display: flex;
}

.majer-variation-selector .mvs-card__picture {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    border-radius: 6px;
    background-color: var(--mvs-surface-2);
    overflow: hidden;
}

.majer-variation-selector .mvs-card__picture img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.majer-variation-selector .mvs-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.majer-variation-selector .mvs-card__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mvs-ink);
}

.majer-variation-selector .mvs-card__desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    color: var(--mvs-ink-3);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.majer-variation-selector .mvs-card__price {
    margin-top: 3px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--mvs-accent);
}

.majer-variation-selector .mvs-card__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mvs-accent);
}

.majer-variation-selector .mvs-card__stock.out-of-stock {
    color: var(--mvs-danger);
}

.majer-variation-selector .mvs-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: currentColor;
}

.majer-variation-selector .mvs-card__sku {
    font-size: 11px;
    color: var(--mvs-ink-3);
}

/* list view card layout */

.majer-variation-selector.is-view-list .mvs-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    transform: none;
}

.majer-variation-selector.is-view-list .mvs-card__picture {
    height: 56px;
}

.majer-variation-selector.is-view-list .mvs-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 16px;
}

.majer-variation-selector.is-view-list .mvs-card__name {
    grid-column: 1;
}

.majer-variation-selector.is-view-list .mvs-card__desc {
    grid-column: 1;
    -webkit-line-clamp: 1;
}

.majer-variation-selector.is-view-list .mvs-card__sku {
    grid-column: 1;
}

.majer-variation-selector.is-view-list .mvs-card__price {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-align: right;
}

.majer-variation-selector.is-view-list .mvs-card__stock {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}

.majer-variation-selector.is-view-list .mvs-card__check {
    position: static;
    grid-column: 3;
}

/* --- carousel navigation ---------------------------------------------- */

.majer-variation-selector .mvs__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border: 1px solid var(--mvs-line-strong);
    border-radius: 50%;
    background-color: var(--mvs-surface);
    box-shadow: var(--mvs-shadow);
    color: var(--mvs-ink-2);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.majer-variation-selector .mvs__nav svg {
    width: 20px;
    height: 20px;
}

.majer-variation-selector .mvs__nav:hover {
    border-color: var(--mvs-accent);
    color: var(--mvs-accent);
}

.majer-variation-selector .mvs__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.majer-variation-selector .mvs__nav--prev {
    left: -14px;
}

.majer-variation-selector .mvs__nav--next {
    right: -14px;
}

.majer-variation-selector.is-view-list .mvs__nav {
    display: none !important;
}

/* --- empty state / more button ---------------------------------------- */

.majer-variation-selector .mvs__empty {
    margin-top: 12px;
    padding: 16px;
    border: 1px dashed var(--mvs-line-strong);
    border-radius: var(--mvs-radius-sm);
    color: var(--mvs-ink-3);
    text-align: center;
}

.majer-variation-selector .mvs__more {
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    border: 1px solid var(--mvs-line-strong);
    border-radius: var(--mvs-radius-sm);
    background-color: var(--mvs-surface);
    color: var(--mvs-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.majer-variation-selector .mvs__more:hover {
    border-color: var(--mvs-accent);
    color: var(--mvs-accent);
}

/* --- step 2: selected variation --------------------------------------- */

.majer-variation-selector .mvs__step--selected {
    border-color: var(--mvs-accent);
}

.majer-variation-selector .mvs__step--selected .mvs__step-head {
    background-color: var(--mvs-accent-soft);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.majer-variation-selector .mvs__step-body--selected {
    display: grid;
    gap: 20px;
}

.majer-variation-selector .mvs-selected__picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 220px;
    height: 220px;
    padding: 8px;
    border: 1px solid var(--mvs-line);
    border-radius: var(--mvs-radius-sm);
    background-color: var(--mvs-surface-2);
    color: var(--mvs-ink-3);
    font-size: 12px;
    cursor: zoom-in;
    overflow: hidden;
}

.majer-variation-selector .mvs-selected__picture img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.majer-variation-selector .mvs-selected__details {
    min-width: 0;
}

.majer-variation-selector .mvs-selected__desc {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mvs-ink-2);
}

.majer-variation-selector .mvs-selected__desc:empty {
    display: none;
}

.majer-variation-selector .mvs-facts {
    display: grid;
    gap: 8px 28px;
    margin: 0;
}

.majer-variation-selector .mvs-facts > div {
    display: grid;
    grid-template-columns: minmax(90px, 40%) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.majer-variation-selector .mvs-facts dt,
.majer-variation-selector .mvs-facts dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.majer-variation-selector .mvs-facts dt {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mvs-ink-3);
}

.majer-variation-selector .mvs-facts dd {
    color: var(--mvs-ink);
    font-weight: 700;
}

/* --- buy box ---------------------------------------------------------- */

.majer-variation-selector .mvs-buy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;
    padding: 16px;
    border: 1px solid var(--mvs-line);
    border-radius: var(--mvs-radius-sm);
    background-color: var(--mvs-surface-2);
}

.majer-variation-selector .mvs-buy__price {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--mvs-accent);
}

.majer-variation-selector .mvs-buy__stock {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background-color: var(--mvs-accent-soft);
    font-size: 13px;
    font-weight: 700;
    color: var(--mvs-accent);
}

.majer-variation-selector .mvs-buy__stock:empty {
    display: none;
}

.majer-variation-selector .mvs-buy__stock.out-of-stock {
    background-color: #fdeceb;
    color: var(--mvs-danger);
}

.majer-variation-selector .mvs-buy__delivery {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--mvs-ink-3);
}

.majer-variation-selector .mvs-buy__cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.majer-variation-selector .mvs-qty {
    display: inline-flex;
    align-items: center;
    height: 48px;
    border: 1px solid var(--mvs-line-strong);
    border-radius: var(--mvs-radius-sm);
    background-color: var(--mvs-surface);
    overflow: hidden;
}

.majer-variation-selector .mvs-qty__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--mvs-ink-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.majer-variation-selector .mvs-qty__step:hover {
    background-color: var(--mvs-surface-2);
    color: var(--mvs-accent);
}

.majer-variation-selector .mvs-qty__input {
    width: 48px;
    height: 100%;
    border: 0;
    border-left: 1px solid var(--mvs-line);
    border-right: 1px solid var(--mvs-line);
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--mvs-ink);
    -moz-appearance: textfield;
    appearance: textfield;
}

.majer-variation-selector .mvs-qty__input::-webkit-outer-spin-button,
.majer-variation-selector .mvs-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* the button also carries the theme's .button-1 / .add-to-cart-button classes, which
   bring their own colours, sprite background and !important font rules - hence the
   high specificity and the !important flags on the visual essentials */
.majer-variation-selector .mvs-buy .mvs-buy__cart button.mvs-buy__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    height: 56px;
    margin: 0;
    padding: 0 28px;
    border: 0 !important;
    border-radius: var(--mvs-radius-sm) !important;
    background-color: var(--mvs-accent, #007c5a) !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.majer-variation-selector .mvs-buy .mvs-buy__cart button.mvs-buy__submit span {
    margin: 0;
    color: #fff !important;
}

.majer-variation-selector .mvs-buy .mvs-buy__cart button.mvs-buy__submit .mvs__icon {
    width: 22px;
    height: 22px;
    color: #fff;
}

.majer-variation-selector .mvs-buy .mvs-buy__cart button.mvs-buy__submit:hover {
    box-shadow: var(--mvs-shadow-lift);
    transform: translateY(-1px);
    filter: brightness(1.06);
}

/* kill the theme's sprite pseudo-icon; the button has its own inline SVG */
.majer-variation-selector .mvs-buy__submit:before,
.majer-variation-selector .mvs-buy__submit:after {
    display: none !important;
}

.majer-variation-selector .mvs-buy__submit:disabled,
.majer-variation-selector .mvs-buy__wishlist:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}

.majer-variation-selector .mvs-buy__wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--mvs-line-strong);
    border-radius: var(--mvs-radius-sm);
    background-color: var(--mvs-surface);
    color: var(--mvs-ink-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.majer-variation-selector .mvs-buy__wishlist:hover {
    border-color: var(--mvs-accent);
    background-color: var(--mvs-accent-soft);
    color: var(--mvs-accent);
}

/* --- lightbox --------------------------------------------------------- */

.majer-variation-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.majer-variation-lightbox[hidden] {
    display: none !important;
}

.majer-variation-lightbox__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 0;
    background: rgba(17, 24, 39, 0.72);
    cursor: zoom-out;
}

.majer-variation-lightbox__dialog {
    position: relative;
    z-index: 1;
    width: 92vw;
    max-width: 920px;
    max-height: 88vh;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}

.majer-variation-lightbox__dialog img {
    display: block;
    max-width: 100%;
    max-height: calc(88vh - 36px);
    object-fit: contain;
}

.majer-variation-lightbox__close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.majer-variation-lightbox-open {
    overflow: hidden;
}

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

@media (min-width: 1000px) {
    .majer-variation-selector.has-filters .mvs__step[data-step="1"] .mvs__step-body {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }

    .majer-variation-selector .mvs__step-body--selected {
        grid-template-columns: 220px minmax(0, 1fr) 300px;
    }

    .majer-variation-selector .mvs-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 999px) {
    .majer-variation-selector .mvs__tools {
        width: 100%;
        margin-left: 0;
    }

    .majer-variation-selector .mvs__search {
        flex: 1 1 220px;
        width: auto;
    }

    .majer-variation-selector .mvs__filters {
        margin-bottom: 18px;
    }

    .majer-variation-selector .mvs__step-body--selected {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .majer-variation-selector .mvs-buy {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .majer-variation-selector {
        --mvs-card-width: 168px;
    }

    .majer-variation-selector .mvs__step-head,
    .majer-variation-selector .mvs__step-body {
        padding: 14px;
    }

    .majer-variation-selector .mvs__step-body--selected {
        grid-template-columns: minmax(0, 1fr);
    }

    .majer-variation-selector .mvs-selected__picture {
        max-width: 160px;
    }

    .majer-variation-selector .mvs__nav--prev {
        left: -6px;
    }

    .majer-variation-selector .mvs__nav--next {
        right: -6px;
    }

    .majer-variation-selector .mvs-facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .majer-variation-selector.is-view-list .mvs-card {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .majer-variation-selector.is-view-list .mvs-card__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .majer-variation-selector.is-view-list .mvs-card__price,
    .majer-variation-selector.is-view-list .mvs-card__stock {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        text-align: left;
    }

    .majer-variation-selector.is-view-list .mvs-card__check {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}