Show and Hide in JavaScript

Every element has a display value: the kind of box it is. A heading or a paragraph is block: it starts on its own line. A span is inline: it flows inside a line of text, like a word, and padding above and below it makes no room. display: inline-block keeps it in the line but makes it a real box that takes padding all around. That suits a small label like a badge.

There are two ways to hide an element. display: none takes it out of the page: it isn't drawn and takes no place. visibility: hidden hides it but keeps its empty place, so nothing around it moves. On another page it could look like this:

.ad {
  display: none;
}

.spoiler {
  visibility: hidden;
}

The check prints the screen as text, so a hidden element leaves the list either way. It can't see the empty place that visibility: hidden keeps: that's for your eyes, in the Your page picture. The Notebook is sold out: its card has the class sold-out, and its price and Buy button make no sense. Your stylesheet must make the check print:

> the style of .badge (2 elements, window 1024 px wide)
  span.badge "Out of stock"
    display: inline-block   <- .badge
    padding: 2px 6px   <- .badge
  ...
> the style of .sold-out .price (1 element, window 1024 px wide)
  p.price "$7"
    visibility: hidden   <- .sold-out .price
> the style of .buy (3 elements, window 1024 px wide)
  button.buy "Buy"
    display: (not set)
  button.buy "Buy"
    display: none   <- .sold-out .buy

On the screen, the Notebook's card keeps only its heading, heading 3: Notebook Out of stock. The Mug and the Lamp keep their prices and Buy buttons.

Your task: in the .badge rule, add display: inline-block and padding: 2px 6px. Then, at the end of the file, write a rule for .sold-out .price that sets visibility: hidden and a rule for .sold-out .buy that sets display: none.

Assignment
Follow the Coding Tutorial to turn the badge into a small inline box, then hide the sold-out Notebook's price and its Buy button in styles.css.

Hint
In .sold-out .price, the space means "inside": a .price somewhere inside an element with the class sold-out. Only the Notebook's card has that class, so the other cards keep everything.