/**
 * Andean Wines Shop Styles
 *
 * Complete styling for custom shop wrapper with Mercado Libre inspired design.
 * Includes layout, filters, product grid, and responsive behavior.
 *
 * Architecture:
 * - BEM methodology for class naming
 * - CSS custom properties for theming
 * - Mobile-first responsive design
 * - Progressive enhancement
 *
 * @package    Andean_Wines
 * @subpackage Styles
 * @since      1.0.0
 */

/* ===================================================================
   Table of Contents
   ===================================================================
   1. CSS Variables
   2. Layout Structure
   3. Filter Sidebar
   4. Filter Groups
   5. Individual Filters
   6. Active Filters Bar
   7. Product Grid
   8. Pagination with Result Count
   9. Loading States
   10. Responsive Design
   ================================================================ */

/* ===================================================================
   1. CSS Variables
   ================================================================ */

:root {
	/* Colors - Mercado Libre inspired */
	--andean-primary: #3483fa;
	--andean-primary-hover: #2968c8;
	--andean-primary-light: #e6f2ff;
	--andean-success: #00a650;
	--andean-warning: #ff9500;
	--andean-text: #333333;
	--andean-text-secondary: #666666;
	--andean-border: #ececec;
	--andean-bg-gray: #f5f5f5;
	--andean-white: #ffffff;

	/* Spacing */
	--andean-gap-xs: 8px;
	--andean-gap-sm: 12px;
	--andean-gap-md: 16px;
	--andean-gap-lg: 24px;
	--andean-gap-xl: 32px;

	/* Border radius */
	--andean-radius-sm: 4px;
	--andean-radius-md: 6px;
	--andean-radius-lg: 8px;

	/* Shadows */
	--andean-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--andean-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
	--andean-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

	/* Transitions */
	--andean-transition: all 0.3s ease;
	--andean-transition-fast: all 0.15s ease;
}

/* ===================================================================
   2. Layout Structure
   ================================================================ */

/**
 * Main shop wrapper with sidebar
 * Desktop: Flexbox with sidebar left, products right
 */
.andean-shop-wrapper {
	display: flex;
	gap: var(--andean-gap-lg);
	margin: 0;
	padding: 0;
}

/**
 * Filter sidebar container
 * Desktop: Sticky sidebar on left
 * Mobile: Fixed drawer
 */
.andean-filter-sidebar {
	flex: 0 0 280px;
	position: sticky;
	top: 100px; /* Adjust based on Astra header height */
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	overflow-x: hidden;
}

/**
 * Main product area
 * Flexible to fill remaining space
 */
.andean-shop-content {
	flex: 1;
	min-width: 0; /* Prevent overflow */
}

/**
 * Custom scrollbar for filter sidebar
 */
.andean-filter-sidebar::-webkit-scrollbar {
	width: 6px;
}

.andean-filter-sidebar::-webkit-scrollbar-track {
	background: var(--andean-bg-gray);
}

.andean-filter-sidebar::-webkit-scrollbar-thumb {
	background: var(--andean-border);
	border-radius: 3px;
}

.andean-filter-sidebar::-webkit-scrollbar-thumb:hover {
	background: var(--andean-text-secondary);
}

/* ===================================================================
   3. Filter Sidebar
   ================================================================ */

.andean-filters {
	background: var(--andean-white);
	border-radius: var(--andean-radius-lg);
	box-shadow: var(--andean-shadow-sm);
	padding: var(--andean-gap-md);
}

/**
 * Mobile toggle button (hidden on desktop)
 */
.andean-filters__mobile-toggle {
	display: none;
	align-items: center;
	gap: var(--andean-gap-sm);
	width: 100%;
	padding: var(--andean-gap-sm) var(--andean-gap-md);
	background: var(--andean-white);
	border: 1px solid var(--andean-border);
	border-radius: var(--andean-radius-md);
	font-size: 14px;
	font-weight: 500;
	color: var(--andean-text);
	cursor: pointer;
	transition: var(--andean-transition-fast);
}

.andean-filters__mobile-toggle:hover {
	background: var(--andean-bg-gray);
}

.andean-filters__mobile-toggle svg {
	flex-shrink: 0;
}

.andean-filters__count {
	margin-left: auto;
	padding: 2px 8px;
	background: var(--andean-primary);
	color: var(--andean-white);
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
}

/**
 * Filter form
 */
.andean-filters__form {
	display: flex;
	flex-direction: column;
	gap: var(--andean-gap-md);
	min-height: 100%;
}

