*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
}

body > div:first-of-type {
  background-color: white;
  min-height: 100vh;
  min-height: 100dvh; 
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
}

body > div:first-of-type > header,
body > div:first-of-type > nav,
body > div:first-of-type > main,
body > div:first-of-type > footer{
  width: 100%;
  max-width: none;
}

body > main{ flex: 1 0 auto; }
body > footer{ margin-top: auto; }

main {
  flex:1 0 auto;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  display: grid;
  grid-template-columns: auto;
  row-gap:.75rem;
}

.active {
  color: green;
}

a {
  text-decoration: none;
  white-space: normal;
  color: black;
  font-size: clamp(0.8rem, 2vw, 1.5rem);
}

a:hover {
  text-shadow: 0.2vw 0.1vw 0.2vw;
  color: green;
}

a:active {
  text-shadow: 0.2vw 0.2vw 0.2vw;
}

header {
  position: relative;
  background-color: lightgrey;
  padding-top: 1.5rem;
  margin: 0;
  z-index: 1;
}

header .logout {
  position: absolute;
  top: .5rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: bold;
  text-decoration: none;
  color: black;
}

header .logout:hover,
header .logout:focus {
  color: green;
  text-shadow: 0.1vw 0.1vw 0.1vw;
}

header h1 {
text-align: center;
font-weight: bold;
font-style: italic;
margin: 0;
padding-block: 1.5rem;
margin-bottom: 0.5rem;
}

h1, h2, h3, h4, h5, h6 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

header ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  margin: 0;
  margin-bottom: 1rem;
}

header li {
  position: relative;
  text-align: center;
  color: black;
  font-weight: bold;
}

header ul a, nav ul a, .centeredIcons { white-space: nowrap; }

nav ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 0;
  margin: 0;
}

nav li {
  position: relative;
  text-align: center;
  margin-bottom: 0.25rem;
  font-weight: bold;
}

nav ul li a {
  font-size: clamp(0.8rem, 2vw, 1.5rem);
}

nav ul li p {
  font-size: clamp(0.8rem, 2vw, 1.5rem);
}

nav li ul {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  z-index: 1;
  width: auto;
}

nav li:hover ul {
  background-color: white;
  box-shadow: 0 2px 5px black;
  display: block;
  padding: 1%;
  text-align:justify;
}

nav li:hover ul li {
  padding: 0.25%;
}

.clear {
  text-shadow: none;
  color: black;
}

nav > ul > li > a.clear,
nav > ul > li > a.clear:hover,
nav > ul > li > a.clear:active,
nav > ul > li > a.clear:focus {
  color: black;
  text-shadow: none;
}

.centeredIcons {
  display: inline-block;
  text-align: center;
  width: auto;
}

.target {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.content {
  margin: 0;
  max-width: 70ch;
  padding: 0 1rem;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
}

.content h2 { 
  margin: 1rem 0 1rem !important; 
  line-height: 1;
}

.content p, .content ul {
  margin-left: 1vw;
  margin-right: 1vw;
}

.content li {
  margin-left: 3vw;
}

.icon {
  padding: 0;
  margin: 0;
  width: auto;
  height: clamp(3rem, 8.5vw, 8rem);
}

#products{ margin-top: 0; }

img { max-width: 100%; height: auto; display: block; }

.imageContainer {
  position: relative; 
  max-width: 700px; 
  margin: 0 auto;
}

.imageContainer img {
  border: 0.08vw black solid;
  border-radius: 0.25vw;
  object-fit: contain;
  width: 100%;
  height: auto;
  max-width: 100%;
  z-index: 0;
}

.bigImage {
  display: flex;
  justify-content: center;
  margin: 1rem auto 1rem;
}

.bigImage .imageContainer {
  max-width: 520px;  
  width: 100%;
}

.bigImage .imageContainer img {
  width: auto; 
  max-width: 100%;
  height: auto; 
}

span {
  white-space: nowrap;
  display: inline-block;
  color: black;
}

span a {
  text-decoration: none;
  font-size: clamp(0.65rem, 1.5vw, 1rem);
  font-style: normal;
  color: green;
}

span a:hover {
  color: black;
  text-shadow: 0.1vw 0.1vw 0.1vw;
}

#contactMain { 
  padding-bottom: 3rem; 
  max-width: 80%;
  width: 100%;
  margin: 2vw auto; 
}

