@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
  --public-font-body: "Poppins", Arial, sans-serif;
  --public-text-primary: #172033;
  --public-text-secondary: #3f4a5a;
  --public-text-muted: #667085;
  --public-brand-olive: #4d5f29;
  --public-brand-brown: #ae7045;
  --public-border: #e6e1d9;
  --public-body-size: 16px;
  --public-body-leading: 1.6;
  --public-cream: #fff9f2;
  --public-olive: var(--public-brand-olive);
  --public-brown: var(--public-brand-brown);
  --public-line: var(--public-border);
  --public-text: var(--public-text-primary);
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--public-font-body);
  font-size: var(--public-body-size);
  line-height: var(--public-body-leading);
  color: var(--public-text-primary);
}

.public-shell {
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fbf9f5f2;
  backdrop-filter: blur(14px);
  padding: 0;
  border-bottom: 1px solid var(--public-line);
}

.public-nav {
  min-height: 80px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.public-logo {
  display: block;
  width: 156px;
  height: 60px;
  overflow: hidden;
  color: var(--public-olive);
  text-decoration: none;
}

.public-logo picture,
.public-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.public-logo img {
  height: 60px;
  object-fit: contain;
}

.public-logo-academy {
  width: 198px;
}

.public-logo-academy img {
  object-fit: contain;
}

.public-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  color: var(--public-text);
  font-size: 16px;
  font-weight: 500;
}

.public-menu a {
  position: relative;
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.public-menu .is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--public-brown);
}

.public-userbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.public-icon-button {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #646a73;
  font-size: 22px;
}

.public-notification span {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: #a8481c;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.public-profile {
  display: grid;
  grid-template-columns: 42px auto auto;
  align-items: center;
  gap: 10px;
  padding-left: 18px;
  border-left: 1px solid #d9d3cb;
  color: inherit;
  text-decoration: none;
}

