/* =========================================================
   JOYASMU — woocommerce.css
   Reskin de tienda, ficha de producto, carrito y checkout
   usando únicamente las clases nativas de WooCommerce.
   ========================================================= */

.wc-page-head{padding-left:0; padding-right:0;}

.woocommerce-breadcrumb{
  font-size:0.65rem;
  color:rgba(13,13,13,0.5);
  margin-bottom:30px;
  display:block;
}
.woocommerce-breadcrumb a{border-bottom:1px solid var(--line);}

/* ---------- Notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  list-style:none;
  border:1px solid var(--ink);
  border-radius:var(--radius-sm);
  padding:16px 20px;
  margin-bottom:30px;
  font-size:0.85rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.woocommerce-error{border-color:var(--red); color:var(--red-deep);}
.woocommerce-message .button, .woocommerce-info .button{
  font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;
  text-transform:uppercase;
  border:1px solid var(--ink);
  padding:8px 14px;
  background:none;
}

/* ---------- Grid de productos (tienda / categoría) ---------- */
ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  column-gap:0 !important;
  row-gap:1px !important;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius) !important;
  overflow:hidden;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  width:100% !important;
}
ul.products li.product{
  background:var(--bone);
  padding:26px 22px 22px;
  position:relative;
  margin:0 !important;
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  text-align:left;
  clear:none !important;
}
ul.products li.product a img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1/1.15;
  object-fit:cover;
  margin-bottom:22px;
  border-radius:var(--radius-sm);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
ul.products li.product:hover a img{transform:scale(1.06) rotate(-1deg);}
ul.products li.product .woocommerce-loop-product__title{
  font-family:'Bodoni Moda',serif;
  font-size:1.3rem;
  font-weight:500;
  margin-bottom:12px;
}
ul.products li.product .price{
  font-family:'JetBrains Mono',monospace;
  font-size:1rem;
  color:var(--red) !important;
  font-weight:700;
  display:block;
  margin-bottom:18px;
}
ul.products li.product .price del{opacity:0.5; margin-right:6px; font-weight:400; color:var(--ink);}
ul.products li.product .price ins{text-decoration:none;}
ul.products li.product .button{
  width:100%;
  text-align:center;
  margin-top:14px;
  padding:14px 16px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--amazon-yellow) !important;
  border:1px solid var(--amazon-yellow-border) !important;
  color:var(--amazon-text) !important;
  border-radius:var(--radius-sm) !important;
  display:block;
  transition:background .2s ease;
}
ul.products li.product .button:hover{background:var(--amazon-yellow-hover) !important; color:var(--amazon-text) !important;}
ul.products li.product .onsale{
  position:absolute; top:22px; left:22px;
  background:none; color:var(--red);
  font-size:0.6rem;
  border:1px solid var(--red);
  padding:3px 8px;
  min-height:0; min-width:0; line-height:1.4;
  border-radius:var(--radius-sm);
}

.woocommerce-result-count, .woocommerce-ordering{
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  text-transform:uppercase;
  margin-bottom:30px;
}
.woocommerce-ordering select{
  border:1px solid var(--ink);
  background:transparent;
  padding:8px 12px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
}

nav.woocommerce-pagination ul{display:flex; gap:12px; border:none;}
nav.woocommerce-pagination ul li{border:none;}
nav.woocommerce-pagination a, nav.woocommerce-pagination span{
  border:1px solid var(--line) !important;
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  padding:10px 14px;
}
nav.woocommerce-pagination .current{background:var(--ink); color:var(--bone);}

/* ---------- Ficha de producto individual ---------- */
.single-product div.product{
  display:grid;
  grid-template-columns:minmax(280px, 512px) 1fr;
  gap:60px;
  align-items:start;
}
.single-product div.product .woocommerce-product-gallery{
  width:100%;
  max-width:512px;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--bone);
}
.single-product div.product .woocommerce-product-gallery img{
  width:auto;
  height:auto;
  max-width:300px;
  max-height:360px;
  object-fit:contain;
  background:var(--bone);
  border-radius:var(--radius-sm);
}

