/* ============================================================
   OGCLEAN · PÁGINAS DE WORDPRESS
   Pago (WooCommerce clásico), pedido recibido, mi cuenta y 404 con la marca: mismos
   tokens, letra Archivo/JetBrains Mono, esquinas rectas y botones del sitio.
   WooCommerce aporta solo su estructura (woocommerce-layout); los colores y formas son estos.
   ============================================================ */

.wp-contenido { padding-block: clamp(6.5rem, 12vw, 9rem) clamp(4rem, 8vw, 6rem); }

/* En el pago la barra fija de abajo («Tienda / Ver carrito») tapa los campos al escribir */
.woocommerce-checkout .mobile-bar,
.woocommerce-account .mobile-bar,
.woocommerce-order-received .mobile-bar { display: none; }
.wp-contenido .section-head { max-width: none; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.wp-contenido .h1 { font-size: clamp(2.3rem, 7vw, 4.6rem); }
.wp-contenido__cuerpo { color: var(--fg); }
.wp-contenido__cuerpo a:not(.btn):not(.button) { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Avisos ---------------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-error {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-size: 0.95rem;
  line-height: 1.5;
}
.woocommerce-message { border-left-color: #1FB855; }
.woocommerce-error li + li { margin-top: 0.35rem; }
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { content: none; }
.woocommerce-info a, .woocommerce-message a { font-weight: 600; }

/* ---------------- Formulario de pago ---------------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { border-left-color: var(--line-strong); }

form.woocommerce-checkout .col2-set .col-1,
form.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
form.woocommerce-checkout .col2-set::after { content: none; }

@media (min-width: 960px) {
  form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(2.4rem, 5vw, 5rem);
    align-items: start;
  }
  form.woocommerce-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
  form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 2 / span 3; }
  form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 2; margin-top: 0; }
  form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 3; position: sticky; top: 6.5rem; }
}

.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3,
.woocommerce-shipping-fields > h3,
#order_review_heading,
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: var(--fs-h3);
  line-height: 1.02;
  margin: 0 0 1.2rem;
}
.woocommerce-additional-fields { margin-top: 1.6rem; }

.woocommerce form .form-row { margin: 0 0 1rem; padding: 0; }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}
.woocommerce form .form-row .required { color: var(--red); text-decoration: none; border: 0; }
.woocommerce form .form-row .optional { text-transform: none; letter-spacing: 0; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 1rem; /* 16 px: sin zoom automático en iPhone */
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--dur-fast);
}
.woocommerce form .form-row textarea { min-height: 6.5rem; resize: vertical; }
.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce .select2-container .select2-selection--single:hover { border-color: var(--fg); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .select2-container--focus .select2-selection--single,
.woocommerce .select2-container--open .select2-selection--single {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--fg);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid .select2-selection { border-color: var(--red); }

/* Select de departamento (select2) */
.woocommerce .select2-container .select2-selection--single { display: flex; align-items: center; padding-block: 0; }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--fg); }
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; right: 0.6rem; }
.select2-dropdown { border: 1px solid var(--fg); border-radius: var(--radius); background: var(--surface); font-family: var(--font-body); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--ink); color: var(--bone); }
.select2-search--dropdown .select2-search__field { padding: 0.55rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 1rem; }

/* País fijo (solo Colombia): WooCommerce lo muestra como texto */
.woocommerce form .form-row#billing_country_field strong { font-weight: 600; }

