/* * IQRA Publishing Ltd — WooCommerce Style Overrides * Trade Mark No: UK00004302835 * * This file overrides WooCommerce default styles to match * the exact IQRA gold/black luxury design system. * It is loaded AFTER woocommerce-general.css so it wins. */ /* ── WC GLOBAL RESETS ── */ /* :not(body) added 17 July 2026 — WooCommerce puts the "woocommerce" class on itself on shop/category pages, so the bare .woocommerce selector was capping the WHOLE PAGE at 1400px with 24px padding. That stole 48px from the sticky nav and tipped it into two rows on every WC page, while the homepage (no woocommerce body class) stayed on one. Every WC template caps its own content already (900px–1400px), so body never needed this. */ .woocommerce-page .woocommerce, .woocommerce:not(body) { max-width: 1400px; margin: 0 auto; padding: 0 24px; } .woocommerce-notices-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 24px; } /* ── WC BUTTONS → match .bG pill style ── */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .cart .button, .woocommerce .cart input.button { background: linear-gradient(130deg, #7a5a18, #c9a84c, #f5d980, #c9a84c, #7a5a18) !important; background-size: 300% !important; color: #080600 !important; font-family: 'Inter', sans-serif !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; padding: 12px 26px !important; border: none !important; border-radius: 40px !important; box-shadow: 0 6px 22px rgba(201,168,76,.38), 0 2px 8px rgba(0,0,0,.5) !important; transition: all .3s cubic-bezier(.23,1,.32,1) !important; text-decoration: none !important; cursor: pointer !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background-position: right !important; box-shadow: 0 14px 38px rgba(201,168,76,.6), 0 6px 16px rgba(0,0,0,.55) !important; transform: translateY(-3px) !important; color: #080600 !important; } /* Alt (outline) button */ .woocommerce a.button.alt, .woocommerce button.button.alt { background: transparent !important; border: 1px solid #c9a84c !important; color: #c9a84c !important; box-shadow: none !important; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: rgba(201,168,76,.1) !important; color: #c9a84c !important; } /* ── WC PRODUCT GRID ── */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; margin: 0 !important; padding: 2rem 0 !important; list-style: none !important; } @media (max-width: 780px) { .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; } } @media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr !important; } } /* ── WC PRODUCT CARD ── */ .woocommerce ul.products li.product { background: rgba(18,18,14,.95) !important; border: 1px solid rgba(255,223,122,.55) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 0 0 1px rgba(255,223,122,.12), 0 8px 18px rgba(0,0,0,.85), 0 20px 48px rgba(0,0,0,.78) !important; transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s, border-color .25s !important; transform: perspective(900px) !important; padding: 0 !important; margin: 0 !important; } .woocommerce ul.products li.product:hover { border-color: #FFDF7A !important; box-shadow: 0 0 0 2px #FFDF7A, 0 0 30px rgba(255,223,122,.52), 0 0 60px rgba(255,223,122,.22), 0 20px 42px rgba(0,0,0,.95), 0 42px 80px rgba(0,0,0,.9) !important; transform: perspective(900px) rotateX(2deg) rotateY(-1deg) translateY(-10px) scale(1.02) !important; } body.day .woocommerce ul.products li.product { background: rgba(255,254,248,.97) !important; border-color: rgba(140,100,20,.45) !important; } body.day .woocommerce ul.products li.product:hover { border-color: rgba(140,100,20,.9) !important; box-shadow: 0 0 0 2px rgba(140,100,20,.82), 0 8px 20px rgba(100,70,10,.28), 0 24px 52px rgba(80,55,5,.38) !important; } /* WC product image */ .woocommerce ul.products li.product a img { width: 100% !important; height: 180px !important; object-fit: cover !important; border-radius: 14px 14px 0 0 !important; display: block !important; } /* WC product title */ .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; padding: 14px 12px 2px !important; margin: 0 !important; } body.day .woocommerce ul.products li.product .woocommerce-loop-product__title { color: #111108 !important; } /* WC price */ .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 15px !important; font-weight: 600 !important; color: #c9a84c !important; padding: 0 12px 8px !important; display: block !important; } /* ── SINGLE PRODUCT PAGE ── */ .woocommerce div.product { background: transparent !important; padding: 48px 0 0 !important; } .woocommerce div.product .product_title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 38px !important; font-weight: 300 !important; color: #f5d980 !important; margin-bottom: 8px !important; background: linear-gradient(110deg,#7a5a18,#c9a84c,#f5d980,#ffe9a0,#c9a84c,#7a5a18); background-size: 260% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.day .woocommerce div.product .product_title { color: #7a5a18 !important; } .woocommerce div.product .woocommerce-product-gallery { border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 18px 48px rgba(0,0,0,.7) !important; } .woocommerce div.product p.stock { color: #c9a84c !important; font-size: 11px !important; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--tx3) !important; font-size: 12px !important; line-height: 1.9 !important; margin-bottom: 18px !important; } /* Add to cart quantity */ .woocommerce div.product form.cart .qty { border: 1px solid rgba(255,223,122,.55) !important; border-radius: 40px !important; background: rgba(18,18,14,.95) !important; color: #fff !important; padding: 8px 16px !important; width: 72px !important; text-align: center !important; } body.day .woocommerce div.product form.cart .qty { background: #fff !important; color: #111 !important; } /* ── CART PAGE ── */ .woocommerce-cart .woocommerce-cart-form { background: transparent !important; } .woocommerce table.shop_table { border: 1px solid rgba(255,223,122,.55) !important; border-radius: 14px !important; overflow: hidden !important; background: rgba(18,18,14,.95) !important; border-collapse: separate !important; border-spacing: 0 !important; } .woocommerce table.shop_table th { background: rgba(14,14,10,.98) !important; color: #c9a84c !important; font-size: 8px !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 14px 12px !important; border-bottom: 1px solid rgba(255,223,122,.22) !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; } .woocommerce table.shop_table td { color: #fff !important; border-bottom: 1px solid rgba(255,223,122,.1) !important; padding: 14px 12px !important; vertical-align: middle !important; } body.day .woocommerce table.shop_table { background: rgba(255,254,248,.97) !important; } body.day .woocommerce table.shop_table td { color: #111 !important; } .woocommerce-cart-form input[name="update_cart"] { opacity: .6 !important; } .cart_totals h2 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 22px !important; color: #c9a84c !important; margin-bottom: 16px !important; } .woocommerce .cart_totals .order-total .amount { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 22px !important; font-weight: 600 !important; color: #f5d980 !important; } /* ── CHECKOUT PAGE ── */ .woocommerce-checkout #payment { background: transparent !important; } .woocommerce form .form-row label { color: var(--tx3) !important; font-size: 9px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid rgba(255,223,122,.55) !important; border-radius: 40px !important; background: rgba(18,18,14,.95) !important; color: #fff !important; font-family: 'Inter', sans-serif !important; padding: 11px 18px !important; } .woocommerce form .form-row textarea { border-radius: 20px !important; } .woocommerce form .form-row select { border-radius: 40px !important; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: #c9a84c !important; outline: none !important; } body.day .woocommerce form .form-row input.input-text, body.day .woocommerce form .form-row textarea { background: #fff !important; color: #111 !important; } /* Payment box */ #payment .payment_methods li { background: rgba(18,18,14,.95) !important; border: 1px solid rgba(255,223,122,.22) !important; border-radius: 14px !important; margin-bottom: 8px !important; padding: 12px 16px !important; color: #fff !important; } #payment .payment_methods li label { color: #fff !important; font-size: 12px !important; } body.day #payment .payment_methods li { background: #fff !important; } body.day #payment .payment_methods li label { color: #111 !important; } /* Order review table */ #order_review .shop_table { background: rgba(18,18,14,.95) !important; } .woocommerce-checkout #payment #place_order { background: linear-gradient(130deg, #7a5a18, #c9a84c, #f5d980, #c9a84c, #7a5a18) !important; background-size: 300% !important; border-radius: 40px !important; color: #080600 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; padding: 16px 36px !important; border: none !important; width: 100% !important; cursor: pointer !important; transition: all .3s cubic-bezier(.23,1,.32,1) !important; box-shadow: 0 6px 22px rgba(201,168,76,.38) !important; margin-top: 12px !important; } .woocommerce-checkout #payment #place_order:hover { background-position: right !important; box-shadow: 0 14px 38px rgba(201,168,76,.6) !important; transform: translateY(-3px) !important; } /* ── MY ACCOUNT PAGE ── */ .woocommerce-account .woocommerce-MyAccount-navigation { background: rgba(18,18,14,.95) !important; border: 1px solid rgba(255,223,122,.55) !important; border-radius: 14px !important; padding: 16px !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: var(--tx3) !important; text-decoration: none !important; font-size: 9px !important; letter-spacing: 2px !important; text-transform: uppercase !important; display: block !important; padding: 8px 4px !important; border-bottom: 1px solid rgba(255,223,122,.1) !important; transition: color .2s !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover, .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: #f5d980 !important; } /* ── NOTICES & MESSAGES ── */ .woocommerce-message, .woocommerce-info { background: rgba(201,168,76,.1) !important; border-top-color: #c9a84c !important; color: #c9a84c !important; border-radius: 0 0 14px 14px !important; } .woocommerce-error { background: rgba(200,50,50,.1) !important; border-top-color: #c05050 !important; color: #ff9090 !important; border-radius: 0 0 14px 14px !important; } .woocommerce-message a.button, .woocommerce-info a.button { background: transparent !important; border: 1px solid #c9a84c !important; color: #c9a84c !important; font-size: 8px !important; padding: 6px 14px !important; } /* ── BREADCRUMB ── */ .woocommerce-breadcrumb { font-size: 9px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--tx4) !important; padding: 12px 0 !important; } .woocommerce-breadcrumb a { color: #c9a84c !important; text-decoration: none !important; } /* ── PAGINATION ── */ .woocommerce-pagination ul li a, .woocommerce-pagination ul li span { border: 1px solid rgba(255,223,122,.55) !important; border-radius: 40px !important; color: #c9a84c !important; background: transparent !important; min-width: 36px !important; text-align: center !important; padding: 6px 12px !important; margin: 2px !important; transition: all .2s !important; } .woocommerce-pagination ul li a:hover, .woocommerce-pagination ul li span.current { background: #c9a84c !important; color: #080600 !important; } /* ── STAR RATINGS ── */ .woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: #c9a84c !important; } .woocommerce .star-rating { color: #c9a84c !important; } /* ── RELATED PRODUCTS ── */ .related.products h2, .upsells.products h2 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 28px !important; font-weight: 600 !important; color: #c9a84c !important; margin-bottom: 24px !important; background: linear-gradient(110deg,#7a5a18,#c9a84c,#f5d980,#ffe9a0,#c9a84c,#7a5a18); background-size: 260% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── REMOVE WC SIDEBAR / UNWANTED ELEMENTS ── */ .woocommerce-page .widget_shopping_cart_content { display: none; }