/* Self-hosted Inter / Inter Tight (variable, latin + latin-ext), same files and
   same font-display:optional as the Google Fonts stylesheet they replace —
   which blocked rendering and cost two extra domain connections on mobile. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:optional;src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:optional;src:url(/assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500 800;font-display:optional;src:url(/assets/fonts/inter-tight-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500 800;font-display:optional;src:url(/assets/fonts/inter-tight-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   VAYNERO STORE — Design system stylesheet
   Complements Tailwind CSS (utility classes) with brand tokens, reusable
   component classes and animations that are awkward to express with
   utilities alone (keyframes, custom scrollbars, gradients, line-clamps).
   ========================================================================== */

:root {
  /* ==========================================================================
     VAYNERO design tokens — the single source of truth for every color used
     on the site. Direction (a warm CTA orange against near-black text/dark
     surfaces, clean neutral grays elsewhere) is inspired by a real analysis
     of voltstore.shopping's own compiled CSS custom properties (their real
     :root --primary/--secondary/--destructive tokens, converted from OKLCH
     to sRGB) — not guessed, and not copied 1:1: every exact shade below is
     VAYNERO's own. Change a value here and it propagates everywhere: every
     `vyn-*` Tailwind utility class (js/tailwind-config.js points at these
     same variables) and every component rule in this file reads from here. */
  --color-primary: #C24E10;           /* warm CTA orange — buttons, links, active states */
  --color-primary-rgb: 194 78 16;     /* space-separated (not comma) — required by the rgb(var(...) / <alpha-value>) syntax used below and in tailwind-config.js; mixing commas with a slash-alpha is invalid CSS and silently fails */
  --color-primary-dark: #9C3D0C;      /* hover/active shade of primary */
  --color-primary-dark-rgb: 156 61 12;
  --color-primary-light: #FDECE1;     /* tinted backgrounds (badges, subtle highlights) */
  --color-primary-light-rgb: 253 236 225;

  --color-secondary: #0F1222;         /* near-black surface — dark sections, admin sidebar */
  --color-secondary-rgb: 15 18 34;

  --color-accent: #22D3EE;            /* VAYNERO's own cool accent, kept distinct from the CTA orange */
  --color-accent-rgb: 34 211 238;
  --color-accent-dark: #0EA5C7;
  --color-accent-dark-rgb: 14 165 199;

  --color-text: #161A2C;              /* main body text, near-black */
  --color-text-rgb: 22 26 44;
  --color-text-muted: #6B7280;        /* secondary/supporting text */

  --color-background: #FFFFFF;
  --color-surface: #F7F7FB;           /* alternate section backgrounds */
  --color-surface-rgb: 247 247 251;
  --color-card: #FFFFFF;
  --color-border: #E7E7F1;
  --color-border-rgb: 231 231 241;

  --color-rating: #F59E0B;            /* star ratings — deliberately distinct from the CTA color */
  --color-success: #16A34A;
  --color-success-light: #DCFCE7;
  --color-danger: #DC2626;            /* errors, destructive actions */
  --color-sale: #E11D2E;              /* promotions/discounts — Voltstore-inspired red direction */
  --color-sale-light: #FCE7E9;
  --color-warning: #B45309;           /* bestseller badge */
  --color-warning-light: #FEF3C7;

  /* Back-compat aliases (older component rules/pages may still reference
     these shorter names) — kept pointed at the exact same tokens above so
     there is still only one real place to change any color. */
  --vyn-primary: var(--color-primary);
  --vyn-primary-dark: var(--color-primary-dark);
  --vyn-primary-light: var(--color-primary-light);
  --vyn-accent: var(--color-accent);
  --vyn-dark: var(--color-secondary);
  --vyn-ink: var(--color-text);
  --vyn-surface: var(--color-surface);
  --vyn-line: var(--color-border);
}

