@charset "UTF-8";
/* css/theme-fonts.css */
/**
 * Fonturi de TEMA — frontend (self-hosted, fara CDN).
 * Declara @font-face pentru toate fonturile din picker-ul Identitate, ca ORICE tema
 * (Aspect) sa-si randeze fontul real pe SITE, nu doar in admin. Fisierele sunt deja
 * pe server in assets/fonts/. Inter/Figtree/Montserrat = woff2 (latin-ext diacritice),
 * restul = ttf complet (include diacritice ro).
 *
 * Ultima modificare: 2026-08-27 02:10
 * Modificari:
 *   2026-08-27 02:10 — Lot 3: Newsreader (serif) + Instrument Sans din designul Neomedis,
 *                       plus grupa Monospace (IBM Plex Mono, JetBrains Mono, Fira Code,
 *                       Source Code Pro, Space Mono) — erau pe disc, dar doar in admin.
 *   2026-07-10 12:30 — Creare: fonturile de tema disponibile si pe frontend (fix ca Zorba
 *                       si orice tema cu font non-default sa se randeze corect pe site).
 */

/* Inter */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter/Inter-Regular-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter/Inter-Medium-latin-ext.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter/Inter-SemiBold-latin-ext.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* Figtree */
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree/Figtree-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree/Figtree-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

/* Montserrat */
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat/Montserrat-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat/Montserrat-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

