:root {
  color-scheme: light;
  --pj-primary: #f35422;
  --pj-primary-hover: #d8461b;
  --pj-primary-active: #b93817;
  --pj-primary-soft: #fff1e8;
  --pj-primary-subtle: #fff7f2;
  --pj-secondary: #704738;
  --pj-accent: #168f82;
  --pj-accent-soft: #e7fbf7;
  --pj-bg: #f8f6f3;
  --pj-bg-warm: #fff8f3;
  --pj-surface: #ffffff;
  --pj-surface-soft: #fffaf7;
  --pj-border: #eadfd8;
  --pj-border-strong: #dbc9bf;
  --pj-text: #182232;
  --pj-text-secondary: #4f5f70;
  --pj-text-muted: #7b8795;
  --pj-success: #16834f;
  --pj-success-soft: #e8f7ef;
  --pj-warning: #a86413;
  --pj-warning-soft: #fff6df;
  --pj-error: #c2412d;
  --pj-error-soft: #fff0ec;
  --pj-space-1: 4px;
  --pj-space-2: 8px;
  --pj-space-3: 12px;
  --pj-space-4: 16px;
  --pj-space-5: 20px;
  --pj-space-6: 24px;
  --pj-space-8: 32px;
  --pj-space-10: 40px;
  --pj-radius-sm: 8px;
  --pj-radius-md: 12px;
  --pj-radius-lg: 16px;
  --pj-shadow-sm: 0 1px 2px rgba(24, 34, 50, .06);
  --pj-shadow-card: 0 10px 28px rgba(79, 45, 31, .08);
  --pj-shadow-panel: 0 18px 48px rgba(79, 45, 31, .10);
  --pj-focus: 0 0 0 3px rgba(243, 84, 34, .22);
}

html {
  text-rendering: optimizeLegibility;
}

body {
  background: var(--pj-bg) !important;
  color: var(--pj-text);
}

body,
button,
input,
textarea,
select {
  letter-spacing: 0 !important;
}

#root {
  background:
    linear-gradient(180deg, rgba(255, 248, 243, .72), rgba(248, 246, 243, 1) 38%, rgba(248, 246, 243, 1)) !important;
}

h1,
h2,
h3 {
  color: var(--pj-text) !important;
  letter-spacing: 0 !important;
}

h1 {
  font-size: clamp(2rem, 4vw, 4rem) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
}

h2 {
  font-size: clamp(1.35rem, 2.4vw, 2.35rem) !important;
  line-height: 1.18 !important;
  font-weight: 820 !important;
}

h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  line-height: 1.28 !important;
}

p {
  color: var(--pj-text-secondary);
  line-height: 1.72;
}

a {
  color: var(--pj-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--pj-primary-hover);
}

button,
a,
input,
textarea,
select {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  box-shadow: var(--pj-focus) !important;
}

input,
textarea,
select,
.input,
.\!input {
  min-height: 44px;
  border-color: var(--pj-border) !important;
  border-radius: var(--pj-radius-sm) !important;
  background: var(--pj-surface) !important;
  color: var(--pj-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--pj-text-muted) !important;
  opacity: 1 !important;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 0 !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px;
  padding: 0 !important;
  border: 2px solid var(--pj-border-strong) !important;
  background: #fff !important;
  box-shadow: none !important;
}

input[type="checkbox"] {
  border-radius: 6px !important;
}

input[type="radio"] {
  border-radius: 999px !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--pj-primary);
}

nav.navbar {
  border-color: rgba(234, 223, 216, .9) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 1px 0 rgba(24, 34, 50, .04);
  backdrop-filter: blur(14px);
}

nav.navbar a {
  color: var(--pj-text) !important;
  font-weight: 650;
}

nav.navbar a:hover {
  color: var(--pj-primary) !important;
}

button[class*="bg-primary"],
button[class*="bg-orange"],
button[class*="bg-[#ff"],
a[class*="bg-primary"],
a[class*="bg-orange"],
a[class*="bg-[#ff"],
.navbar .login {
  background: var(--pj-primary) !important;
  color: #fff !important;
  border-color: var(--pj-primary) !important;
}

