/*.selector = class, #selector = id, selector (ex:h1) = all instances of it. Hierarchy: id, class, normal  */
:root {
  --bodybgc1:  #eee;

  --fontc1: black;
  --headc1: #19bb29;
  --head2c1: #54549c;

  --errorc1: #fa6a6a;
  --successc1: #4ac34a;


  --linkc1: #1446dc;
  --linkhoverc1: #6984dc;    /* hover */
  --buttonbgc1: #ccdbe2;   /* blue */
  --theadc1: #3a6978;

  --star-size: 1em;
  --star-color: #fff;
  --star-background: #fc0;
}

/*  stars for rating      */
.stars {
  --percent: calc(var(--rating) / 5 * 100%);

  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;
}

.stars::before {
  content: '★★★★★';
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/*    =======    body  */

body {
  color: var(--fontc1);
  background-color: var(--bodybgc1);
  min-height: 90vh;
}
body a {
  color: var(--linkc1);
}

body a:hover{
  color: var(--linkhoverc1);
}

input{
  display:inline-block;
  margin: auto;
  background: var(--bodybgc1);
  color: var(--fontc1);
  border: 1px solid var(--fontc1);
}

input[type="submit"] {
  padding: 0.2em 0.5em;
  border-radius: 2.3em;
  background-color: var(--buttonbgc1);
}

button {
  background: var(--bodybgc1);
}
textarea {
  background: var(--bodybgc1);
}

/*  common    site_head */
.site_head {
  text-align:center;
  font-size: 1.5em;
  width: fix-content;
  margin: 0.5em auto;
  color: var(--headc1);
  font-weight: 800;
  padding: 0px 1em;
}

.site_head .title {
  width: 80%;
  margin: 0.5em auto;
  padding: 0px;
  display: inline-block;
}

.site_head .link {
  width: fit-content;
  display: inline-block;
  font-size: 0.6em;
  vertical-align: middle;
  text-decoration: underline;
}

.site_head .link.add {
  color: lightgreen;
  font-size: 1em;
  text-decoration: none;
}

.head2 {
  font-size: 1.5em;
  font-weight: 500;
  color: var(--head2c1);
}


div.text1  {
  color: var(--fontc1);
  margin: 1em  auto;
}

label {
  color: var(--fontc1);
}

.sort_by {
  color: var(--headc1);
}

.footer {
  background: #999;
  color: white;
  margin: 1em auto;
  padding: 0 1em;
  width:98%;
  font-size:0.6em;
}


/* --------------- auth forms --------------*/

.auth_container .info_table {
  border: solid 1px var(--fontc1);
}
.auth_container .info_table tr td {
  border: solid 1px var(--fontc1);
  padding: 0.5em 1em;
  width: max-content;
}

.login_form {
  margin: 2em   auto 1em auto;
}

.login_form table tr td {
  padding: 0.5em;
}


.login_form input {
  width: 15em;
}

.login_form a{
  display: block;
  width: fit-content;
  margin: 1em auto;
}

.submit_success {
  color: var(--successc1) ;
  display: block;
  width: fit-content;
  margin: 1em auto;
}

.auth_container {
  color: var(--fontc1);
  display: block;
  width: fit-content;
  margin: 1em auto;
}

.warning_msg {
  width: fit-content;
  color: var(--fontc1);
  font-size: 1.5em;
  margin: 1em   auto 1em auto;
}
.error_msg {
  width: fit-content;
  color: var(--errorc1);
  margin: 1em   auto 1em auto;
}

.aspect-box {
    position: relative;
}

.aspect-box::before {
  display: block;
  content: "";
  width: 100%;
  padding-bottom: calc(100% / var(--aspect-ratio, calc(16/9)) );
  /* padding-bottom: calc(100% / var(--aspect-ratio, "16/9") );  not working, 16/9 or "16/9", has to use calc(16/9) */
}

.aspect-box > :first-child {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}


/*  ===== about === */
.about_container {
  width: 100%;
  min-height: 92vh;
  padding: 0 5%;
  background: var(--bodybgc1) ;
  border: solid 1px var(--bodybgc1);  /* odd: 0px will show more white_gap */
}


.privacy_container {
  width: 100%;
  background: var(--bodybgc1);
  border: solid 1px var(--bodybgc1);
}

.privacy_container div.privacy_text {
  width: 90%;
  margin: 20px auto;
}

.privacy_container div.privacy_text div {
  color: var(--fontc1);
  margin: 10px 0px ;
}

/*  contact */
.contact_container {
  width: fit-content;
  margin: 20px auto;
}

.contact_form {
  width: 90%;
  margin: 2em   auto 1em auto;
}

.contact_form input {
  margin-bottom: 0.5em;
}
.contact_form textarea {
  margin-bottom: 0.5em;
  min-height: 20em;
  color: var(--fontc1);
  border: 1px solid var(--fontc1);
}

.goto_sugguestions {
  margin: 1em;
}

.goto_sugguestions a {
  margin: 1em;
}

/* ############ paging ##############*/
.paging .paging_label {
  display: inline-block;
  width: fit-content;
  color: black;

}
.paging a, .paging span {
  text-align: center;
  display: inline-block;
  width: 1.2em;
  margin: 0em 0.5em;
}
.paging a  {
  color: blue;
}

.paging span {
  font-weight: bold;
}

/* ############ product ##############*/

.product_container {
  width: 95%;
  margin: 0.5em auto;
  min-height: 92vh;
}

.product_container .product  {
  background: #e0dede;
  padding: 1em;
  border-radius: 2.3em;
  height: 100%;
}

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

  .product_container .cat_tabs  {
    display: flex;
    overflow-x: auto;
  }
}


