/**
* 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;
grid-template-columns: repeat(4, 1fr);
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.columns-1, .woocommerce-page ul.products.columns-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
width: 100%;
margin-right: 0;
}
.woocommerce ul.products.columns-2, .woocommerce-page ul.products.columns-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.woocommerce ul.products.columns-3, .woocommerce-page ul.products.columns-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.woocommerce ul.products.columns-5, .woocommerce-page ul.products.columns-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.woocommerce ul.products.columns-6, .woocommerce-page ul.products.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;
}