﻿
@media all and (min-width: 769px) {
  :root {
    --layout-outer-width: 94%;
  }
  /* Reverse Layout for Even Items */
  .spice-categories .spice-item:nth-child(even) {
    flex-direction: row-reverse;
  }

  /**** GLOBAL ***/


  html:not(.html-home-page) .master-wrapper-content,
  .html-home-page .topic-block,
  .html-home-page .home-page-category-grid,
  .html-home-page .news-list-homepage,
  .html-home-page .home-page-polls,
  .html-home-page .home-page-product-grid {
    width: var(--layout-outer-width);
  }

  .home-page-polls li {
    min-width: 100px;
  }


  /**** GLOBAL TABLES ***/


  .cart tr {
    width: 31.33333%;
    margin: 40px 1% 0;
  }

    .cart tr:nth-child(2n+1) {
      clear: none;
    }

    .cart tr:nth-child(3n+1) {
      clear: both;
    }

  .order-details-page .data-table tr {
    width: 31.33333%;
    margin: 40px 1% 0;
  }

    .order-details-page .data-table tr:nth-child(2n+1) {
      clear: none;
    }

    .order-details-page .data-table tr:nth-child(3n+1) {
      clear: both;
    }


  /*** HEADER ***/


  .header-selectors-wrapper > div {
    width: 20%;
  }


  /*** FOOTER ***/


  .footer-block {
    display: inline-block;
    width: 25.33333%;
    margin: 0 4%;
    vertical-align: top;
  }

    .footer-block .title {
      margin: 0 0 15px;
      background: none;
      padding: 0;
      cursor: auto;
    }

    .footer-block .list {
      display: block !important; /* prevents toggle display:none on resize */
      background: none;
      padding: 0;
    }
    .footer-block .title strong {
        font-weight: 700;
    }
    .footer-block .list li {
      padding: 5px 0;
      font-size: 18px;
    }

      .footer-block .list a {
        display: inline;
        padding: 0;
      }

  
/*footer ui*/
  .follow-us {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding-block: 40px;
    width: 100%;
  }

  .follow-us > div {
    width: calc(33% - 20px);
    margin: 0;
    text-align: center;
  }

  .follow-us .title {
    text-align: center;
  }

  .newsletter-email {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
    border: 0;
  }
  /*** Homepage Categories TABLES ***/
  /* Target only the home page category grid */
  .home-page-category-grid .category-item {
    overflow: hidden;
  }

  .home-page-category-grid .item-box .picture,
  .home-page-category-grid .item-box .picture a {
    position: static;
    margin: 0;
  }

  .home-page-category-grid .item-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

    /* Style for each item */
    .home-page-category-grid .item-grid .item-box {
      width: 100%;
      margin: 0;
      grid-column: span 2;
      grid-row: span 1;
    }

  .home-page-category-grid .item-box:nth-child(5n + 4),
  .home-page-category-grid .item-box:nth-child(5n + 5) {
    grid-column: span 3;
    grid-row: span 1;
  }
  /* Every first item in a set of 5 spans 2 columns and 2 rows */
  .home-page-category-grid .item-box:nth-child(5n + 1) {
    grid-column: span 4;
    grid-row: span 2;
  }

  /*** CATEGORY ***/


  .product-selectors {
    text-align: left;
  }

  .product-selectors .product-viewmode {
    display: inline-block;
    float: right;
  }

  .product-selectors .product-viewmode span {
    display: none;
  }

  .product-selectors .product-viewmode a {
    display: inline-block;
    width: 24px;
    height: 32px;
    margin: 0 0 0 12px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
  }

    .product-selectors .product-viewmode a.grid {
      background-image: url('../images/view-grid.png');
    }

    .product-selectors .product-viewmode a.list {
      background-image: url('../images/view-list.png');
    }

    .product-selectors .product-viewmode a.selected {
      opacity: 1;
    }

  .item-box {
    width: 47%;
    margin: 0 1.5% 50px;
  }

  .category-grid .item-box:nth-child(2n+1) {
    clear: none;
  }

  .category-grid .item-box:nth-child(3n+1) {
    clear: both;
  }
    .item-box:nth-child(n+1) {
    clear: none;
  }

    .item-box:nth-child(2n+1) {
      clear: both;
    }

  .product-list .item-box {
    float: none;
    width: auto;
    margin: 0 5px 30px;
    padding-bottom: 30px;
  }

    .product-list .item-box:not(:last-child) {
      border-bottom: 1px solid #ddd;
    }

    .product-list .item-box .product-item:after {
      content: "";
      display: block;
      clear: both;
    }

    .product-list .item-box .picture {
      float: left;
      width: 220px;
    }

    .product-list .item-box:hover .picture a img,
    .product-list .item-box:focus .picture a img {
      opacity: 1;
    }

    .product-list .item-box .picture:hover a img,
    .product-list .item-box .picture:focus a img {
      opacity: 0.85;
    }

    .product-list .item-box .picture ~ .buttons,
    .product-list .item-box .picture + .details {
      margin: 0 0 0 240px;
    }

    .product-list .item-box .product-title {
      height: auto;
      padding: 10px 0;
      font-size: 18px;
    }

    .product-list .item-box .description {
      display: block;
      margin: 0 0 10px;
      line-height: 22px;
    }

    .product-list .item-box .prices {
      min-height: initial;
      margin: 0 0 15px;
    }

    .product-list .item-box .buttons {
    }

    .product-list .item-box .product-box-add-to-cart-button {
      width: auto;
      min-width: 150px;
      padding: 0 20px;
    }

    .product-list .item-box .add-to-compare-list-button,
    .product-list .item-box .add-to-wishlist-button {
      width: auto;
      padding-inline: 30px;
    }


  /*** PRODUCT PAGE ***/


  .gallery {
    width: 550px;
  }

  .variant-picture {
    float: left;
  }

    .variant-picture + .variant-overview {
      width: auto;
      margin: 0 0 0 240px;
    }

  .variant-overview {
    text-align: left;
  }


  /*** PRODUCT REVIEWS ***/


  .product-review-item .review-title {
    float: left;
    max-width: 600px;
  }

  .product-review-item .product-review-box {
    float: right;
  }

  .write-review .review-rating div {
    display: inline-block;
    margin: 0 0 0 5px;
    cursor: default;
    vertical-align: middle;
    font-size: 14px;
    height: 17px;
  }




  /*** REGISTRATION, LOGIN, ACCOUNT ***/


  .address-list-page .section,
  .order-list-page .section,
  .return-request-list-page .section {
    display: inline-block;
    width: 45%;
    margin: 20px 1%;
    vertical-align: top;
  }

  .recurring-payments {
    width: 100% !important;
    margin: 20px 0 !important;
  }


  /*** SHOPPING CART ***/


  .order-progress {
    padding: 20px;
  }

    .order-progress li {
      margin: 0 10px;
    }

    .order-progress a {
      min-width: 80px;
    }

  .cart-options .common-buttons {
    text-align: right;
  }

  .cart-options .checkout-attributes,
  .cart-options .selected-checkout-attributes {
    padding: 0 10px;
  }

  .cart-footer .totals {
    float: right;
    width: 45%;
    margin: 0 2.5%;
  }

  .cart-footer .terms-of-service {
    text-align: left;
  }

  .cart-footer .checkout-buttons,
  .cart-footer .addon-buttons {
    text-align: right;
  }

  .cart-footer .cart-collaterals {
    float: left;
    width: 45%;
    margin: 0 2.5%;
  }

    .cart-footer .cart-collaterals div,
    .cart-footer .cart-collaterals label {
      text-align: left;
    }

  .cart-footer .estimate-shipping label {
    display: block;
    margin: 0 0 10px;
  }

  .cart-footer .estimate-shipping .buttons {
    text-align: right;
  }


  /*** CHECKOUT ***/


  .checkout-page .selected-checkout-attributes {
    float: right;
    text-align: right;
  }

  .checkout-page .cart-footer .totals {
    max-width: 350px;
    margin: 0;
  }

  .checkout-page .address-grid {
    overflow: hidden;
  }

  .checkout-page .address-item {
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    width: 48%;
    margin: 0 1% 40px;
  }

  .shipping-method .method-list li,
  .payment-method .method-list li {
    display: inline-block;
    width: 25%;
    margin: 20px 2%;
    vertical-align: top;
  }

  .shipping-method .method-name {
    background-color: #f6f6f6;
    padding: 10px;
  }

  .payment-method .payment-logo {
    display: block;
    background-color: #f6f6f6;
    padding: 10px;
  }

  .payment-method .payment-details {
    display: block;
    width: auto;
    min-width: 0;
    margin: 10px 0 0;
    text-align: center;
  }

  .payment-info .info {
    padding: 30px 75px;
  }

  .order-review-data,
  .order-details-area,
  .shipment-details-area {
    overflow: hidden;
  }

    .order-review-data > div,
    .order-details-area > div,
    .shipment-details-area > div {
      float: left;
      width: 48%;
      margin: 0 1% 40px;
    }


  /*** ORDER DETAILS & SHIPPING DETAILS ***/


  .order-details-page .section.options {
    text-align: right;
  }

  .order-details-page .selected-checkout-attributes {
    padding: 0 10px;
  }

  .order-details-page .tax-shipping-info {
    text-align: right;
  }

  .order-details-page .totals {
    float: right;
    clear: both;
  }

  .shipment-details-page .tracking-number .tracking-url {
    color: var(--theme-color);
  }


  /*** BLOG & NEWS ***/


  .blog-posts .tags {
    float: right;
    width: 80%;
    text-align: right;
  }

  .blog-posts .buttons {
    float: left;
    width: 20%;
    text-align: left;
  }

  .new-comment {
    text-align: center;
  }

    .new-comment .buttons {
      text-align: center;
    }

  .comment-list .comment {
    display: table;
    width: 100%;
    margin: 0;
  }

    .comment-list .comment:last-child {
      border-bottom: 1px solid #ddd;
    }

  .comment-info {
    display: table-cell;
    width: 15%;
    margin: 0;
    vertical-align: top;
  }

    .comment-info .username {
      min-height: 40px;
      margin: 0;
      border: none;
      text-align: center;
    }

    .comment-info .avatar {
      border: none;
    }

      .comment-info .avatar img {
        max-width: 80%;
        max-height: 80%;
      }

  .comment-content {
    display: table-cell;
    width: 85%;
    border-left: 1px solid #ddd;
    vertical-align: top;
    text-align: left;
  }

  .comment-time {
    min-height: 40px;
    margin: 0;
    background-color: #f6f6f6;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: normal;
  }

  .comment-title {
    margin: 0 0 -20px;
    padding: 20px;
  }

  .comment-body {
    padding: 20px;
  }


  /*** FORUM & PROFILE ***/


  .forum-actions,
  .topic-actions {
    overflow: hidden;
  }

    .forum-actions .actions,
    .topic-actions .actions {
      float: left;
    }

    .forum-actions .pager,
    .topic-actions .pager {
      float: right;
      max-width: 450px;
    }

      .forum-actions .pager li,
      .topic-actions .pager li {
        margin: 2px 4px;
      }

      .forum-actions .pager.upper {
        display: block;
      }

    .topic-actions.lower .actions {
      display: block;
    }

  .topic-posts {
    margin: 0 0 30px;
  }

  .topic-post {
    display: table;
    width: 100%;
    margin: 0;
  }

    .topic-post .post-info {
      display: table-cell;
      width: 15%;
      margin: 0;
      vertical-align: top;
      text-align: left;
    }

    .topic-post .user-info {
      width: auto;
    }

    .topic-post .username {
      min-height: 40px;
      margin: 0;
      border: none;
      text-align: center;
    }

    .topic-post .avatar {
      margin: auto;
      border: none;
    }

      .topic-post .avatar img {
        max-width: 80%;
        max-height: 80%;
      }

    .topic-post .user-stats li {
      margin: 0;
    }

    .topic-post .send-pm {
      margin: 0 0 20px;
    }

    .topic-post .pm-button,
    .profile-info-box .pm-button {
      padding: 8px 16px;
      font-size: 13px;
    }

    .topic-post .post-content {
      display: table-cell;
      width: 85%;
      border-left: 1px solid #ddd;
      vertical-align: top;
      text-align: left;
    }

    .topic-post .post-head {
      min-height: 40px;
      overflow: hidden;
      background-color: #f6f6f6;
    }

    .topic-post .post-time {
      float: left;
      margin: 0;
      font-size: 14px;
      font-weight: normal;
    }

    .topic-post .post-actions {
      float: right;
      margin: 0;
    }

      .topic-post .post-actions a {
        margin: 0;
        line-height: 20px;
      }

      .topic-post .post-actions .manage-post a {
      }

      .topic-post .post-actions .quote-post a {
        min-width: 70px;
      }

      .topic-post .post-actions a.post-link-button {
        margin: 0 0 0 10px;
        border-left: 1px solid #ddd;
        text-align: center;
      }

    .topic-post .post-text {
      padding: 20px 5px;
    }

    .topic-post .post-vote {
      padding: 20px 0 20px 15px;
    }

  .forum-table th.replies,
  .forum-table th.views,
  .forum-table th.votes,
  .forum-table td.replies,
  .forum-table td.views,
  .forum-table td.votes {
    display: table-cell;
  }

  .forum-table td.image {
    max-width: none;
  }

    .forum-table td.image div {
      max-width: none;
      background-size: initial;
    }

  .ui-tabs-nav {
    text-align: left;
  }

    .ui-tabs-nav li {
      margin: 0 10px -1px 0;
      /*override jQuery UI styles, do not delete doubled properties*/
      margin: 0 10px -1px 0 !important;
    }

  .profile-info-box .avatar {
    float: left;
    margin: 0 15px 15px 0;
  }

  .profile-info-box .profile-stats {
    float: left;
    text-align: left;
  }

  .profile-info-box .title {
    text-align: left;
  }

  .profile-info-box .send-pm {
    clear: both;
    text-align: left;
  }
}
