.elementor-462 .elementor-element.elementor-element-3c144544{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-41871d1e *//* ================================================
   Ravion Battery Product Page — Additional CSS
   Paste this entire file into:
   Appearance → Customize → Additional CSS
   ================================================ */

:root {
      --paper: #f4ede0; --paper-2: #ebe2cf; --paper-3: #e2d9c5;
      --ink: #0e0d0b; --ink-2: #2a2820; --ink-3: #3d3a30;
      --muted: #6e6657; --muted-2: #8a8070;
      --accent: #ff5b1f; --accent-2: #ffb347; --accent-bg: rgba(255,91,31,0.08);
      --success: #1a7a4a; --success-bg: rgba(26,122,74,0.08);
      --line: rgba(14,13,11,0.1); --line-med: rgba(14,13,11,0.15);
      --display: 'Fraunces', Georgia, serif;
      --body: 'Inter', system-ui, sans-serif;
      --mono: 'JetBrains Mono', monospace;
      --radius: 20px; --radius-sm: 12px; --radius-xs: 8px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--body);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }

    /* ─── WRAPPER ─── */
    .rav-product { max-width: 1240px; margin: 0 auto; padding: 48px 24px 120px; }

    /* ─── CRUMBS ─── */
    .rav-crumbs {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 40px;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .rav-crumbs a:hover { color: var(--accent); }
    .rav-crumbs span { color: var(--ink-3); }
    .rav-crumbs-sep { opacity: 0.35; }

    /* ─── TOP GRID ─── */
    .rav-top { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

    /* ─── GALLERY ─── */
    .rav-gallery { position: relative; }
    .rav-gallery-main {
      position: relative; border-radius: var(--radius); overflow: hidden;
      background: var(--ink); aspect-ratio: 1/1;
    }
    .rav-gallery-main img {
      width: 100%; height: 100%; object-fit: cover;
      filter: contrast(1.04) saturate(1.06);
      transition: transform 0.6s ease;
    }
    .rav-gallery-main:hover img { transform: scale(1.03); }
    .rav-gallery-badge {
      position: absolute; top: 20px; left: 20px;
      background: var(--accent); color: var(--ink);
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
      text-transform: uppercase; padding: 8px 14px; border-radius: 100px;
      font-weight: 500;
    }
    .rav-gallery-tag {
      position: absolute; bottom: 20px; left: 20px; right: 20px;
      background: rgba(14,13,11,0.80); backdrop-filter: blur(12px);
      color: var(--paper); padding: 14px 18px; border-radius: var(--radius-sm);
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
      text-transform: uppercase; display: flex; justify-content: space-between;
      align-items: center; border: 1px solid rgba(244,237,224,0.12);
    }
    .rav-gallery-tag b { color: var(--accent-2); font-weight: 500; }
    .rav-thumbs {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px;
    }
    .rav-thumb {
      border-radius: var(--radius-xs); overflow: hidden; aspect-ratio: 1/1;
      border: 2px solid transparent; cursor: pointer; transition: border-color 0.2s ease;
    }
    .rav-thumb.active { border-color: var(--accent); }
    .rav-thumb img { width: 100%; height: 100%; object-fit: cover; }

    /* ─── INFO PANEL ─── */
    .rav-info { position: sticky; top: 24px; }
    .rav-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
    }
    .rav-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--muted); }
    .rav-title {
      font-family: var(--display); font-weight: 800;
      font-size: clamp(36px, 4vw, 52px); line-height: 1.0;
      letter-spacing: -0.03em; margin-bottom: 10px;
    }
    .rav-title em { font-style: italic; font-weight: 400; color: var(--accent); }
    .rav-subtitle {
      font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 24px;
    }

    /* Rating */
    .rav-rating {
      display: flex; align-items: center; gap: 10px; margin-bottom: 28px;
    }
    .rav-stars { color: var(--accent); font-size: 15px; letter-spacing: 1px; }
    .rav-rating-text { font-size: 13px; color: var(--muted); font-family: var(--mono); }
    .rav-rating-text a { color: var(--accent); text-decoration: underline; }

    /* Price */
    .rav-price-block { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
    .rav-price {
      font-family: var(--display); font-weight: 800; font-size: 44px;
      line-height: 1; letter-spacing: -0.03em; margin-bottom: 6px;
    }
    .rav-price-note { font-size: 13px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.1em; }

    /* Trust badges */
    .rav-trust {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
      margin-bottom: 28px;
    }
    .rav-trust-item {
      background: var(--paper-2); border-radius: var(--radius-xs);
      padding: 12px 10px; text-align: center;
      border: 1px solid var(--line);
    }
    .rav-trust-icon { font-size: 20px; margin-bottom: 4px; }
    .rav-trust-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }

    /* CTA */
    .rav-cta-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 18px 28px; border-radius: 100px; font-weight: 600; font-size: 16px;
      letter-spacing: 0.01em; cursor: pointer; border: 1px solid transparent;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      font-family: var(--body); width: 100%;
    }
    .btn-primary { background: var(--ink); color: var(--paper); }
    .btn-primary:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,91,31,0.3); }
    .btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
    .btn-ghost:hover { background: var(--ink); color: var(--paper); }
    .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

    /* Shipping note */
    .rav-ship-note {
      display: flex; align-items: center; gap: 10px;
      background: var(--success-bg); border: 1px solid rgba(26,122,74,0.2);
      border-radius: var(--radius-xs); padding: 12px 16px; margin-bottom: 28px;
      font-size: 13px; color: var(--success); font-family: var(--mono);
      letter-spacing: 0.08em;
    }
    .rav-ship-note svg { flex-shrink: 0; }

    /* Key specs strip */
    .rav-specs-strip {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    }
    .rav-spec-pill {
      background: var(--paper-2); border-radius: var(--radius-xs);
      padding: 14px 16px; border: 1px solid var(--line);
      display: flex; align-items: center; gap: 12px;
    }
    .rav-spec-icon { font-size: 18px; flex-shrink: 0; }
    .rav-spec-val { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1; }
    .rav-spec-key { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

    /* ─── SECTION SHARED ─── */
    .rav-section { padding: 80px 0; border-top: 1px solid var(--line); }
    .rav-section-label {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--muted);
      display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px;
    }
    .rav-section-label::before { content: ''; width: 20px; height: 1px; background: currentColor; }
    .rav-section-title {
      font-family: var(--display); font-weight: 800;
      font-size: clamp(30px, 4vw, 48px); line-height: 1.05;
      letter-spacing: -0.025em; margin-bottom: 16px;
    }
    .rav-section-title em { font-style: italic; font-weight: 400; color: var(--accent); }
    .rav-section-lede { font-size: 17px; color: var(--muted); max-width: 58ch; line-height: 1.65; margin-bottom: 48px; }

    /* ─── FEATURES ─── */
    .rav-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .rav-feature {
      background: var(--paper-2); border-radius: var(--radius);
      padding: 32px 28px; border: 1px solid var(--line);
      transition: transform 0.3s ease, border-color 0.3s ease;
    }
    .rav-feature:hover { transform: translateY(-5px); border-color: var(--accent); }
    .rav-feature-icon {
      width: 48px; height: 48px; background: var(--ink); color: var(--paper);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 22px; margin-bottom: 20px;
    }
    .rav-feature h3 {
      font-family: var(--display); font-weight: 700; font-size: 22px;
      letter-spacing: -0.015em; margin-bottom: 10px; line-height: 1.15;
    }
    .rav-feature p { font-size: 14px; color: var(--muted); line-height: 1.65; }

    /* ─── SPECS TABLE ─── */
    .rav-specs-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
    .rav-specs-table tr { border-bottom: 1px solid var(--line); }
    .rav-specs-table tr:last-child { border-bottom: none; }
    .rav-specs-table td { padding: 16px 0; vertical-align: top; }
    .rav-specs-table td:first-child {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--muted); width: 200px; padding-right: 24px;
      padding-top: 18px;
    }
    .rav-specs-table td:last-child {
      font-family: var(--display); font-weight: 700; font-size: 20px;
      letter-spacing: -0.01em; color: var(--ink-2);
    }
    .rav-specs-table td:last-child small {
      display: block; font-family: var(--body); font-size: 13px;
      font-weight: 400; color: var(--muted); margin-top: 3px;
      letter-spacing: 0;
    }
    .rav-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }

    /* ─── USE CASES ─── */
    .rav-use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .rav-use-card {
      background: var(--ink); border-radius: var(--radius);
      padding: 28px 24px; color: var(--paper);
      border: 1px solid rgba(244,237,224,0.08);
      transition: transform 0.3s ease;
    }
    .rav-use-card:hover { transform: translateY(-4px); }
    .rav-use-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 16px; }
    .rav-use-card h3 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 10px; }
    .rav-use-card p { font-size: 14px; color: rgba(244,237,224,0.7); line-height: 1.6; }
    .rav-use-icon { font-size: 28px; margin-bottom: 18px; }

    /* ─── IN THE BOX ─── */
    .rav-box-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .rav-box-item {
      display: flex; align-items: flex-start; gap: 16px;
      background: var(--paper-2); border-radius: var(--radius-sm);
      padding: 22px 20px; border: 1px solid var(--line);
    }
    .rav-box-num {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
      color: var(--accent); background: var(--accent-bg);
      width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-weight: 500;
    }
    .rav-box-item h4 { font-family: var(--display); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
    .rav-box-item p { font-size: 13px; color: var(--muted); line-height: 1.5; }

    /* ─── NOTE BANNER ─── */
    .rav-note {
      background: var(--accent-bg); border: 1px solid rgba(255,91,31,0.2);
      border-radius: var(--radius-sm); padding: 18px 22px;
      display: flex; gap: 14px; align-items: flex-start; margin-top: 16px;
    }
    .rav-note-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
    .rav-note p { font-size: 14px; color: var(--ink-3); line-height: 1.6; }
    .rav-note strong { color: var(--ink); }

    /* ─── FAQ ─── */
    .rav-faq-list { margin-top: 8px; }
    details.rav-faq {
      border-bottom: 1px solid var(--line); padding: 22px 0; cursor: pointer;
    }
    details.rav-faq summary {
      font-family: var(--display); font-weight: 700; font-size: 20px;
      letter-spacing: -0.015em; list-style: none;
      display: flex; justify-content: space-between; align-items: center; gap: 20px;
    }
    details.rav-faq summary::-webkit-details-marker { display: none; }
    details.rav-faq summary::after {
      content: '+'; font-family: var(--mono); font-size: 26px; font-weight: 400;
      color: var(--accent); transition: transform 0.3s ease; flex-shrink: 0;
    }
    details[open].rav-faq summary::after { transform: rotate(45deg); }
    details.rav-faq .faq-body {
      margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.7;
      max-width: 64ch; padding-bottom: 4px;
    }

    /* ─── GUARANTEE STRIP ─── */
    .rav-guarantee {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
      border: 1px solid var(--line); border-radius: var(--radius);
      overflow: hidden; margin-top: 8px;
    }
    .rav-guarantee-item {
      padding: 32px 28px; border-right: 1px solid var(--line);
      text-align: center;
    }
    .rav-guarantee-item:last-child { border-right: none; }
    .rav-guarantee-icon { font-size: 28px; margin-bottom: 12px; }
    .rav-guarantee-item h4 { font-family: var(--display); font-weight: 700; font-size: 18px; margin-bottom: 6px; }
    .rav-guarantee-item p { font-size: 13px; color: var(--muted); line-height: 1.5; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 960px) {
      .rav-top { grid-template-columns: 1fr; gap: 40px; }
      .rav-info { position: static; }
      .rav-features-grid, .rav-use-grid { grid-template-columns: 1fr; }
      .rav-specs-grid { grid-template-columns: 1fr; }
      .rav-guarantee { grid-template-columns: 1fr; }
      .rav-guarantee-item { border-right: none; border-bottom: 1px solid var(--line); }
      .rav-guarantee-item:last-child { border-bottom: none; }
      .rav-trust { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 600px) {
      .rav-product { padding: 28px 16px 80px; }
      .rav-box-grid { grid-template-columns: 1fr; }
      .rav-trust { grid-template-columns: 1fr; }
      .rav-thumbs { grid-template-columns: repeat(4, 1fr); }
      .rav-specs-strip { grid-template-columns: 1fr 1fr; }
    }/* End custom CSS */