.ecommerce__container {
	--areoi-ecommerce-container-border-color: #ccc;
	max-width: 600px;
	margin: 50px auto;
	border: 1px solid var( --areoi-ecommerce-container-border-color );
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.ecommerce__container__row {
	border-bottom: 1px solid var( --areoi-ecommerce-container-border-color );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px;
}
.ecommerce__container__row__divider {
	width: 100%;
}

.ecommerce__container__row:last-of-type {
	border-bottom: none;
}
.ecommerce__container__column {
	padding: 10px;
}
.ecommerce__container__column--grow {
	flex-grow: 1;
}
.ecommerce__heading {
	font-size: 22px;
	font-weight: 600;
	display: block;
	color: var(--areoi-color-primary);
}
.ecommerce__heading--sub {
	font-size: 18px;
}
.ecommerce__alert {
	background-color: #fff3cd;
	color: #664d03;
	border: 1px solid #ffecb5;
	display: flex;
	align-items: center;
	padding: 20px;
	margin: 0 0 30px 0;
}
.ecommerce__alert .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
}
.ecommerce__alert .icon svg {
	fill: #664d03;
}
.ecommerce__alert--success {
	color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
.ecommerce__alert--success .icon svg {
	fill: #0f5132;
}

.ecommerce__alert--danger {
	color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}
.ecommerce__alert--danger .icon svg {
	fill: #842029;
}
.ecommerce__button {
	background-color: var(--areoi-color-primary);
	color: var(--areoi-color-primary-alt);
	border: 1px solid var(--areoi-color-primary);
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	text-decoration: none;
	transition: all 0.25s ease-in-out;
}
.ecommerce__button:hover {
	opacity: 0.8;
}
.ecommerce__button .icon {
	display: flex;
	align-items: center;
	margin: 0 0 0 15px;
}
.ecommerce__button .icon svg {
	fill: var(--areoi-color-primary-alt);
}
.ecommerce__button--secondary {
	background-color: var(--areoi-color-secondary);
	color: var(--areoi-color-secondary-alt);
	border: 1px solid var(--areoi-color-secondary);
}
.ecommerce__button--secondary .icon svg {
	fill: var(--areoi-color-secondary-alt);
}
.ecommerce__input,
.ecommerce__select {
	width: 100%;
	border: 1px solid var( --areoi-ecommerce-container-border-color );
	padding: 10px 15px;
}
.ecommerce__help {
	font-size: 0.8em;
	margin: 10px 0 0 0;
	color: #666;
}
.ecommerce__help a {
	color: var(--areoi-color-primary);
}
.ecommerce__container--nav {
	display: flex;
    flex-wrap: wrap;
}
.ecommerce__container--nav > * {
	flex-basis: 0;
    flex-grow: 1;
    text-align: center;
    text-decoration: none;
    padding: 15px;
    color: var(--areoi-color-primary);
    border-right: 1px solid var( --areoi-ecommerce-container-border-color );
    transition: all 0.25s ease-in-out;
}
.ecommerce__container--nav > .ecommerce__nav-link:last-of-type {
    border-right: none;
}
.ecommerce__container--nav > .ecommerce__nav-link:not(.ecommerce__nav-link--active):hover {
	background-color: #f2f2f2;
}
.ecommerce__container--nav > .ecommerce__nav-link--active {
	background-color: var(--areoi-color-primary);
	color: var(--areoi-color-primary-alt);
}
.ecommerce__player {
	position: relative;
}
.ecommerce__player__slide {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.ecommerce__player__slide__overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.ecommerce__player__controls {
	background-color: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 5;
	padding: 10px;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all 0.25s ease-in-out;
}
.ecommerce__player__slide:hover .ecommerce__player__controls {
	opacity: 1;
}
.ecommerce__player__controls button {
	background: none;
	border: none;
}
.ecommerce__player__controls button svg {
	width: 40px;
	height: 40px;
	display: block;
	fill: #fff;
}

.ecommerce__player__toggle {
	display: none;
}
.ecommerce__player__toggle--active {
	display: block;
}
a.ecommerce__player__toggle--active {
	display: flex;
}
.ecommerce__player video,
.ecommerce__player img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center;
}
.ecommerce__ratio {
	--bs-aspect-ratio: 56.25%;
	position: relative;
    width: 100%;
}
.ecommerce__ratio:after {
	display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
}

.ecommerce__license {
	display: flex;
	align-items: center;
	padding: 15px 0;
}
.ecommerce__license__number {
	width: 30px;
}
.ecommerce__license input {
	width: 100%;
	padding: 10px;
	border: 1px solid var( --areoi-ecommerce-container-border-color );
}
.ecommerce__license__action {
	display: flex;
	justify-content: flex-end;
}