/* =============================================================
   sneaking.fr — additional styles for app pages
   ============================================================= */

/* Forms */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 480px;
    margin: 32px auto;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.form-grid--wide { max-width: 880px; }
.form-grid--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form-grid--two { grid-template-columns: 1fr; } }
.form-grid label { font-weight: 600; font-size: 13px; }
.form-grid input,
.form-grid select,
.form-grid textarea,
.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font: inherit;
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus,
.form-control:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15,15,16,.06); }
.form-grid textarea,
textarea.form-control { min-height: 140px; resize: vertical; }
input[type="hidden"].form-control { display: none; }
.form-grid .full { grid-column: 1 / -1; }
.form-error {
    color: var(--hot);
    font-size: 12.5px;
    margin-top: 4px;
}
.form-help { font-size: 12.5px; color: var(--muted); }
.form-msg {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 13.5px;
}
.form-msg--success { background: #ECFDF5; color: #065F46; }
.form-msg--error   { background: var(--hot-soft); color: var(--hot); }

/* Auth */
.auth-card {
    max-width: 440px;
    margin: clamp(40px, 8vw, 100px) auto;
    padding: 40px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.auth-card h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.auth-card p.sub { color: var(--muted); margin-top: 6px; margin-bottom: 24px; }
.auth-card form > * + * { margin-top: 14px; }
.auth-card .btn--solid { width: 100%; justify-content: center; padding: 14px; }
.auth-card .auth-card__alt {
    margin-top: 22px;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
}
.auth-card .auth-card__alt a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Generic content */
.prose { max-width: 760px; margin: 0 auto; padding: 32px var(--pad); font-size: 16px; line-height: 1.7; color: var(--ink); }
.prose h2 { font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); margin: 32px 0 14px; letter-spacing: -.02em; }
.prose h3 { font-weight: 700; font-size: 20px; margin: 24px 0 10px; }
.prose p, .prose ul, .prose ol { margin-bottom: 14px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 4px solid var(--accent); padding: 8px 16px; color: var(--muted); margin: 16px 0; }

/* -----------------------------------------------------------------------
   Tableaux dans les articles éditoriaux.
   Claude génère couramment des tableaux comparatifs (prix vs retail,
   boutique vs frais de port, taille EU/UK/US, etc.). Sans styles
   spécifiques le navigateur rend un tableau brut sans bordures ni
   espacement — illisible.

   Stratégies :
   - wrapper .prose-table-scroll non requis : on rend le tableau scrollable
     horizontalement via overflow-x:auto sur le tableau lui-même (display:block)
     en dessous de 720 px. Au-dessus, mise en page table classique.
   - bordures fines via box-shadow plutôt que border-collapse (évite les
     bords doubles sur les cellules adjacentes, autorise les radius arrondis).
   - thead distinct (fond accent doux, gras, uppercase ténu).
   - zebra striping subtil sur tbody.
   - cellules numériques alignées à droite via [class*="num"] (Claude
     pourrait les marquer ; sinon align-right manuel quand le contenu est
     numérique).
   ----------------------------------------------------------------------- */
.prose table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 24px 0;
    font-size: 14.5px;
    line-height: 1.5;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(15, 15, 16, .04);
}
/* En dessous de 720 px : on passe le tableau en bloc scrollable pour ne pas
   casser le layout. L'utilisateur scrolle horizontalement à l'intérieur. */
