/*
 Theme Name:   Joanna Migala
 Theme URI:    https://joanna-migala.de
 Description:  Child-Theme für Flatsome – Hellseherin & Medium
 Author:       Joanna Migala
 Author URI:   https://joanna-migala.de
 Template:     flatsome
 Version:      3.1.0
 Text Domain:  joanna-migala
*/

/* ══════════════════════════════════════════════════════════════
   JOANNA MIGALA v3.1.0 – Konsolidiert
   
   DREI CSS-SYSTEME – KLARE TRENNUNG:
   
   System 1: Flatsome Customizer (Theme-Mods in DB)
   → Autorität für: body-farben, fonts, nav-basis, dropdown-farben,
     footer-farben, button-basis, top-bar, header-layout, logo
   → Diese Datei wiederholt KEINE Customizer-Werte
   
   System 2: Diese style.css
   → Nur was der Customizer NICHT kann: Glaseffekt, Gradient,
     jm-* Klassen, WooCommerce verstecken, Formulare, Hover
   → !important nur wo UX Builder Inline-Styles überschrieben werden
   
   System 3: UX Builder Shortcodes
   → Nutzen class="jm-..." statt font_size/text_color Parameter
   → Generieren dadurch keine konkurrierenden <style>-Blöcke
   
   KLASSEN-ÜBERSICHT:
   .jm-overline / .jm-overline-hero    Goldene Labels
   .jm-heading-xl / .jm-heading-xxl    Überschriften
   .jm-muted / .jm-light               Textfarben
   .jm-card / .jm-card-featured        Karten mit Hover
   .jm-badge                           "Beliebt" Badge
   .jm-price / .jm-price-label / .jm-price-desc  Preisanzeige
   .jm-blockquote                      Gold-Zitat
   .jm-contact-info                    Kontaktlinks
   .jm-service-icon                    Emoji-Icons
   .jm-list                            Aufzählung mit ✦
   ══════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Raleway:wght@300;400;500;600&display=swap");

:root {
    --jm-gold: #c5a45a;
    --jm-gold-light: #d4b96a;
    --jm-gold-glow: rgba(197,164,90,0.25);
    --jm-dark: #1a1a1f;
    --jm-dark-card: #222228;
    --jm-dark-soft: #2a2a32;
    --jm-cream: #f5f0e8;
    --jm-text: #d4cfc5;
    --jm-muted: #9a9590;
}

html { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════
   1. HEADER – Erweiterungen über Customizer hinaus
   Customizer liefert: header_bg, header_color, header_height,
   header_sticky, logo_width, nav_hover_effect, nav_hover_color
   Wir ergänzen: Glaseffekt, Sticky-Shadow, Transparent-Overrides
   ═══════════════════════════════════════════ */

.header-wrapper, .header-main, .header-bg {
    background: rgba(26,26,31,0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(197,164,90,0.15) !important;
}
.stuck .header-main, .stuck .header-wrapper {
    background: rgba(26,26,31,0.98) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.4) !important;
}
.transparent .header-wrapper { background: transparent !important; }
.transparent.stuck .header-wrapper { background: rgba(26,26,31,0.95) !important; }

/* ═══════════════════════════════════════════
   2. NAVIGATION – Nur Hover/Active-States + Dropdown-Hover
   Customizer liefert: type_nav (font, size, spacing, color),
   nav_hover_color, dropdown_bg, dropdown_text, dropdown_border_color
   Wir ergänzen: Active-States, Dropdown-Hover-Effekt, Box-Shadow
   ═══════════════════════════════════════════ */

.nav > li > a:hover,
.nav > li.active > a,
.nav > li.current > a,
.nav > li.current-menu-item > a,
.nav > li.current-menu-ancestor > a {
    color: var(--jm-gold) !important;
}

.nav-dropdown {
    box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important;
}
.nav-dropdown a:hover {
    color: var(--jm-gold) !important;
    background: rgba(197,164,90,0.08) !important;
}

/* ═══════════════════════════════════════════
   3. WOOCOMMERCE VERSTECKEN
   Customizer kann das nicht – nur CSS
   ═══════════════════════════════════════════ */

