/* ============================================================
   MARKET TO GO — redesign enhancement layer (Phase 1)
   Additive only: loaded AFTER app/custom css, never replaces them.
   Brandbook: leaf #7abc2f, green #4f742e, yellow #ffb800, ink #3f4042.
   Goals: crisp product images (no upscaling 240px), polished cards,
   brand-consistent buttons/inputs, subtle depth, smooth states.
   ============================================================ */

:root {
    --mtg-leaf: #7abc2f;
    --mtg-leaf-dark: #6aa525;
    --mtg-green: #4f742e;
    --mtg-green-dark: #41611f;
    --mtg-yellow: #ffb800;
    --mtg-ink: #3f4042;
    --mtg-muted: #9a9494;
    --mtg-line: #ebebeb;
    --mtg-bg: #f7f8f5;
    --mtg-radius: 14px;
    --mtg-radius-sm: 10px;
    --mtg-shadow-sm: 0 1px 3px rgba(31, 45, 17, 0.06), 0 1px 2px rgba(31, 45, 17, 0.04);
    --mtg-shadow-md: 0 10px 24px rgba(31, 45, 17, 0.10), 0 3px 8px rgba(31, 45, 17, 0.06);
    --mtg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Product card ---------- */
.catalog__item {
    background: #fff;
    border: 1px solid var(--mtg-line);
    border-radius: var(--mtg-radius);
    overflow: hidden;
    transition: box-shadow 0.25s var(--mtg-ease), border-color 0.25s var(--mtg-ease);
    will-change: transform;
}
.catalog__item:hover {
    box-shadow: var(--mtg-shadow-md);
    border-color: #e0e8d6;
}

/* Image: contain on clean white, NEVER upscale past the 240px source.
   Fixed square-ish stage keeps the grid tidy; image centred & crisp. */
.catalog__item-img {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 210px;
    padding: 14px;
    background: #fff;
    overflow: hidden;
}
.catalog__item-img img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.3s var(--mtg-ease);
    image-rendering: -webkit-optimize-contrast;
}
.catalog__item:hover .catalog__item-img img {
    transform: scale(1.04);
}

/* Title: clamp to 2 lines so cards align */
.catalog__item-title {
    color: var(--mtg-ink);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s var(--mtg-ease);
}
.catalog__item-title:hover {
    color: var(--mtg-green);
}

/* Price emphasis */
.catalog__item-price-now {
    color: var(--mtg-green);
    font-weight: 700;
}
.catalog__item-price-old {
    color: var(--mtg-muted);
    text-decoration: line-through;
}

/* Buy button — brand leaf, clear pressed/hover */
.catalog__item-buy {
    background: var(--mtg-leaf);
    color: #fff;
    border-radius: var(--mtg-radius-sm);
    transition: background 0.2s var(--mtg-ease), transform 0.12s var(--mtg-ease);
    cursor: pointer;
}
.catalog__item-buy:hover {
    background: var(--mtg-leaf-dark);
}
.catalog__item-buy img {
    filter: brightness(0) invert(1); /* cart icon white on green */
}

/* Discount / labels keep brand accents */
.catalog__item-label-discount,
.catalog__item-label-sale {
    background: var(--mtg-yellow);
    color: var(--mtg-ink);
    font-weight: 600;
    border-radius: 8px;
}

/* ---------- Buttons (global) ---------- */
.button-secondary {
    background: var(--mtg-leaf);
    border-color: var(--mtg-leaf);
    transition: background 0.2s var(--mtg-ease), box-shadow 0.2s var(--mtg-ease), transform 0.12s var(--mtg-ease);
}
.button-secondary:hover {
    background: var(--mtg-leaf-dark);
    border-color: var(--mtg-leaf-dark);
    box-shadow: 0 6px 16px rgba(122, 188, 47, 0.30);
}
.button:active,
.button-secondary:active {
    transform: translateY(1px);
}

/* ---------- Inputs / focus ---------- */
.form__input-effect:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--mtg-leaf) !important;
    box-shadow: 0 0 0 3px rgba(122, 188, 47, 0.18);
}

