@font-face {
      font-family: 'Austin';
      src: url('font/AustinNewsHeadlineWeb-Light.woff2') format('woff2'),
           url('font/AustinNewsHeadlineWeb-Light.woff') format('woff');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    :root{
      --bg:#ffffff;
      --ink:#1c1c1c;
      --muted:#6e6e6e;

      /* Gris del cuadro y del botón */
      --card:#efefef;

      --line:#e7e7e7;
      --footer:#f0f0f0;

      --serif: "Cormorant Garamond", serif;
      --sans: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial;

      --max: 1120px;

      /* proporción aprox 235x313 */
      --thumbW: 235px;
      --thumbH: 313px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:var(--serif);
    }

    .wrap{max-width:var(--max); margin:0 auto; padding:0 22px;}

    header{
      padding:26px 0 10px;
      text-align:center;
    }
    .logo{
      width:156px; height:56px;
      margin:0 auto 26px;
      display:grid; place-items:center;
      color:var(--ink);
      opacity:.9;
      user-select:none;
    }
    .tagline{
      font-family:var(--serif);
      font-size:14px;
      color:var(--muted);
      margin:0 0 14px;
      letter-spacing:.2px;
    }
    h1{
      font-family: 'Austin', var(--serif);
        font-weight: 400;
      font-size:52px;
      line-height:1.05;
      margin:0 0 10px;
    }
    .subnav{
        display:none;
      font-family:var(--serif);
      font-size:16px;
      color:#2a2a2a;
      margin:0 0 6px;
    }
    .subnav a{
      color:inherit;
      text-decoration:none;
      padding:4px 8px;
    }
    .subnav a:hover{ text-decoration:underline; }

    main{ padding:18px 0 120px; }

    .section{ padding:26px 0 10px; }
    .sectionTitle{
      font-family:'Austin';
      text-transform:uppercase;
      font-weight:500;
      font-size:28px;
      margin:0 0 14px;
      margin-bottom:0;
      text-align:center;
    }
    .sectionSubtitle{
        font-family: 'Montserrat';
        font-weight: 300;
        font-size: 10px;
        text-align: center;
        margin: 5px 0 15px 0;
    }
    .sectionEx{
        margin-top:0;
        font-style: italic;
        padding-left: 25px;
         text-align:center;
         font-size:10px
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:px 0px;
      padding:8px 0 10px;
    }
    @media (max-width: 980px){
      .grid{grid-template-columns: repeat(3, 1fr); gap:34px 28px;}
      h1{font-size:44px}
    }
    @media (max-width: 680px){
      .grid{grid-template-columns: repeat(2, 1fr); gap:26px 18px;}
      h1{font-size:36px}
      .wrap{padding:0 16px}
    }

    /* Card */
    .card{
      user-select:none;
      cursor:default;
      padding:20px;
      margin:0;
      border:2px solid transparent; /* para que no “salte” al seleccionar */
    }
    .cardInner{
      display:flex;
      flex-direction:column;
      gap:0;
    }

    /* El contenedor gris (más alto) */
    .thumb{
      background:var(--card);
      /*height: var(--thumbH);*/
      width:100%;
      border:1px solid var(--line);
      display:grid;
      place-items:center;
      cursor:pointer;
    }
    .thumb img{
      width:100%;
      height:auto;
      max-height: calc(var(--thumbH) - 0px);
      object-fit:contain;
      display:block;
      filter: saturate(0.98);
    }

    /* Botón “SELECCIONAR” mismo gris que el cuadro */
    .chooseBtn{
     /* margin-top:10px;*/
      width:100%;
      border:1px solid var(--line);
      background:var(--card);
      padding:11px 10px;
      text-align:center;

      font-family:var(--sans);
      font-weight:200;
      letter-spacing:.22em;
      font-size:11px;
      color:#6a6a6a;

      cursor:pointer;
    }
    .chooseBtn:hover{
      filter: brightness(0.985);
    }
    /* Cantidad (inline con botón) */
   
    .actionRow{
        margin-top:10px;
        display:flex;
        gap:2%;
        align-items:stretch;
        width:100%;
    }
    
    .actionRow .chooseBtn{
      flex: 1 1 100%;
    }
    
    .actionRow:has(.qtyCtrl) .chooseBtn{
      flex: 0 0 58%;
    }

        
    .qtyCtrl{
        flex: 0 0 40%;
        display:flex;
        align-items:stretch;
        border:1px solid var(--line);
        background:var(--card);
        border-radius:0;
        overflow:hidden;
        font-family:var(--sans);
    }
    @media (max-width: 820px){
        .card{ padding: 0px;}
        .actionRow{ gap:2px;}
        
        .actionRow .chooseBtn{
          flex: 1 1 100%;
        }
        
        .actionRow:has(.qtyCtrl) .chooseBtn{
          flex: 0 0 59%;
            font-weight: 300;
            letter-spacing: 1px;
            font-size: 10px;
        }
        
    }
    .qtyBtn{
      width:32%;
      border:0;
      background:transparent;
      cursor:pointer;
      font-family:var(--sans);
      font-weight:300;
      font-size:14px;
      color:var(--ink);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 !important;
    }
    .qtyBtn:disabled{opacity:.35; cursor:not-allowed}
    .qtyInput{
      width:36% !important;
      border:0;
      text-align:center;
      background:#fff !important;
      font-family:var(--sans) !important;
      font-weight:300 !important;
      font-size:12px !important;
      color:var(--ink) !important;
      outline:none !important;
      line-height: 8px !important;
      padding:0 !important;
    }
    .qtyInput:disabled{opacity:.5; background:#fff}

.meta{
      margin-top:12px;
      display:flex;
      flex-direction:column;
      gap:2px;
      align-items:flex-start;
    }
    .nameBtn{
      border:0;
      background:transparent;
      padding:0;
      text-align:left;
      cursor:pointer;
      font-family:var(--serif) !important;
      font-size:14px;
      color:#727272;
      font-weight:400;
    }
    .nameBtn:hover{ text-decoration: underline; background:transparent !important;  color:#2b2b2b !important;}

    .price{
      font-family:var(--sans);
      font-size:12px;
      font-weight:200;
      color:#707070;
    }
    
 

    /* Selección: borde en TODO el bloque (foto+botón+texto) */
    .card.selected{
        border:1px solid #a7a7a7;
    }
    .card.selected .chooseBtn{
      color:#2a2a2a;
      border-color: rgba(28,28,28,.30);
    }

    .divider{ height:1px; background:transparent; margin:12px 0 0; }

    /* Footer */
    .footerBar{
      position:fixed;
      left:0; right:0; bottom:0;
      background:var(--footer);
      border-top:1px solid var(--line);
      padding:14px 0;
    }
    .footerInner{
      max-width:var(--max);
      margin:0 auto;
      padding:0 22px;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:14px;
    }
    .total{
      font-family:var(--serif);
      font-family:'Cormorant';
      font-size:20px;
      color:#4b4b4b;
      letter-spacing:.02em;
      white-space:nowrap;
    }
    .cta{
      border:0;
      background:#1f1f1f;
      color:#fff;
      padding:12px 18px;
      font-family:var(--sans);
      font-weight:300;
      font-size:12px;
      letter-spacing:.18em;
      cursor:pointer;
      min-width:260px;
      text-transform:uppercase;
    }
    .cta:disabled{opacity:.45; cursor:not-allowed}

    /* Modal */
    .modalBackdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.35);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:9999;
    }
    .modal{
      width:min(820px, 96vw);
      background:#fff;
      border:1px solid var(--line);
      box-shadow: 0 20px 60px rgba(0,0,0,.18);
            max-height: 90%;
        overflow-y: auto;
    }
    .modalHead{
      display:flex;
      justify-content:space-between;
      gap:10px;
      padding:14px 16px;
      border-bottom:1px solid var(--line);
      align-items:flex-start;
    }
    .modalTitle{
      font-family:var(--serif);
      font-size:22px;
      font-weight:500;
      margin:0 !important;
      line-height:1.1;
    }
    .modalPrice{
      font-family:var(--sans);
      font-weight:200;
      font-size:12px;
      color:var(--muted);
      letter-spacing:.12em;
      margin-top:4px;
      text-transform:uppercase;
    }
    .modalClose{
      border:1px solid var(--line);
      background:var(--card);
      font-family:var(--sans);
      font-weight:200;
      letter-spacing:.14em;
      font-size:11px;
      padding:10px 12px;
      cursor:pointer;
      text-transform:uppercase;
      color:#292929 !important;
    }
    .modalClose:hover{color:#ffffff}
    .modalBody{
      display:grid;
      grid-template-columns: 340px 1fr;
      gap:18px;
      padding:16px;
    }
    @media (max-width: 720px){
      .modalBody{grid-template-columns:1fr;}
    }
    .modalImg{
      background:var(--card);
      border:1px solid var(--line);
      height:420px;
      display:grid;
      place-items:center;
    }
    .modalImg img{
      width:80%;
      height:auto;
      max-height:380px;
      object-fit:contain;
      display:block;
    }
    .modalText{
      font-family:'Cormorant';
      color:#333;
      font-size:14px;
      line-height:1.55;
    }
    .modalFoot{
      padding:14px 16px 16px;
      border-top:1px solid var(--line);
      display:flex;
      justify-content:flex-end;
      gap:12px;
    }
    .modalSelect{
      border:1px solid var(--line);
      background:var(--card);
      padding:12px 16px;
      font-family:var(--sans);
      font-weight:200;
      letter-spacing:.18em;
      font-size:11px;
      cursor:pointer;
      text-transform:uppercase;
      color:#292929 !important;
    }
    .modalSelect:hover{color:#ffffff}
    
    /* Quitar flechas del input number */
    .qty-input::-webkit-outer-spin-button,
    .qty-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    .qty-input {
      -moz-appearance: textfield; /* Firefox */
    }
    
    .chooseBtn.active {
      background: #d2d2d2;
    }
    
    /* MINIATURAS FOOTER*/
    .pickedStrip{
      display:flex;
      gap:8px;
      align-items:center;
      margin-right:auto;
      flex-wrap: nowrap;      /* <-- clave */
      /*overflow-x: auto;       /* <-- scroll si no caben */
      max-width: 55%;
    }

    
    .pickedItem{
      position:relative;
      width:75px;
      height:75px;
      border:1px solid var(--line);
      background:var(--card);
      display:grid;
      place-items:center;
      /*overflow:hidden;*/
    }
    
    .pickedItem img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    
    .pickedQty{
      position:absolute;
      right:-6px;
      top:-6px;
      min-width:18px;
      height:18px;
      padding:0 5px;
      border-radius:999px;
      background:#1f1f1f;
      color:#fff;
      font-family:var(--sans);
      font-size:10px;
      line-height:18px;
      text-align:center;
      /*letter-spacing:0.02em;*/
    }
    
    .footerInnerRow{
        display:flex;
        align-items:center;
        gap:10px;
        width:100%;
        z-index: 1000;
        justify-content: right;
      }
      
    .footerInnerRow > p {margin: 0 !important;}
    

    /* ===== Footer responsive: en móvil, 2 filas ===== */
    @media (max-width: 820px){
      .footerInner{
        display:flex;
        flex-direction: column;
        gap:10px;
      }
    
      /* Fila 1: productos */
      .pickedStrip{
        width:100%;
        max-width: 100%;
        flex-wrap: nowrap;
       /* overflow-x: auto;*/
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
      }
    
      /* Fila 2: total + botón en la misma línea */
      .footerInnerRow{
        display:flex;
        align-items:center;
        gap:10px;
        width:100%;
        z-index: 1000;
      }
    
      /* Reusamos total y botón */
      .total{
        white-space: nowrap;
        flex: 0 0 auto;
      }
    
      .cta{
        flex: 1 1 auto;   
        min-width: 0;
      }
    }

 /*SPINER CARGANDO*/
 
     .loadingOverlay{
      position:fixed;
      inset:0;
      background: rgba(255,255,255,.72);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:2000;
    }
    
    .loadingOverlay.show{ display:flex; }
    
    .loadingBox{
      display:flex;
      align-items:center;
      gap:14px;
      padding:14px 16px;
      /*border:1px solid var(--line);*/
      background:#fff;
      box-shadow: 0 14px 40px rgba(0,0,0,.12);
      font-family: var(--sans);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    
    .spinner{
      width:18px;
      height:18px;
      border:2px solid rgba(0,0,0,.15);
      border-top-color: rgba(0,0,0,.55);
      border-radius:999px;
      animation: spin .8s linear infinite;
    }
    
    @keyframes spin { to { transform: rotate(360deg); } }
    
    .modalBackdrop,
    .loadingOverlay{
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
    }
    
    .modalBackdrop{
      align-items: center !important;
      justify-content: center !important;
    }
    
    .footerBar{
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 99999 !important;
    }

/*reset*/
/* === WP hardening: evitar que el tema toque nuestros botones/inputs === */
#kiosk-app button,
#kiosk-app input,
#kiosk-app select,
#kiosk-app textarea{
    font-family:'Montserrat';
  letter-spacing: 2px;
  text-transform: inherit;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

/* Quitar paddings/line-height que mete el tema (aquí suele estar el problema) */
#kiosk-app button,
#kiosk-app input[type="button"],
#kiosk-app input[type="submit"]{
  padding: 0 !important;
  line-height: normal !important;
}

/* Y ahora re-aplicamos tus paddings donde sí deben existir */
#kiosk-app .chooseBtn{
  padding: 11px 10px !important;
}

#kiosk-app .qtyBtn{
  padding: 0 !important;
  line-height: 1 !important;
  min-height: 0;
}

#kiosk-app .qtyInput{
  padding: 0 !important;
  line-height: 1.2 !important;
}

