/**
 * heleneriu.fr - Components
 * BEM Architecture - Artisan Luxury Theme
 * 
 * Architecture: ITCSS Layer 5 - Components
 */

/* ══════════════════════════════════════════
   BUTTON COMPONENT
   ══════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border-width-medium) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.btn:hover::before {
  opacity: 0.08;
}

.btn:active {
  transform: translateY(1px);
}

/* Primary Button */
.btn--primary,
.btn-primary {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
  border-color: var(--color-primary-500);
}

.btn--primary:hover,
.btn-primary:hover {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  box-shadow: var(--shadow-primary);
  transform: translateY(-1px);
}

/* Secondary Button */
.btn--secondary {
  background-color: transparent;
  color: var(--color-primary-600);
  border-color: var(--color-primary-400);
}

.btn--secondary:hover {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-500);
}

/* Ghost Button */
.btn--ghost {
  background-color: transparent;
  color: var(--color-neutral-700);
  border-color: transparent;
}

.btn--ghost:hover {
  color: var(--color-primary-600);
  background-color: var(--color-neutral-100);
}

/* Accent Button (CTA) */
.btn--accent {
  background-color: var(--color-accent-500);
  color: var(--color-neutral-0);
  border-color: var(--color-accent-500);
}

.btn--accent:hover {
  background-color: var(--color-accent-600);
  border-color: var(--color-accent-600);
  box-shadow: var(--shadow-accent);
}

/* Size Variants */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* ══════════════════════════════════════════
   CARD COMPONENT
   ══════════════════════════════════════════ */

.card {
  background-color: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

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

.card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background-color: var(--color-accent-500);
  color: var(--color-neutral-0);
  border-radius: var(--radius-sm);
}

.card__content {
  padding: var(--space-5);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-3);
}

.card__price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-600);
}

.card__price--old {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--color-neutral-400);
  text-decoration: line-through;
  margin-right: var(--space-2);
}

/* ══════════════════════════════════════════
   PRODUCT CARD (PrestaShop specific)
   ══════════════════════════════════════════ */

.product-miniature {
  background: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
}

.product-miniature:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.product-miniature .thumbnail-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.product-miniature .product-thumbnail {
  display: block;
  width: 100%;
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-miniature:hover .product-thumbnail {
  transform: scale(1.08);
}

.product-miniature .product-description {
  padding: var(--space-4);
}

.product-miniature .product-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.product-miniature .product-title a {
  color: var(--color-neutral-900);
}

.product-miniature .product-title a:hover {
  color: var(--color-primary-600);
}

.product-miniature .product-price-and-shipping {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.product-miniature .price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-primary-600);
}

.product-miniature .regular-price {
  font-size: var(--text-sm);
  color: var(--color-neutral-400);
  text-decoration: line-through;
}

/* Quick Actions */
.product-miniature .product-actions {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(var(--space-3));
  transition: all var(--duration-normal) var(--ease-out);
}

.product-miniature:hover .product-actions {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════
   NAVIGATION COMPONENT
   ══════════════════════════════════════════ */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__item {
  list-style: none;
}

.nav__link {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}

.nav__link:hover {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
}

.nav__link--active {
  color: var(--color-primary-600);
}

.nav__link--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-4);
  right: var(--space-4);
  height: 2px;
  background-color: var(--color-primary-500);
  border-radius: var(--radius-full);
}

/* ══════════════════════════════════════════
   INPUT COMPONENT
   ══════════════════════════════════════════ */

.input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-0);
  border: var(--border-width-thin) solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.input:hover {
  border-color: var(--color-neutral-400);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.input--error {
  border-color: var(--color-error);
}

.input--error:focus {
  box-shadow: 0 0 0 3px var(--color-error-light);
}

/* Input Group */
.input-group {
  margin-bottom: var(--space-5);
}

.input-group__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-2);
}

.input-group__hint {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-top: var(--space-1);
}

.input-group__error {
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* ══════════════════════════════════════════
   BADGE COMPONENT
   ══════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
}

.badge--primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

.badge--accent {
  background-color: var(--color-accent-100);
  color: var(--color-accent-700);
}

