/*
Theme Name: FusionStyle
Theme URI: https://fusionstyle.com
Author: FusionStyle Team
Author URI: https://fusionstyle.com
Description: A premium Pinterest-style visual discovery WordPress theme for Mehndi, Nail Art, Fusion Outfits & Sneakers. Discover. Save. Style. Inspire.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fusionstyle
Tags: masonry, grid, pinterest, visual-discovery, fashion, beauty, responsive, custom-colors, custom-logo, infinite-scroll
*/

/* ============================================================
   FUSIONSTYLE — DESIGN SYSTEM & GLOBAL STYLES
   ============================================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Colors */
  --color-primary:       #FF4FA3;
  --color-secondary:     #8B5CF6;
  --color-highlight:     #FFD54F;
  --color-bg:            #FFF9FC;
  --color-card:          #FFFFFF;
  --color-text-primary:  #111827;
  --color-text-secondary:#6B7280;
  --color-success:       #10B981;
  --color-border:        #F3E8F0;
  --color-overlay:       rgba(17, 24, 39, 0.45);

  /* Gradients */
  --gradient-primary:    linear-gradient(135deg, #FF4FA3, #8B5CF6);
  --gradient-warm:       linear-gradient(135deg, #FF4FA3, #FFD54F);
  --gradient-cool:       linear-gradient(135deg, #8B5CF6, #06B6D4);
  --gradient-soft:       linear-gradient(180deg, rgba(255,79,163,0.06) 0%, rgba(139,92,246,0.03) 100%);
  --gradient-card-hover: linear-gradient(180deg, transparent 40%, rgba(17,24,39,0.72) 100%);

  /* Typography */
  --font-heading:        'Poppins', sans-serif;
  --font-body:           'Inter', sans-serif;
  --font-accent:         'Playfair Display', serif;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(255,79,163,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(255,79,163,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:   0 12px 40px rgba(255,79,163,0.18), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-card: 0 2px 12px rgba(139,92,246,0.08), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 16px 48px rgba(255,79,163,0.22), 0 6px 20px rgba(139,92,246,0.12);
  --shadow-glass: 0 8px 32px rgba(139,92,246,0.15);

  /* Transitions */
  --transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-max: 1440px;
  --grid-gap:      18px;
  --card-radius:   20px;
  --header-height: 64px;
  --bottom-nav-height: 64px;
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --color-bg:            #0D0D14;
  --color-card:          #161622;
  --color-text-primary:  #F9FAFB;
  --color-text-secondary:#9CA3AF;
  --color-border:        #1F1F2E;
  --shadow-card:         0 2px 12px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-card-hover:   0 16px 48px rgba(255,79,163,0.3), 0 6px 20px rgba(139,92,246,0.2);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--transition-base), color var(--transition-base);
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-primary);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

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

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge--primary {
  background: var(--gradient-primary);
  color: #fff;
}

.badge--mehndi    { background: linear-gradient(135deg, #10B981, #059669); color:#fff; }
.badge--nail-art  { background: linear-gradient(135deg, #FF4FA3, #E11D6B); color:#fff; }
.badge--outfits   { background: linear-gradient(135deg, #8B5CF6, #6D28D9); color:#fff; }
.badge--sneakers  { background: linear-gradient(135deg, #F59E0B, #D97706); color:#fff; }
.badge--trending  { background: linear-gradient(135deg, #EF4444, #DC2626); color:#fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition-bounce);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn:hover::after { opacity: 1; }

.btn--primary {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255,79,163,0.4);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,79,163,0.5);
}

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

.btn--secondary:hover {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

.btn--ghost {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

.btn--sm {
  padding: 6px 14px;
  font-size: 12px;
}

.btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--gradient-primary);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--header-height);
  background: rgba(255,249,252,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

[data-theme="dark"] .site-header {
  background: rgba(13,13,20,0.92);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-lg);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.site-logo img {
  height: 36px;
  width: auto;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.logo-tagline {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--color-text-secondary);
  margin-top: -3px;
}

/* Main Nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.main-nav a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.current-menu-item {
  color: var(--color-primary);
  background: rgba(255,79,163,0.08);
}

.main-nav a .nav-emoji {
  font-size: 16px;
  line-height: 1;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Search Trigger */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 200px;
}

.search-trigger:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,79,163,0.1);
}

.search-trigger svg {
  flex-shrink: 0;
}

/* Theme Toggle */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: rotate(15deg);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  transition: all var(--transition-base);
}

[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: scale(1); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: scale(0); }
.theme-toggle .icon-sun { opacity: 0; transform: scale(0); }
.theme-toggle .icon-moon { opacity: 1; transform: scale(1); }

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.mobile-menu-toggle:hover {
  background: rgba(255,79,163,0.08);
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(13,13,20,0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.search-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.search-overlay-box {
  width: 100%;
  max-width: 680px;
  margin: 0 var(--space-lg);
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(-20px) scale(0.97);
  transition: transform var(--transition-bounce);
}

.search-overlay.active .search-overlay-box {
  transform: translateY(0) scale(1);
}

.search-overlay-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  transition: border-color var(--transition-fast);
}

.search-overlay-input-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(255,79,163,0.1);
}

.search-overlay-input {
  flex: 1;
  font-size: 18px;
  color: var(--color-text-primary);
  background: none;
  caret-color: var(--color-primary);
}

.search-overlay-input::placeholder {
  color: var(--color-text-secondary);
}

.search-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-card);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-close:hover {
  background: var(--gradient-primary);
  color: #fff;
}

.search-suggestions {
  margin-top: var(--space-md);
}

.search-suggestions-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.search-tag {
  padding: 6px 14px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(255,79,163,0.06);
}

.search-results-ajax {
  margin-top: var(--space-md);
  max-height: 360px;
  overflow-y: auto;
}

.ajax-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ajax-result-item:hover {
  background: rgba(255,79,163,0.06);
}

.ajax-result-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.ajax-result-info {
  flex: 1;
  min-width: 0;
}

.ajax-result-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ajax-result-cat {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: var(--color-bg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(255,79,163,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(139,92,246,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 60% 80%, rgba(255,213,79,0.08) 0%, transparent 50%);
  pointer-events: none;
}

.hero-bg-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF4FA3' fill-opacity='1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) 0;
}

.hero-content {
  max-width: 560px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,79,163,0.08);
  border: 1px solid rgba(255,79,163,0.2);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  animation: fadeSlideUp 0.6s ease both;
}

.hero-eyebrow span { font-size: 16px; }

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-lg);
  animation: fadeSlideUp 0.6s 0.1s ease both;
}

.hero-title .accent {
  font-family: var(--font-accent);
  font-style: italic;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  animation: fadeSlideUp 0.6s 0.2s ease both;
}

.hero-search-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 6px 6px 6px 20px;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-lg);
  animation: fadeSlideUp 0.6s 0.3s ease both;
  transition: all var(--transition-fast);
}

.hero-search-bar:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(255,79,163,0.1), var(--shadow-md);
}

.hero-search-input {
  flex: 1;
  font-size: 15px;
  color: var(--color-text-primary);
  background: none;
  caret-color: var(--color-primary);
}

.hero-search-input::placeholder {
  color: var(--color-text-secondary);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  animation: fadeSlideUp 0.6s 0.4s ease both;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  animation: fadeSlideUp 0.6s 0.5s ease both;
}

.hero-stat-number {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.hero-stat-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 3px;
}

/* Hero Visual — Floating Cards */
.hero-visual {
  position: relative;
  height: 480px;
  animation: fadeSlideUp 0.7s 0.2s ease both;
}

.floating-card {
  position: absolute;
  background: var(--color-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-slow);
}

.floating-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.floating-card-1 {
  width: 200px;
  height: 280px;
  top: 0;
  left: 15%;
  animation: float1 6s ease-in-out infinite;
  z-index: 2;
}

.floating-card-2 {
  width: 175px;
  height: 240px;
  top: 40px;
  right: 5%;
  animation: float2 7s 1s ease-in-out infinite;
  z-index: 1;
}

.floating-card-3 {
  width: 155px;
  height: 200px;
  bottom: 10px;
  left: 2%;
  animation: float3 5.5s 0.5s ease-in-out infinite;
  z-index: 3;
}

.floating-card-4 {
  width: 145px;
  height: 195px;
  bottom: 0;
  right: 20%;
  animation: float1 6.5s 1.5s ease-in-out infinite;
  z-index: 2;
}

.floating-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

/* Category Pill on floating card */
.hero-cat-label {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

.hero-cat-label span {
  background: rgba(17,24,39,0.8);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
}

/* Floating Engagement Stats */
.floating-stat-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-card);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-heading);
  animation: float2 4s ease-in-out infinite;
  z-index: 10;
}

