/* ===== TARJETAS DE PRODUCTO JARDINOK ===== */

.hfe-product-item {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.hfe-product-item:hover {
  box-shadow: 0 8px 32px rgba(136,176,75,0.18) !important;
  transform: translateY(-4px) !important;
}

.hfe-product-image {
  overflow: hidden !important;
  position: relative !important;
}

.hfe-product-image img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.hfe-product-item:hover .hfe-product-image img {
  transform: scale(1.07) !important;
}

.jok-badge-probado {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #88b04b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 3;
  pointer-events: none;
}

.jok-quickview {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26,26,26,0.78);
  color: #fff;
  padding: 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
}

.hfe-product-item:hover .jok-quickview {
  opacity: 1;
  transform: translateY(0);
}

.hfe-product-content {
  padding: 12px 16px 16px !important;
}

.hfe-product-category {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
}

.hfe-product-title .woocommerce-loop-product__title,
.hfe-product-title a {
  font-family: 'Playfair Display', serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.4 !important;
  margin: 0 0 6px !important;
}

.hfe-product-price .price {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.hfe-product-price .price .screen-reader-text {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.hfe-product-price .price ins {
  text-decoration: none !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #88b04b !important;
  line-height: 1 !important;
}

.hfe-product-price .price del {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #999 !important;
  line-height: 1 !important;
}

.jok-viewers {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  color: #888 !important;
  margin: 4px 0 8px !important;
}

.jok-viewers-dot {
  width: 7px;
  height: 7px;
  background: #E59866;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: jokDotPulse 1.8s ease-in-out infinite;
}

@keyframes jokDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

.hfe-product-add-to-cart .button {
  display: block !important;
  width: 100% !important;
  padding: 12px 0 !important;
  background: #88b04b !important;
  color: #fff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  text-align: center !important;
  border: none !important;
  transition: background 0.2s ease !important;
  margin-top: 8px !important;
}

.hfe-product-add-to-cart .button:hover {
  background: #769a3e !important;
}

.hfe-product-item .onsale {
  background: #E59866 !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  min-height: auto !important;
  min-width: auto !important;
  padding: 4px 10px !important;
  line-height: 1.4 !important;
  z-index: 4 !important;
}

/* ===== CAROUSEL HORIZONTAL ===== */

.elementor-element-0bc0d87 .hfe-woo-products-wrapper {
  position: relative !important;
}

.elementor-element-0bc0d87 .hfe-woo-products-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 16px !important;
  padding: 8px 4px 20px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: #88b04b #f0f0f0 !important;
  overscroll-behavior-x: contain !important;
}

.elementor-element-0bc0d87 .hfe-woo-products-grid::-webkit-scrollbar {
  height: 4px !important;
}

.elementor-element-0bc0d87 .hfe-woo-products-grid::-webkit-scrollbar-track {
  background: #f0f0f0 !important;
  border-radius: 4px !important;
}

.elementor-element-0bc0d87 .hfe-woo-products-grid::-webkit-scrollbar-thumb {
  background: #88b04b !important;
  border-radius: 4px !important;
}

.elementor-element-0bc0d87 .hfe-product-item {
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 260px !important;
  scroll-snap-align: start !important;
}

.jok-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-70%);
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 2px solid #88b04b;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.2s;
  color: #88b04b;
  padding: 0;
}

.jok-carousel-btn:hover {
  background: #88b04b;
  color: #fff;
}

.jok-carousel-btn.jok-prev { left: -16px; }
.jok-carousel-btn.jok-next { right: -16px; }

/* ===== RESPONSIVE ===== */

@media (min-width: 481px) and (max-width: 768px) {
  .hfe-product-image img { height: 180px !important; }
  .jok-carousel-btn { display: none !important; }
  .elementor-element-0bc0d87 .hfe-woo-products-grid {
    scrollbar-width: none !important;
  }
  .elementor-element-0bc0d87 .hfe-woo-products-grid::-webkit-scrollbar {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hfe-product-image img { height: 160px !important; }
  .hfe-product-title .woocommerce-loop-product__title,
  .hfe-product-title a { font-size: 14px !important; }
  .jok-carousel-btn { display: none !important; }
  .elementor-element-0bc0d87 .hfe-woo-products-grid {
    scrollbar-width: none !important;
    padding-bottom: 8px !important;
  }
  .elementor-element-0bc0d87 .hfe-woo-products-grid::-webkit-scrollbar {
    display: none !important;
  }
}

/* ===== GLOBAL ===== */


body {
  overflow-x: hidden !important;
  overscroll-behavior: none !important;
}

/* ===== FRANJA DE CONFIANZA ===== */

.jok-trust-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 32px 40px;
  background: #f7f7f7;
}

.jok-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 200px;
}

.jok-trust-svg {
  width: 36px;
  height: 36px;
  color: #88b04b;
  flex-shrink: 0;
}

.jok-trust-text strong {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.jok-trust-text span {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .jok-trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    padding: 28px 20px;
  }

  .jok-trust-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    min-width: unset;
  }

  .jok-trust-svg {
    width: 30px;
    height: 30px;
  }

  .jok-trust-text strong {
    font-size: 13px;
  }

  .jok-trust-text span {
    font-size: 11px;
  }
}
#page {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body {
  overscroll-behavior: none !important;
}
/* ===== OFERTA DE LA SEMANA ===== */

.jok-oferta {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 24px;
}

.jok-oferta-image {
  position: relative;
  flex: 1;
  min-width: 0;
}

.jok-oferta-image img {
  width: 100%;
  border-radius: 16px;
  display: block;
  object-fit: cover;
  max-height: 420px;
}

.jok-oferta-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #E59866;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 2;
}

.jok-oferta-content {
  flex: 1;
  min-width: 0;
}

.jok-oferta-categoria {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: #88b04b;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin: 0 0 8px;
}

.jok-oferta-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0 0 10px;
}

.jok-oferta-estrellas {
  font-size: 16px;
  color: #f5a623;
  margin-bottom: 12px;
  font-family: 'Open Sans', sans-serif;
}

.jok-oferta-estrellas span {
  color: #888;
  font-size: 12px;
}

.jok-oferta-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin: 0 0 20px;
}

