/* ==========================================================================
   Wonders of the Blue Planet - Premium Bright Visual Styling System
   ========================================================================== */

/* --- CSS VARIABLES (Premium Light Theme Tokens) --- */
:root {
  --color-bg-base: #f0f4f8;          /* Bright ocean ice base */
  --color-bg-surface: #ffffff;       /* Pure white card backgrounds */
  --color-bg-surface-light: #e1e9f0; /* Icy blue highlights */
  --color-bg-glass: rgba(255, 255, 255, 0.78);
  --color-border-glass: rgba(0, 119, 182, 0.08);
  
  --color-text-primary: #0a2540;     /* Deep navy for ultimate contrast */
  --color-text-secondary: #486581;   /* Elegant slate for body/subtext */
  --color-text-muted: #829ab1;       /* Soft blue-grey for captions */
  
  --color-accent-teal: #0077b6;      /* Vibrant deep sea teal */
  --color-accent-teal-hover: #0096c7;
  --color-accent-orange: #f3722c;    /* Coral reef orange */
  --color-accent-gold: #d4af37;      /* Luxurious gold accent */
  --color-accent-gold-hover: #b89326;
  
  --color-success: #2ec4b6;          /* Clean mint success */
  --color-error: #e63946;            /* Alert crimson */
  --color-warning: #ffb703;          /* Warm warning amber */
  
  --font-display: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  --shadow-premium: 0 12px 30px rgba(10, 37, 64, 0.08), 0 2px 8px rgba(10, 37, 64, 0.04);
  --shadow-hover: 0 20px 40px rgba(10, 37, 64, 0.15), 0 5px 15px rgba(0, 119, 182, 0.05);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.03);
  
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 32px;
  --border-radius-pill: 9999px;

  /* Soft ocean portal panel (matches wishlist empty card) */
  --portal-panel-radius: 18px;
  --portal-panel-border: 1px solid rgba(0, 119, 182, 0.14);
  --portal-panel-shadow: 0 12px 36px rgba(12, 74, 110, 0.08);
  --portal-panel-bg:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0, 180, 216, 0.18), transparent 55%),
    linear-gradient(165deg, #e8f6fc 0%, #f7fbfd 45%, #eef5f9 100%);
  --portal-panel-bg-soft:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(0, 180, 216, 0.12), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f5fafc 100%);
  --portal-heading: #0c4a6e;
  --portal-body: #475569;
  
  --header-top-height: 72px;
  --header-nav-height: 48px;
  --header-height: 120px;
}

/* --- BASE STYLES --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  background-color: #ffffff;
}

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

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.detail-tab-btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--color-accent-teal);
  outline-offset: 2px;
}

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

/* Custom Bright Ocean Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-base);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--border-radius-pill);
  border: 2px solid var(--color-bg-base);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-teal);
}

/* --- COMMON UTILITIES & LAYOUT --- */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
}

.divider {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent-teal), var(--color-accent-gold));
  margin: 15px auto;
  border-radius: var(--border-radius-pill);
}

.text-gold { color: #cc9d23 !important; }
.text-teal { color: var(--color-accent-teal) !important; }
.text-orange { color: var(--color-accent-orange) !important; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: var(--border-radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  gap: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-sm {
  padding: 8px 20px;
  font-size: 0.88rem;
}
.btn-full {
  width: 100%;
}
.btn-primary {
  background: var(--color-accent-teal);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--color-accent-teal-hover);
  box-shadow: 0 8px 20px rgba(0, 119, 182, 0.25);
  transform: translateY(-2px);
}
.btn-secondary {
  background: var(--color-bg-surface);
  border: 1px solid rgba(0, 119, 182, 0.15);
  color: var(--color-accent-teal);
}
.btn-secondary:hover {
  background: var(--color-bg-surface-light);
  border-color: var(--color-accent-teal);
  transform: translateY(-2px);
}
.btn-gold {
  background: var(--color-accent-gold);
  color: #ffffff;
}
.btn-gold:hover {
  background: var(--color-accent-gold-hover);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.25);
  transform: translateY(-2px);
}

/* Glassmorphism Panel Class */
.glass-panel {
  background: var(--color-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 119, 182, 0.08);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-premium);
}

/* Form Styles */
.form-field {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.form-field label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
}
.form-field input, .form-field select, .form-field textarea {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-sm);
  padding: 12px 16px;
  color: var(--color-text-primary);
  transition: var(--transition-smooth);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-accent-teal);
  background: #ffffff;
  box-shadow: 0 0 12px rgba(0, 119, 182, 0.15);
}
.form-row {
  display: flex;
  gap: 20px;
}
.form-row .form-field {
  flex: 1;
}
.error-msg {
  color: var(--color-error);
  font-size: 0.8rem;
  margin-top: 5px;
  display: none;
}
.form-field.invalid input, .form-field.invalid textarea {
  border-color: var(--color-error);
}
.form-field.invalid .error-msg {
  display: block;
}

/* Modal Backdrops & Containers */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 37, 64, 0.45);
  backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 24px;
  box-sizing: border-box;
  overflow: auto;
}
.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
body.modal-open {
  overflow: hidden;
}
.modal-container {
  background: var(--color-bg-surface);
  border: 1px solid rgba(0, 119, 182, 0.1);
  border-radius: var(--border-radius-md);
  box-shadow: 0 30px 70px rgba(10, 37, 64, 0.2);
  max-height: min(90vh, 100%);
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.modal-backdrop.active .modal-container {
  transform: scale(1) translateY(0);
}
.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 100;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  transform-origin: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.modal-close-btn:hover {
  color: var(--color-accent-teal);
  background: #ffffff;
  border-color: var(--color-accent-teal);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.15);
}
.modal-top-actions {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.modal-top-actions .modal-close-btn {
  position: static;
  top: auto;
  right: auto;
}
.modal-expand-btn {
  width: 36px;
  height: 36px;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.modal-expand-btn:hover {
  color: #15803d;
  background: #ffffff;
  border-color: #15803d;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}
.large-modal { width: 90%; max-width: 1100px; }
#product-detail-modal .modal-container.large-modal {
  width: min(1120px, 92vw);
  max-width: 1120px;
  height: min(860px, 92vh);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#product-detail-modal .modal-body {
  padding: 22px 28px 20px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.medium-modal { width: 90%; max-width: 720px; }
.small-modal { width: 95%; max-width: 440px; }
.modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

/* Admin product editor */
.product-editor-large {
  width: min(1180px, 96vw);
  height: min(860px, 94vh);
  background: #fff;
}
.product-editor-header {
  min-height: 88px;
  padding: 20px 70px 16px 30px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.product-editor-header h3 {
  margin: 2px 0 3px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: #0f172a;
}
.product-editor-header p {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
}
.product-editor-header > i {
  font-size: 1.8rem;
}
#product-editor-form {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-editor-tabs {
  padding: 0 30px;
  margin-bottom: 0;
}
.product-editor-tab {
  padding: 16px 0 13px;
}
.product-editor-body {
  padding: 24px 30px;
  background: #fff;
}
.product-editor-pane {
  display: none;
  animation: fadeIn 0.18s ease;
}
.product-editor-pane.active {
  display: block;
}
.product-editor-pane .form-field label,
.category-editor-modal .form-field label {
  text-transform: none;
  letter-spacing: 0;
}
.editor-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.product-editor-footer {
  padding: 16px 30px;
  margin: 0;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  flex-shrink: 0;
  justify-content: space-between;
}
.product-editor-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
#btn-editor-delete[hidden] {
  display: none !important;
}
.editor-check-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  box-sizing: border-box;
}
.editor-check-card input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent-teal);
}
.editor-check-card span {
  display: flex;
  flex-direction: column;
}
.editor-check-card strong {
  color: #0f172a;
  font-size: 0.86rem;
}
.editor-check-card small {
  color: #64748b;
  font-size: 0.75rem;
}
.editor-image-preview {
  min-height: 300px;
  border: 1px dashed #94a3b8;
  border-radius: 12px;
  background: #f8fafc;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #64748b;
}
.editor-image-preview img {
  display: none;
  width: 100%;
  height: 300px;
  object-fit: contain;
}
.editor-image-preview.has-image img {
  display: block;
}
.editor-image-preview.has-image span {
  display: none;
}
.form-hint {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
}
.product-images-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.image-upload-row,
.inline-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.inline-field-row input {
  flex: 1;
  min-width: 180px;
}
.editor-images-save-hint.hidden {
  display: none;
}
.product-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.product-image-card {
  position: relative;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
  aspect-ratio: 1;
}
.product-image-card.is-primary {
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 1px var(--color-accent-teal);
}
.product-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-image-card-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.72));
}
.product-image-card-actions button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-image-card-actions button.is-primary,
.product-image-card-actions button:hover {
  color: var(--color-accent-teal);
}
.product-image-card-actions .btn-remove-image:hover {
  color: #dc2626;
}
.premium-discount-badge {
  position: absolute;
  top: 58px;
  right: 10px;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
  text-align: center;
  padding: 4px;
}
.premium-discount-badge small {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: lowercase;
  opacity: 0.95;
}
.premium-card-price-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.premium-card-price-old {
  color: #94a3b8;
  font-size: 0.78rem;
  text-decoration: line-through;
}
.product-images-section .error-msg {
  margin-top: 8px;
}
.product-images-section.invalid .error-msg {
  display: block;
}

/* Editable technical specs in product editor */
.editor-specs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.editor-specs-header h4 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #0f172a;
}
.editor-specs-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.editor-specs-table {
  width: 100%;
  border-collapse: collapse;
}
.editor-specs-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.editor-specs-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.editor-specs-table tr:last-child td {
  border-bottom: none;
}
.editor-specs-table input,
.editor-specs-table textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font: 500 0.88rem var(--font-body);
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
}
.editor-specs-table textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.4;
}
.editor-specs-table input:focus,
.editor-specs-table textarea:focus {
  outline: none;
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.12);
}
.editor-specs-table .spec-key-input {
  font-weight: 600;
  color: #334155;
}
.editor-specs-table .spec-label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: #334155;
  padding: 2px 2px;
}
.editor-specs-remove {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.editor-specs-remove:hover {
  background: #fef2f2;
  color: #dc2626;
}


/* --- HEADER & NAVIGATION (two-tier) --- */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 900;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(10, 37, 64, 0.08);
}

.header-top {
  height: var(--header-top-height);
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 119, 182, 0.08);
}

.header-nav-bar {
  height: var(--header-nav-height);
  background: var(--color-accent-teal);
  color: #ffffff;
}

.header-container {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-top-inner {
  justify-content: space-between;
}

.header-nav-inner {
  justify-content: flex-start;
  gap: 8px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-img {
  height: 52px;
  width: auto;
  border-radius: var(--border-radius-pill);
  box-shadow: 0 4px 10px rgba(0, 119, 182, 0.15);
  transition: var(--transition-smooth);
}
.logo-area:hover .logo-img {
  transform: rotate(-8deg) scale(1.04);
}
.logo-text {
  display: flex;
  flex-direction: column;
}
.logo-text .brand-main {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.3px;
  line-height: 1.15;
  color: var(--color-text-primary);
}
.logo-text .brand-sub {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--color-accent-teal);
  margin-top: 2px;
}

.header-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 640px;
  min-width: 180px;
  margin: 0 auto;
}

.header-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 1;
}

#header-search-input {
  width: 100%;
  height: 46px;
  border-radius: var(--border-radius-pill);
  border: 1.5px solid #d8e2ec;
  background: #f8fafc;
  padding: 0 44px 0 46px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  outline: none;
  transition: var(--transition-fast);
}

#header-search-input::placeholder {
  color: var(--color-text-muted);
}

#header-search-input:focus {
  background: #ffffff;
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.12);
}

.header-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-search-clear:hover {
  background: #e2e8f0;
  color: var(--color-text-primary);
}

.header-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 119, 182, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(10, 37, 64, 0.14);
  max-height: 380px;
  overflow-y: auto;
  z-index: 950;
  text-align: left;
}

.header-search-dropdown .search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s ease;
}

.header-search-dropdown .search-result-item:last-child {
  border-bottom: none;
}

.header-search-dropdown .search-result-item:hover {
  background: #f0f7fc;
}

.header-search-dropdown .search-result-item img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  background: #f1f5f9;
}

.header-search-dropdown .item-info {
  flex: 1;
  min-width: 0;
}

.header-search-dropdown .item-info h5 {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-search-dropdown .item-info p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0;
}

.header-search-dropdown .item-price {
  font-weight: 700;
  color: var(--color-accent-gold);
  font-size: 0.9rem;
  white-space: nowrap;
}

.header-search-empty {
  padding: 18px 16px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.header-search-footer {
  display: block;
  padding: 12px 16px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-teal);
  border-top: 1px solid #f1f5f9;
  text-decoration: none;
}

.header-search-footer:hover {
  background: #f8fafc;
}

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

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header-account-wrap,
.header-account-menu {
  position: relative;
}

.header-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 8px;
  z-index: 1400;
}

.header-account-dropdown[hidden] {
  display: none !important;
}

.header-account-dropdown-name {
  padding: 8px 10px 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0a2540;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 4px;
}

.header-account-dropdown a,
.header-account-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  color: #334155;
  text-decoration: none;
  font-size: 0.875rem;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.header-account-dropdown a[hidden] {
  display: none !important;
}

.header-account-dropdown a:hover,
.header-account-dropdown button:hover {
  background: #f0f9ff;
  color: var(--color-accent-teal);
}

.header-basket-btn,
.header-signin-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: var(--font-body);
  transition: var(--transition-fast);
}

.header-basket-btn i,
.header-signin-btn i {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
}

.header-action-label,
.header-signin-btn #user-display-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  max-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-signin-btn {
  flex-direction: row;
  gap: 8px;
  min-width: auto;
  padding: 8px 14px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.header-signin-btn #user-display-name {
  font-size: 0.88rem;
  max-width: 120px;
}

.header-basket-btn:hover i,
.header-basket-btn:hover .header-action-label,
.header-contact-btn:hover i,
.header-contact-btn:hover .header-action-label {
  color: var(--color-accent-teal, #0096c7);
}
.header-signin-btn:hover i,
.header-signin-btn:hover #user-display-name {
  color: var(--color-accent-teal);
}

.header-signin-btn:hover {
  background: #e8f4fb;
  border-color: rgba(0, 119, 182, 0.25);
}

.header-basket-btn .cart-badge {
  top: 0;
  right: 8px;
}

.mobile-header-actions {
  display: none;
  align-items: center;
  gap: 10px;
}

.action-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
  background: #f1f5f9;
  border: 1px solid rgba(0, 119, 182, 0.05);
}
.action-btn:hover {
  background: var(--color-bg-surface-light);
  color: var(--color-accent-teal);
}
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f97316;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: popBadge 0.3s ease;
  box-shadow: 0 2px 5px rgba(249, 115, 22, 0.45);
  line-height: 1;
  z-index: 10;
}

.browse-categories {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
}

.browse-categories-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: none;
  background: rgba(0, 0, 0, 0.18);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.browse-categories-btn:hover,
.browse-categories.open .browse-categories-btn {
  background: rgba(0, 0, 0, 0.28);
}

.browse-chevron {
  font-size: 0.7rem;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.browse-categories.open .browse-chevron {
  transform: rotate(180deg);
}

.browse-categories-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 36px rgba(10, 37, 64, 0.18);
  overflow: hidden;
  z-index: 960;
}

.browse-cat-link {
  display: block;
  padding: 12px 18px;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s ease, color 0.15s ease;
}

.browse-cat-link:last-child {
  border-bottom: none;
}

.browse-cat-link:hover {
  background: #f0f7fc;
  color: var(--color-accent-teal);
}

.main-nav {
  flex: 1;
  overflow: hidden;
  align-self: stretch;
  position: relative;
}
.main-nav ul {
  display: flex;
  list-style: none;
  gap: clamp(16px, 2vw, 30px);
  align-items: center;
  height: 100%;
  padding-left: 16px;
  padding-right: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.main-nav ul::-webkit-scrollbar {
  display: none;
}

.nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  position: relative;
  padding: 14px 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

@media (max-width: 1300px) {
  .header-container {
    padding: 0 16px;
    gap: 14px;
  }
  .logo-area {
    gap: 8px;
  }
  .logo-text .brand-main {
    font-size: 1.02rem;
  }
  .main-nav ul {
    gap: clamp(12px, 1.5vw, 20px);
  }
  .nav-link {
    font-size: 0.82rem;
  }
  .browse-categories-btn {
    padding: 0 12px;
    font-size: 0.82rem;
  }
}

.nav-link:hover,
.nav-link.active {
  color: #ffffff;
}
.nav-link i {
  flex-shrink: 0;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent-gold);
  transition: var(--transition-smooth);
  border-radius: var(--border-radius-pill);
}
.nav-link.active::after,
.nav-link:hover::after {
  width: 100%;
}
#link-admin::after {
  left: 1.35em;
}
#link-admin.active::after,
#link-admin:hover::after {
  width: calc(100% - 1.35em);
}

.login-btn-nav {
  padding: 10px 22px !important;
  font-size: 0.92rem !important;
  border-radius: var(--border-radius-pill) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--color-accent-teal) !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 119, 182, 0.2) !important;
  cursor: pointer !important;
  transition: var(--transition-fast) !important;
  width: auto !important;
  height: auto !important;
}
.login-btn-nav:hover {
  background: var(--color-accent-teal) !important;
  color: #ffffff !important;
  border-color: var(--color-accent-teal) !important;
}
.mobile-menu-btn {
  display: none;
  font-size: 1.5rem;
  color: var(--color-text-primary);
  cursor: pointer;
  background: none;
  border: none;
}

@keyframes popBadge {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* --- MOBILE MENU OVERLAY --- */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 37, 64, 0.4);
  backdrop-filter: blur(10px);
  z-index: 950;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-content {
  width: 80%;
  max-width: 320px;
  height: 100%;
  background: var(--color-bg-surface);
  border-left: 1px solid rgba(0,119,182,0.1);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.mobile-nav-overlay.active .mobile-menu-content {
  transform: translateX(0);
}
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.mobile-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-accent-teal);
}
.mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.mobile-link {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.mobile-link:hover {
  color: var(--color-accent-teal);
}
.mobile-menu-footer {
  margin-top: auto;
}

/* --- SEARCH OVERLAY --- */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(240, 244, 248, 0.95);
  backdrop-filter: blur(20px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.search-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
#search-overlay-close {
  position: absolute;
  top: -45px;
  right: 0;
  width: 38px;
  height: 38px;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 1100;
  color: var(--color-text-secondary);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  transform-origin: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
#search-overlay-close:hover {
  color: var(--color-accent-teal);
  border-color: var(--color-accent-teal);
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 119, 182, 0.12);
}
.search-box {
  width: 90%;
  max-width: 700px;
  text-align: center;
  position: relative;
}
.search-box h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 25px;
  color: var(--color-text-primary);
}
.search-input-wrapper {
  position: relative;
  margin-bottom: 30px;
}
.search-input-wrapper input {
  width: 100%;
  background: #ffffff;
  border: 2px solid rgba(0, 119, 182, 0.15);
  border-radius: var(--border-radius-pill);
  padding: 18px 30px;
  font-size: 1.3rem;
  color: var(--color-text-primary);
  transition: var(--transition-smooth);
  box-shadow: 0 10px 25px rgba(10,37,64,0.05);
}
.search-input-wrapper input:focus {
  border-color: var(--color-accent-teal);
  box-shadow: 0 10px 30px rgba(0, 119, 182, 0.15);
}
.search-input-wrapper i {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--color-text-secondary);
}
.search-results-preview {
  max-height: 400px;
  overflow-y: auto;
  text-align: left;
  border-radius: var(--border-radius-md);
  box-shadow: 0 15px 40px rgba(10, 37, 64, 0.1);
  background: #ffffff;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
  cursor: pointer;
  transition: var(--transition-fast);
}
.search-result-item:hover {
  background: #f8fafc;
}
.search-result-item img {
  width: 55px;
  height: 55px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-base);
}
.search-result-item .item-info h5 {
  font-size: 1rem;
  margin-bottom: 3px;
  color: var(--color-text-primary);
}
.search-result-item .item-info p {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.search-result-item .item-price {
  margin-left: auto;
  font-weight: 700;
  color: var(--color-accent-gold-hover);
}

/* --- MAIN VIEWPORT --- */
.app-main {
  margin-top: var(--header-height);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.app-view {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.app-view.active {
  display: block;
}
.app-view.show {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   1. HOME VIEW & COMPONENTS
   ========================================================================== */

/* Home canvas ? same ice-blue?white as Featured Category Showcase */
#view-home {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(0, 180, 216, 0.1), transparent 50%),
    linear-gradient(180deg, #f0f9ff 0%, #ffffff 55%);
}

/* Cinematic Floating Video Hero Section */
.hero-slider {
  margin: 20px auto 40px;
  max-width: 1880px;
  width: calc(100% - 40px);
  min-height: 420px;
  height: clamp(420px, 58vw, 520px);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(10, 37, 64, 0.15);
  border: 1px solid rgba(0, 119, 182, 0.1);
  background: #0a2540;
}
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Deep, luxurious teal-blue semi-transparent gradient overlay for text readability */
  background: linear-gradient(180deg, rgba(7, 26, 43, 0.45) 0%, rgba(9, 44, 66, 0.6) 100%);
  z-index: 2;
}

.hero-slides-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;
}
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.slide-content {
  max-width: 900px;
  max-height: 100%;
  overflow: hidden;
  padding: 12px 0;
}
.slide-badge {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #00b4d8;
  border: 1px solid rgba(0, 180, 216, 0.4);
  padding: 6px 18px;
  border-radius: var(--border-radius-pill);
  display: inline-block;
  margin-bottom: 25px;
  background: rgba(0, 180, 216, 0.12);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.slide-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 3.8rem);
  line-height: 1.15;
  margin-bottom: 20px;
  color: #ffffff;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.accent-teal {
  color: #00b4d8;
}
.accent-orange {
  background: linear-gradient(90deg, var(--color-accent-orange), var(--color-accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.accent-gold {
  color: #e5a93b;
}
.slide-subtitle {
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  color: #e2f1fc;
  max-width: 720px;
  margin: 0 auto 35px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.slide-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Custom button states within dark hero slides */
.hero-slide .btn-primary {
  background: #ffffff;
  color: #0a2540;
  border-color: #ffffff;
}
.hero-slide .btn-primary:hover {
  background: #00b4d8;
  color: #ffffff;
  border-color: #00b4d8;
  box-shadow: 0 8px 20px rgba(0, 180, 216, 0.3);
}
.hero-slide .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
.hero-slide .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
}

.slider-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 12px;
}
.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--border-radius-pill);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.indicator-dot.active {
  background: #ffffff;
  width: 28px;
}

/* Category Grid Section ? match Featured Category Showcase atmosphere */
.featured-categories-section {
  padding: 55px 30px;
  max-width: none;
  width: 100%;
  margin: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(0, 180, 216, 0.1), transparent 50%),
    linear-gradient(180deg, #f0f9ff 0%, #ffffff 55%);
  box-sizing: border-box;
}
.featured-categories-section .section-header-centered,
.featured-categories-section .categories-grid {
  max-width: 1400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.section-header-centered {
  text-align: center;
  margin-bottom: 65px;
}
.section-header-centered h2 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--color-text-primary);
}
.section-header-centered p {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  margin-top: 5px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
}
.category-card {
  height: 290px;
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(0, 119, 182, 0.08);
  box-shadow: var(--shadow-premium);
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: var(--transition-smooth);
}
.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(10,37,64,0.12);
}

