#shipping-info td {
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid #ccc;
    height: 50px;
}

/* ProductGroup landing page richtext helper (Summernote output)
   This repo doesn't enable Tailwind Typography, so we avoid `prose`. */
.pg-richtext p,
.pg-richtext ul,
.pg-richtext ol,
.pg-richtext blockquote,
.pg-richtext table {
    margin: 0 0 1rem 0;
}

.pg-richtext h2,
.pg-richtext h3,
.pg-richtext h4 {
    margin: 1.25rem 0 0.75rem 0;
    font-weight: 700;
}

.pg-richtext ul {
    padding-left: 1.25rem;
    list-style: disc;
}

.pg-richtext ol {
    padding-left: 1.25rem;
    list-style: decimal;
}

.pg-richtext li {
    margin: 0 0 0.35rem 0;
}

.pg-richtext a {
    text-decoration: underline;
    color: inherit;
}

.pg-richtext img {
    max-width: 100%;
    height: auto;
}

/* ── Spacing — used dynamically in section PHP maps (not in static HTML, need explicit CSS) ── */
.pt-6  { padding-top: 1.5rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-16 { padding-top: 4rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-16 { padding-bottom: 4rem; }

/* ── Width presets ── */
.max-w-7xl { max-width: 80rem; }

/* ── Benefits grid columns ── */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Hover states used in section buttons ── */
.hover\:bg-blue-800:hover { background-color: #1e40af; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
.hover\:bg-blue-500:hover { background-color: #3b82f6; }
.hover\:bg-gray-100:hover  { background-color: #f3f4f6; }

/* ── Two-column section layout ─────────────────────────────────────────── */
.pg-two-col-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow: hidden;
}

/* Desktop: side-by-side, widths driven by CSS custom properties */
@media (min-width: 1024px) {
    .pg-two-col-wrap {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }

    /* Text column: takes remaining space based on --txt-pct */
    .pg-two-col-text {
        flex: 0 0 var(--txt-pct, 60%);
        max-width: var(--txt-pct, 60%);
        order: 1;
    }

    /* When image is on the left, text moves to the right */
    .pg-two-col-text--img-left {
        order: 2;
    }

    /* Image column: width driven by --img-pct */
    .pg-two-col-image {
        flex: 0 0 var(--img-pct, 40%);
        max-width: var(--img-pct, 40%);
        order: 2;
    }

    /* Image on the left */
    .pg-two-col-image--left {
        order: 1;
    }
}

/* Mobile: full width stacked, image comes after text */
.pg-two-col-text,
.pg-two-col-image {
    width: 100%;
}