/*
Theme Name: Naranja Store
Theme URI: https://tudominio.com
Author: Tu Nombre
Author URI: https://tudominio.com
Description: Tema sobrio y moderno para tienda virtual, con paleta naranja, blanco y negro. Compatible con WooCommerce, responsive y ligero.
Version: 1.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: naranja-store
Tags: e-commerce, custom-colors, custom-menu, responsive-layout, woocommerce
*/

:root{
  --color-naranja: #FF6B00;
  --color-naranja-oscuro: #E05A00;
  --color-negro: #111111;
  --color-blanco: #FFFFFF;
  --color-gris-claro: #F5F5F5;
  --color-gris: #777777;
  --fuente-base: 'Helvetica Neue', Arial, sans-serif;
  --radio: 6px;
  --transicion: all .25s ease-in-out;
}

*, *::before, *::after{ box-sizing: border-box; }

body{
  margin:0;
  font-family: var(--fuente-base);
  color: var(--color-negro);
  background: var(--color-blanco);
  line-height: 1.6;
  font-size: 16px;
}

a{ color: var(--color-negro); text-decoration: none; transition: var(--transicion); }
a:hover{ color: var(--color-naranja); }

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4,h5{ font-weight:700; letter-spacing:.5px; margin:0 0 .6em; color:var(--color-negro); }
h1{ font-size:2.4rem; }
h2{ font-size:1.8rem; }
h3{ font-size:1.3rem; }

.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

.topbar{
  background: var(--color-negro);
  color: var(--color-blanco);
  font-size: .85rem;
  padding: 6px 0;
  text-align: center;
  letter-spacing: .5px;
}

.site-header{
  background: var(--color-blanco);
  border-bottom: 2px solid var(--color-negro);
  position: sticky;
  top:0;
  z-index: 999;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
  flex-wrap:wrap;
  gap:12px;
}
.site-branding a{ font-size:1.6rem; font-weight:800; color:var(--color-negro); }
.site-branding a span{ color: var(--color-naranja); }
.site-branding img{ max-height:50px; }

.main-navigation ul{
  list-style:none;
  display:flex;
  gap:26px;
  margin:0;
  padding:0;
}
.main-navigation a{
  font-weight:600;
  text-transform:uppercase;
  font-size:.85rem;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.main-navigation a:hover,
.main-navigation .current-menu-item a{
  border-bottom-color: var(--color-naranja);
  color: var(--color-negro);
}

.header-actions{ display:flex; align-items:center; gap:18px; }
.header-actions .cart-contents{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:var(--color-negro);
}
.header-actions .cart-count{
  background: var(--color-naranja);
  color: var(--color-blanco);
  border-radius:50%;
  min-width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  padding:0 4px;
}

.menu-toggle{
  display:none;
  background:none;
  border:2px solid var(--color-negro);
  border-radius:var(--radio);
  padding:6px 10px;
  cursor:pointer;
  font-size:1.2rem;
}

@media (max-width: 860px){
  .main-navigation{
    display:none;
    width:100%;
    order:3;
  }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; gap:0; }
  .main-navigation a{ display:block; padding:12px 0; border-bottom:1px solid var(--color-gris-claro); }
  .menu-toggle{ display:inline-block; }
}

.hero{
  background: var(--color-negro);
  color: var(--color-blanco);
  text-align:center;
  padding: 80px 20px;
}
.hero h1{ color:var(--color-blanco); font-size:2.6rem; margin-bottom:.4em; }
.hero p{ color:#cccccc; max-width:600px; margin:0 auto 1.6em; }

.btn, .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce input.button{
  display:inline-block;
  background: var(--color-naranja);
  color: var(--color-blanco) !important;
  border:none;
  padding:12px 28px;
  border-radius: var(--radio);
  font-weight:700;
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.5px;
  cursor:pointer;
  transition: var(--transicion);
}
.btn:hover, .button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce input.button:hover{
  background: var(--color-naranja-oscuro);
  color: var(--color-blanco) !important;
}
.btn-outline{
  background:transparent;
  border:2px solid var(--color-blanco);
  color: var(--color-blanco) !important;
}
.btn-outline:hover{ background:var(--color-blanco); color:var(--color-negro) !important; }

.section{ padding:60px 0; }
.section-title{ text-align:center; margin-bottom:40px; }
.section-title h2{ position:relative; display:inline-block; }
.section-title h2::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:var(--color-naranja);
  margin:14px auto 0;
}

