/*
  style.css = how the page LOOKS.
*/

/* ---------- 1. Variables: change the theme here ---------- */
:root {
  --color-primary: #2e7d32;   /* main green */
  --color-primary-dark: #1b5e20; /* darker green for gradients */
  --color-accent: #c5e1a5;    /* light green highlight */
  --color-text: #222222;
  --color-bg: #ffffff;
  --color-bg-alt: #eef6ee;    /* pale green section background */
  --font-main: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max-width: 1500px;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}

.section {
  padding: 80px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

.center {
  text-align: center;
}

/*
  Nav links scroll each section's top edge to the top of the screen.
  The nav bar sits over the section's top padding, so nothing is hidden.
*/
section {
  scroll-margin-top: 0px;
}

/* ---------- 2b. Nav bar ---------- */
.site-nav {
  position: fixed;            /* stays at the top while scrolling */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;               /* sits above everything else */
  background: rgba(27, 94, 32, 0.95);
  backdrop-filter: blur(6px); /* frosted-glass blur behind the bar */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-100%);  /* pushed up out of sight by default */
  transition: transform 0.35s ease;
}

/* script.js adds .show once the hero is out of view */
.site-nav.show {
  transform: translateY(0);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;  /* brand on the left, links on the right */
  align-items: center;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.nav-brand img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.2s;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Products stands out, since it opens a separate page */
.nav-links a.nav-cta {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.nav-links a.nav-cta:hover {
  background: #fff;
}

/* ---------- 3. Hero ---------- */
/* min-height: 100vh = fill the whole screen (vh = % of viewport height) */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;     /* stack items vertically */
  justify-content: center;    /* centre vertically */
  align-items: center;        /* centre horizontally */
  text-align: center;
  padding: 24px 16px;
  /*
    Deep green tint: darker at the top and bottom, slightly lighter in the
    middle. Keeps the green theme but is dark enough for white text to pop.

    var(--hero-image, ...) means: use the photo uploaded on admin.html if
    there is one (site-common.js sets --hero-image), otherwise images/hero.jpg.
  */
  background:
    linear-gradient(
      rgba(8, 35, 12, 0.75),
      rgba(20, 70, 28, 0.6) 50%,
      rgba(8, 35, 12, 0.8)
    ),
    var(--hero-image, url("images/hero.jpg")) center / cover no-repeat;
  color: #fff;
  position: relative;         /* lets .scroll-hint position itself inside */
}

.logo {
  width: 200px;
  height: 200px;
  border-radius: 50%;         /* makes it a circle */
  object-fit: contain;        /* shows the whole logo, so the phone numbers aren't cut off */
  margin-bottom: 28px;
  /* Soft glow so the logo lifts off the background */
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.85),   /* thin white ring */
    0 8px 30px rgba(0, 0, 0, 0.5);         /* drop shadow */
}

/* Temporary look until the real logo is added */
.logo-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px dashed var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 2px;
}

.hero h1 {
  font-size: 3.2rem;
  font-weight: 800;           /* bolder title */
  letter-spacing: 0.5px;
  margin: 0;
}

/* Two shadows: a tight one for crisp edges, a wide one for contrast */
.hero h1,
.tagline {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.7),
    0 4px 20px rgba(0, 0, 0, 0.6);
}

/* Tagline in the light green accent so it ties to the theme */
.tagline {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-accent);
  margin-top: 8px;
}

.scroll-hint {
  position: absolute;
  bottom: 24px;
  color: #fff;
  font-size: 2rem;
  text-decoration: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  animation: bounce 2s infinite;
}