button[class*="bg-primary"]:hover,
button[class*="bg-orange"]:hover,
button[class*="bg-[#ff"]:hover,
a[class*="bg-primary"]:hover,
a[class*="bg-orange"]:hover,
a[class*="bg-[#ff"]:hover,
.navbar .login:hover {
  background: var(--pj-primary-hover) !important;
  color: #fff !important;
}

.navbar .register,
.navbar .register:visited {
  background: #fff !important;
  color: var(--pj-primary) !important;
  border-color: var(--pj-primary) !important;
}

.navbar .register:hover {
  background: var(--pj-primary-soft) !important;
  color: var(--pj-primary-hover) !important;
  border-color: var(--pj-primary-hover) !important;
}

body[data-paljai-route="login"] a[href*="/register"],
body[data-paljai-route="register"] a[href*="/login"] {
  color: var(--pj-primary) !important;
  font-weight: 800 !important;
}

body[data-paljai-route="login"] a[href*="/register"]:hover,
body[data-paljai-route="register"] a[href*="/login"]:hover {
  color: var(--pj-primary-hover) !important;
}

.card,
[class*="rounded-2xl"][class*="bg-white"],
[class*="rounded-3xl"][class*="bg-white"] {
  border-color: rgba(234, 223, 216, .95) !important;
  box-shadow: var(--pj-shadow-sm) !important;
}

.card:hover,
[class*="rounded-2xl"][class*="bg-white"]:hover,
[class*="rounded-3xl"][class*="bg-white"]:hover {
  box-shadow: var(--pj-shadow-card) !important;
}

body[data-paljai-route="marketplace"] main > div:first-child,
body[data-paljai-route="market"] main > div:first-child {
  background: var(--pj-bg) !important;
}

body[data-paljai-route="marketplace"] header.relative,
body[data-paljai-route="market"] header.relative {
  background:
    linear-gradient(105deg, #f65a1f 0%, #ea4c1d 48%, #cf341f 100%) !important;
  min-height: clamp(250px, 26vw, 380px);
}

body[data-paljai-route="marketplace"] header.relative h1,
body[data-paljai-route="market"] header.relative h1,
body[data-paljai-route="marketplace"] header.relative p,
body[data-paljai-route="market"] header.relative p {
  color: #fff !important;
}

body[data-paljai-route="marketplace"] header.relative h1,
body[data-paljai-route="market"] header.relative h1 {
  max-width: 760px;
  text-wrap: balance;
}

body[data-paljai-route="marketplace"] header.relative input,
body[data-paljai-route="market"] header.relative input {
  min-height: 48px;
  border-radius: 999px !important;
}

body[data-paljai-route="marketplace"] header.relative button,
body[data-paljai-route="market"] header.relative button {
  border-radius: 999px !important;
  background: #181f2b !important;
}

body[data-paljai-route="marketplace"] section,
body[data-paljai-route="market"] section {
  background: transparent !important;
}

body[data-paljai-route="marketplace"] section[class*="py-10"],
body[data-paljai-route="market"] section[class*="py-10"] {
  padding-top: clamp(32px, 5vw, 64px) !important;
  padding-bottom: clamp(32px, 5vw, 64px) !important;
}

body[data-paljai-route="marketplace"] [class*="grid"][class*="grid-cols"] > [class*="group"][class*="border"],
body[data-paljai-route="market"] [class*="grid"][class*="grid-cols"] > [class*="group"][class*="border"],
body[data-paljai-route="profile"] [class*="grid"][class*="grid-cols"] > [class*="group"][class*="border"] {
  border-color: rgba(234, 223, 216, .95) !important;
  border-radius: var(--pj-radius-md) !important;
  box-shadow: var(--pj-shadow-sm) !important;
  overflow: hidden;
}

body[data-paljai-route="marketplace"] [class*="grid"][class*="grid-cols"] > [class*="group"][class*="border"]:hover,
body[data-paljai-route="market"] [class*="grid"][class*="grid-cols"] > [class*="group"][class*="border"]:hover,
body[data-paljai-route="profile"] [class*="grid"][class*="grid-cols"] > [class*="group"][class*="border"]:hover {
  box-shadow: var(--pj-shadow-card) !important;
  transform: translateY(-2px);
}

body[data-paljai-route="marketplace"] [class*="grid"] img,
body[data-paljai-route="market"] [class*="grid"] img,
body[data-paljai-route="pets"] img,
body[data-paljai-route="profile"] img {
  background: var(--pj-primary-subtle);
}

body[data-paljai-route="pets"] main > div,
body[data-paljai-route="pets"] section {
  background: var(--pj-bg) !important;
}

body[data-paljai-route="pets"] main [class*="rounded-3xl"],
body[data-paljai-route="pets"] main [class*="rounded-2xl"] {
  border-color: rgba(234, 223, 216, .95) !important;
  box-shadow: var(--pj-shadow-card) !important;
}

body[data-paljai-route="login"],
body[data-paljai-route="register"] {
  background: var(--pj-bg-warm) !important;
}

body[data-paljai-route="login"] input,
body[data-paljai-route="register"] input {
  min-height: 48px;
}

body[data-paljai-route="seller"] main,
body[data-paljai-route="profile"] main {
  background: var(--pj-bg) !important;
}

body[data-paljai-route="seller"] [class*="rounded-3xl"],
body[data-paljai-route="seller"] [class*="rounded-2xl"],
body[data-paljai-route="profile"] [class*="rounded-3xl"],
body[data-paljai-route="profile"] [class*="rounded-2xl"] {
  border-color: rgba(234, 223, 216, .95) !important;
}

.paljai-feed-hero {
  width: min(720px, calc(100% - 32px));
  margin: 24px auto 18px;
  border: 1px solid rgba(234, 223, 216, .95);
  border-radius: var(--pj-radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 241, 232, .96), rgba(255, 255, 255, .98));
  box-shadow: var(--pj-shadow-card);
  padding: clamp(18px, 3vw, 28px);
}

