/*
 * Shift4 Dine design foundation.
 * Lovable/Tailwind breakpoint parity: 640 / 768 / 1024 / 1280 / 1536px.
 */

:root {
  --s4d-background: hsl(0 0% 100%);
  --s4d-foreground: hsl(220 20% 10%);
  --s4d-card: hsl(0 0% 100%);
  --s4d-primary: hsl(214 100% 40%);
  --s4d-primary-hover: hsl(214 100% 34%);
  --s4d-primary-foreground: hsl(0 0% 100%);
  --s4d-secondary: hsl(216 20% 95%);
  --s4d-muted: hsl(216 15% 96%);
  --s4d-muted-foreground: hsl(220 10% 46%);
  --s4d-border: hsl(220 13% 90%);
  --s4d-ring: hsl(214 100% 40%);
  --s4d-dark: hsl(220 25% 8%);
  --s4d-footer: hsl(210 50% 8%);
  --s4d-blue-light: hsl(214 100% 95%);
  --s4d-radius: 0.5rem;
  --s4d-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --s4d-shadow-card: 0 10px 30px rgb(15 23 42 / 0.08);
  --s4d-font-heading: "Space Grotesk", sans-serif;
  --s4d-font-body: "DM Sans", sans-serif;
  --s4d-container: 80rem;
  --s4d-section-space: 4rem;
  --s4d-transition: 180ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--s4d-background);
  color: var(--s4d-foreground);
  font-family: var(--s4d-font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.mobile-menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--s4d-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--s4d-primary-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.65em;
  color: var(--s4d-foreground);
  font-family: var(--s4d-font-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.875rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.3vw, 1.5rem); }

p {
  margin: 0 0 1.25em;
}

ul,
ol {
  padding-left: 1.25rem;
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-container {
  width: 100%;
  max-width: var(--s4d-container);
  margin-inline: auto;
  padding-inline: 1rem;
}

.section-padding {
  padding-block: var(--s4d-section-space);
}

.section-light {
  background: hsl(220 15% 97%);
}

.section-dark {
  background: var(--s4d-dark);
  color: #fff;
}

.text-gradient-blue {
  background: linear-gradient(135deg, hsl(214 100% 40%), hsl(214 100% 60%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  clip: auto;
  background: #fff;
  color: var(--s4d-primary);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--s4d-ring);
  outline-offset: 2px;
}

/* Buttons */
.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: calc(var(--s4d-radius) - 2px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--s4d-transition), background-color var(--s4d-transition), border-color var(--s4d-transition), box-shadow var(--s4d-transition), transform var(--s4d-transition);
}

.button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  transform: translateY(-1px);
}

.button--primary,
input[type="submit"],
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--s4d-primary);
  color: var(--s4d-primary-foreground);
}

.button--primary:hover,
input[type="submit"]:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--s4d-primary-hover);
  color: #fff;
}

/* WooCommerce loads its archive button background after the theme. These
   selectors preserve the same blue primary CTA in the header and lead form. */
.woocommerce a.button.button--primary,
.woocommerce button.button.button--primary,
.woocommerce-page a.button.button--primary,
.woocommerce-page button.button.button--primary {
  border-color: var(--s4d-primary);
  background: var(--s4d-primary);
  color: var(--s4d-primary-foreground);
}

.woocommerce a.button.button--primary:hover,
.woocommerce button.button.button--primary:hover,
.woocommerce-page a.button.button--primary:hover,
.woocommerce-page button.button.button--primary:hover {
  border-color: var(--s4d-primary-hover);
  background: var(--s4d-primary-hover);
  color: #fff;
}

.button--outline {
  border-color: var(--s4d-border);
  background: #fff;
  color: var(--s4d-foreground);
}

.button--outline:hover {
  border-color: var(--s4d-primary);
  color: var(--s4d-primary);
}

.button--secondary {
  border-color: hsl(216 20% 95%);
  background: hsl(216 20% 95%);
  color: var(--s4d-foreground);
}

.button--secondary:hover {
  border-color: hsl(216 20% 91%);
  background: hsl(216 20% 91%);
  color: var(--s4d-foreground);
}

/* Product-card actions must keep the Lovable outline/blue treatment when
   WooCommerce's generic archive button styles are loaded. */
.woocommerce .product-card__actions .button--secondary,
.woocommerce-page .product-card__actions .button--secondary {
  border-color: var(--s4d-border);
  background: #fff;
  color: var(--s4d-foreground);
}

.woocommerce .product-card__actions .button--secondary:hover,
.woocommerce-page .product-card__actions .button--secondary:hover {
  border-color: var(--s4d-primary);
  background: #fff;
  color: var(--s4d-primary);
}

.woocommerce .product-card__actions .button--primary,
.woocommerce-page .product-card__actions .button--primary {
  border-color: var(--s4d-primary);
  background: var(--s4d-primary);
  color: var(--s4d-primary-foreground);
}

.woocommerce .product-card__actions .button--primary:hover,
.woocommerce-page .product-card__actions .button--primary:hover {
  border-color: var(--s4d-primary-hover);
  background: var(--s4d-primary-hover);
  color: #fff;
}

/* Cards and form controls */
.s4d-card,
.content-card {
  border: 1px solid var(--s4d-border);
  border-radius: var(--s4d-radius);
  background: var(--s4d-card);
  box-shadow: var(--s4d-shadow-sm);
}

.s4d-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  transition: border-color var(--s4d-transition), box-shadow var(--s4d-transition), transform var(--s4d-transition);
}

.s4d-card:hover {
  border-color: hsl(214 100% 40% / 0.3);
  box-shadow: var(--s4d-shadow-card);
  transform: translateY(-2px);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--s4d-border);
  border-radius: calc(var(--s4d-radius) - 2px);
  background: #fff;
  color: var(--s4d-foreground);
  box-shadow: var(--s4d-shadow-sm);
  transition: border-color var(--s4d-transition), box-shadow var(--s4d-transition);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--s4d-muted-foreground);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--s4d-ring);
  outline: 0;
  box-shadow: 0 0 0 3px hsl(214 100% 40% / 0.14);
}

label {
  font-weight: 600;
}

/* Header */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid var(--s4d-border);
  background: rgb(255 255 255 / 0.93);
  backdrop-filter: blur(12px);
}

.header-topbar {
  display: none;
  border-bottom: 1px solid var(--s4d-border);
  background: hsl(220 15% 97%);
}

.header-topbar__inner {
  min-height: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.375rem;
  color: var(--s4d-muted-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.header-topbar a {
  color: inherit;
  text-decoration: none;
}

.header-topbar a:hover {
  color: var(--s4d-foreground);
}

.header-topbar__contact,
.header-topbar__meta {
  display: flex;
  gap: 1rem;
  white-space: nowrap;
}

.header-main {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
}

.site-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
  color: var(--s4d-foreground);
  text-decoration: none;
}

.site-brand__logo {
  width: auto;
  height: 3.5rem;
}

/* WooCommerce applies a generic image rule on product archives. Keep the
   header logo at its intended dimensions on those pages. */
.woocommerce .site-header .site-brand__logo,
.woocommerce-page .site-header .site-brand__logo {
  width: auto;
  height: 3.5rem;
}

.site-brand__former {
  display: none;
  color: var(--s4d-muted-foreground);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.desktop-navigation {
  display: none;
  min-width: 0;
}

.primary-menu,
.primary-menu ul,
.mobile-menu,
.footer-menu,
.legal-menu,
.site-footer__contact ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-menu {
  display: flex;
  align-items: center;
  gap: 0;
}

.primary-menu > li {
  position: relative;
}

.primary-menu a {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.6875rem;
  border-radius: calc(var(--s4d-radius) - 2px);
  color: var(--s4d-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--s4d-transition), background-color var(--s4d-transition);
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
  color: var(--s4d-primary);
}

.primary-menu .menu-item-has-children > a::after {
  width: 0.38rem;
  height: 0.38rem;
  margin: -0.2rem 0 0 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.primary-menu .sub-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  display: block;
  visibility: hidden;
  min-width: 14rem;
  padding: 0.5rem;
  border: 1px solid var(--s4d-border);
  border-radius: var(--s4d-radius);
  opacity: 0;
  background: #fff;
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.14);
  transform: translateY(0.35rem);
  transition: opacity var(--s4d-transition), visibility var(--s4d-transition), transform var(--s4d-transition);
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.primary-menu .sub-menu a:hover {
  background: hsl(220 15% 97%);
}

.primary-menu .sub-menu .sub-menu {
  top: -0.5rem;
  left: calc(100% + 0.4rem);
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}

.icon-button svg,
.cart-link svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.icon-button,
.cart-link {
  position: relative;
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--s4d-border);
  border-radius: calc(var(--s4d-radius) - 2px);
  background: #fff;
  color: var(--s4d-foreground);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--s4d-transition), border-color var(--s4d-transition), background-color var(--s4d-transition);
}

.icon-button:hover,
.cart-link:hover {
  border-color: hsl(214 100% 40% / 0.4);
  color: var(--s4d-primary);
}

.cart-link__label {
  display: none;
}