.jok-oferta-precio {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.jok-oferta-precio del {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #999;
}

.jok-oferta-precio ins {
  font-family: 'Open Sans', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #88b04b;
  text-decoration: none;
}

.jok-oferta-ahorro {
  background: #E59866;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

.jok-stock-bar {
  height: 6px;
  background: #e8e8e8;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}

.jok-stock-fill {
  height: 100%;
  background: #E59866;
  border-radius: 10px;
}

.jok-stock-texto {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #888;
  margin: 0 0 20px;
}

.jok-stock-texto strong {
  color: #E59866;
}

.jok-oferta-btn {
  display: inline-block;
  background: #88b04b;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s;
  margin-bottom: 14px;
}

.jok-oferta-btn:hover {
  background: #769a3e;
  color: #fff;
}

.jok-oferta-nota {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #888;
  margin: 0;
}

@media (max-width: 768px) {
  .jok-oferta {
    flex-direction: column;
    gap: 24px;
    padding: 36px 20px;
  }
  .jok-oferta-titulo { font-size: 22px; }
  .jok-oferta-precio ins { font-size: 26px; }
}
/* ===== POR QUÉ ELEGIRNOS ===== */
.jok-why {
  padding: 72px 24px;
  background: #f4f7ee;
  text-align: center;
}
.jok-why-pretitulo {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  color: #88b04b; text-transform: uppercase;
  letter-spacing: 1.5px; margin: 0 0 10px;
}
.jok-why-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 700;
  color: #1a1a1a; margin: 0 0 12px; line-height: 1.2;
}
.jok-why-subtitulo {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px; color: #666;
  max-width: 480px; margin: 0 auto 48px; line-height: 1.6;
}
.jok-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px; max-width: 900px; margin: 0 auto;
}
.jok-why-item {
  background: #fff; border-radius: 16px;
  padding: 36px 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.jok-why-icon {
  width: 64px; height: 64px;
  background: rgba(136,176,75,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  color: #88b04b;
}
.jok-why-item h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700;
  color: #1a1a1a; margin: 0 0 10px;
}
.jok-why-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px; color: #666;
  line-height: 1.7; margin: 0;
}
@media (max-width: 768px) {
  .jok-why-grid { grid-template-columns: 1fr; max-width: 400px; }
  .jok-why-titulo { font-size: 26px; }
}
@media (max-width: 480px) {
  .jok-why { padding: 48px 20px; }
  .jok-why-subtitulo { font-size: 14px; margin-bottom: 36px; }
}
/* ===== TESTIMONIOS ===== */
.jok-testimonios {
  padding: 72px 0; background: #f7f7f7; text-align: center; overflow: hidden;
}
.jok-testimonios-header { padding: 0 24px; margin-bottom: 48px; }
.jok-test-pretitulo {
  font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 700;
  color: #88b04b; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 10px;
}
.jok-test-titulo {
  font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700;
  color: #1a1a1a; margin: 0 0 20px; line-height: 1.2;
}
.jok-test-rating {
  display: inline-flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid rgba(136,176,75,0.4);
  border-radius: 50px; padding: 12px 28px;
}
.jok-test-rating-num {
  font-family: 'Playfair Display', serif; font-size: 34px;
  font-weight: 700; color: #88b04b; line-height: 1;
}
.jok-test-rating-right { text-align: left; }
.jok-test-rating-stars { color: #f5a623; font-size: 16px; display: block; margin-bottom: 2px; }
.jok-test-rating-label { font-family: 'Open Sans', sans-serif; font-size: 11px; color: #888; }
.jok-marquee-wrapper {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.jok-marquee-track {
  display: flex; gap: 20px; width: max-content;
  padding: 16px 0 24px;
  animation: jokMarquee 40s linear infinite;
}
.jok-marquee-wrapper:hover .jok-marquee-track { animation-play-state: paused; }
@keyframes jokMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.jok-test-card {
  background: #fff; border: 1px solid #eeeeee;
  border-top: 3px solid #88b04b;
  border-radius: 16px; padding: 28px 24px; text-align: left;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  width: 300px; flex-shrink: 0;
}
.jok-test-card:nth-child(even) { border-top-color: #E59866; }
.jok-test-quote {
  font-family: 'Playfair Display', serif; font-size: 48px; color: #88b04b;
  line-height: 0.8; margin-bottom: 12px; opacity: 0.35;
}
.jok-test-card:nth-child(even) .jok-test-quote { color: #E59866; }
.jok-test-texto {
  font-family: 'Open Sans', sans-serif; font-size: 14px; color: #444;
  line-height: 1.8; margin: 0 0 14px; font-style: italic;
}
.jok-test-stars { color: #f5a623; font-size: 14px; margin-bottom: 20px; }
.jok-test-autor {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid #e8e8e8; padding-top: 16px;
}
.jok-test-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 700;
}
.jok-test-autor strong {
  display: block; font-family: 'Open Sans', sans-serif;
  font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px;
}
.jok-test-autor span {
  font-family: 'Open Sans', sans-serif; font-size: 10px; color: #999;
  display: flex; align-items: center; gap: 4px;
}
.jok-test-cta { margin-top: 40px; padding: 0 24px; }
.jok-test-btn {
  display: inline-block; font-family: 'Open Sans', sans-serif;
  font-size: 14px; font-weight: 700; color: #88b04b;
  border: 2px solid #88b04b; padding: 12px 32px;
  border-radius: 50px; text-decoration: none; transition: background 0.2s, color 0.2s;
}
.jok-test-btn:hover { background: #88b04b; color: #fff; }
@media (max-width: 768px) {
  .jok-test-titulo { font-size: 26px; }
  .jok-test-rating { gap: 12px; padding: 10px 20px; }
  .jok-test-rating-num { font-size: 28px; }
}
@media (max-width: 480px) {
  .jok-testimonios { padding: 52px 0; }
  .jok-testimonios-header { padding: 0 20px; margin-bottom: 36px; }
  .jok-test-rating { flex-direction: column; gap: 6px; border-radius: 16px; padding: 14px 20px; }
  .jok-test-rating-right { text-align: center; }
}
/* ===== ARTÍCULO BLOG ===== */
.jok-article { font-family: 'Open Sans', sans-serif; color: #333; max-width: 100%; }

.jok-art-hero {
  background: linear-gradient(135deg, #f4f7ee 0%, #e8f0d8 100%);
  padding: 80px 24px 64px; text-align: center;
  border-bottom: 3px solid #88b04b;
}
.jok-art-cat {
  display: inline-block; background: #88b04b; color: #fff;
  font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 5px 14px; border-radius: 50px; margin-bottom: 20px;
}
.jok-art-title {
  font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 700;
  color: #1a1a1a; line-height: 1.2; max-width: 760px; margin: 0 auto 20px;
}
.jok-art-subtitle {
  font-family: 'Open Sans', sans-serif; font-size: 17px; color: #555;
  max-width: 600px; margin: 0 auto 28px; line-height: 1.7;
}
.jok-art-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; font-size: 13px; color: #888; flex-wrap: wrap;
}
.jok-art-body { max-width: 740px; margin: 0 auto; padding: 56px 24px; }
.jok-art-body h2 {
  font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700;
  color: #1a1a1a; margin: 52px 0 16px; padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
}
.jok-art-body > p { font-size: 15px; line-height: 1.85; color: #444; margin: 0 0 16px; }
.jok-art-callout {
  background: #f4f7ee; border-left: 4px solid #88b04b;
  border-radius: 0 12px 12px 0; padding: 24px 28px; margin: 0 0 36px;
}
.jok-art-callout p { margin: 0; font-size: 16px; color: #333; line-height: 1.8; }
.jok-art-toc {
  background: #f7f7f7; border: 1px solid #e8e8e8;
  border-radius: 12px; padding: 24px 28px; margin: 0 0 40px;
}
.jok-art-toc-title {
  font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700;
  color: #1a1a1a; margin: 0 0 14px;
}
.jok-art-toc ol { margin: 0; padding-left: 20px; }
.jok-art-toc li { font-size: 14px; color: #555; margin-bottom: 8px; line-height: 1.5; }
.jok-art-toc a { color: #88b04b; text-decoration: none; }
.jok-art-toc a:hover { text-decoration: underline; }
.jok-art-cards-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 24px 0 40px;
}
.jok-art-card-sm {
  background: #fff; border: 1px solid #e8e8e8;
  border-radius: 12px; padding: 24px 20px; text-align: center;
}
.jok-art-card-icon { font-size: 28px; margin-bottom: 12px; }
.jok-art-card-sm h3 {
  font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700;
  color: #1a1a1a; margin: 0 0 8px;
}
.jok-art-card-sm p { font-size: 13px; line-height: 1.7; color: #666; margin: 0; }
.jok-art-product {
  display: flex; gap: 24px; background: #fff;
  border: 1px solid #e8e8e8; border-left: 4px solid #88b04b;
  border-radius: 0 16px 16px 0; padding: 28px 28px 28px 24px;
  margin: 20px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.jok-art-product--orange { border-left-color: #E59866; }
.jok-art-product-num {
  font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 700;
  color: #88b04b; opacity: 0.25; line-height: 1; flex-shrink: 0; width: 48px;
}
.jok-art-product--orange .jok-art-product-num { color: #E59866; }
.jok-art-product-body { flex: 1; }
.jok-art-product-badge {
  display: inline-block; background: #f4f7ee; color: #88b04b;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 3px 10px; border-radius: 50px; margin-bottom: 8px;
}
.jok-art-product--orange .jok-art-product-badge { background: #fdf3ec; color: #E59866; }
.jok-art-product-body h3 {
  font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700;
  color: #1a1a1a; margin: 0 0 10px;
}
.jok-art-product-body p { font-size: 14px; color: #555; line-height: 1.7; margin: 0 0 14px; }
.jok-art-product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.jok-art-product-tags span {
  background: #f7f7f7; color: #555; font-size: 12px;
  padding: 4px 10px; border-radius: 50px;
}
.jok-art-ideal { font-size: 13px !important; color: #666 !important; margin-bottom: 16px !important; }
.jok-art-btn {
  display: inline-block; background: #88b04b; color: #fff;
  font-size: 13px; font-weight: 700; padding: 10px 22px;
  border-radius: 50px; text-decoration: none; transition: background 0.2s;
}
.jok-art-btn:hover { background: #6d9138; color: #fff; }
.jok-art-product--orange .jok-art-btn { background: #E59866; }
.jok-art-product--orange .jok-art-btn:hover { background: #c97d4f; }
.jok-art-steps { display: flex; flex-direction: column; gap: 16px; margin: 24px 0 40px; }
.jok-art-step {
  display: flex; align-items: flex-start; gap: 20px;
  background: #fff; border: 1px solid #e8e8e8;
  border-radius: 12px; padding: 20px 24px;
}
.jok-art-step-num {
  width: 36px; height: 36px; background: #88b04b; color: #fff;
  font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.jok-art-step strong { display: block; font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.jok-art-step p { font-size: 14px; color: #666; margin: 0; line-height: 1.6; }
.jok-art-price-table { border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; margin: 24px 0 36px; }
.jok-art-price-row {
  display: grid; grid-template-columns: 140px 1fr 36px;
  align-items: center; gap: 16px; padding: 18px 24px;
  border-bottom: 1px solid #e8e8e8;
}
.jok-art-price-row:last-child { border-bottom: none; }
.jok-price-highlight { background: #f4f7ee; }
.jok-art-price-range { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: #88b04b; }
.jok-art-price-desc { font-size: 13px; color: #555; line-height: 1.5; }
.jok-art-price-dot { font-size: 18px; text-align: center; }
.jok-art-cta {
  background: linear-gradient(135deg, #88b04b, #6d9138);
  padding: 72px 24px; text-align: center;
}
.jok-art-cta-pre {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: rgba(255,255,255,0.75); margin: 0 0 12px;
}
.jok-art-cta h2 {
  font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700;
  color: #fff; margin: 0 0 14px; line-height: 1.2;
}
.jok-art-cta > p { font-size: 15px; color: rgba(255,255,255,0.8); margin: 0 0 32px; }
.jok-art-cta-btn {
  display: inline-block; background: #fff; color: #88b04b;
  font-size: 15px; font-weight: 700; padding: 16px 40px; border-radius: 50px;
  text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.jok-art-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(0,0,0,0.2); color: #88b04b; }
@media (max-width: 768px) {
  .jok-art-title { font-size: 28px; }
  .jok-art-cards-3 { grid-template-columns: 1fr; }
  .jok-art-meta { flex-direction: column; gap: 8px; }
  .jok-art-product { flex-direction: column; gap: 12px; }
  .jok-art-product-num { font-size: 28px; }
  .jok-art-price-row { grid-template-columns: 100px 1fr; }
  .jok-art-price-dot { display: none; }
  .jok-art-cta h2 { font-size: 24px; }
}
@media (max-width: 480px) {
  .jok-art-hero { padding: 52px 20px 48px; }
  .jok-art-body { padding: 40px 20px; }
  .jok-art-price-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
}
/* ===== SINGLE POST - OCULTAR ELEMENTOS ASTRA ===== */
.single-post .entry-header,
.single-post .post-thumbnail,
.single-post .entry-footer,
.single-post .breadcrumb-trail { display: none !important; }

.single-post .entry-content,
.single-post .ast-article-single {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.single-post .site-content .ast-container {
  padding: 0 !important;
  max-width: 100% !important;
}
.single-post .site-content,
.single-post #content,
.single-post #primary {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* ===== HERO ARTÍCULO REDISEÑO ===== */
.jok-article { overflow-x: hidden; }

.jok-art-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(135deg, #3d6b1a 0%, #5a8f2a 35%, #88b04b 70%, #b0cc6e 100%);
  padding: 100px 24px 130px;
  text-align: center;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  border-bottom: none;
}

@keyframes jokHeroBlobFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%  { transform: translateY(-20px) rotate(4deg); }
  66%  { transform: translateY(12px) rotate(-3deg); }
}

.jok-hero-blob {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.07);
  animation: jokHeroBlobFloat ease-in-out infinite;
  pointer-events: none;
}
.jok-hero-blob-1 { width: 380px; height: 380px; top: -110px; left: -90px; animation-duration: 9s; }
.jok-hero-blob-2 { width: 260px; height: 260px; top: -40px; right: -70px; animation-duration: 7s; animation-delay: 1.5s; }
.jok-hero-blob-3 { width: 190px; height: 190px; bottom: 50px; left: 22%; animation-duration: 11s; animation-delay: 3s; }
.jok-hero-blob-4 { width: 130px; height: 130px; bottom: 30px; right: 18%; animation-duration: 8s; animation-delay: 0.8s; }

.jok-hero-deco {
  position: absolute; pointer-events: none;
  fill: rgba(255,255,255,0.09);
}
.jok-hero-deco-left  { width: 220px; bottom: -10px; left: -20px;  transform: rotate(-15deg); }
.jok-hero-deco-right { width: 190px; top: -10px;    right: -15px; transform: rotate(25deg) scaleX(-1); }

.jok-art-hero-inner { position: relative; z-index: 2; }

.jok-art-hero .jok-art-cat   { background: #E59866; color: #fff; }
.jok-art-hero .jok-art-title { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.18); }
.jok-art-hero .jok-art-subtitle { color: rgba(255,255,255,0.85); }
.jok-art-hero .jok-art-meta  { color: rgba(255,255,255,0.7); }
/* ===== FIX ANCHO COMPLETO HERO ARTÍCULO ===== */
.single-post .elementor-section,
.single-post .e-con,
.single-post .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.single-post .elementor-widget-container {
  padding: 0 !important;
}

.jok-art-hero {
  width: 100% !important;
  left: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}
/* ===== FIX HERO ANCHO COMPLETO ===== */
.single-post .elementor-top-section,
.single-post .elementor-section {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.single-post .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

.single-post .elementor-column-wrap,
.single-post .elementor-widget-wrap,
.single-post .elementor-widget-container {
  padding: 0 !important;
}

.single-post .e-con,
.single-post .e-con-inner {
  max-width: 100% !important;
  padding: 0 !important;
}

.jok-art-hero {
  width: 100% !important;
  left: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}
/* ===== HERO ARTÍCULO — REDISEÑO EDITORIAL ===== */
.jok-hero2 {
  position: relative;
  background: #F8FBF5;
  overflow: hidden;
  padding: 70px 6% 90px;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 220px;
  align-items: center;
  gap: 40px;
  min-height: 380px;
}
.jok-hero2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#3d6b1a18 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  z-index: 0;
}
.jok-hero2::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #3d6b1a 0%, #88b04b 60%, #E59866 100%);
  z-index: 1;
}
/* Blobs de color animados */
.jok-hero2-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(65px);
  z-index: 0;
  pointer-events: none;
}
.jok-hero2-blob1 {
  width: 380px;
  height: 380px;
  background: #88b04b;
  top: -120px;
  right: 80px;
  opacity: 0.3;
  animation: jokBlobPulse 7s ease-in-out infinite alternate;
}
.jok-hero2-blob2 {
  width: 260px;
  height: 260px;
  background: #E59866;
  bottom: -80px;
  right: -60px;
  opacity: 0.25;
  animation: jokBlobPulse 5s ease-in-out 2s infinite alternate;
}
.jok-hero2-blob3 {
  width: 200px;
  height: 200px;
  background: #b8d988;
  top: 40%;
  left: -60px;
  opacity: 0.3;
  animation: jokBlobPulse 9s ease-in-out 1s infinite alternate;
}
@keyframes jokBlobPulse {
  from { transform: scale(1); opacity: 0.25; }
  to   { transform: scale(1.3); opacity: 0.45; }
}

/* Contenido */
.jok-hero2-content {
  position: relative;
  z-index: 2;
}
.jok-hero2-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #3d6b1a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: 7px 18px;
  border-radius: 50px;
  margin-bottom: 22px;
}
.jok-hero2-title {
  font-size: clamp(26px, 4vw, 50px);
  font-weight: 900;
  color: #1a3a08;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}
.jok-hero2-sub {
  font-size: clamp(15px, 2vw, 20px);
  color: #5a8f2a;
  margin: 0 0 28px;
  font-weight: 500;
}
.jok-hero2-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.jok-hero2-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #cee8a0;
  color: #3d6b1a;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 10px #3d6b1a0e;
}

/* Ilustración flotante */
.jok-hero2-plant {
  position: relative;
  z-index: 2;
  animation: jokPlantFloat 4s ease-in-out infinite;
}
@keyframes jokPlantFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%       { transform: translateY(-14px) rotate(1.5deg); }
}

/* Ola inferior */
.jok-hero2-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 3;
  line-height: 0;
}
.jok-hero2-wave svg {
  display: block;
  width: 100%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .jok-hero2 {
    grid-template-columns: 1fr;
    padding: 55px 24px 80px;
    text-align: center;
  }
  .jok-hero2-plant { display: none; }
  .jok-hero2-meta  { justify-content: center; }
  .jok-hero2::after {
    left: 0; right: 0;
    top: 0;  bottom: auto;
    width: 100%; height: 5px;
    background: linear-gradient(90deg, #3d6b1a, #88b04b, #E59866);
  }
}
/* ============================================
   CUERPO DEL ARTÍCULO — JARDINOK
   ============================================ */

/* ----- CALLOUT INTRO ----- */
.jok-art-callout {
  background: linear-gradient(135deg, #f0f8e8, #e8f5d5);
  border-left: 5px solid #3d6b1a;
  border-radius: 14px;
  padding: 28px 32px;
  margin: 40px auto;
  max-width: 860px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.jok-art-callout-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: #3d6b1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}
.jok-art-callout-text h3 {
  color: #1a3a08;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
}
.jok-art-callout-text p {
  color: #3d6b1a;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

/* ----- TOC ----- */
.jok-art-toc {
  background: #fff;
  border: 2px solid #cee8a0;
  border-radius: 16px;
  padding: 28px 32px;
  margin: 32px auto;
  max-width: 860px;
}
.jok-art-toc-title {
  color: #1a3a08;
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.jok-art-toc-title .fa {
  color: #3d6b1a;
  font-size: 18px;
}
.jok-art-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.jok-art-toc li {
  counter-increment: toc;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.jok-art-toc li::before {
  content: counter(toc);
  background: #3d6b1a;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jok-art-toc a {
  color: #3d6b1a;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.jok-art-toc a:hover { color: #88b04b; }
.jok-art-toc a .fa {
  font-size: 13px;
  color: #88b04b;
  width: 16px;
}

/* ----- SECCIONES GENERALES ----- */
.jok-art-section {
  max-width: 900px;
  margin: 55px auto;
  padding: 0 20px;
}
.jok-art-section-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: #1a3a08;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.jok-art-section-title .fa {
  color: #88b04b;
  font-size: 0.85em;
}
.jok-art-section-sub {
  font-size: 15px;
  color: #888;
  margin: 0 0 30px;
}

/* ----- CRITERIOS ----- */
.jok-art-criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.jok-art-criteria-card {
  background: #fff;
  border: 1.5px solid #e0efd0;
  border-radius: 18px;
  padding: 28px 18px;
  text-align: center;
  box-shadow: 0 4px 20px #3d6b1a07;
  transition: transform 0.2s, box-shadow 0.2s;
}
.jok-art-criteria-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px #3d6b1a14;
}
.jok-art-criteria-icon {
  width: 68px;
  height: 68px;
  background: linear-gradient(135deg, #e8f5d5, #d4ebb0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #3d6b1a;
  font-size: 26px;
}
.jok-art-criteria-card h4 {
  color: #1a3a08;
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 8px;
}
.jok-art-criteria-card p {
  color: #666;
  font-size: 13.5px;
  margin: 0;
  line-height: 1.65;
}

/* ----- PRODUCT CARDS ----- */
.jok-art-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
  margin-top: 20px;
}
.jok-art-product-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 28px #00000010;
  border: 1.5px solid #efefef;
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.jok-art-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px #3d6b1a18;
}
.jok-art-product-card.top-pick {
  border-color: #3d6b1a;
}
.jok-art-product-badge {
  background: #3d6b1a;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 9px 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.jok-art-product-img {
  width: 100%;
  height: 185px;
  object-fit: contain;
  background: #f7faf2;
  padding: 16px;
}
.jok-art-product-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.jok-art-product-name {
  font-size: 16px;
  font-weight: 800;
  color: #1a3a08;
  margin: 0 0 8px;
}
.jok-art-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.jok-art-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.jok-art-rating-num { color: #777; font-size: 13px; font-weight: 600; }
.jok-art-product-pros,
.jok-art-product-cons {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.jok-art-product-pros li,
.jok-art-product-cons li {
  font-size: 13.5px;
  color: #444;
  margin-bottom: 6px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.jok-art-product-pros li .fa { color: #3d6b1a; font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.jok-art-product-cons li .fa { color: #c0392b; font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.jok-art-product-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.jok-art-product-price {
  font-size: 22px;
  font-weight: 900;
  color: #3d6b1a;
}
.jok-art-product-price span {
  font-size: 12px;
  color: #aaa;
  font-weight: 400;
  display: block;
  line-height: 1.2;
}
.jok-art-product-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #3d6b1a;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 10px;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.jok-art-product-btn:hover { background: #5a8f2a; transform: scale(1.03); }
.jok-art-product-btn .fa { font-size: 13px; }

/* ----- TABLA COMPARATIVA ----- */
.jok-art-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: 0 4px 20px #00000009;
  margin-top: 20px;
}
.jok-art-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  min-width: 600px;
}
.jok-art-table thead tr { background: #3d6b1a; color: #fff; }
.jok-art-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.jok-art-table th .fa { margin-right: 6px; opacity: 0.85; }
.jok-art-table tbody tr:nth-child(even) { background: #f6faf2; }
.jok-art-table tbody tr:hover { background: #e8f5d5; transition: background 0.15s; }
.jok-art-table td { padding: 13px 16px; color: #333; border-bottom: 1px solid #eee; }
.jok-art-table td:first-child { font-weight: 700; color: #1a3a08; }
.jok-table-check .fa { color: #3d6b1a; font-size: 16px; }
.jok-table-cross .fa { color: #c0392b; font-size: 16px; }
.jok-table-winner { background: #fffde7 !important; }
.jok-table-winner td:first-child::after { content: ' 🏆'; }

/* ----- FAQ ----- */
.jok-art-faq { margin-top: 20px; }
.jok-art-faq-item {
  background: #fff;
  border: 1.5px solid #deefc5;
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.jok-art-faq-q {
  padding: 18px 22px;
  font-weight: 800;
  color: #1a3a08;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.jok-art-faq-q .fa-question-circle {
  color: #E59866;
  font-size: 18px;
  flex-shrink: 0;
}
.jok-art-faq-q .fa-chevron-down {
  margin-left: auto;
  color: #3d6b1a;
  font-size: 14px;
}
.jok-art-faq-a {
  padding: 0 22px 18px 52px;
  color: #555;
  font-size: 14.5px;
  line-height: 1.8;
}

/* ----- CTA FINAL ----- */
.jok-art-cta {
  background: linear-gradient(135deg, #3d6b1a 0%, #5a8f2a 100%);
  border-radius: 22px;
  padding: 54px 44px;
  text-align: center;
  margin: 55px auto;
  max-width: 860px;
  position: relative;
  overflow: hidden;
}
.jok-art-cta::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 260px; height: 260px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.jok-art-cta::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -50px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}
.jok-art-cta-icon {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 30px;
  color: #fff;
  position: relative;
  z-index: 1;
}
.jok-art-cta h2 {
  color: #fff;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}
.jok-art-cta p {
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  margin: 0 0 30px;
  position: relative;
  z-index: 1;
}
.jok-art-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #E59866;
  color: #fff !important;
  font-size: 16px;
  font-weight: 800;
  padding: 17px 40px;
  border-radius: 50px;
  text-decoration: none !important;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  position: relative;
  z-index: 1;
}
.jok-art-cta-btn:hover { background: #d4845a; transform: scale(1.04); }
.jok-art-cta-btn .fa { font-size: 15px; }

/* ----- RESPONSIVE ----- */
@media (max-width: 768px) {
  .jok-art-callout { flex-direction: column; padding: 22px 18px; }
  .jok-art-callout-icon { width: 48px; height: 48px; font-size: 18px; }
  .jok-art-toc { padding: 22px 18px; }
  .jok-art-products-grid { grid-template-columns: 1fr; }
  .jok-art-cta { padding: 36px 22px; border-radius: 16px; }
  .jok-art-faq-a { padding-left: 22px; }
}
/* ===== ESTILOS GUTENBERG ARTÍCULOS JARDINOK ===== */

.single-post .entry-content h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  color: #1a3a08;
  margin: 50px 0 12px;
  padding-bottom: 10px;
  border-bottom: 3px solid #88b04b;
  display: flex;
  align-items: center;
  gap: 10px;
}
.single-post .entry-content h3 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  color: #3d6b1a;
  margin: 30px 0 10px;
}
.single-post .entry-content p {
  font-size: 16px;
  line-height: 1.85;
  color: #444;
  margin-bottom: 20px;
  max-width: 800px;
}
.single-post .entry-content ul,
.single-post .entry-content ol {
  font-size: 15.5px;
  line-height: 1.8;
  color: #444;
  padding-left: 22px;
  margin-bottom: 20px;
  max-width: 800px;
}
.single-post .entry-content ul li {
  margin-bottom: 8px;
  list-style: none;
  padding-left: 26px;
  position: relative;
}
.single-post .entry-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  background: #88b04b;
  border-radius: 50%;
}
.single-post .entry-content ol li {
  margin-bottom: 8px;
}
.single-post .entry-content strong {
  color: #1a3a08;
  font-weight: 800;
}
.single-post .entry-content a {
  color: #3d6b1a;
  font-weight: 600;
  text-decoration: underline;
}
.single-post .entry-content a:hover {
  color: #88b04b;
}
.single-post .entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.single-post .entry-content .wp-block-table th {
  background: #3d6b1a;
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
}
.single-post .entry-content .wp-block-table td {
  padding: 11px 16px;
  border-bottom: 1px solid #eee;
  color: #333;
}
.single-post .entry-content .wp-block-table tr:nth-child(even) {
  background: #f6faf2;
}

/* Ancho máximo del contenido del artículo */
.single-post .entry-content > *:not(.jok-hero2):not(.jok-art-callout):not(.jok-art-toc):not(.jok-art-section):not(.jok-art-cta) {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* BLOG JARDINOK INICIO */
/* ═══════════════════════════════════════════════════════════
   BLOG JARDINOK · diseño del listado de entradas
   Sistema "JardinOK, Jardín Real". No tocar a mano: se regenera.
   ═══════════════════════════════════════════════════════════ */

body.blog {
	--jokb-bg: #F4F7EE;
	--jokb-surface: #FFFFFF;
	--jokb-ink: #1A1A1A;
	--jokb-mut: #5D6B52;
	--jokb-line: #DFE6D3;
	--jokb-acc: #3D6B1A;
	--jokb-acc2: #88B04B;
	--jokb-pill: #EDF3E1;
}

body.blog .site-content {
	background: var(--jokb-bg);
}

body.blog #primary {
	padding-top: 54px;
	padding-bottom: 64px;
}

/* ── Cabecera ── */

.jok-blog-head {
	margin: 0 0 40px;
	padding: 0 0 28px;
	border-bottom: 1px solid var(--jokb-line);
}

.jok-blog-h1 {
	margin: 0 0 14px;
	font-size: clamp(30px, 4.6vw, 46px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--jokb-ink);
}

.jok-blog-sub {
	margin: 0;
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--jokb-mut);
}

.jok-blog-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.jok-filtro {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--jokb-line);
	border-radius: 999px;
	background: var(--jokb-surface);
	color: var(--jokb-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.jok-filtro:hover,
.jok-filtro:focus-visible {
	border-color: var(--jokb-acc2);
	color: var(--jokb-acc);
}

.jok-filtro-activo {
	background: var(--jokb-acc);
	border-color: var(--jokb-acc);
	color: #FFFFFF;
}

.jok-filtro-num {
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--jokb-pill);
	color: var(--jokb-acc);
	font-size: 11.5px;
	font-weight: 700;
}

.jok-filtro-activo .jok-filtro-num {
	background: rgba(255, 255, 255, 0.22);
	color: #FFFFFF;
}

/* ── Rejilla ── */

body.blog .site-main > .ast-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-left: 0;
	margin-right: 0;
}

body.blog .ast-article-post {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* ── Tarjeta ── */

body.blog .ast-article-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--jokb-surface);
	border: 1px solid var(--jokb-line);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.blog .ast-article-inner:hover,
body.blog .ast-article-inner:focus-within {
	transform: translateY(-4px);
	border-color: var(--jokb-acc2);
	box-shadow: 0 14px 34px -20px rgba(31, 42, 24, 0.5);
}

/* Imagen destacada */

body.blog .ast-blog-featured-section {
	order: 1;
	margin: 0;
}

body.blog .ast-blog-featured-section img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Marcador local para entradas sin foto propia todavía.
   Panel de la paleta, no fotografía de banco de imágenes. */

body.blog .ast-article-inner.ast-no-thumb .ast-blog-featured-section {
	position: relative;
	aspect-ratio: 16 / 5;
	background:
		radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.20) 0%, transparent 46%),
		linear-gradient(148deg, var(--jokb-acc2) 0%, var(--jokb-acc) 100%);
}

body.blog .ast-article-inner.ast-no-thumb .ast-blog-featured-section::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: -8px;
	width: 92px;
	height: 92px;
	opacity: 0.26;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
}

/* Meta: categoría y autor */

body.blog .ast-article-inner .entry-header {
	order: 2;
	margin: 0 0 12px;
	padding: 20px 22px 0;
}

body.blog .ast-article-inner .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--jokb-mut);
}

body.blog .ast-taxonomy-container a {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--jokb-pill);
	color: var(--jokb-acc);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
}

body.blog .ast-taxonomy-container a:hover {
	background: var(--jokb-acc);
	color: #FFFFFF;
}

body.blog .entry-meta .posted-by a {
	color: var(--jokb-mut);
	text-decoration: none;
}

/* Astra intercala un separador entre elementos de meta: sobra en la tarjeta */

body.blog .entry-meta .ast-blog-single-element::after,
body.blog .entry-meta .post-meta-divider {
	content: none;
	display: none;
}

body.blog .entry-meta .comments-link {
	display: none;
}

/* Título */

body.blog .ast-article-inner .entry-title {
	order: 3;
	margin: 0 0 10px;
	padding: 0 22px;
	font-size: 19.5px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
}

body.blog .ast-article-inner .entry-title a {
	color: var(--jokb-ink);
	text-decoration: none;
}

body.blog .ast-article-inner .entry-title a:hover {
	color: var(--jokb-acc);
}

/* Entradilla */

body.blog .ast-excerpt-container {
	order: 4;
	margin: 0 0 18px;
	padding: 0 22px;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--jokb-mut);
}

body.blog .ast-excerpt-container p {
	margin: 0;
}

/* Enlace de lectura */

body.blog .ast-read-more-container {
	order: 5;
	margin: auto 0 0;
	padding: 0 22px 22px;
}

body.blog .ast-read-more-container a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--jokb-acc);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

body.blog .ast-read-more-container a::after {
	content: "→";
	transition: transform 0.2s ease;
}

body.blog .ast-read-more-container a:hover::after {
	transform: translateX(3px);
}

/* ── Colapso móvil ── */

@media (max-width: 700px) {

	body.blog .site-main > .ast-row {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	body.blog #primary {
		padding-top: 36px;
	}

	.jok-blog-head {
		margin-bottom: 30px;
	}
}

/* ── Movimiento reducido ── */

@media (prefers-reduced-motion: reduce) {

	body.blog .ast-article-inner,
	body.blog .ast-read-more-container a::after,
	.jok-filtro {
		transition: none;
	}

	body.blog .ast-article-inner:hover,
	body.blog .ast-article-inner:focus-within {
		transform: none;
	}
}

/* BLOG JARDINOK FIN */



/* FIX ICONOS TABLA INICIO */

/* El marcado usa , pero las reglas originales
   apuntaban solo a .fa, que en Font Awesome 5 es una clase distinta. */

.jok-table-check i,
.jok-table-check .fa {
	color: #3d6b1a;
	font-size: 16px;
}

.jok-table-cross i,
.jok-table-cross .fa {
	color: #c0392b;
	font-size: 16px;
}

/* FIX ICONOS TABLA FIN */

/* BUSCADOR Y SCROLL INFINITO INICIO */

.jok-buscador {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	max-width: 560px;
	margin: 26px 0 8px;
	background: #fff;
	border: 1.5px solid #DFE6D3;
	border-radius: 999px;
	padding: 6px 6px 6px 18px;
	transition: border-color .2s, box-shadow .2s;
}

.jok-buscador:focus-within {
	border-color: #88B04B;
	box-shadow: 0 0 0 4px rgba(136,176,75,.18);
}

.jok-buscador-icono {
	color: #5D6B52;
	font-size: 15px;
	flex-shrink: 0;
}

.jok-buscador-campo {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 10px 4px !important;
	font-size: 15px;
	color: #1A1A1A;
}

.jok-buscador-campo:focus {
	outline: none;
	box-shadow: none !important;
}

.jok-buscador-campo::placeholder { color: #94a189; }

.jok-buscador-campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
	height: 14px;
	width: 14px;
	background: #DFE6D3;
	border-radius: 50%;
	cursor: pointer;
}

.jok-buscador-btn {
	flex-shrink: 0;
	background: #3D6B1A;
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 11px 24px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s;
}

.jok-buscador-btn:hover,
.jok-buscador-btn:focus { background: #2f5414; color: #fff; }

/* Paginación real: se queda en el HTML para los buscadores
   y solo se oculta cuando el scroll infinito ha arrancado. */

.jok-inf-activo .ast-pagination,
.jok-inf-activo .navigation.pagination {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.jok-inf { text-align: center; margin: 36px 0 8px; }

.jok-inf-btn {
	display: inline-block;
	background: #88B04B;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	padding: 14px 34px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s, transform .2s;
}

.jok-inf-btn:hover { background: #6d9138; transform: translateY(-2px); }

.jok-inf-btn.jok-inf-cargando { background: #a8bd8a; pointer-events: none; }

.jok-inf-fin { font-size: 14px; color: #5D6B52; margin: 8px 0 0; }

.jok-inf-vivo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.jok-inf-nuevo { animation: jok-inf-entra .45s ease both; }

@keyframes jok-inf-entra {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

	.jok-inf-nuevo { animation: none; }

	.jok-inf-btn:hover { transform: none; }
}

@media (max-width: 600px) {

	.jok-buscador {
		margin-top: 20px;
		padding-left: 14px;
	}

	.jok-buscador-btn { padding: 11px 18px; }
}

/* BUSCADOR Y SCROLL INFINITO FIN */

/* ARTICULOS RELACIONADOS INICIO */

.jok-rel {
	margin: 56px auto 8px;
	max-width: 900px;
	padding-top: 40px;
	border-top: 1.5px solid #DFE6D3;
}

.jok-rel-h2 {
	font-size: 25px;
	font-weight: 800;
	color: #1A1A1A;
	margin: 0 0 26px;
	display: flex;
	align-items: center;
	gap: 11px;
}

.jok-rel-h2 .fas { color: #88B04B; font-size: 21px; }

.jok-rel-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.jok-rel-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1.5px solid #DFE6D3;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none !important;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.jok-rel-card:hover,
.jok-rel-card:focus-visible {
	transform: translateY(-3px);
	border-color: #88B04B;
	box-shadow: 0 12px 28px rgba(61,107,26,.12);
}

.jok-rel-img { display: block; line-height: 0; background: #EDF3E1; }

.jok-rel-img img {
	width: 100%;
	height: 132px;
	object-fit: cover;
	display: block;
}

.jok-rel-img-vacia {
	display: block;
	height: 132px;
	background: linear-gradient(135deg,#EDF3E1,#DFE6D3);
}

.jok-rel-cat {
	display: inline-block;
	align-self: flex-start;
	margin: 14px 16px 0;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #3D6B1A;
	background: #EDF3E1;
	padding: 5px 11px;
	border-radius: 999px;
}

.jok-rel-t {
	display: block;
	padding: 10px 16px 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.4;
	color: #1A1A1A;
}

.jok-rel-mas {
	display: block;
	margin-top: auto;
	padding: 12px 16px 16px;
	font-size: 13px;
	font-weight: 700;
	color: #3D6B1A;
}

.jok-rel-mas .fas { font-size: 11px; transition: transform .2s; }

.jok-rel-card:hover .jok-rel-mas .fas { transform: translateX(4px); }

@media (max-width: 880px) {

	.jok-rel-grid { grid-template-columns: 1fr 1fr; }

	.jok-rel-grid .jok-rel-card:nth-child(3) { display: none; }
}

@media (max-width: 560px) {

	.jok-rel-grid { grid-template-columns: 1fr; }

	.jok-rel-grid .jok-rel-card:nth-child(3) { display: flex; }

	.jok-rel-img img,
	.jok-rel-img-vacia { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {

	.jok-rel-card:hover,
	.jok-rel-card:focus-visible { transform: none; }

	.jok-rel-card:hover .jok-rel-mas .fas { transform: none; }
}

/* ARTICULOS RELACIONADOS FIN */

/* INTRO TIENDA INICIO */

.jok-tienda-intro { margin: 0 0 44px; }

.jok-tienda-lead {
	font-size: 18px;
	line-height: 1.75;
	color: #3a4536;
	max-width: 760px;
	margin: 0 0 30px;
}

.jok-tienda-crit {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

.jok-tienda-item {
	background: #fff;
	border: 1.5px solid #DFE6D3;
	border-radius: 14px;
	padding: 22px 20px;
}

.jok-tienda-ico { font-size: 26px; display: block; margin-bottom: 10px; }

.jok-tienda-item h2 {
	font-size: 16px !important;
	font-weight: 800;
	color: #1A1A1A;
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 1.35;
}

.jok-tienda-item p {
	font-size: 14px;
	line-height: 1.7;
	color: #5D6B52;
	margin: 0;
}

.jok-tienda-nota {
	background: #EDF3E1;
	border-radius: 14px;
	padding: 18px 22px;
	font-size: 15px;
	line-height: 1.7;
	color: #3a4536;
	margin: 0;
}

.jok-tienda-nota a { color: #3D6B1A; font-weight: 700; }

@media (max-width: 880px) {

	.jok-tienda-crit { grid-template-columns: 1fr; }

	.jok-tienda-lead { font-size: 16.5px; }
}

/* INTRO TIENDA FIN */


/* ===== FONDOS UNIFICADOS HOME (17 agosto 2026) =====
   Todas las secciones de la home comparten el hueso #F4F7EE del sistema.
   Antes convivian cuatro tonos casi identicos (#f9f9f9 heredado del tema,
   #F4F7EE, #F7F7F7 y #F8FAF4) que dibujaban bandas sucias al hacer scroll.
   Va aqui y no solo en los ajustes de Elementor a proposito: el CSS de
   Elementor se sirve por fichero y LiteSpeed cachea variantes obsoletas,
   mientras que el CSS del Personalizador se imprime inline y llega siempre.
   El hero conserva su foto. Los otros dos usos de #f7f7f7 del CSS
   (.jok-art-toc y .jok-art-product-tags) son de los articulos, no se tocan. */
body .elementor-1717 .elementor-element.elementor-element-4c104d5,
body .elementor-1717 .elementor-element.elementor-element-45f209a,
body .elementor-1717 .elementor-element.elementor-element-dc35e74,
body .elementor-1717 .elementor-element.elementor-element-b238f7c,
body .elementor-1717 .elementor-element.elementor-element-7a7782b,
body .elementor-1717 .elementor-element.elementor-element-fd70948,
body .elementor-1717 .elementor-element.elementor-element-jokblog2026 {
  /* !important a proposito: Elementor genera su regla con un :not(...) que
     suma especificidad de clase y ganaria a cualquier selector razonable. */
  background-color: #F4F7EE !important;
  background-image: none !important;
}
.jok-trust-bar { background: #F4F7EE; }
.jok-testimonios { background: #F4F7EE; }
/* ===== FIN FONDOS UNIFICADOS HOME ===== */


/* ===== MENU MOVIL JARDINOK (17 agosto 2026) =====
   Panel off-canvas que sustituye al desplegable basico de Astra.
   Marcado y comportamiento en novamira-sandbox/jok-menu-movil.php.
   Medidas tactiles: 48x48 el boton y 52px de alto cada entrada. Apple HIG pide
   44x44 como minimo y Material 48dp; antes eran 41px, por debajo de ambos.
   Colores, radios y tipografia salen del sistema jardinok-jardin-real. */

@media (max-width: 921px) {
  .ast-mobile-menu-trigger-outline,
  .main-header-menu-toggle {
    min-width: 48px;
    min-height: 48px;
    border-radius: 10px;
  }
  .main-header-bar-navigation.toggle-on { display: none !important; }
}

.jok-mm[hidden] { display: none; }

.jok-mm {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.jok-mm-velo {
  position: absolute;
  inset: 0;
  background: rgba(29, 42, 20, 0.5);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.jok-mm-abierto .jok-mm-velo { opacity: 1; }

.jok-mm-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-left: 1px solid #DFE6D3;
  font-family: Poppins, sans-serif;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.jok-mm-abierto .jok-mm-panel { transform: translateX(0); }

body.jok-mm-bloqueado { overflow: hidden; }

/* --- cabecera del panel --- */
.jok-mm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #DFE6D3;
}
.jok-mm-marca {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1A1A1A;
}
.jok-mm-x {
  /* flex: 0 0 evita que el flex lo estire; box-sizing y padding:0 neutralizan
     el relleno horizontal que Astra pone a todos los  y que lo
     convertia en un ovalo de 64px de ancho. */
  flex: 0 0 48px;
  box-sizing: border-box;
  padding: 0;
  width: 48px;
  height: 48px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDF3E1;
  color: #3D6B1A;
  border: 0;
  border-radius: 999px;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.jok-mm-x:hover { background: #DFE6D3; }

/* --- buscador --- */
.jok-mm-buscar {
  position: relative;
  display: flex;
  align-items: center;
}
.jok-mm-buscar .fa-search {
  position: absolute;
  left: 16px;
  font-size: 14px;
  color: #5D6B52;
  pointer-events: none;
}
.jok-mm-buscar input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: 0 16px 0 42px;
  background: #F4F7EE;
  border: 1px solid #DFE6D3;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  color: #1A1A1A;
}
.jok-mm-buscar input[type="search"]::placeholder { color: #5D6B52; }
.jok-mm-buscar input[type="search"]:focus {
  outline: 2px solid #3D6B1A;
  outline-offset: 1px;
  border-color: #3D6B1A;
}

/* --- navegacion --- */
.jok-mm-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jok-mm-item {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 52px;
  padding: 6px 12px;
  border-radius: 14px;
  color: #1A1A1A;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s ease;
}
.jok-mm-item:hover,
.jok-mm-item:focus-visible { background: #F4F7EE; }
.jok-mm-item span { flex: 1; }

.jok-mm-ico {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDF3E1;
  color: #3D6B1A;
  border-radius: 10px;
  font-size: 15px;
}
.jok-mm-fl {
  font-size: 12px;
  color: #5D6B52;
  transition: transform 0.18s ease;
}
.jok-mm-item:hover .jok-mm-fl { transform: translateX(3px); }

.jok-mm-actual {
  background: #F4F7EE;
  color: #3D6B1A;
  font-weight: 700;
}
.jok-mm-actual .jok-mm-ico {
  background: #3D6B1A;
  color: #FFFFFF;
}

/* --- llamada a la accion --- */
.jok-mm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 20px;
  background: #3D6B1A;
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}
.jok-mm-cta:hover,
.jok-mm-cta:focus-visible {
  background: #2F5414;
  color: #FFFFFF;
}
.jok-mm-cta .fa-arrow-right { font-size: 13px; }

/* --- contacto --- */
.jok-mm-contacto {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #DFE6D3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jok-mm-contacto-tit {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5D6B52;
}
.jok-mm-contacto a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  color: #3D6B1A;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.jok-mm-contacto a:hover { text-decoration: underline; }
.jok-mm-contacto .fas { width: 18px; text-align: center; font-size: 14px; }

/* --- foco visible en todo el panel --- */
.jok-mm a:focus-visible,
.jok-mm button:focus-visible {
  outline: 2px solid #3D6B1A;
  outline-offset: 2px;
}

/* --- quien prefiera menos movimiento, sin deslizamiento --- */
@media (prefers-reduced-motion: reduce) {
  .jok-mm-panel,
  .jok-mm-velo,
  .jok-mm-fl {
    transition: none;
  }
}

/* En escritorio el panel no pinta nada. */
@media (min-width: 922px) {
  .jok-mm { display: none; }
}
/* ===== FIN MENU MOVIL JARDINOK ===== */


/* ===== TIENDA JARDINOK (17 agosto 2026) =====
   Cabecera del archivo de producto y navegacion por categorias.
   Marcado en novamira-sandbox/jok-tienda.php.
   Tokens del sistema jardinok-jardin-real: hueso #F4F7EE de ambiente, blanco
   como superficie elevada, borde fino #DFE6D3 en vez de sombra, acento #3D6B1A
   como unico verde valido para texto, radios 10 / 14 / pastilla. */

/* --- cabecera --- */
.jok-tienda-cab {
  margin: 0 0 34px;
}

.jok-tienda-sub {
  max-width: 62ch;
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.65;
  color: #5D6B52;
}

.jok-tienda-buscar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 0 20px;
}
.jok-tienda-buscar .fa-search {
  position: absolute;
  left: 20px;
  font-size: 15px;
  color: #5D6B52;
  pointer-events: none;
}
.jok-tienda-buscar input[type="search"] {
  flex: 1;
  min-height: 52px;
  padding: 0 18px 0 48px;
  background: #F4F7EE;
  border: 1px solid #DFE6D3;
  border-radius: 999px;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  color: #1A1A1A;
}
.jok-tienda-buscar input[type="search"]::placeholder { color: #5D6B52; }
.jok-tienda-buscar input[type="search"]:focus {
  outline: 2px solid #3D6B1A;
  outline-offset: 1px;
  border-color: #3D6B1A;
}
.jok-tienda-buscar button {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 26px;
  background: #3D6B1A;
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.jok-tienda-buscar button:hover { background: #2F5414; }

.jok-tienda-garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jok-tienda-garantias li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  color: #5D6B52;
}
.jok-tienda-garantias .fas {
  color: #3D6B1A;
  font-size: 13px;
}

/* --- seccion de categorias --- */
.jok-tienda-cats {
  margin: 40px 0 8px;
  padding: 34px 30px 36px;
  background: #F4F7EE;
  border-radius: 14px;
}

.jok-tienda-cats-tit {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #1A1A1A;
}
.jok-tienda-cats-sub {
  margin: 0 0 26px;
  font-size: 15px;
  color: #5D6B52;
}

.jok-tienda-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.jok-cat {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #DFE6D3;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.jok-cat:hover,
.jok-cat:focus-visible {
  transform: translateY(-4px);
  border-color: #88B04B;
  /* Sombra tenida de verde, nunca negra pura. */
  box-shadow: 0 10px 24px rgba(61, 107, 26, 0.12);
}
.jok-cat:focus-visible {
  outline: 2px solid #3D6B1A;
  outline-offset: 2px;
}

.jok-cat-foto {
  display: block;
  aspect-ratio: 4 / 3;
  background: #EDF3E1;
  overflow: hidden;
}
.jok-cat-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.jok-cat:hover .jok-cat-foto img { transform: scale(1.04); }

.jok-cat-sinfoto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #88B04B;
  font-size: 30px;
}

.jok-cat-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  padding: 16px 18px 16px;
}
.jok-cat-nom {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #1A1A1A;
}
.jok-cat-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5D6B52;
}

.jok-cat-fl {
  position: absolute;
  right: 18px;
  bottom: 20px;
  font-size: 13px;
  color: #3D6B1A;
  transition: transform 0.2s ease;
}
.jok-cat { position: relative; }
.jok-cat:hover .jok-cat-fl { transform: translateX(4px); }
.jok-cat-txt { padding-right: 46px; }

/* --- aviso de tienda vacia, menos seco --- */
.woocommerce-info {
  background: #EDF3E1;
  border-top-color: #88B04B;
  color: #1A1A1A;
}

@media (max-width: 600px) {
  .jok-tienda-cats { padding: 26px 18px 28px; }
  .jok-tienda-buscar { flex-wrap: wrap; }
  .jok-tienda-buscar input[type="search"] { flex: 1 1 100%; }
  .jok-tienda-buscar button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .jok-cat,
  .jok-cat-foto img,
  .jok-cat-fl { transition: none; }
  .jok-cat:hover { transform: none; }
  .jok-cat:hover .jok-cat-foto img { transform: none; }
}
/* ===== FIN TIENDA JARDINOK ===== */


/* ===== CABECERA ESCRITORIO JARDINOK (18 agosto 2026) =====
   Barra de confianza, buscador y acceso a secciones.
   Marcado en novamira-sandbox/jok-cabecera.php.
   Solo a partir de 922px: por debajo manda el panel de jok-menu-movil.php. */

@media (min-width: 922px) {

  .jok-cab-ancho {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  /* --- barra de confianza --- */
  .jok-cab-confianza {
    position: relative;
    z-index: 100;
    background: linear-gradient(90deg, #0D1609 0, #16290F 40%, #A34E00 72%, #EF6C00 100%);
    color: #FFFFFF;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    line-height: 1;
  }
  .jok-cab-confianza .jok-cab-ancho {
    min-height: 36px;
  }

  .jok-cab-garantias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .jok-cab-garantias li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #FFFFFF;
  }
  .jok-cab-garantias .fas { font-size: 11px; opacity: 0.85; }

  .jok-cab-tel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
  }
  .jok-cab-tel .fas { font-size: 11px; opacity: 0.85; }
  .jok-cab-tel a {
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
  }
  .jok-cab-tel a:hover { text-decoration: underline; }

  .jok-cab-garantias a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    text-decoration: none;
  }
  .jok-cab-garantias a:hover { color: #FFFFFF; text-decoration: underline; }

  .jok-cab-tel {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(13, 22, 9, 0.6);
  }

  /* --- fila de buscador y secciones ---
     position:sticky la deja pegada arriba al bajar sin necesidad de calcular
     alturas ni de tocar el position:absolute que Astra usa para superponer la
     cabecera al hero de la portada. */
  .jok-cab-fila {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #FFFFFF;
    border-bottom: 1px solid #DFE6D3;
    font-family: Poppins, sans-serif;
    transition: box-shadow 0.2s ease;
  }
  .jok-cab-fila .jok-cab-ancho {
    min-height: 62px;
    gap: 30px;
  }
  body.jok-cab-fija .jok-cab-fila {
    box-shadow: 0 4px 16px rgba(61, 107, 26, 0.10);
  }

  /* --- buscador --- */
  .jok-cab-buscar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 420px;
    max-width: 520px;
    margin: 0;
  }
  .jok-cab-buscar .fa-search {
    position: absolute;
    left: 18px;
    font-size: 14px;
    color: #5D6B52;
    pointer-events: none;
  }
  .jok-cab-buscar input[type="search"] {
    flex: 1;
    min-height: 44px;
    padding: 0 16px 0 44px;
    background: #F4F7EE;
    border: 1px solid #DFE6D3;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    color: #1A1A1A;
  }
  .jok-cab-buscar input[type="search"]::placeholder { color: #5D6B52; }
  .jok-cab-buscar input[type="search"]:focus {
    outline: 2px solid #3D6B1A;
    outline-offset: 1px;
    border-color: #3D6B1A;
  }
  .jok-cab-buscar button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 22px;
    background: #3D6B1A;
    color: #FFFFFF;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .jok-cab-buscar button:hover { background: #2F5414; }

  /* --- secciones --- */
  .jok-cab-secciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: flex-end;
  }
  .jok-cab-secciones-tit {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5D6B52;
  }
  .jok-cab-secciones a {
    position: relative;
    padding: 4px 0;
    color: #1A1A1A;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease;
  }
  .jok-cab-secciones a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: #88B04B;
    transition: right 0.18s ease;
  }
  .jok-cab-secciones a:hover,
  .jok-cab-secciones a:focus-visible { color: #3D6B1A; }
  .jok-cab-secciones a:hover::after { right: 0; }

  /* --- foco visible --- */
  .jok-cab-confianza a:focus-visible,
  .jok-cab-fila a:focus-visible,
  .jok-cab-fila button:focus-visible {
    outline: 2px solid #3D6B1A;
    outline-offset: 2px;
  }
  .jok-cab-confianza a:focus-visible { outline-color: #FFFFFF; }

  /* --- el importe del carrito no aporta nada cuando esta vacio --- */
  .ast-woo-header-cart-info-wrap { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .jok-cab-fila,
    .jok-cab-secciones a,
    .jok-cab-secciones a::after { transition: none; }
  }
}

/* En movil no se pinta nada: lo cubre el panel de jok-menu-movil.php. */
@media (max-width: 921px) {
  .jok-cab-confianza,
  .jok-cab-fila { display: none; }
}
/* ===== FIN CABECERA ESCRITORIO JARDINOK ===== */


/* ===== CABECERA: CORRECCIONES (18 agosto 2026) =====
   Va despues del bloque CABECERA ESCRITORIO JARDINOK y lo corrige en tres
   puntos detectados al medir en el navegador. */

@media (min-width: 922px) {

  /* 1. position:sticky NO funciona aqui: body y div.site llevan
        overflow-x:hidden, y con un ancestro que recorta, el elemento deja de
        pegarse al viewport. Se hace con position:fixed a partir del umbral que
        marca el script, y se compensa el hueco con padding en el body para que
        el contenido no pegue un salto al fijarse. */
  .jok-cab-fila { position: static; }

  body.jok-cab-fija .jok-cab-fila {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(61, 107, 26, 0.10);
  }
  body.jok-cab-fija { padding-top: 75px; }

  /* 2. Las secciones ocupaban 780 de 1200px y ahogaban el buscador a 229px.
        Con las etiquetas cortas y un reparto explicito, el campo recupera
        tamano: es el objetivo principal de la fila y conviene que sea grande. */
  .jok-cab-buscar {
    flex: 1 1 460px;
    min-width: 380px;
    max-width: 560px;
  }
  .jok-cab-secciones {
    flex: 0 1 auto;
    gap: 6px 16px;
  }

  /* 3. El importe del carrito vacio es ruido. El selector anterior no
        acertaba, asi que se apunta tambien al importe de WooCommerce. */
  #masthead .ast-woo-header-cart-info-wrap,
  #masthead .ast-cart-menu-wrap .woocommerce-Price-amount,
  #masthead .ast-addon-cart-wrap .woocommerce-Price-amount,
  .ast-header-woo-cart .woocommerce-Price-amount {
    display: none;
  }
}
/* ===== FIN CABECERA: CORRECCIONES ===== */


/* ===== CABECERA: SECCIONES DESPLEGABLES (18 agosto 2026) =====
   Sustituye a la lista plana de secciones. La etiqueta "SECCIONES" se retiro:
   era un rotulo sin funcion que ademas comia ancho al buscador. */

@media (min-width: 922px) {

  /* La etiqueta ya no se imprime; la regla queda por si quedara marcado viejo
     en alguna copia cacheada. */
  .jok-cab-secciones-tit { display: none; }

  .jok-cab-secciones {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    /* Con 2px el chevron de una seccion tocaba el texto de la siguiente y la
       fila se leia como un bloque unico. */
    gap: 9px;
    justify-content: flex-end;
  }

  .jok-cab-sec { position: relative; }

  .jok-cab-sec-a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 9px;
    border-radius: 10px;
    color: #1A1A1A;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .jok-cab-sec-a:hover,
  .jok-cab-sec-a:focus-visible {
    background: #F4F7EE;
    color: #3D6B1A;
  }

  .jok-cab-fl {
    font-size: 10px;
    color: #5D6B52;
    transition: transform 0.18s ease;
  }
  .jok-cab-sec:hover .jok-cab-fl,
  .jok-cab-sec:focus-within .jok-cab-fl,
  .jok-cab-sec-abierto .jok-cab-fl { transform: rotate(180deg); }

  /* --- panel desplegable --- */
  .jok-cab-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 232px;
    display: flex;
    flex-direction: column;
    /* El margen negativo mas el padding hacen de puente: sin el, al bajar el
       raton del enlace al panel se cruza un hueco y el desplegable se cierra. */
    margin-top: -4px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #DFE6D3;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(61, 107, 26, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  .jok-cab-sec:hover > .jok-cab-sub,
  .jok-cab-sec:focus-within > .jok-cab-sub,
  .jok-cab-sec-abierto > .jok-cab-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Los dos ultimos se alinean a la derecha para no salirse de la pantalla. */
  .jok-cab-sec:nth-last-child(-n+2) > .jok-cab-sub {
    left: auto;
    right: 0;
  }

  .jok-cab-sub a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    color: #1A1A1A;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .jok-cab-sub a:hover,
  .jok-cab-sub a:focus-visible {
    background: #F4F7EE;
    color: #3D6B1A;
  }

  .jok-cab-sub-todo {
    margin-top: 6px;
    padding-top: 12px !important;
    border-top: 1px solid #DFE6D3;
    border-radius: 0 0 10px 10px !important;
    color: #3D6B1A !important;
    font-weight: 700;
  }
  .jok-cab-sub-todo .fas {
    margin-left: 5px;
    font-size: 11px;
    transition: transform 0.18s ease;
  }
  .jok-cab-sub-todo:hover .fas { transform: translateX(3px); }

  @media (prefers-reduced-motion: reduce) {
    .jok-cab-sub,
    .jok-cab-fl,
    .jok-cab-sub-todo .fas { transition: none; }
  }
}
/* ===== FIN CABECERA: SECCIONES DESPLEGABLES ===== */


/* ===== HERO JARDINOK (18 agosto 2026) =====
   Marcado en novamira-sandbox/jok-hero.html, dentro del widget html del hero.
   La foto de fondo es del trabajo real de Mohamed (adjunto 2962), no una imagen
   generada: el mensaje es "probado en jardines reales" y la foto tenia que
   sostenerlo. */

.jok-hero3 {
  max-width: 660px;
  padding: 8px 0;
  font-family: Poppins, sans-serif;
  color: #FFFFFF;
}

/* El velo va DENTRO de background-image, como primera capa, en vez de en un
   ::before: Elementor ya usa ::before en sus contenedores para sus propios
   overlays y el pseudoelemento no llegaba a pintarse, dejando el texto blanco
   sobre la foto clara y practicamente ilegible. Tenido de verde muy oscuro,
   nunca negro puro, y en degradado para no apagar el arbol de la derecha. */
.elementor-element-sjd3yzb {
  background-image:
    linear-gradient(100deg,
      rgba(16, 26, 10, 0.92) 0%,
      rgba(16, 26, 10, 0.86) 30%,
      rgba(16, 26, 10, 0.58) 58%,
      rgba(16, 26, 10, 0.30) 100%),
    url('https://jardinok.com/wp-content/uploads/2026/09/Jardinok-Productos-de-jardineria-scaled.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Elementor tenia puesto encima un background_overlay en degradado (crema a
   verde) que se veia como una franja clara justo debajo de la cabecera. Se ha
   quitado del _elementor_data el 18 agosto 2026; esta regla lo remata por si
   queda CSS viejo servido desde cache. */
.elementor-element-sjd3yzb::before {
  background-image: none !important;
  background-color: transparent !important;
}

.jok-hero3-encima {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 7px 15px;
  background: rgba(237, 243, 225, 0.16);
  border: 1px solid rgba(237, 243, 225, 0.34);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #EDF3E1;
}

.jok-hero3-tit {
  margin: 0 0 20px;
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}
.jok-hero3-tit span { color: #A8CC6B; }

.jok-hero3-sub {
  max-width: 56ch;
  margin: 0 0 30px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.90);
}

.jok-hero3-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 0 0 30px;
}

.jok-hero3-cta1,
.jok-hero3-cta2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Sobre foto oscura, el verde profundo del sistema se apaga. Se usa el verde de
   marca como relleno y tinta oscura encima, que es la combinacion con mas
   contraste de la paleta en este fondo. */
.jok-hero3-cta1 {
  background: #88B04B;
  color: #14210B;
}
.jok-hero3-cta1:hover,
.jok-hero3-cta1:focus-visible {
  background: #A8CC6B;
  color: #14210B;
  transform: translateY(-2px);
}
.jok-hero3-cta1 .fas { font-size: 13px; }

.jok-hero3-cta2 {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}
.jok-hero3-cta2:hover,
.jok-hero3-cta2:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Prueba social. Es el 5,0 real del perfil de Google del servicio de
   jardineria, y se dice expresamente que es por el trabajo de jardineria: la
   tienda todavia no tiene resenas propias y no se le atribuyen. */
.jok-hero3-prueba {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 14px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.jok-hero3-prueba:hover,
.jok-hero3-prueba:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}
.jok-hero3-estrellas {
  color: #F5C451;
  font-size: 14px;
  letter-spacing: 1px;
}
.jok-hero3-prueba-txt strong { font-weight: 700; }

.jok-hero3 a:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* --- movil --- */
@media (max-width: 921px) {
  /* En vertical el texto ocupa todo el ancho, asi que el velo va parejo. Va en
     el mismo sitio que en escritorio, dentro de background-image, no en un
     ::before: ese pseudoelemento es de Elementor y no llega a pintarse. */
  .elementor-element-sjd3yzb {
    background-image:
      linear-gradient(180deg,
        rgba(16, 26, 10, 0.86) 0%,
        rgba(16, 26, 10, 0.74) 55%,
        rgba(16, 26, 10, 0.62) 100%),
      url('https://jardinok.com/wp-content/uploads/2026/09/Jardinok-Productos-de-jardineria-scaled.jpg') !important;
  }
  .jok-hero3 { max-width: 100%; }
  .jok-hero3-sub { font-size: 16px; margin-bottom: 26px; }
  .jok-hero3-botones { gap: 10px; }
  .jok-hero3-cta1,
  .jok-hero3-cta2 { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .jok-hero3-cta1,
  .jok-hero3-cta2,
  .jok-hero3-prueba { transition: none; }
  .jok-hero3-cta1:hover,
  .jok-hero3-cta2:hover { transform: none; }
}

/* ===== FIN HERO JARDINOK ===== */

/* ===== BARRA DE CONFIANZA JARDINOK (20 agosto 2026) =====
   Sustituye al marquee viejo (.trust-bar) del widget 2e12030 de la home.
   Reglas de contenido: ninguna cifra que no se pueda comprobar y ninguna
   promesa que no dependa de nosotros. Cada afirmacion o es un hecho del
   negocio o esta escrita en una pagina del sitio, y dos de las cuatro
   enlazan a esa pagina: la confianza que se puede verificar de un clic vale
   mucho mas que la que solo se afirma. */

/* El widget viejo llevaba margin:-149px en un contenedor de altura 0, asi que la
   barra se metia dentro del hero y no llegaba a pintarse. Los negativos son de
   los CUATRO lados: los laterales sacaban la caja 149px fuera del contenedor en
   escritorio y 38px fuera del viewport en movil, donde el overflow-x:hidden del
   body la cortaba en seco sin dar scroll. Se anulan todos. */
.elementor-element-2e12030 > .elementor-widget-container {
  margin: 0 !important;
}

.jok-conf {
  padding: 0 20px;
  margin: -44px auto 0;          /* monta sobre el hero: cose las dos zonas y
                                    coloca la tranquilidad justo donde cae la
                                    mirada al salir del CTA. Abajo no hace falta
                                    nada en escritorio: al anular el margen
                                    negativo del widget, la seccion siguiente
                                    recupera su propio hueco de ~107px. */
  max-width: 1240px;
  position: relative;
  z-index: 3;
  font-family: Poppins, sans-serif;
}

.jok-conf-caja {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #FFFFFF;
  border: 1px solid #DFE6D3;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(26, 40, 12, 0.13);
  overflow: hidden;
}

.jok-conf-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 24px;
  text-decoration: none;
  color: inherit;
  border-left: 1px solid #E9EFDF;   /* filetes, no cajas: se lee como UNA
                                       promesa y no como cuatro anuncios */
}
.jok-conf-item:first-child { border-left: 0; }

a.jok-conf-item { transition: background 0.2s ease; }
a.jok-conf-item:hover,
a.jok-conf-item:focus-visible { background: #F7FAF1; }
a.jok-conf-item:focus-visible {
  outline: 2px solid #3D6B1A;
  outline-offset: -2px;
}

.jok-conf-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #EDF3E1;
  color: #3D6B1A;
}
.jok-conf-ico svg { width: 21px; height: 21px; }

.jok-conf-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.jok-conf-tit {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #1A1A1A;
  letter-spacing: -0.005em;
}

.jok-conf-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #5D6B52;
}

.jok-conf-mas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: #3D6B1A;
}
.jok-conf-mas svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
a.jok-conf-item:hover .jok-conf-mas svg { transform: translateX(3px); }

/* --- tablet: 2x2 --- */
@media (max-width: 1024px) {
  .jok-conf { margin: -32px auto 24px; }
  .jok-conf-caja { grid-template-columns: repeat(2, 1fr); }
  .jok-conf-item:nth-child(odd) { border-left: 0; }
  .jok-conf-item:nth-child(n + 3) { border-top: 1px solid #E9EFDF; }
}

/* --- movil: 2x2 apretado, sin marquee ---
   El bloque anterior desfilaba solo en movil. Un texto en movimiento no se
   puede leer con calma y se percibe como publicidad, que es justo lo contrario
   de lo que tiene que hacer una barra de garantias: aqui se queda quieto. */
@media (max-width: 600px) {
  .jok-conf {
    margin: -24px auto 34px;
    padding: 0 14px;
  }
  .jok-conf-caja { border-radius: 14px; }
  .jok-conf-item {
    flex-direction: column;
    gap: 9px;
    padding: 18px 14px;
  }
  .jok-conf-ico { flex-basis: 38px; width: 38px; height: 38px; }
  .jok-conf-ico svg { width: 18px; height: 18px; }
  .jok-conf-tit { font-size: 13.5px; }
  .jok-conf-desc { font-size: 12.5px; line-height: 1.45; }
  .jok-conf-mas { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  a.jok-conf-item,
  .jok-conf-mas svg { transition: none; }
  a.jok-conf-item:hover .jok-conf-mas svg { transform: none; }
}
/* ===== FIN BARRA DE CONFIANZA JARDINOK ===== */

/* ===== TIENDA EN MOVIL (20 agosto 2026) =====
   Ajustes de la tienda y de las paginas de categoria para pantalla de movil,
   que es de donde va a llegar la mayor parte de las compras. Marcado en
   novamira-sandbox/jok-tienda.php (v1.3.0) y en el contenido de la pagina 6.
   Se anade despues del bloque TIENDA JARDINOK y solo corrige lo de movil:
   el orden de origen basta para ganar a las reglas de aquel sin subir
   especificidad ni repartir !important. */

/* --- 1. El icono del buscador caia en la costura entre campo y boton ---
   Iba en position:absolute con `left` pero sin `top`, asi que se colocaba en su
   posicion estatica. Mientras la fila no se envolvia eso coincidia con el
   centro del campo y parecia correcto; al envolverse en movil, la posicion
   estatica pasaba a estar 48px mas abajo y la lupa aparecia flotando sobre el
   boton. Anclarlo a la primera fila lo deja bien en los dos casos. */
.jok-tienda-buscar .jok-tienda-lupa {
  top: 0;
  bottom: auto;
  height: 52px;
  display: flex;
  align-items: center;
}

/* --- 2. El boton lleva su propia lupa, oculta en escritorio --- */
.jok-tienda-buscar button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
@media (min-width: 601px) {
  /* En escritorio la lupa ya esta dentro del campo: en el boton sobraria. */
  .jok-tienda-buscar button .fas { display: none; }
}

/* --- 3. Movil: buscador en una sola fila ---
   Dos filas completas para buscar se comian 60px de la primera pantalla. El
   campo se queda con todo el ancho util y el boton pasa a ser una lupa redonda
   de 52x52, por encima del minimo tactil de 44. */
@media (max-width: 600px) {
  .jok-tienda-buscar {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .jok-tienda-buscar .jok-tienda-lupa { display: none; }
  .jok-tienda-buscar input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 18px;
  }
  .jok-tienda-buscar button {
    flex: 0 0 52px;
    width: 52px;
    min-height: 52px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    /* Astra pone relleno horizontal a todos los  con content-box: sin
       esto el circulo sale ovalado de 80px. */
    box-sizing: border-box;
  }
  .jok-tienda-buscar button .fas { font-size: 17px; }
  .jok-tienda-buscar .jok-tienda-buscar-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* --- 4. Las secciones, en dos columnas ---
   A una columna con foto 4:3 cada tarjeta medía 313px y las seis sumaban 2.173
   pixeles: la navegacion de la tienda no cabia en ninguna pantalla y habia que
   recorrerla a ciegas. En dos columnas con foto cuadrada se ven tres filas de
   un vistazo y la seccion baja a unos 800px. Las tarjetas quedan de unos 155px
   de ancho: muy por encima del minimo tactil, y el nombre sigue entrando en dos
   lineas. */
@media (max-width: 600px) {
  .jok-tienda-cats {
    margin: 26px 0 8px;
    padding: 22px 14px 24px;
  }
  .jok-tienda-cats-tit { font-size: 22px; }
  .jok-tienda-cats-sub {
    margin-bottom: 18px;
    font-size: 14px;
  }
  .jok-tienda-rejilla {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .jok-cat-foto { aspect-ratio: 1 / 1; }
  .jok-cat-txt { padding: 11px 12px 30px; }
  .jok-cat-nom {
    font-size: 14.5px;
    line-height: 1.3;
  }
  .jok-cat-num {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .jok-cat-fl {
    right: 12px;
    bottom: 10px;
    font-size: 12px;
  }
}

/* --- 5. Los tres criterios, con el icono al lado y no encima ---
   Cada tarjeta ocupaba unos 450px de alto, 1.400 entre las tres, solo para
   explicar el criterio de seleccion. Con el emoji a la izquierda y menos relleno
   se quedan en unos 230px sin perder nada de texto. */
@media (max-width: 600px) {
  .jok-tienda-crit {
    gap: 10px;
    margin-bottom: 20px;
  }
  .jok-tienda-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: start;
    padding: 14px 16px;
  }
  /* Colocacion explicita de los tres, sin depender del auto-emplazamiento: si
     algun dia vuelve a colarse un nodo de mas en la tarjeta, la rejilla no se
     descoloca. */
  .jok-tienda-ico {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
    font-size: 22px;
    line-height: 1;
  }
  .jok-tienda-item h2 {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px !important;
    margin: 0 0 4px !important;
  }
  .jok-tienda-item p {
    grid-column: 2;
    grid-row: 2;
  }
  .jok-tienda-item p {
    font-size: 13.5px;
    line-height: 1.55;
  }
  .jok-tienda-lead {
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.65;
  }
  .jok-tienda-nota {
    padding: 14px 16px;
    font-size: 14px;
  }
  .jok-tienda-sub {
    margin-bottom: 18px;
    font-size: 16px;
  }
}

/* --- 6. Menos aire muerto sobre el H1, solo en la tienda ---
   Astra reserva 54,7px arriba y abajo del contenido. En un escritorio se agradece;
   en 390px son 55 pixeles de la primera pantalla gastados en nada. Se toca solo
   en el archivo de producto y en las categorias, y hace falta #primary en el
   selector porque la regla del tema va por id. */
@media (max-width: 921px) {
  body.post-type-archive-product #primary,
  body.tax-product_cat #primary {
    padding-top: 22px;
    padding-bottom: 30px;
  }
}

/* --- 7. Enlaces del pie: 44px de alto ---
   Median 21px, la mitad del minimo tactil de Apple y de Material, y van uno
   pegado a otro: en el pie es donde estan las politicas legales y el telefono. */
@media (max-width: 921px) {
  .site-footer .menu-item .menu-link,
  .site-footer .jokf-contacto a {
    display: inline-block;
    padding: 12px 4px;
    line-height: 1.35;
  }
  .site-footer .jokf-contacto li { align-items: center; }
}

/* --- 8. Los emoji del texto no traen medidas ---
   WordPress los sustituye por  sin width ni height, asi que
   cada uno provoca un salto de maquetacion al cargar. */
img.emoji {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}
/* --- 9. Parrafos vacios de cortesia ---
   El filtro de jok-tienda.php ya evita que wpautop los genere. Esto es el
   cinturon por si alguien vuelve a pegar HTML a mano en la pagina. */
.jok-tienda-intro p:empty { display: none; }

/* --- 10. El carrito de la cabecera ---
   Con el carrito vacio Astra pinta un globo verde con un "0" dentro. Un
   contador a cero no informa de nada: el estado normal de la cabecera pasa a
   ser un aviso permanente y el cliente deja de mirarlo. Aparece solo cuando hay
   algo dentro. El enlace, ademas, media 30x26: por debajo del minimo tactil. */
.ast-header-cart .astra-icon[data-cart-total="0"]::after,
.astra-icon.ast-icon-shopping-bag[data-cart-total="0"]::after { content: none; }

@media (max-width: 921px) {
  a.cart-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}
/* --- 11. El aviso salia con un cuadrado en lugar de icono ---
   WooCommerce lo pinta con un glifo de su tipografia de iconos, y esa fuente no
   llega a cargar en este sitio: donde deberia haber un simbolo aparece la caja
   del caracter que falta, justo en el mensaje que explica que la tienda todavia
   no tiene catalogo. Se sustituye por un emoji, que no depende de ninguna
   fuente externa. El orden importa: .jok-tienda-vacia lleva tambien la clase
   .woocommerce-info, asi que su regla tiene que ir despues para ganarle. */
.woocommerce-info::before {
  content: "\2139\FE0F";
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
}
.jok-tienda-vacia::before {
  content: "\1F331";
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
}

/* --- 12. Dos areas tactiles que quedaban cortas --- */
@media (max-width: 921px) {
  /* El logo es el "volver al inicio" de toda web: median 87x19. */
  .site-header .custom-logo-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Botones del cajon del carrito, a 10,9px de letra. */
  .woocommerce-mini-cart__buttons .button {
    padding: 12px 18px;
    font-size: 15px;
  }
}
/* ===== FIN TIENDA EN MOVIL ===== */

/* ===== HERO: PRUEBA SOCIAL (21 agosto 2026) =====
   La valoracion de Google iba dentro de una pastilla con fondo translucido y
   borde, 445px de ancho, justo debajo de los dos botones del hero: tres cosas
   con forma de boton una encima de otra, y la que menos importa era la mas
   ancha de las tres. Un dato de confianza no es una llamada a la accion; se
   lee, no se pulsa. Se le quita la caja y se queda como una firma al pie:
   estrellas doradas, el 5,0 en negrita y el resto en un blanco mas apagado.
   Sigue siendo el enlace al perfil real de Google. */

.jok-hero3-prueba {
  gap: 9px;
  padding: 8px 2px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}

.jok-hero3-prueba:hover,
.jok-hero3-prueba:focus-visible {
  background: transparent;
  border-color: transparent;
  color: #FFFFFF;
}

/* El subrayado va solo bajo el dato, no bajo la frase entera: basta para
   avisar de que se puede pulsar y no convierte la linea en un enlace ruidoso. */
.jok-hero3-prueba:hover .jok-hero3-prueba-txt strong,
.jok-hero3-prueba:focus-visible .jok-hero3-prueba-txt strong {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.jok-hero3-prueba:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.jok-hero3-estrellas {
  font-size: 12.5px;
  letter-spacing: 1.5px;
  color: #F2B705;
}

.jok-hero3-prueba-txt strong {
  font-weight: 700;
  color: #FFFFFF;
}

@media (max-width: 600px) {
  /* Sin caja sigue haciendo falta area comoda para el dedo: se da alto con
     relleno, sin dibujar nada. */
  .jok-hero3-prueba {
    padding: 11px 2px;
    font-size: 13px;
    /* Con el texto en dos lineas, centrar deja las estrellas flotando entre
       renglon y renglon: se alinean con la primera linea, que es donde esta
       el dato. */
    align-items: flex-start;
  }

  .jok-hero3-estrellas { margin-top: 2px; }
}
/* ===== FIN HERO: PRUEBA SOCIAL ===== */

/* ===== HERO: ROTULO EN ACTIVO (21 agosto 2026) =====
   "Jardineros en activo en el Tarragones" iba dentro de otra pastilla con fondo
   y borde. Con la valoracion ya sin caja, era la ultima cosa del hero disfrazada
   de boton sin serlo. Se le quita la caja y se le da lo unico que ese rotulo
   pedia de verdad: que "en activo" se note. Un punto verde que late despacio,
   como un indicador de estado, y el rotulo pasa a ser enlace a Sobre nosotros,
   que es donde se demuestra la frase. */

.jok-hero3-encima {
  gap: 9px;
  margin: 0 0 16px;
  padding: 4px 2px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: rgba(237, 243, 225, 0.92);
  text-decoration: none;
  transition: color 0.2s ease;
}

.jok-hero3-encima:hover,
.jok-hero3-encima:focus-visible {
  color: #FFFFFF;
}

/* Igual que en la valoracion: el subrayado avisa de que se puede pulsar sin
   dibujar ningun recuadro. */
.jok-hero3-encima:hover .jok-hero3-encima-txt,
.jok-hero3-encima:focus-visible .jok-hero3-encima-txt {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.jok-hero3-encima:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.jok-hero3-punto {
  position: relative;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8FD14F;
}

/* El halo sale del punto y se apaga: es un latido lento, no un parpadeo. Un
   parpadeo rapido en la primera pantalla cansa y distrae del titular. */
.jok-hero3-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #8FD14F;
  animation: jok-latido 2.6s ease-out infinite;
}

@keyframes jok-latido {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.9); opacity: 0; }
  100% { transform: scale(2.9); opacity: 0; }
}

.jok-hero3-encima:hover .jok-hero3-punto { background: #A8E06B; }

@media (prefers-reduced-motion: reduce) {
  .jok-hero3-punto::after { animation: none; }
  .jok-hero3-encima { transition: none; }
}
/* ===== FIN HERO: ROTULO EN ACTIVO ===== */

/* ===== CONFIANZA: CARRUSEL EN MOVIL (21 agosto 2026) =====
   La tarjeta de garantias medía 397px de alto en movil: cuatro items en 2x2
   ocupaban casi media pantalla para decir algo que se lee en dos segundos. Se
   convierte en un carril que se desliza con el dedo, una tarjeta por vista y un
   asomo de la siguiente para que se vea que hay mas. Baja a unos 120px.
   El desplazamiento automatico y los puntos los pone jok-confianza.php; sin JS
   esto sigue siendo un carril deslizable, que es lo que tiene que pasar. */

@media (max-width: 600px) {
  .jok-conf {
    /* El carril sangra por la derecha: el asomo de la tarjeta siguiente es lo
       que le dice al dedo que ahi hay mas. */
    padding: 0 0 0 14px;
  }

  .jok-conf-caja {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 14px 0 0 14px;
  }
  .jok-conf-caja::-webkit-scrollbar { display: none; }

  .jok-conf-item {
    flex: 0 0 82%;
    scroll-snap-align: start;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 14px;
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #E9EFDF;
  }
  .jok-conf-item:last-child { border-right: 0; }

  .jok-conf-ico {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .jok-conf-ico svg { width: 17px; height: 17px; }
  .jok-conf-tit { font-size: 13.5px; }
  .jok-conf-desc { font-size: 12.5px; }
  .jok-conf-mas { font-size: 11.5px; }

  /* --- puntos indicadores --- */
  .jok-conf-puntos {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 12px 14px 0 0;
    padding: 0;
    list-style: none;
  }
  .jok-conf-punto {
    width: 7px;
    height: 7px;
    padding: 0;
    background: #C9D6B6;
    border: 0;
    border-radius: 50%;
    /* El area tactil se agranda sin agrandar el punto: asi cabe el dedo y el
       indicador sigue siendo discreto. */
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
  }
  .jok-conf-punto[aria-current="true"] {
    width: 20px;
    border-radius: 999px;
    background: #3D6B1A;
  }
  .jok-conf-punto:focus-visible {
    outline: 2px solid #3D6B1A;
    outline-offset: 3px;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .jok-conf-caja { scroll-behavior: auto; }
  .jok-conf-punto { transition: none; }
}
/* ===== FIN CONFIANZA: CARRUSEL EN MOVIL ===== */


/* ===== AREA DE CLIENTE JARDINOK (15 septiembre 2026) ===== */

/* --- Panel de bienvenida --- */
.jok-cta-saludo h2 {
	font-size: 1.45rem;
	line-height: 1.25;
	margin: 0 0 .35em;
}

.jok-cta-saludo p {
	color: #5A6653;
	max-width: 54ch;
	margin: 0 0 1.6em;
}

/* --- Accesos directos --- */
.jok-cta-accesos {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
}

.jok-cta-accesos li {
	margin: 0;
}

.jok-cta-accesos a {
	display: flex;
	align-items: center;
	gap: 14px;
	/* 16px de alto minimo por encima del area de toque comoda en movil */
	min-height: 72px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #DDE5D2;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.jok-cta-accesos a:hover,
.jok-cta-accesos a:focus-visible {
	border-color: #8FD14F;
	box-shadow: 0 4px 14px -6px rgba(61, 107, 26, .35);
	transform: translateY(-1px);
}

.jok-cta-accesos a:focus-visible {
	outline: 2px solid #3D6B1A;
	outline-offset: 2px;
}

.jok-cta-ico {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: #EEF6E2;
	border-radius: 50%;
	color: #3D6B1A;
}

/* El trazo hereda el color del padre, asi que basta con darle tamano */
.jok-ico {
	display: block;
	width: 20px;
	height: 20px;
}

.jok-cta-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.jok-cta-txt strong {
	font-size: .98rem;
	color: #2A3A1B;
	font-weight: 600;
}

.jok-cta-txt small {
	font-size: .82rem;
	line-height: 1.35;
	color: #6E7A61;
}

/* --- Motivos para registrarse --- */
.jok-cta-motivos {
	list-style: none;
	margin: 0 0 1.6em;
	padding: 16px 18px;
	background: #F3F8EB;
	border: 1px solid #DDE5D2;
	border-left: 3px solid #8FD14F;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.jok-cta-motivos li {
	margin: 0;
	font-size: .92rem;
	line-height: 1.45;
	color: #4A553E;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.jok-cta-motivos li .jok-ico {
	flex: none;
	width: 18px;
	height: 18px;
	/* Baja el icono hasta la linea base de la primera linea de texto */
	margin-top: 2px;
	color: #6FA82E;
}

/* --- Enlace de salida --- */
.jok-cta-salir {
	margin-top: 2em;
	padding-top: 1.1em;
	border-top: 1px solid #E2E8D9;
	font-size: .86rem;
	color: #6E7A61;
}

.jok-cta-salir a {
	color: #3D6B1A;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Formularios de acceso y registro en movil ---
   Astra los deja a dos columnas que se estrechan demasiado por debajo de
   768px: los dos formularios quedan a 45% cada uno y el correo no cabe. */
@media (max-width: 768px) {

	.woocommerce-account .u-column1,
	.woocommerce-account .u-column2 {
		width: 100% !important;
		float: none !important;
		margin-bottom: 26px;
	}

	.woocommerce-account .col2-set .col-1,
	.woocommerce-account .col2-set .col-2 {
		width: 100%;
		float: none;
	}

	/* 16px evita que Safari haga zoom al enfocar un campo */
	.woocommerce-account input[type="text"],
	.woocommerce-account input[type="email"],
	.woocommerce-account input[type="password"] {
		font-size: 16px;
		min-height: 48px;
	}

	.woocommerce-account .woocommerce-Button,
	.woocommerce-account button[type="submit"] {
		width: 100%;
		min-height: 50px;
	}
}

/* Menos movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
	.jok-cta-accesos a {
		transition: none;
	}
	.jok-cta-accesos a:hover,
	.jok-cta-accesos a:focus-visible {
		transform: none;
	}
}

/* ===== FIN AREA DE CLIENTE JARDINOK ===== */

/* ===== CUPON DE BIENVENIDA (15 septiembre 2026) ===== */

.jok-cupon {
	margin: 0 0 1.8em;
	padding: 18px 20px;
	background: #FFFDF5;
	border: 1px solid #EBD9A6;
	border-radius: 8px;
}

.jok-cupon-cabecera {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 14px;
}

.jok-cupon-cabecera > div {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.jok-cupon-cabecera strong {
	font-size: 1rem;
	color: #2A3A1B;
}

.jok-cupon-cabecera span:not(.jok-cupon-ico) {
	font-size: .88rem;
	color: #8A6D1F;
}

.jok-cupon-ico {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: #FBF0D2;
	border-radius: 50%;
	color: #8A6D1F;
}

.jok-cupon-codigo {
	margin: 0 0 12px;
}

.jok-cupon-codigo code {
	display: inline-block;
	/* Monoespaciada y con hueco entre letras: es un codigo para copiar a mano */
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: #2A3A1B;
	background: #fff;
	border: 1px dashed #C9AE63;
	border-radius: 5px;
	padding: 11px 16px;
	/* Para que al pulsar sobre el se seleccione entero de una vez */
	user-select: all;
	-webkit-user-select: all;
}

.jok-cupon-letra {
	margin: 0;
	font-size: .85rem;
	line-height: 1.5;
	color: #6E7A61;
}

.jok-cupon-letra strong {
	color: #4A553E;
}

/* El motivo destacado del formulario de registro */
.jok-cta-motivos .jok-cta-destacado {
	font-size: .97rem;
	color: #2A3A1B;
	padding-bottom: 9px;
	border-bottom: 1px solid #DDE5D2;
}

/* ===== FIN CUPON DE BIENVENIDA ===== */


/* ===== PREGUNTAS FRECUENTES JARDINOK (29 septiembre 2026) =====
   Objeciones reales de compra (devolucion, envio, defectos) respondidas con
   el texto exacto de politica-de-devoluciones y de la franja de confianza.
   Nada inventado: cifras y plazos copiados de las paginas legales. Estilo
   calcado de .jok-conf (Poppins, acento #3D6B1A, borde #DFE6D3, radio 14px),
   que es la linea visual vigente del sitio. */
.jok-faq {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: Poppins, sans-serif;
}
.jok-faq-cabecera { text-align: center; margin: 0 0 32px; }
.jok-faq-pretitulo {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #3D6B1A; margin: 0 0 10px;
}
.jok-faq-titulo {
  font-size: 32px; font-weight: 700; color: #1A1A1A; margin: 0 0 10px;
  line-height: 1.15; letter-spacing: -0.015em;
}
.jok-faq-subtitulo { font-size: 15px; color: #5D6B52; margin: 0; }

.jok-faq-lista { display: flex; flex-direction: column; gap: 10px; }

.jok-faq-item {
  background: #FFFFFF;
  border: 1px solid #DFE6D3;
  border-radius: 14px;
  padding: 0 22px;
  transition: border-color 0.2s ease;
}
.jok-faq-item[open] { border-color: #88B04B; }

.jok-faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  font-size: 15.5px; font-weight: 700; color: #1A1A1A; line-height: 1.4;
}
.jok-faq-item summary::-webkit-details-marker { display: none; }
.jok-faq-item summary:focus-visible {
  outline: 2px solid #3D6B1A; outline-offset: 2px; border-radius: 6px;
}

.jok-faq-icono {
  flex: 0 0 20px; width: 20px; height: 20px; color: #3D6B1A;
  transition: transform 0.25s ease;
}
.jok-faq-item[open] .jok-faq-icono { transform: rotate(45deg); }

.jok-faq-respuesta { padding: 0 0 20px; margin-top: -6px; }
.jok-faq-respuesta p {
  margin: 0; font-size: 14.5px; line-height: 1.65; color: #5D6B52; max-width: 66ch;
}

.jok-faq-mas { text-align: center; margin: 28px 0 0; font-size: 14px; color: #5D6B52; }
.jok-faq-mas a { color: #3D6B1A; font-weight: 600; text-decoration: none; }
.jok-faq-mas a:hover, .jok-faq-mas a:focus-visible { text-decoration: underline; }

@media (max-width: 600px) {
  .jok-faq-titulo { font-size: 26px; }
  .jok-faq-item summary { font-size: 14.5px; padding: 15px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jok-faq-item, .jok-faq-icono { transition: none; }
}


/* ===== LOS MAS VENDIDOS - MINI HERO (29 septiembre 2026) =====
   Version compacta embebida en el propio hero, igual que en el sitio de
   referencia: a la derecha del titulo en escritorio (absoluto, dentro del
   hero que ya es position:relative por defecto en Elementor), debajo del
   texto en movil/tablet (fluye en la misma fila flex del hero, que ya
   envuelve --flex-wrap-mobile:wrap, asi que cae solo a la linea siguiente). */
.jok-hero3-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 0 30px;
}
.jok-hero3-fila .jok-hero3-botones { margin: 0; }
.jok-quickshop-mini {
  font-family: Poppins, sans-serif;
}
.jok-quickshop-mini-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #A8CC6B; margin: 0 0 13px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.jok-quickshop-mini-grid { display: flex; gap: 14px; }
.jok-quickshop-mini-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 160px;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.jok-quickshop-mini-card:hover, .jok-quickshop-mini-card:focus-visible {
  transform: translateY(-3px);
  border-color: #88B04B;
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.jok-quickshop-mini-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jok-quickshop-mini-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.4s ease;
}
.jok-quickshop-mini-card:hover .jok-quickshop-mini-img { transform: scale(1.08); }
.jok-quickshop-mini-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,26,26,0.80) 0%, rgba(26,26,26,0.06) 62%);
}
.jok-quickshop-mini-tag {
  position: absolute; left: 13px; right: 10px; bottom: 11px; z-index: 2;
  font-size: 14px; font-weight: 700; color: #FFFFFF; line-height: 1.25;
}

@media (max-width: 767px) {
  .jok-hero3-fila { flex-direction: column; align-items: flex-start; gap: 14px; }
  .jok-quickshop-mini-label { font-size: 9.5px; margin: 0 0 6px; }
  .jok-quickshop-mini-grid { gap: 8px; }
  .jok-quickshop-mini-card { width: 48px; max-width: 48px; border-width: 1px; }
  .jok-quickshop-mini-tag { display: none; }
}
@media (max-width: 480px) {
  .jok-hero3-tit { font-size: 28px; margin: 0 0 14px; }
  .jok-hero3-sub { font-size: 15px; margin: 0 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .jok-quickshop-mini-card, .jok-quickshop-mini-img { transition: none; }
}

/* ===== PRIMERA IMPRESION EN MOVIL Y TABLET (29 septiembre 2026) =====
   Va al final a proposito: corrige lo que dejaban los bloques HERO JARDINOK,
   LOS MAS VENDIDOS y CABECERA ESCRITORIO en pantallas pequenas, sin tocarlos.

   QUE ESTABA MAL, MEDIDO SOBRE LA PAGINA SERVIDA
   1. Tablet: la columna de texto tenia a la vez width 68,674% y margin-right
      40%. En un iPad vertical el texto se quedaba en unos 380px -ancho de
      movil- con el 40% derecho vacio, y los botones, que en esa franja llevan
      flex:1 1 100%, se estrujaban uno debajo de otro dentro de una fila que se
      ajusta al contenido. Es el "aplastado" de siempre.
   2. Movil: el hero medía unos 630px, asi que en la primera pantalla solo
      cabian el rotulo, el titular y un parrafo de seis renglones. La tienda
      -los botones y las tres gamas- quedaba entera por debajo del pliegue.
   3. Las tres tarjetas de gamas eran cuadrados de 48px sin etiqueta: no se
      entendia que eran categorias, parecian adorno de la foto.
   4. La franja verde de garantias no se pintaba por debajo de 922px, o sea
      que el trafico de movil, que es la mayoria, no veia ni devoluciones ni
      garantia ni plazo de envio en la primera pantalla.
*/

/* El subtitulo tiene dos versiones en el marcado. Manda la larga. */
.jok-hero3-sub-corta { display: none; }


/* ================== TABLET (768 - 1024) ================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Al ensanchar la columna a todo el contenedor, el velo diagonal de
     escritorio dejaba el final de cada renglon sobre la parte clara de la
     foto. Aqui se usa el vertical, el mismo que ya llevaba el movil. */
  .elementor-element-sjd3yzb {
    background-image:
      linear-gradient(180deg,
        rgba(16, 26, 10, 0.88) 0%,
        rgba(16, 26, 10, 0.76) 55%,
        rgba(16, 26, 10, 0.62) 100%),
      url('https://jardinok.com/wp-content/uploads/2026/09/Jardinok-Productos-de-jardineria-scaled.jpg') !important;
  }

  /* La columna ya ocupa todo el ancho, pero un renglon de 900px no se lee:
     640px son unos 75 caracteres, el limite comodo. */
  .jok-hero3 { max-width: 640px; }

  .jok-hero3-tit { font-size: 40px; margin: 0 0 16px; }
  .jok-hero3-sub { font-size: 16.5px; margin: 0 0 26px; }

  /* Los botones recuperan su ancho natural: el flex:1 1 100% que el bloque de
     movil aplica hasta 921px es lo que los estrujaba en tablet. */
  .jok-hero3-cta1,
  .jok-hero3-cta2 { flex: 0 1 auto; }

  .jok-hero3-fila { gap: 22px; margin: 0 0 24px; }
}


/* ================== MOVIL ( Cabecera > Cabecera movil como cualquier otro elemento.
   Aqui solo se le da el aspecto de la casa: el que trae de serie es gris,
   de esquina casi recta y con otra tipografia. */

@media (max-width: 921px) {

  /* Mismo cuerpo que la cesta. El icono no crece: crece la zona que acepta el
     dedo, hasta los 44px que piden Apple y Material. */
  .ast-header-search .astra-search-icon { font-size: 19px; }
  .ast-header-search .ast-search-icon > .astra-search-icon {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: #1A1A1A;
  }
  .ast-header-search .astra-search-icon:focus-visible {
    outline: 2px solid #3D6B1A;
    outline-offset: 2px;
    border-radius: 10px;
  }

  /* El campo que se despliega, con la forma del resto de campos del sitio:
     pastilla, fondo crema y filete verde claro. */
  .ast-header-search .ast-search-menu-icon .search-form {
    padding-right: 14px;
    background: #F4F7EE;
    border: 1px solid #DFE6D3;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(26, 40, 12, 0.16);
  }
  .ast-header-search .ast-search-menu-icon .search-field {
    min-height: 44px;
    padding: 0 0 0 16px;
    background: transparent;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    color: #1A1A1A;
  }
  .ast-header-search .ast-search-menu-icon .search-field::placeholder { color: #5D6B52; }
  .ast-header-search .ast-search-menu-icon .search-field:focus {
    outline: 2px solid #3D6B1A;
    outline-offset: 1px;
    border-radius: 999px;
  }

  /* De serie el campo abierto son 235px fijos. En un movil de 360px, contando
     el relleno de la cabecera, eso se sale por la izquierda: se le pone un
     tope relativo a la pantalla. */
  .ast-header-search .ast-search-menu-icon.ast-dropdown-active .search-field,
  .ast-header-search .ast-dropdown-active.ast-search-menu-icon.slide-search input.search-field {
    width: min(235px, 58vw);
  }
}
/* ===== FIN BUSCADOR EN LA CABECERA DE MOVIL ===== */



/* ===== SEGUIR LEYENDO (malla de enlaces entre articulos) =====
   Los articulos casi no se enlazaban entre si: 10 de 13 solo apuntaban a
   /contacto/. Este bloque va al final de cada entrada. list-style y ::before
   se anulan a proposito, porque ESTILOS GUTENBERG ARTICULOS ya decora los ul. */
.jok-seguir{margin:44px 0 8px;padding:22px 24px;background:#F6F8F2;border:1px solid #DFE6D3;border-left:4px solid #6E9138;border-radius:12px}
.jok-seguir .jok-seguir-tit{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6E9138;margin:0 0 14px;padding:0;border:0;line-height:1.3}
.jok-seguir .jok-seguir-tit::before,.jok-seguir .jok-seguir-tit::after{content:none}
.jok-seguir .jok-seguir-lista{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.jok-seguir .jok-seguir-lista li{margin:0;padding:0;list-style:none}
.jok-seguir .jok-seguir-lista li::before,.jok-seguir .jok-seguir-lista li::marker{content:none}
.jok-seguir .jok-seguir-lista a{display:inline-flex;align-items:baseline;gap:9px;color:#1F2A18;text-decoration:none;font-weight:600;line-height:1.45;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.jok-seguir .jok-seguir-lista a::before{content:"›";color:#88B04B;font-weight:800;flex:0 0 auto}
.jok-seguir .jok-seguir-lista a:hover{color:#6E9138;border-bottom-color:#88B04B}
@media (max-width:600px){.jok-seguir{padding:18px;margin-top:34px}}
/* ===== FIN SEGUIR LEYENDO ===== */

/* Barra superior en movil: la primera frase no cabe junto a las otras dos */
@media (max-width: 520px) {
  .jok-cab-garantias .jok-cab-ancho-solo { display: none; }
}

/* ===== ESTILO TIENDA (3 nov 2026) =====
   Sistema de tienda grande: blanco y gris claro, radios de 4px, títulos compactos,
   naranja para comprar y verde para la marca. Logo, colores, letra y fotos son los
   de JardinOK. Copia de lo anterior en la opción jok_copia_habitium_20261103. */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/wp-content/uploads/jok-fuentes/poppins-800.woff2) format("woff2");
}

:root {
  --jok-noche: #0D1609;
  --jok-oscuro: #16290F;
  --jok-verde: #2F5D22;
  --jok-verde-o: #254A1B;
  --jok-naranja: #EF6C00;
  --jok-compra: #C75000;
  --jok-compra-o: #A94400;
  --jok-amarillo: #FFC533;
  --jok-gris: #F4F3EF;
  --jok-borde: #D9DCD3;
  --jok-texto: #3F4A39;
  --jok-apagado: #64705C;
  --jok-sombra: 0 1px 4px rgba(22, 41, 15, .18);
  --jok-banda-capas: radial-gradient(30% 130% at 86% 15%, rgba(255, 150, 40, .32), rgba(255, 150, 40, 0)), linear-gradient(90deg, rgba(13, 22, 9, .95) 0, rgba(13, 22, 9, .88) 50%, rgba(13, 22, 9, .46) 82%, rgba(13, 22, 9, .4) 100%);
  --jok-banda-foto: url(/wp-content/uploads/jok-portada/hero-fondo.webp);
}

html body #page.site { overflow-x: clip !important; }
body:not(.home),
body:not(.home) .site-content { background-color: #FFFFFF; }

/* --- cabecera: buscador grande junto al logo y fila de secciones debajo --- */
.jok-cab-buscar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0;
  min-width: 0;
  max-width: none;
  margin: 0;
  font-family: Poppins, sans-serif;
}
.jok-cab-buscar .fa-search {
  position: absolute;
  left: 14px;
  font-size: 15px;
  color: var(--jok-verde);
  pointer-events: none;
}
body .jok-cab-buscar input[type="search"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 94px 0 42px;
  background: #FFFFFF;
  border: 1px solid var(--jok-verde);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  color: var(--jok-oscuro);
}
body .jok-cab-buscar input[type="search"]::placeholder { color: var(--jok-apagado); opacity: 1; }
body .jok-cab-buscar input[type="search"]:focus {
  outline: 2px solid var(--jok-verde);
  outline-offset: 0;
  border-color: var(--jok-verde);
}
body .jok-cab-buscar button {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  min-height: 0;
  padding: 0 18px;
  background: var(--jok-verde);
  color: #FFFFFF;
  border: 0;
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
body .jok-cab-buscar button:hover { background: var(--jok-verde-o); color: #FFFFFF; }
/* la página de cuenta fuerza el ancho completo en todos sus botones de envío */
#masthead .jok-cab-buscar button { width: auto; height: auto; }
/* Astra pone 10px de margen interior a todo lo que hay en sus columnas */
#masthead .jok-cab-buscar { padding: 0; }

/* Astra sigue con su cabecera móvil a 922px exactos: el corte va en 923px */
@media (min-width: 923px) {
  .jok-cab-movil { display: none; }
  .jok-cab-ancho { max-width: 1400px; padding: 0 16px; }
  .jok-cab-confianza .jok-cab-ancho { min-height: 30px; gap: 16px; }
  .jok-cab-garantias { flex: 1; justify-content: space-evenly; }
  .jok-cab-tel { padding: 3px 12px; }

  #masthead {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #FFFFFF;
    box-shadow: 0 2px 5px rgba(22, 41, 15, .12);
  }
  body.admin-bar #masthead { top: 32px; }
  #ast-desktop-header .ast-primary-header-bar { background: #FFFFFF; border-bottom: 0; }
  #ast-desktop-header .site-primary-header-wrap {
    display: block;
    max-width: 1400px;
    min-height: 0;
    padding: 0 16px;
  }
  #ast-desktop-header .ast-builder-grid-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    min-height: 70px;
  }
  #ast-desktop-header .site-header-primary-section-left { gap: 22px; min-width: 0; min-height: 0; }
  #ast-desktop-header .site-header-primary-section-right { gap: 6px; min-height: 0; }
  #ast-desktop-header .site-header-primary-section-left > .ast-builder-layout-element { flex: none; padding: 0; }
  #ast-desktop-header .site-branding { padding: 0; }
  #ast-desktop-header .site-logo-img { padding: 0; }
  #ast-desktop-header .custom-logo { display: block; width: 170px; max-width: 170px; height: auto; }
  #ast-desktop-header .ast-builder-menu-1 { display: none; }

  .jok-cab-cuenta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--jok-oscuro);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
  }
  .jok-cab-cuenta .fas { color: var(--jok-verde); font-size: 15px; }
  .jok-cab-cuenta:hover { color: var(--jok-verde); }

  .jok-cab-fila,
  body.jok-cab-fija .jok-cab-fila {
    position: static;
    background: #FFFFFF;
    border: 0;
    box-shadow: none;
  }
  .jok-cab-fila .jok-cab-ancho { min-height: 40px; gap: 16px; }
  .jok-cab-secciones,
  .jok-cab-pags {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .jok-cab-secciones { margin-left: -10px; }
  .jok-cab-pags { margin-right: -10px; }
  .jok-cab-secciones .jok-cab-sec-a,
  .jok-cab-pags a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 4px;
    color: var(--jok-oscuro);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
  }
  .jok-cab-secciones a::after { content: none; }
  .jok-cab-pags a { color: var(--jok-verde); font-weight: 600; }
  .jok-cab-pags a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
  .jok-cab-secciones .jok-cab-sec-a:hover,
  .jok-cab-secciones .jok-cab-sec-a:focus-visible,
  .jok-cab-pags a:hover { background: var(--jok-gris); color: var(--jok-verde); }
  .jok-cab-sub,
  .jok-cab-sec:nth-last-child(-n+2) > .jok-cab-sub {
    left: 0;
    right: auto;
    margin-top: 0;
    border-color: var(--jok-borde);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(22, 41, 15, .16);
  }
  .jok-cab-secciones .jok-cab-sub a { display: block; padding: 8px 12px; border-radius: 2px; }
  .jok-cab-secciones .jok-cab-sub a:hover,
  .jok-cab-secciones .jok-cab-sub a:focus-visible { background: var(--jok-gris); color: var(--jok-verde); }
  .jok-cab-sub-todo { color: var(--jok-verde) !important; border-color: var(--jok-borde); }
}
@media (min-width: 923px) and (max-width: 1180px) {
  #ast-desktop-header .custom-logo { width: 140px; max-width: 140px; }
  .jok-cab-secciones .jok-cab-sec-a,
  .jok-cab-pags a { padding: 7px 6px; font-size: 13px; }
  .jok-cab-secciones { margin-left: -6px; }
  .jok-cab-pags { margin-right: -6px; }
  .jok-cab-fl { display: none; }
}
@media (max-width: 922px) {
  .jok-cab-fila { display: none; }
  .jok-cab-movil { display: block; padding: 0 12px 10px; background: #FFFFFF; }
  body .jok-cab-buscar input[type="search"] { font-size: 16px; }
  #ast-mobile-header .ast-header-search { display: none; }
  #ast-mobile-header .ast-primary-header-bar { border-bottom: 0; }
  #masthead { box-shadow: 0 2px 5px rgba(22, 41, 15, .12); }
}

/* --- ancho de tienda --- */
body.woocommerce #content .ast-container,
body.woocommerce-cart #content .ast-container,
body.woocommerce-checkout #content .ast-container,
body.woocommerce-account #content .ast-container {
  max-width: 1400px;
  padding-left: 16px;
  padding-right: 16px;
}

body.blog #content .ast-container,
body.search #content .ast-container {
  max-width: 1400px;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 1180px) {
  body.blog #content .ast-row,
  body.search #content .ast-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* --- banner con la foto del seto: dentro de la página, con esquinas suaves --- */
body .jok-page .jok-hero,
body .jok-blog-head,
body.single-post .ast-article-single:not(:has(.jok-hero2)) .entry-header .entry-title,
body.single-post .jok-hero2,
body.error404 #primary .error-404 {
  background-color: var(--jok-noche);
  background-image: var(--jok-banda-capas), var(--jok-banda-foto);
  background-position: center 30%;
  background-size: cover;
  background-repeat: no-repeat;
  border: 0;
  border-radius: 6px;
}
body .jok-page .jok-hero h1,
body .jok-blog-head .jok-blog-h1,
body.single-post .ast-article-single:not(:has(.jok-hero2)) .entry-header .entry-title,
body.single-post .jok-hero2-title,
body .error-404 .page-title {
  margin: 0;
  color: #FFFFFF;
  font-family: Poppins, sans-serif;
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}

/* --- títulos de las demás páginas: sencillos, sobre blanco --- */
body.page:not(.home) #primary { margin-top: 0; padding-top: 0; }
body.page .ast-article-single:has(> .entry-header > .entry-title) {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
body.page .ast-article-single > .entry-header:has(> .entry-title) {
  margin: clamp(18px, 2.4vw, 28px) 0 clamp(14px, 1.6vw, 20px);
  padding: 0;
  background: none;
  text-align: left;
}
body.page .ast-article-single > .entry-header .entry-title,
body .woocommerce-products-header__title.page-title {
  margin: 0;
  color: var(--jok-oscuro);
  font-family: Poppins, sans-serif;
  font-size: clamp(23px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
}
body.page .ast-article-single:has(> .entry-header > .entry-title) > .entry-content {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .ast-article-single:has(> .entry-header > .entry-title) > .entry-header,
body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .ast-article-single:has(> .entry-header > .entry-title) > .entry-content {
  max-width: 860px;
  margin-inline: auto;
}
body.page .ast-article-single:has(> .entry-header > .entry-title) > .entry-content { margin-bottom: clamp(32px, 4vw, 56px); }
body.page .ast-article-single:has(> .entry-header > .entry-title) .entry-content h2 {
  margin: 30px 0 10px;
  color: var(--jok-oscuro);
  font-family: Poppins, sans-serif;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
}
body.page .ast-article-single:has(> .entry-header > .entry-title) .entry-content h2:first-child { margin-top: 0; }
body.page .ast-article-single:has(> .entry-header > .entry-title) .entry-content h3 { color: var(--jok-oscuro); font-size: 17px; font-weight: 700; }
body.page .ast-article-single:has(> .entry-header > .entry-title) .entry-content p,
body.page .ast-article-single:has(> .entry-header > .entry-title) .entry-content li { color: var(--jok-texto); }

/* --- botones: naranja para comprar --- */
body .woocommerce button.button,
body .woocommerce a.button,
body .woocommerce input.button,
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce button.button.alt,
body.woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce a.button.alt,
body .wc-block-components-button:not(.is-link),
body .wp-block-button .wp-block-button__link,
body .jok-inf-btn,
body .jok-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 24px;
  background: var(--jok-compra) !important;
  color: #FFFFFF !important;
  border: 0;
  border-radius: 4px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}
body .woocommerce button.button:hover,
body .woocommerce a.button:hover,
body .woocommerce input.button:hover,
body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body.woocommerce button.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .wc-block-components-button:not(.is-link):hover,
body .wp-block-button .wp-block-button__link:hover,
body .jok-inf-btn:hover,
body .jok-boton:hover {
  background: var(--jok-compra-o) !important;
  color: #FFFFFF !important;
  transform: none;
}

/* --- verde para el resto: enviar, entrar y registrarse --- */
body .srfm-form .srfm-button.srfm-submit-button,
body .jok-page .jok-btn--p,
body .woocommerce button.button.woocommerce-form-login__submit,
body .woocommerce button.button.woocommerce-form-register__submit,
body .woocommerce .woocommerce-ResetPassword button.button,
body .woocommerce .woocommerce-EditAccountForm button.button,
body .woocommerce .woocommerce-address-fields button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 24px;
  background: var(--jok-verde) !important;
  color: #FFFFFF !important;
  border: 0;
  border-radius: 4px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}
body .srfm-form .srfm-button.srfm-submit-button:hover,
body .jok-page .jok-btn--p:hover,
body .woocommerce button.button.woocommerce-form-login__submit:hover,
body .woocommerce button.button.woocommerce-form-register__submit:hover,
body .woocommerce .woocommerce-ResetPassword button.button:hover,
body .woocommerce .woocommerce-EditAccountForm button.button:hover,
body .woocommerce .woocommerce-address-fields button.button:hover {
  background: var(--jok-verde-o) !important;
  color: #FFFFFF !important;
  transform: none;
}

body .woocommerce button.show-password-input {
  min-height: 0;
  padding: 0;
  background: none !important;
  color: var(--jok-oscuro) !important;
}
body .jok-boton-sec {
  background: transparent !important;
  border: 2px solid #FFFFFF;
}
body .jok-boton-sec:hover {
  background: #FFFFFF !important;
  color: var(--jok-oscuro) !important;
}

/* --- formularios --- */
body .woocommerce form .input-text,
body .woocommerce form input[type="text"],
body .woocommerce form input[type="email"],
body .woocommerce form input[type="password"],
body .woocommerce form select,
body .woocommerce form textarea {
  min-height: 46px;
  background: #FFFFFF;
  border: 1px solid #C9D1C1;
  border-radius: 4px;
  color: var(--jok-oscuro);
}
body .srfm-form .srfm-input-common {
  background: #FFFFFF !important;
  border: 1px solid #C9D1C1 !important;
  border-radius: 4px !important;
  color: var(--jok-oscuro) !important;
}
body .srfm-form .srfm-input-common::placeholder { color: var(--jok-apagado) !important; }
body .woocommerce form .input-text:focus,
body .srfm-form .srfm-input-common:focus {
  border-color: var(--jok-verde) !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(47, 93, 34, .18);
}

/* --- contacto y sobre nosotros --- */
body .jok-page {
  --jok-g: #2F5D22;
  --jok-g2: #EF6C00;
  --jok-ink: #16290F;
  --jok-mut: #56644D;
  --jok-bg: #FFFFFF;
  --jok-line: #D9DCD3;
}
body .jok-page .jok-hero {
  width: auto !important;
  max-width: none !important;
  margin: 16px max(calc(50% - 50vw + 16px), calc(50% - 684px)) clamp(24px, 3vw, 36px) !important;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px);
}
body .jok-page .jok-hero .jok-kicker { color: var(--jok-amarillo); }
body .jok-page .jok-hero h1 { margin-bottom: 12px; }
body .jok-page .jok-hero p { color: rgba(255, 255, 255, .9); }
body .jok-page .jok-hero b,
body .jok-page .jok-hero strong { color: #FFFFFF; }
body .entry-content > .jok-page:last-child { padding-bottom: clamp(36px, 5vw, 64px); }
/* el tema las limita a 1200px sin margen: en móvil iban pegadas al borde */
body .jok-page > :not(.jok-hero),
body .srfm-form-container > .srfm-form { width: calc(100% - 32px); }

/* --- blog y buscador --- */
body.blog #primary,
body.archive:not(.woocommerce) #primary { margin-top: 0; padding-top: 0; }
body .jok-blog-head {
  margin: 16px max(calc(50% - 50vw + 16px), calc(50% - 684px)) clamp(20px, 2.4vw, 28px);
  padding: clamp(26px, 3.4vw, 44px) clamp(20px, 4vw, 56px);
}
body .jok-blog-head .jok-blog-h1 { margin-bottom: 8px; }
body .jok-blog-head .jok-blog-sub { color: rgba(255, 255, 255, .9); }
body .jok-blog-head .jok-filtro {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  border-radius: 4px;
  color: #FFFFFF;
}
body .jok-blog-head .jok-filtro:hover { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
body .jok-blog-head .jok-filtro-activo {
  background: var(--jok-naranja);
  border-color: var(--jok-naranja);
  color: #FFFFFF;
}
body .jok-blog-head .jok-filtro-num { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
body .jok-blog-head .jok-buscador-btn { background: var(--jok-verde); }
body .jok-blog-head input[type="search"],
body .jok-blog-head input[type="text"] { border-radius: 4px; }
body.search .ast-archive-description { display: none; }

body.blog .ast-article-post .ast-article-inner { border: 1px solid var(--jok-borde); border-radius: 4px; box-shadow: none; overflow: hidden; }
body.blog .ast-article-inner .entry-meta { font-size: 0; }
body.blog .ast-article-inner .entry-meta > * { font-size: 12.5px; }
body.blog .ast-article-inner .entry-meta .posted-by { display: none; }
body.blog .ast-article-inner .entry-title,
body.blog .ast-article-inner .entry-title a {
  color: var(--jok-oscuro);
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.3;
}
body.blog .ast-article-inner h2.entry-title { margin-top: 16px; }
body.blog .ast-read-more-container a { color: var(--jok-verde); font-weight: 700; }

/* --- entradas: tres no tienen cabecera propia y el título estaba oculto --- */
body.single-post .ast-article-single:not(:has(.jok-hero2)) .entry-header {
  display: flex !important;
  flex-direction: column;
  margin: 16px 0 clamp(24px, 3vw, 36px);
}
body.single-post .ast-article-single:not(:has(.jok-hero2)) .entry-header .entry-title {
  order: -1;
  margin-inline: max(calc(50% - 50vw + 16px), calc(50% - 684px));
  padding: clamp(32px, 4.4vw, 56px) max(20px, calc(50% - 430px));
}
body.single-post .ast-article-single:not(:has(.jok-hero2)) .entry-header .post-thumb {
  width: min(860px, calc(100% - 40px));
  margin: clamp(20px, 3vw, 32px) auto 0;
  border-radius: 4px;
  overflow: hidden;
}
body.single-post .ast-article-single:not(:has(.jok-hero2)) .entry-header .post-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
body.single-post .jok-hero2::before,
body.single-post .jok-hero2::after,
body.single-post .jok-hero2-blob { display: none; }
body.single-post .jok-hero2 {
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 16px max(calc(50% - 50vw + 16px), calc(50% - 684px)) 0;
  padding: clamp(32px, 4.4vw, 56px) clamp(20px, 4vw, 56px);
}
body.single-post .jok-hero2-title { margin-bottom: 12px; }
body.single-post .jok-hero2-sub { color: rgba(255, 255, 255, .9); }
body.single-post .jok-hero2-meta span {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
  border-radius: 4px;
  color: #FFFFFF;
  box-shadow: none;
}
body.single-post .jok-hero2-meta span i { color: var(--jok-amarillo); }
body.single-post .jok-hero2-badge {
  background: var(--jok-amarillo);
  color: var(--jok-oscuro);
  border-color: var(--jok-amarillo);
  border-radius: 4px;
}

/* --- tienda y categorías: migas, título sencillo y tarjetas con placa blanca --- */
body.woocommerce.archive #primary { width: 100%; max-width: none; margin: 0; padding-top: 0; }
body.woocommerce.archive .ast-woocommerce-container { padding: 0; background: none; border: 0; }
body.woocommerce .woocommerce-breadcrumb {
  margin: 0;
  padding: 14px 0 12px;
  color: var(--jok-texto);
  font-size: 13.5px;
}
body.woocommerce .woocommerce-breadcrumb a {
  color: var(--jok-oscuro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.woocommerce .woocommerce-breadcrumb a:hover { color: var(--jok-verde); }
body .woocommerce-products-header { margin: 0 0 8px; }
body .woocommerce-products-header > .term-description {
  max-width: 76ch;
  margin: 6px 0 0;
  color: var(--jok-texto);
  font-size: 15px;
}
body .woocommerce-products-header > .term-description p { margin: 0; color: inherit; }
body .jok-tienda-cab { margin: 6px 0 0; }
body .jok-tienda-sub { max-width: 76ch; margin: 0 0 10px; color: var(--jok-texto); font-size: 15px; line-height: 1.55; }
/* el buscador grande de la cabecera ya cubre esto: dos seguidos sobraban */
body .jok-tienda-buscar { display: none; }
body .jok-tienda-garantias { gap: 6px 22px; }
body .jok-tienda-garantias li { color: var(--jok-texto); font-size: 13.5px; }
body .jok-tienda-garantias .fas { color: var(--jok-verde); }
body .jok-tienda-cats {
  margin: clamp(18px, 2vw, 26px) 0 8px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
body .jok-tienda-cats-tit {
  margin: 0 0 2px;
  color: var(--jok-oscuro);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: -.01em;
}
body .jok-tienda-cats-sub { margin: 0 0 14px; font-size: 14px; color: var(--jok-apagado); }
body .jok-tienda-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
body .jok-cat {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: 4px;
  background: var(--jok-gris);
  box-shadow: var(--jok-sombra);
}
body .jok-cat:hover,
body .jok-cat:focus-visible { transform: none; box-shadow: 0 3px 10px rgba(22, 41, 15, .28); }
body .jok-cat-foto { position: absolute; inset: 0; aspect-ratio: auto; background: var(--jok-gris); }
/* dos de las fotos traen una línea verde en el borde: este zoom la deja fuera */
body .jok-cat-foto img,
body .jok-cat:hover .jok-cat-foto img { transform: scale(1.09); }
body .jok-cat-txt {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  flex: none;
  gap: 1px;
  padding: 8px;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  text-align: center;
}
body .jok-cat-nom { color: var(--jok-oscuro); font-size: 13.5px; font-weight: 700; line-height: 1.25; }
body .jok-cat-num { color: var(--jok-apagado); font-size: 10.5px; letter-spacing: .08em; }
body .jok-cat-fl { display: none; }
body.post-type-archive-product .jok-tienda-vacia { display: none; }
body.woocommerce.archive .jok-tienda-vacia {
  margin-top: clamp(16px, 2vw, 24px);
  background: var(--jok-gris);
  border: 0;
  border-left: 4px solid var(--jok-naranja);
  border-radius: 4px;
  color: var(--jok-oscuro);
}

/* --- tarjetas de producto --- */
body.woocommerce ul.products li.product,
body .woocommerce ul.products li.product {
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid var(--jok-borde);
  border-radius: 4px;
  box-shadow: none;
  text-align: center;
  transition: box-shadow .15s;
}
body.woocommerce ul.products li.product:hover,
body .woocommerce ul.products li.product:hover { box-shadow: 0 2px 10px rgba(22, 41, 15, .18); transform: none; }
body.woocommerce ul.products li.product img,
body .woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 2px;
  background: #FFFFFF;
}
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body .woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--jok-oscuro);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
body.woocommerce ul.products li.product .price,
body .woocommerce ul.products li.product .price {
  color: var(--jok-compra);
  font-size: 18px;
  font-weight: 700;
}
body.woocommerce ul.products li.product .price del,
body .woocommerce ul.products li.product .price del { color: var(--jok-apagado); font-size: 13px; font-weight: 500; }
body.woocommerce ul.products li.product .price ins,
body .woocommerce ul.products li.product .price ins { color: inherit; background: none; text-decoration: none; }
body.woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product .button { width: 100%; min-height: 40px; padding: 8px 12px; font-size: 14px; }
body.woocommerce span.onsale,
body .woocommerce span.onsale,
body .ast-onsale-card {
  min-width: 0;
  min-height: 0;
  padding: 5px 8px;
  background: var(--jok-amarillo);
  color: var(--jok-oscuro);
  border-radius: 4px;
  box-shadow: none;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
/* la cesta que asoma sobre la foto repetía el botón que hay justo debajo */
body ul.products li.product .ast-on-card-button.ast-select-options-trigger { display: none; }
body.woocommerce.archive ul.products { margin-top: clamp(18px, 2vw, 26px); }

/* --- los bloques propios, con el mismo radio pequeño --- */
body .jok-tienda-item,
body .jok-tienda-nota,
body .jok-page .jok-card,
body .jok-page .jok-faq,
body .jok-page .jok-strip,
body .jok-page .jok-steps,
body .jok-page .jok-ico,
body .jok-page .jok-btn,
body .jok-art-callout,
body .jok-art-toc,
body .jok-art-card-sm,
body .jok-art-table-wrap,
body .jok-art-step,
body .jok-art-faq-item,
body .jok-art-cta,
body .jok-art-cta-btn,
body .jok-seguir,
body .jok-rel-card { border-radius: 4px; }
body .jok-tienda-lead { margin-top: clamp(18px, 2vw, 26px); }
body .jok-tienda-nota { background: var(--jok-gris); color: var(--jok-oscuro); }
body .jok-tienda-nota a { color: var(--jok-verde); }
body.woocommerce.archive #primary { padding-bottom: clamp(32px, 4vw, 48px); }
body .jok-tienda-cats-tit { margin-bottom: 12px; }
body .jok-tienda-cats-tit:has(+ .jok-tienda-cats-sub) { margin-bottom: 2px; }
body .jok-buscador { padding: 5px 5px 5px 16px; border-radius: 4px; }
body .jok-buscador-btn { border-radius: 2px; letter-spacing: 0; text-transform: none; }
body.single-post .jok-hero2-wave { display: none; }

/* --- 404 --- */
body.error404 #primary { margin-top: 0; padding-top: 0; }
body.error404 #primary .error-404 {
  margin: 16px max(calc(50% - 50vw + 16px), calc(50% - 684px)) clamp(24px, 3vw, 40px);
  padding: clamp(36px, 5vw, 72px) clamp(20px, 4vw, 56px);
}
body .error-404 .ast-404-layout-1 { padding: 0; }
body .error-404 .page-sub-title {
  margin-top: 12px;
  color: rgba(255, 255, 255, .9);
  font-size: 17px;
  font-weight: 500;
}
body .error-404 .ast-404-search .search-field {
  min-height: 46px;
  background: #FFFFFF;
  border: 0;
  border-radius: 4px;
}
body .jok-404-salidas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* --- carrito vacío --- */
body .wc-block-cart__empty-cart__title {
  color: var(--jok-oscuro);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 700;
}
body .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  background-color: var(--jok-verde);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 11-1 9M19 11l-4-7M2 11h20M3.5 11l1.6 7.4A2 2 0 0 0 7 20h10a2 2 0 0 0 2-1.6l1.7-7.4M4.5 15.5h15M5 11l4-7M9 11l1 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 11-1 9M19 11l-4-7M2 11h20M3.5 11l1.6 7.4A2 2 0 0 0 7 20h10a2 2 0 0 0 2-1.6l1.7-7.4M4.5 15.5h15M5 11l4-7M9 11l1 9'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* «Nuevo en la tienda» solo tiene sentido cuando hay productos que enseñar */
body .wp-block-woocommerce-empty-cart-block:not(:has(.wc-block-grid__product)) > .wp-block-separator,
body .wp-block-woocommerce-empty-cart-block:not(:has(.wc-block-grid__product)) > h2:not(.with-empty-cart-icon) { display: none; }

/* --- mi cuenta --- */
body.woocommerce-account .entry-content .woocommerce { max-width: none !important; margin-inline: 0 !important; }
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 { min-width: 0; }
body.woocommerce-account #customer_login h2 { margin-top: 0; font-size: clamp(19px, 1.7vw, 22px); font-weight: 700; color: var(--jok-oscuro); }
body.woocommerce-account #customer_login .woocommerce-form {
  background: #FFFFFF;
  border: 1px solid var(--jok-borde);
  border-radius: 4px;
}
body .jok-cta-motivos li.jok-cta-destacado { display: block; position: relative; padding-left: 28px; }
body .jok-cta-motivos li.jok-cta-destacado svg { position: absolute; left: 0; top: 2px; }
body .woocommerce-privacy-policy-text p { font-size: 13.5px; line-height: 1.55; }
body .woocommerce-MyAccount-navigation ul {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--jok-borde);
  border-radius: 4px;
}
body .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--jok-verde);
  color: #FFFFFF;
}

/* --- contador del carrito: el amarillo de las etiquetas de descuento --- */
body #masthead .astra-icon.ast-icon-shopping-basket::after {
  background: var(--jok-amarillo);
  color: var(--jok-oscuro);
  font-weight: 700;
}

/* --- pie: cinco columnas, letra pequeña, línea fina, copyright y formas de pago --- */
body .site-footer {
  background: #FFFFFF;
  border-top: 1px solid var(--jok-borde);
  border-image: none;
  color: var(--jok-apagado);
  font-family: Poppins, sans-serif;
}
body .site-footer .site-primary-footer-wrap {
  padding: 36px 16px 24px;
  background: #FFFFFF;
  border: 0;
  border-image: none;
}
body .site-footer .site-primary-footer-wrap .site-primary-footer-inner-wrap.ast-builder-grid-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
  max-width: 1240px !important;
  margin-inline: auto;
  padding-inline: 0;
}
body .site-footer .site-footer-section {
  display: block;
  margin: 0;
  text-align: left;
}
body .site-footer .footer-widget-area,
body .site-footer .footer-widget-area .widget,
body .site-footer .ast-builder-html-element {
  margin: 0;
  text-align: left !important;
}
body .site-footer .site-footer-section .widget-title {
  margin: 0 0 12px;
  color: var(--jok-oscuro);
  font-family: Poppins, sans-serif;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}
body .site-footer .widget_nav_menu ul { margin: 0; padding: 0; list-style: none; }
body .site-footer .widget_nav_menu li { margin: 0 0 3px; padding: 0; border: 0; line-height: 1.45; }
body .site-footer .widget_nav_menu .menu-item .menu-link {
  display: inline-block;
  padding: 0;
  color: var(--jok-apagado) !important;
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  transform: none;
}
body .site-footer .widget_nav_menu .menu-item .menu-link:hover,
body .site-footer .widget_nav_menu .menu-item .menu-link:focus-visible {
  color: var(--jok-oscuro) !important;
  text-decoration: underline;
  transform: none;
}
body .site-footer .jokf-escribe {
  display: flex;
  gap: 9px;
  margin-top: 10px;
  color: var(--jok-apagado);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}
body .site-footer .jokf-escribe:hover { color: var(--jok-oscuro); }
body .site-footer .jokf-escribe small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; }
body .site-footer .jokf-contacto,
body .site-footer .jokf-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body .site-footer .jokf-contacto li,
body .site-footer .jokf-lista li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: var(--jok-apagado);
  font-size: 14px;
  line-height: 1.45;
}
body .site-footer .jokf-contacto a {
  display: inline;
  padding: 0;
  border: 0;
  color: var(--jok-apagado);
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body .site-footer .jokf-contacto a:hover { color: var(--jok-oscuro); text-decoration: underline; }
body .site-footer .jokf-contacto .fas,
body .site-footer .jokf-lista .fas,
body .site-footer .jokf-escribe .fas {
  flex: none;
  width: 14px;
  margin-top: 3px;
  color: var(--jok-verde);
  font-size: 13px;
  text-align: center;
}
body .site-footer .jokf-nota { margin: 8px 0 0; color: var(--jok-apagado); font-size: 12px; line-height: 1.4; }
body .site-footer .site-below-footer-wrap {
  padding: 0 16px 24px;
  background: #FFFFFF;
  border: 0;
  color: var(--jok-apagado);
}
body .site-footer .site-below-footer-wrap .site-below-footer-inner-wrap {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1368px !important;
  min-height: 0;
  margin-inline: auto;
  padding: 16px 0 0;
  border-top: 1px solid var(--jok-borde);
}
body .site-footer .site-below-footer-wrap .site-footer-below-section-2 { display: none; }
body .site-footer .site-below-footer-wrap .site-footer-below-section-1 { display: block; text-align: center; }
body .site-footer .ast-footer-copyright,
body .site-footer .ast-footer-copyright p { margin: 0; color: var(--jok-apagado); font-size: 13.5px; line-height: 1.5; }
body .site-footer .jokf-copy { display: block; }
body .site-footer .jokf-pais { color: var(--jok-oscuro); white-space: nowrap; }
body .site-footer .jokf-pais img { display: inline-block; width: 18px; height: 18px; margin-right: 3px; vertical-align: -4px; }
body .site-footer .jokf-escribe,
body .site-footer .jokf-contacto li { align-items: flex-start; }
body .site-footer .jokf-pagos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
body .site-footer .jokf-pagos img {
  display: block;
  box-sizing: content-box;
  width: 38px;
  height: 24px;
  padding: 3px 5px;
  background: #FFFFFF;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(22, 41, 15, .28);
  object-fit: contain;
}

@media (max-width: 1100px) {
  body .jok-tienda-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .site-footer .site-primary-footer-wrap .site-primary-footer-inner-wrap.ast-builder-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 921px) {
  /* el dedo necesita algo más de alto que el ratón */
  body .site-footer .widget_nav_menu .menu-item .menu-link { padding: 5px 0; }
  body .site-footer .jokf-contacto a { display: inline-block; padding: 4px 0; font-size: 14px; }
  body .site-footer .jokf-contacto li:has(a) .fas { margin-top: 8px; }
}
@media (max-width: 767px) {
  body .site-footer .site-primary-footer-wrap { padding: 26px 12px 16px; }
  /* Explora y Secciones, lado a lado: de uno en uno el pie medía dos pantallas */
  body .site-footer .site-primary-footer-wrap .site-primary-footer-inner-wrap.ast-builder-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  body .site-footer .site-footer-primary-section-1,
  body .site-footer .site-footer-primary-section-2,
  body .site-footer .site-footer-primary-section-5 { grid-column: 1 / -1; }
  body .site-footer .site-below-footer-wrap { padding-inline: 12px; }
  body .site-footer .jokf-pais { display: block; margin-bottom: 4px; }
  body .site-footer .jokf-guion { display: none; }
}
}
@media (max-width: 767px) {
  :root {
    --jok-banda-capas: linear-gradient(180deg, rgba(13, 22, 9, .86), rgba(13, 22, 9, .8));
    --jok-banda-foto: url(/wp-content/uploads/jok-portada/hero-fondo-movil.webp);
  }
  body:not(.home):not(.single-post) #content .ast-container:not(:has(.jok-page)) { padding-left: 12px; padding-right: 12px; }
  body .jok-tienda-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body .woocommerce button.button,
  body .woocommerce a.button,
  body .srfm-form .srfm-button.srfm-submit-button { width: 100%; }
}

/* --- carrito y pago: título compacto y el botón de pagar siempre a la vista.
   WooCommerce oculta «Finalizar compra» en escritorio mientras queda bajo la
   pantalla, así que va justo debajo del total y antes del pago exprés --- */
body .wc-block-cart__sidebar { display: flex; flex-direction: column; }
body .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block { order: 1; }
body .wc-block-cart__sidebar > .wc-block-cart__submit { order: 2; }
body .wc-block-cart__sidebar > .wc-block-cart__payment-options { order: 3; display: flex; flex-direction: column-reverse; }
body .wc-block-cart__payment-options .wc-block-components-express-payment { width: 100%; }
body .wc-block-cart__payment-options .wc-block-components-express-payment__event-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}
body .wc-block-cart__payment-options .wc-block-components-express-payment__event-buttons > * { width: 100%; }
/* --- el bloque de carrito y pago viene con ancho extra y se salia de su tarjeta --- */
body.woocommerce-cart .entry-content > .alignwide,
body.woocommerce-checkout .entry-content > .alignwide {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* títulos y campos del carrito y el pago, más sobrios */
body .wc-block-cart__totals-title {
  color: var(--jok-oscuro);
  font-family: Poppins, sans-serif;
  font-size: 18px !important;
  font-weight: 700;
  text-transform: none !important;
}
body .wc-block-components-title,
body .wc-block-components-checkout-step__title {
  color: var(--jok-oscuro);
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 700;
}
body .wc-block-components-product-name {
  color: var(--jok-oscuro);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
body .wc-block-components-text-input input,
body .wc-block-components-combobox .components-combobox-control input,
body .wc-block-components-country-input select,
body .wc-block-components-state-input select,
body .wc-blocks-components-select__select {
  border-color: #C9D1C1 !important;
  border-radius: 4px !important;
}
body .wc-block-components-order-summary-item__quantity { background: var(--jok-oscuro); color: #FFFFFF; }

/* --- ficha de producto --- */
body.single-product .ast-woocommerce-container { padding: 0; background: none; border: 0; border-radius: 0; }
body.single-product #primary { margin-top: 0; padding-top: 0; }
body.single-product .product_title {
  color: var(--jok-oscuro);
  font-family: Poppins, sans-serif;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
}
body.single-product .summary .price,
body.single-product .summary .price ins,
body.single-product .summary .price > .amount,
body.single-product .summary .price ins .amount {
  color: var(--jok-compra) !important;
  background: none;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 700;
  text-decoration: none;
}
body.single-product .summary .price del,
body.single-product .summary .price del .amount { color: var(--jok-apagado) !important; font-size: 15px; font-weight: 500; }
/* resumen ordenado: categoría, título, precio, pagos a plazos, texto y botón */
body.single-product .summary { display: flex; flex-direction: column; }
body.single-product .summary > .single-product-category { order: 1; }
body.single-product .summary > .product_title { order: 2; }
body.single-product .summary > .price { order: 3; }
body.single-product .summary > #payment-method-message { order: 4; margin-bottom: 12px; }
body.single-product .summary > .woocommerce-product-details__short-description { order: 5; }
body.single-product .summary > form.cart { order: 6; }
body.single-product .summary > .wcpay-express-checkout-wrapper { order: 7; }
body.single-product .summary > .product_meta { order: 8; }
body.single-product .woocommerce-product-gallery__image img { width: 100%; max-height: 560px; object-fit: contain; }
body.single-product .woocommerce-product-gallery__image { border-radius: 4px; overflow: hidden; }
body.single-product form.cart .quantity .qty {
  width: 68px;
  min-height: 46px;
  border: 1px solid #C9D1C1;
  border-radius: 4px;
}
body.single-product form.cart .single_add_to_cart_button { min-height: 46px; font-size: 16px; }
body.single-product .woocommerce-message { border-radius: 4px; }
body.single-product .woocommerce-tabs ul.tabs li a { font-family: Poppins, sans-serif; font-weight: 600; }

/* ===== FIN ESTILO TIENDA ===== */