@media (max-width: 720px) {
    .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .prose table thead, .prose table tbody, .prose table tr { display: table; width: 100%; table-layout: auto; }
}
.prose thead { background: var(--surface); }
.prose thead th {
    text-align: left;
    font-weight: 700;
    color: var(--ink);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.prose tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
/* Zebra striping pair : très légère teinte pour aérer sans agresser. */
.prose tbody tr:nth-child(even) td { background: rgba(15, 15, 16, .015); }
.prose tbody tr:hover td { background: rgba(214, 40, 40, .04); transition: background .15s ease; }
/* Cellule "numérique" : alignée à droite en typo tabular-nums (chiffres
   à largeur fixe — proportions correctes dans une colonne de prix). */
.prose td[align="right"], .prose th[align="right"],
.prose td.num, .prose th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Pas de footer dédié dans les tableaux générés, mais on prépare le terrain. */
.prose tfoot td {
    padding: 12px 16px;
    font-weight: 600;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

/* -----------------------------------------------------------------------
   FAQ ([faq] shortcode) — accordion <details>/<summary> stylé.
   Le shortcode FaqShortcode rend :
       <details class="faq-item">
           <summary class="faq-item__q">Question ?</summary>
           <div class="faq-item__a">Réponse HTML</div>
       </details>
   ----------------------------------------------------------------------- */
.prose .faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 10px 0;
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.prose .faq-item[open] {
    box-shadow: 0 2px 12px rgba(15, 15, 16, .06);
    border-color: rgba(214, 40, 40, .25);
}
.prose .faq-item__q {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 15.5px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    user-select: none;
}
/* Cache la flèche native Safari/Chrome (.faq-item__q::-webkit-details-marker) */
.prose .faq-item__q::-webkit-details-marker { display: none; }
.prose .faq-item__q::marker { content: ""; }
/* Chevron custom : tourne quand le détail est ouvert. */
.prose .faq-item__q::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: auto;
    transition: transform .2s ease;
    flex: 0 0 auto;
}
.prose .faq-item[open] .faq-item__q::after { transform: rotate(-135deg); }
.prose .faq-item__a {
    padding: 0 18px 16px;
    color: var(--ink);
    line-height: 1.6;
}
.prose .faq-item__a > :first-child { margin-top: 0; }
.prose .faq-item__a > :last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------
   HowTo ([howto] shortcode) — callout pédagogique avec étapes numérotées.
   Markup :
       <section class="howto">
           <header class="howto__head">
               <h3 class="howto__title">…</h3>
               <p class="howto__desc">…</p>
               <p class="howto__time">⏱ 15 min</p>
           </header>
           <div class="howto__body"><ol>…</ol></div>
       </section>
   ----------------------------------------------------------------------- */
.prose .howto {
    background: linear-gradient(180deg, rgba(214, 40, 40, .04), transparent 40%), #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 24px 0;
}
.prose .howto__head { margin-bottom: 12px; }
.prose .howto__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.prose .howto__desc { margin: 0 0 6px; color: var(--muted); }
.prose .howto__time { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent-deep); }
.prose .howto__body ol {
    counter-reset: howto-step;
    list-style: none;
    padding-left: 0;
}
.prose .howto__body ol > li {
    counter-increment: howto-step;
    position: relative;
    padding: 8px 0 8px 42px;
    border-bottom: 1px dashed var(--line);
}
.prose .howto__body ol > li:last-child { border-bottom: 0; }
.prose .howto__body ol > li::before {
    content: counter(howto-step);
    position: absolute;
    left: 0; top: 8px;
    width: 28px; height: 28px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------
   Image inline injectée par ArticleGenerator dans le body.
   Markup :
       <figure class="article-inline-image">
           <img src="…" alt="…" loading="lazy" decoding="async">
           <figcaption>…</figcaption>
       </figure>
   ----------------------------------------------------------------------- */
.prose .article-inline-image {
    margin: 28px 0;
    text-align: center;
}
.prose .article-inline-image img {
    width: 100%;
    max-width: 720px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15, 15, 16, .12);
    display: inline-block;
}
.prose .article-inline-image figcaption {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--muted);
    font-style: italic;
}

/* Article hero */
.article-hero {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px) var(--pad) 0;
}
/* Variante "header-only" : la cover image a été déplacée DANS la colonne
   principale de .article-layout, donc le header (catégorie + titre + meta)
   reste seul en pleine largeur au-dessus. On élargit le bloc à la largeur du
   container global pour qu'il occupe vraiment toute la largeur visuellement,
   et on supprime le margin-top hérité qui serait redondant avec le padding. */
.article-hero--header-only {
    max-width: var(--container);
}
.article-hero__media {
    aspect-ratio: 16/9;
    border-radius: var(--r-lg);
    background: var(--surface);
    display: grid; place-items: center;
    margin-top: 24px;
    overflow: hidden;
    --c: #444;
}
/* Variante "in-layout" : l'image vit dans la colonne principale (à gauche
   de la sidebar), juste au-dessus de l'article. On retire le margin-top
   héritage (le padding-top du conteneur layout suffit) et on lui laisse
   prendre toute la largeur de la colonne principale. */