.contact { 
  border: 0.08vw black solid;
  background-color: lightgray;
  border-radius: 0.25vw;
  box-sizing: border-box;
  overflow: hidden;
  margin: 1vw;
  max-width: 100%;
  max-height: 100%;
}

form.contact {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  max-height: 100%;
  margin: 2vw;
  box-sizing: border-box;
  overflow: auto;
}

.legal-page main.legal {
  display: block; 
  min-height: auto;
  max-width: 70ch;       
  margin: 2rem auto; 
  padding: 0 1rem;
}

.legal-page main.legal h1 {
  text-align: left;
  margin: 0 0 1rem;
}
.legal-page main.legal p {
  margin: 0 0 1rem;
  line-height: 1.6;
}

.legal-page header ul {
  margin-bottom: 1rem; 
}

form.contact fieldset {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-grow: 1;
  margin: 1vw;
  padding: 1vw;
  border: 0.08vw black solid;
  border-radius: 0.25vw;
  background-color: black;
  box-sizing: border-box;
}

form.contact legend {
  font-size: clamp(0.8rem, 1.8vw, 1.4rem);
  border: 0.08vw black solid;
  border-radius: 0.25vw;
  background-color: white;
  margin-bottom: 0.5vw;
}

form.contact input {
  width: calc(100% - 1vw);
  height: 4.5vw;
  max-width: 40vw;
  max-height: 4.5vw;
  box-sizing: border-box;
  overflow: hidden;
  border: 0.08vw black solid;
  border-radius: 0.25vw;
}

form.contact label, form.contact input, form.contact textarea {
  margin: 0;
  padding: 0;
  font-size: clamp(0.8rem, 1.8vw, 1.4rem);
  display: block;
}

form.contact input, form.contact textarea  {
  background-color: white;
  color: black;
}

form.contact button, form.contact ::placeholder {
  margin: 0.5vw;
  padding: 0.5vw;
  font-size: clamp(0.8rem, 1.8vw, 1.4rem);
}

.formInput label {
  font-weight: bold;
  color: white;
}

.formInput {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-grow: 1;
  width: auto;
}

form.contact input:required:valid,
form.contact textarea:required:valid,
form.contact select:required:valid {
  background-color: green;
  color: black;
}

form.contact input[type="text"],
form.contact input[type="email"],
form.contact input[type="tel"],
form.contact input[type="password"],
form.contact input[type="number"] {
  width: calc(100% - 1vw);
  height: 4.5vw;
  max-width: 40vw;
  max-height: 4.5vw;
  box-sizing: border-box;
  overflow: hidden;
  border: 0.08vw black solid;
  border-radius: 0.25vw;
  color: black;
}

form.contact textarea {
  color: black;
  background-color: white;
}

form.contact select {
  width: calc(100% - 1vw);
  height: 4.5vw;  
  max-width: 40vw;
  max-height: 4.5vw;
  box-sizing: border-box;
  border: 0.08vw solid black;
  border-radius: 0.25vw;
  color: black;
}

form.contact input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  max-width: none;
  max-height: none;
  border: 0.08vw solid black;
}


.messageButton {
  display: grid;
  grid-template-columns: auto min-content;
  align-items: flex-end;
}

form.contact a {
  color: green;
  text-shadow: none;
}

form.contact a:hover,
form.contact a:focus {
  color: white;
  text-shadow: 0 0 0;  
}

#message {
  box-sizing: border-box;
  overflow: auto;
  border: 0.08vw black solid;
  border-radius: 0.25vw;
}

