/*
==========================================================
Tabak-Market UI Kit

Version: 2.1
Status: Stable

Author:
Tabak-Market

Last Update:
July 2026

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


/* ==========================================================
   00 VARIABLES
========================================================== */

:root{
    --tm-primary:#6f42c1;
    --tm-primary-hover:#5b33a7;

    --tm-gold:#c99848;
    --tm-gold-dark:#b8853e;
    --tm-gold-soft:#f1d08f;

    --tm-text:#2b241f;
    --tm-text-dark:#211a17;
    --tm-text-light:#5d544d;
    --tm-text-muted:#6d6258;

    --tm-border:#ebe3d7;
    --tm-border-soft:#f1ece4;

    --tm-bg:#ffffff;
    --tm-bg-soft:#faf8f5;
    --tm-bg-warm:#fffdf9;
    --tm-bg-accent:#f6f0ff;

    --tm-radius:18px;
    --tm-radius-md:16px;
    --tm-radius-sm:12px;

    --tm-shadow-soft:0 4px 14px rgba(0,0,0,.04);
    --tm-shadow:0 6px 18px rgba(0,0,0,.04);
    --tm-shadow-hover:0 12px 28px rgba(0,0,0,.09);

    --tm-speed:.25s;
}


/* ==========================================================
   01 BASE
========================================================== */

.tm-product-content,
.tm-category-content{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:4px 12px 10px;
    color:var(--tm-text);
    font-size:16px;
}

.tm-product-content h2,
.tm-category-content h2{
    margin:0 0 28px;
    padding-bottom:16px;
    border-bottom:1px solid #eee6dc;
    color:var(--tm-text-dark);
    font-size:32px;
    line-height:1.25;
    font-weight:800;
}

.tm-product-content p,
.tm-category-content p{
    margin:0 0 18px;
    color:var(--tm-text-light);
    font-size:16px;
    line-height:1.8;
}

.tm-product-content a,
.tm-category-content a{
    color:var(--tm-primary);
    font-weight:600;
    text-decoration:none;
    transition:color var(--tm-speed) ease,text-decoration var(--tm-speed) ease;
}

.tm-product-content a:hover,
.tm-category-content a:hover{
    color:var(--tm-primary-hover);
    text-decoration:underline;
}


/* ==========================================================
   02 SECTION TITLES
========================================================== */

.tm-section-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin:56px 0 22px;
    color:var(--tm-text-dark);
    font-size:22px;
    font-weight:800;
    line-height:1.3;
}

.tm-section-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--tm-bg-accent);
    color:var(--tm-primary);
    font-size:18px;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}


/* ==========================================================
   03 HERO / CATEGORY FACTS
========================================================== */

.tm-hero-facts,
.tm-category-facts{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin:28px 0 34px;
}

.tm-hero-fact,
.tm-category-fact{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:64px;
    padding:14px 18px;
    background:linear-gradient(180deg,#ffffff,#fffdf9);
    border:1px solid var(--tm-border);
    border-radius:var(--tm-radius-md);
    box-shadow:0 4px 14px rgba(0,0,0,.035);
    transition:transform var(--tm-speed) ease,border-color var(--tm-speed) ease,box-shadow var(--tm-speed) ease,background var(--tm-speed) ease;
}

.tm-hero-fact:hover,
.tm-category-fact:hover{
    transform:translateY(-4px);
    border-color:#d9bf96;
    background:linear-gradient(180deg,#ffffff,#fff8eb);
    box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.tm-hero-fact::before,
.tm-category-fact::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:100%;
    background:linear-gradient(180deg,var(--tm-gold),var(--tm-gold-soft),var(--tm-gold));
    opacity:0;
    transition:opacity var(--tm-speed) ease;
}

.tm-hero-fact:hover::before,
.tm-category-fact:hover::before{
    opacity:1;
}

.tm-hero-fact-icon,
.tm-category-fact-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f7efe2;
    font-size:18px;
    transition:transform var(--tm-speed) ease,background var(--tm-speed) ease,box-shadow var(--tm-speed) ease;
}

.tm-hero-fact:hover .tm-hero-fact-icon,
.tm-category-fact:hover .tm-category-fact-icon{
    transform:scale(1.08) rotate(-3deg);
    background:#fff1d4;
    box-shadow:0 8px 18px rgba(201,152,72,.16);
}

.tm-hero-fact-label,
.tm-category-fact-label{
    display:block;
    margin-bottom:3px;
    color:#9a6b2f;
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.tm-hero-fact-value,
.tm-category-fact-value{
    display:block;
    color:var(--tm-text);
    font-size:16px;
    font-weight:700;
    line-height:1.3;
}


/* ==========================================================
   04 USP CARDS
========================================================== */

.tm-usp-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
    margin:32px 0 40px;
}

.tm-feature-item{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-height:210px;
    padding:28px 18px 22px;
    background:#fff;
    border:1px solid var(--tm-border);
    border-radius:var(--tm-radius);
    text-align:center;
    box-shadow:0 4px 14px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.85);
    transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}

