/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /* * Wishlist heart: Figma's 18px "favorite" icon (15px heart) on every card and placement. * Drawn as a masked shape so it looks the same on every device; a "♡" text glyph varies by font and sits off-centre. * Outline in ink-muted until saved, then filled in the accent colour. Placements size the box with --sng-heart-size. * "html body" outranks the old per-element glyph rules still sitting in pages the host has cached (up to 24h). */ html body .yith-wcwl-add-to-wishlist-button::before, html body .yith-add-to-wishlist-button-block:empty::before { content: ""; display: block; flex: 0 0 var(--sng-heart-size, var(--icon-sm)); /* Card buttons are flex; don't let the shape shrink. */ width: var(--sng-heart-size, var(--icon-sm)); height: var(--sng-heart-size, var(--icon-sm)); background-color: var(--color-ink-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath transform='translate(1.5 1.9873)' d='M7.5 13.7625L6.4125 12.7875C5.15 11.65 4.10625 10.6687 3.28125 9.84375C2.45625 9.01875 1.8 8.27813 1.3125 7.62188C0.825 6.96563 0.484375 6.3625 0.290625 5.8125C0.096875 5.2625 0 4.7 0 4.125C0 2.95 0.39375 1.96875 1.18125 1.18125C1.96875 0.39375 2.95 0 4.125 0C4.775 0 5.39375 0.1375 5.98125 0.4125C6.56875 0.6875 7.075 1.075 7.5 1.575C7.925 1.075 8.43125 0.6875 9.01875 0.4125C9.60625 0.1375 10.225 0 10.875 0C12.05 0 13.0313 0.39375 13.8188 1.18125C14.6063 1.96875 15 2.95 15 4.125C15 4.7 14.9031 5.2625 14.7094 5.8125C14.5156 6.3625 14.175 6.96563 13.6875 7.62188C13.2 8.27813 12.5437 9.01875 11.7188 9.84375C10.8938 10.6687 9.85 11.65 8.5875 12.7875L7.5 13.7625ZM7.5 11.7375C8.7 10.6625 9.6875 9.74063 10.4625 8.97188C11.2375 8.20312 11.85 7.53438 12.3 6.96563C12.75 6.39688 13.0625 5.89062 13.2375 5.44688C13.4125 5.00313 13.5 4.5625 13.5 4.125C13.5 3.375 13.25 2.75 12.75 2.25C12.25 1.75 11.625 1.5 10.875 1.5C10.2875 1.5 9.74375 1.66563 9.24375 1.99688C8.74375 2.32812 8.4 2.75 8.2125 3.2625L6.7875 3.2625C6.6 2.75 6.25625 2.32812 5.75625 1.99688C5.25625 1.66563 4.7125 1.5 4.125 1.5C3.375 1.5 2.75 1.75 2.25 2.25C1.75 2.75 1.5 3.375 1.5 4.125C1.5 4.5625 1.5875 5.00313 1.7625 5.44688C1.9375 5.89062 2.25 6.39688 2.7 6.96563C3.15 7.53438 3.7625 8.20312 4.5375 8.97188C5.3125 9.74063 6.3 10.6625 7.5 11.7375Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath transform='translate(1.5 1.9873)' d='M7.5 13.7625L6.4125 12.7875C5.15 11.65 4.10625 10.6687 3.28125 9.84375C2.45625 9.01875 1.8 8.27813 1.3125 7.62188C0.825 6.96563 0.484375 6.3625 0.290625 5.8125C0.096875 5.2625 0 4.7 0 4.125C0 2.95 0.39375 1.96875 1.18125 1.18125C1.96875 0.39375 2.95 0 4.125 0C4.775 0 5.39375 0.1375 5.98125 0.4125C6.56875 0.6875 7.075 1.075 7.5 1.575C7.925 1.075 8.43125 0.6875 9.01875 0.4125C9.60625 0.1375 10.225 0 10.875 0C12.05 0 13.0313 0.39375 13.8188 1.18125C14.6063 1.96875 15 2.95 15 4.125C15 4.7 14.9031 5.2625 14.7094 5.8125C14.5156 6.3625 14.175 6.96563 13.6875 7.62188C13.2 8.27813 12.5437 9.01875 11.7188 9.84375C10.8938 10.6687 9.85 11.65 8.5875 12.7875L7.5 13.7625ZM7.5 11.7375C8.7 10.6625 9.6875 9.74063 10.4625 8.97188C11.2375 8.20312 11.85 7.53438 12.3 6.96563C12.75 6.39688 13.0625 5.89062 13.2375 5.44688C13.4125 5.00313 13.5 4.5625 13.5 4.125C13.5 3.375 13.25 2.75 12.75 2.25C12.25 1.75 11.625 1.5 10.875 1.5C10.2875 1.5 9.74375 1.66563 9.24375 1.99688C8.74375 2.32812 8.4 2.75 8.2125 3.2625L6.7875 3.2625C6.6 2.75 6.25625 2.32812 5.75625 1.99688C5.25625 1.66563 4.7125 1.5 4.125 1.5C3.375 1.5 2.75 1.75 2.25 2.25C1.75 2.75 1.5 3.375 1.5 4.125C1.5 4.5625 1.5875 5.00313 1.7625 5.44688C1.9375 5.89062 2.25 6.39688 2.7 6.96563C3.15 7.53438 3.7625 8.20312 4.5375 8.97188C5.3125 9.74063 6.3 10.6625 7.5 11.7375Z'/%3E%3C/svg%3E") center / contain no-repeat; } html body .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--added::before { background-color: var(--color-brand-accent); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath transform='translate(1.5 1.9873)' d='M7.5 13.7625L6.4125 12.7875C5.15 11.65 4.10625 10.6687 3.28125 9.84375C2.45625 9.01875 1.8 8.27813 1.3125 7.62188C0.825 6.96563 0.484375 6.3625 0.290625 5.8125C0.096875 5.2625 0 4.7 0 4.125C0 2.95 0.39375 1.96875 1.18125 1.18125C1.96875 0.39375 2.95 0 4.125 0C4.775 0 5.39375 0.1375 5.98125 0.4125C6.56875 0.6875 7.075 1.075 7.5 1.575C7.925 1.075 8.43125 0.6875 9.01875 0.4125C9.60625 0.1375 10.225 0 10.875 0C12.05 0 13.0313 0.39375 13.8188 1.18125C14.6063 1.96875 15 2.95 15 4.125C15 4.7 14.9031 5.2625 14.7094 5.8125C14.5156 6.3625 14.175 6.96563 13.6875 7.62188C13.2 8.27813 12.5437 9.01875 11.7188 9.84375C10.8938 10.6687 9.85 11.65 8.5875 12.7875L7.5 13.7625Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath transform='translate(1.5 1.9873)' d='M7.5 13.7625L6.4125 12.7875C5.15 11.65 4.10625 10.6687 3.28125 9.84375C2.45625 9.01875 1.8 8.27813 1.3125 7.62188C0.825 6.96563 0.484375 6.3625 0.290625 5.8125C0.096875 5.2625 0 4.7 0 4.125C0 2.95 0.39375 1.96875 1.18125 1.18125C1.96875 0.39375 2.95 0 4.125 0C4.775 0 5.39375 0.1375 5.98125 0.4125C6.56875 0.6875 7.075 1.075 7.5 1.575C7.925 1.075 8.43125 0.6875 9.01875 0.4125C9.60625 0.1375 10.225 0 10.875 0C12.05 0 13.0313 0.39375 13.8188 1.18125C14.6063 1.96875 15 2.95 15 4.125C15 4.7 14.9031 5.2625 14.7094 5.8125C14.5156 6.3625 14.175 6.96563 13.6875 7.62188C13.2 8.27813 12.5437 9.01875 11.7188 9.84375C10.8938 10.6687 9.85 11.65 8.5875 12.7875L7.5 13.7625Z'/%3E%3C/svg%3E"); } /* Icon-only button: YITH's own SVG would show a second heart, and its label gap pushes ours off-centre. */ body .yith-wcwl-add-to-wishlist-button { gap: 0; } body .yith-wcwl-add-to-wishlist-button .yith-wcwl-icon-svg { display: none; } /* Icon-only button (Figma): YITH's "Browse wishlist" text stays for screen readers only. */ body .yith-wcwl-add-to-wishlist-button--added .yith-wcwl-add-to-wishlist-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* * My Account forms — Account Settings + Edit Address (Figma: Account Settings, Account Details Form). * Labels above sand-tinted fields; first/last fields side by side. Floating labels are off on both states. */ .brxe-woocommerce-account-edit-account-form .woocommerce-form-row, .brxe-woocommerce-account-edit-address-form .form-row { display: flex; flex-direction: column; gap: var(--space-6); margin: 0; padding: 0; } .brxe-woocommerce-account-edit-account-form .woocommerce-form-row label, .brxe-woocommerce-account-edit-address-form .form-row label { position: static; margin: 0; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: var(--lh-sm); color: var(--color-ink); transform: none; } .brxe-woocommerce-account-edit-account-form .required, .brxe-woocommerce-account-edit-address-form .required { color: inherit; text-decoration: none; border: 0; } .brxe-woocommerce-account-edit-account-form .woocommerce-Input, .brxe-woocommerce-account-edit-address-form .input-text, .brxe-woocommerce-account-edit-address-form select, .brxe-woocommerce-account-edit-address-form .select2-selection { width: 100%; height: auto; min-height: 0; padding: var(--space-10) var(--space-15); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: var(--lh-sm); color: var(--color-ink); background-color: var(--color-surface-sand-50); border: var(--hairline) solid var(--color-border-subtle); border-radius: var(--radius-card); } .brxe-woocommerce-account-edit-account-form .woocommerce-Input:focus, .brxe-woocommerce-account-edit-address-form .input-text:focus, .brxe-woocommerce-account-edit-address-form select:focus { border-color: var(--color-brand-accent); outline: none; } .brxe-woocommerce-account-edit-account-form .woocommerce-form-row em { display: block; margin-top: var(--gap-2); font-family: var(--font-body); font-size: var(--text-eyebrow); font-style: normal; font-weight: 600; line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--color-ink-muted); } /* WooCommerce gives first/last rows 47% + floats; Figma is two equal columns with a 15px gap. */ .brxe-woocommerce-account-edit-account-form .form-row-first, .brxe-woocommerce-account-edit-account-form .form-row-last, .brxe-woocommerce-account-edit-address-form .form-row-first, .brxe-woocommerce-account-edit-address-form .form-row-last { float: none; width: calc(50% - var(--space-15) / 2); } @media (max-width: 767px) { .brxe-woocommerce-account-edit-account-form .form-row-first, .brxe-woocommerce-account-edit-account-form .form-row-last, .brxe-woocommerce-account-edit-address-form .form-row-first, .brxe-woocommerce-account-edit-address-form .form-row-last { width: 100%; } } /* Submit rows keep the button its own width (global WooCommerce button style). */ .brxe-woocommerce-form-submit { align-items: flex-start; } /* * Notices WooCommerce prints straight into My Account panels (e.g. the Orders tab email-confirmation * notices). Bricks' theme style covers a bare .woocommerce-info, but styles .woocommerce-message and * .woocommerce-error only inside .woocommerce-notices-wrapper, so mirror theme style sanganeri_site here. */ .woocommerce-MyAccount-content > .woocommerce-message, .woocommerce-MyAccount-content > .woocommerce-error { margin: 0 0 var(--space-15); padding: var(--space-20); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: var(--lh-sm); color: var(--color-ink); list-style: none; background-color: var(--color-surface-sand); border: var(--hairline) solid var(--color-border-subtle); border-radius: var(--radius-card); } .woocommerce-MyAccount-content > .woocommerce-error { color: var(--color-sale); border-color: var(--color-sale); } .woocommerce-MyAccount-content > .woocommerce-message a, .woocommerce-MyAccount-content > .woocommerce-error a { padding: 0; font-weight: 600; color: var(--color-brand-deep); text-decoration: underline; background-color: transparent; } /* The info notice's "Confirm email address" a.button keeps Bricks' 40px button height; it's a text link here. */ .woocommerce-MyAccount-content > .woocommerce-info a.button { height: auto; min-height: 0; } /* Notice links: the browser focus ring followed the pill radius of the WooCommerce button style and hugged the text. */ .woocommerce-MyAccount-content > :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) a:focus { outline: none; } .woocommerce-MyAccount-content > :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) a:focus-visible { border-radius: var(--radius-sm); outline: var(--hairline-md) solid var(--color-brand-deep); outline-offset: var(--space-4); } /* The account element and its content column are flex items: without min-width 0, any one-line (nowrap) text inside it widens the whole column past the container. */ .brxe-woocommerce-account-page-v2, .brxe-woocommerce-account-page-v2 .woocommerce-MyAccount-content { min-width: 0; }