/* Roboto */
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto/roboto-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto/roboto-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto/roboto-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto/roboto-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/roboto/roboto-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* DM Sans */
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans/dmsans-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans/dmsans-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans/dmsans-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans/dmsans-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dmsans/dmsans-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Nunito */
@font-face { font-family: 'Nunito'; src: url('/assets/fonts/nunito/nunito-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/assets/fonts/nunito/nunito-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/assets/fonts/nunito/nunito-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/assets/fonts/nunito/nunito-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/assets/fonts/nunito/nunito-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Manrope */
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope/manrope-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope/manrope-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope/manrope-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope/manrope-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope/manrope-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Sora */
@font-face { font-family: 'Sora'; src: url('/assets/fonts/sora/sora-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/assets/fonts/sora/sora-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/assets/fonts/sora/sora-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/assets/fonts/sora/sora-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/assets/fonts/sora/sora-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Rajdhani */
@font-face { font-family: 'Rajdhani'; src: url('/assets/fonts/rajdhani/rajdhani-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('/assets/fonts/rajdhani/rajdhani-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('/assets/fonts/rajdhani/rajdhani-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('/assets/fonts/rajdhani/rajdhani-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('/assets/fonts/rajdhani/rajdhani-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* IBM Plex Sans */
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibmplexsans/ibmplexsans-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibmplexsans/ibmplexsans-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibmplexsans/ibmplexsans-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibmplexsans/ibmplexsans-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibmplexsans/ibmplexsans-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Space Grotesk */
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/spacegrotesk/spacegrotesk-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/spacegrotesk/spacegrotesk-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/spacegrotesk/spacegrotesk-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/spacegrotesk/spacegrotesk-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/spacegrotesk/spacegrotesk-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Outfit */
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit/Outfit-Medium.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit/Outfit-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit/Outfit-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit/Outfit-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit/Outfit-Medium-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit/Outfit-Medium-latin-ext.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit/Outfit-SemiBold-latin-ext.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit/Outfit-Bold-latin-ext.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }

/* Plus Jakarta Sans */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Regular-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Medium-latin-ext.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-SemiBold-latin-ext.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Bold-latin-ext.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }

/* Geologica */
@font-face { font-family: 'Geologica'; src: url('/assets/fonts/geologica/Geologica-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('/assets/fonts/geologica/Geologica-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('/assets/fonts/geologica/Geologica-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('/assets/fonts/geologica/Geologica-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('/assets/fonts/geologica/Geologica-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Orbitron */
@font-face { font-family: 'Orbitron'; src: url('/assets/fonts/orbitron/orbitron-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('/assets/fonts/orbitron/orbitron-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('/assets/fonts/orbitron/orbitron-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('/assets/fonts/orbitron/orbitron-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Fonturi noi (2026-07-10): Poppins, Lora (serif), Playfair Display (serif), Fraunces (serif), Bricolage Grotesque ── */
/* Poppins */
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins/pxiEyp8kv8JHgFVrJJnecmNE.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins/pxiEyp8kv8JHgFVrJJfecg.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Lora */
@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora/0QIvMX1D_JOuMwT7I-NP.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora/0QIvMX1D_JOuMwr7Iw.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora/0QIvMX1D_JOuMwT7I-NP.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora/0QIvMX1D_JOuMwr7Iw.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora/0QIvMX1D_JOuMwT7I-NP.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora/0QIvMX1D_JOuMwr7Iw.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora/0QIvMX1D_JOuMwT7I-NP.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora/0QIvMX1D_JOuMwr7Iw.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Playfair Display */
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Fraunces */
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c1qv86Rg.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c7qv8.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c1qv86Rg.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c7qv8.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c1qv86Rg.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c7qv8.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c1qv86Rg.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c7qv8.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Bricolage Grotesque */
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawDVXplDs.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawDVXplDs.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawDVXplDs.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawDVXplDs.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Fonturi lot 2 (2026-07-10): Raleway, Work Sans, Merriweather (serif), Quicksand (rounded), Barlow, Cormorant Garamond (serif) ── */
/* Raleway */
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/1Ptug8zYS_SKggPNyCMIT5lu.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/1Ptug8zYS_SKggPNyC0ITw.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/1Ptug8zYS_SKggPNyCMIT5lu.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/1Ptug8zYS_SKggPNyC0ITw.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/1Ptug8zYS_SKggPNyCMIT5lu.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/1Ptug8zYS_SKggPNyC0ITw.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/1Ptug8zYS_SKggPNyCMIT5lu.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/raleway/1Ptug8zYS_SKggPNyC0ITw.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Work Sans */
@font-face { font-family: 'Work Sans'; src: url('/assets/fonts/work-sans/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/assets/fonts/work-sans/QGYsz_wNahGAdqQ43Rh_fKDp.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/assets/fonts/work-sans/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/assets/fonts/work-sans/QGYsz_wNahGAdqQ43Rh_fKDp.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/assets/fonts/work-sans/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/assets/fonts/work-sans/QGYsz_wNahGAdqQ43Rh_fKDp.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/assets/fonts/work-sans/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/assets/fonts/work-sans/QGYsz_wNahGAdqQ43Rh_fKDp.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Merriweather */
@font-face { font-family: 'Merriweather'; src: url('/assets/fonts/merriweather/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqkJ-mFqA.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('/assets/fonts/merriweather/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqqJ-k.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('/assets/fonts/merriweather/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqkJ-mFqA.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('/assets/fonts/merriweather/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqqJ-k.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('/assets/fonts/merriweather/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqkJ-mFqA.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('/assets/fonts/merriweather/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqqJ-k.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('/assets/fonts/merriweather/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqkJ-mFqA.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('/assets/fonts/merriweather/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqqJ-k.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Quicksand */
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand/6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand/6xKtdSZaM9iE8KbpRA_hK1QN.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand/6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand/6xKtdSZaM9iE8KbpRA_hK1QN.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand/6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand/6xKtdSZaM9iE8KbpRA_hK1QN.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand/6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand/6xKtdSZaM9iE8KbpRA_hK1QN.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Barlow */
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow/7cHpv4kjgoGqM7E_Ass52Hs.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow/7cHpv4kjgoGqM7E_DMs5.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow/7cHqv4kjgoGqM7E3_-gs6VospT4.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow/7cHqv4kjgoGqM7E3_-gs51os.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow/7cHqv4kjgoGqM7E30-8s6VospT4.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow/7cHqv4kjgoGqM7E30-8s51os.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow/7cHqv4kjgoGqM7E3t-4s6VospT4.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow/7cHqv4kjgoGqM7E3t-4s51os.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Cormorant Garamond */
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* -- Fonturi lot 3 (2026-08-27): Newsreader (serif), Instrument Sans, plus grupa Monospace --
   Newsreader + Instrument Sans vin din designul Neomedis; fisierele sunt variabile
   (o singura axa de greutate per subset). Fiecare familie are DOUA subseturi:
   `latin` si `latin-ext`. ATENTIE: `latin-ext` e OBLIGATORIU pentru diacriticele
   romanesti (a-breve, a-circumflex, i-circumflex, s-virgula, t-virgula) — si tot de
   aceea fiecare declaratie are `unicode-range`: fara el ultima declaratie ar castiga
   tot intervalul si diacriticele ar cadea pe fontul de rezerva.
   Fonturile monospace erau deja pe disc si declarate in admin-fonts.css, dar NU si aici
   (deci nu se randau pe SITE) si nu erau oferite in selectorul de tipografie. */

/* Newsreader (serif variabil 300-600 — nu cere 700/800, iese sintetizat si grosolan) */
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader/Newsreader-latin-ext.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; 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: 'Newsreader'; src: url('/assets/fonts/newsreader/Newsreader-latin.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; 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; }

/* Instrument Sans (400-700 normal + 400-600 italic) */
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/instrument-sans/InstrumentSans-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; 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: 'Instrument Sans'; src: url('/assets/fonts/instrument-sans/InstrumentSans-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; 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: 'Instrument Sans'; src: url('/assets/fonts/instrument-sans/InstrumentSans-Italic-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; 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: 'Instrument Sans'; src: url('/assets/fonts/instrument-sans/InstrumentSans-Italic-latin.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; 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; }

/* IBM Plex Mono */
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibmplexmono/ibmplexmono-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibmplexmono/ibmplexmono-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibmplexmono/ibmplexmono-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibmplexmono/ibmplexmono-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibmplexmono/ibmplexmono-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* JetBrains Mono */
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrainsmono/jetbrainsmono-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrainsmono/jetbrainsmono-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrainsmono/jetbrainsmono-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrainsmono/jetbrainsmono-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrainsmono/jetbrainsmono-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Fira Code */
@font-face { font-family: 'Fira Code'; src: url('/assets/fonts/firacode/firacode-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url('/assets/fonts/firacode/firacode-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url('/assets/fonts/firacode/firacode-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url('/assets/fonts/firacode/firacode-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url('/assets/fonts/firacode/firacode-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Source Code Pro */
@font-face { font-family: 'Source Code Pro'; src: url('/assets/fonts/sourcecodepro/sourcecodepro-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('/assets/fonts/sourcecodepro/sourcecodepro-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('/assets/fonts/sourcecodepro/sourcecodepro-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('/assets/fonts/sourcecodepro/sourcecodepro-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('/assets/fonts/sourcecodepro/sourcecodepro-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Space Mono */
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/spacemono/spacemono-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/spacemono/spacemono-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* css/main.css */
/* ==========================================================================
   main.css - Global Styles for mycell.eu
   Health Supplements & CBD Cosmetics E-Commerce

   Ultima modificare: 2026-10-20 23:12
   Modificari:
     2026-10-20 23:12 — Textul de pe suprafețele de brand (butoane primare, bulina din filtre, „înapoi sus”, insigne) = --color-on-primary (rezervă --color-white).
     2026-09-22 22:05 — Curatenie: scosi selectorii .breadcrumbs / .breadcrumbs-list
                        (markup vechi, nefolosit in niciun sablon)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --color-primary: var(--color-primary);
  --color-primary-dark: var(--color-primary-dark);
  --color-primary-light: var(--color-primary-light);
  --color-primary-lightest: var(--color-primary-lightest);

  /* Text Colors */
  --color-text: var(--color-text);
  --color-text-secondary: var(--color-text-secondary);
  --color-text-light: var(--color-text-light);

  /* UI Colors */
  --color-border: var(--color-border);
  --color-bg: var(--color-bg);
  --color-white: #ffffff;
  --color-danger: var(--color-danger);
  --color-warning: var(--color-warning);
  --color-info: var(--color-info);

  /* Bootstrap overrides — use site green */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 4, 145, 48;

  /* Typography */
  --font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Layout */
  --border-radius: 8px;
  --border-radius-sm: 6px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition: all 0.2s ease;
  --transition-slow: all 0.3s ease;
  --transition-fast: all 0.15s ease;

  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
}

/* --------------------------------------------------------------------------
   Bootstrap Overrides — site green instead of Bootstrap blue
   -------------------------------------------------------------------------- */
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.badge.bg-primary { background-color: var(--color-primary) !important; }

/* --------------------------------------------------------------------------
   Local Fonts - Figtree (body) + Montserrat (headings)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/figtree/Figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/figtree/Figtree-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: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat/Montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat/Montserrat-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;
}

/* --------------------------------------------------------------------------
   Base Reset & Defaults
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* Sticky footer: body is flex column, main grows to fill space */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

body.has-admin-bar {
  padding-top: 40px;
}

/* ==========================================================================
   ADMIN BAR — frontend toolbar for logged-in admins
   ========================================================================== */

.admin-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--color-text);
  height: 36px;
  font-size: 0.8125rem;
}

.admin-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1rem;
  max-width: 100%;
}

.admin-bar-left,
.admin-bar-right {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.admin-bar-logo {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  text-decoration: none;
}

.admin-bar-logo img {
  height: 20px;
  width: auto;
  object-fit: contain;
  border-radius: 3px;
}

.admin-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  color: var(--color-text-light);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}

.admin-bar-link:hover {
  color: var(--color-border);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.admin-bar-edit {
  color: #a5b4fc;
}

.admin-bar-edit:hover {
  color: white;
  background: rgba(99, 102, 241, 0.25);
}

.admin-bar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.7rem;
}

.admin-bar-dot {
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
  animation: admin-bar-pulse 1.5s ease-in-out infinite;
}

@keyframes admin-bar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.admin-bar-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 0.2rem;
}

.admin-bar-user {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  text-decoration: none;
}

/* Offsets when admin bar is visible — push navbar + spacer down */
body.has-admin-bar .site-navbar {
  top: 36px;
}

body.has-admin-bar .navbar-spacer {
  height: 108px; /* 72px navbar + 36px admin bar */
}

@media (max-width: 575.98px) {
  .admin-bar-link span {
    display: none;
  }

  .admin-bar-user span:not(.fas):not(.far):not(.fa) {
    display: none;
  }

  .admin-bar-user {
    padding: 0.25rem;
  }

  .admin-bar-status,
  .admin-bar-sep {
    display: none;
  }
}

body.no-scroll {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 0.5em;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Selection
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--color-primary);
  color: var(--color-on-primary, var(--color-white));
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-on-primary, var(--color-white));
}

/* --------------------------------------------------------------------------
   Custom Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary-light);
  border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-light) var(--color-bg);
}

/* Pe temele DARK, `--color-primary-light` (gandit pentru fundal deschis) iese
   spalacit — roz sters pe fundal inchis. Il aprindem: aceeasi nuanta a brandului,
   dar cu saturatia crescuta. Derivat din paleta, deci urmeaza culoarea clientului.
   Prima declaratie ramane fallback pentru browsere fara culoare relativa. */
body.theme-dark::-webkit-scrollbar-thumb,
body.theme-dark ::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  background: hsl(from var(--color-primary) h calc(s * 1.3) calc(l * 1.02));
}

body.theme-dark::-webkit-scrollbar-thumb:hover,
body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
  background: hsl(from var(--color-primary) h calc(s * 1.4) calc(l * 1.15));
}

body.theme-dark,
body.theme-dark * {
  scrollbar-color: hsl(from var(--color-primary) h calc(s * 1.3) calc(l * 1.02)) var(--color-bg);
}

/* --------------------------------------------------------------------------
   Images
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Bootstrap Button Overrides
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: var(--border-radius);
  padding: 0.625rem 1.25rem;
  font-size: var(--font-size-sm);
  transition: var(--transition);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.5;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-primary,
.btn-primary:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary, var(--color-white));
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-on-primary, var(--color-white));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.btn-outline-primary {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary, var(--color-white));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.btn-secondary {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-border);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-danger {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.btn-danger:hover {
  background-color: var(--color-danger);
  color: var(--color-white);
  filter: brightness(0.9);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: var(--font-size-base);
  border-radius: var(--border-radius-lg);
}

.btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: var(--font-size-xs);
  border-radius: var(--border-radius-sm);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
}

/* --------------------------------------------------------------------------
   Bootstrap Badge Overrides
   -------------------------------------------------------------------------- */
.badge {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--font-size-xs);
  padding: 0.25em 0.6em;
  border-radius: var(--border-radius-sm);
}

.badge-primary,
.bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary, var(--color-white));
}

.badge-success {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary-dark);
}

.badge-danger {
  background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
  color: var(--color-danger);
}

.badge-warning {
  background-color: color-mix(in srgb, var(--color-warning) 7%, var(--color-white) 93%);
  color: color-mix(in srgb, var(--color-warning) 70%, var(--color-text) 30%);
}

.badge-info {
  background-color: color-mix(in srgb, var(--color-info) 7%, var(--color-white) 93%);
  color: var(--color-info);
}

/* --------------------------------------------------------------------------
   Form Input Overrides
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  font-family: var(--font-family);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.625rem 0.875rem;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background-color: var(--color-white);
  transition: var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
  outline: none;
}

.form-control::placeholder {
  color: var(--color-text-light);
}

.form-label {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: 0.375rem;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: var(--color-primary);
}

/* ==========================================================================
   FIX: Theme custom CSS (ex. lapascan script_header) folosesc shorthand
   `input:focus { background: ... !important }` care reseteaza background-image
   pe checkbox/radio, ascunzand checkmark SVG-ul Bootstrap. Override cu
   specificitate mai mare [type=checkbox]/[type=radio] + !important — bug 2026-05-26.
   ========================================================================== */
.form-check-input[type=checkbox]:checked,
.form-check-input[type=radio]:checked,
.form-check-input[type=checkbox]:focus,
.form-check-input[type=radio]:focus {
  background-image: var(--bs-form-check-bg-image) !important;
}
.form-check-input[type=checkbox]:checked,
.form-check-input[type=radio]:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

/* --------------------------------------------------------------------------
   Utility Classes - Colors
   -------------------------------------------------------------------------- */
.text-green { color: var(--color-primary) !important; }
.text-green-dark { color: var(--color-primary-dark) !important; }
.text-green-light { color: var(--color-primary-light) !important; }
.text-muted { color: var(--color-text-secondary) !important; }
.text-light-muted { color: var(--color-text-light) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }

.bg-green { background-color: var(--color-primary) !important; }
.bg-green-light { background-color: var(--color-primary-lightest) !important; }
.bg-green-dark { background-color: var(--color-primary-dark) !important; }
.bg-light { background-color: var(--color-bg) !important; }
.bg-white { background-color: var(--color-white) !important; }

/* --------------------------------------------------------------------------
   Utility Classes - Spacing Sections
   -------------------------------------------------------------------------- */
.section {
  padding: var(--spacing-3xl) 0;
}

.section-sm {
  padding: var(--spacing-2xl) 0;
}

.section-lg {
  padding: 5rem 0;
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-2xl);
  max-width: 600px;
}

.section-title-center {
  text-align: center;
}

.section-subtitle-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Utility Classes - Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: 1280px;
}

.container-narrow {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.container-wide {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --------------------------------------------------------------------------
   Utility Classes - Misc
   -------------------------------------------------------------------------- */
.rounded-custom { border-radius: var(--border-radius) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }

.shadow-custom-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-custom-md { box-shadow: var(--shadow-md) !important; }
.shadow-custom-lg { box-shadow: var(--shadow-lg) !important; }

.border-custom { border: 1px solid var(--color-border) !important; }

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

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

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

.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--spacing-xl) 0;
  border: none;
}

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

/* --------------------------------------------------------------------------
   Card Base
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
  /* Bootstrap 5.3 pune pe `.card` culoarea `var(--bs-body-color)` = #212529, adica
     paleta LUI de tema DESCHISA — iar `--bs-body-color` nu e suprascris in niciuna
     din temele noastre. Repictam fundalul din paleta clientului, dar pana acum
     lasam textul lui Bootstrap => pe temele INCHISE orice text care mosteneste
     culoarea din card iesea negru pe negru. Masurat 30 aug pe cetinis: titlul din
     „Completeaza comanda" avea 1.15:1 (pragul e 4.5), la fel pe porcusorul 1.02:1.
     Pe temele deschise trece de la #212529 la --color-text (~#1e293b): imperceptibil. */
  color: var(--color-text);
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   Page Transition
   -------------------------------------------------------------------------- */
.page-content {
  min-height: 60vh;
  animation: fadeInUp 0.3s ease;
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInShake {
  0% { opacity: 0; transform: translateX(-8px); }
  30% { opacity: 1; transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   Site Toast (global feedback notification)
   -------------------------------------------------------------------------- */
.site-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}

.site-toast.site-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.site-toast-content {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-text);
  color: #ffffff;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

/* Pe mobil: toast la TOP (sub navbar), text multi-line ca sa se vada tot */
@media (max-width: 768px) {
  .site-toast {
    bottom: auto;
    top: calc(env(safe-area-inset-top, 0px) + 76px);
    left: 1rem;
    right: 1rem;
    transform: translateY(-30px);
    max-width: none;
    width: auto;
  }
  .site-toast.site-toast-show {
    transform: translateY(0);
  }
  .site-toast-content {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0.875rem 1.1rem;
    white-space: normal;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  }
  .site-toast-content i {
    flex-shrink: 0;
    margin-top: 1px;
  }
}

.site-toast-success .site-toast-content {
  background: var(--color-primary-dark);
}

.site-toast-error .site-toast-content {
  background: var(--color-danger);
}

/* Avertisment (ex: „Alege mai întâi o variantă") + informativ — culori din paleta Identitate */
/* Bandă colorată => text alb (regula ZONE), nu se suprascrie culoarea din baza. */
.site-toast-warning .site-toast-content {
  background: color-mix(in srgb, var(--color-warning) 88%, #000 12%);
}

.site-toast-info .site-toast-content {
  background: var(--color-info);
}

/* --------------------------------------------------------------------------
   Scroll Reveal Animations (triggered by IntersectionObserver)
   -------------------------------------------------------------------------- */
/* Desktop: reveal animations handled by JS scroll observer in main.js */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal { transform: translateY(24px); }
.reveal-left { transform: translateX(-24px); }
.reveal-right { transform: translateX(24px); }
.reveal-scale { transform: scale(0.95); }

.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: none;
}

/* Reduced motion: no animations */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Stagger children delay utility */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.5s; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 0.6s; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 0.7s; }
.reveal-stagger > .reveal:nth-child(9) { transition-delay: 0.8s; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Social Proof Popup
   -------------------------------------------------------------------------- */
.social-proof {
  position: fixed;
  bottom: 5rem;
  left: 2rem;
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 1rem 1.375rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  z-index: var(--z-toast);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 360px;
  border: 1px solid var(--color-primary-lightest);
  backdrop-filter: blur(8px);
}

.social-proof.visible {
  transform: translateX(0);
  opacity: 1;
}

.social-proof-image {
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--color-primary-lightest);
}

.social-proof-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-proof-content {
  flex: 1;
  min-width: 0;
}

.social-proof-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.3;
}

.social-proof-action {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.social-proof-product {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.social-proof-time {
  font-size: 0.6875rem;
  color: var(--color-text-light);
  margin-top: 0.125rem;
}

.social-proof-close {
  position: absolute;
  top: 0.375rem;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 0.75rem;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.social-proof-close:hover {
  color: var(--color-text);
}

@media (max-width: 576px) {
  .social-proof {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------
   FAQ Accordion Customization

   Bootstrap randeaza acordeonul cu variabilele lui proprii (--bs-accordion-*),
   care sunt ALBE hardcodat. Pe temele intunecate rezulta text deschis pe fundal
   alb = INVIZIBIL (bug raportat pe „Agentie Creativa & Foto", 2026-07-27).
   Le legam pe TOATE de paleta, ca acordeonul sa fie corect pe orice tema.
   -------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-color: var(--color-text);
  --bs-accordion-bg: var(--color-white);
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-border-radius: var(--border-radius);
  --bs-accordion-inner-border-radius: var(--border-radius-sm);
  --bs-accordion-btn-color: var(--color-text);
  --bs-accordion-btn-bg: var(--color-white);
  --bs-accordion-btn-focus-border-color: var(--color-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem
    color-mix(in srgb, var(--color-primary) 25%, transparent);
  --bs-accordion-body-color: var(--color-text-secondary);
  --bs-accordion-active-color: var(--color-on-primary, #fff);
  --bs-accordion-active-bg: var(--color-primary);
}
/* Sageata: Bootstrap o are ca SVG data-URI cu culoare fixa (var() NU merge in
   data-URI) => o recoloram cu filtre, dupa luminanta suprafetei. */
.accordion-button::after {
  filter: brightness(0) saturate(0) invert(0.35);
}
body.theme-dark .accordion-button::after {
  filter: brightness(0) invert(1) opacity(0.75);
}
.accordion-button:not(.collapsed) {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary, #fff) !important;
}
.accordion-button:not(.collapsed)::after,
body.theme-dark .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}
/* Pe teme cu primary DESCHIS (accent auriu/cyan) sageata alba dispare pe butonul
   activ — o inchidem odata cu textul (--color-on-primary devine inchis). */
body.on-primary-dark .accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(0);
}

/* --------------------------------------------------------------------------
   Google Login Button + Social Login Divider
   -------------------------------------------------------------------------- */
/* Butonul Google are DOUA variante oficiale (light si dark) — nu se tematizeaza
   cu variabilele sitului. Inainte era `background: var(--color-white)` cu text
   hardcodat #3c4043: pe temele INCHISE `--color-white` e suprafata inchisa, deci
   iesea gri-inchis pe fundal inchis = ILIZIBIL. Acum: varianta light implicit,
   varianta dark oficiala pe `body.theme-dark`. */
.btn-google-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 1rem;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: var(--border-radius-sm, 6px);
  color: #3c4043;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.btn-google-login:hover {
  background: #f7f8f8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-color: #c6c6c6;
  color: #3c4043;
  text-decoration: none;
}
.btn-google-login:active {
  background: #eef0f1;
}

/* Varianta DARK oficiala Google (fundal #131314, text #e3e3e3, rama #8e918f) */
body.theme-dark .btn-google-login {
  background: #131314;
  border-color: #8e918f;
  color: #e3e3e3;
}
body.theme-dark .btn-google-login:hover {
  background: #1e1f20;
  border-color: #a8abab;
  color: #e3e3e3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
body.theme-dark .btn-google-login:active {
  background: #282a2c;
}
.btn-google-login svg {
  flex-shrink: 0;
}

.social-login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1rem 0;
  color: var(--color-text-light);
  font-size: 0.8rem;
}
.social-login-divider::before,
.social-login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--color-border);
}
.social-login-divider span {
  padding: 0 0.75rem;
}

/* --------------------------------------------------------------------------
   Hide reCAPTCHA badge (terms link is in footer per Google's requirements)
   -------------------------------------------------------------------------- */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ==========================================================================
   GLOBAL: Table row hover — pointer + highlight din Identitate
   ========================================================================== */
/* Randuri clicabile din admin panel si frontend (orders, products, customers etc.) */
table tbody tr.clickable,
table tbody tr[onclick],
table tbody tr[data-href],
.stats-table tbody tr,
.orders-table tbody tr,
.products-table tbody tr,
.data-table tbody tr,
.admin-table tbody tr {
  cursor: pointer;
  transition: background-color .15s ease;
}

table tbody tr.clickable:hover,
table tbody tr[onclick]:hover,
table tbody tr[data-href]:hover,
.stats-table tbody tr:hover,
.orders-table tbody tr:hover,
.products-table tbody tr:hover,
.data-table tbody tr:hover,
.admin-table tbody tr:hover {
  background-color: var(--color-primary-lightest) !important;
}

/* Liste clicabile (cards in grid, list items) */
.list-item-clickable,
.card-link {
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.list-item-clickable:hover,
.card-link:hover {
  background-color: var(--color-primary-lightest);
  border-color: var(--color-primary);
}

/* ==========================================================================
   GLOBAL: Breadcrumb spacing — unitar pe toate paginile
   ========================================================================== */
.product-breadcrumbs-wrap {
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
}
.product-breadcrumbs-wrap .breadcrumb {
  margin-bottom: 0.25rem;
}

/* ==========================================================================
   GLOBAL: Bootstrap btn-success — remap la primary din Identitate
   (by default Bootstrap are rgb(25,135,84) verde — nu respecta tema)
   ========================================================================== */
.btn-success {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: #ffffff !important;
}
.btn-outline-success {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-color: transparent !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}
.text-success { color: var(--color-primary) !important; }
.bg-success { background-color: var(--color-primary) !important; }
.border-success { border-color: var(--color-primary) !important; }

/* ==========================================================================
   Form validation — required marker (*) + invalid feedback (universal)
   ========================================================================== */
.req {
  color: var(--color-danger);
  margin-left: 2px;
  font-weight: 700;
}
.form-control.is-invalid,
.form-select.is-invalid,
textarea.is-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent) !important;
}
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--color-danger);
}
.is-invalid ~ .invalid-feedback,
.invalid-feedback[style*="display: block"] {
  display: block !important;
}

/* ============================================================
   CS Badges — chip themed (light + dark adaptive)
   ============================================================ */
.cs-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    border: 1px solid transparent !important;
    transition: all .15s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
.cs-badge i { font-size: 0.72rem; line-height: 1; }

.cs-badge-soft {
    background: color-mix(in srgb, var(--color-text) 22%, transparent) !important;
    color: var(--color-text-secondary) !important;
    border-color: color-mix(in srgb, var(--color-text) 40%, transparent) !important;
}
.cs-badge-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px -2px rgba(var(--color-primary-rgb, 16,185,129), 0.45) !important;
}
.cs-badge-success {
    background: linear-gradient(135deg, var(--color-success), color-mix(in srgb, var(--color-success) 88%, var(--color-text) 12%)) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--color-success) 40%, transparent) !important;
}
.cs-badge-warning {
    background: color-mix(in srgb, var(--color-warning) 20%, transparent) !important;
    color: color-mix(in srgb, var(--color-warning) 85%, var(--color-text) 15%) !important;
    border-color: color-mix(in srgb, var(--color-warning) 40%, transparent) !important;
}
.cs-badge-info {
    background: color-mix(in srgb, var(--color-info) 20%, transparent) !important;
    color: color-mix(in srgb, var(--color-info) 85%, var(--color-text) 15%) !important;
    border-color: color-mix(in srgb, var(--color-info) 40%, transparent) !important;
}
.cs-badge-danger {
    background: color-mix(in srgb, var(--color-danger) 20%, transparent) !important;
    color: color-mix(in srgb, var(--color-danger) 85%, var(--color-text) 15%) !important;
    border-color: color-mix(in srgb, var(--color-danger) 40%, transparent) !important;
}

/* Bootstrap badges — force white text on colored backgrounds */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-secondary {
    color: #ffffff !important;
}
.badge.bg-warning {
    color: var(--color-text) !important;
}

/* ============================================================
 * Order detail page — WOW design (theme-aware: dark + light)
 * ============================================================ */

/* Stat cards (Data, Status, Livrare, Plata, Total) */
.order-stat-cards .order-stat-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 8%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 3%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}
.order-stat-cards .order-stat-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.order-stat-cards .order-stat-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 90%, white) 0%,
        var(--color-primary) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.order-stat-cards .order-stat-body {
    min-width: 0;
    flex: 1 1 auto;
}
.order-stat-cards .order-stat-label {
    font-size: 0.62rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}
.order-stat-cards .order-stat-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-stat-cards .order-stat-value-total {
    font-size: 1.05rem;
    color: var(--color-primary);
}
.order-stat-cards .order-stat-card-total {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 18%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 8%, transparent) 100%);
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Order items table — theme-aware (override Bootstrap .table light default) */
.dash-orders-table {
    background-color: transparent !important;
    color: var(--color-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.dash-orders-table thead th,
.dash-orders-table tbody td,
.dash-orders-table tfoot td {
    background-color: transparent !important;
    color: var(--color-text);
    border-color: var(--color-border);
}
.dash-orders-table thead th {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    padding: 0.7rem 1rem;
}
.dash-orders-table tbody td,
.dash-orders-table tfoot td {
    padding: 0.85rem 1rem;
}
.dash-orders-table tfoot tr {
    border-top: 1px solid var(--color-border);
}

/* Address cards */
.order-addresses .order-address-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.order-addresses .order-address-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.order-addresses .order-address-body {
    padding: 1.1rem 1.25rem 1.25rem 1.25rem;
}
.order-addresses .order-address-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.92rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
}
.order-addresses .order-address-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
    color: var(--color-text);
    font-size: 0.82rem;
}
.order-addresses .order-address-line:last-child {
    margin-bottom: 0;
}
.order-addresses .order-address-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}

@media (max-width: 768px) {
    .order-stat-cards .order-stat-card { padding: 0.7rem 0.85rem; gap: 0.55rem; }
    .order-stat-cards .order-stat-icon { width: 36px; height: 36px; font-size: 0.9rem; border-radius: 10px; }
    .order-stat-cards .order-stat-value { font-size: 0.78rem; }
    .order-stat-cards .order-stat-value-total { font-size: 0.95rem; }
}

/* css/components.css */
/* ==========================================================================
   components.css - Reusable Frontend Components for cloudshop
   Health Supplements & CBD Cosmetics E-Commerce

   Ultima modificare: 2026-10-20 23:12
   Modificari:
     2026-10-20 23:12 — Textul de pe suprafețele de brand (butoane primare, bulina din filtre, „înapoi sus”, insigne) = --color-on-primary (rezervă --color-white).
     2026-09-10 17:10 — Lista derulanta select2 (localitati, judete, orice select cautabil) primeste
       fundal de SUPRAFATA si culoare de text din tema. Fara asta ramanea albul fix din select2.min.css,
       iar pe temele inchise optiunile erau alb pe alb. Plus optiunea SELECTATA pe tema inchisa si
       bara de derulare a listei.
     2026-07-27 23:05 — Footer zona 6 (--footer-fg derivat din suprafata) + newsletter zona 3 (on-primary) + cookie link mix text
     2026-05-06 09:00 — Back-to-top: coborat la bottom 0.75rem (era 2rem) ca sa
                        nu se ciocneasca cu bula WhatsApp configurata din admin
                        pe pozitii inalte (ex: bottom 80-150px). Aplica la toti clientii.
     2026-05-01 12:00 — Bula WhatsApp: scos pozitia hardcodata (vine inline din layout.php)
                        + reguli pentru orientarea labelului in functie de anchor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Newsletter Section
   -------------------------------------------------------------------------- */
.newsletter-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.newsletter-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.newsletter-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.newsletter-section .section-title {
  font-size: var(--font-size-2xl);
  margin-bottom: 0.5rem;
}

.newsletter-section .section-subtitle {
  font-size: var(--font-size-base);
  color: color-mix(in srgb, var(--color-on-primary, #fff) 85%, transparent);
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
}

.newsletter-form {
  width: 100%;
}

.newsletter-form .form-control {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-sm);
  background: var(--color-white);
}

.newsletter-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

.newsletter-form .btn {
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-lg);
  font-weight: 600;
  white-space: nowrap;
}

.newsletter-note {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-on-primary, #fff) 72%, transparent);
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Benefits Bar
   -------------------------------------------------------------------------- */
.benefits-bar {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-primary-lightest) 0%, var(--color-white) 100%);
  flex-wrap: wrap;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  transition: all 0.3s ease;
  border-radius: var(--border-radius-lg);
}

.benefit-item:hover {
  background-color: var(--color-primary-lightest);
  transform: translateY(-2px);
}

.benefit-item-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
  border-radius: var(--border-radius-lg);
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  border: 1px solid var(--color-primary-lightest);
}

.benefit-item:hover .benefit-item-icon {
  background-color: var(--color-primary);
  color: var(--color-on-primary, var(--color-white));
  border-color: var(--color-primary);
}

.benefit-item-text {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.benefit-item-subtext {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Alert / Flash Messages
   -------------------------------------------------------------------------- */
.alert-custom {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  margin-bottom: 1rem;
  animation: slideDown 0.3s ease;
  border: 1px solid transparent;
}

.alert-custom .alert-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.alert-custom .alert-content {
  flex: 1;
}

.alert-custom .alert-title {
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.alert-custom .alert-close {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  font-size: 1.125rem;
  padding: 0;
  line-height: 1;
  transition: var(--transition-fast);
}

.alert-custom .alert-close:hover {
  opacity: 1;
}

.alert-success {
  background-color: var(--color-primary-lightest);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.alert-error {
  background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-white) 55%);
  color: color-mix(in srgb, var(--color-danger) 65%, var(--color-text) 35%);
}

.alert-warning {
  background-color: color-mix(in srgb, var(--color-warning) 7%, var(--color-white) 93%);
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-white) 55%);
  color: color-mix(in srgb, var(--color-warning) 55%, var(--color-text) 45%);
}

.alert-info {
  background-color: color-mix(in srgb, var(--color-info) 7%, var(--color-white) 93%);
  border-color: color-mix(in srgb, var(--color-info) 40%, var(--color-white) 60%);
  color: color-mix(in srgb, var(--color-info) 70%, var(--color-text) 30%);
}

/* --------------------------------------------------------------------------
   Loading Spinner
   -------------------------------------------------------------------------- */
.loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

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

.loading-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  backdrop-filter: blur(2px);
}

.loading-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

/* --------------------------------------------------------------------------
   Empty State
   -------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state-icon {
  font-size: 3rem;
  color: var(--color-text-light);
  margin-bottom: 1rem;
  opacity: 0.4;
}

.empty-state-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Star Rating Display
   -------------------------------------------------------------------------- */
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.star-rating .star {
  color: var(--color-warning);
  font-size: var(--font-size-sm);
}

.star-rating .star-empty {
  color: var(--color-border);
}

.star-rating .star-half {
  color: var(--color-warning);
  position: relative;
}

/* --------------------------------------------------------------------------
   Quantity Selector (Standalone)
   -------------------------------------------------------------------------- */
.qty-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.qty-selector .qty-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-text);
  transition: var(--transition-fast);
  user-select: none;
}

.qty-selector .qty-btn:hover {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
}

.qty-selector .qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.qty-selector .qty-input {
  width: 44px;
  height: 36px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family);
  /* Fundalul TREBUIE declarat: fara el, browserul deseneaza input-ul ALB, iar pe
     temele intunecate `--color-text` e tot deschis => cifra cantitatii devenea
     INVIZIBILA (alb pe alb). Acelasi fundal ca butoanele +/- de langa el, ca
     tot controlul sa arate dintr-o bucata. (raportat pe porcusorulpofticios) */
  background: var(--color-bg);
  color: var(--color-text);
  -moz-appearance: textfield;
}

.qty-selector .qty-input::-webkit-inner-spin-button,
.qty-selector .qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Back to Top Button
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 0.75rem;
  right: calc(2rem + 4px);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-on-primary, var(--color-white));
  border: none;
  border-radius: var(--border-radius-full);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
  cursor: pointer;
  font-size: 1.125rem;
  z-index: var(--z-sticky);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* --------------------------------------------------------------------------
   WhatsApp Float Button (Mobile)
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  /* Pozitia (top/bottom + left/right) este injectata inline din layout.php
     pe baza setarilor din admin (Setari > Contact > card "Buton WhatsApp").
     Default: bottom-right, 32px lateral / 96px vertical pe desktop. */
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-full);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  cursor: pointer;
  font-size: 1.625rem;
  z-index: var(--z-sticky);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: whatsapp-pulse 3s ease-in-out infinite;
}

