/* ============================================================
   Trattoria Antica — "Quiet luxury" premium theme
   Inspired by the editorial calm of high-end Viennese brand sites:
   paper + bone surfaces, hairline rules instead of shadows, very large
   italic serif headlines with tiny tracked uppercase eyebrows, bronze
   accents, pill buttons that fill on hover, generous vertical rhythm.

   Loaded AFTER style.css (Admin → Settings → "Premium theme" switch), so it
   only overrides — every component keeps working if it is switched off.
   ============================================================ */

:root {
    /* surfaces */
    --paper:     #f9f8f5;
    --bone:      #ece7dc;
    --bone-deep: #e3ddcf;
    --ivory:     var(--paper);
    --cream-50:  var(--bone);
    --cream-100: #f2eee6;
    --cream-200: var(--bone);
    --white:     #ffffff;

    /* ink */
    --ink-900:   #231f20;
    --ink-800:   #2b2627;
    --ink-700:   #3d3738;
    --ink-500:   #6b6466;
    --ink-400:   #8b8486;
    --ink-300:   #b9b3b0;
    --ink-200:   #d9d4ce;
    --ink-100:   #e8e3dc;

    /* accent: bronze replaces gold, deep ink replaces wine for primary UI */
    --bronze:      #9c8b6a;
    --bronze-deep: #6b5c3e;
    --gold-500:    var(--bronze);
    --gold-600:    #8a7a5b;
    --gold-700:    var(--bronze-deep);
    --gold-300:    #c4b596;
    --gold-100:    #ece5d4;
    --wine-800:    var(--ink-900);
    --wine-900:    #1c1819;
    --wine-950:    #141112;
    --wine-700:    #3d3738;
    --wine-500:    #6b6466;
    --wine:        var(--ink-900);

    --line:      rgba(35, 31, 32, .16);
    --line-soft: rgba(35, 31, 32, .09);

    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 30px 60px rgba(35, 31, 32, .12);

    --radius-sm: 2px;
    --radius:    2px;
    --radius-lg: 2px;

    --container: 1360px;
    --ff-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
    --header-h:  96px;

    --ease:       cubic-bezier(.32, .72, 0, 1);
    --ease-soft:  cubic-bezier(.32, .72, 0, 1);
}
@media (max-width: 720px) { :root { --header-h: 72px; } }

/* ---------- base typography ------------------------------------------ */
body {
    background: var(--paper);
    color: var(--ink-900);
    letter-spacing: -.003em;
    line-height: 1.6;
}
h1, h2, h3 {
    font-family: var(--ff-display);
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--ink-900);
}
/* sentence case everywhere: the classic theme shouts some headlines in caps */
h1, h2, h3, .hero__h1, .hero--editorial .hero__h1, .section-head h2, .section-head--editorial h2, .split-cta h2 { text-transform: none; }
h1 { font-size: clamp(3rem, 7.2vw, 6.4rem); line-height: .96; }
h2 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: .98; font-style: italic; }
h3 { font-size: 1.55rem; line-height: 1.18; font-style: italic; }
h4 {
    font-family: var(--ff-body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze-deep);
}
p { color: var(--ink-700); }
.lead { font-size: 1.1rem; line-height: 1.65; color: var(--ink-700); max-width: 44rem; }
a { color: var(--ink-900); }
a:hover { color: var(--bronze-deep); }
::selection { background: var(--ink-900); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink-900); outline-offset: 3px; }

/* thin, calm scrollbar */
html { scrollbar-color: var(--ink-200) transparent; }

/* ---------- eyebrows + section heads --------------------------------- */
.eyebrow, .section__eyebrow, .hero__eyebrow, .groups-hero__eyebrow, .split-cta__eyebrow {
    font-family: var(--ff-body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze-deep);
    gap: .6rem;
}
.eyebrow::before, .section__eyebrow::before, .split-cta__eyebrow::before, .split-cta__eyebrow::after { display: none; }
.section-head {
    text-align: left;
    max-width: 880px;
    margin: 0 0 clamp(2.6rem, 5vw, 4.2rem);
}
.section-head .eyebrow, .section-head .section__eyebrow { justify-content: flex-start; }
.section-head h2 { margin-bottom: 1.2rem; }
.section-head .lead { margin-left: 0; }
/* pages that centre their head keep the calm left alignment on wide screens,
   but stay centred where the layout is a single column (contact, faq, 404) */
.section--tight .container[style*="text-align:center"] .eyebrow { justify-content: center; }

