/* =====================================================
   InfoShop — Layout
   ===================================================== */

/* ---- Page wrapper ---- */
.page {
       min-height: 100vh;
       padding-top: 64px;
       /* navbar height */
       display: flex;
       flex-direction: column;
}

/* ---- Container ---- */
.container {
       width: 100%;
       max-width: 1280px;
       margin: 0 auto;
       padding: 0 var(--space-8);
}

.container-sm {
       max-width: 640px;
}

.container-md {
       max-width: 860px;
}

.container-lg {
       max-width: 1100px;
}

/* ---- Grid ---- */
.grid {
       display: grid;
       gap: var(--space-6);
}

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

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

.grid-4 {
       grid-template-columns: repeat(4, 1fr);
}

.grid-auto {
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-auto-sm {
       grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ---- Flex utilities ---- */
.flex {
       display: flex;
}

.flex-col {
       display: flex;
       flex-direction: column;
}

.items-center {
       align-items: center;
}

.items-start {
       align-items: flex-start;
}

.justify-between {
       justify-content: space-between;
}

.justify-center {
       justify-content: center;
}

.gap-2 {
       gap: var(--space-2);
}

.gap-4 {
       gap: var(--space-4);
}

.gap-6 {
       gap: var(--space-6);
}

.gap-8 {
       gap: var(--space-8);
}

.flex-wrap {
       flex-wrap: wrap;
}

.flex-1 {
       flex: 1;
}

/* ---- Section ---- */
.section {
       padding: var(--space-20) 0;
}

.section-sm {
       padding: var(--space-12) 0;
}

.section-header {
       text-align: center;
       margin-bottom: var(--space-12);
}

.section-header h2 {
       margin-bottom: var(--space-4);
}

.section-header p {
       max-width: 600px;
       margin: 0 auto;
       color: var(--color-text-secondary);
}

/* ---- Hero ---- */
.hero {
       min-height: calc(100vh - 64px);
       display: flex;
       align-items: center;
       background: radial-gradient(ellipse 80% 60% at 50% -5%, rgba(79, 126, 255, 0.15) 0%, transparent 60%),
              var(--color-bg-base);
       padding: var(--space-20) 0;
       position: relative;
       overflow: hidden;
}

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

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

.hero-eyebrow {
       display: inline-flex;
       align-items: center;
       gap: var(--space-2);
       background: var(--color-primary-subtle);
       border: 1px solid rgba(79, 126, 255, 0.25);
       border-radius: var(--radius-full);
       padding: var(--space-2) var(--space-4);
       font-size: var(--font-size-xs);
       font-weight: 600;
       color: var(--color-primary-light);
       text-transform: uppercase;
       letter-spacing: 0.1em;
       margin-bottom: var(--space-6);
}

.hero h1 {
       font-size: var(--font-size-5xl);
       line-height: 1.1;
       margin-bottom: var(--space-6);
}

.hero p {
       font-size: var(--font-size-xl);
       color: var(--color-text-secondary);
       margin-bottom: var(--space-8);
       line-height: 1.7;
}

.hero-actions {
       display: flex;
       gap: var(--space-4);
       flex-wrap: wrap;
}

.hero-stats {
       display: flex;
       gap: var(--space-8);
       margin-top: var(--space-12);
       padding-top: var(--space-8);
       border-top: 1px solid var(--color-border);
}

.hero-stat-value {
       font-size: var(--font-size-3xl);
       font-weight: 800;
       color: var(--color-text-primary);
}

.hero-stat-label {
       font-size: var(--font-size-sm);
       color: var(--color-text-muted);
}

/* ---- Auth layout ---- */
.auth-page {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(79, 126, 255, 0.1) 0%, transparent 50%),
              var(--color-bg-base);
       padding: var(--space-8);
}

.auth-card {
       width: 100%;
       max-width: 440px;
       background: var(--color-bg-card);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-xl);
       padding: var(--space-10);
       box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.auth-logo {
       text-align: center;
       margin-bottom: var(--space-8);
}

.auth-divider {
       display: flex;
       align-items: center;
       gap: var(--space-4);
       margin: var(--space-6) 0;
       color: var(--color-text-muted);
       font-size: var(--font-size-xs);
}

.auth-divider::before,
.auth-divider::after {
       content: '';
       flex: 1;
       height: 1px;
       background: var(--color-border);
}

/* ---- Shop layout ---- */
.shop-layout {
       display: grid;
       grid-template-columns: 260px 1fr;
       gap: var(--space-8);
       padding: var(--space-8) 0;
}

.shop-sidebar {
       position: sticky;
       top: 80px;
       height: fit-content;
}

.shop-filter-section {
       margin-bottom: var(--space-6);
}

.shop-filter-title {
       font-size: var(--font-size-xs);
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--color-text-muted);
       margin-bottom: var(--space-3);
}

.shop-toolbar {
       display: flex;
       align-items: center;
       gap: var(--space-4);
       margin-bottom: var(--space-6);
}

.search-input-wrap {
       position: relative;
       flex: 1;
}

.search-input-wrap svg {
       position: absolute;
       left: 14px;
       top: 50%;
       transform: translateY(-50%);
       color: var(--color-text-muted);
       pointer-events: none;
}

.search-input {
       padding-left: 44px !important;
}

/* ---- Dashboard layout ---- */
.dashboard-layout {
       display: grid;
       grid-template-columns: 220px 1fr;
       gap: var(--space-8);
       padding: var(--space-8) 0;
}

.sidebar-nav {
       display: flex;
       flex-direction: column;
       gap: var(--space-1);
}

.sidebar-nav a {
       display: flex;
       align-items: center;
       gap: var(--space-3);
       padding: var(--space-3) var(--space-4);
       border-radius: var(--radius-md);
       color: var(--color-text-secondary);
       font-size: var(--font-size-sm);
       font-weight: 500;
       transition: all var(--transition-fast);
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
       background: var(--color-primary-subtle);
       color: var(--color-primary-light);
}

/* ---- Admin layout ---- */
.admin-layout {
       display: grid;
       grid-template-columns: 240px 1fr;
       min-height: calc(100vh - 64px);
}

.admin-sidebar {
       background: var(--color-bg-surface);
       border-right: 1px solid var(--color-border);
       padding: var(--space-6);
       position: sticky;
       top: 64px;
       height: calc(100vh - 64px);
       overflow-y: auto;
}

.admin-content {
       padding: var(--space-8);
}

/* --- Responsive ---- */
@media (max-width: 1024px) {
       .shop-layout {
              grid-template-columns: 1fr;
       }

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

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

       .admin-sidebar {
              display: none;
       }

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

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

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

@media (max-width: 768px) {
       .container {
              padding: 0 var(--space-4);
       }

       .hero h1 {
              font-size: var(--font-size-3xl);
       }

       .grid-2,
       .grid-3,
       .grid-4 {
              grid-template-columns: 1fr;
       }

       .hero-stats {
              flex-wrap: wrap;
              gap: var(--space-6);
       }

       .navbar-nav {
              display: none;
       }

       .hero-actions {
              flex-direction: column;
       }
}