/* Label tooltip — apare in directia opusa marginii orizontale */
.whatsapp-float--bottom-left .whatsapp-float-label,
.whatsapp-float--top-left    .whatsapp-float-label {
  right: auto;
  left: calc(100% + 0.75rem);
}

@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0.1); }
}

.whatsapp-float:hover {
  background-color: #20bd5a;
  color: var(--color-white);
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5);
  animation: none;
}

.whatsapp-float-label {
  position: absolute;
  right: calc(100% + 0.75rem);
  white-space: nowrap;
  background: var(--color-white);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: var(--transition-fast);
}

.whatsapp-float:hover .whatsapp-float-label {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Toast Notifications
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  min-width: 280px;
  max-width: 400px;
  animation: slideDown 0.3s ease;
}

.toast-success {
  border-left: 3px solid var(--color-primary);
}

.toast-error {
  border-left: 3px solid var(--color-danger);
}

.toast-warning {
  border-left: 3px solid var(--color-warning);
}

.toast-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.toast-success .toast-icon { color: var(--color-primary); }
.toast-error .toast-icon { color: var(--color-danger); }
.toast-warning .toast-icon { color: var(--color-warning); }

.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  padding: 0;
  transition: var(--transition-fast);
}

.toast-close:hover {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Cookie Banner
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: 1.25rem;
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.cookie-banner.show {
  display: flex;
  animation: slideUp 0.4s ease;
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 900px;
}

.cookie-banner-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 600px;
}

.cookie-banner-text a {
  color: color-mix(in srgb, var(--color-primary) 52%, var(--color-text));
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Push Notification Prompt ────────────────────────────────────────── */
#push-prompt {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1050;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
}

#push-prompt.push-prompt-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.push-prompt-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  max-width: 420px;
}

.push-prompt-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  background: var(--color-primary);
  /* on-primary, nu alb: pe un brand deschis (auriu, lime) albul e invizibil.
     Vezi REGULA ZONE — zona 3, banda/buton de brand. */
  color: var(--color-on-primary, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.push-prompt-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.push-prompt-text strong {
  font-size: 0.82rem;
  color: var(--color-text);
}

.push-prompt-text span {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
}

.push-prompt-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.push-prompt-btn {
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.push-prompt-accept {
  background: var(--color-primary);
  /* on-primary, nu alb: pe un brand deschis (auriu, lime) albul e invizibil.
     Vezi REGULA ZONE — zona 3, banda/buton de brand. */
  color: var(--color-on-primary, #fff);
  border-radius: 20px;
}

.push-prompt-accept:hover {
  background: var(--color-primary-dark);
}

.push-prompt-dismiss {
  background: var(--color-bg-alt);
  color: var(--color-text-secondary);
}

.push-prompt-dismiss:hover {
  background: var(--color-border);
}

@media (max-width: 480px) {
  #push-prompt {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
  }
  .push-prompt-inner {
    max-width: 100%;
  }
}

/* Cookie Settings Panel */
.cookie-settings-panel {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 1);
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.cookie-settings-inner {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 480px;
  width: 100%;
}

.cookie-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.cookie-settings-header h6 {
  margin: 0;
  font-weight: 600;
}

.cookie-settings-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
}

.cookie-settings-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.cookie-settings-body {
  padding: 1.25rem;
}

.cookie-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
}

.cookie-option + .cookie-option {
  border-top: 1px solid var(--color-border);
}

.cookie-option-info strong {
  font-size: var(--font-size-sm);
  display: block;
  margin-bottom: 0.25rem;
}

