/* GÉNÉRÉ par build-ds-bundle.sh le 2026-09-08T08:43:51+02:00 — NE PAS ÉDITER À LA MAIN */
/* ===== _tokens.css ===== */
/**
 * heleneriu.fr - Design Tokens
 * Artisan Luxury Theme - Boutique Laine Haut de Gamme
 * 
 * Architecture: ITCSS Layer 1 - Settings
 * Generated: 2026-01-15
 */

/* Google Fonts (Fraunces+Newsreader, ~350 Ko) supprimées le 2026-07-07 :
   le site rend en Playfair Display + Inter (local-fonts.css, woff2 locaux).
   Les tokens ci-dessous pointent vers ces fonts locales. */

:root {
  /* ══════════════════════════════════════════
     TYPOGRAPHY SCALE
     ══════════════════════════════════════════ */
  
  /* Font Families - Distinctive, Editorial */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Font Sizes - Modular Scale 1.25 */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 3.75rem;    /* 60px */
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.8;
  
  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ══════════════════════════════════════════
     COLOR PALETTE - Artisan Luxury
     ══════════════════════════════════════════ */
  
  /* Primary - Warm Taupe (Signature) */
  --color-primary: #8b7355;
  --color-white: #ffffff;
  --color-primary-50: #f7f5f3;
  --color-primary-100: #ede9e4;
  --color-primary-200: #ddd5cc;
  --color-primary-300: #c5b8a8;
  --color-primary-400: #a99882;
  --color-primary: #8b7355;
  --color-white: #ffffff;
  --color-primary-500: #8b7355;  /* Signature */
  --color-primary-600: #7a6349;
  --color-primary-700: #65513d;
  --color-primary-800: #544435;
  --color-primary-900: #483b2f;
  --color-primary-950: #271f18;
  
  /* Neutral - Warm Grays */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #faf9f8;
  --color-neutral-100: #f5f4f2;
  --color-neutral-200: #eae8e5;
  --color-neutral-300: #d8d5d0;
  --color-neutral-400: #b5b0a8;
  --color-neutral-500: #918b82;
  --color-neutral-600: #756f66;
  --color-neutral-700: #5f5a53;
  --color-neutral-800: #4a4640;
  --color-neutral-900: #2d2a26;
  --color-neutral-950: #1a1816;
  
  /* Accent - Terracotta */
  --color-accent-50: #fef6f3;
  --color-accent-100: #fdeae3;
  --color-accent-200: #fbd4c7;
  --color-accent-300: #f7b49d;
  --color-accent-400: #f08b63;
  --color-accent-500: #e86a3d;
  --color-accent-600: #d44f26;
  --color-accent-700: #b03e1e;
  --color-accent-800: #91351e;
  --color-accent-900: #77301e;
  
  /* Semantic Colors */
  --color-success: #4d7c5b;
  --color-success-light: #e8f0eb;
  --color-warning: #c9942e;
  --color-warning-light: #fef8eb;
  --color-error: #c44536;
  --color-error-light: #fdf2f1;
  --color-info: #4a7c9b;
  --color-info-light: #eef5f9;

  /* ══════════════════════════════════════════
     SPACING SCALE
     ══════════════════════════════════════════ */
  
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ══════════════════════════════════════════
     BORDERS & RADIUS
     ══════════════════════════════════════════ */
  
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ══════════════════════════════════════════
     SHADOWS - Soft, Organic
     ══════════════════════════════════════════ */
  
  --shadow-xs: 0 1px 2px rgba(43, 39, 35, 0.04);
  --shadow-sm: 0 2px 4px rgba(43, 39, 35, 0.06);
  --shadow-md: 0 4px 12px rgba(43, 39, 35, 0.08);
  --shadow-lg: 0 8px 24px rgba(43, 39, 35, 0.1);
  --shadow-xl: 0 16px 48px rgba(43, 39, 35, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(43, 39, 35, 0.04);
  
  /* Colored Shadows */
  --shadow-primary: 0 4px 16px rgba(139, 115, 85, 0.2);
  --shadow-accent: 0 4px 16px rgba(232, 106, 61, 0.2);

  /* ══════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ══════════════════════════════════════════ */
  
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ══════════════════════════════════════════
     Z-INDEX SCALE
     ══════════════════════════════════════════ */
  
  --z-below: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;
  --z-tooltip: 800;

  /* ══════════════════════════════════════════
     BREAKPOINTS (for reference in JS)
     ══════════════════════════════════════════ */
  
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* ══════════════════════════════════════════
     LEGACY COMPATIBILITY
     ══════════════════════════════════════════ */
  
  /* Map old variables to new tokens */
  --color-primary: #8b7355;
  --color-white: #ffffff;
  --color-primary: var(--color-primary-500);
  --color-primary-light: var(--color-primary-400);
  --color-primary-dark: var(--color-primary-700);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-white: var(--color-neutral-0);
  --color-bg-primary: var(--color-neutral-50);
  --color-border-primary: var(--color-neutral-200);
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Optionally define dark mode tokens here */
  }
}

/* ===== _base.css ===== */
/**
 * heleneriu.fr - Base Styles
 * Reset + Typography + Core Elements
 * 
 * Architecture: ITCSS Layer 2-3 - Generic & Elements
 */

/* ══════════════════════════════════════════
   MODERN RESET
   ══════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-50);
  min-height: 100vh;
}

/* ══════════════════════════════════════════
   TYPOGRAPHY - Distinctive Editorial Style
   ══════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-neutral-950);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tighter);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-md);
  font-weight: var(--font-medium);
}

p {
  margin-bottom: var(--space-4);
}

/* Lead paragraph */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-700);
}

/* Small text */
small, .small {
  font-size: var(--text-sm);
}

/* Strong emphasis */
strong, b {
  font-weight: var(--font-semibold);
}

/* Italic emphasis */
em, i {
  font-style: italic;
}

/* ══════════════════════════════════════════
   LINKS - Elegant Underline Animation
   ══════════════════════════════════════════ */

a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
}

a:hover {
  color: var(--color-primary-800);
}

/* Animated underline for text links */
.link-underline {
  display: inline;
  background-image: linear-gradient(
    transparent calc(100% - 2px),
    var(--color-primary-300) 2px
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration-normal) var(--ease-out);
}

.link-underline:hover {
  background-size: 100% 100%;
}

/* ══════════════════════════════════════════
   LISTS
   ══════════════════════════════════════════ */

ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

li {
  margin-bottom: var(--space-2);
}

li::marker {
  color: var(--color-primary-400);
}

/* ══════════════════════════════════════════
   IMAGES & MEDIA
   ══════════════════════════════════════════ */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-radius: var(--radius-sm);
}

figure {
  margin: var(--space-6) 0;
}

figcaption {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  margin-top: var(--space-2);
  font-style: italic;
}

/* ══════════════════════════════════════════
   FORMS - Base Styling
   ══════════════════════════════════════════ */

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

input:focus, 
textarea:focus, 
select:focus {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
}

::placeholder {
  color: var(--color-neutral-400);
  opacity: 1;
}

/* ══════════════════════════════════════════
   SELECTION
   ══════════════════════════════════════════ */

::selection {
  background-color: var(--color-primary-200);
  color: var(--color-neutral-950);
}

/* ══════════════════════════════════════════
   HORIZONTAL RULE - Elegant Divider
   ══════════════════════════════════════════ */

hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-neutral-300) 20%,
    var(--color-neutral-300) 80%,
    transparent
  );
  margin: var(--space-8) 0;
}

/* Decorative separator */
.separator {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-neutral-200);
}

.separator__icon {
  color: var(--color-primary-400);
  font-size: var(--text-sm);
}

/* ══════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════ */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-200);
}

th {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-100);
}

/* ══════════════════════════════════════════
   BLOCKQUOTE - Editorial Style
   ══════════════════════════════════════════ */

blockquote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: var(--font-light);
  color: var(--color-neutral-700);
  padding: var(--space-6);
  padding-left: var(--space-8);
  margin: var(--space-8) 0;
  position: relative;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
}

blockquote::before {
  content: '"';
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  font-size: var(--text-5xl);
  font-family: var(--font-display);
  color: var(--color-primary-300);
  line-height: 1;
}

blockquote cite {
  display: block;
  font-size: var(--text-sm);
  font-style: normal;
  font-family: var(--font-body);
  color: var(--color-neutral-500);
  margin-top: var(--space-4);
}

blockquote cite::before {
  content: '— ';
}

