@charset "utf-8";

/*
Theme Name: Torqua - Auto Parts Shop HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

Responsive stylesheet - desktop first: 1399 / 1199 / 991 / 767 / 575
*/

/*======================
(min-width: 1600px)
========================*/
@media (min-width: 1600px) {
  /* 1. General */
  .container {
    max-width: 1440px;
  }

  /* 8. Home One */
  .promo-split .promo {
    padding-left: calc((100vw - 1440px) / 2 + 12px);
  }

  /* 9. Home Two */
  .tq-wide .container {
    max-width: 1560px;
  }
}

/*======================
(min-width: 1960px)
========================*/
@media (min-width: 1960px) {
  /* 1. General */
  .container {
    max-width: 1560px;
  }

  /* 8. Home One */
  .promo-split .promo {
    padding-left: calc((100vw - 1560px) / 2 + 12px);
  }

  /* 9. Home Two */
  .tq-wide .container {
    max-width: 1760px;
  }
}

/*======================
(max-width: 1399px)
========================*/
@media (max-width: 1399px) {
  /* 1. General */
  .sec-pt-100 {
    padding-top: 90px;
  }
  .sec-pb-100 {
    padding-bottom: 90px;
  }

  /* 3. Header */
  .header-top .top-right > a:nth-child(1),
  .header-top .top-right > a:nth-child(3) {
    display: none;
  }

  /* 3. Header */
  .hm-brand {
    width: 230px;
  }
  .hm-cat {
    width: 190px;
  }

  /* 3. Header */
  .tq-nav > ul {
    gap: 28px;
  }
  .hn-garage .g-label {
    display: none;
  }

  /* 7. Components */
  .part-grid.cols-6 {
    --cols: 5;
  }

  /* 8. Home One */
  .promo-split .promo {
    padding-left: max(40px, calc((100vw - 1140px) / 2 + 12px));
  }
}