/* ---------------- Resumen del pedido ---------------- */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  border-radius: 0;
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  background: none;
}
.woocommerce table.shop_table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  border-bottom-color: var(--line-strong);
}
.woocommerce table.shop_table .product-total,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table td:last-child:not(:first-child) { text-align: right; padding-left: 1rem; white-space: nowrap; }
.woocommerce table.shop_table .product-name { font-weight: 600; line-height: 1.35; }
.woocommerce table.shop_table .product-quantity { color: var(--muted); font-weight: 500; }
.woocommerce table.shop_table tfoot th { font-weight: 500; color: var(--muted); }
.woocommerce table.shop_table tr.order-total th,
.woocommerce table.shop_table tr.order-total td {
  border-bottom: 0;
  padding-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--fg);
}
/* Talla de cada línea */
.woocommerce table.shop_table dl.variation,
.woocommerce .wc-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}
.woocommerce table.shop_table dl.variation dt,
.woocommerce table.shop_table dl.variation dd,
.woocommerce .wc-item-meta li,
.woocommerce .wc-item-meta p { margin: 0; padding: 0; float: none; display: inline; }
.woocommerce .wc-item-meta .wc-item-meta-label { font-weight: 500; float: none; }

/* Métodos de envío */
.woocommerce ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; }
.woocommerce ul#shipping_method li { margin: 0 0 0.3rem; }

/* ---------------- Pago ---------------- */
.woocommerce-checkout #payment {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods li { padding: 0.35rem 0; line-height: 1.5; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; cursor: pointer; }
.woocommerce-checkout #payment ul.payment_methods li img { display: inline-block; max-height: 1.6rem; vertical-align: middle; margin-left: 0.4rem; }
.woocommerce-checkout #payment div.payment_box {
  margin: 0.6rem 0 0.2rem;
  padding: 0.8rem 1rem;
  background: var(--bone);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9rem;
}
.woocommerce-checkout #payment div.payment_box::before { content: none; }
.woocommerce-checkout #payment div.form-row.place-order { margin: 0; padding: 1.1rem 1.2rem 1.3rem; }
.woocommerce-terms-and-conditions-wrapper { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p { margin: 0 0 0.8rem; }
.woocommerce-terms-and-conditions-wrapper a { color: var(--fg); text-decoration: underline; }
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}
.woocommerce-form__label-for-checkbox input { margin-top: 0.2rem; accent-color: var(--red); }

/* Botones de WooCommerce con la forma de los del sitio */
.woocommerce #payment #place_order,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.woocommerce #payment #place_order {
  width: 100%;
  margin-top: 1rem;
  padding: 1.2rem 2rem;
  font-size: 0.86rem;
  background: var(--red);
  color: #fff;
}
.woocommerce #payment #place_order:hover { background: var(--ink); }
.woocommerce button.button:hover, .woocommerce a.button:hover { background: var(--red); color: #fff; }
.woocommerce #payment #place_order:active, .woocommerce .button:active { transform: scale(0.98); }
.woocommerce .blockUI.blockOverlay { background: color-mix(in srgb, var(--bone) 70%, transparent) !important; }

/* ---------------- Pedido recibido ---------------- */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-notice--success {
  margin: 0 0 1.6rem;
  font-size: clamp(1.15rem, 1.6vw + 0.7rem, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
}
ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}
ul.woocommerce-order-overview li {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 0;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
}
ul.woocommerce-order-overview li strong {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  word-break: break-word;
}
.woocommerce-order-details, .woocommerce-customer-details { margin-bottom: 2.4rem; }
.woocommerce-customer-details address {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-style: normal;
  line-height: 1.7;
  background: var(--surface);
}
.woocommerce-customer-details address p { margin: 0; }

/* ---------------- Mi cuenta ---------------- */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.woocommerce-MyAccount-navigation a { display: inline-block; padding: 0.55rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { float: none; width: 100%; }

/* ---------------- Página de producto (/producto/…) ---------------- */
.producto { padding-block: clamp(6.5rem, 12vw, 8.5rem) clamp(3rem, 7vw, 5rem); }
.producto .migas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  color: var(--muted);
  font-size: var(--fs-micro);
  margin-bottom: clamp(1rem, 3vw, 1.6rem);
}
.producto .migas a:hover { color: var(--fg); }
.producto .migas [aria-current] { color: var(--fg); }
.producto .quick__grid { padding-top: 0; }
@media (min-width: 860px) {
  .producto .quick__media { top: 6rem; }
}
.producto__agotado {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 600;
}