.tm-feature-item:hover{
    transform:translateY(-5px);
    border-color:#d9bf96;
    box-shadow:0 12px 28px rgba(0,0,0,.09),0 4px 12px rgba(201,152,72,.08);
}

.tm-feature-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,var(--tm-gold),var(--tm-gold-soft),var(--tm-gold));
    opacity:0;
    transition:opacity var(--tm-speed) ease;
}

.tm-feature-item:hover::before{opacity:1;}

.tm-feature-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top,rgba(255,235,195,.35),transparent 60%);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}

.tm-feature-item:hover::after{opacity:1;}

.tm-feature-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    margin-bottom:18px;
    border-radius:50%;
    background:linear-gradient(180deg,#fbf8f1,#f4ead8);
    border:1px solid #ead9ba;
    font-size:28px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}

.tm-feature-item:hover .tm-feature-icon{
    transform:scale(1.08) rotate(-3deg);
    background:linear-gradient(180deg,#fffdf8,#fff1d4);
    box-shadow:0 12px 26px rgba(201,152,72,.18);
}

.tm-feature-item h4{
    margin:0 0 10px;
    color:#241d18;
    font-size:19px;
    font-weight:700;
    line-height:1.35;
}

.tm-feature-item p{
    margin:0;
    color:var(--tm-text-muted);
    font-size:14px;
    line-height:1.6;
}


/* ==========================================================
   05 CONTENT CARD
========================================================== */

.tm-content-card{
    position:relative;
    overflow:hidden;

    margin:30px 0;
    padding:28px 32px;

    background:linear-gradient(180deg,#ffffff,#fffdf9);

    border:1px solid var(--tm-border);
    border-radius:var(--tm-radius);

    box-shadow:0 5px 18px rgba(0,0,0,.04);

    transition:
        border-color var(--tm-speed) ease,
        box-shadow var(--tm-speed) ease;
}

.tm-content-card:hover{
    border-color:#dcc49c;
    box-shadow:0 10px 26px rgba(0,0,0,.07);
}

.tm-content-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:linear-gradient(
        180deg,
        var(--tm-gold),
        var(--tm-gold-soft),
        var(--tm-gold)
    );
}

.tm-content-card p:last-child{
    margin-bottom:0;
}

/* ==========================================================
   05.1 TM Fazit Card
========================================================== */

.tm-fazit-card{
    position:relative;
    overflow:hidden;

    margin:32px 0;
    padding:30px 34px 30px 36px;

    background:linear-gradient(135deg,#fffaf2 0%,#ffffff 65%,#f7fcf8 100%);

    border:1px solid #e4c992;
    border-radius:var(--tm-radius);

    box-shadow:0 8px 24px rgba(0,0,0,.05);

    transition:
        transform var(--tm-speed) ease,
        border-color var(--tm-speed) ease,
        box-shadow var(--tm-speed) ease;
}

.tm-fazit-card:hover{
    transform:translateY(-2px);
    border-color:#d7b97b;
    box-shadow:0 14px 30px rgba(0,0,0,.08);
}

.tm-fazit-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;

    width:6px;
    height:100%;

    background:linear-gradient(
        180deg,
        #14853b,
        #c99848
    );
}

.tm-fazit-card::after{
    content:"★";

    position:absolute;
    right:22px;
    bottom:10px;

    font-size:72px;
    font-weight:800;
    line-height:1;

    color:#14853b;
    opacity:.05;

    pointer-events:none;
}

.tm-fazit-card p{
    position:relative;
    z-index:1;

    margin:0;

    color:#3b352e;

    font-size:16px;
    line-height:1.85;
}

.tm-fazit-card strong{
    color:#211a17;
}

@media(max-width:767px){

.tm-fazit-card{
    padding:22px 24px 22px 26px;
    margin:24px 0;
}

.tm-fazit-card::after{
    right:14px;
    bottom:8px;
    font-size:54px;
}

.tm-fazit-card p{
    font-size:15px;
    line-height:1.75;
}

}


/* ==========================================================
   06 INFORMATION BLOCKS
========================================================== */

.tm-product-content .tm-tip,
.tm-product-content .tm-info,
.tm-product-content .tm-warning,
.tm-category-content .tm-tip,
.tm-category-content .tm-info,
.tm-category-content .tm-warning{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin:28px 0;
    padding:22px 26px;
    border-radius:var(--tm-radius-md);
    box-shadow:0 5px 18px rgba(0,0,0,.045);
    transition:border-color var(--tm-speed) ease,box-shadow var(--tm-speed) ease,transform var(--tm-speed) ease;
}

.tm-product-content .tm-tip,
.tm-category-content .tm-tip{
    background:linear-gradient(180deg,#fffdf8,#fff9ef);
    border:1px solid #f0ddb8;
    border-left:5px solid #d8a32b;
}

.tm-product-content .tm-info,
.tm-category-content .tm-info{
    background:linear-gradient(180deg,#ffffff,#f7fbff);
    border:1px solid #cfe7f8;
    border-left:5px solid #3f8ecb;
}

.tm-product-content .tm-warning,
.tm-category-content .tm-warning{
    background:linear-gradient(180deg,#fffdf8,#fffaf0);
    border:1px solid #f0d7a8;
    border-left:5px solid #e6a300;
}

.tm-product-content .tm-tip:hover,
.tm-product-content .tm-info:hover,
.tm-product-content .tm-warning:hover,
.tm-category-content .tm-tip:hover,
.tm-category-content .tm-info:hover,
.tm-category-content .tm-warning:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.065);
}

.tm-tip-icon,
.tm-info-icon,
.tm-warning-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:21px;
    box-shadow:0 4px 12px rgba(0,0,0,.045);
}

.tm-tip-icon{background:#fff1cf;}
.tm-info-icon{background:#e4f3ff;}
.tm-warning-icon{background:#fff1cf;}

.tm-tip-content h4,
.tm-info-content h4,
.tm-warning-content h4{
    margin:0 0 7px;
    color:var(--tm-text);
    font-size:18px;
    font-weight:800;
    line-height:1.35;
}

.tm-warning-content h4{color:#8b5a00;}

.tm-tip-content p,
.tm-info-content p,
.tm-warning-content p{
    margin:0;
    color:var(--tm-text-light);
    line-height:1.75;
}

.tm-warning-content strong{color:#8b5a00;}

/* Quote: optional accent block */
.tm-product-content .tm-quote,
.tm-category-content .tm-quote{
    position:relative;
    max-width:760px;
    margin:34px auto;
    padding:28px 36px 28px 42px;
    background:linear-gradient(180deg,#ffffff,#fcfbff);
    border:1px solid #e7def8;
    border-left:5px solid var(--tm-primary);
    border-radius:var(--tm-radius);
    color:var(--tm-text-light);
    font-size:18px;
    line-height:1.85;
    font-style:italic;
    box-shadow:0 5px 18px rgba(0,0,0,.04);
    transition:border-color var(--tm-speed) ease,box-shadow var(--tm-speed) ease;
}

.tm-product-content .tm-quote:hover,
.tm-category-content .tm-quote:hover{
    border-color:#d7c5ff;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.tm-product-content .tm-quote::before,
.tm-category-content .tm-quote::before{
    content:"“";
    position:absolute;
    top:-6px;
    left:18px;
    font-family:Georgia,serif;
    font-size:54px;
    color:#d8c8ff;
}

.tm-product-content .tm-quote p,
.tm-category-content .tm-quote p{
    margin:0;
    color:inherit;
    font-size:inherit;
    line-height:inherit;
    font-style:italic;
}

.tm-product-content .tm-quote strong,
.tm-category-content .tm-quote strong{
    color:var(--tm-primary);
    font-style:normal;
}


/* ==========================================================
   07 PRODUCT / CATEGORY TABLES
========================================================== */

.tm-product-content table.tm-datatable,
.tm-category-content table.tm-datatable{
    width:100% !important;
    max-width:100% !important;
    display:table !important;
    table-layout:fixed !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid var(--tm-border) !important;
    border-radius:var(--tm-radius) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.055) !important;
}

.tm-product-content table.tm-datatable tr,
.tm-category-content table.tm-datatable tr{display:table-row !important;}

.tm-product-content table.tm-datatable td,
.tm-category-content table.tm-datatable td{
    display:table-cell !important;
    padding:16px 20px !important;
    border:0 !important;
    border-bottom:1px solid #f0e8dc !important;
    font-size:15px !important;
    line-height:1.6 !important;
    vertical-align:middle !important;
}

.tm-product-content table.tm-datatable tr:last-child td,
.tm-category-content table.tm-datatable tr:last-child td{border-bottom:0 !important;}

.tm-product-content table.tm-datatable td:first-child,
.tm-category-content table.tm-datatable td:first-child{
    width:28% !important;
    background:#f8f3ec !important;
    color:var(--tm-text-dark) !important;
    font-weight:800 !important;
    letter-spacing:.01em;
}

.tm-product-content table.tm-datatable td:last-child,
.tm-category-content table.tm-datatable td:last-child{
    width:66% !important;
    background:#fff !important;
    color:#51463f !important;
}

.tm-product-content table.tm-datatable tbody tr:hover,
.tm-category-content table.tm-datatable tbody tr:hover{background:#fff9ef !important;}

.tm-product-content table.tm-datatable tr:hover td:first-child,
.tm-category-content table.tm-datatable tr:hover td:first-child{background:#f1e4d2 !important;}

.tm-product-content table.tm-datatable tr:hover td:last-child,
.tm-category-content table.tm-datatable tr:hover td:last-child{background:#fff6e8 !important;}

.tm-product-content .tm-datatable tr,
.tm-category-content .tm-datatable tr{transition:background .18s ease;}

.tm-product-content .tm-datatable,
.tm-category-content .tm-datatable{border-radius:var(--tm-radius-md);}


/* ==========================================================
   08 TOGGLES / FAQ
========================================================== */

.toggle-block{
    margin:18px 0;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--tm-border);
    border-radius:var(--tm-radius-md);
    box-shadow:var(--tm-shadow-soft);
    transition:border-color var(--tm-speed) ease,box-shadow var(--tm-speed) ease;
}

.toggle-block:hover{
    border-color:#dccfbf;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.toggle-button{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:18px 24px;
    border:none;
    background:#fff;
    cursor:pointer;
    color:var(--tm-text);
    font-size:17px;
    font-weight:700;
    line-height:1.35;
    text-align:left;
    transition:background .2s ease,color .2s ease;
}

.toggle-button:hover{background:#faf7f2;}
.toggle-button.active{background:#fffaf4;}

.toggle-button::after{
    content:"+";
    flex:0 0 auto;
    color:var(--tm-gold);
    font-size:22px;
    font-weight:700;
    line-height:1;
    transition:transform .2s ease,color .2s ease;
}

.toggle-button:hover::after{
    color:var(--tm-gold-dark);
    transform:scale(1.1);
}

.toggle-button.active::after{
    content:"–";
    transform:rotate(180deg);
}

.toggle-content{
    display:none;
    padding:22px 24px;
    background:#fffdfb;
    border-top:1px solid #eee7dc;
    color:var(--tm-text-light);
    font-size:15px;
    line-height:1.75;
}

.toggle-content p:last-child,
.toggle-content ul:last-child,
.toggle-content ol:last-child{margin-bottom:0;}


/* ==========================================================
   09 LISTS / STEPS
========================================================== */

.tm-list{
    margin:22px 0;
    padding:0;
    list-style:none;
}

.tm-list li{
    position:relative;
    margin:0 0 14px;
    padding-left:30px;
    color:#3b352e;
    line-height:1.7;
}

.tm-list li:last-child{margin-bottom:0;}

.tm-list li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:2px;
    color:#14853b;
    font-size:15px;
    font-weight:800;
}

.tm-list strong{color:#2d2926;}

.tm-list-dot{
    margin:22px 0;
    padding:0;
    list-style:none;
}

.tm-list-dot li{
    position:relative;
    margin:0 0 12px;
    padding-left:26px;
    color:var(--tm-text-light);
    line-height:1.7;
}

.tm-list-dot li::before{
    content:"";
    position:absolute;
    left:0;
    top:.72em;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--tm-gold);
    box-shadow:0 0 0 4px #f6ead7;
}

.tm-steps{
    counter-reset:step;
    margin:0 0 22px;
    padding:0;
    list-style:none;
}

.tm-steps li{
    position:relative;
    min-height:38px;
    margin:18px 0;
    padding-left:58px;
    color:var(--tm-text-light);
    line-height:1.7;
}

.tm-steps li::before{
    counter-increment:step;
    content:counter(step);
    position:absolute;
    left:0;
    top:1px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(180deg,#d4aa64,#b8853e);
    color:#fff;
    font-size:15px;
    font-weight:800;
    box-shadow:0 5px 14px rgba(184,133,62,.25);
}


/* ==========================================================
   10 BADGES
========================================================== */

.tm-badge{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:.02em;
    white-space:nowrap;
    vertical-align:middle;
}

.tm-badge-green{background:#e8f7ee;color:#14853b;}
.tm-badge-blue{background:#eef6ff;color:#2b6cb0;}
.tm-badge-orange{background:#fff4e6;color:#c96a00;}
.tm-badge-red{background:#fdecec;color:#c53030;}
.tm-badge-gray{background:#f3f3f3;color:#666;}


/* ==========================================================
   11 HELPERS
========================================================== */

.tm-center{text-align:center;}
.tm-mb-0{margin-bottom:0!important;}
.tm-mb-20{margin-bottom:20px;}
.tm-mb-30{margin-bottom:30px;}
.tm-mt-20{margin-top:20px;}
.tm-mt-30{margin-top:30px;}
.tm-hidden{display:none;}


/* ==========================================================
   12 FLAVOR ICONS
========================================================== */

.watermelon::after{content:"🍉";}
.strawberry::after{content:"🍓";}
.raspberry::after{content:"🍇";}
.blueberry::after{content:"🫐";}
.cherry::after{content:"🍒";}
.apple::after{content:"🍎";}
.green-apple::after{content:"🍏";}
.peach::after{content:"🍑";}
.mango::after{content:"🥭";}
.pineapple::after{content:"🍍";}
.banana::after{content:"🍌";}
.lemon::after,.lime::after{content:"🍋";}
.orange::after,.grapefruit::after{content:"🍊";}
.grape::after{content:"🍇";}
.apple-peach::after{content:"🍎🍑";}
.apple-kiwi::after{content:"🍎🥝";}
.apple-grape::after{content:"🍎🍇";}
.apple-watermelon::after{content:"🍎🍉";}
.strawberry-kiwi::after{content:"🍓🥝";}
.strawberry-banana::after{content:"🍓🍌";}
.blueberry-raspberry::after{content:"🫐❤️";}
.blueberry-sour-raspberry::after{content:"🫐🍓";}
.mixed-berries::after{content:"🫐🍓";}
.berry-mix::after{content:"🫐🍇";}
.peach-mango::after,.mango-peach::after{content:"🍑🥭";}
.kiwi-passionfruit-guava::after{content:"🥝🥭";}
.tropical::after,.tropical-fruit::after{content:"🥭🍍";}
.pineapple-coconut::after{content:"🍍🥥";}
.cherry-cola::after{content:"🍒🥤";}
.pink-lemonade::after{content:"🍋🥤";}
.cola::after{content:"🥤";}
.energy::after{content:"⚡🥤";}
.mint::after,.spearmint::after{content:"🌿";}
.double-mint::after{content:"🌿🌿";}
.menthol::after{content:"❄️🌿";}
.ice::after{content:"❄️";}
.tobacco::after{content:"🍂";}
.tobacco-vanilla::after{content:"🍂🌼";}
.vanilla::after{content:"🌼";}
.bubblegum::after{content:"🍬";}
.candy::after{content:"🍭";}


/* ==========================================================
   13 RESPONSIVE
========================================================== */

@media(max-width:1200px){
    .tm-product-content,
    .tm-category-content{font-size:15px;}

    .tm-product-content h2,
    .tm-category-content h2{font-size:30px;}

    .tm-section-title{font-size:21px;}
    .tm-usp-grid{grid-template-columns:repeat(4,1fr);}
}

@media(max-width:991px){
    .tm-product-content,
    .tm-category-content{padding:0 10px;}

    .tm-product-content h2,
    .tm-category-content h2{font-size:28px;}

    .tm-section-title{margin:42px 0 18px;font-size:20px;}

    .tm-hero-facts,
    .tm-category-facts{grid-template-columns:repeat(2,minmax(0,1fr));}

    .tm-usp-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
}

@media(max-width:767px){
    .tm-product-content,
    .tm-category-content{padding:0 6px;}

    .tm-product-content h2,
    .tm-category-content h2{
        font-size:24px;
        line-height:1.3;
        margin-bottom:20px;
        padding-bottom:12px;
    }

    .tm-product-content p,
    .tm-category-content p{
        font-size:15px;
        line-height:1.7;
        margin-bottom:16px;
    }

    .tm-section-title{
        margin:38px 0 16px;
        font-size:18px;
        line-height:1.35;
        gap:10px;
    }

    .tm-section-icon{
        flex-basis:30px;
        width:30px;
        height:30px;
        font-size:16px;
    }

    .tm-usp-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
        margin:24px 0 32px;
    }

    .tm-feature-item{
        min-height:170px;
        padding:22px 14px 18px;
    }

    .tm-feature-icon{
        width:54px;
        height:54px;
        font-size:24px;
    }

    .tm-feature-item h4{font-size:17px;}

    .tm-content-card,
    .tm-fazit-card{
        padding:20px 22px;
        margin-top:22px;
        margin-bottom:22px;
    }

    .tm-product-content .tm-tip,
    .tm-product-content .tm-info,
    .tm-product-content .tm-warning,
    .tm-category-content .tm-tip,
    .tm-category-content .tm-info,
    .tm-category-content .tm-warning{
        gap:14px;
        padding:18px;
        margin-top:22px;
        margin-bottom:22px;
    }

    .tm-tip-icon,
    .tm-info-icon,
    .tm-warning-icon{
        width:36px;
        height:36px;
        font-size:18px;
    }

    .tm-product-content .tm-quote,
    .tm-category-content .tm-quote{
        padding:22px 24px 22px 30px;
        font-size:16px;
        margin-top:22px;
        margin-bottom:22px;
    }

    .toggle-block{
        margin:14px 0;
        border-radius:14px;
    }

    .toggle-button{
        padding:16px 18px;
        gap:14px;
        font-size:15px;
    }

    .toggle-button::after{font-size:21px;}

    .toggle-content{
        padding:18px;
        font-size:14px;
        line-height:1.7;
    }

    .tm-list li,
    .tm-list-dot li{
        padding-left:26px;
        font-size:15px;
    }

    .tm-steps li{
        padding-left:50px;
        font-size:15px;
    }

    .tm-steps li::before{
        width:32px;
        height:32px;
        font-size:14px;
    }

    .tm-product-content table.tm-datatable,
    .tm-category-content table.tm-datatable{
        margin-top:22px;
        margin-bottom:22px;
    }

    .tm-product-content table.tm-datatable td,
    .tm-category-content table.tm-datatable td{
        padding:14px 16px !important;
        font-size:14px !important;
    }

    .tm-product-content table.tm-datatable td:first-child,
    .tm-category-content table.tm-datatable td:first-child{width:40% !important;}

    .tm-product-content table.tm-datatable td:last-child,
    .tm-category-content table.tm-datatable td:last-child{width:60% !important;}
}

@media(max-width:520px){
    .tm-hero-facts,
    .tm-category-facts{
        grid-template-columns:1fr;
        gap:10px;
        margin:22px 0 28px;
    }

    .tm-hero-fact,
    .tm-category-fact{
        min-height:64px;
        padding:14px 18px;
    }

    .tm-hero-fact-icon,
    .tm-category-fact-icon{
        flex-basis:34px;
        width:34px;
        height:34px;
        font-size:18px;
    }

    .tm-hero-fact-value,
    .tm-category-fact-value{font-size:16px;}
}

/* ==========================================================
   TM FAQ Card
========================================================== */

.tm-faq-card{
    position:relative;
    overflow:hidden;

    margin:26px 0 0;
    padding:28px 32px;

    background:linear-gradient(180deg,#ffffff,#fffdf9);

    border:1px solid var(--tm-border);
    border-radius:var(--tm-radius);

    box-shadow:0 8px 24px rgba(0,0,0,.045);
}

.tm-faq-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;

    width:5px;
    height:100%;

    background:linear-gradient(
        180deg,
        var(--tm-gold),
        var(--tm-gold-soft),
        var(--tm-gold)
    );
}

.tm-faq-card > *{
    position:relative;
    z-index:1;
}

.tm-faq-card h2,
.tm-faq-card h3{
    margin-top:0;
}

@media(max-width:767px){

    .tm-faq-card{
        padding:22px 20px;
        margin-top:22px;
    }

}