/* =============================================================================
   Thimze Account Studio — Frontend Stylesheet
   Premium WooCommerce My Account Dashboard
   ============================================================================= */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
  /* Brand (overridden inline by PHP) */
  --tas-accent:          #6C63FF;
  --tas-accent-light:    color-mix(in srgb, var(--tas-accent) 15%, transparent);
  --tas-accent-dark:     color-mix(in srgb, var(--tas-accent) 80%, #000);

  /* Surfaces */
  --tas-bg:              #F5F5F7;
  --tas-surface:         #FFFFFF;
  --tas-surface-2:       #F8F8FA;
  --tas-surface-3:       #F0F0F3;
  --tas-border:          rgba(0,0,0,.08);
  --tas-border-strong:   rgba(0,0,0,.14);

  /* Text */
  --tas-text:            #0D0D0E;
  --tas-text-2:          #555560;
  --tas-text-3:          #8888A0;
  --tas-text-inv:        #FFFFFF;

  /* Sidebar */
  --tas-sidebar-bg:      #FFFFFF;
  --tas-sidebar-w:       260px;
  --tas-sidebar-w-col:   72px;

  /* Status colours */
  --tas-green:           #10B981;
  --tas-yellow:          #F59E0B;
  --tas-red:             #EF4444;
  --tas-blue:            #3B82F6;
  --tas-purple:          #8B5CF6;

  /* Radius / shadow / spacing */
  --tas-r-sm:            8px;
  --tas-r-md:            14px;
  --tas-r-lg:            20px;
  --tas-r-xl:            28px;
  --tas-shadow-sm:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --tas-shadow-md:       0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --tas-shadow-lg:       0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --tas-shadow-focus:    0 0 0 3px var(--tas-accent-light);

  /* Font */
  --tas-font:            'DM Sans', system-ui, -apple-system, sans-serif;
  --tas-font-mono:       'DM Mono', ui-monospace, monospace;

  /* Animation */
  --tas-ease:            cubic-bezier(.25,.46,.45,.94);
  --tas-ease-spring:     cubic-bezier(.34,1.56,.64,1);
  --tas-dur-fast:        120ms;
  --tas-dur-base:        220ms;
  --tas-dur-slow:        380ms;
}

/* ── Dark Mode ─────────────────────────────────────────────────────────────── */
.tas-dark-mode {
  --tas-bg:            #0C0C10;
  --tas-surface:       #16161D;
  --tas-surface-2:     #1C1C26;
  --tas-surface-3:     #22222F;
  --tas-border:        rgba(255,255,255,.07);
  --tas-border-strong: rgba(255,255,255,.12);
  --tas-text:          #F0F0F5;
  --tas-text-2:        #A0A0B8;
  --tas-text-3:        #606075;
  --tas-sidebar-bg:    #16161D;
  --tas-shadow-sm:     0 1px 3px rgba(0,0,0,.3);
  --tas-shadow-md:     0 4px 16px rgba(0,0,0,.4);
  --tas-shadow-lg:     0 12px 40px rgba(0,0,0,.5);
}

/* ── Glassmorphism Layer ───────────────────────────────────────────────────── */
.tas-glassmorphism .tas-card,
.tas-glassmorphism .tas-sidebar {
  background:        rgba(255,255,255,.55) !important;
  backdrop-filter:   blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border:            1px solid rgba(255,255,255,.4) !important;
}

