/* NAV
 * */
.itemlist nav {
   border-bottom: 3px solid #babaed;
   font-size: .85em;
   font-weight: 600;
}
.itemlist nav > div {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 1em 0;
}
.itemlist nav > div a {
   padding: .5em 0;
   text-decoration: none;
   border-bottom: 3px solid transparent;
}
.itemlist nav > div a.selected {
   border-bottom-color: #0000cd;
}
@media ( orientation: landscape ) {
   .itemlist nav > div {
      flex-direction: row;
      column-gap: 2em;
      padding: 0;
      position: relative;
      top: 3px;
   }
}



/* SORTER & FILTER
 * */
.itemlist .sorterfilter {
   display: flex;
   flex-direction: column;
   row-gap: 3em;
   align-items: center;
   padding: 4em 0;
   font-size: .4em;
}
.itemlist .sorterfilter > div {
   display: flex;
   flex-direction: column;
   row-gap: .75em;
}
/* The sorter
 * */
.itemlist .sorterfilter > div:first-child {
   align-items: center;
}
/* The filter
 * */
.itemlist .sorterfilter > div:last-child {
   column-gap: 1.5em;
   flex-direction: row;
}
.itemlist .sorterfilter > div:last-child label {
   display: flex;
   column-gap: .25em;
   align-items: center;
}
.itemlist .sorterfilter select {
   color: #0000cd;
   border-color: #0000cd;
   text-align: center;
/*
   border: 2px solid #0000cd;
   border-radius: 3em;
*/
}
@media ( orientation: landscape ) {
   .itemlist .sorterfilter {
      flex-direction: row;
      column-gap: 2.5em;
      justify-content: flex-end;
   }
   .itemlist .sorterfilter > div:first-child {
      flex-direction: row;
      column-gap: 1em;
   }
   .itemlist .sorterfilter select {
      text-align: left;
   }

}



/* THE LIST
 * */
.itemlist ol {
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   justify-content: center;
   row-gap: .5em;
}
.itemlist ol > li {
   border: 2px solid #0000cd;
   border-radius: 10px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   row-gap: .8em;
   padding: 1.25em 0 1em;
}
.itemlist ol > li.skeleton {
   display: none;
}
.itemlist ol > li.sponsored {
   background-color: #0000cd;
}
.itemlist ol > li.sponsored,
.itemlist ol > li.sponsored a {
   color: white;
}
.itemlist ol > li:hover,
.itemlist ol > li:active {
   opacity: .63;
}
@media ( min-width: 768px ) {
   .itemlist ol {
      flex-direction: row;
      flex-wrap: wrap;
      column-gap: .5em;
   }
   .itemlist ol >  li {
      flex: 0 0 calc(50% - 0.25em);
   }
}
@media ( min-width: 1024px ) {
   .itemlist ol >  li {
      flex: 0 0 calc(25% - 0.375em);
   }
}



.itemlist {
   color: #0000cd;
}


/* Title
 * */
.itemlist h4 {
   margin: 0;
   font-size: .85em;
   font-weight: 600;
   text-align: center;
   padding: 0 1em;
   line-height: 1.2em;
   height: 2.4em;
   text-transform: uppercase;
}


/* Image & Price
 * */
.itemlist .pic {

}
.itemlist .pic img {
   display: block;
   width: calc(100% - 2em);
   margin: 0 auto;
   height: auto;
   aspect-ratio: 1/1;
   object-fit: contain;
   border-radius: .75em;
}
.itemlist .pic img.placeholder {
   filter: contrast(0.75);
}
.itemlist .pic img.framed {
   border: 2px solid #0000cd;
   border-radius: 150px;
}
.itemlist .pic.withprice img {
   width: calc(100% - 3.5em);
}
.itemlist .pic.withprice .price {
   font-size: .85em;
   margin-top: .5em;
   font-weight: 600;
   text-align: center;
}



/* Still needed
 * */
.itemlist .stillneeded {
   font-size: .4em;
   display: flex;
   justify-content: space-evenly;
}



/* TRICKY BIT
 * */
.itemlist .backers {
   font-size: .4em;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   margin-top: auto;
}
.itemlist .backers ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   column-gap: 1em;
}

/* Tricky bit but sponsor image
 * */
.itemlist .sponsored .backers {
   font-size: unset;
}
.itemlist .sponsored .backers img {
   display: block;
   width: calc(100% - 2em);
   margin: 0 auto;
   aspect-ratio: 5 / 1.5;
   object-fit: contain;
}