.card-fishes { background-image: url('../assets/images/exotic-fishes.png'); }
.card-shrimp-turtles { background-image: url('../assets/images/shrimps-turtles.png'); }
.card-crabs-snails { background-image: url('../assets/images/crabs-snails.jpg'); }
.card-tanks { background-image: url('../assets/images/aquariums-stands.png'); }
.card-food { background-image: url('../assets/images/fish-nutrition.png'); }
.card-filters { background-image: url('../assets/images/filters-pumps.png'); }
.card-lighting { background-image: url('../assets/images/led-lighting.png'); }
.card-watercare { background-image: url('../assets/images/water-treatments.png'); }
.card-medicines { background-image: url('../assets/images/Fish_medicines.png'); }

.card-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(10, 37, 64, 0.05) 30%, rgba(10, 37, 64, 0.78) 100%);
  transition: var(--transition-smooth);
}
.category-card:hover .card-bg-overlay {
  background: linear-gradient(180deg, rgba(10, 37, 64, 0.1) 20%, rgba(0, 119, 182, 0.72) 100%);
}
.card-content {
  position: relative;
  z-index: 5;
  padding: 30px;
  width: 100%;
  transition: var(--transition-smooth);
  color: #ffffff; /* keep text white on image card */
}
.category-card:hover .card-content {
  transform: translateY(-5px);
}
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #ffffff;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: var(--transition-smooth);
}
.category-card:hover .card-icon {
  background: #ffffff;
  color: var(--color-accent-teal);
  transform: scale(1.05);
}
.card-content h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  margin-bottom: 5px;
}
.count-text {
  font-size: 0.88rem;
  color: #e2e8f0;
  margin-bottom: 15px;
}
.explore-link {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-accent-teal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9fe2ff;
}
.category-card:hover .explore-link {
  color: #ffffff;
}

/* Spotlight Products Carousel (Section made brighter) */
/* Premium Six Category Showcase Rows */
.homepage-showcase-section {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  padding: 55px 30px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0, 119, 182, 0.08);
  border-bottom: 1px solid rgba(0, 119, 182, 0.08);
}
.showcase-bubbles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.bubble-bg {
  position: absolute;
  background: rgba(0, 119, 182, 0.04);
  border-radius: 50%;
  bottom: -60px;
  animation: bubbleUp 10s infinite ease-in;
  pointer-events: none;
  box-shadow: inset 0 2px 4px rgba(0, 119, 182, 0.08);
}
@keyframes bubbleUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 0.45;
  }
  90% {
    opacity: 0.45;
  }
  100% {
    transform: translateY(-110vh) scale(1.6);
    opacity: 0;
  }
}
.showcase-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.showcase-category-row {
  margin-bottom: 75px;
}
.showcase-category-row:last-child {
  margin-bottom: 0;
}
.showcase-row-header {
  margin-bottom: 30px;
  border-left: 4px solid var(--color-accent-teal);
  padding-left: 18px;
}
.showcase-row-header h3 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 5px;
}
.showcase-row-header p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
}
.showcase-scroll-row {
  margin-bottom: 30px;
}
.showcase-row-action {
  text-align: center;
}
.btn-outline-dark {
  display: inline-block;
  background: transparent;
  color: var(--color-accent-teal);
  border: 2px solid var(--color-accent-teal);
  padding: 10px 30px;
  border-radius: var(--border-radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
}
.btn-outline-dark:hover {
  background: var(--color-accent-teal);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 119, 182, 0.15);
}

/* Bright & Clean Premium Card Design */
.premium-card {
  background: #ffffff;
  border: 2px solid #e2ecf5;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  color: var(--color-text-primary);
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-premium);
}
.premium-card:hover {
  transform: translateY(-8px);
  border: 2px solid var(--color-accent-teal);
  box-shadow: var(--shadow-hover);
}
.premium-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(0, 180, 216, 0.1), transparent 60%),
    linear-gradient(180deg, #f0f9ff 0%, #e8f4fa 100%);
  border-bottom: 1px solid rgba(0, 119, 182, 0.08);
}
.premium-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.premium-card:hover .premium-card-image img {
  transform: scale(1.03);
}
.premium-card:hover .card-overlay-actions,
.product-card:hover .card-overlay-actions,
.premium-card:focus-within .card-overlay-actions,
.product-card:focus-within .card-overlay-actions {
  opacity: 1;
  transform: translateY(0);
}
.premium-badge-category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: var(--color-accent-teal);
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--border-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 5;
}

.card-wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.95);
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}
.card-wishlist-btn:hover {
  color: #ef4444;
  border-color: #fecaca;
  background: #fff;
  transform: scale(1.06);
}
.card-wishlist-btn.is-active {
  color: #ef4444;
  border-color: #fecaca;
  background: #fef2f2;
}
.card-wishlist-btn.is-active i {
  color: #ef4444;
}

.premium-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.premium-card-content h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.8rem;
  line-height: 1.4;
}
.premium-card-desc {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.3rem;
  line-height: 1.4;
}
.premium-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid #f1f5f9;
  padding-top: 15px;
}
.premium-card-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-accent-gold-hover);
}
.premium-cart-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent-teal);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}
.premium-cart-btn:hover {
  background: var(--color-accent-teal-hover);
  color: #ffffff;
  transform: scale(1.1);
}

/* Premium CTA Section */
.homepage-cta-section {
  padding: 50px 30px;
  max-width: 1400px;
  margin: 0 auto;
}
.homepage-cta-card {
  background:
    linear-gradient(135deg, rgba(0, 80, 130, 0.82) 0%, rgba(0, 150, 199, 0.78) 100%),
    url('../assets/images/flyer.png') center / cover no-repeat;
  border-radius: var(--border-radius-md);
  padding: 55px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,119,182,0.25);
}
.homepage-cta-content {
  position: relative;
  z-index: 5;
  max-width: 700px;
  margin: 0 auto;
}
.homepage-cta-content h2 {
  font-family: var(--font-display);
  font-size: 2.7rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: #ffffff;
}
.homepage-cta-content p {
  color: #f0f9ff;
  font-size: 1.15rem;
  margin-bottom: 35px;
  opacity: 0.95;
}
.btn-white {
  background: #ffffff;
  color: #0077b6;
  font-weight: 700;
  padding: 14px 35px;
  border-radius: var(--border-radius-pill);
  transition: var(--transition-fast);
  border: 1px solid #ffffff;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.btn-white:hover {
  background: transparent;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
}

/* Product Card Design (Bright & Premium) */
.product-card {
  background: var(--color-bg-surface);
  border: 2px solid #e2ecf5;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  position: relative;
}
.product-card:hover {
  transform: translateY(-8px);
  border: 2px solid var(--color-accent-teal);
  box-shadow: var(--shadow-hover);
}
.product-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(0, 180, 216, 0.1), transparent 60%),
    linear-gradient(180deg, #f0f9ff 0%, #e8f4fa 100%);
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 119, 182, 0.08);
}
.product-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.product-card:hover .product-card-image img {
  transform: scale(1.08);
}
.card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 5;
}
.badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: var(--border-radius-pill);
}
.badge-instock { background: #e0fbf7; color: #009688; border: 1px solid #b2f2eb; }
.badge-outofstock { background: #ffe3e3; color: var(--color-error); border: 1px solid #ffd0d0; }
.badge-category { background: #e0f2fe; color: var(--color-accent-teal); border: 1px solid #bae6fd; text-decoration: none; }
.badge-admin {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
  display: inline-flex;
  align-items: center;
}
.badge-customer {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
}
.clickable-category-badge {
  cursor: pointer;
  transition: var(--transition-fast);
}
.clickable-category-badge:hover {
  background: var(--color-accent-teal) !important;
  color: #ffffff !important;
  border-color: var(--color-accent-teal) !important;
}

.card-overlay-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 14px 12px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.85) 55%, rgba(255, 255, 255, 0) 100%);
  display: flex;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 6;
  pointer-events: none;
}
.premium-card:hover .card-overlay-actions,
.product-card:hover .card-overlay-actions,
.premium-card:focus-within .card-overlay-actions,
.product-card:focus-within .card-overlay-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Touch / coarse pointers: keep View always reachable */
@media (hover: none), (pointer: coarse) {
  .card-overlay-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0) 100%);
  }
}
.overlay-btn {
  flex: 1;
  max-width: 160px;
  padding: 9px 14px;
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: var(--transition-fast);
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.08);
  border: 1px solid transparent;
}
.overlay-btn-view {
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid #16a34a;
  color: var(--color-text-primary);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.overlay-btn-view:hover {
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid #15803d;
  color: #15803d;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22);
}
.overlay-btn-add {
  background: var(--color-accent-teal);
  color: #ffffff;
}
.overlay-btn-add:hover {
  background: var(--color-accent-teal-hover);
}

.product-card-info {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-brand {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.product-card-info h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.35;
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7rem;
}
.card-meta-specs {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
}
.card-meta-specs span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
}
.card-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-accent-gold-hover);
}

/* Why Choose Us Section */
.trust-factors-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 55px 30px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.trust-item {
  background: var(--color-bg-surface);
  border: 1px solid #e2ecf5;
  padding: 35px 30px;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-premium);
  text-align: center;
  transition: var(--transition-smooth);
}
.trust-item:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 119, 182, 0.25);
  box-shadow: var(--shadow-hover);
}
.trust-icon {
  font-size: 2.5rem;
  color: var(--color-accent-teal);
  margin-bottom: 20px;
}
.trust-item h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.trust-item p {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
}

/* Testimonials Section (Clean Bright blue) */
.testimonials-section {
  background: #eef5fa;
  padding: 55px 30px;
  border-top: 1px solid rgba(0, 119, 182, 0.05);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}
.testimonial-card {
  background: #ffffff;
  border: 1px solid #e2ecf5;
  border-radius: var(--border-radius-md);
  padding: 35px 25px;
  text-align: center;
  box-shadow: var(--shadow-premium);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(0, 119, 182, 0.15);
}
.testimonial-card .stars {
  color: var(--color-accent-gold-hover);
  margin-bottom: 20px;
  font-size: 1.1rem;
}
.testimonial-card p {
  font-size: 0.96rem;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 25px;
  color: var(--color-text-primary);
  font-weight: 500;
  flex-grow: 1;
}
.client-info h5 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.client-info span {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* Newsletter Section */
.newsletter-section {
  padding: 50px 30px;
  max-width: 1400px;
  margin: 0 auto;
}
.newsletter-card {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
  border-radius: var(--border-radius-md);
  padding: 45px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,119,182,0.2);
}
.newsletter-content {
  position: relative;
  z-index: 5;
  max-width: 600px;
  margin: 0 auto;
}
.newsletter-content h3 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: #ffffff;
}
.newsletter-content p {
  color: #f0f9ff;
  font-size: 1.1rem;
  margin-bottom: 30px;
  opacity: 0.95;
}
.newsletter-form {
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.25);
  padding: 6px;
  border-radius: var(--border-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}
.newsletter-form input {
  flex: 1;
  padding: 12px 22px;
  color: #ffffff;
  background: none;
  font-size: 1.05rem;
}
.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.newsletter-message {
  margin-top: 15px;
  font-weight: 600;
  font-size: 1rem;
}

/* ==========================================================================
   2. SHOP / CATALOG VIEW (GMS products.html style)
   ========================================================================== */

#view-shop.catalog-page {
  background: var(--color-bg-base);
  padding: 0;
}

#view-shop .catalog-layout {
  display: flex;
  gap: 0;
  align-items: stretch;
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-height: calc(100vh - var(--header-height));
}

#view-shop .catalog-nav.catalog-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: var(--header-height);
  align-self: flex-start;
  height: calc(100vh - var(--header-height));
  max-height: calc(100vh - var(--header-height));
  z-index: 20;
}

#view-shop .filter-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - var(--header-height));
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-radius: 0;
  overflow: hidden;
}

#view-shop .filter-panel-ticket {
  flex-shrink: 0;
  padding: 10px 16px 9px;
  background: linear-gradient(135deg, #0c4a6e, #075985);
  color: #fff;
  position: relative;
}

#view-shop .filter-panel-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}

#view-shop .filter-panel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 10px;
  flex-shrink: 0;
}
#view-shop .filter-panel-meta-text {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
}
#view-shop .js-filter-active-count {
  font-weight: 700;
  color: var(--color-accent-teal);
}
#view-shop .filter-panel-clear {
  border: none;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ea580c;
  cursor: pointer;
  padding: 2px 4px;
}
#view-shop .filter-panel-clear:hover { text-decoration: underline; }

#view-shop .filter-panel-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 14px 20px;
  min-height: 0;
}

#view-shop .filter-panel-group {
  display: block;
  margin: 0 0 4px;
  padding: 0 0 8px;
  border-bottom: 1px solid #eef2f7;
}

#view-shop .filter-panel-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#view-shop .filter-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 12px 4px;
  min-height: 42px;
  box-sizing: border-box;
}

#view-shop .filter-acc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

#view-shop .filter-stub-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-accent-teal);
  flex-shrink: 0;
}

#view-shop .filter-acc-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: #0c4a6e;
  line-height: 1.3;
}

#view-shop .filter-acc-chev {
  color: #64748b;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

#view-shop .filter-acc-trigger.is-open .filter-acc-chev {
  transform: rotate(180deg);
}

/* Simple accordion ? no grid 0fr/1fr (that was collapsing open panels) */
#view-shop .filter-acc-panel {
  display: none;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  margin: 0;
}

#view-shop .filter-acc-panel.is-open {
  display: block;
  height: auto;
  max-height: none;
  overflow: visible;
}

#view-shop .filter-acc-panel > * {
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
}

#view-shop .filter-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 4px 10px;
}

#view-shop .brands-empty-msg {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 8px 10px;
}

/* Category + Brand submenu lists */
#view-shop .shop-cat-nav,
#view-shop .shop-brand-nav,
#view-shop #brands-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 2px 12px 10px;
  margin: 0 0 0 6px;
  border-left: 2px solid rgba(0, 119, 182, 0.18);
  box-sizing: border-box;
  max-height: none;
  overflow: visible;
}

#view-shop .shop-brand-nav,
#view-shop #brands-checkbox-list.shop-brand-nav {
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
}

#view-shop .shop-cat-item,
#view-shop .shop-brand-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease;
}

#view-shop .shop-cat-item i,
#view-shop .shop-brand-item i {
  font-size: 0.95rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

#view-shop .shop-cat-item span,
#view-shop .shop-brand-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-shop .shop-cat-item:hover,
#view-shop .shop-brand-item:hover {
  color: #0f172a;
  background-color: #f1f5f9;
}

#view-shop .shop-cat-item.active,
#view-shop .shop-brand-item.active {
  background-color: var(--color-accent-teal);
  color: #ffffff;
  font-weight: 600;
}

#view-shop .shop-cat-item.active:hover,
#view-shop .shop-brand-item.active:hover {
  background-color: var(--color-accent-teal-hover);
  color: #ffffff;
}

#view-shop .radio-option,
#view-shop .checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: #475569;
  padding: 6px 2px;
  min-height: 34px;
  line-height: 1.35;
  box-sizing: border-box;
}

#view-shop .radio-option label,
#view-shop .checkbox-option label {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  line-height: 1.35;
}

#view-shop .radio-option input,
#view-shop .checkbox-option input {
  accent-color: var(--color-accent-teal);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
}

#view-shop .radio-option input:checked + label,
#view-shop .checkbox-option input:checked + label {
  color: #0c4a6e;
  font-weight: 600;
}

#view-shop .price-slider-wrapper {
  padding: 4px 4px 12px;
  box-sizing: border-box;
}

#view-shop .price-slider-wrapper input[type="range"] {
  display: block;
  width: 100%;
  accent-color: var(--color-accent-teal);
  margin: 6px 0 10px;
}

#view-shop .price-quick-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

#view-shop .price-quick-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #486581;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s ease;
}

#view-shop .price-quick-btn:hover {
  border-color: var(--color-accent-teal);
  color: var(--color-accent-teal);
  background: #f0f7fc;
}

#view-shop .price-range-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.3;
}

#view-shop .hidden-filter {
  display: none !important;
}

#view-shop .param-filter-item {
  margin-bottom: 12px;
  padding: 0 4px;
}

#view-shop .param-filter-item:last-child {
  margin-bottom: 8px;
}

#view-shop .param-filter-item label {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  line-height: 1.3;
}

#view-shop .param-filter-item select,
#view-shop .param-filter-item input[type="number"] {
  width: 100%;
  max-width: 100%;
  border: 1px solid #cbd5e1;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  font-size: 0.86rem;
}

#view-shop .range-inputs-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

#view-shop .range-inputs-group span {
  flex-shrink: 0;
  color: #94a3b8;
  font-size: 0.8rem;
}

#view-shop .range-inputs-group input {
  flex: 1;
  min-width: 0;
  width: auto;
}

#view-shop .filter-litre-bands {
  padding: 0;
  gap: 4px;
}

#view-shop .catalog-main {
  flex: 1;
  min-width: 0;
  padding: 24px 28px 48px;
  background: #f0f9ff;
}

#view-shop .catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 64px;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(12, 74, 110, 0.06);
}

#view-shop .catalog-toolbar-start {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
#view-shop .catalog-toolbar-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#view-shop .catalog-breadcrumb-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
  color: #64748b;
}
#view-shop .catalog-breadcrumb-bar .breadcrumb-link {
  color: var(--color-accent-teal);
  font-weight: 500;
}
#view-shop .catalog-breadcrumb-bar .breadcrumb-current {
  color: #0c4a6e;
  font-weight: 600;
}
#view-shop .catalog-breadcrumb-bar .breadcrumb-sep {
  color: #94a3b8;
  font-size: 0.7rem;
}

#view-shop .catalog-page-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #0c4a6e;
  margin: 0;
  line-height: 1.2;
}
#view-shop .catalog-page-tagline {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}
#view-shop .catalog-search-inline {
  position: relative;
  margin-top: 6px;
  max-width: 360px;
}
#view-shop .catalog-search-inline i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.85rem;
}
#view-shop .catalog-search-inline input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 0.88rem;
  background: #fff;
}
#view-shop .result-count {
  margin: 4px 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
}

#view-shop .toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
#view-shop .sort-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
}
#view-shop .sort-label select {
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font-size: 0.8rem;
  cursor: pointer;
}
#view-shop .view-toggle {
  display: flex;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}