.button {
  width: auto;
  border: 0.08vw black solid;
  border-radius: 0.25vw;
  background-color: #FFF00F;
  box-sizing: border-box;
}

form.contact button:hover {
  background-color: green;
}

.formInput .button {
  width: auto;
  display: inline-block;
  align-self: flex-start;
  padding: .6rem 1rem;
}

form.contact [aria-invalid="true"] { outline: 2px solid goldenrod; }

.contact.compact {
  height: auto; 
  max-height: none;
  max-width: 560px;
  margin: 1.25rem auto;
}

.contact.compact fieldset {
  flex-grow: 0;
  height: auto;
  max-height: none;
  padding: 1rem;
  margin: 0;
}

.contact.compact .formInput {
  justify-content: flex-start;
  gap: .75rem;
}

.contact.compact .formInput {
  justify-content: flex-start;  
  gap: .75rem;  
}

.contact.compact input,
.contact.compact select,
.contact.compact textarea {
  width: 100%;
  max-width: 28rem; 
  height: clamp(2.4rem, 3.2vw, 3rem);
  max-height: none;
}

.contact.compact .button {
  height: clamp(2.4rem, 3vw, 3rem);
  padding: 0 1rem;
  width: auto;
  align-self: flex-start;
}

.authRow {
  display: grid;
  grid-template-columns: minmax(0, 750px) minmax(0, 380px);
  justify-content: center;
  align-items: start;
  gap:2rem;
  margin: 1.5rem auto;
  padding: 0 3vw; 
}

.authRow .contact {
  margin: 0; 
}

.authRow .contact input,
.authRow .contact select,
.authRow .contact textarea {
  max-width: 100%;
  width: 100%;
  height: clamp(2.4rem, 3.2vw, 3rem);
}

.authRow .contact.compact .button {
  height: clamp(2.4rem, 3vw, 3rem);
  padding: 0 1rem;
  width: auto;
  align-self: flex-start;
}

.authCard .formInput{ gap:.6rem; }

:root { --reg-input-max: 35rem; }

#registerForm .formInput > label,
#registerForm .formInput > input,
#registerForm .formInput > select,
#registerForm .formInput > textarea{
  display: block;
  width: min(100%, var(--reg-input-max));
  margin-left: auto;
  margin-right: auto;
}

#registerForm .formInput > label{ margin: .15rem auto .25rem; }
#registerForm input,
#registerForm select,
#registerForm textarea{
  height: clamp(2.4rem, 3vw, 3rem);
  margin-bottom: .85rem;
}

#registerForm .button{
  height: clamp(2.4rem, 3vw, 3rem);
  padding: 0 1.1rem;
  width: auto;
  margin: .25rem auto 0;
}

#loginForm,
#registerForm{
  height: auto !important;
  max-height: none !important;
}

#loginForm.contact,
#loginForm.contact.compact{
  height: auto;
  max-height: none;
}

.checkoutLayout {
  display: grid;
  grid-template-columns: 1fr min(28rem, 32%);
  gap: 2rem;
  align-items: start;
}

.cart {
  border: 0.08vw solid black;
  border-radius: 0.25vw;
  background: lightgray;
  padding: 1rem;
  position: sticky;
  top: 1rem;
}

.cart h2 {
  margin: 0 0 .75rem 0;
}

.cartItems {
  list-style: none;
  padding: 0;
  margin: 0 0 .75rem 0;
}

.cartItems li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .5rem;
  align-items: center;
  padding: .25rem 0;
  border-bottom: 1px dashed #00000033;
}

.cart .name { font-weight: 600; }
.cart .price { white-space: nowrap; }

