/*
Theme Name: Mano Vending
Theme URI: https://manovending.com
Author: Mano Vending
Author URI: https://manovending.com
Description: Custom WooCommerce theme for Mano Vending — a B2B toy-vending shop. Bright playful light theme with per-page colour heroes, animated capsule and gumball-machine graphics, and a filterable product catalogue.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: manovending
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready
WC requires at least: 7.0
WC tested up to: 10.9
*/

/* ===================================================================
   Mano Vending — Global Styles (Bright Playful Light Theme)
   =================================================================== */


/* --- Design Tokens --- */
:root {
  --color-bg: #ffffff;          /* main background */
  --color-bg-soft: #f8f9fa;     /* soft off-white sections */
  --color-surface: #ffffff;     /* cards */

  --color-text: #1f2d3d;        /* dark navy body text */
  --color-text-muted: #5b6b7f;  /* secondary text */

  --color-red: #e63946;         /* primary brand / CTA */
  --color-red-dark: #cc2f3c;
  --color-blue: #1d7fd7;        /* accent */
  --color-yellow: #f4b400;      /* accent */
  --color-green: #2ecc71;       /* accent */

  --border-faint: 1px solid rgba(31, 45, 61, 0.08);

  --shadow-soft: 0 10px 30px rgba(31, 45, 61, 0.08);
  --shadow-hover: 0 20px 45px rgba(31, 45, 61, 0.14);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --maxw: 1200px;
  --section-pad: 130px;
}

/* --- Reset --- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* Rounded, bubbly headings */
h1, h2, h3, h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-text);
}

p { font-weight: 400; }

/* ===================================================================
   Layout Primitives
   =================================================================== */
.container,
.navbar__inner,
.hero__inner,
.split__inner,
.brand-banner__inner,
.stack__inner,
.products__inner,
.contact__inner,
.footer__inner,
.mhero__inner,
.catalog__inner,
.features__inner,
.mcta__inner,
.phero__inner,
.shop__inner,
.ahero__inner,
.mission__inner,
.values__inner,
.story__inner,
.team__inner,
.contactpage__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.hero__inner,
.split__inner,
.products__inner,
.contact__inner,
.mhero__inner,
.catalog__inner,
.features__inner,
.phero__inner,
.shop__inner,
.ahero__inner,
.mission__inner,
.values__inner,
.story__inner,
.team__inner {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* ===================================================================
   Navigation Bar
   =================================================================== */
.navbar {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: var(--border-faint);
  box-shadow: 0 4px 20px rgba(31, 45, 61, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

@media (max-width: 768px) {
  .nav-logo { height: 76px; }
}

.navbar__logo { display: flex; align-items: center; flex-shrink: 0; }

/* New image logo */
.nav-logo {
  height: 128px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Legacy text logo (kept as fallback) */
.navbar__logo-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--color-text);
}
.navbar__logo-accent { color: var(--color-red); margin-left: 2px; }

.navbar__links {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}

.navbar__links a {
  position: relative;
  color: var(--color-text);
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  font-size: 1.45rem;
  padding-bottom: 5px;
  transition: color 0.25s ease;
}

.navbar__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background-color: var(--color-red);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.navbar__links a:hover,
.navbar__links a:focus-visible { color: var(--color-red); }
.navbar__links a:hover::after,
.navbar__links a:focus-visible::after { transform: scaleX(1); }

.navbar__lang { flex-shrink: 0; }

.navbar__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--color-text);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  border: 2px solid rgba(31, 45, 61, 0.15);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.navbar__lang-btn:hover,
.navbar__lang-btn:focus-visible {
  border-color: var(--color-red);
  color: var(--color-red);
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.4rem;
}
.navbar__toggle span {
  width: 26px; height: 3px;
  background-color: var(--color-text);
  border-radius: 3px;
}

@media (max-width: 768px) {
  .navbar__toggle { display: flex; order: 3; }
  .navbar__lang { order: 2; margin-left: auto; }
  .navbar__links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
  .navbar__links.is-open { max-height: 340px; opacity: 1; }
}

/* ===================================================================
   Shared Button (primary red pill)
   =================================================================== */
.hero__cta,
.mhero__cta,
.ahero__cta,
.mission__btn,
.mcta__btn,
.contact__btn,
.cform__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--color-red);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 1.05rem 2.2rem;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(230, 57, 70, 0.3);
  transition: all 0.3s ease;
}

/* Make the primary hero button extra prominent */
.hero__cta {
  font-size: 1.25rem;
  padding: 1.25rem 2.8rem;
  box-shadow: 0 14px 30px rgba(230, 57, 70, 0.38);
}
.hero__cta svg, .mhero__cta svg, .ahero__cta svg, .mission__btn svg,
.mcta__btn svg, .contact__btn svg, .cform__btn svg { transition: transform 0.25s ease; }

.hero__cta:hover, .mhero__cta:hover, .ahero__cta:hover, .mission__btn:hover,
.mcta__btn:hover, .contact__btn:hover, .cform__btn:hover {
  background-color: var(--color-red-dark);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(230, 57, 70, 0.4);
}
.hero__cta:hover svg, .mhero__cta:hover svg, .ahero__cta:hover svg, .mission__btn:hover svg,
.mcta__btn:hover svg, .contact__btn:hover svg, .cform__btn:hover svg { transform: translateX(4px); }

/* ===================================================================
   Hero (home)
   =================================================================== */
.hero { width: 100%; background-color: var(--color-bg); }

.hero__inner { display: flex; align-items: center; gap: 4rem; }
.hero__content { flex: 1 1 50%; min-width: 0; }

