/* ============================================================

   Mahutid Tooted Plugin – Stiilileht v4

   Värvid: #e95e23 (oranž), #032e68 (navy)

   Fondid: Dosis (headings), Nunito (body)

   ============================================================ */



@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Dosis:wght@400;500;600;700;800&display=swap');



/* ── Muutujad ─────────────────────────────────────────────── */

:root {

    --mah-primary:    #032e68;

    --mah-primary-dk: #021d43;

    --mah-accent:     #e95e23;

    --mah-accent-dk:  #c44d1b;

    --mah-text:       #1a1a2e;

    --mah-text-light: #5a6882;

    --mah-bg-light:   #f0f4fa;

    --mah-border:     #dce4f0;

    --mah-radius:     10px;

    --mah-shadow:     0 2px 14px rgba(3,46,104,0.08);

    --mah-shadow-hov: 0 8px 28px rgba(3,46,104,0.18);

    --mah-font-h:     'Dosis', 'Segoe UI', sans-serif;

    --mah-font-b:     'Nunito', 'Segoe UI', sans-serif;

}



/* ── Toodete grid (staatiline) ───────────────────────────── */

.mahutid-tooted-grid {

    display:         grid;

    gap:             24px;

    padding:         8px 0 32px;

    justify-content: center;

}

.mahutid-veerud-2 { grid-template-columns: repeat(2, minmax(0, 480px)); }

.mahutid-veerud-3 { grid-template-columns: repeat(3, minmax(0, 380px)); }

.mahutid-veerud-4 { grid-template-columns: repeat(4, minmax(0, 300px)); }



@media (max-width: 900px) {

    .mahutid-veerud-3,

    .mahutid-veerud-4 { grid-template-columns: repeat(2, minmax(0, 420px)); }

}

@media (max-width: 580px) {

    .mahutid-veerud-2,

    .mahutid-veerud-3,

    .mahutid-veerud-4 { grid-template-columns: minmax(0, 480px); }

}



/* ── Tootekaart ──────────────────────────────────────────── */

.mahutid-kaart {

    background:     #fff;

    border:         1px solid var(--mah-border);

    border-radius:  var(--mah-radius);

    box-shadow:     var(--mah-shadow);

    overflow:       hidden;

    display:        flex;

    flex-direction: column;

    transition:     box-shadow .25s, transform .25s;

    font-family:    var(--mah-font-b);

}

.mahutid-kaart:hover {

    box-shadow: var(--mah-shadow-hov);

    transform:  translateY(-4px);

}

.mahutid-kaart-pilt-link {

    display:      block;

    overflow:     hidden;

    aspect-ratio: 4/3;

    background:   var(--mah-bg-light);

}

.mahutid-kaart-pilt {

    width:      100%;

    height:     100%;

    object-fit: cover;

    transition: transform .35s;

    display:    block;

}

.mahutid-kaart:hover .mahutid-kaart-pilt { transform: scale(1.05); }



.mahutid-pilt-puudub {

    width:           100%;

    height:          100%;

    min-height:      180px;

    background:      linear-gradient(135deg, var(--mah-primary) 0%, var(--mah-primary-dk) 100%);

    display:         flex;

    align-items:     center;

    justify-content: center;

}

.mahutid-pilt-puudub span {

    font-size:      3.5rem;

    font-weight:    800;

    color:          rgba(255,255,255,0.2);

    font-family:    var(--mah-font-h);

    text-transform: uppercase;

}



.mahutid-kaart-sisu {

    padding:        20px 20px 22px;

    flex:           1;

    display:        flex;

    flex-direction: column;

    gap:            8px;

}

.mahutid-kaart-kategooria {

    font-size:      0.7rem;

    font-weight:    700;

    text-transform: uppercase;

    letter-spacing: .08em;

    color:          var(--mah-accent);

    font-family:    var(--mah-font-h);

}

.mahutid-kaart-kategooria a {

    color:           var(--mah-accent);

    text-decoration: none;

}

.mahutid-kaart-pealkiri {

    margin:      0;

    font-size:   1.05rem;

    font-weight: 700;

    line-height: 1.25;

    color:       var(--mah-primary);

    font-family: var(--mah-font-h);

    letter-spacing: .01em;

}

.mahutid-kaart-pealkiri a { color: inherit; text-decoration: none; }

.mahutid-kaart-pealkiri a:hover { color: var(--mah-accent); }