/* ══════════════════════════════════════════
   CODE
   ══════════════════════════════════════════ */

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  color: var(--color-primary-700);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-4);
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-100);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* ===== _components.css ===== */
/**
 * 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;
}

/* ══════════════════════════════════════════
   FIX CONTRASTE & UX — FORMULAIRES + FOOTER
   ══════════════════════════════════════════ */

/* Fix 1 — Bouton "AFFICHER" mot de passe (connexion + inscription) */
#content .input-group .input-group-btn .btn,
#content .input-group-btn > .btn,
body .input-group-btn .btn[type="button"],
[data-action="show-password"] {
  background-color: #8b7355 !important;
  color: #fff !important;
  border: 1px solid #8b7355 !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  opacity: 1 !important;
}

/* Fix 2 — Pages connexion/inscription : refonte complète */
#authentication h1,
#identity h1,
.page-authentication h1,
.page-customer-account h1 {
  color: #2d2418 !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  margin-bottom: 24px !important;
}
#authentication #content,
#identity #content {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 32px !important;
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e8e0d6 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.login-form,
.register-form {
  border: none !important;
  padding: 0 !important;
}
.login-form .form-group,
.register-form .form-group {
  margin-bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.login-form label,
.register-form label {
  font-weight: 600 !important;
  color: #2d2418 !important;
  font-size: 14px !important;
}
.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid #d4c8b8 !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}
.login-form input:focus,
.register-form input:focus {
  border-color: #8b7355 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139,115,85,0.12) !important;
}
.login-form .forgot-password a,
.login-form a[href*="password"],
a[data-link-action="display-register-form"] {
  color: #8b7355 !important;
  font-weight: 500 !important;
}
.login-form .no-account,
.register-form .no-account {
  text-align: center !important;
  color: #5a4d3e !important;
  margin-top: 16px !important;
}
.login-form .no-account a,
.register-form .no-account a,
.register-form .form-footer a {
  color: #8b7355 !important;
  font-weight: 600 !important;
}
/* Labels à gauche, pas à droite */
.login-form .form-group label,
.register-form .form-group label {
  text-align: left !important;
  float: none !important;
  width: auto !important;
}
/* Fix form-group Bootstrap horizontal layout → vertical */
#authentication .form-group .col-md-6,
#authentication .form-group .col-md-8,
#identity .form-group .col-md-6,
#identity .form-group .col-md-8 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}
#authentication .form-group .col-md-4,
#identity .form-group .col-md-4 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Fix 3 — Page contact : titre "Envoyez-nous un message" gris clair */
.contact-form h3,
.page-contact h3,
#content h3 {
  color: #2d2418 !important;
}

/* Fix 4 — Page contact : bouton "CHOISIR UN FICHIER" */
.contact-form input[type="file"]::file-selector-button,
input[type="file"]::file-selector-button {
  background: #8b7355 !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

/* Fix 5 — Footer : texte adresse/horaires lisible sur fond beige */
footer p,
footer li,
footer address,
footer span {
  color: #5a4d3e !important;
}
footer h3,
footer h4,
footer .footer-heading {
  color: #2d2418 !important;
}

/* ══════════════════════════════════════════
   BLOG HERO — harmonisation thème beige/doré
   ══════════════════════════════════════════ */
body .blog-header,
body .everpsblog-header,
body [class*="blog-header"],
#wrapper .blog-header,
.blog-header.blog-header {
  background: linear-gradient(135deg, #2d2418 0%, #5a4d3e 50%, #8b7355 100%) !important;
  background-image: linear-gradient(135deg, #2d2418 0%, #5a4d3e 50%, #8b7355 100%) !important;
}

/* ══════════════════════════════════════════
   PAGE 404 — amélioration lisibilité
   ══════════════════════════════════════════ */
body#pagenotfound #wrapper h1,
body#pagenotfound #content h1,
body#pagenotfound h1,
body.page-pagenotfound h1 {
  color: #2d2418 !important;
  font-size: clamp(22px, 4vw, 30px) !important;
}
body#pagenotfound #wrapper #content,
body#pagenotfound #content {
  text-align: center !important;
  padding: 48px 24px !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}
body#pagenotfound #wrapper p,
body#pagenotfound #content p,
body#pagenotfound p,
body.page-pagenotfound p {
  color: #5a4d3e !important;
}

/* ══════════════════════════════════════════
   HOMEPAGE — bloc social vide (barre beige)
   ══════════════════════════════════════════ */
.block-social:has(ul:empty),
.block-social ul:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.block-social {
  min-height: 0 !important;
}

/* ===== _prestashop.css ===== */
/**
 * heleneriu.fr - PrestaShop Overrides
 * Styles spécifiques PrestaShop 8.x - Artisan Luxury Theme
 * 
 * Architecture: ITCSS Layer 5 - Components (PS specific)
 */

/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */

#header {
  background-color: var(--color-neutral-0);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.header-nav {
  background-color: var(--color-neutral-0);
  border-bottom: 1px solid var(--color-neutral-100);
}

.header-top {
  padding: var(--space-3) 0;
}

/* Logo */
#_desktop_logo img,
#_mobile_logo img {
  max-height: 60px;
  transition: opacity var(--duration-fast) var(--ease-out);
}

#_desktop_logo:hover img,
#_mobile_logo:hover img {
  opacity: 0.85;
}

/* ══════════════════════════════════════════
   NAVIGATION MENU
   ══════════════════════════════════════════ */

#_desktop_top_menu,
.top-menu {
  display: flex;
  gap: var(--space-1);
}

.top-menu > li > a {
  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);
}

.top-menu > li > a:hover,
.top-menu > li.current > a {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
}

/* Dropdown */
.top-menu .sub-menu,
.top-menu .popover {
  background-color: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  animation: fadeInDown var(--duration-fast) var(--ease-out);
}

.top-menu .sub-menu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-neutral-700);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.top-menu .sub-menu a:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-600);
}

/* ══════════════════════════════════════════
   SEARCH BAR
   ══════════════════════════════════════════ */

.search-widget form {
  display: flex;
  align-items: stretch;
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-full);
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-out);
}

.search-widget form:focus-within {
  background-color: var(--color-neutral-0);
  box-shadow: 0 0 0 2px var(--color-primary-300);
}

.search-widget input[type="text"] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.search-widget input[type="text"]:focus {
  outline: none;
}

.search-widget button {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  color: var(--color-neutral-500);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.search-widget button:hover {
  color: var(--color-primary-600);
}

/* ══════════════════════════════════════════
   CART BLOCK
   ══════════════════════════════════════════ */

.blockcart {
  position: relative;
}

.blockcart .header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.blockcart .header:hover {
  background-color: var(--color-neutral-100);
}

.blockcart .cart-products-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
  border-radius: var(--radius-full);
}

/* ══════════════════════════════════════════
   PRODUCT LISTING
   ══════════════════════════════════════════ */

#products {
  padding: var(--space-6) 0;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

/* Product Miniature */
.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;
  aspect-ratio: 1;
  background: var(--color-neutral-100);
}

.product-miniature .product-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
  transition: transform var(--duration-slow) var(--ease-out);
}

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

/* Product Flags */
.product-flags {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 2;
}

.product-flag {
  display: inline-block;
  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-sm);
}

.product-flag.new {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
}

.product-flag.on-sale,
.product-flag.discount {
  background-color: var(--color-accent-500);
  color: var(--color-neutral-0);
}

/* Product Info */
.product-miniature .product-description {
  padding: var(--space-4);
}

.product-miniature .product-title {
  margin-bottom: var(--space-2);
}

.product-miniature .product-title a {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-neutral-900);
  text-decoration: none;
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--duration-fast) var(--ease-out);
}

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

/* Prices */
.product-miniature .product-price-and-shipping {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  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);
  font-weight: var(--font-regular);
  color: var(--color-neutral-400);
  text-decoration: line-through;
}

.product-miniature .discount-percentage,
.product-miniature .discount-amount {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent-500);
}

/* Quick View */
.product-miniature .quick-view {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(var(--space-4));
  opacity: 0;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}

.product-miniature:hover .quick-view {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.product-miniature .quick-view:hover {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
  border-color: var(--color-primary-500);
}

/* ══════════════════════════════════════════
   PRODUCT PAGE
   ══════════════════════════════════════════ */

#product {
  padding: var(--space-8) 0;
}

.product-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-neutral-100);
}

.product-cover img {
  width: 100%;
  height: auto;
}

/* Product Images Thumbs */
.product-images {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.product-images .thumb-container {
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.product-images .thumb-container:hover,
.product-images .thumb-container.selected {
  border-color: var(--color-primary-400);
}

.product-images .thumb-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Product Info */
.product-information h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-950);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}

.product-prices {
  margin-bottom: var(--space-6);
}

