/* WRAPPER */

.wrapper {
  display: block;
  min-height: 100dvh;
}

/* END-WRAPPER */





/* LOGO */

@media (prefers-color-scheme:light) {
  #logo .light {
    display: block;
  }

  #logo .dark {
    display: none;
  }
}

@media (prefers-color-scheme:dark) {
  #logo .dark {
    display: block;
  }

  #logo .light {
    display: none;
  }
}



/* logo */

#logo .image {
  grid-area: logo;
}

/* END-LOGO */





/* MSG */

.msg_head {
  background-color: rgb(var(--color1-1));
  border-radius: 5px;
  padding: 10px 0;
  margin: 15px 0 0 0;
}

.msg_head p {
  padding: var(--tpb1) 15px;
  color: rgb(var(--light-9));
  text-align: center;
}

.msg_head .title {
  font-weight: bold;
}

/* END-MSG */





/* HEADER */

header #menubar a,
header #menubar li,
header .hmp,
header #menubar .hmp span::before,
header #menubar .hmp span::after {
  -webkit-transition: var(--anim);
  -moz-transition: var(--anim);
  transition: var(--anim);
}



/* header */

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: rgb(var(--default-color-1));
  -webkit-transition: .2s padding ease !important;
  -moz-transition: .2s padding ease !important;
  transition: .2s padding ease !important;
  z-index: 100;
  margin: 10px 0;
}

.header.sticky {
  box-shadow: 0 7px 5px rgba(var(--dark-3), .03);
}

.header>div {
  display: grid;
  align-items: center;
  grid-template-areas: "logo hmp" "nav nav";
  grid-template-columns: 1fr 39px;
  grid-column-gap: 15px;
}

@media only screen and (min-width:560px) {
  .header>div {
    grid-column-gap: 30px;
  }
}

@media only screen and (min-width:1000px) {
  .header>div {
    grid-template-areas: "logo nav";
    grid-template-columns: 290px 1fr;
  }
}

.header #btn_nav a {
  font-weight: bold;
  padding: var(--tpb2) 20px !important;
  color: rgb(var(--light-9)) !important;
  background-color: rgb(var(--default-color-4)) !important;
  box-shadow: 1px 3px 10px rgba(var(--default-color-4), .1);
}

.header #btn_nav a:hover {
  background-color: rgb(var(--default-color-5)) !important;
  box-shadow: 1px 3px 15px rgba(var(--default-color-4), .3);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

.header #btn_nav a:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}



/* nav - mob */

@media only screen and (max-width:999px) {
  .header #menubar {
    grid-area: nav;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: flex-end;
    position: relative;
    height: 0;
  }

  .header #menubar ul {
    display: none;
    position: absolute;
    width: 240px;
    padding: 15px;
    margin-top: 5px;
    border-radius: 5px;
    background-color: rgb(var(--default-color-7));
    box-shadow: 0 10px 20px rgba(var(--dark-3), .1);
    z-index: 999;
  }

  .header #menubar ul:before {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    top: -6px;
    right: 13.5px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgb(var(--default-color-7));
  }

  .header #menubar a {
    display: block;
    text-decoration: none;
    border-radius: 5px;
    background-color: transparent;
    color: rgb(var(--default-color-3));
    padding: var(--tpb2) 15px;
    margin-bottom: 3px;
  }

  .header #menubar li:last-child a {
    margin-bottom: 0;
  }

  .header #menubar a:hover,
  .header #menubar li.active a {
    color: var(--color1);
    background-color: rgb(var(--default-color-6));
  }

  .header #menubar li.active a {
    font-weight: bold;
  }

  .header #btn_nav a {
    padding: var(--tpb2) 15px !important;
  }
}



/* nav - pc */

@media only screen and (min-width:1000px) {
  .header #menubar {
    grid-area: nav;
    display: block;
  }

  .header #menu {
    text-align: right;
  }

  .header #menu li {
    display: inline-block;
    margin: 1px 1px 1px 0;
  }

  .header #menu a {
    display: block;
    text-decoration: none;
    border-radius: 5px;
    background-color: transparent;
    color: rgb(var(--default-color-3));
    padding: var(--tpb2) 10px;
  }

  .header #menu .active a,
  .header #menu li:hover a {
    background-color: rgb(var(--default-color-6));
    color: rgb(var(--default-color-2));
  }

  .header #menu .active a {
    font-weight: bold;
  }

  .header #btn_nav a {
    margin-left: 20px;
  }
}



