/**
 * Snippet 02 — Layout Principal de Producto

 *
 * PROPÓSITO:
 * Define la estructura visual de cada tarjeta/sección de producto
 * en la página de listado. Incluye imagen, nombre, descripción
 * y la jerarquía de secciones por categoría.
 *
 * DEPENDENCIAS: 00-variables.css
 * AFECTA: .product_info_container, .product_image, .product_info,
 *         .main-category-section, .subcategory-section
 *
 * RESTRICCIÓN FUNCIONAL:
 * No modificar el orden de .attribute-group.attribute-peso (order: 1)
 * ni .product-actions (order: 4) sin validar el flujo de compra en móvil.
 */

.sj-inline-card {
  position: relative;
  isolation: isolate;
}

.sj-inline-card::before {
  content: '';
  position: absolute;
  inset: 0;

  background-image: var(--asset-bg-pattern);
  background-repeat: no-repeat;
  /* Esquina superior izquierda */
  background-position: top right;
  /* Tamaño */
  background-size: 580px;
  margin-top: -90px;
  z-index: 10;
  pointer-events: none;
}

/* Contenedor principal — imagen + info en fila invertida */
.all-product-categories {
  display: flex;
  gap: 0;
  flex-direction: column;
  overflow: hidden;
}

.product_info_container {
  display: flex;
  flex-direction: row-reverse;
  text-transform: uppercase;
  gap: var(--spacing-md);
}

.product_info_container > div {
  flex: 1;
}

/* Imagen del producto */
.product_image {
  text-align: center;
  position: relative;
}

.product_image img {
  width: 100%;
  max-width: 80%;
  border-radius: var(--radius-circle);
}

/* Columna de información */
.product_info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Nombre del producto en heading */
.product_info h2 {
  font-size: 70px;
  line-height: 100%;
  color: var(--color-white);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.79);
  margin: 0 0 20px 0;
}

/* Subcategoría — efecto tipográfico outline */
h3.subcategory-name {
  -webkit-text-stroke-width: 1px;
  stroke-width: 1px;
  -webkit-text-stroke-color: var(--color-white);
  filter: drop-shadow(0px 0 0px rgba(0, 0, 0, 0.2))
    drop-shadow(2px 0 0px rgba(0, 0, 0, 0.2))
    drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2))
    drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.3));
  color: transparent;
}

/* Ocultar categoría en listado (se muestra en popup) */
p.product-category {
  display: none;
}

/* Descripción corta del producto */
p.product-description {
  font-size: 14px;
  padding-top: var(--spacing-md);
}

p.head_detail {
  font-size: 0.8em;
  font-weight: 500;
}

/* Sección de imagen lateral (side view) */
.product_image_side {
  position: relative;
}

/* Link "ver detalle" sobre imagen */
a.view-detail {
  position: absolute;
  bottom: -50px;
  left: 45%;
}

/* Imagen de encabezado — visible solo en tablet/móvil (ver responsive) */
.heading_product_image {
  display: none;
}

/* Separación entre secciones de categoría */
.main-category-section:not(:first-child) {
  margin-top: var(--spacing-xl);
  display: block;
}

.main-category-section .subcategory-section:not(:first-child) {
  margin-top: 48px;
}

/* Contenedor de categorías en popup */
.categories-info {
  flex-grow: 1;
}

/* Tag de encabezado con método de cultivo */
.tag_heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.tag_heading span.growing-method {
  padding: 2px var(--spacing-sm);
  background-color: var(--color-tag-variety);
  color: var(--color-black);
  border-radius: var(--radius-lg);
}

/* Contenedor de tabs de producto */
.product-tabs-container h3 {
  font-size: 50px;
  margin: var(--spacing-md) 0;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-white);
  letter-spacing: 1.5px;
  filter: drop-shadow(0px 0 0px rgba(0, 0, 0, 0.2))
    drop-shadow(2px 0 0px rgba(0, 0, 0, 0.2))
    drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2))
    drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.3));
}

/* Utilidades de layout */
.flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  align-items: center;
}

/* Barra de progreso (características del producto) */
.progress-container {
  width: 100%;
  background-color: var(--color-gray-mid);
  height: 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.progress-container .progress-bar.black {
  background-color: var(--color-black);
  position: absolute;
  height: 100%;
}

.category-item span {
  font-weight: 800;
  color: var(--color-text-default);
}

/* Contenedor general del producto en tarjeta */
.product-container {
  padding: 10px 20px 50px 20px;
}

/* Wrapper de precio + atributo */
.attribute-price-wrapper {
  display: flex;
  align-items: center;
}

/* Ocultar campo número nativo (reemplazado por botones custom) */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Capa de fondo negro en popup (efecto visual) */
#genetic-black-bar {
  background: var(--color-black);
  width: 104%;
  height: 100px;
  position: absolute;
  border-radius: var(--radius-sm);
  top: 1px;
  right: -2%;
  z-index: -1;
}

/* Contenedor de fondo de popup (backdrop) */
.clr-fff {
  background-color: var(--color-white);
  padding: 15px;
  border-radius: 12px;
}