.product-prices .current-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.product-prices .current-price-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-600);
}

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

/* Product Variants */
.product-variants {
  margin-bottom: var(--space-6);
}

.product-variants .product-variants-item {
  margin-bottom: var(--space-4);
}

.product-variants .control-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-2);
}

/* Color Swatches */
.color-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.color-group li {
  list-style: none;
}

.color-group .color {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: inset 0 0 0 2px var(--color-neutral-0);
}

.color-group .color:hover {
  transform: scale(1.1);
}

.color-group input:checked + .color {
  border-color: var(--color-neutral-900);
}

/* Quantity Selector */
.product-quantity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

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

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

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

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

/* Add to Cart */
.product-add-to-cart .add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.product-add-to-cart .add-to-cart:hover {
  background-color: var(--color-primary-600);
  box-shadow: var(--shadow-primary);
  transform: translateY(-2px);
}

.product-add-to-cart .add-to-cart:active {
  transform: translateY(0);
}

/* ══════════════════════════════════════════
   CATEGORY PAGE
   ══════════════════════════════════════════ */

#category {
  padding: var(--space-8) 0;
}

.category-header {
  margin-bottom: var(--space-8);
}

.category-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-950);
  margin-bottom: var(--space-4);
}

.category-header .category-description {
  font-size: var(--text-lg);
  color: var(--color-neutral-600);
  max-width: 65ch;
}

/* Subcategories */
.subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.subcategories a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.subcategories a:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

/* ══════════════════════════════════════════
   FACETED FILTERS
   ══════════════════════════════════════════ */

#search_filters {
  background: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

#search_filters h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-200);
}

.facet {
  margin-bottom: var(--space-5);
}

.facet .facet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  cursor: pointer;
  padding: var(--space-2) 0;
}

.facet .facet-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

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

/* ══════════════════════════════════════════
   CART PAGE
   ══════════════════════════════════════════ */

#cart {
  padding: var(--space-8) 0;
}

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
}

@media (max-width: 991px) {
  .cart-grid {
    grid-template-columns: 1fr;
  }
}

/* Cart Items */
.cart-items {
  background: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-neutral-100);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item .product-line-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-neutral-100);
}

.cart-item .product-line-info .product-name {
  font-family: var(--font-display);
  font-weight: var(--font-medium);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-1);
}

.cart-item .product-line-info .product-attributes {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

.cart-item .current-price {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  color: var(--color-primary-600);
}

/* Cart Summary */
.cart-summary {
  background: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: sticky;
  top: var(--space-24);
}

.cart-summary h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-6);
}

.cart-summary .cart-summary-line {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-neutral-100);
}

.cart-summary .cart-total {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  border-bottom: none;
  padding-top: var(--space-4);
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */

#footer {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-300);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-16);
}

#footer h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-neutral-0);
  margin-bottom: var(--space-4);
}

#footer a {
  color: var(--color-neutral-400);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

#footer a:hover {
  color: var(--color-primary-400);
}

#footer .footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
}

/* Newsletter */
.block_newsletter form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.block_newsletter input[type="email"] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-md);
  color: var(--color-neutral-0);
}

.block_newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--color-primary-500);
}

.block_newsletter button {
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-500);
  color: var(--color-neutral-0);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.block_newsletter button:hover {
  background: var(--color-primary-600);
}

/* Copyright */
.footer-copyright {
  text-align: center;
  padding-top: var(--space-8);
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-neutral-800);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

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

#wrapper .breadcrumb {
  padding: var(--space-4) 0;
  background: transparent;
}

#wrapper .breadcrumb li {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

#wrapper .breadcrumb li::after {
  content: '/';
  margin: 0 var(--space-2);
  color: var(--color-neutral-300);
}

#wrapper .breadcrumb li:last-child::after {
  content: none;
}

#wrapper .breadcrumb a {
  color: var(--color-neutral-600);
}

#wrapper .breadcrumb a:hover {
  color: var(--color-primary-600);
}

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

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) 0;
}

.pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.pagination .page-link:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
}

.pagination .current .page-link {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-neutral-0);
}

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

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border-left: 4px solid;
}

.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-danger {
  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);
}

/* ══════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════ */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: fadeIn var(--duration-fast) var(--ease-out);
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-dialog {
  background: var(--color-neutral-0);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn var(--duration-normal) var(--ease-spring);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-neutral-100);
}

.modal-header h5 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0;
}

.modal-header .close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-100);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.modal-header .close:hover {
  background: var(--color-neutral-200);
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-neutral-100);
}

/* Modal panier centré */
#blockcart-modal {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#blockcart-modal .modal-dialog {
  margin: 0 auto;
  max-width: 700px;
  width: 90%;
}

#blockcart-modal .modal-content {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
}

/* ===== _animations.css ===== */
/**
 * heleneriu.fr - Animations & Micro-interactions
 * Artisan Luxury Theme - Refined Motion Design
 * 
 * Architecture: ITCSS Layer 6 - Trumps/Utilities
 */

/* ══════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ══════════════════════════════════════════ */

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide In Right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In Left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Gentle Pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Shimmer (loading effect) */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Shake (for errors) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Bounce In */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ══════════════════════════════════════════
   ANIMATION CLASSES
   ══════════════════════════════════════════ */

.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-out) both;
}

.animate-fade-in-up {
  animation: fadeInUp var(--duration-normal) var(--ease-out) both;
}

.animate-fade-in-down {
  animation: fadeInDown var(--duration-normal) var(--ease-out) both;
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-out) both;
}

.animate-slide-in-right {
  animation: slideInRight var(--duration-normal) var(--ease-out) both;
}

.animate-slide-in-left {
  animation: slideInLeft var(--duration-normal) var(--ease-out) both;
}

.animate-bounce-in {
  animation: bounceIn var(--duration-slow) var(--ease-spring) both;
}

.animate-pulse {
  animation: pulse 2s var(--ease-in-out) infinite;
}

.animate-float {
  animation: float 3s var(--ease-in-out) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-shake {
  animation: shake 0.5s var(--ease-out);
}

/* Animation Delays for Stagger */
.animate-delay-1 { animation-delay: 100ms; }
.animate-delay-2 { animation-delay: 200ms; }
.animate-delay-3 { animation-delay: 300ms; }
.animate-delay-4 { animation-delay: 400ms; }
.animate-delay-5 { animation-delay: 500ms; }

/* ══════════════════════════════════════════
   TRANSITION UTILITIES
   ══════════════════════════════════════════ */

.transition-none { transition: none; }
.transition-all { transition: all var(--duration-normal) var(--ease-out); }
.transition-colors { transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.transition-opacity { transition: opacity var(--duration-normal) var(--ease-out); }
.transition-transform { transition: transform var(--duration-normal) var(--ease-out); }
.transition-shadow { transition: box-shadow var(--duration-normal) var(--ease-out); }

/* ══════════════════════════════════════════
   HOVER EFFECTS
   ══════════════════════════════════════════ */

/* Lift on hover */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out), 
              box-shadow var(--duration-normal) var(--ease-out);
}

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

/* Scale on hover */
.hover-scale {
  transition: transform var(--duration-fast) var(--ease-out);
}

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

/* Glow on hover */
.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: 0 0 20px var(--color-primary-200);
}

/* ══════════════════════════════════════════
   LOADING STATES
   ══════════════════════════════════════════ */

/* Skeleton loader */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-200) 0%,
    var(--color-neutral-100) 50%,
    var(--color-neutral-200) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

.skeleton--text {
  height: 1em;
  margin-bottom: var(--space-2);
}

.skeleton--title {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--space-3);
}

.skeleton--image {
  aspect-ratio: 4/3;
}

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-500);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

/* ══════════════════════════════════════════
   SCROLL ANIMATIONS (Intersection Observer)
   ══════════════════════════════════════════ */

/* Elements start hidden */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade"] {
  transform: none;
}

[data-animate="scale"] {
  transform: scale(0.9);
}

[data-animate="scale"].is-visible {
  transform: scale(1);
}

[data-animate="slide-left"] {
  transform: translateX(-30px);
}

[data-animate="slide-left"].is-visible {
  transform: translateX(0);
}

[data-animate="slide-right"] {
  transform: translateX(30px);
}

[data-animate="slide-right"].is-visible {
  transform: translateX(0);
}

/* ══════════════════════════════════════════
   MICRO-INTERACTIONS
   ══════════════════════════════════════════ */

/* Button press effect */
.btn:active {
  transform: scale(0.98);
}

/* Input focus ring animation */
.input:focus {
  animation: scaleIn var(--duration-fast) var(--ease-out);
}

