/*#region Positions */
.pos-abs {
    position: absolute;
    top: var(--top, auto);
    right: var(--right, auto);
    bottom: var(--bottom, auto);
    left: var(--left, auto);
}
.pos-rel { position: relative;}

.isolate { isolation: isolate;}

.flex-fill { flex: 1; min-height: 0; }
.flex-none { flex: none; }
.inset { position: absolute; inset: 0; }
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.full { width: 100% !important; height: 100% !important; }
/* Для флекс-контейнеров: занять всё свободное место */
.flex-grow { flex-grow: 1 !important; }
.bleed {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.justify-center {
    display: flex;
    justify-content: center;
}

.center-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.center-start {
    display: flex;

    justify-content: center;
}

.place-center {
    place-items: center;
}


/*#endregion */

/*#region Paddings */
.pd--s-m { padding: var(--space-s) var(--space-m) }
.pd--s-l { padding: var(--space-s) var(--space-l) }
.pd--m-m { padding: var(--space-m) var(--space-m) }

.pd-card-grid {padding: var(--space-l) var(--space-m);}
.pd-main { padding-top: var(--header-height); padding-bottom: var(--header-height-plus); }

.pd--l-m { padding: var(--space-l) var(--space-m) }
.pd--xl-m { padding: var(--space-xl) var(--space-m) }
.pd--xl-l { padding: var(--space-xl) var(--space-l) }
.pd--l-l { padding: var(--space-l) var(--space-l) }
.pd--0-l { padding: 0 var(--space-l) }
.pd--0-m { padding: 0 var(--space-m) }

/*#endregion */

/*#region Margins */
.m-vert-m { margin: var(--space-m) 0; }
.m-vert-l { margin: var(--space-l) 0; }
.m-vert-xl { margin: var(--space-xl) 0; }
.m-vert-side { margin: 0 var(--space-l); }

.m-bottom-m { margin-bottom: var(--space-m);}
.m-bottom-xl { margin-bottom: var(--space-xl);}

.m-left-m { margin-left: var(--space-m);}

/*#endregion */

/*#region Gaps */
.g-zero { gap: 0 !important; }
.g-xs { gap: var(--space-xs) !important;}
.g-s { gap: var(--space-s) !important;}
.g-m { gap: var(--space-m) !important;}
.g-l { gap: var(--space-l) !important;}
.g-xl { gap: var(--space-xl) !important;}
.g-xxl { gap: var(--space-xxl) !important;}
/*#endregion */

/*#region Aspect Ratios  */
.aspect-square { aspect-ratio: 1 / 1 !important; }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-video-card { aspect-ratio: 48 / 43; }
.aspect-golden { aspect-ratio: 1.618 / 1; }
.aspect-promo { aspect-ratio: 3/ 4; }
.aspect-video-content { aspect-ratio: 3 / 1;  }
.catalogue-front { aspect-ratio: 7 / 10; max-width: 400px;  }
.aspect-blog { aspect-ratio: 16 / 17;  }
/*#endregion */


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0); /* Старый метод */
  clip-path: inset(100%); /* Новый метод */
  white-space: nowrap;
  border: 0;
}


.abs-center {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.abs-bottom {
    position: absolute !important;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0);
    margin-bottom: var(--space-m);
}
.hidden-item { display: none !important; }