/* Theme Name: Smalo Theme URI: https://smalo.local Description: Child theme of Twenty Twenty-Five for Smalo eCommerce. Blocks, FSE, and WooCommerce ready. Author: Smalo Author URI: https://smalo.local Template: twentytwentyfive Version: 1.0.4 Requires at least: 6.7 Tested up to: 6.9 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: smalo Tags: one-column, custom-colors, custom-menu, custom-logo, full-site-editing, block-patterns, e-commerce, woocommerce */ /* ========================================================= Global ========================================================= */ html { scroll-behavior: smooth; overflow-x: hidden; } body { background-color: #faf9f6; color: #3a4750; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background-color: #ff9d7e; color: #ffffff; } /* ========================================================= Shared utilities ========================================================= */ .content-layer { position: relative; z-index: 10; } /* Hide scrollbar while keeping scroll functionality */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* Categories page: remove default focus outlines (match blog / single-post treatment) */ body.smalo-categories-page a:focus, body.smalo-categories-page a:focus-visible, body.smalo-categories-page button:focus, body.smalo-categories-page button:focus-visible { outline: none !important; box-shadow: none !important; } /* Hide "View cart" text from product cards */ .smalo-categories-main a:has(img[alt*="View cart"]), .smalo-categories-main a[title*="View cart"], .smalo-categories-main > div > div > div > div > a:last-of-type, .fade-in:has(.smalo-price) a:last-child { display: none !important; } /* More aggressive: hide any remaining "view-cart" or similar elements */ [class*="view-cart"], [class*="view_cart"], [href*="view-cart"], .woocommerce-product-details a[href*="cart"] { display: none !important; } /* Categories page (mobile): header scrolls away so category pills can stick to the top */ @media (max-width: 767px) { body.smalo-categories-page #navbar, body.page-template-page-categories #navbar, body.page-template-page-categories-html #navbar { position: static !important; top: auto !important; } body.smalo-categories-page .smalo-categories-nav, body.page-template-page-categories .smalo-categories-nav, body.page-template-page-categories-html .smalo-categories-nav { position: sticky !important; top: var(--smalo-admin-bar-height, 0px) !important; z-index: 60; } } /* Prevent ancestor overflow/transform from breaking sticky on the categories page */ body.smalo-categories-page .wp-site-blocks, body.smalo-categories-page .wp-site-blocks > *, body.smalo-categories-page .wp-block-template-part, body.smalo-categories-page .wp-block-group, body.smalo-categories-page .smalo-categories-main, body.page-template-page-categories .wp-site-blocks, body.page-template-page-categories .wp-site-blocks > *, body.page-template-page-categories .wp-block-template-part, body.page-template-page-categories .wp-block-group, body.page-template-page-categories .smalo-categories-main, body.page-template-page-categories-html .wp-site-blocks, body.page-template-page-categories-html .wp-site-blocks > *, body.page-template-page-categories-html .wp-block-template-part, body.page-template-page-categories-html .wp-block-group, body.page-template-page-categories-html .smalo-categories-main { overflow: visible !important; transform: none !important; contain: none !important; } /* Force sticky positioning on the category nav */ body.smalo-categories-page .smalo-categories-nav, body.page-template-page-categories .smalo-categories-nav, body.page-template-page-categories-html .smalo-categories-nav { position: sticky !important; } /* Remove white stripe between header and hero on categories page */ body.smalo-categories-page .wp-site-blocks, body.page-template-page-categories .wp-site-blocks, body.page-template-page-categories-html .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.smalo-categories-page .wp-block-html, body.page-template-page-categories .wp-block-html, body.page-template-page-categories-html .wp-block-html { margin-top: 0 !important; } /* Header template part: match hero background so no white stripe shows */ body.smalo-categories-page .wp-site-blocks > header:first-child, body.smalo-categories-page .wp-site-blocks > header:first-child .wp-block-group, body.page-template-page-categories .wp-site-blocks > header:first-child, body.page-template-page-categories .wp-site-blocks > header:first-child .wp-block-group, body.page-template-page-categories-html .wp-site-blocks > header:first-child, body.page-template-page-categories-html .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; background-color: #faf9f6 !important; } /* Pull main content up to eliminate any remaining gap */ body.smalo-categories-page .smalo-categories-main { margin-top: 0 !important; } /* ========================================================= Homepage: Hero load animations ========================================================= */ @keyframes slideDownHero { 0% { opacity: 0; transform: translateY(-15px); } 100% { opacity: 1; transform: translateY(0); } } .hero-elem { opacity: 0; animation: slideDownHero 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.3s; } .delay-3 { animation-delay: 0.5s; } .delay-4 { animation-delay: 0.7s; } .delay-5 { animation-delay: 1s; } /* ========================================================= Homepage: Scroll fade-in ========================================================= */ .fade-in { opacity: 1; transform: translateY(0); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .js-enabled .fade-in { opacity: 0; transform: translateY(24px); } .js-enabled .fade-in.visible { opacity: 1; transform: translateY(0); } /* ========================================================= Focus ========================================================= */ /* Remove default focus outline from header elements when clicked */ #navbar a:focus, #navbar button:focus, #navbar .btn-press:focus { outline: none !important; } /* Footer: Replace default focus outline with smooth brand-aligned transitions */ footer a:focus, footer a:focus-visible, footer button:focus, footer button:focus-visible { outline: none; } /* Footer Accordion — mobile only (max 639px) */ @media (max-width: 639px) { .footer-accordion-content { overflow: hidden; max-height: 0; transition: max-height 0.35s ease-in-out; } .footer-accordion-item.is-open .footer-accordion-content { max-height: 320px; } } /* Desktop: always show accordion content */ @media (min-width: 640px) { .footer-accordion-content { overflow: visible; max-height: none; } .footer-accordion-chevron { display: none; } .footer-accordion-toggle { cursor: default; pointer-events: none; } } /* ========================================================= Posts index template (home.html) ========================================================= */ body.blog .smalo-posts-featured-query .wp-block-post-template, body.blog .smalo-posts-grid-query .wp-block-post-template { list-style: none; margin: 0; padding: 0; } /* Remove default template gap between header and first section on posts page */ body.blog .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.blog .wp-site-blocks > header:first-child, body.blog .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; height: fit-content; } body.blog .smalo-posts-page-main { margin-top: 0 !important; } body.blog .smalo-featured-media img, body.blog .smalo-post-card-media img, body.single-post .smalo-related-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } body.blog .smalo-featured-card:hover .smalo-featured-media img, body.blog .smalo-post-card:hover .smalo-post-card-media img, body.single-post .smalo-related-card:hover .smalo-related-card-media img { transform: scale(1.04); } /* Dynamic Image Placeholder Fallback */ .smalo-featured-media:has(.wp-block-post-featured-image img) .smalo-post-placeholder, .smalo-post-card-media:has(.wp-block-post-featured-image img) .smalo-post-placeholder, .smalo-related-card-media:has(.wp-block-post-featured-image img) .smalo-post-placeholder { display: none !important; } /* Ensure the featured image covers the container */ .smalo-featured-media .wp-block-post-featured-image, .smalo-post-card-media .wp-block-post-featured-image, .smalo-related-card-media .wp-block-post-featured-image { position: absolute; inset: 0; z-index: 2; margin: 0; width: 100%; height: 100%; } .smalo-featured-media .wp-block-post-featured-image a, .smalo-post-card-media .wp-block-post-featured-image a, .smalo-related-card-media .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; } body.blog .smalo-featured-card .wp-block-post-featured-image { margin-bottom: 0; } body.blog .smalo-post-card .wp-block-post-featured-image { margin-bottom: 1.25rem; } body.blog .smalo-post-card .wp-block-post-excerpt { margin-top: 0; margin-bottom: 0; } body.blog .smalo-post-card:hover .smalo-post-card-media .smalo-post-placeholder > div:last-child { transform: rotate(90deg) scale(1.06); } body.blog .smalo-posts-grid-query .wp-block-post-template { display: grid !important; grid-template-columns: 1fr !important; gap: 2rem !important; row-gap: 3rem !important; } @media (min-width: 640px) { body.blog .smalo-posts-grid-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1024px) { body.blog .smalo-posts-grid-query .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } body.blog .smalo-featured-author-avatar { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9) 0 24%, transparent 25%), linear-gradient(145deg, rgba(250, 249, 246, 0.95), rgba(162, 192, 206, 0.34)); border: 1px solid rgba(162, 192, 206, 0.45); box-shadow: inset 0 -0.3rem 0.75rem rgba(162, 192, 206, 0.2), 0 0.65rem 1.4rem rgba(58, 71, 80, 0.08); color: #3a4750; isolation: isolate; } body.blog .smalo-featured-author-avatar__halo { position: absolute; inset: -0.28rem; border-radius: inherit; border: 1px solid rgba(255, 157, 126, 0.48); opacity: 0.85; transform: rotate(-10deg); transition: border-color 0.25s ease, transform 0.25s ease; } body.blog .smalo-featured-author-avatar__mark { position: relative; z-index: 1; font-size: 0.72rem; font-weight: 650; letter-spacing: 0; text-transform: lowercase; } body.blog .smalo-featured-card:hover .smalo-featured-author-avatar__halo { border-color: rgba(255, 157, 126, 0.72); transform: rotate(8deg) scale(1.03); } body.blog .smalo-featured-meta > .wp-block-group:first-child { min-width: 0; } body.blog .smalo-featured-readmore { display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; min-height: 2.75rem; padding: 0 0.35rem 0 1rem; gap: 0.65rem; border-radius: 9999px; border: 1px solid rgba(255, 157, 126, 0.28); background: rgba(255, 157, 126, 0.1); color: #3a4750; font-size: 0.82rem; font-weight: 600; line-height: 1; text-decoration: none; transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } body.blog .smalo-featured-readmore span:not(.screen-reader-text) { display: inline-flex; align-items: center; justify-content: center; width: 2.05rem; height: 2.05rem; border-radius: 9999px; background: #ff9d7e; color: #ffffff; font-size: 0.9rem; transition: background-color 0.22s ease, transform 0.22s ease; } body.blog .smalo-featured-readmore:hover, body.blog .smalo-featured-readmore:focus-visible { border-color: rgba(255, 157, 126, 0.66); background: #fff5f0; color: #3a4750; box-shadow: 0 0.75rem 1.6rem rgba(255, 157, 126, 0.16); transform: translateY(-1px); } body.blog .smalo-featured-readmore:hover span:not(.screen-reader-text), body.blog .smalo-featured-readmore:focus-visible span:not(.screen-reader-text) { background: #3a4750; transform: translateX(2px); } body.blog .smalo-featured-readmore:focus-visible { outline: 2px solid rgba(255, 157, 126, 0.72); outline-offset: 3px; } @media (max-width: 639px) { body.blog .smalo-featured-meta { align-items: flex-start !important; gap: 1rem; } body.blog .smalo-featured-author-avatar { width: 2.5rem; height: 2.5rem; } body.blog .smalo-featured-readmore { min-height: 2.5rem; padding-left: 0.9rem; font-size: 0.78rem; } body.blog .smalo-featured-readmore span:not(.screen-reader-text) { width: 1.9rem; height: 1.9rem; } } /* Hide duplicate first post card on the first page only. */ body.blog:not(.paged) .smalo-posts-grid-query .wp-block-post-template > :first-child { display: none; } /* Featured section appears on page 1 only. */ body.blog.paged .smalo-posts-featured { display: none; } body.blog .smalo-posts-pagination { gap: 0.5rem; } body.blog .smalo-posts-pagination a, body.blog .smalo-posts-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.85rem; border-radius: 9999px; border: 1px solid rgba(162, 192, 206, 0.35); background: #ffffff; color: #3a4750; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } body.blog .smalo-posts-pagination a:hover, body.blog .smalo-posts-pagination .page-numbers:hover { border-color: #a2c0ce; color: #ffffff; background: #a2c0ce; } body.blog .smalo-posts-pagination .page-numbers.current { border-color: #ff9d7e; background: #ff9d7e; color: #ffffff; } /* Remove default click/focus outline artifacts on posts page controls/links */ body.blog a:focus, body.blog a:focus-visible, body.blog button:focus, body.blog button:focus-visible, body.blog input:focus, body.blog input:focus-visible { outline: none !important; box-shadow: none !important; } /* ========================================================= Single post template (single.html) ========================================================= */ body.single-post .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.single-post .wp-site-blocks > header:first-child, body.single-post .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; height: fit-content; } body.single-post .smalo-single-main { margin-top: 0 !important; } body.single-post .smalo-reading-progress { height: 4px; } body.single-post .smalo-reading-progress-bar { min-width: 0; } body.single-post .smalo-single-featured-wrap { margin-bottom: 1rem !important; } @media (min-width: 768px) { body.single-post .smalo-single-featured-wrap { margin-bottom: 1.25rem !important; } } /* Featured image vs placeholder */ body.single-post .smalo-single-featured-frame:not(:has(.wp-block-post-featured-image img)) .wp-block-post-featured-image { display: none !important; } body.single-post .smalo-single-featured-frame:has(.wp-block-post-featured-image img) .smalo-single-featured-placeholder { display: none !important; } body.single-post .smalo-single-featured-frame:has(.wp-block-post-featured-image img) { min-height: 0; } body.single-post .smalo-single-featured-frame:has(.wp-block-post-featured-image img) .wp-block-post-featured-image { position: absolute; inset: 0; z-index: 2; margin: 0; width: 100%; height: 100%; } body.single-post .smalo-single-featured-frame:has(.wp-block-post-featured-image img) .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; } body.single-post .smalo-single-featured-frame:has(.wp-block-post-featured-image img) .wp-block-post-featured-image figure { margin: 0; height: 100%; width: 100%; } /* Ensure no block gap margins shift the absolute children inside the frame */ body.single-post .smalo-single-featured-frame > * { margin: 0 !important; } body.single-post .smalo-single-featured-frame.is-layout-flow > * { margin-top: 0 !important; margin-bottom: 0 !important; } body.single-post .smalo-single-featured-placeholder { margin: 0 !important; } /* Editorial kicker (replaces category pill when posts have no category) */ body.single-post .smalo-single-kicker { justify-content: center; } /* Related card date line (replaces category) */ body.single-post .smalo-related-meta, body.single-post .smalo-related-meta time { color: #ff9d7e !important; } /* Article hero title only (example/post.html h1); related cards use Tailwind text-xl */ body.single-post .smalo-single-hero .wp-block-post-title { text-align: center !important; font-size: 1.875rem !important; font-weight: 600 !important; color: #3a4750 !important; margin-bottom: 1.5rem !important; letter-spacing: -0.025em !important; line-height: 1.25 !important; } @media (min-width: 640px) { body.single-post .smalo-single-hero .wp-block-post-title { font-size: 2.25rem !important; } } @media (min-width: 768px) { body.single-post .smalo-single-hero .wp-block-post-title { font-size: 3rem !important; } } @media (min-width: 1024px) { body.single-post .smalo-single-hero .wp-block-post-title { font-size: 3.75rem !important; } } body.single-post .smalo-single-article .wp-block-post-content { font-size: inherit; line-height: 1.66; } /* Hide the first featured image block inside post content if it exists */ body.single-post .smalo-single-article .wp-block-post-content > .wp-block-post-featured-image { display: none !important; } body.single-post .smalo-single-article .wp-block-post-content > * { max-width: 48rem !important; /* 768px */ margin-left: auto !important; margin-right: auto !important; } body.single-post .smalo-single-article .wp-block-post-content > :first-child { margin-block-start: 0 !important; margin-top: 0 !important; } body.single-post .smalo-single-article .wp-block-post-content > .alignwide { max-width: 64rem !important; } body.single-post .smalo-single-article .wp-block-post-content > .alignfull { max-width: 100% !important; } body.single-post .smalo-single-article .wp-block-post-content > p { margin-block-start: 0 !important; margin-block-end: 0.65em !important; margin-top: 0 !important; margin-bottom: 0.65em !important; color: rgba(58, 71, 80, 0.8); } body.single-post .smalo-single-article .wp-block-post-content strong, body.single-post .smalo-single-article .wp-block-post-content b { color: rgba(58, 71, 80, 0.94); font-weight: 650; } body.single-post .smalo-single-article .wp-block-post-content > p + p { margin-block-start: 0 !important; margin-top: 0 !important; } body.single-post .smalo-single-article .wp-block-post-content > p:first-of-type { font-size: 1.125rem; line-height: 1.62; color: rgba(58, 71, 80, 0.95); font-weight: 300; margin-block-end: 0.85rem !important; margin-bottom: 0.85rem !important; } body.single-post .smalo-single-article .wp-block-post-content > p:first-of-type strong, body.single-post .smalo-single-article .wp-block-post-content > p:first-of-type b { color: #3a4750; font-weight: 650; } @media (min-width: 768px) { body.single-post .smalo-single-article .wp-block-post-content { line-height: 1.6; } body.single-post .smalo-single-article .wp-block-post-content > p:first-of-type { font-size: 1.5rem; line-height: 1.55; margin-block-end: 1rem !important; margin-bottom: 1rem !important; } } body.single-post .smalo-single-article .wp-block-post-content h1 { margin-top: 2.5em !important; margin-bottom: 1em !important; font-weight: 700 !important; color: #3a4750 !important; font-size: 2.25rem !important; line-height: 1.2 !important; } body.single-post .smalo-single-article .wp-block-post-content h2 { margin-top: 2em !important; margin-bottom: 0.75em !important; font-weight: 600 !important; color: #3a4750 !important; font-size: 1.75rem !important; line-height: 1.25 !important; } body.single-post .smalo-single-article .wp-block-post-content h3 { margin-top: 1.5em !important; margin-bottom: 0.6em !important; font-weight: 500 !important; color: #3a4750 !important; font-size: 1.25rem !important; line-height: 1.3 !important; } body.single-post .smalo-single-article .wp-block-post-content h4 { margin-top: 1.5em !important; margin-bottom: 0.6em !important; font-weight: 500 !important; color: #3a4750 !important; font-size: 1.125rem !important; line-height: 1.35 !important; } body.single-post .smalo-single-article .wp-block-post-content h5 { margin-top: 1.5em !important; margin-bottom: 0.6em !important; font-weight: 500 !important; color: #3a4750 !important; font-size: 1rem !important; line-height: 1.4 !important; } body.single-post .smalo-single-article .wp-block-post-content h6 { margin-top: 1.5em !important; margin-bottom: 0.75em !important; font-weight: 500 !important; color: #3a4750 !important; font-size: 0.875rem !important; text-transform: uppercase; letter-spacing: 0.05em; } body.single-post .smalo-single-article .wp-block-post-content ul { margin-block-start: 0 !important; margin-block-end: 0.75em !important; margin-top: 0 !important; margin-bottom: 0.75em !important; list-style-type: disc; padding-left: 1.5em; } body.single-post .smalo-single-article .wp-block-post-content li { margin-block-end: 0.2em; margin-bottom: 0.2em; } body.single-post .smalo-single-article .wp-block-post-content blockquote { border-left: 4px solid #a2c0ce; padding-left: 1rem; font-style: italic; color: rgba(58, 71, 80, 0.8); margin: 1.5em 0; background: rgba(162, 192, 206, 0.05); padding: 1.25rem 1rem; border-radius: 0 1rem 1rem 0; } @media (min-width: 768px) { body.single-post .smalo-single-article .wp-block-post-content blockquote { padding-left: 1.5rem; padding: 1.5rem; margin: 2em 0; } } /* Tag pills */ body.single-post .smalo-single-tags a { display: inline-block; padding: 0.375rem 1rem; border-radius: 9999px; background: rgba(162, 192, 206, 0.1); color: #a2c0ce; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } body.single-post .smalo-single-tags a:hover { background: #a2c0ce; color: #ffffff; } /* Related posts: top-align grid + list items (override wp-container / flex centering) */ .smalo-related-posts-query .wp-block-post-template, .smalo-related-posts-query ul.wp-block-post-template { list-style: none; margin: 0; padding: 0; align-items: start !important; align-content: start !important; justify-items: stretch !important; } .smalo-related-posts-query .wp-block-post-template.is-flex-container { align-items: flex-start !important; align-content: flex-start !important; } /* Grid cells stretch to row height; pin card content to the top of each cell */ .smalo-related-posts-query .wp-block-post-template > li.wp-block-post { align-self: start !important; width: 100%; min-width: 0; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; } @media (min-width: 640px) { .smalo-related-posts-query .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1024px) { .smalo-related-posts-query .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 1023px) { .smalo-related-posts-query .wp-block-post-template > *:nth-child(3) { display: none; } } body.single-post .wp-block-post-author-name { display: inline; } body.single-post .wp-block-post-date { display: inline; } /* Related stories titles: match example/post.html h4 (text-xl font-medium leading-snug) */ body.single-post .smalo-related-card .wp-block-post-title { font-size: 1.25rem !important; font-weight: 500 !important; line-height: 1.375 !important; letter-spacing: normal !important; margin: 0 !important; color: #3a4750 !important; } body.single-post .smalo-related-card .wp-block-post-title a { color: inherit !important; text-decoration: none; transition: color 0.3s ease, opacity 0.2s ease; } body.single-post .smalo-related-card .wp-block-post-title a:hover, body.single-post .smalo-related-card .group:hover .wp-block-post-title a { color: #ff9d7e !important; } /* Focus: single post (match posts page — custom focus via Tailwind on template) */ body.single-post a:focus, body.single-post a:focus-visible, body.single-post button:focus, body.single-post button:focus-visible { outline: none !important; box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { body.single-post .fade-in { opacity: 1 !important; transform: none !important; } } /* ========================================================= Mini Cart Drawer (Mobile) ========================================================= */ #smalo-mini-cart-drawer { pointer-events: none !important; } #smalo-mini-cart-drawer.pointer-events-auto { pointer-events: auto !important; } /* Cart drawer scrolling */ #smalo-mini-cart-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } #smalo-mini-cart-drawer .woocommerce-mini-cart-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #e5ecf1; } #smalo-mini-cart-drawer .woocommerce-mini-cart-item:last-child { border-bottom: none; } #smalo-mini-cart-drawer .woocommerce-mini-cart-item-image { flex-shrink: 0; } #smalo-mini-cart-drawer .woocommerce-mini-cart-item-image img { width: 60px; height: 60px; object-fit: cover; border-radius: 0.5rem; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { #smalo-mini-cart-drawer { transition: none !important; } } /* ========================================================= Single Product Page (single-product.html) ========================================================= */ /* Remove default block gap between header and product content */ body.single-product .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; row-gap: 0 !important; } body.single-product .wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.single-product .wp-site-blocks > header, body.single-product .wp-site-blocks > header .wp-block-group, body.single-product .wp-site-blocks > header .wp-block-group.alignfull { margin: 0 !important; padding-bottom: 0 !important; height: fit-content; } body.single-product .smalo-product-main { margin-top: 0 !important; padding-top: 0 !important; } /* Hide default WooCommerce notices — we use custom toast */ body.single-product .wc-block-store-notices, body.single-product .woocommerce-notices-wrapper, body.single-product .wp-block-woocommerce-store-notices, body.single-product .woocommerce-message, body.single-product .woocommerce-info, body.smalo-categories-page .wc-block-store-notices, body.smalo-categories-page .woocommerce-notices-wrapper, body.smalo-categories-page .wp-block-woocommerce-store-notices, body.smalo-categories-page .woocommerce-message, body.smalo-categories-page .woocommerce-info { display: none !important; } /* ----- Custom Cart Toast ----- */ .smalo-toast { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 100000; display: flex; align-items: center; gap: 0.85rem; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.3); border-radius: 0.9rem; padding: 0.85rem 1rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 249, 246, 0.94)), #ffffff; box-shadow: 0 18px 44px rgba(58, 71, 80, 0.14), 0 4px 14px rgba(58, 71, 80, 0.08); transform: translateX(calc(100% + 2rem)); opacity: 0; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease; width: min(22rem, calc(100vw - 2rem)); max-width: 100%; pointer-events: none; } .smalo-toast.is-visible { transform: translateX(0); opacity: 1; pointer-events: auto; } .smalo-toast.is-leaving { transform: translateX(calc(100% + 2rem)); opacity: 0; transition: transform 0.35s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.25s ease; } .smalo-toast-check { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(162, 192, 206, 0.42); background: rgba(162, 192, 206, 0.22); color: #3a4750; display: flex; align-items: center; justify-content: center; } .smalo-toast-check svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .smalo-toast-check svg path { stroke-dasharray: 20; stroke-dashoffset: 20; } .smalo-toast.is-visible .smalo-toast-check svg path { animation: smalo-check-draw 0.4s 0.25s ease forwards; } @keyframes smalo-check-draw { to { stroke-dashoffset: 0; } } .smalo-toast-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; } .smalo-toast-text { font-size: 0.92rem; font-weight: 800; color: #3a4750; line-height: 1.35; overflow-wrap: anywhere; } .smalo-toast-link { font-size: 0.8125rem; color: #ff9d7e; text-decoration: none; font-weight: 800; transition: color 0.2s ease, box-shadow 0.2s ease; } .smalo-toast-link:hover { color: #e88869; } .smalo-toast-link:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } /* Progress bar at bottom of toast */ .smalo-toast-progress { position: absolute; bottom: 0.48rem; left: 1rem; right: 1rem; height: 3px; border-radius: 9999px; background: rgba(162, 192, 206, 0.24); overflow: hidden; } .smalo-toast-progress-bar { display: block; height: 100%; background: linear-gradient(90deg, #a2c0ce, #ff9d7e); border-radius: inherit; width: 100%; transform-origin: left; transform: scaleX(1); will-change: transform; } .smalo-toast-progress-bar.is-counting { animation: smalo-toast-progress var(--smalo-toast-duration, 3000ms) linear forwards; } @keyframes smalo-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 480px) { .smalo-toast { top: calc(var(--smalo-admin-bar-height, 0px) + env(safe-area-inset-top, 0px) + 0.85rem); bottom: auto; right: 1rem; left: 1rem; width: auto; max-width: none; transform: translateY(calc(-100% - 2rem)); } .smalo-toast.is-visible { transform: translateY(0); } .smalo-toast.is-leaving { transform: translateY(calc(-100% - 2rem)); } } @media (prefers-reduced-motion: reduce) { .smalo-toast, .smalo-toast.is-leaving, .smalo-toast-link { transition: none !important; } .smalo-toast.is-visible .smalo-toast-check svg path { animation: none !important; stroke-dashoffset: 0; } } /* ----- Journal Newsletter ----- */ .smalo-newsletter-form { display: grid; grid-template-columns: minmax(10rem, 0.72fr) minmax(14rem, 1fr) auto; gap: 0.75rem; width: min(100%, 42rem); margin-inline: auto; align-items: center; } .smalo-newsletter-input { width: 100%; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 9999px; padding: 1rem 1.45rem; background: rgba(255, 255, 255, 0.12); color: #ffffff; font-size: 0.96rem; line-height: 1.2; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .smalo-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.68); } .smalo-newsletter-input-name { grid-column: 1; grid-row: 1; } .smalo-newsletter-input-email { grid-column: 2; grid-row: 1; } .smalo-newsletter-input:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.16); } .smalo-newsletter-input:focus, .smalo-newsletter-input:focus-visible { border-color: #ffffff; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); outline: none; } .smalo-newsletter-input.has-error, .smalo-newsletter-input:user-invalid { border-color: rgba(255, 157, 126, 0.95); box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18); } .smalo-newsletter-error { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 0.55rem; max-width: min(100%, 24rem); margin-top: -0.15rem; border: 1px solid rgba(255, 157, 126, 0.34); border-radius: 9999px; padding: 0.58rem 0.85rem 0.58rem 0.68rem; background: rgba(250, 249, 246, 0.96); box-shadow: 0 14px 32px rgba(58, 71, 80, 0.12); color: #3a4750; font-size: 0.86rem; font-weight: 700; line-height: 1.25; text-align: left; animation: smalo-newsletter-error-in 0.18s ease both; } .smalo-newsletter-error[hidden] { display: none; } .smalo-newsletter-error::before { content: "!"; flex: 0 0 auto; display: inline-flex; width: 1.45rem; height: 1.45rem; align-items: center; justify-content: center; border-radius: 50%; background: #ff9d7e; color: #ffffff; font-size: 0.95rem; font-weight: 900; line-height: 1; } @keyframes smalo-newsletter-error-in { from { opacity: 0; transform: translateY(-0.35rem); } to { opacity: 1; transform: translateY(0); } } .smalo-newsletter-submit { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; border: 0; border-radius: 9999px; padding: 0.95rem 2rem; background: #ff9d7e; color: #ffffff; font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; } .smalo-newsletter-submit:hover { background: #e88869; box-shadow: 0 8px 20px rgba(255, 157, 126, 0.3); } .smalo-newsletter-submit:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; } .smalo-newsletter-submit:disabled, .smalo-newsletter-input:disabled { cursor: wait; opacity: 0.72; } .smalo-toast[data-variant="error"] .smalo-toast-check { border-color: rgba(255, 157, 126, 0.45); background: rgba(255, 157, 126, 0.18); color: #ff7f60; } .smalo-toast[data-variant="error"] .smalo-toast-progress-bar { background: linear-gradient(90deg, #ff9d7e, #3a4750); } @media (max-width: 720px) { .smalo-newsletter-form { grid-template-columns: 1fr; width: min(100%, 27rem); } .smalo-newsletter-error { grid-column: 1; grid-row: auto; width: 100%; max-width: none; } .smalo-newsletter-input-name, .smalo-newsletter-input-email, .smalo-newsletter-submit { grid-column: 1; grid-row: auto; } .smalo-newsletter-submit { width: 100%; } } /* Hide Sale badge & default zoom icon */ body.single-product .onsale, body.single-product .woocommerce-product-gallery__trigger, body.single-product .smalo-product-gallery .woocommerce-product-gallery__trigger { display: none !important; } /* Custom preview / fullscreen icon */ .smalo-gallery-preview-btn { position: absolute; top: 1rem; right: 1rem; z-index: 10; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.75rem; cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease; color: #3a4750; } .smalo-gallery-preview-btn:hover { background: #ffffff; box-shadow: 0 2px 12px rgba(162, 192, 206, 0.25); } .smalo-gallery-preview-btn svg { width: 1.25rem; height: 1.25rem; } /* Click-to-toggle magnify on main product image Custom branded magnifying-glass cursors (desktop only). Hotspot is centered on the lens (14,14) of a 36×36 SVG. */ body.single-product .smalo-magnify-ready, body.single-product .smalo-magnify-ready figure, body.single-product .smalo-magnify-ready .woocommerce-product-gallery__image, body.single-product .smalo-magnify-ready img { cursor: url("data:image/svg+xml;utf8,") 14 14, zoom-in; } body.single-product .smalo-magnify-ready.is-magnifying, body.single-product .smalo-magnify-ready.is-magnifying figure, body.single-product .smalo-magnify-ready.is-magnifying .woocommerce-product-gallery__image, body.single-product .smalo-magnify-ready.is-magnifying img { cursor: url("data:image/svg+xml;utf8,") 14 14, zoom-out; } /* Kill any leftover zoomjs overlay if WooCommerce still manages to enqueue it */ body.single-product .woocommerce-product-gallery img.zoomImg { display: none !important; pointer-events: none !important; } body.single-product .woocommerce-product-gallery .zoomContainer { display: none !important; pointer-events: none !important; } /* Keep the top-right preview button on its own pointer cursor */ body.single-product .smalo-magnify-ready .smalo-gallery-preview-btn, body.single-product .smalo-magnify-ready .smalo-gallery-preview-btn * { cursor: pointer; } /* Respect reduced motion: skip the zoom transition */ @media (prefers-reduced-motion: reduce) { body.single-product .smalo-magnify-ready img { transition: none !important; } } /* Review image thumbnails: fixed height, width follows native aspect ratio */ .smalo-review-image { display: inline-block; height: 72px; line-height: 0; } @media (min-width: 768px) { .smalo-review-image { height: 80px; } } .smalo-review-image img { height: 100%; width: auto; display: block; object-fit: cover; } .smalo-review-image:hover { transform: scale(1.04); } .smalo-review-image, .smalo-review-image img { cursor: url("data:image/svg+xml;utf8,") 10 10, zoom-in; } /* Fullscreen lightbox overlay */ .smalo-lightbox-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .smalo-lightbox-overlay.is-active { opacity: 1; visibility: visible; } .smalo-lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 1rem; } .smalo-lightbox-overlay, .smalo-lightbox-overlay *, .smalo-lightbox-overlay .smalo-lightbox-content, .smalo-lightbox-overlay .smalo-lightbox-content img { cursor: default !important; } .smalo-lightbox-overlay .smalo-lightbox-close, .smalo-lightbox-overlay .smalo-lightbox-nav { cursor: pointer !important; } /* While lightbox is active, neutralize the branded cursor on thumbs under the overlay */ body:has(.smalo-lightbox-overlay.is-active) .smalo-review-image, body:has(.smalo-lightbox-overlay.is-active) .smalo-review-image img { cursor: default !important; } .smalo-lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); border: none; border-radius: 50%; color: #fff; font-size: 1.5rem; cursor: pointer; transition: background 0.2s ease; } .smalo-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); } .smalo-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); border: none; border-radius: 50%; color: #fff; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; z-index: 1; } .smalo-lightbox-nav svg { width: 1.5rem; height: 1.5rem; } .smalo-lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); } .smalo-lightbox-nav:disabled { opacity: 0.3; cursor: default; background: rgba(255, 255, 255, 0.15); } .smalo-lightbox-prev { left: 1.5rem; } .smalo-lightbox-next { right: 1.5rem; } /* Desktop: nav buttons float left/right of image */ .smalo-lightbox-content { display: contents; } .smalo-lightbox-nav-row { display: contents; } @media (max-width: 600px) { /* Overlay stacks image + nav row vertically */ .smalo-lightbox-overlay.is-active { flex-direction: column; gap: 1.25rem; padding: 4rem 1rem 2rem; } .smalo-lightbox-content { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .smalo-lightbox-overlay img { max-height: 72vh; } .smalo-lightbox-nav-row { display: flex; flex-direction: row; gap: 0.75rem; justify-content: center; } .smalo-lightbox-nav { position: static; transform: none; width: 2.75rem; height: 2.75rem; } } /* Focus styles — match rest of theme */ body.single-product a:focus, body.single-product a:focus-visible, body.single-product button:focus, body.single-product button:focus-visible { outline: none !important; box-shadow: none !important; } /* ----- Breadcrumbs ----- */ body.single-product .smalo-product-breadcrumbs { font-size: 0.875rem; color: rgba(58, 71, 80, 0.6); } body.single-product .smalo-product-breadcrumbs a { color: rgba(58, 71, 80, 0.6); text-decoration: none; transition: color 0.2s ease; } body.single-product .smalo-product-breadcrumbs a:hover { color: #ff9d7e; } body.single-product .smalo-product-breadcrumbs .woocommerce-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(58, 71, 80, 0.6); margin: 0; padding: 0; } /* ----- Product Gallery ----- */ body.single-product .smalo-product-gallery-col { position: relative; } /* Gallery wrapper — no card, clean and open */ body.single-product .smalo-product-gallery .woocommerce-product-gallery, body.single-product .smalo-product-gallery .wp-block-woocommerce-product-image-gallery { position: relative; background: transparent; border: none; box-shadow: none; overflow: visible; } /* Main image — soft rounding, subtle shadow */ body.single-product .smalo-product-gallery .woocommerce-product-gallery__image, body.single-product .smalo-product-gallery .flex-viewport { border-radius: 1.25rem; overflow: hidden; background: #ffffff; box-shadow: 0 2px 16px rgba(162, 192, 206, 0.12); } body.single-product .smalo-product-gallery img { border-radius: 1.25rem; object-fit: cover; width: 100%; height: auto; } /* Thumbnail strip — classic + block gallery */ body.single-product .smalo-product-gallery .flex-control-thumbs, body.single-product .smalo-product-gallery .woocommerce-product-gallery ol, body.single-product .wc-block-woocommerce-product-gallery-thumbnails, body.single-product .wp-block-woocommerce-product-gallery-thumbnails, body.single-product [class*="product-gallery-thumbnails"] { display: flex !important; gap: 0.625rem !important; margin-top: 1rem !important; padding: 0.25rem 0 !important; list-style: none; overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } body.single-product .smalo-product-gallery .flex-control-thumbs::-webkit-scrollbar, body.single-product [class*="product-gallery-thumbnails"]::-webkit-scrollbar { display: none; } /* Thumbnail items — larger, rounded, clean */ body.single-product .smalo-product-gallery .flex-control-thumbs li, body.single-product .smalo-product-gallery .woocommerce-product-gallery ol li, body.single-product [class*="product-gallery-thumbnails"] > div, body.single-product [class*="product-gallery-thumbnails"] > button { flex: 0 0 5.5rem !important; width: 5.5rem !important; height: 5.5rem !important; border-radius: 0.875rem !important; overflow: hidden; border: 2px solid transparent; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; cursor: pointer; background: #fff; scroll-snap-align: start; box-shadow: 0 1px 6px rgba(162, 192, 206, 0.1); } body.single-product .smalo-product-gallery .flex-control-thumbs li:hover, body.single-product .smalo-product-gallery .flex-control-thumbs li.flex-active-slide, body.single-product .smalo-product-gallery .woocommerce-product-gallery ol li:hover, body.single-product [class*="product-gallery-thumbnails"] > div:hover, body.single-product [class*="product-gallery-thumbnails"] > button:hover { border-color: #a2c0ce; box-shadow: 0 3px 12px rgba(162, 192, 206, 0.22); transform: translateY(-1px); } body.single-product .smalo-product-gallery .flex-control-thumbs img, body.single-product [class*="product-gallery-thumbnails"] img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0.625rem; display: block; } /* WooCommerce block gallery image rounding */ body.single-product .wc-block-woocommerce-product-image-gallery img, body.single-product .wp-block-woocommerce-product-image-gallery img { border-radius: 1.25rem; } /* Mobile: swipe support */ @media (max-width: 767px) { body.single-product .smalo-product-gallery .flex-viewport, body.single-product .smalo-product-gallery .woocommerce-product-gallery__wrapper { touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; cursor: grab; } /* Slightly smaller thumbs on mobile for better fit */ body.single-product .smalo-product-gallery .flex-control-thumbs li, body.single-product .smalo-product-gallery .woocommerce-product-gallery ol li { flex: 0 0 4.5rem !important; width: 4.5rem !important; height: 4.5rem !important; } } /* ----- Product Title ----- */ body.single-product .smalo-product-title { font-size: 1.875rem !important; font-weight: 600 !important; color: #3a4750 !important; line-height: 1.2 !important; margin-bottom: 1rem !important; letter-spacing: -0.025em !important; } @media (min-width: 640px) { body.single-product .smalo-product-title { font-size: 2.25rem !important; } } @media (min-width: 768px) { body.single-product .smalo-product-title { font-size: 3rem !important; } } /* ----- Product Rating ----- */ body.single-product .smalo-product-rating { margin-bottom: 0.75rem !important; } body.single-product .smalo-product-rating .wc-block-components-product-rating__stars, body.single-product .smalo-product-rating .star-rating { color: #ff9d7e !important; font-size: 1.25rem; } body.single-product .smalo-product-rating a { color: rgba(58, 71, 80, 0.6); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 157, 126, 0.3); transition: color 0.2s ease; font-size: 0.875rem; } body.single-product .smalo-product-rating a:hover { color: #ff9d7e; } /* ----- Product Price ----- */ body.single-product .smalo-product-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; } body.single-product .smalo-product-price-row .smalo-product-price { margin: 0 !important; } body.single-product .smalo-product-price { margin-bottom: 1.5rem !important; } /* Sale savings badge */ body.single-product .smalo-sale-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 9999px; background-color: rgba(255, 157, 126, 0.15); color: #ff9d7e; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: background-color 200ms ease, transform 200ms ease; } @media (min-width: 640px) { body.single-product .smalo-sale-badge { font-size: 0.8125rem; padding: 0.5625rem 1.125rem; } } body.single-product .smalo-product-price .woocommerce-Price-amount, body.single-product .smalo-product-price .wc-block-components-product-price__value { font-size: 1.875rem !important; font-weight: 600 !important; color: #3a4750; } @media (min-width: 640px) { body.single-product .smalo-product-price .woocommerce-Price-amount, body.single-product .smalo-product-price .wc-block-components-product-price__value { font-size: 2.25rem !important; } } body.single-product .smalo-product-price del { text-decoration: none; } body.single-product .smalo-product-price del .woocommerce-Price-amount, body.single-product .smalo-product-price del .wc-block-components-product-price__value { font-size: 1.25rem !important; font-weight: 400 !important; color: rgba(58, 71, 80, 0.4) !important; text-decoration: line-through; } @media (min-width: 640px) { body.single-product .smalo-product-price del .woocommerce-Price-amount, body.single-product .smalo-product-price del .wc-block-components-product-price__value { font-size: 1.5rem !important; } } body.single-product .smalo-product-price ins { text-decoration: none; } body.single-product .smalo-product-price ins .woocommerce-Price-amount, body.single-product .smalo-product-price ins .wc-block-components-product-price__value { color: #ff9d7e !important; font-weight: 700 !important; } /* ----- Stock Status Badge ----- */ body.single-product .smalo-stock-badge { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem 0.5rem 0.85rem; margin-bottom: 1.75rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; background: rgba(162, 192, 206, 0.12); color: #3a4750; border: 1px solid rgba(162, 192, 206, 0.3); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } body.single-product .smalo-stock-badge .smalo-stock-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 0.75rem; height: 0.75rem; flex-shrink: 0; } body.single-product .smalo-stock-badge .smalo-stock-dot-core { position: relative; z-index: 1; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; } body.single-product .smalo-stock-badge .smalo-stock-dot::before, body.single-product .smalo-stock-badge .smalo-stock-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0.55; transform: scale(1); } /* In stock — calm brand-blue pulse */ body.single-product .smalo-stock-in-stock { background: rgba(162, 192, 206, 0.15); border-color: rgba(162, 192, 206, 0.45); color: #3a4750; } body.single-product .smalo-stock-in-stock .smalo-stock-dot { color: #6fa78f; /* calm green-blue, harmonises with brand-blue */ } body.single-product .smalo-stock-in-stock .smalo-stock-dot::before { animation: smaloStockPulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } body.single-product .smalo-stock-in-stock .smalo-stock-dot::after { animation: smaloStockPulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 1.2s; } /* Low stock — urgent brand-orange pulse */ body.single-product .smalo-stock-low-stock { background: rgba(255, 157, 126, 0.12); border-color: rgba(255, 157, 126, 0.5); color: #c25a3a; } body.single-product .smalo-stock-low-stock .smalo-stock-dot { color: #ff9d7e; } body.single-product .smalo-stock-low-stock .smalo-stock-dot::before { animation: smaloStockPulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } body.single-product .smalo-stock-low-stock .smalo-stock-dot::after { animation: smaloStockPulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 0.7s; } body.single-product .smalo-stock-low-stock .smalo-stock-dot-core { animation: smaloStockGlow 1.4s ease-in-out infinite; } /* Backorder — soft orange, slow pulse */ body.single-product .smalo-stock-backorder { background: rgba(255, 157, 126, 0.08); border-color: rgba(255, 157, 126, 0.35); color: #3a4750; } body.single-product .smalo-stock-backorder .smalo-stock-dot { color: #ff9d7e; } body.single-product .smalo-stock-backorder .smalo-stock-dot::before { animation: smaloStockPulse 3s ease-out infinite; } /* Out of stock — muted, no pulse */ body.single-product .smalo-stock-out-of-stock { background: rgba(58, 71, 80, 0.06); border-color: rgba(58, 71, 80, 0.18); color: rgba(58, 71, 80, 0.55); } body.single-product .smalo-stock-out-of-stock .smalo-stock-dot { color: rgba(58, 71, 80, 0.4); } body.single-product .smalo-stock-out-of-stock .smalo-stock-dot::before, body.single-product .smalo-stock-out-of-stock .smalo-stock-dot::after { display: none; } @keyframes smaloStockPulse { 0% { transform: scale(1); opacity: 0.55; } 80% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } @keyframes smaloStockGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 157, 126, 0.6); } 50% { box-shadow: 0 0 0 4px rgba(255, 157, 126, 0); } } @media (prefers-reduced-motion: reduce) { body.single-product .smalo-stock-badge .smalo-stock-dot::before, body.single-product .smalo-stock-badge .smalo-stock-dot::after, body.single-product .smalo-stock-badge .smalo-stock-dot-core { animation: none !important; } } /* ----- Add to Cart Form ----- */ body.single-product .smalo-product-add-to-cart { margin-bottom: 2rem !important; } /* Make the WooCommerce form a column layout: quantity row, then buttons row */ body.single-product .smalo-product-add-to-cart form.cart { display: flex; flex-direction: column; gap: 1rem; } /* Quantity stepper — standalone row with −/+ buttons */ body.single-product .smalo-product-add-to-cart .quantity { display: inline-flex; align-items: center; align-self: flex-start; border: 2px solid rgba(162, 192, 206, 0.25); border-radius: 9999px; padding: 0.15rem; background: #ffffff; height: 3rem; gap: 0; } body.single-product .smalo-product-add-to-cart .quantity input[type="number"] { width: 3rem; text-align: center; background: transparent; color: #3a4750; font-weight: 600; font-size: 1.05rem; border: none; -moz-appearance: textfield; height: 100%; padding: 0; } body.single-product .smalo-product-add-to-cart .quantity input[type="number"]::-webkit-outer-spin-button, body.single-product .smalo-product-add-to-cart .quantity input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Stepper −/+ buttons */ body.single-product .smalo-qty-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none; background: rgba(162, 192, 206, 0.12); color: #3a4750; font-size: 1.25rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; flex-shrink: 0; line-height: 1; padding: 0; user-select: none; } body.single-product .smalo-qty-btn:hover:not(:disabled) { background: rgba(162, 192, 206, 0.3); color: #3a4750; } body.single-product .smalo-qty-btn:active:not(:disabled) { transform: scale(0.9); } body.single-product .smalo-qty-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* Add to Cart button */ body.single-product .smalo-product-add-to-cart .single_add_to_cart_button, body.single-product .smalo-product-add-to-cart button[type="submit"], body.single-product .smalo-add-to-cart-btn { flex: 1; background-color: #a2c0ce !important; color: #ffffff !important; padding: 1rem 2rem !important; border-radius: 9999px !important; font-weight: 500 !important; font-size: 1rem !important; border: none !important; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important; text-align: center; } body.single-product .smalo-product-add-to-cart .single_add_to_cart_button:hover, body.single-product .smalo-product-add-to-cart button[type="submit"]:hover, body.single-product .smalo-add-to-cart-btn:hover { background-color: #8daebd !important; box-shadow: 0 8px 20px rgba(162, 192, 206, 0.3) !important; transform: translateY(-2px); } body.single-product .smalo-product-add-to-cart .single_add_to_cart_button:active, body.single-product .smalo-product-add-to-cart button[type="submit"]:active, body.single-product .smalo-add-to-cart-btn:active { transform: scale(0.96); } /* Buy Now button */ body.single-product .smalo-buy-now-btn { flex: 1; background-color: #ff9d7e; color: #ffffff; padding: 1rem 2rem; border-radius: 9999px; font-weight: 500; font-size: 1rem; border: none; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; text-align: center; } body.single-product .smalo-buy-now-btn:hover { background-color: #e88869; box-shadow: 0 8px 20px rgba(255, 157, 126, 0.3); transform: translateY(-2px); } body.single-product .smalo-buy-now-btn:active { transform: scale(0.96); } /* Button wrapper */ body.single-product .smalo-product-btn-wrap { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; } @media (min-width: 640px) { body.single-product .smalo-product-btn-wrap { flex-direction: row; } } /* On desktop: quantity stays on its own row, buttons fill width */ @media (min-width: 640px) { body.single-product .smalo-product-add-to-cart form.cart .quantity { flex-shrink: 0; } body.single-product .smalo-product-add-to-cart form.cart .smalo-product-btn-wrap { width: 100%; } } /* ----- Accordions ----- */ body.single-product .smalo-accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; overflow: hidden; } body.single-product .smalo-accordion-content.is-open { grid-template-rows: 1fr; } body.single-product .smalo-accordion-inner { min-height: 0; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } body.single-product .smalo-accordion-content.is-open .smalo-accordion-inner { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.1s, visibility 0.4s ease 0.1s; } body.single-product .smalo-accordion-item.is-open .smalo-accordion-icon { transform: rotate(180deg); } /* Mobile: tie active (orange) state to is-open only — prevents sticky hover/focus from making a collapsed item look active after a tap. */ @media (max-width: 639px) { body.single-product .smalo-accordion-toggle, body.single-product .smalo-accordion-toggle:hover, body.single-product .smalo-accordion-toggle:focus, body.single-product .smalo-accordion-toggle:active { color: #3a4750; } body.single-product .smalo-accordion-item.is-open .smalo-accordion-toggle { color: #ff9d7e; } } /* ----- Product Tabs (WooCommerce product-details block) ----- */ body.single-product .smalo-product-tabs { margin: 0 !important; } body.single-product .smalo-product-tabs .wc-tabs-wrapper, body.single-product .smalo-product-tabs .woocommerce-tabs { margin: 0; } body.single-product .smalo-product-tabs .wc-tabs, body.single-product .smalo-product-tabs .wc-block-components-tab-panel__tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid rgba(162, 192, 206, 0.2); padding: 0; margin: 0 0 2rem 0; list-style: none; } body.single-product .smalo-product-tabs .wc-tabs li a, body.single-product .smalo-product-tabs .wc-block-components-tab-panel__tab { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 9999px 9999px 0 0; border: 1px solid transparent; border-bottom: none; background: transparent; color: rgba(58, 71, 80, 0.6); font-weight: 500; font-size: 0.875rem; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; cursor: pointer; } body.single-product .smalo-product-tabs .wc-tabs li.active a, body.single-product .smalo-product-tabs .wc-block-components-tab-panel__tab--active { color: #3a4750; background: rgba(162, 192, 206, 0.08); border-color: rgba(162, 192, 206, 0.2); } body.single-product .smalo-product-tabs .wc-tabs li a:hover, body.single-product .smalo-product-tabs .wc-block-components-tab-panel__tab:hover { color: #ff9d7e; } body.single-product .smalo-product-tabs .woocommerce-Tabs-panel, body.single-product .smalo-product-tabs .wc-block-components-tab-panel__content { font-size: 0.9375rem; line-height: 1.75; color: rgba(58, 71, 80, 0.75); } /* Reviews in tabs */ body.single-product .smalo-product-tabs #reviews h2, body.single-product .smalo-product-tabs .woocommerce-Reviews-title { font-size: 1.5rem; font-weight: 600; color: #3a4750; margin-bottom: 1.5rem; } body.single-product .smalo-product-tabs .comment-text .star-rating { color: #ff9d7e; } body.single-product .smalo-product-tabs .comment-reply-title { font-size: 1.25rem; font-weight: 600; color: #3a4750; } body.single-product .smalo-product-tabs .comment-form input, body.single-product .smalo-product-tabs .comment-form textarea { border: 2px solid rgba(162, 192, 206, 0.2); border-radius: 0.75rem; padding: 0.75rem 1rem; background: #ffffff; color: #3a4750; transition: border-color 0.2s ease; } body.single-product .smalo-product-tabs .comment-form input:focus, body.single-product .smalo-product-tabs .comment-form textarea:focus { border-color: #a2c0ce; outline: none; } body.single-product .smalo-product-tabs .comment-form .submit { background-color: #a2c0ce !important; color: #ffffff !important; padding: 0.75rem 2rem !important; border-radius: 9999px !important; font-weight: 500 !important; border: none !important; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; } body.single-product .smalo-product-tabs .comment-form .submit:hover { background-color: #8daebd !important; box-shadow: 0 8px 20px rgba(162, 192, 206, 0.3) !important; } /* ----- Related Products ----- */ body.single-product .smalo-related-products .products, body.single-product .smalo-related-products .wp-block-post-template { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; list-style: none; padding: 0; margin: 0; } @media (min-width: 640px) { body.single-product .smalo-related-products .products, body.single-product .smalo-related-products .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 768px) { body.single-product .smalo-related-products .products, body.single-product .smalo-related-products .wp-block-post-template { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } body.single-product .smalo-related-products .product, body.single-product .smalo-related-product-card { text-align: left; } body.single-product .smalo-related-products .product a img, body.single-product .smalo-related-product-image img { border-radius: 1rem; aspect-ratio: 4/5; object-fit: cover; width: 100%; border: 1px solid rgba(162, 192, 206, 0.1); transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease; } body.single-product .smalo-related-products .product:hover a img, body.single-product .smalo-related-product-card:hover .smalo-related-product-image img { border-color: rgba(162, 192, 206, 0.3); box-shadow: 0 4px 20px rgba(162, 192, 206, 0.12); } body.single-product .smalo-related-products .product .woocommerce-loop-product__title, body.single-product .smalo-related-product-title { font-size: 1.125rem !important; font-weight: 500 !important; color: #3a4750 !important; margin: 0.75rem 0 0.25rem 0 !important; transition: color 0.3s ease; } body.single-product .smalo-related-products .product:hover .woocommerce-loop-product__title, body.single-product .smalo-related-product-card:hover .smalo-related-product-title a { color: #ff9d7e !important; } body.single-product .smalo-related-product-title a { color: inherit !important; text-decoration: none; } /* Hide sale badge on related product images */ body.single-product .smalo-related-product-image .wc-block-components-product-sale-badge, body.single-product .smalo-related-products .product .onsale, body.single-product .smalo-related-products .wc-block-components-product-sale-badge { display: none !important; } /* Related product price — brand styled */ body.single-product .smalo-related-products .product .price, body.single-product .smalo-related-product-price { font-size: 0.95rem !important; font-weight: 500 !important; color: #3a4750 !important; display: flex !important; align-items: baseline; gap: 0.5rem; margin-top: 0.25rem !important; letter-spacing: 0.01em; } body.single-product .smalo-related-products .product .price del, body.single-product .smalo-related-product-price del { color: rgba(58, 71, 80, 0.45) !important; font-weight: 400 !important; font-size: 0.85rem !important; text-decoration: line-through; opacity: 1 !important; order: 2; } body.single-product .smalo-related-products .product .price ins, body.single-product .smalo-related-product-price ins { color: #ff9d7e !important; font-weight: 600 !important; background: transparent !important; text-decoration: none !important; order: 1; transition: color 0.3s ease; } body.single-product .smalo-related-products .product .price del .amount, body.single-product .smalo-related-product-price del .amount, body.single-product .smalo-related-products .product .price ins .amount, body.single-product .smalo-related-product-price ins .amount { color: inherit !important; font-weight: inherit !important; } body.single-product .smalo-related-product-card:hover .smalo-related-product-price ins { color: #3a4750 !important; } /* Hide "Add to Cart" on related product cards */ body.single-product .smalo-related-products .product .button, body.single-product .smalo-related-products .product .add_to_cart_button { display: none !important; } /* ----- Variation swatches / selects ----- */ body.single-product .smalo-product-add-to-cart .variations select { border: 2px solid rgba(162, 192, 206, 0.2); border-radius: 9999px; padding: 0.625rem 1rem; background: #ffffff; color: #3a4750; font-size: 0.875rem; transition: border-color 0.2s ease; cursor: pointer; } body.single-product .smalo-product-add-to-cart .variations select:focus { border-color: #a2c0ce; outline: none; } body.single-product .smalo-product-add-to-cart .variations td.label label { font-weight: 500; color: #3a4750; font-size: 0.875rem; } /* ----- Responsive fade-in on product page ----- */ /* Ensure shared footer logo is visible on WooCommerce templates */ body.single-product footer img[alt="smalo"], body.smalo-products-page footer img[alt="smalo"], body.smalo-cart-page footer img[alt="smalo"], body.smalo-account-page footer img[alt="smalo"] { display: block !important; height: 3.5rem; width: auto; } @media (prefers-reduced-motion: reduce) { body.single-product .fade-in { opacity: 1 !important; transform: none !important; } } /* ========================================================================== Single Product — Customer Reviews Section ========================================================================== */ .smalo-reviews-section { scroll-margin-top: 6rem; } .smalo-reviews-section .smalo-reviews-summary { /* Soft ground shadow so the card feels planted on the warm background */ box-shadow: 0 1px 2px rgba(58, 71, 80, 0.04), 0 12px 32px -20px rgba(58, 71, 80, 0.18); } .smalo-reviews-section .smalo-review-card { transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } .smalo-reviews-section .smalo-review-card:hover { box-shadow: 0 2px 4px rgba(58, 71, 80, 0.04), 0 20px 40px -24px rgba(58, 71, 80, 0.22); transform: translateY(-2px); border-color: rgba(162, 192, 206, 0.28); } /* Review stars — slightly tighter kerning on the card header stars */ .smalo-reviews-section .smalo-stars { letter-spacing: -0.5px; } .smalo-reviews-section .smalo-review-body p { margin: 0 0 0.75em; } .smalo-reviews-section .smalo-review-body p:last-child { margin-bottom: 0; } /* Star rating input (form) */ .smalo-rating-input .smalo-rating-star { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; color: rgba(58, 71, 80, 0.18); cursor: pointer; transition: color 0.18s ease, transform 0.15s ease; } .smalo-rating-input .smalo-rating-star svg { width: 100%; height: 100%; display: block; } .smalo-rating-input .smalo-rating-star:hover { transform: scale(1.08); } .smalo-rating-input .smalo-rating-star.is-active, .smalo-rating-input .smalo-rating-star.is-hover { color: #ff9d7e; } .smalo-rating-input .smalo-rating-star:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; border-radius: 6px; } /* Upload zone */ .smalo-upload-label:focus-within { outline: 2px solid #ff9d7e; outline-offset: 2px; } .smalo-upload-thumb { width: 4.5rem; height: 4.5rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.25); background: #faf9f6; } .smalo-upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Long description rendered via post-content: space block children */ .smalo-product-description > * + * { margin-top: 1.25rem; } .smalo-product-description h2, .smalo-product-description h3, .smalo-product-description h4 { color: #3a4750; font-weight: 600; } /* "Write a Review" button */ .smalo-write-review-btn { margin-top: 1.75rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 4.5rem; padding: 1rem 1.5rem; background-color: #3a4750; color: #fff; border: none; border-radius: 9999px; font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; cursor: pointer; transition: background-color 0.3s ease; text-align: center; text-decoration: none; } .smalo-write-review-btn:hover { background-color: #ff9d7e; } .smalo-write-review-btn:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } .smalo-write-review-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; } .smalo-write-review-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex-shrink: 0; } .smalo-write-review-btn__label { display: inline-block; white-space: nowrap; } /* Review card header — author meta row */ .smalo-review-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } body.single-product .smalo-review-card header > .flex { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } .smalo-review-card .smalo-review-avatar { width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: linear-gradient(to bottom right, rgba(255, 157, 126, 0.3), rgba(255, 157, 126, 0.1)); display: flex; align-items: center; justify-content: center; color: #ff9d7e; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; } /* Verified buyer badge + date row */ body.single-product .smalo-review-card .smalo-review-author-block { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding-top: 1px; } body.single-product .smalo-review-card .smalo-review-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: rgba(58, 71, 80, 0.62); margin-top: 0; flex-wrap: wrap; } .smalo-verified-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.625rem; border-radius: 9999px; background: rgba(162, 192, 206, 0.12); color: #6c8794; font-weight: 600; white-space: nowrap; } .smalo-verified-badge svg { width: 0.8125rem; height: 0.8125rem; color: #a2c0ce; flex-shrink: 0; } .smalo-verified-badge span { display: inline-block; line-height: 1; } .smalo-review-meta-separator { color: rgba(58, 71, 80, 0.28); font-size: 0.75rem; line-height: 1; } body.single-product .smalo-review-card .smalo-review-date { display: inline-flex; align-items: center; white-space: nowrap; } body.single-product .smalo-review-card .smalo-review-author { font-weight: 600; color: #3a4750; font-size: 15px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smalo-review-card .smalo-review-stars { flex-shrink: 0; padding-top: 0.125rem; } /* Form inputs: smooth focus transitions (accessibility-safe) */ .smalo-review-input { transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } /* Hide WooCommerce's default reply title (heading is now inside the form) */ .smalo-review-form-shell .comment-reply-title { display: none; } .smalo-review-form-shell .must-log-in, .smalo-review-form-shell .comment-notes, .smalo-review-form-shell .logged-in-as { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: rgba(58, 71, 80, 0.6); } /* Hide empty WP-default paragraphs so they don't reserve a grid row */ .smalo-review-form-shell .comment-notes:empty, .smalo-review-form-shell .logged-in-as:empty, .smalo-review-form-shell .must-log-in:empty { display: none; } /* Hide WordPress-default cookies consent and any unexpected grid items that would otherwise sit at order:0 (above the rating). */ .smalo-review-form-shell .comment-form-cookies-consent { display: none !important; } .smalo-review-form-shell .comment-form .smalo-upload-preview:empty { display: none; } /* Hide WooCommerce's default p.stars (we use custom star buttons) */ .smalo-review-form-shell .comment-form-rating p.stars { display: none !important; } /* Form header above the card */ .smalo-review-form-shell .smalo-form-header { margin: 0 0 0.75rem; padding: 0; } .smalo-form-heading { font-size: 1.5rem; font-weight: 600; color: #3a4750; line-height: 1.3; margin: 0 0 0.25rem; } .smalo-form-subheading { font-size: 0.875rem; color: rgba(58, 71, 80, 0.55); margin: 0; } /* Form grid layout */ .smalo-review-form-shell .comment-form { display: grid; gap: 1.375rem; box-shadow: 0 4px 24px rgba(58, 71, 80, 0.06); } .smalo-review-form-shell #review_form_wrapper, .smalo-review-form-shell #review_form, .smalo-review-form-shell #respond { margin: 0; padding: 0; border: 0; } /* Form card styles */ .smalo-woo-review-form { padding: 1rem 1.25rem 1.5rem; } @media (min-width: 768px) { .smalo-woo-review-form { padding-left: 2rem; padding-right: 2rem; padding-top: 1.25rem; padding-bottom: 2rem; } } /* Visual field ordering: Rating → Title → Review → Upload → Name → Email → Submit */ .smalo-review-form-shell .comment-form .logged-in-as, .smalo-review-form-shell .comment-form .smalo-review-identity { order: 1; } .smalo-review-form-shell .comment-form .comment-form-rating { order: 2; } .smalo-review-form-shell .comment-form .comment-form-review-title { order: 3; } .smalo-review-form-shell .comment-form .comment-form-comment { order: 4; } .smalo-review-form-shell .comment-form .comment-form-images { order: 5; } .smalo-review-form-shell .comment-form .form-submit { order: 6; } .smalo-review-form-shell .comment-form .comment-form-author, .smalo-review-form-shell .comment-form .comment-form-email, .smalo-review-form-shell .comment-form .comment-form-url { display: none !important; } .smalo-review-form-shell .comment-form p, .smalo-review-form-shell .comment-form div.comment-form-rating { display: block; width: 100%; margin: 0; } .smalo-review-form-shell .comment-form-rating { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; } .smalo-review-form-shell .comment-form .logged-in-as, .smalo-review-form-shell .comment-form .smalo-review-identity { display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content; max-width: 100%; padding: 0.625rem 0.875rem; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 9999px; background: rgba(162, 192, 206, 0.08); color: rgba(58, 71, 80, 0.72); font-size: 0.8125rem; line-height: 1.35; margin: 0; flex-wrap: wrap; } .smalo-review-form-shell .comment-form .logged-in-as a { color: #3a4750; font-weight: 600; } .smalo-review-form-shell .comment-form .smalo-review-identity strong, .smalo-review-form-shell .comment-form .logged-in-as strong { color: #3a4750; font-weight: 600; } .smalo-review-form-shell .comment-form .smalo-review-identity span, .smalo-review-form-shell .comment-form .logged-in-as span { color: rgba(58, 71, 80, 0.58); } .smalo-review-form-shell .comment-form label { display: block; margin-bottom: 0.5rem; color: #3a4750; font-size: 0.875rem; font-weight: 500; } .smalo-review-form-shell .comment-form-rating label { margin-bottom: 0; } .smalo-review-form-shell .comment-form input, .smalo-review-form-shell .comment-form textarea, .smalo-review-form-shell .comment-form select { display: block; box-sizing: border-box; width: 100%; padding: 0.875rem 1rem; border: 1px solid rgba(162, 192, 206, 0.25); border-radius: 0.9rem; background: #faf9f6; color: #3a4750; font-size: 0.9375rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .smalo-review-form-shell .comment-form input[type="hidden"] { display: none !important; padding: 0 !important; border: 0 !important; } .smalo-review-form-shell .comment-form input::placeholder, .smalo-review-form-shell .comment-form textarea::placeholder { color: rgba(58, 71, 80, 0.38); } .smalo-review-form-shell .comment-form textarea { min-height: 8rem; resize: vertical; } .smalo-review-form-shell .comment-form input[type="text"], .smalo-review-form-shell .comment-form input[type="email"], .smalo-review-form-shell .comment-form textarea { -webkit-appearance: none; appearance: none; } .smalo-review-form-shell .comment-form .comment-form-rating select#rating { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%); white-space: nowrap !important; border: 0 !important; } .smalo-review-form-shell .comment-form .form-submit { margin: 0; } .smalo-review-form-shell .comment-form input:hover, .smalo-review-form-shell .comment-form textarea:hover { border-color: rgba(162, 192, 206, 0.5); background: #fff; } .smalo-review-form-shell .comment-form input:focus, .smalo-review-form-shell .comment-form textarea:focus, .smalo-review-form-shell .comment-form select:focus { outline: 2px solid transparent; border-color: #ff9d7e; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.15); background: #fff; } .smalo-review-form-shell .comment-form .required { color: #ff9d7e; } /* Star rating label text (e.g. "Perfect") */ .smalo-rating-label-text { display: inline-block; margin-left: 0.625rem; font-size: 0.8125rem; font-weight: 600; color: #ff9d7e; min-width: 4.5rem; vertical-align: middle; transition: opacity 0.2s ease; opacity: 0; } .smalo-rating-label-text.is-visible { opacity: 1; } /* Submit button */ .smalo-review-form-shell button.smalo-submit-btn, .smalo-review-form-shell .comment-form .smalo-submit-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3.5rem; padding: 0.95rem 1.5rem; border: none !important; border-radius: 9999px; background: #3a4750 !important; color: #fff !important; font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 2px 8px rgba(58, 71, 80, 0.1); text-align: center; text-decoration: none; transition: background-color 0.3s ease, box-shadow 0.25s ease, transform 0.15s ease; } .smalo-review-form-shell button.smalo-submit-btn:hover, .smalo-review-form-shell .comment-form .smalo-submit-btn:hover { background: #ff9d7e !important; box-shadow: 0 4px 16px rgba(255, 157, 126, 0.25); transform: translateY(-1px); } .smalo-review-form-shell button.smalo-submit-btn:active, .smalo-review-form-shell .comment-form .smalo-submit-btn:active { transform: translateY(0); } .smalo-review-form-shell button.smalo-submit-btn:focus-visible, .smalo-review-form-shell .comment-form .smalo-submit-btn:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } /* Upload zone inside WooCommerce form */ .smalo-review-form-shell .comment-form-images { margin: 0; } .smalo-review-form-shell .comment-form-images .smalo-upload-label { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; } /* Disclaimer text below the form */ .smalo-form-disclaimer { font-size: 0.75rem; color: rgba(58, 71, 80, 0.5); text-align: center; margin-top: 1rem; } /* Upload preview remove button */ .smalo-upload-thumb { position: relative; } .smalo-upload-thumb .smalo-upload-remove { position: absolute; top: -0.375rem; right: -0.375rem; width: 1.375rem; height: 1.375rem; border-radius: 9999px; border: 2px solid #fff; background: #3a4750; color: #fff; font-size: 0.6875rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(0.7); transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .smalo-upload-thumb:hover .smalo-upload-remove { opacity: 1; transform: scale(1); } .smalo-upload-thumb .smalo-upload-remove:hover { background: #ff9d7e; } .smalo-upload-thumb .smalo-upload-remove:focus-visible { opacity: 1; transform: scale(1); outline: 2px solid #ff9d7e; outline-offset: 2px; } #reviews { scroll-margin-top: 5rem; } /* Review form: hidden by default, smooth slide-down reveal */ .smalo-review-form-wrap { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.05s; scroll-margin-top: 5rem; } .smalo-review-form-wrap.is-open { opacity: 1; } /* Blocked review modal */ .smalo-modal-open { overflow: hidden; } .smalo-review-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 1rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .smalo-review-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .smalo-review-modal__backdrop { position: absolute; inset: 0; background: rgba(58, 71, 80, 0.45); backdrop-filter: blur(2px); } .smalo-review-modal__dialog { position: relative; width: min(100%, 30rem); background: #faf9f6; border: 1px solid rgba(162, 192, 206, 0.3); border-radius: 1.25rem; box-shadow: 0 20px 50px rgba(58, 71, 80, 0.2); padding: 1.5rem 1.25rem 1.25rem; transform: translateY(14px) scale(0.98); transition: transform 0.25s ease; } .smalo-review-modal.is-open .smalo-review-modal__dialog { transform: translateY(0) scale(1); } .smalo-review-modal__close { position: absolute; top: 0.625rem; right: 0.625rem; width: 2rem; height: 2rem; border: 1px solid rgba(162, 192, 206, 0.35); border-radius: 9999px; background: #fff; color: #3a4750; font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .smalo-review-modal__close:hover { background: rgba(255, 157, 126, 0.1); border-color: #ff9d7e; color: #3a4750; } .smalo-review-modal__close:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } .smalo-review-modal__title { margin: 0 2rem 0.5rem 0; font-size: 1.25rem; line-height: 1.3; color: #3a4750; } .smalo-review-modal__message { margin: 0; color: rgba(58, 71, 80, 0.78); font-size: 0.9375rem; line-height: 1.6; } .smalo-review-modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; } .smalo-review-modal__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.625rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .smalo-review-modal__btn--secondary { border: 1px solid rgba(162, 192, 206, 0.5); background: #fff; color: #3a4750; cursor: pointer; } .smalo-review-modal__btn--secondary:hover { border-color: #a2c0ce; background: #fff; } .smalo-review-modal__btn--primary { border: 1px solid #3a4750; background: #3a4750; color: #fff; } .smalo-review-modal__btn--primary:hover { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; } .smalo-review-modal__btn:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .smalo-reviews-section .smalo-review-card:hover { transform: none; } .smalo-breakdown-bar { transition: none !important; } .smalo-review-form-wrap { transition: none; } .smalo-review-modal, .smalo-review-modal__dialog { transition: none; } } @media (max-width: 640px) { .smalo-write-review-btn { min-height: 4rem; padding: 0.95rem 1.25rem; font-size: 0.9375rem; } .smalo-review-meta { gap: 0.35rem; font-size: 0.75rem; } } /* ========================================================= Product category archive template (taxonomy-product_cat.html) ========================================================= */ body.smalo-product-category-page .smalo-product-category-shell { color: #3a4750; } body.smalo-product-category-page .smalo-product-category-breadcrumb { margin-bottom: 2rem; } body.smalo-product-category-page .smalo-product-category-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; color: rgba(58, 71, 80, 0.58); font-size: 0.875rem; } body.smalo-product-category-page .smalo-product-category-breadcrumb li { display: inline-flex; align-items: center; min-width: 0; } body.smalo-product-category-page .smalo-product-category-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: rgba(58, 71, 80, 0.35); } body.smalo-product-category-page .smalo-product-category-breadcrumb a, body.smalo-product-category-page .smalo-product-category-breadcrumb span { color: inherit; text-decoration: none; } body.smalo-product-category-page .smalo-product-category-breadcrumb a { border-radius: 0.35rem; text-underline-offset: 0.22em; transition: color 0.2s ease, background-color 0.2s ease, text-decoration-color 0.2s ease; } body.smalo-product-category-page .smalo-product-category-breadcrumb a:hover, body.smalo-product-category-page .smalo-product-category-breadcrumb a:focus-visible { color: #ff9d7e; text-decoration: underline; text-decoration-color: currentColor; } body.smalo-product-category-page .smalo-product-category-breadcrumb a:focus-visible { outline: none; background: rgba(255, 157, 126, 0.12); } body.smalo-product-category-page .smalo-product-category-breadcrumb a:focus:not(:focus-visible) { outline: none; background: transparent; } body.smalo-product-category-page .smalo-product-category-breadcrumb span { color: #3a4750; font-weight: 700; } body.smalo-product-category-page .smalo-product-category-hero { position: relative; overflow: hidden; min-height: clamp(18rem, 32vw, 28rem); display: grid; place-items: center; margin-bottom: 2rem; padding: clamp(3rem, 8vw, 6rem) 1.5rem; border: 1px solid rgba(162, 192, 206, 0.14); border-radius: 1.5rem; background: #ffffff; text-align: center; box-shadow: 0 8px 30px rgba(162, 192, 206, 0.08); } body.smalo-product-category-page .smalo-product-category-aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } body.smalo-product-category-page .smalo-product-category-aura span { position: absolute; display: block; border-radius: 9999px; filter: blur(80px); mix-blend-mode: multiply; opacity: 0.72; } body.smalo-product-category-page .smalo-product-category-aura span:first-child { top: -45%; left: -10%; width: min(38rem, 60vw); height: min(38rem, 60vw); background: rgba(162, 192, 206, 0.16); animation: blob 15s infinite alternate; } body.smalo-product-category-page .smalo-product-category-aura span:last-child { right: -10%; bottom: -45%; width: min(30rem, 52vw); height: min(30rem, 52vw); background: rgba(255, 157, 126, 0.14); animation: blob-reverse 20s infinite alternate; } body.smalo-product-category-page .smalo-product-category-hero-content { position: relative; z-index: 1; max-width: 44rem; } body.smalo-product-category-page .smalo-product-category-hero h1 { margin: 0 0 1rem; color: #3a4750; font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.04; } body.smalo-product-category-page .smalo-product-category-hero p { margin: 0; color: rgba(58, 71, 80, 0.7); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 300; line-height: 1.7; } body.smalo-product-category-page .smalo-product-category-toolbar { position: relative; z-index: 20; display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; } body.smalo-product-category-page .smalo-product-category-toolbar > p { margin: 0; color: rgba(58, 71, 80, 0.62); font-size: 0.9375rem; } body.smalo-product-category-page .smalo-product-category-toolbar .smalo-products-sort-wrap { width: min(18rem, 100%); } body.smalo-product-category-page .smalo-products-sort-menu summary:hover { border-color: #a2c0ce; background: rgba(255, 255, 255, 0.88); } @media (max-width: 640px) { body.smalo-product-category-page .smalo-product-category-shell { padding-top: 2rem; } body.smalo-product-category-page .smalo-product-category-breadcrumb { margin-bottom: 1.25rem; } body.smalo-product-category-page .smalo-product-category-hero { min-height: 16rem; margin-bottom: 1.25rem; padding: 2.75rem 1rem; border-radius: 1rem; } body.smalo-product-category-page .smalo-product-category-toolbar { display: grid; grid-template-columns: 1fr; align-items: stretch; margin-bottom: 1.4rem; } body.smalo-product-category-page .smalo-product-category-toolbar .smalo-products-sort-wrap { width: 100%; } } @media (prefers-reduced-motion: reduce) { body.smalo-product-category-page .smalo-product-category-aura span { animation: none !important; } } /* ========================================================= Products catalog template (archive-product.html) ========================================================= */ body.smalo-products-page .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.smalo-products-page .wp-site-blocks > header:first-child, body.smalo-products-page .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; background-color: #faf9f6 !important; } body.smalo-products-page .wp-block-html { margin-top: 0 !important; } body.smalo-products-page .smalo-products-main { margin-top: 0 !important; background: #faf9f6; } body.smalo-products-page .smalo-products-hero { padding-top: clamp(3.75rem, 5vw, 4.5rem) !important; padding-bottom: clamp(2.75rem, 4vw, 3.25rem) !important; } body.smalo-products-page .smalo-products-controls { position: sticky; top: var(--smalo-admin-bar-height, 0px); z-index: 35; display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(13rem, 18rem) auto; column-gap: 1rem; row-gap: 0.875rem; align-items: end; padding: 1.05rem; margin-bottom: 1.15rem; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 1.25rem; background: rgba(250, 249, 246, 0.92); backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(58, 71, 80, 0.06); } body.smalo-products-page .smalo-products-search label, body.smalo-products-page .smalo-products-control-label { display: block; margin-bottom: 0.45rem; color: rgba(58, 71, 80, 0.65); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.smalo-products-page .smalo-products-search-field { position: relative; } body.smalo-products-page .smalo-products-search-field svg { position: absolute; left: 1rem; top: 50%; width: 1.1rem; height: 1.1rem; color: rgba(58, 71, 80, 0.45); transform: translateY(-50%); pointer-events: none; transition: color 0.2s ease; } body.smalo-products-page .smalo-products-search-field input { width: 100%; min-height: 3rem; border: 1px solid rgba(162, 192, 206, 0.35); border-radius: 9999px; background: #ffffff; color: #3a4750; font-size: 0.9375rem; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-products-page .smalo-products-search-field input { padding: 0.75rem 1rem 0.75rem 2.85rem; } body.smalo-products-page .smalo-products-sort-wrap { position: relative; } body.smalo-products-page .smalo-products-sort-menu { position: relative; } body.smalo-products-page .smalo-products-sort-menu summary { display: flex; min-height: 3rem; width: 100%; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.75rem 0.9rem 0.75rem 1rem; border: 1px solid rgba(162, 192, 206, 0.35); border-radius: 9999px; background: #ffffff; color: #3a4750; cursor: pointer; font-size: 0.9375rem; line-height: 1.2; list-style: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } body.smalo-products-page .smalo-products-sort-menu summary::-webkit-details-marker { display: none; } body.smalo-products-page .smalo-products-sort-menu summary svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: rgba(58, 71, 80, 0.7); transition: color 0.2s ease, transform 0.2s ease; } body.smalo-products-page .smalo-products-sort-menu[open] summary { border-color: #ff9d7e; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14); } body.smalo-products-page .smalo-products-sort-menu[open] summary svg { color: #ff9d7e; transform: rotate(180deg); } body.smalo-products-page .smalo-products-sort-list { position: absolute; right: 0; top: calc(100% + 0.55rem); z-index: 45; display: grid; gap: 0.25rem; width: min(18rem, calc(100vw - 2rem)); padding: 0.45rem; border: 1px solid rgba(162, 192, 206, 0.3); border-radius: 1rem; background: #ffffff; box-shadow: 0 18px 44px rgba(58, 71, 80, 0.12); } body.smalo-products-page .smalo-products-sort-list a { display: flex; align-items: center; min-height: 2.65rem; padding: 0.7rem 0.85rem; border-radius: 0.75rem; color: #3a4750; font-size: 0.9375rem; font-weight: 700; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-products-page .smalo-products-sort-list a:hover, body.smalo-products-page .smalo-products-sort-list a:focus-visible { background: rgba(162, 192, 206, 0.14); } body.smalo-products-page .smalo-products-sort-list a:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #ff9d7e; } body.smalo-products-page .smalo-products-sort-list a.is-active { background: #a2c0ce; color: #ffffff; box-shadow: 0 8px 18px rgba(162, 192, 206, 0.24); } body.smalo-products-page .smalo-products-sort-list a.is-active:focus-visible { box-shadow: inset 0 0 0 2px #ffffff, 0 8px 18px rgba(162, 192, 206, 0.24); } body.smalo-products-page .smalo-products-search-field:focus-within svg { color: #ff9d7e; } body.smalo-products-page .smalo-products-search-field input:focus-visible, body.smalo-products-page .smalo-products-sort-menu summary:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; border-color: #ff9d7e; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14); } body.smalo-products-page .smalo-products-reset { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.25rem; border-radius: 9999px; font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-products-page .smalo-products-reset { border: 1px solid rgba(162, 192, 206, 0.35); background: #ffffff; color: #3a4750; } body.smalo-products-page .smalo-products-reset:hover { border-color: #ff9d7e; color: #ff9d7e; } body.smalo-products-page .smalo-products-reset:focus-visible, body.smalo-products-page .smalo-products-category-pills a:focus-visible, body.smalo-products-page .smalo-product-card a:focus-visible, body.smalo-products-page .smalo-product-card button:focus-visible, body.smalo-products-page .smalo-products-pagination a:focus-visible, body.smalo-products-page .smalo-products-empty a:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.smalo-products-page .smalo-products-category-pills { display: flex; gap: 0.625rem; margin: 1.25rem 0 1.5rem; padding: 0.25rem 0.1rem 0.6rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.smalo-products-page .smalo-products-category-pills::-webkit-scrollbar { display: none; } body.smalo-products-page .smalo-products-category-pills a { flex: 0 0 auto; padding: 0.65rem 1.1rem; border: 1px solid rgba(162, 192, 206, 0.25); border-radius: 9999px; background: rgba(255, 255, 255, 0.7); color: #3a4750; font-size: 0.875rem; font-weight: 700; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-products-page .smalo-products-category-pills a:hover { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.12); } body.smalo-products-page .smalo-products-category-pills a.is-active { border-color: #a2c0ce; background: #a2c0ce; color: #ffffff; box-shadow: 0 8px 20px rgba(162, 192, 206, 0.2); } body.smalo-products-page .smalo-products-results-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; color: rgba(58, 71, 80, 0.62); font-size: 0.9375rem; } body.smalo-products-page .smalo-products-results-meta p { margin: 0; } body.smalo-products-page .smalo-products-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; } body.smalo-products-page .smalo-product-card { display: flex; min-width: 0; flex-direction: column; } body.smalo-products-page .smalo-product-card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.12); border-radius: 1rem; background: #ffffff; box-shadow: 0 4px 20px rgba(162, 192, 206, 0.05); text-decoration: none; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } body.smalo-products-page .smalo-product-card:hover .smalo-product-card-media { border-color: rgba(162, 192, 206, 0.34); box-shadow: 0 12px 32px rgba(162, 192, 206, 0.14); transform: translateY(-2px); } body.smalo-products-page .smalo-product-card-img, body.smalo-products-page .smalo-product-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } body.smalo-products-page .smalo-product-card:hover .smalo-product-card-img, body.smalo-products-page .smalo-product-card:hover .smalo-product-card-media img { transform: scale(1.04); } body.smalo-products-page .smalo-product-card-placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: linear-gradient(135deg, rgba(162, 192, 206, 0.12), rgba(255, 157, 126, 0.08)); } body.smalo-products-page .smalo-product-card-placeholder span { width: 3.5rem; height: 3.5rem; border: 2px solid rgba(162, 192, 206, 0.32); border-radius: 9999px; background: rgba(255, 157, 126, 0.2); } body.smalo-products-page .smalo-product-card-body { display: flex; flex: 1; flex-direction: column; padding-top: 1rem; } body.smalo-products-page .smalo-product-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 1.4rem; margin-bottom: 0.5rem; } body.smalo-products-page .smalo-product-stock { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(58, 71, 80, 0.58); font-size: 0.75rem; font-weight: 700; } body.smalo-products-page .smalo-product-stock::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: #6fa78f; } body.smalo-products-page .smalo-product-stock-outofstock::before { background: rgba(58, 71, 80, 0.35); } body.smalo-products-page .smalo-product-stock-onbackorder::before { background: #ff9d7e; } body.smalo-products-page .smalo-product-rating { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(58, 71, 80, 0.58); font-size: 0.75rem; font-weight: 700; } body.smalo-products-page .smalo-product-rating .smalo-stars svg { color: #ff9d7e; } body.smalo-products-page .smalo-product-card-title { margin: 0 0 0.45rem; color: #3a4750; font-size: 1.1rem; font-weight: 700; line-height: 1.28; } body.smalo-products-page .smalo-product-card-title a { color: inherit; text-decoration: none; transition: color 0.2s ease; } body.smalo-products-page .smalo-product-card:hover .smalo-product-card-title a { color: #a2c0ce; } body.smalo-products-page .smalo-product-card-description { margin: 0 0 1rem; color: rgba(58, 71, 80, 0.6); font-size: 0.9rem; line-height: 1.6; } body.smalo-products-page .smalo-product-card-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-top: auto; padding-top: 0.25rem; } body.smalo-products-page .smalo-product-card-price { min-width: 0; color: #3a4750; font-size: 1rem; font-weight: 800; } body.smalo-products-page .smalo-product-card-price del { color: rgba(58, 71, 80, 0.38); font-weight: 500; } body.smalo-products-page .smalo-product-card-price ins { color: #ff9d7e; text-decoration: none; } body.smalo-products-page .smalo-product-card-cart, body.smalo-products-page .smalo-product-card-options { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 5.6rem; width: 5.6rem; min-height: 2.65rem; padding: 0.55rem 0.9rem; border: 1px solid #a2c0ce; border-radius: 9999px; background: #a2c0ce; color: #ffffff; cursor: pointer; font-size: 0.875rem; font-weight: 800; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } body.smalo-products-page .smalo-product-card-footer .added_to_cart, body.smalo-products-page .smalo-product-card-footer .wc-forward { display: none !important; } body.smalo-products-page .smalo-product-card-cart svg { width: 1rem; height: 1rem; } body.smalo-products-page .smalo-product-card-cart:hover, body.smalo-products-page .smalo-product-card-options:hover { border-color: #ff9d7e; background: #ff9d7e; box-shadow: 0 8px 22px rgba(255, 157, 126, 0.24); } body.smalo-products-page .smalo-product-card-cart:disabled { cursor: wait; opacity: 0.82; } body.smalo-products-page .smalo-product-card-cart[data-state="success"] { border-color: #6fa78f; background: #6fa78f; } body.smalo-products-page .smalo-product-card-cart[data-state="error"] { border-color: #ff9d7e; background: #ff9d7e; } body.smalo-products-page .smalo-products-pagination { margin-top: 3rem; } body.smalo-products-page .smalo-products-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } body.smalo-products-page .smalo-products-pagination a, body.smalo-products-page .smalo-products-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.65rem; min-height: 2.65rem; padding: 0.6rem 0.95rem; border: 1px solid rgba(162, 192, 206, 0.35); border-radius: 9999px; background: #ffffff; color: #3a4750; font-weight: 800; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } body.smalo-products-page .smalo-products-pagination a:hover, body.smalo-products-page .smalo-products-pagination .current { border-color: #ff9d7e; background: #ff9d7e; color: #ffffff; } body.smalo-products-page .smalo-products-empty { max-width: 34rem; margin: 2rem auto 0; padding: 3rem 1.5rem; text-align: center; } body.smalo-products-page .smalo-products-empty-mark { width: 4rem; height: 4rem; margin: 0 auto 1.2rem; border: 2px solid rgba(162, 192, 206, 0.32); border-radius: 9999px; background: radial-gradient(circle at 60% 40%, rgba(255, 157, 126, 0.3), rgba(162, 192, 206, 0.12)); } body.smalo-products-page .smalo-products-empty h2 { margin: 0 0 0.65rem; color: #3a4750; font-size: 1.75rem; font-weight: 800; } body.smalo-products-page .smalo-products-empty p { margin: 0 auto 1.4rem; color: rgba(58, 71, 80, 0.65); line-height: 1.65; } body.smalo-products-page .smalo-products-empty a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.85rem; padding: 0.65rem 1.1rem; border-radius: 9999px; background: #3a4750; color: #ffffff; font-weight: 800; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } body.smalo-products-page .smalo-products-empty a:hover { background: #ff9d7e; } @media (min-width: 640px) { body.smalo-products-page .smalo-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.smalo-products-page .smalo-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { body.smalo-products-page .smalo-products-controls { grid-template-columns: 1fr 1fr; } body.smalo-products-page .smalo-products-search { grid-column: 1 / -1; } body.smalo-products-page .smalo-products-reset { width: 100%; } body.smalo-products-page .smalo-products-sort-list { left: 0; right: auto; } } @media (max-width: 640px) { body.smalo-products-page .smalo-products-controls { top: var(--smalo-admin-bar-height, 0px); grid-template-columns: 1fr; gap: 0.75rem; padding: 0.875rem; border-radius: 1rem; } body.smalo-products-page .smalo-products-hero { padding-top: 4rem !important; padding-bottom: 2.5rem !important; } body.smalo-products-page .smalo-products-category-pills { margin-top: 1rem; } body.smalo-products-page .smalo-products-sort-list { width: 100%; } body.smalo-products-page .smalo-product-card-media { aspect-ratio: 1 / 1; } body.smalo-products-page .smalo-product-card-cart, body.smalo-products-page .smalo-product-card-options { min-width: 4.75rem; width: 4.75rem; } } @media (prefers-reduced-motion: reduce) { body.smalo-products-page .smalo-product-card-media, body.smalo-products-page .smalo-product-card-img, body.smalo-products-page .smalo-product-card-media img, body.smalo-products-page .smalo-products-reset, body.smalo-products-page .smalo-products-sort-menu summary, body.smalo-products-page .smalo-products-sort-menu summary svg, body.smalo-products-page .smalo-products-sort-list a, body.smalo-products-page .smalo-products-category-pills a, body.smalo-products-page .smalo-product-card-cart, body.smalo-products-page .smalo-product-card-options { transition: none !important; } body.smalo-products-page .smalo-product-card:hover .smalo-product-card-media { transform: none; } } /* 404 page */ body.smalo-404-page { background: #faf9f6; color: #3a4750; } body.smalo-404-page .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; background: #faf9f6; } body.smalo-404-page .wp-site-blocks > header:first-child, body.smalo-404-page .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; background: #faf9f6 !important; } body.smalo-404-page .smalo-404-main { min-height: 72dvh; padding: 7rem 1rem 5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.16), transparent 34%), linear-gradient(315deg, rgba(255, 157, 126, 0.12), transparent 30%), #faf9f6; } body.smalo-404-page .fade-in { opacity: 1 !important; transform: none !important; } body.smalo-404-page .smalo-404-shell, body.smalo-404-page .smalo-404-recommendations { width: min(100%, 76rem); margin: 0 auto; } body.smalo-404-page .smalo-404-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; } body.smalo-404-page .smalo-404-copy, body.smalo-404-page .smalo-404-panel { min-width: 0; } body.smalo-404-page .smalo-404-kicker, body.smalo-404-page .smalo-404-products-header p { margin: 0 0 0.85rem; color: #ff9d7e; font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } body.smalo-404-page .smalo-404-code { margin: 0 0 0.25rem; color: rgba(162, 192, 206, 0.55); font-size: clamp(4.25rem, 16vw, 9rem); font-weight: 900; line-height: 0.9; } body.smalo-404-page .smalo-404-copy h1 { max-width: 12ch; margin: 0 0 1rem; color: #3a4750; font-size: clamp(2.35rem, 7vw, 5.25rem); font-weight: 800; line-height: 0.98; } body.smalo-404-page .smalo-404-lede { max-width: 38rem; margin: 0; color: rgba(58, 71, 80, 0.72); font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 400; line-height: 1.7; } body.smalo-404-page .smalo-404-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.75rem; } body.smalo-404-page .smalo-404-button, body.smalo-404-page .smalo-404-search button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.75rem 1.15rem; border: 1px solid transparent; border-radius: 9999px; cursor: pointer; font-size: 0.92rem; font-weight: 800; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-404-page .smalo-404-button-primary, body.smalo-404-page .smalo-404-search button { border-color: #3a4750; background: #3a4750; color: #ffffff; } body.smalo-404-page .smalo-404-button-secondary { border-color: rgba(162, 192, 206, 0.65); background: #ffffff; color: #3a4750; } body.smalo-404-page .smalo-404-button:hover, body.smalo-404-page .smalo-404-search button:hover { border-color: #ff9d7e; background: #ff9d7e; color: #ffffff; box-shadow: 0 10px 24px rgba(255, 157, 126, 0.24); transform: translateY(-1px); } body.smalo-404-page .smalo-404-panel { padding: 1rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1rem; background: rgba(255, 255, 255, 0.78); box-shadow: 0 18px 54px rgba(58, 71, 80, 0.08); } body.smalo-404-page .smalo-404-search label { display: block; margin: 0 0 0.55rem; color: rgba(58, 71, 80, 0.72); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } body.smalo-404-page .smalo-404-search-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: center; padding: 0.55rem; border: 1px solid rgba(162, 192, 206, 0.4); border-radius: 0.85rem; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-404-page .smalo-404-search-field:focus-within { border-color: #ff9d7e; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18); } body.smalo-404-page .smalo-404-search-field svg { width: 1.15rem; height: 1.15rem; color: #a2c0ce; } body.smalo-404-page .smalo-404-search input { width: 100%; min-width: 0; min-height: 2.5rem; border: 0; background: transparent; color: #3a4750; font: inherit; outline: none; } body.smalo-404-page .smalo-404-search button { grid-column: 1 / -1; width: 100%; } body.smalo-404-page .smalo-404-links { display: grid; gap: 0.55rem; margin-top: 1rem; } body.smalo-404-page .smalo-404-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; padding: 0.75rem 0.85rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 0.75rem; background: rgba(250, 249, 246, 0.82); color: #3a4750; font-weight: 800; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } body.smalo-404-page .smalo-404-links svg { width: 1rem; height: 1rem; flex: 0 0 auto; transition: transform 0.2s ease; } body.smalo-404-page .smalo-404-links a:hover { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.16); color: #3a4750; transform: translateY(-1px); } body.smalo-404-page .smalo-404-links a:hover svg { transform: translateX(3px); } body.smalo-404-page .smalo-404-recommendations { margin-top: 4rem; } body.smalo-404-page .smalo-404-products-header { margin-bottom: 1.2rem; } body.smalo-404-page .smalo-404-products-header h2 { margin: 0; color: #3a4750; font-size: clamp(1.65rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.1; } body.smalo-404-page .smalo-404-products-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } body.smalo-404-page .smalo-404-product-card { overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: #ffffff; box-shadow: 0 14px 38px rgba(58, 71, 80, 0.07); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-404-page .smalo-404-product-card:hover { border-color: rgba(255, 157, 126, 0.5); box-shadow: 0 18px 42px rgba(58, 71, 80, 0.11); transform: translateY(-2px); } body.smalo-404-page .smalo-404-product-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(162, 192, 206, 0.12); } body.smalo-404-page .smalo-404-product-img, body.smalo-404-page .smalo-404-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.24s ease; } body.smalo-404-page .smalo-404-product-card:hover .smalo-404-product-img, body.smalo-404-page .smalo-404-product-card:hover .smalo-404-product-media img { transform: scale(1.04); } body.smalo-404-page .smalo-404-product-placeholder { display: grid; width: 100%; height: 100%; place-items: center; } body.smalo-404-page .smalo-404-product-placeholder span { width: 3rem; height: 3rem; border: 2px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; } body.smalo-404-page .smalo-404-product-body { padding: 1rem; } body.smalo-404-page .smalo-404-product-body h3 { margin: 0 0 0.5rem; color: #3a4750; font-size: 1rem; font-weight: 800; line-height: 1.35; } body.smalo-404-page .smalo-404-product-body h3 a { color: inherit; text-decoration: none; transition: color 0.2s ease; } body.smalo-404-page .smalo-404-product-card:hover h3 a { color: #a2c0ce; } body.smalo-404-page .smalo-404-product-price { color: #3a4750; font-size: 0.95rem; font-weight: 800; } body.smalo-404-page .smalo-404-product-price del { color: rgba(58, 71, 80, 0.4); font-weight: 500; } body.smalo-404-page .smalo-404-product-price ins { color: #ff9d7e; text-decoration: none; } body.smalo-404-page .smalo-404-button:focus-visible, body.smalo-404-page .smalo-404-search button:focus-visible, body.smalo-404-page .smalo-404-links a:focus-visible, body.smalo-404-page .smalo-404-product-media:focus-visible, body.smalo-404-page .smalo-404-product-body h3 a:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } @media (min-width: 640px) { body.smalo-404-page .smalo-404-search-field { grid-template-columns: auto minmax(0, 1fr) auto; } body.smalo-404-page .smalo-404-search button { grid-column: auto; width: auto; } body.smalo-404-page .smalo-404-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { body.smalo-404-page .smalo-404-main { padding-top: 8.5rem; } body.smalo-404-page .smalo-404-shell { grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr); gap: 3rem; } body.smalo-404-page .smalo-404-panel { padding: 1.25rem; } } @media (max-width: 520px) { body.smalo-404-page .smalo-404-main { padding-top: 6rem; } body.smalo-404-page .smalo-404-actions { display: grid; } body.smalo-404-page .smalo-404-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { body.smalo-404-page .smalo-404-button, body.smalo-404-page .smalo-404-search button, body.smalo-404-page .smalo-404-search-field, body.smalo-404-page .smalo-404-links a, body.smalo-404-page .smalo-404-links svg, body.smalo-404-page .smalo-404-product-card, body.smalo-404-page .smalo-404-product-img, body.smalo-404-page .smalo-404-product-media img, body.smalo-404-page .smalo-404-product-body h3 a { transition: none !important; } body.smalo-404-page .smalo-404-button:hover, body.smalo-404-page .smalo-404-search button:hover, body.smalo-404-page .smalo-404-links a:hover, body.smalo-404-page .smalo-404-links a:hover svg, body.smalo-404-page .smalo-404-product-card:hover, body.smalo-404-page .smalo-404-product-card:hover .smalo-404-product-img, body.smalo-404-page .smalo-404-product-card:hover .smalo-404-product-media img { transform: none; } } /* ========================================================= Cart Page ========================================================= */ body.smalo-cart-page { background: #faf9f6; color: #3a4750; } body.smalo-cart-page .smalo-cart-main { min-height: 100vh; padding: 7.5rem 1rem 6rem; overflow-x: hidden; } body.smalo-cart-page .smalo-cart-shell { width: min(100%, 76rem); margin: 0 auto; } body.smalo-cart-page .smalo-cart-hero { position: relative; isolation: isolate; margin-bottom: 2.5rem; } body.smalo-cart-page .smalo-cart-hero::before, body.smalo-cart-page .smalo-cart-hero::after { position: absolute; z-index: -1; border-radius: 9999px; content: ""; filter: blur(72px); pointer-events: none; } body.smalo-cart-page .smalo-cart-hero::before { top: -5rem; left: -4rem; width: min(28rem, 62vw); height: min(28rem, 62vw); background: rgba(162, 192, 206, 0.18); } body.smalo-cart-page .smalo-cart-hero::after { right: -5rem; bottom: -7rem; width: min(24rem, 58vw); height: min(24rem, 58vw); background: rgba(255, 157, 126, 0.12); } body.smalo-cart-page .smalo-cart-hero .smalo-cart-shell { display: grid; gap: 1.25rem; align-items: end; } body.smalo-cart-page .smalo-cart-kicker, body.smalo-cart-page .smalo-cart-summary-kicker, body.smalo-cart-page .smalo-cart-section-heading p { margin: 0 0 0.65rem; color: #ff9d7e; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } body.smalo-cart-page .smalo-cart-hero h1 { margin: 0 0 1rem; color: #3a4750; font-size: clamp(2.5rem, 7vw, 5.25rem); font-weight: 800; line-height: 0.98; } body.smalo-cart-page .smalo-cart-lede { max-width: 44rem; margin: 0; color: rgba(58, 71, 80, 0.72); font-size: clamp(1rem, 2.2vw, 1.24rem); line-height: 1.7; } body.smalo-cart-page .smalo-cart-hero-note { display: flex; flex-wrap: wrap; gap: 0.65rem; } body.smalo-cart-page .smalo-cart-hero-note span { display: inline-flex; min-height: 2.35rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.38); border-radius: 9999px; padding: 0.45rem 0.85rem; background: rgba(255, 255, 255, 0.72); color: rgba(58, 71, 80, 0.72); font-size: 0.82rem; font-weight: 700; } body.smalo-cart-page .woocommerce-notices-wrapper, body.smalo-cart-page .wc-block-store-notices, body.smalo-cart-page .woocommerce-error, body.smalo-cart-page .woocommerce-message, body.smalo-cart-page .woocommerce-info, body.smalo-cart-page .wc-block-components-notice-banner { max-width: 76rem !important; margin: 0 auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #3a4750 !important; box-shadow: none !important; } body.smalo-cart-page .woocommerce-notices-wrapper, body.smalo-cart-page .wc-block-store-notices { display: block !important; align-items: flex-start; margin-bottom: 2.25rem !important; } body.smalo-cart-page .woocommerce-message, body.smalo-cart-page .woocommerce-info, body.smalo-cart-page .woocommerce-error, body.smalo-cart-page .wc-block-components-notice-banner { display: flex !important; width: 100% !important; max-width: 100% !important; gap: 0.72rem; align-items: center !important; min-height: 2.9rem !important; margin: 0 !important; border: 1px solid rgba(162, 192, 206, 0.28) !important; border-radius: 0.75rem !important; padding: 0.72rem 0.9rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(250, 249, 246, 0.8)), #ffffff !important; box-shadow: 0 10px 24px rgba(58, 71, 80, 0.05) !important; color: #3a4750 !important; font-size: 0.9rem !important; font-weight: 700 !important; line-height: 1.45 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-cart-page .woocommerce-message::before, body.smalo-cart-page .woocommerce-info::before, body.smalo-cart-page .woocommerce-error::before { position: static !important; top: auto !important; left: auto !important; display: inline-grid !important; width: 1.55rem !important; height: 1.55rem !important; flex: 0 0 auto; place-items: center !important; border: 1px solid rgba(162, 192, 206, 0.45) !important; border-radius: 9999px !important; background: rgba(162, 192, 206, 0.18) !important; color: #3a4750 !important; font-family: inherit !important; font-size: 0.78rem !important; font-weight: 900 !important; line-height: 1 !important; content: ""; } body.smalo-cart-page .woocommerce-message::before { border-color: rgba(162, 192, 206, 0.56) !important; background: rgba(162, 192, 206, 0.22) !important; content: "\2713" !important; } body.smalo-cart-page .woocommerce-info::before { content: "i" !important; } body.smalo-cart-page .woocommerce-error::before { border-color: rgba(255, 157, 126, 0.52) !important; background: rgba(255, 157, 126, 0.16) !important; content: "!" !important; } body.smalo-cart-page .woocommerce-info { border-color: rgba(255, 157, 126, 0.32) !important; } body.smalo-cart-page .woocommerce-error { border-color: rgba(255, 157, 126, 0.38) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 157, 126, 0.08)), #ffffff !important; } body.smalo-cart-page .wc-block-components-notice-banner.is-success { border-color: rgba(162, 192, 206, 0.28) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(250, 249, 246, 0.8)), #ffffff !important; } body.smalo-cart-page .wc-block-components-notice-banner.is-info, body.smalo-cart-page .wc-block-components-notice-banner.is-warning, body.smalo-cart-page .wc-block-components-notice-banner.is-error { border-color: rgba(255, 157, 126, 0.38) !important; } body.smalo-cart-page .wc-block-components-notice-banner > svg { width: 1.55rem !important; height: 1.55rem !important; min-width: 1.55rem !important; min-height: 1.55rem !important; align-self: center !important; border: 1px solid rgba(162, 192, 206, 0.56) !important; border-radius: 9999px !important; padding: 0.18rem !important; background-color: rgba(162, 192, 206, 0.22) !important; fill: #3a4750 !important; } body.smalo-cart-page .wc-block-components-notice-banner.is-error > svg, body.smalo-cart-page .wc-block-components-notice-banner.is-warning > svg, body.smalo-cart-page .wc-block-components-notice-banner.is-info > svg { border-color: rgba(255, 157, 126, 0.52) !important; background-color: rgba(255, 157, 126, 0.16) !important; } body.smalo-cart-page .wc-block-components-notice-banner > .wc-block-components-notice-banner__content { align-self: center !important; flex-basis: auto !important; padding-right: 0 !important; color: #3a4750 !important; } body.smalo-cart-page .wc-block-components-notice-banner > .wc-block-components-button { color: #3a4750 !important; opacity: 0.58; transition: color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; } body.smalo-cart-page .wc-block-components-notice-banner > .wc-block-components-button:hover { color: #ff9d7e !important; opacity: 1; } body.smalo-cart-page .woocommerce-message .button, body.smalo-cart-page .woocommerce-info .button, body.smalo-cart-page .woocommerce-error .button, body.smalo-cart-page .woocommerce-message a, body.smalo-cart-page .woocommerce-info a, body.smalo-cart-page .woocommerce-error a, body.smalo-cart-page .wc-block-components-notice-banner a, body.smalo-cart-page .wc-block-components-notice-banner .wc-forward { float: none; min-height: auto; margin: 0 0 0 auto; border: 0; border-radius: 0.35rem; padding: 0 !important; background: transparent; box-shadow: none; color: #3a4750 !important; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255, 157, 126, 0.52); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: color 0.2s ease, text-decoration-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-cart-page .woocommerce-message .button:hover, body.smalo-cart-page .woocommerce-info .button:hover, body.smalo-cart-page .woocommerce-error .button:hover, body.smalo-cart-page .woocommerce-message a:hover, body.smalo-cart-page .woocommerce-info a:hover, body.smalo-cart-page .woocommerce-error a:hover, body.smalo-cart-page .wc-block-components-notice-banner a:hover, body.smalo-cart-page .wc-block-components-notice-banner .wc-forward:hover { color: #ff9d7e !important; text-decoration-color: #ff9d7e; } body.smalo-cart-page .smalo-cart-layout { display: grid; gap: 1.4rem; } body.smalo-cart-page .smalo-cart-items, body.smalo-cart-page .smalo-cart-summary, body.smalo-cart-page .smalo-cart-empty { border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: rgba(255, 255, 255, 0.82); box-shadow: 0 18px 52px rgba(58, 71, 80, 0.07); } body.smalo-cart-page .smalo-cart-items { padding: 0.75rem; } body.smalo-cart-page .smalo-cart-items-header { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; padding: 0.55rem 0.55rem 1rem; } body.smalo-cart-page .smalo-cart-items-header h2, body.smalo-cart-page .smalo-cart-summary h2, body.smalo-cart-page .smalo-cart-empty h2, body.smalo-cart-page .smalo-cart-section-heading h2 { margin: 0; color: #3a4750; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 800; line-height: 1.12; } body.smalo-cart-page .smalo-cart-items-header a { border-radius: 0.35rem; color: #3a4750; font-size: 0.9rem; font-weight: 800; text-decoration: none; text-underline-offset: 0.26em; transition: color 0.2s ease, text-decoration-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.smalo-cart-page .smalo-cart-items-header a:hover { color: #ff9d7e; text-decoration: underline; text-decoration-color: rgba(255, 157, 126, 0.58); transform: translateY(-1px); } body.smalo-cart-page .smalo-cart-items-header a:focus { outline: none; } body.smalo-cart-page .smalo-cart-items-header a:focus-visible { color: #3a4750; outline: none; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18); text-decoration: underline; text-decoration-color: rgba(255, 157, 126, 0.72); } body.smalo-cart-page .smalo-cart-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0.55rem; border-top: 1px solid rgba(162, 192, 206, 0.18); transition: opacity 0.2s ease, transform 0.2s ease; } body.smalo-cart-page .smalo-cart-item.is-removing { opacity: 0.58; transform: scale(0.99); } body.smalo-cart-page .smalo-cart-item-media { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.85rem; background: rgba(162, 192, 206, 0.12); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-cart-page .smalo-cart-item-media:hover { border-color: rgba(255, 157, 126, 0.5); box-shadow: 0 12px 28px rgba(58, 71, 80, 0.1); transform: translateY(-1px); } body.smalo-cart-page .smalo-cart-item-img, body.smalo-cart-page .smalo-cart-item-media img { width: 100%; height: 100%; object-fit: cover; } body.smalo-cart-page .smalo-cart-item-body { display: grid; gap: 1rem; min-width: 0; } body.smalo-cart-page .smalo-cart-item h3 { margin: 0 0 0.4rem; color: #3a4750; font-size: 1.05rem; font-weight: 800; line-height: 1.35; } body.smalo-cart-page .smalo-cart-item h3 a { color: inherit; text-decoration: none; transition: color 0.2s ease; } body.smalo-cart-page .smalo-cart-item h3 a:hover { color: #a2c0ce; } body.smalo-cart-page .smalo-cart-item-meta { margin-bottom: 0.65rem; color: rgba(58, 71, 80, 0.62); font-size: 0.88rem; line-height: 1.5; } body.smalo-cart-page .smalo-cart-item-meta dl, body.smalo-cart-page .smalo-cart-item-meta p { margin: 0; } body.smalo-cart-page .smalo-cart-item-meta dt, body.smalo-cart-page .smalo-cart-item-meta dd { display: inline; margin: 0; } body.smalo-cart-page .smalo-cart-item-price, body.smalo-cart-page .smalo-cart-product-price { color: #3a4750; font-weight: 800; } body.smalo-cart-page .smalo-cart-item-price del, body.smalo-cart-page .smalo-cart-product-price del { color: rgba(58, 71, 80, 0.4); font-weight: 500; } body.smalo-cart-page .smalo-cart-item-price ins, body.smalo-cart-page .smalo-cart-product-price ins { color: #ff9d7e; text-decoration: none; } body.smalo-cart-page .smalo-cart-item-controls { display: grid; gap: 0.85rem; align-content: start; } body.smalo-cart-page .smalo-cart-quantity { display: inline-grid; grid-template-columns: 2.55rem 3.1rem 2.55rem; width: max-content; min-height: 2.7rem; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-cart-page .smalo-cart-quantity:focus-within { border-color: rgba(255, 157, 126, 0.72); box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.14); } body.smalo-cart-page .smalo-cart-qty-button, body.smalo-cart-page .smalo-cart-qty-input { min-width: 2.55rem; min-height: 2.55rem; border: 0; background: transparent; color: #3a4750; font: inherit; font-weight: 800; } body.smalo-cart-page .smalo-cart-qty-button { cursor: pointer; outline: none; transition: color 0.2s ease, background-color 0.2s ease; } body.smalo-cart-page .smalo-cart-qty-button:focus, body.smalo-cart-page .smalo-cart-qty-button:focus-visible { outline: none; box-shadow: none; } body.smalo-cart-page .smalo-cart-qty-button:hover { background: rgba(162, 192, 206, 0.18); color: #ff9d7e; } body.smalo-cart-page .smalo-cart-qty-input { width: 3.1rem; padding: 0; text-align: center; appearance: textfield; outline: none; box-shadow: none; } body.smalo-cart-page .smalo-cart-qty-input:focus, body.smalo-cart-page .smalo-cart-qty-input:focus-visible { outline: none; box-shadow: none; } body.smalo-cart-page .smalo-cart-qty-input::-webkit-outer-spin-button, body.smalo-cart-page .smalo-cart-qty-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } body.smalo-cart-page .smalo-cart-item-subtotal { display: flex; gap: 0.45rem; align-items: baseline; color: rgba(58, 71, 80, 0.62); font-size: 0.86rem; } body.smalo-cart-page .smalo-cart-item-subtotal strong { color: #3a4750; font-size: 1rem; } body.smalo-cart-page .smalo-cart-remove { width: max-content; color: rgba(58, 71, 80, 0.62); font-size: 0.86rem; font-weight: 800; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } body.smalo-cart-page .smalo-cart-remove:hover { color: #ff9d7e; transform: translateY(-1px); } body.smalo-cart-page .smalo-cart-actions { display: grid; gap: 1rem; align-items: end; padding: 1rem 0.55rem 0.55rem; border-top: 1px solid rgba(162, 192, 206, 0.18); } body.smalo-cart-page .smalo-cart-coupon label { display: block; margin: 0 0 0.42rem; color: rgba(58, 71, 80, 0.66); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } body.smalo-cart-page .smalo-cart-coupon-row { display: grid; gap: 0.55rem; align-items: end; } body.smalo-cart-page .smalo-cart-coupon input { min-height: 2.55rem; width: 100%; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 9999px; background: #ffffff; color: #3a4750; font: inherit; padding: 0.58rem 0.9rem; outline: none; font-size: 0.9rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-cart-page .smalo-cart-coupon input:focus { border-color: #ff9d7e; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.1); } body.smalo-cart-page .smalo-cart-button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9999px; cursor: pointer; padding: 0.75rem 1.15rem; font-size: 0.92rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } body.smalo-cart-page .smalo-cart-actions .smalo-cart-button { min-height: 2.55rem; padding: 0.58rem 1rem; font-size: 0.86rem; } body.smalo-cart-page .smalo-cart-button-primary { border-color: #3a4750; background: #3a4750; color: #ffffff; } body.smalo-cart-page .smalo-cart-button-secondary { border-color: rgba(162, 192, 206, 0.58); background: #ffffff; color: #3a4750; } body.smalo-cart-page .smalo-cart-button:hover:not(:disabled) { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; box-shadow: 0 10px 24px rgba(255, 157, 126, 0.24); transform: translateY(-1px); } body.smalo-cart-page .smalo-cart-button:disabled { cursor: not-allowed; border-color: rgba(162, 192, 206, 0.5); background: rgba(162, 192, 206, 0.2); color: rgba(58, 71, 80, 0.72); opacity: 1; transform: none; } body.smalo-cart-page .smalo-cart-button:disabled:hover { border-color: rgba(162, 192, 206, 0.5); background: rgba(162, 192, 206, 0.2); color: rgba(58, 71, 80, 0.72); box-shadow: none; transform: none; } body.smalo-cart-page .smalo-cart-update.is-needed { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.16); color: #3a4750; } body.smalo-cart-page .smalo-cart-update.is-needed:hover:not(:disabled) { border-color: #a2c0ce; background: #a2c0ce; color: #3a4750; box-shadow: 0 10px 24px rgba(162, 192, 206, 0.28); } body.smalo-cart-page .smalo-cart-summary { padding: 1rem; } body.smalo-cart-page .smalo-cart-summary-lines { display: grid; gap: 0.8rem; margin: 1.25rem 0; } body.smalo-cart-page .smalo-cart-summary-lines > div, body.smalo-cart-page .smalo-cart-summary-total { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; color: rgba(58, 71, 80, 0.68); } body.smalo-cart-page .smalo-cart-summary-lines strong, body.smalo-cart-page .smalo-cart-summary-total strong { color: #3a4750; text-align: right; white-space: nowrap; } body.smalo-cart-page .woocommerce-Price-amount, body.smalo-cart-page .woocommerce-Price-amount bdi { display: inline-flex; align-items: baseline; white-space: nowrap; } body.smalo-cart-page .smalo-cart-discount strong, body.smalo-cart-page .smalo-cart-discount a { color: #ff9d7e; } body.smalo-cart-page .smalo-cart-summary-total { margin-top: 1rem; border-top: 1px solid rgba(162, 192, 206, 0.24); padding-top: 1rem; font-size: 1.15rem; font-weight: 800; } body.smalo-cart-page .smalo-cart-summary .smalo-cart-checkout { width: 100%; margin-top: 1rem; } body.smalo-cart-page .smalo-cart-summary-note { margin: 0.9rem 0 0; color: rgba(58, 71, 80, 0.58); font-size: 0.84rem; line-height: 1.55; text-align: center; } body.smalo-cart-page .smalo-cart-mobile-checkout { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 48px rgba(58, 71, 80, 0.18); backdrop-filter: blur(16px); } body.smalo-cart-page .smalo-cart-mobile-checkout span { display: block; color: rgba(58, 71, 80, 0.62); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; } body.smalo-cart-page .smalo-cart-mobile-checkout strong { display: block; color: #3a4750; font-size: 1rem; font-weight: 800; white-space: nowrap; } body.smalo-cart-page .smalo-cart-empty { padding: 2rem 1rem; text-align: center; } body.smalo-cart-page .smalo-cart-empty-mark { display: inline-grid; width: 4rem; height: 4rem; margin-bottom: 1.15rem; place-items: center; border-radius: 9999px; background: rgba(255, 157, 126, 0.12); color: #ff9d7e; } body.smalo-cart-page .smalo-cart-empty-mark svg { width: 1.8rem; height: 1.8rem; } body.smalo-cart-page .smalo-cart-empty p { max-width: 32rem; margin: 0.7rem auto 1.35rem; color: rgba(58, 71, 80, 0.68); line-height: 1.65; } body.smalo-cart-page .smalo-cart-empty-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } body.smalo-cart-page .smalo-cart-recommendations { margin-top: 3rem; } body.smalo-cart-page .smalo-cart-section-heading { margin-bottom: 1.2rem; } body.smalo-cart-page .smalo-cart-products-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } body.smalo-cart-page .smalo-cart-product-card { overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: #ffffff; box-shadow: 0 14px 38px rgba(58, 71, 80, 0.07); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-cart-page .smalo-cart-product-card:hover { border-color: rgba(255, 157, 126, 0.5); box-shadow: 0 18px 42px rgba(58, 71, 80, 0.11); transform: translateY(-2px); } body.smalo-cart-page .smalo-cart-product-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(162, 192, 206, 0.12); } body.smalo-cart-page .smalo-cart-product-img, body.smalo-cart-page .smalo-cart-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.24s ease; } body.smalo-cart-page .smalo-cart-product-card:hover .smalo-cart-product-img, body.smalo-cart-page .smalo-cart-product-card:hover .smalo-cart-product-media img { transform: scale(1.04); } body.smalo-cart-page .smalo-cart-product-placeholder { display: grid; width: 100%; height: 100%; place-items: center; } body.smalo-cart-page .smalo-cart-product-placeholder span { width: 3rem; height: 3rem; border: 2px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; } body.smalo-cart-page .smalo-cart-product-body { padding: 1rem; } body.smalo-cart-page .smalo-cart-product-body h3 { margin: 0 0 0.5rem; color: #3a4750; font-size: 1rem; font-weight: 800; line-height: 1.35; } body.smalo-cart-page .smalo-cart-product-body h3 a { color: inherit; text-decoration: none; transition: color 0.2s ease; } body.smalo-cart-page .smalo-cart-product-card:hover h3 a { color: #a2c0ce; } body.smalo-cart-page .smalo-cart-button:focus-visible, body.smalo-cart-page .smalo-cart-item-media:focus-visible, body.smalo-cart-page .smalo-cart-item h3 a:focus-visible, body.smalo-cart-page .smalo-cart-remove:focus-visible, body.smalo-cart-page .smalo-cart-product-media:focus-visible, body.smalo-cart-page .smalo-cart-product-body h3 a:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.smalo-cart-page .woocommerce-message a:focus-visible, body.smalo-cart-page .woocommerce-info a:focus-visible, body.smalo-cart-page .woocommerce-error a:focus-visible, body.smalo-cart-page .wc-block-components-notice-banner a:focus-visible, body.smalo-cart-page .wc-block-components-notice-banner .wc-forward:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18); } body.smalo-cart-page .wc-block-components-notice-banner > .wc-block-components-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18) !important; } @media (min-width: 640px) { body.smalo-cart-page .smalo-cart-coupon-row { grid-template-columns: minmax(0, 1fr) auto; } body.smalo-cart-page .smalo-cart-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 760px) { body.smalo-cart-page .smalo-cart-item { grid-template-columns: 8rem minmax(0, 1fr); padding: 1.15rem 0.75rem; } body.smalo-cart-page .smalo-cart-item-body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } body.smalo-cart-page .smalo-cart-item-controls { justify-items: end; text-align: right; } body.smalo-cart-page .smalo-cart-actions { grid-template-columns: minmax(0, 1fr) auto; } } @media (min-width: 1024px) { body.smalo-cart-page .smalo-cart-main { padding-top: 8.5rem; } body.smalo-cart-page .smalo-cart-hero .smalo-cart-shell { grid-template-columns: minmax(0, 1fr) auto; } body.smalo-cart-page .smalo-cart-layout { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); align-items: start; } body.smalo-cart-page .smalo-cart-summary { position: sticky; top: calc(var(--smalo-admin-bar-height, 0px) + 6.5rem); } body.smalo-cart-page .smalo-cart-mobile-checkout { display: none; } } @media (max-width: 1023px) { body.smalo-cart-page .smalo-cart-main { padding-bottom: 8rem; } } @media (max-width: 520px) { body.smalo-cart-page .smalo-cart-main { padding-top: 6rem; } body.smalo-cart-page .smalo-cart-item { grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0.8rem; } body.smalo-cart-page .smalo-cart-empty-actions, body.smalo-cart-page .smalo-cart-actions { display: grid; } body.smalo-cart-page .smalo-cart-empty-actions .smalo-cart-button, body.smalo-cart-page .smalo-cart-actions .smalo-cart-button, body.smalo-cart-page .smalo-cart-update { width: 100%; } body.smalo-cart-page .smalo-cart-mobile-checkout { grid-template-columns: 1fr; } body.smalo-cart-page .smalo-cart-mobile-checkout .smalo-cart-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { body.smalo-cart-page .smalo-cart-items-header a, body.smalo-cart-page .smalo-cart-item, body.smalo-cart-page .smalo-cart-item-media, body.smalo-cart-page .smalo-cart-item h3 a, body.smalo-cart-page .smalo-cart-qty-button, body.smalo-cart-page .smalo-cart-remove, body.smalo-cart-page .smalo-cart-coupon input, body.smalo-cart-page .smalo-cart-button, body.smalo-cart-page .smalo-cart-product-card, body.smalo-cart-page .smalo-cart-product-img, body.smalo-cart-page .smalo-cart-product-media img, body.smalo-cart-page .smalo-cart-product-body h3 a, body.smalo-cart-page .woocommerce-message, body.smalo-cart-page .woocommerce-info, body.smalo-cart-page .woocommerce-error, body.smalo-cart-page .wc-block-components-notice-banner, body.smalo-cart-page .wc-block-components-notice-banner > .wc-block-components-button { transition: none !important; } body.smalo-cart-page .smalo-cart-items-header a:hover, body.smalo-cart-page .smalo-cart-item.is-removing, body.smalo-cart-page .smalo-cart-item-media:hover, body.smalo-cart-page .smalo-cart-remove:hover, body.smalo-cart-page .smalo-cart-button:hover, body.smalo-cart-page .smalo-cart-product-card:hover, body.smalo-cart-page .smalo-cart-product-card:hover .smalo-cart-product-img, body.smalo-cart-page .smalo-cart-product-card:hover .smalo-cart-product-media img { transform: none; } } /* ========================================================================== My Account Page ========================================================================== */ body.smalo-account-page .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.smalo-account-page .wp-site-blocks > header:first-child, body.smalo-account-page .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; background-color: #faf9f6 !important; } body.smalo-account-page .smalo-account-main { min-height: 0; padding-top: 1.5rem; background: #faf9f6; color: #3a4750; } body.smalo-account-page .smalo-account-shell { width: min(100% - 2rem, 1180px); margin: 0 auto; } body.smalo-account-page .smalo-account-hero { padding: 1rem 0 0.75rem; } body.smalo-account-page .smalo-account-hero .smalo-account-shell { display: grid; gap: 0.9rem; align-items: center; } body.smalo-account-page .smalo-account-kicker { margin: 0 0 0.35rem; color: rgba(58, 71, 80, 0.62); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.smalo-account-page .smalo-account-hero h1 { max-width: 44rem; margin: 0; color: #3a4750; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1; } body.smalo-account-page .smalo-account-lede { max-width: 43rem; margin: 0.55rem 0 0; color: rgba(58, 71, 80, 0.68); font-size: 1rem; line-height: 1.55; } body.smalo-account-page .smalo-account-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } body.smalo-account-page .smalo-account-content { padding: 0.75rem 0 2rem; } body.smalo-account-page .smalo-account-button, body.smalo-account-page .woocommerce .button, body.smalo-account-page .woocommerce button.button, body.smalo-account-page .woocommerce input.button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9999px; cursor: pointer; padding: 0.75rem 1.15rem; font: inherit; font-size: 0.92rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } body.smalo-account-page .smalo-account-button-primary, body.smalo-account-page .woocommerce .button, body.smalo-account-page .woocommerce button.button, body.smalo-account-page .woocommerce input.button { border-color: #3a4750; background: #3a4750; color: #ffffff; } body.smalo-account-page .smalo-account-button-secondary { border-color: rgba(162, 192, 206, 0.58); background: #ffffff; color: #3a4750; } body.smalo-account-page .smalo-account-button-danger { border-color: rgba(255, 157, 126, 0.5); background: rgba(255, 157, 126, 0.12); color: #3a4750; } body.smalo-account-page .smalo-account-button-danger:hover { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; } body.smalo-account-page .smalo-account-button:hover, body.smalo-account-page .woocommerce .button:hover:not(:disabled), body.smalo-account-page .woocommerce button.button:hover:not(:disabled), body.smalo-account-page .woocommerce input.button:hover:not(:disabled) { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; box-shadow: 0 10px 24px rgba(255, 157, 126, 0.22); transform: translateY(-1px); } body.smalo-account-page .woocommerce .button:disabled, body.smalo-account-page .woocommerce button.button:disabled, body.smalo-account-page .woocommerce input.button:disabled { cursor: not-allowed; border-color: rgba(162, 192, 206, 0.42) !important; background: rgba(162, 192, 206, 0.18) !important; color: rgba(58, 71, 80, 0.55) !important; box-shadow: none !important; opacity: 1; transform: none !important; } body.smalo-account-page .smalo-account-auth-panel, body.smalo-account-page .smalo-account-panel, body.smalo-account-page .smalo-account-sidebar, body.smalo-account-page .smalo-account-card { border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.86); box-shadow: 0 16px 42px rgba(58, 71, 80, 0.07); } body.smalo-account-page .smalo-account-auth-panel { width: min(100%, 40rem); margin: 0 auto; padding: 1.1rem; } body.smalo-account-page .smalo-account-auth-panel .woocommerce { max-width: 100%; margin: 0 auto; } body.smalo-account-page .smalo-account-auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; margin: 0 0 1.15rem; border: 1px solid rgba(162, 192, 206, 0.26); border-radius: 9999px; background: rgba(162, 192, 206, 0.12); padding: 0.3rem; } body.smalo-account-page .smalo-account-auth-tabs button { min-height: 2.6rem; border: 1px solid transparent; border-radius: 9999px; background: transparent; color: rgba(58, 71, 80, 0.7); cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 800; line-height: 1.2; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-account-page .smalo-account-auth-tabs button:hover { color: #3a4750; } body.smalo-account-page .smalo-account-auth-tabs button.is-active { border-color: rgba(255, 255, 255, 0.82); background: #ffffff; color: #3a4750; box-shadow: 0 8px 20px rgba(58, 71, 80, 0.08); } body.smalo-account-page .smalo-account-auth-tabs button:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.smalo-account-page .smalo-account-auth-panel .u-columns { display: block; } body.smalo-account-page .smalo-account-auth-panel .u-column1, body.smalo-account-page .smalo-account-auth-panel .u-column2 { width: 100% !important; float: none !important; min-width: 0; border: 0; border-radius: 0; padding: 0; background: transparent; } body.smalo-account-page .smalo-account-auth-panel .u-column2 { display: none; } body.smalo-account-page .smalo-account-auth-enhanced .u-column2:not([hidden]) { display: block; } body.smalo-account-page .smalo-account-auth-panel [hidden] { display: none !important; } body.smalo-account-page .woocommerce h2, body.smalo-account-page .woocommerce h3, body.smalo-account-page .smalo-account-card h2, body.smalo-account-page .smalo-account-card h3, body.smalo-account-page .smalo-account-endpoint-heading h2 { margin: 0; color: #3a4750; font-weight: 800; line-height: 1.15; } body.smalo-account-page .woocommerce h2, body.smalo-account-page .smalo-account-endpoint-heading h2 { font-size: clamp(1.45rem, 3vw, 2rem); } body.smalo-account-page .woocommerce form.login, body.smalo-account-page .woocommerce form.register, body.smalo-account-page .woocommerce form.lost_reset_password, body.smalo-account-page .woocommerce form.edit-account, body.smalo-account-page .woocommerce form.woocommerce-EditAccountForm, body.smalo-account-page .woocommerce-address-fields, body.smalo-account-page .woocommerce-EditAccountForm { margin: 1rem 0 0; border: 0; border-radius: 0; padding: 0; } body.smalo-account-page .smalo-account-auth-panel .woocommerce form.login, body.smalo-account-page .smalo-account-auth-panel .woocommerce form.register { display: grid; gap: 0.35rem; } body.smalo-account-page .smalo-account-auth-panel .woocommerce-privacy-policy-text p { margin: 0.35rem 0 0.85rem; color: rgba(58, 71, 80, 0.72); font-size: 0.98rem; line-height: 1.6; } body.smalo-account-page .smalo-account-auth-panel .woocommerce-form-login__rememberme { display: inline-flex; min-height: 2.25rem; align-items: center; gap: 0.45rem; margin: -0.15rem 0 0.35rem; } body.smalo-account-page .smalo-account-auth-panel .woocommerce-form-login__rememberme input { width: 1rem; height: 1rem; accent-color: #ff9d7e; } body.smalo-account-page .smalo-account-auth-panel .woocommerce-LostPassword { margin: 1rem 0 0; text-align: center; } body.smalo-account-page .woocommerce form .form-row { position: relative; display: grid; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0; } body.smalo-account-page .woocommerce label { color: rgba(58, 71, 80, 0.72); font-size: 0.82rem; font-weight: 800; line-height: 1.35; } body.smalo-account-page .woocommerce .required { color: #ff9d7e; } body.smalo-account-page .woocommerce input.input-text, body.smalo-account-page .woocommerce input[type="email"], body.smalo-account-page .woocommerce input[type="password"], body.smalo-account-page .woocommerce input[type="text"], body.smalo-account-page .woocommerce input[type="tel"], body.smalo-account-page .woocommerce select, body.smalo-account-page .woocommerce textarea { width: 100%; min-height: 3rem; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 0.75rem; background: #ffffff; color: #3a4750; font: inherit; font-size: 1rem; line-height: 1.45; padding: 0.72rem 0.9rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.smalo-account-page .woocommerce textarea { min-height: 8rem; resize: vertical; } body.smalo-account-page .woocommerce .password-input { position: relative; display: block; width: 100%; } body.smalo-account-page .smalo-account-password-field, body.smalo-account-page .smalo-account-password-input-wrap { position: relative; } body.smalo-account-page .smalo-account-password-input-wrap { display: block; width: 100%; } body.smalo-account-page .woocommerce input:focus-visible, body.smalo-account-page .woocommerce select:focus-visible, body.smalo-account-page .woocommerce textarea:focus-visible { border-color: #ff9d7e; outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14); } body.smalo-account-page .woocommerce input:focus, body.smalo-account-page .woocommerce select:focus, body.smalo-account-page .woocommerce textarea:focus { border-color: #ff9d7e; outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14); } body.smalo-account-page .woocommerce .password-input input[type="password"], body.smalo-account-page .woocommerce .password-input input[type="text"], body.smalo-account-page .smalo-account-password-input-wrap input[type="password"], body.smalo-account-page .smalo-account-password-input-wrap input[type="text"], body.smalo-account-page .smalo-account-password-field input[type="password"], body.smalo-account-page .smalo-account-password-field input[type="text"] { padding-right: 6.1rem; } body.smalo-account-page .woocommerce .show-password-input, body.smalo-account-page .smalo-account-password-toggle { position: absolute; top: 50%; right: 0.55rem; bottom: auto; z-index: 3; display: inline-flex; width: auto; min-width: 4.3rem; min-height: 2rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; background: #ffffff; color: #3a4750; cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 800; line-height: 1; padding: 0 0.72rem; transform: translateY(-50%); text-indent: 0; overflow: visible; opacity: 1; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-account-page .woocommerce .show-password-input::after, body.smalo-account-page .woocommerce .show-password-input::before { display: none !important; } body.smalo-account-page .woocommerce .show-password-input.display-password::after { display: none !important; } body.smalo-account-page .woocommerce .show-password-input[aria-label*="Hide"] { border-color: rgba(255, 157, 126, 0.5); background: rgba(255, 157, 126, 0.12); } body.smalo-account-page .woocommerce .show-password-input:hover, body.smalo-account-page .smalo-account-password-toggle:hover { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.14); } body.smalo-account-page .smalo-account-layout { display: grid; gap: 1rem; } body.smalo-account-page .smalo-account-sidebar { overflow: hidden; } body.smalo-account-page .smalo-account-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 0.65rem; scrollbar-width: none; } body.smalo-account-page .smalo-account-nav::-webkit-scrollbar { display: none; } body.smalo-account-page .smalo-account-nav a { display: inline-flex; min-width: 0; min-height: 2.85rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 9999px; background: #ffffff; color: #3a4750; font-size: 0.9rem; font-weight: 800; padding: 0.68rem 0.95rem; text-decoration: none; white-space: normal; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-account-page .smalo-account-nav a:hover { border-color: rgba(255, 157, 126, 0.52); color: #ff9d7e; transform: translateY(-1px); } body.smalo-account-page .smalo-account-nav a.is-active { border-color: #a2c0ce; background: #a2c0ce; color: #ffffff; } body.smalo-account-page .smalo-account-nav-label-short { display: none; } body.smalo-account-page .smalo-account-actions { display: grid; gap: 0.75rem; border-top: 1px solid rgba(162, 192, 206, 0.18); padding: 0.8rem 0.75rem 0.75rem; } body.smalo-account-page .smalo-account-actions-user { display: grid; min-width: 0; gap: 0.12rem; } body.smalo-account-page .smalo-account-actions-user span { color: rgba(58, 71, 80, 0.58); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.smalo-account-page .smalo-account-actions-user strong { overflow: hidden; color: #3a4750; font-size: 0.98rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } body.smalo-account-page .smalo-account-logout-link { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid rgba(255, 157, 126, 0.46); border-radius: 9999px; background: rgba(255, 157, 126, 0.1); color: #3a4750; font-size: 0.9rem; font-weight: 800; line-height: 1.2; padding: 0.7rem 1rem; text-align: center; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-account-page .smalo-account-logout-link:hover { border-color: #ff9d7e; background: rgba(255, 157, 126, 0.18); box-shadow: 0 10px 22px rgba(255, 157, 126, 0.16); transform: translateY(-1px); } body.smalo-account-page .smalo-account-panel { min-width: 0; padding: 1rem; } body.smalo-account-page .smalo-account-dashboard-grid { display: grid; gap: 1rem; } body.smalo-account-page .smalo-account-card { display: grid; gap: 0.85rem; align-content: start; min-width: 0; padding: 1rem; } body.smalo-account-page .smalo-account-card-feature { background: linear-gradient(135deg, rgba(162, 192, 206, 0.15), rgba(255, 255, 255, 0.92)), #ffffff; } body.smalo-account-page .smalo-account-card-heading { display: flex; gap: 0.75rem; align-items: start; justify-content: space-between; } body.smalo-account-page .smalo-account-card-heading a, body.smalo-account-page .woocommerce-MyAccount-content a, body.smalo-account-page .woocommerce-LostPassword a { border-radius: 0.35rem; color: #3a4750; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255, 157, 126, 0.5); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: color 0.2s ease, text-decoration-color 0.2s ease, box-shadow 0.2s ease; } body.smalo-account-page .smalo-account-card-heading a:hover, body.smalo-account-page .woocommerce-MyAccount-content a:hover, body.smalo-account-page .woocommerce-LostPassword a:hover { color: #ff9d7e; text-decoration-color: #ff9d7e; } body.smalo-account-page .smalo-account-card p, body.smalo-account-page .smalo-account-card address { margin: 0; color: rgba(58, 71, 80, 0.68); font-style: normal; line-height: 1.65; } body.smalo-account-page .smalo-account-order-number { color: #3a4750 !important; font-size: 1.15rem; font-weight: 800; text-decoration: none; } body.smalo-account-page .smalo-account-order-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; } body.smalo-account-page .smalo-account-order-meta span { border-radius: 9999px; background: rgba(162, 192, 206, 0.18); color: #3a4750; font-size: 0.8rem; font-weight: 800; padding: 0.35rem 0.65rem; } body.smalo-account-page .smalo-account-order-meta strong { color: #3a4750; font-size: 1.1rem; } body.smalo-account-page .smalo-account-native-content { margin-top: 1.25rem; } body.smalo-account-page .smalo-account-native-content--edit-account { margin-top: 1rem; } body.smalo-account-page .smalo-account-details-form { display: grid; gap: 1rem; margin-top: 0 !important; } body.smalo-account-page .smalo-account-details-form input.input-text, body.smalo-account-page .smalo-account-details-form input[type="email"], body.smalo-account-page .smalo-account-details-form input[type="password"], body.smalo-account-page .smalo-account-details-form input[type="text"], body.smalo-account-page .smalo-account-details-form input[type="tel"], body.smalo-account-page .smalo-account-details-form select, body.smalo-account-page .smalo-account-details-form textarea { width: 100%; min-height: 3rem; border: 1px solid rgba(162, 192, 206, 0.36) !important; border-radius: 0.75rem !important; background: #ffffff; color: #3a4750; font: inherit; font-size: 1rem; line-height: 1.45; padding: 0.72rem 0.9rem; outline: 0 !important; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.smalo-account-page .smalo-account-details-form input.input-text:focus, body.smalo-account-page .smalo-account-details-form input.input-text:focus-visible, body.smalo-account-page .smalo-account-details-form input[type="email"]:focus, body.smalo-account-page .smalo-account-details-form input[type="email"]:focus-visible, body.smalo-account-page .smalo-account-details-form input[type="password"]:focus, body.smalo-account-page .smalo-account-details-form input[type="password"]:focus-visible, body.smalo-account-page .smalo-account-details-form input[type="text"]:focus, body.smalo-account-page .smalo-account-details-form input[type="text"]:focus-visible, body.smalo-account-page .smalo-account-details-form input[type="tel"]:focus, body.smalo-account-page .smalo-account-details-form input[type="tel"]:focus-visible, body.smalo-account-page .smalo-account-details-form select:focus, body.smalo-account-page .smalo-account-details-form select:focus-visible, body.smalo-account-page .smalo-account-details-form textarea:focus, body.smalo-account-page .smalo-account-details-form textarea:focus-visible { border-color: #ff9d7e !important; outline: 0 !important; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14) !important; } body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input.input-text, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="email"], body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="password"], body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="text"], body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="tel"], body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid select, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid textarea { border-color: rgba(255, 157, 126, 0.72) !important; background: rgba(255, 157, 126, 0.035); box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.08) !important; } body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input.input-text:focus, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input.input-text:focus-visible, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="email"]:focus, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="email"]:focus-visible, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="password"]:focus, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="password"]:focus-visible, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="text"]:focus, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="text"]:focus-visible, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="tel"]:focus, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid input[type="tel"]:focus-visible, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid select:focus, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid select:focus-visible, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid textarea:focus, body.smalo-account-page .smalo-account-details-form .smalo-account-field-invalid textarea:focus-visible { border-color: #ff9d7e !important; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14) !important; } body.smalo-account-page .smalo-account-details-form .password-input input[type="password"], body.smalo-account-page .smalo-account-details-form .password-input input[type="text"], body.smalo-account-page .smalo-account-details-form .smalo-account-password-input-wrap input[type="password"], body.smalo-account-page .smalo-account-details-form .smalo-account-password-input-wrap input[type="text"], body.smalo-account-page .smalo-account-details-form .smalo-account-password-field input[type="password"], body.smalo-account-page .smalo-account-details-form .smalo-account-password-field input[type="text"] { padding-right: 6.1rem; } body.smalo-account-page .smalo-account-details-card { display: grid; gap: 1rem; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.smalo-account-page .smalo-account-details-card--profile { background: linear-gradient(135deg, rgba(162, 192, 206, 0.14), rgba(255, 255, 255, 0.96) 42%), #ffffff; } body.smalo-account-page .smalo-account-details-card-heading { display: flex; gap: 1rem; align-items: start; justify-content: space-between; border-bottom: 1px solid rgba(162, 192, 206, 0.18); padding-bottom: 0.85rem; } body.smalo-account-page .smalo-account-details-card-heading h3, body.smalo-account-page .smalo-account-details-card legend { margin: 0; color: #3a4750; font-size: clamp(1.2rem, 2.3vw, 1.5rem); font-weight: 800; line-height: 1.15; } body.smalo-account-page .smalo-account-details-grid { display: grid; gap: 0.9rem; } body.smalo-account-page .smalo-account-details-form .form-row { float: none !important; width: 100% !important; margin-bottom: 0; } body.smalo-account-page .smalo-account-details-form .clear { display: none; } body.smalo-account-page .smalo-account-details-form fieldset { display: grid; gap: 0.75rem; min-width: 0; margin: 0; border: 0; padding: 0; } body.smalo-account-page .smalo-account-field-note, body.smalo-account-page .woocommerce form.edit-account span em { display: block; margin-top: 0.15rem; color: rgba(58, 71, 80, 0.62); font-size: 0.9rem; font-style: normal; line-height: 1.5; } body.smalo-account-page .smalo-account-field-error { display: flex; gap: 0.42rem; align-items: flex-start; width: 100%; margin-top: 0.45rem; border: 0; border-left: 3px solid rgba(255, 157, 126, 0.82); border-radius: 0; background: transparent; color: #3a4750; font-size: 0.88rem; font-weight: 650; line-height: 1.45; padding: 0.02rem 0 0.02rem 0.55rem; } body.smalo-account-page .smalo-account-field-error:focus, body.smalo-account-page .smalo-account-field-error:focus-visible { outline: none; } body.smalo-account-page .smalo-account-field-error::before { display: inline-grid; flex: 0 0 auto; place-items: center; width: 1rem; height: 1rem; margin-top: 0.16rem; border-radius: 9999px; background: rgba(255, 157, 126, 0.2); color: #3a4750; content: "!"; font-size: 0.68rem; font-weight: 900; line-height: 1; } body.smalo-account-page .smalo-account-password-note { max-width: 38rem; margin: -0.2rem 0 0.1rem; } body.smalo-account-page .smalo-account-details-actions { display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.88); padding: 0.85rem; } body.smalo-account-page .smalo-account-details-actions button[name="save_account_details"] { min-width: 11rem; min-height: 3.15rem; border-color: #a2c0ce !important; border-radius: 9999px; background: #a2c0ce !important; color: #3a4750 !important; font-size: 0.95rem; font-weight: 800; letter-spacing: 0; padding: 0.85rem 1.6rem !important; box-shadow: 0 10px 24px rgba(162, 192, 206, 0.24); } body.smalo-account-page .smalo-account-details-actions button[name="save_account_details"]:hover { border-color: #ff9d7e !important; background: #ff9d7e !important; color: #3a4750 !important; box-shadow: 0 12px 26px rgba(255, 157, 126, 0.24); transform: translateY(-1px); } body.smalo-account-page .smalo-account-details-actions button[name="save_account_details"]:disabled, body.smalo-account-page .smalo-account-details-actions button[name="save_account_details"]:disabled:hover { border-color: rgba(162, 192, 206, 0.42) !important; background: rgba(162, 192, 206, 0.18) !important; color: rgba(58, 71, 80, 0.55) !important; box-shadow: none !important; transform: none !important; } body.smalo-account-page .smalo-account-details-actions button[name="save_account_details"]:active { box-shadow: 0 6px 16px rgba(255, 157, 126, 0.18); transform: translateY(0); } body.smalo-account-page .smalo-account-details-actions button[name="save_account_details"]:focus, body.smalo-account-page .smalo-account-details-actions button[name="save_account_details"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.18), 0 10px 24px rgba(162, 192, 206, 0.24); } body.smalo-account-page .smalo-account-section-heading { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; } body.smalo-account-page .smalo-account-section-heading h2 { margin: 0; color: #3a4750; font-size: clamp(1.45rem, 3vw, 2.15rem); font-weight: 800; line-height: 1.1; } body.smalo-account-page .smalo-account-section-kicker { margin: 0 0 0.35rem; color: rgba(58, 71, 80, 0.58); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.smalo-account-page .smalo-account-order-groups { display: grid; gap: 1rem; } body.smalo-account-page .smalo-account-order-group { border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.72); overflow: hidden; } body.smalo-account-page .smalo-account-order-group-heading { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(162, 192, 206, 0.18); background: rgba(162, 192, 206, 0.12); padding: 0.85rem 1rem; } body.smalo-account-page .smalo-account-order-group-heading h3 { margin: 0; color: #3a4750; font-size: 1rem; font-weight: 800; } body.smalo-account-page .smalo-account-order-group-heading span { display: inline-flex; min-width: 2rem; min-height: 2rem; align-items: center; justify-content: center; border-radius: 9999px; background: #ffffff; color: #3a4750; font-size: 0.82rem; font-weight: 800; } body.smalo-account-page .smalo-account-order-list { display: grid; gap: 0.75rem; padding: 0.85rem; } body.smalo-account-page .smalo-account-order-card { display: grid; gap: 0.85rem; border: 1px solid rgba(162, 192, 206, 0.18); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.smalo-account-page .smalo-account-order-card-main, body.smalo-account-page .smalo-account-order-summary { display: flex; gap: 0.85rem; align-items: center; justify-content: space-between; } body.smalo-account-page .smalo-account-order-card-main p, body.smalo-account-page .smalo-account-order-summary span { margin: 0; color: rgba(58, 71, 80, 0.62); font-size: 0.92rem; line-height: 1.45; } body.smalo-account-page .smalo-account-status-pill { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; background: rgba(162, 192, 206, 0.16); color: #3a4750; font-size: 0.78rem; font-weight: 800; padding: 0.35rem 0.7rem; white-space: nowrap; } body.smalo-account-page .smalo-account-order-summary { border-top: 1px solid rgba(162, 192, 206, 0.16); padding-top: 0.8rem; } body.smalo-account-page .smalo-account-order-summary strong { color: #3a4750; font-size: 1.05rem; } body.smalo-account-page .smalo-account-order-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } body.smalo-account-page .smalo-account-order-action { display: inline-flex; box-sizing: border-box; min-width: 7.25rem; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.42); border-radius: 9999px; background: #ffffff; color: #3a4750; font-size: 0.9rem; font-weight: 800; line-height: 1; padding: 0 1.25rem; text-decoration: none; touch-action: manipulation; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-account-page .smalo-account-order-action.pay { border-color: rgba(58, 71, 80, 0.96); background: #3a4750; color: #ffffff; box-shadow: 0 0.45rem 1rem rgba(58, 71, 80, 0.14); } body.smalo-account-page .smalo-account-order-action.view { border-color: rgba(162, 192, 206, 0.62); background: rgba(162, 192, 206, 0.08); color: #3a4750; } body.smalo-account-page .smalo-account-order-action.pay:hover { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; box-shadow: 0 0.55rem 1.2rem rgba(255, 157, 126, 0.2); transform: translateY(-1px); } body.smalo-account-page .smalo-account-order-action.view:hover { border-color: rgba(255, 157, 126, 0.68); background: rgba(255, 157, 126, 0.12); color: #3a4750; box-shadow: 0 0.45rem 1rem rgba(58, 71, 80, 0.08); transform: translateY(-1px); } body.smalo-account-page .smalo-account-empty-state { display: grid; justify-items: start; gap: 0.8rem; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.13), rgba(255, 255, 255, 0.88)), #ffffff; padding: 1.2rem; } body.smalo-account-page .smalo-account-empty-state h3, body.smalo-account-page .smalo-account-empty-state p { margin: 0; } body.smalo-account-page .smalo-account-empty-state h3 { color: #3a4750; font-size: 1.2rem; font-weight: 800; } body.smalo-account-page .smalo-account-empty-state p { color: rgba(58, 71, 80, 0.68); line-height: 1.6; } body.smalo-account-page .smalo-account-dashboard-grid + .smalo-account-native-content { border-top: 1px solid rgba(162, 192, 206, 0.18); padding-top: 1.1rem; } body.smalo-account-page .woocommerce-MyAccount-navigation { display: none; } body.smalo-account-page .woocommerce-MyAccount-content { width: 100%; float: none; color: rgba(58, 71, 80, 0.72); line-height: 1.65; } body.smalo-account-page .woocommerce-MyAccount-content p:first-child { margin-top: 0; } body.smalo-account-page .woocommerce table.shop_table, body.smalo-account-page .woocommerce table.account-orders-table { overflow: hidden; width: 100%; border: 1px solid rgba(162, 192, 206, 0.22); border-collapse: separate; border-radius: 0.5rem; border-spacing: 0; background: #ffffff; } body.smalo-account-page .woocommerce table.shop_table th, body.smalo-account-page .woocommerce table.shop_table td { border: 0; border-bottom: 1px solid rgba(162, 192, 206, 0.16); padding: 0.9rem; color: #3a4750; text-align: left; } body.smalo-account-page .woocommerce table.shop_table th { background: rgba(162, 192, 206, 0.12); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } body.smalo-account-page .woocommerce table.shop_table tr:last-child td { border-bottom: 0; } body.smalo-account-page .woocommerce-Address { border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; padding: 1rem; background: #ffffff; } body.smalo-account-page .woocommerce-Address-title { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; } body.smalo-account-page .woocommerce-Address-title h3 { float: none; } body.smalo-account-page .woocommerce-Address-title a { float: none; } body.smalo-account-page .smalo-account-native-content--view-order { display: grid; gap: 1rem; margin-top: 1rem; } body.smalo-account-page .smalo-account-native-content--view-order > p:first-child { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: rgba(162, 192, 206, 0.08); color: rgba(58, 71, 80, 0.74); font-size: 0.98rem; line-height: 1.6; padding: 0.95rem 1rem; } body.smalo-account-page .smalo-account-native-content--view-order mark { display: inline-flex; min-height: 2rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.38); border-radius: 9999px; background: #ffffff; color: #3a4750; font-weight: 800; padding: 0.25rem 0.7rem; } body.smalo-account-page .smalo-account-native-content--view-order mark.order-status { border-color: rgba(255, 157, 126, 0.45); background: rgba(255, 157, 126, 0.12); } body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-order-details, body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-customer-details, body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-OrderUpdates { margin: 0; } body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-order-details, body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-customer-details { border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-order-details__title, body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-column__title, body.smalo-account-page .smalo-account-native-content--view-order > h2 { margin: 0 0 0.9rem; color: #3a4750; font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 800; line-height: 1.2; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details { margin: 0; border-color: rgba(162, 192, 206, 0.24); box-shadow: none; table-layout: fixed; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details .product-name, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot th { width: 70%; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details .product-total, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot td { width: 30%; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details th, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details td { padding: 1rem; vertical-align: middle; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details thead th { background: rgba(162, 192, 206, 0.14); color: #3a4750; font-size: 0.78rem; letter-spacing: 0.08em; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details .product-total, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details td.product-total, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot td { text-align: right; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details .product-name a { color: #3a4750; font-weight: 800; text-decoration-color: rgba(255, 157, 126, 0.45); } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot th { background: #ffffff; box-sizing: border-box; font-size: 0.92rem; letter-spacing: 0; padding-right: calc(40% + 1rem); text-align: right; text-transform: none; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot tr:last-child th, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot tr:last-child td { border-bottom: 0; font-size: 1.05rem; font-weight: 800; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot:first-of-type th, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot:first-of-type td { font-size: 0.92rem; } body.smalo-account-page .smalo-account-native-content--view-order .order-actions-button.button, body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-button.button { box-sizing: border-box; min-width: 8.75rem; min-height: 3.1rem; padding: 0 1.55rem; border-radius: 9999px; font-size: 0.95rem; font-weight: 800; line-height: 1; touch-action: manipulation; } body.smalo-account-page .smalo-account-native-content--view-order .order-actions-button.pay { display: inline-flex !important; min-width: 8.75rem !important; min-height: 3.1rem !important; align-items: center; justify-content: center; border-color: rgba(255, 157, 126, 0.72) !important; background: #ff9d7e !important; color: #3a4750 !important; box-shadow: 0 0.65rem 1.4rem rgba(255, 157, 126, 0.24); } body.smalo-account-page .smalo-account-native-content--view-order .order-actions-button.pay:hover { border-color: #a2c0ce !important; background: #a2c0ce !important; color: #3a4750 !important; box-shadow: 0 0.75rem 1.6rem rgba(162, 192, 206, 0.28); transform: translateY(-1px); } body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-customer-details address { margin: 0; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: rgba(250, 249, 246, 0.64); color: rgba(58, 71, 80, 0.72); font-size: 0.98rem; font-style: normal; line-height: 1.7; padding: 1rem; } body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-columns--addresses { display: grid; gap: 1rem; } body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-column { width: auto; float: none; } body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-OrderUpdates { display: grid; gap: 0.75rem; padding: 0; list-style: none; } body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-OrderUpdate { border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.smalo-account-page .smalo-account-native-content--view-order .smalo-order-details-card { display: grid; gap: 1rem; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.smalo-account-page .smalo-order-details-header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; } body.smalo-account-page .smalo-order-details-header .woocommerce-order-details__title { margin-bottom: 0; } body.smalo-account-page .smalo-order-details-kicker { margin: 0 0 0.35rem; color: rgba(58, 71, 80, 0.58); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } body.smalo-account-page .smalo-order-details-count { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.38); border-radius: 9999px; background: rgba(162, 192, 206, 0.12); color: #3a4750; font-size: 0.78rem; font-weight: 800; padding: 0.35rem 0.7rem; white-space: nowrap; } body.smalo-account-page .smalo-order-details-layout { display: grid; gap: 1rem; } body.smalo-account-page .smalo-order-products { display: grid; gap: 0.75rem; min-width: 0; } body.smalo-account-page .smalo-order-product-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; border: 1px solid rgba(162, 192, 206, 0.18); border-radius: 0.5rem; background: rgba(250, 249, 246, 0.5); padding: 1rem; } body.smalo-account-page .smalo-order-product-main { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.85rem; align-items: center; min-width: 0; } body.smalo-account-page .smalo-order-product-image { display: flex; width: 4.75rem; height: 4.75rem; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.14), rgba(255, 157, 126, 0.08)), #faf9f6; box-shadow: 0 0.5rem 1.2rem rgba(58, 71, 80, 0.06); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.smalo-account-page a.smalo-order-product-image:hover { border-color: rgba(255, 157, 126, 0.58); box-shadow: 0 0.65rem 1.35rem rgba(255, 157, 126, 0.16); transform: translateY(-1px); } body.smalo-account-page a.smalo-order-product-image:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.smalo-account-page .smalo-order-product-image-img { display: block; width: 100%; height: 100%; object-fit: cover; } body.smalo-account-page .smalo-order-product-copy { display: grid; gap: 0.4rem; min-width: 0; } body.smalo-account-page .smalo-order-product-name { margin: 0; color: #3a4750; font-size: clamp(1.05rem, 2vw, 1.28rem); font-weight: 800; line-height: 1.25; } body.smalo-account-page .smalo-order-product-name a { display: inline; border-radius: 0.28rem; color: inherit; outline: none; text-decoration-color: rgba(255, 157, 126, 0.48); text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, text-decoration-color 0.2s ease; } body.smalo-account-page .smalo-order-product-name a:hover { color: #ff9d7e; text-decoration-color: #ff9d7e; } body.smalo-account-page .smalo-order-product-name a:focus-visible { background: rgba(255, 157, 126, 0.12); color: #3a4750; box-shadow: 0 0 0 0.22rem rgba(255, 157, 126, 0.14); text-decoration-color: #ff9d7e; } body.smalo-account-page .smalo-order-product-quantity { display: inline-flex; width: fit-content; min-height: 1.85rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 9999px; background: #ffffff; color: rgba(58, 71, 80, 0.7); font-size: 0.82rem; font-weight: 800; line-height: 1; padding: 0.35rem 0.65rem; } body.smalo-account-page .smalo-order-product-row .wc-item-meta { display: grid; gap: 0.2rem; margin: 0.2rem 0 0; padding: 0; color: rgba(58, 71, 80, 0.64); font-size: 0.9rem; list-style: none; } body.smalo-account-page .smalo-order-product-row .wc-item-meta li { display: flex; flex-wrap: wrap; gap: 0.35rem; } body.smalo-account-page .smalo-order-product-row .wc-item-meta p { margin: 0; } body.smalo-account-page .smalo-order-product-total { color: #3a4750; font-size: clamp(1.05rem, 2vw, 1.28rem); font-variant-numeric: tabular-nums; line-height: 1.25; text-align: right; white-space: nowrap; } body.smalo-account-page .smalo-order-purchase-note { border: 1px solid rgba(255, 157, 126, 0.28); border-radius: 0.5rem; background: rgba(255, 157, 126, 0.08); color: rgba(58, 71, 80, 0.72); padding: 0.85rem 1rem; } body.smalo-account-page .smalo-order-purchase-note p { margin: 0; } body.smalo-account-page .smalo-order-summary { display: grid; gap: 1rem; min-width: 0; align-content: start; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.12), rgba(255, 255, 255, 0.94)), #ffffff; padding: 1rem; } body.smalo-account-page .smalo-order-summary-totals { display: grid; gap: 0.65rem; } body.smalo-account-page .smalo-order-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; color: rgba(58, 71, 80, 0.68); font-size: 0.95rem; } body.smalo-account-page .smalo-order-summary-row span { font-weight: 800; } body.smalo-account-page .smalo-order-summary-row strong { color: #3a4750; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } body.smalo-account-page .smalo-order-summary-row--order_total { border-top: 1px solid rgba(162, 192, 206, 0.22); margin-top: 0.2rem; padding-top: 0.85rem; } body.smalo-account-page .smalo-order-summary-row--order_total span, body.smalo-account-page .smalo-order-summary-row--order_total strong { color: #3a4750; font-size: 1.1rem; font-weight: 800; } body.smalo-account-page .smalo-order-summary-note { display: grid; gap: 0.4rem; border-top: 1px solid rgba(162, 192, 206, 0.18); padding-top: 0.85rem; } body.smalo-account-page .smalo-order-summary-note span { color: #3a4750; font-size: 0.9rem; font-weight: 800; } body.smalo-account-page .smalo-order-summary-note p { margin: 0; color: rgba(58, 71, 80, 0.68); line-height: 1.55; } body.smalo-account-page .smalo-order-actions { display: grid; gap: 0.75rem; border-top: 1px solid rgba(162, 192, 206, 0.18); padding-top: 0.95rem; } body.smalo-account-page .smalo-order-actions p { margin: 0; color: #3a4750; font-size: 0.9rem; font-weight: 800; } body.smalo-account-page .smalo-order-actions .order-actions-button.button { width: 100%; min-width: 0 !important; } body.smalo-account-page .smalo-order-actions .order-actions-button.pay { border-color: rgba(255, 157, 126, 0.78) !important; background: #ff9d7e !important; color: #3a4750 !important; } body.smalo-account-page .smalo-account-address-workspace { display: grid; gap: 1rem; } body.smalo-account-page .smalo-account-address-heading { margin-bottom: 0; } body.smalo-account-page .smalo-account-shipping-card { display: grid; gap: 1rem; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(250, 249, 246, 0.94), rgba(255, 255, 255, 0.98)), #ffffff; box-shadow: 0 16px 38px rgba(58, 71, 80, 0.08); padding: 1.1rem; } body.smalo-account-page .smalo-account-shipping-card.is-empty { border-style: dashed; background: linear-gradient(135deg, rgba(162, 192, 206, 0.13), rgba(255, 255, 255, 0.94)), #ffffff; } body.smalo-account-page .smalo-account-shipping-card-main { display: flex; gap: 1rem; align-items: start; justify-content: space-between; } body.smalo-account-page .smalo-account-shipping-card h3 { margin: 0.45rem 0 0; color: #3a4750; font-size: clamp(1.2rem, 2.5vw, 1.55rem); font-weight: 800; line-height: 1.15; } body.smalo-account-page .smalo-account-shipping-card p, body.smalo-account-page .smalo-account-shipping-card address { margin: 0; color: rgba(58, 71, 80, 0.68); font-style: normal; line-height: 1.65; } body.smalo-account-page .smalo-account-shipping-card address { border-top: 1px solid rgba(162, 192, 206, 0.18); color: #3a4750; padding-top: 0.95rem; } body.smalo-account-page .smalo-account-address-badge, body.smalo-account-page .smalo-account-address-status { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; border-radius: 9999px; font-size: 0.76rem; font-weight: 800; line-height: 1; padding: 0.4rem 0.7rem; white-space: nowrap; } body.smalo-account-page .smalo-account-address-badge { border: 1px solid rgba(162, 192, 206, 0.35); background: rgba(162, 192, 206, 0.14); color: #3a4750; } body.smalo-account-page .smalo-account-address-status { border: 1px solid rgba(255, 157, 126, 0.38); background: rgba(255, 157, 126, 0.12); color: #3a4750; } body.smalo-account-page .smalo-account-address-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; } body.smalo-account-page .smalo-account-delete-address-form { display: inline-flex; margin: 0; } body.smalo-account-page .smalo-account-delete-address-form button[disabled] { cursor: wait; opacity: 0.72; transform: none; } .smalo-account-modal-open { overflow: hidden; } .smalo-account-confirm { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: calc(var(--smalo-admin-bar-height, 0px) + 1rem) 1rem 1rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; } .smalo-account-confirm.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .smalo-account-confirm__backdrop { position: absolute; inset: 0; background: rgba(58, 71, 80, 0.5); backdrop-filter: blur(4px); } .smalo-account-confirm__dialog { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; width: min(100%, 29rem); border: 1px solid rgba(162, 192, 206, 0.38); border-radius: 0.75rem; background: linear-gradient(145deg, rgba(250, 249, 246, 0.98), rgba(255, 255, 255, 0.98)), #faf9f6; box-shadow: 0 24px 70px rgba(58, 71, 80, 0.24); color: #3a4750; padding: 1.15rem; transform: translateY(0.6rem) scale(0.985); transition: transform 0.22s ease; } .smalo-account-confirm.is-open .smalo-account-confirm__dialog { transform: translateY(0) scale(1); } .smalo-account-confirm__mark { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgba(255, 157, 126, 0.42); border-radius: 50%; background: rgba(255, 157, 126, 0.14); } .smalo-account-confirm__mark span { display: block; width: 1rem; height: 1rem; border-radius: 50%; background: #ff9d7e; box-shadow: 0 0 0 0.35rem rgba(255, 157, 126, 0.18), 0 8px 18px rgba(255, 157, 126, 0.26); } .smalo-account-confirm__content { min-width: 0; } .smalo-account-confirm__eyebrow, .smalo-account-confirm__dialog h2, .smalo-account-confirm__dialog p { margin: 0; } .smalo-account-confirm__eyebrow { color: rgba(58, 71, 80, 0.58); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .smalo-account-confirm__dialog h2 { margin-top: 0.3rem; color: #3a4750; font-size: 1.35rem; font-weight: 850; letter-spacing: 0; line-height: 1.18; } .smalo-account-confirm__dialog p:not(.smalo-account-confirm__eyebrow) { margin-top: 0.55rem; color: rgba(58, 71, 80, 0.72); font-size: 0.95rem; line-height: 1.6; } .smalo-account-confirm__actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 0.65rem; justify-content: flex-end; margin-top: 0.25rem; } .smalo-account-confirm__button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 800; letter-spacing: 0; padding: 0.75rem 1rem; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease; } .smalo-account-confirm__button--secondary { border: 1px solid rgba(162, 192, 206, 0.46); background: #ffffff; color: #3a4750; } .smalo-account-confirm__button--secondary:hover { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.12); transform: translateY(-1px); } .smalo-account-confirm__button--danger { border: 1px solid #ff9d7e; background: #ff9d7e; color: #3a4750; box-shadow: 0 12px 26px rgba(255, 157, 126, 0.24); } .smalo-account-confirm__button--danger:hover { border-color: #3a4750; background: #3a4750; color: #ffffff; transform: translateY(-1px); } .smalo-account-confirm__button:active { transform: translateY(0); } .smalo-account-confirm__button:focus-visible, .smalo-account-confirm__dialog:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.smalo-account-page .smalo-account-address-edit .smalo-account-shipping-form { margin-top: 0; border: 1px solid rgba(162, 192, 206, 0.26); border-radius: 0.85rem; background: linear-gradient(180deg, rgba(250, 249, 246, 0.72), rgba(255, 255, 255, 0.98)), #ffffff; box-shadow: 0 18px 44px rgba(58, 71, 80, 0.08); padding: 1.15rem; } body.smalo-account-page .smalo-account-address-edit .smalo-account-shipping-form form { display: grid; gap: 1rem; margin: 0; } body.smalo-account-page .smalo-account-address-edit .smalo-account-shipping-form form > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields { margin-top: 0; } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } body.smalo-account-page .smalo-account-address-edit .form-row { float: none; clear: none; width: auto; min-width: 0; margin: 0; } body.smalo-account-page .smalo-account-address-edit .form-row-wide, body.smalo-account-page .smalo-account-address-edit .form-row.address-field, body.smalo-account-page .smalo-account-address-edit #shipping_address_1_field, body.smalo-account-page .smalo-account-address-edit #shipping_address_2_field { grid-column: 1 / -1; } body.smalo-account-page .smalo-account-address-edit .clear { display: none; } body.smalo-account-page .smalo-account-address-edit label { color: #3a4750; font-size: 0.86rem; letter-spacing: 0; transition: color 0.18s ease; } body.smalo-account-page .smalo-account-address-edit .form-row:focus-within label { color: #ff9d7e; } body.smalo-account-page .smalo-account-address-edit .woocommerce-input-wrapper { display: block; width: 100%; } body.smalo-account-page .smalo-account-address-edit input.input-text, body.smalo-account-page .smalo-account-address-edit input[type="text"], body.smalo-account-page .smalo-account-address-edit input[type="tel"], body.smalo-account-page .smalo-account-address-edit input[type="email"], body.smalo-account-page .smalo-account-address-edit select, body.smalo-account-page .smalo-account-address-edit textarea { margin: 0; box-sizing: border-box; border-color: rgba(162, 192, 206, 0.34); border-radius: 0.875rem; background: rgba(255, 255, 255, 0.96); box-shadow: inset 0 1px 0 rgba(250, 249, 246, 0.9); } body.smalo-account-page .smalo-account-address-edit input.input-text:hover, body.smalo-account-page .smalo-account-address-edit input[type="text"]:hover, body.smalo-account-page .smalo-account-address-edit input[type="tel"]:hover, body.smalo-account-page .smalo-account-address-edit input[type="email"]:hover, body.smalo-account-page .smalo-account-address-edit select:hover, body.smalo-account-page .smalo-account-address-edit textarea:hover { border-color: rgba(162, 192, 206, 0.66); background: #ffffff; } body.smalo-account-page .smalo-account-address-edit input.input-text:focus, body.smalo-account-page .smalo-account-address-edit input[type="text"]:focus, body.smalo-account-page .smalo-account-address-edit input[type="tel"]:focus, body.smalo-account-page .smalo-account-address-edit input[type="email"]:focus, body.smalo-account-page .smalo-account-address-edit select:focus, body.smalo-account-page .smalo-account-address-edit textarea:focus, body.smalo-account-page .smalo-account-address-edit input.input-text:focus-visible, body.smalo-account-page .smalo-account-address-edit input[type="text"]:focus-visible, body.smalo-account-page .smalo-account-address-edit input[type="tel"]:focus-visible, body.smalo-account-page .smalo-account-address-edit input[type="email"]:focus-visible, body.smalo-account-page .smalo-account-address-edit select:focus-visible, body.smalo-account-page .smalo-account-address-edit textarea:focus-visible { border-color: #ff9d7e; background: #ffffff; outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 22px rgba(58, 71, 80, 0.06); } body.smalo-account-page .smalo-account-address-edit input:-webkit-autofill, body.smalo-account-page .smalo-account-address-edit input:-webkit-autofill:hover, body.smalo-account-page .smalo-account-address-edit input:-webkit-autofill:focus { border-color: rgba(162, 192, 206, 0.5); -webkit-text-fill-color: #3a4750; box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 4px rgba(255, 157, 126, 0.12); transition: background-color 9999s ease-out 0s; } body.smalo-account-page .smalo-account-address-edit .select2-container { width: 100% !important; } body.smalo-account-page .smalo-account-address-edit .select2-container--default .select2-selection--single { display: flex; min-height: 3rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 0.875rem; background: rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 0 rgba(250, 249, 246, 0.9); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.smalo-account-page .smalo-account-address-edit .select2-container--default .select2-selection--single:hover { border-color: rgba(162, 192, 206, 0.66); background: #ffffff; } body.smalo-account-page .smalo-account-address-edit .select2-container--default.select2-container--focus .select2-selection--single, body.smalo-account-page .smalo-account-address-edit .select2-container--default.select2-container--open .select2-selection--single { border-color: #ff9d7e; background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 22px rgba(58, 71, 80, 0.06); } body.smalo-account-page .smalo-account-address-edit .select2-container--default .select2-selection--single .select2-selection__rendered { width: 100%; color: #3a4750; line-height: 1.45; padding: 0.72rem 2.4rem 0.72rem 0.9rem; } body.smalo-account-page .smalo-account-address-edit .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(58, 71, 80, 0.48); } body.smalo-account-page .smalo-account-address-edit .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 0.7rem; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); } body.smalo-account-page .select2-container--open .select2-dropdown { overflow: hidden; border: 1px solid rgba(255, 157, 126, 0.36); border-radius: 0.875rem; background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.1), 0 18px 38px rgba(58, 71, 80, 0.14); } body.smalo-account-page .select2-container--open .select2-dropdown--below { margin-top: 0; border-top-left-radius: 0.875rem !important; border-top-right-radius: 0.875rem !important; transform: translateY(0.65rem); } body.smalo-account-page .select2-container--open .select2-dropdown--above { margin-top: 0; border-bottom-left-radius: 0.875rem !important; border-bottom-right-radius: 0.875rem !important; transform: translateY(-0.65rem); } body.smalo-account-page .select2-search--dropdown { border-bottom: 1px solid rgba(162, 192, 206, 0.16); background: #ffffff; padding: 0.85rem 0.85rem 0.7rem; } body.smalo-account-page .select2-container--default .select2-search--dropdown .select2-search__field { width: 100% !important; height: 2.35rem; min-height: 0; box-sizing: border-box; border: 1px solid rgba(162, 192, 206, 0.34); border-radius: 0.65rem; background: #faf9f6; color: #3a4750; font: inherit; line-height: 1.2; outline: none; padding: 0.45rem 0.7rem; } body.smalo-account-page .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #ff9d7e; background: #ffffff; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.12); } body.smalo-account-page .select2-results__option { color: #3a4750; font-size: 0.94rem; line-height: 1.35; padding: 0.62rem 0.85rem; } body.smalo-account-page .select2-container--default .select2-results__option--highlighted[aria-selected], body.smalo-account-page .select2-container--default .select2-results__option--highlighted[data-selected] { background: rgba(162, 192, 206, 0.18); color: #3a4750; } body.smalo-account-page .select2-container--default .select2-results__option[aria-selected="true"], body.smalo-account-page .select2-container--default .select2-results__option[data-selected="true"] { background: rgba(255, 157, 126, 0.16); color: #3a4750; } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields > p { display: flex; justify-content: flex-end; margin: 1.15rem 0 0; border-top: 1px solid rgba(162, 192, 206, 0.2); padding-top: 1rem; } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields button.button { min-width: 12rem; min-height: 3.15rem; border-radius: 9999px; border-color: #a2c0ce !important; background: #a2c0ce !important; color: #3a4750 !important; box-shadow: 0 10px 24px rgba(162, 192, 206, 0.24); } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields button.button:hover { border-color: #ff9d7e !important; background: #ff9d7e !important; color: #3a4750 !important; box-shadow: 0 12px 26px rgba(255, 157, 126, 0.24); transform: translateY(-1px); } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields button.button:disabled, body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields button.button:disabled:hover { border-color: rgba(162, 192, 206, 0.42) !important; background: rgba(162, 192, 206, 0.18) !important; color: rgba(58, 71, 80, 0.55) !important; box-shadow: none !important; transform: none !important; } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields button.button:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(255, 157, 126, 0.18); } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields button.button:focus, body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields button.button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.18), 0 10px 24px rgba(162, 192, 206, 0.24); } body.smalo-account-page .woocommerce-message, body.smalo-account-page .woocommerce-info, body.smalo-account-page .woocommerce-error { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 1rem; border: 1px solid rgba(162, 192, 206, 0.26); border-left: 4px solid #a2c0ce; border-radius: 0.5rem; background: #ffffff; color: #3a4750; line-height: 1.5; padding: 0.9rem 1rem; list-style: none; } body.smalo-account-page .woocommerce-error { border-left-color: #ff9d7e; } body.smalo-account-page .woocommerce-message::before, body.smalo-account-page .woocommerce-info::before, body.smalo-account-page .woocommerce-error::before { display: none; } body.smalo-account-page .woocommerce-password-strength, body.smalo-account-page .woocommerce-password-hint { border-radius: 0.5rem; margin-top: 0.45rem; padding: 0.65rem 0.75rem; color: #3a4750; font-size: 0.88rem; } body.smalo-account-page .smalo-account-button:focus-visible, body.smalo-account-page .smalo-account-nav a:focus-visible, body.smalo-account-page .smalo-account-card-heading a:focus-visible, body.smalo-account-page .smalo-account-order-number:focus-visible, body.smalo-account-page .smalo-account-order-action:focus-visible, body.smalo-account-page .smalo-account-logout-link:focus-visible, body.smalo-account-page .woocommerce-MyAccount-content a:focus-visible, body.smalo-account-page .woocommerce-LostPassword a:focus-visible, body.smalo-account-page .woocommerce .button:focus-visible, body.smalo-account-page .woocommerce button.button:focus-visible, body.smalo-account-page .woocommerce input.button:focus-visible, body.smalo-account-page .smalo-account-password-toggle:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } @media (min-width: 768px) { body.smalo-account-page .smalo-account-auth-panel { padding: 1.3rem; } body.smalo-account-page .smalo-account-auth-panel .u-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.smalo-account-page .smalo-account-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.smalo-account-page .smalo-account-details-card { padding: 1.15rem; } body.smalo-account-page .smalo-account-details-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.smalo-account-page .smalo-account-main { padding-top: 2rem; } body.smalo-account-page .smalo-account-hero .smalo-account-shell { grid-template-columns: minmax(0, 1fr) auto; } body.smalo-account-page .smalo-account-layout { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); align-items: start; } body.smalo-account-page .smalo-account-sidebar { position: sticky; top: calc(var(--smalo-admin-bar-height, 0px) + 5.75rem); } body.smalo-account-page .smalo-account-nav { display: grid; grid-template-columns: 1fr; overflow: visible; } body.smalo-account-page .smalo-account-nav a { justify-content: flex-start; border-radius: 0.5rem; } body.smalo-account-page .smalo-account-actions { padding: 0.9rem; } body.smalo-account-page .smalo-account-logout-link { justify-content: flex-start; border-radius: 0.5rem; } body.smalo-account-page .smalo-account-panel { padding: 1.25rem; } body.smalo-account-page .smalo-account-native-content--edit-account { max-width: 58rem; } body.smalo-account-page .smalo-account-details-card { padding: 1.25rem; } body.smalo-account-page .smalo-account-dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.smalo-account-page .smalo-account-card-feature { grid-column: span 2; } body.smalo-account-page .smalo-order-details-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); align-items: start; } } @media (max-width: 640px) { body.smalo-account-page .smalo-account-main { padding-top: 0.75rem; } body.smalo-account-page .smalo-account-shell { width: min(100% - 1.2rem, 1180px); } body.smalo-account-page .smalo-account-hero { padding-top: 0.6rem; } body.smalo-account-page .smalo-account-hero .smalo-account-shell { gap: 0.7rem; } body.smalo-account-page .smalo-account-kicker { margin-bottom: 0.3rem; font-size: 0.72rem; } body.smalo-account-page .smalo-account-hero h1 { font-size: 1.9rem; line-height: 1.05; } body.smalo-account-page .smalo-account-lede { margin-top: 0.45rem; font-size: 0.96rem; line-height: 1.48; } body.smalo-account-page .smalo-account-hero-actions { display: grid; grid-template-columns: 1fr; gap: 0.65rem; } body.smalo-account-page .smalo-account-content { padding-top: 0.55rem; } body.smalo-account-page .smalo-account-sidebar, body.smalo-account-page .smalo-account-panel { border-radius: 0.75rem; } body.smalo-account-page .smalo-account-nav { gap: 0.42rem; overflow: visible; padding: 0.55rem; } body.smalo-account-page .smalo-account-nav a { min-height: 3rem; border-radius: 0.7rem; font-size: 0.82rem; line-height: 1.15; padding: 0.56rem 0.34rem; } body.smalo-account-page .smalo-account-nav-label { display: none; } body.smalo-account-page .smalo-account-nav-label-short { display: inline; } body.smalo-account-page .smalo-account-actions { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.72rem 0.65rem 0.65rem; } body.smalo-account-page .smalo-account-actions-user span { font-size: 0.68rem; } body.smalo-account-page .smalo-account-actions-user strong { font-size: 0.9rem; } body.smalo-account-page .smalo-account-logout-link { min-height: 2.55rem; padding: 0.62rem 0.8rem; white-space: nowrap; } body.smalo-account-page .smalo-account-hero-actions, body.smalo-account-page .smalo-account-button, body.smalo-account-page .woocommerce .button, body.smalo-account-page .woocommerce button.button, body.smalo-account-page .woocommerce input.button { width: 100%; } body.smalo-account-page .woocommerce table.shop_table, body.smalo-account-page .woocommerce table.shop_table thead, body.smalo-account-page .woocommerce table.shop_table tbody, body.smalo-account-page .woocommerce table.shop_table tr, body.smalo-account-page .woocommerce table.shop_table th, body.smalo-account-page .woocommerce table.shop_table td { display: block; } body.smalo-account-page .woocommerce table.shop_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.smalo-account-page .woocommerce table.shop_table tr { border-bottom: 1px solid rgba(162, 192, 206, 0.2); padding: 0.8rem; } body.smalo-account-page .woocommerce table.shop_table td { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; border-bottom: 0; padding: 0.45rem 0; text-align: right; } body.smalo-account-page .woocommerce table.shop_table td::before { content: attr(data-title); color: rgba(58, 71, 80, 0.58); font-size: 0.78rem; font-weight: 800; text-align: left; text-transform: uppercase; } body.smalo-account-page .smalo-account-section-heading, body.smalo-account-page .smalo-account-order-card-main, body.smalo-account-page .smalo-account-order-summary, body.smalo-account-page .smalo-account-shipping-card-main { align-items: stretch; flex-direction: column; } body.smalo-account-page .smalo-account-section-heading .smalo-account-button, body.smalo-account-page .smalo-account-order-actions, body.smalo-account-page .smalo-account-order-action, body.smalo-account-page .smalo-account-address-actions, body.smalo-account-page .smalo-account-delete-address-form { width: 100%; } body.smalo-account-page .smalo-account-address-status { width: fit-content; } body.smalo-account-page .smalo-account-address-edit .smalo-account-shipping-form { padding: 0.85rem; } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; gap: 0.85rem; } body.smalo-account-page .smalo-account-address-edit .form-row { grid-column: 1 / -1; } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields > p { display: block; margin-top: 1rem; } body.smalo-account-page .smalo-account-address-edit .woocommerce-address-fields button.button { width: 100%; } body.smalo-account-page .smalo-account-details-card { padding: 0.9rem; } body.smalo-account-page .smalo-account-details-card-heading { padding-bottom: 0.75rem; } body.smalo-account-page .smalo-account-details-actions { align-items: stretch; flex-direction: column; padding: 0.75rem; } body.smalo-account-page .smalo-account-details-actions button[name="save_account_details"] { width: 100%; } body.smalo-account-page .smalo-account-native-content--view-order > p:first-child { align-items: flex-start; flex-direction: column; } body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-order-details, body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-customer-details { padding: 0.85rem; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details th, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details td { padding: 0.65rem 0; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot td::before { content: none; } body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details .product-total, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details td.product-total, body.smalo-account-page .smalo-account-native-content--view-order table.shop_table.order_details tfoot td { text-align: left; } body.smalo-account-page .smalo-account-native-content--view-order .order-actions-button.button, body.smalo-account-page .smalo-account-native-content--view-order .woocommerce-button.button { width: 100%; } body.smalo-account-page .smalo-order-details-card { padding: 0.85rem; } body.smalo-account-page .smalo-order-details-header, body.smalo-account-page .smalo-order-product-row { grid-template-columns: 1fr; } body.smalo-account-page .smalo-order-details-header { align-items: stretch; flex-direction: column; } body.smalo-account-page .smalo-order-details-count { width: fit-content; } body.smalo-account-page .smalo-order-product-row { gap: 0.75rem; padding: 0.85rem; } body.smalo-account-page .smalo-order-product-main { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.75rem; } body.smalo-account-page .smalo-order-product-image { width: 4rem; height: 4rem; } body.smalo-account-page .smalo-order-product-total { text-align: left; } body.smalo-account-page .smalo-order-summary { padding: 0.85rem; } .smalo-account-confirm { align-items: end; padding: calc(var(--smalo-admin-bar-height, 0px) + 0.75rem) 0.75rem 0.75rem; } .smalo-account-confirm__dialog { grid-template-columns: 1fr; gap: 0.8rem; padding: 1rem; } .smalo-account-confirm__mark { width: 2.4rem; height: 2.4rem; } .smalo-account-confirm__dialog h2 { font-size: 1.2rem; } .smalo-account-confirm__actions, .smalo-account-confirm__button { width: 100%; } } @media (prefers-reduced-motion: reduce) { body.smalo-account-page .smalo-account-button, body.smalo-account-page .smalo-account-nav a, body.smalo-account-page .smalo-account-logout-link, body.smalo-account-page .smalo-account-card-heading a, body.smalo-account-page .smalo-account-order-action, body.smalo-account-page .woocommerce-MyAccount-content a, body.smalo-account-page .woocommerce-LostPassword a, body.smalo-account-page .woocommerce input, body.smalo-account-page .woocommerce select, body.smalo-account-page .woocommerce textarea, body.smalo-account-page .woocommerce .button, body.smalo-account-page .woocommerce button.button, body.smalo-account-page .woocommerce input.button, body.smalo-account-page .smalo-account-password-toggle, .smalo-account-confirm, .smalo-account-confirm__dialog, .smalo-account-confirm__button { transition: none !important; } body.smalo-account-page .smalo-account-button:hover, body.smalo-account-page .smalo-account-nav a:hover, body.smalo-account-page .smalo-account-order-action:hover, body.smalo-account-page .woocommerce .button:hover, body.smalo-account-page .woocommerce button.button:hover, body.smalo-account-page .woocommerce input.button:hover, .smalo-account-confirm__button:hover { transform: none; } }