/* ========================================================================== Axis East — WooCommerce Theme Styles Matches the Axis East visual identity: green primary, gold secondary, Cairo typography, card-based design system, RTL-first. ========================================================================== */ /* -------------------------------------------------------------------------- 0. CSS Custom Properties (inherits from theme.json / style.css) -------------------------------------------------------------------------- */ :root { --axe-wc-primary: var(--axiseast-primary, #0d7a4b); --axe-wc-primary-dark: #093f29; --axe-wc-primary-bright: #0f915a; --axe-wc-primary-soft: #e8f3ed; --axe-wc-secondary: var(--axiseast-secondary, #d4af37); --axe-wc-secondary-light: #f0d879; --axe-wc-tertiary: var(--axiseast-tertiary, #aa4e52); --axe-wc-dark: var(--axiseast-neutral, #222222); --axe-wc-muted: #5f6761; --axe-wc-surface: var(--axiseast-surface, #eceaea); --axe-wc-card: var(--axiseast-card, #f7f5f5); --axe-wc-white: #ffffff; --axe-wc-border: #e4e9e6; --axe-wc-radius: 14px; --axe-wc-radius-lg: 18px; --axe-wc-radius-pill: 50px; --axe-wc-font: var(--wp--preset--font-family--cairo, 'Cairo', sans-serif); --axe-wc-font-label: var(--wp--preset--font-family--ibm-plex-sans, 'IBM Plex Sans', 'Cairo', sans-serif); --axe-wc-shadow: 0 2px 8px rgba(34, 34, 34, 0.04), 0 4px 16px rgba(34, 34, 34, 0.06); --axe-wc-shadow-hover: 0 8px 24px rgba(13, 122, 75, 0.10), 0 16px 40px rgba(34, 34, 34, 0.08); --axe-wc-shadow-gold: 0 6px 20px rgba(212, 175, 55, 0.28); --axe-wc-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- 1. Global WooCommerce Resets & Typography Note: .woocommerce is added to , so we MUST NOT use broad descendant selectors like ".woocommerce a" — those would override floating buttons, header, footer, and every other element on the page. Instead, we scope to WooCommerce content containers. -------------------------------------------------------------------------- */ /* WooCommerce content containers */ .woocommerce .woocommerce-notices-wrapper, .woocommerce div.product, .woocommerce .products, .woocommerce .cart-collaterals, .woocommerce .woocommerce-cart-form, .woocommerce form.checkout, .woocommerce .woocommerce-MyAccount-navigation, .woocommerce .woocommerce-MyAccount-content, .woocommerce .woocommerce-order, .woocommerce .woocommerce-form-login, .woocommerce .woocommerce-form-register, .woocommerce .woocommerce-pagination, .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-breadcrumb, .woocommerce-checkout #order_review, .axiseast-wc-archive-wrapper, .axiseast-wc-single-wrapper { font-family: var(--axe-wc-font); color: var(--axe-wc-dark); line-height: 1.7; } /* Scoped heading styles — only inside WooCommerce content areas */ .woocommerce div.product h1, .woocommerce div.product h2, .woocommerce div.product h3, .woocommerce div.product h4, .woocommerce .products h2, .woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-account .woocommerce h2, .woocommerce-account .woocommerce h3 { font-family: var(--axe-wc-font); font-weight: 800; color: var(--axe-wc-dark); line-height: 1.3; } /* Scoped link styles — only inside WooCommerce content, NOT floating buttons */ .woocommerce div.product a, .woocommerce .products a, .woocommerce .cart-collaterals a, .woocommerce .woocommerce-cart-form a, .woocommerce form.checkout a, .woocommerce .woocommerce-MyAccount-content a, .woocommerce .woocommerce-breadcrumb a, .woocommerce .woocommerce-pagination a, .woocommerce .woocommerce-notices-wrapper a { color: var(--axe-wc-primary); text-decoration: none; transition: color var(--axe-wc-transition); } .woocommerce div.product a:hover, .woocommerce .products a:hover, .woocommerce .cart-collaterals a:hover, .woocommerce .woocommerce-cart-form a:hover, .woocommerce form.checkout a:hover, .woocommerce .woocommerce-MyAccount-content a:hover, .woocommerce .woocommerce-breadcrumb a:hover, .woocommerce .woocommerce-pagination a:hover, .woocommerce .woocommerce-notices-wrapper a:hover { color: var(--axe-wc-primary-bright); } /* Wrapper spacing */ .axiseast-wc-archive-wrapper, .axiseast-wc-single-wrapper { max-width: 1320px; margin-inline: auto; } /* -------------------------------------------------------------------------- 2. Notices (message, error, info) -------------------------------------------------------------------------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error { padding: 16px 22px; margin-bottom: 24px; border-radius: var(--axe-wc-radius); font-family: var(--axe-wc-font); font-size: 0.95rem; line-height: 1.7; border: 1px solid; list-style: none; } .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-message { background: var(--axe-wc-primary-soft); border-color: rgba(13, 122, 75, 0.2); color: var(--axe-wc-primary-dark); } .woocommerce-message::before, .woocommerce-notices-wrapper .woocommerce-message::before { color: var(--axe-wc-primary); } .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-info { background: #f0f4ff; border-color: rgba(59, 130, 246, 0.2); color: #1e3a5f; } .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-error { background: #fef2f2; border-color: rgba(170, 78, 82, 0.2); color: var(--axe-wc-tertiary); } .woocommerce-error li { list-style: none; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .woocommerce-message .button, .woocommerce-info .button { float: left; margin-top: -4px; text-decoration: none; } [dir="rtl"] .woocommerce-message .button, [dir="rtl"] .woocommerce-info .button { float: right; } /* -------------------------------------------------------------------------- 3. Breadcrumbs -------------------------------------------------------------------------- */ .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: 0.85rem; color: var(--axe-wc-muted); padding: 0; margin-bottom: 24px; } .woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: var(--axe-wc-muted); text-decoration: none; transition: color var(--axe-wc-transition); } .woocommerce-breadcrumb a:hover, .wc-block-breadcrumbs a:hover { color: var(--axe-wc-primary); } .woocommerce-breadcrumb span, .wc-block-breadcrumbs span { margin: 0 6px; opacity: 0.5; } /* -------------------------------------------------------------------------- 4. Shop / Archive — Product Grid -------------------------------------------------------------------------- */ /* Shop Archive Header — Hero Bar */ .woocommerce-products-header { background: linear-gradient(135deg, var(--axe-wc-primary-dark) 0%, var(--axe-wc-primary) 60%, #11a465 100%); padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px); border-radius: var(--axe-wc-radius-lg); margin-bottom: clamp(24px, 3vw, 36px); position: relative; overflow: hidden; } .woocommerce-products-header::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 1; } .woocommerce-products-header__title.page-title { font-family: var(--axe-wc-font); font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 900; color: #ffffff; margin: 0; line-height: 1.3; position: relative; z-index: 1; } .woocommerce-products-header__title.page-title::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 999px; background: var(--axe-wc-secondary); margin-top: 12px; } /* Results count & ordering bar */ .woocommerce .woocommerce-result-count, .woocommerce-result-count { font-size: 0.88rem; font-weight: 600; color: var(--axe-wc-muted); margin-bottom: 0; background: var(--axe-wc-card); padding: 8px 16px; border-radius: var(--axe-wc-radius-pill); border: 1px solid var(--axe-wc-border); } .woocommerce-ordering select, .woocommerce .woocommerce-ordering select { font-family: var(--axe-wc-font); font-size: 0.88rem; font-weight: 600; padding: 10px 16px; border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius); background: var(--axe-wc-white); color: var(--axe-wc-dark); cursor: pointer; transition: border-color var(--axe-wc-transition), box-shadow var(--axe-wc-transition); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6761' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-left: 36px; } [dir="rtl"] .woocommerce-ordering select, [dir="rtl"] .woocommerce .woocommerce-ordering select { background-position: left 14px center; padding-left: 36px; padding-right: 16px; } .woocommerce-ordering select:focus { border-color: var(--axe-wc-primary); outline: none; box-shadow: 0 0 0 3px rgba(13, 122, 75, 0.1); } /* Product Grid */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } /* Product Card */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { position: relative; display: flex; flex-direction: column; width: 100% !important; margin: 0 !important; padding: 0; background: var(--axe-wc-white); border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-lg); overflow: hidden; box-shadow: var(--axe-wc-shadow); transition: transform var(--axe-wc-transition), border-color var(--axe-wc-transition), box-shadow var(--axe-wc-transition); } /* Accent bottom glow on hover */ .woocommerce ul.products li.product::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--axe-wc-primary) 0%, var(--axe-wc-secondary) 100%); transform: scaleX(0); transform-origin: center; transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } .woocommerce ul.products li.product:hover { transform: translateY(-6px); border-color: rgba(13, 122, 75, 0.18); box-shadow: var(--axe-wc-shadow-hover); } .woocommerce ul.products li.product:hover::after { transform: scaleX(1); } /* Product Image */ .woocommerce ul.products li.product a img, .woocommerce ul.products li.product .attachment-woocommerce_thumbnail { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1), filter 400ms ease; } .woocommerce ul.products li.product a:first-child { display: block; overflow: hidden; position: relative; background: var(--axe-wc-card); } .woocommerce ul.products li.product:hover a img { transform: scale(1.08); } /* Product Content */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { font-family: var(--axe-wc-font); font-size: 0.98rem; font-weight: 700; color: var(--axe-wc-dark); padding: 16px 18px 0; margin: 0; line-height: 1.55; text-align: right; transition: color var(--axe-wc-transition); -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .woocommerce ul.products li.product:hover .woocommerce-loop-product__title, .woocommerce ul.products li.product:hover h2 { color: var(--axe-wc-primary); } .woocommerce ul.products li.product .price { display: flex; align-items: center; gap: 8px; padding: 10px 18px 0; font-family: var(--axe-wc-font-label); font-size: 1.08rem; font-weight: 800; color: var(--axe-wc-primary); text-align: right; flex-wrap: wrap; direction: rtl; } .woocommerce ul.products li.product .price del { color: var(--axe-wc-muted); font-weight: 400; font-size: 0.82rem; opacity: 0.65; text-decoration-color: rgba(95, 103, 97, 0.4); } .woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--axe-wc-primary); font-weight: 800; } /* Sale Badge */ .woocommerce ul.products li.product .onsale, .woocommerce span.onsale { position: absolute; top: 14px; right: auto; left: 14px; z-index: 3; min-width: auto; min-height: auto; padding: 6px 14px; margin: 0; border-radius: var(--axe-wc-radius-pill); background: linear-gradient(135deg, var(--axe-wc-secondary) 0%, #e8c045 100%); color: var(--axe-wc-dark); font-family: var(--axe-wc-font); font-size: 0.73rem; font-weight: 800; line-height: 1.4; letter-spacing: 0.03em; text-align: center; box-shadow: 0 3px 10px rgba(212, 175, 55, 0.35); backdrop-filter: blur(4px); } [dir="rtl"] .woocommerce ul.products li.product .onsale, [dir="rtl"] .woocommerce span.onsale { left: 14px; right: auto; } /* Star Rating */ .woocommerce ul.products li.product .star-rating { color: var(--axe-wc-secondary); font-size: 0.78rem; margin: 8px 18px 0; filter: drop-shadow(0 1px 2px rgba(212, 175, 55, 0.3)); } .woocommerce .star-rating { color: var(--axe-wc-secondary); } .woocommerce .star-rating span::before { color: var(--axe-wc-secondary); } /* Add to Cart Button (Loop) */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce ul.products li.product a.product_type_simple, .woocommerce ul.products li.product a.product_type_variable, .wc-block-grid__product-add-to-cart .wp-block-button__link, .wc-block-grid__product-add-to-cart a, .wc-block-components-product-button .wc-block-components-product-button__button, .wp-block-button.wc-block-components-product-button__button a { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box !important; width: calc(100% - 36px); margin: auto 18px 18px 18px; padding: 12px 16px; border: none; border-radius: var(--axe-wc-radius); background: linear-gradient(135deg, var(--axe-wc-primary-dark) 0%, var(--axe-wc-primary) 100%); color: var(--axe-wc-white); font-family: var(--axe-wc-font); font-size: 0.9rem; font-weight: 700; text-align: center; cursor: pointer; transition: all var(--axe-wc-transition); position: relative; overflow: hidden; } /* Ensure WooCommerce Block button wrappers don't constrain width */ .wc-block-grid__product-add-to-cart, .wc-block-components-product-button, .wp-block-woocommerce-product-collection .wc-block-components-product-button { width: 100% !important; margin-top: auto; box-sizing: border-box; } .wc-block-components-product-button .wc-block-components-product-button__button { width: calc(100% - 36px) !important; } /* Shine sweep effect on hover */ .woocommerce ul.products li.product .button::before, .woocommerce ul.products li.product a.add_to_cart_button::before, .wc-block-components-product-button__button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transition: left 500ms ease; } .woocommerce ul.products li.product .button:hover::before, .woocommerce ul.products li.product a.add_to_cart_button:hover::before, .wc-block-components-product-button__button:hover::before { left: 100%; } .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product a.add_to_cart_button:hover, .wc-block-components-product-button__button:hover { background: linear-gradient(135deg, var(--axe-wc-primary) 0%, var(--axe-wc-primary-bright) 100%); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 122, 75, 0.3); color: var(--axe-wc-white); } /* Adding to cart processing state (Double click prevention) */ .button.is-adding, .add_to_cart_button.is-adding, .single_add_to_cart_button.is-adding, .axiseast-wc-btn--add-to-cart.is-adding, .button.loading, .add_to_cart_button.loading { opacity: 0.75 !important; cursor: wait !important; pointer-events: none !important; transform: none !important; box-shadow: none !important; filter: grayscale(0.2); position: relative; } .button.is-adding::after, .add_to_cart_button.is-adding::after, .single_add_to_cart_button.is-adding::after, .axiseast-wc-btn--add-to-cart.is-adding::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-inline-start: 8px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #ffffff; border-radius: 50%; animation: axiseast-wc-btn-spin 600ms linear infinite; vertical-align: middle; } @keyframes axiseast-wc-btn-spin { to { transform: rotate(360deg); } } .woocommerce ul.products li.product .added_to_cart { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 18px 14px; font-size: 0.82rem; font-weight: 700; color: var(--axe-wc-primary); width: 100%; box-sizing: border-box; } .woocommerce ul.products li.product .added_to_cart::before { content: "✓"; font-weight: 900; font-size: 0.9rem; } /* Pagination */ .woocommerce nav.woocommerce-pagination { margin-top: clamp(32px, 4vw, 56px); text-align: center; } .woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 6px; margin: 0; padding: 0; border: none; list-style: none; } .woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0; padding: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-pill); background: var(--axe-wc-white); color: var(--axe-wc-dark); font-family: var(--axe-wc-font); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: all var(--axe-wc-transition); } .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--axe-wc-primary-soft); border-color: var(--axe-wc-primary); color: var(--axe-wc-primary); } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--axe-wc-primary); border-color: var(--axe-wc-primary); color: var(--axe-wc-white); font-weight: 800; } /* -------------------------------------------------------------------------- 5. Single Product Page -------------------------------------------------------------------------- */ /* Breadcrumb */ .woocommerce .woocommerce-breadcrumb, .woocommerce-breadcrumb { display: flex !important; align-items: center !important; gap: 8px !important; padding: 10px 20px !important; background: var(--axe-wc-card) !important; border-radius: var(--axe-wc-radius-pill) !important; border: 1px solid var(--axe-wc-border) !important; font-family: var(--axe-wc-font) !important; font-size: 0.88rem !important; color: var(--axe-wc-muted) !important; margin-bottom: 32px !important; flex-wrap: wrap !important; } .woocommerce .woocommerce-breadcrumb a { color: var(--axe-wc-primary) !important; font-weight: 700 !important; text-decoration: none !important; } .woocommerce .woocommerce-breadcrumb a:hover { color: var(--axe-wc-primary-bright) !important; } /* Product Container Grid */ .woocommerce div.product, .woocommerce #content div.product, .woocommerce-page div.product, .woocommerce-page #content div.product, .single-product div.product { position: relative !important; display: grid !important; /* grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; */ gap: clamp(28px, 4vw, 56px) !important; align-items: start !important; width: 100% !important; float: none !important; clear: both !important; } /* Ensure full width for notices, tabs, related */ .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related.products, .woocommerce div.product .upsells.products, .woocommerce div.product .woocommerce-notices-wrapper { grid-column: 1 / -1 !important; width: 100% !important; } /* Sale Badge */ .woocommerce div.product span.onsale, .woocommerce ul.products li.product .onsale, .woocommerce span.onsale { position: absolute !important; top: 16px !important; inset-inline-start: 16px !important; inset-inline-end: auto !important; z-index: 10 !important; padding: 6px 16px !important; border-radius: var(--axe-wc-radius-pill) !important; background: linear-gradient(135deg, var(--axe-wc-secondary) 0%, #e8c045 100%) !important; color: var(--axe-wc-dark) !important; font-family: var(--axe-wc-font) !important; font-size: 0.82rem !important; font-weight: 800 !important; box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35) !important; border: none !important; min-height: auto !important; line-height: 1.4 !important; } /* Product Gallery */ .woocommerce div.product div.images, .woocommerce #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce-page #content div.product div.images { margin-bottom: 0 !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; } .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0 !important; padding: 0 !important; border-radius: var(--axe-wc-radius-lg) !important; overflow: hidden !important; } .woocommerce div.product div.images .woocommerce-product-gallery__trigger { display: none !important; } .woocommerce div.product div.images img { border-radius: var(--axe-wc-radius-lg) !important; box-shadow: var(--axe-wc-shadow) !important; transition: box-shadow 400ms ease, transform 400ms ease !important; width: 100% !important; height: auto !important; object-fit: cover !important; display: block !important; } .woocommerce div.product div.images img:hover { box-shadow: var(--axe-wc-shadow-hover) !important; } .woocommerce div.product div.images .flex-control-thumbs { margin-top: 14px !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important; padding: 0 !important; list-style: none !important; } .woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 80px !important; width: 80px !important; float: none !important; margin: 0 !important; } .woocommerce div.product div.images .flex-control-thumbs li img { border-radius: 10px !important; border: 2px solid transparent !important; opacity: 0.7 !important; cursor: pointer !important; aspect-ratio: 1 !important; object-fit: cover !important; transition: opacity var(--axe-wc-transition), border-color var(--axe-wc-transition), transform var(--axe-wc-transition) !important; } .woocommerce div.product div.images .flex-control-thumbs li img:hover, .woocommerce div.product div.images .flex-control-thumbs li img.flex-active, .woocommerce div.product div.images .flex-control-thumbs li img.is-active { opacity: 1 !important; border-color: var(--axe-wc-primary) !important; transform: translateY(-2px) !important; } /* Secondary gallery thumbnail cards for non-FlexSlider markup */ .woocommerce div.product div.images .woocommerce-product-gallery__image:not(:first-child) { display: inline-block !important; width: 76px !important; height: 76px !important; margin-inline-end: 8px !important; margin-top: 12px !important; cursor: pointer !important; border-radius: 10px !important; overflow: hidden !important; border: 2px solid transparent !important; opacity: 0.75 !important; transition: all var(--axe-wc-transition) !important; } .woocommerce div.product div.images .woocommerce-product-gallery__image:not(:first-child):hover, .woocommerce div.product div.images .woocommerce-product-gallery__image:not(:first-child).flex-active, .woocommerce div.product div.images .woocommerce-product-gallery__image:not(:first-child).is-active { opacity: 1 !important; border-color: var(--axe-wc-primary) !important; transform: translateY(-2px) !important; } .woocommerce div.product div.images .woocommerce-product-gallery__image a { cursor: pointer !important; } /* Single Product Summary */ .woocommerce div.product div.summary, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.summary { width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; position: sticky !important; top: 100px !important; box-sizing: border-box !important; } .woocommerce div.product .product_title, .woocommerce div.product div.summary h1, .woocommerce div.product div.summary h1.product_title { font-family: var(--axe-wc-font) !important; font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem) !important; font-weight: 800 !important; color: var(--axe-wc-dark) !important; margin-top: 0 !important; margin-bottom: 14px !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; width: 100% !important; display: block !important; } .woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; background: var(--axe-wc-card); padding: 6px 14px; border-radius: var(--axe-wc-radius-pill); width: fit-content; border: 1px solid var(--axe-wc-border); } .woocommerce div.product .woocommerce-product-rating .woocommerce-review-link { color: var(--axe-wc-muted); font-size: 0.85rem; font-weight: 600; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--axe-wc-font-label); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); font-weight: 800; color: var(--axe-wc-primary); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .woocommerce div.product p.price del { color: var(--axe-wc-muted); font-weight: 400; font-size: 0.78em; opacity: 0.6; margin-inline-start: 8px; text-decoration-color: rgba(95, 103, 97, 0.4); } .woocommerce div.product p.price ins { text-decoration: none; color: var(--axe-wc-primary); position: relative; } /* Stock Status Badges */ .woocommerce div.product .stock { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--axe-wc-radius-pill); font-size: 0.85rem; font-weight: 700; margin-bottom: 18px; } .woocommerce div.product .stock.in-stock { background: #e6f7ef; color: var(--axe-wc-primary); border: 1px solid rgba(13, 122, 75, 0.2); } .woocommerce div.product .stock.in-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--axe-wc-primary); box-shadow: 0 0 0 3px rgba(13, 122, 75, 0.25); } .woocommerce div.product .stock.out-of-stock { background: #fde8e8; color: #d32f2f; border: 1px solid rgba(211, 47, 47, 0.2); } .woocommerce div.product .stock.out-of-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d32f2f; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--axe-wc-muted); font-size: 1.02rem; line-height: 1.9; margin-bottom: 26px; background: var(--axe-wc-card); padding: 16px 20px; border-radius: var(--axe-wc-radius); border-inline-start: 4px solid var(--axe-wc-primary); } .woocommerce div.product .woocommerce-product-details__short-description p { margin: 0; } /* Quantity Input & Stepper */ .woocommerce .quantity, .woocommerce div.product form.cart .quantity { display: inline-flex !important; align-items: center !important; border: 1.5px solid var(--axe-wc-border) !important; border-radius: var(--axe-wc-radius) !important; background: var(--axe-wc-white) !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; height: 52px !important; flex: 0 0 auto !important; width: auto !important; box-sizing: border-box !important; } .woocommerce .quantity .qty, .woocommerce div.product form.cart .quantity .qty { font-family: var(--axe-wc-font) !important; font-size: 1.05rem !important; font-weight: 800 !important; width: 54px !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; color: var(--axe-wc-dark) !important; text-align: center !important; appearance: none !important; -moz-appearance: textfield !important; box-shadow: none !important; } .woocommerce .quantity .qty:focus { outline: none !important; box-shadow: none !important; } .woocommerce .quantity .minus, .woocommerce .quantity .plus, .woocommerce div.product form.cart .quantity .minus, .woocommerce div.product form.cart .quantity .plus { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 100% !important; border: none !important; background: var(--axe-wc-card) !important; color: var(--axe-wc-dark) !important; font-size: 1.1rem !important; font-weight: 700 !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; transition: background-color var(--axe-wc-transition), color var(--axe-wc-transition) !important; } .woocommerce .quantity .minus:hover, .woocommerce .quantity .plus:hover, .woocommerce div.product form.cart .quantity .minus:hover, .woocommerce div.product form.cart .quantity .plus:hover { background: var(--axe-wc-primary-soft) !important; color: var(--axe-wc-primary) !important; } /* Single Add to Cart Form - Side-by-Side Row Layout */ .woocommerce div.product form.cart, .woocommerce #content div.product form.cart, .woocommerce-page div.product form.cart, .woocommerce-page #content div.product form.cart { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; margin-bottom: 24px !important; width: 100% !important; clear: both !important; } .woocommerce div.product form.cart .button, .woocommerce div.product form.cart .single_add_to_cart_button, .woocommerce #content div.product form.cart .single_add_to_cart_button, .woocommerce-page div.product form.cart .single_add_to_cart_button { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 52px !important; padding: 0 24px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: none !important; border-radius: var(--axe-wc-radius) !important; background: linear-gradient(135deg, var(--axe-wc-primary-dark) 0%, var(--axe-wc-primary) 100%) !important; color: var(--axe-wc-white) !important; font-family: var(--axe-wc-font) !important; font-size: 1.05rem !important; font-weight: 800 !important; text-align: center !important; cursor: pointer !important; transition: background-color var(--axe-wc-transition), transform var(--axe-wc-transition), box-shadow var(--axe-wc-transition) !important; position: relative !important; overflow: hidden !important; white-space: nowrap !important; } .woocommerce div.product form.cart .button::before, .woocommerce div.product form.cart .single_add_to_cart_button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); transition: left 550ms ease; } .woocommerce div.product form.cart .button:hover::before, .woocommerce div.product form.cart .single_add_to_cart_button:hover::before { left: 100%; } .woocommerce div.product form.cart .button:hover, .woocommerce div.product form.cart .single_add_to_cart_button:hover { background: linear-gradient(135deg, var(--axe-wc-primary) 0%, var(--axe-wc-primary-bright) 100%); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(13, 122, 75, 0.32); } /* Direct WhatsApp Order Button */ .axiseast-wc-whatsapp-order { width: 100%; margin-bottom: 24px; } .axiseast-wc-wa-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; padding: 0 20px; border-radius: var(--axe-wc-radius); background: #25D366; background: linear-gradient(135deg, #1fa34e 0%, #25D366 100%); color: #ffffff !important; font-family: var(--axe-wc-font); font-size: 0.98rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25); transition: transform var(--axe-wc-transition), box-shadow var(--axe-wc-transition); } .axiseast-wc-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.38); color: #ffffff !important; } /* Trust & Guarantee Badges */ .axiseast-wc-trust-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--axe-wc-border); } .axiseast-wc-trust-badge { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--axe-wc-card); border-radius: var(--axe-wc-radius); border: 1px solid var(--axe-wc-border); } .axiseast-wc-trust-badge .badge-icon { font-size: 1.4rem; flex-shrink: 0; } .axiseast-wc-trust-badge .badge-content { display: flex; flex-direction: column; gap: 2px; } .axiseast-wc-trust-badge .badge-content strong { font-size: 0.85rem; font-weight: 800; color: var(--axe-wc-dark); } .axiseast-wc-trust-badge .badge-content span { font-size: 0.76rem; color: var(--axe-wc-muted); line-height: 1.3; } /* Variations Selector Form */ .woocommerce div.product form.cart .variations { width: 100%; margin-bottom: 18px; border: none; } .woocommerce div.product form.cart .variations td { padding: 8px 0; display: block; } .woocommerce div.product form.cart .variations select { font-family: var(--axe-wc-font); font-size: 0.95rem; font-weight: 600; padding: 12px 16px; border: 1.5px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius); background: var(--axe-wc-white); color: var(--axe-wc-dark); transition: border-color var(--axe-wc-transition); width: 100%; } .woocommerce div.product form.cart .variations select:focus { border-color: var(--axe-wc-primary); outline: none; } .woocommerce div.product form.cart .variations label { font-weight: 800; font-size: 0.95rem; color: var(--axe-wc-dark); margin-bottom: 6px; display: block; } .woocommerce div.product form.cart .reset_variations { color: var(--axe-wc-muted); font-size: 0.85rem; display: inline-block; margin-top: 6px; } /* Product Meta (SKU, Categories, Tags) */ .woocommerce div.product .product_meta { padding-top: 20px; border-top: 1px solid var(--axe-wc-border); margin-top: 24px; font-size: 0.9rem; color: var(--axe-wc-muted); line-height: 2.2; } .woocommerce div.product .product_meta>span { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; } .woocommerce div.product .product_meta a { color: var(--axe-wc-primary); font-weight: 700; background: var(--axe-wc-primary-soft); padding: 4px 14px; border-radius: var(--axe-wc-radius-pill); font-size: 0.82rem; transition: background-color var(--axe-wc-transition), color var(--axe-wc-transition); } .woocommerce div.product .product_meta a:hover { background: var(--axe-wc-primary); color: var(--axe-wc-white) !important; } /* -------------------------------------------------------------------------- 6. Product Tabs (Description, Reviews, Additional Info) -------------------------------------------------------------------------- */ .woocommerce div.product .woocommerce-tabs { margin-top: clamp(32px, 4vw, 56px); } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 0; margin: 0 0 28px; padding: 0; list-style: none; border-bottom: 2px solid var(--axe-wc-border); overflow: visible; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: none; border-radius: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 22px; font-family: var(--axe-wc-font); font-size: 0.95rem; font-weight: 700; color: var(--axe-wc-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color var(--axe-wc-transition), border-color var(--axe-wc-transition); } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--axe-wc-primary); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--axe-wc-primary); border-bottom-color: var(--axe-wc-primary); font-weight: 800; } .woocommerce div.product .woocommerce-tabs .panel { padding: 0; margin: 0; border: none; background: none; box-shadow: none; } .woocommerce div.product .woocommerce-tabs .panel h2 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--axe-wc-border); } .woocommerce div.product .woocommerce-tabs .panel p { line-height: 1.9; color: var(--axe-wc-muted); } /* Reviews */ .woocommerce #reviews #comments ol.commentlist { padding: 0; list-style: none; } .woocommerce #reviews #comments ol.commentlist li { padding: 20px; margin-bottom: 16px; background: var(--axe-wc-card); border-radius: var(--axe-wc-radius); border: 1px solid var(--axe-wc-border); } .woocommerce #reviews #comments ol.commentlist li img.avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--axe-wc-primary-soft); } .woocommerce #reviews #comment-form { margin-top: 28px; } /* Related Products */ .woocommerce div.product .related.products, .woocommerce div.product .upsells.products { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--axe-wc-border); } .woocommerce div.product .related.products h2, .woocommerce div.product .upsells.products h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); font-weight: 800; margin-bottom: clamp(20px, 3vw, 32px); position: relative; padding-bottom: 14px; } .woocommerce div.product .related.products h2::after, .woocommerce div.product .upsells.products h2::after { content: ""; position: absolute; bottom: 0; right: 0; width: 60px; height: 3px; border-radius: 999px; background: var(--axe-wc-secondary); } [dir="ltr"] .woocommerce div.product .related.products h2::after, [dir="ltr"] .woocommerce div.product .upsells.products h2::after { right: auto; left: 0; } /* -------------------------------------------------------------------------- 7. Cart Page -------------------------------------------------------------------------- */ .woocommerce-cart .woocommerce { max-width: 1320px; margin-inline: auto; } .woocommerce table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-lg); overflow: hidden; background: var(--axe-wc-white); box-shadow: var(--axe-wc-shadow); margin-bottom: 32px; } .woocommerce table.shop_table thead { background: var(--axe-wc-card); } .woocommerce table.shop_table thead th { font-family: var(--axe-wc-font); font-size: 0.85rem; font-weight: 800; color: var(--axe-wc-dark); padding: 16px 20px; text-transform: none; letter-spacing: 0; border: none; } .woocommerce table.shop_table td { padding: 18px 20px; border-top: 1px solid var(--axe-wc-border); vertical-align: middle; font-size: 0.95rem; } .woocommerce table.shop_table tbody tr:first-child td { border-top: none; } /* Cart Product Thumbnail */ .woocommerce table.shop_table .product-thumbnail img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--axe-wc-border); } .woocommerce table.shop_table .product-name a { font-family: var(--axe-wc-font); font-weight: 700; color: var(--axe-wc-dark); font-size: 0.95rem; } .woocommerce table.shop_table .product-name a:hover { color: var(--axe-wc-primary); } .woocommerce table.shop_table .product-price, .woocommerce table.shop_table .product-subtotal { font-family: var(--axe-wc-font-label); font-weight: 700; color: var(--axe-wc-primary); } /* Remove Button */ .woocommerce table.shop_table .product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fef2f2; color: var(--axe-wc-tertiary) !important; font-size: 1.2rem; font-weight: 700; transition: background-color var(--axe-wc-transition), transform var(--axe-wc-transition); text-decoration: none; } .woocommerce table.shop_table .product-remove a.remove:hover { background: var(--axe-wc-tertiary); color: var(--axe-wc-white) !important; transform: scale(1.1); } /* Cart Actions (Update, Coupon) */ .woocommerce .cart-collaterals, .woocommerce-cart .cart-collaterals { margin-top: 0; } .woocommerce table.shop_table td.actions { padding: 20px; } .woocommerce table.shop_table td.actions .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .woocommerce table.shop_table td.actions .coupon label { display: none; } .woocommerce table.shop_table td.actions .coupon .input-text { font-family: var(--axe-wc-font); font-size: 0.9rem; padding: 11px 16px; border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius); background: var(--axe-wc-card); color: var(--axe-wc-dark); transition: border-color var(--axe-wc-transition); min-width: 180px; } .woocommerce table.shop_table td.actions .coupon .input-text:focus { border-color: var(--axe-wc-primary); outline: none; box-shadow: 0 0 0 3px rgba(13, 122, 75, 0.1); } /* Cart Totals */ .woocommerce .cart_totals, .woocommerce-page .cart_totals { background: var(--axe-wc-white); border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-lg); padding: 28px; box-shadow: var(--axe-wc-shadow); } .woocommerce .cart_totals h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--axe-wc-border); } .woocommerce .cart_totals table { border: none; box-shadow: none; background: transparent; margin: 0; } .woocommerce .cart_totals table th { font-weight: 700; color: var(--axe-wc-dark); padding: 12px 0; border: none; background: transparent; } .woocommerce .cart_totals table td { padding: 12px 0; border: none; text-align: left; } [dir="rtl"] .woocommerce .cart_totals table td { text-align: left; } .woocommerce .cart_totals table tr { border-bottom: 1px solid var(--axe-wc-border); } .woocommerce .cart_totals table tr:last-child { border-bottom: none; } .woocommerce .cart_totals .order-total td { font-family: var(--axe-wc-font-label); font-size: 1.25rem; font-weight: 800; color: var(--axe-wc-primary); } /* Proceed to Checkout */ .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button, .woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; margin-top: 20px; padding: 16px 24px; border: none; border-radius: var(--axe-wc-radius); background: var(--axe-wc-secondary); color: var(--axe-wc-dark); font-family: var(--axe-wc-font); font-size: 1.05rem; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--axe-wc-transition), transform var(--axe-wc-transition), box-shadow var(--axe-wc-transition); } .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--axe-wc-secondary-light); transform: translateY(-3px); box-shadow: var(--axe-wc-shadow-gold); } /* Empty Cart & Gutenberg Empty Cart Block Styling */ .woocommerce-cart .cart-empty, .woocommerce-cart p.cart-empty, .wc-block-cart__empty-cart-wrapper, .axiseast-empty-cart-card { text-align: center; padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px); margin-bottom: 40px; background: var(--axe-wc-white); border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-lg); box-shadow: var(--axe-wc-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; } .axiseast-empty-cart-icon { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; margin-bottom: 20px; border-radius: 50%; background: var(--axe-wc-primary-soft); color: var(--axe-wc-primary); border: 2px solid rgba(13, 122, 75, 0.15); box-shadow: 0 8px 24px rgba(13, 122, 75, 0.08); } .axiseast-empty-cart-title, .wc-block-cart__empty-cart-title { font-family: var(--axe-wc-font); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; color: var(--axe-wc-dark); margin-top: 0; margin-bottom: 10px; } .axiseast-empty-cart-subtitle, .wc-block-cart__empty-cart-description { font-family: var(--axe-wc-font); font-size: 1rem; color: var(--axe-wc-muted); max-width: 580px; margin: 0 0 28px 0; line-height: 1.8; } .woocommerce-cart .return-to-shop, .wc-block-cart__empty-cart-link { margin-top: 8px; text-align: center; } .woocommerce-cart .return-to-shop a.button, .wc-block-cart__empty-cart-link a, .wc-block-components-empty-cart-section a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 36px; border-radius: var(--axe-wc-radius-pill); background: linear-gradient(135deg, var(--axe-wc-primary-dark) 0%, var(--axe-wc-primary) 100%); color: var(--axe-wc-white) !important; font-family: var(--axe-wc-font); font-size: 1rem; font-weight: 800; text-decoration: none; box-shadow: 0 6px 20px rgba(13, 122, 75, 0.25); transition: background-color var(--axe-wc-transition), transform var(--axe-wc-transition), box-shadow var(--axe-wc-transition); } .woocommerce-cart .return-to-shop a.button:hover, .wc-block-cart__empty-cart-link a:hover, .wc-block-components-empty-cart-section a:hover { background: linear-gradient(135deg, var(--axe-wc-primary) 0%, var(--axe-wc-primary-bright) 100%); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(13, 122, 75, 0.35); color: var(--axe-wc-white) !important; } /* Empty Cart Recommended Products Grid */ .axiseast-wc-empty-cart-suggestions { margin-top: 48px; padding-top: 36px; border-top: 2px dashed var(--axe-wc-border); } .axiseast-wc-section-header { margin-bottom: 28px; text-align: right; position: relative; } [dir="ltr"] .axiseast-wc-section-header { text-align: left; } .axiseast-wc-section-title { font-family: var(--axe-wc-font); font-size: clamp(1.3rem, 1rem + 0.9vw, 1.75rem); font-weight: 800; color: var(--axe-wc-dark); margin: 0 0 6px 0; position: relative; display: inline-block; } .axiseast-wc-section-title::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 999px; background: var(--axe-wc-secondary); margin-top: 8px; } .axiseast-wc-section-sub { font-size: 0.92rem; color: var(--axe-wc-muted); margin: 0; } /* 4-column responsive grid container */ .axiseast-wc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; } @media screen and (max-width: 1200px) { .axiseast-wc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 800px) { .axiseast-wc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media screen and (max-width: 480px) { .axiseast-wc-grid { grid-template-columns: 1fr; gap: 16px; } } /* -------------------------------------------------------------------------- 8. Checkout Page -------------------------------------------------------------------------- */ .woocommerce-checkout .woocommerce { max-width: 1320px; margin-inline: auto; } .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register { border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-lg); padding: 24px; background: var(--axe-wc-white); box-shadow: var(--axe-wc-shadow); margin-bottom: 28px; } /* Form Fields */ .woocommerce form .form-row { margin-bottom: 16px; } .woocommerce form .form-row label { font-family: var(--axe-wc-font); font-size: 0.9rem; font-weight: 700; color: var(--axe-wc-dark); margin-bottom: 6px; display: block; } .woocommerce form .form-row .required { color: var(--axe-wc-tertiary); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-checkout #payment .form-row input.input-text, .woocommerce-checkout #payment .form-row textarea, .woocommerce-checkout #payment .form-row select { font-family: var(--axe-wc-font); font-size: 0.95rem; width: 100%; padding: 12px 16px; border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius); background: var(--axe-wc-white); color: var(--axe-wc-dark); transition: border-color var(--axe-wc-transition), box-shadow var(--axe-wc-transition); } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--axe-wc-primary); outline: none; box-shadow: 0 0 0 3px rgba(13, 122, 75, 0.1); } .woocommerce form .form-row textarea { min-height: 100px; resize: vertical; } /* Select2 (WooCommerce Dropdowns) */ .woocommerce .select2-container--default .select2-selection--single { height: 48px; border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius); background: var(--axe-wc-white); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px; padding-inline: 16px; font-family: var(--axe-wc-font); font-size: 0.95rem; color: var(--axe-wc-dark); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--axe-wc-primary) !important; } .select2-dropdown { border-color: var(--axe-wc-border); border-radius: var(--axe-wc-radius); box-shadow: var(--axe-wc-shadow-hover); } /* Checkout Headings */ .woocommerce-checkout h3, .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-shipping-fields h3, .woocommerce-checkout .woocommerce-additional-fields h3 { font-size: 1.15rem; font-weight: 800; color: var(--axe-wc-dark); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--axe-wc-border); } /* Order Review */ .woocommerce-checkout #order_review_heading { font-size: 1.15rem; font-weight: 800; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--axe-wc-border); } .woocommerce-checkout #order_review { background: var(--axe-wc-white); border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-lg); padding: 24px; box-shadow: var(--axe-wc-shadow); } .woocommerce-checkout #order_review table.shop_table { border: none; box-shadow: none; border-radius: 0; margin-bottom: 0; } /* Payment Methods */ .woocommerce-checkout #payment { background: var(--axe-wc-card); border-radius: var(--axe-wc-radius-lg); border: 1px solid var(--axe-wc-border); } .woocommerce-checkout #payment ul.payment_methods { padding: 20px; margin: 0; list-style: none; border-bottom: 1px solid var(--axe-wc-border); } .woocommerce-checkout #payment ul.payment_methods li { padding: 14px 0; border-bottom: 1px solid var(--axe-wc-border); } .woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; } .woocommerce-checkout #payment ul.payment_methods li label { font-weight: 700; cursor: pointer; } .woocommerce-checkout #payment ul.payment_methods li .payment_box { padding: 14px; margin-top: 10px; background: var(--axe-wc-white); border-radius: var(--axe-wc-radius); border: 1px solid var(--axe-wc-border); font-size: 0.9rem; color: var(--axe-wc-muted); line-height: 1.7; } .woocommerce-checkout #payment ul.payment_methods li .payment_box::before { display: none; } .woocommerce-checkout #payment div.place-order { padding: 20px; } /* Place Order Button */ .woocommerce #payment #place_order, .woocommerce-checkout #payment #place_order { display: block; width: 100%; padding: 16px 24px; border: none; border-radius: var(--axe-wc-radius); background: var(--axe-wc-primary); color: var(--axe-wc-white); font-family: var(--axe-wc-font); font-size: 1.1rem; font-weight: 800; text-align: center; cursor: pointer; transition: background-color var(--axe-wc-transition), transform var(--axe-wc-transition), box-shadow var(--axe-wc-transition); } .woocommerce #payment #place_order:hover, .woocommerce-checkout #payment #place_order:hover { background: var(--axe-wc-primary-bright); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(13, 122, 75, 0.28); } /* -------------------------------------------------------------------------- 9. My Account Page -------------------------------------------------------------------------- */ .woocommerce-account .woocommerce { max-width: 1320px; margin-inline: auto; } .woocommerce-account .woocommerce-MyAccount-navigation { background: var(--axe-wc-white); border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-lg); padding: 8px; box-shadow: var(--axe-wc-shadow); } .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 20px; font-family: var(--axe-wc-font); font-size: 0.95rem; font-weight: 600; color: var(--axe-wc-dark); text-decoration: none; border-radius: var(--axe-wc-radius); transition: background-color var(--axe-wc-transition), color var(--axe-wc-transition); } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--axe-wc-primary-soft); color: var(--axe-wc-primary); } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a { background: var(--axe-wc-primary); color: var(--axe-wc-white); font-weight: 800; } /* Account Content */ .woocommerce-account .woocommerce-MyAccount-content { font-size: 0.95rem; line-height: 1.8; color: var(--axe-wc-dark); } .woocommerce-account .woocommerce-MyAccount-content p { margin-bottom: 16px; } /* Order Table */ .woocommerce-account table.woocommerce-orders-table { background: var(--axe-wc-white); } .woocommerce-account table.woocommerce-orders-table .button { padding: 8px 18px; border-radius: var(--axe-wc-radius); background: var(--axe-wc-primary); color: var(--axe-wc-white); font-size: 0.85rem; font-weight: 700; border: none; text-decoration: none; transition: background-color var(--axe-wc-transition); } .woocommerce-account table.woocommerce-orders-table .button:hover { background: var(--axe-wc-primary-bright); } /* Account Forms (Login / Register) */ .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { max-width: 520px; margin-inline: auto; background: var(--axe-wc-white); border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--axe-wc-shadow); } .woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-register .woocommerce-form-register__submit { display: block; width: 100%; padding: 14px 24px; border: none; border-radius: var(--axe-wc-radius); background: var(--axe-wc-primary); color: var(--axe-wc-white); font-family: var(--axe-wc-font); font-size: 1rem; font-weight: 800; cursor: pointer; transition: background-color var(--axe-wc-transition), transform var(--axe-wc-transition); } .woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit:hover, .woocommerce-account .woocommerce-form-register .woocommerce-form-register__submit:hover { background: var(--axe-wc-primary-bright); transform: translateY(-2px); } .woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 0.9rem; } .woocommerce-account .woocommerce-LostPassword { margin-top: 14px; text-align: center; } .woocommerce-account .woocommerce-LostPassword a { color: var(--axe-wc-muted); font-size: 0.9rem; } /* -------------------------------------------------------------------------- 10. Unified Buttons -------------------------------------------------------------------------- */ .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { font-family: var(--axe-wc-font); font-weight: 700; font-size: 0.95rem; padding: 12px 24px; border: none; border-radius: var(--axe-wc-radius); background: var(--axe-wc-primary); color: var(--axe-wc-white); cursor: pointer; text-decoration: none; transition: background-color var(--axe-wc-transition), transform var(--axe-wc-transition), box-shadow var(--axe-wc-transition); } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--axe-wc-primary-bright); color: var(--axe-wc-white); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 122, 75, 0.2); } .woocommerce a.button:disabled, .woocommerce button.button:disabled, .woocommerce input.button:disabled, .woocommerce a.button.disabled, .woocommerce button.button.disabled, .woocommerce input.button.disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* Update Cart Button */ .woocommerce button[name="update_cart"], .woocommerce input[name="update_cart"] { background: var(--axe-wc-card); color: var(--axe-wc-dark); border: 1px solid var(--axe-wc-border); } .woocommerce button[name="update_cart"]:hover, .woocommerce input[name="update_cart"]:hover { background: var(--axe-wc-primary-soft); border-color: var(--axe-wc-primary); color: var(--axe-wc-primary); } /* Apply Coupon */ .woocommerce button[name="apply_coupon"], .woocommerce input[name="apply_coupon"] { background: var(--axe-wc-primary); color: var(--axe-wc-white); } /* -------------------------------------------------------------------------- 11. WooCommerce Blocks Overrides -------------------------------------------------------------------------- */ .wc-block-grid__products { /* display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; */ } .wc-block-grid__product { background: var(--axe-wc-white); border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius-lg); overflow: hidden; box-shadow: var(--axe-wc-shadow); transition: transform var(--axe-wc-transition), box-shadow var(--axe-wc-transition); } .wc-block-grid__product:hover { transform: translateY(-4px); box-shadow: var(--axe-wc-shadow-hover); } .wc-block-grid__product-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .wc-block-grid__product-title { font-family: var(--axe-wc-font); font-weight: 700; font-size: 1rem; padding: 14px 18px 0; } .wc-block-grid__product-price { font-family: var(--axe-wc-font-label); font-weight: 700; color: var(--axe-wc-primary); padding: 8px 18px; } .wc-block-grid__product-add-to-cart .wp-block-button__link, .wc-block-grid__product-add-to-cart a { display: block; width: calc(100% - 36px); margin: 8px 18px 18px; padding: 11px 16px; border-radius: var(--axe-wc-radius); background: var(--axe-wc-primary); color: var(--axe-wc-white); font-family: var(--axe-wc-font); font-weight: 700; text-align: center; text-decoration: none; transition: background-color var(--axe-wc-transition); } .wc-block-grid__product-add-to-cart .wp-block-button__link:hover, .wc-block-grid__product-add-to-cart a:hover { background: var(--axe-wc-primary-bright); } /* Mini Cart Block */ .wc-block-mini-cart__drawer { font-family: var(--axe-wc-font); } .wc-block-mini-cart__drawer .wc-block-mini-cart__title { font-weight: 800; } .wc-block-mini-cart__drawer .wc-block-components-product-name { font-weight: 700; color: var(--axe-wc-dark); } .wc-block-mini-cart__drawer .wc-block-components-product-price { color: var(--axe-wc-primary); font-weight: 700; } .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button { border-radius: var(--axe-wc-radius); font-family: var(--axe-wc-font); font-weight: 700; } .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button--outlined { border-color: var(--axe-wc-primary); color: var(--axe-wc-primary); } .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button:not(.wc-block-components-button--outlined) { background: var(--axe-wc-primary); } /* WooCommerce Store Notices Block */ .wc-block-store-notices .wc-block-components-notice-banner { border-radius: var(--axe-wc-radius); font-family: var(--axe-wc-font); } /* -------------------------------------------------------------------------- 12. Additional Info Table (Product Attributes) -------------------------------------------------------------------------- */ .woocommerce table.shop_attributes { border: 1px solid var(--axe-wc-border); border-radius: var(--axe-wc-radius); overflow: hidden; } .woocommerce table.shop_attributes th { background: var(--axe-wc-card); font-weight: 700; color: var(--axe-wc-dark); padding: 12px 18px; font-size: 0.9rem; border: none; border-bottom: 1px solid var(--axe-wc-border); } .woocommerce table.shop_attributes td { padding: 12px 18px; font-size: 0.9rem; color: var(--axe-wc-muted); border: none; border-bottom: 1px solid var(--axe-wc-border); background: var(--axe-wc-white); } .woocommerce table.shop_attributes td p { margin: 0; } .woocommerce table.shop_attributes tr:last-child th, .woocommerce table.shop_attributes tr:last-child td { border-bottom: none; } /* -------------------------------------------------------------------------- 13. Responsive Breakpoints -------------------------------------------------------------------------- */ @media screen and (max-width: 1200px) { .woocommerce ul.products, .wc-block-grid__products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 900px) { .woocommerce ul.products, .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } /* Cart responsive */ .woocommerce table.shop_table { font-size: 0.88rem; } .woocommerce table.shop_table .product-thumbnail img { width: 60px; height: 60px; } /* Checkout columns */ .woocommerce-checkout .col2-set { display: block; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; } /* My Account layout */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; } .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 24px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { padding: 10px 16px; font-size: 0.85rem; white-space: nowrap; } } @media screen and (max-width: 600px) { .woocommerce ul.products, .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { font-size: 0.88rem; padding: 10px 12px 0; } .woocommerce ul.products li.product .price { font-size: 0.92rem; padding: 6px 12px 0; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.add_to_cart_button { width: calc(100% - 24px); margin: 10px 12px 12px; padding: 9px 12px; font-size: 0.82rem; } /* Single product */ .woocommerce div.product, .woocommerce #content div.product { grid-template-columns: 1fr; gap: 28px; } .woocommerce div.product div.summary { position: static; } .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100%; float: none; } .woocommerce div.product div.images { margin-bottom: 0; } .axiseast-wc-trust-badges { grid-template-columns: 1fr; } /* Tabs stacking */ .woocommerce div.product .woocommerce-tabs ul.tabs { flex-wrap: wrap; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 10px 16px; font-size: 0.85rem; } /* Cart table */ .woocommerce table.shop_table td.actions { padding: 14px; } .woocommerce table.shop_table td.actions .coupon { flex-direction: column; align-items: stretch; } .woocommerce table.shop_table td.actions .coupon .input-text { min-width: 100%; } .woocommerce .cart_totals { padding: 20px; } /* Checkout */ .woocommerce-checkout #order_review { padding: 16px; } /* Pagination */ .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 36px; height: 36px; font-size: 0.82rem; } } /* -------------------------------------------------------------------------- Mobile Sticky Add to Cart Bar -------------------------------------------------------------------------- */ .axiseast-wc-mobile-sticky-bar { display: none; } @media screen and (max-width: 768px) { .single-product .axiseast-wc-mobile-sticky-bar { display: flex; align-items: center; gap: 12px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 16px; border-top: 1px solid var(--axe-wc-border); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); animation: axiseast-wc-slide-up 300ms ease both; } .axiseast-wc-sticky-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--axe-wc-border); } .axiseast-wc-sticky-thumb img { width: 100%; height: 100%; object-fit: cover; } .axiseast-wc-sticky-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .axiseast-wc-sticky-title { font-family: var(--axe-wc-font); font-weight: 700; font-size: 0.85rem; color: var(--axe-wc-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .axiseast-wc-sticky-price { font-family: var(--axe-wc-font-label); font-weight: 800; font-size: 0.9rem; color: var(--axe-wc-primary); } .axiseast-wc-sticky-action { flex-shrink: 0; } .axiseast-wc-sticky-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: var(--axe-wc-radius-pill); background: linear-gradient(135deg, var(--axe-wc-primary-dark) 0%, var(--axe-wc-primary) 100%); color: #ffffff !important; font-family: var(--axe-wc-font); font-size: 0.88rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(13, 122, 75, 0.25); } } @keyframes axiseast-wc-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @media screen and (max-width: 480px) { .woocommerce ul.products, .wc-block-grid__products { grid-template-columns: 1fr; gap: 16px; } .woocommerce ul.products li.product a img { aspect-ratio: 4 / 3; } } /* -------------------------------------------------------------------------- 14. Print Styles -------------------------------------------------------------------------- */ @media print { .woocommerce .cart_totals .wc-proceed-to-checkout, .woocommerce table.shop_table td.actions, .woocommerce-account .woocommerce-MyAccount-navigation { display: none; } } /* -------------------------------------------------------------------------- 15. Animations -------------------------------------------------------------------------- */ @keyframes axiseast-wc-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .woocommerce ul.products li.product { animation: axiseast-wc-fade-up 500ms ease both; } .woocommerce ul.products li.product:nth-child(2) { animation-delay: 60ms; } .woocommerce ul.products li.product:nth-child(3) { animation-delay: 120ms; } .woocommerce ul.products li.product:nth-child(4) { animation-delay: 180ms; } .woocommerce ul.products li.product:nth-child(5) { animation-delay: 240ms; } .woocommerce ul.products li.product:nth-child(6) { animation-delay: 300ms; } .woocommerce ul.products li.product:nth-child(7) { animation-delay: 360ms; } .woocommerce ul.products li.product:nth-child(8) { animation-delay: 420ms; } .woocommerce ul.products li.product:nth-child(9) { animation-delay: 480ms; } .woocommerce ul.products li.product:nth-child(10) { animation-delay: 540ms; } .woocommerce ul.products li.product:nth-child(11) { animation-delay: 600ms; } .woocommerce ul.products li.product:nth-child(12) { animation-delay: 660ms; } /* -------------------------------------------------------------------------- 16. Accessibility Enhancements -------------------------------------------------------------------------- */ .woocommerce div.product a:focus-visible, .woocommerce div.product button:focus-visible, .woocommerce .products a:focus-visible, .woocommerce .woocommerce-cart-form a:focus-visible, .woocommerce .woocommerce-cart-form button:focus-visible, .woocommerce .cart-collaterals a:focus-visible, .woocommerce form.checkout input:focus-visible, .woocommerce form.checkout select:focus-visible, .woocommerce .woocommerce-MyAccount-navigation a:focus-visible, .woocommerce .woocommerce-MyAccount-content a:focus-visible { outline: 2px solid var(--axe-wc-primary); outline-offset: 2px; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product, .woocommerce ul.products li.product a img, .woocommerce ul.products li.product .button, .woocommerce div.product form.cart .button, .wc-block-grid__product { animation: none !important; transition: none !important; } }