/* Custom CSS for MBoisNegoce Theme */ :root { --font-sans: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { font-family: var(--font-sans); } html { font-size: 16px; } /* Admin bar offset for sticky header */ body.admin-bar #masthead { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar #masthead { top: 46px; } } /* Accessibility */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Basic WooCommerce Overrides */ .woocommerce-message, .woocommerce-error, .woocommerce-info { padding: 1em 2em 1em 3.5em; margin: 0 0 2em; position: relative; background-color: #f7f6f7; color: #515151; list-style: none outside; width: auto; word-wrap: break-word; } .woocommerce-message { border-top: 3px solid #b45309 !important; /* Amber-700 signature color */ } .woocommerce-info { border-top: 3px solid #171717 !important; /* Neutral-900 */ } .woocommerce-error { border-top: 3px solid #ef4444 !important; /* Red-500 for errors */ } /* Override WooCommerce default purple button colors with theme's signature color */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit { background-color: #171717 !important; color: #ffffff !important; font-weight: 500 !important; transition: background-color 0.2s ease-in-out !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover, .woocommerce-page #respond input#submit:hover { background-color: #262626 !important; color: #ffffff !important; } /* Primary buttons (e.g., checkout, place order, add to cart alt style) */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page #respond input#submit.alt { background-color: #b45309 !important; /* Amber-700 signature color */ color: #ffffff !important; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover { background-color: #92400e !important; /* Amber-800 */ color: #ffffff !important; } /* Maintain single product custom cart buttons layout */ .woocommerce .woo-custom-add-to-cart button.single_add_to_cart_button.button.alt { background-color: #171717 !important; /* Black Add to Cart */ color: white !important; } .woocommerce .woo-custom-add-to-cart button.single_add_to_cart_button.button.alt:hover { background-color: #262626 !important; } /* WordPress Menu Styling (Desktop) */ #site-navigation > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; justify-content: center; gap: 2.5rem; height: 100%; } #site-navigation li { position: relative; } #site-navigation > ul > li { display: flex; align-items: stretch; } #site-navigation > ul > li > a { font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.15s; display: flex; align-items: center; font-weight: 600; height: 100%; padding: 0 0.25rem; } #site-navigation > ul > li > a:hover { color: #fbbf24; } /* Reset submenus strictly */ #site-navigation ul.sub-menu { list-style: none; margin: 0; padding: 0; /* No padding on submenus to ensure pixel-perfect alignment */ background-color: white; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 8px 20px -6px rgba(0, 0, 0, 0.08); min-width: 300px; border-radius: 0; /* Square corners */ } /* Level 2 Submenu (First dropdown level - sitting flush with header height) */ #site-navigation > ul > li > ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 0; transform-origin: top; animation: menuSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Level 3 Submenu (Flyout to the right) */ #site-navigation ul.sub-menu li > ul.sub-menu { display: none; position: absolute; top: -1px; /* Aligns perfectly with the top border of Level 2 */ left: 100%; z-index: 50; margin-left: 0; transform-origin: left; animation: menuSlideRight 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Show child sub-menu on parent hover with correct specificity */ #site-navigation > ul > li:hover > ul.sub-menu, #site-navigation ul.sub-menu li:hover > ul.sub-menu { display: block; } /* Submenu list items */ #site-navigation ul.sub-menu li { display: block; width: 100%; position: relative; } /* Submenu links styling (Full width item style) */ #site-navigation ul.sub-menu a { display: block; padding: 0.75rem 1.5rem; /* Spacious padding */ font-size: 0.85rem; font-weight: 500; color: #404040; text-decoration: none; transition: all 0.25s ease; border-radius: 0; /* Square corners */ margin: 0; /* Full width hover background */ } /* Maintain hover state on parent item when child is hovered */ #site-navigation ul.sub-menu li:hover > a { background-color: #fffbeb; /* Soft amber bg */ color: #b45309; /* Amber 700 */ padding-left: 1.75rem; /* Slide right slightly on hover */ } /* Arrow styling on desktop - Level 1 Dropdown Indicator */ #site-navigation > ul > li.menu-item-has-children > a::after { content: ''; display: inline-block; width: 10px; height: 10px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; margin-left: 6px; transition: background-color 0.15s; } /* Submenu list item containing children styling */ #site-navigation ul.sub-menu li.menu-item-has-children > a { display: flex; justify-content: space-between; align-items: center; padding-right: 1.5rem; /* Balanced padding right for chevron */ } /* Level 2 right arrow indicator */ #site-navigation ul.sub-menu li.menu-item-has-children > a::after { content: ''; display: inline-block; width: 10px; height: 10px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain; margin-left: auto; transition: transform 0.2s, background-color 0.15s; } /* Subtle shift animation for chevron */ #site-navigation ul.sub-menu li.menu-item-has-children:hover > a::after { transform: translateX(3px); } /* Menu animations (Smooth scale drop down and right slide flyout) */ @keyframes menuSlideDown { from { opacity: 0; transform: scaleY(0.9) translateY(-4px); } to { opacity: 1; transform: scaleY(1) translateY(0); } } @keyframes menuSlideRight { from { opacity: 0; transform: scaleX(0.9) translateX(-4px); } to { opacity: 1; transform: scaleX(1) translateX(0); } } /* WordPress Menu Styling (Mobile) */ #mobile-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; } #mobile-navigation a { display: block; color: inherit; text-decoration: none; } #mobile-navigation li.menu-item-has-children > a { display: flex; justify-content: space-between; align-items: center; } #mobile-navigation li.menu-item-has-children > a::after { display: none !important; } #mobile-navigation ul.sub-menu { list-style: none; padding-left: 1rem; margin-top: 0.5rem; display: none; flex-direction: column; gap: 0.75rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); border-left: 1px solid rgba(255, 255, 255, 0.1); } #mobile-navigation li.menu-item-has-children.open-submenu > ul.sub-menu { display: flex; } #mobile-navigation .mobile-submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.8); transition: all 0.2s ease-in-out; margin-left: 1rem; flex-shrink: 0; } #mobile-navigation .mobile-submenu-toggle::after { content: ''; display: inline-block; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform 0.2s ease-in-out; } #mobile-navigation li.menu-item-has-children.open-submenu > a > .mobile-submenu-toggle::after { transform: rotate(180deg); } #mobile-navigation li.menu-item-has-children.open-submenu > a > .mobile-submenu-toggle { border-color: #fbbf24; color: #fbbf24; background-color: rgba(251, 191, 36, 0.15); } /* WooCommerce Custom Overrides */ /* Hide default woo sorting/result count if they appear twice */ .woocommerce-ordering, .woocommerce-result-count { display: none; } .woo-custom-ordering .woocommerce-ordering { display: block; margin: 0; } .woo-custom-ordering .woocommerce-ordering select { appearance: none; border: 1px solid #d4d4d4; padding: 0.5rem 2.25rem 0.5rem 0.75rem; font-size: 0.875rem; background-color: white; outline: none; } /* YITH Wishlist overrides for Product Card */ .product-wishlist-btn .yith-wcwl-add-to-wishlist { margin: 0; } .product-wishlist-btn .yith-wcwl-add-button > a i { display: none; } .product-wishlist-btn .yith-wcwl-add-button > a { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 0; } .product-wishlist-btn .yith-wcwl-add-button > a:hover { background-color: #ffffff; } .product-wishlist-btn .yith-wcwl-add-button > a::before { content: url('data:image/svg+xml;utf8,'); display: block; width: 16px; height: 16px; } .product-wishlist-btn .yith-wcwl-wishlistaddedbrowse > a, .product-wishlist-btn .yith-wcwl-wishlistexistsbrowse > a { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; font-size: 0; } .product-wishlist-btn .yith-wcwl-wishlistaddedbrowse > a::before, .product-wishlist-btn .yith-wcwl-wishlistexistsbrowse > a::before { content: url('data:image/svg+xml;utf8,'); display: block; width: 16px; height: 16px; } .yith-wishlist-single-wrapper .yith-wcwl-add-to-wishlist { margin: 0; } .yith-wishlist-single-wrapper .yith-wcwl-add-button > a { font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; color: #171717; text-decoration: none; } /* Custom Add to Cart Button */ .woo-custom-add-to-cart .quantity { display: flex !important; align-items: center !important; border: 1px solid #e5e5e5 !important; border-radius: 4px !important; height: 48px !important; background-color: #fff !important; overflow: hidden !important; margin: 0 0.75rem 0 0 !important; float: left !important; box-sizing: border-box !important; width: auto !important; min-width: 130px !important; max-width: 140px !important; } .woo-custom-add-to-cart .quantity input.qty { display: block !important; height: 100% !important; flex: 1 !important; min-width: 44px !important; text-align: center !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #171717 !important; border-left: 1px solid #e5e5e5 !important; border-right: 1px solid #e5e5e5 !important; border-top: none !important; border-bottom: none !important; background-color: #fff !important; width: 44px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; outline: none !important; box-shadow: none !important; -moz-appearance: textfield !important; } .woo-custom-add-to-cart .quantity input.qty::-webkit-outer-spin-button, .woo-custom-add-to-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } .woo-custom-add-to-cart .quantity .mbois-single-qty-btn { border: none !important; background: transparent !important; outline: none !important; box-shadow: none !important; width: 40px !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; color: #171717 !important; font-size: 1.125rem !important; font-weight: 500 !important; transition: background-color 0.15s ease, color 0.15s ease !important; padding: 0 !important; margin: 0 !important; user-select: none !important; } .woo-custom-add-to-cart .quantity .mbois-single-qty-btn:hover { background-color: #f5f5f5 !important; } .woo-custom-add-to-cart .quantity .mbois-single-qty-btn:active { background-color: #e5e5e5 !important; } .woo-custom-add-to-cart .quantity .mbois-single-qty-btn:focus { outline: none !important; box-shadow: none !important; } .woo-custom-add-to-cart .quantity .mbois-single-qty-display { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; flex: 1 !important; min-width: 44px !important; text-align: center !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #171717 !important; border-left: 1px solid #e5e5e5 !important; border-right: 1px solid #e5e5e5 !important; background-color: #fff !important; user-select: none !important; } .woo-custom-add-to-cart button.single_add_to_cart_button { background-color: #171717 !important; color: white !important; padding: 0.75rem 2rem !important; border: none !important; cursor: pointer !important; transition: background-color 0.2s !important; flex: 1 !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .woo-custom-add-to-cart button.single_add_to_cart_button:hover { background-color: #262626 !important; } .woo-custom-add-to-cart form.cart { display: flex !important; width: 100% !important; flex-wrap: wrap !important; gap: 0.75rem !important; align-items: center !important; } /* Pagination Override */ .custom-pagination nav.woocommerce-pagination ul { display: flex; list-style: none; gap: 0.5rem; margin: 0; padding: 0; border: none; } .custom-pagination nav.woocommerce-pagination ul li { border: none; } .custom-pagination nav.woocommerce-pagination ul li a, .custom-pagination nav.woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid #d4d4d4; font-size: 0.875rem; text-decoration: none; color: #171717; padding: 0; } .custom-pagination nav.woocommerce-pagination ul li span.current { background-color: #171717; color: white; border-color: #171717; } .custom-pagination nav.woocommerce-pagination ul li a:hover { background-color: #fafafa; } /* Product Grid Overrides */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; } .woocommerce ul.products li.product { width: 100% !important; float: none !important; margin: 0 !important; } /* Ép ảnh sản phẩm tỉ lệ 1:1 (hình vuông) — MỌI ngữ cảnh */ .mbois-product-thumb { aspect-ratio: 1 / 1 !important; width: 100% !important; display: block !important; position: relative !important; overflow: hidden !important; margin-bottom: 1rem !important; background-color: #f5f5f5 !important; } .mbois-product-thumb img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; max-width: none !important; } /* Hide YITH Wishlist Text in Product Card */ .product-wishlist-btn .yith-wcwl-add-to-wishlist span { display: none !important; } .product-wishlist-btn .yith-wcwl-add-to-wishlist .yith-wcwl-tooltip { display: none !important; } .product-wishlist-btn .yith-wcwl-add-button > a { color: transparent !important; } /* Ensure sticky details column works correctly and bypasses any overflow issues */ html, body { overflow-x: clip !important; } main, #page, .site-content { overflow: visible !important; } .product-gallery-wrapper { position: -webkit-sticky !important; position: sticky !important; top: 112px !important; align-self: start !important; } body.admin-bar .product-gallery-wrapper { top: 144px !important; } @media screen and (max-width: 1023px) { .product-gallery-wrapper { position: static !important; } } /* Ensure gallery images fill their wrappers consistently and professionally */ .product-gallery-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* WooCommerce Upsells Products Grid Columns (Homepage Style) */ .woocommerce .upsells.products { margin-top: 3rem; } .woocommerce .upsells.products > h2, .woocommerce-page .upsells.products > h2 { font-size: 1.875rem !important; line-height: 2.25rem !important; font-weight: 500 !important; color: #171717 !important; margin-bottom: 2.5rem !important; text-transform: none !important; } @media (min-width: 768px) { .woocommerce .upsells.products > h2, .woocommerce-page .upsells.products > h2 { font-size: 2.25rem !important; line-height: 2.5rem !important; } } .woocommerce .upsells.products > h2::before, .woocommerce-page .upsells.products > h2::before { content: "COMPLÉMENTS"; display: block; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: #737373; margin-bottom: 0.75rem; font-weight: 400; } .woocommerce .upsells.products ul.products, .woocommerce-page .upsells.products ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2.5rem 1rem !important; } @media (min-width: 768px) { .woocommerce .upsells.products ul.products, .woocommerce-page .upsells.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2.5rem 1.5rem !important; } } @media (min-width: 1024px) { .woocommerce .upsells.products ul.products, .woocommerce-page .upsells.products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* Hide scrollbars for the horizontal slider */ .scrollbar-none::-webkit-scrollbar { display: none; } .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; } /* WooCommerce Reviews & Comments Form Styling (Premium Style) */ #reviews { margin-top: 1rem; } #reviews #comments h2 { font-size: 1.25rem; font-weight: 600; color: #171717; margin-bottom: 1.5rem; } .woocommerce-noreviews { color: #737373; font-size: 0.875rem; margin-bottom: 1rem; } #review_form_wrapper { background: #fbfbfb; border: 1px solid #e5e5e5; padding: 2rem; margin-top: 2rem; } #review_form .comment-reply-title { font-size: 1.125rem; font-weight: 600; color: #171717; display: block; margin-bottom: 1.5rem; } #commentform { display: flex; flex-direction: column; gap: 1.5rem; } #commentform p { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } #commentform p.comment-form-cookies-consent { flex-direction: row; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: #525252; } #commentform p.comment-form-cookies-consent input { margin: 0; accent-color: #b45309; /* amber-700 */ } #commentform label { font-size: 0.875rem; font-weight: 500; color: #171717; } #commentform input[type="text"], #commentform input[type="email"], #commentform textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid #d4d4d4; background-color: #ffffff; font-size: 0.875rem; color: #171717; outline: none; transition: all 0.2s ease; } #commentform input[type="text"]:focus, #commentform input[type="email"]:focus, #commentform textarea:focus { border-color: #171717; box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.05); } #commentform textarea { min-height: 120px; resize: vertical; } /* Style WooCommerce Star Ratings in Form */ #commentform .comment-form-rating { flex-direction: column; align-items: flex-start; } #commentform .comment-form-rating p.stars { margin: 0; } #commentform .comment-form-rating p.stars a { color: #d4d4d4; font-size: 1.25rem; margin-right: 0.25rem; text-decoration: none; transition: color 0.15s ease; } /* WooCommerce Star Rating Colors override */ .woocommerce p.stars a::before, .woocommerce-page p.stars a::before { color: #d4d4d4 !important; } .woocommerce p.stars a:hover ~ a::before, .woocommerce-page p.stars a:hover ~ a::before { color: #d4d4d4 !important; } .woocommerce p.stars:hover a::before, .woocommerce-page p.stars:hover a::before { color: #f59e0b !important; } .woocommerce p.stars.selected a.active::before, .woocommerce-page p.stars.selected a.active::before { color: #f59e0b !important; } .woocommerce p.stars.selected a.active ~ a::before, .woocommerce-page p.stars.selected a.active ~ a::before { color: #d4d4d4 !important; } .woocommerce p.stars.selected a:not(.active)::before, .woocommerce-page p.stars.selected a:not(.active)::before { color: #f59e0b !important; } /* Star Rating styling throughout */ .woocommerce .star-rating, .woocommerce-page .star-rating { color: #f59e0b !important; } /* Form Submit Button */ #commentform #submit { align-self: flex-start; background-color: #171717 !important; color: #ffffff !important; font-size: 0.875rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 0.75rem 2.5rem !important; border: none !important; cursor: pointer !important; transition: background-color 0.2s ease !important; } #commentform #submit:hover { background-color: #262626 !important; } /* WooCommerce Review List Styling */ .commentlist { list-style: none; padding: 0; margin: 0 0 2rem 0; } .commentlist li.review { padding: 1.5rem 0; border-bottom: 1px solid #e5e5e5; } .commentlist li.review:last-child { border-bottom: none; } .commentlist li.review .avatar { float: left; border-radius: 9999px; width: 44px; height: 44px; margin-right: 1rem; } .commentlist li.review .comment-text { margin-left: 4rem; } .commentlist li.review .comment-text .meta { font-size: 0.875rem; color: #737373; margin-bottom: 0.5rem; } .commentlist li.review .comment-text .meta strong { color: #171717; font-weight: 600; } .commentlist li.review .comment-text .star-rating { float: right; font-size: 0.875rem; color: #f59e0b; } .commentlist li.review .comment-text .description { font-size: 0.875rem; color: #404040; line-height: 1.6; } /* Custom Typography for Article Content (.prose fallback) */ .prose { font-size: 1rem; line-height: 1.8; color: #404040; } .prose p { margin-top: 0; margin-bottom: 1.5rem; } .prose h1, .prose h2, .prose h3, .prose h4 { color: #171717; font-weight: 500; line-height: 1.3; margin-top: 2.5rem; margin-bottom: 1.25rem; } .prose h1 { font-size: 2.25rem; } .prose h2 { font-size: 1.75rem; border-bottom: 1px solid #f0f0f0; padding-bottom: 0.5rem; } .prose h3 { font-size: 1.375rem; } .prose h4 { font-size: 1.125rem; } .prose a { color: #b45309; text-decoration: underline; font-weight: 500; } .prose a:hover { color: #92400e; } .prose ul, .prose ol { margin-top: 0; margin-bottom: 1.5rem; padding-left: 1.5rem; } .prose ul { list-style-type: disc; } .prose ol { list-style-type: decimal; } .prose li { margin-top: 0.5rem; margin-bottom: 0.5rem; } .prose blockquote { font-style: italic; border-left: 4px solid #b45309; padding-left: 1.5rem; margin: 2rem 0; color: #525252; } .prose img { max-width: 100%; height: auto; margin: 2.5rem 0; display: block; } .prose figure { margin: 2.5rem 0; } .prose figure figcaption { font-size: 0.875rem; color: #737373; text-align: center; margin-top: 0.75rem; } .prose hr { border: 0; border-top: 1px solid #e5e5e5; margin: 3.5rem 0; } /* Ghi đè kích thước logo ngăn chặn WooCommerce tự động phóng to */ #masthead .mbois-logo { height: 64px !important; width: auto !important; min-width: auto !important; max-height: 64px !important; max-width: none !important; object-fit: contain !important; } @media (min-width: 768px) { #masthead .mbois-logo { height: 120px !important; width: auto !important; min-width: auto !important; max-height: 120px !important; max-width: none !important; } } /* Sửa lỗi giao diện form biến thể WooCommerce bị đè lệch */ .woo-custom-add-to-cart form.variations_form { display: block !important; width: 100% !important; float: none !important; clear: both !important; } .woo-custom-add-to-cart form.variations_form .variations { display: block !important; width: 100% !important; margin-bottom: 1.25rem !important; border: none !important; } .woo-custom-add-to-cart form.variations_form .variations tbody { display: block !important; width: 100% !important; border: none !important; } /* Chuyển tr thành cột dọc: Nhãn ở trên, Swatches ở dưới sát lề trái */ .woo-custom-add-to-cart form.variations_form .variations tr { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; width: 100% !important; border: none !important; margin-bottom: 1rem !important; } .woo-custom-add-to-cart form.variations_form .variations td { display: block !important; padding: 0 !important; border: none !important; width: 100% !important; text-align: left !important; } .woo-custom-add-to-cart form.variations_form .variations td.label { min-width: unset !important; width: auto !important; } .woo-custom-add-to-cart form.variations_form .variations label { font-size: 0.75rem !important; font-weight: 700 !important; color: #171717 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; display: inline-block !important; } .woo-custom-add-to-cart form.variations_form .variations td.value { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.5rem !important; } .woo-custom-add-to-cart form.variations_form .reset_variations { display: inline-block !important; margin-left: 0.75rem !important; font-size: 0.75rem !important; color: #ef4444 !important; text-decoration: underline !important; } .woo-custom-add-to-cart form.variations_form .single_variation_wrap { display: block !important; width: 100% !important; margin-top: 1rem !important; } .woo-custom-add-to-cart form.variations_form .woocommerce-variation-add-to-cart { display: flex !important; align-items: stretch !important; width: 100% !important; gap: 0.75rem !important; margin-top: 0.75rem !important; } .woo-custom-add-to-cart form.variations_form .woocommerce-variation-add-to-cart .quantity { display: flex !important; align-items: center !important; border: 1px solid #e5e5e5 !important; border-radius: 4px !important; margin: 0 !important; float: none !important; height: 48px !important; background-color: #fff !important; overflow: hidden !important; width: auto !important; min-width: 130px !important; max-width: 140px !important; box-sizing: border-box !important; } .woo-custom-add-to-cart form.variations_form .woocommerce-variation-add-to-cart .quantity input.qty { display: block !important; height: 100% !important; flex: 1 !important; min-width: 44px !important; text-align: center !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #171717 !important; border-left: 1px solid #e5e5e5 !important; border-right: 1px solid #e5e5e5 !important; border-top: none !important; border-bottom: none !important; background-color: #fff !important; width: 44px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; outline: none !important; box-shadow: none !important; -moz-appearance: textfield !important; } .woo-custom-add-to-cart form.variations_form .woocommerce-variation-add-to-cart .quantity input.qty::-webkit-outer-spin-button, .woo-custom-add-to-cart form.variations_form .woocommerce-variation-add-to-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } .woo-custom-add-to-cart form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button { display: flex !important; align-items: center !important; justify-content: center !important; background-color: #171717 !important; color: white !important; height: 48px !important; border: none !important; cursor: pointer !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; font-size: 0.875rem !important; transition: background-color 0.2s ease-in-out !important; flex: 1 !important; width: auto !important; margin: 0 !important; padding: 0 2rem !important; } .woo-custom-add-to-cart form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover { background-color: #262626 !important; } /* Định dạng nút disabled cao cấp hơn dạng outline xám nhẹ */ .woo-custom-add-to-cart form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled { background-color: transparent !important; color: #a3a3a3 !important; border: 1px solid #e5e5e5 !important; cursor: not-allowed !important; } .woocommerce-variation.single_variation { margin-bottom: 0.5rem !important; } .woocommerce-variation.single_variation .price { font-size: 1.25rem !important; font-weight: 700 !important; color: #171717 !important; } /* Style Webkit search input clear button (X icon) to be white */ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 12px; width: 12px; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center; background-size: contain; cursor: pointer; opacity: 0.7; transition: opacity 0.15s; margin-left: 6px; } input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; } /* Admin bar offset for desktop sticky bottom navigation row */ @media screen and (min-width: 1280px) { body.admin-bar .mbois-navigation-row { top: 32px; } } /* Unified Title Page Breadcrumbs (Yoast / Fallback) */ .yoast-breadcrumbs, .breadcrumbs, #breadcrumbs { font-size: 0.75rem !important; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.65) !important; font-weight: 400 !important; display: inline-block; } .yoast-breadcrumbs a, .breadcrumbs a, #breadcrumbs a { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; transition: color 0.15s ease-in-out; } .yoast-breadcrumbs a:hover, .breadcrumbs a:hover, #breadcrumbs a:hover { color: #f59e0b !important; } .yoast-breadcrumbs span:last-child, .breadcrumbs span:last-child, #breadcrumbs span:last-child, .yoast-breadcrumbs strong, .breadcrumbs strong, #breadcrumbs strong { color: rgba(255, 255, 255, 0.95) !important; font-weight: 500 !important; } /* Unified Light Background Breadcrumbs */ .yoast-breadcrumbs-light, .breadcrumbs-light, .yoast-breadcrumbs-light #breadcrumbs { font-size: 0.75rem !important; letter-spacing: 0.05em; color: #737373 !important; font-weight: 400 !important; display: inline-block; } .yoast-breadcrumbs-light a, .breadcrumbs-light a, .yoast-breadcrumbs-light #breadcrumbs a { color: #404040 !important; text-decoration: none !important; transition: color 0.15s ease-in-out; } .yoast-breadcrumbs-light a:hover, .breadcrumbs-light a:hover, .yoast-breadcrumbs-light #breadcrumbs a:hover { color: #b45309 !important; } .yoast-breadcrumbs-light span:last-child, .breadcrumbs-light span:last-child, .yoast-breadcrumbs-light #breadcrumbs span:last-child, .yoast-breadcrumbs-light strong, .breadcrumbs-light strong, .yoast-breadcrumbs-light #breadcrumbs strong { color: #171717 !important; font-weight: 500 !important; } /* Footer Navigation Menu Styling */ footer ul.menu { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } footer ul.menu li { margin: 0 !important; padding: 0 !important; } footer ul.menu li a { color: #a3a3a3 !important; /* Neutral-400 equivalent */ font-size: 0.875rem !important; /* text-sm equivalent */ transition: color 0.15s ease-in-out !important; text-decoration: none !important; } footer ul.menu li a:hover { color: #ffffff !important; } footer ul.menu li.menu-item a[href*="promotions"], footer ul.menu li.menu-item a[href*="promotion"] { color: #f59e0b !important; /* amber-500 equivalent */ } footer ul.menu li.menu-item a[href*="promotions"]:hover, footer ul.menu li.menu-item a[href*="promotion"]:hover { color: #ffffff !important; } /* ========================================================================== Fluent Form Custom Overrides (Clean, Minimalist Theme Sync) ========================================================================== */ .fluentform, .fluentform_wrapper { max-width: 100% !important; } .fluentform .ff-el-form-control, .fluentform textarea.ff-el-form-control { border: 1px solid #d4d4d4 !important; border-radius: 0px !important; background-color: #ffffff !important; color: #171717 !important; padding: 0.75rem 1rem !important; font-size: 0.875rem !important; outline: none !important; box-shadow: none !important; transition: all 0.2s ease-in-out !important; width: 100% !important; box-sizing: border-box !important; } .fluentform .ff-el-form-control:focus, .fluentform textarea.ff-el-form-control:focus { border-color: #171717 !important; box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.05) !important; } .fluentform label, .fluentform .ff-el-form-label, .fluentform .ff-el-form-label label, .fluentform_wrapper label, .fluentform_wrapper .ff-el-form-label, .fluentform_wrapper .ff-el-form-label label { font-family: var(--font-sans) !important; font-size: 13.5px !important; font-weight: 400 !important; color: #7f7f7f !important; text-transform: none !important; letter-spacing: 0.01em !important; margin-bottom: 6px !important; display: inline-block !important; } .fluentform .ff-required-symbol { display: none !important; } .fluentform .ff-el-form-control::placeholder, .fluentform textarea.ff-el-form-control::placeholder { color: #a3a3a3 !important; font-family: var(--font-sans) !important; font-size: 0.875rem !important; font-weight: 300 !important; } .fluentform .ff_btn_style, .fluentform .ff-btn-submit { font-family: var(--font-sans) !important; background-color: #171717 !important; color: #ffffff !important; border-radius: 0px !important; border: none !important; font-weight: 500 !important; font-size: 0.875rem !important; padding: 0.75rem 2.5rem !important; cursor: pointer !important; transition: background-color 0.2s ease-in-out !important; display: inline-block !important; width: auto !important; text-transform: none !important; box-shadow: none !important; height: auto !important; } .fluentform .ff_btn_style:hover, .fluentform .ff-btn-submit:hover { background-color: #262626 !important; } .fluentform .ff-el-group { margin-bottom: 1.25rem !important; } .fluentform-success { background-color: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; color: #166534 !important; border-radius: 0px !important; font-size: 0.875rem !important; padding: 1rem !important; margin-bottom: 1.25rem !important; } .fluentform-error { background-color: #fef2f2 !important; border: 1px solid #fecaca !important; color: #991b1b !important; border-radius: 0px !important; font-size: 0.875rem !important; padding: 1rem !important; margin-bottom: 1.25rem !important; } /* ========================================================================== WooCommerce Checkout Pages Overrides (Modern & Premium Styles) ========================================================================== */ .woocommerce-checkout { max-width: 100% !important; } /* Fix input borders and spacing */ .woocommerce-checkout form.checkout .form-row { margin-bottom: 1.25rem !important; padding: 0 !important; } .woocommerce-checkout form.checkout label { font-size: 0.75rem !important; font-weight: 600 !important; color: #3f3f46 !important; margin-bottom: 0.375rem !important; display: block !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .woocommerce-checkout form.checkout input[type="text"], .woocommerce-checkout form.checkout input[type="email"], .woocommerce-checkout form.checkout input[type="tel"], .woocommerce-checkout form.checkout select, .woocommerce-checkout form.checkout textarea { width: 100% !important; padding: 0.75rem 1rem !important; border: 1px solid #e4e4e7 !important; background-color: #ffffff !important; font-size: 0.875rem !important; color: #18181b !important; outline: none !important; transition: all 0.2s ease-in-out !important; box-sizing: border-box !important; border-radius: 0px !important; /* STRICTLY SQUARE */ } .woocommerce-checkout form.checkout input[type="text"]:hover, .woocommerce-checkout form.checkout input[type="email"]:hover, .woocommerce-checkout form.checkout input[type="tel"]:hover, .woocommerce-checkout form.checkout select:hover, .woocommerce-checkout form.checkout textarea:hover { border-color: #d4d4d8 !important; } .woocommerce-checkout form.checkout input[type="text"]:focus, .woocommerce-checkout form.checkout input[type="email"]:focus, .woocommerce-checkout form.checkout input[type="tel"]:focus, .woocommerce-checkout form.checkout select:focus, .woocommerce-checkout form.checkout textarea:focus { border-color: #b45309 !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.15) !important; } /* Style select element placeholder */ .woocommerce-checkout form.checkout select { appearance: none !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 1.125rem !important; padding-right: 2.5rem !important; } /* WooCommerce notice and coupon forms */ .woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { background-color: #fbfbfa !important; border: 1px solid #e4e4e7 !important; border-left: 3px solid #b45309 !important; color: #404040 !important; font-size: 0.875rem !important; padding: 1rem 1.25rem !important; margin-bottom: 1.5rem !important; border-radius: 0px !important; /* STRICTLY SQUARE */ } .woocommerce-form-coupon-toggle .woocommerce-info a, .woocommerce-form-login-toggle .woocommerce-info a { color: #b45309 !important; font-weight: 600 !important; text-decoration: underline !important; } /* Checkout Coupon and Login form boxes */ form.checkout_coupon, form.login { background-color: #fcfcfb !important; border: 1px solid #e4e4e7 !important; padding: 1.5rem !important; margin-bottom: 2rem !important; border-radius: 0px !important; /* STRICTLY SQUARE */ } form.checkout_coupon .form-row-first, form.checkout_coupon .form-row-last { float: none !important; width: 100% !important; display: block !important; } form.checkout_coupon input[type="text"] { max-width: 300px !important; display: inline-block !important; margin-right: 0.75rem !important; margin-bottom: 0.75rem !important; } form.checkout_coupon button[type="submit"] { background-color: #171717 !important; color: #ffffff !important; border: none !important; padding: 0.75rem 1.5rem !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; border-radius: 0px !important; /* STRICTLY SQUARE */ transition: background-color 0.2s !important; } form.checkout_coupon button[type="submit"]:hover { background-color: #262626 !important; } /* Reset payment container default backgrounds & borders completely */ .woocommerce-checkout #payment, #order_review #payment { background: transparent !important; border: none !important; padding: 0 !important; margin: 1.5rem 0 0 0 !important; } #payment ul.payment_methods { list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } #payment ul.payment_methods li { margin-bottom: 0 !important; padding: 0.75rem 0 !important; border: none !important; border-bottom: 1px solid #e4e4e7 !important; background-color: transparent !important; } #payment ul.payment_methods li:last-child { border-bottom: none !important; } #payment ul.payment_methods li input[type="radio"] { margin-right: 0.75rem !important; accent-color: #b45309 !important; cursor: pointer !important; } #payment ul.payment_methods li label { display: inline-flex !important; align-items: center !important; font-size: 0.875rem !important; font-weight: 600 !important; color: #18181b !important; cursor: pointer !important; } /* Bank details info box - clean square outline block */ #payment ul.payment_methods li .payment_box { margin-top: 0.75rem !important; padding: 1rem !important; background-color: #faf9f6 !important; /* soft warm tint */ border: 1px solid #e4e2dd !important; /* clean square border */ border-radius: 0px !important; /* STRICTLY SQUARE */ font-size: 0.825rem !important; color: #52525b !important; line-height: 1.6 !important; box-shadow: none !important; width: 100% !important; box-sizing: border-box !important; } /* Hide default WooCommerce triangle pointer */ #payment ul.payment_methods li .payment_box::before, #payment ul.payment_methods li .payment_box::after { display: none !important; content: none !important; } #payment .place-order { padding-top: 1.5rem !important; } /* Spacing and style for terms & conditions / privacy text */ .woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper, .woocommerce-checkout #payment .place-order .woocommerce-privacy-policy-text { margin-bottom: 1.5rem !important; font-size: 0.75rem !important; color: #71717a !important; line-height: 1.6 !important; } .woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper p, .woocommerce-checkout #payment .place-order .woocommerce-privacy-policy-text p { margin: 0 !important; padding: 0 !important; } /* Modernize order button - strictly square */ #payment button#place_order, .woocommerce-checkout #payment button#place_order { width: 100% !important; background-color: #b45309 !important; color: #ffffff !important; font-size: 0.95rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 1rem 2rem !important; border: none !important; border-radius: 0px !important; /* STRICTLY SQUARE */ cursor: pointer !important; box-shadow: 0 4px 12px rgba(180, 83, 9, 0.15) !important; transition: all 0.2s ease-in-out !important; display: flex !important; justify-content: center !important; align-items: center !important; } #payment button#place_order:hover, .woocommerce-checkout #payment button#place_order:hover { background-color: #92400e !important; box-shadow: 0 6px 16px rgba(180, 83, 9, 0.2) !important; } #payment button#place_order:active, .woocommerce-checkout #payment button#place_order:active { transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(180, 83, 9, 0.1) !important; } /* ========================================================================== WooCommerce Order Review Table Reset and Clean Style ========================================================================== */ .woocommerce-checkout-review-order-table { display: block !important; border: none !important; width: 100% !important; } .woocommerce-checkout-review-order-table thead { display: none !important; } .woocommerce-checkout-review-order-table tbody, .woocommerce-checkout-review-order-table tfoot { display: block !important; width: 100% !important; border: none !important; } .woocommerce-checkout-review-order-table tr { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; border: none !important; background: none !important; } .woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th { display: block !important; border: none !important; background: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* Individual rows overrides */ .woocommerce-checkout-review-order-table tbody tr.cart_item { border-bottom: 1px solid #e4e4e7 !important; padding: 0.875rem 0 !important; } .woocommerce-checkout-review-order-table tbody tr.cart_item:last-child { border-bottom: none !important; } .woocommerce-checkout-review-order-table tfoot { border-top: 1px solid #d4d4d8 !important; padding-top: 0.75rem !important; margin-top: 0.5rem !important; } .woocommerce-checkout-review-order-table tfoot tr { padding: 0.625rem 0 !important; } .woocommerce-checkout-review-order-table tfoot tr.order-total { border-top: 1px solid #d4d4d8 !important; padding-top: 1rem !important; margin-top: 0.5rem !important; font-size: 1rem !important; font-weight: 700 !important; } #payment button#place_order:active, .woocommerce-checkout #payment button#place_order:active { transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(180, 83, 9, 0.1) !important; } /* Thank you page styles */ .woocommerce-order-received .woocommerce-order { max-width: 1200px !important; margin: 0 auto !important; } /* Premium Bank Wire Instruction Details */ .thankyou-payment-details { border-left: 4px solid #b45309 !important; /* Accent theme color */ background-color: #fafaf9 !important; border-radius: 0px !important; /* Match theme square borders */ padding: 2rem !important; box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important; border: 1px solid #e7e5e4 !important; border-left-width: 4px !important; margin-bottom: 3rem !important; } .thankyou-payment-details h2, .thankyou-payment-details h3 { font-size: 1.05rem !important; font-weight: 800 !important; color: #1c1917 !important; margin-top: 0 !important; margin-bottom: 1.5rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-bottom: 1px solid #e7e5e4 !important; padding-bottom: 0.75rem !important; } .thankyou-payment-details ul.wc-bacs-bank-details { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 1.5rem 2.5rem !important; } .thankyou-payment-details ul.wc-bacs-bank-details li { display: flex !important; flex-direction: column !important; padding-right: 2rem !important; border-right: 1px dashed #d6d3d1 !important; margin: 0 !important; } .thankyou-payment-details ul.wc-bacs-bank-details li:last-child { border-right: none !important; padding-right: 0 !important; } .thankyou-payment-details ul.wc-bacs-bank-details li strong { color: #1c1917 !important; font-weight: 700 !important; font-size: 0.95rem !important; margin-top: 0.25rem !important; } .thankyou-payment-details ul.wc-bacs-bank-details li span, .thankyou-payment-details ul.wc-bacs-bank-details li .wc-bacs-bank-details-label { color: #78716c !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } /* Premium Receipt Order Details Table */ .woocommerce-order-details { background-color: #ffffff !important; border: 1px solid #e7e5e4 !important; padding: 2rem !important; margin-bottom: 3rem !important; } .woocommerce-order-details .woocommerce-order-details__title { font-size: 1.1rem !important; font-weight: 800 !important; color: #1c1917 !important; margin-top: 0 !important; margin-bottom: 1.5rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-bottom: 1px solid #e7e5e4 !important; padding-bottom: 0.75rem !important; } .woocommerce-order-details table.shop_table { border-collapse: collapse !important; border: none !important; width: 100% !important; margin-top: 1rem !important; margin-bottom: 0 !important; } .woocommerce-order-details table.shop_table thead { border-bottom: 2px solid #e7e5e4 !important; } .woocommerce-order-details table.shop_table thead th { font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #78716c !important; font-weight: 700 !important; padding: 1rem 0.5rem !important; border: none !important; text-align: left !important; } .woocommerce-order-details table.shop_table thead th.product-total { text-align: right !important; } .woocommerce-order-details table.shop_table tbody tr { border-bottom: 1px solid #f5f5f4 !important; } .woocommerce-order-details table.shop_table tbody td { padding: 1.25rem 0.5rem !important; border: none !important; font-size: 0.875rem !important; color: #1c1917 !important; } .woocommerce-order-details table.shop_table tbody td.product-total { text-align: right !important; font-weight: 700 !important; } .woocommerce-order-details table.shop_table tfoot { border-top: 2px solid #e7e5e4 !important; } .woocommerce-order-details table.shop_table tfoot tr { border-bottom: 1px solid #f5f5f4 !important; } .woocommerce-order-details table.shop_table tfoot tr:last-child { border-bottom: none !important; } .woocommerce-order-details table.shop_table tfoot th { font-size: 0.8rem !important; color: #78716c !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 1rem 0.5rem !important; border: none !important; text-align: left !important; } .woocommerce-order-details table.shop_table tfoot td { font-size: 0.9rem !important; font-weight: 700 !important; color: #1c1917 !important; padding: 1rem 0.5rem !important; border: none !important; text-align: right !important; } .woocommerce-order-details table.shop_table tfoot tr.order-total th { font-size: 0.9rem !important; font-weight: 800 !important; color: #1c1917 !important; } .woocommerce-order-details table.shop_table tfoot tr.order-total td { font-size: 1.125rem !important; font-weight: 800 !important; color: #b45309 !important; /* Brand Signature Amber */ } /* Premium Customer Details & Address Cards */ .woocommerce-customer-details { margin-top: 2rem !important; border: none !important; padding: 0 !important; } .woocommerce-customer-details .woocommerce-column { background-color: #fafaf9 !important; border: 1px solid #e7e5e4 !important; padding: 2rem !important; border-radius: 0px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.01) !important; } .woocommerce-customer-details .woocommerce-column__title { font-size: 0.85rem !important; text-transform: uppercase !important; font-weight: 800 !important; letter-spacing: 0.08em !important; color: #1c1917 !important; margin-top: 0 !important; margin-bottom: 1.25rem !important; padding-bottom: 0.75rem !important; border-bottom: 1px solid #e7e5e4 !important; } .woocommerce-customer-details address { font-style: normal !important; font-size: 0.875rem !important; color: #44403c !important; line-height: 1.7 !important; } /* ========================================================================== Floating Contact Panel & Back to Top Widgets ========================================================================== */ .mbois-floating-panel { position: fixed; bottom: 2rem; right: 2rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end; } .mbois-floating-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 9999px; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.3s ease; cursor: pointer; text-decoration: none; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; flex-shrink: 0 !important; } .mbois-floating-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .mbois-btn-email { background-color: #2563eb; /* Blue 600 */ } .mbois-btn-email:hover { background-color: #1d4ed8; /* Blue 700 */ } .mbois-btn-hotline { background-color: #b45309; /* Amber 700 - signature theme color */ animation: mbois-pulse 2s infinite; } .mbois-btn-hotline:hover { background-color: #92400e; /* Amber 800 */ } .mbois-btn-whatsapp { background-color: #25D366; /* WhatsApp Green */ } .mbois-btn-whatsapp:hover { background-color: #128C7E; /* Darker green */ } .mbois-btn-b2t { background-color: #171717; /* Neutral-900 */ } .mbois-btn-b2t:hover { background-color: #262626; /* Neutral-800 */ color: #fbbf24 !important; /* Amber text on hover */ } /* Tooltips */ .mbois-tooltip { position: absolute; right: 100%; top: 50%; transform: translateY(-50%) translateX(10px) scale(0.9); margin-right: 0.75rem; background-color: #171717; color: #ffffff; font-size: 0.75rem; font-weight: 500; padding: 0.375rem 0.75rem; border-radius: 0.25rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } .mbois-floating-btn:hover .mbois-tooltip { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } /* Pulse animation for hotline button to draw attention gently */ @keyframes mbois-pulse { 0% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(180, 83, 9, 0); } 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); } } /* Back to top state styles toggled via JS */ .mbois-btn-b2t.opacity-0 { opacity: 0; pointer-events: none; transform: translateY(20px) scale(0.8); } .mbois-btn-b2t.opacity-100 { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .mbois-btn-b2t.opacity-100:hover { transform: scale(1.1) translateY(-3px); } /* Ensure correct placement above admin bar on mobile devices */ @media screen and (max-width: 782px) { .mbois-floating-panel { bottom: 1.5rem; right: 1.5rem; gap: 0.5rem; } .mbois-floating-btn { width: 2.75rem; height: 2.75rem; } .mbois-tooltip { display: none; /* Hide tooltips on mobile/touch screens to avoid UX issues */ } } /* Language Navigation Menu styling (Desktop - after main menu) */ .mbois-language-nav-desktop { display: flex; align-items: center; } .mbois-language-nav-desktop ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.75rem; } .mbois-language-nav-desktop li { position: relative; display: flex; align-items: center; } .mbois-language-nav-desktop a { color: rgba(255, 255, 255, 0.85) !important; font-size: 0.8rem !important; letter-spacing: 0.06em; font-weight: 600; transition: color 0.15s; text-decoration: none; display: flex; align-items: center; gap: 4px; height: 100%; } .mbois-language-nav-desktop a:hover { color: #fbbf24 !important; } /* Flag image sizing */ .mbois-language-nav-desktop img.trp-flag-image { width: 16px !important; height: auto !important; border-radius: 2px; display: inline-block; vertical-align: middle; } /* TranslatePress Dropdown style menu support in desktop navigation */ .mbois-language-nav-desktop ul.sub-menu { display: none; position: absolute; top: 100%; right: 0; background-color: white; border: 1px solid rgba(0, 0, 0, 0.05); min-width: 150px; z-index: 50; padding: 0.5rem 0; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08); } .mbois-language-nav-desktop li:hover > ul.sub-menu { display: block; } .mbois-language-nav-desktop ul.sub-menu li { width: 100%; } .mbois-language-nav-desktop ul.sub-menu a { padding: 0.5rem 1rem !important; width: 100%; color: #404040 !important; display: flex; align-items: center; gap: 8px; font-size: 0.85rem !important; text-transform: none; letter-spacing: normal; } .mbois-language-nav-desktop ul.sub-menu a:hover { background-color: #fffbeb !important; color: #b45309 !important; } /* Mobile Header Language Selector styling (Inline, on the left) */ .mbois-mobile-language-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.5rem; } .mbois-mobile-language-nav li { display: inline-flex; align-items: center; } .mbois-mobile-language-nav a { color: rgba(255, 255, 255, 0.8) !important; font-size: 11px !important; text-transform: uppercase; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 4px; } .mbois-mobile-language-nav a:hover { color: #fbbf24 !important; } .mbois-mobile-language-nav img.trp-flag-image { width: 14px !important; height: auto !important; border-radius: 2px; } /* Custom Price Suffix styling */ .price-unit-suffix { font-size: 0.85em; color: #737373; font-weight: 300; margin-left: -0.25em; opacity: 0.9; } /* ========================================================================== Crate & Barrel Redesigned Header Styles ========================================================================== */ /* Row 4: Main Navigation Category Bar Dropdowns */ #site-navigation ul.main-menu { display: flex; justify-content: center !important; gap: 1.5rem !important; align-items: stretch; height: 100%; list-style: none; margin: 0; padding: 0; } #site-navigation ul.main-menu > li { display: flex; align-items: center; position: relative; height: 100%; } #site-navigation ul.main-menu > li > a { display: flex !important; align-items: center !important; height: 100% !important; padding: 0 0.5rem !important; color: #ffffff !important; font-family: var(--font-sans) !important; font-size: 15px !important; font-weight: 700 !important; text-transform: none !important; /* normal casing, i.e. Title Case */ letter-spacing: 0.04em !important; text-decoration: none !important; transition: all 0.15s ease-in-out !important; border-bottom: 2px solid transparent !important; } #site-navigation ul.main-menu > li:hover > a { border-bottom-color: #ffffff !important; background-color: transparent !important; /* no background highlight block */ color: #ffffff !important; } /* Hide chevrons completely on desktop Row 4 menu items */ #site-navigation ul.main-menu > li.menu-item-has-children > a::after { display: none !important; } #site-navigation ul.main-menu > li.menu-item-has-children:hover > ul.sub-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } #site-navigation ul.sub-menu { display: block !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 240px !important; background-color: #ffffff !important; border: 1px solid #e5e5e5 !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; padding: 0.5rem 0 !important; z-index: 50 !important; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s ease-in-out !important; list-style: none !important; margin: 0 !important; } #site-navigation ul.sub-menu li { width: 100% !important; } #site-navigation ul.sub-menu li a { display: block !important; padding: 0.5rem 1.25rem !important; color: #333333 !important; font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 400 !important; text-transform: none !important; /* normal casing, i.e. Title Case */ letter-spacing: normal !important; text-decoration: none !important; transition: all 0.15s !important; text-align: left !important; background-color: transparent !important; } #site-navigation ul.sub-menu li a:hover, #site-navigation ul.sub-menu li:hover > a { background-color: #f5f5f5 !important; color: #000000 !important; padding-left: 1.25rem !important; /* no slide effect */ } /* Row 3: Secondary Navigation Bar */ .secondary-menu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; } .secondary-menu a { color: #444444 !important; font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; /* normal casing, i.e. Title Case */ text-decoration: none !important; transition: color 0.15s; } .secondary-menu a:hover { color: #000000 !important; text-decoration: underline !important; } /* Red highlights for Sale / Destockage / Offres spéciales */ #site-navigation ul.main-menu > li > a[href*="destockage"], #site-navigation ul.main-menu > li > a[href*="offres-speciales"], #site-navigation ul.main-menu > li > a[href*="sale"], #site-navigation ul.main-menu > li > a[href*="promo"], #secondary-navigation .secondary-menu > li > a[href*="promo"], #secondary-navigation .secondary-menu > li > a[href*="sale"] { color: #cc0000 !important; } #site-navigation ul.main-menu > li > a[href*="destockage"]:hover, #site-navigation ul.main-menu > li > a[href*="offres-speciales"]:hover, #site-navigation ul.main-menu > li > a[href*="sale"]:hover, #site-navigation ul.main-menu > li > a[href*="promo"]:hover { color: #990000 !important; } /* Row 1 Language Menu adjustment */ .mbois-top-language-nav ul { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .mbois-top-language-nav a { color: #666666 !important; transition: color 0.15s; } .mbois-top-language-nav a:hover { color: #000000 !important; } /* Admin Bar sticky offset correction */ body.admin-bar .mbois-navigation-row { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .mbois-navigation-row { top: 46px !important; } } /* Cart Trigger Crate & Barrel Overrides */ #masthead .mbois-cart-trigger { color: #000000 !important; } #masthead .mbois-cart-trigger:hover, #masthead a[aria-label="Wishlist"]:hover { color: #000000 !important; background-color: transparent !important; } #masthead .mbois-cart-trigger span, #masthead a[aria-label="Wishlist"] span { background-color: transparent !important; color: #000000 !important; font-family: var(--font-sans) !important; font-size: 13.5px !important; font-weight: 500 !important; position: relative !important; display: inline-block !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; width: auto !important; height: auto !important; animation: none !important; } /* Mini Cart Dropdown Panel white theme styling overrides */ #masthead .mbois-mini-cart-dropdown-container { background-color: #ffffff !important; border: 1px solid #d1d5db !important; color: #000000 !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; } #masthead .mbois-mini-cart-dropdown-container .mbois-mini-cart-dropdown-inner { color: #000000 !important; } #masthead .mbois-mini-cart-dropdown-container .border-b, #masthead .mbois-mini-cart-dropdown-container .border-t, #masthead .mbois-mini-cart-dropdown-container .divide-y > * + * { border-color: #f3f4f6 !important; } #masthead .mbois-mini-cart-dropdown-container .bg-black\/20, #masthead .mbois-mini-cart-dropdown-container .bg-black\/25 { background-color: #fcfcfc !important; } #masthead .mbois-mini-cart-dropdown-container .text-white\/60, #masthead .mbois-mini-cart-dropdown-container .text-white\/50, #masthead .mbois-mini-cart-dropdown-container .text-white\/40, #masthead .mbois-mini-cart-dropdown-container .text-white\/90 { color: #374151 !important; } #masthead .mbois-mini-cart-dropdown-container .remove_from_cart_button { color: #9ca3af !important; } #masthead .mbois-mini-cart-dropdown-container .remove_from_cart_button:hover { color: #ef4444 !important; } #masthead .mbois-mini-cart-dropdown-container .text-amber-500, #masthead .mbois-mini-cart-dropdown-container .text-amber-400, #masthead .mbois-mini-cart-dropdown-container .text-amber-200\/90 { color: #000000 !important; font-weight: 700 !important; } #masthead .mbois-mini-cart-dropdown-container .mbois-mini-qty-wrapper { border-color: #d1d5db !important; background-color: #f3f4f6 !important; } #masthead .mbois-mini-cart-dropdown-container .mbois-mini-qty-btn { color: #4b5563 !important; } #masthead .mbois-mini-cart-dropdown-container .mbois-mini-qty-btn:hover { color: #000000 !important; background-color: #e5e7eb !important; } #masthead .mbois-mini-cart-dropdown-container input.mbois-mini-qty-display { color: #000000 !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; text-align: center !important; padding: 0 !important; margin: 0 !important; width: 42px !important; -moz-appearance: textfield !important; } #masthead .mbois-mini-cart-dropdown-container input.mbois-mini-qty-display::-webkit-outer-spin-button, #masthead .mbois-mini-cart-dropdown-container input.mbois-mini-qty-display::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } #masthead .mbois-mini-cart-dropdown-container input.mbois-mini-qty-display:focus { outline: none !important; box-shadow: none !important; border: none !important; background: transparent !important; } #masthead .mbois-mini-cart-dropdown-container a.bg-amber-600 { background-color: #000000 !important; color: #ffffff !important; border-radius: 0px !important; transition: background-color 0.15s !important; } #masthead .mbois-mini-cart-dropdown-container a.bg-amber-600:hover { background-color: #1f2937 !important; } #masthead .mbois-mini-cart-dropdown-container a.border-white\/20 { border-color: #000000 !important; color: #000000 !important; background-color: transparent !important; transition: all 0.15s !important; } #masthead .mbois-mini-cart-dropdown-container a.border-white\/20:hover { background-color: #f3f4f6 !important; } /* Home Icon vertical alignment */ .main-menu-row .lucide-home { margin-top: -2px; } /* Force Google Font Inter globally on all standard text-containing elements, excluding admin bar to prevent icon conflicts */ body, p, span:not(#wpadminbar *), li:not(#wpadminbar *), a:not(#wpadminbar *), input:not(#wpadminbar *), select:not(#wpadminbar *), textarea:not(#wpadminbar *), button:not(#wpadminbar *), h1, h2, h3, h4, h5, h6, label:not(#wpadminbar *) { font-family: var(--font-sans) !important; } /* Force baseline 16px size for default body and form text elements, excluding admin bar */ body, p, li:not(#wpadminbar *), input:not(#wpadminbar *), select:not(#wpadminbar *), textarea:not(#wpadminbar *), label:not(#wpadminbar *) { font-size: 16px !important; } /* Product Filter popovers and styles */ .woocommerce-archive-wrapper [x-show] { transition: opacity 0.15s ease-out, transform 0.15s ease-out; } /* Custom styles for filters custom scrollbar */ .woocommerce-archive-wrapper .max-h-80::-webkit-scrollbar { width: 4px; } .woocommerce-archive-wrapper .max-h-80::-webkit-scrollbar-track { background: #f1f1f1; } .woocommerce-archive-wrapper .max-h-80::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 2px; } .woocommerce-archive-wrapper .max-h-80::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* Hide scrollbar utility */ .scrollbar-none::-webkit-scrollbar { display: none !important; } .scrollbar-none { -ms-overflow-style: none !important; scrollbar-width: none !important; } /* Mobile full width catalog ordering */ @media (max-width: 1023px) { .woo-custom-ordering { width: 100% !important; } .woo-custom-ordering form.woocommerce-ordering { width: 100% !important; margin: 0 !important; } .woo-custom-ordering select.orderby { width: 100% !important; display: block !important; height: 42px !important; padding-left: 12px !important; padding-right: 12px !important; } } /* Custom Shipping Unavailable Notice styling inside checkout / cart totals */ .woocommerce-shipping-totals td .woocommerce-info.mboi-shipping-unavailable-notice, .shipping td .woocommerce-info.mboi-shipping-unavailable-notice, .woocommerce-checkout-review-order-table td .woocommerce-info.mboi-shipping-unavailable-notice { background-color: #fef2f2 !important; /* Soft red-50 background */ border: 1px solid #fee2e2 !important; border-left: 3px solid #b91c1c !important; /* Red-700 accent left border */ color: #991b1b !important; /* Red-800 text */ padding: 0.75rem 1rem !important; font-size: 0.8rem !important; line-height: 1.4 !important; text-align: left !important; margin: 0.5rem 0 0 auto !important; /* Push it to the right / keep alignment neat */ border-radius: 0px !important; box-shadow: none !important; width: 100% !important; max-width: 320px !important; /* Keep it compact */ display: inline-flex !important; /* Use flex inside the notice for icon alignment */ align-items: flex-start !important; gap: 0.5rem !important; } /* Remove default WooCommerce icon pseudo-elements that render as broken square boxes */ .woocommerce-shipping-totals td .woocommerce-info.mboi-shipping-unavailable-notice::before, .shipping td .woocommerce-info.mboi-shipping-unavailable-notice::before, .woocommerce-checkout-review-order-table td .woocommerce-info.mboi-shipping-unavailable-notice::before { display: none !important; content: none !important; } .mboi-shipping-unavailable-notice span { font-size: 0.8rem !important; line-height: 1.4 !important; display: inline !important; color: #991b1b !important; font-weight: 500 !important; } /* Quantity wrapper styling on Cart Page */ .mbois-qty-wrapper { background-color: #fafaf9 !important; /* Stone 50 */ border: 1px solid #d6d3d1 !important; /* Stone 300 */ display: inline-flex !important; align-items: center !important; height: 38px !important; border-radius: 0px !important; /* Square theme style */ overflow: hidden !important; } .mbois-qty-btn { border: none !important; background: transparent !important; color: #57534e !important; /* Stone 600 */ width: 36px !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background-color 0.2s ease, color 0.2s ease !important; } .mbois-qty-btn:hover { background-color: #f5f5f4 !important; /* Stone 100 */ color: #1c1917 !important; /* Stone 900 */ } .mbois-qty-display { font-size: 0.9rem !important; font-weight: 700 !important; color: #1c1917 !important; min-width: 36px !important; text-align: center !important; user-select: none !important; } /* Quantity Input manual typing styling overrides */ input.qty.mbois-cart-qty-input, input.qty.mbois-single-qty-input { display: inline-block !important; width: 44px !important; height: 100% !important; background: transparent !important; border: none !important; outline: none !important; text-align: center !important; font-size: 0.9rem !important; font-weight: 700 !important; color: #1c1917 !important; padding: 0 !important; margin: 0 !important; -moz-appearance: textfield !important; box-shadow: none !important; } input.qty.mbois-cart-qty-input::-webkit-outer-spin-button, input.qty.mbois-cart-qty-input::-webkit-inner-spin-button, input.qty.mbois-single-qty-input::-webkit-outer-spin-button, input.qty.mbois-single-qty-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } input.qty.mbois-cart-qty-input:focus, input.qty.mbois-single-qty-input:focus { outline: none !important; box-shadow: none !important; border: none !important; background: transparent !important; } /* Cart items opacity transition on update */ .woocommerce-cart-form { transition: opacity 0.25s ease !important; } .cart_totals { transition: opacity 0.25s ease !important; } /* Remove button visual tweak - Override WooCommerce default circular remove button styling */ .woocommerce-cart-form__cart-item a.remove { display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; width: auto !important; height: auto !important; line-height: 1.2 !important; background: transparent !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: #78716c !important; /* Neutral 500 */ text-decoration: none !important; transition: color 0.15s ease !important; overflow: visible !important; } .woocommerce-cart-form__cart-item a.remove::before { display: none !important; /* Hide any default WooCommerce pseudo-element x icons */ content: none !important; } .woocommerce-cart-form__cart-item a.remove:hover { color: #ef4444 !important; /* Red 500 on hover */ background: transparent !important; } /* Center chevron icons in slider navigation buttons */ .mboi-slider-btn { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .mboi-slider-btn svg { margin: 0 !important; padding: 0 !important; display: block !important; position: static !important; transform: none !important; } /* Custom Wishlist Page & Interactive Elements Styles */ #mbois-wishlist-page { animation: mboisFadeIn 0.4s ease-out; } @keyframes mboisFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .mbois-wishlist-toggle-btn svg { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), stroke 0.2s, fill 0.2s; } .mbois-wishlist-toggle-btn.in-wishlist { background-color: #b45309 !important; /* Solid Amber */ border-color: #b45309 !important; color: #ffffff !important; } .mbois-wishlist-toggle-btn.in-wishlist:hover { background-color: #92400e !important; /* Slightly darker amber (amber-800) on hover */ border-color: #92400e !important; } .mbois-wishlist-toggle-btn.in-wishlist svg { transform: scale(1.15); } /* Ensure all wishlist cards have equal height in the grid */ #mbois-wishlist-grid { align-items: stretch !important; } #mbois-wishlist-grid > div { display: flex !important; flex-direction: column !important; height: 100% !important; } .mbois-wishlist-toggle-btn:active svg { transform: scale(0.85); } #mbois-wishlist-grid .group { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Style WooCommerce AJAX added to cart link in Wishlist Grid */ #mbois-wishlist-grid .added_to_cart { display: block; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #b45309; /* Theme accent Amber */ margin-top: 10px; text-decoration: underline; transition: color 0.2s ease-in-out; } #mbois-wishlist-grid .added_to_cart:hover { color: #000000; } /* Ensure all WooCommerce catalog product cards stretch to equal height */ ul.products { align-items: stretch !important; } ul.products li.product { display: flex !important; flex-direction: column !important; height: 100% !important; } /* Shipping labels font size synchronization */ .woocommerce-shipping-methods label, .shipping label, .woocommerce-checkout-review-order-table label { font-size: 12px !important; } /* Multi-step Checkout Styles */ .mboi-multistep-checkout .checkout-step-container { border: 1px solid #e5e7eb; border-radius: 0px; background-color: #ffffff; transition: all 0.3s ease; } .mboi-multistep-checkout .mboi-step-active { border-color: #d1d5db; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); } .mboi-multistep-checkout .mboi-step-completed { background-color: #fafafa; border-color: #e5e7eb; } .mboi-multistep-checkout .mboi-step-pending { opacity: 0.6; pointer-events: none; background-color: #ffffff; } .mboi-multistep-checkout .mboi-step-pending h2 { color: #9ca3af !important; } .mboi-multistep-checkout .woocommerce-invalid input, .mboi-multistep-checkout .woocommerce-invalid select { border-color: #dc2626 !important; background-color: #fef2f2 !important; } /* Fix checkout fields layout from being distorted */ #mboi-step-1-placeholder .form-row, #mboi-step-2-placeholder .form-row { width: 100% !important; margin-bottom: 1.25rem !important; } @media (min-width: 768px) { #mboi-step-1-placeholder .form-row-wide, #mboi-step-2-placeholder .form-row-wide, #mboi-step-2-placeholder .woocommerce-shipping-fields { grid-column: span 2 / span 2 !important; } #mboi-step-2-placeholder .woocommerce-shipping-fields__field-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 1rem !important; width: 100% !important; } } /* Sidebar shipping row visibility overrides */ #mboi_sidebar_shipping_row.mboi-hide-shipping-row { display: none !important; } /* Hide tax rows from cart, checkout totals tables */ .shop_table .tax-rate, .shop_table .tax-total, .cart_totals .tax-rate, .cart_totals .tax-total { display: none !important; }