.hero__title {
  font-size: clamp(3.25rem, 7vw, 5.75rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.hero__subtitle {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--color-text-muted);
  max-width: 34rem;
  margin-bottom: 2.75rem;
}

.hero__visual { flex: 1 1 50%; min-width: 0; }
.hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hero__image:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

@media (max-width: 768px) {
  .hero__inner { flex-direction: column-reverse; text-align: center; gap: 2.5rem; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
}

/* ===================================================================
   Split Cards (Products / Machines) — bright colorful
   =================================================================== */
.split { width: 100%; }
.split__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

.split-card {
  border-radius: 28px;
  padding: 3rem 2.75rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}
.split-card--teal   { background: linear-gradient(150deg, #26c6da, #1d9bd7); }
.split-card--orange { background: linear-gradient(150deg, #ff8a3d, #ef5350); }

.split-card__title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1rem;
}
.split-card__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 2rem;
}

.split-card__list { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2.5rem; }
.split-card__list li {
  position: relative;
  padding-left: 2.25rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #fff;
}
.split-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 1.1rem; height: 0.6rem;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}

.split-card__image {
  position: relative;
  margin-top: auto;
  width: 100%;
  min-height: 220px;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.18);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.split-card--teal .split-card__image   { background-image: url('assets/images/split-products.webp'); }
.split-card--orange .split-card__image { background-image: url('assets/images/split-machines.webp'); }

.split-card__circle {
  position: absolute;
  bottom: -18px; right: 24px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background-color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
}
.split-card__circle svg { transition: transform 0.25s ease; }
.split-card__circle:hover svg { transform: translateX(4px); }
.split-card--teal .split-card__circle   { color: #1d9bd7; }
.split-card--orange .split-card__circle { color: #ef5350; }

@media (max-width: 768px) { .split__inner { grid-template-columns: 1fr; } }

/* ===================================================================
   Brand Banner — soft bright band
   =================================================================== */
.brand-banner {
  width: 100%;
  background: linear-gradient(120deg, #fff4d6 0%, #ffe3e3 50%, #d9f0ff 100%);
  padding: var(--section-pad) 0;
}
.brand-banner__image {
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 600px) { .brand-banner { padding: 64px 0; } }

/* ===================================================================
   Sticky Stacking Cards — bright colorful
   =================================================================== */
.stack { width: 100%; }
.stack__inner { padding-top: var(--section-pad); padding-bottom: 30vh; }

.stack__header { text-align: center; margin-bottom: 4rem; }
.stack__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  color: var(--color-blue);
  margin-bottom: 1rem;
}
.stack__title {
  text-transform: uppercase;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 900;
}

.stack__cards { display: flex; flex-direction: column; gap: 2.5rem; }

.stack-card {
  position: sticky;
  top: calc(12vh + (var(--i) * 3vh));
  width: 100%;
  max-width: 600px;
  height: 450px;
  margin: 0 auto;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem;
  box-shadow: var(--shadow-hover);
}
.stack-card__text {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 14ch;
}

.stack-card--peach  { background-color: #ffd166; color: #1f2d3d; }
.stack-card--purple { background-color: #9b8cff; color: #ffffff; }
.stack-card--cyan   { background-color: #4cc9f0; color: #1f2d3d; }
.stack-card--orange { background-color: #ff6a3d; color: #ffffff; }

@media (max-width: 600px) {
  .stack-card { height: 380px; border-radius: 24px; padding: 2rem; }
}

/* ===================================================================
   Products Grid (home) — light cards
   =================================================================== */
.products { width: 100%; background-color: var(--color-bg-soft); }

.products__title {
  text-align: center;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  margin-bottom: 1rem;
}
.products__subtitle {
  text-align: center;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--color-text-muted);
  max-width: 40rem;
  margin: 0 auto 4rem;
}
.products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.product-card {
  background-color: var(--color-surface);
  border: var(--border-faint);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}
.product-card__image { width: 100%; height: 220px; object-fit: cover; }
.product-card__body { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.product-card__name { font-size: 1.35rem; font-weight: 800; margin-bottom: 0.75rem; }
.product-card__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}
.product-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-red);
  transition: gap 0.25s ease, color 0.25s ease;
}
.product-card__link svg { transition: transform 0.25s ease; }
.product-card__link:hover { color: var(--color-red-dark); gap: 0.7rem; }
.product-card__link:hover svg { transform: translateX(3px); }

@media (max-width: 900px) { .products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .products__grid { grid-template-columns: 1fr; } }

/* ===================================================================
   Contact Section (home) — light inputs
   =================================================================== */
.contact { width: 100%; }
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.contact__title { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 900; margin-bottom: 1.25rem; }
.contact__text { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--color-text-muted); max-width: 32rem; }

.contact__form { display: flex; flex-direction: column; gap: 1rem; }

.contact__form input,
.contact__form select,
.contact__form textarea,
.field {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-bg-soft);
  border: 1px solid rgba(31, 45, 61, 0.12);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.contact__form input::placeholder,
.contact__form textarea::placeholder,
.field::placeholder { color: var(--color-text-muted); opacity: 1; }

.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus,
.field:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18);
}

.field--textarea { resize: vertical; min-height: 150px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.select-wrap { position: relative; }
.field--select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem; }
.field--select option { color: var(--color-text); background:#fff; }
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%; right: 1.25rem;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--color-text-muted);
  border-bottom: 2.5px solid var(--color-text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.checkbox { display: flex; align-items: center; gap: 0.65rem; font-size: 0.95rem; color: var(--color-text-muted); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--color-red); cursor: pointer; flex-shrink: 0; }

.contact__btn { align-self: flex-start; margin-top: 0.75rem; }

@media (max-width: 850px) { .contact__inner { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

/* ===================================================================
   Footer — soft light
   =================================================================== */
.footer { background-color: var(--color-bg-soft); border-top: var(--border-faint); width: 100%; }
.footer__inner { padding-top: 80px; padding-bottom: 40px; }

.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }

.footer__logo {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: 1.75rem;
}
.footer__logo-accent { color: var(--color-red); margin-left: 2px; }

.footer__heading { font-family: 'Nunito', sans-serif; font-size: 1.05rem; font-weight: 800; margin-bottom: 1.1rem; }
.footer__list { display: flex; flex-direction: column; gap: 0.85rem; }
.footer__list a { color: var(--color-text-muted); font-size: 0.975rem; transition: color 0.25s ease; }
.footer__list a:hover { color: var(--color-red); }
.footer__list--contact li { color: var(--color-text-muted); font-size: 0.975rem; line-height: 1.7; }
.footer__hours strong { color: var(--color-text); font-family: 'Nunito', sans-serif; }

/* Social icons */
.footer__social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer__social a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(31, 45, 61, 0.06);
  color: var(--color-text-muted);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer__social a:hover {
  background: var(--color-red);
  color: #fff;
  transform: translateY(-3px);
}

.footer__divider { height: 1px; background-color: rgba(31, 45, 61, 0.1); margin: 3rem 0 1.5rem; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer__copy { font-size: 0.875rem; color: var(--color-text-muted); }
.footer__legal { display: flex; gap: 2rem; }
.footer__legal a { font-size: 0.875rem; color: var(--color-text-muted); transition: color 0.25s ease; }
.footer__legal a:hover { color: var(--color-red); }

@media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } }
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__legal { justify-content: center; }
}

/* ===================================================================
   Animations
   =================================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__title, .hero__subtitle, .hero__cta {
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
}
.hero__title { animation-delay: 0.1s; }
.hero__subtitle { animation-delay: 0.35s; }
.hero__cta { animation-delay: 0.6s; }

.product-card:hover,
.split-card:hover,
.machine-card:hover,
.shop-card:hover,
.value-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__subtitle, .hero__cta { opacity: 1; animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* ===================================================================
   MACHINES PAGE
   =================================================================== */
.mhero { width: 100%; }
.mhero__inner { display: flex; align-items: center; gap: 4rem; }
.mhero__content { flex: 1 1 50%; min-width: 0; }
.mhero__title { font-size: clamp(2.75rem, 6vw, 4.75rem); font-weight: 900; margin-bottom: 1.5rem; }
.mhero__text { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--color-text-muted); max-width: 34rem; margin-bottom: 2.5rem; }
.mhero__visual { flex: 1 1 50%; min-width: 0; }
.mhero__image {
  width: 100%; height: auto; aspect-ratio: 5 / 4;
  border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-soft);
}
@media (max-width: 768px) {
  .mhero__inner { flex-direction: column-reverse; text-align: center; gap: 2.5rem; }
  .mhero__text { margin-left: auto; margin-right: auto; }
}

