/*
* DSM Designs
* Responsive CSS Overrides
* File: custom-responsive.css
*
* Loads after the child theme stylesheet. Most rules are scoped to a
* max-width media query where a layout problem was found on staging; the
* few rules that apply at every width are small component fixes (hero
* button alignment, cart "Update cart" visibility, filter button state).
*
* Breakpoints (aligned to the existing theme / Elementor / WooCommerce /
* Max Mega Menu / Filter Everything ones):
* 992px+ - desktop (hero button alignment only)
* 992-1199px - tablet landscape (footer)
* 991px - tablet portrait (Elementor "tablet")
* 768px - mobile menu, WooCommerce small-screen cart, filter pop-up
* 767px - mobile landscape (Elementor "mobile_extra")
* 575px - large phones
* 479px - phones (Elementor "mobile")
* 374px - small phones (320 / 360)
*/
/* =========================================================
ALL WIDTHS - COMPONENT FIXES
========================================================= */
/* ---------- Homepage hero buttons ----------
The outline "Start Your Project" button rendered 1px shorter than the
filled ones and sat on a different baseline. */
body.home .hero-banner .btn-dsm-shop-now,
body.home .hero-banner .btn-dsm-custom-work {
vertical-align: middle;
}
body.home .hero-banner .btn-dsm-custom-work {
min-height: 41px;
}
/* ---------- Cart: "Update cart" ----------
The child theme styles this as black text, but the generic
`.woocommerce button.button { color: #fff !important }` rule wins, so the
button was invisible (white on white) at every width. */
.woocommerce .cart .button[name="update_cart"] {
color: #1E1E1E !important;
}
/* ---------- Product filters: Apply / Clear ----------
Filter Everything puts both buttons "on hold" (and ignores clicks) while
it recounts results after a filter change, which takes a few seconds on
staging. There was no visual cue, so the buttons looked broken. */
.wpc-filters-main-wrap a.wpc-filters-submit-button.on-hold,
.wpc-filters-main-wrap a.wpc-filters-reset-button.on-hold {
opacity: 0.5;
cursor: progress;
}
/* ---------- My Account: error notices ----------
The theme's `.single-post-text ul { padding: 0 }` outranks the notice
padding, so account error notices ("Invalid order.", login / reset
errors) had their text flush against the edge of the white box and a
stray list bullet. */
.woocommerce-account .single-post-text ul.woocommerce-error {
padding: 15px;
}
.woocommerce-account .single-post-text ul.woocommerce-error > li {
padding-left: 0;
margin: 0;
}
.woocommerce-account .single-post-text ul.woocommerce-error > li::before {
display: none;
}
/* ---------- My Account: Orders buttons and pagination ----------
The child theme makes every `.button` a block-level flex box, so stacked
order actions (View / Pay / Cancel) touched each other, and the
Previous / Next pagination buttons became full-width bars on top of each
other instead of WooCommerce's left / right pair. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button + .button {
margin-top: 6px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination {
display: flex;
gap: 10px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .button {
flex: 1 1 0;
float: none;
}
/* ---------- My Account: order item options (View order) ----------
The theme's `.single-post-text p { margin-top: 1.4rem }` pushed each
option value onto a staggered line below its label. WooCommerce renders
them inline ("Hardware: Edge Pull Black"). */
.woocommerce-account .woocommerce-table--order-details .wc-item-meta li p {
display: inline;
margin: 0;
}
/* ---------- My Account: State / Country dropdowns ----------
The Extra Product Options plugin gives every select2 field
z-index: 999 - the same as the fixed header - so the State field
scrolled over the header. */
.woocommerce-account .woocommerce-MyAccount-content .select2-container {
z-index: auto;
}
/* ---------- Wishlist (Flexible Wishlist, linked from My Account) ----------
The share icons picked up the theme's generic list bullets, and the
quantity field was an unstyled browser input. The wishlist tables sit in
`div.woocommerce-cart-form` (the real cart uses a form), which scopes
these rules to the wishlist. */
.fw-share-items .fw-share-item {
padding-left: 0;
}
.fw-share-items .fw-share-item::before {
display: none;
}
.woocommerce div.woocommerce-cart-form td.product-quantity input[type="number"] {
width: 80px;
height: 40px;
padding: 0 8px;
border: 1px solid #D8CEC6;
border-radius: 2px;
background: #fff;
text-align: center;
}
/* =========================================================
DESKTOP (min-width: 992px)
========================================================= */
@media only screen and (min-width: 992px) {
/* Hero buttons: Elementor offsets the heading by 218px but the button
row by 18px + 178px, so the buttons sat ~11px left of the heading's
centre line. Use the same offset as the heading. */
body.home .hero-banner .elementor-element.elementor-element-446e321 > .elementor-widget-container {
margin-left: 0;
padding-left: 0px;
}
}
/* =========================================================
ABOVE WOOCOMMERCE SMALL-SCREEN (min-width: 769px)
========================================================= */
@media only screen and (min-width: 769px) {
/* Cart: now that "Update cart" is visible, keep it at the right end of
the actions row instead of butting against "Apply coupon". */
.woocommerce-cart form.woocommerce-cart-form table.cart td.actions > .button[name="update_cart"] {
width: max-content;
margin-left: auto;
}
}
/* =========================================================
TABLET LANDSCAPE (992px - 1199px)
========================================================= */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
/* ---------- Footer ----------
Four CTA buttons in a row wrapped "Start Your Salon Project" /
"Book Appointment" onto two left-aligned lines next to single-line
centred ones. Use the 2 x 2 grid the theme already uses below 992px. */
.site-footer .site-footer__cta-bar {
grid-template-columns: 1fr 1fr;
row-gap: 16px;
}
.site-footer .site-footer__cta-bar .site-footer__cta-bar-btn {
padding: 15px 10px 12px;
text-align: center;
justify-content: center;
}
.site-footer .site-footer__cta-bar .site-footer__cta-bar-btn::after {
position: relative;
right: auto;
}
/* The 412px newsletter form was wider than the 40% brand column, so the
Submit button ran into the Shop column. */
.site-footer .site-footer__inner {
grid-template-columns: 36% 1fr 1fr 1.3fr;
column-gap: 24px;
}
.site-footer form.site-footer__newsletter {
max-width: 100%;
}
}
/* =========================================================
TABLET (max-width: 1199px)
========================================================= */
@media only screen and (max-width: 1199px) {
/* Footer contact rows use margin-right: -20px, which pushed the Connect
column into the page gutter (to the viewport edge at 1024px). */
.site-footer .site-footer__contact li {
margin-right: 0;
}
/* ---------- My Account navigation ----------
The 7 tabs need ~1,116px with 20px side padding, so they wrapped 5 + 2
at 1024px. Tighter padding keeps them on one row down to 992px. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
padding: 0 6px;
}
}
/* =========================================================
TABLET (max-width: 991px)
========================================================= */
@media only screen and (max-width: 991px) {
/* ---------- Homepage hero ----------
Elementor positions the hero heading, sub-heading and buttons with
desktop-only offsets (218px / 210px / 178px left padding + negative
top margins, 165px line-height) and sets 122px tablet font sizes,
so text and buttons overlap below 992px. Reset offsets and use
readable sizes. */
body.home .elementor-section.hero-banner {
padding-top: 60px;
padding-bottom: 50px;
}
body.home .hero-banner .elementor-element.elementor-element-75a540a > .elementor-widget-container,
body.home .hero-banner .elementor-element.elementor-element-2255776 > .elementor-widget-container,
body.home .hero-banner .elementor-element.elementor-element-446e321 > .elementor-widget-container {
margin: 0;
padding: 0;
}
body.home .hero-banner .elementor-element.elementor-element-75a540a {
margin-bottom: 8px;
}
body.home .hero-banner .elementor-element.elementor-element-2255776 {
margin-bottom: 28px;
}
body.home .hero-banner .elementor-element.elementor-element-75a540a .elementor-heading-title {
font-size: 52px;
line-height: 1.15;
}
body.home .hero-banner .elementor-element.elementor-element-2255776 .elementor-heading-title {
font-size: 24px;
line-height: 1.35;
}
/* Hero buttons: inline buttons with side margins only wrapped 2 + 1
with no vertical gap between rows (480-740px). Lay them out as a
centred, wrapping row with an even gap. */
body.home .hero-banner .elementor-element-446e321 .elementor-widget-container > p {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
margin: 0;
}
body.home .hero-banner .elementor-element-446e321 .btn-dsm-shop-now,
body.home .hero-banner .elementor-element-446e321 .btn-dsm-custom-work {
margin: 0;
}
/* ---------- Homepage "We Are DSM" ----------
3-column grid (150px | auto | 300px) squeezes the copy into a
~110px column. Move the button onto its own row. */
.we-are-dsm {
grid-template-columns: 150px 1fr;
row-gap: 24px;
}
.we-are-dsm .wad-button {
grid-column: 1 / -1;
text-align: center;
}
/* ---------- Cart: "Proceed to checkout" ----------
The desktop width of 25% clipped the label ("ROCEED TO CHECKOU") on
tablets. Size the button to its label instead. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward {
width: auto;
}
/* ---------- My Account navigation ----------
Below 992px the centred inline tabs wrapped into uneven rows (5 rows
of 2-2-1-1-1 on phones) with the active underline floating mid-list.
Lay them out as an even grid of cells, each with its own underline. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul::before {
display: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
display: block;
padding: 0;
border-bottom: 1px solid #D8CEC6;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: block;
padding: 15px 8px 14px;
margin-bottom: -1px;
}
}
/* =========================================================
MOBILE MENU / SMALL-SCREEN WOOCOMMERCE (max-width: 768px)
Max Mega Menu, the Quarty overlay, WooCommerce's small-screen cart
table and the Filter Everything pop-up all switch here.
========================================================= */
@media only screen and (max-width: 768px) {
/* ---------- Navigation ---------- */
/* While the menu overlay is open, the (closed) dark search panel shows
through the white header and hides the close "X" and header icons.
Keep it hidden unless search is actually open. */
.qrt-app .qrt-top-bar .qrt-search:not(.qrt-active) {
visibility: hidden;
}
/* Safe-centre the menu so a tall (expanded) list can still scroll to
its first item instead of being clipped above the fold. */
.qrt-app .qrt-top-bar .qrt-menu {
align-items: flex-start;
}
/* The menu wrapper shrink-wrapped to ~145px; use the full overlay. */
.qrt-app .qrt-top-bar .qrt-menu .qrt-dynamic-menu {
width: 100%;
margin-top: 0px;
margin-bottom: auto;
}
/* The Quarty hamburger already opens this overlay, but Max Mega Menu
added a second hamburger inside it that had to be tapped again
before any link appeared. Show the list directly instead. */
#mega-menu-wrap-primary .mega-menu-toggle {
display: none;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
display: flex;
background-color: transparent;
}
/* Child theme sets #1E1E1E link text (desktop, white header), which is
unreadable on the dark mobile overlay. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
color: #fff;
height: auto;
line-height: 1.4;
padding: 12px 14px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
color: #1E1E1E;
}
/* Desktop dropdown pointer arrow floats over the next item on mobile. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover::after {
display: none;
}
/* Desktop mega panel is centred with left:50% + translateX(-50%) and a
fixed 399px width. The mobile menu renders it statically, so only
the transform applied and the panel slid off the left edge. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
left: auto;
transform: none;
width: 100%;
min-width: 0;
max-width: none;
margin-top: 8px;
padding: 24px 20px 20px;
}
#mega-menu-wrap-primary #mega-menu-primary .textwidget a.megamenu-footer__cta-bar-btn {
margin-top: 24px;
}
/* Same off-screen shift for the "Info" flyout (fixed 180-188px width). */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
left: auto;
transform: none;
width: 100%;
min-width: 0;
max-width: none;
margin-top: 8px;
}
/* ---------- Product filters (mobile pop-up) ----------
Clear / Apply sat after the last filter group, so opening a long
group (e.g. 31 body colours) pushed them far below the fold. Keep
them pinned to the bottom of the pop-up's scroll area. */
.wpc_show_bottom_widget .wpc-filters-widget-wrapper .wpc-filter-layout-submit-button {
position: sticky;
bottom: 0;
z-index: 2;
background-color: #fff;
box-shadow: 0 -1px 0 #D8CEC6;
}
/* ---------- Cart (WooCommerce small-screen table) ---------- */
/* Remove "x" was centred alone on its own row; align it to the right
like the other values. */
.woocommerce-cart form.woocommerce-cart-form table.cart td.product-remove {
padding-top: 8px;
padding-bottom: 8px;
}
.woocommerce-cart form.woocommerce-cart-form table.cart td.product-remove a.remove {
margin: 0 0 0 auto;
}
/* Label on the left, value on the right, vertically centred. The
quantity stepper was left-aligned beside its label and its label sat
at the top of the 40px control. */
.woocommerce-cart form.woocommerce-cart-form table.cart td.product-price,
.woocommerce-cart form.woocommerce-cart-form table.cart td.product-quantity,
.woocommerce-cart form.woocommerce-cart-form table.cart td.product-subtotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* Selected product options: start below the "Product:" label and align
right with the product name. */
.woocommerce-cart form.woocommerce-cart-form table.cart td.product-name .wcpa_cart_meta {
clear: both;
padding-top: 4px;
}
.woocommerce-cart form.woocommerce-cart-form table.cart td.product-name .wcpa_cart_meta_item {
justify-content: flex-end;
column-gap: 4px;
text-align: right;
}
/* The theme's list-bullet dot is pinned to the item's left edge and no
longer lines up once the option text is right-aligned. */
.woocommerce-cart form.woocommerce-cart-form table.cart td.product-name .wcpa_cart_meta_item::before {
display: none;
}
/* Coupon: floated 48% input + 48% button overflowed, dropping the button
onto the input's underline. */
.woocommerce-cart form.woocommerce-cart-form table.cart td.actions .coupon {
display: flex;
align-items: flex-end;
gap: 10px;
}
.woocommerce-cart form.woocommerce-cart-form table.cart td.actions .coupon .input-text {
flex: 1 1 auto;
width: auto;
min-width: 0;
margin: 0;
float: none;
}
.woocommerce-cart form.woocommerce-cart-form table.cart td.actions .coupon .button {
flex: 0 0 auto;
width: auto;
float: none;
}
.woocommerce-cart form.woocommerce-cart-form table.cart td.actions > .button[name="update_cart"] {
margin-top: 12px;
}
/* Checkout buttons: desktop widths (25% / 50%) are too narrow for the
button labels. */
.woocommerce-cart .wc-proceed-to-checkout {
flex-wrap: wrap;
gap: 10px;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward,
.woocommerce-cart .wcpay-express-checkout-wrapper,
.woocommerce-cart div#wc-stripe-express-checkout-element {
width: 100%;
margin: 0;
}
/* ---------- Wishlist tables (small-screen rows) ---------- */
/* WooCommerce labels each stacked cell with `data-title: `; cells with
no data-title (Show items, remove, product name, Share) showed a
lone ":". */
.woocommerce div.woocommerce-cart-form table.shop_table_responsive tr td:not([data-title])::before {
display: none;
}
/* "New wishlist" / "What else do you need?" inputs were pushed right and
the floated button overlapped them. Stack input and buttons. */
.woocommerce-cart .woocommerce div.woocommerce-cart-form table.cart td.actions input.input-text {
display: block;
float: none;
width: 100%;
margin: 0 0 10px;
}
.woocommerce-cart .woocommerce div.woocommerce-cart-form table.cart td.actions .button {
float: none;
width: 100%;
margin: 0 0 10px;
}
/* "Set as primary" is block-level (theme buttons are display: flex), so
it butted against its label instead of aligning right like the other
values. */
.woocommerce div.woocommerce-cart-form table.shop_table_responsive td[data-title] .button {
display: inline-flex;
}
.fw-share-items {
justify-content: flex-end;
flex-wrap: wrap;
}
/* ---------- My Account: Orders table (small-screen rows) ---------- */
/* The order number is a | , and WooCommerce's small-screen CSS hides
every tbody | , so each order lost its number (and its link).
Show it as a labelled row like the other cells. */
.woocommerce-account table.account-orders-table tbody th {
display: block;
text-align: right;
}
.woocommerce-account table.account-orders-table tbody th::before {
content: attr(data-title) ": ";
float: left;
font-weight: 700;
}
/* Actions: "View" sat beside the label while Pay / Cancel stretched full
width below it. Keep the label left and the buttons in a row. */
.woocommerce-account table.account-orders-table td.woocommerce-orders-table__cell-order-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
.woocommerce-account table.account-orders-table td.woocommerce-orders-table__cell-order-actions::before {
margin-right: auto;
}
.woocommerce-account table.account-orders-table td.woocommerce-orders-table__cell-order-actions .button {
width: auto;
margin: 0;
}
/* ---------- My Account: Downloads table ----------
Long file names were clipped at both ends inside the no-wrap button. */
.woocommerce-account .woocommerce-table--order-downloads td.download-file {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.woocommerce-account .woocommerce-table--order-downloads td.download-file .button {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
}
}
/* =========================================================
MOBILE LANDSCAPE (max-width: 767px)
========================================================= */
@media only screen and (max-width: 767px) {
/* ---------- Homepage hero ---------- */
body.home .elementor-section.hero-banner {
padding-top: 44px;
padding-bottom: 34px;
}
body.home .hero-banner .elementor-element.elementor-element-75a540a .elementor-heading-title {
font-size: 40px;
line-height: 1.2;
}
body.home .hero-banner .elementor-element.elementor-element-2255776 .elementor-heading-title {
font-size: 20px;
line-height: 1.35;
}
/* Hero buttons: stack as equal-width buttons, centred, with side
gutters. */
body.home .hero-banner .elementor-element-446e321 .elementor-widget-container > p {
flex-direction: column;
align-items: stretch;
gap: 10px;
max-width: 380px;
margin: 0 auto;
padding: 0 20px;
}
body.home .hero-banner .elementor-element-446e321 .btn-dsm-shop-now,
body.home .hero-banner .elementor-element-446e321 .btn-dsm-custom-work {
display: flex;
width: 100%;
}
/* ---------- Homepage financing strip ----------
25% | 1fr | 25% grid overlaps "Fast Approvals" / "Secure & Trusted"
with the button. Keep the two badges side by side and drop the
button onto its own row. */
.ef-brands {
column-gap: 30px;
}
.ef-bottom {
grid-template-columns: 1fr 1fr;
gap: 20px 10px;
padding-left: 0;
padding-right: 0;
}
.ef-bottom .b-center {
grid-column: 1 / -1;
order: 3;
}
/* ---------- My Account: login / register ----------
Two 48% columns were ~130px wide each on phones. */
div#customer_login {
flex-direction: column;
gap: 16px; /* the form's 24px margin and the heading's 32px add to this */
padding: 0;
}
div#customer_login > div {
flex: 1 1 auto;
max-width: 100%;
width: 100%;
}
/* ---------- Footer ----------
Stacked CTA buttons kept the desktop 30px gap and 60px top padding,
leaving ~300px of mostly empty space above the footer columns. */
.site-footer .site-footer__cta-bar {
gap: 12px;
padding-top: 40px;
}
/* ---------- My Account navigation: 3 columns ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
grid-template-columns: repeat(3, 1fr);
}
/* ---------- Checkout: order notes ----------
The 44px-high textarea clipped its two-line placeholder on phones and
showed a scrollbar. */
body.woocommerce-checkout #order_comments {
min-height: 88px;
}
}
/* =========================================================
LARGE PHONES (max-width: 575px)
========================================================= */
@media only screen and (max-width: 575px) {
/* "We Are DSM": stack logo, copy and button. */
.we-are-dsm {
grid-template-columns: 1fr;
text-align: center;
}
/* ---------- Product page tabs ----------
Three inline tabs don't fit, so they wrapped 2 + 1 with the active
underline floating mid-list. Show them as a full-width list. */
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-direction: column;
padding: 0;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs::before {
display: none;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li {
display: block;
margin: 0;
border-bottom: 1px solid #D8CEC6;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::after {
display: none;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: 15px 16px 14px;
margin-bottom: -1px;
}
/* ---------- My Account navigation: 2 columns ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
grid-template-columns: repeat(2, 1fr);
}
/* ---------- Checkout + My Account forms ----------
The child theme sizes checkout half-width fields at 49.6% (and
WooCommerce keeps 47% on account forms) at every width, so first /
last name sat side by side at ~150px each - touching on checkout -
and the coupon input butted against its button. Stack them. */
body.woocommerce-checkout .woocommerce form .form-row-first,
body.woocommerce-checkout .woocommerce form .form-row-last,
body.woocommerce-account .woocommerce form .form-row-first,
body.woocommerce-account .woocommerce form .form-row-last {
width: 100%;
float: none;
}
body.woocommerce-checkout form.checkout_coupon .form-row-last .button {
width: 100%;
}
/* ---------- Checkout: "Your order" table ----------
Two auto-width columns split ~50/50, squeezing the product options
into a narrow column and wrapping the shipping message onto four
lines beside a half-empty price column. Give each row a flexible
label cell and a price cell sized to its content. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
display: block;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
display: flex;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
display: block;
}
/* No inner divider: with per-row widths it would jog from row to row. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr > :first-child {
flex: 1 1 0;
border-right: 0;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr > :last-child {
flex: 0 1 auto;
border-left: 0;
text-align: right;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
white-space: nowrap;
}
/* ---------- My Account: Addresses ----------
The floated "Add / Edit address" link sat directly on top of the
address text with no spacing. */
.woocommerce-account .addresses .woocommerce-Address-title .edit {
float: none;
display: inline-block;
margin: 4px 0 12px;
}
/* ---------- My Account: order details table (View order) ----------
Same 50/50 split as checkout: product and options squeezed into a
narrow column beside a half-empty total column. */
.woocommerce-account .woocommerce-table--order-details,
.woocommerce-account .woocommerce-table--order-details thead,
.woocommerce-account .woocommerce-table--order-details tbody,
.woocommerce-account .woocommerce-table--order-details tfoot {
display: block;
}
.woocommerce-account .woocommerce-table--order-details tr {
display: flex;
}
.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td {
display: block;
}
.woocommerce-account .woocommerce-table--order-details tr > :first-child {
flex: 1 1 0;
border-right: 0;
}
.woocommerce-account .woocommerce-table--order-details tr > :last-child {
flex: 0 1 auto;
border-left: 0;
text-align: right;
}
.woocommerce-account .woocommerce-table--order-details td.product-total {
white-space: nowrap;
}
/* ---------- My Account: empty-state notices ----------
"Browse products" (Orders, Downloads) floated right under the message,
aligned with nothing. Put it below as a full-width button. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
float: none;
display: flex;
justify-content: center;
width: 100%;
margin: 12px 0 0;
}
}
/* =========================================================
PHONES (max-width: 479px)
========================================================= */
@media only screen and (max-width: 479px) {
/* ---------- Homepage hero ---------- */
body.home .hero-banner .elementor-element.elementor-element-75a540a .elementor-heading-title {
font-size: clamp(28px, 9vw, 40px);
line-height: 1.2;
}
body.home .hero-banner .elementor-element.elementor-element-2255776 .elementor-heading-title {
font-size: 18px;
}
/* ---------- Social share icons (home, Why Us) ----------
5 icons with a 40px gap need ~340px and were clipped at 320px. */
ul.socials-share {
flex-wrap: wrap;
gap: 24px;
}
.ef-brands {
column-gap: 20px;
}
/* Financing badges: one per row so the labels don't wrap. */
.ef-bottom {
grid-template-columns: 1fr;
row-gap: 12px;
}
.ef-bottom .b-center {
margin-top: 8px;
}
/* ---------- Cart: coupon ---------- */
.woocommerce-cart form.woocommerce-cart-form table.cart td.actions .coupon {
flex-direction: column;
align-items: stretch;
}
.woocommerce-cart form.woocommerce-cart-form table.cart td.actions .coupon .button {
width: 100%;
}
}
/* =========================================================
SMALL PHONES (max-width: 374px)
========================================================= */
@media only screen and (max-width: 374px) {
ul.socials-share {
gap: 18px;
}
ul.socials-share svg {
height: 30px;
}
/* Google reCAPTCHA renders a fixed 304px iframe that overflows the
Elementor forms (Contact, UGC upload) on 320-360px screens. */
.elementor-field-type-recaptcha .elementor-g-recaptcha {
transform: scale(0.86);
transform-origin: 0 0;
}
}
@media only screen and (max-width: 339px) {
.elementor-field-type-recaptcha .elementor-g-recaptcha {
transform: scale(0.68);
}
}
/* DSM Rep Start */
.qrt-buttons .cart-btn .cart-widget:before {
border-bottom: 6px solid #D8CEC6;
}
.qrt-top-bar .cart-btn .thwepo-item-val.thwepo-item-image-group {
width: 100%;
}
.qrt-top-bar .cart-btn .wcpa_cart_meta_item-value {
width: 100%;
}
.qrt-top-bar .cart-btn .thwepo-image-item {
display: flex;
align-items: center;
flex-direction: row-reverse;
justify-content: space-between;
}
input[type=file] {
padding: 11px 14px 14px 14px;
}
@media only screen and (max-width: 1299px) {
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary li.mega-align-bottom-left.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
padding: 8px;
}
}
/* Tab landscape */
@media only screen and (max-width: 1199px) {
.sticky::before {
display: none;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary li.mega-align-bottom-left.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
padding: 5px 5px 5px 5px;
line-height: normal;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
height: 100px;
}
.woocommerce table.shop_table td.fw-table-share {
padding-left: 10px !important;
padding-right: 10px !important;
}
.woocommerce-cart-form .actions .coupon {
margin-right: 10px;
}
}
/* End of max 1199px */
/* Tab portrait */
@media only screen and (max-width: 991px) {
.qrt-app .qrt-top-bar {
position: relative;
}
[class*="elementor-"] .spaces-sec.elementor-element[class*="elementor-element-"] {
padding-top: 11px;
}
[class*="elementor-"] .instagram-sec.elementor-element[class*="elementor-element-"] {
padding-bottom: 0px;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
height: 167px;
}
}
/* End of max 991px */
/* Mobile landscape */
@media only screen and (max-width: 768px) {
.default--scrolling .qrt-app .qrt-top-bar {
position: relative;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary li.mega-align-bottom-left.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
padding: 10px 10px 10px 10px;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-align-bottom-left.mega-toggle-on > a.mega-menu-link::after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover::after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link::after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link::after {
display: none;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
margin-top: 0px;
border-radius: 5px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
margin-top: 0px;
border-radius: 5px;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-hide-arrow > a.mega-menu-link > span.mega-indicator {
display: block;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
font-size: 18px;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after {
top: -1px;
position: relative;
}
.qrt-menu {
top: 0px;
}
.qrt-menu.qrt-active {
top: 120px;
}
}
/* Mobile landscape */
@media only screen and (max-width: 767px) {
.default--scrolling .qrt-app .qrt-top-bar {
position: fixed;
}
.qrt-menu.qrt-active {
top: 80px;
}
.wpc-filters-main-wrap .wpc-widget-close-container .wpc-icon-html-wrapper:hover span {
background: #515151;
}
.wpc-filters-main-wrap .wpc-widget-close-container .wpc-widget-close-icon span.wpc-icon-line-1,
.wpc-filters-main-wrap .wpc-widget-close-container .wpc-widget-close-icon span.wpc-icon-line-3 {
height: 2px;
margin-bottom: -2px;
}
.wpc-filters-main-wrap .wpc-widget-close-container .wpc-icon-html-wrapper {
cursor: pointer;
}
.woocommerce-checkout .woocommerce #payment #place_order,
.woocommerce-checkout.woocommerce-page #payment #place_order {
margin-top: 10px;
}
.fw-table-share .fw-share-items {
justify-content: flex-start;
}
.fw-table-share div {
text-align: left;
}
}
/* End of max 768px */
/* Mobile landscape */
@media only screen and (max-width: 767px) {
ul.socials-share svg {
height: 26px;
}
[class*="elementor-"] .test-sec.elementor-element[class*="elementor-element-"] .elementor-main-swiper .swiper-slide {
padding: 25px;
}
[class*="elementor-"] .elementor-element[class*="elementor-element-"] .elementor-main-swiper .swiper-slide {
box-shadow: none;
}
.woocommerce-cart-form .actions .coupon {
margin-right: 0px;
}
}
/* End of max 767px */
/* Mobile portrait */
@media only screen and (max-width: 479px) {
.ef-brands {
flex-direction: column;
gap: 20px;
}
.contact-sec .elementor-button {
display: block;
}
.woocommerce-account .post-edit-link {
width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
grid-template-columns: repeat(1, 1fr);
}
.woocommerce-account.woocommerce-js button.button {
width: 100%;
}
.woocommerce-cart .woocommerce-cart-form .button.alt {
width: 100%;
}
}
/* End of max 479px */
/* DSM Rep End */
|