/* hmp */

.header .hmp {
  grid-area: hmp;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 39px;
  height: 39px;
  font-size: 0;
  text-indent: -9999px;
  box-shadow: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: rgb(var(--default-color-6));
}

@media only screen and (min-width:1000px) {
  .header .hmp {
    display: none;
  }
}

.header .hmp:hover {
  background-color: rgb(var(--default-color-4));
  filter: brightness(100%);
}

.header .hmp:hover span,
.header .hmp:hover span::before,
.header .hmp:hover span::after {
  background-color: rgb(var(--light-9));
}

.header .hmp:focus {
  outline: none;
}

.header .hmp span {
  display: block;
  position: absolute;
  top: 18px;
  left: 7px;
  right: 7px;
  height: 3px;
  background-color: rgb(var(--default-color-2));
  -webkit-transition: background 0 .3s;
  -moz-transition: background 0 .3s;
  transition: background 0 .3s;
}

.header .hmp span::before,
.header .hmp span::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: rgb(var(--default-color-2));
  -webkit-transition-duration: .3s, .3s;
  -moz-transition-duration: .3s, .3s;
  transition-duration: .3s, .3s;
  -webkit-transition-delay: .3s, 0;
  -moz-transition-delay: .3s, 0;
  transition-delay: .3s, 0;
}

.header .hmp span::before {
  top: -9px;
  -webkit-transition-property: top, -webkit-transform;
  -moz-transition-property: top, -webkit-transform;
  transition-property: top, transform;
}

.header .hmp span::after {
  bottom: -9px;
  -webkit-transition-property: bottom, -webkit-transform;
  -moz-transition-property: bottom, -webkit-transform;
  transition-property: bottom, transform;
}

.header .hmp.active {
  background-color: rgb(var(--default-color-4));
}

.header .hmp.active span {
  background: none;
}

.header .hmp.active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.header .hmp.active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.header .hmp.active span::before,
.header .hmp.active span::after {
  -webkit-transition-delay: 0, .3s;
  -moz-transition-delay: 0, .3s;
  transition-delay: 0, .3s;
  background-color: rgb(var(--light-9));
}

/* END-HEADER */





/* BREADCRUMB */

@media (prefers-color-scheme:light) {
  :root {
    --breadcrumb-color-1: var(--light-6);
  }
}

@media (prefers-color-scheme:dark) {
  :root {
    --breadcrumb-color-1: var(--dark-6);
  }
}

#breadcrumb {
  background-color: rgb(var(--breadcrumb-color-1));
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
}

#breadcrumb:hover a {
  -webkit-transition: var(--anim);
  -moz-transition: var(--anim);
  transition: var(--anim);
}

#breadcrumb li {
  display: inline-block;
  margin-right: 10px;
}

#breadcrumb li:last-child {
  margin-right: 0;
}

#breadcrumb li:after {
  display: inline-block;
  content: "/";
  margin-left: 7px;
  color: rgb(var(--default-color-3));
}

#breadcrumb li:last-child:after {
  display: none;
  margin-left: 0;
}

#breadcrumb a {
  color: rgb(var(--default-color-3));
}

#breadcrumb a:hover {
  color: rgb(var(--default-color-2));
}

#breadcrumb li>span {
  color: rgb(var(--default-color-3));
}

/* END-BREADCRUMB */










/* structure ---------- ---------- ---------- ---------- ---------- */
/* --------- ---------- ---------- ---------- ---------- ---------- */





/* PAGE_LIST */

.ecat {
  background: rgba(var(--color1-1), .05);
  background: linear-gradient(0deg, transparent 50%, rgba(var(--color1-1), .05) 100%);
}

.page_list {
  padding: 15px 0;
}

.page_list li {
  display: grid;
  grid-template-columns: 1fr 120px;
  grid-column-gap: 15px;
  border-bottom: 1px dashed rgb(var(--default-color-6));
}