.tas-dark-mode.tas-glassmorphism .tas-card,
.tas-dark-mode.tas-glassmorphism .tas-sidebar {
  background:  rgba(22,22,29,.7) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
.tas-account-page * {
  box-sizing: border-box;
}

.tas-account-page {
  font-family:   var(--tas-font);
  background:    var(--tas-bg);
  color:         var(--tas-text);
  min-height:    100vh;
}

/* ── Layout ────────────────────────────────────────────────────────────────── */
.tas-layout {
  display:     grid;
  grid-template-columns: var(--tas-sidebar-w) 1fr;
  grid-template-rows: 1fr;
  min-height:  100vh;
  max-width:   100vw;
  overflow-x:  hidden;
  transition:  grid-template-columns var(--tas-dur-base) var(--tas-ease);
}

.tas-layout.sidebar-collapsed {
  grid-template-columns: var(--tas-sidebar-w-col) 1fr;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.tas-sidebar {
  position:       sticky;
  top:            0;
  height:         100vh;
  background:     var(--tas-sidebar-bg);
  border-right:   1px solid var(--tas-border);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  transition:     width var(--tas-dur-base) var(--tas-ease);
  z-index:        100;
}

.tas-sidebar-header {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         22px 20px 18px;
  border-bottom:   1px solid var(--tas-border);
  overflow:        hidden;
}

.tas-sidebar-logo {
  width:           36px;
  height:          36px;
  border-radius:   10px;
  background:      var(--tas-accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           white;
  flex-shrink:     0;
  font-size:       16px;
  font-weight:     700;
}

.tas-sidebar-title {
  font-size:       15px;
  font-weight:     600;
  color:           var(--tas-text);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  transition:      opacity var(--tas-dur-fast), width var(--tas-dur-base);
}

.sidebar-collapsed .tas-sidebar-title {
  opacity: 0;
  width:   0;
}

/* Sidebar toggle */
.tas-sidebar-toggle {
  margin-left:     auto;
  width:           32px;
  height:          32px;
  border:          1px solid var(--tas-border-strong);
  background:      var(--tas-accent);
  border-radius:   var(--tas-r-sm);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           white;
  flex-shrink:     0;
  transition:      background var(--tas-dur-fast), color var(--tas-dur-fast), transform var(--tas-dur-base);
}

.tas-sidebar-toggle:hover {
  background: var(--tas-accent-dark);
  color:      white;
}

.sidebar-collapsed .tas-sidebar-toggle {
  transform: rotate(180deg);
}

/* Profile area */
.tas-sidebar-profile {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 16px;
  margin:          10px 10px 4px;
  border-radius:   var(--tas-r-md);
  background:      var(--tas-surface-2);
  cursor:          pointer;
  transition:      background var(--tas-dur-fast);
  overflow:        hidden;
}

.tas-sidebar-profile:hover {
  background: var(--tas-surface-3);
}

.tas-avatar {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  object-fit:      cover;
  flex-shrink:     0;
  border:          2px solid var(--tas-accent-light);
}

.tas-avatar-placeholder {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--tas-accent-light);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       16px;
  font-weight:     600;
  color:           var(--tas-accent);
  flex-shrink:     0;
}

.tas-profile-info {
  overflow: hidden;
  transition: opacity var(--tas-dur-fast), width var(--tas-dur-base);
}

.sidebar-collapsed .tas-profile-info {
  opacity: 0;
  width:   0;
}

.tas-profile-name {
  font-size:     14px;
  font-weight:   600;
  color:         var(--tas-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.tas-profile-email {
  font-size:     11px;
  color:         var(--tas-text-3);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Navigation */
.tas-nav {
  flex:         1;
  overflow-y:   auto;
  padding:      8px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--tas-border) transparent;
}

.tas-nav-section {
  margin-bottom: 6px;
}

.tas-nav-label {
  font-size:     10px;
  font-weight:   600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:         var(--tas-text-3);
  padding:       10px 10px 4px;
  white-space:   nowrap;
  overflow:      hidden;
  transition:    opacity var(--tas-dur-fast);
}

.sidebar-collapsed .tas-nav-label {
  opacity: 0;
}

.tas-nav-item {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 12px;
  border-radius:   var(--tas-r-md);
  text-decoration: none;
  color:           var(--tas-text-2);
  font-size:       14px;
  font-weight:     500;
  cursor:          pointer;
  border:          none;
  background:      none;
  width:           100%;
  text-align:      left;
  transition:      background var(--tas-dur-fast), color var(--tas-dur-fast), transform var(--tas-dur-fast);
  position:        relative;
  overflow:        hidden;
  white-space:     nowrap;
}

.tas-nav-item:hover {
  background: var(--tas-surface-2);
  color:      var(--tas-text);
}

.tas-nav-item.active {
  background: var(--tas-accent-light);
  color:      var(--tas-accent);
  font-weight: 600;
}

.tas-nav-item .nav-icon {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  justify-content: center;
}

.tas-nav-item .nav-icon svg {
  width:  18px;
  height: 18px;
}

.tas-nav-item .nav-label {
  flex:          1;
  transition:    opacity var(--tas-dur-fast), width var(--tas-dur-base);
  overflow:      hidden;
}

.sidebar-collapsed .tas-nav-item .nav-label {
  opacity: 0;
  width:   0;
}

.tas-nav-badge {
  background:    var(--tas-accent);
  color:         white;
  font-size:     10px;
  font-weight:   700;
  padding:       2px 7px;
  border-radius: 99px;
  line-height:   1.4;
  transition:    opacity var(--tas-dur-fast);
}

.sidebar-collapsed .tas-nav-badge {
  opacity: 0;
}

/* Sidebar footer */
.tas-sidebar-footer {
  padding:       10px;
  border-top:    1px solid var(--tas-border);
}

/* ── Main Content Area ─────────────────────────────────────────────────────── */
.tas-main {
  min-width:    0;
  display:      flex;
  flex-direction: column;
}

/* Top header bar */
.tas-topbar {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         16px 28px;
  background:      var(--tas-surface);
  border-bottom:   1px solid var(--tas-border);
  position:        sticky;
  top:             0;
  z-index:         50;
  backdrop-filter: blur(12px);
}

.tas-topbar-title {
  font-size:   20px;
  font-weight: 700;
  color:       var(--tas-text);
  flex:        1;
}

.tas-topbar-actions {
  display:  flex;
  gap:      8px;
  align-items: center;
}

.tas-icon-btn {
  width:           38px;
  height:          38px;
  border:          1px solid var(--tas-border);
  background:      var(--tas-surface);
  border-radius:   var(--tas-r-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  color:           var(--tas-text-2);
  transition:      background var(--tas-dur-fast), color var(--tas-dur-fast), border-color var(--tas-dur-fast);
  position:        relative;
  text-decoration: none;
}

.tas-icon-btn:hover {
  background:    var(--tas-surface-2);
  color:         var(--tas-accent);
  border-color:  var(--tas-accent);
}

.tas-icon-btn .badge-dot {
  position:      absolute;
  top:           6px;
  right:         6px;
  width:         8px;
  height:        8px;
  background:    var(--tas-red);
  border-radius: 50%;
  border:        2px solid var(--tas-surface);
}

/* Page content */
.tas-content {
  padding: 28px;
  flex:    1;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.tas-card {
  background:    var(--tas-surface);
  border:        1px solid var(--tas-border);
  border-radius: var(--tas-r-lg);
  box-shadow:    var(--tas-shadow-sm);
  min-width:     0;
  transition:    box-shadow var(--tas-dur-fast), border-color var(--tas-dur-fast);
}

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

.tas-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px 0;
}

.tas-card-title {
  font-size:   15px;
  font-weight: 600;
  color:       var(--tas-text);
}

.tas-card-body {
  padding: 20px 24px 24px;
}

/* ── Stat Cards ────────────────────────────────────────────────────────────── */
.tas-stats-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   16px;
  margin-bottom:         24px;
}

.tas-stat-card {
  background:    var(--tas-surface);
  border:        1px solid var(--tas-border);
  border-radius: var(--tas-r-lg);
  padding:       20px 22px;
  display:       flex;
  flex-direction: column;
  gap:           6px;
  box-shadow:    var(--tas-shadow-sm);
  transition:    transform var(--tas-dur-fast), box-shadow var(--tas-dur-fast);
  position:      relative;
  overflow:      hidden;
  container-type: inline-size;
  container-name: tas-stat;
}

.tas-stat-card::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          0;
  right:         0;
  height:        3px;
  background:    var(--tas-stat-color, var(--tas-accent));
  border-radius: var(--tas-r-lg) var(--tas-r-lg) 0 0;
}

.tas-stat-card:hover {
  transform:  translateY(-2px);
  box-shadow: var(--tas-shadow-md);
}

.tas-stat-icon {
  width:           40px;
  height:          40px;
  border-radius:   var(--tas-r-sm);
  background:      color-mix(in srgb, var(--tas-stat-color, var(--tas-accent)) 12%, transparent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--tas-stat-color, var(--tas-accent));
  margin-bottom:   4px;
}

.tas-stat-value {
  font-size:   clamp(17px, 11cqw, 28px);
  font-weight: 700;
  color:       var(--tas-text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  word-break:  break-word;
}


.tas-stat-label {
  font-size:  13px;
  color:      var(--tas-text-3);
  font-weight: 500;
}

.tas-stat-change {
  font-size:   12px;
  font-weight: 600;
  display:     flex;
  align-items: center;
  gap:         3px;
}

.tas-stat-change.up   { color: var(--tas-green); }
.tas-stat-change.down { color: var(--tas-red);   }

/* ── Welcome Banner ────────────────────────────────────────────────────────── */
.tas-welcome {
  background:    linear-gradient(135deg, var(--tas-accent) 0%, color-mix(in srgb, var(--tas-accent) 70%, #8B5CF6) 100%);
  border-radius: var(--tas-r-xl);
  padding:       32px 36px;
  color:         white;
  display:       flex;
  align-items:   center;
  gap:           24px;
  margin-bottom: 24px;
  position:      relative;
  overflow:      hidden;
}

.tas-welcome::after {
  content:       '';
  position:      absolute;
  top:           -60px;
  right:         -60px;
  width:         220px;
  height:        220px;
  border-radius: 50%;
  background:    rgba(255,255,255,.08);
}

.tas-welcome::before {
  content:       '';
  position:      absolute;
  bottom:        -80px;
  right:         80px;
  width:         160px;
  height:        160px;
  border-radius: 50%;
  background:    rgba(255,255,255,.05);
}

.tas-welcome-avatar {
  width:         72px;
  height:        72px;
  border-radius: 50%;
  border:        3px solid rgba(255,255,255,.4);
  object-fit:    cover;
  flex-shrink:   0;
  position:      relative;
  z-index:       1;
}

.tas-welcome-text {
  flex:     1;
  position: relative;
  z-index:  1;
}

.tas-welcome-greeting {
  font-size:    26px;
  font-weight:  700;
  line-height:  1.2;
}

.tas-welcome-sub {
  font-size:  14px;
  opacity:    0.8;
  margin-top: 4px;
}

/* ── Quick Actions ─────────────────────────────────────────────────────────── */
.tas-quick-actions {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:                   12px;
  margin-bottom:         24px;
}

.tas-quick-action {
  background:      var(--tas-surface);
  border:          1px solid var(--tas-border);
  border-radius:   var(--tas-r-md);
  padding:         18px 14px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             10px;
  text-decoration: none;
  color:           var(--tas-text-2);
  font-size:       13px;
  font-weight:     500;
  cursor:          pointer;
  transition:      all var(--tas-dur-fast);
  text-align:      center;
}

.tas-quick-action:hover {
  background:    var(--tas-accent-light);
  color:         var(--tas-accent);
  border-color:  var(--tas-accent);
  transform:     translateY(-2px);
  box-shadow:    var(--tas-shadow-md);
}

.tas-quick-action-icon {
  width:           44px;
  height:          44px;
  background:      var(--tas-surface-2);
  border-radius:   var(--tas-r-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--tas-dur-fast);
}

.tas-quick-action:hover .tas-quick-action-icon {
  background: color-mix(in srgb, var(--tas-accent) 20%, transparent);
}

/* ── Back Link ─────────────────────────────────────────────────────────────── */
.tas-back-link {
  display:         inline-flex;
  align-items:     center;
  gap:              6px;
  font-size:       13px;
  font-weight:     600;
  color:           var(--tas-text-2);
  text-decoration: none;
  transition:      color var(--tas-dur-fast);
}

.tas-back-link:hover {
  color: var(--tas-accent);
}

/* ── Section Label ─────────────────────────────────────────────────────────── */
.tas-section-label {
  font-size:      12px;
  font-weight:    600;
  color:          var(--tas-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom:  10px;
}

/* ── View Order — line item meta (artwork, package contents, etc.) ──────────── */
.tas-line-item-meta {
  font-size:   12px;
  color:       var(--tas-text-3);
  line-height: 1.6;
  margin-top:  2px;
}

.tas-line-item-meta strong {
  color:       var(--tas-text-2);
  font-weight: 600;
}

/* ── View Order — totals block ────────────────────────────────────────────── */
.tas-order-totals {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  max-width:      340px;
  margin-left:    auto;
}

.tas-order-totals-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  font-size:       13px;
  color:           var(--tas-text-2);
}

.tas-order-totals-row span:last-child {
  color:       var(--tas-text);
  font-weight: 600;
}

.tas-order-totals-row.tas-order-totals-total {
  border-top:  1px solid var(--tas-border);
  padding-top: 12px;
  margin-top:  2px;
  font-size:   15px;
}

.tas-order-totals-row.tas-order-totals-total span {
  color:       var(--tas-text) !important;
  font-weight: 700 !important;
}

/* ── View Order — address card ────────────────────────────────────────────── */
.tas-address-row {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   13px;
  color:       var(--tas-text-2);
  padding:     8px 0;
}

.tas-address-row:not(:last-child) {
  border-bottom: 1px solid var(--tas-border);
}

.tas-address-row i {
  width:       15px;
  height:      15px;
  flex-shrink: 0;
  margin-top:  1px;
  color:       var(--tas-text-3);
}

/* ── Payment Methods page ─────────────────────────────────────────────────── */
.tas-payment-method-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.tas-payment-method-card {
  display:      flex;
  align-items:  center;
  gap:          14px;
  padding:      16px 20px;
}

.tas-payment-method-icon {
  width:           44px;
  height:          44px;
  border-radius:   var(--tas-r-sm);
  background:      var(--tas-surface-2);
  color:           var(--tas-text-2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.tas-payment-method-info {
  flex: 1;
  min-width: 0;
}

.tas-payment-method-name {
  display:      flex;
  align-items:  center;
  gap:          8px;
  font-size:    14px;
  font-weight:  600;
  color:        var(--tas-text);
}

.tas-payment-method-actions {
  display:     flex;
  gap:         6px;
  flex-shrink: 0;
}

/* ── Order Cards ───────────────────────────────────────────────────────────── */
.tas-order-list {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.tas-order-card {
  background:    var(--tas-surface);
  border:        1px solid var(--tas-border);
  border-radius: var(--tas-r-lg);
  overflow:      hidden;
  transition:    box-shadow var(--tas-dur-fast), border-color var(--tas-dur-fast);
}

.tas-order-card:hover {
  box-shadow:   var(--tas-shadow-md);
  border-color: var(--tas-border-strong);
}

.tas-order-summary {
  display:         flex;
  align-items:     center;
  gap:             16px;
  padding:         16px 20px;
  cursor:          pointer;
}

.tas-order-number {
  font-size:   14px;
  font-weight: 700;
  color:       var(--tas-text);
}

.tas-order-meta {
  font-size: 12px;
  color:     var(--tas-text-3);
  margin-top: 2px;
}

.tas-order-right {
  margin-left: auto;
  text-align:  right;
}

.tas-order-total {
  font-size:   15px;
  font-weight: 700;
  color:       var(--tas-text);
}

/* Order status badges */
.tas-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 10px;
  border-radius: 99px;
  font-size:     11px;
  font-weight:   600;
  line-height:   1.4;
}

.tas-badge-processing  { background: rgba(59,130,246,.12);  color: #3B82F6; }
.tas-badge-completed   { background: rgba(16,185,129,.12);  color: #10B981; }
.tas-badge-pending     { background: rgba(245,158,11,.12);  color: #F59E0B; }
.tas-badge-cancelled   { background: rgba(239,68,68,.12);   color: #EF4444; }
.tas-badge-refunded    { background: rgba(139,92,246,.12);  color: #8B5CF6; }
.tas-badge-on-hold     { background: rgba(136,136,160,.12); color: #888;    }
.tas-badge-failed      { background: rgba(239,68,68,.12);   color: #EF4444; }

/* Expandable order details */
.tas-order-details {
  display:       none;
  padding:       0 20px 20px;
  border-top:    1px solid var(--tas-border);
  animation:     tasSlideDown var(--tas-dur-base) var(--tas-ease);
}

.tas-order-details.open {
  display: block;
}

/* Order timeline */
.tas-timeline {
  display:        flex;
  flex-direction: column;
  gap:            0;
  padding:        16px 0 0;
}

.tas-timeline-item {
  display:     flex;
  gap:         14px;
  padding:     0 0 20px;
  position:    relative;
}

.tas-timeline-item:not(:last-child)::before {
  content:   '';
  position:  absolute;
  left:      11px;
  top:       22px;
  bottom:    0;
  width:     2px;
  background: var(--tas-border);
}

.tas-timeline-dot {
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--tas-surface-2);
  border:          2px solid var(--tas-border);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.tas-timeline-dot.done {
  background:   var(--tas-green);
  border-color: var(--tas-green);
  color:        white;
}

.tas-timeline-dot.active {
  background:   var(--tas-accent);
  border-color: var(--tas-accent);
  color:        white;
  box-shadow:   0 0 0 4px var(--tas-accent-light);
}

.tas-timeline-content {
  flex: 1;
  padding-top: 2px;
}

.tas-timeline-label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--tas-text);
}

.tas-timeline-date {
  font-size:  12px;
  color:      var(--tas-text-3);
  margin-top: 2px;
}

/* ── Wishlist Grid ─────────────────────────────────────────────────────────── */
.tas-product-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   16px;
}

.tas-product-card {
  background:    var(--tas-surface);
  border:        1px solid var(--tas-border);
  border-radius: var(--tas-r-lg);
  overflow:      hidden;
  transition:    transform var(--tas-dur-fast), box-shadow var(--tas-dur-fast);
}

.tas-product-card:hover {
  transform:  translateY(-3px);
  box-shadow: var(--tas-shadow-lg);
}

.tas-product-img {
  width:      100%;
  aspect-ratio: 1;
  object-fit: cover;
  display:    block;
}

.tas-product-body {
  padding: 14px;
}

.tas-product-name {
  font-size:     13px;
  font-weight:   600;
  color:         var(--tas-text);
  margin-bottom: 4px;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:      hidden;
}

.tas-product-price {
  font-size:   14px;
  font-weight: 700;
  color:       var(--tas-accent);
}

.tas-product-actions {
  display: flex;
  gap:     8px;
  padding: 0 14px 14px;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.tas-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         9px 18px;
  border-radius:   var(--tas-r-md);
  font-family:     var(--tas-font);
  font-size:       13px;
  font-weight:     600;
  cursor:          pointer;
  border:          none;
  text-decoration: none;
  transition:      all var(--tas-dur-fast);
  line-height:     1;
}

.tas-btn-primary {
  background: var(--tas-accent);
  color:      white;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tas-accent) 35%, transparent);
}

.tas-btn-primary:hover {
  background:  color-mix(in srgb, var(--tas-accent) 90%, black);
  transform:   translateY(-1px);
  box-shadow:  0 4px 14px color-mix(in srgb, var(--tas-accent) 45%, transparent);
}

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

.tas-btn-secondary:hover {
  background: var(--tas-surface-3);
  color:      var(--tas-text);
}

.tas-btn-ghost {
  background: transparent;
  color:      var(--tas-text-2);
}

.tas-btn-ghost:hover {
  background: var(--tas-surface-2);
  color:      var(--tas-text);
}

.tas-btn-danger {
  background: rgba(239,68,68,.1);
  color:      var(--tas-red);
  border:     1px solid rgba(239,68,68,.2);
}

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

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

.tas-btn-block {
  width: 100%;
}

.tas-btn[disabled],
.tas-btn.loading {
  opacity:       0.6;
  cursor:        not-allowed;
  pointer-events: none;
}

/* ── Wishlist button on product pages ─────────────────────────────────────── */
/* Standard button (single product page — below add to cart) */
.tas-wishlist-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         10px 18px;
  border:          1px solid var(--tas-border);
  background:      var(--tas-surface);
  border-radius:   var(--tas-r-md);
  font-family:     var(--tas-font);
  font-size:       13px;
  font-weight:     600;
  color:           var(--tas-text-2);
  cursor:          pointer;
  transition:      all var(--tas-dur-fast);
  margin-top:      8px;
}

.tas-wishlist-btn:hover,
.tas-wishlist-btn.active {
  background:   rgba(236,72,153,.08);
  border-color: #EC4899;
  color:        #EC4899;
}

.tas-wishlist-btn.active svg {
  fill: currentColor;
}

/* Heart overlay on product images (shop loop) */
.tas-product-img-wrap {
  position: relative;
  overflow: hidden;
  display:  block;
}

.tas-heart-btn {
  position:        absolute;
  top:             10px;
  right:           10px;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 2px 8px rgba(0,0,0,.12);
  transition:      all .2s ease;
  z-index:         2;
  padding:         0;
}

.tas-heart-btn:hover {
  background:  #fff;
  transform:   scale(1.12);
  box-shadow:  0 4px 14px rgba(236,72,153,.3);
}

.tas-heart-btn svg {
  width:      18px;
  height:     18px;
  stroke:     #27c2ec;
  fill:       none;
  transition: all .2s ease;
  stroke-width: 2;
}

.tas-heart-btn.active svg,
.tas-heart-btn:hover svg {
  stroke: #27c2ec;
}

.tas-heart-btn.active svg {
  fill: #27c2ec;
}

/* Pulse animation when toggled */
@keyframes tas-heart-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.tas-heart-btn.pulse svg {
  animation: tas-heart-pulse .4s ease forwards;
}

/* ── Rewards & Points ─────────────────────────────────────────────────────── */
.tas-tier-card {
  background:    linear-gradient(135deg, var(--tas-tier-start, #F59E0B) 0%, var(--tas-tier-end, #EF4444) 100%);
  border-radius: var(--tas-r-xl);
  padding:       28px;
  color:         white;
  position:      relative;
  overflow:      hidden;
}

.tas-tier-name {
  font-size:   26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.tas-tier-points {
  font-size:   14px;
  opacity:     0.85;
  margin-top:  6px;
}

.tas-progress-bar-wrap {
  background:    var(--tas-surface-3);
  border-radius: 99px;
  height:        8px;
  overflow:      hidden;
  margin:        12px 0 6px;
}

.tas-progress-bar {
  height:        100%;
  border-radius: 99px;
  background:    var(--tas-accent);
  transition:    width 600ms var(--tas-ease-spring);
}

.tas-progress-labels {
  display:         flex;
  justify-content: space-between;
  font-size:       11px;
  color:           var(--tas-text-3);
}

/* Register: two-step indicator */
.tas-reg-steps { margin-bottom: 22px; }
.tas-reg-step-label { font-weight: 500; transition: color 200ms; }
.tas-reg-step-label.is-active { color: var(--tas-accent, #6C63FF); font-weight: 700; }

.tas-reg-restore-banner {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           10px;
  background:    #EEF2FF;
  color:         #3730A3;
  border:        1px solid #C7D2FE;
  border-radius: 10px;
  padding:       10px 14px;
  font-size:     13px;
  margin-bottom: 16px;
}
.tas-reg-restore-banner button {
  background: none;
  border: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
}

.tas-f-hint {
  font-size:   12px;
  color:       var(--tas-text-3, #6b7280);
  margin-top:  6px;
}

/* Points history table */
.tas-table {
  width:           100%;
  min-width:       0;
  border-collapse: separate;
  border-spacing:  0;
}

.tas-table-wrapper {
  width: 100%;
  min-width: 0;
}

.tas-table th {
  font-size:     12px;
  font-weight:   600;
  color:         var(--tas-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:       10px 14px;
  text-align:    left;
  border-bottom: 1px solid var(--tas-border);
}

.tas-table td {
  padding:       13px 14px;
  font-size:     14px;
  color:         var(--tas-text);
  border-bottom: 1px solid var(--tas-border);
  vertical-align: middle;
}

.tas-table tbody tr:last-child td {
  border-bottom: none;
}

.tas-table tbody tr {
  transition: background var(--tas-dur-fast);
}

.tas-table tbody tr:hover td {
  background: var(--tas-surface-2);
}

/* ── Wallet ─────────────────────────────────────────────────────────────────── */
.tas-wallet-balance-card {
  background:    linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: var(--tas-r-xl);
  padding:       32px 36px;
  color:         white;
  position:      relative;
  overflow:      hidden;
  margin-bottom: 24px;
}

.tas-wallet-balance-card::after {
  content:    '';
  position:   absolute;
  top:        -40px;
  right:      -40px;
  width:      180px;
  height:     180px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
}

.tas-wallet-amount {
  font-size:     42px;
  font-weight:   800;
  letter-spacing: -0.03em;
  font-family:   var(--tas-font-mono);
}

.tas-wallet-label {
  font-size:  13px;
  opacity:    0.7;
  margin-top: 4px;
}

/* ── Support Tickets ──────────────────────────────────────────────────────── */
.tas-ticket-card {
  background:    var(--tas-surface);
  border:        1px solid var(--tas-border);
  border-radius: var(--tas-r-lg);
  padding:       18px 20px;
  cursor:        pointer;
  transition:    box-shadow var(--tas-dur-fast), border-color var(--tas-dur-fast);
}

.tas-ticket-card:hover {
  box-shadow:   var(--tas-shadow-md);
  border-color: var(--tas-border-strong);
}

.tas-ticket-subject {
  font-size:   15px;
  font-weight: 600;
  color:       var(--tas-text);
}

.tas-ticket-meta {
  display:    flex;
  align-items: center;
  gap:         12px;
  margin-top:  8px;
  font-size:   12px;
  color:       var(--tas-text-3);
}

/* Chat bubbles */
.tas-chat-messages {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  padding:        20px;
  max-height:     420px;
  overflow-y:     auto;
}

.tas-message {
  display:     flex;
  gap:         10px;
  max-width:   75%;
}

.tas-message.from-staff {
  align-self: flex-start;
}

.tas-message.from-customer {
  align-self:  flex-end;
  flex-direction: row-reverse;
}

.tas-message-bubble {
  background:    var(--tas-surface-2);
  border-radius: var(--tas-r-md);
  padding:       12px 16px;
  font-size:     14px;
  line-height:   1.5;
  color:         var(--tas-text);
}

.tas-message.from-customer .tas-message-bubble {
  background: var(--tas-accent);
  color:      white;
}

/* ── Notification Feed ────────────────────────────────────────────────────── */
.tas-notification-item {
  display:         flex;
  gap:             14px;
  padding:         14px 18px;
  border-bottom:   1px solid var(--tas-border);
  cursor:          pointer;
  transition:      background var(--tas-dur-fast);
}

.tas-notification-item:hover {
  background: var(--tas-surface-2);
}

.tas-notification-item.unread {
  background: color-mix(in srgb, var(--tas-accent) 5%, var(--tas-surface));
}

.tas-notification-item.unread::before {
  content:       '';
  width:         6px;
  height:        6px;
  background:    var(--tas-accent);
  border-radius: 50%;
  margin-top:    5px;
  flex-shrink:   0;
}

.tas-notification-icon {
  width:           38px;
  height:          38px;
  border-radius:   var(--tas-r-sm);
  background:      var(--tas-surface-2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       18px;
}

.tas-notification-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--tas-text);
}

.tas-notification-body {
  font-size:  12px;
  color:      var(--tas-text-2);
  margin-top: 2px;
  line-height: 1.4;
}

.tas-notification-time {
  font-size:  11px;
  color:      var(--tas-text-3);
  margin-top: 4px;
}

/* ── Badges / Achievements ────────────────────────────────────────────────── */
.tas-badges-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:                   14px;
}

.tas-badge-card {
  background:    var(--tas-surface);
  border:        1px solid var(--tas-border);
  border-radius: var(--tas-r-lg);
  padding:       20px 14px;
  text-align:    center;
  transition:    transform var(--tas-dur-fast), box-shadow var(--tas-dur-fast);
}

.tas-badge-card.earned {
  border-color: var(--tas-badge-color, var(--tas-accent));
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--tas-badge-color, var(--tas-accent)) 20%, transparent);
}

.tas-badge-card:not(.earned) {
  opacity:  0.5;
  filter:   grayscale(1);
}

.tas-badge-icon {
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      color-mix(in srgb, var(--tas-badge-color, var(--tas-accent)) 12%, transparent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 12px;
  color:           var(--tas-badge-color, var(--tas-accent));
  font-size:       22px;
}

.tas-badge-label {
  font-size:   12px;
  font-weight: 600;
  color:       var(--tas-text);
}

/* ── Toast Notifications ──────────────────────────────────────────────────── */
#tas-toasts {
  position: fixed;
  bottom:   24px;
  right:    24px;
  z-index:  9999;
  display:  flex;
  flex-direction: column-reverse;
  gap:      10px;
  pointer-events: none;
}

.tas-toast {
  display:         flex;
  align-items:     center;
  gap:             12px;
  background:      var(--tas-surface);
  border:          1px solid var(--tas-border);
  border-radius:   var(--tas-r-md);
  padding:         12px 18px;
  box-shadow:      var(--tas-shadow-lg);
  min-width:       280px;
  max-width:       380px;
  pointer-events:  all;
  animation:       tasToastIn var(--tas-dur-slow) var(--tas-ease-spring) forwards;
}

.tas-toast.removing {
  animation: tasToastOut var(--tas-dur-base) var(--tas-ease) forwards;
}

.tas-toast-icon {
  width:           32px;
  height:          32px;
  border-radius:   var(--tas-r-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       16px;
}

.tas-toast-success .tas-toast-icon { background: rgba(16,185,129,.12); color: var(--tas-green); }
.tas-toast-error .tas-toast-icon   { background: rgba(239,68,68,.12);  color: var(--tas-red);   }
.tas-toast-info .tas-toast-icon    { background: rgba(59,130,246,.12); color: var(--tas-blue);  }

.tas-toast-text {
  flex:     1;
  font-size: 13px;
  font-weight: 500;
  color:    var(--tas-text);
}

.tas-toast-close {
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--tas-text-3);
  padding:    2px;
  transition: color var(--tas-dur-fast);
}

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

/* ── Empty States ─────────────────────────────────────────────────────────── */
.tas-empty-state {
  text-align: center;
  padding:    60px 20px;
}

.tas-empty-icon {
  width:           80px;
  height:          80px;
  background:      var(--tas-surface-2);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 20px;
  color:           var(--tas-text-3);
  font-size:       32px;
}

.tas-empty-title {
  font-size:   18px;
  font-weight: 700;
  color:       var(--tas-text);
  margin-bottom: 8px;
}

.tas-empty-desc {
  font-size: 14px;
  color:     var(--tas-text-3);
  max-width: 320px;
  margin:    0 auto 20px;
  line-height: 1.6;
}

/* ── Skeleton Loading ─────────────────────────────────────────────────────── */
.tas-skeleton {
  background:  linear-gradient(90deg, var(--tas-surface-2) 25%, var(--tas-surface-3) 50%, var(--tas-surface-2) 75%);
  background-size: 200% 100%;
  animation:   tasSkeleton 1.4s ease-in-out infinite;
  border-radius: var(--tas-r-sm);
}

/* ── Account Completeness ─────────────────────────────────────────────────── */
.tas-completeness {
  background:    linear-gradient(135deg, var(--tas-surface-2), var(--tas-surface));
  border:        1px solid var(--tas-border);
  border-radius: var(--tas-r-lg);
  padding:       22px;
}

.tas-completeness-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   12px;
}

.tas-completeness-percent {
  font-size:   24px;
  font-weight: 800;
  color:       var(--tas-accent);
}

.tas-completeness-steps {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     14px;
}

.tas-step {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   13px;
  color:       var(--tas-text-2);
}

.tas-step.done {
  color: var(--tas-text-3);
  text-decoration: line-through;
}

.tas-step-check {
  width:           20px;
  height:          20px;
  border-radius:   50%;
  border:          2px solid var(--tas-border);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.tas-step.done .tas-step-check {
  background:   var(--tas-green);
  border-color: var(--tas-green);
  color:        white;
}

/* ── Mobile sticky nav ────────────────────────────────────────────────────── */
.tas-mobile-nav {
  display: none;
}

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.tas-form-group {
  margin-bottom: 16px;
}

.tas-req {
  color: var(--tas-red);
}

.tas-form-hint {
  font-size:  12px;
  color:      var(--tas-text-3);
  margin:     6px 0 0;
  font-style: italic;
}

.tas-form-row-2col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

@media (max-width: 640px) {
  .tas-form-row-2col {
    grid-template-columns: 1fr;
  }
}

/* Account Details page */
.tas-account-details-page {
  max-width: 720px;
}

.tas-acc-danger-card {
  border-color: rgba(239, 68, 68, .25);
}

.tas-label {
  display:      block;
  font-size:    13px;
  font-weight:  600;
  color:        var(--tas-text-2);
  margin-bottom: 6px;
}

.tas-input,
.tas-select,
.tas-textarea {
  width:         100%;
  padding:       10px 14px;
  border:        1px solid var(--tas-border-strong);
  border-radius: var(--tas-r-md);
  background:    var(--tas-surface);
  color:         var(--tas-text);
  font-family:   var(--tas-font);
  font-size:     14px;
  transition:    border-color var(--tas-dur-fast), box-shadow var(--tas-dur-fast);
  outline:       none;
}

.tas-input:focus,
.tas-select:focus,
.tas-textarea:focus {
  border-color: var(--tas-accent);
  box-shadow:   var(--tas-shadow-focus);
}

.tas-select {
  appearance:         none;
  -webkit-appearance: none;
  -moz-appearance:    none;
  padding-right:      36px;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888890' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  cursor:              pointer;
}

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

/* ── Stat card tooltips ─────────────────────────────────────────────────────── */
.tas-has-tooltip {
  position: relative;
  cursor:   help;
}

.tas-has-tooltip::after {
  content:         attr(data-tooltip);
  position:        absolute;
  bottom:          calc(100% + 10px);
  left:            50%;
  transform:       translateX(-50%);
  background:      #111827;
  color:           #ffffff;
  font-size:       12px;
  line-height:     1.5;
  padding:         10px 14px;
  border-radius:   10px;
  width:           230px;
  text-align:      center;
  white-space:     normal;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity .18s ease;
  z-index:         999;
  box-shadow:      0 4px 14px rgba(0,0,0,.25);
}

/* arrow */
.tas-has-tooltip::before {
  content:        '';
  position:       absolute;
  bottom:         calc(100% + 4px);
  left:           50%;
  transform:      translateX(-50%);
  border:         6px solid transparent;
  border-top-color: #111827;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .18s ease;
  z-index:        999;
}

.tas-has-tooltip:hover::after,
.tas-has-tooltip:hover::before {
  opacity: 1;
}

.tas-stat-label {
  display:     flex;
  align-items: center;
}

/* ── Charts ─────────────────────────────────────────────────────────────────── */
.tas-chart-wrap {
  position:      relative;
  width:         100%;
  aspect-ratio:  16/6;
}

/* ── Page transitions ──────────────────────────────────────────────────────── */
.tas-content-inner {
  animation: tasFadeIn var(--tas-dur-base) var(--tas-ease);
}

/* ── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes tasSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes tasToastIn {
  from { opacity: 0; transform: translateX(40px) scale(.95); }
  to   { opacity: 1; transform: translateX(0) scale(1);      }
}

@keyframes tasToastOut {
  from { opacity: 1; transform: translateX(0);      }
  to   { opacity: 0; transform: translateX(40px);   }
}

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

@keyframes tasSkeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Responsive: Tablet ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tas-layout {
    grid-template-columns: var(--tas-sidebar-w-col) 1fr;
  }

  .tas-sidebar-title,
  .tas-nav-item .nav-label,
  .tas-profile-info,
  .tas-nav-label,
  .tas-nav-badge {
    display: none;
  }

  .tas-sidebar-profile {
    justify-content: center;
    padding: 14px 10px;
  }

  .tas-content {
    padding: 20px;
  }
}

/* ── Responsive: Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tas-layout {
    grid-template-columns: 1fr;
    grid-template-rows:    auto 1fr;
    padding-bottom:        70px; /* room for mobile nav */
  }

  .tas-sidebar {
    display: none;
  }

  .tas-topbar {
    padding: 14px 16px;
  }

  .tas-content {
    padding: 16px;
    max-width: 100vw;
    overflow-x: hidden;
  }

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

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

  .tas-welcome {
    padding: 22px 20px;
    flex-direction: column;
    text-align: center;
  }

  .tas-mobile-nav {
    display:       flex;
    position:      fixed;
    bottom:        0;
    left:          0;
    right:         0;
    background:    var(--tas-surface);
    border-top:    1px solid var(--tas-border);
    z-index:       200;
    padding:       8px 8px calc(8px + env(safe-area-inset-bottom));
    backdrop-filter: blur(20px);
    overflow-x:    auto;
    overflow-y:    hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap:           4px;
  }

  .tas-mobile-nav::-webkit-scrollbar {
    display: none;
  }

  .tas-mobile-nav-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            5px;
    padding:        10px 18px;
    border-radius:  var(--tas-r-md);
    text-decoration: none;
    color:          var(--tas-text-3);
    font-size:      11px;
    font-weight:    600;
    transition:     color var(--tas-dur-fast), background var(--tas-dur-fast);
    flex:           0 0 auto;
    scroll-snap-align: start;
    min-width:      72px;
    white-space:    nowrap;
  }

  .tas-mobile-nav-item.active,
  .tas-mobile-nav-item:hover {
  }

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

  .tas-chat-messages {
    max-height: 280px;
  }

  #tas-toasts {
    bottom: 80px;
    right:  16px;
    left:   16px;
  }

  .tas-toast {
    min-width: unset;
    max-width: unset;
    width:     100%;
  }
}
/**
 * Order Tracking & Recent Orders Table Styles
 * Add these to assets/css/frontend.css
 */

/* ========================================
   Order Tracking Timeline
   ======================================== */

.tas-order-tracking {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tas-tracking-step {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    position: relative;
}

.tas-tracking-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tas-bg-2);
    color: var(--tas-text-3);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.tas-tracking-step.completed .tas-tracking-icon {
    background: var(--tas-accent);
    color: white;
    box-shadow: 0 2px 8px rgba(26, 196, 243, 0.2);
}

.tas-tracking-content {
    flex: 1;
    padding-top: 4px;
}

.tas-tracking-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tas-text);
}

.tas-tracking-time {
    font-size: 12px;
    color: var(--tas-accent);
    margin-top: 2px;
    font-weight: 500;
}

.tas-tracking-step.completed .tas-tracking-time {
    color: var(--tas-accent);
}

.tas-tracking-line {
    position: absolute;
    left: 20px;
    top: 48px;
    width: 2px;
    height: 20px;
    background: var(--tas-border);
    transition: background 0.2s ease;
}

.tas-tracking-step.completed .tas-tracking-line {
    background: var(--tas-accent);
}

.tas-tracking-step:last-child .tas-tracking-line {
    display: none;
}

/* ========================================
   Orders Table - Product Column Fix
   ======================================== */

.tas-orders-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--tas-border);
    color: var(--tas-text);
    vertical-align: middle;
}

/* Hide product warning/info text */
.tas-orders-table td:nth-child(2) {
    position: relative;
}

.tas-orders-table td:nth-child(2) small,
.tas-orders-table td:nth-child(2) .product-warning,
.tas-orders-table td:nth-child(2) em {
    display: none !important;
}

/* Spacing between Track Your Order and Recent Orders */
.tas-dashboard-page > .tas-card:nth-of-type(1) {
    margin-bottom: 32px;
}

/* Adjust card spacing */
.tas-card {
    margin-bottom: 20px;
}

.tas-card:last-child {
    margin-bottom: 0;
}

.tas-orders-table tbody tr {
    transition: background-color 0.15s ease;
}

.tas-orders-table tbody tr:hover {
    background: var(--tas-bg-2);
}

.tas-orders-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Badge Styles */
.tas-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tas-badge-pending {
    background: #fef3c7;
    color: #92400e;
}

.tas-badge-processing,
.tas-badge-in-production {
    background: #dbeafe;
    color: #1e40af;
}

.tas-badge-completed,
.tas-badge-shipped {
    background: #dcfce7;
    color: #166534;
}

.tas-badge-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.tas-badge-refunded {
    background: #f3e8ff;
    color: #6b21a8;
}

.tas-badge-failed {
    background: #fecaca;
    color: #991b1b;
}

/* ========================================
   Links & Actions
   ======================================== */

.tas-link {
    color: var(--tas-accent);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.tas-link:hover {
    opacity: 0.7;
}

.tas-link:active {
    opacity: 0.5;
}

.tas-more-menu {
    background: none;
    border: none;
    padding: 0;
    color: var(--tas-text-3);
    cursor: pointer;
    transition: color 0.2s ease;
}

.tas-more-menu:hover {
    color: var(--tas-text);
}

/* ========================================
   Delivery Info Box
   ======================================== */

.tas-delivery-info {
    margin-top: 20px;
    padding: 12px 14px;
    background: var(--tas-bg-2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tas-delivery-info svg {
    color: var(--tas-accent);
    flex-shrink: 0;
}

.tas-delivery-date {
    font-size: 13px;
}

.tas-delivery-label {
    font-weight: 600;
    color: var(--tas-text);
}

.tas-delivery-value {
    color: var(--tas-text-3);
    margin-top: 2px;
}

/* ========================================
   Track Order Card Header
   ======================================== */

.tas-order-tracking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tas-border);
}

.tas-order-tracking-info {
    flex: 1;
}

.tas-order-tracking-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--tas-text);
}

.tas-order-tracking-meta {
    font-size: 12px;
    color: var(--tas-text-3);
    margin-top: 2px;
}

.tas-order-tracking-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--tas-text);
    text-align: right;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .tas-orders-table {
        font-size: 12px;
    }

    .tas-orders-table th {
        padding: 10px 12px;
        font-size: 10px;
    }

    .tas-orders-table td {
        padding: 10px 12px;
    }

    .tas-card-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tas-orders-table-wrapper {
        margin: -12px -16px 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tas-orders-table {
        min-width: 640px;
    }

    .tas-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tas-table {
        min-width: 560px;
    }


    .tas-tracking-step {
        padding: 10px 0;
    }

    .tas-tracking-icon {
        width: 36px;
        height: 36px;
    }

    .tas-tracking-icon svg {
        width: 16px;
        height: 16px;
    }

    .tas-tracking-line {
        left: 18px;
        top: 44px;
        height: 16px;
    }

    .tas-delivery-info {
        padding: 10px 12px;
    }

    .tas-order-tracking-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .tas-order-tracking-amount {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .tas-orders-table th:nth-child(2),
    .tas-orders-table td:nth-child(2) {
        display: none;
    }

    .tas-orders-table th:nth-child(n+5),
    .tas-orders-table td:nth-child(n+5) {
        font-size: 11px;
    }

    .tas-tracking-step {
        gap: 10px;
    }

    .tas-tracking-icon {
        width: 32px;
        height: 32px;
    }

    .tas-tracking-label {
        font-size: 12px;
    }

    .tas-tracking-time {
        font-size: 11px;
    }
}

/* ========================================
   Dark Mode Support
   ======================================== */

:root[data-theme="dark"] .tas-orders-table thead {
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .tas-badge-pending {
    background: rgba(180, 83, 9, 0.2);
    color: #fcd34d;
}

:root[data-theme="dark"] .tas-badge-processing,
:root[data-theme="dark"] .tas-badge-in-production {
    background: rgba(30, 64, 175, 0.2);
    color: #93c5fd;
}

:root[data-theme="dark"] .tas-badge-completed,
:root[data-theme="dark"] .tas-badge-shipped {
    background: rgba(22, 101, 52, 0.2);
    color: #86efac;
}

:root[data-theme="dark"] .tas-badge-cancelled {
    background: rgba(153, 27, 27, 0.2);
    color: #fca5a5;
}

:root[data-theme="dark"] .tas-badge-refunded {
    background: rgba(107, 33, 168, 0.2);
    color: #e9d5ff;
}

:root[data-theme="dark"] .tas-badge-failed {
    background: rgba(127, 29, 29, 0.2);
    color: #fca5a5;
}

/* ========================================
   Order Tracking Timeline - SIMPLIFIED DESIGN
   ======================================== */

.tas-order-tracking-simple {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 20px 0;
    padding: 0;
    position: relative;
}

.tas-tracking-step-simple {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.tas-tracking-icon-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tas-bg-2);
    color: var(--tas-text-3);
    margin-bottom: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
}

.tas-tracking-step-simple.completed .tas-tracking-icon-simple {
    background: var(--tas-accent);
    color: white;
    box-shadow: 0 2px 8px rgba(26, 196, 243, 0.2);
}

.tas-tracking-label-simple {
    font-size: 12px;
    font-weight: 600;
    color: var(--tas-text);
    text-align: center;
    margin-bottom: 4px;
    width: 100%;
}

.tas-tracking-time-simple {
    font-size: 11px;
    color: var(--tas-accent);
    text-align: center;
    font-weight: 500;
}

.tas-tracking-connector {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--tas-border);
    z-index: 1;
    margin: 0 auto;
}

.tas-tracking-step-simple:not(:last-child) .tas-tracking-connector {
    display: block;
}

.tas-tracking-step-simple:last-child .tas-tracking-connector {
    display: none;
}

@media (max-width: 768px) {
    .tas-order-tracking-simple {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .tas-tracking-step-simple {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        flex: none;
        padding-bottom: 24px;
    }

    .tas-tracking-step-simple:last-child {
        padding-bottom: 0;
    }

    .tas-tracking-icon-simple {
        margin-bottom: 0;
        margin-right: 12px;
    }

    .tas-tracking-label-simple,
    .tas-tracking-time-simple {
        text-align: left;
        width: auto;
    }

    .tas-tracking-connector {
        top: 40px;
        left: 20px;
        right: auto;
        width: 2px;
        height: calc(100% - 16px);
        margin: 0;
    }
}


/* ========================================
   Dashboard Header
   ======================================== */

.tas-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tas-border);
}

.tas-dashboard-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--tas-text);
    margin: 0;
}

