/* ========================================
   BREADCRUMB
   ======================================== */

.breadcrumb {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 40px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-link {
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 2px;
}

.breadcrumb-link:hover {
  color: #43BDAB;
}

.breadcrumb-link:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #43BDAB;
}

.breadcrumb-separator {
  color: #ccc;
  margin: 0 4px;
  user-select: none;
}

.breadcrumb-current {
  color: #000;
  font-weight: 600;
}

/* ========================================
   SUBCATEGORY FILTERS (COSMETICS)
   ======================================== */

.subcategory-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: -20px auto 40px;
  padding-top: 8px;
  flex-wrap: wrap;
  max-width: 800px;
  /* allow hover transforms to extend beyond container without being clipped */
  overflow: visible;
  position: relative;
  z-index: 999;
}

/* Rows used by cartridges filter layout */
.filter-row {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow: visible;
}
.filter-row-main {
  margin-bottom: 8px;
}
.filter-row-types {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.subcategory-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border: 2px solid #ddd;
  background: white;
  color: #666;
  border-radius: 30px;
  cursor: pointer;
  /* avoid transitioning color to prevent brief invisible text on mobile
     (transition only background/border/transform/box-shadow) */
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative; /* enable z-index layering */
  z-index: 1;
}

/* Normalize focus/active visuals to avoid persistent browser highlight on mobile
   Keep the 'active' class styling as the visual selection, but remove default
   focus outlines and tap highlights which appear as blue fills on some devices. */
.subcategory-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.subcategory-btn:focus,
.subcategory-btn:active,
.subcategory-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.subcategory-btn::-moz-focus-inner { border: 0; padding: 0; }

.subcategory-btn:hover {
  border-color: #43BDAB;
  color: #43BDAB;
  transform: translateY(-2px);
  z-index: 3000; /* raise above fixed header to avoid clipping */
}

.subcategory-btn.active {
  background: #43BDAB;
  border-color: #43BDAB;
  color: white;
}

/* Ensure active buttons remain readable when focused (mobile UA can apply strange highlights) */
.subcategory-btn.active:focus,
.subcategory-btn.active:focus-visible,
.subcategory-btn.active:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hover específico para filtros de cartridges - sem translateY */
.cartridges-filters .subcategory-btn:hover {
  border-color: #43BDAB;
  color: #43BDAB;
  transform: none; /* remove o movimento */
  box-shadow: 0 0 0 3px rgba(67, 189, 171, 0.15); /* glow suave */
}

.cartridges-filters .subcategory-btn.active:hover {
  box-shadow: 0 0 0 3px rgba(67, 189, 171, 0.25); /* glow mais forte para ativo */
}

@media (max-width: 768px) {
  .subcategory-filters {
    gap: 8px;
    padding: 0 20px;
  }
  
  .subcategory-btn {
    font-size: 12px;
    padding: 10px 18px;
    /* slightly smaller lift on mobile to reduce overlap */
    transition: transform 0.2s ease;
  }
  .subcategory-btn:hover {
    transform: translateY(-1px);
  }
}

/* ========================================
   CATEGORY PAGE
   ======================================== */

.category-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px;
}

.category-header {
  text-align: center;
  margin-bottom: 60px;
}

/* Category notice inserted above product count */
.category-notice {
  background: linear-gradient(90deg, rgba(67,189,171,0.06), rgba(67,189,171,0.02));
  border: 1px solid rgba(67,189,171,0.12);
  color: #0b6b5f;
  padding: 14px 20px;
  border-radius: 10px;
  max-width: 1000px;
  margin: 18px auto 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
}
.category-notice .notice-title {
  display: block;
  font-weight: 800;
  color: #003f36;
  margin-bottom: 8px;
  font-size: 15px;
}
.category-notice .notice-text {
  margin: 0;
  color: #064f44;
}
.category-notice a {
  color: #006b5f;
  text-decoration: underline;
  font-weight: 700;
}

/* highlight specific ink names inside notice */
.category-notice .notice-text strong {
  background: rgba(0,0,0,0.03);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 900;
  color: #002b20;
}

.category-header h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: #000;
  margin-bottom: 12px;
}

.category-header p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  color: #666;
  margin-bottom: 16px;
}

.product-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ========================================
   PRODUCTS GRID
   ======================================== */

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
  color: #999;
}

/* ========================================
   PRODUCT CARD
   ======================================== */

.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.product-card:hover {
  border-color: #43BDAB;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.product-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  transition: transform 0.3s ease;
}

