/* NOTE: Every css rule in this sheet is prefixed with "#catstore". This is to ensure that they only effect elements within the catstore itself, and don't rist effecting anything else on the page that may otherwise have similar class or element names. */

/* This is the overall 'container' for the catstore. Everything in the store is contained within this sized element, so don't go changing the size of it. Every elements contained within is positioned relative to the upper left hand corner of this containing box. Move this box around the page, and all child elements will follow accordingly.*/
#catStore{ 
	height: 545px;
	width:232px;
	position:relative;
	background-image: url("https://www.prequeladventure.com/this/market/side_store15.png");
}

#catStore.closed{
	background-position: -230px;
}

/* This is the box that pops up next to Katia's little stall. It contains the product preview image, description, and purchase form */
#catStore .productDetails{
	width: 500px;
	min-height:400px;
	background: green;
	position:absolute;
	left: -515px;
	top:-9px;
	border: 2px solid #ABADAF;
	  background-color: #F9F9F9;
	  border-radius: 10px;
	  padding: 10px;
	  font-family: "Courier New", Courier, monospace;
	  font-size: 16px;
	  font-weight: bold;
	  display: flex;
	flex-direction: column;
	opacity: 0;
  transition-timing-function: ease-in-out;
  pointer-events: none;
  translate: 60px;
}

/* This is a class that allows the product details box to animate in and out. It is added upon the first user interaction, so as not to show any erronious animation when the oage first loads. */
.transitionable{
	transition-property: translate,opacity;
  transition-duration: 250ms;
}

/* This makes the paragraph element within the product details (used for the product description) to take up as much space as possible, pushing the buy form to the bottom of the box. */
#catStore .productDetails>p{
	flex-grow: 1;
	margin-block: 10px;
}

/* This makes the product preview image black and white until hovered over. (also gives it slightly smoothed corners) */
#catStore img.productPreview{
	border-radius: 5px;
}

/* This class is added to elements that were previously invisible (by having opacity set to 0) to make them visible. Using opacity allows the elements to smoothly fade in and out of visibility. */
#catStore .visible{
	opacity: 1;
  translate: 0px;
  pointer-events: unset;
}

/* This is the container for the various product buttons. It specifies the general size and position of where the buttons can go. The background is set to green, even though the whole thing (and it's child elements) are completeley transparent in order to make it easier to visually position elements on the page while debugging. */
#catStore .buttons{
  background: green;
  position: absolute;
  width: 80%;
  height: 64%;
  top: 197px;
  left: 10%;
  opacity:0;
}

/* This is for the buttons themselves. Hovering the mouse over these turns the cursor into a pointing hand, even though the elements themselves aren't 'html button elements' or hyperlinks. (we're using js to make them act like buttons) */
#catStore .buttons button {
  position: absolute;
  background: red;
  cursor: pointer;
}

/* This is the image of Katia herself.  The actual image file is much longer, so we specify a display area that allows for one 'frame' of the image, tell the eelements to size the image to 'cover' the specified area, and then control the currently displayed 'frame' by adjusting the 'object-position' (the horizontal offset) in code. We also disable dragging, so users don't see any nasty image dragging effects when trying to boop the snoot. */
#catStore .merchant {
  width: 152px;
  height: 138px;
  object-fit: cover;
  object-position: 0px;
  position: absolute;
  top: 61px;
  left: 40px;
  user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#catStore.closed :is(.merchant,.buttons,.snoot,.productDetails) {
	display:none;
}


/* This is just an element positioned over Katia's nose. Used in code to tell when the players clicking on her nose. */
#catStore .snoot {
  position: absolute;
  width: 16px;
  height: 6px;
  top: 110px;
  left: 107px;
}

/* If the user does not have javascript enabled for whatever reason, this element on the page becomes visible (and is positioned as if Katia is holding up a sign). If the user js javascript enabled, this elements isn't displayed in the first place. */
#catStore noscript img {
  position: absolute;
  top: 125px;
  left: 50px;
}

#catStore label[for="addtobag"]{
	display:block;
	background-image: url("button_add.gif");
	height: 26px;
	width: 112px;
	cursor:pointer;
}

#catStore label[for="addtobag"]:hover{
	background-position-x: -112px;
}

#catStore label[for="addtobag"]:active{
	background-position-x: -224px;
}

#catStore a.moreinfo{
	display:block;
	background-image: url("https://www.prequeladventure.com/this/market/button_page.png");
	height: 26px;
	width: 122px;
	cursor:pointer;
}

#catStore a.moreinfo:hover{
	background-position-x: -122px;
}

#catStore a.moreinfo:active{
	background-position-x: -244px;
}

#catStore :is(button[type="submit"],input[type="image"]){
	display:none;
}