.tas-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tas-btn-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--tas-bg-2);
    color: var(--tas-text-2);
    border: 1px solid var(--tas-border);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
}

.tas-btn-header-icon:hover {
    background: var(--tas-bg);
    color: var(--tas-accent);
    border-color: var(--tas-accent);
}

.tas-btn-header-icon:active {
    transform: scale(0.95);
}

.tas-notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

@media (max-width: 640px) {
    .tas-dashboard-header {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }

    .tas-dashboard-title {
        font-size: 22px;
    }

    .tas-btn-header-icon {
        width: 36px;
        height: 36px;
    }

    .tas-btn-header-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ── Pay Now Modal ───────────────────────────────────────────────────────── */
.tas-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13,13,14,.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tas-modal {
    background: var(--tas-surface);
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    animation: tas-modal-in .18s ease;
}

@keyframes tas-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tas-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--tas-border);
    flex-shrink: 0;
}

.tas-modal__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--tas-text);
}

.tas-modal__close {
    background: var(--tas-surface-3);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tas-text-2);
    flex-shrink: 0;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
}

.tas-modal__close svg { width: 16px; height: 16px; display: block; pointer-events: none; }

.tas-modal__close:hover { background: var(--tas-border-strong); }

.tas-modal__body {
    padding: 20px;
    overflow-y: auto;
}