.cart-count {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  display: inline-flex;
  min-width: 1.2rem;
  height: 1.2rem;
  align-items: center;
  justify-content: center;
  padding-inline: 0.25rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--s4d-primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.cart-count.is-empty {
  display: none;
}

.header-quote {
  display: none;
  min-height: 2.25rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.875rem;
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  display: block;
}

.header-search,
.mobile-navigation {
  border-top: 1px solid var(--s4d-border);
  background: #fff;
}

.header-search[hidden],
.mobile-navigation[hidden] {
  display: none;
}

.header-search .site-container {
  padding-block: 1rem;
}

.search-form {
  display: flex;
  width: 100%;
  gap: 0.5rem;
}

.search-form label {
  flex: 1;
}

.mobile-navigation {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

.mobile-navigation .site-container {
  padding-block: 0.5rem 1rem;
}

.mobile-menu > li {
  border-bottom: 1px solid var(--s4d-border);
}

.mobile-menu a {
  display: block;
  padding-block: 0.75rem;
  color: var(--s4d-foreground);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.mobile-menu .sub-menu {
  margin: -0.35rem 0 0.5rem;
  padding-left: 1rem;
  list-style: none;
}

.mobile-menu .sub-menu a {
  padding-block: 0.35rem;
  color: var(--s4d-muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
}

.mobile-navigation__actions {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
}

.mobile-navigation__phone {
  color: var(--s4d-foreground);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/* Generic content shells: no page-specific content is introduced here. */
.content-shell,
.error-page {
  min-height: 45vh;
  padding-block: var(--s4d-section-space);
}

.content-container {
  max-width: 56rem;
}

.content-card {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.content-card + .content-card {
  margin-top: 1.5rem;
}

.entry-title a {
  color: inherit;
  text-decoration: none;
}

.entry-title a:hover {
  color: var(--s4d-primary);
}

.entry-thumbnail {
  display: block;
  margin: 1.5rem 0;
}

.entry-thumbnail img {
  width: 100%;
  border-radius: var(--s4d-radius);
}

.entry-content > *:last-child,
.content-card > *:last-child {
  margin-bottom: 0;
}

.archive-header {
  margin-bottom: 2rem;
}

.search-results-grid {
  display: grid;
  gap: 1.5rem;
}

.empty-state,
.error-page__inner {
  max-width: 48rem;
  text-align: center;
}

.error-page__inner {
  padding-block: 2rem;
}

.error-page__actions {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.error-page .search-form {
  max-width: 32rem;
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border: 1px solid hsl(214 100% 40% / 0.2);
  border-radius: 999px;
  background: hsl(214 100% 40% / 0.05);
  color: var(--s4d-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Rebrand notice */
.rebrand-notice {
  padding-block: 3.5rem;
  background: #fff;
}

.rebrand-notice__inner {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.rebrand-notice h2 {
  margin-top: 1.25rem;
  font-size: clamp(1.875rem, 4vw, 2.25rem);
}

.rebrand-notice h2 span {
  color: var(--s4d-primary);
}

.rebrand-notice p {
  color: var(--s4d-muted-foreground);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.7;
}

.rebrand-notice__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1.75rem;
}

.rebrand-notice__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid hsl(214 100% 40% / 0.3);
  border-radius: 999px;
  background: #fff;
  color: var(--s4d-primary);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--s4d-shadow-sm);
  transition: color var(--s4d-transition), background-color var(--s4d-transition), border-color var(--s4d-transition), box-shadow var(--s4d-transition);
}

.rebrand-notice__links a:hover {
  border-color: var(--s4d-primary);
  background: var(--s4d-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgb(0 102 204 / 0.18);
}

/* Footer */
.site-footer {
  background: var(--s4d-footer);
  color: #fff;
}

.site-footer__main {
  display: grid;
  gap: 2.5rem;
  padding-block: 3.5rem;
}

.site-footer h2 {
  margin-bottom: 1rem;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-footer__brand img {
  width: auto;
  height: 8rem;
}

.footer-menu,
.site-footer__contact ul {
  display: grid;
  gap: 0.625rem;
}

.footer-menu a,
.site-footer__contact,
.site-footer__contact a {
  color: rgb(255 255 255 / 0.7);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--s4d-transition);
}

.footer-menu a:hover,
.site-footer__contact a:hover {
  color: #fff;
}

.site-footer__contact strong {
  color: #fff;
}

.site-footer__bottom {
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.site-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  color: rgb(255 255 255 / 0.5);
  font-size: 0.875rem;
  text-align: center;
}

.site-footer__bottom p {
  margin: 0;
}

.legal-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.legal-menu a {
  color: rgb(255 255 255 / 0.6);
  text-decoration: none;
}

.legal-menu a:hover {
  color: #fff;
}

/* WooCommerce foundation only; product/cart/checkout templates remain untouched. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count {
  color: var(--s4d-muted-foreground);
}

.woocommerce span.onsale {
  background: var(--s4d-primary);
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--s4d-primary);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--s4d-primary);
}

@media (min-width: 640px) {
  .site-container { padding-inline: 1.5rem; }
  .site-brand__former { display: inline; }
  .error-page__actions { display: flex; align-items: center; justify-content: center; }
}

@media (min-width: 768px) {
  :root { --s4d-section-space: 6rem; }
  .header-topbar { display: block; }
  .header-topbar__inner { display: flex; }
  .header-main { min-height: 6rem; }
  .site-brand__logo,
  .woocommerce .site-header .site-brand__logo,
  .woocommerce-page .site-header .site-brand__logo { height: 4rem; }
  .header-quote { display: inline-flex; }
  .mobile-navigation { max-height: calc(100vh - 8rem); }
  .rebrand-notice { padding-block: 5rem; }
  .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 4rem; }
  .site-footer__bottom-inner { flex-direction: row; text-align: left; }
  .search-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .site-container { padding-inline: 2rem; }
  .cart-link { width: auto; padding-inline: 0.7rem; gap: 0.35rem; }
  .cart-link__label { display: inline; font-size: 0.875rem; font-weight: 600; }
  .site-footer__main { grid-template-columns: .9fr minmax(0, 1.65fr) minmax(0, .85fr) minmax(0, .8fr) minmax(0, 1.2fr); }
  .site-footer__brand img { height: 9rem; }
}

@media (min-width: 1280px) {
  .site-footer__main > .footer-menu-column:first-of-type .footer-menu a { white-space: nowrap; }
}

/* The added search action needs slightly more room than the Lovable header. */
@media (min-width: 1180px) {
  .header-main { gap: 1.25rem; }
  .desktop-navigation { display: block; flex: 1 1 auto; }
  .primary-menu { justify-content: flex-end; }
  .header-actions { gap: 0.5rem; }
  .menu-toggle { display: none; }
  .mobile-navigation { display: none !important; }
}

@media (min-width: 1280px) {
  .primary-menu a { padding-inline: 0.6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Homepage */
.home-page {
  overflow: hidden;
}

.hardware-quick-nav {
  border-bottom: 1px solid var(--s4d-border);
  background: #fff;
}

.hardware-quick-nav__inner {
  display: flex;
  overflow-x: auto;
  align-items: center;
  gap: 0.2rem;
  padding-block: 0.65rem;
  scrollbar-width: none;
}

.hardware-quick-nav__inner::-webkit-scrollbar {
  display: none;
}

.hardware-quick-nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.55rem;
  color: var(--s4d-foreground);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--s4d-transition), background var(--s4d-transition);
}

.hardware-quick-nav a:hover {
  background: hsl(214 100% 40% / 0.06);
  color: var(--s4d-primary);
}

.home-hero {
  padding-block: 3.5rem 0;
  background: #fff;
}

.home-hero__grid {
  display: grid;
  align-items: center;
  gap: 3rem;
}

.home-hero__content {
  max-width: 38rem;
}

.offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid hsl(214 100% 40% / 0.2);
  border-radius: 999px;
  background: hsl(214 100% 40% / 0.05);
  color: var(--s4d-primary);
  font-size: 0.875rem;
  font-weight: 700;
}

.offer-badge span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--s4d-primary);
  box-shadow: 0 0 0 0 hsl(214 100% 40% / 0.35);
  animation: s4d-pulse 2s infinite;
}

@keyframes s4d-pulse {
  70% { box-shadow: 0 0 0 0.5rem hsl(214 100% 40% / 0); }
  100% { box-shadow: 0 0 0 0 hsl(214 100% 40% / 0); }
}

.home-hero h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1.08;
}

.home-lead,
.section-heading p,
.quote-section__grid > div > p {
  color: var(--s4d-muted-foreground);
  font-size: 1.125rem;
  line-height: 1.7;
}

.check-list {
  display: grid;
  gap: 0.65rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.check-list li::before {
  position: absolute;
  top: 0.05rem;
  left: 0;
  display: inline-flex;
  width: 1.3rem;
  height: 1.3rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--s4d-primary);
  color: #fff;
  content: "✓";
  font-size: 0.7rem;
  line-height: 1;
}

.check-list--compact {
  gap: 0.7rem;
}

.check-list--compact li {
  font-size: 0.875rem;
  font-weight: 400;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.button--large {
  min-height: 3rem;
  padding-inline: 1.75rem;
  font-size: 1rem;
}

.button--dark-outline {
  border-color: rgb(255 255 255 / 0.28);
  background: transparent;
  color: #fff;
}

.button--dark-outline:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}

.home-hero__visual {
  position: relative;
}

.home-hero__visual::before {
  position: absolute;
  inset: -1rem;
  border-radius: 2rem;
  background: hsl(214 100% 40% / 0.07);
  content: "";
  filter: blur(1.5rem);
}

.home-hero__visual img,
.home-hero__video {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 24px 54px rgb(15 23 42 / 0.16);
}

.home-hero__video {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--s4d-dark);
}

.home-hero__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.stats-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4rem;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
  background: var(--s4d-dark);
}

.stats-band > div {
  padding: 1.5rem 0.75rem;
  border-right: 1px solid rgb(255 255 255 / 0.1);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  text-align: center;
}

.stats-band strong,
.stats-band span {
  display: block;
}

.stats-band strong {
  color: #fff;
  font-family: var(--s4d-font-heading);
  font-size: clamp(1.45rem, 4vw, 2.25rem);
}

.stats-band span {
  margin-top: 0.45rem;
  color: rgb(255 255 255 / 0.58);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* About page: a full-width statistics band and a vertical story-card list. */
.about-stats { background: var(--s4d-dark); }
.about-stats .stats-band { margin-top: 0; border-radius: 0; }
.about-story .about-story__cards { grid-template-columns: 1fr; align-content: start; }
.about-story .about-story__cards article { display: flex; min-height: 0; align-items: flex-start; gap: 1rem; }
.about-story .about-story__cards .card-icon { flex: 0 0 auto; margin: 0; }
.about-story__card-content { min-width: 0; }
.about-story__card-content h3 { margin-top: 0; }

.quote-section {
  border-block: 1px solid var(--s4d-border);
  background: hsl(216 25% 97%);
}

.quote-section__grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
  padding-block: 3.5rem;
}

.section-eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--s4d-primary);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lead-form-card {
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--s4d-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 16px 36px rgb(15 23 42 / 0.1);
}

.lead-form-card h3 {
  margin-bottom: 0.5rem;
}

.lead-form-card > p {
  color: var(--s4d-muted-foreground);
  font-size: 0.875rem;
}

.lead-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.lead-form__field,
.lead-form__submit {
  margin: 0;
}

.lead-form__field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.lead-form__submit {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.65rem;
  text-align: center;
}

.lead-form__submit small,
.pricing-card small {
  color: var(--s4d-muted-foreground);
  font-size: 0.75rem;
}

.lead-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
}

.form-notice {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.form-notice--success {
  background: #eaf8ef;
  color: #176b37;
}

.form-notice--error {
  background: #fff0f0;
  color: #a32121;
}

.home-section {
  padding-block: 4.5rem;
}

.section-surface {
  border-top: 1px solid var(--s4d-border);
  background: hsl(216 25% 97%);
}

.section-heading {
  max-width: 46rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-heading h2 {
  margin-bottom: 0.85rem;
}

.section-heading p {
  margin-bottom: 0;
}

.industry-grid,
.feature-grid,
.service-grid,
.product-grid {
  display: grid;
  gap: 1rem;
}

.link-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--s4d-border);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--s4d-foreground);
  text-decoration: none;
  transition: border-color var(--s4d-transition), box-shadow var(--s4d-transition), transform var(--s4d-transition);
}

.link-card:hover {
  border-color: hsl(214 100% 40% / 0.35);
  color: var(--s4d-foreground);
  box-shadow: var(--s4d-shadow-card);
  transform: translateY(-3px);
}

.link-card h3,
.feature-item h3 {
  margin: 0.9rem 0 0.5rem;
  font-size: 1rem;
}

.link-card p,
.feature-item p,
.product-card__body > p {
  flex: 1;
  margin-bottom: 0;
  color: var(--s4d-muted-foreground);
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Keep product-card summaries compact and card heights consistent. */
.product-card__body > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-icon {
  display: inline-flex;
  width: 2.7rem;
  height: 2.7rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: hsl(214 100% 40% / 0.1);
  color: var(--s4d-primary);
  font-size: 1.2rem;
  font-weight: 800;
}

.card-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* Optional Feature / Service blocks. These modifiers are isolated from other page types. */
.feature-split { display: grid; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.feature-split h2 { margin: 0.35rem 0 1rem; }
.feature-split p { color: var(--s4d-muted-foreground); line-height: 1.7; }
.feature-split .check-list { margin: 1.5rem 0; }
.feature-split__visual { display: flex; min-height: 17.5rem; align-items: center; justify-content: center; overflow: hidden; padding: 2rem; border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; }
.feature-split__visual img { width: 100%; max-height: 22rem; border-radius: 0.75rem; object-fit: cover; }
.feature-split__visual--contain img { width: auto; max-width: 100%; height: auto; max-height: 22rem; object-fit: contain; }
.feature-split__visual .card-icon { width: 5rem; height: 5rem; }
.feature-split__visual .card-icon svg { width: 2.25rem; height: 2.25rem; }
.text-link { color: var(--s4d-primary); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.feature-comparison__link { margin: 1.5rem 0 0; text-align: center; }
.feature-audiences .restaurant-context-feature {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--s4d-border);
  border-radius: 0.9rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--s4d-transition),
    border-color var(--s4d-transition),
    box-shadow var(--s4d-transition);
}

.feature-audiences .restaurant-context-feature:hover,
.feature-audiences .restaurant-context-feature:focus-visible {
  transform: translateY(-0.125rem);
  border-color: hsl(214 100% 40% / 0.24);
  box-shadow: 0 1.25rem 2.25rem -1.25rem hsl(214 100% 20% / 0.3);
}

.feature-audiences .restaurant-context-feature:focus-visible {
  outline: 0.1875rem solid hsl(214 100% 40% / 0.22);
  outline-offset: 0.1875rem;
}

.feature-audiences .restaurant-context-feature:hover .card-link {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  .feature-audiences .restaurant-context-feature {
    transition: border-color var(--s4d-transition), box-shadow var(--s4d-transition);
  }

  .feature-audiences .restaurant-context-feature:hover,
  .feature-audiences .restaurant-context-feature:focus-visible {
    transform: none;
  }
}

.feature-audiences .card-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 1rem;
}
/* Match the compact Lovable support card used on Feature pages. */
.feature-service-page .feature-support .support-card {
  max-width: 48rem;
  gap: 1rem;
  padding: 2rem;
  border-radius: 1rem;
}