.paljai-feed-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--pj-primary-soft);
  color: var(--pj-primary-hover);
  font-size: 12px;
  font-weight: 800;
}

.paljai-feed-hero h1 {
  margin-top: 12px;
  font-size: clamp(1.65rem, 4vw, 2.7rem) !important;
}

.paljai-feed-hero p {
  margin-top: 10px;
  max-width: 56ch;
  font-size: 1rem;
}

.paljai-feed-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.paljai-feed-hero__actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 16px;
  font-weight: 800;
  text-decoration: none;
}

.paljai-feed-hero__actions a:first-child {
  background: var(--pj-primary);
  color: #fff;
}

.paljai-feed-hero__actions a:last-child {
  border: 1px solid var(--pj-border);
  background: #fff;
  color: var(--pj-primary);
}

.paljai-feed-grid-host {
  position: relative;
}

.paljai-feed-desktop-rail {
  display: none;
}

.paljai-feed-rail-card {
  border: 1px solid rgba(234, 223, 216, .95);
  border-radius: var(--pj-radius-lg);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--pj-shadow-card);
  padding: 18px;
}

.paljai-feed-rail-card + .paljai-feed-rail-card {
  margin-top: 14px;
}

.paljai-feed-rail-card h2 {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  margin: 0 0 4px;
}

.paljai-feed-rail-card p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--pj-text-secondary);
}

.paljai-feed-rail-list,
.paljai-feed-rail-tags {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.paljai-feed-rail-link,
.paljai-feed-rail-tag {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid var(--pj-border);
  background: var(--pj-surface);
  color: var(--pj-text) !important;
  padding: 9px 11px;
  font-size: .9rem;
  font-weight: 750;
  text-decoration: none;
}

.paljai-feed-rail-link:hover,
.paljai-feed-rail-tag:hover {
  border-color: rgba(243, 84, 34, .32);
  background: var(--pj-primary-soft);
  color: var(--pj-primary-hover) !important;
}

.paljai-feed-rail-link span:last-child {
  color: var(--pj-primary);
  font-size: .95rem;
}

.paljai-feed-rail-note {
  margin-top: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pj-primary-soft), #fff);
  padding: 12px;
  color: var(--pj-text-secondary);
  font-size: .85rem;
  line-height: 1.55;
}