.floating-stat-pill.saves {
  top: 35%;
  left: 0;
  color: var(--color-primary);
}

.floating-stat-pill.views {
  bottom: 20%;
  right: 0;
  color: var(--color-secondary);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.section-title .italic {
  font-family: var(--font-accent);
  font-style: italic;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   CATEGORY SLIDER
   ============================================================ */
.categories-slider-section {
  padding: var(--space-xl) 0;
  overflow: hidden;
  background: var(--gradient-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.categories-track-wrap {
  position: relative;
}

.categories-track-wrap::before,
.categories-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.categories-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.categories-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.categories-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--space-sm) var(--space-xl);
  cursor: grab;
  user-select: none;
}

.categories-track::-webkit-scrollbar { display: none; }
.categories-track.grabbing { cursor: grabbing; }

.category-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
  transition: all var(--transition-bounce);
  flex-shrink: 0;
}

.category-chip:hover,
.category-chip.active {
  background: var(--gradient-primary);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,79,163,0.3);
}

.category-chip:hover *,
.category-chip.active * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.category-chip-emoji {
  font-size: 20px;
  line-height: 1;
}

.category-chip-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.category-chip-count {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
  transition: color var(--transition-fast);
}

/* ============================================================
   MASONRY GRID
   ============================================================ */
.masonry-section {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.masonry-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.masonry-filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.filter-btn {
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-heading);
  color: var(--color-text-secondary);
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.filter-btn.active {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255,79,163,0.3);
}

.masonry-sort {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sort-select {
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* MASONRY GRID LAYOUT */
.masonry-grid {
  columns: 5 220px;
  column-gap: var(--grid-gap);
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: var(--grid-gap);
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.masonry-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* POST CARD */
.post-card {
  position: relative;
  background: var(--color-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-bounce), box-shadow var(--transition-slow);
  cursor: pointer;
  display: block;
}

.post-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-card-hover);
}

.post-card:hover .card-image img {
  transform: scale(1.07);
}

.post-card:hover .card-overlay {
  opacity: 1;
}

.post-card:hover .card-actions {
  opacity: 1;
  transform: translateY(0);
}

/* Card Image */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: var(--color-border);
}

.card-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform var(--transition-slow);
  will-change: transform;
}

.card-image-placeholder {
  width: 100%;
  padding-top: 133%; /* 3:4 ratio */
  background: linear-gradient(135deg, var(--color-border), rgba(139,92,246,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Card Overlay */
.card-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-card-hover);
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* Card Category Badge */
.card-category {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* Card Save Button */
.card-save-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-bounce);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  opacity: 0;
  transform: scale(0.8);
}

.post-card:hover .card-save-btn {
  opacity: 1;
  transform: scale(1);
}

.card-save-btn:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  transform: scale(1.15) !important;
}

.card-save-btn.saved {
  background: var(--color-primary);
  opacity: 1;
  transform: scale(1);
}

.card-save-btn.saved svg {
  color: #fff;
  fill: #fff;
}

.card-save-btn svg {
  color: var(--color-primary);
  transition: all var(--transition-fast);
}

/* Card Actions (hover) */
.card-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--transition-base);
  z-index: 3;
}

.card-action-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all var(--transition-bounce);
}

.card-action-btn:hover {
  background: rgba(255,255,255,0.9);
  color: var(--color-primary);
  transform: scale(1.1);
}

/* Card Body */
.card-body {
  padding: 14px 16px 16px;
}

.card-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

.post-card:hover .card-title {
  color: var(--color-primary);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-meta-item svg {
  flex-shrink: 0;
}

/* Ad Card */
.ad-card {
  position: relative;
  background: var(--color-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1.5px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.ad-card-label {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 500;
}

/* ============================================================
   INFINITE SCROLL LOADER
   ============================================================ */
.infinite-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) 0;
  gap: var(--space-md);
}

.loader-dots {
  display: flex;
  gap: 6px;
}

.loader-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  animation: loaderBounce 1.2s ease-in-out infinite;
}

.loader-dot:nth-child(2) { animation-delay: 0.2s; }
.loader-dot:nth-child(3) { animation-delay: 0.4s; }

.loader-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ============================================================
   TRENDING / VIRAL PICKS SECTION
   ============================================================ */
.viral-section {
  padding: var(--space-2xl) 0;
  background: var(--gradient-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.viral-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.viral-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #EF4444, #DC2626);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-heading);
  animation: pulseBadge 2s ease-in-out infinite;
}

.viral-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--grid-gap);
}

.viral-card-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.viral-card-featured .post-card {
  height: 100%;
}

.viral-card-featured .card-image {
  height: calc(100% - 80px);
  min-height: 300px;
}

.viral-card-featured .card-image img {
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */
.newsletter-section {
  padding: var(--space-2xl) 0;
}

.newsletter-card {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-3xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.newsletter-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 80% at 0% 50%, rgba(255,79,163,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(139,92,246,0.05) 0%, transparent 55%);
  pointer-events: none;
}

.newsletter-decoration {
  position: absolute;
  font-size: 140px;
  opacity: 0.04;
  right: -20px;
  top: -20px;
  line-height: 1;
  transform: rotate(15deg);
  pointer-events: none;
}

.newsletter-content {
  position: relative;
  z-index: 1;
}

.newsletter-title {
  font-family: var(--font-accent);
  font-size: clamp(28px, 3vw, 42px);
  font-style: italic;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.newsletter-title strong {
  font-style: normal;
  font-family: var(--font-heading);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.newsletter-subtitle {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.newsletter-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.newsletter-perk-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 10px;
}

.newsletter-form {
  position: relative;
  z-index: 1;
}

.newsletter-form-inner {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
}

.newsletter-form-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.newsletter-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.newsletter-input {
  padding: 12px 18px;
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 14px;
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast);
}

.newsletter-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,79,163,0.1);
}

.newsletter-input::placeholder {
  color: var(--color-text-secondary);
}

.newsletter-disclaimer {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-sm);
  line-height: 1.5;
}

/* ============================================================
   SINGLE POST PAGE
   ============================================================ */
.single-post-hero {
  position: relative;
  background: var(--color-bg);
}

.single-post-breadcrumb {
  padding: var(--space-md) 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

.single-post-breadcrumb a {
  color: var(--color-primary);
  font-weight: 500;
}

.single-post-breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--color-border);
}

.single-post-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-2xl);
  padding: var(--space-xl) 0 var(--space-3xl);
  align-items: start;
}

.single-post-main {}

.single-post-featured-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.single-post-featured-img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
}

.single-post-featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  background: linear-gradient(to top, rgba(17,24,39,0.85) 0%, transparent 100%);
}

.single-post-save-cta {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pin-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #E60023;
  color: #fff;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-bounce);
  box-shadow: 0 4px 16px rgba(230,0,35,0.4);
  border: none;
}

.pin-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(230,0,35,0.5);
}

/* Post Header */
.single-post-header {
  margin-bottom: var(--space-xl);
}

.single-post-cats {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.single-post-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.single-post-excerpt {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.75;
  font-family: var(--font-accent);
  font-style: italic;
  margin-bottom: var(--space-lg);
}

.single-post-author-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.post-author-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.post-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.post-author-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.post-author-date {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.post-meta-pills {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.meta-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Social Share Rail */
.social-share-rail {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 48px;
  float: left;
  margin-left: -70px;
}

.share-rail-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-bounce);
  border: none;
  box-shadow: var(--shadow-sm);
}

.share-rail-btn:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: var(--shadow-md);
}

