/* Font Awesome — solid (UI) + duotone (product / category) */

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('../webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 6 Duotone';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('../webfonts/fa-duotone-900.woff2') format('woff2');
}

:root {
  /* Do not force brown — components set their own duotone colors */
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 0.45;
}

.fa-solid,
.fas,
.fa-duotone,
.fad {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal !important;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  speak: never;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.fa-solid,
.fas {
  font-family: 'Font Awesome 6 Pro' !important;
  font-weight: 900 !important;
}

.fa-duotone,
.fad {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-family: 'Font Awesome 6 Duotone' !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  vertical-align: -0.125em;
  /* Lock both glyph layers into the same box (avoids RTL/static-position drift) */
}

/*
 * FA Duotone: ::before = primary, ::after = secondary.
 * Both must share the exact same absolute box so layers never drift apart
 * (static-position absolute + RTL ancestors / transforms often desync them).
 */
.fa-duotone::before,
.fad::before,
.fa-duotone::after,
.fad::after {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  text-align: center;
  display: block;
}

.fa-duotone::before,
.fad::before {
  color: var(--fa-primary-color, inherit);
  opacity: var(--fa-primary-opacity, 1);
  z-index: 1;
}

.fa-duotone::after,
.fad::after {
  color: var(--fa-secondary-color, inherit);
  opacity: var(--fa-secondary-opacity, 0.45);
  z-index: 0;
}

/* Shared icon glyphs (::before for solid + duotone primary) */
.fa-plus::before { content: '\2b'; }
.fa-minus::before { content: '\f068'; }
.fa-xmark::before { content: '\f00d'; }
.fa-clipboard-list::before { content: '\f46d'; }
.fa-mug-hot::before { content: '\f7b6'; }
.fa-coffee::before { content: '\f0f4'; }
.fa-mug::before { content: '\f874'; }
.fa-glass::before { content: '\f804'; }
.fa-blender::before { content: '\f517'; }
.fa-leaf::before { content: '\f06c'; }
.fa-cake-candles::before { content: '\f1fd'; }
.fa-egg::before { content: '\f7fb'; }
.fa-ice-cream::before { content: '\f810'; }
.fa-snowflake::before { content: '\f2dc'; }
.fa-trash::before { content: '\f1f8'; }

/* Duotone secondary layers */
.fa-duotone.fa-plus::after,
.fad.fa-plus::after { content: '\2b\2b'; }
.fa-duotone.fa-minus::after,
.fad.fa-minus::after { content: '\f068\f068'; }
.fa-duotone.fa-xmark::after,
.fad.fa-xmark::after { content: '\f00d\f00d'; }
.fa-duotone.fa-clipboard-list::after,
.fad.fa-clipboard-list::after { content: '\f46d\f46d'; }
.fa-duotone.fa-mug-hot::after,
.fad.fa-mug-hot::after { content: '\f7b6\f7b6'; }
.fa-duotone.fa-coffee::after,
.fad.fa-coffee::after { content: '\f0f4\f0f4'; }
.fa-duotone.fa-mug::after,
.fad.fa-mug::after { content: '\f874\f874'; }
.fa-duotone.fa-glass::after,
.fad.fa-glass::after { content: '\f804\f804'; }
.fa-duotone.fa-blender::after,
.fad.fa-blender::after { content: '\f517\f517'; }
.fa-duotone.fa-leaf::after,
.fad.fa-leaf::after { content: '\f06c\f06c'; }
.fa-duotone.fa-cake-candles::after,
.fad.fa-cake-candles::after { content: '\f1fd\f1fd'; }
.fa-duotone.fa-egg::after,
.fad.fa-egg::after { content: '\f7fb\f7fb'; }
.fa-duotone.fa-ice-cream::after,
.fad.fa-ice-cream::after { content: '\f810\f810'; }
.fa-duotone.fa-snowflake::after,
.fad.fa-snowflake::after { content: '\f2dc\f2dc'; }
.fa-duotone.fa-trash::after,
.fad.fa-trash::after { content: '\f1f8\f1f8'; }