.catalog { width: 100%; background-color: var(--color-bg-soft); }
.catalog__header { text-align: center; margin-bottom: 3.5rem; }
.catalog__eyebrow {
  text-transform: uppercase; letter-spacing: 0.25em;
  font-size: 0.85rem; font-weight: 800; font-family: 'Nunito', sans-serif;
  color: var(--color-blue); margin-bottom: 0.75rem;
}
.catalog__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; }
.catalog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.machine-card {
  background-color: var(--color-surface);
  border: var(--border-faint);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}
.machine-card__image { width: 100%; height: 220px; object-fit: cover; }
.machine-card__body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.machine-card__tag {
  align-self: flex-start;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.7rem; font-weight: 800; font-family: 'Nunito', sans-serif;
  color: var(--color-blue);
  background-color: rgba(29, 127, 215, 0.1);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
  margin-bottom: 1rem;
}
.machine-card__title { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.6rem; }
.machine-card__desc { font-size: 1rem; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.machine-card__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.95rem;
  color: var(--color-red); transition: gap 0.25s ease, color 0.25s ease;
}
.machine-card__link svg { transition: transform 0.25s ease; }
.machine-card__link:hover { color: var(--color-red-dark); gap: 0.7rem; }
.machine-card__link:hover svg { transform: translateX(3px); }

@media (max-width: 900px) { .catalog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .catalog__grid { grid-template-columns: 1fr; } }

.features { width: 100%; }
.features__title { text-align: center; font-size: clamp(1.85rem, 4vw, 2.75rem); font-weight: 900; max-width: 18ch; margin: 0 auto 3.5rem; }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.feature { text-align: center; }
.feature__image { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); margin-bottom: 1.5rem; }
.feature__name { font-size: 1.35rem; font-weight: 800; margin-bottom: 0.75rem; }
.feature__desc { font-size: 1rem; line-height: 1.7; color: var(--color-text-muted); max-width: 32ch; margin: 0 auto; }
@media (max-width: 768px) { .features__grid { grid-template-columns: 1fr; gap: 3rem; } }