/* @keyframes defines an animation; "bounce" is used just above */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ---------- 4. Find Us ---------- */
/*
  Make the section fill the whole screen and centre its content vertically,
  the same trick the hero uses.
*/
.section-full {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.section-full > .container {
  width: 100%;                /* flex would otherwise shrink the container */
}

/* Centred intro (heading + description) above the map */
.intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.intro h2 {
  font-size: 2.6rem;
  color: var(--color-primary);
  margin: 0 0 12px;
}

.intro-text {
  font-size: 1.35rem;
  line-height: 1.5;
  color: #444;
  margin: 0;
}

/* Map + details side by side */
.two-col {
  display: grid;
  /* map column up to 480px, text column up to 420px */
  grid-template-columns: minmax(0, 480px) minmax(0, 420px);
  justify-content: center;    /* centre the two columns as a group */
  align-items: center;        /* centre them vertically against each other */
  gap: 48px;
}

.map {
  width: 100%;
  aspect-ratio: 4 / 3;        /* 480 × 360 at full size */
  border-radius: 12px;
  overflow: hidden;
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  border: 2px dashed #aaa;
  border-radius: 12px;
  color: #777;
}

/* Slightly larger details text to balance the map */
.info p {
  font-size: 1.1rem;
}

.info a {
  color: var(--color-primary);
  font-weight: 600;
}

/* Small link tucked right under the opening hours */
.info .hours-link {
  font-size: 0.95rem;
  margin-top: -8px;           /* pull it closer to the hours line */
}

/* ---------- 5. Socials ---------- */
/* inline-flex lines the icon and the text up side by side, centred */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 160px;
  padding: 14px 24px;
  border-radius: 999px;       /* pill shape */
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s;
}

.social-btn:hover {
  transform: translateY(-3px);
}

.tiktok {
  background: #111;
}

.facebook {
  background: #1877f2;
}

.instagram {
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
}

/* "In progress" state: greyed out, not clickable, with a striped barrier */
.social-btn.disabled {
  background: repeating-linear-gradient(
    45deg,
    #bdbdbd,
    #bdbdbd 10px,
    #9e9e9e 10px,
    #9e9e9e 20px
  );                          /* diagonal "construction" stripes */
  color: #333;
  cursor: not-allowed;
}

.social-btn.disabled:hover {
  transform: none;            /* no lift effect, since it can't be clicked */
}

/* The icon: a little bigger than the text */
.social-btn i {
  font-size: 1.25rem;
}

/* Keeps "Instagram" and "In progress" stacked next to the icon */
.social-btn span {
  text-align: left;
  line-height: 1.3;
}

.social-btn small {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
}

/* ---------- 5b. Social columns: button with its video underneath ---------- */
/*
  Grid with auto-fit: as many 300px+ columns as fit side by side.
  On a laptop that's three; on a phone they stack into one.
*/
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  align-items: start;          /* columns don't stretch to match heights */
  margin-top: 40px;
}

/* Each column stacks its button on top of its video, centred */
.social-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.video-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

/* Instagram placeholder: same size as the Facebook feed, dashed border */
.video-placeholder {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  border: 2px dashed #bdbdbd;
  box-shadow: none;
  background: #fafafa;
  color: #777;
}

.video-placeholder p {
  margin: 4px 0;
}

.placeholder-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

/* TikTok adds its own margins; trim them so the card stays tidy */
.video-card .tiktok-embed {
  margin: 0;
}

.fb-feed {
  border: none;
  overflow: hidden;
  max-width: 100%;            /* never wider than the screen on phones */
}

/* TikTok feed: TikTok's embed page, same height as the other cards */
.tiktok-feed {
  width: 100%;
  height: 560px;
  border: none;
  border-radius: 8px;
}

/* Facebook card: page header on top, then text + button, centred */
.facebook-card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 560px;          /* lines up with the TikTok and Instagram cards */
}

.facebook-card p {
  margin: 0;
  color: #555;
}

.facebook-posts-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #1877f2;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s;
}

.facebook-posts-btn:hover {
  transform: translateY(-2px);
}