/* ---------- Category sidebar hover ---------- */
.catalog-menu__item > a:hover,
.menu__item a:hover {
    color: var(--mtg-green);
}

/* ---------- Banners / promo blocks ---------- */
.main-slider__item,
.banner,
.promo__item {
    border-radius: var(--mtg-radius);
    overflow: hidden;
}

/* ---------- Search bar (marketplace CTA) ---------- */
.search__input:focus,
.header-search input:focus {
    box-shadow: 0 0 0 3px rgba(122, 188, 47, 0.18);
    border-color: var(--mtg-leaf) !important;
}

/* ---------- Skeleton shimmer (lazy images) ---------- */
@keyframes mtg-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.mtg-skeleton {
    background: #f0f1ec linear-gradient(90deg, #f0f1ec 0%, #f7f8f5 50%, #f0f1ec 100%);
    background-size: 800px 100%;
    animation: mtg-shimmer 1.3s infinite linear;
}

/* ============================================================
   Phase 2 — product detail / basket / checkout / tabs
   ============================================================ */

/* Primary CTA (купить, подробнее, оставить отзыв) — brand green filled */
.button-primary {
    background: var(--mtg-green) !important;
    border-color: var(--mtg-green) !important;
    color: #fff !important;
    border-radius: var(--mtg-radius-sm);
    transition: background 0.2s var(--mtg-ease), box-shadow 0.2s var(--mtg-ease), transform 0.12s var(--mtg-ease);
}
.button-primary:hover {
    background: var(--mtg-green-dark) !important;
    box-shadow: 0 6px 16px rgba(79, 116, 46, 0.28);
}
.button-primary img { filter: brightness(0) invert(1); }

/* Secondary CTA (в избранное) — outline brand */
.button-all {
    background: #fff !important;
    border: 1.5px solid var(--mtg-leaf) !important;
    color: var(--mtg-green) !important;
    border-radius: var(--mtg-radius-sm);
    transition: background 0.2s var(--mtg-ease), border-color 0.2s var(--mtg-ease), transform 0.12s var(--mtg-ease);
}
.button-all:hover {
    background: #f3f9ec !important;
    border-color: var(--mtg-leaf-dark) !important;
}
.button:active,
.button-primary:active,
.button-all:active { transform: translateY(1px); }

/* Detail main image + thumbs: contain on white (no crop / no upscale-stretch) */
.card-product__slider-for-item {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #fff;
    border: 1px solid var(--mtg-line);
    border-radius: var(--mtg-radius);
}
.card-product__slider-nav-item-img {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #fff;
    border: 1px solid var(--mtg-line);
    border-radius: var(--mtg-radius-sm);
}
.card-product__product-img img {
    object-fit: contain;
    background: #fff;
    border-radius: var(--mtg-radius-sm);
}

/* Detail price emphasis */
.card-product__description-price-now {
    color: var(--mtg-green);
    font-weight: 700;
}
.card-product__description-price-old {
    color: var(--mtg-muted);
    text-decoration: line-through;
}

/* Tabs: brand active state */
.card-product__tabs .nav-tabs .nav-link {
    transition: color 0.2s var(--mtg-ease), border-color 0.2s var(--mtg-ease);
}
.card-product__tabs .nav-tabs .nav-link.active {
    color: var(--mtg-green) !important;
    border-bottom: 2px solid var(--mtg-leaf) !important;
}
.card-product__tabs .nav-tabs .nav-link:hover {
    color: var(--mtg-green);
}

/* Quantity stepper — brand accent */
.catalog__item-amount .up:hover img,
.catalog__item-amount .down:hover img {
    filter: invert(48%) sepia(36%) saturate(900%) hue-rotate(50deg);
}

/* Basket / checkout summary cards */
.basket__total,
.order__total,
.checkout__total {
    border-radius: var(--mtg-radius);
    box-shadow: var(--mtg-shadow-sm);
}

/* Section headings (Другие предложения / Возможно вас заинтересует) */
.card-product__other h3,
.catalog-min h3 {
    color: var(--mtg-ink);
    font-weight: 700;
}

/* ============================================================
   Phase 2b — breadcrumbs / pagination / filters / basket / forms
   ============================================================ */