/* ---------- layout rhythm --------------------------------------------- */
.section { padding: clamp(6rem, 11vw, 10rem) 0; background: var(--paper); }
.section--cream { background: var(--bone); }
.section--wine { background: var(--ink-900); color: var(--paper); }
.section--wine h2, .section--wine h3 { color: var(--paper); }
.section--wine p { color: rgba(249, 248, 245, .78); }
.section--tight { padding: clamp(3.5rem, 7vw, 6rem) 0 1.5rem; }
.container { padding: 0 clamp(1.25rem, 4vw, 4rem); }
/* hairline between consecutive paper sections, like a ruled page */
.section + .section:not(.section--cream):not(.section--wine) { border-top: 1px solid var(--line-soft); }

/* ---------- header ----------------------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--line-soft);
    background: rgba(249, 248, 245, .72);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.site-header.is-scrolled { box-shadow: none; }
.site-header--text-dark.is-scrolled { background: rgba(249, 248, 245, .92); border-bottom-color: var(--line-soft); }
.site-header--text-light { background: transparent; border-bottom-color: rgba(255, 255, 255, .25); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header--text-light.is-scrolled { background: rgba(28, 24, 25, .9); border-bottom-color: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header__inner { gap: 2rem; }
.brand__logo { height: 52px; }
.site-header.is-scrolled .brand__logo { height: 44px; }
.brand__wordmark { font-style: italic; font-weight: 400; font-size: 1.6rem; letter-spacing: -.01em; }
.primary-nav__list { gap: 2.2rem; }
.primary-nav a {
    font-family: var(--ff-body);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-900);
    transition: opacity .55s var(--ease);
}
.primary-nav a:hover { color: var(--ink-900); opacity: .6; }
.primary-nav a::after { display: none; }
.site-header--text-light .primary-nav a { color: var(--paper); }
.site-header--text-light .primary-nav a:hover { color: var(--paper); }
.lang-dd__btn {
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    height: 44px;
    padding: 0 .95rem;
}
.lang-dd__menu { border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow-lg); background: var(--paper); }
.nav-toggle span { height: 1px; }

/* ---------- buttons ---------------------------------------------------- */
.btn {
    font-family: var(--ff-body);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 1.6rem;
    height: 48px;
    border-radius: 999px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow: none !important;
    transition: color .55s var(--ease), border-color .55s var(--ease), background-color .55s var(--ease);
}
.btn::after {
    /* fill that rises from the bottom on hover (the "premium" micro-interaction) */
    content: "";
    position: absolute; inset: 0;
    background: var(--hover-fill, var(--ink-900));
    transform: translateY(101%);
    transition: transform .7s cubic-bezier(.76, 0, .24, 1);
    z-index: -1;
}
.btn:hover::after { transform: translateY(0); }
.btn > * { position: relative; }
.btn .arrow { transition: transform .55s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn, .btn--primary { --bg: var(--ink-900); --fg: var(--paper); --bd: var(--ink-900); --hover-fill: var(--bronze-deep); }
.btn:hover, .btn--primary:hover { background: var(--ink-900); color: var(--paper); border-color: var(--bronze-deep); }
.btn--ghost, .btn--outline { --bg: transparent; --fg: var(--ink-900); --bd: var(--ink-900); --hover-fill: var(--ink-900); }
.btn--ghost:hover, .btn--outline:hover { background: transparent; color: var(--paper); border-color: var(--ink-900); }
.btn--cream { --bg: transparent; --fg: var(--paper); --bd: rgba(255, 255, 255, .8); --hover-fill: var(--paper); }
.btn--cream:hover { background: transparent; color: var(--ink-900); border-color: var(--paper); }
.btn--lg { height: 56px; padding: 0 2.1rem; font-size: .8rem; }
.btn--sm { height: 40px; padding: 0 1.1rem; font-size: .68rem; }
.nav-cta, .site-header--text-light .nav-cta {
    --bg: transparent; --fg: var(--ink-900); --bd: var(--ink-900); --hover-fill: var(--ink-900);
    background: transparent; color: var(--ink-900); border-color: var(--ink-900);
}
.site-header--text-light .nav-cta { color: var(--paper); border-color: rgba(255, 255, 255, .8); --hover-fill: var(--paper); }
.nav-cta:hover { background: transparent; color: var(--paper); box-shadow: none; }
.site-header--text-light .nav-cta:hover { color: var(--ink-900); }
.nav-cta::before { display: none; }

/* ---------- hero ------------------------------------------------------- */
.hero { background: var(--paper); padding: clamp(7rem, 14vw, 12rem) 0 clamp(5rem, 10vw, 8rem); }
.hero::before { display: none; }
.hero--has-media {
    min-height: 100svh;
    margin-top: calc(-1 * var(--header-h));
    padding: clamp(10rem, 18vw, 15rem) 0 clamp(6rem, 12vw, 9rem);
    background: var(--ink-900);
}
.hero--has-media .hero__media::after {
    background: linear-gradient(to bottom, rgba(20, 17, 18, .38) 0%, rgba(20, 17, 18, .3) 50%, rgba(20, 17, 18, .62) 100%);
}
.hero h1, .hero__h1 {
    font-style: italic;
    font-weight: 400;
    font-size: clamp(3.2rem, 8.5vw, 7.4rem);
    letter-spacing: -.025em;
    line-height: .94;
    margin-bottom: 1.8rem;
}
.hero__eyebrow { margin-bottom: 2.2rem; color: var(--bronze); letter-spacing: .22em; }
.hero--has-media .hero__eyebrow { color: rgba(249, 248, 245, .78); }
.hero__subtitle, .hero .lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.6; max-width: 40rem; margin-left: auto; margin-right: auto; }
.hero__rule { display: none; }
.hero__actions .btn, .hero .btn { min-width: 200px; }

