/** * woocommerce-layout-grid.scss * Applies layout to the default WooCommerce frontend design */ /** * Imports */ /** * Deprecated * Fallback for bourbon equivalent */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Use bourbon mixin instead `@include transform(scale(1.5));` */ /** * Deprecated * Use bourbon mixin instead `@include box-sizing(border-box);` */ /** * Objects */ /** * WooCommerce CSS Variables */ /** * Astra Theme compatibility with WooCommerce */ /*---------- Media Query min-width Structure ----------*/ /*---------- Media Query max-width Structure ----------*/ /*---------- Break-point min-width Structure ----------*/ /*---------- Break-point max-width Structure ----------*/ /** * Styling begins */ .woocommerce, .woocommerce-page { /** * General layout styles */ /** * Product page */ /** * Product loops */ /** * Cart page */ /** * Cart sidebar */ /** * Forms */ /** * oEmbeds */ } .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-error .button, .woocommerce .woocommerce-info .button, .woocommerce-page .woocommerce-message .button, .woocommerce-page .woocommerce-error .button, .woocommerce-page .woocommerce-info .button { float: right; } .woocommerce .col2-set, .woocommerce-page .col2-set { *zoom: 1; width: 100%; } .woocommerce .col2-set::before, .woocommerce .col2-set::after, .woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after { content: ' '; display: table; } .woocommerce .col2-set::after, .woocommerce-page .col2-set::after { clear: both; } .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 { float: left; width: 48%; } .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { float: right; width: 48%; } .woocommerce img, .woocommerce-page img { height: auto; max-width: 100%; } .woocommerce div.product div.images, .woocommerce #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce-page #content div.product div.images { float: left; width: 48%; } .woocommerce div.product div.thumbnails, .woocommerce #content div.product div.thumbnails, .woocommerce-page div.product div.thumbnails, .woocommerce-page #content div.product div.thumbnails { *zoom: 1; } .woocommerce div.product div.thumbnails::before, .woocommerce div.product div.thumbnails::after, .woocommerce #content div.product div.thumbnails::before, .woocommerce #content div.product div.thumbnails::after, .woocommerce-page div.product div.thumbnails::before, .woocommerce-page div.product div.thumbnails::after, .woocommerce-page #content div.product div.thumbnails::before, .woocommerce-page #content div.product div.thumbnails::after { content: ' '; display: table; } .woocommerce div.product div.thumbnails::after, .woocommerce #content div.product div.thumbnails::after, .woocommerce-page div.product div.thumbnails::after, .woocommerce-page #content div.product div.thumbnails::after { clear: both; } .woocommerce div.product div.thumbnails a, .woocommerce #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a { float: left; width: 30.75%; margin-right: 3.8%; margin-bottom: 1em; } .woocommerce div.product div.thumbnails a.last, .woocommerce #content div.product div.thumbnails a.last, .woocommerce-page div.product div.thumbnails a.last, .woocommerce-page #content div.product div.thumbnails a.last { margin-right: 0; } .woocommerce div.product div.thumbnails a.first, .woocommerce #content div.product div.thumbnails a.first, .woocommerce-page div.product div.thumbnails a.first, .woocommerce-page #content div.product div.thumbnails a.first { clear: both; } .woocommerce div.product div.thumbnails.columns-1 a, .woocommerce #content div.product div.thumbnails.columns-1 a, .woocommerce-page div.product div.thumbnails.columns-1 a, .woocommerce-page #content div.product div.thumbnails.columns-1 a { width: 100%; margin-right: 0; float: none; } .woocommerce div.product div.thumbnails.columns-2 a, .woocommerce #content div.product div.thumbnails.columns-2 a, .woocommerce-page div.product div.thumbnails.columns-2 a, .woocommerce-page #content div.product div.thumbnails.columns-2 a { width: 48%; } .woocommerce div.product div.thumbnails.columns-4 a, .woocommerce #content div.product div.thumbnails.columns-4 a, .woocommerce-page div.product div.thumbnails.columns-4 a, .woocommerce-page #content div.product div.thumbnails.columns-4 a { width: 22.05%; } .woocommerce div.product div.thumbnails.columns-5 a, .woocommerce #content div.product div.thumbnails.columns-5 a, .woocommerce-page div.product div.thumbnails.columns-5 a, .woocommerce-page #content div.product div.thumbnails.columns-5 a { width: 16.9%; } .woocommerce div.product div.summary, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.summary { float: right; width: 48%; clear: none; } .woocommerce div.product .woocommerce-tabs, .woocommerce #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs, .woocommerce-page #content div.product .woocommerce-tabs { clear: both; } .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce #content div.product .woocommerce-tabs ul.tabs, .woocommerce-page div.product .woocommerce-tabs ul.tabs, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs { *zoom: 1; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after, .woocommerce #content div.product .woocommerce-tabs ul.tabs::before, .woocommerce #content div.product .woocommerce-tabs ul.tabs::after, .woocommerce-page div.product .woocommerce-tabs ul.tabs::before, .woocommerce-page div.product .woocommerce-tabs ul.tabs::after, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs::before, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after { content: ' '; display: table; } .woocommerce div.product .woocommerce-tabs ul.tabs::after, .woocommerce #content div.product .woocommerce-tabs ul.tabs::after, .woocommerce-page div.product .woocommerce-tabs ul.tabs::after, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after { clear: both; } .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce #content div.product .woocommerce-tabs ul.tabs li, .woocommerce-page div.product .woocommerce-tabs ul.tabs li, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li { display: inline-block; } .woocommerce div.product #reviews .comment, .woocommerce #content div.product #reviews .comment, .woocommerce-page div.product #reviews .comment, .woocommerce-page #content div.product #reviews .comment { *zoom: 1; } .woocommerce div.product #reviews .comment::before, .woocommerce div.product #reviews .comment::after, .woocommerce #content div.product #reviews .comment::before, .woocommerce #content div.product #reviews .comment::after, .woocommerce-page div.product #reviews .comment::before, .woocommerce-page div.product #reviews .comment::after, .woocommerce-page #content div.product #reviews .comment::before, .woocommerce-page #content div.product #reviews .comment::after { content: ' '; display: table; } .woocommerce div.product #reviews .comment::after, .woocommerce #content div.product #reviews .comment::after, .woocommerce-page div.product #reviews .comment::after, .woocommerce-page #content div.product #reviews .comment::after { clear: both; } .woocommerce div.product #reviews .comment img, .woocommerce #content div.product #reviews .comment img, .woocommerce-page div.product #reviews .comment img, .woocommerce-page #content div.product #reviews .comment img { float: right; height: auto; } .woocommerce ul.products, .woocommerce-page ul.products { display: grid; column-gap: 20px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { display: flex; flex-direction: column; width: 100%; padding: 0; position: relative; } .woocommerce ul.products:not(.elementor-grid), .woocommerce-page ul.products:not(.elementor-grid) { grid-template-columns: repeat(4, 1fr); } .woocommerce ul.products:not(.elementor-grid).columns-1, .woocommerce-page ul.products:not(.elementor-grid).columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); width: 100%; margin-right: 0; } .woocommerce ul.products:not(.elementor-grid).columns-2, .woocommerce-page ul.products:not(.elementor-grid).columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce ul.products:not(.elementor-grid).columns-3, .woocommerce-page ul.products:not(.elementor-grid).columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .woocommerce ul.products:not(.elementor-grid).columns-5, .woocommerce-page ul.products:not(.elementor-grid).columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .woocommerce ul.products:not(.elementor-grid).columns-6, .woocommerce-page ul.products:not(.elementor-grid).columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { float: left; } .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { float: right; } .woocommerce .woocommerce-pagination ul.page-numbers, .woocommerce-page .woocommerce-pagination ul.page-numbers { *zoom: 1; } .woocommerce .woocommerce-pagination ul.page-numbers::before, .woocommerce .woocommerce-pagination ul.page-numbers::after, .woocommerce-page .woocommerce-pagination ul.page-numbers::before, .woocommerce-page .woocommerce-pagination ul.page-numbers::after { content: ' '; display: table; } .woocommerce .woocommerce-pagination ul.page-numbers::after, .woocommerce-page .woocommerce-pagination ul.page-numbers::after { clear: both; } .woocommerce .woocommerce-pagination ul.page-numbers li, .woocommerce-page .woocommerce-pagination ul.page-numbers li { display: inline-block; } .woocommerce table.cart img, .woocommerce #content table.cart img, .woocommerce-page table.cart img, .woocommerce-page #content table.cart img { height: auto; } .woocommerce table.cart td.actions, .woocommerce #content table.cart td.actions, .woocommerce-page table.cart td.actions, .woocommerce-page #content table.cart td.actions { text-align: right; } .woocommerce table.cart td.actions .input-text, .woocommerce #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text { width: 80px; } .woocommerce table.cart td.actions .button, .woocommerce #content table.cart td.actions .button, .woocommerce-page table.cart td.actions .button, .woocommerce-page #content table.cart td.actions .button { line-height: 1; border-width: 1px; border-style: solid; } .woocommerce table.cart td.actions .coupon, .woocommerce #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon { float: left; display: flex; margin: 0 auto; } .woocommerce table.cart td.actions .coupon label, .woocommerce #content table.cart td.actions .coupon label, .woocommerce-page table.cart td.actions .coupon label, .woocommerce-page #content table.cart td.actions .coupon label { display: none; } .woocommerce table.cart td.actions .button, .woocommerce #content table.cart td.actions .button, .woocommerce-page table.cart td.actions .button, .woocommerce-page #content table.cart td.actions .button { margin-left: 5px; } @media (min-width: 545px) { .woocommerce table.cart td.actions > input[type="submit"], .woocommerce #content table.cart td.actions > input[type="submit"], .woocommerce-page table.cart td.actions > input[type="submit"], .woocommerce-page #content table.cart td.actions > input[type="submit"] { margin: 5px auto; } } .woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals { *zoom: 1; width: 100%; } .woocommerce .cart-collaterals::before, .woocommerce .cart-collaterals::after, .woocommerce-page .cart-collaterals::before, .woocommerce-page .cart-collaterals::after { content: ' '; display: table; } .woocommerce .cart-collaterals::after, .woocommerce-page .cart-collaterals::after { clear: both; } .woocommerce .cart-collaterals .related, .woocommerce-page .cart-collaterals .related { width: 30.75%; float: left; } .woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells { width: 48%; float: left; } .woocommerce .cart-collaterals .cross-sells ul.products, .woocommerce-page .cart-collaterals .cross-sells ul.products { float: none; } .woocommerce .cart-collaterals .cross-sells ul.products li, .woocommerce-page .cart-collaterals .cross-sells ul.products li { width: calc(50% - 10px); } .woocommerce .cart-collaterals .cross-sells ul.products li.first, .woocommerce-page .cart-collaterals .cross-sells ul.products li.first { clear: both; } .woocommerce .cart-collaterals .cross-sells ul.products li.last, .woocommerce-page .cart-collaterals .cross-sells ul.products li.last { margin-right: 0; } .woocommerce .cart-collaterals .shipping_calculator, .woocommerce-page .cart-collaterals .shipping_calculator { width: 48%; *zoom: 1; clear: right; float: right; } .woocommerce .cart-collaterals .shipping_calculator::before, .woocommerce .cart-collaterals .shipping_calculator::after, .woocommerce-page .cart-collaterals .shipping_calculator::before, .woocommerce-page .cart-collaterals .shipping_calculator::after { content: ' '; display: table; } .woocommerce .cart-collaterals .shipping_calculator::after, .woocommerce-page .cart-collaterals .shipping_calculator::after { clear: both; } .woocommerce .cart-collaterals .shipping_calculator .col2-set .col-1, .woocommerce .cart-collaterals .shipping_calculator .col2-set .col-2, .woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-1, .woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-2 { width: 47%; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: right; width: 48%; } .woocommerce ul.cart_list li, .woocommerce ul.product_list_widget li, .woocommerce-page ul.cart_list li, .woocommerce-page ul.product_list_widget li { *zoom: 1; } .woocommerce ul.cart_list li::before, .woocommerce ul.cart_list li::after, .woocommerce ul.product_list_widget li::before, .woocommerce ul.product_list_widget li::after, .woocommerce-page ul.cart_list li::before, .woocommerce-page ul.cart_list li::after, .woocommerce-page ul.product_list_widget li::before, .woocommerce-page ul.product_list_widget li::after { content: ' '; display: table; } .woocommerce ul.cart_list li::after, .woocommerce ul.product_list_widget li::after, .woocommerce-page ul.cart_list li::after, .woocommerce-page ul.product_list_widget li::after { clear: both; } .woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img, .woocommerce-page ul.cart_list li img, .woocommerce-page ul.product_list_widget li img { float: right; height: auto; } .woocommerce form .form-row, .woocommerce-page form .form-row { *zoom: 1; } .woocommerce form .form-row::before, .woocommerce form .form-row::after, .woocommerce-page form .form-row::before, .woocommerce-page form .form-row::after { content: ' '; display: table; } .woocommerce form .form-row::after, .woocommerce-page form .form-row::after { clear: both; } .woocommerce form .form-row label, .woocommerce-page form .form-row label { display: block; } .woocommerce form .form-row label.checkbox, .woocommerce-page form .form-row label.checkbox { display: inline; } .woocommerce form .form-row select, .woocommerce-page form .form-row select { width: 100%; } .woocommerce form .form-row .input-text, .woocommerce-page form .form-row .input-text { box-sizing: border-box; width: 100%; } .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last { width: 47%; overflow: visible; } .woocommerce form .form-row-first, .woocommerce-page form .form-row-first { float: left; } .woocommerce form .form-row-last, .woocommerce-page form .form-row-last { float: right; } .woocommerce form .form-row-wide, .woocommerce-page form .form-row-wide { clear: both; } .woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select { width: auto; } .woocommerce #payment .wc-terms-and-conditions, .woocommerce #payment .terms, .woocommerce-page #payment .wc-terms-and-conditions, .woocommerce-page #payment .terms { text-align: left; padding: 0; width: 100%; margin-bottom: 1em; } .woocommerce #payment #place_order, .woocommerce-page #payment #place_order { float: right; } .woocommerce .woocommerce-billing-fields, .woocommerce .woocommerce-shipping-fields, .woocommerce-page .woocommerce-billing-fields, .woocommerce-page .woocommerce-shipping-fields { *zoom: 1; } .woocommerce .woocommerce-billing-fields::before, .woocommerce .woocommerce-billing-fields::after, .woocommerce .woocommerce-shipping-fields::before, .woocommerce .woocommerce-shipping-fields::after, .woocommerce-page .woocommerce-billing-fields::before, .woocommerce-page .woocommerce-billing-fields::after, .woocommerce-page .woocommerce-shipping-fields::before, .woocommerce-page .woocommerce-shipping-fields::after { content: ' '; display: table; } .woocommerce .woocommerce-billing-fields::after, .woocommerce .woocommerce-shipping-fields::after, .woocommerce-page .woocommerce-billing-fields::after, .woocommerce-page .woocommerce-shipping-fields::after { clear: both; } .woocommerce .woocommerce-terms-and-conditions, .woocommerce-page .woocommerce-terms-and-conditions { margin-bottom: 1.618em; padding: 1.618em; } .woocommerce .woocommerce-oembed, .woocommerce-page .woocommerce-oembed { position: relative; } .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 30%; } .woocommerce-account .woocommerce-MyAccount-content { float: right; width: 68%; } .woocommerce-account .woocommerce-MyAccount-content fieldset { border: 0; margin: 1em 0 0; padding: 3px; } .woocommerce-account .woocommerce-MyAccount-content fieldset legend { padding: 3px 0; border-bottom: 1px solid #e5e5e5; width: 100%; margin: 10px 0; } .woocommerce-account .woocommerce-MyAccount-content fieldset .form-row { padding-left: 0; padding-right: 0; }