.public-profile-menu {
  position: relative;
  padding-left: 18px;
  border-left: 1px solid #d9d3cb;
}
.public-wishlist { position: relative; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin-right: 12px; border: 1px solid var(--public-line); border-radius: 50%; color: var(--public-brand-brown); font-size: 19px; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.public-wishlist:hover { background: #f3f6eb; color: var(--public-brand-olive); transform: translateY(-1px); }
.public-wishlist-count { position: absolute; top: -5px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--public-brand-brown); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.public-wishlist-count.is-empty { display: none; }

.public-profile-menu.is-hidden { display: none; }
.public-profile-menu .public-profile { padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.public-profile-copy { min-width: 92px; }
.public-profile-chevron { margin-left: 4px; color: var(--public-brand-olive); font-size: 22px; line-height: 1; transform: translateY(-2px); transition: transform .2s ease; }
.public-profile-menu.is-open .public-profile-chevron { transform: rotate(180deg) translateY(2px); }
.public-profile-dropdown { position: absolute; top: calc(100% + 14px); right: 0; min-width: 190px; padding: 8px; border: 1px solid var(--public-line); border-radius: 14px; background: #fffdf9; box-shadow: 0 16px 38px rgba(38, 48, 33, .16); }
.public-profile-dropdown a,
.public-profile-dropdown button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--public-text-primary); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.public-profile-dropdown [hidden] { display: none !important; }
.public-profile-dropdown a:hover,
.public-profile-dropdown button:hover { background: #f1f5e9; color: var(--public-brand-olive); }
.public-profile-dropdown span { width: 18px; color: var(--public-brand-brown); font-size: 18px; text-align: center; }
.public-profile-dropdown-divider { height: 1px; margin: 6px 4px; background: var(--public-line); }

.public-profile img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.public-profile strong,
.public-profile span {
  display: block;
}

.public-profile strong {
  color: #070a10;
  font-size: 14px;
  font-weight: 600;
}

.public-profile span {
  color: var(--public-text-muted);
  font-size: 14px;
}

.public-profile.is-hidden,
.public-auth-actions.is-hidden {
  display: none;
}

.public-auth-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-auth {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.public-auth-primary {
  background: var(--public-brown);
  color: #fff;
}

.public-auth-secondary {
  border: 1px solid var(--public-brown);
  background: #fff;
  color: var(--public-brown);
}

.public-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--public-line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.public-menu-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--public-olive);
}

.public-footer {
  background: #234626;
  color: rgba(255, 255, 255, 0.82);
  padding: 58px 0 22px;
}

.public-footer-grid {
  display: grid;
  grid-template-columns: 1.1fr .7fr .9fr 1.5fr;
  gap: 40px;
}

.public-footer-logo {
  display: block;
  width: 250px;
  max-width: 100%;
  height: auto;
  max-height: 88px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}

.public-footer h3 {
  margin: 5px 0 20px;
  color: #f6f7e8;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.4;
  letter-spacing: normal;
}

.public-footer nav a,
.public-footer-contact a {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}

.public-footer nav a:hover,
.public-footer-contact a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-footer-brand p,
.public-footer-contact p {
  margin: 19px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.55;
}

.public-footer-contact i {
  width: 18px;
  margin-right: 7px;
  color: #dce8c8;
  text-align: center;
}

.public-socials {
  display: flex;
  gap: 11px;
  margin-top: 25px;
}

.public-socials a {
  display: grid;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  transition: background .2s, transform .2s;
}

.public-socials a:hover {
  background: #627b4b;
  transform: translateY(-2px);
}

.public-footer-bottom {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  gap: 24px;
  margin-top: 42px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.public-footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  line-height: 1.5;
}

.public-footer { text-align: left; }
.public-header *, .public-footer *, .public-ready * { box-sizing: border-box; }
.public-footer-grid > * { min-width: 0; }
.public-footer a, .public-footer p { overflow-wrap: anywhere; }
.public-header a:hover { text-decoration: none; }
.public-menu a:hover { color: var(--public-brown); }
.public-auth-primary:hover { color: #fff; background: #925b35; }
.public-auth-secondary:hover { color: #925b35; background: #fff9f2; }
.public-store-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.public-footer .public-store-button { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 13px; background: #f9f7ef; border: 1px solid #dce8c8; border-radius: 9px; color: #234626; font-size: 16px; font-weight: 600; line-height: 1.25; text-decoration: none; }
.public-footer .public-store-button:hover { color: #234626; background: #eaf0df; text-decoration: none; }
.public-store-button small { display: block; font-size: 11px; font-weight: 400; }
.public-footer .public-store-button i { font-size: 25px; width: auto; margin: 0; color: inherit; }
.public-ready { position: relative; display: block; min-height: 0; overflow: hidden; margin: 0; padding: 56px 0; background: #925b35; text-align: center; color: #fff8e9; font-family: var(--public-font-body); }
.public-ready::before { content: ''; position: absolute; inset: 0 auto 0 -40px; width: 300px; background: url('../img/footer-leaf.png') center/contain no-repeat; opacity: .17; transform: rotate(35deg); pointer-events: none; }
.public-ready .public-shell { position: relative; z-index: 1; }
.public-ready-kicker { display: block; color: #f0d8b6; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.public-ready h2 { margin: 10px 0 0; color: #fff8e9; font: 600 clamp(32px, 3vw, 46px)/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: -.02em; }
.public-ready p { margin: 12px 0 26px; color: #f4e3cd; font: 400 16px/1.6 var(--public-font-body); }
.public-ready-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 46px; padding: 12px 24px; border-radius: 999px; background: #fff9ef; color: #223c23; font: 600 14px/1.5 var(--public-font-body); text-decoration: none; transition: background .2s, transform .2s; }
.public-ready-button:hover { color: #223c23; background: #fff; text-decoration: none; transform: translateY(-2px); }
.public-ready-button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.public-ready-note { position: absolute; right: 4%; top: 38px; color: #f1d2a8; opacity: .6; font: italic 32px/1.05 Georgia, serif; transform: rotate(-10deg); pointer-events: none; }
.public-skip { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: #234626; color: #fff; }
.public-skip:focus { top: 10px; }
@media (max-width: 1100px) { .public-ready-note { display: none; } }
@media (prefers-reduced-motion: reduce) { .public-ready-button, .public-socials a { transition: none; transform: none; } }

@media (max-width: 1240px) {
  .public-shell {
    width: calc(100% - 32px);
  }
}

/* Shared public type contract. Page styles may change layout and accent color,
   but these roles keep text readable and consistent across public routes. */
.public-header,
.public-footer {
  font-family: var(--public-font-body);
  font-size: 16px;
  line-height: 1.6;
}

.public-header a,
.public-header button,
.public-footer a,
.public-footer button,
.public-footer input {
  font-family: inherit;
}

.public-header button:focus-visible,
.public-header a:focus-visible,
.public-footer a:focus-visible,
.public-footer button:focus-visible,
.public-footer input:focus-visible {
  outline: 3px solid rgba(174, 112, 69, 0.38);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .public-nav {
    grid-template-columns: auto auto;
  }

  .public-menu-toggle {
    display: block;
    justify-self: end;
  }

  .public-logo-academy {
    width: 190px;
  }

  .public-menu,
  .public-userbar {
    grid-column: 1 / -1;
  }

  .public-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
  }

  .public-menu.is-open {
    display: flex;
  }

  .public-menu a {
    border-top: 1px solid var(--public-line);
  }

  .public-userbar {
    display: none;
  }

  .public-menu.is-open + .public-userbar {
    display: flex;
  }

  .public-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .public-shell {
    width: min(100% - 32px, 560px);
  }

  .public-logo {
    width: 58px;
    height: 58px;
  }

  .public-logo img {
    width: 58px;
    height: 60px;
  }

  .public-logo-academy {
    width: 64px;
  }

  .public-logo-academy img {
    width: 64px;
    height: 64px;
  }

  .public-userbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-auth-actions {
    width: 100%;
  }

  .public-auth {
    flex: 1;
  }

  .public-profile {
    width: 100%;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--public-line);
  }

  .public-profile-menu { width: 100%; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--public-line); }
  .public-profile-dropdown { position: static; margin-top: 10px; }

  .public-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .public-footer-bottom {
    flex-direction: column;
    align-items: center;
  }
}