.article-hero__media--in-layout {
    margin-top: 24px;
    margin-bottom: 0;
}
.article-hero__media svg { width: 60%; color: var(--c); filter: drop-shadow(0 16px 22px rgba(0,0,0,.18)); }
.article-hero__media img,
.article-featured__media img,
.article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== ADMIN SHELL ===== */
.admin-body { background: #F1F5F9; }

.admin-frame {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ----- Sidebar ----- */
.admin-sidebar {
    width: 256px;
    flex-shrink: 0;
    background: #23314b;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
}
.admin-sidebar::-webkit-scrollbar { display: none; }

.admin-sidebar__logo {
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.admin-sidebar__nav {
    flex: 1;
    padding: 10px 10px 0;
    overflow-y: auto;
    scrollbar-width: none;
}
.admin-sidebar__nav::-webkit-scrollbar { display: none; }

.admin-nav-group { margin-bottom: 4px; }

.admin-nav-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    padding: 14px 10px 6px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    transition: background .15s var(--ease), color .15s var(--ease);
    margin-bottom: 1px;
}
.admin-nav-link svg { flex-shrink: 0; opacity: .7; }
.admin-nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-nav-link:hover svg { opacity: 1; }
.admin-nav-link.is-active {
    background: #fb5f61;
    color: #fff;
    font-weight: 600;
}
.admin-nav-link.is-active svg { opacity: 1; }

.admin-sidebar__footer {
    padding: 10px 10px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 4px;
    flex-shrink: 0;
}
.admin-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    text-align: left;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
    font-family: inherit;
    background: none;
    border: 0;
    margin-top: 1px;
}
.admin-sidebar__logout:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ----- Topbar ----- */
.admin-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.admin-topbar {
    height: 60px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    flex-shrink: 0;
    gap: 16px;
}
.admin-topbar__env {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}
.admin-topbar__env span { color: #fb5f61; }
.admin-topbar__right { display: flex; align-items: center; gap: 12px; }
.admin-topbar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
}
.admin-topbar__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #23314b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* ----- Main content ----- */
.admin-main {
    flex: 1;
    overflow-y: auto;
    padding: 28px clamp(20px, 3vw, 36px);
    background: #F1F5F9;
}
.admin-main__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.admin-main__head h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ink);
}

/* ----- Stat cards ----- */
.admin-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 1200px) { .admin-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .admin-cards { grid-template-columns: 1fr; } }

