// Product Page // # Contents // 1. Add Buttons // 1.1) Add To Cart // 1.1) Add To Wishlist // 1.1) Add To Compare // 2. Product Single Details // 2.1) Details // 2.2) Sticky // 2.3) Single Info List // 2.4) Filter // 2.5) Add to Cart Quantity // 2.6) Share // 3. Product Single Gallery // 3.1) Gallery // 3.2) Thumbnail // 3.3) Transparent Dots (Only used in product-full-width.html) // 3.4) Sliders // 3.5) Full Screen Toggler // 4. Product Single Tabs // 4.1) Tabs // 4.2) Description Content // 4.3) Tags Content // 4.4) Reviews Content // 5. Products Section - Related // 6. Responsive // # Variables $product-single-thumbnail-gutter: 3px !default; // 1. Add Buttons // 1.1) Add To Cart .cart-message { padding: .8rem 0 1.9rem 3px; &::before { content: "\f00c"; position: relative; margin-right: .6rem; top: 2px; font-size: 20px; font-weight: 900; font-family: 'Font Awesome 5 Free'; color: #0cc485; } span { color: $primary-color-dark; font-size: 1.6rem; } } .single-cart-notice { line-height: 24px; font-size: 1.6rem; color: $primary-color-dark; } .view-cart { padding: 14px 27px 13px; margin: 3px 0; height: 48px; font-family: $font-family; } .add-cart { padding: 12px 27px 10px 26px; font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; line-height: 24px; @if ($second-font-family != $shop-second-font-family) { font-family: $shop-second-font-family; } &:before { font-size: 1.8rem; line-height: 0; vertical-align: middle; margin-right: 8px; font-weight: 900; } } // 1.1) Add To Wishlist .add-wishlist { display: inline-flex; align-items: center; justify-content: center; padding: 17px 8px; color: $primary-color-dark; font-size: 1.2rem; font-weight: 700; font-family: $shop-second-font-family; letter-spacing: -.015em; text-transform: uppercase; white-space: nowrap; i { margin-right: 4px; font-size: 1.6rem; &:before { font-weight: 700; } } } .added-wishlist { i::before { content: '\e88a'; color: #da5555; } } // 1.1) Add To Compare .add-compare { &:before { content: '\e810'; font-size: 1.8rem; font-family: 'porto'; margin-right: 6px; } } // 2. Product Single Details // 2.1) Details // Products Widgets Container .product-widgets-container { margin-bottom: 3.8rem; .product-single-details { margin-bottom: 3px; } .section-sub-title { margin-bottom: 1.6rem; } figure { max-width: 75px; margin-right: .7rem; } .product-details { margin-bottom: 2px; } .ratings-container { margin-bottom: 1.2rem; margin-left: 0; } .product-title { font-size: 1.4rem; font-family: $font-family; } .product-price { font-size: 1.5rem; } } .product-single-container:not(.product-quick-view) { .product-action { .add-cart { &.added-to-cart { &:before { display: none; } &:after { margin-left: 8px; font-family: 'Font Awesome 5 Free'; content: "\f00c"; font-weight: 600; font-size: 1.6rem; } } } } } .product-single-details { margin-bottom: 1.1rem; .product-action { .add-cart { display: inline-flex; align-items: center; &:before { content: "\e8ba"; margin-top: -2px; font-family: "Porto"; font-weight: 600; font-size: 1.8rem; margin-right: 7px; } } } .sticky-sidebar & { margin-bottom: 2.7rem; } .product-title { margin-bottom: 1.1rem; color: $primary-color-dark; font-size: 3rem; font-weight: 700; letter-spacing: -.01em; width: calc( 100% - 70px ); @if ($second-font-family != $shop-second-font-family) { font-family: $shop-second-font-family; } } .product-nav { position: absolute; display: flex; top: 4px; right: 10px; &.top-0 { top: 0; } a { color: $primary-color-dark; } .product-prev, .product-next { float: left; margin-left: 2px; &.disabled > a { color: #999; cursor: no-drop; } &:hover .product-popup { display: block; } } a:hover { color: #333; } .product-link { display: flex; align-items: center; justify-content: center; font-size: 16px; width: 28px; height: 28px; line-height: 23px; border: 2px solid #e7e7e7; border-radius: 14px; text-align: center; text-decoration: none; font-family: 'porto'; } .product-prev .product-link::before { content: '\e819'; display: block; } .product-next .product-link::before { content: '\e81a'; display: block; } .product-popup { position: absolute; top: 31px; display: none; right: 0; font-size: 13px; z-index: 999; width: 110px; box-shadow: 0 5px 8px rgba(0,0,0,0.15); text-align: center; background-color: #fff; &::before { right: 36px; border-bottom: 7px solid #333; border-left: 7px solid transparent !important; border-right: 7px solid transparent !important; content: ""; position: absolute; top: -5px; } } .box-content { border-top: 3px solid #222529; display: block; padding: 10px 10px 11px; > span { -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: block; padding-top: 5px; line-height: 1.4em; font-size: 12px; font-weight: 600; text-align: center; color: #797876; } } .product-next .product-popup::before { right: 7px; } } .product-filters-container { padding-top: 2px; padding-bottom: 1.4rem; & + .price-box { margin-top: 2.2rem; margin-bottom: .8rem; } } .price-box { margin-bottom: 2.3rem; color: $primary-color-dark; font-weight: 600; font-family: $shop-second-font-family; } .product-filtered-price { display: none; margin-bottom: 1.3rem; margin-top: .7rem; } .new-price { color: $primary-color-dark; font-size: 2.4rem; letter-spacing: -0.02em; vertical-align: middle; line-height: 0.8; margin-left: 3px; } .product-price { color: $primary-color-dark; font-size: 2.4rem; letter-spacing: -.02em; vertical-align: middle; line-height: .8; } .old-price { position: relative; top: 2px; color: #a7a7a7; font-size: 1.9rem; font-weight: 600; vertical-align: middle; & + .product-price { margin-left: .4rem; } } .add-wishlist:before { margin-right: .3rem; } .short-divider { width: 40px; height: 0; border-top: 2px solid #e7e7e7; margin: 0 0 2.2rem; text-align: left; // align left for IE, Edge } .product-single-filter:last-child { display: none; margin-bottom: 1rem; margin-top: -2px; } .divider + .product-action { margin-top: -.5rem; } .product-action + .divider { margin-top: 1.6rem; } .ratings-container { margin-bottom: 2.1rem; display: flex; align-items: center; .product-ratings, .ratings { font-size: 1.3rem; } .product-ratings { height: 14px; margin-left: -1px; margin-right: 1px; &:before { color: #999; } } .ratings:before { color: #FD5B5A; } } .rating-link { color: #999; font-size: 1.3rem; font-weight: 400; padding-left: 1rem; &:hover { text-decoration: underline; } } .rating-link-separator { padding-left: .9rem; font-size: 1.3rem; } .product-desc { margin-bottom: 1.8rem; font-size: 1.6rem; letter-spacing: -.015em; line-height: 1.6875; a { color: $primary-color-dark; } } .product-action { padding: 1.5rem 0 1.6rem; border-top: 1px solid #e7e7e7; } .container { align-items: center; -ms-flex-align: center; img { max-width: 5rem; max-height: 5rem; margin-right: 2rem; } } .product-single-qty{ margin: .5rem .5rem .5rem 1px; .form-control { height: 48px; font-size: 1.6rem; font-weight: 700; } } .clear-btn { display: inline-block; background-color: #f4f4f4; margin-top: -3px; margin-left: -3px; padding: 5px 8px; font-size: 1rem; color: $body-text; &:hover { background-color: $primary-color; color: #fff; } } } .product-filters-container { select.form-control:not([size]):not([multiple]) { margin-bottom: 0; height: 42px; font-weight: 600; } .select-custom { max-width: 282px; width: 100%; &::after { right: 1.5rem; color: $primary-color-dark; } } } // 2.2) Sticky .product-single-container { // .added-wishlist { // &::before { // content: '\e88a'; // color: #da5555; // font-size: 1.6rem; // } // } .cart-sticky .sticky-header.fixed { top: 58px; box-shadow: none; border: 1px solid #e7e7e7; animation: none; } } main .sticky-header { &:not(.fixed) { .sticky-img, .sticky-detail { display: none; } &.container { padding-left: 0; padding-right: 0; } } &.fixed { .container, .container-fluid { display: flex; display: -ms-flexbox; align-items: center; -ms-flex-align: center; flex-wrap: wrap; -ms-flex-wrap: wrap; } .product-action { flex: 1; -ms-flex: 1; border: 0; margin: 0; padding: 0; min-width: 260px; text-align: right; } } .sticky-img img { margin: 0; max-width: 60px; max-height: 60px; } .sticky-detail { display: flex; margin-bottom: 5px; } .product-title { margin-right: 2rem; margin-bottom: 0; font-size: 16px; font-weight: 600; } .price-box { margin: 0; color: #2b2b2d; font-family: 'Oswald', 'Poppins'; font-weight: 400; line-height: normal; } .old-price { font-size: 1.4rem; } .product-price { font-size: 1.8rem; } .ratings-container { display: block; line-height: 24px; } .product-ratings:before { color: rgba(0,0,0,0.16); } } .product-both-info { .row { .col-lg-12 { margin-bottom: 12px; } } .product-single-details { margin-top: 0; .product-desc { border-bottom: 0; } } .product-single-gallery .label-group { left: 1.8rem; } } // 2.3) Single Info List .single-info-list { margin-bottom: 1.7rem; padding: 0; font-size: 1.2rem; line-height: 1.5; letter-spacing: .005em; text-transform: uppercase; li { margin-bottom: 1rem; letter-spacing: .001em; strong { color: $primary-color-dark; letter-spacing: 0; } } } // 2.4) Filter .product-single-filter { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin-bottom: 1rem; label { margin-right: 4.2rem; min-width: 5rem; margin-bottom: 0; color: $body-text; font-weight: 400; font-family: $shop-font-family; letter-spacing: .005em; text-transform: uppercase; } .config-swatch-list { display: inline-flex; margin: 0; } .config-size-list li { margin-bottom: 0; margin-right: 0; color: $body-text; a { margin: 3px 6px 3px 0; min-width: 3.2rem; height: 2.6rem; border: 1px solid #eee; color: inherit; font-size: 1.1rem; font-weight: 500; line-height: 2.6rem; background-color: #fff; &:not(.disabled):hover { border-color: $primary-color; background-color: $primary-color; color: #fff; } &.disabled { cursor: not-allowed; text-decoration: none; background-color: transparent; opacity: 0.5; } &.filter-color { height: 2.8rem; min-width: 2.8rem; } } &.active a { border-color: $primary-color; outline: none; color: #fff; background-color: $primary-color; // color: #21293c; &.filter-color:before { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: 'porto'; font-size: 1.1rem; line-height: 1; content: '\e84e'; } } } .config-img-list li { a { height: 100%; } img { width: 30px; height: 30px; } } &.product-single-qty { max-width: 148px; max-height: 7.5rem; border-bottom: 0; } } // 2.5) Add to Cart Quantity .product-single-qty label { color: $primary-color-dark; font-weight: 600; font-size: 1.5rem; } // 2.6) Share .product-single-share { display: -ms-flexbox; display: flex; margin-top: .7rem; -ms-flex-align: center; align-items: center; flex-wrap: wrap; -ms-flex-wrap: wrap; label { margin-right: 1.2rem; margin-bottom: .5rem; color: $primary-color-dark; font-weight: 600; font-size: 1.4rem; line-height: 1.1; font-family: $shop-font-family; letter-spacing: .005em; text-transform: uppercase; } .social-icons { margin-top: 2px; &.vertical { display: flex; flex-direction: column; .social-icon { border-radius: 0; } } } .social-icon { line-height: 2em; border: 2px solid transparent; margin: 0.2857em 1px 0.2857em 0; } } .product-single-share:not(.icon-with-color) { .social-icon { border-radius: 50%; &:not(:hover):not(:active):not(:focus) { color: $primary-color-dark; background-color: transparent; border-color: #e7e7e7; } } } // 3. Product Single Gallery // 3.1) Gallery .product-single-gallery { margin-bottom: 3.3rem; .sticky-slider:not(.sticked) { position: relative !important; } a { display: block; } img { display: block; width: 100%; max-width: none; } .prod-thumbnail { .owl-nav { font-size: 1.6rem; color: $primary-color; .owl-prev { left: 1.5rem; } .owl-next { right: 1.5rem; } } } .owl-nav { font-size: 2.8rem; .owl-prev { left: 2.5rem; } .owl-next { right: 2.5rem; } button { transition: opacity .5s; } } .product-item { position: relative; z-index: 2; &:not(:last-child) { margin-bottom: 4px; } &:hover .prod-full-screen { opacity: 1; } } .product-single-grid { margin-bottom: 3.6rem; } .label-group { position: absolute; z-index: 100; top: 1.1rem; left: 1.1rem; } .product-label { display: block; text-align: center; margin-bottom: 5px; text-transform: uppercase; padding: 7px; color: #fff; font-weight: 600; font-size: 12px; font-weight: 700; line-height: 1; border-radius: 12px; &.label-hot { background-color: #2ba968; } &.label-sale { background-color: #da5555; } &.label-new { background-color: #08c; } } } // 3.2) Thumbnail .prod-thumbnail { display: flex; display: -ms-flexbox; margin: 8px 0 0; padding: 0 1px; > .owl-dot { flex: 0 0 25%; max-width: 25%; padding: 4px; } &.owl-theme .owl-nav [class*='owl-']:hover { color: $primary-color; } img { width: 100%; cursor: pointer; } .owl-dot.active img, img:hover { border: 2px solid #21293c; } } // 3.3) Transparent Dots // Only used in product-full-width.html .transparent-dots { position: absolute; top: 1.6rem; left: 2.6rem; width: 110px; margin: 0; padding: 0; z-index: 99; .owl-dot { flex: 1; max-width: 108px; margin-bottom: 2px; img { border: 0; border: 1px solid rgba(0,0,0,0.1); transition: border-color .2s; } &.active, &:hover { img { border: 1px solid $primary-color; transition: border-color .2s; } } } } // 3.4) Sliders .product-slider-container:not(.container) { position: relative; padding-left: 1px; padding-right: 1px; &:hover { .prod-full-screen { opacity: 1; } } button.owl-prev, button.owl-next { &:not(.disabled) { opacity: 1; } } } // 3.5) Full Screen Toggler .prod-full-screen { position: absolute; right: 2rem; bottom: 1.7rem; transition: all .5s; outline: none; opacity: 0; z-index: 1; i { color: #000; font-size: 1.4rem; cursor: pointer; } } // 4. Product Single Tabs // 4.1) Tabs .product-single-tabs { .tab-pane { padding-top: 3rem; padding-bottom: 3rem; color: #7b858a; line-height: 1.92; } .sticky-header { height: auto; } .nav.nav-tabs .nav-link { color: #818692; &.active { color: $primary-color-dark; } } .nav.nav-tabs .nav-link { font-family: $shop-font-family; font-size: 1.3rem; &:hover, &.active { border-bottom-color: $primary-color-dark; } } .nav-item { font-size: 1.3rem; } } .scrolling-box .tab-pane + .tab-pane { margin-top: 3.5rem; border-top: 2px solid #dae2e6; } // 4.2) Description Content .product-size-content { padding-top: 2rem; padding-bottom: .5rem; img { margin: 0 auto 2rem; } } .product-desc-content { margin-bottom: 2.5rem; .feature-icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 1.9rem; border-style: solid; border-width: 2px; width: 64px; height: 64px; line-height: 60px; border-radius: 60px; font-size: 28px; color: $primary-color; background: transparent; border-color: $primary-color; } .feature-box { p { font-size: 14px; line-height: 27px; color: #4a505e; letter-spacing: 0; } h3 { margin-bottom: .8rem; font-size: 1.4rem; } } p { margin-bottom: 2.3rem; letter-spacing: .005em; } ul, ol { margin-bottom: 2.4rem; padding-left: 7.4rem; letter-spacing: .005em; position: relative; padding-top: 2px; } li { margin-bottom: 9px; letter-spacing: 0; &:before { content: '\f058'; position: absolute; left: 4rem; display: inline-block; margin-top: -2px; vertical-align: middle; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 1.8rem; color: #21293c; font-size: 1.6rem; } } img.float-right, img.float-left { max-width: 50%; } img { padding-top: 4px; } .feature-box i { display: inline-block; font-size: 2.8rem; float: none; margin-bottom: 0; margin-top: 3px; } .feature-box-content { margin-left: 0; } } // 4.3) Tags Content .table.table-striped { margin-top: 2rem; margin-bottom: 5.9rem; & td, & th { padding: 1.1rem 1.2rem; } tr:nth-child(odd){ background-color: #f9f9f9 } } .product-tags-content { h4 { margin: 0 0 2rem; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; } form { margin-bottom: 2rem; } .form-group { display: -ms-flexbox; display: flex; -ms-flex-align: stretch; align-items: stretch; } .form-control{ margin-right: 10px; } .btn { padding-top: .5rem; padding-bottom: .5rem; } } // 4.4) Reviews Content .product-reviews-content { padding-top: 2px; padding-bottom: 2.5rem; line-height: 1.92; .required { color: $primary-color-dark; } .reviews-title { margin-bottom: 1.6rem; font-size: 2rem; font-weight: 400; & + p { padding-bottom: .4rem; letter-spacing: 0.005em; } } .ratings-container { margin: -3px -2px .5rem 0; } .divider { border-top: 1px solid #e7e7e7; margin: 4rem 0; } .comments .comment-block { padding-bottom: 2.3rem; background-color: #f5f7f7; } } .comment-container { display: flex; display: -ms-flexbox; padding: 29px 0 8px; &:not(:first-child) { border-top: 1px solid #e7e7e7; } .comment-avatar { flex: 1 0 auto; padding: 0 22px 5px 8px; } img { border-radius: 10rem; } .ratings-container { margin-bottom: 6px; } .product-ratings, .ratings { font-size: 14px; } .product-ratings:before { color: #999; } .ratings:before { color: #FD5B5A; } .comment-info { font-family: $shop-font-family; font-size: 1.4rem; line-height: 1; letter-spacing: -.02em; } .avatar-name { display: inline; font-family: inherit; font-size: inherit; } .comment-text { letter-spacing: -0.015em; } } .add-product-review { padding-top: 5px; .custom-checkbox .custom-control-input:checked ~ .custom-control-label:after { top: 4px; left: 2px; } form { padding: 3.5rem 2rem 3.3rem; border-radius: 3px; background-color: #f4f4f4; } h3 { margin-bottom: 1.6rem; font-size: 2rem; font-weight: 400; letter-spacing: -.01em; } label { display: block; font-family: $font-family; font-size: 1.4rem; line-height: 1; margin-bottom: 1.1rem; } .rating-stars { margin-bottom: 1rem; } .form-control { margin-top: 1.4rem; margin-bottom: 1.6rem; font-size: 1.4rem; max-width: 100%; height: 37px; } textarea.form-control { min-height: 170px; } .btn { padding: .55em 1rem .5em; font-weight: 400; text-transform: none; font-family: $font-family; } .custom-control-label { letter-spacing: .005em; line-height: 1.9; &:before, &:after { top: 6px; left: 0; width: 15px; height: 15px; font-size: 1.2rem; font-weight: 300; } } .custom-checkbox .custom-control-input:checked ~ .custom-control-label:before { background-color: #0075ff; border-color: #0075ff; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label:after { color: #fff; } .custom-control { padding-left: 2.2rem; margin-bottom: 1rem; margin-top: -6px; } } .rating-stars { display: flex; display: -ms-flexbox; position: relative; height: 14px; font-size: 1.4rem; margin-bottom: 2.8rem; a { color: #706f6c; text-indent: -9999px; letter-spacing: 1px; width: 16px; } a:before { content: ''; position: absolute; left: 0; height: 14px; line-height: 1; font-family: 'Font Awesome 5 Free'; text-indent: 0; overflow: hidden; white-space: nowrap; } a.active:before, a:hover:before { content: '\f005\f005\f005\f005\f005'; font-weight: 900; } .star-1 { z-index: 10; } .star-2 { z-index: 9; } .star-3 { z-index: 8; } .star-4 { z-index: 7; } .start-5 { z-index: 6; } .star-1:before { width: 16px; } .star-2:before { width: 32px; } .star-3:before { width: 48px; } .star-4:before { width: 64px; } .star-5:before { content: '\f005\f005\f005\f005\f005'; } } // 5. Products Section - Related .products-section { padding-top: 3.8rem; padding-bottom: 3rem; .owl-carousel.dots-top { .owl-dots { margin: 0px -2px 3.5rem; span { border-color: rgba(0,68,102,.4); } } .owl-dot.active span { border-color: $primary-color; } } .product-title { margin-bottom: 4px; } .price-box { margin-bottom: 1.4rem; } h2 { font-family: "Poppins"; padding-bottom: 1rem; border-bottom: 1px solid #e7e7e7; margin-bottom: 3.4rem; font-size: 1.8rem; line-height: 22px; letter-spacing: -.01em; text-transform: uppercase; } &.pt-sm { padding-top: 2.5rem; } } //product-right-sidebar .product-sidebar-right { margin-bottom: 1.7rem; .product-single-gallery { margin-bottom: 2.7rem; } .product-single-details { margin-bottom: 0.6rem; } .product-desc-content { p { margin-bottom: 1.3rem; letter-spacing: .005em; } ul { margin-bottom: 2rem; padding-left: 5.8rem; } li::before { left: 2.4rem; } } } .products-section { .container-fluid { padding-right: 20px; padding-left: 20px; } } //Custom Product-filters .custom-product-filters { .config-size-list li a { height: 28px; font-size: 13px; border: 1px solid #e9e9e9; color: #222529; background-color: #f4f4f4; } .config-color-list { img { width: 30px; height: 30px; } li a { height: 100%; } } } .single-product-custom-block .porto-heading { padding: 0.85em 2em; margin-bottom: 1.7rem; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1); margin-right: 20px; font-family: $font-family; font-weight: 600; font-size: 1.2rem; } //Custom Product Single Share .custom-product-single-share { position: absolute; top: 0; right: 0rem; .social-icon { display: block; margin: 0; margin-bottom: 2px; border-radius: 0; } } //Custom product-single-tabs .custom-product-single-tabs { padding: 7rem 0 3rem; .add-product-review form { background-color: #f7f7f7; } .product-desc-content { ul, ol { margin-bottom: 2rem; padding-left: 5.8rem; } li::before { left: 2.4rem; } p { margin-bottom: 1.3rem; } } .nav.nav-tabs { .nav-link { font-size: 1.5rem; padding: 1.1rem 0 1rem; margin-right: 1.5rem; background-color: transparent; } } } .product-single-tab-two { .product-desc-content { p { margin-bottom: 1.3rem; } ul { margin-bottom: 2rem; padding-left: 5.8rem; } li::before { left: 2.4rem; } } } .product-left-sidebar { .product-single-details { margin-bottom: .8rem; } } .table.table-size { thead tr th, tbody tr td { border: 0; color: #21293c; font-size: 1.4rem; letter-spacing: .005em; text-transform: uppercase; } thead { tr { th { padding: 2.8rem 1.5rem 1.7rem; background-color: #f4f4f2; font-weight: 600; } } } tbody { tr { td { padding: 1.1rem 1.5rem; background-color: #fff; font-weight: 700; } &:nth-child(2n) { td { background-color: #ebebeb; } } } } } // 6. Responsive @include mq(xl, max) { .transparent-dots { width: 90px; } } @include mq(md) { .custom-product-single-tabs { .nav.nav-tabs { .nav-item { margin-bottom: -3px; } .nav-link { padding: 1.1rem 0 1rem; font-size: 1.8rem; margin-right: 1.5rem; } } } .products-section { padding-top: 4.8rem; padding-bottom: 3.6rem; } .product-both-info .product-single-share { -ms-flex-pack: end; justify-content: flex-end; } .add-product-review form { padding-left: 3rem; padding-right: 3rem; } .product-both-info-bottom .col-md-4:last-child strong { order: 2; margin-left: 20px; margin-right: 0 } } @include mq(lg) { .product-both-info { .row { .col-lg-12 { margin-bottom: 4px; } } } .main-content { .col-lg-7 { -ms-flex: 0 0 54%; flex: 0 0 54%; max-width: 54%; } .col-lg-5 { -ms-flex: 0 0 46%; flex: 0 0 46%; max-width: 46%; } } .product-full-width { padding-right: 3.5rem; .product-single-details .product-title { font-size: 4rem; } } .table.table-size { thead tr th { padding-top: 2.9rem; padding-bottom: 2.9rem; } thead tr th, tbody tr td { padding-right: 4.2rem; padding-left: 3rem; } } } @include mq(xl) { .product-both-info { .product-single-share { margin-top: -13px; } } } @include mq(lg, max) { .single-product-custom-block { margin-right: 4rem; .porto-heading { padding: 0.85em 1em; margin-bottom: 0.7rem; margin-right: 1rem; } } } @media (min-width: 992px) and (max-width: 1199px) { .product-all-icons.product-action { .product-single-qty { margin-right: 50%; margin-bottom: 1.2rem; } } } @include mq(sm) { .product-tags-content .form-control { width: 250px; } } @include mq(md, max) { .product-size-content .table.table-size { margin-top: 3rem; } } @include mq(sm, max) { .transparent-dots { width: 70px; } .rating-stars a:before { line-height: 1.2; } .ratings-container { .ratings, .product-ratings { line-height: 1.2; } } } @media (max-width: 480px) { .pg-vertical { .product-thumbs-wrap { height: 165px; } .vertical-thumbs { max-width: 48px; } .product-slider-container { max-width: calc(100% - 53px) } } .product-size-content .table.table-size { th, td { padding-left: 1rem; padding-right: .5rem; font-size: 1.2rem; } } .product-reviews-content .reviews-title { font-size: 1.7rem; } .custom-product-single-tabs { .nav.nav-tabs { .nav-item:not(:last-child) { margin-right: 0; } .nav-link { font-size: 1.4rem; } } } }