.badge--success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.badge--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.badge--error {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

/* ══════════════════════════════════════════
   TAG / LABEL COMPONENT
   ══════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.tag:hover {
  background-color: var(--color-neutral-200);
}

.tag--clickable {
  cursor: pointer;
}

/* ══════════════════════════════════════════
   BREADCRUMB COMPONENT
   ══════════════════════════════════════════ */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

.breadcrumb__item:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  color: var(--color-neutral-300);
}

.breadcrumb__link {
  color: var(--color-neutral-600);
}

.breadcrumb__link:hover {
  color: var(--color-primary-600);
}

.breadcrumb__item--active {
  color: var(--color-neutral-900);
  font-weight: var(--font-medium);
}

/* ══════════════════════════════════════════
   ALERT COMPONENT
   ══════════════════════════════════════════ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: var(--border-width-thick) solid;
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.alert__content {
  flex: 1;
}

.alert__title {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.alert__message {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.alert--success {
  background-color: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert--warning {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.alert--error {
  background-color: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error);
}

.alert--info {
  background-color: var(--color-info-light);
  border-color: var(--color-info);
  color: var(--color-info);
}

/* ══════════════════════════════════════════
   QUANTITY SELECTOR (PrestaShop)
   ══════════════════════════════════════════ */

.qty-selector {
  display: inline-flex;
  align-items: stretch;
  border: var(--border-width-thin) solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qty-selector__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background: var(--color-neutral-100);
  border: none;
  cursor: pointer;
  color: var(--color-neutral-600);
  transition: all var(--duration-fast) var(--ease-out);
}

.qty-selector__btn:hover {
  background: var(--color-neutral-200);
  color: var(--color-primary-600);
}

.qty-selector__input {
  width: 60px;
  text-align: center;
  border: none;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

.qty-selector__input:focus {
  outline: none;
}

/* ══════════════════════════════════════════
   PRESTASHOP NATIVE BUTTON OVERRIDES
   ══════════════════════════════════════════ */

/* Global btn-primary (PrestaShop) */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary {
  background-color: #8b7355 !important;
  border-color: #8b7355 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background-color: #7a6448 !important;
  border-color: #7a6448 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(139,115,85,0.35) !important;
}

/* Secondary / outline */
.btn-secondary,
.btn-outline-primary,
button.btn-secondary {
  background-color: transparent !important;
  border-color: #8b7355 !important;
  color: #8b7355 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background-color: #8b7355 !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════
   FORM INPUTS — GLOBAL POLISH
   ══════════════════════════════════════════ */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  border-radius: 8px !important;
  border: 1.5px solid #d8d0c8 !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: #2d2418 !important;
  background-color: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover {
  border-color: #b0a090 !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #8b7355 !important;
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.15) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #b0a090 !important;
  font-weight: 400 !important;
}

/* Labels */
label,
.form-group label,
.form-group .label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a3c2e !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ══════════════════════════════════════════
   TYPOGRAPHY HIERARCHY
   ══════════════════════════════════════════ */

h1, .h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: #2d2418 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

h2, .h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.75rem) !important;
  font-weight: 700 !important;
  color: #2d2418 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

h3, .h3 {
  font-size: clamp(1rem, 2vw, 1.35rem) !important;
  font-weight: 600 !important;
  color: #2d2418 !important;
  line-height: 1.4 !important;
}

/* Page titles */
.page-header h1,
.page-heading,
section.block > h2 {
  margin-bottom: 1rem !important;
}

/* ══════════════════════════════════════════
   GLOBAL LINK STYLE
   ══════════════════════════════════════════ */

a {
  color: #8b7355;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #7a6448;
}

/* ══════════════════════════════════════════
   ALERTS / NOTIFICATIONS
   ══════════════════════════════════════════ */

.alert-success {
  background-color: #f0f9f4 !important;
  border-color: #6ab08a !important;
  color: #2d6048 !important;
  border-radius: 8px !important;
}

.alert-warning {
  background-color: #fffbf0 !important;
  border-color: #c8a040 !important;
  color: #6b5020 !important;
  border-radius: 8px !important;
}

.alert-danger {
  background-color: #fff5f5 !important;
  border-color: #dc3545 !important;
  color: #b02030 !important;
  border-radius: 8px !important;
}

/* ══════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════ */

.pagination .page-item .page-link {
  color: #8b7355 !important;
  border-color: #e0d8d0 !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
  transition: all 0.2s ease !important;
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
  background-color: #8b7355 !important;
  border-color: #8b7355 !important;
  color: #fff !important;
}