.feature-service-page .feature-support .support-card__icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  margin: 0;
}

.feature-service-page .feature-support .support-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.feature-service-page .feature-support .support-card h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
}

.feature-service-page .feature-support .rich-text {
  margin-top: 0.75rem;
}

.feature-service-page .feature-support .support-card p {
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.625;
}

.feature-service-page .feature-support .feature-support__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
}

.feature-service-page .feature-support .feature-support__topics li {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--s4d-border);
  border-radius: 999px;
  background: var(--s4d-background);
  color: var(--s4d-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
}

.feature-service-page .feature-support .feature-support__topics li::before {
  position: static;
  width: auto;
  height: auto;
  margin-right: 0.375rem;
  background: none;
  content: '✓';
  color: var(--s4d-primary);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .feature-service-page .feature-support .support-card {
    padding: 2.5rem;
  }
}
.pricing-offer { max-width: 48rem; margin: 0 auto; padding: clamp(1.75rem, 5vw, 3rem); border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; box-shadow: 0 1rem 2.5rem hsl(214 100% 20% / 0.08); text-align: center; }
.pricing-offer h2 { margin: 0.35rem 0 1.25rem; }
.pricing-offer__prefix { margin: 0; color: var(--s4d-muted-foreground); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.pricing-offer__price { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin: .35rem 0 .5rem; }
.pricing-offer__price strong { color: var(--s4d-primary); font-family: var(--s4d-font-heading); font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 1; }
.pricing-offer__price span, .pricing-offer__upfront span { color: var(--s4d-muted-foreground); }
.pricing-offer__upfront { margin: 0 0 1.5rem; }
.pricing-offer__upfront strong { margin-right: .35rem; font-family: var(--s4d-font-heading); font-size: 1.4rem; }
.pricing-offer__features { display: grid; gap: .85rem; margin: 1.5rem 0; text-align: left; }
.pricing-offer__features li { align-items: flex-start; }
.pricing-offer__features li span { display: block; margin-top: .2rem; color: var(--s4d-muted-foreground); font-weight: 400; }
.pricing-offer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.pricing-offer__note { margin: 1.25rem 0 0; color: var(--s4d-muted-foreground); font-size: .8rem; line-height: 1.55; }
.pricing-explanations__image { width: 100%; height: 9rem; margin-bottom: 1rem; border-radius: .65rem; object-fit: cover; }
.pricing-explanations .text-link { display: inline-block; margin-top: 1rem; }
.pricing-terms { padding: 0 0 2rem; color: var(--s4d-muted-foreground); font-size: .8rem; line-height: 1.55; text-align: center; }

@media (min-width: 768px) {
  .restaurant-workflow__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-split { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr); }
  .feature-split .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .feature-split--reverse > :first-child { order: 2; }
  .feature-split--reverse > :last-child { order: 1; }
}

/* Keep automatic feature icons in the original coloured tile treatment. */
.feature-item .card-icon,
.service-grid .link-card > .card-icon {
  display: inline-flex !important;
  width: 2.7rem !important;
  height: 2.7rem !important;
  flex: 0 0 2.7rem;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.65rem !important;
  background: hsl(214 100% 40% / 0.1) !important;
  color: var(--s4d-primary) !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

/* SVG has a browser default intrinsic size unless it is constrained explicitly. */
.feature-item .card-icon svg,
.service-grid .link-card > .card-icon svg {
  display: block;
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex: 0 0 1.25rem;
}

/* Compatibility with the deployed homepage markup, where the icon is a direct SVG child. */
.service-grid .link-card > svg {
  display: block;
  box-sizing: border-box;
  width: 2.7rem !important;
  height: 2.7rem !important;
  flex: 0 0 2.7rem;
  padding: .7rem;
  border-radius: .65rem;
  background: hsl(214 100% 40% / 0.1);
  color: var(--s4d-primary);
}

/* Compatibility with WordPress emoji markup in previously uploaded homepage files. */
.feature-item > span[aria-hidden="true"],
.service-grid .link-card > span[aria-hidden="true"] {
  display: inline-flex !important;
  width: 2.7rem !important;
  height: 2.7rem !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.65rem !important;
  background: hsl(214 100% 40% / 0.1) !important;
  line-height: 1 !important;
}

.feature-item > span[aria-hidden="true"] .wp-smiley,
.feature-item > span[aria-hidden="true"] .emoji,
.service-grid .link-card > span[aria-hidden="true"] .wp-smiley,
.service-grid .link-card > span[aria-hidden="true"] .emoji {
  width: 1.15rem !important;
  height: 1.15rem !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.card-link {
  margin-top: 1rem;
  color: var(--s4d-primary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.restaurant-card__image {
  display: block;
  height: 7rem;
  margin: -1.5rem -1.5rem 0;
  overflow: hidden;
  border-radius: .7rem .7rem 0 0;
  background: hsl(216 25% 97%);
}

.restaurant-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-grid {
  gap: 1.25rem;
}

/* Hardware hub follows the three-column Lovable product layout. */
.hardware-products-section {
  border-top: 1px solid var(--s4d-border);
  background: #fff;
}

.hardware-lead-section {
  background: #fff;
}

/* Hardware hub mirrors the dedicated Lovable hardware page without changing
   the shared product/category components used elsewhere. */
.hardware-hub .category-navigation > div > div {
  justify-content: center;
  flex-wrap: wrap;
  overflow: visible;
  padding-block: 0.6rem;
}

.hardware-hub .page-hero {
  padding-block: 2.5rem 3.5rem;
}

.hardware-hub .breadcrumbs {
  margin-bottom: 1.5rem;
}

.hardware-hub .page-hero h1 {
  max-width: 48rem;
  font-size: clamp(1.875rem, 4vw, 3rem);
}

.hardware-hub .hardware-products-section .section-heading {
  max-width: 42rem;
}

.hardware-hub .product-card h3 {
  font-size: 1.125rem;
  line-height: 1.35;
}

.hardware-hub .product-card__body > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hardware-intro .narrow-content {
  margin-inline: auto;
  text-align: center;
}

.hardware-includes .section-heading {
  margin-bottom: 2.5rem;
}

.hardware-includes .included-grid article {
  min-height: 100%;
  padding: 1.25rem;
  border-radius: 0.75rem;
}

.hardware-includes .included-grid article > span {
  width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
}

.hardware-bundle__grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

.hardware-bundle__grid > div:first-child > p {
  margin-top: 1rem;
  color: var(--s4d-muted-foreground);
  line-height: 1.7;
}

.hardware-bundle__note {
  font-size: 0.875rem;
  font-style: italic;
}

.hardware-bundle__card {
  padding: 2rem;
  border: 1px solid var(--s4d-border);
  border-radius: 1rem;
  background: hsl(216 25% 97%);
}

.hardware-bundle__card > strong {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--s4d-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hardware-bundle__card ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hardware-bundle__card li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.hardware-bundle__card li span {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--s4d-primary);
  color: #fff;
  font-size: 0.75rem;
}

.hardware-pricing .section-heading {
  max-width: 42rem;
  margin-bottom: 3rem;
}

.hardware-pricing .detail-card-grid article {
  padding: 1.5rem;
  border-radius: 0.75rem;
}

.hardware-benefits .detail-card-grid article {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hardware-benefits .detail-card-grid .card-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
}

/* Lovable restaurant-type benefits use a blue rule, not an icon tile. */
.restaurant-benefits .detail-card-grid article::before {
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--s4d-primary);
  content: "";
}

.restaurant-benefits .detail-card-grid .card-icon {
  display: none;
}

/* Lovable feature benefits use the same compact blue rule treatment. */
.feature-benefits .detail-card-grid article::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--s4d-primary);
}

.feature-benefits .detail-card-grid .card-icon {
  display: none;
}

.hardware-hub .reviews-section {
  border-top: 0;
  background: #fff;
}

.hardware-trust-strip {
  padding-block: 3rem 0;
  background: #fff;
}

.hardware-trust-strip__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}

.hardware-trust-strip__logos span {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--s4d-muted-foreground);
  box-shadow: var(--s4d-shadow-sm);
  font-size: 0.8rem;
  font-weight: 700;
}

.challenges-section .section-heading {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.challenge-grid {
  display: grid;
  max-width: 48rem;
  gap: 0.75rem;
  margin-inline: auto;
}

.challenge-grid article {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--s4d-border);
  border-radius: 0.75rem;
  background: #fff;
}

.challenge-grid .card-icon { flex: 0 0 2.7rem; }
.challenge-grid h3 { margin: 0.25rem 0 0; font-size: 1rem; }
.challenge-grid p { margin: 0.5rem 0 0; color: var(--s4d-muted-foreground); font-size: 0.9rem; line-height: 1.6; }
.challenges-section--cards .challenge-grid { max-width: none; gap: 1.5rem; }
.challenges-section--cards .challenge-grid article { display: block; padding: 1.5rem; border-radius: 0.75rem; }
.challenges-section--cards .challenge-grid .context-card-icon { display: inline-flex; margin-bottom: 1rem; }
.challenges-section--cards .challenge-grid .context-card-icon svg { width: 1.3rem; height: 1.3rem; }
.challenges-section--cards .challenge-grid h3 { margin: 0; font-size: 1.125rem; }
.challenges-section--cards .challenge-grid p { margin-top: 0.5rem; }