#view-shop .view-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: #fff;
  cursor: pointer;
  color: #64748b;
  font-size: 0.8rem;
}
#view-shop .view-btn.active,
#view-shop .view-btn:hover {
  background: #ecfeff;
  color: var(--color-accent-teal);
}

#view-shop .btn-mobile-filter {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0c4a6e;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

/* Product grid ? premium cards (same as homepage showcase) */
#view-shop .fp-grid.fp-grid--catalog,
#view-shop .product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  margin-bottom: 28px;
  padding: 10px 0 0;
}
@media (min-width: 768px) {
  #view-shop .fp-grid.fp-grid--catalog:not(.list-view),
  #view-shop .product-grid:not(.list-view) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

#view-shop .premium-card,
#view-wishlist .wishlist-grid .premium-card {
  height: 100%;
  min-width: 0;
  border: var(--portal-panel-border);
  border-radius: var(--portal-panel-radius);
  background: var(--portal-panel-bg-soft);
  box-shadow: var(--portal-panel-shadow);
}
#view-shop .premium-card:hover,
#view-wishlist .wishlist-grid .premium-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 119, 182, 0.32);
  box-shadow: 0 16px 36px rgba(12, 74, 110, 0.12);
}
#view-shop .premium-card-image,
#view-wishlist .wishlist-grid .premium-card-image {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(0, 180, 216, 0.1), transparent 60%),
    linear-gradient(180deg, #f0f9ff 0%, #e8f4fa 100%);
}
#view-shop .premium-card-image img,
#view-wishlist .wishlist-grid .premium-card-image img {
  object-fit: contain;
  object-position: center center;
}
#view-shop .premium-card:hover .card-overlay-actions,
#view-shop .premium-card:focus-within .card-overlay-actions,
#view-wishlist .wishlist-grid .premium-card:hover .card-overlay-actions,
#view-wishlist .wishlist-grid .premium-card:focus-within .card-overlay-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#view-shop .premium-badge-category {
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: var(--color-accent-teal);
}
#view-shop .premium-card-content {
  padding: 16px 18px 18px;
}
#view-shop .premium-card-content h4 {
  font-size: 1rem;
  height: auto;
  min-height: 2.6rem;
  -webkit-line-clamp: 2;
}
#view-shop .premium-card-desc {
  height: auto;
  min-height: 2.4rem;
  -webkit-line-clamp: 2;
  margin-bottom: 12px;
}
#view-shop .premium-card-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
}
#view-shop .premium-card-price {
  font-size: 1.15rem;
  color: var(--color-accent-gold-hover);
}
#view-shop .premium-cart-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-teal);
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
#view-shop .premium-cart-btn:hover:not(:disabled) {
  background: var(--color-accent-teal-hover);
  transform: scale(1.06);
}
#view-shop .premium-cart-btn--disabled {
  background: #94a3b8;
  cursor: not-allowed;
  opacity: 0.7;
}
#view-shop .fp-stock-badge {
  position: absolute;
  top: 12px;
  right: 56px;
  z-index: 5;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* List view */
#view-shop .fp-grid.list-view,
#view-shop .product-grid.list-view {
  grid-template-columns: 1fr;
}
#view-shop .fp-grid.list-view .premium-card,
#view-shop .product-grid.list-view .premium-card {
  flex-direction: row;
  align-items: stretch;
  min-height: 180px;
}
#view-shop .fp-grid.list-view .premium-card-image,
#view-shop .product-grid.list-view .premium-card-image {
  width: 200px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  min-height: 180px;
  align-self: stretch;
}
#view-shop .fp-grid.list-view .premium-card-content,
#view-shop .product-grid.list-view .premium-card-content {
  flex: 1;
  min-width: 0;
  justify-content: center;
}
#view-shop .fp-grid.list-view .premium-card-content h4,
#view-shop .product-grid.list-view .premium-card-content h4 {
  min-height: 0;
  -webkit-line-clamp: 1;
}

#view-shop .no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
}
#view-shop .no-results i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  color: #94a3b8;
}

/* Pagination */
#view-shop .pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
#view-shop .pagination-info {
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748b;
}
#view-shop .pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
#view-shop .pagination-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
}
#view-shop .pagination-btn:hover:not(:disabled) {
  background: #ecfeff;
  border-color: var(--color-accent-teal);
  color: var(--color-accent-teal);
}
#view-shop .pagination-btn.active {
  background: var(--color-accent-teal);
  border-color: var(--color-accent-teal);
  color: #fff;
}
#view-shop .pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile filter sheet */
#view-shop .mobile-filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1400;
  visibility: hidden;
  transition: background 0.25s ease, visibility 0.25s ease;
}
#view-shop .mobile-filter-overlay.open {
  visibility: visible;
  background: rgba(0, 0, 0, 0.45);
}
#view-shop .mobile-filter-sheet {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 92vw);
  background: #fff;
  z-index: 1500;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}
#view-shop .mobile-filter-sheet.open {
  transform: translateX(0);
}
#view-shop .mobile-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
#view-shop .mobile-filter-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0c4a6e;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
#view-shop .mobile-filter-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#view-shop .mobile-filter-body .filter-panel {
  border: none;
  border-radius: 0;
  max-height: none;
  height: 100%;
}
#view-shop .drawer-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f1f5f9;
  border-radius: 50%;
  cursor: pointer;
  color: #475569;
}

@media (max-width: 991px) {
  #view-shop .catalog-nav.catalog-sidebar {
    display: none;
  }
  #view-shop .btn-mobile-filter {
    display: inline-flex;
  }
  #view-shop .catalog-main {
    padding: 16px 14px 40px;
  }
  #view-shop .catalog-toolbar {
    align-items: flex-start;
  }
  #view-shop .toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  #view-shop .fp-grid.list-view .premium-card,
  #view-shop .product-grid.list-view .premium-card {
    flex-direction: column;
  }
  #view-shop .fp-grid.list-view .premium-card-image,
  #view-shop .product-grid.list-view .premium-card-image {
    width: 100%;
    min-height: 180px;
  }
  #view-shop .catalog-page-title {
    font-size: 1.2rem;
  }
  #view-shop .catalog-page-tagline {
    display: none;
  }
}
.page-num-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ==========================================================================
   3. ABOUT US VIEW
   ========================================================================== */
.about-hero {
  height: 380px;
  background-image: url('../assets/showroom/3.png');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.about-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 37, 64, 0.72);
}
.about-hero-content {
  position: relative;
  z-index: 5;
  color: #ffffff;
}
.about-hero-content h1 {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 12px;
  text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.about-hero-content p {
  color: #9fe2ff;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 30px;
}
.about-row {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-bottom: 50px;
}
.about-text-column {
  flex: 1.2;
}
.about-text-column h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  margin-bottom: 15px;
  color: var(--color-text-primary);
}
.about-text-column p {
  margin-bottom: 20px;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
}
.accent-bar {
  width: 50px;
  height: 4px;
  background: var(--color-accent-teal);
  margin-bottom: 25px;
}
.about-image-column {
  flex: 0.8;
  padding: 45px;
  text-align: center;
}
.large-about-icon {
  font-size: 4.5rem;
  color: var(--color-accent-teal);
  margin-bottom: 25px;
}
.about-image-column h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin-bottom: 15px;
  color: var(--color-text-primary);
}
.about-image-column p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}

.our-experts-section {
  text-align: center;
  border-top: 1px solid #cbd5e1;
  padding-top: 80px;
}
.our-experts-section h3 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin-bottom: 12px;
  color: var(--color-text-primary);
}
.section-tagline {
  color: var(--color-text-secondary);
  margin-bottom: 55px;
  font-size: 1.1rem;
}
.experts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.expert-card {
  padding: 45px 30px;
  text-align: center;
  background: #ffffff;
}
.expert-avatar {
  width: 76px;
  height: 76px;
  border-radius: var(--border-radius-pill);
  background: #eef5fa;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-accent-teal);
}
.expert-card h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.expert-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-gold-hover);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: block;
  margin-bottom: 15px;
}
.expert-card p {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
}



/* Showroom Photo Gallery */
.showroom-gallery-block {
  background: #f8fafc;
  padding: 50px 40px;
  border-top: 1px solid rgba(0, 119, 182, 0.06);
}
.showroom-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  max-width: 1300px;
  margin: 0 auto;
}
.gallery-item {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-premium);
  transition: var(--transition-smooth);
}
.gallery-item.gallery-wide {
  grid-column: span 1;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-item:hover {
  box-shadow: var(--shadow-hover);
}
.gallery-item:hover img {
  transform: scale(1.04);
}
@media (max-width: 900px) {
  .showroom-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .showroom-gallery-block { padding: 50px 20px; }
}
@media (max-width: 560px) {
  .showroom-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* About store location card */
.about-location-block {
  background: linear-gradient(180deg, #eef5fa 0%, #f0f4f8 100%);
  padding: 56px 24px 72px;
  border-top: 1px solid rgba(0, 119, 182, 0.06);
}
.location-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.location-card {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  background: #ffffff;
  border: 1px solid rgba(0, 119, 182, 0.12);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(12, 74, 110, 0.1);
}
.location-left {
  padding: 44px 40px;
}
.location-small-title {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.18em;
  color: var(--color-accent-teal);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.location-small-title i {
  font-size: 1rem;
}
.location-left h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  color: var(--color-text-primary);
  margin: 0 0 14px;
  line-height: 1.2;
}
.location-intro {
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
  font-size: 0.98rem;
}
.location-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}
.location-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.location-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 119, 182, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-accent-teal);
  font-size: 1rem;
  flex-shrink: 0;
}
.location-text h3 {
  font-size: 0.95rem;
  margin: 0 0 2px;
  color: var(--color-text-primary);
}
.location-text span,
.location-text a {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  line-height: 1.45;
}
.location-text a:hover {
  color: var(--color-accent-teal);
}
.location-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--color-accent-teal);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.2s ease;
}
.location-btn:hover {
  transform: translateY(-3px);
  background: var(--color-accent-teal-hover);
  box-shadow: 0 12px 28px rgba(0, 119, 182, 0.28);
  color: #fff;
}
.location-right {
  position: relative;
  min-height: 520px;
  background: #0c4a6e;
}
.location-right iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  min-height: 520px;
}
.location-overlay {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: rgba(10, 37, 64, 0.82);
  backdrop-filter: blur(16px);
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}
.location-overlay h3 {
  font-size: 1.2rem;
  margin: 0 0 8px;
  font-family: var(--font-display);
}
.location-overlay p {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin: 0 0 14px;
  font-size: 0.9rem;
}
.location-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--color-accent-orange);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: transform 0.25s ease, background 0.2s ease;
}
.location-overlay a:hover {
  transform: translateY(-2px);
  background: #ea580c;
  color: #fff;
}
@media (max-width: 900px) {
  .location-card {
    grid-template-columns: 1fr;
  }
  .location-right,
  .location-right iframe {
    min-height: 380px;
  }
  .location-left {
    padding: 32px 24px;
  }
}

/* About + Contact Merged Block (legacy) */
.about-contact-block {
  background: #eef5fa;
  padding: 50px 40px;
  border-top: 1px solid rgba(0, 119, 182, 0.06);
}
.about-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .about-contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .about-contact-grid { grid-template-columns: 1fr; }
  .about-contact-block { padding: 50px 20px; }
}
.about-contact-card {
  background: #ffffff;
  border: 1px solid #e2ecf5;
  border-radius: var(--border-radius-md);
  padding: 35px 25px;
  text-align: center;
  box-shadow: var(--shadow-premium);
  transition: var(--transition-smooth);
}
.about-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(0, 119, 182, 0.2);
}
.about-contact-card .method-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0077b6, #0096c7);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
}
.about-contact-card h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.about-contact-card p {
  font-size: 0.92rem;
  color: var(--color-accent-teal);
  font-weight: 600;
  margin-bottom: 6px;
}
.about-contact-card small {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   4. CONTACT & HELP VIEW (Legacy - kept for reference)
   ========================================================================== */
.contact-header {
  background: linear-gradient(180deg, #eef5fa 0%, var(--color-bg-base) 100%);
  padding: 25px 30px;
  border-bottom: 1px solid rgba(0, 119, 182, 0.05);
}
.contact-header-container {
  max-width: 1200px;
  margin: 0 auto;
}
.contact-header h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.contact-header p {
  color: var(--color-text-secondary);
  font-size: 1rem;
}

.contact-main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 30px 60px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
}

.contact-details {
  padding: 40px;
  background: #ffffff;
}
.contact-details h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin-bottom: 30px;
  color: var(--color-text-primary);
}
.contact-method {
  display: flex;
  gap: 18px;
  margin-bottom: 30px;
}
.method-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-sm);
  background: rgba(0, 119, 182, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-teal);
  font-size: 1.25rem;
  box-shadow: 0 4px 10px rgba(0,119,182,0.06);
}
.method-body h5 {
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--color-text-primary);
}
.method-body p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}

.showroom-hours {
  border-top: 1px solid #cbd5e1;
  margin-top: 35px;
  padding-top: 25px;
}
.showroom-hours h5 {
  font-size: 1.05rem;
  margin-bottom: 15px;
  color: var(--color-text-primary);
}
.hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  font-weight: 500;
}

/* Custom Interactive Style Map Mockup (Brighter colors) */
.custom-map-block {
  height: 190px;
  background: #eef2f6;
  border-radius: var(--border-radius-sm);
  margin-top: 35px;
  border: 1px solid #cbd5e1;
  position: relative;
  overflow: hidden;
}
.map-grid-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(rgba(0, 119, 182, 0.08) 1px, transparent 0),
    radial-gradient(rgba(0, 119, 182, 0.08) 1px, transparent 0);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.map-ping {
  position: absolute;
  top: 55%;
  left: 45%;
  width: 14px;
  height: 14px;
  background: var(--color-accent-teal);
  border-radius: var(--border-radius-pill);
  box-shadow: 0 0 0 10px rgba(0, 119, 182, 0.25);
  animation: mapPulse 2s infinite;
}
.map-bubble {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid rgba(0,119,182,0.15);
  padding: 8px 15px;
  border-radius: var(--border-radius-sm);
  font-size: 0.78rem;
  box-shadow: 0 5px 15px rgba(10,37,64,0.08);
  text-align: center;
  z-index: 5;
}
.map-bubble strong { display: block; color: var(--color-accent-teal); }

@keyframes mapPulse {
  0% { box-shadow: 0 0 0 0px rgba(0, 119, 182, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(0, 119, 182, 0); }
  100% { box-shadow: 0 0 0 0px rgba(0, 119, 182, 0); }
}

.contact-form-wrapper {
  padding: 40px;
  background: #ffffff;
}
.contact-form-wrapper h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin-bottom: 8px;
  color: var(--color-text-primary);
}
.contact-form-wrapper p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin-bottom: 25px;
}

/* Success Form Alert */
.form-success-alert {
  display: none;
  background: #e6f9f6;
  border: 1px solid #b2f2eb;
  border-radius: var(--border-radius-md);
  padding: 20px;
  gap: 15px;
  align-items: flex-start;
  margin-top: 25px;
}
.form-success-alert.active {
  display: flex;
}
.form-success-alert i {
  font-size: 2rem;
  color: #009688;
}
.form-success-alert h5 {
  font-size: 1.1rem;
  margin-bottom: 4px;
  color: var(--color-text-primary);
}
.form-success-alert p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* ==========================================================================
   5. CART PAGE (#cart) ? supermarket-style full page
   ========================================================================== */
a.header-basket-btn {
  text-decoration: none;
}
a.header-basket-btn:visited {
  color: var(--color-text-primary);
}
a.action-btn#mobile-cart-trigger {
  text-decoration: none;
  display: flex;
}

#view-cart.cart-page,
#view-wishlist.wishlist-page {
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  background: #f3f4f6;
  padding: 28px 0 60px;
  box-sizing: border-box;
}

.cart-page-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 30px;
  box-sizing: border-box;
}

.cart-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #64748b;
  margin-bottom: 16px;
}
.cart-breadcrumb a {
  color: var(--color-accent-teal);
  text-decoration: none;
  font-weight: 600;
}
.cart-breadcrumb a:hover {
  text-decoration: underline;
}

.cart-page-header {
  margin-bottom: 22px;
}
.cart-page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 6px;
}
.cart-page-header p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.cart-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 28px;
  align-items: start;
  width: 100%;
}

/* Empty cart ? GMS-style centered single card */
.cart-page-inner.is-empty .cart-breadcrumb,
.cart-page-inner.is-empty .cart-page-header {
  display: none;
}

.cart-page-layout.is-empty {
  display: block;
  max-width: 920px;
  margin: 40px auto 0;
  width: 100%;
}

.cart-page-layout.is-empty .cart-page-main {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  background: #ffffff;
}

.cart-page-layout.is-empty .cart-items-container {
  min-height: 0;
  padding: 0;
}

.empty-cart-view {
  text-align: center;
  padding: 72px 32px 64px;
  max-width: 480px;
  margin: 0 auto;
}
.empty-cart-view .empty-cart-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 3.25rem;
  line-height: 1;
}
.empty-cart-view h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.empty-cart-view p {
  color: #64748b;
  margin: 0 0 28px;
  font-size: 1rem;
  line-height: 1.55;
}
.empty-cart-view .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 700;
}

.cart-page-main {
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(12, 74, 110, 0.06);
  overflow: hidden;
}

.cart-items-container {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 200px;
}

.cart-table-head {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 0.8fr 0.8fr minmax(140px, 1fr);
  gap: 12px;
  padding: 12px 22px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.cart-table-head span:last-child {
  text-align: right;
}

.cart-item-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 0.8fr 0.8fr minmax(140px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid #eef2f7;
  position: relative;
}
.cart-item-row:last-child {
  border-bottom: none;
}

.cart-item-product {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.cart-item-product img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: #f1f5f9;
  flex-shrink: 0;
}
.cart-item-info {
  min-width: 0;
}
.cart-item-info h5 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 4px;
  color: var(--color-text-primary);
}
.cart-item-brand {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: 700;
  margin-bottom: 2px;
  display: block;
}
.cart-item-type {
  font-size: 0.78rem;
  color: #94a3b8;
}
.cart-item-unit-price,
.cart-item-line-total {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}
.cart-item-line-total {
  color: var(--color-accent-gold-hover);
}
.cart-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
}
.cart-qty-pill {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  background: #2f5233;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.cart-qty-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #2f5233;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}
.cart-qty-btn:hover {
  background: #3d6b42;
}
.cart-qty-value {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1e293b;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 4px;
  box-sizing: border-box;
}
.cart-item-remove-btn {
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.cart-item-remove-btn:hover {
  color: #475569;
}

.cart-page-summary {
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 8px 24px rgba(12, 74, 110, 0.06);
  position: sticky;
  top: calc(var(--header-height) + 16px);
}
.cart-page-summary h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--color-text-primary);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.summary-row.total-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.cart-checkout-actions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-checkout-actions .btn-full {
  width: 100%;
  text-align: center;
  text-decoration: none;
}
.cart-security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 4px;
}

/* ===== Cart promo / coupon code ===== */
.cart-promo {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}
.cart-promo-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f766e;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cart-promo-title[hidden] {
  display: none;
}
.cart-promo-title i {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}
.cart-promo-title[aria-expanded="true"] i {
  transform: rotate(180deg);
}
.cart-promo-title:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 4px;
  border-radius: 2px;
}
.cart-promo-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
.cart-promo-form[hidden] {
  display: none;
}
#cart-promo-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid #15803d;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f172a;
  background: #fff;
}
#cart-promo-input::placeholder {
  color: #9ca3af;
  font-weight: 500;
  letter-spacing: 0.06em;
}
#cart-promo-input:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);
}
.cart-promo-apply {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 1.5px solid #15803d;
  border-radius: 10px;
  background: #fff;
  color: #15803d;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-promo-apply:hover:not(:disabled) {
  background: #15803d;
  color: #fff;
}
.cart-promo-apply:disabled {
  opacity: 0.6;
  cursor: progress;
}
.cart-promo-msg {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
.cart-promo-msg[hidden] {
  display: none;
}
.cart-promo-msg.is-error {
  color: #be123c;
}
.cart-promo-msg.is-success {
  color: #047857;
}
.cart-promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
}
.cart-promo-applied[hidden] {
  display: none;
}
.cart-promo-applied-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #065f46;
  letter-spacing: 0.04em;
}
.cart-promo-remove {
  border: none;
  background: none;
  color: #be123c;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* ===== Automatic order-value discount ===== */
.summary-row[hidden],
.summary-line[hidden],
.cart-discount-note[hidden],
.cart-discount-progress[hidden] {
  display: none !important;
}
.summary-row--discount,
.summary-line--discount {
  color: #047857;
  font-weight: 700;
}
.cart-discount-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed #7dd3fc;
  background: #f0f9ff;
}
.cart-discount-note > i {
  color: #0284c7;
  font-size: 1rem;
  margin-top: 2px;
}
.cart-discount-note.is-unlocked {
  border: 1px solid #6ee7b7;
  background: #ecfdf5;
}
.cart-discount-note.is-unlocked > i {
  color: #047857;
}
.cart-discount-note-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cart-discount-note-body strong {
  font-size: 0.9rem;
  color: var(--color-text-primary);
}
.cart-discount-note-body span {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.4;
}
.cart-discount-progress {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: #dbeafe;
  overflow: hidden;
}
.cart-discount-progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0284c7, #06b6d4);
  transition: width 0.25s ease;
}