.mahutid-kaart-kirjeldus {

    margin:      0;

    font-size:   0.86rem;

    color:       var(--mah-text-light);

    line-height: 1.5;

    flex:        1;

}

.mahutid-kaart-arv {

    font-size:  0.82rem;

    font-weight: 600;

    color:      var(--mah-text-light);

}

.mahutid-kaart-nupp {

    display:         inline-block;

    margin-top:      auto;

    padding:         9px 18px;

    background:      var(--mah-accent);

    color:           #fff !important;

    text-decoration: none;

    border-radius:   6px;

    font-size:       0.82rem;

    font-weight:     700;

    font-family:     var(--mah-font-h);

    letter-spacing:  .04em;

    text-transform:  uppercase;

    transition:      background .2s, transform .15s;

    align-self:      flex-start;

}

.mahutid-kaart-nupp:hover {

    background: var(--mah-accent-dk);

    transform:  translateX(2px);

}

.mahutid-tyhi {

    color:      var(--mah-text-light);

    padding:    20px 0;

    font-style: italic;

}



/* ════════════════════════════════════════════════════════════

   SLAIDER

   [mahutid_tooted slaider="jah"]

   ════════════════════════════════════════════════════════════ */

.mahutid-slaider-wrap {

    position:   relative;

    width:      100%;

    overflow:   hidden;

    padding:    8px 0 32px;

    font-family: var(--mah-font-b);

}



/* Noolenupud */

.mahutid-slaider-btn {

    position:        absolute;

    top:             50%;

    transform:       translateY(calc(-50% - 16px));

    z-index:         10;

    width:           46px;

    height:          46px;

    border-radius:   50%;

    background:      var(--mah-primary);

    color:           #fff;

    border:          none;

    cursor:          pointer;

    display:         flex;

    align-items:     center;

    justify-content: center;

    box-shadow:      0 3px 14px rgba(3,46,104,0.25);

    transition:      background .2s, transform .15s;

    font-size:       1.1rem;

    padding:         0;

}

.mahutid-slaider-btn:hover {

    background: var(--mah-accent);

    transform:  translateY(calc(-50% - 16px)) scale(1.08);

}

.mahutid-slaider-btn.prev { left: 0; }

.mahutid-slaider-btn.next { right: 0; }



/* Track */

.mahutid-slaider-outer {

    overflow: hidden;

    margin:   0 54px;      /* ruumi nuppudele */

}

.mahutid-slaider-track {

    display:    flex;

    gap:        20px;

    transition: transform .42s cubic-bezier(.4,0,.2,1);

    will-change: transform;

}



/* Slaidi kaart – fikseeritud laius, kaks rida */

.mahutid-slaider-track .mahutid-kaart {

    flex:       0 0 calc(25% - 16px);   /* 4 slaidi korraga vaikimisi */

    min-width:  220px;

    max-width:  340px;

}



/* Dots */

.mahutid-slaider-dots {

    display:         flex;

    justify-content: center;

    gap:             7px;

    margin-top:      18px;

}

.mahutid-slaider-dot {

    width:         8px;

    height:        8px;

    border-radius: 50%;

    background:    var(--mah-border);

    cursor:        pointer;

    transition:    background .2s, transform .2s;

    border:        none;

    padding:       0;

}

.mahutid-slaider-dot.active {

    background: var(--mah-accent);

    transform:  scale(1.3);

}



@media (max-width: 1100px) {

    .mahutid-slaider-track .mahutid-kaart { flex: 0 0 calc(33.333% - 14px); }

}

@media (max-width: 750px) {

    .mahutid-slaider-track .mahutid-kaart { flex: 0 0 calc(50% - 10px); }

    .mahutid-slaider-outer { margin: 0 42px; }

    .mahutid-slaider-btn { width: 38px; height: 38px; }

}

@media (max-width: 480px) {

    .mahutid-slaider-track .mahutid-kaart { flex: 0 0 calc(100% - 0px); }

    .mahutid-slaider-outer { margin: 0 36px; }

}



/* ════════════════════════════════════════════════════════════

   BREADCRUMB – äge versioon

   ════════════════════════════════════════════════════════════ */