.restaurant-use-cases { background: #fff; }
.restaurant-use-cases .context-card-icon svg { width: 1.3rem; height: 1.3rem; }

/* Optional modern Restaurant Type blocks. Empty ACF sections output no markup. */
.restaurant-workflow { background: #fff; }
.restaurant-workflow__grid { display: grid; gap: 1rem; }
.restaurant-workflow__grid article { padding: 1.25rem; border: 1px solid var(--s4d-border); border-radius: 0.75rem; background: #fff; }
.restaurant-workflow__grid h3 { margin: 0.1rem 0 0.45rem; font-size: 1rem; }
.restaurant-workflow__grid p { margin: 0; color: var(--s4d-muted-foreground); font-size: 0.875rem; line-height: 1.65; }
.restaurant-context-features { background: #fff; }
.restaurant-context-features__grid { display: grid; gap: 2rem; }
.restaurant-context-features__grid h3 { margin: 0.1rem 0 0.45rem; font-size: 1.125rem; }
.restaurant-context-features__grid p { margin: 0; color: var(--s4d-muted-foreground); font-size: 0.875rem; line-height: 1.65; }
.restaurant-context-features .context-card-icon { margin-bottom: 1rem; }
.restaurant-context-features .context-card-icon svg,
.detail-card-grid .context-card-icon svg { width: 1.3rem; height: 1.3rem; }
.restaurant-why-choose .section-heading { max-width: 42rem; margin-bottom: 3.5rem; }
.restaurant-why-choose .context-card-icon { width: 3rem; height: 3rem; margin-bottom: 1rem; }
.restaurant-why-choose .context-card-icon svg { width: 1.5rem; height: 1.5rem; }
.restaurant-context-feature { color: inherit; text-decoration: none; }
.restaurant-context-feature .context-card-icon { margin-bottom: 1rem; }
.restaurant-context-feature .context-card-icon svg { width: 1.3rem; height: 1.3rem; }
.restaurant-related-features .link-card,
.restaurant-related-features .restaurant-context-feature {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--s4d-border);
  border-radius: 0.9rem;
  background: #fff;
}
.restaurant-related-features .link-card h3,
.restaurant-related-features .restaurant-context-feature h3 { margin-top: 0; }
.restaurant-related-features .link-card p,
.restaurant-related-features .restaurant-context-feature p { margin-top: 0.5rem; }
.restaurant-related-features .link-card > span:last-child { margin-top: auto; padding-top: 1rem; }
.restaurant-related-features .link-card > span:last-child {
  color: var(--s4d-primary);
  font-size: 0.875rem;
  font-weight: 800;
}
.section-related-links .link-card { min-height: 10rem; }
.section-related-links .link-card h3 { margin-top: 0; }
.section-related-links .link-card p {
  display: -webkit-box;
  overflow: hidden;
  flex: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.section-related-links .card-link {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--s4d-primary);
  font-size: 0.875rem;
  font-weight: 800;
}
.restaurant-capabilities--feature-grid .detail-card-grid { gap: 2rem; }
.restaurant-capabilities--feature-grid .detail-card-grid article { padding: 0; border: 0; border-radius: 0; background: transparent; }
.restaurant-capabilities--feature-grid .detail-card-grid .context-card-icon { margin-bottom: 1rem; }
.detail-card-grid--check-list { gap: 1rem; }
.detail-card-grid--check-list article {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
}
.detail-card-grid--check-list .card-icon--check {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 999px;
  background: hsl(214 100% 40% / 0.1);
  color: var(--s4d-primary);
  font-weight: 800;
}
.detail-card-grid--check-list h3 { margin: 0; font-size: 0.875rem; }
.detail-card-grid--check-list p { margin-top: 0.4rem; }

@media (min-width: 640px) {
  .challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .challenges-section--cards .challenge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .restaurant-workflow__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .restaurant-workflow__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .restaurant-context-features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detail-card-grid--check-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hardware-bundle__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
}

@media (max-width: 480px) {
  .hardware-hub .product-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hardware-hub .hardware-products-section .section-heading {
  margin-bottom: 2.5rem;
}

.product-card {
  position: relative;
  display: flex;
  overflow: hidden;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--s4d-border);
  border-radius: 1rem;
  background: #fff;
  transition: border-color var(--s4d-transition), box-shadow var(--s4d-transition), transform var(--s4d-transition);
}

.product-card:hover {
  border-color: hsl(214 100% 40% / 0.35);
  box-shadow: var(--s4d-shadow-card);
  transform: translateY(-3px);
}

.product-card__badge {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--s4d-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
}

.product-card__image {
  display: flex;
  height: 13rem;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: hsl(216 25% 97%);
}

.product-card__image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 250ms ease;
}

/* WooCommerce archive CSS otherwise forces product thumbnails to a distorted
   width on this taxonomy page. */
.woocommerce .product-card__image img,
.woocommerce-page .product-card__image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-card:hover .product-card__image img {
  transform: scale(1.05);
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}

.product-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.product-card h3 a {
  color: inherit;
  text-decoration: none;
}

.product-card h3 a:hover {
  color: var(--s4d-primary);
}

.product-card__price {
  margin-top: 1rem;
  color: var(--s4d-primary);
  font-family: var(--s4d-font-heading);
  font-size: 1.5rem;
  font-weight: 800;
}

.product-card__price del {
  color: var(--s4d-muted-foreground);
  font-size: 0.8em;
  font-weight: 500;
}

.product-card__price ins {
  text-decoration: none;
}

.product-card__price small,
.product-card__body > small {
  color: var(--s4d-muted-foreground);
  font-family: var(--s4d-font-body);
  font-size: 0.75rem;
  font-weight: 500;
}

.product-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.product-card__actions .button {
  min-width: 0;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding-inline: 0.45rem;
  font-size: 0.75rem;
  line-height: 1.1;
  white-space: nowrap;
}

.woocommerce .product-card__actions .button,
.woocommerce-page .product-card__actions .button { font-size: 0.8rem !important; }

.feature-grid {
  gap: 2rem;
}

.feature-item p {
  max-width: 23rem;
}

.service-grid {
  gap: 1rem;
}

.pricing-grid {
  display: grid;
  max-width: 58rem;
  margin-inline: auto;
  gap: 1.5rem;
}

.pricing-card,
.included-card {
  padding: clamp(2rem, 5vw, 2.5rem);
  border-radius: 1rem;
  background: #fff;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--s4d-primary);
  box-shadow: 0 18px 42px hsl(214 100% 40% / 0.12);
  text-align: center;
}

.pricing-card__badge {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--s4d-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 1rem;
}

.pricing-card__price strong {
  font-family: var(--s4d-font-heading);
  font-size: clamp(3.75rem, 9vw, 5rem);
  line-height: 1;
}

.pricing-card__price span,
.pricing-card > p {
  color: var(--s4d-muted-foreground);
}

.pricing-card .button {
  width: 100%;
  margin: 1rem 0 0.75rem;
}

.included-card {
  border: 1px solid var(--s4d-border);
}

.included-card h3 {
  font-size: 1.1rem;
}

.pain-list {
  display: grid;
  max-width: 50rem;
  margin-inline: auto;
  gap: 0.75rem;
}

.pain-row {
  display: grid;
  overflow: hidden;
  border-radius: 0.75rem;
}

.pain-row > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid;
  font-size: 0.875rem;
  font-weight: 600;
}

.pain-row__problem {
  border-color: rgb(220 38 38 / 0.12) !important;
  background: rgb(220 38 38 / 0.05);
}

.pain-row__solution {
  border-color: hsl(214 100% 40% / 0.12) !important;
  background: hsl(214 100% 40% / 0.05);
}

.pain-row__problem span {
  color: #d62f2f;
  font-size: 1.25rem;
}

.pain-row__solution span {
  color: var(--s4d-primary);
}

.centered-action {
  margin: 2.5rem 0 0;
  text-align: center;
}

.comparison-table {
  max-width: 50rem;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--s4d-border);
  border-radius: 1rem;
  box-shadow: var(--s4d-shadow-card);
}

.comparison-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  align-items: center;
  min-height: 3.6rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--s4d-border);
  background: #fff;
  font-size: 0.8rem;
  text-align: center;
}

.comparison-row:nth-child(odd) {
  background: hsl(216 25% 97%);
}

.comparison-row--head {
  border-top: 0;
  background: var(--s4d-primary) !important;
  color: #fff;
  font-weight: 800;
}

.comparison-row > :first-child {
  text-align: left;
}

.comparison-value--dine {
  color: var(--s4d-primary);
  font-weight: 800;
}

.comparison-value i {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #dff6e6;
  color: #17743b;
  font-style: normal;
  font-weight: 800;
}

.comparison-value i.is-no {
  background: #ffebeb;
  color: #bb2828;
}

.trust-strip {
  padding-block: 3rem 0;
}

.trust-strip__box {
  padding: 2rem;
  border: 1px solid var(--s4d-border);
  border-radius: 1rem;
  background: hsl(216 25% 97%);
}

.trust-strip__box > p {
  margin-bottom: 1.5rem;
  color: var(--s4d-primary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.trust-logos span {
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--s4d-muted-foreground);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: var(--s4d-shadow-sm);
}

.reviews-plugin-shell {
  max-width: 72rem;
  margin-inline: auto;
}

.reviews-fallback {
  padding: 2rem;
  border: 1px dashed var(--s4d-border);
  border-radius: 1rem;
  color: var(--s4d-muted-foreground);
  text-align: center;
}

.faq-section__inner {
  max-width: 54rem;
}

.faq-list {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--s4d-border);
  border-radius: 0.75rem;
  background: #fff;
}

.faq-item[open] {
  box-shadow: var(--s4d-shadow-sm);
}

.faq-item summary {
  position: relative;
  padding: 1.15rem 3.5rem 1.15rem 1.25rem;
  font-family: var(--s4d-font-heading);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary span::before,
.faq-item summary span::after {
  position: absolute;
  top: 50%;
  right: 1.35rem;
  width: 0.8rem;
  height: 2px;
  background: var(--s4d-primary);
  content: "";
  transform: translateY(-50%);
}

.faq-item summary span::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform var(--s4d-transition);
}

.faq-item[open] summary span::after {
  transform: translateY(-50%) rotate(0);
}

.faq-item > div {
  padding: 0 1.25rem 1.25rem;
}

.faq-item p {
  margin: 0;
  color: var(--s4d-muted-foreground);
  font-size: 0.9rem;
  line-height: 1.7;
}

.final-cta {
  padding-block: 4.5rem;
  background: var(--s4d-primary);
  text-align: center;
}

/* The dark CTA band uses its own button contrast treatment. */
.final-cta .button--primary,
.woocommerce .final-cta .button--primary,
.woocommerce-page .final-cta .button--primary {
  border-color: #fff;
  background: #fff;
  color: var(--s4d-foreground);
}

.final-cta .button--primary:hover,
.woocommerce .final-cta .button--primary:hover,
.woocommerce-page .final-cta .button--primary:hover {
  border-color: hsl(216 20% 95%);
  background: hsl(216 20% 95%);
  color: var(--s4d-foreground);
}

.final-cta .button--dark-outline {
  border-width: 2px;
  border-color: rgb(255 255 255 / 0.82);
}

.woocommerce .final-cta .button--secondary,
.woocommerce-page .final-cta .button--secondary {
  border-color: hsl(216 20% 95%);
  background: hsl(216 20% 95%);
  color: var(--s4d-foreground);
}

.woocommerce .final-cta .button--dark-outline,
.woocommerce-page .final-cta .button--dark-outline {
  border-color: rgb(255 255 255 / 0.7);
  background: transparent;
  color: #fff;
}

.final-cta h2 {
  max-width: 48rem;
  margin-inline: auto;
  color: #fff;
}

.final-cta p {
  max-width: 42rem;
  margin: 0 auto;
  color: rgb(255 255 255 / 0.68);
  font-size: 1.1rem;
}

.home-actions--center {
  justify-content: center;
}

.final-form-section__inner {
  max-width: 40rem;
}

@media (min-width: 640px) {
  .lead-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pain-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-row { padding-inline: 1.25rem; font-size: 0.875rem; }
}