/* Checkbox/Radio custom animation */
.checkbox-custom {
  position: relative;
  cursor: pointer;
}

.checkbox-custom input {
  position: absolute;
  opacity: 0;
}

.checkbox-custom__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: var(--border-width-medium) solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-0);
  transition: all var(--duration-fast) var(--ease-out);
}

.checkbox-custom input:checked + .checkbox-custom__mark {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.checkbox-custom__mark::after {
  content: '';
  width: 6px;
  height: 10px;
  border: solid var(--color-neutral-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--duration-fast) var(--ease-spring);
}

.checkbox-custom input:checked + .checkbox-custom__mark::after {
  transform: rotate(45deg) scale(1);
}

/* Heart/Wishlist animation */
.wishlist-btn {
  transition: transform var(--duration-fast) var(--ease-spring);
}

.wishlist-btn:hover {
  transform: scale(1.1);
}

.wishlist-btn.is-active {
  animation: bounceIn var(--duration-normal) var(--ease-spring);
}

.wishlist-btn.is-active svg {
  fill: var(--color-error);
  color: var(--color-error);
}

/* Cart add animation */
.add-to-cart-success {
  animation: bounceIn var(--duration-slow) var(--ease-spring);
}

/* ══════════════════════════════════════════
   PAGE TRANSITIONS
   ══════════════════════════════════════════ */

/* Smooth page load */
.page-enter {
  opacity: 0;
}

.page-enter-active {
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-out);
}

/* ══════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  [data-animate] {
    opacity: 1;
    transform: none;
  }
}

/* ===== _utilities.css ===== */
/**
 * heleneriu.fr - Utility Classes
 * Functional CSS utilities
 * 
 * Architecture: ITCSS Layer 7 - Utilities
 */

/* ══════════════════════════════════════════
   SPACING UTILITIES
   ══════════════════════════════════════════ */

/* Margin */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-auto { margin: auto; }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.ml-0 { margin-left: var(--space-0); }
.ml-2 { margin-left: var(--space-2); }
.ml-4 { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: var(--space-0); }
.mr-2 { margin-right: var(--space-2); }
.mr-4 { margin-right: var(--space-4); }
.mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

/* Padding */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.pt-0 { padding-top: var(--space-0); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* ══════════════════════════════════════════
   FLEXBOX UTILITIES
   ══════════════════════════════════════════ */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ══════════════════════════════════════════
   GRID UTILITIES
   ══════════════════════════════════════════ */

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ══════════════════════════════════════════ */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }

.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   COLOR UTILITIES
   ══════════════════════════════════════════ */

.text-primary { color: var(--color-primary-500); }
.text-primary-dark { color: var(--color-primary-700); }
.text-accent { color: var(--color-accent-500); }
.text-muted { color: var(--color-neutral-500); }
.text-dark { color: var(--color-neutral-900); }
.text-white { color: var(--color-neutral-0); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }

.bg-primary { background-color: var(--color-primary-500); }
.bg-primary-light { background-color: var(--color-primary-100); }
.bg-accent { background-color: var(--color-accent-500); }
.bg-white { background-color: var(--color-neutral-0); }
.bg-light { background-color: var(--color-neutral-50); }
.bg-gray { background-color: var(--color-neutral-100); }
.bg-transparent { background-color: transparent; }

/* ══════════════════════════════════════════
   BORDER UTILITIES
   ══════════════════════════════════════════ */

.border { border: var(--border-width-thin) solid var(--color-neutral-200); }
.border-0 { border: none; }
.border-t { border-top: var(--border-width-thin) solid var(--color-neutral-200); }
.border-b { border-bottom: var(--border-width-thin) solid var(--color-neutral-200); }
.border-primary { border-color: var(--color-primary-400); }

.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ══════════════════════════════════════════
   SHADOW UTILITIES
   ══════════════════════════════════════════ */

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ══════════════════════════════════════════
   DISPLAY UTILITIES
   ══════════════════════════════════════════ */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

.visible { visibility: visible; }
.invisible { visibility: hidden; }

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* ══════════════════════════════════════════
   POSITION UTILITIES
   ══════════════════════════════════════════ */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.z-0 { z-index: var(--z-base); }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-dropdown { z-index: var(--z-dropdown); }
.z-modal { z-index: var(--z-modal); }

/* ══════════════════════════════════════════
   SIZE UTILITIES
   ══════════════════════════════════════════ */

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-screen { width: 100vw; }
.min-w-0 { min-width: 0; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-full { max-width: 100%; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* ══════════════════════════════════════════
   OVERFLOW UTILITIES
   ══════════════════════════════════════════ */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ══════════════════════════════════════════
   CURSOR UTILITIES
   ══════════════════════════════════════════ */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ══════════════════════════════════════════
   SELECTION
   ══════════════════════════════════════════ */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ══════════════════════════════════════════
   RESPONSIVE DISPLAY
   ══════════════════════════════════════════ */

@media (max-width: 767px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:text-center { text-align: center; }
  .sm\:flex-col { flex-direction: column; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:inline-flex { display: inline-flex; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
}

/* ══════════════════════════════════════════
   ASPECT RATIO
   ══════════════════════════════════════════ */

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-4 { aspect-ratio: 3 / 4; }

/* ══════════════════════════════════════════
   OBJECT FIT
   ══════════════════════════════════════════ */

.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.object-center { object-position: center; }

/* ══════════════════════════════════════════
   SCREEN READER ONLY
   ══════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== _category.css ===== */
/**
 * heleneriu.fr - Category Page Styles
 * Artisan Luxury Theme - Pages Catégories
 *
 * Architecture: ITCSS Layer 5 - Page-specific Components
 * Updated: 2026-03-16
 */

/* ══════════════════════════════════════════
   CATEGORY HERO HEADER
   ══════════════════════════════════════════ */

#js-product-list-header {
  padding: var(--space-8) 0 var(--space-6);
  margin-bottom: var(--space-2);
  position: relative;
}

#js-product-list-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-primary-400),
    var(--color-primary-200)
  );
  border-radius: var(--radius-full);
  margin-top: var(--space-4);
}

/* Category H1 */
#category h1,
#js-product-list-header h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--font-bold);
  color: var(--color-neutral-950);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Category Description */
.category-description,
#category-description {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-neutral-600);
  max-width: 70ch;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* Product Count */
.showing {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  font-weight: var(--font-regular);
}

/* ══════════════════════════════════════════
   SUBCATEGORIES - Stylish Pills
   ══════════════════════════════════════════ */

#subcategories,
.subcategories {
  display: block !important;
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-neutral-0);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* Masquer les images placeholder des sous-catégories */
#subcategories .subcategory-image,
#subcategories img,
.subcategories img,
#subcategories li .subcategory-image,
#subcategories li > a > img,
#subcategories li > a > .subcategory-image {
  display: none !important;
}

#subcategories h2,
.subcategories-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#subcategories h2::before {
  content: '🧶';
  font-size: var(--text-xl);
}

.subcategories-list,
#subcategories ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.subcategories-list li,
#subcategories li {
  list-style: none;
}

.subcategories-list a,
#subcategories a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  background: linear-gradient(
    135deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-50) 100%
  );
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  text-decoration: none;
  text-transform: capitalize !important;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.subcategories-list a:hover,
#subcategories a:hover {
  background: linear-gradient(
    135deg,
    var(--color-primary-100) 0%,
    var(--color-primary-50) 100%
  );
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════
   PRODUCTS GRID
   ══════════════════════════════════════════ */

#js-product-list {
  padding: var(--space-2) 0;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .products {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1200px) {
  .products {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

/* ══════════════════════════════════════════
   PRODUCT CARD
   ══════════════════════════════════════════ */

#category .product-miniature,
.products .product-miniature {
  background: var(--color-neutral-0);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  position: relative;
  display: flex;
  flex-direction: column;
  /* Subtle shadow at rest — card feels tangible */
  box-shadow:
    0 1px 3px rgba(43, 39, 35, 0.06),
    0 4px 12px rgba(43, 39, 35, 0.04);
  border: 1px solid var(--color-neutral-100);
}

#category .product-miniature:hover,
.products .product-miniature:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 32px rgba(139, 115, 85, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: var(--color-primary-200);
}

/* Image container */
#category .thumbnail-container,
.products .thumbnail-container {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* thumbnail-top holds the image + overlay */
#category .thumbnail-top,
.products .thumbnail-top {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-50) 100%
  );
  flex-shrink: 0;
}

/* Product image link */
#category .thumbnail-top > a.product-thumbnail,
.products .thumbnail-top > a.product-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
}

