/* Safe Flatsome skinning: avoid relying on page IDs or generated UX Builder IDs. */
.pony-design-system .row { max-width: var(--pony-container); }
.pony-design-system .button { transition: transform var(--pony-transition), box-shadow var(--pony-transition), background-color var(--pony-transition), color var(--pony-transition); }
.pony-design-system .button:hover { transform: translateY(-1px); }

/* Use these classes in UX Builder's "Class" field. */
.pony-grid-5 > .row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pony-grid-4 > .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pony-grid-3 > .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pony-grid-2 > .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.pony-grid-5 > .row > .col,
.pony-grid-4 > .row > .col,
.pony-grid-3 > .row > .col,
.pony-grid-2 > .row > .col { max-width: none; flex-basis: auto; padding: 0; }