.share-rail-btn.pinterest { background: #E60023; color: #fff; }
.share-rail-btn.facebook  { background: #1877F2; color: #fff; }
.share-rail-btn.whatsapp  { background: #25D366; color: #fff; }
.share-rail-btn.copy      { background: var(--color-card); color: var(--color-text-secondary); border: 1.5px solid var(--color-border); }

.share-rail-count {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
}

/* Post Content */
.post-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-primary);
}

.post-content h2, .post-content h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: var(--space-xl) 0 var(--space-md);
  color: var(--color-text-primary);
}

.post-content h2 { font-size: 26px; }
.post-content h3 { font-size: 20px; }

.post-content p { margin-bottom: var(--space-md); }

.post-content img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin: var(--space-xl) 0;
}

.post-content blockquote {
  border-left: 4px solid var(--color-primary);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  background: rgba(255,79,163,0.04);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 18px;
  color: var(--color-text-secondary);
}

.post-content ul, .post-content ol {
  list-style: initial;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}

.post-content li { margin-bottom: 6px; }

.post-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* TOC */
.post-toc {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}

.post-toc-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-toc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.post-toc-item a {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition-fast);
}

.post-toc-item a:hover {
  color: var(--color-primary);
}

.post-toc-item a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  flex-shrink: 0;
}

/* Post Sidebar */
.single-post-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 20px);
}

.sidebar-widget {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.sidebar-widget-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
  position: relative;
}

.sidebar-widget-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--gradient-primary);
}

/* Related Posts Grid */
.related-posts-section {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-border);
  background: var(--gradient-soft);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

/* ============================================================
   CATEGORY PAGE HEADERS
   ============================================================ */
.category-hero {
  padding: var(--space-2xl) 0;
  position: relative;
  overflow: hidden;
}

.category-hero--mehndi {
  background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(5,150,105,0.04) 100%);
}

.category-hero--nail-art {
  background: linear-gradient(135deg, rgba(255,79,163,0.08) 0%, rgba(225,29,107,0.04) 100%);
}

.category-hero--outfits {
  background: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(109,40,217,0.04) 100%);
}

.category-hero--sneakers {
  background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(217,119,6,0.04) 100%);
}

.category-hero-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.category-hero-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.category-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.category-hero-desc {
  font-size: 16px;
  color: var(--color-text-secondary);
  max-width: 500px;
  line-height: 1.6;
}

.category-hero-count {
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-xl);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-text-primary);
  color: rgba(255,255,255,0.7);
  padding: var(--space-3xl) 0 0;
}

[data-theme="dark"] .site-footer {
  background: #08080F;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand {}

.footer-logo-text {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-sm);
}

.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  font-family: var(--font-accent);
  margin-bottom: var(--space-lg);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
}

.footer-social-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.footer-social-btn:hover {
  background: var(--gradient-primary);
  color: #fff;
  transform: translateY(-2px);
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition-fast);
}

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

.footer-bottom {
  padding: var(--space-lg) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-lg);
}

.footer-bottom-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  transition: color var(--transition-fast);
}

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

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  height: var(--bottom-nav-height);
  background: rgba(255,249,252,0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--color-border);
  padding: 0 var(--space-sm);
  align-items: center;
  justify-content: space-around;
}

[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(13,13,20,0.95);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  height: 100%;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
  position: relative;
}

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

.mobile-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 0 0 3px 3px;
  transition: transform var(--transition-bounce);
}

.mobile-nav-item.active::before {
  transform: translateX(-50%) scaleX(1);
}

.mobile-nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-bounce);
}

.mobile-nav-item.active .mobile-nav-icon {
  transform: scale(1.15);
}

.mobile-nav-label {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
}

/* Central explore button */
.mobile-nav-explore {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,79,163,0.4);
  cursor: pointer;
  margin-top: -16px;
  transition: all var(--transition-bounce);
  flex-shrink: 0;
  border: none;
}

.mobile-nav-explore:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,79,163,0.5);
}

/* ============================================================
   BOOKMARK / SAVED PANEL
   ============================================================ */
.saved-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  z-index: 950;
  background: var(--color-card);
  box-shadow: -8px 0 40px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.saved-panel.open {
  transform: translateX(0);
}

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

.saved-panel-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.saved-panel-close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.saved-panel-close:hover {
  background: rgba(255,79,163,0.08);
  color: var(--color-primary);
}

.saved-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
}

.saved-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.saved-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3/4;
}

.saved-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.saved-item:hover img {
  transform: scale(1.05);
}

.saved-item-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(17,24,39,0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.saved-item:hover .saved-item-remove {
  opacity: 1;
}

.saved-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-md);
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--space-2xl);
}

.saved-panel-empty-icon {
  font-size: 64px;
  opacity: 0.3;
}

/* ============================================================
   RECENTLY VIEWED
   ============================================================ */
.recently-viewed-bar {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
}

.recently-viewed-scroll {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-sm);
}

.recently-viewed-scroll::-webkit-scrollbar { display: none; }

.recently-viewed-item {
  flex-shrink: 0;
  width: 80px;
  cursor: pointer;
  text-align: center;
}

.recently-viewed-thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.recently-viewed-item:hover .recently-viewed-thumb {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.recently-viewed-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   404 PAGE
   ============================================================ */
.page-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
}

.page-404-inner {
  max-width: 520px;
}

.page-404-emoji {
  font-size: 80px;
  margin-bottom: var(--space-lg);
  animation: float1 3s ease-in-out infinite;
}

.page-404-code {
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-sm);
}

.page-404-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.page-404-text {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  font-size: 16px;
}

/* ============================================================
   ARCHIVE / SEARCH PAGE
   ============================================================ */
.archive-header {
  padding: var(--space-2xl) 0 var(--space-lg);
}

.search-results-count {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) 0;
}

.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-numbers.current {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 90px;
  right: var(--space-lg);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-text-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-heading);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: all var(--transition-bounce);
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-1.5deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-16px); }
}

@keyframes loaderBounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1.2); opacity: 1; }
}

@keyframes pulseBadge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-border) 25%, rgba(243,232,240,0.5) 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ============================================================
   RESPONSIVE — BREAKPOINTS
   ============================================================ */

/* 1280px and below */
@media (max-width: 1280px) {
  .masonry-grid { columns: 4 200px; }
  .viral-grid { grid-template-columns: 1fr 1fr 1fr; }
  .viral-card-featured { grid-column: span 2; }
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-top .footer-col:last-child { display: none; }
}

/* 1024px and below */
@media (max-width: 1024px) {
  :root { --header-height: 60px; }

  .hero-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero-visual { height: 320px; display: none; }
  .hero-content { max-width: 100%; }

  .main-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
  .search-trigger { min-width: 160px; }

  .masonry-grid { columns: 3 180px; }
  .single-post-layout { grid-template-columns: 1fr; }
  .single-post-sidebar { position: static; }
  .social-share-rail { display: none; }

  .newsletter-card { grid-template-columns: 1fr; padding: var(--space-xl); }
  .footer-top { grid-template-columns: 1fr 1fr; }

  .related-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 768px and below */
@media (max-width: 768px) {
  :root {
    --grid-gap: 12px;
    --space-3xl: 60px;
    --space-2xl: 40px;
  }

  body { padding-bottom: var(--bottom-nav-height); }

  .mobile-bottom-nav { display: flex; }

  .masonry-grid { columns: 2 150px; }
  .viral-grid { grid-template-columns: 1fr 1fr; }
  .viral-card-featured { grid-column: span 2; }

  .categories-slider-section { padding: var(--space-lg) 0; }
  .hero-section { min-height: 460px; }

  .section-header { flex-direction: column; align-items: flex-start; }

  .search-trigger { display: none; }
  .header-actions .btn--primary { display: none; }

  .footer-top { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; text-align: center; }

  .toast-container { bottom: calc(var(--bottom-nav-height) + 16px); }

  .single-post-featured-img { aspect-ratio: 4/3; }
  .related-posts-grid { grid-template-columns: repeat(2, 1fr); }

  .masonry-controls { flex-direction: column; align-items: flex-start; }
}

/* 480px and below */
@media (max-width: 480px) {
  :root {
    --space-2xl: 32px;
    --card-radius: 16px;
  }

  .container { padding: 0 var(--space-md); }
  .masonry-grid { columns: 2 140px; }
  .hero-title { font-size: 32px; }
  .hero-stats { gap: var(--space-lg); }
  .newsletter-card { padding: var(--space-lg); }
  .related-posts-grid { grid-template-columns: 1fr 1fr; }
}

/* Print */
@media print {
  .site-header,
  .mobile-bottom-nav,
  .social-share-rail,
  .newsletter-section,
  .related-posts-section,
  .sidebar-widget { display: none !important; }
  body { padding-bottom: 0; }
}


/* =================================================================
   ADDITIONAL STYLES — Archives, Single, Category, Search, 404
   Lightbox, TOC, Share Rail, Author Bio, Sidebar Cards
================================================================= */

/* ── ARCHIVE HERO ─────────────────────────────────────── */
.archive-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fff9fc 0%, #f3f0ff 100%);
  padding: 4rem 0 3rem;
  margin-bottom: 2rem;
}
.archive-hero__inner { display: flex; align-items: center; gap: 2rem; }
.archive-hero__emoji { font-size: 4rem; line-height: 1; flex-shrink: 0; }
.archive-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 .75rem; }
.archive-hero__subtitle { color: var(--text-secondary); font-size: 1.1rem; margin: 0 0 1rem; }
.archive-count { background: var(--primary); color: #fff; padding: .25rem .8rem; border-radius: 50px; font-size: .85rem; font-weight: 600; }
.archive-hero__bg-blob { position: absolute; right: -100px; top: -100px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.12), transparent 70%); pointer-events: none; }