#category .thumbnail-top picture,
.products .thumbnail-top picture {
  display: block;
  width: 100%;
  height: 100%;
}

#category .thumbnail-top picture img,
.products .thumbnail-top picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
  transition: transform var(--duration-slow) var(--ease-out);
  display: block;
}

#category .product-miniature:hover .thumbnail-top picture img,
.products .product-miniature:hover .thumbnail-top picture img {
  transform: scale(1.07);
}

/* Product Flags */
#category .product-flags,
.products .product-flags {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  right: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 3;
  /* flags are INSIDE thumbnail-container, outside thumbnail-top */
  pointer-events: none;
}

#category .product-flag,
.products .product-flag {
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

#category .product-flag.new,
.products .product-flag.new {
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  color: var(--color-neutral-0);
}

#category .product-flag.on-sale,
#category .product-flag.discount,
.products .product-flag.on-sale,
.products .product-flag.discount {
  background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));
  color: var(--color-neutral-0);
}

/* Quick View overlay — slides up from bottom of image */
#category .highlighted-informations,
.products .highlighted-informations {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(
    to top,
    rgba(45, 36, 24, 0.72) 0%,
    rgba(45, 36, 24, 0.0) 100%
  );
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  z-index: 4;
}

#category .product-miniature:hover .highlighted-informations,
.products .product-miniature:hover .highlighted-informations {
  opacity: 1;
  transform: translateY(0);
}

#category .quick-view,
.products .quick-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-neutral-0);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

#category .quick-view:hover,
.products .quick-view:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ── Product Info (below image) ── */

#category .product-description,
.products .product-description {
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

/* Product title */
#category .product-title,
.products .product-title {
  margin: 0 0 var(--space-2);
}

#category .product-title a,
.products .product-title a {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  text-decoration: none;
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--duration-fast) var(--ease-out);
}

#category .product-title a:hover,
.products .product-title a:hover {
  color: var(--color-primary-600);
}

/* Benefit text — description courte tronquée 2 lignes */
.product-card-benefit {
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  color: var(--color-neutral-500) !important;
  line-height: 1.45 !important;
  margin: var(--space-1) 0 var(--space-2) !important;
  min-height: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Service badge — discret, pas agressif */
.product-card-service {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  color: var(--color-neutral-400) !important;
  font-weight: var(--font-medium) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin: 0 0 var(--space-1) !important;
}

/* Price section */
#category .product-price-and-shipping,
.products .product-price-and-shipping {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-neutral-100);
}

#category .price,
.products .price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-primary-600);
  line-height: 1;
}

#category .regular-price,
.products .regular-price {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--color-neutral-400);
  text-decoration: line-through;
}

/* Wishlist heart — plus discret */
.wishlist-button-add,
.wishlist-button-product {
  background: rgba(255,255,255,0.85) !important;
  border: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wishlist-button-add i,
.wishlist-button-product i {
  font-size: 18px !important;
  color: var(--color-neutral-400) !important;
}
.wishlist-button-add:hover i,
.wishlist-button-product:hover i {
  color: #c45a3b !important;
}

#category .discount-percentage,
#category .discount-amount,
.products .discount-percentage,
.products .discount-amount {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-accent-600);
  background: var(--color-accent-50);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

/* Star reviews */
.product-list-reviews {
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════
   SORTING BAR
   ══════════════════════════════════════════ */

.products-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-neutral-100);
}

.products-selection .col-md-6,
.products-selection .col-sm-12 {
  flex: 1;
  min-width: 0;
}

.total-products {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

.total-products p {
  margin: 0;
}

.sort-by-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.sort-by {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  white-space: nowrap;
}

/* Sort dropdown wrapper */
.products-sort-order {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.products-sort-order .select-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.products-sort-order .select-title:hover,
.products-sort-order.show .select-title {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* Material icon inside title */
.products-sort-order .select-title .material-icons {
  font-size: 18px;
  color: var(--color-neutral-400);
}

/* Dropdown menu */
.products-sort-order .dropdown-menu {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.products-sort-order .dropdown-menu.show,
.products-sort-order.show .dropdown-menu {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: calc(100% + var(--space-2)) !important;
  left: 0 !important;
  min-width: 220px !important;
  background: var(--color-neutral-0) !important;
  border: 1px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: var(--space-2) !important;
  z-index: var(--z-dropdown) !important;
  gap: 2px !important;
}

.products-sort-order .dropdown-menu a,
.products-sort-order .dropdown-menu .select-list {
  display: block !important;
  padding: var(--space-2) var(--space-3) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-neutral-700) !important;
  background: transparent !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
  width: 100% !important;
  float: none !important;
  position: relative !important;
  transform: none !important;
}

.products-sort-order .dropdown-menu a:hover {
  background: var(--color-primary-50) !important;
  color: var(--color-primary-700) !important;
}

.products-sort-order .dropdown-menu a.current {
  background: var(--color-primary-100) !important;
  color: var(--color-primary-700) !important;
  font-weight: var(--font-medium) !important;
}

/* ══════════════════════════════════════════
   SIDEBAR FILTERS
   ══════════════════════════════════════════ */

#left-column,
.left-column {
  padding-right: var(--space-6);
}

#search_filters {
  background: var(--color-neutral-0);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: var(--space-24);
}

#search_filters h4,
#search_filters .h6 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-primary-200);
}

.facet {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-neutral-100);
}

.facet:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.facet .facet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-800);
  cursor: pointer;
  padding: var(--space-2) 0;
  transition: color var(--duration-fast) var(--ease-out);
}

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

.facet .collapse {
  margin-top: var(--space-3);
}

.facet .facet-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

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

.facet .custom-checkbox {
  position: relative;
}

.facet .custom-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.facet .custom-checkbox span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-neutral-0);
  border: 2px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.facet .custom-checkbox input:checked + span {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.facet .custom-checkbox span::after {
  content: '';
  width: 6px;
  height: 10px;
  border: solid var(--color-neutral-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--duration-fast) var(--ease-spring);
}

.facet .custom-checkbox input:checked + span::after {
  transform: rotate(45deg) scale(1);
}

.facet .color {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-neutral-0);
  box-shadow: 0 0 0 1px var(--color-neutral-200);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.facet .color:hover {
  transform: scale(1.15);
}

.facet .color.selected {
  box-shadow: 0 0 0 2px var(--color-primary-500);
}

.facet .magnitude {
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
  margin-left: auto;
}

.active_filters,
#js-active-search-filters {
  background: var(--color-primary-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
#js-active-search-filters:empty,
#js-active-search-filters.hide {
  display: none !important;
}

.active_filters .active-filter-title,
#js-active-search-filters .active-filter-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-3);
}

.active_filters .filter-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.active_filters .filter-block .filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: var(--color-neutral-0);
  border-radius: var(--radius-full);
}

.active_filters .filter-block .filter .close {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  font-size: 10px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.active_filters .filter-block .filter .close:hover {
  background: var(--color-error);
  color: var(--color-neutral-0);
}

/* ══════════════════════════════════════════
   SIDEBAR: Block Categories
   ══════════════════════════════════════════ */

.block-categories,
#left-column .block-categories {
  background: var(--color-neutral-0);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.block-categories h5,
.block-categories .h5 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary-100);
}

.block-categories ul,
.block-categories li {
  list-style-type: none !important;
}

.block-categories ul ul {
  padding-left: 0 !important;
}

.block-categories .category-top-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.block-categories .category-top-menu > li {
  margin-bottom: var(--space-1);
}

.block-categories .category-top-menu > li > a {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.block-categories .category-top-menu > li > a:hover {
  background: var(--color-primary-100);
}

.category-sub-menu {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none !important;
  padding: var(--space-3) 0 0 0 !important;
  margin: 0 !important;
}

.category-sub-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.category-sub-menu li::before,
.category-sub-menu li::marker {
  display: none !important;
  content: none !important;
}

.category-sub-menu li a {
  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-medium);
  color: var(--color-neutral-700);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.category-sub-menu li a:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
  transform: translateY(-1px);
}

.block-categories .category-sub-menu li.current a,
.block-categories .category-sub-menu li a[class*="active"] {
  background: var(--color-primary-500);
  color: var(--color-neutral-0);
  border-color: var(--color-primary-500);
}

.block-categories .collapse-icons {
  margin-left: auto;
  color: var(--color-neutral-400);
  transition: transform var(--duration-fast) var(--ease-out);
}

.block-categories [aria-expanded="true"] .collapse-icons {
  transform: rotate(180deg);
}

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

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-6) 0 var(--space-8);
  margin-top: var(--space-4);
}

.pagination .col-md-4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