/* ---------- cards & surfaces ------------------------------------------ */
.card, .tm-card, .pkg-card, .rw, .findus__card, .contact-card, .hours-card, .map-card,
.form-success, .rw-contact, .order-step, .groups-hero__highlights > *, .highlights-grid .card {
    background: var(--bone);
    border: 0;
    border-radius: 2px;
    box-shadow: none !important;
}
.section--cream .card, .section--cream .tm-card, .section--cream .pkg-card, .section--cream .findus__card,
.section--cream .hours-card, .section--cream .rw { background: var(--paper); }
.tm-card:hover, .pkg-card:hover, .menu-card:hover, .bento-tile:hover, .menu-cat:hover, .gallery__item:hover { transform: none; box-shadow: none; }
.pkg-card.is-featured { outline: 1px solid var(--bronze); outline-offset: -1px; }
.pkg-card__badge, .story-photo__badge { background: var(--ink-900); color: var(--paper); border-radius: 999px; letter-spacing: .14em; font-size: .62rem; }
.pkg-card__price-amt { font-family: var(--ff-display); font-style: italic; font-weight: 400; font-size: 2.4rem; }
.pkg-card__price--request .pkg-card__price-per { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-deep); }
.menu-cat, .bento-tile, .gallery__item, .story__image, .story-photo, .menu-card__image, .seasonal-banner__media, .findus__map { border-radius: 2px; }
.menu-cat::after { background: linear-gradient(to top, rgba(20, 17, 18, .82) 0%, rgba(20, 17, 18, .25) 50%, transparent 78%); }
.tm-card__stars .is-on { color: var(--bronze); }

/* big light numerals on highlight / reason cards (careers, groups) */
.highlights-grid, .groups-hero__highlights { counter-reset: premium-card; }
.highlights-grid .card, .groups-hero__highlights > * { counter-increment: premium-card; position: relative; padding-top: 4.4rem !important; }
.highlights-grid .card::before, .groups-hero__highlights > *::before {
    content: "0" counter(premium-card);
    position: absolute;
    top: 1.1rem; left: 1.4rem;
    font-family: var(--ff-display);
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 400;
    color: var(--ink-900);
    letter-spacing: -.02em;
}
.groups-hero__highlights > * { padding-left: 1.4rem !important; padding-right: 1.4rem !important; padding-bottom: 1.4rem !important; border-left: 0; }
/* the cards sit on the dark groups hero but are bone-coloured, so their text
   must be ink (the classic theme used cream text directly on the dark hero) */
.groups-hero__highlights strong { color: var(--ink-900); font-style: italic; font-weight: 400; }
.groups-hero__highlights span { color: var(--ink-700); }
.groups-hero__highlights { border-top: 0; }

/* FAQ: ruled list */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.faq-item__q, .faq-item summary { font-family: var(--ff-display); font-size: 1.35rem; font-style: italic; padding: 1.3rem 0; }
.faq-item__a, .faq-item p { padding: 0 0 1.4rem; max-width: 46rem; }