.page_list li.head {
  border-top: 1px dashed rgb(var(--default-color-6));
}

.page_list li p {
  padding: var(--tpb2) 0;
}

.page_list li .url {
  font-size: 12px;
  text-align: right;
}

.page_list li .url span {
  padding: 0 3px;
  border-radius: 3px;
  font-weight: bold;
  background-color: rgb(var(--default-color-6));
  color: rgb(var(--default-color-2));
}

/* END-PAGE_LIST */





/* RADIO_IMAGE */

form .form_radio_image label.page_1 {
  background-image: url('/img/form/page_1.svg');
}

/* END-RADIO_IMAGE */





/* PAGINATION */

.pagination {
  padding: 15px 0 10px 0;
  border-radius: 5px;
}

.pagination li {
  display: inline-block;
  margin: 0 5px 5px 0;
}

.pagination a {
  -webkit-transition: var(--anim);
  -moz-transition: var(--anim);
  transition: var(--anim);
  display: block;
  padding: var(--tpb2) 10px;
  font-size: 16px;
  border-radius: 3px;
  text-decoration: none;
  color: rgb(var(--default-color-3));
}

.pagination a:hover {
  background-color: rgb(var(--default-color-6));
  color: rgb(var(--default-color-2));
}

.pagination .active a {
  background-color: rgb(var(--default-color-4));
  color: rgb(var(--light-9));
}

.pagination .active a:hover {
  background-color: rgb(var(--default-color-5));
}

/* END-PAGINATION */










/* block_list ---------- ---------- ---------- ---------- ---------- */
/* ---------- ---------- ---------- ---------- ---------- ---------- */















/* FOOTER */

@media (prefers-color-scheme:light) {
  :root {
    --footer-color-1: var(--dark-3);
    --footer-color-2: var(--text-3);
    --footer-color-3: var(--light-6);
    --footer-color-4: var(--light-4);
  }
}

@media (prefers-color-scheme:dark) {
  :root {
    --footer-color-1: var(--light-8);
    --footer-color-2: var(--text-7);
    --footer-color-3: var(--dark-6);
    --footer-color-4: var(--dark-5);
  }
}

footer:hover a {
  -webkit-transition: var(--anim);
  -moz-transition: var(--anim);
  transition: var(--anim);
}

footer {
  display: block;
  background-color: rgb(var(--footer-color-3));
  z-index: 9;
}

footer #footerbar {
  padding-top: 45px;
  padding-bottom: 45px;
}

footer #footerbar .container {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 15px;
}

footer #footerbar .container>*,
footer #footerbar p {
  font-size: 14px;
}

footer #footerbar .logo {
  padding-bottom: 30px;
  grid-column: span 2;
}

footer #footerbar .logo h2,
footer #footerbar .logo h2 a {
  color: rgb(var(--footer-color-1));
}

footer #footerbar .logo p {
  color: rgb(var(--footer-color-2));
}

footer #footerbar .logo ul {
  display: block;
}

footer #footerbar .logo li {
  display: inline-block;
  margin-right: 10px;
}

footer #footerbar ul {
  order: 1;
  display: block;
  padding-top: 7.5px;
  padding-bottom: 7.5px;
}

footer #footerbar .container>ul li {
  display: block;
}

footer #footerbar ul p,
footer #footerbar ul a {
  display: block;
  padding-top: calc(7.5px - 0.22em);
  padding-bottom: calc(7.5px - 0.22em);
}

footer #footerbar ul p {
  color: rgb(var(--footer-color-1));
  font-weight: bold;
}

footer #footerbar ul a {
  color: rgb(var(--footer-color-2));
}

footer #footerbar ul a.active {
  text-decoration: underline;
}

footer #footerbar ul a:hover,
footer #footerbar ul a:focus {
  color: rgb(var(--footer-color-1));
  text-decoration: underline;
}

@media only screen and (min-width:560px) {
  footer #footerbar .container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 15px;
  }

  footer #footerbar .logo {
    grid-column: span 3;
  }
}