.pagination .page-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination .page-list li {
  list-style: none;
}

.pagination .page-list li a,
.pagination .page-list li .spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.pagination .page-list li a:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Current / active page */
.pagination .page-list li.current a,
.pagination .page-list li a.disabled {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-neutral-0);
  pointer-events: none;
  box-shadow: var(--shadow-primary);
}

.pagination .page-list li .spacer {
  background: transparent;
  border-color: transparent;
  color: var(--color-neutral-400);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   CATEGORY DESCRIPTION BLOCK
   Override inline styles from PrestaShop admin
   ══════════════════════════════════════════ */

.block-category.card.card-block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: var(--space-8) 0 0 !important;
}

#category-description {
  color: inherit !important;
}

/* Featured products links block (top promo banner) */
#category-description .featured-products-links {
  background: var(--color-primary-50) !important;
  border-left: 3px solid var(--color-primary-400) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) !important;
  margin-bottom: var(--space-6) !important;
}

#category-description .featured-products-links h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg) !important;
  color: var(--color-primary-700) !important;
  font-weight: var(--font-semibold) !important;
  margin-bottom: var(--space-3) !important;
}

#category-description .featured-products-links p {
  font-family: var(--font-body);
  font-size: var(--text-base) !important;
  color: var(--color-neutral-700) !important;
  margin: 0 !important;
}

#category-description .featured-products-links a {
  color: var(--color-primary-600) !important;
  font-weight: var(--font-semibold) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* SEO content area */
.category-laines-seo-content,
.category-seo-content {
  max-width: 900px;
  margin: 0 auto;
}

.category-laines-seo-content .lead {
  font-size: var(--text-md) !important;
  color: var(--color-neutral-700) !important;
  line-height: var(--leading-relaxed) !important;
}

/* Brand sections — clean up Bootstrap card inline styles */
#category-description .card.shadow-sm {
  background: var(--color-neutral-50) !important;
  border: 1px solid var(--color-neutral-200) !important;
  border-left: 3px solid var(--color-primary-400) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: var(--space-6) !important;
}

#category-description .card-body {
  padding: var(--space-6) !important;
}

#category-description .card .h3,
#category-description .card h2.h3 {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  color: var(--color-primary-700) !important;
  font-weight: var(--font-bold) !important;
  margin-bottom: var(--space-3) !important;
}

#category-description .card p {
  font-family: var(--font-body) !important;
  color: var(--color-neutral-700) !important;
  line-height: var(--leading-relaxed) !important;
}

#category-description .card .h5 {
  font-family: var(--font-display) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--color-neutral-800) !important;
  margin-bottom: var(--space-3) !important;
}

#category-description .card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--space-4) !important;
}

#category-description .card ul li {
  font-family: var(--font-body);
  font-size: var(--text-sm) !important;
  color: var(--color-neutral-700) !important;
  padding: var(--space-1) 0 var(--space-1) var(--space-5) !important;
  position: relative;
  margin-bottom: var(--space-1) !important;
}

#category-description .card ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-primary-400);
  font-weight: var(--font-bold);
}

/* CTA buttons in description */
#category-description .btn.btn-sm {
  display: inline-flex !important;
  align-items: center;
  padding: var(--space-2) var(--space-4) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-semibold) !important;
  background: var(--color-primary-500) !important;
  color: var(--color-neutral-0) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
}

#category-description .btn.btn-sm:hover {
  background: var(--color-primary-600) !important;
  transform: translateY(-1px) !important;
}

/* CTA final block */
#category-description > div[style*="background: #8b7355"],
#category-description > .category-laines-seo-content [style*="background: #8b7355"] {
  background: var(--color-primary-600) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-10) !important;
  text-align: center;
  margin-top: var(--space-8) !important;
}

/* SEO category info card (bottom) */
.card.seo-category-info {
  display: none;
}

/* ══════════════════════════════════════════
   NO PRODUCTS STATE
   ══════════════════════════════════════════ */

.no-products {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  background: var(--color-neutral-0);
  border-radius: var(--radius-xl);
}

.no-products::before {
  content: '🧶';
  display: block;
  font-size: 4rem;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.no-products h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-3);
}

.no-products p {
  color: var(--color-neutral-500);
  max-width: 40ch;
  margin: 0 auto;
}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 991px) {
  #left-column,
  .left-column {
    padding-right: 0;
    margin-bottom: var(--space-6);
  }

  #search_filters {
    position: static;
  }

  .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
  }

  #js-product-list-header {
    padding: var(--space-6) 0 var(--space-4);
  }

  #category h1,
  #js-product-list-header h1 {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 575px) {
  .products {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  .products-selection {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .pagination .col-md-4 {
    display: none;
  }
}

/* ══════════════════════════════════════════
   ANIMATIONS - Staggered Product Reveal
   ══════════════════════════════════════════ */

@keyframes productReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.products .product-miniature {
  animation: productReveal var(--duration-normal) var(--ease-out) both;
}

.products .product-miniature:nth-child(1)  { animation-delay: 0ms; }
.products .product-miniature:nth-child(2)  { animation-delay: 40ms; }
.products .product-miniature:nth-child(3)  { animation-delay: 80ms; }
.products .product-miniature:nth-child(4)  { animation-delay: 120ms; }
.products .product-miniature:nth-child(5)  { animation-delay: 160ms; }
.products .product-miniature:nth-child(6)  { animation-delay: 200ms; }
.products .product-miniature:nth-child(7)  { animation-delay: 240ms; }
.products .product-miniature:nth-child(8)  { animation-delay: 280ms; }
.products .product-miniature:nth-child(9)  { animation-delay: 320ms; }
.products .product-miniature:nth-child(10) { animation-delay: 360ms; }
.products .product-miniature:nth-child(11) { animation-delay: 400ms; }
.products .product-miniature:nth-child(12) { animation-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
  .products .product-miniature {
    animation: none;
  }
}

/* ══════════════════════════════════════════
   MISC UTILITIES & FIXES
   ══════════════════════════════════════════ */

/* Hide mobile OK button on desktop */
#search_filter_controls,
button.ok {
  display: none !important;
}

@media (max-width: 767px) {
  #search_filter_controls {
    display: flex !important;
  }
}

/* EverBlog block — hidden on category (override in fix file) */
.columns_everblog_wrapper,
.category_wrapper {
  background: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-xs);
}

/* ===== _product.css ===== */
/**
 * heleneriu.fr - Product Page Styles
 * Artisan Luxury Theme - Refactored 2026-02-23
 *
 * Architecture: ITCSS Layer 5 - Page-specific Components
 * Fixes: grid layout, image sizing, h1, variants
 */

/* ══════════════════════════════════════════
   PRODUCT PAGE LAYOUT
   ══════════════════════════════════════════ */

#product {
  padding: var(--space-6) 0 var(--space-8);
}

/* Grid: override Bootstrap .row flex with proper grid */
/* Fix #1: equal 1fr/1fr columns — was 5fr/7fr (image too narrow, info too wide) */
.product-container.product-improved-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* Force grid children to fill their cells (override Bootstrap col-*) */
.product-container.product-improved-layout > .product-images-column,
.product-container.product-improved-layout > .product-info-column {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* Additional info spans full width */
.product-container.product-improved-layout > .product-additional-info {
  grid-column: 1 / -1;
}

@media (max-width: 991px) {
  .product-container.product-improved-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ══════════════════════════════════════════
   PRODUCT GALLERY
   ══════════════════════════════════════════ */

.product-gallery,
.images-container {
  position: sticky;
  top: var(--space-6);
}

/* Main Image */
.product-cover {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  aspect-ratio: 1;
  margin-bottom: var(--space-4);
}

.product-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: var(--space-4);
  transition: transform var(--duration-slow) var(--ease-out);
}

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

/* Zoom Indicator */
.product-cover .layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  cursor: zoom-in;
  border-radius: var(--radius-xl);
}

.product-cover:hover .layer {
  opacity: 1;
}

.product-cover .layer i,
.product-cover .layer .zoom-icon {
  color: var(--color-neutral-0);
  font-size: var(--text-3xl);
}

/* Product Flags on Image */
.product-cover .product-flags,
.product-images-column .product-flags {
  position: absolute !important;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 3;
}

.product-flag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.product-flag.new {
  background: var(--color-primary-500);
  color: var(--color-neutral-0);
}

.product-flag.on-sale,
.product-flag.discount {
  background: var(--color-accent-600);
  color: var(--color-neutral-0);
}

/* Thumbnails Gallery */
.product-images,
.js-qv-product-images {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding: var(--space-2) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-300) transparent;
}

