.p-request-link{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 0;flex-shrink:0;font-size:12px;line-height:1.5;font-weight:600;color:#2563eb;text-decoration:none;white-space:nowrap}
.p-request-link:hover{text-decoration:underline;text-underline-offset:3px;color:#1d4ed8}.p-request-link:focus-visible{outline:2px solid #0284c7;outline-offset:4px;border-radius:3px}.p-request-link[data-on-dark]{color:#a5f3fc}
/* Shared with home: keep classnames stable to swap cards in/out freely */
.p-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e8edf3; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; }
.p-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: 0 16px 32px -18px rgba(37,99,235,0.42), 0 6px 14px -10px rgba(15,23,42,0.12); }
.p-card:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.p-card-media { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg,#fbfdff 0%,#eef3f9 100%); overflow: hidden; }
.p-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 11px; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.p-card:hover .p-card-media img { transform: scale(1.07); }
.p-card-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.p-card-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; }
.p-card-name { font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.p-search-hit { padding: 0 .08em; border-radius: 2px; background: #fef08a; color: inherit; }
.p-card-meta { font-size: 11px; color: #94a3b8; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.p-card-price { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.p-card-price strong { font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
.p-card-go { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: #eff6ff; color: #2563eb; flex-shrink: 0; transition: background .15s, color .15s, transform .15s; }
.p-card:hover .p-card-go { background: #2563eb; color: #fff; transform: translateX(1px); }

/* A page change lands on the first product, below the sticky header/tools. */
[data-catalog-grid], [data-catalog-table-wrap] { scroll-margin-top: 150px; }
@media (min-width: 1024px) { [data-catalog-grid], [data-catalog-table-wrap] { scroll-margin-top: 132px; } }

/* Detailed table (view=table): dense rows to compare references, models,
   quality, lead time and price, and to order from the list. Phones and tablets
   scroll it sideways under a pinned product column; on desktop it fits the
   column and its header row stays under the site header. */
.p-table-wrap { position: relative; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.p-table { width: 100%; min-width: 840px; border-collapse: separate; border-spacing: 0; font-size: 13px; color: #334155; }
.p-table thead th { position: sticky; top: 0; z-index: 3; padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.p-table thead th:first-child { border-top-left-radius: 11px; }
.p-table thead th:last-child { border-top-right-radius: 11px; }
.p-table-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; text-transform: inherit; letter-spacing: inherit; }
.p-table-sort:hover, .p-table-sort[data-active="1"] { color: #1d4ed8; }
.p-table-sort:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 3px; }
.p-table-sort-icon { opacity: .45; }
.p-table-sort[data-active="1"] .p-table-sort-icon { opacity: 1; }
.p-table tbody th, .p-table tbody td { padding: 10px 12px; border-bottom: 1px solid #eef2f7; background: #fff; text-align: left; vertical-align: middle; font-weight: 400; transition: background .12s; }
.p-table tbody tr:last-child > th, .p-table tbody tr:last-child > td { border-bottom: 0; }
.p-table tbody tr:hover > th, .p-table tbody tr:hover > td { background: #f8fbff; }
.p-t-product { min-width: 240px; }
.p-t-product-inner { display: flex; align-items: center; gap: 12px; }
.p-t-thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(135deg,#fbfdff,#eef3f9); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.p-t-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.p-t-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-t-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.p-t-best { padding: 0 6px; border-radius: 999px; background: #fef3c7; color: #92400e; letter-spacing: 0; text-transform: none; }
.p-t-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #0f172a; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-t-name:hover { color: #1d4ed8; text-decoration: underline; }
.p-t-name:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 3px; }
.p-t-sub { font-size: 11.5px; color: #64748b; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.p-t-compat { min-width: 130px; line-height: 1.35; color: #475569; }
.p-t-more { font-weight: 600; color: #2563eb; white-space: nowrap; }
.p-t-quality { min-width: 96px; line-height: 1.35; }
.p-t-avail { white-space: nowrap; }
.p-t-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 11.5px; font-weight: 600; }
.p-t-pill[data-tone="limited"] { background: #fffbeb; color: #b45309; }
.p-t-pill[data-tone="preparing"] { background: #f1f5f9; color: #475569; }
.p-t-pill[data-tone="out"] { background: #fef2f2; color: #b91c1c; }
.p-table .p-t-price, .p-table .p-t-h-price { text-align: right; }
.p-table .p-t-price { white-space: nowrap; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; font-variant-numeric: tabular-nums; }
.p-card-price strong.p-price-pending, .p-table td.p-t-price.p-price-pending { font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: #64748b; white-space: normal; }
.p-t-h-price .p-table-sort { justify-content: flex-end; }
.p-table .p-t-cart { width: 1%; white-space: nowrap; text-align: right; }
.p-t-add { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.p-t-qty { width: 3.2em; height: 34px; padding: 0 4px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #0f172a; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.p-t-qty::-webkit-outer-spin-button, .p-t-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.p-t-qty:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px #dbeafe; }
.p-t-add-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; }
.p-t-add-btn:hover { background: #1d4ed8; }
.p-t-add-btn:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.p-t-view { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; color: #334155; font-size: 13px; font-weight: 600; text-decoration: none; }
.p-t-view:hover { border-color: #60a5fa; color: #1d4ed8; background: #eff6ff; }
.p-t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1023px) {
  .p-table .p-t-product, .p-table .p-t-h-product { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 #e2e8f0; }
  .p-table thead .p-t-h-product { z-index: 4; }
  .p-t-product { min-width: 210px; max-width: 230px; }
  .p-t-name { white-space: normal; }
}
@media (min-width: 1024px) {
  .p-table-wrap { overflow: visible; }
  .p-table { min-width: 0; }
  .p-table thead th { top: 112px; }
  .p-table tbody th, .p-table tbody td { padding: 9px 10px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .p-t-add-btn { padding: 0; width: 34px; }
  .p-t-add-btn span { display: none; }
  .p-t-compat { min-width: 110px; }
}

/* List view keeps the same card content and URL semantics, but gives each
   product a horizontal, scan-friendly row. */
.p-product-list .p-card { display: grid; grid-template-columns: 176px minmax(0,1fr); min-height: 176px; }
.p-product-list .p-card-media { aspect-ratio: auto; min-height: 176px; }
.p-product-list .p-card-body { min-width: 0; padding: 18px 20px; gap: 5px; }
.p-product-list .p-card-name { min-height: 0; font-size: 15px; }
.p-product-list .p-card-meta { -webkit-line-clamp: 2; }
.p-product-list .p-card-price { padding-top: 12px; }

.p-badge { position: absolute; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3.5px 8px; border-radius: 999px; line-height: 1; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
.p-badge-cat { top: 9px; left: 9px; background: rgba(255,255,255,0.94); color: #475569; backdrop-filter: blur(4px); }
.p-badge-best { top: 9px; right: 9px; background: linear-gradient(135deg,#f59e0b,#f97316); color: #fff; }
.p-badge-stock { bottom: 9px; left: 9px; background: #fff; border: 1px solid #e2e8f0; color: #64748b; text-transform: none; font-size: 10px; letter-spacing: 0; box-shadow: none; }
.p-badge-stock.in-stock { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.p-badge-stock.limited { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.p-badge-stock.today { color: #3730a3; border-color: #c7d2fe; background: #eef2ff; }

/* Sidebar facets: compact by default, searchable when the option set is long.
   Selected values are sorted into the visible group by the renderer, so a
   deep selection never disappears behind "Voir plus". */
.p-filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.p-filter-list label { display: flex; align-items: center; gap: 8px; min-height: 31px; margin: 0; padding: 4px 3px; border-radius: 7px; font-size: 13px; color: #334155; cursor: pointer; transition: background .12s ease; }
.p-filter-list label:hover { background: #f8fafc; }
.p-filter-list [data-selected="1"] label { background: #eff6ff; }
.p-filter-list input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.p-filter-list input[type=checkbox]:checked ~ [data-facet-option-label] { color: #1d4ed8; font-weight: 600; }
.p-filter-count { margin-left: auto; padding-left: 4px; font-size: 10.5px; font-weight: 500; color: #94a3b8; font-variant-numeric: tabular-nums; }
.p-model-picker { position: relative; }
.p-model-picker[data-enhanced] { margin-top: 8px; }
.p-model-picker:not([data-enhanced]) .p-model-trigger, .p-model-picker:not([data-enhanced]) .p-model-panel { display: none; }
.p-model-picker[data-enhanced] .p-model-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.p-model-trigger { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid #dbe3ed; border-radius: 7px; background: #fff; color: #334155; font-size: 13px; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.p-model-trigger:hover { border-color: #93c5fd; }
.p-model-trigger:focus-visible, .p-model-trigger[aria-expanded="true"] { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 2px #dbeafe; }
.p-model-trigger svg { flex: 0 0 auto; margin-left: auto; color: #94a3b8; transition: transform .15s; }
.p-model-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.p-model-picker[data-has-value="1"] .p-model-current { margin-right: 26px; }
.p-model-clear { position: absolute; top: 17px; right: 30px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 999px; background: #eff6ff; color: #1d4ed8; cursor: pointer; transition: background .12s, color .12s; }
.p-model-clear[hidden] { display: none; }
.p-model-clear:hover { background: #dbeafe; color: #1e3a8a; }
.p-model-clear:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }
.p-model-picker:not([data-enhanced]) .p-model-clear { display: none; }
.p-model-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; }
.p-model-current[data-selected="1"] { color: #1d4ed8; font-weight: 600; }
.p-model-panel { margin-top: 6px; padding: 6px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.p-model-panel .p-facet-search { margin-top: 0; }
.p-model-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.p-model-group { position: sticky; top: 0; z-index: 1; padding: 6px 4px 3px; background: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.p-model-list [role=option] { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 6px; border-radius: 6px; font-size: 13px; color: #334155; cursor: pointer; }
.p-model-list [role=option][data-active="1"] { background: #f1f5f9; }
.p-model-list [role=option][aria-selected="true"] { color: #1d4ed8; font-weight: 600; background: #eff6ff; }
li.p-model-brand { position: sticky; top: 0; z-index: 1; background: #fff; font-weight: 600; color: #0f172a; }
.p-model-list li.p-model-brand[data-active="1"] { background: #f1f5f9; }
.p-model-brand svg { flex: 0 0 auto; color: #94a3b8; transition: transform .15s; }
.p-model-brand[aria-expanded="true"] svg { transform: rotate(90deg); color: #2563eb; }
.p-model-brand[aria-expanded="true"] ~ [role=option]:not(.p-model-brand) { padding-left: 24px; }
.p-model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-facet-parent { flex-shrink: 0; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 3px; border-radius: 7px; transition: background .12s ease; }
.p-facet-parent:hover { background: #f8fafc; }
.p-facet-parent input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.p-facet-parent button { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 500; color: #0f172a; text-align: left; cursor: pointer; }
.p-facet-glyph { flex: 0 0 auto; color: #94a3b8; transition: color .12s; }
.p-filter-list label:hover .p-facet-glyph, .p-facet-parent button:hover .p-facet-glyph { color: #475569; }
.p-filter-list [data-selected="1"] .p-facet-glyph, .p-facet-parent[data-selected="1"] .p-facet-glyph { color: #2563eb; }
.p-facet-parent [data-facet-parent-label] { line-height: 1.3; hyphens: auto; }
.p-facet-parent[data-selected="1"] button { color: #1d4ed8; }
.p-facet-parent button .p-filter-count { margin-left: auto; }
.p-facet-parent button .p-facet-chevron { flex: 0 0 auto; width: 16px; height: 16px; padding: 3px; border-radius: 999px; color: #94a3b8; transition: transform .15s, background .12s, color .12s; }
.p-facet-parent button:hover .p-facet-chevron { background: #e2e8f0; color: #475569; }
.p-facet-parent[data-shown-open="1"] button .p-facet-chevron, .p-facet-parent button[aria-expanded="true"] .p-facet-chevron { transform: rotate(90deg); color: #2563eb; }
.p-filter-list [data-family] { margin-left: 9px; padding-left: 4px; border-left: 1px solid #e2e8f0; }
.p-filter-list [data-family] label { color: #475569; }
.p-filter-list[data-families] [data-facet-option] .p-filter-count { margin-right: 22px; }
.p-filter-list [data-family][data-selected="1"] { border-left-color: #93c5fd; }
.p-state-list { display: flex; flex-direction: column; gap: 1px; }
.p-state-option { display: flex; align-items: center; gap: 8px; min-height: 31px; padding: 4px 3px; border-radius: 7px; font-size: 13px; color: #334155; text-decoration: none; transition: background .12s ease; }
.p-state-option:hover { background: #f8fafc; }
.p-state-option[data-active="1"] { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.p-state-radio { flex: 0 0 auto; width: 14px; height: 14px; border: 1px solid #94a3b8; border-radius: 999px; background: #fff; }
.p-state-option[data-active="1"] .p-state-radio { border-color: #2563eb; box-shadow: inset 0 0 0 3px #fff; background: #2563eb; }
/* « Tout replier » sits in the Catégorie header, just before the selection
   count the script appends; hidden while the whole facet is folded. */
.p-tree-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; padding: 2px 6px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: normal; text-transform: none; color: #2563eb; background: none; border: 0; cursor: pointer; }
.p-tree-toggle ~ [data-facet-selection-count] { margin-left: 0; }
details:not([open]) > summary .p-tree-toggle { display: none; }
.p-tree-toggle:hover { background: #eff6ff; }
.p-tree-toggle:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.p-tree-toggle[data-state="open"] [data-tree-expand], .p-tree-toggle[data-state="open"] [data-tree-icon-expand],
.p-tree-toggle[data-state="closed"] [data-tree-collapse], .p-tree-toggle[data-state="closed"] [data-tree-icon-collapse] { display: none; }
.p-facet-swatch { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.18); }
.p-facet-brand-mark { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; }
.p-facet-brand-mark[data-logo="1"] { background: #fff; }
.p-facet-brand-mark[data-logo="0"] { background: color-mix(in srgb, var(--facet-brand-color) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--facet-brand-color) 20%, #fff); }
.p-facet-brand-mark img { width: 18px; height: 18px; object-fit: contain; display: block; }
.p-facet-brand-fallback { color: var(--facet-brand-color); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.p-facet-search { position: relative; margin-top: 7px; }
.p-facet-search svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.p-facet-search input { width: 100%; border: 1px solid #dbe3ed; border-radius: 6px; background: #f8fafc; color: #334155; font-size: 12px; line-height: 1.25rem; padding: 5px 8px 5px 27px; outline: none; }
.p-facet-search input:focus { border-color: #60a5fa; background: #fff; box-shadow: 0 0 0 2px #dbeafe; }
.p-facet-search input::-webkit-search-cancel-button { cursor: pointer; }
[data-facet-list][data-expanded="0"]:not([data-searching="1"]) [data-facet-option][data-overflow="1"] { display: none; }
.p-facet-toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; border: 0; padding: 3px 0; background: transparent; color: #2563eb; font-size: 11.5px; font-weight: 650; cursor: pointer; }
.p-facet-toggle:hover { color: #1d4ed8; text-decoration: underline; }
.p-facet-toggle svg { transition: transform .15s ease; }
.p-facet-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.p-facet-empty { margin: 8px 0 2px; font-size: 12px; color: #64748b; }
.p-facet-scroll { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #94a3b8 #f1f5f9; padding-right: 4px; }
.p-facet-scroll::-webkit-scrollbar { width: 8px; }
.p-facet-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border: 2px solid #f8fafc; border-radius: 999px; }
.p-facet-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 999px; }
.p-filter-group summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #334155; }
.p-filter-group summary::-webkit-details-marker { display: none; }
.p-filter-group summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); transition: transform .15s; }
.p-filter-group[open] summary::after { transform: rotate(-135deg); }
.p-filter-group + .p-filter-group { border-top: 1px solid #e2e8f0; padding-top: 6px; margin-top: 6px; }

.p-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; padding: 4px 9px 4px 10px; border-radius: 999px; text-decoration: none; transition: background .12s; }
.p-pill:hover { background: #dbeafe; }
.p-pill svg { opacity: 0.7; }

/* Device tabs — primary nav (Tous / Téléphones / Tablettes) above the category
   strip. Full-width baseline; the active tab carries a thick underline. */
.p-devtabs { display: flex; align-items: stretch; gap: 4px; border-bottom: 2px solid #e2e8f0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.p-devtabs::-webkit-scrollbar { display: none; }
.p-devtab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 9px; margin-bottom: -2px; font-size: 13.5px; font-weight: 600; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .12s, border-color .12s; }
.p-devtab:hover { color: #1d4ed8; }
.p-devtab[data-active="1"] { color: #0f172a; font-weight: 800; border-bottom-color: #2563eb; }
.p-devtab-count { font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 7px; line-height: 1.4; }
.p-devtab[data-active="1"] .p-devtab-count { background: #dbeafe; color: #1d4ed8; }

/* Results header (one line on desktop): segmented device tabs, count, then
   categories, sort and view; active filters wrap onto a line of their own. */
.p-results-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.p-results-head .p-devtabs { flex: 0 1 auto; min-width: 0; gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: #eef2f7; }
.p-results-head .p-devtab { padding: 5px 10px; margin: 0; border: 0; border-radius: 8px; font-size: 13px; }
.p-results-head .p-devtab[data-active="1"] { background: #fff; font-weight: 700; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.p-results-head .p-devtab-count { padding: 1px 6px; }
.p-results-count { font-size: 12.5px; color: #64748b; white-space: nowrap; }
.p-results-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.p-results-views { display: none; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid #e2e8f0; }
.p-results-head .p-active-filters { flex: 1 0 100%; margin: 0; }
.p-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 640px) { .p-results-views { display: inline-flex; } }
@media (max-width: 639px) {
  .p-results-head .p-devtabs { flex-basis: 100%; }
  /* Phones: the sticky "Filtres" button right above opens the same panel. */
  .p-results-head [data-action="goto-categories"] { display: none; }
  .p-results-actions select { max-width: 170px; }
}
/* The count, categories button and sort/view move as one group: beside the
   tabs or strip when there is room, otherwise on a line of their own. */
.p-results-tools { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
/* Category strip in the header: one line; scrolls sideways when too long. */
.p-results-head .p-strip { position: relative; flex: 0 1 auto; width: max-content; max-width: 100%; min-width: 0; display: flex; align-items: center; }
.p-results-head .p-strip[hidden] { display: none !important; }
.p-results-head .p-strip > nav { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; min-width: 0; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.p-results-head .p-strip > nav::-webkit-scrollbar { display: none; }
.p-results-head .p-strip .p-cat-chip { flex: 0 0 auto; white-space: nowrap; }
.p-strip[data-overflow-end="1"] > nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.p-strip[data-overflow-start="1"] > nav { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.p-strip[data-overflow-start="1"][data-overflow-end="1"] > nav { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.p-strip-arrow { position: absolute; top: 50%; z-index: 2; width: 28px; height: 28px; margin-top: -14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #334155; box-shadow: 0 2px 6px rgba(15,23,42,.14); cursor: pointer; }
.p-strip-arrow:hover { border-color: #60a5fa; color: #1d4ed8; }
.p-strip-arrow[data-strip-prev] { left: -6px; }
.p-strip-arrow[data-strip-next] { right: -6px; }
.p-strip-arrow[hidden] { display: none; }
@media (hover: none) { .p-strip-arrow { display: none !important; } }
/* A live update: the grid dims and the count spins until the answer lands. */
[data-catalog-grid][aria-busy="true"] { opacity: .45; transition: opacity .15s ease .12s; }
.p-results-head:has([data-catalog-status][data-loading="1"]) .p-results-count::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 7px; vertical-align: -1px; border: 2px solid #cbd5e1; border-top-color: #2563eb; border-radius: 50%; animation: p-results-spin .7s linear infinite; }
@keyframes p-results-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p-results-head:has([data-catalog-status][data-loading="1"]) .p-results-count::after { animation: none; } }

/* Category filter — secondary tab strip. Same link behavior as the old pill
   chips, restyled as light text tabs with an underline on the active one so
   the row reads as tabs but stays clearly subordinate to the device tabs. */
.p-cattabs { gap: 14px; }
.p-cat-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 2px 7px; border-bottom: 2px solid transparent; border-radius: 0; text-decoration: none; color: #475569; background: transparent; transition: border-color .12s, color .12s; }
.p-cat-chip:hover { color: #1d4ed8; }
.p-cat-chip[data-active="1"] { color: #1d4ed8; border-bottom-color: #2563eb; }
.p-cat-chip-count { font-size: 10.5px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1.5px 6px; line-height: 1.4; }
.p-cat-chip[data-active="1"] .p-cat-chip-count { background: #dbeafe; color: #1d4ed8; }

/* Compact, swipeable single-row category bar. Accessoires has ~27 categories;
   grouped into universes + stacked they pushed the product grid below the
   fold. One scrollable row keeps every filter one click away but tiny. */
.p-cat-scroll { display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 1px 0 9px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; -webkit-overflow-scrolling: touch; }
.p-cat-scroll::-webkit-scrollbar { height: 6px; }
.p-cat-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.p-cat-scroll::-webkit-scrollbar-track { background: transparent; }
.p-cat-scroll > .p-cat-chip { flex: 0 0 auto; white-space: nowrap; }

/* Global search has dozens of categories; keep shortcuts above the products
   and use the searchable sidebar for the complete list. */

/* Filters. Desktop (≥lg): a static sticky sidebar card in the grid's left
   column. Mobile (<lg): an off-canvas side panel that slides in from the right
   when the "Filtres" button is tapped, over a dimmed backdrop, with the page
   scroll locked. A single <form data-filter-form> serves both breakpoints —
   only its positioning changes — so the submit script keeps working unchanged.
   Raw CSS (not utilities) so the per-route bext-css extractor can't drop the
   load-bearing positioning. */
[data-filters-backdrop] {
  position: fixed; inset: 0; z-index: 55; background: rgba(2, 6, 23, 0.45);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
[data-filters-backdrop][data-open="1"] { opacity: 1; pointer-events: auto; }
/* Result announcements remain available to assistive technology without
   repeating the visible result count after every selection. */
[data-catalog-status] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[data-catalog-status]:focus { outline: none; }
[data-filters-panel] {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: 88%; max-width: 360px; background: #fff;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -12px 0 32px -12px rgba(2, 6, 23, 0.35);
}
[data-filters-panel][data-open="1"] { transform: translateX(0); }
[data-filters-head] { flex: 0 0 auto; }
[data-filter-form] {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden;
}
[data-filters-scroll] {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 1rem;
}
[data-filters-foot] { flex: 0 0 auto; }
.p-mobile-tools { display: none; }
[data-filter-discard] { border: 0; background: transparent; color: #1d4ed8; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 4px 0; }
[data-facet-selection-count] { margin-left: auto; margin-right: 10px; border-radius: 999px; padding: 2px 7px; background: #dbeafe; color: #1d4ed8; font-size: 11px; letter-spacing: normal; }
@media (max-width: 1023.98px) {
  .p-mobile-tools { display: flex; gap: 8px; position: sticky; top: var(--catalog-tools-top, 64px); z-index: 20; padding: 8px 0; margin-bottom: 12px; background: #fff; box-shadow: 0 5px 10px -10px #334155; }
  .p-mobile-tools button { min-height: 48px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #334155; display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 14px; cursor: pointer; }
  .p-mobile-tools button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  [data-action=open-filter-search] { flex: 1; min-width: 0; text-align: left; }
  [data-action=open-filter-search] svg { flex-shrink: 0; color: #64748b; }
  [data-mobile-query] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .p-mobile-filter-button { flex: 0 0 auto; justify-content: center; font-weight: 650; }
  .p-mobile-filter-label { display: flex; flex-direction: column; gap: 2px; line-height: 16px; }
  .p-mobile-filter-button [data-filter-pending-badge] { font-size: 10px; line-height: 10px; }
  [data-filter-pending] { flex-shrink: 0; }
  [data-filter-pending] span { display: block; }
  .p-pill, .p-cat-chip { min-height: 40px; }
  [data-filters-panel] { top: var(--filters-top, 0px); bottom: auto; height: var(--filters-height, 100dvh); }
  [data-filters-head] { padding-top: env(safe-area-inset-top, 0px); min-height: 56px; height: auto; }
  [data-filters-head] button, [data-filters-foot] button, [data-filters-foot] a { min-height: 44px; min-width: 44px; }
  [data-filters-foot] { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  [data-filters-panel] input:not([type=checkbox]):not([type=radio]):not([type=hidden]), [data-filters-panel] select { font-size: 16px; min-height: 44px; min-width: 0; }
  [data-stock-facet] label { min-height: 44px; }
  .p-filter-list label, .p-facet-parent, .p-state-option, .p-model-trigger, .p-model-list [role=option], .p-filter-group summary, .p-facet-toggle { min-height: 44px; }
  .p-model-clear { top: 22px; width: 32px; height: 32px; right: 28px; }
  .p-model-picker[data-has-value="1"] .p-model-current { margin-right: 36px; }
  .p-filter-list input[type=checkbox] { width: 18px; height: 18px; }
  .p-facet-scroll { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  [data-filters-panel] { transition: none; }
}
@media (min-width: 1024px) {
  /* Dissolve the off-canvas chrome back into a normal sticky sidebar card.
     The card keeps the flex column of the mobile drawer so that, when the
     facets are taller than the viewport, the panel scrolls INSIDE its own
     box instead of forcing a trip to the bottom of the page to reach the
     category list (#1297). */
  [data-filters-backdrop], [data-filters-head], [data-filters-open] { display: none !important; }
  [data-filters-panel] {
    position: sticky; top: 6rem; z-index: auto;
    width: auto; max-width: none; transform: none; box-shadow: none;
    max-height: calc(100vh - 7.5rem);
    border: 1px solid #e2e8f0; border-radius: 0.75rem; overflow: hidden;
  }
  .p-facet-scroll { max-height: 320px; }
}
[data-filters-scroll] {
  scrollbar-width: thin; scrollbar-color: #94a3b8 #f1f5f9;
}
[data-filters-scroll]::-webkit-scrollbar { width: 9px; }
[data-filters-scroll]::-webkit-scrollbar-thumb { background: #94a3b8; border: 2px solid #fff; border-radius: 999px; }
[data-filters-scroll]::-webkit-scrollbar-track { background: #f1f5f9; }

/* Chip rows (category filters + active filter pills). On phones they stay a
   single swipeable row so the product grid keeps its place near the top; on
   lg+ there's room to wrap onto multiple lines (no sideways scroll). */
.p-chiprow { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0 0 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; -webkit-overflow-scrolling: touch; }
.p-chiprow::-webkit-scrollbar { height: 6px; }
.p-chiprow::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.p-chiprow::-webkit-scrollbar-track { background: transparent; }
.p-chiprow > * { flex: 0 0 auto; white-space: nowrap; }
.p-active-filters { margin-bottom: 16px; }
@media (min-width: 1024px) { .p-chiprow { flex-wrap: wrap; overflow: visible; padding-bottom: 0; } }

/* Product cards: drop the redundant category badge and shrink the rest on
   phones so the small 2-col thumbnails stay clean. */
@media (max-width: 639px) {
  .p-badge-cat { display: none; }
  .p-badge { font-size: 9px; padding: 3px 7px; }
  .p-product-list .p-card { grid-template-columns: 112px minmax(0,1fr); min-height: 120px; }
  .p-product-list .p-card-media { min-height: 120px; }
  .p-product-list .p-card-body { padding: 10px 12px; gap: 3px; }
  .p-product-list .p-card-name { font-size: 13px; }
  .p-product-list .p-card-price { padding-top: 8px; }
  .p-product-list .p-card-price strong { font-size: 14px; }
}