/* ======================================================= WooCommerce integration styles Restyles WooCommerce's default markup to match the theme's existing design tokens (colors/spacing/typography already defined in main.css) without touching main.css section rules. ======================================================= */ /* ---------- Shop / archive ---------- */ .woocommerce-page ul.products { display: grid; grid-template-columns: 1fr; gap: 24px; list-style: none; padding: 0; margin: 24px 0; } @media (min-width: 640px) { .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); } } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { list-style: none; text-align: center; } .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; } .product-loop-description { font-size: 0.9rem; color: #666; margin: 12px 0; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-align: left; } .woocommerce-result-count, .woocommerce-ordering { font-size: .9rem; color: var(--clr-text-light); } .woocommerce-ordering select { padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--clr-border); font-family: inherit; } nav.woocommerce-pagination { margin-top: 32px; text-align: center; } nav.woocommerce-pagination ul { display: inline-flex; gap: 8px; list-style: none; padding: 0; } nav.woocommerce-pagination a, nav.woocommerce-pagination span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--clr-border); color: var(--clr-text); } nav.woocommerce-pagination .current { background: var(--clr-brown); color: var(--clr-white); border-color: var(--clr-brown); } /* ---------- Breadcrumb ---------- */ .woocommerce-breadcrumb { font-size: .85rem; color: var(--clr-text-light); margin-bottom: 24px; } .woocommerce-breadcrumb a { color: var(--clr-text-light); font-weight: 600; } .woocommerce-breadcrumb a:hover { color: var(--clr-terracotta); } /* ---------- Single product: layout ---------- */ .product-page { background-color: #FFFFFF; padding-top: 50px; } /* ---------- Single product: gallery ---------- */ .product-gallery.woocommerce-product-gallery-wrap { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 16px; align-items: start; position: relative; } .woocommerce-product-gallery { width: 100%; } /* ensure it takes full space */ .woocommerce-product-gallery__wrapper { flex: 1; min-width: 0; border-radius: 16px; overflow: hidden; background: white; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.05); } .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .woocommerce-product-gallery__trigger { position: absolute; top: 16px; right: 16px; z-index: 10; width: 40px; height: 40px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-size: 0; } .woocommerce-product-gallery__trigger::before { content: ""; display: block; width: 16px; height: 16px; background: url('data:image/svg+xml;utf8,') no-repeat center; background-size: contain; } .flex-control-thumbs { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; width: 80px; flex-shrink: 0; } .flex-control-thumbs li { width: 100%; } .flex-control-thumbs img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; border: 2px solid transparent; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .flex-control-thumbs img.flex-active { border-color: #3E2B23; } /* Custom Wishlist Icon styling (visual only) */ .product-gallery::after { content: "\f004"; font-family: "Font Awesome 6 Free"; font-weight: 400; position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-size: 20px; color: #666; cursor: pointer; } .product-gallery .woocommerce-product-gallery__trigger { top: 68px; right: 16px; } /* ---------- Single product: summary ---------- */ .product-summary { display: flex; flex-direction: column; } .product-summary .product_meta { order: -5; font-size: 1.05rem; color: #638C6D; font-weight: 600; margin-bottom: 8px; display: flex; flex-direction: column; } .product-summary .product_meta a { color: #638C6D; text-decoration: none; } /* Default WooCommerce title */ /* .product-summary > .product_title { display: none !important; } - Removed to prevent title from disappearing */ /* Desktop explicit title */ .product-summary .sanusq-product-title-desktop { display: block !important; order: -4; margin-bottom: 16px; } .product-summary .sanusq-product-title-desktop .product_title { font-size: 2.2rem; font-weight: 700; color: #2C4C3B; margin: 0; line-height: 1.3; letter-spacing: -0.02em; display: block !important; } /* Mobile explicit title */ .sanusq-product-title-mobile { display: none; } @media (max-width: 899px) { .sanusq-product-title-desktop { display: none !important; } .sanusq-product-title-mobile { display: block !important; margin-bottom: 24px; } .sanusq-product-title-mobile .product_title { font-size: 1.8rem; font-weight: 700; color: #2C4C3B; line-height: 1.3; margin: 0; display: block !important; } } .product-summary .woocommerce-product-rating { order: -3; display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 0.95rem; color: #666; } .product-summary .star-rating { color: #D4AF37; } /* Soft Gold */ .product-summary p.price { order: -2; font-size: 2.4rem; font-weight: 700; color: #2B2118; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; letter-spacing: -0.02em; } .product-summary p.price ins { text-decoration: none; color: #2C4C3B; } .product-summary p.price del { font-size: 1.2rem; color: #A0A0A0; font-weight: 400; } .sanusq-save-badge { background: #E9F0EA; color: #2C4C3B; font-size: 0.9rem; padding: 6px 12px; border-radius: 6px; font-weight: 600; margin-left: 8px; letter-spacing: 0.5px; text-transform: uppercase; } .product-summary .woocommerce-product-details__short-description { order: -1; font-size: 1.1rem; line-height: 1.8; color: #555; margin-bottom: 32px; font-weight: 300; } form.cart { order: 10; display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; background: #FAFAFA; padding: 32px; border-radius: 12px; margin-top: 16px; border: 1px solid #EAEAEA; } form.cart .quantity { flex: 0 0 auto; display: inline-flex; background: #FFF; border: 1px solid #DDD; border-radius: 8px; height: 56px; box-sizing: border-box; } form.cart .qty-stepper__btn { background: transparent; width: 44px; height: 100%; font-size: 1.2rem; cursor: pointer; transition: 0.2s; } form.cart .qty-stepper__btn:hover { background: rgba(0,0,0,0.05); } form.cart .qty-stepper__input { width: 44px; height: 100%; background: transparent; font-size: 1.1rem; text-align: center; border: none; padding: 0; margin: 0; box-shadow: none; box-sizing: border-box; } form.cart .single_add_to_cart_button { flex: 1 1 auto; min-width: 140px; height: 56px; box-sizing: border-box; border-radius: 8px; padding: 0 24px; font-weight: 600; font-size: 1rem; display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s ease; text-align: center; margin-top: 0; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; } /* Add to Cart (Secondary) */ form.cart .single_add_to_cart_button:not(.btn-buy-now) { background: #FFF; color: #2C4C3B; border: 1px solid #2C4C3B; box-shadow: none; } form.cart .single_add_to_cart_button:not(.btn-buy-now):hover { background: #F4F7F5; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(44,76,59,0.1); } form.cart .single_add_to_cart_button::before { content: "\f07a"; font-family: "Font Awesome 6 Free"; font-weight: 900; } /* Buy Now (Primary) */ form.cart .btn-buy-now { background: #2C4C3B; color: white; border: 1px solid #2C4C3B; box-shadow: 0 4px 15px rgba(44,76,59,0.2); } form.cart .btn-buy-now:hover { background: #1F362A; border-color: #1F362A; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(44,76,59,0.3); } form.cart .btn-buy-now::before { display: none; } form.cart .cart-perks { flex: 1 1 auto; display: flex; justify-content: flex-start; align-items: center; gap: 16px; font-size: 0.9rem; color: #555; margin-top: 0; font-weight: 600; padding: 0; } form.cart .cart-perks span { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .woocommerce-variation.single_variation { margin-bottom: 16px; width: 100%; } .woocommerce-variation-add-to-cart { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; width: 100%; } /* Mobile Cart Layout & Safe Area */ @media (max-width: 768px) { /* 1. Reset outer wrappers to allow edge-to-edge Gallery (override Elementor/WooCommerce) */ .woocommerce div.product, .product-detail-wrapper { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden; } /* 1.5. Fix Gallery Layout for Mobile */ .product-gallery.woocommerce-product-gallery-wrap { flex-direction: column; } .flex-control-thumbs { flex-direction: row; width: 100%; overflow-x: auto; } .flex-control-thumbs li { width: 80px; flex: 0 0 auto; } /* 2. Assign Safe Area strictly to .product-summary (The only container holding text/buttons) */ .woocommerce div.product .product-summary { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; /* Neutralize any negative margins */ } /* 3. Ensure form.cart doesn't break out of the summary */ .woocommerce div.product form.cart { margin-left: 0 !important; margin-right: 0 !important; } /* 3. Cart Form Layout */ form.cart { padding: 20px 16px !important; justify-content: space-between; /* Fallback for older browsers without gap */ width: 100% !important; box-sizing: border-box !important; /* Keep gap for modern browsers, but rely on space-between for old ones */ gap: 0; } form.cart .quantity { flex: 0 0 100%; width: 100%; justify-content: center; margin-bottom: 12px; /* Fallback vertical spacing */ } form.cart .qty-stepper__input { flex: 0 0 80px; } /* Fixed width instead of stretching */ form.cart .single_add_to_cart_button { flex: 0 0 48% !important; /* Strict width to avoid flex-grow issues */ width: 48% !important; min-width: 0 !important; padding: 0 4px !important; font-size: 0.95rem; margin-bottom: 12px; /* Fallback vertical spacing */ } form.cart .single_add_to_cart_button::before { display: none; } form.cart .cart-perks { flex: 0 0 100%; width: 100%; justify-content: center; flex-wrap: wrap; margin-top: 4px; } form.cart .cart-perks span { white-space: normal; text-align: center; justify-content: center; margin: 4px 8px; /* Fallback for gap */ } } /* Ultra-small Mobile Layout (e.g. iPhone SE 320px) */ @media (max-width: 359px) { form.cart { padding: 16px 12px !important; } form.cart .single_add_to_cart_button { flex: 0 0 100% !important; width: 100% !important; font-size: 1rem; padding: 0 16px !important; } } table.variations { order: 5; width: 100%; margin-bottom: 24px; } table.variations th { display: block; text-align: left; padding: 0 0 12px 0; font-size: 1.05rem; color: #333; font-weight: 600; } table.variations td { padding: 0; display: flex; flex-direction: column; gap: 12px; } table.variations select { width: 100%; padding: 14px 24px; border-radius: 999px; border: 1.5px solid #C4B9AF; background: transparent; font-family: inherit; font-size: 1.05rem; color: #3E2B23; font-weight: 700; appearance: none; cursor: pointer; text-align: center; } .stock { font-weight: 600; color: #638C6D; margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; } .stock::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: inline-block; width: 16px; height: 16px; border: 1px solid #638C6D; border-radius: 50%; font-size: 10px; text-align: center; line-height: 14px; } .stock.out-of-stock { color: #BA1A1A; } .stock.out-of-stock::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; border-color: #BA1A1A; } /* ---------- Single product: tabs ---------- */ .woocommerce-tabs { margin-top: 80px; border-top: 1px solid #EAEAEA; padding-top: 32px; } .woocommerce-tabs ul.tabs { display: flex; gap: 40px; overflow-x: auto; border-bottom: 1px solid #EAEAEA; margin: 0 0 40px; padding: 0; list-style: none; } .woocommerce-tabs ul.tabs li { margin: 0; } .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 16px 0; white-space: nowrap; font-weight: 600; color: #888; border-bottom: 3px solid transparent; font-size: 1.3rem; transition: color 0.3s; margin-bottom: -1px; text-transform: uppercase; letter-spacing: 1px; } .woocommerce-tabs ul.tabs li a:hover { color: #2C4C3B; } .woocommerce-tabs ul.tabs li.active a { color: #2C4C3B; border-color: #D4AF37; } .woocommerce-tabs .panel { padding: 0; background: transparent; font-size: 1.1rem; line-height: 1.9; color: #555; } .woocommerce-tabs .panel h2 { display: block; font-size: 1.8rem; color: #2C4C3B; margin-bottom: 24px; font-weight: 700; } /* ---------- Related products ---------- */ .related.products { margin-top: 64px; } .related.products > h2 { font-size: 1.5rem; text-align: center; margin-bottom: 32px; } .related.products ul.products { max-width: 900px; margin-left: auto; margin-right: auto; } /* ---------- Quantity stepper (cart items + single product use the same markup) ---------- */ .quantity { display: flex; align-items: center; border: 1px solid var(--clr-border); border-radius: 999px; overflow: hidden; width: fit-content; } .quantity .qty-stepper__btn { width: 34px; height: 38px; border: none; background: var(--clr-offwhite); font-size: 1.1rem; color: var(--clr-text); } .quantity .qty-stepper__input { width: 42px; height: 38px; border: none; text-align: center; font-family: inherit; font-weight: 600; -moz-appearance: textfield; padding: 0; } .quantity .qty-stepper__input::-webkit-outer-spin-button, .quantity .qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---------- Notices / messages ---------- */ .woocommerce-message, .woocommerce-error, .woocommerce-info { list-style: none; padding: 16px 20px; border-radius: var(--radius-sm); margin-bottom: 20px; background: var(--clr-offwhite); color: var(--clr-text); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .woocommerce-error { background: #FBEAEA; color: var(--clr-danger, #BA1A1A); } .woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button { background: var(--clr-brown); color: var(--clr-white); border-radius: 999px; padding: 8px 18px; font-weight: 600; } /* ---------- Cart page extras (cart.php / cart-totals.php overrides handle most of it via main.css .cart-* classes) ---------- */ .cart-actions-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-top: 20px; } .cart-coupon { display: flex; gap: 10px; flex: 1; min-width: 240px; } .cart-coupon .input-text { flex: 1; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--clr-border); font-family: inherit; } .cart-coupon .button { background: var(--clr-promo-btn, var(--clr-brown)); color: var(--clr-white); border: none; border-radius: var(--radius-sm); padding: 0 18px; font-weight: 600; font-family: inherit; } .cart_totals h2 { font-size: 1.2rem; } .cart_totals .woocommerce-shipping-calculator a { color: var(--clr-terracotta); font-weight: 600; } .wc-proceed-to-checkout { margin-top: 16px; } /* ---------- Checkout (default WooCommerce form, styled via CSS only — no template override for security) ---------- */ .woocommerce-checkout { padding: 32px 0 60px; } .woocommerce-checkout h3 { font-size: 1.05rem; margin-bottom: 20px; } .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields, #order_review { background: var(--clr-white); border-radius: var(--radius); padding: 26px; margin-bottom: 24px; } .woocommerce-checkout .form-row { margin-bottom: 18px; } .woocommerce-checkout .form-row label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 8px; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea { width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--clr-border); background: var(--clr-input-bg, var(--clr-offwhite)); font-family: inherit; } .woocommerce-checkout ul.wc_payment_methods { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; } .woocommerce-checkout ul.wc_payment_methods li.wc_payment_method { border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: 16px; } .woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label { font-weight: 600; } .woocommerce-checkout #payment .payment_box { background: var(--clr-offwhite); border-radius: var(--radius-sm); padding: 16px; margin-top: 12px; } .woocommerce-checkout #place_order { width: 100%; background: var(--clr-brown); color: var(--clr-white); border: none; border-radius: 999px; padding: 15px 30px; font-weight: 600; font-family: inherit; font-size: .95rem; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: .85rem; margin-bottom: 16px; } .woocommerce-checkout-review-order-table { width: 100%; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 10px 0; border-top: 1px solid var(--clr-border); text-align: left; } .woocommerce-checkout-review-order-table .product-name { text-align: left; } .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout-review-order-table td.product-total { text-align: right; } .woocommerce-checkout-review-order-table tfoot .order-total td { font-weight: 700; color: var(--clr-terracotta); } /* ---------- Order-received (thankyou.php override uses .order-success from main.css) ---------- */ ul.order_details { list-style: none; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin: 24px 0; } ul.order_details li { font-size: .85rem; } ul.order_details li strong { display: block; font-size: 1rem; } /* ---------- My Account ---------- */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; } .woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; color: var(--clr-text); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--clr-offwhite); color: var(--clr-brown); } .woocommerce-account .woocommerce-MyAccount-content { margin-top: 24px; } .woocommerce-account table.shop_table { width: 100%; border-collapse: collapse; } .woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td { padding: 12px; border-bottom: 1px solid var(--clr-border); text-align: left; } .woocommerce-account .button { background: var(--clr-brown); color: var(--clr-white); border-radius: 999px; padding: 10px 20px; font-weight: 600; display: inline-block; } .woocommerce-account form .form-row input.input-text { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--clr-border); width: 100%; } @media (min-width: 900px) { .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); } .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 220px; } .woocommerce-account .woocommerce-MyAccount-content { margin-left: 250px; margin-top: 0; } /* Single Product Layout */ .product-detail { display: grid; grid-template-columns: 4fr 6fr; gap: 40px; align-items: start; margin-bottom: 40px; } .product-gallery.woocommerce-product-gallery-wrap { position: sticky; top: 100px; max-width: 500px; margin-left: auto; } }