@media (max-width: 900px) {
  .cart-page-layout {
    grid-template-columns: 1fr;
  }
  .cart-page-summary {
    position: static;
  }
  .cart-table-head {
    display: none;
  }
  .cart-item-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product actions"
      "price price"
      "total total";
    gap: 10px 12px;
  }
  .cart-item-product { grid-area: product; }
  .cart-item-actions { grid-area: actions; justify-self: end; align-self: start; }
  .cart-item-unit-price { grid-area: price; }
  .cart-item-line-total { grid-area: total; justify-self: start; }
  .cart-page-inner {
    padding: 0 16px;
  }
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (Oasis-style)
   ========================================================================== */

#view-product.product-page {
  width: 100%;
  min-height: auto;
  background: #f5f7fa;
  padding: 24px 0 48px;
  box-sizing: border-box;
  flex: 1;
}

.product-page-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.product-page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  color: #94a3b8;
  margin-bottom: 20px;
}
.product-page-breadcrumb .breadcrumb-sep {
  color: #cbd5e1;
  font-size: 0.75rem;
}
.product-page-breadcrumb a {
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
}
.product-page-breadcrumb a:hover {
  color: var(--color-accent-teal);
}
.product-page-breadcrumb #product-page-crumb-name {
  color: #334155;
  font-weight: 600;
}

.product-page-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr) minmax(240px, 280px);
  gap: 28px 32px;
  align-items: start;
}

.pp-gallery {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.pp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-thumb {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.pp-thumb.active,
.pp-thumb:hover {
  border-color: var(--color-accent-teal);
}
.pp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-main-image {
  position: relative;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(0, 180, 216, 0.1), transparent 60%),
    linear-gradient(180deg, #f0f9ff 0%, #eef5f9 100%);
  border-radius: 10px;
  border: 1px solid rgba(0, 119, 182, 0.14);
  min-height: 320px;
  height: clamp(320px, 42vw, 440px);
  display: block;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}
.pp-main-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 16px;
  box-sizing: border-box;
}
.pp-zoom-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.pp-info h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.25;
}

.pp-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.pp-stars {
  color: #f5a623;
  font-size: 0.82rem;
  letter-spacing: 1px;
}
.pp-reviews {
  font-size: 0.88rem;
  color: #94a3b8;
}

.pp-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
}
.pp-price {
  font-size: 1.65rem;
  font-weight: 800;
  color: #22c55e;
}
.pp-price-old {
  font-size: 1.05rem;
  color: #94a3b8;
  text-decoration: line-through;
}
.pp-off-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #16a34a;
  background: #dcfce7;
  border-radius: 4px;
  padding: 3px 7px;
}

.pp-desc {
  color: #64748b;
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0 0 14px;
}

.pp-availability {
  margin: 0 0 18px;
  font-size: 0.94rem;
  color: #64748b;
}
.pp-availability .in-stock { color: #16a34a; font-weight: 700; }
.pp-availability .out-of-stock { color: #dc2626; font-weight: 700; }

.pp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.pp-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  height: 44px;
}
.pp-qty input {
  width: 52px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
  outline: none;
}
.pp-qty-spinners {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e5e7eb;
}
.pp-qty-spinners button {
  width: 28px;
  flex: 1;
  border: none;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  font-size: 0.65rem;
  line-height: 1;
  padding: 0;
}
.pp-qty-spinners button:first-child {
  border-bottom: 1px solid #e5e7eb;
}
.pp-qty-spinners button:hover {
  background: #e0f2fe;
  color: var(--color-accent-teal);
}
.pp-btn-cart {
  min-height: 44px;
  padding: 0 20px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  background: #16a34a !important;
  border-color: #16a34a !important;
}
.pp-btn-cart:hover:not(:disabled) {
  background: #15803d !important;
}
.pp-btn-buy {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  font-weight: 700;
  background: #0f766e;
  border: 1px solid #0f766e;
  color: #fff;
  cursor: pointer;
}
.pp-btn-buy:hover:not(:disabled) {
  background: #0d9488;
}
.pp-btn-buy:disabled,
.pp-btn-cart:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pp-wishlist-btn {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.pp-wishlist-btn:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}
.pp-wishlist-btn.is-active {
  color: #ef4444;
  border-color: #fecaca;
  background: #fef2f2;
}
.pp-wishlist-btn.is-active i {
  color: #ef4444;
}

/* Wishlist header + page */
.header-wishlist-btn.has-items i,
.header-wishlist-btn.has-items .header-action-label {
  color: #ef4444;
}
#mobile-wishlist-trigger.has-items i {
  color: #ef4444;
}
.wishlist-badge {
  background: #ef4444 !important;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.45) !important;
}

.wishlist-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Keep wishlist title visible even when empty (cart hides its header) */
#view-wishlist #wishlist-page-inner.is-empty .cart-breadcrumb,
#view-wishlist #wishlist-page-inner.is-empty .cart-page-header,
#view-wishlist #wishlist-page-inner.is-empty .wishlist-page-header {
  display: flex;
}

.wishlist-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 960px;
  align-items: stretch;
  margin: 0 auto 28px;
  padding: 10px 0 0;
}

#view-wishlist .wishlist-grid.fp-grid,
#view-wishlist .wishlist-grid.product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .wishlist-grid,
  #view-wishlist .wishlist-grid.fp-grid,
  #view-wishlist .wishlist-grid.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 980px;
  }
}

@media (max-width: 600px) {
  .wishlist-grid,
  #view-wishlist .wishlist-grid.fp-grid,
  #view-wishlist .wishlist-grid.product-grid {
    grid-template-columns: 1fr;
  }
}

#view-wishlist .wishlist-grid .premium-card,
#view-wishlist .wishlist-grid .product-card {
  height: 100%;
  flex-direction: column !important;
  min-height: 0;
}

#view-wishlist .wishlist-grid .premium-card-image {
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 4 / 3;
  align-self: stretch;
}

#view-wishlist .wishlist-grid .premium-card-content {
  flex: 1;
  min-width: 0;
}

/* Must beat product-grid auto-fill so empty state spans full width */
#view-wishlist #wishlist-page-inner.is-empty .wishlist-grid,
#wishlist-page-inner.is-empty .wishlist-grid,
.wishlist-page-inner.is-empty .wishlist-grid {
  display: block !important;
  width: 100%;
  max-width: none;
  grid-template-columns: none;
}

.wishlist-empty {
  box-sizing: border-box;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px);
  border-radius: var(--portal-panel-radius);
  border: var(--portal-panel-border);
  background: var(--portal-panel-bg);
  box-shadow: var(--portal-panel-shadow);
  animation: wishlistEmptyIn 0.55s ease both;
}
@keyframes wishlistEmptyIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.wishlist-empty-visual {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  color: #e11d48;
  font-size: 2.4rem;
}
.wishlist-empty-visual > i {
  position: relative;
  z-index: 2;
  animation: wishlistHeartPulse 2.4s ease-in-out infinite;
}
.wishlist-empty-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(225, 29, 72, 0.28);
  animation: wishlistRipple 2.4s ease-out infinite;
  pointer-events: none;
}
.wishlist-empty-ripple.delay {
  animation-delay: 1.2s;
}
@keyframes wishlistRipple {
  0% { transform: scale(0.55); opacity: 0.85; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes wishlistHeartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.wishlist-empty h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--portal-heading);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.wishlist-empty > p {
  max-width: 480px;
  margin: 0 auto 28px;
  color: var(--portal-body);
  font-size: 1.02rem;
  line-height: 1.55;
}

.wishlist-empty-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: left;
}
.wishlist-empty-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 119, 182, 0.1);
}
.wishlist-empty-step-num {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: var(--color-accent-teal);
  box-sizing: border-box;
}
.wishlist-empty-step-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.wishlist-empty-step-copy strong {
  display: block;
  font-size: 0.95rem;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.3;
}
.wishlist-empty-step-copy span {
  display: block;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

.wishlist-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}
.wishlist-empty-actions .btn {
  min-height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wishlist-empty-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.wishlist-empty-cats a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: #0c4a6e;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 119, 182, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wishlist-empty-cats a:hover {
  background: #fff;
  border-color: var(--color-accent-teal);
  color: var(--color-accent-teal);
}

@media (max-width: 760px) {
  .wishlist-empty-steps {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

.cart-item-stock-note {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #b45309;
}

.pp-meta {
  border-top: 1px solid #e8edf2;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: #64748b;
}
.pp-meta span { color: #64748b; }
.pp-meta strong { color: #334155; font-weight: 600; }
.pp-meta a {
  color: var(--color-accent-teal);
  text-decoration: none;
  font-weight: 600;
}
.pp-meta a:hover { text-decoration: underline; }

.pp-dims-block {
  margin: 10px 0 14px;
  max-width: 420px;
}
.pp-dims-block.hidden {
  display: none !important;
}
.pp-dims-block .sc-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5F7A83;
  margin: 0 0 6px;
}
.pp-dims-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.82rem;
  margin: 0;
}
.pp-dims-table th,
.pp-dims-table td {
  padding: 7px 8px;
  border: 1px solid rgba(14, 50, 69, 0.1);
  vertical-align: middle;
  line-height: 1.25;
}
.pp-dims-table th {
  width: 22%;
  text-align: left;
  font-weight: 700;
  color: #5F7A83;
  background: rgba(14, 50, 69, 0.03);
}
.pp-dims-table td {
  width: 28%;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  color: #0E3245;
}

.pp-aquarium-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}
.pp-aquarium-meta.hidden,
.pp-glass-options.hidden {
  display: none !important;
}
.pp-glass-options {
  margin: 0 0 16px;
}

.pp-details-section {
  margin: 28px 0 8px;
  padding: 22px 24px 20px;
  background: #fff;
  border: 1px solid rgba(0, 119, 182, 0.12);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(12, 74, 110, 0.05);
}
.pp-details-section .pp-details-tabs {
  margin-bottom: 16px;
}
.pp-details-section .pp-details-pane {
  display: none;
  flex: none !important;
  height: auto !important;
  min-height: 140px !important;
  max-height: none !important;
  overflow: visible !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 0;
}
.pp-details-section .pp-details-pane.active {
  display: block;
  animation: tabFadeIn 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.pp-details-section .pp-details-pane p {
  margin: 14px 16px;
  color: #475569;
  line-height: 1.65;
  font-size: 0.92rem;
}
.pp-details-section .specs-table {
  margin: 0;
  border: none;
}
.pp-details-section .specs-table td {
  padding: 10px 16px;
}

.product-page-sidebar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 14px;
  position: sticky;
  top: calc(var(--header-height) + 16px);
}
.product-page-sidebar h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  color: #0f172a;
}

.pp-related-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pp-related-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
}
.pp-related-item:last-child { border-bottom: none; }
.pp-related-item:hover .pp-related-name { color: var(--color-accent-teal); }
.pp-related-item img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
  background: #f1f5f9;
}
.pp-related-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.3;
}
.pp-related-prices {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.pp-related-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: #16a34a;
}
.pp-related-old {
  font-size: 0.78rem;
  color: #94a3b8;
  text-decoration: line-through;
}
.pp-related-stars {
  color: #f5a623;
  font-size: 0.68rem;
}

@media (max-width: 1100px) {
  .product-page-layout {
    grid-template-columns: minmax(240px, 1fr) minmax(0, 1.2fr);
  }
  .product-page-sidebar {
    grid-column: 1 / -1;
    position: static;
  }
}
@media (max-width: 800px) {
  .product-page-layout {
    grid-template-columns: 1fr;
  }
  .pp-gallery {
    grid-template-columns: 1fr;
  }
  .pp-thumbs {
    flex-direction: row;
  }
  .product-page-inner {
    padding: 0 16px;
  }
}

.product-related-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #e2e8f0;
}
.product-related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.product-related-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.product-related-view-all {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent-teal);
  text-decoration: none;
}
.product-related-view-all:hover {
  text-decoration: underline;
}

.product-related-scroll-outer {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.product-related-nav {
  flex-shrink: 0;
  align-self: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #dbeafe;
  background: #ffffff;
  color: var(--color-accent-teal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(12, 74, 110, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.product-related-nav:hover:not(:disabled) {
  background: #ecfeff;
  border-color: var(--color-accent-teal);
  transform: scale(1.05);
}
.product-related-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.product-related-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
  padding: 6px 2px 14px;
  flex: 1;
  min-width: 0;
}
.product-related-track::-webkit-scrollbar {
  height: 6px;
}
.product-related-track::-webkit-scrollbar-track {
  background: transparent;
}
.product-related-track::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.product-related-track::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.product-related-track .premium-card,
.product-related-track .product-card {
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  scroll-snap-align: start;
}

.product-related-empty {
  flex: 1 1 100%;
  text-align: center;
  color: #64748b;
  padding: 32px 16px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  margin: 0;
}

@media (max-width: 700px) {
  .product-related-nav {
    display: none;
  }
  .product-related-track .premium-card,
  .product-related-track .product-card {
    flex: 0 0 min(240px, 72vw);
    width: min(240px, 72vw);
    min-width: min(240px, 72vw);
    max-width: min(240px, 72vw);
  }
}

/* ==========================================================================
   END PRODUCT DETAIL PAGE
   ========================================================================== */

/* ==========================================================================
   6. PRODUCT DETAILS MODAL
   ========================================================================== */
.product-detail-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  align-items: stretch;
}
.detail-gallery-column {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.detail-main-image-container {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 280px;
  height: auto;
  max-height: 100%;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(0, 180, 216, 0.1), transparent 60%),
    linear-gradient(180deg, #f0f9ff 0%, #eef5f9 100%);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 119, 182, 0.14);
  display: block;
  padding: 0;
  box-sizing: border-box;
}
.detail-main-image-container img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 18px;
  box-sizing: border-box;
}

.detail-wishlist-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
}
.detail-wishlist-btn:hover {
  color: #ef4444;
  border-color: #fecaca;
  background: #fff;
  transform: scale(1.06);
}
.detail-wishlist-btn.is-active {
  color: #ef4444;
  border-color: #fecaca;
  background: #fef2f2;
}
.detail-wishlist-btn.is-active i {
  color: #ef4444;
}
.detail-wishlist-btn--inline {
  position: static;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  transform: none;
  box-shadow: none;
}
.detail-wishlist-btn--inline:hover {
  transform: none;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.detail-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.detail-badge-cat {
  background: #e0f2fe;
  color: var(--color-accent-teal);
  border: 1px solid #bae6fd;
}
.detail-badge-stock.in {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.detail-badge-stock.out {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.detail-info-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  gap: 0;
}
.detail-brand-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-accent-teal);
  letter-spacing: 2px;
  margin-bottom: 5px;
  flex-shrink: 0;
}
.detail-info-column h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.2vw, 1.95rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 10px;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.detail-price-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.detail-price-row .price-label {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-accent-gold-hover);
}
.stock-status-pill {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 5px 15px;
  border-radius: var(--border-radius-pill);
}
.stock-status-pill.in-stock { background: #e0fbf7; color: #009688; border: 1px solid #b2f2eb; }
.stock-status-pill.out-of-stock { background: #ffe3e3; color: var(--color-error); border: 1px solid #ffd0d0; }

/* Shared underline tabs (product modal, product page, admin customer view, editors) */
.detail-tabs,
.admin-view-tabs,
.product-editor-tabs {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  border-bottom: 1px solid #cbd5e1;
  margin-bottom: 12px;
  gap: 28px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.detail-tab-btn,
.admin-view-tab,
.product-editor-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 0 12px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  line-height: 1.25;
  transition: color 0.2s ease;
}
.detail-tab-btn:hover,
.admin-view-tab:hover,
.product-editor-tab:hover,
.detail-tab-btn.active,
.admin-view-tab.active,
.product-editor-tab.active {
  color: var(--color-accent-teal);
}
.detail-tab-btn.active::after,
.admin-view-tab.active::after,
.product-editor-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-accent-teal);
  border-radius: 2px 2px 0 0;
}

.detail-tab-pane {
  display: none;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  margin-bottom: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  scrollbar-gutter: stable;
}
.detail-tab-pane.active {
  display: block;
  flex: 1 1 auto;
  min-height: 72px;
  animation: tabFadeIn 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

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

.detail-tab-pane p {
  margin: 12px;
}

/* Specs Table */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  font-size: 0.84rem;
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  table-layout: fixed;
}
.detail-tab-pane .specs-table {
  border: none;
  border-radius: 0;
}
.specs-table tr {
  border-bottom: 1px solid #e2e8f0;
}
.specs-table tr:last-child {
  border-bottom: none;
}
.specs-table td {
  padding: 9px 12px;
  font-size: 0.84rem;
  line-height: 1.4;
  border-right: 1px solid #e2e8f0;
  vertical-align: top;
  word-break: break-word;
}
.specs-table td:last-child {
  border-right: none;
}
.specs-table td:first-child {
  font-weight: 700;
  color: var(--color-text-primary);
  width: 38%;
  white-space: normal;
  background: #f8fafc;
}

.detail-purchase-section {
  display: flex;
  gap: 12px;
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 14px;
  padding-bottom: 4px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 18%, #fff 100%);
}
.qty-selector-wrapper {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-pill);
  padding: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.qty-adjust {
  width: 38px;
  height: 38px;
  border-radius: var(--border-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: var(--transition-fast);
}
.qty-adjust:hover {
  background: #f1f5f9;
  color: var(--color-accent-teal);
}
.qty-selector-wrapper input {
  width: 44px;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
}

.flex-fill { flex: 1; }

.financing-promo-box {
  background: rgba(229, 169, 59, 0.12);
  border: 1px solid rgba(229, 169, 59, 0.25);
  border-radius: var(--border-radius-md);
  padding: 15px 22px;
  display: flex;
  gap: 15px;
  align-items: center;
}
.financing-promo-box i {
  font-size: 1.6rem;
  color: var(--color-accent-gold-hover);
}
.financing-promo-box strong { display: block; font-size: 0.95rem; margin-bottom: 3px; color: var(--color-text-primary); }
.financing-promo-box p { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 0; }

/* Related Products */
.detail-related-section {
  margin-top: 25px;
  border-top: 1px solid #cbd5e1;
  padding-top: 20px;
}
.detail-related-section h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 16px;
  color: var(--color-text-primary);
}
.related-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ==========================================================================
   7. CHECKOUT WIZARD MODAL
   ========================================================================== */
.wizard-steps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 40px;
  border-bottom: 1px solid #cbd5e1;
  background: #f8fafc;
}
.wizard-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: 0.45;
  transition: var(--transition-smooth);
}
.wizard-step-node.active {
  opacity: 1;
}
.step-num {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-pill);
  background: #ffffff;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}
.wizard-step-node.active .step-num {
  background: var(--color-accent-teal);
  border-color: var(--color-accent-teal);
  color: #ffffff;
}
.step-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-primary);
}
.wizard-step-line {
  flex: 1;
  height: 3px;
  background: #cbd5e1;
  margin: 0 10px;
  margin-bottom: 20px; /* Offset label spacing */
}

.checkout-modal-body {
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

/* In-page checkout (replaces modal) */
.checkout-page {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(0, 180, 216, 0.1), transparent 50%),
    linear-gradient(180deg, #f0f9ff 0%, #ffffff 55%);
  min-height: calc(100vh - var(--header-height));
}
.checkout-page-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}
.checkout-page-header {
  margin: 8px 0 24px;
}
.checkout-page-header h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--portal-heading, #0c4a6e);
  margin: 0 0 6px;
}
.checkout-page-header p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
}
.checkout-page-panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 119, 182, 0.12);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(12, 74, 110, 0.08);
  padding: 22px 24px 28px;
}
.checkout-page-body {
  margin-top: 8px;
}
.checkout-page .wizard-steps-header {
  margin-bottom: 18px;
}
.checkout-page .close-checkout-wizard-btn {
  text-decoration: none;
}
.checkout-step-panel {
  display: none;
  flex-direction: column;
  flex: 1;
}
.checkout-step-panel.active {
  display: flex;
  animation: viewFadeIn 0.3s ease forwards;
}

.checkout-step-panel h4 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-bottom: 20px;
  color: var(--color-text-primary);
}

.checkout-cart-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-sm);
  padding: 15px 20px;
  margin-bottom: 20px;
  background: #ffffff;
}
.checkout-cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  color: var(--color-text-primary);
}
.checkout-cart-row:last-child { border-bottom: none; }

