/**
 * Purpilo Premium Design v2
 * Geometric precision, visual harmony, consistent rhythm
 * Applied after premium.css for final polish layer
 */

/* ===== REFINED DESIGN TOKENS ===== */
:root {
  /* Spacing scale: 4px base, golden ratio influenced */
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-space-10: 40px;
  --p-space-12: 48px;
  --p-space-16: 64px;
  --p-space-20: 80px;

  /* Consistent radius scale */
  --p-radius-xs: 6px;
  --p-radius-sm: 8px;
  --p-radius-md: 12px;
  --p-radius-lg: 16px;
  --p-radius-xl: 20px;
  --p-radius-2xl: 24px;
  --p-radius-full: 9999px;

  /* Refined shadows — layered for depth */
  --p-shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --p-shadow-2: 0 2px 4px rgba(0,0,0,0.02), 0 4px 12px rgba(86,69,147,0.04);
  --p-shadow-3: 0 4px 8px rgba(0,0,0,0.02), 0 8px 24px rgba(86,69,147,0.06);
  --p-shadow-4: 0 8px 16px rgba(0,0,0,0.03), 0 16px 40px rgba(86,69,147,0.08);
  --p-shadow-5: 0 12px 24px rgba(0,0,0,0.04), 0 24px 60px rgba(86,69,147,0.12);

  /* Type scale — harmonious */
  --p-text-xs: 0.6875rem;   /* 11px */
  --p-text-sm: 0.8125rem;   /* 13px */
  --p-text-base: 0.9375rem; /* 15px */
  --p-text-md: 1rem;        /* 16px */
  --p-text-lg: 1.125rem;    /* 18px */
  --p-text-xl: 1.375rem;    /* 22px */
  --p-text-2xl: 1.75rem;    /* 28px */
  --p-text-3xl: 2.25rem;    /* 36px */

  /* Surfaces */
  --p-surface-base: #fefefe;
  --p-surface-raised: #ffffff;
  --p-surface-sunken: #f7f8fa;
  --p-surface-overlay: rgba(255,255,255,0.96);
  --p-border-subtle: rgba(0,0,0,0.06);
  --p-border-default: rgba(0,0,0,0.08);
  --p-border-strong: rgba(0,0,0,0.12);
}

/* ===== GLOBAL HARMONY ===== */
body {
  background: var(--p-surface-base);
  letter-spacing: -0.01em;
}

/* Consistent container rhythm */
.container {
  max-width: 1280px;
  padding-left: var(--p-space-6);
  padding-right: var(--p-space-6);
}

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

/* ===== PREMIUM HEADER — Geometric Precision ===== */
header {
  height: 68px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--p-border-subtle) !important;
  box-shadow: none !important;
}

.header-container {
  height: 100%;
  gap: var(--p-space-6) !important;
}

.logo img {
  height: 42px !important;
  width: auto;
}

.nav-desktop ul {
  gap: var(--p-space-8) !important;
}

.nav-desktop a {
  font-size: var(--p-text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  padding-bottom: 4px !important;
  border-bottom-width: 2px !important;
}

/* Header search — clean and tight */
.header-search {
  max-width: 400px !important;
}

.header-search input {
  height: 40px !important;
  border-radius: var(--p-radius-full) !important;
  border: 1.5px solid var(--p-border-default) !important;
  padding: 0 40px 0 var(--p-space-4) !important;
  font-size: var(--p-text-sm) !important;
  background: var(--p-surface-sunken) !important;
  transition: all 200ms ease !important;
}

.header-search input:focus {
  background: var(--p-surface-raised) !important;
  border-color: var(--brand-purple-soft, #7c6bb5) !important;
  box-shadow: 0 0 0 3px rgba(86,69,147,0.06) !important;
}

.header-search button {
  width: 32px !important;
  height: 32px !important;
  right: 4px !important;
  border-radius: 50% !important;
}

/* Cart icon — geometric */
.cart-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--p-radius-md) !important;
  background: var(--p-surface-sunken) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  transition: all 200ms ease !important;
}