.cookie-option-info p {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

.cookie-settings-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Newsletter Section — detailed sub-components
   -------------------------------------------------------------------------- */
.newsletter-inner {
  padding: 0.5rem 0;
}

.newsletter-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--color-on-primary, #fff);
  margin-bottom: 0.625rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.newsletter-text {
  font-size: var(--font-size-base);
  color: color-mix(in srgb, var(--color-on-primary, #fff) 85%, transparent);
  margin: 0;
  line-height: 1.6;
}

.newsletter-form-group {
  display: flex;
  gap: 0.75rem;
}

.newsletter-input-wrapper {
  position: relative;
  flex: 1;
}

.newsletter-input-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
  font-size: 1rem;
  pointer-events: none;
}

.newsletter-input {
  width: 100%;
  padding: 1rem 1.25rem 1rem 3rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-white);
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.newsletter-input:focus {
  border-color: var(--color-on-primary, #fff);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.newsletter-submit {
  padding: 1rem 1.75rem;
  border-radius: var(--border-radius-full);
  font-weight: 700;
  white-space: nowrap;
  font-size: var(--font-size-base);
  background: var(--color-on-primary, #fff);
  color: var(--color-primary-dark);
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.01em;
}

.newsletter-submit:hover {
  background: color-mix(in srgb, var(--color-on-primary, #fff) 88%, var(--color-primary));
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.newsletter-disclaimer {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-on-primary, #fff) 68%, transparent);
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.newsletter-message {
  font-size: var(--font-size-sm);
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius);
}

.newsletter-message-success {
  color: var(--color-on-primary, #fff);
  background: color-mix(in srgb, var(--color-on-primary, #fff) 20%, transparent);
}

.newsletter-message-error {
  color: color-mix(in srgb, var(--color-danger) 28%, var(--color-white) 72%);
  background: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

@media (max-width: 767.98px) {
  .newsletter-title {
    font-size: 1.375rem;
  }

  .newsletter-form-group {
    flex-direction: column;
  }

  .newsletter-submit {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Site Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(180deg, var(--color-text) 0%, var(--color-text) 100%);
  /* ZONA 6 — footerul e o banda INCHISA (fundalul lui = var(--color-text)).
     Textul din interior NU poate veni din scala de text a paginii: pe temele light
     ar insemna gri-inchis pe navy (masurat 1,99:1 = ilizibil). Il derivam din
     SUPRAFATA footerului. Directia difera pe light vs dark, deci varianta dark
     e suprascrisa mai jos. (audit contrast 62 de teme, 2026-07-27) */
  --footer-fg: var(--color-white);
  --footer-fg-muted: color-mix(in srgb, var(--footer-fg) 78%, transparent);
  --footer-fg-soft: color-mix(in srgb, var(--footer-fg) 62%, transparent);
  color: var(--footer-fg-muted);
  padding: 3.5rem 0 0;
  margin-top: 0;
}
/* Pe temele intunecate fundalul footerului e dat de tema (mix din --color-bg),
   deci culoarea lizibila e chiar textul paginii (deschis).
   ⚠️ BUG REPARAT 2026-07-29: regula de mai sus pune `background: linear-gradient(...)`
   din `--color-text`. Pe DARK, `--color-text` e DESCHIS => footer deschis, iar
   `--footer-fg` (tot din --color-text) devine text deschis pe fundal deschis =
   INVIZIBIL. Gradientul e background-IMAGE, deci un `background-color` din tema
   clientului nu-l putea acoperi. Aici il stingem explicit si punem fundalul
   documentat pentru dark: mix(--color-bg, negru). Prins la QA vizual pe
   porcusorulpofticios (tema dark). Afecteaza ORICE client cu tema inchisa. */
body.theme-dark .site-footer {
  --footer-fg: var(--color-text);
  background-image: none;
  background-color: color-mix(in srgb, var(--color-bg) 92%, #000);
}

.footer-brand {
  margin-bottom: 1.25rem;
}

.footer-brand img {
  height: 38px;
  width: auto;
  filter: brightness(10);
}

.footer-description {
  font-size: 0.875rem;
  color: var(--footer-fg-muted);
  line-height: 1.65;
  max-width: 300px;
  margin-bottom: 0;
}

.footer-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--footer-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  position: relative;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--footer-fg-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--footer-fg);
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.footer-contact i {
  color: var(--color-primary);
  font-size: 0.875rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact a,
.footer-contact span {
  color: var(--footer-fg-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-contact a:hover {
  color: var(--footer-fg);
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.footer-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--footer-fg-muted);
  border-radius: var(--border-radius-full);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-social a:hover {
  background-color: var(--color-primary);
  color: var(--footer-fg);
  transform: translateY(-3px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-color: var(--color-primary);
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--footer-fg) 14%, transparent);
  margin-top: 2.5rem;
  padding: 1.25rem 0;
}

.footer-copyright {
  font-size: 0.8125rem;
  color: var(--footer-fg-muted);
  margin: 0;
}

.footer-anpc {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

.footer-anpc a {
  display: inline-block;
  transition: opacity 0.2s;
}

.footer-anpc img {
  height: 40px;
  border-radius: 4px;
  opacity: 0.85;
}

.footer-anpc a:hover img {
  opacity: 1;
}

.footer-payment {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
}

.footer-payment-label {
  font-size: 0.8125rem;
  color: var(--footer-fg-muted);
}

.footer-payment i {
  font-size: 1.5rem;
  color: var(--footer-fg-muted);
}

@media (max-width: 767.98px) {
  .site-footer {
    padding-top: 2.5rem;
  }

  .footer-bottom .row {
    text-align: center;
  }

  .footer-copyright {
    margin-bottom: 1rem;
  }

  .footer-payment {
    justify-content: center;
    margin-top: 1rem;
  }
}

/* ============================================================================
   SITE CTA SECTIONS — reusable call-to-action banners from DB
   ============================================================================ */

.site-cta {
  padding: 2rem 0;
  text-align: center;
  color: #fff;
}

/* The inner card: contained, rounded, with background */
.site-cta-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  border-radius: var(--border-radius-xl, 16px);
  position: relative;
  overflow: hidden;
}

/* Background styles — applied on .site-cta-inner (not section) for rounded effect */
.site-cta-gradient-green .site-cta-inner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.site-cta-gradient-dark .site-cta-inner {
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text) 100%);
}
.site-cta-gradient-blue .site-cta-inner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 75%, var(--color-text) 25%) 0%, color-mix(in srgb, var(--color-info) 65%, var(--color-text) 35%) 100%);
}
.site-cta-solid-green .site-cta-inner {
  background: var(--color-primary);
}
.site-cta-solid-dark .site-cta-inner {
  background: var(--color-text);
}
.site-cta-light .site-cta-inner {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.site-cta-light .site-cta-title { color: var(--color-text); }
.site-cta-light .site-cta-text { color: var(--color-text-secondary); }
.site-cta-light .site-cta-badge { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); border-color: rgba(var(--color-primary-rgb), 0.2); }

.site-cta-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.site-cta-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.site-cta-title {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: inherit;
}

.site-cta-text {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  color: inherit;
}

.site-cta-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.site-cta-btn {
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: var(--border-radius);
}

@media (max-width: 768px) {
  .site-cta { padding: 1.5rem 0; }
  .site-cta-inner { padding: 2rem 1.25rem; border-radius: var(--border-radius-lg, 12px); }
  .site-cta-title { font-size: 1.5rem; }
  .site-cta-text { font-size: 0.95rem; }
  .site-cta-actions { flex-direction: column; align-items: center; }
  .site-cta-badges { gap: 0.35rem; }
  .site-cta-badge { font-size: 0.72rem; padding: 0.25rem 0.6rem; }
}

/* ============================================================================
   ACCOUNT PAGES — typography, clickable order rows, general styling
   ============================================================================ */

/* Headings in account pages use the heading font (Montserrat) */
.account-section h1,
.account-section h2,
.account-section h3,
.account-section h4,
.account-section h5 {
  font-family: var(--font-family-heading);
}

/* Clickable order rows in orders table */
.account-section .table-hover tbody tr[onclick] {
  transition: background-color 0.15s ease;
}

.account-section .table-hover tbody tr[onclick]:hover {
  background-color: var(--color-primary-lightest) !important;
}

.account-section .table-hover tbody tr[onclick]:hover td {
  color: var(--color-primary-dark);
}

/* ============================================================================
   ACCOUNT SIDEBAR NAVIGATION — styled menu for customer account pages
   ============================================================================ */

.account-nav {
  padding: 0;
}

.account-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-nav-link {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.account-nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-lightest);
  border-left-color: var(--color-primary-light);
}

.account-nav-link.active {
  color: var(--color-primary-dark);
  background: linear-gradient(135deg, var(--color-primary-lightest), color-mix(in srgb, var(--color-success) 12%, var(--color-white) 88%));
  border-left-color: var(--color-primary);
  font-weight: 600;
}

.account-nav-link.active i {
  color: var(--color-primary);
}

.account-nav-link i {
  width: 18px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
  transition: color 0.2s ease;
}

.account-nav-link:hover i {
  color: var(--color-primary);
}

.account-nav-link.text-danger {
  color: var(--color-danger) !important;
}

.account-nav-link.text-danger:hover {
  background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
  border-left-color: var(--color-danger);
}

/* Account user header in sidebar */
.account-user {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================================
   SELECT2 — Override cu tema MyCell (emerald + Figtree + border-radius)
   Folosit pentru Select2-uri din checkout + account-addresses pentru orase.
   ============================================================================ */

/* Wrapper-ul containerului: must be 100% identic cu .form-select din Bootstrap + tema */
.select2-container--default .select2-selection--single {
  /* height = padding 0.625rem × 2 + (font-size 14px × line-height 1.5) + border 2px = ~43px */
  height: 43px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-sm); /* 14px */
  color: var(--color-text);
  transition: var(--transition-fast);
  box-shadow: none;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  padding: 0 2.5rem 0 0.875rem; /* left 14px like form-select, right 2.5rem for arrow */
  color: var(--color-text);
  font-size: var(--font-size-sm);
  width: 100%;
  font-family: var(--font-family);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-text-light);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0.625rem;
  width: 20px;
}

/* Arrow: replace with a simple chevron that matches Bootstrap form-select */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  left: auto;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Focus state: emerald border + glow exactly like .form-control:focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
  outline: none;
}

/* Clear button: position tighter, neutral color */
.select2-container--default .select2-selection--single .select2-selection__clear {
  right: 30px;
  color: var(--color-text-light);
  font-weight: 400;
  margin-right: 0.25rem;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--color-danger);
}

/* Dropdown panel
   ⚠️ `background-color` e OBLIGATORIU aici. Fara el ramane alb fix, din select2.min.css
   (`.select2-dropdown{background-color:#fff}`), iar pe temele INCHISE optiunile se scriu cu
   `--color-text` (aproape alb) pe panoul alb — adica lista de localitati de la finalizarea
   comenzii era ALBA PE ALB, invizibila (masurat pe cetinis, 10 sep 2026: panou rgb(255,255,255),
   text rgb(234,242,236)). `--color-white` inseamna SUPRAFATA, nu culoarea alba: pe teme deschise
   e alb, pe teme inchise e suprafata cardului. */
.select2-container--default .select2-dropdown {
  background-color: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  margin-top: 4px;
  overflow: hidden;
}

/* Search input inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text);
  background-color: var(--color-white);
  transition: var(--transition-fast);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.12);
  outline: none;
}

.select2-container--default .select2-search--dropdown {
  padding: 0.5rem;
}

/* Result items */
.select2-container--default .select2-results__option {
  padding: 0.625rem 0.875rem;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-family: var(--font-family);
  border-radius: var(--border-radius-sm);
  margin: 0 0.25rem;
}

.select2-container--default .select2-results__options {
  padding: 0.25rem 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--color-primary);
  color: var(--color-on-primary, var(--color-white));
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary-dark);
}

/* Pe temele inchise, `--color-primary-lightest` e o tenta INCHISA, iar `--color-primary-dark`
   scris peste ea abia se citeste. Derivarea e directionala, deci merge sub clasa de tema. */
body.theme-dark .select2-container--default .select2-results__option[aria-selected=true],
body.theme-dark .select2-container--default .select2-results__option--selected {
  color: var(--color-primary);
}

/* Bara de derulare a listei — pe teme inchise cea implicita iese ca o dunga alba. */
.select2-container--default .select2-results__options::-webkit-scrollbar { width: 8px; }
.select2-container--default .select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
.select2-container--default .select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.select2-container--default .select2-results__message {
  padding: 0.75rem 0.875rem;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* Loading state */
.select2-container--default .select2-results__option.loading-results {
  color: var(--color-text-light);
  font-style: italic;
}

/* Container spans full width, no weird inline-block gaps */
.select2-container {
  width: 100% !important;
}

/* --- Select2 icon prepend wrapper (matches Bootstrap input-group-text look) --- */
.select2-icon-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
}

.select2-icon-prepend {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 43px;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  color: var(--color-text-light);
  font-size: 1rem;
  flex-shrink: 0;
  z-index: 1;
}

/* Adjust Select2 container inside wrapper to connect to icon prepend */
.select2-icon-wrapper .select2-container {
  flex: 1;
}

.select2-icon-wrapper .select2-container--default .select2-selection--single {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Focus: glow on BOTH icon + select2 together */
.select2-icon-wrapper:has(.select2-container--focus) .select2-icon-prepend,
.select2-icon-wrapper:has(.select2-container--open) .select2-icon-prepend {
  border-color: var(--color-primary);
}

/* ============================================================================
   End Select2 overrides
   ============================================================================ */

/* ============================================================================
   Tooltip — JS-based via [data-tip]
   Rendered as fixed <div> on <body>, never clipped by overflow.
   ============================================================================ */
.site-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    background: var(--color-text);
    color: var(--color-border);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
    max-width: 220px;
    width: max-content;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    letter-spacing: 0.01em;
    opacity: 0;
    transition: opacity 0.15s;
}
.site-tooltip.visible { opacity: 1; }
.site-tooltip::after {
    content: '';
    position: absolute;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
}
.site-tooltip.pos-top::after { top: 100%; border-top-color: var(--color-text); }
.site-tooltip.pos-bottom::after { bottom: 100%; border-bottom-color: var(--color-text); }

/* ============================================================================
   Account Forms — compact inputs matching checkout size
   ============================================================================ */
#addressForm .form-control,
#addressForm .form-select {
    padding: 0.3rem 0.65rem;
    font-size: 0.84rem;
    height: auto;
    min-height: 0;
}
#addressForm .input-group-text {
    padding: 0.3rem 0.55rem;
    font-size: 0.84rem;
}
#addressForm .form-label {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}
#addressForm .btn-infocui-lookup {
    padding: 0.3rem 0.5rem;
}
#addressForm .input-group > .input-group-text:first-child + .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* Select2 compact inside address form */
#addressForm .select2-container--default .select2-selection--single {
    height: 34px;
    min-height: 34px;
    font-size: 0.84rem;
}
#addressForm .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    font-size: 0.84rem;
    padding-left: 0.75rem;
}
#addressForm .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

/* ==========================================================================
   PASSWORD TOGGLE (eye icon) — login, reset-password, etc.
   ========================================================================== */
.password-toggle-group .password-toggle {
  border-left: none !important;
  border-color: var(--color-border) !important;
  background: var(--color-white) !important;
  color: var(--color-text-secondary) !important;
  transition: all 0.2s ease;
  padding: 0.5rem 0.85rem;
}
.password-toggle-group .password-toggle:hover {
  color: var(--color-primary) !important;
  background: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}
.password-toggle-group .password-toggle:focus {
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 239, 68, 68), 0.2);
  outline: none;
}
.password-toggle-group .password-toggle i {
  pointer-events: none;
  font-size: 0.95rem;
}
/* Admin login: eye button este absolute positioned */
.password-eye-toggle:hover {
  color: var(--color-primary) !important;
}

/* css/responsive.css */
/* ==========================================================================
   responsive.css - Media Queries & Breakpoints for cloudshop
   Health Supplements & CBD Cosmetics E-Commerce

   Ultima modificare: 2026-07-16 21:55
   Modificari:
     2026-09-22 22:05 — Curatenie: sters blocul .breadcrumbs (markup vechi, nefolosit in niciun sablon)
     2026-07-16 21:55 — Produse similare (max 4): la 992-1200px pastram 4 coloane in loc de 3,
                        ca al 4-lea card sa nu ramana orfan pe randul doi.
     2026-05-06 09:00 — Back-to-top mobile: coborat la bottom 0.75rem (era 5rem
                        respectiv 4.5rem) ca sa nu se ciocneasca cu bula WhatsApp.
     2026-05-01 12:00 — Bula WhatsApp: scos pozitia hardcodata (top/bottom + left/right)
                        din breakpoint-urile mobile; sunt setate inline din layout.php.
   ========================================================================== */

/* ==========================================================================
   LARGE DESKTOP (max-width: 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  /* Produse similare = maxim 4 (product.php) → pastram 4 coloane pana la tableta,
     altfel al 4-lea card ramane orfan pe randul doi. Sub 992px devin 2+2 (mai jos). */
  .related-products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .benefits-bar {
    gap: 1rem;
  }

  .benefit-item {
    padding: 0.5rem 0.625rem;
  }
}

/* ==========================================================================
   DESKTOP (max-width: 992px)
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Typography scale down */
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  .section-title {
    font-size: 1.5rem;
  }

  /* Shop layout collapses sidebar */
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-sidebar {
    position: static;
    display: none;
  }

  .shop-sidebar.sidebar-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: var(--z-overlay);
    background: var(--color-white);
    padding: 1.5rem;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: slideFromLeft 0.3s ease;
  }

  @keyframes slideFromLeft {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }

  /* Sidebar overlay — now handled in shop.css base styles */

  /* Mobile filter toggle button */
  .shop-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
  }

  /* Product detail single column */
  .product-detail {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .product-gallery {
    position: static;
  }

  /* Gallery: no zoom cursor on tablet/mobile */
  .product-gallery-main {
    cursor: default;
  }

  /* Product detail & tabs section spacing */
  .product-detail-section {
    padding: 0;
  }

  .product-tabs-section {
    padding: 0 0 2rem;
  }

  /* Trust info stacks on tablet */
  .product-trust-info {
    grid-template-columns: 1fr 1fr;
  }

  /* Related products */
  .related-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Benefits bar wraps */
  .benefits-bar {
    gap: 0.75rem;
    padding: 1.25rem 0;
  }

  /* Cart table responsive */
  .cart-table thead {
    display: none;
  }

  .cart-table tbody tr {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0.5rem 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
  }

  .cart-table tbody td {
    border: none;
    padding: 0;
  }

  .cart-table tbody td:first-child {
    grid-row: 1 / 3;
  }

  /* Checkout layout */
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    position: static;
    order: -1;
  }

  /* Newsletter */
  .newsletter-form {
    max-width: 100%;
  }

  /* WhatsApp and back to top — pozitia (top/bottom + left/right) vine inline
     din layout.php pe baza setarilor admin. Aici doar dimensiuni + z-index. */
  .whatsapp-float {
    width: 48px;
    height: 48px;
    z-index: 9999;
  }

  .back-to-top {
    right: calc(1rem + 3px);
    bottom: 0.75rem;
    width: 42px;
    height: 42px;
    z-index: 9999;
  }
}