@media only screen and (min-width:1000px) {
  footer #footerbar .container {
    grid-template-columns: 1fr repeat(3, 150px);
    grid-column-gap: 45px;
  }

  footer #footerbar .logo {
    grid-column: span 1;
    padding-bottom: 0;
  }
}

@media only screen and (min-width:1200px) {
  footer #footerbar .container {
    grid-template-columns: 1fr repeat(3, 200px);
  }
}



/* policy */

footer #policy {
  background-color: rgb(var(--footer-color-4));
}

footer #policy .container {
  display: grid;
  align-items: flex-end;
  grid-template-columns: 1fr;
}

footer #policy .container>* {
  font-size: 12px;
}

footer #policy .copyright,
footer #policy .design {
  text-align: center;
}

footer #policy .copyright {
  order: 2;
}

footer #policy ul {
  order: 1;
  display: block;
  padding-top: 7.5px;
  padding-bottom: 7.5px;
  text-align: center;
  border-bottom: 1px dashed rgb(var(--footer-color-3));
}

footer #policy li {
  display: inline-block;
}

footer #policy ul a {
  display: block;
  padding: calc(7.5px - 0.22em) 7px;
}

footer #policy ul a.active {
  text-decoration: underline;
}

footer #policy .design {
  margin-top: -15px;
  order: 3;
}

footer #policy p,
footer #policy a {
  color: rgb(var(--footer-color-2));
}

footer #policy a:hover,
footer #policy a:focus {
  color: rgb(var(--footer-color-1));
  text-decoration: underline;
}

@media only screen and (min-width:360px) {
  footer #policy .container {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 5px;
  }

  footer #policy .copyright {
    text-align: left;
  }

  footer #policy ul {
    grid-column: span 2;
    text-align: left;
  }

  footer #policy ul a {
    padding: calc(7.5px - 0.22em) 14px calc(7.5px - 0.22em) 0;
  }

  footer #policy .design {
    margin-top: 0;
    text-align: right;
  }
}

@media only screen and (min-width:700px) {
  footer #policy .container {
    grid-template-columns: 170px 1fr 170px;
  }

  footer #policy .copyright {
    order: 1;
  }

  footer #policy ul {
    order: 2;
    grid-column: span 1;
    border-bottom: none;
    text-align: center;
  }

  footer #policy ul a {
    display: block;
    padding: calc(7.5px - 0.22em) 7px;
  }
}

/* END-FOOTER */





























/* FIRST */

#home #first #navigation ul li {
  -webkit-transition: var(--anim);
  -moz-transition: var(--anim);
  transition: var(--anim);
}

#home #first {
  padding: auto;
}

#home #first h1 {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  color: rgb(var(--default-color-2));
}

#home #first .desc {
  font-size: 16px;
  text-align: center;
  color: rgb(var(--default-color-3));
}

@media only screen and (min-width: 560px) {
  #home #first h1 {
    font-size: 44px;
  }

  #home #first .desc {
    font-size: 18px;
    text-align: center;
  }
}

@media only screen and (min-width: 1000px) {
  #home #first h1 {
    font-size: 56px;
  }

  #home #first .desc {
    font-size: 20px;
    text-align: center;
    padding-left: 90px;
    padding-right: 90px;
  }
}



/* navigation */

#home #first #navigation {
  background-color: rgb(var(--color15-1));
  border-radius: 30px;
  margin-top: 45px;
  margin-bottom: 15px;
}

#home #first #navigation ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 30px;
}

#home #first #navigation ul li {
  flex: 1 0 115px;
  min-width: 115px;
  max-width: 200px;
  border: 2px solid rgba(var(--light-9), .1);
  border-top: none !important;
  border-radius: 15px;
  margin: 40px 7.5px 30px 7.5px;
}

#home #first #navigation a {
  text-decoration: none;
}

#home #first #navigation li .image {
  margin-top: -40px;
}

#home #first #navigation li .label {
  text-align: center;
  color: rgb(var(--light-9));
}

@media only screen and (min-width: 420px) {
  #home #first #navigation ul li {
    margin: 40px 15px 30px 15px;
  }
}

#home #first #navigation ul li:hover {
  border: 2px solid rgba(var(--light-9), .7);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