.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:960px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.woocommerce ul.products{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:26px;
  list-style:none;
  padding:0;
  margin:0 0 40px;
}
@media (max-width:960px){ .woocommerce ul.products{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .woocommerce ul.products{ grid-template-columns: 1fr; } }

.woocommerce ul.products li.product{
  background: var(--color-blanco);
  border:1px solid var(--color-gris-claro);
  border-radius: var(--radio);
  padding:16px;
  text-align:center;
  transition: var(--transicion);
  position:relative;
}
.woocommerce ul.products li.product:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transform: translateY(-4px);
  border-color: var(--color-naranja);
}
.woocommerce ul.products li.product img{
  border-radius: var(--radio);
  margin-bottom:14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1rem;
  font-weight:700;
  color: var(--color-negro);
  margin:8px 0 6px;
}
.woocommerce ul.products li.product .price{
  color: var(--color-naranja);
  font-weight:800;
  font-size:1.1rem;
}
.woocommerce ul.products li.product .price del{ color:var(--color-gris); font-weight:400; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .onsale{
  background: var(--color-negro);
  color: var(--color-blanco);
  border-radius:50%;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700;
  position:absolute; top:10px; left:10px; margin:0;
}
.woocommerce ul.products li.product .button{
  margin-top:10px;
  width:100%;
}
.woocommerce ul.products li.product .star-rating{ margin:0 auto 6px; }

.woocommerce nav.woocommerce-pagination ul{ border:none; }
.woocommerce nav.woocommerce-pagination ul li{ border:none; margin:0 4px; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--color-negro);
  border-radius: var(--radio);
  color: var(--color-negro);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current{
  background: var(--color-naranja);
  border-color: var(--color-naranja);
  color: var(--color-blanco);
}

.woocommerce-ordering select,
.woocommerce-result-count{ font-size:.9rem; }
.woocommerce-ordering select{
  border:1px solid var(--color-negro);
  border-radius: var(--radio);
  padding:8px 12px;
}

.woocommerce div.product .product_title{ color:var(--color-negro); }
.woocommerce div.product p.price, .woocommerce div.product span.price{
  color: var(--color-naranja);
  font-size:1.6rem;
  font-weight:800;
}
.woocommerce div.product form.cart .button{
  padding:14px 34px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;
  border:none;
  border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover{
  border-bottom-color: var(--color-naranja);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--color-negro); }

.woocommerce span.onsale{ background: var(--color-negro); }

.woocommerce table.shop_table{ border:1px solid var(--color-gris-claro); border-radius:var(--radio); }
.woocommerce table.shop_table th{ background: var(--color-gris-claro); color:var(--color-negro); }
.woocommerce-checkout #payment{ background: var(--color-gris-claro); border-radius: var(--radio); }
.woocommerce-checkout #payment div.payment_box{ background: #efe6dd; }
.woocommerce-message, .woocommerce-info{ border-top-color: var(--color-naranja); }
.woocommerce-message::before, .woocommerce-info::before{ color: var(--color-naranja); }
.woocommerce-error{ border-top-color: var(--color-negro); }

.entry-content{ max-width:800px; margin:0 auto; }
article.post{ margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid var(--color-gris-claro); }
.entry-meta{ color:var(--color-gris); font-size:.85rem; margin-bottom:10px; }

.widget{ margin-bottom:36px; }
.widget-title{ text-transform:uppercase; font-size:1rem; border-bottom:2px solid var(--color-naranja); padding-bottom:8px; }

.site-footer{
  background: var(--color-negro);
  color: #cccccc;
  padding: 50px 0 20px;
  margin-top:60px;
}
.site-footer h4{ color:var(--color-blanco); text-transform:uppercase; font-size:.95rem; }
.site-footer a{ color:#cccccc; }
.site-footer a:hover{ color: var(--color-naranja); }
.footer-widgets{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:30px;
  padding-bottom:30px;
  border-bottom:1px solid #333;
}
@media (max-width:768px){ .footer-widgets{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:500px){ .footer-widgets{ grid-template-columns: 1fr; } }
.footer-bottom{
  text-align:center;
  padding-top:20px;
  font-size:.8rem;
  color:#888;
}
.footer-bottom span{ color: var(--color-naranja); }

.error-404{ text-align:center; padding:100px 20px; }
.error-404 h1{ font-size:6rem; color: var(--color-naranja); margin:0; }

.product-categories ul.products{ grid-template-columns: repeat(6, 1fr) !important; }
@media (max-width:960px){ .product-categories ul.products{ grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width:600px){ .product-categories ul.products{ grid-template-columns: repeat(2,1fr) !important; } }
.product-category img{ border-radius: var(--radio); }
.product-category h2{ font-size:.95rem; margin-top:8px; }