html { scroll-behavior: smooth; }
body { background: var(--color-background); color: var(--color-text); -webkit-font-smoothing: antialiased; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D8D8E8; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #B9B9D3; }

/* ---------- Brand gradient helpers ---------- */
.vyn-gradient { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
.vyn-gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vyn-radial-glow {
  background: radial-gradient(60% 60% at 30% 30%, rgb(var(--color-primary-rgb) / .22), transparent 70%),
              radial-gradient(50% 50% at 80% 70%, rgb(var(--color-accent-rgb) / .18), transparent 70%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; border-radius: .8rem; padding: .75rem 1.5rem; font-size: .925rem;
  transition: all .18s ease; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgb(var(--color-primary-rgb) / .28); }
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 10px 26px rgb(var(--color-primary-rgb) / .4); }
.btn-secondary { background: var(--color-card); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-dark { background: var(--color-secondary); color: #fff; }
.btn-dark:hover { background: #1c2038; }
.btn-ghost { background: transparent; color: var(--color-text); }
.btn-ghost:hover { background: var(--color-surface); }
.btn-sm { padding: .5rem 1rem; font-size: .825rem; border-radius: .65rem; }
.btn-icon { width: 42px; height: 42px; padding: 0; border-radius: .7rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Cards ---------- */
.card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 1rem; box-shadow: 0 2px 10px rgba(15,18,34,.05); }
.product-card { transition: transform .22s ease, box-shadow .22s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,18,34,.12); }
.product-card .product-actions { opacity: 0; transform: translateY(6px); transition: all .18s ease; }
.product-card:hover .product-actions { opacity: 1; transform: translateY(0); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; letter-spacing: .02em; }
.badge-discount { background: var(--color-sale-light); color: var(--color-sale); }
.badge-new { background: var(--color-success-light); color: var(--color-success); }
.badge-best { background: var(--color-warning-light); color: var(--color-warning); }
.badge-out { background: var(--color-surface); color: var(--color-text-muted); }
.badge-primary { background: var(--color-primary-light); color: var(--color-primary); }

/* ---------- Inputs ---------- */
.input {
  width: 100%; border: 1px solid var(--color-border); border-radius: .7rem; padding: .7rem 1rem;
  font-size: .9rem; background: var(--color-card); transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .15); }
.label { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: .35rem; display: block; }

/* ---------- Star rating ---------- */
.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--color-rating); }
.stars svg { width: 15px; height: 15px; }

/* ---------- Skeleton loading ---------- */
.skeleton {
  background: linear-gradient(90deg, #EEEEF4 25%, var(--color-surface) 37%, #EEEEF4 63%);
  background-size: 400px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: .6rem;
}
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* ---------- Toasts ---------- */
#toast-container { position: fixed; top: 5.5rem; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .6rem; max-width: 92vw; }
.toast {
  display: flex; align-items: center; gap: .6rem; background: var(--color-text); color: #fff;
  padding: .8rem 1.1rem; border-radius: .75rem; box-shadow: 0 12px 28px rgba(0,0,0,.25);
  font-size: .875rem; font-weight: 500; animation: toastIn .25s ease both; min-width: 260px;
}
.toast-success { background: var(--color-success); }
.toast-error { background: var(--color-danger); }
.toast-info { background: var(--color-text); }
@keyframes toastIn { 0% { opacity: 0; transform: translateY(-8px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,18,34,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 150; }
.modal-panel { animation: fadeUp .22s ease both; }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }

/* ---------- Line clamp ---------- */
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Misc ---------- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.fade-up { animation: fadeUp .5s ease both; }
[x-cloak] { display: none !important; }

/* ---------- Live Activity ---------- */
@keyframes liveNotifIn { 0% { opacity: 0; transform: translateY(16px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.live-notif-enter { animation: liveNotifIn .35s ease both; }
@keyframes liveOrderIn { 0% { opacity: 0; transform: translateY(-6px); background-color: rgb(var(--color-primary-rgb) / .18); } 100% { opacity: 1; transform: translateY(0); background-color: rgba(255,255,255,.05); } }
.live-order-new { animation: liveOrderIn 1.2s ease both; }
@keyframes liveFeedPanelIn { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
.live-feed-panel-enter { animation: liveFeedPanelIn .22s ease both; }
@keyframes liveFeedItemIn { 0% { opacity: 0; background-color: rgb(var(--color-primary-rgb) / .12); } 100% { opacity: 1; background-color: transparent; } }
.live-feed-item-new { animation: liveFeedItemIn 1.4s ease both; }
@keyframes liveBellBump { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 55% { transform: scale(.95); } }
.live-bell-bump { animation: liveBellBump .4s ease both; }
@keyframes liveNotifProgress { 0% { width: 100%; } 100% { width: 0%; } }
.live-notif-progress { animation: liveNotifProgress linear forwards; }
.hero-slide-panel { transition: opacity .3s ease, transform .35s ease; }
.hero-slide-panel.hero-slide-leave { opacity: 0; transform: translateY(-10px); }
.hero-slide-panel.hero-slide-enter { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
  .live-notif-enter, .live-order-new, .live-feed-panel-enter, .live-feed-item-new, .live-bell-bump, .live-notif-progress { animation: none !important; }
  .hero-slide-panel { transition: none !important; }
}

/* ---------- Admin ---------- */
.admin-sidebar { background: var(--color-secondary); }
.admin-nav-link { color: #A6A9C4; }
.admin-nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.admin-nav-link.active { color: #fff; background: rgb(var(--color-primary-rgb) / .25); }

/* Space reserved for the header on pages where js/app.js injects it
   (checkout/cart/account/wishlist/reset-password/404): without it the whole
   page jumped down once the header appeared (CLS 0.14 on checkout).
   Heights = the rendered header (117px, 166px from the lg breakpoint).
   :empty -> no effect on pages that ship the header pre-rendered. */
#vyn-header:empty { min-height: 117px; }
@media (min-width: 1024px) { #vyn-header:empty { min-height: 166px; } }
@media (max-width: 767px) { #vyn-header:empty { min-height: 57px; } } /* phones: compact header, no top bar */

/* Mobile menu: the panel and its blurred backdrop are siblings, and the
   backdrop (z-index 150 above) was painted OVER the panel — the whole menu
   looked blurred and dimmed. Panel above its backdrop; the menu itself above
   the Live Activity widgets (z-125), still below notification toasts (200). */
#mobile-menu { z-index: 140; }
#mobile-menu > .modal-panel { z-index: 151; }

/* =====================================================================
   MOBILE-FIRST LAYER (phones, < 768px). Tablet/desktop are not affected:
   every rule below is inside a max-width: 767px query or targets elements
   that only exist / show on phones (.vyn-tabbar is md:hidden).
   ===================================================================== */

/* Bottom tab bar — app-style primary navigation, respects the home indicator. */
.vyn-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; justify-content: space-around; align-items: stretch;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.vyn-tabbar > a, .vyn-tabbar > button {
  flex: 1 1 0; min-width: 0; min-height: 56px; padding: 6px 2px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #6B7280; font-size: 11px; font-weight: 600; line-height: 1.1; letter-spacing: .01em;
  background: none; border: 0; -webkit-tap-highlight-color: transparent;
}
.vyn-tabbar > * > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vyn-tabbar [aria-current="page"] { color: var(--color-primary); }
.vyn-tabbar > *:active { transform: scale(.94); }
.vyn-tab-icon { position: relative; display: inline-flex; }
.vyn-tab-badge {
  position: absolute; top: -5px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--color-primary); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.vyn-tab-badge.hidden { display: none; }

/* Drawer menu: slides in from the left; content never blurred (panel sits
   above its own backdrop, see the z-index rules above). */
@keyframes vynDrawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes vynFadeIn { from { opacity: 0; } to { opacity: 1; } }
#mobile-menu > .vyn-drawer { animation: vynDrawerIn .24s cubic-bezier(.2, .8, .2, 1) both; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
#mobile-menu > .modal-backdrop { animation: vynFadeIn .2s ease both; }
html.vyn-menu-open, html.vyn-menu-open body { overflow: hidden; }

@media (max-width: 767px) {
  /* Room for the tab bar so it never hides the end of the page. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* Checkout = focused flow: no tab bar there. */
  body:has(#checkout-form) { padding-bottom: env(safe-area-inset-bottom, 0px); }
  body:has(#checkout-form) .vyn-tabbar { display: none; }

  /* Header keeps clear of the notch in landscape. */
  #vyn-header header { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

  /* 16px form fields: iOS Safari zooms into any field below 16px on focus. */
  .input, input.input, select.input, textarea.input { font-size: 16px; min-height: 48px; }
  textarea.input { min-height: 96px; }

  /* Comfortable touch targets (>= 44px, Apple HIG / WCAG 2.5.5). */
  .btn { min-height: 48px; }
  .btn-sm { min-height: 44px; }
  .btn-icon { width: 44px; height: 44px; }
  #mobile-menu .vyn-drawer a { min-height: 48px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* Live Activity widgets sit above the tab bar instead of behind it. */
  #live-feed-bell { bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px)) !important; }
  #live-notification-container { bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px)) !important; }
  #live-feed-panel { bottom: calc(56px + 80px + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100vh - 220px); }

  /* Sticky action bars (product: add to cart, cart: checkout) above the tab bar. */
  .vyn-sticky-cta {
    position: fixed; left: 0; right: 0; z-index: 115;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: #fff; border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(15, 18, 34, .08);
    transform: translateY(0); transition: transform .2s ease, opacity .2s ease;
  }
  .vyn-sticky-cta[data-hidden="true"] { transform: translateY(110%); opacity: 0; pointer-events: none; }
  body:has(.vyn-sticky-cta:not([data-hidden="true"])) { padding-bottom: calc(56px + 72px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) { .vyn-sticky-cta { display: none !important; } }

/* Respect the user's "reduce motion" setting everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* viewport-fit=cover: keep content clear of the notch / rounded corners in
   landscape (insets are 0 on desktop and in portrait). */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* Icon buttons/links: always centre their icon (the header cart link sat
   12px higher than the search button because an <a> isn't a flex box). */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 767px) {
  /* Readability on phones: nothing important below ~11-12px. */
  .badge { font-size: .75rem; }
  #hero-slider .text-\[10px\] { font-size: 11px; }
  #hero-slider .text-\[11px\] { font-size: 12px; }
  /* Tiny carousel dots keep their look but get a 44px-tall touch area. */
  #hero-slider button.rounded-full.h-1\.5 { position: relative; }
  #hero-slider button.rounded-full.h-1\.5::after { content: ""; position: absolute; left: -6px; right: -6px; top: -19px; bottom: -19px; }
  /* Footer links: taller tap rows. */
  footer li > a { display: inline-block; padding-top: 7px; padding-bottom: 7px; }
}

@media (max-width: 767px) {
  /* A visible sticky action bar (product/cart) pushes the Live Activity toast
     and bell above it — they used to cover the "Ajouter au panier" button. */
  body:has(.vyn-sticky-cta:not([data-hidden="true"])) #live-notification-container,
  body:has(.vyn-sticky-cta:not([data-hidden="true"])) #live-feed-bell { bottom: calc(56px + 72px + 12px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.vyn-sticky-cta:not([data-hidden="true"])) #live-feed-panel { bottom: calc(56px + 72px + 80px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Very narrow phones (iPhone SE 1st gen, small Androids): full tab labels
   ("Catégories", "Kategorien", "Categorieën") without ellipsis. */
@media (max-width: 359px) {
  .vyn-tabbar > a, .vyn-tabbar > button { font-size: 10px; letter-spacing: 0; }
}