.header-cart, .header-cart-link, .cart-icon, .header-cart-icon,
.nav-icon.has-cart-icon, .header-wishlist, .wishlist-icon,
.header-account, .account-icon, .header-newsletter, .newsletter-icon,
.header-search-form, .header-search-dropdown,
.header-button-1, .header-button-2,
[data-open="lightbox"].header-button,
a[href*="/my-account/"], a[href*="/cart/"]:not(.button),
a[href*="/shop/"]:not(.button), .woocommerce-mini-cart,
.widget_shopping_cart, li.menu-item a[href*="my-account"],
li.menu-item a[href*="/cart"] { display: none !important; }
.header-contact ~ .header-contact { display: none !important; }
.payment-icons, .footer-payment-icons, .payment-icon-list { display: none !important; }
.widget_archive, .widget_categories, .widget_meta, .widget_recent_entries { display: none !important; }

/* ═══════════════════════════════════════════
   4. MOBILE MENU – Dark Styling
   Customizer liefert: mobile_header_bg, mobile_header_color
   Wir ergänzen: Off-Canvas Farben, Hamburger-Icon Gold
   ═══════════════════════════════════════════ */

.off-canvas-left, .off-canvas-right, #mobile-menu, .mobile-sidebar-menu {
    background: var(--jm-dark-card) !important;
}
.off-canvas-left a, #mobile-menu a, .mobile-sidebar-menu a {
    color: var(--jm-text) !important;
    border-color: rgba(197,164,90,0.1) !important;
}
.off-canvas-left a:hover, .mobile-sidebar-menu .active > a {
    color: var(--jm-gold) !important;
}
.nav-icon .navicon, .nav-icon .navicon::before, .nav-icon .navicon::after {
    background: var(--jm-gold) !important;
}
.mfp-bg { background: rgba(26,26,31,0.95) !important; }

/* ═══════════════════════════════════════════
   5. BUTTONS – Gradient & Shadow Erweiterungen
   Customizer liefert: button_radius=0, button_text_transform=uppercase,
   button_weight=600, button_letter_spacing=2, button_shadow=0
   Wir ergänzen: Gradient, Box-Shadow, Hover-Lift, Outline-Variante
   ═══════════════════════════════════════════ */

.button.primary, a.button.primary, button.button.primary,
input[type="submit"], .button.shade, a.button.shade {
    background: linear-gradient(135deg, var(--jm-gold), var(--jm-gold-light)) !important;
    color: var(--jm-dark) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(197,164,90,0.3) !important;
    transition: all 0.4s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.button.primary:hover, a.button.primary:hover,
.button.shade:hover, a.button.shade:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(197,164,90,0.4) !important;
}

