/* WOODEN WOODWORKS — SHOP SHELL
   Related-but-distinct treatment: warm cream + walnut + brass (same family
   the WW Command Center owners dashboard uses) instead of the main site's
   dark navy portfolio look. Real hex values pulled from ww-portfolio.css
   and wwos/owners.html — nothing invented.
   Mobile-first: base styles = smallest screen, min-width media queries add
   layout for tablet (768px) and desktop (1280px). */

/* ─── TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* core palette (shared with wwos/owners.html) */
  --shop-bg:          #F3ECE0;
  --shop-bg-2:        #FBF8F2;
  --shop-card:        #FFFFFF;
  --shop-ink:         #2B2723;
  --shop-muted:       #857B6E;
  --shop-soft:        #A99E8E;
  --shop-walnut:      #5E4329;
  --shop-walnut-2:    #7A5836;
  --shop-brass:       #B08D4F;
  --shop-brass-dark:  #977636;
  --shop-sage:        #7E8B6D;
  --shop-line:        rgba(94, 67, 41, 0.15);
  --shop-line-2:      rgba(94, 67, 41, 0.07);

  /* from main site's own tokens, reused as-is */
  --shop-paper:       #F4E9DE;
  --shop-focus:       oklch(60% 0.150 250);

  --shop-font-serif: Georgia, 'Times New Roman', serif;
  --shop-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --shop-space-1: 0.25rem;
  --shop-space-2: 0.5rem;
  --shop-space-3: 0.75rem;
  --shop-space-4: 1rem;
  --shop-space-5: 1.25rem;
  --shop-space-6: 1.5rem;
  --shop-space-8: 2rem;
  --shop-space-10: 2.5rem;
  --shop-space-12: 3rem;
  --shop-space-16: 4rem;
  --shop-space-20: 5rem;

  --shop-radius-sm: 0.25rem;
  --shop-radius-md: 0.5rem;
  --shop-radius-lg: 0.75rem;

  --shop-ease: cubic-bezier(0.16, 1, 0.30, 1);
  --shop-dur: 220ms;

  --shop-max-width: 68rem;
  --shop-gutter: clamp(1.25rem, 5vw, 3rem);
}

/* ─── RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  font-family: var(--shop-font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--shop-ink);
  background: var(--shop-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.shop-container {
  width: 100%;
  max-width: var(--shop-max-width);
  margin-inline: auto;
  padding-inline: var(--shop-gutter);
}

:focus-visible {
  outline: 2px solid var(--shop-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── HEADER (distinct from main site nav) ───────────────────────────── */
.shop-header {
  background: var(--shop-bg-2);
  border-bottom: 1px solid var(--shop-line);
}
.shop-header__inner {
  width: 100%;
  max-width: var(--shop-max-width);
  margin-inline: auto;
  padding: var(--shop-space-4) var(--shop-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--shop-space-4);
  flex-wrap: wrap;
  min-height: 4rem;
}
.shop-header__brand {
  display: flex;
  align-items: center;
  gap: var(--shop-space-3);
  min-height: 44px;
}
.shop-header__logo {
  height: 34px;
  width: auto;
  /* source PNG is white-on-transparent (built for the main site's dark
     hero nav); force it to a dark silhouette so it reads on this light
     cream header, same trick ww-portfolio.css uses on its scrolled nav */
  filter: brightness(0);
  opacity: 0.85;
}
.shop-header__wordmark {
  font-family: var(--shop-font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--shop-walnut);
  border-left: 1px solid var(--shop-line);
  padding-left: var(--shop-space-3);
}
.shop-header__nav {
  display: flex;
  align-items: center;
  gap: var(--shop-space-5);
  flex-wrap: wrap;
}
.shop-header__link {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--shop-muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--shop-dur) var(--shop-ease);
}
.shop-header__link:hover { color: var(--shop-walnut); }
.shop-header__link--cta {
  padding: var(--shop-space-2) var(--shop-space-5);
  background: var(--shop-brass);
  color: #FFFFFF;
  border-radius: var(--shop-radius-md);
}
.shop-header__link--cta:hover {
  background: var(--shop-brass-dark);
  color: #FFFFFF;
}

/* ─── HERO ────────────────────────────────────────────────────────────── */
.shop-hero {
  padding-block: var(--shop-space-16) var(--shop-space-12);
  text-align: center;
}
.shop-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--shop-space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shop-brass-dark);
  margin-bottom: var(--shop-space-5);
}
.shop-hero__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--shop-brass);
}
.shop-hero__headline {
  font-family: var(--shop-font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--shop-walnut);
  font-size: clamp(1.875rem, 7vw, 3rem);
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--shop-space-5);
}
.shop-hero__sub {
  font-size: 1rem;
  color: var(--shop-ink);
  line-height: 1.75;
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--shop-space-3);
}
.shop-hero__sub + .shop-hero__sub {
  color: var(--shop-muted);
}