/* ==========================================================================
   TABLET (max-width: 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Typography */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.375rem; }
  .section-title { font-size: 1.375rem; }

  /* Container padding */
  .container,
  .container-wide {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Section spacing reduced */
  .section {
    padding: 2.5rem 0;
  }

  .section-sm {
    padding: 1.75rem 0;
  }

  .section-lg {
    padding: 3.5rem 0;
  }

  /* Shop grid — already mobile-first in shop.css, no override needed */

  /* Shop header stacks */
  .shop-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .shop-header-controls {
    width: 100%;
    justify-content: space-between;
  }

  /* Product card adjustments */
  .product-card-body {
    padding: 0.75rem;
  }

  .product-card-title {
    font-size: var(--font-size-xs);
  }

  .product-card-price .current-price {
    font-size: var(--font-size-base);
  }

  .product-card-overlay {
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  }

  .product-card-wishlist {
    opacity: 1;
  }

  /* Product detail page */
  .product-title {
    font-size: var(--font-size-2xl);
  }

  .product-price .current-price {
    font-size: var(--font-size-3xl);
  }

  .product-gallery-thumbs {
    gap: 0.375rem;
  }

  .product-gallery-thumb {
    width: 56px;
    height: 56px;
  }

  .product-actions-buttons {
    flex-direction: column;
  }

  .product-favorite-btn {
    width: 100%;
    height: 48px;
  }

  /* Product tabs */
  .product-tab-btn {
    padding: 0.75rem 1rem;
    font-size: var(--font-size-xs);
  }

  /* Lightbox */
  .product-lightbox-content {
    max-width: 95vw;
  }

  .product-lightbox-content img {
    max-width: 95vw;
    max-height: 80vh;
  }

  .product-lightbox-close {
    top: -2rem;
    right: 0;
  }

  /* Review summary */
  .review-summary {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .review-summary-score {
    padding: 0;
  }

  /* Review item header wraps on mobile */
  .review-item-header {
    flex-wrap: wrap;
  }

  .review-verified {
    width: 100%;
    margin-left: 0;
    margin-top: 0.25rem;
  }

  /* Product description: prevent overflow */
  .product-description {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .product-description table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

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

  /* Related products */
  .related-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Benefits bar vertical on tablet */
  .benefits-bar {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .benefit-item {
    width: 100%;
    max-width: 320px;
  }

  /* Breadcrumbs */
  /* Pagination */
  .shop-pagination a,
  .shop-pagination span {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-xs);
  }

  /* Mini cart */
  .mini-cart-dropdown {
    width: 100%;
    max-width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0;
  }

  /* Search overlay: full-width on tablet */
  .navbar-search-overlay {
    padding: 0.75rem 0;
  }

  .navbar-search-inner {
    padding: 0 1rem;
  }

  .navbar-search-input {
    font-size: var(--font-size-base);
    padding: 0.75rem 1rem;
  }

  .navbar-search-results {
    padding: 0 1rem;
  }

  .navbar-search-results.has-results {
    padding: 0.5rem 1rem 0.75rem;
  }

  .search-result-item img {
    width: 40px;
    height: 40px;
  }

  .search-result-price {
    font-size: var(--font-size-xs);
  }

  /* Toast notifications */
  .toast-container {
    top: auto;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
  }

  .toast {
    min-width: auto;
    max-width: 100%;
  }

  /* Cookie banner — compact card, always fully visible */
  .cookie-banner {
    padding: 0.75rem 1rem;
  }

  .cookie-banner-inner {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .cookie-banner-text {
    font-size: var(--font-size-xs);
  }

  .cookie-banner-text p {
    margin: 0;
  }

  .cookie-banner-icon {
    display: none;
  }

  /* ============================================================
     Cart page (/cos) — table → card layout pe mobile
     Fix 2026-05-20 (v3): imagine absolut stânga (poză vizibilă complet),
     titlu + opțiuni + qty + subtotal toate în coloana dreaptă (lângă imagine).
     Butoane qty mai mici (32px) ca să nu ocupe tot ecranul.
     Layout:
       ┌────────┬────────────────────────────┐
       │        │ Pizza Casei            [X] │
       │ [IMG]  │ + Sosuri: Sos pizza dulce  │
       │ 84x84  │ [-] 1 [+]        39.00 RON │
       └────────┴────────────────────────────┘
     ============================================================ */
  #cartTable thead { display: none; }
  #cartTable,
  #cartTable tbody { display: block; width: 100%; }

  #cartTable tr {
    display: block !important;
    position: relative;
    /* padding-left = 12 (margine) + 84 (img) + 14 (gap) = 110 */
    padding: 12px 12px 12px 110px;
    min-height: 108px;             /* 84 img + 12*2 padding */
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-card-bg, var(--color-white));
  }

  /* Reset td default — devin block items */
  #cartTable tr td {
    display: block;
    padding: 0 !important;
    border: none !important;
    text-align: left;
    background: transparent;
    vertical-align: top;
  }

  /* PRODUCT cell (image + title + options) — image absolut, restul flow normal */
  #cartTable .cart-item-product {
    display: block !important;
    min-width: 0;
  }
  #cartTable .cart-item-product .cart-item-image {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 84px;
    height: 84px;
    display: block;
  }
  #cartTable .cart-item-product .cart-item-image img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }
  #cartTable .cart-item-product .cart-item-title {
    display: block;
    /* 48, nu 36: cosul de gunoi are 44px si sta la 10px de margine, deci zona lui
       incepe cu 6px mai la stanga decat rezerva veche — ultimele litere ale unui
       titlu lung intrau sub buton (masurat 30 aug). */
    padding-right: 48px;
    word-break: normal !important;
    overflow-wrap: break-word;
  }
  #cartTable .cart-item-product .cart-item-title a {
    font-weight: 700;
    font-size: 1.05rem;             /* titlu mai mare cum a cerut user */
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.25;
    display: block;
    margin-bottom: 2px;
  }
  #cartTable .cart-item-product .cart-item-options {
    margin-top: 6px;
    font-size: 0.72rem;
  }

  /* Trash button sus-dreapta absolut */
  #cartTable .cart-item-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
  }

  /* Qty selector — sub titlu, inline cu subtotal (butoane MICI) */
  #cartTable .cart-item-qty {
    display: inline-block;
    margin-top: 10px;
    vertical-align: middle;
  }
  #cartTable .cart-item-qty .qty-selector {
    border-radius: 8px;
  }
  /* ⚠️ FIX 2026-08-30 (BUG GENERAL, toti clientii) — pretul cadea peste butonul „+".
     Blocul de mai jos fusese calculat cand butoanele de cantitate aveau 28px si
     subtotalul incapea langa ele, ancorat jos-dreapta. Intre timp `mobile-wow.css`
     (acelasi prag, ≤767.98px) a adaugat `button,.btn{min-height:44px;min-width:44px}`,
     iar `min-width` BATE `width`, chiar si cu `!important` — deci butoanele ies 44px,
     selectorul se umfla de la ~96 la ~124px si nu mai ramane loc pentru subtotal.
     Masurat pe 30 aug, la 360px, cu subtotal de 4 cifre: suprapunere de 22px la
     donfood, mycell, porcusorul, cloudshop si cloudshopdemo; 19 la lapascan; 8 la
     casadevismures; 4 la liteco; 1 la solopizza si lagrecu. Cei cu „lei" scapau mai
     usor decat cei cu „RON" — trei litere inguste in loc de trei late. Adica
     magazinele care aratau bine aratau bine din noroc de tipografie.
     Reparatia: butoanele isi recunosc marimea REALA (44px), caseta cifrei se
     aliniaza cu ele, iar subtotalul iese din ancorare si sta pe rand cu cantitatea,
     cu `flex-wrap` — asa nu se mai poate suprapune la niciun numar de cifre. */
  #cartTable .cart-item-qty .qty-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 0.95rem !important;
  }
  #cartTable .cart-item-qty .qty-input {
    width: 46px !important;
    height: 44px !important;
    font-size: 1rem !important;
  }

  /* Subtotalul iese din ancorare si primeste RANDUL LUI, sub cantitate.
     `.cart-item-qty` si `.cart-item-subtotal` sunt celule SEPARATE, iar celulele
     sunt `display:block` pe mobil — deci nu pot sta una langa alta fara sa schimbam
     marcajul. Stivuite, nu se pot suprapune la niciun numar de cifre, oricat ar
     creste butoanele in viitor. Cardul creste ~30px; e pretul corect pentru o
     coliziune imposibila. */
  #cartTable .cart-item-subtotal {
    position: static;
    bottom: auto;
    right: auto;
    display: block;
    margin-top: 8px;
    text-align: right;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
    line-height: 1.3;
    white-space: nowrap;
  }

  /* Ascund prețul unitar duplicat */
  #cartTable .cart-item-price { display: none !important; }

  /* Container fără border/overflow propriu */
  .cart-content .table-responsive {
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }

  /* ============================================================
     Checkout (/checkout) — Metode de livrare pe mobile
     Fix 2026-05-20: cost-ul cu "Alege localitatea pentru a vedea costul"
     avea white-space: nowrap și ocupa tot rândul → titlul metodei era
     comprimat la lățime 0 și wrap-uia pe litere ("L i v r a r e ...").
     Acum cost-ul/mesajul trece pe rândul 2 cu wrap normal.
     ============================================================ */
  .checkout-delivery-method {
    flex-wrap: wrap !important;
  }
  .checkout-delivery-method .checkout-delivery-info {
    /* Asigură că info ocupă restul lățimii MINUS radio+icon */
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word;
  }
  .checkout-delivery-method .checkout-delivery-cost {
    /* Cost — pe rândul 2 full-width sub info, aliniat după radio + icon (≈56px) */
    flex: 1 1 100% !important;
    text-align: left !important;
    margin-left: 56px;
    margin-top: 6px;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
    font-size: 0.82rem;
  }
  /* Mesajul "Alege localitatea..." trece pe rândul 2 cu wrap natural */
  .checkout-delivery-method .dm-cost-pending {
    display: inline-block;
    line-height: 1.35;
  }
}

/* ==========================================================================
   MOBILE (max-width: 576px)
   ========================================================================== */