.product_container .cat_tab  {
  background-color: #cfd2e8;
  color: black;
  border-radius: 2.3em;
  width: fit-content;
  margin: 0.2em 0.1em;
  padding: 0.2em;
  display: inline-block;
  border: solid 1px green;
}

.product_container .product a {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.product img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 1em;
}

.product_container .product .product_name {
  font-size: 1em;
  height: 2.8em;
  max-width: 15em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
.product_container .product .product_name:hover {
  position: relative;
  height: fit-content;
  opacity: 1;
  z-index: 10;
}
*/
.product_container .product .price {
  color: #B12704!important;
  display: inline-block;
  width: fit-content;
  margin: 0 1em 0 0;
}
.product_container .product .list_price {
  color: #0c0c0c!important;
  text-decoration: line-through;
  width: fit-content;
  margin: 0 1em 0 0;
}

.product_container .product .rating_cnt {
  color: #5625ac;
}

/*  stores  */
.store_container {
  margin: 0.5em;
  min-height: 90vh;
}
.store_container .store_group_head {
  font-size: 2em;
  background: lightyellow;
  margin-top: 1em;
  padding-left: 1em;
}

.store_container .store_group_menu a {
  display: inline-block;
  width: fit-content;
  margin: 0.2em 0.1em;
  padding: 0.2em;
  border: solid 1px green;
  color: var(--fontc1);
  background-color: #cfd2e8;
  border-radius: 2.3em;
}

.store_container .store img {
  display: block;
  max-width: 100%;
  margin: 0.2em auto;
  border-radius: 1.3em;
}

.store_container .store a {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

/* ============= blog  =============*/

.blog_container {
  width: 100%;
  min-height: 92vh;
  padding: 0 5%;
  background: var(--bodybgc1) ;
  border: solid 1px var(--bodybgc1);  /* odd: 0px will show more white_gap */
}
/* ============= review  =============*/

.review_search {
  margin-left: auto;
  margin-right: 0;
  display: block;
  width: fit-content;

}
.review_search input {
  background: lightyellow;
  padding: 0.2em;
  border-radius: 1em;
}
.review_search button {
  background: rgb(185, 239, 185);
  padding: 0.2em;
  border-radius: 0.5em;
}

.reviews .review  {
  margin: 1em;
  background: #e3e3d6;
  padding: 1em;
}

.reviews  .review_sep {
  clear: both;
}

.reviews .review .title {
  color: blue;
  font-size: 1.5em;

}

.reviews .review img {
  float: left;
  margin: 1em;
}

.post_m_body img {
  float: left;
  margin: 1em;
}
/* ============= article  =============*/
article  {
  width: 90%;
  background: var(--black1);
  color: var(--fontc1);
  margin: 0.5em  auto 0.5em auto;
}

article header {
  width: 100%;
  color: rgb(32, 85, 218);
  font-size: 1.8em;
  font-weight: 800;
}

article label {
  width: 100%;
  padding: 0.5em 1em ;
  background-color: rgb(154, 224, 154);
}

article .post_body {
  width: 100%;
  padding: 0.5em 1em ;
}

article .post_body h1 {
  font-size: 1.2em;
  padding-top: 1.5em;
  clear: both;
}

article .post_body h1.product {
  color: black;
}

article .post_body h1.head1 {
  color: rgb(52, 162, 52);
}

article .post_body ul {
  list-style-type: circle;
  margin: 1.5em;
  clear: both;

}

article .post_body table {
  border: solid 1px #ceb6b6;
  margin: 1em;
}

article .post_body table td, article .post_body table th  {
  border: solid 1px #ceb6b6;
  padding: 0.1em 1em;
}

article .post_body .product img {
  float: left;
}
article header {
  display: flex;
  font-size: 1em;
}

article header div.title  {
  flex-shrink: 0;
  flex-grow: 6;
  padding-left: 1em;
}

article header div.web_path {
  flex-grow: 1;
  color: green;
}
article header div.len {
  flex-grow: 1;
}

article header div.username {
  flex-grow: 3;
  color: green;
}

article header div.link {
  flex-grow: 1;

}

div.deleted_at {
  color: red;
}