/* Breadcrumbs */
.breadcrumb a { color: var(--mtg-muted); transition: color 0.2s var(--mtg-ease); }
.breadcrumb a:hover { color: var(--mtg-green); }

/* Pagination (Laravel bootstrap-4) — brand active page */
.pagination .page-link { color: var(--mtg-green); }
.pagination .page-link:hover { background: #f3f9ec; color: var(--mtg-green-dark); }
.pagination .page-item.active .page-link,
.pagination .active > .page-link {
    background: var(--mtg-leaf) !important;
    border-color: var(--mtg-leaf) !important;
    color: #fff !important;
}

/* Offer line (now "Похожие товары: N") — subtle */
.catalog__item-offer { color: var(--mtg-muted); font-size: 12px; }

/* Filter + sort bar */
.filter__btn,
.catalog__sorting-title { transition: color 0.2s var(--mtg-ease); }
.filter__btn:hover,
.catalog__sorting-list a:hover,
.catalog__sorting-list li:hover { color: var(--mtg-green); }
.filter__btn-b {
    background: var(--mtg-leaf);
    border-color: var(--mtg-leaf);
    border-radius: var(--mtg-radius-sm);
    transition: background 0.2s var(--mtg-ease);
}
.filter__btn-b:hover { background: var(--mtg-leaf-dark); }

/* Basket / order summary as a clean card */
.order__right {
    background: #fff;
    border-radius: var(--mtg-radius);
    box-shadow: var(--mtg-shadow-sm);
}
.order__list-all-item,
.order__payment-list-item-in {
    border-radius: var(--mtg-radius-sm);
    transition: border-color 0.2s var(--mtg-ease), box-shadow 0.2s var(--mtg-ease);
}

/* Brand all checkboxes & radios in one line (filters, order options, modals) */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--mtg-leaf);
}

/* Links pick up brand on hover globally (non-button) */
a:not(.button):not(.button-primary):not(.button-secondary):not(.button-all):hover {
    color: var(--mtg-green);
}

/* ============================================================
   Phase 2c — category sidebar mega-menu (flyout)
   Was: plain white panel, no border/shadow (blended into page),
   snap open (0.1s opacity only). Now: distinct floating panel that
   slides + fades in smoothly, with the open category highlighted.
   ============================================================ */
@media screen and (min-width: 991px) {
    .menu__submenu {
        /* distinct floating panel — clearly separated from page content */
        box-shadow: 10px 0 44px rgba(31, 45, 17, 0.14);
        border-left: 1px solid var(--mtg-line);
        /* smooth slide + fade instead of an abrupt 0.1s flash */
        transform: translateX(-16px);
        transition: opacity 0.24s var(--mtg-ease),
                    transform 0.24s var(--mtg-ease),
                    visibility 0.24s linear;
    }
    .menu ul > li:hover > .menu__submenu {
        transform: translateX(0);
    }

    /* highlight the category being opened + visually tie it to the panel */
    .menu > ul > li > .menu-li-a-href {
        transition: background 0.2s var(--mtg-ease),
                    color 0.2s var(--mtg-ease),
                    box-shadow 0.2s var(--mtg-ease);
    }
    .menu > ul > li:hover > .menu-li-a-href {
        background: #f3f9ec;
        color: var(--mtg-green);
        box-shadow: inset 3px 0 0 var(--mtg-leaf);
    }
}

/* level-2 headers read as clear group titles */
.menu__submenu-title {
    color: var(--mtg-green) !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--mtg-line);
    margin-bottom: 14px !important;
}
/* level-3 links: darker than the old #7c7c7c for readability */
.menu__submenu ul li a {
    color: #515461 !important;
    transition: color 0.18s var(--mtg-ease);
}
.menu__submenu ul li a:hover {
    color: var(--mtg-green) !important;
}

/* ============================================================
   Provider / supplier landing (/provider) — full redesign
   ============================================================ */
.prov { color: var(--mtg-ink); }
.prov-section { padding: 46px 0; }