@media (min-width: 768px) {
  .home-section { padding-block: 6rem; }
  .stats-band { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 1rem; }
  .stats-band > div { padding-block: 2rem; border-bottom: 0; }
  .quote-section__grid { padding-block: 4rem; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .final-cta { padding-block: 6rem; }
}

@media (min-width: 1024px) {
  .hardware-quick-nav__inner { justify-content: center; }
  .home-hero { padding-top: 5rem; }
  .home-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .quote-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .industry-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hardware-hub .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .home-actions .button { width: 100%; }
  .product-card__actions { grid-template-columns: 1fr; }
  .hardware-hub .product-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-row { grid-template-columns: 1.25fr 0.8fr 0.8fr; padding-inline: 0.65rem; font-size: 0.7rem; }
  .trust-strip__box { padding-inline: 1rem; }
}

/* Reusable product, category and solution templates */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 2rem;
  color: var(--s4d-muted-foreground);
  font-size: 0.8125rem;
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.breadcrumbs a:hover { color: var(--s4d-primary); }
.breadcrumbs strong { color: var(--s4d-foreground); font-weight: 700; }

.product-hero,
.page-hero { padding-block: 3rem 4.5rem; background: #fff; }

.product-hero__grid,
.page-hero__grid,
.split-intro {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

.product-hero__grid { align-items: start; }

/* Editorial columns should begin on the same baseline, regardless of copy length. */
.split-intro { align-items: start; }

.product-gallery__main,
.page-hero__image {
  display: flex;
  min-height: 20rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--s4d-border);
  border-radius: 1rem;
  background: hsl(216 25% 97%);
  padding: 2rem;
}

.product-gallery__main img,
.page-hero__image img {
  width: auto;
  max-width: 100%;
  max-height: 25rem;
  object-fit: contain;
}

.product-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.product-gallery__thumbs button {
  display: flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--s4d-border);
  border-radius: 0.55rem;
  background: hsl(216 25% 97%);
  cursor: pointer;
}

.product-gallery__thumbs button.is-active,
.product-gallery__thumbs button:hover { border-color: var(--s4d-primary); }
.product-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }

.product-hero__content { max-width: 37rem; }
.product-hero h1,
.page-hero h1 { margin-bottom: 0.85rem; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.12; }
.page-hero h1 span { color: var(--s4d-primary); }
.product-hero__lead,
.page-hero__lead { color: var(--s4d-muted-foreground); font-size: 1.0625rem; line-height: 1.7; }
.product-hero__lead p,
.page-hero__lead p { margin-bottom: 0; }
.product-hero__subtitle { margin: 0 0 0.9rem; color: var(--s4d-muted-foreground); font-size: 1.0625rem; line-height: 1.5; }
.product-hero__rating { min-height: 1.5rem; margin: 0 0 0.85rem; }
.product-hero .product-hero__rating .kk-star-ratings { display: inline-flex !important; align-items: center; gap: 0.45rem; margin: 0 !important; vertical-align: middle; }
.product-hero .product-hero__rating .kksr-stars { width: 6rem !important; height: 1rem !important; margin: 0 !important; overflow: visible !important; transform: scale(0.667); transform-origin: left center; }
.product-hero .product-hero__rating .kksr-stars .kksr-star { width: 28px !important; height: 24px !important; padding-right: 4px !important; background-size: 24px 24px !important; background-position: left center !important; }
.product-hero .product-hero__rating .kksr-stars .kksr-icon { width: 24px !important; height: 24px !important; }
.product-hero .product-hero__rating .kksr-legend { display: flex !important; height: 1rem !important; align-items: center; align-self: center; margin: 0 !important; color: var(--s4d-muted-foreground) !important; font-size: 0.875rem !important; font-weight: 400 !important; line-height: 1 !important; white-space: nowrap; }
.product-hero__description { margin-top: 1.35rem; }

.product-hero__price {
  margin-top: 1.5rem;
  color: var(--s4d-foreground);
  font-family: var(--s4d-font-heading);
  font-size: 2.25rem;
  font-weight: 800;
}

.product-hero__price del { color: var(--s4d-muted-foreground); font-size: 0.55em; font-weight: 500; }
.product-hero__price ins { text-decoration: none; }
.product-hero__price-note { margin: 0.3rem 0 1.25rem; color: var(--s4d-primary); font-size: 0.8rem; font-weight: 500; }
.product-hero .offer-badge { margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }

