/* * WooCommerce page styling: shop archive, single product, cart, checkout. * * The cart and checkout sections below are ported unchanged from the real, * live cyber_cart and cyber_checkout snippets (only the Elementor-fighting * body:has() rules and the old fixed-header offset were removed — this * theme's header is sticky and needs no offset). * * The single-product and shop-archive sections are NEW: your live versions * of those were Elementor Theme Builder templates, which aren't exported * anywhere I can read, so there was nothing to port. Review these on * staging. */ /* ==================== CART (ported from cyber_cart) ==================== */ /* ======================================== CYBERAMMO CART PAGE (cyber_cart) ======================================== */ .dma-page-c8a2b1f4 { --dma-bg: #0a0a0c; --dma-surface: #111114; --dma-border: #1e1e24; --dma-text: #e0e0e4; --dma-text-muted: #6a6a74; --dma-accent: #EF524E; --dma-accent-dim: rgba(239, 82, 78, 0.10); --dma-accent-glow: rgba(239, 82, 78, 0.25); --dma-white: #ffffff; background: var(--dma-bg); color: var(--dma-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; position: relative; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; } .dma-grid-bg-c8a2b1f4 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .dma-grid-lines-c8a2b1f4 { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: linear-gradient(rgba(239, 82, 78, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 82, 78, 0.04) 1px, transparent 1px); background-size: 60px 60px; animation: dmaGridDrift-c8a2b1f4 25s linear infinite; } @keyframes dmaGridDrift-c8a2b1f4 { 0% { transform: translate(0, 0); } 100% { transform: translate(60px, 60px); } } /* CART CONTENT & WOO OVERRIDES */ .dma-cart-container-c8a2b1f4 { max-width: 1200px; width: 100%; margin: 0 auto; padding: 60px 24px; position: relative; z-index: 1; flex-grow: 1; } .dma-title-c8a2b1f4 { font-size: 32px; font-weight: 800; color: var(--dma-heading); letter-spacing: -0.02em; margin-bottom: 6px; } .dma-subtitle-c8a2b1f4 { font-size: 14px; color: var(--dma-text-muted); } .dma-hero-line-c8a2b1f4 { margin-top: 24px; height: 1px; background: linear-gradient(90deg, var(--dma-accent), transparent 60%); opacity: 0.4; margin-bottom: 40px; } .dma-woo-wrapper-c8a2b1f4 .woocommerce { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; } .dma-woo-wrapper-c8a2b1f4 .woocommerce-cart-form { flex: 1 1 65%; } .dma-woo-wrapper-c8a2b1f4 .cart-collaterals { flex: 1 1 320px; max-width: 450px; } /* MAIN TABLE STYLING */ .dma-woo-wrapper-c8a2b1f4 table.shop_table { border: 1px solid var(--dma-border) !important; background: var(--dma-surface) !important; width: 100% !important; border-collapse: collapse !important; } .dma-woo-wrapper-c8a2b1f4 table.shop_table th { background: var(--dma-bg) !important; color: var(--dma-text-muted) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.1em; padding: 16px !important; border:none !important;} .dma-woo-wrapper-c8a2b1f4 table.shop_table td { border-bottom: 1px solid var(--dma-border) !important; padding: 20px 16px !important; color: var(--dma-heading) !important; vertical-align: middle; } /* QUANTITY & COUPON */ .dma-woo-wrapper-c8a2b1f4 input.input-text, .dma-woo-wrapper-c8a2b1f4 .quantity .qty { background: var(--dma-bg) !important; color: var(--dma-heading) !important; border: 1px solid var(--dma-border) !important; padding: 10px !important; outline: none; } .dma-woo-wrapper-c8a2b1f4 input.input-text:focus, .dma-woo-wrapper-c8a2b1f4 .quantity .qty:focus { border-color: var(--dma-accent) !important; } /* BUTTONS */ .dma-woo-wrapper-c8a2b1f4 .button { background: transparent !important; color: var(--dma-accent) !important; border: 1px solid var(--dma-accent) !important; padding: 12px 24px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; transition: 0.3s !important; border-radius: 0 !important; } .dma-woo-wrapper-c8a2b1f4 .button:hover { background: var(--dma-accent) !important; color: #fff !important; box-shadow: 0 0 15px var(--dma-accent-glow) !important; } .dma-woo-wrapper-c8a2b1f4 .checkout-button { display: block !important; width: 100% !important; text-align: center !important; background: var(--dma-accent) !important; color: #fff !important; font-size: 14px !important; } /* EMPTY CART (woocommerce/cart/cart-empty.php) — replaces WooCommerce's plain notice box */ .dma-woo-wrapper-c8a2b1f4 .wc-empty-cart-message { flex: 1 1 100%; } .dma-cart-empty { max-width: 560px; margin: 0 auto; padding: 48px 32px 40px; text-align: center; background: var(--dma-surface); border: 1px solid var(--dma-border); border-top: 3px solid var(--dma-accent); } .dma-cart-empty-icon { width: 64px; height: 64px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--dma-accent); background: var(--dma-accent-dim); } .dma-cart-empty-icon svg { width: 28px; height: 28px; } .dma-woo-wrapper-c8a2b1f4 .dma-cart-empty-title { margin: 0 0 10px; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--dma-heading); } .dma-cart-empty-text { margin: 0 auto 28px; max-width: 420px; font-size: 14px; line-height: 1.6; color: var(--dma-text-muted); } .dma-cart-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .dma-cart-empty-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 180px; padding: 13px 24px; border: 1px solid var(--dma-accent); color: var(--dma-accent); background: transparent; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .dma-cart-empty-btn:hover, .dma-cart-empty-btn:focus-visible { background: var(--dma-accent); color: #fff; box-shadow: 0 0 15px var(--dma-accent-glow); } .dma-cart-empty-btn.is-primary { background: var(--dma-accent); color: #fff; } .dma-cart-empty-btn.is-primary:hover, .dma-cart-empty-btn.is-primary:focus-visible { background: var(--dma-accent-hover, var(--dma-accent)); border-color: var(--dma-accent-hover, var(--dma-accent)); } .dma-cart-empty-help { margin: 26px 0 0; font-size: 13px; color: var(--dma-text-muted); } .dma-cart-empty-help a { color: var(--dma-accent); font-weight: 600; text-decoration: none; } .dma-cart-empty-help a:hover { text-decoration: underline; } @media (max-width: 480px) { .dma-cart-empty { padding: 36px 20px 32px; } .dma-cart-empty-btn { flex: 1 1 100%; } } /* BASKET TOTALS (Fixed Width) */ .dma-woo-wrapper-c8a2b1f4 .cart_totals { background: var(--dma-surface) !important; border: 1px solid var(--dma-border) !important; border-top: 3px solid var(--dma-accent) !important; padding: 30px !important; width: 100% !important; } .dma-woo-wrapper-c8a2b1f4 .cart_totals h2 { font-size: 20px !important; color: var(--dma-heading) !important; margin-bottom: 20px !important; text-transform: uppercase; letter-spacing: 0.05em; } .dma-woo-wrapper-c8a2b1f4 .cart_totals table.shop_table_responsive { width: 100% !important; background: transparent !important; border: none !important; } .dma-woo-wrapper-c8a2b1f4 .cart_totals tr th, .dma-woo-wrapper-c8a2b1f4 .cart_totals tr td { padding: 15px 0 !important; border-top: 1px solid var(--dma-border) !important; background: transparent !important; } .dma-woo-wrapper-c8a2b1f4 .cart_totals .order-total th, .dma-woo-wrapper-c8a2b1f4 .cart_totals .order-total td { font-size: 18px !important; color: var(--dma-accent) !important; border-top: 2px solid var(--dma-border) !important; } /* MOBILE RESPONSIVE */ @media (max-width: 1024px) { .dma-woo-wrapper-c8a2b1f4 .woocommerce { flex-direction: column; } .dma-woo-wrapper-c8a2b1f4 .woocommerce-cart-form, .dma-woo-wrapper-c8a2b1f4 .cart-collaterals { flex: 1 1 100%; width: 100%; max-width: 100%; } } /* ==================== CHECKOUT (ported from cyber_checkout) ==================== */ /* ======================================== CYBERAMMO PREMIUM CHECKOUT V5 ======================================== */ .dma-page-checkout { --dma-bg: #0a0a0c; --dma-surface: #111114; --dma-surface-raised: #141418; --dma-border: #222228; --dma-text: #e0e0e4; --dma-text-muted: #8e8e99; --dma-accent: #EF524E; --dma-accent-dim: rgba(239, 82, 78, 0.10); --dma-accent-glow: rgba(239, 82, 78, 0.25); background: var(--dma-bg); color: var(--dma-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; position: relative; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* Background Grid */ .dma-grid-bg-checkout { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .dma-grid-lines-checkout { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: linear-gradient(rgba(239, 82, 78, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 82, 78, 0.04) 1px, transparent 1px); background-size: 60px 60px; animation: dmaGridDrift-checkout 25s linear infinite; } .dma-grid-glow-checkout { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse 800px 600px at 50% 10%, rgba(239, 82, 78, 0.04) 0%, transparent 70%); } @keyframes dmaGridDrift-checkout { 0% { transform: translate(0, 0); } 100% { transform: translate(60px, 60px); } } /* Layout & Typography */ .dma-checkout-container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 40px 24px 80px; position: relative; z-index: 1; } .dma-checkout-title { font-size: 32px; font-weight: 800; color: var(--dma-heading); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.02em; } .dma-checkout-subtitle { font-size: 14px; color: var(--dma-text-muted); } .dma-hero-line-checkout { margin-top: 24px; height: 1px; background: linear-gradient(90deg, var(--dma-accent), transparent 60%); opacity: 0.4; margin-bottom: 50px; } /* ----------------------------------------- COUPON & WOOCOMMERCE NOTICES ----------------------------------------- */ /* Nuke all ugly icons and weird paddings */ .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before, .woocommerce-info i, .woocommerce-message i, .woocommerce-error i, .woocommerce-info svg, .woocommerce-message svg, .woocommerce-error svg { display: none !important; content: none !important; } .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-form-coupon-toggle .woocommerce-info { background: var(--dma-surface) !important; border: 1px solid var(--dma-border) !important; border-top: 2px solid var(--dma-accent) !important; border-radius: 6px !important; color: var(--dma-text) !important; padding: 18px 24px !important; margin-bottom: 30px !important; font-size: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); background-image: none !important; } .woocommerce-info a, .woocommerce-message a, .woocommerce-error a { color: var(--dma-accent) !important; font-weight: 700; text-decoration: none; transition: 0.2s; } .woocommerce-info a:hover { text-shadow: 0 0 10px var(--dma-accent-glow); } /* The Expanding Coupon Form */ form.checkout_coupon { background: var(--dma-surface-raised); border: 1px solid var(--dma-border); padding: 24px; border-radius: 6px; margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } form.checkout_coupon p { margin: 0 !important; color: var(--dma-text-muted); font-size: 13px; } form.checkout_coupon p.form-row-first { flex-grow: 1; min-width: 200px; } form.checkout_coupon p.form-row-last { flex-shrink: 0; } form.checkout_coupon input.input-text { height: 48px !important; padding: 0 16px !important; margin: 0 !important; } form.checkout_coupon button.button { background: var(--dma-surface) !important; color: var(--dma-accent) !important; border: 1px solid var(--dma-accent) !important; height: 48px !important; padding: 0 24px !important; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; transition: 0.3s; } form.checkout_coupon button.button:hover { background: var(--dma-accent) !important; color: #fff !important; box-shadow: 0 0 15px var(--dma-accent-glow) !important; } /* ========================================= MODERN CSS GRID (PERFECT TOP ALIGNMENT) ========================================= */ @media (min-width: 992px) { .dma-woo-checkout-wrapper form.woocommerce-checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 60px; align-items: start; } /* Force customer details to span 10 rows so it doesn't push row 2 down */ .dma-woo-checkout-wrapper #customer_details { grid-column: 1; grid-row: 1 / 10; margin: 0; } /* Right column elements stack neatly from the top */ .dma-woo-checkout-wrapper #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 24px 0; } .dma-woo-checkout-wrapper #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 100px; } } /* Force Woo Billing/Shipping columns off */ .dma-woo-checkout-wrapper .col2-set .col-1, .dma-woo-checkout-wrapper .col2-set .col-2 { width: 100% !important; float: none !important; margin-bottom: 40px; } /* Clean Headings */ .dma-woo-checkout-wrapper #customer_details h3, .dma-woo-checkout-wrapper #order_review_heading { color: var(--dma-heading); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 24px 0; border-bottom: 1px solid var(--dma-border); padding-bottom: 12px; line-height: 1.2; } /* ----------------------------------------- PREMIUM INPUTS & FIELDS (LEFT SIDE) ----------------------------------------- */ /* Flexbox override for perfect 50/50 split */ .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; } .dma-woo-checkout-wrapper .form-row { margin-bottom: 20px; padding: 0; } .dma-woo-checkout-wrapper .form-row-wide { width: 100% !important; float: none !important; } .dma-woo-checkout-wrapper .form-row-first, .dma-woo-checkout-wrapper .form-row-last { width: calc(50% - 10px) !important; float: none !important; } .dma-woo-checkout-wrapper .form-row label { color: var(--dma-text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; display: block; } .dma-woo-checkout-wrapper .form-row label abbr.required { color: var(--dma-accent); text-decoration: none; font-weight: bold; border: none; } .dma-woo-checkout-wrapper input[type="text"], .dma-woo-checkout-wrapper input[type="email"], .dma-woo-checkout-wrapper input[type="tel"], .dma-woo-checkout-wrapper select, .dma-woo-checkout-wrapper textarea { background: var(--dma-surface-raised) !important; color: var(--dma-text) !important; border: 1px solid var(--dma-border) !important; border-radius: 6px !important; padding: 14px 16px !important; outline: none; width: 100% !important; font-size: 14px; transition: all 0.3s ease; box-shadow: none !important; box-sizing: border-box !important; } .dma-woo-checkout-wrapper input:focus, .dma-woo-checkout-wrapper select:focus, .dma-woo-checkout-wrapper textarea:focus { border-color: var(--dma-accent) !important; background: var(--dma-surface-raised) !important; } /* Select2 Dropdowns */ .dma-woo-checkout-wrapper .select2-container--default .select2-selection--single { background: var(--dma-surface-raised) !important; border: 1px solid var(--dma-border) !important; height: 50px; border-radius: 6px; width: 100% !important; } .dma-woo-checkout-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dma-text) !important; line-height: 50px; padding-left: 16px; font-size: 14px; } .dma-woo-checkout-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; } /* ----------------------------------------- ORDER REVIEW CARD & TABLE (RIGHT SIDE) ----------------------------------------- */ .dma-woo-checkout-wrapper #order_review { background: var(--dma-surface); border: 1px solid var(--dma-border); border-radius: 8px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } /* Nuke all internal default table borders */ .dma-woo-checkout-wrapper table.shop_table, .dma-woo-checkout-wrapper table.shop_table th, .dma-woo-checkout-wrapper table.shop_table td { border: none !important; background: transparent !important; } .dma-woo-checkout-wrapper table.shop_table { width: 100%; margin-bottom: 24px; border-collapse: collapse; } .dma-woo-checkout-wrapper table.shop_table th, .dma-woo-checkout-wrapper table.shop_table td { padding: 16px 0 !important; color: var(--dma-text); vertical-align: middle; } /* Table Headers (PRODUCT / SUBTOTAL) */ .dma-woo-checkout-wrapper table.shop_table thead th { font-size: 10px; color: var(--dma-text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; border-bottom: 1px solid var(--dma-hairline) !important; padding-top: 0 !important; } .dma-woo-checkout-wrapper table.shop_table thead th.product-total { text-align: right; } /* Product Rows */ .dma-woo-checkout-wrapper table.shop_table tbody td { border-bottom: 1px solid var(--dma-hairline) !important; } .dma-woo-checkout-wrapper table.shop_table .product-name { font-weight: 500; font-size: 14px; line-height: 1.5; padding-right: 16px !important; } .dma-woo-checkout-wrapper table.shop_table .product-total { text-align: right; } .dma-woo-checkout-wrapper table.shop_table .product-total .amount { color: var(--dma-heading); font-weight: 600; } /* Order Totals / Footer Rows */ .dma-woo-checkout-wrapper table.shop_table tfoot th, .dma-woo-checkout-wrapper table.shop_table tfoot td { border-bottom: 1px solid var(--dma-hairline) !important; font-size: 13px; font-weight: 600; color: var(--dma-text-muted); } .dma-woo-checkout-wrapper table.shop_table tfoot th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; } .dma-woo-checkout-wrapper table.shop_table tfoot td { text-align: right; color: var(--dma-heading); } /* Total Row */ .dma-woo-checkout-wrapper table.shop_table tfoot tr.order-total th, .dma-woo-checkout-wrapper table.shop_table tfoot tr.order-total td { border-top: 1px dashed var(--dma-hairline) !important; border-bottom: none !important; padding-top: 24px !important; padding-bottom: 0 !important; } .dma-woo-checkout-wrapper table.shop_table tfoot tr.order-total th { font-size: 14px; color: var(--dma-heading); } .dma-woo-checkout-wrapper table.shop_table tfoot tr.order-total td .amount { font-size: 20px; color: var(--dma-accent); font-weight: 800; } /* Fix Shipping Methods Alignment (Perfectly Inline) */ #shipping_method { list-style: none; padding: 0; margin: 0; text-align: right; } #shipping_method li { margin-bottom: 8px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: nowrap; } #shipping_method input[type="radio"] { margin: 0; accent-color: var(--dma-accent); cursor: pointer; flex-shrink: 0; } #shipping_method label { display: inline; color: var(--dma-text); text-transform: none; font-size: 13px; font-weight: 500; cursor: pointer; letter-spacing: normal; white-space: nowrap; margin: 0; } /* ----------------------------------------- PAYMENT METHODS ----------------------------------------- */ #payment.woocommerce-checkout-payment { background: transparent; border: none; padding: 0; margin-top: 0; } #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px dashed var(--dma-hairline); padding-top: 24px; } #payment ul.payment_methods li { margin-bottom: 16px; display: block; } #payment ul.payment_methods li input[type="radio"] { margin: 0 12px 0 0; accent-color: var(--dma-accent); transform: scale(1.2); cursor: pointer; vertical-align: middle; display: inline-block; } #payment ul.payment_methods li label { color: var(--dma-heading); font-weight: 600; font-size: 15px; cursor: pointer; margin: 0; text-transform: none; letter-spacing: normal; vertical-align: middle; display: inline-block; } #payment ul.payment_methods li img { display: none !important; } /* Payment Info Dropdown Box */ #payment div.payment_box { background: var(--dma-surface-raised); border: 1px solid var(--dma-border); padding: 16px; color: var(--dma-text-muted); font-size: 13px; margin-top: 12px; border-radius: 6px; position: relative; line-height: 1.6; display: block; clear: both; } #payment div.payment_box::before { content: ''; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--dma-surface-raised); position: absolute; top: -8px; left: 20px; } /* WooCommerce's own .woocommerce-checkout #payment div.payment_box rule is more specific than the two above and painted the box lavender with a lavender arrow; these win so every payment box uses the theme colors. */ .woocommerce-checkout #payment div.payment_box { background: var(--dma-surface-raised, var(--dma-surface)); border: 1px solid var(--dma-border); color: var(--dma-text-muted); border-radius: 8px; margin: 12px 0 0; padding: 14px 16px; } .woocommerce-checkout #payment div.payment_box::before { content: ''; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px; margin: 0; background: var(--dma-surface-raised, var(--dma-surface)); border: 1px solid var(--dma-border); border-width: 1px 0 0 1px; transform: rotate(45deg); } .woocommerce-checkout #payment div.payment_box p { margin: 0; color: var(--dma-text-muted); font-size: 13px; line-height: 1.6; } /* PayPal: the payment box held nothing visible, so it showed as an empty bar */ .woocommerce-checkout #payment div.payment_box .wc-ppcp-payment-method__container:empty, .woocommerce-checkout #payment div.payment_box .wc-ppcp-order-review-message__container[style*="none"] { display: none; } .woocommerce-checkout #payment .wc-ppcp-order-review__message { color: var(--dma-text); font-size: 13px; } .woocommerce-checkout #payment .wc-ppcp-cancel__payment { color: var(--dma-accent); font-weight: 600; } .dma-pay-note { display: flex; align-items: center; gap: 14px; } .dma-pay-note-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background-color: var(--dma-accent-dim); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; } .dma-pay-note-text { color: var(--dma-text-muted); font-size: 13px; line-height: 1.55; } /* Payment method rows: radio + name on the left, the provider's logo in a same-size chip on the right (inc/checkout-payments.php). Logos without a chip stay hidden. */ #payment ul.payment_methods li.wc_payment_method { display: flex; flex-wrap: wrap; align-items: center; } /* (WooCommerce's ".woocommerce-checkout #payment …" rule zeroed the gap between rows) */ .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method, #payment ul.payment_methods li.wc_payment_method { margin: 0 0 14px !important; line-height: 1.4; } #payment ul.payment_methods li.wc_payment_method:last-child { margin-bottom: 0 !important; } #payment ul.payment_methods li.wc_payment_method > input[type="radio"] { flex: 0 0 auto; } #payment ul.payment_methods li.wc_payment_method > label { flex: 1 1 0; min-width: 0; display: flex !important; align-items: center; gap: 12px; } #payment ul.payment_methods li.wc_payment_method > .payment_box { flex: 1 1 100%; } .dma-pay-chip { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 36px; padding: 0 10px; box-sizing: border-box; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--dma-border); } #payment ul.payment_methods li .dma-pay-chip img, .dma-pay-chip img { display: block !important; width: auto !important; height: auto !important; max-width: 100%; max-height: 20px; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; } .dma-pay-chip--ppcp { background: #ffffff; } .dma-pay-chip--nowpayments { background: #13161b; } #payment ul.payment_methods li .dma-pay-chip--nowpayments img, .dma-pay-chip--nowpayments img { max-height: 30px; } @media (max-width: 480px) { .dma-pay-note { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ----------------------------------------- CHECKOUT BUTTON & TERMS ----------------------------------------- */ .woocommerce-terms-and-conditions-wrapper { margin-bottom: 24px; font-size: 12px; color: var(--dma-text-muted); line-height: 1.6; } .woocommerce-terms-and-conditions-wrapper a { color: var(--dma-accent); text-decoration: none; font-weight: 600; } #payment #place_order { background: var(--dma-accent) !important; color: #fff !important; border: none !important; width: 100%; min-height: 52px; padding: 0 20px !important; font-size: 16px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.3s ease; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 4px 15px var(--dma-accent-dim); } /* Crypto: "Pay with" + the NOWPayments logo (same height as PayPal's button) */ #payment #place_order .dma-pay-chip--btn { margin: 0; width: auto; height: 36px; padding: 0 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); } #payment #place_order .dma-pay-chip--btn img { max-height: 28px; } #payment #place_order:hover { background: #d94440 !important; box-shadow: 0 0 25px var(--dma-accent-glow) !important; transform: translateY(-2px); } /* One pay button per method, both with the same look and motion. PayPal: only PayPal's own button (opens PayPal in a small window and comes back here). The plugin marks our button "wc-ppcp-hide-button" — honour it. */ #payment #place_order.wc-ppcp-hide-button, .woocommerce #payment #place_order.wc-ppcp-hide-button { display: none !important; } #payment .wc-ppcp-checkout-container { position: relative; min-height: 52px; border-radius: var(--dma-radius-btn, 10px); overflow: hidden; isolation: isolate; box-shadow: 0 4px 15px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .3s ease, box-shadow .3s ease; } #payment .wc-ppcp-checkout-container:empty { box-shadow: none; } #payment .wc-ppcp-checkout-container:hover { transform: translateY(-2px); box-shadow: 0 0 25px var(--dma-accent-glow), 0 0 0 1px var(--dma-accent); } #payment .wc-ppcp-checkout-container > div, #payment .wc-ppcp-checkout-container iframe { display: block; border-radius: var(--dma-radius-btn, 10px); } #payment #place_order { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--dma-radius-btn, 10px) !important; } /* Light sweep across the button every few seconds (clicks pass through it). */ #payment .wc-ppcp-checkout-container:not(:empty)::after, #payment #place_order::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 48%, rgba(255, 255, 255, .05) 56%, transparent 70%); transform: translateX(-120%); animation: dma-pay-sweep 3.6s ease-in-out 1s infinite; } @keyframes dma-pay-sweep { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { #payment .wc-ppcp-checkout-container::after, #payment #place_order::after { animation: none; display: none; } #payment .wc-ppcp-checkout-container:hover, #payment #place_order:hover { transform: none; } } /* Switching method refreshes the order box: a soft dark veil instead of a white flash. */ .woocommerce-checkout .blockUI.blockOverlay { background: rgba(10, 12, 16, .25) !important; opacity: 1 !important; transition: opacity .15s ease; } /* Remove random Elementor/theme inherited margins */ .woocommerce-checkout p { margin-bottom: 0; } .woocommerce-form-login-toggle { display: none; } /* ==================== SHOP ARCHIVE (new) ==================== */ .dma-page-shop .dma-grid-a3655c67 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .dma-page-shop .woocommerce-pagination { margin-top: 40px; text-align: center; } .dma-page-shop .woocommerce-pagination ul { list-style: none; display: inline-flex; gap: 6px; padding: 0; } .dma-page-shop .woocommerce-pagination a, .dma-page-shop .woocommerce-pagination span { display: inline-block; padding: 8px 14px; border: 1px solid var(--dma-border); color: var(--dma-text-muted); text-decoration: none; } .dma-page-shop .woocommerce-pagination .current { color: var(--dma-heading); border-color: var(--dma-accent); } /* ==================== SINGLE PRODUCT (redesigned — compact/enterprise) ==================== */ .dma-breadcrumb-single { font-size: 12px; color: var(--dma-text-muted); margin-bottom: 24px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .dma-breadcrumb-single a { color: var(--dma-text-muted); text-decoration: none; } .dma-breadcrumb-single a:hover { color: var(--dma-heading); } .dma-breadcrumb-current { color: var(--dma-text); } .dma-page-single .dma-container { max-width: 1280px; } .dma-page-single .product { color: var(--dma-text); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 56px; } /* align-self: start keeps the photo box as tall as the photo, instead of stretching to the height of the buy box (that was the long empty area). */ /* Photo top-left, the "Will it fit?" card right under it, the buy box on the right spanning both rows. The second row takes up any extra height of the buy box, so no empty space opens under the photo. */ .dma-page-single .product { grid-template-rows: auto 1fr; } .dma-page-single .product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; align-self: start; } .dma-page-single .product > .dma-compat-checker-a3655c67 { grid-column: 1; grid-row: 2; align-self: start; margin-top: 14px; } .dma-page-single .product > .summary { grid-column: 2; grid-row: 1 / span 2; padding-top: 4px; } .dma-page-single .product > .woocommerce-tabs, .dma-page-single .product > .upsells.products, .dma-page-single .product > .related.products { grid-column: 1 / -1; } @media (max-width: 900px) { .dma-page-single .product { grid-template-columns: 1fr; grid-template-rows: none; } /* Phone/tablet: photo, then name/price/buy box, then the fit check */ .dma-page-single .product > .summary { grid-row: 2; } .dma-page-single .product > .dma-compat-checker-a3655c67 { grid-row: 3; margin-top: 18px; } } /* One option on sale (e.g. a card with its default firmware): no picker */ .dma-page-single .dma-single-option table.variations, .dma-page-single .dma-single-option .reset_variations, .dma-page-single .dma-single-option .woocommerce-variation-description { display: none !important; } /* "Ships with default firmware" note */ .dma-fw-default-note { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 16px; padding: 12px 14px; background: var(--dma-surface); border: 1px solid var(--dma-border); border-radius: var(--dma-radius-md, 10px); } .dma-fw-default-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--dma-accent-dim); color: var(--dma-accent); } .dma-fw-default-icon svg { width: 18px; height: 18px; } .dma-fw-default-note p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--dma-text-muted); } .dma-fw-default-note strong { color: var(--dma-heading); font-weight: 600; } .dma-fw-default-note a { color: var(--dma-accent); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } /* Room on the left for the floating thumbnail strip (desktop) */ @media (min-width: 701px) { .dma-page-single .woocommerce-product-gallery:has(.flex-control-thumbs) { padding-left: 86px; } } /* Gallery — image keeps its natural aspect ratio, capped so an oversized source photo can't blow the box up, but never force-stretched into a square (that's what made short/wide product shots look zoomed-in). */ .dma-page-single .woocommerce-product-gallery { background: var(--dma-surface); border: 1px solid var(--dma-border); border-radius: 12px; padding: 20px; width: 100% !important; } /* NOTE: deliberately not touching display/width on .woocommerce-product-gallery__wrapper or .woocommerce-product-gallery__image — WooCommerce's flexslider carousel sets its own inline widths/positioning on those to lay multiple images out as slides, and overriding them (as an earlier version of this file did) broke the slider: some slides collapsed to nothing and others rendered stacked on top of each other. Only the itself and the thumbnail strip are styled below. */ .dma-page-single .woocommerce-product-gallery img { border-radius: 8px; display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 420px !important; object-fit: contain; margin: 0 auto; } /* Thumbnails: a small strip floating over the top-left corner of the photo (only exists when a product has more than one photo). WooCommerce's own CSS makes each thumbnail 25% wide, which spread two photos across the whole width; !important keeps them small. White edge, red on hover and for the photo being shown. Phones: a row under the photo instead. */ .dma-page-single .woocommerce-product-gallery { position: relative; } .dma-page-single .woocommerce-product-gallery .flex-control-thumbs { position: absolute; top: 16px; left: 16px; z-index: 5; display: flex !important; flex-direction: column; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none; max-height: calc(100% - 32px); overflow-y: auto; scrollbar-width: none; } .dma-page-single .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; } .dma-page-single .woocommerce-product-gallery .flex-control-thumbs li { width: 54px !important; float: none !important; margin: 0 !important; flex: 0 0 auto; } .dma-page-single .woocommerce-product-gallery .flex-control-thumbs img { width: 54px !important; height: 54px !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: contain; padding: 4px; box-sizing: border-box; cursor: pointer; opacity: .7 !important; background: rgba(11, 12, 20, .72); border: 1px solid rgba(255, 255, 255, .45); border-radius: 8px !important; transition: border-color .15s ease, opacity .15s ease; } .dma-page-single .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .dma-page-single .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1 !important; border-color: var(--dma-accent); } [data-theme="light"] .dma-page-single .woocommerce-product-gallery .flex-control-thumbs img { background: rgba(255, 255, 255, .85); border-color: rgba(0, 0, 0, .25); } @media (max-width: 700px) { .dma-page-single .woocommerce-product-gallery .flex-control-thumbs { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 12px !important; max-height: none; } } /* The corner button opens the photo full screen (WooCommerce lightbox; handy on phones). Hover-zoom is switched off in functions.php; this hides a magnified copy in case a plugin turns it back on. */ .dma-page-single .woocommerce-product-gallery .zoomImg { display: none !important; } .dma-page-single .woocommerce-product-gallery { margin-bottom: 0 !important; } /* WooCommerce's own CSS makes the buy box 48% wide and floats it */ .dma-page-single .product > .summary { width: auto !important; float: none !important; margin: 0 !important; } .dma-page-single .woocommerce-product-gallery__trigger { position: absolute !important; top: 16px !important; right: 16px !important; left: auto !important; z-index: 6; width: 38px !important; height: 38px !important; border-radius: 10px !important; display: flex !important; align-items: center; justify-content: center; background: rgba(11, 12, 20, .72) !important; border: 1px solid rgba(255, 255, 255, .45); font-size: 0 !important; color: transparent !important; text-indent: -9999px; overflow: hidden; transition: border-color .15s ease; } .dma-page-single .woocommerce-product-gallery__trigger::before { content: '' !important; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: none !important; border-radius: 0 !important; transform: none !important; background: #fff; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .dma-page-single .woocommerce-product-gallery__trigger::after { content: none !important; display: none !important; } .dma-page-single .woocommerce-product-gallery__trigger img, .dma-page-single .woocommerce-product-gallery__trigger span { display: none !important; } .dma-page-single .woocommerce-product-gallery__trigger:hover, .dma-page-single .woocommerce-product-gallery__trigger:focus { background: rgba(11, 12, 20, .72) !important; border-color: var(--dma-accent); outline: none; } [data-theme="light"] .dma-page-single .woocommerce-product-gallery__trigger { background: rgba(255, 255, 255, .85) !important; border-color: rgba(0, 0, 0, .25); } [data-theme="light"] .dma-page-single .woocommerce-product-gallery__trigger::before { background: #14161c; } /* Full-screen photo view (PhotoSwipe): dark like the site */ .pswp__bg { background: #0b0c14 !important; } [data-theme="light"] .pswp__bg { background: #eef0f3 !important; } .dma-page-single span.onsale { background: var(--dma-accent) !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; } /* Title / price / short description */ .dma-page-single .product_title { color: var(--dma-heading); font-size: 26px; font-weight: 800; margin: 0 0 10px; line-height: 1.2; letter-spacing: -0.01em; } .dma-page-single .woocommerce-product-details__short-description { color: var(--dma-text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 8px; } .dma-page-single .woocommerce-product-details__short-description p { margin: 0 0 8px; } /* Price badge: white pill, red text, !important — WooCommerce's own core CSS (".woocommerce div.product p.price / span.price") sets a yellow-olive color with higher selector specificity (it targets the div.product wrapper WooCommerce puts around every single product) than a plain class selector here can win on its own. */ .dma-page-single .price { display: inline-flex !important; align-items: baseline; gap: 8px; background: transparent !important; color: var(--dma-heading) !important; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; padding: 0; margin-bottom: 14px; width: fit-content; } .dma-page-single p.price del { color: var(--dma-text-muted) !important; opacity: 1; font-weight: 500; font-size: 16px; margin-right: 4px; } .dma-page-single p.price ins { text-decoration: none; } .dma-page-single .stock { display: inline-block; margin: 10px 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 10px; border-radius: 4px; } .dma-page-single .stock.in-stock { color: #5fd97a; background: rgba(95, 217, 122, 0.08); } .dma-page-single .stock.out-of-stock { color: #ff6b6b; background: rgba(255, 107, 107, 0.08); } .dma-page-single .stock.low-stock { color: #f0a93b; background: rgba(240, 169, 59, 0.1); } /* Variation selectors */ .dma-page-single table.variations { width: 100%; border-collapse: collapse; margin: 18px 0 2px; } .dma-page-single table.variations tbody, .dma-page-single table.variations tr { display: block; width: 100%; } .dma-page-single table.variations tr { margin-bottom: 14px; } .dma-page-single table.variations th.label { display: block; text-align: left; padding: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dma-text-muted); font-weight: 600; } .dma-page-single table.variations td.value { display: block; padding: 0; } .dma-page-single table.variations select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; max-width: 320px; background-color: var(--dma-surface); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; color: var(--dma-heading); border: 1px solid var(--dma-border); border-radius: 6px; padding: 11px 36px 11px 14px; font-size: 14px; cursor: pointer; transition: border-color .2s; } .dma-page-single table.variations select:focus { border-color: var(--dma-accent); outline: none; } .dma-page-single table.variations select option { background: var(--dma-surface); color: var(--dma-heading); } .dma-page-single a.reset_variations { display: inline-block; margin: 4px 0 0; font-size: 11px; color: var(--dma-text-muted); text-decoration: underline; } .dma-page-single .woocommerce-variation-price { margin: 8px 0; } .dma-page-single .woocommerce-variation-description, .dma-page-single .woocommerce-variation-description p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--dma-text-muted); } .dma-page-single .woocommerce-variation-add-to-cart { margin-top: 4px; } .dma-page-single .woocommerce-variation-availability { margin: 4px 0; } /* Quantity + Add to Cart / Buy Now row — compact, aligned heights */ .dma-page-single form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; } .dma-page-single .quantity { display: inline-flex; margin: 0; } .dma-page-single .quantity .qty { width: 60px; height: 44px; text-align: center; background: var(--dma-surface); border: 1px solid var(--dma-border); border-radius: 6px; color: var(--dma-heading); font-size: 14px; padding: 0; -moz-appearance: textfield; } .dma-page-single .quantity .qty:focus { border-color: var(--dma-accent); outline: none; } .dma-page-single .cart .button, .dma-page-single .single_add_to_cart_button { height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--dma-accent) !important; color: #fff !important; border: none !important; padding: 0 24px !important; border-radius: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; cursor: pointer; transition: background .2s, box-shadow .2s; } .dma-page-single .cart .button:hover, .dma-page-single .single_add_to_cart_button:hover { background: #d94440 !important; box-shadow: 0 0 15px var(--dma-accent-glow); } /* Meta (SKU / categories / tags) */ .dma-page-single .product_meta { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--dma-border); font-size: 12px; color: var(--dma-text-muted); line-height: 1.9; } .dma-page-single .product_meta > span { display: block; } .dma-page-single .product_meta a { color: var(--dma-text-muted); text-decoration: none; } .dma-page-single .product_meta a:hover { color: var(--dma-heading); } /* Tabs — plain underline nav, no background fills, beats WooCommerce's own layout stylesheet (.woocommerce div.product .woocommerce-tabs ul.tabs li), which is more specific than a single-class override, hence the !important. */ .dma-page-single .woocommerce-tabs { margin-top: 52px; border-top: none; padding-top: 0; } .dma-page-single .woocommerce-tabs ul.tabs { display: flex !important; gap: 4px; list-style: none !important; margin: 0 !important; padding: 0 !important; border-bottom: none !important; background: none !important; } .dma-page-single .woocommerce-tabs ul.tabs li { margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; } .dma-page-single .woocommerce-tabs ul.tabs li a { display: inline-block !important; padding: 14px 20px !important; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dma-text-muted) !important; background: none !important; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .2s; } .dma-page-single .woocommerce-tabs ul.tabs li.active a, .dma-page-single .woocommerce-tabs ul.tabs li a:hover { color: var(--dma-heading) !important; border-bottom-color: var(--dma-accent); } .dma-page-single .woocommerce-tabs .woocommerce-Tabs-panel { background: none !important; border: none !important; padding: 28px 0 0; color: var(--dma-text); font-size: 14px; line-height: 1.7; } .dma-page-single .woocommerce-Tabs-panel > h2 { display: none; } .dma-page-single table.shop_attributes { width: 100%; border-collapse: collapse; border: none !important; } .dma-page-single table.shop_attributes tr:nth-child(even) { background: none !important; } .dma-page-single table.shop_attributes th { width: 220px; padding: 12px 0; border-bottom: 1px solid var(--dma-border); background: none !important; color: var(--dma-heading); font-weight: 600; text-transform: none; } .dma-page-single table.shop_attributes td { padding: 12px 0; border-bottom: 1px solid var(--dma-border); background: none !important; color: var(--dma-text-muted); } .dma-page-single table.shop_attributes td p { margin: 0; } /* Related products — reuse the shared card grid look. WooCommerce's own stylesheet puts a clearfix ::before/::after ("\" \"") on ul.products; under display:grid that pseudo-element becomes an actual (invisible) grid item and eats the first column, shoving every real product over by one slot and forcing the last one to wrap. Killing the pseudo-elements fixes the single-row layout. */ .dma-page-single .related.products { margin-top: 64px; } .dma-page-single .related.products > h2 { font-size: 20px; color: var(--dma-heading); font-weight: 800; margin-bottom: 22px; } .dma-page-single .related.products ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; list-style: none !important; margin: 0 !important; padding: 0 !important; } .dma-page-single .related.products ul.products::before, .dma-page-single .related.products ul.products::after, .dma-page-single .related.products ul.products li.product::before, .dma-page-single .related.products ul.products li.product::after { content: none !important; display: none !important; } .dma-page-single .related.products ul.products li.product { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; background: var(--dma-surface); border: 1px solid var(--dma-border); border-radius: 10px; padding: 18px; text-align: left; } .dma-page-single .related.products ul.products li.product img { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 180px !important; object-fit: contain; border-radius: 6px; margin: 0 auto 12px; } .dma-page-single .related.products ul.products li.product .woocommerce-loop-product__title { color: var(--dma-heading); font-size: 14px; font-weight: 600; margin: 0 0 6px; } .dma-page-single .related.products ul.products li.product .price { font-size: 14px; padding: 5px 12px; margin: 0; } .dma-page-single .related.products ul.products li.product .button { display: inline-block; margin-top: 12px; background: transparent !important; color: var(--dma-accent) !important; border: 1px solid var(--dma-accent) !important; border-radius: 6px; padding: 8px 16px !important; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; } .dma-page-single .related.products ul.products li.product .button:hover { background: var(--dma-accent) !important; color: #fff !important; } .dma-trust-badges-single { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; border-top: 1px solid var(--dma-border); padding-top: 32px; } .dma-trust-badge-single { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 16px; background: var(--dma-surface); border: 1px solid var(--dma-border); } .dma-trust-badge-single strong { color: var(--dma-heading); font-size: 13px; } .dma-trust-badge-single span { color: var(--dma-text-muted); font-size: 12px; } @media (max-width: 700px) { .dma-trust-badges-single { grid-template-columns: 1fr; } } /* Compact trust row directly under Add to Cart / Buy Now */ .dma-page-single .dma-trust-row-single { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 18px 0 8px; padding-top: 16px; border-top: 1px solid var(--dma-border); } .dma-page-single .dma-trust-row-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dma-text-muted); } .dma-page-single .dma-trust-row-item svg { color: var(--dma-accent); flex-shrink: 0; } /* Compatibility checker — product-page widget answering "will this fit my setup" (device) and "which firmware does this card support" (firmware). Only rendered for the four real CaptainDMA reader cards, see inc/compatibility-checker.php. */ .dma-page-single .dma-compat-checker-a3655c67 { margin: 22px 0 8px; padding: 20px; background: var(--dma-surface); border: 1px solid var(--dma-border); border-radius: 10px; } .dma-page-single .dma-compat-head-a3655c67 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .dma-page-single .dma-compat-head-a3655c67 svg { color: var(--dma-accent); flex-shrink: 0; } .dma-page-single .dma-compat-head-a3655c67 h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--dma-heading); } .dma-page-single .dma-compat-field-a3655c67 label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dma-text-muted); font-weight: 600; margin-bottom: 8px; } .dma-page-single .dma-compat-select-a3655c67 { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; max-width: 360px; background-color: var(--dma-bg); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; color: var(--dma-heading); border: 1px solid var(--dma-border); border-radius: 6px; padding: 11px 36px 11px 14px; font-size: 13px; cursor: pointer; transition: border-color .2s; } .dma-page-single .dma-compat-select-a3655c67:focus { border-color: var(--dma-accent); outline: none; } .dma-page-single .dma-compat-result-a3655c67 { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--dma-border); } .dma-page-single .dma-compat-result-a3655c67 p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--dma-text-muted); } .dma-page-single .dma-compat-result-a3655c67 p a { color: var(--dma-accent); text-decoration: underline; } .dma-page-single .dma-compat-badge-a3655c67 { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 5px 10px; border-radius: 4px; } .dma-page-single .dma-compat-badge--yes-a3655c67 { color: #5fd97a; background: rgba(95, 217, 122, 0.1); } .dma-page-single .dma-compat-badge--adapter-a3655c67 { color: #f0a93b; background: rgba(240, 169, 59, 0.1); } .dma-page-single .dma-compat-badge--info-a3655c67 { color: var(--dma-accent); background: var(--dma-accent-dim); } .dma-page-single .dma-compat-firmware-a3655c67 { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dma-border); } .dma-page-single .dma-compat-firmware-label-a3655c67 { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dma-text-muted); font-weight: 600; margin-bottom: 10px; } .dma-page-single .dma-compat-firmware-list-a3655c67 { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .dma-page-single .dma-compat-firmware-list-a3655c67 li { font-size: 12px; color: var(--dma-heading); background: var(--dma-bg); border: 1px solid var(--dma-border); border-radius: 4px; padding: 5px 10px; } .dma-page-single .dma-compat-firmware-note-a3655c67 { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--dma-text-muted); } .dma-page-single .dma-compat-firmware-note-a3655c67 a { color: var(--dma-accent); text-decoration: underline; } /* ======================================== LIGHT MODE — cart & checkout wrapper overrides .dma-page-c8a2b1f4 (cart) and .dma-page-checkout each hardcode their own local copy of the design tokens (see the two blocks near the top of this file), so the [data-theme="light"] :root override in tokens.css can't reach anything inside them on its own — same reasoning as the .dma-page-a3655c67 override at the bottom of home.css. ======================================== */ [data-theme="light"] .dma-page-c8a2b1f4 { --dma-bg: #eef0f3; --dma-surface: #ffffff; --dma-border: #e4e7ec; --dma-text: #3b3f4a; --dma-text-muted: #767c8a; --dma-accent: #d6403c; --dma-accent-dim: rgba(214, 64, 60, 0.08); --dma-accent-glow: rgba(214, 64, 60, 0.22); } [data-theme="light"] .dma-page-checkout { --dma-bg: #eef0f3; --dma-surface: #ffffff; --dma-surface-raised: #f6f7f9; --dma-border: #e1e4e9; --dma-text: #3b3f4a; --dma-text-muted: #7d8290; --dma-accent: #d6403c; --dma-accent-dim: rgba(214, 64, 60, 0.08); --dma-accent-glow: rgba(214, 64, 60, 0.22); } /* Single-product price pill (same white-pill-on-white-card issue as the product-grid price badge in home.css). */ [data-theme="light"] .dma-page-single .price { border: 1px solid var(--dma-border); } /* ==================== COUPON BOXES ==================== */ /* Basket: code field and both buttons the same height, the field wide enough to read (WooCommerce squeezed it to ~80px). */ .dma-woo-wrapper-c8a2b1f4 table.shop_table td.actions { padding: 16px !important; } .dma-woo-wrapper-c8a2b1f4 td.actions .coupon { display: flex; align-items: stretch; gap: 10px; float: left; } .dma-woo-wrapper-c8a2b1f4 td.actions .coupon label { display: none; } .dma-woo-wrapper-c8a2b1f4 td.actions .coupon .input-text, .dma-woo-wrapper-c8a2b1f4 td.actions .coupon #coupon_code { float: none !important; width: 220px !important; height: 44px !important; margin: 0 !important; box-sizing: border-box; padding: 0 14px !important; border-radius: 6px !important; font-size: 13px !important; } .dma-woo-wrapper-c8a2b1f4 td.actions .button { height: 44px !important; padding: 0 22px !important; line-height: 42px !important; margin: 0 !important; border-radius: 6px !important; box-sizing: border-box; white-space: nowrap; } .dma-woo-wrapper-c8a2b1f4 td.actions > .button { float: right; } .dma-woo-wrapper-c8a2b1f4 td.actions .button:disabled, .dma-woo-wrapper-c8a2b1f4 td.actions .button[disabled] { opacity: .45 !important; cursor: not-allowed; } @media (max-width: 700px) { .dma-woo-wrapper-c8a2b1f4 td.actions .coupon { float: none; width: 100%; margin-bottom: 10px; } .dma-woo-wrapper-c8a2b1f4 td.actions .coupon .input-text, .dma-woo-wrapper-c8a2b1f4 td.actions .coupon #coupon_code { flex: 1 1 auto; width: auto !important; min-width: 0; } .dma-woo-wrapper-c8a2b1f4 td.actions > .button { float: none; width: 100% !important; } } /* Checkout: coupon box lives in the "Your order" panel (inc/woo-helpers.php), so WooCommerce's "Have a coupon? Click here" bar is not needed. */ .woocommerce-checkout .woocommerce-form-coupon-toggle, .woocommerce-checkout form.checkout_coupon { display: none !important; } .dma-checkout-coupon { margin: 4px 0 20px; padding-top: 20px; border-top: 1px dashed var(--dma-hairline, var(--dma-border)); } .dma-checkout-coupon-label { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dma-text-muted); } .dma-checkout-coupon-row { display: flex; gap: 10px; } .dma-checkout-coupon-input { flex: 1 1 auto; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 6px; border: 1px solid var(--dma-border); background: var(--dma-bg); color: var(--dma-heading); font: inherit; font-size: 13px; outline: none; } .dma-checkout-coupon-input:focus { border-color: var(--dma-accent); } .dma-checkout-coupon-apply { flex: 0 0 auto; height: 44px; box-sizing: border-box; padding: 0 20px; border-radius: 6px; cursor: pointer; border: 1px solid var(--dma-accent); background: transparent; color: var(--dma-accent); font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; } .dma-checkout-coupon-apply:hover, .dma-checkout-coupon-apply:focus-visible { background: var(--dma-accent); color: #fff; box-shadow: 0 0 15px var(--dma-accent-glow); } .dma-checkout-coupon.is-busy .dma-checkout-coupon-apply { opacity: .6; cursor: progress; } .dma-checkout-coupon-msg { margin: 8px 0 0 !important; font-size: 12px; line-height: 1.45; color: var(--dma-text); } .dma-checkout-coupon-msg.is-error { color: #ff8f8f; } [data-theme="light"] .dma-checkout-coupon-msg.is-error { color: #c62f2f; } .dma-checkout-coupon-hint { margin: 8px 0 0 !important; font-size: 11px; line-height: 1.45; color: var(--dma-text-muted); } /* ==================== FIRMWARE: Discord gate, two-step payment, ticket ==================== */ /* Discord gate above the checkout form (inc/discord-bridge.php) */ .dma-fw-gate { display: flex; align-items: center; gap: 18px; margin: 0 0 32px; padding: 18px 20px; background: var(--dma-surface); border: 1px solid var(--dma-border); border-left: 3px solid #5865F2; border-radius: 10px; } .dma-fw-gate-icon, .dma-fw-ticket-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background-color: rgba(88, 101, 242, .14); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } .dma-fw-gate-body, .dma-fw-ticket-body { flex: 1 1 auto; min-width: 0; } .dma-fw-gate-title, .dma-fw-ticket-title { margin: 0 0 4px !important; color: var(--dma-heading); font-size: 15px; font-weight: 700; } .dma-fw-gate-text, .dma-fw-ticket-text { margin: 0 !important; color: var(--dma-text-muted); font-size: 13px; line-height: 1.55; } .dma-fw-gate-btn, .dma-fw-ticket-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 6px; background: #5865F2; color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: background .2s, box-shadow .2s; } .dma-fw-gate-btn:hover, .dma-fw-ticket-btn:hover { background: #4752c4; box-shadow: 0 0 15px rgba(88, 101, 242, .35); } /* "Your order has firmware" note in the order panel (inc/firmware-checkout.php) */ .dma-fw-steps { margin: 4px 0 20px; padding: 16px; background: var(--dma-bg); border: 1px solid var(--dma-border); border-radius: 8px; } .dma-fw-steps p { margin: 0 !important; } .dma-fw-steps-title { color: var(--dma-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .dma-fw-steps-text { margin-top: 6px !important; color: var(--dma-text-muted); font-size: 13px; line-height: 1.55; } .dma-fw-steps-list { list-style: none; margin: 12px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; } .dma-fw-steps-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 !important; padding: 10px 12px; border-radius: 6px; background: var(--dma-surface); border: 1px solid var(--dma-border); color: var(--dma-heading); font-size: 13px; font-weight: 600; } .dma-fw-steps-list li small { display: block; margin-top: 2px; color: var(--dma-text-muted); font-size: 11px; font-weight: 500; } .dma-fw-steps-list li strong { color: var(--dma-heading); font-size: 14px; white-space: nowrap; } .dma-fw-steps-foot { margin-top: 10px !important; color: var(--dma-text-muted); font-size: 12px; line-height: 1.5; } /* Step 2 card on the thank-you page / order view */ .dma-fw-step2 { position: relative; margin: 0 0 32px; padding: 24px; text-align: left; background: var(--dma-surface); border: 1px solid var(--dma-border); border-top: 3px solid var(--dma-accent); border-radius: 10px; } .dma-fw-step2-badge { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: var(--dma-accent-dim); color: var(--dma-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .dma-fw-step2-title { margin: 0 0 8px !important; color: var(--dma-heading); font-size: 22px; font-weight: 800; letter-spacing: -.01em; } .dma-fw-step2-text { margin: 0 0 18px !important; color: var(--dma-text); font-size: 14px; line-height: 1.6; } .dma-fw-step2-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border-radius: 6px; background: var(--dma-accent); color: #fff !important; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; text-decoration: none !important; box-shadow: 0 4px 15px var(--dma-accent-dim); transition: box-shadow .2s, transform .2s; } .dma-fw-step2-btn:hover { box-shadow: 0 0 25px var(--dma-accent-glow); transform: translateY(-1px); } .dma-fw-step2-note { margin: 14px 0 0 !important; color: var(--dma-text-muted); font-size: 12px; line-height: 1.5; } /* Firmware ticket card (thank-you page, order view) */ .dma-fw-ticket { display: flex; align-items: center; gap: 18px; margin: 0 0 32px; padding: 20px; background: var(--dma-surface); border: 1px solid var(--dma-border); border-left: 3px solid #5865F2; border-radius: 10px; } .dma-fw-linked { margin: 0 0 16px !important; color: var(--dma-text-muted); font-size: 13px; } @media (max-width: 600px) { .dma-fw-gate, .dma-fw-ticket { flex-direction: column; align-items: flex-start; } .dma-fw-gate-btn, .dma-fw-ticket-btn, .dma-fw-step2-btn { width: 100%; } } /* ==================== VOUCH BOX (inc/vouch-reminders.php) ==================== */ .dma-vouch-box { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; padding: 18px 20px; border: 1px solid rgba(241, 196, 15, .45); border-radius: 12px; background: rgba(241, 196, 15, .07); } .dma-vouch-box.is-soft { border-color: var(--dma-border); background: var(--dma-surface); margin-top: 24px; } .dma-vouch-icon { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(241, 196, 15, .15); font-size: 18px; } .dma-vouch-body { flex: 1 1 auto; min-width: 0; } .dma-vouch-title { margin: 0 0 4px !important; color: var(--dma-heading); font-size: 15px; font-weight: 700; } .dma-vouch-text { margin: 0 !important; color: var(--dma-text-muted); font-size: 13px; line-height: 1.55; } .dma-vouch-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 8px; background: #5865F2; color: #ffffff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: background .15s ease; } .dma-vouch-btn:hover { background: #4752c4; } @media (max-width: 700px) { .dma-vouch-box { flex-direction: column; align-items: flex-start; } .dma-vouch-btn { width: 100%; } } /* ==================== EMPTY BASKET ==================== */ /* Cart page: a quiet secondary button next to "Update basket". */ .dma-woo-wrapper-c8a2b1f4 td.actions > .button.dma-empty-cart-btn { margin-right: 10px !important; background: transparent !important; color: var(--dma-text) !important; border: 1px solid var(--dma-border-hover) !important; box-shadow: none !important; } .dma-woo-wrapper-c8a2b1f4 td.actions > .button.dma-empty-cart-btn:hover, .dma-woo-wrapper-c8a2b1f4 td.actions > .button.dma-empty-cart-btn.is-confirming { color: var(--dma-accent) !important; border-color: var(--dma-accent) !important; background: var(--dma-accent-dim) !important; } /* Same size in both states, words centred ("Empty cart" → "Click again") */ .dma-woo-wrapper-c8a2b1f4 td.actions > .button.dma-empty-cart-btn { text-align: center; white-space: nowrap; overflow: hidden; } .dma-woo-wrapper-c8a2b1f4 td.actions > .button.dma-empty-cart-btn.is-confirming { padding-left: 8px !important; padding-right: 8px !important; } @media (max-width: 700px) { .dma-woo-wrapper-c8a2b1f4 td.actions > .button.dma-empty-cart-btn { margin: 10px 0 0 !important; width: 100% !important; } /* The cart table was wider than the phone screen (cut off on the right): let it take the screen width and the coupon row shrink to fit. */ .dma-woo-wrapper-c8a2b1f4 .woocommerce-cart-form { min-width: 0; max-width: 100%; } .dma-woo-wrapper-c8a2b1f4 table.shop_table.cart { table-layout: fixed; max-width: 100%; } .dma-woo-wrapper-c8a2b1f4 table.shop_table.cart td { min-width: 0; overflow-wrap: anywhere; } .dma-woo-wrapper-c8a2b1f4 td.actions .coupon .button { flex: 0 0 auto; } } /* Checkout: small links under the order summary. */ .dma-checkout-basket-links { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 10px 0 16px !important; font-size: 12px; } .dma-checkout-basket-links a { color: var(--dma-text-muted) !important; text-decoration: underline; text-underline-offset: 3px; } .dma-checkout-basket-links a:hover, .dma-checkout-basket-links a.is-confirming { color: var(--dma-accent) !important; } .dma-checkout-basket-links span { color: var(--dma-text-muted); } /* ==================== PRODUCT OPTIONS UNDER ITEM NAMES ==================== */ /* "Cyber-FW: Cyber-TestFW" etc. in the cart, checkout, cart preview and orders: one tidy line per option (WooCommerce's floats broke the layout). */ .woocommerce dl.variation, .dma-mini-cart dl.variation { display: grid; grid-template-columns: max-content 1fr; column-gap: 6px; row-gap: 2px; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; font-size: 12px; line-height: 1.5; color: var(--dma-text-muted); font-weight: 500; text-transform: none; letter-spacing: normal; } .woocommerce dl.variation dt, .woocommerce dl.variation dd, .dma-mini-cart dl.variation dt, .dma-mini-cart dl.variation dd { float: none !important; clear: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce dl.variation dt, .dma-mini-cart dl.variation dt { font-weight: 600; color: var(--dma-text-muted); } .woocommerce dl.variation dd, .dma-mini-cart dl.variation dd { color: var(--dma-text); } .woocommerce dl.variation dd p, .dma-mini-cart dl.variation dd p { display: inline; margin: 0 !important; font-size: inherit; line-height: inherit; } .woocommerce ul.wc-item-meta { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; line-height: 1.5; color: var(--dma-text-muted); } .woocommerce ul.wc-item-meta li { margin: 0; } .woocommerce ul.wc-item-meta li p { display: inline; margin: 0; } .woocommerce ul.wc-item-meta .wc-item-meta-label { font-weight: 600; float: none; margin-right: 4px; } /* Product page: an option with only one choice is shown as text, not a dropdown */ .dma-page-single table.variations select.dma-variation-single { display: none !important; } .dma-variation-fixed { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--dma-border); border-radius: 6px; background: var(--dma-surface); color: var(--dma-heading); font-size: 14px; font-weight: 600; } .dma-page-single table.variations .reset_variations { display: none !important; } /* ==================== CART TOTALS & NOTICES ==================== */ /* Cart totals: labels left, every amount right (shipping lines included), the same as the checkout summary. */ .dma-woo-wrapper-c8a2b1f4 .cart_totals tr th { text-align: left !important; width: 40%; vertical-align: top; } .dma-woo-wrapper-c8a2b1f4 .cart_totals tr td { text-align: right !important; vertical-align: top; } .dma-woo-wrapper-c8a2b1f4 .cart_totals ul#shipping_method { margin: 0 !important; padding: 0 !important; list-style: none; text-align: right; } .dma-woo-wrapper-c8a2b1f4 .cart_totals ul#shipping_method li { margin: 0 0 4px !important; padding: 0 !important; text-indent: 0 !important; } .dma-woo-wrapper-c8a2b1f4 .cart_totals .woocommerce-shipping-destination, .dma-woo-wrapper-c8a2b1f4 .cart_totals .woocommerce-shipping-calculator { margin: 6px 0 0 !important; font-size: 12px; line-height: 1.5; color: var(--dma-text-muted); text-align: right; } .dma-woo-wrapper-c8a2b1f4 .cart_totals .shipping-calculator-button { font-size: 12px; color: var(--dma-text-muted) !important; text-decoration: underline; } .dma-woo-wrapper-c8a2b1f4 .cart_totals .shipping-calculator-button::after { display: none; } .dma-woo-wrapper-c8a2b1f4 .cart_totals .shipping-calculator-form { text-align: left; } /* "… has been added to your cart [View cart]": text first, button on the right */ .woocommerce-notices-wrapper .woocommerce-message { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; } .woocommerce-notices-wrapper .woocommerce-message .button { order: 2; margin-left: auto !important; float: none !important; } .woocommerce-notices-wrapper .woocommerce-message:focus, .woocommerce-notices-wrapper .woocommerce-error:focus, .woocommerce-notices-wrapper .woocommerce-info:focus { outline: none; } /* Checkout on phones: WooCommerce's hidden country/state dropdowns stuck out past the screen edge and made the page scroll sideways. */ .woocommerce form .form-row { position: relative; } .woocommerce form .form-row select.select2-hidden-accessible { left: 0 !important; top: 0 !important; } @media (max-width: 380px) { .dma-woo-wrapper-c8a2b1f4 td.actions .coupon { flex-wrap: wrap; } .dma-woo-wrapper-c8a2b1f4 td.actions .coupon .input-text, .dma-woo-wrapper-c8a2b1f4 td.actions .coupon #coupon_code, .dma-woo-wrapper-c8a2b1f4 td.actions .coupon .button { flex: 1 1 100% !important; width: 100% !important; } } /* Structured product copy (0.30.0) — written by inc/product-copy.php */ .dma-copy { max-width: 820px; } .dma-copy > p:first-child { font-size: 15px; color: var(--dma-text); } .dma-copy h3 { color: var(--dma-heading); font-size: 15px; font-weight: 700; letter-spacing: .01em; margin: 28px 0 10px; } .dma-copy p { margin: 0 0 14px; } .dma-copy a { color: var(--dma-accent); } .dma-copy ul { list-style: none; margin: 0 0 6px; padding: 0; } .dma-copy ul li { position: relative; padding: 6px 0 6px 22px; color: var(--dma-text); } .dma-copy ul li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--dma-accent); } .dma-copy dl.dma-specs { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; margin: 0 0 6px; border-top: 1px solid var(--dma-border); } .dma-copy dl.dma-specs dt, .dma-copy dl.dma-specs dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--dma-border); } .dma-copy dl.dma-specs dt { color: var(--dma-heading); font-weight: 600; padding-right: 14px; } .dma-copy dl.dma-specs dd { color: var(--dma-text-muted); } .dma-copy .dma-copy-notice { margin-top: 24px; padding: 12px 14px; border-left: 3px solid var(--dma-accent); background: var(--dma-surface); color: var(--dma-text-muted); font-size: 12.5px; line-height: 1.6; } @media (max-width: 560px) { .dma-copy dl.dma-specs { grid-template-columns: 1fr; } .dma-copy dl.dma-specs dt { border-bottom: none; padding-bottom: 0; } } /* Shop / category intro under the H1 */ .dma-shop-intro-a3655c67 { max-width: 760px; margin: 10px auto 0; color: var(--dma-text-muted); font-size: 14.5px; line-height: 1.7; text-align: center; } /* WooCommerce's default tab corner notches (li::before/::after) showed as small marks on the tab line; the line itself is drawn here instead. */ .dma-page-single .woocommerce-tabs ul.tabs::before, .dma-page-single .woocommerce-tabs ul.tabs li::before, .dma-page-single .woocommerce-tabs ul.tabs li::after { display: none !important; } .dma-page-single .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--dma-border) !important; } @media (max-width: 520px) { .dma-page-single .woocommerce-tabs ul.tabs li a { padding: 12px 12px !important; font-size: 11px; } /* "Will it fit?" head: requirement badge on its own line under the title */ .dma-fit-drop-head { flex-wrap: wrap; row-gap: 6px; } .dma-fit-drop-title { flex: 1 1 auto; } .dma-fit-drop .dma-fit-req { order: 3; margin-left: 40px; flex-basis: auto; } .dma-fit-drop-chev { order: 2; } } /* Sale badge on the product page: a small pill inside the photo box, top left, clear of the edge (and right of the thumbnail strip when there is one). Text from cyberammo_sale_flash(): "Save 15%" or "Sale". */ .dma-page-single .product { position: relative; } .dma-page-single .product > span.onsale, .dma-page-single .woocommerce-product-gallery span.onsale { position: absolute !important; top: 16px !important; left: 16px !important; right: auto !important; z-index: 6; min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 11px 6px 10px !important; line-height: 1 !important; background: var(--dma-accent) !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .01em !important; } .dma-page-single .product > span.onsale::before, .dma-page-single .woocommerce-product-gallery span.onsale::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; } .dma-page-single .product:has(.flex-control-thumbs) > span.onsale { left: 92px !important; } @media (max-width: 900px) { .dma-page-single .product:has(.flex-control-thumbs) > span.onsale { left: 16px !important; } } /* Full-screen photo button (0.40.19): fixed 40px box with a visible edge and a 20px icon centred in it, the same at every screen size. */ .dma-page-single .woocommerce-product-gallery__trigger { width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; padding: 0 !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 10px !important; background: rgba(11, 12, 20, .78) !important; line-height: 0 !important; text-indent: 0 !important; } .dma-page-single .woocommerce-product-gallery__trigger::before { width: 20px !important; height: 20px !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; inset: auto !important; margin: 0 !important; transform: translate(-50%, -50%) !important; position: absolute !important; top: 50% !important; left: 50% !important; -webkit-mask-size: 20px 20px !important; mask-size: 20px 20px !important; } .dma-page-single .woocommerce-product-gallery__trigger:hover, .dma-page-single .woocommerce-product-gallery__trigger:focus-visible { border-color: var(--dma-accent) !important; } [data-theme="light"] .dma-page-single .woocommerce-product-gallery__trigger { border-color: rgba(0, 0, 0, .18) !important; } /* ----------------------------------------- PAYMENT RESULT PAGE (order received) + crypto payment window panel ----------------------------------------- */ .dma-result { max-width: 720px; margin: 10px auto 34px; padding: 34px 30px 28px; text-align: center; background: var(--dma-surface); border: 1px solid var(--dma-border); border-radius: var(--dma-radius-md, 14px); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); } .dma-result-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; } .dma-result--ok .dma-result-icon { background: #1f9d55; box-shadow: 0 0 0 8px rgba(31, 157, 85, .15), 0 0 30px rgba(31, 157, 85, .35); } .dma-result--bad .dma-result-icon { background: var(--dma-accent); box-shadow: 0 0 0 8px var(--dma-accent-dim), 0 0 30px var(--dma-accent-glow); } .dma-result--wait .dma-result-icon { background: transparent; box-shadow: 0 0 0 8px rgba(255, 255, 255, .04); } .dma-result-spin, .dma-paywin-spinner { display: block; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--dma-border); border-top-color: var(--dma-accent); animation: dma-spin .85s linear infinite; } @keyframes dma-spin { to { transform: rotate(360deg); } } .dma-result-title { margin: 0 0 8px; font-size: 26px; color: var(--dma-heading); } .dma-result-lead { margin: 0 auto 22px; max-width: 520px; color: var(--dma-text-muted); line-height: 1.6; } .dma-result-facts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .dma-result-facts li { padding: 12px 14px; border: 1px solid var(--dma-border); border-radius: var(--dma-radius-sm, 8px); background: rgba(255, 255, 255, .02); text-align: left; } .dma-result-facts span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dma-text-muted); margin-bottom: 4px; } .dma-result-facts strong { color: var(--dma-heading); font-size: 15px; } .dma-result-next { text-align: left; margin: 0 0 24px; padding: 16px 18px; border-radius: var(--dma-radius-sm, 8px); background: rgba(255, 255, 255, .03); border: 1px solid var(--dma-border); } .dma-result-next h3 { margin: 0 0 8px; font-size: 15px; color: var(--dma-heading); } .dma-result-next ol { margin: 0; padding-left: 20px; color: var(--dma-text); line-height: 1.6; font-size: 14px; } .dma-result-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .dma-result-help { margin: 18px 0 0; font-size: 13px; color: var(--dma-text-muted); } .dma-result-help a { color: var(--dma-accent); font-weight: 600; } @media (max-width: 560px) { .dma-result { padding: 26px 18px 22px; } .dma-result-title { font-size: 22px; } .dma-result-actions .dma-button { width: 100%; } } .dma-paywin { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 6, 9, .72); backdrop-filter: blur(4px); } .dma-paywin[hidden] { display: none; } .dma-paywin-card { width: 100%; max-width: 460px; padding: 30px 26px 24px; text-align: center; background: var(--dma-surface); border: 1px solid var(--dma-border); border-radius: var(--dma-radius-md, 14px); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } .dma-paywin-spinner { margin: 0 auto 16px; } .dma-paywin.is-closed .dma-paywin-spinner { animation: none; border-top-color: var(--dma-border); } .dma-paywin-title { margin: 0 0 10px; font-size: 19px; color: var(--dma-heading); } .dma-paywin-text { margin: 0 0 20px; color: var(--dma-text-muted); line-height: 1.6; font-size: 14px; } .dma-paywin-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .dma-paywin-foot { margin: 16px 0 0; font-size: 12px; color: var(--dma-text-muted); } html.dma-paywin-on { overflow: hidden; } /* ----------------------------------------- PAY FOR ORDER (order-pay page): summary left, payment right ----------------------------------------- */ .dma-woo-checkout-wrapper #order_review.dma-pay-order { background: transparent; border: 0; padding: 0; box-shadow: none; position: static; } .dma-pay-order-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; } @media (max-width: 900px) { .dma-pay-order-grid { grid-template-columns: 1fr; gap: 20px; } } .dma-pay-card { background: var(--dma-surface); border: 1px solid var(--dma-border); border-radius: var(--dma-radius-md, 12px); padding: 26px 26px 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); } .dma-pay-methods { position: sticky; top: 100px; } @media (max-width: 900px) { .dma-pay-methods { position: static; } } .dma-pay-card-title { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--dma-border); color: var(--dma-heading); font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .dma-pay-items { list-style: none; margin: 0 0 6px; padding: 0; } .dma-pay-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--dma-hairline, var(--dma-border)); } .dma-pay-item-name { color: var(--dma-heading); font-weight: 600; font-size: 15px; line-height: 1.45; } .dma-pay-item-qty { margin-left: 6px; color: var(--dma-text-muted); font-weight: 500; font-size: 13px; white-space: nowrap; } .dma-pay-item-name .wc-item-meta { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; font-weight: 400; color: var(--dma-text-muted); } .dma-pay-item-name .wc-item-meta li, .dma-pay-item-name .wc-item-meta p { display: inline; margin: 0; } .dma-pay-item-total { color: var(--dma-heading); font-weight: 700; font-size: 15px; white-space: nowrap; } .dma-pay-totals { margin: 0; padding: 0; } .dma-pay-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--dma-hairline, var(--dma-border)); } .dma-pay-total dt { margin: 0; color: var(--dma-text-muted); font-size: 13px; } .dma-pay-total dd { margin: 0; color: var(--dma-text); font-size: 14px; font-weight: 600; text-align: right; } .dma-pay-total dd small, .dma-pay-total dd .shipped_via { color: var(--dma-text-muted); font-weight: 400; font-size: 12px; } .dma-pay-total--order_total { border-bottom: 0; padding-top: 16px; } .dma-pay-total--order_total dt { color: var(--dma-heading); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; } .dma-pay-total--order_total dd { color: var(--dma-accent); font-size: 22px; font-weight: 800; } .dma-pay-methods #payment ul.payment_methods { border-top: 0; padding-top: 0; margin-bottom: 18px; } .dma-pay-methods #payment .form-row { margin: 0; padding: 0; } /* PayPal's button never wider than the card, no white edge beside it */ #payment .wc-ppcp-checkout-container { background: transparent; max-width: 100%; } .dma-pay-methods #payment { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } .dma-pay-methods #payment ul.payment_methods { border-bottom: 1px solid var(--dma-hairline, var(--dma-border)) !important; padding-bottom: 6px !important; } .dma-pay-methods .woocommerce-terms-and-conditions-wrapper { margin: 0 0 14px; } .dma-pay-methods .woocommerce-terms-and-conditions-wrapper:empty, .dma-pay-methods .woocommerce-privacy-policy-text:empty { display: none; }