<!-- ============ ARMA TU PIZZA – MOCKUP ITALIANO (VERTICAL) ============ -->
<div class="pizza-wrap">

  <!-- HERO -->
  <section class="hero">
    <h1>???? Arma Tu Pizza Artesanal</h1>
    <p>Elige tamaño, ingredientes frescos y crea tu combinación perfecta.</p>
  </section>

  <!-- SELECTOR DE TAMAÑO -->
  <section class="sizes">
    <div class="size-pill">
      <input type="radio" name="size" id="size-personal" value="Personal (20 cm)" data-price="22000" checked>
      <label for="size-personal"><strong>Personal</strong><span>(20 cm)</span><em>$22.000</em></label>
    </div>
    <div class="size-pill">
      <input type="radio" name="size" id="size-mediana" value="Mediana (30 cm)" data-price="34000">
      <label for="size-mediana"><strong>Mediana</strong><span>(30 cm)</span><em>$34.000</em></label>
    </div>
    <div class="size-pill">
      <input type="radio" name="size" id="size-familiar" value="Familiar (40 cm)" data-price="46000">
      <label for="size-familiar"><strong>Familiar</strong><span>(40 cm)</span><em>$46.000</em></label>
    </div>
  </section>

  <!-- ACORDEONES -->
  <section class="accordions">

    <!-- Carnes -->
    <div class="acc">
      <button class="acc-head" type="button">
        <span>???? Carnes</span> <i class="chev">▸</i>
      </button>
      <div class="acc-body">
        <label><input type="checkbox" class="opt" data-group="Carnes" data-name="Pepperoni" data-price="4300"> Pepperoni <b>$4.300</b></label>
        <label><input type="checkbox" class="opt" data-group="Carnes" data-name="Jamón" data-price="3800"> Jamón <b>$3.800</b></label>
        <label><input type="checkbox" class="opt" data-group="Carnes" data-name="Pollo" data-price="4200"> Pollo <b>$4.200</b></label>
        <label><input type="checkbox" class="opt" data-group="Carnes" data-name="Tocineta" data-price="4500"> Tocineta <b>$4.500</b></label>
      </div>
    </div>

    <!-- Vegetales -->
    <div class="acc">
      <button class="acc-head" type="button">
        <span>???? Vegetales</span> <i class="chev">▸</i>
      </button>
      <div class="acc-body">
        <label><input type="checkbox" class="opt" data-group="Vegetales" data-name="Champiñones" data-price="3000"> Champiñones <b>$3.000</b></label>
        <label><input type="checkbox" class="opt" data-group="Vegetales" data-name="Cebolla" data-price="2000"> Cebolla <b>$2.000</b></label>
        <label><input type="checkbox" class="opt" data-group="Vegetales" data-name="Maíz" data-price="2200"> Maíz <b>$2.200</b></label>
        <label><input type="checkbox" class="opt" data-group="Vegetales" data-name="Pimentón" data-price="2200"> Pimentón <b>$2.200</b></label>
      </div>
    </div>

    <!-- Quesos -->
    <div class="acc">
      <button class="acc-head" type="button">
        <span>???? Quesos</span> <i class="chev">▸</i>
      </button>
      <div class="acc-body">
        <label><input type="checkbox" class="opt" data-group="Quesos" data-name="Mozzarella Extra" data-price="3500"> Mozzarella Extra <b>$3.500</b></label>
        <label><input type="checkbox" class="opt" data-group="Quesos" data-name="Doble queso" data-price="3500"> Doble queso <b>$3.500</b></label>
        <label><input type="checkbox" class="opt" data-group="Quesos" data-name="Parmesano" data-price="3800"> Parmesano <b>$3.800</b></label>
      </div>
    </div>

    <!-- Salsas -->
    <div class="acc">
      <button class="acc-head" type="button">
        <span>???? Salsas</span> <i class="chev">▸</i>
      </button>
      <div class="acc-body">
        <label><input type="checkbox" class="opt" data-group="Salsas" data-name="Salsa BBQ" data-price="1500"> Salsa BBQ <b>$1.500</b></label>
        <label><input type="checkbox" class="opt" data-group="Salsas" data-name="Salsa blanca" data-price="1500"> Salsa blanca <b>$1.500</b></label>
        <label><input type="checkbox" class="opt" data-group="Salsas" data-name="Artesanal de la casa" data-price="2000"> Artesanal de la casa <b>$2.000</b></label>
      </div>
    </div>

    <!-- Extras -->
    <div class="acc">
      <button class="acc-head" type="button">
        <span>⭐ Extras</span> <i class="chev">▸</i>
      </button>
      <div class="acc-body">
        <label><input type="checkbox" class="opt" data-group="Extras" data-name="Orilla rellena de queso" data-price="5000"> Orilla rellena de queso <b>$5.000</b></label>
        <label><input type="checkbox" class="opt" data-group="Extras" data-name="Bebida 400 ml" data-price="4500"> Bebida 400 ml <b>$4.500</b></label>
        <label><input type="checkbox" class="opt" data-group="Extras" data-name="Postre" data-price="6500"> Postre <b>$6.500</b></label>
      </div>
    </div>

  </section>

  <!-- RESUMEN -->
  <aside class="summary">
    <div class="card">
      <h3>Tu Pizza Artesanal</h3>
      <ul class="sum-list"></ul>
      <div class="sum-line"><span>Subtotal</span><b class="sum-subtotal">$0</b></div>
      <div class="sum-note">* Precios incluyen IVA.</div>
      <button class="add-to-cart">Añadir al Pedido – <b class="sum-total">$0</b></button>
    </div>
  </aside>

  <!-- DESCRIPCIÓN -->
  <section class="about">
    <h4>Nuestra pizza artesanal</h4>
    <p>Masa hecha el mismo día, ingredientes frescos seleccionados y horneada a la piedra. Pide en minutos.</p>
  </section>

  <!-- STICKY BAR (MÓVIL) -->
  <div class="sticky-bar">
    <div class="sticky-meta">
      <span class="sticky-title">Tu Pizza</span>
      <span class="sticky-price sum-total">$0</span>
    </div>
    <button class="sticky-btn">Añadir al Pedido</button>
  </div>