#home #first #navigation ul li:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

/* END-FIRST */

















/* SECTION */

#product section>.add a,
#product .section_header>.add a {
  -webkit-transition: var(--anim);
  -moz-transition: var(--anim);
  transition: var(--anim);
}

#product section {
  padding: 30px 0;
}

#product section>h2 {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

#product section>.desc {
  font-size: 16px;
  text-align: center;
}

#product section>.add {
  text-align: center;
  padding: 15px 0;
}

#product .section_header>.add {
  text-align: center;
  padding: 15px 0 0;
}

#product section>.add a,
#product .section_header>.add a {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: var(--tpb3) 30px;
  border-radius: 50px;
  border: 2px dashed rgb(var(--default-color-7));
  color: rgb(var(--default-color-3));
}

#product section>.add a:hover {
  border: 2px dashed rgb(var(--default-color-6));
  color: rgb(var(--default-color-2));
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

#product section>.add a:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

@media only screen and (min-width: 560px) {
  #product section>h2 {
    font-size: 44px;
  }

  #product section>.desc {
    font-size: 18px;
    text-align: center;
  }
}

@media only screen and (min-width: 1000px) {
  #product section>h2 {
    font-size: 56px;
  }

  #product section>.desc {
    font-size: 20px;
    text-align: center;
    padding-left: 90px;
    padding-right: 90px;
  }
}

/* END-SECTION */













/* LIST */

#product .list .item {
  -webkit-transition: var(--anim);
  -moz-transition: var(--anim);
  transition: var(--anim);
}

#product .list {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 60px;
  grid-column-gap: 15px;
  padding-top: 45px;
}

#product .list .item {
  background-color: rgb(var(--default-color-9));
  border-radius: 30px;
  margin-top: 100px;
  padding: 0 15px 87px 15px;
  position: relative;
}

#product .list .item:hover {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  box-shadow: 0 10px 7px rgba(var(--dark-1), .07);
}

#product .list .item .image {
  margin-top: -100px;
}

#product .list .item .info {
  padding: 0 15px;
  text-align: center;
}

@media only screen and (min-width: 420px) {
  #product .list {
    grid-template-columns: 1fr 1fr;
  }

  #product .list .item {
    margin-top: 60px;
  }

  #product .list .item .image {
    margin-top: -60px;
  }

  #product .list .item .info {
    padding: 0;
  }
}

@media only screen and (min-width: 560px) {
  #product .list .item {
    margin-top: 80px;
  }

  #product .list .item .image {
    margin-top: -80px;
  }

  #product .list .item .info {
    padding: 0 15px;
  }
}

@media only screen and (min-width: 700px) {
  #product .list {
    grid-column-gap: 30px;
  }

  #product .list .item {
    margin-top: 100px;
  }

  #product .list .item .image {
    margin-top: -100px;
  }
}

@media only screen and (min-width: 1000px) {
  #product .list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media only screen and (min-width: 1200px) {
  #product .list {
    grid-column-gap: 60px;
  }
}



/* name */

#product .list .item .name {
  font-size: 18px;
  font-weight: bold;
}

#product .list .item .name,
#product .list .item .name a {
  color: rgb(var(--default-color-2));
}



/* desc */

#product .list .item .desc {
  font-size: 14px;
  margin-top: -15px;
  color: rgb(var(--default-color-3));
}



/* tags */

#product .list .item .tags {
  margin-top: -3px;
  padding-bottom: 12px;
}

#product .list .item .tags li {
  display: inline-block;
  color: rgb(var(--default-color-3));
  font-size: 12px;
  padding: var(--tpb1) 10px;
  background-color: rgb(var(--default-color-7));
  margin: 3px;
  border-radius: 3px;
}



/* price */

#product .list .item .price {
  margin-top: -15px;
  color: rgb(var(--default-color-2));
}

#product .list .item.sale .price {
  color: rgb(var(--color4-1));
  font-weight: bold;
}

#product .list .item .price s {
  margin-left: 10px;
  color: rgb(var(--default-color-2));
  font-weight: normal !important;
}



/* cart */