/* La galería y el resumen ocupan cada uno su columna, pero las pestañas
   y los productos relacionados son hermanos del mismo grid: sin esto,
   cada uno caía encajado en una sola columna en vez de ocupar todo el ancho. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related.products{
  grid-column:1 / -1;
}

.single-product .product_title{
  font-family:'Bodoni Moda',serif;
  font-size:clamp(2rem,3.4vw,2.8rem);
  font-weight:500;
  margin-bottom:16px;
  line-height:1.1;
}
.single-product p.price{
  font-family:'JetBrains Mono',monospace;
  color:var(--red);
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:26px;
}
.single-product p.price del{opacity:0.5; color:var(--ink); margin-right:10px;}
.single-product .woocommerce-product-details__short-description{
  font-size:0.95rem;
  line-height:1.6;
  color:rgba(13,13,13,0.75);
  margin-bottom:30px;
  max-width:46ch;
}
.single-product form.cart{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:34px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 0;
}
.single-product form.cart .quantity input{
  width:60px;
  padding:14px 10px;
  border:1px solid var(--ink);
  background:transparent;
  font-family:'JetBrains Mono',monospace;
  text-align:center;
  border-radius:var(--radius-sm);
}
.single-product form.cart .button,
.single-product form.cart button[type="submit"],
.single-product button[name="add-to-cart"],
.woocommerce .single-product .single_add_to_cart_button{
  font-family:'JetBrains Mono',monospace !important;
  font-size:0.95rem !important;
  font-weight:700 !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  padding:18px 36px !important;
  background:var(--amazon-yellow) !important;
  border:1px solid var(--amazon-yellow-border) !important;
  color:var(--amazon-text) !important;
  border-radius:var(--radius-sm) !important;
  cursor:pointer;
  display:inline-block;
  line-height:1.2;
  transition:background .25s ease;
}
.single-product form.cart .button:hover,
.single-product form.cart button[type="submit"]:hover,
.single-product button[name="add-to-cart"]:hover,
.woocommerce .single-product .single_add_to_cart_button:hover{background:var(--amazon-yellow-hover) !important; border-color:var(--amazon-yellow-hover) !important;}

.single-product .product_meta{
  font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;
  color:rgba(13,13,13,0.55);
}
.single-product .product_meta a{border-bottom:1px solid var(--line);}

.woocommerce-tabs ul.tabs{display:flex; gap:30px; border-bottom:1px solid var(--line); margin:60px 0 30px; list-style:none;}
.woocommerce-tabs ul.tabs li{margin:0;}
.woocommerce-tabs ul.tabs li a{
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  text-transform:uppercase;
  padding-bottom:14px;
  display:inline-block;
}
.woocommerce-tabs ul.tabs li.active a{border-bottom:2px solid var(--red); color:var(--red);}
.woocommerce-tabs .panel{max-width:70ch; line-height:1.7; font-size:0.95rem;}

.related.products{margin-top:100px; border-top:1px solid var(--line); padding-top:60px;}
.related.products ul.products{grid-template-columns:repeat(3, 1fr) !important;}
.related.products > h2{
  font-family:'Bodoni Moda',serif;
  font-size:2rem;
  font-weight:500;
  margin-bottom:40px;
}

/* ---------- Carrito ---------- */
.woocommerce-cart table.shop_table{width:100%; border-collapse:collapse; margin-bottom:40px;}
.woocommerce-cart table.shop_table th{
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  text-transform:uppercase;
  text-align:left;
  padding:14px 10px;
  border-bottom:1px solid var(--ink);
}
.woocommerce-cart table.shop_table td{padding:20px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.woocommerce-cart table.shop_table img{width:70px; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-sm);}
.woocommerce-cart .product-remove a{color:var(--red); font-size:1.2rem;}
.woocommerce-cart .quantity input{width:56px; padding:10px; border:1px solid var(--ink); border-radius:var(--radius-sm); text-align:center; font-family:'JetBrains Mono',monospace;}

.cart-collaterals .cart_totals{
  border:1.5px solid var(--ink);
  border-radius:var(--radius);
  padding:34px;
  max-width:440px;
  margin-left:auto;
}
.cart_totals h2{font-family:'Bodoni Moda',serif; font-size:1.5rem; margin-bottom:20px;}
.cart_totals table{width:100%;}
.cart_totals table th, .cart_totals table td{padding:12px 0; border-bottom:1px solid var(--line); font-size:0.85rem;}
.cart_totals .order-total .amount{color:var(--red); font-weight:600; font-family:'JetBrains Mono',monospace;}

.wc-proceed-to-checkout .checkout-button,
.woocommerce #respond input#submit,
.woocommerce a.button:not(.add_to_cart_button):not(.single_add_to_cart_button),
.woocommerce button.button:not(.add_to_cart_button):not(.single_add_to_cart_button),
.woocommerce input.button{
  font-family:'JetBrains Mono',monospace;
  font-size:0.74rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:16px 26px;
  background:var(--ink) !important;
  color:var(--bone) !important;
  border:1px solid var(--ink) !important;
  border-radius:var(--radius-sm) !important;
  transition:background .25s ease, color .25s ease;
}
.woocommerce a.button:not(.add_to_cart_button):not(.single_add_to_cart_button):hover,
.woocommerce button.button:not(.add_to_cart_button):not(.single_add_to_cart_button):hover,
.woocommerce input.button:hover{
  background:var(--red) !important; border-color:var(--red) !important;
}

/* ---------- Checkout ---------- */

/* El plugin de PayPal CardFields trae su propio CSS con un layout
   pensado para GeneratePress (columnas 60%/40% con sticky). En este
   tema lo anulamos explícitamente para que el checkout use nuestro
   propio ancho de columna. */
.woocommerce-checkout .woocommerce{display:block !important;}
.woocommerce-checkout .col2-set,
.woocommerce-checkout #order_review{
  width:100% !important;
  position:static !important;
  top:auto !important;
}

.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px;
  margin-bottom:30px;
}
.woocommerce-checkout h3{font-family:'Bodoni Moda',serif; font-weight:500; margin-bottom:24px;}
.woocommerce-checkout .form-row label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; display:block;}
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea{
  border:1px solid var(--ink);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  background:transparent;
  width:100%;
  font-family:'Archivo',sans-serif;
}
#order_review table.shop_table{width:100%;}
#order_review table.shop_table th, #order_review table.shop_table td{padding:10px 0; border-bottom:1px solid var(--line); font-size:0.85rem;}

/* ---------- Mi cuenta ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line);}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:none;}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block; padding:14px 18px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  text-transform:uppercase;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--ink); color:var(--bone);}
.woocommerce-MyAccount-content{padding-top:10px;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  ul.products{grid-template-columns:repeat(2,1fr) !important;}
  .single-product div.product{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  ul.products{grid-template-columns:1fr !important;}
  .cart-collaterals .cart_totals{max-width:100%;}
}