/* PARTOF
 * */
.itemlist .partof {
   font-size: .4em;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   margin-top: auto;
}



/* LOAD MOAR
 * */
.itemlist .loadmore {
   font-size: .85em;
   font-weight: 600;
   text-align: center;
   padding: 2.5em 0;
}
.itemlist .loadmore span path {
   fill: #0000cd;
}
@media ( orientation: landscape ) {
   .itemlist .loadmore {
      text-align: right;
   }
}



/* DETAIL
 * */
.carddetail {
   font-size: 5vw;
   font-weight: 500;
}
@media( orientation: landscape ) {
   .carddetail {
      font-size: min(2.5vw, 22px);
   }
}

.carddetail {
   scrollbar-width: thin;
   color: #0000cd;
   max-width: 100%;
   max-height: 100%;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding: 18px 0;
   box-shadow: none;
   background: transparent;
}
.carddetail.loading .loading {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
.carddetail.loading path {
   fill: white;
}
.carddetail button.svg.close {
   position: fixed;
   top: 12px;
   right: 12px;
   border-radius: 2em;
}
@media ( orientation: landscape ) {
   .carddetail button.svg.close {
      position: absolute;
      top: 4px;
      right: 4px;
   }
}

/* PANEL
 * */
.carddetail .panel {
   background: white;
   padding: 2em;
   box-sizing: border-box;
   position: relative;
}
.carddetail .panel.giftgiven {
   background: #0000cd;
   color: white;
}
.carddetail .panel.giftgiven a {
   color: white;
}
.carddetail .panel > div > img {
   display: block;
   width: 100%;
   box-sizing: border-box;
   height: auto;
   aspect-ratio: 1 / 1;
   object-fit: contain;
   border: .1em solid #0000cd;
   border-radius: 1em;
}
.carddetail .panel.giftgiven > div > img {
   background: white;
}
.carddetail .panel img.placeholder {
   border: none;
   filter: contrast(0.75);
}
.carddetail .panel > div > img.padded {
   box-sizing: border-box;
   padding: 3em;
}

.carddetail .panel > div {
   display: flex;
   flex-direction: column;
   row-gap: 1em;
}
@media ( min-width: 1024px ) {
   .carddetail .panel > div {
      flex-direction: row;
      align-items: center;
      column-gap: 2em;
   }
   .carddetail .panel > div > img {
      flex: 0 0 45%;
      min-width: 0;
   }
}


/* DETAIL PANEL
 * */
.carddetail .details {
   display: flex;
   flex-direction: column;
   row-gap: .95em;
   align-items: flex-start;
   line-height: 1.3;
   align-items: center;
   text-align: center;
}
@media ( orientation: landscape ) {
   .carddetail .details {
      align-items: flex-start;
      text-align: left;
   }
}


/* Top label
 * */
.carddetail h3 {
   margin: 0;
   padding: 0 0 3.5em;
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: .65em;
   text-align: center;
}
.carddetail h3 strong {
   font-weight: 700;
   font-size: 1.55em;
}

/* NAME
 * */
.carddetail h4 {
   margin: 0;
   font-size: 1em;
   font-weight: 600;
   text-transform: uppercase;
}

/* PRICE
 * */
.carddetail .price {
   font-size: 2em;
   font-weight: 600;
}

/* THANK YOU
 * */
.carddetail .thankyou strong {
   display: block;
   font-weight: 500;
}
.carddetail .thankyou p {
   margin: 0;
   padding: 0;
}
/*
.carddetail .thankyou ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   column-gap: .45em;
}
.carddetail.thankyou ul li {
   white-space: nowrap;
}
.carddetail .giftgiven .thankyou ul {
   margin-top: 1em;
}
*/
.carddetail .giftgiven .thankyou p {
   margin-top: 1em;
}

/* SPONSORED
 * */
.carddetail .sponsored img {
   display: block;
   margin-top: 1em;
   max-width: 100%;
   aspect-ratio: 5 / 1.5;
   object-fit: contain;
}

/* Room & Collections
 * */
.roomcoll {
   text-transform: uppercase;
}

/* ANY AMOUNT text & form
 * */
.carddetail .aaform {
   display: flex;
   flex-direction: column;
   row-gap: 1em;
}
.carddetail .aaform .fieldwithsymbol {
   font-size: 1.5em;
}
.carddetail .aaform input {
   border: .1em solid #0000cd;
   text-align: center;
   color: #0000cd;
}
@media ( orientation: landscape ) {
   .carddetail .aaform input {
      text-align: left;
   }
}
.carddetail .aaform path {
   fill: #0000cd;
}

/* BENEFITS
 * */
.carddetail .benefits {
   text-transform: uppercase;
}
.carddetail .benefits strong {
   font-weight: 600;
   display: block;
}
.carddetail .benefits > div p {
   margin: 0;
}
.carddetail .benefits > div ul {
   margin-top: 0;
   margin-bottom: 0;
}

/* Main button
 * */
.carddetail button.action {
   border-radius: 3em;
   padding: .5em 1em;
   line-height: 1;
   margin-top: 1em;
}
.carddetail span.action {
   border-radius: 3em;
   border: .1em solid #0000cd;
   padding: .5em 1em;
   line-height: 1;
   margin-top: 1em;
   background: white;
   color: #0000cd;
   transition: 300ms;
}
.carddetail a.action {
   text-decoration: none;
   border: .1em solid white;
   padding: .5em 1em;
   line-height: 1;
   margin-top: 1em;
   transition: 300ms;
   border-radius: 3em;
}
.carddetail a.action:hover {
   background: white;
   color: #0000cd;
}

/* Sponsor



/* Pre-Checkout / Leader Selection
 * */
dialog.precheckout {
   font-size: 5vw;
   font-weight: 300;
   text-align: center;
   background-color: #0000cd;
   color: white;
   top: -2em;
   opacity: 0;
   transition: 300ms;
}
@media( orientation: landscape ) {
   dialog.precheckout {
      font-size: min(2.5vw, 22px);
   }
}
@media( min-width: 584px ) {
   dialog.precheckout {
      width: 512px;
   }
}
dialog.precheckout.shown {
   top: 0;
   opacity: 1;
}
dialog.precheckout p {
   margin: 0;
   font-size: .85em;
}
dialog.precheckout select {
   border-color: white;
   border-radius: 5em;
   margin-top: 1em;
   background: #0000cd;
   color: white;
   text-align: center;
   line-height: 1;
   text-transform: uppercase;
}
dialog.precheckout button {
   border: none;
   background-color: white;
   color: #0000cd;
   margin-top: 1em;
   border-radius: 5em;
   padding: 8px 16px;
   font-weight: 500;
   line-height: 1;
}
dialog.precheckout button path {
   fill: #0000cd !important;
}



/* OVERLAY FOR ROOM & COLLECTION
 * */
.carddetail .panel.roomcoll {
   display: flex;
   flex-direction: column;
   row-gap: 1em;
   border: .1em solid #0000cd;
   border-radius: 1em;
}
.carddetail .panel.roomcoll img {
   width: 100%;
   max-width: 370px;
   margin: 0 auto;
}
@media( min-width: 1024px ) {
   .carddetail .panel.roomcoll {
      flex-direction: row;
      column-gap: 2.5em;
      align-items: flex-start;
   }
   .carddetail .panel.roomcoll img {
      margin: 0;
   }
   .carddetail .panel.roomcoll .details {
      padding-top: 1em;
      flex-direction: column;
      align-items: flex-start;
      row-gap: 2em;
   }
}

/* Name
 * */
.carddetail .panel.roomcoll h4 {
   font-size: 1.1em;
}

/* Description
 * */
.carddetail .panel.roomcoll p {
   margin: 0;
   font-size: .75em;
   max-width: 75%;
}

/* List
 * */
.carddetail .panel.roomcoll .overlaylist {
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   gap: 2em;
   font-size: .75em;
   text-align: center;
}
.carddetail .panel.roomcoll .overlaylist li {
   margin: 0;
   padding: 0;
}
.carddetail .panel.roomcoll .overlaylist li img {
   display: block;
   margin-bottom: .5em;
}
.carddetail .panel.roomcoll .moreless {
   text-align: center;
   width: 100%;
   font-size: .8em;
}
.carddetail .panel.roomcoll .moreless a {
   text-decoration: none;
}
.carddetail .panel.roomcoll .moreless svg {
   margin-left: .75em;
   font-size: 1.1em;
}
.carddetail .panel.roomcoll .moreless path {
   fill: #0000cd;
}

/* Action row
 * */
.carddetail .panel.roomcoll .actionrow {
   width: 100%;
   display: flex;
   justify-content: center;
   text-align: center;
}
@media( min-width: 1024px ) {
   .carddetail .panel.roomcoll .actionrow {
      justify-content: flex-end;
      text-align: left;
   }
}