.product-card:hover img {
  transform: scale(1.05);
}

.product-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-category {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #43BDAB;
}

/* Base badge style */
/* Base badge style - ALWAYS VISIBLE */
.product-availability-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* ORDER ON REQUEST - Dark teal/gray-green */
/* ORDER ON REQUEST - Dark teal/gray-green */
.badge-order-request {
  background-color: #2E4A51;
  color: white;
}

/* COMING SOON - Orange */
.badge-coming-soon {
  background-color: #FFA300;
  color: white;
}

/* OUT OF STOCK - Dark red */
.badge-out-of-stock {
  background-color: #AA0000;
  color: white;
}

.product-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin: 0;
  line-height: 1.3;
}

.product-price {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #000;
  margin-top: auto;
}

.product-view-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #43BDAB;
  margin-top: 8px;
  transition: color 0.3s ease;
}

.product-card:hover .product-view-btn {
  color: #2da893;
}

/* ========================================
   EMPTY STATE
   ======================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  text-align: center;
}

.empty-state h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 12px;
}

.empty-state p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background: #000;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: #43BDAB;
  color: #000;
  transform: translateY(-2px);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

@media (max-width: 900px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  .category-header h1 {
    font-size: 32px;
  }
}

@media (max-width: 640px) {
  .category-page {
    padding: 20px 16px;
  }
  
  .breadcrumb {
    padding: 16px 16px;
  }
  
  .category-header {
    margin-bottom: 32px;
  }
  
  .category-header h1 {
    font-size: 26px;
  }
  
  .category-header p {
    font-size: 14px;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Ensure cartridge filters are stacked and centered on mobile */
  .subcategory-filters.cartridges-filters {
    flex-direction: column;
    gap: 6px;
    padding: 0 6px;
  }
  .filter-row-types {
    gap: 10px;
    justify-content: center;
  }
  /* Mobile: reduce availability badge size so it doesn't cover product content */
  .product-availability-badge {
    padding: 4px 8px;
    font-size: 0.65rem;
    top: 8px;
    right: 8px;
    border-radius: 6px;
  }
  /* Specifically tighten 'Order on Request' badge on narrow screens */
  .product-availability-badge.badge-order-request {
    padding: 3px 6px;
    font-size: 0.62rem;
    top: 6px;
    right: 6px;
  }
}


/* ============================================
   PROMOTIONAL PRICING - Visual Marketing Only
   ============================================ */

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
  color: white;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 3px 8px rgba(255, 107, 53, 0.3);
}

.price-display-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.price-was {
  color: #999;
  text-decoration: line-through;
  font-size: 0.85rem;
  font-weight: 400;
}

.price-now {
  color: #43BDAB;
  font-size: 1.1rem;
  font-weight: 700;
}

.price-savings {
  color: #FF6B35;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0.25rem 0 0 0;
}

@media (max-width: 768px) {
  .price-display-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}


/* Ultra Pen specific visuals (targets only Ultra Pen card by href) */
a.product-card[href*="ultra-pen-2-combo"] {
  position: relative;
}

a.product-card[href*="ultra-pen-2-combo"]::before {
  content: "SPECIAL OFFER";
  position: absolute;
  /* move below any availability badge (e.g. 'Order on Request') to avoid overlap */
  top: 56px; /* increased spacing for breathing room */
  right: 12px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(255,107,53,0.25);
}

/* Responsive: bring special offer closer on smaller screens where badges are smaller */
@media (max-width: 768px) {
  a.product-card[href*="ultra-pen-2-combo"]::before {
    top: 48px; /* more vertical space on tablet */
    right: 10px;
    padding: 5px 10px;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  a.product-card[href*="ultra-pen-2-combo"]::before {
    top: 44px; /* more vertical space on small screens */
    right: 8px;
    padding: 4px 8px;
    font-size: 0.65rem;
  }
}

/* Prepend was-price and append savings under the rendered price for Ultra Pen */
a.product-card[href*="ultra-pen-2-combo"] .product-price::before {
  content: "€1034.80";
  color: #999;
  text-decoration: line-through;
  margin-right: 0.5rem;
  font-size: 0.85rem;
  display: inline-block;
  vertical-align: middle;
}

a.product-card[href*="ultra-pen-2-combo"] .product-price {
  color: #43BDAB;
  font-weight: 800;
}

a.product-card[href*="ultra-pen-2-combo"] .product-price::after {
  content: " Save €184.80";
  display: block;
  color: #FF6B35;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}