.portal-main{
  width:min(1100px,94vw);
  margin:40px auto 80px
}

.portal-card{
  max-width:520px;
  margin:60px auto;
  background:#fffaf2;
  border:1px solid var(--line);
  padding:30px;
  box-shadow:var(--shadow)
}

.portal-card h1,
.portal-welcome h1,
.portal-panel h2{
  font-family:"Cormorant Garamond",serif
}

.portal-form{
  display:grid;
  gap:16px
}

.portal-form label{
  display:grid;
  gap:7px;
  font-size:.78rem;
  font-weight:600
}

.portal-form input,
.portal-form select,
.portal-form textarea,
.ship-form input{
  width:100%;
  box-sizing:border-box;
  padding:11px 12px;
  border:1px solid #ccbfae;
  background:#fff;
  color:inherit;
  font:inherit;
  border-radius:2px
}

.portal-form textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.5
}

.portal-form select{
  cursor:pointer
}

.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus,
.ship-form input:focus,
.inventory-controls input:focus{
  outline:2px solid rgba(83,107,61,.2);
  outline-offset:1px;
  border-color:var(--olive2)
}

.portal-form input[type="file"]{
  padding:10px;
  background:#f8f3ea;
  cursor:pointer
}

.portal-form input[type="file"]::file-selector-button{
  border:1px solid #b9aa96;
  background:#fffaf2;
  padding:8px 12px;
  margin-right:10px;
  cursor:pointer;
  font-weight:600
}

.portal-form small{
  color:var(--muted);
  font-size:.72rem;
  font-weight:400;
  line-height:1.4
}

.form-message{
  margin:4px 0 0;
  min-height:1.1em;
  font-size:.8rem;
  font-weight:600;
  color:var(--olive2)
}

.form-message.error{
  color:#9a332d
}

.portal-welcome{
  background:#fffaf2;
  border:1px solid var(--line);
  padding:22px
}

.portal-welcome h1{
  font-size:2.7rem;
  margin:4px 0
}

.portal-tabs{
  display:flex;
  gap:8px;
  margin:18px 0;
  border-bottom:1px solid var(--line)
}

.portal-tabs button{
  border:0;
  background:transparent;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer
}

.portal-tabs button.active{
  background:var(--olive2);
  color:#fff
}

.portal-panel{
  display:none
}

.portal-panel.active{
  display:block
}

.portal-panel > h2{
  margin-bottom:6px
}

.portal-panel > p{
  color:var(--muted);
  line-height:1.6
}

.portal-item{
  background:#fffaf2;
  border:1px solid var(--line);
  padding:18px;
  margin:14px 0
}

.portal-item h3{
  font:600 1.4rem "Cormorant Garamond",serif;
  margin:0 0 5px
}

.portal-meta{
  color:var(--muted);
  font-size:.8rem;
  line-height:1.5
}

/* New artisan product submission card */
#products .portal-item:first-of-type{
  padding:22px
}

#productForm{
  margin-top:18px
}

#productForm .btn{
  margin-top:4px;
  justify-self:start
}

#productCollection{
  min-height:42px
}

#productImage{
  min-height:46px
}

.ship-form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
  margin-top:12px
}

.inventory-line{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center
}

.inventory-controls{
  display:flex;
  gap:6px;
  align-items:center
}

.inventory-controls label{
  display:flex;
  gap:6px;
  align-items:center;
  font-size:.8rem;
  font-weight:600
}

.inventory-controls input{
  width:85px;
  padding:8px;
  border:1px solid #ccbfae;
  background:#fff
}

.earning-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px
}

.earning-grid div{
  background:#f4ede1;
  padding:10px
}

.earning-grid strong{
  display:block;
  font-size:.72rem;
  text-transform:uppercase
}

.hidden{
  display:none!important
}

@media(max-width:700px){

  .portal-main{
    width:min(94vw,1100px);
    margin-top:24px
  }

  .portal-card{
    margin:30px auto;
    padding:22px
  }

  .portal-welcome h1{
    font-size:2.2rem
  }

  .portal-tabs{
    overflow:auto;
    white-space:nowrap
  }

  .portal-tabs button{
    flex:0 0 auto
  }

  .ship-form{
    grid-template-columns:1fr
  }

  .earning-grid{
    grid-template-columns:1fr 1fr
  }

  .inventory-line{
    align-items:flex-start;
    flex-direction:column
  }

  .inventory-controls{
    width:100%;
    justify-content:space-between
  }

  #productForm .btn{
    width:100%
  }
}

@media(max-width:460px){

  .earning-grid{
    grid-template-columns:1fr
  }

  .portal-item{
    padding:15px
  }

  #products .portal-item:first-of-type{
    padding:17px
  }
}