/* forms */
.rw__input, .form__input, .input, .textarea, .select, .qty-num {
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--paper);
    box-shadow: none;
}
.rw__input:focus, .form__input:focus, .input:focus, .textarea:focus { border-color: var(--ink-900); box-shadow: none; }
.rw__time, .rw__guest, .rw__pill, .rw__cal-cell, .cat-chip, .qty-btn { border-radius: 2px; }
.rw__time.is-on, .rw__guest.is-on, .rw__pill.is-on, .rw__cal-cell.is-selected { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.rw__step { border-radius: 999px; }
.rw__step.is-current { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.rw__step.is-current .rw__step-label, .rw__step.is-current svg { color: var(--paper); }
.rw__submit, .rw__guest-custom-go { border-radius: 999px; }
.rw__holiday-notice { background: var(--bone); border: 0; border-left: 2px solid var(--bronze); border-radius: 0; }

/* ---------- split CTA band / partners / story ---------------------------- */
.split-cta { background: var(--bone); color: var(--ink-900); padding: clamp(6rem, 11vw, 9rem) 0; }
.split-cta::before { background: var(--bronze); width: 48px; }
.split-cta h2, .split-cta h3 { color: var(--ink-900); font-style: italic; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.split-cta p { color: var(--ink-700); }
.split-cta__eyebrow { color: var(--bronze-deep); }
.split-cta__link { color: var(--ink-900); border-bottom: 1px solid var(--ink-900); }
.partners-strip { border-color: var(--line-soft); }
.story__image::before { display: none; }
.story-photo__monogram { font-style: italic; font-weight: 400; }

/* ---------- footer ------------------------------------------------------ */
.site-footer { background: var(--ink-900); color: rgba(249, 248, 245, .72); padding-top: clamp(5rem, 9vw, 7rem); }
.site-footer a { color: rgba(249, 248, 245, .85); }
.site-footer a:hover { color: var(--gold-300); }
.site-footer h4 { color: var(--bronze); font-size: .66rem; letter-spacing: .2em; }
.site-footer__brand { font-style: italic; font-weight: 400; color: var(--paper); }
.site-footer__addr { color: rgba(249, 248, 245, .85); }
.site-footer__addr a { color: var(--paper); border-bottom-color: rgba(156, 139, 106, .5); }
.site-footer__grid { padding-bottom: 4rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.site-footer__bar { background: var(--ink-900); border-top: 0; font-size: .74rem; letter-spacing: .06em; }
.site-footer__bar small, .site-footer__bar a { text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; }
.site-footer__social-link { border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .45rem .95rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.site-footer__social-link:hover { border-color: var(--bronze); color: var(--paper); }

/* homepage category strip: generous editorial tiles that scroll, never a
   row of ten thumbnails squeezed into the container */
.menu-cats__strip,
.menu-cats__strip[class] { grid-auto-columns: minmax(280px, 340px) !important; grid-template-columns: none !important; gap: 1.2rem; }
.menu-cat { aspect-ratio: 4 / 5; }

/* ---------- misc ------------------------------------------------------- */
.bottom-nav { background: rgba(249, 248, 245, .94); border-top: 1px solid var(--line); }
.tag, .tag--allergen { border-radius: 2px; }
.ann { border-radius: 2px; }
.cat-nav { background: rgba(249, 248, 245, .9); border-bottom: 1px solid var(--line-soft); }
.cat-chip.is-active { background: var(--ink-900); color: var(--paper); }
.error-hero { background-color: var(--ink-900); }
.error-hero__o { color: var(--bronze); }

/* reveal animations: slower and softer, editorial */
.reveal { transition-duration: 1.1s; transition-timing-function: var(--ease); }

@media (max-width: 720px) {
    h2 { font-size: clamp(2.2rem, 9vw, 3rem); }
    .hero h1, .hero__h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
    .hero--has-media { min-height: 92svh; }
    .btn { height: 46px; padding: 0 1.3rem; font-size: .72rem; }
    .section { padding: clamp(4rem, 12vw, 6rem) 0; }
}

/* Hero: drop the inset gold frame + corner mark from the classic theme; with
   large italic type it boxed the headline and cut between eyebrow and CTAs. */
.hero--has-media .hero__inner::before,
.hero--has-media .hero__inner::after { display: none; }
/* subtitle needs to stay readable on the dark photo */
.hero--has-media .hero__subtitle { color: rgba(249, 248, 245, .9); }

/* Groups hero highlights: 4 across on desktop, 2×2 on tablets, stacked on phones. */
.groups-hero__highlights { grid-template-columns: 1fr; max-width: 1040px; }
@media (min-width: 640px)  { .groups-hero__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the hero column is narrow, so 2×2 is the comfortable maximum */

/* Reservation wizard stepper: not-yet-reached steps are outlined, readable. */
.rw__step:not(.is-current) {
    background: transparent !important;
    color: var(--ink-700) !important;
    border: 1px solid var(--line) !important;
    opacity: 1 !important;
}
.rw__step:disabled:not(.is-current) { color: var(--ink-400) !important; }
.rw__step:not(.is-current) svg { color: currentColor; }

/* FAQ: answers keep the card's side padding; questions readable size. */
.faq-list .faq-item { background: var(--paper); padding: 0; }
.section--cream .faq-list .faq-item, .faq-section .faq-list .faq-item { background: var(--paper); }
.faq-list .faq-item summary,
.faq-list .faq-item .faq-item__q { font-size: 1.22rem !important; padding: 1.15rem 1.3rem !important; line-height: 1.35; }
.faq-list .faq-item .faq-item__a,
.faq-list .faq-item > p { padding: 0 1.3rem 1.3rem !important; font-size: 1rem; line-height: 1.7; }
.faq-list .faq-item + .faq-item { margin-top: .6rem; }
.faq-list { border-top: 0; }

/* Mobile drawer: stacked list without the desktop gap; large italic serif
   links like an editorial index (everything fits one screen). */
@media (max-width: 720px) {
    .primary-nav__list { gap: 0 !important; }
    .primary-nav__list a,
    .site-header--text-light .primary-nav__list a,
    .site-header--text-dark .primary-nav__list a {
        padding: .8rem 0 !important;
        font-family: var(--ff-display) !important;
        font-style: italic !important;
        font-weight: 400 !important;
        font-size: 1.9rem !important;
        letter-spacing: -.01em !important;
        text-transform: none !important;
        opacity: 1;
    }
    .primary-nav { background: var(--paper) !important; }
}

/* Tablet header (721–1180px): the full nav + language + Reserve button did not
   fit; links wrapped ("Über / uns") and the button was pushed off-screen. */
@media (min-width: 721px) and (max-width: 1180px) {
    .site-header__inner { gap: 1rem; }
    .primary-nav__list { gap: 1.1rem; }
    .primary-nav a { font-size: .7rem; letter-spacing: .08em; white-space: nowrap; }
    .brand__logo { height: 44px; }
    .lang-dd__btn { height: 40px; padding: 0 .7rem; }
    .nav-cta { height: 40px; padding: 0 1rem; font-size: .68rem; }
}
@media (min-width: 721px) and (max-width: 900px) {
    .nav-cta { display: none !important; }   /* "Kontakt" + hero CTA cover it */
}

/* ==========================================================================
   Inner-page heads (menu, about, contact, gallery, careers, FAQ …):
   the same editorial language as the homepage — left-aligned, very large
   title, brand line instead of an eyebrow that only repeated the title,
   hairline underneath.
   ========================================================================== */
main > section.section--tight:first-of-type,
main > section.menu-intro:first-of-type {
    padding: clamp(4.5rem, 10vw, 8.5rem) 0 clamp(2.4rem, 5vw, 4rem) !important;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    text-align: left;
}
main > section.section--tight:first-of-type > .container,
main > section.menu-intro:first-of-type > .container {
    text-align: left !important;
    max-width: var(--container) !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
main > section.section--tight:first-of-type > .container::before,
main > section.menu-intro:first-of-type > .container::before {
    content: "Trattoria Antica \2014  Wien IX";
    font: 500 .74rem/1.2 var(--ff-body);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--bronze-deep);
    margin-bottom: 1.6rem;
}
main > section.section--tight:first-of-type .eyebrow,
main > section.section--tight:first-of-type .section__eyebrow,
main > section.menu-intro:first-of-type .eyebrow { display: none !important; }
main > section.section--tight:first-of-type h1,
main > section.menu-intro:first-of-type h1 {
    font-family: var(--ff-display);
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: clamp(3.2rem, 9vw, 9rem) !important;
    line-height: .9 !important;
    letter-spacing: -.035em !important;
    margin: 0 0 1.6rem !important;
    max-width: 14ch;
    text-wrap: balance;
}
main > section.section--tight:first-of-type .lead,
main > section.menu-intro:first-of-type .lead {
    margin: 0 !important;
    max-width: 38rem;
    font-size: clamp(1.02rem, 1.3vw, 1.18rem);
    color: var(--ink-700);
}
@media (max-width: 720px) {
    main > section.section--tight:first-of-type h1,
    main > section.menu-intro:first-of-type h1 { font-size: clamp(2.8rem, 13vw, 4.4rem) !important; }
}