.qtyControls {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.qtyBtn {
  border: 1px solid #000;
  background: #fff;
  padding: 0 .5rem;
  line-height: 1.6;
  cursor: pointer;
}

.cartTotals .line {
  display: flex;
  justify-content: space-between;
  margin: .25rem 0;
}

.cartTotals .total {
  margin-top: .5rem;
  border-top: 1px solid #00000033;
  padding-top: .5rem;
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.cartActions { margin-top: .75rem; }

div.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2vw;
  border: 0.2vw solid black;
  padding: 0.5vw;
  background-color: antiquewhite;
  opacity: 0.7;
  width: auto;
  max-width: 450px;
  height: auto;
}

div.gallery a {
  z-index: 3;
}

div.gallery:hover {
  border: 0.18vw solid black;
  opacity: 1;
}

div.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 428;
  object-fit: cover;
  margin-bottom: -1vw;
  border-bottom: 2px solid antiquewhite;
}

div.desc {
  padding: 0.5vw;
  padding-top: 1vw;
  text-align: center;
  background-color: antiquewhite;
  color: black;
  font-size: clamp(0.65rem, 1.8vw, 1.3rem);
  font-style: italic;
}

div.desc a {
  text-decoration: none;
  font-size: clamp(0.65rem, 1.8vw, 1.3rem);
  font-style: normal;
  color: green;
}

div.desc a:hover {
  color: black;
  text-shadow: 0.1vw 0.1vw 0.1vw;
}

.searchBar { 
  display: flex;
  justify-content: center;
  margin: .5rem auto .75rem;
}

.searchForm { 
  display: flex; 
  align-items: stretch;
  gap: .5rem;
  max-width: 42rem;  
  width: 100%;
  justify-content: center;
}

.searchForm input[type="search"] {
  flex: 1 0 24rem; 
  max-width: 32rem;
  padding: .6rem .8rem;
  border: 1px solid black;
  border-radius: .25rem;
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  background: white;
  color: black;
}

.searchForm .button {
  width: auto;
  padding: .6rem .9rem;
  border: 1px solid black; 
  border-radius: .25rem;
  font-size: clamp(0.9rem, 1.6vw, 1rem);
}

.searchMsg { 
  margin: 0;
  font-size: clamp(0.85rem, 1.4vw, 0.95rem); 
  text-align: center;
}

.searchBar form { margin: 0; } 
.searchMsg:empty { display: none; } 

.searchBar + .content { margin-top: 0; }

.pageRule{
  border:0;
  border-top:1px solid #000;
  max-width:1200px;
  margin: 0.75rem auto 1rem;
}

.productGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 1rem auto 2rem;
  padding: 0 1rem;
}

.productCard{
  border: 1px solid #000;
  border-radius: .5rem;
  background: #f8f8f8;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* image area */
.productMedia{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  border: 1px solid #000;
  border-radius: .25rem;
}
.productMedia img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity .25s ease;
}
.productMedia img.active{ opacity: 1; }

/* prev/next controls */
.productControls{
  display:flex; gap:.5rem; margin:.5rem 0 0;
}
.arrowBtn{
  border:1px solid #000; background:#fff;
  padding:.25rem .6rem; cursor:pointer;
}

.productBody{ text-align:center; margin-top:.5rem; }
.productBody h3{ margin:.25rem 0; }
.productPrice{ font-weight:700; margin-top:.25rem; }

.productCard .button{ margin:.6rem auto 0; }
.productCard.search-hit{ outline:3px solid gold; outline-offset:2px; }

.auctionsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 2rem;
  align-items:start;
}

.auctionColumn{ display:flex; flex-direction:column; gap:1rem; }

.auctionCard {
  border: 1px solid #000;
  border-radius: .5rem;
  background: #f7f7f7;
  padding: 1rem;
}

.auctionHeader h3{ margin:.2rem 0 .25rem; }
.auctionHeader p{ margin:.15rem 0; }

.lotsGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin-top:.5rem;
}

.lotCard {
  border: 1px solid #000;
  border-radius: .5rem;
  background: #fff;
  padding: .75rem;
}

.lotMedia{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: .25rem;
  background:#fff;
}

.lotMedia img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity .25s ease;
}

.lotMedia img.active{ opacity: 1; }
.lotControls{ display:flex; gap:.5rem; margin:.45rem 0 0; }
.lotBody h4{ margin:.35rem 0 .25rem; }
.lotBody p{ margin:.15rem 0; }

