/*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */

/* ===============================
   FARELA PDP – Estilo tipo maqueta
   Scope: SOLO ficha de producto
   =============================== */
button.pkfp-wn.pk-show-panel.pk-fixed-button
 {
    display: none;
}

.carrier-delay{

display:none;
}

li.nav-item.tab-order-2
 {
    display: none;

}
body#product{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface2:#f2f6fb;
  --text:#0f172a;
  --muted:#5b677a;
  --border:rgba(15,23,42,.10);
  --shadow: 0 12px 30px rgba(15,23,42,.08);
  --radius: 18px;
  --radius2: 26px;
  --accent1:#0ea5e9;
  --accent2:#22c55e;
}

/* Fondo general */
body#product{
  background: var(--bg);
  color: var(--text);
}

/* Contenedor principal de la ficha (efecto "card") */
body#product #main .page-width.main-content .content-wrapper,
body#product #main .page-width.main-content #wrapper{
  background: transparent;
}

body#product #main section#main{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* Migas tipo “crumbs” */
body#product nav.breadcrumb{
  margin: 0 0 10px 0;
}
body#product nav.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
body#product nav.breadcrumb a,
body#product nav.breadcrumb span{
  color: var(--muted);
  font-size: .95rem;
}
body#product nav.breadcrumb a:hover{ color: var(--text); }

/* Layout 2 columnas tipo maqueta:
   - tu estructura es Elementor: 2 columnas 50/50
*/
body#product .elementor-section .elementor-row{
  display:flex;
  gap:14px;
}
body#product .elementor-top-column.elementor-col-50{
  width:50% !important;
}
@media (max-width: 980px){
  body#product .elementor-section .elementor-row{
    flex-direction: column;
  }
  body#product .elementor-top-column.elementor-col-50{
    width:100% !important;
  }
}

/* ===============================
   GALERÍA / IMÁGENES
   =============================== */

/* Caja “main image” con borde y radio grande */
body#product .images-container{
  gap:10px;
}
body#product .product-cover{
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  overflow:hidden;
  background: radial-gradient(520px 300px at 30% 25%, rgba(14,165,233,.22), transparent 62%),
              radial-gradient(520px 300px at 80% 18%, rgba(34,197,94,.18), transparent 55%),
              rgba(15,23,42,.03);
}
body#product .product-cover img{
  width:100%;
  height:auto;
  display:block;
}

/* Flags “Nuevo” estilo tag */
body#product .product-flags{
  position: absolute;
  z-index: 2;
  margin: 12px 0 0 12px;
}
body#product .product-flags .product-flag{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.04em;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  color: var(--text);
}
body#product .product-flags .product-flag.new{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.22);
}

/* ===============================
   TÍTULO / TEXTO / PRECIO
   =============================== */

body#product h1.h1[itemprop="name"]{
  margin: 10px 0 6px 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Precio principal */
body#product .product-prices{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding: 10px 0 6px 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
body#product .product-price .current-price .price,
body#product .product-price .current-price span{
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--text);
}
body#product .tax-shipping-delivery-label{
  color: var(--muted);
  font-size: .88rem;
}

/* Descripción corta (si la hay) */
body#product .short-desc{
  color: var(--muted);
  margin: 6px 0 10px 0;
}

/* ===============================
   BOTONES / CANTIDAD / ADD TO CART
   =============================== */

/* Contenedor acciones */
body#product .product-information{
  margin-top: 10px;
}

/* Input cantidad estilo “pill” */
body#product .product-quantity .qty input#quantity_wanted{
  width: 92px;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  outline:none;
  background: #fff;
  color: var(--text);
}

/* Botones +/- si aparecen */
body#product .input-group-btn-vertical .btn{
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  color: var(--text);
}
body#product .input-group-btn-vertical .btn:hover{
  box-shadow: var(--shadow);
}

/* Botón Añadir al carrito (gradiente como tu .btn--primary) */
body#product button.add-to-cart,
body#product .btn.btn-primary.add-to-cart{
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
  color:#fff;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 10px 22px rgba(14,165,233,.18), 0 10px 22px rgba(34,197,94,.14);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body#product button.add-to-cart:hover,
body#product .btn.btn-primary.add-to-cart:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* Botones secundarios (favoritos / comparar) estilo “ghost” */
body#product .productButtons a.icon-button{
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  padding: 12px 14px;
  font-weight: 700;
  color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
body#product .productButtons a.icon-button:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  background: rgba(15,23,42,.04);
}
body#product .productButtons a.icon-button svg{
  margin-right: 10px;
}

/* Disponibilidad tipo “kpi” */
body#product #product-availability{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--text);
  gap:8px;
}

/* ===============================
   TABS (Descripción / Detalle / etc.)
   =============================== */

body#product .tabs-container{
  margin-top: 18px;
}
body#product .tabs-container .nav.nav-tabs{
  gap: 8px;
  border: 0;
  margin-bottom: 10px;
}
body#product .tabs-container .nav.nav-tabs .nav-link{
  border-radius: 14px !important;
  border:1px solid var(--border) !important;
  background:#fff;
  color: var(--muted) !important;
  font-weight: 800;
  padding: 10px 12px;
}
body#product .tabs-container .nav.nav-tabs .nav-link.active{
  color: var(--text) !important;
  border-color: rgba(15,23,42,.18) !important;
  box-shadow: var(--shadow);
}

/* Panel contenido de tabs */
body#product .tabs-container .tab-content{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
}

/* Detalle de productos (bloques) */
body#product .product-features .data-sheet{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 520px){
  body#product .product-features .data-sheet{
    grid-template-columns: 1fr;
  }
}
body#product .product-features .data-sheet > div{
  padding: 12px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.02);
}
body#product .product-features label{
  color: var(--muted);
  display:block;
  margin-bottom: 4px;
  font-weight:600;
}

/* ===============================
   MODAL IMÁGENES (si lo usas)
   =============================== */
body#product .modal.product-modal .modal-content{
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ===============================
   Ajustes finos para “look” general
   =============================== */
body#product .page-width{
  max-width: 1160px;
}
body#product .page-width.top-content{
  padding-top: 22px;
}
body#product .page-width.main-content{
  padding-bottom: 44px;
}