/* Cart / checkout / account */ .woocommerce-cart .to-container, .woocommerce-checkout .to-container, .woocommerce-account .to-container { max-width: var(--to-container); } /* * Card shell for checkout content only. * Do NOT use bare `.woocommerce-checkout` — WooCommerce also puts that * class on , which would style the whole page (including the header). */ form.woocommerce-checkout { background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); padding: 1.25rem; } /* * Checkout: simple grid — reset WooCommerce 48% float layout * (same trap as cart_totals in woocommerce-layout*.css). */ .woocommerce-checkout form.checkout.woocommerce-checkout, .woocommerce-page.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 1.5rem; align-items: start; background: transparent; border: 0; padding: 0; border-radius: 0; width: 100%; max-width: 100%; min-width: 0; } .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading, .woocommerce-checkout .col2-set, .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none !important; width: 100% !important; max-width: 100% !important; clear: none !important; } .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1; background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); padding: 1.25rem; } /* * WooCommerce prints #order_review_heading as a form sibling (outside the card). * Hide it — theme injects .to-checkout-order-heading inside #order_review instead. */ .woocommerce-checkout form.checkout > #order_review_heading { display: none !important; } .woocommerce-checkout .to-checkout-order-heading { margin: 0 0 .85rem; font-size: 1.15rem; font-weight: 800; line-height: 1.3; } .woocommerce-checkout #order_review { grid-column: 2; grid-row: 1; background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); padding: 1.15rem; box-shadow: var(--to-shadow); position: sticky; inset-block-start: calc(var(--to-header-h, 80px) + 16px); max-width: 100%; min-width: 0; overflow-x: hidden; box-sizing: border-box; } /* One card only — don't nest a second bordered box for the review table. */ .woocommerce-checkout #order_review table.shop_table { border: 0; border-radius: 0; margin: 0 0 1rem; width: 100%; max-width: 100%; table-layout: fixed; overflow: hidden; } .woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td { border-inline: 0; border-block-start: 0; padding-inline: 0; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; } .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-shipping-fields > h3, .woocommerce-checkout .woocommerce-additional-fields > h3 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 800; } .woocommerce-checkout #ship-to-different-address { margin-top: 10px; } @media (max-width: 992px) { .woocommerce-checkout form.checkout.woocommerce-checkout, .woocommerce-page.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 1.15rem; } /* Reset explicit column placement — otherwise grid-column:2 creates an implicit 2nd column */ .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review { grid-column: 1 !important; grid-row: auto !important; position: static; } } /* ========== Cart page redesign ========== */ .woocommerce-cart .to-content { width: min(100% - 2rem, 1180px); } .woocommerce-cart .to-page__header { margin-block-end: .65rem; } .woocommerce-cart .to-page__title { font-size: clamp(1.65rem, 3vw, 2.15rem); } .to-cart__meta { margin: 0 0 1.15rem; color: var(--to-muted); font-size: .95rem; font-weight: 500; } .to-cart__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 1.5rem; align-items: start; width: 100%; max-width: 100%; min-width: 0; } .to-cart__main, .to-cart__aside, .to-cart__form, .woocommerce-cart .to-cart { min-width: 0; max-width: 100%; } .to-cart__form { background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); padding: 0; overflow: hidden; animation: to-cart-in .35s ease both; width: 100%; } @keyframes to-cart-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .woocommerce-cart .to-cart__table.shop_table { border: 0; border-radius: 0; margin: 0; table-layout: fixed; width: 100%; } .woocommerce-cart .to-cart__table .product-remove { width: 48px; } .woocommerce-cart .to-cart__table .product-thumbnail { width: 96px; } .woocommerce-cart .to-cart__table .product-name { width: auto; } .woocommerce-cart .to-cart__table .product-price { width: 110px; } .woocommerce-cart .to-cart__table .product-quantity { width: 110px; } .woocommerce-cart .to-cart__table .product-subtotal { width: 120px; } .woocommerce-cart .to-cart__table thead { background: #f7f4ea; } .woocommerce-cart .to-cart__table thead th { border: 0 !important; padding: .85rem 1rem; font-size: .78rem; font-weight: 700; color: #5a4a1a; text-align: start; background: transparent !important; vertical-align: middle; } .woocommerce-cart .to-cart__table td { border: 0 !important; border-block-start: 1px solid var(--to-line) !important; padding: 1.1rem 1rem; vertical-align: middle; background: transparent !important; text-align: start; } .woocommerce-cart .to-cart__row:hover td { background: #fafafa !important; } .woocommerce-cart .to-cart__table .product-thumbnail img, .woocommerce-cart .to-cart__thumb img { width: 72px; max-width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: #f6f6f6; border: 1px solid var(--to-line); } .woocommerce-cart .to-cart__table .product-name a { font-weight: 700; font-size: .95rem; line-height: 1.4; color: var(--to-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .woocommerce-cart .to-cart__table .product-name a:hover { color: var(--to-orange-deep); } .woocommerce-cart .to-cart__table .product-price, .woocommerce-cart .to-cart__table .product-subtotal { font-weight: 700; color: var(--to-price); white-space: nowrap; } .woocommerce-cart .to-cart__table .product-subtotal { font-size: 1.02rem; } .woocommerce-cart .to-cart__table .quantity .qty { width: 4rem; min-height: 42px; text-align: center; border: var(--to-control-border); border-radius: var(--to-control-radius); background: #fff; } .woocommerce-cart .to-cart__remove.remove { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #f4f4f4; color: #666 !important; font-size: 1.15rem; line-height: 1; border: 0 !important; text-decoration: none !important; } .woocommerce-cart .to-cart__remove.remove:hover { background: #ffe8e8; color: #c62828 !important; } /* Keep TD as table-cell — never set display:flex on the cell itself */ .woocommerce-cart .to-cart__actions-row td.actions { display: table-cell !important; width: auto !important; background: #fafafa !important; border-block-start: 1px solid var(--to-line) !important; padding: 1rem 1.15rem !important; vertical-align: middle; } .woocommerce-cart .to-cart__actions-bar { display: flex; flex-wrap: wrap; gap: .85rem 1rem; align-items: center; justify-content: space-between; width: 100%; } .woocommerce-cart .to-cart__coupon, .woocommerce-cart table.cart td.actions .coupon { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: .5rem; align-items: center; flex: 1 1 280px; max-width: 480px; min-width: 0 !important; float: none !important; margin: 0 !important; width: auto !important; } .woocommerce-cart .to-cart__coupon .input-text, .woocommerce-cart table.cart td.actions .coupon .input-text { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; min-height: var(--to-control-height); border: var(--to-control-border) !important; border-radius: var(--to-control-radius) !important; padding-inline: var(--to-control-pad-x) !important; background: #fff !important; float: none !important; } .woocommerce-cart .to-cart__coupon .button { flex: 0 0 auto; white-space: nowrap; background: linear-gradient(90deg, var(--to-yellow), var(--to-orange)) !important; color: #1a1a1a !important; border: 0 !important; min-height: var(--to-control-height) !important; padding-inline: 1.1rem !important; } .woocommerce-cart .to-cart__action-btns { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-inline-start: auto; } .woocommerce-cart .to-cart__continue { color: var(--to-muted); font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; } .woocommerce-cart .to-cart__continue:hover { color: var(--to-orange-deep); } .woocommerce-cart .to-cart__action-btns .button { background: #fff !important; color: var(--to-ink) !important; border: 1px solid var(--to-line) !important; min-height: var(--to-control-height) !important; padding-inline: 1.1rem !important; white-space: nowrap; } .woocommerce-cart .to-cart__action-btns .button:hover { border-color: #ccc !important; background: #f7f7f7 !important; color: var(--to-ink) !important; filter: none !important; box-shadow: none !important; transform: none !important; } .woocommerce-cart .to-cart__action-btns .button:disabled, .woocommerce-cart .to-cart__action-btns .button[disabled] { opacity: .55; cursor: not-allowed; } .woocommerce-cart .to-cart__aside { position: sticky; inset-block-start: calc(var(--to-header-h, 80px) + 16px); } /* * WooCommerce layout CSS (woocommerce-layout-rtl.css) forces: * .cart-collaterals .cart_totals { float:left; width:48%; } * That shrinks the summary to ~half of our sidebar column. Reset it. */ .woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals, .woocommerce-cart .cart-collaterals, .woocommerce-cart .to-cart__collaterals { float: none !important; width: 100% !important; clear: none !important; background: transparent; border: 0; padding: 0; border-radius: 0; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-cart .to-cart-totals { float: none !important; width: 100% !important; max-width: 100% !important; clear: none !important; } .woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells, .woocommerce .cart-collaterals .shipping_calculator, .woocommerce-page .cart-collaterals .shipping_calculator { float: none !important; width: 100% !important; clear: none !important; } .woocommerce-cart .to-cart-totals { background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); padding: 1.15rem 1.15rem 1rem; box-shadow: var(--to-shadow); position: relative; overflow: hidden; } .woocommerce-cart .to-cart-totals::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px; background: linear-gradient(90deg, var(--to-yellow), var(--to-orange)); } .woocommerce-cart .to-cart-totals__head { margin-block-end: .85rem; } .woocommerce-cart .to-cart-totals__eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--to-gold-dark); margin-block-end: .2rem; } .woocommerce-cart .to-cart-totals h2 { margin: 0; font-size: 1.15rem; font-weight: 800; } .woocommerce-cart .to-cart-totals__table.shop_table { border: 0; border-radius: 0; margin: 0 0 .85rem; width: 100%; } .woocommerce-cart .to-cart-totals__table th, .woocommerce-cart .to-cart-totals__table td { border: 0; border-block-end: 1px solid var(--to-line); padding: .65rem 0; background: transparent; font-size: .92rem; vertical-align: top; } .woocommerce-cart .to-cart-totals__table tr:last-child th, .woocommerce-cart .to-cart-totals__table tr:last-child td { border-block-end: 0; } .woocommerce-cart .to-cart-totals__table .order-total th, .woocommerce-cart .to-cart-totals__table .order-total td { padding-block-start: .85rem; font-size: 1.08rem; font-weight: 800; } .woocommerce-cart .to-cart-totals__table .order-total td { color: var(--to-orange-deep); } .woocommerce-cart .to-cart-totals__table ul#shipping_method { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; } .woocommerce-cart .to-cart-totals__table ul#shipping_method label { display: inline-flex; align-items: flex-start; gap: .4rem; line-height: 1.35; } .woocommerce-cart .woocommerce-shipping-destination { margin: .45rem 0 0; font-size: .8rem; color: var(--to-muted); line-height: 1.4; } .woocommerce-cart .shipping-calculator-button { font-size: .82rem; font-weight: 700; color: var(--to-orange-deep); } .woocommerce-cart .to-cart-totals__checkout { margin: 0 0 .75rem; padding: 0; } .woocommerce-cart .to-cart-totals__checkout .checkout-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; border: 0; border-radius: var(--to-control-radius); font-weight: 800; font-size: 1rem; text-align: center; } .woocommerce-cart .to-cart-totals__checkout .checkout-button:hover { filter: brightness(1.03); } /* Tamara / Tabby (and similar gateway widgets) — full width under CTA */ .woocommerce-cart .to-cart-totals__offers { display: grid; gap: .65rem; margin: 0 0 .65rem; width: 100%; } .woocommerce-cart .to-cart-totals__offers:empty { display: none; } .woocommerce-cart .to-cart-totals__offers .checkout-button { display: none !important; } .woocommerce-cart .to-cart-totals__offers tamara-widget, .woocommerce-cart .to-cart-totals__offers .tabbyPromo, .woocommerce-cart .to-cart-totals__offers [class*="tabby"], .woocommerce-cart .to-cart-totals__offers [class*="tamara"], .woocommerce-cart .to-cart-totals__offers iframe, .woocommerce-cart .to-cart-totals__offers > * { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; box-sizing: border-box; } .woocommerce-cart .to-cart-totals__note { margin: 0; font-size: .76rem; color: var(--to-muted); line-height: 1.45; text-align: center; } .to-cart-empty { max-width: 480px; margin: 1.5rem auto 2.5rem; padding: 2.5rem 1.5rem; text-align: center; background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); box-shadow: var(--to-shadow); animation: to-cart-in .35s ease both; } .to-cart-empty__icon { display: inline-grid; place-items: center; width: 88px; height: 88px; margin-block-end: 1rem; border-radius: 999px; background: linear-gradient(145deg, rgba(255, 184, 0, .28), rgba(240, 120, 0, .12)); color: var(--to-orange-deep); } .to-cart-empty .cart-empty, .to-cart-empty .woocommerce-info { border: 0; background: transparent; padding: 0; margin: 0 0 1.25rem; color: var(--to-ink); font-size: 1.1rem; font-weight: 700; box-shadow: none; } .to-cart-empty__cta { margin: 0; } .to-cart-empty__cta .button { display: inline-flex; min-height: 48px; padding-inline: 1.5rem; align-items: center; justify-content: center; border: 0; border-radius: var(--to-control-radius); font-weight: 800; } .woocommerce-cart .cross-sells { margin-block-start: 2rem; padding: 1.25rem; background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); } .woocommerce-cart .cross-sells > h2 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 800; } @media (max-width: 992px) { .to-cart__grid { grid-template-columns: 1fr; } .woocommerce-cart .to-cart__aside { position: static; } } @media (max-width: 767px) { /* Break out of table formatting so grid rows actually work */ .woocommerce-cart .to-cart__table.shop_table, .woocommerce-cart .to-cart__table.shop_table tbody, .woocommerce-cart .to-cart__table.shop_table thead { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .woocommerce-cart .to-cart__table thead { display: none !important; } /* Kill desktop fixed column widths that inflate table min-content */ .woocommerce-cart .to-cart__table .product-remove, .woocommerce-cart .to-cart__table .product-thumbnail, .woocommerce-cart .to-cart__table .product-name, .woocommerce-cart .to-cart__table .product-price, .woocommerce-cart .to-cart__table .product-quantity, .woocommerce-cart .to-cart__table .product-subtotal { width: auto !important; max-width: none !important; } .woocommerce-cart .to-cart__table tr.to-cart__row { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "thumb name remove" "thumb price price" "qty qty subtotal"; gap: .55rem .75rem; padding: 1rem; border-block-start: 1px solid var(--to-line); width: 100%; max-width: 100%; box-sizing: border-box; } .woocommerce-cart .to-cart__table tr.to-cart__row td { display: block !important; width: auto !important; max-width: 100% !important; border: 0 !important; padding: 0 !important; text-align: start !important; } .woocommerce-cart .to-cart__table .product-thumbnail { grid-area: thumb; } .woocommerce-cart .to-cart__table .product-name { grid-area: name; min-width: 0; } .woocommerce-cart .to-cart__table .product-remove { grid-area: remove; justify-self: end; } .woocommerce-cart .to-cart__table .product-price { grid-area: price; } .woocommerce-cart .to-cart__table .product-quantity { grid-area: qty; } .woocommerce-cart .to-cart__table .product-subtotal { grid-area: subtotal; justify-self: end; align-self: center; } .woocommerce-cart .to-cart__table .product-thumbnail img, .woocommerce-cart .to-cart__thumb img { width: 72px; height: 72px; } .woocommerce-cart .to-cart__table td::before { display: none !important; content: none !important; } .woocommerce-cart .to-cart__actions-row { display: block !important; width: 100%; max-width: 100%; border-block-start: 1px solid var(--to-line); } .woocommerce-cart .to-cart__actions-row td.actions { display: block !important; width: 100% !important; max-width: 100% !important; padding: 1rem !important; box-sizing: border-box; } .woocommerce-cart .to-cart__actions-bar { flex-direction: column; align-items: stretch; width: 100% !important; max-width: 100% !important; } /* Must match desktop specificity: .woocommerce-cart table.cart td.actions .coupon */ .woocommerce-cart .to-cart__coupon, .woocommerce-cart table.cart td.actions .coupon { max-width: none !important; flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; } .woocommerce-cart .to-cart__coupon .input-text, .woocommerce-cart table.cart td.actions .coupon .input-text { width: auto !important; max-width: none !important; min-width: 0 !important; flex: 1 1 auto !important; } .woocommerce-cart .to-cart__action-btns { margin-inline-start: 0; width: 100%; max-width: 100%; justify-content: space-between; min-width: 0; } .woocommerce-cart .to-cart__action-btns .button { flex: 1 1 auto; } .woocommerce-cart .to-cart-totals, .woocommerce-cart .to-cart__aside, .woocommerce-cart .to-cart__collaterals { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* Reset WooCommerce account float layout completely */ .woocommerce-account .woocommerce, .woocommerce-account .woocommerce .col2-set, .woocommerce-account .woocommerce .u-columns, .woocommerce-account .woocommerce .col-1, .woocommerce-account .woocommerce .col-2, .woocommerce-account .woocommerce .u-column1, .woocommerce-account .woocommerce .u-column2, .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none !important; clear: none !important; } .woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after, .woocommerce-account .col2-set::before, .woocommerce-account .col2-set::after, .woocommerce-account .u-columns::before, .woocommerce-account .u-columns::after { content: none !important; display: none !important; } .woocommerce-account .woocommerce { display: block; width: 100%; max-width: 100%; } /* ========== Logged out: login + register ========== */ .woocommerce-account #customer_login, .woocommerce-account .woocommerce > .u-columns.col2-set, .woocommerce-account .woocommerce > #customer_login.col2-set { display: grid !important; grid-template-columns: 1fr; gap: 1.25rem; width: 100% !important; max-width: 960px; margin-inline: auto; align-items: stretch; } @media (min-width: 900px) { .woocommerce-account #customer_login, .woocommerce-account .woocommerce > .u-columns.col2-set, .woocommerce-account .woocommerce > #customer_login.col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin-inline: 0; } } .woocommerce-account #customer_login > .col-1, .woocommerce-account #customer_login > .col-2, .woocommerce-account #customer_login > .u-column1, .woocommerce-account #customer_login > .u-column2, .woocommerce-account .woocommerce > .u-columns > .col-1, .woocommerce-account .woocommerce > .u-columns > .col-2, .woocommerce-account .woocommerce > .u-columns > .u-column1, .woocommerce-account .woocommerce > .u-columns > .u-column2 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 1.5rem !important; background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); box-sizing: border-box; min-width: 0; } .woocommerce-account #customer_login h2, .woocommerce-account .woocommerce > .u-columns h2 { margin: 0 0 1.1rem; font-size: 1.25rem; font-weight: 800; line-height: 1.3; } .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register, .woocommerce-account .woocommerce-ResetPassword { display: flex; flex-direction: column; gap: 0; width: 100%; height: 100%; } .woocommerce-account .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; } .woocommerce-account .woocommerce-form-login .form-row, .woocommerce-account .woocommerce-form-register .form-row, .woocommerce-account .woocommerce-ResetPassword .form-row, .woocommerce-account .woocommerce-form-row { width: 100% !important; float: none !important; margin: 0 0 1rem !important; padding: 0 !important; } .woocommerce-account .woocommerce-form-login .input-text, .woocommerce-account .woocommerce-form-register .input-text, .woocommerce-account .woocommerce-ResetPassword .input-text, .woocommerce-account .woocommerce-EditAccountForm .input-text, .woocommerce-account .woocommerce-Input { width: 100% !important; max-width: 100% !important; } .woocommerce-account .woocommerce-form-login .password-input, .woocommerce-account .woocommerce-form-register .password-input, .woocommerce-account .woocommerce-EditAccountForm .password-input { display: block; position: relative; width: 100%; } .woocommerce-account .woocommerce-form-login .show-password-input, .woocommerce-account .woocommerce-form-register .show-password-input, .woocommerce-account .woocommerce-EditAccountForm .show-password-input { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; } .woocommerce-account .woocommerce-form-login .password-input .input-text, .woocommerce-account .woocommerce-form-register .password-input .input-text { padding-inline-end: 2.75rem; } .woocommerce-account .woocommerce-form-login .button, .woocommerce-account .woocommerce-form-register .button, .woocommerce-account .woocommerce-ResetPassword .button, .woocommerce-account .woocommerce-EditAccountForm .button { width: 100% !important; float: none !important; margin: 0 !important; white-space: normal; } .woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: .45rem; margin: 0 0 .85rem !important; } .woocommerce-account .lost_password { margin: .85rem 0 0 !important; text-align: center; } .woocommerce-account .woocommerce-privacy-policy-text { margin: 0 0 1rem; font-size: .82rem; line-height: 1.55; color: #666; } /* ========== Logged in: nav + content ========== */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; max-width: none !important; margin: 0 0 1.25rem !important; padding: 1.25rem !important; background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); box-sizing: border-box; min-width: 0; } .woocommerce-account .woocommerce-MyAccount-content { margin-block-end: 0 !important; } .woocommerce-MyAccount-navigation ul { display: grid; gap: 0.3rem; list-style: none; margin: 0; padding: 0; } .woocommerce-MyAccount-navigation a { display: block; padding: 0.7rem 0.9rem; border-radius: var(--to-control-radius); font-weight: 600; } .woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: #f3eee6; color: var(--to-ink); } .woocommerce-MyAccount-content > *:first-child { margin-block-start: 0; } .woocommerce-MyAccount-content p { max-width: 65ch; line-height: 1.7; } @media (min-width: 993px) { /* * DOM order: navigation then content. * In RTL, CSS Grid places the first column on inline-start (right), * so nav naturally sits on the right — do NOT swap columns again. */ body.woocommerce-account.logged-in .woocommerce { display: grid !important; grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "notices notices" "nav content"; gap: 1.25rem; align-items: start; width: 100%; } body.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-area: notices; } body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { grid-area: nav; margin: 0 !important; position: sticky; inset-block-start: calc(var(--to-header-h, 80px) + 16px); } body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content { grid-area: content; margin: 0 !important; } } /* ========== Checkout + edit address form rows (two fields per row from 576px) ========== */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper, .woocommerce-account .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; } .woocommerce-account .woocommerce-EditAccountForm > .form-row, .woocommerce-account .woocommerce-EditAccountForm > p.form-row { margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; width: 100% !important; max-width: 100%; } .woocommerce-account .woocommerce-EditAccountForm fieldset { display: grid; grid-template-columns: 1fr; gap: 1rem; grid-column: 1 / -1; width: 100%; min-width: 0; } .woocommerce-account .woocommerce-EditAccountForm fieldset legend { grid-column: 1 / -1; } .woocommerce-account .woocommerce-EditAccountForm fieldset .form-row { margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; width: 100% !important; max-width: 100%; } .woocommerce-account .woocommerce-EditAccountForm > p:not(.form-row) { grid-column: 1 / -1; margin: 0 !important; } /* WooCommerce legacy .clear (float) — must not become grid cells */ .woocommerce-account .woocommerce-EditAccountForm > .clear, .woocommerce-account .woocommerce-address-fields__field-wrapper > .clear, .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .clear, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .clear, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .clear { display: none !important; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row, .woocommerce-page.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row, .woocommerce-page.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row, .woocommerce-page.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row, .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row { margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; width: 100% !important; max-width: 100%; } /* Two fields per row from small-tablet / desktop up; single column on small phones only. */ @media (min-width: 576px) { .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper, .woocommerce-account .woocommerce-address-fields__field-wrapper, .woocommerce-account .woocommerce-EditAccountForm, .woocommerce-account .woocommerce-EditAccountForm fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 1rem; } /* Keep long textareas / account rows full width (checkout only). */ .woocommerce-checkout #order_comments_field, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper .notes, .woocommerce-checkout .create-account, .woocommerce-checkout .woocommerce-account-fields { grid-column: 1 / -1; } /* * Newsletter opt-in only: own row under the email field (DOM order), * without stretching billing_email across both columns. */ .woocommerce-checkout #theoutlet_newsletter_optin_field { grid-column: 1 / -1; } } .woocommerce-checkout #theoutlet_newsletter_optin_field { margin-block-start: -.15rem !important; } .woocommerce-checkout #theoutlet_newsletter_optin_field label { font-weight: 500; font-size: .92rem; line-height: 1.45; } .woocommerce-checkout #theoutlet_newsletter_optin_field .input-checkbox { margin-inline-end: .45rem; } /* My Account → Account details: newsletter under email, full row. */ .woocommerce-account #theoutlet_newsletter_optin_field { grid-column: 1 / -1; margin-block-start: 0 !important; } .woocommerce-account #theoutlet_newsletter_optin_field label { font-weight: 500; font-size: .92rem; line-height: 1.45; } .woocommerce-account #theoutlet_newsletter_optin_field .input-checkbox { margin-inline-end: .45rem; } .woocommerce-account .to-account-username .input-text[readonly] { background: #f3f4f5; color: #50575e; cursor: default; box-shadow: none; } .woocommerce-account .to-account-field-hint { display: block; margin-top: .35rem; font-size: .85rem; color: #646970; line-height: 1.4; } .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input, .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select { width: 100% !important; max-width: 100% !important; min-height: 2.75rem; padding: .55rem .75rem; padding-inline-end: 2.4rem; border: 1px solid var(--to-line, #dcdcde); border-radius: var(--to-control-radius, 8px); background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; /* Default = LTR end (right). English/WPML pages may lack html[dir=ltr]. */ background-position: right 0.9rem center; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } /* RTL: arrow at the visual end (left side). */ html[dir="rtl"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input, html[dir="rtl"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select, html[lang="ar"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input, html[lang="ar"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select, body.rtl .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input, body.rtl .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select, .rtl .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input, .rtl .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select { background-position: left 0.9rem center; } /* Explicit LTR wins over a lingering .rtl body class on translated pages. */ html[dir="ltr"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input, html[dir="ltr"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select, html[lang="en"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input, html[lang="en"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select, body.ltr .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input, body.ltr .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select { background-position: right 0.9rem center; } .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:hover, .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:hover, .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:focus, .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:focus { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; appearance: none; -webkit-appearance: none; -moz-appearance: none; } html[dir="rtl"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:hover, html[dir="rtl"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:hover, html[dir="rtl"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:focus, html[dir="rtl"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:focus, html[lang="ar"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:hover, html[lang="ar"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:hover, html[lang="ar"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:focus, html[lang="ar"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:focus, body.rtl .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:hover, body.rtl .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:hover, body.rtl .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:focus, body.rtl .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:focus { background-position: left 0.9rem center; } html[dir="ltr"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:hover, html[dir="ltr"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:hover, html[dir="ltr"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:focus, html[dir="ltr"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:focus, html[lang="en"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:hover, html[lang="en"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:hover, html[lang="en"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input:focus, html[lang="en"] .woocommerce-account .woocommerce-EditAccountForm select.woocommerce-Input--select:focus { background-position: right 0.9rem center; } /* Website + social URL fields: always LTR (URLs are left-to-right). */ .woocommerce-account .woocommerce-EditAccountForm input[type="url"], .woocommerce-account .woocommerce-EditAccountForm .woocommerce-Input--url, .woocommerce-account #account_url, .woocommerce-account .to-account-social input[type="url"] { direction: ltr !important; text-align: left !important; unicode-bidi: isolate; } .woocommerce-account .to-account-social { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 1rem; margin: .25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--to-line, #e6e6e6); } .woocommerce-account .to-account-social__title { grid-column: 1 / -1; margin: 0; font-size: 1.05rem; font-weight: 800; } .woocommerce-account .to-account-bio textarea { width: 100% !important; min-height: 120px; resize: vertical; } @media (min-width: 576px) { .woocommerce-account .to-account-username, .woocommerce-account .to-account-social, .woocommerce-account .to-account-bio, .woocommerce-account #theoutlet_newsletter_optin_field { grid-column: 1 / -1; } .woocommerce-account .to-account-social { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce-account .to-account-social__title, .woocommerce-account .to-account-social > .form-row:last-child:nth-child(even) { grid-column: 1 / -1; } } /* ========== Checkout coupon (inside order card, above total) ========== */ .woocommerce-checkout .to-checkout-coupon-row th, .woocommerce-checkout .to-checkout-coupon-row td { border: 0 !important; padding: .85rem 0 1rem !important; background: transparent !important; vertical-align: top; width: 100%; max-width: 100%; } .woocommerce-checkout .to-checkout-coupon { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-info, .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-message { margin: 0; padding: .75rem .9rem; padding-inline-start: 2.4rem; font-size: .9rem; line-height: 1.45; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; word-break: break-word; } .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-info::before, .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-message::before { inset-inline-start: auto; inset-inline-end: auto; left: 1em; right: auto; color: var(--to-gold-dark); } html[dir="rtl"] .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-info::before, html[dir="rtl"] .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-message::before, .rtl .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-info::before, .rtl .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-message::before { left: auto; right: 1em; } html[dir="ltr"] .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-info::before, html[dir="ltr"] .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-message::before { left: 1em; right: auto; } .woocommerce-checkout .to-checkout-coupon__form { margin: .75rem 0 0; padding: 0; border: 0; background: transparent; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .woocommerce-checkout .to-checkout-coupon__row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: .5rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .woocommerce-checkout .to-checkout-coupon__row .input-text { flex: 1 1 0; min-width: 0; width: auto !important; max-width: 100% !important; margin: 0; min-height: var(--to-control-height); border: var(--to-control-border); border-radius: var(--to-control-radius); padding-inline: var(--to-control-pad-x); background: #fff; box-sizing: border-box; } .woocommerce-checkout .to-checkout-coupon__row .button { flex: 0 1 auto; width: auto !important; max-width: 48%; margin: 0 !important; white-space: normal; line-height: 1.25; min-height: var(--to-control-height); padding-inline: .75rem !important; box-sizing: border-box; } @media (max-width: 575px) { .woocommerce-checkout #order_review { padding: 1rem; } .woocommerce-checkout .to-checkout-coupon__row { gap: .4rem; } .woocommerce-checkout .to-checkout-coupon__row .button { max-width: 44%; font-size: .82rem; padding-inline: .55rem !important; } .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-info, .woocommerce-checkout .to-checkout-coupon__toggle .woocommerce-message { font-size: .84rem; padding: .65rem .75rem; padding-inline-start: 2.2rem; } } .woocommerce-cart table.cart td.actions .coupon .button, .woocommerce-cart table.cart td.actions .button { float: none !important; width: auto !important; } .woocommerce form .quantity .qty, .woocommerce .quantity .qty { width: 4.5rem; min-height: var(--to-control-height); text-align: center; border: var(--to-control-border); border-radius: var(--to-control-radius); background: var(--to-control-bg); } .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: .45rem; } .woocommerce-error, .woocommerce-info, .woocommerce-message { border-radius: var(--to-control-radius); border: 1px solid var(--to-line); background: #fff; color: var(--to-ink); box-shadow: none; } .woocommerce-info { background: rgba(255, 184, 0, .12); border-color: rgba(194, 146, 0, .35); } .woocommerce-message { background: rgba(240, 120, 0, .1); border-color: rgba(240, 120, 0, .32); } .woocommerce-error { background: rgba(214, 40, 40, .08); border-color: rgba(214, 40, 40, .28); } .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { color: var(--to-gold-dark) !important; } .woocommerce-message::before { color: var(--to-orange-deep) !important; } .woocommerce-error::before { color: var(--to-sale) !important; } .woocommerce table.shop_table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--to-line); border-radius: var(--to-radius); overflow: hidden; width: 100%; } .woocommerce-checkout #payment { background: #fafafa; border: 1px solid var(--to-line); border-radius: var(--to-control-radius); } .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--to-line); padding: 1rem; } .woocommerce-checkout #payment div.form-row { padding: 1rem; } /* Payment gateway logos (checkout + pay for order) */ .woocommerce-checkout #payment .wc_payment_method label, .woocommerce-order-pay #payment .wc_payment_method label, #payment .wc_payment_method label { display: inline-flex !important; align-items: center; gap: .5rem; flex-wrap: nowrap; max-width: 100%; line-height: 1.35; } .woocommerce-checkout .wc_payment_method img, .woocommerce-order-pay .wc_payment_method img, #payment .wc_payment_method img { display: inline-block !important; max-width: 80px !important; width: auto !important; height: auto !important; margin: 0 !important; float: none !important; vertical-align: middle; object-fit: contain; flex-shrink: 0; } .woocommerce-checkout #payment .payment_box p, .woocommerce-order-pay #payment .payment_box p, #payment .payment_box p { margin-top: 0 !important; margin-block-start: 0 !important; } .woocommerce-checkout #payment .payment_box, .woocommerce-order-pay #payment .payment_box, #payment .payment_box { border-radius: var(--to-control-radius) !important; overflow: hidden; } .woocommerce-account .woocommerce-Address, .woocommerce-account .woocommerce-Addresses, .woocommerce-account .woocommerce-orders-table { width: 100%; float: none; } .woocommerce-account .woocommerce-Addresses.col2-set, .woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set, .woocommerce-account .woocommerce-MyAccount-content .col2-set.addresses, .woocommerce-account .woocommerce-MyAccount-content section.woocommerce-columns--addresses { display: grid !important; grid-template-columns: 1fr; gap: 1rem; width: 100% !important; margin-block-start: 1.5rem; } @media (min-width: 769px) { .woocommerce-account .woocommerce-Addresses.col2-set, .woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set, .woocommerce-account .woocommerce-MyAccount-content .col2-set.addresses, .woocommerce-account .woocommerce-MyAccount-content section.woocommerce-columns--addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .woocommerce-account .woocommerce-Addresses .col-1, .woocommerce-account .woocommerce-Addresses .col-2, .woocommerce-account .woocommerce-Addresses .u-column1, .woocommerce-account .woocommerce-Addresses .u-column2, .woocommerce-account .woocommerce-MyAccount-content .u-columns .col-1, .woocommerce-account .woocommerce-MyAccount-content .u-columns .col-2, .woocommerce-account .woocommerce-MyAccount-content .col2-set.addresses .col-1, .woocommerce-account .woocommerce-MyAccount-content .col2-set.addresses .col-2, .woocommerce-account .woocommerce-MyAccount-content section.woocommerce-columns--addresses .col-1, .woocommerce-account .woocommerce-MyAccount-content section.woocommerce-columns--addresses .col-2, .woocommerce-account .woocommerce-MyAccount-content section.woocommerce-columns--addresses .woocommerce-column { width: 100% !important; float: none !important; margin: 0 !important; } } /* ========== My Account content polish (orders, downloads, addresses, payments, details) ========== */ /* Tables — orders list, order details, downloads (override WooCommerce defaults) */ .woocommerce-account table.shop_table, .woocommerce-page.woocommerce-account table.shop_table, .woocommerce-account table.woocommerce-orders-table, .woocommerce-account table.woocommerce-table--order-details, .woocommerce-account table.order_details, .woocommerce-account .woocommerce-MyAccount-content table.shop_table, .woocommerce-account .woocommerce-MyAccount-downloads table, .woocommerce-account .woocommerce-table--order-downloads { width: 100% !important; max-width: 100%; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid var(--to-line) !important; border-radius: var(--to-radius) !important; overflow: hidden; background: #fff !important; font-size: .9rem; margin: 0 0 1.25rem !important; float: none !important; clear: both !important; } .woocommerce-account table.shop_table::before, .woocommerce-account table.shop_table::after, .woocommerce-account table.woocommerce-orders-table::before, .woocommerce-account table.woocommerce-orders-table::after { content: none !important; display: none !important; } .woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td, .woocommerce-account table.woocommerce-orders-table th, .woocommerce-account table.woocommerce-orders-table td, .woocommerce-account table.woocommerce-table--order-details th, .woocommerce-account table.woocommerce-table--order-details td, .woocommerce-account table.order_details th, .woocommerce-account table.order_details td { padding: .85rem 1rem !important; border: 0 !important; border-inline: 0 !important; vertical-align: middle !important; text-align: start !important; background: transparent !important; } .woocommerce-account table.shop_table tbody tr:not(:last-child) > th, .woocommerce-account table.shop_table tbody tr:not(:last-child) > td, .woocommerce-account table.woocommerce-orders-table tbody tr:not(:last-child) > th, .woocommerce-account table.woocommerce-orders-table tbody tr:not(:last-child) > td, .woocommerce-account table.woocommerce-table--order-details tbody tr:not(:last-child) > th, .woocommerce-account table.woocommerce-table--order-details tbody tr:not(:last-child) > td, .woocommerce-account table.order_details tbody tr:not(:last-child) > th, .woocommerce-account table.order_details tbody tr:not(:last-child) > td, .woocommerce-account table.shop_table tfoot tr:not(:last-child) > th, .woocommerce-account table.shop_table tfoot tr:not(:last-child) > td, .woocommerce-account table.woocommerce-table--order-details tfoot tr:not(:last-child) > th, .woocommerce-account table.woocommerce-table--order-details tfoot tr:not(:last-child) > td, .woocommerce-account table.order_details tfoot tr:not(:last-child) > th, .woocommerce-account table.order_details tfoot tr:not(:last-child) > td { border-block-end: 1px solid var(--to-line) !important; } .woocommerce-account table.shop_table thead th, .woocommerce-account table.woocommerce-orders-table thead th, .woocommerce-account table.woocommerce-table--order-details thead th, .woocommerce-account table.order_details thead th { background: linear-gradient(180deg, #fffaf0, #fff5dc) !important; border-block-end: 1px solid rgba(194, 146, 0, .22) !important; color: var(--to-ink) !important; font-weight: 800 !important; font-size: .8rem !important; line-height: 1.35; } .woocommerce-account table.shop_table tbody tr:hover td, .woocommerce-account table.woocommerce-orders-table tbody tr:hover td, .woocommerce-account table.woocommerce-table--order-details tbody tr:hover td, .woocommerce-account table.shop_table tbody tr:hover th, .woocommerce-account table.woocommerce-orders-table tbody tr:hover th, .woocommerce-account table.woocommerce-table--order-details tbody tr:hover th { background: #fcfcfc !important; } /* Orders list — column alignment (desktop) */ @media (min-width: 768px) { .woocommerce-account table.woocommerce-orders-table.shop_table_responsive { display: table !important; table-layout: fixed; } .woocommerce-account table.woocommerce-orders-table.shop_table_responsive thead { display: table-header-group !important; } .woocommerce-account table.woocommerce-orders-table.shop_table_responsive tbody { display: table-row-group !important; } .woocommerce-account table.woocommerce-orders-table.shop_table_responsive tr { display: table-row !important; width: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; background: transparent !important; } .woocommerce-account table.woocommerce-orders-table.shop_table_responsive th, .woocommerce-account table.woocommerce-orders-table.shop_table_responsive td { display: table-cell !important; width: auto !important; text-align: start !important; } .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__header-order-number, .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number { width: 11%; } .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__header-order-date, .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-date { width: 17%; } .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__header-order-status, .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status { width: 13%; } .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__header-order-total, .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total { width: 24%; } .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__header-order-actions, .woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { width: 35%; text-align: end !important; } .woocommerce-account table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell { font-weight: 700; } } .woocommerce-account table.shop_table tfoot th, .woocommerce-account table.shop_table tfoot td, .woocommerce-account table.woocommerce-table--order-details tfoot th, .woocommerce-account table.woocommerce-table--order-details tfoot td { background: #fafafa !important; font-weight: 700 !important; } .woocommerce-account table.shop_table tfoot tr:last-child th, .woocommerce-account table.shop_table tfoot tr:last-child td, .woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td { background: linear-gradient(135deg, #fffaf0, #fff5dc) !important; border-block-end: 0 !important; color: var(--to-price) !important; font-size: .95rem !important; } .woocommerce-account table.shop_table .product-name a, .woocommerce-account table.woocommerce-table--order-details .product-name a, .woocommerce-account table.order_details .product-name a { color: var(--to-ink); font-weight: 600; text-decoration: none; } .woocommerce-account table.shop_table .product-name a:hover, .woocommerce-account table.woocommerce-table--order-details .product-name a:hover { color: var(--to-gold-dark); } .woocommerce-account table.shop_table .product-thumbnail img, .woocommerce-account table.woocommerce-table--order-details .product-thumbnail img, .woocommerce-account table.order_details .product-thumbnail img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--to-line); vertical-align: middle; } .woocommerce-account table.shop_table .order-actions--heading { width: 28%; font-weight: 800; color: #555; } .woocommerce-account .woocommerce-order-details, .woocommerce-account .woocommerce-order-details .shop_table { margin-block-start: 0; } @media (max-width: 767px) { .woocommerce-account table.woocommerce-orders-table.shop_table_responsive thead { display: none; } .woocommerce-account table.woocommerce-orders-table.shop_table_responsive, .woocommerce-account table.woocommerce-orders-table.shop_table_responsive tbody, .woocommerce-account table.woocommerce-orders-table.shop_table_responsive tr, .woocommerce-account table.woocommerce-orders-table.shop_table_responsive td, .woocommerce-account table.woocommerce-orders-table.shop_table_responsive th.woocommerce-orders-table__cell { display: block; width: 100% !important; } .woocommerce-account table.woocommerce-orders-table.shop_table_responsive tr { margin-block-end: 1rem; border: 1px solid var(--to-line) !important; border-radius: var(--to-radius); overflow: hidden; background: #fff; } .woocommerce-account table.woocommerce-orders-table.shop_table_responsive td, .woocommerce-account table.woocommerce-orders-table.shop_table_responsive th.woocommerce-orders-table__cell { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem !important; border-block-end: 1px solid var(--to-line) !important; text-align: end !important; font-weight: 600; } .woocommerce-account table.woocommerce-orders-table.shop_table_responsive td::before, .woocommerce-account table.woocommerce-orders-table.shop_table_responsive th.woocommerce-orders-table__cell::before { content: attr(data-title); font-weight: 800; font-size: .78rem; color: #666; text-align: start; flex: 1 1 auto; } .woocommerce-account table.woocommerce-orders-table.shop_table_responsive td:last-child, .woocommerce-account table.woocommerce-orders-table.shop_table_responsive th.woocommerce-orders-table__cell:last-child { border-block-end: 0 !important; } .woocommerce-account table.woocommerce-table--order-details.shop_table_responsive td::before { font-weight: 800; color: #666; } } /* Legacy selectors (downloads etc.) */ .woocommerce-account .woocommerce-MyAccount-downloads, .woocommerce-account .woocommerce-table--order-downloads { width: 100%; } /* Compact action buttons inside account tables / lists */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-button, .woocommerce-account .woocommerce-MyAccount-content a.button, .woocommerce-account .woocommerce-MyAccount-content button.button, .woocommerce-account .woocommerce-orders-table .woocommerce-button, .woocommerce-account .woocommerce-orders-table a.button, .woocommerce-account .woocommerce-MyAccount-downloads .woocommerce-button, .woocommerce-account .woocommerce-MyAccount-downloads a.button, .woocommerce-account .woocommerce-Address .edit, .woocommerce-account .woocommerce-Address .button, .woocommerce-account .woocommerce-PaymentMethod--actions .button, .woocommerce-account .payment-method-actions .button, .woocommerce-account .dokan-btn, .woocommerce-account .dokan-btn-theme, .woocommerce-account .dokan-order-action a, .woocommerce-account .dokan-orders-area .button, .woocommerce-account .dokan-dashboard-content .button { display: inline-flex !important; align-items: center; justify-content: center; gap: .3rem; width: auto !important; min-width: 0 !important; min-height: 34px !important; height: auto !important; padding: .35rem .75rem !important; margin: 0 !important; border: 1px solid var(--to-line) !important; border-radius: 8px !important; background: #fff !important; color: var(--to-ink) !important; font-size: .78rem !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap; box-shadow: none !important; text-decoration: none !important; transform: none !important; filter: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover, .woocommerce-account .woocommerce-MyAccount-content a.button:hover, .woocommerce-account .woocommerce-MyAccount-content button.button:hover, .woocommerce-account .woocommerce-orders-table .woocommerce-button:hover, .woocommerce-account .woocommerce-orders-table a.button:hover, .woocommerce-account .woocommerce-MyAccount-downloads .woocommerce-button:hover, .woocommerce-account .woocommerce-Address .edit:hover, .woocommerce-account .woocommerce-Address .button:hover, .woocommerce-account .dokan-btn:hover, .woocommerce-account .dokan-btn-theme:hover, .woocommerce-account .dokan-order-action a:hover, .woocommerce-account .dokan-orders-area .button:hover { background: #f7f7f7 !important; border-color: #d0d0d0 !important; color: var(--to-ink) !important; transform: translateY(-1px) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, .06) !important; filter: none !important; } /* Action button group spacing (keep table cells as table-cell — flex on td breaks columns) */ .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions, .woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-actions { display: table-cell !important; vertical-align: middle !important; white-space: normal; } .woocommerce-account .order-actions, .woocommerce-account .woocommerce-MyAccount-content td.order-actions, .woocommerce-account .woocommerce-MyAccount-downloads td.download-file, .woocommerce-account .woocommerce-PaymentMethod--actions, .woocommerce-account .payment-method-actions, .woocommerce-account .dokan-order-action, .woocommerce-account .dokan-orders-area .actions { display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: .45rem; white-space: normal; } .woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button, .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button, .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .woocommerce-button, .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button { display: inline-flex !important; vertical-align: middle; margin-block: .15rem !important; margin-inline-start: 0 !important; margin-inline-end: .45rem !important; } .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .woocommerce-button:last-child, .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button:last-child, .woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button:last-child, .woocommerce-account .woocommerce-orders-table__cell-order-actions .button:last-child { margin-inline-end: 0 !important; } /* View order: actions row (Pay / Cancel) — td has no .order-actions class in WC blocks */ .woocommerce-account table.shop_table td:has(.order-actions-button), .woocommerce-account .woocommerce-table--order-details td:has(.order-actions-button) { display: flex !important; flex-wrap: wrap; align-items: center; gap: .5rem; } .woocommerce-account table.shop_table td .order-actions-button, .woocommerce-account .woocommerce-table--order-details td .order-actions-button { margin: 0 !important; } .woocommerce-account table.shop_table td .order-actions-button + .order-actions-button, .woocommerce-account .woocommerce-table--order-details td .order-actions-button + .order-actions-button { margin-inline-start: 0 !important; } /* Semantic button colors */ .woocommerce-account .woocommerce-button.view, .woocommerce-account a.button.view, .woocommerce-account .dokan-btn.view { background: #fff !important; border-color: #ddd !important; color: #333 !important; } .woocommerce-account .woocommerce-button.view:hover, .woocommerce-account a.button.view:hover { background: #f3f3f3 !important; border-color: #c8c8c8 !important; } .woocommerce-account .woocommerce-button.pay, .woocommerce-account a.button.pay, .woocommerce-account .woocommerce-button.woocommerce-button--pay { background: linear-gradient(90deg, var(--to-yellow), var(--to-orange)) !important; border-color: transparent !important; color: #1a1a1a !important; } .woocommerce-account .woocommerce-button.pay:hover, .woocommerce-account a.button.pay:hover { filter: brightness(1.05) !important; box-shadow: 0 4px 12px rgba(232, 168, 56, .32) !important; color: #1a1a1a !important; } .woocommerce-account .woocommerce-button.cancel, .woocommerce-account a.button.cancel { background: #fff !important; border-color: #f0c9c9 !important; color: #b42318 !important; } .woocommerce-account .woocommerce-button.cancel:hover, .woocommerce-account a.button.cancel:hover { background: #fef3f2 !important; border-color: #f3a5a0 !important; color: #912018 !important; } /* Keep full-width primary submits on account forms (edit account / addresses) */ .woocommerce-account .woocommerce-EditAccountForm > p > .button, .woocommerce-account .woocommerce-EditAccountForm button[type="submit"], .woocommerce-account .woocommerce-address-fields button[type="submit"], .woocommerce-account .woocommerce-address-fields .button, .woocommerce-account form.edit-account .button[type="submit"], .woocommerce-account form.edit-account button[type="submit"] { width: 100% !important; min-height: var(--to-control-height) !important; padding: .65rem 1.25rem !important; border: 0 !important; border-radius: var(--to-control-radius) !important; background: linear-gradient(90deg, var(--to-yellow), var(--to-orange)) !important; color: #1a1a1a !important; font-size: .92rem !important; } .woocommerce-account .woocommerce-EditAccountForm > p > .button:hover, .woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover, .woocommerce-account .woocommerce-address-fields button[type="submit"]:hover, .woocommerce-account form.edit-account .button[type="submit"]:hover { filter: brightness(1.06) !important; box-shadow: 0 6px 18px rgba(232, 168, 56, .38) !important; color: #1a1a1a !important; } /* Addresses — saved addresses + view-order billing/shipping cards */ .woocommerce-account .woocommerce-Addresses .woocommerce-Address, .woocommerce-account .woocommerce-Address, .woocommerce-account section.woocommerce-columns--addresses .woocommerce-column, .woocommerce-account .woocommerce-customer-details .woocommerce-column { background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); padding: 1.15rem 1.25rem; box-sizing: border-box; min-height: 100%; box-shadow: var(--to-shadow); } .woocommerce-account section.woocommerce-columns--addresses .woocommerce-column--billing-address { border-block-start: 3px solid var(--to-gold); } .woocommerce-account section.woocommerce-columns--addresses .woocommerce-column--shipping-address { border-block-start: 3px solid var(--to-orange); } .woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-block-end: .75rem; } .woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: 1rem; font-weight: 800; } .woocommerce-account .woocommerce-Address address { margin: 0; font-style: normal; line-height: 1.7; color: #555; } .woocommerce-account section.woocommerce-columns--addresses address, .woocommerce-account .woocommerce-customer-details address { margin: 0; font-style: normal; line-height: 1.75; font-size: .9rem; color: #555; } .woocommerce-account address .woocommerce-customer-details--phone, .woocommerce-account address .woocommerce-customer-details--email, .woocommerce-account address p.woocommerce-customer-details--phone, .woocommerce-account address p.woocommerce-customer-details--email { display: flex; align-items: center; gap: .65rem; margin: .7rem 0 0 !important; padding: .75rem 1rem !important; padding-inline: 1rem !important; border-radius: var(--to-control-radius); background: linear-gradient(135deg, #fffaf0, #fff5dc); border: 1px solid rgba(194, 146, 0, .2); font-size: .85rem; font-weight: 600; color: var(--to-ink); line-height: 1.4; } .woocommerce-account address p.woocommerce-customer-details--phone::before, .woocommerce-account address p.woocommerce-customer-details--email::before { position: static !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important; flex-shrink: 0; width: 1.15em; min-width: 1.15em; height: 1.15em; line-height: 1; display: flex !important; align-items: center; justify-content: center; opacity: .88; } .woocommerce-account address p.woocommerce-customer-details--email { word-break: break-word; } .woocommerce-account .woocommerce-Address .edit { flex-shrink: 0; } /* Payment methods */ .woocommerce-account .woocommerce-PaymentMethods, .woocommerce-account .woocommerce-MyAccount-paymentMethods { display: grid; gap: .85rem; } .woocommerce-account .woocommerce-PaymentMethod, .woocommerce-account .payment-method { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--to-line); border-radius: var(--to-radius); } /* Account details form */ .woocommerce-account .woocommerce-EditAccountForm fieldset { border: 1px solid var(--to-line); border-radius: var(--to-radius); padding: 1rem 1.15rem; margin: 0 !important; } .woocommerce-account .woocommerce-EditAccountForm legend { padding-inline: .35rem; font-weight: 800; font-size: .9rem; } .woocommerce-account .woocommerce-order-details, .woocommerce-account .woocommerce-customer-details { margin-block-start: 1.25rem; } .woocommerce-account .woocommerce-order-details__title { margin: 0 0 .85rem; font-size: 1.05rem; font-weight: 800; } .woocommerce-account .woocommerce-column__title, .woocommerce-account section.woocommerce-columns--addresses .woocommerce-column__title { margin: 0 0 .85rem; padding-block-end: .65rem; border-block-end: 1px solid var(--to-line); font-size: 1rem; font-weight: 800; color: var(--to-ink); line-height: 1.35; } /* Status badges in orders table */ .woocommerce-account .woocommerce-orders-table__cell-order-status mark, .woocommerce-account mark.order-status { display: inline-flex; align-items: center; min-height: 26px; padding: .15rem .55rem; border-radius: 999px; background: #f3f3f3; color: #444; font-size: .75rem; font-weight: 700; } @media (max-width: 767px) { .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions, .woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; width: 100%; } .woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button, .woocommerce-account .woocommerce-orders-table__cell-order-actions .button { flex: 1 1 auto; } }