@media (min-width: 1180px) {
  body[data-paljai-feed-layout="balanced"] .paljai-feed-grid-host {
    display: grid !important;
    grid-template-columns: minmax(220px, 260px) minmax(600px, 672px) minmax(220px, 260px);
    justify-content: center;
    align-items: start;
    gap: 24px;
    padding: 20px clamp(24px, 4vw, 64px) 56px !important;
  }

  body[data-paljai-feed-layout="balanced"] .paljai-feed-grid-host > .mx-auto,
  body[data-paljai-feed-layout="balanced"] .paljai-feed-grid-host > [class*="max-w-2xl"] {
    width: 100% !important;
    max-width: 672px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  body[data-paljai-feed-layout="balanced"] .paljai-feed-desktop-rail {
    display: block;
    position: sticky;
    top: 82px;
    align-self: start;
  }
}

.paljai-ai-empty-state {
  border: 1px solid var(--pj-border);
  background: var(--pj-surface-soft);
  border-radius: var(--pj-radius-lg);
  padding: 24px;
  color: var(--pj-text);
  box-shadow: var(--pj-shadow-card);
}

.paljai-ai-empty-state h1 {
  margin: 0 0 8px;
  font-size: clamp(22px, 4vw, 32px) !important;
  line-height: 1.2 !important;
  font-weight: 850;
}

.paljai-ai-empty-state p {
  margin: 0 0 18px;
}

.paljai-ai-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.paljai-ai-empty-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 800;
  text-decoration: none;
}

.paljai-ai-empty-actions a:first-child,
.paljai-ai-empty-actions a:first-child:visited {
  background: var(--pj-primary) !important;
  color: #fff !important;
}

.paljai-ai-empty-actions a:last-child,
.paljai-ai-empty-actions a:last-child:visited {
  background: #fff !important;
  color: var(--pj-primary) !important;
  border: 1px solid var(--pj-border);
}

.paljai-ai-no-shop-banner {
  margin: 16px auto 0;
  max-width: 1184px;
  border: 1px solid #f1d4c5;
  background: var(--pj-surface-soft);
  border-radius: var(--pj-radius-md);
  padding: 14px 18px;
  color: var(--pj-text);
  box-shadow: var(--pj-shadow-sm);
}

.paljai-ai-no-shop-banner strong {
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
}

.paljai-ai-no-shop-banner span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pj-text-secondary);
}

.paljai-ai-no-shop-banner a {
  display: inline-flex;
  margin-top: 9px;
  color: var(--pj-primary) !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: clamp(1.9rem, 8vw, 2.5rem) !important;
  }

  h2 {
    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
  }

  nav.navbar {
    min-height: 56px;
  }

  body[data-paljai-route="marketplace"] header.relative,
  body[data-paljai-route="market"] header.relative {
    min-height: 216px;
  }

  body[data-paljai-route="marketplace"] header.relative h1,
  body[data-paljai-route="market"] header.relative h1 {
    font-size: clamp(1.35rem, 7vw, 2.1rem) !important;
  }

  body[data-paljai-route="marketplace"] [class*="grid"][class*="grid-cols"],
  body[data-paljai-route="market"] [class*="grid"][class*="grid-cols"] {
    gap: 12px !important;
  }

  body[data-paljai-route="marketplace"] [class*="grid"][class*="grid-cols"] > [class*="group"][class*="border"],
  body[data-paljai-route="market"] [class*="grid"][class*="grid-cols"] > [class*="group"][class*="border"] {
    border-radius: 10px !important;
  }

  .paljai-feed-hero {
    width: calc(100% - 24px);
    margin: 14px auto;
    padding: 18px;
  }

  .paljai-feed-hero__actions a,
  .paljai-ai-empty-actions a {
    width: 100%;
  }

  .paljai-ai-empty-state {
    margin: 16px;
    padding: 20px;
    border-radius: var(--pj-radius-md);
  }

  .paljai-ai-no-shop-banner {
    margin: 12px 12px 0;
    padding: 14px;
  }
}