123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619 |
- /**
- * 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: left;
- }
- .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: right;
- width: 48%;
- }
- .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
- float: left;
- 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: right;
- 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: right;
- width: 30.75%;
- margin-left: 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-left: 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-left: 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: left;
- 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: left;
- 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-left: 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: right;
- }
- .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
- float: left;
- }
- .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: left;
- }
- .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: right;
- 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-right: 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: right;
- }
- .woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells {
- width: 48%;
- float: right;
- }
- .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-left: 0;
- }
- .woocommerce .cart-collaterals .shipping_calculator, .woocommerce-page .cart-collaterals .shipping_calculator {
- width: 48%;
- *zoom: 1;
- clear: left;
- float: left;
- }
- .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: left;
- 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: left;
- 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: right;
- }
- .woocommerce form .form-row-last, .woocommerce-page form .form-row-last {
- float: left;
- }
- .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: right;
- padding: 0;
- width: 100%;
- margin-bottom: 1em;
- }
- .woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
- float: left;
- }
- .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: right;
- width: 30%;
- }
- .woocommerce-account .woocommerce-MyAccount-content {
- float: left;
- 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-right: 0;
- padding-left: 0;
- }
|