.button.outline, a.button.outline, .button.secondary, a.button.secondary {
    border: 1px solid rgba(197,164,90,0.4) !important;
    color: var(--jm-gold) !important;
    background: transparent !important;
    transition: all 0.4s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.button.outline:hover, a.button.outline:hover {
    background: rgba(197,164,90,0.08) !important;
    border-color: var(--jm-gold) !important;
}

.button.expand, a.button.expand {
    width: 100% !important;
    justify-content: center !important;
}

/* ═══════════════════════════════════════════
   6. LINKS
   Customizer liefert: color_primary für generelle Links
   Wir ergänzen: Hover-Variante (heller)
   ═══════════════════════════════════════════ */

a:hover { color: var(--jm-gold-light); }

/* ═══════════════════════════════════════════
   7. JM-KLASSEN – Komponenten-System
   Hier lebt alles was der Customizer nicht kennt.
   Eine Definition pro Klasse, keine Doppelungen.
   ═══════════════════════════════════════════ */

/* ── Overlines ── */
.jm-overline, .jm-overline p {
    font-size: 1.0rem !important;
    letter-spacing: 3.5px !important;
    text-transform: uppercase !important;
    color: var(--jm-gold) !important;
    font-family: "Raleway", sans-serif !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.jm-overline-hero, .jm-overline-hero p {
    font-size: 1.1rem !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    color: var(--jm-gold) !important;
    font-family: "Raleway", sans-serif !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

/* ── Headings ── */
.jm-heading-xl, .jm-heading-xl h2 {
    font-size: 2.4rem !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    color: var(--jm-cream) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.jm-heading-xxl, .jm-heading-xxl h1 {
    font-size: 3.2rem !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    color: var(--jm-cream) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
}

/* ── Textfarben ── */
.jm-muted, .jm-muted p { color: var(--jm-muted) !important; line-height: 1.85 !important; }
.jm-light, .jm-light p { color: var(--jm-text) !important; line-height: 1.85 !important; }

/* ── Cards (EINE Definition, inkl. Hover + Goldlinie) ── */
.jm-card {
    background: var(--jm-dark-card) !important;
    border: 1px solid rgba(197,164,90,0.08);
    text-align: center;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}
.jm-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--jm-gold), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.jm-card:hover {
    transform: translateY(-6px);
    border-color: rgba(197,164,90,0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.jm-card:hover::before { opacity: 1; }
.jm-card h3 { color: var(--jm-cream) !important; font-size: 1.35rem; margin-bottom: 14px; }
.jm-card p { color: var(--jm-muted); font-size: 0.85rem; line-height: 1.7; margin-bottom: 10px; }
.jm-card a { color: var(--jm-cream) !important; text-decoration: none; }
.jm-card a:hover { color: var(--jm-gold) !important; }

/* ── Card Featured ── */
.jm-card-featured {
    background: var(--jm-dark-card) !important;
    border: 1px solid rgba(197,164,90,0.3) !important;
    box-shadow: 0 0 50px rgba(197,164,90,0.08);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}
.jm-card-featured:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 60px rgba(197,164,90,0.12);
}
.jm-card-featured h3 { color: var(--jm-cream) !important; font-size: 1.35rem; margin-bottom: 14px; }
.jm-card-featured p { color: var(--jm-muted); font-size: 0.85rem; line-height: 1.7; margin-bottom: 10px; }
.jm-card-featured a { color: var(--jm-cream) !important; text-decoration: none; }
.jm-card-featured a:hover { color: var(--jm-gold) !important; }

/* ── Badge ── */
.jm-badge {
    position: absolute;
    top: 0; right: 30px;
    background: var(--jm-gold);
    color: var(--jm-dark);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Service Icons ── */
.jm-service-icon {
    font-size: 2.5rem !important;
    margin-bottom: 15px !important;
    display: block;
    text-align: center;
}

/* ── Preise ── */
.jm-price {
    font-size: 2.6rem;
    color: var(--jm-gold) !important;
    font-weight: 600;
    font-family: "Cormorant Garamond", serif;
    margin: 15px 0 8px;
}
.jm-price-label { color: var(--jm-muted); font-size: 0.78rem; margin-bottom: 15px; }
.jm-price-desc { color: var(--jm-muted); font-size: 0.85rem; margin-top: 15px; line-height: 1.7; }

/* ── Blockquote ── */
.jm-blockquote, .jm-blockquote blockquote {
    border-left: 2px solid var(--jm-gold) !important;
    padding: 15px 0 15px 20px !important;
    margin: 15px 0 !important;
    font-style: italic !important;
    font-family: "Cormorant Garamond", serif !important;
    color: var(--jm-gold) !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
}

/* ── Kontaktinfo ── */
.jm-contact-info a {
    color: var(--jm-gold) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(197,164,90,0.3);
    transition: border-color 0.3s;
}
.jm-contact-info a:hover { border-color: var(--jm-gold); }
.jm-contact-info p { margin-bottom: 8px; }

/* ── Liste ── */
.jm-list, .jm-list ul { color: var(--jm-text); list-style: none; padding-left: 0; }
.jm-list li { padding: 8px 0 8px 22px; position: relative; color: var(--jm-text); }
.jm-list li::before { content: "✦"; position: absolute; left: 0; color: var(--jm-gold); font-size: 0.65rem; top: 10px; }
.jm-list strong { color: var(--jm-cream); }

/* ═══════════════════════════════════════════
   8. SPACING – Zwischen Sektionen
   ═══════════════════════════════════════════ */

.section + .section { margin-top: 0 !important; }
.row + .row { margin-top: 0 !important; }

/* ═══════════════════════════════════════════
   9. FORMULARE / CF7
   Customizer kennt keine Formular-Styles
   ═══════════════════════════════════════════ */

input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], select, textarea,
.wpcf7 input, .wpcf7 select, .wpcf7 textarea {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(197,164,90,0.15) !important;
    color: var(--jm-text) !important;
    font-family: "Raleway", sans-serif !important;
    padding: 13px 16px !important;
    border-radius: 0 !important;
    transition: border-color 0.3s !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--jm-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--jm-gold-glow) !important;
}
select option { background: var(--jm-dark-card); color: var(--jm-text); }
.wpcf7 label {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--jm-muted) !important;
}
.wpcf7 select, form select {
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 36px 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c5a45a' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* ═══════════════════════════════════════════
   10. BLOG
   Customizer liefert: blog_layout, blog_columns, blog_header_bg etc.
   Wir ergänzen: Dark Card Styling, Kategorie-Gold
   ═══════════════════════════════════════════ */

.post-item, .blog-post {
    background: var(--jm-dark-card);
    border: 1px solid rgba(197,164,90,0.06);
}
.post-date, .post-meta { color: var(--jm-muted) !important; }
.entry-category a { color: var(--jm-gold) !important; }

/* ═══════════════════════════════════════════
   11. MISC – Scrollbar, Selection, Back-to-Top
   ═══════════════════════════════════════════ */

.back-to-top {
    background: var(--jm-dark-card) !important;
    color: var(--jm-gold) !important;
    border: 1px solid rgba(197,164,90,0.2) !important;
    border-radius: 50% !important;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--jm-dark); }
::-webkit-scrollbar-thumb { background: var(--jm-gold); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--jm-gold) var(--jm-dark); }
::selection { background: rgba(197,164,90,0.3); color: var(--jm-cream); }

/* ═══════════════════════════════════════════
   12. RESPONSIVE – EIN Block für alles
   ═══════════════════════════════════════════ */

@media (max-width: 849px) {
    .header-wrapper { backdrop-filter: blur(15px); }
    .jm-overline, .jm-overline p { font-size: 0.85rem !important; letter-spacing: 2.5px !important; }
    .jm-overline-hero, .jm-overline-hero p { font-size: 0.95rem !important; letter-spacing: 3px !important; }
    .jm-heading-xxl, .jm-heading-xxl h1 { font-size: 2.2rem !important; }
    .jm-heading-xl, .jm-heading-xl h2 { font-size: 1.8rem !important; }
    .jm-card, .jm-card-featured {  }
    .jm-card:hover, .jm-card-featured:hover { transform: none; }
    .jm-price { font-size: 2rem; }
    .section + .section { margin-top: 0 !important; }
}

/* ═══ CARDS-REFACTOR-v3.2.0 ═══ */

/*
 * jm-card / jm-card-featured sitzt auf dem [col] Element.
 * Flatsome rendert: <div class="col jm-card"><div class="col-inner">
 * Visuelles Styling geht auf > .col-inner.
 * Spacing (padding/margin) wird im UX Builder gesteuert.
 */

/* ── Card Base: visuelles Styling auf col-inner ── */
.jm-card > .col-inner {
    background: var(--jm-dark-card) !important;
    border: 1px solid rgba(197,164,90,0.08);
    text-align: center;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

/* Goldene Oberlinie (erscheint bei Hover) */
.jm-card > .col-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--jm-gold), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Hover auf dem äußeren col, Effekt auf col-inner */
.jm-card:hover > .col-inner {
    transform: translateY(-6px);
    border-color: rgba(197,164,90,0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.jm-card:hover > .col-inner::before {
    opacity: 1;
}

/* Card Inhalte */
.jm-card h3 {
    color: var(--jm-cream) !important;
    font-size: 1.35rem;
}
.jm-card p {
    color: var(--jm-muted);
    font-size: 0.85rem;
    line-height: 1.7;
}
.jm-card a {
    color: var(--jm-cream) !important;
    text-decoration: none;
}
.jm-card a:hover {
    color: var(--jm-gold) !important;
}

/* ── Card Featured ── */
.jm-card-featured > .col-inner {
    background: var(--jm-dark-card) !important;
    border: 1px solid rgba(197,164,90,0.3) !important;
    box-shadow: 0 0 50px rgba(197,164,90,0.08);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}
.jm-card-featured:hover > .col-inner {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 60px rgba(197,164,90,0.12);
}
.jm-card-featured h3 {
    color: var(--jm-cream) !important;
    font-size: 1.35rem;
}
.jm-card-featured p {
    color: var(--jm-muted);
    font-size: 0.85rem;
    line-height: 1.7;
}
.jm-card-featured a {
    color: var(--jm-cream) !important;
    text-decoration: none;
}
.jm-card-featured a:hover {
    color: var(--jm-gold) !important;
}

/* ── Badge (position: absolute braucht relative Parent) ── */
.jm-badge {
    position: absolute;
    top: 0; right: 30px;
    background: var(--jm-gold);
    color: var(--jm-dark);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 16px;
    z-index: 2;
}

/* ── Service Icons ── */
.jm-service-icon {
    font-size: 2.5rem !important;
    display: block;
    text-align: center;
}

/* ── Preise ── */
.jm-price {
    font-size: 2.6rem;
    color: var(--jm-gold) !important;
    font-weight: 600;
    font-family: "Cormorant Garamond", serif;
}
.jm-price-label {
    color: var(--jm-muted);
    font-size: 0.78rem;
}
.jm-price-desc {
    color: var(--jm-muted);
    font-size: 0.85rem;
    line-height: 1.7;
}

/* ── Rows: nahtlos ── */
.row + .row {
    margin-top: 0 !important;
}

.section + .section {
    margin-top: 0 !important;
}

/* ── Blockquote ── */
.jm-blockquote, .jm-blockquote blockquote {
    border-left: 2px solid var(--jm-gold) !important;
    padding: 15px 0 15px 20px !important;
    margin: 15px 0 !important;
    font-style: italic !important;
    font-family: "Cormorant Garamond", serif !important;
    color: var(--jm-gold) !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
}

/* ── Kontaktinfo ── */
.jm-contact-info a {
    color: var(--jm-gold) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(197,164,90,0.3);
    transition: border-color 0.3s;
}
.jm-contact-info a:hover { border-color: var(--jm-gold); }
.jm-contact-info p { margin-bottom: 8px; }

/* ── Listen ── */
.jm-list, .jm-list ul { color: var(--jm-text); list-style: none; padding-left: 0; }
.jm-list li { padding: 8px 0 8px 22px; position: relative; color: var(--jm-text); }
.jm-list li::before { content: "✦"; position: absolute; left: 0; color: var(--jm-gold); font-size: 0.65rem; top: 10px; }
.jm-list strong { color: var(--jm-cream); }

/* ── Formulare ── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], select, textarea,
.wpcf7 input, .wpcf7 select, .wpcf7 textarea {
    padding: 13px 16px !important;
}
.wpcf7 select, form select {
    padding: 12px 36px 12px 16px !important;
}

/* ── Footer ── */
.footer-wrapper, #footer {
    border-top: 1px solid rgba(197,164,90,0.1) !important;
}
.footer-wrapper, .footer, .absolute-footer,
.footer-secondary, #footer, .footer-1, .footer-2 {
    background: var(--jm-dark) !important;
    color: var(--jm-muted) !important;
}
.footer p, .footer span, .absolute-footer p, .absolute-footer span {
    color: var(--jm-muted) !important;
}
.absolute-footer, .absolute-footer p, .absolute-footer span {
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
}
.absolute-footer { border-top: none !important; }
.footer a, .absolute-footer a, #footer a {
    color: var(--jm-muted) !important;
    text-decoration: none !important;
    transition: color 0.3s !important;
}
.footer a:hover, .absolute-footer a:hover, #footer a:hover {
    color: var(--jm-gold) !important;
}
.footer .menu a, .footer-nav a, .absolute-footer .menu a {
    font-size: 0.78rem !important;
    letter-spacing: 0.05em !important;
}
.footer .widget-title, #footer .widget-title {
    color: var(--jm-cream) !important;
    font-family: "Cormorant Garamond", serif !important;
}
.payment-icons, .footer-payment-icons, .payment-icon-list { display: none !important; }
.footer .widget_archive, .footer .widget_categories,
.footer .widget_meta, .footer .widget_recent_entries { display: none !important; }

/* ── Responsive ── */
@media (max-width: 849px) {
    .jm-card:hover > .col-inner,
    .jm-card-featured:hover > .col-inner {
        transform: none;
    }
    .jm-price { font-size: 2rem; }
}

/* ═══ END CARDS-REFACTOR-v3.2.0 ═══ */