.mcta { width: 100%; background: linear-gradient(120deg, #fff4d6, #ffe3e3); border-top: var(--border-faint); border-bottom: var(--border-faint); }
.mcta__inner { padding-top: var(--section-pad); padding-bottom: var(--section-pad); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.mcta__title { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 900; max-width: 20ch; }
.mcta__text { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--color-text-muted); max-width: 42rem; }
.mcta__btn { margin-top: 0.75rem; }

/* ===================================================================
   PRODUCTS PAGE
   =================================================================== */
.phero { width: 100%; background: linear-gradient(120deg, #d9f0ff 0%, #fff4d6 100%); border-bottom: var(--border-faint); overflow: hidden; }
.phero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.phero__title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; margin-bottom: 1.25rem; }
.phero__text { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--color-text-muted); max-width: 34rem; }

/* Animated capsule scene */
.capsule-scene {
  position: relative;
  min-height: 460px;
  width: 100%;
}
.capsule {
  position: absolute;
  left: var(--x);
  top: var(--top);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  /* capsule = clear top half + colored bottom half + gloss */
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0) 40%),
    linear-gradient(to bottom, #eef6ff 0 46%, var(--c) 46% 100%);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.12), 0 12px 22px rgba(31,45,61,0.18);
  animation: capsuleFall 5s ease-in-out infinite;
  animation-delay: var(--d);
}
/* mid band line */
.capsule::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  top: 46%;
  height: 5px;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.08);
  border-radius: 4px;
}
.capsule--pink   { --c: #ff5da2; }
.capsule--teal   { --c: #34c7d6; }
.capsule--yellow { --c: #ffd166; }
.capsule--purple { --c: #9b8cff; }
.capsule--green  { --c: #2ecc71; }
.capsule--orange { --c: #ff6a3d; }

@keyframes capsuleFall {
  0%   { transform: translateY(-180px) rotate(-8deg); opacity: 0; }
  14%  { opacity: 1; }
  55%  { transform: translateY(0) rotate(0deg); }
  68%  { transform: translateY(-18px) rotate(3deg); }
  80%  { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

@media (max-width: 768px) {
  .phero__inner { grid-template-columns: 1fr; text-align: center; }
  .phero__text { margin-left: auto; margin-right: auto; }
  .capsule-scene { min-height: 320px; }
}

/* Orange image band */
.orange-band {
  width: 100%;
  background-color: #ff6a3d;
  padding: 3.5rem 24px;
}
.orange-band__image {
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  border-radius: 28px;
}

/* Twist / Stack / Click steps */
.steps { width: 100%; background-color: var(--color-bg); }
.steps__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4rem 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.step__check { color: var(--color-text); margin-bottom: 0.75rem; }
.step__label {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 900;
  text-transform: uppercase;
}
@media (max-width: 600px) { .steps__inner { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Wonder section */
.wonder { width: 100%; }
.wonder__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad) 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.wonder__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.wonder__text {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--color-text-muted);
  margin-bottom: 1.75rem;
}
.wonder__list { display: flex; flex-direction: column; gap: 0.6rem; }
.wonder__list li {
  font-family: 'Nunito', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.wonder__arrow { color: var(--color-red); }
.wonder__image { width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 768px) {
  .wonder__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

.shop { width: 100%; }
.shop__inner { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: start; }

.filters {
  background-color: var(--color-surface);
  border: var(--border-faint);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
  position: sticky; top: 100px;
}
.filters__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.filters__title { font-size: 1.25rem; font-weight: 800; }
.filters__clear { background: none; border: 0; color: var(--color-red); font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 800; cursor: pointer; padding: 0; transition: color 0.2s ease; }
.filters__clear:hover { color: var(--color-red-dark); }

.filter-group { margin-bottom: 1.75rem; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group__title {
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 800; color: var(--color-text-muted);
  margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: var(--border-faint);
}

.check { display: flex; align-items: center; gap: 0.7rem; font-size: 0.975rem; color: var(--color-text); cursor: pointer; padding: 0.45rem 0; user-select: none; }
.check input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid rgba(31, 45, 61, 0.2);
  border-radius: 6px; background-color: #fff; cursor: pointer; position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.check input:checked { background-color: var(--color-red); border-color: var(--color-red); }
.check input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);
}
.check:hover input { border-color: var(--color-red); }

.shop__count { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }

.shop-card {
  background-color: var(--color-surface);
  border: var(--border-faint);
  border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}
.shop-card__image { width: 100%; height: 200px; object-fit: cover; }
.shop-card__body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.shop-card__tags { display: flex; gap: 0.5rem; margin-bottom: 0.85rem; }
.pill {
  font-family: 'Nunito', sans-serif;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--color-blue); background-color: rgba(29, 127, 215, 0.1);
  border-radius: var(--radius-pill); padding: 0.25rem 0.7rem;
}
.shop-card__title { font-size: 1.2rem; font-weight: 800; margin-bottom: 1rem; }
.shop-card__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.9rem;
  color: var(--color-red); transition: gap 0.25s ease, color 0.25s ease;
}
.shop-card__link svg { transition: transform 0.25s ease; }
.shop-card__link:hover { color: var(--color-red-dark); gap: 0.65rem; }
.shop-card__link:hover svg { transform: translateX(3px); }
.shop__empty { font-size: 1.05rem; color: var(--color-text-muted); padding: 2rem 0; }

@media (max-width: 900px) {
  .shop__inner { grid-template-columns: 1fr; gap: 2rem; }
  .filters { position: static; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   ABOUT PAGE
   =================================================================== */
.ahero { width: 100%; }
.ahero__inner { display: flex; align-items: center; gap: 4rem; }
.ahero__content { flex: 1 1 50%; min-width: 0; }
.ahero__eyebrow { text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.85rem; font-weight: 800; font-family: 'Nunito', sans-serif; color: var(--color-blue); margin-bottom: 1rem; }
.ahero__title { font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: 900; margin-bottom: 1.5rem; }
.ahero__text { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--color-text-muted); max-width: 34rem; margin-bottom: 2.5rem; }
.ahero__visual { flex: 1 1 50%; min-width: 0; }
.ahero__image { width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-soft); }
@media (max-width: 768px) {
  .ahero__inner { flex-direction: column-reverse; text-align: center; gap: 2.5rem; }
  .ahero__text { margin-left: auto; margin-right: auto; }
}

.mission { width: 100%; background-color: var(--color-bg-soft); }
.mission__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.mission__title { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 900; margin-bottom: 1.5rem; }
.mission__text { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--color-text-muted); max-width: 44rem; margin-bottom: 2.25rem; }

.values { width: 100%; }
.values__header { text-align: center; margin-bottom: 3.5rem; }
.values__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 1rem; }
.values__text { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--color-text-muted); max-width: 38rem; margin: 0 auto; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.value-card {
  background-color: var(--color-surface);
  border: var(--border-faint);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--color-red);
  transition: all 0.3s ease;
}
.value-card:nth-child(2) { border-top-color: var(--color-blue); }
.value-card:nth-child(3) { border-top-color: var(--color-yellow); }
.value-card:nth-child(4) { border-top-color: var(--color-green); }
.value-card__title { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.85rem; }
.value-card__desc { font-size: 0.975rem; line-height: 1.7; color: var(--color-text-muted); }
@media (max-width: 900px) { .values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .values__grid { grid-template-columns: 1fr; } }

.story { width: 100%; }
.story__inner { max-width: 860px; }
.story__eyebrow { text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.85rem; font-weight: 800; font-family: 'Nunito', sans-serif; color: var(--color-blue); margin-bottom: 1.5rem; }
.story__body p { font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 400; line-height: 1.8; color: var(--color-text); margin-bottom: 1.5rem; }
.story__body p:last-child { margin-bottom: 0; }

.team { width: 100%; background-color: var(--color-bg-soft); }
.team__header { text-align: center; margin-bottom: 3.5rem; }
.team__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 1rem; }
.team__text { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--color-text-muted); max-width: 38rem; margin: 0 auto; }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.member { text-align: center; }
.member__image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); margin-bottom: 1.1rem; }
.member__name { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.25rem; }
.member__role { font-size: 0.9rem; color: var(--color-text-muted); }
@media (max-width: 900px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team__grid { grid-template-columns: 1fr; } }

