/* ugfreak-custom.css — WordPress/WooCommerce-only shims layered over the source main.css. Keep this thin: visual fidelity comes from main.css. Add fixes here only when WP markup differs from the source's hand-written HTML. Bump UGFREAK_VER on every change. */ /* The source sets these inline on /; replicate so main.css's fixed/absolute positioning (popup, overlays) resolves the same way. */ html { height: auto; } body.inner_page { position: relative; min-height: 100%; } /* Promo popup stays hidden until explicitly opened (matches source default). */ .popup-onload { display: none; } /* WP admin bar must not shove the fixed elements when previewing while logged in. */ /* Single-product image: the source uses a picZoomer JS plugin we don't load; we render a plain bordered, centered image box instead (matches the source's framed product image visually). */ .ugf-product-image { border: 1px solid #e5e5e5; background: #fff; padding: 20px; text-align: center; min-height: 320px; display: flex; align-items: center; justify-content: center; } .ugf-product-image img { max-width: 100%; height: auto; display: inline-block; } /* Pagination: ugfreak's markup uses Bootstrap-4 .page-item/.page-link classes, but the loaded Bootstrap is v3 (which doesn't style them) so they render unboxed/dark. Force the source look: white boxes, red numbers, red active page. */ .pagination-container { text-align: center; margin: 30px 0 10px; } .pagination { display: inline-flex; flex-wrap: wrap; padding-left: 0; margin: 0; list-style: none; background: transparent !important; } .pagination .page-item { display: inline-block; } .pagination .page-item .page-link { display: block; padding: 8px 14px; margin-left: -1px; color: #de4237; background: #fff; border: 1px solid #ddd; text-decoration: none; line-height: 1.4; font-weight: 500; } .pagination .page-item:first-child .page-link { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pagination .page-item:last-child .page-link { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .pagination .page-item.active .page-link, .pagination > .active > span { background: #de4237 !important; color: #fff !important; border-color: #de4237 !important; position: relative; z-index: 1; } .pagination .page-item.disabled .page-link { color: #bbb; pointer-events: none; } .pagination .page-link:hover { background: #f5f5f5; } /* Header search button: red background + magnifier icon, pinned to the right of the field. (Insurance over main.css so it renders on every page, not just the homepage.) */ header form { position: relative; } header form input[type="button"], header form input.button { background: #dd3737 url('../img/search_icon.png') center center no-repeat !important; width: 42px !important; height: calc(100% - 2px) !important; border: 0 !important; position: absolute !important; right: 1px; top: 1px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* Logged-in header links (ACCOUNT | ORDER HISTORY | CART). */ .header_account_links { padding-top: 12px; font-size: 13px; font-weight: 600; } .header_account_links a { color: #1c1e1d; text-transform: uppercase; } .header_account_links a:hover { color: #dd3737; } .header_account_links span { color: #bbb; margin: 0 4px; } /* Cart page: quantity stepper buttons + remove. */ .cart_section .quantity_field .q_btn { cursor: pointer; border: 1px solid #dedede; width: 32px; height: 36px; line-height: 34px; text-align: center; user-select: none; background: #fff; } .cart_section .quantity_field .qty { height: 36px; border: 1px solid #dedede; border-left: 0; border-right: 0; } /* Cart buttons: short + side by side (not full-width stacked). */ .cart_section .button_group { text-align: center; margin-top: 30px; } .cart_section .button_group .theme_btn, .cart_section .button_group button.theme_btn, .cart_section .button_group a.theme_btn { display: inline-block !important; width: auto !important; min-width: 200px; padding: 14px 30px !important; margin: 0 6px !important; vertical-align: top; border: 0; } /* ---- Custom checkout ---- */ .checkout_section { padding: 40px 0 80px; } .checkout_section .step_head { color: #dd3737; text-transform: uppercase; font-size: 18px; font-weight: 600; margin: 30px 0 14px; } .checkout_section .radio_line { display: block; font-weight: 600; margin-bottom: 6px; } .checkout_section .radio_line input { margin-right: 8px; } .checkout_section .addr_line, .checkout_section .ship_info { color: #444; margin: 0 0 6px 22px; } .checkout_section .payment_method { margin-bottom: 22px; } .checkout_section .payment_desc { color: #333; font-size: 13px; line-height: 1.5; margin: 6px 0 0 22px; } .checkout_section .payment_desc p { margin: 0 0 10px; } .checkout_section .theme_btn { display: inline-block; width: auto; min-width: 200px; padding: 14px 30px; margin-top: 24px; } .checkout_section .preview_btn, .checkout_section .confirm_btn { background: #dd3737; } /* right summary */ .checkout_summary .scroll_note { text-align: center; color: #dd3737; font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 12px; } .summary_box { border: 1px solid #eee; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.06); } .summary_head { background: #dd3737; color: #fff; font-weight: 700; text-transform: uppercase; padding: 16px 18px; } .summary_table { width: 100%; } .summary_table th { background: #f3f3f3; font-size: 12px; text-transform: uppercase; padding: 10px 12px; color: #555; text-align: left; } .summary_table th:last-child, .summary_table td:last-child { text-align: right; } .summary_table td { padding: 12px; font-size: 14px; } .summary_table td a { color: #2f6fb0; } .summary_table tfoot td { background: #f3f3f3; font-weight: 600; } .summary_table .subtotal_row td, .summary_table .total_row td { color: #dd3737; text-transform: uppercase; } .summary_table .total_row td { font-size: 16px; } .coupon_box { display: flex; gap: 10px; margin-top: 20px; border: 1px solid #eee; border-radius: 4px; padding: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.06); } .coupon_box input { flex: 1; border: 1px solid #ddd; padding: 10px; font-size: 12px; } .coupon_box .theme_btn { width: auto; min-width: 0; margin: 0; padding: 10px 22px; background: #dd3737; white-space: nowrap; } /* order received */ .order_received { max-width: 760px; margin: 0 auto; padding: 20px 0; } .order_received_table { width: 100%; margin: 16px 0; } .order_received_table td { padding: 8px 6px; border-bottom: 1px solid #eee; } .order_received .wallet_addr { color: #dd3737; font-weight: 700; word-break: break-all; } .order_received .payment_desc { margin: 16px 0; font-size: 13px; color: #333; }