/* Categories page - two level category browser + advertising banners */
#Wrapper .jpdrugstore-categories-page .section_wrapper {
  max-width: 1200px; }
#Wrapper .jpdrugstore-categories-page .categories-section,
#Wrapper .jpdrugstore-categories-page .banner-section {
  margin-bottom: 40px; }

/* markup comes from template/cat-tabs.php: h3 tiles four per row, and the
   panel of the selected tile on its own full width line right under that
   tile's row. The "order" values that place it there are written inline by
   the template, because they depend on which row each tile is in.
   Tile and panel stay dom siblings for template/cat-selector.php */
#Wrapper .jpdrugstore-categories-page .cat-tabs {
  display: flex;
  flex-wrap: wrap;
  background-color: white; }
#Wrapper .jpdrugstore-categories-page .cat-tabs > h3 {
  position: relative;
  box-sizing: border-box;
  width: 25%;
  margin: 0;
  padding: 12px 40px 12px 15px;
  background-color: #D6A65B;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  color: white;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.4;
  cursor: pointer; }
#Wrapper .jpdrugstore-categories-page .cat-tabs > h3:after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 1.8rem;
  line-height: 1; }
/* the open tile is told apart by the +/- sign alone */
#Wrapper .jpdrugstore-categories-page .cat-tabs > h3.active:after {
  content: "\2212"; }
#Wrapper .jpdrugstore-categories-page .cat-tabs > div {
  display: none;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 15px 10px 15px;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px; }
#Wrapper .jpdrugstore-categories-page .cat-tabs > div.active {
  display: block; }
#Wrapper .jpdrugstore-categories-page .cat-tabs > div .cat-menu-item {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid; }
#Wrapper .jpdrugstore-categories-page .cat-tabs > div .cat-menu-item-wrapper {
  padding: 10px 0;
  font-size: 1.3rem; }
#Wrapper .jpdrugstore-categories-page .cat-tabs > div .cat-menu-item-wrapper a {
  display: block;
  color: black;
  text-decoration: none; }
#Wrapper .jpdrugstore-categories-page .cat-tabs > div .cat-menu-item-wrapper a:hover {
  color: #DCA65B; }

/* mobile: hide the tiles and let .cat-selector take over, same 1240px
   breakpoint the shop pages use. Nothing is styled here on purpose - the
   selector takes the shared rules in style.css, exactly like the shop pages,
   so both pages look the same */
@media only screen and (max-width: 1240px) {
  #Wrapper .jpdrugstore-categories-page .cat-menu-container {
    display: none; } }

/* banner area */
#Wrapper .jpdrugstore-banner-area {
  display: block; }
#Wrapper .jpdrugstore-banner-area .banner {
  margin: 0 0 20px 0;
  text-align: center; }
#Wrapper .jpdrugstore-banner-area .banner:last-child {
  margin-bottom: 0; }
#Wrapper .jpdrugstore-banner-area .banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto; }
#Wrapper .jpdrugstore-banner-area .banner .link {
  display: block;
  text-decoration: none; }