.checkout-totals-summary {
  background: #eef5fa;
  border-radius: var(--border-radius-sm);
  padding: 18px 24px;
  margin-bottom: 30px;
  border: 1px solid rgba(0,119,182,0.05);
}
.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
}
.summary-line.total {
  border-top: 1px solid #cbd5e1;
  padding-top: 12px;
  margin-top: 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.wizard-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  border-top: 1px solid #cbd5e1;
  padding-top: 25px;
}

/* Shipping choices card */
.shipping-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.ship-option-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-sm);
  padding: 18px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ship-option-card:hover {
  background: #f8fafc;
  border-color: var(--color-accent-teal);
}
.ship-option-card.active {
  border-color: var(--color-accent-teal);
  background: rgba(0, 119, 182, 0.05);
  box-shadow: 0 4px 12px rgba(0,119,182,0.05);
}
.ship-option-card input {
  position: absolute;
  top: 18px;
  right: 18px;
  accent-color: var(--color-accent-teal);
}
.ship-option-card label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.ship-option-card label strong { font-size: 1rem; margin-bottom: 4px; color: var(--color-text-primary); }
.ship-option-card label span { font-size: 0.8rem; color: var(--color-text-secondary); }
.ship-option-card label .ship-cost { font-weight: 800; margin-top: 12px; color: var(--color-accent-gold-hover); }

/* Payment Selector Tabs — same underline style as product / admin tabs */
.payment-tabs {
  display: flex;
  align-items: stretch;
  gap: 28px;
  margin-bottom: 20px;
  border-bottom: 1px solid #cbd5e1;
  overflow-x: auto;
}
.pay-tab-btn {
  appearance: none;
  flex: 0 0 auto;
  padding: 10px 0 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
  box-shadow: none;
}
.pay-tab-btn:hover,
.pay-tab-btn.active {
  color: var(--color-accent-teal);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.pay-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-accent-teal);
  border-radius: 2px 2px 0 0;
}
.payment-tab-content {
  display: none;
}
.payment-tab-content.active {
  display: block;
}

/* Stripe Online Payment Panel */
.stripe-online-payment-panel {
  background: #ffffff;
  border: 1px solid rgba(2, 128, 144, 0.18);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}
.stripe-payment-badge {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.stripe-lock-icon {
  width: 48px;
  height: 48px;
  background: rgba(2, 128, 144, 0.1);
  color: var(--color-accent-teal, #028090);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.stripe-badge-text h5 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 6px 0;
}
.stripe-badge-text p {
  font-size: 0.92rem;
  color: #4a5568;
  margin: 0;
  line-height: 1.5;
}
.accepted-cards-row {
  margin-bottom: 18px;
}
.accepted-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.card-icons-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.card-icon-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2d3748;
}
.card-icon-pill i {
  font-size: 1.15rem;
  color: var(--color-accent-teal, #028090);
}
.stripe-flow-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(2, 128, 144, 0.06);
  border: 1px solid rgba(2, 128, 144, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: #2c5282;
  line-height: 1.45;
}
.stripe-flow-notice i {
  color: var(--color-accent-teal, #028090);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* 3D Interactive Card Animation Styles */
.interactive-card-scene {
  perspective: 1000px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.credit-card-3d {
  width: 330px;
  height: 195px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 15px 35px rgba(10, 37, 64, 0.15);
  border-radius: 14px;
}
.credit-card-3d.flipped {
  transform: rotateY(180deg);
}

.card-side {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-front {
  background: linear-gradient(135deg, #028090 0%, #0077b6 100%);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
  z-index: 2;
  transform: rotateY(0deg);
}
.card-chip {
  width: 46px;
  height: 35px;
  background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
  border-radius: 6px;
}
.card-logo-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 1.9rem;
  opacity: 0.8;
}
.card-number-display {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.4rem;
  letter-spacing: 2px;
  word-spacing: 3px;
  margin: 15px 0 10px;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.4);
}
.card-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.card-holder-display, .card-expiry-display {
  display: flex;
  flex-direction: column;
}
.card-holder-display .label, .card-expiry-display .label {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.card-holder-display .val, .card-expiry-display .val {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
}

.card-back {
  background: linear-gradient(135deg, #0b2236 0%, #173f5f 100%);
  border: 1px solid rgba(255,255,255,0.1);
  transform: rotateY(180deg);
  padding: 22px 0;
}
.card-magnetic-strip {
  width: 100%;
  height: 42px;
  background: #000000;
  margin-top: 10px;
}
.card-signature-area {
  background: #ffffff;
  height: 40px;
  width: 82%;
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  color: #333333;
}
.signature-line {
  font-family: 'Brush Script MT', cursive, sans-serif;
  font-size: 1.05rem;
  opacity: 0.7;
}
.cvv-display {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 1px;
}

/* Novuna breakdown UI */
.novuna-promo {
  padding: 10px;
}
.novuna-promo h5 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--color-accent-teal);
  font-weight: 700;
}
.finance-breakdown {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-sm);
  padding: 18px 22px;
  margin: 15px 0 20px;
}
.finance-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
}
.finance-row:last-child { margin-bottom: 0; }
.finance-row.main-finance {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-accent-teal);
}
.finance-eligibility-notes {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.finance-eligibility-notes ul {
  padding-left: 20px;
  margin-top: 5px;
}

/* Step 4: Success View */
.success-screen {
  text-align: center;
  padding: 30px 10px;
}
.success-icon-wrapper {
  width: 84px;
  height: 84px;
  background: #e6f9f6;
  border-radius: var(--border-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.animated-checkmark {
  font-size: 4.2rem;
  color: #009688;
  animation: zoomCheck 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.success-screen h3 {
  font-family: var(--font-display);
  font-size: 1.95rem;
  margin-bottom: 8px;
  color: var(--color-text-primary);
}
.success-sub {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-bottom: 30px;
}
.order-details-card {
  padding: 22px 28px;
  margin-bottom: 30px;
  text-align: left;
  background: #ffffff;
  border: 1px solid #cbd5e1;
}
.order-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.order-summary-row:last-child { margin-bottom: 0; }

.success-tips-box {
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: var(--border-radius-sm);
  padding: 18px 22px;
  text-align: left;
  margin-bottom: 35px;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
}
.success-tips-box h5 {
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--color-accent-teal);
}

@keyframes zoomCheck {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   9. FISH COMPATIBILITY CALCULATOR
   ========================================================================== */
.modal-header-with-icon {
  text-align: center;
  padding: 30px 40px 15px;
  border-bottom: 1px solid #cbd5e1;
}
.icon-heading {
  font-size: 2.5rem;
  margin-bottom: 12px;
}
.modal-header-with-icon h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  margin-bottom: 6px;
  color: var(--color-text-primary);
  font-weight: 800;
}
.modal-header-with-icon p {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
}

.compatibility-modal-body {
  padding: 30px;
}
.compatibility-planner-layout {
  display: grid;
  grid-template-columns: 1.25fr 1.75fr;
  gap: 30px;
}

.comp-selectors-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 22px;
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
}
.comp-selectors-box select {
  width: 100%;
}
.vs-divider {
  text-align: center;
  margin: 15px 0;
  position: relative;
}
.vs-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #cbd5e1;
  z-index: 1;
}
.vs-divider span {
  position: relative;
  z-index: 2;
  background: #f8fafc;
  padding: 2px 12px;
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--color-accent-orange);
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-pill);
}

.comp-result-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: var(--border-radius-md);
  padding: 30px;
  border: 1px dashed #cbd5e1;
}
.comp-empty-result {
  text-align: center;
  color: var(--color-text-muted);
}
.comp-empty-result i {
  font-size: 3.5rem;
  margin-bottom: 15px;
}
.comp-empty-result p {
  font-size: 0.98rem;
  max-width: 250px;
  margin: 0 auto;
}

.comp-result-card {
  width: 100%;
  animation: viewFadeIn 0.4s ease;
}
.hidden-comp {
  display: none !important;
}

.comp-rating-header {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 16px 22px;
  border-radius: var(--border-radius-md);
  margin-bottom: 20px;
}
.comp-rating-header.comp-success { background: #e6f9f6; color: #009688; border: 1px solid #b2f2eb; }
.comp-rating-header.comp-warning { background: #fffcf0; color: #cc9d23; border: 1px solid #ffeeb2; }
.comp-rating-header.comp-danger { background: #ffe3e3; color: var(--color-error); border: 1px solid #ffd0d0; }

.rating-icon { font-size: 2rem; }
.comp-rating-header h4 { font-size: 1.15rem; font-weight: 800; margin-bottom: 2px; }
.comp-rating-header p { font-size: 0.88rem; color: var(--color-text-secondary); }

.comp-specs-overlay {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}
.overlap-param-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius-sm);
  padding: 12px 18px;
}
.param-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text-primary);
}
.overlap-stat-bars {
  display: flex;
  gap: 15px;
}
.stat-spec-bar {
  flex: 1;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  border: 1px solid #e2e8f0;
}
.fish-name-lbl {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
  font-weight: 500;
}
.fish-val-lbl {
  font-weight: 700;
}

.biologist-verdict-box {
  background: rgba(0, 119, 182, 0.05);
  border-left: 4px solid var(--color-accent-teal);
  padding: 15px 22px;
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}
.biologist-verdict-box h5 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 5px;
  color: var(--color-accent-teal);
}
.biologist-verdict-box p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   10. EDITORIAL FOOTER (Premium deep footer structure)
   ========================================================================== */
.app-footer {
  background: #091a27;              /* Grounded dark contrast footer */
  border-top: 2px solid var(--color-accent-teal);
  margin-top: auto;
  color: #ffffff;
}
.footer-top {
  padding: 40px 0 30px;
}
.footer-top .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 30px;
  align-items: start;
}

.footer-column h4 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 14px;
  line-height: 1.3;
}
.footer-logo .logo-img {
  height: 44px;
  width: auto;
  border-radius: var(--border-radius-pill);
  flex-shrink: 0;
}
.brand-column p {
  color: #a9c2d6;
  font-size: 0.88rem;
  margin-bottom: 0;
  line-height: 1.7;
}
.footer-socials {
  display: flex;
  gap: 12px;
}
.footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: var(--border-radius-pill);
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #a9c2d6;
}
.footer-socials a:hover {
  background: var(--color-accent-teal);
  color: #ffffff;
  transform: translateY(-2px);
}

.links-column ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.links-column a, .footer-link-btn {
  font-size: 0.92rem;
  color: #a9c2d6;
}
.links-column a:hover, .footer-link-btn:hover {
  color: var(--color-accent-teal-hover);
}
.footer-link-btn {
  text-align: left;
  cursor: pointer;
}

.contact-column p {
  font-size: 0.92rem;
  color: #a9c2d6;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-column p i {
  color: var(--color-accent-teal);
  font-size: 1.05rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 30px 0;
  background: #06131d;
}
.footer-bottom .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.82rem;
  color: #6e8fa8;
  text-align: center;
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a {
  color: #6e8fa8;
}
.footer-bottom-links a:hover {
  color: #ffffff;
}


/* ==========================================================================
   11. MEDIA QUERIES (RESPONSIVENESS)
   ========================================================================== */
@media (max-width: 1200px) {
  .footer-top .footer-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-row {
    flex-direction: column;
    text-align: center;
  }
  .about-text-column, .about-image-column {
    width: 100%;
  }
  .accent-bar {
    margin: 0 auto 25px;
  }
}

@media (max-width: 1150px) {
  .header-nav-bar {
    display: none;
  }
  :root {
    --header-height: var(--header-top-height);
  }
  .main-nav {
    display: none;
  }
  .header-actions {
    display: none;
  }
  .header-search {
    display: none;
  }
  .mobile-header-actions {
    display: flex;
  }
  .mobile-menu-btn {
    display: block;
  }
  .hero-slide h1 {
    font-size: 3rem;
  }
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .spotlight-carousel .product-card {
    flex: 0 0 calc(50% - 13px);
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .experts-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  #product-detail-modal .modal-container.large-modal {
    width: min(94vw, 680px);
    height: min(92vh, 900px);
    max-height: 92vh;
  }
  #customer-view-modal .modal-container.admin-view-modal,
  #order-view-modal .modal-container.admin-view-modal {
    width: min(94vw, 680px);
    height: min(92vh, 900px);
    max-height: 92vh;
  }
  .detail-main-image-container {
    min-height: 220px;
    height: clamp(220px, 32vw, 300px);
    flex: 0 0 auto;
  }
  .product-detail-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .detail-info-column {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .detail-tab-pane.active {
    min-height: 120px;
    max-height: 220px;
  }
  .detail-purchase-section {
    position: sticky;
    bottom: 0;
  }
  .related-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .compatibility-planner-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1150px) {
  .hero-slider {
    height: clamp(380px, 62vw, 480px);
    min-height: 380px;
  }
  .hero-slide {
    padding: 24px 20px;
  }
  .slide-badge {
    margin-bottom: 14px;
    padding: 5px 12px;
    letter-spacing: 2px;
  }
  .slide-title {
    margin-bottom: 12px;
  }
  .slide-subtitle {
    margin-bottom: 20px;
  }
  .slide-actions {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .hero-slider {
    width: calc(100% - 24px);
    min-height: 340px;
    border-radius: 16px;
  }
  .hero-slide h1,
  .slide-title {
    font-size: clamp(1.45rem, 7vw, 2.1rem);
  }
  .hero-slide p,
  .slide-subtitle {
    font-size: 0.95rem;
  }
  .categories-grid {
    grid-template-columns: 1fr;
  }
  .spotlight-carousel .product-card {
    flex: 0 0 100%;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  #view-shop .fp-grid.fp-grid--catalog:not(.list-view),
  #view-shop .product-grid:not(.list-view) {
    grid-template-columns: 1fr;
  }
  .related-products-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .shipping-options-grid {
    grid-template-columns: 1fr;
  }
  .wizard-steps-header {
    padding: 20px 10px;
  }
  .step-num {
    width: 28px;
    height: 28px;
  }
  .step-label {
    display: none;
  }
  .wizard-step-line {
    margin-bottom: 0;
  }
  .footer-top .footer-container {
    grid-template-columns: 1fr;
  }
  .footer-bottom .footer-container {
    flex-direction: column;
    text-align: center;
  }
  .credit-card-3d {
    width: 285px;
    height: 170px;
  }
  .card-number-display {
    font-size: 1.2rem;
  }
}

/* Modern Admin Dashboard Layout */
.admin-layout-wrapper {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: calc(100vh - var(--header-height));
  min-height: calc(100vh - var(--header-height));
  background-color: #f8fafc;
  font-family: 'Inter', sans-serif;
  color: #334155;
  position: relative;
  align-items: stretch;
  overflow: hidden;
}
#view-admin.app-view.active {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height));
}

/* Collapsible Sidebar */
.admin-sidebar {
  width: 260px;
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  z-index: 10;
  position: relative;
  height: 100%;
  align-self: stretch;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-sidebar.collapsed {
  width: 70px;
}
.sidebar-header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.sidebar-header .brand-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-accent-teal);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s;
}
.admin-sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 0;
}
.admin-sidebar.collapsed .sidebar-header .brand-title {
  display: none;
}
.btn-sidebar-collapse {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s;
}
.btn-sidebar-collapse:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 10px;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

/* All Products accordion group */
.admin-nav-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}
.admin-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 10px 8px;
  min-height: 40px;
  box-sizing: border-box;
  border-radius: 8px;
}
.admin-acc-trigger:hover {
  background: #f8fafc;
}
.admin-acc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.admin-acc-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-accent-teal);
  flex-shrink: 0;
}
.admin-acc-title {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: #0c4a6e;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-acc-chev {
  color: #64748b;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.admin-acc-trigger.is-open .admin-acc-chev {
  transform: rotate(180deg);
}
.admin-acc-panel {
  display: none;
}
.admin-acc-panel.is-open {
  display: block;
}
.admin-cat-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 2px 8px 8px;
  margin: 0 0 0 6px;
  border-left: 2px solid rgba(0, 119, 182, 0.18);
  box-sizing: border-box;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: #64748b;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.2s;
  cursor: pointer;
}
.admin-cat-nav .sidebar-item {
  font-size: 0.84rem;
  padding: 9px 10px;
}
.sidebar-item i {
  font-size: 1rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-item span {
  transition: opacity 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-sidebar.collapsed .admin-acc-title,
.admin-sidebar.collapsed .admin-acc-chev,
.admin-sidebar.collapsed .admin-acc-dot {
  display: none;
}
.admin-sidebar.collapsed .admin-acc-trigger {
  justify-content: center;
  padding: 12px 0;
}
.admin-sidebar.collapsed .admin-cat-nav {
  margin: 0;
  padding: 0;
  border-left: none;
}
.admin-sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 12px 0;
  gap: 0;
}
.admin-sidebar.collapsed .sidebar-item i {
  margin: 0;
}
.admin-sidebar.collapsed .sidebar-item span {
  opacity: 0;
  pointer-events: none;
  width: 0;
}
.sidebar-item:hover, .sidebar-item.active {
  color: #0f172a;
  background-color: #f1f5f9;
}
.sidebar-item.active {
  background-color: var(--color-accent-teal);
  color: #ffffff;
  font-weight: 600;
}
.sidebar-item.active:hover {
  color: #ffffff;
  background-color: var(--color-accent-teal);
}
.logout-item {
  margin-top: auto;
  border-top: 1px solid #f1f5f9;
  padding-top: 15px;
  color: #ef4444;
}
.logout-item:hover {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Main Content Panel */
.admin-main-panel {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 18px 20px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Tab Switching View Nodes */
.admin-tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
  min-width: 0;
  min-height: 0;
}
.admin-tab-content.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  gap: 14px;
  overflow: hidden;
}
/* Non-dashboard tabs: allow the panel content to scroll */
.admin-tab-content.active:not(#tab-dashboard) {
  overflow: auto;
}
/* Dashboard home: KPI + filters + catalog scroll together */
#tab-dashboard.admin-show-kpi.active {
  overflow: auto;
}
#tab-dashboard.admin-show-kpi .admin-table-card {
  flex: 0 0 auto;
}
#tab-dashboard.admin-show-kpi .admin-table-container {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

/* Category product tabs: control bar stays fixed, catalog scrolls beneath */
.admin-sticky-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  z-index: 4;
  overflow: visible;
  box-sizing: border-box;
}

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

/* Admin dashboard overview */
.admin-page-heading {
  padding: 28px 28px 12px;
}
.admin-page-heading h1 {
  margin: 3px 0 4px;
  color: #0f172a;
  font: 800 1.8rem var(--font-display);
}
.admin-page-heading p {
  margin: 0;
  color: #64748b;
}
.admin-eyebrow {
  color: var(--color-accent-teal);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* Stats Cards Grid ? product catalog totals */
#tab-dashboard:not(.admin-show-kpi) .admin-stats-grid {
  display: none;
}
.admin-stats-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
  padding-bottom: 4px;
}
.admin-stats-grid::-webkit-scrollbar {
  height: 6px;
}
.admin-stats-grid::-webkit-scrollbar-track {
  background: transparent;
}
.admin-stats-grid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.admin-stats-grid::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.admin-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s, box-shadow 0.2s;
  flex: 1 0 220px;
  min-width: 220px;
  scroll-snap-align: start;
}
.admin-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.stat-info {
  display: flex;
  flex-direction: column;
}
.stat-val {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}
.stat-lbl {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 3px;
  letter-spacing: 0.5px;
}
.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-accent-teal);
}
.stat-icon.gold { color: var(--color-accent-gold-hover); }
.stat-icon.red { color: #ef4444; }
.stat-icon.blue { color: #3b82f6; }

/* Dashboard overview ? fixed four-column KPI grid.
   Kept after the generic carousel rules so they cannot override this layout. */
#tab-overview .admin-stats-grid.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: auto;
  padding: 12px 28px 28px;
  overflow: visible;
  scroll-snap-type: none;
}
#tab-overview .admin-overview-grid .admin-stat-card {
  width: 100%;
  min-width: 0;
  min-height: 108px;
  padding: 18px 20px;
  flex: none;
  box-sizing: border-box;
  align-items: flex-start;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.09);
}
#tab-overview .admin-overview-grid .stat-info {
  gap: 5px;
}
#tab-overview .admin-overview-grid .stat-lbl {
  order: -1;
  margin: 0;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
#tab-overview .admin-overview-grid .stat-val {
  font-size: 1.65rem;
  margin-top: 2px;
}
#tab-overview .admin-overview-grid .stat-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 50%;
  background: #eaf8f2;
  color: #16835d;
}
#tab-overview .admin-overview-grid .stat-icon.gold {
  background: #fff7df;
  color: #c78b0a;
}
#tab-overview .admin-overview-grid .stat-icon.red {
  background: #fff0f0;
  color: #e5484d;
}
#tab-overview .admin-overview-grid .stat-icon.blue {
  background: #edf5ff;
  color: #3478c9;
}