/* ---------- 6. Scroll reveal ---------- */
/*
  Sections start invisible, and their CONTENTS start slightly lower.
  Only the inner .container moves, not the section itself. If the section
  moved, nav links would scroll to the shifted position and land short.
*/
.reveal {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.reveal > .container {
  transform: translateY(40px);
  transition: transform 0.8s ease;
}

/* script.js adds .visible when they scroll into view */
.reveal.visible {
  opacity: 1;
}

.reveal.visible > .container {
  transform: none;
}

/* ---------- 7. Footer ---------- */
.site-footer {
  background: #1b1b1b;
  color: #ccc;
  text-align: center;
  padding: 24px 16px;
  font-size: 0.9rem;
}

/* ---------- 7b. Google Translate ---------- */
/* Floating pill in the bottom-right corner: globe icon + our dropdown */
.translate-box {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;               /* above the nav bar and everything else */
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  color: var(--color-primary);
}

.translate-box i {
  font-size: 1.1rem;
}

/* Our own language dropdown */
#lang-select {
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 4px 6px;
  cursor: pointer;
}

/* Google's own widget does the translating, but stays out of sight */
#google_translate_element {
  display: none;
}

/* Hide the pop-up tooltip and hover highlight Google adds to translated text */
#goog-gt-tt,
.goog-tooltip {
  display: none !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/*
  When a language is picked, Google adds a toolbar across the top of the
  page and pushes everything down. These two rules hide that toolbar and
  undo the push, so our own nav bar stays in place.
  !important is needed because Google sets these with inline styles.
*/
/*
  Google wraps its toolbar in a <div class="skiptranslate"> placed directly
  inside <body>. The ">" means "direct child only", so this hides the
  toolbar but not anything else Google marks with that class.
*/
body > .skiptranslate {
  display: none !important;
}

/* Older versions of the toolbar, just in case */
.goog-te-banner-frame {
  display: none !important;
}

/* Undo the space Google pushes the page down by */
body {
  top: 0 !important;
  position: static !important;
}

/* ---------- 8. Phones (768px wide or less) ---------- */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }

  .logo {
    width: 160px;
    height: 160px;
  }

  /* Smaller intro text on phones */
  .intro {
    margin-bottom: 32px;
  }

  .intro h2 {
    font-size: 2rem;
  }

  .intro-text {
    font-size: 1.1rem;
  }

  /* Stack map above details, and keep the map centred */
  .two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .map {
    max-width: 480px;
    margin: 0 auto;
  }


  /* Shorter Instagram placeholder + Facebook card on phones */
  .video-placeholder,
  .facebook-card {
    min-height: 220px;
  }

  /* Nav: hide the shop name so the three buttons fit */
  .nav-brand span {
    display: none;
  }

  .nav-links a {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}

/* ---------- 9. Products page ---------- */
/*
  Everything below is only used on products.html (moved here from the
  <style> block that used to be in its <head>).

  products.html has <body class="products-page">. Starting a rule with
  ".products-page" means it ONLY applies on that page, so it can't
  affect the home page.
*/

/* On the home page the nav slides in after the hero. The products page
   has no big hero, so keep the nav visible from the start. */
.products-page .site-nav {
  transform: translateY(0);
}

/* Short version of the hero: same green tint and photo, but not full
   screen. Extra top padding keeps the title clear of the nav bar. */
.hero.page-hero {
  min-height: 45vh;
  padding-top: 90px;
}

/* Highlights the link for the page you're on */
.nav-links a.current {
  background: rgba(255, 255, 255, 0.15);
}

/* The Products button is already highlighted, so on its own page it
   goes white instead of see-through (keeps the dark text readable) */
.nav-links a.nav-cta.current {
  background: #fff;
}

/* Products section: fills at least the rest of the screen */
.products-section {
  min-height: 55vh;
}

/* Responsive grid: as many 260px+ cards per row as fit.
   Wide screens get several columns, phones get one. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

/* One product card; same look as .video-card on the home page */
.product-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;           /* keeps the photo inside the rounded corners */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}

