/* NOTE: Selector Specificity: (1, 5, 2) */
html body.et-db #et-boc .et_builder_outer_content .et-l[class*="et-l--"] .et_builder_inner_content {
	& [data-module="price-table"] {
		color: var(--color-white----);

		& > .product-category {
			padding-block: var(--size-30-150);
			padding-inline: var(--size-20-0);

			& > .product-category-inner {
				display: grid;
				row-gap: var(--size-30-60);
				max-width: 1200px;
				margin-inline: auto;

				& > header {
					display: grid;
					align-items: center;
					justify-content: center;
					text-align: center;
					row-gap: var(--size-20-40);

					& > aside {
						justify-self: center;
						width: var(--size-50-120);
						height: auto;
						aspect-ratio: 1 / 1;

						& > svg {
							display: block;
							width: 100%;
							height: 100%;

							& .background {
								fill: var(--color-trans----);
							}

							& .foreground {
								fill: var(--color-parchment);
							}
						}
					}

					& > section {
						/*  */
					}
				}

				& > .disclamers {
					padding-block: var(--size-20-40);
					padding-inline: var(--size-20-40);
					border-radius: 10px;
					color: var(--color-plumlight);
					background-color: var(--color-raisin---);

					& a {
						display: inline;
						padding: 0;
					}

					&.hide {
						display: none;
					}
				}

				& > .price-table {
					--block-extra-offset: 60px;

					display: grid;
					grid-template-columns: 1fr 1.0769fr 1fr;
					align-items: stretch;
					justify-content: center;
					margin-block: var(--block-extra-offset);

					& > .product {
						--border-radius: 10px;

						display: grid;
						row-gap: 20px;
						grid-template-rows: 1fr max-content;
						padding-block: var(--size-30-40);
						padding-inline: var(--size-20-40);
						border: 1px solid var(--color-white----);
						background-color: rgba(255, 255, 255, 0.2);

						& > section {
							display: grid;
							row-gap: var(--size-20-30);
							align-items: stretch;
							grid-template-rows: max-content 1fr;

							& > header {
								display: grid;
								align-items: center;
								justify-content: center;
								text-align: center;

								& > h3 {
									color: var(--color-parchment);
									padding-block-end: 10px;
								}

								& > .price {
									&.size-large {
										font: var(--type-base-h4-alt-fonts);
										letter-spacing: var(--type-base-h4-alt-space);
									}
								}

								&.pre-tagline {
									& > .price {
										order: 1;
									}
								}
							}

							& > details {
								height: 100%;

								& > summary {
									display: none;
									align-items: center;
									column-gap: 10px;
									list-style: none;
									cursor: pointer;
									font: inherit;
									font-weight: 600;
									letter-spacing: inherit;
								}

								& > section {
									display: grid;
									row-gap: 20px;
									align-items: start;
									grid-template-rows: 1fr 0.2fr;
									height: 100%;

									&:has(> mark.tag > em:empty) {
										grid-template-rows: 1fr;
									}

									& > mark.tag {
										&:has(> em:empty) {
											display: none;
										}
									}
								}
							}
						}

						& > footer {
							& > .product-generator {
								position: relative;
								display: grid;
								row-gap: 15px;

								& > .loading-dock {
									position: relative;
									display: grid;
									row-gap: 15px;

									& > .loading {
										opacity: 1;
										position: absolute;
										inset-block: 50%;
										inset-inline: 50%;
										translate: -50% -50%;
										pointer-events: none;
										transition: var(--transition-opacity);
									}

									& > select {
										height: 48px;
										opacity: 0;
									}

									& > .select2 {
										opacity: 0;
										cursor: pointer;
										border-radius: 10px;
										border: 1px solid var(--color-white----);
										padding-block: 9px;
										padding-inline: 20px;
										font: var(--type-base-body---fonts);
										letter-spacing: var(--type-base-body---space);
										color: var(--color-white----);
										background-color: var(--color-trans----);
										transition: var(--transition-opacity), var(--transition-color-border);

										& > .selection {
											& > .select2-selection {
												overflow: hidden;

												& > span {
													white-space: wrap;
												}
											}
										}

										& [class$="arrow"] {
											inset-block: 50% auto;
											inset-inline: auto 12px;
											translate: 0 -50%;
										}

										&:focus-visible,
										&:focus-within {
											outline: var(--outline-basis);
											outline-offset: var(--outline-off--);
										}
									}
								}

								& > button {
									& > svg {
										color: var(--color-plum-----);
									}

									&:focus-visible,
									&:focus-within {
										& > svg {
											color: var(--color-parchment);
										}
									}

									&:hover {
										& > svg {
											color: var(--color-parchment);
										}
									}
								}

								& .error-dock {
									pointer-events: none;
									opacity: 0;
									position: absolute;
									inset: calc(100% + 1em) 0 auto 0;
									background-color: var(--color-white----);
									color: var(--color-black----);
									border-radius: 10px;
									padding: 10px;
									margin-block-start: 30px;
									transition: var(--transition-opacity), var(--transition-mbs);
									box-shadow: var(--client-shadow-lift);
								}

								&.validate {
									& .invalid {
										&,
										& + .select2 {
											border-color: var(--color-proofread);
										}
									}

									&:has(.invalid) {
										& .error-dock {
											margin-block-start: 0;
											opacity: 1;
										}
									}
								}
							}
						}

						&:first-child {
							border-inline-end: none;
							border-top-left-radius: var(--border-radius);
							border-bottom-left-radius: var(--border-radius);
							z-index: var(--strata-chaos--low----);
						}

						&:last-child {
							border-inline-start: none;
							border-top-right-radius: var(--border-radius);
							border-bottom-right-radius: var(--border-radius);
						}

						&.featured {
							position: relative;
							border: none;
							color: var(--color-grape----);
							background-color: var(--color-white----);

							& > section,
							& > footer {
								position: relative;
								z-index: var(--strata-baldur-base---);
							}

							& > section {
								& > header {
									position: relative;

									& > mark.stamp {
										position: absolute;
										inset-block: auto calc(100% + 40px);
										inset-inline: 50%;
										width: max-content;
										translate: -50% 0;
									}

									& > h3 {
										color: var(--color-plum-----);
									}

									& > .price {
										color: var(--color-black----);
									}
								}

								& > details {
									& > summary {
										color: var(--color-plum-----);
									}

									& > section {
										& > .tag {
											color: var(--color-walrus---);
										}
									}
								}

								@media (max-width: 768px) {
									& > details {
										background-color: var(--color-plumlight);
									}
								}
							}

							& > footer {
								& > .product-generator {
									& > .loading-dock {
										& > .loading {
											color: inherit;
										}

										& > .select2 {
											color: inherit;
											border-color: currentColor;
										}
									}

									& > .error-dock {
										color: var(--color-white----);
										background-color: var(--color-grape----);
									}

									& > button {
										& > svg {
											color: var(--color-parchment);
										}
									}

									&.validate {
										& .invalid {
											&,
											& + .select2 {
												border-color: var(--color-proofread);
											}
										}
									}
								}
							}

							&::before {
								content: "";
								position: absolute;
								inset-block: calc(var(--block-extra-offset) * -1);
								inset-inline: 0;
								border-radius: 10px;
								background-color: var(--color-white----);
								pointer-events: none;
								z-index: var(--strata-atlas--back---);
							}
						}
					}

					@media (max-width: 768px) {
						& {
							margin-block: 0;

							& > .product {
								& > section {
									& > details {
										padding-block: 10px;
										padding-inline: 12px;
										border-radius: 5px;
										background-color: rgba(255, 255, 255, 0.2);

										&[open] {
											& > summary {
												& > svg {
													rotate: 0deg;
												}
											}

											& > section {
												padding-block-start: 15px;
											}
										}

										& > summary {
											display: flex;

											& > svg {
												rotate: -90deg;
											}
										}
									}
								}
							}
						}
					}
				}

				& > footer:not(.defer) {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 30px;
					padding-block: var(--size-30-40);
					padding-inline: var(--size-20-80);
					border-radius: 10px;
					background-color: var(--color-raisin---);

					& > section {
						& > h4 {
							font-weight: 400;
						}

						& > h5 {
							color: var(--color-parchment);
						}
					}
				}

				& > footer.defer {
					display: grid;
					place-items: center;
					text-align: center;
					row-gap: 10px;

					& .content {
						color: var(--color-parchment);
						max-width: 670px;
					}

					& .wwm-button {
						margin-block-start: var(--size-10-20);
					}
				}

				/* NOTE: This will be deleted when Module is ready */
				&[data-variant="addons"] {
					& > header {
						& > section {
							display: flex;
							align-items: center;
							gap: 15px;

							& .decoration {
								color: var(--color-parchment);

								&,
								& > svg {
									display: block;
								}
							}

							@media (max-width: 767px) {
								& {
									flex-direction: column;
									justify-content: center;
								}
							}
						}
					}

					& > .disclamers {
						order: 9;
					}

					& > .price-table {
						& > .product {
							& > section {
								& > header {
									& .price {
										order: 9;
										font: var(--type-base-h4-alt-fonts);
										letter-spacing: var(--type-base-h4-alt-space);
									}
								}
							}
						}
					}
				}

				@media (max-width: 980px) {
					& > .price-table {
						grid-template-columns: 1fr;
						row-gap: 30px;

						& > .product {
							border: 1px solid var(--color-white----) !important;
							border-radius: var(--border-radius);

							& > section {
								& > details {
									height: max-content;
								}
							}

							&.featured {
								& > section {
									& > header {
										& > mark.stamp {
											position: static;
											translate: unset;
											margin-block-end: 18px;
										}
									}
								}

								&::before {
									content: unset;
								}
							}
						}
					}

					& > footer {
						flex-wrap: wrap;
					}
				}
			}

			& ul {
				--icon-size: var(--size-20-25);

				display: grid;
				row-gap: var(--size-20-30);

				&,
				& > li {
					list-style: none;
					position: relative;
					outline: none;
					border: none;
					margin: 0;
					padding: 0;
				}

				& > li {
					padding-inline: calc(var(--icon-size) + var(--size-10-20)) 0;

					& > svg {
						position: absolute;
						inset-inline-start: 0;
						width: var(--icon-size);
						height: var(--icon-size);

						.background {
							color: var(--color-plumlight);
						}

						.foreground {
							color: var(--color-grape----);
						}
					}
				}
			}
		}

		& svg {
			width: unset;
			height: unset;
		}
	}
}