:root {
  /* Colors */
  --Shop_Accent: #EA02F3;
  --Background_Shop: #fdfacb;
}

body {
  color: var(--Background_Dark);
  background-color: var(--Background_Shop);
  font-family: var(--text_font_fam);
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
  margin: 0px;
  padding: 0;
}

.fineprint{
font-size: 0.5em;
font-style: italic;
}

/*Shop Page contents - currently other than color and png this is the same as other pages. However it may change with shopping grid so delete it if it doesn't need to.*/
.shoppagecontent {
    
    position: absolute;
   
    height: auto;
    
    width: calc(100vw - 3em - 222px - 148px);
    max-width: 864px;
    min-width: 600px;
    
    float: left;
    top: 0;
    margin-left: 222px; /*Navbar width plus border graphic width*/
    padding-left: 0px;
    
    background: no-repeat url(/11-resources/02-images/ShopPageBorderTop.png);
    background-color: var(--Background_Shop);
    background-position: top 0px right 0px;
    background-size: auto, 8px;
}

.showcase{
  width: 100%;
  display: grid;
  
  grid-auto-columns: max-content;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 0px;
  grid-template-columns: repeat(3, 1fr);
}



.inventory{
margin: 24px;
width: max-content;
max-width:284px;
min-height: 337px;
background-color: #FDF9F0;
position: relative;


}

.inventory img{
max-width:236px;
padding: 24px;
padding-bottom: 0px;
margin-bottom: 0px;
background: none;

}

.inventory p{
 margin: 0;
width: calc(100% - 32px);
font-size: 20px;
}

.inventory a{
  background: none;
}

.inventory .pricetag{
width: 30%;
aspect-ratio: 1/1;
position: absolute;
right: 0;
bottom: 0px;

padding: 0px;
background-image:  url(/11-resources/02-images/pricetag.png);
background-repeat: no-repeat;
background-position: bottom right;
background-size: 100%;
 /*margin-right: 6.536%;*/
}

.cashmoney  {
position: absolute;
display: inline-block;
bottom: 0;
right: 0;
margin-right: 10%;
margin-bottom: 5%;
font-size: 1.3em;

}

.cashmoney  p{
font-size: 1.3em;
display: inline-block;
text-align: center;

margin: 0;
padding: 0;

color: var(--Background_Shop);


}

.iname{
  position: relative;
  margin: 0;
  margin-top: 1%;
  bottom:0;
  color: var(--Background_Dark);
  
}

.iname p{
text-align: left;
 margin-left: 6.536%;
color: var(--Background_Dark);


}

.iname p a{
  background: none;
}

.iname p a:hover{
color: var(--Shop_Accent);
font-weight: bold;
}

.iname p a:active{
color: var(--Shop_Accent);
font-style: bold;
}

.iname p a:visited{
color: var(--Background_Dark);
font-weight: normal;
}

.nav{
  background-color: var(--Background_Shop);
  top: 8px;
}


/*shop button active */
.nav li .pagebutt {
    margin-top: 24px;
    background-color: var(--Shop_Butt_Back_Hover);
    
    
    Border-top: solid;
    border-left: solid;
    border-bottom: solid;
    border-color: var(--Shop_Accent);
    border-width: 8px;
}

.nav li .pagebutt:visited {
    background-color: var(--Shop_Butt_Back_Hover);
    color: var(--Background_Dark);
    
}

.nav li .pagebutt:hover {
    background-color: var(--Shop_Butt_Back_Hover);
}

.nav li .pagebutt:active {
    font-style: normal;
}

.nav li abbr{
border-bottom: none;
text-decoration: none;
position: relative;
top: -10px;
}

/* mobile shop button active */
.nav li .mashoppage{  
  
    
  background-color: var(--Background_Shop);
  color: var(--Background_Dark);
  font-style: normal;
  
  cursor: default;
}

.nav li .mashoppage:visited{  
  background-color: var(--Background_Shop);
  color: var(--Background_Dark);
  font-style: normal;
}

.nav li .mashoppage:hover{  
  background-color: var(--Background_Shop);
  color: var(--Background_Dark);
  font-style: normal;
}

.nav li .mashoppage:active{  
  background-color: var(--Background_Shop);
  color: var(--Background_Dark);
  font-style: normal;
}

#borderfence{
  position: absolute;
  width: 10px;
  height: 16Px;
  background-color: transparent;
  top: 0px;
  right: -10px;
}

#borderfence3{
  position: absolute;
  width: 8px;
  height: 10Px;
  background-color: var(--Shop_Accent);
  bottom: -24px;
  left: 0px;
}

#shopnavborder{
  position: absolute;
  top: 24px;
  left: 8px;
  padding: 0;
  
  background-color: var(--Background_Shop);
  width: calc(214px + 23px - 8px);
  height: calc(355px - 12px);
  
  border-width: 10px;
  border-right-style: ridge;
  border-bottom-style: ridge;
  border-radius: 0px 0px 3px 0px; 
  border-width: 10px;
  border-color: var(--Shop_Accent);
}


/* Hide nav bar and resize for smaller screens */
      @media screen and (max-width: 800px) {
        .shoppagecontent{
        margin-left: 0.5em;
        /* width = viewport - border graphic width - border graphic margin*/
        width: calc(100vw - 1em);
        min-width: 300px;
        }
        .shoptopgraphic img{
        width: 100%;
        margin-left: -40px;
        margin-top:-80px;
        }
       .nav {
        display: none;
        background-color: var(--Background_Shop);
        position: relative;
        margin-top: 0px;
        margin-left: 0.25rem;
              
        width: calc(214px + 23px);
        height: calc(373px + 6px - 12px);
        
        top: -12px;
        
        border-bottom-style: none;
        border-right-style: none;
        /*Border radius order: top-left, top-right, bottom-right, bottom-left */
      
        }
      }