.modalMain img{
  width:100%;
  max-height:400px;
  object-fit:contain;
}

.modalGallery{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.modalThumb{
  width:60px;
  height:60px;
  object-fit:cover;
  cursor:pointer;
  border:2px solid transparent;
  transition:0.2s;
}

.modalThumb:hover{
  border-color:#000;
}

.modalImg{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modalMain img{
  max-width:100%;
  max-height:450px;
  object-fit:contain;
  cursor:pointer;
}

.slideArrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  color:#292929;
  border:none;
  font-size:30px;
  padding:10px 15px;
  cursor:pointer;
  z-index:2;
}

.slideArrow:hover{
  background:none !important;
  color:#292929 !important;
  border:none;
}

.slideArrow.left{ left:0; }
.slideArrow.right{ right:0; }

.modalDots{
  position:absolute;
  bottom:10px;
  display:flex;
  gap:8px;
}

.dot{
  width:5px;
  height:5px;
  background:#ccc;
  border-radius:50%;
  cursor:pointer;
}

.dot.active{
  background:#292929;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.lightbox.show{
  display:flex;
}

.lightbox img{
  max-width:90%;
  max-height:90%;
  object-fit:contain;
}

/* VIDEO */

.video {
    grid-row: 1;
    grid-column: span 2;
    width: 100%;
    height: 100%;
    padding: 20px;
}

@media (max-width: 820px) {
    .video {
        padding: 0;
    }
}

.video-item, video {
    width: 100%;
}