.tas-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--tas-border);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .tas-modal {
        max-width: 100%;
    }

    .tas-modal__footer {
        flex-direction: column-reverse;
        padding: 16px 20px 22px;
        gap: 10px;
    }

    .tas-modal__footer .tas-btn {
        width: 100%;
        padding: 13px 18px;
        font-size: 14px;
    }
}

.tas-pay-now-error {
    margin: 12px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--tas-red);
}

#tas-pay-now-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

#tas-pay-now-upload-area.is-dragover {
    background: rgba(39,194,236,.12) !important;
    border-color: #1db0d9 !important;
}

@media (max-width: 480px) {
    .tas-modal { max-width: 100%; }
}

/* ── Bank-transfer / receipt-upload content, ported from the checkout      ──
   plugin's checkout.css so the modal looks identical even though that
   stylesheet isn't enqueued on the account dashboard pages.                */
.tas-pay-now-modal {
    --tcc-primary:     #0a0a0a;
    --tcc-accent:      #27c2ec;
    --tcc-bg:          #f7f7f5;
    --tcc-muted:       #888880;
    --tcc-danger:      #d94f4f;
    --tcc-success:     #2da84a;
    --tcc-transition:  0.16s cubic-bezier(0.4,0,0.2,1);
}

.tas-pay-now-modal .tcc-label    { font-size: 11px; font-weight: 700; color: var(--tcc-primary); letter-spacing: 0.04em; text-transform: uppercase; }
.tas-pay-now-modal .tcc-required { color: var(--tcc-danger); margin-left: 2px; }

