/* Phase 3 — layout foundation: type, containers, cards, buttons, focus, motion */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-latin);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  min-width: 0;
}
html[lang="fa"] body,
html[lang="ar"] body,
[dir="rtl"] body {
  font-family: var(--font-fa);
  line-height: var(--lh-body-fa);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p, li, label, td, th, input, button, select, textarea, a {
  font-size: inherit;
}
small, .text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-muted, .text-3 { color: var(--c-text-3); }
.text-2 { color: var(--c-text-2); }

/* Nothing below 13px */
.btn, .nav-link, .badge, .form-control, .form-select,
.breadcrumb, .chip, .pill, .stat-label, .footer-nav-link {
  font-size: max(var(--fs-xs), 0.8125rem);
}

.pw-container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
.pw-container--sm { max-width: var(--container-sm); }
.pw-container--md { max-width: var(--container-md); }
.pw-container--xl { max-width: var(--container-xl); }

/* Card levels — do not nest .pw-card inside .pw-card */
.pw-card {
  background: var(--card-1-bg);
  border: var(--card-1-border);
  border-radius: var(--card-1-radius);
  box-shadow: var(--card-1-shadow);
  color: var(--c-text);
}
.pw-card--flat {
  background: var(--card-2-bg);
  border: var(--card-2-border);
  border-radius: var(--card-2-radius);
  box-shadow: var(--card-2-shadow);
}
.pw-card .pw-card,
.pw-card .main-content-card,
.hero-section .feature-card,
.hero-section .trust-badge.pw-card,
.main-content-card .hero-section {
  /* Kill accidental nesting chrome */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Buttons */
.pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.pw-btn:active { transform: scale(0.98); }
.pw-btn--primary {
  background: var(--c-cta-gradient, var(--c-brand));
  color: var(--c-on-brand);
  border-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(var(--c-brand-rgb), 0.4);
}
.pw-btn--primary:hover {
  background: var(--c-cta-gradient, var(--c-brand-hover));
  border-color: transparent;
  color: var(--c-on-brand);
  filter: brightness(1.04);
}
.pw-btn--secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.pw-btn--secondary:hover {
  background: var(--c-surface-2);
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.pw-btn--tertiary {
  background: transparent;
  color: var(--c-brand);
  border-color: transparent;
  padding-inline: var(--sp-3);
}
.pw-btn--tertiary:hover {
  background: var(--c-brand-subtle);
  color: var(--c-on-brand-subtle);
}
.pw-btn--icon {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--c-border);
}
.pw-btn--icon:hover {
  background: var(--c-brand-subtle);
  color: var(--c-brand);
  border-color: var(--c-brand);
}

/* Focus rings — never outline:none without replacement */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-focus) !important;
  outline-offset: 2px !important;
}
.pw-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-focus) !important;
  outline-offset: 2px !important;
}

/* Interactive tap targets */
.pw-icon-btn,
.site-header .pw-btn--icon,
.site-header .pw-theme-toggle,
.site-header .cart-trigger,
.site-header .navbar-toggler,
.site-header .lang-toggle,
.pharma-mobile-nav-item {
  min-width: var(--tap);
  min-height: var(--tap);
}

/* Skeletons */
.pw-skeleton {
  background: linear-gradient(
    90deg,
    var(--c-surface-2) 0%,
    var(--c-border) 50%,
    var(--c-surface-2) 100%
  );
  background-size: 200% 100%;
  animation: pw-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
@keyframes pw-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Micro-interactions (desktop hover lift only) */
@media (hover: hover) and (pointer: fine) {
  .pw-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--c-shadow-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pw-skeleton { animation: none; background: var(--c-surface-2); }
  .pw-btn:active, .pw-lift:hover { transform: none; }
}

/* Price isolation */
.pw-price, [data-price], .product-search-price, .total-amount {
  unicode-bidi: isolate;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}