/**
 * Filter header
 */
.andean-filters__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--andean-gap-md);
	border-bottom: 2px solid var(--andean-border);
}

.andean-filters__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--andean-text);
}

.andean-filters__clear-all {
	padding: var(--andean-gap-xs) var(--andean-gap-sm);
	background: none;
	border: 1px solid var(--andean-primary);
	border-radius: var(--andean-radius-sm);
	color: var(--andean-primary);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--andean-transition-fast);
}

.andean-filters__clear-all:hover {
	background: var(--andean-primary);
	color: var(--andean-white);
}

/**
 * Close button (mobile only)
 */
.andean-filters__close {
	display: none;
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--andean-text-secondary);
}

.andean-filters__close:hover {
	color: var(--andean-text);
}

/**
 * Filter groups container
 */
.andean-filters__groups {
	display: flex;
	flex-direction: column;
	gap: var(--andean-gap-md);
}

/**
 * Filter footer with Apply button
 * Sticky at bottom of sidebar for easy access
 */
.andean-filters__footer {
	position: sticky;
	bottom: 0;
	padding: var(--andean-gap-lg);
	border-top: 1px solid var(--andean-border);
	margin-top: auto;
	background-color: var(--andean-bg-primary);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
	z-index: 10;
}

.andean-filters__apply-btn {
	width: 100%;
	padding: var(--andean-gap-md);
	background: var(--andean-primary);
	border: none;
	border-radius: var(--andean-radius-md);
	color: var(--andean-white);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--andean-transition-fast);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.andean-filters__apply-btn:hover {
	background: var(--andean-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.andean-filters__apply-btn:active {
	transform: translateY(0);
}

/**
 * Backdrop (mobile only)
 */
.andean-filters__backdrop {
	display: none;
}

/* ===================================================================
   4. Filter Groups
   ================================================================ */

.andean-filter-group {
	padding: var(--andean-gap-md) 0;
	border-bottom: 1px solid var(--andean-border);
}

.andean-filter-group:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/**
 * Compact filter groups (toggles without accordion)
 */
.andean-filter-group--compact {
	padding: var(--andean-gap-sm) 0;
}

/**
 * Filter group title
 */
.andean-filter-group__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 var(--andean-gap-md);
	font-size: 14px;
	font-weight: 600;
	color: var(--andean-text);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/**
 * Accordion toggle button
 */
.andean-filter-group__toggle {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--andean-text-secondary);
	transition: var(--andean-transition-fast);
}

.andean-filter-group__toggle:hover {
	color: var(--andean-text);
}

.andean-filter-group__toggle[aria-expanded="false"] .andean-filter-group__icon {
	transform: rotate(-90deg);
}

.andean-filter-group__icon {
	transition: transform 0.3s ease;
}

/**
 * Filter group content (collapsible)
 */
.andean-filter-group__content {
	display: block;
	pointer-events: auto !important;
}

.andean-filter-group__toggle[aria-expanded="false"] + .andean-filter-group__content {
	display: none;
}

/* Ensure all filter content is interactive */
.andean-filter-price,
.andean-filter-year {
	pointer-events: auto !important;
	position: relative;
	z-index: 1;
}

/* ===================================================================
   5. Individual Filters
   ================================================================ */

/**
 * Generic filter option (checkbox/radio)
 */
.andean-filter-option {
	display: flex;
	align-items: center;
	gap: var(--andean-gap-sm);
	padding: var(--andean-gap-sm) 0;
	cursor: pointer;
	transition: var(--andean-transition-fast);
}

.andean-filter-option:hover {
	background: var(--andean-bg-gray);
	margin: 0 calc(var(--andean-gap-sm) * -1);
	padding: var(--andean-gap-sm);
	border-radius: var(--andean-radius-sm);
}

.andean-filter-option input[type="checkbox"],
.andean-filter-option input[type="radio"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
}

.andean-filter-option__label {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--andean-gap-xs);
	font-size: 14px;
	color: var(--andean-text);
}

.andean-filter-option__count {
	margin-left: auto;
	font-size: 13px;
	color: var(--andean-text-secondary);
}

/**
 * Pill-style filter option (wine type)
 */