/* Control panel bar for search and filters */
.admin-controls-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: flex-end;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.admin-filter-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}
.admin-search-wrapper {
  position: relative;
  min-width: 0;
  flex: 1.6 1 0;
}
.admin-search-field {
  position: relative;
}
.admin-search-wrapper input {
  width: 100%;
  height: 40px;
  padding: 8px 12px 8px 36px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  border-radius: 8px;
  font-size: 0.85rem;
  transition: all 0.2s;
  box-sizing: border-box;
}
.admin-search-wrapper input:focus {
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.1);
  outline: none;
}
.admin-search-wrapper i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 0.8rem;
  pointer-events: none;
}
.admin-filter-group {
  min-width: 0;
  width: 100%;
  flex: 1 1 0;
}
.admin-filter-group select {
  width: 100%;
  max-width: 100%;
  height: 40px;
  padding: 8px 28px 8px 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  border-radius: 8px;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.admin-filter-group select:focus {
  border-color: var(--color-accent-teal);
}
.admin-filter-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.admin-filter-reset-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
}
.admin-filter-reset-btn i {
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .admin-controls-card {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-search-wrapper,
  .admin-filter-group {
    flex: 1 1 auto;
    width: 100%;
  }
  .admin-filter-actions {
    align-self: flex-end;
  }
}

/* Premium Table layout */
.admin-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.admin-table-header {
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-table-header-start {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}
.admin-table-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
}
.admin-showing-count {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-accent-teal);
  white-space: nowrap;
}
.admin-table-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  width: 100%;
}
.admin-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
.admin-table th,
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.admin-table th {
  background-color: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  line-height: 1.2;
  position: sticky;
  top: 0;
  z-index: 2;
}
.admin-table td {
  font-size: 0.85rem;
  color: #334155;
}
.admin-table tr:hover td {
  background-color: #f8fafc;
}
.admin-table .col-image {
  width: 72px;
  text-align: center;
}
.admin-table .col-name {
  width: auto;
}
.admin-table .col-category {
  width: 100px;
}
.admin-table .col-price {
  width: 100px;
}
.admin-table .col-stock {
  width: 100px;
}
.admin-table .col-status {
  width: 84px;
}
.admin-table .col-updated {
  width: 108px;
}
.admin-table .col-actions {
  width: 268px;
  text-align: right;
}
.admin-table th.col-actions,
.admin-table td.col-actions {
  text-align: right;
  padding-right: 20px;
}
.admin-table-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 2px;
  display: block;
  margin: 0 auto;
}
.admin-prod-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.admin-prod-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.875rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  display: block;
}
.admin-prod-sku {
  font-size: 0.75rem;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.admin-prod-brand {
  font-size: 0.72rem;
  color: var(--color-accent-teal);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: block;
}
.admin-prod-price-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1.25;
}
.admin-price-original {
  font-weight: 700;
  color: #0f172a;
}
.admin-price-original.has-sale {
  text-decoration: line-through;
  color: #94a3b8;
  font-size: 0.8rem;
}
.admin-price-sale {
  color: #ef4444;
  font-weight: 700;
}
.admin-category-cell {
  text-transform: capitalize;
  color: #475569;
  font-weight: 500;
}
.admin-updated-cell {
  font-size: 0.8rem;
  color: #64748b;
  white-space: nowrap;
}
.badge-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-status.active {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}
.badge-status.draft {
  background: rgba(100, 116, 139, 0.15);
  color: #475569;
}
.admin-table .stock-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  border: none;
}
.admin-table .stock-status-pill.in-stock {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.admin-table .stock-status-pill.out-of-stock {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.admin-empty-cell {
  text-align: center;
  color: #94a3b8;
  padding: 30px !important;
}
.admin-order-customer {
  color: #0f172a;
}
.admin-orders-table .col-order-id { width: 120px; }
.admin-orders-table .col-order-customer { width: auto; }
.admin-orders-table .col-order-date { width: 110px; }
.admin-orders-table .col-order-total { width: 100px; }
.admin-orders-table .col-order-payment { width: 150px; }
.admin-orders-table .col-order-status { width: 110px; }
.admin-orders-table .col-actions { width: 240px; }
.admin-customers-table .col-actions { width: 16%; }

/* Admin order/customer view modals — fixed size like product detail modal */
#customer-view-modal .modal-container.admin-view-modal,
#order-view-modal .modal-container.admin-view-modal {
  width: min(1120px, 92vw);
  max-width: 1120px;
  height: min(860px, 92vh);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#customer-view-modal .modal-header-with-icon,
#order-view-modal .modal-header-with-icon {
  flex-shrink: 0;
}
.admin-view-modal .admin-view-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  max-height: none;
}
.admin-view-tabs {
  margin-bottom: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.admin-view-tab-panel {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: tabFadeIn 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.admin-view-tab-panel.active {
  display: block;
}
.admin-view-section-title {
  margin: 8px 0 4px;
  font-size: 0.95rem;
  color: #0c4a6e;
}
.admin-view-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.admin-view-kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.86rem;
}
.admin-view-kv span {
  color: #64748b;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-view-kv strong {
  color: #0f172a;
  font-weight: 600;
  word-break: break-word;
}
.admin-view-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-view-item-row,
.admin-view-order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 119, 182, 0.12);
  border-radius: 12px;
  background: #f8fafc;
}
.admin-view-order-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.admin-view-order-card:hover {
  border-color: rgba(0, 119, 182, 0.35);
  background: #f0f9ff;
}
.admin-view-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.admin-view-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.admin-view-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #64748b;
}
.admin-view-item-name {
  font-weight: 650;
  font-size: 0.88rem;
  color: #0f172a;
}
.admin-view-item-meta {
  font-size: 0.75rem;
  color: #64748b;
}
.admin-view-item-side {
  text-align: right;
  flex-shrink: 0;
}
.admin-view-item-price {
  font-weight: 700;
  color: #0077b6;
  font-size: 0.88rem;
}
.admin-view-empty {
  padding: 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
}
.admin-view-count {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
}
.admin-view-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 119, 182, 0.1);
  flex-shrink: 0;
}
#order-view-modal .admin-view-body,
#customer-view-modal .admin-view-body {
  overflow: hidden;
}
.admin-order-row,
.admin-customer-row {
  cursor: pointer;
}
.admin-order-row:hover,
.admin-customer-row:hover {
  background: rgba(0, 180, 216, 0.06);
}
@media (max-width: 700px) {
  .admin-view-meta {
    grid-template-columns: 1fr;
  }
}

.admin-customers-table td.col-customer-email,
.admin-customers-table td.col-customer-phone,
.admin-customers-table td.col-customer-address,
.admin-customers-table td.col-customer-name {
  overflow: hidden;
  vertical-align: middle;
  max-width: 0; /* force fixed-layout cells to respect width + ellipsis */
}

.admin-cell-clip {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Action buttons styling */
.admin-actions-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  max-width: 100%;
}
.btn-action {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s;
  white-space: nowrap;
  line-height: 1;
  flex: 0 0 auto;
}
.btn-action:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.btn-action.btn-view:hover { color: #0284c7; }
.btn-action.btn-edit:hover { color: #d97706; }
.btn-action.btn-delete:hover {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}

/* Custom Delete confirmation dialog modal styles */
.modal-container.small-modal {
  max-width: 440px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px;
  color: #334155;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.text-center { text-align: center; }
.text-danger { color: #ef4444; }
.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.btn-danger {
  background: #ef4444;
  color: white;
}
.btn-danger:hover {
  background: #dc2626;
}

.logout-confirm-icon.clear-list-confirm-icon {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #dc2626;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.15);
}

#clear-list-confirm-modal .modal-container.small-modal {
  border: var(--portal-panel-border) !important;
  border-radius: var(--portal-panel-radius) !important;
  background: var(--portal-panel-bg) !important;
  box-shadow: 0 20px 50px rgba(12, 74, 110, 0.16) !important;
}

.logout-confirm-modal {
  overflow: visible;
}
.logout-confirm-modal .modal-close-btn {
  top: 12px;
  right: 12px;
}
.logout-confirm-body {
  text-align: center;
  padding: 36px 32px 32px;
}
.logout-confirm-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  color: var(--color-accent-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 8px 20px rgba(0, 119, 182, 0.15);
}
.logout-confirm-body h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 10px;
}
.logout-confirm-body p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.logout-confirm-body .confirm-actions {
  margin-top: 24px;
}
.logout-confirm-body .confirm-actions .btn {
  min-width: 110px;
}

/* Settings Form elements */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.settings-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}
.settings-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
}
.settings-card .form-field {
  margin-bottom: 14px;
}
.settings-card .form-field:first-of-type {
  margin-top: 0;
}
.settings-card label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.settings-card input.form-control {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  width: 100% !important;
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-card input.form-control:focus {
  border-color: var(--color-accent-teal) !important;
  box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.1);
  outline: none;
  background: #ffffff !important;
}

/* Store Settings (admin) */
.store-settings-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.store-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.store-settings-header h2 {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
}
.store-settings-header p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 0.92rem;
  max-width: 46ch;
}
.store-settings-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.settings-group-card {
  margin-bottom: 0;
}
.settings-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid rgba(0, 119, 182, 0.12);
}
.settings-group-icon {
  width: 34px;
  height: 34px;
  background: rgba(0, 119, 182, 0.1);
  color: #0077b6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.settings-group-header h3 {
  margin: 0;
  border: none;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0077b6;
  text-transform: none;
  letter-spacing: 0;
}
.store-settings-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.store-settings-fields .form-field--full {
  grid-column: 1 / -1;
}
.store-settings-fields label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}
/* Cart discount tiers (admin → Discount tab) */
.discount-settings-card {
  max-width: 760px;
}
.discount-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}
.discount-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #0077b6;
  cursor: pointer;
}
.discount-tiers-hint {
  margin: 0 0 14px;
}
.discount-tiers-head {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.discount-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.discount-tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  gap: 12px;
  align-items: center;
}
.discount-tier-row .form-field {
  margin: 0;
}
.btn-discount-tier-remove {
  width: 40px;
  height: 40px;
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #be123c;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-discount-tier-remove:hover:not(:disabled) {
  background: #ffe4e6;
}
.btn-discount-tier-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.discount-preview {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  font-size: 0.88rem;
  font-weight: 600;
  color: #065f46;
  line-height: 1.45;
}
.discount-preview > i {
  color: #047857;
  margin-top: 2px;
}
.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;
}

.store-settings-fields textarea.form-control,
.settings-card textarea.form-control {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  width: 100% !important;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 72px;
}
.store-settings-fields textarea.form-control:focus,
.settings-card textarea.form-control:focus {
  border-color: var(--color-accent-teal) !important;
  box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.1);
  outline: none;
  background: #ffffff !important;
}
.admin-import-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin: 0;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  text-decoration: none;
}
@media (max-width: 800px) {
  .store-settings-fields {
    grid-template-columns: 1fr;
  }
  .store-settings-fields[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* Responsive tweaks for admin dashboard layout */
@media (max-width: 1100px) {
  .admin-table .col-actions {
    width: 132px;
  }
  .admin-orders-table .col-actions,
  .admin-customers-table .col-actions {
    width: 110px;
  }
  .btn-action {
    padding: 7px 8px;
  }
  .btn-action .btn-action-label {
    display: none;
  }
}
@media (max-width: 768px) {
  .product-editor-large {
    width: 100%;
    height: 96vh;
  }
  .product-editor-header {
    padding: 18px 58px 14px 18px;
  }
  .product-editor-tabs {
    gap: 20px;
    padding: 0 18px;
  }
  .product-editor-body,
  .product-editor-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
  #tab-overview .admin-stats-grid.admin-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 14px 20px;
  }
  .admin-layout-wrapper {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - var(--header-height));
    overflow: visible;
  }
  .admin-sidebar {
    width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    top: 0;
  }
  .admin-sidebar.collapsed {
    width: 100%;
  }
  .admin-sidebar.collapsed .sidebar-header .brand-title {
    display: flex;
  }
  .admin-sidebar.collapsed .admin-acc-title,
  .admin-sidebar.collapsed .admin-acc-chev,
  .admin-sidebar.collapsed .admin-acc-dot {
    display: initial;
  }
  .admin-sidebar.collapsed .admin-acc-dot {
    display: block;
  }
  .admin-sidebar.collapsed .admin-acc-trigger {
    justify-content: space-between;
    padding: 10px 8px;
  }
  .admin-sidebar.collapsed .admin-cat-nav {
    margin: 0 0 0 6px;
    padding: 2px 2px 8px 8px;
    border-left: 2px solid rgba(0, 119, 182, 0.18);
  }
  .admin-sidebar.collapsed .sidebar-item {
    justify-content: flex-start;
    padding: 8px 12px;
    gap: 10px;
  }
  .admin-sidebar.collapsed .sidebar-item span {
    opacity: 1;
    width: auto;
    pointer-events: auto;
  }
  .sidebar-header {
    height: 60px;
  }
  .sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    overflow: visible;
  }
  .admin-nav-group {
    grid-column: 1 / -1;
  }
  .sidebar-item {
    padding: 10px 12px;
  }
  .logout-item {
    margin-top: 0;
    border-top: none;
    padding-top: 10px;
    grid-column: 1 / -1;
  }
  .admin-main-panel {
    padding: 16px 12px;
    height: auto;
    overflow: visible;
  }
  #tab-dashboard:not(.admin-show-kpi) .admin-sticky-toolbar {
    position: sticky;
    top: 0;
    background: #f8fafc;
    padding-bottom: 10px;
  }
  .admin-tab-content.active,
  .admin-tab-content.active:not(#tab-dashboard) {
    overflow: visible;
    height: auto;
  }
  .admin-table-card {
    min-height: 420px;
  }
}

/* Order Badges */
.badge-payment {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-payment.badge-cod {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #d97706 !important;
}
.badge-payment.badge-online {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #0284c7 !important;
}

.badge-status.processing {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #d97706 !important;
}
.badge-status.shipped {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #0284c7 !important;
}
.badge-status.delivered {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
}
.badge-status.completed {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
}
/* Admin efficiency: KPI nav, bulk bar, filters, inline status, pager */
.admin-overview-grid .admin-stat-card.admin-kpi-nav {
  appearance: none;
  border: inherit;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.admin-overview-grid .admin-stat-card.admin-kpi-nav:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 119, 182, 0.35);
  box-shadow: 0 12px 28px rgba(12, 74, 110, 0.1);
}
.admin-table-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-bulk-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0, 119, 182, 0.08);
  border: 1px solid rgba(0, 119, 182, 0.16);
  color: #0c4a6e;
  font-size: 0.82rem;
  font-weight: 600;
}
.admin-controls-card--inline {
  margin: 0 0 14px;
  padding: 14px 16px;
}
.admin-table .col-check {
  width: 40px;
  text-align: center;
}
.admin-inline-status {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0, 119, 182, 0.22);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230077b6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: #0c4a6e;
  border-radius: 8px;
  padding: 7px 28px 7px 10px;
  font: 600 0.78rem var(--font-body);
  cursor: pointer;
  min-width: 128px;
  max-width: 100%;
  display: inline-block;
  line-height: 1.2;
  box-shadow: none;
}
.admin-inline-status:focus {
  outline: 2px solid rgba(0, 119, 182, 0.35);
  outline-offset: 1px;
}
.admin-inline-status--processing {
  background-color: rgba(245, 158, 11, 0.12);
  border-color: rgba(217, 119, 6, 0.35);
  color: #d97706;
}
.admin-inline-status--shipped {
  background-color: rgba(14, 165, 233, 0.12);
  border-color: rgba(2, 132, 199, 0.35);
  color: #0284c7;
}
.admin-inline-status--delivered,
.admin-inline-status--completed {
  background-color: rgba(16, 185, 129, 0.12);
  border-color: rgba(5, 150, 105, 0.35);
  color: #059669;
}
.admin-inline-status--cancelled {
  background-color: rgba(239, 68, 68, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
  color: #dc2626;
}
.admin-orders-table .col-order-status {
  min-width: 140px;
  white-space: nowrap;
}
.admin-stock-qty {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}
.admin-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 16px 4px;
  color: #486581;
  font-size: 0.86rem;
  font-weight: 600;
}
.order-editor-items-block {
  margin-top: 8px;
  margin-bottom: 16px;
}
.order-editor-items-label {
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  display: block;
}
.order-editor-items-list {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius-sm);
  padding: 15px;
  max-height: 220px;
  overflow-y: auto;
}
.order-editor-add-item {
  display: grid;
  grid-template-columns: 1fr 88px auto;
  gap: 8px;
  margin-top: 10px;
}
.order-editor-add-item select,
.order-editor-add-item input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}
.order-editor-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #cbd5e1;
}
.order-editor-item-row:last-child {
  border-bottom: none;
}
.order-editor-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.order-editor-item-main img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}
.order-editor-item-remove {
  border: none;
  background: transparent;
  color: #dc2626;
  cursor: pointer;
  padding: 4px 6px;
}
@media print {
  body * { visibility: hidden !important; }
  .order-packing-slip,
  .order-packing-slip * {
    visibility: visible !important;
  }
  .order-packing-slip {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    padding: 24px !important;
    display: block !important;
    background: #fff !important;
    color: #000 !important;
    z-index: 99999 !important;
  }
}
.order-packing-slip {
  display: none;
}

/* Responsive spacing for homepage content sections */
@media (max-width: 768px) {
  .featured-categories-section,
  .homepage-showcase-section,
  .trust-factors-section,
  .testimonials-section,
  .homepage-cta-section {
    padding: 35px 20px;
  }
}

/* ==========================================================================
   PORTAL PANEL SYSTEM ? soft ocean look (wishlist empty card language)
   Scoped to user storefront only (not admin)
   ========================================================================== */

.portal-panel,
#view-cart .cart-page-main,
#view-cart .cart-page-summary,
#view-wishlist .wishlist-grid .premium-card,
#view-shop .catalog-toolbar,
#view-shop .mobile-filter-sheet,
#view-about .location-card,
#view-about .glass-panel,
#view-product .product-page-sidebar,
#view-product .pp-main-image,
#view-checkout .checkout-page-panel,
#checkout-wizard-modal .modal-container,
#product-detail-modal .modal-container {
  border: var(--portal-panel-border) !important;
  border-radius: var(--portal-panel-radius) !important;
  box-shadow: var(--portal-panel-shadow) !important;
  background: var(--portal-panel-bg-soft) !important;
}

/* Shop filter sidebar ? rounded ocean panel */
#view-shop .filter-panel {
  background: var(--portal-panel-bg-soft) !important;
  border: var(--portal-panel-border) !important;
  border-radius: var(--portal-panel-radius) !important;
  box-shadow: var(--portal-panel-shadow) !important;
  overflow: hidden;
}

#view-shop .catalog-main {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(0, 180, 216, 0.08), transparent 55%),
    linear-gradient(180deg, #f0f9ff 0%, #f7fbfd 100%) !important;
  border-radius: var(--portal-panel-radius);
}

#view-shop .catalog-toolbar {
  padding: 12px 16px;
}

/* Storefront product cards (home + shop) */
#view-home .premium-card,
#view-shop .premium-card,
#view-product .premium-card,
.homepage-showcase-section .premium-card {
  background: var(--portal-panel-bg-soft) !important;
  border: var(--portal-panel-border) !important;
  border-radius: var(--portal-panel-radius) !important;
  box-shadow: var(--portal-panel-shadow) !important;
}
#view-home .premium-card:hover,
#view-shop .premium-card:hover,
#view-product .premium-card:hover,
.homepage-showcase-section .premium-card:hover {
  border-color: rgba(0, 119, 182, 0.28) !important;
  box-shadow: 0 16px 40px rgba(12, 74, 110, 0.12) !important;
}

/* Cart + wishlist page shells */
#view-cart.cart-page,
#view-wishlist.wishlist-page {
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(0, 180, 216, 0.14), transparent 50%),
    linear-gradient(180deg, #eef6fa 0%, #f3f4f6 40%, #eef2f6 100%);
}

#view-cart .cart-page-main,
#view-cart .cart-page-summary {
  overflow: hidden;
}

#view-cart .cart-page-summary h2,
#view-wishlist .wishlist-page-header h1,
#view-cart .cart-page-header h1 {
  color: var(--portal-heading);
}

/* Empty cart / shop no-results use wishlist-empty panel itself */
#view-cart .cart-page-layout.is-empty .cart-page-main {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#view-cart .empty-cart-view.wishlist-empty,
#view-shop .no-results.wishlist-empty {
  max-width: 920px;
  margin: 0 auto;
  grid-column: 1 / -1;
}

