/**
 * Fullwidth Store (Order Form Template) - Estilos especificos de este flujo de compra.
 * Complementa (no reemplaza) el design system del Fullwidth Client Theme.
 */

#order-fullwidth { max-width: var(--fw-container-max); margin: 0 auto; padding: var(--fw-space-6) var(--fw-content-padding) var(--fw-space-12); }

.fw-store-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--fw-space-8); align-items: start; }

.fw-store-sidebar { position: sticky; top: var(--fw-space-6); display: flex; flex-direction: column; gap: var(--fw-space-1); }
.fw-store-sidebar-title { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fw-text-muted); font-weight: var(--fw-fw-semibold); padding: var(--fw-space-2) var(--fw-space-3); }
.fw-store-nav-item {
  display: block; padding: 0.6rem var(--fw-space-3); border-radius: var(--fw-radius-md);
  font-size: var(--fw-fs-sm); color: var(--fw-text-secondary); font-weight: var(--fw-fw-medium);
  transition: var(--fw-transition);
}
.fw-store-nav-item:hover { background: var(--fw-surface-alt); color: var(--fw-text-primary); }
.fw-store-nav-item.active { background: var(--fw-primary-50); color: var(--fw-primary-700); font-weight: var(--fw-fw-semibold); }

.fw-store-header { margin-bottom: var(--fw-space-6); }
.fw-store-header h1 { font-size: var(--fw-fs-3xl); margin-bottom: var(--fw-space-2); }
.fw-store-header p { color: var(--fw-text-muted); }

.fw-store-mobile-categories { display: none; margin-bottom: var(--fw-space-5); }

/* Sub-encabezados de seccion (checkout / configureproduct) */
.fw-sub-heading {
  font-size: var(--fw-fs-xs); font-weight: var(--fw-fw-semibold); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fw-text-muted); margin: var(--fw-space-6) 0 var(--fw-space-3); padding-bottom: var(--fw-space-2);
  border-bottom: 1px solid var(--fw-border);
}
.fw-sub-heading:first-child { margin-top: 0; }

/* Grilla de productos */
.fw-store-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--fw-space-5); }
.fw-store-product { display: flex; flex-direction: column; background: var(--fw-surface); border: 1px solid var(--fw-border); border-radius: var(--fw-radius-lg); box-shadow: var(--fw-shadow-sm); padding: var(--fw-space-6); transition: var(--fw-transition); }
.fw-store-product:hover { box-shadow: var(--fw-shadow-md); transform: translateY(-2px); }
.fw-store-product-name { font-size: var(--fw-fs-lg); font-weight: var(--fw-fw-semibold); margin-bottom: var(--fw-space-1); }
.fw-store-product-qty { font-size: var(--fw-fs-xs); color: var(--fw-text-muted); }
.fw-store-product-desc { color: var(--fw-text-secondary); font-size: var(--fw-fs-sm); margin: var(--fw-space-3) 0; }
.fw-store-product-features { list-style: none; padding: 0; margin: 0 0 var(--fw-space-4); display: flex; flex-direction: column; gap: var(--fw-space-2); }
.fw-store-product-features li { font-size: var(--fw-fs-sm); color: var(--fw-text-secondary); display: flex; gap: var(--fw-space-2); }
.fw-store-product-features .feature-value { font-weight: var(--fw-fw-semibold); color: var(--fw-text-primary); }
.fw-store-product-footer { margin-top: auto; padding-top: var(--fw-space-4); border-top: 1px solid var(--fw-border); display: flex; align-items: center; justify-content: space-between; gap: var(--fw-space-3); }
.fw-store-product-price { font-size: var(--fw-fs-xl); font-weight: var(--fw-fw-bold); color: var(--fw-text-primary); line-height: 1.2; }
.fw-store-product-price small { display: block; font-size: var(--fw-fs-xs); font-weight: var(--fw-fw-regular); color: var(--fw-text-muted); }

/* Carrito */
.fw-cart-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fw-space-4); padding: var(--fw-space-4) 0; border-bottom: 1px solid var(--fw-border); }
.fw-cart-item:last-child { border-bottom: none; }
.fw-cart-item-title { font-weight: var(--fw-fw-semibold); }
.fw-cart-item-group, .fw-cart-item-domain { display: block; font-size: var(--fw-fs-xs); color: var(--fw-text-muted); }
.fw-cart-item-options { font-size: var(--fw-fs-xs); color: var(--fw-text-secondary); margin-top: var(--fw-space-1); }
.fw-cart-item-price { text-align: right; white-space: nowrap; font-size: var(--fw-fs-sm); }
.fw-cart-item-price .cycle { display: block; font-size: var(--fw-fs-xs); color: var(--fw-text-muted); }
.fw-cart-item-actions { display: flex; gap: var(--fw-space-2); margin-top: var(--fw-space-2); }

/* Addons dentro de configureproduct */
.fw-addon-card { position: relative; height: 100%; }
.fw-addon-card.selected { border-color: var(--fw-primary); background: var(--fw-primary-50); }
.fw-addon-price { font-weight: var(--fw-fw-semibold); margin: var(--fw-space-2) 0; }

@media (max-width: 991px) {
  /* minmax(0, 1fr) en vez de 1fr: evita que la fila de chips (nowrap) fuerce el ancho
     de toda la columna/grilla mas alla del viewport (bug clasico de "grid blowout"). */
  .fw-store-layout { grid-template-columns: minmax(0, 1fr); }
  .fw-store-layout > div { min-width: 0; }
  .fw-store-sidebar { display: none; }
  .fw-store-mobile-categories { display: flex; max-width: 100%; }
}

@media (max-width: 767px) {
  #order-fullwidth { padding: var(--fw-space-4); max-width: 100%; overflow-x: hidden; }
  .fw-store-header h1 { font-size: var(--fw-fs-xl); }
  .fw-store-products { grid-template-columns: minmax(0, 1fr); gap: var(--fw-space-4); }
  .fw-store-mobile-categories { gap: var(--fw-space-2); }
  .fw-market-filter { font-size: var(--fw-fs-xs); padding: 0.4rem 0.85rem; }
}