/* Theme Name: PrintDrop 3D Theme URI: https://printdrop.3d Author: PrintDrop Team Author URI: https://printdrop.3d Description: Custom Theme for PrintDrop 3D Store Version: 1.0 */ /* Colour palette is defined centrally and is Customizer-editable — see printdrop_palette() / printdrop_css_vars_block() in inc/theme-config.php. The :root block is injected into , so all var(--*) below resolve to it. Fallback values are provided inline so the stylesheet still works standalone. */ body { background-color: var(--bg); color: var(--text); font-family: -apple-system, sans-serif; margin: 0; } /* Hide Sidebar/Widgets completely */ #secondary, .widget-area, .sidebar { display: none !important; } /* Fix main content width when sidebar is hidden */ #primary, .content-area { width: 100% !important; max-width: 100% !important; } /* Custom WooCommerce overrides */ .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--accent) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: transparent; border-bottom-color: var(--accent); } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: var(--accent); color: #000; font-weight: bold; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background-color: #fff; color: #000; } /* Global Footer styling */ .printdrop-footer { background: #1a1a20; padding: 60px 24px 30px; border-top: 1px solid rgba(255,255,255,0.15); width: 100%; box-sizing: border-box; } .printdrop-footer .footer-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 36px; } @media (max-width: 760px) { .printdrop-footer .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; text-align: center; } .printdrop-footer .pd-socials { justify-content: center; } .printdrop-footer .footer-col ul li { text-align: center; } } @media (max-width: 460px) { .printdrop-footer .footer-inner { grid-template-columns: 1fr; } } .footer-col h4 { color: #fff; margin-bottom: 20px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: 10px; text-align: left; } .footer-col ul li a { color: #888; text-decoration: none; transition: color 0.3s; } .footer-col ul li a:hover { color: var(--accent); } .footer-bottom { grid-column: 1 / -1; text-align: center; padding-top: 30px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); color: #666; font-size: 0.85rem; } /* WooCommerce Grid Layout Fixes */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 30px !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; background: rgba(15,15,15,0.85); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 15px; text-align: center; transition: transform 0.3s, box-shadow 0.3s; } .woocommerce ul.products li.product:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); } .woocommerce ul.products li.product img { border-radius: 8px; margin-bottom: 15px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { color: #fff !important; font-size: 1.2rem !important; margin-bottom: 10px; } .woocommerce ul.products li.product .price { font-size: 1.1rem !important; font-weight: bold; } .woocommerce-products-header__title.page-title { color: var(--accent); margin-bottom: 30px; } .woocommerce-result-count, .woocommerce-ordering { color: #888; } .woocommerce-ordering select { background: #000; color: #fff; border: 1px solid #333; padding: 8px; border-radius: 4px; } /* Global Header fix for all pages */ body { padding-top: 0 !important; /* Ensure no duplicate padding */ } .navbar { position: fixed !important; top: 0; left: 0; width: 100%; z-index: 9999 !important; /* Force header to top */ background: rgba(30,30,35,0.95) !important; backdrop-filter: blur(10px) !important; border-bottom: 1px solid rgba(255,255,255,0.15) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 15px 50px !important; box-sizing: border-box !important; } /* Reset WooCommerce default styles messing with our grid */ .woocommerce-page .content-area { width: 100% !important; } .woocommerce-page .site-main { width: 100% !important; } .woocommerce ul.products { margin: 0 !important; padding: 0 !important; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; } /* Force WooCommerce product images to have uniform aspect ratio and cover */ .woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img { width: 100% !important; height: 250px !important; object-fit: cover !important; object-position: center !important; border-radius: 8px !important; margin-bottom: 15px !important; background-color: #1a1a1a; /* Placeholder for missing images */ } /* Align WooCommerce product cards uniformly */ .woocommerce ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; } /* Push Add to Cart buttons to the bottom uniformly */ .woocommerce ul.products li.product .button { margin-top: auto !important; align-self: center !important; width: 100% !important; box-sizing: border-box !important; } /* Single Product Page Fixes */ .woocommerce div.product::before, .woocommerce div.product::after { display: none !important; } .woocommerce div.product { background: #fafafa !important; padding: 0 !important; border: none !important; } /* Product Images (Left Side) */ .woocommerce div.product div.images { width: 45% !important; float: none !important; margin: 0 !important; order: 1 !important; background: transparent; } /* Product Summary (Right Side) */ .woocommerce div.product div.summary { width: 50% !important; float: none !important; margin: 0 !important; order: 2 !important; color: #000; } @media(max-width: 768px) { .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100% !important; order: unset; } } .woocommerce div.product div.images img { width: 100% !important; height: auto !important; max-height: 600px; object-fit: contain; border-radius: 0; box-shadow: none; } /* Gallery Slider Thumbnails */ .woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 10px; margin-top: 15px; padding: 0; list-style: none; } .woocommerce div.product div.images .flex-control-thumbs li { width: 25%; } .woocommerce div.product div.images .flex-control-thumbs li img { cursor: pointer; opacity: 0.6; transition: opacity 0.3s; border: 1px solid transparent; } .woocommerce div.product div.images .flex-control-thumbs li img:hover, .woocommerce div.product div.images .flex-control-thumbs li img.flex-active { opacity: 1; border: 1px solid var(--accent); } .woocommerce div.product .product_title { color: #000 !important; font-size: 1.8rem !important; margin-bottom: 5px !important; text-transform: none; font-weight: 600; } .woocommerce div.product .price { font-size: 1.6rem !important; color: #000 !important; font-weight: 700; margin-bottom: 20px !important; margin-top: 15px !important; } /* Beautiful Add to Cart / Quantity Layout */ .woocommerce div.product form.cart { margin-top: 20px !important; padding-top: 0 !important; border-top: none; } .woocommerce div.product form.cart .variations { width: 100%; margin-bottom: 20px; } .woocommerce div.product form.cart .variations select { background: #fff; color: #000; border: 1px solid #ccc; padding: 12px 15px; border-radius: 0; width: 100%; font-size: 1rem; appearance: auto; } .woocommerce div.product form.cart .variations label { color: #333; font-weight: normal; display: block; margin-bottom: 5px; font-size: 0.9rem; text-align: left; } .woocommerce div.product form.cart .quantity { display: flex; align-items: center; background: #fff; border: 1px solid #000; border-radius: 0; height: 50px; padding: 0 5px; width: 80px; justify-content: center; } .woocommerce div.product form.cart .quantity::before { display: none; } .woocommerce div.product form.cart .quantity input.qty { width: 100% !important; height: 100% !important; background: transparent !important; color: #000 !important; border: none !important; text-align: center; font-size: 1.1rem; padding: 0; } /* Style spin buttons */ .woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button, .woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { opacity: 1; } .woocommerce div.product form.cart .single_add_to_cart_button { flex-grow: 1; height: 50px; padding: 0 30px !important; font-size: 1rem !important; border-radius: 0 !important; background: #000 !important; color: #fff !important; font-weight: 600 !important; text-transform: none; letter-spacing: 0; transition: all 0.3s; border: 1px solid #000; cursor: pointer; } .woocommerce div.product form.cart .single_add_to_cart_button:hover { background: #333 !important; } .woocommerce div.product .woocommerce-product-details__short-description { line-height: 1.6; color: #333; font-size: 1rem; margin-bottom: 20px; } /* Hide duplicate descriptions/tabs at the bottom */ .woocommerce div.product .woocommerce-tabs { width: 100% !important; margin-top: 40px !important; } .woocommerce div.product .woocommerce-tabs h2 { color: var(--accent-2); } /* Hide duplicate WooCommerce Page Titles */ .woocommerce-products-header__title.page-title { display: none !important; } .woocommerce-breadcrumb { display: none !important; } /* Hide WordPress Site Title if it shows up globally in main content */ .site-title, .site-description { display: none !important; } .woocommerce div.product form.cart table.variations th, .woocommerce div.product form.cart table.variations td { display: block; padding: 0; } .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 15px; align-items: stretch; margin-top: 20px; width: 100%; } .woocommerce div.product form.cart .quantity { height: 50px; } /* Natural Page Layout spacing */ html, body { height: 100%; } body { display: flex; flex-direction: column; } main { flex: 1 0 auto; } .printdrop-footer { flex-shrink: 0; margin-top: 0; } /* --- HAWESKO STYLE REPLICATION FOR SINGLE PRODUCT --- */ .woocommerce div.product { background: #fafafa !important; padding: 0 !important; border: none !important; } /* Image Container */ .woocommerce div.product div.images { width: 50% !important; background: #fafafa !important; padding: 40px !important; text-align: center; } .woocommerce div.product div.images img { mix-blend-mode: multiply; /* Removes white background from jpgs if needed */ } /* Summary Right Column */ .woocommerce div.product div.summary { width: 45% !important; background: #fff !important; padding: 40px !important; color: #000 !important; border-left: 1px solid #eee; min-height: 600px; } /* Star Rating & Sharing mockup (Native Woo Commerce rating integration) */ .woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; margin-bottom: 20px !important; font-size: 0.9rem; color: #000; } .woocommerce div.product .woocommerce-product-rating .star-rating { color: #000; } .woocommerce div.product .woocommerce-review-link { background: #eee; padding: 2px 8px; border-radius: 4px; text-decoration: none; color: #000; margin-left: 10px; } /* Title */ .woocommerce div.product .product_title { font-size: 1.6rem !important; font-weight: 700 !important; margin-bottom: 5px !important; } /* Price */ .woocommerce div.product .price { font-size: 1.8rem !important; margin-top: 30px !important; margin-bottom: 5px !important; } .woocommerce div.product .price .amount { color: #000 !important; } /* Add to Cart row */ .woocommerce div.product form.cart { margin-top: 30px !important; } .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: 15px; margin-top: 15px; } .woocommerce div.product form.cart .quantity { width: 70px !important; border: 1px solid #ccc !important; border-radius: 4px !important; } .woocommerce div.product form.cart .single_add_to_cart_button { background: #000 !important; color: #fff !important; border-radius: 4px !important; font-weight: bold !important; flex-grow: 1; } /* Fake Details below Add to Cart (Mockup elements from screenshot) */ .product-extra-info { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; font-size: 0.9rem; color: #000; line-height: 1.8; } .product-extra-info ul { list-style: none; padding: 0; margin-top: 15px; } .product-extra-info ul li { position: relative; padding-left: 25px; margin-bottom: 10px; } .product-extra-info ul li::before { content: "✓"; position: absolute; left: 0; color: #000; } /* Description Block at the bottom */ .woocommerce div.product .woocommerce-tabs { display: block !important; width: 100% !important; background: #fff; padding: 40px; margin-top: 40px !important; border-top: 1px solid #eee; } .woocommerce div.product .woocommerce-tabs h2 { color: #000 !important; font-size: 1.5rem !important; margin-bottom: 20px !important; } /* --- EXACT HAWESKO LAYOUT REPLICATION --- */ .hawesko-layout { background: #ffffff !important; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px 0; } /* Hide breadcrumbs since they are not in the screenshot at top */ .hawesko-breadcrumbs { display: none; } .hawesko-top-row { display: flex; justify-content: space-between; gap: 8%; margin-bottom: 50px; } /* Image Column */ .hawesko-image-col { width: 54%; background: #f4f4f4; /* Light gray background like screenshot */ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; } .hawesko-image-col .woocommerce-product-gallery { width: 100% !important; margin: 0 !important; } .hawesko-image-col .woocommerce-product-gallery__image img { max-height: 500px; object-fit: contain; mix-blend-mode: multiply; margin: 0 auto; display: block; } .hawesko-image-col .flex-control-thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 30px; padding: 0; list-style: none; } .hawesko-image-col .flex-control-thumbs li { width: 50px; } .hawesko-image-col .flex-control-thumbs li img { cursor: pointer; opacity: 0.5; transition: opacity 0.3s; border: 1px solid transparent; } .hawesko-image-col .flex-control-thumbs li img:hover, .hawesko-image-col .flex-control-thumbs li img.flex-active { opacity: 1; border: 1px solid #ccc; } /* Summary Column */ .hawesko-summary-col { width: 38%; display: flex; flex-direction: column; padding-top: 10px; } .hawesko-meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; font-size: 0.85rem; } .hawesko-rating { display: flex; align-items: center; gap: 5px; } .hawesko-rating .stars { font-size: 1rem; letter-spacing: 2px; } .hawesko-rating .count { color: #666; } .hawesko-review-btn { background: #eaeaea; padding: 2px 8px; border-radius: 2px; font-weight: normal; color: #333; cursor: pointer; margin-left: 5px; } .hawesko-actions { display: flex; gap: 15px; font-size: 1.2rem; color: #000; } .hawesko-title { font-size: 1.5rem !important; font-weight: 700 !important; margin: 0 0 5px 0 !important; color: #000 !important; line-height: 1.2 !important; } .hawesko-subtitle { font-size: 1rem; color: #000; margin-bottom: 40px; line-height: 1.4; } .hawesko-price-box { margin-bottom: 20px; } .hawesko-price-main { font-size: 1.7rem; font-weight: 800; color: #000; } .hawesko-price-sub { font-size: 0.75rem; color: #666; line-height: 1.4; } .hawesko-price-sub a { color: #000; text-decoration: underline; } /* Cart box */ .hawesko-cart-box form.cart { margin: 0 !important; padding: 0 !important; border: none !important; } .hawesko-cart-box table.variations { width: 100% !important; margin-bottom: 10px !important; } .hawesko-cart-box table.variations td { padding: 0 !important; display: block !important; } .hawesko-cart-box table.variations label { display: none !important; /* Hide label */ } .hawesko-cart-box table.variations select { width: 100%; padding: 10px; border: 1px solid #ccc; background: #fff; color: #000; font-size: 0.95rem; appearance: auto; border-radius: 2px; } .hawesko-cart-box .woocommerce-variation-add-to-cart { display: flex; gap: 15px; align-items: stretch; margin-top: 15px !important; } .hawesko-cart-box .quantity { width: 70px !important; height: 45px !important; background: #fff !important; border: 1px solid #ccc !important; border-radius: 2px !important; display: flex; justify-content: center; padding: 0 !important; } .hawesko-cart-box .quantity::before { display: none !important; } .hawesko-cart-box .quantity input.qty { width: 100% !important; height: 100% !important; text-align: center; font-size: 1rem; border: none !important; background: transparent !important; color: #000 !important; } .hawesko-cart-box button.single_add_to_cart_button { flex-grow: 1; height: 45px !important; background: #000 !important; color: #fff !important; border: none !important; border-radius: 2px !important; font-weight: bold !important; font-size: 0.95rem !important; cursor: pointer; } /* Logistics Info */ .hawesko-logistics { margin-top: 25px; font-size: 0.85rem; color: #000; } .hawesko-link { text-decoration: underline; color: #000; display: inline-block; margin-bottom: 15px; } .hawesko-vendor { margin-bottom: 20px; } .hawesko-delivery-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; line-height: 1.5; } .hawesko-delivery-col-left { color: #333; } .delivery-date-green { color: #5b9b22; } .hawesko-delivery-col-right { font-weight: normal; color: #333; display: flex; align-items: center; } .hawesko-delivery-col-right .green-dot { display: inline-block; width: 8px; height: 8px; background: #5b9b22; border-radius: 50%; margin-right: 5px; } .hawesko-benefits-box { background: #f8f8f8; padding: 15px 20px; border-radius: 2px; } .hawesko-benefits-box ul { list-style: none; margin: 0; padding: 0; } .hawesko-benefits-box ul li { display: flex; align-items: center; margin-bottom: 10px; color: #333; font-size: 0.85rem; } .hawesko-benefits-box ul li:last-child { margin-bottom: 0; } /* Bottom Row (Description) */ .hawesko-bottom-row { margin-top: 40px; } .hawesko-desc-title { font-size: 1.6rem !important; font-weight: 800 !important; margin-bottom: 25px !important; color: #000 !important; } .hawesko-desc-grid { display: flex; gap: 5%; } .hawesko-desc-specs { width: 30%; } .hawesko-desc-specs .spec-header { font-size: 0.75rem; color: #666; margin-bottom: 15px; } .hawesko-desc-specs .spec-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .hawesko-desc-specs .spec-box { background: #f4f4f4; padding: 15px 10px; font-size: 0.75rem; display: flex; flex-direction: column; } .hawesko-desc-specs .spec-box .spec-label { color: #333; margin-bottom: 5px; } .hawesko-desc-specs .spec-box .spec-val { color: #000; font-weight: 700; } .hawesko-desc-text { width: 65%; font-size: 0.95rem; color: #333; line-height: 1.6; } .hawesko-desc-text h3 { font-size: 1.1rem; font-weight: 700; color: #000; margin-bottom: 15px; } .hawesko-desc-text p { margin-bottom: 15px; } @media(max-width: 768px) { .hawesko-top-row { flex-direction: column; } .hawesko-image-col, .hawesko-summary-col { width: 100%; } .hawesko-desc-grid { flex-direction: column; } .hawesko-desc-specs, .hawesko-desc-text { width: 100%; } .hawesko-desc-text { margin-top: 30px; } } /* Cleanup standard woo layout blocks */ .woocommerce div.product { display: block !important; padding: 0 !important; background: transparent !important; } .woocommerce div.product div.images, .woocommerce div.product div.summary { display: none !important; } /* Hide standard woo divs if they somehow bleed through */ .hawesko-layout .woocommerce-product-gallery { display: block !important; } /* Except inside our custom wrapper */ /* ============================================================ DARK INFO / LEGAL PAGES (Impressum, AGB, Datenschutz, Widerruf, Kontakt) The Astra global stylesheet (loaded via wp_head) overrides the body text colour to dark slate, making text on our dark theme unreadable. Force light text on the dark content boxes. ============================================================ */ .page-content, .page-content p, .page-content li, .page-content td, .page-content span, .page-content label { color: #e6e6e6 !important; } .page-content h2, .page-content h3, .page-content h4, .page-content strong { color: #ffffff !important; } .page-content a { color: var(--accent) !important; } .page-content input, .page-content textarea { color: #ffffff !important; background: #000 !important; border: 1px solid #333 !important; } .page-content input::placeholder, .page-content textarea::placeholder { color: #888 !important; } /* Page title on dark info pages (Astra clobbers var(--accent), so use a literal). Scoped to non-WooCommerce pages so cart/checkout titles stay dark. */ body.page:not(.woocommerce-page) main > .container > h1 { color: #00e5ff !important; } /* ============================================================ COMMERCE SURFACES — light & readable (cart / checkout / account) Fixes dark-on-dark text on WooCommerce functional pages. ============================================================ */ .woo-page, .woo-page p, .woo-page li, .woo-page td, .woo-page th, .woo-page label, .woo-page h1, .woo-page h2, .woo-page h3, .woo-page h4, .woo-page .woocommerce, .woo-page .woocommerce-info, .woo-page .order-total, .woo-page address { color: #1c1c1c !important; } .woo-page a { color: #0a7ea4; } .woo-page .woo-page-title { color: #111 !important; font-size: 2rem; font-weight: 800; margin: 0 0 30px; text-transform: none; letter-spacing: -0.5px; } /* Tables (cart items, order review, account orders) */ .woo-page table.shop_table, .woo-page table.woocommerce-orders-table, .woo-page table.cart { background: #fff !important; border: 1px solid #e6e6e6 !important; border-radius: 10px !important; border-collapse: separate !important; overflow: hidden; width: 100%; } .woo-page table.shop_table th { background: #f6f6f6 !important; color: #111 !important; font-weight: 700; padding: 16px !important; border: none !important; } .woo-page table.shop_table td { background: #fff !important; padding: 16px !important; border-top: 1px solid #f0f0f0 !important; color: #1c1c1c !important; } .woo-page table.shop_table td a, .woo-page table.cart td a { color: #111 !important; font-weight: 600; } .woo-page .product-thumbnail img { width: 56px; border-radius: 6px; } /* Cart totals / order review boxes */ .woo-page .cart_totals, .woo-page .cart-collaterals .cart_totals { background: #fff !important; border: 1px solid #e6e6e6 !important; border-radius: 10px; padding: 24px !important; } .woo-page .cart_totals h2, .woo-page #order_review_heading { color: #111 !important; } /* Form fields */ .woo-page input[type="text"], .woo-page input[type="email"], .woo-page input[type="tel"], .woo-page input[type="password"], .woo-page input[type="number"], .woo-page textarea, .woo-page select, .woo-page .select2-selection { background: #fff !important; color: #1c1c1c !important; border: 1px solid #cfcfcf !important; border-radius: 6px !important; padding: 10px 12px !important; } .woo-page input:focus, .woo-page textarea:focus, .woo-page select:focus { border-color: var(--accent) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(0,176,200,0.15) !important; } .woo-page .required { color: #c0392b; } /* Info / message banners — compact, single-line toast style */ .woo-page .woocommerce-message, .woo-page .woocommerce-info, .woo-page .woocommerce-error { display: flex !important; align-items: center !important; gap: 12px; background: #f4fbfd !important; border: 1px solid #cdeef5 !important; border-left: 4px solid var(--accent) !important; color: #1c1c1c !important; border-radius: 8px; padding: 12px 16px !important; margin: 0 0 12px !important; font-size: 0.92rem; line-height: 1.3; min-height: 0 !important; list-style: none !important; } .woo-page .woocommerce-message::before, .woo-page .woocommerce-info::before, .woo-page .woocommerce-error::before { position: static !important; margin: 0 !important; color: var(--accent) !important; font-size: 1.1rem; line-height: 1; } .woo-page .woocommerce-message a, .woo-page .woocommerce-info a { color: #0a7ea4 !important; } /* The inline "View cart" button inside a message: small & subtle */ .woo-page .woocommerce-message .button, .woo-page .woocommerce-message a.button { margin: 0 0 0 auto !important; padding: 7px 14px !important; font-size: 0.82rem !important; background: #fff !important; color: #0a7ea4 !important; border: 1px solid var(--accent) !important; white-space: nowrap; flex: 0 0 auto; } .woo-page .woocommerce-message .button:hover { background: var(--accent) !important; color: #002b33 !important; } /* Primary buttons on commerce pages: accent, high-contrast */ .woo-page .button, .woo-page button.button, .woo-page input.button, .woo-page #place_order, .woo-page .checkout-button { background: var(--accent) !important; color: #002b33 !important; font-weight: 700 !important; border: none !important; border-radius: 8px !important; padding: 14px 26px !important; text-transform: none !important; letter-spacing: 0 !important; transition: filter 0.2s, transform 0.1s; box-sizing: border-box !important; max-width: 100% !important; } .woo-page .button:hover, .woo-page #place_order:hover, .woo-page .checkout-button:hover { filter: brightness(1.08); transform: translateY(-1px); } .woo-page #place_order, .woo-page .checkout-button { font-size: 1.05rem !important; width: 100%; } /* Secondary (update cart / coupon) buttons: outline style */ .woo-page button[name="update_cart"], .woo-page button[name="apply_coupon"] { background: #fff !important; color: #111 !important; border: 1px solid #cfcfcf !important; } /* Coupon field: larger, comfortable input */ .woo-page .coupon { display: flex !important; gap: 10px; align-items: stretch; flex: 1; } .woo-page .coupon input#coupon_code, .woo-page input#coupon_code { min-width: 240px !important; width: auto !important; flex: 1 1 auto !important; height: 46px !important; padding: 10px 14px !important; font-size: 0.95rem !important; } .woo-page .coupon button[name="apply_coupon"] { height: 46px !important; white-space: nowrap; } /* ============================================================ SHOP GRID — light, modern product cards (consistent w/ product page) ============================================================ */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: #ffffff !important; border: 1px solid #ececec !important; border-radius: 14px !important; padding: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04); text-align: left !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.10) !important; border-color: #dcdcdc !important; } .woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img { height: 230px !important; border-radius: 10px !important; background-color: #f4f4f4 !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { color: #1a1a1a !important; font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.3 !important; padding: 4px 4px 6px !important; min-height: 2.6em; } .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price .amount { color: #111 !important; font-size: 1.25rem !important; font-weight: 800 !important; padding: 0 4px; } .woocommerce ul.products li.product .price del { color: #999 !important; font-weight: 400; } .woocommerce ul.products li.product .price ins { text-decoration: none; } /* Tax / shipping note under price */ .woocommerce ul.products li.product .price small, .woocommerce ul.products li.product .wc-gzd-additional-info, .woocommerce ul.products li.product .price .woocommerce-price-suffix { display: block; color: #888 !important; font-size: 0.72rem !important; font-weight: 400 !important; } /* Variation "options on product page" notice */ .woocommerce ul.products li.product .button + p, .woocommerce ul.products li.product .stock, .woocommerce-variation-availability { color: #888 !important; font-size: 0.8rem; } /* Loop add-to-cart button: accent, full width, dark text */ .woocommerce ul.products li.product .button { background: var(--accent) !important; color: #002b33 !important; font-weight: 700 !important; border-radius: 8px !important; padding: 12px 16px !important; margin-top: 14px !important; text-transform: none !important; letter-spacing: 0 !important; border: none !important; transition: filter 0.2s, transform 0.1s; } .woocommerce ul.products li.product .button:hover { filter: brightness(1.08); transform: translateY(-1px); background: var(--accent) !important; color: #002b33 !important; } /* Shop header: readable on white */ .woo-main-wrapper .woocommerce-result-count, .woocommerce-result-count { color: #555 !important; } .woo-main-wrapper .woocommerce-ordering select, .woocommerce-ordering select { background: #fff !important; color: #111 !important; border: 1px solid #cfcfcf !important; border-radius: 6px !important; } /* Shop page heading (Shop) */ .woo-main-wrapper .page-title, .woocommerce-products-header { color: #111; } /* ============================================================ PRODUCT GALLERY — robust, flexslider-independent rendering Flexslider collapses slides to 0px width inside the flex column, leaving the main image invisible. Force a reliable static layout: first image large, remaining as a clickable thumbnail strip. ============================================================ */ /* Defeat the global `.woocommerce div.product div.images { display:none }` rule (the gallery carries the `images` class and was hidden by higher specificity). */ .woocommerce div.product .hawesko-image-col div.woocommerce-product-gallery.images { display: block !important; width: 100% !important; max-width: 100% !important; } .hawesko-image-col .woocommerce-product-gallery, .hawesko-image-col .flex-viewport, .hawesko-image-col .woocommerce-product-gallery__wrapper { width: 100% !important; max-width: 100% !important; height: auto !important; transform: none !important; transition: none !important; overflow: visible !important; } /* Base: show only the first slide (no-JS / single-image case) */ .hawesko-image-col .woocommerce-product-gallery__image { width: 100% !important; float: none !important; position: static !important; opacity: 1 !important; display: none !important; margin: 0 !important; } .hawesko-image-col .woocommerce-product-gallery__image:first-child { display: block !important; } /* When our JS switcher is active, visibility is driven solely by .pd-active */ .hawesko-image-col.pd-js .woocommerce-product-gallery__image { display: none !important; } .hawesko-image-col.pd-js .woocommerce-product-gallery__image.pd-active { display: block !important; } /* Force the actual image to fill the column (override inline width:0) */ .hawesko-image-col .woocommerce-product-gallery__image img, .hawesko-image-col .woocommerce-product-gallery img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 480px; object-fit: contain; display: block !important; margin: 0 auto !important; mix-blend-mode: multiply; } /* Hide flexslider's own (broken) thumbnail nav; we render our own */ .hawesko-image-col .flex-control-nav, .hawesko-image-col .flex-control-thumbs { display: none !important; } /* Our reliable thumbnail strip */ .pd-thumbs { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; } .pd-thumbs img { width: 64px !important; height: 64px !important; max-width: 64px !important; object-fit: cover !important; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; background: #fff; mix-blend-mode: normal !important; } .pd-thumbs img:hover, .pd-thumbs img.pd-thumb-active { opacity: 1; border-color: var(--accent); } /* ============================================================ PRODUCT ICONS — share / wishlist buttons & benefit list icons ============================================================ */ .hawesko-actions { display: flex; gap: 8px; } .hawesko-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #e2e2e2; border-radius: 50%; background: #fff; color: #444; cursor: pointer; transition: color 0.2s, border-color 0.2s, transform 0.1s; } .hawesko-icon-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); } .hawesko-icon-btn:last-child:hover { color: #e0245e; border-color: #e0245e; } /* heart → red */ .hawesko-benefits-box ul li { display: flex; align-items: center; gap: 10px; } .benefit-icon { color: var(--accent); flex-shrink: 0; } /* ============================================================ PRODUCT REVIEWS — star-only rating form, on the light product page ============================================================ */ .hawesko-reviews-row { color: #1c1c1c; } .hawesko-reviews-row .comment-form-rating label { font-weight: 600; color: #222; display: block; margin-bottom: 6px; } /* Clickable star selector (WooCommerce converts the