.prov-h2 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--mtg-ink);
    margin: 0 0 12px;
}
.prov-h2--left { text-align: left; }
.prov-lead {
    text-align: center;
    color: var(--mtg-muted);
    font-size: 16px;
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto 32px;
}
.prov-lead--left { text-align: left; margin-left: 0; }

/* Buttons */
.prov-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 30px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.14s var(--mtg-ease), box-shadow 0.2s var(--mtg-ease), background 0.2s var(--mtg-ease);
    cursor: pointer;
}
.prov-btn--primary { background: var(--mtg-green); color: #fff; }
.prov-btn--primary:hover { background: var(--mtg-green-dark); color: #fff; box-shadow: 0 10px 24px rgba(79,116,46,.30); transform: translateY(-1px); }
.prov-btn--ghost { background: transparent; color: var(--mtg-green); border: 1.5px solid var(--mtg-leaf); }
.prov-btn--ghost:hover { background: #f3f9ec; color: var(--mtg-green); }
.prov-btn--light { background: #fff; color: var(--mtg-green); }
.prov-btn--light:hover { background: #f3f9ec; color: var(--mtg-green-dark); transform: translateY(-1px); }

/* HERO */
.prov-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 56px 56px 48px;
    margin: 10px 0 8px;
    background: linear-gradient(135deg, #f3f9ec 0%, #eef7e3 55%, #ffffff 100%);
    border: 1px solid #e6efd8;
}
.prov-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.prov-hero__blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .55; }
.prov-hero__blob--1 { width: 260px; height: 260px; right: -60px; top: -70px; background: radial-gradient(circle at 30% 30%, rgba(122,188,47,.45), rgba(122,188,47,0)); }
.prov-hero__blob--2 { width: 200px; height: 200px; right: 120px; bottom: -90px; background: radial-gradient(circle at 30% 30%, rgba(255,184,0,.35), rgba(255,184,0,0)); }
.prov-hero__content { position: relative; z-index: 1; max-width: 640px; }
.prov-hero__badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #e0e8d6;
    color: var(--mtg-green);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.prov-hero__title { font-size: 44px; line-height: 1.08; font-weight: 700; color: var(--mtg-ink); margin: 0 0 16px; }
.prov-hero__title span { color: var(--mtg-green); }
.prov-hero__sub { font-size: 17px; line-height: 1.6; color: #5a5d52; margin: 0 0 26px; }
.prov-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.prov-hero__stats { display: flex; gap: 40px; flex-wrap: wrap; }
.prov-stat { display: flex; flex-direction: column; }
.prov-stat__num { font-size: 28px; font-weight: 700; color: var(--mtg-green); line-height: 1; }
.prov-stat__label { font-size: 13px; color: var(--mtg-muted); margin-top: 6px; }

/* BENEFIT CARDS */
.prov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prov-card {
    background: #fff;
    border: 1px solid var(--mtg-line);
    border-radius: 16px;
    padding: 26px 22px;
    transition: box-shadow 0.25s var(--mtg-ease), transform 0.25s var(--mtg-ease);
}
.prov-card:hover { box-shadow: var(--mtg-shadow-md); transform: translateY(-4px); }
.prov-card__ic {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: #eef7e3;
    color: var(--mtg-green);
    margin-bottom: 16px;
}
.prov-card__ic svg { width: 26px; height: 26px; }
.prov-card__title { font-size: 17px; font-weight: 700; color: var(--mtg-ink); margin: 0 0 8px; }
.prov-card__text { font-size: 14px; line-height: 1.55; color: var(--mtg-muted); margin: 0; }

/* STEPS */
.prov-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prov-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--mtg-line);
    border-radius: 16px;
    padding: 30px 24px 26px;
}
.prov-step__num {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--mtg-green);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}
.prov-step__title { font-size: 18px; font-weight: 700; color: var(--mtg-ink); margin: 0 0 8px; }
.prov-step__text { font-size: 14px; line-height: 1.55; color: var(--mtg-muted); margin: 0; }

/* REQUIREMENTS */
.prov-req { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.prov-req__card {
    background: #eef7e3;
    border: 1px solid #e0e8d6;
    border-radius: 18px;
    padding: 28px 30px;
}
.prov-req__card-title { font-size: 16px; font-weight: 700; color: var(--mtg-ink); margin-bottom: 16px; }
.prov-checklist { list-style: none; margin: 0; padding: 0; }
.prov-checklist li {
    display: flex; align-items: center; gap: 12px;
    font-size: 16px; color: var(--mtg-ink);
    padding: 10px 0;
    border-bottom: 1px solid #dce7cd;
}
.prov-checklist li:last-child { border-bottom: none; }
.prov-checklist svg {
    width: 20px; height: 20px;
    color: #fff;
    background: var(--mtg-leaf);
    border-radius: 50%;
    padding: 3px;
    flex-shrink: 0;
}

/* FINAL CTA */
.prov-cta { margin: 20px 0 50px; }
.prov-cta__inner {
    background: linear-gradient(135deg, var(--mtg-green) 0%, var(--mtg-green-dark) 100%);
    border-radius: 22px;
    padding: 48px 40px;
    text-align: center;
    color: #fff;
}
.prov-cta__title { font-size: 30px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.prov-cta__sub { font-size: 17px; color: rgba(255,255,255,.9); margin: 0 0 26px; }

/* Provider responsive */
@media (max-width: 1100px) {
    .prov-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .prov-hero { padding: 38px 24px 32px; }
    .prov-hero__title { font-size: 32px; }
    .prov-grid, .prov-steps, .prov-req { grid-template-columns: 1fr; }
    .prov-hero__stats { gap: 24px; }
}

/* Provider reveal initial state handled by Motion (js adds inline); CSS fallback = visible */

/* ============================================================
   Premium polish (global) — depth, smoothness, refinement.
   Goal: move away from flat white-on-white toward a layered,
   "expensive" feel. Additive & safe.
   ============================================================ */
html { scroll-behavior: smooth; }

body {
    background: #f5f7f2;                 /* subtle tint so white cards lift off the page */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    animation: mtg-pagein 0.45s var(--mtg-ease) both;
}
@keyframes mtg-pagein { from { opacity: 0; } to { opacity: 1; } }

::selection { background: rgba(122, 188, 47, 0.28); color: var(--mtg-ink); }

/* Branded slim scrollbar */
* { scrollbar-width: thin; scrollbar-color: #cdd6c2 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #cdd6c2;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #b4c2a3; background-clip: content-box; }

/* Header floats above content with a soft shadow */
.header { box-shadow: 0 2px 18px rgba(31, 45, 17, 0.05); position: relative; z-index: 5; }

/* Search bar — softer, premium */
.search__input,
.header-search input,
.search input[type="text"] {
    border-radius: 12px;
    transition: box-shadow 0.2s var(--mtg-ease), border-color 0.2s var(--mtg-ease);
}

/* Promo banners — depth + lift on hover */
.banner__big-slider,
.main-slider__item,
.promo__item,
.banner__sm-item {
    border-radius: var(--mtg-radius);
    overflow: hidden;
}
.promo__item,
.banner__sm-item {
    transition: transform 0.28s var(--mtg-ease), box-shadow 0.28s var(--mtg-ease);
}
.promo__item:hover,
.banner__sm-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--mtg-shadow-md);
}

/* Refined headings */
h1, h2, h3,
.catalog__title,
.title-main h1 { letter-spacing: -0.01em; }

/* Sidebar gets a hairline + subtle depth so it reads as a panel, not flat */
.menu { box-shadow: 1px 0 0 var(--mtg-line); }

/* Footer lifts slightly from the tinted page */
.footer { background: #fff; box-shadow: 0 -1px 0 var(--mtg-line); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .catalog__item,
    .catalog__item-img img,
    .button,
    .button-secondary {
        transition: none !important;
    }
    .catalog__item:hover .catalog__item-img img {
        transform: none;
    }
    .menu__submenu {
        transform: none !important;
        transition: opacity 0.01s linear, visibility 0.01s linear !important;
    }
    .mtg-skeleton {
        animation: none;
    }
    html { scroll-behavior: auto; }
    body { animation: none; }
    .promo__item:hover,
    .banner__sm-item:hover { transform: none; }
}