/*! Theme Name: AleBeton Theme URI: https://underscores.me/ Author: Automattic Author URI: https://automattic.com/ Description: Hi. I'm a starter theme called AleBeton, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for. Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: AleBeton Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. AleBeton is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /* ----------------------------- Custom Styles ----------------------------- */ /* The Basics */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@100;200;300;400;500;600;700&family=Noto+Sans+Hebrew:wght@100..900&display=swap'); /* Design tokens */ :root { /* Colors — text */ --text-primary: #000000; --text-secondary: rgba(0, 0, 0, 0.6); --text-disabled: rgba(0, 0, 0, 0.3); --text-contrast: #ffffff; /* Colors — glass */ --glass-silled: #ffffff; --glass-translucent: rgba(255, 255, 255, 0.8); --glass-highlight: rgba(255, 255, 255, 0.3); /* Colors — surface subtle */ --surface-subtle-normal: rgba(0, 0, 0, 0.04); --surface-subtle-hover: rgba(0, 0, 0, 0.08); --surface-subtle-active: rgba(0, 0, 0, 0.16); /* Colors — surface strong */ --surface-strong-normal: #000000; --surface-strong-hover: rgba(0, 0, 0, 0.8); --surface-strong-active: rgba(0, 0, 0, 0.5); /* Colors — surface transparent */ --surface-transparent-normal: rgba(0, 0, 0, 0); --surface-transparent-hover: rgba(0, 0, 0, 0.04); --surface-transparent-active: rgba(0, 0, 0, 0.08); /* Colors — page & UI */ --background: #ffffff; --surface-positive: #5c8b3f; --border: rgba(0, 0, 0, 0.08); /* Numbers — glass (blur radius) */ --glass-frost: 4px; /* Typography — shared stack */ --type-font-family: "IBM Plex Sans Hebrew", "Noto Sans Hebrew", sans-serif; /* Typography — H1 */ --type-h1-font-family: var(--type-font-family); --type-h1-font-weight: 500; --type-h1-font-size: 32px; --type-h1-line-height: 36px; --type-h1-letter-spacing: 0; /* Typography — H2 */ --type-h2-font-family: var(--type-font-family); --type-h2-font-weight: 500; --type-h2-font-size: 20px; --type-h2-line-height: 24px; --type-h2-letter-spacing: 0; /* Typography — H3 */ --type-h3-font-family: var(--type-font-family); --type-h3-font-weight: 500; --type-h3-font-size: 16px; --type-h3-line-height: 20px; --type-h3-letter-spacing: 0; /* Typography — H4 */ --type-h4-font-family: var(--type-font-family); --type-h4-font-weight: 600; --type-h4-font-size: 14px; --type-h4-line-height: 20px; --type-h4-letter-spacing: 0; /* Typography — H5 */ --type-h5-font-family: var(--type-font-family); --type-h5-font-weight: 600; --type-h5-font-size: 12px; --type-h5-line-height: 16px; --type-h5-letter-spacing: 0; /* Typography — body */ --type-body-font-family: var(--type-font-family); --type-body-font-weight: 400; --type-body-font-size: 16px; --type-body-line-height: 20px; --type-body-letter-spacing: 0; /* Typography — subhead */ --type-subhead-font-family: var(--type-font-family); --type-subhead-font-weight: 400; --type-subhead-font-size: 14px; --type-subhead-line-height: 18px; --type-subhead-letter-spacing: 0; /* Typography — caption */ --type-caption-font-family: var(--type-font-family); --type-caption-font-weight: 400; --type-caption-font-size: 12px; --type-caption-line-height: 16px; --type-caption-letter-spacing: 0; } /* Base typography */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-primary); background-color: var(--background); margin: 0; } a { color: var(--surface-positive); text-decoration: none; transition: opacity 0.2s ease-out; -webkit-tap-highlight-color: transparent; } a:active { opacity: 0.5; } a:visited { color: var(--surface-positive); } ul { list-style: none; padding: 0; margin: 0; } h1 { font-family: var(--type-h1-font-family); font-weight: var(--type-h1-font-weight); font-size: var(--type-h1-font-size); line-height: var(--type-h1-line-height); letter-spacing: var(--type-h1-letter-spacing); margin: 0; } h2 { font-family: var(--type-h2-font-family); font-weight: var(--type-h2-font-weight); font-size: var(--type-h2-font-size); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); margin: 0; } h3 { font-family: var(--type-h3-font-family); font-weight: var(--type-h3-font-weight); font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); margin: 0; } h4 { font-family: var(--type-h4-font-family); font-weight: var(--type-h4-font-weight); font-size: var(--type-h4-font-size); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-letter-spacing); margin: 0; } h5 { font-family: var(--type-h5-font-family); font-weight: var(--type-h5-font-weight); font-size: var(--type-h5-font-size); line-height: var(--type-h5-line-height); letter-spacing: var(--type-h5-letter-spacing); margin: 0; } h6 { font-family: var(--type-caption-font-family); font-weight: var(--type-caption-font-weight); font-size: var(--type-caption-font-size); line-height: var(--type-caption-line-height); letter-spacing: var(--type-caption-letter-spacing); margin: 0; } /* Single post — hide prev/next post navigation */ /* Pages & posts — hide WordPress “Edit” in entry footers (edit from the admin bar or dashboard instead) */ .entry-footer .edit-link { display: none; } .widget-area { display: none; } /* Header */ .site-header { position: sticky; top: 0; z-index: 100; padding: 8px 16px; background: linear-gradient(180deg, var(--glass-silled) 0%, var(--glass-translucent) 100%); box-shadow: inset 0 -1px 0 0 var(--glass-highlight); backdrop-filter: blur(var(--glass-frost)); box-sizing: border-box; } .site-header__inner { /* LTR row so “left / right” stay physical edges while the page is RTL. */ direction: ltr; width: 100%; max-width: 1024px; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; box-sizing: border-box; } .site-header__slot--left { justify-self: start; display: flex; align-items: center; } .site-header__slot--center { justify-self: center; } .site-header__slot--right { justify-self: end; display: flex; align-items: center; } .site-header__logo { display: inline-flex; align-items: center; line-height: 0; } .site-header__logo img { display: block; height: auto; width: auto; height: 28px; } .site-header__cart-area { display: flex; align-items: center; flex-direction: row; } .site-header__cart-link { display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 8px; line-height: 0; color: inherit; } .site-header__cart-link img { display: block; } /* WhatsApp (same tap target + focus treatment as cart icon). */ .site-header__whatsapp-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px; line-height: 0; color: inherit; } .site-header__whatsapp-link:focus-visible { outline: 2px solid var(--surface-positive); outline-offset: 2px; } .site-header__whatsapp-link img { display: block; } /* Outer shell: matches Figma Count Badge (padding inset around the black pill). */ .site-header__cart-count-wrap { display: inline-flex; align-items: center; justify-content: center; padding: 2px; border-radius: 1000px; box-sizing: border-box; overflow: hidden; line-height: 0; } .site-header__cart-count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px; min-height: 20px; height: 20px; padding: 0 4px; border-radius: 100px; background: var(--surface-positive); color: var(--text-contrast); font-family: var(--type-h5-font-family); font-size: var(--type-h5-font-size); font-weight: var(--type-h5-font-weight); line-height: var(--type-h5-line-height); text-align: center; } /* Footer */ .site-footer { /* background-color: var(--surface-subtle-normal); */ box-sizing: border-box; } .site-footer__inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; max-width: 1024px; margin-inline: auto; box-sizing: border-box; text-align: center; padding: 32px 32px; border-top: 1px solid var(--border); height: auto; } .site-footer__logo-link { display: flex; flex-shrink: 0; line-height: 0; color: inherit; } .site-footer__logo-link:visited { color: inherit; } .site-footer__logo { display: block; flex-shrink: 0; height: 64px; aspect-ratio: 43 / 49; width: auto; box-sizing: border-box; background-color: var(--text-disabled); mask-image: url("icons/logo_vertical.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-mode: alpha; -webkit-mask-image: url("icons/logo_vertical.svg"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .site-footer__tagline { margin: 0; width: 100%; max-width: 400px; font-family: var(--type-subhead-font-family); font-weight: var(--type-subhead-font-weight); font-size: var(--type-subhead-font-size); line-height: var(--type-subhead-line-height); letter-spacing: var(--type-subhead-letter-spacing); color: var(--text-disabled); } .site-footer__copyright { margin: 0; width: 100%; font-family: var(--type-caption-font-family); font-weight: var(--type-caption-font-weight); font-size: var(--type-caption-font-size); line-height: var(--type-caption-line-height); letter-spacing: var(--type-caption-letter-spacing); color: var(--text-disabled); } @media screen and (max-width: 30em) { .site-footer__inner { padding: 48px 20px; } } /* ----------------------------- WooCommerce styles override ----------------------------- */ /** * Shop tables */ table.shop_table_responsive thead { display: none; } table.shop_table_responsive tbody th { display: none; } table.shop_table_responsive tr td { display: block; text-align: right; clear: both; } table.shop_table_responsive tr td::before { content: attr(data-title) ": "; float: left; } table.shop_table_responsive tr td.product-remove a { text-align: left; } table.shop_table_responsive tr td.product-remove::before { display: none; } table.shop_table_responsive tr td.actions::before, table.shop_table_responsive tr td.download-actions::before { display: none; } table.shop_table_responsive tr td.download-actions .button { display: block; text-align: center; } @media screen and (min-width: 48em) { table.shop_table_responsive thead { display: table-header-group; } table.shop_table_responsive tbody th { display: table-cell; } table.shop_table_responsive tr th, table.shop_table_responsive tr td { text-align: left; } table.shop_table_responsive tr td { display: table-cell; } table.shop_table_responsive tr td::before { display: none; } } /* Cart & checkout */ body.woocommerce-cart #primary.site-main, body.woocommerce-checkout #primary.site-main { box-sizing: border-box; width: 100%; max-width: 640px; margin-inline: auto; padding: 32px; } /* Checkout — order received (thank you) */ body.woocommerce-order-received .entry-header { margin-bottom: 16px; } body.woocommerce-order-received .entry-title { margin-bottom: 0; } body.woocommerce-order-received .woocommerce-order { display: flex; flex-direction: column; gap: 32px; } body.woocommerce-order-received .woocommerce-notice--success { margin: 0; } /* Payment-gateway thank-you text (e.g. COD instructions) is plain