.tas-pay-now-modal .tcc-bank-details {
    background: #fefefe;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}
.tas-pay-now-modal .tcc-bank-details__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tcc-primary); margin-bottom: 12px; }
.tas-pay-now-modal .tcc-bank-detail-row     { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(39,194,236,.15); font-size: 13px; color: var(--tcc-muted); }
.tas-pay-now-modal .tcc-bank-detail-row:last-of-type { border: none; }
.tas-pay-now-modal .tcc-bank-detail-row strong       { color: var(--tcc-primary); font-weight: 600; }

.tas-pay-now-modal .tcc-bank-detail-row--account { border-bottom: 1px solid rgba(39,194,236,.15); }
.tas-pay-now-modal .tcc-account-copy  { display: flex; align-items: center; gap: 8px; }
.tas-pay-now-modal .tcc-account-num   { font-family: 'DM Mono', monospace; font-size: 16px; letter-spacing: 0.1em; color: var(--tcc-primary); font-weight: 700; }

.tas-pay-now-modal .tcc-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(39,194,236,.12);
    border: 1px solid var(--tcc-accent);
    color: var(--tcc-accent);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--tcc-transition);
    white-space: nowrap;
}
.tas-pay-now-modal .tcc-copy-btn:hover { background: var(--tcc-accent); color: #000; }

.tas-pay-now-modal .tcc-receipt-upload { margin-top: 16px; }

.tas-pay-now-modal .tcc-receipt-upload__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.tas-pay-now-modal .tcc-receipt-upload__hint { font-size: 11px; color: var(--tcc-muted); }

.tas-pay-now-modal .tcc-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 20px;
    border: 2px dashed var(--tcc-accent);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--tcc-transition);
    background: rgba(39,194,236,.04);
    min-height: 110px;
    text-align: center;
}
.tas-pay-now-modal .tcc-upload-area:hover {
    background: rgba(39,194,236,.08);
    border-color: #1db0d9;
}