.product-card:hover {
  transform: translateY(-3px);
}

.product-card img {
  width: 100%;
  aspect-ratio: 4 / 3;        /* every photo gets the same shape */
  object-fit: cover;          /* crops to fill, never stretches */
  display: block;
}

.product-body {
  padding: 18px 20px 22px;
  text-align: left;
}

.product-body h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  color: var(--color-primary);
}

.product-body p {
  margin: 0 0 12px;
  color: #444;
  font-size: 1rem;
  line-height: 1.5;
}

/* Price sits in the same light green pill as the nav "Products" button */
.product-price {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
}

@media (max-width: 768px) {
  .hero.page-hero {
    min-height: 35vh;
  }
}
/* ----- Categories on the products page ----- */

/* Quick links to each category, as pills under the description */
.category-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.category-chips a {
  padding: 8px 18px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  background: #fff;
  transition: background 0.2s, color 0.2s;
}

.category-chips a:hover {
  background: var(--color-primary);
  color: #fff;
}

/* One section per category */
.category-section {
  margin-top: 56px;
  text-align: left;
  scroll-margin-top: 90px;    /* quick links land below the fixed nav bar */
}

/* Category heading with a thin line running to the right */
.category-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: 1.6rem;
  color: var(--color-primary-dark);
}

.category-title::after {
  content: "";
  flex: 1;                    /* the line fills the leftover space */
  height: 2px;
  background: var(--color-accent);
}

/* The grid sits closer to its own heading than to the page top */
.category-section .product-grid {
  margin-top: 20px;
}

/* Shown while loading, or if there are no products */
.grid-message {
  color: #666;
  padding: 24px 0;
}

/* A product with no photo shows the logo, shrunk to fit */
.product-card img.no-photo {
  object-fit: contain;
  padding: 32px;
  background: #fff;           /* matches the logo's white corners */
}

/* Instagram card on the home page, once a link is saved in the admin */
.instagram-card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 220px;
}

.instagram-card p {
  margin: 8px 0 0;
}

.instagram-card a {
  color: #bc1888;
  font-weight: 600;
}

.instagram-card-icon {
  font-size: 3rem;
  color: #dc2743;
}

/* ---------- 10. Admin page ---------- */
/*
  Only used on admin.html (<body class="admin-page">).
*/

/* Make sure anything with the "hidden" attribute really is hidden,
   even if another rule gives it display: flex */
.admin-page [hidden] {
  display: none !important;
}

.admin-page {
  background: var(--color-bg-alt);
  min-height: 100vh;
}

/* ----- Top bar ----- */
.admin-bar {
  background: var(--color-primary-dark);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.admin-bar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.admin-bar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-link {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}

.admin-link:hover {
  text-decoration: underline;
}

.admin-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 16px 64px;
}

/* ----- Tabs ----- */
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid #d6e4d6;
}

.admin-tab {
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;        /* sit on top of the grey line */
  background: none;
  color: #555;
  cursor: pointer;
}

.admin-tab:hover {
  color: var(--color-primary);
}

.admin-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Cards in a panel stack with even gaps */
.admin-panel,
.category-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.category-list:empty {
  display: none;
}

/* ----- Cards ----- */
.admin-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.admin-card h1,
.admin-card h2 {
  margin: 0 0 6px;
  color: var(--color-primary);
}

.admin-hint {
  margin: 0 0 16px;
  color: #666;
  font-size: 0.95rem;
  font-weight: 400;
}

.login-card {
  max-width: 420px;
  margin: 48px auto;
}

.admin-empty {
  text-align: center;
  color: #666;
  padding: 24px;
}

/* ----- Forms ----- */
.admin-card form,
.admin-dialog form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-page label,
.field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

