/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


:root {
  --background-color: #f4f4f4;
  --button-text-color: #fff;
  --button-color: #f40000;
  --body-width: min(calc(100vw - 2em), 1170px)
}

* { font-family: sans-serif; }

html, body { padding: 0; margin: 0; }

body {
	display:grid;
	grid-template-columns: [left-start] 1fr [left-end center-start] auto [center-end right-start] 1fr [right-end];
	grid-template-rows: [header-start] min-content [header-end slideshow-start] min-content [slideshow-end content-start] max-content [content-end footer-start] max-content [footer-end copyright-start] min-content [copyright-end];
	}


header {

	grid-column: center-start / center-end;
	grid-row: header-start / header-end;
	
	width: var(--body-width);
	
	display:grid;
	
	
	grid-template-columns: [inner-header-start] 1fr [left-header-end right-header-start] 1fr [inner-header-end];
	grid-template-rows: [account-start] min-content [account-end search-start] min-content [search-end products-start] min-content [products-end];

	nav#account {
		grid-row: account-start;
		grid-column: inner-header-start / inner-header-end;
	
		background: var(--background-color);
		
		
		padding: 0 100vw;
		margin: 0 -100vw;
		
		ul {
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-end;
			padding: 1em 0;
			margin: 0;
			li {
				display: block;
				padding: 0 1em 0 1em;
				border-right: 2px solid #000;
				&:last-child {
					border-right: none;
					}
					
					
				&#shipping {
					flex: 1 1 auto;
					border-right: none;
					}
				}
			
			}
			svg {
				display: inline;
				height: 20px;
				vertical-align: top;
				}

		}
		
	h1 {
	
	
		grid-row: search-start;
		grid-column: inner-header-start;
		}
		
	search {
		
		grid-row: search-start;
		grid-column: right-header-start;
		align-self: center;
		justify-self: end;
		
		form {
			display: flex;
			input[type=search] {
				background: var(--background-color);
				flex: 0 0 auto;
				border: 2px solid #000;
				border-right: 0;
				border-radius: 5px 0 0 5px;
				padding: 1em;
				width: 20em;
				}
			button {
				background: var(--button-color);
				color: var(--button-text-color);
				flex: 0 0 auto;
				border: 2px solid #000;
				border-radius: 0 5px 5px 0;
				padding: 1em;
				font-weight: bold;
				}
			}
			svg {
				display: inline;
				height: 20px;
				vertical-align: top;
				}

		}
		
	nav#products {
	
		grid-row: products-start;
		grid-column: inner-header-start / inner-header-end;
		
	
		ul {
			display: flex;
                        justify-content: space-between;
			text-align: center; 
                        gap: 2px solid #000;
                        margin: 0 0 1em 0;
                        padding: 0; 
			a { white-space: nowrap; }
			li {
				list-style-type: none;
				margin: 0;
				padding: 0;
				flex: 1 1 auto;
				border-right: 2px solid #000;
		                position: relative; 
				&:last-child {
					border-right: 0;
					}
				& > ul {
					display: none;
					}
				&:hover > ul {
					display: block;
					border: 2px solid #000;
					margin: 0;
                                        left: 50%;
                                        transform: translate(-50%, 0);
					padding: 0.5em 1em;
					position: absolute; 
					width: fit-content;
					background: #fff;
					box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.5);
                                        z-index: 10;
					li { 
						border: 0;
						}
					a {
						background: #fff;
						}
					}
				}
			}
	
		}
	}


article {
	grid-row: content-start;
	grid-column: center-start;
	
	width: var(--body-width);
	
	section {
		order: 2;
		}
	
	aside {
		order: 1;
		margin: 0 1em 0 0;
		ol {
			list-style-type: none;
			padding: 0;
			margin: 0;
			}
		h3, a {
			white-space: nowrap; 
			}
                img {
			max-width: 100%;
                        margin: 0 auto; 
                    }
		}
	}

footer {
	background: var(--background-color);
	grid-row: footer-start;
	grid-column: center-start;
	width: var(--body-width);
	padding: 0 100vw;
	margin: 1em -100vw;
	display: flex;
	justify-content: space-between;
	dl {
		flex: 0 1 auto;
		dt {
			margin-bottom: 1em;

			}
		dd {
			margin: 0;
			padding: 0;
			}
	
	
		}
	
	ul {
		list-style-type: none;
		}
	}

body {
	display:grid;
	grid-template-columns: [left-start] 1fr [left-end center-start] auto [center-end right-start] 1fr [right-end];
	grid-template-rows: [header-start] min-content [header-end slideshow-start] min-content [slideshow-end content-start] max-content [content-end footer-start] min-content [footer-end copyright-start] min-content [copyright-end];
	}

#slideshow{
	grid-row: slideshow-start;
	grid-column: center-start;
	width: var(--body-width);
	background: red;
}
		
		
#copyright {
	grid-row: copyright-start;
	grid-column: center-start;
	text-align: center;
	background: #fff;
	padding: 1em 100vw;
	margin: 0 -100vw;
	}


a {
	text-decoration: none;
	color: #000088;
	&:hover {
		text-decoration: underline;
		}
	}