@media (max-width: 575.98px) {
  /* Font size adjustments */
  body {
    font-size: 0.9375rem;
  }

  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }
  .section-title { font-size: 1.25rem; }

  /* Container flush */
  .container,
  .container-wide {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  /* Shop grid single column option */
  .shop-grid.mobile-single {
    grid-template-columns: 1fr;
  }

  .product-card-body {
    padding: 0.625rem;
  }

  .product-card-category {
    font-size: 0.625rem;
  }

  .product-card-badge {
    font-size: 0.625rem;
    padding: 0.1875rem 0.5rem;
  }

  /* Product detail spacing */
  .product-detail {
    gap: 1.25rem;
    padding: 1rem 0 2rem;
  }

  .product-detail-section {
    padding: 0;
  }

  .product-tabs-section {
    padding: 0 0 1.5rem;
  }

  .product-title {
    font-size: var(--font-size-xl);
  }

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

  .product-price .old-price {
    font-size: var(--font-size-base);
  }

  .product-quantity {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .product-add-to-cart {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-sm);
  }

  /* Trust info single column on mobile */
  .product-trust-info {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* Share buttons compact */
  .product-share {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Gallery counter visible only on mobile */
  .product-gallery-counter {
    display: block;
  }

  /* Related products 2 cols on mobile */
  .related-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .section-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Product tab scrollable */
  .product-tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .product-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-xs);
  }

  /* Search overlay compact on small mobile */
  .navbar-search-inner {
    padding: 0 0.875rem;
    gap: 0.5rem;
  }

  .navbar-search-input {
    font-size: var(--font-size-sm);
    padding: 0.625rem 0.875rem;
  }

  .navbar-search-close {
    width: 38px;
    height: 38px;
  }

  .navbar-search-results {
    padding: 0 0.875rem;
  }

  .navbar-search-results.has-results {
    padding: 0.25rem 0.875rem 0.5rem;
    max-height: 60vh;
  }

  .search-result-item a {
    padding: 0.5rem 0.5rem;
    gap: 0.625rem;
  }

  .search-result-item img {
    width: 36px;
    height: 36px;
  }

  .search-result-title {
    font-size: var(--font-size-xs);
  }

  .search-result-all {
    padding: 0.625rem;
    font-size: var(--font-size-xs);
  }

  /* Navbar adjustments */
  .navbar-inner {
    padding: 0.625rem 0.75rem;
    gap: 0.5rem;
  }

  .navbar-logo img {
    height: 28px;
  }

  .navbar-icon-btn {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }

  .navbar-icons {
    gap: 0;
  }

  .navbar-menu-btn {
    width: 36px;
    height: 36px;
    font-size: 1.125rem;
  }

  /* Newsletter stacked */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form .btn {
    width: 100%;
  }

  /* Empty state compact */
  .empty-state {
    padding: 2.5rem 1.25rem;
  }

  .empty-state-icon {
    font-size: 2.5rem;
  }

  /* Checkout adjustments */
  .checkout-step {
    padding: 1rem;
  }

  .checkout-payment-method {
    padding: 0.875rem;
  }

  /* Footer compact (Bootstrap .row handles responsive columns) */

  /* Cookie banner — ultra compact on small mobile */
  .cookie-banner {
    padding: 0.625rem 0.75rem;
  }

  .cookie-banner-inner {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .cookie-banner-text {
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-banner-actions .btn {
    flex: 1;
  }

  /* WhatsApp + back-to-top — pozitia vine inline din layout.php; aici doar size */
  .whatsapp-float {
    width: 46px;
    height: 46px;
    font-size: 1.25rem;
    z-index: 9999;
  }

  .back-to-top {
    right: calc(0.75rem + 3px);
    bottom: 0.75rem;
    width: 40px;
    height: 40px;
    z-index: 9999;
  }
}

/* ==========================================================================
   VISIBILITY HELPERS
   ========================================================================== */
/* Show only on mobile (max 576px) */
.show-mobile-only {
  display: none !important;
}

@media (max-width: 575.98px) {
  .show-mobile-only {
    display: block !important;
  }

  .hide-mobile {
    display: none !important;
  }
}

/* Show only on tablet and below (max 768px) */
.show-tablet-down {
  display: none !important;
}

@media (max-width: 767.98px) {
  .show-tablet-down {
    display: block !important;
  }

  .hide-tablet-down {
    display: none !important;
  }
}

/* Show only on desktop and below (max 992px) */
.show-desktop-down {
  display: none !important;
}

@media (max-width: 991.98px) {
  .show-desktop-down {
    display: block !important;
  }

  .hide-desktop-down {
    display: none !important;
  }
}

/* Hide on desktop (992px and above) */
@media (min-width: 992px) {
  .hide-desktop-up {
    display: none !important;
  }

  .shop-filter-toggle {
    display: none !important;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    padding: 0;
    margin: 0;
  }

  a,
  a:visited {
    text-decoration: underline;
    color: #000 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--color-text-secondary);
  }

  /* Hide non-essential elements */
  .site-navbar,
  .navbar-spacer,
  .top-bar,
  .back-to-top,
  .whatsapp-float,
  .cookie-banner,
  .toast-container,
  .newsletter-section,
  .benefits-bar,
  .mini-cart-dropdown,
  .navbar-search-overlay,
  .shop-sidebar,
  .shop-view-toggle,
  .shop-sort-select,
  .product-card-overlay,
  .product-card-wishlist,
  .product-actions,
  .review-form,
  footer {
    display: none !important;
  }

  /* Full width layout */
  .container,
  .container-wide {
    max-width: 100%;
    padding: 0;
  }

  .shop-layout {
    grid-template-columns: 1fr;
  }

  .product-detail {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .product-card {
    break-inside: avoid;
    border: 1px solid var(--color-border);
  }

  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  .page-content {
    animation: none;
  }
}

/* css/navbar.css */
/* ==========================================================================
   navbar.css - Header & Navigation for CloudShop e-commerce
   Health Supplements & CBD Cosmetics E-Commerce
   --------------------------------------------------------------------------
   Ultima modificare: 2026-10-20 23:12
   Modificari:
     2026-10-20 23:12 — Textul de pe suprafețele de brand (butoane primare, bulina din filtre, „înapoi sus”, insigne) = --color-on-primary (rezervă --color-white).
     2026-08-25 12:40 — FIX BUG GENERAL (toti clientii): cosul deschis din header
       NU se putea inchide pe mobil. Drawer-ul full-screen (inset:0, z-index 9990)
       acoperea navbar-ul, deci X-ul .navbar-cart-close-mobile era dedesubt si
       neclicabil, iar .mini-cart-close era ascuns cu display:none. Acum X-ul din
       navbar ramane ascuns si .mini-cart-close devine butonul de inchidere,
       stilizat identic cu X-ul de la meniul mobil (44px, radius 12px, brand).
     2026-05-15 10:30 — Header sticky configurabil per viewport+pagina (4 setari
       admin: desktop home/inner, mobile home/inner). Default OFF, activat prin
       body classes header-sticky-* din layout.php cu media queries.
     2026-05-07 20:00 — Mini-cart drawer pe mobile: scos max-width 400px → full
       screen (cerere user: pe ecrane >400px se vedea situl in dreapta).
     2026-05-07 19:45 — Pe mobile cu body.cart-open ascundem si .mini-cart-close
       (X-ul mic din header-ul drawer-ului) — apareau 2 X-uri in acelasi timp.
       Ramane doar X-ul mare din navbar (.navbar-cart-close-mobile). [ANULAT 2026-08-25]
   ========================================================================== */

/* --------------------------------------------------------------------------
   Top Bar (optional promotional strip)
   -------------------------------------------------------------------------- */
.top-bar {
  background-color: var(--color-primary-dark);
  color: var(--color-on-primary, var(--color-white));
  font-size: var(--font-size-xs);
  padding: 0.5rem 0;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.top-bar a {
  color: var(--color-on-primary, var(--color-white));
  text-decoration: underline;
}

.top-bar a:hover {
  color: var(--color-primary-lightest);
}

.top-bar-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-on-primary, var(--color-white));
  cursor: pointer;
  font-size: var(--font-size-sm);
  opacity: 0.7;
}

.top-bar-close:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Site Navbar - Main Container
   -------------------------------------------------------------------------- */
.site-navbar {
  /* Default: nu sticky. Body primeste class-uri header-sticky-* prin layout.php
     in functie de setarile din admin (Setari → General → card "Header sticky").
     Sticky se activeaza condit ionat prin media queries de mai jos. */
  position: relative;
  top: 0;
  z-index: var(--z-navbar);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}

.site-navbar.navbar-scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* ───────────────────────────────────────────────────────────────────────────
   Header sticky — configurabil per viewport (desktop/mobile) si per tip pagina
   (homepage / pagini interne). Body primeste class-urile in functie de cele 4
   setari din admin. Default ACTIV peste tot (implicit toate 4 class-uri prezente).
   ─────────────────────────────────────────────────────────────────────────── */

/* Desktop (>=768px) — homepage */
@media (min-width: 768px) {
  body.page-home.header-sticky-desktop-home .site-navbar,
  body:not(.page-home).header-sticky-desktop-inner .site-navbar {
    position: sticky;
    top: 0;
  }
}

/* Mobile (<768px) — homepage si pagini interne */
@media (max-width: 767.98px) {
  body.page-home.header-sticky-mobile-home .site-navbar,
  body:not(.page-home).header-sticky-mobile-inner .site-navbar {
    position: sticky;
    top: 0;
  }
}

body.has-admin-bar .site-navbar {
  top: 40px;
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.navbar-logo {
  flex-shrink: 0;
}

.navbar-logo a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-logo img {
  height: var(--logo-height, 40px);
  width: auto;
  max-height: 90px;
  transition: var(--transition);
}

.navbar-logo:hover img {
  opacity: 0.85;
}

.navbar-logo-text {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Main Navigation Menu
   -------------------------------------------------------------------------- */
.navbar-menu {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

/* CTA telefon din meniul mobil = link real tel: (apelabil). Ascuns implicit;
   temele care afiseaza telefon in meniu il fac vizibil + stilizat (ex: solopizza/lapascan). */
.navbar-menu-call { display: none; }

/* GENERAL — FIX meniu mobil pe orice client/mobil: multe teme au backdrop-filter pe header
   (.site-navbar). backdrop-filter/transform/filter pe un STRAMOS transforma acel stramos in
   containing-block pentru position:fixed => meniul mobil full-screen se ancoreaza la header
   (offset la scroll), nu la viewport, iar continutul de jos (ex: butonul de apel) iese din ecran.
   Cand meniul e deschis (body.menu-open, adaugat de main.js) headerul e oricum acoperit de meniu,
   deci ii scoatem filtrul/transformul => position:fixed se re-ancoreaza corect la VIEWPORT. */
body.menu-open .site-navbar,
html body.menu-open .site-navbar:not(#cs-no-such-id) {  /* :not(#id) ridica specificitatea peste regulile din snippet-urile DB (script_header) */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  perspective: none !important;
}

/* GENERAL — scroll lock: cand meniul mobil (full-screen, position:fixed) e deschis, pagina din
   spate NU trebuie sa deruleze sub el. Lista din meniu (.navbar-nav) isi are propriul scroll intern. */
@media (max-width: 991.98px) {
  html body.menu-open {
    overflow: hidden !important;
    height: 100dvh !important;
    touch-action: none !important;
  }

  /* GENERAL — butonul de inchidere (X): main.js il porteaza sub <body> cat e meniul deschis;
     fara o pozitionare din tema, ar ramane position:relative la FINALUL body-ului (invizibil)
     => meniul nu se mai poate inchide (incident casadevismures 2026-07-28). Default: X flotant
     top-right, peste meniu, in culorile paletei. Temele care il stilizeaza altfel castiga
     (theme/style.css se incarca ULTIMUL si are aceeasi/mai mare specificitate). */
  body.menu-open .navbar-menu-btn {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10002 !important;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 40%, transparent);
    cursor: pointer;
  }
}

.navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  border-radius: var(--border-radius);
  transition: var(--transition-fast);
  white-space: nowrap;
  position: relative;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-lightest);
}

.nav-link.active {
  color: var(--color-primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
}

.nav-link .nav-icon {
  color: var(--color-primary);
  font-size: 1rem;
  margin-right: 0.125rem;
}

.nav-link .nav-arrow {
  font-size: 0.625rem;
  transition: var(--transition-fast);
}

.nav-item:hover .nav-arrow {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Category Dropdown
   -------------------------------------------------------------------------- */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: var(--z-dropdown);
}

.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -0.875rem;
  left: 0;
  right: 0;
  height: 0.875rem;
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  border-radius: var(--border-radius);
  transition: var(--transition-fast);
  text-decoration: none;
}

.nav-dropdown-item:hover {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
}

.nav-dropdown-item .nav-dropdown-icon {
  color: var(--color-primary);
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.nav-dropdown-item .dropdown-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.nav-dropdown-item:hover .dropdown-icon {
  background-color: var(--color-primary-lightest);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.375rem 0.5rem;
}

/* Mega dropdown for categories */
.nav-dropdown-mega {
  min-width: 580px;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   Navbar Icons (Search, Account, Favorites, Cart)
   -------------------------------------------------------------------------- */
.navbar-icons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.navbar-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-size: 1.125rem;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.navbar-icon-btn:hover {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
}

.navbar-icon-btn .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-on-primary, var(--color-white));
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--border-radius-full);
  line-height: 1;
  padding: 0;
  border: 2px solid var(--color-white);
}

.navbar-icon-btn .badge:empty {
  display: none;
}

/* Cart button special styling */
.navbar-icon-btn.cart-btn {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
}

.navbar-icon-btn.cart-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary, var(--color-white));
}

.navbar-icon-btn.cart-btn:hover .badge {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Search Overlay — Full-screen centered modal style
   -------------------------------------------------------------------------- */
.navbar-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: calc(var(--z-navbar) + 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 18vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.navbar-search-overlay.open {
  opacity: 1;
  visibility: visible;
}

.navbar-search-inner {
  width: 100%;
  max-width: 640px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateY(-20px) scale(0.97);
  transition: transform 0.3s ease;
}

.navbar-search-overlay.open .navbar-search-inner {
  transform: translateY(0) scale(1);
}

.navbar-search-input {
  flex: 1;
  border: 2px solid var(--color-primary);
  border-radius: 50px;
  padding: 1rem 1.5rem 1rem 1.25rem;
  font-size: var(--font-size-xl);
  font-family: var(--font-family);
  color: var(--color-text);
  outline: none;
  background: var(--color-white);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.navbar-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.navbar-search-input::placeholder {
  color: var(--color-text-light);
}

.navbar-search-close {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.navbar-search-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Search results dropdown */
.navbar-search-results {
  width: 100%;
  max-width: 640px;
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.navbar-search-results.has-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 0.75rem 1.5rem 1rem;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  margin-top: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Individual search result */
.search-result-item {
  border-radius: var(--border-radius);
  transition: var(--transition-fast);
}

.search-result-item a {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.75rem;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--border-radius);
}

.search-result-item:hover a,
.search-result-item.highlighted a {
  background-color: var(--color-primary-lightest);
}

.search-result-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--border-radius);
  flex-shrink: 0;
  background: var(--color-bg);
}

.search-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.search-result-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-title mark {
  background: var(--color-primary-lightest);
  color: var(--color-primary-dark);
  padding: 0 0.125rem;
  border-radius: 2px;
}

.search-result-category {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.search-result-price {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.search-result-old-price {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  text-decoration: line-through;
  font-weight: 400;
}

/* "View all results" link */
.search-result-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border-top: 1px solid var(--color-border);
  transition: var(--transition-fast);
}

.search-result-all:hover {
  color: var(--color-primary-dark);
  background-color: var(--color-primary-lightest);
  border-radius: var(--border-radius);
}

/* No results state */
.search-no-results {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.5rem 1rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.search-no-results i {
  font-size: 1.125rem;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Mini Cart Dropdown
   -------------------------------------------------------------------------- */
.mini-cart-wrapper {
  position: relative;
}

.mini-cart-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 360px;
  max-height: 480px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.mini-cart-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mini-cart-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.mini-cart-header h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0;
}

/* Butonul X de inchidere a cosului — pe desktop chip discret in culoarea
   brandului, pe mobil buton plin (vezi media query, identic cu X-ul de meniu).
   Specificitatea e ridicata intentionat (+ !important) pentru ca 3 teme
   (lagrecu / lapascan / solopizza) forteaza `body .mini-cart-dropdown
   .mini-cart-header * { color: ... !important }` si ar decolora iconita. */
.mini-cart-close,
body .mini-cart-dropdown .mini-cart-header .mini-cart-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  cursor: pointer;
  color: var(--color-primary) !important;
  border-radius: 10px;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
  transition: var(--transition-fast);
}

body .mini-cart-dropdown .mini-cart-header .mini-cart-close i {
  color: inherit !important;
  font-size: inherit;
  stroke-width: 2.5px;
}

.mini-cart-close:hover,
body .mini-cart-dropdown .mini-cart-header .mini-cart-close:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary);
  color: var(--color-on-primary, #fff) !important;
}

.mini-cart-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mini-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1.25rem;
}

.mini-cart-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

/* Produs obligatoriu (forced add-on) — linie blocata sub parinte (feature v2.0):
   indentat, tenta discreta din culoarea temei, fara buton de stergere. */
.mini-cart-item-forced {
  padding-left: 1.25rem;
  border-bottom-style: dashed;
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.mini-cart-item-forced .mini-cart-item-image { width: 40px; flex-shrink: 0; }
.mini-cart-item-forced .mini-cart-item-image img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.mini-cart-item-forced .mini-cart-item-title { font-size: 0.85em; }
.mini-cart-item-forced .mini-cart-item-meta { color: var(--color-primary); font-weight: 600; }

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

.mini-cart-item-image {
  width: 56px;
  height: 56px;
  border-radius: var(--border-radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg);
}

.mini-cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-cart-item-details {
  flex: 1;
  min-width: 0;
}

.mini-cart-item-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.125rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mini-cart-item-title a {
  color: inherit;
}

.mini-cart-item-title a:hover {
  color: var(--color-primary);
}

.mini-cart-item-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mini-cart-item-price {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-top: 0.25rem;
}

.mini-cart-item-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary, var(--color-primary));
  border-radius: var(--border-radius-sm);
  transition: var(--transition-fast);
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  opacity: 0.7;
}

.mini-cart-item-remove:hover {
  color: var(--color-danger);
  background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
}

.mini-cart-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mini-cart-shipping {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.mini-cart-shipping.success {
  color: var(--color-primary);
  font-weight: 500;
}

.mini-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.mini-cart-total-amount {
  color: var(--color-primary-dark);
  font-size: var(--font-size-base);
}

.mini-cart-actions {
  display: flex;
  gap: 0.5rem;
}

.mini-cart-actions .btn {
  flex: 1;
  font-size: var(--font-size-sm);
  padding: 0.625rem;
  /* Iconita + text pe acelasi rand, centrate impreuna. `inline-flex` pastreaza
     butoanele egale (flex:1), iar `gap` tine spatiul constant indiferent de font. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Iconita ia culoarea TEXTULUI butonului (currentColor din fontul de icoane):
   pe link-ul conturat iese in culoarea magazinului, pe butonul plin iese alba —
   fara nicio culoare scrisa aici. */
.mini-cart-actions .btn > i {
  font-size: 1.05em;
  line-height: 1;
}

.mini-cart-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--color-text-secondary);
}

.mini-cart-empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.4;
}

/* Mini-cart overlay backdrop */
.mini-cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: calc(var(--z-dropdown) - 1);
}

.mini-cart-overlay.active {
  display: block;
}

/* --------------------------------------------------------------------------
   Navbar Spacer (for fixed/sticky offset)
   -------------------------------------------------------------------------- */
.navbar-spacer {
  height: 0;
}

/* --------------------------------------------------------------------------
   Mobile Hamburger Button
   -------------------------------------------------------------------------- */
.navbar-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: var(--border-radius);
  transition: var(--transition-fast);
  font-size: 1.25rem;
  color: var(--color-text);
  align-items: center;
  justify-content: center;
}

.navbar-menu-btn:hover {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
}

.navbar-menu-icon-close {
  display: none;
}

.navbar-menu-btn.active .navbar-menu-icon-open {
  display: none;
}

.navbar-menu-btn.active .navbar-menu-icon-close {
  display: inline-block;
}

/* Prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Cart-open mobile state — when mini-cart is open on mobile, hamburger is
   hidden and replaced with a dedicated bigger/bold X close button in its
   exact position.
   -------------------------------------------------------------------------- */
.navbar-cart-close-mobile {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: var(--border-radius);
  font-size: 1.75rem; /* Mai mare decat hamburger-ul (1.25rem) */
  font-weight: 900;   /* Bold, cerere expresa user */
  color: var(--color-text);
  align-items: center;
  justify-content: center;
  z-index: calc(var(--z-navbar) + 3);
  transition: var(--transition-fast);
}

.navbar-cart-close-mobile:hover,
.navbar-cart-close-mobile:active {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
}

.navbar-cart-close-mobile i {
  font-weight: 900;
  stroke-width: 3px;
}

/* Mobile only — when body has cart-open, hide hamburger.
   FIX 2026-08-25 (BUG GENERAL, toti clientii): drawer-ul de cos e full-screen
   (position:fixed; inset:0; z-index:9990) => ACOPERA complet navbar-ul, deci
   #navbarCartCloseMobile ramanea dedesubt, invizibil si neclicabil. Cum X-ul
   mic din antetul drawer-ului era si el ascuns, cosul deschis din header NU se
   mai putea inchide pe mobil (doar Escape, inexistent pe telefon).
   Solutie: X-ul din navbar ramane ASCUNS, iar .mini-cart-close din antetul
   drawer-ului devine butonul principal de inchidere, stilizat identic cu X-ul
   de la meniul mobil (44px, radius 12px, culoarea brandului). */
