/* * VSracing Theme — Critical Overrides * Loaded last with no-cache versioning — always wins * Consolidates all fixes in one place */ /* ── GLOBAL SVG SIZE CAPS ────────────────────────────────── */ svg { overflow: hidden; } svg:not([fill]) { fill: none; } svg:not([width]):not([height]) { width: 20px !important; height: 20px !important; max-width: 20px !important; } .trust-feat-icon svg { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; } .why-card-icon svg { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; } .nav-icon-btn svg, .social-btn svg, .cart-trust-badge svg { width: 16px !important; height: 16px !important; max-width: 16px !important; } .btn svg { width: 14px !important; height: 14px !important; max-width: 14px !important; } /* ── SEARCH BAR — centered ───────────────────────────────── */ #site-search-bar { display: flex !important; justify-content: center !important; align-items: center !important; background: #e02020 !important; padding: 0.7rem 1rem !important; } #site-search-bar form, #site-search-bar .search-wrap { max-width: 660px !important; width: 100% !important; display: flex !important; margin: 0 auto !important; } .shop-hero-search, .shop-hero-search-wrap { display: none !important; } /* ── HERO ────────────────────────────────────────────────── */ #hero { min-height: 55vh !important; max-height: 650px !important; overflow: hidden !important; } #hero .hero-bg-deco { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } /* ── TRUST CARDS ─────────────────────────────────────────── */ #trust-cards-section { padding: 2rem !important; } .trust-cards-grid { display: grid !important; grid-template-columns: 1fr 1fr 1.5fr !important; gap: 1.5rem !important; max-width: 1200px; margin: 0 auto; } @media(max-width:900px){ .trust-cards-grid { grid-template-columns: 1fr 1fr !important; } .trust-feat-card--highlight { grid-column: 1/-1; } } @media(max-width:600px){ .trust-cards-grid { grid-template-columns: 1fr !important; } } /* ── WHY CHOOSE US ───────────────────────────────────────── */ #why-choose-us { padding: 2.5rem 2rem !important; } .why-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4rem; align-items: center; max-width:1200px; margin:0 auto; } .why-right { display: flex !important; flex-direction: column !important; gap: 12px !important; } @media(max-width:860px){ .why-inner { grid-template-columns: 1fr !important; gap: 2rem; } } /* ── FEATURED/SALE PRODUCTS — 4 col ─────────────────────── */ #featured-products { padding: 2.5rem 2rem !important; } .products-grid--4col { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 1px !important; background: var(--border) !important; border-radius: var(--radius-md) !important; overflow: hidden !important; } .products-grid--4col .product-card { padding: 8px !important; gap: 6px !important; } .products-grid--4col .product-thumb { height: 160px !important; aspect-ratio: unset !important; } .products-grid--4col .product-thumb img { height: 100% !important; width: 100% !important; object-fit: cover !important; } .products-grid--4col .prod-title { font-size: 12px !important; line-height: 1.3 !important; } .products-grid--4col .prod-price { font-size: 18px !important; } .products-grid--4col .prod-brand { font-size: 9px !important; } .products-grid--4col .prod-add-btn { width: 28px !important; height: 28px !important; opacity: 1 !important; transform: translateY(0) !important; } @media(max-width:1100px){ .products-grid--4col { grid-template-columns: repeat(3,1fr) !important; } } @media(max-width:760px) { .products-grid--4col { grid-template-columns: repeat(2,1fr) !important; } } /* ── SHOP PRODUCT GRID ───────────────────────────────────── */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 1px !important; background: var(--border) !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .woocommerce ul.products li.product { background: var(--bg2) !important; margin: 0 !important; padding: 10px 10px 14px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; transition: background .18s !important; } .woocommerce ul.products li.product:hover { background: var(--bg3) !important; } .woocommerce ul.products li.product img { width: 100% !important; height: 180px !important; max-height: 180px !important; object-fit: cover !important; border-radius: 4px !important; margin: 0 !important; display: block !important; background: #fff !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 12px !important; font-weight: 500 !important; color: #fff !important; line-height: 1.3 !important; padding: 0 !important; margin: 2px 0 0 !important; } .woocommerce ul.products li.product .price { font-family: var(--font-head) !important; font-size: 18px !important; color: #fff !important; margin: 2px 0 0 !important; } .woocommerce ul.products li.product .price del { font-size: 12px !important; color: var(--muted) !important; font-family: var(--font-body) !important; } .woocommerce ul.products li.product .price ins { text-decoration: none !important; color: var(--red) !important; } .woocommerce ul.products li.product .button { background: var(--red) !important; color: #fff !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 6px 14px !important; border-radius: 4px !important; border: none !important; cursor: pointer !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; display: block !important; text-decoration: none !important; margin-top: auto !important; transition: background .18s !important; } .woocommerce ul.products li.product .button:hover { background: var(--red-dim) !important; } .woocommerce ul.products li.product .onsale { background: var(--red) !important; color: #fff !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 3px 7px !important; border-radius: 2px !important; position: absolute !important; top: 18px !important; left: 18px !important; z-index: 2 !important; min-height: auto !important; min-width: auto !important; line-height: 1.4 !important; } /* Kill blue overlays */ .woocommerce ul.products li.product *, .woocommerce ul.products li.product a { background-color: transparent !important; } .woocommerce ul.products li.product img { background: #fff !important; } @media(max-width:1100px){ .woocommerce ul.products { grid-template-columns: repeat(3,1fr) !important; } } @media(max-width:760px) { .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; } } /* ── SIDEBAR — hide search widget ───────────────────────── */ .shop-sidebar .widget_search, .shop-sidebar .widget_product_search, .shop-sidebar form[role="search"], .shop-sidebar .wp-block-search { display: none !important; } /* ── SINGLE PRODUCT ──────────────────────────────────────── */ .woocommerce div.product { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 3rem !important; padding: 3rem 2rem !important; max-width: 1200px !important; margin: 0 auto !important; align-items: start !important; } .woocommerce div.product div.images { grid-column: 1 !important; } .woocommerce div.product div.summary { grid-column: 2 !important; } .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .up-sells, .woocommerce div.product .related { grid-column: 1/-1 !important; } .woocommerce div.product .product_title { font-family: var(--font-head) !important; font-size: clamp(24px,3vw,40px) !important; color: #fff !important; line-height: 1.05 !important; margin-bottom: 1rem !important; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--font-head) !important; font-size: 32px !important; color: #fff !important; display: block !important; margin-bottom: 1.5rem !important; } .woocommerce div.product p.price del { font-size: 18px !important; color: var(--muted) !important; font-family: var(--font-body) !important; } .woocommerce div.product p.price ins { text-decoration: none !important; color: var(--red) !important; } .woocommerce div.product .woocommerce-product-details__short-description { font-size: 14px !important; color: var(--muted2) !important; line-height: 1.75 !important; margin-bottom: 1.5rem !important; } /* Sale badge — small pill not giant box */ .woocommerce div.product span.onsale { position: absolute !important; top: 12px !important; left: 12px !important; width: auto !important; height: auto !important; min-width: auto !important; min-height: auto !important; border-radius: 3px !important; background: var(--red) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; padding: 4px 10px !important; line-height: 1.4 !important; z-index: 10 !important; display: inline-block !important; font-family: var(--font-body) !important; } /* Product images */ .woocommerce div.product div.images img { width: 100% !important; height: auto !important; max-height: 500px !important; object-fit: contain !important; background: var(--bg3) !important; border-radius: var(--radius-md) !important; } /* Gallery thumbs */ .woocommerce div.product .flex-control-thumbs { display: flex !important; gap: 8px !important; margin-top: 10px !important; padding: 0 !important; list-style: none !important; flex-wrap: wrap !important; } .woocommerce div.product .flex-control-thumbs img { width: 70px !important; height: 70px !important; max-height: 70px !important; object-fit: cover !important; border-radius: var(--radius) !important; border: 2px solid var(--border) !important; cursor: pointer !important; opacity: .7 !important; } .woocommerce div.product .flex-control-thumbs img.flex-active, .woocommerce div.product .flex-control-thumbs img:hover { opacity: 1 !important; border-color: var(--red) !important; } /* Variation selects */ .woocommerce div.product form.cart .variations { width: 100% !important; margin-bottom: 1.5rem !important; border-collapse: separate !important; border-spacing: 0 10px !important; } .woocommerce div.product form.cart .variations th.label label { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--muted) !important; } .woocommerce div.product form.cart .variations select { background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: #fff !important; border-radius: var(--radius) !important; padding: 10px 36px 10px 14px !important; font-size: 14px !important; font-family: var(--font-body) !important; height: 44px !important; width: 100% !important; min-width: 200px !important; outline: none !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; } .woocommerce div.product form.cart .variations select:focus { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(224,32,32,.1) !important; } .woocommerce div.product .reset_variations { font-size: 11px !important; color: var(--muted) !important; text-decoration: none !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .woocommerce div.product .woocommerce-variation-price .price { font-family: var(--font-head) !important; font-size: 36px !important; color: #fff !important; display: block !important; margin-bottom: 1rem !important; } .woocommerce div.product .woocommerce-variation-description p { font-size: 13px !important; color: var(--muted) !important; padding: 10px 14px !important; background: var(--bg3) !important; border-radius: var(--radius) !important; border-left: 3px solid var(--red) !important; } .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 1rem !important; } .woocommerce div.product form.cart input.qty { background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: #fff !important; border-radius: var(--radius) !important; height: 48px !important; width: 70px !important; text-align: center !important; font-size: 16px !important; outline: none !important; } .woocommerce div.product form.cart input.qty:focus { border-color: var(--red) !important; } .woocommerce div.product form.cart .single_add_to_cart_button { background: var(--red) !important; color: #fff !important; border: none !important; border-radius: var(--radius) !important; height: 48px !important; padding: 0 32px !important; font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; cursor: pointer !important; flex: 1 !important; box-shadow: 0 4px 16px rgba(224,32,32,.3) !important; transition: background .18s !important; } .woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--red-dim) !important; } .woocommerce div.product form.cart .single_add_to_cart_button.disabled { opacity: .45 !important; cursor: not-allowed !important; box-shadow: none !important; } .woocommerce div.product .product_meta { font-size: 12px !important; color: var(--muted) !important; margin-top: 1.5rem !important; padding-top: 1.5rem !important; border-top: 1px solid var(--border) !important; } .woocommerce div.product .product_meta a { color: var(--red) !important; } @media(max-width:768px){ .woocommerce div.product { grid-template-columns: 1fr !important; gap: 1.5rem !important; padding: 1.5rem 1rem !important; } .woocommerce div.product div.images, .woocommerce div.product div.summary { grid-column: 1 !important; } } /* ── CART & CHECKOUT ─────────────────────────────────────── */ .woocommerce-cart #page, .woocommerce-cart #main, .woocommerce-cart .woocommerce, .woocommerce-cart .site-main { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* ── WC NOTICES ──────────────────────────────────────────── */ .woocommerce-message { background: rgba(26,110,42,.15) !important; border: 1px solid rgba(26,110,42,.35) !important; color: #5dd879 !important; border-radius: var(--radius-md) !important; padding: 12px 16px !important; list-style: none !important; border-top: none !important; } .woocommerce-error { background: rgba(224,32,32,.1) !important; border: 1px solid rgba(224,32,32,.3) !important; color: #f87171 !important; border-radius: var(--radius-md) !important; padding: 12px 16px !important; list-style: none !important; border-top: none !important; } .woocommerce-info { background: rgba(59,130,246,.1) !important; border: 1px solid rgba(59,130,246,.3) !important; color: #93c5fd !important; border-radius: var(--radius-md) !important; padding: 12px 16px !important; list-style: none !important; border-top: none !important; } /* ── DEQUEUE ELEMENTOR LEFTOVERS ─────────────────────────── */ [class*="elementor-"]:not(.elementor-widget-wrap) { background: transparent !important; } /* ── CONTACT PAGE — hide Elementor duplicate content ─────── */ .page-template-page-contact-us .entry-content, .page-template-page-contact-us .elementor, .page-template-page-contact-us [class*="elementor-"], body.page-id-contact .elementor { display: none !important; } /* ── CART TABLE COLUMN FIX ───────────────────────────────── */ /* Force table to use full left column width */ .woocommerce-cart-form table.shop_table { table-layout: fixed !important; width: 100% !important; } /* Column widths */ .woocommerce-cart-form table.shop_table thead th.product-remove { width: 44px !important; } .woocommerce-cart-form table.shop_table thead th.product-thumbnail { width: 90px !important; } .woocommerce-cart-form table.shop_table thead th.product-name { width: auto !important; } .woocommerce-cart-form table.shop_table thead th.product-price { width: 100px !important; } .woocommerce-cart-form table.shop_table thead th.product-quantity { width: 90px !important; } .woocommerce-cart-form table.shop_table thead th.product-subtotal { width: 100px !important; } /* Cells — all visible */ .woocommerce-cart-form table.shop_table td { overflow: visible !important; vertical-align: middle !important; padding: 14px 10px !important; border-bottom: 1px solid var(--border) !important; } /* Thumbnail — show image */ .woocommerce-cart-form td.product-thumbnail { width: 90px !important; padding: 10px 6px !important; } .woocommerce-cart-form td.product-thumbnail a { display: block !important; } .woocommerce-cart-form td.product-thumbnail img { width: 76px !important; height: 76px !important; object-fit: cover !important; border-radius: 4px !important; background: var(--bg4) !important; display: block !important; border: 1px solid var(--border) !important; } /* Product name — full visible */ .woocommerce-cart-form td.product-name { overflow: hidden !important; text-overflow: ellipsis !important; } .woocommerce-cart-form td.product-name a { color: #fff !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; line-height: 1.4 !important; display: block !important; word-break: break-word !important; } .woocommerce-cart-form td.product-name a:hover { color: var(--red) !important; } .woocommerce-cart-form td.product-name .variation { font-size: 11px !important; color: var(--muted) !important; margin-top: 3px !important; } /* Price columns */ .woocommerce-cart-form td.product-price, .woocommerce-cart-form td.product-subtotal { font-family: var(--font-head) !important; font-size: 20px !important; white-space: nowrap !important; overflow: visible !important; text-align: right !important; } .woocommerce-cart-form td.product-price { color: rgba(255,255,255,0.7) !important; } .woocommerce-cart-form td.product-subtotal { color: var(--red) !important; font-size: 22px !important; } /* Quantity input */ .woocommerce-cart-form td.product-quantity input.qty { width: 56px !important; height: 36px !important; text-align: center !important; background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: #fff !important; border-radius: 4px !important; font-size: 14px !important; -moz-appearance: textfield !important; } .woocommerce-cart-form td.product-quantity input.qty::-webkit-outer-spin-button, .woocommerce-cart-form td.product-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none !important; } /* Remove button */ .woocommerce-cart-form td.product-remove { width: 40px !important; padding: 10px 4px 10px 10px !important; } .woocommerce-cart-form td.product-remove a.remove { display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; background: var(--bg3) !important; color: var(--muted) !important; font-size: 16px !important; border: 1px solid var(--border) !important; text-decoration: none !important; transition: all .18s !important; } .woocommerce-cart-form td.product-remove a.remove:hover { background: rgba(224,32,32,.15) !important; color: var(--red) !important; border-color: var(--red) !important; } /* Cart actions row */ .woocommerce-cart-form .actions { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 12px 14px !important; background: var(--bg3) !important; border-top: 1px solid var(--border) !important; flex-wrap: wrap !important; } /* Make table and all cells fully visible */ .woocommerce-cart-form table.shop_table, .woocommerce-cart-form table.shop_table thead, .woocommerce-cart-form table.shop_table tbody, .woocommerce-cart-form table.shop_table tfoot, .woocommerce-cart-form table.shop_table tr, .woocommerce-cart-form table.shop_table th, .woocommerce-cart-form table.shop_table td { visibility: visible !important; opacity: 1 !important; display: revert !important; } /* Force table display */ .woocommerce-cart-form table.shop_table { display: table !important; width: 100% !important; border-collapse: collapse !important; } .woocommerce-cart-form table.shop_table thead { display: table-header-group !important; } .woocommerce-cart-form table.shop_table tbody { display: table-row-group !important; } .woocommerce-cart-form table.shop_table tr { display: table-row !important; } .woocommerce-cart-form table.shop_table th, .woocommerce-cart-form table.shop_table td { display: table-cell !important; } /* Thumbnail visible */ .woocommerce-cart-form td.product-thumbnail img { display: block !important; visibility: visible !important; opacity: 1 !important; width: 70px !important; height: 70px !important; object-fit: cover !important; } /* Name visible */ .woocommerce-cart-form td.product-name, .woocommerce-cart-form td.product-name a { display: table-cell !important; visibility: visible !important; opacity: 1 !important; color: #fff !important; } .woocommerce-cart-form td.product-name { display: table-cell !important; } .woocommerce-cart-form td.product-name a { display: block !important; font-size: 14px !important; font-weight: 500 !important; } /* Price visible */ .woocommerce-cart-form td.product-price, .woocommerce-cart-form td.product-subtotal { display: table-cell !important; visibility: visible !important; opacity: 1 !important; font-family: var(--font-head) !important; font-size: 20px !important; white-space: nowrap !important; } .woocommerce-cart-form td.product-subtotal { color: var(--red) !important; } /* Cell padding */ .woocommerce-cart-form table.shop_table th { padding: 10px 12px !important; background: var(--bg3) !important; color: var(--muted) !important; font-size: 10px !important; letter-spacing: .12em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--border) !important; } .woocommerce-cart-form table.shop_table td { padding: 12px !important; border-bottom: 1px solid var(--border) !important; vertical-align: middle !important; } /* Checkout button */ .wc-proceed-to-checkout .checkout-button { background: var(--red) !important; color: #fff !important; } .wc-proceed-to-checkout .checkout-button:hover { background: var(--red-dim) !important; } /* ── CROSS-SELLS "YOU MAY BE INTERESTED IN" ──────────────── */ .cross-sells { clear: both !important; width: 100% !important; margin-top: 2.5rem !important; padding-top: 2rem !important; border-top: 1px solid var(--border) !important; grid-column: 1 / -1 !important; } .cross-sells h2 { font-family: var(--font-head) !important; font-size: clamp(22px, 2.5vw, 32px) !important; color: #fff !important; margin-bottom: 1.5rem !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; } /* Cross-sells product grid — 4 columns */ .cross-sells ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1px !important; background: var(--border) !important; border-radius: var(--radius-md) !important; overflow: hidden !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .cross-sells ul.products li.product { background: var(--bg2) !important; padding: 10px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; transition: background .18s !important; } .cross-sells ul.products li.product:hover { background: var(--bg3) !important; } .cross-sells ul.products li.product img { width: 100% !important; height: 160px !important; object-fit: cover !important; border-radius: 4px !important; display: block !important; background: #fff !important; } .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size: 12px !important; font-weight: 500 !important; color: #fff !important; line-height: 1.3 !important; padding: 0 !important; margin: 0 !important; } .cross-sells ul.products li.product .price { font-family: var(--font-head) !important; font-size: 18px !important; color: #fff !important; margin: 2px 0 0 !important; } .cross-sells ul.products li.product .button { background: var(--red) !important; color: #fff !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 6px 14px !important; border-radius: 4px !important; border: none !important; cursor: pointer !important; width: 100% !important; text-align: center !important; display: block !important; text-decoration: none !important; margin-top: auto !important; transition: background .18s !important; } .cross-sells ul.products li.product .button:hover { background: var(--red-dim) !important; } @media (max-width: 900px) { .cross-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; } } /* ── PAC CONTAINER (Google Places dropdown) ──────────────── */ .pac-container { z-index: 999999 !important; } /* ── CART TOTALS — WIDER BOX + SHIPPING LAYOUT ───────────── */ @supports (display: grid) { .woocommerce-cart .woocommerce { grid-template-columns: 1fr 460px !important; } } .cart-collaterals, .vsracing-cart-right { min-width: 440px !important; } .cart_totals table { width: 100% !important; border-collapse: collapse !important; } .cart_totals table th { font-size: 10px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--muted) !important; padding: 12px 14px !important; border-bottom: 1px solid var(--border) !important; vertical-align: top !important; width: 28% !important; } .cart_totals table td { padding: 10px 14px !important; color: var(--muted2) !important; border-bottom: 1px solid var(--border) !important; vertical-align: top !important; width: 72% !important; } /* Shipping row — no padding so list fits */ .cart_totals table tr.shipping td { padding: 4px 8px 4px 4px !important; } /* Shipping list */ .cart_totals #shipping_method { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; width: 100% !important; } .cart_totals #shipping_method li { display: flex !important; align-items: center !important; gap: 8px !important; padding: 7px 10px !important; border-radius: 4px !important; border: 1px solid transparent !important; cursor: pointer !important; transition: background .15s !important; white-space: nowrap !important; overflow: hidden !important; } .cart_totals #shipping_method li:hover { background: var(--bg3) !important; } .cart_totals #shipping_method li:has(input:checked) { background: rgba(224,32,32,.08) !important; border-color: rgba(224,32,32,.2) !important; } .cart_totals #shipping_method li input[type="radio"] { flex-shrink: 0 !important; width: 14px !important; height: 14px !important; accent-color: var(--red) !important; margin: 0 !important; cursor: pointer !important; } .cart_totals #shipping_method li label { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 10px !important; cursor: pointer !important; font-size: 12px !important; color: rgba(255,255,255,.85) !important; overflow: hidden !important; min-width: 0 !important; } .cart_totals #shipping_method li label .woocommerce-Price-amount { font-family: var(--font-head) !important; font-size: 18px !important; color: #fff !important; white-space: nowrap !important; flex-shrink: 0 !important; margin-left: auto !important; } /* Method name span — truncate */ .cart_totals #shipping_method li label > span:not(:has(.woocommerce-Price-amount)) { flex: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; } /* Order total */ .cart_totals table .order-total th, .cart_totals table .order-total td { background: var(--bg3) !important; border-bottom: none !important; color: #fff !important; padding: 14px !important; } .cart_totals table .order-total td .woocommerce-Price-amount { font-family: var(--font-head) !important; font-size: 30px !important; color: #fff !important; } /* Checkout button */ .wc-proceed-to-checkout { padding: 12px 14px !important; } .wc-proceed-to-checkout .checkout-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 50px !important; background: var(--red) !important; color: #fff !important; border: none !important; border-radius: 4px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer !important; transition: background .18s !important; } .wc-proceed-to-checkout .checkout-button:hover { background: var(--red-dim) !important; } /* ── LOGIN PAGE ──────────────────────────────────────────── */ .login #page, .login #main, .login .woocommerce { max-width: 500px !important; margin: 3rem auto !important; padding: 0 1.5rem 5rem !important; } .login h1, .woocommerce-account h1, .login h2, .woocommerce-account h2 { font-size: clamp(28px,4vw,48px) !important; margin-bottom: 1.5rem !important; } /* Login form card */ .woocommerce-form-login, .login form { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 2rem !important; margin-bottom: 2rem !important; } /* Register form card */ .woocommerce-form-register { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 2rem !important; } /* Form rows */ .woocommerce-form-login .form-row, .woocommerce-form-register .form-row, .login .form-group, .login p { margin-bottom: 16px !important; } .woocommerce-form-login .form-row label, .woocommerce-form-register .form-row label, .login label { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--muted) !important; display: block !important; margin-bottom: 5px !important; } .woocommerce-form-login .form-row input, .woocommerce-form-register .form-row input, .login input[type="text"], .login input[type="email"], .login input[type="password"] { width: 100% !important; background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; border-radius: 4px !important; padding: 12px 14px !important; font-size: 14px !important; font-family: var(--font-body) !important; outline: none !important; box-sizing: border-box !important; } .woocommerce-form-login .form-row input:focus, .login input:focus { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(224,32,32,.1) !important; } /* Remember me */ .woocommerce-form-login__rememberme { display: flex !important; align-items: center !important; gap: 8px !important; color: var(--muted) !important; font-size: 13px !important; } .woocommerce-form-login__rememberme input { width: auto !important; accent-color: var(--red) !important; } /* Login button — big red */ .woocommerce-form-login .button, .woocommerce-form-register .button, .login .button, .woocommerce-Button.button { display: block !important; width: 100% !important; height: 52px !important; background: var(--red) !important; color: #fff !important; border: none !important; border-radius: 4px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; cursor: pointer !important; font-family: var(--font-body) !important; margin-top: 1rem !important; box-shadow: 0 4px 16px rgba(224,32,32,.3) !important; transition: background .18s !important; text-align: center !important; line-height: 52px !important; text-decoration: none !important; } .woocommerce-form-login .button:hover { background: var(--red-dim) !important; color: #fff !important; } /* Lost password link */ .woocommerce-LostPassword a, .login a { color: var(--red) !important; font-size: 13px !important; } /* Register heading separator */ .woocommerce-account .woocommerce-form-register h2 { font-size: 22px !important; margin-bottom: 1rem !important; border-top: 1px solid var(--border) !important; padding-top: 2rem !important; } /* ── 2FA / MFA INPUT FIX ─────────────────────────────────── */ /* Make 2FA prompt visible and properly styled */ .two-factor-prompt, #two-factor-prompt, .two-factor-wrap, [class*="two-factor"], [id*="two-factor"], [class*="2fa"], [id*="2fa"] { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 1.5rem !important; margin: 1rem 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* 2FA code input */ input[name="two-factor-code"], input[name="authcode"], input[name="totp"], input[id*="authcode"], input[id*="two-factor"] { background: var(--bg3) !important; border: 2px solid var(--red) !important; color: #fff !important; border-radius: 4px !important; padding: 14px 18px !important; font-size: 24px !important; letter-spacing: .3em !important; text-align: center !important; width: 100% !important; box-sizing: border-box !important; font-family: monospace !important; } input[name="two-factor-code"]:focus, input[name="authcode"]:focus { box-shadow: 0 0 0 3px rgba(224,32,32,.2) !important; outline: none !important; } /* 2FA section heading */ .two-factor-prompt h3, [class*="two-factor"] h3, [class*="two-factor"] p { color: var(--muted2) !important; font-size: 14px !important; margin-bottom: 1rem !important; } /* Notice banner at top */ .two-factor-wrap .error, .login .woocommerce-error, .login .message { background: rgba(224,32,32,.1) !important; border: 1px solid rgba(224,32,32,.3) !important; border-radius: 6px !important; padding: 12px 16px !important; color: #f87171 !important; font-size: 13px !important; margin-bottom: 1rem !important; list-style: none !important; } /* ── CHECKOUT "LOG IN" LINK → BUTTON ─────────────────────── */ .wc-block-checkout__contact-fields .wc-block-components-checkout-step__description a, .wc-block-checkout a[href*="login"], .wc-block-checkout a[href*="my-account"], .wc-block-components-checkout-step__description a { display: inline-flex !important; align-items: center !important; background: transparent !important; color: var(--red) !important; border: 1px solid var(--red) !important; border-radius: 4px !important; padding: 5px 14px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; text-decoration: none !important; transition: background .18s, color .18s !important; float: right !important; margin-top: -2px !important; } .wc-block-checkout a[href*="login"]:hover, .wc-block-checkout a[href*="my-account"]:hover { background: var(--red) !important; color: #fff !important; } /* Also fix the email/password inputs in blocks checkout — remove white bg */ .wc-block-checkout input[type="email"], .wc-block-checkout input[type="password"], .wc-block-checkout input[type="text"] { background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; } .wc-block-checkout input[type="email"]:focus, .wc-block-checkout input[type="password"]:focus { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(224,32,32,.1) !important; background: var(--bg3) !important; } /* Browser autofill (saved address/payment info) forces its own background/text colour, overriding regular CSS unless this exact pseudo-class is targeted — covers the actual classic-checkout fields, plus account and contact form inputs, site-wide. */ .vsr-co-left .form-row input.input-text:-webkit-autofill, .vsr-co-left .form-row input.input-text:-webkit-autofill:hover, .vsr-co-left .form-row input.input-text:-webkit-autofill:focus, .woocommerce-account input.input-text:-webkit-autofill, .woocommerce-account input.input-text:-webkit-autofill:focus, #vsracing-contact-form input:-webkit-autofill, #vsracing-contact-form input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg3) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text) !important; transition: background-color 5000s ease-in-out 0s; } /* ── LOGIN PAGE — REMEMBER ME + MISC FIXES ───────────────── */ /* Remember me row */ .woocommerce-form-login .woocommerce-form-login__rememberme, .woocommerce-form__label-for-checkbox { display: flex !important; align-items: center !important; gap: 8px !important; margin: 12px 0 !important; cursor: pointer !important; } .woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"], .woocommerce-form__label-for-checkbox input[type="checkbox"] { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; accent-color: var(--red) !important; cursor: pointer !important; margin: 0 !important; } /* Make the span text visible */ .woocommerce-form-login .woocommerce-form-login__rememberme span, .woocommerce-form__label-for-checkbox span { display: inline !important; visibility: visible !important; opacity: 1 !important; color: var(--muted2) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; } /* Hide the stray bullet point (password strength indicator leaking) */ .woocommerce-form-login p:empty, .woocommerce-form-login p:has(> br:only-child) { display: none !important; } .woocommerce-password-strength { margin-top: 6px !important; font-size: 11px !important; } /* Remember me checkbox when it's a standalone p tag */ .woocommerce-form-login p.form-row-wide:has(input[type="checkbox"]) { display: flex !important; align-items: center !important; gap: 8px !important; } .woocommerce-form-login p.form-row-wide:has(input[type="checkbox"]) input { width: 16px !important; height: 16px !important; margin: 0 !important; } .woocommerce-form-login p.form-row-wide:has(input[type="checkbox"]) label { color: var(--muted2) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; } /* ── HIDE SHIPMENT SECTION ON CART PAGE ──────────────────── */ .woocommerce-cart .cart_totals tr.shipping, .woocommerce-cart .cart_totals .shipping { display: none !important; } /* ═══════════════════════════════════════════════════════════ SLIDE-OUT CART DRAWER — VSracing v3.1.0 ═══════════════════════════════════════════════════════════ */ /* Overlay */ #vsr-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(2px); } #vsr-cart-overlay.vsr-open { opacity: 1; pointer-events: auto; } /* Drawer panel */ #vsr-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--bg2, #383c46); border-left: 1px solid var(--border, rgba(255,255,255,0.1)); z-index: 9999; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); box-shadow: -8px 0 40px rgba(0,0,0,0.5); will-change: transform; } #vsr-cart-drawer.vsr-open { transform: translateX(0); } /* Drawer head */ .vsr-cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 18px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)); flex-shrink: 0; } .vsr-cart-drawer-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-head, 'Bebas Neue', sans-serif); font-size: 22px; letter-spacing: 0.04em; color: #fff; margin: 0; } .vsr-cart-drawer-title svg { width: 20px; height: 20px; stroke: var(--red, #e02020); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .vsr-drawer-count { background: var(--red, #e02020); color: #fff; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 11px; font-weight: 700; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .vsr-cart-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.5); padding: 6px; border-radius: 6px; display: flex; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .vsr-cart-close:hover { color: #fff; background: rgba(255,255,255,0.08); } .vsr-cart-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } /* Scrollable cart body */ .vsr-cart-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px; } .vsr-cart-body::-webkit-scrollbar { width: 4px; } .vsr-cart-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } /* Cart items */ .vsr-cart-items { display: flex; flex-direction: column; gap: 16px; } .vsr-cart-item { display: grid; grid-template-columns: 72px 1fr 28px; gap: 12px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); } .vsr-cart-item:last-child { border-bottom: none; padding-bottom: 0; } .vsr-ci-img { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--bg3, #42474f); flex-shrink: 0; } .vsr-ci-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .vsr-ci-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .vsr-ci-name { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9); text-decoration: none; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vsr-ci-name:hover { color: var(--red, #e02020); } .vsr-ci-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vsr-ci-qty { display: flex; align-items: center; gap: 0; background: var(--bg3, #42474f); border: 1px solid var(--border, rgba(255,255,255,0.12)); border-radius: 6px; overflow: hidden; } .vsr-qty-btn { background: none; border: none; color: rgba(255,255,255,0.7); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .vsr-qty-btn:hover { background: rgba(224,32,32,0.15); color: var(--red, #e02020); } .vsr-qty-num { font-size: 13px; font-weight: 600; color: #fff; min-width: 22px; text-align: center; padding: 0 2px; } .vsr-ci-price { font-family: var(--font-head, 'Bebas Neue', sans-serif); font-size: 18px; color: #fff; letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0; } .vsr-ci-remove { background: none; border: none; color: rgba(255,255,255,0.25); cursor: pointer; padding: 2px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.15s; text-decoration: none; margin-top: 2px; } .vsr-ci-remove:hover { color: var(--red, #e02020); } .vsr-ci-remove svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } /* Empty cart state */ .vsr-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 60px 20px; text-align: center; color: var(--muted, rgba(255,255,255,0.4)); } .vsr-cart-empty svg { width: 40px; height: 40px; stroke: rgba(255,255,255,0.2); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .vsr-cart-empty p { font-size: 15px; margin: 0; } /* Cart footer */ .vsr-cart-footer { padding: 20px 24px 28px; border-top: 1px solid var(--border, rgba(255,255,255,0.1)); flex-shrink: 0; background: var(--bg2, #383c46); } .vsr-cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .vsr-cart-subtotal span:first-child { font-size: 13px; color: var(--muted, rgba(255,255,255,0.5)); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .vsr-subtotal-amount { font-family: var(--font-head, 'Bebas Neue', sans-serif); font-size: 26px; color: #fff; letter-spacing: 0.02em; } .vsr-cart-shipping-note { font-size: 11px; color: var(--muted, rgba(255,255,255,0.4)); margin: 0 0 16px; } .vsr-checkout-btn { display: block; width: 100%; background: var(--red, #e02020) !important; color: #fff !important; border: none !important; border-radius: var(--radius, 6px) !important; padding: 15px 24px !important; font-family: var(--font-body, 'DM Sans', sans-serif) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: background 0.18s !important; box-shadow: 0 4px 20px rgba(224,32,32,0.35) !important; } .vsr-checkout-btn:hover { background: var(--red-dim, #c01a1a) !important; color: #fff !important; } .vsr-view-cart-link { display: block; text-align: center; font-size: 12px; color: rgba(255,255,255,0.45); text-decoration: none; margin-top: 12px; transition: color 0.15s; } .vsr-view-cart-link:hover { color: rgba(255,255,255,0.8); } /* body scroll lock when drawer open */ body.vsr-drawer-open { overflow: hidden; } /* Loading state in drawer */ .vsr-cart-body.vsr-loading { opacity: 0.5; pointer-events: none; } /* ── PASSWORD SHOW/HIDE TOGGLE BUTTON ────────────────────── */ .show-password-input, button.show-password-input, .woocommerce-Input-wrapper .show-password-input { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(255,255,255,0.45) !important; transition: color 0.15s !important; z-index: 2 !important; line-height: 1 !important; } .show-password-input:hover, button.show-password-input:hover { color: rgba(255,255,255,0.9) !important; } .show-password-input::before, button.show-password-input::before { font-size: 18px !important; line-height: 1 !important; width: 18px !important; height: 18px !important; display: block !important; opacity: 1 !important; } .woocommerce-Input-wrapper, .password-input, .woocommerce-form__input-wrapper { position: relative !important; display: flex !important; align-items: center !important; } .woocommerce-Input-wrapper input[type="password"], .woocommerce-Input-wrapper input[type="text"], .password-input input[type="password"], .password-input input[type="text"], .woocommerce-form__input-wrapper input[type="password"], .woocommerce-form__input-wrapper input[type="text"] { padding-right: 44px !important; width: 100% !important; } .woocommerce-MyAccount-content .woocommerce-Input-wrapper, .woocommerce-account .woocommerce-Input-wrapper, .woocommerce-account .password-input { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; } /* ═══════════════════════════════════════════════════════════ MY ACCOUNT — CUSTOM TEMPLATE REDESIGN v3.1.1 ═══════════════════════════════════════════════════════════ */ /* ── PAGE WRAPPER ── */ .vsr-account-wrap { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem 4rem; display: block !important; /* Ensure block content from WP editor doesn't interfere */ position: relative; z-index: 1; } /* Kill any WC block wrappers that leaked through */ .vsr-account-wrap .wp-block-woocommerce-customer-account, .vsr-account-wrap .wc-block-customer-account, .vsr-account-wrap .wc-block-my-account { display: none !important; } /* ── HEADER BAR ── */ .vsr-account-header { margin-bottom: 2.5rem; } .vsr-account-title { font-family: var(--font-head); font-size: clamp(32px, 4vw, 54px); letter-spacing: 0.04em; color: #fff; margin: 0 0 6px; } .vsr-account-subtitle { font-size: 14px; color: var(--muted); margin: 0; } /* Logged-in header */ .vsr-account-header--loggedin { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 1.5rem 2rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 2rem; } .vsr-account-user { display: flex; align-items: center; gap: 14px; } .vsr-account-avatar, .vsr-account-user img { width: 52px !important; height: 52px !important; border-radius: 50% !important; border: 2px solid var(--red) !important; object-fit: cover !important; } .vsr-account-greeting { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .vsr-account-name { font-family: var(--font-head); font-size: 24px; letter-spacing: 0.03em; color: #fff; margin: 0; } .vsr-account-logout { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.15s; } .vsr-account-logout svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .vsr-account-logout:hover { color: var(--red); } /* ── AUTH GRID (Login + Register) ── */ .vsr-auth-grid { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0; align-items: start; } /* Card */ .vsr-auth-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; } .vsr-auth-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .vsr-auth-card-head svg { width: 22px; height: 22px; stroke: var(--red); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .vsr-auth-card-head h2 { font-family: var(--font-head) !important; font-size: 22px !important; letter-spacing: 0.04em !important; color: #fff !important; margin: 0 !important; border: none !important; padding: 0 !important; } /* Divider */ .vsr-auth-divider { display: flex; align-items: center; justify-content: center; padding-top: 120px; } .vsr-auth-divider span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.25); background: var(--bg); padding: 6px; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); } /* Style WooCommerce's login + register forms inside our cards */ .vsr-auth-card .woocommerce-form-login, .vsr-auth-card .woocommerce-form-register { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } /* Form rows */ .vsr-auth-card .form-row, .vsr-auth-card p { margin-bottom: 16px !important; } .vsr-auth-card label { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--muted) !important; display: block !important; margin-bottom: 6px !important; } .vsr-auth-card input[type="text"], .vsr-auth-card input[type="email"], .vsr-auth-card input[type="password"] { width: 100% !important; background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; border-radius: var(--radius) !important; padding: 12px 14px !important; font-size: 14px !important; font-family: var(--font-body) !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.15s, box-shadow 0.15s !important; } .vsr-auth-card input:focus { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(224,32,32,0.12) !important; } .vsr-auth-card input::placeholder { color: rgba(255,255,255,0.25) !important; } /* Remember me */ .vsr-auth-card .woocommerce-form__label-for-checkbox { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--muted) !important; } .vsr-auth-card .woocommerce-form__label-for-checkbox input { width: auto !important; accent-color: var(--red) !important; } /* Submit buttons */ .vsr-auth-card .woocommerce-form-login__submit, .vsr-auth-card .woocommerce-form-register__submit, .vsr-auth-card button[type="submit"], .vsr-auth-card input[type="submit"] { display: block !important; width: 100% !important; background: var(--red) !important; color: #fff !important; border: none !important; border-radius: var(--radius) !important; padding: 14px 20px !important; font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; margin-top: 1.25rem !important; box-shadow: 0 4px 16px rgba(224,32,32,0.3) !important; transition: background 0.18s !important; } .vsr-auth-card button[type="submit"]:hover, .vsr-auth-card input[type="submit"]:hover { background: var(--red-dim) !important; } /* Lost password + links */ .vsr-auth-card .woocommerce-LostPassword, .vsr-auth-card .woocommerce-privacy-policy-text { font-size: 12px !important; color: var(--muted) !important; margin-top: 12px !important; } .vsr-auth-card a { color: var(--red) !important; } .vsr-auth-card a:hover { color: var(--red-dim) !important; } .vsr-auth-note { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; } /* ── LOGGED-IN: SIDEBAR + CONTENT LAYOUT ── */ .vsr-account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; } /* Sidebar nav */ .vsr-account-nav { position: sticky; top: calc(var(--header-h, 70px) + 16px); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; padding: 6px 0; } .vsr-account-nav ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .vsr-account-nav ul li { margin: 0 !important; padding: 0 !important; } .vsr-account-nav ul li a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 11px 18px !important; font-size: 13px !important; font-weight: 500 !important; color: rgba(255,255,255,0.6) !important; text-decoration: none !important; border-left: 3px solid transparent !important; transition: background 0.15s, color 0.15s, border-color 0.15s !important; } .vsr-account-nav ul li a svg { width: 15px !important; height: 15px !important; stroke: currentColor !important; fill: none !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; flex-shrink: 0 !important; } .vsr-account-nav ul li a:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; border-left-color: rgba(224,32,32,0.4) !important; } .vsr-account-nav ul li.vsr-nav-active a { background: rgba(224,32,32,0.1) !important; color: #fff !important; border-left-color: var(--red) !important; font-weight: 600 !important; } /* Logout — red tint */ .vsr-account-nav ul li:last-child { border-top: 1px solid var(--border) !important; margin-top: 4px !important; } .vsr-account-nav ul li:last-child a { color: rgba(224,32,32,0.7) !important; } .vsr-account-nav ul li:last-child a:hover { color: var(--red) !important; background: rgba(224,32,32,0.08) !important; border-left-color: var(--red) !important; } /* Content area */ .vsr-account-content { min-width: 0; } /* Content h2 titles */ .vsr-account-content h2 { font-family: var(--font-head) !important; font-size: clamp(20px, 2.5vw, 30px) !important; letter-spacing: 0.04em !important; color: #fff !important; margin-bottom: 1.5rem !important; padding-bottom: 0.75rem !important; border-bottom: 1px solid var(--border) !important; } .vsr-account-content h3 { font-family: var(--font-head) !important; font-size: 17px !important; letter-spacing: 0.04em !important; color: #fff !important; margin: 1.5rem 0 1rem !important; } /* Orders table */ .vsr-account-content .woocommerce-orders-table, .vsr-account-content .shop_table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; background: transparent !important; } .vsr-account-content .woocommerce-orders-table thead th, .vsr-account-content .shop_table thead th { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--muted) !important; padding: 8px 12px !important; background: transparent !important; border: none !important; border-bottom: 2px solid var(--border) !important; text-align: left !important; } .vsr-account-content .woocommerce-orders-table tbody tr, .vsr-account-content .shop_table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06) !important; transition: background 0.12s !important; } .vsr-account-content .woocommerce-orders-table tbody tr:hover, .vsr-account-content .shop_table tbody tr:hover { background: rgba(255,255,255,0.03) !important; } .vsr-account-content .woocommerce-orders-table tbody td, .vsr-account-content .shop_table tbody td { padding: 13px 12px !important; color: rgba(255,255,255,0.8) !important; border: none !important; vertical-align: middle !important; } /* Order status badges */ .vsr-account-content mark.order-status, .vsr-account-content .order-status { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; background: var(--bg3) !important; color: rgba(255,255,255,0.7) !important; } .vsr-account-content mark.status-processing { background: rgba(16,185,129,0.18) !important; color: #10b981 !important; } .vsr-account-content mark.status-completed { background: rgba(59,130,246,0.18) !important; color: #60a5fa !important; } .vsr-account-content mark.status-pending { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; } .vsr-account-content mark.status-on-hold { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; } .vsr-account-content mark.status-cancelled { background: rgba(224,32,32,0.18) !important; color: var(--red) !important; } .vsr-account-content mark.status-refunded { background: rgba(168,85,247,0.18) !important; color: #c084fc !important; } .vsr-account-content mark.status-failed { background: rgba(224,32,32,0.25) !important; color: var(--red) !important; } /* Buttons in content */ .vsr-account-content .button, .vsr-account-content a.button { display: inline-flex !important; align-items: center !important; padding: 7px 16px !important; background: var(--bg3) !important; color: rgba(255,255,255,0.85) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; transition: background 0.15s, color 0.15s, border-color 0.15s !important; cursor: pointer !important; } .vsr-account-content .button:hover, .vsr-account-content a.button:hover { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; } /* Edit account / address forms */ .vsr-account-content .woocommerce-EditAccountForm, .vsr-account-content .woocommerce-address-fields__field-wrapper, .vsr-account-content .edit-account { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 2rem !important; } .vsr-account-content .form-row { margin-bottom: 16px !important; } .vsr-account-content label { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--muted) !important; display: block !important; margin-bottom: 5px !important; } .vsr-account-content input[type="text"], .vsr-account-content input[type="email"], .vsr-account-content input[type="tel"], .vsr-account-content input[type="password"], .vsr-account-content select, .vsr-account-content textarea { width: 100% !important; background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; border-radius: var(--radius) !important; padding: 11px 14px !important; font-size: 14px !important; font-family: var(--font-body) !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.15s, box-shadow 0.15s !important; } .vsr-account-content input:focus, .vsr-account-content select:focus { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(224,32,32,0.12) !important; } .vsr-account-content input[type="submit"], .vsr-account-content .woocommerce-EditAccountForm .button[type="submit"] { background: var(--red) !important; color: #fff !important; border: none !important; border-radius: var(--radius) !important; padding: 13px 32px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; margin-top: 1rem !important; box-shadow: 0 4px 16px rgba(224,32,32,0.28) !important; transition: background 0.18s !important; width: auto !important; } .vsr-account-content input[type="submit"]:hover { background: var(--red-dim) !important; } /* Fieldset (password change group) */ .vsr-account-content fieldset { border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 1.5rem !important; margin-top: 1.5rem !important; } .vsr-account-content fieldset legend { font-family: var(--font-head) !important; font-size: 14px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--muted) !important; padding: 0 8px !important; } /* Addresses grid */ .vsr-account-content .woocommerce-Addresses { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; } .vsr-account-content .woocommerce-Address { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 1.5rem !important; } .vsr-account-content .woocommerce-Address-title { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 1rem !important; padding-bottom: 0.75rem !important; border-bottom: 1px solid var(--border) !important; } .vsr-account-content .woocommerce-Address-title h3 { font-family: var(--font-head) !important; font-size: 16px !important; letter-spacing: 0.06em !important; color: #fff !important; margin: 0 !important; border: none !important; } .vsr-account-content .woocommerce-Address-title a { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--red) !important; text-decoration: none !important; } .vsr-account-content address { font-size: 13px !important; color: rgba(255,255,255,0.65) !important; font-style: normal !important; line-height: 1.85 !important; } /* Notices */ .vsr-account-content .woocommerce-message { background: rgba(16,185,129,0.1) !important; border: 1px solid rgba(16,185,129,0.3) !important; border-radius: var(--radius-md) !important; padding: 14px 18px !important; color: rgba(255,255,255,0.85) !important; font-size: 13px !important; margin-bottom: 1.5rem !important; list-style: none !important; } .vsr-account-content .woocommerce-error { background: rgba(224,32,32,0.1) !important; border: 1px solid rgba(224,32,32,0.3) !important; border-radius: var(--radius-md) !important; padding: 14px 18px !important; color: rgba(255,255,255,0.85) !important; font-size: 13px !important; margin-bottom: 1.5rem !important; list-style: none !important; } /* Content fade-in */ .vsr-account-content > * { animation: vsrFadeIn 0.2s ease; } @keyframes vsrFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Select arrow */ .vsr-account-content select { appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 36px !important; } /* ── RESPONSIVE ── */ @media (max-width: 860px) { .vsr-auth-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .vsr-auth-divider { padding: 0 !important; flex-direction: row !important; gap: 12px !important; } .vsr-auth-divider::before, .vsr-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .vsr-account-layout { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .vsr-account-nav { position: static !important; } .vsr-account-nav ul { display: flex !important; overflow-x: auto !important; padding: 4px !important; gap: 4px !important; scroll-snap-type: x mandatory !important; } .vsr-account-nav ul li a { white-space: nowrap !important; border-left: none !important; border-bottom: 3px solid transparent !important; border-radius: var(--radius) !important; padding: 9px 12px !important; scroll-snap-align: start !important; } .vsr-account-nav ul li.vsr-nav-active a { border-left-color: transparent !important; border-bottom-color: var(--red) !important; } .vsr-account-content .woocommerce-Addresses { grid-template-columns: 1fr !important; } .vsr-account-wrap { padding: 1.25rem 1rem 3rem !important; } } /* ═══════════════════════════════════════════════════════════ COUPON — WC BLOCKS FLOATING LABEL PATTERN v3.1.2 ═══════════════════════════════════════════════════════════ WC Blocks coupon DOM structure: .wc-block-components-totals-coupon button.wc-block-components-panel__button ← "ADD COUPONS ^" .wc-block-components-panel__content form.wc-block-components-totals-coupon__form .wc-block-components-text-input ← floating label wrapper label ← "ENTER CODE" floating label input[type=text] ← the actual input button[type=submit] ← "Apply" button ═══════════════════════════════════════════════════════════ */ /* Panel wrapper */ .wc-block-components-totals-coupon { background: var(--bg3, #4e535e) !important; border: 1px solid var(--border, rgba(255,255,255,0.15)) !important; border-radius: 6px !important; padding: 10px 14px !important; } /* Toggle header */ .wc-block-components-totals-coupon .wc-block-components-panel__button { all: unset !important; display: flex !important; width: 100% !important; justify-content: space-between !important; align-items: center !important; cursor: pointer !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.7) !important; box-sizing: border-box !important; } .wc-block-components-totals-coupon .wc-block-components-panel__button:hover { color: #fff !important; } /* Panel content */ .wc-block-components-totals-coupon .wc-block-components-panel__content { padding: 12px 0 4px !important; overflow: visible !important; } /* Form row */ .wc-block-components-totals-coupon__form { display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; } /* Floating label wrapper — takes all available width */ .wc-block-components-totals-coupon__form .wc-block-components-text-input { flex: 1 1 auto !important; min-width: 0 !important; position: relative !important; display: block !important; } /* The floating label */ .wc-block-components-totals-coupon__form .wc-block-components-text-input label { position: absolute !important; top: 50% !important; left: 14px !important; transform: translateY(-50%) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.35) !important; pointer-events: none !important; transition: all 0.15s !important; z-index: 1 !important; } /* When input has value or is focused, float the label up */ .wc-block-components-totals-coupon__form .wc-block-components-text-input.is-active label, .wc-block-components-totals-coupon__form .wc-block-components-text-input input:not(:placeholder-shown) ~ label, .wc-block-components-totals-coupon__form .wc-block-components-text-input input:focus ~ label { top: 8px !important; font-size: 9px !important; transform: none !important; color: rgba(255,255,255,0.45) !important; } /* The actual text input */ .wc-block-components-totals-coupon__form .wc-block-components-text-input input, .wc-block-components-totals-coupon__input { all: unset !important; display: block !important; width: 100% !important; height: 52px !important; padding: 20px 14px 8px !important; background: var(--bg2, #383c46) !important; border: 1px solid var(--border2, rgba(255,255,255,0.25)) !important; border-radius: 4px !important; color: #f5f5f5 !important; font-family: var(--font-body, 'DM Sans', sans-serif) !important; font-size: 15px !important; box-sizing: border-box !important; outline: none !important; } .wc-block-components-totals-coupon__form .wc-block-components-text-input input:focus { border-color: var(--red, #e02020) !important; box-shadow: 0 0 0 3px rgba(224,32,32,0.12) !important; } /* Apply button */ .wc-block-components-totals-coupon__button, .wc-block-components-totals-coupon__form > button, .wc-block-components-totals-coupon__form .wc-block-components-button { all: unset !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 52px !important; min-width: 90px !important; padding: 0 20px !important; background: var(--red, #e02020) !important; color: #fff !important; border-radius: 4px !important; font-family: var(--font-body, 'DM Sans', sans-serif) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; white-space: nowrap !important; box-shadow: 0 4px 12px rgba(224,32,32,0.28) !important; box-sizing: border-box !important; transition: background 0.15s !important; } .wc-block-components-totals-coupon__form > button:hover, .wc-block-components-totals-coupon__form .wc-block-components-button:hover { background: var(--red-dim, #c01a1a) !important; } /* Cart page classic coupon */ .woocommerce-cart-form .actions .coupon { display: flex !important; align-items: center !important; gap: 8px !important; } .woocommerce-cart-form .actions .coupon #coupon_code { flex: 1 !important; height: 44px !important; padding: 0 14px !important; background: var(--bg3, #4e535e) !important; border: 1px solid var(--border2) !important; border-radius: 4px !important; color: #fff !important; font-size: 14px !important; } .woocommerce-cart-form .actions .coupon button[name="apply_coupon"] { height: 44px !important; padding: 0 20px !important; background: var(--red, #e02020) !important; color: #fff !important; border: none !important; border-radius: 4px !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; } /* ═══════════════════════════════════════════════════════════ CHECKOUT — DEFINITIVE TWO-COLUMN v3.1.2 ═══════════════════════════════════════════════════════════ */ /* Kill default WC width constraints */ body.woocommerce-checkout .woocommerce, body.woocommerce-checkout #main, body.woocommerce-checkout .site-main { max-width: 100% !important; width: 100% !important; padding: 0 !important; float: none !important; } /* Pre-form notices container (coupon / login) — centers within page, full width so the boxes inside can be positioned/sized independently */ body.woocommerce-checkout .woocommerce-notices-wrapper { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 2rem !important; padding-right: 2rem !important; box-sizing: border-box !important; } /* The actual notice boxes — equal fixed width, styled to match Route's white shadow-box card for visual consistency */ body.woocommerce-checkout .woocommerce-info, body.woocommerce-checkout .woocommerce-form-coupon-toggle, body.woocommerce-checkout .woocommerce-checkout-coupon { width: 360px !important; max-width: 100% !important; background: #ffffff !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important; color: #1a1a1a !important; padding: 14px 16px !important; box-sizing: border-box !important; } body.woocommerce-checkout .woocommerce-info *, body.woocommerce-checkout .woocommerce-form-coupon-toggle *, body.woocommerce-checkout .woocommerce-checkout-coupon * { color: #1a1a1a !important; } body.woocommerce-checkout .woocommerce-info a, body.woocommerce-checkout .woocommerce-form-coupon-toggle a, body.woocommerce-checkout .woocommerce-checkout-coupon a { color: #e02020 !important; text-decoration: underline !important; } /* .vsr-co-wrap / .vsr-co-left / .vsr-co-right layout rules now live exclusively in woocommerce/checkout/form-checkout.php (the v3.1.5+ template) — removed the older duplicate copy that lived here with different widths and a different mobile breakpoint, which was the kind of two-systems-disagreeing setup that's caused layout bugs elsewhere in this theme. */ /* Order review box */ #order_review { background: var(--bg2, #383c46) !important; border: 1px solid var(--border, rgba(255,255,255,0.15)) !important; border-radius: 8px !important; overflow: hidden !important; padding: 0 !important; } #order_review_heading { display: none !important; } #order_review table.shop_table { width: 100% !important; border-collapse: collapse !important; } #order_review table thead th { background: var(--bg3, #4e535e) !important; font-size: 10px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--muted, rgba(255,255,255,0.55)) !important; padding: 10px 16px !important; border-bottom: 1px solid var(--border) !important; font-weight: 600 !important; } #order_review table td, #order_review table th { padding: 10px 16px !important; font-size: 13px !important; border-bottom: 1px solid var(--border) !important; color: var(--muted2, rgba(255,255,255,0.7)) !important; } #order_review .order-total th, #order_review .order-total td { background: var(--bg3) !important; color: #fff !important; border-bottom: none !important; } #order_review .order-total td .woocommerce-Price-amount { font-family: var(--font-head, 'Bebas Neue', sans-serif) !important; font-size: 26px !important; color: #fff !important; } /* Payment box */ #payment { background: #ffffff !important; border: 1px solid rgba(0,0,0,.1) !important; border-radius: 8px !important; overflow: hidden !important; padding: 0 !important; margin-top: 1rem !important; } #payment ul.payment_methods { list-style: none !important; padding: 0 !important; margin: 0 !important; } #payment ul.payment_methods li { padding: 12px 16px !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; } #payment ul.payment_methods li:last-child { border-bottom: none !important; } #payment ul.payment_methods label { color: #1a1a1a !important; font-size: 14px !important; display: flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; } #payment ul.payment_methods input[type="radio"] { accent-color: var(--red, #e02020) !important; } #payment .payment_box { background: #f7f8fa !important; padding: 10px 16px !important; font-size: 13px !important; color: #5a5e68 !important; } #payment .payment_box:has(iframe), #payment .payment_box:has(svg), #payment .payment_box:has(img), #payment .payment_box:has(button) { background: transparent !important; padding: 8px 0 !important; } #payment .place-order { padding: 14px 16px !important; } #payment #place_order { display: block !important; width: 100% !important; height: 52px !important; background: var(--red, #e02020) !important; color: #fff !important; border: none !important; border-radius: 4px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; cursor: pointer !important; font-family: var(--font-body, 'DM Sans', sans-serif) !important; transition: background .18s !important; } #payment #place_order:hover { background: var(--red-dim, #c01a1a) !important; } /* Left column field layout */ .vsr-co-left .woocommerce-billing-fields__field-wrapper, .vsr-co-left .woocommerce-shipping-fields__field-wrapper { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 1.5rem !important; } .vsr-co-left .form-row-wide, .vsr-co-left #billing_address_1_field, .vsr-co-left #billing_address_2_field, .vsr-co-left #shipping_address_1_field, .vsr-co-left #shipping_address_2_field, .vsr-co-left #billing_country_field, .vsr-co-left #shipping_country_field { grid-column: 1 / -1 !important; } .vsr-co-left .form-row { float: none !important; width: 100% !important; padding: 0 !important; margin-bottom: 14px !important; clear: none !important; } .vsr-co-left .form-row label { display: block !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--muted) !important; margin-bottom: 5px !important; } .vsr-co-left .form-row input.input-text, .vsr-co-left .form-row select, .vsr-co-left .form-row textarea { width: 100% !important; background: var(--bg3) !important; border: 1px solid var(--border2, rgba(255,255,255,0.26)) !important; color: var(--text) !important; border-radius: 4px !important; padding: 11px 14px !important; font-size: 14px !important; font-family: var(--font-body) !important; outline: none !important; box-sizing: border-box !important; height: auto !important; } .vsr-co-left .form-row input:focus, .vsr-co-left .form-row select:focus { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(224,32,32,.1) !important; } .vsr-co-left h3 { font-size: 17px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: rgba(255,255,255,.85) !important; margin: 1.5rem 0 1rem !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--border) !important; } /* Mobile/tablet stacking breakpoint for .vsr-co-wrap now lives exclusively in form-checkout.php at 1200px (see note above) */ /* ── ORDER SUMMARY: SHIPPING OPTIONS FIX ─────────────────── */ /* Shipping row in order review table */ #order_review .woocommerce-shipping-methods, #order_review #shipping_method { list-style: none !important; padding: 0 !important; margin: 0 !important; } #order_review .woocommerce-shipping-methods li, #order_review #shipping_method li { display: flex !important; align-items: flex-start !important; gap: 8px !important; padding: 6px 0 !important; border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)) !important; line-height: 1.4 !important; } #order_review .woocommerce-shipping-methods li:last-child, #order_review #shipping_method li:last-child { border-bottom: none !important; } /* Radio button */ #order_review .woocommerce-shipping-methods li input[type="radio"], #order_review #shipping_method li input[type="radio"] { margin-top: 3px !important; flex-shrink: 0 !important; accent-color: var(--red, #e02020) !important; } /* Label text */ #order_review .woocommerce-shipping-methods li label, #order_review #shipping_method li label { color: var(--text, #f5f5f5) !important; font-size: 13px !important; cursor: pointer !important; line-height: 1.4 !important; } /* Price inside label */ #order_review .woocommerce-shipping-methods .woocommerce-Price-amount, #order_review #shipping_method .woocommerce-Price-amount { font-weight: 600 !important; color: #fff !important; } /* Table cell that contains shipping — allow it to grow */ #order_review table .woocommerce-shipping-totals td { padding: 12px 16px !important; vertical-align: top !important; } #order_review table .woocommerce-shipping-totals th { vertical-align: top !important; padding-top: 14px !important; } /* Ensure the table doesn't force narrow columns */ #order_review table.shop_table { table-layout: auto !important; } #order_review table.shop_table th { width: 35% !important; white-space: nowrap !important; } #order_review table.shop_table td { width: 65% !important; } /* ── ADVANCED COUPONS ACCORDION OVERRIDE ─────────────────── */ .acfw-checkout-ui-block .acfw-accordion h3 { padding: 12px 16px !important; margin: 0 !important; background: #4e535e !important; color: #f5f5f5 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; border: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .acfw-checkout-ui-block .acfw-accordion h3:hover { background: #585e6a !important; color: #fff !important; } .acfw-checkout-ui-block .acfw-accordion h3 * { color: #f5f5f5 !important; background: transparent !important; } .acfw-checkout-ui-block, .acfw-checkout-ui-block .acfw-accordion { background: #4e535e !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 6px !important; overflow: hidden !important; margin-top: 0.5rem !important; } .acfw-checkout-ui-block .acfw-accordion > div, .acfw-checkout-ui-block .acfw-accordion-content { background: #42474f !important; color: rgba(255,255,255,0.8) !important; padding: 12px 16px !important; } /* ── SHOP PAGINATION ──────────────────────────────────────── */ .woocommerce-pagination, .woocommerce nav.woocommerce-pagination { display: block !important; clear: both !important; width: 100% !important; padding: 2rem 0 !important; text-align: center !important; } .woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul { display: inline-flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 auto !important; } .woocommerce-pagination ul li, .woocommerce nav.woocommerce-pagination ul li { display: inline-flex !important; float: none !important; list-style: none !important; } /* All page number links and arrows */ .woocommerce-pagination ul li a, .woocommerce-pagination ul li span, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 38px !important; height: 38px !important; padding: 0 10px !important; background: var(--bg3, #4e535e) !important; border: 1px solid var(--border, rgba(255,255,255,0.15)) !important; border-radius: 4px !important; color: rgba(255,255,255,0.8) !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: background 0.15s, color 0.15s !important; cursor: pointer !important; } .woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--red, #e02020) !important; border-color: var(--red, #e02020) !important; color: #fff !important; } /* Current/active page */ .woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--red, #e02020) !important; border-color: var(--red, #e02020) !important; color: #fff !important; } /* Prev/Next arrows — make them wider */ .woocommerce-pagination ul li a.prev, .woocommerce-pagination ul li a.next, .woocommerce nav.woocommerce-pagination ul li a.prev, .woocommerce nav.woocommerce-pagination ul li a.next { min-width: 80px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 2px !important; } /* ── SIDEBAR: PRODUCT CATEGORIES + SUBCATEGORIES ─────────── */ /* Widget title */ .shop-sidebar .widget-title, .shop-sidebar .widgettitle { font-family: var(--font-head, 'Bebas Neue', sans-serif) !important; font-size: 16px !important; letter-spacing: 0.1em !important; color: #fff !important; text-transform: uppercase !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--red, #e02020) !important; margin-bottom: 12px !important; } /* Category list */ .shop-sidebar .product-categories, .shop-sidebar ul.product-categories { list-style: none !important; padding: 0 !important; margin: 0 !important; } /* Top-level category items */ .shop-sidebar .product-categories li, .shop-sidebar ul.product-categories li { border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)) !important; } .shop-sidebar .product-categories li:last-child { border-bottom: none !important; } /* Category links */ .shop-sidebar .product-categories li > a { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 4px !important; color: rgba(255,255,255,0.8) !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; transition: color 0.15s !important; } .shop-sidebar .product-categories li > a:hover, .shop-sidebar .product-categories li.current-cat > a, .shop-sidebar .product-categories li.current-cat-parent > a { color: var(--red, #e02020) !important; } /* Count badge */ .shop-sidebar .product-categories li > a .count, .shop-sidebar .product-categories .count { background: var(--bg3, #4e535e) !important; color: rgba(255,255,255,0.5) !important; border-radius: 10px !important; padding: 1px 7px !important; font-size: 11px !important; min-width: 22px !important; text-align: center !important; } /* SUBCATEGORIES — show and indent them */ .shop-sidebar .product-categories ul.children, .shop-sidebar ul.product-categories ul.children { display: block !important; list-style: none !important; padding: 0 0 6px 14px !important; margin: 0 !important; border-left: 2px solid var(--red, #e02020) !important; margin-left: 8px !important; } .shop-sidebar .product-categories ul.children li { border-bottom: none !important; } .shop-sidebar .product-categories ul.children li > a { padding: 6px 4px !important; font-size: 12px !important; color: rgba(255,255,255,0.6) !important; font-weight: 400 !important; } .shop-sidebar .product-categories ul.children li > a:hover, .shop-sidebar .product-categories ul.children li.current-cat > a { color: var(--red, #e02020) !important; } /* Nested sub-subcategories */ .shop-sidebar .product-categories ul.children ul.children { padding-left: 12px !important; border-left: 1px solid rgba(255,255,255,0.15) !important; margin-left: 6px !important; } /* ── SIDEBAR GRANDCHILDREN (VSRacing size subcategories) ─── */ .shop-cat-grandchildren { list-style: none !important; padding: 0 0 4px 12px !important; margin: 4px 0 0 0 !important; border-left: 1px solid rgba(255,255,255,0.15) !important; } .shop-cat-grandchildren li a { display: block !important; padding: 5px 4px !important; color: rgba(255,255,255,0.5) !important; font-size: 11px !important; text-decoration: none !important; transition: color 0.15s !important; } .shop-cat-grandchildren li a:hover, .shop-cat-grandchildren li.current-cat a { color: var(--red, #e02020) !important; } /* Hide the WP widget sidebar blue filter blocks */ .shop-sidebar-widgets, .shop-sidebar [class*="wp-block"], .shop-sidebar .wp-block-woocommerce-filter-wrapper, .shop-sidebar .wc-block-stock-filter, .shop-sidebar .wc-block-price-filter, .shop-sidebar .wc-block-rating-filter, .shop-sidebar .wc-block-attribute-filter, .shop-sidebar .wc-block-active-filters { display: none !important; } /* ── BREADCRUMB ───────────────────────────────────────────── */ .woocommerce-breadcrumb { font-size: 12px !important; color: var(--muted, rgba(255,255,255,0.5)) !important; margin-bottom: 4px !important; } .woocommerce-breadcrumb a { color: rgba(255,255,255,0.55) !important; text-decoration: none !important; transition: color 0.15s !important; } .woocommerce-breadcrumb a:hover { color: var(--red, #e02020) !important; text-decoration: underline !important; } .woocommerce-breadcrumb .breadcrumb-separator, .woocommerce-breadcrumb span[aria-hidden] { color: rgba(255,255,255,0.25) !important; margin: 0 4px !important; } /* ── CATEGORY FILTER CHIPS ───────────────────────────────── */ .vsr-cat-chips { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin-top: 1rem !important; } .vsr-cat-chips-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--muted, rgba(255,255,255,0.5)) !important; margin-right: 4px !important; } .vsr-cat-chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 14px !important; background: var(--bg3, #4e535e) !important; border: 1px solid var(--border, rgba(255,255,255,0.15)) !important; border-radius: 20px !important; color: rgba(255,255,255,0.8) !important; font-size: 12px !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.15s !important; white-space: nowrap !important; } .vsr-cat-chip:hover { background: var(--red, #e02020) !important; border-color: var(--red, #e02020) !important; color: #fff !important; } .vsr-cat-chip.active { background: var(--red, #e02020) !important; border-color: var(--red, #e02020) !important; color: #fff !important; } .vsr-cat-chip .chip-count { background: rgba(0,0,0,0.25) !important; border-radius: 10px !important; padding: 1px 6px !important; font-size: 10px !important; font-weight: 700 !important; color: rgba(255,255,255,0.85) !important; } /* ── ROUTE SHIPPING PROTECTION — CUSTOM SLIDER + SHADOW BOX ── * Confirmed real DOM structure (via DevTools, exact class names): * #RouteWidget * route-protect-widget (custom element, plain light DOM) * div.route-modal[aria-hidden] ← Route's own info popup, leave alone * div.pw-route-protection ← the visible widget boundary * div.pw-variant-optimal-container * div.pw-container * div.pw-variant-optimal[data-container="true"] * div.pw-checkbox-wrapper ← the REAL checkbox lives here * div.pw-title[role="button"] ← "Shipping Protection" text * div.pw-route-logo ← Route's own logo (the grey pill) * span.pw-info-icon ← the (i) info button * div.pw-quote ← the price * ──────────────────────────────────────────────────────────── */ /* Shadow-box container */ #RouteWidget .pw-route-protection { background: #ffffff !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important; border: 1px solid rgba(0,0,0,0.06) !important; padding: 16px !important; margin-bottom: 10px !important; box-sizing: border-box !important; overflow: visible !important; color: #1a1a1a !important; } /* Force readable dark text everywhere inside the visible widget only */ #RouteWidget .pw-route-protection * { color: #1a1a1a !important; } /* Row layout: checkbox + title + logo + info-icon + price, all inline */ #RouteWidget .pw-variant-optimal { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; flex-wrap: wrap !important; } /* Route's own logo (the grey pill) — cap it to a small icon size */ #RouteWidget .pw-route-logo { width: 24px !important; height: 24px !important; max-width: 24px !important; max-height: 24px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; order: 4 !important; } #RouteWidget .pw-route-logo img, #RouteWidget .pw-route-logo svg { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } /* ── CHECKBOX WRAPPER → SLIDER TOGGLE ── * .pw-checkbox-wrapper holds the real . */ #RouteWidget .pw-checkbox-wrapper { flex-shrink: 0 !important; order: 1 !important; display: flex !important; align-items: center !important; } #RouteWidget .pw-checkbox-wrapper input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; accent-color: transparent !important; position: relative !important; width: 42px !important; height: 24px !important; min-width: 42px !important; max-width: 42px !important; border-radius: 24px !important; background: #d0d0d0 !important; background-image: none !important; background-color: #d0d0d0 !important; border: none !important; cursor: pointer !important; outline: none !important; flex-shrink: 0 !important; transition: background 0.2s ease !important; margin: 0 !important; box-sizing: border-box !important; -webkit-print-color-adjust: exact !important; } /* Neutralize Route's own checkmark pseudo-element (it uses ::before for its checkmark icon — we free that up by drawing our knob on ::after instead, and force Route's ::before to render nothing) */ #RouteWidget .pw-checkbox-wrapper input[type="checkbox"]::before { content: '' !important; display: none !important; background: none !important; background-image: none !important; box-shadow: none !important; border: none !important; width: 0 !important; height: 0 !important; } #RouteWidget .pw-checkbox-wrapper input[type="checkbox"]::after { content: '' !important; position: absolute !important; top: 3px !important; left: 3px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; transition: transform 0.2s ease !important; } #RouteWidget .pw-checkbox-wrapper input[type="checkbox"]:checked { background: #e02020 !important; } #RouteWidget .pw-checkbox-wrapper input[type="checkbox"]:checked::after { transform: translateX(18px) !important; } #RouteWidget .pw-checkbox-wrapper input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(224,32,32,0.25) !important; } /* Route's own checkbox label (duplicate checkmark visual) — hide it, our slider track + knob fully replace this */ #RouteWidget .pw-checkout-box-label, #RouteWidget [data-testid="pw-checkbox-label"] { display: none !important; } /* Title text — "Shipping Protection" — grows to fill space */ #RouteWidget .pw-title { font-size: 14px !important; font-weight: 600 !important; color: #1a1a1a !important; flex: 1 1 auto !important; order: 2 !important; cursor: pointer !important; } /* Info icon — small, inline, next to the title */ #RouteWidget .pw-info-icon { flex-shrink: 0 !important; width: 16px !important; height: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 3 !important; cursor: pointer !important; } #RouteWidget .pw-info-icon svg, #RouteWidget .pw-info-icon img { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; } /* Price — right-aligned, last in row */ #RouteWidget .pw-quote { margin-left: auto !important; font-weight: 700 !important; color: #1a1a1a !important; flex-shrink: 0 !important; order: 5 !important; white-space: nowrap !important; } /* Disclaimer paragraph below the toggle row (Route's own real text) */ #RouteWidget .pw-route-protection p { display: block !important; font-size: 12px !important; line-height: 1.5 !important; color: rgba(0,0,0,0.6) !important; margin-top: 8px !important; width: 100% !important; } /* Learn-more link, if Route renders one */ #RouteWidget .pw-route-protection a { color: #e02020 !important; text-decoration: underline !important; } /* Route's own info modal popup — leave fully alone, just ensure it layers correctly above everything if it's ever opened */ #RouteWidget .route-modal[aria-hidden="false"] { z-index: 99999 !important; }