/**
 * Shop page header, shop-specific site header and the sidebar layout.
 *
 * Part of the WooCommerce stylesheet set - enqueued in order by
 * sync_rc_woocommerce_styles() in inc/shop/shop-setup.php. Order matters.
 */

/**
 * WooCommerce Styles - Sync Recommerce
 * Consolidated styles using design-tokens.css
 *
 * @package Sync_Recommerce
 * @version 2.0.0
 */

/* ============================================
   SHOP PAGE HEADER
   ============================================ */

/* Hide on shop archive (title shown differently) */
.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header {
  display: none;
}

/* Show on cart, checkout, account pages */
.woocommerce-cart .woocommerce-products-header,
.woocommerce-checkout .woocommerce-products-header,
.woocommerce-account .woocommerce-products-header {
  background: var(--gradient-primary);
  padding: var(--space-10) 0;
  margin-bottom: var(--space-8);
}

.woocommerce-cart .woocommerce-products-header__title,
.woocommerce-checkout .woocommerce-products-header__title,
.woocommerce-account .woocommerce-products-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
}

/* ============================================
   SHOP-SPECIFIC SITE HEADER
   ============================================ */

/* Search bar styling */
.shop-header .header-search {
  flex: 1;
  max-width: 400px;
  margin: 0;
}

.shop-header .header-search form {
  position: relative;
  display: flex;
  align-items: center;
}

.shop-header .header-search .search-icon-inline {
  position: absolute;
  left: 12px;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  pointer-events: none;
  z-index: 1;
}

.shop-header .header-search .search-field {
  width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-10);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-full);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  color: var(--color-secondary);
  background: var(--bg-secondary);
  transition: all var(--transition-fast);
  height: 40px;
}

.shop-header .header-search .search-field:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.1);
}

.shop-header .header-search .search-submit {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: var(--gradient-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.shop-header .header-search .search-submit:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: var(--shadow-brand);
}

.shop-header .header-search .search-submit i {
  font-size: var(--text-base);
}

/* Hide search on mobile initially */
.shop-header .header-search-mobile {
  display: none;
}

/* Hide "Browse Inventory" button on shop page */
.shop-header .header-btn-shop {
  display: none;
}

/* Adjust navigation for shop header */
.shop-header .main-navigation {
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .shop-header .header-search {
    max-width: 400px;
    margin: 0 var(--space-4);
  }
}

@media (max-width: 768px) {
  /* Hide desktop search */
  .shop-header .header-search {
    display: none;
  }

  /* Show mobile search */
  .shop-header .header-search-mobile {
    display: block;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-color);
  }

  .shop-header .header-search-mobile form {
    position: relative;
    display: flex;
    align-items: center;
  }

  .shop-header .header-search-mobile .search-field {
    width: 100%;
    padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-full);
    font-size: var(--text-sm);
    font-family: var(--font-primary);
    color: var(--color-secondary);
    background: var(--bg-secondary);
  }

  .shop-header .header-search-mobile .search-field:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-primary);
  }

  .shop-header .header-search-mobile .search-submit {
    position: absolute;
    right: var(--space-2);
    background: var(--gradient-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-full);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

/* ============================================
   SHOP LAYOUT WITH SIDEBAR
   ============================================ */

/* Main wrapper for shop page content */
.woocommerce-page-wrapper {
  padding-bottom: var(--space-12);
}

/* Full-width container for shop with padding */
.woocommerce-page-wrapper .container-full {
  max-width: 100%;
  padding: 0 var(--space-8);
  margin: 0 auto;
}

@media (max-width: 768px) {
  .woocommerce-page-wrapper .container-full {
    padding: 0 var(--space-4);
  }
}

/* Layout principal con sidebar */
.shop-layout-with-sidebar {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

/* Sidebar */
.shop-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  height: fit-content;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.sidebar-inner {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
}

/* Widgets de filtros */
.shop-sidebar .widget {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-color);
}

.shop-sidebar .widget:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.shop-sidebar .widget-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

/* Hide duplicate WooCommerce widget titles */
.shop-sidebar .widget .widgettitle {
  display: none;
}

/* Widget inner container spacing */
.shop-sidebar .widget .woocommerce.widget_price_filter,
.shop-sidebar .widget .woocommerce.widget_product_categories,
.shop-sidebar .widget .woocommerce.widget_layered_nav {
  margin-top: 0;
}

/* Empty widget message */
.shop-sidebar .widget-filter:empty::after {
  content: "No hay filtros disponibles";
  display: block;
  padding: var(--space-3);
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  font-style: italic;
  text-align: center;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-md);
}

/* Estilo para listas de categorías y atributos */
.shop-sidebar .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-sidebar .widget ul li {
  margin-bottom: var(--space-2);
  padding-left: 0;
}