; strip default paragraph spacing */ body.woocommerce-order-received .woocommerce-order > p:not(.woocommerce-notice) { margin: 0; padding: 0; } body.woocommerce-order-received ul.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; } body.woocommerce-order-received ul.woocommerce-order-overview li { box-sizing: border-box; color: var(--text-secondary); display: flex; flex: 1 1 240px; flex-direction: column; font-family: var(--type-body-font-family); font-size: var(--type-body-font-size); font-weight: var(--type-body-font-weight); gap: 4px; letter-spacing: var(--type-body-letter-spacing); line-height: var(--type-body-line-height); min-width: 240px; } body.woocommerce-order-received ul.woocommerce-order-overview li strong { color: var(--text-primary); font-weight: var(--type-body-font-weight); } body.woocommerce-order-received .woocommerce-order-details { display: flex; flex-direction: column; gap: 16px; } body.woocommerce-order-received .woocommerce-order-details__title { margin: 0; } body.woocommerce-order-received table.woocommerce-table--order-details { border-collapse: separate; border-spacing: 0; display: block; width: 100%; } body.woocommerce-order-received table.woocommerce-table--order-details thead, body.woocommerce-order-received table.woocommerce-table--order-details tbody, body.woocommerce-order-received table.woocommerce-table--order-details tfoot { display: block; } body.woocommerce-order-received table.woocommerce-table--order-details tr { border-bottom: 1px solid var(--border); box-sizing: border-box; display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; padding: 16px 0; } body.woocommerce-order-received table.woocommerce-table--order-details thead tr { font-weight: 600; } body.woocommerce-order-received table.woocommerce-table--order-details th, body.woocommerce-order-received table.woocommerce-table--order-details td { display: block; box-sizing: border-box; } body.woocommerce-order-received table.woocommerce-table--order-details thead th.product-name, body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name { flex: 1 1 auto; min-width: 0; text-align: start; } body.woocommerce-order-received table.woocommerce-table--order-details thead th.product-total, body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-total { flex: 0 0 auto; text-align: end; white-space: nowrap; } body.woocommerce-order-received table.woocommerce-table--order-details tfoot th { flex: 1 1 auto; font-weight: inherit; min-width: 0; text-align: start; } body.woocommerce-order-received table.woocommerce-table--order-details tfoot td { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; text-align: end; white-space: normal; } body.woocommerce-order-received table.woocommerce-table--order-details tbody tr.woocommerce-table__product-purchase-note { display: block; } body.woocommerce-order-received table.woocommerce-table--order-details tbody tr.woocommerce-table__product-purchase-note td { text-align: start; white-space: normal; width: 100%; } @media (max-width: 480px) { body.woocommerce-order-received table.woocommerce-table--order-details thead { display: none; } body.woocommerce-order-received table.woocommerce-table--order-details tr { align-items: stretch; flex-direction: column; gap: 8px; } body.woocommerce-order-received table.woocommerce-table--order-details tbody td, body.woocommerce-order-received table.woocommerce-table--order-details tfoot th, body.woocommerce-order-received table.woocommerce-table--order-details tfoot td { flex: none; text-align: right; white-space: normal; width: 100%; } } body.woocommerce-order-received .woocommerce-customer-details { display: flex; flex-direction: column; gap: 16px; } body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title { margin: 0; } body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses { display: flex; flex-wrap: wrap; gap: 1.5rem; } body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses > .woocommerce-column { box-sizing: border-box; flex: 1 1 13.75rem; min-width: min(100%, 13.75rem); } body.woocommerce-order-received .woocommerce-customer-details address { font-style: normal; margin: 0; } body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--phone, body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--email { margin: 16px 0 0; } /* Checkout — block order summary */ body.woocommerce-checkout .wp-block-woocommerce-checkout { padding-top: 32px; } body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout { gap: 32px; } body.woocommerce-checkout .wc-block-checkout__sidebar { margin-bottom: 0; } body.woocommerce-checkout .wc-block-components-form.wc-block-checkout__form .wc-block-components-checkout-step { margin-bottom: 32px; } body.woocommerce-checkout .wc-block-components-form.wc-block-checkout__form .wc-block-components-checkout-step:last-child { margin-bottom: 0; } body.woocommerce-checkout .wc-block-components-main .wp-block-woocommerce-checkout-express-payment-block { margin-bottom: 32px; } body.woocommerce-checkout .wc-block-checkout__guest-checkout-notice { display: none !important; } /* Checkout — shipping / local pickup toggle */ body.woocommerce-checkout .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-container, .edit-post-visual-editor .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-container { background: var(--surface-subtle-normal); border-radius: 100px; overflow: clip; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option, .edit-post-visual-editor .wc-block-checkout__shipping-method-option { -webkit-tap-highlight-color: transparent; border-radius: 100px; padding: 8px; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected, .edit-post-visual-editor .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected { border: 2px solid transparent; box-shadow: 0 2px 8px #00000020; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option:not(.wc-block-checkout__shipping-method-option--selected):hover, body.woocommerce-checkout .wc-block-checkout__shipping-method-option:not(.wc-block-checkout__shipping-method-option--selected):focus-within, .edit-post-visual-editor .wc-block-checkout__shipping-method-option:not(.wc-block-checkout__shipping-method-option--selected):hover, .edit-post-visual-editor .wc-block-checkout__shipping-method-option:not(.wc-block-checkout__shipping-method-option--selected):focus-within { background-color: transparent; outline: none; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected:hover, body.woocommerce-checkout .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected:focus-within, .edit-post-visual-editor .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected:hover, .edit-post-visual-editor .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected:focus-within { background-color: var(--background); outline: none; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option-title-wrapper, .edit-post-visual-editor .wc-block-checkout__shipping-method-option-title-wrapper { align-items: center; gap: 6px; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option:nth-child(1) .wc-block-checkout__shipping-method-option-icon, .edit-post-visual-editor .wc-block-checkout__shipping-method-option:nth-child(1) .wc-block-checkout__shipping-method-option-icon { background: url('icons/Local Shipping.svg') center / contain no-repeat; flex-shrink: 0; height: 20px; width: 20px; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option:nth-child(1) .wc-block-checkout__shipping-method-option-icon svg, .edit-post-visual-editor .wc-block-checkout__shipping-method-option:nth-child(1) .wc-block-checkout__shipping-method-option-icon svg { display: none; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option:nth-child(1) .wc-block-checkout__shipping-method-option-icon *, .edit-post-visual-editor .wc-block-checkout__shipping-method-option:nth-child(1) .wc-block-checkout__shipping-method-option-icon * { fill: transparent !important; stroke: transparent !important; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option:nth-child(2) .wc-block-checkout__shipping-method-option-icon, .edit-post-visual-editor .wc-block-checkout__shipping-method-option:nth-child(2) .wc-block-checkout__shipping-method-option-icon { background: url('icons/Storefront.svg') center / contain no-repeat; flex-shrink: 0; height: 20px; width: 20px; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option:nth-child(2) .wc-block-checkout__shipping-method-option-icon svg, .edit-post-visual-editor .wc-block-checkout__shipping-method-option:nth-child(2) .wc-block-checkout__shipping-method-option-icon svg { display: none; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option:nth-child(2) .wc-block-checkout__shipping-method-option-icon *, .edit-post-visual-editor .wc-block-checkout__shipping-method-option:nth-child(2) .wc-block-checkout__shipping-method-option-icon * { fill: transparent !important; stroke: transparent !important; } body.woocommerce-checkout .wc-block-checkout__shipping-method-option-title, body.woocommerce-checkout .wc-block-checkout__shipping-method-option-price, .edit-post-visual-editor .wc-block-checkout__shipping-method-option-title, .edit-post-visual-editor .wc-block-checkout__shipping-method-option-price { font-family: var(--type-h4-font-family); font-size: var(--type-h4-font-size); font-weight: var(--type-h4-font-weight); letter-spacing: var(--type-h4-letter-spacing); line-height: var(--type-h4-line-height); } /* Checkout — radio lists (shipping rates, etc.): remove gray group frame + row hairlines */ body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after, .edit-post-visual-editor .wc-block-components-radio-control--highlight-checked::after { border: none; content: none; } body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after, .edit-post-visual-editor .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after { display: none; } body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after, .edit-post-visual-editor .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after { display: none; } body.woocommerce-checkout .wc-block-components-radio-control label.wc-block-components-radio-control__option, .edit-post-visual-editor .wc-block-components-radio-control label.wc-block-components-radio-control__option { -webkit-tap-highlight-color: transparent; border-radius: 12px; } body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option, .edit-post-visual-editor .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option { -webkit-tap-highlight-color: transparent; border-radius: 12px; } body.woocommerce-checkout .wc-block-components-radio-control label.wc-block-components-radio-control__option:focus, body.woocommerce-checkout .wc-block-components-radio-control label.wc-block-components-radio-control__option:focus-visible, body.woocommerce-checkout .wc-block-components-radio-control label.wc-block-components-radio-control__option:focus-within, .edit-post-visual-editor .wc-block-components-radio-control label.wc-block-components-radio-control__option:focus, .edit-post-visual-editor .wc-block-components-radio-control label.wc-block-components-radio-control__option:focus-visible, .edit-post-visual-editor .wc-block-components-radio-control label.wc-block-components-radio-control__option:focus-within { outline: none; } body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option:focus, body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option:focus-visible, body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option:focus-within, .edit-post-visual-editor .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option:focus, .edit-post-visual-editor .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option:focus-visible, .edit-post-visual-editor .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option:focus-within { outline: none; } body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:focus, body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible, .edit-post-visual-editor .wc-block-components-radio-control .wc-block-components-radio-control__input:focus, .edit-post-visual-editor .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible { box-shadow: none; outline: none; outline-offset: 0; } body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked, .edit-post-visual-editor .wc-block-components-radio-control .wc-block-components-radio-control__input:checked { background: transparent; border-color: var(--surface-positive); } body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before, .edit-post-visual-editor .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { background: var(--surface-positive) !important; } body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted, body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted, .edit-post-visual-editor .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted, .edit-post-visual-editor .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted { background: color-mix(in srgb, var(--surface-positive) 25%, transparent); border-radius: 12px; box-shadow: none !important; } /* Checkout — block form fields */ body.woocommerce-checkout .wc-block-components-text-input label, body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label { color: var(--text-secondary); } body.woocommerce-checkout .wc-block-components-text-input input:is([type="email"], [type="number"], [type="password"], [type="tel"], [type="text"], [type="url"]), body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:is([type="email"], [type="number"], [type="password"], [type="tel"], [type="text"], [type="url"]) { border: 1px solid var(--border); border-radius: 12px; } body.woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__container { border-radius: 12px; } body.woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select { border: 1px solid var(--border); border-radius: 12px; } body.woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__label { color: var(--text-secondary); } body.woocommerce-checkout .wc-block-components-textarea { border: 1px solid var(--border); border-radius: 12px; } body.woocommerce-checkout .wc-block-components-text-input input:is([type="email"], [type="number"], [type="password"], [type="tel"], [type="text"], [type="url"]):focus, body.woocommerce-checkout .wc-block-components-text-input input:is([type="email"], [type="number"], [type="password"], [type="tel"], [type="text"], [type="url"]):focus-visible, body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:is([type="email"], [type="number"], [type="password"], [type="tel"], [type="text"], [type="url"]):focus, body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:is([type="email"], [type="number"], [type="password"], [type="tel"], [type="text"], [type="url"]):focus-visible { border-color: var(--surface-positive); border-width: 1.5px; box-shadow: none; outline: none; } body.woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select:focus, body.woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select:focus-visible { border-color: var(--surface-positive); box-shadow: none; outline: none; } body.woocommerce-checkout .wc-block-components-textarea:focus, body.woocommerce-checkout .wc-block-components-textarea:focus-visible { border-color: var(--surface-positive); box-shadow: none; outline: none; } body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus, body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible { outline: none; outline-offset: 0; } body.woocommerce-checkout .wc-block-components-checkbox, body.woocommerce-checkout .wc-block-components-checkbox label, body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { -webkit-tap-highlight-color: transparent; } body.woocommerce-checkout .wc-block-components-checkbox label { font-family: var(--type-subhead-font-family); font-size: var(--type-subhead-font-size); font-weight: var(--type-subhead-font-weight); letter-spacing: var(--type-subhead-letter-spacing); line-height: var(--type-subhead-line-height); } body.woocommerce-checkout .wc-block-components-checkbox:not(.has-error) .wc-block-components-checkbox__input[type="checkbox"] { background-color: var(--background); border: 1px solid var(--text-disabled); border-radius: 5px; } body.woocommerce-checkout .wc-block-components-checkbox:not(.has-error) .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--surface-positive); border: none; } body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark, body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark path { fill: var(--text-contrast); } /* Checkout — place order (match add to cart / proceed to checkout) */ body.woocommerce-checkout .wc-block-components-checkout-place-order-button { align-items: center; background: var(--surface-positive) !important; border: 0 !important; border-radius: 1000px !important; box-shadow: none !important; box-sizing: border-box !important; color: var(--text-contrast) !important; cursor: pointer; display: inline-flex !important; font-family: var(--type-h3-font-family) !important; font-size: var(--type-h3-font-size) !important; font-weight: var(--type-h3-font-weight) !important; justify-content: center; letter-spacing: var(--type-h3-letter-spacing) !important; line-height: var(--type-h3-line-height) !important; margin: 0 !important; max-width: 100%; padding: 12px !important; padding-inline: calc(12px + 6px) !important; text-decoration: none !important; transition: all 0.2s ease-out; -webkit-tap-highlight-color: transparent; width: max-content !important; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:visited { color: var(--text-contrast) !important; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:active:not(:disabled) { opacity: 0.5; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled { cursor: not-allowed; opacity: 0.5; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus, body.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible { box-shadow: none !important; outline: none; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text { color: inherit !important; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button svg { fill: currentColor; } @media (max-width: 480px) { body.woocommerce-checkout .wc-block-components-checkout-place-order-button { width: 100% !important; } } body.woocommerce-checkout .checkout-order-summary-block-fill-wrapper { display: none !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content { border-bottom: 1px solid var(--border); display: block !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title { display: none !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-cart-items-block.wc-block-components-totals-wrapper { padding: 16px 0; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper { border-top-color: var(--border); } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-totals-block { border-top-color: var(--border); } body.woocommerce-checkout .wc-block-checkout__main .wc-block-components-order-summary { margin-top: 16px; } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image { margin-top: 0; padding-bottom: 0; width: 56px; } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image img { width: 56px !important; max-width: 56px !important; height: 56px !important; border-radius: 14px; object-fit: cover; vertical-align: top; } /* Checkout — order summary qty badge (header cart pill, top-right on thumb) */ body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity { align-items: center; background: var(--text-contrast); border: none; border-radius: 100px; box-shadow: none; box-sizing: border-box; color: var(--text-primary); display: inline-flex; font-family: var(--type-h5-font-family); font-size: var(--type-h5-font-size); font-weight: var(--type-h5-font-weight); height: 20px; justify-content: center; left: auto; line-height: var(--type-h5-line-height); min-height: 20px; min-width: 20px; padding: 0 4px; position: absolute; right: 4px; text-align: center; top: 4px; transform: translate(50%, -50%); white-space: nowrap; z-index: 1; } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description { padding: 0 16px; } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item { align-items: flex-start; padding-bottom: 0; } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item:not(:last-child) { margin-bottom: 16px; } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-name, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-name:visited { font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-primary); } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-cart-item__prices { display: none !important; } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price { font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-primary); } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-metadata, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-metadata .wc-block-components-product-metadata__description, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-metadata .wc-block-components-product-metadata__description > p, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-metadata .wc-block-components-product-metadata__variation-data, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-metadata ul, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-metadata li, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details .wc-block-components-product-details__name, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details .wc-block-components-product-details__value { font-family: var(--type-subhead-font-family); font-weight: var(--type-subhead-font-weight); font-size: var(--type-subhead-font-size); line-height: var(--type-subhead-line-height); letter-spacing: var(--type-subhead-letter-spacing); color: var(--text-secondary); } body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-metadata a, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-metadata a:visited, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details a, body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-details a:visited { color: var(--text-secondary); } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label, body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value { font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-primary); } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label strong, body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value strong { font-weight: var(--type-body-font-weight); text-transform: none; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label, body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--type-h3-font-family); font-weight: var(--type-h3-font-weight); font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); color: var(--text-primary); } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label strong, body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value strong { font-weight: var(--type-h3-font-weight); text-transform: none; } /* Title → cart: 16px (Woo block cart adds its own padding-top; avoid stacking with h1 margin) */ body.woocommerce-cart .entry-header { margin-bottom: 16px; } body.woocommerce-cart .entry-title { margin-bottom: 0; } body.woocommerce-cart .wc-block-cart { padding-top: 0 !important; } body.woocommerce-cart .woocommerce-cart-form__contents td.product-name > a, body.woocommerce-cart .woocommerce-cart-form__contents td.product-name > a:visited { font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-primary); margin-bottom: 4px; } body.woocommerce-cart .woocommerce-cart-form__contents td.product-price, body.woocommerce-cart .woocommerce-cart-form__contents td.product-subtotal { font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-primary); } body.woocommerce-cart .woocommerce-cart-form__contents td.product-name > *:not(a) { font-family: var(--type-subhead-font-family); font-weight: var(--type-subhead-font-weight); font-size: var(--type-subhead-font-size); line-height: var(--type-subhead-line-height); letter-spacing: var(--type-subhead-letter-spacing); color: var(--text-secondary); } /* Cart page — WooCommerce Cart block (table .wc-block-cart-items, not classic shortcode cart) */ body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-name, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-name:visited { font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-primary); } body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__prices, body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__total { font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-primary); } body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata .wc-block-components-product-metadata__description, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata .wc-block-components-product-metadata__description > p, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata .wc-block-components-product-metadata__variation-data, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata ul, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata li, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-details, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-details .wc-block-components-product-details__name, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-details .wc-block-components-product-details__value { font-family: var(--type-subhead-font-family); font-weight: var(--type-subhead-font-weight); font-size: var(--type-subhead-font-size); line-height: var(--type-subhead-line-height); letter-spacing: var(--type-subhead-letter-spacing); color: var(--text-secondary); margin-bottom: 4px; } body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata a, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata a:visited, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-details a, body.woocommerce-cart .wc-block-cart-items .wc-block-components-product-details a:visited { color: var(--text-secondary); } body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__prices { display: none !important; } /* Cart page — line item layout: image (96) | gap 16 | details+qty+trash (fills) | price (auto) */ body.woocommerce-cart .wc-block-cart table.wc-block-cart-items, body.woocommerce-cart table.wc-block-cart-items { display: block !important; width: 100%; border-collapse: separate; border-spacing: 0; } body.woocommerce-cart table.wc-block-cart-items thead { display: none !important; } body.woocommerce-cart table.wc-block-cart-items tbody { display: block !important; width: 100%; } body.woocommerce-cart table.wc-block-cart-items tr.wc-block-cart-items__row { display: grid !important; grid-template-columns: 96px minmax(0, 1fr) max-content !important; column-gap: 16px !important; row-gap: 0 !important; align-items: start; width: 100%; box-sizing: border-box; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--border); } /* Cart page — block cart: replace WooCommerce color-mix lines with theme --border */ body.woocommerce-cart .wc-block-cart .wp-block-woocommerce-cart-order-summary-block { border-bottom: none !important; margin-bottom: 0 !important; } body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-totals-block { border-top: none !important; padding-bottom: 0 !important; } /* One divider per row; padding lives on the row (WooCommerce totals-wrapper border-top caused a double dark line above the total) */ body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-totals-block > div { box-sizing: border-box; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--border); } /* Older cart templates: line rows live directly under the order summary (no totals wrapper) */ body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-subtotal-block, body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-fee-block, body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-discount-block, body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-shipping-block, body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-taxes-block { box-sizing: border-box; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--border); } body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper { border: none !important; padding: 0 !important; margin: 0 !important; } body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item.wc-block-components-totals-footer-item { box-sizing: border-box; margin: 0 !important; padding: 16px 0 !important; border-bottom: 1px solid var(--border); } /* Cart order summary: shipping / subtotal / taxes = Body; estimated total row = H3 (overrides WooCommerce footer 1.25em) */ body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label, body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value { font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); color: var(--text-primary); } body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label strong, body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value strong { font-weight: var(--type-body-font-weight); } body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label, body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--type-h3-font-family) !important; font-weight: var(--type-h3-font-weight) !important; font-size: var(--type-h3-font-size) !important; line-height: var(--type-h3-line-height) !important; letter-spacing: var(--type-h3-letter-spacing) !important; color: var(--text-primary); } /* Narrow cart: WooCommerce adds 24px under the first column — removes the strip between line items and totals */ @container (max-width: 699px) { body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar { margin-bottom: 0 !important; } } /* Cart page — proceed to checkout: match PDP add to cart; width hugs label (Woo default is width: 100%) */ /* 32px above the button (after order summary and/or express checkout block in the DOM) */ body.woocommerce-cart .wc-block-cart .wp-block-woocommerce-proceed-to-checkout-block { width: auto !important; max-width: 100%; margin-top: 32px !important; } body.woocommerce-cart .wc-block-cart .wc-block-cart__submit { display: flex; justify-content: flex-start; width: 100%; max-width: 100%; margin-bottom: 0 !important; } body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box !important; width: max-content !important; max-width: 100%; margin: 0 !important; background: var(--surface-positive) !important; color: var(--text-contrast) !important; font-family: var(--type-h3-font-family) !important; font-weight: var(--type-h3-font-weight) !important; font-size: var(--type-h3-font-size) !important; line-height: var(--type-h3-line-height) !important; letter-spacing: var(--type-h3-letter-spacing) !important; padding: 12px !important; padding-inline: calc(12px + 6px) !important; border: 0 !important; border-radius: 1000px !important; cursor: pointer; transition: all 0.2s ease-out; -webkit-tap-highlight-color: transparent; text-decoration: none !important; } body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button:visited { color: var(--text-contrast) !important; } body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button:active { opacity: 0.5; } body.woocommerce-cart table.wc-block-cart-items tr.wc-block-cart-items__row > td { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; grid-column: auto !important; grid-row: auto !important; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__product { min-width: 0; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__total { justify-self: end; white-space: nowrap; } /* Cart page — line item product image */ body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image, body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__image { box-sizing: border-box; width: 96px; max-width: 96px; overflow: hidden; border-radius: 18px; line-height: 0; vertical-align: top; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image a, body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__image a { display: block; border-radius: 18px; overflow: hidden; line-height: 0; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image img, body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__image img { display: block; width: 96px; height: 96px; max-width: 96px; object-fit: cover; border-radius: 18px; } body.woocommerce-cart .woocommerce-cart-form__contents td.product-thumbnail { width: 96px; max-width: 96px; overflow: hidden; border-radius: 18px; line-height: 0; vertical-align: top; } body.woocommerce-cart .woocommerce-cart-form__contents td.product-thumbnail a { display: block; border-radius: 18px; overflow: hidden; line-height: 0; } body.woocommerce-cart .woocommerce-cart-form__contents td.product-thumbnail img { display: block; width: 96px; height: 96px; max-width: 96px; object-fit: cover; border-radius: 18px; } /* Cart page — quantity (match WooCommerce table.* selector specificity + !important vs core cart-rtl.css) */ /* Do not let the stepper grow with the row: same footprint on every line item */ body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-components-quantity-selector { box-sizing: border-box; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; width: max-content !important; max-width: none; border: none; background: transparent; align-items: center; } body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { pointer-events: none; cursor: default; user-select: none; -webkit-user-select: none; caret-color: transparent; box-shadow: none !important; /* Fixed digit column so +/- stay the same distance apart on every product */ width: 24px !important; min-width: 24px !important; max-width: 24px !important; flex: 0 0 auto !important; text-align: center; font-variant-numeric: tabular-nums; padding-inline: 2px !important; } body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus { outline: none; box-shadow: none !important; } body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector__button { appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0; padding: 6px; border: none; border-radius: 100px; background-color: var(--surface-subtle-normal); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; color: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; /* WooCommerce component CSS: opacity .6 default, :hover/:focus → 1 — that reads as a hover state */ opacity: 1 !important; box-shadow: none !important; } body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector__button--minus { background-image: url('icons/Subtract.svg'); } body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector__button--plus { background-image: url('icons/Add.svg'); } body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector__button:hover:not(:disabled), body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector__button:focus:not(:disabled), body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector__button:focus-visible:not(:disabled), body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector__button:active:not(:disabled) { background-color: var(--surface-subtle-normal) !important; opacity: 1 !important; box-shadow: none !important; outline: none !important; } body.woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector__button:disabled { opacity: 0.35 !important; cursor: not-allowed; } /* Header mini-cart: same WC opacity / focus ring on +/- — not scoped to body.woocommerce-cart */ body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:not(:disabled) { opacity: 1 !important; box-shadow: none !important; } body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:hover:not(:disabled), body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:focus:not(:disabled), body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:focus-visible:not(:disabled), body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:active:not(:disabled) { opacity: 1 !important; box-shadow: none !important; outline: none !important; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link { appearance: none; -webkit-appearance: none; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 6px !important; border: none !important; border-radius: 100px !important; box-shadow: none !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; background: var(--surface-subtle-normal) url('icons/Delete.svg') center / 20px 20px no-repeat !important; text-decoration: none !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; white-space: nowrap !important; overflow: hidden !important; cursor: pointer; -webkit-tap-highlight-color: transparent; vertical-align: middle !important; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover, body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus, body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:active { background: var(--surface-subtle-normal) url('icons/Delete.svg') center / 20px 20px no-repeat !important; color: transparent !important; text-decoration: none !important; box-shadow: none !important; } body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } /* Classic cart table + single product: same quantity stepper (markup from woocommerce/global/quantity-input.php) */ body.woocommerce-cart .woocommerce-cart-form .alebeton-quantity-stepper, .single-product div.product .alebeton-quantity-stepper { direction: rtl; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; box-sizing: border-box; width: max-content; max-width: 100%; flex: 0 0 auto; } body.woocommerce-cart .woocommerce-cart-form td.product-quantity { width: 1%; white-space: nowrap; } body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-minus, body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-plus, .single-product div.product .alebeton-qty-minus, .single-product div.product .alebeton-qty-plus { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 6px; border: none; border-radius: 100px; box-sizing: border-box; background-color: var(--surface-subtle-normal); color: var(--text-primary); min-width: 32px; min-height: 32px; width: 32px; height: 32px; cursor: pointer; transition: opacity 0.15s ease-out, background 0.15s ease-out; -webkit-tap-highlight-color: transparent; } body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-minus:hover:not(:disabled), body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-plus:hover:not(:disabled), body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-minus:focus:not(:disabled), body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-plus:focus:not(:disabled), body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-minus:active:not(:disabled), body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-plus:active:not(:disabled), .single-product div.product .alebeton-qty-minus:hover:not(:disabled), .single-product div.product .alebeton-qty-plus:hover:not(:disabled), .single-product div.product .alebeton-qty-minus:focus:not(:disabled), .single-product div.product .alebeton-qty-plus:focus:not(:disabled), .single-product div.product .alebeton-qty-minus:active:not(:disabled), .single-product div.product .alebeton-qty-plus:active:not(:disabled) { background-color: var(--surface-subtle-normal); opacity: 1; } body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-minus:disabled, body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-plus:disabled, .single-product div.product .alebeton-qty-minus:disabled, .single-product div.product .alebeton-qty-plus:disabled { opacity: 0.35; cursor: not-allowed; } body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-icon, .single-product div.product .alebeton-qty-icon { display: flex; align-items: center; justify-content: center; line-height: 0; color: var(--text-primary); } body.woocommerce-cart .woocommerce-cart-form .alebeton-qty-icon svg, .single-product div.product .alebeton-qty-icon svg { display: block; width: 20px; height: 20px; } body.woocommerce-cart .woocommerce-cart-form .alebeton-quantity-stepper input.qty, .single-product div.product .alebeton-quantity-stepper input.qty { pointer-events: none; cursor: default; user-select: none; -webkit-user-select: none; caret-color: transparent; width: 4ch !important; min-width: 4ch !important; max-width: 6ch !important; flex: 0 0 auto !important; margin: 0; box-sizing: border-box; text-align: center; font-variant-numeric: tabular-nums; padding-inline: 2px !important; border: none; border-radius: 0; background: transparent; color: var(--text-primary); font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); -moz-appearance: textfield; } body.woocommerce-cart .woocommerce-cart-form .alebeton-quantity-stepper input.qty::-webkit-outer-spin-button, body.woocommerce-cart .woocommerce-cart-form .alebeton-quantity-stepper input.qty::-webkit-inner-spin-button, .single-product div.product .alebeton-quantity-stepper input.qty::-webkit-outer-spin-button, .single-product div.product .alebeton-quantity-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.woocommerce-cart .woocommerce-cart-form td.product-remove a.remove { box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; padding: 6px !important; border-radius: 100px !important; background: var(--surface-subtle-normal) url('icons/Delete.svg') center / 20px 20px no-repeat !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-decoration: none !important; overflow: hidden !important; text-indent: -9999px !important; } body.woocommerce-cart .woocommerce-cart-form td.product-remove a.remove:hover, body.woocommerce-cart .woocommerce-cart-form td.product-remove a.remove:focus, body.woocommerce-cart .woocommerce-cart-form td.product-remove a.remove:active { background: var(--surface-subtle-normal) url('icons/Delete.svg') center / 20px 20px no-repeat !important; color: transparent !important; text-decoration: none !important; } /** * Shop — hero (main shop only) */ .alebeton-shop-hero-wrap { box-sizing: border-box; width: 100%; padding: 32px; } .alebeton-shop-hero-inner { box-sizing: border-box; position: relative; width: 100%; max-width: 1024px; margin: 0 auto; height: 64vh; min-height: 360px; border-radius: 1000px; overflow: hidden; display: flex; align-items: center; justify-content: center; } @media screen and (min-width: 480px) { .alebeton-shop-hero-inner { height: 360px; } } .alebeton-shop-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .alebeton-shop-hero-overlay { position: absolute; inset: 0; z-index: 1; background-color: #644a3350; } /* Full hero tap target — sits under text/arrow; headings stay visible to screen readers */ .alebeton-shop-hero-inner-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: manipulation; } /* Beat global a:hover / a:active so the hero does not flash or dim on tap (esp. iOS) */ .alebeton-shop-hero-inner-link:link, .alebeton-shop-hero-inner-link:visited, .alebeton-shop-hero-inner-link:hover, .alebeton-shop-hero-inner-link:active, .alebeton-shop-hero-inner-link:focus { color: transparent; opacity: 1; } .alebeton-shop-hero-inner-link:focus-visible { outline: 2px solid var(--text-contrast); outline-offset: -4px; } .alebeton-shop-hero-content { position: relative; z-index: 3; box-sizing: border-box; max-width: 100%; padding: 24px; text-align: center; color: var(--text-contrast); pointer-events: none; } .alebeton-shop-hero-title { color: var(--text-contrast); white-space: pre-line; } .alebeton-shop-hero-subtitle { margin-top: 16px; color: var(--text-contrast); white-space: pre-line; } .alebeton-shop-hero-arrow { position: absolute; bottom: 64px; left: 50%; z-index: 3; transform: translateX(-50%); line-height: 0; pointer-events: none; } .alebeton-shop-hero-arrow img { display: block; width: 24px; height: 24px; } #alebeton-shop-catalog { scroll-margin-top: 80px; } /** * Products — shop grid */ ul.products { box-sizing: border-box; list-style: none; padding: 32px; margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; gap: 32px 16px; justify-content: center; } ul.products li.product { list-style: none; width: 144px; gap: 16px; text-align: center; } ul.products li.product img { display: block; width: 100%; height: auto; border-radius: 18px; margin-bottom: 8px; } ul.products li.product .button { display: block; } ul.products li.product a { color: var(--text-primary); } ul.products li.product h3.price { margin: 0 0 4px; } ul.products li.product .woocommerce-loop-product__title { margin: 0; font-family: var(--type-subhead-font-family); font-weight: var(--type-subhead-font-weight); font-size: var(--type-subhead-font-size); line-height: var(--type-subhead-line-height); letter-spacing: var(--type-subhead-letter-spacing); } /** * Shop — main shop: featured + category sections */ .alebeton-shop-category-blocks { display: flex; flex-direction: column; max-width: 1024px; margin: 0 auto; } .alebeton-shop-category-block { box-sizing: border-box; padding: 32px; } .alebeton-shop-category-header { text-align: right; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 32px; } .alebeton-shop-category-title { margin: 0; text-align: center; width: 100%; font-size: var(--type-h2-font-size); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); font-weight: var(--type-h2-font-weight); font-family: var(--type-h2-font-family); } .alebeton-shop-category-description { margin: 0; font-family: var(--type-subhead-font-family); font-weight: var(--type-subhead-font-weight); font-size: var(--type-subhead-font-size); line-height: var(--type-subhead-line-height); letter-spacing: var(--type-subhead-letter-spacing); text-align: center; width: 100%; } .alebeton-shop-category-description p { margin: 0; } .alebeton-shop-category-description p + p { margin-top: 0.5em; } .alebeton-shop-category-grid ul.products { padding: 0; } /** * Cart (empty) — “חדש בחנות” / WooCommerce product-new block: match main shop category sections */ body.woocommerce-cart .wp-block-woocommerce-empty-cart-block { box-sizing: border-box; max-width: 1024px; margin-inline: auto; padding: 0; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block hr.wp-block-separator { display: none !important; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title { padding: 32px 0; box-sizing: border-box; border-bottom: 1px solid var(--border); color: var(--text-disabled); /* Visual Body (still an h2 for accessibility) */ font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); } /* Empty cart heading: basket image instead of WooCommerce default SVG mask (::before) */ body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { background-color: transparent !important; background-image: url('icons/empty_cart.png') !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; mask-image: none !important; -webkit-mask-image: none !important; width: 240px; height: 240px; margin: 0 auto 0; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) { box-sizing: border-box; margin: 32px 0; text-align: center; width: 100%; font-family: var(--type-h2-font-family); font-weight: var(--type-h2-font-weight); font-size: var(--type-h2-font-size); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); color: var(--text-primary); } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products { list-style: none !important; box-sizing: border-box; margin: 0 auto !important; padding: 0 !important; width: 100%; display: flex !important; flex-wrap: wrap !important; gap: 32px 16px !important; justify-content: center !important; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { box-sizing: border-box; list-style: none !important; width: 144px !important; max-width: 144px !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product > a.wc-block-grid__product-link { display: contents; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-onsale { order: 0; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image { order: 1; width: 100%; margin: 0 0 8px; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img { display: block; width: 100%; height: auto; border-radius: 18px; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price { order: 2; margin: 0 0 4px !important; color: var(--text-primary); font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { order: 3; margin: 0 !important; padding: 0 !important; font-family: var(--type-subhead-font-family) !important; font-weight: var(--type-subhead-font-weight) !important; font-size: var(--type-subhead-font-size) !important; line-height: var(--type-subhead-line-height) !important; letter-spacing: var(--type-subhead-letter-spacing) !important; color: var(--text-primary) !important; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-rating { display: none !important; } body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart { display: none !important; } /** * Single product */ .product_meta { display: none; } .single-product div.product .woocommerce-tabs.wc-tabs-wrapper { display: none; } .single-product div.product { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; padding: 32px; box-sizing: border-box; max-width: 1024px; margin: 0 auto; } .single-product div.product > span.onsale { position: absolute; top: 1em; inset-inline-end: 1em; z-index: 2; } .single-product div.product .woocommerce-product-gallery { position: relative; float: none; flex: 1 1 240px; max-width: 50%; } .single-product div.product .summary.entry-summary { flex: 1 1 240px; max-width: 50%; margin-top: 0; } .single-product div.product .summary.entry-summary h1.price { margin: 0 0 16px; color: var(--text-primary); font-family: var(--type-h1-font-family); font-weight: var(--type-h1-font-weight); font-size: var(--type-h1-font-size); line-height: var(--type-h1-line-height); letter-spacing: var(--type-h1-letter-spacing); } .single-product div.product .summary.entry-summary h2.product_title { margin: 0 0 16px; color: var(--text-primary); font-family: var(--type-h2-font-family); font-weight: var(--type-h2-font-weight); font-size: var(--type-h2-font-size); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); } .single-product div.product .summary.entry-summary .woocommerce-product-details__short-description { margin: 0 0 16px; color: var(--text-primary); font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); } .single-product div.product .summary.entry-summary .single_add_to_cart_button.button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: max-content; max-width: 100%; background: var(--surface-positive); color: var(--text-contrast); font-family: var(--type-h3-font-family); font-weight: var(--type-h3-font-weight); font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); padding: 12px; padding-inline: calc(12px + 6px); border: 0; cursor: pointer; transition: all 0.2s ease-out; border-radius: 1000px; -webkit-tap-highlight-color: transparent; } .single-product div.product .summary.entry-summary .single_add_to_cart_button.button:active { opacity: 0.5; } /* Variation picker (variable products) */ .single-product div.product .variations { display: flex; flex-direction: column; width: 100%; } .single-product div.product .alebeton-variation-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; min-width: 0; padding: 16px 0; border-top: 1px solid var(--border); } .single-product div.product .alebeton-variation-type { flex: 0 0 80px; width: 80px; max-width: 80px; min-width: 0; box-sizing: border-box; color: var(--text-primary); font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); } .single-product div.product .alebeton-variation-picker { flex: 1; min-width: 0; position: relative; } .single-product div.product .alebeton-variation-native-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; opacity: 0; pointer-events: none; } .single-product div.product .alebeton-variation-buttons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } .single-product div.product .alebeton-variation-btn { appearance: none; margin: 0; padding: 6px 12px; box-sizing: border-box; cursor: pointer; border-radius: 100px; border: none; background: var(--background); color: var(--text-primary); font-family: var(--type-h4-font-family); font-weight: var(--type-h4-font-weight); font-size: var(--type-h4-font-size); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-letter-spacing); transition: background 0.15s ease-out, border-color 0.15s ease-out, opacity 0.15s ease-out; -webkit-tap-highlight-color: transparent; } .single-product div.product .alebeton-variation-btn.is-selected { background: #5c8b3f40; } .single-product div.product .alebeton-variation-btn:disabled { opacity: 0.35; cursor: not-allowed; } .single-product div.product .alebeton-variation-btn.is-hidden { display: none; } .single-product div.product .alebeton-variation-reset { margin-top: 4px; display: none; } .single-product div.product .alebeton-variation-reset .reset_variations { color: var(--text-primary); font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); } .single-product div.product .woocommerce-variation-add-to-cart.variations_button { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .single-product div.product form.cart:not(.variations_form) { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding-top: 16px; } .single-product div.product .alebeton-quantity-picker { flex: 1; min-width: 0; } .single-product div.product > .woocommerce-tabs, .single-product div.product > section.related, .single-product div.product > section.up-sells { flex: 1 1 100%; width: 100%; border-top: 1px solid var(--border); padding-top: 32px; } /** * Single product — related & up-sells (match shop product grid) */ .single-product div.product > section.related.products > h2, .single-product div.product > section.up-sells.products > h2 { margin: 0 0 32px; text-align: center; width: 100%; font-size: var(--type-h2-font-size); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); font-weight: var(--type-h2-font-weight); font-family: var(--type-h2-font-family); } .single-product div.product > section.related.products ul.products, .single-product div.product > section.up-sells.products ul.products { padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 32px 16px; justify-content: center; width: 100%; box-sizing: border-box; } .single-product div.product > section.related.products ul.products li.product, .single-product div.product > section.up-sells.products ul.products li.product { list-style: none; width: 144px; flex: 0 0 auto; gap: 16px; text-align: center; } @media screen and (max-width: 767px) { .single-product div.product .woocommerce-product-gallery, .single-product div.product .summary.entry-summary { flex: 1 1 100%; min-width: 0; width: 100%; max-width: 100%; } } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { display: none !important; } .single-product div.product .woocommerce-product-gallery .flex-viewport { margin-bottom: 16px; width: 100%; overflow: hidden; border-radius: 32px; } /* Single-image galleries are not wrapped in .flex-viewport — clip + round the WC image block. */ .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image { overflow: hidden; border-radius: 32px; } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a { display: block; line-height: 0; } .single-product div.product .woocommerce-product-gallery .flex-viewport img, .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper img { width: 100%; height: auto; display: block; border-radius: 32px; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after { display: none; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li { list-style: none; float: none; clear: none !important; width: 64px; max-width: 64px; margin: 0; cursor: pointer; flex: 0 0 64px; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li, .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li, .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li, .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li { width: 64px; max-width: 64px; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img { width: 64px; height: 64px; object-fit: cover; border-radius: 16px; display: block; opacity: 0.5; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { opacity: 1; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img { opacity: 1; } .stock:empty::before { display: none; } .stock.in-stock { color: var(--surface-positive); } .stock.out-of-stock { color: #e2401c; } /** * Checkout */ @media screen and (min-width: 768px) { .col2-set .form-row-first { float: left; margin-right: 3.8%; } .col2-set .form-row-last { float: right; margin-right: 0; } .col2-set .form-row-first, .col2-set .form-row-last { width: 48.1%; } } /** * General WooCommerce components */ /** * Header cart */ .site-header-cart { position: relative; margin: 0; padding: 0; } .site-header-cart .cart-contents { text-decoration: none; } .site-header-cart .widget_shopping_cart { display: none; } .site-header-cart .product_list_widget { margin: 0; padding: 0; } /** * Star rating */ .star-rating { overflow: hidden; position: relative; height: 1.618em; line-height: 1.618; width: 5.3em; font-family: star; font-weight: var(--type-body-font-weight); } .star-rating::before { content: "\53\53\53\53\53"; opacity: 0.25; float: left; top: 0; left: 0; position: absolute; } .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; } .star-rating span::before { content: "\53\53\53\53\53"; top: 0; position: absolute; left: 0; color: #4169e1; } p.stars a { position: relative; height: 1em; width: 1em; text-indent: -999em; display: inline-block; text-decoration: none; margin-right: 1px; font-weight: var(--type-body-font-weight); } p.stars a::before { display: block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; line-height: 1; font-family: star; content: "\53"; color: var(--text-secondary); text-indent: 0; opacity: 0.25; } p.stars a:hover ~ a::before { content: "\53"; color: var(--text-secondary); opacity: 0.25; } p.stars:hover a::before { content: "\53"; color: #4169e1; opacity: 1; } p.stars.selected a.active::before { content: "\53"; color: #4169e1; opacity: 1; } p.stars.selected a.active ~ a::before { content: "\53"; color: var(--text-secondary); opacity: 0.25; } p.stars.selected a:not(.active)::before { content: "\53"; color: #4169e1; opacity: 1; } /** * Tabs */ .woocommerce-tabs ul.tabs { list-style: none; margin: 0; padding: 0; text-align: left; } .woocommerce-tabs ul.tabs li { display: block; margin: 0; position: relative; } .woocommerce-tabs ul.tabs li a { padding: 1em 0; display: block; } .woocommerce-tabs .panel h2:first-of-type { margin-bottom: 1em; } /** * Password strength meter */ .woocommerce-password-strength { text-align: right; } .woocommerce-password-strength.strong { color: var(--surface-positive); } .woocommerce-password-strength.short { color: #e2401c; } .woocommerce-password-strength.bad { color: #e2401c; } .woocommerce-password-strength.good { color: #3d9cd2; } /** * Forms */ .form-row.woocommerce-validated input.input-text { box-shadow: inset 2px 0 0 var(--surface-positive); } .form-row.woocommerce-invalid input.input-text { box-shadow: inset 2px 0 0 #e2401c; } .required { color: #f00; } /** * Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { clear: both; } .woocommerce-message { background-color: #5c8b3f25; color: var(--text-primary); font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); display: flex; align-items: center; flex-wrap: wrap; flex-direction: row; gap: 8px; padding: 16px; border: 0; box-shadow: none; outline: none; justify-content: center; } /* WooCommerce moves focus to the notice after add to cart — browser default outline reads as a blue “border”. */ .woocommerce-message:focus { outline: none; } .woocommerce-message .wc-forward { display: inline; padding: 0; border: 0; background: none; box-shadow: none; font-family: var(--type-h3-font-family); font-weight: var(--type-h3-font-weight); font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); color: var(--surface-positive); text-decoration: none; } .woocommerce-message .wc-forward:visited { color: var(--surface-positive); } .woocommerce-message .wc-forward:hover, .woocommerce-message .wc-forward:focus-visible { color: var(--surface-positive); text-decoration: underline; } .woocommerce-info, .woocommerce-noreviews, p.no-comments { background-color: #3d9cd2; color: var(--text-contrast); } .woocommerce-error { background-color: #e2401c25; color: var(--text-primary); font-family: var(--type-body-font-family); font-weight: var(--type-body-font-weight); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-letter-spacing); display: flex; align-items: center; flex-wrap: wrap; flex-direction: row; gap: 8px; padding: 16px; border: 0; box-shadow: none; outline: none; justify-content: center; list-style: none; } .woocommerce-error li { display: flex; flex-direction: column; gap: 8px; } .woocommerce-error .wc-forward { display: inline; padding: 0; border: 0; background: none; box-shadow: none; font-family: var(--type-h3-font-family); font-weight: var(--type-h3-font-weight); font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); color: var(--surface-positive); text-decoration: none; } .woocommerce-error .wc-forward:visited { color: var(--surface-positive); } .woocommerce-error .wc-forward:hover, .woocommerce-error .wc-forward:focus-visible { color: var(--surface-positive); text-decoration: underline; } .demo_store { position: fixed; left: 0; bottom: 0; right: 0; margin: 0; padding: 1em; background-color: #3d9cd2; color: var(--text-contrast); z-index: 9999; } @media screen and (min-width: 48em) { /** * Header cart */ .site-header-cart .widget_shopping_cart { position: absolute; top: 100%; width: 100%; z-index: 999999; left: -999em; display: block; background-color: var(--background); border: 1px solid var(--border); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); } .site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart { left: 0; display: block; } } /** * WooCommerce widgets */ /** * WooCommerce Price Filter */ .widget_price_filter .price_slider { margin-bottom: 1.5em; } .widget_price_filter .price_slider_amount { text-align: right; line-height: 2.4; } .widget_price_filter .price_slider_amount .button { float: left; } .widget_price_filter .ui-slider { position: relative; text-align: left; } .widget_price_filter .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1em; height: 1em; cursor: ew-resize; outline: none; background: #4169e1; box-sizing: border-box; margin-top: -0.25em; opacity: 1; } .widget_price_filter .ui-slider .ui-slider-handle:last-child { margin-left: -1em; } .widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active { box-shadow: 0 0 0 0.25em var(--surface-subtle-hover); } .widget_price_filter .ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; background: #4169e1; } .widget_price_filter .price_slider_wrapper .ui-widget-content { background: var(--surface-subtle-hover); } .widget_price_filter .ui-slider-horizontal { height: 0.5em; } .widget_price_filter .ui-slider-horizontal .ui-slider-range { height: 100%; }