/* ─── COMING CATEGORIES ───────────────────────────────────────────────── */
.shop-categories {
  padding-block: var(--shop-space-8) var(--shop-space-16);
}
.shop-categories__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--shop-space-4);
}
.shop-category {
  background: var(--shop-card);
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius-lg);
  padding: var(--shop-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--shop-space-2);
}
.shop-category__icon {
  width: 28px;
  height: 28px;
  color: var(--shop-brass);
  margin-bottom: var(--shop-space-2);
}
.shop-category__name {
  font-family: var(--shop-font-serif);
  font-size: 1.125rem;
  color: var(--shop-walnut);
}
.shop-category__desc {
  font-size: 0.875rem;
  color: var(--shop-muted);
  line-height: 1.6;
}

/* ─── NOTIFY FORM ─────────────────────────────────────────────────────── */
.shop-notify {
  background: var(--shop-walnut);
  padding-block: var(--shop-space-16);
}
.shop-notify__inner {
  max-width: 32rem;
  margin-inline: auto;
  text-align: center;
}
.shop-notify__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shop-brass);
  margin-bottom: var(--shop-space-4);
}
.shop-notify__headline {
  font-family: var(--shop-font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: #FFFFFF;
  margin-bottom: var(--shop-space-3);
}
.shop-notify__sub {
  font-size: 0.9375rem;
  color: #D9CDBD;
  line-height: 1.65;
  margin-bottom: var(--shop-space-8);
}
.shop-form {
  display: flex;
  flex-direction: column;
  gap: var(--shop-space-4);
  text-align: left;
}
.shop-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--shop-space-4);
}
.shop-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--shop-space-2);
}
.shop-form__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D9CDBD;
}
.shop-form__input,
.shop-form__textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--shop-ink);
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: var(--shop-radius-md);
  padding: var(--shop-space-3) var(--shop-space-4);
  min-height: 44px;
  outline: none;
  width: 100%;
  transition: box-shadow var(--shop-dur) var(--shop-ease);
}
.shop-form__textarea { min-height: 90px; resize: vertical; }
.shop-form__input:focus,
.shop-form__textarea:focus {
  box-shadow: 0 0 0 3px rgba(176, 141, 79, 0.45);
}
.shop-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--shop-space-2);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--shop-walnut);
  background: var(--shop-brass);
  border-radius: var(--shop-radius-md);
  padding: var(--shop-space-3) var(--shop-space-6);
  min-height: 44px;
  transition: background var(--shop-dur) var(--shop-ease),
              transform var(--shop-dur) var(--shop-ease);
}
.shop-form__submit:hover { background: #C6A162; }
.shop-form__submit:active { transform: translateY(1px); }
.shop-form__note {
  font-size: 0.75rem;
  color: #B8AB98;
  text-align: center;
}
.shop-form__success {
  display: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(176, 141, 79, 0.5);
  border-radius: var(--shop-radius-md);
  padding: var(--shop-space-4);
  text-align: center;
}

/* ─── FOOTER (simpler than main site, same real details) ─────────────── */
.shop-footer {
  background: var(--shop-bg-2);
  border-top: 1px solid var(--shop-line);
  padding-block: var(--shop-space-10) var(--shop-space-6);
}
.shop-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--shop-space-8);
  margin-bottom: var(--shop-space-8);
}
.shop-footer__name {
  font-family: var(--shop-font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--shop-walnut);
  margin-bottom: var(--shop-space-1);
}
.shop-footer__tag {
  font-size: 0.8125rem;
  color: var(--shop-muted);
}
.shop-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--shop-space-2);
}
.shop-footer__link {
  font-size: 0.8125rem;
  color: var(--shop-ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--shop-dur) var(--shop-ease);
}
.shop-footer__link:hover { color: var(--shop-brass-dark); }
.shop-footer__addr {
  font-size: 0.8125rem;
  color: var(--shop-muted);
}
.shop-footer__social {
  display: flex;
  align-items: center;
  gap: var(--shop-space-3);
}
.shop-footer__social-link {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--shop-line);
  border-radius: 50%;
  color: var(--shop-walnut);
  transition: background var(--shop-dur) var(--shop-ease),
              color var(--shop-dur) var(--shop-ease);
}
.shop-footer__social-link:hover {
  background: var(--shop-brass);
  color: #FFFFFF;
}
.shop-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--shop-space-3);
  padding-top: var(--shop-space-6);
  border-top: 1px solid var(--shop-line-2);
  font-size: 0.75rem;
  color: var(--shop-soft);
}
.shop-footer__back {
  color: var(--shop-brass-dark);
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.shop-footer__back:hover { color: var(--shop-walnut); }

/* ─── TABLET (768px+) ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .shop-categories__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .shop-form__row {
    grid-template-columns: 1fr 1fr;
  }
  .shop-form__submit {
    align-self: flex-start;
    padding-inline: var(--shop-space-8);
  }
  .shop-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .shop-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ─── DESKTOP (1280px+) ───────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .shop-hero { padding-block: var(--shop-space-20) var(--shop-space-16); }
  .shop-hero__headline { font-size: 3.5rem; }
}