.imageContainer { position: relative; } 

.heroSlide{
  position: absolute; 
  inset:0;
  width: 100%; 
  height: auto;
  opacity: 0; 
  transition: opacity .35s ease;
}

.heroSlide.active{
  position: relative; 
  opacity: 1;
}

footer {
  width: 100%;
  background-color: lightgrey;
  z-index: 1;
}

footer ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: auto auto;
  padding: 0;
  margin: 0;
  justify-content: center;
  gap: 3rem;
}

footer li {
  position: relative;
  text-align: center;
  font-weight: bold;
}

footer p {
  padding-bottom: 0.5%;
  text-align: center;
  font-size: clamp(0.65rem, 2vw, 1.5rem);
  font-style: italic;
  color: black;
  margin-top: 1.5vw;
}

@media (max-width: 520px){
  .searchForm { flex-wrap: wrap; }
  .searchForm input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .searchForm .button { flex: 0 0 auto; }
}

@media screen and (min-width: 250px) and (max-width: 580px) {

  div.gallery {
    width: auto;
    height: 80%;
    max-height: 190px;
    padding: 0.5vw;
  }

  div.gallery img {
    width: 100%;
    height: 60%;
    max-height: 170px;
    object-fit: contain;
  }

  div.desc {
    width: 100%;
    height: 100%;
    padding: 0.5vw;
  }

  nav ul li a {
    font-size: clamp(1rem, 3.5vw, 3rem);
  }

  .content {
    font-size: clamp(1.3rem, 2.5vw, 2rem);
  }

  .content li {
    margin-left: 6vw;
  }

  form.contact label, form.contact input, form.contact textarea {
    font-size: clamp(1rem, 2.5vw, 2rem);
  }
  
  form.contact input, form.contact textarea  {
    font-size: clamp(1rem, 2.5vw, 2rem);
  }

  .formInput label {
    gap: 2vw;
    padding-bottom: 2vw;
  }
  
  .formInput {
    gap: 2vw;
    padding-bottom: 2vw;
  }
}

@media (max-width: 600px) {
  header .logout {
    position: static;
    float: right;
    margin: .5rem 1rem 0 0;
  }
  header h1 { padding-right: 0; }
  header ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  nav ul    { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .bigImage .imageContainer { max-width: 420px; }

  /* product grid & cards */
  .productGrid{
    grid-template-columns: 1fr;
    gap: .9rem;
    margin: .75rem auto 1.25rem;
    padding: 0 .5rem;
  }
  .productCard{ padding: .75rem; }
  .productMedia{
    aspect-ratio: 16 / 10; 
    max-width: 360px;
    margin: 0 auto;
  }
  .productBody h3{ font-size: clamp(1rem, 5vw, 1.2rem); }
  .productPrice{  font-size: clamp(0.95rem, 4.2vw, 1.1rem); }

  .searchForm { flex-wrap: wrap; max-width: 100%; padding: 0 .5rem; }
  .searchForm input[type="search"]{ flex: 1 1 100%; min-width: 0; }
  .searchForm .button{ flex: 0 0 auto; }
}

@media (max-width: 900px) {
  .checkoutLayout { grid-template-columns: 1fr; }
  .cart { position: static; }
  .auctionsGrid { grid-template-columns: 1fr; }
  .lotsGrid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px){
  .authRow{ grid-template-columns: 1fr; max-width: 750px; }
  #loginForm{ max-width: 380px; margin: 0 auto; }
}

@media screen and (min-width: 580px) and (max-width: 1560px) {

  div.gallery {
    width: 90%; 
    max-width: 425px;  
    padding: 0.5vw;
    margin-left: auto; 
    margin-right: auto;
  }

  div.gallery img {
    width: 100%;
    height: auto;
    max-height: 375px;
    object-fit: contain;
  }

  div.desc {
    width: 100%; 
    padding: 0.5vw;
  }
}