.admin-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(15,15,16,.04);
    transition: box-shadow .2s var(--ease);
}
.admin-card:hover { box-shadow: 0 4px 14px rgba(15,15,16,.08); }
.admin-card .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
}
.admin-card .value {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-top: 8px;
    color: var(--ink);
    line-height: 1;
}
.admin-card .delta {
    font-size: 12.5px;
    color: #fb5f61;
    margin-top: 6px;
    font-weight: 600;
}
.admin-card .delta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ----- Data table ----- */
.table {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,15,16,.04);
    margin-bottom: 20px;
}
.table th, .table td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}
.table th {
    background: #F8FAFC;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    white-space: nowrap;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .1s var(--ease); }
.table tbody tr:hover td { background: #F8FAFC; }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; }
.table .badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 700; }

.badge--ok     { background: #ECFDF5; color: #065F46; }
.badge--warn   { background: #FEF3C7; color: #92400E; }
.badge--danger { background: #fff0f0; color: #fb5f61; }
.badge--info   { background: #EFF6FF; color: #1D4ED8; }

/* Admin section title */
.admin-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 10px;
}

/* Flash messages */
.form-msg {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}
.form-msg--success { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.form-msg--error   { background: #fff0f0; color: #fb5f61; border-color: #fecaca; }

/* User dashboard */
.user-shell { display: grid; grid-template-columns: 220px 1fr; gap: 32px; max-width: var(--container); margin: 36px auto; padding: 0 var(--pad); }
.user-side {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
}
.user-side h3 { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.user-side a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink-soft);
    font-size: 14px;
    transition: background .15s var(--ease);
}
.user-side a:hover { background: var(--surface); }
.user-side a.is-active { background: var(--ink); color: #fff; }
.user-main { min-width: 0; }
@media (max-width: 880px) { .user-shell { grid-template-columns: 1fr; } }

/* Deal cards */
.deal-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color .15s var(--ease), box-shadow .2s var(--ease);
}
.deal-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.deal-card__vote {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--surface);
    border-radius: 12px;
    padding: 8px;
}
.deal-card__vote button {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    display: grid; place-items: center;
    transition: background .15s var(--ease);
}
.deal-card__vote button:hover { background: var(--surface-2); }
.deal-card__vote strong { font-weight: 800; font-size: 14px; }
.deal-card__body strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; display: block; }
.deal-card__body .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.deal-card__price { text-align: right; }
.deal-card__price strong { font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.deal-card__price span { color: var(--muted); font-size: 12px; text-decoration: line-through; }
.deal-card__price small { display: block; color: var(--accent); font-weight: 700; font-size: 12px; }
.deal-card__price .deal-card__discount {
    background: var(--hot);
    color: #fff;
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

/* Comments */
.comment {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.comment__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment__head .avatar { width: 32px; height: 32px; font-size: 11px; }
.comment__head strong { font-size: 13px; font-weight: 700; }
.comment__head span { font-size: 12px; color: var(--muted); }
.comment__body { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.comment__reply { margin-left: 36px; }

/* Read-only star rating shown next to comment author */
.rating-stars {
    display: inline-flex;
    gap: 1px;
    margin-left: 2px;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1px;
}
.rating-stars__star { color: #E5E7EB; }
.rating-stars__star.is-on { color: #F59E0B; }

/* Interactive 5-star input — uses reverse DOM order + sibling selectors so
   hover/check on a star highlights every star to its right (the actual
   higher-rated ones, since markup is 5,4,3,2,1). */
.rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
    margin-top: 4px;
}
.rating-input input { position: absolute; opacity: 0; pointer-events: none; }
.rating-input label {
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #E5E7EB;
    transition: color .12s var(--ease), transform .12s var(--ease);
}
.rating-input label:hover { transform: scale(1.1); }
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label { color: #F59E0B; }
.rating-input input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Tags */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list .tag {
    padding: 5px 10px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* Empty state */
.empty {
    text-align: center;
    padding: 56px 24px;
    background: #fff;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    color: var(--muted);
}
.empty strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 4px; }

/* Filters */
.filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 16px var(--pad);
    max-width: var(--container);
    margin: 0 auto;
}
.filters input,
.filters select {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    outline: none;
}
.filters input:focus, .filters select:focus { border-color: var(--ink); }

/* Specs / shops compact mobile */
@media (max-width: 480px) {
    .deal-card { grid-template-columns: 1fr; gap: 8px; }
    .deal-card__vote { flex-direction: row; justify-content: space-between; }
    .deal-card__price { text-align: left; }
}

/* Avatar bigger sizes */
.avatar--lg { width: 60px; height: 60px; font-size: 22px; }

/* Hero of guides */
.guides-hero { padding-top: clamp(28px, 4vw, 48px); }

/* Color hex helpers */
.product-card[data-color] .product-card__svg { color: var(--card-color, currentColor); }
.product-card { --card-color: #0F0F10; }
.brand-hero__plate svg { color: var(--c, #0F0F10); }
.product-card__svg { color: var(--card-color, #0F0F10); }

/* Real product images (replace the SVG silhouette when present) */
.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 12% 8%;
    transition: transform .25s var(--ease, ease);
}
.product-card:hover .product-card__img { transform: scale(1.04); }

.product-gallery__main { position: relative; }
.product-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 6% 4%;
}
.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
    display: block;
}

/* Article page — 2-column layout with sticky sidebar */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(24px, 3vw, 48px);
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    align-items: start;
}
.article-layout__main { min-width: 0; }
.prose--in-layout {
    max-width: none;
    margin: 0;
    padding: 32px 0;
}
.section--in-layout {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.article-sidebar {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 16px;
}
.sidebar-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px;
}
.sidebar-card h4 {
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 12px;
}

.sidebar-cats { display: grid; gap: 2px; }
.sidebar-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.sidebar-cats a:hover { background: var(--surface); color: var(--ink); }
.sidebar-cats a.is-active { background: var(--ink); color: #fff; }
.sidebar-cats a.is-active .count { color: rgba(255,255,255,.7); }
.sidebar-cats .count {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.sidebar-suggested { display: grid; gap: 14px; }
.sidebar-suggested a {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: start;
    color: var(--ink);
}
.sidebar-suggested img,
.sidebar-suggested .media {
    width: 72px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}
.sidebar-suggested .media {
    background: var(--surface);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.sidebar-suggested .media svg { width: 70%; color: var(--c, #ccc); }
.sidebar-suggested .title {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--ink);
}
.sidebar-suggested .meta {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 4px;
}

.article-sidebar .banner-slot {
    max-width: 300px;
    margin: 0;
}
.article-sidebar .banner-slot a,
.article-sidebar .banner-slot img,
.article-sidebar .banner-slot iframe {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
}

.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .cards-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cards-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .cards-grid--4 { grid-template-columns: 1fr; } }

@media (max-width: 960px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-sidebar { position: static; }
}

/* Profile — avatar upload */
.profile-avatar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: var(--surface);
    border-radius: var(--r);
}
.profile-avatar__preview {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.profile-avatar__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-avatar__preview span {
    font-weight: 800;
    font-size: 28px;
    color: var(--muted);
    letter-spacing: -.02em;
}
.profile-avatar__controls { display: grid; gap: 4px; }
.profile-avatar__controls strong { font-weight: 700; font-size: 14px; }
.profile-avatar__buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}
.profile-avatar__buttons .btn { cursor: pointer; }
@media (max-width: 600px) {
    .profile-avatar { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* =============================================================
   CMS shortcodes — [products …] mini horizontal cards
   ----------------------------------------------------------------
   Embeds a minimal Bootstrap-ish 12-col grid scoped to .shortcode-*
   so authors can write `card-col=6` → `col-12 col-md-6` and have
   it work without pulling in the full Bootstrap stylesheet.
   ============================================================= */
.shortcode-products.row {
    display: flex;
    flex-wrap: wrap;
    margin: 18px -8px;
    gap: 0;
}
.shortcode-products.row > [class*="col-"] {
    box-sizing: border-box;
    padding: 8px;
    width: 100%;
}
@media (min-width: 768px) {
    .shortcode-products.row > .col-md-1  { width: calc(100% * 1 / 12); }
    .shortcode-products.row > .col-md-2  { width: calc(100% * 2 / 12); }
    .shortcode-products.row > .col-md-3  { width: calc(100% * 3 / 12); }
    .shortcode-products.row > .col-md-4  { width: calc(100% * 4 / 12); }
    .shortcode-products.row > .col-md-5  { width: calc(100% * 5 / 12); }
    .shortcode-products.row > .col-md-6  { width: calc(100% * 6 / 12); }
    .shortcode-products.row > .col-md-7  { width: calc(100% * 7 / 12); }
    .shortcode-products.row > .col-md-8  { width: calc(100% * 8 / 12); }
    .shortcode-products.row > .col-md-9  { width: calc(100% * 9 / 12); }
    .shortcode-products.row > .col-md-10 { width: calc(100% * 10 / 12); }
    .shortcode-products.row > .col-md-11 { width: calc(100% * 11 / 12); }
    .shortcode-products.row > .col-md-12 { width: 100%; }
}

.shortcode-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.shortcode-product:hover {
    border-color: var(--line-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
    transform: translateY(-1px);
}
.shortcode-product__media {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    background: #f6f6f7;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shortcode-product__media img,
.shortcode-product__media svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.shortcode-product__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.shortcode-product__brand {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
}
.shortcode-product__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.shortcode-product__price {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 4px;
}
.shortcode-product__price strong {
    color: var(--ink);
    font-weight: 700;
}

/* Author-only diagnostic banner (rendered only when an admin is logged in). */
.shortcode-warn {
    margin: 10px 0;
    padding: 8px 12px;
    background: #fff8e6;
    border: 1px dashed #e0b400;
    border-radius: 8px;
    color: #7a5a00;
    font-size: 13px;
}