.andean-filter-option--pill {
	display: inline-flex;
	align-items: center;
	gap: var(--andean-gap-sm);
	padding: var(--andean-gap-xs) var(--andean-gap-md);
	margin: 0 var(--andean-gap-xs) var(--andean-gap-xs) 0;
	background: var(--andean-bg-gray);
	border: 1px solid var(--andean-border);
	border-radius: 20px;
	transition: var(--andean-transition-fast);
}

.andean-filter-option--pill:hover {
	background: var(--andean-primary-light);
	border-color: var(--andean-primary);
}

.andean-filter-option--pill input:checked + .andean-filter-option__label {
	font-weight: 600;
}

.andean-filter-option--pill input {
	display: none;
}

.andean-filter-option--pill:has(input:checked) {
	background: var(--andean-primary);
	border-color: var(--andean-primary);
	color: var(--andean-white);
}

.andean-filter-option--pill:has(input:checked) .andean-filter-option__label {
	color: var(--andean-white);
}

/**
 * Toggle-style filter option (stock, sale)
 */
.andean-filter-option--toggle {
	padding: var(--andean-gap-md);
	background: var(--andean-bg-gray);
	border-radius: var(--andean-radius-md);
}

.andean-filter-option--toggle:has(input:checked) {
	background: var(--andean-primary-light);
	border: 1px solid var(--andean-primary);
}

/**
 * Grape color indicator
 */
.andean-filter-option__color {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--andean-border);
}

/**
 * Show more button
 */
.andean-filter-show-more {
	display: flex;
	align-items: center;
	gap: var(--andean-gap-xs);
	width: 100%;
	padding: var(--andean-gap-sm);
	margin-top: var(--andean-gap-sm);
	background: none;
	border: 1px solid var(--andean-border);
	border-radius: var(--andean-radius-sm);
	color: var(--andean-primary);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--andean-transition-fast);
}

.andean-filter-show-more:hover {
	background: var(--andean-primary-light);
}

.andean-filter-show-more__icon {
	margin-left: auto;
	transition: transform 0.3s ease;
}

.andean-filter-show-more.is-expanded .andean-filter-show-more__icon {
	transform: rotate(45deg);
}

/**
 * Hidden filter options
 */
.andean-filter-option--hidden {
	display: none;
}

/* --- Region Filter --- */

.andean-filter-region__item {
	position: relative;
}

.andean-filter-region__item--child {
	padding-left: var(--andean-gap-md);
}

.andean-filter-region__item--third .andean-filter-option {
	padding-left: var(--andean-gap-md);
	font-size: 13px;
}

.andean-filter-region__expand {
	background: none;
	border: none;
	padding: 4px;
	margin-left: auto;
	cursor: pointer;
	color: var(--andean-text-secondary);
	transition: var(--andean-transition-fast);
}

.andean-filter-region__expand:hover {
	color: var(--andean-text);
}

.andean-filter-region__expand[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.andean-filter-region__expand svg {
	transition: transform 0.3s ease;
}

.andean-filter-region__children {
	margin-top: var(--andean-gap-xs);
}

/* --- Winery Filter --- */

.andean-filter-search {
	position: relative;
	margin-bottom: var(--andean-gap-md);
}

.andean-filter-search__icon {
	position: absolute;
	left: var(--andean-gap-sm);
	top: 50%;
	transform: translateY(-50%);
	color: var(--andean-text-secondary);
	pointer-events: none;
}

.andean-filter-search__input {
	width: 100%;
	padding: var(--andean-gap-sm) var(--andean-gap-sm) var(--andean-gap-sm) 36px;
	border: 1px solid var(--andean-border);
	border-radius: var(--andean-radius-md);
	font-size: 14px;
	transition: var(--andean-transition-fast);
}

.andean-filter-search__input:focus {
	outline: none;
	border-color: var(--andean-primary);
	box-shadow: 0 0 0 3px var(--andean-primary-light);
}

.andean-filter-winery__list {
	max-height: 300px;
	overflow-y: auto;
}

.andean-filter-option--winery {
	flex-direction: column;
	align-items: flex-start;
}

.andean-filter-option__winery-name {
	font-weight: 500;
}

.andean-filter-option__winery-region {
	font-size: 12px;
	color: var(--andean-text-secondary);
}

.andean-filter-winery__no-results {
	padding: var(--andean-gap-md);
	text-align: center;
	color: var(--andean-text-secondary);
	font-size: 14px;
}

/* --- Price & Year Sliders --- */

.andean-filter-price__display,
.andean-filter-year__display {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--andean-gap-sm);
	margin-bottom: var(--andean-gap-md);
	padding: var(--andean-gap-md);
	background: var(--andean-bg-gray);
	border-radius: var(--andean-radius-md);
	font-size: 16px;
	font-weight: 600;
	color: var(--andean-text);
}

