/*
 * Widget section padding
 * --------------------------------------------------------------------------
 * 1) Re-asserts the CORRECT desktop values for the widget padding scale.
 *    The theme's style.css contains conflicting overrides (e.g. .pt-20 forced
 *    to 80px !important), which broke admin-selected padding. This file loads
 *    AFTER style.css, so these rules win.
 * 2) Adds mobile-only padding classes (pt-m-*, pb-m-*) applied below 768px,
 *    letting admins set smaller spacing on phones than desktop, per widget.
 *
 * Both physical and logical properties are set with !important to beat the
 * theme's logical-property overrides regardless of writing mode.
 */

/* ---- Desktop (all breakpoints) — correct values ---- */
/* .pt-0   { padding-top: 0     !important; padding-block-start: 0     !important; }
.pt-20  { padding-top: 20px  !important; padding-block-start: 20px  !important; }
.pt-30  { padding-top: 30px  !important; padding-block-start: 30px  !important; }
.pt-40  { padding-top: 40px  !important; padding-block-start: 40px  !important; }
.pt-50  { padding-top: 50px  !important; padding-block-start: 50px  !important; }
.pt-70  { padding-top: 70px  !important; padding-block-start: 70px  !important; }
.pt-80  { padding-top: 80px  !important; padding-block-start: 80px  !important; }
.pt-100 { padding-top: 100px !important; padding-block-start: 100px !important; }
.pt-120 { padding-top: 120px !important; padding-block-start: 120px !important; }

.pb-0   { padding-bottom: 0     !important; padding-block-end: 0     !important; }
.pb-20  { padding-bottom: 20px  !important; padding-block-end: 20px  !important; }
.pb-30  { padding-bottom: 30px  !important; padding-block-end: 30px  !important; }
.pb-40  { padding-bottom: 40px  !important; padding-block-end: 40px  !important; }
.pb-50  { padding-bottom: 50px  !important; padding-block-end: 50px  !important; }
.pb-70  { padding-bottom: 70px  !important; padding-block-end: 70px  !important; }
.pb-80  { padding-bottom: 80px  !important; padding-block-end: 80px  !important; }
.pb-100 { padding-bottom: 100px !important; padding-block-end: 100px !important; }
.pb-120 { padding-bottom: 120px !important; padding-block-end: 120px !important; } */

/*
 * ---- Background (bg_color / bg_image) ----
 * generateStyles() sets --bg-color / --bg-image as inline custom properties on
 * the section, but most theme components never consumed them (bg_image worked
 * nowhere, bg_color only on a couple). These rules apply the background for ANY
 * widget section — but ONLY when the admin actually set it: the attribute
 * selector matches just those elements whose inline style carries the variable,
 * so sections without a configured background are never touched/clobbered.
 */
[style*="--bg-color"] {
    background-color: var(--bg-color) !important;
}
[style*="--bg-image"] {
    background-image: var(--bg-image) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---- Mobile only (< 768px) — per-widget overrides ---- */
/* @media (max-width: 767.98px) {
    .pt-m-0   { padding-top: 0     !important; padding-block-start: 0     !important; }
    .pt-m-20  { padding-top: 20px  !important; padding-block-start: 20px  !important; }
    .pt-m-30  { padding-top: 30px  !important; padding-block-start: 30px  !important; }
    .pt-m-40  { padding-top: 40px  !important; padding-block-start: 40px  !important; }
    .pt-m-50  { padding-top: 50px  !important; padding-block-start: 50px  !important; }
    .pt-m-70  { padding-top: 70px  !important; padding-block-start: 70px  !important; }
    .pt-m-80  { padding-top: 80px  !important; padding-block-start: 80px  !important; }
    .pt-m-100 { padding-top: 100px !important; padding-block-start: 100px !important; }
    .pt-m-120 { padding-top: 120px !important; padding-block-start: 120px !important; }

    .pb-m-0   { padding-bottom: 0     !important; padding-block-end: 0     !important; }
    .pb-m-20  { padding-bottom: 20px  !important; padding-block-end: 20px  !important; }
    .pb-m-30  { padding-bottom: 30px  !important; padding-block-end: 30px  !important; }
    .pb-m-40  { padding-bottom: 40px  !important; padding-block-end: 40px  !important; }
    .pb-m-50  { padding-bottom: 50px  !important; padding-block-end: 50px  !important; }
    .pb-m-70  { padding-bottom: 70px  !important; padding-block-end: 70px  !important; }
    .pb-m-80  { padding-bottom: 80px  !important; padding-block-end: 80px  !important; }
    .pb-m-100 { padding-bottom: 100px !important; padding-block-end: 100px !important; }
    .pb-m-120 { padding-bottom: 120px !important; padding-block-end: 120px !important; }
} */