/* Compact empty states (related, search, compatibility) */
.portal-empty--compact {
  max-width: 520px;
  padding: 28px 22px;
  text-align: center;
  border-radius: var(--portal-panel-radius);
  border: var(--portal-panel-border);
  background: var(--portal-panel-bg);
  box-shadow: var(--portal-panel-shadow);
}
.portal-empty--compact .wishlist-empty-visual {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  font-size: 1.75rem;
  color: var(--color-accent-teal);
  display: grid;
  place-items: center;
  position: relative;
}
.portal-empty--compact > i {
  display: block;
  font-size: 1.75rem;
  color: var(--color-accent-teal);
  margin: 0 auto 12px;
}
.portal-empty--compact h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--portal-heading);
  margin: 0 0 8px;
}
.portal-empty--compact p {
  margin: 0 auto 16px;
  color: var(--portal-body);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 360px;
}
.portal-empty--compact .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portal-empty--inline {
  display: inline-flex !important;
  padding: 8px 14px !important;
  max-width: none;
  font-size: 0.85rem;
  color: var(--portal-body);
  box-shadow: 0 4px 14px rgba(12, 74, 110, 0.06) !important;
}

.header-search-empty.portal-empty--compact {
  margin: 8px;
  max-width: none;
}
.header-search-empty.portal-empty--compact p {
  margin-bottom: 10px;
}

#view-shop .no-results {
  color: inherit;
  padding: 0;
}
#view-shop .no-results.wishlist-empty {
  padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px);
}

.product-related-empty.portal-empty--compact {
  width: min(100%, 420px);
  margin: 12px auto;
  flex: 0 0 auto;
}

#view-shop .brands-empty-msg {
  color: var(--portal-body);
}

.comp-result-box {
  border: var(--portal-panel-border) !important;
  border-radius: var(--portal-panel-radius) !important;
  background: var(--portal-panel-bg-soft) !important;
  box-shadow: var(--portal-panel-shadow) !important;
}
.comp-empty-result.portal-empty--compact {
  max-width: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 24px 16px;
}
.comp-empty-result.portal-empty--compact h2 {
  font-size: 1.35rem;
}

/* About + contact */
#view-about .about-contact-block {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 180, 216, 0.12), transparent 55%),
    linear-gradient(180deg, #eef6fa 0%, #f7fbfd 100%) !important;
}
#view-about .about-contact-card h3,
#view-about .section-header-centered h2 {
  color: var(--portal-heading);
}

/* Homepage section atmospheres */
.homepage-showcase-section,
.trust-factors-section,
.testimonials-section {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(0, 180, 216, 0.1), transparent 50%),
    linear-gradient(180deg, #f0f9ff 0%, #ffffff 55%) !important;
}

.featured-categories-section .section-header-centered h2,
.homepage-showcase-section .section-header-centered h2 {
  color: var(--portal-heading);
}
.featured-categories-section .section-header-centered p {
  color: var(--color-text-secondary);
}

/* Product page */
#view-product.product-page {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(0, 180, 216, 0.1), transparent 50%),
    #f5f7fa;
}
#view-product .pp-info h1 {
  color: var(--portal-heading);
}

/* User-facing modals */
#view-checkout .checkout-page-panel,
#checkout-wizard-modal .modal-container,
#product-detail-modal .modal-container {
  background: var(--portal-panel-bg) !important;
}

#view-checkout .checkout-cart-list,
#view-checkout .checkout-totals-summary,
#checkout-wizard-modal .checkout-cart-list,
#checkout-wizard-modal .checkout-totals-summary {
  border: var(--portal-panel-border) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 6px 18px rgba(12, 74, 110, 0.06);
}

#product-detail-modal .detail-main-image-container,
#product-detail-modal .detail-tab-pane {
  border: var(--portal-panel-border) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 14px !important;
}

#view-checkout .wizard-step-node.active .step-label,
#checkout-wizard-modal .wizard-step-node.active .step-label {
  color: var(--portal-heading);
}

/* ==========================================================================
   ADMIN PORTAL ? soft ocean chrome (matches wishlist / storefront panels)
   ========================================================================== */

#view-admin .admin-layout-wrapper {
  background:
    radial-gradient(ellipse 70% 45% at 20% 0%, rgba(0, 180, 216, 0.16), transparent 50%),
    radial-gradient(ellipse 55% 40% at 90% 10%, rgba(0, 119, 182, 0.1), transparent 45%),
    linear-gradient(165deg, #e8f6fc 0%, #f3f8fb 42%, #eef2f6 100%);
  color: #334155;
  font-family: var(--font-body, 'Inter', sans-serif);
}

/* Sidebar */
#view-admin .admin-sidebar {
  background: var(--portal-panel-bg-soft);
  border-right: var(--portal-panel-border);
  box-shadow: 6px 0 28px rgba(12, 74, 110, 0.06);
}
#view-admin .sidebar-header {
  border-bottom: 1px solid rgba(0, 119, 182, 0.12);
  background:
    radial-gradient(ellipse 90% 120% at 0% 50%, rgba(0, 180, 216, 0.12), transparent 60%);
}
#view-admin .sidebar-header .brand-title {
  color: var(--portal-heading);
}
#view-admin .btn-sidebar-collapse:hover {
  background: rgba(0, 180, 216, 0.12);
  color: var(--portal-heading);
}
#view-admin .admin-acc-trigger:hover {
  background: rgba(0, 180, 216, 0.1);
}
#view-admin .admin-acc-title {
  color: var(--portal-heading);
}
#view-admin .admin-cat-nav {
  border-left-color: rgba(0, 119, 182, 0.22);
}
#view-admin .sidebar-item:hover {
  background: rgba(0, 180, 216, 0.1);
  color: var(--portal-heading);
}
#view-admin .sidebar-item.active {
  background: linear-gradient(135deg, var(--color-accent-teal), #0284c7);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 119, 182, 0.25);
}
#view-admin .logout-item {
  border-top-color: rgba(0, 119, 182, 0.12);
}

/* Main canvas */
#view-admin .admin-main-panel {
  background: transparent;
}
#view-admin .admin-page-heading h1 {
  color: var(--portal-heading);
}
#view-admin .admin-page-heading p {
  color: var(--portal-body);
}

/* KPI / filter / table shells */
#view-admin .admin-stat-card,
#view-admin .admin-controls-card,
#view-admin .admin-table-card {
  border: var(--portal-panel-border) !important;
  border-radius: var(--portal-panel-radius) !important;
  background: var(--portal-panel-bg-soft) !important;
  box-shadow: var(--portal-panel-shadow) !important;
}
#view-admin .admin-stat-card:hover {
  border-color: rgba(0, 119, 182, 0.28) !important;
  box-shadow: 0 16px 40px rgba(12, 74, 110, 0.12) !important;
}
#view-admin #tab-overview .admin-overview-grid .admin-stat-card {
  border: var(--portal-panel-border) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 8px 24px rgba(12, 74, 110, 0.08) !important;
}
#view-admin .admin-table-header {
  border-bottom: 1px solid rgba(0, 119, 182, 0.12);
  background: rgba(255, 255, 255, 0.45);
}
#view-admin .admin-table-header h2 {
  color: var(--portal-heading);
}
#view-admin .stat-val {
  color: var(--portal-heading);
}
#view-admin .stat-icon {
  background: rgba(0, 180, 216, 0.12);
  border-color: rgba(0, 119, 182, 0.12);
}

/* Inputs inside admin controls */
#view-admin .admin-search-wrapper input,
#view-admin .admin-filter-group select {
  border-color: rgba(0, 119, 182, 0.2);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
}
#view-admin .admin-search-wrapper input:focus,
#view-admin .admin-filter-group select:focus {
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.18);
}

/* Table empty rows ? ocean empty strip */
#view-admin .admin-empty-cell {
  padding: 0 !important;
  border: none;
  background: transparent;
}
#view-admin .admin-empty-panel {
  margin: 18px auto;
  max-width: 640px;
  padding: clamp(28px, 4vw, 40px) 24px;
  text-align: center;
  border-radius: var(--portal-panel-radius);
  border: var(--portal-panel-border);
  background: var(--portal-panel-bg);
  box-shadow: var(--portal-panel-shadow);
}
#view-admin .admin-empty-panel .wishlist-empty-visual,
#view-admin .admin-empty-panel > i {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  color: var(--color-accent-teal);
  font-size: 1.7rem;
  position: relative;
}
#view-admin .admin-empty-panel h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--portal-heading);
}
#view-admin .admin-empty-panel p {
  margin: 0 auto;
  max-width: 360px;
  color: var(--portal-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Action buttons */
#view-admin .btn-action {
  border-color: rgba(0, 119, 182, 0.2);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}
#view-admin .btn-action:hover {
  background: rgba(0, 180, 216, 0.1);
  border-color: rgba(0, 119, 182, 0.35);
  color: var(--portal-heading);
}

/* Admin-facing modals */
#product-editor-modal .modal-container.product-editor-large,
#delete-confirm-modal .modal-container.small-modal,
#order-delete-confirm-modal .modal-container.small-modal,
#customer-delete-confirm-modal .modal-container.small-modal,
#logout-confirm-modal .modal-container.small-modal,
.modal-container.small-modal {
  border: var(--portal-panel-border) !important;
  border-radius: var(--portal-panel-radius) !important;
  background: var(--portal-panel-bg) !important;
  box-shadow: 0 20px 50px rgba(12, 74, 110, 0.16) !important;
}
#product-editor-modal .product-editor-header h3 {
  color: var(--portal-heading);
}
#product-editor-modal .product-editor-tabs {
  border-bottom-color: rgba(0, 119, 182, 0.14);
}
#product-editor-modal .product-editor-tab.active {
  color: var(--color-accent-teal);
}
#product-editor-modal .product-editor-pane .form-field input,
#product-editor-modal .product-editor-pane .form-field select,
#product-editor-modal .product-editor-pane .form-field textarea {
  border-color: rgba(0, 119, 182, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   UI POLISH PASS ? header/footer, cards, chips, motion, admin tables
   ========================================================================== */

/* --- Header ocean chrome --- */
.app-header {
  box-shadow: 0 10px 28px rgba(12, 74, 110, 0.08);
}
.header-top {
  background:
    radial-gradient(ellipse 60% 120% at 10% 0%, rgba(0, 180, 216, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 249, 255, 0.94) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--portal-panel-border);
}
.header-nav-bar {
  background: linear-gradient(135deg, #0077b6 0%, #0096c7 48%, #00a8c8 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 119, 182, 0.18);
}
.logo-text .brand-main {
  color: var(--portal-heading);
}
#header-search-input {
  border: 1px solid rgba(0, 119, 182, 0.18);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 14px rgba(12, 74, 110, 0.05);
}
#header-search-input:focus {
  background: #ffffff;
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.18);
}
.header-search-dropdown {
  border: var(--portal-panel-border) !important;
  border-radius: 14px !important;
  background: var(--portal-panel-bg-soft) !important;
  box-shadow: var(--portal-panel-shadow) !important;
  overflow: hidden;
}

/* --- Footer teal ocean --- */
.app-footer {
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(0, 180, 216, 0.16), transparent 50%),
    linear-gradient(180deg, #0b2f44 0%, #091a27 55%, #06131d 100%);
  border-top: 1px solid rgba(0, 180, 216, 0.28);
  color: #e2eef5;
}
.app-footer .footer-column h4 {
  color: #e0f7ff;
  letter-spacing: 0.12em;
}
.app-footer .brand-column p,
.app-footer .links-column a,
.app-footer .footer-link-btn,
.app-footer .contact-column p {
  color: #9ebfd4;
}
.app-footer .links-column a:hover,
.app-footer .footer-link-btn:hover {
  color: #7dd3fc;
}
.app-footer .footer-socials a {
  background: rgba(0, 180, 216, 0.1);
  border: 1px solid rgba(0, 180, 216, 0.18);
  color: #b8d4e6;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.app-footer .footer-socials a:hover {
  background: var(--color-accent-teal);
  color: #fff;
  transform: translateY(-2px);
}
.app-footer .footer-bottom {
  background: rgba(4, 16, 28, 0.72);
  border-top: 1px solid rgba(0, 180, 216, 0.12);
}

/* --- Product cards --- */
.premium-card {
  border: var(--portal-panel-border);
  border-radius: var(--portal-panel-radius);
  background: var(--portal-panel-bg-soft);
  box-shadow: var(--portal-panel-shadow);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.premium-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 119, 182, 0.32);
  box-shadow: 0 16px 36px rgba(12, 74, 110, 0.12);
}
.premium-card-image {
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(0, 180, 216, 0.1), transparent 60%),
    linear-gradient(180deg, #f0f9ff 0%, #e8f4fa 100%);
  border-bottom: 1px solid rgba(0, 119, 182, 0.08);
}
.premium-card:hover .premium-card-image img {
  transform: scale(1.03);
}
.premium-card-content h4 {
  color: var(--portal-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.premium-card-desc {
  color: var(--portal-body);
  margin-bottom: 12px;
}
.premium-card-footer {
  border-top: 1px solid rgba(0, 119, 182, 0.1);
  padding-top: 12px;
}
.premium-card-price {
  color: var(--portal-heading);
  font-size: 1.2rem;
}
.premium-cart-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0, 119, 182, 0.22);
}
.premium-cart-btn:hover {
  transform: translateY(-1px) scale(1.03);
}

.card-wishlist-btn {
  width: 34px;
  height: 34px;
  font-size: 0.9rem;
  border: 1px solid rgba(0, 119, 182, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: #94a3b8;
  box-shadow: 0 2px 8px rgba(12, 74, 110, 0.06);
  backdrop-filter: blur(6px);
}
.card-wishlist-btn:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.04);
}
.card-wishlist-btn.is-active {
  color: #ef4444;
  background: rgba(254, 242, 242, 0.95);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: none;
}
.card-wishlist-btn.is-active i {
  color: #ef4444;
}

.premium-badge-category {
  background: rgba(224, 242, 254, 0.92);
  border-color: rgba(0, 119, 182, 0.18);
  backdrop-filter: blur(4px);
}

/* --- Shop active filter chips --- */
.catalog-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: var(--portal-panel-border);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6px 18px rgba(12, 74, 110, 0.05);
}
.catalog-active-filters[hidden] {
  display: none !important;
}
.filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 119, 182, 0.22);
  background: rgba(224, 242, 254, 0.95);
  color: var(--portal-heading);
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.filter-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.filter-chip i {
  font-size: 0.72rem;
  opacity: 0.7;
}
.filter-chip:hover {
  background: #dff6ff;
  border-color: rgba(0, 119, 182, 0.4);
  transform: translateY(-1px);
}
.filter-chip-clear-all {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--color-accent-teal);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filter-chip-clear-all:hover {
  color: var(--portal-heading);
}

/* --- Motion --- */
.wishlist-empty,
.portal-empty,
.admin-empty-panel,
.no-results.wishlist-empty,
.empty-cart-view.wishlist-empty {
  animation: wishlistEmptyIn 0.55s ease both;
}
.premium-card,
#view-home .premium-card,
#view-shop .premium-card,
.homepage-showcase-section .premium-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.portal-empty--compact .wishlist-empty-ripple,
.admin-empty-panel .wishlist-empty-ripple,
.empty-cart-view .wishlist-empty-ripple,
.no-results .wishlist-empty-ripple {
  border-color: rgba(0, 180, 216, 0.35);
}
.portal-empty--compact .wishlist-empty-visual > i,
.admin-empty-panel .wishlist-empty-visual > i,
.empty-cart-view .wishlist-empty-visual > i,
.no-results .wishlist-empty-visual > i {
  color: var(--color-accent-teal);
  animation: wishlistHeartPulse 2.4s ease-in-out infinite;
}

/* --- Admin tables --- */
#view-admin .admin-table thead th {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--portal-heading);
  border-bottom: 1px solid rgba(0, 119, 182, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#view-admin .admin-table tbody tr:nth-child(even) td {
  background: rgba(0, 180, 216, 0.035);
}
#view-admin .admin-table tbody tr:hover td {
  background: rgba(0, 180, 216, 0.1);
}
#view-admin .admin-table td {
  border-bottom-color: rgba(0, 119, 182, 0.08);
}
#view-admin .admin-table-header {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.55);
}


/* ==========================================================================
   STANDARD AQUARIUM CARDS (Aquariums & Cabinets / rimless models)
   ========================================================================== */
:root {
  --aq-navy-deep: #07202E;
  --aq-navy: #0E3245;
  --aq-navy-soft: #123A50;
  --aq-aqua: #2FB6C0;
  --aq-aqua-bright: #4FD8DE;
  --aq-line-soft: rgba(14, 50, 69, 0.12);
}

#catalog-product-grid.aquarium-catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 600px) {
  #catalog-product-grid.aquarium-catalog-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  #catalog-product-grid.aquarium-catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1300px) {
  #catalog-product-grid.aquarium-catalog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Detail modal - standard aquarium glass options */
.detail-aquarium-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -2px 0 10px;
  flex-shrink: 0;
}

.detail-aquarium-meta.hidden,
.detail-glass-options.hidden {
  display: none !important;
}

.detail-thk-badge {
  display: inline-block;
  background: rgba(47, 182, 192, 0.12);
  color: #1fa8b2;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(47, 182, 192, 0.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.detail-lead-meta {
  font-size: 0.82rem;
  color: #5F7A83;
  font-weight: 500;
}

.detail-glass-options {
  margin-bottom: 12px;
  flex-shrink: 0;
}

.detail-glass-options .sc-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #A5BCC4;
  margin-bottom: 8px;
}

.detail-glass-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  padding: 8px 12px;
  margin: 0 0 5px;
  cursor: pointer;
  user-select: none;
  background: rgba(14, 50, 69, 0.03);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.detail-glass-row:hover {
  background: rgba(47, 182, 192, 0.07);
  border-color: rgba(47, 182, 192, 0.25);
}

.detail-glass-row.active {
  background: rgba(47, 182, 192, 0.10);
  border-color: rgba(47, 182, 192, 0.55);
  box-shadow: 0 0 0 3px rgba(47, 182, 192, 0.10);
}

.detail-glass-row .price-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #B0C8CF;
  flex-shrink: 0;
  position: relative;
  background: #fff;
}

.detail-glass-row.active .price-radio-dot {
  border-color: #2FB6C0;
  background: #2FB6C0;
}

.detail-glass-row .price-radio-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.detail-glass-row.active .price-radio-dot::after {
  transform: translate(-50%, -50%) scale(1);
}

.detail-glass-row .price-lbl {
  flex: 1;
  font-size: 0.84rem;
  font-weight: 600;
  color: #5A7A85;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.detail-glass-row.active .price-lbl {
  color: #07202E;
  font-weight: 700;
}

.detail-glass-row .price-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1rem;
  color: #8FA9B2;
}

.detail-glass-row.active .price-val {
  color: #2FB6C0;
}

.detail-glass-price-note {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5F7A83;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

#product-detail-modal .specs-table td:first-child {
  width: 42%;
  color: #5F7A83;
  font-weight: 600;
}

/* Aquarium premium cards ? taller with dimensions + glass prices */
#view-shop .premium-card.premium-card--aquarium,
.premium-card.premium-card--aquarium {
  min-height: 560px;
}

/* Zoom out tank images in cards only — show full aquarium + labels */
#view-shop .premium-card--aquarium .premium-card-image,
#view-shop .premium-card[data-type="tanks"] .premium-card-image,
#view-wishlist .wishlist-grid .premium-card--aquarium .premium-card-image,
.premium-card--aquarium .premium-card-image,
.premium-card[data-type="tanks"] .premium-card-image {
  background: #ffffff;
  aspect-ratio: 3 / 2;
}
#view-shop .premium-card--aquarium .premium-card-image img,
#view-shop .premium-card[data-type="tanks"] .premium-card-image img,
#view-wishlist .wishlist-grid .premium-card--aquarium .premium-card-image img,
.premium-card--aquarium .premium-card-image img,
.premium-card[data-type="tanks"] .premium-card-image img,
.premium-card-image img.premium-card-img--tank {
  object-fit: contain !important;
  object-position: center center;
  transform: scale(0.72);
  transform-origin: center center;
  padding: 12px 14px;
  box-sizing: border-box;
}
#view-shop .premium-card--aquarium:hover .premium-card-image img,
#view-shop .premium-card[data-type="tanks"]:hover .premium-card-image img,
#view-shop .premium-card--aquarium:focus-within .premium-card-image img,
#view-shop .premium-card[data-type="tanks"]:focus-within .premium-card-image img,
.premium-card--aquarium:hover .premium-card-image img,
.premium-card[data-type="tanks"]:hover .premium-card-image img,
.premium-card--aquarium:focus-within .premium-card-image img,
.premium-card[data-type="tanks"]:focus-within .premium-card-image img,
.premium-card:hover .premium-card-image img.premium-card-img--tank,
.premium-card:focus-within .premium-card-image img.premium-card-img--tank {
  transform: scale(0.76) !important;
}

#view-shop .premium-card.premium-card--aquarium .premium-card-content,
.premium-card.premium-card--aquarium .premium-card-content {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

#view-shop .premium-card.premium-card--aquarium .premium-card-content h4,
.premium-card.premium-card--aquarium .premium-card-content h4 {
  margin: 0 0 2px;
  font-size: 1.05rem;
  -webkit-line-clamp: 1;
}

.premium-card--aquarium .premium-badge-thickness {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 3;
  background: rgba(47, 182, 192, 0.95);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

.premium-card--aquarium .card-aq-block {
  border-top: 1px solid rgba(14, 50, 69, 0.08);
  padding-top: 8px;
}

.premium-card--aquarium .sc-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #A5BCC4;
  margin-bottom: 6px;
}

.premium-card--aquarium .sc-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 8px;
}