.andean-filter-price__value,
.andean-filter-year__value {
	color: var(--andean-primary);
}

.andean-filter-price__separator,
.andean-filter-year__separator {
	color: var(--andean-text-secondary);
}

.andean-filter-price__slider-container,
.andean-filter-year__slider-container {
	margin-bottom: var(--andean-gap-md);
	padding: 0 var(--andean-gap-xs);
	position: relative;
	z-index: 1;
	pointer-events: auto !important;
}

.andean-filter-price__slider,
.andean-filter-year__slider {
	height: 6px !important;
	background: var(--andean-border) !important;
	border-radius: 3px !important;
	position: relative !important;
	border: none !important;
	margin: 20px 0 !important;
}

/* jQuery UI Slider overrides */
.andean-filter-price__slider.ui-slider,
.andean-filter-year__slider.ui-slider {
	background: var(--andean-border) !important;
}

.andean-filter-price__slider .ui-slider-range,
.andean-filter-year__slider .ui-slider-range {
	background: var(--andean-primary) !important;
	border-radius: 3px !important;
	position: absolute !important;
	height: 100% !important;
}

.andean-filter-price__slider .ui-slider-handle,
.andean-filter-year__slider .ui-slider-handle {
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: var(--andean-white) !important;
	border: 3px solid var(--andean-primary) !important;
	cursor: pointer !important;
	cursor: grab !important;
	outline: none !important;
	position: absolute !important;
	top: 50% !important;
	margin-top: -10px !important;
	margin-left: -10px !important;
	transition: all 0.2s ease !important;
	z-index: 2 !important;
	touch-action: none !important;
}

.andean-filter-price__slider .ui-slider-handle:hover,
.andean-filter-year__slider .ui-slider-handle:hover {
	transform: scale(1.2) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.andean-filter-price__slider .ui-slider-handle:focus,
.andean-filter-year__slider .ui-slider-handle:focus {
	border-color: var(--andean-primary-hover) !important;
	box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1) !important;
}

.andean-filter-price__slider .ui-slider-handle:active,
.andean-filter-year__slider .ui-slider-handle:active {
	transform: scale(1.1) !important;
	cursor: grabbing !important;
}

.andean-filter-price__labels,
.andean-filter-year__labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--andean-text-secondary);
	margin-top: var(--andean-gap-sm);
}

.andean-filter-year__info {
	margin: var(--andean-gap-md) 0 0;
	padding-top: var(--andean-gap-md);
	border-top: 1px solid var(--andean-border);
	font-size: 12px;
	color: var(--andean-text-secondary);
	text-align: center;
}

/* ===================================================================
   6. Active Filters Bar
   ================================================================ */

.andean-active-filters {
	margin-bottom: var(--andean-gap-lg);
	padding: var(--andean-gap-md);
	background: var(--andean-primary-light);
	border: 1px solid var(--andean-primary);
	border-radius: var(--andean-radius-md);
}

.andean-active-filters__container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--andean-gap-sm);
}

.andean-active-filters__label {
	font-size: 14px;
	font-weight: 500;
	color: var(--andean-text);
}

.andean-active-filters__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--andean-gap-xs);
	flex: 1;
}

.andean-active-filters__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--andean-gap-xs);
	padding: 6px 12px;
	background: var(--andean-white);
	border: 1px solid var(--andean-primary);
	border-radius: 20px;
	font-size: 13px;
	color: var(--andean-text);
}

.andean-active-filters__badge-remove {
	display: flex;
	align-items: center;
	padding: 2px;
	background: none;
	border: none;
	color: var(--andean-primary);
	cursor: pointer;
	text-decoration: none;
	transition: var(--andean-transition-fast);
}

.andean-active-filters__badge-remove:hover {
	color: var(--andean-primary-hover);
}

.andean-active-filters__clear-all {
	padding: 6px 12px;
	background: var(--andean-primary);
	border: none;
	border-radius: 20px;
	color: var(--andean-white);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: var(--andean-transition-fast);
}

.andean-active-filters__clear-all:hover {
	background: var(--andean-primary-hover);
}

/* ===================================================================
   7. Product Grid
   ================================================================ */

#andean-products-container {
	min-height: 400px;
	position: relative;
}