.product-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1rem 0; }
.product-hero__actions .product-cart-form { margin: 0; }
.product-hero__actions .button--secondary { min-width: 10.75rem; min-height: 3rem; border: 1px solid var(--s4d-border); border-radius: 0.5rem; background: #fff; color: var(--s4d-foreground); padding: 0.75rem 1.35rem; font-size: 0.875rem; font-weight: 600; text-align: center; }
.product-hero__actions .button--secondary:hover { border-color: var(--s4d-primary); background: #fff; color: var(--s4d-primary); }
.woocommerce .product-hero__actions a.button.button--secondary,
.woocommerce-page .product-hero__actions a.button.button--secondary { border: 1px solid var(--s4d-border) !important; background: #fff !important; color: var(--s4d-foreground) !important; box-shadow: none !important; }
.woocommerce .product-hero__actions a.button.button--secondary:hover,
.woocommerce-page .product-hero__actions a.button.button--secondary:hover { border-color: var(--s4d-primary) !important; background: #fff !important; color: var(--s4d-primary) !important; }
.product-cart-form { margin: 1rem 0; }
.product-cart-form form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
.product-cart-form .quantity .qty { min-height: 3rem; width: 4.5rem; border: 1px solid var(--s4d-border); border-radius: 0.5rem; padding: 0.5rem; }
.product-cart-form .single_add_to_cart_button { display: inline-flex; min-width: 10.75rem; min-height: 3rem; align-items: center; justify-content: center; gap: 0.55rem; border: 0; border-radius: 0.5rem; background: var(--s4d-primary); color: #fff; padding: 0.75rem 1.35rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.product-cart-form .single_add_to_cart_button::before { content: "🛒"; font-size: 0.95rem; line-height: 1; }
.product-cart-form .single_add_to_cart_button:hover { background: var(--s4d-primary-dark); }
.product-quick-facts { margin-top: 1.5rem; }
.product-hero__content .product-quick-facts li::before { background: #e7f1ff; color: var(--s4d-primary); }

/* Product hero only: mirror the reference's compact two-column fact list. */
@media (min-width: 640px) {
  .product-hero__content .product-quick-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

.narrow-content { max-width: 52rem; }
.narrow-content h2,
.split-intro h2,
.support-card h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
.rich-text { margin-top: 1rem; color: var(--s4d-muted-foreground); line-height: 1.75; }
.rich-text > :last-child { margin-bottom: 0; }

.spec-grid,
.check-card-grid,
.included-grid,
.detail-card-grid,
.link-card-grid { display: grid; gap: 1rem; }

.spec-grid > div {
  padding: 1rem;
  border: 1px solid var(--s4d-border);
  border-radius: 0.75rem;
  background: #fff;
}

.spec-grid dt { color: var(--s4d-muted-foreground); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.spec-grid dd { margin: 0.45rem 0 0; font-size: 0.9rem; font-weight: 700; }

.check-card-grid > div,
.included-grid article {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--s4d-border);
  border-radius: 0.7rem;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.check-card-grid span,
.included-grid article > span {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: hsl(214 100% 40% / 0.1);
  color: var(--s4d-primary);
  font-size: 0.72rem;
  font-weight: 800;
}

.included-grid h3,
.detail-card-grid h3,
.link-card-grid h3 { margin: 0.1rem 0 0.45rem; font-size: 1rem; }
.included-grid p,
.detail-card-grid p,
.link-card-grid p { margin: 0; color: var(--s4d-muted-foreground); font-size: 0.875rem; line-height: 1.65; }
.included-grid small { display: block; margin-top: 0.4rem; color: var(--s4d-primary); font-size: 0.75rem; font-weight: 800; }

.detail-card-grid article {
  padding: 1.5rem;
  border: 1px solid var(--s4d-border);
  border-radius: 0.9rem;
  background: #fff;
}

.detail-card-grid .card-icon { margin-bottom: 1rem; }
.card-step { display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; margin-bottom: 1rem; border-radius: 999px; background: var(--s4d-primary); color: #fff; font-size: 0.9rem; font-weight: 800; }
.link-card-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.support-card { display: flex; max-width: 55rem; gap: 1.25rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; }
.support-card__icon svg { width: 1.35rem; height: 1.35rem; }
.support-card p { margin: 0.8rem 0 0; color: var(--s4d-muted-foreground); line-height: 1.7; }
.support-card p:last-child { margin-bottom: 0; }

/* Feature pages mirror Lovable's white social-proof section after the trust strip. */
.feature-service-page .reviews-section { background: #fff; }
.feature-website-ecosystem__heading { max-width: 48rem; }
.feature-website-ecosystem__heading h2 { margin-top: .75rem; }
.feature-website-ecosystem__content { max-width: 64rem; margin: 2.5rem auto 0; }
.feature-website-ecosystem__flow { display: grid; align-items: center; gap: 1rem; }
.feature-website-ecosystem__node { padding: 1.5rem; border: 1px solid var(--s4d-border); border-radius: .75rem; background: #fff; text-align: center; }
.feature-website-ecosystem__node .context-card-icon { display: flex; width: 3rem; height: 3rem; margin: 0 auto; }
.feature-website-ecosystem__node .context-card-icon svg { width: 1.5rem; height: 1.5rem; }
.feature-website-ecosystem__node strong,
.feature-website-ecosystem__node span { display: block; }
.feature-website-ecosystem__node strong { margin-top: .75rem; font-family: var(--s4d-font-heading); font-size: 1.125rem; }
.feature-website-ecosystem__node span { margin-top: .25rem; color: var(--s4d-muted-foreground); font-size: .875rem; }
.feature-website-ecosystem__connector { color: var(--s4d-primary); font-size: 1.5rem; font-weight: 800; line-height: 1; text-align: center; }
.feature-website-ecosystem__tools { display: grid; gap: .75rem; margin-top: 1.5rem; }
.feature-website-ecosystem__tool { display: flex; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid var(--s4d-border); border-radius: .5rem; background: #fff; font-size: .875rem; font-weight: 700; }
.feature-website-ecosystem__tool .context-card-icon { width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; border-radius: .5rem; }
.feature-website-ecosystem__tool .context-card-icon svg { width: 1rem; height: 1rem; }
.feature-website-ecosystem__note { margin: 1.25rem 0 0; color: var(--s4d-muted-foreground); font-size: .875rem; text-align: center; }

@media (min-width: 640px) {
  .feature-website-ecosystem__flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .feature-website-ecosystem__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .feature-website-ecosystem__tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.feature-implementation__grid,
.feature-integration-directory__grid { display: grid; gap: 1.25rem; }
.feature-implementation__grid article,
.feature-integration-directory__grid article { padding: 1.5rem; border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; }
.feature-implementation__grid article > span { color: var(--s4d-primary); font-family: var(--s4d-font-heading); font-size: .875rem; font-weight: 800; }
.feature-implementation__grid h3 { margin: .7rem 0 0; font-size: 1rem; }
.feature-implementation__grid p,
.feature-integration-directory__category > p,
.feature-integration-directory__grid p { color: var(--s4d-muted-foreground); font-size: .875rem; line-height: 1.65; }
.feature-integration-directory__category + .feature-integration-directory__category { margin-top: 2.5rem; }
.feature-integration-directory__category > h3 { margin-bottom: .5rem; }
.feature-integration-directory__category > p { margin-top: 0; }
.feature-integration-directory__grid { margin-top: 1.25rem; }
.feature-integration-directory__grid img { width: auto; max-width: 7rem; height: 2rem; margin-bottom: 1rem; object-fit: contain; object-position: left; }
.feature-integration-directory__grid h4 { margin: 0; font-size: 1rem; }
.feature-integration-directory__grid article > a { display: inline-block; margin-top: .8rem; color: var(--s4d-primary); font-size: .8125rem; font-weight: 800; text-decoration: none; }

.category-navigation { border-block: 1px solid var(--s4d-border); background: #fff; }
.category-navigation > div > div { display: flex; overflow-x: auto; gap: 0.3rem; padding-block: 0.65rem; scrollbar-width: none; }
.category-navigation > div > div::-webkit-scrollbar { display: none; }
.category-navigation a { flex: 0 0 auto; padding: 0.55rem 0.8rem; border-radius: 0.5rem; color: var(--s4d-foreground); font-size: 0.8125rem; font-weight: 700; text-decoration: none; }
.category-navigation a:hover,
.category-navigation a.is-active { background: hsl(214 100% 40% / 0.1); color: var(--s4d-primary); }
.category-count { margin: 1rem 0 0; color: var(--s4d-muted-foreground); font-size: 0.875rem; font-weight: 700; }
.empty-state { color: var(--s4d-muted-foreground); text-align: center; }

/* Optional POS hardware cost comparison. */
.hardware-comparison .section-heading { margin-bottom: 2rem; }
.hardware-comparison__bundle { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 auto 2rem; color: var(--s4d-heading); font-weight: 700; text-align: center; }
.hardware-comparison__bundle img { width: 4rem; height: 4rem; object-fit: contain; }
.hardware-comparison__bundle p { margin: 0; }
.hardware-comparison__matrix { overflow: hidden; border: 1px solid var(--s4d-border); border-radius: var(--s4d-radius); background: #fff; }
.hardware-comparison__row { display: grid; grid-template-columns: minmax(12rem, 1.15fr) repeat(var(--hardware-comparison-columns, 2), minmax(0, 1fr)); }
.hardware-comparison__row + .hardware-comparison__row { border-top: 1px solid var(--s4d-border); }
.hardware-comparison__metric, .hardware-comparison__cell { padding: 1rem 1.125rem; }
.hardware-comparison__metric { display: flex; align-items: center; color: var(--s4d-heading); font-weight: 700; border-right: 1px solid var(--s4d-border); }
.hardware-comparison__cell { display: flex; align-items: center; justify-content: center; min-width: 0; text-align: center; }
.hardware-comparison__cell + .hardware-comparison__cell { border-left: 1px solid var(--s4d-border); }
.hardware-comparison__cell.is-primary { background: #eef5ff; color: var(--s4d-heading); }
.hardware-comparison__row--head .hardware-comparison__cell { min-height: 5rem; flex-direction: column; gap: .45rem; }
.hardware-comparison__row--head .hardware-comparison__cell.is-primary { box-shadow: inset 0 3px 0 var(--s4d-primary); }
.hardware-comparison__row--head img, .hardware-comparison__card header img { max-width: 6rem; max-height: 2rem; object-fit: contain; }
.hardware-comparison__cards { display: none; }
.hardware-comparison__footnote { max-width: 60rem; margin: 1rem auto 0; color: var(--s4d-muted-foreground); font-size: .8125rem; line-height: 1.5; text-align: center; }
.hardware-comparison__footnote p { margin: .35rem 0; }
.hardware-comparison__footnote a { color: var(--s4d-primary); }

@media (max-width: 767px) {
  .hardware-comparison__matrix { display: none; }
  .hardware-comparison__cards { display: grid; gap: 1rem; }
  .hardware-comparison__card { padding: 1.25rem; border: 1px solid var(--s4d-border); border-radius: var(--s4d-radius); background: #fff; }
  .hardware-comparison__card.is-primary { border-color: #a8cbff; background: #f4f8ff; }
  .hardware-comparison__card header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
  .hardware-comparison__card h3 { margin: 0; }
  .hardware-comparison__card dl { margin: 0; }
  .hardware-comparison__card dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--s4d-border); }
  .hardware-comparison__card dt { color: var(--s4d-muted-foreground); }
  .hardware-comparison__card dd { margin: 0; color: var(--s4d-heading); font-weight: 700; text-align: right; }
  .hardware-comparison__card-note { margin: 1rem 0 0; color: var(--s4d-muted-foreground); font-size: .875rem; }
}

@media (min-width: 640px) {
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-card-grid,
  .included-grid,
  .detail-card-grid,
  .link-card-grid,
  .feature-implementation__grid,
  .feature-integration-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .product-hero,
  .page-hero { padding-block: 4rem 5.5rem; }
  .product-hero__grid,
  .page-hero__grid,
  .split-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .page-hero__grid--single { grid-template-columns: minmax(0, 48rem); }
  .product-gallery__main,
  .page-hero__image { min-height: 28rem; }
  .spec-grid,
  .check-card-grid,
  .included-grid,
  .detail-card-grid,
  .feature-integration-directory__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-implementation__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .detail-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detail-card-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .link-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Static pages, posts and WooCommerce account flows */
.simple-landing__hero-actions { margin-top: 1.5rem; }
.simple-landing__cards .link-card:hover { border-color: var(--s4d-border); box-shadow: none; transform: none; }
.simple-landing__card-image { width: calc(100% + 3rem); max-height: 13rem; margin: -1.5rem -1.5rem 1.25rem; border-radius: 0.9rem 0.9rem 0 0; object-fit: cover; }
.simple-landing__card-highlight { margin: 0 0 0.75rem !important; color: var(--s4d-primary) !important; font-weight: 800; }
.simple-landing__card-terms { display: block; margin-top: 1rem; color: var(--s4d-muted-foreground); font-size: 0.75rem; line-height: 1.5; }
.simple-landing__cards .button { align-self: flex-start; margin-top: 1.25rem; }
.careers-jobs__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.careers-jobs__meta { margin: 0 0 0.75rem !important; color: var(--s4d-primary) !important; font-size: 0.8rem !important; font-weight: 800; }
.careers-jobs__grid .text-link { display: inline-block; margin-top: 1rem; }
.careers-jobs__empty { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--s4d-border); border-radius: 0.9rem; background: #fff; }
.careers-jobs__empty h3 { margin: 0; color: var(--s4d-foreground); }
.careers-jobs__empty p { margin: 0.75rem 0 0; }

/* Independent POS sales partner program. */
.careers-partner-hero__note { max-width: 48rem; margin: 1.25rem 0 0; padding: .9rem 1rem; border-left: 3px solid var(--s4d-primary); background: var(--s4d-blue-light); color: var(--s4d-foreground); font-size: .9rem; line-height: 1.6; }
.careers-partner-facts__grid { display: grid; gap: 1rem; }
.careers-partner-facts__grid article { padding: 1.35rem; border: 1px solid var(--s4d-border); border-radius: .9rem; background: #fff; }
.careers-partner-facts__grid article > span { display: block; margin-bottom: .6rem; color: var(--s4d-primary); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.careers-partner-facts__grid h3 { margin: 0; font-size: 1rem; }
.careers-partner-facts__grid p { margin: .55rem 0 0; color: var(--s4d-muted-foreground); font-size: .875rem; line-height: 1.6; }
.careers-partner-requirements__grid { display: grid; gap: 2rem; }
.careers-partner-requirements h2, .careers-partner-requirements h3 { margin-top: 0; }
.careers-partner-requirements p { color: var(--s4d-muted-foreground); line-height: 1.7; }
.careers-partner-requirements .check-list { margin: 1.5rem 0 0; }
.careers-partner-not-fit { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--s4d-border); border-radius: .85rem; background: #fff; }
.careers-partner-not-fit h3 { margin-bottom: .8rem; font-size: 1rem; }
.careers-partner-not-fit ul { display: grid; gap: .65rem; margin: 0; padding-left: 1.1rem; color: var(--s4d-muted-foreground); font-size: .875rem; line-height: 1.55; }
.careers-partner-compensation__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.careers-partner-fee { max-width: 52rem; margin: 1.5rem auto 0; padding: 1.35rem 1.5rem; border: 1px solid hsl(214 100% 40% / .25); border-radius: .9rem; background: var(--s4d-blue-light); }
.careers-partner-fee h3 { margin: 0; color: var(--s4d-foreground); font-size: 1rem; }
.careers-partner-fee p { margin: .65rem 0 0; color: var(--s4d-muted-foreground); font-size: .9rem; line-height: 1.65; }
.careers-partner-territory__metros { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.careers-partner-territory__metros span { padding: .5rem .8rem; border: 1px solid var(--s4d-border); border-radius: 999px; background: #fff; color: var(--s4d-foreground); font-size: .85rem; font-weight: 600; }
.careers-partner-territory__note { margin: 1.25rem auto 0; color: var(--s4d-muted-foreground); font-size: .8rem; font-style: italic; line-height: 1.55; text-align: center; }
.careers-partner-application .section-heading > p:last-child { margin-top: 1.5rem; }
.careers-partner-application .final-form-section__inner { margin-inline: auto; }
.careers-partner-form-card { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; box-shadow: var(--s4d-shadow-sm); }
.careers-partner-form { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.careers-partner-form__field { margin: 0; }
.careers-partner-form__field label { display: block; margin-bottom: .35rem; color: var(--s4d-foreground); font-size: .84rem; font-weight: 600; }
.careers-partner-form__field label span { color: var(--s4d-primary); }
.careers-partner-form__field input, .careers-partner-form__field select, .careers-partner-form__field textarea { width: 100%; min-height: 2.75rem; padding: .7rem .8rem; border: 1px solid var(--s4d-border); border-radius: .5rem; background: #fff; color: var(--s4d-foreground); font: inherit; font-size: .93rem; }
.careers-partner-form__field textarea { min-height: 6rem; resize: vertical; }
.careers-partner-form__field input[type="file"] { min-height: auto; padding: .6rem; }
.careers-partner-form__field small { display: block; margin-top: .4rem; color: var(--s4d-muted-foreground); font-size: .75rem; }
.careers-partner-form__acknowledgement { margin: .25rem 0 0; padding: 1rem; border-radius: .65rem; background: var(--s4d-blue-light); color: var(--s4d-foreground); font-size: .84rem; line-height: 1.55; }
.careers-partner-form__acknowledgement label { display: flex; align-items: flex-start; gap: .65rem; }
.careers-partner-form__acknowledgement input { flex: 0 0 auto; margin-top: .2rem; }
.careers-partner-form__honeypot { position: absolute !important; left: -9999px !important; overflow: hidden !important; width: 1px !important; height: 1px !important; }
.careers-partner-form__submit { margin: .25rem 0 0; }
.careers-partner-form__submit .button { width: 100%; min-height: 3rem; }

@media (min-width: 768px) {
  .careers-jobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .careers-partner-requirements__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .careers-partner-compensation__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .careers-partner-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .careers-partner-form__field--full, .careers-partner-form__acknowledgement, .careers-partner-form__submit { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .careers-partner-facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.page-hero--simple { background: hsl(216 25% 97%); border-bottom: 1px solid var(--s4d-border); }
.page-hero--simple .breadcrumbs { margin-bottom: 1.25rem; }
.page-hero--simple .page-hero__lead { max-width: 46rem; margin: 1rem 0 0; }
.page-hero--simple .entry-meta { margin: 1rem 0 0; color: var(--s4d-muted-foreground); font-size: .875rem; }

.office-card-grid,
.pricing-plan-grid,
.blog-card-grid { display: grid; gap: 1.25rem; }
.office-card,
.pricing-plan,
.blog-card { border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; }
.office-card { padding: 1.5rem; }
.office-card .section-eyebrow { margin-bottom: .4rem; font-size: .65rem; }
.office-card h3 { margin-bottom: .45rem; font-size: 1.05rem; }
.office-card h3 a,
.office-card p a { color: inherit; text-decoration: none; }
.office-card h3 a:hover,
.office-card p a:hover { color: var(--s4d-primary); }
.office-card p { margin: 0; color: var(--s4d-muted-foreground); font-size: .875rem; line-height: 1.65; }

.contact-layout { display: grid; align-items: start; gap: 2.5rem; }
.contact-layout__intro h2 { font-size: clamp(1.8rem, 3vw, 2.35rem); }
.contact-inline-cards { display: grid; gap: .75rem; margin-top: 1.5rem; }
.contact-channel { display: block; padding: 1rem 1.15rem; border: 1px solid var(--s4d-border); border-radius: .7rem; color: var(--s4d-foreground); font-family: var(--s4d-font-heading); font-weight: 700; text-decoration: none; }
.contact-channel:hover { border-color: var(--s4d-primary); color: var(--s4d-primary); }
.lead-form__field--full { grid-column: 1 / -1; }
.contact-form-privacy { margin: .85rem 0 0; color: var(--s4d-muted-foreground); font-size: .8125rem; text-align: center; }
.contact-existing-customer { margin-top: 1rem; padding: 1rem 1.15rem; border: 1px solid hsl(214 100% 40% / .2); border-radius: .7rem; background: var(--s4d-blue-light); }
.contact-existing-customer h3 { margin: 0 0 .35rem; font-size: 1rem; }
.contact-existing-customer p { margin: 0; color: var(--s4d-foreground); font-size: .875rem; line-height: 1.55; }
.contact-existing-customer a { color: var(--s4d-primary); font-weight: 700; white-space: nowrap; }
.contact-location__grid { display: grid; gap: 1.25rem; }
.contact-location__details { display: grid; gap: 1.25rem; }
.contact-location__services { padding: 1.25rem; border: 1px solid var(--s4d-border); border-radius: 1rem; background: hsl(216 25% 97%); }
.contact-location__services h3 { margin-bottom: .75rem; font-size: 1.05rem; }
.contact-location__services ul { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.contact-location__services li { padding: .35rem .65rem; border: 1px solid var(--s4d-border); border-radius: 999px; background: #fff; color: var(--s4d-muted-foreground); font-size: .8125rem; }
.contact-location__map { min-height: 20rem; overflow: hidden; border: 1px solid var(--s4d-border); border-radius: 1rem; background: var(--s4d-muted); }
.contact-location__map iframe { width: 100%; height: 100%; min-height: 20rem; border: 0; }

.pricing-plan { display: flex; flex-direction: column; padding: 2rem; }
.pricing-plan--featured { border: 2px solid var(--s4d-primary); box-shadow: 0 18px 42px hsl(214 100% 40% / .14); }
.pricing-plan__badge { align-self: flex-start; margin-bottom: 1rem; padding: .3rem .7rem; border-radius: 999px; background: var(--s4d-primary); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pricing-plan h2 { margin-bottom: .25rem; font-size: 1.55rem; }
.pricing-plan__tagline { min-height: 2.8rem; margin: 0; color: var(--s4d-muted-foreground); font-size: .875rem; }
.pricing-plan__price { display: flex; align-items: baseline; gap: .35rem; margin: 1.5rem 0; }
.pricing-plan__price strong { color: var(--s4d-primary); font-family: var(--s4d-font-heading); font-size: 2.6rem; }
.pricing-plan__price span { color: var(--s4d-muted-foreground); font-size: .8rem; }
.pricing-plan .check-list { flex: 1; margin: 0 0 1.75rem; }
.pricing-plan .button { width: 100%; text-align: center; }
.pricing-table-wrap { overflow-x: auto; border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; }
.pricing-table { width: 100%; min-width: 38rem; border-collapse: collapse; text-align: left; }
.pricing-table th { padding: .95rem 1.25rem; background: hsl(216 25% 97%); color: var(--s4d-muted-foreground); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.pricing-table td { padding: 1rem 1.25rem; border-top: 1px solid var(--s4d-border); font-size: .9rem; }
.pricing-table td:nth-child(2) { color: var(--s4d-primary); font-family: var(--s4d-font-heading); font-weight: 800; }
.check-list--columns { columns: 1; }

.blog-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; transition: box-shadow var(--s4d-transition), transform var(--s4d-transition); }
.blog-card:hover { box-shadow: var(--s4d-shadow-card); transform: translateY(-3px); }
.blog-card__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: hsl(216 25% 97%); }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .blog-card__image img { transform: scale(1.04); }
.blog-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.blog-card .section-eyebrow { margin-bottom: .4rem; font-size: .65rem; }
.blog-card h2 { margin: 0; font-size: 1.15rem; }
.blog-card h2 a { color: inherit; text-decoration: none; }
.blog-card h2 a:hover { color: var(--s4d-primary); }
.blog-card__excerpt { flex: 1; margin-top: .75rem; color: var(--s4d-muted-foreground); font-size: .875rem; line-height: 1.65; }
.blog-card__excerpt p { margin: 0; }
.blog-card .entry-meta { margin: 1rem 0 0; color: var(--s4d-muted-foreground); font-size: .75rem; }
.post-article__image { overflow: hidden; margin-bottom: 2.5rem; border-radius: 1rem; background: hsl(216 25% 97%); }
.post-article__image img { width: 100%; height: auto; }
.post-article .rich-text,
.legal-content .rich-text { font-size: 1.05rem; }
.post-article .rich-text h2,
.post-article .rich-text h3,
.legal-content .rich-text h2,
.legal-content .rich-text h3 { margin-top: 2rem; color: var(--s4d-foreground); }

.woocommerce-cart-form,
.woocommerce-checkout-review-order,
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-order-received,
.woocommerce form.checkout,
.woocommerce .cart-collaterals .cart_totals { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; box-shadow: var(--s4d-shadow-sm); }
.woocommerce table.shop_table { margin: 0; border: 0; border-collapse: collapse; border-radius: 0; }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: 1rem .75rem; border-color: var(--s4d-border); }
.woocommerce table.shop_table th { color: var(--s4d-muted-foreground); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; margin-top: 1.5rem; }
.woocommerce form .form-row label { color: var(--s4d-foreground); font-size: .85rem; font-weight: 700; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single { min-height: 3rem; border: 1px solid var(--s4d-border); border-radius: .5rem; background: #fff; padding: .7rem .8rem; }
.woocommerce .select2-container .select2-selection--single { display: flex; align-items: center; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--s4d-foreground); line-height: 1.3; }
.woocommerce-checkout #payment { border-radius: .75rem; background: hsl(216 25% 97%); }
.woocommerce-checkout #payment div.payment_box { background: #fff; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
.woocommerce .woocommerce-order-overview { display: grid; gap: .8rem; margin: 0 0 2rem; padding: 1.25rem; border: 1px solid var(--s4d-border); border-radius: .75rem; background: hsl(216 25% 97%); }
.woocommerce .woocommerce-order-overview li { float: none; margin: 0; padding: 0; border: 0; font-size: .75rem; }
.woocommerce .woocommerce-order-overview li strong { margin-top: .2rem; color: var(--s4d-foreground); font-size: .95rem; }
.woocommerce .return-to-shop { margin-top: 1.5rem; }

/* WooCommerce transactional flow: cart drawer, cart, checkout and receipt. */
body.s4d-cart-drawer-open { overflow: hidden; }
.s4d-cart-drawer[hidden] { display: none; }
.s4d-cart-drawer { position: fixed; z-index: 10000; inset: 0; }
.s4d-cart-drawer__overlay { position: absolute; inset: 0; background: rgb(15 23 42 / .42); }
.s4d-cart-drawer__panel { position: relative; display: flex; width: min(28rem, 100%); height: 100%; margin-left: auto; flex-direction: column; overflow: hidden; background: #fff; box-shadow: -18px 0 48px rgb(15 23 42 / .18); outline: 0; }
.s4d-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--s4d-border); }
.s4d-cart-drawer__header h2 { margin: 0; font-size: 1.35rem; }
.s4d-cart-drawer__header h2 span { color: var(--s4d-muted-foreground); font-size: .9rem; font-weight: 500; }
.s4d-cart-drawer__close { width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--s4d-foreground); font-size: 2rem; line-height: 1; cursor: pointer; }
.s4d-cart-drawer__close:hover { background: var(--s4d-muted); }
.s4d-cart-drawer__content { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 0; overflow: hidden; }
#s4d-cart-drawer .s4d-mini-cart__items { min-height: 0; flex: 1; padding: 1rem 1.5rem; overflow-y: auto; }
#s4d-cart-drawer ul.woocommerce-mini-cart { display: grid; gap: 1rem; width: 100%; margin: 0; padding: 0; list-style: none; }
#s4d-cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .75rem; width: 100%; min-height: 6rem; margin: 0; padding: 0 1.5rem 1rem 0; border: 0; border-bottom: 1px solid var(--s4d-border); }
#s4d-cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item::before,
#s4d-cart-drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item::after { display: none !important; content: none !important; }
#s4d-cart-drawer .s4d-mini-cart__image { width: 5rem; height: 5rem; overflow: hidden; border-radius: .5rem; background: #f4f7fb; }
#s4d-cart-drawer .s4d-mini-cart__image a { display: block; width: 100%; height: 100%; }
#s4d-cart-drawer .s4d-mini-cart__image img { float: none !important; display: block; width: 100% !important; height: 100% !important; margin: 0 !important; padding: .5rem; border: 0; border-radius: 0; object-fit: contain; background: transparent; }
#s4d-cart-drawer .s4d-mini-cart__details { min-width: 0; }
#s4d-cart-drawer .s4d-mini-cart__details h3 { margin: 0 0 .15rem; padding: 0; font-family: var(--s4d-font-body); font-size: .875rem; font-weight: 700; line-height: 1.35; }
#s4d-cart-drawer .s4d-mini-cart__details h3 a { display: inline; color: var(--s4d-foreground); text-decoration: none; }
#s4d-cart-drawer .s4d-mini-cart__price { margin: 0 0 .5rem; color: var(--s4d-muted-foreground); font-size: .75rem; font-weight: 400; line-height: 1.25rem; }
#s4d-cart-drawer .s4d-mini-cart__price span { margin-left: .08rem; }
#s4d-cart-drawer .s4d-cart-remove { position: absolute; top: 0; right: 0; display: grid; width: 1.5rem; height: 1.5rem; place-items: center; padding: 0; border: 0; background: transparent; color: var(--s4d-muted-foreground); cursor: pointer; }
#s4d-cart-drawer .s4d-cart-remove svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#s4d-cart-drawer .s4d-cart-remove:hover { color: #b42318; }
#s4d-cart-drawer .s4d-quantity { display: inline-flex; width: auto; align-items: center; overflow: hidden; border: 1px solid var(--s4d-border); border-radius: .375rem; }
#s4d-cart-drawer .s4d-quantity button, .s4d-cart-quantity > button { min-width: 1.75rem; min-height: 1.75rem; padding: 0; border: 0; background: #fff; color: var(--s4d-muted-foreground); font: inherit; cursor: pointer; }
#s4d-cart-drawer .s4d-quantity button:hover, .s4d-cart-quantity > button:hover { background: var(--s4d-muted); color: var(--s4d-foreground); }
#s4d-cart-drawer .s4d-quantity span { min-width: 1.5rem; color: var(--s4d-foreground); text-align: center; font-size: .875rem; }
#s4d-cart-drawer .s4d-mini-cart__footer { flex: 0 0 auto; padding: 1rem 1.5rem; border-top: 1px solid var(--s4d-border); background: #fff; }
#s4d-cart-drawer .woocommerce-mini-cart__total { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 .75rem; padding: 0; border: 0; color: var(--s4d-muted-foreground); font-size: .875rem; }
#s4d-cart-drawer .woocommerce-mini-cart__total strong { color: var(--s4d-foreground); font-family: var(--s4d-font-heading); font-size: 1.25rem; font-weight: 700; }
#s4d-cart-drawer .woocommerce-mini-cart__total strong small { margin-left: .08rem; color: var(--s4d-muted-foreground); font-family: var(--s4d-font-body); font-size: .875rem; font-weight: 500; }
#s4d-cart-drawer .s4d-mini-cart__note { margin: 0 0 1rem; color: var(--s4d-muted-foreground); font-size: .75rem; line-height: 1.45; }
#s4d-cart-drawer .woocommerce-mini-cart__buttons { display: grid; gap: .5rem; margin: 0; padding: 0; }
#s4d-cart-drawer .woocommerce-mini-cart__buttons .button { display: inline-flex; width: 100%; min-height: 2.75rem; align-items: center; justify-content: center; margin: 0; border-radius: .375rem; text-align: center; }
#s4d-cart-drawer .woocommerce-mini-cart__buttons .checkout { border-color: var(--s4d-primary); background: var(--s4d-primary); color: #fff; }
#s4d-cart-drawer .woocommerce-mini-cart__buttons .button--secondary { border: 1px solid var(--s4d-border); background: #fff; color: var(--s4d-foreground); }
#s4d-cart-drawer .s4d-mini-cart__empty { display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; padding: 1.5rem; text-align: center; }
#s4d-cart-drawer .s4d-mini-cart__empty svg { width: 3rem; height: 3rem; fill: none; stroke: var(--s4d-muted-foreground); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#s4d-cart-drawer .woocommerce-mini-cart__empty-message { margin: 0; color: var(--s4d-muted-foreground); }

.s4d-commerce-hero { padding: 3.5rem 0 1rem; background: var(--s4d-muted); }
.s4d-commerce-hero .breadcrumbs { margin-bottom: 1.5rem; }
.s4d-commerce-hero .eyebrow { margin: 0 0 .5rem; color: var(--s4d-primary); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.s4d-commerce-hero h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.s4d-cart-layout, .s4d-checkout-layout { display: grid; gap: 1.5rem; padding-top: 2rem; padding-bottom: 4rem; }
.s4d-cart-items, .s4d-checkout-form { min-width: 0; }
.woocommerce-cart-form { width: auto; float: none; padding: 0; border: 0; background: transparent; box-shadow: none; }
.s4d-cart-item-list { display: grid; gap: 1rem; }
.s4d-cart-item { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1rem; padding: 1.125rem; border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; box-shadow: var(--s4d-shadow-sm); }
.s4d-cart-item__image img { width: 5.25rem; height: 5.25rem; object-fit: contain; border-radius: .5rem; background: var(--s4d-muted); }
.s4d-cart-item__details h2 { margin: 0 0 .3rem; font-size: 1.125rem; line-height: 1.3; }
.s4d-cart-item__details h2 a { color: inherit; text-decoration: none; }
.s4d-cart-item__price { color: var(--s4d-primary); font-size: 1rem; font-weight: 700; line-height: 1.35; }
.s4d-cart-item__description { display: -webkit-box; margin: .35rem 0 0; overflow: hidden; color: var(--s4d-muted-foreground); font-size: .875rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.s4d-cart-item__controls { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .25rem; }
.s4d-cart-quantity { display: inline-flex; align-items: center; border: 1px solid var(--s4d-border); border-radius: .4rem; overflow: hidden; }
.s4d-cart-quantity .quantity { margin: 0; }
.s4d-cart-quantity > button { min-width: 2.25rem; min-height: 2.5rem; }
.s4d-cart-quantity input.qty { width: 2.6rem; height: 2.5rem; padding: 0; border: 0; text-align: center; -moz-appearance: textfield; }
.s4d-cart-quantity input.qty::-webkit-inner-spin-button, .s4d-cart-quantity input.qty::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.s4d-text-button { padding: 0; border: 0; background: transparent; color: var(--s4d-muted-foreground); font: inherit; text-decoration: underline; cursor: pointer; }
.s4d-text-button:hover { color: #b42318; }
.s4d-cart-item__subtotal { margin-left: auto; color: var(--s4d-foreground); font-size: 1rem; font-weight: 700; text-align: right; white-space: nowrap; }
.s4d-cart-item__subtotal span { display: none; }
.s4d-cart-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.s4d-cart-actions .coupon { display: flex; flex: 1 1 20rem; gap: .5rem; }
.s4d-cart-actions input { min-width: 0; flex: 1; padding: .65rem .75rem; border: 1px solid var(--s4d-border); border-radius: .4rem; }
.s4d-cart-summary { align-self: start; }
.s4d-cart-summary .cart_totals { width: 100%; margin: 0; padding: 1.5rem; border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; box-shadow: var(--s4d-shadow-sm); }
.s4d-cart-summary .cart_totals h2 { margin-top: 0; font-size: 1.25rem; }
.s4d-cart-summary .cart_totals table { width: 100%; }
.s4d-cart-summary .cart_totals th, .s4d-cart-summary .cart_totals td { padding: .7rem 0; text-align: left; }
.s4d-cart-summary .cart_totals td { text-align: right; }
.s4d-cart-summary .cart_totals .order-total th, .s4d-cart-summary .cart_totals .order-total td { padding-top: 1rem; border-top: 1px solid var(--s4d-border); font-size: 1.1rem; }
.s4d-cart-summary .checkout-button { width: 100%; text-align: center; }
.s4d-continue-shopping { display: block; margin-top: .9rem; color: var(--s4d-foreground); text-align: center; font-size: .875rem; }
.s4d-empty-cart { padding-top: 2rem; padding-bottom: 4rem; }
.s4d-empty-cart__card { max-width: 36rem; margin: 0 auto; padding: clamp(2rem, 7vw, 4rem); border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; box-shadow: var(--s4d-shadow-sm); text-align: center; }
.s4d-empty-cart__card h2 { margin-top: 0; }
.s4d-empty-cart__card p { margin: 0 0 1.5rem; color: var(--s4d-muted-foreground); }

.s4d-checkout-page .s4d-commerce-hero { padding-bottom: .75rem; }
.s4d-checkout-layout { max-width: 70rem; padding-top: 1.35rem; }
.s4d-checkout-steps { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.35rem; padding: 0; list-style: none; }
.s4d-checkout-steps li { display: flex; align-items: center; gap: .45rem; color: var(--s4d-muted-foreground); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.s4d-checkout-steps li:not(:last-child)::after { width: clamp(1.25rem, 5vw, 3.75rem); height: 1px; margin-left: .25rem; background: var(--s4d-border); content: ""; }
.s4d-checkout-steps span { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: var(--s4d-blue-light); color: var(--s4d-primary); }
.s4d-checkout-form #customer_details { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.woocommerce .s4d-checkout-form .col-1, .woocommerce .s4d-checkout-form .col-2 { float: none !important; width: 100% !important; padding: 1.4rem; border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; box-shadow: var(--s4d-shadow-sm); }
.woocommerce .s4d-checkout-form .col-2 { padding: 0; border: 0; background: transparent; box-shadow: none; }
.s4d-checkout-form .col-2:empty { display: none; }
.s4d-checkout-form .woocommerce-shipping-fields { padding: 1.4rem; border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; box-shadow: var(--s4d-shadow-sm); }
.s4d-checkout-form h3 { margin-top: 0; font-size: 1.2rem; }
.s4d-checkout-form .woocommerce-billing-fields__field-wrapper, .s4d-checkout-form .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.woocommerce .s4d-checkout-form .form-row { width: auto !important; float: none !important; margin: 0; }
.s4d-checkout-form .form-row label { margin-bottom: .35rem; font-size: .84rem; font-weight: 600; }
.s4d-checkout-form .form-row input.input-text, .s4d-checkout-form .form-row select, .s4d-checkout-form .select2-container .select2-selection--single { min-height: 2.75rem; font-size: .93rem; }
.s4d-checkout-summary { align-self: start; padding: 1.4rem; border: 1px solid var(--s4d-border); border-radius: 1rem; background: #fff; box-shadow: var(--s4d-shadow-sm); }
.s4d-checkout-summary h2 { margin: 0 0 1rem; font-size: 1.2rem; }
.s4d-checkout-summary .woocommerce-checkout-review-order { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.s4d-checkout-summary .woocommerce-checkout-review-order-table { width: 100%; }
.s4d-checkout-summary .woocommerce-checkout-review-order-table th, .s4d-checkout-summary .woocommerce-checkout-review-order-table td { padding: .9rem 0; text-align: left; font-size: .9rem; vertical-align: top; }
.s4d-checkout-summary .woocommerce-checkout-review-order-table .product-name { width: 70%; padding-right: .75rem; text-align: left; }
.s4d-checkout-summary .woocommerce-checkout-review-order-table .product-total { width: 30%; text-align: right; white-space: nowrap; }
.s4d-checkout-summary .woocommerce-checkout-review-order-table tbody .product-name { font-size: .94rem; line-height: 1.45; }
.s4d-checkout-summary .woocommerce-checkout-review-order-table tfoot th, .s4d-checkout-summary .woocommerce-checkout-review-order-table tfoot td { font-size: .875rem; }
.s4d-checkout-summary .woocommerce-checkout-review-order-table .order-total th, .s4d-checkout-summary .woocommerce-checkout-review-order-table .order-total td { font-size: 1.05rem; font-weight: 700; }
.s4d-checkout-summary #payment { margin-top: 1rem; border-radius: .65rem; background: transparent; }
.s4d-checkout-summary #payment .payment_methods { margin: 0; border: 0; }
.s4d-checkout-summary #payment div.payment_box { margin: .65rem 0 0; padding: .85rem 0 0; border-radius: 0; background: transparent; color: var(--s4d-muted-foreground); font-size: .875rem; line-height: 1.55; }
.s4d-checkout-summary #payment div.payment_box::before { display: none; }
.s4d-checkout-summary .place-order { margin: 1rem 0 0; padding: 0; }
.s4d-checkout-summary #place_order { min-height: 3rem; width: 100%; }
.s4d-additional-information { margin-top: 1rem; border: 1px solid var(--s4d-border); border-radius: .75rem; background: #fff; }
.s4d-additional-information summary { display: flex; align-items: baseline; justify-content: space-between; padding: 1rem 1.1rem; color: var(--s4d-foreground); cursor: pointer; font-size: .9rem; font-weight: 600; }
.s4d-additional-information summary small { color: var(--s4d-muted-foreground); font-size: .78rem; font-weight: 400; }
.s4d-additional-information[open] summary { border-bottom: 1px solid var(--s4d-border); }
.s4d-additional-information .woocommerce-additional-fields__field-wrapper { padding: 1rem 1.1rem; }
.s4d-thankyou { padding-top: 2rem; padding-bottom: 4rem; }
.s4d-thankyou .woocommerce-order-received { margin: 0 0 1.5rem; font-size: 1.1rem; }

@media (min-width: 768px) {
  .s4d-cart-layout { grid-template-columns: minmax(0, 1.85fr) minmax(18rem, 1fr); gap: 2rem; }
  .s4d-checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(22.5rem, 24.375rem); gap: 2.25rem; }
  .s4d-checkout-form .woocommerce-billing-fields__field-wrapper, .s4d-checkout-form .woocommerce-shipping-fields__field-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95rem 1rem; }
  .s4d-checkout-form #billing_phone_field { order: 3; }
  .s4d-checkout-form #billing_email_field { order: 4; }
  .s4d-checkout-form #billing_country_field { order: 5; }
  .s4d-checkout-form #billing_address_1_field { order: 6; }
  .s4d-checkout-form #billing_address_2_field { order: 7; }
  .s4d-checkout-form #billing_city_field { order: 8; }
  .s4d-checkout-form #billing_state_field { order: 9; }
  .s4d-checkout-form #billing_country_field, .s4d-checkout-form #billing_address_1_field, .s4d-checkout-form #billing_address_2_field, .s4d-checkout-form #billing_city_field, .s4d-checkout-form #billing_state_field { grid-column: 1 / -1; }
  .s4d-cart-item { grid-template-columns: 5.25rem minmax(0, 1fr) 8.5rem; align-items: start; }
  .s4d-cart-item__controls { display: grid; width: 8.5rem; grid-column: auto; justify-items: end; gap: .55rem; }
  .s4d-cart-item__subtotal { margin: 0; }
  .s4d-cart-summary .cart_totals { position: sticky; top: 7rem; }
  .s4d-checkout-summary { position: sticky; top: 7rem; margin-top: 3.2rem; }
}

@media (min-width: 640px) {
  .office-card-grid,
  .pricing-plan-grid,
  .blog-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-list--columns { columns: 2; }
}
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(22rem, .85fr); gap: 4rem; }
  .contact-location__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; }
  .office-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .blog-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}