* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}

body {
	  --color-left: teal;
    --color-right: beige;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background: linear-gradient( 135deg, var(--color-left) 0%, var(--color-right) 100% );
		min-height: 100vh;
		padding: 20px;
}

.container {
		max-width: 1024px;
		margin: 0 auto;
}

header {
		text-align: center;
		color: white;
		margin-bottom: 40px;
}

header h1 {
		font-size: 3em;
		margin-bottom: 10px;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

header h1.title {
    display: flex;
    align-items: center;
    gap: 3rem;
    font-size: 1.8em;
}

header h1.title > a.link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

header h1.title img 
{
	  --color-border-green: #25d366;
    --color-border-black: #333333;
    --color-border-trans: transparent;
		
    vertical-align: middle;
    border-radius: 50%;
    height: 64px;
    border: 3px solid var( --color-border-trans );
}

header p {
		font-size: 1.2em;
		opacity: 0.95;
		font-style: italic;
}

.products-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 30px;
		margin-bottom: 40px;
}

.product-card 
{
	  position: relative;
		z-index: 1;
		--color-background: white; 
		background: var(--color-background);
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		cursor: pointer;
		
		 
}
  

.product-card:hover {
		transform: translateY(-10px);
		box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}



.card-header 
{
	  position: relative;
		z-index: 1;

		padding: 30px 20px;
		text-align: center;
		position: relative;
		overflow: hidden;
		 
}
 
.card-header::before {
  content: "";
  position: absolute;
  inset: 0;
		background-image: none;
		background-size: cover;
		background-repeat: no-repeat;
		filter: grayscale( 67% );
  opacity: 1;  
  z-index: -1;
}

.product-card:hover .card-header::before
{
		filter: grayscale( 0% );
}
 
.tier-1::before { background-image: var( --bg-url ); }
.tier-2::before { background-image: var( --bg-url ); }
.tier-3::before { background-image: var( --bg-url ); }
.tier-4::before { background-image: var( --bg-url ); }
.tier-5::before { background-image: var( --bg-url ); }
.tier-6::before { background-image: var( --bg-url ); }


.card-header .package-name 
{
		--size: 1.8em; 
		font-size: var(--size); 
		font-weight: bold;
 
		--color: gold; 
		color: var(--color); 
		 
		--color-text-shadow: black;
		text-shadow: 1px 1px 0 var(--color-text-shadow); 
		margin-bottom: 10px;
}

.card-header .tree-count 
{
		--size: 3em;
		--xsize: 1.8em;
		font-size: var(--size); 
		font-weight: bold;
		--color: #2d5016;
		--color: #eee;
		color: var(--color); 
		--color-text-shadow: white;
		--color-text-shadow: black;
		text-shadow: 1px 1px 0 var(--color-text-shadow); 
		margin: 15px 0;
}

.card-header .tree-icon 
{
		font-size: 4em;
		margin-bottom: 10px;
		--xdisplay: none;
		visibility: hidden;  
}

.card-body {
		padding: 25px;
}

.price {
		font-size: 2.5em;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
		
		--color-text:  #667eea;
		--xcolor-text:  gold;
		color: var( --color-text );
		 
		text-shadow: 1px 1px 0 black;
}

.impact-list {
		list-style: none;
		margin-bottom: 20px;
}

.impact-list li {
		padding: 10px 0;
		
		--color-border:  #eee;
		--xcolor-border:  gold;
		border-bottom: 1px solid var( --color-border );
		display: flex;
		align-items: center;
		font-size: 0.95em;
		--color-text:  #555;
		--xcolor-text:  gold;
		color: var( --color-text );
}

.impact-list li:last-child {
		border-bottom: none;
}

.impact-list li::before {
		content: '✓';
		color: #4caf50;
		font-weight: bold;
		margin-right: 10px;
		font-size: 1.2em;
}

.add-to-cart-btn {
		width: 100%;
		padding: 15px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border: none;
		border-radius: 10px;
		font-size: 1.1em;
		font-weight: bold;
		cursor: pointer;
		transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
		transform: scale(1.05);
		box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.add-to-cart-btn:active {
		transform: scale(0.98);
}

.cart-float {
		position: fixed;
		bottom: 30px;
		right: 30px;
		background: white;
		padding: 20px 30px;
		border-radius: 50px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		display: flex;
		align-items: center;
		gap: 15px;
		cursor: pointer;
		transition: all 0.3s ease;
		z-index: 1000;
}

.cart-float:hover {
		transform: scale(1.05);
}

.cart-icon {
		font-size: 2em;
}

.cart-count {
		background: #ff4757;
		color: white;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
}

.cart-total {
		font-size: 1.3em;
		font-weight: bold;
		color: #667eea;
}

.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
		z-index: 2000;
		align-items: center;
		justify-content: center;
}

.modal.active {
		display: flex;
}

.modal-content {
		background: white;
		padding: 40px;
		border-radius: 20px;
		max-width: 600px;
		width: 90%;
		max-height: 80vh;
		overflow-y: auto;
}

.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30px;
}

.modal-header h2 {
		color: #333;
}

.close-btn {
		background: none;
		border: none;
		font-size: 2em;
		cursor: pointer;
		color: #999;
}

.cart-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #eee;
}

.cart-item-info {
		flex: 1;
}

.cart-item-name {
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
}

.cart-item-details {
		font-size: 0.9em;
		color: #666;
}

.cart-item-price {
		font-size: 1.2em;
		font-weight: bold;
		color: #667eea;
		margin-right: 20px;
}

.remove-btn {
		background: #ff4757;
		color: white;
		border: none;
		padding: 8px 15px;
		border-radius: 5px;
		cursor: pointer;
		transition: background 0.3s ease;
}

.remove-btn:hover {
		background: #ff3838;
}

.cart-summary {
		margin-top: 30px;
		padding-top: 20px;
		border-top: 2px solid #667eea;
}

.summary-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 1.1em;
}

.summary-row.total {
		font-size: 1.5em;
		font-weight: bold;
		color: #667eea;
		margin-top: 15px;
}

.checkout-btn {
		width: 100%;
		padding: 18px;
		background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
		color: white;
		border: none;
		border-radius: 10px;
		font-size: 1.2em;
		font-weight: bold;
		cursor: pointer;
		margin-top: 20px;
		transition: all 0.3s ease;
}

.checkout-btn:hover {
		transform: scale(1.02);
		box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.empty-cart {
		text-align: center;
		padding: 40px;
		color: #999;
}

.empty-cart-icon {
		font-size: 4em;
		margin-bottom: 20px;
}

@media (max-width: 768px) {
		header h1 {
				font-size: 2em;
		}

		.products-grid {
				grid-template-columns: 1fr;
		}

		.cart-float {
				bottom: 20px;
				right: 20px;
				padding: 15px 20px;
		}
}