.field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.admin-page input[type="text"],
.admin-page input[type="email"],
.admin-page input[type="password"],
.admin-page input[type="tel"],
.admin-page input[type="url"],
.admin-page input[type="number"],
.admin-page textarea,
.admin-page select {
  width: 100%;
  min-width: 0;               /* lets boxes shrink to fit side-by-side rows */
  font: inherit;
  font-weight: 400;
  padding: 10px 12px;
  border: 1px solid #cfd8cf;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
}

.admin-page textarea {
  resize: vertical;
}

/* Green outline when you click into a box */
.admin-page input:focus,
.admin-page textarea:focus,
.admin-page select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.admin-page input[type="file"] {
  font-weight: 400;
}

/* Two boxes side by side (Phone + WhatsApp) */
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

/* Text box + button on one line (Add category) */
.admin-page .inline-form {
  flex-direction: row;
  gap: 10px;
}

.form-actions {
  display: flex;
  gap: 10px;
}

.image-preview {
  width: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.hero-preview {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.map-preview {
  max-width: 420px;
  border: 1px solid #e0e0e0;
}

/* Status line under each form; red when it's an error */
.form-message {
  margin: 0;
  min-height: 1.6em;          /* keeps the layout steady when text appears */
  color: var(--color-primary);
  font-weight: 600;
}

.form-message:empty {
  min-height: 0;
}

.form-message.is-error {
  color: #c62828;
}

/* ----- Buttons ----- */
.admin-btn {
  font: inherit;
  font-weight: 600;
  padding: 10px 20px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  align-self: flex-start;     /* don't stretch to the full form width */
  white-space: nowrap;
  transition: background 0.2s;
}

.admin-btn:hover {
  background: var(--color-primary-dark);
}

.admin-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Outline-only button (Cancel, Edit, Rename, arrows) */
.admin-btn-ghost {
  background: transparent;
  color: var(--color-primary);
}

.admin-btn-ghost:hover {
  background: var(--color-bg-alt);
}

/* Log out sits on the dark green bar */
.admin-bar .admin-btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.admin-bar .admin-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

.admin-btn-danger {
  background: transparent;
  border-color: #e57373;
  color: #c62828;
}

.admin-btn-danger:hover {
  background: #fdecea;
}

.admin-btn-small {
  padding: 6px 14px;
  font-size: 0.9rem;
}

/* ----- Category boxes ----- */
.category-box {
  border-left: 5px solid var(--color-primary);
}

.category-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.category-head h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--color-primary-dark);
}

.category-head .admin-hint {
  flex-basis: 100%;
  margin: 0;
}

.category-count {
  font-size: 0.85rem;
  font-weight: 500;
  color: #777;
  margin-left: 4px;
}

.category-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.add-product-btn {
  margin-top: 12px;
}

/* ----- Product rows ----- */
.admin-product-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.admin-product-list:empty::before {
  content: "No products in this category yet.";
  display: block;
  color: #888;
  padding: 8px 0;
}

/* Each row: photo | name + price | Edit + Delete */
.admin-product {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid #eee;
}

.admin-product img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

.admin-product img.no-photo {
  object-fit: contain;
  background: #fff;
  border: 1px solid #eee;
}

.admin-product-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-product-info span {
  color: #666;
}

.admin-product-actions {
  display: flex;
  gap: 8px;
}

/* ----- Product pop-up ----- */
.admin-dialog {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  border: none;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* The dimmed page behind the pop-up */
.admin-dialog::backdrop {
  background: rgba(10, 30, 12, 0.55);
}

.admin-dialog h2 {
  margin: 0;
  color: var(--color-primary);
}

/* ----- Admin page on phones ----- */
@media (max-width: 600px) {
  .admin-link {
    display: none;            /* keep the bar uncluttered */
  }

  .admin-card {
    padding: 18px;
  }

  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .inline-form {
    flex-direction: column;
  }

  /* Photo + name on one line, buttons underneath */
  .admin-product {
    grid-template-columns: 64px 1fr;
  }

  .admin-product-actions {
    grid-column: 1 / -1;
  }
}