/* ===================================================================
   CONTACT PAGE
   =================================================================== */
.contactpage { width: 100%; }
.contactpage__inner { padding-top: var(--section-pad); padding-bottom: var(--section-pad); display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contactpage__eyebrow { text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.85rem; font-weight: 800; font-family: 'Nunito', sans-serif; color: var(--color-blue); margin-bottom: 1rem; }
.contactpage__title { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 900; margin-bottom: 1.5rem; }
.contactpage__text { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--color-text-muted); max-width: 32rem; }

.cform { display: flex; flex-direction: column; gap: 1rem; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.cinput {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-bg-soft);
  border: 1px solid rgba(31, 45, 61, 0.12);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.cinput::placeholder { color: var(--color-text-muted); opacity: 1; }
.cinput:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18);
}
.cinput--textarea { resize: vertical; min-height: 150px; }

.cselect-wrap { position: relative; }
.cinput--select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem; }
.cinput--select option { background-color: #fff; color: var(--color-text); }
.cselect-wrap::after {
  content: ""; position: absolute; top: 50%; right: 1.15rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}

.ccheck { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; color: var(--color-text-muted); cursor: pointer; margin-top: 0.25rem; }
.ccheck input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid rgba(31, 45, 61, 0.2); border-radius: 6px; background-color: #fff; cursor: pointer; position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ccheck input:checked { background-color: var(--color-red); border-color: var(--color-red); }
.ccheck input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);
}

.cform__btn { align-self: flex-start; margin-top: 0.75rem; }