.cart-icon:hover {
  background: var(--brand-purple, #564593) !important;
  color: white !important;
  transform: none !important;
}

.cart-count {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: #ef4444 !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
}

/* ===== PRODUCT CARDS — Geometric Perfection ===== */
.product-card, article.product-card {
  border-radius: var(--p-radius-lg) !important;
  border: 1px solid var(--p-border-subtle) !important;
  box-shadow: var(--p-shadow-2) !important;
  overflow: hidden !important;
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.product-card:hover, article.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--p-shadow-4) !important;
  border-color: var(--p-border-strong) !important;
}

.product-card .product-image,
.product-card .product-image-link {
  aspect-ratio: 1 !important;
  background: var(--p-surface-sunken) !important;
  border-bottom: 1px solid var(--p-border-subtle);
}

.product-card .product-image img {
  padding: var(--p-space-4) !important;
  object-fit: contain !important;
}

.product-card .product-content {
  padding: var(--p-space-4) var(--p-space-5) var(--p-space-5) !important;
  gap: var(--p-space-2);
}

.product-card .product-category {
  font-size: var(--p-text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--brand-purple-soft, #7c6bb5) !important;
  margin-bottom: var(--p-space-1) !important;
}

.product-card .product-content h3 {
  font-size: var(--p-text-sm) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: var(--p-space-2) !important;
  color: #1a1a2e !important;
}

.product-card .product-price {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--brand-purple, #564593) !important;
  margin-bottom: var(--p-space-3) !important;
  display: flex !important;
  align-items: baseline !important;
  gap: var(--p-space-2) !important;
}

.product-card .product-price::before {
  display: none !important;
}

.product-card .product-btn {
  height: 42px !important;
  border-radius: var(--p-radius-md) !important;
  font-size: var(--p-text-sm) !important;
  font-weight: 700 !important;
  background: var(--brand-purple, #564593) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(86,69,147,0.15) !important;
  transition: all 200ms ease !important;
  letter-spacing: 0.01em;
}

.product-card .product-btn:hover {
  background: var(--brand-purple-deep, #3d2f6b) !important;
  box-shadow: 0 4px 16px rgba(86,69,147,0.25) !important;
  transform: none !important;
}

/* ===== PRODUCT GRID — Even spacing ===== */
.product-grid,
#products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: var(--p-space-6) !important;
}

@media (max-width: 768px) {
  .product-grid,
  #products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--p-space-3) !important;
  }
  
  .product-card .product-content {
    padding: var(--p-space-3) var(--p-space-3) var(--p-space-4) !important;
  }
  
  .product-card .product-content h3 {
    font-size: 12px !important;
  }
  
  .product-card .product-price {
    font-size: 1rem !important;
    margin-bottom: var(--p-space-2) !important;
  }
  
  .product-card .product-btn {
    height: 38px !important;
    font-size: 12px !important;
  }
}

/* ===== SECTION RHYTHM ===== */
section, .section {
  padding-top: var(--p-space-16) !important;
  padding-bottom: var(--p-space-16) !important;
}

@media (max-width: 768px) {
  section, .section {
    padding-top: var(--p-space-12) !important;
    padding-bottom: var(--p-space-12) !important;
  }
}

/* Section titles — consistent hierarchy */
.section-title h2,
.related-title,
.shop-header h1 {
  font-size: var(--p-text-2xl) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: #1a1a2e !important;
  line-height: 1.2 !important;
}

.section-title p {
  font-size: var(--p-text-base) !important;
  color: #6b7280 !important;
  margin-top: var(--p-space-2) !important;
  line-height: 1.6 !important;
}

/* ===== PAGINATION — Clean geometry ===== */
.pagination {
  gap: var(--p-space-2) !important;
  margin: var(--p-space-10) 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.page-item,
.pagination button,
.pagination a {
  min-width: 40px !important;
  height: 40px !important;
  border-radius: var(--p-radius-sm) !important;
  font-size: var(--p-text-sm) !important;
  font-weight: 600 !important;
  border: 1px solid var(--p-border-default) !important;
  background: var(--p-surface-raised) !important;
  color: #4b5563 !important;
  box-shadow: none !important;
  transition: all 150ms ease !important;
}

.page-item:hover,
.pagination button:hover {
  border-color: var(--brand-purple-soft, #7c6bb5) !important;
  color: var(--brand-purple, #564593) !important;
  background: var(--p-surface-sunken) !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-item.active,
.pagination .active {
  background: var(--brand-purple, #564593) !important;
  color: white !important;
  border-color: var(--brand-purple, #564593) !important;
  box-shadow: 0 2px 8px rgba(86,69,147,0.2) !important;
}

/* ===== FILTERS — Clean sidebar ===== */
.filter-section {
  margin-bottom: var(--p-space-5) !important;
  padding-bottom: var(--p-space-5) !important;
  border-bottom: 1px solid var(--p-border-subtle) !important;
}

.filter-section:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.filter-section-title {
  font-size: var(--p-text-sm) !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-bottom: var(--p-space-3) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--p-space-2) !important;
}

.filter-section-title .section-icon {
  font-size: 14px !important;
  color: var(--brand-purple-soft, #7c6bb5) !important;
}

.filter-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: var(--p-space-2) !important;
  padding: var(--p-space-2) 0 !important;
  font-size: var(--p-text-sm) !important;
  color: #4b5563 !important;
  cursor: pointer !important;
}

.filter-checkbox .count {
  margin-left: auto !important;
  font-size: var(--p-text-xs) !important;
  color: #9ca3af !important;
  background: var(--p-surface-sunken) !important;
  padding: 2px 6px !important;
  border-radius: var(--p-radius-xs) !important;
}

/* ===== BUTTONS — Consistent geometry ===== */
.btn, button.btn {
  height: 44px !important;
  padding: 0 var(--p-space-6) !important;
  border-radius: var(--p-radius-md) !important;
  font-size: var(--p-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: all 200ms ease !important;
  box-shadow: none !important;
}

.btn-primary, button.btn-primary, a.btn-primary {
  background: var(--brand-purple, #564593) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(86,69,147,0.15) !important;
}

.btn-primary:hover {
  background: var(--brand-purple-deep, #3d2f6b) !important;
  box-shadow: 0 4px 16px rgba(86,69,147,0.25) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary {
  background: white !important;
  color: var(--brand-purple, #564593) !important;
  border: 1.5px solid var(--brand-purple, #564593) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: var(--brand-purple, #564593) !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

/* ===== FORM INPUTS — Geometric consistency ===== */
.form-group input,
.form-group select,
.form-group textarea {
  height: 44px !important;
  padding: 0 var(--p-space-4) !important;
  border-radius: var(--p-radius-md) !important;
  border: 1.5px solid var(--p-border-default) !important;
  font-size: var(--p-text-sm) !important;
  transition: all 200ms ease !important;
  background: var(--p-surface-raised) !important;
}

.form-group textarea {
  height: auto !important;
  padding: var(--p-space-3) var(--p-space-4) !important;
  min-height: 100px !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--brand-purple-soft, #7c6bb5) !important;
  box-shadow: 0 0 0 3px rgba(86,69,147,0.06) !important;
  outline: none !important;
}

.form-group label {
  font-size: var(--p-text-sm) !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: var(--p-space-2) !important;
}

/* ===== FOOTER — Refined ===== */
footer {
  border-radius: var(--p-space-10) var(--p-space-10) 0 0 !important;
  padding-top: var(--p-space-16) !important;
  margin-top: var(--p-space-20) !important;
  background: linear-gradient(160deg, #564593 0%, #3d2f6b 100%) !important;
}

.footer-grid {
  gap: var(--p-space-10) !important;
  margin-bottom: var(--p-space-10) !important;
}

.footer-col h3 {
  font-size: var(--p-text-base) !important;
  font-weight: 700 !important;
  margin-bottom: var(--p-space-4) !important;
}

.footer-col a, .footer-col li {
  font-size: var(--p-text-sm) !important;
  margin-bottom: var(--p-space-2) !important;
}

.newsletter-input {
  border-radius: var(--p-radius-md) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.08) !important;
}

.newsletter-input input {
  padding: var(--p-space-3) var(--p-space-4) !important;
  font-size: var(--p-text-sm) !important;
  background: transparent !important;
  border: none !important;
  color: white !important;
}

.newsletter-input button {
  padding: 0 var(--p-space-5) !important;
  background: var(--brand-green, #5cc07d) !important;
  border: none !important;
}

.copyright {
  font-size: var(--p-text-xs) !important;
  padding: var(--p-space-6) 0 !important;
  opacity: 0.7;
}

/* ===== BREADCRUMB — Subtle ===== */
.breadcrumb {
  padding: var(--p-space-4) 0 !important;
  font-size: var(--p-text-sm) !important;
  color: #9ca3af !important;
}

.breadcrumb a {
  color: var(--brand-purple-soft, #7c6bb5) !important;
  font-weight: 600 !important;
}

.breadcrumb i {
  font-size: 9px !important;
  margin: 0 var(--p-space-2) !important;
  opacity: 0.5;
}

/* ===== CART SIDEBAR — Premium feel ===== */
.cart-sidebar-content {
  border-radius: var(--p-radius-xl) 0 0 var(--p-radius-xl) !important;
}

.cart-sidebar-header {
  padding: var(--p-space-5) var(--p-space-6) !important;
  background: linear-gradient(135deg, #564593, #3d2f6b) !important;
}

.cart-sidebar-header h3 {
  font-size: var(--p-text-md) !important;
  font-weight: 700 !important;
}

.cart-sidebar-item {
  border-radius: var(--p-radius-md) !important;
  padding: var(--p-space-3) !important;
  margin-bottom: var(--p-space-3) !important;
  background: var(--p-surface-sunken) !important;
}

/* ===== WHATSAPP BUTTON — Refined ===== */
.whatsapp-float-container .whatsapp-float {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--p-radius-lg) !important;
  box-shadow: var(--p-shadow-3) !important;
  padding: 12px !important;
}

.whatsapp-bubble {
  border-radius: var(--p-radius-md) !important;
  font-size: var(--p-text-sm) !important;
  padding: var(--p-space-2) var(--p-space-3) !important;
  box-shadow: var(--p-shadow-3) !important;
}

/* ===== SCROLL TO TOP — Consistent ===== */
#scrollToTop, .scroll-to-top {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--p-radius-md) !important;
  background: var(--brand-purple, #564593) !important;
  box-shadow: var(--p-shadow-3) !important;
  font-size: 16px !important;
}

/* ===== MOBILE MENU — Premium ===== */
.mobile-menu {
  border-radius: 0 var(--p-radius-2xl) var(--p-radius-2xl) 0 !important;
  padding: var(--p-space-8) var(--p-space-6) !important;
  box-shadow: var(--p-shadow-5) !important;
}

.mobile-nav a {
  font-size: var(--p-text-lg) !important;
  font-weight: 700 !important;
  padding: var(--p-space-3) 0 !important;
}

.mobile-nav li {
  margin-bottom: var(--p-space-4) !important;
}

/* ===== NOTIFICATION — Consistent ===== */
#cart-notification {
  border-radius: var(--p-radius-md) !important;
  padding: var(--p-space-3) var(--p-space-5) !important;
  font-size: var(--p-text-sm) !important;
  font-weight: 600 !important;
  box-shadow: var(--p-shadow-4) !important;
}

/* ===== SEARCH DROPDOWN — Clean ===== */
.search-results-dropdown {
  border-radius: var(--p-radius-lg) !important;
  box-shadow: var(--p-shadow-4) !important;
  border: 1px solid var(--p-border-subtle) !important;
  overflow: hidden !important;
}

.search-result-item {
  padding: var(--p-space-3) var(--p-space-4) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--p-space-3) !important;
  transition: background 150ms ease !important;
}

.search-result-item:hover {
  background: var(--p-surface-sunken) !important;
}

.search-result-item img {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--p-radius-sm) !important;
  object-fit: cover !important;
}

.search-result-name {
  font-size: var(--p-text-sm) !important;
  font-weight: 600 !important;
  color: #1a1a2e !important;
}

.search-result-price {
  font-size: var(--p-text-xs) !important;
  font-weight: 700 !important;
  color: var(--brand-purple, #564593) !important;
}

/* ===== LOADING SKELETONS — Smoother ===== */
@keyframes p-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.product-skeleton,
.skeleton-image,
.skeleton-text {
  background: linear-gradient(90deg, 
    var(--p-surface-sunken) 25%, 
    #eef0f3 50%, 
    var(--p-surface-sunken) 75%) !important;
  background-size: 200% 100% !important;
  animation: p-shimmer 1.5s ease-in-out infinite !important;
  border-radius: var(--p-radius-md) !important;
}

/* ===== SMOOTH PAGE TRANSITIONS ===== */
main, .container > * {
  animation: p-fadeIn 300ms ease;
}

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

@media (prefers-reduced-motion: reduce) {
  main, .container > * {
    animation: none;
  }
}