.product-images::-webkit-scrollbar {
  height: 4px;
}

.product-images::-webkit-scrollbar-thumb {
  background: var(--color-primary-300);
  border-radius: var(--radius-full);
}

.thumb-container,
.product-images li {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 2px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  background: var(--color-neutral-50);
}

.thumb-container:hover,
.product-images li:hover {
  border-color: var(--color-primary-400);
  transform: scale(1.05);
}

.thumb-container.selected,
.thumb-container.active,
.product-images li.selected {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-200);
}

.thumb-container img,
.product-images li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
}

/* ══════════════════════════════════════════
   PRODUCT TITLE
   ══════════════════════════════════════════ */

h1.product-title-improved,
#product h1,
.product-information h1 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

/* ══════════════════════════════════════════
   PRODUCT META (reference, condition)
   ══════════════════════════════════════════ */

.product-meta-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.product-reference,
.product-condition,
.product-manufacturer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

.product-reference label,
.product-condition label,
.product-manufacturer label {
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
}

/* ══════════════════════════════════════════
   PRODUCT PRICES
   ══════════════════════════════════════════ */

/* Fix #2 continued: prices card — margin-bottom removed, flex gap handles spacing */
.product-prices {
  margin-bottom: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-xl);
}

.product-prices .current-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

/* Fix #4: price more prominent — was var(--text-3xl), now 3rem + weight 900 */
.product-prices .current-price-value,
.product-prices .price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-primary-600);
  line-height: 1;
}

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

.product-prices .discount {
  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-bold);
  color: var(--color-neutral-0);
  background: var(--color-accent-600);
  border-radius: var(--radius-md);
}

.product-prices .tax-shipping-delivery-label {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-top: var(--space-1);
}

.product-prices .product-unit-price {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
}

/* Availability badge inline */
.availability-badge-inline,
#product-availability {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
}

.availability-badge-inline.in-stock,
#product-availability.product-available {
  background: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid rgba(77, 124, 91, 0.2);
}

.availability-badge-inline.out-of-stock,
#product-availability.product-unavailable {
  background: var(--color-error-light);
  color: var(--color-error);
  border: 1px solid rgba(196, 69, 54, 0.2);
}

#product-availability.product-last-items {
  background: var(--color-warning-light);
  color: var(--color-warning);
  border: 1px solid rgba(201, 148, 46, 0.2);
}

/* ══════════════════════════════════════════
   PRODUCT VARIANTS (couleurs, tailles)
   ══════════════════════════════════════════ */

/* Fix #5: variants integrated into info flow — reduced margin, consistent with gap system */
.product-variants {
  margin-bottom: var(--space-3);
}

.product-variants > .product-variants-item {
  margin-bottom: var(--space-4);
}

.product-variants .control-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Color Swatches - pill style */
.product-variants .color-group,
.product-variants .input-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-variants .color-group li {
  list-style: none;
}

.product-variants .color-group input[type="radio"],
.product-variants .input-container input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Color swatch circles */
.product-variants .color-group .color {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-neutral-0);
  box-shadow: 0 0 0 1.5px var(--color-neutral-300);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.product-variants .color-group .color:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--color-primary-400);
}

.product-variants .color-group input:checked + .color {
  box-shadow: 0 0 0 2.5px var(--color-primary-500);
  transform: scale(1.08);
}

/* Text variant pills (couleur name, taille) */
.product-variants .input-container label,
.product-variants .color-group input[type="radio"] + span:not(.color) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  background: var(--color-neutral-0);
  border: 1.5px solid var(--color-neutral-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.product-variants .input-container label:hover,
.product-variants .color-group input[type="radio"] + span:not(.color):hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
}

.product-variants .input-container input:checked + label,
.product-variants .color-group input[type="radio"]:checked + span:not(.color) {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: var(--color-neutral-0);
  font-weight: var(--font-semibold);
}

/* Dropdown Select */
.product-variants select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-neutral-800);
  background: var(--color-neutral-0);
  border: 1.5px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.product-variants select:hover {
  border-color: var(--color-primary-400);
}

.product-variants select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* ══════════════════════════════════════════
   QUANTITY & ADD TO CART
   ══════════════════════════════════════════ */

/* Fix #6: quantity selector + CTA side by side on desktop */
.main-purchase-area {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.main-purchase-area .quantity-control {
  flex-shrink: 0;
}

.main-purchase-area .add-to-cart-wrapper {
  flex: 1;
}

@media (max-width: 575px) {
  .main-purchase-area {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Fix #6: quantity — margin-bottom removed, main-purchase-area flex handles layout */
.product-quantity {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: 0;
}

.product-quantity .qty {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.product-quantity .qty .btn-touchspin,
.product-quantity .bootstrap-touchspin-down,
.product-quantity .bootstrap-touchspin-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  background: var(--color-neutral-100);
  border: none;
  cursor: pointer;
  color: var(--color-neutral-600);
  font-size: var(--text-lg);
  transition: all var(--duration-fast) var(--ease-out);
}

.product-quantity .qty .btn-touchspin:hover,
.product-quantity .bootstrap-touchspin-down:hover,
.product-quantity .bootstrap-touchspin-up:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.product-quantity #quantity_wanted {
  width: 56px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-neutral-200);
  border-right: 1px solid var(--color-neutral-200);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
}

.product-quantity #quantity_wanted:focus {
  outline: none;
}

/* Fix #4: Add to Cart Button — min-height 56px, larger font, subtle shadow for prominence */
.product-add-to-cart .add-to-cart,
.product-quantity .add-to-cart,
.btn-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1;
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-neutral-0);
  background: var(--color-primary-500);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md), 0 4px 16px rgba(139, 115, 85, 0.35);
  width: 100%;
}

.product-add-to-cart .add-to-cart:hover,
.product-quantity .add-to-cart:hover,
.btn-add-to-cart:hover:not(:disabled) {
  background: var(--color-primary-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-primary);
}

.product-add-to-cart .add-to-cart:active,
.product-quantity .add-to-cart:active,
.btn-add-to-cart:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.product-add-to-cart .add-to-cart:disabled,
.product-quantity .add-to-cart:disabled {
  background: var(--color-neutral-300);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.product-add-to-cart .add-to-cart span,
.product-add-to-cart .add-to-cart i {
  position: relative;
  z-index: 1;
}

/* Add to cart success */
.add-to-cart.added {
  background: var(--color-success) !important;
}

/* Fix: remove excessive whitespace from hidden/empty elements */
.product-discounts:empty,
.product-discounts[style*="display: none"],
.product-discounts[style*="display:none"] {
  margin: 0 !important;
  padding: 0 !important;
}
.product-add-to-cart > div:not(.section-header):not(.main-purchase-area):not(.shipping-stock-info) {
  margin: 0 !important;
  padding: 0 !important;
}
.product-add-to-cart .product-info-grid:empty {
  display: none !important;
}
.product-add-to-cart {
  padding-bottom: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}
.main-purchase-area {
  margin-bottom: var(--space-4) !important;
}
.product-actions.js-product-actions {
  padding-bottom: var(--space-4) !important;
}
.product-conversion-points[style*="display: none"],
.product-conversion-points[style*="display:none"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════
   PRODUCT INFORMATION SECTION
   ══════════════════════════════════════════ */

.product-information {
  padding-top: var(--space-2);
}

/* Short Description — Fix #2: margin-bottom reduced, flex gap handles column spacing */
.product-description-short,
#product-description-short {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}

.product-description-short p {
  margin-bottom: var(--space-3);
}

.product-description-short ul {
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}

.product-description-short li {
  margin-bottom: var(--space-2);
}

.product-description-short li::marker {
  color: var(--color-primary-400);
}

/* ══════════════════════════════════════════
   PRODUCT ACTIONS (Wishlist, Share)
   ══════════════════════════════════════════ */

.product-actions button,
.product-actions a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.product-actions button:hover,
.product-actions a:hover {
  color: var(--color-primary-600);
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
}

/* Social sharing - hidden by default (custom section used instead) */
.social-sharing {
  display: none !important;
}

.social-sharing-section {
  display: block !important;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-neutral-200);
  margin-top: var(--space-4);
}

.social-sharing-section .social-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-3);
}

.social-sharing-section .social-buttons {
  display: flex;
  gap: var(--space-2);
}

.social-sharing-section .social-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.social-sharing-section .social-btn:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

/* Fix #7: hide "Donnez votre avis" button — no reviews yet, button looks abandoned */
.btn-comment.post-product-comment,
a.post-product-comment,
.productcomments-link {
  display: none !important;
}