/*======================
(max-width: 1199px)
========================*/
@media (max-width: 1199px) {
  /* 3. Header */
  .header-top .top-right > a:nth-child(2) {
    display: none;
  }

  /* 3. Header */
  .hm-cat {
    display: none;
  }
  .hm-icon {
    width: 56px;
  }

  /* 3. Header */
  .tq-nav > ul {
    gap: 22px;
  }
  .tq-nav > ul > li > a {
    font-size: 13px;
  }
  .hn-garage b {
    max-width: 170px;
  }

  /* 7. Components */
  .part-grid.cols-6,
  .part-grid.cols-5 {
    --cols: 4;
  }
  .mini-grid.cols-4 {
    --cols: 2;
  }

  /* 7. Components */
  .cat-tiles.n-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cat-tiles.n-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 7. Components */
  .tq-selector.is-band {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .tq-selector.is-band .vs-go {
    flex-direction: row;
    align-items: center;
  }
  .tq-selector.is-band .vs-count {
    text-align: left;
  }

  /* 7. Components */
  .promo {
    min-height: 280px;
    padding: 40px;
  }

  /* 8. Home One */
  .hero-slider .swiper-slide {
    min-height: 560px;
  }
  .hero-price {
    font-size: 38px;
  }

  /* 9. Home Two */
  .h2-grid {
    grid-template-columns: 1fr;
  }
  .h2-panel .tq-selector .vs-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 16. Footer */
  .fn-row {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .fn-row .tq-social {
    grid-column: 1 / -1;
    padding: 0 0 24px;
  }
}

/*======================
(max-width: 991px)
========================*/
@media (max-width: 991px) {
  /* 1. General */
  .sec-pt-100 {
    padding-top: 78px;
  }
  .sec-pb-100 {
    padding-bottom: 78px;
  }
  .sec-pt-70 {
    padding-top: 60px;
  }
  .sec-pb-70 {
    padding-bottom: 60px;
  }

  /* 1. General */
  .tq-title {
    margin-bottom: 32px;
  }
  .tq-title.is-split {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* 3. Header */
  .header-main {
    padding: 12px 0;
  }
  .header-main .container {
    flex-wrap: wrap;
    height: auto;
    row-gap: 10px;
  }
  .hm-brand {
    flex: 1;
    width: auto;
    height: 56px;
    padding: 0 18px;
  }
  .hm-icons {
    height: 56px;
  }
  .hm-icon {
    border: 0;
    border-left: 1px solid var(--tq-line);
    border-top: 1px solid var(--tq-line);
    border-bottom: 1px solid var(--tq-line);
  }
  .hm-icon:last-child {
    border-right: 1px solid var(--tq-line);
  }
  .hm-search {
    order: 3;
    flex: 0 0 100%;
    height: 52px;
    border-left: 1px solid var(--tq-line);
  }
  .hm-go {
    width: 54px;
  }

  /* 3. Header */
  .header-nav {
    display: none;
  }

  /* 3. Header */
  .tq-header.is-sticky .header-main {
    padding: 8px 0;
  }
  .tq-header.is-sticky .hm-search {
    display: none;
  }

  /* 7. Components */
  .part-grid.cols-6,
  .part-grid.cols-5,
  .part-grid.cols-4 {
    --cols: 3;
  }
  .mini-grid.cols-3 {
    --cols: 2;
  }

  /* 7. Components */
  .make-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 7. Components */
  .tq-selector .vs-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* 8. Home One */
  .hero-stripe {
    width: 26%;
  }
  .hero-part {
    right: 4%;
    width: 34vw;
    opacity: 0.9;
  }
  .hero-part.is-wheel,
  .hero-part.is-oil {
    width: 30vw;
  }
  .hero-copy {
    max-width: 62%;
  }
  .hero-copy .tq-faces {
    display: none;
  }

  /* 8. Home One */
  .vb-head {
    flex-direction: column;
    gap: 8px;
  }

  /* 8. Home One */
  .promo-split {
    grid-template-columns: 1fr;
  }
  .promo-split .promo,
  .promo-split .promo + .promo {
    min-height: 340px;
    padding: 44px 32px;
  }

  /* 8. Home One */
  .bundle-row {
    grid-template-columns: 1fr;
  }
  .bundle-lead {
    min-height: 260px;
  }

  /* 9. Home Two */
  .promo-pair,
  .promo-trio {
    grid-template-columns: 1fr;
  }

  /* 9. Home Two */
  .cs-count {
    justify-content: flex-start;
  }
  .cs-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 9. Home Two */
  .tf-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* 10. Home Three */
  .hero-three .hero-slider .swiper-slide {
    min-height: 640px;
  }
  .h3-slab {
    width: 40%;
  }

  /* 10. Home Three */
  .deal-card {
    margin-left: 0;
  }

  /* 11. Shop Pages */
  .shop-side {
    order: 2;
  }

  /* 11. Shop Pages */
  .pd-gallery {
    position: static;
  }
  .pd-tabs {
    margin-top: 56px;
  }

  /* 11. Shop Pages */
  .tq-summary {
    position: static;
  }

  /* 12. Finder Pages */
  .oe-result {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .oe-buy {
    grid-column: 2;
  }

  /* 13. Fitting Pages */
  .fw-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 13. Fitting Pages */
  .steps-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 14. Company & Account Pages */
  .about-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 14. Company & Account Pages */
  .faq-side {
    position: static;
  }

  /* 14. Company & Account Pages */
  .acc-wrap {
    grid-template-columns: 1fr;
  }
  .acc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 14. Company & Account Pages */
  .auth-grid {
    grid-template-columns: 1fr;
  }
  .auth-side {
    min-height: 320px;
  }

  /* 15. Subheader */
  .tq-subheader {
    padding: 74px 0 70px;
  }
  .tq-subbar .sb-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* 16. Footer */
  /* below the columns, a band of its own */
  .tq-gears {
    top: auto;
    height: 220px;
    width: 100%;
  }
  .footer-main {
    padding: 64px 0 250px;
  }

  /* 16. Footer */
  .fs-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*======================
(max-width: 767px)
========================*/
@media (max-width: 767px) {
  /* 1. General */
  /* Bootstrap's widest gutter is wider than the container's side padding on a phone: rows would spill past the screen */
  .g-5,
  .gx-5 {
    --bs-gutter-x: 1.5rem;
  }

  /* 3. Header */
  .header-top .top-phone,
  .header-top .top-right > a {
    display: none;
  }
  .header-top .container {
    gap: 12px;
  }
  .header-top .top-right {
    gap: 12px;
  }
  .tq-dispatch {
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: normal;
  }
  .header-top .top-left {
    flex: 1;
    min-width: 0;
  }

  /* 7. Components */
  .part-grid.cols-6,
  .part-grid.cols-5,
  .part-grid.cols-4,
  .part-grid.cols-3 {
    --cols: 2;
  }
  .mini-grid.cols-4,
  .mini-grid.cols-3 {
    --cols: 1;
  }

  /* 8. Home One */
  .hero-slider .swiper-slide {
    align-items: flex-start;
    min-height: 640px;
  }
  .hero-stripe {
    top: auto;
    width: 100%;
    height: 190px;
  }
  .hero-part,
  .hero-part.is-wheel,
  .hero-part.is-oil {
    top: auto;
    bottom: 24px;
    right: 50%;
    width: auto;
    height: 210px;
    transform: translateX(50%);
  }
  .hero-copy {
    max-width: 100%;
    padding: 60px 0 0;
  }
  .hero-arrow {
    top: auto;
    bottom: 20px;
    margin-top: 0;
  }

  /* 9. Home Two */
  .hero-two .hero-slider .swiper-slide {
    min-height: 520px;
    align-items: flex-start;
  }
  .hero-two .hero-copy {
    padding: 46px 26px;
  }
  .h2-pack {
    top: auto;
    bottom: 30px;
    right: 50%;
    width: 56%;
    transform: translateX(50%);
  }
  .hero-two .hero-img.is-right {
    object-position: 80% bottom;
  }

  /* 10. Home Three */
  .hero-three .hero-slider .swiper-slide {
    min-height: 680px;
  }
  .h3-slab {
    top: auto;
    right: 0;
    width: 100%;
    height: 210px;
    transform: none;
  }
  .hero-three .hero-part,
  .hero-three .hero-part.is-wheel {
    top: auto;
    bottom: 22px;
    right: 50%;
    width: auto;
    height: 220px;
    transform: translateX(50%);
  }

  /* 11. Shop Pages */
  .bag-line,
  .bag-lines.is-wish .bag-line {
    grid-template-columns: 84px minmax(0, 1fr) 40px;
    gap: 14px;
  }
  .bag-line .bl-img {
    grid-row: span 2;
  }
  .bag-line .tq-qty,
  .bag-line .bl-total,
  .bag-line .tq-btn {
    grid-column: 2;
  }
  .bag-line .bl-remove {
    grid-column: 3;
    grid-row: 1;
  }

  /* 12. Finder Pages */
  .finder-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 12. Finder Pages */
  .track-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .track-steps li {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
  }
  .track-steps li::before {
    top: 44px;
    left: 21px;
    right: auto;
    width: 2px;
    height: 18px;
  }
  .track-steps small {
    flex-basis: 100%;
    padding-left: 58px;
    margin-top: -6px;
  }
  .ts-ico {
    margin-bottom: 0;
  }

  /* 16. Footer */
  .fn-row {
    grid-template-columns: 1fr;
  }
  .fn-title {
    padding: 26px 0 12px;
  }
  .fn-form {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--tq-line-2);
    margin-bottom: 26px;
  }
  .fn-form .form-status {
    left: 0;
    bottom: -24px;
  }
}

/*======================
(max-width: 575px)
========================*/
@media (max-width: 575px) {
  /* 1. General */
  .sec-pt-100 {
    padding-top: 64px;
  }
  .sec-pb-100 {
    padding-bottom: 64px;
  }
  .sec-pt-70 {
    padding-top: 52px;
  }
  .sec-pb-70 {
    padding-bottom: 52px;
  }
  .tq-lead {
    font-size: 17px;
  }

  /* 1. General */
  .tq-btn {
    height: 50px;
    padding: 0 22px;
  }

  /* 1. General */
  .tq-back-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }

  /* 2. Preloader */
  .tq-preloader .pre-plug {
    width: 150px;
  }
  .tq-preloader .pre-spark {
    left: 126px;
    width: 100px;
    height: 100px;
    margin-top: -50px;
  }
  .tq-preloader .pre-mark {
    width: 160px;
  }
  .tq-preloader .pre-stage {
    gap: 10px;
  }

  /* 3. Header */
  .hm-brand {
    gap: 14px;
    padding: 0 14px;
  }
  .hm-brand .tq-logo img {
    height: 24px;
  }
  .hm-icon.is-compare,
  .hm-icon.is-account {
    display: none;
  }
  .hm-icon {
    width: 52px;
    font-size: 17px;
  }

  /* 7. Components */
  .pc-img {
    padding: 18px 14px 6px;
  }
  .pc-body {
    padding: 12px 14px 16px;
  }
  .pc-name {
    font-size: 14px;
  }
  .pc-oe {
    display: none;
  }
  .pc-price b {
    font-size: 18px;
  }
  .pc-add {
    height: 46px;
    padding: 0 14px;
    font-size: 11px;
  }
  .pc-tools button {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  /* 7. Components */
  .cat-tiles.n-8,
  .cat-tiles.n-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cat-tile {
    min-height: 150px;
    padding: 18px 16px;
  }

  /* 7. Components */
  .make-tile {
    min-height: 150px;
    padding: 20px 18px;
  }
  .make-tile .mt-name {
    font-size: 19px;
  }
  .make-tile > i {
    top: 20px;
    right: 16px;
  }

  /* 7. Components */
  .tq-selector .vs-fields,
  .tq-selector.is-page .vs-fields {
    grid-template-columns: 1fr;
  }
  .tq-selector .vs-go,
  .tq-selector.is-band .vs-go {
    flex-direction: column;
    align-items: stretch;
  }
  .tq-selector .vs-submit {
    width: 100%;
  }

  /* 7. Components */
  .promo {
    min-height: 300px;
    padding: 32px 24px;
    align-items: flex-start;
  }
  .promo .pr-copy {
    max-width: 62%;
  }
  /* a photograph banner stacks on a phone: the copy, then the photo under it */
  .promo.is-photo {
    padding-bottom: 236px;
  }
  .promo.is-photo .pr-copy {
    max-width: 100%;
  }
  .promo.is-photo .pr-img,
  .promo.is-ink.is-photo .pr-img {
    top: auto;
    width: 100%;
    height: 210px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .promo .pr-img.is-cut {
    right: 10px;
    max-width: 44%;
    bottom: 24px;
    transform: none;
  }
  .promo:hover .pr-img.is-cut {
    transform: scale(1.05);
  }
  .promo .pr-price {
    font-size: 28px;
  }

  /* 8. Home One */
  .hero-title span {
    white-space: normal;
  }
  .hero-title {
    font-size: 40px;
  }
  .hero-price {
    font-size: 32px;
  }

  /* 8. Home One */
  .promo-split .promo,
  .promo-split .promo + .promo {
    padding: 36px 22px;
  }

  /* 8. Home One */
  .bm-tag {
    padding: 6px 9px;
    font-size: 11px;
  }
  .bm-tag small {
    display: none;
  }

  /* 9. Home Two */
  .h2-panel .tq-selector .vs-fields {
    grid-template-columns: 1fr;
  }
  .h2-panel {
    padding: 28px 20px;
  }

  /* 9. Home Two */
  .cs-steps {
    grid-template-columns: 1fr;
  }
  .cs-steps li {
    padding: 20px;
  }

  /* 10. Home Three */
  .tb-gauge {
    width: 150px;
    padding: 12px 14px;
  }
  .tb-read b {
    font-size: 26px;
  }

  /* 10. Home Three */
  .deal-clock span {
    min-width: 70px;
  }
  .deal-clock b {
    font-size: 34px;
  }

  /* 11. Shop Pages */
  .shop-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .sb-sort,
  .sb-sort .tq-select {
    width: 100%;
  }

  /* 11. Shop Pages */
  .pd-main {
    padding: 20px;
  }
  .pd-tablist button {
    flex: 1 1 50%;
    padding: 14px 12px;
    font-size: 12px;
  }
  .ps-row {
    flex-wrap: wrap;
  }
  .ps-dates {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .tq-table th,
  .tq-table td {
    padding: 12px 10px;
    font-size: 14px;
  }

  /* 12. Finder Pages */
  .finder-panel {
    padding: 28px 20px;
  }
  .finder-cats {
    grid-template-columns: 1fr;
  }

  /* 12. Finder Pages */
  .oe-result {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .oe-img {
    max-width: 160px;
  }
  .oe-buy {
    grid-column: auto;
  }
  .oe-guide {
    flex-direction: column;
  }

  /* 13. Fitting Pages */
  .fw-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .fw-choice {
    flex-wrap: wrap;
    padding: 14px;
  }
  .fw-price {
    flex-basis: 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding-left: 34px;
  }
  .fw-steps button {
    padding: 14px 12px;
    font-size: 12px;
  }

  /* 13. Fitting Pages */
  .garage-filters .tq-field {
    width: 100%;
  }
  .gf-count {
    margin-left: 0;
  }

  /* 13. Fitting Pages */
  .steps-row {
    grid-template-columns: 1fr;
  }

  /* 14. Company & Account Pages */
  .pa-nav {
    grid-template-columns: 1fr;
  }
  .pa-author {
    flex-direction: column;
  }
  .post-wide.is-quote {
    padding: 34px 26px;
  }

  /* 14. Company & Account Pages */
  .contact-box {
    padding: 30px 20px;
  }

  /* 14. Company & Account Pages */
  .acc-car {
    flex-wrap: wrap;
  }

  /* 14. Company & Account Pages */
  .auth-card {
    padding: 34px 22px;
  }
  .auth-side {
    padding: 34px 22px;
  }

  /* 14. Company & Account Pages */
  .bare-form {
    flex-direction: column;
  }

  /* 15. Subheader */
  .tq-subheader {
    padding: 58px 0 56px;
  }
  .tq-subheader .sub-lead {
    font-size: 16.5px;
  }

  /* 16. Footer */
  .fs-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 16. Footer */
  .fb-row {
    flex-direction: column;
    align-items: flex-start;
  }
}