</div>

<style>
/* ====== ESTILOS ====== */
.pizza-wrap{ --red:#D9382A; --green:#377A3A; --beige:#F7EEDB; --ink:#1E1E1E; --border:#E2D6BF; font-family: "Merriweather", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); }
.pizza-wrap *{ box-sizing:border-box }
.hero{ background:var(--beige); padding:24px 18px; border-radius:16px; border:1px solid var(--border); margin-bottom:14px }
.hero h1{ margin:0; color:var(--red); font-size:26px; line-height:1.2 }
.hero p{ margin:6px 0 0; color:var(--green); font-weight:600 }
.sizes{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 16px }
.size-pill input{ position:absolute; opacity:0; pointer-events:none }
.size-pill label{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer; text-align:center; box-shadow:0 1px 0 rgba(0,0,0,.04) }
.size-pill label strong{ font-size:14px }
.size-pill label span{ font-size:12px; opacity:.8 }
.size-pill label em{ font-style:normal; font-weight:700; color:var(--green); margin-top:2px; font-size:12px }
.size-pill input:checked + label{ outline:2px solid var(--green); box-shadow:0 0 0 4px rgba(55,122,58,.12) }
.accordions{ display:flex; flex-direction:column; gap:10px }
.acc{ border:1px solid var(--border); border-radius:14px; background:#fff }
.acc-head{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:#fff; border:0; border-radius:14px; font-weight:800; color:var(--ink); cursor:pointer }
.acc-head .chev{ transition:transform .2s ease }
.acc.open .acc-head .chev{ transform:rotate(90deg) }
.acc-body{ display:none; padding:8px 14px 12px; border-top:1px dashed var(--border) }
.acc.open .acc-body{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px }
.acc-body label{ display:flex; align-items:center; gap:8px; font-size:14px; padding:8px 10px; border-radius:10px; border:1px solid #f0e8d7 }
.acc-body b{ margin-left:auto; font-size:12px; color:#444 }
.summary{ position:relative; margin-top:14px }
.card{ position:sticky; top:12px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px }
.card h3{ margin:0 0 8px; color:var(--green) }
.sum-list{ list-style:none; margin:0 0 8px; padding:0; max-height:180px; overflow:auto; border:1px dashed var(--border); border-radius:10px }
.sum-list li{ display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px dashed #eee; font-size:14px }
.sum-list li:last-child{ border-bottom:0 }
.sum-line{ display:flex; justify-content:space-between; padding:6px 2px; font-weight:700 }
.sum-note{ font-size:12px; opacity:.7; margin-bottom:10px }
.add-to-cart{ width:100%; border:0; background:var(--green); color:#fff; padding:14px; border-radius:12px; font-weight:800; cursor:pointer }
.about{ background:var(--beige); border:1px solid var(--border); border-radius:14px; padding:14px; margin:14px 0 80px }
.about h4{ margin:0 0 6px; color:var(--red) }
/* Sticky mobile bar */
.sticky-bar{ position:fixed; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#ffffffee; backdrop-filter:saturate(1.2) blur(4px); border-top:1px solid var(--border); padding:10px 12px; z-index:9999 }
.sticky-meta{ display:flex; flex-direction:column; }
.sticky-title{ font-weight:700 }
.sticky-btn{ background:var(--green); color:#fff; border:0; padding:12px 16px; border-radius:12px; font-weight:800; }
@media(min-width:900px){
  .pizza-wrap{ max-width:980px; margin:0 auto }
  .layout{ display:grid; grid-template-columns:1fr 320px; gap:16px }
  .summary{ position:static }
  .sticky-bar{ display:none }
}
</style>

<script>
/* ====== LÓGICA ====== */
(function(){
  const money = n => n.toLocaleString('es-CO', {style:'currency', currency:'COP', maximumFractionDigits:0});
  const sizeRadios = document.querySelectorAll('input[name="size"]');
  const opts = document.querySelectorAll('.opt');
  const sumList = document.querySelector('.sum-list');
  const subEl = document.querySelector('.sum-subtotal');
  const totEls = document.querySelectorAll('.sum-total');
  const addBtn = document.querySelector('.add-to-cart');
  const stickyBtn = document.querySelector('.sticky-btn');

  function getBase(){
    const r=[...sizeRadios].find(r=>r.checked);
    return r ? {label:r.value, price:+r.dataset.price} : {label:'', price:0};
  }
  function getSelected(){
    return [...opts].filter(o=>o.checked).map(o=>({group:o.dataset.group, name:o.dataset.name, price:+o.dataset.price}));
  }
  function render(){
    const base = getBase();
    const sel = getSelected();

    // pintar lista
    sumList.innerHTML = '';
    const liSize = document.createElement('li');
    liSize.innerHTML = `<strong>Tamaño:</strong> ${base.label} <b>${money(base.price)}</b>`;
    sumList.appendChild(liSize);
    if(sel.length){
      sel.forEach(i=>{
        const li = document.createElement('li');
        li.textContent = `${i.group}: ${i.name}`;
        const b = document.createElement('b'); b.textContent = money(i.price);
        li.appendChild(b);
        sumList.appendChild(li);
      });
    }else{
      const li = document.createElement('li');
      li.textContent = 'Sin ingredientes extra seleccionados';
      sumList.appendChild(li);
    }

    const subtotal = base.price + sel.reduce((a,b)=>a+b.price,0);
    subEl.textContent = money(subtotal);
    totEls.forEach(e=> e.textContent = money(subtotal));
  }
  // acordeones
  document.querySelectorAll('.acc-head').forEach(h=>{
    h.addEventListener('click', ()=>{
      const acc = h.closest('.acc');
      acc.classList.toggle('open');
    });
  });

  // eventos
  [...sizeRadios, ...opts].forEach(el=> el.addEventListener('change', render));
  render();

  // botones CTA (ejemplo de integración)
  function payload(){
    const base = getBase();
    const sel = getSelected();
    return {
      product_id: window.wc_product_id || null, // si quieres pasar al carrito por AJAX
      size: base.label,
      addons: sel,
      total_text: document.querySelector('.sum-total').textContent
    };
  }
  [addBtn, stickyBtn].forEach(btn=>{
    if(!btn) return;
    btn.addEventListener('click', ()=>{
      // Aquí puedes integrar con WooCommerce (dos opciones):
      // 1) Disparar click del botón "Añadir al carrito" nativo si existe.
      // 2) Hacer AJAX a /?add-to-cart=ID con meta custom (requiere dev).
      console.log('Añadir al carrito →', payload());
      alert('Añadido al pedido (demo). Integraremos con tu add-on/woo-cart si lo deseas.');
    });
  });
})();
</script>