.premium-card--aquarium .sc-spec-key {
  font-size: 0.78rem;
  color: #5F7A83;
  font-weight: 500;
}

.premium-card--aquarium .sc-spec-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: #07202E;
}

.premium-card--aquarium .store-card-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  padding: 7px 10px;
  margin: 0 0 5px;
  cursor: pointer;
  user-select: none;
  background: rgba(14, 50, 69, 0.03);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.premium-card--aquarium .store-card-price-row:hover {
  background: rgba(47, 182, 192, 0.07);
  border-color: rgba(47, 182, 192, 0.25);
}

.premium-card--aquarium .store-card-price-row.active {
  background: rgba(47, 182, 192, 0.10);
  border-color: rgba(47, 182, 192, 0.55);
  box-shadow: 0 0 0 2px rgba(47, 182, 192, 0.10);
}

.premium-card--aquarium .price-radio-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #B0C8CF;
  flex-shrink: 0;
  position: relative;
  background: #fff;
}

.premium-card--aquarium .store-card-price-row.active .price-radio-dot {
  border-color: #2FB6C0;
  background: #2FB6C0;
}

.premium-card--aquarium .price-radio-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

.premium-card--aquarium .store-card-price-row.active .price-radio-dot::after {
  transform: translate(-50%, -50%) scale(1);
}

.premium-card--aquarium .store-card-price-row .price-lbl {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5A7A85;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.premium-card--aquarium .store-card-price-row.active .price-lbl {
  color: #07202E;
  font-weight: 700;
}

.premium-card--aquarium .store-card-price-row .price-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.88rem;
  color: #8FA9B2;
}

.premium-card--aquarium .store-card-price-row.active .price-val {
  color: #2FB6C0;
}

.premium-card--aquarium .premium-card-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(14, 50, 69, 0.08);
  align-items: flex-end;
}

.premium-card--aquarium .card-aq-lead {
  display: block;
  font-size: 0.68rem;
  color: #7796A0;
  font-weight: 500;
  margin-top: 2px;
}

#view-shop .fp-grid.list-view .premium-card--aquarium,
#view-shop .product-grid.list-view .premium-card--aquarium {
  min-height: 0;
  align-items: flex-start;
}
#view-shop .fp-grid.list-view .premium-card--aquarium .premium-card-content,
#view-shop .product-grid.list-view .premium-card--aquarium .premium-card-content {
  justify-content: flex-start;
  padding-top: 14px;
  padding-bottom: 14px;
}
@media (max-width: 640px) {
  #view-shop .fp-grid.list-view .premium-card--aquarium,
  #view-shop .product-grid.list-view .premium-card--aquarium {
    flex-direction: column;
  }
  #view-shop .fp-grid.list-view .premium-card--aquarium .premium-card-image,
  #view-shop .product-grid.list-view .premium-card--aquarium .premium-card-image {
    width: 100%;
    min-height: 180px;
  }
}

.product-related-track .premium-card--aquarium,
.showcase-cards-track .premium-card--aquarium {
  min-height: 0;
}

.detail-dims-block.hidden,
.pp-dims-block.hidden {
  display: none !important;
}

.pp-main-image {
  cursor: zoom-in;
}

.catalog-loading,
.catalog-error {
  grid-column: 1 / -1;
  width: 100%;
  padding: 40px 20px;
  text-align: center;
}

/* Aquarium card ? 2x4 dimensions table */
.premium-card--aquarium .card-aq-dims-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.76rem;
  margin: 0;
}

.premium-card--aquarium .card-aq-dims-table th,
.premium-card--aquarium .card-aq-dims-table td {
  padding: 5px 6px;
  border: 1px solid rgba(14, 50, 69, 0.1);
  vertical-align: middle;
  line-height: 1.25;
}

.premium-card--aquarium .card-aq-dims-table th {
  width: 22%;
  text-align: left;
  font-weight: 700;
  color: #5F7A83;
  background: rgba(14, 50, 69, 0.03);
}

.premium-card--aquarium .card-aq-dims-table td {
  width: 28%;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  color: #07202E;
  background: #fff;
}

/* Aquarium card ? segmented glass option toggle */
.premium-card--aquarium .card-aq-glass-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 92%;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid rgba(14, 50, 69, 0.14);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.premium-card--aquarium .card-aq-glass-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  border: none;
  margin: 0;
  padding: 10px 8px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}

.premium-card--aquarium .card-aq-glass-btn + .card-aq-glass-btn {
  border-left: 1px solid rgba(14, 50, 69, 0.14);
}

.premium-card--aquarium .card-aq-glass-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: normal;
  line-height: 1.2;
}

.premium-card--aquarium .card-aq-glass-price {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.premium-card--aquarium .card-aq-glass-btn.active {
  background: #2FB6C0;
  color: #fff;
}

.premium-card--aquarium .card-aq-glass-btn:not(.active):hover {
  background: rgba(47, 182, 192, 0.08);
}

/* ==========================================================================
   MY PROFILE PAGE
   ========================================================================== */
#view-profile.profile-page {
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  padding: 28px 0 60px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(0, 180, 216, 0.14), transparent 50%),
    linear-gradient(180deg, #eef6fa 0%, #f3f4f6 40%, #eef2f6 100%);
}
.profile-page-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ==========================================================================
   SINGLE UNIFIED HORIZONTAL PROFILE CARD
   ========================================================================== */
.profile-unified-card {
  background: #ffffff;
  border: 1px solid rgba(0, 119, 182, 0.18);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(12, 74, 110, 0.08);
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}

.profile-unified-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #0077b6, #00b4d8, #48cae4);
}

.profile-unified-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 24px;
}

.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.profile-avatar-initials {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0077b6, #023e8a);
  color: #ffffff;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 119, 182, 0.28);
  text-transform: uppercase;
}

.profile-status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: #10b981;
  border: 3px solid #ffffff;
  border-radius: 50%;
}

.profile-unified-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 240px;
}

.profile-hero-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-hero-name-row h1 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.profile-badge-role {
  background: rgba(0, 119, 182, 0.1);
  color: #0077b6;
  border: 1px solid rgba(0, 119, 182, 0.25);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-hero-email {
  color: #64748b;
  font-size: 0.95rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-edit-profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 119, 182, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-edit-profile-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 119, 182, 0.35);
}

.profile-card-divider {
  border: none;
  height: 1px;
  background: #e2e8f0;
  margin: 0 0 28px 0;
}

/* Horizontal 3-Column Single View Grid */
.profile-unified-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.profile-unified-col {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.profile-unified-col:hover {
  border-color: rgba(0, 119, 182, 0.35);
  background: #ffffff;
}

.profile-col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 14px;
}

.panel-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 119, 182, 0.1);
  color: #0077b6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.profile-col-header h3 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.profile-kv-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-kv-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-kv-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #64748b;
}

.profile-kv-val {
  font-size: 0.95rem;
  color: #0f172a;
  word-break: break-word;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.profile-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0077b6;
  text-decoration: none;
  transition: color 0.2s ease;
}

.profile-quick-link:hover {
  color: #023e8a;
  text-decoration: underline;
}

/* Edit Mode Layout */
.profile-edit-container {
  padding-top: 4px;
}

.profile-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
  margin-bottom: 22px;
}

.profile-edit-header h2 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.field-hint-tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  margin-left: 6px;
  text-transform: uppercase;
}

.profile-manage-store {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: #0c4a6e;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.2s ease;
}
.profile-manage-store:hover {
  background: var(--color-accent-teal, #0077b6);
  color: #fff;
}
.profile-manage-store[hidden] { display: none !important; }

.profile-form { display: flex; flex-direction: column; gap: 18px; }
.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.profile-form-full { grid-column: 1 / -1; }

.profile-form .form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
}
.profile-form .form-field input,
.profile-form .form-field textarea,
.profile-form .form-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 11px 14px;
  font: inherit;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-form .form-field input:disabled,
.profile-form .form-field input[readonly] {
  background: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
  border-color: #e2e8f0;
}
.profile-form .form-field input:focus,
.profile-form .form-field textarea:focus,
.profile-form .form-field select:focus {
  outline: none;
  border-color: rgba(0, 119, 182, 0.6);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.18);
}
.profile-phone-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 10px;
}
.profile-msg {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.9rem;
}
.profile-msg-error { color: #dc2626; }
.profile-msg-success { color: #059669; }

.profile-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}

@media (max-width: 960px) {
  .profile-unified-grid {
    grid-template-columns: 1fr;
  }
  .profile-unified-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

/* Mobile menu scroll lock + account links */
body.mobile-menu-open {
  overflow: hidden;
}
.mobile-link i {
  margin-right: 8px;
  width: 1.1em;
  text-align: center;
}

/* Profile messages: hide when empty */
.profile-msg[hidden] {
  display: none !important;
}
.profile-msg {
  min-height: 0;
  margin: 0;
  font-size: 0.88rem;
}

/* Prefer profile phone grid from storefront (auth.css scoped to login body) */
#view-profile .profile-phone-row.phone-input-row {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 560px) {
  #view-profile .profile-phone-row.phone-input-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-empty-ripple,
  .wishlist-empty-visual > i,
  .portal-empty--compact .wishlist-empty-visual > i,
  .admin-empty-panel .wishlist-empty-visual > i,
  .empty-cart-view .wishlist-empty-visual > i,
  .no-results .wishlist-empty-visual > i {
    animation: none !important;
  }
  .premium-card,
  .premium-card:hover {
    transition: none !important;
  }
}

/* ===== Admin ops enhancements ===== */
.admin-alert-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(217, 119, 6, 0.35);
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}
.admin-alert-banner[hidden] { display: none !important; }
.admin-alert-banner i { font-size: 1.25rem; color: #d97706; }
.admin-alert-banner p { margin: 2px 0 0; font-size: 0.86rem; color: #78350f; }
.admin-dashboard-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 16px;
  margin-top: 18px;
}
.admin-panel-card {
  border: var(--portal-panel-border);
  border-radius: var(--portal-panel-radius);
  background: var(--portal-panel-bg-soft);
  box-shadow: var(--portal-panel-shadow);
  padding: 16px 18px;
}
.admin-panel-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-panel-card-head h2 { margin: 0; font-size: 1.05rem; color: #0c4a6e; }
.admin-staff-meta {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
}
.admin-shortcut-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.admin-shortcut-list li { display: flex; align-items: center; gap: 10px; color: #486581; font-size: 0.88rem; }
.admin-shortcut-list kbd {
  display: inline-flex; min-width: 28px; justify-content: center;
  padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(0, 119, 182, 0.2);
  background: #fff; font-weight: 700; color: #0077b6;
}
.admin-preset-select {
  min-width: 120px; border: 1px solid rgba(0, 119, 182, 0.2);
  border-radius: 8px; padding: 6px 8px; background: #fff;
}
.admin-staff-list { display: flex; flex-direction: column; gap: 8px; }
.admin-staff-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(0, 119, 182, 0.14); background: #fff;
}
.admin-drag-handle { display: inline-flex; margin-right: 6px; color: #94a3b8; cursor: grab; }
.admin-category-row.admin-row-drag-over {
  outline: 2px dashed rgba(0, 119, 182, 0.45);
  background: rgba(0, 180, 216, 0.08);
}
.product-editor-footer--sticky {
  position: sticky; bottom: 0; z-index: 5;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0, 119, 182, 0.12);
  box-shadow: 0 -8px 24px rgba(12, 74, 110, 0.06);
}
.admin-empty-cta { margin-top: 12px; }
.admin-view-kv--wide { grid-column: 1 / -1; }
.customer-chart-bars {
  display: flex; align-items: flex-end; gap: 10px; min-height: 140px; padding: 12px 4px;
}
.customer-chart-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 28px;
}
.customer-chart-bar {
  width: 100%; max-width: 36px; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #0096c7, #0077b6);
}
.customer-chart-col span { font-size: 0.7rem; color: #64748b; font-weight: 600; }
.badge-status.ready-for-pickup,
.admin-inline-status--ready-for-pickup {
  background-color: rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(79, 70, 229, 0.35);
  color: #4f46e5 !important;
}
@media (max-width: 960px) {
  .admin-dashboard-lower { grid-template-columns: 1fr; }
  .admin-controls-card, .admin-controls-card--inline {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .admin-search-wrapper { grid-column: 1 / -1; }
  .admin-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-actions-cell, .admin-view-actions { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .admin-controls-card, .admin-controls-card--inline { grid-template-columns: 1fr; }
  .admin-table-header { flex-direction: column; align-items: stretch; }
}

.payment-status-panel { display: none; }
.payment-status-panel.active { display: block; }

/* ==========================================================================
   PAYMENT VERIFYING / PROCESSING RIPPLE CARD
   ========================================================================== */
.payment-verifying-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(2, 128, 144, 0.2);
  border-radius: 20px;
  padding: 48px 36px 44px;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 12px 35px rgba(2, 128, 144, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Pulsating Ripple Waves for Verifying / Processing */
.verifying-ripple-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verifying-icon-bubble {
  position: relative;
  z-index: 4;
  width: 76px;
  height: 76px;
  background: linear-gradient(135deg, #028090 0%, #00a896 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.2rem;
  box-shadow: 0 8px 24px rgba(2, 128, 144, 0.35);
}

.processing-ripple-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(2, 128, 144, 0.25);
  pointer-events: none;
  animation: processing-ripple-pulse 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.processing-ripple-1 {
  animation-delay: 0s;
}

.processing-ripple-2 {
  animation-delay: 0.7s;
}

.processing-ripple-3 {
  animation-delay: 1.4s;
}

@keyframes processing-ripple-pulse {
  0% {
    width: 76px;
    height: 76px;
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    width: 165px;
    height: 165px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.65);
  }
}

.verifying-card-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.verifying-card-headline-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  color: #0f766e;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.verifying-card-desc {
  font-size: 1.02rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 480px;
}

.verifying-progress-bar-wrap {
  width: 100%;
  max-width: 380px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.verifying-progress-bar {
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, #028090, #00a896, #028090);
  border-radius: 999px;
  position: absolute;
  animation: verifying-progress-slide 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes verifying-progress-slide {
  0% {
    left: -45%;
  }
  100% {
    left: 100%;
  }
}

/* ==========================================================================
   PAYMENT CANCELLED RIPPLE OVERLAY CARD
   ========================================================================== */
.payment-cancel-card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 15px 60px;
  width: 100%;
}

.payment-cancel-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(225, 29, 72, 0.2);
  border-radius: 20px;
  padding: 48px 36px 40px;
  max-width: 620px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 35px rgba(225, 29, 72, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Pulsating Ripple Overlay Effect */
.cancel-ripple-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-icon-bubble {
  position: relative;
  z-index: 4;
  width: 76px;
  height: 76px;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.2rem;
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.35);
}

.ripple-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.25);
  pointer-events: none;
  animation: cancel-ripple-pulse 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.ripple-wave-1 {
  animation-delay: 0s;
}

.ripple-wave-2 {
  animation-delay: 0.8s;
}

.ripple-wave-3 {
  animation-delay: 1.6s;
}

@keyframes cancel-ripple-pulse {
  0% {
    width: 76px;
    height: 76px;
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    width: 160px;
    height: 160px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

.cancel-card-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.cancel-card-headline-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.cancel-card-desc {
  font-size: 1.02rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 auto 24px;
  max-width: 480px;
}

.cancel-order-reference-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cancel-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
}

.cancel-info-label {
  color: #64748b;
  font-weight: 500;
}

.cancel-info-value {
  color: #1e293b;
  font-family: monospace;
  font-size: 1rem;
}

.badge-cancelled-unpaid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffe4e6;
  color: #9f1239;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
}

.cancel-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.cancel-action-buttons .btn {
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
}

/* ==========================================================================
   MY ORDERS & ORDER DETAILS ENHANCEMENTS
   ========================================================================== */
.orders-page-inner,
.order-details-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px 80px;
}

.orders-page-header {
  margin-bottom: 25px;
}

.orders-header-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.orders-title-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-accent-teal, #0077b6), #023e8a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 8px 20px rgba(0, 119, 182, 0.25);
  flex-shrink: 0;
}

.orders-header-title h1 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
  margin: 0 0 4px;
}

.orders-header-sub {
  color: var(--color-text-secondary, #64748b);
  font-size: 0.95rem;
  margin: 0;
}

/* Tabs */
.orders-filter-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0, 119, 182, 0.12);
}

.orders-tab-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.orders-tab-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.orders-tab-btn.active {
  background: var(--color-accent-teal, #0077b6);
  border-color: var(--color-accent-teal, #0077b6);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 119, 182, 0.28);
}

/* Orders List & Card */
.orders-list-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.customer-order-card {
  background: #ffffff;
  border: 1px solid rgba(0, 119, 182, 0.14);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.customer-order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 119, 182, 0.1);
  border-color: rgba(0, 119, 182, 0.28);
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 22px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.order-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.order-card-id {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: #0f172a;
}

.order-card-date {
  font-size: 0.85rem;
  color: #64748b;
}

.order-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Badges */
.badge-order,
.badge-payment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}

.badge-order.badge-pending,
.badge-payment.badge-pending {
  background: rgba(234, 179, 8, 0.12);
  color: #b45309;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.badge-order.badge-confirmed,
.badge-order.badge-processing {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.badge-order.badge-ready-for-pickup,
.badge-order.badge-pickup {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-order.badge-shipped {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.badge-order.badge-delivered,
.badge-order.badge-completed,
.badge-payment.badge-paid {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-order.badge-cancelled,
.badge-payment.badge-failed,
.badge-payment.badge-cancelled {
  background: rgba(225, 29, 72, 0.12);
  color: #e11d48;
  border: 1px solid rgba(225, 29, 72, 0.3);
}

.order-card-body {
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}

.order-items-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.order-item-thumb {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.order-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-item-thumb .thumb-qty {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #0f172a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
}

.order-item-more {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
}

.order-items-text-summary {
  font-size: 0.9rem;
  color: #334155;
}

.order-card-pricing {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.order-card-total {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
}

.order-card-footer {
  padding: 14px 22px;
  background: #fcfdfe;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.order-delivery-hint {
  font-size: 0.85rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Empty and Loading States */
.orders-empty-state {
  text-align: center;
  padding: 60px 20px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 119, 182, 0.12);
}

.orders-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 119, 182, 0.08);
  color: var(--color-accent-teal, #0077b6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin: 0 auto 18px;
}

.orders-empty-state h2 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.6rem;
  color: #0f172a;
  margin-bottom: 8px;
}

.orders-empty-state p {
  color: #64748b;
  max-width: 480px;
  margin: 0 auto 22px;
  font-size: 0.95rem;
}

.orders-skeleton-card {
  height: 140px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 16px;
}

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

/* ORDER DETAILS VIEW */
.order-details-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.btn-back-orders {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
}

.order-details-id-wrap h1 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.order-date-text {
  font-size: 0.88rem;
  color: #64748b;
}

.order-details-layout {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: 24px;
  align-items: flex-start;
}

.order-section-card {
  background: #ffffff;
  border: 1px solid rgba(0, 119, 182, 0.14);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.order-section-header {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.order-section-header h3 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.order-detail-items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-detail-item-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 16px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.order-detail-item-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.od-item-img {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.od-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.od-item-meta h4 {
  font-size: 0.98rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 4px;
}

.od-item-sub {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0 0 4px;
}

.od-item-unit-calc {
  font-size: 0.85rem;
  color: #0077b6;
  font-weight: 500;
}

.od-item-total {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  text-align: right;
}

.order-pricing-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #475569;
}

.pricing-row.pricing-total {
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}

.status-summary-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.status-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  font-weight: 600;
  color: #475569;
  font-size: 0.92rem;
}

.od-retry-box {
  margin-top: 10px;
  padding: 16px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 12px;
}

.retry-hint {
  font-size: 0.85rem;
  color: #b45309;
  margin: 0 0 10px;
  font-weight: 600;
}

.order-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.order-info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.info-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  font-weight: 600;
}

.order-info-item strong {
  font-size: 0.95rem;
  color: #0f172a;
  word-break: break-word;
}

.order-notes-text {
  font-size: 0.9rem;
  color: #334155;
  background: #f8fafc;
  padding: 10px;
  border-radius: 8px;
  margin: 4px 0 0;
  font-style: italic;
}

.payment-action-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.ps-items-preview-wrap {
  margin-top: 20px;
  text-align: left;
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.ps-items-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ps-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 900px) {
  .order-details-layout {
    grid-template-columns: 1fr;
  }
  .order-card-body {
    grid-template-columns: 1fr;
  }
  .order-card-pricing {
    align-items: flex-start;
    text-align: left;
  }
}