/* ===================================================================== ZU-B WOOCOMMERCE PAGES — Shop / Cart / My Account ===================================================================== Pure CSS reskin of WooCommerce's own real, functional markup — same approach as style.css: no parent theme (Avanam/Neve) template files are touched, so add-to-cart, quantity updates, coupons, checkout, and account security all keep working exactly as WooCommerce/Neve already built them. This only changes how it looks. Loaded only on Shop, product category/tag archives, Cart, Checkout, and My Account (see functions.php: zub_woo_page_assets()). ===================================================================== */ :root{ --zbw-ink:#3B2A15; --zbw-paper:#FFF9DB; --zbw-paper-2:#F7EDB0; --zbw-rust:#B87333; --zbw-rust-dark:#8A4600; --zbw-gold:#C48F65; --zbw-muted:#7A6A4D; --zbw-line:#EADFB8; --zbw-pink:#E62A65; --zbw-teal:#199588; --zbw-cream:#FFFCF5; } /* Dark theme — same tokens, same deep-navy-+-orange-+-white palette as zub-front.css's html.dark-theme block (this file uses its own --zbw-* namespace instead of the front-end's --* tokens, so it needs its own override here to stay in sync). */ html.dark-theme{ --zbw-ink:#F5F3EC; --zbw-paper:#0B1626; --zbw-paper-2:#13233A; --zbw-rust:#FF7A1A; --zbw-rust-dark:#FF974D; --zbw-gold:#FF7A1A; --zbw-muted:#8FA0B3; --zbw-line:rgba(255,255,255,0.14); --zbw-pink:#FF5C7A; --zbw-teal:#37D6C4; --zbw-cream:#FFFCF5; } html.dark-theme body{background:var(--zbw-paper);} /* Full dark-theme coverage: every one of these had a hardcoded `background:#fff` above with no dark-mode override, so — unlike the product cards/filters sidebar/cart flyout/mega-menu, which already had a dark override in zub-front.css — these stayed stark white islands against the dark page. This is what "full theme colour change" (not just a partial one) requires fixing. */ html.dark-theme .woocommerce .widget-area, html.dark-theme .woocommerce-ordering select, html.dark-theme .woocommerce-cart table.shop_table, html.dark-theme .woocommerce-checkout input.input-text, html.dark-theme .woocommerce-checkout select, html.dark-theme .woocommerce-checkout textarea, html.dark-theme .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, html.dark-theme .woocommerce-account .woocommerce-MyAccount-content, html.dark-theme .single-product div.product .woocommerce-product-gallery, html.dark-theme .single-product div.product .variations select, html.dark-theme .zbw-sort, html.dark-theme .zbw-filter-toggle{ background:var(--zbw-paper-2) !important; color:var(--zbw-ink) !important; border-color:var(--zbw-line) !important; } html.dark-theme .woocommerce-cart table.shop_table thead th{background:var(--zbw-paper) !important;} /* ================= SHARED PAGE HEADER BITS ================= */ .zbw-breadcrumb{padding:20px 5vw 0; font-size:13px; color:var(--zbw-muted);} .zbw-breadcrumb a{color:var(--zbw-rust);} /* ================= SHOP / PRODUCT ARCHIVE ================= */ /* Category banner — built from the real term's featured image + description via zub_woo_shop_banner() in functions.php, so it's different (and accurate) on every category page, not a fake mockup image. */ .zbw-cat-banner{ margin:20px 5vw 0; border-radius:12px; overflow:hidden; position:relative; min-height:200px; background:linear-gradient(120deg, var(--zbw-ink), #4A3620); display:flex; align-items:center; padding:34px 50px; } .zbw-cat-banner img.zbw-cb-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;} .zbw-cat-banner .zbw-cb-text{position:relative; z-index:2; color:var(--zbw-cream); max-width:640px;} .zbw-cat-banner .zbw-cb-text .eyebrow{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--zbw-gold); display:block; margin-bottom:8px;} .zbw-cat-banner .zbw-cb-text h1{font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600; font-size:clamp(26px,3.6vw,38px); color:var(--zbw-cream);} .zbw-cat-banner .zbw-cb-text p{margin-top:8px; color:#D8C9A0; font-size:14px;} /* Trending strip — real top-level product categories, linking to their real archive URLs (zub_woo_trending_strip() in functions.php). */ .zbw-trending-strip{display:flex; gap:14px; overflow-x:auto; padding:20px 5vw; -webkit-overflow-scrolling:touch;} .zbw-trending-chip{flex:0 0 auto; padding:9px 18px; border-radius:100px; border:1px solid var(--zbw-line); background:#fff; font-size:13px; font-weight:600; color:var(--zbw-muted); white-space:nowrap;} .zbw-trending-chip.active{background:var(--zbw-rust); color:#fff; border-color:var(--zbw-rust);} .zbw-trending-chip:hover{border-color:var(--zbw-rust); color:var(--zbw-rust);} /* Layout: sidebar + product grid. Neve's own "Shop Sidebar" (Customizer > WooCommerce) renders into the standard .widget-area — we just style it to match. If it's off, .content-area naturally goes full width. */ .woocommerce.archive .content-area, .woocommerce-page.archive .content-area{padding:10px 5vw 20px;} .woocommerce .widget-area{background:#fff; border:1px solid var(--zbw-line); border-radius:8px; padding:24px; height:fit-content;} .woocommerce .widget-area .widget{border-bottom:1px solid var(--zbw-line); padding-bottom:20px; margin-bottom:20px;} .woocommerce .widget-area .widget:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;} .woocommerce .widget-area .widget-title, .woocommerce .widget-area .widgettitle{font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:14px; color:var(--zbw-rust); font-weight:700;} .woocommerce .widget-area ul{list-style:none;} .woocommerce .widget-area li{margin-bottom:10px; font-size:14px; color:var(--zbw-muted);} .woocommerce .widget-area a{color:var(--zbw-muted);} .woocommerce .widget-area a:hover{color:var(--zbw-ink);} .woocommerce .widget-area input[type="checkbox"], .woocommerce .widget-area input[type="radio"]{accent-color:var(--zbw-rust); width:15px; height:15px;} .woocommerce .price_slider_amount .button{background:var(--zbw-rust) !important; border-color:var(--zbw-rust) !important; font-size:11px;} .woocommerce .price_slider .ui-slider-range{background-color:var(--zbw-rust) !important;} .woocommerce .price_slider .ui-slider-handle{background-color:var(--zbw-rust-dark) !important; border-color:var(--zbw-rust-dark) !important;} .woocommerce .star-rating{color:var(--zbw-gold) !important;} /* Result count + ordering row */ .woocommerce-result-count{font-size:14px; color:var(--zbw-muted);} .woocommerce-ordering select{border:1px solid var(--zbw-line); border-radius:4px; padding:9px 14px; background:#fff; font-size:13px;} /* Product grid cards (real ul.products li.product output) */ .woocommerce ul.products{display:grid !important; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 !important;} .woocommerce ul.products li.product{ width:100% !important; margin:0 !important; background:#fff; border:1px solid var(--zbw-line); border-radius:8px; overflow:hidden; transition:transform .25s, box-shadow .25s; position:relative; padding:0 !important; } .woocommerce ul.products li.product:hover{transform:translateY(-6px); box-shadow:0 20px 34px rgba(138,70,0,0.12);} .woocommerce ul.products li.product a{text-decoration:none;} .woocommerce ul.products li.product .onsale{ position:absolute !important; top:12px; left:12px; right:auto; z-index:2; min-width:0; height:auto; line-height:1; font-size:10px; font-weight:700; text-transform:uppercase; padding:5px 10px; border-radius:100px; background:var(--zbw-teal) !important; color:#fff !important; } .woocommerce ul.products li.product .badge-new{ position:absolute; top:12px; left:12px; z-index:2; background:#1E9E5A; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding:5px 10px; border-radius:100px; } /* Stack instead of overlap when a product is both new and on sale. */ .woocommerce ul.products li.product .onsale ~ .badge-new, .woocommerce ul.products li.product .badge-new ~ .onsale{top:44px;} /* Wishlist heart — overlaid on the product photo, opposite corner from the sale/new badges. The photo itself is real photography (white background) even in dark mode, so this is the concrete case the "navy icon on a white surface, in dark theme" rule is for. */ .woocommerce ul.products li.product .zbw-wish-btn{ position:absolute !important; top:10px; right:10px; z-index:5; width:32px !important; height:32px !important; border-radius:50% !important; background:rgba(255,255,255,0.92) !important; border:none !important; box-shadow:0 4px 10px rgba(59,42,21,0.14) !important; display:flex !important; align-items:center; justify-content:center; color:var(--zbw-ink) !important; cursor:pointer; transition:transform .2s, color .2s, background .2s; padding:0 !important; } .woocommerce ul.products li.product .zbw-wish-btn .zub-icon{width:16px; height:16px;} .woocommerce ul.products li.product .zbw-wish-btn:hover{transform:scale(1.1);} .woocommerce ul.products li.product .zbw-wish-btn.active{color:var(--zbw-rust) !important; fill:var(--zbw-rust);} .woocommerce ul.products li.product .zbw-wish-btn.active .zub-icon{fill:currentColor;} .woocommerce ul.products li.product .zbw-wish-btn.zbw-loading-btn{opacity:.55; pointer-events:none;} html.dark-theme .woocommerce ul.products li.product .zbw-wish-btn{color:var(--icon-navy) !important;} html.dark-theme .woocommerce ul.products li.product .zbw-wish-btn.active{color:var(--zbw-rust) !important;} .woocommerce ul.products li.product img{ width:100%; aspect-ratio:1/1.1; object-fit:cover; background:var(--zbw-paper-2); transition:transform .5s; margin:0 !important; } .woocommerce ul.products li.product:hover img{transform:scale(1.06);} .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-body,'Inter',sans-serif) !important; font-size:15px !important; font-weight:600 !important; margin:14px 18px 8px !important; color:var(--zbw-ink) !important; padding:0 !important; } /* Same "white card even in dark mode" situation as .zbw-wish-btn above: * html.dark-theme flips --zbw-ink to a near-white shade for the dark * navy page background, but this card's background stays #fff in * both themes — so in dark mode the title was near-white text on a * white card, unreadable. Pin it to the fixed dark-navy token instead * of the theme-switching ink variable. */ html.dark-theme .woocommerce ul.products li.product .woocommerce-loop-category__title, html.dark-theme .woocommerce ul.products li.product .woocommerce-loop-product__title{ color:var(--icon-navy) !important; } /* Same reasoning as the title above — pin Compare's text/icon color so it doesn't inherit the theme-switching ink variable and go near-invisible on this always-white card in dark mode. */ html.dark-theme .woocommerce ul.products li.product .compare, html.dark-theme .woocommerce ul.products li.product a.compare, html.dark-theme .woocommerce ul.products li.product [class*="compare"]{ color:var(--icon-navy) !important; } .woocommerce ul.products li.product .price{padding:0 18px 18px !important; display:block !important; font-weight:700; color:var(--zbw-rust); font-size:14px;} .woocommerce ul.products li.product .price del{color:var(--zbw-muted); text-decoration:line-through; font-weight:400; font-size:13px; opacity:1;} .woocommerce ul.products li.product .price ins{text-decoration:none;} .zbw-discount-pct{display:none;} /* shown only on the compact mobile card, see the ≤640px block below */ /* Hidden, not just unstyled: the parent theme reserves layout space * for it via `.star-rating ~ .price{ padding-right:4.6em }` — a more * specific selector than ours (it's what was actually squeezing * "Select Options" into a ~70px gap and causing it to overlap the * price/title above it, on every card, not just cards with real * reviews — WooCommerce prints an empty 0-star widget by default even * with zero reviews). No reviews exist on these products yet anyway; * hiding removes the whole reserved-space mechanism at the source * rather than fighting it with more specificity. Revisit once real * reviews exist and a rating display is wanted. */ .woocommerce ul.products li.product .star-rating{display:none !important;} /* * Same defensive pattern as the header icons / wishlist button above: * force every layout-relevant property with !important so nothing * from the parent theme's own (undocumented, minified) hover/quick- * shop behaviour can reposition, hide, or overlay-duplicate these — * which is what was causing the "ghosted", overlapping card text. * Real fix is the two rules above (specificity + hiding the trigger); * this is the belt-and-suspenders layer on top. */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .add_to_cart_button, .woocommerce ul.products li.product .added_to_cart, .woocommerce ul.products li.product .compare, .woocommerce ul.products li.product a.compare, .woocommerce ul.products li.product [class*="compare"]{ position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important; float:none !important; pointer-events:auto !important; } /* * The parent framework's "show add-to-cart on hover" mode doesn't just * hide the price/button until hover (handled above) — it also shifts * the ENTIRE title+price+button wrapper (.entry-content-wrap) up by * `transform:translateY(-2rem)` by default, only settling into place * on :hover/:focus-within. Until a card is hovered, that shift tucks * the title partly behind the product image, so it renders faint/ * clipped rather than fully hidden — the "product details not * visible" bug on any card the visitor hasn't moused over yet. Same * belt-and-suspenders fix as above: force it static regardless of * hover state or the Customizer's "Product Archive → Button Style" * setting. */ .woocommerce ul.products li.product .entry-content-wrap{ transform:none !important; } /* The parent "Base" framework only gives the add-to-cart link real * button styling (background/border/full-width block) when the * Customizer's "Product Archive → Button Style" is set to "Button" — * any other value (its default is "Text") renders it as bare inline * text with no background or border (`.products:not(.woo-archive- * btn-button) .button{background:transparent;border:0;display: * inline;...}` in woocommerce.min.css), which reads as a missing * button rather than a styled one. Rather than depend on that * Customizer setting being correct, these selectors repeat the rules * below at the same specificity+!important the framework uses, so * the button renders correctly regardless of that setting. */ .woocommerce ul.products li.product .add_to_cart_button, .woocommerce ul.products li.product .added_to_cart, .woocommerce ul.products li.product .button, .products:not(.woo-archive-btn-button) li:where(:not(.woo-archive-btn-button)) .add_to_cart_button, .products:not(.woo-archive-btn-button) li:where(:not(.woo-archive-btn-button)) .added_to_cart{ margin:0 18px 18px !important; display:block !important; width:calc(100% - 36px) !important; text-align:center !important; font-size:12px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:0.04em !important; color:var(--zbw-rust) !important; background:transparent !important; border:1px solid var(--zbw-rust) !important; border-radius:100px !important; padding:10px !important; box-shadow:none !important; } .woocommerce ul.products li.product .add_to_cart_button:hover, .woocommerce ul.products li.product .added_to_cart:hover, .woocommerce ul.products li.product .button:hover{ background:var(--zbw-rust) !important; color:#fff !important; } /* The parent theme's "show add-to-cart on hover" Customizer option * wraps price+button in .product-action-wrap and pins it with * `position:absolute; bottom:-2rem; opacity:0` (only revealed on * hover) — see .products.woo-archive-action-on-hover in * woocommerce.min.css. That wrapper sat *outside* the elements the * belt-and-suspenders rule above already forces static, so its * children rendered statically inside an absolutely-positioned, * off-card box — the exact "price/button pinned over the image" * overlap bug. Forcing the wrapper itself into normal flow fixes it * at the source, on every card, regardless of that Customizer setting. */ .woocommerce ul.products li.product .product-action-wrap, .products.woo-archive-action-on-hover li.product .product-action-wrap{ position:static !important; opacity:1 !important; bottom:auto !important; left:auto !important; right:auto !important; width:auto !important; padding:0 !important; margin-top:0 !important; transition:none !important; } @media (max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);}} /* ===================================================================== * Compact mobile grid — a single column (full-width cards, like a * vertical list) at phone widths, with the discount shown as inline * "X% off" text next to the price alongside the corner badge. * ===================================================================== */ @media (max-width:640px){ .woocommerce ul.products{grid-template-columns:1fr !important; gap:16px !important;} .woocommerce ul.products li.product{border-radius:8px !important;} .woocommerce ul.products li.product img{aspect-ratio:4/5 !important;} .woocommerce ul.products li.product .zbw-wish-btn{ top:10px !important; right:10px !important; width:32px !important; height:32px !important; } .woocommerce ul.products li.product .zbw-wish-btn .zub-icon{width:16px; height:16px;} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:14px !important; line-height:1.4 !important; margin:14px 16px 6px !important; } .woocommerce ul.products li.product .price{ padding:0 16px 6px !important; font-size:16px !important; display:flex !important; align-items:baseline !important; gap:8px !important; flex-wrap:wrap !important; } .woocommerce ul.products li.product .price del{font-size:12px !important;} /* Discount text sits inline next to the price, Flipkart-style ("₹599 ₹999 40% off" all on one line) — the span itself is rendered site-wide by zub_woo_price_html_discount_pct() in functions.php (a real child of .price, not CSS-generated content) but only shown at this width; the corner "X% OFF" badge already covers it at larger sizes. */ .zbw-discount-pct{display:inline; color:#188A3D; font-size:12px; font-weight:700;} .woocommerce ul.products li.product .add_to_cart_button, .woocommerce ul.products li.product .added_to_cart{ margin:0 16px 16px !important; width:calc(100% - 32px) !important; font-size:12px !important; padding:10px !important; } } /* Pagination */ .woocommerce nav.woocommerce-pagination ul{border:none !important; display:flex; gap:8px;} .woocommerce nav.woocommerce-pagination ul li{border:none !important;} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:4px !important; font-size:13px; font-weight:600; color:var(--zbw-ink) !important; border:none !important; padding:0 !important; } .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--zbw-rust) !important; color:#fff !important;} .woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--zbw-paper-2) !important;} /* ================= SINGLE PRODUCT (light-touch, same palette) ================= */ .single-product .price{color:var(--zbw-rust); font-weight:700;} .single-product .price del{color:var(--zbw-muted);} .single-product div.product .star-rating{color:var(--zbw-gold);} /* ================= CART PAGE ================= */ .woocommerce-cart table.shop_table{background:#fff; border:1px solid var(--zbw-line); border-radius:8px; border-collapse:collapse; overflow:hidden; width:100%;} .woocommerce-cart table.shop_table thead th{background:var(--zbw-paper-2); text-align:left; padding:14px 16px; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; border:none;} .woocommerce-cart table.shop_table td{padding:18px 16px; border-top:1px solid var(--zbw-line); vertical-align:middle;} .woocommerce-cart table.shop_table td.product-name a{font-weight:600; font-size:14px; color:var(--zbw-ink);} .woocommerce-cart table.shop_table td.product-thumbnail img{width:64px; height:76px; object-fit:cover; border-radius:6px;} .woocommerce-cart table.shop_table td.product-price, .woocommerce-cart table.shop_table td.product-subtotal{font-weight:600;} .woocommerce-cart .quantity .qty{ width:56px; padding:8px; border:1px solid var(--zbw-line); border-radius:4px; text-align:center; font-size:14px; } .woocommerce-cart .product-remove a.remove{ color:var(--zbw-muted) !important; background:transparent !important; font-size:18px !important; } .woocommerce-cart .product-remove a.remove:hover{color:#c0392b !important; background:transparent !important;} .woocommerce-cart .coupon{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:20px;} .woocommerce-cart .coupon input.input-text{padding:11px 14px; border:1px solid var(--zbw-line); border-radius:4px; min-width:200px;} .woocommerce-cart .coupon button.button{background:transparent !important; border:1px solid var(--zbw-ink) !important; color:var(--zbw-ink) !important;} .woocommerce-cart .cart-collaterals .cart_totals{ background:var(--zbw-paper-2); border:1px solid var(--zbw-line); border-radius:8px; padding:26px; float:none; width:100%; } .woocommerce-cart .cart-collaterals .cart_totals h2{font-family:var(--font-display,'Fraunces',Georgia,serif); margin-bottom:18px; font-size:20px;} .woocommerce-cart .cart-collaterals .cart_totals table{width:100%; background:transparent; border:none;} .woocommerce-cart .cart-collaterals .cart_totals table th, .woocommerce-cart .cart-collaterals .cart_totals table td{ padding:10px 0; border-top:1px solid var(--zbw-line); font-size:14px; background:transparent; border-left:none; border-right:none; } .woocommerce-cart .cart-collaterals .cart_totals .order-total th, .woocommerce-cart .cart-collaterals .cart_totals .order-total td{font-weight:700; font-size:16px; color:var(--zbw-rust);} .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ display:block !important; width:100%; margin-top:16px; padding:15px; text-align:center; background:linear-gradient(180deg, #DA9F1F 0%, var(--zbw-rust) 55%, var(--zbw-rust-dark) 100%) !important; border:1px solid var(--zbw-rust-dark) !important; color:#fff !important; border-radius:5px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 0 var(--zbw-rust-dark), 0 6px 14px rgba(143,95,0,0.28); transition:transform .18s ease, box-shadow .18s ease, background .25s; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{ background:linear-gradient(180deg, #E5AC2D 0%, #DA9F1F 55%, var(--zbw-rust) 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 0 var(--zbw-rust-dark), 0 10px 20px rgba(143,95,0,0.34); transform:translateY(-2px); } /* ================= CHECKOUT (light-touch, same field/button language as cart) ================= */ .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order-table{background:var(--zbw-paper-2); border:1px solid var(--zbw-line); border-radius:8px;} .woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea{ border:1px solid var(--zbw-line) !important; border-radius:4px !important; padding:11px 14px !important; background:#fff !important; } .woocommerce-checkout #place_order{ background:linear-gradient(180deg, #DA9F1F 0%, var(--zbw-rust) 55%, var(--zbw-rust-dark) 100%) !important; border:1px solid var(--zbw-rust-dark) !important; border-radius:5px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:0.05em !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 0 var(--zbw-rust-dark), 0 6px 14px rgba(143,95,0,0.28); transition:transform .18s ease, box-shadow .18s ease, background .25s; } .woocommerce-checkout #place_order:hover{ background:linear-gradient(180deg, #E5AC2D 0%, #DA9F1F 55%, var(--zbw-rust) 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 0 var(--zbw-rust-dark), 0 10px 20px rgba(143,95,0,0.34); transform:translateY(-2px); } /* ================= MY ACCOUNT ================= */ .woocommerce-account .woocommerce{display:grid; grid-template-columns:230px 1fr; gap:30px; align-items:start;} .woocommerce-account .woocommerce-MyAccount-navigation{ background:var(--zbw-paper-2); border:1px solid var(--zbw-line); border-radius:8px; overflow:hidden; } .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;} .woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--zbw-line);} .woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:none;} .woocommerce-account .woocommerce-MyAccount-navigation a{display:block; padding:13px 20px; font-size:14px; font-weight:600; color:var(--zbw-ink);} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--zbw-rust); background:#fff;} .woocommerce-account .woocommerce-MyAccount-content{background:#fff; border:1px solid var(--zbw-line); border-radius:8px; padding:34px;} @media (max-width:760px){.woocommerce-account .woocommerce{grid-template-columns:1fr;}} /* Dashboard welcome + stat cards (markup added via zub_woo_account_dashboard_intro() in functions.php) */ .zbw-welcome{background:var(--zbw-paper-2); padding:16px 20px; border-radius:6px; border-left:3px solid var(--zbw-rust); margin-bottom:24px; font-size:14px;} .zbw-dash-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:28px;} .zbw-dash-card{border:1px solid var(--zbw-line); border-radius:8px; padding:20px; text-align:center;} .zbw-dash-card .num{font-family:var(--font-display,'Fraunces',Georgia,serif); font-size:28px; color:var(--zbw-rust); font-weight:700;} .zbw-dash-card .lbl{font-size:12.5px; color:var(--zbw-muted); margin-top:4px;} @media (max-width:760px){.zbw-dash-cards{grid-template-columns:1fr;}} /* Orders table + status pills */ .woocommerce-account table.woocommerce-orders-table{width:100%; border-collapse:collapse;} .woocommerce-account table.woocommerce-orders-table th{background:var(--zbw-paper-2); text-align:left; padding:12px 14px; font-size:12px; text-transform:uppercase; letter-spacing:0.04em;} .woocommerce-account table.woocommerce-orders-table td{padding:14px; border-top:1px solid var(--zbw-line); font-size:13.5px;} .woocommerce-account .woocommerce-orders-table__cell-order-status mark{background:none; color:inherit;} .woocommerce-account .woocommerce-orders-table__cell-order-status{position:relative;} .woocommerce-account .button.view{padding:6px 14px; border:1px solid var(--zbw-rust); color:var(--zbw-rust) !important; background:transparent !important; border-radius:4px; font-size:12px; font-weight:600;} /* status pill colors driven by order status class WooCommerce already outputs on the row */ .woocommerce-account tr.order .woocommerce-orders-table__cell-order-status{font-weight:700; text-transform:uppercase; font-size:11px;} .woocommerce-account tr.status-completed .woocommerce-orders-table__cell-order-status{color:#3F7A56;} .woocommerce-account tr.status-processing .woocommerce-orders-table__cell-order-status{color:var(--zbw-rust-dark);} .woocommerce-account tr.status-cancelled .woocommerce-orders-table__cell-order-status, .woocommerce-account tr.status-refunded .woocommerce-orders-table__cell-order-status{color:var(--zbw-pink);} .woocommerce-account tr.status-on-hold .woocommerce-orders-table__cell-order-status, .woocommerce-account tr.status-pending .woocommerce-orders-table__cell-order-status{color:var(--zbw-gold);} /* Addresses */ .woocommerce-account .woocommerce-Addresses{display:grid; grid-template-columns:1fr 1fr; gap:24px;} .woocommerce-account .woocommerce-Address{border:1px solid var(--zbw-line); border-radius:8px; padding:22px;} .woocommerce-account .woocommerce-Address-title h3{font-size:16px; margin-bottom:6px;} .woocommerce-account .woocommerce-Address-title .edit{color:var(--zbw-rust); font-size:12.5px; font-weight:600;} @media (max-width:760px){.woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr;}} /* Login / register / lost password forms */ .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register, .woocommerce-account .woocommerce-ResetPassword, .woocommerce-account .woocommerce-EditAccountForm{max-width:460px;} .woocommerce-account form p.form-row label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--zbw-ink);} .woocommerce-account form .woocommerce-Input{ width:100%; padding:11px 14px; border:1px solid var(--zbw-line); border-radius:4px; background:var(--zbw-paper); } .woocommerce-account form button.button, .woocommerce-account form input.button{ background:var(--zbw-rust) !important; color:#fff !important; border-radius:4px !important; padding:13px 26px !important; font-size:13px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:0.05em !important; border:none !important; } .woocommerce-account form button.button:hover, .woocommerce-account form input.button:hover{background:var(--zbw-rust-dark) !important;} .woocommerce-account .woocommerce-LostPassword a{font-size:13px; color:var(--zbw-rust);} /* ================= LOGGED-OUT LOGIN/REGISTER: split-screen photo+quote / dark gold card ================= Matches wp-login.php's design (assets/css/zub-login.css). WordPress already adds/removes the "logged-in" body class automatically, so this only ever applies when someone is actually signed out — no extra PHP needed, and it stops applying itself the moment they log in. */ body.woocommerce-account:not(.logged-in) .zbw-breadcrumb, body.woocommerce-account:not(.logged-in) h1.page-title, body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-navigation{ display:none; } body.woocommerce-account:not(.logged-in) .woocommerce{ display:block; min-height:calc(100vh - 140px); position:relative; padding:0; margin:0 -5vw; background-color:var(--zbw-paper); background-image: radial-gradient(circle, rgba(196,143,101,0.35) 0%, transparent 60%), radial-gradient(circle, rgba(184,115,51,0.28) 0%, transparent 55%); background-size:340px 340px, 260px 260px; background-repeat:no-repeat; background-position:62% 22%, 88% 78%; animation:zbwOrbDrift 16s ease-in-out infinite alternate; perspective:1400px; } @keyframes zbwOrbDrift{ 0%{ background-position:62% 22%, 88% 78%; } 100%{ background-position:57% 30%, 82% 70%; } } body.woocommerce-account:not(.logged-in) .woocommerce::before{ content:""; position:absolute; inset:0 50% 0 0; z-index:0; background-image: linear-gradient(180deg, rgba(20,19,17,0.15), rgba(20,19,17,0.72)), url('https://www.zu-b.com/wp-content/uploads/2026/03/zub-banner-main.png'); background-size:130% auto; background-position:center; animation:zbwKenBurns 22s ease-in-out infinite alternate; } @keyframes zbwKenBurns{ 0%{ background-size:130% auto; background-position:center 30%; } 100%{ background-size:145% auto; background-position:center 55%; } } body.woocommerce-account:not(.logged-in) .woocommerce::after{ content:"\201C Style for everyone \2014 without a hierarchy between them. \201D\A\A ZU-B \00b7 Since 2025"; white-space:pre-line; position:absolute; left:0; right:50%; bottom:0; z-index:1; padding:60px; box-sizing:border-box; font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic; font-weight:500; font-size:26px; line-height:1.35; color:var(--zbw-cream); opacity:0; animation:zbwFadeInUp 1s ease-out .6s forwards; } @keyframes zbwFadeInUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content{ position:relative; z-index:2; width:380px; max-width:90vw; margin:60px 8vw 60px auto; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:36px 32px; backdrop-filter:blur(6px); opacity:0; animation:zbwCardIn .8s cubic-bezier(.22,.68,0,1.01) .15s forwards; transform-style:preserve-3d; transform:rotateX(var(--zb-ry, 0deg)) rotateY(var(--zb-rx, 0deg)); transition:transform .15s ease-out, box-shadow .15s ease-out; box-shadow:0 30px 60px rgba(20,19,17,0.35); } @keyframes zbwCardIn{ from{ opacity:0; transform:translateY(28px) rotateX(6deg) scale(.97); } to{ opacity:1; transform:translateY(0) rotateX(0deg) scale(1); } } @media (prefers-reduced-motion: reduce){ body.woocommerce-account:not(.logged-in) .woocommerce, body.woocommerce-account:not(.logged-in) .woocommerce::before{ animation:none; } body.woocommerce-account:not(.logged-in) .woocommerce::after{ animation:none; opacity:1; } body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content{ animation:none; opacity:1; } } body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content h2, body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content h3{color:var(--zbw-cream); margin-bottom:18px;} body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content form p.form-row label{color:#D8C9A0;} body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content .woocommerce-Input{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.14); color:var(--zbw-cream); } body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content .woocommerce-Input:focus{ border-color:var(--zbw-gold); outline:none; } body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content form button.button, body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content form input.button{ background:var(--zbw-gold) !important; color:var(--zbw-ink) !important; } body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content form button.button:hover, body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content form input.button:hover{background:#dba876 !important;} body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content .woocommerce-LostPassword a, body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content a{color:var(--zbw-gold);} body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content .woocommerce-form-login__rememberme{color:#D8C9A0;} /* WooCommerce's login/register form-login.php renders as a 2-column layout by default (u-columns) — force it to stack vertically so it fits cleanly inside our narrow card, and add the floating logo. */ body.woocommerce-account:not(.logged-in) .u-columns.col2-set{display:block !important; margin:0 !important;} body.woocommerce-account:not(.logged-in) .u-column1.col-1, body.woocommerce-account:not(.logged-in) .u-column2.col-2{width:100% !important; float:none !important; margin:0 0 30px !important;} body.woocommerce-account:not(.logged-in) .u-column2.col-2{border-top:1px solid rgba(255,255,255,0.14); padding-top:26px; margin-bottom:0 !important;} body.woocommerce-account:not(.logged-in) #customer_login h2{color:var(--zbw-cream); font-size:20px; margin-bottom:18px;} .zbw-login-logo{text-align:center; margin-bottom:22px; perspective:600px;} .zbw-login-logo img{ height:44px; width:auto; display:inline-block; filter:brightness(0) invert(1) drop-shadow(0 8px 18px rgba(196,143,101,0.35)); animation:zbwLogoFloat 5s ease-in-out infinite; transform-style:preserve-3d; } @keyframes zbwLogoFloat{ 0%, 100%{ transform:translateY(0) rotateY(0deg); } 25%{ transform:translateY(-5px) rotateY(-8deg); } 75%{ transform:translateY(3px) rotateY(8deg); } } @media (prefers-reduced-motion: reduce){ .zbw-login-logo img{ animation:none; } } @media (max-width:900px){ body.woocommerce-account:not(.logged-in) .woocommerce::before, body.woocommerce-account:not(.logged-in) .woocommerce::after{display:none;} body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content{margin:30px auto; width:100%; max-width:420px;} } /* WooCommerce's own notice/message boxes (used everywhere above) */ .woocommerce-message, .woocommerce-info{ border-top-color:var(--zbw-rust) !important; background:var(--zbw-paper-2) !important; color:var(--zbw-ink) !important; } .woocommerce-message::before, .woocommerce-info::before{color:var(--zbw-rust) !important;} .woocommerce-error{border-top-color:var(--zbw-pink) !important;} .woocommerce-message .button, .woocommerce-info .button{background:var(--zbw-rust) !important; color:#fff !important;} /* ===================================================================== SINGLE PRODUCT PAGE — full pass Added when zu-b-custom became the standalone Zu-B theme. Previously this page only got a light color-only touch; now styled to match the same design system as Shop/Cart/Account (still WooCommerce's own real markup/hooks underneath — gallery, variations, add-to-cart, reviews are all untouched functionally). ===================================================================== */ .single-product #zub-main-content{background:var(--zbw-paper);} .single-product div.product{max-width:1300px; margin:0 auto; padding:30px 5vw 20px;} .single-product div.product .woocommerce-product-gallery{border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--zbw-line);} .single-product div.product .woocommerce-product-gallery__image img{border-radius:0;} .single-product div.product .flex-control-thumbs li img{border-radius:6px; border:1px solid var(--zbw-line); opacity:.75;} .single-product div.product .flex-control-thumbs li img.flex-active{opacity:1; border-color:var(--zbw-rust);} .single-product div.product .summary{padding-left:10px;} .single-product div.product .product_title{font-family:var(--font-display,'Fraunces',Georgia,serif); font-size:clamp(24px,2.6vw,34px); color:var(--zbw-ink); margin-bottom:10px;} .single-product div.product .price{font-size:20px;} .single-product div.product .price ins{text-decoration:none;} .single-product div.product .woocommerce-product-rating{margin-bottom:16px;} .single-product div.product .woocommerce-product-details__short-description{color:var(--zbw-muted); line-height:1.7; margin-bottom:18px;} .single-product div.product form.cart{margin-bottom:22px;} .single-product div.product .variations select{padding:10px 14px; border:1px solid var(--zbw-line); border-radius:6px; font-family:inherit; background:var(--zbw-paper) !important; color:var(--zbw-ink) !important;} /* Quantity input had no explicit background/text color set at all — * it was just inheriting whatever WooCommerce core's own CSS (or the * browser default) happened to apply. That's what made it "not * visible": nothing here guaranteed the text color and the background * would ever actually contrast, in either theme. Forcing both * explicitly (light: cream bg / dark text, dark: navy bg / light * text, via the same tokens everything else already uses) fixes it * for both themes at once. */ .single-product div.product .quantity input.qty{ border:1px solid var(--zbw-line) !important; border-radius:6px; padding:10px; width:64px; text-align:center; background:var(--zbw-paper) !important; color:var(--zbw-ink) !important; } .single-product div.product .single_add_to_cart_button{ background:linear-gradient(180deg, #DA9F1F 0%, var(--zbw-rust) 55%, var(--zbw-rust-dark) 100%) !important; border:none !important; color:#fff !important; padding:14px 34px !important; border-radius:8px !important; font-weight:700 !important; letter-spacing:0.02em; box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 0 var(--zbw-rust-dark); margin-right:12px !important; margin-bottom:12px !important; text-align:center !important; line-height:normal !important; } .single-product div.product .single_add_to_cart_button:hover{transform:translateY(-1px);} /* "Buy Now" — same class list as Add to Cart (so WooCommerce's own variation-picker JS enables/disables both together), styled as its outline counterpart so the two read as a clear pair rather than two identical buttons. See zub_woo_buy_now_button() in functions.php. */ .single-product div.product .zbw-buy-now-button{ background:transparent !important; border:2px solid var(--zbw-rust) !important; color:var(--zbw-rust) !important; padding:12px 34px !important; box-shadow:none !important; margin-bottom:12px !important; text-align:center !important; line-height:normal !important; } .single-product div.product .zbw-buy-now-button:hover{background:var(--zbw-rust) !important; color:#fff !important; transform:translateY(-1px);} .single-product div.product .product_meta{margin-top:18px; padding-top:14px; border-top:1px solid var(--zbw-line); font-size:13px; color:var(--zbw-muted);} .single-product div.product .product_meta a{color:var(--zbw-rust);} .single-product .woocommerce-tabs{max-width:1300px; margin:20px auto 0; padding:0 5vw 60px;} .single-product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--zbw-line); display:flex; gap:6px; list-style:none; padding:0;} .single-product .woocommerce-tabs ul.tabs li{margin:0;} .single-product .woocommerce-tabs ul.tabs li a{display:inline-block; padding:12px 18px; font-weight:600; color:var(--zbw-muted); font-size:14px;} .single-product .woocommerce-tabs ul.tabs li.active a{color:var(--zbw-ink); border-bottom:2px solid var(--zbw-rust);} .single-product .woocommerce-tabs .panel{padding:24px 0; color:var(--zbw-muted); line-height:1.7;} .single-product .related.products{max-width:1300px; margin:0 auto; padding:0 5vw 70px;} .single-product .related.products > h2{font-family:var(--font-display,'Fraunces',Georgia,serif); font-size:26px; margin-bottom:20px;} @media (max-width:860px){ .single-product div.product{grid-template-columns:1fr;} .single-product div.product .summary{padding-left:0; margin-top:22px;} /* Both buttons full-width and stacked below the image on mobile — matches the "buttons below the product image" ask exactly (the image is already first in the grid/DOM order, summary — including these two buttons — already follows it; this just makes the pair itself read cleanly at this width instead of two half-width buttons potentially wrapping awkwardly). */ .single-product div.product .single_add_to_cart_button, .single-product div.product .zbw-buy-now-button{ display:block !important; width:100% !important; margin-right:0 !important; text-align:center !important; } } /* ================= SHOP FILTERS (sidebar / mobile drawer) ================= Two-column layout injected around WooCommerce's own native product grid (see functions.php: zub_shop_layout_open/close()) — no archive-product.php override, the grid itself is still 100% real WooCommerce markup. */ .zbw-shop-layout{ max-width:1400px; margin:0 auto; padding:30px 5vw 70px; display:grid; grid-template-columns:260px 1fr; gap:44px; align-items:start; } /* Defensive fallback alongside the real fix in sidebar.php (which stops the parent theme's empty widget-area sidebar from rendering at all on these pages) — guarantees #primary/#main never sit at a squeezed width even if some other parent-theme CSS also reserves room for a sidebar column here. IMPORTANT: the parent theme lays this out with CSS Grid, not flex — global.min.css has `.content-container{display:grid; grid-template-columns:5fr 2fr}` (or `2fr 5fr` for a left sidebar). Forcing #main/#primary to width:100% does nothing if they're still sitting in a grid column that's only 5fr/7 (~71%) wide — the content looked "stuck at half/most of the screen" because sidebar.php correctly renders nothing, but the grid still reserved the column, leaving that space empty instead of collapsing. Fix is on the GRID CONTAINER itself: collapse it to one full-width column. */ body.woocommerce-shop .content-container, body.tax-product_cat .content-container, body.tax-product_tag .content-container{ display:block !important; grid-template-columns:1fr !important; } body.woocommerce-shop #primary.content-area, body.tax-product_cat #primary.content-area, body.tax-product_tag #primary.content-area, body.woocommerce-shop .content-container.site-container, body.tax-product_cat .content-container.site-container, body.tax-product_tag .content-container.site-container, body.woocommerce-shop #main.site-main, body.tax-product_cat #main.site-main, body.tax-product_tag #main.site-main{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; } .zbw-filter-toggle{display:none;} .zbw-filters-backdrop{ display:none; position:fixed; inset:0; background:rgba(36,26,13,0.5); z-index:299; } /* Desktop defaults (hidden) — shown only inside the ≤960px media query below, same pattern as .zbw-filter-toggle/.zbw-filters-backdrop above. Desktop has the filters column always visible in the page flow and a plain underneath as the plain checkboxes above (so the read/build/AJAX filter logic in functions.php needs no changes), just a slider instead of a square box. */ .zbw-toggle{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; font-size:13.5px; color:var(--zbw-ink); cursor:pointer;} .zbw-toggle input{position:absolute; opacity:0; width:1px; height:1px;} .zbw-toggle-track{ position:relative; flex-shrink:0; width:38px; height:22px; border-radius:999px; background:var(--zbw-line); transition:background .2s var(--ease,ease); } .zbw-toggle-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:left .2s var(--ease,ease); } .zbw-toggle input:checked + .zbw-toggle-track{background:var(--zbw-rust);} .zbw-toggle input:checked + .zbw-toggle-track .zbw-toggle-thumb{left:18px;} .zbw-toggle input:focus-visible + .zbw-toggle-track{outline:2px solid var(--zbw-rust); outline-offset:2px;} .zbw-price-inputs{display:flex; align-items:center; gap:8px;} .zbw-price-inputs input{ width:0; flex:1; min-width:0; padding:9px 10px; border:1px solid var(--zbw-line); border-radius:6px; font-size:13px; color:var(--zbw-ink); background:var(--zbw-paper); } .zbw-price-inputs span{color:var(--zbw-muted);} .zbw-filters-clear{ width:100%; margin-top:6px; padding:10px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--zbw-rust-dark); border:1px solid var(--zbw-rust-dark); border-radius:6px; background:transparent; transition:background .2s, color .2s; } .zbw-filters-clear:hover{background:var(--zbw-rust-dark); color:#fff;} /* Toolbar: result count + sort, replaces WooCommerce's own default result-count/ordering row (removed in functions.php). */ .zbw-shop-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--zbw-line); } .zbw-result-count{font-size:13.5px; color:var(--zbw-muted);} .zbw-sort{ padding:9px 14px; border:1px solid var(--zbw-line); border-radius:6px; font-size:13px; color:var(--zbw-ink); background:#fff; min-width:180px; -webkit-appearance:menulist; appearance:menulist; } /* The parent theme's own "Showing X of Y / Sort by / grid-list toggle" row (inc/components/woocommerce/component.php: archive_loop_top(), customizer-controlled) duplicates the .zbw-shop-toolbar above on Shop/category/tag archives. It's registered as an object method with no public accessor, so it can't be cleanly unhooked from here — hiding its known wrapper is the reliable fix. */ body.woocommerce-shop .base-shop-top-row, body.tax-product_cat .base-shop-top-row, body.tax-product_tag .base-shop-top-row, body.woocommerce-shop #sticky_filter.base-shop-top-row, body.tax-product_cat #sticky_filter.base-shop-top-row, body.tax-product_tag #sticky_filter.base-shop-top-row{ display:none !important; } /* Same problem, different component: the parent theme's own * "archive hero" banner — inc/components/woocommerce/component.php's * output_content_wrapper() fires do_action('base_hero_header') on * every archive page (Customizer-controlled, "Product Archive" page * title style), which renders template-parts/content/archive_hero.php * — a second breadcrumb + title block, always in the parent theme's * own fixed light colours (not wired to html.dark-theme at all, since * it predates this theme's dark mode entirely). That's what showed up * as a plain cream box *underneath* zub_woo_shop_banner()'s real * (theme-aware) hero above it — same "Home / Shop / Girls" breadcrumb * and "Girls" title, duplicated. Hiding it, same reasoning as the * result-count/sidebar fixes above: our own hero already covers this * exact content, correctly themed, so there's nothing to reskin here * — the fix is not rendering the duplicate at all. * Class names from inc/template-functions/archive-functions.php * get_archive_hero_classes(): "entry-hero" + "{post_type}-archive-hero-section". */ body.woocommerce-shop .entry-hero.product-archive-hero-section, body.tax-product_cat .entry-hero.product-archive-hero-section, body.tax-product_tag .entry-hero.product-archive-hero-section{ display:none !important; } /* Loading state while an AJAX filter/sort/page request is in flight — dim + block pointer events so a second click can't fire a duplicate/overlapping request while one is already running. */ .zbw-shop-main{position:relative; transition:opacity .2s;} .zbw-shop-main.zbw-loading{opacity:.45; pointer-events:none;} .zbw-shop-main.zbw-loading::after{ content:''; position:absolute; top:40px; left:50%; width:34px; height:34px; margin-left:-17px; border:3px solid var(--zbw-line); border-top-color:var(--zbw-rust); border-radius:50%; animation:zbwSpin .7s linear infinite; } @keyframes zbwSpin{ to{ transform:rotate(360deg); } } @media (max-width:960px){ .zbw-shop-layout{grid-template-columns:1fr; gap:0; padding-bottom:90px;} /* room for the fixed action bar below */ /* Old inline pill — replaced on mobile by the fixed .zbw-mobile-actionbar (stays reachable the whole time you scroll, instead of scrolling away with the page). Still rendered in markup/used on desktop nowhere — desktop has no equivalent button at all, filters column is just always visible there — so this only needs hiding here. */ .zbw-filter-toggle{display:none;} .zbw-filters-backdrop.open{display:block;} /* Bottom sheet, Flipkart-style, instead of a left slide-in panel — same #zubShopFiltersCol / #zubFiltersBackdrop open/close toggling already wired up in zub-shop-filters.js, this only repositions it. */ .zbw-shop-filters-col{ position:fixed; left:0; right:0; top:auto; bottom:0; width:100%; max-width:100%; height:auto; max-height:82vh; z-index:300; border-radius:16px 16px 0 0; transform:translateY(100%); transition:transform .35s cubic-bezier(.22,.68,0,1.01); } .zbw-shop-filters-col.open{transform:translateY(0);} .zbw-filters-head{display:flex;} /* Sticky "Clear All" bar pinned to the bottom of the sheet, so the sheet always ends on a clear call-to-action like Flipkart's. */ .zbw-filters-form{padding-bottom:70px; position:relative;} .zbw-filters-clear{ position:sticky; bottom:0; margin-top:18px; background:var(--zbw-rust); color:#fff; border-color:var(--zbw-rust); } .zbw-filters-clear:hover{background:var(--zbw-rust-dark); border-color:var(--zbw-rust-dark);} /* ---- Sticky mobile action bar (Filter / Sort) ---- !important on position/background here: a screenshot showed this bar looking washed-out/see-through on mobile, with the totop button and page content bleeding through it — if any ancestor (`.zbw-shop-layout` etc.) ever picks up a `transform` (from the card hover-lift animation's containing block, or a page-transition library), `position:fixed` silently stops anchoring to the viewport and starts behaving like `position:absolute` relative to that ancestor instead, breaking both its position AND effectively its opaque background (it scrolls/clips with the ancestor instead of staying a solid opaque bar). Forcing both here doesn't fix a transform on an ancestor if one exists, but guarantees this rule itself always wins the property fight regardless. */ .zbw-mobile-actionbar{ display:flex !important; position:fixed !important; left:0; right:0; bottom:0; z-index:290; background:var(--zbw-paper) !important; border-top:1px solid var(--zbw-line); padding:10px 5vw calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -8px 20px rgba(59,42,21,0.1); } .zbw-mab-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--zbw-ink) !important; background:transparent !important; border:none !important; box-shadow:none !important; } .zbw-mab-btn .zub-icon{width:16px; height:16px; color:var(--zbw-rust);} .zbw-mab-btn:first-child{border-right:1px solid var(--zbw-line);} /* ---- Sort bottom sheet — same visual language as the filters sheet ---- */ .zbw-sheet-backdrop{ display:none; position:fixed; inset:0; background:rgba(36,26,13,0.5); z-index:299; } .zbw-sheet-backdrop.open{display:block;} .zbw-sheet{ display:block; position:fixed; left:0; right:0; top:auto; bottom:0; width:100%; max-width:100%; height:auto; max-height:70vh; overflow-y:auto; z-index:300; background:#fff; border-radius:16px 16px 0 0; padding:22px; box-shadow:0 -20px 50px rgba(59,42,21,0.18); transform:translateY(100%); transition:transform .35s cubic-bezier(.22,.68,0,1.01); } .zbw-sheet.open{transform:translateY(0);} .zbw-sheet .zbw-filters-head{display:flex; margin-bottom:18px;} .zbw-sort-row{ display:flex; align-items:center; gap:12px; padding:13px 4px; font-size:14px; color:var(--zbw-ink); border-bottom:1px solid var(--zbw-line); cursor:pointer; } .zbw-sort-row:last-child{border-bottom:none;} .zbw-sort-row input{width:17px; height:17px; accent-color:var(--zbw-rust); flex-shrink:0;} } html.dark-theme .zbw-mobile-actionbar{background:var(--zbw-paper) !important; border-color:var(--zbw-line) !important;} html.dark-theme .zbw-sheet{background:var(--zbw-paper-2) !important; color:var(--zbw-ink) !important;} /* ---- Wishlist page empty state ---- */ .zbw-wishlist-empty{ max-width:420px; margin:60px auto; text-align:center; color:var(--zbw-muted); } .zbw-wishlist-empty .zub-icon{width:44px; height:44px; color:var(--zbw-rust); margin:0 auto 18px;} .zbw-wishlist-empty p{margin-bottom:22px; font-size:15px;}