.mahutid-breadcrumb {

    display:     flex;

    align-items: center;

    flex-wrap:   wrap;

    gap:         0;

    font-family: var(--mah-font-b);

    font-size:   0.82rem;

    margin:      18px 0 24px;

    padding:     10px 16px;

    background:  var(--mah-bg-light);

    border-radius: 8px;

    border-left:  4px solid var(--mah-accent);

    color:        var(--mah-text-light);

}

.mahutid-breadcrumb a {

    color:           var(--mah-primary);

    text-decoration: none;

    font-weight:     600;

    padding:         2px 4px;

    border-radius:   4px;

    transition:      background .18s, color .18s;

}

.mahutid-breadcrumb a:hover {

    background: var(--mah-accent);

    color:      #fff;

}



/* Nool eraldaja */

.mahutid-breadcrumb .mah-sep {

    display:     inline-flex;

    align-items: center;

    margin:      0 4px;

    color:       var(--mah-accent);

    font-size:   0.75rem;

    font-weight: 700;

}

/* Viimane kirje (praegune leht) */

.mahutid-breadcrumb .mah-current {

    color:       var(--mah-text);

    font-weight: 600;

    padding:     2px 6px;

    background:  #fff;

    border-radius: 4px;

    border:      1px solid var(--mah-border);

    white-space: nowrap;

    overflow:    hidden;

    text-overflow: ellipsis;

    max-width:   220px;

}



/* ════════════════════════════════════════════════════════════

   ÜKSIK TOOTELEHE

   ════════════════════════════════════════════════════════════ */

.mahutid-single-wrap {

    max-width:   1140px;

    margin:      0 auto;

    padding:     0 20px 60px;

    font-family: var(--mah-font-b);

}

.mahutid-single-layout {

    display:     grid;

    grid-template-columns: 1fr 1fr;

    gap:         52px;

    align-items: start;

}

@media (max-width: 768px) {

    .mahutid-single-layout { grid-template-columns: 1fr; }

}



/* Pildiveerg */

.mahutid-single-pilt img {

    width:         100%;

    height:        auto;

    border-radius: var(--mah-radius);

    box-shadow:    var(--mah-shadow);

    display:       block;

    cursor:        zoom-in;

}

.mahutid-galerii {

    display:               grid;

    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));

    gap:                   8px;

    margin-top:            10px;

}

.mahutid-galerii-thumb {

    width:         100%;

    aspect-ratio:  1;

    object-fit:    cover;

    border-radius: 5px;

    cursor:        pointer;

    border:        2px solid transparent;

    transition:    border-color .2s, transform .2s;

}

.mahutid-galerii-thumb:hover { border-color: var(--mah-accent); transform: scale(1.04); }

.mahutid-galerii-thumb.mahutid-galerii-active { border-color: var(--mah-primary); box-shadow: 0 0 0 2px var(--mah-primary); }



/* Infoveerg */

.mahutid-single-kategooria {

    display:    flex;

    flex-wrap:  wrap;

    gap:        7px;

    margin-bottom: 10px;

}

.mahutid-kat-badge {

    display:         inline-block;

    padding:         3px 12px;

    background:      var(--mah-bg-light);

    border:          1px solid var(--mah-border);

    border-radius:   50px;

    font-size:       0.72rem;

    font-weight:     700;

    color:           var(--mah-primary);

    text-decoration: none;

    text-transform:  uppercase;

    letter-spacing:  .05em;

    font-family:     var(--mah-font-h);

    transition:      background .18s, color .18s;

}