/* ══════════════════════════════════════════
   PRODUCT TABS / DESCRIPTION
   ══════════════════════════════════════════ */

/* Fix #8: tabs container — light background + padding + stronger radius for visual depth */
.product-tabs,
.product-information .tabs {
  margin-top: var(--space-6);
  background: var(--color-neutral-50);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-sm);
  padding: 0;
}

.product-tabs .nav-tabs,
.tabs .nav-tabs,
#product .nav-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-neutral-200);
  padding: 0;
  background: var(--color-neutral-50);
  overflow-x: auto;
  margin-bottom: 0;
}

.product-tabs .nav-tabs .nav-item,
.tabs .nav-tabs .nav-item {
  list-style: none;
}

.product-tabs .nav-tabs .nav-link,
.tabs .nav-tabs .nav-link,
#product .nav-tabs .nav-link {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  text-decoration: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  background: transparent;
  transition: all var(--duration-fast) var(--ease-out);
}

.product-tabs .nav-tabs .nav-link:hover,
.tabs .nav-tabs .nav-link:hover,
#product .nav-tabs .nav-link:hover {
  color: var(--color-primary-600);
}

.product-tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.active,
#product .nav-tabs .nav-link.active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-500);
  background: var(--color-neutral-0);
}

/* Fix #8 continued: tab content with white background inside neutral-50 container */
.product-tabs .tab-content,
.tabs .tab-content,
#product .tab-content {
  padding: var(--space-5) var(--space-6);
  border-top: none;
  background: var(--color-neutral-0);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.product-tabs .tab-pane,
.tabs .tab-pane {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
}

.product-tabs .tab-pane h2,
.product-tabs .tab-pane h3 {
  font-family: var(--font-display);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-4);
}

.product-tabs .tab-pane p {
  margin-bottom: var(--space-4);
}

.product-tabs .tab-pane ul {
  padding-left: var(--space-5);
  margin-bottom: var(--space-4);
}

.product-tabs .tab-pane li {
  margin-bottom: var(--space-2);
}

/* ══════════════════════════════════════════
   PRODUCT FEATURES TABLE
   ══════════════════════════════════════════ */

.product-features {
  margin: var(--space-5) 0;
}

.product-features h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-4);
}

.data-sheet,
.product-features dl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-sheet dt,
.data-sheet .name {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-neutral-200);
}

.data-sheet dd,
.data-sheet .value {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  background: var(--color-neutral-0);
  border-bottom: 1px solid var(--color-neutral-200);
}

.data-sheet dt:last-of-type,
.data-sheet .name:last-child,
.data-sheet dd:last-of-type,
.data-sheet .value:last-child {
  border-bottom: none;
}

/* ══════════════════════════════════════════
   REASSURANCE SECTION
   ══════════════════════════════════════════ */

.product-reassurance {
  background: var(--color-neutral-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border: 1px solid var(--color-neutral-200);
}

.product-reassurance h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
}

.product-reassurance li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-neutral-700);
}

/* Hide native blockreassurance (duplicate) */
.blockreassurance_product,
.block-reassurance,
#blockreassurance,
div[class*='blockreassurance'] {
  display: none !important;
}

/* Fix #3: hide "Pourquoi choisir cette reference" — pushes CTA down, redundant with description */
.product-conversion-points {
  display: none !important;
}

/* Fix #3b: also hide any reassurance block inside product-info-column */
.product-info-column .product-reassurance {
  display: none !important;
}

/* ══════════════════════════════════════════
   RELATED PRODUCTS
   ══════════════════════════════════════════ */

.product-accessories,
.crossselling-products,
.viewed-products,
.featured-products {
  margin-top: var(--space-12);
  padding: var(--space-8);
  background: var(--color-neutral-50);
  border-radius: var(--radius-xl);
}

.product-accessories h2,
.crossselling-products h2,
.viewed-products h2,
.featured-products h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  text-align: center;
  margin-bottom: var(--space-8);
  position: relative;
}

.product-accessories h2::after,
.crossselling-products h2::after,
.viewed-products h2::after,
.featured-products h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-primary-400);
  border-radius: var(--radius-full);
  margin: var(--space-3) auto 0;
}

.product-accessories .products,
.crossselling-products .products,
.viewed-products .products,
.featured-products .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-5);
}

/* Related product miniatures */
.product-accessories .products .js-product,
.crossselling-products .products .js-product,
.viewed-products .products .js-product,
.featured-products .products .js-product {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

.product-accessories .thumbnail-container,
.crossselling-products .thumbnail-container,
.viewed-products .thumbnail-container,
.featured-products .thumbnail-container {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--color-neutral-0);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast), transform var(--duration-fast);
}

.product-accessories .thumbnail-container:hover,
.crossselling-products .thumbnail-container:hover,
.viewed-products .thumbnail-container:hover,
.featured-products .thumbnail-container:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-accessories .thumbnail-top,
.crossselling-products .thumbnail-top,
.viewed-products .thumbnail-top,
.featured-products .thumbnail-top {
  width: 100% !important;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-50);
  overflow: hidden;
}

.product-accessories .product-thumbnail img,
.crossselling-products .product-thumbnail img,
.viewed-products .product-thumbnail img,
.featured-products .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: var(--space-4);
}

.product-accessories .product-miniature .product-description,
.crossselling-products .product-miniature .product-description,
.viewed-products .product-miniature .product-description,
.featured-products .product-miniature .product-description {
  padding: var(--space-3) var(--space-3) var(--space-4);
  text-align: center;
  width: 100% !important;
}

.product-accessories .product-miniature .product-title a,
.crossselling-products .product-miniature .product-title a,
.viewed-products .product-miniature .product-title a,
.featured-products .product-miniature .product-title a {
  display: block;
  white-space: normal !important;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-neutral-800);
}

.product-accessories .product-price-and-shipping,
.crossselling-products .product-price-and-shipping,
.viewed-products .product-price-and-shipping,
.featured-products .product-price-and-shipping {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-primary-500);
}

/* ══════════════════════════════════════════
   LAYOUT REORDER (Cart button near price)
   ══════════════════════════════════════════ */

/* Fix #2: tighter gap between info-column cards — was implicit var(--space-5/6) margins */
.product-info-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-info-column .product-information {
  display: flex;
  flex-direction: column;
}

.product-information .product-actions {
  order: -1;
  margin-bottom: var(--space-5);
}

.product-information > .product-description {
  order: 0;
}

.product-information .tabs {
  order: 1;
}

/* ══════════════════════════════════════════
   HIDE DUPLICATES & CLEANUP
   ══════════════════════════════════════════ */

/* Hide skip link off-screen */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: var(--space-4);
  background: var(--color-primary-500);
  color: white;
  z-index: 9999;
}

/* Hide duplicate share list */
.share-buttons-list {
  display: none !important;
}

/* Hide ps_checkout payment logos duplicate */
#ps_checkout-payment-method-logos,
.ps_checkout-payment-method-logos,
[id*='ps_checkout'][id*='payment'],
.ps-checkout-payment-method-logos {
  display: none !important;
}

/* Policy sections */
.product-quantities,
.product-additional-info p {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  margin: var(--space-2) 0;
}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 991px) {
  .product-gallery,
  .images-container {
    position: static;
  }

  .product-cover {
    border-radius: var(--radius-lg);
  }

  h1.product-title-improved,
  #product h1 {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }

  .product-prices .current-price-value {
    font-size: var(--text-2xl);
  }

  .product-quantity {
    flex-direction: column;
    align-items: stretch;
  }

  .product-quantity .qty {
    justify-content: center;
  }
}

@media (max-width: 575px) {
  #product {
    padding: var(--space-4) 0 var(--space-8);
  }

  .product-tabs .nav-tabs,
  .tabs .nav-tabs {
    padding: 0;
  }

  .product-tabs .nav-tabs .nav-link,
  .tabs .nav-tabs .nav-link {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }

  .product-tabs .tab-content,
  .tabs .tab-content {
    padding: var(--space-4);
  }

  .data-sheet {
    grid-template-columns: 1fr;
  }

  .data-sheet dt,
  .data-sheet .name {
    border-bottom: none;
    padding-bottom: var(--space-1);
  }

  .data-sheet dd,
  .data-sheet .value {
    padding-top: 0;
  }
}

/* ══════════════════════════════════════════
   ANIMATIONS (reduced motion aware)
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .product-cover:hover img,
  .product-prices:hover .current-price-value,
  .add-to-cart.added {
    animation: none;
    transform: none;
    transition: none;
  }
}

/* ===== main.css (règles propres, hors @import) ===== */
body::before{content:'';position:fixed;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:0.015;z-index:-1}