.shop-sidebar .widget ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  color: var(--color-gray-700);
  text-decoration: none;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
  font-size: var(--text-sm);
  border: 1px solid transparent;
  font-weight: var(--font-medium);
}

.shop-sidebar .widget ul li a:hover {
  background: var(--bg-secondary);
  color: var(--color-primary);
  border-color: var(--border-color);
  transform: translateX(4px);
}

.shop-sidebar .widget ul li.current-cat > a,
.shop-sidebar .widget ul li.chosen > a {
  background: rgba(0, 153, 204, 0.08);
  color: var(--color-primary);
  font-weight: var(--font-bold);
  border-color: var(--color-primary);
}

/* Contador de productos */
.shop-sidebar .widget ul li .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 var(--space-2);
  background: var(--bg-secondary);
  color: var(--color-gray-600);
  border-radius: var(--border-radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin-left: var(--space-2);
}

/* Slider de precio */
.shop-sidebar .price_slider_wrapper {
  padding: var(--space-2) 0 var(--space-4) 0;
}

.shop-sidebar .price_slider {
  margin-bottom: var(--space-4);
  height: 6px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-full);
  border: none;
}

.shop-sidebar .price_slider .ui-slider-range {
  background: var(--gradient-primary);
  border-radius: var(--border-radius-full);
}

.shop-sidebar .price_slider .ui-slider-handle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-primary);
  cursor: pointer;
  top: -6px;
  outline: none;
  transition: all var(--transition-fast);
}

.shop-sidebar .price_slider .ui-slider-handle:hover,
.shop-sidebar .price_slider .ui-slider-handle:focus {
  transform: scale(1.2);
  box-shadow: 0 0 0 4px rgba(0, 153, 204, 0.1);
}

.shop-sidebar .price_slider_amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  gap: var(--space-3);
}

.shop-sidebar .price_slider_amount .price_label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-secondary);
  flex: 1;
}

.shop-sidebar .price_slider_amount .price_label .from,
.shop-sidebar .price_slider_amount .price_label .to {
  color: var(--color-primary);
  font-weight: var(--font-extrabold);
}

.shop-sidebar .price_slider_amount .button {
  background: var(--gradient-primary);
  color: var(--color-white);
  border: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--border-radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

.shop-sidebar .price_slider_amount .button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}

/* Botón para limpiar filtros */
.shop-sidebar .woocommerce-widget-layered-nav-list__item--chosen a::before {
  content: "✕ ";
  margin-right: var(--space-1);
  font-weight: bold;
}

/* Área principal de contenido */
.shop-main-content {
  min-width: 0;
}

/* Search Results Header */
.search-results-header {
  background: var(--bg-secondary);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--border-radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

.search-results-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-secondary);
  margin: 0;
  line-height: 1.4;
}

.search-results-title .search-term {
  color: var(--color-primary);
  font-weight: var(--font-bold);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .shop-layout-with-sidebar {
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
  }

  .shop-sidebar {
    top: 70px;
  }

  /* En tablets, usar 3 columnas de productos */
  .shop-main-content .woocommerce ul.products,
  .shop-main-content ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .shop-layout-with-sidebar {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .shop-sidebar {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: var(--space-6);
  }

  .sidebar-inner {
    padding: var(--space-4);
  }

  .shop-sidebar .widget {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .shop-sidebar .widget-title {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
  }
}

/* Toggle para sidebar en móvil (opcional para futuro) */
.sidebar-toggle {
  display: none;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-md);
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  cursor: pointer;
  width: 100%;
  text-align: center;
}

@media (max-width: 768px) {
  .sidebar-toggle {
    display: block;
  }

  .shop-sidebar.collapsed {
    display: none;
  }
}


/* ==========================================================================
   Buyer's own price
   --------------------------------------------------------------------------
   Shown to a client who has their own profit percentage configured. The
   published price stays visible and struck through: the point of the badge is
   that the client sees they are getting something, so hiding what everyone
   else pays would remove the only reference that makes it mean anything.

   One component for both the card and the product page — the sizes come from
   whatever the surrounding price container sets, so this only owns layout and
   the badge.
   ========================================================================== */

.sync-buyer-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
}

.sync-buyer-price__list {
  text-decoration: line-through;
  color: var(--color-gray-500);
  font-size: 0.8em;
  font-weight: var(--font-normal);
  opacity: 0.75;
}

/* <ins> is underlined by browsers and by WooCommerce; this is the main price,
   not an insertion. */
.sync-buyer-price__yours,
.sync-buyer-price__yours .amount {
  text-decoration: none;
  background: transparent;
  color: inherit;
  font-weight: inherit;
}

.sync-buyer-price__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.sync-buyer-price__badge i {
  font-size: 10px;
}

.sync-buyer-price__off {
  padding-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}