/* ========================================================================== ZUGOSHI — WooCommerce overrides ========================================================================== */ /* Hide empty cart badge */ .zg-badge[data-count="0"] { display: none; } /* ---- Product grid -------------------------------------------------------- */ .woocommerce ul.products, ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 !important; padding: 0; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; } .woocommerce ul.products li.product, ul.products li.product, ul.products li.zg-pcell { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; } .woocommerce ul.products li.product::before { content: none; } /* hide the default loop title/price/button when our card is present */ .zg-pcell > a.woocommerce-LoopProduct-link, .zg-pcell > .woocommerce-loop-product__title, .zg-pcell > .price, .zg-pcell > .button, .zg-pcell > .star-rating, .zg-pcell > .onsale { display: none !important; } /* Keep our card IDENTICAL inside the WooCommerce loop (neutralize WC's loop CSS). Card fills its grid cell so rows are equal height with aligned footers, and WC's overrides on the image (height/margin) and the h3 title (padding/font/clamp) are cancelled so the title clamps to 2 lines exactly like on the homepage. */ .woocommerce ul.products li.product, ul.products li.zg-pcell { display: grid; } .woocommerce ul.products li.product .zg-pcard__media img { height: 100%; margin: 0; box-shadow: none; } .woocommerce ul.products li.product .zg-pcard__title { margin: 0; padding: 0; font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Shop layout (sidebar + main) --------------------------------------- */ .zg-content--shop { padding-block: clamp(28px, 4vw, 52px); } .zg-shop { display: grid; grid-template-columns: 282px 1fr; gap: 34px; align-items: start; } .zg-shop__main, .zg-shop-full { min-width: 0; } .zg-shop__side { position: sticky; top: 90px; } .zg-shop__filter-toggle { display: none; width: 100%; margin-bottom: 14px; } /* Title + description come from our page hero — neutralise WooCommerce's header */ .woocommerce-products-header { margin: 0; padding: 0; min-height: 0; } .woocommerce-products-header__title { display: none; } /* Shop toolbar */ .zg-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px solid var(--zg-line); border-radius: var(--zg-r); padding: 12px 18px; margin-bottom: 22px; } .woocommerce-result-count { margin: 0 !important; color: var(--zg-muted); font-size: .9rem; } .woocommerce-ordering { margin: 0 !important; } .woocommerce-ordering select, .woocommerce select.orderby { appearance: none; padding: 10px 40px 10px 16px; border: 1.5px solid var(--zg-line); border-radius: var(--zg-r-pill); background: var(--zg-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2315161A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; font-weight: 600; font-size: .88rem; cursor: pointer; font-family: var(--zg-display); } /* ---- Sidebar widgets ----------------------------------------------------- */ .zg-shop__widgets { display: flex; flex-direction: column; gap: 18px; } .zg-widget { background: #fff; border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: 20px 22px; } .zg-widget__title { font-family: var(--zg-display); font-weight: 700; font-size: 1.02rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--zg-yellow); display: inline-block; } /* Search widget — input + styled button on one row */ .zg-widget .woocommerce-product-search { display: flex; gap: 8px; } .zg-widget .woocommerce-product-search .search-field { flex: 1; min-width: 0; padding: 11px 14px; border: 1.5px solid var(--zg-line); border-radius: var(--zg-r-sm); background: #fff; font: inherit; font-size: .9rem; } .zg-widget .woocommerce-product-search .search-field:focus { outline: none; border-color: var(--zg-yellow); box-shadow: 0 0 0 3px var(--zg-yellow-soft); } .zg-widget .woocommerce-product-search button { flex: none; padding: 0 16px; border-radius: var(--zg-r-sm); background: var(--zg-ink); color: #fff; font-family: var(--zg-display); font-weight: 700; font-size: .82rem; transition: background .18s var(--zg-ease), color .18s var(--zg-ease); } .zg-widget .woocommerce-product-search button:hover { background: var(--zg-yellow); color: var(--zg-ink); } /* Category list — name left, count right, one tidy row each */ .zg-widget .product-categories { display: flex; flex-direction: column; } .zg-widget .product-categories li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--zg-line-2); font-size: .92rem; } .zg-widget .product-categories li:last-child { border-bottom: 0; padding-bottom: 0; } .zg-widget .product-categories li a { padding: 0; color: var(--zg-ink-700); font-weight: 500; } .zg-widget .product-categories li a:hover { color: var(--zg-yellow-700); } .zg-widget .product-categories .count { flex: none; color: var(--zg-muted-2); font-size: .82rem; } /* Other link lists (layered nav filters, etc.) */ .zg-widget ul:not(.product-categories):not(.product_list_widget) { display: flex; flex-direction: column; } .zg-widget ul:not(.product-categories):not(.product_list_widget) li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; color: var(--zg-ink-700); font-size: .92rem; } .zg-widget ul:not(.product-categories):not(.product_list_widget) li a:hover { color: var(--zg-yellow-700); } /* Product list widgets (Top Rated, Recently viewed…) — thumb + title + price. Uses our content-widget-product.php markup (.zg-pw). Selectors are scoped under .zg-widget .product_list_widget so they out-specify WooCommerce's loop CSS that forces the link to display:block and floats the image right. */ .zg-widget .product_list_widget { display: flex; flex-direction: column; } .zg-widget .product_list_widget li { padding: 0; margin: 0; border-bottom: 1px dashed var(--zg-line-2); } .zg-widget .product_list_widget li:last-child { border-bottom: 0; } .zg-widget .product_list_widget .zg-pw { display: flex; align-items: center; gap: 12px; padding: 12px 0; } .zg-widget .product_list_widget li:first-child .zg-pw { padding-top: 0; } .zg-widget .product_list_widget li:last-child .zg-pw { padding-bottom: 0; } .zg-widget .product_list_widget .zg-pw__thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; border: 1px solid var(--zg-line); background: var(--zg-surface-2); } .zg-widget .product_list_widget .zg-pw__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; float: none; margin: 0; box-shadow: none; } .zg-widget .product_list_widget .zg-pw__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .zg-widget .product_list_widget .zg-pw__title { font-family: var(--zg-display); font-weight: 700; font-size: .82rem; line-height: 1.3; color: var(--zg-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zg-widget .product_list_widget .zg-pw:hover .zg-pw__title { color: var(--zg-yellow-700); } .zg-widget .product_list_widget .zg-pw__price { font-size: .9rem; line-height: 1.3; } .zg-widget .product_list_widget .zg-pw__price .amount { font-weight: 700; color: var(--zg-ink); } .zg-widget .product_list_widget .zg-pw__price del { opacity: .5; margin-right: 5px; } .zg-widget .product_list_widget .zg-pw__price del .amount { font-weight: 400; font-size: .82rem; } .zg-widget .product_list_widget .zg-pw__price ins { text-decoration: none; } .zg-widget .product_list_widget .star-rating { font-size: .76rem; margin: 1px 0; } /* Price filter slider */ .woocommerce .widget_price_filter .price_slider { margin: 18px 4px 22px; } .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background: var(--zg-line); border-radius: 999px; height: 6px; } .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: var(--zg-yellow); } .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--zg-ink); border: 2px solid #fff; box-shadow: var(--zg-shadow-sm); border-radius: 50%; width: 16px; height: 16px; top: -.45em; } .woocommerce .widget_price_filter .price_slider_amount { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .woocommerce .widget_price_filter .price_slider_amount .price_label { order: 1; font-size: .88rem; color: var(--zg-ink-700); } .woocommerce .widget_price_filter .price_slider_amount .button { order: 2; float: none !important; margin: 0 !important; padding: 9px 22px !important; border-radius: var(--zg-r-pill); background: var(--zg-yellow); color: var(--zg-ink); font-family: var(--zg-display); font-weight: 700; font-size: .82rem; transition: background .18s var(--zg-ease); } .woocommerce .widget_price_filter .price_slider_amount .button:hover { background: var(--zg-yellow-600); } /* ---- onsale badge -------------------------------------------------------- */ .woocommerce span.onsale, .woocommerce ul.products li.product .onsale { background: var(--zg-ink); color: var(--zg-yellow); border-radius: var(--zg-r-pill); font-family: var(--zg-display); font-weight: 700; font-size: .78rem; padding: 6px 14px; min-height: 0; min-width: 0; line-height: 1.4; top: 16px; left: 16px; margin: 0; } /* ---- Single product (two cards on a soft grey backdrop, marketplace style) -- */ body.single-product .zg-content--shop { background: var(--zg-surface-2); } body.single-product .zg-page-hero { border-bottom: 0; padding-bottom: 2px; } .zg-pdp__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(18px, 2.2vw, 30px); align-items: start; } /* Gallery card */ .zg-pdp__gallery { position: sticky; top: 96px; background: var(--zg-surface); border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: clamp(14px, 1.5vw, 20px); box-shadow: var(--zg-shadow-sm); } .zg-pdp__gallery .woocommerce-product-gallery { width: 100% !important; margin: 0; float: none; position: relative; } .zg-pdp__gallery .woocommerce-product-gallery__wrapper { margin: 0; } .zg-pdp__gallery .woocommerce-product-gallery .flex-viewport, .zg-pdp__gallery .woocommerce-product-gallery__image img { border-radius: 0; background: var(--zg-surface-2); } .zg-pdp__gallery .woocommerce-product-gallery__image img { display: block; width: 100%; } .zg-pdp__gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; } .zg-pdp__gallery .flex-control-thumbs li { width: 72px !important; margin: 0 !important; flex: 0 0 auto; } .zg-pdp__gallery .flex-control-thumbs img { width: 100% !important; height: auto; border-radius: var(--zg-r-xs); border: 2px solid var(--zg-line); cursor: pointer; transition: border-color .15s, opacity .15s; display: block; opacity: .55; } .zg-pdp__gallery .flex-control-thumbs img:hover { opacity: 1; } .zg-pdp__gallery .flex-control-thumbs img.flex-active { border-color: var(--zg-yellow); opacity: 1; } .zg-pdp__gallery .woocommerce-product-gallery__trigger { z-index: 5; top: 1.4em; right: 1.4em; } .zg-pdp .onsale { position: absolute; top: 22px; left: 22px; z-index: 4; margin: 0; min-height: 0; min-width: 0; padding: 5px 11px; border-radius: var(--zg-r-pill); background: var(--zg-danger); color: #fff; font-family: var(--zg-display); font-weight: 800; font-size: .82rem; line-height: 1; } /* Summary card */ .zg-pdp__summary { margin: 0 !important; width: 100% !important; float: none !important; background: var(--zg-surface); border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: clamp(20px, 2.2vw, 30px); box-shadow: var(--zg-shadow-sm); } .zg-pdp__cat { font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--zg-yellow-700); margin-bottom: 9px; } .zg-pdp__cat a { color: inherit; text-decoration: none; } .zg-pdp__cat a:hover { text-decoration: underline; } .zg-pdp__title { font-size: clamp(1.45rem, 2.4vw, 2.05rem); line-height: 1.16; letter-spacing: -.01em; margin: 0 0 12px; } .zg-pdp__facts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .86rem; color: var(--zg-muted); } .zg-pdp__fact { display: inline-flex; align-items: center; gap: 6px; } .zg-pdp__fact b { color: var(--zg-ink); font-weight: 700; } .zg-pdp__fact--stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .zg-pdp__fact--stock.is-in { color: var(--zg-success); font-weight: 700; } .zg-pdp__fact--stock.is-out { color: var(--zg-danger); font-weight: 700; } .zg-pdp__fact--rate svg { color: var(--zg-yellow); } .zg-pdp__rule { border: 0; border-top: 1px solid var(--zg-line); margin: 16px 0; } .zg-pdp__pricebox { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } .zg-pdp__price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: var(--zg-ink); font-family: var(--zg-display); font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.15rem); margin: 0; } .zg-pdp__price ins { text-decoration: none; } .zg-pdp__price del { color: var(--zg-muted-2); font-weight: 500; font-size: 1.05rem; } .zg-pdp__save { display: inline-flex; align-items: center; gap: 8px; font-family: var(--zg-body); font-size: .82rem; font-weight: 700; color: var(--zg-danger); background: #fdecec; padding: 5px 12px; border-radius: var(--zg-r-pill); } .zg-pdp__save-pct { background: var(--zg-danger); color: #fff; padding: 2px 7px; border-radius: var(--zg-r-pill); font-size: .76rem; } .zg-pdp__short { color: var(--zg-ink-700); margin: 14px 0 0; line-height: 1.65; font-size: .95rem; } .zg-pdp__short p { margin-bottom: .6em; } .zg-pdp__short p:last-child { margin-bottom: 0; } .zg-pdp__trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 18px 0; padding: 16px 18px; background: var(--zg-surface-2); border-radius: var(--zg-r); list-style: none; } .zg-pdp__trust li { display: flex; align-items: center; gap: 11px; } .zg-pdp__trust svg { color: var(--zg-yellow-700); flex: none; } .zg-pdp__trust span { display: flex; flex-direction: column; line-height: 1.25; } .zg-pdp__trust b { font-size: .85rem; font-weight: 700; color: var(--zg-ink); } .zg-pdp__trust em { font-style: normal; font-size: .76rem; color: var(--zg-muted); } /* Buy: qty stepper + 3 actions in a row */ .zg-pdp__buy { margin: 0; } .zg-pdp__qty { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .zg-pdp__qty-label { font-family: var(--zg-display); font-weight: 700; font-size: .92rem; color: var(--zg-ink); } .woocommerce .quantity .qty { width: 80px; height: 46px; text-align: center; border: 1.5px solid var(--zg-line); border-radius: var(--zg-r-sm); font-weight: 700; font-family: var(--zg-display); font-size: 1rem; background: var(--zg-surface); } .zg-pdp__stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--zg-line); border-radius: var(--zg-r-pill); overflow: hidden; background: var(--zg-surface); } .zg-pdp__step { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 46px; border: 0; background: none; color: var(--zg-ink); cursor: pointer; transition: background .15s; } .zg-pdp__step:hover { background: var(--zg-surface-2); } .zg-pdp__stepper .quantity { margin: 0; } .zg-pdp .zg-pdp__stepper .quantity .qty { width: 52px; height: 46px; border: 0; border-inline: 1.5px solid var(--zg-line); border-radius: 0; background: var(--zg-surface); text-align: center; font-weight: 700; font-family: var(--zg-display); font-size: 1rem; -moz-appearance: textfield; } .zg-pdp__stepper .quantity .qty::-webkit-outer-spin-button, .zg-pdp__stepper .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .zg-pdp__actions { display: grid; grid-template-columns: 0.92fr 1.16fr 0.92fr; gap: 10px; } .zg-pdp__btn { height: 50px; font-size: .9rem; padding-inline: 12px; gap: 8px; } .zg-pdp__btn--wa { background: #25D366; color: #fff; border-color: #25D366; box-shadow: 0 8px 18px rgba(37,211,102,.28); } .zg-pdp__btn--wa:hover { background: #1ebe5a; color: #fff; } .zg-pdp__buy--fallback { display: flex; flex-direction: column; gap: 12px; } /* Meta */ .zg-pdp__meta { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--zg-line); font-size: .84rem; color: var(--zg-muted); display: flex; flex-wrap: wrap; gap: 6px 22px; } .zg-pdp__meta b { color: var(--zg-ink); } .zg-pdp__meta a { color: var(--zg-ink); font-weight: 600; } /* Fallback rating/meta (variable / out-of-stock products) */ .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .woocommerce .star-rating { font-size: 1em; width: 5.4em; color: var(--zg-yellow); } .woocommerce .star-rating::before { color: var(--zg-line); } .product_meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--zg-line); font-size: .84rem; color: var(--zg-muted); } .product_meta > span { display: block; margin-bottom: 6px; } .product_meta a { color: var(--zg-ink); font-weight: 600; } /* Tabs */ .woocommerce-tabs { grid-column: 1 / -1; margin-top: 22px; } body.single-product .woocommerce-tabs { background: var(--zg-surface); border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--zg-shadow-sm); } .woocommerce-tabs ul.tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 !important; margin: 0 0 24px !important; border-bottom: 2px solid var(--zg-line); } .woocommerce-tabs ul.tabs::before { display: none; } .woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; border-radius: 0; margin: 0 !important; padding: 0; } .woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; } .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 20px !important; font-family: var(--zg-display); font-weight: 700; color: var(--zg-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; } .woocommerce-tabs ul.tabs li.active a { color: var(--zg-ink); border-bottom-color: var(--zg-yellow); } .woocommerce-Tabs-panel h2 { font-size: 1.3rem; margin-bottom: 12px; } .woocommerce-Tabs-panel { color: var(--zg-ink-700); } /* Related / upsells */ .related.products, .up-sells.products { grid-column: 1 / -1; margin-top: 40px; } .related.products > h2, .up-sells > h2 { font-family: var(--zg-display); font-weight: 800; font-size: 1.5rem; margin-bottom: 22px; position: relative; padding-left: 18px; } .related.products > h2::before, .up-sells > h2::before { content: ""; position: absolute; left: 0; top: .1em; width: 8px; height: 1em; border-radius: 999px; background: var(--zg-yellow); } .related.products ul.products, .up-sells ul.products { grid-template-columns: repeat(4, 1fr); } /* ---- WooCommerce buttons ------------------------------------------------- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--zg-yellow); color: var(--zg-ink); font-family: var(--zg-display); font-weight: 700; font-size: .95rem; line-height: 1; padding: 16px 26px; border: 0; border-radius: var(--zg-r-pill); transition: transform .16s var(--zg-ease), box-shadow .2s var(--zg-ease), background .18s var(--zg-ease); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce .single_add_to_cart_button:hover { background: var(--zg-yellow-600); color: var(--zg-ink); transform: translateY(-2px); box-shadow: var(--zg-shadow-yellow); } .woocommerce .single_add_to_cart_button { height: 54px; padding-inline: 34px; } .woocommerce a.button.alt.disabled, .woocommerce button.disabled { opacity: .5; } .woocommerce .button.wc-backward, .woocommerce a.added_to_cart { background: var(--zg-ink); color: #fff; } .woocommerce .button.wc-backward:hover, .woocommerce a.added_to_cart:hover { background: #000; color: #fff; } /* ---- Cart (classic shortcode) — 2-column, sticky totals ------------------ */ .woocommerce-cart .zg-content--wc, .woocommerce-checkout .zg-content--wc { padding-block: clamp(28px, 4vw, 52px); } .woocommerce-cart .woocommerce { display: block; } .woocommerce-cart form.woocommerce-cart-form { min-width: 0; } .woocommerce-cart table.cart { table-layout: auto; } .woocommerce-cart .cart-collaterals { width: 100%; max-width: 440px; margin: 30px 0 0 auto; float: none; position: static; } .woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; } .woocommerce-cart .product-thumbnail { width: 86px; } .woocommerce-cart .product-remove { width: 40px; text-align: center; } .woocommerce table.shop_table { border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); overflow: hidden; border-collapse: separate; border-spacing: 0; background: #fff; } .woocommerce table.shop_table th { background: var(--zg-surface-2); font-family: var(--zg-display); padding: 15px; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; } .woocommerce table.shop_table td { padding: 16px 15px; border-top: 1px solid var(--zg-line-2); vertical-align: middle; } .woocommerce table.shop_table img { width: 66px; height: 66px; object-fit: cover; border-radius: var(--zg-r-sm); } .woocommerce-cart-form .product-name a { font-family: var(--zg-display); font-weight: 700; color: var(--zg-ink); } .woocommerce a.remove { color: var(--zg-danger) !important; border: 1px solid var(--zg-line); border-radius: 50%; line-height: 22px; width: 24px; height: 24px; font-size: 15px; } .woocommerce a.remove:hover { background: var(--zg-danger) !important; color: #fff !important; border-color: var(--zg-danger); } .woocommerce .cart .actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; } .woocommerce .cart .actions .coupon { display: flex; gap: 10px; } .woocommerce #coupon_code.input-text { width: 160px; } .cart_totals { background: #fff; border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: 24px; } .cart_totals h2 { font-family: var(--zg-display); margin-bottom: 16px; font-size: 1.2rem; } .cart_totals table { width: 100%; margin: 0; } .cart_totals table th { background: transparent !important; text-transform: none; padding: 12px 0; } .cart_totals table td { padding: 12px 0; } .cart_totals .order-total .amount { color: var(--zg-ink); font-size: 1.3rem; font-family: var(--zg-display); } .cart_totals .wc-proceed-to-checkout { padding: 16px 0 0; } .cart_totals .checkout-button { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 54px; font-size: 1rem; } /* ---- Checkout (classic shortcode) — 2-column, sticky review -------------- */ .woocommerce-checkout form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 34px; row-gap: 0; align-items: start; } .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 3; min-width: 0; } .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 14px; font-size: 1.2rem; font-family: var(--zg-display); } .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 90px; background: #fff; border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: 6px 22px 22px; } .woocommerce form .form-row { padding: 0; margin: 0 0 14px; } .woocommerce form .form-row label { font-weight: 600; font-size: .84rem; margin-bottom: 5px; display: inline-block; } .woocommerce .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { width: auto; float: none; } .woocommerce-checkout .col2-set { grid-template-columns: 1fr; gap: 0; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { background: #fff; border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: 24px; margin-bottom: 18px; } .woocommerce-checkout #customer_details h3 { font-family: var(--zg-display); font-size: 1.12rem; margin-bottom: 16px; } .woocommerce-checkout #order_review .shop_table { border: 0; } .woocommerce-checkout #order_review .shop_table th, .woocommerce-checkout #order_review .shop_table td { padding: 11px 2px; } .woocommerce-checkout #order_review .order-total .amount { font-size: 1.25rem; color: var(--zg-ink); font-family: var(--zg-display); } .woocommerce-checkout #payment { background: var(--zg-surface-2); border-radius: var(--zg-r); margin-top: 14px; } .woocommerce-checkout #payment ul.payment_methods { padding: 14px 16px !important; border: 0; } .woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 6px; line-height: 1.6; } .woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: var(--zg-r-sm); font-size: .86rem; } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce-checkout #place_order { width: 100%; height: 56px; font-size: 1.05rem; margin-top: 10px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .input-text { padding: 13px 16px; border: 1.5px solid var(--zg-line); border-radius: var(--zg-r-sm); background: #fff; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce .input-text:focus { border-color: var(--zg-yellow); box-shadow: 0 0 0 4px var(--zg-yellow-soft); outline: none; } /* ===== My Account — dashboard (logged in) ===================== */ .woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } /* WooCommerce gives `.woocommerce-account .woocommerce::before` and `.woocommerce::after` `display:table` — inside a grid they become stray items that shove the content into a narrow 2nd row. Kill them here so only nav + content remain (auto-flow: 2 cols / stacked). */ .woocommerce-account.logged-in .woocommerce::before, .woocommerce-account.logged-in .woocommerce::after { content: none; display: none; } /* woocommerce-layout.css floats these and sets width:30%/68% — in a grid that makes the nav ~84px (30% of the 280px track). Reset so each fills its column. */ .woocommerce-account.logged-in .woocommerce-MyAccount-navigation, .woocommerce-account.logged-in .woocommerce-MyAccount-content { width: auto; float: none; } /* Sidebar navigation — standard WooCommerce menu, themed */ .woocommerce-account .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: 10px; box-shadow: var(--zg-shadow-sm); } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation li { border: 0; margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; border-radius: var(--zg-r-sm); font-family: var(--zg-display); font-weight: 600; font-size: .94rem; color: var(--zg-ink-700); transition: background .16s var(--zg-ease), color .16s var(--zg-ease); } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--zg-yellow-soft); color: var(--zg-ink); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--zg-ink); color: #fff; } .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--zg-danger); } .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #fdecea; color: var(--zg-danger); } .woocommerce-account .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: clamp(22px, 3vw, 32px); min-width: 0; box-shadow: var(--zg-shadow-sm); } /* Dashboard intro paragraphs (standard WooCommerce content) */ .woocommerce-MyAccount-content > p { color: var(--zg-ink-700); line-height: 1.7; } .woocommerce-MyAccount-content > p:first-child { font-size: 1.05rem; } .woocommerce-MyAccount-content > p a { color: var(--zg-yellow-700); font-weight: 600; } /* Content forms (edit account / address) — consistent labels, fieldset, hints */ .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-family: var(--zg-display); } .woocommerce-MyAccount-content form .form-row, .woocommerce-MyAccount-content form .woocommerce-form-row { margin: 0 0 16px; } .woocommerce-MyAccount-content .form-row > label, .woocommerce-MyAccount-content .woocommerce-form-row > label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--zg-ink); } .woocommerce-MyAccount-content fieldset { border: 1px solid var(--zg-line); border-radius: var(--zg-r); padding: 16px 20px 6px; margin: 10px 0 20px; } .woocommerce-MyAccount-content fieldset legend { font-family: var(--zg-display); font-weight: 700; font-size: 1.02rem; padding: 0 8px; color: var(--zg-ink); } .woocommerce-MyAccount-content em, .woocommerce-MyAccount-content .description { color: var(--zg-muted); font-size: .85rem; } .woocommerce-MyAccount-content .woocommerce-Address { background: var(--zg-surface-2); border: 1px solid var(--zg-line); border-radius: var(--zg-r); padding: 18px 20px; } .woocommerce-MyAccount-content .woocommerce-Address address { font-style: normal; line-height: 1.7; color: var(--zg-ink-700); } .woocommerce-MyAccount-content .button { margin-top: 6px; } /* password show/hide toggle stays inside the field */ .woocommerce-MyAccount-content .password-input, .woocommerce-MyAccount-content .woocommerce-password-strength { position: relative; display: block; } .woocommerce-MyAccount-content .show-password-input { position: absolute; right: 14px; top: 13px; cursor: pointer; } /* ===== My Account — login / register (logged out) — standard WooCommerce, themed ===== */ .woocommerce-account:not(.logged-in) .woocommerce { max-width: 900px; margin-inline: auto; } #customer_login.u-columns, #customer_login.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } #customer_login .u-column1, #customer_login .u-column2 { background: #fff; border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: clamp(22px, 3vw, 30px); box-shadow: var(--zg-shadow-sm); } #customer_login h2 { font-family: var(--zg-display); font-weight: 800; font-size: 1.3rem; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--zg-yellow); display: inline-block; } .woocommerce-form-login .form-row, .woocommerce-form-register .form-row { margin: 0 0 16px; } .woocommerce-form-login label, .woocommerce-form-register label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--zg-ink); } .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .9rem; margin: 0; } .woocommerce-form-login__rememberme input { width: auto; margin: 0; } .woocommerce-form-login__submit, .woocommerce-form-register__submit { width: 100%; justify-content: center; margin-top: 4px; } .woocommerce button.woocommerce-form-register__submit { background: var(--zg-ink); color: #fff; } .woocommerce button.woocommerce-form-register__submit:hover { background: #000; color: #fff; } .woocommerce-LostPassword { margin: 12px 0 0; font-size: .88rem; } .woocommerce-LostPassword a { color: var(--zg-yellow-700); font-weight: 600; } .woocommerce-form-register > p:not(.form-row) { font-size: .9rem; color: var(--zg-muted); } /* Keep WooCommerce's col2-set clearfix pseudo-elements from breaking layout */ .woocommerce .col2-set::before, .woocommerce .col2-set::after, #customer_login::before, #customer_login::after { content: none; display: none; } #customer_login .u-column1, #customer_login .u-column2, #customer_login .col-1, #customer_login .col-2 { width: auto; float: none; max-width: none; } .woocommerce-ResetPassword.lost_reset_password { max-width: 460px; margin: 0 auto; border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: clamp(22px, 3vw, 30px); background: #fff; box-shadow: var(--zg-shadow-sm); } @media (max-width: 768px) { #customer_login.u-columns, #customer_login.col2-set { grid-template-columns: 1fr; } } /* ---- Order received / Thank-you (order summary) -------------------------- */ .woocommerce-order { max-width: 880px; margin-inline: auto; } .woocommerce-order .woocommerce-thankyou-order-received, .woocommerce-order > .woocommerce-notice--success { background: linear-gradient(120deg, var(--zg-yellow) 0%, var(--zg-yellow-600) 100%); color: var(--zg-ink) !important; border: 0 !important; border-radius: var(--zg-r-lg); padding: 24px 26px; font-family: var(--zg-display); font-weight: 800; font-size: 1.25rem; box-shadow: var(--zg-shadow-yellow); } .woocommerce-order .woocommerce-thankyou-order-received::before { content: "🎉 "; } .woocommerce-order ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; list-style: none; margin: 22px 0; padding: 0; border: 0; box-shadow: none; } .woocommerce-order ul.order_details::before, .woocommerce-order ul.order_details::after { display: none; } .woocommerce-order ul.order_details li { background: #fff; border: 1px solid var(--zg-line) !important; border-radius: var(--zg-r); padding: 14px 16px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--zg-muted); float: none; margin: 0; } .woocommerce-order ul.order_details li strong { display: block; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--zg-ink); margin-top: 5px; font-family: var(--zg-display); } .woocommerce-order-details, .woocommerce-customer-details, .woocommerce-order .woocommerce-bacs-bank-details { background: #fff; border: 1px solid var(--zg-line); border-radius: var(--zg-r-lg); padding: 24px; margin-bottom: 20px; } .woocommerce-order-details h2, .woocommerce-customer-details h2, .woocommerce-order h2, .woocommerce-bacs-bank-details h2 { font-family: var(--zg-display); font-size: 1.2rem; margin-bottom: 16px; } .woocommerce-order-details .shop_table { border: 1px solid var(--zg-line); } .woocommerce-order .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .woocommerce-order .woocommerce-columns--addresses .woocommerce-column { margin: 0; } .woocommerce-order address { font-style: normal; color: var(--zg-ink-700); line-height: 1.7; border: 0; padding: 0; } .woocommerce-order .wc-bacs-bank-details-account-name, .woocommerce-order ul.wc-bacs-bank-details { list-style: none; } @media (max-width: 600px) { .woocommerce-order .woocommerce-columns--addresses { grid-template-columns: 1fr; } } /* ---- Notices ------------------------------------------------------------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--zg-r); border: 1px solid var(--zg-line); border-left: 4px solid var(--zg-yellow); background: var(--zg-yellow-tint); color: var(--zg-ink); padding: 14px 18px; font-size: .92rem; line-height: 1.5; } /* Kill WooCommerce's icon-font ::before/::after (the "WooCommerce" font glyph rendered as a broken tofu box that overlapped the text). */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-message::after, .woocommerce-info::after, .woocommerce-error::after { content: none; display: none; } /* info & message are
s (text + optional CTA): lay out as ONE vertically-centered row with the CTA pushed to the right (replaces WooCommerce's float, which escaped the box once the clearing ::after was removed). error is a