.full { width: 100%; }
table {
	th {
		text-align: left;
		}
	tr.del { td:not(:has(a)) { text-decoration: line-through; }}
	}



.product_category_products {
	display: grid;
	gap: 1rem;
	& > div { padding: 1rem; border-radius: 5px; }

	dl { display: flex; flex-direction: column; }
        dt { text-align: center; clear: both; }
        dd { text-align: center; margin: 0; }
        img { margin: 10px 0; }
	}




@media (max-width: 479px) {
  .product_category_products {
    grid-template-columns: 1fr;
  

  & > div:nth-child(odd) {
    background-color: var(--background-color);
  }
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .product_category_products {
    grid-template-columns: repeat(2, 1fr);
  

  & > div:nth-child(4n + 1),
  & > div:nth-child(4n + 4) {
    background-color: var(--background-color);
  }
 }
}


@media (min-width: 768px) and (max-width: 1169px) {
  .product_category_products {
    grid-template-columns: repeat(3, 1fr);
  

  & > div:nth-child(6n + 1),
  & > div:nth-child(6n + 3),
  & > div:nth-child(6n + 5) {
    background-color: var(--background-color);
  }
  }
}


@media (min-width: 1170px) {
  .product_category_products {
    grid-template-columns: repeat(4, 1fr);
  

  & > div:nth-child(8n + 1),
  & > div:nth-child(8n + 3),
  & > div:nth-child(8n + 6),
  & > div:nth-child(8n + 8) {
    background-color: var(--background-color);
  }
  }
}




section {
  display: grid;
  grid-template-columns: [inner_left_start] 50% [inner_left_end inner_right_start] 50% [inner_left_end];
  grid-template-rows: [inner_start] 1fr [inner_end];
  aside {
    grid-column-start: inner_left_start;
    grid-column-end: inner_left_end;
    grid-row-start: inner_start;
    grid-row-end: inner_end;
    }
  div {
    grid-column-start: inner_right_start;
    grid-column-end: inner_right_end;
    grid-row-start: inner_start;
    grid-row-end: inner_end;
    } 
  }


.carousel {
  padding: 0; margin: 0;
overflow-x: hidden;  
img { width: 1168px; }

  ul { list-style-type: none; padding: 0; margin: 0; display: flex; gap: 8px;   overflow-x: visible; }
  li { padding: 0; margin: 0; flex-shrink: 0; }
  }


/* first and last are the same thing, offset by 10 persent */
@keyframes scrollAndReset {
  0%, 20% { transform: translateX(0); }
  26%, 53% { transform: translateX(-100%); } /* 1168px + 8px gap */
  57%, 87% { transform: translateX(calc(-200% - 8px)); }
  93%, 100% { transform: translateX(calc(-300% - 8px * 2)); }
}

.carousel ul {
  animation: scrollAndReset 15s ease-in-out infinite;
}


.pagination {
  display: flex;
  justify-content: center;
  margin: 0.5em; 
  a, em, span { margin: 0; padding: 0.5em; white-space: nowrap; border-right: 1px solid #ddd; &:last-child { border-right: 0; }}
  }


.category_name {
  text-align: center;
  }

.category_siblings, .category_children {
  display: flex;
  justify-content: center;
  margin: 0.5em;
  flex-wrap: wrap;
  dt, dd { margin: 0; padding: 0 0.5em; white-space: nowrap; border-right: 1px solid #888; }
  }

.order_table {
  display: grid; 
  gap { 10px; }
  & > div { margin: 5px; }
  grid-template-columns: repeat(11, auto);
  .h { font-weight: bold; }
  .order_po { grid-column: 1/3; }
  .order_sh { grid-column: 3/5; }
  .order_bi { grid-column: 5/7; }
  .order_su { grid-column: 7/8; }
  .order_pc { grid-column: 8/9; }
  .order_bu { grid-column: 11/12; }
  .order_header {
    display: grid;
    grid-column: 1/12;
    grid-template-columns: subgrid;
    padding: 10px; 
    }
  .order_item {
    display: grid;
    grid-column: 1/12;
    grid-template-columns: subgrid;
    padding: 10px; 
    }
  .e2{ background: #eee; border-radius: 10px; }
  .e1{ background: #fff; border-radius: 10px; }
  form { margin-top: 0em; }
  .order_product {
    display: grid;
    grid-column: 1/12;
    grid-template-columns: subgrid;
    }
  hr { grid-column: 2/11; width: 100%; }
  }


.order_product {
  display: grid; 
  gap { 10px; }
  & > div { margin: 5px; }
  grid-template-columns: repeat(11, auto);
 .order_product_item {
   display: grid;
   grid-column: 1/12;
   grid-template-columns: subgrid;
   .order_product_im { grid-column: 2/3; }
   .order_product_pr { grid-column: 3/8; }
   .order_product_qu { grid-column: 8/9; }
   .order_product_sh { grid-column: 9/10; }
   .order_product_bo { grid-column: 10/11; }
   .order_product_bu { grid-column: 11/12; }
   }
  hr { grid-column: 2/11; width: 100%; }
  }


.login_links {
  list-style-type: none; 
  margin: 0;
  padding: 5px 0 0 0;
  li { padding: 5px 0 0 0; margin: 0; }
  }