#product .list .item .cart {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 120px;
  grid-column-gap: 0;
  position: absolute;
  bottom: 30px;
  left: 15px;
  right: 15px;
  height: 42px !important;
}




/* END-LIST */





/* PRODUCT_ITEM */

#product_item .container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 30px;
  padding-top: 0;
  padding-bottom: 45px;
}

#product_item .info {
  padding: 0;
}

@media only screen and (min-width: 700px) {
  #product_item .container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-column-gap: 30px;
  }
}

@media only screen and (min-width: 1000px) {
  #product_item .container {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 45px;
  }
}

@media only screen and (min-width: 1200px) {
  #product_item .container {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
  }
}



/* title */

#product_item .container h1 {
  font-size: 32px;
  font-weight: bold;
}

#product_item .container .desc {
  font-size: 16px;
}

@media only screen and (min-width: 560px) {
  #product_item .container h1 {
    font-size: 36px;
  }

  #product_item .container .desc {
    font-size: 18px;
  }
}

@media only screen and (min-width: 1000px) {
  #product_item .container h1 {
    font-size: 40px;
  }

  #product_item .container .desc {
    font-size: 20px;
  }
}



/* tags */

#product_item .container .tags {
  margin-top: -3px;
  padding-bottom: 12px;
}

#product_item .container .tags li {
  display: inline-block;
  color: rgb(var(--default-color-3));
  font-size: 12px;
  padding: var(--tpb1) 10px;
  background-color: rgb(var(--default-color-7));
  margin: 3px;
  border-radius: 3px;
}

@media only screen and (min-width: 700px) {
  #product_item .container .tags li {
    margin: 3px 6px 3px 0;
  }
}



/* price */

#product_item .container .price {
  color: rgb(var(--default-color-2));
}

#product_item .container.sale .price {
  color: rgb(var(--color4-1));
  font-weight: bold;
}

#product_item .container .price s {
  margin-left: 10px;
  color: rgb(var(--default-color-2));
  font-weight: normal !important;
}



/* cart */

#product_item .container .cart {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 120px;
  width: 120px;
  grid-column-gap: 0;
  bottom: 30px;
  left: 15px;
  right: 15px;
  height: 42px !important;
  margin-top: 15px;
  margin-bottom: 15px;
}

















#cart {
  padding-bottom: 60px;
}

#cart .container {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 1fr;
  grid-row-gap: 45px;
}

#cart .container #product {
  border: 2px solid rgb(var(--default-color-7));
  border-radius: 15px;
  padding: 0 15px;
}



/* title */

#cart .container h1 {
  font-size: 32px;
  font-weight: bold;
}

@media only screen and (min-width: 560px) {
  #cart .container h1 {
    font-size: 36px;
  }
}

@media only screen and (min-width: 1000px) {
  #cart .container h1 {
    font-size: 40px;
  }
}



/* button */

#cart .container .button>a {
  background-color: rgb(var(--color4-1));
  color: rgb(var(--light-9));
}

#cart .container .button>a:hover {
  background-color: rgb(var(--color3-1));
}



/* product */

#cart .container #product li {
  display: grid;
  align-items: center;
  grid-template-areas: "thumb name name"
    "thumb desc desc"
    "thumb buy price";
  grid-template-columns: 70px 100px 1fr;
  grid-column-gap: 15px;
  border-top: 1px solid rgb(var(--default-color-7));
  padding: 30px 0;
}

@media only screen and (min-width: 360px) {
  #cart .container #product li {
    grid-template-columns: 90px 100px 1fr;
  }
}

#cart .container #product li:first-child {
  border-top: none !important;
}

#cart .container #product li .product_sum {
  display: none;
}

#cart .container #product li .thumb {
  grid-area: thumb;
}

#cart .container #product li .name {
  grid-area: name;
  font-size: 16px;
  font-weight: bold;
  margin-top: -15px;
}

#cart .container #product li .name,
#cart .container #product li .name a {
  color: rgb(var(--default-color-2));
}

#cart .container #product li .desc {
  grid-area: desc;
  font-size: 12px;
  color: rgb(var(--default-color-3));
  margin-top: -15px;
}

#cart .container #product li .buy {
  grid-area: buy;
}