@media (max-width: 991.98px) {
  body.cart-open .navbar-menu-btn {
    display: none !important;
  }
  body.cart-open .navbar-cart-close-mobile {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile Navigation Overlay
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .navbar-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: calc(var(--z-navbar) + 2);
  }

  .navbar-logo {
    position: relative;
    z-index: calc(var(--z-navbar) + 2);
  }

  .navbar-logo img {
    height: var(--logo-height-mobile, 34px);
    max-height: 64px;
  }

  .navbar-icons {
    position: relative;
    z-index: calc(var(--z-navbar) + 2);
    margin-left: auto; /* impinge iconitele langa hamburger, nu langa logo */
    gap: 0;
  }

  /* Hide wishlist/favorites on mobile pentru VIZITATORI (prea multe iconite).
     Clientii logati (is-logged, setat in header.php) o vad — acces rapid la favorite. */
  .navbar-favorites-btn:not(.is-logged) {
    display: none;
  }

  .navbar-inner {
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .navbar-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    z-index: calc(var(--z-navbar) + 1);
    padding: 5rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: var(--transition-slow);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .navbar-menu.open {
    transform: translateX(0);
  }

  .navbar-nav {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .nav-link {
    padding: 0.875rem 0;
    font-size: var(--font-size-lg);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }

  .nav-link.active::after {
    display: none;
  }

  .nav-link.active {
    color: var(--color-primary);
    font-weight: 600;
  }

  .nav-dropdown,
  .nav-dropdown-mega {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    min-width: 100%;
    display: none;
    padding: 0 0 0 1rem;
    background: transparent;
  }

  .nav-item.dropdown-open .nav-dropdown,
  .nav-item.dropdown-open .nav-dropdown-mega {
    display: block;
  }

  .nav-dropdown-mega {
    grid-template-columns: 1fr;
  }

  .mini-cart-dropdown {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%; /* full screen pe mobile, cerere user — sa nu se mai vada situl in dreapta */
    height: 100vh;          /* fix 2026-05-20: force full-height, NU max-height */
    height: 100dvh;         /* dynamic viewport pentru bara browser mobile */
    max-height: none;
    border-radius: 0;
    transform: translateX(100%);
    /* Fix 2026-05-20: drawer-ul aparea semi-transparent pe donfood + lapascan
       (vizibil hero-ul prin spate). Fortam background plin + z-index superior. */
    background-color: var(--color-white) !important;
    z-index: 9990 !important;
  }

  .mini-cart-dropdown.open {
    transform: translateX(0);
  }

  /* Lista items + empty state — background plin moștenit de la drawer (NU transparent) */
  .mini-cart-dropdown .mini-cart-items,
  .mini-cart-dropdown .mini-cart-empty,
  .mini-cart-dropdown .mini-cart-footer {
    background-color: inherit;
  }

  /* Fix 2026-05-20 — footer sticky jos pe mobile (ca pe MyCell).
     Header + footer fixe, middle (items) scrollabil. Fără asta, user trebuia
     să facă scroll ca să vadă butoanele "Vezi coșul" / "Finalizează".

     Fix 2026-05-20 (refresh) — drawer-ul e ancorat la viewport CU FORȚA prin
     inset:0 !important + position:fixed !important. Asta acoperă cazurile în
     care oh-banner (Program Comenzi), admin-bar sau alt element sticky
     împingeau drawer-ul mai jos și ascundeau footer-ul sub URL bar mobile. */
  .mini-cart-dropdown {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;     /* dynamic viewport pentru URL bar mobile */
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .mini-cart-dropdown .mini-cart-header {
    flex-shrink: 0 !important;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: inherit;
    padding: 0.9rem 1rem;
    gap: 0.75rem;
  }

  /* X-ul de inchidere pe mobil — IDENTIC cu X-ul de la meniul mobil
     (body.menu-open .navbar-menu-btn): 44px, radius 12px, fundal brand,
     iconita pe culoarea de contrast, umbra colorata. Singurul mod de a
     inchide cosul pe telefon, deci nu poate fi ascuns de nicio tema. */
  body.cart-open .mini-cart-dropdown .mini-cart-header .mini-cart-close,
  .mini-cart-dropdown .mini-cart-header .mini-cart-close {
    display: flex !important;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    font-size: 1.35rem;
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary, #fff) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 40%, transparent);
  }

  body.cart-open .mini-cart-dropdown .mini-cart-header .mini-cart-close i,
  .mini-cart-dropdown .mini-cart-header .mini-cart-close i {
    color: var(--color-on-primary, #fff) !important;
    stroke-width: 2.75px;
  }

  body.cart-open .mini-cart-dropdown .mini-cart-header .mini-cart-close:active {
    transform: scale(0.94);
  }
  .mini-cart-dropdown .mini-cart-items {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0;        /* permite flex să shrink-uiască items când e overflow */
  }
  .mini-cart-dropdown .mini-cart-footer {
    flex-shrink: 0 !important;
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: inherit;
    /* iOS safe area pentru notch / home indicator */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}


/* Butonul din cosul gol („Incepe cumparaturile") folosea clasa Bootstrap
   `btn-outline-success` — verde de bibliotecă, strain de marca magazinului, iar la
   hover se umplea cu acel verde. Aici intra in culorile magazinului, la fel ca restul
   butoanelor. General: se aplica la toate magazinele. */
.mini-cart-empty .btn,
.mini-cart-empty .btn-outline-success {
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
  color: var(--color-primary) !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: .45rem 1.15rem !important;
  font-weight: 600 !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.mini-cart-empty .btn:hover,
.mini-cart-empty .btn-outline-success:hover,
.mini-cart-empty .btn:focus-visible {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary, #fff) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 28%, transparent) !important;
}

/* css/mobile-wow.css */
/* ==========================================================================
   mobile-wow.css - Mobile Polish Overrides for mycell.eu
   CSS-only mobile enhancements: spacing, touch targets, animations, typography
   Only @media queries — no desktop styles

   Ultima modificare: 2026-10-20 23:12
   Modificari:
     2026-10-20 23:12 — Textul de pe suprafețele de brand (butoane primare, bulina din filtre, „înapoi sus”, insigne) = --color-on-primary (rezervă --color-white).
     2026-09-22 22:05 — Curatenie: sters blocul .breadcrumbs (markup vechi, nefolosit in niciun sablon)
     2026-05-15 10:30 — Header sticky pe mobil: scope-uit prin body class-uri
       header-sticky-mobile-{home,inner} (configurabil din admin Setari → General).
   ========================================================================== */

/* ==========================================================================
   0. CRITICAL: ZERO HORIZONTAL SCROLL + COMPACT HEADER
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Kill horizontal scroll globally */
  html {
    overflow-x: hidden !important;
  }
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* Force all containers to respect viewport */
  .container, .container-fluid, section, div {
    max-width: 100vw;
  }

  img, video, iframe, table, pre, canvas, svg {
    max-width: 100% !important;
  }

  /* Exclude imaginile care TREBUIE sa umple un container cu aspect-ratio
     (object-fit:cover + height:100%). `img:not(.hero-slide-image)` are
     specificitate 0,1,1 si bate `.story-image` (0,1,0), asa ca fara excludere
     poza din „Povestea noastra" ramanea la inaltimea ei naturala (239px) intr-un
     wrapper de 448px => o gaura de 200px sub ea, pe mobil. (prins 2026-07-30) */
  img:not(.hero-slide-image):not(.story-image),
  video, iframe, table, pre, canvas, svg {
    height: auto;
  }

  /* Prevent any element from causing horizontal overflow */
  * {
    box-sizing: border-box;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    /* ⚠️ `overflow-x: hidden` AICI ERA BUG: conform specificatiei CSS, cand o axa e
       `hidden` iar cealalta `visible`, cealalta devine automat `auto` => `.container`
       se transforma in CONTAINER DE DERULARE pe verticala. Pe mobil, gestul de scroll
       care incepe exact peste container (marginile laterale de 16px, zonele fara card)
       era CAPTURAT de el si, neavand ce derula, pagina nu se misca — „se agata".
       `clip` taie pe orizontala FARA sa creeze container de derulare, deci `overflow-y`
       ramane `visible` si gestul ajunge la pagina. (masurat cu drag real, 2026-07-30) */
    overflow-x: clip;
  }

  /* „Povestea noastra": pe desktop wrapperul e portret 4/5 (arata bine langa text),
     dar pe mobil, unde sta singur pe toata latimea, 4/5 inseamna aproape un ecran
     intreg de poza. Trecem pe peisaj 3/2 — acelasi raport ca pozele clientilor. */
  /* `body ...` ca sa batem regula din tema clientului (aceeasi specificitate,
     dar tema se incarca DUPA acest fisier). */
  body .story-image-wrap {
    aspect-ratio: 3 / 2;
  }
  body .story-image {
    height: 100%;
    object-fit: cover;
  }

  /* Long text wrapping */
  h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ── Compact navbar: logo left + icons + hamburger right ── */
  .navbar-inner {
    gap: 0.375rem !important;
    padding: 0.5rem 0 !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  /* Hide desktop menu on mobile — use visibility so transform animation works */
  .navbar-menu:not(.open) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .navbar-menu.open {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Logo smaller */
  .navbar-logo img {
    height: 28px !important;
  }

  /* Icons: smaller, tighter gap */
  .navbar-icons {
    gap: 0.25rem !important;
    margin-right: auto !important;
  }

  .navbar-icon-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.05rem !important;
  }

  /* Hide favorites icon on mobile DOAR pentru vizitatori — clientii logati o vad */
  .navbar-favorites-btn:not(.is-logged) {
    display: none !important;
  }

  /* Hamburger: always visible, compact */
  .navbar-menu-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .navbar-inner {
    padding: 0.4rem 0 !important;
  }

  .navbar-logo img {
    height: 24px !important;
  }

  .navbar-icon-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 1rem !important;
  }

  .navbar-menu-btn {
    width: 34px !important;
    height: 34px !important;
  }


}

/* ==========================================================================
   1. iOS INPUT ZOOM PREVENTION
   ========================================================================== */
@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   2. FLUID TYPOGRAPHY
   ========================================================================== */
@media (max-width: 767.98px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  h1 { font-size: clamp(1.375rem, 5vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
  h3 { font-size: clamp(1.125rem, 4vw, 1.5rem); }
  h4 { font-size: clamp(1rem, 3.5vw, 1.25rem); }

  .section-title {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    line-height: 1.3;
  }

  .section-subtitle {
    font-size: clamp(0.85rem, 3.2vw, 1rem);
    line-height: 1.5;
  }
}

/* ==========================================================================
   3. TOUCH TARGETS
   ========================================================================== */
@media (max-width: 767.98px) {
  a.btn,
  button,
  .btn,
  .navbar-icon-btn,
  .navbar-menu-btn,
  .product-card-wishlist,
  .pagination a,
  .shop-pagination a,
  .shop-pagination span {
    min-height: 44px;
    min-width: 44px;
  }

  .footer a {
    padding: 8px 0;
    display: inline-block;
  }
}

/* ==========================================================================
   4. NAVBAR POLISH
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Sticky header — configurabil din admin (Setari → General → Header sticky).
     Body primeste class-uri header-sticky-mobile-home / header-sticky-mobile-inner
     din layout.php. Default ACTIV peste tot (clase prezente implicit). */
  body.page-home.header-sticky-mobile-home .site-navbar,
  body:not(.page-home).header-sticky-mobile-inner .site-navbar {
    position: sticky !important;
    top: 0 !important;
  }

  .navbar-spacer {
    height: 0 !important;
  }

  /* Hamburger X animation support */
  .navbar-menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }

  .navbar-menu-btn:active {
    transform: scale(0.92);
  }

  /* Mobile menu frosted glass effect */
  .navbar-menu {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease;
  }

  /* Icon buttons spacing */
  .navbar-icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   5. CONTAINER & SPACING
   ========================================================================== */
@media (max-width: 767.98px) {
  .container,
  .container-wide {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section {
    padding: 2rem 0;
  }

  .section-lg {
    padding: 2.5rem 0;
  }

  .section-header {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-wide {
    padding-left: 14px;
    padding-right: 14px;
  }

  .section {
    padding: 1.75rem 0;
  }
}

/* ==========================================================================
   6. PRODUCT CARDS MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Shop layout: single column on mobile, sidebar is off-canvas */
  .shop-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    width: 100%;
  }

  /* Equal height cards */
  .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .product-card-image {
    flex-shrink: 0;
  }

  .product-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .product-card-price {
    margin-top: auto;
  }

  .product-card {
    border-radius: var(--border-radius-xl);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }

  .product-card-image {
    aspect-ratio: 1;
    overflow: hidden;
  }

  /* Make entire card clickable via stretched link */
  .product-card {
    position: relative;
    cursor: pointer;
  }

  .product-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Keep buttons above stretched link */
  .product-card-wishlist,
  .product-card-overlay,
  .btn-add-to-cart {
    position: relative;
    z-index: 2;
  }

  .product-card-overlay {
    opacity: 1;
    transform: translateY(0);
  }

  .product-card-body {
    padding: 0.5rem 0.5rem 0.625rem;
  }

  .product-card-category {
    font-size: 0.6rem !important;
    margin-bottom: 0.125rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card-title {
    font-size: 0.8rem !important;
    line-height: 1.25;
    margin-bottom: 0.25rem;
  }

  .product-card-price {
    white-space: nowrap;
  }

  .product-card-price .current-price {
    font-size: 0.9rem;
    font-weight: 700;
  }

  .product-card-price .old-price {
    font-size: 0.7rem;
  }

  /* Compact overlay button — icon only */
  .product-card-overlay .btn {
    font-size: 0.85rem;
    padding: 0.375rem 0.75rem;
    gap: 0.25rem;
  }

  .product-card-overlay .btn span {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .shop-grid {
    gap: 8px;
  }

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

  .product-card-body {
    padding: 0.375rem 0.4rem 0.5rem;
  }

  .product-card-category {
    font-size: 0.55rem !important;
  }

  .product-card-title {
    font-size: 0.75rem !important;
  }

  .product-card-price .current-price {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   7. HERO SLIDER MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .hero-section {
    overflow: hidden !important;
  }

  .hero-slides {
    height: 55vh;
    min-height: 300px;
    max-height: 420px;
    overflow: hidden !important;
  }

  .hero-slide {
    overflow: hidden !important;
  }

  .hero-content {
    text-align: center;
    padding: 0 1rem;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .hero-title {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    margin-bottom: 0.75rem;
  }

  .hero-subtitle {
    font-size: clamp(0.875rem, 3.5vw, 1.125rem);
    margin-bottom: 1.5rem;
  }

  .hero-overlay {
    justify-content: center;
    text-align: center;
  }

  .hero-cta {
    width: 100%;
    max-width: 320px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin: 0 auto;
  }

  .hero-dots {
    bottom: 16px;
    gap: 8px;
  }

  .hero-dots button {
    min-width: 12px;
    min-height: 12px;
    width: 12px;
    height: 12px;
    padding: 0;
  }

  .hero-dots button.active {
    min-width: 28px;
    width: 28px;
  }
}

@media (max-width: 575.98px) {
  .hero-slides {
    height: 50vh;
    min-height: 280px;
    max-height: 380px;
  }

  .hero-content {
    padding: 0 1rem;
  }
}

/* ==========================================================================
   8. BENEFITS BAR MOBILE — Horizontal Scroll with Snap
   ========================================================================== */
@media (max-width: 767.98px) {
  .benefits-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 1rem 16px;
    scrollbar-width: none;
  }

  .benefits-bar::-webkit-scrollbar {
    display: none;
  }

  .benefit-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: 200px;
    width: auto;
    max-width: none;
    padding: 0.625rem 1rem;
  }
}

/* ==========================================================================
   9. CATEGORIES MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .mw-categories-grid,
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .category-card {
    border-radius: var(--border-radius-xl);
    text-align: center;
    overflow: hidden;
  }
}

@media (max-width: 575.98px) {
  .mw-categories-grid,
  .categories-grid {
    gap: 10px;
  }
}

/* ==========================================================================
   10. NEWSLETTER MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .newsletter-section {
    padding: 2.5rem 0;
    text-align: center;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
  }

  .newsletter-form .form-control {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    font-size: 16px;
  }

  .newsletter-form .btn {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    font-size: 1rem;
  }
}

/* ==========================================================================
   11. FOOTER MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .footer {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
  }

  .footer-section {
    margin-bottom: 1.5rem;
  }

  .footer-section h5,
  .footer-section h6 {
    margin-bottom: 0.75rem;
  }

  .footer a {
    padding: 8px 0;
    display: inline-block;
    min-height: 44px;
    line-height: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   12. FORMS MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .form-control,
  .form-select {
    height: 48px;
    border-radius: 10px;
    padding: 0.625rem 1rem;
  }

  textarea.form-control {
    height: auto;
    min-height: 100px;
  }

  .form-label {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
  }

  .btn-lg,
  .mw-btn-full {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   13. SCROLL REVEAL PREPARATION
   ========================================================================== */
@media (max-width: 767.98px) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
}

/* ==========================================================================
   14. ANIMATIONS
   ========================================================================== */
@media (max-width: 767.98px) {
  html {
    scroll-behavior: smooth;
  }

  /* Tap feedback */
  .mw-tap-active,
  .product-card:active,
  .category-card:active,
  .btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  /* Loading skeleton pulse */
  @keyframes mw-skeleton-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { opacity: 0.6; }
  }

  .mw-skeleton {
    background: var(--color-border);
    border-radius: var(--border-radius);
    animation: mw-skeleton-pulse 1.5s ease-in-out infinite;
  }

  /* Subtle fade-in for page content */
  .page-content {
    animation: mw-fade-in 0.4s ease;
  }

  @keyframes mw-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ==========================================================================
   15. CHECKOUT MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .checkout-layout {
    gap: 1.5rem;
  }

  .checkout-step {
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
  }

  .checkout-step-header {
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  .checkout-step-number {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .checkout-payment-method {
    padding: 1rem;
    border-radius: 10px;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .checkout-payment-method input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  /* Order summary collapsible support */
  .checkout-summary {
    border-radius: var(--border-radius-lg);
  }

  .checkout-summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    cursor: pointer;
    min-height: 48px;
  }

  /* Place order button */
  .checkout-submit-btn,
  .mw-checkout-submit {
    width: 100%;
    height: 52px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 12px;
  }
}

@media (max-width: 575.98px) {
  .checkout-step {
    padding: 1rem;
    border-radius: 10px;
  }
}

/* ==========================================================================
   16. PRODUCT DETAIL MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  /* ── Single column layout ── */
  .product-detail {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 0.75rem 0 5rem !important;
  }

  .product-gallery {
    width: 100%;
    position: static !important;
  }

  .product-gallery-main {
    width: 100%;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
  }

  .product-gallery-thumbs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 0;
    scrollbar-width: none;
  }

  .product-gallery-thumbs::-webkit-scrollbar {
    display: none;
  }

  .product-gallery-thumb {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* ── Product info full width ── */
  .product-info {
    padding-top: 0 !important;
  }

  .product-title {
    font-size: 1.5rem !important;
    line-height: 1.25;
  }

  /* Price prominent */
  .product-price .current-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary-dark);
  }

  .product-price .old-price {
    font-size: 1rem;
  }

  /* ── Actions: button full width, favorite inline ── */
  .product-actions-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .product-add-to-cart {
    width: 100%;
    height: 52px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 12px;
  }

  .product-favorite-btn {
    width: 100% !important;
    height: 48px;
    border-radius: 12px;
    font-size: 1rem;
    justify-content: center;
  }

  /* ── Trust badges: 2x2 grid, compact ── */
  .product-trust-info {
    padding: 1rem;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .trust-item {
    font-size: 0.8rem;
  }

  /* ── Share section compact ── */
  .social-share {
    margin-bottom: 1rem;
    padding-top: 1rem;
  }

  /* ── Product meta compact ── */
  .product-meta {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  /* ── Sticky add-to-cart bar ── */
  .mw-sticky-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mw-sticky-cart .mw-sticky-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mw-sticky-cart .mw-sticky-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    white-space: nowrap;
  }

  .mw-sticky-cart .mw-sticky-btn {
    height: 44px;
    padding: 0 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    background: var(--color-primary);
    color: var(--color-on-primary, var(--color-white));
    border: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
  }

  .mw-sticky-cart .mw-sticky-btn:active {
    background: var(--color-primary-dark);
  }

  /* Produs variabil fara varianta aleasa — buton blocat vizual, dar tot „tap-abil"
     ca sa poata raspunde cu toast + scroll la selectorul de variante. */
  .mw-sticky-cart .mw-sticky-btn-locked,
  .mw-sticky-cart .mw-sticky-btn-locked:active {
    background: color-mix(in srgb, var(--color-primary) 32%, var(--color-bg) 68%);
    color: color-mix(in srgb, var(--color-text) 70%, transparent 30%);
    cursor: not-allowed;
  }

  /* ── Product tabs full width ── */
  .product-tabs {
    margin-bottom: 5rem;
  }
}

@media (max-width: 575.98px) {
  .product-price .current-price {
    font-size: 1.5rem;
  }

  .product-gallery-thumb {
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================================
   17. MOBILE MENU POLISH
   ========================================================================== */
@media (max-width: 991.98px) {
  .navbar-menu {
    border-top: 2px solid var(--color-primary);
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%);
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.02);
  }
  
  .navbar-nav {
    padding: 0.5rem;
    gap: 0.5rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  
  .nav-item {
    width: 100%;
  }
  
  .nav-arrow {
    display: none !important;
  }
  
  .nav-link, .nav-dropdown-item {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    padding: 0.875rem 1.25rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0.25rem;
  }
  
  .nav-link:active, .nav-dropdown-item:active {
    transform: scale(0.98);
  }
  
  .nav-link .nav-icon, .nav-dropdown-item .nav-dropdown-icon {
    background: var(--color-primary-lightest);
    color: var(--color-primary-dark);
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 1rem !important;
    font-size: 1.25rem !important;
  }

  .nav-link.active, .nav-dropdown-item.active {
    border-color: var(--color-primary) !important;
    background: var(--color-primary-lightest);
  }
}


/* css/notify.css */
/**
 * CloudShop — notificari magazin (toast) — stiluri
 *
 * Perechea lui assets/js/notify.js (window.csNotify). Toate culorile vin din
 * paleta Identitate a magazinului (var(--color-*) generate in templates/layout.php),
 * cu rezerve sensibile pentru cazul in care o variabila lipseste.
 *
 * Zone (contractul de culori): toastul e un CARD (suprafata --color-white + text
 * --color-text). Culoarea de tip (succes/eroare/atentie/info) apare doar pe
 * accente: bara din stanga, iconita, bara de timp. Nimic alb hardcodat.
 *
 * Ultima modificare: 2026-09-06 23:40
 * Modificari:
 *   2026-09-06 23:40 — Contrast pe tema deschisa: glifa din pastila se adanceste cu
 *                      cerneala paginii (masurat: atentie 1,94 -> 3,83; succes
 *                      2,82 -> 4,93). Tema inchisa neatinsa.
 *   2026-09-06 23:40 — Butonul de inchidere: 44x44 zona de atingere pe mobil (pastila
 *                      vizibila ramane 32px, prin ::before; inaltimea toastului
 *                      nemodificata). Strat coborat la 200000: peste fereastra
 *                      aplicatiei (100000), SUB banda de lockdown (999999).
 *                      Clasa `is-instant` pentru aparitia fara tranzitie in fila
 *                      din fundal, unde browserul nu avanseaza tranzitiile.
 *   2026-09-06 22:20 — Creat: container stivuit dreapta-sus (desktop) / sus lat (mobil),
 *                      4 tipuri, bara de timp, evidentiere camp tinta, light + dark.
 */

/* --------------------------------------------------------------------------
   Containerul — copil DIRECT al body (regula iOS pentru position:fixed)
   -------------------------------------------------------------------------- */
.cs-notify-wrap {
    position: fixed;
    top: var(--cs-notify-top, 16px);
    right: 16px;
    left: auto;
    width: min(390px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Scara reala a magazinului: lightbox produs 10000, tooltip 99999,
       fereastra „Descarca aplicatia" 100000, banda de lockdown „magazin inchis"
       999999. Stam DEASUPRA tuturor, dar SUB lockdown: un magazin oprit trebuie
       sa ramana oprit, indiferent ce mesaj apare peste el. */
    z-index: 200000;
    pointer-events: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------------------
   Toastul
   -------------------------------------------------------------------------- */
.cs-notify {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px 14px 16px;
    overflow: hidden;
    pointer-events: auto;
    cursor: default;
    background-color: var(--color-white, #ffffff);
    color: var(--color-text, #1e293b);
    border: 1px solid var(--cs-notify-edge, var(--color-border, #e5e7eb));
    border-left: 4px solid var(--cs-notify-tone, var(--color-primary, #049130));
    border-radius: var(--border-radius-lg, 12px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: var(--font-family, inherit);
    opacity: 0;
    transform: translate3d(14px, -6px, 0) scale(0.985);
    transition: opacity .22s ease, transform .26s cubic-bezier(.16, 1, .3, 1);
}

.cs-notify.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.cs-notify.is-out {
    opacity: 0;
    transform: translate3d(14px, -4px, 0) scale(0.97);
}

.cs-notify.is-clickable {
    cursor: pointer;
}

/* Aparitie INSTANT, fara tranzitie. Necesara in fila din fundal: acolo browserul
   nu avanseaza tranzitiile, deci un toast „in tranzitie spre opacity 1" ar
   ramane la 0 — invizibil, dar prinzand click-urile. Se scoate la revenire. */
.cs-notify.is-instant {
    transition: none !important;
}

.cs-notify.is-again {
    animation: csNotifyAgain .45s ease;
}

@keyframes csNotifyAgain {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    40%  { transform: translate3d(0, 0, 0) scale(1.028); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Tonurile — culorile semantice din paleta clientului */
.cs-notify--success { --cs-notify-tone: var(--color-success, #10b981); }
.cs-notify--error   { --cs-notify-tone: var(--color-danger,  #ef4444); }
.cs-notify--warning { --cs-notify-tone: var(--color-warning, #f59e0b); }
.cs-notify--info    { --cs-notify-tone: var(--color-info,    #3b82f6); }

/* Iconita — pastila in tonul tipului, peste suprafata cardului */
.cs-notify__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--cs-notify-tone, var(--color-primary, #049130));
    background-color: color-mix(in srgb, var(--cs-notify-tone, #049130) 14%, var(--color-white, #ffffff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cs-notify-tone, #049130) 26%, transparent);
}

.cs-notify__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
}

.cs-notify__title {
    font-family: var(--font-family-heading, var(--font-family, inherit));
    font-weight: 700;
    font-size: .93rem;
    line-height: 1.3;
    margin: 0 0 2px;
    color: var(--color-text, #1e293b);
}

.cs-notify__msg {
    font-size: .875rem;
    line-height: 1.45;
    margin: 0;
    color: color-mix(in srgb, var(--color-text, #1e293b) 82%, transparent);
    overflow-wrap: anywhere;
}

.cs-notify__title + .cs-notify__msg {
    color: color-mix(in srgb, var(--color-text, #1e293b) 74%, transparent);
}

/* Butonul de inchidere — fara title nativ, are aria-label.
   Cercul VIZIBIL sta pe ::before, nu pe buton: asa putem creste zona de
   atingere la 44px pe mobil (regula proiectului) fara sa creasca si pastila. */
.cs-notify__close {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: -2px -4px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    /* FARA border-radius pe buton: pastila rotunda e ::before. Un buton rotund
       de 44px si-ar taia colturile si din zona de ATINGERE, nu doar din desen. */
    border-radius: 0;
    background: transparent;
    color: color-mix(in srgb, var(--color-text, #1e293b) 55%, transparent);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: color .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.cs-notify__close::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color .16s ease, box-shadow .16s ease;
}

.cs-notify__close > i {
    position: relative;
}

.cs-notify__close:hover,
.cs-notify__close:focus-visible {
    color: var(--color-text, #1e293b);
    outline: none;
}

.cs-notify__close:hover::before,
.cs-notify__close:focus-visible::before {
    background-color: color-mix(in srgb, var(--color-text, #1e293b) 9%, transparent);
}

.cs-notify__close:focus-visible::before {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #049130) 45%, transparent);
}

/* Bara de timp — arata cat mai sta notificarea */
.cs-notify__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    transform-origin: left center;
    transform: scaleX(1);
    background-color: color-mix(in srgb, var(--cs-notify-tone, #049130) 55%, transparent);
}

.cs-notify.is-paused .cs-notify__bar {
    animation-play-state: paused;
}

@keyframes csNotifyBar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* --------------------------------------------------------------------------
   Evidentierea campului la care duce notificarea
   -------------------------------------------------------------------------- */
.cs-notify-target {
    animation: csNotifyTarget 1.9s ease-out 1;
    border-radius: var(--border-radius, 8px);
}

@keyframes csNotifyTarget {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary, #049130) 55%, transparent);
        background-color: color-mix(in srgb, var(--color-primary, #049130) 12%, transparent);
    }
    60% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary, #049130) 0%, transparent);
        background-color: color-mix(in srgb, var(--color-primary, #049130) 7%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        background-color: transparent;
    }
}

/* --------------------------------------------------------------------------
   Tema deschisa — glifa din pastila are nevoie de ton mai adanc

   Pe fundal alb, culorile semantice ale magazinului sunt prea luminoase ca
   glife: MASURAT pe paleta La Grecu, atentie 1,94:1 si succes 2,82:1 fata de
   pastila lor (minim cerut 3:1). Adancim TONUL GLIFEI amestecandu-l cu cerneala
   paginii (--color-text), nu cu un hex nou; pastila ramane deschisa, deci
   toastul arata la fel, doar iconita devine lizibila.
   -------------------------------------------------------------------------- */
body.theme-light .cs-notify__icon {
    color: color-mix(in srgb, var(--cs-notify-tone, #049130) 62%, var(--color-text, #1e293b));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cs-notify-tone, #049130) 34%, transparent);
}

/* --------------------------------------------------------------------------
   Tema inchisa — umbra mai adanca, muchie mai vizibila pe suprafete apropiate
   -------------------------------------------------------------------------- */
body.theme-dark .cs-notify {
    --cs-notify-edge: color-mix(in srgb, var(--color-text, #f5f5f5) 16%, transparent);
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.5),
        0 2px 10px rgba(0, 0, 0, 0.34);
}

body.theme-dark .cs-notify__icon {
    background-color: color-mix(in srgb, var(--cs-notify-tone, #049130) 22%, var(--color-white, #242428));
}

/* --------------------------------------------------------------------------
   Mobil — banda lata sus, cu spatiu pentru zona sigura
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .cs-notify-wrap {
        left: 10px;
        right: 10px;
        width: auto;
        top: calc(var(--cs-notify-top, 10px) + env(safe-area-inset-top, 0px));
        gap: 8px;
    }

    .cs-notify {
        padding: 12px 12px 13px 14px;
        gap: 10px;
        border-radius: var(--border-radius, 10px);
        transform: translate3d(0, -12px, 0) scale(0.99);
    }

    .cs-notify.is-in  { transform: translate3d(0, 0, 0) scale(1); }
    .cs-notify.is-out { transform: translate3d(0, -10px, 0) scale(0.98); }

    .cs-notify__icon {
        width: 30px;
        height: 30px;
        font-size: .95rem;
    }

    .cs-notify__msg   { font-size: .84rem; }
    .cs-notify__title { font-size: .89rem; }

    /* Tinta de atingere 44x44 pe mobil (regula proiectului), fara sa creasca
       cardul: marginile negative pe verticala fac cutia lui in flux mai scunda
       decat iconita de tip (30px), deci inaltimea toastului ramane neatinsa.
       Pastila vizibila (::before, inset 6px) ramane la 32px. */
    .cs-notify__close {
        width: 44px;
        height: 44px;
        margin: -9px -11px -9px 0;
    }

    .cs-notify__close::before {
        inset: 6px;
    }
}

/* --------------------------------------------------------------------------
   Miscare redusa — fara animatii, doar aparitie/disparitie instant
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cs-notify {
        transition: opacity .01ms linear;
        transform: none !important;
    }

    .cs-notify.is-again { animation: none; }

    .cs-notify__bar { animation: none !important; transform: scaleX(1); }

    .cs-notify-target { animation: none; outline: 2px solid var(--color-primary, #049130); }
}