body > header.transparent {
   background-color: rgba(255 255 255 / 0%);
}



/* Shop name and logo in header */
body > header .text > .logo {
   display: flex;
   column-gap: 8px;
   align-items: center;
}
body > header .text > .logo img {
   display: block;
   width: 24px;
   height: 24px;
   object-fit: cover;
}



/* Search field */
body > header .searchfield {
   border: 1px solid var(--color-fieldborder);
   background: white;
   display: flex;
   align-items: center;
   padding-left: 8px;
   border-radius: 20px;
   flex: 1;
}
body > header .searchfield.focused {
   background: var(--color-primary-bg);
}
body > header .searchfield svg {
   font-size: .8em;
}
body > header .searchfield path {
   fill: var(--color-default-lighter);
}
body > header .searchfield input {
   border: none;
   width: 100%;
   box-sizing: border-box;
   padding: 4px 12px 4px 8px;
   font-family: var(--font-family-default);
   font-size: 1em;
   background: transparent;
   outline: none;
}


/* Shop bg pic */
body > main {
   background-attachment: scroll;
   background-repeat: no-repeat;
   background-size: auto 160px;
   background-position: 50% 0;
}



/* Shop info panel */
body > main .hcontainer.shopinfo {
   padding-top: 100px;
}
body > main .hcontainer.shopinfo > div {
   background: #ffffff;
   border-radius: 7px;
   padding: 16px;
   box-shadow: 0 0 10px rgba(0,0,0,.15);
   display: flex;
   column-gap: 16px;
}
body > main .hcontainer.shopinfo > div .logo
{
   flex: 0 0 72px;
   height: 72px;
}
body > main .hcontainer.shopinfo > div .logo img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
body > main .hcontainer.shopinfo > div .name {
   align-self: center;
}
body > main .hcontainer.shopinfo > div .name h1 {
   margin: 0 0 4px 0;
   font-size: 1.3em;
   line-height: 1;
   display: flex;
   column-gap: 6px;
   flex-wrap: wrap;
   align-items: center;
}
body > main .hcontainer.shopinfo > div .name h1 > .infobutton {
   font-size: .65em;
   display: inline-block;
   cursor: pointer;
}
body > main .hcontainer.shopinfo > div .name h1 > .infobutton path {
   fill: var(--color-primary);
}
body > main .hcontainer.shopinfo > div .info {
   margin-left: auto;
   font-size: .8em;
}
body > main .hcontainer.shopinfo > div .info path {
   fill: var(--color-primary);
}



/* Shop Info-specific */
dialog.full.shopinfo > .content > div {
   display: flex;
   row-gap: 16px;
   align-items: center;
   flex-direction: column;
}
dialog.full.shopinfo > .content > div > .name {
   text-align: center;
}
dialog.full.shopinfo > .content > div > .logo img {
   width: 128px;
   height: 128px;
   object-fit: contain;
   background: var(--color-default);
   border-radius: 7px;
   display:  block;
}
dialog.full.shopinfo > .content > div > .name h1 {
   margin: 0;
   font-size: 1.3em;
}
dialog.full.shopinfo > .content > ul > li {
   /* align-items: flex-start; */
   padding: 24px 0;
}
dialog.full.shopinfo > .content > ul > li path {
   fill: var(--color-default-lighter);
}
dialog.full.shopinfo > .content > ul > li a path {
   fill: var(--color-primary);
}
dialog.full.shopinfo > .content > ul > li > .icon {
   display: flex;
   flex-direction: row;
   column-gap: 16px;
}
dialog.full.shopinfo > .content > ul > li > .description {
   text-align: justify;
}
dialog.full.shopinfo .description p {
   margin-top: 0;
}
dialog.full.shopinfo .description ul {
   margin-bottom: 1em;
}
dialog.full.shopinfo .ownerlogin {
   margin: 16px 0 0 0;
   padding: 0 0 16px;
   font-size: .85em;
   text-align: center;
}



/* All Categories-specific */
dialog.full.allcategories .shoptitle > div {
   display: flex;
   column-gap: 8px;
   margin-left: 8px;
   align-items: center;
}
dialog.full.allcategories .shoptitle .logo {
   width: 24px;
}
dialog.full.allcategories .shoptitle .logo img {
   width: 100%;
   display: block;
}
dialog.full.allcategories .shoptitle h1 {
   margin: 0;
   padding: 0;
   font-size: 1em;
}
dialog.full.allcategories > .content > ul > li {
   cursor: pointer;
}



/* slidingnotes */
body > main .slidingnotes {
   margin: 24px 0 0 0;
   padding: 0 16px;
   list-style: none;
   overflow: auto;
   display: flex;
   font-size: .85em;
   font-weight: 700;
   column-gap: 12px;
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   scrollbar-width: none;  /* Firefox */
}
body > main .slidingnotes::-webkit-scrollbar {
   display: none;
}
@media( min-width: 544px ) {
   body > main .slidingnotes {
      width: 512px;
      margin: 24px auto 0;
   }
}
body > main .slidingnotes li {
   /* flex: 0 0 100%; */
   color: var(--color-accent);
   background: var(--color-accent-bg);
   border: 1px solid var(--color-accent-border);
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   row-gap: 2px;
   line-height: 1;
   padding: 8px 12px;
   /* scroll-snap-align: start; */
   text-align: center;
   justify-content: center;
}
body > main .slidingnotes li > * {
   white-space: nowrap;
   text-overflow: ellipsis;
   /* display: block; */
   /* padding: 24px 16px; */
}
body > main .slidingnotes li > span:nth-child(2) {
   font-weight: normal;
   font-size: .9em;
}



/* Category bar */
body > main .hcontainer.categorybar {
   display: flex;
   align-items: center;
   margin-top: 8px;
   padding-top: 4px;
   column-gap: 16px;
   position: sticky;
   top: var(--size-headerheight);
   z-index: 2000;
   background: white;
   border-bottom: 2px solid var(--color-faintlines);
}
body > main .hcontainer.categorybar > div {
   cursor: pointer;
}
body > main .hcontainer.categorybar ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   column-gap: 16px;
   overflow: auto;
   font-size: .9em;
   font-weight: 500;
}
body > main .hcontainer.categorybar ul li {
   white-space: nowrap;
   margin: 0;
   padding: 16px 0;
   cursor: pointer;
   /* border-bottom: 2px solid transparent; */
}
body > main .hcontainer.categorybar ul li.selected {
   /* border-bottom-color: var(--color-primary); */
   color: var(--color-primary);
   animation-duration: 500ms;
   animation-name: catselectfadein;
}
@keyframes catselectfadein {
   from {
      color: var(--color-default);
      /* border-bottom-color: transparent; */
   }
}



/* Item list */
body > main .hcontainer.itemlist {
   margin: top: 24px 0 0;
   padding: 0;
   list-style: none;
}
body > main .hcontainer.itemlist > li {
   scroll-margin-top: 84px;
   margin: 0;
   padding: 0;
}



/* Bottom action */
.bottomaction .noitems {
   text-align: center;
   flex: 0 0 100%;
   color: var(--color-default-lighter);
}
/* Mostly inherits the button in Item Detail (sitewide.css) */
.bottomaction button {
   padding-left: 12px !important;
}
.bottomaction button > .qty {
   background-color: rgb(255 255 255 / 25%);
   line-height: 1;
   padding: 6px 8px;
   border-radius: 4px;
   font-size: 1.5em;
}
.bottomaction button > .text {
   flex: 1;
}