.mahutid-kat-badge:hover { background: var(--mah-primary); color: #fff; }



.mahutid-single-pealkiri {

    font-size:      2rem;

    font-weight:    800;

    color:          var(--mah-primary);

    margin:         0 0 14px;

    line-height:    1.15;

    font-family:    var(--mah-font-h);

    letter-spacing: .01em;

}

.mahutid-single-luhikirj {

    font-size:   0.97rem;

    color:       var(--mah-text-light);

    line-height: 1.65;

    margin-bottom: 22px;

}



/* Info kastid */

.mahutid-info-kastid {

    display:        flex;

    flex-direction: column;

    gap:            9px;

    margin:         22px 0;

}

.mahutid-info-kast {

    display:      flex;

    align-items:  center;

    gap:          13px;

    padding:      12px 15px;

    background:   var(--mah-bg-light);

    border-radius: 8px;

    border:       1px solid var(--mah-border);

    border-left:  3px solid var(--mah-accent);

}

.mahutid-info-ikon { font-size: 1.4rem; flex-shrink: 0; }

.mahutid-info-kast strong {

    display:        block;

    font-size:      0.7rem;

    color:          var(--mah-text-light);

    text-transform: uppercase;

    letter-spacing: .06em;

    margin-bottom:  1px;

    font-family:    var(--mah-font-h);

}

.mahutid-info-kast span {

    font-size:  0.93rem;

    font-weight: 600;

    color:      var(--mah-text);

}



/* Dokumendid */

.mahutid-dokumendid { margin: 18px 0; }

.mahutid-dokumendid h4 { margin: 0 0 10px; font-size: 0.88rem; font-family: var(--mah-font-h); color: var(--mah-primary); }

.mahutid-failid-nimekiri { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 8px; }

.mahutid-pdf-nupp {

    display:         inline-flex;

    align-items:     center;

    gap:             6px;

    padding:         8px 15px;

    background:      #fff;

    border:          2px solid var(--mah-primary);

    color:           var(--mah-primary) !important;

    text-decoration: none;

    border-radius:   6px;

    font-size:       0.82rem;

    font-weight:     700;

    font-family:     var(--mah-font-h);

    letter-spacing:  .03em;

    transition:      background .2s, color .2s, border-color .2s;

    white-space:     nowrap;

}

.mahutid-pdf-nupp:hover { background: var(--mah-primary); color: #fff !important; }



/* CTA kast */

.mahutid-cta-kast {

    background:    linear-gradient(135deg, var(--mah-primary) 0%, var(--mah-primary-dk) 100%);

    border-radius: var(--mah-radius);

    padding:       26px 28px;

    color:         #fff;

    margin-top:    26px;

    position:      relative;

    overflow:      hidden;

}

.mahutid-cta-kast::before {

    content:       '';

    position:      absolute;

    top:           0; left: 0; right: 0;

    height:        4px;

    background:    var(--mah-accent);

}

.mahutid-cta-kast h4 { margin: 0 0 7px; font-size: 1.1rem; font-family: var(--mah-font-h); color: #fff; letter-spacing: .02em; }

.mahutid-cta-kast p  { margin: 0 0 15px; font-size: 0.88rem; opacity: .82; }

.mahutid-cta-nupp {

    display:         inline-block;

    padding:         11px 24px;

    background:      var(--mah-accent);

    color:           #fff !important;

    text-decoration: none;

    border-radius:   6px;

    font-weight:     700;

    font-size:       0.88rem;

    font-family:     var(--mah-font-h);

    letter-spacing:  .04em;

    text-transform:  uppercase;

    transition:      background .2s, transform .15s;

}

.mahutid-cta-nupp:hover { background: var(--mah-accent-dk); transform: translateY(-1px); }

.mahutid-kontakt-info {

    display:    flex;

    gap:        16px;

    margin-top: 12px;

    font-size:  0.8rem;

    opacity:    .75;

    flex-wrap:  wrap;

}

.mahutid-kontakt-info a {

    color:           #fff;

    text-decoration: none;

    transition:      opacity .15s;

}

.mahutid-kontakt-info a:hover {

    opacity: 1;

    text-decoration: underline;

}



/* Toote täissisu */

.mahutid-single-sisu {

    margin-top:  48px;

    padding-top: 34px;

    border-top:  2px solid var(--mah-border);

}

.mahutid-single-sisu h2 {

    font-size:   1.5rem;

    font-weight: 800;

    margin-bottom: 22px;

    font-family: var(--mah-font-h);

    color:       var(--mah-primary);

    letter-spacing: .01em;

}

.mahutid-single-sisu table {

    width:           100%;

    border-collapse: collapse;

    margin:          18px 0;

    font-size:       0.88rem;

    display:         block;

    overflow-x:      auto;

}

.mahutid-single-sisu th {

    background:     var(--mah-primary);

    color:          #fff;

    padding:        9px 13px;

    text-align:     left;

    font-size:      0.78rem;

    text-transform: uppercase;

    letter-spacing: .05em;

    font-family:    var(--mah-font-h);

}

.mahutid-single-sisu td {

    padding:      8px 13px;

    border-bottom: 1px solid var(--mah-border);

    color:        var(--mah-text);

}

.mahutid-single-sisu tr:hover td { background: var(--mah-bg-light); }



/* Toote veerud */

.mahutid-toode-veerud {

    display:       grid;

    grid-template-columns: 1fr 1fr;

    gap:           26px;

    margin:        26px 0;

    padding:       22px;

    background:    var(--mah-bg-light);

    border-radius: var(--mah-radius);

    border:        1px solid var(--mah-border);

}

@media (max-width: 640px) { .mahutid-toode-veerud { grid-template-columns: 1fr; } }

.mahutid-toode-veerg ul { margin: 0; padding: 0 0 0 17px; line-height: 1.8; font-size: 0.9rem; color: var(--mah-text); }

.mahutid-toode-kirjeldus { line-height: 1.7; font-size: 0.95rem; color: var(--mah-text); }

.mahutid-toode-kirjeldus h4, .mahutid-toode-kirjeldus h3 { color: var(--mah-primary); margin: 18px 0 7px; font-family: var(--mah-font-h); }



/* Seotud tooted */

.mahutid-seotud-tooted { margin-top: 52px; padding-top: 34px; border-top: 2px solid var(--mah-border); }

.mahutid-seotud-tooted h3 { font-size: 1.4rem; margin-bottom: 22px; font-family: var(--mah-font-h); color: var(--mah-primary); }



/* Arhiivi leht */

.mahutid-archive-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px 60px; }

.mahutid-archive-header { margin-bottom: 32px; padding-bottom: 22px; border-bottom: 2px solid var(--mah-border); }

.mahutid-archive-header h1 { font-size: 2.2rem; font-weight: 800; color: var(--mah-primary); margin: 10px 0 7px; font-family: var(--mah-font-h); letter-spacing: .01em; }

.mahutid-archive-kirjeldus { color: var(--mah-text-light); font-size: 1rem; margin: 0; }



/* ════════════════════════════════════════════════════════════

   KOMPAKTNE KATEGOORIATE GRIID (PDF-stiil)

   pilt + nimi + allajoon, keskel joondatud

   ════════════════════════════════════════════════════════════ */



.mahutid-kat-grid.mah-kompaktne {

    display:         grid;

    gap:             0;

    padding:         0;

    justify-content: center;

    text-align:      center;

}



/* Veergude arv */

.mahutid-kat-grid.mah-kompaktne.mahutid-veerud-3 { grid-template-columns: repeat(3, 1fr); }

.mahutid-kat-grid.mah-kompaktne.mahutid-veerud-4 { grid-template-columns: repeat(4, 1fr); }

.mahutid-kat-grid.mah-kompaktne.mahutid-veerud-5 { grid-template-columns: repeat(5, 1fr); }



@media (max-width: 900px) {

    .mahutid-kat-grid.mah-kompaktne.mahutid-veerud-4,

    .mahutid-kat-grid.mah-kompaktne.mahutid-veerud-5 {

        grid-template-columns: repeat(3, 1fr);

    }

}

@media (max-width: 600px) {

    .mahutid-kat-grid.mah-kompaktne { grid-template-columns: repeat(2, 1fr) !important; }

}



/* Üksik kaart */

.mah-kat-kaart {

    display:         flex;

    flex-direction:  column;

    align-items:     center;

    padding:         22px 12px 18px;

    text-decoration: none;

    border:          1px solid var(--mah-border);

    border-radius:   0;

    background:      #fff;

    position:        relative;

    transition:      background .18s;

    cursor:          pointer;

    /* Eemalda topeltäärised griidis */

    margin:          -1px 0 0 -1px;

}



/* Hover – oranž tekst ja peen highlight */

.mah-kat-kaart:hover {

    background: var(--mah-bg-light);

    z-index:    1;

}

.mah-kat-kaart:hover .mah-kat-nimi {

    color: var(--mah-accent);

}

.mah-kat-kaart:hover .mah-kat-joon {

    background: var(--mah-accent);

    width:      48px;

}



/* Pildikast */

.mah-kat-pilt {

    width:         100px;

    height:        80px;

    display:       flex;

    align-items:   center;

    justify-content: center;

    margin-bottom: 12px;

    overflow:      hidden;

}

.mah-kat-pilt img {

    max-width:  100%;

    max-height: 80px;

    width:      auto;

    height:     auto;

    object-fit: contain;

    display:    block;

    transition: transform .28s;

}

.mah-kat-kaart:hover .mah-kat-pilt img { transform: scale(1.08); }



/* Placeholder */

.mah-kat-initsiaal {

    width:           80px;

    height:          80px;

    border-radius:   8px;

    background:      linear-gradient(135deg, var(--mah-primary), var(--mah-primary-dk));

    display:         flex;

    align-items:     center;

    justify-content: center;

    font-size:       2.2rem;

    font-weight:     800;

    color:           rgba(255,255,255,0.22);

    font-family:     var(--mah-font-h);

}



/* Nimi */

.mah-kat-nimi {

    font-size:      0.88rem;

    font-weight:    600;

    color:          var(--mah-primary);

    font-family:    var(--mah-font-h);

    letter-spacing: .01em;

    text-align:     center;

    line-height:    1.25;

    margin-bottom:  10px;

    transition:     color .18s;

    max-width:      140px;

}



/* Allajoonis – nagu PDF-is */

.mah-kat-joon {

    width:      28px;

    height:     2px;

    background: var(--mah-border);

    border-radius: 2px;

    transition: width .25s, background .2s;

    margin-top: auto;

}



/* ════════════════════════════════════════════════════════════

   HERO SEKTSIOON  v4  –  kp-header lained, filtriga pildid, suured nimed

   ════════════════════════════════════════════════════════════ */



/* Sama laine animatsioon mis kp-header pluginas */

@keyframes mah-wave-draw {

    from { stroke-dashoffset: 1; }

    to   { stroke-dashoffset: 0; }

}

@keyframes mah-wave-back {

    from { stroke-dashoffset: 0; }

    to   { stroke-dashoffset: -1; }

}



.mah-hero {

    position:    relative;

    z-index:     0;

    width:       100vw;

    margin-left: calc(-50vw + 50%);

    overflow:    hidden;

    font-family: var(--mah-font-b);

}



.mah-hero-bg {

    position:            absolute;

    inset:               0;

    background-size:     cover;

    background-position: center;

    background-repeat:   no-repeat;

    z-index:             0;

}



.mah-hero-overlay {

    position: absolute;

    inset:    0;

    z-index:  1;

}



/* Ülaserv: peegeldatud path, sama kõrgus mis all */

.mah-hero-wave-top {

    position:       absolute;

    top:            -1px;

    left:           0;

    width:          100%;

    height:         80px;

    z-index:        15;

    display:        block;

    pointer-events: none;

}

.mah-hero-wave-top svg {

    display: block;

    width:   100%;

    height:  80px;

}



/* Alaserv: valge täidis — täpselt nagu kp-slider-shape */

.mah-hero-wave-bot {

    position:       absolute;

    bottom:         -1px;

    left:           0;

    width:          100%;

    height:         80px;

    z-index:        15;

    display:        block;

    pointer-events: none;

}



/* Progress stroke laine peal */

.mah-hero-wave-progress {

    position:       absolute;

    bottom:         -1px;

    left:           0;

    width:          100%;

    height:         80px;

    z-index:        16;

    display:        block;

    pointer-events: none;

}

.mah-wave-path { stroke-dashoffset: 1; }



/* Sisu */

.mah-hero-inner {

    position:  relative;

    z-index:   2;

    max-width: 1280px;

    margin:    0 auto;

    padding:   64px 48px 108px;

}



.mah-hero-tekst { margin-bottom: 44px; }

.mah-hero-nupp-wrap {
    text-align: center;
    margin-top: 32px;
}



.mah-hero-label {

    display:        inline-flex;

    align-items:    center;

    gap:            10px;

    font-size:      11px;

    font-weight:    700;

    letter-spacing: .14em;

    text-transform: uppercase;

    color:          var(--mah-accent);

    font-family:    var(--mah-font-h);

    margin-bottom:  14px;

}

.mah-hero-label::before {

    content:       '';

    display:       inline-block;

    width:         30px; height: 2px;

    background:    var(--mah-accent);

    border-radius: 2px;

}



.mah-hero-title {

    font-size:      clamp(30px, 4vw, 52px);

    font-weight:    800;

    color:          #fff;

    line-height:    1.08;

    margin:         0 0 14px;

    font-family:    var(--mah-font-h);

    letter-spacing: .01em;

    max-width:      660px;

    text-shadow:    0 2px 28px rgba(0,0,0,.5);

}



.mah-hero-sub {

    font-size:   clamp(16px, 1.8vw, 20px);

    color:       rgba(255,255,255,.8);

    margin:      0 0 30px;

    max-width:   500px;

    line-height: 1.55;

    font-weight: 500;

    text-shadow: 0 1px 10px rgba(0,0,0,.4);

}



.mah-hero-nupp {

    display:         inline-flex;

    align-items:     center;

    gap:             10px;

    padding:         13px 28px;

    background:      var(--mah-accent);

    color:           #fff !important;

    text-decoration: none;

    border-radius:   6px;

    font-size:       14px;

    font-weight:     700;

    font-family:     var(--mah-font-h);

    letter-spacing:  .06em;

    text-transform:  uppercase;

    transition:      background .2s, transform .15s;

    box-shadow:      0 4px 20px rgba(233,94,35,.4);

}

.mah-hero-nupp:hover { background: var(--mah-accent-dk); transform: translateX(3px); }



/* Griid */

.mah-hero-grid {

    display:               grid;

    grid-template-columns: repeat(4, minmax(0, 200px));

    gap:                   14px;

    justify-content:       center;

}



/* ── Kaart — ainult ikoon + nimi, ilma kastita ───────────── */

.mah-hero-item {

    display:         flex;

    flex-direction:  column;

    align-items:     center;

    justify-content: center;

    text-align:      center;

    border-radius:   12px;

    overflow:        hidden;

    text-decoration: none;

    border:          1px solid transparent;

    background:      transparent;

    padding:         20px 10px 16px;

    gap:             0;

    min-height:      140px;

    transition:      transform .22s;

}

.mah-hero-item:hover,

.mah-hero-item--active {

    transform: translateY(-4px);

}



/* Ikoon */

.mah-hero-item-ikoon-wrap {

    display:         flex;

    align-items:     center;

    justify-content: center;

    width:           72px;

    height:          72px;

    margin-bottom:   16px;

    flex-shrink:     0;

}

.mah-hero-item-ikoon-img {

    width:      64px;

    height:     64px;

    object-fit: contain;

    display:    block;

    filter:     brightness(0) invert(1);

    opacity:    .92;

    transition: transform .28s, opacity .22s;

}

.mah-hero-item:hover .mah-hero-item-ikoon-img,

.mah-hero-item--active .mah-hero-item-ikoon-img {

    transform: scale(1.12) translateY(-2px);

    opacity:   1;

}



/* Placeholder (ikoon puudub) */

.mah-hero-item-init {

    font-size:     44px;

    font-weight:   800;

    color:         rgba(255,255,255,.22);

    font-family:   var(--mah-font-h);

    margin-bottom: 16px;

    line-height:   1;

}



/* Footer: nimi + joon */

.mah-hero-item-footer {

    display:        flex;

    flex-direction: column;

    align-items:    center;

    gap:            8px;

    width:          100%;

}



/* Nimi */

.mah-hero-item-nimi {

    font-size:      18px;

    font-weight:    800;

    color:          #fff;

    line-height:    1.2;

    font-family:    var(--mah-font-h);

    letter-spacing: .03em;

    text-shadow:    0 1px 8px rgba(0,0,0,.5);

}



/* Joon */

.mah-hero-item-joon {

    width:         24px;

    height:        2px;

    border-radius: 1px;

    background:    rgba(233,94,35,.55);

    transition:    width .28s, background .22s;

}

.mah-hero-item:hover .mah-hero-item-joon,

.mah-hero-item--active .mah-hero-item-joon {

    width:      40px;

    background: var(--mah-accent);

}



.mah-hero-rida2 { margin-top: 0; }



@media (max-width: 960px) {

    .mah-hero-grid { grid-template-columns: repeat(3, minmax(0, 200px)); }

    .mah-hero-rida2 { grid-template-columns: repeat(3, minmax(0, 200px)) !important; }

    .mah-hero-inner { padding: 56px 24px 104px; }

}

@media (max-width: 640px) {

    .mah-hero-grid { grid-template-columns: repeat(2, minmax(0, 200px)); }

    .mah-hero-rida2 { grid-template-columns: repeat(2, minmax(0, 200px)) !important; }

    .mah-hero-inner { padding: 40px 16px 96px; }

    .mah-hero-wave-top, .mah-hero-wave-top svg,

    .mah-hero-wave-bot, .mah-hero-wave-progress { height: 56px; }

    .mah-hero-item-ikoon-img { width: 48px; height: 48px; }

    .mah-hero-item-nimi { font-size: 15px; }

}