#cart .container #product li .price {
  grid-area: price;
  padding: var(--tpb1) 0;
  text-align: right;
}

@media only screen and (min-width: 1000px) {
  #cart .container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-column-gap: 60px;
  }
}



/* cart */

#cart .container #product li .cart {
  display: grid;
  align-items: center;
  grid-template-columns: 100px;
  width: 100px;
  grid-column-gap: 0;
  height: 42px !important;
}































/* CART_BUTTON */

#cart_button {
  -webkit-transition: var(--anim);
  -moz-transition: var(--anim);
  transition: var(--anim);
}

#cart_button {
  display: none;
  position: fixed;
  bottom: 70px;
  right: 50%;
  transform: translateX(50%);
  min-width: 39px;
  height: 55px;
  background-color: rgb(var(--color4-1));
  box-shadow: 1px 2px 15px rgba(var(--light-9), .3);
  color: rgb(var(--light-9));
  border-radius: 50px;
  z-index: 10;
  -webkit-animation: jittery_cart 2s infinite;
  animation: jittery_cart 2s infinite;
  animation-delay: 15s;
  animation-iteration-count: 10;
  border: 3px solid rgb(var(--light-9));
}

#cart_button.full {
  display: block;
}

#cart_button:hover {
  background-color: rgb(var(--color3-1));
}

#cart_button a {
  display: grid;
  align-items: center;
  grid-template-columns: 49px max-content max-content;
  grid-gap: 0;
  width: 100%;
  height: 49px;
  line-height: 0;
  text-decoration: none;
  padding: 5px 15px;
}

#cart_button a icon {
  display: grid;
  align-items: center;
  justify-items: center;
  text-decoration: none;
  font-size: 21px !important;
  height: 39px !important;
  width: 39px !important;
}

#cart_button a span {
  text-decoration: none;
  font-size: 16px !important;
  padding: 0 14px 0 0;
  font-weight: bold;
}

#cart_button a,
#cart_button a icon,
#cart_button a span {
  color: inherit;
}

@keyframes jittery_cart {

  5%,
  50% {
    transform: scale(1) translateX(49%);
  }

  10% {
    transform: scale(0.9) translateX(49%);
  }

  15% {
    transform: scale(1.15) translateX(49%);
  }

  20% {
    transform: scale(1.15) rotate(-5deg) translateX(49%);
  }

  25% {
    transform: scale(1.15) rotate(5deg) translateX(49%);
  }

  30% {
    transform: scale(1.15) rotate(-3deg) translateX(49%);
  }

  35% {
    transform: scale(1.15) rotate(2deg) translateX(49%);
  }

  40% {
    transform: scale(1.15) rotate(0) translateX(49%);
  }

  10%,
  15%,
  20%,
  25%,
  30%,
  35%,
  40% {
    background-color: rgb(var(--color1-1));
    box-shadow: 1px 2px 15px rgba(var(--light-9), .3);
  }
}

/* END-CART_BUTTON */





/* CHECK */

.crtok .desc {
  font-size: 14px;
  font-weight: bold;
  color: rgb(var(--color13-1));
}

.crtok .check h2 {
  font-size: 18px;
  font-weight: bold;
  color: rgb(var(--default-color-2));
}

.crtok .check p {
  font-size: 14px;
  color: rgb(var(--default-color-3));
  margin-top: -15px;
}

.crtok .check p,
.crtok .check p b,
.crtok .check p strong {
  font-weight: normal !important;
}

.crtok .check p span {
  margin-right: 10px;
}

.crtok .check br {
  visibility: hidden;
  display: none;
}

.crtok .check hr {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgb(var(--default-color-7));
  margin-bottom: 15px;
}

.crtok .check a {
  color: rgb(var(--default-color-2));
}

.crtok .button>a {
  border-radius: 50px !important;
  background-color: rgb(var(--color4-1));
  color: rgb(var(--light-9));
}

.crtok .button>a:hover {
  background-color: rgb(var(--color3-1));
}

/* END-CHECK */










@media only screen and (min-width: 420px) {}

@media only screen and (min-width: 560px) {}

@media only screen and (min-width: 700px) {}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1200px) {}