@media (max-width: 850px) { .contactpage__inner { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 480px) { .cform__row { grid-template-columns: 1fr; } }

/* ===================================================================
   FREDOKA UPPERCASE HEADINGS  +  WHITE BASE WITH COLORED SECTIONS
   (Gamaco-style: mostly white, colorful cards, teal contact band)
   =================================================================== */

/* Headings: Fredoka, UPPERCASE (color stays dark on white via earlier rule) */
h1, h2, h3, h4 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Buttons: Fredoka uppercase */
.hero__cta, .mhero__cta, .ahero__cta, .mission__btn, .mcta__btn,
.contact__btn, .cform__btn {
  font-family: 'Fredoka', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Stack cards: readable text per background color */
.stack-card--peach .stack-card__text,
.stack-card--cyan .stack-card__text { color: #12333a; }
.stack-card--purple .stack-card__text,
.stack-card--orange .stack-card__text { color: #ffffff; }

/* ---- Contact = solid teal band (like Gamaco) ---- */
.contact, .contactpage { background: #22c3cd; }

.contact__title, .contact__text,
.contactpage__title, .contactpage__text { color: #ffffff; }
.contactpage__eyebrow { color: #ffffff; opacity: 0.9; }

/* Form fields stay light on the teal band */
.contact__form input, .contact__form select, .contact__form textarea,
.field, .cinput {
  background: #eafafb;
  color: #12333a;
  border-color: rgba(0, 0, 0, 0.08);
}
.contact__form input::placeholder, .contact__form textarea::placeholder,
.field::placeholder, .cinput::placeholder { color: #5a7f83; }
.cinput--select option, .field--select option { color: #12333a; background: #fff; }

/* Checkbox labels readable on teal */
.ccheck, .checkbox { color: rgba(255, 255, 255, 0.92); }

/* ---- Home page hero = solid purple band (like Gamaco) ---- */
.hero { background: #8b7dff; }
.hero__title { color: #ffffff; }
.hero__subtitle { color: rgba(255, 255, 255, 0.92); }

/* ---- M A N O letters on the products-page hero capsules ---- */
.capsule {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: calc(var(--s) * 0.34);
  line-height: 1;
  padding-bottom: calc(var(--s) * 0.14);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
/* keep the mid band line above the letter */
.capsule::after { z-index: 1; }

/* ===================================================================
   TEAM FEEDBACK ROUND 2
   =================================================================== */

/* (1) Products page — FULL WIDTH, filters at the left edge, bigger cards/images */
.shop__inner {
  max-width: none;              /* use the full width of the screen */
  padding-left: 32px;
  padding-right: 32px;
  grid-template-columns: 220px 1fr;
  gap: 3rem;
}
.filters { padding: 1.5rem; }
.filters__title { font-size: 1.6rem; }
.filter-group__title { font-size: 1rem; }
.check { font-size: 1.12rem; gap: 0.85rem; }
.check input { width: 24px; height: 24px; }
.check input:checked::after { left: 8px; top: 3px; width: 6px; height: 12px; }
.product-grid { gap: 2.5rem; }
.shop-card__image { height: 420px; }
.shop-card__body { padding: 2rem; }
.shop-card__title { font-size: 1.7rem; }
.pill { font-size: 0.8rem; padding: 0.35rem 0.9rem; }
.shop-card__link { font-size: 1.05rem; }

/* (3) Machines hero = solid purple + floating animation */
.mhero { background: #8b7dff; }
.mhero__title { color: #ffffff; }
.mhero__text { color: rgba(255, 255, 255, 0.92); }
/* Machine hero: an SVG machine dispenses capsules (no photo, no human) */
.mhero__visual { position: relative; }
.machine-anim {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
.machine-anim__svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.18));
}
/* capsules dispense from the tray area */
.machine-anim .mcapsule { bottom: 12%; width: 40px; height: 40px; }

.mcapsule {
  position: absolute;
  bottom: 10%;
  left: var(--l);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0) 42%),
    linear-gradient(to bottom, #eef6ff 0 46%, var(--c) 46% 100%);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.15), 0 8px 14px rgba(0,0,0,0.3);
  animation: dispenseDrop 3s ease-in infinite;
  animation-delay: var(--d);
  z-index: 2;
}
.mcapsule::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  top: 46%;
  height: 3px;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
}
.mcapsule--pink   { --c: #ff5da2; }
.mcapsule--teal   { --c: #34c7d6; }
.mcapsule--yellow { --c: #ffd166; }

@keyframes dispenseDrop {
  0%   { transform: translateX(-50%) translateY(-6px) scale(0.25); opacity: 0; }
  15%  { transform: translateX(-50%) translateY(0) scale(1);       opacity: 1; }
  60%  { transform: translateX(-50%) translateY(48px) scale(1);    opacity: 1; }
  100% { transform: translateX(-50%) translateY(105px) scale(0.85); opacity: 0; }
}

/* (4) About hero = solid warm orange (different color) */
.ahero { background: #ff7a45; }
.ahero__title { color: #ffffff; }
.ahero__text { color: rgba(255, 255, 255, 0.92); }
.ahero__eyebrow { color: #ffffff; opacity: 0.9; }

/* (6) Footer logo as image */
.footer-logo-img {
  height: 140px;
  width: auto;
  display: block;
  margin-bottom: 1.5rem;
}

/* ===================================================================
   PRODUCT DETAIL PAGE
   =================================================================== */
.pdetail { width: 100%; }
.pdetail__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad) 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.pdetail__main {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.pdetail__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.pdetail__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.2s ease;
}
.pdetail__thumb:hover { border-color: var(--color-red); }

.pdetail__eyebrow {
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--color-blue);
  margin-bottom: 1rem;
}
.pdetail__title { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 1.5rem; }
.pdetail__desc {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}
.pdetail__specs { margin-bottom: 2.5rem; border-top: var(--border-faint); }
.pdetail__spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: var(--border-faint);
}
.pdetail__spec-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.pdetail__spec-value { color: var(--color-text-muted); font-size: 1.05rem; text-align: right; }

.pdetail__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--color-red);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.1rem;
  padding: 1.05rem 2.4rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 24px rgba(230, 57, 70, 0.3);
  transition: all 0.3s ease;
}
.pdetail__cta svg { transition: transform 0.25s ease; }
.pdetail__cta:hover {
  background-color: var(--color-red-dark);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(230, 57, 70, 0.4);
}
.pdetail__cta:hover svg { transform: translateX(4px); }

@media (max-width: 850px) {
  .pdetail__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ===================================================================
   TEAM FEEDBACK ROUND 3 — Dark professional footer + modern polish
   =================================================================== */

/* --- Deep indigo brand footer --- */
.footer {
  background: linear-gradient(135deg, #241a4e 0%, #3a2b6b 55%, #4b2e7a 100%);
  border-top: none;
}
.footer__inner { padding-top: 90px; padding-bottom: 44px; }

/* SQUARE white logo badge in the footer */
.footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 20px;
  margin-bottom: 1.75rem;
}
.footer-logo-img { height: 110px; width: auto; object-fit: contain; display: block; margin: 0; }

.footer__heading { color: #ffffff; }
.footer__list a,
.footer__list--contact li,
.footer__copy,
.footer__legal a { color: rgba(255, 255, 255, 0.62); }
.footer__list a:hover,
.footer__legal a:hover { color: #ffffff; }
.footer__hours strong { color: #ffffff; }
.footer__divider { background: rgba(255, 255, 255, 0.14); }
.footer__social a { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.footer__social a:hover { background: var(--color-red); color: #ffffff; }

/* --- Modern polish: softer corners, bigger images, more air --- */
:root {
  --radius: 24px;
  --radius-sm: 16px;
  --section-pad: 140px;
}

/* Larger imagery on the home + machines cards */
.product-card__image,
.machine-card__image { height: 260px; }
.feature__image { height: 230px; }

/* A touch more breathing room between grid cards */
.products__grid,
.catalog__grid { gap: 2.5rem; }

/* Slightly larger, softer hero images */
.hero__image,
.mhero__image,
.ahero__image { box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.28); }

/* ===================================================================
   COLORED HEADER PER PAGE + HIDE-ON-SCROLL (Gamaco-style)
   =================================================================== */

/* smooth hide/show */
.navbar {
  transition: transform 0.35s ease, background-color 0.3s ease;
  box-shadow: none;
  border-bottom: none;
}
.navbar--hidden { transform: translateY(-100%); }

/* logo in a SQUARE white badge so it reads on any header color */
.navbar__logo {
  background: #ffffff;
  border-radius: 16px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-logo { height: 78px; width: auto; object-fit: contain; }
@media (max-width: 768px) { .nav-logo { height: 52px; } }

/* each page's header colour (set via a modifier class on <header>) */
.navbar--purple { background: #8b7dff; }
.navbar--orange { background: #ff7a45; }
.navbar--blue   { background: #1d7fd7; }
.navbar--teal   { background: #22c3cd; }
.navbar--light  { background: #e9f3ff; }

/* white nav text on the coloured headers */
.navbar--purple .navbar__links a,
.navbar--orange .navbar__links a,
.navbar--blue   .navbar__links a,
.navbar--teal   .navbar__links a { color: #ffffff; }

.navbar--purple .navbar__links a::after,
.navbar--orange .navbar__links a::after,
.navbar--blue   .navbar__links a::after,
.navbar--teal   .navbar__links a::after { background-color: #ffffff; }

.navbar--purple .navbar__links a:hover,
.navbar--orange .navbar__links a:hover,
.navbar--blue   .navbar__links a:hover,
.navbar--teal   .navbar__links a:hover { color: #ffffff; }

/* language button on coloured headers */
.navbar--purple .navbar__lang-btn,
.navbar--orange .navbar__lang-btn,
.navbar--blue   .navbar__lang-btn,
.navbar--teal   .navbar__lang-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}
.navbar--purple .navbar__lang-btn:hover,
.navbar--orange .navbar__lang-btn:hover,
.navbar--blue   .navbar__lang-btn:hover,
.navbar--teal   .navbar__lang-btn:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* burger bars white on coloured headers */
.navbar--purple .navbar__toggle span,
.navbar--orange .navbar__toggle span,
.navbar--blue   .navbar__toggle span,
.navbar--teal   .navbar__toggle span { background-color: #ffffff; }

/* ===================================================================
   KIOSKWARE PAGE
   =================================================================== */
.khero { width: 100%; background: #1d7fd7; }
.khero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad) 24px;
  display: flex;
  align-items: center;
  gap: 4rem;
}
.khero__content { flex: 1 1 50%; min-width: 0; }
.khero__visual { flex: 1 1 50%; min-width: 0; }
.khero__eyebrow {
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 800;
  font-size: 0.85rem;
  color: #ffffff;
  opacity: 0.9;
  margin-bottom: 1rem;
}
.khero__title { font-size: clamp(2.75rem, 6vw, 4.75rem); color: #ffffff; margin-bottom: 1.5rem; }
.khero__text {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
  margin-bottom: 2.5rem;
}
.khero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: var(--border-faint);
}
@media (max-width: 768px) {
  .khero__inner { flex-direction: column-reverse; text-align: center; gap: 2.5rem; }
  .khero__text { margin-left: auto; margin-right: auto; }
}
/* ===================================================================
   WordPress + WooCommerce additions
   Everything above this line is the original hand-coded design.
   =================================================================== */

/* --- Accessibility helpers WordPress expects --- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: var(--color-text);
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

.skip-link { position: absolute; }

/* Honeypot field — hidden from humans, visible to bots. */
.mv-hp {
  position: absolute !important;
  left: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* --- WordPress core alignment + media classes --- */
.alignleft   { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright  { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide   { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull   { width: 100%; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.6rem;
}

.sticky { position: relative; }

/* --- Generic page / editor content --- */
.page-content {
  padding: 90px 24px;
}

.page-content--standalone {
  padding-top: 160px;
  min-height: 60vh;
}

.page-content__inner {
  max-width: 820px;
  margin: 0 auto;
}

.page-content__title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.6rem;
}

.entry-content > * + * { margin-top: 1.2rem; }

.entry-content h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 1.7rem;
  margin-top: 2.4rem;
}

.entry-content h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  margin-top: 1.8rem;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.4rem;
  list-style: disc;
}

.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.5rem; }

.entry-content a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content blockquote {
  border-left: 4px solid var(--color-red);
  padding-left: 1.2rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.entry-content th,
.entry-content td {
  border: var(--border-faint);
  padding: 0.7rem 0.9rem;
  text-align: left;
}

/* --- Navbar additions --- */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.navbar__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease;
}

.navbar__cart:hover { background: rgba(255, 255, 255, 0.16); }

.navbar__cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-red);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.navbar--light .navbar__cart:hover { background: rgba(31, 45, 61, 0.07); }

/* Current menu item */
.navbar__links li.is-current > a,
.navbar__links li.current-menu-item > a {
  opacity: 1;
  font-weight: 700;
}

/* --- Footer menus rendered by WordPress output <li> --- */
.footer__legal ul,
.footer__legal li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__legal li + li::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 0.9rem;
  background: rgba(255, 255, 255, 0.25);
  vertical-align: middle;
}

/* --- Shop layout additions --- */
.shop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.shop__bar .woocommerce-ordering select,
.mv-ordering select {
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border: var(--border-faint);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}

.filters__apply {
  width: 100%;
  margin-bottom: 0.8rem;
  justify-content: center;
}

a.filters__clear {
  display: inline-block;
  background: none;
  border: 0;
  color: var(--color-red);
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

a.filters__clear:hover { color: var(--color-red-dark); }

.shop-card__media {
  display: block;
  position: relative;
}

.shop-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-red);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
}

.shop-card__price {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: 0.6rem;
}

.shop-card__price del { opacity: 0.5; font-weight: 400; margin-right: 0.4rem; }
.shop-card__price ins { text-decoration: none; color: var(--color-red); }

.shop-card__title a { color: inherit; }
.shop-card__title a:hover { color: var(--color-red); }

/* --- Pagination --- */
.woocommerce-pagination,
.pagination,
.navigation.pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}

.woocommerce-pagination ul,
.nav-links {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  list-style: none;
  flex-wrap: wrap;
}

.woocommerce-pagination ul li { list-style: none; }

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers,
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.8rem;
  border-radius: var(--radius-pill);
  border: var(--border-faint);
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.woocommerce-pagination .page-numbers.current,
.nav-links .page-numbers.current {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}

.woocommerce-pagination a.page-numbers:hover,
.nav-links a.page-numbers:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

/* --- Single product additions --- */
.pdetail__price {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}

.pdetail__price del { opacity: 0.5; font-weight: 400; margin-right: 0.5rem; }
.pdetail__price ins { text-decoration: none; color: var(--color-red); }

.pdetail__thumb {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease;
}

.pdetail__thumb.is-active,
.pdetail__thumb:hover { border-color: var(--color-red); }

.pdetail__cart { margin-top: 1.6rem; }

.pdetail__stock--out {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.pdetail-long {
  padding: 0 24px 90px;
}

.pdetail-long__inner {
  max-width: 820px;
  margin: 0 auto;
}

.pdetail-long__title {
  font-family: 'Nunito', sans-serif;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}

/* --- WooCommerce form controls, restyled to match the design --- */
.quantity input[type="number"],
.woocommerce .quantity .qty {
  width: 92px;
  padding: 0.85rem 1rem;
  border: var(--border-faint);
  border-radius: var(--radius-pill);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  text-align: center;
  background: #fff;
  color: var(--color-text);
}

form.cart {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-red);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.95rem 1.8rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  line-height: 1;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover {
  background: var(--color-red-dark);
  transform: translateY(-2px);
}

.cform__btn--ghost {
  background: transparent;
  color: var(--color-red);
  border: 2px solid var(--color-red);
}

.cform__btn--ghost:hover { background: var(--color-red); color: #fff; }

/* Woo notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  border-radius: var(--radius-sm);
  border: var(--border-faint);
  border-left: 4px solid var(--color-red);
  background: var(--color-bg-soft);
  padding: 1rem 1.2rem;
  margin-bottom: 1.6rem;
  list-style: none;
}

.woocommerce-message { border-left-color: var(--color-green); }
.woocommerce-info    { border-left-color: var(--color-blue); }

/* Cart / checkout / account tables live inside page.php */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border: var(--border-faint);
  padding: 0.9rem 1rem;
  text-align: left;
}

.woocommerce table.shop_table th {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  background: var(--color-bg-soft);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
  width: 100%;
  padding: 0.95rem 1.2rem;
  border: var(--border-faint);
  border-radius: var(--radius-sm);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  background: #fff;
  color: var(--color-text);
}

.woocommerce form .form-row label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Related / upsell products */
.related.products > h2,
.upsells.products > h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 1.8rem;
  margin-bottom: 1.6rem;
  text-align: center;
}

.related.products,
.upsells.products {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 90px;
}

/* --- Contact form states --- */
.cform--sent {
  display: block;
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--color-bg-soft);
  border: var(--border-faint);
}

.cform__thanks {
  font-family: 'Nunito', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.cform__error {
  grid-column: 1 / -1;
  color: var(--color-red);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* --- Blog list --- */
.post-list {
  display: grid;
  gap: 2rem;
}

.post-card {
  display: grid;
  gap: 1.2rem;
  padding-bottom: 2rem;
  border-bottom: var(--border-faint);
}

.post-card__thumb img { border-radius: var(--radius-sm); }

.post-card__title {
  font-family: 'Nunito', sans-serif;
  font-size: 1.5rem;
}

.post-card__title a:hover { color: var(--color-red); }

.post-card__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.post-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-red);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
}

.post-hero img {
  border-radius: var(--radius);
  margin-bottom: 1.6rem;
}

/* --- 404 --- */
.error-404__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1.6rem 0 2.4rem;
}

/* --- Search form --- */
.mv-search {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

.mv-search .cinput { flex: 1 1 240px; }

/* --- Admin bar offset so the fixed navbar isn't hidden --- */
body.admin-bar .navbar { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .navbar { top: 46px; }
}

/* --- Print --- */
@media print {
  .navbar,
  .footer,
  .contactpage { display: none !important; }
}