.tas-pay-now-modal .tcc-upload-area__idle,
.tas-pay-now-modal .tcc-upload-area__selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tas-pay-now-modal .tcc-upload-area__icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(39,194,236,.12);
    color: var(--tcc-accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2px;
}
.tas-pay-now-modal .tcc-upload-area__icon svg { width: 22px; height: 22px; }
.tas-pay-now-modal .tcc-upload-area__icon--done {
    background: rgba(45,168,74,.12);
    color: var(--tcc-success);
}

.tas-pay-now-modal .tcc-upload-area__cta  { font-size: 13px; font-weight: 700; color: var(--tcc-accent); }
.tas-pay-now-modal .tcc-upload-area__sub  { font-size: 12px; color: var(--tcc-muted); }
.tas-pay-now-modal .tcc-upload-area__filename { font-size: 12px; font-weight: 600; color: var(--tcc-primary); font-family: 'DM Mono', monospace; word-break: break-all; }
.tas-pay-now-modal .tcc-upload-area__change   { font-size: 11px; color: var(--tcc-muted); text-decoration: underline; cursor: pointer; }


/* ── Your Designs tab ──────────────────────────────────────────────────── */
.tas-designs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.tas-design-card { padding: 0; overflow: hidden; }
.tas-design-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--tas-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tas-design-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tas-design-body { padding: 14px 16px 16px; }
.tas-design-product {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tas-text);
  line-height: 1.3;
}
.tas-design-meta { margin: 0; font-size: 12px; color: var(--tas-text-2); }
.tas-design-date { margin: 6px 0 0; font-size: 11.5px; color: var(--tas-text-3); }
.tas-design-filecount { margin: 4px 0 0; font-size: 11.5px; color: var(--tas-text-3); }
.tas-designs-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--tas-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--tas-accent) 20%, transparent);
  border-radius: var(--tas-radius, 10px);
  font-size: 12.5px;
  color: var(--tas-text-2);
}

/* Thumbnail placeholder for non-image files (PDF, AI, PSD, etc.) */
.tas-design-thumb-ext {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tas-text-3);
  background: var(--tas-surface);
  border: 1px solid var(--tas-border, rgba(0,0,0,.08));
  border-radius: 6px;
  padding: 6px 12px;
}

/* Filter bar */
.tas-designs-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--tas-surface);
  border: 1px solid var(--tas-border, rgba(0,0,0,.08));
  border-radius: var(--tas-radius, 10px);
}
.tas-designs-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 180px;
  min-width: 160px;
}
.tas-designs-filter-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tas-text-3);
}
.tas-designs-filter-group select,
.tas-designs-filter-group input[type="date"],
.tas-designs-filter-group input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--tas-border, rgba(0,0,0,.12));
  background: var(--tas-surface-2);
  color: var(--tas-text);
  line-height: 1.2;
}
.tas-designs-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.tas-designs-filter-actions .tas-btn {
  box-sizing: border-box;
  height: 36px;
}

/* Pagination */
.tas-designs-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}
.tas-designs-pagination .tas-btn {
  min-width: 34px;
  justify-content: center;
}