/** * WooCommerce Styles for Vagoteq Theme */ /* ========================================================================== General WooCommerce Styles ========================================================================== */ /* Scope to real WooCommerce pages only — `woocommerce-active` sits on * of every page while the plugin is on, and must not cap the site-wide main. * * The catalog and the item page are excluded: they are built from the Figma * mockups (styles.css) and need full-width sections, which a capped, padded * main cannot give. What is left here is the plugin's own cart / checkout / * account markup, which has no mockup yet. */ .woocommerce .site-main:not(.catalog-page):not(.product-page), .woocommerce-page .site-main:not(.catalog-page):not(.product-page) { max-width: 1200px; margin: 0 auto; padding: 2rem; } /* ========================================================================== Product Grid ========================================================================== */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; list-style: none; padding: 0; margin: 0; } .woocommerce ul.products li.product { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 1rem; text-align: center; transition: all 0.3s ease; position: relative; } .woocommerce ul.products li.product:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-5px); } .woocommerce ul.products li.product img { width: 100%; height: auto; border-radius: 4px; margin-bottom: 1rem; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.125rem; font-weight: 600; margin: 0.5rem 0; color: #333; } .woocommerce ul.products li.product .price { font-size: 1.25rem; font-weight: bold; color: #2c3e50; margin: 0.5rem 0; } .woocommerce ul.products li.product .price del { color: #999; font-size: 1rem; margin-right: 0.5rem; } .woocommerce ul.products li.product .price ins { text-decoration: none; color: #e74c3c; } /* Sale Badge */ .woocommerce span.onsale { position: absolute; top: 1rem; right: 1rem; background: #e74c3c; color: #fff; padding: 0.5rem 1rem; border-radius: 4px; font-weight: bold; font-size: 0.875rem; z-index: 10; } /* Add to Cart Button */ .woocommerce ul.products li.product .button { background: #3498db; color: #fff; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-weight: 600; transition: background 0.3s ease; display: inline-block; margin-top: 1rem; } .woocommerce ul.products li.product .button:hover { background: #2980b9; } .woocommerce ul.products li.product .added_to_cart { display: block; margin-top: 0.5rem; color: #27ae60; font-size: 0.875rem; } /* ========================================================================== Single Product ========================================================================== */ .woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin: 2rem 0; } .woocommerce div.product .woocommerce-product-gallery { position: relative; } .woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; height: auto; border-radius: 8px; } .woocommerce div.product .summary { padding: 1rem; } .woocommerce div.product .product_title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: #2c3e50; } .woocommerce div.product .price { font-size: 2rem; font-weight: bold; color: #2c3e50; margin: 1.5rem 0; } .woocommerce div.product .price del { color: #999; font-size: 1.5rem; } .woocommerce div.product .price ins { text-decoration: none; color: #e74c3c; } .woocommerce div.product .woocommerce-product-details__short-description { margin: 1.5rem 0; font-size: 1rem; line-height: 1.6; color: #666; } /* Add to Cart Form */ .woocommerce div.product form.cart { margin: 2rem 0; } .woocommerce div.product form.cart .quantity { display: inline-block; margin-right: 1rem; } .woocommerce div.product form.cart input.qty { width: 60px; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; text-align: center; font-size: 1rem; } .woocommerce div.product form.cart .single_add_to_cart_button { background: #27ae60; color: #fff; border: none; padding: 1rem 2rem; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 1.125rem; transition: background 0.3s ease; } .woocommerce div.product form.cart .single_add_to_cart_button:hover { background: #229954; } /* Product Meta */ .woocommerce div.product .product_meta { margin: 2rem 0; padding: 1rem; background: #f8f9fa; border-radius: 4px; font-size: 0.875rem; } .woocommerce div.product .product_meta > span { display: block; margin: 0.5rem 0; } /* Tabs */ .woocommerce div.product .woocommerce-tabs { margin: 3rem 0; } .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; padding: 0; margin: 0; display: flex; border-bottom: 2px solid #e5e5e5; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0 1rem 0 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 1rem 1.5rem; text-decoration: none; color: #666; border-bottom: 2px solid transparent; transition: all 0.3s ease; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #3498db; border-bottom-color: #3498db; } .woocommerce div.product .woocommerce-tabs .panel { padding: 2rem 0; } /* ========================================================================== Cart Page ========================================================================== */ .woocommerce table.shop_table { width: 100%; border-collapse: collapse; margin: 2rem 0; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 1rem; border: 1px solid #e5e5e5; text-align: left; } .woocommerce table.shop_table th { background: #f8f9fa; font-weight: 600; } .woocommerce table.shop_table .product-thumbnail img { width: 80px; height: auto; border-radius: 4px; } .woocommerce table.shop_table .product-name a { color: #2c3e50; text-decoration: none; font-weight: 600; } .woocommerce table.shop_table .product-name a:hover { color: #3498db; } .woocommerce table.shop_table input.qty { width: 60px; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; text-align: center; } .woocommerce table.shop_table .product-remove a { color: #e74c3c; font-size: 1.5rem; text-decoration: none; } /* Cart Totals */ .woocommerce .cart-collaterals { margin: 2rem 0; } .woocommerce .cart-collaterals .cart_totals { background: #f8f9fa; padding: 2rem; border-radius: 8px; } .woocommerce .cart-collaterals .cart_totals h2 { margin-top: 0; } /* Checkout Button */ .woocommerce .wc-proceed-to-checkout a.checkout-button { background: #27ae60; color: #fff; padding: 1rem 2rem; border-radius: 4px; text-decoration: none; display: inline-block; font-weight: 600; transition: background 0.3s ease; } .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: #229954; } /* ========================================================================== Breadcrumbs ========================================================================== */ .woocommerce-breadcrumb { margin: 1rem 0; font-size: 0.875rem; color: #666; } .woocommerce-breadcrumb a { color: #3498db; text-decoration: none; } .woocommerce-breadcrumb a:hover { text-decoration: underline; } /* ========================================================================== Messages ========================================================================== */ .woocommerce-message, .woocommerce-info, .woocommerce-error { padding: 1rem 1.5rem; margin: 1rem 0; border-radius: 4px; border-left: 4px solid; } .woocommerce-message { background: #d4edda; border-color: #27ae60; color: #155724; } .woocommerce-info { background: #d1ecf1; border-color: #3498db; color: #0c5460; } .woocommerce-error { background: #f8d7da; border-color: #e74c3c; color: #721c24; } /* ========================================================================== Mini Cart (Header) ========================================================================== */ .site-header-cart { list-style: none; padding: 0; margin: 0; position: relative; } .site-header-cart .cart-contents { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: #2c3e50; padding: 0.5rem 1rem; border-radius: 4px; transition: background 0.3s ease; } .site-header-cart .cart-contents:hover { background: #f8f9fa; } .site-header-cart .cart-contents .amount { font-weight: bold; } .site-header-cart .cart-contents .count { background: #3498db; color: #fff; padding: 0.25rem 0.5rem; border-radius: 12px; font-size: 0.75rem; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .woocommerce div.product { grid-template-columns: 1fr; gap: 2rem; } .woocommerce div.product .product_title { font-size: 1.5rem; } .woocommerce div.product .price { font-size: 1.5rem; } .woocommerce .site-main, .woocommerce-page .site-main { padding: 1rem; } .woocommerce table.shop_table { font-size: 0.875rem; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 0.5rem; } } @media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr; } .woocommerce div.product .woocommerce-tabs ul.tabs { flex-direction: column; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; } }