/* Hide WooCommerce ordering dropdown */
.woocommerce-ordering {
	display: none !important;
}

/* ===================================================================
   8. Pagination with Result Count
   ================================================================ */

.andean-pagination-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--andean-gap-lg);
	margin-top: var(--andean-gap-xl);
	padding: var(--andean-gap-lg);
	background-color: var(--andean-bg-primary);
	border: 1px solid var(--andean-border);
	border-radius: var(--andean-radius-md);
}

.andean-pagination-info {
	flex-shrink: 0;
}

.andean-pagination-info .woocommerce-result-count {
	margin: 0;
	font-size: 14px;
	color: var(--andean-text-secondary);
}

.andean-pagination-nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.andean-pagination-nav .woocommerce-pagination {
	margin: 0;
}

.andean-pagination-nav .woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.andean-pagination-nav .page-numbers li {
	margin: 0;
}

.andean-pagination-nav .page-numbers a,
.andean-pagination-nav .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--andean-border);
	border-radius: var(--andean-radius-sm);
	background-color: var(--andean-bg-primary);
	color: var(--andean-text-primary);
	text-decoration: none;
	font-size: 14px;
	transition: all 0.2s ease;
}

.andean-pagination-nav .page-numbers a:hover {
	border-color: var(--andean-primary);
	background-color: var(--andean-primary-light);
	color: var(--andean-primary);
}

.andean-pagination-nav .page-numbers .current {
	border-color: var(--andean-primary);
	background-color: var(--andean-primary);
	color: #fff;
	font-weight: 600;
}

.andean-pagination-nav .page-numbers .dots {
	border: none;
	background: transparent;
	cursor: default;
}

/* Responsive pagination */
@media (max-width: 767px) {
	.andean-pagination-wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: var(--andean-gap-md);
		text-align: center;
	}

	.andean-pagination-nav {
		justify-content: center;
	}

	.andean-pagination-nav .page-numbers a,
	.andean-pagination-nav .page-numbers span {
		min-width: 36px;
		height: 36px;
		padding: 6px 10px;
		font-size: 13px;
	}
}

/* ===================================================================
   9. Loading States
   ================================================================ */

.andean-loading {
	opacity: 0.5;
	pointer-events: none;
	position: relative;
}

.andean-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border: 4px solid var(--andean-border);
	border-top-color: var(--andean-primary);
	border-radius: 50%;
	animation: andean-spin 0.8s linear infinite;
}

@keyframes andean-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* ===================================================================
   10. Responsive Design
   ================================================================ */

/**
 * Tablet (768px - 1024px)
 */
@media (max-width: 1024px) {
	.andean-shop-wrapper {
		flex-direction: column;
	}

	.andean-filter-sidebar {
		position: static;
		max-height: none;
		flex: 1;
	}
}

/**
 * Mobile (< 768px)
 */
@media (max-width: 767px) {
	/* Show mobile toggle button */
	.andean-filters__mobile-toggle {
		display: flex;
	}

	/* Convert sidebar to fixed drawer */
	.andean-filter-sidebar {
		position: fixed;
		top: 0;
		left: -100%;
		width: 85%;
		max-width: 320px;
		height: 100vh;
		z-index: 9999;
		background: var(--andean-white);
		box-shadow: var(--andean-shadow-lg);
		transition: left 0.3s ease;
		overflow-y: auto;
	}

	.andean-filter-sidebar.is-open {
		left: 0;
	}

	/* Show close button in mobile */
	.andean-filters__close {
		display: block;
	}

	/* Show backdrop */
	.andean-filters__backdrop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9998;
		opacity: 0;
		visibility: hidden;
		transition: var(--andean-transition);
	}

	.andean-filters__backdrop.is-visible {
		opacity: 1;
		visibility: visible;
	}

	/* Sticky active filters on mobile */
	.andean-active-filters {
		position: sticky;
		top: 0;
		z-index: 100;
		margin: 0 0 var(--andean-gap-md);
	}

	/* Reduce spacing */
	:root {
		--andean-gap-md: 12px;
		--andean-gap-lg: 16px;
		--andean-gap-xl: 24px;
	}
}

/**
 * Very small screens (< 480px)
 */
@media (max-width: 480px) {
	.andean-filter-sidebar {
		width: 90%;
		max-width: none;
	}

	.andean-active-filters__container {
		flex-direction: column;
		align-items: flex-start;
	}

	.andean-active-filters__clear-all {
		align-self: flex-end;
	}
}