.elementor-3752 .elementor-element.elementor-element-7847ecb{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:90px;--padding-bottom:90px;--padding-left:30px;--padding-right:30px;}@media(max-width:1024px){.elementor-3752 .elementor-element.elementor-element-7847ecb{--padding-top:50px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}}@media(max-width:767px){.elementor-3752 .elementor-element.elementor-element-7847ecb{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for html, class: .elementor-element-e263f36 *//* ============================================================
     RIBS 'N BEER · WEBSITE-MATCH (v9)
     Exact 1-op-1 met ribsnbeer.com:
     • bg #171514, ink #e3e3e3, cream #ffe6ce, copper #af6f2f
     • Marcellus (titels) + Rubik (body)
     • Geen italic, kleine 3px radii, dezelfde knop-stijl
     ============================================================ */
  :root{
    --bg:           #171514;
    --bg-soft:      #1d1a18;
    --paper:        #1c1917;
    --paper-soft:   #1f1c19;
    --paper-edge:   #2a2522;
    --paper-deep:   #131110;
    --ink:          #e3e3e3;
    --ink-soft:     #b9b3ad;
    --ink-muted:    #847e78;
    --cream:        #ffe6ce;
    --soft:         #e0c4a8;
    --line:         #2a2522;
    --line-soft:    #1f1c19;
    --copper:       #af6f2f;
    --copper-deep:  #8a5722;
    --copper-glow:  #c98442;
    --ok:           #6f8f4a;
    --shadow:       0 4px 18px rgba(0,0,0,.45);
    --shadow-soft:  0 2px 8px rgba(0,0,0,.3);
    --radius:       3px;
  }

  /* Hairline-rule met diamantje — heel subtiel */
  .brass-rule{
    display:flex;
    align-items:center;
    gap:10px;
    margin:14px 0 18px;
  }
  .brass-rule::before,
  .brass-rule::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--copper);
    opacity:.35;
  }
  .brass-rule .diamond{
    width:5px; height:5px;
    background:var(--copper);
    transform:rotate(45deg);
    opacity:.7;
  }

  .card .corner{display:none !important}
  .card::before{display:none !important}

  .pickup-line{
    text-align:center;
    font-family:'Marcellus',serif;
    font-size:15px;
    color:var(--ink-soft);
    margin:0 0 24px;
    letter-spacing:.3px;
  }
  .pickup-line a{
    color:var(--copper);
    text-decoration:none;
    border-bottom:1px solid var(--copper);
    font-weight:500;
  }

  /* ============== CARDS ============== */
  .card{
    background:var(--paper);
    border:1px solid var(--paper-edge);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:30px 26px;
    margin-bottom:18px;
    position:relative;
  }

  /* ============== SECTION TITLES ============== */
  .section-title{
    text-align:center;
    margin-bottom:14px;
  }
  .section-title .kicker{
    font-family:'Marcellus',serif;
    font-size:13px;
    letter-spacing:5px;
    text-transform:uppercase;
    color:var(--cream);
    font-weight:400;
    margin-bottom:10px;
    opacity:.85;
  }
  .section-title h2{
    font-family:'Marcellus',Georgia,serif;
    font-weight:500;
    font-style:normal;
    font-size:30px;
    margin:0;
    color:var(--cream);
    letter-spacing:.3px;
    line-height:1.15;
  }
  .section-title .sub{
    font-family:'Rubik',sans-serif;
    font-size:13.5px;
    color:var(--ink-soft);
    margin-top:10px;
    line-height:1.55;
  }
  .section-title .sub b{
    color:var(--soft);
    font-weight:500;
  }

  /* ============== MENU ITEMS ============== */
  .item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .item:last-child{border-bottom:none}
  .item .info{flex:1; min-width:0}
  .item .name{
    font-family:'Rubik',sans-serif;
    font-weight:400;
    font-size:15px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    line-height:1.45;
    color:var(--ink);
    align-items:baseline;
  }
  .item .price{
    font-family:'Marcellus',serif;
    color:var(--copper-glow);
    font-weight:500;
    white-space:nowrap;
    font-size:17px;
    letter-spacing:.3px;
  }
  .item .desc{
    color:var(--ink-muted);
    font-size:13px;
    margin-top:4px;
    font-family:'Rubik',sans-serif;
  }

  /* ============== BEREIDING SUBHEADERS ============== */
  .bereiding-group{margin-bottom:18px}
  .bereiding-group:last-child{margin-bottom:0}
  .bereiding-subheader{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:14px;
    padding:18px 0 12px;
    margin-top:10px;
    margin-bottom:4px;
    border-bottom:1px solid rgba(175,111,47,.4);
  }
  .bereiding-subheader .b-name{
    font-family:'Marcellus',serif;
    font-style:normal;
    font-size:21px;
    font-weight:500;
    color:var(--cream);
    letter-spacing:.4px;
  }
  .bereiding-subheader .b-tag{
    font-family:'Rubik',sans-serif;
    font-size:12.5px;
    color:var(--ink-muted);
    font-weight:400;
  }

  /* ============== QUANTITY STEPPER ============== */
  .qty{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(175,111,47,.08);
    border:1px solid rgba(175,111,47,.4);
    border-radius:999px;
    padding:3px 5px;
  }
  .qty button{
    width:30px; height:30px;
    padding: 0px;
    border:none;
    background:var(--copper);
    color:#fff;
    font-family:'Rubik',sans-serif;
    font-size:18px;
    font-weight:500;
    cursor:pointer;
    line-height:1;
    border-radius:50%;
    transition:all .15s;
  }
  .qty button:hover:not(:disabled),
  .qty button:focus{
    background:var(--copper-glow);
  }
  .qty button:active:not(:disabled){transform:translateY(1px)}
  .qty button:disabled{
    background:#2a2522;
    color:var(--ink-muted);
    cursor:not-allowed;
  }
  .qty span{
    font-family:'Marcellus',serif;
    font-weight:500;
    font-size:17px;
    min-width:22px;
    text-align:center;
    color:var(--cream);
  }

  /* ============== INTRO CARD ============== */
  .intro-card .intro-h2{
    font-family:'Marcellus',Georgia,serif;
    font-weight:500;
    font-style:normal;
    font-size:32px;
    margin:0;
    color:var(--copper);
    letter-spacing:.3px;
    line-height:1.2;
  }
  .intro-card p{
    font-family:'Rubik',sans-serif;
    color:var(--ink);
    font-size:14.5px;
    line-height:1.7;
    margin:0 0 14px;
  }
  .intro-card p:last-child{margin-bottom:0}
  .intro-card b{
    color:var(--soft);
    font-weight:500;
  }
  .intro-card a{
    color:var(--copper);
    font-weight:500;
    text-decoration:none;
    border-bottom:1px solid var(--copper);
  }
  .intro-card .intro-info{
    background:rgba(175,111,47,.08);
    border-left:3px solid var(--copper);
    border-radius:0 var(--radius) var(--radius) 0;
    padding:14px 18px;
    margin-top:10px;
    font-size:13.5px;
  }

  .closebtn-hide{display:none !important}

  /* ============== FORM ============== */
  .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 18px;
  }
  label{
    display:block;
    font-family:'Marcellus',serif;
    font-size:11px;
    font-weight:400;
    color:var(--cream);
    margin-bottom:8px;
    letter-spacing:3px;
    text-transform:uppercase;
    opacity:.85;
  }
  input,select,textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    font-size:15px;
    font-family:'Rubik',sans-serif;
    background:var(--paper-deep);
    color:var(--ink);
    transition:all .2s;
  }
  input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--copper);
    box-shadow:0 0 0 2px rgba(175,111,47,.18);
  }
  input::placeholder,textarea::placeholder{color:var(--ink-muted)}
  textarea{resize:vertical; min-height:80px}
  .full{grid-column:1 / -1}
  .hint{
    font-size:12px;
    color:var(--ink-muted);
    margin-top:6px;
    font-family:'Rubik',sans-serif;
  }

  /* ============== STICKY SUMMARY ============== */
  .summary{
    position:sticky;
    bottom:0;
    background:var(--paper);
    border:1px solid var(--paper-edge);
    border-top:1px solid var(--copper);
    border-radius:var(--radius) var(--radius) 0 0;
    box-shadow:0 -4px 18px rgba(0,0,0,.45);
    padding:18px 24px;
    margin:0 -18px -40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    z-index:10;
  }
  .total{
    font-family:'Marcellus',serif;
    font-size:14px;
    color:var(--ink-soft);
    letter-spacing:.5px;
  }
  .total b{
    font-family:'Marcellus',serif;
    font-size:28px;
    color:var(--cream);
    margin-left:10px;
    font-weight:500;
    letter-spacing:.3px;
  }

  .submit{
    background:var(--copper);
    color:#fff;
    border:none;
    padding:13px 28px;
    font-family:'Rubik',sans-serif;
    font-size:14px;
    font-weight:500;
    letter-spacing:.3px;
    border-radius:var(--radius);
    cursor:pointer;
    text-transform:none;
    box-shadow:0 2px 8px rgba(175,111,47,.25);
    transition:all .2s;
  }
  .submit:hover:not(:disabled){
    background:var(--copper-glow);
    box-shadow:0 4px 14px rgba(175,111,47,.4);
    transform:translateY(-1px);
  }
  .submit:active:not(:disabled){transform:translateY(0)}
  .submit:disabled{
    background:#2a2522;
    color:var(--ink-muted);
    cursor:not-allowed;
    box-shadow:none;
  }

  /* ============== NOTICE ============== */
  .notice{
    padding:14px 16px;
    border-radius:var(--radius);
    margin:14px 0;
    font-size:14px;
    line-height:1.55;
    font-family:'Rubik',sans-serif;
  }
  .notice.err{
    background:rgba(175,111,47,.1);
    color:var(--ink);
    border-left:3px solid var(--copper);
  }
  .notice.err b{color:var(--soft)}
  .notice.err a{
    color:var(--copper);
    font-weight:500;
  }
  .hidden{display:none !important}

  /* ============== SUCCESS SCREEN ============== */
  .success{
    text-align:center;
    padding:50px 24px;
    max-width:560px;
    margin:0 auto;
  }
  .success .medallion{
    width:84px; height:84px;
    border-radius:50%;
    background:var(--copper);
    color:#fff;
    font-size:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 26px;
    font-weight:500;
    box-shadow:0 6px 22px rgba(175,111,47,.3);
  }
  .succ-kicker{
    font-family:'Marcellus',serif;
    font-size:13px;
    letter-spacing:5px;
    text-transform:uppercase;
    color:var(--cream);
    font-weight:400;
    margin-bottom:14px;
    opacity:.85;
  }
  .success h1{
    font-family:'Marcellus',Georgia,serif;
    font-weight:500;
    font-style:normal;
    font-size:42px;
    color:var(--cream);
    margin:0 0 16px;
    border-bottom:none;
    padding:0;
    display:block;
    line-height:1.15;
    letter-spacing:.3px;
  }
  .succ-ref{
    font-family:'Rubik',sans-serif;
    font-size:13px;
    letter-spacing:3px;
    color:var(--copper);
    margin:18px 0 14px;
    font-weight:500;
    text-transform:uppercase;
  }
  .success-pickup{
    margin:0 0 28px;
    font-family:'Rubik',sans-serif;
    font-size:14.5px;
    color:var(--ink-soft);
  }
  .success-pickup b{
    font-family:'Marcellus',serif;
    font-weight:500;
    color:var(--cream);
    font-size:24px;
    display:inline-block;
    margin:6px 0 4px;
    letter-spacing:.3px;
  }
  .success-addr{
    color:var(--ink-muted);
    font-size:13px;
  }

  .success-summary{
    background:var(--paper);
    border:1px solid var(--paper-edge);
    border-radius:var(--radius);
    padding:22px 26px;
    margin:0 auto 22px;
    text-align:left;
    max-width:480px;
  }
  .summary-title{
    text-align:center;
    margin-bottom:14px;
    border-bottom:1px solid rgba(175,111,47,.35);
    padding-bottom:12px;
  }
  .summary-title .kicker{
    font-family:'Marcellus',serif;
    font-size:11px;
    letter-spacing:4px;
    color:var(--cream);
    margin-bottom:4px;
    font-weight:400;
    text-transform:uppercase;
    opacity:.85;
  }
  .summary-title h2{
    font-family:'Marcellus',serif;
    font-style:normal;
    font-weight:500;
    font-size:22px;
    margin:0;
    color:var(--cream);
    letter-spacing:.3px;
  }
  .success-summary ul{
    list-style:none;
    padding:0;
    margin:0 0 14px;
    font-family:'Rubik',sans-serif;
    font-size:14px;
  }
  .success-summary li{
    padding:8px 0;
    border-bottom:1px dotted var(--line);
    display:flex;
    justify-content:space-between;
    gap:14px;
  }
  .success-summary li:last-child{border-bottom:none}
  .success-summary .stotal{
    font-family:'Marcellus',serif;
    font-size:18px;
    color:var(--cream);
    border-top:1px solid rgba(175,111,47,.4);
    margin-top:8px;
    padding-top:14px;
    display:flex;
    justify-content:space-between;
    font-weight:500;
    letter-spacing:.3px;
  }

  /* Totaalregel binnen success summary */
  .summary-total{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    border-top:1px solid rgba(175,111,47,.4);
    margin-top:6px;
    padding-top:14px;
    font-family:'Rubik',sans-serif;
    font-size:14px;
    color:var(--ink-soft);
  }
  .summary-total b{
    font-family:'Marcellus',serif;
    font-size:20px;
    color:var(--cream);
    font-weight:500;
    letter-spacing:.3px;
  }

  /* Callout onderaan success-screen (telefoon-tekst) */
  .success-callout{
    max-width:520px;
    margin:0 auto;
    padding:18px 22px;
    background:rgba(175,111,47,.07);
    border-left:3px solid var(--copper);
    border-radius:0 var(--radius) var(--radius) 0;
    font-family:'Rubik',sans-serif;
    font-size:14px;
    line-height:1.65;
    color:var(--ink);
    text-align:left;
  }
  .success-callout b,
  .success-callout strong{
    color:var(--cream);
    font-weight:500;
  }
  .success-callout a{
    color:var(--copper-glow);
    font-weight:500;
    text-decoration:none;
    border-bottom:1px solid var(--copper);
    white-space:nowrap;
  }
  .success-callout a:hover{
    color:var(--cream);
    border-bottom-color:var(--cream);
  }

  /* ---- Veiligheidsnet: links overal default copper, nooit blauw ---- */
  a:link, a:visited{
    color:var(--copper);
    text-decoration:none;
  }
  a:hover{
    color:var(--copper-glow);
  }

  .new-order{
    background:transparent;
    color:var(--copper);
    border:1px solid var(--copper);
    padding:11px 24px;
    font-family:'Rubik',sans-serif;
    font-size:13.5px;
    font-weight:500;
    letter-spacing:.3px;
    border-radius:var(--radius);
    cursor:pointer;
    transition:all .2s;
    text-transform:none;
  }
  .new-order:hover{
    background:var(--copper);
    color:#fff;
  }

  /* ============== RESPONSIVE ============== */
  @media (max-width:640px){
    body{padding:0 12px 32px}
    header{padding:30px 12px 22px}
    header h1{font-size:48px}
    header .anno{font-size:11px; letter-spacing:4px}
    .card{padding:24px 20px}
    .section-title h2{font-size:24px}
    .grid{grid-template-columns:1fr; gap:12px}
    .summary{padding:16px 18px; margin:0 -12px -32px}
    .total b{font-size:24px}
    .submit{padding:12px 22px; font-size:13px; width:100%}
    .success h1{font-size:32px}
    .item .name{font-size:14.5px}
    .item .price{font-size:16px}
    .bereiding-subheader .b-name{font-size:18px}
    .intro-card .intro-h2{font-size:22px}
  }/* End custom CSS */