/* ===== Caterfare product page layout (G700 style) ===== */
.pp { max-width: 1140px; margin: 0 auto; padding: 0 24px 40px; color: #444; font-family: Verdana, Segoe, sans-serif; line-height: 1.6; }
.pp a { color: inherit; }
.pp-crumbs { font-size: 0.85rem; color: #888; margin: 18px 0 10px; }
.pp-crumbs a { color: #888; text-decoration: none; }
.pp-crumbs a:hover { text-decoration: underline; }
.pp-tabs { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid #e6e6e6; display: flex; gap: 6px; overflow-x: auto; margin-bottom: 30px; }
.pp-tabs a { padding: 14px 16px; white-space: nowrap; text-decoration: none; color: #555; font-size: 0.95rem; border-bottom: 3px solid transparent; }
.pp-tabs a:hover { color: #24222e; border-bottom-color: #24222e; }

.pp-hero { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 48px; align-items: center; margin-bottom: 50px; }
.pp-hero-img { text-align: center; background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 24px; }
.pp-hero-img .zoom-box { margin: 0 auto; }
.pp-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: #888; margin: 0 0 6px; }
.pp h1 { font-size: 2.2rem; margin: 0 0 10px; color: #24222e; }
.pp-sub { font-size: 1.15rem; color: #666; margin: 0 0 18px; }
.pp-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pp-btn { display: inline-block; padding: 12px 22px; border-radius: 6px; text-decoration: none; font-size: 0.95rem; border: 2px solid #24222e; }
.pp-btn-dark { background: #24222e; color: #fff !important; }
.pp-btn-dark:hover { background: #3a3748; }
.pp-btn-light { background: #fff; color: #24222e !important; }
.pp-btn-light:hover { background: #f1f1f1; }

.pp-section { margin: 56px 0; scroll-margin-top: 70px; }
.pp h2 { font-size: 1.6rem; color: #24222e; margin: 0 0 18px; }
.pp h3 { font-size: 1.1rem; color: #24222e; margin: 0 0 8px; }

.pp-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.pp-card { background: #f6f6f6; border-radius: 10px; padding: 22px; }
.pp-card svg { width: 38px; height: 38px; stroke: #24222e; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.pp-card p { margin: 0; font-size: 0.95rem; }

.pp-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding: 28px 0; border-top: 1px solid #eee; }
.pp-feature ul { margin: 0; padding-left: 20px; }
.pp-feature li { margin-bottom: 6px; }

.pp-versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.pp-version { border: 1px solid #e3e3e3; border-radius: 10px; padding: 22px; background: #fff; }
.pp-version .pp-tag { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; background: #24222e; color: #fff; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }
.pp-version ul { margin: 10px 0 0; padding-left: 18px; font-size: 0.95rem; }

.pp-specs { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.pp-specs th, .pp-specs td { text-align: left; padding: 11px 14px; border-bottom: 1px solid #eee; vertical-align: top; }
.pp-specs th { width: 38%; color: #24222e; font-weight: bold; background: #fafafa; }
.pp-note { font-size: 0.85rem; color: #888; margin-top: 10px; }

.pp-cta { background: #24222e; color: #fff; border-radius: 12px; padding: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.pp-cta h2 { color: #fff; margin: 0 0 6px; }
.pp-cta p { margin: 0; color: #ddd; }
.pp-cta .pp-btn { border-color: #fff; }
.pp-cta .pp-btn-light { background: #fff; color: #24222e !important; }
.pp-cta .pp-btn-ghost { background: transparent; color: #fff !important; }

@media (max-width: 800px) {
  .pp-hero, .pp-feature { grid-template-columns: 1fr; gap: 24px; }
  .pp h1 { font-size: 1.8rem; }
  .pp-specs th { width: 45%; }
}