/* Pawsome — warm playful pets theme (sage + soft pink + cream) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --pw-cream:    #fdf7ee;
  --pw-sage:     #a8c4a2;
  --pw-sage-dk:  #84a37f;
  --pw-pink:     #e9b8c4;
  --pw-pink-dk:  #c98497;
  --pw-ink:      #2d2a26;
  --pw-muted:    #7d756b;

  --color-paper: var(--pw-cream);
  --color-ink:   var(--pw-ink);
  --color-line:  transparent;
  --color-muted: var(--pw-muted);
  --color-cloud: #fff7f0;
}

body {
  background: var(--pw-cream);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--pw-ink);
}
h1, h2, h3, h4 {
  font-family: var(--font-display), "DM Serif Display", serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}
/* Nuke brutalist borders */
.border-ink                       { border-color: transparent !important; }
.border-b-\[3px\]                 { border-bottom-width: 0 !important; }
.border-y-\[3px\]                 { border-top-width: 0 !important; border-bottom-width: 0 !important; }
.border-\[2\.5px\]                { border-width: 0 !important; }
.border-b-\[2\.5px\]              { border-bottom-width: 0 !important; }
.border-\[3px\]                   { border-width: 0 !important; }
.shadow-\[3px_3px_0_\#0e0e0e\]    { box-shadow: 0 4px 12px rgba(132, 163, 127, 0.2) !important; }
.shadow-\[14px_14px_0_\#0e0e0e\]  { box-shadow: 0 20px 50px -16px rgba(132, 163, 127, 0.3) !important; }
.shadow-\[6px_6px_0_\#0e0e0e\]    { box-shadow: 0 10px 28px -8px rgba(132, 163, 127, 0.25) !important; }

header.sticky { background: var(--pw-cream) !important; border-bottom: 1px solid rgba(45,42,38,0.06) !important; }
header a[data-wordmark] { white-space: nowrap; }
header a[data-wordmark] > span {
  background: transparent !important; color: var(--pw-sage-dk) !important;
  border: 0 !important; padding: 0 !important;
  font-family: "DM Serif Display", serif; font-weight: 400; font-size: 1.5em;
  letter-spacing: 0; text-transform: none;
}
header a[data-wordmark] > span:last-of-type { padding-left: 0.25em !important; color: var(--pw-pink-dk) !important; font-style: italic; }
header a.flex.items-center.gap-2, header button {
  background: white !important; color: var(--pw-sage-dk) !important;
  border: 2px solid var(--pw-sage) !important; border-radius: 9999px !important;
  padding: 0.5rem 1rem !important; box-shadow: none !important; font-weight: 500;
}
header nav a { font-family: "Inter", sans-serif; color: var(--pw-ink) !important; font-weight: 500 !important; font-size: 0.85rem !important; letter-spacing: 0.05em; text-transform: uppercase; }
header nav a[href$="/shop"] { display: none !important; }

.marquee {
  background: var(--pw-sage) !important; color: white !important; border: 0 !important;
  font-family: "DM Serif Display", serif; font-style: italic; font-size: 0.95rem;
}
.marquee * { color: white !important; }

.btn {
  border: 0 !important; border-radius: 9999px !important; padding: 0.95rem 2rem !important;
  font-weight: 500; text-transform: none; font-family: "Inter", sans-serif;
  letter-spacing: 0.02em; font-size: 0.9rem !important;
  box-shadow: 0 4px 0 var(--pw-sage-dk); transition: transform 0.12s ease;
}
.btn:hover { transform: translateY(-1px) !important; }
.btn:active { transform: translateY(2px) !important; box-shadow: 0 2px 0 var(--pw-sage-dk) !important; }
.btn-accent { background: var(--pw-sage) !important; color: white !important; }
.btn-dark { background: var(--pw-ink) !important; color: var(--pw-cream) !important; box-shadow: 0 4px 0 #161412 !important; }
.btn-ghost { background: white !important; color: var(--pw-sage-dk) !important; border: 2px solid var(--pw-sage) !important; box-shadow: none !important; }

.card { border: 0 !important; border-radius: 20px !important; background: white !important; box-shadow: 0 8px 24px -8px rgba(132,163,127,0.2); overflow: hidden; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -8px rgba(132,163,127,0.3); }
.card .relative > span.eyebrow.absolute {
  left: auto !important; right: 0.75rem !important; top: 0.75rem !important;
  background: var(--pw-pink-dk) !important; color: white !important;
  border: 0 !important; border-radius: 9999px !important;
  font-size: 0.62rem !important; letter-spacing: 0.08em !important;
  padding: 0.25rem 0.7rem !important; font-family: "Inter", sans-serif; font-weight: 500;
  box-shadow: 0 4px 10px rgba(201,132,151,0.3) !important;
}
/* BuyBox sale flag (eyebrow with bg-accent) — sage chip with dark text */
.eyebrow.bg-accent { color: var(--pw-ink) !important; background: var(--pw-sage-dk) !important; border: 0 !important; color: white !important; padding: 0.2rem 0.6rem !important; border-radius: 9999px !important; }

.field { border: 2px solid var(--pw-pink) !important; border-radius: 14px !important; background: white; padding: 0.7rem 1rem; }
.field:focus { border-color: var(--pw-sage-dk) !important; outline: none !important; box-shadow: 0 0 0 4px rgba(168,196,162,0.2) !important; }

.mark { background: var(--pw-pink); padding: 0 0.2em; border-radius: 6px; color: var(--pw-ink); display: inline-block; transform: rotate(-1deg); }

.eyebrow { font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pw-sage-dk); font-size: 0.72rem; }

main > section:first-of-type { background: var(--pw-cream) !important; padding: 4rem 0 !important; }
main > section:first-of-type h1 { font-size: clamp(2.6rem, 5.5vw, 5rem) !important; color: var(--pw-ink) !important; }
main > section:first-of-type p { color: var(--pw-muted) !important; font-family: "DM Serif Display", serif; font-style: italic; font-size: 1.2rem !important; }
main > section:first-of-type img { border-radius: 20px !important; box-shadow: 0 20px 50px -20px rgba(132,163,127,0.4); }

h2 { color: var(--pw-ink) !important; }

section.bg-ink, section[class*="bg-ink"] {
  position: relative; background: var(--pw-sage) !important; color: white !important;
  padding: 5rem 1.5rem !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'><path d='M0,40 C240,0 480,80 720,40 C960,0 1200,80 1440,40 L1440,960 C1200,1000 960,920 720,960 C480,1000 240,920 0,960 Z' fill='black'/></svg>") no-repeat center/100% 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'><path d='M0,40 C240,0 480,80 720,40 C960,0 1200,80 1440,40 L1440,960 C1200,1000 960,920 720,960 C480,1000 240,920 0,960 Z' fill='black'/></svg>") no-repeat center/100% 100%;
}
section.bg-ink *, section[class*="bg-ink"] * { color: white !important; }
/* EXCEPTION: inputs have a white background — keep typed text dark. */
section.bg-ink .field, section[class*="bg-ink"] .field { color: var(--pw-ink) !important; }
section.bg-ink .btn-accent, section[class*="bg-ink"] .btn-accent, section.bg-ink button[type="submit"], section[class*="bg-ink"] button[type="submit"] {
  background: white !important; color: var(--pw-sage-dk) !important; box-shadow: 0 4px 0 rgba(0,0,0,0.1) !important;
}