/* ── MASONRY CONTROLS ─────────────────────────────────── */
.masonry-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.sort-controls { display: flex; align-items: center; gap: .5rem; }
.sort-select { padding: .5rem 1rem; border: 1.5px solid var(--border); border-radius: 50px; background: var(--card-bg); color: var(--text-primary); font-family: var(--font-body); font-size: .9rem; cursor: pointer; }
.sort-select:focus { outline: 2px solid var(--primary); }

/* ── PAGINATION ───────────────────────────────────────── */
.pagination-wrap { text-align: center; padding: 3rem 0; }
.fusionstyle-pagination .nav-links { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.fusionstyle-pagination .page-numbers { padding: .5rem 1rem; border-radius: 12px; border: 1.5px solid var(--border); color: var(--text-primary); text-decoration: none; transition: var(--transition); }
.fusionstyle-pagination .page-numbers.current,
.fusionstyle-pagination .page-numbers:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── CATEGORY PAGE ────────────────────────────────────── */
.category-hero { position: relative; overflow: hidden; padding: 4rem 0 3rem; }
.niche-mehndi  .category-hero { background: linear-gradient(135deg, #fff8f0 0%, #fce4d6 100%); }
.niche-nails   .category-hero { background: linear-gradient(135deg, #fdf0fb 0%, #f9d5f5 100%); }
.niche-outfits .category-hero { background: linear-gradient(135deg, #f0f4ff 0%, #dce8ff 100%); }
.niche-sneakers .category-hero { background: linear-gradient(135deg, #f0fff8 0%, #d5f5e3 100%); }
.category-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 768px) { .category-hero__inner { grid-template-columns: 1fr; } .category-hero__right { display: none; } }
.category-hero__emoji { font-size: 3rem; display: block; margin-bottom: .5rem; }
.category-hero__title { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 0 0 1rem; }
.category-hero__subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 1.5rem; }
.category-hero__stats { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.stat-pill { background: rgba(255,255,255,.8); backdrop-filter: blur(8px); padding: .5rem 1.2rem; border-radius: 50px; display: flex; flex-direction: column; align-items: center; font-size: .85rem; border: 1px solid rgba(255,255,255,.6); }
.stat-pill strong { font-size: 1.2rem; font-family: var(--font-heading); }
.category-hero__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-filter-chip { padding: .4rem .9rem; border-radius: 50px; border: 1.5px solid var(--border); background: rgba(255,255,255,.7); font-size: .85rem; cursor: pointer; transition: var(--transition); }
.tag-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.category-hero__mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: .75rem; border-radius: 20px; overflow: hidden; }
.category-hero__mosaic-item { overflow: hidden; border-radius: 12px; }
.mosaic-item--1 { grid-row: span 2; }
.category-hero__mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.category-hero__mosaic-item:hover img { transform: scale(1.05); }
.category-hero__blob { position: absolute; right: -80px; bottom: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,79,163,.1), transparent 70%); pointer-events: none; }
.trending-strip { background: linear-gradient(135deg, var(--primary), var(--secondary)); padding: 1rem 0; overflow: hidden; }
.trending-strip__inner { display: flex; align-items: center; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.trending-strip__inner::-webkit-scrollbar { display: none; }
.trending-strip__label { color: #fff; font-weight: 700; white-space: nowrap; font-size: .95rem; flex-shrink: 0; }
.trending-strip__item { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; white-space: nowrap; background: rgba(255,255,255,.15); padding: .4rem .8rem; border-radius: 50px; font-size: .85rem; flex-shrink: 0; transition: background .2s; }
.trending-strip__item:hover { background: rgba(255,255,255,.25); }
.trending-strip__item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* ── SINGLE POST LAYOUT ───────────────────────────────── */
.single-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; padding: 2rem 0 4rem; align-items: start; }
@media (max-width: 1024px) { .single-layout { grid-template-columns: 1fr; } .single-sidebar { display: none; } }
.single-content-wrap { min-width: 0; }
.single-title { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.25; margin: 1rem 0 1.5rem; }
.single-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.single-meta__author { display: flex; align-items: center; gap: .75rem; }
.single-meta__avatar { border-radius: 50%; width: 40px; height: 40px; }
.single-meta__author-name { display: block; font-weight: 600; font-size: .95rem; }
.single-meta__date { font-size: .85rem; color: var(--text-secondary); }
.single-meta__stats { display: flex; gap: 1rem; }
.meta-stat { font-size: .85rem; color: var(--text-secondary); }
.single-featured-image { position: relative; margin-bottom: 2rem; border-radius: 20px; overflow: hidden; }
.single-hero-img { width: 100%; height: auto; display: block; border-radius: 20px; }
.single-pinterest-cta { position: absolute; bottom: 1rem; right: 1rem; background: #E60023; color: #fff; padding: .6rem 1.2rem; border-radius: 50px; display: flex; align-items: center; gap: .5rem; text-decoration: none; font-size: .85rem; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.single-pinterest-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(230,0,35,.3); }
.single-body { font-size: 1.05rem; line-height: 1.85; color: var(--text-secondary); }
.single-body h2 { color: var(--text-primary); font-size: 1.6rem; margin: 2.5rem 0 1rem; }
.single-body h3 { color: var(--text-primary); font-size: 1.3rem; margin: 2rem 0 .75rem; }
.single-body p { margin-bottom: 1.25rem; }
.single-body img { max-width: 100%; border-radius: 12px; margin: 1.5rem 0; cursor: zoom-in; }
.single-body a { color: var(--primary); text-decoration: underline; }
.single-body blockquote { border-left: 4px solid var(--primary); padding: 1rem 1.5rem; margin: 2rem 0; background: rgba(255,79,163,.05); border-radius: 0 12px 12px 0; font-style: italic; }
.single-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 2rem 0; }
.single-tags__label { font-weight: 600; font-size: .9rem; color: var(--text-secondary); }
.tag-chip { padding: .35rem .8rem; background: rgba(139,92,246,.1); color: var(--secondary); border-radius: 50px; font-size: .8rem; text-decoration: none; transition: var(--transition); }
.tag-chip:hover { background: var(--secondary); color: #fff; }
.single-pinterest-bottom { background: linear-gradient(135deg, #fff5fb, #f3f0ff); border-radius: 20px; padding: 2rem; text-align: center; margin: 3rem 0; border: 1px solid rgba(255,79,163,.15); }
.single-pinterest-bottom__text { margin: 0 0 1rem; color: var(--text-secondary); }
.btn-pinterest { background: #E60023; color: #fff; display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.8rem; border-radius: 50px; text-decoration: none; font-weight: 700; transition: var(--transition); }
.btn-pinterest:hover { background: #c1001f; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(230,0,35,.3); }
.author-bio-card { display: flex; gap: 1.5rem; background: var(--card-bg); border-radius: 20px; padding: 1.5rem; margin: 2.5rem 0; border: 1px solid var(--border); }
.author-bio__avatar { border-radius: 50%; width: 80px; height: 80px; flex-shrink: 0; }
.author-bio__name { margin: 0 0 .5rem; font-size: 1.1rem; }
.author-bio__desc { font-size: .9rem; color: var(--text-secondary); margin-bottom: .75rem; }
.author-bio__link { color: var(--primary); font-size: .9rem; text-decoration: none; font-weight: 600; }
@media (max-width: 480px) { .author-bio-card { flex-direction: column; } }

/* ── SOCIAL SHARE RAIL ────────────────────────────────── */
.social-share-rail { position: fixed; left: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .3s; }
.share-rail--visible { opacity: 1; pointer-events: all; }
@media (max-width: 1200px) { .social-share-rail { display: none; } }
.share-rail__inner { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.share-rail__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); writing-mode: vertical-rl; margin-bottom: .5rem; }
.share-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; border: none; cursor: pointer; transition: var(--transition); position: relative; }
.share-btn--pinterest { background: #E60023; color: #fff; }
.share-btn--facebook  { background: #1877F2; color: #fff; }
.share-btn--whatsapp  { background: #25D366; color: #fff; }
.share-btn--copy      { background: var(--card-bg); color: var(--text-primary); border: 1.5px solid var(--border); }
.share-btn--save      { background: var(--card-bg); color: var(--text-secondary); border: 1.5px solid var(--border); }
.share-btn--save.is-saved { background: #fff0f5; color: var(--primary); border-color: var(--primary); }
.share-btn:hover { transform: scale(1.1) translateX(4px); box-shadow: var(--shadow-md); }
.share-btn__count { position: absolute; top: -6px; right: -6px; background: var(--primary); color: #fff; font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.share-btn--copied svg { stroke: var(--success); }

/* ── TOC ──────────────────────────────────────────────── */
.toc-wrapper { background: linear-gradient(135deg, #fff9fc, #f3f0ff); border: 1px solid rgba(139,92,246,.2); border-radius: 16px; padding: 1.25rem 1.5rem; margin: 2rem 0; }
.toc-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.toc-icon { font-size: 1.2rem; }
.toc-title { margin: 0; font-size: 1rem; font-weight: 700; flex: 1; }
.toc-toggle { background: none; border: none; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; padding: 0; transition: var(--transition); }
.toc-toggle:hover { color: var(--primary); }
.toc-list { margin: 0; padding-left: 1.25rem; counter-reset: toc; }
.toc-item { margin: .4rem 0; list-style: none; counter-increment: toc; }
.toc-item--sub { padding-left: 1.25rem; }
.toc-link { color: var(--text-secondary); text-decoration: none; font-size: .9rem; line-height: 1.5; transition: color .2s; display: block; padding: .15rem 0; }
.toc-link:hover, .toc-link--active { color: var(--primary); font-weight: 600; }

/* ── SINGLE SIDEBAR ───────────────────────────────────── */
.single-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-pin-card { background: var(--card-bg); border-radius: 20px; overflow: hidden; border: 1px solid var(--border); }
.sidebar-pin-card__img { width: 100%; height: 200px; object-fit: cover; display: block; }
.sidebar-pin-card__body { padding: 1rem; text-align: center; }
.sidebar-pin-card__body p { font-size: .85rem; color: var(--text-secondary); margin-bottom: .75rem; }
.sidebar-categories-card { background: var(--card-bg); border-radius: 20px; padding: 1.25rem; border: 1px solid var(--border); }
.sidebar-categories-card h3 { margin: 0 0 1rem; font-size: 1rem; }
.sidebar-categories-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.sidebar-categories-card a { display: flex; justify-content: space-between; align-items: center; padding: .5rem .25rem; color: var(--text-secondary); text-decoration: none; font-size: .9rem; border-radius: 8px; transition: var(--transition); }
.sidebar-categories-card a:hover { color: var(--primary); background: rgba(255,79,163,.06); padding-left: .5rem; }
.cat-count { background: var(--bg-secondary); padding: .1rem .5rem; border-radius: 50px; font-size: .75rem; }

/* ── LIGHTBOX ─────────────────────────────────────────── */
.fs-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.fs-lightbox[hidden] { display: none; }
.fs-lightbox--open { animation: fadeIn .2s ease; }
.fs-lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(255,255,255,.1); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.fs-lightbox__close:hover { background: rgba(255,255,255,.2); }
.fs-lightbox__content { max-width: min(90vw, 900px); text-align: center; }
.fs-lightbox__img { max-height: 85vh; max-width: 100%; border-radius: 12px; display: block; }
.fs-lightbox__caption { color: rgba(255,255,255,.7); font-size: .9rem; margin-top: 1rem; }

/* ── RELATED POSTS ────────────────────────────────────── */
.related-posts-section { padding: 4rem 0; background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(243,240,255,.4) 100%); }
.related-posts__cta { text-align: center; margin-top: 3rem; }
.related-masonry-grid .masonry-item { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.related-masonry-grid .masonry-item.is-visible { opacity: 1; transform: none; }

/* ── SEARCH PAGE ──────────────────────────────────────── */
.search-hero { padding: 4rem 0 3rem; background: linear-gradient(135deg, #fff9fc 0%, #f3f0ff 100%); text-align: center; }
.search-hero__inner { max-width: 640px; margin: 0 auto; }
.search-hero__title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .5rem; }
.search-hero__count { color: var(--text-secondary); margin-bottom: 2rem; }
.search-hero__form { margin-top: 1.5rem; }
.search-input-wrap { display: flex; align-items: center; gap: .75rem; background: var(--card-bg); border: 2px solid var(--border); border-radius: 50px; padding: .4rem .4rem .4rem 1.25rem; transition: border-color .2s; }
.search-input-wrap:focus-within { border-color: var(--primary); }
.search-icon { color: var(--text-secondary); flex-shrink: 0; }
.search-hero__input { flex: 1; border: none; background: transparent; font-family: var(--font-body); font-size: 1rem; color: var(--text-primary); outline: none; }
.search-hero__btn { border-radius: 50px; padding: .6rem 1.4rem; flex-shrink: 0; }
.no-results-cats { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.5rem 0; }

/* ── PAGE TEMPLATE ────────────────────────────────────── */
.container--narrow { max-width: 800px; }
.page-content-header { margin-bottom: 2.5rem; }
.page-hero-image { margin-bottom: 2rem; border-radius: 20px; overflow: hidden; }
.page-hero-image img { width: 100%; height: auto; }
.page-title { font-size: clamp(2rem, 5vw, 3.5rem); }
.page-body { font-size: 1.05rem; line-height: 1.85; color: var(--text-secondary); }
.page-body h2, .page-body h3 { color: var(--text-primary); margin-top: 2rem; }
.page-body img { max-width: 100%; border-radius: 12px; margin: 1.5rem 0; }
.page-body a { color: var(--primary); }

/* ── 404 PAGE ─────────────────────────────────────────── */
.error-404-page { padding: 5rem 0; min-height: 70vh; display: flex; align-items: center; }
.error-404-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
.error-404__number { font-family: var(--font-heading); font-size: clamp(6rem, 15vw, 10rem); font-weight: 900; line-height: 1; letter-spacing: -.05em; }
.error-404__emoji-ring { display: flex; gap: .75rem; font-size: 2rem; flex-wrap: wrap; justify-content: center; }
.error-404__title { font-size: clamp(1.5rem, 4vw, 2.5rem); margin: 0; }
.error-404__text { color: var(--text-secondary); max-width: 480px; font-size: 1.05rem; }
.error-404__search .search-input-wrap { max-width: 520px; margin: 0 auto; }
.error-404__search .search-hero__input { min-width: 0; }
.error-404__or { color: var(--text-secondary); margin: 1.5rem 0 .75rem; }
.error-404__cat-links { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.recently-viewed-section { margin-top: 4rem; }
.recently-viewed__title { text-align: center; margin-bottom: 1.5rem; }
.recently-viewed__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.recently-viewed__item { display: block; text-decoration: none; border-radius: 12px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); transition: var(--transition); }
.recently-viewed__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.recently-viewed__item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.recently-viewed__item span { display: block; padding: .5rem; font-size: .8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── NO POSTS FOUND ───────────────────────────────────── */
.no-posts-found { text-align: center; padding: 5rem 1rem; }
.no-posts-icon { font-size: 4rem; margin-bottom: 1.5rem; }
.no-posts-found h2 { font-size: 2rem; margin-bottom: .75rem; }
.no-posts-found p { color: var(--text-secondary); margin-bottom: 2rem; }

/* ── DARK MODE OVERRIDES ──────────────────────────────── */
[data-theme="dark"] .archive-hero { background: linear-gradient(135deg, #1a1025 0%, #120d20 100%); }
[data-theme="dark"] .toc-wrapper { background: linear-gradient(135deg, rgba(255,79,163,.05), rgba(139,92,246,.05)); }
[data-theme="dark"] .single-pinterest-bottom { background: linear-gradient(135deg, rgba(255,79,163,.07), rgba(139,92,246,.07)); }
[data-theme="dark"] .author-bio-card,
[data-theme="dark"] .sidebar-categories-card,
[data-theme="dark"] .sidebar-pin-card { background: var(--card-bg); }
[data-theme="dark"] .search-hero,
[data-theme="dark"] .category-hero { background: linear-gradient(135deg, #120d20 0%, #0e0a1a 100%); }

/* ── MASONRY END MESSAGE ──────────────────────────────── */
.masonry-end-message { text-align: center; padding: 3rem 1rem; }
.masonry-end__inner { display: inline-flex; flex-direction: column; align-items: center; gap: .75rem; }
.masonry-end__emoji { font-size: 2.5rem; }
.masonry-end__inner p { color: var(--text-secondary); font-size: .95rem; }

/* ── SAVE BOUNCE ANIMATION ────────────────────────────── */
@keyframes saveBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(.9); }
}
.save-bounce { animation: saveBounce .4s cubic-bezier(.36,.07,.19,.97); }

/* ── LOADER DOTS ──────────────────────────────────────── */
.loader-dots { display: flex; gap: 6px; justify-content: center; }
.loader-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: loaderBounce 1.2s infinite ease-in-out; }
.loader-dots span:nth-child(2) { animation-delay: .2s; }
.loader-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes loaderBounce { 0%, 80%, 100% { transform: scale(0); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* ── UTILITIES ────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; }
.btn-ghost { background: transparent; border: 1.5px solid var(--border); color: var(--text-primary); padding: .6rem 1.2rem; border-radius: 50px; text-decoration: none; font-size: .9rem; transition: var(--transition); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.overlay-open, .menu-open, .lightbox-open, .saved-open { overflow: hidden; }


/* =================================================================
   UPDATE PATCH — Top Bar, New Footer, Viral Single, Similar Posts,
   Image Save Button, Randomized Grid, Date Hidden
================================================================= */

/* ── TOP LEGAL BAR ─────────────────────────────────────── */
.topbar-legal {
  background: #1a0d2e;
  color: rgba(255,255,255,.75);
  font-size: .78rem;
  line-height: 1;
  z-index: 1000;
  position: relative;
}
.topbar-legal__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar-tagline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  opacity: .8;
}
.topbar-legal__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: .1rem;
  flex-wrap: wrap;
}
.topbar-legal__menu li a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  padding: .3rem .65rem;
  border-radius: 4px;
  transition: color .15s, background .15s;
  white-space: nowrap;
  display: block;
}
.topbar-legal__menu li a:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}
@media (max-width: 600px) {
  .topbar-tagline { display: none; }
  .topbar-legal__inner { justify-content: center; }
  .topbar-legal__menu { gap: 0; }
}

/* Push everything down for topbar height */
.site-header { top: 0; }

/* ── FOOTER REDESIGN ───────────────────────────────────── */
.footer-newsletter-band {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  padding: 2rem 0;
}
.footer-newsletter-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-newsletter-band__text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
}
.footer-newsletter-band__emoji { font-size: 2rem; flex-shrink: 0; }
.footer-newsletter-band__text strong { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.footer-newsletter-band__text p { margin: 0; opacity: .9; font-size: .9rem; }
.footer-newsletter-form {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.footer-newsletter-input {
  padding: .65rem 1.2rem;
  border-radius: 50px;
  border: none;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-family: var(--font-body);
  font-size: .95rem;
  min-width: 240px;
  backdrop-filter: blur(4px);
}
.footer-newsletter-input::placeholder { color: rgba(255,255,255,.6); }
.footer-newsletter-input:focus { outline: 2px solid rgba(255,255,255,.6); }
.footer-newsletter-btn {
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  border-radius: 50px;
  padding: .65rem 1.4rem;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .footer-newsletter-band__inner { flex-direction: column; text-align: center; }
  .footer-newsletter-form { flex-direction: column; width: 100%; }
  .footer-newsletter-input { min-width: 0; width: 100%; }
}

.footer-body { background: #0f0a1a; padding: 4rem 0 2rem; }
[data-theme="light"] .footer-body { background: #1a1030; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 3rem;
}
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 580px)  { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

.footer-col__heading {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-logo__text .gradient-text { font-size: 1.4rem; }
.footer-logo__img { height: 36px; width: auto; margin-bottom: .75rem; }
.footer-tagline {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  margin: .5rem 0 .6rem;
}
.footer-about { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.6; margin-bottom: 1.25rem; }
.footer-social { display: flex; gap: .6rem; flex-wrap: wrap; }
.footer-social__link {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  color: #fff;
}
.footer-social__link--pinterest  { background: #E60023; }
.footer-social__link--instagram  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.footer-social__link--tiktok     { background: #000; }
.footer-social__link--facebook   { background: #1877F2; }
.footer-social__link:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }

/* Footer nav lists */
.footer-nav-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .1rem;
}
.footer-nav-list .menu-item a,
.footer-nav-list li a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: .875rem;
  padding: .35rem 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s, padding-left .2s;
  line-height: 1.4;
}
.footer-nav-list .menu-item a:hover,
.footer-nav-list li a:hover {
  color: var(--primary);
  padding-left: .4rem;
}
.footer-cat-count { font-size: .75rem; opacity: .6; }

/* Footer random posts */
.footer-random-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.footer-random-post__link {
  display: flex; gap: .8rem; align-items: center;
  text-decoration: none;
  transition: opacity .2s;
}
.footer-random-post__link:hover { opacity: .85; }
.footer-random-post__thumb {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
}
.footer-random-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer-random-post__info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.footer-random-post__cat { font-size: .72rem; color: var(--primary); font-weight: 600; }
.footer-random-post__title {
  font-size: .83rem;
  color: rgba(255,255,255,.75);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer bottom */
.footer-bottom { background: #080512; padding: 1.25rem 0; }
.footer-bottom__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
}
.footer-copyright { font-size: .8rem; color: rgba(255,255,255,.4); margin: 0; }
.footer-copyright a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-bottom__links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-bottom__links a { font-size: .8rem; color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s; }
.footer-bottom__links a:hover { color: var(--primary); }
.footer-credit { font-size: .78rem; color: rgba(255,255,255,.3); margin: 0; }
@media (max-width: 580px) {
  .footer-bottom__inner { flex-direction: column; text-align: center; }
}

/* ── VIRAL SINGLE POST LAYOUT ──────────────────────────── */
.viral-layout__wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  padding: 2.5rem 0 5rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .viral-layout__wrap { grid-template-columns: 1fr; }
  .single-sidebar { display: none; }
}

/* Viral header */
.viral-header { margin-bottom: 2.5rem; }
.viral-header__badges { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

.viral-tier-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .85rem; border-radius: 50px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.tier-viral    { background: linear-gradient(135deg,#ff4fa3,#ff6b35); color: #fff; }
.tier-trending { background: linear-gradient(135deg,#f59e0b,#ef4444); color: #fff; }
.tier-popular  { background: linear-gradient(135deg,#8b5cf6,#6366f1); color: #fff; }
.tier-fresh    { background: rgba(139,92,246,.15); color: var(--secondary); border: 1px solid rgba(139,92,246,.3); }

.viral-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 1.5rem;
  background: linear-gradient(135deg, var(--text-primary) 50%, var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Viral stats bar */
.viral-stats-bar {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  padding: .875rem 1.25rem;
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.viral-stat { display: flex; align-items: center; gap: .4rem; }
.viral-stat__icon { font-size: 1rem; }
.viral-stat__value { font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.viral-stat__label { font-size: .8rem; color: var(--text-secondary); }
.viral-stat--saves .viral-stat__value { color: var(--primary); }

/* Author row */
.viral-author-row {
  display: flex; align-items: center; gap: .875rem;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}
.viral-author__avatar { border-radius: 50%; width: 42px; height: 42px; flex-shrink: 0; }
.viral-author__info { display: flex; flex-direction: column; flex: 1; }
.viral-author__name { font-weight: 700; font-size: .95rem; color: var(--text-primary); }
.viral-author__role { font-size: .78rem; color: var(--text-secondary); }

.viral-save-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border: none; cursor: pointer;
  padding: .55rem 1.1rem; border-radius: 50px;
  font-size: .85rem; font-weight: 700;
  transition: transform .2s, box-shadow .2s;
  margin-left: auto;
}
.viral-save-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,79,163,.35); }
.viral-save-btn.is-saved { background: linear-gradient(135deg, #ff4fa3, #e11d48); }

/* Viral share row */
.viral-share-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .875rem 1rem;
  background: linear-gradient(135deg, rgba(255,79,163,.06), rgba(139,92,246,.06));
  border-radius: 14px;
  border: 1px solid rgba(255,79,163,.12);
}
.viral-share-row__label { font-size: .8rem; color: var(--text-secondary); font-weight: 600; }
.viral-share-chip {
  padding: .38rem .85rem; border-radius: 50px;
  font-size: .8rem; font-weight: 700;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform .15s, box-shadow .15s;
  display: inline-flex; align-items: center;
}
.viral-share-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.viral-share-chip--fb  { background: #1877F2; color: #fff; }
.viral-share-chip--wa  { background: #25D366; color: #fff; }
.viral-share-chip--pin { background: #E60023; color: #fff; }
.viral-share-chip--copy{ background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border); }

/* Viral body content */
.viral-body {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--text-secondary);
}
.viral-body h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--text-primary);
  margin: 3rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--primary);
  display: inline-block;
}
.viral-body h3 {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin: 2.5rem 0 .875rem;
}
.viral-body p { margin-bottom: 1.5rem; }
.viral-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.viral-body ul, .viral-body ol {
  padding-left: 1.5rem; margin-bottom: 1.5rem;
}
.viral-body li { margin-bottom: .5rem; }
.viral-body blockquote {
  position: relative;
  font-size: 1.25rem;
  font-style: italic;
  font-family: var(--font-heading);
  color: var(--text-primary);
  padding: 1.5rem 2rem 1.5rem 3rem;
  margin: 2.5rem 0;
  background: linear-gradient(135deg, rgba(255,79,163,.06), rgba(139,92,246,.06));
  border-radius: 16px;
  border-left: 4px solid var(--primary);
}
.viral-body blockquote::before {
  content: '"';
  position: absolute; left: .75rem; top: .25rem;
  font-size: 4rem; color: var(--primary);
  font-family: Georgia, serif; line-height: 1; opacity: .4;
}
.viral-body strong { color: var(--text-primary); font-weight: 700; }
/* Viral pull-quote (first paragraph of a section) styled bigger */
.viral-body > p:first-of-type {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.75;
}

/* Tags */
.viral-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 2.5rem 0;
}
.viral-tags__label { font-size: 1rem; }

/* Viral bottom CTA */
.viral-bottom-cta {
  background: linear-gradient(135deg, #fff0fa, #f0ecff);
  border-radius: 24px;
  padding: 2.5rem;
  text-align: center;
  margin: 3rem 0;
  border: 1px solid rgba(255,79,163,.15);
}
[data-theme="dark"] .viral-bottom-cta {
  background: linear-gradient(135deg, rgba(255,79,163,.08), rgba(139,92,246,.08));
}
.viral-bottom-cta__text {
  font-size: 1.15rem; font-weight: 600; margin: 0 0 1.5rem;
  color: var(--text-primary);
}
.viral-bottom-cta__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.btn-whatsapp { background: #25D366; color: #fff; display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.6rem; border-radius: 50px; text-decoration: none; font-weight: 700; transition: var(--transition); }
.btn-whatsapp:hover { background: #1ebe5d; transform: translateY(-2px); }
.btn-lg { padding: .85rem 2rem; font-size: 1rem; }

/* ── SIMILAR POSTS STRIP ───────────────────────────────── */
.similar-posts-section {
  padding: 4rem 0 5rem;
  background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(243,240,255,.5) 100%);
}
[data-theme="dark"] .similar-posts-section {
  background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(26,10,40,.5) 100%);
}
.similar-posts__header { text-align: center; margin-bottom: 2.5rem; }
.similar-posts__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .5rem; }
.similar-posts__subtitle { color: var(--text-secondary); font-size: .95rem; }

/* Horizontal scrollable strip */
.similar-posts-strip {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}
.similar-posts-strip::-webkit-scrollbar { height: 4px; }
.similar-posts-strip::-webkit-scrollbar-track { background: transparent; }
.similar-posts-strip::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; }

.similar-post-card {
  flex: 0 0 260px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform .25s, box-shadow .25s;
  position: relative;
}
.similar-post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.similar-post-card__link { display: block; text-decoration: none; }
.similar-post-card__img-wrap {
  position: relative;
  height: 220px; overflow: hidden;
}
.similar-post-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.similar-post-card:hover .similar-post-card__img { transform: scale(1.06); }
.similar-post-card__no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; background: linear-gradient(135deg,rgba(255,79,163,.1),rgba(139,92,246,.1)); }
.similar-post-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 50%); }
.similar-post-card__cat { position: absolute; top: .75rem; left: .75rem; font-size: .72rem; padding: .3rem .7rem; }
.similar-post-card__trending { position: absolute; top: .75rem; right: .75rem; font-size: 1rem; }

.similar-post-card__body { padding: .875rem 1rem 1rem; }
.similar-post-card__title {
  font-size: .9rem; font-weight: 700; line-height: 1.4;
  color: var(--text-primary); margin: 0 0 .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.similar-post-card__meta { display: flex; gap: .75rem; font-size: .78rem; color: var(--text-secondary); }
.similar-post-card__save {
  position: absolute; bottom: .875rem; right: .875rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: var(--transition);
  backdrop-filter: blur(4px);
}
.similar-post-card__save:hover,
.similar-post-card__save.is-saved { color: var(--primary); background: #fff; }

.similar-posts__cta { text-align: center; margin-top: 2.5rem; }

/* ── IMAGE SAVE BUTTON ─────────────────────────────────── */
.img-save-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
/* Content images inside .viral-body / .single-body get full width */
.viral-body .img-save-wrapper,
.single-body .img-save-wrapper {
  display: block;
  margin: 1.5rem 0;
}
.viral-body .img-save-wrapper img,
.single-body .img-save-wrapper img { margin: 0; border-radius: 16px; width: 100%; }

.img-save-btn {
  position: absolute;
  bottom: .75rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  padding: .45rem 1.1rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s, transform .2s, background .2s;
  z-index: 10;
  letter-spacing: .02em;
}
.img-save-wrapper:hover .img-save-btn,
.img-save-wrapper:focus-within .img-save-btn {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Always visible on touch devices */
@media (hover: none) {
  .img-save-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    background: rgba(0,0,0,.6);
  }
}
.img-save-btn:hover    { background: var(--primary); border-color: var(--primary); }
.img-save-btn--saving  { background: rgba(0,0,0,.5); cursor: wait; }
.img-save-btn--done    { background: #16a34a; border-color: #16a34a; }
.img-save-btn--error   { background: #dc2626; border-color: #dc2626; }

/* For masonry card images */
.masonry-grid .img-save-wrapper { display: block; }
.masonry-grid .img-save-btn {
  bottom: .5rem;
  font-size: .72rem;
  padding: .35rem .85rem;
}

/* ── FOOTER NEWSLETTER (separate from band) ─────────────── */
#footer-newsletter-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ── HIDE POST DATES (belt-and-suspenders on top of PHP filter) ── */
.post-date,
.entry-date,
.published,
.updated,
time.entry-date,
.single-meta__date,
.post-meta-date,
.card-date,
[class*="post-date"],
[class*="entry-date"],
span.date { display: none !important; }

/* ── HEADER SAVES COUNT BADGE ───────────────────────────── */
.header-saves-btn { position: relative; }
.header-saves-count {
  position: absolute;
  top: -5px; right: -5px;
  background: var(--primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  min-width: 17px; height: 17px;
  border-radius: 50px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.header-saves-count:empty,
.header-saves-count[data-count="0"] { display: none; }

/* ── RESPONSIVE TIGHTENING ──────────────────────────────── */
@media (max-width: 768px) {
  .viral-stats-bar { gap: 1rem; }
  .viral-share-row { gap: .4rem; }
  .viral-share-chip { padding: .32rem .7rem; font-size: .75rem; }
  .viral-bottom-cta { padding: 1.75rem 1.25rem; }
  .viral-bottom-cta__actions { gap: .5rem; }
  .btn-lg { padding: .7rem 1.4rem; font-size: .9rem; }
  .similar-post-card { flex: 0 0 200px; }
  .similar-post-card__img-wrap { height: 170px; }
}

/* =================================================================
   FSP — PINTEREST/DECORIPLE HOMEPAGE LAYOUT
   Clean white, red (#E60023) Save buttons, CSS-columns masonry
   16-card grid, tabs bar, card body below image
================================================================= */

/* ── TABS BAR ───────────────────────────────────────────────── */
.fsp-tabs-bar {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 58px; /* height of main site-header */
  z-index: 89;
  /* When topbar-legal is visible (32px tall) */
}
body:has(.topbar-legal) .fsp-tabs-bar { top: 90px; }

.fsp-tabs-inner {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}
.fsp-tabs-inner::-webkit-scrollbar { display: none; }

.fsp-tab {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 24px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.fsp-tab:hover { background: var(--bg-secondary); color: var(--text-primary); }
.fsp-tab--active,
.fsp-tab[aria-selected="true"] {
  background: #111;
  color: #fff;
  font-weight: 600;
}
[data-theme="dark"] .fsp-tab--active { background: #fff; color: #111; }

.fsp-tabs-sort { flex-shrink: 0; padding: 8px 0; }
.fsp-sort-sel {
  padding: 7px 28px 7px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.fsp-sort-sel:focus { outline: 2px solid #E60023; }

/* ── AD STRIP ───────────────────────────────────────────────── */
.fsp-ad-top { padding: 8px 16px; max-width: 1600px; margin: 0 auto; }

/* ── GRID OUTER ─────────────────────────────────────────────── */
.fsp-grid-outer { padding: 14px 14px 40px; max-width: 1600px; margin: 0 auto; }

/* ── THE MASONRY GRID ───────────────────────────────────────── */
.fsp-grid {
  columns: 4 240px;
  column-gap: 12px;
}
@media (min-width: 1400px) { .fsp-grid { columns: 5 220px; } }
@media (min-width: 1700px) { .fsp-grid { columns: 6 200px; } }
@media (max-width: 1000px) { .fsp-grid { columns: 3 200px; } }
@media (max-width: 700px)  { .fsp-grid { columns: 2 160px; } }
@media (max-width: 420px)  { .fsp-grid { columns: 2 130px; } }

/* ── PIN ITEM ───────────────────────────────────────────────── */
.fsp-pin {
  break-inside: avoid;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
}
.fsp-pin.is-visible { opacity: 1; transform: none; }
.fsp-pin--ad { opacity: 1 !important; transform: none !important; }

/* ── PIN CARD INNER (white rounded card) ────────────────────── */
.fsp-pin-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
  transition: box-shadow .22s, transform .22s;
}
.fsp-pin-link:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  transform: translateY(-4px);
}
[data-theme="dark"] .fsp-pin-link {
  background: var(--card-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ── IMAGE WRAP ─────────────────────────────────────────────── */
.fsp-pin-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  line-height: 0;
  border-radius: 16px 16px 0 0;
}
.fsp-pin-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .3s ease;
  border-radius: 16px 16px 0 0;
}
.fsp-pin-link:hover .fsp-pin-img { transform: scale(1.04); }
.fsp-pin-placeholder {
  width: 100%;
  padding-bottom: 125%; /* 4:5 ratio */
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  position: relative;
}

/* ── HOVER OVERLAY ──────────────────────────────────────────── */
.fsp-pin-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.2);
  opacity: 0;
  transition: opacity .2s;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px;
  pointer-events: none;
}
.fsp-pin-link:hover .fsp-pin-overlay {
  opacity: 1;
  pointer-events: all;
}

/* ── PIN BUTTONS ────────────────────────────────────────────── */
.fsp-pin-btn {
  border: none;
  border-radius: 24px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
  transition: transform .12s, filter .12s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.fsp-pin-btn:hover { transform: scale(1.05); }

/* Pinterest button (top-left white) */
.fsp-pin-btn--pinterest {
  background: rgba(255,255,255,.95);
  color: #E60023;
}
.fsp-pin-btn--pinterest:hover { background: #fff; }

/* SAVE button (top-right RED — core Pinterest colour) */
.fsp-pin-btn--save {
  background: #E60023;
  color: #fff;
  margin-left: auto;
}
.fsp-pin-btn--save:hover { background: #c0001e; }
.fsp-pin-btn--save.is-saved { background: #111; }

/* Trending + cat dots */
.fsp-trending-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,.58);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.fsp-cat-dot {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ── CARD BODY ──────────────────────────────────────────────── */
.fsp-pin-body { padding: 8px 12px 12px; }
.fsp-pin-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fsp-pin-author {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.fsp-pin-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fsp-pin-author-name {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fsp-pin-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.fsp-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.fsp-stat svg { flex-shrink: 0; }
.fsp-pin-cat-link {
  font-size: 12px;
  font-weight: 600;
  color: #E60023;
  text-decoration: none;
  display: inline-block;
  margin-top: 2px;
}
.fsp-pin-cat-link:hover { text-decoration: underline; }

/* ── NO POSTS ───────────────────────────────────────────────── */
.fsp-no-posts {
  column-span: all;
  text-align: center;
  padding: 5rem 1rem;
  color: var(--text-secondary);
}
.fsp-no-posts p { font-size: 3rem; margin-bottom: 1rem; }

/* ── LOADER ─────────────────────────────────────────────────── */
.fsp-loader {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-secondary);
  font-size: 13px;
}
.fsp-loader p { margin-top: .5rem; }
.fsp-dots { display: inline-flex; gap: 6px; }
.fsp-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #E60023;
  animation: fspBounce 1.2s infinite ease-in-out;
}
.fsp-dots span:nth-child(2) { animation-delay: .2s; }
.fsp-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes fspBounce { 0%,80%,100%{transform:scale(0);opacity:.4} 40%{transform:scale(1);opacity:1} }

.fsp-load-more-wrap { text-align: center; padding: 2rem; }
.fsp-sentinel { height: 1px; }

/* ── NEWSLETTER STRIP ───────────────────────────────────────── */
.fsp-newsletter {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  background: #fff;
}
[data-theme="dark"] .fsp-newsletter { background: var(--card-bg); }
.fsp-newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.fsp-newsletter-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fsp-newsletter-text strong { font-size: 15px; color: var(--text-primary); }
.fsp-newsletter-text span { font-size: 13px; color: var(--text-secondary); }
.fsp-newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.fsp-newsletter-form input {
  padding: 9px 16px;
  border-radius: 24px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13.5px;
  width: 220px;
  outline: none;
}
.fsp-newsletter-form input:focus { border-color: #E60023; }
.fsp-newsletter-form button {
  padding: 9px 20px;
  background: #E60023;
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
}
.fsp-newsletter-form button:hover { background: #c0001e; }
@media (max-width: 580px) {
  .fsp-newsletter-inner { flex-direction: column; }
  .fsp-newsletter-form input { width: 100%; }
}